:root {
      color-scheme: light;
      --brand-gold: #d1ad24;
      --brand-sea: #78b7c4;
      --brand-cream: #f1d678;
      --ink: #163638;
      --charcoal: #2d4b4d;
      --muted: #485d5f;
      --paper: #fffdf4;
      --soft: #e5f3f5;
      --cream: #f7f4ea;
      --bone: #edf6f7;
      --sand: #d7e8eb;
      --rose: var(--brand-gold);
      --saffron: var(--brand-gold);
      --forest: #21494b;
      --line: rgba(22, 54, 56, 0.14);
      --line-dark: rgba(247, 244, 234, 0.24);
      --focus-ring: 0 0 0 3px rgba(209, 173, 36, 0.38), 0 0 0 6px rgba(120, 183, 196, 0.24);
      --error: #a12a2a;
      --success: #2f6f4e;
      --sale: #dc2626;
      --discount-red: #dc2626;
      --discount-red-shadow: rgba(220, 38, 38, 0.32);
      --warning: #8a5b00;
      --support: #187a4e;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --radius-md: 0.875rem;
      --radius-lg: 1rem;
      --motion-fast: 180ms ease;
      --motion-base: 300ms ease;
      --shadow: 0 28px 80px rgba(22, 54, 56, 0.14);
      --shadow-sm: 0 8px 24px rgba(22, 54, 56, 0.1);
      --display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      --accent: var(--brand-gold);
      --accent-soft: rgba(209, 173, 36, 0.16);
      --accent-ink: #83680d;
      --border: rgba(22, 54, 56, 0.14);
      --surface: rgba(255, 255, 255, 0.72);
      --site-header-offset: 136px;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--site-header-offset);
      overflow-x: clip;
    }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: var(--body);
      line-height: 1.55;
      overflow-wrap: anywhere;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: clip;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; }
    @media (max-width: 767.98px) {
      input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
      select,
      textarea { font-size: max(16px, 1rem); }
    }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; box-shadow: var(--focus-ring); }
    .skip-link { position: fixed; left: max(1rem, env(safe-area-inset-left)); top: max(1rem, env(safe-area-inset-top)); z-index: 10000; max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--ink); color: white; padding: 0.75rem 1rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; transform: translateY(calc(-100% - 1.5rem)); opacity: 0; pointer-events: none; transition: transform 160ms ease, opacity 160ms ease; }
    .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

    /* Header */
    .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
    .announcement { height: 32px; background: var(--ink); color: var(--cream); display: flex; align-items: center; overflow: hidden; }
    .announcement-track { display: flex; gap: 2.5rem; padding: 0 1rem; animation: marquee 24s linear infinite; white-space: nowrap; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
    .announcement-track span { display: flex; align-items: center; gap: 2.5rem; }
    .announcement-track span::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--saffron); opacity: 0.5; }
    .announcement-track span:last-child::after { display: none; }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .nav-shell { max-width: 1480px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; transition: all 350ms ease; background: rgba(247, 244, 234, 0.82); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); border-radius: 0 0 2rem 2rem; }
    .nav-shell.scrolled { background: rgba(247, 244, 234, 0.96); border-bottom: 1px solid var(--line); }
    .brand-mark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
    .brand-logo { width: clamp(64px, 7vw, 86px); height: auto; flex-shrink: 0; object-fit: contain; }
    .brand-text { transform: translateY(0.02em); }
    .primary-nav { display: flex; align-items: center; gap: 1.75rem; }
    .primary-nav a { position: relative; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--charcoal); padding: 0.4rem 0; transition: color 200ms ease; }
    .primary-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; background: currentColor; width: 0; transition: width 300ms ease; }
    .primary-nav a:hover { color: var(--ink); }
    .primary-nav a:hover::after { width: 100%; }
    .nav-actions { display: flex; align-items: center; gap: 0.5rem; }
    .nav-actions a, .nav-actions button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--charcoal); transition: color 200ms ease; background: none; border: none; cursor: pointer; }
    .nav-actions a:hover, .nav-actions button:hover { color: var(--ink); }
    .nav-actions .nav-account-link {
      width: auto;
      min-width: 86px;
      gap: 0.45rem;
      padding: 0 0.85rem;
      border: 1px solid rgba(22, 54, 56, 0.14);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--ink);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .nav-actions .nav-account-link:hover {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--cream);
    }
    .nav-account-text {
      line-height: 1;
    }
    .search-box { display: none; }
    .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
    .mobile-menu { display: none; position: fixed; inset: 0; z-index: 1100; background: var(--cream); padding: 6rem 1.5rem 2rem; overflow-y: auto; max-height: 100dvh; }
    .mobile-menu.open { display: block; }
    .mobile-menu[aria-hidden="true"] { display: none; }
    .mobile-menu nav { display: flex; flex-direction: column; gap: 0.25rem; }
    .mobile-menu a { font-size: 1.5rem; font-family: var(--display); font-weight: 700; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
    .mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; cursor: pointer; }

    /* Layout */
    .page-spacer { height: 136px; }
    .home-page .page-spacer { display: none; }
    .home-page .announcement { display: none; }
    main { position: relative; z-index: 1; }
    .container { max-width: 1480px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
    @media (min-width: 768px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
    @media (min-width: 1024px) { .container { padding-left: 2.75rem; padding-right: 2.75rem; } }

    /* Typography */
    .eyebrow { margin: 0 0 0.75rem; color: var(--rose); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
    .section-title { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96; margin: 0; }
    .body-copy { color: var(--muted); font-size: clamp(0.9rem, 1.1vw, 1.05rem); line-height: 1.6; margin: 0; }
    h1, h2, h3 { margin: 0; line-height: 0.96; }
    h1, h2 { font-family: var(--display); font-weight: 700; }
    h1 { font-size: clamp(2.8rem, 7vw, 6rem); letter-spacing: -0.055em; }
    h2 { font-size: clamp(1.8rem, 3.5vw, 3.2rem); letter-spacing: -0.04em; }
    h3 { font-size: 1.1rem; }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.65rem 1.5rem; border: 1px solid var(--ink); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; transition: all 300ms ease; background: var(--ink); color: var(--cream); }
    .btn:hover { background: var(--charcoal); border-color: var(--charcoal); }
    .btn-light { background: rgba(247, 244, 234, 0.92); color: var(--ink); }
    .btn-light:hover { background: var(--ink); color: var(--cream); }
    .btn-secondary { background: transparent; color: var(--ink); }
    .btn-secondary:hover { background: var(--ink); color: var(--cream); }

    /* Push notification opt-in banner (logged-in chrome) */
    #push-prompt[hidden] { display: none; }
    .push-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.75rem auto; max-width: 960px; padding: 0.85rem 1rem; background: var(--paper, #fffdf4); border: 1px solid rgba(22, 54, 56, 0.12); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(22, 54, 56, 0.06); }
    .push-prompt p { margin: 0; flex: 1 1 220px; font-size: 0.9rem; color: var(--ink); }
    .push-prompt .btn { min-height: 38px; padding: 0.45rem 1rem; font-size: 0.65rem; }
    @media (max-width: 480px) { .push-prompt { margin: 0.5rem 0.75rem; } .push-prompt .btn { flex: 1 1 auto; } }

    /* Notification bell + badge (logged-in only) */
    .nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; }
    .nav-bell-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--sale, #dc2626); color: #fff; font-size: 0.65rem; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
    .nav-bell-badge[hidden] { display: none; }

    /* Inbox + preferences pages */
    .inbox-page { display: block; }
    .inbox-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
    .inbox-header-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
    .inbox-prefs-link { font-weight: 600; color: var(--ink); text-decoration: underline; }
    .inbox-toast { background: var(--paper); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; }
    .inbox-toast[hidden] { display: none; }
    .inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    .inbox-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.9rem 1rem 0.9rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 0.6rem; }
    .inbox-card.is-unread { border-left: 4px solid var(--brand-sea); padding-left: 0.9rem; }
    .inbox-card.is-unread .inbox-card-title { font-weight: 700; }
    .inbox-card-icon { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
    .inbox-card-body { min-width: 0; }
    .inbox-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
    .inbox-card-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
    .inbox-card-time { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
    .inbox-card-text { margin: 0.25rem 0 0.6rem; font-size: 0.85rem; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inbox-card:hover .inbox-card-text, .inbox-card:focus-within .inbox-card-text { white-space: normal; }
    .inbox-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .inbox-card-action, .inbox-card-link { background: none; border: 0; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--brand-sea); cursor: pointer; text-decoration: underline; }
    .inbox-card-action:disabled { opacity: 0.5; cursor: progress; }
    .inbox-empty { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: 0.6rem; background: var(--paper); }
    .inbox-load-more-wrap { display: flex; justify-content: center; margin-top: 1rem; }

    .prefs-page { display: block; max-width: 760px; }
    .prefs-header { margin-bottom: 1rem; }
    .prefs-back { margin-top: 0.5rem; font-size: 0.85rem; }
    .prefs-toast { background: var(--paper); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; }
    .prefs-toast.is-error { border-color: var(--error); color: var(--error); }
    .prefs-toast[hidden] { display: none; }
    .prefs-form { display: flex; flex-direction: column; gap: 1rem; }
    .prefs-group { border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.75rem 1rem; background: var(--paper); margin: 0; }
    .prefs-group legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.85rem; }
    .prefs-table { width: 100%; border-collapse: collapse; }
    .prefs-table th, .prefs-table td { padding: 0.5rem 0.5rem; text-align: left; font-size: 0.85rem; }
    .prefs-table thead th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
    .prefs-toggle-cell { text-align: center; vertical-align: middle; }
    .prefs-toggle { display: inline-flex; align-items: center; cursor: pointer; }
    .prefs-toggle input[type="checkbox"]:disabled { cursor: not-allowed; }
    .prefs-locked-hint { font-size: 0.7rem; color: var(--muted); margin-left: 0.4rem; }
    .prefs-actions { display: flex; justify-content: flex-end; }
    .prefs-devices { margin-top: 1.5rem; }
    .prefs-device-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    .prefs-device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--paper); }
    .prefs-device-label { margin: 0; font-weight: 600; font-size: 0.9rem; }
    .prefs-device-meta { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--muted); }
    @media (max-width: 480px) { .prefs-device-row { flex-direction: column; align-items: flex-start; } }

    /* Hero */
    .hero { position: relative; width: 100%; aspect-ratio: 16/9; min-height: calc(100dvh - 104px); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--ink); color: var(--cream); }
    .home-page .hero { min-height: 100dvh; }
    .hero-bg { position: absolute; inset: 0; }
    .hero-bg img { width: 100%; height: 110%; object-fit: cover; object-position: 50% 25%; opacity: 0.7; filter: saturate(0.82) contrast(1.02); }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22,54,56,0.45) 0%, rgba(22,54,56,0.22) 42%, rgba(22,54,56,0.68) 100%); }
    .hero-content { position: relative; z-index: 10; width: 100%; max-width: 1480px; padding: 5rem 1rem 4rem; text-align: center; }
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 244, 234, 0.9); margin-bottom: 1.5rem; }
    .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 2rem; height: 1px; background: rgba(247, 244, 234, 0.5); }
    .hero h1 { font-size: clamp(2.2rem, 6.5vw, 5.5rem); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; }
    .hero-summary { color: rgba(247, 244, 234, 0.9); font-size: clamp(0.9rem, 1.2vw, 1.1rem); max-width: 520px; margin: 0 auto 2rem; }
    .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

    /* Homepage rating chip */
    .home-rating-chip-wrap { display: flex; justify-content: center; }
    .home-rating-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: -1.25rem 0 1rem;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      background: var(--surface, #fff);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      font-weight: 600;
      position: relative;
      z-index: 2;
    }
    .home-rating-chip-stars { color: #b8860b; display: inline-flex; align-items: center; gap: .25rem; }
    .home-rating-chip-stars svg { width: 1em; height: 1em; }
    .rating { color: #b8860b; display: inline-flex; align-items: center; gap: 1px; }
    .rating svg { width: 1em; height: 1em; }
    .dist-star { color: #b8860b; display: inline-flex; align-items: center; gap: 2px; }
    .dist-star svg { width: 1em; height: 1em; }
    .hero-rating-stars { color: #b8860b; display: inline-flex; align-items: center; }
    .hero-rating-stars svg { width: 1em; height: 1em; }
    .bsp-icon { color: #1f6b34; display: inline-flex; align-items: center; }
    .bsp-icon svg { width: 1em; height: 1em; }
    .home-rating-chip-divider { opacity: 0.5; }

    /* Sections */
    .section { padding-top: 4rem; padding-bottom: 4rem; }
    @media (min-width: 768px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
    .section-heading { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2.5rem; position: relative; z-index: 2; }
    .section-heading.row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
    .section-heading a { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--forest); white-space: nowrap; }
    .section-heading a:hover { opacity: 0.7; }

    .promo-rail-badge { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--discount-red); color: #fff; font-size: 0.75rem; font-weight: 800; vertical-align: middle; }

    /* Campaign Grid */
    .campaign-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; margin-bottom: 4rem; }
    @media (min-width: 768px) { .campaign-grid { grid-template-columns: 1.15fr repeat(3, 1fr); } }
    .campaign-grid .section-heading { grid-column: 1 / -1; }
    .campaign-card { min-height: 220px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    .campaign-card:nth-child(2) { background: var(--ink); color: var(--cream); }
    .campaign-card:nth-child(3) { background: var(--bone); }
    .campaign-card:nth-child(4) { background: var(--sand); }
    .campaign-card h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
    .campaign-card p { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1rem; }
    .campaign-card:nth-child(2) p { color: rgba(247, 244, 234, 0.75); }
    .campaign-card a { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

    /* Category / Collection Grid */
    .collection-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 768px) { .collection-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr; } }
    .collection-card { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 1.5rem; }
    @media (min-width: 768px) { .collection-card.large { grid-row: span 2; min-height: 700px; } }
    .collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; filter: saturate(0.82); transition: all 800ms ease; }
    .collection-card:hover img { transform: scale(1.04); opacity: 0.55; }
    .collection-card h3 { font-family: var(--display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; position: relative; z-index: 2; }
    .collection-card p { position: relative; z-index: 2; color: rgba(247, 244, 234, 0.75); font-size: 0.85rem; line-height: 1.5; margin: 0.5rem 0 0; max-width: 280px; }

    /* Homepage category product shelf */
    .home-category-shelf { padding-top: 2rem; }
    .home-brand-tabs { margin: 0 0 1rem; }
    .home-brand-tabs-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); text-align: center; margin: 0 0 0.6rem; }
    .home-brand-tabs ul {
      list-style: none;
      margin: 0;
      padding: 0 0 0.35rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 0.5rem;
      overflow-x: auto;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
    }
    .home-brand-tab {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.55rem 1.1rem;
      min-height: 40px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.7);
      color: var(--ink);
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      scroll-snap-align: start;
      transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
      white-space: nowrap;
    }
    .home-brand-tab:hover { border-color: rgba(26,26,26,0.22); background: rgba(255,255,255,0.95); }
    .home-brand-tab:active { transform: scale(0.98); }
    .home-brand-tab.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
    .home-category-tabs {
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0 0 1.5rem;
      padding: 0 0 0.35rem;
      overflow-x: auto;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
    }
    @media (max-width: 720px) {
      .home-brand-tabs ul, .home-category-tabs { flex-wrap: nowrap; justify-content: flex-start; }
    }
    .home-category-tab {
      flex: 0 0 auto;
      min-width: 132px;
      min-height: 64px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.65rem 1rem;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.64);
      color: var(--ink);
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 800;
      cursor: pointer;
      scroll-snap-align: start;
      transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
      white-space: nowrap;
    }
    .home-category-tab:hover { border-color: rgba(26,26,26,0.22); background: rgba(255,255,255,0.9); }
    .home-category-tab:active { transform: scale(0.98); }
    .home-category-tab.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
    .home-category-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--forest); }
    .home-category-tab.is-active .home-category-tab-icon { color: var(--saffron); }
    .home-category-tab-icon svg { width: 100%; height: 100%; overflow: visible; }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      .home-category-tab-icon { overflow: visible; }
      .home-category-tab:hover .home-category-tab-icon svg,
      .home-category-tab:focus-visible .home-category-tab-icon svg {
        animation: home-tab-icon-pop 680ms cubic-bezier(.34,1.56,.64,1) both;
      }
      .home-category-tab:hover .cat-anim-body,
      .home-category-tab:focus-visible .cat-anim-body {
        transform-origin: 12px 18px;
        animation: cat-bottle-squeeze 900ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      .home-category-tab:hover .cat-spray-dot,
      .home-category-tab:focus-visible .cat-spray-dot {
        transform-origin: 17px 6px;
        animation: cat-spray-burst 900ms cubic-bezier(.22,1,.36,1) infinite;
      }
      .home-category-tab:hover .cat-spray-dot-1,
      .home-category-tab:focus-visible .cat-spray-dot-1 { animation-delay: 0ms; --spray-x: 7px; --spray-y: -4px; }
      .home-category-tab:hover .cat-spray-dot-2,
      .home-category-tab:focus-visible .cat-spray-dot-2 { animation-delay: 110ms; --spray-x: 8px; --spray-y: -1px; }
      .home-category-tab:hover .cat-spray-dot-3,
      .home-category-tab:focus-visible .cat-spray-dot-3 { animation-delay: 220ms; --spray-x: 6px; --spray-y: 3px; }
      .home-category-tab:hover .cat-spray-dot-4,
      .home-category-tab:focus-visible .cat-spray-dot-4 { animation-delay: 330ms; --spray-x: 5px; --spray-y: 5px; }
      .home-category-tab:hover .cat-anim-drop,
      .home-category-tab:focus-visible .cat-anim-drop {
        transform-origin: 12px 18px;
        animation: cat-drop-bounce 1200ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      .home-category-tab:hover .cat-anim-dropper,
      .home-category-tab:focus-visible .cat-anim-dropper {
        transform-origin: 12px 4px;
        animation: cat-dropper-shake 700ms cubic-bezier(.36,.07,.19,.97) infinite;
      }
      .home-category-tab:hover .cat-anim-bottle,
      .home-category-tab:focus-visible .cat-anim-bottle {
        transform-origin: 12px 14px;
        animation: cat-bottle-wobble 1400ms ease-in-out infinite;
      }
      .home-category-tab:hover .cat-drip,
      .home-category-tab:focus-visible .cat-drip {
        transform-origin: 12px 17.5px;
        animation: cat-drip-cascade 1100ms cubic-bezier(.55,.085,.68,.53) infinite;
      }
      .home-category-tab:hover .cat-bubble,
      .home-category-tab:focus-visible .cat-bubble {
        transform-origin: center;
        transform-box: fill-box;
        animation: cat-bubble-rise 2200ms cubic-bezier(.45,.05,.55,.95) infinite;
      }
      .home-category-tab:hover .cat-bubble-1,
      .home-category-tab:focus-visible .cat-bubble-1 { animation-delay: 0ms; --rise: -7px; --drift: -1.5px; }
      .home-category-tab:hover .cat-bubble-2,
      .home-category-tab:focus-visible .cat-bubble-2 { animation-delay: 320ms; --rise: -9px; --drift: 2px; }
      .home-category-tab:hover .cat-bubble-3,
      .home-category-tab:focus-visible .cat-bubble-3 { animation-delay: 640ms; --rise: -8px; --drift: -2px; }
      .home-category-tab:hover .cat-bubble-4,
      .home-category-tab:focus-visible .cat-bubble-4 { animation-delay: 960ms; --rise: -6px; --drift: 1.5px; }
      .home-category-tab:hover .cat-bubble-5,
      .home-category-tab:focus-visible .cat-bubble-5 { animation-delay: 1280ms; --rise: -5px; --drift: -0.8px; }
      .home-category-tab:hover .cat-anim-lid,
      .home-category-tab:focus-visible .cat-anim-lid {
        transform-origin: 12px 9px;
        animation: cat-lid-pop 1100ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      .home-category-tab:hover .cat-anim-jar,
      .home-category-tab:focus-visible .cat-anim-jar {
        transform-origin: 12px 21px;
        animation: cat-jar-bounce 1100ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      .home-category-tab:hover .cat-anim-pump,
      .home-category-tab:focus-visible .cat-anim-pump {
        transform-origin: 12px 5px;
        animation: cat-pump-slam 800ms cubic-bezier(.55,.05,.45,.95) infinite;
      }
      .home-category-tab:hover .cat-anim-lotion,
      .home-category-tab:focus-visible .cat-anim-lotion {
        transform-origin: 12px 22px;
        animation: cat-lotion-squish 800ms cubic-bezier(.55,.05,.45,.95) infinite;
      }
    }
    @keyframes home-tab-icon-pop {
      0% { transform: scale(1) rotate(0deg); }
      45% { transform: scale(1.22) rotate(-8deg); }
      70% { transform: scale(0.96) rotate(5deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    @keyframes cat-bottle-squeeze {
      0%, 100% { transform: scaleX(1) scaleY(1); }
      45% { transform: scaleX(1.1) scaleY(0.92); }
      70% { transform: scaleX(0.95) scaleY(1.06); }
    }
    @keyframes cat-spray-burst {
      0% { transform: translate(0, 0) scale(0.2); opacity: 0; }
      25% { transform: translate(0, 0) scale(1.6); opacity: 1; }
      100% { transform: translate(var(--spray-x, 7px), var(--spray-y, -3px)) scale(0); opacity: 0; }
    }
    @keyframes cat-drop-bounce {
      0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
      20% { transform: scale(1.22, 0.82) translateY(2.5px) rotate(0deg); }
      45% { transform: scale(0.88, 1.2) translateY(-4px) rotate(-8deg); }
      65% { transform: scale(1.06, 0.95) translateY(-1.8px) rotate(5deg); }
      85% { transform: scale(0.98, 1.03) translateY(-0.6px) rotate(-2deg); }
    }
    @keyframes cat-dropper-shake {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      20% { transform: translate(-1.2px, -1.5px) rotate(-5deg); }
      40% { transform: translate(1.2px, 0.6px) rotate(4deg); }
      60% { transform: translate(-0.9px, 0.9px) rotate(-3deg); }
      80% { transform: translate(0.9px, -0.3px) rotate(3deg); }
    }
    @keyframes cat-bottle-wobble {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-4deg); }
      75% { transform: rotate(4deg); }
    }
    @keyframes cat-drip-cascade {
      0% { transform: scale(0.3) translateY(-2px); opacity: 0; }
      15% { transform: scale(1.5) translateY(0); opacity: 1; }
      40% { transform: scale(1.8) translateY(2.5px); opacity: 0.9; }
      70% { transform: scale(0.4) translateY(5px); opacity: 0; }
      100% { transform: scale(0) translateY(6px); opacity: 0; }
    }
    @keyframes cat-bubble-rise {
      0% { transform: translate(0, 4px) scale(0.4); opacity: 0; }
      20% { transform: translate(0, 0) scale(1.25); opacity: 1; }
      50% { transform: translate(var(--drift, 0), calc(var(--rise, -6px) * 0.5)) scale(1.3); opacity: 0.85; }
      80% { transform: translate(var(--drift, 0), var(--rise, -6px)) scale(1.5); opacity: 0.3; }
      100% { transform: translate(var(--drift, 0), var(--rise, -6px)) scale(0); opacity: 0; }
    }
    @keyframes cat-lid-pop {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-5px) rotate(-6deg); }
      45% { transform: translateY(-6px) rotate(5deg); }
      65% { transform: translateY(-2px) rotate(-2deg); }
      85% { transform: translateY(0.6px) rotate(1deg); }
    }
    @keyframes cat-jar-bounce {
      0%, 100% { transform: scale(1, 1); }
      25% { transform: scale(1.08, 0.9); }
      50% { transform: scale(0.94, 1.07); }
      75% { transform: scale(1.03, 0.97); }
    }
    @keyframes cat-pump-slam {
      0% { transform: translateY(-2.5px); }
      25% { transform: translateY(0); }
      45% { transform: translateY(4px); }
      65% { transform: translateY(1px); }
      85% { transform: translateY(-1.5px); }
      100% { transform: translateY(-2.5px); }
    }
    @keyframes cat-lotion-squish {
      0%, 100% { transform: scale(1, 1); }
      45% { transform: scale(1.12, 0.88); }
      65% { transform: scale(0.96, 1.06); }
    }
    .home-category-panel[hidden] { display: none; }
    .home-category-products { animation: category-panel-in 180ms ease; }
    .home-category-more { margin: 1.25rem 0 0; text-align: center; }
    .home-category-more a {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0.55rem 1.2rem;
      border: 1px solid var(--ink);
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .home-category-more a:hover { background: var(--ink); color: var(--cream); }
    @keyframes category-panel-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 767.98px) {
      .home-category-shelf { padding-top: 1rem; }
      .home-category-tabs { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
      .home-category-tab { min-width: auto; min-height: 54px; padding: 0.55rem 0.85rem; font-size: 0.78rem; }
      .home-category-tab-icon { width: 21px; height: 21px; }
    }

    /* Product Grid */
    .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
    @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
    .store-grid { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 768px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }

    /* Product Card */
    .product-card { position: relative; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; border-radius: 6px; }
    .product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.18); }
    .product-card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: transparent; border-radius: 6px; }
    .product-card-primary { display: block; width: 100%; height: 100%; }
    .product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms ease; }
    .product-card-image-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(241, 214, 120, 0.35), rgba(120, 183, 196, 0.35)); }
    .product-card:hover .product-card-image img { transform: scale(1.04); }
    .best-seller-rank { position: absolute; top: 2.15rem; left: 0.5rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: #1c1c1c; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; z-index: 3; }
    .product-card-body { padding: 0.875rem 0.25rem 0.25rem; }
    .product-card-name { font-size: 0.9rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.2rem; }
    .product-card-brand { font-size: 0.72rem; color: var(--muted); margin: 0 0 0.45rem; }
    .product-card-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
    .product-card-price { font-size: 1rem; font-weight: 800; color: var(--ink); white-space: nowrap; margin: 0; }
    .product-card-oldprice { font-size: 0.78rem; color: var(--muted); text-decoration: line-through; }
    .product-card-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
    .product-card-chip { border: 1px solid var(--line); background: rgba(255,255,255,0.65); padding: 0.18rem 0.45rem; font-size: 0.6rem; font-weight: 700; color: var(--charcoal); border-radius: 999px; line-height: 1.4; }
    .product-card-chip-trust { border-color: #2e7d32; color: #2e7d32; background: rgba(46,125,50,0.06); }
    .product-card-chip-bpom { border-color: #2e7d32; color: #1b5e20; background: rgba(46,125,50,0.08); font-weight: 800; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .product-card-chip-sold { border-color: rgba(22,54,56,0.2); background: rgba(22,54,56,0.06); color: var(--ink); }
    .product-card-wishlist { position: absolute; top: 2rem; right: 0.5rem; z-index: 4; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.9); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
    .product-card-wishlist[aria-pressed="true"] { color: #c2185b; }
    .product-card-wishlist[aria-pressed="true"] svg { fill: currentColor; }
    .review-source { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
    .review-source-shopee { color: #d35400; border-color: rgba(211,84,0,0.35); background: rgba(211,84,0,0.06); }
    .review-source-tiktok-shop { color: #111; border-color: #111; background: rgba(0,0,0,0.04); }
    .review-verified { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: .375rem; background: #ecfdf5; color: #166534; font-size: .75rem; font-weight: 600; }
    .review-verified-icon { display: inline-flex; align-items: center; }
    .review-verified-icon svg { width: 1em; height: 1em; }
    .reviews-distribution-wrap > summary { cursor: pointer; color: var(--accent, currentColor); font-weight: 600; padding: .25rem 0; list-style: none; }
    .reviews-distribution-wrap > summary::-webkit-details-marker { display: none; }
    .reviews-distribution-wrap > summary::after { content: ' ▾'; transition: transform .15s; display: inline-block; }
    .reviews-distribution-wrap[open] > summary::after { transform: rotate(180deg); }

    /* Brand Statement */
    .brand-statement { background: var(--ink); color: var(--cream); padding: 5rem 0; overflow: hidden; }
    @media (min-width: 768px) { .brand-statement { padding: 8rem 0; } }
    .brand-statement-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
    @media (min-width: 1024px) { .brand-statement-grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 8rem); } }
    .brand-statement h2 { font-size: clamp(2.2rem, 6vw, 5rem); letter-spacing: -0.055em; line-height: 0.92; }
    .brand-statement p { color: rgba(247, 244, 234, 0.78); font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.6; margin: 0 0 1.5rem; }
    .brand-statement-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--line-dark); padding-top: 1.25rem; margin-top: 1.5rem; }
    .brand-statement-features strong { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.2; display: block; }

    /* Support Strip */
    .support-strip { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 768px) { .support-strip { grid-template-columns: repeat(2, 1fr); } }
    .support-card { border: 1px solid var(--line); padding: 1.5rem; background: rgba(255, 255, 255, 0.6); }
    .support-card h2 { font-family: var(--display); font-size: 1.6rem; margin: 0.75rem 0; }
    .support-card p { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.25rem; }

    /* Instagram / Community */
    .community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    @media (min-width: 768px) { .community-grid { grid-template-columns: repeat(6, 1fr); } }
    .community-grid a { aspect-ratio: 1; overflow: hidden; background: var(--sand); display: block; }
    .community-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform 700ms ease; }
    .community-grid a:hover img { transform: scale(1.08); }

    /* Newsletter / CTA Band */
    .cta-band { border: 1px solid var(--line); padding: 1.5rem; background: var(--bone); }
    @media (min-width: 768px) { .cta-band { padding: 2.5rem; } }
    @media (min-width: 1024px) { .cta-band { padding: 3rem 4rem; } }
    .cta-band h2 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3.5rem); letter-spacing: -0.05em; line-height: 0.95; }
    .cta-band-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
    .muted-copy { color: var(--muted); }
    .action-row { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
    .mt-action { margin-top: 1.5rem; }

    /* Catalog filters */
    .catalog-filters { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,0.62); margin-bottom: 1.5rem; }
    @media (min-width: 768px) { .catalog-filters { grid-template-columns: 1.4fr repeat(3, 1fr) auto; align-items: end; } }
    .catalog-filters label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
    .catalog-filters input, .catalog-filters select { min-height: 44px; border: 1px solid var(--line); padding: 0.65rem 1rem; background: white; color: var(--ink); font-size: 0.85rem; }
    .catalog-filters button { min-height: 44px; padding: 0.65rem 1rem; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
    .chip-row { list-style: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; padding: 0; }
    .search-chip { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.72); color: var(--ink); padding: 0.35rem 0.7rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; }
    .search-chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
    .active-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .active-filter-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,0.7); font-size: 0.72rem; font-weight: 700; }
    .active-filter-chip span { padding: 0.35rem 0.55rem; }
    .active-filter-chip a { border-left: 1px solid var(--line); padding: 0.35rem 0.5rem; text-decoration: none; }

    /* Store layout: sticky left rail with categories + filters */
    .store-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
    @media (min-width: 1024px) { .store-layout { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 2.5rem; } }
    .store-layout > *, .store-sidebar, .store-category-nav, .store-category-nav ul { min-width: 0; }
    .store-sidebar { position: static; }
    @media (min-width: 1024px) { .store-sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 0.25rem; } }
    .store-sidebar-inner { position: relative; display: grid; gap: 1.5rem; }
    .store-rail-eyebrow { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 0.65rem; }
    .store-category-nav { border: 1px solid var(--line); background: rgba(255,255,255,0.62); padding: 1rem; }
    .store-category-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
    .store-category-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; color: var(--ink); font-size: 0.82rem; font-weight: 600; border-left: 2px solid transparent; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
    .store-category-nav a:hover { background: rgba(255,255,255,0.85); border-left-color: var(--rose); }
    .store-category-nav a.is-active { background: var(--ink); color: var(--cream); border-left-color: var(--saffron); }
    .store-category-nav a.is-active .store-category-nav-icon { color: var(--saffron); }
    .store-category-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--forest); }
    .store-category-nav-icon svg { width: 100%; height: 100%; }
    .store-category-nav-label { flex: 1; }
    .store-filters { grid-template-columns: 1fr; margin-bottom: 0; }
    @media (min-width: 768px) { .store-filters { grid-template-columns: 1fr; align-items: stretch; } }
    .store-filters .store-rail-eyebrow { margin: 0; }
    .store-filter-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .store-filter-actions button { flex: 1 1 auto; }
    .store-filter-reset { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--forest); }
    .store-filter-reset:hover { opacity: 0.7; }
    .store-main { min-width: 0; }
    .store-products-skip { left: 1rem; }
    .store-quickpicks { margin: 0 0 1.25rem; }
    .store-filter-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 42px; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bone); margin-bottom: 1rem; color: var(--ink); font-weight: 700; }
    .store-filter-drawer-header { display: none; }
    .store-filter-close { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(22,54,56,0.08); color: var(--ink); font-size: 1.45rem; line-height: 1; padding: 0; cursor: pointer; }
    .store-filter-backdrop { display: none; }
    .store-category-summary { margin: 0.5rem 0 0; color: var(--muted); max-width: 56rem; }
    .store-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
    .store-result-count { margin: 0; color: var(--muted); font-weight: 700; }
    .store-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2rem; }
    .store-pagination-link { justify-self: start; border: 1px solid var(--line); padding: 0.55rem 0.8rem; background: rgba(255,255,255,0.72); font-weight: 700; font-size: 0.82rem; }
    .store-pagination-link[rel='next'] { justify-self: end; }
    .store-pagination-status { color: var(--muted); font-weight: 700; font-size: 0.85rem; }
    .store-empty-state ul { margin: 1rem 0; padding-left: 1.2rem; }
    .category-index-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 700px) { .category-index-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .category-index-grid { grid-template-columns: repeat(3, 1fr); } }
    .category-tile { display: grid; gap: 0.55rem; min-height: 13rem; padding: 1.25rem; border: 1px solid var(--line); background: rgba(255,255,255,0.65); text-decoration: none; color: var(--ink); }
    .category-tile-icon { width: 38px; height: 38px; color: var(--forest); }
    .category-tile-icon svg { width: 100%; height: 100%; }
    .category-tile-name { font-weight: 800; font-size: 1.05rem; }
    .category-tile-summary { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
    .category-tile-count { color: var(--rose); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
    @media (max-width: 1023px) {
      body.store-filter-open { overflow: hidden; }
      body.store-filter-open main { z-index: 1300; }
      .store-filter-backdrop { position: fixed; inset: 0; z-index: 1190; display: block; background: rgba(12, 24, 25, 0.48); opacity: 0; transition: opacity 180ms ease; }
      .store-filter-backdrop[hidden] { display: none; }
      .store-filter-backdrop.is-open { opacity: 1; }
      .store-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 420px); max-width: 420px; background: var(--cream); z-index: 1200; padding: 0; transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; box-shadow: 18px 0 42px rgba(12,24,25,0.18); }
      .store-sidebar.is-open { transform: translateX(0); }
      .store-sidebar-inner { min-height: 100%; gap: 0; background: var(--cream); }
      .store-filter-drawer-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem; border-bottom: 1px solid var(--line); background: rgba(247,244,234,0.96); backdrop-filter: blur(16px); }
      .store-filter-drawer-header p { margin: 0; color: var(--ink); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
      .store-filter-close { display: inline-flex; }
      .store-category-nav, .store-filters { border-left: 0; border-right: 0; border-radius: 0; background: transparent; }
      .store-category-nav { border-top: 0; padding: 1rem; }
      .store-filters { border-bottom: 0; padding: 1rem; }
      .store-category-nav ul { grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; gap: 0.5rem; padding-bottom: 0.25rem; scrollbar-width: thin; }
      .store-category-nav a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
      .store-category-nav a:hover { border-left-color: transparent; border-bottom-color: var(--rose); }
      .store-category-nav a.is-active { border-left-color: transparent; border-bottom-color: var(--saffron); }
      .store-filter-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -1rem -1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(247,244,234,0.97); backdrop-filter: blur(16px); }
      .store-filter-actions button { min-height: 48px; border-radius: 999px; }
      .store-filter-reset { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35rem; }
    }
    @media (max-width: 767.98px) {
      .section.store-layout { padding: 1.15rem 1rem 4rem; }
      .store-layout { gap: 0.8rem; }
      .store-main .breadcrumb { padding-top: 0; }
      .store-main .breadcrumb ol { font-size: 0.82rem; }
      .store-quickpicks { margin: 0 0 0.9rem; }
      .store-quickpicks .store-rail-eyebrow { margin-bottom: 0.45rem; }
      .store-quickpicks .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: none; }
      .store-quickpicks .chip-row::-webkit-scrollbar { display: none; }
      .store-quickpicks .search-chip { min-height: 36px; padding: 0.42rem 0.85rem; font-size: 0.82rem; }
      .store-sidebar { right: 0; width: 100%; max-width: none; }
      .store-filter-toggle { width: 100%; justify-content: center; min-height: 44px; margin: 0 0 0.75rem; background: var(--ink); border-color: var(--ink); color: var(--cream); }
      .store-main > .section-heading { margin-bottom: 0.6rem; }
      .store-main > .section-heading .eyebrow { margin-bottom: 0.42rem; }
      .store-main > .section-heading .section-title { line-height: 1.04; }
      .store-result-count { font-size: 0.88rem; }
      .store-results-toolbar { align-items: flex-start; gap: 0.55rem; margin-bottom: 0.65rem; }
    }
    @media (min-width: 1024px) {
      .store-filter-toggle { display: none; }
    }

    /* Standard cards */
    .story-panel { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--forest); color: white; }
    @media (min-width: 768px) { .story-panel { grid-template-columns: 0.9fr 1fr 1fr; } }
    .story-panel p { color: rgba(255, 255, 255, 0.78); margin: 0; }
    .showcase-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 768px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); } }
    .brand-card { padding: 1.5rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); display: block; }
    .brand-card span { color: var(--rose); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .brand-card h3 { margin-top: 0.75rem; font-family: var(--display); font-size: 1.6rem; }
    .brand-card p { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }

    /* Compact Hero */
    .compact-hero { padding-top: 4rem; padding-bottom: 2.5rem; }
    .compact-hero h1 { max-width: 800px; }
    .store-hero, .editorial-hero, .contact-hero { border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }

    /* Customer auth */
    body.is-customer-auth {
      min-height: 100dvh;
      padding-bottom: 0;
      background: var(--paper);
    }
    body.is-customer-auth .site-header,
    body.is-customer-auth .page-spacer,
    body.is-customer-auth .site-footer,
    body.is-customer-auth .bottom-nav,
    body.is-customer-auth .toast-stack,
    body.is-customer-auth .install-sheet,
    body.is-customer-auth .install-sheet-ios,
    body.is-customer-auth .whatsapp-float {
      display: none !important;
    }
    .customer-auth-shell {
      position: relative;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(380px, 560px);
      align-items: center;
      gap: clamp(2rem, 7vw, 7.5rem);
      padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 6vw, 7rem);
      overflow: hidden;
      color: var(--ink);
      background:
        linear-gradient(118deg, rgba(209, 173, 36, 0.16) 0 22%, transparent 22% 66%, rgba(120, 183, 196, 0.18) 66% 100%),
        linear-gradient(135deg, #f8efd0 0%, #d9eef2 48%, #fffdf7 100%);
    }
    .customer-auth-shell::before,
    .customer-auth-shell::after {
      content: '';
      position: absolute;
      pointer-events: none;
    }
    .customer-auth-shell::before {
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(101deg, transparent 0 12%, rgba(120, 183, 196, 0.22) 12% 28%, transparent 28% 100%),
        linear-gradient(101deg, transparent 0 58%, rgba(209, 173, 36, 0.16) 58% 72%, transparent 72% 100%);
    }
    .customer-auth-shell::after {
      width: min(58vw, 42rem);
      height: 120%;
      left: -15vw;
      top: -10%;
      z-index: 0;
      background: linear-gradient(145deg, rgba(209, 173, 36, 0.34), rgba(120, 183, 196, 0));
      transform: skewX(-10deg);
    }
    .customer-auth-brand,
    .customer-auth-panel {
      position: relative;
      z-index: 1;
    }
    .customer-auth-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 32rem;
    }
    .auth-back-link {
      position: fixed;
      top: max(1rem, env(safe-area-inset-top));
      left: max(1rem, env(safe-area-inset-left));
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 2.75rem;
      padding: 0 0.95rem 0 0.75rem;
      border: 1px solid rgba(22, 54, 56, 0.14);
      border-radius: 999px;
      background: rgba(255, 253, 244, 0.72);
      color: var(--ink);
      box-shadow: 0 12px 28px rgba(22, 54, 56, 0.1);
      backdrop-filter: blur(14px);
      font-size: 0.86rem;
      font-weight: 800;
      transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    }
    .auth-back-link:hover {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--cream);
      transform: translateX(-2px);
    }
    .auth-back-link svg {
      width: 1.1rem;
      height: 1.1rem;
      flex-shrink: 0;
    }
    .auth-brand-content {
      display: grid;
      justify-items: start;
      gap: clamp(1rem, 2.4vw, 1.8rem);
      max-width: 34rem;
      text-align: left;
    }
    .auth-home-link {
      display: block;
      width: min(100%, 25rem);
      color: var(--ink);
    }
    .auth-brand-logo {
      width: 100%;
      max-width: 25rem;
      height: auto;
      filter: drop-shadow(0 18px 28px rgba(22, 54, 56, 0.12));
    }
    .auth-brand-copy {
      margin: 0;
      max-width: 31rem;
      color: var(--ink);
      font-size: clamp(2rem, 4vw, 3.15rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.04em;
    }
    .auth-brand-note {
      max-width: 29rem;
      margin: -0.3rem 0 0;
      color: var(--charcoal);
      font-size: clamp(0.98rem, 1.2vw, 1.08rem);
      line-height: 1.65;
    }
    .auth-brand-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: clamp(1.2rem, 3.2vw, 2.5rem);
      margin: clamp(1rem, 3vw, 3rem) 0 0;
      padding: 0;
      list-style: none;
    }
    .auth-brand-logos li {
      padding: 0.5rem 0.75rem;
      border: 1px solid rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.54);
      color: var(--ink);
      font-size: clamp(0.82rem, 1.05vw, 1rem);
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .auth-brand-logos li:first-child {
      font-family: Georgia, 'Times New Roman', serif;
      font-style: italic;
      font-weight: 500;
      text-transform: lowercase;
      letter-spacing: 0;
    }
    .customer-auth-panel {
      display: flex;
      justify-content: center;
    }
    .customer-auth-card {
      width: min(100%, 35rem);
      overflow: hidden;
      border: 1px solid rgba(22, 54, 56, 0.12);
      border-radius: 8px;
      background: rgba(255, 253, 244, 0.94);
      color: var(--ink);
      box-shadow: 0 24px 60px rgba(22, 54, 56, 0.16);
    }
    .auth-card-body {
      padding: clamp(1.35rem, 2.8vw, 2.25rem);
    }
    .customer-auth-card h1 {
      margin: 0 0 clamp(1.8rem, 3.8vw, 3.8rem);
      color: var(--ink);
      font-size: clamp(1.35rem, 2.1vw, 1.7rem);
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      letter-spacing: 0;
    }
    .auth-google-button {
      min-height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      margin-bottom: 1.05rem;
      border: 1px solid rgba(22, 54, 56, 0.16);
      border-radius: 4px;
      background: #fff;
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 800;
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }
    .auth-google-button:hover {
      border-color: var(--brand-sea);
      box-shadow: 0 8px 20px rgba(22, 54, 56, 0.08);
      transform: translateY(-1px);
    }
    .auth-google-icon,
    .auth-google-icon svg {
      width: 1.25rem;
      height: 1.25rem;
      display: block;
    }
    .customer-auth-form {
      display: grid;
      gap: 0.7rem;
    }
    .customer-auth-form label {
      display: grid;
      gap: 0.4rem;
      color: var(--charcoal);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .auth-input-wrap {
      position: relative;
      display: block;
    }
    .customer-auth-form input {
      width: 100%;
      min-height: 2.95rem;
      border: 1px solid rgba(22, 54, 56, 0.16);
      border-radius: 4px;
      background: #fff;
      color: var(--ink);
      padding: 0.7rem 1rem;
      font-size: 1rem;
      font-weight: 600;
      outline: none;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .customer-auth-form input:focus {
      border-color: var(--brand-gold);
      box-shadow: 0 0 0 3px rgba(209, 173, 36, 0.18);
    }
    .auth-input-wrap input[type='password'] {
      padding-right: 3.1rem;
    }
    .auth-password-icon {
      position: absolute;
      right: 1rem;
      top: 50%;
      width: 1.25rem;
      height: 1.25rem;
      color: var(--brand-sea);
      transform: translateY(-50%);
      pointer-events: none;
    }
    .auth-password-icon svg {
      width: 100%;
      height: 100%;
    }
    .auth-forgot-link {
      justify-self: end;
      color: #83680d;
      font-size: 0.92rem;
      font-weight: 600;
    }
    .auth-forgot-link:hover,
    .auth-card-footer a:hover,
    .auth-activation a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .auth-submit {
      min-height: 3rem;
      margin-top: 0.25rem;
      border: 0;
      border-radius: 4px;
      background: var(--brand-gold);
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 800;
      cursor: pointer;
      transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    }
    .customer-auth-form:invalid .auth-submit {
      background: #d7e8eb;
      color: var(--muted);
      box-shadow: none;
    }
    .auth-submit:hover {
      background: #bf9812;
      box-shadow: 0 10px 18px rgba(209, 173, 36, 0.24);
      transform: translateY(-1px);
    }
    .customer-auth-form:invalid .auth-submit:hover {
      background: #d7e8eb;
      box-shadow: none;
      transform: none;
    }
    .auth-alert {
      margin: 0;
      padding: 0.8rem 0.9rem;
      border: 1px solid rgba(161, 42, 42, 0.18);
      border-radius: 6px;
      background: #fff7e6;
      color: var(--error);
      font-weight: 700;
    }
    .auth-activation {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 1rem;
      margin-top: 1.45rem;
      padding: 1rem 1.15rem;
      border: 1px solid rgba(120, 183, 196, 0.26);
      border-radius: 6px;
      background: rgba(229, 243, 245, 0.78);
    }
    .auth-activation strong,
    .auth-activation em,
    .auth-activation a {
      display: block;
    }
    .auth-activation strong {
      color: var(--ink);
      font-size: 0.98rem;
      line-height: 1.25;
    }
    .auth-activation em {
      margin-top: 0.28rem;
      color: var(--charcoal);
      font-size: 0.86rem;
      font-weight: 600;
    }
    .auth-activation a {
      width: fit-content;
      margin-top: 0.75rem;
      padding: 0.65rem 1rem;
      border-radius: 4px;
      background: var(--ink);
      color: var(--cream);
      font-size: 0.92rem;
      font-weight: 800;
    }
    .auth-shop-icon {
      width: 4.5rem;
      color: var(--brand-gold);
    }
    .auth-shop-icon svg {
      width: 100%;
      height: auto;
    }
    .auth-card-footer {
      margin: 0;
      padding: 1.45rem 1rem;
      border-top: 1px solid rgba(22, 54, 56, 0.1);
      background: rgba(241, 214, 120, 0.28);
      color: var(--ink);
      font-size: 1rem;
      text-align: center;
    }
    .auth-card-footer a {
      color: #83680d;
      font-weight: 800;
    }

    @media (max-width: 1020px) {
      .customer-auth-shell {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1rem;
      }
      .customer-auth-brand {
        min-height: auto;
        padding-top: 1rem;
      }
      .auth-brand-copy {
        font-size: clamp(1.65rem, 7vw, 2.55rem);
        text-align: center;
      }
      .auth-brand-content {
        justify-items: center;
        text-align: center;
      }
      .auth-brand-note {
        max-width: 34rem;
      }
      .auth-brand-logos {
        margin-top: 0.25rem;
        gap: 0.9rem 1.3rem;
      }
    }

    @media (max-width: 560px) {
      .customer-auth-shell {
        padding: 1rem;
        align-content: start;
      }
      .auth-back-link {
        min-height: 2.5rem;
        padding: 0 0.75rem 0 0.65rem;
        font-size: 0.8rem;
      }
      .customer-auth-card {
        border-radius: 8px;
      }
      .auth-card-body {
        padding: 1.15rem;
      }
      .customer-auth-card h1 {
        margin-bottom: 1.35rem;
      }
      .auth-brand-logos {
        display: none;
      }
      .auth-activation {
        grid-template-columns: 1fr;
      }
      .auth-shop-icon {
        justify-self: end;
        width: 3.8rem;
      }
    }

    /* Breadcrumb */
    .breadcrumb { padding: 1rem 0 0; }
    .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-size: .875rem; color: var(--muted); }
    .breadcrumb a { color: var(--muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
    .breadcrumb [aria-current="page"] span { color: var(--ink); font-weight: 600; }
    .breadcrumb-sep { color: var(--border); }

    /* Product Detail */
    .product-detail { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); padding: 3rem 0 4rem; }
    @media (min-width: 768px) { .product-detail { grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr); } }
    .gallery-note { margin-top: 0.75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; }
    .pdp-gallery { display: flex; flex-direction: column; gap: .75rem; position: sticky; top: 120px; align-self: start; }
    .pdp-gallery-main-wrap { position: relative; }
    .pdp-gallery-main { list-style: none; padding: 0; margin: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
    .pdp-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; }
    .pdp-gallery-slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: transparent; border-radius: 1rem; }
    .pdp-gallery-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255,255,255,0.65); border-radius: 50%; background: rgba(0,0,0,0.26); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.2); cursor: pointer; font-size: 2.35rem; line-height: 1; transition: background 180ms ease, transform 180ms ease; }
    .pdp-gallery-arrow:hover { background: rgba(0,0,0,0.42); }
    .pdp-gallery-arrow:focus-visible { outline: 3px solid rgba(255,255,255,0.82); outline-offset: 3px; }
    .pdp-gallery-arrow-prev { left: .85rem; }
    .pdp-gallery-arrow-next { right: .85rem; }
    .pdp-gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; }
    .pdp-gallery-thumb { padding: 0; border: 2px solid transparent; background: none; border-radius: .5rem; cursor: pointer; }
    .pdp-gallery-thumb[aria-current="true"] { border-color: var(--accent); }
    .pdp-gallery-thumb img { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: .375rem; }
    @media (min-width: 768px) {
      .pdp-gallery-main { overflow: hidden; }
      .pdp-gallery-slide { display: none; }
      .pdp-gallery-slide.is-active { display: block; }
      html:not(.js) .pdp-gallery-slide:first-child { display: block; }
    }
    .product-info h1 { font-size: clamp(1.65rem, 2.8vw, 2.4rem); line-height: 1.15; letter-spacing: 0; word-spacing: .12em; margin: .35rem 0 .5rem; }
    .price-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
    .price-row strong { font-size: 1.5rem; }
    .price-row del { color: var(--muted); }
    .price-row span { display: inline-flex; align-items: center; width: max-content; padding: .125rem .5rem; border-radius: 999px; background: var(--discount-red); color: #fff; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
    .product-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.5rem 0; }
    .product-meta div { padding: 0.875rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    .product-meta dt { color: var(--rose); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .product-meta dd { margin: 0.25rem 0 0; font-weight: 700; font-size: 0.9rem; }
    .product-options { display: grid; grid-template-columns: 0.55fr 1fr auto; gap: 1rem; margin: 1.25rem 0; align-items: end; }
    .product-options label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
    .product-options input, .product-options select, .search-page-form input { min-height: 44px; border: 1px solid var(--line); padding: 0.65rem 1rem; background: white; color: var(--ink); font-size: 0.85rem; }
    .product-options button, .checkout-form button { min-height: 48px; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 300ms ease; }
    .product-options button:hover, .checkout-form button:hover { background: var(--charcoal); }
    .product-options button:disabled { opacity: 0.55; cursor: not-allowed; }
    .form-help { color: var(--muted); font-size: 0.78rem; margin: 0; }
    .purchase-proof { padding: 1rem; border: 1px solid rgba(47,111,78,0.28); background: rgba(47,111,78,0.08); color: var(--charcoal); font-size: 0.82rem; line-height: 1.5; }
    .purchase-proof p { margin: 0 0 0.5rem; }
    .purchase-proof p:last-child { margin-bottom: 0; }
    .shipping-note { padding: 1rem; border: 1px dashed var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.5); font-size: 0.8rem; line-height: 1.5; }
    .detail-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
    .detail-block h2 { font-family: var(--body); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
    .detail-block ul { padding-left: 1.2rem; color: var(--muted); font-size: 0.9rem; }
    .split-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
    @media (min-width: 768px) { .split-list { grid-template-columns: repeat(2, 1fr); } }
    .pdp-tabs { margin-top: 2rem; }
    .pdp-tabs-triggers { display: none; gap: .5rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
    .pdp-tabs-triggers button { background: none; border: 0; padding: .75rem 1rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
    .pdp-tabs-triggers button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
    @media (min-width: 768px) {
      .pdp-tabs-triggers { display: flex; }
      .pdp-tab-panel { border: 0; }
      .pdp-tab-panel summary { display: none; }
      .pdp-tab-panel[hidden] { display: none; }
    }
    .pdp-tab-panel summary { padding: 1rem 0; font-weight: 600; cursor: pointer; border-top: 1px solid var(--border); }
    .pdp-tab-body { padding: 0 0 1rem; }

    /* Buy Box */
    .buy-box { border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; display: grid; gap: 1rem; background: var(--surface); }
    .buy-box-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .buy-box-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .5rem; }
    .buy-box-price strong { font-size: 1.75rem; line-height: 1; }
    .buy-box-discount { background: var(--discount-red); color: #fff; padding: .125rem .5rem; border-radius: .5rem; font-weight: 700; font-size: .8rem; }
    .buy-box-savings { color: var(--discount-red); font-weight: 700; margin: 0; }

    /* Cream-to-Sand Skeleton Shimmer Loader */
    .skeleton-loader {
      background: linear-gradient(90deg, var(--cream) 25%, var(--sand) 50%, var(--cream) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer-sweep 1.4s infinite linear;
      border-radius: 8px;
      height: 1.25rem;
      display: inline-block;
    }
    @keyframes skeleton-shimmer-sweep {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .buy-box-low-stock { color: #b45309; font-weight: 600; margin: 0; }
    .buy-box-shipping-progress { color: var(--muted); margin: .75rem 0 0; }
    .buy-box-shipping-progress.is-met { color: #166534; }
    .buy-box-variants { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
    .buy-box-chip { position: relative; display: inline-flex; max-width: 100%; }
    .buy-box-chip input { position: absolute; opacity: 0; }
    .buy-box-chip > span { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: .5rem .95rem; border: 1px solid var(--border); border-radius: 999px; line-height: 1; white-space: nowrap; cursor: pointer; }
    .buy-box-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
    .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; }
    .qty-stepper button { width: 2.5rem; height: 2.5rem; border: 0; background: none; font-size: 1.25rem; cursor: pointer; }
    .qty-stepper input { width: 3rem; text-align: center; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); height: 2.5rem; }
    .buy-box-form { display: grid; gap: 1rem; }
    .buy-box-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .btn-buy-now { background: var(--ink); color: white; }
    @media (max-width: 640px) { .buy-box-actions { grid-template-columns: 1fr; } }

    /* Trust Row */
    .pdp-trust-row { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
    .pdp-trust-row li { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); }
    .pdp-trust-row .trust-icon { display: inline-flex; color: #166534; flex-shrink: 0; }
    .pdp-trust-row small { color: var(--muted); }
    @media (min-width: 640px) { .pdp-trust-row { grid-template-columns: repeat(3, 1fr); } }
    .payment-badges { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
    .payment-badge { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); }
    .payment-badge .trust-icon { display: inline-flex; color: #166534; flex-shrink: 0; }
    @media (min-width: 640px) { .payment-badges { grid-template-columns: repeat(3, 1fr); } }

    /* Cek Ongkir */
    .pdp-ongkir { margin: 1.25rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); display: grid; gap: 1rem; }
    .pdp-ongkir-head { display: flex; align-items: center; gap: .75rem; }
    .pdp-ongkir-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
    .pdp-ongkir-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
    .pdp-ongkir-sub { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; }
    .pdp-ongkir-form { display: grid; grid-template-columns: 1fr; gap: .75rem; }
    .pdp-ongkir-field { display: grid; gap: .35rem; min-width: 0; }
    .pdp-ongkir-field > span { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
    .pdp-ongkir-field select, .pdp-ongkir-field input { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: .5rem; padding: .55rem .8rem; background: white; color: var(--ink); font-size: .9rem; font-family: inherit; transition: border-color 160ms ease, box-shadow 160ms ease; }
    .pdp-ongkir-field select:focus, .pdp-ongkir-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .pdp-ongkir-submit { min-height: 44px; padding: .65rem 1.25rem; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
    .pdp-ongkir-submit:hover:not(:disabled) { background: #000; }
    .pdp-ongkir-submit:disabled { opacity: .7; cursor: progress; }
    .pdp-ongkir-submit.is-loading .pdp-ongkir-submit-label::after { content: '…'; display: inline-block; margin-left: .15rem; animation: ongkirDots 1.2s steps(4, end) infinite; }
    @keyframes ongkirDots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '…'; } }
    @media (min-width: 560px) {
      .pdp-ongkir-form { grid-template-columns: 1fr 1fr; align-items: end; }
      .pdp-ongkir-field-province { grid-column: 1 / 2; }
      .pdp-ongkir-field-city { grid-column: 2 / 3; }
      .pdp-ongkir-field-qty { grid-column: 1 / 2; max-width: 6.5rem; }
      .pdp-ongkir-submit { grid-column: 2 / 3; justify-self: stretch; align-self: end; }
    }
    .pdp-ongkir-results:empty { display: none; }
    .ongkir-loading { margin: 0; color: var(--muted); font-size: .85rem; }
    .ongkir-error { margin: 0; padding: .65rem .85rem; border-radius: .5rem; background: rgba(185, 28, 28, .08); color: #b91c1c; font-size: .85rem; border: 1px solid rgba(185, 28, 28, .2); }
    .ongkir-rate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
    .ongkir-rate-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: .5rem; background: rgba(255, 255, 255, .55); transition: border-color 160ms ease, background 160ms ease; }
    .ongkir-rate-list li:hover { border-color: var(--accent); background: rgba(255, 255, 255, .85); }
    .ongkir-rate-courier { font-weight: 600; color: var(--ink); font-size: .9rem; }
    .ongkir-rate-courier em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: .25rem; }
    .ongkir-rate-cost { font-size: .95rem; color: var(--ink); white-space: nowrap; }

    /* Cart / Checkout */
    .cart-panel { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; padding: 1.25rem; margin-bottom: 4rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    @media (min-width: 768px) { .cart-panel { grid-template-columns: 1fr auto auto auto; } }
    .cart-panel p { color: var(--muted); font-size: 0.9rem; }
    .cart-product-title { font-size: 1.4rem; margin-bottom: 0.5rem; }
    .cart-total { display: grid; gap: 0.25rem; text-align: left; }
    .cart-total span { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .cart-total strong { font-size: 1.3rem; }
    .free-shipping-progress { color: var(--success) !important; font-weight: 700; }
    .checkout-form { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; margin-bottom: 4rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    @media (min-width: 768px) { .checkout-form { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1120px) { .checkout-form { grid-template-columns: repeat(3, 1fr); } }
    .checkout-form label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
    .checkout-form input, .checkout-form select, .checkout-form textarea { min-height: 44px; border: 1px solid var(--line); padding: 0.65rem 1rem; background: white; color: var(--ink); font-size: 0.85rem; }
    .checkout-form textarea { min-height: 96px; resize: vertical; }
    .checkout-form .form-wide { grid-column: 1 / -1; }
    .order-summary { padding: 1rem; border: 1px solid var(--line); background: var(--paper); }
    .order-summary h2 { font-size: 1.2rem; margin-bottom: 1rem; }
    .order-summary dl { display: grid; gap: 0.75rem; margin: 0; }
    @media (min-width: 768px) { .order-summary dl { grid-template-columns: repeat(3, 1fr); } }
    .order-summary dt { color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .order-summary dd { margin: 0.2rem 0 0; font-weight: 700; }
    .form-notice { color: var(--muted); font-size: 0.85rem; margin: 0; }
    .confirmation-summary { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,0.62); }
    .confirmation-summary p { color: var(--muted); margin: 0.35rem 0; }
    .qris-inline { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 1.5rem; margin: 1.25rem 0; padding: 1.25rem; border: 1px solid var(--line); background: #fff; border-radius: 12px; align-items: center; }
    @media (max-width: 640px) { .qris-inline { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
    .qris-inline-art { width: 100%; max-width: 320px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
    .qris-inline-art svg { width: 100%; height: 100%; }
    .qris-inline-meta { display: flex; flex-direction: column; gap: 0.5rem; }
    .qris-inline-hint { margin: 0; color: var(--muted); }
    .qris-inline-status { margin: 0; font-weight: 700; }
    .qris-inline-status[data-qris-status="paid"] { color: #156c34; }
    .qris-inline-status[data-qris-status="expired"], .qris-inline-status[data-qris-status="failed"] { color: #a32222; }
    .search-hero { padding-top: 1rem; padding-bottom: 1rem; }
    .search-page-form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; margin: 0.75rem 0 0; }
    @media (min-width: 768px) { .search-page-form { flex-direction: row; align-items: stretch; gap: 0.75rem; } }
    .search-page-form label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; flex: 1; }
    .search-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
    .search-input-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none; flex: 0 0 auto; }
    .search-input-icon svg { width: 18px; height: 18px; display: block; }
    .search-input-clear { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.3rem; line-height: 1; text-decoration: none; border-radius: 50%; }
    .search-input-clear:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
    .search-page-form input { min-height: 44px; border: 1px solid var(--line); padding: 0.65rem 2.6rem 0.65rem 2.4rem; background: white; color: var(--ink); font-size: 0.95rem; width: 100%; border-radius: 0.6rem; }
    .search-page-form input:focus { outline: 2px solid var(--saffron); outline-offset: 1px; }
    .search-page-form .search-submit,
    .search-page-form button { min-height: 44px; padding: 0.65rem 1.25rem; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border-radius: 0.6rem; }

    /* About / Contact */
    .about-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 4rem; }
    @media (min-width: 768px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
    .about-grid article { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    .about-grid p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
    .about-hero {
      position: relative;
      min-height: 620px;
      display: flex;
      align-items: center;
      padding-top: 4rem;
      padding-bottom: 4rem;
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: left;
      color: var(--cream);
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(22, 54, 56, 0.88) 0%, rgba(22, 54, 56, 0.7) 46%, rgba(22, 54, 56, 0.24) 100%),
        url('https://admin.asfindo.com/api/admin/media/admin/product-media/about-us-hero-background.png') center / cover no-repeat;
    }
    @media (min-width: 768px) { .about-hero { padding-left: 1.5rem; padding-right: 1.5rem; } }
    @media (min-width: 1024px) { .about-hero { padding-left: 2.75rem; padding-right: 2.75rem; } }
    .about-hero-copy { max-width: 760px; position: relative; z-index: 1; }
    .about-hero h1 {
      max-width: 760px;
      margin-left: 0;
      margin-right: 0;
      font-size: 3.7rem;
      line-height: 0.98;
      letter-spacing: 0;
      color: var(--cream);
    }
    .about-hero .eyebrow { color: rgba(247, 244, 234, 0.82); }
    .about-hero .body-copy { max-width: 660px; margin-left: 0; margin-right: 0; color: rgba(247, 244, 234, 0.88); }
    .about-hero .hero-actions { justify-content: flex-start; }
    .about-hero .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
    .about-hero .btn:hover,
    .about-hero .btn:focus-visible { background: var(--brand-gold); color: var(--ink); border-color: var(--brand-gold); }
    .about-hero .btn-light { background: transparent; color: var(--cream); border-color: rgba(247, 244, 234, 0.58); }
    .about-hero .btn-light:hover,
    .about-hero .btn-light:focus-visible { background: rgba(247, 244, 234, 0.12); color: var(--cream); border-color: var(--cream); }
    .about-product-stage {
      position: relative;
      min-height: 430px;
      isolation: isolate;
    }
    .about-product-stage::before {
      content: '';
      position: absolute;
      inset: 12% 2% 8% 9%;
      background: linear-gradient(135deg, rgba(209, 173, 36, 0.24), rgba(120, 183, 196, 0.26));
      border: 1px solid rgba(22, 54, 56, 0.1);
      border-radius: 2rem;
      transform: rotate(-3deg);
      z-index: -1;
    }
    .about-product-tile {
      position: absolute;
      display: block;
      overflow: hidden;
      border: 1px solid rgba(22, 54, 56, 0.12);
      border-radius: 1.15rem;
      background: #fff;
      box-shadow: 0 28px 70px rgba(22, 54, 56, 0.16);
      transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
      will-change: transform;
    }
    .about-product-tile:hover,
    .about-product-tile:focus-visible {
      transform: translateY(-8px) rotate(0deg) !important;
      box-shadow: 0 36px 80px rgba(22, 54, 56, 0.22);
    }
    .about-product-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: var(--bone);
      border-radius: 0;
    }
    .about-product-tile span {
      position: absolute;
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0.75rem;
      padding: 0.45rem 0.65rem;
      border-radius: 999px;
      background: rgba(247, 244, 234, 0.9);
      color: var(--ink);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
    }
    .about-product-tile-1 { left: 5%; top: 10%; width: 42%; height: 72%; transform: rotate(-6deg); z-index: 3; }
    .about-product-tile-2 { right: 8%; top: 0; width: 38%; height: 54%; transform: rotate(5deg); z-index: 2; }
    .about-product-tile-3 { right: 0; bottom: 0; width: 46%; height: 52%; transform: rotate(-2deg); z-index: 4; }
    .about-proof-badge {
      position: absolute;
      left: 46%;
      bottom: 12%;
      z-index: 5;
      display: grid;
      gap: 0.1rem;
      min-width: 9rem;
      padding: 1rem;
      border: 1px solid rgba(247, 244, 234, 0.4);
      border-radius: 1rem;
      background: rgba(22, 54, 56, 0.92);
      color: var(--cream);
      box-shadow: 0 22px 48px rgba(22, 54, 56, 0.28);
    }
    .about-proof-badge span,
    .about-proof-badge small {
      color: rgba(247, 244, 234, 0.72);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .about-proof-badge strong { font-size: 1.75rem; line-height: 1; }
    .about-anchor-nav {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      overflow-x: auto;
      padding-top: 0.25rem;
      padding-bottom: 1.25rem;
      scrollbar-width: none;
    }
    .about-anchor-nav::-webkit-scrollbar { display: none; }
    .about-anchor-nav a {
      flex: 0 0 auto;
      padding: 0.55rem 0.85rem;
      border: 1px solid rgba(22, 54, 56, 0.13);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--charcoal);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
    }
    .about-anchor-nav a:hover,
    .about-anchor-nav a:focus-visible {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--cream);
    }
    /* ----- Reseller landing ----- */
    .reseller-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: center;
    }
    .reseller-hero-photo {
      width: 100%;
      height: auto;
      border-radius: 18px;
      box-shadow: 0 22px 48px rgba(22, 54, 56, 0.18);
    }
    .reseller-trust-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.5rem;
      margin-top: 1.5rem;
      border: 1px solid rgba(22, 54, 56, 0.12);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.62);
    }
    .reseller-trust-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      flex: 1;
      margin: 0;
    }
    .reseller-trust-stat dt {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.05;
    }
    .reseller-trust-stat dd {
      margin: 0.25rem 0 0;
      font-size: 0.78rem;
      color: var(--charcoal);
      letter-spacing: 0.02em;
    }
    .reseller-trust-badges {
      display: flex;
      gap: 0.5rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .reseller-trust-badges li {
      padding: 0.4rem 0.75rem;
      border-radius: 999px;
      border: 1px solid rgba(22, 54, 56, 0.18);
      font-weight: 800;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .reseller-anchor-nav {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      overflow-x: auto;
      padding-top: 0.25rem;
      padding-bottom: 1.25rem;
      scrollbar-width: none;
    }
    .reseller-anchor-nav::-webkit-scrollbar { display: none; }
    .reseller-anchor-nav a {
      flex: 0 0 auto;
      padding: 0.55rem 0.85rem;
      border: 1px solid rgba(22, 54, 56, 0.13);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--charcoal);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
    }
    .reseller-anchor-nav a:hover,
    .reseller-anchor-nav a:focus-visible {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--cream);
    }
    .reseller-benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .reseller-benefit-card {
      padding: 1.5rem;
      border-radius: 16px;
      border: 1px solid rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.62);
    }
    .reseller-benefit-icon {
      color: var(--ink);
      width: 44px;
      height: 44px;
      margin-bottom: 0.75rem;
    }
    .reseller-benefit-icon svg { width: 100%; height: 100%; }
    .reseller-benefit-card h3 {
      font-size: 1.05rem;
      margin: 0 0 0.5rem;
      color: var(--ink);
    }
    .reseller-benefit-card p {
      margin: 0;
      color: var(--charcoal);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .reseller-tier-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
    }
    .reseller-tier-card {
      padding: 1.75rem;
      border-radius: 18px;
      border: 1px solid rgba(22, 54, 56, 0.14);
      background: var(--cream);
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .reseller-tier-icon {
      color: var(--ink);
      width: 48px;
      height: 48px;
    }
    .reseller-tier-icon svg { width: 100%; height: 100%; }
    .reseller-tier-card h3 {
      margin: 0;
      font-size: 1.4rem;
      color: var(--ink);
    }
    .reseller-tier-tagline {
      margin: 0;
      color: var(--charcoal);
      font-weight: 600;
    }
    .reseller-tier-perks {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.5rem;
    }
    .reseller-tier-perks li {
      padding-left: 1.25rem;
      position: relative;
      color: var(--charcoal);
      font-size: 0.92rem;
      line-height: 1.5;
    }
    .reseller-tier-perks li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--rose);
    }
    .reseller-steps {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .reseller-step {
      padding: 1.5rem;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.62);
      border: 1px solid rgba(22, 54, 56, 0.1);
    }
    .reseller-step-number {
      display: inline-flex;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--cream);
      align-items: center;
      justify-content: center;
      font-weight: 800;
      margin-bottom: 0.75rem;
    }
    .reseller-step h3 {
      margin: 0 0 0.5rem;
      color: var(--ink);
      font-size: 1.05rem;
    }
    .reseller-step p {
      margin: 0;
      color: var(--charcoal);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .reseller-requirements-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
    .reseller-requirements-col {
      padding: 1.5rem;
      border-radius: 16px;
      border: 1px solid rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.62);
    }
    .reseller-requirements-col h3 {
      margin: 0 0 0.75rem;
      color: var(--ink);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .reseller-requirements-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.5rem;
    }
    .reseller-requirements-col li {
      padding-left: 1.5rem;
      position: relative;
      color: var(--charcoal);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .reseller-requirements-col li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--forest);
      font-weight: 800;
    }
    .reseller-product-rail {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(220px, 1fr);
      gap: 1rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
    }
    .reseller-product-card { scroll-snap-align: start; }
    .reseller-product-card a {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      text-decoration: none;
      color: var(--ink);
    }
    .reseller-product-card img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      object-fit: cover;
      aspect-ratio: 1 / 1;
    }
    .reseller-product-name { font-size: 0.92rem; font-weight: 700; }
    .reseller-product-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .reseller-faq-list { display: grid; gap: 0.75rem; }
    .reseller-faq-item {
      padding: 1rem 1.25rem;
      border-radius: 14px;
      border: 1px solid rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.62);
    }
    .reseller-faq-item summary {
      cursor: pointer;
      font-weight: 700;
      color: var(--ink);
      list-style: none;
    }
    .reseller-faq-item summary::-webkit-details-marker { display: none; }
    .reseller-faq-item summary::after {
      content: '+';
      float: right;
      font-weight: 800;
      transition: transform 200ms ease;
    }
    .reseller-faq-item[open] summary::after { content: '\2212'; }
    .reseller-faq-item p {
      margin: 0.75rem 0 0;
      color: var(--charcoal);
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .reseller-final-cta {
      text-align: center;
      padding: 3rem 1.5rem;
      border-radius: 22px;
      background: var(--ink);
      color: var(--cream);
      margin-top: 3rem;
    }
    .reseller-final-cta h2 {
      color: var(--cream);
      font-size: 2rem;
      margin: 0;
    }
    .reseller-final-cta .body-copy { color: rgba(247, 244, 234, 0.84); }
    .reseller-final-cta .hero-actions { justify-content: center; }
    .reseller-final-cta .btn { font-weight: 800; }
    .reseller-final-cta .btn-light { opacity: 0.95; }
    /* Hero microbar */
    .reseller-hero-microbar {
      list-style: none;
      padding: 0;
      margin: 1.25rem 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .reseller-hero-microbar li {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(22, 54, 56, 0.14);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .reseller-hero-microbar-icon {
      width: 14px;
      height: 14px;
      display: inline-flex;
      color: var(--rose);
    }
    .reseller-hero-microbar-icon svg { width: 100%; height: 100%; }
    /* Benefit claim pill */
    .reseller-benefit-claim {
      display: inline-block;
      margin-top: 0.85rem;
      padding: 0.3rem 0.65rem;
      border-radius: 999px;
      background: rgba(33, 73, 75, 0.08);
      border: 1px solid rgba(22, 54, 56, 0.12);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      color: var(--forest);
    }
    /* Stories */
    .reseller-stories-grid {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .reseller-story-card {
      padding: 1.5rem;
      border-radius: 18px;
      border: 1px solid rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.68);
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .reseller-story-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--cream);
      letter-spacing: 0.02em;
    }
    .reseller-story-accent-ink { background: var(--ink); }
    .reseller-story-accent-forest { background: var(--forest); }
    .reseller-story-accent-rose { background: var(--rose); color: var(--ink); }
    .reseller-story-meta { display: flex; flex-direction: column; gap: 0.3rem; }
    .reseller-story-name {
      margin: 0;
      font-weight: 800;
      color: var(--ink);
      font-size: 0.98rem;
    }
    .reseller-story-channel {
      margin: 0;
      font-size: 0.85rem;
      color: var(--charcoal);
    }
    .reseller-story-channel-label {
      font-weight: 700;
      color: var(--ink);
    }
    .reseller-story-badge {
      align-self: flex-start;
      margin-top: 0.1rem;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      background: var(--cream);
      border: 1px solid rgba(22, 54, 56, 0.18);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .reseller-story-quote {
      margin: 0;
      padding: 0 0 0 0.85rem;
      border-left: 3px solid var(--rose);
      color: var(--charcoal);
      font-size: 0.92rem;
      line-height: 1.55;
      font-style: italic;
    }
    .reseller-stories-footnote {
      margin: 1rem 0 0;
      font-size: 0.78rem;
      color: var(--charcoal);
      font-style: italic;
    }
    /* Tier comparison table */
    .reseller-tier-table-wrap {
      overflow-x: auto;
      border-radius: 18px;
      border: 1px solid rgba(22, 54, 56, 0.14);
      background: var(--cream);
    }
    .reseller-tier-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
    }
    .reseller-tier-table-caption {
      caption-side: top;
      text-align: left;
      padding: 1rem 1.25rem 0;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--charcoal);
    }
    .reseller-tier-table th,
    .reseller-tier-table td {
      padding: 0.95rem 1.1rem;
      text-align: left;
      border-bottom: 1px solid rgba(22, 54, 56, 0.08);
      vertical-align: top;
      color: var(--charcoal);
    }
    .reseller-tier-table thead th {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.6);
      position: relative;
    }
    .reseller-tier-table .reseller-tier-feature-name {
      color: var(--ink);
      font-weight: 700;
      width: 22%;
    }
    .reseller-tier-table .reseller-tier-col-agen {
      background: rgba(209, 173, 36, 0.08);
    }
    .reseller-tier-table thead th.reseller-tier-col-agen {
      background: rgba(209, 173, 36, 0.16);
    }
    .reseller-tier-popular-ribbon {
      display: block;
      margin-bottom: 0.3rem;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--rose);
    }
    .reseller-tier-col-agen-label {
      display: inline-block;
    }
    /* Margin example */
    .reseller-margin-card {
      margin-top: 1.5rem;
      padding: 1.5rem;
      border-radius: 18px;
      border: 1px solid rgba(22, 54, 56, 0.14);
      background: rgba(255, 255, 255, 0.68);
    }
    .reseller-margin-card h3 {
      margin: 0 0 0.85rem;
      color: var(--ink);
      font-size: 1.05rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .reseller-margin-tag {
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--charcoal);
      padding: 0.2rem 0.5rem;
      border-radius: 999px;
      background: rgba(22, 54, 56, 0.06);
    }
    .reseller-margin-chain {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.75rem;
      align-items: stretch;
    }
    .reseller-margin-cell {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 0.95rem 1rem;
      border-radius: 12px;
      background: var(--cream);
      border: 1px solid rgba(22, 54, 56, 0.1);
    }
    .reseller-margin-cell-accent {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--cream);
    }
    .reseller-margin-cell-accent .reseller-margin-cell-label,
    .reseller-margin-cell-accent .reseller-margin-cell-sub {
      color: rgba(247, 244, 234, 0.8);
    }
    .reseller-margin-cell-label {
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--charcoal);
    }
    .reseller-margin-cell-value {
      font-size: 1.15rem;
      font-weight: 800;
      color: inherit;
    }
    .reseller-margin-cell-sub {
      font-size: 0.78rem;
      color: var(--charcoal);
    }
    .reseller-margin-arrow {
      align-self: center;
      font-weight: 800;
      color: var(--rose);
      font-size: 1.25rem;
    }
    .reseller-margin-note {
      margin: 0.9rem 0 0;
      font-size: 0.8rem;
      color: var(--charcoal);
      font-style: italic;
    }
    /* Step time hint */
    .reseller-step-time {
      display: inline-block;
      margin-top: 0.6rem;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--rose);
    }
    /* Sticky mobile CTA */
    .reseller-sticky-cta {
      display: none;
      transition: transform 220ms ease;
    }
    .reseller-sticky-cta[data-hidden] {
      transform: translateY(120%);
    }
    @media (max-width: 767px) {
      .reseller-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
        gap: 0.6rem;
        background: rgba(247, 244, 234, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid rgba(22, 54, 56, 0.14);
        box-shadow: 0 -10px 30px rgba(22, 54, 56, 0.08);
      }
      .reseller-sticky-cta .reseller-sticky-cta-primary {
        flex: 1;
        text-align: center;
      }
      .reseller-sticky-cta .reseller-sticky-cta-wa {
        flex: 0 0 auto;
        width: 48px;
        padding: 0.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      main#content:has(.reseller-sticky-cta) { padding-bottom: 5.5rem; }
    }
    @media (max-width: 900px) {
      .reseller-hero { grid-template-columns: 1fr; }
      .reseller-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reseller-tier-grid { grid-template-columns: 1fr; }
      .reseller-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reseller-trust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reseller-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reseller-margin-chain { grid-template-columns: 1fr; }
      .reseller-margin-arrow { transform: rotate(90deg); justify-self: center; }
      .reseller-tier-table thead { display: none; }
      .reseller-tier-table tbody { display: block; }
      .reseller-tier-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.75rem;
        padding: 0.95rem 1rem;
        border-bottom: 1px solid rgba(22, 54, 56, 0.1);
      }
      .reseller-tier-table .reseller-tier-feature-name {
        grid-column: 1 / -1;
        padding: 0 0 0.2rem;
        border-bottom: none;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--ink);
      }
      .reseller-tier-table td {
        padding: 0.3rem 0;
        border-bottom: none;
      }
      .reseller-tier-table td::before {
        content: attr(data-label) ": ";
        font-weight: 800;
        color: var(--ink);
        margin-right: 0.35rem;
      }
      .reseller-tier-table td.reseller-tier-col-agen {
        background: rgba(209, 173, 36, 0.08);
        border-radius: 8px;
        padding: 0.35rem 0.55rem;
      }
    }
    @media (max-width: 600px) {
      .reseller-benefits-grid { grid-template-columns: 1fr; }
      .reseller-steps { grid-template-columns: 1fr; }
      .reseller-requirements-grid { grid-template-columns: 1fr; }
      .reseller-stories-grid { grid-template-columns: 1fr; }
      .reseller-hero-microbar { gap: 0.35rem; }
      .reseller-hero-microbar li { font-size: 0.65rem; padding: 0.3rem 0.55rem; }
    }
    .about-proof-section { padding-top: 2rem; }
    .about-proof-section .section-title,
    #about-road .section-title,
    #about-brands .section-title,
    #about-trust .section-title,
    #about-impact .section-title,
    #about-contact .section-title {
      letter-spacing: 0;
      line-height: 1.02;
    }
    .about-proof-layout {
      display: grid;
      grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
      gap: 2rem;
      align-items: center;
      margin-bottom: 1rem;
    }
    .about-proof-media {
      display: grid;
      grid-template-columns: 0.85fr 1fr;
      grid-auto-rows: 180px;
      gap: 0.85rem;
      min-width: 0;
    }
    .about-proof-photo {
      overflow: hidden;
      border: 1px solid rgba(22, 54, 56, 0.12);
      border-radius: 1rem;
      background: #fff;
      box-shadow: 0 18px 42px rgba(22, 54, 56, 0.11);
    }
    .about-proof-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 520ms ease; }
    .about-proof-photo:hover img,
    .about-proof-photo:focus-visible img { transform: scale(1.04); }
    .about-proof-photo-1 { grid-row: span 2; }
    .about-proof-copy { min-width: 0; }
    .about-value-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .about-value-list .about-card {
      min-height: 0;
      margin: 0;
      padding: clamp(1.25rem, 2vw, 1.7rem);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.58);
    }
    .about-capability-rail {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      margin: 1.25rem 0 4rem;
    }
    .about-capability-card {
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.56);
      transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
    }
    .about-capability-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

    /* About icon cards */
    .about-grid-icons article, .about-capability-card { display: flex; flex-direction: column; gap: 0.4rem; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease, background 320ms ease; }
    .about-grid-icons article:hover, .about-grid-icons article:focus-within, .about-capability-card:hover, .about-capability-card:focus-within { transform: translateY(-6px); border-color: var(--rose); box-shadow: 0 18px 40px -22px rgba(22, 54, 56, 0.3); background: rgba(255, 255, 255, 0.85); }
    .ab-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(212, 138, 124, 0.16), rgba(212, 138, 124, 0.04)); color: var(--rose); margin-bottom: 0.6rem; transition: background 320ms ease, color 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
    .about-grid-icons article:hover .ab-icon, .about-grid-icons article:focus-within .ab-icon, .about-capability-card:hover .ab-icon, .about-capability-card:focus-within .ab-icon { background: var(--rose); color: var(--cream); transform: rotate(-4deg) scale(1.06); }
    .ab-icon-svg { width: 32px; height: 32px; overflow: visible; }
    .ab-icon-svg * { transform-box: fill-box; transform-origin: center; }

    /* Icon hover animations — only the icon glyph animates */
    .ab-check { stroke-dasharray: 30; stroke-dashoffset: 30; }
    .about-grid-icons article:hover .ab-check { animation: abDraw 600ms 0.05s ease forwards; }
    .about-grid-icons article:hover .ab-shield { animation: abPop 600ms ease; }
    @keyframes abDraw { to { stroke-dashoffset: 0; } }
    @keyframes abPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

    .ab-rays line { transform-origin: 24px 24px; }
    .about-grid-icons article:hover .ab-rays line { animation: abFlicker 700ms ease infinite; }
    .about-grid-icons article:hover .ab-rays line:nth-child(2) { animation-delay: 80ms; }
    .about-grid-icons article:hover .ab-rays line:nth-child(3) { animation-delay: 160ms; }
    .about-grid-icons article:hover .ab-rays line:nth-child(4) { animation-delay: 240ms; }
    .about-grid-icons article:hover .ab-rays line:nth-child(5) { animation-delay: 320ms; }
    .about-grid-icons article:hover .ab-bulb { animation: abGlow 1.4s ease infinite; }
    @keyframes abFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
    @keyframes abGlow { 0%, 100% { fill: transparent; } 50% { fill: rgba(255, 240, 200, 0.55); } }

    .about-grid-icons article:hover .ab-ring-1 { animation: abShakeL 800ms ease; }
    .about-grid-icons article:hover .ab-ring-2 { animation: abShakeR 800ms ease; }
    @keyframes abShakeL { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }
    @keyframes abShakeR { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

    .ab-shackle { transform-origin: 32px 24px; }
    .about-grid-icons article:hover .ab-shackle { animation: abLock 800ms ease; }
    @keyframes abLock { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 60% { transform: rotate(0); } }

    .ab-bubble { opacity: 0; }
    .about-grid-icons article:hover .ab-bubble-1 { animation: abBubble 1.6s ease infinite; }
    .about-grid-icons article:hover .ab-bubble-2 { animation: abBubble 1.6s 0.4s ease infinite; }
    .about-grid-icons article:hover .ab-bubble-3 { animation: abBubble 1.6s 0.8s ease infinite; }
    @keyframes abBubble { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

    .ab-gear { transform-origin: 24px 11px; }
    .about-grid-icons article:hover .ab-gear { animation: abSpin 2.4s linear infinite; }
    @keyframes abSpin { to { transform: rotate(360deg); } }

    .about-grid-icons article:hover .ab-magnifier { animation: abScan 1.6s ease-in-out infinite; }
    @keyframes abScan { 0%, 100% { transform: translate(-3px, -3px); } 50% { transform: translate(4px, 4px); } }

    .ab-flap { transform-origin: 24px 18px; }
    .about-grid-icons article:hover .ab-flap { animation: abFlap 900ms ease; }
    @keyframes abFlap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-30deg) translateY(-2px); } }

    .ab-seal { transform-origin: 34px 36px; opacity: 0; }
    .ab-seal-check { transform-origin: 34px 36px; opacity: 0; }
    .about-grid-icons article:hover .ab-seal { animation: abStamp 700ms ease forwards; }
    .about-grid-icons article:hover .ab-seal-check { animation: abStamp 700ms 0.18s ease forwards; }
    @keyframes abStamp { 0% { opacity: 0; transform: scale(2); } 60% { opacity: 1; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

    .ab-badge-burst { transform-origin: 24px 24px; }
    .about-grid-icons article:hover .ab-badge-burst { animation: abSpin 4s linear infinite; }

    .ab-star { transform-origin: 24px 24px; }
    .about-grid-icons article:hover .ab-star { animation: abStarSpin 1.2s ease; }
    @keyframes abStarSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(360deg) scale(1); } }

    .about-grid-icons article:hover .ab-building { animation: abPop 700ms ease; }

    .ab-bag { transform-origin: 24px 24px; }
    .about-grid-icons article:hover .ab-bag { animation: abBounce 700ms ease infinite; }
    @keyframes abBounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }

    .about-grid-icons article:hover .ab-chat-1 { animation: abPopChat 900ms ease infinite; }
    .about-grid-icons article:hover .ab-chat-2 { animation: abPopChat 900ms 0.3s ease infinite; }
    @keyframes abPopChat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.08); } }

    .ab-bar { transform-origin: bottom; transform: scaleY(0); }
    .about-grid-icons article:hover .ab-bar-1 { animation: abGrow 700ms ease 0s forwards; }
    .about-grid-icons article:hover .ab-bar-2 { animation: abGrow 700ms ease 0.12s forwards; }
    .about-grid-icons article:hover .ab-bar-3 { animation: abGrow 700ms ease 0.24s forwards; }
    @keyframes abGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .ab-arrow { stroke-dasharray: 80; stroke-dashoffset: 80; }
    .about-grid-icons article:hover .ab-arrow { animation: abDrawArrow 900ms 0.3s ease forwards; }
    @keyframes abDrawArrow { to { stroke-dashoffset: 0; } }

    @media (prefers-reduced-motion: reduce) {
      .about-grid-icons article, .about-grid-icons article * { animation: none !important; transition: none !important; }
      .ab-check, .ab-arrow { stroke-dashoffset: 0 !important; }
      .ab-bar { transform: scaleY(1) !important; }
      .ab-seal, .ab-seal-check { opacity: 1 !important; }
    }

    .about-cert-grid { align-items: stretch; }
    .about-cert-card { min-height: 100%; }
    .about-cert-proof {
      display: grid;
      gap: 0.65rem;
      margin: 1rem 0 0;
      padding: 0;
    }
    .about-cert-proof div {
      display: grid;
      gap: 0.18rem;
      padding-top: 0.65rem;
      border-top: 1px solid rgba(22, 54, 56, 0.1);
    }
    .about-cert-proof dt {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .about-cert-proof dd {
      margin: 0;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.45;
    }
    .about-cert-proof a {
      color: var(--accent-ink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .about-impact-stats { max-width: none; }
    .about-impact-stats .story-stat-card {
      border-color: rgba(22, 54, 56, 0.12);
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 14px 38px rgba(22, 54, 56, 0.08);
    }
    .about-impact-stats .story-stat-value,
    .about-impact-stats .story-stat-label { color: var(--ink); }
    .about-impact-stats .story-stat-label { opacity: 0.72; }

    /* Road Timeline — bold rose ribbon with numbered cards */
    .road-timeline { position: relative; max-width: 1180px; margin: 0 auto; padding: 17rem 0 17rem; }
    .road-svg { width: 100%; height: clamp(360px, 38vw, 440px); display: block; overflow: visible; }
    .road-base { stroke: #a34b3e; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .road-edge { stroke: rgba(0,0,0,0.06); stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .road-ribbon { stroke: #e44d3a; stroke-width: 36; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--road-length, 1); stroke-dashoffset: var(--road-offset, 0); }
    .road-ribbon-hatch { stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.6; }
    .road-stitch { stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 18; vector-effect: non-scaling-stroke; }
    .road-timeline.visible .road-stitch { animation: roadStitchFlow 2s linear infinite; }
    @keyframes roadStitchFlow { to { stroke-dashoffset: -64; } }

    .road-milestones { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
    .road-milestone { position: absolute; left: 0; top: 0; width: 240px; margin-left: -120px; opacity: 0; transition: opacity 600ms ease, transform 600ms ease; pointer-events: auto; }
    .road-timeline.visible .road-milestone { opacity: 1; }
    .road-anchor {
      position: absolute;
      left: 50%;
      top: 0;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      background: #e44d3a;
      border: 3px solid white;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      z-index: 3;
      transform: rotate(45deg);
      transition: transform 300ms ease;
    }
    .road-milestone:hover .road-anchor { transform: rotate(45deg) scale(1.15); }
    .road-leader { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, #e44d3a, rgba(228, 77, 58, 0.35)); opacity: 0.85; transform-origin: top center; z-index: 1; border-radius: 2px; }
    .road-milestone[data-side="top"] .road-leader { height: 90px; transform: translateY(-90px); background: linear-gradient(to top, #e44d3a, rgba(228, 77, 58, 0.35)); }
    .road-milestone[data-side="bottom"] .road-leader { height: 90px; transform: translateY(0); }
    .road-card {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
      background: white;
      border-top: 4px solid #e44d3a;
      border-left: 1px solid rgba(0,0,0,0.06);
      border-right: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      border-radius: 4px;
      box-shadow: 0 15px 35px -15px rgba(22, 54, 56, 0.22);
      transition: transform 300ms ease, box-shadow 300ms ease;
    }
    .road-milestone:hover .road-card { transform: translateY(-6px); box-shadow: 0 25px 50px -20px rgba(26, 26, 26, 0.3); }
    .road-milestone[data-side="top"] .road-card { bottom: 100px; }
    .road-milestone[data-side="bottom"] .road-card { top: 100px; }
    .road-milestone:not([data-side]) .road-card { bottom: 100px; }
    .road-card-header { display: flex; justify-content: center; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; }
    .road-icon { color: #e44d3a; margin-top: 0.2rem; transition: transform 220ms ease; }
    .road-icon .ab-icon-svg { width: 30px; height: 30px; stroke-width: 1.5; }
    .road-milestone:hover .road-icon { transform: scale(1.1) rotate(-5deg); }
    .road-num-year { display: flex; flex-direction: column; align-items: center; }
    .road-number { font-family: var(--display); font-size: 2.5rem; font-weight: 800; color: #e44d3a; line-height: 1; letter-spacing: -0.02em; }
    .road-year { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.35rem; }
    .road-card h3 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--ink); font-weight: 700; line-height: 1.3; }
    .road-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }

    /* No-JS / SSR fallback */
    html:not(.js) .road-svg { display: none; }
    html:not(.js) .road-milestones { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-left: 1.5rem; border-left: 3px dashed var(--rose); }
    html:not(.js) .road-milestone { position: relative; left: auto; top: auto; opacity: 1; width: 100%; margin: 0; }
    html:not(.js) .road-anchor, html:not(.js) .road-leader { display: none; }
    html:not(.js) .road-card { position: relative; bottom: auto; top: auto; padding: 0; }

    @media (max-width: 1120px) and (min-width: 768px) {
      .about-hero {
        justify-content: center;
        text-align: center;
        background:
          linear-gradient(180deg, rgba(22, 54, 56, 0.82) 0%, rgba(22, 54, 56, 0.72) 100%),
          url('https://admin.asfindo.com/api/admin/media/admin/product-media/about-us-hero-background.png') center / cover no-repeat;
      }
      .about-hero-copy { max-width: none; }
      .about-hero h1,
      .about-hero .body-copy {
        margin-left: auto;
        margin-right: auto;
      }
      .about-hero .hero-actions { justify-content: center; }
      .about-product-stage { max-width: 620px; margin: 0 auto; }
      .about-proof-layout { grid-template-columns: 1fr; }
      .about-capability-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 767px) {
      :root { --site-header-offset: 110px; }
      .about-hero {
        min-height: 460px;
        justify-content: center;
        gap: 1.15rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
        text-align: center;
        background:
          linear-gradient(180deg, rgba(22, 54, 56, 0.86) 0%, rgba(22, 54, 56, 0.74) 100%),
          url('https://admin.asfindo.com/api/admin/media/admin/product-media/about-us-hero-background.png') center / cover no-repeat;
      }
      .about-hero-copy { max-width: none; }
      .about-hero h1 {
        max-width: 24rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 2.15rem;
        line-height: 1.04;
        letter-spacing: 0;
      }
      .about-hero .body-copy {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
      }
      .about-hero .hero-actions { justify-content: center; }
      .about-product-stage {
        min-height: 180px;
        max-width: 24rem;
        margin: 0 auto;
      }
      .about-product-stage::before { inset: 16% 7% 10%; border-radius: 1.25rem; }
      .about-product-tile span { display: none; }
      .about-proof-badge {
        left: 36%;
        bottom: 8%;
        min-width: 7rem;
        padding: 0.75rem;
      }
      .about-proof-badge strong { font-size: 1.25rem; }
      .about-anchor-nav { padding-bottom: 0.75rem; }
      .about-proof-section.section { padding-top: 0.85rem; }
      .about-proof-section .section-title,
      #about-road .section-title,
      #about-brands .section-title,
      #about-trust .section-title,
      #about-impact .section-title,
      #about-contact .section-title {
        max-width: calc(100% - 4.75rem);
      }
      .about-proof-layout { grid-template-columns: 1fr; gap: 1.25rem; }
      .about-proof-media { grid-auto-rows: 132px; }
      .about-value-list, .about-capability-rail { grid-template-columns: 1fr; }
      .about-capability-rail { margin-bottom: 3rem; }
      .about-cert-grid { grid-template-columns: 1fr; }
      .road-timeline { padding: 0.5rem 0 1rem; }
      .road-svg { display: none; }
      .road-milestones { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-left: 2.4rem; border-left: 3px dashed var(--rose); }
      .road-milestone { position: relative !important; left: auto !important; top: auto !important; opacity: 1 !important; width: 100%; margin: 0; }
      .road-anchor { left: -1.65rem; top: 0.5rem; margin: 0; }
      .road-leader { display: none; }
      .road-card { position: relative !important; top: auto !important; bottom: auto !important; padding: 1.2rem; grid-template-columns: auto 1fr; }
      .road-icon { grid-row: 1 / span 2; grid-column: 1; }
      .road-number { grid-row: 1; grid-column: 2; }
      .road-year { grid-row: 2; grid-column: 2; }
      .road-card h3 { grid-row: 3; grid-column: 1 / -1; }
      .road-card p { grid-row: 4; grid-column: 1 / -1; }
    }

    .btn-small { padding: 0.5rem 1rem; font-size: 0.7rem; }

    /* Story Section - Scroll Pinned Chapters */
    .story-section { position: relative; --story-chapter-count: 5; }
    .story-pinned { position: relative; width: 100%; }
    .story-bg { display: none; }
    .story-chapters { position: relative; z-index: 10; }
    .story-chapter { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 4rem 1.5rem; background: var(--story-bg); color: var(--story-text); }
    .story-chapter-inner { width: 100%; max-width: 900px; }
    .story-phase { display: block; color: var(--story-phase); font-size: clamp(0.7rem, 1.2vw, 0.85rem); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1.5rem; }
    .story-title { color: var(--story-text); font-family: var(--display); font-size: clamp(2rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96; margin-bottom: 1.5rem; }
    .story-body { color: var(--story-body); font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.65; max-width: 640px; margin-bottom: 2rem; }
    .story-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 600px; margin-top: 2rem; }
    @media (min-width: 768px) { .story-stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
    .story-stat-card { padding: 1.25rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); border-radius: 0.5rem; }
    .story-stat-value { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
    .story-stat-label { font-size: 0.75rem; font-weight: 600; opacity: 0.65; letter-spacing: 0.02em; }
    .story-cta { margin-top: 2rem; display: inline-flex; background: var(--cream); color: var(--ink); border-color: var(--cream); }
    .story-cta:hover { background: var(--rose); border-color: var(--rose); color: var(--cream); }
    .story-dots { display: none; }
    .story-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.35; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; }
    .story-dot.is-active { opacity: 1; transform: scale(1.5); }

    html.js .story-section { min-height: calc(var(--story-chapter-count) * (100vh - var(--site-header-offset))); min-height: calc(var(--story-chapter-count) * (100svh - var(--site-header-offset))); }
    html.js .story-pinned { position: sticky; top: var(--site-header-offset); height: calc(100vh - var(--site-header-offset)); height: calc(100svh - var(--site-header-offset)); overflow: hidden; background: var(--ink); }
    html.js .story-bg { display: block; position: absolute; inset: 0; transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    html.js .story-chapters { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    html.js .story-chapter { position: absolute; inset: 0; min-height: 0; padding: 2rem 1.5rem; background: transparent; opacity: 0; pointer-events: none; transform: translateY(40px); transition: opacity 0.5s ease, transform 0.5s ease; }
    html.js .story-chapter.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
    html.js .story-chapter.is-before { transform: translateY(-40px); }
    html.js .story-dots { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 0.75rem; color: var(--cream); transition: color 0.3s ease; }
    @media (min-width: 768px) { html.js .story-dots { right: 2.5rem; } }

    @media (max-width: 767px) {
      html.js .story-section { min-height: auto; }
      html.js .story-pinned { position: relative; top: auto; height: auto; overflow: visible; }
      html.js .story-bg, html.js .story-dots { display: none; }
      html.js .story-chapters { display: grid; height: auto; }
      html.js .story-chapter {
        position: relative;
        inset: auto;
        min-height: auto;
        padding: 3.25rem 1.5rem;
        background: var(--story-bg);
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
      }
      html.js .story-title {
        font-size: 2.15rem;
        line-height: 1.04;
        letter-spacing: 0;
      }
      html.js .story-body { max-width: none; }
      html.js .story-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Reduced motion fallback */
    @media (prefers-reduced-motion: reduce) {
      html.js .story-section { min-height: auto; }
      html.js .story-pinned { position: relative; height: auto; overflow: visible; }
      html.js .story-chapter { position: relative; opacity: 1 !important; pointer-events: auto !important; transform: none !important; min-height: auto; padding: 4rem 1.5rem; background: var(--story-bg); }
      html.js .story-bg, html.js .story-dots { display: none; }
    }
    /* Contact Page */
    .contact-hero-section { padding: 5rem 0 3rem; background: var(--ink); color: var(--cream); }
    .contact-hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
    @media (min-width: 768px) { .contact-hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }
    .contact-hero-content .eyebrow { color: var(--rose); }
    .contact-hero-content h1 { max-width: 600px; color: var(--cream); }
    .contact-hero-content .body-copy { color: rgba(255,255,255,0.7); max-width: 520px; }
    .contact-hero-actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
    .contact-hero-actions .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
    .contact-hero-actions .btn:hover { background: var(--rose); color: var(--cream); border-color: var(--rose); }
    .contact-hero-actions .btn-secondary { background: transparent; color: var(--cream); border-color: rgba(255,255,255,0.3); }
    .contact-hero-actions .btn-secondary:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
    .contact-hero-visual { display: grid; gap: 1rem; }
    .contact-visual-card { padding: 1.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); transition: all 300ms ease; }
    .contact-visual-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
    .contact-visual-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(167,68,87,0.25); color: var(--rose); margin-bottom: 1rem; }
    .contact-visual-card h3 { font-size: 1.1rem; color: var(--cream); margin-bottom: 0.4rem; }
    .contact-visual-card p { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0; }

    .contact-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 4rem; }
    @media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
    .contact-card { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); transition: all 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
    .contact-card:hover { transform: translateY(-6px); border-color: var(--rose); box-shadow: 0 18px 40px -22px rgba(22, 54, 56, 0.25); background: rgba(255, 255, 255, 0.9); }
    .card-link { display: block; text-decoration: none; color: inherit; }
    .contact-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(167,68,87,0.1); color: var(--rose); margin-bottom: 1.25rem; transition: all 320ms ease; }
    .contact-card:hover .contact-card-icon { background: var(--rose); color: var(--cream); transform: rotate(-4deg) scale(1.06); }
    .contact-card span { color: var(--rose); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .contact-card h2 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin: 0.75rem 0; word-break: break-word; color: var(--ink); }
    .contact-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 1.25rem; }
    .contact-card-cta { display: inline-flex; align-items: center; color: var(--rose); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: color 200ms ease; }
    .contact-card:hover .contact-card-cta { color: var(--ink); }

    .contact-info-split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
    @media (min-width: 768px) { .contact-info-split { grid-template-columns: 1fr 1fr; gap: 2rem; } }
    .contact-address-block { padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    .contact-address-block .eyebrow { margin-bottom: 0.75rem; }
    .contact-address-block h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 1rem; }
    .contact-address-block .body-copy { margin-bottom: 2rem; }
    .contact-hours { margin: 1.5rem 0 2rem; padding: 1.25rem; background: var(--bone); border: 1px solid var(--line); }
    .contact-hours h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 1rem; }
    .contact-hours dl { display: grid; gap: 0.6rem; margin: 0; }
    .contact-hours dl div { display: flex; justify-content: space-between; align-items: center; }
    .contact-hours dt { font-size: 0.85rem; color: var(--ink); font-weight: 600; }
    .contact-hours dd { font-size: 0.85rem; color: var(--muted); margin: 0; }
    .contact-map-visual { display: flex; align-items: center; justify-content: center; min-height: 300px; border: 1px solid var(--line); background: var(--bone); }
    .map-placeholder { text-align: center; padding: 2rem; color: var(--muted); }
    .map-placeholder svg { color: var(--rose); margin-bottom: 1rem; }
    .map-placeholder p { font-weight: 700; color: var(--ink); margin: 0 0 0.25rem; }
    .map-placeholder span { font-size: 0.85rem; }

    .contact-cta-band { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); background: var(--ink); color: var(--cream); }
    @media (min-width: 768px) { .contact-cta-band { grid-template-columns: 1fr auto; } }
    .contact-cta-band h2 { color: var(--cream); font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 0.5rem; }
    .contact-cta-band .body-copy { color: rgba(255,255,255,0.65); max-width: 520px; margin: 0; }
    .contact-cta-band .btn-light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
    .contact-cta-band .btn-light:hover { background: var(--rose); color: var(--cream); border-color: var(--rose); }

    .address-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); }
    .address-panel h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
    .address-panel p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.25rem; }

    /* Legal pages */
    .legal-page { padding-bottom: 1rem; }
    .legal-hero { min-height: 36vh; align-items: end; }
    .legal-hero h1 { max-width: 12ch; }
    .legal-meta { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
    .legal-layout { display: grid; grid-template-columns: minmax(12rem, .75fr) minmax(0, 1.7fr); gap: clamp(1rem, 4vw, 3rem); align-items: start; }
    .legal-toc { position: sticky; top: 8.5rem; display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,.72); }
    .legal-toc h2 { margin: 0 0 .35rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
    .legal-toc a { color: var(--charcoal); font-size: .9rem; text-decoration: none; line-height: 1.35; padding: .25rem 0; }
    .legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .legal-content { display: grid; gap: 1rem; min-width: 0; }
    .legal-section { padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); background: rgba(255,255,255,.66); }
    .legal-section h2 { margin: 0 0 .75rem; font-size: clamp(1.15rem, 2vw, 1.55rem); }
    .legal-section p { margin: 0; color: var(--charcoal); line-height: 1.7; }
    .legal-section p + p { margin-top: .75rem; }
    .legal-section ul { margin: .9rem 0 0; padding-left: 1.25rem; color: var(--charcoal); line-height: 1.65; }
    .legal-section li + li { margin-top: .35rem; }
    .legal-callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.5rem); background: var(--ink); color: var(--cream); }
    .legal-callout h2 { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--cream); }
    .legal-callout p { margin: 0; color: rgba(247,244,234,.78); line-height: 1.6; }
    .legal-callout .btn { width: auto; flex: 0 0 auto; background: var(--cream); color: var(--ink); border-color: var(--cream); }

    .account-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 4rem; }
    @media (min-width: 768px) { .account-grid { grid-template-columns: repeat(3, 1fr); } }

    /* Account hero: avatar + greeting + affiliate status chip */
    .account-hero { padding-bottom: 1.5rem; }
    .account-hero-inner { display: flex; align-items: flex-start; gap: clamp(1rem, 2.6vw, 1.75rem); flex-wrap: wrap; }
    .account-hero-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); border: 2px solid var(--brand-gold); box-shadow: var(--shadow-sm); }
    .account-hero-text { flex: 1 1 280px; min-width: 0; }
    .account-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: none; margin: 0.1rem 0 0; }
    .account-hero .body-copy { max-width: 52ch; }
    .account-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.9rem; margin-top: 0.7rem; }
    .account-hero-email { font-size: 0.85rem; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
    .account-hero-logout { margin: 0 0 0 auto; flex: none; align-self: flex-start; }
    @media (max-width: 640px) { .account-hero-logout { margin-left: 0; width: 100%; } .account-hero-logout .btn { width: 100%; } }

    .account-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); color: var(--ink); }
    .account-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .account-chip--affiliate.is-active { color: #1f6b46; border-color: rgba(31, 107, 70, 0.35); background: rgba(47, 111, 78, 0.1); }
    .account-chip--affiliate.is-active .account-chip-dot { background: #2f8f5b; box-shadow: 0 0 0 3px rgba(47, 143, 91, 0.18); }
    .account-chip--affiliate.is-suspended { color: var(--warning); border-color: rgba(138, 91, 0, 0.35); background: rgba(138, 91, 0, 0.1); }
    .account-chip--reseller { color: var(--accent-ink); border-color: rgba(209, 173, 36, 0.4); background: var(--accent-soft); }
    .account-chip--member { color: var(--charcoal); }

    .account-section-title { font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: 0.01em; margin: 0 0 1.5rem; }

    /* Account navigation cards with line icons */
    .account-grid--links .contact-card { display: flex; flex-direction: column; }
    .account-grid--links .contact-card-icon { background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 1rem; }
    .account-grid--links .contact-card-icon svg { width: 24px; height: 24px; }
    .account-grid--links .contact-card:hover .contact-card-icon { background: var(--brand-gold); color: var(--ink); transform: rotate(-4deg) scale(1.06); }
    .account-grid--links .contact-card p { flex: 1 1 auto; }

    /* Affiliate membership module */
    .account-affiliate { padding-top: 1rem; padding-bottom: 2.5rem; }
    .account-affiliate-head { max-width: 640px; margin-bottom: 1.75rem; }
    .account-affiliate-title { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; margin: 0.35rem 0 0.6rem; }
    .account-affiliate-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
    @media (min-width: 880px) { .account-affiliate-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 2rem; } }

    .membership-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 232px; padding: clamp(1.5rem, 3vw, 2rem); border-radius: 20px; color: var(--cream); background: linear-gradient(135deg, #163638 0%, #21494b 55%, #0f2a2b 100%); border: 1px solid rgba(209, 173, 36, 0.3); box-shadow: 0 32px 64px -34px rgba(15, 42, 43, 0.7), inset 0 1px 0 rgba(247, 244, 234, 0.08); }
    .membership-card-glow { position: absolute; inset: 0; background: radial-gradient(125% 125% at 86% -10%, rgba(209, 173, 36, 0.28), transparent 56%); pointer-events: none; }
    .membership-card-motif { position: absolute; right: -2.5rem; bottom: -3.25rem; width: 230px; color: rgba(209, 173, 36, 0.1); pointer-events: none; }
    .membership-card-motif svg { width: 100%; height: auto; }
    .membership-card--suspended { background: linear-gradient(135deg, #243f40 0%, #2d4b4d 60%, #1b3334 100%); border-color: rgba(247, 244, 234, 0.18); }
    .membership-card--suspended .membership-card-glow { background: radial-gradient(125% 125% at 86% -10%, rgba(214, 162, 58, 0.18), transparent 56%); }
    .membership-card-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .membership-card-row--foot { align-items: flex-end; }
    .membership-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-gold); }
    .membership-brand svg { width: 26px; height: auto; }
    .membership-status { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(247, 244, 234, 0.24); color: rgba(247, 244, 234, 0.92); }
    .membership-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 0 3px rgba(111, 207, 151, 0.22); }
    .membership-status--suspended { color: #f0c987; border-color: rgba(240, 201, 135, 0.4); }
    .membership-status--suspended .membership-status-dot { background: #e2a93f; box-shadow: 0 0 0 3px rgba(226, 169, 63, 0.22); }
    .membership-card-main { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.45rem; }
    .membership-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247, 244, 234, 0.62); }
    .membership-code { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace; font-size: clamp(1.75rem, 4.6vw, 2.6rem); font-weight: 700; letter-spacing: 0.22em; line-height: 1; color: var(--cream); overflow-wrap: anywhere; }
    .membership-foot { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.92rem; min-width: 0; }
    .membership-foot small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 244, 234, 0.55); }
    .membership-foot strong { font-weight: 700; overflow-wrap: anywhere; }
    .membership-foot--right { text-align: right; align-items: flex-end; }

    .account-affiliate-side { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
    .account-affiliate-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .account-affiliate-actions .btn { width: 100%; }
    .account-affiliate-copy { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--ink); }
    .account-affiliate-copy:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--cream); }
    .account-affiliate-whatsapp { background: var(--support); border-color: var(--support); color: var(--cream); }
    .account-affiliate-whatsapp:hover { background: #12603c; border-color: #12603c; }
    .account-affiliate-status { min-height: 1.15rem; margin: 0; font-size: 0.8rem; color: var(--muted); }
    .account-affiliate-earnings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.55); }
    .account-affiliate-earnings div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
    .account-affiliate-earnings dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
    .account-affiliate-earnings dd { margin: 0; font-size: clamp(0.92rem, 1.4vw, 1.15rem); font-weight: 700; color: var(--ink); }
    .account-affiliate-dash { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
    .account-affiliate-dash:hover { color: var(--ink); }

    .account-affiliate-invite { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); color: var(--cream); background: linear-gradient(135deg, #163638, #21494b); box-shadow: var(--shadow-sm); }
    .account-affiliate-invite-body { position: relative; z-index: 1; }
    .account-affiliate-invite .eyebrow { color: var(--brand-gold); }
    .account-affiliate-invite h2 { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0.3rem 0 0.6rem; }
    .account-affiliate-invite .body-copy { color: rgba(247, 244, 234, 0.8); max-width: 48ch; }
    .account-affiliate-invite-deco { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%); width: 210px; color: rgba(209, 173, 36, 0.12); pointer-events: none; }
    .account-affiliate-invite-deco svg { width: 100%; height: auto; }
    .account-affiliate-invite-cta { position: relative; z-index: 1; margin: 0; flex: none; }
    .account-affiliate-invite-cta .btn { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--ink); }
    .account-affiliate-invite-cta .btn:hover { background: #fffaf0; border-color: #fffaf0; }
    .account-affiliate-invite--muted { background: rgba(255, 255, 255, 0.62); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
    .account-affiliate-invite--muted .eyebrow { color: var(--rose); }
    .account-affiliate-invite--muted .body-copy { color: var(--muted); }
    .account-affiliate-invite--muted .account-affiliate-invite-cta .btn { background: transparent; color: var(--ink); }
    .account-affiliate-invite--muted .account-affiliate-invite-cta .btn:hover { background: var(--ink); color: var(--cream); }
    @media (max-width: 600px) { .account-affiliate-actions { grid-template-columns: 1fr; } .account-affiliate-invite-cta, .account-affiliate-invite-cta .btn { width: 100%; } }

    /* Affiliate dashboard (/account/affiliate) extras */
    .account-affiliate--dash { padding-top: 0.5rem; padding-bottom: 2rem; }
    .account-affiliate-extra { padding-top: 0; }
    .affiliate-commissions { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.55); margin-bottom: 2.5rem; }
    .affiliate-commissions .account-affiliate-title { margin-top: 0; margin-bottom: 1.25rem; }
    .affiliate-commissions-empty { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px dashed var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.4); }
    .affiliate-commissions-empty .body-copy { margin: 0; }
    .affiliate-commissions-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
    .affiliate-commissions-icon svg { width: 26px; height: auto; }
    .affiliate-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; counter-reset: affiliate-step; }
    @media (min-width: 768px) { .affiliate-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
    .affiliate-step { position: relative; padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.55); }
    .affiliate-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 0.75rem; border-radius: 50%; background: var(--ink); color: var(--cream); font-family: var(--display); font-weight: 700; font-size: 0.95rem; }
    .affiliate-step h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.35rem; }
    .affiliate-step p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin: 0; }

    /* WhatsApp Float */
    .whatsapp-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); transition: transform 200ms ease; }
    .whatsapp-float:hover { transform: scale(1.08); }
    .whatsapp-float svg { width: 24px; height: 24px; }

    /* Footer */
    .site-footer { position: relative; z-index: 1; max-width: 1480px; margin: 4rem auto 1.5rem; padding: 2.5rem 1.5rem; border: 1px solid var(--line); background: rgba(22, 54, 56, 0.96); color: white; }
    @media (min-width: 768px) { .site-footer { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding: 2.5rem; } }
    .site-footer p { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; line-height: 1.6; }
    .site-footer h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 1rem; }
    .site-footer a { display: block; margin: 0.5rem 0; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; transition: color 200ms ease; }
    .site-footer a:hover { color: white; }
    .footer-brand { color: white; display: block; margin-bottom: 1rem; }
    .footer-credit { grid-column: 1 / -1; margin: .25rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); text-align: center; }
    .footer-credit a { display: inline; margin: 0; color: var(--cream); font-weight: 700; }

    /* Scroll reveal */
    .reveal { opacity: 1; transform: none; }
    html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
    html.js .reveal.visible { opacity: 1; transform: translateY(0); }
    @media (max-width: 1023px) {
      html.js .store-sidebar.reveal { opacity: 1; transform: translateX(-100%); transition: transform 0.2s ease; }
      html.js .store-sidebar.reveal.is-open { opacity: 1; transform: translateX(0); }
    }

    /* Empty state */
    .empty-state { padding: 2rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); text-align: center; }
    .empty-state h3 { font-family: var(--display); font-size: 1.4rem; margin-bottom: 0.5rem; }
    .empty-state p { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }

    /* Utilities */
    .text-center { text-align: center; }
    .bg-bone { background: var(--bone); }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
      .announcement-track { animation: none; }
      .hero-bg img { transform: none !important; }
      html.js .reveal { opacity: 1; transform: none; }
    }

    @media (max-width: 1023.98px) {
      .store-layout > *,
      .store-sidebar-inner > * { min-width: 0; }
      .store-category-nav { width: 100%; }
      .store-category-nav ul { width: 100%; }
    }

    @media (max-width: 1020px) {
      .primary-nav, .search-box { display: none; }
      .mobile-toggle { display: block; }
      .hero { min-height: calc(100dvh - 100px); }
      .pdp-gallery { position: static; }
    }

    @media (max-width: 767.98px) {
      .hero { aspect-ratio: auto; }
      .legal-layout { grid-template-columns: 1fr; }
      .legal-toc { position: static; }
      .legal-callout { align-items: stretch; flex-direction: column; }
      .legal-callout .btn { width: 100%; }
    }

    @media (max-width: 640px) {
      .announcement { height: 28px; }
      .nav-shell { height: 64px; }
      .page-spacer { height: 120px; }
      .hero h1 { font-size: clamp(1.8rem, 12vw, 3rem); }
      .hero-actions { flex-direction: column; }
      .btn { width: 100%; }
      .product-meta, .product-options, .split-list, .cart-panel, .checkout-form { grid-template-columns: 1fr; }
      .brand-statement-features { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .section-heading.row { flex-direction: column; align-items: flex-start; }
      .section-heading a { white-space: normal; }
      .product-grid { grid-template-columns: 1fr; }
      .store-grid { grid-template-columns: 1fr; }
      .site-footer { display: grid; gap: 1.5rem; }
    }

    /* Mobile: prevent iOS auto-zoom on focus by raising form input font-size to >=16px */
    @media (max-width: 767.98px) {
      .catalog-filters input:not([type='checkbox']):not([type='radio']),
      .catalog-filters select,
      .product-options input:not([type='checkbox']):not([type='radio']),
      .product-options select,
      .search-page-form input,
      .pdp-ongkir-field input,
      .pdp-ongkir-field select,
      .checkout-form input:not([type='checkbox']):not([type='radio']),
      .checkout-form select,
      .checkout-form textarea { font-size: 16px; }
    }

    /* Rounded edges — global softening of card/panel/form surfaces */
    .btn,
    .nav-actions a, .nav-actions button,
    .campaign-card,
    .product-card-chip,
    .support-card,
    .cta-band,
    .catalog-filters,
    .catalog-filters input, .catalog-filters select, .catalog-filters button,
    .active-filters span, .active-filters a,
    .store-category-nav,
    .brand-card,
    .product-meta div,
    .product-options input, .product-options select, .search-page-form input,
    .product-options button, .checkout-form button,
    .purchase-proof,
    .shipping-note,
    .cart-panel,
    .checkout-form,
    .checkout-form input, .checkout-form select, .checkout-form textarea,
    .order-summary,
    .confirmation-summary,
    .search-page-form button,
    .about-grid article,
    .contact-card,
    .address-panel,
    .legal-toc,
    .legal-section,
    .legal-callout,
    .site-footer,
    .empty-state {
      border-radius: var(--radius-md);
    }
    .btn { border-radius: 999px; }
    .pdp-gallery-slide img { border-radius: var(--radius-lg); }
    img, picture, video { border-radius: var(--radius-md); }
    .hero-bg img, .announcement, .site-header img { border-radius: 0; }

    .related-carousel { position: relative; }
    .related-carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 0 1rem; scrollbar-width: thin; }
    .related-carousel-track > * { flex: 0 0 70%; max-width: 320px; scroll-snap-align: start; }
    @media (min-width: 768px) { .related-carousel-track > * { flex-basis: 30%; } }
    .pdp-bundle { padding-top: 1rem; padding-bottom: 2rem; }
    .pdp-bundle-grid { display: flex; align-items: center; gap: .75rem; overflow-x: auto; padding: 1rem 0; }
    .pdp-bundle-item { flex: 0 0 auto; text-align: center; min-width: 120px; }
    .pdp-bundle-item img { border-radius: .5rem; object-fit: contain; background: transparent; }
    .pdp-bundle-name { font-weight: 600; font-size: .875rem; margin: .25rem 0 0; }
    .pdp-bundle-price { color: var(--muted); font-size: .875rem; margin: 0; }
    .pdp-bundle-plus { font-size: 1.5rem; color: var(--muted); flex-shrink: 0; }
    .pdp-bundle-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid var(--border); }
    .pdp-bundle-total { margin: 0; }

    /* ===== Sociolla-style home extensions ===== */
    /* Utility bar */
    .utility-bar { background: var(--ink); color: var(--cream); font-size: .72rem; }
    .utility-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1280px; margin: 0 auto; padding: .45rem 1.25rem; flex-wrap: wrap; }
    .utility-bar-promo { margin: 0; letter-spacing: .04em; }
    .utility-bar-links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
    .utility-bar-links a { color: inherit; transition: text-decoration-color 180ms ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
    .utility-bar-links a:hover { text-decoration-color: currentColor; }

    /* Hero carousel */
    .hero-carousel { position: relative; overflow: hidden; }
    .hero-carousel .hero-track { position: relative; min-height: 100dvh; }
    .hero-carousel .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; min-height: 100dvh; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
    .hero-carousel .hero-slide.is-active { opacity: 1; pointer-events: auto; }
    .hero-carousel .hero-slide:first-child { position: relative; }
    .hero-carousel .hero-title { font-family: inherit; font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 700; line-height: 1.05; margin: .25rem 0 .75rem; color: var(--cream); }
    .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.88); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); z-index: 3; transition: background 200ms ease, transform 200ms ease; }
    .hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.04); }
    .hero-arrow-prev { left: 1.25rem; }
    .hero-arrow-next { right: 1.25rem; }
    .hero-dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: .35rem; z-index: 3; }
    .hero-dot { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .hero-dot-bullet { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); display: block; transition: background 200ms ease, width 200ms ease, border-radius 200ms ease; }
    .hero-dot.is-active .hero-dot-bullet { background: #fff; width: 26px; border-radius: 5px; }
    .hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
    .hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .hero-carousel:focus { outline: none; }
    .hero-carousel:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: -3px; }

    /* Category icons grid */
    .category-icons { padding: 2.25rem 0 1.5rem; }
    .category-icons-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
    .category-icon-link { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); transition: transform 200ms ease; }
    .category-icon-link:hover { transform: translateY(-3px); }
    .category-icon-circle { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, rgba(241, 214, 120, 0.42) 0%, rgba(120, 183, 196, 0.28) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(22, 54, 56, .12); overflow: hidden; }
    .category-icon-circle img { width: 60%; height: 60%; object-fit: contain; }
    .category-icon-emoji { font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
    .category-icon-emoji svg { width: 1em; height: 1em; }
    .category-icon-label { font-size: .8rem; font-weight: 600; text-align: center; }

    /* Flash sale */
    .flash-sale { background: linear-gradient(135deg, rgba(241, 214, 120, 0.38) 0%, rgba(120, 183, 196, 0.2) 100%); padding: 2.5rem 0; }
    .flash-sale-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .flash-sale-head-left { display: flex; align-items: center; gap: .75rem; }
    .flash-sale-bolt { font-size: 2rem; line-height: 1; color: var(--brand-gold); display: inline-flex; align-items: center; filter: drop-shadow(0 2px 6px rgba(209, 173, 36, .35)); }
    .flash-sale-bolt svg { width: 1em; height: 1em; }
    .flash-sale-eyebrow { color: var(--accent-ink); font-weight: 700; }
    .flash-sale-countdown { display: flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
    .flash-sale-time { background: var(--ink); color: var(--cream); padding: .4rem .7rem; border-radius: .5rem; display: inline-flex; flex-direction: column; align-items: center; min-width: 48px; font-weight: 700; font-size: 1.15rem; line-height: 1; box-shadow: 0 6px 16px rgba(22, 54, 56, .22); }
    .flash-sale-time small { font-size: .55rem; font-weight: 500; opacity: .8; margin-top: .15rem; text-transform: uppercase; letter-spacing: .08em; }
    .flash-sale-sep { font-weight: 700; color: var(--ink); }

    /* Flash sale — "live now" pulse, shared across teaser/page/schedule */
    .flash-sale-live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--sale); display: inline-block; box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); animation: flashSalePulse 1.8s ease-out infinite; }
    .flash-sale-live-eyebrow { display: inline-flex; align-items: center; gap: .45rem; }
    @keyframes flashSalePulse {
      0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
      70% { box-shadow: 0 0 0 .5rem rgba(220, 38, 38, 0); }
      100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    }
    @media (prefers-reduced-motion: reduce) { .flash-sale-live-dot { animation: none; } }

    /* Flash sale — compact variant (used at top of store-as-homepage) */
    .flash-sale.is-compact { padding: 1.25rem 0; background: linear-gradient(135deg, rgba(241, 214, 120, 0.28) 0%, rgba(120, 183, 196, 0.14) 100%); }
    .flash-sale.is-compact .flash-sale-head { margin-bottom: .85rem; gap: .75rem; }
    .flash-sale.is-compact .flash-sale-bolt { font-size: 1.35rem; }
    .flash-sale.is-compact .flash-sale-eyebrow { font-size: .7rem; letter-spacing: .12em; margin: 0 0 .15rem; }
    .flash-sale.is-compact .flash-sale-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
    .flash-sale.is-compact .flash-sale-time { min-width: 38px; padding: .25rem .5rem; font-size: .9rem; border-radius: .4rem; }
    .flash-sale.is-compact .flash-sale-time small { font-size: .5rem; }
    .flash-sale.is-compact .product-grid-flash { gap: .75rem; }
    .flash-sale-link-band { background: #fff; border-bottom: 1px solid var(--line); }
    .flash-sale-link-band.is-live { background: linear-gradient(120deg, rgba(241, 214, 120, .22), #fff 62%); }
    .flash-sale-link-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
    .flash-sale-link-band h2 { margin: .15rem 0 .25rem; font-size: 1.2rem; line-height: 1.25; }
    .flash-sale-link-band p { margin: 0; color: var(--muted); }
    .flash-sale-link-band .flash-sale-live-eyebrow { color: var(--sale); }

    /* Flash sale — standalone page hero */
    .flash-sale-page-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.75rem) 0; background: radial-gradient(135% 150% at 100% 0%, rgba(241, 214, 120, .34), transparent 56%), linear-gradient(135deg, #12302f 0%, #1d4445 52%, #2a6066 100%); color: #fff; }
    .flash-sale-page-hero::after { content: ''; position: absolute; right: -3rem; bottom: -4rem; width: 18rem; height: 18rem; background: radial-gradient(circle at center, rgba(120, 183, 196, .35), transparent 70%); pointer-events: none; }
    .flash-sale-page-intro { position: relative; z-index: 1; max-width: 760px; }
    .flash-sale-page-toprow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
    .flash-sale-page-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--brand-cream); font-weight: 700; }
    .flash-sale-page-eyebrow .flash-sale-bolt { font-size: 1.2rem; color: var(--brand-cream); filter: none; }
    .flash-sale-page-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
    .flash-sale-page-status.is-live { background: var(--sale); border-color: transparent; }
    .flash-sale-page-status.is-live .flash-sale-live-dot { background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation-name: flashSalePulseLight; }
    @keyframes flashSalePulseLight {
      0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
      70% { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }
    .flash-sale-page-intro h1 { margin: .65rem 0 .75rem; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; }
    .flash-sale-page-intro p { margin: 0; max-width: 56rem; color: rgba(255, 255, 255, .88); line-height: 1.65; }
    .flash-sale-page-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
    .flash-sale-page-actions .btn-secondary { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
    .flash-sale-page-actions .btn-secondary:hover { background: rgba(255, 255, 255, .2); }

    /* Flash sale — schedule */
    .flash-sale-schedule { padding-top: 2.75rem; padding-bottom: 3rem; }
    .flash-sale-schedule-note { margin: 0; color: var(--muted); max-width: 26rem; }
    .flash-sale-schedule-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
    .flash-sale-schedule-card { position: relative; height: 100%; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
    .flash-sale-schedule-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
    .flash-sale-schedule-card.is-active { border-color: var(--brand-gold); box-shadow: inset 0 0 0 1px rgba(209, 173, 36, .35), 0 10px 28px rgba(209, 173, 36, .16); background: linear-gradient(180deg, rgba(241, 214, 120, .12), #fff 42%); }
    .flash-sale-schedule-card h3 { margin: .55rem 0 .5rem; font-size: 1.02rem; line-height: 1.3; }
    .flash-sale-schedule-card p { margin: .35rem 0 0; color: var(--muted); line-height: 1.45; }
    .flash-sale-schedule-window { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink) !important; }
    .flash-sale-schedule-repeat { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
    .flash-sale-schedule-repeat svg { width: .95em; height: .95em; opacity: .7; }
    .flash-sale-schedule-status { display: inline-flex; align-items: center; gap: .4rem; width: max-content; max-width: 100%; padding: .2rem .55rem; border-radius: 999px; background: var(--cream); color: var(--ink) !important; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
    .flash-sale-schedule-status.is-live { background: var(--sale); color: #fff !important; }
    .flash-sale-schedule-status.is-live .flash-sale-live-dot { background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation-name: flashSalePulseLight; }

    /* Editorial */
    .editorial { padding: 3rem 0; }
    .editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
    .editorial-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.05); transition: transform 220ms ease, box-shadow 220ms ease; }
    .editorial-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.09); }
    .editorial-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
    .editorial-cover { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
    .editorial-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
    .editorial-card:hover .editorial-cover img { transform: scale(1.05); }
    .editorial-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
    .editorial-tag { display: inline-block; align-self: start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); background: var(--soft); padding: .25rem .55rem; border-radius: 999px; }
    .editorial-title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
    .editorial-excerpt { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
    .editorial-product { margin: 0; color: var(--ink); font-size: .86rem; font-weight: 700; }
    .editorial-meta { font-size: .75rem; color: var(--muted); margin-top: auto; }

    /* UGC */
    .ugc-reviews { padding: 3rem 0; }
    .ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
    .ugc-card { background: #fff; border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
    .ugc-card-head { display: flex; gap: .65rem; align-items: center; }
    .ugc-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
    .ugc-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ugc-author { margin: 0; font-weight: 700; font-size: .9rem; }
    .ugc-verified { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; color: #1f6b34; font-weight: 600; margin-left: .35rem; }
    .ugc-verified svg { width: 1em; height: 1em; }
    .ugc-stars { color: var(--accent-ink); letter-spacing: .05em; font-size: .9rem; display: inline-flex; gap: 1px; }
    .ugc-stars svg { width: 1em; height: 1em; }
    .ugc-text { margin: 0; color: var(--charcoal); font-size: .9rem; line-height: 1.5; }
    .ugc-product { display: flex; align-items: center; gap: .6rem; padding: .55rem; background: var(--cream); border-radius: .6rem; color: var(--ink); text-decoration: none; margin-top: auto; }
    .ugc-product img { width: 44px; height: 44px; object-fit: cover; border-radius: .4rem; }
    .ugc-product span { font-size: .82rem; font-weight: 600; }

    /* Loyalty teaser */
    .loyalty-teaser { padding: 3rem 0; background: linear-gradient(135deg, #163638 0%, #235a60 100%); color: var(--cream); }
    .loyalty-teaser .section-title { color: var(--cream); }
    .loyalty-teaser .eyebrow { color: var(--brand-cream); }
    .loyalty-teaser-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
    .loyalty-benefits { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: .55rem; }
    .loyalty-benefits li { position: relative; padding-left: 1.75rem; color: rgba(247, 244, 234, .88); line-height: 1.5; }
    .loyalty-benefits li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1em; height: 1.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C97A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; }
    .loyalty-card { background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-cream) 100%); color: var(--ink); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(22, 54, 56, .35); display: flex; flex-direction: column; gap: 1.25rem; aspect-ratio: 1.6 / 1; max-width: 360px; justify-self: center; width: 100%; }
    .loyalty-card-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
    .loyalty-card-tier { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
    .loyalty-card-logo { font-size: 1.1rem; }
    .loyalty-card-num { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; }
    .loyalty-card-label { font-size: .8rem; color: #3a2a14; font-weight: 600; }
    .loyalty-card-foot { display: flex; justify-content: space-between; margin-top: auto; font-size: .8rem; color: #3a2a14; font-weight: 600; font-variant-numeric: tabular-nums; }

    /* Trust badges */
    .trust-badges { padding: 2rem 0; background: var(--cream); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); }
    .trust-badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .trust-badge { display: flex; align-items: center; gap: .75rem; padding: .5rem; }
    .trust-badge-icon { font-size: 1.75rem; line-height: 1; color: var(--brand-gold); display: inline-flex; align-items: center; }
    .trust-badge-icon svg { width: 1em; height: 1em; }
    .trust-badge-label { margin: 0; font-weight: 700; font-size: .92rem; }
    .trust-badge-sub { margin: 0; font-size: .78rem; color: var(--muted); }

    /* Newsletter */
    .newsletter { padding: 3rem 0; background: var(--bone); }
    .newsletter-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
    .newsletter-inner > * { min-width: 0; }
    .newsletter-incentive { margin: 1rem 0 0; font-weight: 700; color: #c0392b; }
    .newsletter-form { display: flex; gap: .5rem; background: #fff; border-radius: .75rem; padding: .35rem; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
    .newsletter-form input { flex: 1; border: 0; padding: .85rem 1rem; font: inherit; outline: none; background: transparent; min-width: 0; }
    .newsletter-form .btn { white-space: nowrap; }
    .newsletter-status { margin: 1rem 0 0; padding: .85rem 1rem; color: var(--ink); font-weight: 600; background: #fff; border-radius: .75rem; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
    .newsletter-status:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

    /* Mega footer additions */
    .site-footer .footer-payment { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--sand); margin-top: 1rem; }
    .footer-payment-label { font-size: .75rem; color: rgba(255,255,255,.88); text-transform: uppercase; letter-spacing: .1em; margin-right: .5rem; align-self: center; }
    .footer-payment-label-shipping { margin-left: 1rem; }
    .footer-payment-pill { font-size: .72rem; padding: .3rem .55rem; border-radius: .35rem; background: #fff; border: 1px solid var(--sand); color: var(--charcoal); font-weight: 600; }
    .footer-social { display: flex; gap: .5rem; margin-top: .75rem; }
    .footer-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; font-size: .85rem; text-decoration: none; transition: background 180ms ease; }
    .footer-social a:hover { background: var(--soft); }
    .footer-social a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

    /* Responsive: collapse grids on mobile */
    @media (max-width: 900px) {
      .category-icons-grid { grid-template-columns: repeat(4, 1fr); }
      .editorial-grid { grid-template-columns: 1fr; }
      .ugc-grid { grid-template-columns: repeat(2, 1fr); }
      .loyalty-teaser-inner { grid-template-columns: 1fr; }
      .trust-badges-grid { grid-template-columns: repeat(2, 1fr); }
      .newsletter-inner { grid-template-columns: minmax(0, 1fr); }
      .utility-bar-links { display: none; }
      .hero-arrow { width: 36px; height: 36px; }
      .hero-arrow-prev { left: .5rem; }
      .hero-arrow-next { right: .5rem; }
      .flash-sale-schedule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 540px) {
      .category-icons-grid { grid-template-columns: repeat(3, 1fr); }
      .category-icon-circle { width: 60px; height: 60px; }
      .ugc-grid { grid-template-columns: 1fr; }
      .flash-sale-time { min-width: 42px; padding: .35rem .55rem; font-size: 1rem; }
      .flash-sale-head { flex-direction: column; align-items: flex-start; }
      .flash-sale-link-band-inner { align-items: flex-start; flex-direction: column; }
      .flash-sale-schedule-list { grid-template-columns: 1fr; }
    }

    /* PDP additions (2026-05-18 comprehensive improvements) */
    .product-hero-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
    .pdp-wishlist-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; color: var(--ink); font-size: .85rem; }
    .pdp-wishlist-btn[aria-pressed="true"] { color: var(--rose); border-color: var(--rose); }
    .buy-box-header .pdp-wishlist-btn { flex: 0 0 auto; margin-left: auto; padding: .55rem; width: 2.5rem; height: 2.5rem; justify-content: center; gap: 0; background: #fff; }
    .buy-box-header .pdp-wishlist-btn > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .buy-box-header .pdp-wishlist-btn svg { width: 1.1rem; height: 1.1rem; }
    .product-meta-inline { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
    .product-meta-inline > div { padding: .6rem; }
    .pdp-trust-strip { display: grid; gap: .75rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,0.6); }
    .pdp-trust-strip .pdp-trust-row { margin: 0; }
    .pdp-trust-strip .payment-badges { margin: 0; padding-top: .75rem; border-top: 1px dashed var(--line); }
    .pdp-ongkir-details { margin: 1rem 0; border: 1px solid var(--line); border-radius: 1rem; padding: .75rem 1rem; }
    .pdp-ongkir-details > summary { cursor: pointer; font-weight: 600; }
    .pdp-ongkir-details[open] > summary { margin-bottom: .75rem; }
    .pdp-delivery-estimate { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: rgba(120,183,196,0.08); border-radius: .75rem; margin: .75rem 0; font-size: .9rem; }
    .pdp-installment-teaser, .pdp-loyalty-teaser { margin: .35rem 0; font-size: .85rem; color: var(--muted); }
    .pdp-loyalty-multiplier { display: inline-block; background: var(--brand-gold); color: var(--ink); padding: .05rem .35rem; border-radius: .25rem; font-weight: 700; margin-right: .35rem; }
    .bsp-bar { background: var(--line); height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: .4rem; }
    .bsp-fill { background: var(--brand-sea); height: 100%; transition: width .4s ease; }
    .buy-box-shipping-progress.is-met .bsp-fill { background: #2da462; }
    .bsp-label { margin: 0; font-size: .85rem; color: var(--muted); }
    .buy-box-chip-delta { display: inline-block; margin-left: .45rem; padding-left: .45rem; border-left: 1px solid rgba(18,55,59,.2); font-size: .75rem; line-height: 1; color: var(--muted); }
    .buy-box-chip input:checked + span .buy-box-chip-delta { color: inherit; opacity: .78; border-left-color: rgba(127,95,0,.32); }
    .buy-box-oos { margin: 0; padding: .75rem; background: rgba(0,0,0,0.04); border-radius: .5rem; font-weight: 600; }
    .pdp-notify-restock { display: grid; gap: .5rem; margin-top: .5rem; }
    .pdp-notify-restock input[type=email] { padding: .6rem; border: 1px solid var(--line); border-radius: .5rem; width: 100%; }
    .pdp-gallery-slide-trigger { background: none; border: 0; padding: 0; cursor: zoom-in; display: block; width: 100%; }
    .pdp-lightbox { padding: 0; border: 0; background: rgba(0,0,0,0.95); color: #fff; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
    .pdp-lightbox::backdrop { background: rgba(0,0,0,0.9); }
    .pdp-lightbox-track { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; }
    .pdp-lightbox-track li { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
    .pdp-lightbox-track li.is-active { display: flex; }
    .pdp-lightbox-track img { max-width: 95vw; max-height: 90vh; object-fit: contain; }
    .pdp-lightbox-close, .pdp-lightbox-prev, .pdp-lightbox-next { position: absolute; background: rgba(255,255,255,0.15); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; font-size: 1.5rem; }
    .pdp-lightbox-close { top: 1rem; right: 1rem; }
    .pdp-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
    .pdp-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
    .pdp-lightbox-counter { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; }
    .pdp-qa { padding-top: clamp(2.75rem, 6vw, 5rem); padding-bottom: clamp(2.75rem, 6vw, 5rem); }
    .pdp-qa-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid rgba(22,54,56,.12); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(238,244,242,.68)); box-shadow: 0 18px 45px rgba(22,54,56,.08); }
    .pdp-qa-copy, .pdp-qa-form { min-width: 0; }
    .pdp-qa-eyebrow { margin: 0 0 .7rem; color: var(--brand-sea); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .pdp-qa h2 { max-width: 13ch; margin: 0; font-size: clamp(2.15rem, 5.4vw, 4.4rem); line-height: .95; letter-spacing: 0; }
    .pdp-qa-intro { max-width: 40rem; margin: 1rem 0 0; color: var(--muted); font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.65; }
    .pdp-qa-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .8rem; }
    .pdp-qa-item { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.72); }
    .pdp-qa-q { margin: 0 0 .5rem; line-height: 1.55; }
    .pdp-qa-a { margin: 0; color: var(--muted); line-height: 1.55; }
    .pdp-qa-a-tag { display: inline-flex; align-items: center; background: var(--brand-sea); color: #fff; padding: .14rem .45rem; border-radius: .35rem; font-size: .7rem; font-weight: 800; margin-right: .35rem; }
    .pdp-qa-pending { margin: 0; color: var(--muted); font-style: italic; font-size: .88rem; }
    .pdp-qa-form { display: grid; gap: .9rem; padding: clamp(1rem, 2.4vw, 1.35rem); border: 1px solid rgba(22,54,56,.12); border-radius: var(--radius-md); background: #fff; box-shadow: 0 12px 28px rgba(22,54,56,.08); }
    .pdp-qa-form-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
    .pdp-qa-form-head p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
    .pdp-qa-form .btn { justify-self: start; width: auto; min-width: min(100%, 14rem); margin-top: .2rem; padding-inline: 1.35rem; }
    .pdp-bundle-discount { background: var(--discount-red); color: #fff; display: inline-block; padding: .15rem .5rem; border-radius: .25rem; font-weight: 700; font-size: .85rem; margin: 0 0 .5rem; }
    .recently-viewed-track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
    .recently-viewed-card { flex: 0 0 140px; text-decoration: none; color: inherit; display: grid; gap: .25rem; }
    .recently-viewed-card img { border-radius: .5rem; width: 100%; aspect-ratio: 1; object-fit: contain; background: transparent; }
    .recently-viewed-card span { font-size: .85rem; line-height: 1.2; }
    .recently-viewed-card strong { font-size: .9rem; }
    .dist-row { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: .5rem; color: inherit; text-decoration: none; padding: .25rem 0; }
    .dist-row:hover { background: rgba(0,0,0,.03); }
    .ongkir-cod-badge { display: inline-block; margin-left: .5rem; padding: .1rem .4rem; background: #2da462; color: #fff; border-radius: .25rem; font-size: .7rem; }
    .pdp-cta-bar { transform: translateY(110%); transition: transform .3s ease; }
    .pdp-cta-bar.is-revealed { transform: translateY(0); }
    @media (max-width: 767px) {
      .pdp-qa { padding-top: 2rem; padding-bottom: 3rem; }
      .pdp-qa-shell { grid-template-columns: 1fr; padding: 1rem; border-radius: var(--radius-md); }
      .pdp-qa h2 { max-width: none; font-size: clamp(2rem, 13vw, 3rem); }
      .pdp-qa-intro { font-size: .96rem; }
      .pdp-qa-form { padding: 1rem; }
      .pdp-qa-form .btn { width: 100%; justify-self: stretch; }
      .pdp-tabs-triggers { display: none; }
      .pdp-tab-panel { border: 1px solid var(--line); border-radius: .75rem; padding: 0; margin-bottom: .5rem; }
      .pdp-tab-panel[hidden] { display: block; }
      .pdp-tab-panel-heading { margin: 0; padding: .9rem 1rem; cursor: pointer; }
      .pdp-tab-panel:not(.is-open) .pdp-tab-body { display: none; }
      .pdp-tab-panel.is-open .pdp-tab-body { padding: 0 1rem 1rem; }
    }

    /* PDP UI polish (2026-05-21) */
    .product-meta-inline { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .product-meta-inline > div { border-radius: .6rem; transition: border-color .15s ease; }
    .product-meta-inline > div:hover { border-color: var(--accent); }

    .buy-box-price strong { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; }
    .buy-box-price del { color: var(--muted); font-size: .9rem; opacity: .75; }
    .buy-box-discount { background: var(--rose); color: #fff; font-size: .72rem; padding: .15rem .45rem; border-radius: .35rem; letter-spacing: .02em; }
    .buy-box-savings { display: inline-flex; align-items: center; gap: .35rem; color: var(--rose); font-size: .82rem; font-weight: 700; }

    .buy-box-variants { gap: .55rem; }
    .buy-box-chip > span { padding: .65rem 1.05rem; font-weight: 600; font-size: .88rem; background: #fff; border-width: 1.5px; transition: all .15s ease; }
    .buy-box-chip > span:hover { border-color: var(--accent); background: var(--accent-soft); }
    .buy-box-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
    .buy-box-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(22,54,56,.18); }
    .buy-box-chip input:checked + span .buy-box-chip-delta { color: rgba(255,255,255,.85); border-left-color: rgba(255,255,255,.3); }

    .buy-box-qty { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .buy-box-qty #qty-label { color: var(--muted); font-size: .85rem; font-weight: 600; }
    .qty-stepper { border-width: 1.5px; border-radius: .6rem; }
    .qty-stepper button { width: 2.75rem; height: 2.75rem; font-weight: 600; color: var(--ink); transition: background .15s ease; }
    .qty-stepper button:hover:not(:disabled) { background: var(--accent-soft); }
    .qty-stepper button:disabled { opacity: .4; cursor: not-allowed; }
    .qty-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .qty-stepper input { width: 3.25rem; height: 2.75rem; font-weight: 700; font-size: .95rem; }

    .buy-box-actions { gap: .6rem; }
    .buy-box-actions .btn { min-height: 48px; font-weight: 700; letter-spacing: .04em; border-radius: .65rem; transition: transform .12s ease, box-shadow .15s ease; }
    .buy-box-actions .btn:hover { transform: translateY(-1px); }
    .buy-box-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    [data-add-to-cart] { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
    [data-add-to-cart]:hover { background: var(--accent-soft); }
    .btn-buy-now { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); box-shadow: 0 6px 16px rgba(22,54,56,.18); }
    .btn-buy-now:hover { background: #0d2a2c; }

    .bsp-bar { height: 5px; }
    .bsp-label { font-size: .82rem; }

    @media (min-width: 1024px) {
      .pdp-wishlist-btn { padding: .55rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; justify-content: center; gap: 0; }
      .pdp-wishlist-btn > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
      .pdp-wishlist-btn svg { width: 1.1rem; height: 1.1rem; }
    }

    .breadcrumb ol { flex-wrap: nowrap; overflow: hidden; }
    .breadcrumb li { min-width: 0; }
    .breadcrumb li:last-child span { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    .breadcrumb a, .breadcrumb [aria-current="page"] span { text-transform: capitalize; }

    .pdp-gallery-thumbs button { transition: outline .15s ease, transform .12s ease; }
    .pdp-gallery-thumbs button[aria-current="true"], .pdp-gallery-thumbs button.is-active { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: .5rem; }
    .pdp-gallery-thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    @media (min-width: 1024px) {
      .product-detail { align-items: start; }
      .product-detail > .pdp-gallery { position: sticky; top: 1rem; align-self: start; }
    }

    
    /* ============================================================
       Mobile-native UI additions (bottom nav, sticky CTA, toast,
       install sheet, product card +). Loaded alongside existing
       styles(); keeps storefront aesthetic, adds native polish.
       ============================================================ */

    :root {
      --bottom-nav-height: 60px;
      --bottom-nav-bg: rgba(247, 241, 232, 0.92);
      --bottom-nav-active: var(--ink);
      --bottom-nav-inactive: rgba(26, 26, 26, 0.55);
      --pdp-cta-height: 76px;
      --toast-bg: rgba(26, 26, 26, 0.96);
    }

    @media (min-width: 768px) {
      body { padding-bottom: 0; }
    }

    @media (max-width: 767.98px) {
      body { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
      body.is-pdp { padding-bottom: calc(var(--pdp-cta-height) + env(safe-area-inset-bottom, 0px) + 0.5rem); }
      body.is-pdp .bottom-nav { display: none; }
      body.is-checkout .bottom-nav { display: none; }
      .whatsapp-float { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 0.85rem); right: 0.75rem; width: 44px; height: 44px; z-index: 940; }
      .whatsapp-float svg { width: 22px; height: 22px; }
      body.is-pdp .whatsapp-float { display: none; }
    }

    /* Bottom navigation bar */
    .bottom-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 950;
      height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: var(--bottom-nav-bg);
      -webkit-backdrop-filter: saturate(180%) blur(22px);
      backdrop-filter: saturate(180%) blur(22px);
      border-top: 1px solid var(--line);
      display: flex;
    }
    @media (min-width: 768px) {
      .bottom-nav { display: none; }
    }
    @media (max-width: 767.98px) {
      .bottom-nav { display: flex; }
    }
    .bottom-nav-tab {
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 6px 4px 4px;
      color: var(--bottom-nav-inactive);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-decoration: none;
      transition: color 180ms ease, transform 120ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav-tab::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 24px;
      height: 2px;
      background: var(--saffron);
      border-radius: 0 0 2px 2px;
      transition: transform 220ms cubic-bezier(.2,.7,.3,1);
      transform-origin: center;
    }
    .bottom-nav-tab.is-active { color: var(--bottom-nav-active); font-weight: 700; }
    .bottom-nav-tab.is-active::before { transform: translateX(-50%) scaleX(1); }
    .bottom-nav-tab:active { transform: scale(0.94); }
    .bottom-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
    .bottom-nav-icon svg { width: 24px; height: 24px; }
    .bottom-nav-label { line-height: 1; font-size: 10.5px; }

    .bottom-nav-badge {
      position: absolute;
      top: 4px;
      right: calc(50% - 22px);
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: var(--rose);
      color: var(--cream);
      border-radius: 999px;
      border: 2px solid var(--bottom-nav-bg);
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(167, 68, 87, 0.4);
      animation: badge-pop 280ms cubic-bezier(.2,.7,.3,1.2);
    }
    .bottom-nav-badge[hidden] { display: none; }
    @keyframes badge-pop {
      0% { transform: scale(0.6); opacity: 0; }
      60% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* PDP sticky CTA — grid layout for deterministic proportions
       (price column gets up to 42% of width, button column fills the rest) */
    .pdp-cta-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 960;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      align-items: center;
      gap: 0.75rem;
      padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
      background: rgba(247, 241, 232, 0.97);
      -webkit-backdrop-filter: saturate(180%) blur(22px);
      backdrop-filter: saturate(180%) blur(22px);
      border-top: 1px solid var(--line);
      box-shadow: 0 -12px 32px rgba(26, 26, 26, 0.1);
    }
    @media (max-width: 767.98px) {
      body.is-pdp .pdp-cta-bar { display: grid; }
    }
    .pdp-cta-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .pdp-cta-price-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .pdp-cta-price { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdp-cta-discount { flex-shrink: 0; padding: 2px 6px; background: var(--discount-red, #dc2626); color: #fff; border-radius: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.3; }
    .pdp-cta-bpom { display: inline-flex; align-items: center; gap: 4px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: var(--success); text-transform: uppercase; white-space: nowrap; }
    .pdp-cta-button {
      min-height: 50px;
      padding: 0 0.5rem;
      background: var(--ink);
      color: var(--cream);
      border: none;
      font-family: inherit;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 120ms ease, background 200ms ease;
      -webkit-tap-highlight-color: transparent;
      border-radius: 6px;
      white-space: nowrap;
    }
    .pdp-cta-button:active:not([disabled]) { transform: scale(0.97); }
    .pdp-cta-button:disabled { opacity: 0.5; cursor: not-allowed; }
    .pdp-cta-thumb { border-radius: 0.375rem; object-fit: cover; }
    .pdp-cta-stepper { display: flex; align-items: center; gap: 0.25rem; height: 50px; }
    .pdp-cta-stepper button { width: 40px; height: 100%; padding: 0; background: var(--ink); color: var(--cream); border: none; font-weight: 700; cursor: pointer; border-radius: 6px; font-size: 1.2rem; transition: transform 120ms ease; -webkit-tap-highlight-color: transparent; }
    .pdp-cta-stepper button:active { transform: scale(0.97); }
    .pdp-cta-stepper input { flex: 1; height: 100%; min-width: 0; padding: 0 0.5rem; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; font-weight: 600; text-align: center; -webkit-appearance: none; -moz-appearance: textfield; font-family: inherit; }
    .pdp-cta-stepper input::-webkit-outer-spin-button, .pdp-cta-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* Product card "+" button */
    .product-card-image { position: relative; }
    .product-card-plus {
      position: absolute;
      bottom: 8px;
      right: 8px;
      z-index: 3;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--cream);
      border: 1.5px solid var(--cream);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 160ms ease, background 200ms ease;
      box-shadow: 0 8px 18px rgba(26, 26, 26, 0.22);
      -webkit-tap-highlight-color: transparent;
    }
    .product-card-plus svg { width: 18px; height: 18px; }
    .product-card-plus:hover { background: var(--saffron); }
    .product-card-plus:active { transform: scale(0.9); }
    .product-card-plus.is-added { background: var(--success); border-color: var(--success); }

    @media (hover: hover) and (pointer: fine) {
      .product-card-plus { opacity: 0; transform: translateY(6px); transition: all 220ms ease; }
      .product-card:hover .product-card-plus, .product-card:focus-within .product-card-plus { opacity: 1; transform: translateY(0); }
    }

    /* ----------------------------------------------------------------
       Mobile product-listing card redesign — denser, native-app feel.
       Goals: 2-column grid at every phone width, 1:1 thumbnails with
       rounded corners, 2-line ellipsis on names, inline price + slash
       price + discount %, no brand/chips/quickadd noise. The "+" is
       the single add-to-cart affordance.
       ---------------------------------------------------------------- */
    @media (max-width: 767.98px) {
      .product-grid,
      .store-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem;
      }
      @media (max-width: 380px) {
        .product-grid, .store-grid { gap: 0.5rem; }
      }

      .product-card { display: flex; flex-direction: column; }

      .product-card-image {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        overflow: hidden;
        background: transparent;
        box-shadow: 0 2px 8px rgba(26, 26, 26, 0.04);
      }
      .product-card-image img { width: 100%; height: 100%; object-fit: contain; }

      .product-card-wishlist { top: 8px; right: 8px; }

      /* Quickadd pill is redundant with the "+" button — hide it */
      .product-card-quickadd { display: none !important; }

      /* Smaller, tucked-in "+" */
      .product-card-plus {
        width: 32px;
        height: 32px;
        bottom: 6px;
        right: 6px;
        border-width: 1.5px;
        box-shadow: 0 4px 10px rgba(26, 26, 26, 0.28);
      }
      .product-card-plus svg { width: 15px; height: 15px; }

      /* Card body becomes minimal */
      .product-card-body { padding: 0.55rem 0.1rem 0; }
      .product-card-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0;
      }
      .product-card-name {
        font-size: 0.8rem;
        line-height: 1.3;
        letter-spacing: -0.005em;
        font-weight: 600;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin: 0;
      }
      .product-card-name a { color: inherit; }

      /* Inline price + strikethrough on a single row */
      .product-card-price {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--rose);
        letter-spacing: -0.015em;
        margin: 0;
      }
      .product-card-oldprice {
        display: inline-block;
        margin: 0;
        font-size: 0.7rem;
        color: var(--muted);
      }
      .product-card-meta::after {
        content: '';
        display: block;
        height: 0;
      }

      /* Hide visual noise on small cards */
      .product-card-brand,
      .product-card-chips { display: none; }

      /* Combine price + oldprice into one row with a small gap */
      .product-card-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.15rem;
      }
      .product-card-body .product-card-oldprice {
        order: 3;
      }
    }

    /* Tap feedback on cards (touch only) */
    @media (hover: none) {
      .product-card { transition: transform 120ms ease; }
      .product-card:active { transform: scale(0.98); }
    }

    /* ----------------------------------------------------------------
       Category tiles — icon-based with centered layout. Static on
       mobile, HEBOH animations on desktop hover. Respects reduced motion.
       ---------------------------------------------------------------- */
    .collection-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.65rem;
    }
    @media (min-width: 768px) {
      .collection-grid { grid-template-columns: repeat(6, 1fr); gap: 0.85rem; }
    }
    @media (min-width: 1024px) {
      .collection-grid { grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
    }

    .category-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.65rem;
      padding: 1rem 0.75rem;
      min-height: 116px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid var(--line);
      border-radius: 16px;
      color: var(--ink);
      text-decoration: none;
      transition: transform 220ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }
    .category-tile:hover {
      transform: translateY(-4px);
      border-color: var(--saffron);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 36px rgba(26, 26, 26, 0.1);
    }
    .category-tile:active { transform: translateY(0); }

    .category-tile-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--soft);
      color: var(--ink);
      flex-shrink: 0;
      transition: background 240ms ease, color 240ms ease;
    }
    .category-tile-icon svg { width: 30px; height: 30px; }
    .category-tile:hover .category-tile-icon { background: var(--saffron); color: var(--cream); }

    .category-tile-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      min-width: 0;
      width: 100%;
    }
    .category-tile-name {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.005em;
      line-height: 1.2;
      color: var(--ink);
    }
    .category-tile-summary {
      display: none;
      font-size: 0.74rem;
      line-height: 1.42;
      color: var(--muted);
    }

    @media (min-width: 768px) {
      .category-tile {
        gap: 0.85rem;
        padding: 1.25rem 0.9rem;
        min-height: 168px;
      }
      .category-tile-icon { width: 60px; height: 60px; border-radius: 16px; }
      .category-tile-icon svg { width: 34px; height: 34px; }
      .category-tile-summary { display: block; }
      .category-tile-name { font-size: 0.9rem; }
    }
    @media (min-width: 1024px) {
      .category-tile { padding: 1.4rem 1rem; min-height: 184px; }
      .category-tile-icon { width: 64px; height: 64px; }
      .category-tile-icon svg { width: 36px; height: 36px; }
      .category-tile-name { font-size: 0.95rem; }
    }

    @media (hover: none) {
      .category-tile:active { transform: scale(0.97); }
    }

    /* ============================================================
       HEBOH animations — hover-only, desktop-only, motion-safe.
       Big amplitudes, elastic easing, ripple ring, container wiggle,
       each icon delivers an unmistakable gesture.
       ============================================================ */
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

      /* SVG needs overflow visible so spray particles can leave the icon bbox */
      .category-tile-icon { overflow: visible; }
      .category-tile-icon svg { overflow: visible; }

      /* face-care: bottle squeezes + spray BURSTS out in directions */
      .category-tile .cat-anim-body { transform-origin: 12px 18px; }
      .category-tile:hover .cat-anim-body {
        animation: cat-bottle-squeeze 900ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      @keyframes cat-bottle-squeeze {
        0%, 100% { transform: scaleX(1) scaleY(1); }
        45% { transform: scaleX(1.1) scaleY(0.92); }
        70% { transform: scaleX(0.95) scaleY(1.06); }
      }
      .category-tile .cat-spray-dot { transform-origin: 17px 6px; }
      .category-tile:hover .cat-spray-dot {
        animation: cat-spray-burst 900ms cubic-bezier(.22,1,.36,1) infinite;
      }
      .category-tile:hover .cat-spray-dot-1 { animation-delay: 0ms;   --spray-x: 7px;  --spray-y: -4px; }
      .category-tile:hover .cat-spray-dot-2 { animation-delay: 110ms; --spray-x: 8px;  --spray-y: -1px; }
      .category-tile:hover .cat-spray-dot-3 { animation-delay: 220ms; --spray-x: 6px;  --spray-y: 3px;  }
      .category-tile:hover .cat-spray-dot-4 { animation-delay: 330ms; --spray-x: 5px;  --spray-y: 5px;  }
      @keyframes cat-spray-burst {
        0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
        25%  { transform: translate(0, 0) scale(1.6); opacity: 1; }
        100% { transform: translate(var(--spray-x, 7px), var(--spray-y, -3px)) scale(0); opacity: 0; }
      }

      /* moisturizer: droplet BOUNCES + wobbles dramatically */
      .category-tile .cat-anim-drop { transform-origin: 12px 18px; }
      .category-tile:hover .cat-anim-drop {
        animation: cat-drop-bounce 1200ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      @keyframes cat-drop-bounce {
        0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
        20% { transform: scale(1.22, 0.82) translateY(2.5px) rotate(0deg); }
        45% { transform: scale(0.88, 1.2) translateY(-4px) rotate(-8deg); }
        65% { transform: scale(1.06, 0.95) translateY(-1.8px) rotate(5deg); }
        85% { transform: scale(0.98, 1.03) translateY(-0.6px) rotate(-2deg); }
      }

      /* serum: dropper SHAKES + bottle wobbles + cascading drip */
      .category-tile .cat-anim-dropper { transform-origin: 12px 4px; }
      .category-tile:hover .cat-anim-dropper {
        animation: cat-dropper-shake 700ms cubic-bezier(.36,.07,.19,.97) infinite;
      }
      @keyframes cat-dropper-shake {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        20% { transform: translate(-1.2px, -1.5px) rotate(-5deg); }
        40% { transform: translate(1.2px, 0.6px) rotate(4deg); }
        60% { transform: translate(-0.9px, 0.9px) rotate(-3deg); }
        80% { transform: translate(0.9px, -0.3px) rotate(3deg); }
      }
      .category-tile .cat-anim-bottle { transform-origin: 12px 14px; }
      .category-tile:hover .cat-anim-bottle {
        animation: cat-bottle-wobble 1400ms ease-in-out infinite;
      }
      @keyframes cat-bottle-wobble {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-4deg); }
        75% { transform: rotate(4deg); }
      }
      .category-tile .cat-drip { transform-origin: 12px 17.5px; }
      .category-tile:hover .cat-drip {
        animation: cat-drip-cascade 1100ms cubic-bezier(.55,.085,.68,.53) infinite;
      }
      @keyframes cat-drip-cascade {
        0% { transform: scale(0.3) translateY(-2px); opacity: 0; }
        15% { transform: scale(1.5) translateY(0); opacity: 1; }
        40% { transform: scale(1.8) translateY(2.5px); opacity: 0.9; }
        70% { transform: scale(0.4) translateY(5px); opacity: 0; }
        100% { transform: scale(0) translateY(6px); opacity: 0; }
      }

      /* cleanser: bubbles RISE bigger, pop on exit, staggered */
      .category-tile .cat-bubble { transform-origin: center; transform-box: fill-box; }
      .category-tile:hover .cat-bubble {
        animation: cat-bubble-rise 2200ms cubic-bezier(.45,.05,.55,.95) infinite;
      }
      .category-tile:hover .cat-bubble-1 { animation-delay: 0ms;    --rise: -7px;  --drift: -1.5px; }
      .category-tile:hover .cat-bubble-2 { animation-delay: 320ms;  --rise: -9px;  --drift: 2px;    }
      .category-tile:hover .cat-bubble-3 { animation-delay: 640ms;  --rise: -8px;  --drift: -2px;   }
      .category-tile:hover .cat-bubble-4 { animation-delay: 960ms;  --rise: -6px;  --drift: 1.5px;  }
      .category-tile:hover .cat-bubble-5 { animation-delay: 1280ms; --rise: -5px;  --drift: -0.8px; }
      @keyframes cat-bubble-rise {
        0%   { transform: translate(0, 4px) scale(0.4); opacity: 0; }
        20%  { transform: translate(0, 0) scale(1.25); opacity: 1; }
        50%  { transform: translate(var(--drift, 0), calc(var(--rise, -6px) * 0.5)) scale(1.3); opacity: 0.85; }
        80%  { transform: translate(var(--drift, 0), var(--rise, -6px)) scale(1.5); opacity: 0.3; }
        100% { transform: translate(var(--drift, 0), var(--rise, -6px)) scale(0); opacity: 0; }
      }

      /* cream: lid POPS off and lands back, jar squishes */
      .category-tile .cat-anim-lid { transform-origin: 12px 9px; }
      .category-tile:hover .cat-anim-lid {
        animation: cat-lid-pop 1100ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      @keyframes cat-lid-pop {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        25% { transform: translateY(-5px) rotate(-6deg); }
        45% { transform: translateY(-6px) rotate(5deg); }
        65% { transform: translateY(-2px) rotate(-2deg); }
        85% { transform: translateY(0.6px) rotate(1deg); }
      }
      .category-tile .cat-anim-jar { transform-origin: 12px 21px; }
      .category-tile:hover .cat-anim-jar {
        animation: cat-jar-bounce 1100ms cubic-bezier(.34,1.56,.64,1) infinite;
      }
      @keyframes cat-jar-bounce {
        0%, 100% { transform: scale(1, 1); }
        25% { transform: scale(1.08, 0.9); }
        50% { transform: scale(0.94, 1.07); }
        75% { transform: scale(1.03, 0.97); }
      }

      /* body-care: pump SLAMS down + bottle squishes */
      .category-tile .cat-anim-pump { transform-origin: 12px 5px; }
      .category-tile:hover .cat-anim-pump {
        animation: cat-pump-slam 800ms cubic-bezier(.55,.05,.45,.95) infinite;
      }
      @keyframes cat-pump-slam {
        0%   { transform: translateY(-2.5px); }
        25%  { transform: translateY(0); }
        45%  { transform: translateY(4px); }
        65%  { transform: translateY(1px); }
        85%  { transform: translateY(-1.5px); }
        100% { transform: translateY(-2.5px); }
      }
      .category-tile .cat-anim-lotion { transform-origin: 12px 22px; }
      .category-tile:hover .cat-anim-lotion {
        animation: cat-lotion-squish 800ms cubic-bezier(.55,.05,.45,.95) infinite;
      }
      @keyframes cat-lotion-squish {
        0%, 100% { transform: scale(1, 1); }
        45% { transform: scale(1.12, 0.88); }
        65% { transform: scale(0.96, 1.06); }
      }
    }

    /* Mobile section rhythm — tighten vertical padding so scrolling feels brisk */
    @media (max-width: 767.98px) {
      .section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
      .section-heading { margin-bottom: 1.25rem; }
      .section-heading.row { gap: 0.5rem; flex-direction: column; align-items: flex-start; }
      .section-heading .store-cart-shortcut { display: none; }
      .section-title { font-size: clamp(1.5rem, 7vw, 2.4rem); }
      .eyebrow { font-size: 0.62rem; }
      .body-copy { font-size: 0.9rem; }

      /* Hero shaves down on mobile — current value pushes the fold */
      .hero { min-height: calc(72dvh - 60px); }
      .hero-content { padding: 3rem 1rem 2.5rem; }
      .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
      .hero-summary { font-size: 0.92rem; }
      .hero-actions { flex-direction: column; gap: 0.5rem; }
      .hero-actions .btn { width: 100%; }

      /* Compact hero (account, cart, checkout, track-order) */
      .compact-hero { padding-top: 2rem; padding-bottom: 1.25rem; }
      .compact-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
      .compact-hero .body-copy { font-size: 0.9rem; }

      /* Footer breathing room */
      .site-footer { margin: 2.5rem auto 1rem; padding: 1.75rem 1.25rem; }
      .site-footer h2 { margin-bottom: 0.5rem; }

      /* Make sure form-style pages have predictable padding */
      .checkout-form, .cart-panel { padding: 1rem; }
      .checkout-form label, .cart-panel { font-size: 0.85rem; }
    }

    /* Toast stack */
    .toast-stack {
      position: fixed;
      bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 0.75rem);
      left: 50%;
      transform: translateX(-50%);
      z-index: 980;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: center;
      pointer-events: none;
      width: min(420px, calc(100% - 2rem));
    }
    body.is-pdp .toast-stack { bottom: calc(var(--pdp-cta-height) + env(safe-area-inset-bottom, 0px) + 0.75rem); }
    @media (min-width: 768px) {
      .toast-stack { bottom: 1.5rem; }
    }
    .toast {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--toast-bg);
      color: var(--cream);
      border-radius: 12px;
      box-shadow: 0 14px 36px rgba(26, 26, 26, 0.28);
      font-size: 0.85rem;
      font-weight: 600;
      transform: translateY(12px);
      opacity: 0;
      animation: toast-in 220ms cubic-bezier(.2,.7,.3,1) forwards;
    }
    .toast.is-leaving { animation: toast-out 200ms ease forwards; }
    .toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--saffron); }
    .toast-message { flex: 1; min-width: 0; }
    .toast-action {
      flex-shrink: 0;
      background: transparent;
      color: var(--saffron);
      border: none;
      font: inherit;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      -webkit-tap-highlight-color: transparent;
    }
    .toast-action:hover { background: rgba(196, 149, 106, 0.16); }
    @keyframes toast-in {
      from { transform: translateY(16px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    @keyframes toast-out {
      to { transform: translateY(16px); opacity: 0; }
    }

    /* Install prompt sheet (bottom-sheet style) */
    .install-sheet, .install-sheet-ios {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 990;
      background: var(--cream);
      border-top: 1px solid var(--line);
      border-radius: 18px 18px 0 0;
      padding: 0.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -24px 48px rgba(26, 26, 26, 0.18);
      transform: translateY(110%);
      transition: transform 320ms cubic-bezier(.2,.7,.3,1);
      max-width: 480px;
      margin: 0 auto;
    }
    .install-sheet.is-open, .install-sheet-ios.is-open { transform: translateY(0); }
    .install-sheet[hidden], .install-sheet-ios[hidden] { display: none; }
    .install-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: rgba(26,26,26,0.18); margin: 0.4rem auto 0.8rem; }
    .install-sheet-content { display: flex; flex-direction: column; gap: 0.5rem; }
    .install-sheet-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--ink); margin-bottom: 0.25rem; }
    .install-sheet h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
    .install-sheet p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.5rem; }
    .install-sheet-ios ol { color: var(--muted); font-size: 0.92rem; line-height: 1.55; padding-left: 1.25rem; margin: 0 0 0.5rem; }
    .install-sheet-ios strong { color: var(--ink); }
    .install-sheet-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
    .install-sheet-primary, .install-sheet-secondary {
      flex: 1;
      min-height: 48px;
      padding: 0 1rem;
      border: none;
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 6px;
      transition: transform 120ms ease, background 200ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .install-sheet-primary { background: var(--ink); color: var(--cream); }
    .install-sheet-primary:active { transform: scale(0.97); }
    .install-sheet-secondary { background: transparent; color: var(--charcoal); border: 1px solid var(--line); }
    @media (min-width: 768px) {
      .install-sheet, .install-sheet-ios { right: auto; left: 1.5rem; bottom: 1.5rem; border-radius: 14px; max-width: 360px; }
    }

    /* Mobile home search field */
    .mobile-home-search {
      display: none;
      position: relative;
      margin: 0 1rem 0.5rem;
    }
    @media (max-width: 767.98px) {
      .mobile-home-search { display: flex; align-items: center; gap: 0.5rem; }
    }
    .mobile-home-search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: inline-flex; }
    .mobile-home-search-icon svg { width: 18px; height: 18px; }
    .mobile-home-search input {
      width: 100%;
      min-height: 48px;
      padding: 0.65rem 1rem 0.65rem 2.6rem;
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--line);
      border-radius: 14px;
      font: inherit;
      font-size: 0.95rem;
      color: var(--ink);
      -webkit-appearance: none;
      box-shadow: 0 2px 8px rgba(26,26,26,0.04);
    }
    .mobile-home-search input::placeholder { color: var(--muted); }
    .mobile-home-search input:focus { outline: 2px solid var(--saffron); outline-offset: 1px; }

    /* Mobile top-bar simplification */
    @media (max-width: 767.98px) {
      :root { --site-header-offset: 92px; }
      .announcement { display: none; }
      .page-spacer { height: 92px; }
      .nav-shell { height: 60px; padding: 0 0.75rem; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; }
      .nav-shell .primary-nav { display: none; }
      .nav-shell .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0.4rem; }
      .mobile-menu:not(.open) { display: none; }
      .nav-actions { gap: 0.35rem; flex-shrink: 0; }
      .nav-actions a[aria-label="Cari"], .nav-actions a[aria-label="Akun"] { display: none; }
      .nav-actions a, .nav-actions button { width: 36px; height: 36px; }
      .nav-actions .nav-account-link { min-width: 0; padding: 0 0.7rem; font-size: 0.66rem; letter-spacing: 0.06em; gap: 0.3rem; height: 36px; }
      .brand-mark { font-size: 1.25rem; gap: 0.4rem; min-width: 0; flex: 0 1 auto; overflow: hidden; }
      .brand-text { white-space: nowrap; }
      .brand-logo { width: 36px; height: 36px; }
    }
    @media (max-width: 380px) {
      .nav-actions .nav-account-link span:not(.sr-only) { display: none; }
      .nav-actions .nav-account-link { min-width: 36px; width: 36px; padding: 0; justify-content: center; }
      .brand-mark { font-size: 1.1rem; }
      .brand-logo { width: 32px; height: 32px; }
    }

    /* PDP — mobile layout overrides. Reorganized for predictability:
       cap gallery height so it doesn't dominate the fold; force product-meta
       to single column so chips don't overflow; trim typography for density;
       hide redundant gallery-note (the chips below cover the same info);
       hide global WhatsApp float and surface the gallery WhatsApp pill instead. */
    @media (max-width: 767.98px) {
      body.is-pdp main#content { padding: 0; }
      body.is-pdp .product-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem 0 1.5rem;
      }
      body.is-pdp .product-gallery {
        position: relative;
        margin: 0 -1rem;
        max-height: 56vh;
        overflow: hidden;
        border-radius: 0;
      }
      body.is-pdp .product-gallery img {
        width: 100%;
        height: auto;
        max-height: 56vh;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
        box-shadow: none;
      }
      body.is-pdp .gallery-note { display: none; }
      body.is-pdp .product-info { padding: 0 0.25rem; }
      body.is-pdp .product-info > .eyebrow {
        font-size: 0.62rem;
        margin-bottom: 0.4rem;
        word-spacing: 0.1em;
      }
      body.is-pdp .product-info h1 {
        font-size: clamp(1.4rem, 5.8vw, 1.9rem);
        line-height: 1.12;
        letter-spacing: 0;
        word-spacing: 0.1em;
        margin-bottom: 0.65rem;
      }
      body.is-pdp .price-row {
        margin: 0 0 0.85rem;
        align-items: center;
        gap: 0.5rem 0.65rem;
      }
      body.is-pdp .price-row strong { font-size: 1.35rem; letter-spacing: -0.02em; }
      body.is-pdp .price-row del { font-size: 0.9rem; }
      body.is-pdp .price-row span {
        flex: 0 0 auto;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        margin-top: 0.15rem;
      }
      body.is-pdp .product-meta {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin: 0 0 1.25rem;
      }
      body.is-pdp .product-meta > div { padding: 0.6rem 0.7rem; }
      body.is-pdp .product-meta dt { font-size: 0.58rem; }
      body.is-pdp .product-meta dd { font-size: 0.82rem; margin-top: 0.15rem; word-break: break-word; }
      body.is-pdp .product-options button[type="submit"] { display: none; }
      body.is-pdp .product-options {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        margin: 0 0 0.75rem;
      }
      body.is-pdp .form-help { font-size: 0.74rem; }
      body.is-pdp .purchase-proof,
      body.is-pdp .shipping-note { font-size: 0.78rem; padding: 0.85rem; }
      body.is-pdp .action-row a.btn { width: 100%; }
      body.is-pdp .detail-block { margin-top: 1.25rem; padding-top: 1rem; }
      body.is-pdp .detail-block h2 { font-size: 0.78rem; }
      body.is-pdp .detail-block ul { font-size: 0.86rem; padding-left: 1rem; }
      body.is-pdp .detail-block p { font-size: 0.88rem; line-height: 1.55; }

      /* gallery overlay WhatsApp button (mobile only) */
      body.is-pdp .gallery-whatsapp {
        position: absolute;
        top: max(12px, env(safe-area-inset-top, 0px) + 4px);
        right: 12px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(37, 211, 102, 0.96);
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.7);
        z-index: 2;
      }
      body.is-pdp .gallery-whatsapp svg { width: 20px; height: 20px; }

      /* Global WhatsApp float is hidden on PDP — gallery pill replaces it */
      body.is-pdp .whatsapp-float { display: none !important; }
    }
    @media (min-width: 768px) {
      .gallery-whatsapp { display: none; }
    }

    /* Tap feedback on touch devices */
    @media (hover: none) {
      .btn:active, .product-card-plus:active, .pdp-cta-button:active { transform: scale(0.97); }
    }

    /* Cart drawer */
    .cart-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 380px; max-width: 90vw;
      background: var(--cream);
      color: var(--ink);
      box-shadow: -16px 0 32px rgba(26, 26, 26, 0.12);
      transform: translateX(100%);
      transition: transform 220ms ease;
      z-index: 1000;
      display: flex; flex-direction: column;
      visibility: hidden;
    }
    .cart-drawer.is-open { transform: translateX(0); visibility: visible; }
    .cart-drawer[aria-hidden="true"] { transform: translateX(100%); visibility: hidden; pointer-events: none; }
    @media (max-width: 479px) { .cart-drawer { width: 100vw; max-width: 100vw; } }

    .cart-drawer-backdrop {
      position: fixed; inset: 0;
      background: rgba(26, 26, 26, 0.5);
      opacity: 0;
      transition: opacity 220ms ease;
      z-index: 999;
    }
    .cart-drawer-backdrop.is-open { opacity: 1; }
    .cart-drawer-backdrop[hidden] { display: none; }

    .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
    .cart-drawer-title { font-size: 1.1rem; margin: 0; color: var(--ink); }
    .cart-drawer-close { background: transparent; border: 0; cursor: pointer; padding: 0.4rem; color: var(--ink); }

    .cart-drawer-select-all { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; cursor: pointer; color: var(--ink); }
    .cart-drawer-select-all input { width: 1.1rem; height: 1.1rem; }

    .cart-drawer-list { list-style: none; margin: 0; padding: 0.5rem 0; overflow-y: auto; flex: 1; }

    .cart-drawer-item { display: grid; grid-template-columns: auto 64px 1fr; column-gap: 0.75rem; row-gap: 0.4rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); align-items: start; }
    .cart-drawer-item-checkbox { width: 1.1rem; height: 1.1rem; grid-row: 1 / 3; align-self: center; cursor: pointer; }
    .cart-drawer-item-image { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; grid-row: 1 / 3; background: rgba(26,26,26,0.04); }
    .cart-drawer-item-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
    .cart-drawer-item-name { font-weight: 600; font-size: 0.92rem; margin: 0; color: var(--ink); }
    .cart-drawer-item-variant { color: var(--muted); font-size: 0.78rem; margin: 0; }
    .cart-drawer-item-price { font-size: 0.82rem; color: var(--muted); margin: 0; }
    .cart-drawer-item-warning { color: #b54708; font-size: 0.75rem; }
    .cart-drawer-item-controls { display: flex; align-items: center; gap: 0.5rem; grid-column: 2 / 4; }
    .cart-drawer-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
    .cart-drawer-qty button { background: transparent; border: 0; padding: 0.3rem 0.55rem; cursor: pointer; font-size: 1rem; color: var(--ink); }
    .cart-drawer-qty input { width: 2.5rem; text-align: center; border: 0; padding: 0.3rem 0; font: inherit; background: transparent; color: var(--ink); pointer-events: none; }
    .cart-drawer-item-remove { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0.25rem; margin-left: auto; font-size: 1rem; display: inline-flex; align-items: center; }
    .cart-drawer-item-remove svg { width: 1em; height: 1em; }
    .cart-drawer-item-buy {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 36px; padding: 0.4rem 0.85rem;
      background: var(--ink); color: var(--cream);
      border: 1px solid var(--ink);
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      text-decoration: none;
      grid-column: 2 / 4;
    }

    .cart-drawer-empty { padding: 2rem 1.25rem; text-align: center; color: var(--muted); }
    .cart-drawer-empty .btn { margin-top: 0.8rem; }
    .cart-drawer-empty[hidden] { display: none; }

    .cart-drawer-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: rgba(26,26,26,0.02); }
    .cart-drawer-subtotal-label { font-size: 0.75rem; color: var(--muted); margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
    .cart-drawer-subtotal { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--ink); }
    .cart-drawer-note { font-size: 0.75rem; color: var(--muted); margin: 0; }
    .cart-drawer-checkout,
    .cart-page-checkout { width: 100%; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; padding: 0.75rem 1rem; margin: 0.75rem 0 0.45rem; cursor: pointer; }
    .cart-drawer-checkout:disabled,
    .cart-page-checkout:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ---- Checkout redesign ---------------------------------------------------- */
    .checkout-stepper { width: 100%; margin: 0 0 1.25rem; }
    .checkout-stepper ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; align-items: stretch; justify-content: stretch; }
    .checkout-step { flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); font-size: 0.85rem; color: color-mix(in srgb, var(--ink) 55%, transparent); background: transparent; }
    .checkout-step.is-current { border-color: var(--ink); color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--ink) 6%, transparent); }
    .checkout-step.is-complete { border-color: color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink); }
    .checkout-step.is-complete .checkout-step-index::before { content: '\2713 '; }
    .checkout-step-index { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); font-variant-numeric: tabular-nums; font-weight: 700; }
    .checkout-step.is-current .checkout-step-index { background: var(--ink); color: var(--paper); }
    .checkout-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 600px) { .checkout-step-label { display: none; } .checkout-step.is-current .checkout-step-label { display: inline; } }

    .checkout-hero { padding-top: clamp(1rem, 2vw, 1.6rem); padding-bottom: clamp(0.85rem, 1.8vw, 1.25rem); }
    .checkout-hero h1 { max-width: none; font-size: clamp(2.25rem, 5.7vw, 5rem); line-height: 0.95; }
    .checkout-hero .body-copy { max-width: 58rem; }
    .checkout-stage { padding-top: clamp(0.75rem, 1.6vw, 1.25rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
    .checkout-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
    @media (min-width: 960px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; } }
    @media (min-width: 1320px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); } }

    .checkout-section { border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; padding: 1rem 1rem 0.5rem; margin: 0 0 1rem; }
    .checkout-section legend { font-weight: 700; padding: 0 0.4rem; }
    .checkout-form { margin-bottom: 0; }

    .checkout-promo { display: grid; gap: 0; min-width: 0; margin: 0 0 1rem; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; background: var(--paper); }
    .checkout-promo[open] { gap: 0.75rem; padding: 1rem; }
    .checkout-promo[data-promo-state="selected"] { border-color: color-mix(in srgb, var(--success) 45%, var(--ink)); background: color-mix(in srgb, var(--success) 6%, var(--paper)); }
    .checkout-promo[data-promo-state="error"] { border-color: color-mix(in srgb, var(--rose) 65%, var(--ink)); background: color-mix(in srgb, var(--rose) 6%, var(--paper)); }
    .checkout-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
    .checkout-promo-head > * { min-width: 0; }
    .checkout-promo-clear { flex: 0 0 auto; min-height: 2.25rem; padding: 0 0.25rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
    .promo-tickets-summary { min-height: 3rem; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--ink); font-size: 1rem; font-weight: 800; cursor: pointer; list-style: none; }
    .promo-tickets-summary::-webkit-details-marker { display: none; }
    .promo-tickets-summary::marker { content: ""; }
    .checkout-promo[open] .promo-tickets-summary { min-height: 0; padding: 0; }
    .promo-tickets-toggle { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
    .checkout-promo[open] .promo-tickets-toggle { transform: rotate(45deg); }
    .promo-tickets-body { display: grid; gap: 0.75rem; min-width: 0; }
    .promo-tickets-header { display: grid; gap: 0.3rem; min-width: 0; }
    .promo-tickets-header p { margin: 0; color: color-mix(in srgb, var(--ink) 66%, transparent); font-size: 0.86rem; line-height: 1.45; }
    .promo-ticket-list { display: grid; gap: 0.5rem; min-width: 0; }
    .promo-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; min-height: 3.35rem; padding: 0.7rem 0.85rem; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--paper) 92%, white); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
    .promo-ticket:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, var(--paper)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 10%, transparent); }
    .promo-ticket input { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; }
    .promo-ticket.is-disabled { opacity: 0.55; cursor: not-allowed; }
    .promo-ticket.is-disabled * { pointer-events: none; }
    .promo-ticket-main { display: grid; gap: 0.12rem; min-width: 0; }
    .promo-ticket-main > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
    .promo-ticket-state { justify-self: end; min-width: 4.5rem; max-width: 7.5rem; padding: 0.2rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--saffron) 16%, transparent); color: var(--ink); font-size: 0.68rem; font-weight: 800; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .promo-manual-field { display: grid; gap: 0.3rem; min-width: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
    .promo-manual-code { width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.55rem 0.75rem; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 10px; background: white; color: var(--ink); font: inherit; font-size: 16px; text-transform: uppercase; }
    .promo-manual-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: end; min-width: 0; }
    .promo-manual-row [data-promo-apply] { min-height: 2.75rem; padding: 0 0.95rem; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); font: inherit; font-size: 0.78rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
    .checkout-promo [data-promo-message] { min-height: 1.2rem; margin: 0; color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; }
    .checkout-promo[data-promo-state="error"] [data-promo-message] { color: var(--rose); font-weight: 700; }
    .affiliate-share-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; margin-top: 1rem; }
    .affiliate-share-field { display: grid; gap: 0.35rem; min-width: 0; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
    .affiliate-share-field input { width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.65rem 0.8rem; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--paper) 82%, white); color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 800; letter-spacing: 0; }
    .affiliate-share-field-wide { grid-column: 1 / -1; }
    .affiliate-share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
    .affiliate-share-actions .storefront-button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.95rem; border-radius: 10px; text-decoration: none; white-space: nowrap; }
    .affiliate-share-status { grid-column: 1 / -1; min-height: 1.2rem; margin: 0; }
    @media (max-width: 600px) {
      .checkout-promo { padding: 0.85rem; border-radius: 12px; }
      .checkout-promo:not([open]) { padding: 0; }
      .checkout-promo-head { align-items: flex-start; }
      .promo-ticket { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
      .promo-ticket-state { grid-column: 2 / 3; justify-self: start; max-width: 100%; }
      .promo-manual-row { grid-template-columns: 1fr; }
      .promo-manual-row [data-promo-apply] { width: 100%; }
      .affiliate-share-panel { grid-template-columns: 1fr; }
      .affiliate-share-actions .storefront-button { width: 100%; }
    }

    /* Region cascade tightening (Task 8) */
    .region-fields { display: contents; }
    @media (min-width: 600px) {
      .region-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.75rem; }
      .region-fields > .form-wide,
      .region-fields > .region-manual-toggle,
      .region-fields > .region-manual { grid-column: 1 / -1; }
    }
    .region-manual-toggle { appearance: none; border: 0; background: transparent; padding: 0.3rem 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: 0.85rem; text-align: left; }
    .region-manual-toggle.is-suggested { color: color-mix(in srgb, var(--saffron) 90%, var(--ink)); font-weight: 700; }
    .region-manual { display: grid; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 10px; }
    .region-manual[hidden] { display: none !important; }
    .region-manual-notice { margin: 0.25rem 0 0; font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 60%, transparent); }

    .checkout-live-shipping { display: grid; gap: 0.55rem; padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 8px; background: color-mix(in srgb, white 72%, var(--paper)); }
    .checkout-live-shipping-status { margin: 0; color: color-mix(in srgb, var(--ink) 66%, transparent); font-size: 0.82rem; line-height: 1.4; }
    .checkout-live-shipping[data-live-shipping-state="ready"] .checkout-live-shipping-status { color: var(--ink); font-weight: 700; }
    .checkout-live-shipping[data-live-shipping-state="error"] .checkout-live-shipping-status { color: var(--rose); font-weight: 700; }
    .checkout-live-shipping-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
    .checkout-live-shipping-list[hidden] { display: none !important; }
    .checkout-live-shipping-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.65rem 0.75rem; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 8px; background: white; font-size: 0.86rem; }
    .checkout-live-shipping-service { min-width: 0; overflow-wrap: anywhere; font-weight: 800; color: var(--ink); }
    .checkout-live-shipping-rate small { color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: 0.74rem; line-height: 1.25; }
    .checkout-live-shipping-cod { justify-self: start; padding: 0.12rem 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--saffron) 22%, transparent); color: var(--ink) !important; font-weight: 800; }
    .checkout-live-shipping-rate strong { grid-column: 2 / 3; grid-row: 1 / span 3; justify-self: end; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }

    /* Form niceties */
    .form-optional { font-size: 0.7rem; color: color-mix(in srgb, var(--ink) 50%, transparent); font-weight: 500; margin-left: 0.3rem; }

    /* Notes collapsible */
    .checkout-notes-collapse { margin: 0 0 1rem; }
    .checkout-notes-collapse summary { cursor: pointer; padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 10px; font-weight: 600; list-style: none; }
    .checkout-notes-collapse summary::-webkit-details-marker { display: none; }
    .checkout-notes-collapse summary::after { content: ' +'; float: right; font-weight: 700; }
    .checkout-notes-collapse[open] summary::after { content: ' −'; }
    .checkout-notes-collapse[open] summary { border-radius: 10px 10px 0 0; border-bottom: 0; }
    .checkout-notes-collapse[open] textarea { border-top: 0; border-radius: 0 0 10px 10px; }

    /* Visually-hidden utility */
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    .order-summary { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; padding: 1rem; background: var(--paper); }
    .order-summary.is-sticky { position: sticky; top: 1rem; }
    @media (max-width: 959px) { .order-summary.is-sticky { position: static; } }
    .order-summary h2 { margin: 0 0 0.75rem; font-family: var(--body); font-size: 1rem; line-height: 1.25; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
    .order-summary-lines { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
    .order-summary-line { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 0.75rem; align-items: baseline; font-size: 0.9rem; }
    .order-summary-line-name { min-width: 0; overflow-wrap: anywhere; }
    .order-summary-line-meta { grid-column: 1 / 2; color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 0.8rem; }
    .order-summary-line-price { grid-column: 2 / 3; grid-row: 1 / 2; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .order-summary .order-summary-totals { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.45rem; font-size: 0.9rem; }
    .order-summary .order-summary-totals > div { display: grid; grid-template-columns: minmax(7rem, 1fr) max-content; align-items: start; column-gap: 0.75rem; min-width: 0; }
    .order-summary .order-summary-totals > div[hidden] { display: none !important; }
    .order-summary .order-summary-totals dt, .order-summary .order-summary-totals dd { margin: 0; min-width: 0; line-height: 1.35; word-break: normal; overflow-wrap: normal; }
    .order-summary .order-summary-totals dt { color: color-mix(in srgb, var(--ink) 64%, transparent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
    .order-summary .order-summary-totals dd { justify-self: end; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
    .order-summary .order-summary-totals dd[data-summary-total], .order-summary .order-summary-totals dd[data-summary-payment-fee], .order-summary .order-summary-totals dd[data-summary-shipping-value] { white-space: nowrap; }
    .order-summary-total { font-weight: 800; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); padding-top: 0.4rem; margin-top: 0.2rem; }
    .order-summary-progress { margin: 0.6rem 0 0; font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }

    .checkout-shipping-section { display: grid; gap: 0.5rem; align-content: start; padding-bottom: 0.75rem; }
    .checkout-shipping-section legend { grid-column: 1 / -1; }
    @media (min-width: 960px) { .checkout-shipping-section { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .shipping-rate-card, .payment-method-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 12px; margin: 0 0 0.5rem; cursor: pointer; }
    .checkout-shipping-section .shipping-rate-card { margin: 0; min-width: 0; }
    .shipping-rate-card input, .payment-method-option input { margin: 0; }
    .shipping-rate-card:has(input:checked), .payment-method-option:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent); }
    .shipping-rate-card-courier, .payment-method-option-main { flex: 1; display: grid; gap: 0.12rem; min-width: 0; }
    .shipping-rate-card-courier strong, .payment-method-option-main strong { color: var(--ink); }
    .shipping-rate-card-courier small, .payment-method-option-main small { color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: 0.75rem; line-height: 1.35; }
    .shipping-rate-card-cod { flex: 0 0 auto; border-radius: 999px; padding: 0.2rem 0.45rem; background: color-mix(in srgb, var(--saffron) 22%, transparent); color: var(--ink); font-size: 0.68rem; font-weight: 800; }
    .shipping-rate-card-price { font-variant-numeric: tabular-nums; }
    .checkout-cod-option { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--saffron) 55%, var(--ink)); border-radius: 12px; background: color-mix(in srgb, var(--saffron) 10%, var(--paper)); color: var(--ink); }
    .checkout-cod-option input { margin-top: 0.2rem; }
    .checkout-cod-option span { display: grid; gap: 0.2rem; }
    .checkout-cod-option small { color: color-mix(in srgb, var(--ink) 68%, transparent); font-size: 0.78rem; line-height: 1.45; }

    .checkout-primary-cta { width: 100%; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; padding: 0.85rem 1rem; margin-top: 0.5rem; cursor: pointer; }
    .checkout-primary-cta:disabled { opacity: 0.5; cursor: not-allowed; }

    .confirmation-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
    .confirmation-actions .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.2rem; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); background: transparent; font-weight: 700; text-decoration: none; }

    .order-timeline { margin: 1rem 0; }
    .order-timeline ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; }
    .order-timeline-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 55%, transparent); position: relative; }
    .order-timeline-dot { width: 0.85rem; height: 0.85rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
    .order-timeline-step.is-current .order-timeline-dot { background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 15%, transparent); }
    .order-timeline-step.is-current { color: var(--ink); font-weight: 700; }
    .order-timeline-step.is-complete .order-timeline-dot { background: var(--ink); }
    .order-timeline-step.is-complete { color: var(--ink); }
    @media (max-width: 600px) { .order-timeline ol { flex-direction: column; } .order-timeline-step { flex-direction: row; justify-content: flex-start; gap: 0.75rem; } }

    .tracking-shipments { display: flex; flex-direction: column; gap: 1.25rem; }
    .tracking-shipment { border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; padding: 1.1rem 1.25rem; background: var(--paper); }
    .tracking-shipment-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
    .tracking-shipment-courier { margin: 0; font-weight: 700; }
    .tracking-shipment-service { color: color-mix(in srgb, var(--ink) 60%, transparent); font-weight: 500; }
    .tracking-shipment-awb { margin: 0.25rem 0 0; font-size: 0.9rem; }
    .tracking-shipment-status.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 0.78rem; font-weight: 700; }
    .tracking-shipment-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.85rem 0 1rem; }
    .tracking-shipment-meta dt { font-size: 0.72rem; color: color-mix(in srgb, var(--ink) 55%, transparent); text-transform: uppercase; letter-spacing: 0.04em; }
    .tracking-shipment-meta dd { margin: 0; font-size: 0.85rem; font-weight: 600; }
    .tracking-checkpoints { list-style: none; padding: 0; margin: 0; position: relative; }
    .tracking-checkpoints::before { content: ""; position: absolute; left: 0.42rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
    .tracking-checkpoint { position: relative; padding: 0.45rem 0 0.45rem 1.5rem; }
    .tracking-checkpoint-dot { position: absolute; left: 0; top: 0.6rem; width: 0.85rem; height: 0.85rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 25%, transparent); border: 2px solid var(--paper); }
    .tracking-checkpoint.is-latest .tracking-checkpoint-dot { background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); }
    .tracking-checkpoint.is-empty { color: color-mix(in srgb, var(--ink) 60%, transparent); }
    .tracking-checkpoint-status { margin: 0; font-weight: 600; }
    .tracking-checkpoint-city { color: color-mix(in srgb, var(--ink) 60%, transparent); font-weight: 500; }
    .tracking-checkpoint-time { margin: 0.1rem 0 0; font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 60%, transparent); }
    .tracking-checkpoint-note { margin: 0.25rem 0 0; font-size: 0.82rem; }
    .tracking-refresh-form { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .tracking-refresh-hint { margin: 0; font-size: 0.78rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }
    .tracking-notice { margin: 0 0 1rem; padding: 0.7rem 0.95rem; border-radius: 10px; font-size: 0.88rem; }
    .tracking-notice.is-success { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
    .tracking-notice.is-error { background: color-mix(in srgb, #c63b3b 18%, transparent); color: #8a1f1f; }
    @media (max-width: 600px) { .tracking-shipment-meta { grid-template-columns: 1fr 1fr; } }

    @media (max-width: 959px) {
      body.is-checkout main { padding-bottom: 5rem; }
      .checkout-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding: 0.75rem 1rem; display: flex; gap: 0.75rem; align-items: center; z-index: 40; }
    }

    .nav-action-button { position: relative; }
    .cart-header-badge,
    .wishlist-header-badge { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--saffron); color: var(--cream); font-size: 0.62rem; font-weight: 800; line-height: 1; pointer-events: none; box-shadow: 0 0 0 2px var(--cream); }
    .cart-header-badge[hidden],
    .wishlist-header-badge[hidden] { display: none; }

    .wishlist-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 380px; max-width: 90vw;
      background: var(--cream);
      color: var(--ink);
      box-shadow: -16px 0 32px rgba(26, 26, 26, 0.12);
      transform: translateX(100%);
      transition: transform 220ms ease;
      z-index: 1000;
      display: flex; flex-direction: column;
      visibility: hidden;
    }
    .wishlist-drawer.is-open { transform: translateX(0); visibility: visible; }
    .wishlist-drawer[aria-hidden="true"] { transform: translateX(100%); visibility: hidden; pointer-events: none; }
    @media (max-width: 479px) { .wishlist-drawer { width: 100vw; max-width: 100vw; } }

    .wishlist-drawer-backdrop {
      position: fixed; inset: 0;
      background: rgba(26, 26, 26, 0.5);
      opacity: 0;
      transition: opacity 220ms ease;
      z-index: 999;
    }
    .wishlist-drawer-backdrop.is-open { opacity: 1; }
    .wishlist-drawer-backdrop[hidden] { display: none; }

    .wishlist-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
    .wishlist-drawer-title { font-size: 1.1rem; margin: 0; color: var(--ink); }
    .wishlist-drawer-close { background: transparent; border: 0; cursor: pointer; padding: 0.4rem; color: var(--ink); }

    .wishlist-drawer-list { list-style: none; margin: 0; padding: 0.5rem 0; overflow-y: auto; flex: 1; }
    .wishlist-drawer-item { display: grid; grid-template-columns: 64px 1fr auto; column-gap: 0.75rem; row-gap: 0.3rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); align-items: center; }
    .wishlist-drawer-item-image { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: rgba(26,26,26,0.04); grid-row: 1 / 3; }
    .wishlist-drawer-item-body { min-width: 0; }
    .wishlist-drawer-item-name { font-weight: 600; font-size: 0.92rem; margin: 0 0 0.15rem; color: var(--ink); }
    .wishlist-drawer-item-name a { color: inherit; text-decoration: none; }
    .wishlist-drawer-item-name a:hover { text-decoration: underline; }
    .wishlist-drawer-item-price { font-size: 0.82rem; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }
    .wishlist-drawer-item-remove { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0.25rem; grid-row: 1 / 3; align-self: center; font-size: 1rem; line-height: 1; }
    .wishlist-drawer-item-remove:hover { color: var(--ink); }

    .wishlist-drawer-empty { padding: 2rem 1.25rem; text-align: center; color: var(--muted); }
    .wishlist-drawer-empty .btn { margin-top: 0.8rem; }
    .wishlist-drawer-empty[hidden] { display: none; }

    .wishlist-drawer-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: rgba(26,26,26,0.02); }
    .wishlist-drawer-footer[hidden] { display: none; }
    .wishlist-drawer-see-all { display: block; text-align: center; width: 100%; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); padding: 0.7rem 1rem; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
    .wishlist-drawer-see-all:hover { background: var(--ink); color: var(--cream); }

    .wishlist-page { display: block; }
    .wishlist-page-list { list-style: none; margin: 0; padding: 0; }
    .wishlist-page-list .wishlist-drawer-item { padding: 1rem 0; }
    .wishlist-page-empty[hidden] { display: none; }
    .wishlist-page-empty { padding: 2rem 0; text-align: center; color: var(--muted); }
    .wishlist-page-noscript { padding: 1rem; background: rgba(196,149,106,0.12); border: 1px solid var(--saffron); border-radius: 4px; color: var(--ink); margin-top: 1rem; }

    /* /cart page reuses similar styles */
    .cart-page { display: block; }
    .cart-page-list { list-style: none; margin: 0; padding: 0; }
    .cart-page-list .cart-drawer-item { padding: 1rem 0; }
    .cart-page-empty[hidden], .cart-page-footer[hidden] { display: none; }
    .cart-page-empty { padding: 2rem 0; text-align: center; color: var(--muted); }
    .cart-page-footer { padding: 1rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }
    .cart-page-subtotal-label { font-size: 0.75rem; color: var(--muted); margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
    .cart-page-subtotal { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--ink); }
    .cart-page-note { font-size: 0.8rem; color: var(--muted); margin: 0; }
    .cart-page-noscript { padding: 1rem; background: rgba(196,149,106,0.12); border: 1px solid var(--saffron); border-radius: 4px; color: var(--ink); }

    /* Search page (Task 9) */
    .search-hero { position: sticky; top: 0; z-index: 5; background: var(--cream); padding-top: 0.75rem; padding-bottom: 0.5rem; }
    .search-page-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .search-input-wrap { position: relative; flex: 1 1 100%; display: flex; align-items: center; background: white; border: 1px solid var(--line); border-radius: 999px; padding: 0 0.75rem; min-height: 44px; }
    .search-input-wrap svg { width: 18px; height: 18px; color: var(--muted); margin-right: 0.5rem; }
    .search-input-wrap input[type="search"] { flex: 1; border: 0; background: transparent; padding: 0.5rem 0; font-size: 0.95rem; color: var(--ink); outline: none; }
    .search-input-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--ink); text-decoration: none; }
    .search-submit { display: none; }
    @media (min-width: 768px) { .search-submit { display: inline-flex; min-height: 44px; padding: 0.5rem 1.25rem; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; } }
    .filter-trigger { min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; display: none; align-items: center; gap: 0.35rem; }

    .search-suggestions { position: absolute; left: 0; right: 0; margin-top: 0.25rem; max-height: 70vh; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 6px 24px rgba(0,0,0,0.06); z-index: 6; }
    .search-suggestions[hidden] { display: none; }
    .suggestion-section { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
    .suggestion-section:last-child { border-bottom: 0; }
    .suggestion-section h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0 0.85rem; margin: 0 0 0.25rem; }
    .suggestion-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; color: var(--ink); text-decoration: none; }
    .suggestion-row[aria-selected="true"], .suggestion-row:hover { background: var(--line); }
    .suggestion-row .sub { color: var(--muted); font-size: 0.75rem; }

    .chip-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding: 0.25rem 0 0.5rem; list-style: none; margin: 0; scroll-snap-type: x proximity; }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip-row > li { scroll-snap-align: start; }
    .search-chip { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; min-height: 36px; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-size: 0.85rem; text-decoration: none; cursor: pointer; }

    .active-filters-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 0.25rem; }
    .active-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem 0.3rem 0.75rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 0.8rem; }
    .active-filter-chip a { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); text-decoration: none; }
    .link-button { background: transparent; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 0.8rem; text-decoration: underline; }

    .results-counter-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
    .results-count { margin: 0; font-size: 1rem; font-weight: 700; }
    .results-sort-note { margin: 0.2rem 0 0.75rem; color: var(--muted); font-size: 0.8rem; }

    .discovery-section { padding-top: 1rem; padding-bottom: 1rem; }
    .discovery-section + .discovery-section { border-top: 1px solid var(--line); }
    .discovery-title-row { display: flex; justify-content: space-between; align-items: baseline; }
    .discovery-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }

    .zero-results { padding-top: 1.5rem; padding-bottom: 0.5rem; }
    .zero-results-title { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 700; }
    .zero-results-sub { margin: 0 0 0.75rem; color: var(--muted); }

    .filter-sheet { position: fixed; inset: 0; background: white; display: none; flex-direction: column; z-index: 50; }
    .filter-sheet[hidden] { display: none; }
    #filter-sheet:target { display: flex; }
    .filter-sheet.is-open { display: flex; }
    .filter-sheet-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: white; z-index: 1; }
    .filter-sheet-header h2 { margin: 0; font-size: 1rem; }
    .filter-sheet-close { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--ink); text-decoration: none; }
    .filter-sheet-form { padding: 0.75rem 1rem 6rem; overflow: auto; flex: 1; }
    .filter-section { border: 0; padding: 0.75rem 0; margin: 0; border-top: 1px solid var(--line); }
    .filter-section:first-child { border-top: 0; }
    .filter-section legend { font-weight: 700; padding: 0 0 0.5rem; }
    .filter-row, .filter-radio { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; }
    .filter-toggle { display: flex; align-items: center; gap: 0.5rem; }
    .filter-price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .filter-price-inputs input { min-height: 40px; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; width: 100%; }
    .filter-sheet-footer { position: sticky; bottom: 0; padding: 0.75rem 1rem; background: white; border-top: 1px solid var(--line); }
    .filter-apply { width: 100%; min-height: 48px; background: var(--ink); color: var(--cream); border: 0; border-radius: 999px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }

    body.no-scroll { overflow: hidden; }

    @media (min-width: 768px) {
      .filter-trigger { display: inline-flex; }
      .filter-sheet { position: static; inset: auto; display: flex; width: 240px; height: auto; border-right: 1px solid var(--line); }
      /* desktop: rail layout — container adjustments handled in renderSearchPage wrapper */
    }

    @media (prefers-reduced-motion: reduce) {
      .filter-sheet, .filter-sheet * { transition: none !important; animation: none !important; }
    }

    /* Low stock progress bar and trust badges */
    .buy-box-low-stock-bar {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      margin: 0.75rem 0;
      position: relative;
    }
    .buy-box-low-stock-bar::before {
      content: "";
      height: 6px;
      background: var(--sand);
      border-radius: 3px;
      width: 100%;
      display: block;
    }
    .buy-box-low-stock-fill {
      height: 6px;
      background: var(--discount-red);
      border-radius: 3px;
      position: absolute;
      top: 0;
      left: 0;
      max-width: 100%;
    }
    .buy-box-low-stock-text {
      color: var(--discount-red);
      font-size: 0.85rem;
      font-weight: 700;
      display: block;
      margin-top: 0.25rem;
    }
    .buy-box-trust-badge {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px dashed var(--line);
    }
    @media (max-width: 480px) {
      .buy-box-trust-badge {
        grid-template-columns: 1fr;
      }
    }
    .trust-badge-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      background: var(--accent-soft);
      color: var(--accent-ink);
      font-size: 0.8rem;
      font-weight: 700;
    }
    .trust-badge-icon {
      width: 1.15rem;
      height: 1.15rem;
      flex-shrink: 0;
      stroke-width: 2.25;
    }
  
    
    .h-scroll-shell { position: relative; }
    .h-scroll-shell > .h-scroll-rail {
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 100%);
              mask-image: linear-gradient(to right, #000 0, #000 100%);
      transition: -webkit-mask-image 180ms ease, mask-image 180ms ease;
    }
    .h-scroll-shell.is-overflow-left > .h-scroll-rail {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 100%);
    }
    .h-scroll-shell.is-overflow-right > .h-scroll-rail {
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
              mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
    }
    .h-scroll-shell.is-overflow-left.is-overflow-right > .h-scroll-rail {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    }
    .h-scroll-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      background: var(--cream, #f7f4ea);
      color: var(--ink, #163638);
      border-radius: 999px;
      cursor: pointer;
      font-size: 1.2rem;
      line-height: 1;
      padding: 0 0 2px;
      box-shadow: 0 1px 4px rgba(22, 54, 56, 0.08);
      opacity: 0.92;
      transition: opacity 150ms ease, background 150ms ease, color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
      font-family: inherit;
    }
    .h-scroll-arrow:hover {
      opacity: 1;
      background: var(--ink, #163638);
      color: var(--cream, #f7f4ea);
      box-shadow: 0 4px 12px rgba(22, 54, 56, 0.18);
    }
    .h-scroll-arrow:active { transform: translateY(-50%) scale(0.94); }
    .h-scroll-arrow:focus-visible { outline: 2px solid var(--saffron, #f5c451); outline-offset: 2px; }
    .h-scroll-arrow--prev { left: 0.35rem; }
    .h-scroll-arrow--next { right: 0.35rem; }
    .h-scroll-arrow[hidden] { display: none; }
    @media (max-width: 540px) {
      .h-scroll-arrow { width: 30px; height: 30px; font-size: 1rem; }
      .h-scroll-shell.is-overflow-left > .h-scroll-rail {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 100%);
      }
      .h-scroll-shell.is-overflow-right > .h-scroll-rail {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
      }
      .h-scroll-shell.is-overflow-left.is-overflow-right > .h-scroll-rail {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
      }
    }
    @media (hover: none) and (pointer: coarse) {
      .h-scroll-arrow:hover { background: var(--cream, #f7f4ea); color: var(--ink, #163638); }
    }