/* ============================================================================
 * DS BRAND Theme — assets/css/ds-system.css
 *
 * Full-site v2.2 design-system layer.
 *
 * This stylesheet is loaded AFTER theme.css and homepage.css so its rules
 * win the cascade on shared selectors. It maps the locked v2.2 visual system
 * (see tokens.css / shared.jsx / pages-*.jsx in the handoff) into theme-side
 * classes that work alongside the existing baseline.
 *
 * The baseline tokens (--clr-*, --font-base, --space-*) remain authoritative
 * for the homepage and shared chrome. The v2.2 token layer (--ds-*) is added
 * here for the inner pages (Shop, PDP, Cart, Checkout, Account, About,
 * Contact, FAQ, Policy, Order Tracking, Reviews).
 *
 * Sections in order:
 *   A.  v2.2 design tokens (mapped onto baseline tokens where they overlap)
 *   B.  Type / heading defaults inside .ds-page
 *   C.  Buttons (ds-btn) — primary, ghost, text, whatsapp, sale, sizes
 *   D.  Chips / pills / eyebrows / dividers / notices / stars
 *   E.  Form controls (ds-input, ds-label, qty stepper, radio/check tiles)
 *   F.  Cards / surfaces (ds-card, ds-card--soft, ds-card--accent)
 *   G.  Page hero / breadcrumb / section heads
 *   H.  Utility strip (top bar) and header chrome tweaks
 *   I.  Footer chrome (extended to 5-column v2.2 layout)
 *   J.  Trust strip, WhatsApp blocks, Advance Supplies handoff
 *   K.  Product card (.ds-product-card) — for shop archive / cross-sells
 *   L.  Category tile (.ds-cat-tile)
 *   M.  Shop archive (filter sidebar, toolbar, grid, pagination)
 *   N.  Product detail (gallery, info column, tabs, related)
 *   O.  Cart + Order summary
 *   P.  Checkout flow (progress, sections, payment tiles)
 *   Q.  Order complete (thank-you)
 *   R.  Account family (sidebar + auth shell)
 *   S.  Order tracking (tracker progress, lookup form, fail state)
 *   T.  FAQ page (groups, accordion)
 *   U.  Policy pages (TOC + readable column)
 *   V.  About / Contact pages
 *   W.  Reviews module
 *   X.  Empty states, 404, search
 *   Y.  Responsive (mobile breakpoints)
 *   Z.  Print
 * ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   A. v2.2 DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ---- DS BRAND green scale (oklch from handoff) ---- */
    --ds-green-900: oklch(0.32 0.08 152);
    --ds-green-800: oklch(0.42 0.12 152);
    --ds-green-700: oklch(0.48 0.14 152);
    --ds-green-600: oklch(0.55 0.15 152);
    --ds-green-500: oklch(0.62 0.15 152);
    --ds-green-300: oklch(0.82 0.10 152);
    --ds-green-100: oklch(0.94 0.05 152);
    --ds-green-50:  oklch(0.97 0.03 152);

    /* ---- WhatsApp ---- */
    --ds-wa:        #25D366;
    --ds-wa-dark:   #128C7E;

    /* ---- Neutrals (warm stone) ---- */
    --ds-ink-900: #0E1411;
    --ds-ink-700: #2A332D;
    --ds-ink-500: #5C685E;
    --ds-ink-400: #7D8881;
    --ds-ink-300: #A6AEA7;
    --ds-ink-200: #D9DCD7;
    --ds-ink-100: #ECEEEA;
    --ds-ink-50:  #F4F5F1;
    --ds-page:    #FAFAF7;
    --ds-surface: #FFFFFF;

    /* ---- Functional ---- */
    --ds-sale:    oklch(0.60 0.20 25);
    --ds-warn:    oklch(0.74 0.16 75);
    --ds-info:    oklch(0.58 0.14 232);
    --ds-success: var(--ds-green-600);

    /* ---- Type sizes ---- */
    --ds-display-lg: 72px;
    --ds-display:    56px;
    --ds-h1:         40px;
    --ds-h2:         28px;
    --ds-h3:         20px;
    --ds-body-lg:    17px;
    --ds-body:       15px;
    --ds-small:      13px;
    --ds-micro:      11px;

    /* ---- Spacing ---- */
    --ds-gutter:        24px;
    --ds-section-y:     96px;
    --ds-section-y-tight: 64px;
    --ds-card-pad:      20px;
    --ds-card-pad-lg:   28px;

    /* ---- Radii ---- */
    --ds-r-sm:  8px;
    --ds-r:     12px;
    --ds-r-lg:  20px;
    --ds-r-xl:  28px;
    --ds-r-full: 999px;

    /* ---- Shadows ---- */
    --ds-shadow-1: 0 1px 2px rgba(14, 20, 17, 0.04), 0 1px 3px rgba(14, 20, 17, 0.06);
    --ds-shadow-2: 0 6px 24px -8px rgba(14, 20, 17, 0.08), 0 2px 6px rgba(14, 20, 17, 0.04);
    --ds-shadow-3: 0 24px 48px -20px rgba(14, 20, 17, 0.18), 0 4px 12px rgba(14, 20, 17, 0.05);

    /* ---- Borders ---- */
    --ds-border:        1px solid #E6E8E2;
    --ds-border-strong: 1px solid #D6D8D1;

    /* ---- Motion ---- */
    --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ════════════════════════════════════════════════════════════════════════════
   B. PAGE SHELL DEFAULTS
   ════════════════════════════════════════════════════════════════════════════ */

.ds-page {
    background: var(--ds-page);
    color: var(--ds-ink-900);
    font-feature-settings: "ss01", "cv11";
}

.ds-page h1,
.ds-page h2,
.ds-page h3,
.ds-page h4 {
    color: var(--ds-ink-900);
    letter-spacing: -0.018em;
    margin: 0 0 var(--space-4);
}

.ds-page h1 { font-size: var(--ds-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.024em; }
.ds-page h2 { font-size: var(--ds-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.ds-page h3 { font-size: var(--ds-h3); font-weight: 600; line-height: 1.25; }

.ds-page p {
    color: var(--ds-ink-700);
    margin: 0 0 var(--space-3);
}

.ds-page p:last-child { margin-bottom: 0; }

.ds-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 48px);
    padding-right: clamp(20px, 4vw, 48px);
}

.ds-container--narrow { max-width: 1080px; }
.ds-container--reading { max-width: 880px; }


/* ════════════════════════════════════════════════════════════════════════════
   C. BUTTONS (ds-btn)
   ════════════════════════════════════════════════════════════════════════════ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s var(--ds-ease), border-color .18s var(--ds-ease), color .18s var(--ds-ease);
    white-space: nowrap;
    text-decoration: none;
}

.ds-btn:hover { text-decoration: none; }

.ds-btn--primary {
    background: var(--ds-green-600);
    color: #fff;
    border-color: var(--ds-green-600);
}
.ds-btn--primary:hover {
    background: var(--ds-green-700);
    border-color: var(--ds-green-700);
    color: #fff;
}

.ds-btn--ghost {
    background: var(--ds-surface);
    color: var(--ds-ink-900);
    border-color: var(--ds-ink-200);
}
.ds-btn--ghost:hover {
    border-color: var(--ds-ink-300);
    background: var(--ds-surface);
    color: var(--ds-ink-900);
}

.ds-btn--text {
    background: transparent;
    color: var(--ds-ink-900);
    padding: 10px 14px;
    border-color: transparent;
}
.ds-btn--text:hover { background: var(--ds-ink-50); color: var(--ds-ink-900); }

.ds-btn--whatsapp {
    background: var(--ds-wa);
    color: #fff;
    border-color: var(--ds-wa);
}
.ds-btn--whatsapp:hover {
    background: var(--ds-wa-dark);
    border-color: var(--ds-wa-dark);
    color: #fff;
}

.ds-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.ds-btn--lg { padding: 17px 26px; font-size: 15px; border-radius: 14px; }
.ds-btn--block { width: 100%; }

.ds-btn svg { flex-shrink: 0; width: 16px; height: 16px; }


/* ════════════════════════════════════════════════════════════════════════════
   D. CHIPS, PILLS, EYEBROWS, NOTICES
   ════════════════════════════════════════════════════════════════════════════ */

.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--ds-green-100);
    color: var(--ds-green-800);
}

.ds-chip--neutral { background: var(--ds-ink-100); color: var(--ds-ink-700); }
.ds-chip--sale    { background: oklch(0.95 0.05 25); color: var(--ds-sale); }
.ds-chip--oos     { background: var(--ds-ink-100); color: var(--ds-ink-500); }

.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    background: #fff;
    color: var(--ds-ink-700);
    border: 1px solid var(--ds-ink-200);
    cursor: pointer;
    text-decoration: none;
    transition: all .15s var(--ds-ease);
}
.ds-pill:hover {
    border-color: var(--ds-ink-400);
    color: var(--ds-ink-900);
    text-decoration: none;
}
.ds-pill--active,
.ds-pill.is-active {
    background: var(--ds-ink-900);
    color: #fff;
    border-color: var(--ds-ink-900);
}
.ds-pill--active:hover,
.ds-pill.is-active:hover { color: #fff; }

.ds-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-green-700);
    line-height: 1;
}
.ds-eyebrow--neutral { color: var(--ds-ink-500); }

