*, *::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); }
  main { padding-inline:var(--bl-page-gutter); }

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


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

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


  /* ═════ PRODUCT PAGE ═════
     Gallery left, buy column right. The gallery is deliberately smaller
     than the reference and the detail column wider: this catalogue sells
     on ingredients and dosage, not on packshot glamour. */
  .pdp { display:grid; grid-template-columns:58fr 42fr; gap:var(--bl-space-16); align-items:start; margin-block:var(--bl-space-8) var(--bl-space-20); }
  @media (max-width:1024px){ .pdp { grid-template-columns:1fr; gap:var(--bl-space-10); } }

  .pdp-gallery { position:sticky; inset-block-start:120px; display:grid; grid-template-columns:76px 1fr; gap:var(--bl-space-4); }
  @media (max-width:1024px){ .pdp-gallery { position:static; } }
  @media (max-width:640px){ .pdp-gallery { grid-template-columns:1fr; } }

  .pdp-thumbs { display:flex; flex-direction:column; gap:var(--bl-space-3); }
  @media (max-width:640px){ .pdp-thumbs { flex-direction:row; overflow-x:auto; scrollbar-width:none; } }
  .pdp-thumb {
    inline-size:76px; block-size:76px; flex:none; padding:0; overflow:hidden;
    border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-sm);
    background:var(--bl-slate-50);
    transition:border-color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .pdp-thumb img { inline-size:100%; block-size:100%; object-fit:cover; }
  .pdp-thumb:hover { border-color:var(--bl-border-default); }
  .pdp-thumb.is-active { border-color:var(--bl-slate-900); }

  /* The shot opens to full size on click; the pointer says so. */
  .pdp-stage { position:relative; aspect-ratio:1; background:var(--bl-slate-50); border-radius:var(--bl-radius-md); overflow:hidden; }
  @media (hover:hover){ .pdp-stage { cursor:none; } }
  .pdp-stage img { inline-size:100%; block-size:100%; object-fit:cover; }
  .pdp-zoom {
    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"] .pdp-zoom { font-family:var(--bl-font-ui-ar); }
  .pdp-stage:hover .pdp-zoom { opacity:1; scale:1; }
  @media (hover:none){ .pdp-zoom { display:none; } }

  /* Lightbox */
  .lightbox {
    position:fixed; inset:0; z-index:var(--bl-z-modal);
    background:rgba(24,25,27,.92);
    display:grid; place-items:center; padding:var(--bl-space-10);
    opacity:0; visibility:hidden;
    transition:opacity var(--bl-duration-base) var(--bl-ease-standard), visibility var(--bl-duration-base);
  }
  .lightbox.is-open { opacity:1; visibility:visible; }
  .lightbox img { max-inline-size:min(92vw, 900px); max-block-size:88vh; object-fit:contain; border-radius:var(--bl-radius-md); background:var(--bl-white); }
  .lightbox-close {
    position:absolute; inset-block-start:var(--bl-space-6); inset-inline-end:var(--bl-space-6);
    inline-size:44px; block-size:44px; display:grid; place-items:center;
    color:var(--bl-white); border-radius:var(--bl-radius-full);
  }
  .lightbox-close:hover { background:rgba(255,255,255,.12); }

  /* The product shot carries the same badge as the cards, in the same
     corner — one status treatment across the site. */
  .pdp-flag {
    position:absolute; z-index:2;
    inset-block-start:var(--bl-space-5); inset-inline-start:var(--bl-space-5);
    display:inline-flex; align-items:center; gap:6px;
    padding:6px var(--bl-space-4);
    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"] .pdp-flag { letter-spacing:0; font-family:var(--bl-font-ui-ar); }

  /* ── buy column ─────────────────────────────────────────────── */
  .pdp-step { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bl-content-tertiary); font-weight:var(--bl-weight-medium); }
  :root[dir="rtl"] .pdp-step { letter-spacing:0; text-transform:none; }
  .pdp-title { font-size:var(--bl-text-display-sm); line-height:1.15; margin-block:var(--bl-space-3) var(--bl-space-4); }
  .pdp-price { display:flex; align-items:baseline; gap:var(--bl-space-3); }
  .pdp-price .price-now { font-size:var(--bl-text-heading-sm); }
  .price-save { font-size:var(--bl-text-caption); color:var(--bl-price-saving); font-weight:var(--bl-weight-medium); }
  .pdp-lede { margin-block:var(--bl-space-6) 0; color:var(--bl-content-secondary); max-inline-size:62ch; }

  /* The pack comes in one size, so this is a fact about the product, not a
     choice the customer makes. Styling it as a button would promise an
     option that does not exist. */
  .pdp-sizes { display:flex; gap:var(--bl-space-3); margin-block-start:var(--bl-space-8); }
  .pdp-size {
    display:inline-flex; align-items:center; gap:var(--bl-space-2);
    font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary);
  }
  .pdp-size svg { flex:none; color:var(--bl-content-tertiary); }

  .pdp-buy { display:flex; gap:var(--bl-space-3); align-items:stretch; margin-block-start:var(--bl-space-6); }
  .pdp-buy .qty { border-radius:var(--bl-radius-md); }
  .pdp-buy .qty button { inline-size:44px; block-size:100%; }
  .pdp-buy .card-add { margin:0; flex:1; }

  .pdp-assure { margin-block-start:var(--bl-space-6); display:flex; flex-direction:column; gap:var(--bl-space-3); }
  .pdp-assure div { display:flex; gap:var(--bl-space-3); align-items:flex-start; font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); }
  .pdp-assure svg { flex:none; color:var(--bl-content-tertiary); margin-block-start:2px; }

  /* Registration is a fact of the market record, not marketing. */

  /* ── facts strip ────────────────────────────────────────────── */
  /* Facts, stacked: label and value on one line, one fact per row. */
  .pdp-facts { margin-block-start:var(--bl-space-10); border-block-start:1px solid var(--bl-border-subtle); }
  /* Facts, stacked: the label sits above its value rather than beside it.
     Side by side, the buy column is too narrow and every value wrapped. */
  .pdp-fact {
    display:flex; flex-direction:column; gap:2px;
    padding-block:var(--bl-space-4);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  .pdp-fact dt { font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:var(--bl-weight-semibold); color:var(--bl-content-tertiary); }
  :root[dir="rtl"] .pdp-fact dt { letter-spacing:0; text-transform:none; }
  .pdp-fact dd { font-size:var(--bl-text-body-sm); color:var(--bl-content-primary); line-height:1.5; }
  /* The ingredients row keeps its button on the value line. */
  .pdp-fact:has(.pdp-more) { display:grid; grid-template-columns:1fr auto; align-items:center; }
  .pdp-fact:has(.pdp-more) dt { grid-column:1; }
  .pdp-fact:has(.pdp-more) dd { grid-column:1; }
  .pdp-fact .pdp-more { grid-column:2; grid-row:1 / span 2; }
  .pdp-more {
    inline-size:30px; block-size:30px; flex:none;
    display:grid; place-items:center; border-radius:var(--bl-radius-full);
    background:var(--bl-slate-900); color:var(--bl-white); font-size:var(--bl-text-body-md); line-height:1;
    transition:scale var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .pdp-more:hover { scale:1.08; }

  /* Ingredients overlay — three actives up front, the rest inside. */
  .ing-drawer {
    position:fixed; inset-block:0; inset-inline-end:0; z-index:var(--bl-z-drawer);
    inline-size:min(92vw, 460px); 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"] .ing-drawer { translate:-100% 0; box-shadow:18px 0 48px rgba(24,25,27,.12); }
  .ing-drawer.is-open, :root[dir="rtl"] .ing-drawer.is-open { translate:0 0; }
  .ing-body { flex:1; overflow-y:auto; padding:var(--bl-space-6); }
  .ing-key { display:flex; flex-direction:column; gap:var(--bl-space-6); margin-block-end:var(--bl-space-8); }
  .ing-key li { display:grid; grid-template-columns:52px 1fr; gap:var(--bl-space-4); align-items:start; }
  .ing-dot { inline-size:52px; block-size:52px; border-radius:var(--bl-radius-full); background:var(--bl-azure-50); display:grid; place-items:center; font-family:var(--bl-font-display); font-size:var(--bl-text-body-lg); color:var(--bl-azure-700); }
  .ing-key h4 { 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"] .ing-key h4 { font-family:var(--bl-font-ui-ar); }
  .ing-key p { font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }
  .ing-full { padding-block-start:var(--bl-space-6); border-block-start:1px solid var(--bl-border-subtle); }
  .ing-note { margin-block-start:var(--bl-space-5); padding:var(--bl-space-4); background:var(--bl-azure-50); border-radius:var(--bl-radius-md); font-size:var(--bl-text-caption); color:var(--bl-content-secondary); line-height:1.6; }
  .ing-full h3 { font-family:var(--bl-font-ui); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bl-content-tertiary); margin-block-end:var(--bl-space-3); }
  :root[dir="rtl"] .ing-full h3 { letter-spacing:0; text-transform:none; font-family:var(--bl-font-ui-ar); }

  /* Frequently bought together — the products run across, so the pack is
     read as one thing before the maths is offered. */
  /* Frequently bought together — the row sizes to its contents and sits
     centred, so two products do not have to fill a four-product width. */
  /* The gap inside the product row is fixed; the gap to the tally is twice
     it, so the products read as one group and the sum as a separate one. */
  .fbt { display:flex; justify-content:center; align-items:stretch; gap:var(--bl-space-12); flex-wrap:wrap; }
  .fbt-items { display:flex; align-items:stretch; gap:var(--bl-space-6); }
  .fbt-item {
    flex:1 1 0; min-inline-size:0; max-inline-size:225px;
    display:flex; flex-direction:column; gap:var(--bl-space-2);
    padding:var(--bl-space-3);
    border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-md);
    transition:border-color var(--bl-duration-fast) var(--bl-ease-standard);
  }
  .fbt-item:hover { border-color:var(--bl-border-default); }
  .fbt-item img { inline-size:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--bl-radius-sm); background:var(--bl-slate-50); }
  /* The checkbox belongs with the name it selects, and aligns to the first
     line of it rather than to the middle of a two-line name. */
  .fbt-name { display:flex; align-items:flex-start; gap:var(--bl-space-2); }
  .fbt-item h3 { font-family:var(--bl-font-ui); font-size:var(--bl-text-caption); font-weight:var(--bl-weight-medium); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  :root[dir="rtl"] .fbt-item h3 { font-family:var(--bl-font-ui-ar); }
  .fbt-item .this { font-size:10px; color:var(--bl-content-tertiary); }
  .fbt-item .price-now { font-size:var(--bl-text-body-sm); margin-block-start:auto; }
  /* A native checkbox ignores width and height — the browser draws the
     control at its own size and reserves its own box. appearance:none
     removes both, so the square below is the whole control. */
  .fbt-check {
    appearance:none; -webkit-appearance:none;
    inline-size:24px; block-size:24px; min-inline-size:24px; min-block-size:24px;
    flex:none; padding:0; margin:0;
    border:1.5px solid var(--bl-border-default); border-radius:5px;
    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:9px; block-size:5px;
    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; }
  /* The plus sits between the products, not inside one. */
  .fbt-plus { align-self:center; font-size:var(--bl-text-heading-sm); color:var(--bl-content-tertiary); flex:none; }
  @media (max-width:520px){ .fbt-items { flex-direction:column; } .fbt-plus { display:none; } }

  /* The tally is a sum: one line per chosen product, a rule, then the
     total — read the way a receipt is read. It matches the height of the
     products beside it. */
  .fbt-sum {
    inline-size:min(300px, 100%); align-self:stretch;
    display:flex; flex-direction:column;
    padding:var(--bl-space-5);
    border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-md);
    background:var(--bl-surface-raised);
  }
  .fbt-sum h3 { font-family:var(--bl-font-ui); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bl-content-tertiary); font-weight:var(--bl-weight-semibold); margin-block-end:var(--bl-space-4); }
  :root[dir="rtl"] .fbt-sum h3 { letter-spacing:0; text-transform:none; font-family:var(--bl-font-ui-ar); }
  .fbt-line { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bl-space-4); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); padding-block:var(--bl-space-2); }
  .fbt-line .n { flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fbt-line .v { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .fbt-rule { margin-block:var(--bl-space-3); border:0; border-block-start:1px solid var(--bl-border-default); }
  .fbt-total { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bl-space-4); font-size:var(--bl-text-body-lg); font-weight:var(--bl-weight-semibold); color:var(--bl-content-primary); }
  .fbt-total .v { font-variant-numeric:tabular-nums; }
  .fbt-sum .btn { inline-size:100%; margin-block-start:var(--bl-space-5); }
  .fbt-save { color:var(--bl-price-saving); font-weight:var(--bl-weight-medium); }

  /* ── detail sections ────────────────────────────────────────── */
  .pdp-section { padding-block:var(--bl-space-16); border-block-end:1px solid var(--bl-border-subtle); }
  .pdp-section > h2 { font-size:var(--bl-text-heading-lg); margin-block-end:var(--bl-space-8); }
  .pdp-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--bl-space-16); align-items:start; }
  @media (max-width:900px){ .pdp-cols { grid-template-columns:1fr; gap:var(--bl-space-8); } }
  .pdp-body p { margin-block-end:var(--bl-space-4); color:var(--bl-content-secondary); max-inline-size:70ch; }
  .pdp-body strong { color:var(--bl-content-primary); font-weight:var(--bl-weight-semibold); }
  .pdp-list { display:flex; flex-direction:column; gap:var(--bl-space-4); }
  .pdp-list li { display:grid; grid-template-columns:auto 1fr; gap:var(--bl-space-3); font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }
  .pdp-list .n { inline-size:22px; block-size:22px; border-radius:var(--bl-radius-full); background:var(--bl-slate-900); color:var(--bl-white); display:grid; place-items:center; font-size:11px; font-weight:var(--bl-weight-semibold); font-variant-numeric:tabular-nums; }
  .pdp-list .tick { color:var(--bl-azure-600); }

  /* Actives — the reason this brand is not a beauty brand. */
  .actives { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bl-space-5); }
  @media (max-width:900px){ .actives { grid-template-columns:1fr 1fr; } }
  .active-card { padding:var(--bl-space-6); border:1px solid var(--bl-border-subtle); border-radius:var(--bl-radius-lg); background:var(--bl-surface-page); }
  .active-card h3 { font-family:var(--bl-font-display); font-size:var(--bl-text-heading-sm); margin-block-end:var(--bl-space-2); }
  .active-card p { font-size:var(--bl-text-body-sm); color:var(--bl-content-secondary); line-height:1.6; }

  /* ── FAQ accordion ──────────────────────────────────────────── */
  .faq { border-block-start:1px solid var(--bl-border-subtle); }
  .faq-q {
    inline-size:100%; display:flex; align-items:center; justify-content:space-between;
    gap:var(--bl-space-5); padding-block:var(--bl-space-5); text-align:start;
    font-family:var(--bl-font-ui); font-size:var(--bl-text-body-md); font-weight:var(--bl-weight-medium);
    border-block-end:1px solid var(--bl-border-subtle);
  }
  :root[dir="rtl"] .faq-q { font-family:var(--bl-font-ui-ar); }
  .faq-q .sign { flex:none; transition:rotate var(--bl-duration-base) var(--bl-ease-standard); }
  .faq-q[aria-expanded="true"] .sign { rotate:45deg; }
  .faq-a { display:none; padding-block:var(--bl-space-4) var(--bl-space-6); border-block-end:1px solid var(--bl-border-subtle); color:var(--bl-content-secondary); max-inline-size:80ch; }
  .faq-a.is-open { display:block; }

  /* ── related ────────────────────────────────────────────────── */
  .pdp-related { padding-block:var(--bl-space-16); }
  .pdp-related h2 { font-size:var(--bl-text-heading-lg); margin-block-end:var(--bl-space-8); }

  /* Live search results — the catalogue is small enough that a query can
     be answered in the overlay itself, without a round trip to a page. */
  .search-results { margin-block-start:var(--bl-space-6); }
  .search-hint { font-size:var(--bl-text-body-sm); color:var(--bl-content-tertiary); }
  .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); }

  /* ═════ TRUST STRIP — copied from the homepage ═════ */
  .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} }

  /* Off-canvas panels are position:fixed, so they escape any overflow rule
     on <body> — the parked drawers still widened the viewport, which read
     as a grey band down the trailing edge. Clipping the root is what
     actually contains them. */
  body { overflow-x:hidden; }
  .cart-drawer, .ing-drawer, .drawer { visibility:hidden; }
  .cart-drawer.is-open, .ing-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-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);
  }