*, *::before, *::after { box-sizing: border-box; }
  /* Boxed page. Width and gutter both come from tokens.css —
     flip --bl-page-max there to switch full-bleed ↔ boxed centred. */
  body {
    margin: 0 auto;
    background: var(--bl-white);
    padding: var(--bl-space-3) var(--bl-page-gutter);
    max-inline-size: var(--bl-page-max);
  }
  @media (max-width: 768px) { body { padding-block: var(--bl-space-2); } }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; margin: 0; padding: 0; }
  button { border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
  img { max-inline-size: 100%; display: block; }

  .wrap { max-inline-size:none; margin-inline:0; padding-inline:var(--bl-page-gutter); }

  .dot { inline-size:6px; block-size:6px; border-radius:var(--bl-radius-full); background:var(--bl-azure-500); display:inline-block; flex:none; }

  .eyebrow {
    font-size: var(--bl-text-eyebrow); line-height: var(--bl-leading-eyebrow);
    font-weight: var(--bl-weight-semibold); letter-spacing: var(--bl-tracking-eyebrow);
    text-transform: uppercase; color: var(--bl-content-tertiary);
    display: flex; align-items: center; gap: var(--bl-space-2);
  }
  :root[dir="rtl"] .eyebrow { letter-spacing: 0; }

  h1,h2,h3 { font-family: var(--bl-font-display); font-weight: var(--bl-weight-semibold); color: var(--bl-content-primary); margin: 0; }
  .lede { font-size: var(--bl-text-body-lg); line-height: var(--bl-leading-body-lg); color: var(--bl-content-secondary); margin: 0; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--bl-space-2);
    padding: var(--bl-space-4) var(--bl-space-8); min-block-size: 48px;
    border-radius: var(--bl-radius-md); font-size: var(--bl-text-body-sm);
    font-weight: var(--bl-weight-medium); font-family: var(--bl-font-ui);
    transition: background var(--bl-duration-fast) var(--bl-ease-standard), border-color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .btn-primary { background: var(--bl-btn-primary-bg); color: var(--bl-btn-primary-fg); }
  .btn-primary:hover { background: var(--bl-btn-primary-bg-hover); }
  .btn-secondary { border: 1px solid var(--bl-border-default); color: var(--bl-content-primary); }
  .btn-secondary:hover { background: var(--bl-surface-raised); }
  .link-arrow { font-size: var(--bl-text-body-sm); font-weight: var(--bl-weight-medium); color: var(--bl-content-link); display:inline-flex; gap: var(--bl-space-2); }
  .link-arrow:hover { color: var(--bl-content-link-hover); }
  :root[dir="rtl"] .link-arrow .arw { transform: scaleX(-1); }

  /* Placeholders remain only where no real asset exists (lifestyle, social). */
  .ph {
    background: linear-gradient(150deg, var(--bl-slate-100), var(--bl-slate-200));
    display: grid; place-items: center; position: relative; overflow: hidden;
  }
  .ph::after {
    content: attr(data-ph); position: absolute;
    font-size: var(--bl-text-caption); color: var(--bl-slate-500);
    letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--bl-font-ui);
  }
  /* Real product photography, pulled from the live catalogue. */
  .shot { inline-size: 100%; block-size: 100%; object-fit: contain; background: var(--bl-white); }
  .card-media .shot { padding: var(--bl-space-3); }
  .feature .shot { background: var(--bl-slate-800); border-radius: var(--bl-radius-xl); aspect-ratio: 1; }

  /* ═════ UTILITY BAR ═════ */
  .utility { background: var(--bl-azure-50); color: var(--bl-azure-900); font-size: var(--bl-text-label); border-radius: var(--bl-radius-sm); }
  .utility .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--bl-space-4); block-size:38px; }
  .utility-trust { display:flex; align-items:center; gap:var(--bl-space-2); }
  .utility-controls { display:flex; align-items:center; gap:var(--bl-space-1); }
  .switcher { display:inline-flex; align-items:center; gap:var(--bl-space-2); padding:var(--bl-space-1) var(--bl-space-2); border-radius:var(--bl-radius-sm); font-weight:var(--bl-weight-medium); min-block-size:28px; }
  .switcher:hover { background: var(--bl-azure-100); }
  .switcher-divider { inline-size:1px; block-size:16px; background:var(--bl-azure-200); }

  /* Market switcher popover */
  .mkt-wrap { position:relative; }
  .mkt-menu {
    position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0;
    min-inline-size:280px; z-index:var(--bl-z-overlay);
    background:var(--bl-surface-page); border:1px solid var(--bl-border-subtle);
    border-radius:var(--bl-radius-lg); box-shadow:var(--bl-shadow-lg);
    padding:var(--bl-space-2);
    opacity:0; visibility:hidden; translate:0 -6px;
    transition:opacity var(--bl-duration-fast) var(--bl-ease-standard),
               translate var(--bl-duration-fast) var(--bl-ease-standard), visibility var(--bl-duration-fast);
  }
  .mkt-menu.is-open { opacity:1; visibility:visible; translate:0 0; }
  .mkt-head {
    margin:0; padding:var(--bl-space-3) var(--bl-space-3) var(--bl-space-2);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-eyebrow);
    letter-spacing:var(--bl-tracking-eyebrow); text-transform:uppercase;
    font-weight:var(--bl-weight-semibold); color:var(--bl-content-tertiary);
  }
  :root[dir="rtl"] .mkt-head { letter-spacing:0; }
  .mkt-opt {
    display:flex; align-items:center; gap:var(--bl-space-3); inline-size:100%;
    padding:var(--bl-space-3); border-radius:var(--bl-radius-md);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    color:var(--bl-content-primary); text-align:start; min-block-size:48px;
    transition:background var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .mkt-opt:hover { background:var(--bl-surface-raised); }
  .mkt-opt .mkt-cur {
    margin-inline-start:auto; color:var(--bl-content-tertiary);
    font-variant-numeric:tabular-nums; font-size:var(--bl-text-caption);
  }
  .mkt-opt.is-current { background:var(--bl-interactive-bg-subtle); }
  .mkt-opt.is-current .mkt-cur { color:var(--bl-azure-700); font-weight:var(--bl-weight-semibold); }
  .mkt-check { inline-size:16px; color:var(--bl-azure-600); opacity:0; flex:none; }
  .mkt-opt.is-current .mkt-check { opacity:1; }

  /* Market-change notice — switching market is never silent */
  .toast {
    position:fixed; inset-block-end:var(--bl-space-20); inset-inline-start:50%;
    translate:-50% 12px; z-index:var(--bl-z-toast);
    background:var(--bl-slate-900); color:var(--bl-white);
    padding:var(--bl-space-4) var(--bl-space-6); border-radius:var(--bl-radius-md);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    box-shadow:var(--bl-shadow-xl); display:flex; align-items:center; gap:var(--bl-space-3);
    opacity:0; visibility:hidden;
    transition:opacity var(--bl-duration-base) var(--bl-ease-standard),
               translate var(--bl-duration-base) var(--bl-ease-standard), visibility var(--bl-duration-base);
  }
  .toast.is-open { opacity:1; visibility:visible; translate:-50% 0; }
  @media (max-width:768px){ .utility .wrap{block-size:auto;padding-block:var(--bl-space-2)} .utility-trust{display:none} .utility-controls{inline-size:100%;justify-content:center} }

  /* ═════ HEADER — floating glass bar ═════ */
  .header {
    position:sticky; inset-block-start:var(--bl-space-3); z-index:var(--bl-z-header);
    margin-block-start:var(--bl-space-3);
    border-radius:var(--bl-radius-lg);
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 1px 2px rgba(39,41,44,.04);
    will-change:translate;
    transition:box-shadow var(--bl-duration-base) var(--bl-ease-standard),
               background var(--bl-duration-base) var(--bl-ease-standard),
               opacity 300ms var(--bl-ease-standard),
               translate 460ms cubic-bezier(0,.55,.45,1);
  }
  /* Hidden while scrolling down and while idle; revealed on scroll up.
     It slides up out of the way and comes back down — the movement should
     be visible, so the fade is matched to the travel rather than snapping
     out ahead of it. */
  .header.is-hidden {
    translate:0 calc(-100% - var(--bl-space-6));
    opacity:0;
    pointer-events:none;
    transition:opacity 300ms var(--bl-ease-standard),
               translate 420ms cubic-bezier(.55,0,1,.45);
  }
  .header.is-stuck {
    background:rgba(255,255,255,.82);
    box-shadow:0 8px 28px rgba(39,41,44,.10);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header { background:rgba(255,255,255,.96); }
  }
  @media (max-width: 768px) { .header { inset-block-start:var(--bl-space-2); margin-block-start:var(--bl-space-2); } }
  .header-bar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--bl-space-8); block-size:92px; transition: block-size var(--bl-duration-base) var(--bl-ease-standard); }
  .header.is-stuck .header-bar { block-size:68px; }

  .logo { display:flex; flex-direction:column; gap:2px; line-height:1; }
  .logo-mark { font-family:var(--bl-font-sans); font-weight:var(--bl-weight-semibold); font-size:1.5rem; letter-spacing:-0.01em; color:var(--bl-slate-600); display:flex; align-items:flex-start; gap:1px; }
  .logo-sub { font-size:0.5625rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--bl-slate-500); font-weight:var(--bl-weight-medium); }
  :root[dir="rtl"] .logo-sub { letter-spacing:0; }

  /* Nav items fill the bar height so the label sits on the optical centre;
     the active dot is taken out of flow so it can't push the text up. */
  .nav { display:flex; justify-content:center; align-self:stretch; gap:var(--bl-space-4); }
  .nav-item { position:relative; display:flex; }
  .nav-link {
    position:relative; display:flex; align-items:center; justify-content:center;
    block-size:100%; padding-inline:var(--bl-space-4);
    font-size:var(--bl-text-heading-sm); font-weight:var(--bl-weight-semibold);
    color:var(--bl-content-secondary); white-space:nowrap; line-height:1;
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .nav-link .dot {
    position:absolute; inset-block-end:22%; inset-inline-start:50%;
    translate:-50% 0;
    opacity:0; transition:opacity var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .nav-link:hover, .nav-item.is-open .nav-link { color:var(--bl-content-primary); }
  .nav-link[aria-current="page"] { color:var(--bl-content-primary); }
  /* The dot marks the item you are on, and follows the pointer on hover —
     on every nav item, not only the two that open a mega panel. */
  .nav-link:hover .dot,
  .nav-link:focus-visible .dot,
  .nav-link[aria-current="page"] .dot,
  .nav-item.is-open .nav-link .dot { opacity:1; }

  /* ═════ MEGA PANEL — solid, not translucent ═════ */
  .mega {
    position:absolute; inset-inline:0; inset-block-start:calc(100% + var(--bl-space-2));
    border-radius:var(--bl-radius-lg);
    background:var(--bl-surface-page);
    border:1px solid var(--bl-border-subtle);
    box-shadow:0 18px 48px rgba(39,41,44,.14);
    opacity:0; visibility:hidden; translate:0 -10px;
    transition:opacity 320ms cubic-bezier(.22,1,.36,1),
               translate 420ms cubic-bezier(.16,1,.3,1),
               visibility 420ms;
  }
  .mega.is-open { opacity:1; visibility:visible; translate:0 0; }
  .mega .wrap { padding-block:var(--bl-space-8) var(--bl-space-10); }

  .mega-tabs { display:flex; justify-content:center; gap:var(--bl-space-10); margin-block-end:var(--bl-space-8); flex-wrap:wrap; }
  .mega-tab {
    position:relative; padding-block:var(--bl-space-2);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    font-weight:var(--bl-weight-semibold); letter-spacing:var(--bl-tracking-eyebrow);
    text-transform:uppercase; color:var(--bl-content-tertiary);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
    min-block-size:auto; min-inline-size:auto;
  }
  :root[dir="rtl"] .mega-tab { letter-spacing:0; }
  .mega-tab:hover { color:var(--bl-content-secondary); }
  .mega-tab.is-active { color:var(--bl-content-primary); }
  .mega-tab.is-active::after {
    content:""; position:absolute; inset-inline:0; inset-block-end:0;
    block-size:2px; background:var(--bl-azure-600); border-radius:var(--bl-radius-full);
  }

  .mega-panel { display:none; }
  .mega-panel.is-active { display:block; }

  /* Cards ride in like a slider when the tab changes.
     --dir is the travel direction, --i the stagger index. */
  @keyframes megaCardIn {
    from { opacity:0; translate:calc(var(--dir, 1) * 36px) 0; }
    to   { opacity:1; translate:0 0; }
  }
  .mega-panel.is-active .mega-card {
    animation:megaCardIn 480ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 55ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .mega-panel.is-active .mega-card { animation:none; }
  }
  /* Centred, not stretched — works with one card or five. */
  :where(.mega-grid) { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--bl-space-5); }
  :where(.mega-card) { flex:0 1 260px; max-inline-size:300px; }
  @media (min-width:1700px){ .mega-card{ flex-basis:280px; max-inline-size:320px; } }
  @media (max-width:640px){ .mega-card{ flex-basis:calc(50% - var(--bl-space-3)); } }

  .mega-card {
    background:var(--bl-surface-page); border:1px solid var(--bl-border-subtle);
    border-radius:var(--bl-radius-md); overflow:hidden;
    transition:border-color var(--bl-duration-fast) var(--bl-ease-standard),
               box-shadow var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .mega-card:hover { border-color:var(--bl-border-default); box-shadow:var(--bl-shadow-md); }
  .mega-media { position:relative; aspect-ratio:1; background:var(--bl-surface-raised); }
  .mega-media img { inline-size:100%; block-size:100%; object-fit:contain; padding:var(--bl-space-5); }
  .mega-tag {
    position:absolute; inset-block-start:var(--bl-space-3); inset-inline-start:var(--bl-space-3);
    background:var(--bl-slate-900); color:var(--bl-white);
    font-family:var(--bl-font-ui); font-size:10px; font-weight:var(--bl-weight-semibold);
    padding:3px var(--bl-space-2); border-radius:var(--bl-radius-full); letter-spacing:.04em;
  }
  :root[dir="rtl"] .mega-tag { letter-spacing:0; }
  .mega-body { padding:var(--bl-space-4); }
  .mega-name {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-label);
    font-weight:var(--bl-weight-semibold); letter-spacing:.06em; text-transform:uppercase;
    color:var(--bl-content-primary); margin:0 0 var(--bl-space-1);
  }
  :root[dir="rtl"] .mega-name { letter-spacing:0; text-transform:none; font-size:var(--bl-text-body-sm); }
  .mega-desc { margin:0; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .mega-price { margin-block-start:var(--bl-space-2); font-size:var(--bl-text-body-sm); }
  .mega-price .price-now { font-size:var(--bl-text-body-sm); }
  .mega-tag.tag-save { background:var(--bl-success-600); }
  .mega-foot { display:flex; justify-content:center; margin-block-start:var(--bl-space-8); }

  .actions { display:flex; align-items:center; gap:var(--bl-space-1); justify-self:end; }
  .icon-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; inline-size:44px; block-size:44px; border-radius:var(--bl-radius-md); color:var(--bl-content-secondary); transition:background var(--bl-duration-fast) var(--bl-ease-standard), color var(--bl-duration-fast) var(--bl-ease-standard); }
  .icon-btn:hover { background:var(--bl-surface-raised); color:var(--bl-content-primary); }
  .cart-count { position:absolute; inset-block-start:6px; inset-inline-end:6px; min-inline-size:17px; block-size:17px; padding-inline:4px; border-radius:var(--bl-radius-full); background:var(--bl-azure-600); color:var(--bl-white); font-size:10px; font-weight:var(--bl-weight-semibold); display:grid; place-items:center; font-variant-numeric:tabular-nums; }
  .burger { display:none; }
  @media (max-width:1024px){ .nav{display:none} .header-bar{block-size:60px} .burger{display:inline-flex} .logo{grid-column:2;justify-self:center;align-items:center} .actions .hide-mobile{display:none} }

  /* ═════ OVERLAYS ═════ */
  .search-overlay { position:fixed; inset:0; z-index:var(--bl-z-overlay); background:rgba(39,41,44,.45); opacity:0; visibility:hidden; transition:opacity var(--bl-duration-base) var(--bl-ease-standard), visibility var(--bl-duration-base); }
  .search-overlay.is-open { opacity:1; visibility:visible; }
  .search-panel { background:var(--bl-surface-page); padding:var(--bl-space-8) 0 var(--bl-space-10); translate:0 -100%; transition:translate var(--bl-duration-slow) var(--bl-ease-enter); }
  .search-overlay.is-open .search-panel { translate:0 0; }
  .search-field { display:flex; align-items:center; gap:var(--bl-space-3); border-block-end:2px solid var(--bl-border-strong); padding-block-end:var(--bl-space-3); }
  .search-field input { flex:1; border:0; outline:0; background:none; font-family:var(--bl-font-ui); font-size:var(--bl-text-heading-md); color:var(--bl-content-primary); }
  /* type="search" draws its own clear button in WebKit, which sat next to
     ours — two crosses, one field. Ours stays, because it closes the whole
     overlay rather than just emptying the box. */
  .search-field input::-webkit-search-cancel-button,
  .search-field input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
  /* Live search results — the catalogue is small enough to answer a query
     in the overlay itself. Same markup and behaviour on every page. */
  .search-results { margin-block-start:var(--bl-space-6); }
  .search-hit {
    display:grid; grid-template-columns:56px 1fr auto; gap:var(--bl-space-4);
    align-items:center; padding-block:var(--bl-space-3);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .search-hit:first-child { border-block-start:1px solid var(--bl-border-subtle); }
  .search-hit:hover { background:var(--bl-surface-raised); }
  .search-hit img { inline-size:56px; block-size:56px; object-fit:cover; border-radius:var(--bl-radius-sm); background:var(--bl-slate-50); }
  .search-hit h4 { font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium); line-height:1.4; }
  :root[dir="rtl"] .search-hit h4 { font-family:var(--bl-font-ui-ar); }
  .search-hit .cat { font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); }
  .search-hit mark { background:var(--bl-azure-100); color:inherit; border-radius:2px; }
  .search-foot { margin-block-start:var(--bl-space-5); }
  .search-empty { padding-block:var(--bl-space-10); text-align:center; color:var(--bl-content-secondary); font-size:var(--bl-text-body-sm); }

  .search-terms { display:flex; flex-wrap:wrap; gap:var(--bl-space-2); margin-block-start:var(--bl-space-3); }
  /* Popular suggestions carry the pack shot: recognising the box is faster
     than reading the name, and the names differ by market anyway. */
  /* Four square cards rather than pills: the pack shot is the fastest way
     to recognise a product, and a round crop cuts the box corners off. */
  .search-terms { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bl-space-4); margin-block-start:var(--bl-space-4); }
  @media (max-width:640px){ .search-terms { grid-template-columns:1fr 1fr; gap:var(--bl-space-3); } }
  .search-terms a {
    display:flex; flex-direction:column; gap:var(--bl-space-3);
    padding:var(--bl-space-3);
    border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-md);
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.4;
    transition:border-color var(--bl-duration-fast) var(--bl-ease-standard),
               color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .search-terms a:hover { border-color:var(--bl-border-default); color:var(--bl-content-primary); }
  .search-terms img {
    inline-size:100%; aspect-ratio:1; object-fit:cover;
    border-radius:var(--bl-radius-sm); background:var(--bl-slate-50);
  }
  .search-terms span {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* The suggestion cards and the result rows open a product, so the pointer
     says so — the same follow-cursor disc used on the product grid. */
  @media (hover:hover){
    .search-terms a, .search-hit { cursor:none; }
  }
  .search-cursor {
    position:fixed; z-index:var(--bl-z-modal); inset-block-start:0; inset-inline-start:0;
    inline-size:84px; block-size:84px; border-radius:var(--bl-radius-full);
    display:grid; place-items:center; pointer-events:none;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.8);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    font-weight:var(--bl-weight-medium); color:var(--bl-slate-800);
    translate:calc(var(--x, 0px) - 50%) calc(var(--y, 0px) - 50%);
    opacity:0; scale:.6;
    transition:opacity 200ms var(--bl-ease-standard), scale 280ms var(--bl-ease-standard);
  }
  :root[dir="rtl"] .search-cursor { font-family:var(--bl-font-ui-ar); }
  .search-cursor.is-on { opacity:1; scale:1; }
  @media (hover:none){ .search-cursor { display:none; } }
  @media (prefers-reduced-motion: reduce){ .search-cursor { transition:none; } }

  .drawer-scrim { position:fixed; inset:0; z-index:calc(var(--bl-z-drawer) - 1); background:rgba(39,41,44,.45); opacity:0; visibility:hidden; transition:opacity var(--bl-duration-base) var(--bl-ease-standard), visibility var(--bl-duration-base); }
  .drawer-scrim.is-open { opacity:1; visibility:visible; }
  .drawer { position:fixed; inset-block:0; inset-inline-start:0; z-index:var(--bl-z-drawer); inline-size:min(88vw,360px); background:var(--bl-surface-page); display:flex; flex-direction:column; translate:-100% 0; transition:translate var(--bl-duration-slow) var(--bl-ease-enter); }
  :root[dir="rtl"] .drawer { translate:100% 0; }
  .drawer.is-open, :root[dir="rtl"] .drawer.is-open { translate:0 0; }
  .drawer-head { display:flex; align-items:center; justify-content:space-between; padding:var(--bl-space-4); border-block-end:1px solid var(--bl-border-subtle); }
  .drawer-body { flex:1; overflow-y:auto; padding:var(--bl-space-2) var(--bl-space-4); }
  .drawer-body a { display:flex; align-items:center; gap:var(--bl-space-3); padding:var(--bl-space-4) var(--bl-space-2); font-size:var(--bl-text-body-lg); font-weight:var(--bl-weight-medium); border-block-end:1px solid var(--bl-border-subtle); }
  .drawer-foot { padding:var(--bl-space-4); border-block-start:1px solid var(--bl-border-subtle); background:var(--bl-surface-raised); }

  /* ═════ HERO — three concerns. The active frame takes the width; hovering
     another hands the width over. Photography spec:
     /docs/design/photography-brief.md ═════ */
  .hero {
    display:flex; gap:var(--bl-space-3);
    block-size:min(84vh, 860px);
    margin-block-start:var(--bl-space-3);
  }

  .hero-tile {
    position:relative; display:block; overflow:hidden;
    flex:1 1 0; min-inline-size:250px;
    border-radius:var(--bl-radius-lg);
    background:var(--bl-slate-100);
    transition:flex-grow 760ms cubic-bezier(.16,1,.3,1);
  }
  .hero-tile:first-child { flex-grow:3.4; }
  /* Both rules must be scoped to .hero:hover, otherwise the row-level rule
     out-specifies the tile-level one and every tile ends up equal. */
  .hero:hover .hero-tile { flex-grow:1; }
  .hero:hover .hero-tile:hover,
  .hero .hero-tile:focus-visible { flex-grow:3.4; }
  @media (prefers-reduced-motion: reduce){ .hero-tile { transition:none; } }

  .hero-tile img {
    position:absolute; inset:0; inline-size:100%; block-size:100%;
    object-fit:cover;
  }
  .hero-tile.pack img { object-fit:contain; padding:var(--bl-space-10) var(--bl-space-8) var(--bl-space-20); }
  .hero-tile.tint-a { background:linear-gradient(160deg, #DCE6EF, #C6D3E0); }
  .hero-tile.tint-b { background:linear-gradient(160deg, #E8EEF2, #D3DDE4); }

  /* Legibility scrim — only as strong as the label needs. */
  .hero-tile::after {
    content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:48%;
    background:linear-gradient(to top, rgba(24,25,27,.62), rgba(24,25,27,0));
    pointer-events:none;
  }
  .hero-foot {
    position:absolute; z-index:1;
    inset-block-end:var(--bl-space-8); inset-inline:var(--bl-space-8);
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--bl-space-5);
  }
  .hero-label {
    font-family:var(--bl-font-display);
    font-size:clamp(1.05rem, 1.4vw, 1.5rem); line-height:1.2;
    color:var(--bl-white); white-space:nowrap;
    transition:font-size 600ms var(--bl-ease-standard);
  }

  /* The call to action belongs to the active frame and rises into place once
     the frame has finished opening. It is the design-system button — only
     the entrance and the on-image colour treatment live here. */
  .hero-cta {
    background:var(--bl-white); color:var(--bl-slate-900);
    border:1px solid var(--bl-white);
    box-shadow:0 4px 16px rgba(24,25,27,.18);
    opacity:0; translate:0 18px; pointer-events:none;
    transition:opacity 340ms var(--bl-ease-standard),
               translate 560ms cubic-bezier(.16,1,.3,1),
               background var(--bl-duration-fast) var(--bl-ease-standard),
               color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .hero-tile:hover .hero-cta:hover,
  .hero-cta:focus-visible {
    background:var(--bl-slate-900); color:var(--bl-white);
    border-color:var(--bl-slate-900);
  }
  .hero-cta .arw { transition:translate var(--bl-duration-fast) var(--bl-ease-standard); }
  .hero-tile:hover .hero-cta .arw { translate:4px 0; }
  :root[dir="rtl"] .hero-cta .arw { transform:scaleX(-1); }
  :root[dir="rtl"] .hero-tile:hover .hero-cta .arw { translate:-4px 0; }

  /* Active by default: the first frame. */
  .hero-tile:first-child .hero-label { font-size:clamp(1.5rem, 2.4vw, 2.25rem); }
  .hero-tile:first-child .hero-cta { opacity:1; translate:0 0; transition-delay:220ms; }

  /* While the row is hovered, only the hovered frame is active. */
  .hero:hover .hero-tile .hero-label { font-size:clamp(1.05rem, 1.4vw, 1.5rem); }
  .hero:hover .hero-tile .hero-cta { opacity:0; translate:0 18px; transition-delay:0ms; }
  .hero:hover .hero-tile:hover .hero-label,
  .hero .hero-tile:focus-visible .hero-label { font-size:clamp(1.5rem, 2.4vw, 2.25rem); }
  .hero:hover .hero-tile:hover .hero-cta,
  .hero .hero-tile:focus-visible .hero-cta { opacity:1; translate:0 0; transition-delay:220ms; }

  @media (prefers-reduced-motion: reduce){
    .hero-label, .hero-cta { transition:none; }
  }

  @media (max-width:900px){
    .hero { flex-direction:column; block-size:auto; }
    .hero-tile { flex:none; block-size:44vh; min-inline-size:0; }
    .hero-tile:first-child { block-size:56vh; }
    .hero-foot { inset-inline:var(--bl-space-5); inset-block-end:var(--bl-space-5); gap:var(--bl-space-4); }
    .hero-label, .hero-tile:first-child .hero-label { font-size:var(--bl-text-heading-sm); }
    .hero-cta { opacity:1; translate:0 0; }
  }

  /* ═════ HERO A — single photograph, one call to action. Currently active.
     Variant B (the three-concern accordion) is kept above; see
     /docs/design/hero-variants.md ═════ */
  /* Height is whatever is left of the viewport below the header, so the
     bottom edge lands exactly on the fold. --hero-top is measured in JS. */
  .hero-single {
    position:relative; display:grid; align-items:end;
    block-size:calc(100dvh - var(--hero-top, 190px) - var(--bl-space-3));
    min-block-size:420px; overflow:hidden;
    margin-block-start:var(--bl-space-3);
    border-radius:var(--bl-radius-lg);
    background:var(--bl-slate-100);
  }
  .hero-single-img {
    position:absolute; inset:0; inline-size:100%; block-size:100%;
    object-fit:cover; object-position:68% center;
  }
  /* Mirrored in RTL so the subject moves left and the button stays clear. */
  :root[dir="rtl"] .hero-single-img { transform:scaleX(-1); object-position:32% center; }
  .hero-single-inner { position:relative; z-index:1; padding-block-end:var(--bl-space-12); }
  .hero-single-btn { border-radius:var(--bl-radius-full); padding-inline:var(--bl-space-12); box-shadow:0 6px 20px rgba(24,25,27,.18); }
  @media (max-width:900px){
    .hero-single { min-block-size:340px; }
    .hero-single-img { object-position:64% center; }
    .hero-single-inner { padding-block-end:var(--bl-space-8); }
    .hero-single-btn { inline-size:100%; }
  }

  /* ═════ SECTION SHELL ═════ */
  .section { padding-block: var(--bl-space-20); }
  .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--bl-space-6); margin-block-end:var(--bl-space-10); flex-wrap:wrap; }
  .section-head h2 { font-size:var(--bl-text-heading-lg); line-height:var(--bl-leading-heading-lg); margin-block-start:var(--bl-space-3); max-inline-size:24ch; }
  .section-head .lede { max-inline-size:52ch; margin-block-start:var(--bl-space-3); }

  /* ═════ CATEGORY CARDS — one hero product per concern ═════
     The big word is the category link. The product area is the product
     link. Two destinations, no extra chrome. */
  /* Layout bases are wrapped in :where() so they carry zero specificity.
     Any responsive override — written plainly — then wins regardless of how
     many classes the variant has or where it sits in the file. */
  :where(.concerns) { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bl-space-5); }
  @media (max-width:1024px){ .concerns{grid-template-columns:repeat(2,1fr)} }

  /* On phones the three cards become a swipe rail with dots — stacked they
     would be 1800px of scrolling for one section. */
  .concern-dots { display:none; }
  @media (max-width:768px){
    .concerns {
      display:flex; gap:var(--bl-space-4);
      overflow-x:auto; scroll-snap-type:x mandatory;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
      margin-inline:calc(var(--bl-page-gutter) * -1);
      padding-inline:var(--bl-page-gutter);
    }
    .concerns::-webkit-scrollbar { display:none; }
    .ccard { flex:0 0 84%; scroll-snap-align:center; min-block-size:520px; }

    /* A thin progress bar reads the position without taking the space a
       row of dots would. It mirrors the native scroll; it is not a control. */
    .concern-dots {
      display:block; position:relative;
      inline-size:min(200px, 46%); block-size:3px;
      margin:var(--bl-space-6) auto 0;
      border-radius:var(--bl-radius-full);
      background:var(--bl-slate-200);
      overflow:hidden;
    }
    .concern-dots span {
      position:absolute; inset-block:0; inset-inline-start:0;
      border-radius:var(--bl-radius-full);
      background:var(--bl-slate-900);
      transition:translate 160ms linear;
    }
  }

  :where(.ccard) {
    position:relative; overflow:hidden;
    border-radius:var(--bl-radius-lg);
    background:var(--bl-surface-raised);
    display:flex; flex-direction:column;
    min-block-size:600px;
  }
  @media (hover:hover){ .ccard { cursor:none; } }

  /* The category word — a real link. Brand face, display sizes only. */
  .ccard-word {
    position:absolute; inset-block-start:var(--bl-space-4); inset-inline-start:var(--bl-space-6);
    z-index:3; display:flex; align-items:baseline; gap:var(--bl-space-3);
    font-family:var(--bl-font-brand);
    font-weight:700;
    font-size:clamp(2.75rem, 4.6vw, 4.5rem); line-height:.95;
    letter-spacing:-0.035em; color:var(--bl-slate-600);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  :root[dir="rtl"] .ccard-word { letter-spacing:0; font-size:clamp(2.25rem, 3.8vw, 3.75rem); }
  .ccard-word:hover { color:var(--bl-slate-900); }
  .ccard-viewall {
    font-size:var(--bl-text-caption); font-weight:var(--bl-weight-semibold);
    letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;
    color:var(--bl-azure-700); background:var(--bl-azure-50);
    padding:5px var(--bl-space-3); border-radius:var(--bl-radius-full);
    opacity:0; translate:-8px 0;
    transition:opacity var(--bl-duration-base) var(--bl-ease-standard),
               translate var(--bl-duration-base) var(--bl-ease-standard);
  }
  :root[dir="rtl"] .ccard-viewall { letter-spacing:0; translate:8px 0; }
  .ccard:hover .ccard-viewall,
  .ccard-word:focus-visible .ccard-viewall { opacity:1; translate:0 0; }

  /* Product area — two stacked images, cross-faded on hover */
  .ccard-media { position:relative; flex:1; min-block-size:0; }
  .ccard-media img {
    position:absolute; inset:0; inline-size:100%; block-size:100%;
    object-fit:contain; padding:16% var(--bl-space-3) var(--bl-space-2);
    transition:opacity 420ms var(--bl-ease-standard), scale 700ms var(--bl-ease-standard);
  }
  .ccard-media .img-b { opacity:0; }
  .ccard:hover .img-a { opacity:0; scale:1.04; }
  .ccard:hover .img-b { opacity:1; scale:1.04; }

  /* Follow cursor */
  .ccard-cursor {
    position:absolute; z-index:4; inset-block-start:0; inset-inline-start:0;
    inline-size:96px; block-size:96px; border-radius:var(--bl-radius-full);
    display:grid; place-items:center; pointer-events:none;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.8);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    font-weight:var(--bl-weight-medium); color:var(--bl-slate-800);
    translate:calc(var(--x, 0px) - 50%) calc(var(--y, 0px) - 50%);
    opacity:0; scale:.6;
    transition:opacity 220ms var(--bl-ease-standard), scale 320ms var(--bl-ease-standard);
  }
  .ccard:hover .ccard-cursor { opacity:1; scale:1; }
  .ccard-cursor span { position:absolute; transition:opacity 180ms var(--bl-ease-standard); }
  .ccard-cursor .cur-b { opacity:0; }
  .ccard.on-word .ccard-cursor { inline-size:112px; block-size:112px; }
  .ccard.on-word .cur-a { opacity:0; }
  .ccard.on-word .cur-b { opacity:1; }
  @media (hover:none){ .ccard-cursor { display:none; } }

  /* Footer info — swaps on hover */
  .ccard-foot {
    position:relative; z-index:2; padding:var(--bl-space-5) var(--bl-space-6) var(--bl-space-6);
  }
  .ccard-meta {
    display:flex; align-items:center; gap:var(--bl-space-2);
    font-size:var(--bl-text-caption); color:var(--bl-content-tertiary);
    margin-block-end:var(--bl-space-2);
  }
  .ccard-line { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bl-space-4); }
  .ccard-name {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md);
    font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary); margin:0;
  }
  .ccard-price { font-variant-numeric:tabular-nums; }
  .ccard-price .price-now { font-size:var(--bl-text-body-md); }
  .ccard-swap { position:relative; block-size:1.5em; margin-block-start:var(--bl-space-1); overflow:hidden; }
  .ccard-swap span {
    position:absolute; inset-inline:0; inset-block-start:0;
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
    transition:opacity 260ms var(--bl-ease-standard), translate 320ms var(--bl-ease-standard);
  }
  .ccard-swap .s-rest { opacity:1; translate:0 0; }
  .ccard-swap .s-hover { opacity:0; translate:0 100%; color:var(--bl-content-link); font-weight:var(--bl-weight-medium); }
  .ccard:hover .s-rest { opacity:0; translate:0 -100%; }
  .ccard:hover .s-hover { opacity:1; translate:0 0; }

  /* ═════ RANGE SECTION — one category, its hero shot, its products ═════ */
  .range-head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--bl-space-8); flex-wrap:wrap; margin-block-end:var(--bl-space-10);
  }
  .range-name {
    font-family:var(--bl-font-brand); font-weight:700;
    font-size:clamp(1.75rem, 2.8vw, 2.75rem); line-height:1;
    letter-spacing:-0.03em; text-transform:uppercase;
    color:var(--bl-content-primary); margin:0 0 var(--bl-space-3);
  }
  :root[dir="rtl"] .range-name { letter-spacing:0; text-transform:none; }
  .range-head .lede { max-inline-size:48ch; margin:0; }

  /* View all — the last row of the list, where the reading path ends. */
  .range-viewall {
    display:flex; align-items:center; gap:var(--bl-space-3);
    padding-block:var(--bl-space-5);
    border-block-start:1px solid var(--bl-border-subtle);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md);
    font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .range-viewall:hover { color:var(--bl-content-link); }
  .range-viewall .arw {
    font-size:var(--bl-text-heading-sm);
    transition:translate var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .range-viewall:hover .arw { translate:4px 0; }
  :root[dir="rtl"] .range-viewall .arw { transform:scaleX(-1); }
  :root[dir="rtl"] .range-viewall:hover .arw { translate:-4px 0; }

  :where(.range-grid) { display:grid; grid-template-columns:1.15fr 1fr; gap:var(--bl-space-16); align-items:stretch; }
  /* Mirrored: shot on the trailing side, list on the leading side. */
  :where(.range-grid.mirror) { grid-template-columns:1fr 1.15fr; }
  :where(.range-grid.mirror) .range-lead { order:2; }
  @media (max-width:1024px){
    .range-grid { grid-template-columns:1fr; gap:var(--bl-space-10); }
    .range-grid.mirror .range-lead { order:0; }
    /* Stacked, the shot sits above the products — keep it short enough that
       the first product is still on screen. */
    .range-hero img { min-block-size:0; block-size:240px; }
  }

  /* Left column stretches to match the list. The shot is not a link. */
  .range-lead { display:flex; flex-direction:column; }
  .range-hero {
    display:block; flex:1; min-block-size:0;
    border-radius:var(--bl-radius-lg); overflow:hidden;
  }
  :where(.range-hero) img {
    inline-size:100%; block-size:100%; min-block-size:420px;
    object-fit:cover;
  }
  .range-hero-cap { margin:var(--bl-space-5) 0 0; }
  .range-hero-cap .card-cat { display:block; margin-block-end:var(--bl-space-2); }
  .range-hero-cap h3 {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-heading-sm);
    font-weight:var(--bl-weight-semibold); margin:0;
  }

  /* Natural spacing — the shot stretches to the list, not the other way round. */
  .range-list { display:flex; flex-direction:column; }
  :where(.range-item) {
    display:grid; grid-template-columns:140px 1fr; gap:var(--bl-space-6);
    align-items:center; padding-block:var(--bl-space-5);
    border-block-start:1px solid var(--bl-border-subtle);
  }
  .range-item:first-child { border-block-start:0; padding-block-start:0; }
  .range-thumb {
    position:relative;
    aspect-ratio:1; border-radius:var(--bl-radius-md); overflow:hidden;
  }
  @media (hover:hover){ .range-thumb { cursor:none; } }
  .range-thumb .ccard-cursor {
    inline-size:64px; block-size:64px;
    font-size:var(--bl-text-caption);
  }
  .range-thumb:hover .ccard-cursor { opacity:1; scale:1; }
  .range-thumb img { inline-size:100%; block-size:100%; object-fit:cover; transition:scale 500ms var(--bl-ease-standard); }
  .range-item:hover .range-thumb img { scale:1.06; }
  .range-item h3 {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-lg);
    font-weight:var(--bl-weight-semibold); margin:var(--bl-space-2) 0 var(--bl-space-2);
    color:var(--bl-content-primary); line-height:1.3;
  }
  .range-item:hover h3 { color:var(--bl-content-link); }
  .range-spec { margin:0 0 var(--bl-space-2); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  /* Ratings slot — rendered only when review data exists. */
  .range-rating { display:flex; align-items:center; gap:var(--bl-space-2); margin-block-end:var(--bl-space-2); }
  .range-rating:empty { display:none; }
  .range-stars { display:inline-flex; gap:1px; color:var(--bl-slate-700); }
  .range-stars .off { color:var(--bl-slate-300); }
  .range-rating .count { font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); font-variant-numeric:tabular-nums; }
  @media (max-width:520px){
    .range-item{ grid-template-columns:96px 1fr; gap:var(--bl-space-4); }
  }

  /* ═════ OFFERS BAND — banner with a product rail overlapping it ═════ */
  .offers-band { max-inline-size:1360px; margin-inline:auto; padding-block:var(--bl-space-16) var(--bl-space-20); }
  .ob-head { position:relative; z-index:2; text-align:center; margin-block-end:calc(var(--bl-space-16) * -1); }
  .ob-title {
    font-family:var(--bl-font-brand); font-weight:700;
    font-size:clamp(2.25rem, 4.6vw, 4rem); line-height:1;
    letter-spacing:-0.035em; color:var(--bl-content-primary); margin:0;
  }
  :root[dir="rtl"] .ob-title { letter-spacing:0; }
  .ob-link {
    display:inline-flex; align-items:center; gap:var(--bl-space-3);
    margin-block-start:var(--bl-space-4);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    font-weight:var(--bl-weight-semibold); letter-spacing:0.1em;
    text-transform:uppercase; color:var(--bl-content-primary);
  }
  :root[dir="rtl"] .ob-link { letter-spacing:0; text-transform:none; }
  .ob-link .arw { transition:translate var(--bl-duration-fast) var(--bl-ease-standard); }
  .ob-link:hover .arw { translate:5px 0; }
  :root[dir="rtl"] .ob-link .arw { transform:scaleX(-1); }
  :root[dir="rtl"] .ob-link:hover .arw { translate:-5px 0; }

  .ob-banner {
    position:relative; overflow:hidden;
    inline-size:100%;
    block-size:clamp(300px, 34vw, 440px);
    border-radius:var(--bl-radius-lg);
    background:linear-gradient(170deg, #C9D2E4 0%, #DFE3EC 45%, #EFE6E4 100%);
  }
  .ob-banner img { inline-size:100%; block-size:100%; object-fit:cover; }

  /* Only a sliver of each card sits over the banner. */
  .ob-railwrap { position:relative; z-index:2; margin-block-start:clamp(-70px, -4vw, -40px); }

  /* Four fixed windows. Nothing about the row moves — each card clips its
     own strip of content, and only that strip slides. */
  .ob-viewport { margin-inline:clamp(88px, 8vw, 148px); }
  .ob-rail {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--bl-space-5);
  }
  .ob-card { overflow:hidden; }
  .ob-strip {
    display:grid; grid-auto-flow:column; grid-auto-columns:100%;
    transition:translate 700ms cubic-bezier(.16,1,.3,1) var(--d, 0ms);
    will-change:translate;
  }
  .ob-strip.is-set { transition:none; }
  @media (prefers-reduced-motion: reduce){ .ob-strip { transition:none; } }
  .ob-media {
    position:relative; aspect-ratio:1; background:var(--bl-slate-50);
    overflow:hidden; border-radius:var(--bl-radius-sm);
  }
  @media (hover:hover){ .ob-media { cursor:none; } }
  .ob-media:hover .ccard-cursor { opacity:1; scale:1; }
  .ob-media .ccard-cursor { inline-size:72px; block-size:72px; font-size:var(--bl-text-caption); }
  .ob-media img { inline-size:100%; block-size:100%; object-fit:contain; padding:var(--bl-space-6); transition:scale 500ms var(--bl-ease-standard); }
  .ob-card:hover .ob-media img { scale:1.05; }
  .ob-flags { position:absolute; z-index:2; inset-block-start:var(--bl-space-3); inset-inline-start:var(--bl-space-3); display:flex; gap:var(--bl-space-1); }
  .ob-flag {
    font-family:var(--bl-font-ui); font-size:10px; font-weight:var(--bl-weight-semibold);
    letter-spacing:.06em; text-transform:uppercase;
    padding:3px var(--bl-space-2); border-radius:var(--bl-radius-sm);
    background:var(--bl-success-600); color:var(--bl-white);
  }
  .ob-flag.best { background:var(--bl-slate-900); }
  :root[dir="rtl"] .ob-flag { letter-spacing:0; }
  .ob-wish {
    position:absolute; z-index:3;
    inset-block-start:var(--bl-space-2); inset-inline-end:var(--bl-space-2);
    inline-size:36px; block-size:36px; border-radius:var(--bl-radius-full);
    display:grid; place-items:center;
    background:var(--bl-surface-page); color:var(--bl-slate-700);
    box-shadow:var(--bl-shadow-sm);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard),
               background var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .ob-wish:hover { color:var(--bl-azure-600); background:var(--bl-azure-50); }
  /* Over the heart it is a normal button, not a "view product" target. */
  .ob-wish { cursor:pointer; }
  .ob-media:has(.ob-wish:hover) .ccard-cursor { opacity:0; scale:.6; }

  /* Quick add — appears on hover, bottom of the shot. */
  .ob-add {
    position:absolute; z-index:3;
    inset-block-end:var(--bl-space-3); inset-inline-end:var(--bl-space-3);
    inline-size:46px; block-size:46px; border-radius:var(--bl-radius-full);
    display:grid; place-items:center; cursor:pointer;
    background:var(--bl-slate-900); color:var(--bl-white);
    box-shadow:0 6px 18px rgba(39,41,44,.22);
    opacity:0; translate:0 10px; scale:.9;
    transition:opacity 220ms var(--bl-ease-standard),
               translate 320ms var(--bl-ease-standard),
               scale 320ms var(--bl-ease-standard),
               background var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .ob-card:hover .ob-add,
  .ob-add:focus-visible { opacity:1; translate:0 0; scale:1; }
  .ob-add:hover { background:var(--bl-azure-600); }
  .ob-media:has(.ob-add:hover) .ccard-cursor { opacity:0; scale:.6; }
  @media (hover:none){ .ob-add { opacity:1; translate:0 0; scale:1; } }
  .ob-body { padding-block-start:var(--bl-space-4); }
  .ob-cat {
    display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--bl-content-tertiary); font-weight:var(--bl-weight-medium);
    margin-block-end:var(--bl-space-2);
  }
  :root[dir="rtl"] .ob-cat { letter-spacing:0; }
  .ob-name {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md);
    font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary);
    margin:0 0 var(--bl-space-2); line-height:1.35;
    /* Two lines always, so every card in the row is the same height and
       the outgoing card never pokes out from under the incoming one. */
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-block-size:2.7em;
  }
  .ob-off { font-size:var(--bl-text-body-sm); color:var(--bl-price-saving); font-weight:var(--bl-weight-medium); margin-inline-end:var(--bl-space-2); }

  /* Long thin arrows, not buttons in circles. */
  .ob-nav {
    position:absolute; inset-block-start:50%; margin-block-start:-7px;
    z-index:3; padding:var(--bl-space-2);
    color:var(--bl-slate-500); background:none; border:0; box-shadow:none;
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .ob-nav:hover { color:var(--bl-slate-900); background:none; }
  .ob-nav[disabled] { opacity:.25; pointer-events:none; }
  .ob-nav svg { display:block; inline-size:42px; block-size:auto; transition:translate var(--bl-duration-base) var(--bl-ease-standard); }
  .ob-prev { inset-inline-start:0; }
  .ob-next { inset-inline-end:0; }
  .ob-prev:hover svg { translate:-6px 0; }
  .ob-next:hover svg { translate:6px 0; }
  :root[dir="rtl"] .ob-nav svg { transform:scaleX(-1); }
  @media (max-width:768px){
    .ob-head { margin-block-end:calc(var(--bl-space-10) * -1); }
    .ob-railwrap { margin-block-start:-30px; }
    .ob-viewport { margin-inline:var(--bl-space-10); }
    .ob-rail { grid-template-columns:repeat(2, 1fr); }
    .ob-nav svg { inline-size:26px; }
  }

  /* ═════ PRODUCT CARD ═════ */
  :where(.grid-4) { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bl-space-5); }
  @media (min-width:1700px){ .grid-4{ grid-template-columns:repeat(5,1fr); } }
  @media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .grid-4{grid-template-columns:repeat(2,1fr); gap:var(--bl-space-3)} }

  .card { display:flex; flex-direction:column; background:none; border:0; border-radius:0; }
  .card-media {
    position:relative; aspect-ratio:1; background:var(--bl-slate-50);
    border-radius:var(--bl-radius-sm); overflow:hidden;
  }
  @media (hover:hover){ .card-media { cursor:none; } }
  .card-media:hover .ccard-cursor { opacity:1; scale:1; }
  .card-media .ccard-cursor { inline-size:78px; block-size:78px; font-size:var(--bl-text-caption); }
  .card-media .shot { inline-size:100%; block-size:100%; object-fit:cover; padding:0; transition:scale 600ms var(--bl-ease-standard); }
  .card:hover .card-media .shot { scale:1.04; }
  /* Status ribbon — a running strip along the foot of the shot. It spans the
     media box edge to edge, so it lines up with the text column below. */
  /* Status badge — a small label in the corner of the shot, not a running
     strip. A marquee moves forever and pulls the eye away from the product;
     the shopper reads it once and does not need it repeated. */
  .badge {
    position:absolute; z-index:2;
    inset-block-start:var(--bl-space-3); inset-inline-start:var(--bl-space-3);
    display:inline-flex; align-items:center; gap:6px;
    padding:5px var(--bl-space-3);
    border-radius:var(--bl-radius-full);
    background:var(--bl-slate-900); color:var(--bl-white);
    font-family:var(--bl-font-ui); font-size:11px;
    font-weight:var(--bl-weight-semibold); letter-spacing:.04em;
    line-height:1.4; white-space:nowrap;
  }
  :root[dir="rtl"] .badge { letter-spacing:0; font-family:var(--bl-font-ui-ar); }
  .badge-sale { background:var(--bl-success-600); }
  .badge-low  { background:var(--bl-azure-700); }
  /* Out of stock is a state, not a promotion — it stays quiet. */
  .badge-out {
    background:var(--bl-surface-page); color:var(--bl-content-secondary);
    border:1px solid var(--bl-border-default);
  }
  .badge svg { flex:none; }
  .card-wish {
    position:absolute; z-index:3;
    inset-block-start:var(--bl-space-3); inset-inline-end:var(--bl-space-3);
    inline-size:34px; block-size:34px; cursor:pointer;
    display:grid; place-items:center; color:var(--bl-slate-600);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .card-wish:hover { color:var(--bl-azure-600); }
  .card-media:has(.card-wish:hover) .ccard-cursor { opacity:0; scale:.6; }

  .card-body { padding:var(--bl-space-5) 0 0; display:flex; flex-direction:column; gap:var(--bl-space-3); flex:1; }
  .card-cat { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bl-content-tertiary); font-weight:var(--bl-weight-medium); }
  :root[dir="rtl"] .card-cat { letter-spacing:0; }
  .card-title {
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md);
    font-weight:var(--bl-weight-medium); line-height:1.4;
    color:var(--bl-content-primary); margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-block-size:2.8em;
  }
  /* Rating — rendered only when review data exists. */
  .card-rating { display:flex; align-items:center; gap:var(--bl-space-2); font-size:var(--bl-text-body-sm); }
  .card-rating:empty { display:none; }
  .card-rating .range-stars svg { inline-size:14px; block-size:14px; }
  .card-rating .score { font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary); font-variant-numeric:tabular-nums; }
  .card-rating .count { color:var(--bl-content-tertiary); font-variant-numeric:tabular-nums; }
  .card-benefit { margin:0; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }

  .card-foot { margin-block-start:auto; padding-block-start:var(--bl-space-4); border-block-start:1px solid var(--bl-border-subtle); }
  .card-line { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bl-space-3); }
  .card-size { font-size:var(--bl-text-body-sm); color:var(--bl-content-tertiary); white-space:nowrap; }
  .price { display:flex; align-items:baseline; gap:var(--bl-space-2); flex-wrap:wrap; font-variant-numeric:tabular-nums; }
  .price-now { font-size:var(--bl-text-body-lg); font-weight:var(--bl-weight-semibold); color:var(--bl-price-current); }
  .price-was { font-size:var(--bl-text-body-sm); color:var(--bl-price-was); text-decoration:line-through; }
  .price-save { font-size:var(--bl-text-caption); color:var(--bl-price-saving); font-weight:var(--bl-weight-medium); }
  .stock { display:flex; align-items:center; gap:var(--bl-space-2); font-size:var(--bl-text-caption); color:var(--bl-content-secondary); }
  .stock .dot { background:var(--bl-stock-in); }
  .stock.low .dot { background:var(--bl-stock-low); }

  /* Add to cart — on hover a curtain drops from the top: a thin azure edge
     leads, the dark ground follows behind it, and the white label arrives
     last. The resting label drops away below. */
  .card-add {
    position:relative; overflow:hidden;
    margin-block-start:var(--bl-space-4); inline-size:100%;
    padding-block:var(--bl-space-4);
    border:1px solid var(--bl-slate-900);
    font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium);
    font-family:var(--bl-font-ui); color:var(--bl-content-primary);
    background:none;
  }
  .card-add .lbl {
    position:relative; z-index:0; display:block;
    transition:translate 400ms cubic-bezier(.16,1,.3,1),
               opacity 240ms var(--bl-ease-standard);
    transition-delay:80ms;   /* just behind the curtain, so no empty frame shows */
  }
  .card-add:hover .lbl,
  .card-add:focus-visible .lbl { translate:0 140%; opacity:0; transition-delay:0ms; }

  .card-add .curtain,
  .card-add .lbl-fill {
    position:absolute; inset:-1px;
    display:grid; place-items:center;
    translate:0 -100%;
    transition:translate 480ms cubic-bezier(.16,1,.3,1);
  }
  /* Delays on the base rule run on exit; the hover rule sets the entry order. */
  .card-add .c-tint   { z-index:1; background:var(--bl-azure-200); transition-delay:80ms; }
  .card-add .c-dark   { z-index:2; background:var(--bl-slate-900); transition-delay:40ms; }
  .card-add .lbl-fill { z-index:3; color:var(--bl-white);          transition-delay:0ms; }

  .card-add:hover .c-tint,   .card-add:focus-visible .c-tint   { translate:0 0; transition-delay:0ms; }
  .card-add:hover .c-dark,   .card-add:focus-visible .c-dark   { translate:0 0; transition-delay:90ms; }
  .card-add:hover .lbl-fill, .card-add:focus-visible .lbl-fill { translate:0 0; transition-delay:150ms; }

  @media (prefers-reduced-motion: reduce){
    .card-add .lbl, .card-add .curtain, .card-add .lbl-fill { transition:none; }
  }

  /* ═════ HERITAGE — sourced from bailleularabia.com/en/about-us ═════ */
  .heritage {
    background:var(--bl-azure-50);
    border-radius:var(--bl-radius-xl);
    padding-block:var(--bl-space-20);
    margin-block:var(--bl-space-3);
  }
  :where(.heritage-grid) {
    display:grid; grid-template-columns:1fr 1.1fr;
    gap:var(--bl-space-16); align-items:center;
  }
  @media (max-width:900px){ .heritage-grid { grid-template-columns:1fr; gap:var(--bl-space-10); } }

  .heritage-lede { max-inline-size:46ch; }
  .heritage-cta { margin-block-start:var(--bl-space-8); }

  /* Timeline — a centre spine that draws itself; entries alternate sides and
     arrive one at a time, each after the one before has finished counting. */
  :where(.timeline) {
    position:relative; display:flex; flex-direction:column;
    gap:var(--bl-space-8); padding-inline:0;
  }
  .timeline::before {
    content:""; position:absolute; inset-block:10px 4px;
    inset-inline-start:50%; margin-inline-start:-1px;
    inline-size:2px; background:var(--bl-azure-200);
    scale:1 0; transform-origin:top;
    transition:scale 2600ms linear;
  }
  .timeline.is-running::before { scale:1 1; }

  .timeline li {
    position:relative;
    inline-size:50%;
    opacity:0;
    transition:opacity 420ms var(--bl-ease-standard),
               translate 560ms cubic-bezier(.16,1,.3,1);
  }
  /* Odd entries sit on the leading side, even ones on the trailing side. */
  .timeline li:nth-child(odd)  { padding-inline-end:var(--bl-space-8); text-align:end; translate:-14px 0; }
  .timeline li:nth-child(even) { padding-inline-start:var(--bl-space-8); margin-inline-start:50%; translate:14px 0; }

  .timeline li::before {
    content:""; position:absolute; inset-block-start:.5em;
    inline-size:12px; block-size:12px; border-radius:var(--bl-radius-full);
    background:var(--bl-azure-50); border:2px solid var(--bl-azure-200);
    transition:background var(--bl-duration-base) var(--bl-ease-standard),
               border-color var(--bl-duration-base) var(--bl-ease-standard);
  }
  .timeline li:nth-child(odd)::before  { inset-inline-end:-8px; }
  .timeline li:nth-child(even)::before { inset-inline-start:-8px; }

  .timeline li.is-in { opacity:1; translate:0 0; }
  .timeline li.is-in::before { background:var(--bl-slate-900); border-color:var(--bl-slate-900); }

  .timeline .year {
    display:inline-flex; align-items:baseline;
    font-family:var(--bl-font-display); line-height:1;
    color:var(--bl-content-primary); font-variant-numeric:tabular-nums;
    font-size:clamp(1.75rem, 2.6vw, 2.5rem);
    margin-block-end:var(--bl-space-3);
  }
  /* The century sits back; the pair that changes carries the weight. */
  .timeline .year .c { font-size:.46em; color:var(--bl-content-tertiary); }
  .timeline .year .d { font-size:1em; }
  .timeline p { margin:0; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }

  /* Too narrow to alternate — fall back to a single column with the spine
     on the leading edge. */
  @media (max-width:640px){
    .timeline::before { inset-inline-start:9px; margin-inline-start:0; }
    .timeline li,
    .timeline li:nth-child(odd),
    .timeline li:nth-child(even) {
      inline-size:100%; margin-inline-start:0; text-align:start;
      padding-inline:var(--bl-space-10) 0; translate:-14px 0;
    }
    .timeline li:nth-child(odd)::before,
    .timeline li:nth-child(even)::before { inset-inline:-0 auto; inset-inline-start:4px; }
  }

  @media (prefers-reduced-motion: reduce){
    .timeline::before { scale:1 1; transition:none; }
    .timeline li { opacity:1; translate:0 0; transition:none; }
  }

  /* ═════ FEATURE (adapted from the rhode section pattern) ═════ */
  .feature { background:var(--bl-slate-900); color:var(--bl-content-inverse); border-radius:var(--bl-radius-xl); overflow:hidden; }
  .feature .wrap { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--bl-space-16); align-items:center; padding-block:var(--bl-space-20); }
  .feature .ph { aspect-ratio:1; border-radius:var(--bl-radius-xl); background:linear-gradient(150deg,var(--bl-slate-700),var(--bl-slate-800)); }
  .feature .ph::after { color:var(--bl-slate-400); }
  .feature .eyebrow { color:var(--bl-azure-300); }
  .feature h2 { color:var(--bl-white); font-size:var(--bl-text-display-md); line-height:var(--bl-leading-display-md); margin-block:var(--bl-space-4) var(--bl-space-6); max-inline-size:18ch; }
  .steps { display:flex; flex-direction:column; }
  .step { display:grid; grid-template-columns:auto 1fr; gap:var(--bl-space-4); padding-block:var(--bl-space-5); border-block-start:1px solid rgba(255,255,255,.14); }
  .step-n { font-family:var(--bl-font-display); font-size:var(--bl-text-heading-md); color:var(--bl-azure-400); line-height:1; }
  .step h3 { color:var(--bl-white); font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md); font-weight:var(--bl-weight-semibold); margin-block-end:var(--bl-space-1); }
  .step p { margin:0; font-size:var(--bl-text-body-sm); color:var(--bl-slate-300); line-height:1.6; }
  .feature .btn-primary { margin-block-start:var(--bl-space-8); }
  @media (max-width:900px){ .feature .wrap{grid-template-columns:1fr; gap:var(--bl-space-8); padding-block:var(--bl-space-12)} }

  /* ═════ ROUTINES / BUNDLES ═════ */
  .routines { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bl-space-5); }
  .routine { border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-lg); padding:var(--bl-space-6); display:flex; flex-direction:column; gap:var(--bl-space-4); background:var(--bl-surface-page); }
  .routine.is-featured { border-color:var(--bl-azure-600); box-shadow:var(--bl-shadow-md); position:relative; }
  .routine-flag { position:absolute; inset-block-start:calc(var(--bl-space-3) * -1); inset-inline-start:var(--bl-space-6); background:var(--bl-azure-600); color:var(--bl-white); font-size:11px; font-weight:var(--bl-weight-semibold); padding:3px var(--bl-space-3); border-radius:var(--bl-radius-full); font-family:var(--bl-font-ui); }
  .routine h3 { font-size:var(--bl-text-heading-sm); }
  .routine-items { display:flex; flex-direction:column; gap:var(--bl-space-2); }
  .routine-items li { display:flex; align-items:center; gap:var(--bl-space-3); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .routine-thumb {
    inline-size:44px; block-size:52px; flex:none;
    border-radius:var(--bl-radius-sm); overflow:hidden;
    background:var(--bl-slate-50);
    display:grid; place-items:center;
  }
  .routine-thumb img { inline-size:100%; block-size:100%; object-fit:contain; padding:4px; }
  .routine-desc { margin:0; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }
  .routine-foot { margin-block-start:auto; padding-block-start:var(--bl-space-4); border-block-start:1px solid var(--bl-border-subtle); }
  @media (max-width:900px){ .routines{grid-template-columns:1fr} }

  /* ═════ SCIENCE BAND ═════ */
  .science { background:var(--bl-surface-raised); border-radius:var(--bl-radius-xl); }
  .science .wrap { padding-block:var(--bl-space-16); }
  .science-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bl-space-10); margin-block-start:var(--bl-space-10); max-inline-size:1400px; }
  .stat-n { font-family:var(--bl-font-display); font-size:var(--bl-text-display-md); line-height:1; color:var(--bl-azure-700); font-variant-numeric:tabular-nums; }
  .stat p { margin:var(--bl-space-3) 0 0; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; max-inline-size:32ch; }
  @media (max-width:768px){ .science-grid{grid-template-columns:1fr; gap:var(--bl-space-8)} }

  .routine-note {
    margin:var(--bl-space-8) 0 0; text-align:center;
    font-size:var(--bl-text-caption); color:var(--bl-content-tertiary);
  }

  /* ═════ SOCIAL ═════ */
  .social-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--bl-space-3); }
  @media (min-width:1700px){ .social-grid{ grid-template-columns:repeat(6,1fr); } }
  .social-grid .ph { aspect-ratio:4/5; border-radius:var(--bl-radius-md); }
  @media (max-width:768px){ .social-grid{grid-template-columns:repeat(3,1fr)} .social-grid a:nth-child(n+4){display:none} }

  /* ═════ WISHLIST ═════ */
  .card-wish.is-on, .ob-wish.is-on { color:var(--bl-azure-600); }
  .card-wish.is-on svg, .ob-wish.is-on svg { fill:currentColor; }

  .wish-wrap { position:relative; }
  .wish-count {
    position:absolute; inset-block-start:2px; inset-inline-end:2px;
    min-inline-size:16px; block-size:16px; padding-inline:4px;
    border-radius:var(--bl-radius-full);
    background:var(--bl-azure-600); color:var(--bl-white);
    font-size:10px; font-weight:var(--bl-weight-semibold);
    display:grid; place-items:center; font-variant-numeric:tabular-nums;
  }
  .wish-count:empty { display:none; }

  .wish-panel {
    position:absolute; inset-block-start:calc(100% + var(--bl-space-3));
    inset-inline-end:0; inline-size:340px; z-index:var(--bl-z-overlay);
    background:var(--bl-surface-page);
    border:1px solid var(--bl-border-subtle);
    border-radius:var(--bl-radius-lg);
    box-shadow:0 18px 48px rgba(24,25,27,.14);
    padding:var(--bl-space-4);
    opacity:0; visibility:hidden; translate:0 -8px;
    transition:opacity 240ms var(--bl-ease-standard),
               translate 320ms cubic-bezier(.16,1,.3,1), visibility 320ms;
  }
  .wish-panel.is-open { opacity:1; visibility:visible; translate:0 0; }

  .wish-empty { margin:0; padding:var(--bl-space-6) var(--bl-space-2); text-align:center; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .wish-item { display:grid; grid-template-columns:52px 1fr; gap:var(--bl-space-3); align-items:center; padding-block:var(--bl-space-3); }
  .wish-item + .wish-item { border-block-start:1px solid var(--bl-border-subtle); }
  .wish-item img { inline-size:52px; block-size:52px; object-fit:cover; border-radius:var(--bl-radius-sm); background:var(--bl-slate-50); }
  .wish-item h4 { margin:0 0 2px; font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium); color:var(--bl-content-primary); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .wish-item .price-now { font-size:var(--bl-text-body-sm); }
  .wish-foot { margin-block-start:var(--bl-space-3); padding-block-start:var(--bl-space-3); border-block-start:1px solid var(--bl-border-subtle); }
  .wish-foot .btn { inline-size:100%; }
  .wish-more { margin:var(--bl-space-3) 0 0; font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); text-align:center; }
  .wish-more:empty { display:none; }

  /* ═════ TRUST STRIP ═════ */
  .trust { background:var(--bl-surface-raised); border-radius:var(--bl-radius-xl); margin-block:var(--bl-space-3) var(--bl-space-10); }
  .trust .wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bl-space-6); padding-block:var(--bl-space-8); }
  .trust-item { display:flex; gap:var(--bl-space-3); align-items:flex-start; }
  .trust-item svg { color:var(--bl-azure-600); flex:none; margin-block-start:2px; }
  .trust-item strong { display:block; font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary); margin-block-end:2px; }
  .trust-item span { font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  @media (max-width:900px){ .trust .wrap{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .trust .wrap{grid-template-columns:1fr} }

  /* ═════ FOOTER ═════ */
  .footer { background:var(--bl-slate-50); border-radius:var(--bl-radius-xl); margin-block-start:var(--bl-space-3); }
  .footer-main { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:var(--bl-space-10); padding-block:var(--bl-space-16) var(--bl-space-12); }
  .footer-brand p { margin:var(--bl-space-4) 0 0; font-family:var(--bl-font-display); font-size:var(--bl-text-body-lg); line-height:1.5; color:var(--bl-content-secondary); max-inline-size:32ch; }
  .footer h4 { margin:0 0 var(--bl-space-4); font-family:var(--bl-font-ui); font-size:var(--bl-text-eyebrow); letter-spacing:var(--bl-tracking-eyebrow); text-transform:uppercase; font-weight:var(--bl-weight-semibold); color:var(--bl-content-tertiary); }
  :root[dir="rtl"] .footer h4 { letter-spacing:0; }
  .footer-links li a { display:block; padding-block:var(--bl-space-2); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .footer-links li a:hover { color:var(--bl-content-link); }
  .newsletter-field { display:flex; gap:var(--bl-space-2); margin-block-start:var(--bl-space-3); }
  .newsletter-field input { flex:1; min-inline-size:0; padding:var(--bl-space-3); border:1px solid var(--bl-input-border); border-radius:var(--bl-input-radius); font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm); }
  .contact-line { font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.7; }
  .contact-line strong { color:var(--bl-content-primary); font-weight:var(--bl-weight-medium); }
  .social-row { display:flex; gap:var(--bl-space-2); margin-block-start:var(--bl-space-5); }
  .social-row a { inline-size:40px; block-size:40px; border-radius:var(--bl-radius-full); display:grid; place-items:center; border:1px solid var(--bl-border-subtle); color:var(--bl-content-secondary); transition:all var(--bl-duration-fast) var(--bl-ease-standard); }
  .social-row a:hover { border-color:var(--bl-azure-600); color:var(--bl-azure-600); }
  .payments { display:flex; flex-wrap:wrap; gap:var(--bl-space-2); align-items:center; }
  .pay-chip { padding:var(--bl-space-1) var(--bl-space-3); block-size:30px; display:grid; place-items:center; border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-sm); font-size:11px; font-weight:var(--bl-weight-semibold); color:var(--bl-content-secondary); font-family:var(--bl-font-ui); }
  .footer-legal { border-block-start:1px solid var(--bl-border-subtle); padding-block:var(--bl-space-6); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--bl-space-4); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); }
  .footer-legal nav { display:flex; flex-wrap:wrap; gap:var(--bl-space-5); }
  .regulatory { padding-block:var(--bl-space-5); border-block-start:1px solid var(--bl-border-subtle); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); line-height:1.6; max-inline-size:90ch; }
  @media (max-width:1024px){ .footer-main{grid-template-columns:1fr 1fr; gap:var(--bl-space-8)} }
  @media (max-width:600px){ .footer-main{grid-template-columns:1fr} }

  /* ═════ CART DRAWER ═════
     Opens on "add to cart" and on the bag icon. Slides from the trailing
     edge, so it mirrors to the left in Arabic without extra rules. */
  .cart-scrim {
    position:fixed; inset:0; z-index:calc(var(--bl-z-drawer) - 1);
    background:rgba(39,41,44,.45);
    opacity:0; visibility:hidden;
    transition:opacity var(--bl-duration-base) var(--bl-ease-standard), visibility var(--bl-duration-base);
  }
  .cart-scrim.is-open { opacity:1; visibility:visible; }

  .cart-drawer {
    position:fixed; inset-block:0; inset-inline-end:0; z-index:var(--bl-z-drawer);
    inline-size:min(92vw, 420px); background:var(--bl-surface-page);
    display:flex; flex-direction:column;
    translate:100% 0;
    transition:translate var(--bl-duration-slow) var(--bl-ease-enter);
    box-shadow:-18px 0 48px rgba(24,25,27,.12);
  }
  :root[dir="rtl"] .cart-drawer { translate:-100% 0; box-shadow:18px 0 48px rgba(24,25,27,.12); }
  .cart-drawer.is-open, :root[dir="rtl"] .cart-drawer.is-open { translate:0 0; }
  @media (prefers-reduced-motion: reduce){ .cart-drawer, .cart-scrim { transition:none; } }

  .cart-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--bl-space-5) var(--bl-space-6);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .cart-head h2 { font-family:var(--bl-font-ui); font-size:var(--bl-text-body-lg); font-weight:var(--bl-weight-semibold); }
  :root[dir="rtl"] .cart-head h2 { font-family:var(--bl-font-ui-ar); }
  .cart-head .n { color:var(--bl-content-tertiary); font-weight:var(--bl-weight-regular); font-variant-numeric:tabular-nums; }

  .cart-body { flex:1; overflow-y:auto; padding:var(--bl-space-4) var(--bl-space-6); }
  .cart-empty { padding-block:var(--bl-space-20); text-align:center; color:var(--bl-content-secondary); }
  .cart-empty p { margin-block-end:var(--bl-space-6); font-size:var(--bl-text-body-sm); }

  .cart-line { display:grid; grid-template-columns:64px 1fr auto; gap:var(--bl-space-4); align-items:start; padding-block:var(--bl-space-5); }
  .cart-line + .cart-line { border-block-start:1px solid var(--bl-border-subtle); }
  .cart-line img { inline-size:64px; block-size:64px; object-fit:cover; border-radius:var(--bl-radius-sm); background:var(--bl-slate-50); }
  .cart-line h3 { font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium); line-height:1.4; margin-block-end:2px; }
  :root[dir="rtl"] .cart-line h3 { font-family:var(--bl-font-ui-ar); }
  .cart-line .size { font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); }
  .cart-line .price { margin-block-start:var(--bl-space-2); font-size:var(--bl-text-body-sm); }
  .cart-line .price-now { font-size:var(--bl-text-body-sm); }

  .qty { display:inline-flex; align-items:center; border:1px solid var(--bl-border-default); border-radius:var(--bl-radius-md); }
  .qty button {
    inline-size:30px; block-size:30px; min-inline-size:30px; min-block-size:30px; display:grid; place-items:center;
    color:var(--bl-content-secondary); font-size:var(--bl-text-body-md); line-height:1;
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .qty button:hover { color:var(--bl-content-primary); }
  .qty .v { min-inline-size:26px; text-align:center; font-size:var(--bl-text-body-sm); font-variant-numeric:tabular-nums; }
  .cart-remove { display:block; margin-block-start:var(--bl-space-2); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); text-decoration:underline; }
  .cart-remove:hover { color:var(--bl-content-primary); }

  .cart-foot { padding:var(--bl-space-5) var(--bl-space-6) var(--bl-space-6); border-block-start:1px solid var(--bl-border-subtle); background:var(--bl-surface-raised); }
  .cart-row { display:flex; align-items:baseline; justify-content:space-between; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); margin-block-end:var(--bl-space-2); }
  .cart-row.total { font-size:var(--bl-text-body-lg); font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary); margin-block:var(--bl-space-3) var(--bl-space-5); }
  .cart-foot .btn { inline-size:100%; }
  .cart-note { margin-block-start:var(--bl-space-4); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); text-align:center; }

  /* Off-canvas panels are position:fixed, so they escape any overflow rule
     on <body> — a drawer parked at translate:100% still widened the
     viewport, which read as a grey band down the trailing edge. Clipping
     the root contains them; visibility also takes them out of the layout
     and out of the keyboard tab order while closed. */
  /* Off-canvas panels are position:fixed, so they escape overflow on <body>
     — a drawer parked at translate:100% still widened the viewport, which
     read as a grey band down the trailing edge.

     `overflow-x` on <html> would clip them, but it also makes <html> the
     scroll container, and that silently breaks `position: sticky` on the
     header — it scrolls away instead of sticking. Clipping the body and
     taking the closed drawers out of layout achieves the same thing without
     touching the scroll container. */
  body { overflow-x:hidden; }
  .cart-drawer, .drawer { visibility:hidden; }
  .cart-drawer.is-open, .drawer.is-open { visibility:visible; }


  /* ═════ ACCOUNT ═════
     Signed-in state lives in one place. The header icon carries a dot when
     signed in, so the two states are distinguishable at a glance without
     changing the icon itself. */
  .acct-wrap { position:relative; }
  .acct-dot {
    position:absolute; inset-block-end:7px; inset-inline-end:7px;
    inline-size:8px; block-size:8px; border-radius:var(--bl-radius-full);
    background:var(--bl-success-600);
    box-shadow:0 0 0 2px var(--bl-surface-page);
  }
  .acct-panel {
    position:absolute; inset-block-start:calc(100% + var(--bl-space-3));
    inset-inline-end:0; inline-size:300px; z-index:var(--bl-z-overlay);
    background:var(--bl-surface-page);
    border:1px solid var(--bl-border-subtle);
    border-radius:var(--bl-radius-lg);
    box-shadow:0 18px 48px rgba(24,25,27,.14);
    padding:var(--bl-space-5);
    opacity:0; visibility:hidden; translate:0 -8px;
    transition:opacity 240ms var(--bl-ease-standard),
               translate 320ms cubic-bezier(.16,1,.3,1), visibility 320ms;
  }
  .acct-panel.is-open { opacity:1; visibility:visible; translate:0 0; }
  .acct-hello { font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md); font-weight:var(--bl-weight-semibold); margin-block-end:2px; }
  :root[dir="rtl"] .acct-hello { font-family:var(--bl-font-ui-ar); }
  .acct-mail { font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); margin-block-end:var(--bl-space-4); }
  .acct-links { display:flex; flex-direction:column; margin-block:var(--bl-space-2); }
  .acct-links a {
    display:flex; align-items:center; gap:var(--bl-space-3);
    padding-block:var(--bl-space-3); font-size:var(--bl-text-body-sm);
    color:var(--bl-content-secondary);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .acct-links a:hover { color:var(--bl-content-primary); }
  .acct-links a svg { color:var(--bl-content-tertiary); flex:none; }
  .acct-panel .btn { inline-size:100%; margin-block-start:var(--bl-space-4); }
  .acct-alt { margin-block-start:var(--bl-space-4); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); text-align:center; }
  .acct-alt button { color:var(--bl-content-link); text-decoration:underline; font-size:inherit; }

  /* ── account page ─────────────────────────────────────────── */
  .auth { display:grid; grid-template-columns:1fr 1fr; gap:var(--bl-space-16); align-items:start; margin-block:var(--bl-space-10) var(--bl-space-20); }
  @media (max-width:900px){ .auth { grid-template-columns:1fr; gap:var(--bl-space-10); } }
  .auth-card { padding:var(--bl-space-10); border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-lg); }
  .auth-card h2 { font-size:var(--bl-text-heading-md); margin-block-end:var(--bl-space-2); }
  .auth-card .lede { margin-block-end:var(--bl-space-8); color:var(--bl-content-secondary); font-size:var(--bl-text-body-sm); }
  .field { margin-block-end:var(--bl-space-5); }
  .field label { display:block; font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium); margin-block-end:var(--bl-space-2); }
  .field input, .field select {
    inline-size:100%; padding:var(--bl-space-4);
    border:1px solid var(--bl-border-default); border-radius:var(--bl-radius-md);
    font-family:inherit; font-size:var(--bl-text-body-md); color:var(--bl-content-primary);
    background:var(--bl-surface-page);
  }
  .field input:focus, .field select:focus { outline:2px solid var(--bl-azure-600); outline-offset:-1px; border-color:var(--bl-azure-600); }
  .field-note { margin-block-start:var(--bl-space-2); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); }
  .auth-card .btn { inline-size:100%; margin-block-start:var(--bl-space-2); }
  .auth-meta { display:flex; justify-content:space-between; align-items:center; gap:var(--bl-space-4); margin-block-end:var(--bl-space-6); font-size:var(--bl-text-body-sm); }
  .auth-meta a { color:var(--bl-content-link); text-decoration:underline; }

  /* Signed-in view */
  .acct-grid { display:grid; grid-template-columns:220px 1fr; gap:var(--bl-space-12); align-items:start; margin-block:var(--bl-space-10) var(--bl-space-20); }
  @media (max-width:900px){ .acct-grid { grid-template-columns:1fr; gap:var(--bl-space-8); } }
  .acct-nav { display:flex; flex-direction:column; }
  .acct-nav button {
    text-align:start; padding:var(--bl-space-4) 0;
    font-size:var(--bl-text-body-md); color:var(--bl-content-secondary);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .acct-nav button.is-on { color:var(--bl-content-primary); font-weight:var(--bl-weight-semibold); }
  @media (max-width:900px){
    .acct-nav { flex-direction:row; gap:var(--bl-space-2); overflow-x:auto; scrollbar-width:none; }
    .acct-nav button { inline-size:auto; white-space:nowrap; padding:var(--bl-space-2) var(--bl-space-5); border:1px solid var(--bl-border-default); border-radius:var(--bl-radius-full); font-size:var(--bl-text-body-sm); }
    .acct-nav button.is-on { background:var(--bl-slate-900); border-color:var(--bl-slate-900); color:var(--bl-white); }
  }
  .acct-pane { display:none; }
  .acct-pane.is-on { display:block; }
  .acct-pane h2 { font-size:var(--bl-text-heading-md); margin-block-end:var(--bl-space-6); }
  .acct-empty { padding:var(--bl-space-16) var(--bl-space-6); text-align:center; border:1px dashed var(--bl-border-default); border-radius:var(--bl-radius-lg); color:var(--bl-content-secondary); }
  .acct-empty p { margin-block-end:var(--bl-space-6); font-size:var(--bl-text-body-sm); }
  .acct-rows { display:grid; grid-template-columns:1fr 1fr; gap:var(--bl-space-6); }
  @media (max-width:640px){ .acct-rows { grid-template-columns:1fr; } }

  /* The mega panel's product cards open a product, so they get the same
     follow-cursor as the grid. Fixed to the viewport because the panel is. */
  @media (hover:hover){ .mega-card { cursor:none; } }
  .mega-cursor {
    position:fixed; z-index:var(--bl-z-modal); inset-block-start:0; inset-inline-start:0;
    inline-size:84px; block-size:84px; border-radius:var(--bl-radius-full);
    display:grid; place-items:center; pointer-events:none;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.8);
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-sm);
    font-weight:var(--bl-weight-medium); color:var(--bl-slate-800);
    translate:calc(var(--x, 0px) - 50%) calc(var(--y, 0px) - 50%);
    opacity:0; scale:.6;
    transition:opacity 200ms var(--bl-ease-standard), scale 280ms var(--bl-ease-standard);
  }
  :root[dir="rtl"] .mega-cursor { font-family:var(--bl-font-ui-ar); }
  .mega-cursor.is-on { opacity:1; scale:1; }
  @media (hover:none){ .mega-cursor { display:none; } }
  @media (prefers-reduced-motion: reduce){ .mega-cursor { transition:none; } }

  /* Demo scaffolding only. */
  .demo-toggle { position:fixed; inset-block-end:var(--bl-space-5); inset-inline-end:var(--bl-space-5); z-index:var(--bl-z-toast); background:var(--bl-slate-900); color:var(--bl-white); padding:var(--bl-space-3) var(--bl-space-5); border-radius:var(--bl-radius-full); font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium); box-shadow:var(--bl-shadow-lg); font-family:var(--bl-font-ui); }