.ds-divider {
    height: 1px;
    background: var(--ds-ink-100);
    border: 0;
    margin: 0;
}

.ds-stars {
    display: inline-flex;
    gap: 2px;
    color: oklch(0.80 0.15 75);
}
.ds-stars svg { width: 14px; height: 14px; }

.ds-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    background: var(--ds-green-100);
    color: var(--ds-green-800);
    border: 1px solid oklch(0.86 0.06 152);
}
.ds-notice--info { background: oklch(0.96 0.03 232); color: oklch(0.36 0.10 232); border-color: oklch(0.86 0.05 232); }
.ds-notice--warn { background: oklch(0.97 0.04 75); color: oklch(0.38 0.12 75); border-color: oklch(0.86 0.07 75); }


/* ════════════════════════════════════════════════════════════════════════════
   E. FORM CONTROLS
   ════════════════════════════════════════════════════════════════════════════ */

.ds-input,
.ds-page input[type="text"],
.ds-page input[type="email"],
.ds-page input[type="tel"],
.ds-page input[type="number"],
.ds-page input[type="password"],
.ds-page input[type="search"],
.ds-page input[type="url"],
.ds-page select,
.ds-page textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ds-ink-900);
    background: #fff;
    border: 1px solid var(--ds-ink-200);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s var(--ds-ease), box-shadow .15s var(--ds-ease);
    -webkit-appearance: none;
    appearance: none;
}

.ds-input:focus,
.ds-page input[type="text"]:focus,
.ds-page input[type="email"]:focus,
.ds-page input[type="tel"]:focus,
.ds-page input[type="number"]:focus,
.ds-page input[type="password"]:focus,
.ds-page input[type="search"]:focus,
.ds-page input[type="url"]:focus,
.ds-page select:focus,
.ds-page textarea:focus {
    border-color: var(--ds-green-600);
    box-shadow: 0 0 0 3px var(--ds-green-100);
}

.ds-input::placeholder,
.ds-page textarea::placeholder { color: var(--ds-ink-400); }

.ds-page textarea {
    min-height: 120px;
    resize: vertical;
}

.ds-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-ink-700);
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.ds-input-icon {
    position: relative;
}
.ds-input-icon .ds-input { padding-left: 42px; }
.ds-input-icon .ds-input-icon__svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-ink-500);
    pointer-events: none;
}

/* Quantity stepper */
.ds-qty {
    display: inline-flex;
    align-items: center;
    border: var(--ds-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.ds-qty__btn {
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ds-ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-qty__btn:hover { background: var(--ds-ink-50); color: var(--ds-ink-900); }
.ds-qty__value {
    width: 36px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

/* Radio / check tiles */
.ds-option-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: var(--ds-border);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s var(--ds-ease);
}
.ds-option-tile:hover { border-color: var(--ds-ink-300); }
.ds-option-tile.is-selected,
.ds-option-tile[aria-selected="true"] {
    border: 2px solid var(--ds-green-600);
    padding: 13px 17px;
}
.ds-option-tile__radio {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--ds-ink-300);
    background: #fff;
    position: relative;
    flex: 0 0 18px;
}
.ds-option-tile.is-selected .ds-option-tile__radio::after,
.ds-option-tile[aria-selected="true"] .ds-option-tile__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: var(--ds-green-600);
}

/* Checkbox row */
.ds-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ds-ink-700);
    cursor: pointer;
    line-height: 1.4;
}
.ds-check__box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--ds-ink-300);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 16px;
}
.ds-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ds-check input[type="checkbox"]:checked + .ds-check__box {
    background: var(--ds-green-600);
    border-color: var(--ds-green-600);
}
.ds-check input[type="checkbox"]:checked + .ds-check__box::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(0, -1px);
}


/* ════════════════════════════════════════════════════════════════════════════
   F. CARDS / SURFACES
   ════════════════════════════════════════════════════════════════════════════ */

.ds-card {
    background: var(--ds-surface);
    border: var(--ds-border);
    border-radius: var(--ds-r-lg);
    padding: var(--ds-card-pad-lg);
}
.ds-card--soft {
    background: var(--ds-ink-50);
    border-color: transparent;
}
.ds-card--accent {
    background: var(--ds-green-100);
    border-color: oklch(0.85 0.07 152);
}
.ds-card--padless { padding: 0; }
.ds-card--flush { padding: 4px 24px 24px; }


/* ════════════════════════════════════════════════════════════════════════════
   G. PAGE HERO / BREADCRUMB / SECTION HEADS
   ════════════════════════════════════════════════════════════════════════════ */

.ds-page-hero {
    padding: 40px 0 16px;
}
.ds-page-hero__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.ds-page-hero h1 {
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    line-height: 1.05;
    margin: 0;
}
.ds-page-hero p {
    margin-top: 10px;
    color: var(--ds-ink-500);
    font-size: 16px;
    max-width: 56ch;
}

/* Tinted category-archive hero band */
.ds-page-hero--tinted {
    padding: 40px 0 32px;
}

.ds-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ds-ink-500);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-crumb a {
    color: var(--ds-ink-500);
    text-decoration: none;
}
.ds-crumb a:hover { color: var(--ds-ink-900); }
.ds-crumb [aria-current="page"] {
    color: var(--ds-ink-900);
    font-weight: 600;
}
.ds-crumb__sep {
    color: var(--ds-ink-300);
}

.ds-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ds-section-head h2 { margin: 0; }
.ds-section-head p {
    color: var(--ds-ink-500);
    margin-top: 8px;
    max-width: 56ch;
}


/* ════════════════════════════════════════════════════════════════════════════
   H. UTILITY STRIP + HEADER CHROME
   ════════════════════════════════════════════════════════════════════════════ */

.ds-utility-strip {
    background: var(--ds-ink-900);
    color: oklch(0.86 0.04 152);
    font-size: 12px;
    letter-spacing: 0.02em;
}
.ds-utility-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 24px;
    flex-wrap: wrap;
    text-align: center;
}
.ds-utility-strip b { color: #fff; font-weight: 600; }
.ds-utility-strip .ds-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: oklch(0.62 0.14 152);
    display: inline-block;
}
.ds-utility-strip a {
    color: inherit;
    text-decoration: none;
}
.ds-utility-strip a:hover { color: #fff; }


/* ════════════════════════════════════════════════════════════════════════════
   I. FOOTER (5-column v2.2 layout for inner pages)
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * Note: the baseline footer (in theme.css) renders the existing 3-column
 * layout. We provide an extended 5-column layout for v2.2 templates that
 * pass `is_v2_footer` to footer.php (see footer.php for the toggle). The
 * baseline 3-column variant is preserved for backwards compatibility.
 */

.site-footer--v2 .site-footer__cols {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.site-footer--v2 .footer-col-title {
    color: #fff;
    margin-bottom: 16px;
}
.site-footer--v2 .footer-advance-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--ds-green-300);
    font-weight: 600;
    text-decoration: none;
}
.site-footer--v2 .footer-advance-link:hover { color: #fff; }


/* ════════════════════════════════════════════════════════════════════════════
   J. TRUST STRIP / WHATSAPP / ADVANCE HANDOFF
   ════════════════════════════════════════════════════════════════════════════ */

.ds-trust-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.ds-trust-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: var(--ds-border);
    border-radius: 12px;
}
.ds-trust-strip__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
}
.ds-trust-strip__icon svg { width: 18px; height: 18px; }
.ds-trust-strip__body { min-width: 0; }
.ds-trust-strip__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-ink-900);
}
.ds-trust-strip__desc {
    font-size: 12px;
    color: var(--ds-ink-500);
    line-height: 1.45;
    margin-top: 2px;
}

.ds-wa-block {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--ds-ink-900);
    color: #fff;
    border-radius: var(--ds-r-lg);
}
.ds-wa-block--compact { padding: 16px; }

.ds-wa-block__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ds-wa);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
}
.ds-wa-block--compact .ds-wa-block__icon { width: 40px; height: 40px; flex-basis: 40px; }
.ds-wa-block__icon svg { width: 22px; height: 22px; }
.ds-wa-block--compact .ds-wa-block__icon svg { width: 18px; height: 18px; }

.ds-wa-block__body { flex: 1; min-width: 0; }
.ds-wa-block__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}
.ds-wa-block--compact .ds-wa-block__title { font-size: 13px; }
.ds-wa-block__sub {
    font-size: 12px;
    color: oklch(0.78 0.02 152);
    margin: 2px 0 0;
}

