/*  ============================================================
    WEARZY — REDESIGN LAYER (Phase 2: premium fashion experience)
    ------------------------------------------------------------
    Loaded AFTER styles.css so it re-architects the visual language
    of the existing, JS-bound component classes WITHOUT changing the
    DOM contract that script.js / theme-renderer.js depend on.

    Strategy: keep every id / class / data-* hook; restyle and
    re-lay-out the components into an editorial, luxury D2C fashion
    aesthetic (oversized imagery, generous whitespace, refined type,
    restrained motion).

    Sections:
      0. Tokens (redesign-scoped additions)
      1. Base & layout rhythm
      2. Announcement bar
      3. Header + search
      4. Primary navigation + mega menu
      5. Buttons
      6. Hero
      7. Section headers
      8. Product cards
      9. Banner / editorial grid
     10. Sliders
     11. Testimonials
     12. About / editorial split
     13. CTA banner
     14. Footer
     15. Forms & inputs
     16. Utilities, motion, a11y
     17. Responsive
    ============================================================ */

/* 0. ---- Redesign tokens (extend the v2 design system) ---------- */
:root {
  --rd-header-h: 76px;
  --rd-nav-h: 52px;
  --rd-maxw: var(--container-max, 1280px);
  --rd-gutter: clamp(16px, 4vw, 56px);
  --rd-card-radius: 4px;
  --rd-img-ratio: 3 / 4;            /* portrait fashion imagery */
  --rd-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* 1. ---- Base & layout rhythm ---------------------------------- */
body {
  font-family: var(--font-main);
  color: var(--ink);
  background: var(--white);
  letter-spacing: 0.01em;
}
.container {
  max-width: var(--rd-maxw);
  padding-inline: var(--rd-gutter);
}
img { max-width: 100%; }

/* Editorial section vertical rhythm */
.section-padding { padding-block: clamp(48px, 7vw, 104px); }

/* 2. ---- Announcement bar -------------------------------------- */
.top-bar {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.top-bar-center { font-weight: 500; }
.top-bar-link { color: rgba(255,255,255,.78); }
.top-bar-link:hover { color: #fff; }

/* 3. ---- Header + search --------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-base) var(--rd-ease),
              background var(--dur-base) var(--rd-ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  min-height: var(--rd-header-h);
  gap: clamp(16px, 3vw, 40px);
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  gap: 10px;
}
.logo-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  border-radius: 50%;
  font-size: 18px;
}
.search-container {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.search-container:focus-within { border-color: var(--ink); }
.search-category {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warm-gray);
  background: transparent;
}
.search-input {
  font-family: var(--font-ui);
  font-size: 14px;
  background: transparent;
}
.search-button { background: var(--ink); color: #fff; }
.search-button:hover { background: var(--ink-soft); }
.header-action-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
#btnAccount { font-weight: 600; }
.header-action-btn .badge {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* 4. ---- Primary navigation + mega menu ------------------------ */
.main-nav {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav-inner { min-height: var(--rd-nav-h); }
.browse-categories {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-links { gap: clamp(18px, 2.4vw, 38px); }
.nav-links a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 6px;
}
/* Refined underline animation */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--rd-ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:hover,
.nav-links a.active { color: var(--ink); background: transparent; }

.nav-right-promo {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.nav-right-promo .highlight { color: var(--accent); font-weight: 600; }

/* Dropdowns / mega menu — premium card surface */
.nav-dropdown {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 0;
  background: var(--white);
}
.nav-dropdown a {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--graphite);
  padding: 9px 22px;
}
.nav-dropdown a:hover { background: var(--off-white); color: var(--ink); }

.nav-dropdown.product-nav-mega,
.nav-dropdown.shop-nav-mega {
  padding: 28px;
  border-radius: var(--radius-lg);
}

/* 5. ---- Buttons ----------------------------------------------- */
.btn-primary,
.btn-outline,
button.product-add-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--dur-fast) var(--rd-ease),
              color var(--dur-fast) var(--rd-ease),
              border-color var(--dur-fast) var(--rd-ease),
              transform var(--dur-fast) var(--rd-ease);
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 15px 32px;
}
.btn-primary:hover { background: transparent; color: var(--ink); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid currentColor;
  padding: 13px 28px;
}
.btn-outline:hover { background: var(--ink); color: #fff; }
/* light-text contexts (over imagery) keep the outline legible */
.light-text .btn-outline { color: #fff; }
.light-text .btn-outline:hover { background: #fff; color: var(--ink); }

/* 6. ---- Hero -------------------------------------------------- */
.hero-slider {
  background: var(--off-white);
}
.hero-slider h1,
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}
.hero-eyebrow,
.hero-slide .eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.hero-arrow {
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background var(--dur-fast) var(--rd-ease), transform var(--dur-fast) var(--rd-ease);
}
.hero-arrow:hover { background: #fff; transform: scale(1.06); }

/* 7. ---- Section headers --------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
}
.section-header { margin-bottom: clamp(24px, 3vw, 44px); }
.tabs-nav { gap: 28px; }
.tab-btn,
.tab-btn-pill {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  background: transparent;
  border: none;
  padding: 8px 2px;
  position: relative;
}
.tab-btn.active,
.tab-btn-pill.active { color: var(--ink); }
.tab-btn.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--ink);
}
.tab-btn-pill {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}
.tab-btn-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 8. ---- Product cards (premium fashion) ----------------------- */
.product-card {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform var(--dur-base) var(--rd-ease);
}
.product-image-wrapper {
  position: relative;
  aspect-ratio: var(--rd-img-ratio);
  background: var(--off-white);
  border-radius: var(--rd-card-radius);
  overflow: hidden;
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--rd-ease), opacity var(--dur-base) var(--rd-ease);
}
.product-card:hover .product-image { transform: scale(1.045); }
/* Hover image-swap: when a second image is present (.product-image-alt),
   cross-fade to it. Added by the enhanced renderProductCard(). */
.product-image-alt {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-base) var(--rd-ease);
}
.product-card:hover .product-image-alt { opacity: 1; }

.product-badge {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 5px 9px;
  top: 12px; left: 12px;
}
.product-badge.sale { background: var(--accent); color: #fff; }

/* Action rail — slide/fade in on hover (hidden affordance, desktop) */
.product-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--rd-ease), transform var(--dur-base) var(--rd-ease);
}
.product-card:hover .product-actions { opacity: 1; transform: none; }
.action-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur-fast) var(--rd-ease), color var(--dur-fast) var(--rd-ease);
}
.action-btn svg { width: 17px; height: 17px; }
.action-btn:hover { background: var(--ink); color: #fff; }

.product-info { padding: 16px 2px 0; text-align: left; }
.product-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 0 0 6px;
}
.product-title a { color: var(--ink); }
.product-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-price { display: flex; align-items: baseline; gap: 10px; }
.price-current { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); }
.price-old { font-size: 13px; color: var(--warm-gray); text-decoration: line-through; }

