/* ============================================================
   A16A — QUIET LUXURY OVERRIDE  (2026-11-11)
   ------------------------------------------------------------
   Overrides the Walmart red/yellow language with a restrained
   black / white / warm-grey palette suited to handcrafted goods.
   Loaded after main.css so source order wins; no template edits.
   Revert: delete this block from style.css.
   ============================================================ */

/* --- 1. Palette: brand red -> ink black; deal yellow -> warm brass --- */
:root {
    --color-primary: #141414;
    --color-primary-dark: #000000;
    --color-primary-light: #3a3a3a;
    --color-primary-bg: #F4F2EE;
    --color-primary-soft: #EAE6DF;

    --color-deal: #A8895C;          /* muted brass, not yellow */
    --color-deal-dark: #8E7148;
    --color-deal-text: #FFFFFF;

    --color-bg: #FFFFFF;
    --color-bg-alt: #F7F5F1;
    --color-bg-tint: #F7F5F1;
    --color-card: #FFFFFF;
    --color-card-hover: #FCFBF9;

    --color-text: #1D1D1D;
    --color-text-secondary: #5C5C5C;
    --color-text-muted: #8A8A8A;

    --border-color: #DCD8D1;
    --border-color-light: #EBE8E2;

    --radius-xs: 2px;
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-pill: 2px;
    --border-radius: 2px;
    --border-radius-sm: 2px;
    --border-radius-lg: 2px;

    --shadow-sm: none;
    --shadow-md: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.06);
    --shadow-card: 0 0 0 1px rgba(0,0,0,0.05);
    --shadow-hover: 0 8px 28px rgba(0,0,0,0.07);

    --font-body: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-display: var(--font-body);
}