.ds-advance-handoff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    background: var(--ds-ink-50);
    border: 1px dashed var(--ds-ink-200);
    border-radius: 12px;
}
.ds-advance-handoff--inline { padding: 14px 18px; }
.ds-advance-handoff__body {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ds-advance-handoff__body p {
    font-size: 13px;
    color: var(--ds-ink-700);
    margin: 0;
}
.ds-advance-handoff__body b { color: var(--ds-ink-900); }
.ds-advance-handoff__cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}
.ds-advance-handoff__cta:hover { color: var(--ds-green-700); text-decoration: none; }
.ds-advance-handoff__cta svg { width: 14px; height: 14px; }


/* ════════════════════════════════════════════════════════════════════════════
   K. PRODUCT CARD (.ds-product-card)
   ════════════════════════════════════════════════════════════════════════════ */

.ds-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.ds-product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-product-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ds-product-card {
    background: #fff;
    border: var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.ds-product-card:hover {
    box-shadow: var(--ds-shadow-2);
    transform: translateY(-2px);
}
.ds-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ds-ink-50);
    overflow: hidden;
}
.ds-product-card__media img,
.ds-product-card__media .ds-photo-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-product-card__media a { display: block; height: 100%; }
.ds-product-card__chips {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.ds-product-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: var(--ds-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-ink-700);
    cursor: pointer;
    z-index: 2;
    transition: color .15s var(--ds-ease);
}
.ds-product-card__wish:hover { color: var(--ds-sale); }
.ds-product-card__wish svg { width: 16px; height: 16px; }

.ds-product-card__body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.ds-product-card__cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-ink-500);
}
.ds-product-card__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-ink-900);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ds-product-card__title a {
    color: inherit;
    text-decoration: none;
}
.ds-product-card__title a:hover { color: var(--ds-green-700); }
.ds-product-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ds-ink-500);
}
.ds-product-card__price-row {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ds-product-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-ink-900);
}
.ds-product-card__price-old {
    font-size: 13px;
    color: var(--ds-ink-400);
    text-decoration: line-through;
}

.ds-product-card--compact .ds-product-card__body { padding: 12px 14px 16px; }


/* ════════════════════════════════════════════════════════════════════════════
   L. CATEGORY TILE
   ════════════════════════════════════════════════════════════════════════════ */

.ds-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.ds-cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: var(--ds-r-lg);
    background: oklch(0.96 0.04 200);
    color: var(--ds-ink-900);
    overflow: hidden;
    min-height: 200px;
    border: 1px solid oklch(0.88 0.05 200);
    text-decoration: none;
    transition: transform .15s var(--ds-ease), border-color .15s var(--ds-ease);
}
.ds-cat-tile:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--ds-ink-900);
}
.ds-cat-tile__halo {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    filter: blur(20px);
    pointer-events: none;
}
.ds-cat-tile__eyebrow {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ds-cat-tile__title {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}
.ds-cat-tile__cta {
    position: relative;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ds-cat-tile__cta svg { width: 14px; height: 14px; }


/* ════════════════════════════════════════════════════════════════════════════
   M. SHOP ARCHIVE (filter sidebar, toolbar, grid, pagination)
   ════════════════════════════════════════════════════════════════════════════ */

.ds-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: flex-start;
}

.ds-filters {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ds-filters__group h4,
.ds-filters__group .ds-filters__group-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ds-ink-900);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ds-filters__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ds-filters__clear {
    background: none;
    border: 0;
    font-size: 12px;
    color: var(--ds-ink-500);
    cursor: pointer;
    text-decoration: underline;
}
.ds-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-filters__list li > a,
.ds-filters__list li > span {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ds-ink-700);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s var(--ds-ease);
}
.ds-filters__list li > a:hover { background: var(--ds-ink-50); color: var(--ds-ink-900); }
.ds-filters__list li.is-current > a,
.ds-filters__list li.is-current > span {
    background: var(--ds-green-100);
    color: var(--ds-green-800);
    font-weight: 600;
}
.ds-filters__list-count {
    font-size: 12px;
    color: var(--ds-ink-400);
}
.ds-filters__check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-filters__check-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ds-ink-700);
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}
.ds-filters__check-list label .ds-check__box { flex-shrink: 0; }
.ds-filters__check-list label .ds-filters__check-label { flex: 1; }
.ds-filters__check-list label .ds-filters__check-count {
    font-size: 12px;
    color: var(--ds-ink-400);
}

.ds-size-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ds-size-grid__btn {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--ds-ink-700);
    border: var(--ds-border);
    cursor: pointer;
}
.ds-size-grid__btn.is-active {
    background: var(--ds-ink-900);
    color: #fff;
    border-color: var(--ds-ink-900);
}

.ds-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: #fff;
    border: var(--ds-border);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 12px;
}
.ds-shop-toolbar__count { font-size: 14px; color: var(--ds-ink-700); }
.ds-shop-toolbar__count b { color: var(--ds-ink-900); }
.ds-shop-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-shop-toolbar__sort label {
    font-size: 12px;
    color: var(--ds-ink-500);
    margin: 0;
}
.ds-shop-toolbar__sort select {
    width: auto;
    padding: 8px 36px 8px 14px;
    border-radius: 999px;
    border: var(--ds-border);
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900);
    cursor: pointer;
}

/* Pagination override */
.ds-page .navigation.pagination,
.ds-pagination {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ds-page .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-page .nav-links a,
.ds-page .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    border: var(--ds-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--ds-ink-700);
    text-decoration: none;
}
.ds-page .nav-links a:hover {
    border-color: var(--ds-ink-300);
    color: var(--ds-ink-900);
    background: #fff;
}
.ds-page .nav-links .current {
    background: var(--ds-ink-900);
    color: #fff;
    border-color: var(--ds-ink-900);
}

/* Mobile filter trigger */
.ds-mobile-filter-bar {
    display: none;
    gap: 8px;
    margin-bottom: 16px;
}
.ds-mobile-filter-bar > button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: var(--ds-border);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--ds-ink-900);
}


/* ════════════════════════════════════════════════════════════════════════════
   N. PRODUCT DETAIL
   ════════════════════════════════════════════════════════════════════════════ */

.ds-pdp {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: flex-start;
}

.ds-pdp__gallery {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px;
}
.ds-pdp__thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ds-pdp__thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: var(--ds-border);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    background: var(--ds-ink-50);
}
.ds-pdp__thumb.is-active { border: 2px solid var(--ds-green-600); }
.ds-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-pdp__main-image {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--ds-ink-50);
}
.ds-pdp__main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-pdp__info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ds-pdp__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ds-pdp__title {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}
.ds-pdp__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ds-ink-500);
}
.ds-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ds-pdp__price {
    font-size: 40px;
    font-weight: 700;
    color: var(--ds-ink-900);
}
.ds-pdp__price-old {
    font-size: 16px;
    color: var(--ds-ink-400);
    text-decoration: line-through;
}
.ds-pdp__tax-note {
    font-size: 12px;
    color: var(--ds-ink-500);
}

.ds-pdp__variations {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ds-pdp__var-group .ds-pdp__var-current {
    color: var(--ds-ink-400);
    font-weight: 500;
    margin-left: 6px;
}
.ds-pdp__var-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ds-pdp__var-card {
    flex: 1 1 120px;
    min-width: 100px;
    padding: 14px 16px;
    border-radius: 12px;
    border: var(--ds-border);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s var(--ds-ease);
}
.ds-pdp__var-card:hover { border-color: var(--ds-ink-300); }
.ds-pdp__var-card.is-selected {
    border: 2px solid var(--ds-green-600);
    padding: 13px 15px;
}
.ds-pdp__var-card-name { font-weight: 700; font-size: 14px; }
.ds-pdp__var-card-desc { font-size: 12px; color: var(--ds-ink-500); margin-top: 2px; }

.ds-pdp__cta-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}
.ds-pdp__cta-row .ds-btn { flex: 1; }
.ds-pdp__wish-btn {
    width: 56px;
    height: 52px;
    border-radius: 14px;
    border: var(--ds-border);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-ink-700);
}
.ds-pdp__wish-btn:hover { color: var(--ds-sale); border-color: var(--ds-ink-300); }

.ds-pdp__shipping-block {
    padding: 18px;
    background: var(--ds-ink-50);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ds-pdp__shipping-block .ds-trust-strip__icon { background: #fff; }

/* Long content */
.ds-pdp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: var(--ds-border);
    overflow-x: auto;
}
.ds-pdp-tabs button {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-ink-500);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
}
.ds-pdp-tabs button.is-active,
.ds-pdp-tabs button[aria-selected="true"] {
    color: var(--ds-ink-900);
    font-weight: 700;
    border-bottom-color: var(--ds-green-600);
}

.ds-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed var(--ds-ink-200);
    gap: 12px;
}
.ds-spec-row__label { font-size: 13px; color: var(--ds-ink-500); }
.ds-spec-row__value { font-size: 13px; font-weight: 600; text-align: right; }


/* ════════════════════════════════════════════════════════════════════════════
   O. CART + ORDER SUMMARY
   ════════════════════════════════════════════════════════════════════════════ */

.ds-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: flex-start;
}

