*, *::before, *::after { box-sizing:border-box; }
  * { margin:0; padding:0; }
  button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  a { color:inherit; text-decoration:none; }
  img { display:block; max-inline-size:100%; }
  ul { list-style:none; }

  body {
    font-family:var(--bl-font-ui);
    font-size:var(--bl-text-body-md);
    line-height:var(--bl-leading-normal);
    color:var(--bl-content-primary);
    background:var(--bl-surface-page);
    padding:var(--bl-space-3) var(--bl-page-gutter);
    max-inline-size:var(--bl-page-max);
    margin-inline:auto;
    -webkit-font-smoothing:antialiased;
  }
  :root[dir="rtl"] body { font-family:var(--bl-font-ui-ar); }
  @media (max-width:768px){ body { padding-inline:1rem; } }

  h1,h2,h3 { font-family:var(--bl-font-display); font-weight:var(--bl-weight-regular); line-height:var(--bl-leading-tight); }
  :root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3 { font-family:var(--bl-font-display-ar); }

  /* Matches the homepage, where .wrap adds a second gutter inside the
     body padding. main gets the same inset so the header, the content and
     the footer all line up on one edge. */
  .wrap { inline-size:100%; max-inline-size:none; margin-inline:0; padding-inline:var(--bl-page-gutter); }
  /* The header and footer sit inside .wrap, which adds a gutter within the
     body padding. main normally matches that — but the auth block is meant
     to span the same width as the header, so it opts out of the inner
     gutter while the signed-in view keeps it. */
  main { padding-inline:var(--bl-page-gutter); }
  main:has(#authView:not([hidden])) { padding-inline:0; }

  /* Shared primitives — copied from the homepage. The header, mega panel
     and footer all use these; they live outside the header block there,
     which is why they were missed on the first pass. */
  .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; text-transform: none; }

  .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); }

  /* Shared dot — used by the utility bar and every eyebrow. */
  .dot { inline-size:6px; block-size:6px; border-radius:var(--bl-radius-full); background:var(--bl-azure-500); display:inline-block; flex:none; }

  /* ═══════════════════════════════════════════════════════════
     HEADER — copied verbatim from index.html.
     Do not hand-edit: change the homepage, then re-copy.
     In the real build this is one Blade component and the
     copy disappears.
     ═══════════════════════════════════════════════════════════ */
  /* ═════ 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 420ms cubic-bezier(.22,1,.36,1),
               translate 620ms cubic-bezier(.16,1,.3,1);
  }
  /* Hidden while scrolling down and while idle; revealed on scroll up. */
  .header.is-hidden {
    translate:0 calc(-100% - var(--bl-space-6));
    opacity:0;
    pointer-events:none;
  }
  .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); }
  .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; }
  .search-terms { display:flex; flex-wrap:wrap; gap:var(--bl-space-2); margin-block-start:var(--bl-space-3); }
  .search-terms a { padding:var(--bl-space-2) var(--bl-space-3); background:var(--bl-surface-raised); border-radius:var(--bl-radius-full); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }

  .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); }


  /* ═════ PAGE HEAD ═════ */
  .crumbs { display:flex; gap:var(--bl-space-2); font-size:var(--bl-text-caption); color:var(--bl-content-tertiary); margin-block-start:var(--bl-space-10); }
  .page-head { margin-block:var(--bl-space-4) var(--bl-space-10); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--bl-space-6); flex-wrap:wrap; }
  .page-head h1 { font-size:var(--bl-text-display-sm); }
  .page-head .lede { margin-block-start:var(--bl-space-3); color:var(--bl-content-secondary); max-inline-size:56ch; }
  .count { font-size:var(--bl-text-body-sm); color:var(--bl-content-tertiary); font-variant-numeric:tabular-nums; }

  /* ═════ LAYOUT — filter rail beside the grid ═════ */
  .shop { display:grid; grid-template-columns:240px 1fr; gap:var(--bl-space-12); align-items:start; }
  @media (max-width:900px){ .shop { grid-template-columns:1fr; gap:var(--bl-space-6); } }

  .rail { position:sticky; inset-block-start:120px; display:flex; flex-direction:column; gap:var(--bl-space-12); }
  @media (max-width:900px){ .rail { position:static; gap:var(--bl-space-6); } }
  .rail h2 {
    font-family:var(--bl-font-ui); font-size:11px; font-weight:var(--bl-weight-semibold);
    text-transform:uppercase; letter-spacing:.1em; color:var(--bl-content-tertiary);
    margin-block-end:var(--bl-space-5);
  }
  :root[dir="rtl"] .rail h2 { font-family:var(--bl-font-ui-ar); letter-spacing:0; text-transform:none; }

  .filters { display:flex; flex-direction:column; }
  .filters button {
    display:flex; align-items:center; justify-content:space-between; gap:var(--bl-space-3);
    inline-size:100%; 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);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }

  /* ═════ PRICE RANGE ═════ */
  .range { position:relative; block-size:28px; margin-block:var(--bl-space-2) var(--bl-space-4); }
  .range-track, .range-fill {
    position:absolute; inset-block-start:13px; block-size:2px; border-radius:var(--bl-radius-full);
  }
  .range-track { inset-inline:0; background:var(--bl-slate-200); }
  .range-fill  { background:var(--bl-slate-900); }
  .range input[type="range"] {
    position:absolute; inset-inline:0; inset-block-start:0;
    inline-size:100%; block-size:28px; margin:0;
    background:none; pointer-events:none; -webkit-appearance:none; appearance:none;
  }
  .range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; pointer-events:auto;
    inline-size:16px; block-size:16px; border-radius:var(--bl-radius-full);
    background:var(--bl-surface-page); border:2px solid var(--bl-slate-900);
    cursor:grab; margin-block-start:0;
  }
  .range input[type="range"]::-moz-range-thumb {
    pointer-events:auto;
    inline-size:16px; block-size:16px; border-radius:var(--bl-radius-full);
    background:var(--bl-surface-page); border:2px solid var(--bl-slate-900);
    cursor:grab;
  }
  .range-vals {
    display:flex; justify-content:space-between;
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
    font-variant-numeric:tabular-nums;
  }

  /* ═════ RATING ═════ */
  .rates { display:flex; flex-direction:column; }
  .rates button {
    display:flex; align-items:center; gap:var(--bl-space-3);
    inline-size:100%; text-align:start;
    padding:var(--bl-space-3) 0;
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
    transition:color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .rates button:hover { color:var(--bl-content-primary); }
  .rates button.is-on { color:var(--bl-content-primary); font-weight:var(--bl-weight-semibold); }
  .rates .stars { display:inline-flex; gap:1px; color:var(--bl-slate-900); }
  .rates .stars svg { inline-size:13px; block-size:13px; }
  .rates .stars .off { color:var(--bl-slate-300); }
  .filters button:hover { color:var(--bl-content-primary); }
  .filters button.is-on { color:var(--bl-content-primary); font-weight:var(--bl-weight-semibold); }
  .filters .n { font-size:var(--bl-text-body-sm); color:var(--bl-content-tertiary); font-variant-numeric:tabular-nums; }
  .filters button.is-on .n { color:var(--bl-azure-600); }

  /* On phones the rail becomes a scrolling row above the grid. */
  @media (max-width:900px){
    .rail h2 { display:none; }
    .rail-price, .rail-rate { display:none; }   /* rail collapses to categories on phones */
    .filters {
      flex-direction:row; gap:var(--bl-space-2);
      overflow-x:auto; scrollbar-width:none;
      margin-inline:calc(var(--bl-page-gutter) * -1); padding-inline:var(--bl-page-gutter);
    }
    .filters::-webkit-scrollbar { display:none; }
    .filters 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);
    }
    .filters button.is-on { background:var(--bl-slate-900); border-color:var(--bl-slate-900); color:var(--bl-white); }
    .filters button.is-on .n { color:rgba(255,255,255,.7); }
  }

  /* ═════ TOOLBAR ═════ */
  .toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--bl-space-4); flex-wrap:wrap;
    padding-block-end:var(--bl-space-5);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .sort { display:flex; align-items:center; gap:var(--bl-space-3); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .sort select {
    font:inherit; color:inherit; background:none;
    border:1px solid var(--bl-border-default);
    border-radius:var(--bl-radius-md);
    padding:var(--bl-space-2) var(--bl-space-4);
  }

  /* Live search results in the header overlay — same styles as the other
     pages, so the overlay behaves identically wherever it opens. */
  .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 result banner — a query is a state the page is in, so it says
     so and offers a way out. */
  .query-bar {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--bl-space-4); flex-wrap:wrap;
    padding:var(--bl-space-4) var(--bl-space-5);
    margin-block-end:var(--bl-space-6);
    background:var(--bl-azure-50); border-radius:var(--bl-radius-md);
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
  }
  .query-bar strong { color:var(--bl-content-primary); font-weight:var(--bl-weight-semibold); }
  /* Editing the term reopens the one search field rather than adding a
     second one to the page. */
  .query-term {
    display:inline-flex; align-items:center; gap:var(--bl-space-2);
    padding:2px var(--bl-space-2); margin-inline-start:2px;
    border-radius:var(--bl-radius-sm);
    color:inherit; font:inherit;
    transition:background var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .query-term svg { color:var(--bl-content-tertiary); flex:none; }
  .query-term:hover { background:var(--bl-azure-100); }
  .query-term:hover svg { color:var(--bl-content-primary); }
  .query-clear { font-size:var(--bl-text-body-sm); color:var(--bl-content-link); text-decoration:underline; }
  .query-clear:hover { color:var(--bl-content-link-hover); }

  /* ═════ GRID + CARD (identical to the homepage card) ═════ */
  :where(.grid) { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bl-space-8) var(--bl-space-5); margin-block:var(--bl-space-8); }
  @media (min-width:1700px){ .grid { grid-template-columns:repeat(4,1fr); } }
  @media (max-width:1024px){ .grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:768px){ .grid { grid-template-columns:repeat(2,1fr); gap:var(--bl-space-6) var(--bl-space-3); } }

  .card { display:flex; flex-direction:column; }
  .card[hidden] { display:none; }
  .card-media {
    position:relative; aspect-ratio:1; background:var(--bl-slate-50);
    border-radius:var(--bl-radius-sm); overflow:hidden;
  }
  .card-media .shot { inline-size:100%; block-size:100%; object-fit:cover; transition:scale 600ms var(--bl-ease-standard); }
  .card:hover .card-media .shot { scale:1.04; }

  /* Follow-cursor — the pointer is replaced by a disc that reads "view".
     Values copied from the homepage: frosted glass, not a solid black
     disc. Two hand-written copies of the same component is exactly how
     they drift — this belongs in the shared stylesheet next. */
  @media (hover:hover){ .card-media { cursor:none; } }
  .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);
  }
  :root[dir="rtl"] .ccard-cursor { font-family:var(--bl-font-ui-ar); }
  .card-media:hover .ccard-cursor { opacity:1; scale:1; }
  /* The heart is a real control — give the pointer back over it. */
  .card-media:has(.card-wish:hover) .ccard-cursor { opacity:0; scale:.6; }
  .card-wish { cursor:pointer; }
  @media (hover:none){ .ccard-cursor { display:none; } }
  @media (prefers-reduced-motion: reduce){ .ccard-cursor { transition:none; } }

  /* Status badge — a small label in the corner of the shot, not a running
     strip: a marquee moves forever and pulls the eye off the product. */
  .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); }
  .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;
    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-wish.is-on { color:var(--bl-azure-600); }
  .card-wish.is-on svg { fill:currentColor; }

  .card-body { padding-block-start:var(--bl-space-5); 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; text-transform:none; }
  .card-title {
    font-size:var(--bl-text-body-md); font-weight:var(--bl-weight-medium);
    line-height:1.4; font-family:var(--bl-font-ui);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-block-size:2.8em;
  }
  :root[dir="rtl"] .card-title { font-family:var(--bl-font-ui-ar); }

  .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; }

  .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);
  }
  .card-add[disabled] { border-color:var(--bl-border-default); color:var(--bl-content-tertiary); cursor:not-allowed; }
  .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;
  }
  .card-add:not([disabled]):hover .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);
  }
  .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:not([disabled]):hover .c-tint   { translate:0 0; transition-delay:0ms; }
  .card-add:not([disabled]):hover .c-dark   { translate:0 0; transition-delay:90ms; }
  .card-add:not([disabled]):hover .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; }
  }

  /* ═════ EMPTY STATE ═════ */
  .empty {
    grid-column:1 / -1; text-align:center;
    padding-block:var(--bl-space-20);
    color:var(--bl-content-secondary);
  }
  .empty h3 { font-size:var(--bl-text-heading-md); margin-block-end:var(--bl-space-3); color:var(--bl-content-primary); }

  /* ═════ MARKET NOTE ═════ */
  .mkt-note {
    display:flex; align-items:flex-start; gap:var(--bl-space-3);
    padding:var(--bl-space-5) var(--bl-space-6);
    background:var(--bl-azure-50); border-radius:var(--bl-radius-lg);
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
    margin-block:var(--bl-space-8);
  }
  .mkt-note svg { flex:none; color:var(--bl-azure-700); margin-block-start:2px; }

  /* ═════ 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} }

  /* ═════ WISHLIST — copied from the homepage. Without this the panel has
     no hidden state (so it shows permanently) and the thumbnails have no
     size (so they render at full resolution). ═════ */
  .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; }

  /* ═════ 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; 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. */
  body { overflow-x:hidden; }
  .cart-drawer, .drawer { visibility:hidden; }
  .cart-drawer.is-open, .drawer.is-open { visibility:visible; }


  /* Checkbox — same control as the product page's bundle picker, defined
     here because this page does not carry that section. A native checkbox
     ignores width and height, so appearance:none is what makes it small. */
  .fbt-check {
    appearance:none; -webkit-appearance:none;
    inline-size:20px; block-size:20px; min-inline-size:20px; min-block-size:20px;
    flex:none; padding:0; margin:0;
    border:1.5px solid var(--bl-border-default); border-radius:4px;
    background:var(--bl-surface-page);
    display:grid; place-items:center;
    transition:background var(--bl-duration-fast) var(--bl-ease-standard),
               border-color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .fbt-check:checked { background:var(--bl-slate-900); border-color:var(--bl-slate-900); }
  .fbt-check:checked::after {
    content:""; inline-size:8px; block-size:4px;
    border-inline-start:2px solid var(--bl-white);
    border-block-end:2px solid var(--bl-white);
    rotate:-45deg; translate:0 -1px;
  }
  .fbt-check:focus-visible { outline:2px solid var(--bl-azure-600); outline-offset:2px; }

  /* ═════ 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: split screen ───────────────────────────────────
     One panel argues, the other collects. The two modes swap inside the
     right panel rather than on separate pages, so a customer who guessed
     wrong does not lose what they already typed.

     The block fills the viewport between header and footer: 100dvh less
     the header's height and the gap above it, with a floor so a short
     window never crushes the form. */
  .auth {
    display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
    margin-block:var(--bl-space-3) var(--bl-space-3);
    min-block-size:max(560px, calc(100dvh - 92px - var(--bl-space-3) * 3));
    border:1px solid var(--bl-border-subtle);
    border-radius:var(--bl-radius-lg); overflow:hidden;
  }
  @media (max-width:900px){
    .auth { grid-template-columns:1fr; min-block-size:0; }
  }

  .auth-media { position:relative; min-block-size:0; background:var(--bl-slate-100); }
  @media (max-width:900px){ .auth-media { min-block-size:300px; } }
  .auth-media img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
  .auth-note {
    position:absolute; inset-block-start:50%; inset-inline-start:50%;
    translate:-50% -50%; inline-size:min(80%, 340px);
    background:var(--bl-surface-page); padding:var(--bl-space-8);
  }
  .auth-note h2 { font-size:var(--bl-text-heading-md); margin-block-end:var(--bl-space-5); }
  .auth-note ul { display:flex; flex-direction:column; gap:var(--bl-space-4); }
  .auth-note li {
    display:grid; grid-template-columns:auto 1fr; gap:var(--bl-space-3); align-items:start;
    font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-medium);
    color:var(--bl-content-primary); line-height:1.5;
  }
  .auth-note svg { color:var(--bl-azure-600); flex:none; margin-block-start:2px; }

  /* The form panel scrolls inside its own column rather than stretching
     the block, so the two columns always end level. */
  .auth-form {
    padding:var(--bl-space-12); background:var(--bl-surface-page);
    overflow-y:auto; display:flex; flex-direction:column; justify-content:center;
  }
  @media (max-width:640px){ .auth-form { padding:var(--bl-space-6); } }
  .auth-form h1 { font-size:var(--bl-text-display-sm); margin-block-end:var(--bl-space-8); }

  /* Radios, so the choice reads as one question with two answers rather
     than two competing buttons. */
  .auth-modes { display:flex; flex-direction:column; gap:var(--bl-space-4); margin-block-end:var(--bl-space-8); }
  .auth-mode { display:grid; grid-template-columns:auto 1fr; gap:var(--bl-space-3); align-items:center; cursor:pointer; }
  .auth-mode .lbl {
    font-size:var(--bl-text-body-sm); font-weight:var(--bl-weight-semibold);
    letter-spacing:.08em; text-transform:uppercase; color:var(--bl-content-primary);
  }
  :root[dir="rtl"] .auth-mode .lbl { letter-spacing:0; text-transform:none; }
  .auth-radio {
    appearance:none; -webkit-appearance:none;
    inline-size:20px; block-size:20px; min-inline-size:20px; min-block-size:20px;
    margin:0; padding:0; flex:none;
    border:1.5px solid var(--bl-border-strong); border-radius:var(--bl-radius-full);
    background:var(--bl-surface-page); display:grid; place-items:center;
  }
  .auth-radio:checked::after { content:""; inline-size:10px; block-size:10px; border-radius:var(--bl-radius-full); background:var(--bl-slate-900); }
  .auth-radio:focus-visible { outline:2px solid var(--bl-azure-600); outline-offset:2px; }
  .auth-mode-note {
    grid-column:2; margin-block-start:var(--bl-space-2);
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6;
  }

  /* Underlined fields — lighter than boxes, and it suits a form this
     short. */
  .auth-form .field { margin-block-end:var(--bl-space-6); }
  .auth-form .field label { display:block; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); font-weight:var(--bl-weight-regular); margin-block-end:var(--bl-space-1); }
  .auth-form .field input, .auth-form .field select {
    inline-size:100%; padding:var(--bl-space-3) 0;
    border:0; border-block-end:1px solid var(--bl-border-default); border-radius:0;
    background:none; font-family:inherit; font-size:var(--bl-text-body-md); color:var(--bl-content-primary);
  }
  .auth-form .field input:focus, .auth-form .field select:focus {
    outline:0; border-block-end-color:var(--bl-slate-900); border-block-end-width:2px;
  }
  .auth-legal { margin-block:var(--bl-space-6) var(--bl-space-5); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }
  .auth-legal a { color:var(--bl-content-link); text-decoration:underline; }
  .auth-form .btn { inline-size:100%; }
  .auth-forgot { display:block; margin-block-start:var(--bl-space-4); text-align:center; font-size:var(--bl-text-body-sm); color:var(--bl-content-link); text-decoration:underline; }
  .auth-opt { display:flex; align-items:center; gap:var(--bl-space-3); margin-block-end:var(--bl-space-5); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .auth-pane { display:none; }
  .auth-pane.is-on { display:block; }

  .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; } }

  /* Demo-only language toggle. */
  .dir-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);
  }