/* Visible add-to-cart: minimal underline-style on desktop cards */
button.product-add-btn {
  margin-top: 12px;
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 12px 16px;
}
button.product-add-btn:hover { background: transparent; color: var(--ink); }
.product-card.out-of-stock { opacity: .6; }

/* 9. ---- Banner / editorial grid ------------------------------- */
.category-banners { padding-block: clamp(40px, 6vw, 88px); }
.banner-card {
  border-radius: var(--rd-card-radius);
  overflow: hidden;
}
.banner-card img { transition: transform var(--dur-slow) var(--rd-ease); }
.banner-card:hover img { transform: scale(1.05); }
.banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.06;
}
.banner-subtitle {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* 10. ---- Sliders ---------------------------------------------- */
.slider-arrow {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--rd-ease), transform var(--dur-fast) var(--rd-ease);
}
.slider-arrow:hover { background: var(--ink); color: #fff; }
.product-slider { gap: clamp(14px, 2vw, 28px); }

/* 11. ---- Testimonials ----------------------------------------- */
.ts-section { background: var(--off-white); }
.ts-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--warm-gray);
}
.ts-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
}
.ts-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ts-arrow {
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink); border-radius: 50%;
}
.ts-arrow:hover:not([disabled]) { background: var(--ink); color: #fff; }

/* 12. ---- About / editorial split ------------------------------ */
.about-section { padding-block: clamp(48px, 7vw, 104px); }
.about-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight); line-height: 1.08;
}
.about-subtitle {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--warm-gray);
}
.about-desc { font-size: var(--fs-lead); color: var(--graphite); line-height: 1.75; }
.about-img-wrap { border-radius: var(--rd-card-radius); overflow: hidden; }
.about-trust-pill {
  font-family: var(--font-ui); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--graphite);
}

/* 13. ---- CTA banner ------------------------------------------- */
.cta-banner { border-radius: 0; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight); line-height: 1.03;
}
.cta-subtitle { font-size: var(--fs-lead); letter-spacing: .01em; }

/* 14. ---- Footer ----------------------------------------------- */
.site-footer,
footer.site-footer,
.footer {
  background: var(--footer-dark);
  color: rgba(255,255,255,.72);
}
.footer-col h4,
.footer h4 {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: #fff;
}
.footer a { color: rgba(255,255,255,.72); transition: color var(--dur-fast) var(--rd-ease); }
.footer a:hover { color: #fff; }
.ft-logo-text {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}

/* 15. ---- Forms & inputs --------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  font-family: var(--font-ui);
  border-radius: var(--radius-sm);
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
.newsletter input { border-radius: var(--radius-pill); }

/* 16. ---- Utilities, motion, a11y ------------------------------ */
.rd-fade-up { opacity: 0; transform: translateY(20px); }
.rd-fade-up.is-in { opacity: 1; transform: none; transition: opacity .7s var(--rd-ease), transform .7s var(--rd-ease); }

/* Larger, comfortable focus ring on dark surfaces */
.top-bar a:focus-visible,
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-image,
  .banner-card:hover img { transform: none; }
  .rd-fade-up { opacity: 1; transform: none; }
}

/* 17. ---- Responsive ------------------------------------------- */
@media (max-width: 1024px) {
  :root { --rd-header-h: 64px; }
  .nav-links { gap: 22px; }
}
@media (max-width: 768px) {
  .section-padding { padding-block: clamp(36px, 9vw, 64px); }
  .product-info { text-align: left; }
  button.product-add-btn { padding: 11px 14px; font-size: 11px; }
  .product-actions { opacity: 1; transform: none; right: 8px; bottom: 8px; }
  .action-btn { width: 36px; height: 36px; }
  .hero-slider h1, .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
}
@media (max-width: 480px) {
  :root { --rd-gutter: 16px; }
  .product-info { padding-top: 12px; }
  .price-current { font-size: 14px; }
}

/* 18. ---- Product detail page (PDP) ---------------------------- */
.product-detail-section { padding-block: clamp(28px, 4vw, 64px); }

/* Sticky editorial gallery on desktop */
@media (min-width: 992px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--rd-header-h) + 20px);
    align-self: start;
  }
}
.product-main-image {
  position: relative;
  aspect-ratio: var(--rd-img-ratio);
  background: var(--off-white);
  border-radius: var(--rd-card-radius);
  overflow: hidden;
}
.product-main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbnails { gap: 10px; margin-top: 12px; }
.product-thumbnails img {
  border-radius: var(--rd-card-radius);
  border: 1px solid var(--line);
  aspect-ratio: var(--rd-img-ratio);
  object-fit: cover;
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.product-thumbnails img:hover,
.product-thumbnails img.active { border-color: var(--ink); }
.pdp-share-btn {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
}

.product-info-panel .product-h1,
.product-info-panel h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.product-price-large { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.product-price-large .price-current {
  font-family: var(--font-ui);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--ink);
}
.product-price-large .price-old { font-size: 16px; color: var(--warm-gray); text-decoration: line-through; }
.price-discount { color: var(--accent); font-weight: 600; font-size: 14px; }
.tax-info { font-size: 12px; color: var(--warm-gray); letter-spacing: .02em; }
.product-short-desc { color: var(--graphite); font-size: var(--fs-lead); line-height: 1.7; }

.product-add-to-cart-box { gap: 12px; margin-block: 8px 4px; }
.qty-selector { border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty-btn { width: 44px; color: var(--ink); font-size: 18px; background: transparent; }
.qty-btn:hover { background: var(--off-white); }
.qty-input { font-family: var(--font-ui); font-weight: 600; }
.add-to-cart-btn-large {
  flex: 1;
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pdp-bulk-quote {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--graphite);
  font-family: var(--font-ui);
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.pdp-bulk-quote:hover { border-color: var(--ink); }
.text-action-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--graphite);
  background: transparent;
}
.text-action-btn:hover { color: var(--ink); }

.pdp-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
}
.pdp-trust-badge {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--graphite);
}
.pdp-trust-badge svg { color: var(--ink); }
.pdp-delivery-box {
  background: var(--off-white);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--graphite);
}