.ds-cart-line {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: var(--ds-border);
}
.ds-cart-line:last-child { border-bottom: 0; }
.ds-cart-line__photo {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ds-ink-50);
}
.ds-cart-line__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-cart-line__cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-ink-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ds-cart-line__title {
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}
.ds-cart-line__title a {
    color: var(--ds-ink-900);
    text-decoration: none;
}
.ds-cart-line__title a:hover { color: var(--ds-green-700); }
.ds-cart-line__variant {
    font-size: 12px;
    color: var(--ds-ink-500);
    margin-top: 4px;
}
.ds-cart-line__controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ds-cart-line__remove {
    font-size: 12px;
    color: var(--ds-ink-500);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.ds-cart-line__remove:hover { color: var(--ds-sale); }
.ds-cart-line__price {
    font-weight: 700;
    font-size: 16px;
    align-self: flex-start;
}

.ds-summary {
    position: sticky;
    top: 90px;
}
.ds-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}
.ds-summary__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.ds-summary__rows .ds-summary__label { color: var(--ds-ink-500); }
.ds-summary__discount { color: var(--ds-green-700); }
.ds-summary__total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
}
.ds-summary__coupon-row {
    display: flex;
    gap: 8px;
}
.ds-summary__coupon-row input { font-size: 13px; }
.ds-summary__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ds-ink-500);
    margin-top: 16px;
}
.ds-summary__secure svg { width: 14px; height: 14px; }


/* ════════════════════════════════════════════════════════════════════════════
   P. CHECKOUT FLOW
   ════════════════════════════════════════════════════════════════════════════ */

.ds-checkout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    border-bottom: var(--ds-border);
    background: #fff;
    flex-wrap: wrap;
    gap: 12px;
}
.ds-checkout-header__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--ds-ink-500);
}
.ds-checkout-header__meta a {
    color: var(--ds-ink-700);
    text-decoration: underline;
}
.ds-checkout-header__meta svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}

.ds-checkout-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.ds-checkout-progress__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ds-ink-500);
}
.ds-checkout-progress__step.is-done,
.ds-checkout-progress__step.is-current {
    color: var(--ds-ink-900);
}
.ds-checkout-progress__step.is-current { font-weight: 700; }
.ds-checkout-progress__num {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--ds-ink-100);
    color: var(--ds-ink-500);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-checkout-progress__step.is-done .ds-checkout-progress__num,
.ds-checkout-progress__step.is-current .ds-checkout-progress__num {
    background: var(--ds-green-600);
    color: #fff;
}
.ds-checkout-progress__line {
    flex: 1;
    height: 1px;
    background: var(--ds-ink-200);
    max-width: 80px;
}
.ds-checkout-progress__line.is-done { background: var(--ds-green-600); }

.ds-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: flex-start;
}
.ds-checkout-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ds-checkout-section h2 {
    font-size: 20px;
    margin: 0 0 6px;
}
.ds-checkout-section__intro {
    font-size: 13px;
    color: var(--ds-ink-500);
    margin: 0;
}
.ds-checkout-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ds-checkout-grid-2 > .ds-span-2 { grid-column: span 2; }

.ds-payment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ds-payment-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: var(--ds-border);
    background: #fff;
    cursor: pointer;
}
.ds-payment-tile.is-selected {
    border: 2px solid var(--ds-green-600);
    padding: 13px 17px;
}
.ds-payment-tile__body { flex: 1; }
.ds-payment-tile__title { font-weight: 600; font-size: 14px; }
.ds-payment-tile__desc { font-size: 12px; color: var(--ds-ink-500); margin-top: 2px; }
.ds-payment-tile__logos {
    display: flex;
    gap: 6px;
}
.ds-payment-tile__logos span {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    background: var(--ds-ink-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-ink-500);
}
.ds-payment-note {
    font-size: 11px;
    color: var(--ds-ink-400);
    font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════════════
   Q. ORDER COMPLETE / THANK YOU
   ════════════════════════════════════════════════════════════════════════════ */

.ds-thanks {
    text-align: center;
    padding: 56px 0;
}
.ds-thanks__icon {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.ds-thanks__icon svg { width: 40px; height: 40px; }
.ds-thanks h1 { font-size: 40px; margin-top: 12px; }
.ds-thanks p { font-size: 16px; color: var(--ds-ink-500); margin-top: 12px; max-width: 56ch; margin-inline: auto; }

.ds-thanks-cards {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: left;
}

.ds-thanks-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════════════
   R. ACCOUNT FAMILY
   ════════════════════════════════════════════════════════════════════════════ */

.ds-account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: flex-start;
}

.ds-account-sidebar { position: sticky; top: 90px; }

.ds-account-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: var(--ds-border);
}
.ds-account-user__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--ds-green-600);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ds-account-user__name { font-weight: 700; font-size: 14px; }
.ds-account-user__meta { font-size: 11px; color: var(--ds-ink-500); }

.ds-account-nav {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ds-ink-700);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}
.ds-account-nav a:hover { background: var(--ds-ink-50); color: var(--ds-ink-900); }
.ds-account-nav a.is-active,
.ds-account-nav .is-active a {
    background: var(--ds-green-100);
    color: var(--ds-green-800);
    font-weight: 600;
}

/* Auth pages */
.ds-auth-shell {
    min-height: calc(100vh - var(--header-height));
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ds-page);
}
.ds-auth-shell__pane {
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
}
.ds-auth-shell__content {
    margin: auto;
    width: 100%;
    max-width: 420px;
}
.ds-auth-shell__art {
    position: relative;
    background: var(--ds-ink-900);
    overflow: hidden;
}
.ds-auth-shell__art-overlay {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    color: #fff;
}
.ds-auth-shell__art-overlay h2 {
    margin-top: 12px;
    font-size: 28px;
    color: #fff;
    line-height: 1.2;
}
.ds-auth-shell__art-overlay p {
    margin-top: 12px;
    font-size: 14px;
    color: oklch(0.86 0.04 152);
}

.ds-account-tracker {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-ink-500);
}
.ds-account-tracker__step.is-done { color: var(--ds-green-700); }
.ds-account-tracker-bar {
    margin-top: 6px;
    height: 4px;
    background: var(--ds-ink-100);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}
.ds-account-tracker-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--ds-green-600);
    border-radius: 999px;
}


/* ════════════════════════════════════════════════════════════════════════════
   S. ORDER TRACKING
   ════════════════════════════════════════════════════════════════════════════ */

.ds-order-tracker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    position: relative;
}
.ds-order-tracker__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
.ds-order-tracker__circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ds-ink-100);
    color: var(--ds-ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}
.ds-order-tracker__step.is-done .ds-order-tracker__circle,
.ds-order-tracker__step.is-current .ds-order-tracker__circle {
    background: var(--ds-green-600);
    color: #fff;
}
.ds-order-tracker__label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
}
.ds-order-tracker__time {
    font-size: 11px;
    color: var(--ds-ink-500);
}
.ds-order-tracker__line {
    position: absolute;
    left: 60%;
    right: -40%;
    top: 16px;
    height: 2px;
    background: var(--ds-ink-100);
}
.ds-order-tracker__step.is-done .ds-order-tracker__line { background: var(--ds-green-600); }


/* ════════════════════════════════════════════════════════════════════════════
   T. FAQ PAGE
   ════════════════════════════════════════════════════════════════════════════ */

.ds-faq-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: flex-start;
}

.ds-faq-nav {
    position: sticky;
    top: 90px;
}
.ds-faq-nav__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-ink-500);
    margin-bottom: 12px;
}
.ds-faq-nav__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-faq-nav__list a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ds-ink-700);
    text-decoration: none;
}
.ds-faq-nav__list a:hover { background: var(--ds-ink-50); color: var(--ds-ink-900); }
.ds-faq-nav__list a.is-active {
    background: var(--ds-green-100);
    color: var(--ds-green-800);
    font-weight: 600;
}

.ds-faq-group { margin-bottom: 32px; }
.ds-faq-group h2 {
    font-size: 22px;
    margin: 0 0 14px;
}

.ds-faq-item {
    padding: 20px 24px;
    background: #fff;
    border: var(--ds-border);
    border-radius: 12px;
    margin-bottom: 10px;
}
.ds-faq-item > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-ink-900);
}
.ds-faq-item > summary::-webkit-details-marker { display: none; }
.ds-faq-item > summary::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C685E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform .2s var(--ds-ease);
}
.ds-faq-item[open] > summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C685E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.ds-faq-item__body {
    margin-top: 12px;
    color: var(--ds-ink-700);
    font-size: 14px;
    line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════════════════
   U. POLICY PAGES
   ════════════════════════════════════════════════════════════════════════════ */

.ds-policy-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: flex-start;
}

.ds-policy-toc {
    position: sticky;
    top: 90px;
}
.ds-policy-toc__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-ink-500);
    margin-bottom: 12px;
}
.ds-policy-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-policy-toc__list a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ds-ink-500);
    text-decoration: none;
}
.ds-policy-toc__list a:hover { color: var(--ds-ink-900); background: var(--ds-ink-50); }

