/* ============================================================================
 * DS BRAND Theme — assets/css/trust-pass.css
 *
 * v2.5.0 trust-recovery overrides. Loaded LAST (after theme.css, homepage.css,
 * ds-system.css) so its rules win the cascade without disturbing the existing
 * design system. Every block here addresses a specific finding from the
 * launch-readiness audit:
 *
 *  1.  Calmer page background + reduced green tinting (less "demo")
 *  2.  Refined wordmark (monogram + label)
 *  3.  Header utility links: tighter, more confident hit area
 *  4.  Product image placeholder upgrade (paper-grade, not green-tinted)
 *  5.  Shop archive: compact hero, real-store toolbar, sort control rebuilt
 *  6.  Filters sidebar: single "Clear" action, structural list, no fake checkboxes
 *  7.  About hero: removed empty-tile vibe, restrained scale
 *  8.  Contact page: removed duplicated copy and "preferred" badge
 *  9.  Thank-you action cards: tighter rhythm, less floating-island look
 * 10.  Cart shipping card: clearer transactional language
 * 11.  PDP reassurance: less cartoonish icons
 * 12.  Wishlist DOM scrub when readiness false (belt-and-braces)
 * 13.  Print styles
 *
 * Naming: every rule below targets the existing markup — no new classes
 * required in templates that we haven't separately edited.
 * ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   1. GLOBAL CHROME — calmer background, restrained green
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Replace the slightly creamy --ds-page (#FAFAF7) with a cleaner near-white
       so product cards and surfaces no longer float on a beige wash. Real
       Malaysian ecommerce sites lean white-on-white; the warm tone read as
       "indie brand mockup". */
    --ds-page:        #ffffff;
    --ds-page-soft:   #f6f7f4;
    --ds-rule:        #e9ebe6;
    --ds-rule-strong: #d6d9d2;
}

body.ds-wishlist-not-ready .yith-wcwl-add-to-wishlist,
body.ds-wishlist-not-ready .yith-wcwl-wishlistexistsbrowse,
body.ds-wishlist-not-ready .tinv-wraper,
body.ds-wishlist-not-ready .wc-wishlists-button,
body.ds-wishlist-not-ready .ds-util-link--wishlist {
    display: none !important;
}

/* Tighter site rhythm — sections were running at 96px even on short pages */
.ds-page section[style*="padding:32px 0 80px"],
.ds-page section[style*="padding:24px 0 80px"] {
    padding-bottom: 56px !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. WORDMARK — monogram chip + label
   ════════════════════════════════════════════════════════════════════════════ */

.site-brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-base);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1;
}