/* Sticky mobile add-to-cart bar */
.pdp-sticky-bar {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(20,20,20,.08);
}
.pdp-sticky-price { font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.pdp-sticky-atc {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  font-family: var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* 19. ---- Collection / category browsing ----------------------- */
.collection-hero {
  text-align: center;
  padding-block: clamp(32px, 5vw, 72px);
  background: var(--off-white);
}
.collection-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-tight);
}
.collection-body { padding-block: clamp(28px, 4vw, 56px); }
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 2.2vw, 36px) clamp(14px, 1.6vw, 24px);
}
.filter-bar {
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
  margin-bottom: 8px;
}
.filter-controls { gap: 12px; }
.filter-pills { gap: 8px; }
.filter-pills .filter-pill,
.filter-pill {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  color: var(--graphite);
  background: var(--white);
  transition: all var(--dur-fast) var(--rd-ease);
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.collection-empty { color: var(--warm-gray); font-family: var(--font-ui); text-align: center; padding-block: 64px; }

@media (max-width: 600px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
}

/* 20. ---- Breadcrumbs ------------------------------------------ */
.breadcrumb-wrapper { border-bottom: 1px solid var(--line); }
.breadcrumb {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .current { color: var(--ink); }

/* 21. ---- Phase A: Cart ---------------------------------------- */
.cart-layout { gap: clamp(24px, 4vw, 56px); align-items: start; }
.cart-header {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--warm-gray);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px;
}
.cart-item {
  border-bottom: 1px solid var(--line);
  padding-block: 20px;
  gap: 18px;
}
.ci-img {
  border-radius: var(--rd-card-radius);
  overflow: hidden;
  background: var(--off-white);
  aspect-ratio: var(--rd-img-ratio);
  object-fit: cover;
}
.ci-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}
.ci-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ci-price, .ci-total { font-family: var(--font-ui); color: var(--ink); }
.ci-total { font-weight: 600; }
.ci-qty {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.ci-remove {
  color: var(--warm-gray);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  transition: color var(--dur-fast) var(--rd-ease);
}
.ci-remove:hover { color: var(--accent); }

/* Sticky summary on desktop */
.summary-box {
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
}
@media (min-width: 992px) {
  .cart-summary-section { position: sticky; top: calc(var(--rd-header-h) + 20px); }
}
.summary-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 8px;
}
.summary-row { font-family: var(--font-ui); font-size: 14px; color: var(--graphite); padding-block: 7px; }
.summary-divider { border-top: 1px solid var(--line); margin-block: 8px; }
.summary-row.total-inc { font-weight: 700; color: var(--ink); font-size: 16px; }
.checkout-btn { margin-top: 16px; }
.btn-full { width: 100%; }

/* Promo / coupon UI */
.promo-box { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 16px; }
.promo-toggle {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  cursor: pointer;
}
.promo-form { display: flex; gap: 8px; margin-top: 10px; }
.promo-form input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-ui);
}
.coupon-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper);
  border: 1px dashed var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 10px;
  font-family: var(--font-ui);
}
.coupon-code { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.coupon-amt { color: var(--accent); font-weight: 600; }

.cart-reassure, .product-reassurance { margin-top: 16px; }
.reassure-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--graphite);
  padding-block: 6px;
}
.reassure-item svg { color: var(--ink); flex: none; }

/* Bulk-savings progress strip */
.gd-cart-progress-wrap:not(:empty) {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* 22. ---- Cart drawer / mini-cart ------------------------------ */
.drawer-overlay { background: rgba(20,20,20,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cart-drawer, #CartDrawer, [class*="cart-drawer"] {
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.drawer-header, .drawer-head {
  border-bottom: 1px solid var(--line);
  padding: 20px 22px;
}
.drawer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.drawer-close { color: var(--ink); background: transparent; }
.drawer-body { padding: 16px 22px; }
.drawer-footer { border-top: 1px solid var(--line); padding: 18px 22px; background: var(--off-white); }
.drawer-empty {
  text-align: center;
  color: var(--warm-gray);
  font-family: var(--font-ui);
  padding-block: 48px;
}

@media (max-width: 768px) {
  .cart-header { display: none; }
  .cart-item { grid-template-columns: 84px 1fr; gap: 14px; }
}

/* 23. ---- Phase B: Checkout ------------------------------------ */
.checkout-layout { gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 992px) {
  .checkout-mini-cart, .summary-section { position: sticky; top: calc(var(--rd-header-h) + 20px); }
}

/* Numbered steps */
.checkout-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--white);
  transition: border-color var(--dur-fast) var(--rd-ease), box-shadow var(--dur-fast) var(--rd-ease);
}
.checkout-step.is-active,
.checkout-step[aria-current="step"] { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.step-header { display: flex; align-items: center; gap: 14px; }
.step-number {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  flex: none;
}
.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
}
.step-content { padding-top: 16px; }
.step-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Address list */
.addr-list { display: grid; gap: 12px; }
.addr-list > * {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-ui);
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.addr-list > *:hover { border-color: var(--ink); }
.addr-list .selected,
.addr-list [aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Shipping options — selectable cards */
.shipping-options { display: grid; gap: 12px; }
.shipping-option {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.shipping-option:hover { border-color: var(--ink); }
.shipping-option.selected,
.shipping-option[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.shipping-name { font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.shipping-time { font-size: 13px; color: var(--warm-gray); }
.shipping-price { font-family: var(--font-ui); font-weight: 600; color: var(--ink); }

/* Payment selection */
.pay-options, .payment-options { display: grid; gap: 12px; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--white);
}
.pay-label {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--dur-fast) var(--rd-ease);
}
.pay-label:hover { border-color: var(--ink); }
.pay-label.selected,
.pay-label[aria-checked="true"],
input:checked + .pay-label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pay-title { font-weight: 600; color: var(--ink); }
.pay-sub { font-size: 13px; color: var(--warm-gray); }
.pay-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; border-radius: var(--radius-pill); padding: 3px 9px;
}
.pay-info { font-size: 13px; color: var(--graphite); background: var(--off-white); border-radius: var(--radius-sm); padding: 12px 14px; }
.pay-btn { width: 100%; }

/* Trust strip / cards */
.trust-strip, .trust-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.trust-card, .trust-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--graphite);
}
.trust-card-title, .trust-t { font-weight: 600; color: var(--ink); }
.trust-foot { display: flex; flex-wrap: wrap; gap: 14px; color: var(--warm-gray); font-size: 12px; }
.trust-foot-item { display: flex; align-items: center; gap: 8px; }

@media (max-width: 768px) {
  .checkout-step { padding: 18px; }
  .shipping-option, .pay-label { padding: 14px; }
}

/* 24. ---- Phase C: Predictive search --------------------------- */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1000;
  padding: 8px;
}
.sd-section-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--warm-gray);
  padding: 10px 10px 6px;
}
.sd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background var(--dur-fast) var(--rd-ease);
}
.sd-item:hover, .sd-item.is-active { background: var(--off-white); }
.sd-thumb {
  flex: 0 0 52px; width: 52px; height: 64px;
  border-radius: var(--radius-xs);
  background: var(--off-white);
  overflow: hidden;
  display: grid; place-items: center;
}
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-thumb-ico { font-size: 20px; }
.sd-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sd-name {
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 500;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sd-price { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink); }
.sd-all {
  display: block;
  text-align: center;
  padding: 12px;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.sd-all:hover, .sd-all.is-active { background: var(--off-white); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 12px; }
.sd-chip {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  background: var(--white);
  color: var(--graphite);
  transition: all var(--dur-fast) var(--rd-ease);
}
.sd-chip:hover, .sd-chip.is-active { border-color: var(--ink); color: var(--ink); background: var(--off-white); }
.sd-loading, .sd-empty {
  padding: 22px 14px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--warm-gray);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sd-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: sdSpin .7s linear infinite;
}
@keyframes sdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sd-spinner { animation-duration: 2s; } }