/* --- 2. Typography: lighter, wider tracking, more air --- */
body { color: var(--color-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .hero-title, .section-header h2 {
    font-weight: 300;
    letter-spacing: 0.02em;
}
.section-header h2 {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.section-header .see-all {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.section-header .see-all:hover { color: var(--color-text); }

/* --- 3. Header: solid ink bar, thin rules --- */
.site-header { box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
.top-bar { border-bottom: 1px solid rgba(255,255,255,0.06); }
.logo-spark { color: var(--color-deal); }

/* --- 4. Hero: darker, quieter, more negative space --- */
.hero-section { padding: 0 0 0; }
.hero-slide { min-height: 480px; }
.hero-content { padding-top: 72px; padding-bottom: 72px; }
.hero-badge {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    padding: 6px 12px;
    border-radius: 0;
}
.hero-badge.red { background: transparent; border-color: rgba(255,255,255,0.55); }
.hero-title {
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 1.12;
}
.hero-title .highlight { color: var(--color-deal); font-style: italic; }
.hero-subtitle {
    font-weight: 300;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.01em;
    max-width: 34em;
}
.hero-cta .btn-primary {
    background: #FFFFFF;
    color: #111111;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    padding: 15px 30px;
}
.hero-cta .btn-primary:hover { background: transparent; color: #FFFFFF; }
.hero-cta .btn-black {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    padding: 15px 30px;
}
.hero-cta .btn-black:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; border-color: #FFFFFF; }
.showcase-badge {
    background: rgba(255,255,255,0.92);
    color: #141414;
    border-radius: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 500;
    padding: 5px 10px;
    box-shadow: none;
}
.showcase-badge.bottom { background: rgba(20,20,20,0.92); color: #fff; }

/* --- 5. Shipping strip: quiet band --- */
.ship-strip {
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    padding: 12px 0;
}
.ship-strip strong { color: var(--color-text); font-weight: 600; }

/* --- 6. Category cards: square, hairline, no colour chips --- */
.category-card { border-radius: 0; box-shadow: none; border: 1px solid var(--border-color-light); background: #fff; }
.category-card:hover { transform: none; border-color: var(--color-text); }
.category-card-image { border-radius: 0; background: var(--color-bg-alt); }
.category-card-title { font-weight: 400; letter-spacing: 0.04em; }
.category-card:hover .category-card-title { color: var(--color-text); }

/* --- 7. Product cards: flat, hairline, restrained --- */
.product-card {
    border-radius: 0;
    border: 1px solid var(--border-color-light);
    box-shadow: none;
    background: #fff;
    transition: border-color 0.25s ease;
}
.product-card:hover { box-shadow: none; border-color: var(--color-text); transform: none; }
.product-card:hover .product-card-image img { transform: scale(1.03); }
.product-card-title { font-weight: 400; letter-spacing: 0.01em; }
.product-card:hover .product-card-title { color: var(--color-text); }
.product-card-price { font-weight: 500; letter-spacing: 0.02em; }
/* Add-to-cart: ink outline instead of loud red fill */
.product-card .button, .product-card .add_to_cart_button, .product-card .btn-add-cart {
    background: transparent !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-text) !important;
    border-radius: 0 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
}
.product-card .button:hover, .product-card .add_to_cart_button:hover, .product-card .btn-add-cart:hover {
    background: var(--color-text) !important;
    color: #fff !important;
}
/* Badges (NEW / SALE): quiet ink, not yellow */
.product-badges .badge, .product-card .onsale, .badge-new, .badge-sale {
    background: var(--color-text) !important;
    color: #fff !important;
    border-radius: 0 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 500;
}

/* --- 8. Value props: hairline, generous spacing --- */
.value-props { gap: 0; border-top: 1px solid var(--border-color-light); border-bottom: 1px solid var(--border-color-light); }
.value-prop { border-right: 1px solid var(--border-color-light); padding: 24px 20px; }
.value-prop:last-child { border-right: 0; }
.value-prop-text b { font-weight: 500; letter-spacing: 0.03em; }
.value-prop-text span { color: var(--color-text-muted); font-size: 12px; }

/* --- 9. Membership banner: ink block, brass ticks --- */
.subscribe-banner { background: var(--color-text); }
.subscribe-banner h2 { font-weight: 200; letter-spacing: 0.04em; }
.subscribe-banner .btn-primary {
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6);
    border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; font-weight: 500;
}
.subscribe-banner .btn-primary:hover { background: #fff; color: var(--color-text); }
.sub-feature svg { stroke: var(--color-deal) !important; }

/* --- 10. Blog / content cards --- */
.content-card { border-radius: 0; border: 1px solid var(--border-color-light); box-shadow: none; background: #fff; }
.content-card:hover { border-color: var(--color-text); box-shadow: none; }
.content-image, .content-thumb { border-radius: 0; }
.content-tag { color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; }
.content-card h3 { font-weight: 400; }
.content-link { letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; color: var(--color-text); }

/* --- 11. Buttons site-wide: square, letterspaced --- */
.btn { border-radius: 0; letter-spacing: 0.06em; }
.btn-primary { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; }

/* --- 12. Section rhythm: more breathing room --- */
.section-padding { padding: 64px 0; }
.band-tint { background: var(--color-bg-alt); }

/* --- 13. Footer: ink ground --- */
.site-footer, .footer-main { background: var(--color-text); }

/* --- 14. Purge remaining stray colour (icons / shipping / tags) --- */
/* Department icon placeholders: force ink, kill purple/green swatches */
.category-icon-placeholder {
    background: #141414 !important;
    border-radius: 0 !important;
}
.category-icon-placeholder svg { fill: #fff; stroke: #fff; }

/* Free-shipping microcopy was bright green — make it quiet grey */
.free-delivery, .product-card .free-delivery, .deals-item .free-delivery {
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
}

/* Journal / content tag chips: no pastel background */
.content-tag {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    padding: 0 !important;
    border: 0 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 9px;
}

/* Product card titles: clamp to 2 lines so grid baselines align */
.product-card-title, .product-card-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* Search field: hairline on dark bar for legibility */
.header-search input[type="search"], .search-field, .header-search .search-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #fff !important;
}
.header-search input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }

/* Any remaining green success text in product rows -> muted */
.product-card .stock.in-stock, .product-card .in-stock { color: var(--color-text-muted) !important; }

/* Onsale / NEW badges already inked; kill any residual yellow chip */
.onsale, .badge, .product-badges span {
    background: #141414 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* --- 15. Chat launcher: WhatsApp green / Messenger blue -> ink --- */
.a16a-chat .is-wa,
.a16a-chat .is-ms,
.a16a-chat-btn.is-wa,
.a16a-chat-btn.is-ms {
    background: #141414 !important;
    color: #FFFFFF !important;
}
.a16a-chat .is-wa:hover,
.a16a-chat .is-ms:hover,
.a16a-chat-btn.is-wa:hover,
.a16a-chat-btn.is-ms:hover {
    background: #000000 !important;
}
.a16a-chat-glyph { color: #fff !important; }

/* --- 16. Dept nav "deal" pill: brass -> ink --- */
.cat-nav-item.deal {
    background: #141414 !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.cat-nav-item.deal:hover { background: #000 !important; }
.cat-nav-item.highlight { color: var(--color-text) !important; }