.ds-policy-body {
    max-width: 720px;
    color: var(--ds-ink-700);
    font-size: 15px;
    line-height: 1.7;
}
.ds-policy-body h2 {
    font-size: 26px;
    margin: 36px 0 12px;
    scroll-margin-top: 120px;
}
.ds-policy-body h2:first-child { margin-top: 0; }
.ds-policy-body p { margin: 0 0 12px; }
.ds-policy-body ul,
.ds-policy-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
}
.ds-policy-body li { margin: 4px 0; }

.ds-policy-meta {
    font-size: 12px;
    color: var(--ds-ink-400);
    font-family: ui-monospace, monospace;
    margin-top: 14px;
}


/* ════════════════════════════════════════════════════════════════════════════
   V. ABOUT / CONTACT
   ════════════════════════════════════════════════════════════════════════════ */

.ds-about-hero {
    padding: 64px 0 48px;
    background: linear-gradient(180deg, var(--ds-green-50), var(--ds-page));
}
.ds-about-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}
.ds-about-hero h1 {
    font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
    letter-spacing: -0.028em;
    line-height: 1.02;
    margin: 16px 0 0;
}
.ds-about-hero p {
    margin-top: 18px;
    font-size: 19px;
    color: var(--ds-ink-500);
    max-width: 54ch;
    line-height: 1.55;
}
.ds-about-hero__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ds-about-hero__media .ds-photo-box {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: var(--ds-ink-50);
    overflow: hidden;
}
.ds-about-hero__media .ds-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-about-story {
    padding: 64px 0;
}
.ds-about-story__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: flex-start;
}
.ds-about-story__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ds-ink-700);
    font-size: 16px;
    line-height: 1.65;
}

.ds-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ds-stat-card .ds-eyebrow { margin-bottom: 8px; }
.ds-stat-card__value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-ink-900);
}
.ds-stat-card__desc {
    font-size: 13px;
    color: var(--ds-ink-500);
    margin-top: 6px;
}

.ds-twobrand {
    padding: 36px;
}
.ds-twobrand__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.ds-twobrand__col + .ds-twobrand__col {
    padding-left: 40px;
    border-left: 1px dashed var(--ds-ink-200);
}
.ds-twobrand h3 { font-size: 24px; margin-top: 8px; }
.ds-twobrand ul {
    margin-top: 14px;
    padding-left: 18px;
    color: var(--ds-ink-700);
    font-size: 15px;
    line-height: 1.8;
}

.ds-contact-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: flex-start;
}

.ds-channel-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ds-channel-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ds-channel-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}
.ds-channel-card--whatsapp .ds-channel-card__icon {
    background: var(--ds-wa);
    color: #fff;
}
.ds-channel-card__icon svg { width: 18px; height: 18px; }
.ds-channel-card__title { font-weight: 700; font-size: 15px; }
.ds-channel-card__contact { font-size: 13px; color: var(--ds-ink-500); margin-top: 2px; }
.ds-channel-card__hours { font-size: 12px; color: var(--ds-ink-500); }


/* ════════════════════════════════════════════════════════════════════════════
   W. REVIEWS MODULE
   ════════════════════════════════════════════════════════════════════════════ */

