/* ============================================
   MOBILE NEW UI - Override File
   ============================================ */

/* GLOBAL: HIDE MOBILE ELEMENTS ON DESKTOP */
.luxury-mobile-header,
.luxury-mobile-slider-wrapper,
.luxury-lang-float,
.luxury-bottom-sheet,
.luxury-bottom-sheet-overlay,
.yb-menu-overlay,
.yb-search-overlay,
.yb-account-pane {
    display: none !important;
}

@media only screen and (max-width: 991px) {

    /* -----------------------------------------------------------
       STABILITY FIX v4: ABSOLUTE WRAPPER + CONTAIN
       Instead of 'dvh' which might re-calc, we inherit 100% 
       from the fixed body. This creates a solid box.
    ----------------------------------------------------------- */
    html.mobile-home-active,
    body.mobile-home-active {
        position: fixed !important;
        overflow: hidden !important;

        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        overscroll-behavior: none !important;
        touch-action: none !important;
        transform: none !important;
        /* Fixes fixed positioning context */
    }

    /* SHOW MOBILE ELEMENTS ON MOBILE */
    .luxury-mobile-header,
    .luxury-lang-float {
        display: flex !important;
    }

    .luxury-bottom-sheet,
    .luxury-bottom-sheet-overlay,
    .yb-menu-overlay {
        display: block !important;
    }

    .luxury-mobile-slider-wrapper {
        display: block !important;
    }


    /* CLEANUP: Hide Old Header on Mobile (Inside Media Query) */
    body .header-area,
    body .header-top-area,
    body .header-sticky-wrapper,
    div[class*="header-sticky"] {
        display: none !important;
    }

    /* PC scrollUp: mobilde gizlət (PC versiyası öz yerində qalır) */
    #scrollUp {
        display: none !important;
    }

    /* LUXURY HEADER (New) */
    .luxury-mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        padding: 0 10px;
        z-index: 99999 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent !important;
        transition: all 0.3s ease;
    }

    /* Non-Home Pages: White Background & Top Layer */
    body:not(.mobile-home-active) .luxury-mobile-header {
        background: #ffffff !important;
        box-shadow: none !important;
        border-bottom: none !important;
        z-index: 99999 !important;
    }

    /* Account/Profile/Orders: Hide Global Header on Mobile to show Native Header */
    /* body.account-page-active .luxury-mobile-header {
        display: none !important;
    } */

    .header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 20001;
        width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header-left,
    .header-right {
        display: flex;
        gap: 0px;
        align-items: center;
        z-index: 20002;
    }

    .header-left {
        margin-right: auto;
    }

    .header-right {
        margin-left: auto;
    }

    .luxury-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        text-decoration: none;
        position: relative;
        flex-shrink: 0;
        /* Critical: Prevent squashing */
    }

    /* Force Black Icons on Non-Home Pages */
    body:not(.mobile-home-active) .luxury-icon,
    body:not(.mobile-home-active) .luxury-icon svg {
        color: #000000 !important;
        stroke: #000000 !important;
    }

    .luxury-icon:hover,
    .luxury-icon:focus,
    .luxury-icon:active,
    .luxury-icon:visited {
        color: inherit !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    .luxury-icon svg {
        width: 22px;
        height: 22px;
        stroke-width: 1px;
        /* Standard: 1px */
        transition: stroke 0.3s ease;
        overflow: visible;
        /* Prevent clipping */
    }

    .luxury-icon:active {
        transform: scale(0.95);
    }

    /* Mobil header səbət badge - kiçik dairə, ikonun altında */
    .mob-cart-icon-wrap {
        overflow: visible;
    }

    .mob-cart-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
        color: #fff;
        background: #000;
        border-radius: 50%;
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    body:not(.mobile-home-active) .mob-cart-badge {
        background: #000;
        color: #fff;
    }

    .luxury-mobile-slider-wrapper.indicators-dark .luxury-mobile-header .mob-cart-badge,
    .luxury-mobile-header.indicators-dark .mob-cart-badge {
        background: #000;
        color: #fff;
    }

    .luxury-mobile-slider-wrapper.indicators-light .luxury-mobile-header .mob-cart-badge,
    .luxury-mobile-header.indicators-light .mob-cart-badge {
        background: #fff;
        color: #000;
    }

    .luxury-mobile-slider-wrapper.indicators-dark .luxury-mobile-header,
    .luxury-mobile-header.indicators-dark {
        color: #000;
    }

    .luxury-mobile-slider-wrapper.indicators-light .luxury-mobile-header,
    .luxury-mobile-header.indicators-light {
        color: #fff;
    }

    .luxury-logo {
        height: 52px;
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Force Black Logo on Non-Home Pages (Invert White Logo) */
    body:not(.mobile-home-active) .luxury-logo img {
        filter: invert(1) brightness(0) !important;
    }

    /* Hide Language & Search on Non-Home Pages */
    body:not(.mobile-home-active) .luxury-bottom-left-group {
        display: none !important;
    }

    .luxury-logo img {
        height: 100%;
        width: auto;
        display: block;
        object-fit: contain;
        transition: filter 0.3s ease;
    }

    .luxury-mobile-slider-wrapper.indicators-dark .luxury-logo img,
    .luxury-mobile-header.indicators-dark .luxury-logo img {
        filter: none;
    }

    .luxury-mobile-slider-wrapper.indicators-light .luxury-logo img,
    .luxury-mobile-header.indicators-light .luxury-logo img {
        filter: invert(1) brightness(100);
    }

    .slider-area.slider-mobile {
        display: none !important;
    }

    /* 
       ABSOLUTE WRAPPER STRATEGY
       - Position: Absolute to the fixed body.
       - Height: 100% (Inherit fixed height).
       - Contain: Strict isolation.
    */
    .luxury-mobile-slider-wrapper {
        position: absolute;
        /* Changed from fixed */
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        /* Inherit from body */

        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;

        background: #fff;
        scrollbar-width: none;
        -ms-overflow-style: none;

        z-index: 1005;

        touch-action: pan-y !important;

        /* Changed to CONTAIN to prevent scroll bubbling */
        overscroll-behavior: contain !important;

        /* Isolation creates a new stacking context and contains layout/paint */
        /* contain: strict !important; REMOVED to allow fixed children */

        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .luxury-mobile-slider-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Child element heights must also match 100% parent */
    .vertical-section {
        position: relative;
        width: 100%;
        height: 100% !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        overflow: hidden;
    }

    .horizontal-wrapper {
        display: flex;
        width: 100%;
        height: 100% !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: none;

        touch-action: pan-x pan-y !important;
    }

    .horizontal-wrapper::-webkit-scrollbar {
        display: none;
    }

    .slide-item {
        flex: 0 0 100%;
        width: 100%;
        height: 100% !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        position: relative;
        background: #fff;
        overflow: hidden;
    }

    /* SUBTLE SHADOW OVERLAY (Static on Wrapper) */
    .luxury-mobile-slider-wrapper::after {
        content: '';
        position: fixed;
        /* Stay on screen, don't scroll with content */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.18) 0%,
                rgba(0, 0, 0, 0.1) 1.5%,
                rgba(0, 0, 0, 0.04) 3%,
                rgba(0, 0, 0, 0.01) 4.5%,
                rgba(0, 0, 0, 0) 6%,

                rgba(0, 0, 0, 0) 93%,
                rgba(0, 0, 0, 0.04) 95%,
                rgba(0, 0, 0, 0.12) 97%,
                rgba(0, 0, 0, 0.22) 98.5%,
                rgba(0, 0, 0, 0.4) 100%);
        pointer-events: none;
        z-index: 1100;
        /* Above slides (0) but below UI (2000+) */
    }

    .fullscreen-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Indicators */
    .vertical-indicators {
        position: fixed;
        left: 20px;
        top: 50%;
        transform: translateY(-50%) translateZ(0);
        z-index: 20005;
        display: flex;
        flex-direction: column;
        gap: 15px;
        pointer-events: none;
        will-change: transform;
    }

    .v-dot {
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .v-dot.active {
        background: #fff;
        transform: scale(1.5);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }

    /* Horizontal Bar (Segmented) */
    .horizontal-progress-container {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateZ(0);
        width: 100px;
        height: 2px;
        z-index: 20005;

        display: flex !important;
        align-items: center;
        gap: 4px;
        /* Space between segments */

        opacity: 0;
        /* Hidden by default */
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }

    .horizontal-progress-container.active {
        opacity: 1;
        visibility: visible;
    }

    .h-segment {
        flex: 1;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        transition: background-color 0.2s ease;
    }

    .h-segment.active {
        background: #fff;
    }

    /* Dynamic Colors - Dark Theme */
    .indicators-dark .h-segment {
        background: rgba(0, 0, 0, 0.2);
    }

    .indicators-dark .h-segment.active {
        background: #000;
    }

    .indicators-dark .v-dot {
        background: rgba(0, 0, 0, 0.3);
    }

    .indicators-dark .v-dot.active {
        background: #000;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }

    /* Dynamic Colors - Light Theme */
    .indicators-light .h-segment {
        background: rgba(255, 255, 255, 0.3);
    }

    .indicators-light .h-segment.active {
        background: #fff;
    }

    .indicators-light .v-dot {
        background: rgba(255, 255, 255, 0.5);
    }

    .indicators-light .v-dot.active {
        background: #fff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }

    /* Content Styling */
    .luxury-content {
        position: absolute;
        bottom: 50px;
        left: 20px;
        z-index: 20002;
        color: #fff;
        pointer-events: none;
    }

    .luxury-content h2 {
        font-size: 32px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .luxury-content.light,
    .luxury-content.light h2 {
        color: #fff;
    }

    .luxury-content.dark,
    .luxury-content.dark h2 {
        color: #000;
    }

    /* ------------------------------------- */
    /*  MOBILE FILTER DRAWER BUTTON          */
    /* ------------------------------------- */
    .filter-drawer-footer {
        padding: 20px;
        border-top: 1px solid #f0f0f0;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 10;
    }

    .drawer-action-btn {
        width: 100%;
        background-color: #000;
        color: #fff;
        text-align: center;
        padding: 15px 0;
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        border-radius: 25px;
        /* Phase 9.5 rounded corners */
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .drawer-action-btn:active {
        background-color: #333;
    }

    /* -----------------------------------------------------------
       BOTTOM LEFT GROUP (Language + Search)
    ----------------------------------------------------------- */
    .luxury-bottom-left-group {
        position: fixed;
        bottom: 25px;
        left: 20px;
        z-index: 20006;
        display: flex !important;
        align-items: center;
        gap: 15px;
        /* Space between icons */
        pointer-events: none;
        /* Let clicks pass through gaps */
    }

    .luxury-lang-float,
    .luxury-search-float {
        /* Reset positioning since parent handles it */
        position: relative;
        bottom: auto;
        left: auto;

        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #fff;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        pointer-events: auto !important;
        touch-action: manipulation !important;
        transition: transform 0.1s ease;
    }

    /* Shared Active State */
    .luxury-lang-float:active,
    .luxury-search-float:active {
        transform: scale(0.9);
    }

    .luxury-lang-float svg {
        width: 20px;
        height: 20px;
    }

    /* Theme Support (Global Standard) */
    /* Theme Support (Global Standard) */
    .luxury-lang-float.indicators-dark,
    .luxury-search-float.indicators-dark {
        color: #000 !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }

    .luxury-lang-float.indicators-light,
    .luxury-search-float.indicators-light {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Bottom Sheet */
    .luxury-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 20009;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
        backdrop-filter: blur(2px);
    }

    .luxury-bottom-sheet-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .luxury-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 20010;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        max-height: 60vh;
    }

    .luxury-bottom-sheet.active {
        transform: translateY(0);
    }

    .sheet-header {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sheet-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .sheet-close {
        padding: 5px;
        cursor: pointer;
        opacity: 0.6;
    }

    .lang-list {
        padding: 10px 0;
    }

    .lang-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 20px;
        border: none;
        background: none;
        text-align: left;
        font-size: 15px;
        color: #333;
    }


    .lang-item:active {
        background: #f5f5f5;
    }

    .lang-item.active {
        font-weight: 700 !important;
        color: #000 !important;
        background: transparent !important;
        border: none !important;
    }

    .lang-item.active .lang-check {
        color: #000 !important;
        display: flex !important;
        opacity: 1 !important;
        margin-left: auto;
    }

    .lang-check {
        color: #000;
        display: none;
        opacity: 0;
    }

    .lang-flag {
        width: 24px;
        height: 18px;
        margin-right: 12px;
        border-radius: 2px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        display: flex;
    }

    .lang-flag svg {
        width: 100%;
        height: 100%;
    }

    .lang-name {
        flex: 1;
    }

    .lang-check {
        color: #000;
    }


    /* -----------------------------------------------------------
       PHASE 5: SAFE SKELETON (Strict Mobile Isolation)
    ----------------------------------------------------------- */

    /* 1. LAYOUT & GRID */
    .mobile-only-catalog-view {
        display: block !important;
        width: 100%;
        background: #fff;
        /* Header (70px) + Filter Bar (~60px) = ~130px space needed */
        padding-top: 130px !important;
        margin-top: 0 !important;
    }

    /* 1.1 MOBILE FILTER BAR (Luxury Signature) */
    .yb-mobile-filter-bar {
        position: fixed;
        top: 70px;
        /* Exactly below the 70px fixed header */
        left: 0;
        width: 100%;
        z-index: 1000;
        /* High enough, but below header's 20000/99999 */

        display: flex;
        justify-content: flex-end;
        /* Align to right */
        align-items: center;
        padding: 15px 20px;
        /* Increased vertical padding to 15px */
        background: #ffffff;

        /* Separator Line: BETWEEN Header and Filter Bar (So, at the top of filter bar) */
        border-top: 1px solid #f5f5f5;
        /* Removed bottom border per request */
    }

    /* 1.1.b SEARCH RESULT BAR (Injected below Filter Bar) */
    .yb-mobile-search-result-bar {
        background: #ffffff;
        padding: 0 20px 15px 20px;
        /* Slight offset, removing top padding since parent has 130px top padding pushing it down nicely */
        font-size: 13.5px;
        color: #777;
        /* Subtle text color */
        font-weight: 300;
        text-align: left;
    }

    .yb-mobile-search-result-bar strong {
        color: #000;
        font-weight: 500;
    }

    /* Spacer no longer needed if we justify-end */
    .yb-filter-spacer {
        display: none;
    }

    .yb-filter-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #000;
        /* Darker border as per image */
        border-radius: 50px;
        /* Full Pill */
        padding: 6px 16px;
        /* Balanced padding */
        background: #ffffff;
        cursor: pointer;
        height: 32px;
        /* Fixed height for consistency */
    }

    .yb-filter-action span {
        font-size: 13px;
        /* Slightly larger */
        font-weight: 400;
        /* Regular */
        color: #000;
        text-transform: capitalize;
        /* "Filters" instead of UPPERCASE */
        letter-spacing: 0.3px;
        line-height: 1;
    }

    .yb-filter-action i {
        font-size: 14px;
        color: #000;
        font-weight: 300;
    }

    /* 2. HIDE LEGACY ELEMENTS (On Mobile Only) */
    body .pagination-area,
    body .breadcrumb-section,
    body .filter-controls-section,
    body .filter-click,
    body footer,
    body .mobile-menu-area {
        display: none !important;
    }

    body .shop-area .container-fluid,
    body .shop-area .col-lg-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------------------------
           PHASE 6: MOBILE MENU OVERLAY (Luxury Slide)
        ----------------------------------------------------------- */

    /* 1. OVERLAY PANEL */
    .yb-menu-overlay {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        /* Dynamic viewport for mobile browsers */
        background: #ffffff;
        z-index: 99990;
        /* ABOVE all floating elements (20000+), below header */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Hidden: clipped in-place, reveals downward from header bottom */
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* 2. OPEN STATE */
    body.yb-menu-open,
    body.mob-overlay-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body.yb-menu-open .yb-menu-overlay {
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }

    /* 3. HEADER: ALWAYS ON TOP + WHITE WHEN OPEN */
    body.yb-menu-open .luxury-mobile-header,
    body.mob-overlay-open .luxury-mobile-header {
        background: #ffffff !important;
        box-shadow: 0 1px 0 0 #f0f0f0 !important;
        /* No layout shift, pure visual */
    }

    /* Force black icons & logo when menu or account overlay is open */
    body.yb-menu-open .luxury-icon,
    body.yb-menu-open .luxury-icon svg,
    body.mob-overlay-open .luxury-icon,
    body.mob-overlay-open .luxury-icon svg {
        color: #000000 !important;
        stroke: #000000 !important;
    }

    body.yb-menu-open .luxury-logo img,
    body.mob-overlay-open .luxury-logo img {
        filter: invert(1) brightness(0) !important;
    }

    /* 4. LAYERED MENU SYSTEM */

    /* The container itself needs relative positioning for absolute children */
    .yb-menu-overlay {
        position: fixed;
        overflow: hidden;
        /* Hide layers sliding out of view */
    }

    .yb-menu-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding-bottom: 50px;
    }

    /* Child layers start off-screen to the right by default */
    .layer-child {
        transform: translateX(100%);
    }

    /* Root layer starts on-screen by default */
    .layer-root {
        transform: translateX(0);
    }

    /* The actual active class applied by JS */
    .yb-menu-layer.slide-in {
        transform: translateX(0);
    }

    /* Move inactive root layer out to the left */
    .yb-menu-layer.layer-root:not(.slide-in) {
        transform: translateX(-100%);
    }

    /* 5. TYPOGRAPHY & SPACING (LUXURY) */

    .yb-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        /* margin-top: 30px; removed to let sticky breadcrumb sit at top */
    }

    .yb-menu-list li {
        margin: 0;
        padding: 0;
        /* border-bottom: 1px solid #f9f9f9; Removed to eliminate thin lines between menu items */
    }

    /* The a tag flex container for text and chevron */
    .yb-menu-list li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        /* ALIGNMENT: 20px left to match header icons */
        color: #000000;
        font-size: 14px;
        /* Reduced from 15px for minimalistic look */
        font-weight: 300;
        /* Light */
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 1px;
        transition: opacity 0.3s ease;
    }

    .yb-menu-list li a:active {
        opacity: 0.5;
    }

    /* Right-aligned chevron > */
    .yb-menu-list li a .yb-chevron {
        font-size: 15px;
        color: #777;
        /* Darkened from #ddd to #777 */
        font-weight: 300;
        margin-right: 5px;
    }

    /* Layer Back Button (< AYAQQABI / STILETTO) - STICKY AT TOP */
    .yb-menu-back {
        display: flex;
        align-items: center;
        padding: 25px 20px 20px 20px;
        /* Extra top padding for breathing room */
        margin-bottom: 10px;
        /* Elegant gap between breadcrumb and internal links */
        color: #777777;
        /* Subtle elegant gray, softer than loud black */
        font-size: 11px;
        /* Smaller, elegant breadcrumb */
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        background: rgba(255, 255, 255, 0.98);
        /* Slight transparency for sticky effect */
        backdrop-filter: blur(5px);
        transition: opacity 0.3s ease;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .yb-menu-back:active {
        opacity: 0.5;
    }

    .yb-menu-back svg {
        margin-right: 15px;
        width: 18px;
        height: 18px;
    }

    /* 6. NO SCROLL LOCK NEEDED */
    /* Overlay at z-index 99990 blocks all touch interaction on mobile */

    /* 5. HAMBURGER → X ANIMATION */
    .yb-hamburger-svg .yb-ham-top,
    .yb-hamburger-svg .yb-ham-mid,
    .yb-hamburger-svg .yb-ham-bot {
        transform-origin: center;
        transition: transform 0.35s ease, opacity 0.25s ease;
    }

    body.yb-menu-open .yb-hamburger-svg .yb-ham-top {
        transform: translateY(6px) rotate(45deg);
    }

    body.yb-menu-open .yb-hamburger-svg .yb-ham-mid {
        opacity: 0;
    }

    body.yb-menu-open .yb-hamburger-svg .yb-ham-bot {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* -----------------------------------------------------------
           PHASE 8: MOBILE PRODUCT GRID & TOGGLE (LUXURY)
        ----------------------------------------------------------- */

    /* TOGGLE BAR (Added into Filter Bar Left Side) */
    .yb-grid-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-right: auto;
        /* Pushes filter action to the right */
    }

    .yb-grid-toggle svg {
        color: #999;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .yb-grid-toggle svg.active {
        color: #000;
    }

    /* THE GRID CONTAINER */
    #product-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* Default: 2 columns */
        gap: 0 !important;
        /* ZERO GAP requirement */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: grid-template-columns 0.4s ease;
    }

    /* Single Column Variant */
    #product-container.single-col {
        grid-template-columns: 1fr !important;
    }

    /* PREVENT DESKTOP CARDS FROM RONDERING ON MOBILE IN THE GRID */
    #product-container>.d-none.d-lg-block {
        display: none !important;
    }

    /* INDIVIDUAL CARDS */
    .yb-product-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* 1x1 IMAGE WRAPPER (SQUARE) WITH SCROLL SNAP */
    .yb-card-image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
        background-size: 200% 100%;
        animation: mob-skeleton-shimmer 2s ease-in-out infinite;
        position: relative;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar IE/Edge */
        scroll-behavior: smooth;
    }

    @keyframes mob-skeleton-shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    .yb-card-image-wrapper::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    /* Shimmer dayandır: şəkil yükləndikdən sonra */
    .yb-card-image-wrapper.loaded {
        animation: none !important;
        background: #fff !important;
    }

    .yb-mobile-img-slide {
        flex: 0 0 100%;
        /* Force each image slide to take 100% width of wrapper */
        width: 100%;
        height: 100%;
        scroll-snap-align: center;
        /* Snap squarely in center */
        scroll-snap-stop: always;
        /* Prevents swiping multiple slides at once rapidly */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .yb-mobile-img-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 1px ELEGANT SWIPE INDICATOR */
    .yb-swipe-indicator {
        width: 100%;
        height: 1px;
        background: #f0f0f0;
        /* Very light grey */
        position: relative;
    }

    .yb-swipe-indicator-active {
        height: 100%;
        background: #333;
        /* Darker active segment */
        position: absolute;
        top: 0;
        left: 0;
        /* REMOVED: transition: transform 0.3s ease; to perfectly stick to finger */
        transition: width 0.3s ease;
    }

    /* FORCE ZERO PADDING ON MOBILE WRAPPER */
    #product-container>.d-block.d-lg-none {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* TEXT AND METADATA LAYER */
    .yb-card-info {
        padding: 15px 10px 20px 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    /* Typography */
    .yb-card-title {
        color: #000000;
        font-size: 13px;
        font-weight: 300;
        /* Light */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
        /* In HTML lang="az" ensures i -> İ */
    }

    .yb-card-price {
        color: #000000;
        font-size: 13px;
        font-weight: 500;
        /* Slightly bolder for price */
    }

    /* Mobil endirim qiyməti: köhnə (solğun, xətt) + yeni (tünd) */
    .yb-card-price.mob-price-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .mob-old-price {
        color: rgba(0, 0, 0, 0.58);
        font-size: 14px;
        font-weight: 400;
        position: relative;
    }
    .mob-old-price::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 0.7px;
        background: rgb(0, 0, 0);
    }
    .mob-new-price {
        font-weight: 500;
        color: #000000;
        font-size: 14px;
    }

    /* Fixed Campaign Space (30-40px reserve) */
    .yb-card-campaign {
        min-height: 35px;
        /* Fixed space so cards align perfectly */
        display: flex;
        align-items: flex-start;
        margin-top: 0px;
        font-size: 12px;
        color: #000000;
        /* Optional red for campaign text in future */
        text-transform: uppercase;
        font-weight: 400;
    }

    /* =========================================================================
       PHASE 9: MOBILE FILTER DRAWER
       ========================================================================= */

    body.yb-filter-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    .yb-mobile-filter-drawer {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 100vw;
        height: 100vh;
        /* Safely adjust for mobile browser bars */
        height: 100dvh;
        background-color: #ffffff;
        z-index: 100000;
        transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
        color: #000000;
        font-family: inherit;
        font-weight: 300;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .yb-mobile-filter-drawer.open {
        right: 0;
    }

    /* Header */
    .filter-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        min-height: 80px;
        border-bottom: 0.5px solid #eaeaea;
        background: #fff;
        flex-shrink: 0;
        /* Prevent collapsing */
    }

    .filter-drawer-title {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.5px;
    }

    .filter-drawer-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .filter-reset-btn {
        font-size: 12px;
        color: #000;
        text-decoration: underline;
        font-weight: 300;
    }

    .filter-close-btn {
        font-size: 18px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Body (Scrollable) */
    .filter-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 25px 25px 25px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-drawer-body::-webkit-scrollbar {
        display: none;
    }

    /* Accordion Sections */
    .filter-section {
        border-bottom: 0.5px solid #eaeaea;
    }

    .filter-section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
    }

    .filter-section .chevron {
        font-size: 10px;
        transition: transform 0.3s ease;
        color: #000;
    }

    .filter-section.active .chevron {
        transform: rotate(180deg);
    }

    .filter-section-content {
        display: none;
        padding-bottom: 20px;
    }

    .filter-section.active .filter-section-content {
        display: block;
    }

    /* Tweak cloned checkboxes */
    .filter-section-content .checkbox-wrapper {
        margin-bottom: 20px;
    }

    .filter-section-content label {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
    }

    /* Enlarge standard checkboxes for better touch targets */
    .filter-section-content input[type="checkbox"]:not([style*="background-color"]) {
        margin-right: 14px;
        width: 22px;
        height: 22px;
        accent-color: #000;
    }

    /* -----------------------------------------------------------
       PHASE 12: COLOR FILTER GRID (Luxury Symmetric Cards)
       ----------------------------------------------------------- */
    body .filter-section.active .filter-section-content:has(input[style*="background-color"]) {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px 8px !important;
        padding-top: 10px;
        padding-bottom: 25px;
    }

    body .filter-section:not(.active) .filter-section-content:has(input[style*="background-color"]) {
        display: none !important;
    }

    /* Checkbox wrapper spans the full card */
    body .filter-section-content:has(input[style*="background-color"]) .checkbox-wrapper {
        margin-bottom: 0 !important;
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: 100%;
    }

    /* Container Card (The Label) */
    body .filter-section-content:has(input[style*="background-color"]) label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        /* Managed by structural margins instead */
        cursor: pointer;
        width: 100%;
        height: 75px !important;
        /* Fixed symmetric height */
        text-align: center;
        text-transform: capitalize !important;

        /* Card Boxing Styles - BoxSizing important so active state border doesn't shift */
        box-sizing: border-box !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 6px !important;
        background: #fff;
        overflow: hidden !important;
        /* Keeps top half color aligned with border radius */
        transition: border 0.2s ease;
        padding: 0 !important;
        /* Zero padding to allow color fill */
    }

    /* The HEX Area (Top Half) */
    body .filter-section-content input[type="checkbox"][style*="background-color"] {
        margin: 0 !important;
        align-self: stretch !important;
        /* Fill horizontally */
        width: auto !important;
        height: 38px !important;
        /* Fill almost half the card */
        flex-shrink: 0;

        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative;
        cursor: pointer;
    }

    /* The Text Name Area (Bottom Half) - Wait, we need to target the text node. We can do this by wrapping everything inside via flex.
       Since we can't style a raw text node directly in CSS, we apply typography globally to the label, 
       then use flex layout to center the text in the remaining space naturally! */
    body .filter-section-content:has(input[style*="background-color"]) label {
        color: #333 !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        padding-bottom: 8px !important;
        /* Forces text into the center of the remaining space */
        justify-content: space-between !important;
    }

    body .filter-section-content input[type="checkbox"][style*="background-color"]::after,
    body .filter-section-content input[type="checkbox"][style*="background-color"]::before {
        display: none !important;
        content: none !important;
    }

    /* Active State: Clean 1.5px black border without changing container dimensions */
    body .filter-section-content:has(input[style*="background-color"]) label:has(input:checked) {
        border: 1.5px solid #000 !important;
    }

    /* Nullify legacy states */
    body .filter-section-content input[type="checkbox"][style*="background-color"]:checked {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: none !important;
    }

    /* Footer Button */
    .filter-drawer-footer {
        padding: 15px 25px;
        background: #fff;
        border-top: 0.5px solid #eaeaea;
        flex-shrink: 0;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    .luxury-btn {
        background-color: #000000 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 30px !important;
        text-transform: none;
        font-weight: 300;
        letter-spacing: 1px;
        padding: 16px 0;
        font-size: 14px;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Phase 11: Pure CSS Title Casing for mobile UI elements */
    body .filter-drawer-title,
    body .filter-section-title span,
    body .filter-section-content label,
    body .sort-pill span,
    body .checkbox-wrapper label,
    body .mobile-menu-area #mobile-menu-active a,
    body .mean-container .mean-nav ul li a,
    body .mean-container .mean-nav ul li ul li a,
    body .mean-container .mean-nav ul li ul li ul li a,
    body .mean-container .mean-nav a,
    body .yb-menu-layer .yb-menu-list>li>a,
    body .yb-menu-layer .yb-menu-back {
        text-transform: capitalize !important;
    }

    /* -----------------------------------------------------------
       PHASE 16: HEADER REDESIGN & MENU ENHANCEMENTS (Mobile Only)
       ----------------------------------------------------------- */

    /* 1. Remove bottom-left search and hide header wishlist */
    body .luxury-search-float {
        display: none !important;
    }

    /* Target mobile Search dropdown from replaced Wishlist icon in luxury header */
    .header-left .luxury-search-dropdown {
        position: absolute !important;
        left: 0px !important;
        top: 100% !important;
        width: calc(100vw - 40px) !important;
        max-width: 400px !important;
        z-index: 100000 !important;
        margin-top: 25px !important;
        margin-left: 20px !important;
        background: #fff !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
        padding: 5px !important;
        display: none;
        /* Hide by default, JS toggles */
    }

    /* Active state to show */
    .header-left .luxury-search-dropdown.active {
        display: block !important;
    }

    .header-left .luxury-search-dropdown .luxury-search-input {
        width: 100% !important;
        border: 1px solid #eaeaea !important;
        padding: 12px 18px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        background-color: #f9f9f9 !important;
    }

    /* 2. Menu Spacing and Dividers */
    /* Add slight margin at the top of the root menu */
    #ybMenuLayerRoot .yb-menu-list {
        padding-top: 15px !important;
    }

    .yb-menu-divider {
        height: 1px !important;
        background-color: #f0f0f0 !important;
        margin: 15px 40px !important;
        border: none !important;
        display: block !important;
    }

    /* Target direct links in root menu to handle icons properly */
    #ybMenuLayerRoot .yb-menu-list>li>a {
        display: flex !important;
        align-items: center !important;
    }

    /* Add space between icon and text */
    #ybMenuLayerRoot .yb-menu-list>li>a>i.pe-7s-user,
    #ybMenuLayerRoot .yb-menu-list>li>a>i.pe-7s-like,
    #ybMenuLayerRoot .yb-menu-list>li>a>i.pe-7s-global {
        font-size: 20px !important;
        margin-right: 12px !important;
        font-weight: 500 !important;
        display: inline-block !important;
        margin-top: -2px !important;
    }

    /* Favorilərim: dolu ürək + sayğac (sözlə eyni stil) */
    .mob-fav-menu-item .mob-fav-heart-svg {
        margin-right: 12px;
        flex-shrink: 0;
    }

    .mob-fav-menu-item.mob-fav-has-items .mob-fav-heart-svg {
        fill: currentColor;
        color: #000;
    }

    .mob-fav-count {
        font-size: 14px;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #000;
        margin-left: 4px;
        display: inline;
    }

    /* 3. Language Flags */
    .yb-lang-list {
        padding-top: 10px !important;
    }

    .yb-lang-list>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .yb-lang-list>li>a.active-lang .yb-menu-text-wrap {
        font-weight: 500 !important;
    }

    .yb-lang-check {
        display: flex !important;
        align-items: center !important;
        color: #000 !important;
        margin-left: auto !important;
    }

    .yb-lang-flag {
        width: 20px !important;
        height: auto !important;
        margin-right: 12px !important;
        border-radius: 2px !important;
        border: 1px solid #eee !important;
    }

    /* 2. Show the swapped Search (formerly Wishlist) icon on mobile, and hide original Desktop Search */
    body .header-right-wrap .same-style.header-wishlist,
    body .header-right-wrap .header-wishlist {
        display: block !important;
    }

    body .header-right-wrap .same-style.header-search,
    body .header-right-wrap .header-search {
        display: none !important;
    }

    /* In standard state, header icons are displayed flex. Ensure search fits right in */
    body .header-right-wrap {
        display: flex !important;
        align-items: center !important;
    }

    /* 3. Mobile Menu Extra Links Styling (Hesabım, Favorilər) */
    /* MeanMenu clones the classes, so target .mean-container */
    body .mean-container .mean-nav ul li.menu-extra-links-start {
        margin-top: 20px !important;
        border-top: 1px solid #eaeaea !important;
        padding-top: 10px !important;
    }

    /* Target the newly added extra links */
    body .mean-container .mean-nav ul li.menu-extra-link>a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #000 !important;
        text-transform: none !important;
        /* Keep original casing */
        border-bottom: none !important;
        /* Override standard meanmenu border for clean integration */
    }

    /* Fix the icons inside the new mean-menu elements */
    body .mean-container .mean-nav ul li.menu-extra-link>a>i {
        font-size: 18px !important;
        width: 20px !important;
        text-align: center !important;
        color: #000 !important;
        margin-right: 0 !important;
    }

    /* Style the language slide inner menu (AZ, EN, RU) */
    body .mean-container .mean-nav ul li.menu-extra-link ul.submenu li a {
        padding-left: 10% !important;
        font-size: 14px !important;
        text-transform: none !important;
    }


    /* =========================================================================
       PHASE 10: MOBILE SEARCH OVERLAY
       ========================================================================= */

    /* --- 10.1: SEARCH ICON → X ANIMATION --- */
    .yb-search-svg .yb-search-circle,
    .yb-search-svg .yb-search-line1 {
        transition: opacity 0.35s ease;
    }

    .yb-search-svg .yb-search-x1,
    .yb-search-svg .yb-search-x2 {
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    body.yb-search-open .yb-search-svg .yb-search-circle,
    body.yb-search-open .yb-search-svg .yb-search-line1 {
        opacity: 0;
    }

    body.yb-search-open .yb-search-svg .yb-search-x1,
    body.yb-search-open .yb-search-svg .yb-search-x2 {
        opacity: 1;
    }

    /* --- 10.2: HEADER STATE WHEN SEARCH IS OPEN --- */
    body.yb-search-open .luxury-mobile-header {
        background: #ffffff !important;
        box-shadow: 0 1px 0 0 #f0f0f0 !important;
    }

    body.yb-search-open .luxury-icon,
    body.yb-search-open .luxury-icon svg {
        color: #000000 !important;
        stroke: #000000 !important;
    }

    body.yb-search-open .luxury-logo img {
        filter: invert(1) brightness(0) !important;
    }

    body.yb-search-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Hide the bottom-left floating group when search is open */
    body.yb-search-open .luxury-bottom-left-group {
        display: none !important;
    }

    /* --- 10.3: SEARCH OVERLAY PANEL --- */
    .yb-search-overlay {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        background: #ffffff;
        z-index: 99989;
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }

    body.yb-search-open .yb-search-overlay {
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }

    /* --- 10.4: INPUT FIELD --- */
    .yb-search-input-wrap {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        gap: 12px;
        flex-shrink: 0;
    }

    .yb-search-input-icon {
        flex-shrink: 0;
        opacity: 0.5;
    }

    .yb-search-input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 15px;
        font-weight: 300;
        color: #000;
        background: transparent;
        letter-spacing: 0.3px;
    }

    .yb-search-input::placeholder {
        color: #bbb;
        font-weight: 300;
    }

    .yb-search-clear {
        display: none;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        background: #f0f0f0;
        border-radius: 50%;
        cursor: pointer;
        flex-shrink: 0;
        color: #666;
        padding: 0;
        transition: background 0.2s ease;
    }

    .yb-search-clear:active {
        background: #ddd;
    }

    /* --- 10.4.5: SUGGESTIONS --- */
    .yb-search-suggestions {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }

    .yb-suggestion-item {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        gap: 12px;
        text-decoration: none;
        color: #000;
        font-size: 14.5px;
        font-weight: 300;
        border-bottom: 1px solid #fafafa;
        transition: background 0.2s ease;
    }

    .yb-suggestion-item:last-child {
        border-bottom: none;
    }

    .yb-suggestion-item:active {
        background: #f8f8f8;
    }

    .yb-suggestion-item svg {
        opacity: 0.4;
        flex-shrink: 0;
    }

    /* --- 10.5: LOADING INDICATOR --- */
    .yb-search-loading {
        display: none;
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .yb-search-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid #f0f0f0;
        border-top-color: #000;
        border-radius: 50%;
        animation: yb-spin 0.7s linear infinite;
    }

    @keyframes yb-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* --- 10.6: RESULTS GRID (2-column) --- */
    .yb-search-results {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        align-content: start;
    }

    .yb-search-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: #000;
    }

    .yb-search-card:active {
        opacity: 0.7;
    }

    .yb-search-card-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f8f8f8;
        overflow: hidden;
    }

    .yb-search-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .yb-search-card-info {
        padding: 8px 2px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .yb-search-card-title {
        font-size: 11px;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
        color: #000;
    }

    .yb-search-card-price {
        font-size: 12px;
        font-weight: 500;
        color: #000;
    }

    .yb-search-old-price {
        text-decoration: line-through;
        color: #999;
        font-weight: 300;
    }

    /* Empty state */
    .yb-search-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 20px;
        color: #999;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    /* --- 10.7: STICKY CTA BUTTON --- */
    .yb-search-cta {
        display: none;
        justify-content: center;
        padding: 15px 20px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #f0f0f0;
        flex-shrink: 0;
    }

    .yb-search-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        background: #000;
        color: #fff;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-decoration: none;
        text-transform: uppercase;
        transition: background 0.3s ease;
    }

    .yb-search-cta a:active {
        background: #333;
    }

    /* -----------------------------------------------------------
       MODERN MOBILE PRODUCT DETAIL (MPD) — v2 Refined
    ----------------------------------------------------------- */
    .mpd-root {
        display: block !important;
        background: #fff !important;
        padding-top: 70px !important;
    }

    /* Hide PC elements on mobile */
    body .shop-area.pt-50.pb-70,
    body .related-product-area,
    body .breadcrumb-filter-bar {
        display: none !important;
    }

    /* Edge-to-edge Gallery */
    .mpd-gallery {
        position: relative;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background: #fdfdfd;
        overflow: hidden;
    }

    .mpd-gallery .swiper {
        width: 100%;
        height: auto;
    }

    .mpd-gallery .swiper-slide img {
        width: 100%;
        height: auto;
        vertical-align: middle;
        object-fit: cover;
    }

    /* PLP-style 0.5px Indicator Bar */
    .mpd-indicator {
        width: 100%;
        height: 0.5px;
        background: #f0f0f0;
        position: relative;
    }

    .mpd-indicator-active {
        height: 100%;
        background: #333;
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        transition: transform 0.3s ease, width 0.3s ease;
    }

    /* Product Main Info — PLP font sync */
    .mpd-main-info {
        padding: 15px 15px 20px 15px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .mpd-title-group {
        flex: 1;
        padding-right: 10px;
    }

    .mpd-title {
        font-size: 13px;
        font-weight: 300;
        margin: 0 0 5px 0;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
    }

    .mpd-price-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mpd-current-price {
        font-size: 14px;
        font-weight: 500;
        color: #000;
    }

    .mpd-old-price {
        font-size: 14px;
        color: #bbb;
        text-decoration: line-through;
        font-weight: 400;
    }

    .mpd-discount-badge {
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        text-transform: uppercase;
    }

    /* Favorite — simple, no background circle */
    .mpd-favorite-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 5px;
    }

    .mpd-favorite-btn i {
        font-size: 20px;
        color: #000;
    }

    /* Color Variants */
    .mpd-section-label {
        padding: 10px 15px 12px 15px;
        font-size: 14px;
        font-weight: 400;
        color: #000;
        letter-spacing: 0.5px;
    }

    .mpd-colors-slider {
        padding: 0 15px 25px 15px;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mpd-colors-slider::-webkit-scrollbar {
        display: none;
    }

    .mpd-color-card {
        width: 65px;
        height: 65px;
        flex-shrink: 0;
        border: 1px solid #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        text-decoration: none !important;
    }

    .mpd-color-card.active {
        border-color: #000;
        border-width: 1.5px;
    }

    .mpd-color-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Size Button — black border, centered text, no icon */
    .mpd-size-container {
        padding: 0 15px 25px 15px;
    }

    .mpd-size-trigger {
        width: 100%;
        height: 50px;
        border: 1px solid #000;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-weight: 400;
        color: #000;
        border-radius: 999px;
        cursor: pointer;
        letter-spacing: 1px;
        text-transform: none;
    }

    .mpd-size-trigger span.placeholder {
        color: #000;
    }

    /* Bottom Sheet — filter drawer aesthetic */
    .mpd-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 110000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mpd-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mpd-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 110001;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        padding-bottom: env(safe-area-inset-bottom, 20px);
        max-height: 70vh;
        display: flex;
        flex-direction: column;
    }

    .mpd-sheet.active {
        transform: translateY(0);
    }

    .mpd-sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        min-height: 80px;
        border-bottom: 0.5px solid #eaeaea;
        background: #fff;
        flex-shrink: 0;
    }

    .mpd-sheet-title {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.5px;
        margin: 0;
    }

    /* X button — same as filter drawer (plain SVG, no bg) */
    .mpd-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #000;
        background: none;
        border: none;
        border-radius: 0;
        cursor: pointer;
    }

    .mpd-sheet-content {
        overflow-y: auto;
        padding: 0 25px 25px 25px;
        -webkit-overflow-scrolling: touch;
    }

    .mpd-size-item {
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 300;
        border-bottom: 1px solid #f0f0f0;
        color: #000;
    }

    .mpd-size-item:active {
        opacity: 0.5;
    }

    .mpd-size-item.disabled {
        pointer-events: none;
    }

    .mpd-size-item.disabled span {
        opacity: 0.3;
    }

    /* Stock hint — grey box, black text */
    .mpd-size-item .stock-info {
        font-size: 11px;
        font-weight: 400;
        color: #000;
        background: #f0f0f0;
        padding: 4px 10px;
        border-radius: 2px;
        letter-spacing: 0.3px;
    }

    /* Guest phone (qonaq nömrəsi) */
    .mpd-guest-phone-wrap {
        padding: 0 15px 10px 15px;
    }

    .mpd-guest-phone-label {
        display: block;
        font-size: 13px;
        color: #333;
        margin-bottom: 6px;
    }

    .mpd-guest-phone-input {
        width: 100%;
        max-width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 0;
        box-sizing: border-box;
    }

    .mpd-guest-phone-sticky .mpd-guest-phone-input {
        padding: 8px 10px;
        font-size: 13px;
    }

    .mpd-sticky-actions .mpd-guest-phone-wrap {
        padding: 0;
        flex: 1 1 100%;
        min-width: 0;
    }

    .mpd-sticky-actions {
        flex-wrap: wrap;
    }

    .mpd-sticky-actions .mpd-guest-phone-input {
        width: 100%;
    }

    /* Action Buttons */
    .mpd-actions-static {
        padding: 0 15px 35px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mpd-btn {
        width: 100%;
        height: 50px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: none;
        text-decoration: none !important;
        color: #fff !important;
    }

    .mpd-btn-cart {
        background: #000;
    }

    .mpd-btn-whatsapp {
        background: #000;
    }

    .mpd-btn-whatsapp i {
        font-size: 18px;
    }

    /* Sticky Action Bar */
    .mpd-sticky-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 12px 15px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        display: flex;
        gap: 10px;
        z-index: 115000;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05);
        transform: translateY(110%);
        transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .mpd-sticky-actions.visible {
        transform: translateY(0);
    }

    .mpd-sticky-actions .mpd-btn {
        flex: 1;
        height: 48px;
        font-size: 12px;
    }

    /* Accordion — filter drawer font sync */
    .mpd-accordion {
        margin-top: 15px;
        border-top: 0.5px solid #eaeaea;
    }

    .mpd-accordion-item {
        border-bottom: 0.5px solid #eaeaea;
    }

    .mpd-accordion-header {
        padding: 20px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #000;
        letter-spacing: 0.5px;
    }

    .mpd-accordion-header i {
        font-size: 10px;
        color: #777;
        transition: transform 0.3s;
    }

    .mpd-accordion-item.active .mpd-accordion-header i {
        transform: rotate(180deg);
    }

    .mpd-accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mpd-accordion-item.active .mpd-accordion-body {
        max-height: 1000px;
    }

    .mpd-accordion-inner {
        padding: 0 15px 24px 15px;
        font-size: 14px;
        color: #555;
        line-height: 1.7;
        font-weight: 300;
    }

    .mpd-features {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mpd-features li {
        margin-bottom: 0;
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;
        font-weight: 300;
        font-size: 13px;
    }

    .mpd-features li:last-child {
        border-bottom: none;
    }

    .mpd-features li::before {
        content: none;
    }

    .mpd-feat-label {
        color: #888;
        font-weight: 300;
    }

    .mpd-feat-value {
        color: #000;
        font-weight: 400;
        text-align: right;
    }

    /* Similar Products — uses existing PLP .yb-product-card */
    .mpd-similar-section {
        padding: 30px 0 120px 0;
    }

    .mpd-similar-top {
        padding: 0 15px 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mpd-similar-top h3 {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
        letter-spacing: 1px;
    }

    .mpd-similar-controls {
        display: flex;
        gap: 20px;
    }

    .mpd-similar-controls span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.2);
        cursor: pointer;
        border: none;
        background: none;
    }

    .mpd-similar-controls span:active {
        color: rgba(0, 0, 0, 0.5);
    }

    .mpd-similar-scroll {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
    }

    .mpd-similar-scroll::-webkit-scrollbar {
        display: none;
    }

    .mpd-similar-card-wrap {
        flex: 0 0 50%;
        scroll-snap-align: start;
    }

    .mpd-similar-card-wrap .yb-product-card {
        width: 100%;
    }

    /* Image Zoom Overlay — Swiper gallery */
    .mpd-zoom-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 200000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .mpd-zoom-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mpd-zoom-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
        z-index: 200001;
        line-height: 1;
    }

    .mpdZoomSwiper {
        width: 100%;
        height: 100%;
    }

    .mpd-zoom-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .mpd-zoom-slide .swiper-zoom-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mpd-zoom-slide img {
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
    }

    .mpd-zoom-counter {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        font-weight: 300;
        letter-spacing: 2px;
        z-index: 200001;
    }

    /* Sticky bar must hide when menu is open */
    body.yb-menu-open .mpd-sticky-actions {
        display: none !important;
    }

    /* -----------------------------------------------------------
       PHASE 10: MOBILE ACCOUNT PANE (Luxury Slide-in)
    ----------------------------------------------------------- */

    .yb-account-pane {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        z-index: 210000;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: hidden;
    }

    body.yb-account-open {
        overflow: hidden !important;
        /* Prevent background scroll */
    }

    body.yb-account-open .yb-account-pane {
        transform: translateX(0);
    }

    .yb-account-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 70px;
        background: #ffffff;
        z-index: 10;
    }

    .yb-account-title {
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #000;
    }

    .yb-account-close {
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
    }

    .yb-account-body {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 25px;
        padding-bottom: 60px;
        background: #ffffff;
    }

    .yb-account-view {
        width: 100%;
        animation: fadeIn 0.4s ease forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Titles - Title Case sync */
    .yb-section-title {
        font-size: 16px;
        font-weight: 300;
        color: #000;
        margin-bottom: 25px;
        letter-spacing: 0.5px;
        transform: none !important;
    }

    .yb-section-desc {
        font-size: 13px;
        color: #777;
        font-weight: 300;
        line-height: 1.6;
        margin-top: -15px;
        margin-bottom: 20px;
    }

    /* Google Button - Capsule */
    .yb-google-btn {
        width: 100%;
        height: 46px;
        background: #fff;
        border: 1px solid #000;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 13.5px;
        color: #000;
        margin-bottom: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none !important;
    }

    .yb-google-btn:hover {
        text-decoration: none !important;
        background-color: #f9f9f9;
        color: #000;
    }

    .yb-google-btn:active {
        background: #f5f5f5;
    }

    .yb-google-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Label Styling */
    .yb-input-label {
        font-size: 13.5px;
        font-weight: 500;
        color: #000;
        margin-bottom: 6px;
        display: block;
        padding-left: 2px;
    }

    .yb-input-label sup {
        color: #000;
        top: -2px;
        margin-left: 1px;
    }

    .yb-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .yb-switch-text {
        font-size: 13px;
        color: #777;
        text-align: center;
        width: 100%;
        display: block;
        margin-bottom: 25px;
        font-weight: 300;
    }

    .yb-switch-text a {
        color: #000 !important;
        text-decoration: underline !important;
        font-weight: 500 !important;
    }

    .yb-va-ya {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #000 !important;
    }

    /* Input Styling & Autofill Fix */
    .yb-input-group input,
    .yb-prefix-select {
        width: 100%;
        height: 46px;
        border: 1px solid #999;
        padding: 0 16px;
        font-size: 14px;
        color: #000;
        border-radius: 4px;
        background: #ffffff !important;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
    }

    /* Force white background even on autofill */
    .yb-input-group input:-webkit-autofill,
    .yb-input-group input:-webkit-autofill:hover,
    .yb-input-group input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .center-text {
        text-align: center;
        width: 100%;
        display: block;
    }

    /* Password Wrapper & Logic */
    .yb-pass-wrapper {
        position: relative;
        width: 100%;
    }

    .yb-toggle-pass {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #777;
        z-index: 5;
    }

    .yb-toggle-pass svg {
        width: 18px;
        height: 18px;
    }

    /* Sub-links (Forgot password) */
    .yb-sub-link {
        display: inline-block;
        font-size: 13px;
        color: #000;
        text-decoration: underline;
        margin-top: 8px;
        font-weight: 300;
    }

    /* Split Phone Field */
    .yb-phone-split {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .yb-prefix-box {
        position: relative;
        flex: 0 0 110px;
    }

    .yb-prefix-select {
        padding-right: 30px;
        text-align: center;
        cursor: pointer;
    }

    .yb-prefix-box .select-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        pointer-events: none;
        color: #000;
    }

    .yb-phone-num-input {
        flex: 1;
    }

    /* Native Date Input Fix */
    input[type="date"] {
        padding-right: 10px;
    }

    /* Primary Button - Capsule */
    .yb-submit-btn {
        width: 100%;
        height: 46px;
        background: #000;
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 400;
        text-transform: none;
        /* Remove uppercase for Title Case */
        letter-spacing: 1.5px;
        margin-top: 15px;
        transition: opacity 0.3s ease;
    }

    .yb-submit-btn:active {
        opacity: 0.8;
    }

    /* Outline Button - Capsule */
    .yb-outline-btn {
        width: 100%;
        height: 46px;
        background: transparent;
        border: 1px solid #000;
        border-radius: 50px;
        color: #000;
        font-size: 12px;
        font-weight: 400;
        text-transform: none;
        /* Remove uppercase for Title Case */
        letter-spacing: 1px;
        margin-top: 20px;
        transition: all 0.3s ease;
    }

    .yb-outline-btn:active {
        background: #000;
        color: #fff;
    }

    /* Redundant switch-text removed */

    .yb-auth-divider {
        height: 1px;
        background: #f0f0f0;
        margin: 35px 0;
    }

    .yb-field-error {
        color: #d93025;
        font-size: 10.5px;
        margin-top: 5px;
        display: block;
        padding-left: 2px;
        font-weight: 300;
    }

    .yb-auth-error {
        color: #d93025;
        font-size: 13px;
        margin-bottom: 20px;
        border-left: 2px solid #d93025;
        padding-left: 12px;
        font-weight: 300;
    }

    /* ISOLATION: Hide PC Elements on Mobile */
    body.mobile-home-active .login-register-area,
    body:not(.mobile-home-active) .login-register-area,
    body .breadcrumb-area {
        display: none !important;
    }

}