/* 25. ---- Phase D: Wishlist ------------------------------------ */
.wl-drawer-overlay {
  background: rgba(20,20,20,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wl-drawer {
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.wl-drawer-header {
  border-bottom: 1px solid var(--line);
  padding: 20px 22px;
}
.wl-drawer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  display: flex; align-items: center; gap: 10px;
}
.wl-count {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.wl-drawer-close { color: var(--ink); background: transparent; font-size: 18px; }
.wl-drawer-body { padding: 14px 22px; }
.wl-drawer-footer { border-top: 1px solid var(--line); padding: 16px 22px; }
.wl-clear-all {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px;
  background: var(--white);
  color: var(--graphite);
  transition: all var(--dur-fast) var(--rd-ease);
}
.wl-clear-all:hover { border-color: var(--accent); color: var(--accent); }

.wl-drawer-empty {
  text-align: center;
  color: var(--warm-gray);
  font-family: var(--font-ui);
  padding-block: 48px;
}
.wl-drawer-empty svg { width: 40px; height: 40px; color: var(--line); margin-bottom: 12px; }
.wl-drawer-empty h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 18px; }

.wl-item {
  display: flex;
  gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.wl-item-img {
  flex: 0 0 72px; width: 72px;
  aspect-ratio: var(--rd-img-ratio);
  border-radius: var(--rd-card-radius);
  overflow: hidden;
  background: var(--off-white);
}
.wl-item-img img { width: 100%; height: 100%; object-fit: cover; }
.wl-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wl-item-name { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.wl-item-price { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); }
.wl-item-price .price-old { font-size: 12px; color: var(--warm-gray); text-decoration: line-through; margin-left: 6px; }
.wl-item-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.wl-btn-cart {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 9px 14px;
  transition: all var(--dur-fast) var(--rd-ease);
}
.wl-btn-cart:hover { background: transparent; color: var(--ink); }
.wl-btn-remove {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--warm-gray); border: none;
  padding: 9px 6px;
  transition: color var(--dur-fast) var(--rd-ease);
}
.wl-btn-remove:hover { color: var(--accent); }

/* 26. ---- Phase E: Customer dashboard -------------------------- */
.acct-wrap { gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) {
  .acct-sidebar { position: sticky; top: calc(var(--rd-header-h) + 20px); }
}
.acct-user-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  background: var(--off-white);
}
.acct-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 auto 12px;
}
.acct-uname { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.acct-uphone { font-family: var(--font-ui); font-size: 13px; color: var(--warm-gray); }
.acct-nav { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.acct-nav-item {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--rd-ease), color var(--dur-fast) var(--rd-ease);
}
.acct-nav-item:hover { background: var(--off-white); color: var(--ink); }
.acct-nav-item.active {
  background: var(--off-white);
  color: var(--ink);
  border-left-color: var(--ink);
  font-weight: 600;
}
.acct-logout-btn {
  width: 100%;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--graphite);
  padding: 12px;
  transition: all var(--dur-fast) var(--rd-ease);
}
.acct-logout-btn:hover { border-color: var(--accent); color: var(--accent); }

.acct-content { min-width: 0; }
.acct-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 32px);
  background: var(--white);
}
.acct-panel h2, .acct-panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.acct-form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-field label, .acct-field > span {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--warm-gray);
}
.acct-field input, .acct-field select, .acct-field textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-ui);
}
.acct-save-btn { margin-top: 4px; }