.ds-reviews {
    padding: 36px;
    background: #fff;
    border: var(--ds-border);
    border-radius: var(--ds-r-lg);
}
.ds-reviews--embedded { padding: 32px; }
.ds-reviews__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}
.ds-reviews__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--ds-ink-50);
    font-weight: 700;
    font-size: 14px;
}
.ds-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ds-reviews__card {
    padding: 20px;
    background: var(--ds-ink-50);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ds-reviews__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ds-reviews__verified {
    font-size: 10px;
    color: var(--ds-ink-500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ds-reviews__quote {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ds-ink-700);
    margin: 0;
}
.ds-reviews__byline {
    margin-top: auto;
    font-size: 12px;
    color: var(--ds-ink-500);
}

.ds-reviews-fallback {
    padding: 32px;
    background: var(--ds-ink-50);
    border-radius: 12px;
    border: 1px dashed var(--ds-ink-200);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ds-reviews-fallback__icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #fff;
    color: var(--ds-ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ════════════════════════════════════════════════════════════════════════════
   X. EMPTY STATES / 404 / SEARCH
   ════════════════════════════════════════════════════════════════════════════ */

.ds-empty {
    padding: 56px;
    background: #fff;
    border-radius: var(--ds-r-xl);
    border: var(--ds-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ds-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ds-empty__icon svg { width: 28px; height: 28px; }
.ds-empty h1, .ds-empty h2 { font-size: 28px; margin: 0; }
.ds-empty p {
    color: var(--ds-ink-500);
    max-width: 52ch;
    margin: 0 auto;
}
.ds-empty__actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}


/* ════════════════════════════════════════════════════════════════════════════
   Y. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .ds-pdp { grid-template-columns: 1fr; }
    .ds-pdp__gallery { grid-template-columns: 1fr; }
    .ds-pdp__thumbs {
        flex-direction: row;
        order: 2;
        overflow-x: auto;
    }
    .ds-pdp__thumbs .ds-pdp__thumb { flex: 0 0 64px; aspect-ratio: 1 / 1; }
    .ds-pdp__main-image { order: 1; }

    .ds-shop-layout { grid-template-columns: 1fr; }
    .ds-filters {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 8px;
    }
    .ds-cart-layout { grid-template-columns: 1fr; }
    .ds-summary { position: static; }
    .ds-checkout-layout { grid-template-columns: 1fr; }
    .ds-account-layout { grid-template-columns: 1fr; }
    .ds-account-sidebar { position: static; }
    .ds-faq-layout { grid-template-columns: 1fr; }
    .ds-faq-nav { position: static; }
    .ds-policy-layout { grid-template-columns: 1fr; }
    .ds-policy-toc { position: static; }
    .ds-auth-shell { grid-template-columns: 1fr; }
    .ds-auth-shell__art { display: none; }
    .ds-about-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .ds-about-story__grid { grid-template-columns: 1fr; gap: 24px; }
    .ds-contact-layout { grid-template-columns: 1fr; }
    .ds-twobrand__grid { grid-template-columns: 1fr; }
    .ds-twobrand__col + .ds-twobrand__col {
        padding-left: 0;
        padding-top: 32px;
        border-left: 0;
        border-top: 1px dashed var(--ds-ink-200);
    }
    .ds-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-thanks-cards { grid-template-columns: 1fr; }
    .ds-product-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .ds-product-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ds-reviews__grid { grid-template-columns: 1fr; }

    .site-footer--v2 .site-footer__cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ds-mobile-filter-bar { display: flex; }
    .ds-filters { display: none; }
    .ds-filters.is-mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: #fff;
        padding: 16px;
        overflow-y: auto;
    }

    .ds-checkout-grid-2 { grid-template-columns: 1fr; }
    .ds-checkout-grid-2 > .ds-span-2 { grid-column: auto; }
    .ds-channel-grid { grid-template-columns: 1fr; }
    .ds-stat-grid { grid-template-columns: repeat(2, 1fr); }

    .ds-order-tracker {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ds-order-tracker__step { flex-direction: row; gap: 12px; text-align: left; }
    .ds-order-tracker__line { display: none; }

    .ds-cart-line {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "photo body"
            "price price";
        gap: 12px;
    }
    .ds-cart-line__photo { grid-area: photo; }
    .ds-cart-line__body { grid-area: body; }
    .ds-cart-line__price { grid-area: price; text-align: right; }

    .ds-pdp__price { font-size: 32px; }
    .ds-pdp__title { font-size: 28px; }

    .ds-page-hero h1 { font-size: 2rem; }

    .site-footer--v2 .site-footer__cols {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   Z. PRINT
   ════════════════════════════════════════════════════════════════════════════ */

@media print {
    .ds-utility-strip,
    .ds-wa-block,
    .ds-mobile-filter-bar,
    .site-header,
    .site-footer { display: none; }
    .ds-page { background: #fff; }
    .ds-card { box-shadow: none; border-color: #ccc; }
}


/* ════════════════════════════════════════════════════════════════════════════
   v2.2.2 — STABILIZATION OVERRIDES
   ────────────────────────────────────────────────────────────────────────────
   This block lives at the bottom of ds-system.css so it always wins the
   cascade. Every rule here documents the rendered bug it corrects.
   ════════════════════════════════════════════════════════════════════════════ */


/* ───────────── Shop archive grid (was: narrow strips) ─────────────
   Bug: WooCommerce's woocommerce.css applies `width: 22.05%; float: left`
   to `.woocommerce ul.products li.product` with higher specificity than
   `.ds-product-grid--3`. The result was vertical strips of cards spread
   across the row with massive gaps.
   Fix: scope under `.woocommerce` (specificity (0,2,2)) so we beat WC's
   own rules, and explicitly null float + width on each <li>. */

.woocommerce ul.products.ds-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products.ds-product-grid.ds-product-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.woocommerce ul.products.ds-product-grid::before,
.woocommerce ul.products.ds-product-grid::after {
    content: none;
    display: none;
}
.woocommerce ul.products.ds-product-grid > li.product {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
    list-style: none;
}
/* Keep the inner <article class="ds-product-card"> ratio constraints. */
.woocommerce ul.products.ds-product-grid > li.product > .ds-product-card {
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    .woocommerce ul.products.ds-product-grid,
    .woocommerce ul.products.ds-product-grid.ds-product-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 540px) {
    .woocommerce ul.products.ds-product-grid,
    .woocommerce ul.products.ds-product-grid.ds-product-grid--4 {
        grid-template-columns: 1fr;
    }
}


/* ───────────── My Account layout (was: collapsed narrow sidebar) ─────────────
   Bug: WC default woocommerce.css applies `float: left; width: 30%` to
   `.woocommerce-MyAccount-navigation` and `float: right; width: 68%` to
   `.woocommerce-MyAccount-content`. Inside our grid those percentages
   were taken of the grid cell (260px / main column) — the sidebar shrank
   to ~78px and the content's `width: 68%` left a huge empty right margin.
   Fix: neutralize the float/width inside the grid layout. */

.ds-account-layout .ds-account-sidebar,
.ds-account-layout .woocommerce-MyAccount-navigation {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0;
}
.ds-account-layout .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%;
    float: none;
    min-width: 0;
}
/* WC's own nav <ul> is flex-wrap; we render our own pill nav so silence the WC ul. */
.ds-account-layout .woocommerce-MyAccount-navigation > ul {
    display: none;
}
/* Hide stray <hr>s the WC default templates print between dashboard cards. */
.ds-account-layout .woocommerce-MyAccount-content > hr {
    display: none;
}


/* ───────────── Cart layout (was: narrow line items) ─────────────
   Bug: the form was nested inside page.php's `.ds-policy-body` (max-width
   720px). page.php now bypasses that wrapper on WC pages; this rule just
   hardens the inner grid against stray grid-item children. */

.woocommerce-cart-form.ds-cart-layout {
    /* Bring back grid even if a plugin filters in extra elements */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: flex-start;
}
.woocommerce-cart-form.ds-cart-layout > .ds-cart-main { min-width: 0; }
.woocommerce-cart-form.ds-cart-layout > .ds-summary { min-width: 0; }
/* Suppress any unexpected direct children of the form-grid (notice copies,
   plugin output) so they don't take a grid track and visually disrupt
   the two-column layout — they still occupy normal flow at the top. */
.woocommerce-cart-form.ds-cart-layout > :not(.ds-cart-main):not(.ds-summary):not(input):not(.ds-card) {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .woocommerce-cart-form.ds-cart-layout { grid-template-columns: 1fr; }
}


/* ───────────── Checkout layout (was: narrow + customer-zone notice) ─────────
   page.php fix gives the form full width. We also widen the order_review
   sidebar fallback in case the in-template grid is overridden by a plugin. */

.woocommerce-checkout {
    min-width: 0;
}
.woocommerce-checkout .ds-checkout-layout > .ds-checkout-main { min-width: 0; }


/* ───────────── Unified .ds-notice / WooCommerce notice system ─────────────
   Bug: WC injects a ::before pseudo-element with the notice icon, but the
   theme.css notice rules used `padding-left` that wasn't large enough,
   so the icon clipped the first letter of the message text. Order-tracking
   error notice had a stray fragment from the same overlap.
   Fix: rebuild all WooCommerce notices to share the .ds-notice visual
   language and route the WC ::before icon to a real left gutter. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message {
    list-style: none;
    margin: 0 0 16px;
    padding: 14px 18px 14px 48px;     /* room for the WC icon */
    border: 1px solid transparent;
    border-radius: 12px;
    border-left-width: 1px;            /* no slab bar; full rounded card */
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-ink-900);
    background: var(--ds-surface);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Success / message — green */
.woocommerce-message {
    background: var(--ds-green-100);
    color: var(--ds-green-800);
    border-color: oklch(0.86 0.06 152);
}
/* Info — blue */
.woocommerce-info {
    background: oklch(0.96 0.03 232);
    color: oklch(0.36 0.10 232);
    border-color: oklch(0.86 0.05 232);
}
/* Error — red */
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
    background: oklch(0.96 0.04 25);
    color: var(--ds-sale);
    border-color: oklch(0.86 0.07 25);
}

/* WC paints its checkmark / info / cross via a ::before pseudo-element
   that uses an icon font + absolute positioning. Pin it to the left gutter
   we reserved with padding-left:48px so it never overlaps the text. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    text-align: center;
    color: inherit;
    padding: 0;
    margin: 0;
}
/* Allow inline .button (Continue Shopping etc.) to live on the right */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
    align-self: center;
}
/* List notices (form validation errors) — one error per <li> */
.woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Drop WC's lurid background colours that themed sites often inherit. */
.ds-page .woocommerce-message,
.ds-page .woocommerce-info,
.ds-page .woocommerce-error {
    box-shadow: none;
}


/* ───────────── Hide WC shipping-zone debug notice on customer-facing pages ─────
   The "Customer matched zone …" notice is emitted by WooCommerce when shipping
   debug mode is enabled in `Settings → Shipping → Shipping options`. It is
   intended for admin debugging only and should never be seen by shoppers.
   This rule hides any WC notice whose visible text starts with
   "Customer matched zone" via the :has selector. If the host browser is too
   old for :has, the notice still renders but with our improved styling. */
.woocommerce-info[data-zone-debug],
.woocommerce-info:has(> code) {
    display: none !important;
}
/* JS-side guard adds .is-zone-debug to any notice that mentions the staging
   zone keyword — see ds_brand_filter_zone_debug_notice() in inc/woocommerce.php */
.woocommerce-info.is-zone-debug,
.woocommerce-message.is-zone-debug {
    display: none !important;
}


/* ───────────── WhatsApp block — narrow-context responsiveness ─────────
   Bug: in the account sidebar and below the policy TOC, the dark WhatsApp
   block compressed the text into vertical near-illegible columns because
   the inner row is `display: flex` with `gap:16px` and three rigid items.
   Fix: at narrow widths drop to a stacked layout so each row keeps
   readable line-length. */

.ds-wa-block {
    flex-wrap: wrap;
}
.ds-wa-block__body {
    min-width: 0;
}
@media (max-width: 480px), (container-width: small) {
    .ds-wa-block {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: left;
    }
    .ds-wa-block .ds-btn { align-self: flex-start; }
}
/* Width-driven stack when the block is dropped into a narrow column
   (account sidebar, faq sidebar, policy sidebar). */
.ds-account-sidebar .ds-wa-block,
.ds-faq-nav .ds-wa-block,
.ds-policy-toc .ds-wa-block {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: left;
}
.ds-account-sidebar .ds-wa-block .ds-btn,
.ds-faq-nav .ds-wa-block .ds-btn,
.ds-policy-toc .ds-wa-block .ds-btn {
    align-self: flex-start;
}


/* ───────────── WC default add-to-cart link inside .woocommerce-message ─────
   The "X has been added to your cart. [Continue shopping]" message renders
   the button as a WC `.button` link — ensure it matches our DS button look. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid var(--ds-ink-200);
    background: #fff;
    color: var(--ds-ink-900);
    text-decoration: none;
    white-space: nowrap;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    border-color: var(--ds-ink-300);
    background: #fff;
    color: var(--ds-ink-900);
}


/* ───────────── Product card — guard against WC injecting extra markup ─────
   When WC adds the standard loop add-to-cart button at the bottom of each
   <li.product> via woocommerce_template_loop_add_to_cart, it appears OUTSIDE
   the <article.ds-product-card>. We already removed that hook in
   inc/woocommerce.php; this rule hides any straggler that a plugin might
   re-add, keeping the card visual clean. */
.woocommerce ul.products.ds-product-grid > li.product > .added_to_cart,
.woocommerce ul.products.ds-product-grid > li.product > .add_to_cart_button,
.woocommerce ul.products.ds-product-grid > li.product > .button {
    display: none;
}


/* ───────────── Account dashboard layout (WC default content) ─────────
   The WC dashboard endpoint renders plain <p> + <nav> + WhatsApp block
   markup. Make sure long paragraphs flow naturally and don't get clipped
   by the grid cell. */
.ds-account-layout .woocommerce-MyAccount-content p {
    max-width: 64ch;
    line-height: 1.6;
}
.ds-account-layout .woocommerce-MyAccount-content .woocommerce-MyAccount-content {
    padding: 0;
}


/* ───────────── Order Tracking — hide WC heading duplication ─────────
   WC's [woocommerce_order_tracking] shortcode emits its own H2 "Track your
   order". We render our own page hero with H1, so suppress the inner H2
   to avoid two near-identical headings. */
.ds-page .track_order > h2:first-of-type {
    display: none;
}
.ds-page .track_order p {
    color: var(--ds-ink-700);
    margin-bottom: 12px;
}
.ds-page .track_order .form-row {
    margin-bottom: 14px;
}
.ds-page .track_order .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid var(--ds-green-600);
    background: var(--ds-green-600);
    color: #fff;
}
.ds-page .track_order .button:hover {
    background: var(--ds-green-700);
    border-color: var(--ds-green-700);
}


/* ───────────── Cart "Continue shopping" message — looser layout ─────
   The "X has been added to your cart" message holds a Continue Shopping
   button. On narrow viewports the button needs to fall under the text. */
@media (max-width: 600px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        align-items: flex-start;
    }
    .woocommerce-message .button,
    .woocommerce-info .button {
        margin-left: 0;
        margin-top: 4px;
    }
}


/* ───────────── Order Complete page — hide page.php breadcrumb chrome ─────
   For the order-received endpoint WP returns the Checkout page's title
   ("Checkout") via the_title(). page.php now skips that chrome on WC pages
   so this is mostly defensive. */
.woocommerce-order .ds-page > section:first-of-type > .ds-container > .ds-crumb {
    display: none;
}


/* ───────────── Reviews module fallback — hide by default in public ─────
   The reviews module renders an admin-only fallback unless real Google
   reviews data is configured (see ds_brand_reviews_module). This hides
   any literal "live reviews loading shortly" copy that may slip through. */
.ds-reviews-fallback[data-admin-only="1"]:not([data-show="1"]) {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   v2.2.3 — FUNCTIONAL FILTER DRAWER + SHARED FILTER FORM
   ────────────────────────────────────────────────────────────────────────────
   Companion CSS for assets/js/theme.js (Section 2) and
   woocommerce/archive-product.php (#ds-filters-form). The desktop sidebar
   and mobile drawer are the SAME form — only the visual chrome changes.
   ════════════════════════════════════════════════════════════════════════════ */

/* The shared form sits in the sidebar at desktop, and inside a slide-up
   drawer at mobile. Inputs / labels keep the same look. */
.ds-filters__form { display: flex; flex-direction: column; gap: 24px; }
.ds-filters__form .ds-filters__group { margin: 0; }

/* Apply / Clear footer */
.ds-filters__apply {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-ink-100);
}

/* Mobile-only chrome inside the drawer (close button row). Hidden by default. */
.ds-filters__mobile-head { display: none; }
.ds-filters__close {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: var(--ds-border);
    background: #fff;
    color: var(--ds-ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ds-filters__close:hover { color: var(--ds-ink-900); }

/* Backdrop is hidden by default; only painted when the drawer is open. */
.ds-filters__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 17, 0.5);
    z-index: 199;
}

/* Body lock when the drawer is open. */
body.ds-filters-locked {
    overflow: hidden;
}

@media (max-width: 767px) {
    /* Drawer styling — sits over content as a vertical sheet from the right.
       The base `.ds-filters { display:none }` in the responsive block already
       hides the sidebar at this width; .is-mobile-open re-shows it as a sheet. */
    .ds-filters.is-mobile-open {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 92vw);
        max-width: 100%;
        background: var(--ds-page);
        padding: 16px 20px 90px;
        z-index: 200;
        overflow-y: auto;
        box-shadow: -16px 0 32px -16px rgba(14, 20, 17, 0.2);
        animation: ds-drawer-in .22s var(--ds-ease);
    }
    .ds-filters.is-mobile-open .ds-filters__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 4px 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--ds-ink-100);
    }
    .ds-filters.is-mobile-open + .ds-filters__backdrop {
        display: block;
        animation: ds-fade-in .22s var(--ds-ease);
    }
    /* Make Apply button sticky to bottom of drawer */
    .ds-filters.is-mobile-open .ds-filters__apply {
        position: sticky;
        bottom: 0;
        margin-left: -20px;
        margin-right: -20px;
        padding: 12px 20px;
        background: #fff;
        border-top: 1px solid var(--ds-ink-100);
        box-shadow: 0 -8px 16px -8px rgba(14, 20, 17, 0.1);
    }
}

