/*
Theme Name: Maison Driea
Author: You
Version: 1.0
*/
/* =========================
   HELVETICA WORLD FONT
========================= */

@font-face {
    font-family: 'Helvetica World';
    src: url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Regular.woff2') format('woff2'),
         url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica World';
    src: url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Bold.woff2') format('woff2'),
         url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica World';
    src: url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Italic.woff2') format('woff2'),
         url('/wp-content/themes/maisonDreia/assets/fonts/helvetica-world/HelveticaWorld-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* ================================
   RESET
================================ */
html, body {
    font-family:
        "Helvetica World",
        "Neue Haas Grotesk",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;
    font-size: 14px; /* global minimum */
    background: #ffffff;
}

body {
    margin: 0;
    background: #ffffff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --md-utility-bar-height: 28px;
}

.md-utility-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--md-utility-bar-height);
    z-index: 1002;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    box-sizing: border-box;
}

.md-utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.md-utility-bar__item,
.md-utility-bar__sep {
    flex: 0 0 auto;
}

.md-utility-bar__location {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    /* Pin to the far right of the bar */
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
}

.md-utility-bar__ship-to {
    opacity: 0.7;
    margin-right: 2px;
}

.md-utility-bar__location:hover {
    opacity: 0.72;
}

.md-utility-bar__location:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
}

.md-utility-bar__chevron {
    font-size: 8px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Chevron rotates when selector is open */
.md-utility-bar__location[aria-expanded="true"] .md-utility-bar__chevron {
    transform: translateY(-1px) rotate(180deg);
}

@media (max-width: 768px) {
    :root {
        --md-utility-bar-height: 34px;
    }

    .md-utility-bar {
        padding: 0 10px;
    }

    /* 3-column grid: left | center | right — all on one row */
    .md-utility-bar__inner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 0;
        font-size: 7.5px;
        letter-spacing: 0.10em;
        line-height: 1;
        white-space: nowrap;
        width: 100%;
    }

    /* Hide the bullet separator on mobile */
    .md-utility-bar__sep {
        display: none;
    }

    /* "Worldwide Shipping" — left column, left-aligned */
    .md-utility-bar__item:first-of-type {
        grid-column: 1;
        text-align: left;
    }

    /* "Duties & Taxes Included" — center column, centered */
    .md-utility-bar__item:last-of-type {
        grid-column: 2;
        text-align: center;
    }

    /* "Ship to: EU | EUR" — right column, right-aligned, reset absolute */
    .md-utility-bar__location {
        grid-column: 3;
        position: static;
        transform: none;
        top: auto;
        right: auto;
        justify-content: flex-end;
        text-align: right;
    }
}


/* ================================
   REGION SELECTOR
================================ */

/* Prevent body scroll when selector is open */
body.md-region-open {
    overflow: hidden;
}

/* Outer wrapper — hidden by default */
.md-region-selector {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
    visibility: hidden;
}

.md-region-selector.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* Semi-transparent backdrop */
.md-region-selector__backdrop {
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0.45 );
    opacity: 0;
    transition: opacity 0.22s ease;
    cursor: pointer;
}

.md-region-selector.is-open .md-region-selector__backdrop {
    opacity: 1;
}

/* Panel — slides down from top-right */
.md-region-selector__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    color: #0a0a0a;
    width: 300px;
    max-width: 92vw;
    margin-top: var(--md-utility-bar-height);
    padding: 0 0 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.18s ease;
}

.md-region-selector.is-open .md-region-selector__panel {
    transform: translateY(0);
    opacity: 1;
}

/* Panel header */
.md-region-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
}

.md-region-selector__title {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    line-height: 1;
}

.md-region-selector__close {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.35);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    transition: color 0.15s;
    font-family: inherit;
}

.md-region-selector__close:hover {
    color: #0a0a0a;
}

/* Region option buttons */
.md-region-selector__option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.55);
    padding: 11px 20px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.md-region-selector__option:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #0a0a0a;
}

.md-region-selector__option.is-active {
    color: #0a0a0a;
}

.md-region-selector__option.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #0a0a0a;
}

.md-region-selector__flag {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.md-region-selector__name {
    flex: 1 1 auto;
    min-width: 0;
}

.md-region-selector__currency {
    flex: 0 0 auto;
    color: rgba(0, 0, 0, 0.35);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.md-region-selector__option.is-active .md-region-selector__currency {
    color: rgba(0, 0, 0, 0.55);
}

.md-region-selector__check {
    flex: 0 0 auto;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 2px;
}

/* Mobile: full-width panel, anchors left */
@media (max-width: 768px) {
    .md-region-selector {
        justify-content: flex-start;
    }

    .md-region-selector__panel {
        width: 100%;
        max-width: 100%;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    }
}


/* ================================
   HEADER
================================ */
.site-header {
    position: fixed;
    top: var(--md-utility-bar-height); left: 0; right: 0;
    height: 76px;                /* refined: tighter, more The Row */
    padding: 0 32px;
    display: flex;
    align-items: center;         /* this is what vertically centers everything */
    justify-content: space-between;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrolled (white) state */
.site-header.scrolled {
    background: #ffffff;
    border-bottom: 1px solid rgba(10,10,10,0.06);
    box-shadow: 0 2px 24px rgba(0,0,0,0.04);
}

.header-inner {
    display: contents; /* let header itself be the flex container */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

/* Logo image — keep your existing img, just control size */
.logo img {
    height: 24px;
    width: auto;
    display: block;
    /* White filter when header is transparent (over dark hero) */
    filter: brightness(0) invert(1);
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .logo img {
    filter: none; /* restore original logo color when scrolled */
}

/* Icon buttons (search, account, cart, wishlist) */
.header-right a,
.header-right .cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.header-right img {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) invert(1); /* white icons on dark hero */
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .header-right img {
    filter: none; /* restore dark icons when scrolled */
}

/* Account icon — slightly bolder than the others */
/* Default (non-scrolled): white + subtle white glow for weight */
.site-header a[aria-label="Account"] img {
    filter: brightness(0) invert(1) drop-shadow(0 0 0.5px rgba(255,255,255,0.9)) drop-shadow(0 0 0.5px rgba(255,255,255,0.9));
}
/* Scrolled: dark icon + subtle black shadow for weight */
.site-header.scrolled a[aria-label="Account"] img {
    filter: drop-shadow(0 0 0.4px #000) drop-shadow(0 0 0.4px #000);
}

.header-right a:hover img,
.header-right .cart-link:hover img {
    opacity: 0.5;
}

/* Inline SVG icons (e.g., wishlist star) — match img sizing & color states */
.header-right .header-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
    color: #ffffff;                 /* stroke uses currentColor */
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.scrolled .header-right .header-icon-svg {
    color: #0a0a0a;
}
.header-right a:hover .header-icon-svg {
    opacity: 0.5;
}

/* Hamburger toggle — three animated bars */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    transition: gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-toggle-bar {
    display: block;
    width: 100%;
    height: 1.2px;
    background: #ffffff;
    transform-origin: right center;
    transition:
        background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .menu-toggle-bar {
    background: #0a0a0a;
}

/* Hover: bars breathe — middle bar contracts, gaps open up */
.menu-toggle:hover {
    gap: 5px;
}
.menu-toggle:hover .menu-toggle-bar:nth-child(2) {
    width: 60%;
}

/* Cart count badge */
.cart-count {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #fff;
    transition: color 0.45s cubic-bezier(0.4,0,0.2,1);
}

.site-header.scrolled .cart-count {
    color: #0a0a0a;
}

/* =========================
   NON-HERO PAGES: always opaque header
   Homepage + Ethos page keep the transparent → white-on-scroll effect.
   Add .page-template-page-{slug}-php here for any future full-bleed hero pages.
========================= */
body:not(.homepage):not(.page-template-page-our-ethos-php) .site-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(10,10,10,0.1);
    box-shadow: 0 2px 24px rgba(0,0,0,0.06);
}

body:not(.homepage):not(.page-template-page-our-ethos-php) .logo img {
    filter: none;
}

body:not(.homepage):not(.page-template-page-our-ethos-php) .header-right img {
    filter: none;
}

body:not(.homepage):not(.page-template-page-our-ethos-php) .menu-toggle {
    color: #0a0a0a;
}

/* hamburger bars use background-color, not color */
body:not(.homepage):not(.page-template-page-our-ethos-php) .menu-toggle-bar {
    background: #0a0a0a;
}

/* wishlist SVG uses currentColor */
body:not(.homepage):not(.page-template-page-our-ethos-php) .header-right .header-icon-svg {
    color: #0a0a0a;
}

body:not(.homepage):not(.page-template-page-our-ethos-php) .cart-count {
    color: #0a0a0a;
}

/* Body offset so content doesn't hide under fixed header + utility bar */
body {
    padding-top: calc(72px + var(--md-utility-bar-height));
}

/* Full-bleed hero pages: no body offset — hero sits behind transparent header */
body.has-hero,
body.page-template-page-our-ethos-php {
    padding-top: 0;
}

/* Account pages: hero is black and full-bleed — remove body offset */
body.woocommerce-account {
    padding-top: 0;
}

/* ================================
   MAIN
================================ */
main {
    padding: 40px;
}

.ethos-page,
.story-page-wrap,
.contact-page-wrap {
    margin: 0;
    padding: 0;
}

/* ================================
   CONTAINER
================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================
   HERO (homepage)
================================ */
.hero {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

.hero img,
.hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================
   PRODUCT GRID
================================ */
/* PRODUCT GRID - LUXURY STYLE */
/* ========================================
   PRODUCT GRID — CLIENT MATCH (FIXED SCALE)
======================================== */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);

    /* MUCH tighter spacing */
    gap: 50px 24px;

    /* reduce side padding drastically */
    padding: 40px 40px;

    /* FULL WIDTH FEEL */
    max-width: 1400px;
    margin: 0 auto;
}

/* PRODUCT CARD */
.woocommerce ul.products li.product {
    text-align: center;
}

/* IMAGE — base rule (transform handled per-context below) */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
}

/* TITLE */
.product-title,
.woocommerce ul.products li.product h2 {
    font-size: 15px;
    letter-spacing: 1.5px;
    margin-top: 14px;
}

/* PRICE */
.price {
    font-size: 15px;
    margin-top: 6px;
}

/* REMOVE EXTRA WRAPPER WIDTH LIMIT */
.container {
    max-width: 1600px;  /* was 1200 */
}

.woocommerce ul.products li.product {
    text-align: center;
}

/* IMAGE */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* TITLE */
.woocommerce ul.products li.product h2 {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 16px;
    font-weight: 500;
}

/* PRICE */
.woocommerce ul.products li.product .price {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* ================================
   PRODUCT SINGLE
================================ */
.product-single-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 80px 120px;
}

.product-left img {
    width: 100%;
}

.product-right h1 {
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 700;
}

.product-right .price {
    margin: 20px 0;
    display: block;
    font-size: 13px;
}

.product-right button {
    padding: 12px 20px;
    background: black;
    color: white;
    border: none;
    cursor: pointer;
}

/* ================================
   PRODUCT PAGE (custom template)
================================ */
.product-container {
    display: flex;
    gap: 60px;
    padding: 40px 40px;
}

.product-gallery {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* No padding — gap alone controls all spacing between images.
       Outer edge spacing comes from product-container's padding. */
}

.gallery-item {
    overflow: hidden;
    /* Fixed aspect ratio so all images — regardless of original dimensions —
       occupy exactly the same frame. Portrait 2:3 is standard fashion photography.
       Shorter/wider images scale+crop to fill; nothing looks broken. */
    aspect-ratio: 2 / 3;
    background: #f5f5f5; /* neutral fallback while image loads */
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center; /* anchor to bottom so shoes are never cut off */
    transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Barely-there zoom over 2.4s — sensed, not watched */
.gallery-item:hover img {
    transform: scale(1.03);
}


.product-info {
    width: 40%;
    position: static;
}

/* ── Title row: product name + star icon on same line ── */
.product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.product-title-row h1 {
    font-size: 22px;
    margin: 0;
    flex: 1;
    line-height: 1.25;
}

.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button,
.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button:hover,
.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button:focus,
.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a,
.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a:hover,
.product-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a:focus,
/* ── Mobile single product: same chrome reset ── */
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button,
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button:hover,
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-to-wishlist-button:focus,
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a,
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a:hover,
.mob-sp-title-row .yith-wishlist-btn-wrap .yith-wcwl-add-button > a:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.product-info h1 {
    font-size: 22px;
    margin-bottom: 10px;
}

.add-to-cart button {
    width: 100%;
    padding: 12px;
    border: 1px solid #000;
    background: transparent;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   RECOMMENDED — single product page, matches nocturne collection grid
   ═══════════════════════════════════════════════════════════════════ */

.recommended {
    padding: 80px 40px 100px;
    text-align: center;
}

/* Heading — refined editorial, not big+bold */
.recommended h3 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 48px;
    color: #0a0a0a;
}

/* 3-col grid */
.recommended ul.recommended-products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 64px 32px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none;
}

/* Card */
.recommended ul.recommended-products li.product {
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
}

/* Link reset */
.recommended ul.recommended-products li.product a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ── Image container: 3∶4 portrait, identical to collection page ── */
.recommended .product-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1707 / 2560 !important;
    background: transparent !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
}

/* Both images fill the frame */
.recommended .product-image-wrap img,
.recommended .product-image-wrap img.second {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Primary image: visible, fades out on hover */
.recommended .product-image-wrap img:not(.second) {
    opacity: 1;
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover image: overlaid, invisible by default, slides in on hover */
.recommended .product-image-wrap img.second {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Hover swap trigger */
.recommended .product-image-wrap:hover img:not(.second) {
    opacity: 0 !important;
}
.recommended .product-image-wrap:hover img.second {
    opacity: 1 !important;
}

/* ── Product info ── */
.recommended .product-info {
    margin-top: 18px !important;
    text-align: center !important;
}

.recommended .title-swap {
    position: relative;
}

/* Product name */
.recommended .product-title,
.recommended ul.recommended-products li.product h2 {
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Price */
.recommended ul.recommended-products li.product .price {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    color: #4a4a4a !important;
    font-weight: 400 !important;
    margin-top: 10px !important;
    display: block !important;
}

/* Hide "Add to cart" and loop sizes in recommended */
.recommended ul.recommended-products li.product .button,
.recommended ul.recommended-products li.product .add_to_cart_button { display: none !important; }
.recommended .loop-sizes { display: none !important; }

/* ================================
   WOOCOMMERCE GRID
================================ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.woocommerce ul.products li.product {
    text-align: center;
}

/* ================================
   EDITORIAL
================================ */
.editorial img {
    width: 100%;
    object-fit: cover;
}

.editorial:nth-of-type(2) img {
    height: 85vh;
}

.editorial:nth-of-type(4) img {
    height: 90vh;
}

/* ================================
   GRID (2-col image split)
================================ */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================
   TTW PAGE — Travel the World
================================ */

/* Hero */
.ttw-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttw-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ttw-hero-bg--dark {
    background-color: #1a1a1a;
}

.ttw-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    z-index: 1;
}

.ttw-hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
}

.ttw-hero-text h1 {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: none;
    margin: 0 0 10px;
    color: #ffffff;
}

.ttw-hero-text p {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(255,255,255,0.75);
}

/* Grid */
.ttw-page {
    padding: 60px 32px 100px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ttw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
}

.ttw-item {
    display: flex;
    flex-direction: column;
}

.ttw-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ttw-item-link:hover .ttw-item-img img {
    opacity: 0.85;
    transform: scale(1.02);
}

.ttw-item-img {
    width: 100%;
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #ffffff;
}

.ttw-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

.ttw-item-placeholder {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

.ttw-item-caption {
    padding: 12px 0 0;
}

.ttw-item-title {
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.01em;
    color: #0a0a0a;
    margin: 0 0 4px;
    line-height: 1.5;
}

.ttw-item-meta {
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: #888;
    margin: 0;
}

.ttw-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 13px;
    color: #aaa;
    letter-spacing: 0.06em;
    padding: 80px 0;
}

/* ================================
   ETHOS PAGE
================================ */
.ethos-page {
    margin: 0;
    padding: 0;
}

.ethos-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ethos-hero video,
.ethos-hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ethos-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 100%;
    z-index: 1;
}

.ethos-hero-text h1 {
    font-size: 32px;
    letter-spacing: 0.32em;
    font-weight: 400;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.ethos-hero-text p {
    font-size: 11px;
    letter-spacing: 0.32em;
    margin: 0;
    text-transform: uppercase;
}

.ethos-text {
    background: #ffffff;
    padding: 120px 32px;
    text-align: center;
}

.ethos-text .container {
    max-width: 680px;
    margin: 0 auto;
}

.ethos-text h2 {
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.55;
    letter-spacing: 0.01em;
    margin: 0 auto 56px;
    color: #0a0a0a;
}

.ethos-body-content {
    margin: 0;
    padding: 0;
}

.ethos-body-content > * {
    margin-left: auto;
    margin-right: auto;
}

.ethos-text p,
.ethos-body-content p {
    font-size: 14px;
    line-height: 1.85;
    color: #2a2a2a;
    margin: 0 auto 22px;
    text-align: center;
    letter-spacing: 0.02em;
}

.ethos-full-image {
    width: 100%;
    line-height: 0;
}

.ethos-full-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ethos-full-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #000;
}

.ethos-full-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ethos-quote {
    padding: 240px 32px;
    text-align: center;
    background: #ffffff;
}

.ethos-quote h3 {
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.55;
    margin: 0;
    color: #0a0a0a;
}

/* ================================
   STORY PAGE
================================ */
.story-page {
    padding: 80px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px); /* fill viewport below header */
}

.story-content {
    max-width: 680px;
    text-align: center;
}

.story-content p {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 32px;
    color: #1a1a1a;
    letter-spacing: 0.01em;
    font-style: italic;
    text-align: center;
}

.story-intro {
    margin-bottom: 32px;
    font-size: 15px;
    color: #0a0a0a;
}

.story-intro em,
.story-intro i {
    font-style: italic;
}

.story-eyebrow {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #4a4a4a;
    margin: 0 0 28px;
    font-weight: 400;
}

.story-divider {
    display: block;
    width: 64px;
    height: 1px;
    background: rgba(10,10,10,0.18);
    border: 0;
    margin: 28px auto 32px;
}

/* ================================
   CONTACT PAGE
================================ */
.contact-page {
    padding: 120px 20px 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-intro {
    text-align: center;
    margin-bottom: 80px;
    font-size: 15px;
}

.contact-form-wrap h3 {
    margin-bottom: 40px;
    font-weight: normal;
}

.form-row {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full {
    width: 100%;
    margin-bottom: 40px;
}

.form-group label {
    font-size: 13px;
    margin-bottom: 10px;
}

.form-group input,
.form-group textarea {
    border: none;
    border-bottom: 1px solid #000;
    padding: 8px 0;
    font-size: 14px;
    background: transparent;
    outline: none;
}

.form-group textarea {
    height: 100px;
    resize: none;
}

.char-count {
    font-size: 12px;
    margin-top: 10px;
    color: #666;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: #e5e5e5;
    border: none;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
}

/* ================================
   SIDE MENU OVERLAY
================================ */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(245, 243, 240, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9999;
}

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

/* ================================
   SIDE MENU
================================ */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100%;
    background: #ffffff;
    padding: 28px 32px 36px;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.side-menu.active {
    transform: translateX(0);
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    letter-spacing: 0.18em;
    padding-bottom: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.menu-close {
    background: none;
    border: none;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 0;
    font-family: inherit;
}

.menu-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-links li {
    margin: 0;
}

.menu-links a {
    display: block;
    text-decoration: none;
    color: #0a0a0a;
    font-size: 17px;
    padding: 22px 0;
    letter-spacing: 0.04em;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-links a:hover {
    opacity: 0.45;
}

/* ================================
   MENU CURRENCY SWITCHER
================================ */
.menu-currency-switcher {
    margin-top: auto;
    padding: 24px 0 20px;
    border-top: 1px solid rgba(10, 10, 10, 0.12);
    text-align: center;
}

.menu-currency-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #0a0a0a;
    opacity: 0.45;
    margin-bottom: 10px;
    font-family: inherit;
}

.menu-currency-widget {
    display: flex;
    justify-content: center;
}

/* Override plugin widget styles to match our aesthetic */
.menu-currency-widget .woo-multi-currency-switcher,
.menu-currency-widget .wmc-currency-switcher,
.menu-currency-widget select,
.menu-currency-widget .wmc-switcher {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.25) !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-family: inherit !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 6px 20px 6px 4px !important;
    cursor: pointer !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    transition: opacity 0.35s ease !important;
    min-width: 80px;
}

.menu-currency-widget .woo-multi-currency-switcher:hover,
.menu-currency-widget select:hover {
    opacity: 0.55 !important;
}

/* Plain horizontal layout — style the currency items as spaced text */
.menu-currency-widget .wmc-currency-item,
.menu-currency-widget a,
.menu-currency-widget span {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
    font-family: inherit !important;
    opacity: 0.75;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-currency-widget .wmc-currency-item:hover,
.menu-currency-widget a:hover {
    opacity: 0.35 !important;
}

.menu-currency-widget .wmc-currency-item.active,
.menu-currency-widget .current {
    opacity: 1 !important;
    border-bottom: 1px solid currentColor !important;
    padding-bottom: 1px !important;
}

/* Separator between currencies in horizontal layout */
.menu-currency-widget .wmc-currency-separator {
    opacity: 0.25 !important;
    margin: 0 6px !important;
}

/* ── Mobile: match white menu background — no colour inversion needed ── */
@media (max-width: 768px) {

    .menu-currency-switcher {
        border-top-color: rgba(10, 10, 10, 0.12);
    }

}

.menu-footer {
    text-align: center;
    padding-top: 20px;
    margin-top: 0;
}

.menu-footer img {
    width: 44px;
    height: auto;
    display: inline-block;
}

/* Admin bar offset */
.admin-bar .side-menu {
    top: 32px;
    height: calc(100% - 32px);
}

/* ================================
   FOOTER
================================ */

/* Mobile newsletter drawer: hidden on desktop */
.footer-nl-drawer {
    display: none;
}

.site-footer {
    margin-top: 0;
    padding: 64px 40px 0;
    background: #ffffff;
    border-top: 1px solid rgba(10,10,10,0.06);
}

.site-footer {
    font-size: 14px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
    gap: 56px;
    padding-bottom: 0;
    align-items: start;
}

.footer-inner div {
    flex: 1;
}

.footer-inner h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #0a0a0a;
    margin: 0 0 22px;
}

.footer-inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-inner ul li {
    margin-bottom: 12px;
}

.footer-inner ul li a {
    text-decoration: none;
    color: #0a0a0a;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-inner ul li a:hover {
    opacity: 0.55;
}

.footer-bottom {
    border-top: 1px solid rgba(10,10,10,0.06);
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom span {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4a4a4a;
}

.footer-bottom img {
    width: 36px;
    height: auto;
    display: block;
}

.menu-footer img {
    width: 36px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* COLLECTION PAGE */
.collection-page {
    padding: 0;
}

.collection-intro {
    text-align: center;
    margin-top: 60px;
    margin-bottom: -20px;
}

.collection-intro .sanskrit {
    font-size: 22px;
    margin-bottom: 10px;
}

.collection-intro p {
    font-size: 15px;
    color: #555;
}

/* PRODUCT ROW */
.product-row {
    margin: 80px 0;
}

/* EDITORIAL */
.editorial img {
    width: 100%;
    display: block;
}

/* SPLIT GRID */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
}

.split-grid img {
    width: 100%;
    display: block;
}

/* ================================
   PRODUCT DRAWER (CANVA STYLE)
================================ */

.drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 590px;
    height: 100%;
    background: #ffffff;
    z-index: 2000; /* above menu */
    transition: right 0.45s ease;
    overflow-y: auto;
}

.drawer.active {
    right: 0;
}

.drawer-inner {
    padding: 52px 60px;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

#drawer-title {
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 1500;
}

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

/* trigger links */
.product-links {
    margin-top: 20px;
}

.drawer-trigger {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    letter-spacing: 1px;
}

/* Drawer section headings — quiet, tracked-out small caps (The Row) */
.drawer-section-heading {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 32px 0 18px;
}

.drawer-section-heading:first-child {
    margin-top: 0;
}

/* Drawer section body text */
.drawer-section-body {
    font-size: 14px;
    line-height: 1.75;
    color: #2a2a2a;
    letter-spacing: 0.02em;
}

.drawer-section-body p {
    margin: 0 0 12px;
}
.drawer-section-body p:last-child {
    margin-bottom: 0;
}

.drawer-section-body strong,
.drawer-section-body b {
    font-weight: 600;
    color: #0a0a0a;
}

/* Lists parsed out of inline ACF text */
.drawer-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    counter-reset: drawer-counter;
}
.drawer-list li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #2a2a2a;
    border-bottom: 1px solid rgba(10,10,10,0.05);
}
.drawer-list li:last-child {
    border-bottom: none;
}
/* Numbered list — small tracked-out numbers */
ol.drawer-list {
    counter-reset: drawer-counter;
}
ol.drawer-list li::before {
    counter-increment: drawer-counter;
    content: counter(drawer-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 7px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #9a9a9a;
}
/* Bulleted list — slim em-dash mark */
ul.drawer-list li::before {
    content: "—";
    position: absolute;
    left: 4px;
    top: 6px;
    color: #9a9a9a;
    font-size: 14px;
}

/* Empty state */
.drawer-empty {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.05em;
    margin-top: 20px;
}

/* =========================
   SIZE GUIDE (inside drawer)
   Toteme-style: hover column → border, click → lock & reveal measurements
========================= */

.sg-section {
    margin-top: 28px;
}
.sg-section:first-child {
    margin-top: 0;
}

.sg-section-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    margin: 0 0 16px;
}

/* Fit notes */
.sg-fit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sg-fit-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #2a2a2a;
    margin-bottom: 6px;
}
.sg-fit-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #2a2a2a;
}
.sg-fit-body {
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #2a2a2a;
}

/* ── SIZE CONVERSION TABLE ── */
.sg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
}

