/* BWET brand storefront bundle — Sprint 40 + @layer migration */
@layer tokens, reset, layout, components, features, pdp, a11y, utilities, overrides;

@layer layout {
body.brand-storefront {
  --layout-cart-drawer-width: 420px;
  --layout-cart-drawer-z-index: 201;
  --layout-cart-overlay-z-index: 200;
  --layout-content-max-width: 1280px;
  --layout-grid-culture-gap: var(--space-4);
  --layout-grid-culture-min-column: 260px;
  --layout-hero-classic-height: min(85vh, var(--viewport-height, 85vh));
  --layout-hero-classic-min-height: clamp(280px, 42vh, 500px);
  --layout-hero-content-max-width: min(40rem, 100%);
  --layout-hero-content-padding: var(--space-8) var(--space-7);
  --layout-hero-exp-min-height: clamp(360px, min(72vh, var(--viewport-height, 72vh)), 720px);
  --layout-hero-mobile-classic-min-height: clamp(320px, 70vh, 640px);
  --layout-hero-mobile-exp-min-height: clamp(320px, 70vh, 720px);
  --layout-hero-narrow-classic-min-height: clamp(280px, min(65vh, var(--viewport-height, 65vh)), 480px);
  --layout-hero-narrow-exp-min-height: 320px;
  --layout-nav-drawer-width: 260px;
  --layout-nav-drawer-z-index: 101;
  --layout-nav-height: 64px;
  --layout-nav-links-gap: var(--space-5);
  --layout-nav-logo-height: 36px;
  --layout-nav-padding-inline: var(--space-6);
  --layout-nav-padding-inline-mobile: var(--space-4);
  --layout-nav-z-index: 100;
  --layout-newsletter-form-max-width: 440px;
  --layout-radius-card: 12px;
  --layout-radius-chip: 20px;
  --layout-radius-control: 4px;
  --layout-radius-pill: 100px;
  --layout-radius-story: 8px;
  --layout-touch-target: 44px;
}

@scope (body.brand-storefront) {
h1,
    h2,
    h3,
    h4,
    h5,
    h6 { font-family: var(--heading-font); }
    /* ===== NAV ===== */
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: var(--layout-nav-z-index);
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 0; padding-right: var(--space-6); padding-bottom: 0; padding-left: var(--space-6); height: var(--layout-nav-height);
      background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s, box-shadow 0.3s;
    }
    .site-nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
    .nav-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text); }
    .nav-logo img { height: var(--layout-nav-logo-height); width: auto; object-fit: contain; }
    .nav-logo span { font-family: var(--heading-font); font-weight: 700; font-size: var(--text-lead); letter-spacing: 0.02em; }
    .nav-links { display: flex; align-items: center; gap: var(--space-5); }
    .nav-links a {
      text-decoration: none; color: var(--text-muted); font-size: var(--text-body);
      font-weight: 500; transition: color 0.2s; position: relative;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
      background: var(--brand-primary); transition: width 0.3s ease;
    }
    .nav-links a:hover::after { width: 100%; }
    .nav-hamburger {
      display: none; background: none; border: none; cursor: pointer; padding-top: var(--space-2); padding-right: var(--space-2); padding-bottom: var(--space-2); padding-left: var(--space-2);
      flex-direction: column; gap: 5px; z-index: 102;
    }
    .nav-hamburger span {
      display: block; width: 22px; height: 2px; background: var(--text);
      transition: transform 0.3s, opacity 0.3s;
    }
    .nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-hamburger.active span:nth-child(2) { opacity: 0; }
    .nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ===== HERO (classic only — .hero-exp uses inline hero experience CSS) ===== */
    .hero:not(.hero-exp) {
      position: relative; width: 100%; height: var(--layout-hero-classic-height);
      min-height: var(--layout-hero-classic-min-height);
      display: flex; align-items: flex-end; overflow: hidden;
      margin-top: 0;
    }
    .hero.hero-exp {
      display: flex; align-items: flex-end;
      height: auto;
      min-height: var(--layout-hero-exp-min-height);
      max-height: none;
    }
    .hero-video, .hero-bg-img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .hero-bg-placeholder {
      position: absolute; inset: 0; background: #1a1a1a;
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.45) 45%,
        rgba(0,0,0,0.12) 100%
      );
    }


    :where(.hero-content, .hero-exp-content) {
      position: relative; z-index: 2;
      padding-top: var(--space-8); padding-right: var(--space-7); padding-bottom: var(--space-9); padding-left: var(--space-7); color: #fff; max-width: var(--layout-hero-content-max-width);
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding-top: 0.var(--space-9); padding-right: var(--space-4); padding-bottom: 0.var(--space-9); padding-left: var(--space-4); border-radius: 100px;
      background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2);
      font-size: var(--text-caption); font-weight: 600; color: #fff;
      margin-bottom: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase;
    }
    .hero-cultural {
      display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4);
      font-size: var(--text-caption); opacity: 0.85;
    }
    .hero-cultural-chip {
      padding-top: var(--space-1); padding-right: 0.6rem; padding-bottom: var(--space-1); padding-left: 0.6rem; border-radius: 20px;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
      font-size: var(--text-caption); backdrop-filter: blur(4px);
    }
    :where(.hero h1, .hero-exp-title) {
      font-size: clamp(var(--space-7), 6vw, var(--space-9)); font-weight: 700;
      line-height: 1.08; letter-spacing: -0.02em;
      margin-bottom: var(--space-4);
    }
    .hero-composed-headline {
      font-size: clamp(0.95rem, 2vw, 1.15rem); font-weight: 500; opacity: 0.92;
      margin: 0 0 var(--space-2); letter-spacing: 0.02em; line-height: 1.35; color: #fff;
    }
    :where(.hero-desc, .hero-exp-tagline) {
      font-size: var(--text-body); line-height: 1.6; opacity: 0.9;
      max-width: 30rem; margin-bottom: 1.75rem;
    }
    .hero-cta {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding-top: 0.9rem; padding-right: var(--space-6); padding-bottom: 0.9rem; padding-left: var(--space-6); border-radius: var(--brand-btn-radius, 6px);
      background: #fff; color: #1a1a1a;
      text-decoration: none; font-weight: 600; font-size: var(--text-body);
      transition: transform 0.2s, box-shadow 0.2s;
      letter-spacing: 0.03em;
    }
    .hero-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    /* ===== AI RECOMMENDATION STRIP ===== */
    .ai-strip {
      background: var(--platform-gradient-soft);
      border-bottom: 1px solid rgba(155,89,182,0.1);
      padding-top: var(--space-2); padding-right: var(--space-6); padding-bottom: var(--space-2); padding-left: var(--space-6);
      display: flex; align-items: center; justify-content: center; gap: var(--space-3);
      font-size: var(--text-caption); color: var(--brand-primary, var(--platform));
    }
    .ai-strip-icon { animation: pulseFade 2s infinite; }

    /* ===== PRODUCT GRID ===== */
    .section-header {
      max-width: var(--layout-content-max-width); margin: 0 auto;
      display: flex; align-items: baseline; justify-content: space-between;
    }
    .section-header h2 { font-size: var(--section-heading-size); font-weight: 600; letter-spacing: -0.01em; }
    .section-header .count { color: var(--text-muted); font-size: var(--text-caption); }

    .product-grid {
      padding-top: 0;
      padding-right: 0;
      padding-bottom: var(--space-8);
      padding-left: 0;
    }
    .product-card {
      background: var(--bg); border-radius: 8px;
      overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s;
    }
    .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
    .product-link { display: block; text-decoration: none; color: inherit; }
    .product-img-wrapper {
      position: relative; aspect-ratio: 3/4; overflow: hidden;
      background: var(--bg-soft);
    }
    .product-img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.5s ease;
    }
    .product-card:hover .product-img { transform: scale(1.04); }
    .product-img-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--bg-soft) 0%, #eee 100%);
      font-size: var(--text-display); font-weight: 700; color: #ccc;
      font-family: var(--heading-font);
    }
    .product-img-placeholder span { opacity: 0.3; }
    .product-img--fallback { width: 100%; height: 100%; object-fit: cover; }
    .trend-badge {
      position: absolute; top: 12px; left: 12px;
      background: var(--platform-gradient); color: #fff;
      padding-top: 0.var(--space-8); padding-right: var(--space-3); padding-bottom: 0.var(--space-8); padding-left: var(--space-3); border-radius: 20px;
      font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; z-index: 5;
      background-size: 200% 200%; animation: gradientShift 3s ease infinite;
    }

    /* Carousel */
    .carousel-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
    .carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.4s ease; }
    .carousel-track img { min-width: 100%; height: 100%; object-fit: cover; }
    .carousel-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.9); border: none; cursor: pointer;
      border-radius: 50%; width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s; z-index: 5;
      font-size: var(--text-caption); color: var(--text);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .product-card:hover .carousel-btn { opacity: 1; }
    .carousel-btn.prev { left: 8px; }
    .carousel-btn.next { right: 8px; }
    .carousel-dots {
      position: absolute; bottom: 10px; left: 0; right: 0;
      display: flex; justify-content: center; gap: 5px; z-index: 5;
    }
    .dot {
      width: 6px; height: 6px; background: rgba(255,255,255,0.5);
      border-radius: 50%; transition: all 0.2s;
    }
    .dot.active { background: #fff; transform: scale(1.3); }
    .product-info { padding-top: var(--space-4); padding-right: var(--space-1); padding-bottom: var(--space-4); padding-left: var(--space-1); }
    .product-title {
      font-family: var(--body-font);
      font-size: var(--text-caption); font-weight: 500;
      margin-bottom: 0.var(--space-8); color: var(--text);
      display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    }
    .product-color-name {
      font-size: var(--text-caption); font-weight: 600; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.var(--space-4); margin-bottom: 0.var(--space-6);
    }
    .product-price { font-size: var(--text-body); font-weight: 700; color: var(--text); margin-bottom: var(--space-2); }
    .color-dots { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
    .color-dot {
      width: 14px; height: 14px; border-radius: 50%;
      border: 1.5px solid var(--border); cursor: pointer;
      transition: box-shadow 0.2s;
    }
    .color-dot.active { box-shadow: 0 0 0 2px var(--text); border-color: transparent; }
    .card-sizes {
      display: none;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-bottom: var(--space-2);
    }
    .card-sizes.is-visible { display: flex; }
    .card-size-btn { min-width: var(--space-7); min-height: var(--layout-nav-logo-height); padding-top: var(--space-1); padding-right: 12px; padding-bottom: var(--space-1); padding-left: 12px; }
    .product-card.size-picker-open .btn-add.needs-size {
      outline: 2px solid var(--brand-primary, var(--platform));
      outline-offset: 2px;
    }
    .btn-add {
      width: 100%; padding-top: 0.65rem; padding-right: 0.65rem; padding-bottom: 0.65rem; padding-left: 0.65rem;
      background: var(--brand-primary, var(--text)); color: #fff; border: none;
      border-radius: var(--brand-btn-radius, 6px); font-size: var(--text-caption); font-weight: 600;
      cursor: pointer; transition: all 0.2s;
      font-family: var(--body-font); letter-spacing: 0.03em;
    }
    .btn-add:hover { background: var(--brand-primary); }
    .btn-add.is-added,
    .qv-add-btn.is-added,
    .brand-btn-primary.is-added {
      background: var(--success) !important;
      color: var(--on-success, #fff);
    }
    .btn-add:focus-visible {
      outline: 2px solid var(--brand-primary, var(--platform));
      outline-offset: 2px;
    }

    /* ===== SOCIAL PROOF ===== */
    .social-proof { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
    .sp-badge {
      font-size: var(--text-caption); font-weight: 700; padding-top: 3px; padding-right: 8px; padding-bottom: 3px; padding-left: 8px;
      border-radius: 10px; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 4px;
    }
    .sp-views { background: rgba(155,89,182,0.08); color: var(--platform); }
    .sp-trending { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; animation: pulse 2s infinite; }
    .sp-low-stock { background: #fff3cd; color: #856404; }
    .sp-new { background: #d4edda; color: #155724; }
    .personalized-label {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: var(--text-caption); font-weight: 600; color: var(--platform);
      background: var(--platform-gradient-soft); padding-top: 3px; padding-right: 8px; padding-bottom: 3px; padding-left: 8px; border-radius: 10px;
    }

    /* ===== COUNTRY CULTURE STRIP ===== */
    .culture-strip {
      max-width: var(--layout-content-max-width); margin: var(--space-4) auto var(--space-3); padding-top: 0; padding-right: var(--space-6); padding-bottom: 0; padding-left: var(--space-6);
      display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--layout-grid-culture-min-column), 100%), 1fr)); gap: var(--space-4);
    }
    .culture-card {
      background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 5%, transparent), color-mix(in srgb, var(--brand-accent) 3%, transparent));
      border: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
      border-radius: 12px; padding-top: var(--space-5); padding-right: var(--space-5); padding-bottom: var(--space-5); padding-left: var(--space-5); text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .culture-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
    .culture-card-icon { font-size: var(--text-heading); margin-bottom: var(--space-2); }
    .culture-card-label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-1); }
    .culture-card-value { font-family: var(--heading-font); font-weight: 700; font-size: var(--text-body); color: var(--text); }

    /* ===== BRAND STORY SECTION ===== */
    .brand-story {
      max-width: var(--layout-content-max-width); margin: 0 auto;
      padding-top: var(--space-9); padding-right: var(--space-6); padding-bottom: var(--space-9); padding-left: var(--space-6);
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
    }
    .brand-story-text h2 { font-size: var(--text-heading); font-weight: 600; margin-bottom: var(--space-4); letter-spacing: -0.01em; }
    .brand-story-text p {
      color: #595959; /* WCAG AA fallback ≥4.5:1 on --bg (#fff) and --bg-soft */
      color: color-mix(in srgb, var(--text-muted) 72%, var(--text));
      line-height: 1.7; font-size: var(--text-body); margin-bottom: 1.25rem;
    }
    .brand-story-link {
      display: inline-flex; align-items: center; gap: 0.var(--space-9);
      color: var(--text); font-weight: 600; font-size: var(--text-caption);
      text-decoration: none; border-bottom: 1.5px solid var(--text);
      padding-bottom: 2px; transition: opacity 0.2s;
    }
    .brand-story-link:hover { opacity: 0.7; }
    .brand-story-visual {
      aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: var(--bg-soft);
    }
    .brand-story-visual img { width: 100%; height: 100%; object-fit: cover; }

    /* ===== NEWSLETTER ===== */
    .newsletter {
      background: var(--platform-gradient-soft);
      padding-top: var(--space-9); padding-right: var(--space-6); padding-bottom: var(--space-9); padding-left: var(--space-6); text-align: center;
      border-top: 1px solid rgba(155,89,182,0.08);
    }
    .newsletter h2 { font-size: var(--text-title); font-weight: 600; margin-bottom: var(--space-2); }
    .newsletter p {
      color: #595959; /* WCAG AA fallback ≥4.5:1 on --platform-gradient-soft over --bg */
      color: color-mix(in srgb, var(--text-muted) 65%, var(--text));
      margin-bottom: var(--space-5); font-size: var(--text-body);
    }
    .newsletter-form {
      display: flex; max-width: var(--layout-newsletter-form-max-width); margin: 0 auto; gap: var(--space-2);
    }
    .newsletter-form input {
      flex: 1; padding-top: var(--space-3); padding-right: var(--space-4); padding-bottom: var(--space-3); padding-left: var(--space-4); border: 1px solid var(--border);
      border-radius: 4px; font-family: var(--body-font); font-size: var(--text-body);
      outline: none; transition: border-color 0.2s;
    }
    .newsletter-form input:focus { border-color: var(--brand-primary, var(--platform)); }
    .newsletter-form button { padding-top: var(--space-3); padding-right: var(--space-5); padding-bottom: var(--space-3); padding-left: var(--space-5); }

    /* ===== FOOTER ===== */
    .site-footer {
      max-width: var(--layout-content-max-width); margin: 0 auto;
      padding-top: var(--space-8); padding-right: var(--space-6); padding-bottom: var(--space-8); padding-left: var(--space-6); border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      font-size: var(--text-caption); color: var(--text-muted);
    }
    .site-footer a { color: var(--text-muted); text-decoration: none; }
    .site-footer a:hover { color: var(--text); }

    /* ===== CART DRAWER ===== */
    .cart-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
      transition: opacity 0.3s; z-index: var(--layout-cart-overlay-z-index);
    }
    .cart-overlay.active { opacity: 1; pointer-events: all; }
    .cart-drawer {
      position: fixed; top: 0; right: -420px; width: var(--layout-cart-drawer-width); max-width: 100vw;
      height: 100vh; background: var(--bg);
      box-shadow: -4px 0 24px rgba(0,0,0,0.08);
      transition: right 0.35s ease; z-index: var(--layout-cart-drawer-z-index);
      padding-top: var(--space-6); padding-right: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-6); display: flex; flex-direction: column; overflow-y: auto;
    }
    .cart-drawer.active { right: 0; }
    .cart-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: var(--space-6);
    }
    .cart-drawer-title {
      font-size: var(--text-lead, 1.25rem); font-weight: 600;
    }
    .cart-drawer-close {
      background: none; border: none; font-size: 1.25rem;
      cursor: pointer; color: var(--text); line-height: 1;
    }
    .cart-drawer-close:focus-visible {
      outline: 2px solid var(--brand-primary, var(--platform));
      outline-offset: 2px;
    }
    .cart-drawer-items { flex: 1; }
    .cart-drawer-empty {
      color: var(--text-muted); font-size: var(--text-body, 0.9rem);
    }
    .cart-drawer-checkout {
      margin-top: var(--space-5); padding-top: var(--space-4); padding-right: var(--space-4); padding-bottom: var(--space-4); padding-left: var(--space-4); font-size: var(--text-body, 0.9rem); width: 100%;
    }
    .cart-line {
      display: flex; gap: var(--space-4); align-items: center;
      padding-top: var(--space-3); padding-right: 0; padding-bottom: var(--space-3); padding-left: 0; border-bottom: 1px solid var(--border);
    }
    .cart-line-img {
      width: 60px; height: 80px; object-fit: cover; border-radius: 6px;
      background: var(--bg-soft); flex-shrink: 0;
    }
    .cart-line-img-placeholder {
      width: 60px; height: 80px; background: var(--bg-soft); border-radius: 6px;
      display: flex; align-items: center; justify-content: center; color: #ccc;
      flex-shrink: 0;
    }
    .cart-line-body { flex: 1; min-width: 0; }
    .cart-line-title { font-weight: 600; font-size: 0.85rem; }
    .cart-line-meta { font-size: var(--space-3); color: var(--text-muted); }
    .cart-line-aside { text-align: right; flex-shrink: 0; }
    .cart-line-price { font-weight: 700; font-size: 0.85rem; }
    .cart-line-remove {
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; font-size: var(--space-3); padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
    }
    .cart-line-remove:hover { color: var(--text); }

    @media (min-width: 769px) and (max-width: 1023px) {
      .carousel-btn {
        width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target);
      }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .nav-hamburger { display: flex; }
      .nav-links {
        position: fixed; top: 0; right: -100%; width: var(--layout-nav-drawer-width); height: 100vh;
        flex-direction: column; align-items: flex-start;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(16px);
        padding-top: var(--space-10); padding-right: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-6); gap: 1.25rem;
        box-shadow: -4px 0 24px rgba(0,0,0,0.08);
        transition: right 0.35s ease; z-index: var(--layout-nav-drawer-z-index);
      }
      .nav-links.open { right: 0; }
      .nav-links a { font-size: var(--text-body); padding-top: var(--space-2); padding-right: 0; padding-bottom: var(--space-2); padding-left: 0; }
      .nav-links a::after { display: none; }
      .hero:not(.hero-exp) { height: 70vh; min-height: var(--layout-hero-mobile-classic-min-height); }
      .hero.hero-exp { height: auto; min-height: var(--layout-hero-mobile-exp-min-height); }
      :where(.hero-content, .hero-exp-content) { padding-top: var(--space-6); padding-right: 1.25rem; padding-bottom: var(--space-8); padding-left: 1.25rem; max-width: 100%; }
      :where(.hero h1, .hero-exp-title) { font-size: var(--text-heading); }
      :where(.hero-desc, .hero-exp-tagline) { font-size: var(--text-body); }
      .hero-badge { font-size: var(--text-caption); padding-top: 0.35rem; padding-right: 0.8rem; padding-bottom: 0.35rem; padding-left: 0.8rem; }
      .hero-cultural { flex-wrap: wrap; gap: 0.var(--space-9); }
      .hero-cultural-chip { font-size: var(--text-caption); }
      .product-grid {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: var(--space-6);
        padding-left: 0;
      }
      .section-header h2 { font-size: var(--text-title); }
      .brand-story { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-8); padding-right: 1.25rem; padding-bottom: var(--space-8); padding-left: 1.25rem; }
      .brand-story-visual { aspect-ratio: 16/9; }
      .site-nav { padding-top: 0; padding-right: var(--space-4); padding-bottom: 0; padding-left: var(--space-4); }
      .newsletter { padding-top: var(--space-8); padding-right: 1.25rem; padding-bottom: var(--space-8); padding-left: 1.25rem; }
      .newsletter h2 { font-size: var(--text-title); }
      .newsletter-form { flex-direction: column; }
      .site-footer { flex-direction: column; gap: var(--space-4); text-align: center; padding-top: var(--space-6); padding-right: 1.25rem; padding-bottom: var(--space-6); padding-left: 1.25rem; }
      .site-footer div { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
      .culture-strip { grid-template-columns: repeat(2, 1fr); padding-top: 0; padding-right: var(--space-4); padding-bottom: 0; padding-left: var(--space-4); }
      .culture-card { padding-top: var(--space-4); padding-right: var(--space-4); padding-bottom: var(--space-4); padding-left: var(--space-4); }
      .culture-card-icon { font-size: var(--text-title); }
      .culture-card-value { font-size: var(--text-caption); }
      .ai-strip { font-size: var(--text-caption); padding-top: 0.6rem; padding-right: var(--space-4); padding-bottom: 0.6rem; padding-left: var(--space-4); }
      .cart-drawer { width: 100vw; right: -100vw; padding-top: var(--space-5); padding-right: var(--space-5); padding-bottom: var(--space-5); padding-left: var(--space-5); }
      .cart-drawer.active { right: 0; }
      .carousel-btn { opacity: 1; width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target); }
    }
    @media (max-width: 390px) {
      .hero:not(.hero-exp) { height: min(65vh, var(--viewport-height, 65vh)); min-height: var(--layout-hero-narrow-classic-min-height); }
      .hero.hero-exp { height: auto; min-height: var(--layout-hero-narrow-exp-min-height); }
      :where(.hero-content, .hero-exp-content) { padding-top: var(--space-5); padding-right: var(--space-4); padding-bottom: var(--space-7); padding-left: var(--space-4); }
      .hero-cta { padding-top: var(--space-3); padding-right: var(--space-5); padding-bottom: var(--space-3); padding-left: var(--space-5); font-size: var(--text-caption); min-height: var(--layout-touch-target); }
      .product-grid {
        padding-top: 0;
        padding-right: 0;
        padding-bottom: var(--space-6);
        padding-left: 0;
      }
      .product-info { padding-top: var(--space-3); padding-right: 0.15rem; padding-bottom: var(--space-3); padding-left: 0.15rem; }
      .product-title { font-size: clamp(0.72rem, 3.2vw, 0.8rem); }
      .btn-add { font-size: var(--text-caption); padding-top: 0.65rem; padding-right: 0.65rem; padding-bottom: 0.65rem; padding-left: 0.65rem; min-height: var(--layout-touch-target); }
      .culture-strip { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
      .brand-story-text h2 { font-size: var(--text-title); }
      .newsletter-form button { padding-top: var(--space-3); padding-right: var(--space-3); padding-bottom: var(--space-3); padding-left: var(--space-3); min-height: var(--layout-touch-target); }
      .section-header h2 { font-size: var(--text-title); }
    }
    .empty-state {
      grid-column: 1 / -1; text-align: center; padding-top: var(--space-9); padding-right: var(--space-6); padding-bottom: var(--space-9); padding-left: var(--space-6);
      color: var(--text-muted);
    }
    .empty-state h3 { margin-bottom: var(--space-2); }

    /* ===== QUICK VIEW ===== */
    .quick-view-btn {
      position: absolute; bottom: 12px; right: 12px;
      background: rgba(255,255,255,0.95); border: none; cursor: pointer;
      border-radius: 50%; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: all 0.2s; z-index: 5;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12); color: var(--text);
    }
    .product-card:hover .quick-view-btn { opacity: 1; }
    .quick-view-btn:hover { background: var(--brand-primary); color: #fff; transform: scale(1.1); }
    .qv-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px); z-index: 300; opacity: 0;
      pointer-events: none; transition: opacity 0.3s;
      display: flex; align-items: center; justify-content: center;
    }
    .qv-overlay.active { opacity: 1; pointer-events: all; }
    .qv-modal {
      position: relative;
      background: #fff; border-radius: 16px; max-width: 880px; width: 92%;
      max-height: 90vh; overflow-y: auto; display: grid;
      grid-template-columns: 1fr 1fr; box-shadow: 0 30px 60px rgba(0,0,0,0.2);
      transform: translateY(30px); transition: transform 0.3s;
    }
    .qv-overlay.active .qv-modal { transform: translateY(0); }
    .qv-img-section { padding-top: var(--space-5); padding-right: var(--space-5); padding-bottom: var(--space-5); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .qv-main-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; background: var(--bg-soft); }
    .qv-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
    .qv-thumb { width: 60px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: all 0.2s; flex-shrink: 0; }
    .qv-thumb.active, .qv-thumb:hover { border-color: var(--brand-primary); opacity: 1; }
    .qv-info-section { padding-top: var(--space-6); padding-right: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); }
    .qv-close { position: absolute; top: var(--space-4); right: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: 50%; width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-lead); z-index: 5; transition: all 0.2s; }
    .qv-close:hover { background: #f5f5f5; transform: rotate(90deg); }
    .qv-title { font-family: var(--heading-font); font-size: var(--text-title); font-weight: 600; }
    .qv-price { font-size: var(--text-lead); font-weight: 700; }
    .qv-colors { display: flex; gap: var(--space-2); flex-wrap: wrap; }
    .qv-color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: all 0.2s; }
    .qv-color-swatch.active { box-shadow: 0 0 0 2px var(--text); border-color: transparent; }
    .qv-color-swatch:hover { transform: scale(1.1); }
    .qv-sizes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
    .qv-size-btn { padding-top: var(--space-2); padding-right: 16px; padding-bottom: var(--space-2); padding-left: 16px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-weight: 600; font-size: var(--text-caption); background: #fff; transition: all 0.2s; font-family: var(--body-font); }
    .qv-size-btn:hover:not(.unavailable) { border-color: var(--brand-primary); }
    .qv-size-btn.active { background: var(--text); color: #fff; border-color: var(--text); }
    .qv-size-btn.unavailable { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; background: #f0f0f0; }
    .qv-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }
    .qv-add-btn { width: 100%; padding-top: 0.85rem; padding-right: 0.85rem; padding-bottom: 0.85rem; padding-left: 0.85rem; background: var(--text); color: #fff; border: none; border-radius: var(--brand-btn-radius, 6px); font-size: var(--text-body); font-weight: 600; cursor: pointer; font-family: var(--body-font); transition: background 0.2s; }
    .qv-add-btn:hover { background: var(--brand-primary); }
    .qv-view-link { text-align: center; font-size: var(--text-caption); color: var(--text-muted); text-decoration: underline; }
    .qv-view-link:hover { color: var(--text); }
    .qv-label { font-size: var(--text-caption); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
    .qv-color-name { font-weight: 500; text-transform: none; letter-spacing: 0; }
    .qv-desc { font-size: var(--text-caption); color: var(--text-muted); line-height: 1.5; max-height: 80px; overflow: hidden; }

    /* ===== SEARCH & FILTER BAR ===== */
    .filter-bar {
      max-width: var(--layout-content-max-width); margin: 0 auto; padding-top: 0; padding-right: var(--space-6); padding-bottom: var(--space-4); padding-left: var(--space-6);
      display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    }
    .search-box { position: relative; flex: 1; min-width: 200px; }
    .search-box input {
      width: 100%; padding-top: 0.65rem; padding-right: 0.65rem; padding-bottom: 0.65rem; padding-left: var(--space-7);
      border: 1px solid var(--border); border-radius: var(--brand-btn-radius, 10px);
      font-family: var(--body-font); font-size: var(--text-caption); outline: none;
      transition: border-color 0.2s, box-shadow 0.2s; background: #fff;
    }
    .search-box input:focus {
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.12);
    }
    .search-box svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
    .search-powered-label { font-size: var(--text-caption); color: var(--text-muted); margin-top: 4px; display: block; }
    .search-suggest {
      position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
      background: #fff; border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1); max-height: 220px; overflow-y: auto;
    }
    .search-suggest-item {
      display: block; width: 100%; text-align: left; padding-top: var(--space-2); padding-right: 12px; padding-bottom: var(--space-2); padding-left: 12px; border: none;
      background: transparent; cursor: pointer; font-size: var(--text-caption);
    }
    .search-suggest-item:hover { background: var(--bg-soft); }
    .search-suggest-empty { padding-top: var(--space-3); padding-right: var(--space-3); padding-bottom: var(--space-3); padding-left: var(--space-3); font-size: var(--text-caption); color: var(--text-muted); }
    .filter-sort select {
      padding-top: 0.65rem; padding-right: var(--space-6); padding-bottom: 0.65rem; padding-left: var(--space-3); border: 1px solid var(--border);
      border-radius: 6px; font-family: var(--body-font); font-size: var(--text-caption);
      background: #fff; cursor: pointer; outline: none; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .filter-sort select:focus-visible {
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.12);
    }
    .color-filter-pills { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
    .color-pill {
      width: 24px; height: 24px; border-radius: 50%;
      border: 2px solid var(--border); cursor: pointer;
      transition: all 0.2s; position: relative;
    }
    .color-pill.active { box-shadow: 0 0 0 2px var(--text); border-color: transparent; }
    .color-pill:hover { transform: scale(1.15); }
    a.color-pill { text-decoration: none; display: inline-block; }
    .collection-chips-row {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
      padding-top: 0; padding-right: var(--page-gutter, var(--space-4)); padding-bottom: var(--space-3); padding-left: var(--page-gutter, var(--space-4));
      max-width: var(--layout-content-max-width); margin: 0 auto;
    }
    .collection-chip.active {
      background: var(--text);
      color: var(--bg, #fff);
      border-color: var(--text);
    }
    .filter-count { font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap; }

    /* ===== BACK TO TOP ===== */
    .back-to-top {
      position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 90;
      width: var(--layout-touch-target); height: var(--layout-touch-target); border-radius: 50%;
      background: var(--text); color: #fff; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: translateY(20px);
      transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .back-to-top.visible { opacity: 1; transform: translateY(0); }
    .back-to-top:hover { background: var(--brand-primary); transform: translateY(-2px); }
    .back-to-top:focus-visible {
      outline: 2px solid var(--brand-primary, var(--platform));
      outline-offset: 2px;
    }

    /* ===== SKELETON LOADING ===== */
    .skeleton-card {
      background: var(--bg); border-radius: 8px; overflow: hidden;
    }
    .skeleton-card .skel-img {
      aspect-ratio: 3/4;
      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
      background-size: 200% 100%; animation: brandShimmer 1.5s infinite;
    }
    .skeleton-card .skel-text { padding-top: var(--space-4); padding-right: var(--space-1); padding-bottom: var(--space-4); padding-left: var(--space-1); }
    .skeleton-card .skel-line {
      height: 12px; border-radius: 6px; margin-bottom: 8px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
      background-size: 200% 100%; animation: brandShimmer 1.5s infinite;
    }
    .skeleton-card .skel-line.short { width: 60%; }
    .skeleton-card .skel-line.medium { width: 40%; }

    /* ===== WISHLIST HEART ===== */
    .wishlist-btn {
      position: absolute; top: 12px; right: 12px;
      background: rgba(255,255,255,0.9); border: none; cursor: pointer;
      border-radius: 50%; width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-lead); z-index: 6; transition: all 0.25s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: #bbb;
      opacity: 0; line-height: 1;
    }
    .product-card:hover .wishlist-btn { opacity: 1; }
    .wishlist-btn:hover { transform: scale(1.15); color: #e74c3c; }
    .wishlist-btn.saved { color: #e74c3c; opacity: 1; background: #fff; }

    /* ===== LOAD MORE / INFINITE SCROLL ===== */
    .load-more-container {
      max-width: var(--layout-content-max-width); margin: 0 auto; padding-top: var(--space-5); padding-right: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-6);
      text-align: center;
    }
    .load-more-btn {
      padding-top: 0.85rem; padding-right: var(--space-7); padding-bottom: 0.85rem; padding-left: var(--space-7); border: 1.5px solid var(--border);
      border-radius: 6px; background: #fff; cursor: pointer;
      font-family: var(--body-font); font-size: var(--text-caption); font-weight: 600;
      color: var(--text); transition: all 0.2s; letter-spacing: 0.02em;
    }
    .load-more-btn:hover { background: var(--text); color: #fff; border-color: var(--text); }
    .load-more-btn:focus-visible {
      outline: 2px solid var(--brand-primary, var(--platform));
      outline-offset: 2px;
    }
    .load-more-progress {
      margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-muted);
    }

    /* ===== RECENTLY VIEWED STRIP ===== */
    .recently-viewed {
      max-width: var(--layout-content-max-width); margin: 0 auto; padding-top: var(--space-6); padding-right: var(--space-6); padding-bottom: 0; padding-left: var(--space-6);
    }
    .recently-viewed h3 {
      font-size: var(--text-lead); font-weight: 600; margin-bottom: var(--space-4);
      font-family: var(--heading-font);
    }
    .rv-strip {
      display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4);
      scrollbar-width: thin;
    }
    .rv-strip::-webkit-scrollbar { height: 4px; }
    .rv-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .rv-card {
      flex-shrink: 0; width: 160px; text-decoration: none; color: inherit;
      transition: transform 0.2s;
    }
    .rv-card:hover { transform: translateY(-3px); }
    .rv-card img {
      width: 160px; height: 200px; object-fit: cover; border-radius: 6px;
      background: var(--bg-soft);
    }
    .rv-card .rv-title {
      font-size: var(--text-caption); font-weight: 500; margin-top: 0.var(--space-9);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rv-card .rv-price { font-size: var(--text-caption); font-weight: 600; color: var(--text-muted); }

    /* ===== CART BADGE PULSE ===== */
    .cart-pulse { animation: cartPulse 0.4s ease; }

    /* ===== FLY-TO-CART ANIMATION ===== */
    .fly-to-cart {
      position: fixed; z-index: 9999; pointer-events: none;
      width: 60px; height: 80px; object-fit: cover; border-radius: 6px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @media (max-width: 768px) {
      .qv-modal { grid-template-columns: 1fr; max-height: 95vh; }
      .qv-info-section { padding-top: var(--space-5); padding-right: var(--space-5); padding-bottom: var(--space-5); padding-left: var(--space-5); }
      .filter-bar { padding-top: 0; padding-right: var(--space-4); padding-bottom: var(--space-4); padding-left: var(--space-4); }
      .search-box { min-width: 100%; }
      .search-suggest { max-height: min(220px, 40vh); }
      .quick-view-btn { opacity: 0.9; width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target); bottom: 8px; right: 8px; }
    }
    @media (max-width: 390px) {
      .filter-bar { gap: var(--space-2); }
      .color-filter-pills { gap: var(--space-1); }
      .color-pill { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
      .quick-view-btn { width: var(--layout-touch-target); height: var(--layout-touch-target); min-width: var(--layout-touch-target); min-height: var(--layout-touch-target); }
      .qv-title { font-size: var(--text-lead); }
      .qv-main-img { aspect-ratio: 3/4; max-height: 50vh; object-fit: cover; }
      .qv-add-btn { min-height: var(--layout-touch-target); }
    }

    /* ===== Shop-first layout (products before lifestyle stack) ===== */
    .shop-collection-toolbar {
      position: sticky;
      top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
      z-index: 90;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      width: 100%;
      max-width: 100%;
      margin: 0;
      box-sizing: border-box;
    }
    :scope.dark-mode .shop-collection-toolbar {
      background: rgba(15, 15, 15, 0.96);
    }
    .shop-collection-toolbar .section-header {
      max-width: none;
      width: 100%;
      padding-top: 1.25rem;
      padding-bottom: var(--space-3);
      margin-bottom: 0;
    }
    .shop-collection-toolbar .filter-bar {
      padding-bottom: var(--space-4);
    }
    main > .section-header#products {
      scroll-margin-top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + var(--space-9));
    }
    .brand-experience-below-shop {
      margin-top: var(--space-7);
      padding-top: var(--space-6);
      border-top: 1px solid var(--border);
      max-width: var(--layout-content-max-width);
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      box-sizing: border-box;
    }
    .brand-experience-below-shop .ai-strip {
      border-radius: 12px;
      margin-bottom: var(--space-5);
    }
}

@keyframes cartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

}

@layer reset {
/* BWET brand storefront shared — Sprint 5–7 */

.brand-card-review, .brand-pdp-reviews-summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.35rem;
}
.brand-review-stars {
  color: #f59e0b;
  letter-spacing: 0.05em;
  font-size: var(--text-caption);
}
.brand-card-review-count, .brand-pdp-reviews-count {
  font-size: var(--text-caption);
  color: var(--text-muted, #717171);
}
.brand-pdp-reviews {
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border, #ebebeb);
}
.brand-pdp-reviews-title {
  font-size: var(--text-lead);
  margin-bottom: 0.75rem;
}
.brand-pdp-reviews-avg { font-size: var(--text-body); }
.brand-review-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.brand-review-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border, #eee);
}
.brand-review-item:last-child { border-bottom: none; }
.brand-review-item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.brand-review-author { font-size: var(--text-caption); font-weight: 600; }
.brand-review-verified {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #2563eb);
  margin-left: auto;
}
.brand-review-body { font-size: var(--text-caption); line-height: 1.5; color: var(--text-muted, #555); }

/* Sprint 6 tokens */
:root { --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --text-caption: 0.75rem;
    --text-caption-lh: 1.2;
    --text-caption-fw: 400;
    --text-body: 1rem;
    --text-body-lh: 1.5;
    --text-body-fw: 400;
    --text-lead: 1.125rem;
    --text-lead-lh: 1.4;
    --text-lead-fw: 400;
    --text-title: clamp(1.25rem, 2.5vw, 1.75rem);
    --text-title-lh: 1.2;
    --text-title-fw: 600;
    --text-heading: clamp(1.5rem, 3vw, 2.25rem);
    --text-heading-lh: 1.1;
    --text-heading-fw: 700;
    --text-display: clamp(2rem, 4vw, 3.5rem);
    --text-display-lh: 1.05;
    --text-display-fw: 800;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-nav: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-display: var(--heading-font, system-ui);
    --font-body: var(--body-font, system-ui);
    --section-heading-size: clamp(1.35rem, 3vw, 1.85rem);
    --touch-target-min: 44px;
    --component-button-radius: var(--radius-lg);
    --component-chip-radius: var(--radius-full);
    --component-card-radius: var(--radius-lg);
    --component-modal-radius: var(--radius-xl);
    --component-button-shadow: var(--shadow-md);
    --component-button-shadow-hover: var(--shadow-lg);
    --component-overlay-backdrop: rgba(15, 23, 42, 0.56);
    --component-surface-raised: var(--bg, #ffffff);
    --component-surface-muted: var(--bg-soft, #f7f7f5);
    --component-border-strong: var(--border, #ebebeb); }


    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 20px var(--platform-glow, rgba(155, 89, 182, 0.2)); }
      50% { box-shadow: 0 0 40px rgba(155, 89, 182, 0.4); }
    }
    @keyframes pulseFade {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }


    @keyframes brandShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }


    body.brand-storefront.dark-mode {
      --bg: #0f0f0f; --bg-soft: #1a1a1a; --text: #e8e8e8; --text-muted: #9ca3af;
      --border: #2a2a2a;
    }
    body.brand-storefront.dark-mode .site-nav,
    body.brand-storefront.dark-mode .header { background: rgba(15,15,15,0.95); border-bottom-color: #2a2a2a; }
    body.brand-storefront.dark-mode .product-card { background: #1a1a1a; }
    body.brand-storefront.dark-mode .btn-add { background: var(--brand-primary, var(--text)); color: #fff; }
    body.brand-storefront.dark-mode .btn-add:hover { background: var(--brand-primary); color: #fff; }
    body.brand-storefront.dark-mode .carousel-btn { background: rgba(30,30,30,0.9); color: #e8e8e8; }
    body.brand-storefront.dark-mode .search-box input { background: #1a1a1a; color: #e8e8e8; border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .filter-sort select {
      background-color: #1a1a1a;
      color: #e8e8e8;
      border-color: #2a2a2a;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    body.brand-storefront.dark-mode .qv-modal { background: #1a1a1a; }
    body.brand-storefront.dark-mode .qv-close { background: #2a2a2a; border-color: #333; color: #e8e8e8; }
    body.brand-storefront.dark-mode .qv-size-btn { background: #1a1a1a; color: #e8e8e8; border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .qv-size-btn.active { background: #e8e8e8; color: #0f0f0f; border-color: #e8e8e8; }
    body.brand-storefront.dark-mode .cart-drawer { background: #1a1a1a; }
    body.brand-storefront.dark-mode .back-to-top { background: #e8e8e8; color: #0f0f0f; }
    body.brand-storefront.dark-mode .newsletter { background: #1a1a1a; border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .culture-card { background: rgba(255,255,255,0.03); border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .wishlist-btn { background: rgba(30,30,30,0.9); }
    body.brand-storefront.dark-mode .quick-view-btn { background: rgba(30,30,30,0.9); color: #e8e8e8; }
    body.brand-storefront.dark-mode .load-more-btn { background: #1a1a1a; color: #e8e8e8; border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .brand-story { background: #1a1a1a; }
    body.brand-storefront.dark-mode .modal-content { background: #1a1a1a; color: #e8e8e8; }
    body.brand-storefront.dark-mode .modal-content input,
    body.brand-storefront.dark-mode .modal-content select { background: #0f0f0f; color: #e8e8e8; border-color: #2a2a2a; }
    body.brand-storefront.dark-mode .site-footer { background: #0a0a0a; border-top-color: #1a1a1a; }
    .dark-toggle { background: none; border: 1px solid var(--border); border-radius: 20px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all 0.3s; color: var(--text); }
    .dark-toggle:hover { border-color: var(--platform); color: var(--platform); }
    body.brand-storefront.dark-mode .dark-toggle { border-color: #444; }


    @keyframes staggerFadeUp { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
    body.brand-storefront .product-card { animation: staggerFadeUp 0.6s ease both; }
    .price-dropped { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #dcfce7; color: #15803d; }
    .price-original { text-decoration: line-through; color: var(--text-muted); font-size: 0.8rem; margin-left: 6px; }
    .surge-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fef3c7; color: #92400e; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }


}

@layer layout {

  :root {
    --bp-wide: 1440px;
    --bp-desktop: 1024px;
    --bp-tablet: 768px;
    --bp-mobile: 390px;
    --page-gutter: clamp(0.75rem, 4vw, 2.5rem);
    --nav-height: clamp(56px, 10vw, 64px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
  }
  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body.brand-storefront {
    overflow-x: clip;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
  }
  body.brand-storefront:has(> .header) {
    padding-top: calc(var(--nav-height) + var(--safe-top));
  }
  body.brand-storefront .policy-header {
    padding-left: calc(var(--page-gutter) + var(--safe-left));
    padding-right: calc(var(--page-gutter) + var(--safe-right));
    padding-top: calc(1rem + var(--safe-top));
  }
  body.brand-storefront .site-nav {
    padding-left: calc(var(--page-gutter) + var(--safe-left));
    padding-right: calc(var(--page-gutter) + var(--safe-right));
    padding-top: var(--safe-top);
    min-height: calc(var(--nav-height) + var(--safe-top));
    height: auto;
  }
  body.brand-storefront .hero:not(.hero-exp) {
    margin-top: calc(var(--nav-height) + var(--safe-top));
    height: min(85vh, var(--viewport-height, 85vh));
    min-height: clamp(260px, 42vh, 520px);
  }
  body.brand-storefront .hero.hero-exp {
    margin-top: calc(var(--nav-height) + var(--safe-top));
    padding-top: 0;
    height: auto;
    min-height: clamp(360px, min(72vh, var(--viewport-height, 72vh)), 720px);
    max-height: none;
  }
  /* Unified hero copy block — classic .hero-content and .hero-exp-content share geometry */
  body.brand-storefront :where(.hero-content, .hero-exp-content) {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    padding-bottom: clamp(2rem, 5vw, 2.75rem);
    max-width: min(40rem, 100%);
    width: 100%;
    box-sizing: border-box;
  }
  body.brand-storefront :where(.hero h1, .hero-exp-title) {
    font-size: var(--text-display, clamp(2.5rem, 6vw, 4rem));
    font-weight: var(--text-display-fw, 700);
    line-height: var(--text-display-lh, 1.08);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  body.brand-storefront :where(.hero-desc, .hero-exp-tagline) {
    font-size: var(--text-lead, var(--text-body));
    line-height: var(--text-lead-lh, 1.6);
    opacity: 0.9;
    max-width: 30rem;
    margin-bottom: 1.75rem;
  }
  body.brand-storefront .section-header,
  body.brand-storefront .product-grid-container,
  body.brand-storefront .culture-strip,
  body.brand-storefront .brand-story,
  body.brand-storefront .site-footer,
  body.brand-storefront .newsletter,
  body.brand-storefront .ai-strip,
  body.brand-storefront .lifestyle-gallery {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  body.brand-storefront .section-header {
    padding-top: 2rem;
    padding-bottom: 1.25rem;
  }
  body.brand-storefront .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: clamp(var(--space-2, 0.5rem), 2vw, var(--space-4, 1rem));
    width: 100%;
    box-sizing: border-box;
  }
  
  body.brand-storefront .product-grid-container {
    container-type: inline-size;
    container-name: product-grid;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    box-sizing: border-box;
  }

  @container product-grid (max-width: 22.4375rem) {
    body.brand-storefront .product-grid {
      grid-template-columns: 1fr;
    }
  }

  @container product-grid (min-width: 22.5rem) and (max-width: 48rem) {
    body.brand-storefront .product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container product-grid (min-width: 48.0625rem) and (max-width: 63.9375rem) {
    body.brand-storefront .product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container product-grid (min-width: 64rem) {
    body.brand-storefront .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      gap: clamp(var(--space-3, 0.75rem), 2.5vw, var(--space-5, 1.5rem));
    }
  }

  body.brand-storefront .header {
    padding-left: calc(var(--page-gutter) + var(--safe-left));
    padding-right: calc(var(--page-gutter) + var(--safe-right));
    padding-top: var(--safe-top);
  }
  body.brand-storefront .pdp-wrapper,
  body.brand-storefront .cart-page,
  body.brand-storefront .checkout-layout,
  body.brand-storefront .express-checkout,
  body.brand-storefront .conf-page,
  body.brand-storefront .policy-page {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    width: 100%;
    max-width: min(1100px, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  body.brand-storefront .cart-drawer {
    padding-bottom: calc(1.5rem + var(--safe-bottom));
    max-width: 100vw;
  }
  body.brand-storefront .chat-orb {
    right: calc(1.25rem + var(--safe-right));
    bottom: calc(1.25rem + var(--safe-bottom));
  }
  body.brand-storefront .chat-window {
    right: calc(0.75rem + var(--safe-right));
    bottom: calc(5.5rem + var(--safe-bottom));
    max-width: min(22rem, calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)));
  }
  @media (min-width: 769px) and (max-width: 1023px) {
    body.brand-storefront .brand-story {
      gap: 2rem;
    }
  }
  @media (min-width: 1024px) {
    body.brand-storefront .checkout-layout {
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    }
  }
  @media (max-width: 768px) {
    body.brand-storefront .site-nav {
      padding-left: calc(var(--page-gutter) + var(--safe-left));
      padding-right: calc(var(--page-gutter) + var(--safe-right));
    }
    body.brand-storefront .nav-links {
      width: min(18rem, calc(100vw - var(--safe-left) - var(--safe-right)));
      padding-top: calc(4.5rem + var(--safe-top));
      padding-bottom: calc(1.5rem + var(--safe-bottom));
      padding-left: calc(1.25rem + var(--safe-left));
      padding-right: calc(1.25rem + var(--safe-right));
      height: 100dvh;
      height: var(--viewport-height, 100dvh);
      max-height: -webkit-fill-available;
    }
    body.brand-storefront .nav-links a {
      min-height: 44px;
      display: flex;
      align-items: center;
      width: 100%;
    }
    body.brand-storefront .nav-hamburger {
      min-width: 44px;
      min-height: 44px;
    }
    body.brand-storefront .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
      padding-top: clamp(2rem, 6vw, 2.75rem);
      padding-bottom: 0.75rem;
    }
    body.brand-storefront .filter-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
    body.brand-storefront .search-box,
    body.brand-storefront .filter-sort {
      width: 100%;
      min-width: 0;
    }
    body.brand-storefront .search-box input,
    body.brand-storefront .filter-sort select,
    body.brand-storefront .newsletter-form input {
      font-size: 16px;
      min-height: 44px;
    }
    body.brand-storefront .color-filter-pills {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.25rem;
      max-width: 100%;
    }
    body.brand-storefront .color-pill {
      min-width: 28px;
      min-height: 28px;
      flex-shrink: 0;
    }
    body.brand-storefront .brand-story {
      grid-template-columns: 1fr;
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
    body.brand-storefront .cart-item {
      flex-wrap: wrap;
    }
    body.brand-storefront .cart-drawer {
      width: 100%;
      max-width: 100%;
      right: -100%;
      height: 100dvh;
      height: var(--viewport-height, 100dvh);
      padding-top: calc(1.25rem + var(--safe-top));
    }
    body.brand-storefront .pdp-wrapper {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
      gap: clamp(1.25rem, 4vw, 2rem);
    }
    body.brand-storefront .pdp-gallery .pdp-main-img-wrapper {
      min-height: clamp(220px, 55vw, 420px);
    }
    body.brand-storefront .breadcrumbs {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
      font-size: 0.75rem;
    }
    body.brand-storefront .order-summary {
      position: static;
    }
    body.brand-storefront .checkout-progress {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.25rem;
    }
    body.brand-storefront .express-checkout,
    body.brand-storefront .checkout-layout {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
    body.brand-storefront .back-to-top {
      bottom: calc(1rem + var(--safe-bottom));
      right: calc(1rem + var(--safe-right));
    }
    body.brand-storefront .qv-overlay {
      align-items: flex-end;
      padding: 0;
    }
    body.brand-storefront .qv-modal {
      width: 100%;
      max-width: 100%;
      max-height: min(92dvh, var(--viewport-height, 92vh));
      border-radius: 16px 16px 0 0;
      margin: 0;
    }
    body.brand-storefront .recently-viewed,
    body.brand-storefront .load-more-container {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
    body.brand-storefront .rv-strip,
    body.brand-storefront .rv-strip-pdp {
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }
    body.brand-storefront .related-section {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
    body.brand-storefront .related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
    body.brand-storefront .rv-section {
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter);
    }
  }
  @media (max-width: 390px) {
    body.brand-storefront .hero h1 {
      font-size: clamp(1.35rem, 7vw, 1.85rem);
    }
    body.brand-storefront .hero-desc {
      font-size: 0.9rem;
    }
    body.brand-storefront .culture-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.brand-storefront .product-title {
      font-size: clamp(0.72rem, 3.2vw, 0.85rem);
    }
    body.brand-storefront .btn-add,
    body.brand-storefront .btn-add-to-cart {
      min-height: 44px;
    }
    body.brand-storefront .pdp-title {
      font-size: clamp(1.35rem, 6vw, 1.65rem);
    }
  }
  @media (hover: none) and (pointer: coarse) {
    body.brand-storefront .product-card .carousel-btn,
    body.brand-storefront .product-card .quick-view-btn,
    body.brand-storefront .product-card .wishlist-btn,
    body.brand-storefront .product-card .ci-grid-similar-btn {
      opacity: 1;
    }
    body.brand-storefront .product-card:hover {
      transform: none;
    }
  }
  @media (orientation: landscape) and (max-height: 520px) {
    body.brand-storefront .hero {
      min-height: 220px;
      height: auto;
    }
    body.brand-storefront .hero h1 {
      font-size: clamp(1.35rem, 5vw, 2rem);
    }
  }

}

@layer components {

  :root {
    --brand-btn-radius: var(--component-button-radius, var(--radius-lg, 0.75rem));
    --brand-btn-shadow: var(--component-button-shadow, var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.08)));
    --brand-btn-shadow-hover: var(--component-button-shadow-hover, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)));
    --brand-chip-radius: var(--component-chip-radius, var(--radius-full, 9999px));
    --brand-ease-out: var(--transition-spring, cubic-bezier(0.22, 1, 0.36, 1));
    --brand-dock-size: max(var(--touch-target-min, 44px), 48px);
  }


  body.brand-storefront .brand-btn-primary,
  body.brand-storefront .btn-add-to-cart.brand-btn-primary,
  body.brand-storefront .btn-add.brand-btn-primary,
  body.brand-storefront .qv-add-btn.brand-btn-primary,
  body.brand-storefront .load-more-btn.brand-btn-primary {
    border-radius: var(--brand-btn-radius);
    box-shadow: var(--brand-btn-shadow);
    min-height: var(--touch-target-min, 44px);
    transition: transform 0.2s var(--brand-ease-out), box-shadow 0.2s var(--brand-ease-out),
      background 0.2s ease, color 0.2s ease;
  }
  body.brand-storefront .brand-btn-primary {
    background: linear-gradient(135deg, var(--brand-primary, #1a1a2e) 0%, var(--brand-text, #1a1a2e) 55%, var(--platform, #9b59b6) 140%);
    color: #fff;
    border: none;
    font-weight: 700;
    position: relative;
    overflow: hidden;
  }
  body.brand-storefront .brand-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.55s var(--brand-ease-out);
    pointer-events: none;
  }
  body.brand-storefront .brand-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-btn-shadow-hover);
  }
  body.brand-storefront .brand-btn-primary:hover::after {
    transform: translateX(100%);
  }
  body.brand-storefront .brand-btn-primary:active {
    transform: translateY(0) scale(0.98);
  }
  body.brand-storefront .brand-btn-primary:focus-visible {
    outline: 2px solid var(--brand-primary, var(--platform));
    outline-offset: 3px;
  }
  body.brand-storefront .brand-btn-primary.is-loading {
    pointer-events: none;
    opacity: 0.85;
  }
  body.brand-storefront .brand-btn-primary.is-loading::before {
    content: '';
    width: 1.1em;
    height: 1.1em;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: brandSpin 0.7s linear infinite;
    margin-right: 0.5em;
    display: inline-block;
    vertical-align: middle;
  }
  @keyframes brandSpin { to { transform: rotate(360deg); } }

  body.brand-storefront .brand-btn-secondary {
    background: var(--component-surface-raised, #fff);
    color: var(--brand-text, #1a1a2e);
    border: 1.5px solid var(--border, #e5e5e5);
    border-radius: var(--brand-btn-radius);
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    min-height: var(--touch-target-min, 44px);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s var(--brand-ease-out);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  body.brand-storefront .brand-btn-secondary:hover {
    border-color: var(--brand-primary, var(--platform));
    background: var(--bg-soft, #fafafa);
    transform: translateY(-1px);
  }
  body.brand-storefront .brand-btn-secondary:active {
    transform: scale(0.98);
  }
  body.brand-storefront .brand-btn-secondary:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
  }


  body.brand-storefront .brand-chip,
  body.brand-storefront .color-pill.brand-chip {
    border-radius: var(--brand-chip-radius);
    min-width: 32px;
    min-height: var(--touch-target-min, 44px);
    transition: transform 0.15s var(--brand-ease-out), box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  body.brand-storefront .brand-chip:hover,
  body.brand-storefront .color-pill.brand-chip:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  }
  body.brand-storefront .brand-chip.active,
  body.brand-storefront .color-pill.brand-chip.active {
    box-shadow: 0 0 0 2px var(--brand-text, #1a1a2e), 0 0 0 4px rgba(255,255,255,0.9);
    transform: scale(1.05);
  }
  body.brand-storefront .brand-chip:focus-visible,
  body.brand-storefront .color-pill.brand-chip:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
  }
  body.brand-storefront .filter-sort select.brand-chip-select {
    border-radius: var(--brand-chip-radius);
    padding: 0.55rem 2rem 0.55rem 1rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  body.brand-storefront .filter-sort select.brand-chip-select:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
    border-color: var(--brand-primary);
  }


  body.brand-storefront .brand-skeleton,
  body.brand-storefront .skeleton-card .skel-img,
  body.brand-storefront .skeleton-card .skel-line,
  body.brand-storefront .product-img-skeleton {
    background: linear-gradient(
      90deg,
      var(--bg-soft, #f0f0f0) 0%,
      rgba(255,255,255,0.9) 45%,
      var(--bg-soft, #f0f0f0) 90%
    );
    background-size: 200% 100%;
    animation: brandShimmer 1.35s ease-in-out infinite;
  }
  body.brand-storefront .product-img.is-loaded + .product-img-skeleton {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }


  body.brand-storefront .brand-accordion {
    border: 1px solid var(--border, #ebebeb);
    border-radius: var(--brand-btn-radius);
    overflow: hidden;
    background: #fff;
  }
  body.brand-storefront .brand-accordion-item + .brand-accordion-item {
    border-top: 1px solid var(--border, #ebebeb);
  }
  body.brand-storefront .brand-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--brand-text, #1a1a2e);
    cursor: pointer;
    text-align: left;
    min-height: 48px;
  }
  body.brand-storefront .brand-accordion-trigger:hover {
    background: var(--bg-soft, #fafafa);
  }
  body.brand-storefront .brand-accordion-trigger:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: -2px;
  }
  body.brand-storefront .brand-accordion-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.25s var(--brand-ease-out);
  }
  body.brand-storefront .brand-accordion-trigger[aria-expanded="true"] .brand-accordion-icon {
    transform: rotate(180deg);
  }
  body.brand-storefront .brand-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--brand-ease-out);
  }
  body.brand-storefront .brand-accordion-trigger[aria-expanded="true"] + .brand-accordion-panel {
    grid-template-rows: 1fr;
  }
  body.brand-storefront .brand-accordion-panel-inner {
    overflow: hidden;
    padding: 0 1.15rem;
    color: #4a5568;
    line-height: 1.7;
    font-size: var(--text-body);
  }
  body.brand-storefront .brand-accordion-trigger[aria-expanded="true"] + .brand-accordion-panel .brand-accordion-panel-inner {
    padding-bottom: 1.15rem;
  }


  body.brand-storefront .brand-pdp-dock {
    position: fixed;
    right: calc(1rem + var(--safe-right, 0px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.35rem;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  }
  body.brand-storefront .brand-dock-btn {
    width: var(--brand-dock-size);
    height: var(--brand-dock-size);
    min-width: var(--brand-dock-size);
    min-height: var(--brand-dock-size);
    border: none;
    border-radius: 12px;
    background: #fff;
    color: var(--brand-text, #1a1a2e);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--brand-ease-out), background 0.2s, color 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  body.brand-storefront .brand-dock-btn:hover {
    background: var(--platform-gradient-soft, rgba(155,89,182,0.08));
    color: var(--platform, #9b59b6);
    transform: scale(1.06);
  }
  body.brand-storefront .brand-dock-btn:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
  }
  body.brand-storefront .brand-dock-btn.saved {
    color: #e74c3c;
  }
  @media (max-width: 768px) {
    body.brand-storefront .brand-pdp-dock {
      top: auto;
      bottom: calc(5.5rem + var(--safe-bottom, 0px));
      transform: none;
      flex-direction: row;
      right: calc(0.75rem + var(--safe-right, 0px));
    }
    body.brand-storefront .brand-pdp-dock + .chat-orb-dock,
    body.brand-storefront:has(.brand-pdp-sticky-bar.is-visible) .chat-orb-dock {
      bottom: calc(5.75rem + var(--safe-bottom, 0px));
    }
  }


  body.brand-storefront .brand-pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    padding: 0.65rem calc(var(--page-gutter, 1rem) + var(--safe-left, 0px))
      calc(0.65rem + var(--safe-bottom, 0px))
      calc(var(--page-gutter, 1rem) + var(--safe-right, 0px));
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border, #ebebeb);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateY(110%);
    transition: transform 0.35s var(--brand-ease-out);
    pointer-events: none;
  }
  body.brand-storefront .brand-pdp-sticky-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  body.brand-storefront .brand-pdp-sticky-meta {
    flex: 1;
    min-width: 0;
  }
  body.brand-storefront .brand-pdp-sticky-title {
    font-size: var(--text-caption);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brand-text);
  }
  body.brand-storefront .brand-pdp-sticky-price {
    font-size: var(--text-body);
    font-weight: 800;
    color: var(--brand-text);
  }
  body.brand-storefront .brand-pdp-sticky-bar .brand-btn-primary {
    flex-shrink: 0;
    min-width: 42%;
    max-width: 220px;
    padding: 0.85rem 1.25rem;
    font-size: var(--text-body);
  }
  @media (min-width: 769px) {
    body.brand-storefront .brand-pdp-sticky-bar {
      display: none;
    }
  }
  @media (max-width: 768px) {
    body.brand-storefront.pdp-has-sticky-bar {
      padding-bottom: calc(4.5rem + var(--safe-bottom, 0px));
    }
  }


  @media (prefers-reduced-motion: reduce) {
    body.brand-storefront .brand-btn-primary::after,
    body.brand-storefront .brand-skeleton,
    body.brand-storefront .skeleton-card .skel-img,
    body.brand-storefront .product-img-skeleton {
      animation: none;
      transition: none;
    }
    body.brand-storefront .brand-btn-primary:hover,
    body.brand-storefront .brand-chip:hover {
      transform: none;
    }
  }
  
}

@layer components {

  /* ===== Collection navigation (segmented pills) ===== */
  body.brand-storefront .collection-chips-row {
    display: flex;
    align-items: center;
    padding: 0 2rem 1rem;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  body.brand-storefront .shop-collection-toolbar .collection-chips-row {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  body.brand-storefront .collection-chips-track {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--bg-soft, #f4f4f5);
    border: 1px solid var(--border, #e8e8ec);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }
  body.brand-storefront a.collection-chip.brand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.1rem;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    color: var(--text-muted, #5c5c66);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }
  body.brand-storefront a.collection-chip.brand-chip:hover {
    color: var(--text, #1a1a1a);
    background: rgba(255, 255, 255, 0.85);
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }
  body.brand-storefront a.collection-chip.brand-chip.active {
    background: var(--text, #1a1a1a);
    color: #fff !important;
    border-color: var(--text, #1a1a1a);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    transform: none;
  }
  body.brand-storefront.dark-mode a.collection-chip.brand-chip.active {
    background: #f5f5f5;
    color: #111 !important;
    border-color: #f5f5f5;
  }

  /* ===== Toolbar header ===== */
  body.brand-storefront .shop-collection-toolbar .section-header {
    align-items: center;
    gap: 1rem;
  }
  body.brand-storefront .shop-collection-toolbar .section-header h2 {
    font-size: var(--section-heading-size);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
  }
  body.brand-storefront .shop-collection-toolbar .section-header .count {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    background: var(--bg-soft, #f4f4f5);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* ===== Search + sort row ===== */
  body.brand-storefront .filter-bar.catalog-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.65rem 1rem;
    align-items: center;
    padding: 0 2rem 1.25rem;
  }
  /* Legacy 2-col toolbar (search + sort). Catalog-intel uses .catalog-intel-search-row (3-col). */
  body.brand-storefront .catalog-toolbar-primary:not(.catalog-intel-search-row) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
  }
  body.brand-storefront .shop-collection-toolbar .search-box {
    position: relative;
    min-width: 0;
  }
  /* Generic legacy search — exclude catalog-intel (S194/196: +AI badge needs 3.25rem padding) */
  body.brand-storefront .shop-collection-toolbar .search-box:not(.catalog-intel-search) input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 2.65rem;
    border-radius: var(--brand-btn-radius, 10px);
    border: 1px solid var(--border, #e0e0e6);
    background: #fff;
    font-size: var(--text-body);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  body.brand-storefront .shop-collection-toolbar .search-box:not(.catalog-intel-search) input:focus {
    border-color: var(--brand-primary, var(--platform, #9b59b6));
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.12);
  }
  body.brand-storefront .shop-collection-toolbar .search-box:not(.catalog-intel-search) svg {
    left: 0.9rem;
    opacity: 0.45;
  }
  body.brand-storefront .shop-collection-toolbar .catalog-intel-search svg {
    display: none;
  }
  body.brand-storefront .shop-collection-toolbar .vs-camera-btn {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
  }
  body.brand-storefront .catalog-ai-hint {
    grid-column: 1 / -1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-caption);
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  body.brand-storefront .catalog-ai-hint-icon {
    color: var(--platform, #9b59b6);
    font-size: var(--text-caption);
  }
  body.brand-storefront .search-powered-label {
    display: none;
  }
  body.brand-storefront .catalog-toolbar-secondary {
    grid-column: 1 / 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  body.brand-storefront .shop-collection-toolbar .filter-sort {
    grid-column: 2 / 3;
    flex-shrink: 0;
  }
  body.brand-storefront .shop-collection-toolbar .filter-sort select.brand-chip-select {
    min-width: 9.5rem;
    font-size: var(--text-caption);
  }
  body.brand-storefront .shop-collection-toolbar .filter-count {
    display: none !important;
  }
  body.brand-storefront .shop-collection-toolbar .color-filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  body.brand-storefront .shop-collection-toolbar .color-filter-pills::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 768px) {
    body.brand-storefront .collection-chips-row,
    body.brand-storefront .shop-collection-toolbar .collection-chips-row {
      padding-left: var(--page-gutter, 1rem);
      padding-right: var(--page-gutter, 1rem);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.brand-storefront .collection-chips-track {
      flex-wrap: nowrap;
    }
    body.brand-storefront .filter-bar.catalog-toolbar {
      grid-template-columns: 1fr;
      padding-left: var(--page-gutter, 1rem);
      padding-right: var(--page-gutter, 1rem);
    }
    body.brand-storefront .catalog-toolbar-primary:not(.catalog-intel-search-row) {
      grid-template-columns: 1fr;
    }
    body.brand-storefront .shop-collection-toolbar:not(.catalog-intel-toolbar) .filter-sort {
      grid-column: 1;
      width: 100%;
    }
    body.brand-storefront .shop-collection-toolbar:not(.catalog-intel-toolbar) .filter-sort select {
      width: 100%;
    }
    body.brand-storefront .catalog-toolbar-secondary {
      grid-column: 1;
    }
  }

}

@layer overrides {

  body.brand-storefront .shop-collection-toolbar.is-sticky-toolbar {
    position: sticky;
    top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
    z-index: 85;
    margin-left: calc(-1 * var(--safe-left, 0px));
    margin-right: calc(-1 * var(--safe-right, 0px));
    padding-left: calc(var(--safe-left, 0px));
    padding-right: calc(var(--safe-right, 0px));
    background: color-mix(in srgb, var(--bg, #fff) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    scroll-margin-top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + 1rem);
  }
  body.brand-storefront .shop-collection-toolbar.is-sticky-toolbar.is-scrolled {
    border-bottom-color: var(--border, #ebebeb);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  }
  body.brand-storefront.dark-mode .shop-collection-toolbar.is-sticky-toolbar {
    background: color-mix(in srgb, var(--bg, #111) 92%, transparent);
  }
  body.brand-storefront .shop-collection-toolbar.is-sticky-toolbar .section-header {
    padding-top: clamp(1rem, 3vw, 1.5rem);
    padding-bottom: 0.35rem;
  }
  body.brand-storefront #products {
    scroll-margin-top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + 7.5rem);
  }
  @media (max-width: 768px) {
    body.brand-storefront .shop-collection-toolbar.is-sticky-toolbar .filter-bar.catalog-toolbar {
      padding-bottom: 0.85rem;
    }
  }

}

@layer components {

  body.brand-storefront .brand-mobile-ia-tabs {
    display: none;
  }
  body.brand-storefront.brand-mobile-ia-on .brand-mobile-ia-panels {
    display: block;
  }
  @media (max-width: 768px) {
    body.brand-storefront.brand-mobile-ia-on .brand-mobile-ia-tabs {
      display: flex;
      position: sticky;
      top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
      z-index: 84;
      gap: 0.35rem;
      padding: 0.5rem var(--page-gutter, 1rem);
      margin: 0 auto;
      max-width: 1280px;
      width: 100%;
      box-sizing: border-box;
      background: color-mix(in srgb, var(--bg, #fff) 96%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border, #ebebeb);
    }
    body.brand-storefront.brand-mobile-ia-on .shop-collection-toolbar.is-sticky-toolbar {
      top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + 2.75rem);
    }
    body.brand-storefront.brand-mobile-ia-on .brand-mobile-ia-tab {
      flex: 1 1 0;
      min-height: 44px;
      padding: 0.55rem 0.75rem;
      border-radius: 999px;
      border: 1px solid var(--border, #e0e0e6);
      background: var(--bg-soft, #f4f4f5);
      color: var(--text-muted, #5c5c66);
      font-size: var(--text-caption);
      font-weight: 600;
      font-family: var(--body-font, inherit);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    body.brand-storefront.brand-mobile-ia-on .brand-mobile-ia-tab.is-active {
      background: var(--text, #1a1a1a);
      color: #fff;
      border-color: var(--text, #1a1a1a);
    }
    body.brand-storefront.dark-mode.brand-mobile-ia-on .brand-mobile-ia-tab.is-active {
      background: #f5f5f5;
      color: #111;
      border-color: #f5f5f5;
    }
    body.brand-storefront.brand-mobile-ia-on .brand-ia-panel {
      display: none;
    }
    body.brand-storefront.brand-mobile-ia-on .brand-ia-panel.is-active {
      display: block;
    }
    body.brand-storefront.brand-mobile-ia-on .brand-ia-panel--story .brand-experience-below-shop {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: none;
    }
  }
  @media (min-width: 769px) {
    body.brand-storefront.brand-mobile-ia-on .brand-ia-panel {
      display: block;
    }
    body.brand-storefront.brand-mobile-ia-on .brand-ia-panel + .brand-ia-panel {
      margin-top: var(--stable-section-gap, 2.5rem);
    }
  }

}

@layer overrides {

  body.brand-storefront {
    --fab-safe-bottom: var(--safe-bottom, 0px);
    --fab-safe-right: var(--safe-right, 0px);
    --fab-chat-size: 56px;
    --fab-back-top-size: 44px;
    --fab-gap: 0.75rem;
    --fab-chat-bottom: calc(1.25rem + var(--fab-safe-bottom));
    --fab-back-top-bottom: calc(1rem + var(--fab-safe-bottom));
    --fab-chat-window-bottom: calc(var(--fab-chat-bottom) + var(--fab-chat-size) + 0.65rem);
  }
  body.brand-storefront.fab-back-top-on {
    --fab-chat-bottom: calc(1rem + var(--fab-back-top-size) + var(--fab-gap) + var(--fab-safe-bottom));
  }
  body.brand-storefront.fab-sticky-purchase-on {
    --fab-chat-bottom: calc(5.25rem + var(--fab-safe-bottom));
    --fab-back-top-bottom: calc(5.25rem + var(--fab-safe-bottom));
  }
  body.brand-storefront.fab-pdp-dock-on {
    --fab-chat-bottom: calc(5.75rem + var(--fab-safe-bottom));
  }
  body.brand-storefront.fab-back-top-on.fab-sticky-purchase-on {
    --fab-chat-bottom: calc(9rem + var(--fab-safe-bottom));
    --fab-back-top-bottom: calc(5.25rem + var(--fab-safe-bottom));
  }
  body.brand-storefront.fab-back-top-on.fab-pdp-dock-on:not(.fab-sticky-purchase-on) {
    --fab-chat-bottom: calc(5.75rem + var(--fab-back-top-size) + var(--fab-gap) + var(--fab-safe-bottom));
  }

  body.brand-storefront:not(:has(.chat-orb-dock)) .chat-orb {
    bottom: var(--fab-chat-bottom) !important;
    right: calc(1.25rem + var(--fab-safe-right)) !important;
  }
  body.brand-storefront:not(:has(.chat-orb-dock)) .chat-window {
    bottom: var(--fab-chat-window-bottom) !important;
    right: calc(0.75rem + var(--fab-safe-right)) !important;
  }
  body.brand-storefront .chat-orb-dock {
    bottom: var(--fab-chat-bottom) !important;
    right: calc(1.25rem + var(--fab-safe-right)) !important;
    width: min(350px, calc(100% - 2rem)) !important;
    max-width: 350px;
  }
  body.brand-storefront .chat-orb-dock .chat-window {
    bottom: calc(var(--fab-chat-size) + 0.65rem) !important;
    right: 0 !important;
  }
  body.brand-storefront .back-to-top {
    bottom: var(--fab-back-top-bottom) !important;
    right: calc(1rem + var(--fab-safe-right)) !important;
  }
  body.brand-storefront .brand-pdp-dock {
    z-index: 940;
  }

  @media (max-width: 768px) {
    body.brand-storefront {
      --fab-chat-size: 50px;
    }
    body.brand-storefront.pdp-has-sticky-bar.fab-sticky-purchase-on {
      padding-bottom: calc(4.75rem + var(--fab-safe-bottom));
    }
    body.brand-storefront .brand-pdp-dock {
      bottom: calc(5.25rem + var(--fab-safe-bottom)) !important;
      top: auto !important;
    }
    body.brand-storefront.fab-sticky-purchase-on .brand-pdp-dock {
      bottom: calc(9.25rem + var(--fab-safe-bottom)) !important;
    }
  }

}

@layer features {

  body.brand-storefront .shop-collection-toolbar {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  body.brand-storefront .catalog-intel-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.65rem clamp(1rem, 3vw, 2rem) 0.25rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-muted);
  }
  .ci-status-dot { opacity: 0.45; }
  .ci-status-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }
  .catalog-intel-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0  clamp(1rem, 3vw, 2rem) 0.75rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  .ci-quick-pick {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--bg-soft, #f4f4f5);
    border: 1px solid var(--border, #e8e8ec);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .ci-quick-pick:hover {
    color: var(--text);
    border-color: var(--platform, #9b59b6);
    background: #fff;
  }
  body.brand-storefront .collection-chip-badge {
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: var(--text-caption);
    font-weight: 800;
    letter-spacing: 0.06em;
    background: #ef4444;
    color: #fff;
    vertical-align: middle;
  }
  body.brand-storefront a.collection-chip.brand-chip.active .collection-chip-badge {
    background: rgba(255,255,255,0.25);
  }
  /* Parent filter-bar uses 2-row grid for legacy toolbar; intel toolbar is single stack */
  body.brand-storefront .filter-bar.catalog-toolbar.catalog-intel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem 0.75rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Ask Kaito field — fluid width on desktop, shrink-only in toolbar row */
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-search {
    flex: 0 1 auto;
    max-width: clamp(16rem, 30vw, 28rem);
    width: 100%;
    min-width: 0;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .filter-sort {
    flex: 0 0 auto;
    min-width: 8.5rem;
    align-self: center;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .filter-sort select {
    width: 100%;
    min-width: 8.5rem;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border, #e0e0e6);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search .ci-ai-badge {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: var(--platform-gradient-soft, rgba(155,89,182,0.14));
    color: var(--platform, #9b59b6);
    font-size: var(--text-caption);
    font-weight: 800;
    line-height: 1.1;
    pointer-events: none;
  }
  /* +AI badge replaces leading magnifier; avoid overlap / caret-like artifact */
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search .ci-ai-badge ~ svg {
    display: none;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search input#searchInput,
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 0.5rem;
    padding-right: 5.5rem;
    padding-bottom: 0.5rem;
    padding-left: 3.25rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: var(--text-body);
    box-shadow: none;
    outline: none;
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search:focus-within {
    border-color: var(--brand-primary, var(--platform, #9b59b6));
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.12);
  }
  body.brand-storefront .catalog-intel-toolbar .catalog-intel-search input:focus {
    outline: none;
  }
  .ci-mic-btn {
    position: absolute;
    right: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-body);
    opacity: 0.7;
    padding: 0.25rem;
    border-radius: 8px;
  }
  .ci-mic-btn:hover,
  .ci-mic-btn:focus,
  .ci-mic-btn:focus-visible { opacity: 1; background: var(--bg-soft); }
  .catalog-intel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
  .ci-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: var(--text-caption);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
  }
  .ci-stylist-btn {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }
  .ci-size-btn {
    background: var(--bg-info, #e0f2fe);
    border-color: var(--border-info, #7dd3fc);
    color: var(--text-info, #0369a1);
  }
  .ci-tryon-btn {
    background: var(--bg-success, #ecfdf5);
    border-color: var(--border-success, #6ee7b7);
    color: var(--text-success, #047857);
  }
  .ci-new-pill, .ci-beta-pill {
    font-size: var(--text-caption);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .ci-new-pill { background: #fbbf24; color: #111; }
  .ci-beta-pill { background: rgba(255,255,255,0.35); color: inherit; }
  .ci-stylist-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.45);
  }
  .ci-stylist-drawer[hidden] { display: none !important; }
  .ci-stylist-panel {
    width: min(480px, 100%);
    max-height: 70vh;
    background: var(--bg, #fff);
    border-radius: 16px 16px 0 0;
    padding: 1.25rem;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .ci-stylist-messages {
    flex: 1;
    overflow-y: auto;
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--text);
    min-height: 120px;
  }
  .ci-stylist-input-row {
    display: flex;
    gap: 0.5rem;
  }
  .ci-stylist-input-row input {
    flex: 1;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: var(--text-body);
  }
  @media (max-width: 900px) {
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row {
      flex-wrap: wrap;
    }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-search {
      flex: 1 1 100%;
      min-width: min(100%, 280px);
    }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-actions {
      flex: 1 1 auto;
      min-width: 0;
    }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .filter-sort {
      flex: 0 0 auto;
      margin-left: auto;
    }
  }
  @media (max-width: 640px) {
    .catalog-intel-status,
    .catalog-intel-quick-picks { padding-left: var(--page-gutter, 1rem); padding-right: var(--page-gutter, 1rem); }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row {
      flex-direction: column;
      align-items: stretch;
    }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-search,
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .catalog-intel-actions,
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .filter-sort {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      margin-left: 0;
    }
    body.brand-storefront .catalog-intel-toolbar .catalog-intel-search-row .filter-sort select {
      width: 100%;
    }
    .catalog-intel-actions .ci-action-btn { flex: 1; justify-content: center; }
  }
  
  @media (max-width: 768px) {
    body.brand-storefront {
      overflow-x: clip;
    }
    body.brand-storefront > .brand-coast-tickers {
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
      padding-inline: max(var(--page-gutter, 1rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
      box-sizing: border-box;
    }
    body.brand-storefront .shop-collection-toolbar {
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
    }
    body.brand-storefront .shop-collection-toolbar .catalog-intel-status,
    body.brand-storefront .shop-collection-toolbar .catalog-intel-quick-picks,
    body.brand-storefront .catalog-intel-status,
    body.brand-storefront .catalog-intel-quick-picks {
      width: calc(100% + 2 * var(--page-gutter, 1rem));
      max-width: none;
      margin-inline: calc(-1 * var(--page-gutter, 1rem));
      padding-inline: max(var(--page-gutter, 1rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
      box-sizing: border-box;
    }
  }


}

@layer features {

  .ci-stylist-cites {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.35rem 0 0.15rem;
  }
  .ci-stylist-cite-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0.65rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-muted, #f9fafb);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ci-stylist-cite-card:hover {
    border-color: var(--brand-primary, #111);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .ci-stylist-cite-card img,
  .ci-stylist-cite-ph {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--border, #e5e7eb);
  }
  .ci-stylist-cite-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .ci-stylist-cite-meta strong {
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ci-stylist-cite-meta span {
    font-size: var(--text-caption);
    color: var(--text-muted, #6b7280);
  }
  .ci-stylist-msg {
    margin: 0.35rem 0;
  }
  .ci-stylist-disclosure {
    font-size: var(--text-caption);
    color: var(--text-muted, #6b7280);
    margin-top: 0.25rem;
    line-height: 1.35;
  }
  .ci-stylist-confidence {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.35rem;
    vertical-align: middle;
    background: #f3f4f6;
    color: #4b5563;
  }
  .ci-stylist-confidence[data-level="high"] { background: #ecfdf5; color: #047857; }

}

@layer features {

  .ci-match-drawer {
    position: fixed;
    inset: 0;
    z-index: 205;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.45);
  }
  .ci-match-drawer[hidden] { display: none !important; }
  .ci-match-panel {
    width: min(520px, 100%);
    max-height: 75vh;
    background: var(--bg, #fff);
    border-radius: 16px 16px 0 0;
    padding: 1.25rem;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .ci-match-results {
    flex: 1;
    overflow-y: auto;
    min-height: 80px;
  }
  .ci-match-similar-btn {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--brand-primary, #111);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
  }
  .ci-grid-similar-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255,255,255,0.95);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    color: var(--text, #111);
    padding: 0;
  }
  .product-card:hover .ci-grid-similar-btn,
  .product-card:focus-within .ci-grid-similar-btn {
    opacity: 1;
  }
  .ci-grid-similar-btn:hover,
  .ci-grid-similar-btn:focus-visible {
    background: var(--brand-primary, #111);
    color: #fff;
    transform: scale(1.1);
    outline: none;
  }
  .product-img-wrapper.ci-similar-pressing {
    outline: 2px solid var(--brand-primary, #111);
    outline-offset: -2px;
  }
  @media (hover: none) and (pointer: coarse) {
    .ci-grid-similar-btn {
      opacity: 0.9;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      bottom: 8px;
      left: 8px;
    }
  }
  .ci-match-input-row {
    display: flex;
    gap: 0.5rem;
  }
  .ci-match-input-row input {
    flex: 1;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: var(--text-body);
  }

}

@layer a11y {

  .brand-skip-link {
    position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
  }
  .brand-skip-link:focus {
    position: fixed; left: 1rem; top: 1rem; z-index: 100000;
    width: auto; height: auto; padding: 0.65rem 1rem;
    background: #fff; color: #1a1a1a; border: 2px solid var(--platform, #9b59b6);
    border-radius: 8px; font-weight: 600; font-size: var(--text-body);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }
  :focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
  }
  .hero-exp-nav:focus-visible,
  .hero-exp-dot:focus-visible,
  .hero-exp-pause:focus-visible,
  .lg-tile:focus-visible,
  .hero-cta:focus-visible,
  .chat-orb:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--platform, #9b59b6);
  }
  .chat-orb[role="button"] { cursor: pointer; }
  @media (prefers-reduced-motion: reduce) {
    .brand-skip-link:focus { transition: none; }
    .product-card,
    .hero-content,
    .hero-badge,
    .hero-cta,
    .ai-strip,
    .section-header h2,
    .hero-exp-track,
    .hero-exp-slide,
    .chat-orb,
    .back-to-top,
    .pulse,
    .ai-strip-icon {
      animation: none !important;
      transition: none !important;
    }
    .modal-overlay,
    .modal-overlay .modal-content,
    .qv-overlay,
    .qv-modal,
    .ar-modal-overlay,
    .ar-modal,
    .vs-modal-overlay,
    .vs-modal {
      transition: none !important;
    }
    .hero-exp-pause { animation: none !important; }
  }

}

@layer layout {

  body.brand-storefront {
    font-family: var(--body-font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    --stable-page-max: min(1280px, calc(100vw - (var(--safe-left, 0px) + var(--safe-right, 0px))));
    --stable-commerce-max: min(1100px, calc(100vw - (var(--safe-left, 0px) + var(--safe-right, 0px))));
    --stable-measure: min(68ch, 100%);
    --stable-section-gap: clamp(2rem, 5vw, 4.5rem);
    --stable-card-radius: clamp(10px, 1.2vw, 16px);
    --stable-focus-ring: 0 0 0 3px color-mix(in srgb, var(--platform, #9b59b6) 32%, transparent);
    --stable-button-focus-ring: 0 0 0 4px color-mix(in srgb, var(--brand-primary, var(--platform, #9b59b6)) 24%, transparent);
    --stable-motion-fast: 160ms;
    --stable-motion-med: 260ms;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
  }

  body.brand-storefront *,
  body.brand-storefront *::before,
  body.brand-storefront *::after {
    box-sizing: border-box;
  }

  body.brand-storefront img,
  body.brand-storefront picture,
  body.brand-storefront video,
  body.brand-storefront canvas,
  body.brand-storefront svg {
    max-width: 100%;
  }

  body.brand-storefront img,
  body.brand-storefront video {
    height: auto;
  }

  body.brand-storefront :where(.section-header, .product-grid-container, .culture-strip, .brand-story, .life-in-stack, .site-footer, .newsletter, .brand-experience-below-shop) {
    width: 100%;
    max-width: var(--stable-page-max);
    margin-left: auto;
    margin-right: auto;
  }

  body.brand-storefront :where(.pdp-wrapper, .cart-page, .checkout-layout, .express-checkout, .brand-commerce-main, .brand-satellite-main, .conf-page, .policy-page) {
    width: 100%;
    max-width: var(--stable-commerce-max);
    margin-left: auto;
    margin-right: auto;
  }

  body.brand-storefront :where(.brand-story, .life-in-stack, .brand-experience-below-shop, .social-channel-section, .newsletter, .site-footer) {
    margin-top: var(--stable-section-gap);
  }

  body.brand-storefront :where(h1, h2, h3, .product-title, .summary-item-title) {
    text-wrap: balance;
  }

  body.brand-storefront :where(p, li, .hero-desc, .life-in-lead, .brand-faq-a) {
    text-wrap: pretty;
  }

  body.brand-storefront :where(.product-card, .related-card, .rv-card, .brand-satellite-card, .order-summary, .cart-page, .checkout-layout) {
    contain: layout paint;
    border-radius: var(--stable-card-radius);
  }

  body.brand-storefront :where(.product-img-wrapper, .pdp-main-img-wrap, .summary-item-img, .rv-card img, .related-card img, .lg-tile) {
    background: var(--bg-soft, #f7f7f5);
    overflow: hidden;
  }

  body.brand-storefront :where(.product-img-wrapper, .lg-tile) {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
  }

  body.brand-storefront :where(.product-img, .pdp-main-img, .related-card img, .rv-card img, .lg-tile img) {
    display: block;
    object-fit: cover;
  }

  body.brand-storefront :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 3px;
    box-shadow: var(--stable-focus-ring);
  }

  body.brand-storefront :where(button, [role="button"], [class*="btn"], .hero-cta, .back-to-top):focus-visible {
    outline-color: var(--brand-primary, var(--platform, #9b59b6));
    box-shadow: var(--stable-button-focus-ring);
  }

  body.brand-storefront :where(button, .brand-btn-primary, .brand-btn-secondary, .btn-add, .hero-cta, .nav-links a) {
    min-height: 44px;
  }

  body.brand-storefront :where(input, select, textarea) {
    min-height: 44px;
    max-width: 100%;
  }

  body.brand-storefront [data-ai-surface] {
    isolation: isolate;
    contain: layout paint;
  }

  body.brand-storefront [data-ai-surface]::before {
    content: attr(data-ai-label);
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--platform-gradient-soft, rgba(155, 89, 182, 0.08));
    color: var(--platform, #9b59b6);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.brand-storefront .product-grid {
    align-items: start;
  }

  body.brand-storefront .product-card {
    min-width: 0;
  }

  body.brand-storefront .product-info {
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
  }

  body.brand-storefront .product-info .btn-add {
    margin-top: auto;
  }

  @media (max-width: 1024px) {
    body.brand-storefront {
      --stable-section-gap: clamp(1.75rem, 5vw, 3.25rem);
    }
    body.brand-storefront :where(.brand-story, .checkout-layout, .pdp-wrapper) {
      gap: clamp(1rem, 3vw, 2rem);
    }
  }

  @media (max-width: 768px) {
    body.brand-storefront {
      --stable-section-gap: clamp(1.5rem, 7vw, 2.75rem);
    }
    body.brand-storefront :where(.section-header, .filter-bar, .social-channel-header) {
      align-items: stretch;
    }
    body.brand-storefront :where(.checkout-layout, .card-row, .form-row) {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 768px) {
    body.brand-storefront > main,
    body.brand-storefront .shop-collection-toolbar,
    body.brand-storefront .product-grid-container {
      width: 100%;
      max-width: var(--stable-page-max);
      overflow-x: clip;
    }
  }

  @media (max-width: 390px) {
    body.brand-storefront {
      --page-gutter: max(0.75rem, env(safe-area-inset-left, 0px));
      --stable-section-gap: 1.5rem;
    }
    body.brand-storefront :where(.hero-content, .hero-exp-content) {
      max-width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.brand-storefront *,
    body.brand-storefront *::before,
    body.brand-storefront *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }
  }

}

@layer layout {

  body.brand-storefront.brand-layout-compact-elegant {
    --stable-section-gap: clamp(1.35rem, 3.5vw, 2.75rem);
    --compact-nav-height: 56px;
    --section-heading-size: clamp(1.05rem, 2.4vw, 1.35rem);
    /* Fashion-forward card tokens */
    --card-radius: 6px;
    --card-img-ratio: 2 / 3;
    --card-info-pad: 0.7rem 0.2rem 0.5rem;
    --card-title-tracking: 0.03em;
    --card-hover-lift: -3px;
    --card-hover-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
    --hero-overlay-bottom: rgba(0, 0, 0, 0.82);
    --hero-overlay-mid: rgba(0, 0, 0, 0.38);
    --hero-overlay-top: rgba(0, 0, 0, 0.06);
    --newsletter-bg: #141414;
    --newsletter-text: #f5f5f5;
    --newsletter-muted: rgba(245, 245, 245, 0.65);
    --section-rule-color: #ebebeb;
    --wishlist-active-color: #e53e3e;
  }

  /* ===== NAV ===== */
  body.brand-storefront.brand-layout-compact-elegant:not(.brand-site-nav-redesign) .site-nav {
    height: var(--compact-nav-height, 56px);
    padding-inline: clamp(1rem, 3vw, 1.75rem);
  }

  /* ===== HERO — cinematic, taller, more editorial ===== */
  body.brand-storefront.brand-layout-compact-elegant .hero:not(.hero-exp) {
    min-height: clamp(300px, 48vh, 540px);
    height: min(68vh, var(--viewport-height, 68vh));
  }

  body.brand-storefront.brand-layout-compact-elegant .hero.hero-exp {
    min-height: clamp(280px, 52vh, 580px);
  }

  /* Richer, more editorial gradient: heavier at the bottom for legibility */
  body.brand-storefront.brand-layout-compact-elegant .hero-overlay {
    background: linear-gradient(
      to top,
      var(--hero-overlay-bottom) 0%,
      var(--hero-overlay-mid) 50%,
      var(--hero-overlay-top) 100%
    );
  }

  body.brand-storefront.brand-layout-compact-elegant :where(.hero-content, .hero-exp-content) {
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
  }

  body.brand-storefront.brand-layout-compact-elegant :where(.hero h1, .hero-exp-title) {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 0.7rem;
  }

  body.brand-storefront.brand-layout-compact-elegant :where(.hero-desc, .hero-exp-tagline) {
    margin-bottom: 1.35rem;
    line-height: 1.55;
    opacity: 0.88;
  }

  /* Hero CTA: pill shape, more luxurious */
  body.brand-storefront.brand-layout-compact-elegant .hero-cta {
    border-radius: 100px;
    padding: 0.85rem 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }

  body.brand-storefront.brand-layout-compact-elegant .hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  }

  /* ===== SECTION HEADER — editorial with ruled separator ===== */
  body.brand-storefront.brand-layout-compact-elegant .section-header {
    padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1rem, 3vw, 1.75rem) 0.95rem;
    border-bottom: 1px solid var(--section-rule-color, #ebebeb);
    margin-bottom: 0;
  }

  body.brand-storefront.brand-layout-compact-elegant .section-header h2 {
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  body.brand-storefront.brand-layout-compact-elegant .section-header .count {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-muted);
  }

  /* ===== PRODUCT GRID ===== */
  body.brand-storefront.brand-layout-compact-elegant .product-grid {
    padding-top: 0;
    padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }

  /* ===== PRODUCT CARD — fashion editorial ===== */
  body.brand-storefront.brand-layout-compact-elegant .product-card {
    border-radius: var(--card-radius, 6px);
  }

  body.brand-storefront.brand-layout-compact-elegant .product-card:hover {
    transform: translateY(var(--card-hover-lift, -3px));
    box-shadow: var(--card-hover-shadow);
  }

  /* 2:3 editorial portrait — taller, more fashion */
  body.brand-storefront.brand-layout-compact-elegant .product-img-wrapper {
    aspect-ratio: var(--card-img-ratio, 2 / 3);
    border-radius: var(--card-radius, 6px) var(--card-radius, 6px) 0 0;
    background: #f0eeec;
  }

  /* Smooth reveal overlay on hover for editorial feel */
  body.brand-storefront.brand-layout-compact-elegant .product-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0);
    transition: background 0.4s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
  }

  body.brand-storefront.brand-layout-compact-elegant .product-card:hover .product-img-wrapper::after {
    background: rgba(10, 10, 10, 0.08);
  }

  /* Zoom image on hover — subtle editorial scale */
  body.brand-storefront.brand-layout-compact-elegant .product-card:hover .product-img {
    transform: scale(1.04);
  }

  /* ===== PRODUCT INFO — refined editorial typography ===== */
  body.brand-storefront.brand-layout-compact-elegant .product-info {
    padding: var(--card-info-pad, 0.7rem 0.2rem 0.5rem);
    min-height: 6.5rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .product-title {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: var(--card-title-tracking, 0.03em);
    line-height: 1.4;
    color: var(--text);
  }

  body.brand-storefront.brand-layout-compact-elegant .product-color-name {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .product-price {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
  }

  /* Compact color dots for denser product cards */
  body.brand-storefront.brand-layout-compact-elegant .color-dot {
    width: 11px;
    height: 11px;
  }

  /* ===== WISHLIST + QUICK VIEW BUTTONS — refined ===== */
  body.brand-storefront.brand-layout-compact-elegant .wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: var(--layout-touch-target, 44px);
    height: var(--layout-touch-target, 44px);
    min-width: var(--layout-touch-target, 44px);
    min-height: var(--layout-touch-target, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text);
    /* opacity handled by shared CSS (hover/coarse pointer/saved) */
    transition: opacity 0.2s ease, background 0.2s, transform 0.2s;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  body.brand-storefront.brand-layout-compact-elegant .product-card:hover .wishlist-btn,
  body.brand-storefront.brand-layout-compact-elegant .product-card:focus-within .wishlist-btn {
    opacity: 1;
  }

  body.brand-storefront.brand-layout-compact-elegant .wishlist-btn:hover {
    background: #fff;
    transform: scale(1.12);
    color: var(--wishlist-active-color, #e53e3e);
  }

  body.brand-storefront.brand-layout-compact-elegant .wishlist-btn.saved {
    color: var(--wishlist-active-color, #e53e3e);
    opacity: 1;
    background: #fff;
  }

  body.brand-storefront.brand-layout-compact-elegant .quick-view-btn {
    bottom: 10px;
    right: 10px;
    width: var(--layout-touch-target, 44px);
    height: var(--layout-touch-target, 44px);
    min-width: var(--layout-touch-target, 44px);
    min-height: var(--layout-touch-target, 44px);
    z-index: 6;
  }

  body.brand-storefront.brand-layout-compact-elegant .product-card:focus-within .quick-view-btn {
    opacity: 1;
  }

  @media (hover: none) and (pointer: coarse) {
    body.brand-storefront.brand-layout-compact-elegant .product-card .wishlist-btn,
    body.brand-storefront.brand-layout-compact-elegant .product-card .quick-view-btn {
      opacity: 1;
    }
  }

  /* ===== CULTURE STRIP — minimal editorial cards ===== */
  body.brand-storefront.brand-layout-compact-elegant .culture-strip {
    padding-inline: clamp(1rem, 3vw, 1.75rem);
    gap: 0.65rem;
    margin-top: 0.5rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .culture-card {
    padding: 1rem 0.85rem;
    border-radius: 8px;
    background: #fafaf9;
    border: 1px solid var(--section-rule-color, #ebebeb);
  }

  body.brand-storefront.brand-layout-compact-elegant .culture-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  }

  body.brand-storefront.brand-layout-compact-elegant .culture-card-label {
    letter-spacing: 0.1em;
    font-size: 0.65rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .culture-card-value {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* ===== BRAND STORY — more editorial proportions ===== */
  body.brand-storefront.brand-layout-compact-elegant .brand-story {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 3vw, 1.75rem);
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }

  body.brand-storefront.brand-layout-compact-elegant .brand-story-text h2 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  body.brand-storefront.brand-layout-compact-elegant .brand-story-visual {
    aspect-ratio: 3 / 4;
    border-radius: 6px;
  }

  /* ===== NEWSLETTER — dark editorial ===== */
  body.brand-storefront.brand-layout-compact-elegant .newsletter {
    padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 3vw, 1.75rem);
    background: var(--newsletter-bg, #141414);
    border-top: none;
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter h2 {
    color: var(--newsletter-text, #f5f5f5);
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: clamp(1.35rem, 3.5vw, 2rem);
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter p {
    color: var(--newsletter-muted, rgba(245, 245, 245, 0.65));
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter-form input {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--newsletter-text, #f5f5f5);
    border-radius: 100px 0 0 100px;
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter-form input::placeholder {
    color: rgba(245, 245, 245, 0.45);
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter-form input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter-form button {
    border-radius: 0 100px 100px 0;
    background: #fff;
    color: #141414;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    text-transform: uppercase;
    border: none;
    transition: background 0.2s, transform 0.2s;
  }

  body.brand-storefront.brand-layout-compact-elegant .newsletter-form button:hover {
    background: #f0f0f0;
    transform: none;
  }

  /* ===== TOOLBAR / FILTER BAR ===== */
  body.brand-storefront.brand-layout-compact-elegant .brand-experience-below-shop {
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
  }

  body.brand-storefront.brand-layout-compact-elegant .shop-collection-toolbar .section-header {
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .filter-bar {
    padding-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    row-gap: 0.65rem;
  }

  body.brand-storefront.brand-layout-compact-elegant .shop-collection-toolbar .catalog-intel-status,
  body.brand-storefront.brand-layout-compact-elegant .shop-collection-toolbar .catalog-intel-quick-picks {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.brand-storefront.brand-layout-compact-elegant .shop-collection-toolbar .search-box,
  body.brand-storefront.brand-layout-compact-elegant .shop-collection-toolbar .ai-strip {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    body.brand-storefront.brand-layout-compact-elegant .hero:not(.hero-exp) {
      min-height: clamp(260px, 60vh, 420px);
      height: min(62vh, var(--viewport-height, 62vh));
    }

    body.brand-storefront.brand-layout-compact-elegant .section-header {
      padding-inline: var(--page-gutter, 1rem);
    }

    body.brand-storefront.brand-layout-compact-elegant .newsletter-form {
      flex-direction: column;
    }

    body.brand-storefront.brand-layout-compact-elegant .newsletter-form input {
      border-radius: 100px;
    }

    body.brand-storefront.brand-layout-compact-elegant .newsletter-form button {
      border-radius: 100px;
      min-height: 44px;
    }
  }

  @media (max-width: 390px) {
    body.brand-storefront.brand-layout-compact-elegant :where(.hero h1, .hero-exp-title) {
      font-size: clamp(1.5rem, 7vw, 1.85rem);
    }
  }

  /* Reduced motion — disable all transitions/transforms for motion-sensitive users */
  @media (prefers-reduced-motion: reduce) {
    body.brand-storefront.brand-layout-compact-elegant .product-card,
    body.brand-storefront.brand-layout-compact-elegant .product-img,
    body.brand-storefront.brand-layout-compact-elegant .product-img-wrapper::after,
    body.brand-storefront.brand-layout-compact-elegant .product-card:hover .product-img-wrapper::after,
    body.brand-storefront.brand-layout-compact-elegant .hero-cta,
    body.brand-storefront.brand-layout-compact-elegant .wishlist-btn,
    body.brand-storefront.brand-layout-compact-elegant .wishlist-btn:hover,
    body.brand-storefront.brand-layout-compact-elegant .quick-view-btn,
    body.brand-storefront.brand-layout-compact-elegant .quick-view-btn:hover,
    body.brand-storefront.brand-layout-compact-elegant .newsletter-form button,
    body.brand-storefront.brand-layout-compact-elegant .culture-card {
      transform: none !important;
      transition: none !important;
    }

    body.brand-storefront.brand-layout-compact-elegant .product-card:hover .product-img-wrapper::after {
      background: rgba(10, 10, 10, 0) !important;
    }
  }

}

@layer layout {

  body.brand-storefront.brand-site-nav-redesign {
    --nav-redesign-height: clamp(58px, 7vw, 64px);
    --nav-redesign-pad-x: clamp(1rem, 3.5vw, 1.75rem);
    --nav-height: var(--nav-redesign-height, 60px);
  }

  body.brand-storefront.brand-site-nav-redesign.brand-layout-compact-elegant {
    --nav-redesign-height: 60px;
    --compact-nav-height: 60px;
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header.site-nav,
  body.brand-storefront.brand-site-nav-redesign .site-nav {
    min-height: var(--nav-redesign-height, 60px);
    height: var(--nav-redesign-height, 60px);
    padding: 0 var(--nav-redesign-pad-x, 1.5rem);
    background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary, #1a1a1a) 8%, var(--border, #ebebeb));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bg, #fff) 40%, transparent),
      0 8px 24px rgba(15, 23, 42, 0.04);
  }

  body.brand-storefront.brand-site-nav-redesign .nav-links a::after,
  body.brand-storefront.brand-site-nav-redesign .brand-header__links .brand-nav-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__logo,
  body.brand-storefront.brand-site-nav-redesign .nav-logo {
    gap: 0.85rem;
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__logo img,
  body.brand-storefront.brand-site-nav-redesign .nav-logo img {
    width: 40px;
    height: 40px;
    border-radius: 0.65rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__title,
  body.brand-storefront.brand-site-nav-redesign .nav-logo span {
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    letter-spacing: -0.015em;
    text-transform: none;
    font-weight: 700;
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__links .brand-nav-link,
  body.brand-storefront.brand-site-nav-redesign .nav-links a {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__links .brand-nav-link:hover,
  body.brand-storefront.brand-site-nav-redesign .nav-links a:hover {
    background: color-mix(in srgb, var(--brand-primary, #1a1a1a) 8%, transparent);
    transform: translateY(-1px);
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__links .brand-nav-link[aria-current="page"],
  body.brand-storefront.brand-site-nav-redesign .nav-links a[aria-current="page"] {
    background: color-mix(in srgb, var(--brand-primary, #1a1a1a) 14%, var(--bg, #fff));
    color: var(--brand-primary, var(--text, #1a1a1a));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #1a1a1a) 18%, transparent);
  }

  body.brand-storefront.brand-site-nav-redesign .brand-header__menu,
  body.brand-storefront.brand-site-nav-redesign .nav-hamburger {
    border-radius: 0.65rem;
    border: 1px solid var(--border, #ebebeb);
    padding: 0.55rem 0.65rem;
    background: var(--bg, #fff);
  }

  @media (max-width: 768px) {
    body.brand-storefront.brand-site-nav-redesign .brand-header.site-nav,
    body.brand-storefront.brand-site-nav-redesign .site-nav {
      flex-wrap: wrap;
      row-gap: 0.35rem;
    }

    body.brand-storefront.brand-site-nav-redesign .brand-header__logo,
    body.brand-storefront.brand-site-nav-redesign .nav-logo {
      flex: 1 1 auto;
      justify-content: center;
    }
  }

}

@layer features {

.catalog-lazy-status {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--text-body);
  color: var(--text-muted);
  padding: 0.5rem 0 1rem;
  font-weight: 500;
}
.catalog-lazy-skeleton {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
  gap: clamp(0.5rem, 2vw, 1.25rem);
  padding-top: 0;
  padding-right: var(--page-gutter);
  padding-bottom: 2rem;
  padding-left: var(--page-gutter);
  box-sizing: border-box;
}
.catalog-skeleton-card {
  aspect-ratio: 3/4;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, #eee 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: brandShimmer 1.2s ease-in-out infinite;
}

}

@layer components {

  .collection-breadcrumb.breadcrumbs {
    padding: 0.75rem var(--page-gutter, 4%) 0;
    font-size: var(--text-caption);
    color: var(--text-muted, #717171);
  }
  .collection-breadcrumb.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
  }
  .collection-breadcrumb.breadcrumbs a:hover {
    opacity: 1;
    text-decoration: underline;
  }
  .collection-breadcrumb .bc-sep {
    margin: 0 8px;
    opacity: 0.35;
    font-size: var(--text-caption);
  }
  .collection-breadcrumb .bc-current {
    color: var(--text, #1a1a1a);
    font-weight: 600;
    opacity: 1;
  }

}

@layer components {

  .active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: 0 var(--page-gutter, 4%) 0.75rem;
  }
  .active-filter-chip {
    font-size: var(--text-caption);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, #ebebeb);
    background: var(--bg-soft, #f7f7f5);
    cursor: pointer;
    color: var(--text, #1a1a1a);
  }
  .active-filter-chip:hover { border-color: var(--brand-primary, #6d28d9); }
  .active-filter-clear {
    font-size: var(--text-caption);
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--brand-primary, #6d28d9);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
  }

}

@layer features {

body.brand-storefront #productGrid.catalog-lazy-deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
@media (max-width: 768px) {
  body.brand-storefront #productGrid.catalog-lazy-deferred {
    contain-intrinsic-size: auto 340px;
  }
}
@media (max-width: 390px) {
  body.brand-storefront #productGrid.catalog-lazy-deferred {
    contain-intrinsic-size: auto 320px;
  }
}
body.brand-storefront .brand-story, body.brand-storefront .life-in-stack, body.brand-storefront .lifestyle-gallery-section, body.brand-storefront .instagram-gallery, body.brand-storefront .tiktok-gallery, body.brand-storefront .culture-strip {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
/* Crawler index only — never show above the product grid */
body.brand-storefront .catalog-seo-links {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.brand-storefront .catalog-seo-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.brand-storefront .site-footer-policy-note {
  display: block;
  width: 100%;
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0.35rem 0 0.5rem;
  max-width: 52rem;
}

}

@layer tokens {

  [data-brand-tokens="1"] .section-header { margin-bottom: var(--space-5); }
  [data-brand-tokens="1"] .section-header h2 { font-size: var(--section-heading-size); letter-spacing: -0.02em; }
  html[data-brand-tokens="1"] body.brand-storefront .product-grid { gap: var(--space-4, 1rem); }
  [data-brand-tokens="1"] .product-card:hover { box-shadow: var(--shadow-md); }
  [data-brand-tokens="1"] .site-footer { padding: var(--space-7) var(--space-5); }
  [data-brand-tokens="1"] .btn-platform,
  [data-brand-tokens="1"] .btn-add:hover { background: var(--platform-gradient); }
  [data-brand-tokens="1"] .nav-links a:hover::after { background: var(--platform); }
  [data-brand-tokens="1"] .hero-cta { padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-md); }
  [data-brand-tokens="1"] .pdp-section { margin-bottom: var(--space-6); }
  [data-brand-tokens="1"] .cart-page main,
  [data-brand-tokens="1"] .policy-page main { padding: var(--space-6) var(--space-4); max-width: 72rem; margin: 0 auto; }

}

@layer components {

  /* ── BrandHeader (alias .site-nav for legacy layout CSS) ── */
  body.brand-storefront .brand-header.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav, 300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border, #ebebeb);
    transition: box-shadow var(--transition-normal, 250ms ease);
  }
  body.brand-storefront .brand-header.site-nav.scrolled {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
  }
  body.brand-storefront .brand-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    text-decoration: none;
    color: var(--text, #1a1a1a);
    font-family: var(--font-display, var(--heading-font, inherit));
    font-weight: 700;
    font-size: var(--text-lead, 1.125rem);
  }
  body.brand-storefront .brand-header__logo img {
    border-radius: var(--radius-md, 0.5rem);
    object-fit: contain;
  }
  body.brand-storefront .brand-header__links {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
  }
  body.brand-storefront .brand-header__menu {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    padding: 0;
    border: 1px solid var(--component-border-strong, var(--border, #ebebeb));
    border-radius: var(--component-button-radius, var(--radius-lg, 0.75rem));
    background: var(--component-surface-raised, var(--bg, #fff));
    color: var(--text, #1a1a1a);
    cursor: pointer;
  }
  body.brand-storefront .brand-header__menu span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--transition-fast, 150ms ease), opacity var(--transition-fast, 150ms ease);
  }
  body.brand-storefront .brand-header__menu.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.brand-storefront .brand-header__menu.active span:nth-child(2) {
    opacity: 0;
  }
  body.brand-storefront .brand-header__menu.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  body.brand-storefront .brand-header__links .brand-nav-link {
    font-size: var(--text-body, 1rem);
    font-weight: 600;
    color: var(--text-muted, #717171);
    text-decoration: none;
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem);
    border-radius: var(--radius-sm, 0.25rem);
    transition: color var(--transition-fast, 150ms ease);
  }
  body.brand-storefront .brand-header__links .brand-nav-link:hover,
  body.brand-storefront .brand-header__links .brand-nav-link[aria-current="page"] {
    color: var(--brand-primary, var(--text, #1a1a1a));
  }
  body.brand-storefront .brand-header__links .brand-nav-link:focus-visible {
    outline: 2px solid var(--platform, #9b59b6);
    outline-offset: 2px;
  }

  /* ── BrandFooter ── */
  body.brand-storefront .brand-footer.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-7, 2.5rem) var(--space-5, 1.5rem);
    margin-top: var(--space-8, 3rem);
    border-top: 1px solid var(--border, #ebebeb);
    font-size: var(--text-caption, 0.75rem);
    color: var(--text-muted, #717171);
  }
  body.brand-storefront .brand-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4, 1rem) var(--space-5, 1.5rem);
  }
  body.brand-storefront .brand-footer__link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
  }
  body.brand-storefront .brand-footer__link:hover {
    color: var(--brand-primary, var(--text, #1a1a1a));
  }

  /* ── BrandBadge ── */
  body.brand-storefront .brand-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-caption, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  body.brand-storefront .brand-badge--trending,
  body.brand-storefront .trend-badge.brand-badge {
    background: color-mix(in srgb, var(--brand-accent, #f59e0b) 18%, #fff);
    color: var(--brand-text, #1a1a1a);
  }
  body.brand-storefront .brand-badge--stock,
  body.brand-storefront .sp-badge.sp-low-stock {
    background: #fef2f2;
    color: #b91c1c;
  }
  body.brand-storefront .brand-badge--promo {
    background: var(--platform-gradient-soft, rgba(155,89,182,0.08));
    color: var(--brand-primary, #1a1a2e);
  }

  /* ── Modal / drawer shells ── */
  body.brand-storefront :where(.vs-modal-overlay, .qv-modal-overlay, .brand-modal-overlay) {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem);
    background: var(--component-overlay-backdrop, rgba(15, 23, 42, 0.56));
    backdrop-filter: blur(8px);
    z-index: var(--z-modal, 500);
  }
  body.brand-storefront :where(.vs-modal-overlay, .qv-modal-overlay, .brand-modal-overlay).active {
    display: flex;
  }
  body.brand-storefront :where(.vs-modal, .qv-modal, .brand-modal) {
    width: min(100%, 32rem);
    max-height: min(90vh, 48rem);
    overflow: auto;
    padding: clamp(var(--space-5, 1.5rem), 3vw, var(--space-7, 2.5rem));
    border-radius: var(--component-modal-radius, var(--radius-xl, 1rem));
    border: 1px solid color-mix(in srgb, var(--component-border-strong, var(--border, #ebebeb)) 92%, transparent);
    background: var(--component-surface-raised, var(--bg, #fff));
    color: var(--text, #1a1a1a);
    box-shadow: var(--shadow-xl, 0 20px 48px rgba(0, 0, 0, 0.16));
  }
  body.brand-storefront .cart-drawer {
    width: min(26rem, 100vw);
    border-left: 1px solid var(--component-border-strong, var(--border, #ebebeb));
    border-top-left-radius: var(--component-modal-radius, var(--radius-xl, 1rem));
    border-bottom-left-radius: var(--component-modal-radius, var(--radius-xl, 1rem));
    background: var(--component-surface-raised, var(--bg, #fff));
    box-shadow: var(--shadow-xl, 0 20px 48px rgba(0, 0, 0, 0.16));
  }
  body.brand-storefront .brand-story-link,
  body.brand-storefront .load-more-btn.brand-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    min-height: var(--touch-target-min, 44px);
  }

  /* ── Hero / marketing CTAs use primary button ── */
  body.brand-storefront a.hero-cta.brand-btn-primary,
  body.brand-storefront .hero-cta.brand-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    text-decoration: none;
    font-size: var(--text-body, 1rem);
  }
  body.brand-storefront .newsletter-form .brand-btn-primary {
    min-height: 44px;
  }

  @media (max-width: 768px) {
    body.brand-storefront .brand-header__menu {
      display: inline-flex;
    }
    body.brand-storefront .brand-header__links {
      position: fixed;
      top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
      right: calc(var(--page-gutter, 1rem) + var(--safe-right, 0px));
      width: min(20rem, calc(100vw - (2 * var(--page-gutter, 1rem))));
      padding: var(--space-5, 1.5rem);
      border-radius: var(--component-modal-radius, var(--radius-xl, 1rem));
      border: 1px solid var(--component-border-strong, var(--border, #ebebeb));
      background: color-mix(in srgb, var(--component-surface-raised, var(--bg, #fff)) 94%, transparent);
      box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.12));
      backdrop-filter: blur(10px);
      transform: translateY(-0.75rem);
      opacity: 0;
      pointer-events: none;
      transition: transform var(--transition-normal, 250ms ease), opacity var(--transition-normal, 250ms ease);
    }
    body.brand-storefront .brand-header__links.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
  }

}

@layer pdp {

  .pdp-wrapper {
    max-width: var(--stable-page-max, 1400px);
    margin: 0 auto;
    padding: clamp(var(--space-5, 1.5rem), 4vw, var(--space-7, 2.5rem)) var(--page-gutter, 5%);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--space-5, 1.5rem), 4vw, var(--space-8, 3rem));
    align-items: start;
    overflow-x: clip;
  }
  body.brand-storefront.brand-pdp-page .pdp-wrapper > * {
    min-width: 0;
  }
  @media (max-width: 767px) {
    .pdp-wrapper {
      grid-template-columns: 1fr;
      gap: var(--space-5);
      padding: var(--space-5) var(--page-gutter, 4%);
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .pdp-wrapper {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-7);
      padding: var(--space-5) var(--page-gutter, 4%);
    }
  }
  @media (max-width: 390px) {
    .pdp-wrapper {
      gap: var(--space-4);
      padding: var(--space-4) var(--page-gutter, 4%);
    }
  }

  body.brand-pdp-page .pdp-gallery {
    display: flex;
    gap: var(--space-5);
    position: sticky;
    top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + var(--space-4, 1rem));
    height: calc(var(--viewport-height, 100vh) - var(--nav-height, 64px) - var(--safe-top, 0px) - 2.5rem);
    max-height: calc(var(--viewport-height, 100vh) - var(--nav-height, 64px) - var(--safe-top, 0px) - 2.5rem);
    min-width: 0;
    overflow: hidden;
  }
  @media (max-width: 767px) {
    body.brand-pdp-page .pdp-gallery {
      flex-direction: column-reverse;
      position: static;
      height: auto;
      max-height: none;
      gap: var(--space-3);
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .pdp-thumbs-vertical { flex-direction: column; }
  }
  @media (max-width: 767px) {
    .pdp-thumbs-vertical {
      flex-direction: row;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: var(--space-2);
      padding-bottom: 4px;
    }
  }
  @media (max-width: 390px) {
    body.brand-pdp-page .pdp-gallery { gap: var(--space-2); }
    .pdp-thumbs-vertical .pdp-thumb {
      flex-shrink: 0;
    }
  }
  body.brand-pdp-page .pdp-thumbs-vertical {
    min-width: 0;
    max-width: min(88px, 18vw);
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
  }
  body.brand-pdp-page .pdp-main-img-wrapper,
  body.brand-pdp-page .pdp-info {
    min-width: 0;
  }
  body.brand-pdp-page .pdp-main-img {
    min-height: clamp(360px, 60vh, 760px);
  }
  @media (max-width: 767px) {
    body.brand-pdp-page .pdp-thumbs-vertical {
      width: 100%;
      max-width: 100%;
    }
  }


  body.brand-storefront.brand-pdp-page:has(> .site-nav) {
    padding-top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
  }
  body.brand-storefront.brand-pdp-page {
    --brand-bg: #f8f9fa;
    --brand-text: #1a1a2e;
    --border: rgba(0,0,0,0.1);
    --btn-radius: var(--stable-card-radius, 12px);
    --main-font: var(--heading-font, 'Outfit', sans-serif);
    background-color: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--body-font);
  }
  body.brand-pdp-page .brand-hidden { display: none; }
  body.brand-pdp-page .breadcrumbs {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-4) var(--page-gutter, 5%) 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
  }
  body.brand-pdp-page .breadcrumbs a,
  body.brand-pdp-page .breadcrumbs span {
    font-size: var(--text-caption);
    color: var(--brand-text);
    text-decoration: none;
    opacity: 0.6;
    font-family: var(--body-font);
  }
  body.brand-pdp-page .breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
  body.brand-pdp-page .breadcrumbs .bc-sep { margin: 0 8px; opacity: 0.3; font-size: var(--text-caption); }
  body.brand-pdp-page .breadcrumbs .bc-current { opacity: 0.9; font-weight: 500; }

  body.brand-pdp-page .pdp-lifestyle-frame {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    max-height: 220px;
  }
  body.brand-pdp-page .pdp-lifestyle-frame img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }
  body.brand-pdp-page .pdp-lifestyle-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: var(--text-caption);
    font-weight: 600;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
  }
  body.brand-pdp-page .pdp-thumbs-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    padding-right: 5px;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  body.brand-pdp-page .pdp-thumbs-vertical::-webkit-scrollbar { display: none; }
  body.brand-pdp-page .pdp-thumb {
    width: 70px;
    height: 95px;
    object-fit: cover;
    border-radius: var(--btn-radius);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.3s;
  }
  body.brand-pdp-page .pdp-thumb.active,
  body.brand-pdp-page .pdp-thumb:hover {
    opacity: 1;
    border-color: var(--platform);
    transform: scale(1.05);
  }
  body.brand-pdp-page .pdp-main-img-wrapper {
    flex-grow: 1;
    border-radius: var(--btn-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    position: relative;
    cursor: zoom-in;
  }
  body.brand-pdp-page .pdp-main-img-wrapper.zoomed { cursor: zoom-out; overflow: hidden; }
  body.brand-pdp-page .pdp-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
  }
  body.brand-pdp-page .pdp-main-img-wrapper.zoomed .pdp-main-img {
    transform-origin: var(--zoom-x, center) var(--zoom-y, center);
    transform: scale(2.5);
    transition: transform-origin 0.1s;
  }
  body.brand-pdp-page .pdp-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: calc(60px + var(--safe-bottom, 0px));
  }
  body.brand-pdp-page.pdp-has-sticky-bar .pdp-info {
    padding-bottom: calc(120px + var(--safe-bottom, 0px));
  }
  body.brand-pdp-page .modal-content--narrow {
    max-width: min(36rem, calc(100vw - 2rem));
  }
  body.brand-pdp-page .related-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem var(--page-gutter, 5%) 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  body.brand-pdp-page .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 1.25rem;
  }

  body.brand-pdp-page .pdp-img-placeholder {
    width: 100%; min-height: 500px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    background: var(--platform-gradient-soft);
    border-radius: var(--btn-radius);
  }
  body.brand-pdp-page .pdp-img-placeholder span {
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--platform-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: 700; font-family: var(--main-font);
  }
  body.brand-pdp-page .pdp-img-placeholder p {
    color: var(--platform); font-size: 1rem; font-weight: 500;
    font-family: var(--body-font); text-align: center; padding: 0 20px;
  }

  body.brand-pdp-page .try-on-badge {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
    padding: 8px 16px; border-radius: 30px; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 20px rgba(155,89,182,0.15);
    color: var(--platform); transition: all 0.3s;
    border: 1px solid rgba(155,89,182,0.2); z-index: 10;
  }
  body.brand-pdp-page .try-on-badge:hover { transform: scale(1.05); background: white; box-shadow: 0 15px 30px rgba(155,89,182,0.25); }
  body.brand-pdp-page .try-on-beta-pill {
    display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; background: #fef3c7; color: #92400e;
  }
  body.brand-pdp-page #pdp-3d-viewer { margin-top: 12px; border-radius: 12px; overflow: hidden; background: #f8f9fa; }
  body.brand-pdp-page #pdp-3d-viewer model-viewer { width: 100%; height: 420px; background: #f0f0f0; }
  body.brand-pdp-page .live-host-strip {
    position: fixed; bottom: 88px; right: 20px; z-index: 900; max-width: 280px;
    background: rgba(15,23,42,0.92); color: #fff; border-radius: 12px; padding: 12px 14px;
    border: 1px solid rgba(155,89,182,0.45); box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    font-size: 0.82rem; line-height: 1.45;
  }
  body.brand-pdp-page .live-host-strip strong { color: #c4b5fd; display: block; margin-bottom: 4px; }

  body.brand-pdp-page .pdp-brand { text-transform: uppercase; letter-spacing: 3px; font-size: 0.85rem; color: var(--platform); font-weight: 800; }
  body.brand-pdp-page .pdp-title { font-size: 2.5rem; font-weight: 800; line-height: 1.1; font-family: var(--main-font); }
  body.brand-pdp-page .pdp-price { font-size: 1.75rem; font-weight: 300; display: flex; align-items: center; gap: 12px; }
  body.brand-pdp-page .pdp-price .badge {
    font-size: 0.75rem; font-weight: 700;
    background: var(--platform-gradient); color: white;
    padding: 4px 10px; border-radius: 20px;
  }

  body.brand-pdp-page .ai-banner {
    background: var(--platform-gradient-soft);
    border: 1px solid rgba(155,89,182,0.1);
    padding: 18px 20px; border-radius: 12px;
    position: relative; overflow: hidden;
  }
  body.brand-pdp-page .ai-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--platform-gradient); }
  body.brand-pdp-page .ai-banner-title { font-weight: 800; color: var(--platform); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.9rem; }
  body.brand-pdp-page .ai-banner-text { font-size: 0.9rem; opacity: 0.8; line-height: 1.5; }

  body.brand-pdp-page .opts-group { display: flex; flex-direction: column; gap: 10px; }
  body.brand-pdp-page .opts-label { font-size: 0.95rem; font-weight: 600; display: flex; justify-content: space-between; }
  body.brand-pdp-page .color-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
  body.brand-pdp-page .color-swatch {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s;
  }
  body.brand-pdp-page .color-swatch:hover { transform: scale(1.1); }
  body.brand-pdp-page .color-swatch.active { border-color: var(--platform); transform: scale(1.1); box-shadow: inset 0 2px 5px rgba(0,0,0,0.1), 0 0 0 2px #fff, 0 0 0 4px var(--platform); }
  body.brand-pdp-page .color-swatch.swatch-unverified { border: 2px dashed rgba(255,152,0,0.5); position: relative; }
  body.brand-pdp-page .color-swatch.swatch-unverified:hover::after {
    content: 'Unverified'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; color: #ff9800; white-space: nowrap;
  }
  body.brand-pdp-page .color-swatch.swatch-exact { box-shadow: inset 0 2px 5px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05); }

  body.brand-pdp-page .size-selector { display: flex; flex-wrap: wrap; gap: 10px; }
  body.brand-pdp-page .size-btn {
    padding: 12px 18px; border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; font-weight: 600; font-size: 0.95rem;
    background: rgba(255,255,255,0.5); backdrop-filter: blur(5px);
    transition: all 0.2s; font-family: var(--body-font); color: var(--brand-text);
    flex-grow: 1; text-align: center;
  }
  body.brand-pdp-page .size-btn:hover:not(.unavailable) { border-color: var(--platform); background: white; transform: translateY(-2px); }
  body.brand-pdp-page .size-btn.active { background: var(--platform); color: #fff; border-color: var(--platform); box-shadow: 0 8px 20px rgba(155,89,182,0.25); }
  body.brand-pdp-page .size-btn.unavailable { opacity: 0.35; background: #e2e8f0; text-decoration: line-through; cursor: not-allowed; }
  body.brand-pdp-page .size-btn.ai-recommended { border-color: var(--platform); position: relative; }
  body.brand-pdp-page .size-btn.ai-recommended::after { content: 'AI Fit'; position: absolute; top: -8px; right: -8px; background: var(--platform-gradient); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 10px; font-weight: 700; }

  body.brand-pdp-page .find-my-size-btn {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px;
    background: var(--platform-gradient-soft); border: 1px solid rgba(155,89,182,0.2);
    border-radius: 8px; cursor: pointer; font-family: var(--body-font); font-size: 0.85rem;
    font-weight: 600; color: var(--platform); transition: all 0.3s;
  }
  body.brand-pdp-page .find-my-size-btn:hover { background: rgba(155,89,182,0.15); transform: translateY(-1px); }

  body.brand-pdp-page .modal-title--compact { font-size: 1.1rem; }
  body.brand-pdp-page .fms-form { padding: 24px; }
  body.brand-pdp-page .fms-form-intro { font-size: 0.85rem; color: #666; margin-bottom: 20px; line-height: 1.5; }
  body.brand-pdp-page .fms-form-fields { display: flex; flex-direction: column; gap: 16px; }
  body.brand-pdp-page .fms-label { font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 6px; }
  body.brand-pdp-page .fms-input,
  body.brand-pdp-page .fms-select {
    width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
    font-family: var(--body-font); font-size: 0.95rem; outline: none;
    background: #fff; color: var(--brand-text);
  }
  body.brand-pdp-page .fms-select { cursor: pointer; }
  body.brand-pdp-page .fms-input:focus-visible,
  body.brand-pdp-page .fms-select:focus-visible {
    border-color: var(--platform);
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.15);
  }
  body.brand-pdp-page .fms-submit-btn {
    width: 100%; padding: 14px; background: var(--platform-gradient);
    color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    font-family: var(--body-font); transition: transform 0.2s;
  }
  body.brand-pdp-page .fms-submit-btn:hover:not(:disabled) { transform: translateY(-1px); }
  body.brand-pdp-page .fms-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    body.brand-pdp-page .fms-submit-btn {
      background-size: 200% 200%;
      animation: gradientShift 3s ease infinite;
    }
  }
  body.brand-pdp-page .fms-result { display: none; }
  body.brand-pdp-page .fms-result.is-visible { display: block; }
  body.brand-pdp-page .fms-form-error { color: #e53e3e; font-size: 0.9rem; margin: 0; }

  body.brand-pdp-page .size-rec-result {
    background: var(--platform-gradient-soft); border: 1px solid rgba(155,89,182,0.15);
    border-radius: 12px; padding: 16px 20px; margin-top: 8px; display: none;
  }
  body.brand-pdp-page .size-rec-result.visible { display: block; animation: fadeIn 0.3s ease; }
  body.brand-pdp-page .size-rec-size { font-size: 1.5rem; font-weight: 800; color: var(--platform); }
  body.brand-pdp-page .size-rec-confidence { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; display: inline-block; margin-left: 8px; }
  body.brand-pdp-page .size-rec-confidence.high { background: #d4edda; color: #155724; }
  body.brand-pdp-page .size-rec-confidence.medium { background: #fff3cd; color: #856404; }
  body.brand-pdp-page .size-rec-confidence.low { background: #e2e8f0; color: #4a5568; }
  body.brand-pdp-page .size-rec-tip { font-size: 0.85rem; color: #4a5568; margin-top: 8px; line-height: 1.5; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  body.brand-pdp-page .smart-desc { margin-top: 8px; }
  body.brand-pdp-page .smart-desc-verified {
    margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; color: var(--platform, #9b59b6);
    letter-spacing: 0.02em;
  }
  body.brand-pdp-page .smart-desc-highlights { list-style: none; padding: 0; margin: 12px 0; }
  body.brand-pdp-page .smart-desc-highlights li {
    padding: 8px 0 8px 28px; position: relative; font-size: 0.9rem; color: #4a5568; line-height: 1.5;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  body.brand-pdp-page .smart-desc-highlights li::before {
    content: '\2713'; position: absolute; left: 0; top: 8px;
    color: var(--platform); font-weight: 700; font-size: 0.9rem;
  }
  body.brand-pdp-page .smart-desc-keywords { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  body.brand-pdp-page .smart-desc-keyword {
    font-size: 0.7rem; font-weight: 600; padding: 4px 10px;
    background: var(--platform-gradient-soft); color: var(--platform);
    border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase;
  }

  body.brand-pdp-page .chat-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
  body.brand-pdp-page .chat-quick-btn {
    padding: 6px 12px; border: 1px solid rgba(155,89,182,0.2);
    border-radius: 16px; background: rgba(155,89,182,0.05);
    font-size: 0.75rem; font-family: var(--body-font); color: var(--platform);
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  body.brand-pdp-page .chat-quick-btn:hover { background: var(--platform); color: #fff; border-color: var(--platform); }

  body.brand-pdp-page .btn-add-to-cart {
    width: 100%; padding: 20px;
    background: var(--brand-text); color: #fff; border: none;
    border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer;
    transition: all 0.3s; font-family: var(--body-font);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    display: flex; justify-content: center; align-items: center; gap: 10px;
    position: relative; overflow: hidden;
  }
  body.brand-pdp-page .btn-add-to-cart::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
  }
  body.brand-pdp-page .btn-add-to-cart:hover { background: var(--platform); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(155,89,182,0.3); }
  body.brand-pdp-page .btn-add-to-cart:hover::before { left: 100%; }

  body.brand-pdp-page .pdp-desc { line-height: 1.8; color: #4a5568; font-size: 1rem; }
  body.brand-pdp-page .pdp-desc h2, body.brand-pdp-page .pdp-desc h3 { color: var(--brand-text); margin: 25px 0 12px; font-family: var(--main-font); font-weight: 700; }

  body.brand-pdp-page .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s; padding: 20px; }
  body.brand-pdp-page .modal-overlay.active { opacity: 1; pointer-events: auto; }
  body.brand-pdp-page .modal-content { background: white; width: 100%; max-width: min(640px, calc(100vw - 2rem)); max-height: min(90vh, calc(var(--viewport-height, 100vh) - 2rem)); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgba(0,0,0,0.3); transform: translateY(50px); transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  body.brand-pdp-page .modal-overlay.active .modal-content { transform: translateY(0); }
  body.brand-pdp-page .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
  body.brand-pdp-page .modal-title { font-size: 1.3rem; font-weight: 800; font-family: var(--main-font); color: var(--platform); display: flex; align-items: center; gap: 10px; }
  body.brand-pdp-page .modal-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #999; transition: 0.2s; }
  body.brand-pdp-page .modal-close:hover { color: #000; transform: rotate(90deg); }
  body.brand-pdp-page .modal-body { padding: 24px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; }

  body.brand-pdp-page .chat-orb-dock {
    container-type: inline-size;
    container-name: chat-orb;
    position: fixed;
    bottom: calc(30px + var(--safe-bottom, 0px));
    right: calc(30px + var(--safe-right, 0px));
    width: min(350px, calc(100% - 2rem));
    max-width: 350px;
    --chat-orb-size: 56px;
    --chat-orb-gap: 14px;
    z-index: 1000;
    pointer-events: none;
  }
  body.brand-pdp-page .chat-orb-dock > * { pointer-events: auto; }

  body.brand-pdp-page .chat-orb {
    position: absolute; bottom: 0; right: 0;
    width: var(--chat-orb-size); height: var(--chat-orb-size);
    background: var(--platform-gradient);
    background-size: 200% 200%; animation: gradientShift 3s ease infinite;
    border-radius: 50%; box-shadow: 0 10px 25px rgba(155,89,182,0.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s;
  }
  body.brand-pdp-page .chat-orb:hover { transform: scale(1.1); }
  body.brand-pdp-page .chat-orb::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--platform); animation: pulseOrb 2s infinite; }
  @keyframes pulseOrb { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

  body.brand-pdp-page .chat-window {
    position: absolute;
    bottom: calc(var(--chat-orb-size) + var(--chat-orb-gap));
    right: 0;
    width: 100%;
    max-width: 100%;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
    border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border: 1px solid rgba(155,89,182,0.1);
    opacity: 0; transform: translateY(20px); pointer-events: none;
    transition: all 0.3s; overflow: hidden; display: flex; flex-direction: column;
    box-sizing: border-box;
  }
  @container chat-orb (max-width: 300px) {
    body.brand-pdp-page .chat-body { height: 240px; }
  }
  body.brand-pdp-page .chat-window.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  body.brand-pdp-page .chat-header { background: var(--platform-gradient); color: white; padding: 14px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
  body.brand-pdp-page .chat-body { padding: 18px; height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
  body.brand-pdp-page .chat-message { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; }
  body.brand-pdp-page .chat-message.ai { background: var(--platform-gradient-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
  body.brand-pdp-page .chat-message.user { background: var(--platform); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
  body.brand-pdp-page .chat-input-area { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: white; }
  body.brand-pdp-page .chat-input-area input { flex-grow: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 20px; outline: none; font-family: var(--body-font); transition: border-color 0.2s; }
  body.brand-pdp-page .chat-input-area input:focus { border-color: var(--platform); }
  body.brand-pdp-page .chat-input-area button { background: var(--platform-gradient); color: white; border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
  body.brand-pdp-page .chat-input-area button:hover { transform: scale(1.1); }

  @media (prefers-reduced-motion: no-preference) {
    body.brand-pdp-page .chat-input-area button {
      background-size: 200% 200%;
      animation: gradientShift 3s ease infinite;
    }
  }

  body.brand-pdp-page .zoom-hint {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); color: #fff; padding: 6px 14px;
    border-radius: 20px; font-size: 0.75rem; font-weight: 500;
    pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 5;
    font-family: var(--body-font);
  }
  body.brand-pdp-page .pdp-main-img-wrapper:hover .zoom-hint { opacity: 1; }
  body.brand-pdp-page .pdp-main-img-wrapper.zoomed .zoom-hint { opacity: 0; }

  body.brand-pdp-page .related-section h2 {
    font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;
    font-family: var(--main-font);
  }
  body.brand-pdp-page .related-card { text-decoration: none; color: inherit; transition: transform 0.2s; }
  body.brand-pdp-page .related-card:hover { transform: translateY(-4px); }
  body.brand-storefront.brand-pdp-page .related-card-media {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
  }
  body.brand-storefront.brand-pdp-page .related-card-media :where(img, .product-img-placeholder) {
    width: 100%;
    height: 100%;
  }
  body.brand-storefront.brand-pdp-page .related-card-media img {
    display: block;
    object-fit: cover;
  }
  body.brand-storefront.brand-pdp-page .related-card-media .product-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.brand-pdp-page .related-card .rc-title {
    font-size: 0.85rem; font-weight: 500; margin-top: 0.5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.brand-pdp-page .related-card .rc-color {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666;
  }
  body.brand-pdp-page .related-card .rc-price { font-size: 0.85rem; font-weight: 600; }

  body.brand-pdp-page .rv-section {
    max-width: 1400px; margin: 0 auto; padding: 2rem var(--page-gutter, 5%) 3rem;
  }
  body.brand-pdp-page .rv-section h3 {
    font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem;
    font-family: var(--main-font);
  }
  body.brand-pdp-page .rv-strip-pdp {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem;
    scrollbar-width: thin;
  }
  body.brand-pdp-page .rv-strip-pdp::-webkit-scrollbar { height: 4px; }
  body.brand-pdp-page .rv-strip-pdp::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  body.brand-pdp-page .rv-pdp-card {
    flex-shrink: 0; width: 140px; text-decoration: none; color: inherit;
    transition: transform 0.2s;
  }
  body.brand-pdp-page .rv-pdp-card:hover { transform: translateY(-3px); }
  body.brand-pdp-page .rv-pdp-card img {
    width: 140px; height: 175px; object-fit: cover; border-radius: 6px; background: #f0f0f0;
  }
  body.brand-pdp-page .rv-pdp-card .rv-t {
    font-size: 0.75rem; font-weight: 500; margin-top: 0.4rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.brand-pdp-page .rv-pdp-card .rv-p { font-size: 0.75rem; font-weight: 600; color: #666; }

  @media (max-width: 1024px) {
    body.brand-pdp-page .pdp-title { font-size: 2rem; }
  }

  @media (max-width: 768px) {
    body.brand-pdp-page .pdp-info { gap: var(--space-5); padding-bottom: calc(30px + var(--safe-bottom, 0px)); }
    body.brand-pdp-page .pdp-brand { font-size: var(--text-caption); letter-spacing: 2px; }
    body.brand-pdp-page .pdp-title { font-size: var(--text-title); }
    body.brand-pdp-page .pdp-price { font-size: var(--text-title); }
    body.brand-pdp-page .pdp-thumb { width: 56px; height: 75px; }
    body.brand-pdp-page .pdp-gallery .pdp-main-img-wrapper {
      min-height: clamp(220px, 55vw, 420px);
    }
    body.brand-pdp-page .try-on-badge { top: 12px; right: 12px; padding: 6px 12px; font-size: 0.8rem; }
    body.brand-pdp-page .ai-banner { padding: 14px 16px; }
    body.brand-pdp-page .color-swatch { width: 32px; height: 32px; }
    body.brand-pdp-page .btn-add-to-cart { padding: 16px; font-size: 1rem; }
    body.brand-pdp-page .pdp-desc { font-size: 0.9rem; }
    body.brand-pdp-page .chat-orb-dock {
      bottom: calc(20px + var(--safe-bottom, 0px));
      right: calc(20px + var(--safe-right, 0px));
      --chat-orb-size: 50px;
    }
    body.brand-pdp-page .modal-header { padding: 14px 18px; }
    body.brand-pdp-page .modal-body { padding: 16px; gap: 20px; grid-template-columns: 1fr; }
    body.brand-pdp-page .modal-content { max-height: min(95vh, calc(var(--viewport-height, 100vh) - 2rem)); border-radius: 12px; }
  }
  @media (max-width: 390px) {
    body.brand-pdp-page .pdp-title { font-size: var(--text-title); }
    body.brand-pdp-page .pdp-price { font-size: var(--text-title); }
    body.brand-pdp-page .pdp-thumb { width: 48px; height: 64px; }
    body.brand-pdp-page .pdp-gallery .pdp-main-img-wrapper {
      min-height: clamp(200px, 62vw, 360px);
    }
    body.brand-pdp-page .size-selector { gap: var(--space-1); }
    body.brand-pdp-page .size-btn {
      padding: var(--space-2) 10px;
      font-size: var(--text-caption);
      min-height: 44px;
      min-width: 44px;
    }
    body.brand-pdp-page .related-section {
      padding: 2rem var(--page-gutter, 4%) 1rem;
    }
    body.brand-pdp-page .related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }
    body.brand-pdp-page .breadcrumbs {
      padding: var(--space-3) var(--page-gutter, 4%) 0;
    }
    body.brand-pdp-page .brand-pdp-sticky-bar {
      padding-left: calc(var(--page-gutter, 1rem) + var(--safe-left, 0px));
      padding-right: calc(var(--page-gutter, 1rem) + var(--safe-right, 0px));
      padding-bottom: calc(0.75rem + var(--safe-bottom, 0px));
    }
  }

}

@layer pdp {

  body.brand-pdp-page.brand-pdp-nav-parity:has(> .site-nav) {
    padding-top: calc(var(--nav-height, 64px) + var(--safe-top, 0px));
  }
  body.brand-pdp-page.brand-pdp-nav-parity .pdp-gallery {
    top: calc(var(--nav-height, 64px) + var(--safe-top, 0px) + var(--space-4, 1rem));
    height: calc(var(--viewport-height, 100vh) - var(--nav-height, 64px) - var(--safe-top, 0px) - 2.5rem);
    max-height: calc(var(--viewport-height, 100vh) - var(--nav-height, 64px) - var(--safe-top, 0px) - 2.5rem);
  }
  @media (max-width: 767px) {
    body.brand-pdp-page.brand-pdp-nav-parity .pdp-gallery {
      top: auto;
      height: auto;
      max-height: none;
    }
  }

}

@layer tokens {
:root { 
  --cta-radius: var(--btn-radius, 12px);
  --cta-padding-y: 0.75rem;
  --cta-padding-x: 1.25rem;
  --cta-font-weight: 600;
  --badge-star-bg: var(--platform-gradient, linear-gradient(135deg, #9b59b6, #7c3aed));
  --badge-trust-bg: rgba(34, 197, 94, 0.12);
  --badge-trust-color: #15803d;
 }

  [data-brand-cta-tokens="1"] .btn-add,
  [data-brand-cta-tokens="1"] .btn-add-to-cart {
    border-radius: var(--cta-radius);
    padding: var(--cta-padding-y) var(--cta-padding-x);
    font-weight: var(--cta-font-weight);
    min-height: 44px;
    border: none;
    cursor: pointer;
    background: var(--brand-primary, var(--platform, #6366f1));
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  [data-brand-cta-tokens="1"] .btn-add:hover,
  [data-brand-cta-tokens="1"] .btn-add-to-cart:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
  }
  [data-brand-cta-tokens="1"] .btn-platform {
    border-radius: var(--cta-radius);
    padding: var(--cta-padding-y) var(--cta-padding-x);
    font-weight: var(--cta-font-weight);
    min-height: 44px;
    background: var(--platform-gradient);
    color: #fff;
    border: none;
    cursor: pointer;
  }
  [data-brand-cta-tokens="1"] .badge-star,
  [data-brand-cta-tokens="1"] .pdp-price .badge {
    background: var(--badge-star-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
  }
  [data-brand-cta-tokens="1"] .badge-trust,
  [data-brand-cta-tokens="1"] .trust-badge {
    background: var(--badge-trust-bg);
    color: var(--badge-trust-color);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
  }

}

@layer utilities {

  body.dark-mode.brand-satellite-page {
    background: var(--bg, #0f0f0f);
    color: var(--text, #e8e8e8);
  }
  body.dark-mode .brand-satellite-hero {
    background: linear-gradient(135deg, rgba(30,30,40,0.9), #0f0f0f);
    border-bottom-color: #2a2a2a;
  }
  body.dark-mode .brand-satellite-card,
  body.dark-mode .brand-commerce-page .cart-summary,
  body.dark-mode .brand-commerce-page .cart-item,
  body.dark-mode .brand-order-conf-page .order-card,
  body.dark-mode .brand-order-conf-page .items-card,
  body.dark-mode .brand-order-conf-page .tracking-card,
  body.dark-mode .brand-order-conf-page .reco-strip,
  body.dark-mode .brand-order-conf-page .success-banner .order-id {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: var(--text, #e8e8e8);
  }
  body.dark-mode .brand-commerce-page .checkout-section,
  body.dark-mode .brand-commerce-page .order-summary,
  body.dark-mode .brand-commerce-page .express-btn,
  body.dark-mode .brand-commerce-page .form-input,
  body.dark-mode .brand-commerce-page .promo-code input,
  body.dark-mode .brand-commerce-page .promo-code button {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: var(--text, #e8e8e8);
  }
  body.dark-mode .brand-commerce-trust {
    background: rgba(15, 15, 15, 0.92);
    border-bottom-color: #2a2a2a;
  }
  body.dark-mode .brand-faq-a,
  body.dark-mode .fit-note,
  body.dark-mode .brand-satellite-note {
    color: var(--text-muted, #9ca3af);
  }

}

@layer features {

  .ig-homepage-gallery {
    padding: var(--space-6) var(--page-gutter);
    max-width: 1280px;
    margin: 0 auto;
  }
  .ig-homepage-gallery__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .ig-homepage-gallery__title {
    font-size: var(--text-title);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .ig-homepage-gallery__icon {
    width: 24px;
    height: 24px;
  }
  .ig-homepage-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--space-3);
  }
  @media (min-width: 768px) {
    .ig-homepage-gallery__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .ig-homepage-gallery__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .ig-homepage-gallery__item {
    position: relative;
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    aspect-ratio: 1;
    background: #f0f0f0;
  }
  .ig-homepage-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ig-homepage-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal, 250ms ease);
  }
  .ig-homepage-gallery__item:hover img {
    transform: scale(1.03);
  }
  .ig-homepage-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--space-3);
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-normal, 250ms ease);
  }
  .ig-homepage-gallery__item:hover .ig-homepage-gallery__overlay {
    opacity: 1;
  }
  .ig-homepage-gallery__caption {
    color: #fff;
    font-size: var(--text-caption);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ig-homepage-gallery__shoppable {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
  }
  .ig-homepage-gallery__shoppable:hover {
    background: #111;
    color: #fff;
  }
  .ig-homepage-gallery__video-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

@layer utilities {

  body.brand-storefront section.brand-experience-below-shop {
    
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
    contain: none;
  
  }
  body.brand-storefront #brandWorld,
  body.brand-storefront .lifestyle-gallery-section,
  body.brand-storefront .life-in-stack {
    
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
    contain: none;
  
  }
  body.brand-storefront #productGrid .product-card:nth-child(n+13) {
    
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
    contain: none;
  
  }
  body.brand-storefront #productGrid .product-card:nth-child(n+13) .product-img-wrapper {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
  body.brand-storefront .related-products,
  body.brand-storefront .pdp-reviews-section,
  body.brand-storefront .brand-pdp-lifestyle-frame {
    
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
    contain: none;
  
  }
  body.brand-storefront .related-products .related-card {
    contain: none;
  }
  body.brand-storefront.brand-story-page .story-container,
  body.brand-storefront.brand-story-page .heritage-grid,
  body.brand-storefront.brand-story-page .cta-section {
    
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
    contain: none;
  
  }
  @media (max-width: 768px) {
    body.brand-storefront section.brand-experience-below-shop {
      contain-intrinsic-size: auto 320px;
    }
    body.brand-storefront #productGrid .product-card:nth-child(n+9) {
      
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
    contain: none;
  
    }
    body.brand-storefront #productGrid .product-card:nth-child(n+9) .product-img-wrapper {
      content-visibility: visible;
      contain-intrinsic-size: none;
    }
  }
  @media (max-width: 390px) {
    body.brand-storefront #productGrid .product-card:nth-child(n+7) {
      
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
    contain: none;
  
    }
    body.brand-storefront #productGrid .product-card:nth-child(n+7) .product-img-wrapper {
      content-visibility: visible;
      contain-intrinsic-size: none;
    }
  }

}

@layer utilities {

  /* ── Aspect-ratio enforcement for product images ── */
  body.brand-storefront .product-img-wrapper {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
  }
  body.brand-storefront .product-img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Hero section reserved space ── */
  body.brand-storefront .hero-exp-wrapper,
  body.brand-storefront .hero-section {
    min-height: clamp(320px, 56vw, 680px);
    contain: layout style;
  }

  /* ── Product card skeleton reserve ── */
  body.brand-storefront .product-card {
    min-height: 340px;
    contain: layout paint style;
  }
  @media (max-width: 768px) {
    body.brand-storefront .product-card {
      min-height: 280px;
    }
  }

  /* ── Newsletter / footer reserved heights ── */
  body.brand-storefront .newsletter {
    min-height: 180px;
    contain: layout style;
  }
  body.brand-storefront .site-footer {
    min-height: 200px;
    contain: layout style;
  }

  /* ── Font display swap enforcement ── */
  body.brand-storefront {
    font-display: swap;
  }


  /* ── Product card hover lift (GPU layer) ── */
  body.brand-storefront .product-card {
    transition: transform var(--stable-motion-fast, 160ms) cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow var(--stable-motion-fast, 160ms) cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.brand-storefront .product-card:hover,
  body.brand-storefront .product-card:active {
    will-change: transform;
  }
  body.brand-storefront .product-card:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  body.brand-storefront .product-card:active {
    transform: translateY(-1px) scale(0.998);
    transition-duration: 80ms;
  }

  /* ── Add-to-cart button pulse ── */
  body.brand-storefront .btn-add,
  body.brand-storefront .brand-btn-primary {
    transition: transform var(--stable-motion-fast, 160ms) cubic-bezier(0.22, 1, 0.36, 1),
                opacity var(--stable-motion-fast, 160ms) ease;
  }
  body.brand-storefront .btn-add:hover,
  body.brand-storefront .brand-btn-primary:hover,
  body.brand-storefront .btn-add:active,
  body.brand-storefront .brand-btn-primary:active {
    will-change: transform;
  }
  body.brand-storefront .btn-add:hover,
  body.brand-storefront .brand-btn-primary:hover {
    transform: scale(1.03);
  }
  body.brand-storefront .btn-add:active,
  body.brand-storefront .brand-btn-primary:active {
    transform: scale(0.97);
    transition-duration: 60ms;
  }

  /* ── Navigation link underline slide ── */
  body.brand-storefront .nav-links a {
    position: relative;
  }
  body.brand-storefront .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--platform, #9b59b6);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--stable-motion-med, 260ms) cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.brand-storefront .nav-links a:hover::after {
    will-change: transform;
    transform: scaleX(1);
    transform-origin: left;
  }

  /* ── Image fade-in on decode (lazy only; visible at paint by default) ── */
  body.brand-storefront .product-img-wrapper img.product-img {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    body.brand-storefront .product-img-wrapper img.product-img[loading="lazy"]:not(.img-loaded) {
      opacity: 0;
      transition: opacity var(--stable-motion-med, 260ms) ease;
    }
    body.brand-storefront .product-img-wrapper img.product-img.img-loaded {
      opacity: 1;
      transition: opacity var(--stable-motion-med, 260ms) ease;
    }
    @starting-style {
      body.brand-storefront .product-img-wrapper img.product-img.img-loaded {
        opacity: 0;
      }
    }
  }

  /* ── Smooth section reveal (intersection observer driven) ── */
  body.brand-storefront [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.brand-storefront [data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Respect reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    body.brand-storefront .product-card,
    body.brand-storefront .btn-add,
    body.brand-storefront .brand-btn-primary,
    body.brand-storefront .nav-links a::after,
    body.brand-storefront [data-reveal],
    body.brand-storefront .product-img-wrapper img.product-img {
      transition: none !important;
      transform: none !important;
      will-change: auto !important;
      opacity: 1 !important;
    }
  }

}