@keyframes ds-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes ds-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hide the backdrop element on desktop entirely. */
@media (min-width: 768px) {
    .ds-filters__backdrop { display: none !important; }
    .ds-filters__mobile-head { display: none !important; }
}

/* Mobile filter trigger — refine v2.2.2 styles. Sort button removed in
   v2.2.3 because mobile sort wasn't wired; native WC select still appears
   in the toolbar below. */
.ds-mobile-filter-bar > button {
    flex: 0 0 auto;
}




/* ════════════════════════════════════════════════════════════════════════════
   v2.4.2 — ENHANCEMENT PASS COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */


/* ───────────── Active filter chips ───────────── */

.ds-active-filters {
    background: var(--ds-ink-50);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 20px;
}
.ds-active-filters__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ds-active-filters__count {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ds-ink-500);
}
.ds-active-filters__clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-ink-700);
    background: transparent;
    border: var(--ds-border);
    padding: 5px 11px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .15s var(--ds-ease), color .15s var(--ds-ease);
}
.ds-active-filters__clear:hover {
    border-color: var(--ds-ink-400);
    color: var(--ds-ink-900);
    text-decoration: none;
}
.ds-active-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ds-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    background: var(--ds-ink-900);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--ds-ease);
    white-space: nowrap;
}
.ds-active-chip:hover {
    background: var(--ds-ink-700);
    color: #fff;
    text-decoration: none;
}
.ds-active-chip__x {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ds-active-chip__x svg { width: 10px; height: 10px; }

@media (max-width: 540px) {
    .ds-active-filters__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ds-active-filters__chips::-webkit-scrollbar { display: none; }
    .ds-active-chip { flex: 0 0 auto; }
}


/* ───────────── Contextual catalog utility bar ───────────── */

.ds-catalog-utility {
    position: sticky;
    top: var(--header-height, 68px);
    z-index: 50;
    background: rgba(250, 250, 247, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: var(--ds-border);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .22s var(--ds-ease), transform .22s var(--ds-ease);
}
.ds-catalog-utility.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ds-catalog-utility__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px clamp(20px, 4vw, 48px);
    flex-wrap: wrap;
}
.ds-catalog-utility__search {
    flex: 1 1 280px;
    position: relative;
    min-width: 0;
}
.ds-catalog-utility__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-ink-500);
    pointer-events: none;
}
.ds-catalog-utility__input {
    width: 100%;
    padding: 10px 14px 10px 38px !important;
    font-size: 14px;
    border: var(--ds-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ds-ink-900);
}
.ds-catalog-utility__input:focus {
    outline: none;
    border-color: var(--ds-green-600);
    box-shadow: 0 0 0 3px var(--ds-green-100);
}
.ds-catalog-utility__filter {
    padding: 10px 14px;
    border-radius: 10px;
    border: var(--ds-border);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s var(--ds-ease);
}
.ds-catalog-utility__filter:hover {
    border-color: var(--ds-ink-300);
}
.ds-catalog-utility__count {
    color: var(--ds-green-700);
    font-weight: 700;
}
@media (max-width: 540px) {
    .ds-catalog-utility__inner { gap: 8px; padding: 10px 16px; }
    .ds-catalog-utility__input { font-size: 13px; padding: 9px 12px 9px 36px !important; }
    .ds-catalog-utility__filter { padding: 9px 12px; font-size: 12px; }
}


/* ───────────── PDP reassurance module ───────────── */

.ds-pdp-reassurance {
    margin: 32px auto 0;
    padding: 0 clamp(20px, 4vw, 48px);
    max-width: 1280px;
}
.ds-pdp-reassurance__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.ds-pdp-reassurance__card {
    padding: 16px;
    background: var(--ds-ink-50);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ds-pdp-reassurance__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: var(--ds-border);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ds-pdp-reassurance__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-ink-900);
    margin-top: 4px;
}
.ds-pdp-reassurance__body {
    font-size: 12px;
    color: var(--ds-ink-500);
    line-height: 1.55;
    white-space: pre-wrap;
}


/* ───────────── Thank-you action cards + Account Management card ───────────── */

.ds-thanks-cards-actions {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ds-thanks-cards-actions[data-has-invoice="0"] {
    grid-template-columns: repeat(2, 1fr);
}
.ds-thanks-card {
    padding: 18px;
    background: #fff;
    border: var(--ds-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.ds-thanks-card--primary {
    border: 2px solid var(--ds-green-600);
    padding: 17px;
}
.ds-thanks-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.ds-thanks-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-thanks-card--primary .ds-thanks-card__icon {
    background: var(--ds-green-600);
    color: #fff;
}
.ds-thanks-card__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ds-ink-100);
    color: var(--ds-ink-500);
}
.ds-thanks-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-ink-900);
}
.ds-thanks-card__body {
    font-size: 12px;
    color: var(--ds-ink-500);
    flex: 1;
}