.sg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* ── DEFAULT: every cell — light grey border on all 4 sides, light grey text ── */
.sg-table th,
.sg-table td {
    padding: 14px 8px;
    text-align: center;
    background: transparent;
    border: 1px solid #d8d8d8;
    color: #bbb;
    font-weight: 400;
    transition: color 0.2s ease, box-shadow 0.15s ease;
}

/* Row label (EU, UK ...) — same light grey, left-aligned, small caps */
.sg-row-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    padding-left: 4px;
    width: 48px;
}

/* INT header label */
.sg-col-int {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    padding-left: 4px;
}

/* Size column headers (XS, S, M ...) */
.sg-col-header {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

/* Clickable data cells */
.sg-cell {
    cursor: pointer;
    user-select: none;
}

/* ══════════════════════════════════════════════
   HIGHLIGHTED STATE — black border + black text
   box-shadow inset overrides the visual border
   without breaking border-collapse geometry
   ══════════════════════════════════════════════ */
.sg-col-header.is-hover,
.sg-col-header.is-selected,
.sg-cell.is-hover,
.sg-cell.is-selected,
.sg-table tr.is-row-hover .sg-cell,
.sg-table tr.is-row-hover .sg-row-label,
.sg-table tr.is-row-selected .sg-cell,
.sg-table tr.is-row-selected .sg-row-label {
    color: #0a0a0a;
    box-shadow: inset 0 0 0 1px #0a0a0a;
    position: relative;
    z-index: 1;
}

/* Selected column — slightly bolder text */
.sg-cell.is-selected,
.sg-col-header.is-selected {
    font-weight: 600;
}

/* Intersection of selected row + selected column — boldest */
.sg-table tr.is-row-selected .sg-cell.is-selected {
    font-weight: 700;
}

/* Garment measurements */
.sg-measurements {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sg-measurements-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.sg-measurements-head .sg-section-heading {
    margin: 0;
}

.sg-unit-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.sg-unit-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #9a9a9a;
    transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sg-unit-btn:hover { color: #0a0a0a; }
.sg-unit-toggle[data-unit="in"] .sg-unit-btn[data-unit="in"],
.sg-unit-toggle[data-unit="cm"] .sg-unit-btn[data-unit="cm"] {
    color: #0a0a0a;
    font-weight: 700;
}
.sg-unit-sep {
    color: #cfcfcf;
}

.sg-measurements-empty {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #9a9a9a;
    margin: 0;
    padding: 12px 0;
}

.sg-measurements-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #0a0a0a;
}
.sg-measurements-table th,
.sg-measurements-table td {
    padding: 14px 12px;
    border: 1px solid rgba(10,10,10,0.08);
}
.sg-measurements-table th {
    text-align: left;
    font-weight: 400;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: #2a2a2a;
}
.sg-measurements-table td {
    text-align: right;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.product-description {
    margin-top: 30px;
    font-size: 13px;
    line-height: 1.7;
    color: #222;
}

.product-description h4 {
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* SIZE & FIT IMAGE CONTROL */
#drawer-content img {
    max-width: 100%;
    height: auto;
    display: block;

    /* control size */
    width: 280px;        /* adjust as needed */
    margin: 20px auto;   /* center it */
}

.product-page {
    margin-top: 0;
    padding-top: 20px;
    font-size: 12px; /* baseline — nothing on this page goes below 12px */
}

.product-container {
    margin-top: 0;
}

main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.variations select {
    display: none;
}
.size-options {
    display: flex;
    gap: 16px;
    margin: 12px 0 20px;
}

/* SIZE GRID — REDESIGNED: minimal text labels, no box borders */
.size-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 12px 0 24px;
    border: none;          /* remove the old left+top borders */
    border-left: none;
    border-top: none;
}

.size-btn {
    position: relative;
    font-size: 12px;
    font-family: inherit;
    letter-spacing: 0.12em;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 1.5px solid transparent;
    padding: 10px 22px;
    color: #000;
    transition: border-bottom-color 0.2s ease;
    overflow: visible;
}

/* First button — flush left, no left padding */
.size-btn:first-child { padding-left: 0; }

/* Thin vertical divider between adjacent buttons */
.size-btn + .size-btn { border-left: 1px solid #d0d0d0; }

/* Hover (in-stock, unselected) */
.size-btn:hover:not(.oos):not(.selected) {
    border-bottom-color: #aaa;
}

/* SELECTED — underline only, no fill */
.size-btn.selected {
    border-bottom: 1.5px solid #000;
    font-weight: 600;
    background: none;
    color: #000;
}

/* OUT OF STOCK — muted + strikethrough, no diagonal box */
.size-btn.oos {
    color: #bbb;
    cursor: not-allowed;
    background: none;
    text-decoration: line-through;
    text-decoration-color: #bbb;
}

/* Clear old diagonal-line pseudo-elements */
.size-btn::before,
.size-btn::after { content: none !important; display: none !important; }

/* Restore the divider ::before that we now do via border-left above */
.single_add_to_cart_button {
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 1px solid #000;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
}

.single_add_to_cart_button:hover {
    background: #000;
    color: #fff;
}

.woocommerce-variation-add-to-cart .variations {
    display: none;
}

.reset_variations {
    display: none !important;
}

.product-info .price {
    font-size: 16px;
    margin: 8px 0 10px;
    letter-spacing: 0.5px;
}

.product-info {
    max-width: 380px;
    position: relative;
}

.product-info h1 {
    margin-bottom: 8px;
}

.product-description {
    margin-top: 20px;
    line-height: 1.6;
    font-size: 14px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.accordion-content {
    display: none;
    padding: 10px 0 20px;
    font-size: 14px;
    line-height: 1.6;
}

.variations select,
.reset_variations,
.woocommerce-variation-add-to-cart .variations {
    display: none !important;
}

.single_add_to_cart_button {
    width: 100%;
    padding: 18px;
    border: 1px solid #000;
    background: transparent;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    transition: all 0.25s ease;
}

.single_add_to_cart_button:hover {
    background: #000;
    color: #fff;
}

/* SIZE LABEL — bold */
.size-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}


.quantity {
    display: none !important;
}

.qty-dropdown {
    position: relative;
    margin-bottom: 15px;
}

.qty-toggle {
    border: 1px solid #ccc;
    padding: 10px;
    width: 60px;
    background: transparent;
    cursor: pointer;
}

.qty-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    width: 60px;
    z-index: 10;
}

.qty-menu span {
    display: block;
    padding: 10px;
    cursor: pointer;
}

.qty-menu span:hover {
    background: #f5f5f5;
}

/* Hide default WooCommerce variation dropdown + label */
.variations {
    display: none !important;
}

.logo img {
    height: 48px;   /* increase from 22px */
    width: auto;
    display: inline-block;
}



.header-right a {
    margin-left: 18px;
}

.header-right img {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.header-right img {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

.header-right a:hover img {
    opacity: 1;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}



.header-right a {
    transition: transform 0.2s ease;
}

.header-right a:hover {
    transform: translateY(-1px);
}

.hero {
    width: 100%;
    height: 100vh; /* full screen */
    overflow: hidden;
    position: relative;
}

.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* KEY LINE */
}

.homepage main,
.ethos-page main,
main.homepage,
main.ethos-page {
    padding: 0 !important;
}

/* REMOVE GLOBAL PADDING FOR VIDEO PAGES */
.homepage main,
.ethos-page main {
    padding: 0 !important;
}


.hero,
.ethos-hero {
    height: 100vh !important;
}

/* Video fills 100% of the hero box */
.hero video,
.ethos-hero video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ================================
   CLEAN HERO SYSTEM (FINAL)
================================ */

/* HERO BASE */
.hero,
.ethos-hero {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Ethos hero — same as homepage: 100vh, transparent header floats over it */
.ethos-hero {
    height: 100vh;
    margin-top: 0;
    padding-top: 0;
}

/* VIDEO FIT */
.hero video,
.ethos-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 16:9 hero videos: show the complete 1920x1080 frame on desktop and mobile. */
.hero,
.ethos-hero {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0 !important;
    background: #000;
}

.hero video,
.ethos-hero video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* REMOVE ANY GLOBAL PADDING INTERFERENCE */
.homepage,
.ethos-page {
    padding: 0 !important;
}

main.homepage,
main.ethos-page {
    padding: 0 !important;
    margin: 0 !important;
}

/* REMOVE DEFAULT WOOCOMMERCE LINK STYLE */
.woocommerce ul.products li.product a {
    text-decoration: none !important;
    color: inherit !important;
}

.woocommerce ul.products li.product .button {
    display: none !important; /* removes "Read more" */
}

/* IMAGE WRAP */
.product-image-wrap {
    position: relative;
    overflow: hidden;
}

/* SECOND IMAGE */
.product-image-wrap img.second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* HOVER SWITCH */
.product-image-wrap:hover img.second {
    opacity: 1;
}




ul.products {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.products li {
    list-style: none;
}

/* ========================================
   PRODUCT CARD — FINAL LUXURY VERSION
======================================== */

/* Ensure card is positioning context */
.woocommerce ul.products li.product {
    position: relative;
    text-align: center;
}

/* IMAGE WRAP */
.product-image-wrap {
    position: relative;
    overflow: hidden;
}

/* IMAGE HOVER */
.product-image-wrap img {
    width: 100%;
    display: block;
    transition: opacity 0.4s ease;
}

.product-image-wrap img.second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.product-image-wrap:hover img:first-child {
    opacity: 0;
}

.product-image-wrap:hover img.second {
    opacity: 1;
}

/* TITLE */
.product-title {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #111;
    margin-top: 12px;
    transition: opacity 0.3s ease;
}

/* PRICE */
.price {
    display: block;
    font-size: 13px;
    color: #111;
    margin-top: 4px;
}


/* FORCE LUXURY PRODUCT HOVER (OVERRIDE EVERYTHING) */

.woocommerce ul.products li.product {
    position: relative !important;
}


/* CRITICAL: MAKE CARD A POSITION CONTEXT */
.woocommerce ul.products li.product a {
    position: relative;
    display: block;
}




/* ===== FIXED PRODUCT CARD ALIGNMENT ===== */

li.product {
    text-align: center;
}

/* IMAGE WRAP */
.product-image-wrap {
    position: relative;
}

.product-image-wrap img {
    width: 100%;
    display: block;
}

.product-image-wrap img.second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

li.product:hover .product-image-wrap img.second {
    opacity: 1;
}

/* INFO WRAPPER */
.product-info {
    margin-top: 12px;
    width: 100%;
}


/* PRICE */
.price {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #000;
}


.cart-link {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 12px;
}

.nsl-container {
    margin-bottom: 30px;
}

.nsl-button {
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    font-size: 12px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px !important;
}

.nsl-button:hover {
    background: #000 !important;
    color: #fff !important;
}

/* WRAPPER */
.account-wrapper {
    max-width: 1100px;
    margin: 120px auto;
    padding: 0 40px;
}

/* SOCIAL */
.account-social {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.social-btn {
    flex: 1;
    border: 1px solid #000;
    background: transparent;
    padding: 12px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

/* DIVIDER */
.account-divider {
    text-align: center;
    margin: 20px 0 40px;
    font-size: 12px;
    letter-spacing: 2px;
    color: #999;
}

/* GRID */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

/* HEADINGS */
.account-login h2,
.account-register h2 {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

/* INPUTS */
.form-row input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 25px;
    background: transparent;
    font-size: 13px;
}

.form-row input:focus {
    outline: none;
    border-color: #000;
}

/* BUTTONS */
.btn-primary,
.btn-secondary {
    width: 100%;
    padding: 12px;
    border: none;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
}

.btn-primary {
    background: #e5e5e5;
    color: #000;
}

.btn-secondary {
    background: #eee;
    color: #000;
}

/* HOVER */
.btn-primary:hover,
.btn-secondary:hover {
    background: #000;
    color: #fff;
}

/* TEXT */
.account-subtext {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}

.lost-password {
    margin-top: 10px;
    font-size: 12px;
}

/* HERO */
.account-hero {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 120px 20px;
}

.account-welcome {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.account-name {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 2px;
}

/* GRID */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 80px;
    padding: 80px 10%;
}

/* LEFT NAV */
.account-left h3,
.account-middle h3,
.account-right h3 {
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.account-left ul {
    list-style: none;
    padding: 0;
}

.account-left li {
    margin-bottom: 12px;
}

.account-left a {
    text-decoration: none;
    color: #000;
    font-size: 13px;
}

/* MIDDLE */
.account-middle p {
    font-size: 13px;
    margin-bottom: 10px;
}

.btn-discover {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #eee;
    text-decoration: none;
    font-size: 12px;
}

/* RIGHT */
.account-right p {
    font-size: 13px;
    margin-bottom: 10px;
}

/* =========================
   ACCOUNT HERO (BLACK)
========================= */
.account-hero {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 120px 20px 100px;
}

.account-welcome,
.account-hero h4 {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.account-name,
.account-hero h1 {
    font-size: 42px;
    letter-spacing: 2px;
    font-weight: 500;
}

/* =========================
   GRID LAYOUT
========================= */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 80px;
    padding: 80px 120px;
}

/* =========================
   LEFT MENU
========================= */
.account-left h3,
.account-middle h3,
.account-right h3 {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.account-left ul {
    list-style: none;
    padding: 0;
}

.account-left li {
    margin-bottom: 20px;
}

.account-left a {
    text-decoration: none;
    color: #000;
    font-size: 13px;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

.account-left a:hover {
    opacity: 0.6;
}

/* =========================
   CENTER CONTENT
========================= */
.account-middle {
    text-align: center;
}

.no-orders {
    font-size: 14px;
    margin-bottom: 25px;
    color: #444;
}

.discover-btn {
    display: inline-block;
    padding: 14px 40px;
    background: #e5e5e5;
    color: #888;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s;
}

.discover-btn:hover {
    background: #000;
    color: #fff;
}

/* =========================
   ORDER CARD (if exists)
========================= */
.order-card p {
    margin-bottom: 10px;
    font-size: 13px;
}

/* =========================
   RIGHT SIDE
========================= */
.account-right p {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}

/* ACTIVE MENU */
.account-left a {
    opacity: 0.5;
    transition: all 0.3s ease;
}

.account-left li.active a {
    opacity: 1;
    font-weight: 500;
}

.account-left a:hover {
    opacity: 1;
}

/* FADE TRANSITION */
.account-content {
    animation: fadeIn 0.4s ease;
}

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

/* ORDER CARD */
.order-card {
    border: 1px solid #eee;
    padding: 30px;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
}

.order-card p {
    margin-bottom: 10px;
    font-size: 13px;
}

.order-status {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #777;
}

/* BUTTONS */
.discover-btn,
.view-order-btn {
    display: inline-block;
    padding: 14px 40px;
    background: #e5e5e5;
    color: #888;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.discover-btn:hover,
.view-order-btn:hover {
    background: #000;
    color: #fff;
}

/* HERO ANIMATION */
.account-hero-inner {
    animation: fadeHero 0.6s ease;
}

@keyframes fadeHero {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* LOGIN INPUTS */
.account-login input,
.account-register input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-size: 13px;
    outline: none;
}

.account-login input:focus,
.account-register input:focus {
    border-color: #000;
}

/* ORDERS PAGE — legacy (replaced by .md-orders-wrap table; kept for fallback) */
.account-orders {
    max-width: 900px;
    margin: 0 auto;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ORDER CARD */
.order-item {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 36px 0;
    align-items: flex-start;
}

/* IMAGE — portrait ratio, consistent with product cards */
.order-image {
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #f0f0ee;
}

.order-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* INFO */
.order-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.order-id {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.order-date {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.06em;
}

.order-total {
    font-size: 12px;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* BUTTON */
.view-order-btn {
    margin-top: 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #000;
    width: fit-content;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.view-order-btn:hover {
    opacity: 0.5;
}

/* WRAPPER */
.order-detail {
    max-width: 800px;
    margin: 0 auto;
}

/* HEADER */
.order-header {
    margin-bottom: 40px;
}

.order-header h2 {
    font-size: 18px;
    letter-spacing: 2px;
}

.order-meta {
    font-size: 12px;
    color: #777;
}

/* PRODUCTS */
.order-products {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.order-product {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.product-image img {
    width: 100px;
}

.product-name {
    font-size: 14px;
}

.product-meta {
    font-size: 12px;
    color: #777;
}

.product-price {
    font-size: 13px;
}

/* SUMMARY */
.order-summary {
    margin-top: 40px;
    border-top: 1px solid #000;
    padding-top: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 10px;
}

.summary-row.total {
    font-weight: 600;
}

/* ADDRESS */
.order-address {
    display: flex;
    gap: 40px;
    margin-top: 50px;
}

.address-block h4 {
    font-size: 13px;
    margin-bottom: 10px;
}

.address-block p {
    font-size: 12px;
    line-height: 1.6;
}

.status-badge {
    font-size: 12px;
    border: 1px solid #000;
    padding: 3px 8px;
}

.account-right a {
    color: #000;
    text-decoration: none;
}

.account-right a:hover {
    text-decoration: underline;
}

/* ACTION BUTTONS */
.order-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* VIEW ORDER */
.view-order-btn {
    font-size: 12px;
    text-decoration: underline;
    color: #000;
}

/* REORDER */
.reorder-btn {
    font-size: 12px;
    border: 1px solid #000;
    padding: 6px 14px;
    text-decoration: none;
    color: #000;
    transition: all 0.3s ease;
}

.reorder-btn:hover {
    background: #000;
    color: #fff;
}

.order-actions {
    justify-content: space-between;
}

.ajax-reorder {
    cursor: pointer;
}

/* =========================
   SEARCH — LEFT DRAWER + TRANSLUCENT RESULTS PANEL
========================= */

/*
   STRUCTURE:
   .search-overlay  → full-screen container (invisible bg, handles dimming)
   .search-drawer   → white left panel (~380px)
   .search-results-panel → translucent right area, shows results
*/

/* Full-screen wrapper — hidden by default */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── LEFT WHITE DRAWER ── */
.search-drawer {
    position: relative;
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 28px 32px 36px;
    box-sizing: border-box;
    z-index: 2;
    overflow-y: auto;
}

/* Close button — top left, matching screenshot */
.search-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    color: #000;
    padding: 0;
    margin-bottom: 24px;
}

.search-close:hover {
    opacity: 0.5;
}

/* Divider line under close button */
.search-drawer-divider {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin-bottom: 32px;
}

/* Search input area */
.search-input-wrap {
    margin-bottom: 32px;
}

.search-input-wrap input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: #000;
    font-family: inherit;
    caret-color: #000;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.search-input-wrap input::placeholder {
    color: #aaa;
    letter-spacing: 0.12em;
}

/* Section labels inside drawer */
.search-section-label {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 14px;
    display: block;
}

/* Suggestion links */
.search-suggestions {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}

.search-suggestions li {
    margin-bottom: 11px;
}

.search-suggestions a {
    font-size: 12px;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: opacity 0.2s;
}

.search-suggestions a:hover {
    opacity: 0.45;
}

.search-recent {
    margin: -6px 0 30px;
}

.search-recent[hidden] {
    display: none;
}

.search-recent-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2px;
}

.search-recent-list li {
    margin-bottom: 10px;
}

.search-recent-list a {
    font-size: 12px;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: opacity 0.2s;
}

.search-recent-list a:hover {
    opacity: 0.45;
}

/* Spacer pushes logo to bottom */
.search-drawer-spacer {
    flex: 1;
}

/* Logo at bottom center of drawer */
.search-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.search-footer img {
    width: 32px;
    height: auto;
    opacity: 0.7;
}

/* ── RIGHT TRANSLUCENT RESULTS PANEL ── */
.search-results-panel {
    flex: 1;
    height: 100%;
    background: rgba(245, 243, 240, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    padding: 52px 52px 60px;
    box-sizing: border-box;
    overflow-y: auto;
    cursor: default;
}

/* Results label */
#searchResultsLabel {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #555;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Results scroll container */
.search-results-scroll {
    display: block;
}

/* RESULTS LIST */
.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px;
}

.search-result-item {
    margin: 0;
}

.search-result-link {
    display: block;
    text-decoration: none;
    color: #0a0a0a;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.search-result-image-wrap {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1707 / 2560;
    background: #f5f5f5;
    overflow: hidden;
    margin-bottom: 14px;
}

.search-result-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-result-image.second {
    opacity: 0;
}

.search-result-image-wrap.has-hover-image:hover .search-result-image:first-child {
    opacity: 0;
}

.search-result-image-wrap.has-hover-image:hover .search-result-image.second {
    opacity: 1;
}

.search-result-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
}

.search-result-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.search-result-name {
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.search-result-link:hover .search-result-name {
    color: #777;
}

.search-result-category {
    display: block;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
}

.search-result-price {
    display: block;
    font-size: 12px;
    color: #000;
    letter-spacing: 0.02em;
}

.no-results {
    font-size: 13px;
    color: #888;
    letter-spacing: 0.06em;
    padding-top: 8px;
}

/* PREVENT BODY SCROLL WHEN OPEN */
body.search-open {
    overflow: hidden;
}

/* consolidated above */

/* MENU CLOSE BUTTON — same style as search close */
.menu-header {
    height: auto;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.menu-header button {
    position: static;
    transform: none;
    background: none;
    border: none;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    color: #000;
}

.menu-header button:hover {
    opacity: 0.5;
}

/* NO RESULTS */
.no-results {
    margin-top: 20px;
    font-size: 12px;
    color: #888;
}

.policy-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 5% 120px;
}

/* SIDEBAR heading */
.policy-sidebar-heading {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #bbb;
    font-weight: 400;
    margin: 0 0 28px;
}

/* LEFT NAV */
.policy-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.policy-sidebar li {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.policy-sidebar li:first-child {
    border-top: 1px solid rgba(0,0,0,0.05);
}

.policy-sidebar a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    opacity: 0.35;
    transition: opacity 0.25s ease, padding-left 0.25s ease;
    position: relative;
}

.policy-sidebar a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transform: translateY(-50%);
    transition: width 0.25s ease;
}

.policy-sidebar a:hover,
.policy-sidebar li.active a {
    opacity: 1;
    padding-left: 14px;
}

.policy-sidebar a:hover::before,
.policy-sidebar li.active a::before {
    width: 8px;
}

.policy-sidebar li.active a {
    font-weight: 500;
}

/* RIGHT CONTENT */
.policy-content {
    max-width: 680px;
}

.policy-content h1,
.policy-content h2 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 32px;
}

.policy-content h2 {
    margin-top: 48px;
    margin-bottom: 20px;
}

.policy-content h3 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #555;
    margin: 36px 0 16px;
}

.policy-content p,
.policy-content li {
    font-size: 12.5px;
    line-height: 1.8;
    color: #444;
    letter-spacing: 0.03em;
}

.policy-content ul,
.policy-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.policy-content a {
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    transition: border-color 0.2s;
}

.policy-content a:hover {
    border-color: #0a0a0a;
}

.menu-overlay {
    pointer-events: none;
}

.menu-overlay.active {
    pointer-events: auto;
}
/* search-overlay pointer-events handled in its own block above */

/* ========================================
   PRODUCT CARD — CLEAN FINAL (NO HOVER SIZES)
======================================== */

/* TITLE */
.product-title {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;

    font-size: 15px;        /* as you requested */
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 12px;
}

/* PRICE */
.price {
    font-size: 15px;        /* as you requested */
    margin-top: 6px;
    color: #111;
}

/* REMOVE SIZES COMPLETELY */
.loop-sizes {
    display: none !important;
}

/* ========================================
   SHOP ARCHIVE — MAISON LUXURY
======================================== */

.shop-archive {
    background: #fff;
    padding: 92px 0 120px;
    min-height: 100vh;
}

.shop-hero {
    text-align: center;
    padding: 64px 40px 46px;
    border-bottom: 1px solid rgba(10,10,10,0.07);
}

.shop-eyebrow {
    margin: 0 0 16px;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #aaa;
}

.shop-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4.8vw, 68px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.shop-description {
    max-width: 520px;
    margin: 18px auto 0;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: #777;
}

.shop-description p {
    margin: 0;
}

.shop-toolbar {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 48px;
    border-bottom: 1px solid rgba(10,10,10,0.07);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shop-cats {
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.shop-cats::-webkit-scrollbar {
    display: none;
}

.shop-cats a {
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aaa;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.shop-cats a.active,
.shop-cats a:hover {
    color: #0a0a0a;
    border-bottom-color: #0a0a0a;
}

.shop-sort {
    flex: 0 0 auto;
    position: relative;
}

.shop-sort-panel {
    right: 0;
}

/* Product card grid — handled by .collection-page .product-row rules below.
   Both the shop archive and Nocturne share that same DOM structure now. */

/* Nocturne collection product rows — also used by the shop archive. */
.collection-page .product-row ul.products {
    list-style: none;
    margin: 0;
    padding: 48px 48px 0;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 64px 32px;
    max-width: none;
}

/* Nocturne dual-layout toggle — desktop shows original 3×3, mobile shows 2+2+2+3 */
.nocturne-desktop-layout { display: block; }
.nocturne-mobile-layout  { display: none;  }

.collection-page .product-row ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    list-style: none;
    text-align: center;
}

.collection-page .product-row ul.products li.product a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.collection-page .product-row .product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1707 / 2560;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Both images fill the box — cover so the model fills the frame edge-to-edge */
.collection-page .product-row .product-image-wrap img,
.collection-page .product-row .product-image-wrap img.second {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom; /* anchor to bottom so shoes are never cut off */
    transform: none !important;
}

/* Primary image: visible by default, fades on hover */
.collection-page .product-row .product-image-wrap img:not(.second) {
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Hover image: absolutely overlaid, hidden by default, fills frame with no gaps */
.collection-page .product-row .product-image-wrap img.second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    object-fit: cover;
    object-position: center bottom; /* anchor to bottom so shoes are never cut off */
}

/* Hover swap */
.collection-page .product-row .product-image-wrap:hover img:not(.second) {
    opacity: 0;
}

.collection-page .product-row .product-image-wrap:hover img.second {
    opacity: 1;
}

.collection-page .product-row .product-info {
    margin-top: 18px;
}

.collection-page .product-row .product-title {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    line-height: 1.4;
    margin: 0 !important;
}

.collection-page .product-row .price {
    display: block;
    margin-top: 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
}

.shop-pagination {
    display: flex;
    justify-content: center;
    margin-top: 72px;
}

.shop-pagination .woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: 8px;
}

.shop-pagination .woocommerce-pagination ul li {
    border: none;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid transparent;
    color: #0a0a0a;
    text-decoration: none;
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.shop-pagination .page-numbers.current,
.shop-pagination .page-numbers:hover {
    border-color: #0a0a0a;
    background: transparent;
}

.shop-empty {
    text-align: center;
    padding: 120px 20px;
}

.shop-empty p {
    margin: 0 0 28px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.shop-empty a {
    color: #0a0a0a;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 3px;
}

/* =========================
   SPLIT EDITORIAL
========================= */

.split-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.split-editorial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-left,
.split-right {
    position: relative;
}

/* Make the <a> wrapper fill its panel exactly like a div would */
a.split-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.overlay-text {
    position: absolute;
    color: #fff;
}

/* NOCTURNE — bottom-left of the left image */
.overlay-text--left {
    bottom: 40px;
    left: 40px;
}

/* DISCOVER > — bottom-right of the left image */
.overlay-text--left-cta {
    bottom: 40px;
    right: 40px;
}

/* =========================
   TYPOGRAPHY - EDITORIAL
========================= */

/* NOCTURNE label */
.overlay-text .title {
    font-family: var(--font-main);
    font-size: clamp(30px, 3.2vw, 52px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
}

/* LIVING ARCHIVE — centred, slightly larger since it has a full-width canvas */
.center-text {
    font-family: var(--font-main);
    font-size: clamp(28px, 3.8vw, 60px);
    font-weight: 300;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

/* DISCOVER CTA */
.overlay-text .cta {
    font-family: var(--font-main);
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 400;
    letter-spacing: 0.24em;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #fff;
}

/* Optional: subtle luxury hover */
.overlay-text .cta:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
/* =========================
   FULL IMAGE SECTION
========================= */

.full-editorial {
    position: relative;
    margin-bottom: 0;
}

.full-editorial img {
    width: 100%;
    display: block;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    white-space: nowrap;
}

/* =========================
   NOCTURNE PAGE TOP SPACING FIX
========================= */

.collection-page {
    padding-top: 60px;
}

/* Optional: tighter control just for intro */
.collection-intro {
    margin-top: 60px;
}

/* =========================
   EDITORIAL — CONTROLLED WIDTH
========================= */

.editorial-contained {
    padding: 0;
}

.editorial-container {
    max-width: 1600px;   /* wider than product grid */
    margin: 0 auto;
    padding: 0 40px;     /* side breathing space */
}

.editorial-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Nocturne desktop editorial — exactly as original style.css */
.nocturne-desktop-layout .editorial-contained {
    padding: 60px 0;
    margin: 80px 0 !important;
}

.nocturne-desktop-layout .editorial-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

.nocturne-desktop-layout .editorial-container img {
    width: 100%;
    height: auto;
    display: block;
}

footer input,
footer button {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
/* =========================
   WOOCOMMERCE NATIVE VARIATION TABLE — HIDE, KEEP FUNCTIONAL
   (Our custom size buttons drive the hidden select via JS)
========================= */
.wc-variation-wrapper .variations,
.wc-variation-wrapper .reset_variations {
    display: none !important;
}

/* WC injects a single_variation div for price/stock updates — keep hidden unless needed */
.wc-variation-wrapper .single_variation {
    display: none;
}

/* Hide "X in stock" / availability message — client doesn't want this shown */
.woocommerce-variation-availability,
.stock,
p.stock {
    display: none !important;
}

/* Add to cart button inside WC wrapper — pull it out visually */
.wc-variation-wrapper .woocommerce-variation-add-to-cart {
    display: block;
}

/* =========================
   SIZE SELECTOR SHAKE
   Paste this at the very bottom of style.css
   This is the ONLY CSS addition needed — everything else already exists.
========================= */
@keyframes md-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}

/* ============================================================
   ADDITIONS — paste at the very bottom of style.css
   ============================================================ */


/* ─────────────────────────────────────────
   1. RECOMMENDED SECTION
   (full styles live earlier in the file — see "RECOMMENDED — single product page")
   ───────────────────────────────────────── */

/* Legacy stubs — kept to silence any plugin output, but hidden */
.recommended-grid { display: none; }
.recommended-item { display: none; }


/* ─────────────────────────────────────────
   2. WHITE BACKGROUND — global fixes
   ───────────────────────────────────────── */

.site-footer {
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
}

.search-image {
    background: #ffffff;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #ffffff;
}


/* ─────────────────────────────────────────
   3b. MOBILE & TABLET (≤ 768px)
   ───────────────────────────────────────── */

/* ── Desktop-only elements hidden on mobile ── */
.header-search-desktop,
.header-wishlist-desktop {
    display: flex;
}

/* ── Mobile search button (left side) — hidden on desktop ── */
.header-search-mobile {
    display: none;
}

/* ── Menu wishlist + contact — only visible inside side menu on mobile ── */
.menu-wishlist-mobile,
.menu-contact-mobile {
    display: none;
}

.menu-wishlist-mobile {
    border-top: 1px solid #2a2a2a;
    margin-top: 20px;
    padding-top: 20px;
}

/* ── My Account — hide from desktop side menu only ── */
@media (min-width: 769px) {
    .side-menu .menu-links li:has(> a[href*="my-account"]) {
        display: none;
    }
}

@media (min-width: 769px) {
    body.page-template-page-nocturne .collection-intro {
        margin-top: 80px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   WISHLIST PAGE — YITH WCWL default table + custom grid
   Images shown as a proper portrait "passport-size" frame (1707:2560 — 2:3 ratio)
   on both desktop and mobile.
══════════════════════════════════════════════════════════════════ */

/* ── Custom grid template (wishlist.php override) ── */
.wishlist-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 40px;
}

.wishlist-item {
    position: relative;
    opacity: 0;
    animation: wlFadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wlFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Portrait image frame — 1707:2560 (2:3) ratio, object-fit so image never distorts */
.wishlist-item-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #f5f5f5;
}

.wishlist-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity 0.4s ease;
}

.wishlist-item-img-wrap:hover img { opacity: 0.85; }

.wishlist-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wishlist-item:hover .wishlist-remove-btn { opacity: 1; }

.wishlist-item-info {
    padding: 20px 0 0;
}

.wishlist-item-name {
    display: block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    margin-bottom: 6px;
}

.wishlist-item-price {
    font-size: 12px;
    color: #555;
    margin-bottom: 14px;
}

.wishlist-atc-btn {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: inherit;
}

.wishlist-cta-row {
    margin-top: 60px;
    text-align: center;
}

/* ── YITH default table: fix image cell so images keep portrait ratio ── */
/* Targets the first <td> (image column) in YITH's wishlist table         */
.yith-wcwl-wishlist-shortcode .shop_table td.product-thumbnail,
.yith-wcwl-wishlist-shortcode .shop_table td:first-child:not([class*="product-"]),
.yith-wcwl-wishlist-shortcode td.wishlist-item-thumbnail,
.yith-wcwl-wishlist-shortcode td.wishlist-items-title {
    width: 80px !important;
    min-width: 80px !important;
    padding: 10px 12px 10px 0 !important;
    vertical-align: top !important;
}

/* The image itself: 1707:2560 portrait — full height, no crop — never squish, never stretch */
.yith-wcwl-wishlist-shortcode .shop_table td img,
.yith-wcwl-wishlist-shortcode table img {
    width: 80px !important;
    height: 107px !important;   /* 1707:2560 ratio ≈ passport size */
    object-fit: cover !important;
    object-position: bottom center !important; /* shoes at bottom never cut off */
    display: block !important;
}



/* ─────────────────────────────────────────
   4. SHAKE KEYFRAME
   ───────────────────────────────────────── */

@keyframes md-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}


/* ─────────────────────────────────────────
   5. COLOR SWATCHES
   ───────────────────────────────────────── */

.color-swatch-wrap {
    margin: 4px 0 20px;
}

/* Color name label — bold, clearly readable */
.color-label-text {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #000;
    margin-bottom: 0; /* no gap below — row is hidden */
}

/* Hide the swatch circle buttons visually.
   They remain in the DOM so JS can auto-select the
   first color and drive the hidden WC <select>. */
.color-swatch-row {
    display: none;
}

.color-swatch-btn {
    display: none;
}

.swatch-circle {
    display: none;
}


/* ==========================================================================
   CART DRAWER
   ========================================================================== */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
}

.cart-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    background: #fff;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -4px 0 40px rgba(0,0,0,0.12);
}

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

/* Header row */
.cd-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 22px 32px;
    border-bottom: 1px solid rgba(0,0,0,0.09);
    flex-shrink: 0;
}

.cd-close {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.15em;
    cursor: pointer;
    color: #0a0a0a;
    padding: 4px 0;
    transition: opacity 0.2s;
}

.cd-close:hover { opacity: 0.5; }

/* Body — scrollable item list */
.cd-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px 32px 0;
    -webkit-overflow-scrolling: touch;
}

.cd-heading {
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: 400;
    color: #0a0a0a;
    margin-bottom: 32px;
}

.cd-empty {
    font-size: 12px;
    color: #bbb;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0 0 40px;
}

/* Individual item */
.cd-item {
    display: flex;
    gap: 20px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    animation: md-field-in 0.35s cubic-bezier(0.16,1,0.3,1) both;
}

.cd-item-img {
    flex-shrink: 0;
    width: 80px;
    height: 106px;
    overflow: hidden;
    background: #f5f5f5;
}

.cd-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center; /* shoes at bottom never cut off */
    display: block;
}

.cd-item-img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #ebebeb;
}

.cd-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
}

.cd-item-name {
    font-size: 12.5px;
    letter-spacing: 0.05em;
    color: #0a0a0a;
    line-height: 1.3;
}

.cd-item-variant {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.06em;
}

.cd-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.cd-item-qty {
    font-size: 11.5px;
    color: #888;
    letter-spacing: 0.06em;
}

.cd-item-price {
    font-size: 12.5px;
    color: #0a0a0a;
    letter-spacing: 0.04em;
}

.cd-item-remove {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
    margin-top: 6px;
    align-self: flex-start;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.cd-item-remove:hover {
    color: #0a0a0a;
    border-bottom-color: #0a0a0a;
}

/* Footer — totals + checkout */
.cd-footer {
    flex-shrink: 0;
    padding: 24px 32px 40px;
    border-top: 1px solid rgba(0,0,0,0.09);
}

.cd-tax-row,
.cd-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #999;
    margin-bottom: 12px;
}

.cd-subtotal-row {
    color: #0a0a0a;
    margin-bottom: 28px;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    font-weight: 400;
}

.cd-checkout-btn {
    display: block;
    width: 100%;
    padding: 18px;
    border: 1px solid #0a0a0a;
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #0a0a0a;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1),
                color 0.4s cubic-bezier(0.4,0,0.2,1),
                border-color 0.4s;
    box-sizing: border-box;
}

.cd-checkout-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #0a0a0a;
    transition: left 0.45s cubic-bezier(0.4,0,0.2,1);
    z-index: 0;
}

.cd-checkout-btn:hover::before { left: 0; }
.cd-checkout-btn:hover { color: #fff; border-color: #0a0a0a; }
.cd-checkout-btn span { position: relative; z-index: 1; }

/* Loading spinner inside drawer */
.cd-loading {
    text-align: center;
    padding: 40px 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #ccc;
    text-transform: uppercase;
}

/* ==========================================================================
   CONTACT PAGE — luxury form
   ========================================================================== */
.contact-page-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 52px 40px 200px;
}

.contact-intro {
    margin-bottom: 56px;
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    letter-spacing: 0.03em;
}

.contact-intro a {
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

.contact-form-heading {
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #aaa;
    font-weight: 400;
    margin-bottom: 40px;
}

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 0;
}

.cf-group {
    margin-bottom: 32px;
    position: relative;
}

.cf-group--full { grid-column: 1 / -1; }

.cf-group label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 10px;
    transition: color 0.25s;
}

.cf-group:focus-within label {
    color: #0a0a0a;
}

.cf-group input,
.cf-group textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    padding: 6px 0 10px;
    font-size: 12.5px;
    font-family: inherit;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    position: relative;
    z-index: 0;
}

/* Animated underline */
.cf-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}

.cf-group:focus-within::after { width: 100%; }
.cf-group:focus-within input,
.cf-group:focus-within textarea { border-bottom-color: transparent; }

.cf-group textarea {
    resize: none;
    height: 120px;
    line-height: 1.7;
}

.cf-word-count {
    display: block;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #bbb;
    margin-top: 8px;
    text-align: right;
    transition: color 0.2s;
}

.form-response {
    font-size: 12px;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    min-height: 20px;
}

.contact-success-msg { color: #2a7a2a; font-size: 13px; margin-bottom: 24px; }
.contact-error-msg   { color: #b00020; font-size: 13px; margin-bottom: 24px; }

.cf-submit { margin-top: 8px; }

/* ==========================================================================
   NATIVE CONTACT FORM — md-contact-form
   Hairline underline style, matching reference
   ========================================================================== */

.md-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.md-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}

.md-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 36px;
    position: relative;
}

.md-form-field--full {
    grid-column: 1 / -1;
}

.md-form-field label {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #0a0a0a;
    margin-bottom: 10px;
    font-weight: 400;
}

.md-form-field input,
.md-form-field textarea {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    background: transparent;
    padding: 6px 0 10px;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 0.04em;
    color: #0a0a0a;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    transition: border-color 0.3s;
}

.md-form-field input:focus,
.md-form-field textarea:focus {
    border-bottom-color: #0a0a0a;
}

.md-form-field textarea {
    resize: none;
    min-height: 100px;
    line-height: 1.7;
}

.md-char-count {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #bbb;
    margin-top: 8px;
}

.md-form-submit {
    display: block;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(0,0,0,0.25);
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1), color 0.4s;
    box-sizing: border-box;
}

.md-form-submit::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #0a0a0a;
    transition: left 0.45s cubic-bezier(0.4,0,0.2,1);
    z-index: 0;
}

.md-form-submit:hover::before { left: 0; }
.md-form-submit:hover { color: #fff; }
.md-form-submit span { position: relative; z-index: 1; }

.contact-success {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #2a7a2a;
    padding: 40px 0;
    text-align: center;
}

.contact-error {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #b00020;
    margin-bottom: 24px;
}

/* ==========================================================================
   WPFORMS — LUXURY HAIRLINE STYLE
   Matches the custom contact form aesthetic: underline-only fields,
   spaced uppercase labels, full-width bordered submit, no boxes.
   ========================================================================== */

/* Reset WPForms container */
.wpf-luxury .wpforms-container,
.wpf-luxury .wpforms-form {
    padding: 0 !important;
    margin: 0 !important;
}

/* Field wrapper spacing */
.wpf-luxury .wpforms-field-container {
    margin: 0 !important;
}

.wpf-luxury .wpforms-field {
    padding: 0 0 36px !important;
    margin: 0 !important;
    position: relative;
}

/* Labels */
.wpf-luxury .wpforms-field-label,
.wpf-luxury .wpforms-field label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: #aaa !important;
    margin-bottom: 12px !important;
    font-family: inherit !important;
    transition: color 0.25s !important;
}

.wpf-luxury .wpforms-field:focus-within .wpforms-field-label,
.wpf-luxury .wpforms-field:focus-within label {
    color: #0a0a0a !important;
}

/* Hide the required asterisk */
.wpf-luxury .wpforms-required-label { display: none !important; }

/* Name sub-labels (First / Last) — match main label style */
.wpf-luxury .wpforms-field-name .wpforms-field-sublabel {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: #aaa !important;
    font-family: inherit !important;
    margin-top: 8px !important;
}

/* Name field sub-block padding removed — Name is now a simple single field */

/* All inputs, selects, textarea — hairline underline only */
.wpf-luxury .wpforms-field input[type="text"],
.wpf-luxury .wpforms-field input[type="email"],
.wpf-luxury .wpforms-field input[type="tel"],
.wpf-luxury .wpforms-field input[type="number"],
.wpf-luxury .wpforms-field input[type="url"],
.wpf-luxury .wpforms-field select,
.wpf-luxury .wpforms-field textarea {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 0 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    letter-spacing: 0.03em !important;
    color: #0a0a0a !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Animated underline on focus */
.wpf-luxury .wpforms-field::after {
    content: '';
    position: absolute;
    bottom: 36px;
    left: 0;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}

.wpf-luxury .wpforms-field:focus-within::after { width: 100%; }
.wpf-luxury .wpforms-field:focus-within input,
.wpf-luxury .wpforms-field:focus-within textarea,
.wpf-luxury .wpforms-field:focus-within select {
    border-bottom-color: transparent !important;
}

/* Name field is now simple — standard animated underline applies like all other fields */

/* Textarea */
.wpf-luxury .wpforms-field textarea {
    resize: none !important;
    height: 120px !important;
    line-height: 1.7 !important;
}

/* Two-column auto-flow grid — fields pair up naturally in source order */
.wpf-luxury .wpforms-field-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 48px !important;
    row-gap: 0 !important;
    align-items: start !important;
}

/* Name is now a simple single field — sits in the 2-column grid normally */
/* (no full-width override needed) */

/* Message full width */
.wpf-luxury .wpforms-field-textarea {
    grid-column: 1 / -1 !important;
}

/* Submit button — full-width, bordered, uppercase */
.wpf-luxury .wpforms-submit-container {
    padding: 0 !important;
    margin-top: 8px !important;
}

.wpf-luxury .wpforms-submit {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    border-radius: 0 !important;
    color: #0a0a0a !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    padding: 18px 0 !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1), color 0.4s !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.wpf-luxury .wpforms-submit:hover {
    background: #0a0a0a !important;
    color: #fff !important;
    border-color: #0a0a0a !important;
}

/* Hide WPForms default error styles, restyle cleanly */
.wpf-luxury .wpforms-error-container,
.wpf-luxury label.wpforms-error {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    color: #b00020 !important;
    margin-top: 6px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Confirmation / success message */
.wpf-luxury .wpforms-confirmation-container-full {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
    padding: 32px 0 !important;
    background: none !important;
    border: none !important;
}

/* Remove WPForms page-break, captcha padding etc */
.wpf-luxury .wpforms-page-indicator,
.wpf-luxury .wpforms-recaptcha-container { display: none !important; }

/* Word / character count — "360 remaining words" */
.wpf-luxury .wpforms-field-limit-text {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    color: #bbb !important;
    margin-top: 8px !important;
    font-family: inherit !important;
}

/* Field padding — give rows more vertical breathing room */
.wpf-luxury .wpforms-field {
    padding: 0 0 44px !important;
}

/* ── Whitespace boost — more breathing room sitewide ── */
.contact-page-wrap {
    padding: 120px 40px 200px !important;
    max-width: 800px !important;
}

.contact-intro {
    margin-bottom: 80px !important;
}

.contact-form-heading {
    margin-bottom: 56px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: #aaa !important;
}

/* More vertical space in product grids */
.shop-archive ul.products,
.collection-page .product-row ul.products,
.recommended ul.recommended-products {
    gap: 80px 32px !important;
}

/* More breathing room in collection intro */
.collection-intro {
    padding: 0 !important;
}

/* Editorial sections */
.editorial-contained {
    margin: 0 !important;
}

.split-grid {
    margin: 0 !important;
    gap: 0 !important;
}

/* Footer top breathing room */
.footer-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -20px !important;
}

/* ==========================================================================
   ACCOUNT / REGISTER PAGE — RESET MAIN PADDING
   WooCommerce account pages use index.php which has padding: 40px.
   Remove it so the black hero goes edge-to-edge.
   ========================================================================== */
body.woocommerce-account main.site-main,
body.woocommerce-page main.site-main {
    padding: 0;
}

main.register-page-outer {
    padding: 0;
}

/* ==========================================================================
   LUXURY ACCOUNT v2 — Chanel / The Row aesthetic
   All account pages: login, register, dashboard, orders
   ========================================================================== */

/* -------------------------
   MD FLOATING LABEL FIELD
   ------------------------- */
.md-field {
    position: relative;
    margin-bottom: 36px;
    padding-top: 18px;
}

.md-field input,
.md-field select,
.md-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    padding: 8px 0 10px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    font-family: inherit;
    color: #0a0a0a;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Animated underline drawn from left */
.md-field::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-field:focus-within::after {
    width: 100%;
}

.md-field:focus-within {
    border-bottom-color: transparent;
}

.md-field label {
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aaa;
    pointer-events: none;
    transform-origin: left center;
    transition:
        top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        letter-spacing 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Float up when focused or has content */
.md-field input:focus ~ label,
.md-field input:not(:placeholder-shown) ~ label,
.md-field select:focus ~ label,
.md-field textarea:focus ~ label,
.md-field textarea:not(:placeholder-shown) ~ label,
.md-field.has-value label {
    top: 0;
    font-size: 9px;
    color: #0a0a0a;
    letter-spacing: 0.22em;
}

/* Select arrow */
.md-field select {
    cursor: pointer;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 10px;
}

/* Phone field prefix */
.md-field-phone {
    position: relative;
    padding-top: 18px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    transition: border-color 0.35s cubic-bezier(0.4,0,0.2,1);
}

.md-field-phone::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-field-phone:focus-within::after {
    width: 100%;
}

.md-field-phone:focus-within {
    border-bottom-color: transparent;
}

.md-field-phone label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0a0a0a;
}

/* inner row: country-code select + number input */
.phone-inner {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.phone-country-select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #aaa;
    outline: none;
    padding: 8px 8px 10px 0;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
    flex-shrink: 0;
    width: auto;
}

.md-field-phone input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0 10px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    font-family: inherit;
    color: #0a0a0a;
    outline: none;
}

/* Birthday wrap — label above the three selects */
.md-birthday-wrap {
    margin-bottom: 36px;
}

.md-birthday-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 8px;
}