.site-brand-wordmark .brand-ds {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    background: var(--ds-ink-900, #0E1411);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.site-brand-wordmark .brand-label {
    color: var(--ds-ink-900, #0E1411);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-left: 0;
}

/* Same treatment in footer */
.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}
.footer-brand-link .brand-ds {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    background: #fff;
    color: var(--ds-ink-900, #0E1411);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.footer-brand-link span:last-child {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. HEADER UTILITY LINKS — tighter, more confident
   ════════════════════════════════════════════════════════════════════════════ */

.site-header__utils {
    gap: 2px;
}
.ds-util-link {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--ds-ink-700, #2A332D);
}
.ds-util-link:hover {
    background: var(--ds-ink-50, #F4F5F1);
    color: var(--ds-ink-900, #0E1411);
}

.ds-cart-count {
    top: 2px;
    right: 2px;
    background: var(--ds-ink-900, #0E1411);
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
}

/* Utility strip — keep info, kill the dot punctuation that read as bullet */
.ds-utility-strip {
    background: var(--ds-ink-900, #0E1411);
    color: #d4d6d0;
    font-size: 12px;
    letter-spacing: 0.01em;
}
.ds-utility-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 8px 20px;
    flex-wrap: wrap;
}
.ds-utility-strip a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.ds-utility-strip a:hover {
    border-bottom-color: #ffffff;
}
.ds-utility-strip .ds-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    display: inline-block;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. PRODUCT IMAGE PLACEHOLDER — paper-grade, no green tint
   ════════════════════════════════════════════════════════════════════════════
   Default WooCommerce placeholder is a soft-coloured gallery icon that reads
   immediately as "demo store". Apply a striped paper-grade fill behind any
   image whose src ends in WC's known placeholder, plus stamp the product SKU
   or category in monospace so the card communicates "real catalogue, photo
   pending" rather than "fake site".
*/

.ds-product-card__media,
.hp-product-card__image-wrap {
    background:
        repeating-linear-gradient(135deg,
            #f0f1ec 0px, #f0f1ec 12px,
            #f6f7f4 12px, #f6f7f4 24px);
}

/* WC placeholder image — drop its visual weight */
.ds-product-card__media img.woocommerce-placeholder,
.hp-product-card__image-wrap img.woocommerce-placeholder,
.ds-cart-line__photo img.woocommerce-placeholder,
.ds-pdp__gallery-col img.woocommerce-placeholder {
    opacity: 0.18;
    mix-blend-mode: multiply;
}

/* Replace icon-style placeholder with a SKU stamp pseudo */
.ds-product-card__media::after,
.hp-product-card__image-wrap::after {
    content: "Photo pending";
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-ink-500, #5C685E);
    background: rgba(255,255,255,0.92);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

/* Only show the stamp on cards using the WC placeholder. We detect this by
   the .woocommerce-placeholder class WC applies to its own placeholder. */
.ds-product-card__media:has(img.woocommerce-placeholder)::after,
.hp-product-card__image-wrap:has(img.woocommerce-placeholder)::after {
    opacity: 1;
}

/* Bigger PDP gallery placeholder */
.ds-pdp__gallery-col .woocommerce-product-gallery {
    background:
        repeating-linear-gradient(135deg,
            #f0f1ec 0px, #f0f1ec 18px,
            #f6f7f4 18px, #f6f7f4 36px);
    border-radius: var(--ds-r, 12px);
    overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. SHOP ARCHIVE — compact hero, real-store toolbar
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero band — tone the green wash WAY down, restrain scale */
.ds-page-hero,
.ds-page-hero--tinted {
    background: transparent !important;
    padding: 32px 0 16px !important;
}
.ds-page-hero h1 {
    font-size: clamp(28px, 2.4vw + 14px, 40px) !important;
    margin-top: 6px !important;
}
.ds-page-hero p {
    font-size: 15px !important;
    max-width: 56ch;
    color: var(--ds-ink-500, #5C685E) !important;
    margin-top: 6px !important;
}
.ds-page-hero .ds-eyebrow {
    color: var(--ds-ink-500, #5C685E) !important;
    font-size: 11px;
}

/* Shop wrapper: pull the grid up next to the hero */
.ds-page.woocommerce-main section[style*="padding:24px 0 80px"] {
    padding-top: 8px !important;
}

/* Sort dropdown — replace the pill-with-shadow that read fake */
.ds-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 18px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    margin-bottom: 18px;
    background: transparent;
    border-radius: 0;
}
.ds-shop-toolbar__count,
.ds-shop-toolbar .woocommerce-result-count {
    font-size: 13px;
    color: var(--ds-ink-500, #5C685E);
    margin: 0;
}
.ds-shop-toolbar__sort .orderby,
.woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C685E' d='M6 8L0 0h12z'/%3E%3C/svg%3E")
        no-repeat right 12px center / 10px;
    border: 1px solid var(--ds-rule-strong, #d6d9d2);
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-ink-900, #0E1411);
    cursor: pointer;
    min-width: 200px;
    box-shadow: none;
}
.ds-shop-toolbar__sort .orderby:focus,
.woocommerce-ordering select.orderby:focus {
    outline: none;
    border-color: var(--ds-ink-700, #2A332D);
    box-shadow: 0 0 0 3px rgba(14,20,17,0.06);
}

/* Filter sidebar — neutralise green block and double-action chrome */
.ds-filters {
    background: transparent;
    padding: 0;
    border: 0;
}
.ds-filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    margin-bottom: 18px;
}
.ds-filters__head .ds-filters__group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-ink-900, #0E1411);
    margin: 0;
}
.ds-filters__clear {
    font-size: 12px;
    color: var(--ds-ink-500, #5C685E);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ds-filters__clear:hover {
    color: var(--ds-ink-900, #0E1411);
}

.ds-filters__group {
    padding: 16px 0;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-filters__group:last-of-type {
    border-bottom: 0;
}
.ds-filters__group .ds-filters__group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-ink-700, #2A332D);
    margin: 0 0 10px;
}

/* Category list — structural, not pill */
.ds-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-filters__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ds-ink-700, #2A332D);
    text-decoration: none;
    line-height: 1.3;
}
.ds-filters__list a:hover {
    background: var(--ds-ink-50, #F4F5F1);
    color: var(--ds-ink-900, #0E1411);
}
.ds-filters__list li.is-current a {
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
    font-weight: 600;
}
.ds-filters__list li.is-current a .ds-filters__list-count {
    color: rgba(255,255,255,0.7);
}
.ds-filters__list-count {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ds-ink-400, #7D8881);
}

/* Price inputs — clean, low-chrome */
.ds-filters__group input[type="number"] {
    width: 100%;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ds-rule-strong, #d6d9d2) !important;
}

/* Checkbox list — show the real input, ditch the fake replacement square */
.ds-filters__check-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ds-ink-700, #2A332D);
    margin: 0;
    border-radius: 6px;
}
.ds-filters__check-list label:hover {
    background: var(--ds-ink-50, #F4F5F1);
}
.ds-filters__check-list label input[type="checkbox"] {
    position: static;
    width: 16px;
    height: 16px;
    accent-color: var(--ds-ink-900, #0E1411);
    margin: 0;
    opacity: 1;
    pointer-events: auto;
}
.ds-filters__check-list label .ds-check__box {
    display: none; /* removed the fake duplicate box */
}
.ds-filters__check-list label .ds-filters__check-label {
    flex: 1;
}
.ds-filters__check-list label .ds-filters__check-count {
    font-size: 11.5px;
    color: var(--ds-ink-400, #7D8881);
    font-variant-numeric: tabular-nums;
}

/* Single apply button at the bottom — no duplicate ghost "Clear all" since
   the head already has a "Clear" link */
.ds-filters__apply {
    margin-top: 18px;
}
.ds-filters__apply .ds-btn--ghost {
    display: none;
}

/* Mobile-only head — hidden on desktop */
.ds-filters__mobile-head {
    display: none;
}
@media (max-width: 900px) {
    .ds-filters.is-mobile-open .ds-filters__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    }
}


/* Product grid — slightly more density */
.ds-product-card {
    border-radius: 10px;
    border: 1px solid var(--ds-rule, #e9ebe6);
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ds-product-card:hover {
    border-color: var(--ds-rule-strong, #d6d9d2);
    box-shadow: 0 6px 16px -10px rgba(14,20,17,0.18);
    transform: translateY(-1px);
}
.ds-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-product-card__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-product-card__cat {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ds-ink-500, #5C685E);
}
.ds-product-card__title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}
.ds-product-card__title a {
    color: var(--ds-ink-900, #0E1411);
    text-decoration: none;
}
.ds-product-card__title a:hover {
    color: var(--ds-green-700);
}
.ds-product-card__price-row {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-ink-900, #0E1411);
    font-variant-numeric: tabular-nums;
}
.ds-product-card__chips {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 1;
}
.ds-product-card__chips .ds-chip {
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
    background: #ffffff;
    color: var(--ds-ink-900, #0E1411);
    border: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-product-card__chips .ds-chip--sale {
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
    border-color: var(--ds-ink-900, #0E1411);
}
.ds-product-card__chips .ds-chip--oos {
    background: rgba(14,20,17,0.78);
    color: #fff;
    border: 0;
}

/* Active filter chips strip — neutralise green pill chrome */
.ds-active-filters {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}
.ds-active-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ds-active-filters__count {
    font-size: 12px;
    color: var(--ds-ink-500, #5C685E);
}
.ds-active-filters__clear {
    font-size: 12px;
    color: var(--ds-ink-700, #2A332D);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ds-active-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ds-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--ds-ink-50, #F4F5F1);
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 6px;
    font-size: 12px;
    color: var(--ds-ink-700, #2A332D);
    text-decoration: none;
}
.ds-active-chip:hover {
    background: var(--ds-ink-100, #ECEEEA);
    color: var(--ds-ink-900, #0E1411);
}
.ds-active-chip__x {
    display: inline-flex;
    color: var(--ds-ink-400, #7D8881);
}


/* ════════════════════════════════════════════════════════════════════════════
   6. ABOUT PAGE — removed empty green mosaic
   ════════════════════════════════════════════════════════════════════════════ */

.ds-about-hero {
    background: transparent;
    padding: 40px 0 16px;
}
.ds-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.ds-about-hero h1 {
    font-size: clamp(36px, 4vw + 8px, 56px);
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin-top: 12px;
}
.ds-about-hero p {
    font-size: 16px;
    color: var(--ds-ink-500, #5C685E);
    margin-top: 14px;
    max-width: 54ch;
}

/* About story */
.ds-about-story {
    padding: 32px 0 0;
}
.ds-about-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 4vw, 72px);
    padding: 36px 0;
    border-top: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-about-story h2 {
    font-size: clamp(24px, 1.8vw + 16px, 32px);
    line-height: 1.18;
    letter-spacing: -0.016em;
}
.ds-about-story__body p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ds-ink-700, #2A332D);
}

.ds-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.ds-stat-card {
    padding: 18px 18px 20px;
    background: var(--ds-page-soft, #f6f7f4);
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    box-shadow: none;
}
.ds-stat-card__value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 8px;
    letter-spacing: -0.01em;
    color: var(--ds-ink-900, #0E1411);
}
.ds-stat-card__desc {
    font-size: 12.5px;
    color: var(--ds-ink-500, #5C685E);
    margin-top: 4px;
    line-height: 1.45;
}

/* Two-brand separation block — calmer */
.ds-twobrand {
    background: var(--ds-page-soft, #f6f7f4);
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 14px;
    box-shadow: none;
    padding: 28px;
}
.ds-twobrand__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.ds-twobrand__col h3 {
    font-size: 19px;
    margin-top: 10px;
}
.ds-twobrand__col ul {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-twobrand__col ul li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--ds-ink-700, #2A332D);
    line-height: 1.5;
}
.ds-twobrand__col ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ds-green-600);
}
.ds-twobrand__col:last-child ul li::before {
    background: var(--ds-ink-300, #A6AEA7);
}

@media (max-width: 800px) {
    .ds-about-hero__grid,
    .ds-about-story__grid,
    .ds-twobrand__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ds-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   7. CONTACT PAGE — calmer, no "preferred" badge or duplicated copy
   ════════════════════════════════════════════════════════════════════════════ */

.ds-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.ds-channel-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.ds-channel-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    padding: 18px 20px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 12px;
    box-shadow: none;
}
.ds-channel-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ds-page-soft, #f6f7f4);
    color: var(--ds-ink-900, #0E1411);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-channel-card--whatsapp .ds-channel-card__icon {
    background: #d8f5e2;
    color: var(--ds-wa-dark, #128C7E);
}
.ds-channel-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
    line-height: 1.3;
}
.ds-channel-card__contact {
    font-size: 13px;
    color: var(--ds-ink-500, #5C685E);
    margin-top: 1px;
}
.ds-channel-card__hours {
    display: none;
}

@media (max-width: 800px) {
    .ds-contact-layout {
        grid-template-columns: 1fr;
    }
    .ds-channel-card {
        grid-template-columns: 36px 1fr;
        gap: 12px;
    }
    .ds-channel-card .ds-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   8. THANK-YOU — calmer cards, tighter rhythm
   ════════════════════════════════════════════════════════════════════════════ */

.ds-thanks {
    text-align: center;
    padding: 16px 0 24px;
}
.ds-thanks__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ds-green-100);
    color: var(--ds-green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.ds-thanks h1 {
    font-size: clamp(28px, 2.4vw + 10px, 38px);
    line-height: 1.15;
    margin-top: 12px;
    letter-spacing: -0.02em;
}

.ds-thanks-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}
.ds-thanks-cards .ds-card {
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    box-shadow: none;
}
@media (max-width: 700px) {
    .ds-thanks-cards { grid-template-columns: 1fr; }
}

.ds-thanks-cards-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.ds-thanks-cards-actions[data-has-invoice="0"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-thanks-card {
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-thanks-card--primary {
    border-color: var(--ds-ink-900, #0E1411);
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
}
.ds-thanks-card--primary .ds-thanks-card__title,
.ds-thanks-card--primary .ds-thanks-card__body {
    color: #ffffff;
}
.ds-thanks-card--primary .ds-thanks-card__icon {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}
.ds-thanks-card--primary .ds-btn {
    background: #ffffff;
    color: var(--ds-ink-900, #0E1411);
    border-color: #ffffff;
}
.ds-thanks-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ds-thanks-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ds-page-soft, #f6f7f4);
    color: var(--ds-ink-900, #0E1411);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-thanks-card__badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--ds-ink-500, #5C685E);
    border: 1px solid var(--ds-rule-strong, #d6d9d2);
    padding: 3px 6px;
    border-radius: 4px;
}
.ds-thanks-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
}
.ds-thanks-card__body {
    font-size: 12.5px;
    color: var(--ds-ink-500, #5C685E);
    line-height: 1.5;
    flex: 1;
}
.ds-thanks-card .ds-btn--block {
    margin-top: 6px;
}
@media (max-width: 700px) {
    .ds-thanks-cards-actions,
    .ds-thanks-cards-actions[data-has-invoice="0"] {
        grid-template-columns: 1fr;
    }
}

.ds-thanks-account-card {
    margin-top: 18px;
    background: var(--ds-page-soft, #f6f7f4);
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    text-decoration: none;
}
.ds-thanks-account-card:hover {
    background: var(--ds-ink-50, #F4F5F1);
}
.ds-thanks-account-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    color: var(--ds-ink-900, #0E1411);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-thanks-account-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
}
.ds-thanks-account-card__sub {
    font-size: 12.5px;
    color: var(--ds-ink-500, #5C685E);
    line-height: 1.45;
}
.ds-thanks-account-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
}

.ds-thanks-support {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. CART, PDP, CHECKOUT — small tidies
   ════════════════════════════════════════════════════════════════════════════ */

.ds-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}
@media (max-width: 900px) {
    .ds-cart-layout { grid-template-columns: 1fr; }
    .ds-summary { position: static !important; }
}

.ds-card {
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 12px;
    box-shadow: none;
}

.ds-cart-line {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    align-items: start;
}
.ds-cart-line:last-of-type {
    border-bottom: 0;
}
.ds-cart-line__photo {
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg,
            #f0f1ec 0px, #f0f1ec 8px,
            #f6f7f4 8px, #f6f7f4 16px);
    border: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-cart-line__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-cart-line__cat {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ds-ink-500, #5C685E);
}
.ds-cart-line__title {
    font-size: 15px;
    line-height: 1.4;
    margin: 2px 0 0;
    font-weight: 600;
}
.ds-cart-line__title a {
    color: var(--ds-ink-900, #0E1411);
    text-decoration: none;
}
.ds-cart-line__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.ds-cart-line__remove {
    font-size: 12px;
    color: var(--ds-ink-500, #5C685E);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ds-cart-line__remove:hover {
    color: var(--ds-sale, #C0392B);
}
.ds-cart-line__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ds-ink-900, #0E1411);
}

.ds-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-summary__rows > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13.5px;
}
.ds-summary__label {
    color: var(--ds-ink-500, #5C685E);
}
.ds-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-ink-900, #0E1411);
    font-variant-numeric: tabular-nums;
}
.ds-summary__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--ds-ink-500, #5C685E);
    padding: 10px 12px;
    background: var(--ds-page-soft, #f6f7f4);
    border-radius: 8px;
}

/* PDP reassurance — softer cards */
.ds-pdp-reassurance {
    margin-top: 28px;
    padding: 24px;
    background: var(--ds-page-soft, #f6f7f4);
    border-radius: 12px;
}
.ds-pdp-reassurance__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.ds-pdp-reassurance__card {
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    padding: 16px;
}
.ds-pdp-reassurance__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ds-page-soft, #f6f7f4);
    color: var(--ds-ink-900, #0E1411);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.ds-pdp-reassurance__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ds-ink-900, #0E1411);
    margin-bottom: 6px;
}
.ds-pdp-reassurance__body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ds-ink-700, #2A332D);
}

/* Checkout progress — tighter, more visibly stepped */
.ds-checkout-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0 28px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    margin-bottom: 28px;
}
.ds-checkout-progress__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ds-ink-500, #5C685E);
    white-space: nowrap;
}
.ds-checkout-progress__step.is-current {
    color: var(--ds-ink-900, #0E1411);
    font-weight: 600;
}
.ds-checkout-progress__step.is-done {
    color: var(--ds-green-700);
}
.ds-checkout-progress__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-ink-100, #ECEEEA);
    color: var(--ds-ink-500, #5C685E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.ds-checkout-progress__step.is-current .ds-checkout-progress__num {
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
}
.ds-checkout-progress__step.is-done .ds-checkout-progress__num {
    background: var(--ds-green-600);
    color: #ffffff;
}
.ds-checkout-progress__line {
    flex: 1;
    height: 1px;
    background: var(--ds-rule, #e9ebe6);
}
.ds-checkout-progress__line.is-done {
    background: var(--ds-green-600);
}
@media (max-width: 700px) {
    .ds-checkout-progress {
        overflow-x: auto;
        padding-bottom: 16px;
    }
    .ds-checkout-progress__line { display: none; }
}

.ds-payment-note {
    font-size: 12px;
    color: var(--ds-ink-500, #5C685E);
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--ds-page-soft, #f6f7f4);
    border-radius: 8px;
}


/* ════════════════════════════════════════════════════════════════════════════
  10. ACCOUNT — clearer dashboard, tile rhythm
   ════════════════════════════════════════════════════════════════════════════ */

.ds-account-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .ds-account-layout { grid-template-columns: 1fr; }
}

.ds-account-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-account-user__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ds-account-user__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
}
.ds-account-user__meta {
    font-size: 11.5px;
    color: var(--ds-ink-500, #5C685E);
}

.ds-account-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--ds-ink-700, #2A332D);
    text-decoration: none;
}
.ds-account-nav a:hover {
    background: var(--ds-ink-50, #F4F5F1);
    color: var(--ds-ink-900, #0E1411);
}
.ds-account-nav a.is-active {
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
}
.ds-account-nav a.is-active svg {
    color: #ffffff;
}

.ds-account-quickactions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.ds-account-quickactions__tile {
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 10px;
    padding: 14px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s ease;
}
.ds-account-quickactions__tile:hover {
    border-color: var(--ds-rule-strong, #d6d9d2);
}
.ds-account-quickactions__tile--primary {
    background: var(--ds-ink-900, #0E1411);
    color: #ffffff;
    border-color: var(--ds-ink-900, #0E1411);
}
.ds-account-quickactions__tile--primary .ds-account-quickactions__title,
.ds-account-quickactions__tile--primary .ds-account-quickactions__sub {
    color: #ffffff;
}
.ds-account-quickactions__tile--primary .ds-account-quickactions__sub {
    opacity: 0.7;
}
.ds-account-quickactions__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--ds-page-soft, #f6f7f4);
    color: var(--ds-ink-900, #0E1411);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ds-account-quickactions__tile--primary .ds-account-quickactions__icon {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}
.ds-account-quickactions__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink-900, #0E1411);
    line-height: 1.3;
}
.ds-account-quickactions__sub {
    font-size: 11.5px;
    color: var(--ds-ink-500, #5C685E);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
    .ds-account-quickactions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Auth shell — narrower, more inviting */
.ds-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 600px;
    background: #ffffff;
}
@media (max-width: 900px) {
    .ds-auth-shell {
        grid-template-columns: 1fr;
    }
    .ds-auth-shell__art {
        display: none;
    }
}
.ds-auth-shell__pane {
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.ds-auth-shell__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}
@media (max-width: 800px) {
    .ds-auth-shell__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.ds-auth-shell__art {
    position: relative;
    overflow: hidden;
    background: var(--ds-ink-900, #0E1411);
}
.ds-auth-shell__art-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 32px;
    color: #ffffff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
.ds-auth-shell__art-overlay h2 {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.25;
    margin: 8px 0 6px;
}
.ds-auth-shell__art-overlay p {
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    margin: 0;
}

/* ────────────────────────────────────────────────────────────────────
   v2.5.1 — Auth shell HARD RESET.
   ────────────────────────────────────────────────────────────────────
   The previous markup wrapped login + register in WC's u-columns /
   col2-set float layout. WooCommerce's own woocommerce.css applies
   `float: left; width: 47.8260869%` to .col-1 and .col-2 — and on the
   My Account page that CSS sometimes ships AFTER ours, so the .ds-auth-
   shell__grid declaration loses the specificity tie. Result on the
   live site:

   • login form sat in a narrow centred column at ~47% width;
   • "Sign in to your account." wrapped to 3 lines because its column
     was too narrow;
   • the email input clipped "tianyinnnlim@gma…" mid-word;
   • the register form fell to the next row instead of sitting next
     to login;
   • the right "art" pane sat empty for ~95% of its height with the
     testimonial pinned to the bottom edge.

   This block forces the auth shell to ignore WC float behaviour
   entirely, re-asserts the grid, and surfaces the brand block to
   the centre of the art pane.
   ──────────────────────────────────────────────────────────────── */

.ds-auth-shell {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
    min-height: 0 !important;
    max-width: 1180px;
    margin: 28px auto 56px;
    padding: 0;
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 56px -32px rgba(14,20,17,0.16);
}

.ds-auth-shell__pane {
    padding: clamp(28px, 3.5vw, 56px) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.ds-auth-shell__pane > .ds-auth-shell__content {
    width: 100%;
    margin: 0;
}

/* Override WC float reset for the auth shell only. */
.ds-auth-shell .u-columns.col2-set,
.ds-auth-shell #customer_login.col2-set,
.ds-auth-shell .ds-auth-shell__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(20px, 2.5vw, 40px) !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ds-auth-shell .u-column1.col-1,
.ds-auth-shell .u-column2.col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Visual separation between Sign in and Create account */
.ds-auth-shell .col-2 {
    padding-left: clamp(20px, 2.5vw, 40px) !important;
    border-left: 1px solid var(--ds-rule, #e9ebe6);
}
@media (max-width: 800px) {
    .ds-auth-shell {
        grid-template-columns: 1fr !important;
    }
    .ds-auth-shell .col-2 {
        border-left: 0;
        padding-left: 0 !important;
        border-top: 1px solid var(--ds-rule, #e9ebe6);
        padding-top: 24px !important;
        margin-top: 8px;
    }
}

/* Headings — bound the width and bring the scale back into ecommerce range */
.ds-auth-shell h1,
.ds-auth-shell .col-1 h1 {
    font-size: clamp(22px, 1.4vw + 16px, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    margin: 8px 0 6px !important;
    max-width: none !important;
}
.ds-auth-shell h2,
.ds-auth-shell .col-2 h2 {
    font-size: clamp(20px, 1.2vw + 14px, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    margin: 8px 0 6px !important;
}
.ds-auth-shell .ds-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
}
.ds-auth-shell p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ds-ink-500, #5C685E) !important;
    margin-top: 8px !important;
    max-width: 38ch;
}

/* Forms — full-width inputs, calm */
.ds-auth-shell form {
    margin-top: 18px !important;
    gap: 12px !important;
}
.ds-auth-shell form label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
.ds-auth-shell form input[type="text"],
.ds-auth-shell form input[type="email"],
.ds-auth-shell form input[type="tel"],
.ds-auth-shell form input[type="password"],
.ds-auth-shell form .woocommerce-Input--text {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ds-rule-strong, #d6d9d2) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--ds-ink-900, #0E1411) !important;
}
.ds-auth-shell form input:focus {
    border-color: var(--ds-ink-700, #2A332D) !important;
    box-shadow: 0 0 0 3px rgba(14,20,17,0.06) !important;
    outline: none !important;
}

/* "Forgot password?" — keep on one line beside the label */
.ds-auth-shell form label > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    flex-wrap: nowrap !important;
    gap: 10px;
}
.ds-auth-shell form label > div a {
    white-space: nowrap !important;
    font-size: 12px !important;
    color: var(--ds-ink-500, #5C685E) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* "Keep me signed in" — native checkbox, no pseudo-square */
.ds-auth-shell label.ds-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--ds-ink-700, #2A332D) !important;
    margin: 4px 0 0 !important;
    cursor: pointer;
}
.ds-auth-shell label.ds-check input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--ds-ink-900, #0E1411) !important;
    margin: 0 !important;
    flex-shrink: 0;
    pointer-events: auto !important;
}
.ds-auth-shell label.ds-check .ds-check__box {
    display: none !important;
}

/* Primary submit — confident */
.ds-auth-shell .ds-btn--primary {
    width: 100%;
    justify-content: center;
    padding: 13px 18px !important;
    font-size: 14px !important;
}

/* Right pane — useful from the top, not empty for 95% then a tiny block at bottom */
.ds-auth-shell__art {
    background: var(--ds-ink-900, #0E1411) !important;
    min-height: 100%;
}
.ds-auth-shell__art > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}
.ds-auth-shell__art-overlay {
    position: absolute !important;
    inset: 0 !important;
    padding: clamp(28px, 3vw, 48px) !important;
    background:
        radial-gradient(circle at 80% 18%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
        linear-gradient(160deg,
            rgba(14,20,17,0) 0%,
            rgba(14,20,17,0.55) 70%,
            rgba(14,20,17,0.85) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 24px !important;
}
.ds-auth-shell__art-overlay > .ds-eyebrow,
.ds-auth-shell__art-overlay > span.ds-eyebrow {
    color: rgba(255,255,255,0.55) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    align-self: flex-start;
    line-height: 1;
}
.ds-auth-shell__art-overlay h2 {
    color: #ffffff !important;
    font-size: clamp(22px, 1.6vw + 14px, 30px) !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    letter-spacing: -0.018em !important;
    max-width: 18ch;
}
.ds-auth-shell__art-overlay p {
    color: rgba(255,255,255,0.72) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 32ch;
}

/* Footer line below the form — slim utility text */
.ds-auth-shell__pane > footer {
    font-size: 12px !important;
    color: var(--ds-ink-500, #5C685E) !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ds-rule, #e9ebe6) !important;
    text-align: left !important;
}
.ds-auth-shell__pane > footer a {
    color: var(--ds-ink-700, #2A332D) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.ds-order-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
}
.ds-order-detail-head__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════════════
  11. EMPTY STATES + NOTICES — calmer, no soft-green wash
   ════════════════════════════════════════════════════════════════════════════ */

.ds-empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--ds-page-soft, #f6f7f4);
    border: 1px solid var(--ds-rule, #e9ebe6);
    border-radius: 14px;
}
.ds-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--ds-rule, #e9ebe6);
    color: var(--ds-ink-700, #2A332D);
    margin-bottom: 14px;
}
.ds-empty h2 {
    font-size: 22px;
    margin: 0;
}
.ds-empty p {
    max-width: 52ch;
    margin: 10px auto 0;
    color: var(--ds-ink-500, #5C685E);
}
.ds-empty__actions {
    margin-top: 22px;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.ds-notice {
    border-radius: 8px;
    background: var(--ds-page-soft, #f6f7f4);
    border: 1px solid var(--ds-rule, #e9ebe6);
    color: var(--ds-ink-700, #2A332D);
    padding: 11px 14px;
    font-size: 13px;
}


/* ════════════════════════════════════════════════════════════════════════════
  12. CATALOG UTILITY BAR — neutralised
   ════════════════════════════════════════════════════════════════════════════ */
.ds-catalog-utility {
    background: #ffffff;
    border-bottom: 1px solid var(--ds-rule, #e9ebe6);
    box-shadow: none;
}


/* ════════════════════════════════════════════════════════════════════════════
  13. PRINT
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
    .site-header,
    .site-footer,
    .ds-utility-strip,
    .nav-toggle,
    .ds-catalog-utility,
    .ds-mobile-filter-bar,
    .ds-filters,
    .ds-shop-toolbar,
    .ds-thanks-cards-actions,
    .ds-thanks-support,
    .ds-wa-block,
    .ds-advance-handoff {
        display: none !important;
    }
    body, .ds-page {
        background: #ffffff !important;
    }
    .ds-thanks h1 {
        font-size: 22pt;
    }
    a {
        color: #000 !important;
        text-decoration: none !important;
    }
}