/* ============================================================
   KAMASA B2B - RESPONSIVE MAIN SYSTEM
   Objective: Adaptive layer for mobile without breaking desktop
   Rules: Use @media (max-width) only. Desktop is base.
   ============================================================ */

:root {
    --mobile: 480px;
    --tablet: 768px;
    --laptop: 1024px;
}

/* --- OVERFLOW & BASE FIX --- */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent horizontal scroll from large elements */
* {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* --- GLOBAL ELEMENTS --- */
.k-header-quote-icon,
.k-header__menu-toggle,
.k-mobile-nav-drawer,
.k-mobile-nav-overlay,
.k-header__logo-mobile {
    display: none !important;
}

/* Enforce desktop dropdown z-index to break free from any local trapping */
.k-header .k-progressive-menu-container {
    z-index: 99999999 !important;
}
.k-header-center {
    z-index: 900000 !important;
}

/* --- TYPOGRAPHY SCALING --- */
@media (max-width: 768px) {

    h1,
    .h1,
    .section-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    h2,
    .h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h3,
    .h3 {
        font-size: 1.3rem !important;
    }

    p,
    .p,
    span,
    li,
    a {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .k-product__title {
        font-size: 1.8rem !important;
    }
}

/* --- LAYOUT SYSTEM FIX --- */
@media (max-width: 768px) {

    .k-container,
    .container,
    .distribuidor-container,
    .k-header__container,
    .home-kamasa .k-container {
        padding: 0 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    section,
    .section,
    .k-product,
    .distribuidor-form-section,
    .section-padding {
        padding: 30px 15px !important;
    }

    /* Keep homepage hero edge-to-edge on mobile */
    .home-kamasa .home-hero {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-kamasa .home-hero__picture,
    .home-kamasa .kamasa-home-hero-picture {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .home-kamasa .home-hero__image,
    .home-kamasa .kamasa-home-hero-img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Full-bleed mobile hero (break out from parent paddings) */
    .home-kamasa .home-hero {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden;
    }

    .home-kamasa .home-hero__picture,
    .home-kamasa .kamasa-home-hero-picture {
        display: block;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .home-kamasa .home-hero__image,
    .home-kamasa .kamasa-home-hero-img {
        display: block;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover;
    }

    /* Force Grids to 1 Column */
    .grid,
    .k-grid,
    .k-catalog,
    .k-specs__grid,
    .k-features__grid,
    .k-accessories__grid,
    .k-footer__grid,
    .distribuidor-features,
    .distribuidor-form,
    .quick-categories-grid,
    .technologies-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .k-product__layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Flex layouts to column */
    .flex-row,
    .k-flex-row,
    .k-header__top-row,
    .home-cta__buttons {
        flex-direction: column !important;
    }

    /* Specific fixes for distribution page */
    .distribuidor-form-wrapper {
        padding: 20px !important;
    }
}

/* --- SEARCH & CATALOG GRIDS --- */
.k-products-grid,
.k-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px 20px !important;
    margin-bottom: 40px !important;
}

/* Enhanced Desktop Cards (Premium look) */
.k-catalog-card {
    height: 100% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.k-catalog-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border-color: #fdb913 !important;
}

@media (max-width: 1200px) {

    .k-products-grid,
    .k-catalog__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1024px) {

    .k-products-grid,
    .k-catalog__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {

    /* FORCE SINGLE COLUMN - ONE CARD AT A TIME (Ultra-High Specificity for Search & Catalog) */
    html body .k-search-page .k-products-grid,
    html body .kamasa-virtual-busqueda .k-products-grid,
    html body .k-catalog__grid,
    html body .k-catalog,
    html body .grid {
        display: block !important;
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    /* Target the cards specifically */
    .k-products-grid .k-catalog-card,
    .k-catalog__grid .k-catalog-card,
    .k-catalog .k-catalog-card,
    .grid .k-catalog-card,
    .k-catalog-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 25px !important;
        display: flex !important;
        /* Internal flex still needed for card layout */
    }

    .k-search-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .k-sidebar {
        width: 100% !important;
        margin-bottom: 30px !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 768px) {

    /* --- BUTTONS SYSTEM (CRITICAL 3D RENDER FIX) --- */
    .kamasa-btn,
    .btn,
    .btn--primary,
    .btn--outline,
    .btn--outline-white {
        width: 100% !important;
        display: block !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    .kamasa-btn .shadow,
    .kamasa-btn .edge,
    .kamasa-btn .front {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        border-radius: 14px !important; /* FIXED RADIUS */
    }

    .kamasa-btn .edge {
        background-size: 100% 100% !important; /* REMOVE DISTORTION */
    }

    /* FIX PROPORTIONS & DEPTH */
    .kamasa-btn .front {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        transform: translateY(-3px) !important; /* REDUCED DEPTH */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .kamasa-btn .shadow {
        transform: translateY(2px) !important;
    }

    /* REDUCE DEPTH (IMPORTANT) */
    .kamasa-btn:hover .front {
        transform: translateY(-4px) !important;
    }

    .kamasa-btn:hover .shadow {
        transform: translateY(3px) !important;
    }

    .kamasa-btn:active .front {
        transform: translateY(-1px) !important;
    }

    .kamasa-btn:active .shadow {
        transform: translateY(1px) !important;
    }

    /* TEXT CONTROL */
    .kamasa-btn .label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 90% !important;
    }

    /* RESET CTA / SIDEBAR SPECIFICS */
    .k-product-sidebar__actions,
    .k-catalog-card__actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* --- HERO CTA BUTTON (QUIERO SER DISTRIBUIDOR) --- */
@media (max-width: 768px) {

    .hero .kamasa-btn,
    .home-hero .kamasa-btn,
    .distribuidor-hero .kamasa-btn {
        width: 90% !important;
        max-width: 400px !important; /* Prevent too wide banner look */
        margin: 20px auto !important;
    }
}

/* --- NAVBAR & HEADER MOBILE --- */
@media (max-width: 768px) {
    .k-header {
        position: relative !important;
        z-index: 10000 !important;
    }

    /* PERFECT ALIGNMENT: [ ☰ ]   [ LOGO ]            [ 🔍 ] LAYOUT */
    .k-header__top-row {
        height: 60px !important;
        min-height: 60px !important;
        padding: 0 15px !important; /* Side padding only */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        background-color: var(--k-header-yellow) !important;
    }

    /* Hamburger visibility */
    .k-header__menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        font-size: 24px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        cursor: pointer !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* Ensure dashicon inside toggle is centered */
    .k-header__menu-toggle .dashicons {
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Reset columns to prevent flow issues - DO THIS BEFORE the specific logo styles to avoid overrides */
    .k-header-center, .k-header-left, .k-header-right {
        flex: 0 0 auto !important;
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }

    /* PERFECT CENTERING: Use high specificity to ensure absolute centering works */
    .k-header .k-header__logo-container {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        height: 100% !important;
        width: auto !important;
    }

    /* Reset link padding that might skew alignment */
    .k-header__logo-img {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        border: none !important;
    }

    /* SPECIFIC VISIBILITY: Prevent both logos from appearing */
    .k-header__logo-desktop {
        display: none !important;
    }

    .k-header__logo-mobile {
        display: block !important;
        height: 36px !important; /* Slightly smaller for better vertical proportion */
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .k-header__lang-picker,
    .k-header-lang,
    .k-language-switcher {
        display: none !important;
    }

    /* --- QUOTE ICON MOBILE --- */
    .k-header-quote-icon {
        display: none !important;
    }

    /* Hide desktop-only elements */
    .k-header__bottom-row,
    .k-header__account-container,
    .k-nav-item {
        display: none !important;
    }


    /* Fix Kamasa Topbar Mobile Overflow */
    .kamasa-topbar-flex {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 15px !important;
        text-align: center !important;
    }
    .kamasa-topbar-text {
        white-space: normal !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .kamasa-topbar-btn {
        min-width: 140px !important;
        padding: 8px 15px !important;
        font-size: 10px !important;
    }

    /* Force Search to animated Expandable logic on Mobile */
    .k-search-expandable {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    .k-search-expandable #searchInput {
        width: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 4px !important;
        height: 42px !important;
        z-index: 20 !important;
        transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .k-search-expandable.active #searchInput {
        width: calc(100vw - 80px) !important;
        max-width: 300px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding: 0 45px 0 15px !important;
        border: 1px solid #ddd !important;
    }

    .k-search-trigger-icon {
        height: 44px !important;
        width: 44px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 25 !important;
        padding: 0 !important;
    }

    .k-search-trigger-icon .dashicons {
        font-size: 22px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .k-search-expandable.active .k-search-trigger-icon {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

}

/* --- MOBILE DRAWER (HAMBURGER MENU) STYLES --- */
@media (max-width: 768px) {
    .k-mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100% !important;
        background: #000000 !important; /* Changed to Black for Dark Theme */
        z-index: 999999 !important;
        transition: left 0.3s ease !important;
        display: block !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
        padding-bottom: 40px !important;
    }

    /* NUCLEAR RESET: Force White text inside drawer regardless of global rules */
    .k-mobile-nav-drawer,
    .k-mobile-nav-drawer *,
    .k-mobile-nav-drawer .k-mobile-link,
    .k-mobile-nav-drawer .k-mobile-cat-link,
    .k-mobile-nav-drawer .k-mobile-subcat-list a {
        color: #FFFFFF !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-decoration: none !important;
    }


    .k-mobile-nav-drawer.active {
        left: 0 !important;
    }

    .k-mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 99998 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .k-mobile-nav-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }

    .k-drawer-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        background: #ffed00 !important;
        color: #000 !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        height: 70px !important; /* More breathing room */
    }

    .k-drawer-title {
        font-weight: 800 !important;
        text-transform: uppercase !important;
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }

    .k-drawer-close {
        background: #000 !important; /* SOLID BLACK for high contrast */
        border: none !important;
        font-size: 22px !important;
        cursor: pointer !important;
        line-height: 1 !important;
        color: #ffed00 !important; /* YELLOW X on black background */
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
        transition: transform 0.2s ease !important;
    }

    .k-drawer-close:active {
        transform: scale(0.9) !important;
    }

    .k-mobile-link,
    /* PERFECT ALIGNMENT: Force left flex with fixed icon base */
    .k-mobile-link,
    .k-mobile-link-toggle {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 20px !important;
        text-decoration: none !important;
        width: 100% !important;
        background: #000 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .k-mobile-link *,
    .k-mobile-link-toggle * {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block; /* Default children are not flex unless specified */
    }

    .k-menu-icon,
    .k-mobile-link .k-menu-icon,
    .k-mobile-link img {
        width: 30px !important; /* Fixed base for alignment */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
        filter: brightness(0) invert(1) !important;
        flex-shrink: 0 !important;
    }

    .k-menu-text,
    .k-mobile-link span:not(.k-menu-plus) {
        flex: none !important;
        text-align: left !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
    }

    /* RE-FORCE Header black on yellow */
    #menuDrawer .k-drawer-header,
    #menuDrawer .k-drawer-header * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        background: transparent !important;
    }

    .k-menu-plus {
        margin-left: auto !important;
        color: #ffed00 !important;
        font-weight: bold !important;
    }

    /* --- 2-LEVEL MOBILE PRODUCT MENU (UX REFACTORED) --- */
    .k-mobile-category-content {
        display: none;
        background: #000 !important;
    }

    .k-mobile-category-content.active,
    .k-mobile-category-content.is-open {
        display: block !important;
    }

    .k-mobile-category-item {

        background: #000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .k-mobile-cat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .k-mobile-cat-link {
        flex: 1;
        display: block !important;
        padding: 14px 20px !important;
        color: #FFFFFF !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
    }

    .k-mobile-toggle-icon {
        width: 50px;
        height: 48px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffed00 !important;
        font-size: 20px !important;
        cursor: pointer !important;
        transition: transform 0.3s ease !important;
    }

    .k-mobile-category-item.active .k-mobile-toggle-icon {
        transform: rotate(180deg);
    }

    .k-mobile-sub-menu {
        max-height: 0;
        overflow: hidden;
        background: #0a0a0a !important; /* Even darker for contrast */
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .k-mobile-line-link {
        display: block !important;
        padding: 12px 20px 12px 45px !important; /* Precision indentation */
        color: #bbb !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
        background: transparent !important;
        transition: color 0.2s ease;
    }

    .k-line-dot {
        margin-right: 8px;
        color: #ffed00 !important;
        font-weight: bold;
    }

    .k-mobile-line-link:active {
        background: #222 !important;
        color: #ffed00 !important;
    }


    /* Support for Icons */
    .k-mobile-nav-drawer img {
        filter: brightness(0) invert(1) !important;
    }

    /* --- MOBILE DRAWER UNIFICATION --- */
    .k-mobile-nav-drawer .k-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .k-mobile-nav-drawer .k-menu-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(1) brightness(0); /* Contrast for white bg */
    }
    .k-mobile-nav-drawer .k-icon {
        filter: none !important;
        color: #333 !important;
        font-size: 20px;
    }
    .k-mobile-link-toggle {
        display: flex;
        align-items: center;
        padding: 15px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        font-weight: 500;
    }
    .k-menu-plus {
        margin-left: auto;
        color: #999;
        font-weight: 700;
        font-size: 1.2rem;
    }

    /* Support for Icons */
    .k-icon-tools:before { content: "\f107"; }
    .k-icon-register:before { content: "\f336"; }
    .k-icon-logout:before { content: "\f310"; }
    .k-icon-category:before { content: "\f323"; }
}

/* --- SPACING SYSTEM --- */
@media (max-width: 768px) {

    .k-product__gallery-block,
    .k-product__specs-block,
    .k-product__features-block,
    .k-product__accessories-block,
    .k-product__faq-block {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
    }

    .k-product-sidebar {
        position: static !important;
        padding: 1.25rem !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
}

/* --- FOOTER RESPONSIVE --- */
@media (max-width: 768px) {
    .k-footer__grid {
        text-align: center;
        padding-top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .k-footer__info-group {
        justify-content: center !important;
        margin: 10px 0 !important;
    }

    .k-footer__social-list {
        justify-content: center !important;
        margin-top: 15px !important;
    }

    .k-footer-watermark {
        display: none !important;
    }

    .k-footer__visual-header {
        height: 60px !important;
    }

    .k-footer__logo-block {
        width: 60px !important;
        height: 60px !important;
        top: -30px !important;
    }
}

/* --- FORM ACCESSIBILITY --- */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        /* iOS zoom prevention */
        padding: 12px !important;
        height: auto !important;
        min-height: 48px !important;
        width: 100% !important;
    }

    .distribuidor-form-title {
        font-size: 1.5rem !important;
    }
}

/* --- SOLUTIONS SECTION FIX --- */
@media (max-width: 1024px) {
    .solution-floating-card {
        margin: 0 !important;
        box-shadow: 10px 10px 0 var(--kamasa-yellow) !important;
    }
}

/* --- COMPARATOR PAGE MOBILE FIX --- */
@media (max-width: 768px) {
    .k-comparator-header h1 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }

    .k-comparator-table-wrapper {
        border-radius: 8px !important;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05) !important;
    }

    .k-comparator-table {
        min-width: 700px !important;
        /* Ensure columns don't squash too much */
        table-layout: fixed !important;
    }

    /* Sticky Labels Fix - Higher Z-index and background */
    html body .k-comparator-table th.k-col-label,
    html body .k-comparator-table td.k-col-label {
        width: 100px !important;
        font-size: 11px !important; /* Slightly larger per user request */
        left: 0 !important;
        position: sticky !important;
        background: #ffffff !important;
        z-index: 99 !important; /* ULTRA HIGH TO STAY ON TOP */
        box-shadow: 3px 0 8px rgba(0,0,0,0.15) !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        border-right: 2px solid #ffed00 !important; /* Visual guide */
    }

    /* Attributes names font */
    .k-comp-specs-section td {
        z-index: 10 !important;
        position: relative !important;
        font-size: 11px !important;
        background: #000 !important;
    }

    .k-comp-title {
        font-size: 11px !important;
        height: auto !important;
        min-height: 48px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3;
        /* Standard property */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .k-comp-image {
        height: 100px !important;
    }

    /* SCOPED BUTTONS FOR COMPARATOR ONLY */
    .k-comparator-page .k-comp-actions .k-btn,
    .k-comparator-page .k-btn-outline,
    .k-comparator-page .k-btn,
    .k-comparator-page .kamasa-btn {
        padding: 0 !important; /* Managed by .front */
        width: 100% !important;
        margin: 5px 0 !important;
        min-height: 48px !important; /* Taller for 3D + 2 lines */
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* RE-ENABLE 3D LAYERS */
    .k-comparator-page .kamasa-btn .shadow,
    .k-comparator-page .kamasa-btn .edge {
        display: block !important;
        width: 100% !important;
        position: absolute !important;
        left: 0 !important;
        border-radius: 6px !important;
    }
    
    .k-comparator-page .kamasa-btn .front {
        transform: translateY(-2px) !important;
        background: #ffed00 !important;
        border: none !important;
        width: 100% !important;
        border-radius: 6px !important;
        padding: 8px 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    /* Force label wrap and 2 lines with 11px font */
    .k-comparator-page .kamasa-btn .label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 11px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        color: #000 !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    /* Specific for 'QUITAR' button at top - DESKTOP OVERRIDE */
    @media (min-width: 769px) {
        .k-comparator-table thead th {
            padding-top: 75px !important;
        }

        .k-btn-remove-compare.kamasa-btn {
            position: absolute !important;
            top: 5px !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            width: auto !important;
            margin: 0 !important;
            z-index: 10 !important;
        }

        .k-btn-remove-compare.kamasa-btn .front {
            background: #ffed00 !important;
            padding: 5px 12px !important;
            font-size: 11px !important;
        }
    }

    /* Price and Headers */
    .k-comp-price { font-size: 1rem !important; }
    .k-comp-stock { padding: 4px 8px !important; font-size: 11px !important; margin-bottom: 8px !important;}
    .k-comp-specs-section td { font-size: 11px !important; padding: 10px 15px !important; }
    /* PRODUCT PAGE BUTTONS FIX - FORCE ROW LAYOUT */
    /* PRODUCT PAGE BUTTONS FIX - UNIFY WITH GLOBAL 3D SYSTEM (kamasa-btn) */
    html body .k-product-page .k-accordion-header,
    html body .single-product .k-accordion-header,
    html body .single-kamasa_product .k-accordion-header {
        display: block !important;
        background: transparent !important;
        margin: 15px 0 !important;
        border: none !important;
        width: 100% !important;
        padding: 0 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    html body .k-product-page .k-accordion-header .front {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 14px 20px !important;
        background: #ffed00 !important;
        border-radius: 14px !important;
    }

    html body .k-product-page .k-accordion-header .label {
        display: inline-block !important;
        color: #000 !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

    html body .k-product-page .k-accordion-header .k-acc-icon {
        display: flex !important;
        background: #fff !important; 
        color: #000 !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 14px !important;
        line-height: 1 !important;
        margin-left: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Action buttons in product page - Keep consistency */
    html body .k-product-page .kamasa-btn .front {
        border-radius: 14px !important;
    }

    /* --- SOLUCIONES MOBILE CAROUSEL REFACTOR --- */
    html body .soluciones-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
        padding: 10px 20px 30px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    html body .soluciones-carousel::-webkit-scrollbar {
        display: none !important;
    }

    html body .soluciones-carousel .solucion-card {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        width: 85% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        background: #0D0D0D !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    html body .soluciones-carousel .solucion-card .card-image {
        width: 100% !important;
        height: 200px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    html body .soluciones-carousel .solucion-card .card-content {
        padding: 24px 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body .soluciones-carousel .solucion-card .tag {
        color: #ffed00 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
        display: block !important;
        letter-spacing: 1.5px !important;
    }

    html body .soluciones-carousel .solucion-card h3 {
        color: #FFFFFF !important;
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }

    html body .soluciones-carousel .solucion-card p {
        color: #CCCCCC !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    html body .soluciones-carousel .solucion-card .kamasa-btn {
        width: 100% !important;
        margin-top: auto !important;
    }

    /* --- GENERIC MOBILE CAROUSEL & DOTS SYSTEM (Categories, Tech, Brands) --- */
    html body .quick-categories-grid,
    html body .technologies-grid,
    html body .kamasa-brand-cards-grid {
        display: flex !important;
        flex-flow: row nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding: 10px 20px 30px !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }

    html body .quick-categories-grid::-webkit-scrollbar,
    html body .technologies-grid::-webkit-scrollbar,
    html body .kamasa-brand-cards-grid::-webkit-scrollbar {
        display: none !important;
    }

    html body .quick-categories-grid > *,
    html body .technologies-grid > *,
    html body .kamasa-brand-cards-grid .kamasa-brand-group {
        flex: 0 0 85% !important;
        min-width: 85% !important;
        width: 85% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
    }

    html body .kamasa-brand-group {
        display: flex !important;
        flex-direction: column !important;
    }

    /* CAROUSEL DOTS */
    html body .k-carousel-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 15px !important;
        padding-bottom: 30px !important;
    }

    html body .k-carousel-dots .dot {
        width: 10px !important;
        height: 10px !important;
        background-color: rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    html body .k-carousel-dots .dot.active {
        background-color: #ffed00 !important;
        transform: scale(1.3) !important;
    }
}

/* --- PREMIUM ORIENTATION MODAL (CENTERED) --- */
@media (max-width: 768px) {
  .orientation-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .orientation-box {
    background: #111;
    border: 1px solid rgba(255, 237, 0,0.2);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    max-width: 300px;
    width: 85%;
    animation: fadeInScale 0.3s ease;
  }

  .orientation-box .icon {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .orientation-box p {
    font-size: 0.95rem;
    color: #ffed00;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .orientation-btn {
    background: #ffed00;
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
}

@media (orientation: landscape) {
  .orientation-modal {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  body.home .home-hero,
  .home-kamasa .home-hero,
  main.home-kamasa .home-hero {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.home .home-hero > picture,
  body.home .home-hero .home-hero__picture,
  body.home .home-hero .kamasa-home-hero-picture,
  .home-kamasa .home-hero > picture,
  .home-kamasa .home-hero .home-hero__picture,
  .home-kamasa .home-hero .kamasa-home-hero-picture {
    box-sizing: border-box !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.home .home-hero img,
  body.home .home-hero .home-hero__image,
  body.home .home-hero .kamasa-home-hero-img,
  .home-kamasa .home-hero img,
  .home-kamasa .home-hero .home-hero__image,
  .home-kamasa .home-hero .kamasa-home-hero-img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    transform: scale(1.06) !important;
    transform-origin: center center !important;
  }
}

@media screen and (max-width: 768px) {
  .home-kamasa .home-hero {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-kamasa .home-hero__picture,
  .home-kamasa .kamasa-home-hero-picture {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .home-kamasa .home-hero__image,
  .home-kamasa .kamasa-home-hero-img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    min-width: 0 !important;
  }
}