.md-birthday-wrap .md-birthday-row {
    margin-bottom: 0;
}

/* Birthday row */
.md-birthday-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.1fr;
    gap: 20px;
}

/* -------------------------
   MD CHECKBOX (consent)
   ------------------------- */
.md-checkbox {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    cursor: pointer;
}

.md-checkbox input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.md-checkbox-box {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #bbb;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.25s ease;
}

.md-checkbox input:checked ~ .md-checkbox-box {
    border-color: #0a0a0a;
    background: #0a0a0a;
}

.md-checkbox input:checked ~ .md-checkbox-box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: 4px;
    height: 7px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.md-checkbox-label {
    font-size: 11.5px;
    line-height: 1.6;
    color: #555;
    letter-spacing: 0.03em;
}

/* -------------------------
   MD BUTTON
   ------------------------- */
.md-btn {
    display: inline-block;
    padding: 15px 30px;
    background: #0a0a0a;
    color: #ffffff;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.md-btn:hover::before {
    left: 0;
}

.md-btn:hover {
    color: #fff;
}

.md-btn span,
.md-btn-text {
    position: relative;
    z-index: 1;
}

.md-btn--full {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.md-btn--outline {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.25);
    color: #0a0a0a;
}

.md-btn--outline::before {
    background: #0a0a0a;
}