/* =========================================================================
   PHASE 20: MOBILE ACCOUNT SYSTEM REBUILD ( isolated overlay )
   ========================================================================= */
@media (max-width: 991px) {

    /* LEGACY UI ISOLATION */
    .account_dashboard,
    .dashboard_tab_button,
    .tab-content,
    .myaccount-content,
    .breadcrumb-area,
    .myaccount_table_area {
        display: none !important;
    }

    /* OVERLAY CONTAINER */
    .mob-account-overlay {
        position: fixed;
        top: 70px;
        /* Exactly under luxury header */
        right: 0;
        width: 100%;
        height: calc(100% - 70px);
        background: #f0f2f5;
        z-index: 99998;
        /* Just below main header */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Rigid container, content will scroll */
        border-top: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    .mob-account-overlay.active {
        transform: translateX(0);
    }

    /* Keep for compatibility if needed, but overlay won't scroll anyway now */
    .mob-account-overlay.dropdown-open {
        overflow-y: hidden !important;
    }

    /* STICKY HEADER */
    /* STICKY HEADER FOR ACCOUNT PAGES */
    .mob-account-header {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        background: #fff !important;
        border-top: 1px solid #f0f0f0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        z-index: 99980 !important;
        /* Below global menu overlay (99990) */
        height: 75px !important;
        box-sizing: border-box !important;
    }

    .mob-account-overlay .mob-account-header {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        border-top: none !important;
        flex: 0 0 75px !important;
    }

    .mob-header-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mob-header-title {
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: capitalize !important;
        letter-spacing: 0.5px !important;
        color: #000;
    }

    .mob-header-right {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #000;
        cursor: pointer;
    }

    .mob-menu-text {
        font-size: 14px;
        font-weight: 400;
        text-transform: capitalize !important;
        letter-spacing: 0.5px;
    }

    /* Kart düyməsi: klikdə rəng dəyişməsin */
    .mob-card-btn:active,
    .mob-card-btn:focus,
    .mob-card-btn:visited {
        color: #fff !important;
    }

    /* Favori kartında boş olanda düyməni gizlət */
    .mob-fav-btn-wrap.mob-fav-btn-hidden {
        display: none !important;
    }

    /* Sifariş/Favori mini slider — 2 sütun, max 6 məhsul */
    .mob-mini-slider {
        margin-bottom: 12px;
        position: relative;
    }

    .mob-mini-slider-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .mob-mini-slider-track::-webkit-scrollbar {
        display: none;
    }

    .mob-mini-slider-item {
        scroll-snap-align: start;
        flex: 0 0 calc(50% - 6px);
        min-width: calc(50% - 6px);
        text-align: center;
        background: #fdfdfd;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid #f2f2f2;
        box-sizing: border-box;
    }

    .mob-mini-slider-item a {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .mob-mini-slider-item img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 6px;
    }

    .mob-mini-slider-item .mob-mini-slider-title {
        font-size: 13px;
        font-weight: 400;
        color: #000;
        margin-top: 6px;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-mini-slider-item .mob-mini-slider-price {
        font-size: 13px;
        font-weight: 400;
        color: #333;
    }

    .mob-mini-slider-arrows {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2px;
        padding: 0 2px;
    }

    .mob-mini-slider-arrow {
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #888;
        flex-shrink: 0;
        font-size: 12px;
        padding: 4px 2px;
        line-height: 1;
    }

    .mob-mini-slider-arrow:active {
        color: #000;
    }

    .mob-mini-slider-arrow:disabled,
    .mob-mini-slider-arrow.mob-arrow-hidden {
        visibility: hidden;
    }

    .mob-mini-slider-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0;
        text-align: center;
    }

    .mob-empty-icon {
        font-size: 28px;
        color: #d0d0d0;
        margin-bottom: 12px;
        display: block !important;
    }

    .mob-empty-text {
        font-size: 14px;
        font-weight: 400;
        color: #666;
        margin: 0;
    }

    .mob-menu-arrow {
        font-size: 11px;
        transition: transform 0.3s ease;
    }

    /* Padding for content below fixed header */
    .mob-account-native,
    .mob-wishlist-area,
    .mob-orders-area,
    .mob-profile-area {
        padding-top: 145px !important;
    }

    /* Favoritlər səhifəsində əlavə boşluğu aradan qaldırmaq üçün override */
    .mob-wishlist-area {
        padding-top: 0 !important;
    }

    .mob-account-header.dropdown-open .mob-menu-arrow {
        transform: rotate(180deg);
    }

    /* DROPDOWN MENU */
    .mob-account-dropdown {
        position: fixed;
        top: 145px;
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        z-index: 110;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.3s ease;
        overflow: hidden !important;
        /* Disable internal scrolling */
    }

    .mob-account-overlay .mob-account-dropdown {
        position: absolute;
        top: 75px;
    }

    .mob-account-dropdown.active {
        clip-path: inset(0 0 0 0);
    }

    /* Page-specific title (below fixed headers) */
    .mob-page-title {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #000 !important;
        margin-bottom: 25px;
        margin-top: 10px;
        letter-spacing: 0.5px;
        text-transform: capitalize !important;
        padding: 0 20px;
    }

    /* Gallery (Qalereya) — mobil: köhnə grid gizlə, yeni 2 sütun + lightbox */
    .gallery-desktop-wrap {
        display: none !important;
    }

    .about-desktop-wrap {
        display: none !important;
    }

    .contact-desktop-wrap {
        display: none !important;
    }

    .mob-gallery-wrap {
        padding-top: 70px !important;
        padding-bottom: 24px;
        font-family: inherit;
    }

    .mob-gallery-wrap .mob-page-title {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .mob-gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0 20px;
        align-items: start;
    }

    .mob-gallery-item {
        /* Asimmetriya: elementlər eyni hizada bitməsin */
    }

    .mob-gallery-link {
        display: block;
        line-height: 0;
    }

    .mob-gallery-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
        object-fit: cover;
        background: #f5f5f5;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    /* Fancybox lightbox: yalnız headerin üstündə; daxili layouta toxunulmur */
    .fancybox-container {
        z-index: 100000 !important;
    }

    .mob-dropdown-backdrop {
        position: fixed;
        top: 145px;
        left: 0;
        width: 100%;
        height: calc(100vh - 145px);
        background: rgba(0, 0, 0, 0.4);
        z-index: 105;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }

    .mob-account-overlay .mob-dropdown-backdrop {
        position: absolute;
        top: 75px;
        height: calc(100% - 75px);
    }

    body.mob-no-scroll,
    .mob-no-scroll {
        overflow: hidden !important;
    }

    .mob-dropdown-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .mob-dropdown-list {
        list-style: none;
        padding: 10px 0;
        margin: 0;
    }

    .mob-dropdown-list li {
        padding: 12px 0;
        /* Vertical padding only */
        margin: 0 20px;
        /* Horizontal margin instead of padding for border sync */
        font-size: 13px;
        /* Slightly smaller */
        font-weight: 400;
        letter-spacing: 0.2px;
        border-bottom: 1px solid #e0e0e0;
        /* More defined line */
    }

    .mob-dropdown-list li a {
        text-decoration: none !important;
        color: #000 !important;
        display: block;
        width: 100%;
        text-transform: capitalize !important;
        transition: opacity 0.2s ease;
    }

    .mob-dropdown-list li a:active {
        color: #000 !important;
        opacity: 0.6;
    }

    .mob-dropdown-list li:last-child {
        border-bottom: none;
    }

    /* CONTENT SECTIONS */
    .mob-account-content {
        flex: 1;
        padding-bottom: 40px;
        background: #f0f2f5;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hesab səhifəsində footer üstündəki əlavə boşluğu aradan qaldırmaq */
    .mob-account-native .mob-account-content {
        padding-bottom: 0;
    }

    .mob-section {
        display: none;
        animation: mobFadeIn 0.3s ease;
    }

    .mob-section.active {
        display: block;
    }

    @keyframes mobFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* OVERVIEW */
    #sec-overview {
        background: transparent;
        min-height: 100%;
    }

    .mob-overview-welcome {
        padding: 30px 20px;
        text-align: center;
    }

    .mob-welcome-msg {
        font-size: 13px;
        color: #888;
        font-weight: 300;
        margin-bottom: 5px;
    }

    .mob-customer-name {
        font-size: 22px;
        font-weight: 500;
        color: #000;
        margin: 0;
    }

    .mob-overview-cards {
        padding: 0 20px 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Hesab səhifəsi: 24px standart məsafə (digər səhifələr kimi) */
    .mob-account-native .mob-overview-cards {
        padding-bottom: 24px;
    }

    .mob-overview-card {
        background: #fff;
        border-radius: 12px;
        padding: 28px 24px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }

    .mob-overview-card h3 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 12px;
        padding-bottom: 12px;
        margin-top: 0;
        color: #000;
        border-bottom: 1px solid #f0f0f0;
    }

    .mob-overview-card p {
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 10px;
    }

    .mob-overview-card p:last-of-type {
        margin-bottom: 15px;
    }

    .mob-overview-card .mob-mini-list {
        font-size: 13px;
        font-weight: 400;
    }

    .mob-mini-list {
        margin-bottom: 20px;
    }

    .mob-card-btn {
        width: 100%;
        background: #000;
        color: #fff;
        border: none;
        padding: 12px;
        border-radius: 25px;
        font-size: 13px;
        font-weight: 400;
    }

    /* PROFILE PAGE - Matching login page input design */
    .mob-profile-area {
        background: #f0f2f5 !important;
        min-height: 100vh;
        padding-bottom: 24px !important;
    }

    .mob-profile-area .container {
        padding: 0 !important;
    }

    .mob-profile-form {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mob-form-group {
        margin-bottom: 0;
    }

    .mob-form-group label {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
        color: #000;
        margin-bottom: 6px;
        padding-left: 2px;
        text-transform: capitalize;
    }

    .mob-form-group input {
        width: 100%;
        height: 46px;
        border: 1px solid #999;
        padding: 0 16px;
        font-size: 14px;
        color: #000;
        border-radius: 4px;
        background: #ffffff !important;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        box-sizing: border-box;
    }

    .mob-form-group input:focus {
        border-color: #000;
    }

    .mob-form-group input.readonly-field {
        background: #f5f5f5 !important;
        color: #777;
        border-color: #ccc;
    }

    .mob-save-btn {
        width: 100%;
        height: 46px;
        background: #000;
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 400;
        text-transform: capitalize;
        letter-spacing: 1.5px;
        margin-top: 10px;
        transition: opacity 0.3s ease;
    }

    .mob-save-btn:active {
        opacity: 0.8;
    }

    /* PROFILE PHONE SPLIT (Matching login page yb-phone-split) */
    .mob-phone-split {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .mob-prefix-box {
        position: relative;
        flex: 0 0 110px;
    }

    .mob-prefix-select {
        width: 100%;
        height: 46px;
        border: 1px solid #999;
        padding: 0 30px 0 16px;
        font-size: 14px;
        color: #000;
        border-radius: 4px;
        background: #ffffff !important;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
    }

    .mob-prefix-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        pointer-events: none;
        color: #000;
    }

    .mob-phone-num-input {
        flex: 1;
        height: 46px;
        border: 1px solid #999;
        padding: 0 16px;
        font-size: 14px;
        color: #000;
        border-radius: 4px;
        background: #ffffff !important;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        box-sizing: border-box;
        min-width: 0;
    }

    .mob-phone-num-input:focus {
        border-color: #000;
    }

    /* ORDERS LIST */
    .mob-order-item {
        display: flex;
        gap: 15px;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }

    .mob-order-img {
        width: 70px;
        height: 70px;
        background: #f9f9f9;
        flex-shrink: 0;
    }

    .mob-order-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mob-order-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mob-order-title {
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .mob-order-meta {
        font-size: 11px;
        color: #888;
        margin-bottom: 5px;
    }

    .mob-order-price {
        font-size: 13px;
        font-weight: 500;
    }

    .mob-order-status {
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 4px;
        text-transform: uppercase;
        font-weight: 500;
    }

    .status-ordered {
        background: #eee;
        color: #000;
    }

    .status-processing {
        background: #fff3ce;
        color: #856404;
    }

    .status-completed {
        background: #d4edda;
        color: #155724;
    }

    .status-cancelled {
        background: #f8d7da;
        color: #721c24;
    }

}

/* WISHLIST & OVERLAYS – MOBİL */
@media (max-width: 991px) {
    /* HEADER + ACCOUNT DROPDOWN artıq yuxarıda tərif olunub */

    /* MÜŞTƏRİ ÜÇÜN FAVORİLƏR BAŞLIĞI */
    .mob-fav-header {
        padding: 16px 20px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    .mob-fav-title {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        letter-spacing: 0.5px;
    }

    .mob-fav-share-btn {
        background: #fff;
        border-radius: 999px;
        border: 1px solid #000;
        padding: 6px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 400;
        color: #000;
        gap: 6px;
    }

    /* QONAQ CTA BLOKU */
    .mob-guest-cta {
        padding: 85px 20px 20px;
        text-align: center;
        background: #fff;
    }

    .mob-guest-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .mob-guest-desc {
        font-size: 13px;
        color: #888;
        font-weight: 300;
        margin-bottom: 12px;
        max-width: none;
    }

    .mob-guest-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .mob-btn-login,
    .mob-btn-share-outline {
        width: 120px;
        max-width: 120px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 400;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
    }

    .mob-btn-login {
        background: #000;
        color: #fff;
    }

    .mob-btn-share-outline {
        background: #fff;
        color: #000;
        border-color: #000;
        gap: 6px;
    }

    /* WISHLIST CONTENT SAHƏSİ */
    .mob-wishlist-area {
        padding: 0 0 24px;
        min-height: 100vh;
        background: #fff;
    }

    .mob-fav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 0;
        column-gap: 0;
        padding: 4px 0 12px;
    }

    /* Cüt-cüt (2-li) düzülüş: yalnız tək qalan SON kart tam en alır.
       1 məhsul → tam en, 2 → yan-yana, 3 → 2+1, 4 → 2+2, 5 → 2+2+1 */
    .mob-fav-grid .mob-fav-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .mob-fav-card {
        position: relative;
    }

    .mob-fav-delete-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #000;
        z-index: 2;
    }

    .mob-card-fav-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        height: auto;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #000;
        opacity: 0.8;
        z-index: 20;
        padding: 0;
    }

    /* BOŞ STATE */
    .mob-fav-empty {
        padding: 85px 20px 20px;
        /* Fixed header hündürlüyünü nəzərə al */
        text-align: center;
        background: #fff;
    }

    .mob-fav-empty-hidden {
        display: none;
    }

    .mob-fav-info-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-bottom: 10px;
    }

    .mob-fav-info-text {
        font-size: 13px;
        color: #888;
        font-weight: 300;
        margin-bottom: 16px;
        max-width: none;
    }

    .mob-fav-empty-login {
        margin-top: 4px;
    }

    /* BOTTOM SHEET – FAVORİLƏRDƏN SİLMƏ */
    .mob-confirm-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 100001;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
        padding: 24px 20px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 20px));
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    }

    .mob-confirm-sheet.active {
        visibility: visible;
        transform: translateY(0);
    }

    .mob-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .mob-sheet-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .mob-sheet-content {
        text-align: left;
    }

    .mob-fav-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .mob-fav-sheet-title {
        font-size: 16px;
        font-weight: 500;
    }

    .mob-fav-sheet-close {
        background: none;
        border: none;
        font-size: 18px;
        line-height: 1;
    }

    .mob-fav-sheet-text {
        font-size: 13px;
        color: #444;
        margin-bottom: 18px;
    }

    .mob-sheet-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mob-btn-confirm,
    .mob-btn-cancel {
        width: 100%;
        padding: 12px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        border: none;
    }

    .mob-btn-confirm {
        background: #000;
        color: #fff;
    }

    .mob-btn-cancel {
        background: #fff;
        color: #000;
        border: 1px solid #e0e0e0;
    }

    /* LOADING PLACEHOLDER & SCROLL LOCK */
    .mob-loading-placeholder {
        padding: 20px;
        text-align: center;
        color: #ccc;
        font-size: 12px;
    }

    body.mob-overlay-open {
        overflow: hidden !important;
    }

    /* ═══════════════════════════════════════════════
       SİFARİŞLƏRİM SƏHİFƏSİ
       ═══════════════════════════════════════════════ */
    .mob-orders-area {
        padding: 0 0 24px;
        min-height: 100vh;
        background: #fff;
    }

    .mob-orders-container {
        padding: 0;
    }

    /* ── Sub-Header: Title + Filter ── */
    .mob-orders-subheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        background: #fff;
    }

    .mob-orders-page-title {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        letter-spacing: 0.5px;
        text-transform: capitalize;
    }

    .mob-orders-filter-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .mob-orders-filter {
        appearance: none;
        -webkit-appearance: none;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 999px;
        padding: 6px 28px 6px 12px;
        font-size: 11px;
        font-weight: 400;
        color: #000;
        cursor: pointer;
        outline: none;
        min-width: 0;
        text-transform: capitalize;
        letter-spacing: 0.2px;
    }

    .mob-orders-filter:focus {
        border-color: #000;
    }

    .mob-orders-filter-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 8px;
        color: #999;
        pointer-events: none;
    }

    /* ── Order Cards List ── */
    .mob-orders-list {
        padding: 0 20px;
    }

    .mob-order-card {
        display: flex;
        align-items: stretch;
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;
        gap: 0;
        position: relative;
    }

    .mob-order-delete-btn {
        position: absolute;
        top: 16px;
        left: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 5px 6px;
        /* minimal padding to keep it tightly in the corner */
        color: #000000;
        /* Softer color */
        font-size: 14px;
        z-index: 10;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1;
    }

    .mob-order-delete-btn i {
        /* Remove shadow, keep it perfectly simple */
    }

    .mob-order-delete-btn:active {
        color: #d9534f;
        transform: scale(0.9);
    }

    .mob-order-card:last-child {
        border-bottom: none;
    }

    .mob-order-card-left {
        display: flex;
        gap: 14px;
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: inherit;
    }

    /* ── Product Image ── */
    .mob-order-img {
        width: 105px;
        height: 105px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        background: #f5f5f5;
    }

    .mob-order-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mob-img-placeholder {
        width: 105px;
        height: 105px;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        border-radius: 6px;
        font-size: 24px;
    }

    /* ── Order Info Details ── */
    .mob-order-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        gap: 3px;
    }

    .mob-order-detail-row {
        display: flex;
        align-items: baseline;
        gap: 4px;
        line-height: 1.4;
    }

    .mob-order-detail-label {
        font-size: 11px;
        font-weight: 400;
        color: #999;
        flex-shrink: 0;
        text-transform: capitalize;
    }

    .mob-order-detail-value {
        font-size: 12px;
        font-weight: 400;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-order-price-val {
        font-weight: 500;
    }

    /* ── Status Tracker (capsule pills) ── */
    .mob-order-card-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .mob-order-tracker {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .mob-tracker-capsule {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 78px;
        padding: 4px 0;
        border-radius: 10px;
        font-size: 7.5px;
        font-weight: 400;
        letter-spacing: 0.15px;
        white-space: nowrap;
        background: #f0f0f0;
        color: #c0c0c0;
        transition: all 0.3s ease;
        text-transform: capitalize;
        box-sizing: border-box;
    }

    .mob-tracker-capsule.current {
        background: #000;
        color: #fff;
        font-weight: 500;
    }

    .mob-tracker-capsule.passed {
        background: #e8e8e8;
        color: #999;
    }

    .mob-tracker-capsule.cancelled {
        background: #d9534f;
        color: #fff;
        font-weight: 500;
    }

    .mob-tracker-connector {
        width: 1px;
        height: 5px;
        background: #e0e0e0;
        transition: background 0.3s ease;
    }

    .mob-tracker-connector.passed {
        background: #999;
    }

    .mob-tracker-connector.cancelled {
        background: #e8c0bc;
    }

    /* ── Empty Filter State ── */
    .mob-orders-empty-filter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        color: #bbb;
        gap: 10px;
    }

    .mob-orders-empty-filter i {
        font-size: 28px;
    }

    .mob-orders-empty-filter span {
        font-size: 14px;
        font-weight: 400;
        color: #999;
    }

    /* ── Empty State ── */
    .mob-orders-area .mob-empty-state {
        text-align: center;
        padding: 50px 20px;
    }

    .mob-orders-area .mob-empty-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .mob-orders-area .mob-empty-text {
        font-size: 14px;
        color: #777;
        margin-bottom: 25px;
    }

    /* ═══════════════════════════════════════════════
       FAVORİT SEBET İKONU VƏ SİZE SEÇİMİ
       ═══════════════════════════════════════════════ */
    .mob-fav-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .mob-fav-title-row .yb-card-title {
        flex: 1;
        min-width: 0;
    }

    .mob-fav-add-cart-btn {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: #000;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        flex-shrink: 0;
    }

    .mob-fav-add-cart-btn svg {
        width: 20px;
        height: 20px;
    }

    /* ═══════════════════════════════════════════════
       MOBILE NOTIFICATION PANEL (TOAST)
       ═══════════════════════════════════════════════ */
    .mob-notif-panel {
        position: fixed;
        top: 85px;
        left: 50%;
        transform: translateX(-50%) translateY(-150%);
        width: 90%;
        max-width: 380px;
        background-color: #ececec;
        border-radius: 12px;
        display: flex;
        align-items: center;
        padding: 12px 14px 24px 14px;
        box-shadow: none;
        /* Removed shadow */
        z-index: 99999;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        visibility: hidden;
    }

    .mob-notif-panel.active {
        transform: translateX(-50%) translateY(0);
        visibility: visible;
    }

    .mob-notif-left {
        flex: 0 0 60px;
        margin-right: 12px;
    }

    .mob-notif-left img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
    }

    .mob-notif-center {
        flex: 1;
        font-size: 9px;
        line-height: 1.4;
        color: #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .mob-notif-text {
        margin: 0;
        text-align: left;
        font-size: 12px !important;
    }

    .mob-notif-text span:first-child {
        font-weight: 600;
        text-transform: capitalize;
    }

    .mob-notif-link,
    .mob-notif-link:hover,
    .mob-notif-link:active,
    .mob-notif-link:focus,
    .mob-notif-link:visited {
        color: #000 !important;
        font-weight: 600;
        text-decoration: underline !important;
        font-size: 12px !important;
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 5px;
        white-space: nowrap;
    }

    .mob-notif-right {
        flex: 0 0 24px;
        display: flex;
        justify-content: flex-end;
        align-self: center;
        color: #000;
        cursor: pointer;
    }

    /* Notification Overlay */
    .mob-notif-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mob-notif-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    body.mob-notif-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* ═══════════════════════════════════════════════
       MOBILE CART DRAWER
       ═══════════════════════════════════════════════ */
    .mob-cart-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .mob-cart-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    body.mob-cart-open {
        overflow: hidden !important;
    }

    .mob-cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 100%;
        background: #fff;
        z-index: 100001;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    }

    .mob-cart-drawer.active {
        transform: translateX(0);
    }

    .mob-cart-drawer.mob-cart-page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        height: 100dvh;
        z-index: 999999;
        transform: none;
        transition: none;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .mob-cart-drawer.mob-cart-page .mob-cart-footer {
        position: sticky;
        bottom: 0;
        margin-top: auto;
    }

    .mob-cart-drawer.mob-cart-page .mob-cart-items {
        padding-bottom: 20px;
    }

    .mob-cart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .mob-cart-title {
        font-size: 14px;
        font-weight: 400;
        margin: 0;
        text-transform: capitalize;
        letter-spacing: 0.5px;
    }

    .mob-cart-count {
        color: #000000;
        font-weight: 400;
        font-size: 14px;
    }

    .mob-cart-close {
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        cursor: pointer;
    }

    .mob-cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 0 20px;
        -webkit-overflow-scrolling: touch;
    }

    .mob-cart-card {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
        gap: 12px;
    }

    .mob-cart-card:last-child {
        border-bottom: none;
    }

    .mob-cart-card-top {
        display: flex;
        gap: 15px;
    }

    .mob-cart-card-img {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        background: #f5f5f5;
    }

    .mob-cart-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mob-cart-card-delete {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #000;
        z-index: 2;
    }

    .mob-cart-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-width: 0;
    }

    .mob-cart-card-title {
        font-size: 15px;
        font-weight: 500;
        color: #000 !important;
        margin-bottom: 14px;
        text-decoration: none;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-cart-card-title:visited,
    .mob-cart-card-title:active,
    .mob-cart-card-title:hover {
        color: #000 !important;
        text-decoration: none;
    }

    .mob-cart-card-img a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mob-cart-card-detail {
        font-size: 14px;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .mob-cart-detail-label {
        color: #999;
        font-weight: 300;
    }

    .mob-cart-detail-value {
        color: #000;
        font-weight: 500;
    }

    .mob-cart-qty-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mob-cart-qty {
        display: flex;
        align-items: center;
        border: 1px solid #e0e0e0;
        border-radius: 999px;
        overflow: hidden;
        height: 28px;
    }

    .mob-qty-btn {
        background: transparent;
        border: none;
        width: 28px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #000;
        cursor: pointer;
    }

    .mob-qty-btn:disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .mob-qty-val {
        font-size: 12px;
        font-weight: 500;
        width: 20px;
        text-align: center;
    }

    .mob-cart-card-price {
        font-family: inherit;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.2;
    }

    /* Səbət: məhsul kartı ilə eyni köhnə+yeni qiymət sistemi */
    .mob-cart-card-price.mob-price-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
    }
    .mob-cart-old-price {
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.58);
        position: relative;
    }
    .mob-cart-old-price::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 0.7px;
        background: rgba(0, 0, 0);
    }
    .mob-cart-new-price {
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #000;
    }

    .mob-cart-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        color: #999;
    }

    .mob-cart-empty-icon {
        font-size: 32px;
        color: #d0d0d0;
        margin-bottom: 14px;
        display: flex;
        justify-content: center;
    }

    .mob-cart-empty-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #000;
    }

    .mob-cart-empty-text {
        font-size: 14px;
        color: #777;
        margin-bottom: 25px;
    }

    .mob-cart-empty .mob-card-btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* Mobil səbət footer - köhnə ideal mobil dizayn (kompakt) */
    .mob-cart-footer {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 16px 20px;
        border-top: 1px solid #f0f0f0;
        background: #fff;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        font-family: inherit;
    }

    .mob-cart-totals {
        margin-bottom: 0;
    }

    .mob-cart-total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        font-family: inherit;
        color: #555;
        margin-bottom: 6px;
    }

    .mob-cart-total-row span:last-child {
        font-weight: 500;
        color: #333;
        white-space: nowrap;
    }

    .mob-cart-discount-row,
    .mob-cart-discount-row span {
        color: #d9534f !important;
    }

    .mob-cart-original-faded {
        color: rgba(0, 0, 0, 0.55) !important;
    }
    .mob-cart-original-faded span {
        color: rgba(0, 0, 0, 0.55) !important;
    }

    .mob-cart-final-row {
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        color: #000;
        padding-top: 8px;
        margin-top: 4px;
        border-top: 1px dashed #e0e0e0;
        margin-bottom: 0;
    }

    .mob-cart-final-row span:last-child {
        font-weight: 700;
        color: #000;
    }

    .mob-cart-wp-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 48px;
        min-height: 48px;
        background: #000;
        color: #fff !important;
        font-size: 14px;
        font-weight: 500;
        font-family: inherit;
        border-radius: 999px;
        gap: 8px;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
    }

    .mob-cart-wp-btn i {
        font-size: 18px;
    }

    /* ========================================================= */
    /* MOBILE ABOUT US PAGE – Hekayə (Story) Dizayn                */
    /* ========================================================= */
    /* Desktop content hidden via .about-desktop-wrap (same as gallery) */

    .mob-about-page {
        padding: 90px 20px 24px 20px;
        background: #fff;
        font-family: inherit;
    }

    /* Hero: bayraq təmiz, mətn ayrı blokda */
    .mob-about-hero-wrap {
        overflow: hidden;
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        background: #f8f8f8;
    }

    .mob-about-hero-wrap .mob-about-hero {
        width: 100%;
        display: block;
        vertical-align: middle;
        object-fit: cover;
        min-height: 160px;
    }

    .mob-about-header-block {
        margin-bottom: 20px;
        text-align: center;
    }

    .mob-about-header-title {
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: #000;
        margin: 0 0 4px 0;
        letter-spacing: 0.3px;
    }

    .mob-about-header-tagline {
        font-size: 12px;
        color: #666;
        letter-spacing: 0.5px;
    }

    .mob-about-title {
        font-family: inherit;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #000 !important;
        margin: 0 0 16px 0;
        letter-spacing: 0.3px;
        padding: 0;
        text-align: left;
    }

    /* Mətn: kiçik şrift, Daha çox göstər */
    .mob-about-text-wrap {
        margin-bottom: 20px;
    }

    .mob-about-text {
        font-size: 13px;
        line-height: 1.6;
        color: #444;
        text-align: left;
        padding: 0;
    }

    .mob-about-text-collapsible.mob-about-text-collapsed p:nth-child(n+2) {
        display: none;
    }

    .mob-about-text p {
        margin-bottom: 12px;
    }

    .mob-about-text p:last-child {
        margin-bottom: 0;
    }

    .mob-about-more-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 16px;
        background: transparent;
        border: 1px solid #c3b3a6;
        color: #c3b3a6;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.25s, color 0.25s;
    }

    .mob-about-more-btn:hover,
    .mob-about-more-btn:active {
        background: #c3b3a6;
        color: #fff;
    }

    /* Timeline – mənalı bölmələr */
    .mob-about-milestones {
        margin-bottom: 24px;
        background: #faf9f8;
        padding: 16px;
        border-radius: 8px;
        border-left: 3px solid #c3b3a6;
    }

    .mob-milestone-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        font-size: 12px;
    }

    .mob-milestone-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mob-milestone-year {
        font-weight: 600;
        color: #000;
        font-size: 12px;
    }

    .mob-milestone-desc {
        color: #555;
        font-size: 11px;
        line-height: 1.4;
    }

    /* Vurğu kartı */
    .mob-about-highlight,
    .mob-highlight-block {
        background: #faf9f8;
        padding: 16px;
        border-radius: 8px;
        margin: 20px 0;
        border-left: 3px solid #c3b3a6;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .mob-about-highlight .mob-highlight-text,
    .mob-highlight-text {
        font-size: 15px;
        font-weight: 600;
        color: #000;
        margin: 0 0 8px 0;
        line-height: 1.4;
        font-family: inherit;
    }

    .mob-about-highlight .mob-highlight-desc {
        font-size: 12px;
        line-height: 1.5;
        color: #444;
        margin: 0;
    }

    /* Video Section + pulse */
    .mob-about-video {
        width: 100%;
        height: 180px;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        position: relative;
        margin-top: 30px;
        margin-bottom: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mob-video-popup {
        width: 52px;
        height: 52px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 18px;
        text-decoration: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        padding-left: 4px;
    }

    .mob-video-pulse {
        animation: mob-about-pulse 2s ease-in-out infinite;
    }

    @keyframes mob-about-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .mob-about-subtitle {
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #000;
        margin-bottom: 12px;
    }

    .mob-about-subtitle-after {
        margin-top: 20px;
    }

    .mob-about-subtitle-team {
        text-align: center;
        margin-bottom: 16px;
    }

    /* Images – horizontal scroll */
    .mob-about-images-wrap {
        margin-bottom: 30px;
        overflow: hidden;
    }

    .mob-about-images-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mob-about-images-scroll::-webkit-scrollbar {
        display: none;
    }

    .mob-about-images-scroll .mob-about-img-wrap {
        flex: 0 0 160px;
        width: 160px;
    }

    .mob-about-img-wrap img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Missions – nömrəli kartlar */
    .mob-missions-area {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mob-mission-box {
        background: #fff;
        padding: 16px 16px 16px 44px;
        border-radius: 8px;
        border: 1px solid #eee;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
        position: relative;
    }

    .mob-mission-num {
        position: absolute;
        left: 16px;
        top: 18px;
        font-size: 20px;
        font-weight: 700;
        color: #c3b3a6;
        line-height: 1;
    }

    .mob-mission-box h3 {
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: #000;
        margin-bottom: 6px;
    }

    .mob-mission-box p {
        font-size: 12px;
        line-height: 1.5;
        color: #555;
        margin: 0;
    }

    /* Statistics – count-up */
    .mob-funfact-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        background: #faf9f8;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 24px;
    }

    .mob-fact-box {
        text-align: center;
        background: #fff;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    }

    .mob-fact-icon i {
        font-size: 22px;
        color: #c3b3a6;
        margin-bottom: 6px;
        display: inline-block;
    }

    .mob-fact-count {
        font-family: inherit;
        font-size: 20px;
        font-weight: 700;
        color: #000;
        margin-bottom: 4px;
    }

    .mob-fact-box span {
        font-size: 10px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Team – horizontal scroll */
    .mob-team-area {
        margin-bottom: 30px;
    }

    .mob-team-scroll {
        overflow-x: auto;
        margin: 0 -20px;
        padding: 0 20px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mob-team-scroll::-webkit-scrollbar {
        display: none;
    }

    .mob-team-track {
        display: flex;
        gap: 16px;
    }

    .mob-team-card {
        flex: 0 0 140px;
        width: 140px;
        text-align: center;
        background: #fafafa;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 15px;
        border: 1px solid #eee;
    }

    .mob-team-img img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        margin-bottom: 12px;
    }

    .mob-team-card h4 {
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        color: #000;
        margin-bottom: 2px;
        padding: 0 6px;
    }

    .mob-team-card span {
        font-size: 10px;
        color: #777;
    }

    /* Scroll reveal */
    .mob-about-reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .mob-about-reveal.mob-about-revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* ========================================================= */
    /* MOBILE CONTACT PAGE                                       */
    /* ========================================================= */
    .mob-contact-page {
        padding: 90px 20px 24px 20px;
        background: #fff;
        font-family: inherit;
    }

    .mob-contact-title {
        font-family: inherit;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #000 !important;
        margin: 0 0 24px 0;
        letter-spacing: 0.5px;
        text-transform: capitalize;
        padding: 0;
        text-align: left;
    }

    .mob-contact-message {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.5;
    }

    .mob-contact-success {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .mob-contact-error {
        background: #ffebee;
        color: #c62828;
    }

    .mob-contact-info-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .mob-contact-card {
        display: flex;
        align-items: center;
        gap: 14px;
        background: #f9f9f9;
        padding: 16px;
        border-radius: 8px;
        border: 1px solid #eee;
    }

    .mob-contact-card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 18px;
    }

    .mob-contact-card-content p {
        margin: 0 0 6px 0;
        font-size: 14px;
        line-height: 1.5;
        color: #333;
    }

    .mob-contact-card-content p:last-child {
        margin-bottom: 0;
    }

    .mob-contact-card-content a {
        color: #000;
        text-decoration: none;
        font-weight: 500;
    }

    .mob-contact-card-content a:hover {
        text-decoration: underline;
    }

    .mob-contact-card-link {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .mob-contact-card-link:hover,
    .mob-contact-card-link:active {
        text-decoration: none;
        color: inherit;
    }

    .mob-contact-card-link .mob-contact-card-content p {
        color: #333;
    }

    #mob-contact-map {
        scroll-margin-top: 90px;
    }

    .mob-contact-social {
        margin-bottom: 28px;
    }

    .mob-contact-social-title {
        font-family: inherit;
        font-size: 18px;
        font-weight: 500;
        color: #000;
        margin: 0 0 14px 0;
    }

    .mob-contact-social-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mob-contact-social-list li a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 22px;
        opacity: 0.85;
    }

    .mob-contact-social-list li a:active {
        opacity: 0.6;
    }

    .mob-contact-form-wrap {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #eee;
        margin-bottom: 24px;
    }

    .mob-contact-form-title {
        font-family: inherit;
        font-size: 18px;
        font-weight: 500;
        color: #000;
        margin: 0 0 20px 0;
    }

    .mob-contact-form .yb-input-group {
        margin-bottom: 20px;
    }

    .mob-contact-form .yb-input-group:last-of-type {
        margin-bottom: 20px;
    }

    .mob-contact-form textarea {
        height: 120px;
        padding: 12px 16px;
        resize: vertical;
        border: 1px solid #999 !important;
        background: #ffffff !important;
    }

    .mob-contact-form textarea:focus {
        border: 1px solid #999 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .mob-contact-map {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
    }

    .mob-contact-map iframe {
        display: block;
        width: 100%;
        height: 250px;
    }

    /* ── Mobil blog səhifəsi (yeni dizayn) ── */
    .mob-blog-area {
        padding: 0 20px 24px;
        padding-top: 70px;
        background: #f5f5f5;
        min-height: 50vh;
    }

    .mob-blog-page-title {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        margin: 0 0 20px;
        letter-spacing: 0.5px;
        text-transform: capitalize;
        padding: 0;
    }

    .mob-blog-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mob-blog-card {
        display: block;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        text-decoration: none;
        color: inherit;
        transition: box-shadow 0.2s ease;
    }

    .mob-blog-card:active {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .mob-blog-img {
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        position: relative;
        background: #f0f0f0;
    }

    .mob-blog-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background: #f0f0f0;
        display: block;
    }

    .mob-blog-body {
        padding: 16px 18px 20px;
    }

    .mob-blog-date {
        display: block;
        font-size: 11px;
        color: #777;
        letter-spacing: 0.3px;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .mob-blog-title {
        font-size: 17px;
        font-weight: 600;
        color: #000;
        margin: 0 0 10px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mob-blog-desc {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
        margin: 0 0 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mob-blog-link {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        text-decoration: underline;
        display: inline-block;
    }

    .mob-blog-pagination {
        margin-top: 28px;
        text-align: center;
    }

    .mob-blog-pagination ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .mob-blog-pagination li {
        display: inline-block;
    }

    .mob-blog-pagination .mob-blog-pag-num,
    .mob-blog-pagination .mob-blog-pag-prev,
    .mob-blog-pagination .mob-blog-pag-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 14px;
        color: #000;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mob-blog-pagination .mob-blog-pag-num.active,
    .mob-blog-pagination .mob-blog-pag-num:active {
        background: #000;
        color: #fff;
    }

    .mob-blog-pagination .mob-blog-pag-prev:active,
    .mob-blog-pagination .mob-blog-pag-next:active {
        background: #f0f0f0;
    }

    /* ── Mobil blog məqalə detalları: şəkil–mətn ahengi, interaktiv qalereya ── */
    .mob-article-area {
        padding: 0 20px 24px;
        padding-top: 70px;
        background: #f5f5f5;
        min-height: 50vh;
    }

    .mob-article-nav {
        padding: 14px 0 18px;
    }

    .mob-article-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }

    .mob-article-back-arrow {
        color: #000;
        font-weight: 600;
    }

    .mob-article-back:active {
        opacity: 0.7;
    }

    .mob-article-figure {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        background: #f0f0f0;
    }

    .mob-article-figure-img {
        width: 100%;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        object-position: center;
        background: #f0f0f0;
    }

    .mob-article-content {
        background: #fff;
        border-radius: 16px;
        padding: 22px 20px 26px;
        margin-bottom: 24px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
        overflow-x: hidden;
    }

    .mob-article-date {
        display: block;
        font-size: 11px;
        color: #777;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .mob-article-title {
        font-size: 19px;
        font-weight: 600;
        color: #000;
        margin: 0 0 16px;
        line-height: 1.35;
    }

    .mob-article-body {
        font-size: 15px;
        color: #333;
        line-height: 1.7;
        overflow-x: hidden;
        word-wrap: break-word;
    }

    .mob-article-body p {
        margin: 0 0 14px;
        color: #333;
    }

    .mob-article-body p:last-child {
        margin-bottom: 0;
    }

    .mob-article-body hr {
        border: none;
        border-top: 1px dashed #ddd;
        margin: 16px 0;
        max-width: 100%;
    }

    .mob-article-gallery {
        margin-bottom: 8px;
    }

    .mob-article-gallery-title {
        font-size: 12px;
        font-weight: 600;
        color: #000;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0 0 14px;
        padding: 0 4px;
    }

    .mob-article-gallery-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 8px;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .mob-article-gallery-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .mob-article-gallery-scroll::-webkit-scrollbar-track {
        background: #eee;
        border-radius: 2px;
    }

    .mob-article-gallery-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    .mob-article-gallery-item {
        flex: 0 0 72%;
        max-width: 280px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 14px;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        background: #f0f0f0;
    }

    .mob-article-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        background: #f0f0f0;
        display: block;
    }

    /* ── Mobil footer (Təklif 1: Kompakt) ── */
    /* Global standart: bütün səhifələrdə eyni boşluq */
    .mob-footer {
        margin-top: 16px;
        padding: 28px 20px 32px;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #eee;
        font-family: inherit;
    }

    .mob-footer-inner {
        max-width: 100%;
        margin: 0 auto;
    }

    .mob-footer-logo-wrap {
        text-align: center;
        margin-bottom: 24px;
    }

    .mob-footer-logo-link {
        display: inline-block;
        text-decoration: none;
    }

    .mob-footer-logo {
        max-height: 48px;
        width: auto;
        display: block;
        object-fit: contain;
    }

    .mob-footer-slogan {
        font-size: 14px;
        line-height: 1.5;
        color: #555;
        margin: 12px 0 0;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .mob-footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 16px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .mob-footer-links a {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        text-decoration: none;
    }

    .mob-footer-links a:active {
        opacity: 0.7;
    }

    .mob-footer-contact {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .mob-footer-contact-item {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
    }

    .mob-footer-contact-item i {
        width: 24px;
        text-align: center;
        color: #666;
        font-size: 16px;
    }

    /* Telefon və email linklərində hover/active rəng dəyişimini ləğv et */
    .mob-footer-contact a.mob-footer-contact-item:hover,
    .mob-footer-contact a.mob-footer-contact-item:active,
    .mob-footer-contact a.mob-footer-contact-item:focus,
    .mob-footer-contact a.mob-footer-contact-item:visited {
        color: #333 !important;
        opacity: 1 !important;
    }

    .mob-footer-address {
        color: #333;
        font-size: 14px;
        line-height: 1.5;
    }

    .mob-footer-social {
        text-align: center;
    }

    .mob-footer-social-title {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        margin: 0 0 14px 0;
        display: block;
    }

    .mob-footer-social-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .mob-footer-social-list li a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 20px;
        opacity: 0.85;
    }

    .mob-footer-social-list li a:active {
        opacity: 0.6;
    }

    /* Səhifələr sabit alt bar ilə (mpd-sticky-actions): footer görünür olsun */
    body.has-mpd-sticky .mob-footer {
        padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom, 0px));
    }

    /* Hesab səhifəsi: ağ zolağı aradan qaldırmaq (margin body fonunu göstərir) */
    body.account-page-active .mob-footer {
        margin-top: 0;
    }

}