/* Orders */
.orders-list { display: grid; gap: 18px; }
.orders-login-prompt, .empty-state {
  text-align: center;
  font-family: var(--font-ui);
  color: var(--warm-gray);
  padding-block: 56px;
}
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.order-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.order-id { font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.order-date { font-family: var(--font-ui); font-size: 13px; color: var(--warm-gray); }
.order-status {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  background: var(--ink); color: #fff;
}
.order-items-list { padding: 8px 20px; }
.order-item-row { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.order-item-row:last-child { border-bottom: none; }
.order-item-name { font-family: var(--font-ui); font-size: 14px; color: var(--ink); }
.order-item-price { font-family: var(--font-ui); font-weight: 600; color: var(--ink); margin-left: auto; }
.order-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-weight: 700; color: var(--ink);
}
.order-tracking { padding: 16px 20px; border-top: 1px solid var(--line); }
.order-tracking-title { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--warm-gray); }
.order-tracking-btn {
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 10px 16px;
  transition: all var(--dur-fast) var(--rd-ease);
}
.order-tracking-btn:hover { background: transparent; color: var(--ink); }
.order-tracking-btn.ghost { background: transparent; color: var(--ink); }
.order-tracking-btn.ghost:hover { background: var(--ink); color: #fff; }

@media (max-width: 768px) {
  .order-card-head { padding: 14px; }
}

/* 27. ---- Phase F: Premium editorial footer -------------------- */
.ft-premium, .ft-shell {
  background: var(--footer-dark);
  color: rgba(255,255,255,.72);
}
/* Tone the decorative glow down to a restrained, neutral wash */
.ft-glow {
  background: radial-gradient(60% 120% at 80% 0%, rgba(255,255,255,.05), transparent 70%) !important;
  opacity: 1 !important;
  filter: none !important;
}
.ft-container { padding-block: clamp(40px, 6vw, 72px); }
.ft-logo-text { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.ft-logo .logo-icon { background: #fff; color: var(--ink); }
.ft-tagline { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 38ch; }

.ft-trust-ind-lbl { font-family: var(--font-ui); font-weight: 600; color: #fff; font-size: 13px; }
.ft-trust-ind-sub { font-size: 12px; color: rgba(255,255,255,.55); }
.ft-trust-ind-ico, .ft-contact-ico { color: #fff; }

.ft-address { color: rgba(255,255,255,.62); font-size: 13px; }

.ft-social { gap: 10px; }
.ft-social-link {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  transition: background var(--dur-fast) var(--rd-ease), color var(--dur-fast) var(--rd-ease);
}
.ft-social-link:hover { background: #fff; color: var(--ink); }

/* Payment card panel — keep light cards (logos need light bg) but refine */
.ft-pay {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
}
.ft-pay-title { font-family: var(--font-ui); font-size: 11px; letter-spacing: var(--tracking-wide); color: rgba(255,255,255,.6); }
.ft-pay-secure { font-size: 11px; color: rgba(255,255,255,.7); }
.ft-pay-card { background: #fff; border-radius: var(--radius-xs); }
.ft-pay-cod { color: rgba(255,255,255,.7); font-size: 12.5px; }

/* Link columns */
.ft-col-head {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  background: transparent;
}
.ft-col-list a {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: rgba(255,255,255,.66);
  transition: color var(--dur-fast) var(--rd-ease);
}
.ft-col-list a:hover { color: #fff; }

/* Trust + contact cards on dark */
.ft-trust-card, .ft-contact-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
}
.ft-trust-card-lbl, .ft-contact-main { color: #fff; font-family: var(--font-ui); font-weight: 600; }
.ft-trust-card-sub, .ft-contact-sub { color: rgba(255,255,255,.55); font-size: 12px; }

/* Legal strip */
.ft-legal {
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  font-family: var(--font-ui);
  font-size: 12.5px;
}
.ft-legal-links a { color: rgba(255,255,255,.7); }
.ft-legal-links a:hover { color: #fff; }

/* ================================================================
   28. WEARZY V3 — LUXURY ROUNDED LANGUAGE
   Evolves the editorial V2 toward the soft, rounded, spacious,
   centered-logo reference direction. Override layer (loads last).
   ================================================================ */
:root {
  --rd-card-radius: 20px;      /* product imagery */
  --rd-section-radius: 32px;   /* rounded section containers */
  --rd-panel-radius: 24px;     /* menus / drawers / overlays */
  --dur-base: .4s;             /* 300–450ms luxury timing */
  --dur-slow: .7s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Rounded media & cards ---- */
.product-image-wrapper,
.banner-card,
.ci-img,
.wl-item-img,
.product-main-image,
.product-thumbnails img,
.sd-thumb { border-radius: var(--rd-card-radius); }

.product-card:hover { transform: translateY(-4px); }
.product-card:hover .product-image { transform: scale(1.06); }

.summary-box,
.checkout-step,
.acct-panel,
.acct-user-card,
.order-card,
.pdp-delivery-box,
.kpi-card,
.trust-card,
.trust-item { border-radius: var(--rd-panel-radius); }

/* ---- Rounded section containers (category / trending / products) ---- */
.trending-categories-section > .container,
.section-padding[style*="background"],
.ts-section .ts-container {
  border-radius: var(--rd-section-radius);
}
.ts-section { border-radius: var(--rd-section-radius); margin-inline: clamp(0px, 2vw, 24px); }

/* ---- Menus / drawers / search overlay rounding ---- */
.nav-dropdown { border-radius: var(--rd-panel-radius); }
.nav-dropdown.product-nav-mega,
.nav-dropdown.shop-nav-mega { border-radius: var(--rd-section-radius); }
.search-dropdown { border-radius: var(--rd-panel-radius); }
.cart-drawer, #CartDrawer, [class*="cart-drawer"],
.wl-drawer { border-top-left-radius: var(--rd-panel-radius); border-bottom-left-radius: var(--rd-panel-radius); }

/* ---- Buttons: pill option, softer ---- */
.btn-primary, .btn-outline {
  border-radius: var(--radius-pill);
  padding-inline: 34px;
}
button.product-add-btn { border-radius: var(--radius-pill); }

/* ---- Generous editorial spacing ---- */
.section-padding { padding-block: clamp(56px, 8vw, 128px); }
.section-header { margin-bottom: clamp(28px, 3.5vw, 56px); }

/* ---- Header: centered logo + transparent-over-hero ---- */
.site-header .header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  min-height: 80px;
}
.site-header .logo { justify-self: center; grid-column: 2; }
.site-header .search-container { display: none; }   /* V3: search lives in the fullscreen overlay */
.site-header .header-actions { justify-self: end; grid-column: 3; }
.site-header .mob-hamburger { grid-column: 1; justify-self: start; }
.wz-search-trigger {
  background: transparent; border: none; cursor: pointer;
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  color: var(--ink);
}
.site-header.over-hero .wz-search-trigger { color: #fff; }

/* Transparent over a hero (homepage / collection hero), solid on scroll */
.site-header.over-hero {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.over-hero .logo,
.site-header.over-hero .header-action-btn,
.site-header.over-hero .nav-links a { color: #fff; }
.site-header.over-hero .logo-icon { background: #fff; color: var(--ink); }
.site-header.over-hero .search-container {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}
.site-header.over-hero .search-input { color: #fff; }
.site-header.over-hero .search-input::placeholder { color: rgba(255,255,255,.7); }
.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: var(--shadow-sm);
}

/* Hero: cinematic full-viewport */
.hero-slider {
  min-height: clamp(540px, 88vh, 920px);
}

/* ---- Fullscreen search overlay (V3) ---- */
.wz-search-overlay {
  position: fixed; inset: 0;
  background: rgba(247,245,241,.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 4000;
  display: flex; flex-direction: column;
  padding: clamp(20px, 6vw, 72px) clamp(16px, 8vw, 120px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.wz-search-overlay.open { opacity: 1; visibility: visible; }
.wz-search-overlay-top { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 16px; }
.wz-search-overlay input {
  flex: 1;
  border: none; background: transparent;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 56px);
  color: var(--ink);
  letter-spacing: -.01em;
}
.wz-search-overlay input:focus { outline: none; }
.wz-search-close {
  background: transparent; border: none; color: var(--ink);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.wz-search-body { margin-top: clamp(20px, 4vw, 48px); overflow-y: auto; }

@media (max-width: 768px) {
  .site-header .header-inner { grid-template-columns: auto 1fr auto; min-height: 60px; }
  .site-header .search-container { display: none; }
  :root { --rd-section-radius: 24px; --rd-panel-radius: 20px; }
}

/* ================================================================
   29. WEARZY V4 — REFERENCE ALIGNMENT (grotesque sans, minimal cards)
   Art-direction pass to match the benchmark: clean sans typography,
   minimal product cards (bookmark + "+"), light rounded section
   containers, refined section headers. Override layer (loads last).
   ================================================================ */

/* ---- Typography: grotesque sans system (no serif) -------------- */
:root {
  --font-display: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.hero-title, .hero-slider h1, .section-title, .page-title,
.collection-hero h1, h1.product-h1, .about-title, .ts-title,
.cta-title, .banner-title, .summary-title, .drawer-title,
.wl-drawer-title, .step-title, .acct-uname {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Logo: bold uppercase sans wordmark (benchmark style) */
.logo, .ft-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.logo-icon { font-family: var(--font-display); font-weight: 800; }

/* ---- Minimal product card (bookmark + "+") --------------------- */
button.product-add-btn { display: none; }              /* drop the full-width button */
.product-info { padding-top: 14px; }
.product-actions {                                     /* let icons pin to image corners */
  position: static;
  display: contents;
  opacity: 1;
  transform: none;
}
.product-card .action-btn[title="Quick View"],
.product-card .action-btn[title="Compare"] { display: none; }   /* declutter */
.product-card .action-btn {
  position: absolute;
  opacity: 1; transform: none;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-xs);
  border: none;
}
.product-card .action-btn[title="Add to Wishlist"] { top: 12px; right: 12px; }
.product-card .product-add-btn-icon { bottom: 12px; right: 12px; background: var(--ink); color: #fff; }
.product-card .product-add-btn-icon:hover { background: var(--ink-soft); }
.product-card .action-btn[title="Add to Wishlist"]:hover { background: #fff; color: var(--accent); }
/* keep both corner controls visible on touch + hover alike */
.product-card:hover .action-btn { opacity: 1; }

.product-title { font-size: 13.5px; color: var(--graphite); }
.product-title a { color: var(--ink); }
.price-current { font-size: 14px; }

/* ---- Light rounded section containers -------------------------- */
.trending-categories-section,
.ts-section { background: var(--off-white); }
.section-padding > .container,
.trending-categories-section > .container {
  /* breathing room inside rounded sections */
  padding-block: clamp(8px, 1vw, 16px);
}
/* Product sliders sit on a soft, rounded canvas like the benchmark */
.product-slider-wrap {
  background: var(--off-white);
  border-radius: var(--rd-section-radius);
  padding: clamp(18px, 2.5vw, 36px);
}

/* ---- Section header: label left, "Discover more" pill right ---- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.section-title { margin: 0; }
.section-header a,
.section-header .see-all,
.section-header [href] {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.section-header a:hover { background: var(--ink); color: #fff; }

/* ---- Carousel arrows: circular, benchmark-style ---------------- */
.slider-arrow, .hero-arrow, .ts-arrow {
  width: 44px; height: 44px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

/* ---- Hero: cleaner minimal CTA --------------------------------- */
.hero-slider .btn-primary {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.7);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-slider .btn-primary:hover { background: #fff; color: var(--ink); }

@media (max-width: 768px) {
  .product-slider-wrap { padding: 14px; border-radius: var(--rd-panel-radius); }
  .section-header a { padding: 7px 14px; font-size: 11px; }
}

/* ================================================================
   30. STORE LOCATOR
   ================================================================ */
.sl-hero {
  text-align: center;
  padding-block: clamp(40px, 7vw, 96px);
  background: var(--off-white);
}
.sl-hero-eyebrow { display: block; margin-bottom: 12px; }
.sl-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  letter-spacing: -.02em;
  line-height: 1.04;
}
.sl-hero-sub {
  max-width: 56ch; margin: 14px auto 0;
  color: var(--graphite); font-size: var(--fs-lead); line-height: 1.7;
}
.sl-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: clamp(20px, 3vw, 36px) auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-sm);
}
.sl-search svg { color: var(--warm-gray); flex: none; }
.sl-search input { flex: 1; border: none; background: transparent; font-family: var(--font-ui); font-size: 15px; }
.sl-search input:focus { outline: none; }
.sl-search .btn-primary { padding: 12px 24px; }

.sl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
}
.sl-card {
  border: 1px solid var(--line);
  border-radius: var(--rd-panel-radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.sl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sl-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2b2b2b, #141414);
  color: rgba(255,255,255,.92);
}
.sl-media-2 { background: linear-gradient(135deg, #4a5560, #20262d); }
.sl-media-3 { background: linear-gradient(135deg, #5b5d43, #2c2e20); }
.sl-card-media-label {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(20px, 3vw, 30px);
  opacity: .9;
}
.sl-card-city {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.sl-card-body { padding: 22px; }
.sl-card-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.sl-card-addr { color: var(--graphite); font-size: 14px; line-height: 1.6; margin-top: 6px; }
.sl-card-meta { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.sl-card-meta li { display: flex; gap: 12px; font-size: 13.5px; color: var(--graphite); }
.sl-meta-k { width: 56px; flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--warm-gray); padding-top: 2px; }
.sl-card-meta a { color: var(--ink); }
.sl-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sl-card-actions .btn-primary, .sl-card-actions .btn-outline { padding: 11px 20px; font-size: 12px; }
.sl-empty { text-align: center; color: var(--warm-gray); font-family: var(--font-ui); padding-block: 40px; }

.sl-map {
  position: relative;
  margin-top: clamp(28px, 4vw, 56px);
  height: clamp(280px, 38vw, 460px);
  border-radius: var(--rd-section-radius);
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #eef1f4, #e3e7ec);
  border: 1px solid var(--line);
}
.sl-map-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .5;
}
.sl-map-pin {
  position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0;
  background: var(--ink); transform: rotate(-45deg);
  box-shadow: var(--shadow-md);
}
.sl-map-pin::after { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; }
.sl-map-pin-1 { top: 34%; left: 28%; }
.sl-map-pin-2 { top: 56%; left: 58%; }
.sl-map-pin-3 { top: 42%; left: 76%; }
.sl-map-note {
  position: absolute; bottom: 14px; right: 16px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em;
  color: var(--warm-gray); background: rgba(255,255,255,.8);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
@media (max-width: 600px) {
  .sl-grid { grid-template-columns: 1fr; }
  .sl-search { flex-wrap: wrap; border-radius: var(--rd-panel-radius); }
}

/* ================================================================
   31. PREMIUM MEGA MENU (built by redesign.js as .wz-mega)
   ================================================================ */
/* When our mega panel is present, hide the legacy JS dropdown. */
.nav-link-wrap:has(.wz-mega) > .nav-dropdown { display: none !important; }

.wz-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(1100px, calc(100vw - 48px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--rd-section-radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 36px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: 800;
}
.nav-link-wrap:hover .wz-mega,
.nav-link-wrap:focus-within .wz-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.wz-mega-col-title {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 14px;
}
.wz-mega-links { display: flex; flex-direction: column; gap: 2px; }
.wz-mega-links a {
  font-family: var(--font-ui);
  font-size: 13.5px; color: var(--graphite);
  padding: 7px 10px; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wz-mega-links a:hover { background: var(--off-white); color: var(--ink); }
.wz-mega-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-mega-chip {
  font-family: var(--font-ui); font-size: 12.5px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 14px; color: var(--graphite);
  transition: all var(--dur-fast) var(--ease-out);
}
.wz-mega-chip:hover { border-color: var(--ink); color: var(--ink); }
/* Shop by Color pills */
.wz-mega-colors { grid-column: span 2; }
.wz-color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wz-color {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--graphite);
  padding: 6px 8px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
.wz-color:hover { background: var(--off-white); color: var(--ink); }
.wz-color-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12); flex: none;
}
/* Featured block */
.wz-mega-feature {
  grid-column: span 2;
  border-radius: var(--rd-panel-radius);
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #2b2b2b, #141414);
  color: #fff;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
}
.wz-mega-feature .ft-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.wz-mega-feature h4 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 6px 0 12px; }
.wz-mega-feature a { color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; align-self: flex-start; }

@media (max-width: 1080px) {
  .wz-mega { grid-template-columns: repeat(2, 1fr); }
  .wz-mega-feature { grid-column: span 2; min-height: 160px; }
}
@media (max-width: 768px) {
  .wz-mega { display: none; } /* mobile uses the nav drawer */
}

/* ================================================================
   32. LOADING SKELETONS (injected into empty product containers)
   ================================================================ */
.wz-skel-card { display: flex; flex-direction: column; gap: 12px; }
.wz-skel-img {
  aspect-ratio: var(--rd-img-ratio);
  border-radius: var(--rd-card-radius);
  background: var(--off-white);
}
.wz-skel-line { height: 12px; border-radius: 6px; background: var(--off-white); }
.wz-skel-line.short { width: 45%; }
.wz-skel-img, .wz-skel-line {
  position: relative; overflow: hidden;
}
.wz-skel-img::after, .wz-skel-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%);
  animation: wzShimmer 1.3s infinite;
}
@keyframes wzShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .wz-skel-img::after, .wz-skel-line::after { animation: none; }
}
/* Sale / sold-out badges (consistent, in case markup adopts classes) */
.product-badge.soldout { background: var(--ink); color: #fff; }

/* ================================================================
   33. WEARZY V6 — BLUORNG-style clean header (no secondary nav bar)
   ================================================================ */
/* Retire the legacy red "Browse Categories" nav bar entirely. */
.main-nav { display: none !important; }

/* Left header nav (New In / Collections), injected by redesign.js */
.wz-nav-left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}
.wz-nav-item {
  position: relative;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: none; border: none; cursor: pointer;
  padding: 6px 0;
}
.wz-nav-item::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.wz-nav-item:hover::after, .wz-nav-item.open::after { transform: scaleX(1); transform-origin: left; }
.site-header.over-hero .wz-nav-item { color: #fff; }

/* Mega panel now anchors under the whole header and toggles via .open */
.site-header { position: sticky; }
.wz-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
}
.nav-link-wrap:hover .wz-mega { opacity: 0; visibility: hidden; pointer-events: none; } /* neutralise legacy rule */
.wz-mega.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Minimal header actions to match the reference (icon-led) */
.header-actions { gap: clamp(12px, 1.4vw, 20px); }
#btnAccount { font-size: 11px; font-weight: 600; letter-spacing: .08em; }

@media (max-width: 768px) {
  .wz-nav-left { display: none; }   /* mobile uses hamburger + drawer */
}

/* ================================================================
   34. WEARZY V7 — product/image frame sizing to match the reference
   Reference product tiles read as a portrait ~4:5 with a subtle
   corner radius; collection banners are landscape ~4:3.
   ================================================================ */
:root {
  --rd-img-ratio: 4 / 5;     /* product card / gallery portrait frame */
  --rd-card-radius: 14px;    /* subtler rounding on product imagery */
  --rd-banner-ratio: 4 / 3;  /* landscape collection banners */
}

/* Product cards + PDP gallery inherit --rd-img-ratio (already wired). */
.product-image-wrapper,
.product-main-image { aspect-ratio: var(--rd-img-ratio); }

/* Slightly tighter thumb frames for cart / wishlist / search rows */
.ci-img, .wl-item-img { aspect-ratio: var(--rd-img-ratio); }

/* Collection banner tiles: fixed landscape frame so the grid is even */
.banner-card { aspect-ratio: var(--rd-banner-ratio); }
.banner-card img { width: 100%; height: 100%; object-fit: cover; }
.banner-card-lg { aspect-ratio: 1 / 1; }     /* feature tile is squarer */
.banner-card-tall { aspect-ratio: 3 / 4; }   /* tall accent tile */

@media (max-width: 768px) {
  .banner-card, .banner-card-lg, .banner-card-tall { aspect-ratio: var(--rd-banner-ratio); }
}

/* ================================================================
   35. WEARZY V8 — card dots, icon-only header row, fallbacks
   ================================================================ */
/* Product card hover angle-indicator dots */
.pc-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.product-card:hover .pc-dots { opacity: 1; }
.pc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(20,20,20,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.pc-dot.is-active { background: var(--ink); }

/* Icon-only account control (keep the bound #btnAccount element) */
.header-actions #btnAccount {
  position: relative;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  font-size: 0;                 /* hide the LOGIN/REGISTER text */
  color: var(--ink);
}
.header-actions #btnAccount::before {
  content: "";
  width: 21px; height: 21px;
  background: currentColor;
  -webkit-mask: var(--wz-user-icon) center / contain no-repeat;
  mask: var(--wz-user-icon) center / contain no-repeat;
}
:root {
  --wz-user-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.site-header.over-hero #btnAccount,
.site-header.over-hero .wz-store-pin { color: #fff; }
.wz-store-pin { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
/* On mobile keep the account label readable (text) */
@media (max-width: 768px) {
  .header-actions #btnAccount { width: auto; height: auto; font-size: 11px; }
  .header-actions #btnAccount::before { display: none; }
  .wz-store-pin { display: none; }
}

/* Refined category fallback (letter-in-circle) — more intentional */
.trending-cat-letter {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.02em;
}
.trending-cat-img { border-radius: 50%; overflow: hidden; }

/* ================================================================
   36. WEARZY V9 — homepage spec alignment (strict spacing system)
   Implements the supplied measurement spec: grey page + white rounded
   section cards, fixed radii/type scale, 4-col grid, campaign banner,
   mega-menu dimensions. Override layer (loads last).
   ================================================================ */
:root {
  /* Radius system (spec) */
  --rd-card-radius: 16px;       /* product image */
  --rd-panel-radius: 18px;      /* cards */
  --rd-section-radius: 24px;    /* collection containers */
  --rd-mega-radius: 28px;
  --rd-banner-radius: 26px;     /* campaign banner */
  --dur-base: .3s;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page canvas: soft grey so white cards pop */
body { background: #F6F6F6; }

/* ---- Header: 72px, white, subtle border, 24px gutters ---------- */
.site-header { background: #fff; border-bottom: 1px solid #ececec; }
.site-header.is-scrolled { background: rgba(255,255,255,.96); }
.site-header .header-inner { min-height: 72px; padding-inline: 24px; }
.header-actions { gap: 16px; }
.header-action-btn svg, .wz-store-pin svg, .wz-search-trigger svg { width: 22px; height: 22px; }
.header-action-btn, .wz-store-pin, .wz-search-trigger { min-width: 32px; min-height: 32px; }
.wz-nav-item { font-size: 14px; font-weight: 500; }

/* ---- Hero: 100vh, text-only "Shop now" near the bottom --------- */
.hero-slider { min-height: 100vh; border-radius: 0; }
.hero-slider .btn-primary {
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff;
  border-radius: 0;
  padding: 4px 2px;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  position: relative;
}
.hero-slider .btn-primary::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: #fff; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.hero-slider .btn-primary:hover { background: transparent; color: #fff; }
.hero-slider .btn-primary:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Section rhythm + white collection cards ------------------- */
.section-padding { padding-block: clamp(36px, 4vw, 48px); }
.product-slider-wrap {
  background: #fff;
  border-radius: var(--rd-section-radius);
  padding: 22px;
}
.trending-categories-section, .ts-section { background: transparent; }

/* Collection header: title left, black Discover-More pill right */
.section-header a, .section-header [href] {
  background: var(--ink); color: #fff; border: none;
  min-width: 132px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 12px; letter-spacing: .04em;
}
.section-header a:hover { background: var(--ink-soft); color: #fff; }
.section-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

/* ---- Product grid: 4-col, 8px gap, 16px image radius ----------- */
.product-slider { gap: 8px; }
.collection-grid { gap: 8px; grid-template-columns: repeat(4, 1fr); }
.product-image-wrapper { aspect-ratio: 5 / 7; border-radius: 16px; box-shadow: none; }
.product-card { box-shadow: none; }
.product-info { padding: 10px 2px 0; }
.product-title { font-size: 13px; font-weight: 500; }
.price-current { font-size: 13px; font-weight: 400; }
.price-old { font-size: 12px; }
.product-card .action-btn[title="Add to Wishlist"] svg { width: 18px; height: 18px; }

/* Hover arrows on carousels (circular, subtle) */
.slider-arrow {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(20,20,20,.08);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.product-slider-wrap:hover .slider-arrow { opacity: 1; }

/* ---- Campaign / feature banner --------------------------------- */
.cta-banner {
  border-radius: var(--rd-banner-radius);
  min-height: clamp(420px, 56vw, 760px);
  margin-inline: clamp(0px, 2vw, 24px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.cta-title { font-size: clamp(34px, 5vw, 56px); font-weight: 700; color: #fff; }
.cta-subtitle, .cta-banner .cta-content { color: #fff; }

/* ---- Mega menu dimensions (spec) ------------------------------- */
.wz-mega {
  width: calc(100% - 32px);
  border-radius: var(--rd-mega-radius);
  background: #F2F2F2;
  border-color: #e6e6e6;
  padding: 34px;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(28px, 4vw, 70px);
}
.wz-mega-feature { grid-column: auto; }
.wz-mega-colors { grid-column: auto; }
.wz-color-grid { grid-template-columns: 1fr; }

@media (max-width: 1024px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .wz-mega { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-slider { min-height: 75vh; }
}

/* ================================================================
   37. WEARZY V10 — hero composition + page rhythm (reference match)
   ================================================================ */
/* Full-bleed hero image, content anchored bottom-center ~70px up,
   minimal overlay (reference shows just a CTA / short title). */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider .hero-image,
.hero-slide .hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-slide { position: relative; min-height: 100vh; }
/* Legibility scrim at the bottom so white text reads on any image */
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0) 38%);
  pointer-events: none;
}
.hero-slider .hero-slide-inner {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding-bottom: 70px;
}
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Minimal overlay: drop the eyebrow + subtitle, keep a restrained title */
.hero-slider .hero-eyebrow,
.hero-slider .hero-subtitle { display: none; }
.hero-slider .hero-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
.hero-cta { color: #fff; }

/* Hero slider pagination dots (if rendered) — centered, subtle */
.hero-slider .hero-dots, .hero-slider .slider-dots {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero-slider .hero-dots .dot, .hero-slider .slider-dots .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.5);
}
.hero-slider .hero-dots .dot.is-active, .hero-slider .slider-dots .dot.active {
  width: 22px; background: #fff;
}

/* ---- Consistent vertical rhythm between stacked sections ------- */
.hero-slider + * { margin-top: 32px; }
.section-padding,
.category-banners,
.about-section,
.cta-banner,
.ts-section,
.trending-categories-section,
.bulk-cta-section { margin-block: clamp(18px, 2.4vw, 24px); }

/* White card treatment for the remaining editorial sections so the
   whole page reads as cards on the grey canvas (reference rhythm). */
.about-section .about-grid,
.bulk-cta-section .bulk-cta-grid {
  background: #fff;
  border-radius: var(--rd-section-radius);
  padding: clamp(22px, 3vw, 44px);
}
.category-banners { padding-inline: clamp(0px, 2vw, 24px); }

/* ================================================================
   38. WEARZY V11 — evidence-based pass (from live vs reference SS)
   ================================================================ */
/* 1. Remove the top announcement strip — reference has no top bar. */
.top-bar { display: none !important; }

/* 2. Hero overlay = image + minimal CTA only (hide the big title). */
.hero-slider .hero-title { display: none; }
.hero-slider .hero-slide-inner { padding-bottom: 64px; }
.hero-cta {
  font-size: 13px; letter-spacing: .12em; text-transform: none; font-weight: 500;
}

/* 3. Left nav: light, sentence-case (reference style). */
.wz-nav-item {
  text-transform: none;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

/* 4. Header icons: thin, light, refined; drop Compare from header. */
.header-actions svg,
.wz-store-pin svg,
.wz-search-trigger svg { stroke-width: 1.5; }
.header-actions #btnCMPOpen { display: none; }   /* no compare in reference header */
.header-action-btn, .wz-store-pin, .wz-search-trigger { color: var(--graphite); }
.header-action-btn:hover, .wz-store-pin:hover, .wz-search-trigger:hover { color: var(--ink); }
.site-header.over-hero .header-action-btn,
.site-header.over-hero .wz-store-pin,
.site-header.over-hero .wz-search-trigger { color: #fff; }

/* 5. Trending category fallback: elegant neutral, not bright gradients. */
.trending-cat-card .trending-cat-img { background: #ece8e1 !important; }
.trending-cat-letter { color: var(--ink); opacity: .35; }

/* ================================================================
   39. WEARZY V12 — section-header pill text + carousel polish
   ================================================================ */
/* "See All" / "Discover more" pills: force white text on the black pill
   (overrides a legacy inline accent color in the markup). */
.section-header a,
.section-header [href] { color: #fff !important; }
.section-header a svg { color: currentColor; }

/* Keep the product tabs row from colliding with the pill on small widths */
@media (max-width: 600px) {
  .section-header { flex-wrap: wrap; gap: 12px; }
  .section-header a { order: 3; }
}