.md-btn--outline:hover {
    color: #fff;
    border-color: #0a0a0a;
}

.md-btn--black {
    background: #0a0a0a;
    color: #fff;
}

.md-btn--black::before {
    background: #333;
}

/* Button loading state */
.md-btn.is-loading .md-btn-text { opacity: 0; }
.md-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    margin: -7px 0 0 -7px;
    animation: md-spin 0.7s linear infinite;
    z-index: 2;
}

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

/* -------------------------
   MD LINKS
   ------------------------- */
.md-link-forgot {
    display: block;
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #888;
    text-decoration: none;
    text-align: center;
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1px;
}

.md-link-forgot::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: #888;
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-link-forgot:hover::after {
    width: 100%;
}

/* -------------------------
   LOGIN PAGE LAYOUT
   ------------------------- */
.login-page-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0 0 120px;
    animation: md-page-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes md-page-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Editorial hero — hidden, columns speak for themselves ── */
.login-hero {
    display: none;
}

/* ── Two-column layout ── */
.login-columns {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 80px;
    align-items: start;
    padding: 150px 48px 60px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .login-columns {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 150px 24px 60px;
    }
    .login-col-divider {
        display: none;
    }
}

.login-col:first-child {
    border: 1px solid rgba(0,0,0,0.12);
    padding: 40px;
}

.login-heading {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 32px;
    color: #0a0a0a;
}

.register-desc {
    font-size: 12.5px;
    color: #888;
    letter-spacing: 0.03em;
    line-height: 1.75;
    margin-bottom: 36px;
}