.ds-thanks-account-card {
    margin-top: 18px;
    padding: 22px;
    background: var(--ds-green-100);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
    transition: background .15s var(--ds-ease);
}
.ds-thanks-account-card:hover {
    background: oklch(0.92 0.07 152);
    text-decoration: none;
    color: inherit;
}
.ds-thanks-account-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}
.ds-thanks-account-card__body {
    flex: 1;
    min-width: 220px;
}
.ds-thanks-account-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-green-800);
}
.ds-thanks-account-card__sub {
    font-size: 13px;
    color: var(--ds-green-800);
    opacity: 0.85;
    margin-top: 2px;
    line-height: 1.5;
}
.ds-thanks-account-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-green-800);
    background: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ds-thanks-support {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .ds-thanks-cards-actions,
    .ds-thanks-cards-actions[data-has-invoice="0"] {
        grid-template-columns: 1fr;
    }
    .ds-thanks-account-card { padding: 16px; gap: 12px; }
    .ds-thanks-account-card__cta { padding: 8px 12px; font-size: 12px; }
}


/* ───────────── Account Quick Actions (dashboard) ───────────── */

.ds-account-quickactions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 24px;
}
.ds-account-quickactions__tile {
    padding: 16px;
    background: #fff;
    color: var(--ds-ink-900);
    border: var(--ds-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    transition: transform .15s var(--ds-ease), border-color .15s var(--ds-ease);
    min-width: 0;
}
.ds-account-quickactions__tile:hover {
    transform: translateY(-2px);
    border-color: var(--ds-ink-300);
    text-decoration: none;
    color: var(--ds-ink-900);
}
.ds-account-quickactions__tile--primary {
    background: var(--ds-ink-900);
    color: #fff;
    border: 0;
}
.ds-account-quickactions__tile--primary:hover {
    background: var(--ds-ink-700);
    color: #fff;
}
.ds-account-quickactions__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-account-quickactions__tile--primary .ds-account-quickactions__icon {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.ds-account-quickactions__title {
    font-size: 13px;
    font-weight: 700;
}
.ds-account-quickactions__sub {
    font-size: 11px;
    color: var(--ds-ink-500);
}
.ds-account-quickactions__tile--primary .ds-account-quickactions__sub {
    color: oklch(0.78 0.02 152);
}

@media (max-width: 1024px) {
    .ds-account-quickactions { grid-template-columns: repeat(2, 1fr); }
}


/* ───────────── Order detail action head ───────────── */

.ds-order-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.ds-order-detail-head__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* ───────────── WC orders list — restyle per-row action buttons ───────────── */

.woocommerce-orders-table__cell-order-actions {
    text-align: right;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button,
.woocommerce-orders-table__cell-order-actions a.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    margin: 0 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: var(--ds-border);
    background: #fff;
    color: var(--ds-ink-900);
    text-decoration: none;
    transition: border-color .15s var(--ds-ease), background .15s var(--ds-ease);
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button:hover,
.woocommerce-orders-table__cell-order-actions a.button:hover {
    border-color: var(--ds-ink-300);
    background: var(--ds-ink-50);
    color: var(--ds-ink-900);
    text-decoration: none;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view,
.woocommerce-orders-table__cell-order-actions a.button.view {
    background: var(--ds-ink-900);
    color: #fff;
    border-color: var(--ds-ink-900);
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view:hover,
.woocommerce-orders-table__cell-order-actions a.button.view:hover {
    background: var(--ds-ink-700);
    border-color: var(--ds-ink-700);
    color: #fff;
}
@media (max-width: 767px) {
    .woocommerce-orders-table__cell-order-actions {
        text-align: left;
    }
    .woocommerce-orders-table__cell-order-actions .woocommerce-button,
    .woocommerce-orders-table__cell-order-actions a.button {
        margin: 4px 6px 0 0;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   v2.4.2.2 — FUNCTIONAL & TRUST RECOVERY OVERRIDES
   ────────────────────────────────────────────────────────────────────────────
   Lives at the bottom of ds-system.css so it always wins cascade. Each block
   is keyed to a specific staging-QA failure:

     A. WhatsApp PDP block contrast lock-in (was unreadable on PDP).
     B. Shop filter checkbox — hide native input fully so only ds-check__box
        renders (was showing two boxes side-by-side).
     C. Shop toolbar tightening (was floating in oversized empty card).
     D. Auth shell widening + side-by-side login/register columns at desktop
        (was a 420px column with the register form cramped underneath).
     E. Wishlist DOM hide when readiness is false (third-party plugin
        defense-in-depth).
     F. Neutral product-image placeholder when WC has no image (no sketchy
        broken-image icon on customer-facing surfaces).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A. WhatsApp block contrast lock-in ─────────────────────────────────── */
.ds-wa-block {
    background: var(--ds-ink-900) !important;
    color: #fff !important;
}
.ds-wa-block,
.ds-wa-block * {
    color: #fff;
}
.ds-wa-block .ds-wa-block__title {
    color: #fff !important;
    font-weight: 700;
}
.ds-wa-block .ds-wa-block__sub {
    color: rgba(255, 255, 255, 0.78) !important;
}
.ds-wa-block .ds-wa-block__icon {
    background: var(--ds-wa) !important;
    color: #fff !important;
}
.ds-wa-block .ds-wa-block__icon svg {
    color: #fff !important;
}
.ds-wa-block .ds-btn--whatsapp {
    background: var(--ds-wa) !important;
    color: #fff !important;
    border-color: var(--ds-wa) !important;
}
.ds-wa-block .ds-btn--whatsapp:hover,
.ds-wa-block .ds-btn--whatsapp:focus {
    color: #fff !important;
}

/* ── B. Shop filter — hide native checkbox completely ───────────────────── */
/* The previous rule used position:absolute + width/height 0, but on some
   browsers the box-shadow / focus ring still painted a tiny native box next
   to our custom .ds-check__box. Clip path + appearance:none belts-and-braces. */
.ds-filters__check-list input[type="checkbox"],
.ds-filters__check-list input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
/* Keep keyboard focus reachable — focus the LABEL via :focus-within on the
   container so screen readers + Tab still work. */
.ds-filters__check-list label {
    position: relative;
}
.ds-filters__check-list label:focus-within .ds-check__box {
    outline: 2px solid var(--ds-green-600);
    outline-offset: 2px;
}

/* ── C. Shop toolbar — compact rendering ────────────────────────────────── */
.ds-shop-toolbar {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--ds-ink-50);
    border-color: transparent;
}
.ds-shop-toolbar__count {
    font-size: 13px;
    color: var(--ds-ink-700);
}
.ds-shop-toolbar__sort select {
    padding: 6px 30px 6px 12px;
    font-size: 12px;
}
/* Pull the active-filter chips snug under the toolbar. */
.ds-active-filters {
    margin: -6px 0 16px;
}

/* ── D. Auth shell — widen form pane + side-by-side columns at desktop ──── */
.ds-auth-shell {
    /* Form pane gets more room; brand pane shrinks but remains visible. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.ds-auth-shell__pane {
    padding: 40px 56px;
}
.ds-auth-shell__content {
    max-width: 720px;
}
/* Two-column login/register at >= 980px so the register form has breathing room
   without forcing tiny line lengths. */
.ds-auth-shell__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 980px) {
    .ds-auth-shell__grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
    .ds-auth-shell__content {
        max-width: 820px;
    }
}
@media (max-width: 979px) {
    .ds-auth-shell {
        grid-template-columns: 1fr;
    }
    .ds-auth-shell__pane {
        padding: 32px 24px;
    }
}

/* ── E. Wishlist DOM hide when readiness flag is false ──────────────────── */
/* Defense-in-depth: even if a third-party plugin slips a button past the PHP
   `remove_action` calls in inc/woocommerce.php, CSS hides the DOM. */
body.ds-wishlist-not-ready .yith-wcwl-add-to-wishlist,
body.ds-wishlist-not-ready .yith-wcwl-wishlistexistsbrowse,
body.ds-wishlist-not-ready .yith-wcwl-wishlistaddedbrowse,
body.ds-wishlist-not-ready .add_to_wishlist,
body.ds-wishlist-not-ready .tinv-wishlist,
body.ds-wishlist-not-ready .tinv_add_to_wishlist_button,
body.ds-wishlist-not-ready .wcboost-wishlist-button,
body.ds-wishlist-not-ready .wcwl-add-to-wishlist {
    display: none !important;
}

/* ── F. Neutral product-image placeholder ───────────────────────────────── */
/* When a product has no image, WC outputs `wp-post-image` against a placeholder
   asset that defaults to a sketchy line-art icon. Style the fallback so it
   reads as a neutral DS BRAND swatch rather than "broken image". */
.ds-product-card__media .wp-post-image,
.woocommerce-product-gallery__image img {
    background: var(--ds-ink-50);
}
.ds-product-card__media img[src*="placeholder"],
.woocommerce-product-gallery__image img[src*="placeholder"] {
    object-fit: contain;
    padding: 18%;
    background:
        linear-gradient(135deg, var(--ds-green-50), var(--ds-ink-50)) !important;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* ── G. Public notice queue safety ──────────────────────────────────────── */
/* Hide any leaked shipping-zone debug notice if it still slips through both
   PHP suppression and template render. The text-content match is approximate;
   the PHP filter in inc/woocommerce.php is the source of truth. */
.woocommerce-notices-wrapper .woocommerce-info:has(> *:not(:empty)):where(*) {
    /* no-op selector; reserved for future hardening */
}