/* ── Social strip ── */
.login-social-strip {
    padding: 40px 48px 0;
    border-top: 1px solid rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.login-social-label {
    font-size: 9.5px;
    letter-spacing: 0.28em;
    color: #bbb;
    text-transform: uppercase;
}

.login-social-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.login-social-note {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: #ccc;
    text-align: center;
    margin: 0;
}

/* -------------------------
   SOCIAL LOGIN BUTTONS
   ------------------------- */
.social-btn-luxury {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 24px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.social-btn-luxury:hover {
    border-color: #0a0a0a;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.social-btn-luxury svg {
    flex-shrink: 0;
}

.social-btn-luxury.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Override NSL plugin buttons */
.nsl-container .nsl-button {
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    min-height: unset !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

.nsl-container .nsl-button:hover {
    border-color: #0a0a0a !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* -------------------------
   REGISTER PAGE (page-register.php)
   ------------------------- */
.register-page-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 80px 40px 120px;
    animation: md-page-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.register-page-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 48px;
    text-align: left;
    color: #0a0a0a;
}

.register-signin-link {
    text-align: center;
    margin-top: 32px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #bbb;
}

.register-signin-link a {
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    padding-bottom: 1px;
}

.register-consents-section {
    margin-top: 16px;
    margin-bottom: 32px;
}

.register-consents-heading {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin-bottom: 20px;
    display: block;
}

.register-privacy-note {
    font-size: 11px;
    line-height: 1.7;
    color: #888;
    margin-bottom: 36px;
    letter-spacing: 0.02em;
}

.register-privacy-note a {
    color: #0a0a0a;
    text-decoration: underline;
}

.register-gender-row {
    display: flex;
    gap: 0;
    margin-bottom: 36px;
    padding-top: 18px;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    transition: border-color 0.35s ease;
}

.register-gender-label-top {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #aaa;
    pointer-events: none;
    transition: color 0.3s ease;
}

.register-gender-row:focus-within .register-gender-label-top {
    color: #0a0a0a;
}

.register-gender-row::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}

.register-gender-row:focus-within::after {
    width: 100%;
}

.gender-opt {
    display: none;
}

.gender-opt + label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bbb;
    cursor: pointer;
    padding: 8px 20px 10px 0;
    transition: color 0.25s ease;
    user-select: none;
}

.gender-opt:checked + label {
    color: #0a0a0a;
}

.gender-opt + label:hover {
    color: #555;
}

/* Staggered field entrance */
.register-page-wrap .md-field,
.register-page-wrap .md-birthday-row,
.register-page-wrap .md-field-phone,
.register-page-wrap .register-name-row,
.register-page-wrap .register-gender-row,
.register-page-wrap .register-consents-section {
    animation: md-field-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.register-page-wrap .md-field:nth-child(1),
.register-page-wrap .register-gender-row { animation-delay: 0.05s; }
.register-page-wrap .register-name-row   { animation-delay: 0.1s; }
.register-page-wrap .md-field:nth-child(3) { animation-delay: 0.15s; }
.register-page-wrap .md-field:nth-child(4) { animation-delay: 0.2s; }
.register-page-wrap .md-field-phone      { animation-delay: 0.25s; }
.register-page-wrap .md-birthday-row     { animation-delay: 0.3s; }
.register-page-wrap .register-consents-section { animation-delay: 0.38s; }

@keyframes md-field-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------
   ACCOUNT DASHBOARD v2
   ------------------------- */
.my-account-wrapper {
    min-height: calc(100vh - 76px);
}

.account-hero {
    background: #0a0a0a;
    color: #fff;
    text-align: center;
    padding: 100px 20px 90px;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer line */
.account-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: hero-shimmer 4s ease-in-out 0.8s infinite;
}

@keyframes hero-shimmer {
    0%   { left: -50%; }
    100% { left: 150%; }
}

.account-hero-inner {
    animation: md-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes md-hero-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.account-welcome {
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 16px;
}

.account-name {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

/* 3-column grid */
.account-grid {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 0;
    padding: 80px 8%;
    border-top: none;
}

.account-left,
.account-right {
    padding: 0 40px 0 0;
}

.account-right {
    padding: 0 0 0 40px;
    border-left: 1px solid rgba(0,0,0,0.07);
}

.account-content {
    padding: 0 48px;
    border-left: 1px solid rgba(0,0,0,0.07);
    border-right: 1px solid rgba(0,0,0,0.07);
    animation: md-content-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes md-content-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left nav */
.account-left h3,
.account-right h3 {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 32px;
    font-weight: 400;
}

.account-left ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-left li {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.account-left li:first-child {
    border-top: 1px solid rgba(0,0,0,0.05);
}

.account-left a {
    display: block;
    padding: 13px 0;
    text-decoration: none;
    color: #0a0a0a;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.35;
    transition: opacity 0.25s ease, padding-left 0.25s ease;
    position: relative;
}

.account-left a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: #0a0a0a;
    transform: translateY(-50%);
    transition: width 0.25s ease;
}

.account-left a:hover,
.account-left li.active a {
    opacity: 1;
    padding-left: 14px;
}

.account-left a:hover::before,
.account-left li.active a::before {
    width: 8px;
}

.account-left li.active a {
    font-weight: 500;
}

/* Customer service */
.account-right p {
    font-size: 12px;
    line-height: 1.8;
    color: #555;
    letter-spacing: 0.03em;
}

.account-right a {
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 1px;
    transition: border-color 0.2s ease;
}

.account-right a:hover {
    border-color: #0a0a0a;
}

/* Dashboard last order */
.account-middle {
    text-align: left;
}

.account-middle h3 {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 32px;
    font-weight: 400;
}

.no-orders {
    font-size: 13px;
    color: #888;
    margin-bottom: 30px;
    letter-spacing: 0.03em;
}

/* Order card in dashboard */
.order-card {
    border: 1px solid rgba(0,0,0,0.1);
    padding: 28px;
    max-width: 340px;
}

.order-card p {
    font-size: 12px;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    color: #444;
}

.order-card .order-id {
    font-size: 13px;
    color: #0a0a0a;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.order-card .order-status {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 20px;
}

/* Discover / View order buttons inherit .md-btn overrides */
.discover-btn,
.view-order-btn {
    display: inline-block;
    padding: 13px 32px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    background: #e8e8e8;
    color: #888;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1),
                color 0.4s cubic-bezier(0.4,0,0.2,1);
}

.discover-btn::before,
.view-order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
    z-index: 0;
}

.discover-btn:hover::before,
.view-order-btn:hover::before {
    left: 0;
}

.discover-btn span,
.view-order-btn span,
.discover-btn,
.view-order-btn {
    position: relative;
    z-index: 1;
}

.discover-btn:hover,
.view-order-btn:hover {
    color: #fff;
}

/* Order history page */
.account-orders {
    max-width: 100%;
}

.account-orders h3 {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 40px;
    font-weight: 400;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.order-item {
    display: flex;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    transition: opacity 0.2s ease;
}

.order-item:hover {
    opacity: 0.85;
}

.order-image img {
    width: 80px;
    height: 108px;
    object-fit: cover;
    display: block;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.order-id {
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: #0a0a0a;
}

.order-date {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.05em;
}

.order-total {
    font-size: 12.5px;
    color: #0a0a0a;
    margin-top: 6px;
}

.order-status {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888;
}

.order-actions {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    align-items: center;
}

.view-order-btn {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    padding: 9px 22px;
}

.reorder-btn {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: #888;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}

.reorder-btn:hover {
    color: #0a0a0a;
    border-color: #0a0a0a;
}

/* =========================================================
   WOOCOMMERCE ACCOUNT CONTENT — LUXURY OVERRIDES
   ========================================================= */

/* Section headings inside account content */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.account-section-title {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 400;
    color: #bbb;
    margin: 0 0 40px;
    padding: 0;
    border: none;
    background: none;
}

/* Kill WC default box around form rows */
.woocommerce-MyAccount-content fieldset {
    border: none;
    padding: 0;
    margin: 0 0 36px;
}

.woocommerce-MyAccount-content fieldset legend {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #bbb;
    font-weight: 400;
    padding: 0;
    margin-bottom: 32px;
}

/* Inputs — bottom-border only, no box */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    background: transparent;
    padding: 10px 0;
    font-size: 12.5px;
    font-family: inherit;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease;
    border-radius: 0;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-bottom-color: #0a0a0a;
    outline: none;
    box-shadow: none;
}

/* Labels */
.woocommerce-MyAccount-content label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaa;
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
}

/* Form row spacing */
.woocommerce-MyAccount-content .form-row {
    margin-bottom: 32px;
    padding: 0;
}

.woocommerce-MyAccount-content .form-row-first,
.woocommerce-MyAccount-content .form-row-last {
    float: none;
    width: 100%;
}

/* Required asterisk */
.woocommerce-MyAccount-content .required {
    color: #0a0a0a;
}

/* Submit / save button — black, full-width */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
    display: block;
    width: 100%;
    background: #0a0a0a;
    color: #fff;
    border: none;
    padding: 16px 0;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 0;
    margin-top: 16px;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
    background: #333;
}

/* ── Address overview (my-address.php) ── */

/* Intro text */
.woocommerce-MyAccount-content > p:first-of-type {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 48px;
    line-height: 1.8;
}

/* Two-column address grid */
.woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
}

/* Each address card — no box, clean lines */
.woocommerce-Address {
    border: none;
    padding: 0;
    background: none;
    box-shadow: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 32px;
}

/* "Billing address" / "Shipping address" heading */
.woocommerce-Address .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}

.woocommerce-Address .woocommerce-Address-title h3 {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 400;
    color: #0a0a0a;
    margin: 0;
}

/* Edit link */
.woocommerce-Address .woocommerce-Address-title .edit {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-Address .woocommerce-Address-title .edit:hover {
    color: #0a0a0a;
    border-color: #0a0a0a;
}

/* Address text */
.woocommerce-Address address {
    font-size: 12px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #555;
    font-style: normal;
}

/* "You have not set up this type of address yet." */
.woocommerce-Address address p,
.woocommerce-Address > p {
    font-size: 11px;
    color: #bbb;
    letter-spacing: 0.04em;
    line-height: 1.8;
}

/* Breadcrumbs — hide WC default */
.woocommerce-MyAccount-content .woocommerce-breadcrumb {
    display: none;
}

/* ── Notices ── */
.woocommerce-notices-wrapper {
    margin-bottom: 0;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border: none !important;
    border-left: 2px solid #0a0a0a !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    background: #f8f8f8 !important;
    box-shadow: none !important;
    margin-bottom: 32px !important;
    list-style: none !important;
}

.woocommerce-message { border-left-color: #0a0a0a !important; color: #0a0a0a !important; }
.woocommerce-error   { border-left-color: #8b1a1a !important; background: #fdf5f5 !important; color: #8b1a1a !important; }
.woocommerce-info    { border-left-color: #aaa !important; color: #555 !important; }

/* Remove default WC before-icon on notices */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none !important;
}

/* Remove bullet points from error list items */
.woocommerce-error li { list-style: none !important; padding-left: 0 !important; }

/* ==========================================================================
   SHIPPING LOCATION BUTTON + MODAL
   footer-right → sl-overlay → sl-modal
   ========================================================================== */

/* ── Footer trigger button ── */
.shipping-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #555;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.25s ease;
}

.shipping-location-btn:hover {
    color: #fff;
}

.sl-flag {
    font-size: 14px;
    line-height: 1;
}

.sl-country {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}

.sl-chevron {
    width: 8px;
    height: 5px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.shipping-location-btn[aria-expanded="true"] .sl-chevron {
    transform: rotate(180deg);
}

/* ── Modal overlay ── */
.sl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 20px;
    box-sizing: border-box;
}

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

/* ── Modal box ── */
.sl-modal {
    background: #fff;
    width: 100%;
    max-width: 750px;
    padding: 74px 50px 50px;
    position: relative;
    text-align: center;
    box-shadow: none;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.sl-overlay.active .sl-modal {
    transform: translateY(0);
}

/* Close button */
.sl-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 22px;
    color: #0a0a0a;
    cursor: pointer;
    padding: 4px;
    opacity: 1;
    transition: opacity 0.2s;
    line-height: 1;
}

.sl-modal-close:hover { opacity: 1; }

/* Title */
.sl-modal-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #0a0a0a;
    line-height: 1.25;
    margin: 0 0 14px;
}

/* Sub-copy */
.sl-modal-sub {
    font-size: 17px;
    line-height: 1.5;
    color: #1f2933;
    margin: 0 0 42px;
    letter-spacing: 0;
}

/* Section label above select */
.sl-modal-label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #1f2933;
    margin: 0 0 12px;
    text-align: left;
}

/* Select wrapper */
.sl-select-wrap {
    position: relative;
    margin-bottom: 26px;
}

.sl-select {
    width: 100%;
    height: 70px;
    border: 1px solid #0a0a0a;
    background: transparent;
    padding: 0 76px 0 18px;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0;
    color: #0a0a0a;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

.sl-select-arrow {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 9px;
    pointer-events: none;
    color: #0a0a0a;
}

.sl-select-wrap::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 58px;
    width: 1px;
    height: 40px;
    background: #6b7280;
    pointer-events: none;
}

/* Validate button */
.sl-validate-btn {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 22px 24px;
    background: #0a0a0a;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

.sl-validate-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #333;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.sl-validate-btn:hover::before { left: 0; }
.sl-validate-text { position: relative; z-index: 1; }

/* Loading state */
.sl-validate-btn.is-loading .sl-validate-text { opacity: 0; }
.sl-validate-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    margin: -7px 0 0 -7px;
    animation: md-spin 0.7s linear infinite;
    z-index: 2;
}

/* Prevent double-click during loading */
.sl-validate-btn.is-loading {
    pointer-events: none;
}

/* Select optgroup label styling (currency group headers) */
.sl-select optgroup {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #aaa;
    font-style: normal;
    padding: 8px 0 4px;
}

.sl-select option {
    font-size: 14px;
    letter-spacing: 0;
    color: #0a0a0a;
    padding: 6px 0;
}

/* ── Detected location notice ── */
.sl-detected-note {
    font-size: 10.5px;
    color: #aaa;
    letter-spacing: 0.06em;
    margin-top: 20px;
}

/* =========================================
   CART PAGE — LUXURY EDITORIAL
========================================= */

.md-cart-page {
    padding: 64px 60px 140px;
    background: #f8f8f6;
}

.md-cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 80px;
    align-items: start;
}

.md-cart-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

.md-cart-item {
    display: flex;
    flex-direction: column;
}

/* Portrait ratio — 1707:2560 (matches source images) */
.md-cart-image {
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #efefed;
}

.md-cart-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.md-cart-meta {
    padding-top: 20px;
}

.md-cart-meta h2 {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.md-cart-price,
.md-cart-qty {
    font-size: 11px;
    color: #555;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}

.md-cart-remove {
    display: inline-block;
    margin-top: 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.md-cart-remove:hover {
    color: #0a0a0a;
}

.md-cart-summary {
    position: sticky;
    top: 110px;
}

.md-summary-box {
    background: #fff;
    padding: 48px 40px;
    border: 1px solid rgba(0,0,0,0.07);
}

.md-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.md-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px;
    border: 1px solid #000;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    text-decoration: none;
    color: #000;
    margin-top: 36px;
    transition: all 0.25s ease;
}

.md-checkout-btn:hover {
    background: #000;
    color: #fff;
}

/* =========================================
   ACCOUNT DETAILS
========================================= */

/* =========================================================
   ACCOUNT DETAILS FORM
   ========================================================= */
.md-account-details {
    width: 100%;
}

/* ── Complete-profile nudge (Myntra-style) ── */
.md-profile-nudge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
    padding: 14px 18px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #fafafa;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #555;
}

.md-profile-nudge-icon {
    font-size: 14px;
    line-height: 1;
    color: #aaa;
    flex-shrink: 0;
}

.md-profile-nudge-text {
    flex: 1;
}

.account-section-title {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 48px;
}

/* Sub-sections: Personal Info | Security */
.md-account-section {
    margin-bottom: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.md-account-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.md-account-section-label {
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 36px;
}

/* Two-column row inside personal info (first + last name) */
.md-account-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Security section note */
.md-security-note {
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: #aaa;
    margin-bottom: 36px;
}

/* Password strength bar */
.md-pwd-strength {
    height: 2px;
    background: rgba(0,0,0,0.08);
    margin-top: 8px;
    overflow: hidden;
}

.md-pwd-strength-fill {
    height: 100%;
    width: 0;
    transition: width 0.4s ease, background 0.4s ease;
}

.md-pwd-strength-label {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: block;
    margin-top: 6px;
}

/* Save button */
.md-account-save-btn {
    display: block;
    width: 100%;
    background: #0a0a0a;
    color: #fff;
    border: none;
    padding: 16px 0;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 8px;
}

.md-account-save-btn:hover {
    background: #333;
}

/* ============================================================
   SEARCH RESULTS PAGE  (search.php)
============================================================ */

/* ==========================================================================
   SEARCH RESULTS PAGE — Maison Driéa
   Inspired by The Row / Chanel: editorial heading, clean grid, no clutter.
   ========================================================================== */

.sr-page {
    max-width: 100%;
    padding: 92px 0 120px;
    background: #fff;
}

/* ── Editorial hero heading ── */
.sr-hero {
    padding: 58px 48px 42px;
    border-bottom: 1px solid rgba(10,10,10,0.07);
    text-align: center;
}

.sr-hero-label {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 14px;
}

.sr-hero-term {
    font-size: clamp(30px, 4.6vw, 64px);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 10px;
    line-height: 1.05;
}

.sr-hero-count {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #bbb;
    margin: 0;
    text-transform: uppercase;
}

/* ── Filter bar ── */
.sr-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 48px;
    border-bottom: 1px solid rgba(10,10,10,0.07);
    margin-bottom: 0;
    position: sticky;
    top: 72px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}

/* Legacy tabs */
.sr-tabs {
    display: flex;
    gap: 28px;
    align-items: center;
}

.sr-tab {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aaa;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.sr-tab.active,
.sr-tab:hover {
    color: #0a0a0a;
    border-bottom-color: #0a0a0a;
}

/* Sort button */
.sr-filter-wrap {
    position: relative;
}

.sr-filter-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.sr-filter-btn:hover { opacity: 0.45; }

.sr-filter-plus {
    font-size: 13px;
    color: #999;
    line-height: 1;
}

.sr-sort-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(10,10,10,0.1);
    min-width: 200px;
    z-index: 200;
    padding: 6px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.sr-sort-option {
    display: block;
    padding: 11px 22px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    transition: background 0.1s;
}

.sr-sort-option:hover { background: #f7f7f7; }
.sr-sort-option.active {
    background: #f7f7f7;
    font-weight: 600;
}

/* ── Product grid ── */
/* .sr-grid product card rules removed — search results now use
   ul.products inside .collection-page .product-row so all Nocturne
   card CSS applies identically. */

/* ── Pagination ── */
.sr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 72px;
    padding: 0 40px;
}

.sr-pagination .page-numbers {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.sr-pagination .page-numbers.current,
.sr-pagination .page-numbers:hover {
    border-color: #0a0a0a;
}

/* ── Empty state ── */
.sr-empty {
    text-align: center;
    padding: 120px 40px;
}

.sr-empty-heading {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0a0a0a;
    margin-bottom: 12px;
    font-weight: 400;
}

.sr-empty-sub {
    font-size: 12px;
    color: #aaa;
    letter-spacing: 0.04em;
    margin-bottom: 40px;
}

.sr-empty-cta {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #0a0a0a;
    border-bottom: 1px solid #0a0a0a;
    text-decoration: none;
    padding-bottom: 3px;
    transition: opacity 0.2s;
}

.sr-empty-cta:hover { opacity: 0.45; }

/* ==========================================================================
   WOOCS — hide all frontend currency-switcher UI
   Currency is auto-set by geolocation; customers use the footer shipping
   selector instead. Nothing from WOOCS should be visible.
   ========================================================================== */
.woocs_wrapper,
.woocs_wrapper_ul,
.woocs_form,
.woocs-currency-switcher,
.woocommerce-currency-switcher,
#woocs_currency_selector,
[class*="woocs"],
[id*="woocs"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── FOOTER BOTTOM UTILITY ROW ── */
.footer-bottom span,
.footer-bottom a,
.footer-bottom p,
.footer-bottom button,
.shipping-location-btn,
.sl-country,
.footer-bottom .sl-country {
    font-size: 11px !important;
}


/* ==========================================================================
   MAISON DRIÉA — LUXURY RESPONSIVE SYSTEM
   Aesthetic reference: The Row · Chanel
   One consolidated block. Cascade position is authority.
   Breakpoints: Tablet 769–1024px · Mobile ≤768px · Small phone ≤390px
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════
   0. CAROUSEL DOT INDICATOR
   JS inserts .gallery-dots below the product gallery on mobile.
   Hidden on desktop; the mobile block below reveals it.
   ══════════════════════════════════════════════════════════════ */

.gallery-dots { display: none; }

.gallery-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform  0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-dot.active {
    background: #0a0a0a;
    transform: scale(1.4);
}



/* ==========================================================================
   ORDER CONFIRMATION — Thank You Page
   Luxury editorial layout matching the Maison Driéa theme.
   ========================================================================== */

.md-thankyou-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 40px 140px;
}

/* Confirmation header */
.md-thankyou-eyebrow {
    font-size: 10px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 20px;
}

.md-thankyou-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin: 0 0 20px;
    line-height: 1.15;
}

.md-thankyou-sub {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* Order meta strip — 4 cells in a row */
.md-order-meta {
    list-style: none;
    padding: 0;
    margin: 56px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.md-order-meta__item {
    padding: 24px 0;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding-right: 20px;
    margin-right: 20px;
}

.md-order-meta__item:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.md-order-meta__label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 8px;
}

.md-order-meta__value {
    display: block;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #0a0a0a;
}

/* Section headings */
.md-thankyou-section {
    margin-bottom: 56px;
}

.md-thankyou-section-heading {
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #aaa;
    font-weight: 400;
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Order items table */
.md-thankyou-table {
    width: 100%;
    border-collapse: collapse;
}

.md-thankyou-table thead th {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ccc;
    font-weight: 400;
    padding: 0 0 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.md-thankyou-table thead th.md-tt-total {
    text-align: right;
}

.md-thankyou-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.md-thankyou-table tbody td {
    padding: 24px 0;
    vertical-align: top;
}

/* Product cell — image + info side by side */
.md-tt-product {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.md-tt-img-wrap {
    flex-shrink: 0;
    width: 60px;
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #f0f0ee;
}

.md-tt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.md-tt-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
}

.md-tt-name {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.md-tt-variant,
.md-tt-qty {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.04em;
}

.md-thankyou-table td.md-tt-total {
    text-align: right;
    font-size: 12px;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

/* Foot rows */
.md-thankyou-table tfoot tr th,
.md-thankyou-table tfoot tr td {
    padding: 12px 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #666;
    text-align: left;
    border-bottom: none;
}

.md-thankyou-table tfoot tr td {
    text-align: right;
}

.md-tt-subtotal th,
.md-tt-subtotal td {
    padding-top: 24px !important;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.md-tt-grand-total th,
.md-tt-grand-total td {
    font-size: 13px;
    letter-spacing: 0.10em;
    color: #0a0a0a;
    padding-top: 20px !important;
    border-top: 1px solid rgba(0,0,0,0.12);
}

/* Addresses */
.md-thankyou-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.md-thankyou-addr {
    font-style: normal;
    font-size: 12px;
    line-height: 1.9;
    color: #555;
    letter-spacing: 0.03em;
}

/* CTA row */
.md-thankyou-cta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 64px;
}

.md-thankyou-btn {
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid #0a0a0a;
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    color: #0a0a0a;
    background: #0a0a0a;
    color: #fff;
    transition: all 0.25s ease;
}

.md-thankyou-btn--ghost {
    background: transparent;
    color: #0a0a0a;
}

.md-thankyou-btn:hover {
    background: transparent;
    color: #0a0a0a;
}

.md-thankyou-btn--ghost:hover {
    background: #0a0a0a;
    color: #fff;
}

/* Failed order notice */
.md-thankyou-failed {
    padding: 40px 0;
}

.md-thankyou-notice {
    font-size: 13px;
    color: #666;
    margin-bottom: 32px;
    line-height: 1.8;
}

.md-thankyou-actions {
    display: flex;
    gap: 16px;
}

/* ==========================================================================
   WISHLIST — luxury editorial table
   Replaces the old grid. Clean, airy, Prada-level whitespace.
   ========================================================================== */

.md-wishlist-wrap {
    padding: 0 40px 80px;
}

/* Empty state */
.md-wishlist-empty {
    padding: 80px 0 120px;
    text-align: center;
}

.md-wishlist-empty-msg {
    font-size: 13px;
    color: #888;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
}

/* Table */
.md-wishlist-table {
    width: 100%;
    border-collapse: collapse;
}

/* Header row */
.md-wl-th {
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #bbb;
    font-weight: 400;
    padding: 0 20px 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    text-align: left;
    white-space: nowrap;
}

.md-wl-th--img    { width: 80px; padding-right: 32px; }
.md-wl-th--name   { min-width: 200px; }
.md-wl-th--price  { width: 140px; }
.md-wl-th--stock  { width: 120px; }
.md-wl-th--action { width: 140px; }
.md-wl-th--remove { width: 40px; }

/* Body rows */
.md-wl-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.2s ease;
}

.md-wl-row:hover {
    background: rgba(0,0,0,0.015);
}

.md-wl-td {
    padding: 28px 20px 28px 0;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #0a0a0a;
}

.md-wl-td--img {
    width: 80px;
    padding-right: 32px;
}

/* Thumbnail */
.md-wl-img-link {
    display: block;
    width: 60px;
    aspect-ratio: 1707 / 2560;
    overflow: hidden;
    background: #f5f5f3;
}

.md-wl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity 0.35s ease;
}

.md-wl-img-link:hover .md-wl-img {
    opacity: 0.8;
}

/* Product name */
.md-wl-name {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.md-wl-name:hover {
    opacity: 0.5;
}

/* Stock */
.md-wl-stock {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.md-wl-stock--in  { color: #888; }
.md-wl-stock--out { color: #ccc; }

/* Action button */
.md-wl-action-btn {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 2px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
}

.md-wl-action-btn:hover {
    opacity: 0.45;
}

.md-wl-action-btn--disabled {
    color: #ccc;
    border-bottom-color: #ccc;
    cursor: default;
}

/* Remove ✕ */
.md-wl-remove {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: inherit;
    line-height: 1;
}

.md-wl-remove:hover {
    color: #0a0a0a;
}

/* Footer link */
.md-wishlist-footer {
    margin-top: 60px;
    padding-top: 32px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.md-wl-link,
.md-ot-link {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.md-wl-link:hover,
.md-ot-link:hover {
    opacity: 0.45;
}

/* Mobile: stack table to list-style rows */
@media (max-width: 680px) {
    .md-wishlist-wrap { padding: 0 20px 60px; }

    .md-wishlist-table thead { display: none; }

    .md-wishlist-table,
    .md-wishlist-table tbody,
    .md-wl-row,
    .md-wl-td { display: block; width: 100%; }

    .md-wl-row {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 20px;
        padding: 24px 0;
    }

    .md-wl-td--img    { grid-row: 1 / 4; grid-column: 1; padding: 0; }
    .md-wl-td--name   { grid-row: 1; grid-column: 2; padding: 0; }
    .md-wl-td--price  { grid-row: 2; grid-column: 2; padding: 4px 0 0; }
    .md-wl-td--stock  { grid-row: 2; grid-column: 3; padding: 4px 0 0; }
    .md-wl-td--action { grid-row: 3; grid-column: 2; padding: 12px 0 0; }
    .md-wl-td--remove { grid-row: 1; grid-column: 3; padding: 0; text-align: right; }

    .md-wl-img-link { width: 60px; }
}


/* ==========================================================================
   ORDER HISTORY — luxury editorial table
   ========================================================================== */

.md-orders-wrap {
    padding: 0 40px 80px;
}

/* Empty state */
.md-orders-empty {
    padding: 80px 0 120px;
    text-align: center;
}

.md-orders-empty-msg {
    font-size: 13px;
    color: #888;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
}

/* Table */
.md-orders-table {
    width: 100%;
    border-collapse: collapse;
}

/* Header */
.md-ot-th {
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #bbb;
    font-weight: 400;
    padding: 0 24px 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    text-align: left;
    white-space: nowrap;
}

.md-ot-th--order  { width: 100px; }
.md-ot-th--date   { width: 160px; }
.md-ot-th--items  { }
.md-ot-th--total  { width: 130px; }
.md-ot-th--status { width: 110px; }
.md-ot-th--actions { width: 130px; text-align: right; padding-right: 0; }

/* Rows */
.md-ot-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.2s ease;
}

.md-ot-row:hover {
    background: rgba(0,0,0,0.015);
}

.md-ot-td {
    padding: 30px 24px 30px 0;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #444;
}

.md-ot-td--actions {
    text-align: right;
    padding-right: 0;
}

/* Order number link */
.md-ot-order-link {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.md-ot-order-link:hover {
    border-bottom-color: #0a0a0a;
}

/* Item name + overflow label */
.md-ot-item-name {
    display: block;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.md-ot-item-more {
    display: block;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Status badge */
.md-ot-status {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid rgba(0,0,0,0.12);
    color: #888;
    display: inline-block;
}

.md-ot-status--completed  { border-color: rgba(0,0,0,0.15); color: #555; }
.md-ot-status--processing { border-color: rgba(0,0,0,0.20); color: #333; }
.md-ot-status--on-hold    { border-color: rgba(0,0,0,0.10); color: #999; }
.md-ot-status--cancelled,
.md-ot-status--failed     { border-color: rgba(0,0,0,0.08); color: #bbb; }

/* Action links */
.md-ot-action-btn {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 1px;
    margin-left: 16px;
    transition: opacity 0.2s ease;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: inherit;
}

.md-ot-action-btn:first-child {
    margin-left: 0;
}

.md-ot-action-btn:hover {
    opacity: 0.45;
}

.md-ot-action-btn--reorder {
    border-bottom-color: rgba(0,0,0,0.3);
    color: #888;
}

/* Mobile: collapse to readable stacked layout */
@media (max-width: 760px) {
    .md-orders-wrap { padding: 0 20px 60px; }

    .md-orders-table thead { display: none; }

    .md-orders-table,
    .md-orders-table tbody,
    .md-ot-row { display: block; width: 100%; }

    .md-ot-row {
        padding: 24px 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 16px;
    }

    .md-ot-td {
        display: block;
        padding: 0;
        font-size: 12px;
    }

    .md-ot-td--order  { grid-column: 1; font-weight: 500; }
    .md-ot-td--date   { grid-column: 1; color: #aaa; }
    .md-ot-td--items  { grid-column: 1; }
    .md-ot-td--total  { grid-column: 2; grid-row: 1; text-align: right; }
    .md-ot-td--status { grid-column: 2; grid-row: 2; text-align: right; }
    .md-ot-td--actions { grid-column: 1 / 3; text-align: left; padding-top: 12px; }

    .md-ot-action-btn { margin-left: 0; margin-right: 16px; }
}


/* ==========================================================================
   CHECKOUT & ACCOUNT — generous 40px+ side whitespace
   ========================================================================== */

/* Classic checkout outer padding */
.woocommerce-checkout .woocommerce,
.woocommerce-checkout .woocommerce-checkout {
    padding-left: max(40px, 5vw) !important;
    padding-right: max(40px, 5vw) !important;
    box-sizing: border-box;
}

/* WooCommerce Blocks checkout wrapper */
.wp-block-woocommerce-checkout,
.wc-block-checkout {
    padding-left: max(40px, 5vw) !important;
    padding-right: max(40px, 5vw) !important;
    padding-bottom: 120px !important;
    box-sizing: border-box;
}

/* Thank you page — ensure breathing room */
.md-thankyou-page {
    padding-left: max(40px, 6vw) !important;
    padding-right: max(40px, 6vw) !important;
}

/* Account area (my-account wrapper) — air on sides */
.woocommerce-account .woocommerce,
.account-layout,
.account-main {
    padding-left: max(40px, 4vw);
    padding-right: max(40px, 4vw);
    box-sizing: border-box;
}

/* Wishlist & orders pages within account — don't double-pad */
.md-wishlist-wrap,
.md-orders-wrap {
    padding-left: 0;
    padding-right: 0;
}

/* Cart page */
.woocommerce-cart .woocommerce {
    padding-left: max(40px, 5vw);
    padding-right: max(40px, 5vw);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .woocommerce-checkout .woocommerce,
    .wp-block-woocommerce-checkout,
    .wc-block-checkout,
    .woocommerce-cart .woocommerce {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* ==========================================================================
   KLAVIYO FORM — fix internal spacing
   Root cause (confirmed via DevTools): the form's outer container has a
   fixed height and distributes rows with space-between, making each row
   ~82px tall. Fix: height:auto on the outer 2 levels only, and swap
   justify-content to flex-start. Do NOT touch display or flex-direction
   on individual rows — that breaks the horizontal [input][>] layout.
   ========================================================================== */

/* Newsletter column — nudged up, subtle left offset */
.footer-col.newsletter {
    margin-top: -14px !important;
    padding-top: 0 !important;
    margin-left: 60px !important;
}
.klaviyo-form-RkpE4U {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Level 1 — the injected wrapper div */
.klaviyo-form-RkpE4U > div {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Level 2 — the rows container (.needsclick) */
.klaviyo-form-RkpE4U > div > div {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
}

/* Level 3 rows — no extra padding */
.klaviyo-form-RkpE4U > div > div > div {
    padding: 0 !important;
    margin: 0 !important;
}

/* Level 3 — individual rows: only strip padding/margin, don't change display */
.klaviyo-form-RkpE4U > div > div > div {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Headings & paragraphs inside the form */
.klaviyo-form-RkpE4U h1,
.klaviyo-form-RkpE4U h2,
.klaviyo-form-RkpE4U h3,
.klaviyo-form-RkpE4U p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Strip Klaviyo's own box borders — input and button only */
.klaviyo-form-RkpE4U input[type="email"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Underline on the input itself */
    border-bottom: 1px solid rgba(10, 10, 10, 0.35) !important;
    padding-bottom: 8px !important;
}

/* Button sits right of the input — no underline border */
.klaviyo-form-RkpE4U button[type="button"],
.klaviyo-form-RkpE4U button[type="submit"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    cursor: pointer !important;
}


/* Hide mobile-only drawer on all screen sizes by default;
   the @media block below restores display:block on mobile. */
#mobileSizeDrawer { display: none; }

/* ────────────────────────────────────────────────────────────
   SIZE CHART DRAWER — mobile (single-product-mobile.php only)
   Right-sliding panel, identical to the desktop globalDrawer.
   Reuses .drawer-inner, .drawer-close, .sg-* styles.
──────────────────────────────────────────────────────────── */

/* "Size | Size Chart ›" label row above the size grid */
.mob-size-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.mob-size-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0a0a;
}
.mob-sc-trigger {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a0a0a;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(10,10,10,0.40);
}

/* Dim overlay — separate from .drawer-overlay which is display:none on mobile.
   z-index 9450 — above mobile header (9000) and nav menu (9300). */
.mob-sc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 9450;
}
.mob-sc-overlay.active { opacity: 1; visibility: visible; }

/* Right-sliding panel — mirrors .drawer exactly, full-width on mobile.
   z-index 9500 — above mobile header (9000), menu (9300), and overlay (9450). */
.mob-sc-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9500;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: right 0.45s ease;
}
.mob-sc-drawer.active { right: 0; }

/* ================================================================
   MOBILE  ≤ 768px  —  Maison DRIÉA  ×  The Row
   Built from zero. Every rule here is the source of truth for
   phones and portrait tablets.
================================================================ */
@media (max-width: 768px) {

    /* ────────────────────────────────────────────────────────
       WISHLIST — mobile: 2-col grid, still portrait images
    ──────────────────────────────────────────────────────── */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    .wishlist-remove-btn { opacity: 1; } /* always visible on mobile */

    /* YITH table: slightly smaller images on mobile */
    .yith-wcwl-wishlist-shortcode .shop_table td img,
    .yith-wcwl-wishlist-shortcode table img {
        width: 64px !important;
        height: 85px !important;
    }

    /* ────────────────────────────────────────────────────────
       BODY
    ──────────────────────────────────────────────────────── */
    body {
        padding-top: 56px;
        font-size: 13px;
    }

    /* Hero pages: 56px header + 20px intentional gap */
    body.has-hero,
    body.page-template-page-our-ethos-php {
        padding-top: 76px;
    }

    /* Account page hero is full-bleed */
    body.woocommerce-account {
        padding-top: 0;
    }

    /* ────────────────────────────────────────────────────────
       HEADER — static, always white on mobile
    ──────────────────────────────────────────────────────── */
    .site-header {
        height: 56px;
        padding: 0 20px;
        z-index: 9000;
        /* Always opaque — no transparent/dynamic state on mobile */
        background: #ffffff !important;
        border-bottom: 1px solid rgba(10,10,10,0.08) !important;
        box-shadow: none !important;
    }

    /* Logo always dark on mobile — slightly larger than before */
    .logo img {
        height: 32px;
        filter: none !important;
    }

    .header-right {
        gap: 10px !important;
    }

    .header-right .header-icon-svg {
        color: #0a0a0a !important;
    }

    /* Hamburger bars always dark */
    .menu-toggle-bar {
        background: #0a0a0a !important;
    }

    /* Cart count always dark */
    .cart-count {
        color: #0a0a0a !important;
        font-size: 11px;
    }

    /* Logo — centred via absolute positioning (unchanged) */
    .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Hamburger: lifted above hero GPU layer, no tap delay */
    #menuToggle {
        position: relative;
        z-index: 9100;
        touch-action: manipulation;
    }

    /* Search + cart: same treatment */
    #searchToggle,
    #cartToggle,
    .header-right a {
        touch-action: manipulation;
    }

    /* Mobile search icon moved back to right side — hide the left-side one */
    .header-search-mobile  { display: none !important; }
    .header-search-desktop {
        display: flex !important;
        align-items: center;
        width: auto !important;
        height: auto !important;
    }

    /* Lock all header-right images to 18×18 on mobile */
    .header-right img {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        filter: none !important;
        max-width: none !important;
    }

    /* Wishlist stays out of header on mobile — lives inside nav drawer */
    .header-wishlist-desktop { display: none !important; }

    /* Show wishlist link inside side menu on mobile */
    .menu-wishlist-mobile { display: block !important; }

    /* Sticky toolbar adjusts to shorter header */
    .shop-toolbar {
        top: 56px;
    }

    /* ────────────────────────────────────────────────────────
       HOMEPAGE HERO VIDEO — mobile: full-width, uncropped, natural ratio.
    ──────────────────────────────────────────────────────── */
    .hero {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        box-sizing: border-box;
        overflow: visible !important;
        pointer-events: none;
    }

    .hero video,
    .hero img {
        position: static !important;
        inset: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        object-fit: contain !important;
        pointer-events: none;
    }

    /* ────────────────────────────────────────────────────────
       ETHOS HERO VIDEO — mobile: full-width, same as homepage hero.
    ──────────────────────────────────────────────────────── */
    .ethos-hero {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .ethos-hero video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        pointer-events: none;
    }

    /* ────────────────────────────────────────────────────────
       ETHOS 2ND VIDEO — mobile: same as ethos-hero.
    ──────────────────────────────────────────────────────── */
    .ethos-full-video {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .ethos-full-video video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        pointer-events: none;
    }

    /* ────────────────────────────────────────────────────────
       HEADER — remove account icon on mobile
    ──────────────────────────────────────────────────────── */
    .header-right a[aria-label="Account"] {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────
       SIDE MENU — full-screen white overlay
       On mobile the side-menu IS the overlay: it covers the
       entire viewport including the header, fades in cleanly
       without any slide animation.
    ──────────────────────────────────────────────────────── */

    /* Background dim: hidden on mobile — the side-menu covers everything */
    .menu-overlay {
        display: none !important;
    }

    /* Full-screen overlay: covers header + page, fades in */
    .side-menu {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #ffffff !important;
        padding: 28px 28px 40px !important;
        overflow-y: auto !important;
        /* Fade in instead of slide — feels like a true overlay */
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 9300 !important;
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .side-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Header row: "CLOSE ×" */
    .menu-header {
        padding-bottom: 24px;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(10,10,10,0.10) !important;
    }

    #closeMenu,
    .menu-header .search-close {
        color: #0a0a0a !important;
        font-size: 11px !important;
        letter-spacing: 0.20em !important;
        text-transform: uppercase !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer;
        font-family: inherit;
    }

    /* Nav list — border on top of first item */
    .menu-links .menu-list {
        border-top: 1px solid rgba(10,10,10,0.10);
    }

    /* Each list item: divider below */
    .menu-links li {
        border-bottom: 1px solid rgba(10,10,10,0.10);
        margin: 0 !important;
    }

    /* Links: dark, uppercase, flex row with chevron */
    .menu-links a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: #0a0a0a !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        padding: 14px 0 !important;
        text-decoration: none !important;
        opacity: 1 !important;
    }

    /* Chevron › on the right */
    .menu-links a::after {
        content: '\203A'; /* › */
        font-size: 16px;
        font-weight: 300;
        color: rgba(10,10,10,0.35);
        line-height: 1;
        flex-shrink: 0;
        margin-left: 16px;
    }

    /* Wishlist & Contact — shown in menu, same style */
    .menu-wishlist-mobile,
    .menu-contact-mobile {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: none !important;
    }

    .menu-wishlist-mobile li,
    .menu-contact-mobile li {
        border-bottom: 1px solid rgba(10,10,10,0.10);
        margin: 0 !important;
    }

    .menu-wishlist-mobile a,
    .menu-contact-mobile a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        color: #0a0a0a !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        padding: 14px 0 !important;
        text-decoration: none !important;
    }

    .menu-wishlist-mobile a::after,
    .menu-contact-mobile a::after {
        content: '\203A';
        font-size: 16px;
        font-weight: 300;
        color: rgba(10,10,10,0.35);
        line-height: 1;
        flex-shrink: 0;
        margin-left: 16px;
    }

    /* Footer logo: no inversion needed on white background */
    .menu-footer img {
        filter: none !important;
    }

    /* ────────────────────────────────────────────────────────
       SEARCH OVERLAY — full-screen overlay (covers header too)
    ──────────────────────────────────────────────────────── */
    .search-overlay {
        inset: 0 !important;
        flex-direction: column;
        /* Sits above the header (z-index 9000) and menu (9300) */
        z-index: 9400 !important;
        /* Fade in, no slide */
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .search-drawer {
        width: 100%;
        min-width: unset;
        max-width: unset;
        /* Full height — covers header */
        height: 100vh !important;
        height: 100dvh !important;
        transform: none !important;
        z-index: 9401 !important;
    }

    /* Results panel hidden on mobile — Enter sends to shop page */
    .search-results-panel {
        display: none;
    }

    /* ── Mobile live text suggestions (Myntra-style list) ── */
    #searchMobileSuggestions {
        margin-top: 4px;
    }

    #searchMobileSuggestions ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #searchMobileSuggestions li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    #searchMobileSuggestions li a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 0;
        font-size: 12px;
        letter-spacing: 0.06em;
        color: #000;
        text-decoration: none;
        text-transform: uppercase;
    }

    #searchMobileSuggestions li a .sugg-search-icon {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        opacity: 0.35;
    }

    #searchMobileSuggestions li a .sugg-text em {
        font-style: normal;
        font-weight: 700;
    }

    /* ────────────────────────────────────────────────────────
       HOMEPAGE SPLIT EDITORIAL — overlay labels on mobile
    ──────────────────────────────────────────────────────── */
    .overlay-text--left {
        bottom: 12px;
        left: 12px;
    }

    .overlay-text--left-cta {
        bottom: 12px;
        right: 12px;
    }

    .overlay-text .title {
        font-size: clamp(18px, 5vw, 28px);
        letter-spacing: 0.10em;
    }

    .overlay-text .cta {
        font-size: 11px;
        letter-spacing: 0.18em;
    }

    .center-text {
        font-size: clamp(16px, 5.5vw, 26px);
        letter-spacing: 0.12em;
        white-space: normal;
        text-align: center;
        width: 85%;
    }

    /* CART DRAWER mobile rules moved to the @media (max-width: 1024px) block
       at the end of this file — see "CART DRAWER — MOBILE & TABLET" */

    /* ────────────────────────────────────────────────────────
       PRODUCT INFO DRAWER (details / size guide / care)
    ──────────────────────────────────────────────────────── */
    .drawer {
        width: 100%;
        right: -100%;
    }

    .drawer-inner {
        padding: 36px 24px 48px;
    }

    /* ────────────────────────────────────────────────────────
       GENERAL MAIN
    ──────────────────────────────────────────────────────── */
    main {
        padding: 0;
    }

    /* ────────────────────────────────────────────────────────
       SHOP / COLLECTION HERO
    ──────────────────────────────────────────────────────── */
    .shop-hero {
        padding: 36px 20px 28px;
        border-bottom: 1px solid rgba(10,10,10,0.07);
    }

    .shop-eyebrow {
        font-size: 9px;
        letter-spacing: 0.28em;
        margin-bottom: 12px;
    }

    .shop-hero h1 {
        font-size: clamp(22px, 7vw, 36px);
        letter-spacing: 0.14em;
    }

    .shop-description {
        font-size: 11px;
        margin-top: 12px;
        letter-spacing: 0.06em;
    }

    /* ────────────────────────────────────────────────────────
       SHOP TOOLBAR — sticky under shorter header
    ──────────────────────────────────────────────────────── */
    .shop-toolbar {
        padding: 12px 20px;
        gap: 0;
        top: 56px;
    }

    /* Category pills: horizontal scroll, no wrapping */
    .shop-cats {
        flex: 1;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-right: 12px;
        padding-bottom: 1px;
    }

    .shop-cats a {
        font-size: 10px;
        letter-spacing: 0.16em;
        flex-shrink: 0;
    }

    /* Sort button */
    .sr-filter-btn {
        font-size: 10px;
        letter-spacing: 0.16em;
        white-space: nowrap;
    }

    /* Sort panel: slide up from bottom of screen */
    .sr-sort-panel,
    .shop-sort-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        border-top: 1px solid rgba(10,10,10,0.08) !important;
        border-radius: 0 !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.06) !important;
        z-index: 8000 !important;
        background: #fff !important;
        padding: 20px 24px 40px !important;
    }

    /* ────────────────────────────────────────────────────────
       PRODUCT GRIDS
    ──────────────────────────────────────────────────────── */

    /* ── Shop page & search: 2-column ── */
    .collection-page .product-row ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 20px 12px 64px !important;
        max-width: 100% !important;
    }

    /* ── Category / collection pages: 1-column editorial ── */
    body.tax-product_cat .collection-page .product-row ul.products,
    body.tax-product_cat .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 52px !important;
        padding: 28px 20px 72px !important;
    }

    /* Product card — base */
    .woocommerce ul.products li.product,
    .collection-page .product-row ul.products li.product {
        text-align: left;
    }

    .woocommerce ul.products li.product h2,
    .collection-page .product-row ul.products li.product h2 {
        font-size: 10px;
        letter-spacing: 0.10em;
        margin-top: 10px;
        padding: 0 8px;
        text-transform: uppercase;
    }

    .woocommerce ul.products li.product .price,
    .collection-page .product-row ul.products li.product .price {
        font-size: 10px;
        margin-top: 3px;
        padding: 0 8px 8px;
    }

    /* Category page cards: centered, more breathing room */
    body.tax-product_cat .woocommerce ul.products li.product,
    body.tax-product_cat .collection-page .product-row ul.products li.product {
        text-align: center;
    }

    body.tax-product_cat .woocommerce ul.products li.product h2,
    body.tax-product_cat .collection-page .product-row ul.products li.product h2 {
        font-size: 11px;
        letter-spacing: 0.14em;
        padding: 0;
        margin-top: 16px;
    }

    body.tax-product_cat .woocommerce ul.products li.product .price,
    body.tax-product_cat .collection-page .product-row ul.products li.product .price {
        font-size: 11px;
        padding: 0;
        margin-top: 6px;
    }

    /* Product row margin reset */
    .product-row {
        margin: 0;
    }

    .collection-page .product-row .container {
        padding: 0;
        max-width: 100%;
    }

    /* Shop pagination */
    .shop-pagination {
        padding: 24px 20px 48px;
        text-align: center;
    }

    /* ────────────────────────────────────────────────────────
       RECOMMENDED — shown on mobile as a compact 3-col grid row
       (same visual rhythm as the Nocturne trio grid)
    ──────────────────────────────────────────────────────── */
    .recommended-desktop {
        display: block !important; /* visible on mobile */
        padding: 32px 16px 56px !important;
    }

    .recommended-desktop h3 {
        font-size: 10px !important;
        text-align: center !important;
        letter-spacing: 0.24em !important;
        margin-bottom: 24px !important;
    }

    /* Override desktop gap — tighter on mobile, 3 equal columns */
    .recommended-desktop ul.recommended-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px 6px !important;
    }

    /* Smaller product name + price on mobile */
    .recommended-desktop ul.recommended-products li.product h2,
    .recommended-desktop .product-title {
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
    }

    .recommended-desktop ul.recommended-products li.product .price {
        font-size: 9px !important;
        margin-top: 4px !important;
    }

    /* ────────────────────────────────────────────────────────
       PRODUCT SINGLE PAGE — gallery + accordion
    ──────────────────────────────────────────────────────── */
    .product-container {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    /* Gallery: horizontal scroll-snap carousel */
    .product-gallery {
        width: 100%;
        display: flex !important;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }
    .product-gallery::-webkit-scrollbar { display: none; }

    .gallery-item {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        aspect-ratio: 1707 / 2560;
    }

    /* Dot indicator strip */
    .gallery-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 14px 0 0;
    }

    /* Accordion drawers — inline, open downwards */
    .drawer-trigger {
        border-top: 1px solid rgba(10,10,10,0.10);
        padding: 18px 0;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
    }
    .drawer-trigger:last-of-type { border-bottom: 1px solid rgba(10,10,10,0.10); }

    .drawer-trigger .trigger-icon {
        font-size: 18px;
        font-weight: 300;
        line-height: 1;
        transition: transform 0.25s ease;
    }
    .drawer-trigger.open .trigger-icon {
        transform: rotate(45deg);
    }

    .accordion-body {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
        font-size: 12px;
        line-height: 1.85;
        color: #3a3a3a;
        padding: 0;
    }
    .accordion-body.open {
        max-height: none;
        opacity: 1;
        padding-bottom: 20px;
        overflow: visible;
    }

    .accordion-body .drawer-section-heading {
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin: 16px 0 8px;
        color: #0a0a0a;
    }
    .accordion-body .drawer-section-heading:first-child { margin-top: 4px; }

    /* Hide the overlay drawer on mobile — accordion replaces it */
    .drawer,
    .drawer-overlay { display: none !important; }

    /* ────────────────────────────────────────────────────────
       MOBILE SIZE & FIT — full-screen drawer (replaces accordion)
    ──────────────────────────────────────────────────────── */
    #mobileSizeDrawer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        padding: 28px 24px 48px;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 9999;
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #mobileSizeDrawer.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .mobile-size-close {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(10,10,10,0.10);
        padding: 0 0 20px;
        margin-bottom: 28px;
        font-size: 11px;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #0a0a0a;
        cursor: pointer;
        font-family: inherit;
    }
    .mobile-size-title {
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 400;
        margin: 0 0 20px;
        color: #0a0a0a;
    }

    .product-info {
        width: 100%;
        max-width: none;
        padding: 28px 20px 48px;
        box-sizing: border-box;
        position: static;
    }

    .product-info h1,
    .product-title-row h1 {
        font-size: 16px;
        letter-spacing: 0.06em;
    }

    .product-info .price {
        font-size: 14px;
    }

    .single_add_to_cart_button {
        padding: 16px;
        font-size: 11px;
        letter-spacing: 1.2px;
    }

    /* ────────────────────────────────────────────────────────
       SPLIT GRID (editorial two-panel images)
    ──────────────────────────────────────────────────────── */
    .split-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }

    /* ────────────────────────────────────────────────────────
       ETHOS PAGE
    ──────────────────────────────────────────────────────── */
    .ethos-hero-text h1 {
        font-size: 20px;
        letter-spacing: 0.22em;
        padding: 0 24px;
    }

    .ethos-hero-text p {
        font-size: 9px;
        letter-spacing: 0.26em;
    }

    .ethos-text {
        padding: 64px 24px;
    }

    .ethos-text h2 {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 36px;
    }

    .ethos-text p,
    .ethos-body-content p {
        font-size: 13px;
        line-height: 1.85;
    }


    .ethos-quote {
        padding: 80px 24px;
    }

    .ethos-quote h3 {
        font-size: 16px;
        line-height: 1.65;
    }

    /* ────────────────────────────────────────────────────────
       OUR STORY PAGE
    ──────────────────────────────────────────────────────── */
    .md-story-page {
        padding: 40px 44px 64px;
        min-height: auto;
        align-items: flex-start;
    }

    .md-story-inner {
        margin: 80px;
    }

    .md-story-inner p {
        font-size: 11px;
        line-height: 1.85;
    }

    /* ────────────────────────────────────────────────────────
       TTW PAGE (Travel the World)
    ──────────────────────────────────────────────────────── */
    .ttw-hero {
        height: 44vh;
        min-height: 260px;
    }

    .ttw-hero-text h1 {
        font-size: 20px;
        letter-spacing: 0.14em;
        padding: 0 20px;
    }

    .ttw-hero-text p {
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    .ttw-page {
        padding: 36px 20px 64px;
    }

    .ttw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 12px;
    }

    .ttw-item-title {
        font-size: 11px;
    }

    .ttw-item-meta {
        font-size: 9.5px;
    }

    /* ────────────────────────────────────────────────────────
       CONTACT PAGE
    ──────────────────────────────────────────────────────── */
    .contact-page {
        padding: 44px 20px 64px;
    }

    .contact-intro {
        font-size: 14px;
        margin-bottom: 44px;
    }

    /* CONTACT PAGE ONLY */
.contact-page .form-row,
.contact-form-wrap .form-row {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

    .form-group.full {
        margin-bottom: 28px;
    }

    .submit-btn {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    /* ────────────────────────────────────────────────────────
       FOOTER
    ──────────────────────────────────────────────────────── */
    .site-footer {
        padding: 0 20px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
        /* Reset the global margin-top: -20px that pushes row 1 h4 headings
           outside the footer boundary (covered by content above it) */
        margin-top: 0 !important;
        padding: 40px 0 32px !important;
        align-items: start;
    }

    /* Ensure every footer column h4 heading is always visible */
    .footer-inner .footer-col h4 {
        display: block !important;
        visibility: visible !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: #0a0a0a !important;
        margin: 0 0 16px !important;
    }

    /* Newsletter desktop column: hidden on mobile — drawer takes over */
    .footer-col.footer-newsletter-desktop,
    .footer-col.footer-newsletter,
    .footer-col.newsletter {
        display: none !important;
    }

    /* ── MOBILE NEWSLETTER DRAWER ────────────────────────────────────
       Accordion strip between footer grid and bottom bar.
       Mirrors the product-page drawer style.
    ──────────────────────────────────────────────────────────────── */
    .footer-nl-drawer {
        display: block;    /* override desktop display:none */
        border-top: 1px solid rgba(10,10,10,0.10);
        margin-top: 8px;
    }

    .footer-nl-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(10,10,10,0.10);
        padding: 18px 0;
        font-family: inherit;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #0a0a0a;
        cursor: pointer;
        text-align: left;
    }

    .footer-nl-chevron {
        width: 10px;
        height: 6px;
        flex-shrink: 0;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .footer-nl-trigger[aria-expanded="true"] .footer-nl-chevron {
        transform: rotate(180deg);
    }

    /* Body: collapsed by default via max-height + overflow */
    .footer-nl-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .footer-nl-body.open {
        max-height: 600px;
    }

    /* Inner content: centered, with breathing room */
    .footer-nl-inner {
        padding: 28px 0 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Klaviyo form inside the drawer: centered, full width */
    .footer-nl-inner .klaviyo-form-RkpE4U {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-nl-inner .klaviyo-form-RkpE4U > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: static !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .footer-inner h4 {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .footer-inner ul li {
        margin-bottom: 10px;
    }

    .footer-inner ul li a {
        font-size: 12px;
    }

    /* Footer bottom bar: 3 zones in one line */
    .footer-bottom {
        padding: 20px 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer-left  { flex: 1; }
    .footer-right { flex: 1; display: flex; justify-content: flex-end; padding-right: 36px; }

    .footer-center {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
    }

    .footer-bottom span {
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    .footer-bottom img {
        width: 26px;
    }

    .shipping-location-btn {
        font-size: 9px;
        letter-spacing: 0.10em;
        gap: 3px;
    }

    .sl-overlay {
        padding: 10px;
    }

    .sl-modal {
        max-width: none;
        padding: 64px 24px 34px;
    }

    .sl-modal-title {
        font-size: 20px;
    }

    .sl-modal-sub {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .sl-select {
        height: 62px;
        padding-left: 14px;
        padding-right: 66px;
    }

    .sl-select-wrap::after {
        right: 52px;
        height: 34px;
        top: 14px;
    }

    .sl-select-arrow {
        right: 22px;
    }

    .sl-validate-btn {
        padding: 19px 20px;
        font-size: 14px;
    }

    /* ────────────────────────────────────────────────────────
       WOOCOMMERCE — ACCOUNT PAGES
    ──────────────────────────────────────────────────────── */
    .woocommerce-account .woocommerce {
        padding: 0 20px;
    }

    /* ── Account nav → horizontal scrolling tab strip ──
       Mirrors the policy-pages tab pattern exactly.
    ───────────────────────────────────────────────────── */

    /* "Account" heading — hide in tab strip */
    .account-left h3 { display: none; }

    /* Strip sticky, white bar, scrollable */
    .account-left {
        position: sticky;
        top: 56px;
        z-index: 50;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 0;
        margin: 0 -20px 32px;   /* bleed to screen edges */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .account-left::-webkit-scrollbar { display: none; }

    /* Tabs in a single row */
    .account-left ul {
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        list-style: none;
        padding: 0 20px;
        margin: 0;
        gap: 0;
    }

    /* Each tab item */
    .account-left li,
    .account-left li:first-child {
        border-top: none;
        border-bottom: none;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    /* Tab link */
    .account-left a {
        display: block;
        padding: 14px 20px 12px 0;
        margin-right: 4px;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #0a0a0a;
        opacity: 0.4;
        text-decoration: none;
        border-bottom: 1.5px solid transparent;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        padding-left: 0 !important;
    }

    /* Kill the desktop left-bar animation on mobile */
    .account-left a::before { display: none !important; }

    /* Active + hover */
    .account-left li.active a,
    .account-left a:hover {
        opacity: 1;
        border-bottom-color: #0a0a0a;
        font-weight: 400;
    }

    /* ────────────────────────────────────────────────────────
       CART PAGE — mobile
    ──────────────────────────────────────────────────────── */
    .md-cart-page {
        padding: 36px 20px 80px;
    }

    .md-cart-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .md-cart-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    .md-summary-box {
        padding: 32px 24px;
    }

    .md-checkout-btn {
        padding: 18px;
        font-size: 10px;
    }

    /* ────────────────────────────────────────────────────────
       WISHLIST PAGE — mobile
    ──────────────────────────────────────────────────────── */
    .wishlist-grid {
        gap: 40px 16px;
    }

    /* ────────────────────────────────────────────────────────
       ORDER HISTORY — mobile
    ──────────────────────────────────────────────────────── */
    .account-orders {
        max-width: 100%;
    }

    .order-item {
        gap: 20px;
        padding: 28px 0;
    }

    .order-image {
        width: 72px;
    }

    .order-id {
        font-size: 10px;
    }

    .order-date,
    .order-total {
        font-size: 10px;
    }

    /* ────────────────────────────────────────────────────────
       CHECKOUT — mobile
    ──────────────────────────────────────────────────────── */
    .woocommerce-checkout .woocommerce {
        padding-top: 32px;
        padding-bottom: 80px;
    }

    .woocommerce-checkout form.woocommerce-checkout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .woocommerce-checkout #order_review {
        padding: 32px 20px;
    }

    /* ────────────────────────────────────────────────────────
       ORDER CONFIRMATION — mobile
    ──────────────────────────────────────────────────────── */
    .md-thankyou-page {
        padding: 48px 20px 80px;
    }

    .md-order-meta {
        grid-template-columns: repeat(2, 1fr);
        margin: 40px 0;
    }

    .md-order-meta__item:nth-child(2) {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }

    .md-order-meta__item:nth-child(3) {
        border-top: 1px solid rgba(0,0,0,0.08);
        padding-top: 20px;
        margin-top: -1px;
    }

    .md-thankyou-addresses {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .md-thankyou-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 48px;
    }

    .md-thankyou-btn {
        text-align: center;
        padding: 16px 20px;
    }

    /* ────────────────────────────────────────────────────────
       NOCTURNE PAGE — mobile layout
       Desktop layout hidden; mobile layout revealed.
    ──────────────────────────────────────────────────────── */

    /* Flip the dual-layout wrappers */
    .nocturne-desktop-layout { display: none !important; }
    .nocturne-mobile-layout  { display: block !important; }

    /* ── Collection intro (Sanskrit quote) ── */
    body.page-template-page-nocturne .collection-intro {
        padding: 60px 20px 28px;   /* extra top breathing room */
        text-align: center;
        margin: 0;
    }

    body.page-template-page-nocturne .collection-intro .sanskrit {
        font-size: 18px;
        margin-bottom: 8px;
    }

    body.page-template-page-nocturne .collection-intro p {
        font-size: 11px;
        letter-spacing: 0.06em;
        color: #777;
        margin: 4px 0 0;
    }

    /* ── Editorial image — side-padded with generous vertical breathing room ── */
    .nocturne-mobile-layout .editorial-contained {
        /* 24px left + right gap — breaks out of parent but leaves side margins */
        width: calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
        margin-left: calc(50% - 50vw + 24px) !important;
        margin-right: calc(50% - 50vw + 24px) !important;
        margin-top: 56px !important;
        margin-bottom: 56px !important;
        padding: 0 !important;
    }

    .nocturne-mobile-layout .editorial-contained .editorial-container,
    .nocturne-mobile-layout .editorial-contained > div {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .nocturne-mobile-layout .editorial-contained img {
        width: 100% !important;
        height: 72vh;
        object-fit: cover;
        object-position: center top;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── All product rows: strip section padding/margin ── */
    body.page-template-page-nocturne .product-row {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-template-page-nocturne .product-row .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    body.page-template-page-nocturne .product-row .woocommerce,
    body.page-template-page-nocturne .product-row .woocommerce > div {
        margin: 0;
    }

    /* Outer side padding for the mobile nocturne product sections */
    .nocturne-mobile-layout .product-row {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ── PAIRS: 2-col ── */
    body.page-template-page-nocturne .product-pair ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* ── TRIO: 3-col single row ── */
    body.page-template-page-nocturne .product-trio ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        padding: 10px 0 10px !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Product text — left-aligned, compact for both pair + trio */
    body.page-template-page-nocturne .product-row ul.products li.product {
        text-align: left;
    }

    body.page-template-page-nocturne .product-row ul.products li.product h2 {
        font-size: 9px;
        letter-spacing: 0.06em;
        margin-top: 8px;
        padding: 0 5px;
    }

    body.page-template-page-nocturne .product-row ul.products li.product .price {
        font-size: 9px;
        padding: 0 5px 8px;
        margin-top: 2px;
    }

    /* ── Split-grid at the very bottom ── */
    body.page-template-page-nocturne .split-grid {
        width: 100%;
        margin: 0;
        padding: 0;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        margin-top: 2px;
    }

    body.page-template-page-nocturne .split-grid img {
        width: 100%;
        height: auto !important;      /* full image, no crop */
        object-fit: unset !important;
        display: block;
    }

    /* ────────────────────────────────────────────────────────
       POLICY PAGES — horizontal tab strip (The Row style)
    ──────────────────────────────────────────────────────── */

    /* Collapse the two-column grid to a single column */
    .policy-layout {
        display: block;
        padding: 0;
        max-width: 100%;
    }

    /* Sidebar → sticky horizontal tab bar below the header */
    .policy-sidebar {
        position: sticky;
        top: 56px;
        z-index: 50;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 0 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .policy-sidebar::-webkit-scrollbar { display: none; }

    /* "Information" heading — hidden in tab strip */
    .policy-sidebar-heading { display: none; }

    /* Tabs in a single scrollable row */
    .policy-sidebar ul {
        display: flex;
        flex-direction: row;
        gap: 0;
        white-space: nowrap;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Each tab item — no dividers */
    .policy-sidebar li,
    .policy-sidebar li:first-child {
        border-top: none;
        border-bottom: none;
        flex-shrink: 0;
    }

    /* Tab link — reset desktop indent animation */
    .policy-sidebar a {
        display: block;
        padding: 14px 20px 12px 0;
        margin-right: 4px;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #0a0a0a;
        opacity: 0.4;
        text-decoration: none;
        border-bottom: 1.5px solid transparent;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        /* Kill the desktop left-bar animation */
        padding-left: 0 !important;
    }

    /* Remove the desktop animated dash */
    .policy-sidebar a::before { display: none !important; }

    /* Active + hover: full opacity, underline */
    .policy-sidebar li.active a,
    .policy-sidebar a:hover {
        opacity: 1;
        padding-left: 0 !important;
        border-bottom-color: #0a0a0a;
    }

    /* Content — full width, side padding */
    .policy-content {
        max-width: 100%;
        padding: 36px 20px 72px;
    }

    .policy-content h1,
    .policy-content h2 {
        font-size: 10px;
        letter-spacing: 0.18em;
        margin-bottom: 24px;
    }

    .policy-content h2 {
        margin-top: 36px;
    }

    .policy-content p,
    .policy-content li {
        font-size: 12px;
        line-height: 1.85;
    }

}

/* ==========================================================================
   CART PAGE — PRADA / LUXURY REDESIGN  (replaces old md-cart-page block)
   ========================================================================== */

/* Page shell */
.md-cart-page {
    padding: 48px 64px 140px;
    background: #f0f0ee;
    min-height: 60vh;
}

/* Two-column grid: items | summary */
.md-cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

/* "Shopping bag (2)" heading */
.md-cart-heading {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    margin: 0 0 40px;
}

/* Items: vertical list */
.md-cart-items {
    display: flex;
    flex-direction: column;
}

/* ── Each item: image left | meta right ── */
.md-cart-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Portrait image */
.md-cart-image {
    display: block;
    background: #e8e8e6;
    overflow: hidden;
    /* let height be driven by aspect-ratio */
}

.md-cart-image,
.md-cart-image img {
    aspect-ratio: 1707 / 2560;
    width: 100%;
}

.md-cart-image img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Meta column */
.md-cart-meta {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

/* Name + price on the same row */
.md-cart-name-price {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}

.md-cart-meta h2 {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0;
    color: #0a0a0a;
}

.md-cart-price {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    color: #0a0a0a;
}

/* Color, Size, Quantity */
.md-cart-attr {
    font-size: 13px;
    color: #555;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* Edit / Remove / Move to wishlist */
.md-cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 28px;
}

.md-cart-actions-left {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Shared link style */
.md-cart-link {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
}

.md-cart-link:hover { opacity: 0.5; }

/* Separator between Edit and Remove */
.md-cart-actions-left .md-cart-link + .md-cart-link {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.25);
}

/* "Move to wishlist" — muted, right-aligned */
.md-cart-link--muted {
    font-size: 13px;
    color: #aaa;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.md-cart-link--muted:hover { color: #0a0a0a; }

/* ── Summary panel ── */
.md-cart-summary {
    position: sticky;
    top: 100px;
}

.md-summary-box {
    background: #ffffff;
    padding: 28px 32px 0;
}

/* Subtotal row */
.md-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    padding-bottom: 28px;
}

/* Proceed to Checkout — solid black */
.md-checkout-btn {
    display: block;
    width: 100%;
    background: #0a0a0a;
    color: #ffffff;
    text-align: center;
    padding: 18px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.25s ease, color 0.25s ease;
    margin-bottom: 12px;
}

.md-checkout-btn:hover {
    background: #333333;
    color: #ffffff;
}

/* PayPal button */
.md-paypal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #ffffff;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.md-paypal-btn:hover { border-color: #0a0a0a; }

.md-paypal-logo {
    width: 54px;
    height: 14px;
    flex-shrink: 0;
}

/* Legal */
.md-summary-legal {
    font-size: 11px;
    color: #888;
    letter-spacing: 0.01em;
    line-height: 1.65;
    text-align: center;
    margin: 16px 0 0;
}

.md-summary-legal a {
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Divider */
.md-summary-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 28px 0 0;
}

/* ── Accordion ── */
.md-summary-accordion { margin-top: 0; }

.md-accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.md-accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: opacity 0.2s ease;
}

.md-accordion-trigger:hover { opacity: 0.65; }

.md-accordion-chevron {
    width: 14px;
    height: 8px;
    flex-shrink: 0;
    color: #0a0a0a;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-accordion-item--open .md-accordion-chevron {
    transform: rotate(180deg);
}

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

.md-accordion-body--open {
    max-height: 600px;
}

.md-accordion-body p {
    font-size: 12.5px;
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: #555;
    margin: 0 0 12px;
}

.md-accordion-body p:last-child { margin-bottom: 20px; }


/* ==========================================================================
   WISHLIST PAGE — LUXURY CARD GRID
   ========================================================================== */

/* ── Outer page container ── */
.md-wishlist-page-container,
.wishlist-page-outer {
    padding: 0;
    margin: 0;
}

.wishlist-shell-inner {
    padding: 0;
}

/* ── YITH form wrapper: remove default padding/border ── */
#yith-wcwl-form.yith-wcwl-form.woocommerce {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ── Wishlist page title — styled like shop-hero ── */
.wishlist-title-container {
    text-align: center;
    padding: 64px 40px 46px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.07);
    position: relative;
}

/* Eyebrow label above heading */
.wishlist-title-container::before {
    content: 'Maison Driéa';
    display: block;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 16px;
    font-family: inherit;
}

/* The "My wishlist" h2 — match shop-hero h1 scale */
.wishlist-title h2,
.yith-wcwl-form .wishlist-title h2 {
    margin: 0 !important;
    font-size: clamp(32px, 4.8vw, 68px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    color: #0a0a0a !important;
    font-family: inherit !important;
    text-transform: none !important;
}

/* Edit-title link — hide it (too admin-facing for storefront) */
.wishlist-title a.show-title-form {
    display: none !important;
}

/* ── Outer wrap — reset top padding since hero handles spacing ── */
.md-wishlist-wrap {
    padding: 56px 60px 100px !important;
}

/* "Wishlist (n)" heading — now hidden (title shown in hero above) */
.md-wishlist-heading {
    display: none;
}

/* ── Product card grid ── */
.md-wl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 24px;
}

/* Card */
.md-wl-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Image container */
.md-wl-card-img-wrap {
    position: relative;
    overflow: hidden;
    background: #f0f0ee;
    aspect-ratio: 1707 / 2560;
    width: 100%;
}

/* Image */
.md-wl-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.md-wl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity 0.35s ease;
}

.md-wl-card:hover .md-wl-card-img { opacity: 0.9; }

/* ── YITH wishlist button inside the card image (replaces custom heart) ── */
.md-wl-card-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    /* Strip all layout/spacing YITH adds */
    line-height: 1;
}

/* Hide every YITH wrapper element except the bare <a> / button */
.md-wl-card-wishlist-btn .yith-wcwl-add-to-wishlist,
.md-wl-card-wishlist-btn .yith-wcwl-add-button,
.md-wl-card-wishlist-btn .yith-wcwl-wishlistadded,
.md-wl-card-wishlist-btn .yith-wcwl-wishlistexists {
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

/* The actual link / button YITH renders */
.md-wl-card-wishlist-btn .yith-wcwl-add-button > a,
.md-wl-card-wishlist-btn .yith-wcwl-add-to-wishlist-button,
.md-wl-card-wishlist-btn .yith-wcwl-wishlistadded-text,
.md-wl-card-wishlist-btn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #0a0a0a !important;
    text-indent: -9999px !important; /* hide any label text */
    font-size: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.md-wl-card-wishlist-btn a:hover { opacity: 0.55 !important; }

/* YITH icon — show it at the right size */
.md-wl-card-wishlist-btn .yith-wcwl-add-button > a::before,
.md-wl-card-wishlist-btn a::before,
.md-wl-card-wishlist-btn .yith-wcwl-add-to-wishlist-button::before {
    font-size: 20px !important;
    text-indent: 0 !important;
    color: #0a0a0a !important;
    line-height: 1 !important;
}

/* If YITH uses an <img> icon instead of a font icon */
.md-wl-card-wishlist-btn img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    filter: brightness(0) !important; /* force black */
}

/* Card info */
.md-wl-card-info {
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Name */
.md-wl-card-name {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.md-wl-card-name:hover { opacity: 0.55; }

/* Price */
.md-wl-card-price {
    display: block;
    font-size: 13px;
    color: #0a0a0a;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}

/* ADD TO BAG button */
.md-wl-atc-btn {
    display: block;
    width: 100%;
    background: #0a0a0a;
    color: #ffffff;
    border: none;
    padding: 14px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.25s ease, color 0.25s ease;
    margin-top: auto;
}

.md-wl-atc-btn:hover {
    background: #333333;
    color: #ffffff;
}

.md-wl-atc-btn--oos {
    background: #cccccc;
    color: #fff;
    cursor: default;
}

.md-wl-atc-btn--oos:hover {
    background: #cccccc;
}

/* form reset */
.md-wl-atc-form {
    margin: 0;
}

/* ── Responsive: 3 cols on tablet ── */
@media (max-width: 1100px) {
    .md-wl-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }
}

/* ── Mobile cart ── */
@media (max-width: 768px) {
    .md-cart-page {
        padding: 32px 20px 80px;
    }

    .md-cart-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .md-cart-item {
        grid-template-columns: 120px 1fr;
        gap: 20px;
        padding: 28px 0;
    }

    .md-cart-heading {
        font-size: 13px;
        margin-bottom: 28px;
    }

    .md-summary-box {
        padding: 24px 20px 0;
    }

    .md-cart-meta h2 {
        font-size: 13px;
    }

    .md-cart-attr {
        font-size: 12px;
    }

    /* ── Mobile wishlist ── */
    .wishlist-title-container {
        padding: 44px 24px 32px;
    }

    .wishlist-title h2,
    .yith-wcwl-form .wishlist-title h2 {
        font-size: clamp(28px, 8vw, 48px) !important;
    }

    .md-wishlist-wrap {
        padding: 32px 20px 60px !important;
    }

    .md-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 12px;
    }

    .md-wishlist-heading {
        display: none;
    }

    .md-wl-atc-btn,
    .md-wishlist-add-btn {
        font-size: 10px;
        letter-spacing: 0.10em;
        padding: 12px 8px;
    }

}

/* ==========================================================================
   CART + WISHLIST — NEW TEMPLATE CLASS NAMES
   (md-cart-items-col / md-cart-summary-col / md-ct-* / md-wishlist-*)
   ========================================================================== */

/* ── Cart two-column shell ──────────────────────────────────────────────── */

/* Left column (items) */
.md-cart-items-col {
    min-width: 0;
}

/* Right column (totals sidebar — sticky) */
.md-cart-summary-col {
    position: sticky;
    top: 100px;
    align-self: start;
}

/* "Shopping bag (N)" count chip */
.md-cart-count {
    font-weight: 400;
    color: #777;
    margin-left: 4px;
}

/* ── Cart item card ─────────────────────────────────────────────────────── */

.md-cart-item {
    display: flex;
    flex-direction: row;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    align-items: flex-start;
}

.md-cart-item:first-child {
    padding-top: 0;
}

/* Thumbnail */
.md-cart-item-thumb {
    flex: 0 0 200px;
    width: 200px;
    background: #f0f0ee;
    overflow: hidden;
}

.md-cart-item-thumb a {
    display: block;
}

.md-cart-item-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1707 / 2560;
    object-fit: cover;
    object-position: top center;
}

/* Body (name, meta, actions) */
.md-cart-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

/* Name + price row */
.md-cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 12px;
}

/* Product meta (name, variation, qty) */
.md-cart-item-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.md-cart-item-name {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #0a0a0a;
    margin: 0 0 10px;
}

.md-cart-item-name a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.md-cart-item-name a:hover {
    opacity: 0.55;
}

/* WooCommerce variation output (dt = label, dd = value) */
.woocommerce-cart-form .variation {
    display: block;
    margin: 0 0 8px;
}

.woocommerce-cart-form .variation dt,
.woocommerce-cart-form .variation dd {
    display: inline;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #666;
    margin: 0;
    padding: 0;
}

.woocommerce-cart-form .variation dt::after {
    content: ': ';
}

.woocommerce-cart-form .variation dd::after {
    content: ' ';
}

/* Quantity label */
.md-cart-item-qty-label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #666;
    margin: 0 0 4px;
}

/* Price */
.md-cart-item-price {
    font-size: 14px;
    font-weight: 400;
    color: #0a0a0a;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Action links row */
.md-cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 24px;
}

.md-cart-item-actions-left {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Shared action link style */
.md-cart-action {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0,0,0,0.3);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s ease;
}

.md-cart-action:hover {
    opacity: 0.5;
    text-decoration-color: rgba(0,0,0,0.6);
}

/* Pipe separator between Edit and Remove */
.md-cart-action-pipe {
    display: inline-block;
    color: rgba(0,0,0,0.25);
    margin: 0 10px;
    font-size: 12px;
    line-height: 1;
    user-select: none;
}

/* "Move to wishlist" — muted, right side */
.md-cart-wishlist-link {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #aaa;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.md-cart-wishlist-link:hover {
    color: #0a0a0a;
}

/* ── Cart Totals sidebar (.md-cart-totals = .md-summary-box equivalent) ── */

.md-cart-totals {
    background: #ffffff;
    padding: 28px 28px 0;
}

/* Subtotal row */
.md-ct-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 0;
}

/* Generic coupon/fee/tax row */
.md-ct-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Coupon row — slightly smaller */
.md-ct-coupon .md-ct-label,
.md-ct-coupon .md-ct-value {
    font-size: 12px;
    color: #555;
}

/* Shared label/value */
.md-ct-label,
.md-ct-value {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #0a0a0a;
}

/* Checkout CTA area */
.md-ct-checkout-area {
    padding: 20px 0 0;
}

/* WooCommerce's built-in checkout button — restyle to luxury black */
.md-ct-checkout-area .checkout-button,
.md-ct-checkout-area a.checkout-button {
    display: block !important;
    width: 100% !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 18px 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 0.25s ease !important;
    margin-bottom: 12px !important;
}

.md-ct-checkout-area .checkout-button:hover,
.md-ct-checkout-area a.checkout-button:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

/* PayPal and other express buttons that plugins inject */
.md-ct-checkout-area .paypal-smart-button-container,
.md-ct-checkout-area .paypal-button-container,
.md-ct-checkout-area #payment_request_button,
.md-ct-checkout-area .wc-stripe-checkout-button {
    margin-top: 10px;
}

/* Terms and conditions note */
.md-ct-terms {
    font-size: 10.5px;
    color: #999;
    letter-spacing: 0.01em;
    line-height: 1.7;
    text-align: center;
    margin: 16px 0 0;
    padding: 0 4px;
}

.md-ct-terms a {
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Accordion panel ─────────────────────────────────────────────────────── */

.md-ct-accordions {
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

details.md-ct-accordion {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

summary.md-ct-accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #0a0a0a;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: opacity 0.2s ease;
}

summary.md-ct-accordion-toggle::-webkit-details-marker,
summary.md-ct-accordion-toggle::marker {
    display: none;
    content: '';
}

summary.md-ct-accordion-toggle:hover {
    opacity: 0.6;
}

/* CSS chevron arrow */
.md-ct-accordion-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #0a0a0a;
    border-bottom: 1.5px solid #0a0a0a;
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-bottom: 3px;
}

details.md-ct-accordion[open] .md-ct-accordion-chevron {
    transform: rotate(-135deg);
    margin-bottom: -3px;
}

/* Accordion body */
.md-ct-accordion-body {
    padding: 0 0 16px;
}

.md-ct-accordion-body p {
    font-size: 11.5px;
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: #666;
    margin: 0 0 8px;
}

.md-ct-accordion-body p:last-child {
    margin-bottom: 0;
}

/* Payment badge icons strip */
.md-ct-payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.md-payment-badge {
    display: block;
    width: 48px;
    height: 30px;
    flex-shrink: 0;
}

/* ── Wishlist grid ───────────────────────────────────────────────────────── */

/* Grid container (class used in wishlist-view.php) */
.md-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 24px;
}

/* Count chip */
.md-wishlist-count {
    font-weight: 400;
    color: #777;
    margin-left: 4px;
    font-size: inherit;
}

/* Individual card */
.md-wishlist-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Image wrapper */
.md-wishlist-card-image {
    position: relative;
    overflow: hidden;
    background: #f0f0ee;
    aspect-ratio: 1707 / 2560;
    width: 100%;
}

.md-wishlist-card-image a:first-child {
    display: block;
    width: 100%;
    height: 100%;
}

.md-wishlist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: opacity 0.35s ease;
}

.md-wishlist-card:hover .md-wishlist-card-image img {
    opacity: 0.88;
}

/* .md-wl-remove overlay removed — wishlist icon now lives inline with the product name */

/* Legacy heart class — kept for any other templates that reference it */
.md-wishlist-heart {
    display: none !important;
}

/* ── Name + wishlist star row (below image, same line) ── */
.md-wl-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.md-wl-name-row .md-wishlist-card-name {
    margin-bottom: 0; /* row handles spacing */
    flex: 1;
    min-width: 0;
}

/* Star wrapper — mirrors .product-title-row .yith-wishlist-btn-wrap */
.md-wl-star-wrap {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Strip every YITH wrapper layer */
.md-wl-star-wrap .yith-wcwl-add-to-wishlist,
.md-wl-star-wrap .yith-wcwl-add-button,
.md-wl-star-wrap .yith-wcwl-wishlistadded,
.md-wl-star-wrap .yith-wcwl-wishlistexists,
.md-wl-star-wrap .yith-wcwl-shortcode {
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    width: auto !important;
}

/* The actual <a> — match single-product transparent icon style exactly */
.md-wl-star-wrap .yith-wcwl-add-button > a,
.md-wl-star-wrap .yith-wcwl-add-to-wishlist-button,
.md-wl-star-wrap a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    transition: opacity 0.35s ease !important;
    color: #0a0a0a !important;
    font-size: 14px !important;
}

.md-wl-star-wrap a:hover {
    opacity: 0.45 !important;
    background: transparent !important;
}

/* Hide verbose YITH text labels — icon only */
.md-wl-star-wrap .yith-wcwl-add-button > a span,
.md-wl-star-wrap a span {
    display: none !important;
}

/* Font icon glyph (::before) */
.md-wl-star-wrap .yith-wcwl-add-button > a::before,
.md-wl-star-wrap a::before {
    color: #0a0a0a !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: block !important;
}

/* Image icon fallback */
.md-wl-star-wrap img {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    filter: brightness(0) !important;
}

/* Custom "Add to Cart" button for variable products */
.md-wishlist-add-btn {
    display: block !important;
    width: 100% !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 13px 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background 0.25s ease !important;
    line-height: 1 !important;
}

.md-wishlist-add-btn:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

/* Card info (below image) */
.md-wishlist-card-info {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Product name */
.md-wishlist-card-name {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #0a0a0a;
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.md-wishlist-card-name:hover {
    opacity: 0.55;
}

/* Price */
.md-wishlist-card-price {
    display: block;
    font-size: 13px;
    color: #0a0a0a;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}

/* Add to cart wrapper */
.md-wishlist-add-to-cart {
    margin-top: auto;
}

/* WooCommerce loop add-to-cart button — restyle to luxury black */
.md-wishlist-add-to-cart .add_to_cart_button,
.md-wishlist-add-to-cart a.button,
.md-wishlist-add-to-cart .single_add_to_cart_button {
    display: block !important;
    width: 100% !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 13px 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background 0.25s ease !important;
    line-height: 1 !important;
}

.md-wishlist-add-to-cart .add_to_cart_button:hover,
.md-wishlist-add-to-cart a.button:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

/* Out of stock state */
.md-wishlist-out-of-stock {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0;
    padding: 13px 0;
}

/* Pagination */
.md-wishlist-pagination {
    margin-top: 56px;
    text-align: center;
}

.md-wishlist-pagination a,
.md-wishlist-pagination span {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #0a0a0a;
    padding: 6px 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.md-wishlist-pagination .current,
.md-wishlist-pagination a:hover {
    border-color: rgba(0,0,0,0.2);
}

/* ── Responsive overrides for new class names ────────────────────────────── */

@media (max-width: 1200px) {
    .md-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 1024px) {
    .md-cart-layout {
        grid-template-columns: 1fr 320px;
        gap: 40px;
    }

    .md-cart-item-thumb {
        flex: 0 0 160px;
        width: 160px;
    }

    .md-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 16px;
    }
}

@media (max-width: 768px) {
    .md-cart-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .md-cart-summary-col {
        position: static;
    }

    .md-cart-item {
        gap: 20px;
        padding: 28px 0;
    }

    .md-cart-item-thumb {
        flex: 0 0 120px;
        width: 120px;
    }

    .md-cart-totals {
        padding: 24px 20px 0;
    }

    .md-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 12px;
    }

    .md-wishlist-card-name {
        font-size: 12px;
    }

    .md-wishlist-card-price {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .md-cart-item {
        gap: 16px;
        padding: 20px 0;
    }

    .md-cart-item-thumb {
        flex: 0 0 100px;
        width: 100px;
    }

    .md-cart-item-name {
        font-size: 13px;
    }

    .md-cart-item-price {
        font-size: 13px;
    }

    .md-cart-action,
    .md-cart-wishlist-link {
        font-size: 11px;
    }

    .md-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 10px;
    }
}

/* ==========================================================================
   CART DRAWER — MOBILE & TABLET  (≤ 1024 px)
   ──────────────────────────────────────────────────────────────────────────
   On small screens the drawer IS the overlay: it covers the entire viewport,
   fades in (no translate slide), and sits on top of everything — exactly
   like the nav-menu black overlay.  The separate dim layer behind it is
   hidden because the white drawer already blocks the page.

   The cart ICON in the header always navigates to the full cart PAGE.
   The drawer only opens programmatically after an "Add to Cart" action.
   ========================================================================== */
@media (max-width: 1024px) {

    /* Dim backdrop is redundant — white drawer covers everything */
    .cart-drawer-overlay {
        display: none !important;
    }

    /* Full-screen fade-in — no translateX slide */
    .cart-drawer {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Kill the desktop slide transform */
        transform: none !important;
        box-shadow: none !important;
        /* Fade in / out */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity  0.38s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .cart-drawer.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        /* Ensure the desktop translateX(0) doesn't accidentally slip through */
        transform: none !important;
    }

    /* Tighter padding inside on smaller viewports */
    .cd-header {
        padding: 20px 24px;
    }

    .cd-body {
        padding: 24px 24px 0;
    }

    .cd-footer {
        padding: 20px 24px 40px;
    }
}


/* ==========================================================================
   HIGH-PRECISION EDITORIAL HOMEPAGE LAYOUT
   Unified single-template system — desktop and mobile from one PHP file.
   ========================================================================== */

/* ── Reset & shell ───────────────────────────────────────────────────────── */

.homepage-main {
    width: 100%;
    overflow-x: hidden;
    background-color: #ffffff;
}

/* Every section: zero margin/padding, flush to edges */
.hp-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* kills inline whitespace gaps */
}

/* Universal media fill rule — contain so no heads/feet are cropped */
.hp-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center center;
}

/* ── Panel 1: Hero video ─────────────────────────────────────────────────── */

.hp-hero {
    width: 100%;
    /* Height driven by the video's natural aspect ratio */
    height: auto;
}

.hp-video-wrapper {
    width: 100%;
    line-height: 0;
}

.hp-video-wrapper .hp-media {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Panel 2: Split editorial (two equal columns, image-height driven) ───── */

.hp-split-editorial {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    width: 100%;
    /* Height follows the tallest image naturally */
    align-items: stretch;
}

.hp-split-block {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
}

.hp-split-block .hp-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ── Panel 3: Full-bleed marquee — image sets its own height ─────────────── */

.hp-full-editorial {
    width: 100%;
    height: auto;
}

.hp-full-block {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

.hp-full-block .hp-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ── Overlay text ────────────────────────────────────────────────────────── */

.hp-overlay-content {
    position: absolute;
    bottom: 10%;
    left: 8%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: normal;
    z-index: 2;
    pointer-events: none;
}

/* THE LIVING ARCHIVE: dead-center on the image */
.hp-overlay-content--centered {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    align-items: center;
}

.hp-title {
    font-family: 'Helvetica World', 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Desktop: 30px bold, Canva -15 tracking ≈ -0.05em at 30px */
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    /* Prada entrance: rise from blur */
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
    animation: hp-title-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.hp-cta {
    font-family: 'Helvetica World', 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 0.85vw, 13px);
    font-weight: 400;
    letter-spacing: 0.24em;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    width: fit-content;
    transition: border-color 0.35s ease;
    pointer-events: auto;
    /* Fade in after title settles */
    opacity: 0;
    animation: hp-cta-in 0.8s ease 0.9s forwards;
}

.hp-split-block:hover .hp-cta,
.hp-full-block:hover .hp-cta {
    border-bottom-color: rgba(255, 255, 255, 0.9);
}

/* ── Entrance keyframes ──────────────────────────────────────────────────── */

@keyframes hp-title-in {
    0%   { opacity: 0; transform: translateY(8px);  filter: blur(6px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes hp-cta-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Subtle image zoom on hover (desktop only) ───────────────────────────── */
.hp-split-block .hp-media,
.hp-full-block .hp-media {
    transition: transform 2.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-split-block:hover .hp-media,
.hp-full-block:hover .hp-media {
    transform: scale(1.03);
}

/* ── body.homepage: no top padding — hero goes full bleed ────────────────── */
body.homepage {
    padding-top: 0 !important;
}

/* ==========================================================================
   CHECKOUT PROGRESS BAR — Cart / Checkout / Confirmation
   ========================================================================== */
.md-co-bar {
    position: sticky;
    top: var(--co-hdr, 76px);
    z-index: 200;
    width: 100%;
    height: var(--co-bar, 52px);
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.09);
    display: flex;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}

.md-co-bar__inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.md-co-bar__brand {
    font-family: "Helvetica World","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 10px;
    letter-spacing: 0.35em;
    color: #0a0a0a;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
}

.md-co-bar__steps {
    display: flex;
    align-items: center;
    gap: 10px;
}

.md-co-bar__step {
    font-family: "Helvetica World","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #b0b0b0;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
}

.md-co-bar__step--on {
    color: #0a0a0a;
}

a.md-co-bar__step {
    transition: color 0.2s;
}

a.md-co-bar__step:hover {
    color: #0a0a0a;
}

.md-co-bar__sep {
    font-size: 10px;
    color: rgba(0,0,0,0.14);
}

@media (max-width: 768px) {
    .md-co-bar {
        top: 60px;
        height: 44px;
        padding: 0 20px;
    }

    .md-co-bar__brand {
        display: none;
    }

    .md-co-bar__inner {
        justify-content: center;
    }

    .md-co-bar__steps {
        gap: 8px;
    }

    .md-co-bar__step {
        font-size: 9px;
        letter-spacing: 0.16em;
    }
}
/* ============================================================
   CART / CHECKOUT / CONFIRMATION PROGRESS BAR
   Shared across cart, checkout and order confirmation.
============================================================ */

.md-co-bar__step,
.md-co-bar__sep {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .site-header,
    .site-header *,
    header,
    header * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .site-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .md-co-bar {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 90 !important;
        width: 100% !important;
        height: 46px !important;
        padding: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }

    .md-co-bar__inner {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: none !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }

    .md-co-bar__brand {
        display: none !important;
    }

    .md-co-bar__steps {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .md-co-bar__step,
    .md-co-bar__sep {
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 0.24em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TRUST ELEMENTS — PDP / Cart Drawer / Checkout
   Minimal luxury: no badges, no bright colours, small caps only.
═══════════════════════════════════════════════════════════════ */

/* ── PDP Trust Block (below Add to Cart) ──────────────────── */
.md-trust-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding: 18px 0;
    border-top: 1px solid rgba(0,0,0,0.09);
    border-bottom: 1px solid rgba(0,0,0,0.09);
    margin: 18px 0 0;
}

.md-trust-block__item {
    font-family: "Helvetica World","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #3a3a3a;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    white-space: nowrap;
}

.md-trust-block__item::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.5;
}

/* ── Policy link inside accordion drawers ─────────────────── */
.md-drawer-link {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0,0,0,0.3);
}
.md-drawer-link:hover {
    text-decoration-color: #0a0a0a;
}

/* ── Cart Drawer Reassurance Block ────────────────────────── */
.md-cart-trust {
    padding: 14px 0 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.md-cart-trust__item {
    font-family: "Helvetica World","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6a6a6a;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
}

.md-cart-trust__item::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 1px;
    background: #aaa;
    flex-shrink: 0;
}

/* ── Checkout Trust Strip ─────────────────────────────