/* The site's own styles. Kept out of the pages themselves so a visitor
   downloads them once and every next page arrives half the size. Edited
   here, not in the layout; a page's own bits still go in @section('page_style'). */
:root{
    --cream:#FBF4EA;
    --cream-2:#F3E4D0;
    --paper:#FFFDF9;
    --cocoa:#3A2617;
    --cocoa-2:#6B4630;
    --cocoa-soft:rgba(58,38,23,.72);
    --cocoa-faint:rgba(58,38,23,.38);
    --gold:#C08A3E;
    --gold-deep:#9C6C2A;
    --terracotta:#B5533F;
    --red:#B5473F;
    --line:rgba(58,38,23,.14);
    --shadow: 0 20px 50px -20px rgba(58,38,23,.25);
    --shadow-sm: 0 8px 24px -12px rgba(58,38,23,.25);
    --shadow-strong: rgba(58,38,23,.5);
    /* The wide bands (footer, Instagram call-out): milk poured into the
       logo's orange, with chocolate letters on top. */
    --band:#FFE7CB;
    --band-mid:#FFC48A;
    --band-2:#FF9A4F;
    --on-band:#3A2617;
    --on-band-soft:rgba(58,38,23,.74);
    --band-line:rgba(58,38,23,.2);
    --header-bg:rgba(251,244,234,.85);
    --glass:rgba(255,253,249,.92);
    --hero-mid:#E7C9A0;
    --media-end:#EAD2AE;
    --highlight:rgba(255,255,255,.55);
    --dot:rgba(58,38,23,.10);
    --ring:rgba(58,38,23,.35);
    --ok-bg:#EAF3E7; --ok-fg:#3C6B32; --ok-line:#C6E0BE;
    --err-bg:#FBEAE8; --err-fg:#8C3229; --err-line:#F1C6C0;
    color-scheme: light;
    --radius: 1.5rem;
    --radius-sm: .9rem;
    /* The logo's own orange: its two ends and the gradient between them,
       used by everything the customer is meant to press. */
    --flame:#FA7512; --flame-2:#F05420;
    --flame-grad:linear-gradient(120deg, #FF8401 0%, #F86E17 45%, #F05420 100%);
    --flame-shadow:rgba(240,84,32,.45);
    /* San Francisco: on an iPhone or a Mac the system gives us the real one,
       everywhere else Inter stands in for it, and it is drawn to match. */
    --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", Roboto,
          "Apple Color Emoji", "Segoe UI Emoji",
          ui-sans-serif, system-ui, sans-serif;
    --serif: var(--sf);
    --sans: var(--sf);
    --dur: 500ms;
    --ease: cubic-bezier(.16,1,.3,1);
  }

  /* Dark theme: only for a visitor who asks for it with the header switch.
     The shop itself is light, whatever the phone's own setting says. The
     choice is stored and applied before first paint in <head>. */
  @media (prefers-color-scheme: dark){
    :root[data-theme="dark"]{
      --cream:#17110D; --cream-2:#241A13; --paper:#1F1712;
      --cocoa:#F3E6D6; --cocoa-2:#DCC3A6;
      --cocoa-soft:rgba(243,230,214,.72); --cocoa-faint:rgba(243,230,214,.4);
      --gold:#D6A35A; --gold-deep:#E3B56E; --terracotta:#D46A4F; --red:#E3695C;
      --line:rgba(243,230,214,.12);
      --shadow: 0 20px 50px -20px rgba(0,0,0,.65);
      --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);
      --shadow-strong: rgba(0,0,0,.7);
      --band:#43260F; --band-mid:#311908; --band-2:#201005;
      --on-band:#FFEAD5; --on-band-soft:rgba(255,234,213,.74); --band-line:rgba(255,234,213,.18);
      --header-bg:rgba(23,17,13,.85);
      --glass:rgba(31,23,18,.9);
      --hero-mid:#4A3322; --media-end:#3A2A1D;
      --highlight:rgba(255,255,255,.06);
      --dot:rgba(243,230,214,.08); --ring:rgba(243,230,214,.3);
      --ok-bg:#15261A; --ok-fg:#9BD28C; --ok-line:#2B4A2F;
      --err-bg:#2A1614; --err-fg:#F2A39A; --err-line:#5A2A25;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --cream:#17110D; --cream-2:#241A13; --paper:#1F1712;
    --cocoa:#F3E6D6; --cocoa-2:#DCC3A6;
    --cocoa-soft:rgba(243,230,214,.72); --cocoa-faint:rgba(243,230,214,.4);
    --gold:#D6A35A; --gold-deep:#E3B56E; --terracotta:#D46A4F; --red:#E3695C;
    --line:rgba(243,230,214,.12);
    --shadow: 0 20px 50px -20px rgba(0,0,0,.65);
    --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-strong: rgba(0,0,0,.7);
    --band:#43260F; --band-mid:#311908; --band-2:#201005;
    --on-band:#FFEAD5; --on-band-soft:rgba(255,234,213,.74); --band-line:rgba(255,234,213,.18);
    --header-bg:rgba(23,17,13,.85);
    --glass:rgba(31,23,18,.9);
    --hero-mid:#4A3322; --media-end:#3A2A1D;
    --highlight:rgba(255,255,255,.06);
    --dot:rgba(243,230,214,.08); --ring:rgba(243,230,214,.3);
    --ok-bg:#15261A; --ok-fg:#9BD28C; --ok-line:#2B4A2F;
    --err-bg:#2A1614; --err-fg:#F2A39A; --err-line:#5A2A25;
    color-scheme: dark;
  }
  body{ transition:background-color .3s, color .3s; }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--cream); color:var(--cocoa);
    font-family:var(--sans); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,p{ margin:0; }
  button{ font:inherit; cursor:pointer; }
  label{ display:block; font-size:.875rem; font-weight:600; margin-bottom:.4rem; }
  input,textarea,select{
    font:inherit; width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.7rem;
    background:var(--paper); color:var(--cocoa); transition:border-color .2s;
  }
  input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--gold); }
  .field{ margin-bottom:1.25rem; }
  .error-text{ color:var(--red); font-size:.8125rem; margin-top:.35rem; }
  .alert{ padding:1rem 1.25rem; border-radius:.9rem; font-size:.9375rem; margin-bottom:1.5rem; }
  .alert-success{ background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-line); }
  .alert-error{ background:var(--err-bg); color:var(--err-fg); border:1px solid var(--err-line); }

  .wrap{ max-width:76rem; margin:0 auto; padding-inline:1.5rem; }
  @media (min-width:768px){ .wrap{ padding-inline:2.5rem; } }
  .wrap-narrow{ max-width:34rem; margin:0 auto; padding-inline:1.5rem; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--sans); font-weight:600; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-deep);
  }

  h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--cocoa); }
  h1{ font-size:clamp(2.25rem, 5vw, 3.75rem); line-height:1.08; }
  h2{ font-size:clamp(1.875rem, 3.4vw, 2.75rem); line-height:1.15; }
  h3{ font-size:1.375rem; line-height:1.3; }
  .lede{ font-size:1.125rem; color:var(--cocoa-soft); max-width:34rem; }

  /* ---------- decorative blobs ---------- */
  /* Clipped in a box of their own: sticking out past the screen's edge, they made
     phones lay the page out wider than the screen (it slid sideways, and the
     full-screen menu slid off to the right). */
  .blobs{ position:absolute; top:0; left:0; right:0; height:64rem; overflow:hidden; pointer-events:none; z-index:0; }
  .blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0;
    animation:drift 26s ease-in-out infinite; will-change:transform; }
  .blob.b2{ animation-duration:34s; animation-direction:reverse; }
  .blob.b3{ animation-duration:30s; animation-delay:-9s; }
  /* They never stop: a slow round the page, each at its own pace. */
  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); }
    25%{ transform:translate(4rem,-2.5rem) scale(1.09); }
    50%{ transform:translate(2rem,3.5rem) scale(.95); }
    75%{ transform:translate(-3.5rem,1rem) scale(1.06); }
    100%{ transform:translate(0,0) scale(1); }
  }
  @keyframes float-y{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-.6rem); }
  }
  @media (prefers-reduced-motion:reduce){
    .blob{ animation:none; }
  }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:1rem 1.75rem; border-radius:999px; font-weight:600; font-size:.9375rem;
    border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
    white-space:nowrap; cursor:pointer;
  }
  .btn-primary{ background:var(--flame-grad); color:#fff; box-shadow:0 12px 26px -14px var(--flame-shadow); transition:filter .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
  .btn-primary:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 18px 34px -12px var(--flame-shadow); }
  .btn-ghost{ background:transparent; color:var(--cocoa); border-color:var(--line); }
  /* The quiet button fills with honey under the cursor. */
  .btn-ghost{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s, color .35s; }
  .btn-ghost:hover{ background:linear-gradient(120deg, #FFDE8A 0%, #FFC83D 55%, #F5B301 100%); border-color:transparent;
    color:#3A2617; transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(245,179,1,.7); }
  .btn-block{ width:100%; }
  .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
  .btn svg{ width:1rem; height:1rem; transition:transform .3s var(--ease); }
  .btn:hover svg{ transform:translate(3px,-3px); }

  /* ---------- a password typed once ---------- */
  /* The sign-up asks for it one time now; the eye is what catches a typo. */
  .pw{ position:relative; }
  .pw input{ padding-inline-end:3rem; }
  .pw-eye{ position:absolute; inset-inline-end:.45rem; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
    padding:0; border:0; border-radius:50%; background:none; cursor:pointer;
    color:var(--cocoa-soft); opacity:.65; transition:opacity .2s, background .2s; }
  .pw-eye:hover, .pw-eye:focus-visible{ opacity:1; background:var(--cream-2); }
  .pw-eye.on{ opacity:1; color:var(--cocoa); }
  .pw-eye svg{ width:1.15rem; height:1.15rem; }
  .pw-eye .shut{ display:none; }
  .pw-eye.on .open{ display:none; }
  .pw-eye.on .shut{ display:block; }

  /* ---------- header ---------- */
  /* The bar does not switch states, it follows the page. --sc is how far the
     visitor has scrolled into the first 140 px, 0 to 1, written by the script
     at the foot of the layout; everything below is a function of it, so the
     bar thickens, clouds over and settles its shadow in step with the finger
     instead of snapping at one pixel. The hard hairline underneath is gone:
     what ends the bar now is a short gradient the content melts into. */
  header{
    --sc:0;
    position:sticky; top:0; z-index:50; isolation:isolate;
    padding:calc(1.25rem - .40rem * var(--sc)) 0;
    background:transparent;
    backdrop-filter:blur(calc(4px + 12px * var(--sc))) saturate(calc(100% + 55% * var(--sc)));
    -webkit-backdrop-filter:blur(calc(4px + 12px * var(--sc))) saturate(calc(100% + 55% * var(--sc)));
    box-shadow:0 calc(9px * var(--sc)) calc(26px * var(--sc)) rgba(58,38,23,calc(.09 * var(--sc)));
  }
  header::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:var(--header-bg); opacity:calc(.5 + .5 * var(--sc));
  }
  /* The meniscus: the bar's own colour, fading out over a centimetre, so the
     page slides under it instead of being cut off by a line. */
  header::after{
    content:''; position:absolute; left:0; right:0; top:100%; height:1.5rem; z-index:-1;
    pointer-events:none; opacity:var(--sc);
    background:linear-gradient(to bottom, var(--header-bg), transparent);
  }
  header .brand img{ height:calc(5.9rem - 1.35rem * var(--sc)); }
  /* Nothing to animate when the visitor has asked for stillness: the bar
     still follows the scroll, which is the page moving, not an effect. */
  @media (prefers-reduced-motion: reduce){
    header{ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  /* The mark is on every page, so it is the one place where a little
     movement earns its keep: it arrives with the page, a slow gleam crosses
     the letters now and then the way light runs over a wrapper when the box
     is turned, and it leans towards the cursor. The gleam is painted through
     the logo's own shape, so nothing of it falls on the paper around it. */
  /* The mark never gives up its width: the bar is a flex row, and a longer
     menu used to squeeze it to nothing just above 900px. */
  .brand{ display:flex; align-items:center; gap:.6rem; position:relative; flex:none; }
  .brand img{ height:5.9rem; width:auto; display:block;
    transition:transform .35s cubic-bezier(.2,.8,.3,1.25);
    animation:brand-in .55s cubic-bezier(.2,.8,.3,1) backwards; }
  .brand:hover img{ transform:scale(1.045) rotate(-1.5deg); }
  .brand::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    -webkit-mask:url(/images/logo.svg) center/contain no-repeat;
            mask:url(/images/logo.svg) center/contain no-repeat;
    background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.92) 50%, transparent 58%);
    background-size:280% 100%; background-position:170% 0;
    animation:brand-gleam 7s ease-in-out 1.6s infinite;
  }
  @keyframes brand-in{ from{ opacity:0; transform:translateY(-7px) scale(.94); } }
  @keyframes brand-gleam{ 0%, 74%{ background-position:170% 0; } 94%, 100%{ background-position:-70% 0; } }
  .footer-brand .brand img{ height:6.6rem; }
  /* A visitor who has asked for less movement gets the mark standing still. */
  @media (prefers-reduced-motion: reduce){
    .brand img, .brand::after{ animation:none; }
    .brand:hover img{ transform:none; }
  }
  nav.primary{ display:none; align-items:center; gap:2rem; font-weight:500; font-size:.9375rem; color:var(--cocoa-soft); }
  nav.primary a{ transition:color .25s; position:relative; }
  /* A line standing on the bar in its own right can carry its badge there. */
  nav.primary a.nav-top{ display:inline-flex; align-items:center; }
  nav.primary a:hover{ color:var(--cocoa); }
  /* A menu word never breaks across lines, and between 900px and 1150px —
     where the bar first appears and is tightest — the words close ranks. */
  nav.primary > a, nav.primary .nav-drop > button{ white-space:nowrap; }
  /* The bar carries one more word than it used to, so it waits for the room
     to hold it; below this the burger menu has everything. */
  @media (min-width:980px){ nav.primary{ display:flex; } }
  @media (min-width:980px) and (max-width:1150px){ nav.primary{ gap:1rem; font-size:.9rem; } }
  /* Where the bar only just holds its words, the badge is the first thing
     to go rather than the header spilling off-screen. Only the badge ON the
     bar: the drop-down panel is absolutely positioned and costs the bar
     nothing, so the badge stays there, and in the drawer. */
  @media (max-width:1100px){ nav.primary > a .ni-badge{ display:none; } }
  /* Russian says the same things in longer words — «Как это работает» against
     «Necə İşləyir», «Регистрация» against «Qeydiyyat» — and a stylesheet
     cannot measure them. Measured by hand instead: there the bar waits for
     more room, and the badge for more still, rather than pushing the sign-up
     button off the edge of the screen. */
  @media (max-width:1120px){
    html[lang="ru"] nav.primary{ display:none; }
    html[lang="ru"] .menu-btn{ display:flex; }
  }
  @media (max-width:1220px){ html[lang="ru"] nav.primary > a .ni-badge{ display:none; } }
  /* A line the owner has not opened yet: the word is there, with its badge,
     and nothing happens when it is pressed. */
  nav.primary .nav-top.is-shut{ color:var(--cocoa-faint); cursor:default; }
  .nav-panel .nav-item.is-shut{ cursor:default; color:var(--cocoa-soft); }
  .nav-panel .nav-item.is-shut:hover{ background:none; }
  .nav-panel .nav-item.is-shut:hover .ni-ico{ background:var(--cream-2); }
  .mobile-nav .is-shut{ display:block; padding:.55rem 0; color:var(--cocoa-faint); cursor:default; }
  .footer-col .is-shut{ display:block; padding:.3rem 0; font-size:.9375rem; opacity:.65; cursor:default; }
  /* drop-downs: open on hover or focus, and on a tap for touch screens (the script adds .open) */
  .nav-drop{ position:relative; }
  .nav-drop > button:not(.icon-btn){ background:none; border:0; padding:0; color:inherit; font:inherit; display:inline-flex; align-items:center; gap:.35rem; transition:color .25s; }
  .nav-drop > button:not(.icon-btn):hover{ color:var(--cocoa); }
  .nav-drop > button svg:not(.flag){ width:.8rem; height:.8rem; transition:transform .25s var(--ease); }
  /* The little arrow of a menu turns over; a flag is not an arrow. */
  .nav-drop:hover > button svg:not(.flag), .nav-drop.open > button svg:not(.flag){ transform:rotate(180deg); }
  .account-drop > button svg{ width:1.15rem; height:1.15rem; transform:none !important; color:var(--cocoa); }
  .nav-panel{ position:absolute; top:calc(100% + .9rem); left:50%; z-index:60; min-width:17.5rem; padding:.45rem; border-radius:1rem;
    background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translate(-50%, 6px); transition:opacity .2s, transform .2s var(--ease), visibility .2s; }
  .nav-panel::before{ content:''; position:absolute; left:0; right:0; top:-1rem; height:1rem; }
  .nav-panel.right{ left:auto; right:0; min-width:14rem; transform:translateY(6px); }
  .nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel, .nav-drop.open .nav-panel{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
  .nav-drop:hover .nav-panel.right, .nav-drop:focus-within .nav-panel.right, .nav-drop.open .nav-panel.right{ transform:none; }
  .nav-item{ display:flex; width:100%; gap:.75rem; align-items:center; padding:.6rem .7rem; border-radius:.7rem; color:var(--cocoa);
    background:none; border:0; text-align:left; font:inherit; }
  .nav-item:hover, .nav-item:focus-visible{ background:var(--cream-2); outline:none; }
  .ni-ico{ width:2.3rem; height:2.3rem; border-radius:.7rem; background:var(--cream-2); display:grid; place-items:center; font-size:1.15rem; flex:none; }
  .nav-item:hover .ni-ico{ background:var(--paper); }
  .nav-item b{ display:block; font-weight:600; font-size:.9rem; }
  .nav-item small{ display:block; font-size:.78rem; color:var(--cocoa-soft); font-weight:400; }
  .nav-who{ padding:.5rem .7rem .4rem; font-size:.78rem; font-weight:600; color:var(--cocoa-soft); border-bottom:1px solid var(--line); margin-bottom:.3rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-actions{ display:flex; align-items:center; gap:.75rem; }
  .header-cta{ display:none; }
  @media (min-width:980px){ .header-cta{ display:inline-flex; } }
  .icon-btn{
    position:relative; display:flex; width:2.75rem; height:2.75rem; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--line); background:var(--paper); font-size:1.15rem; flex:none;
    transition:border-color .3s, box-shadow .3s, color .3s, transform .3s var(--ease);
  }
  /* The round buttons light up in the logo's orange under the cursor. */
  .icon-btn:hover{ border-color:rgba(250,117,18,.65); box-shadow:0 10px 22px -12px var(--flame-shadow); color:var(--flame-2); transform:translateY(-2px); }
  .cart-ico{ width:1.45rem; height:1.45rem; display:block; }
  .cart-empty .ico .cart-ico{ width:3.5rem; height:3.5rem; margin-inline:auto; }
  .icon-btn .badge{
    position:absolute; top:-.25rem; right:-.25rem; min-width:1.25rem; height:1.25rem; padding:0 .25rem; border-radius:999px;
    background:var(--flame-grad); color:#fff; font-size:.6875rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .theme-btn{ color:var(--cocoa); transition:transform .3s var(--ease), background .3s; }
  .theme-btn:hover{ transform:rotate(-12deg) translateY(-2px); }
  .theme-btn svg{ width:1.2rem; height:1.2rem; }
  .theme-btn .sun{ display:none; }
  :root[data-theme="dark"] .theme-btn .sun{ display:block; }
  :root[data-theme="dark"] .theme-btn .moon{ display:none; }
  .menu-btn span{ display:block; width:1.1rem; height:2px; background:var(--cocoa); position:relative; }
  .menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:100%; height:2px; background:var(--cocoa); }
  .menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
  @media (min-width:980px){ .menu-btn{ display:none; } }

  .mobile-nav{
    position:fixed; inset:0; z-index:80; background:var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.75rem;
    opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; transform:none; }
  .mobile-nav{ overflow-y:auto; justify-content:flex-start; padding:5rem 1.5rem 2rem; gap:1.5rem; }
  .mobile-nav a, .mobile-nav form button{ font-family:var(--serif); font-size:1.35rem; }
  .mn-group{ display:flex; flex-direction:column; align-items:center; gap:.7rem; width:100%; max-width:20rem; }
  .mn-group + .mn-group{ border-top:1px solid var(--line); padding-top:1.25rem; }
  .mn-head{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
  .mobile-nav form button{ background:none; border:0; color:inherit; padding:0; }
  .mobile-nav .close-btn{ position:absolute; top:1.5rem; right:1.5rem; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }

  /* ---------- page header (non-home pages) ---------- */
  /* ---------- what customers say ---------- */
  /* Stars out of five. The lit row is clipped over the dim one, so a 4.3 and
     a 4.7 do not draw the same thing. */
  .stars{ position:relative; display:inline-block; white-space:nowrap; line-height:1; letter-spacing:.06em; }
  .stars-dim{ color:var(--line); }
  .stars-lit{
    position:absolute; inset:0 auto 0 0; overflow:hidden; color:#E8A317;
  }
  .rv-standing{
    display:grid; gap:1.5rem; align-items:center; padding:1.25rem;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
    margin-bottom:2rem;
  }
  @media (min-width:640px){ .rv-standing{ grid-template-columns:auto 1fr; gap:2.5rem; } }
  .rv-avg{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
  .rv-avg b{ font-size:2.75rem; line-height:1; font-variant-numeric:tabular-nums; }
  .rv-avg .stars{ font-size:1.125rem; }
  .rv-avg small{ font-size:.8125rem; color:var(--cocoa-soft); }
  .rv-bars{ display:flex; flex-direction:column; gap:.3rem; }
  .rv-bar{ display:flex; align-items:center; gap:.6rem; font-size:.8125rem; color:var(--cocoa-soft); }
  .rv-bar-n{ width:2rem; flex:none; font-variant-numeric:tabular-nums; }
  .rv-bar-rail{ flex:1; height:.5rem; border-radius:999px; background:var(--cream); overflow:hidden; }
  .rv-bar-fill{ display:block; height:100%; background:#E8A317; border-radius:999px; }
  .rv-bar-how{ width:1.75rem; text-align:right; flex:none; font-variant-numeric:tabular-nums; }
  .rv-list{ display:flex; flex-direction:column; gap:1rem; }
  .rv-card{ padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); }
  .rv-head{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; }
  .rv-head .stars{ font-size:.9375rem; }
  .rv-who{ font-size:.9375rem; }
  .rv-when{ font-size:.75rem; color:var(--cocoa-soft); margin-left:auto; }
  .rv-what{ display:inline-block; margin-top:.4rem; font-size:.8125rem; color:var(--gold-deep); text-decoration:underline; }
  .rv-body{ margin:.6rem 0 0; line-height:1.65; }
  .rv-shot{ display:block; margin-top:.8rem; max-width:14rem; }
  .rv-shot img{ width:100%; border-radius:.7rem; display:block; }
  .rv-reply{
    margin-top:.9rem; padding:.7rem .85rem; border-left:2px solid var(--gold-deep);
    background:var(--cream); border-radius:0 .5rem .5rem 0;
  }
  .rv-reply b{ font-size:.8125rem; color:var(--gold-deep); }
  .rv-reply p{ margin:.2rem 0 0; font-size:.875rem; line-height:1.6; }
  .rv-line{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem; font-size:.9375rem; }
  .rv-line .stars{ font-size:1.0625rem; }
  .rv-line span{ color:var(--cocoa-soft); font-size:.8125rem; }
  /* Choosing the stars: five labels a finger can hit, biggest first. */
  .rv-pick{ display:flex; flex-direction:column; gap:.4rem; }
  .rv-pick label{ display:flex; align-items:center; gap:.7rem; cursor:pointer; padding:.5rem .7rem;
    border:1px solid var(--line); border-radius:.6rem; transition:border-color .15s, background .15s; }
  .rv-pick label:hover{ border-color:var(--gold-deep); background:var(--cream); }
  .rv-pick input{ accent-color:var(--gold-deep); }
  .rv-pick input:checked + span{ color:#E8A317; }
  .rv-pick span{ font-size:1.25rem; letter-spacing:.1em; color:var(--line); line-height:1; }

  /* ---------- the pages that answer before anybody buys ---------- */
  /* A row of buttons under a section or at the foot of one of these pages. */
  .section-foot{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
  .section-foot.center{ justify-content:center; }
  .how-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
  .how-outro{ margin-top:2rem; font-weight:600; }
  /* The ways to reach a person: each one a whole tap target. */
  .ways{ display:grid; gap:.7rem; margin-bottom:2.5rem; }
  @media (min-width:640px){ .ways{ grid-template-columns:1fr 1fr; } }
  .way{
    display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
    transition:border-color .15s, transform .15s;
  }
  .way:hover{ border-color:var(--gold-deep); transform:translateY(-1px); }
  .way-ico{ font-size:1.5rem; line-height:1; display:grid; place-items:center; width:1.75rem; flex:none; }
  .way-ico svg{ width:1.5rem; height:1.5rem; }
  .way-text{ display:flex; flex-direction:column; min-width:0; }
  .way-text b{ font-size:1rem; }
  .way-text small{ font-size:.8125rem; color:var(--cocoa-soft); margin-top:.1rem; }
  .ct-h2{ font-size:1.375rem; margin:0 0 .6rem; }
  .ct-p{ color:var(--cocoa-soft); line-height:1.7; margin:0 0 2.5rem; }
  .ct-form h2{ font-size:1.25rem; margin:0 0 .35rem; }
  .ct-note{ font-size:.875rem; color:var(--cocoa-soft); margin:0 0 1.2rem; }
  .ct-thanks{
    margin:0 0 1.2rem; padding:.7rem .9rem; border-radius:.7rem; font-weight:600; font-size:.9375rem;
    background:rgba(31,91,67,.1); border:1px solid rgba(31,91,67,.3); color:#1F5B43;
  }
  .ct-legal{ margin-top:2.5rem; font-size:.875rem; color:var(--cocoa-soft); line-height:1.7; }
  .ct-legal p{ margin:0; }
  .page-hero{ padding:3.5rem 0 2.5rem; text-align:center; }
  .page-hero .eyebrow{ justify-content:center; }
  .page-hero h1{ margin-top:1rem; font-size:clamp(2rem,4vw,2.75rem); }
  .page-hero p{ margin:1rem auto 0; }

  /* ---------- auth cards ---------- */
  .auth-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2.5rem;
    box-shadow:var(--shadow-sm); margin:2rem auto 5rem;
  }
  .auth-card .foot-link{ text-align:center; margin-top:1.5rem; font-size:.9375rem; color:var(--cocoa-soft); }
  .auth-card .foot-link a{ color:var(--gold-deep); font-weight:600; }
  .checkbox-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.25rem; flex-wrap:wrap; }
  .checkbox-row input{ width:1.1rem; height:1.1rem; }
  /* The tick and its words stay together; anything beside them (the "forgot
     your password?" link) drops to its own line on a narrow phone rather
     than squeezing the label into two. */
  .checkbox-row label{ margin:0; font-weight:400; white-space:nowrap; }
  @media (max-width: 420px){
    .checkbox-row a{ flex-basis:100%; margin-left:0 !important; }
  }

  /* ---------- hero ---------- */
  .hero{ position:relative; padding:3rem 0 5rem; overflow:hidden; }
  @media (min-width:900px){ .hero{ padding:4rem 0 7rem; } }
  .hero .wrap{ position:relative; z-index:1; display:grid; gap:3rem; align-items:center; }
  @media (min-width:960px){ .hero .wrap:has(.hero-visual){ grid-template-columns:1.05fr .95fr; gap:2rem; } }
  /* Alone on the line, the words keep a readable measure. */
  .hero .wrap:not(:has(.hero-visual)) > div{ max-width:44rem; }
  .hero h1{ margin-top:1.25rem; }
  .hero .lede{ margin-top:1.5rem; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }
  .hero-badges{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.75rem; }


  /* On a phone the banner stood a screen and a third tall before a single box
     showed, and most of that was not words: 128px of its own padding, 124px of
     gaps between its five parts, and the two buttons standing one under the
     other because each was told to take a whole row. Nothing is dropped here —
     the eyebrow, the heading, the sentence, both buttons, the three facts and
     the picture all stay. They simply stop being spaced for a desktop.
     Measured at 368px wide: 1040px -> about 800px. */
  @media (max-width:639px){
    .hero{ padding:1.75rem 0 2.25rem; }
    .hero .wrap{ gap:1.75rem; }
    .hero .hero-title{ margin-top:.75rem; }
    .hero .lede{ margin-top:.85rem; }
    .hero-ctas{ margin-top:1.4rem; gap:.6rem; }
    /* Side by side while they fit; the flex wrap puts them back on two rows
       by itself if a translation ever makes them too long. */
    .hero-ctas .btn{ flex:1 1 auto; justify-content:center; padding-inline:1rem; }
    .hero-badges{ margin-top:1.4rem; gap:.6rem 1.1rem; }
  }

  @keyframes fade-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  .hero-in{ opacity:0; animation:fade-up .8s var(--ease) forwards; }
  .hero-in.d1{ animation-delay:.05s; } .hero-in.d2{ animation-delay:.15s; }
  .hero-in.d3{ animation-delay:.28s; } .hero-in.d4{ animation-delay:.4s; } .hero-in.d5{ animation-delay:.52s; }
  @media (prefers-reduced-motion:reduce){ .hero-in{ opacity:1; animation:none; } }
  .hero-badge{ display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:var(--cocoa-soft); font-weight:500; }
  .hero-badge .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); flex:none; }

  .hero-visual{
    position:relative; aspect-ratio:1/1.05; border-radius:2rem;
    background:
      radial-gradient(120% 100% at 30% 20%, var(--highlight), transparent 60%),
      linear-gradient(155deg, var(--cream-2), var(--hero-mid) 60%, var(--gold) 130%);
    box-shadow: var(--shadow);
    display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  }
  .hero-visual::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px);
    background-size:18px 18px; opacity:.5;
  }
  .hero-visual .ph{ position:relative; z-index:1; padding:2rem; }
  .hero-visual .ph .ring{
    width:5.5rem; height:5.5rem; margin:0 auto 1.25rem; border-radius:50%;
    border:1.5px dashed var(--ring); display:flex; align-items:center; justify-content:center; font-size:1.75rem;
    animation:float-y 4.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion:reduce){ .hero-visual .ph .ring{ animation:none; } }
  .hero-visual .ph p{ font-family:var(--serif); font-style:italic; color:var(--cocoa-2); font-size:1.0625rem; }
  /* A corner banner, not a sticker: it runs off the card at both ends and
     the card's own rounded corner cuts it. */
  .hero-ribbon{
    position:absolute; top:3.5rem; right:-3.5rem; width:16rem; text-align:center;
    background:var(--flame-grad); color:#fff;
    padding:.45rem 0; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    transform:rotate(45deg); box-shadow:0 8px 18px -6px rgba(58,38,23,.35);
  }

  /* ---------- features strip ---------- */
  .features{ padding:1rem 0 4rem; position:relative; z-index:1; }
  /* The catalogue comes first now, so the four cards need room above them. */
  #collections + .features{ padding-top:0; }
  .features-grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
  @media (min-width:800px){ .features-grid{ grid-template-columns:repeat(4,1fr); } }
  /* Each of the four carries its own colour: a glow behind the corner, a
     tile under the icon and a line that draws itself when the card is
     touched. The colours are the shop's own, one step brighter. */
  .feature-card{
    position:relative; isolation:isolate; overflow:hidden;
    background:linear-gradient(155deg, var(--paper) 0%, var(--cream-2) 100%);
    border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:1.6rem 1.35rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .feature-card::before{
    content:""; position:absolute; z-index:-1; right:-4.5rem; top:-4.5rem; width:12rem; height:12rem; border-radius:50%;
    background:radial-gradient(circle, var(--f-glow) 0%, transparent 70%);
    transition:transform .6s var(--ease), opacity .4s;
  }
  .feature-card:hover{ transform:translateY(-7px) scale(1.012); box-shadow:0 20px 34px -22px rgba(58,38,23,.45); border-color:rgba(250,117,18,.35); }
  .feature-card:hover::before{ transform:scale(1.25); }
  .feature-card .ico{
    width:3rem; height:3rem; display:grid; place-items:center; margin-bottom:1rem;
    font-size:1.35rem; border-radius:1rem; background:linear-gradient(140deg, var(--f-a), var(--f-b));
    box-shadow:0 12px 22px -14px var(--f-b), inset 0 1px 0 rgba(255,255,255,.5);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .feature-card:hover .ico{ transform:rotate(-7deg) scale(1.12); box-shadow:0 16px 26px -14px var(--f-b), inset 0 1px 0 rgba(255,255,255,.5); }
  .feature-card h3{ font-size:1rem; font-family:var(--sans); font-weight:700; }
  .feature-card p{ font-size:.875rem; color:var(--cocoa-soft); margin-top:.4rem; }
  /* The four tones the cards take in turn, here and in the gift grid. */
  .features-grid > :nth-child(4n+1), .occ-grid > :nth-child(4n+1){ --f-a:#F7DCAE; --f-b:#D6A35A; --f-glow:rgba(214,163,90,.34); }
  .features-grid > :nth-child(4n+2), .occ-grid > :nth-child(4n+2){ --f-a:#E7C2AC; --f-b:#B5533F; --f-glow:rgba(181,83,63,.28); }
  .features-grid > :nth-child(4n+3), .occ-grid > :nth-child(4n+3){ --f-a:#F4CBD3; --f-b:#C4566B; --f-glow:rgba(196,86,107,.26); }
  .features-grid > :nth-child(4n+4), .occ-grid > :nth-child(4n+4){ --f-a:#D8E3C2; --f-b:#7A9B56; --f-glow:rgba(122,155,86,.26); }
  :root[data-theme="dark"] .feature-card::before,
  :root[data-theme="dark"] .occ-card::before{ opacity:.55; }

  /* Price badges wear a ring of fire: the colours turn around the pill and
     flicker, the way a flame does. */
  @property --flame-turn{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .wrap-price, .letter-toggle b, .rush-fee, .choc-brand.top, .btn-flame, .spotify-shown{ position:relative; isolation:isolate; }
  .wrap-price::after, .letter-toggle b::after, .rush-fee::after, .choc-brand.top::after, .btn-flame::after, .spotify-shown::after{
    content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none;
    background:conic-gradient(from var(--flame-turn, 0deg), #FFE08A, #FF8401, #F0541F, #FFB347, #FFE08A);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:flame-turn 2.6s linear infinite, flame-flicker 1.5s ease-in-out infinite;
  }
  .choc-brand.top::after{ inset:-1.5px; }
  /* A card is bigger than a price pill, so the fire is thinner and slower on it. */
  .spotify-shown::after{ inset:-1.5px; padding:1.5px; animation-duration:5.2s, 3s; opacity:.9; }
  /* The button that finishes the box: the same fire, a little wider. */
  .btn-flame::after{ inset:-2.5px; padding:2.5px; }
  .btn-flame:disabled::after{ animation:none; opacity:.35; }
  @keyframes flame-turn{ to{ --flame-turn:360deg; } }
  @keyframes flame-flicker{ 0%,100%{ filter:brightness(1); opacity:.95; } 40%{ filter:brightness(1.4); opacity:1; } 72%{ filter:brightness(.85); opacity:.8; } }
  @media (prefers-reduced-motion: reduce){
    .wrap-price::after, .letter-toggle b::after, .rush-fee::after, .choc-brand.top::after, .btn-flame::after, .spotify-shown::after{ animation:none; }
  }

  /* ---------- section shell ---------- */
  section{ position:relative; padding:5rem 0; scroll-margin-top:5.5rem; }
  .section-head{ max-width:38rem; margin-bottom:3rem; }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head h2{ margin-top:1rem; }
  .section-head .lede{ margin-top:1rem; }
  .tinted{ background:var(--paper); }

  /* ---------- how it works ---------- */
  .steps{ display:grid; gap:2rem; counter-reset:step; position:relative; }
  @media (min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
  .step{ position:relative; text-align:center; padding:0 1rem; }
  .step .num{
    width:3.5rem; height:3.5rem; border-radius:50%; background:var(--flame-grad); color:#fff;
    box-shadow:0 14px 26px -14px var(--flame-shadow);
    font-family:var(--serif); font-size:1.375rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
    animation:num-beat 3.6s ease-in-out infinite;
  }
  /* One after the other, over and over, so the eye is led along the three. */
  .steps .step:nth-child(2) .num{ animation-delay:1.2s; }
  .steps .step:nth-child(3) .num{ animation-delay:2.4s; }
  @keyframes num-beat{
    0%, 55%, 100%{ transform:translateY(0) scale(1); box-shadow:0 14px 26px -14px var(--flame-shadow); }
    18%{ transform:translateY(-9px) scale(1.09); box-shadow:0 24px 32px -16px var(--flame-shadow), 0 0 24px rgba(250,117,18,.55); }
    36%{ transform:translateY(0) scale(1); box-shadow:0 14px 26px -14px var(--flame-shadow); }
  }
  @media (prefers-reduced-motion:reduce){ .step .num{ animation:none; } }
  .step h3{ font-size:1.1875rem; }
  .step p{ font-size:.9375rem; color:var(--cocoa-soft); margin-top:.5rem; max-width:18rem; margin-inline:auto; }
  /* The dashes are drawn from one number to the next as the section is
     reached, one after the other, and stay drawn. */
  /* The grid puts 2rem between the columns, so the far end has to give that
     back for the dashes to sit the same distance from both numbers. */
  .step-line{ position:absolute; top:1.7rem; left:calc(50% + 2.5rem); right:calc(-50% + .5rem); height:4px; border-radius:4px;
    background:repeating-linear-gradient(to right, var(--flame) 0 10px, rgba(250,117,18,.18) 10px 18px);
    box-shadow:0 0 10px rgba(250,117,18,.4);
    transform:scaleX(0); transform-origin:left center; transition:transform 1.1s var(--ease); }
  .steps.lines-in .step-line{ transform:scaleX(1); }
  .steps.lines-in .step:nth-child(1) .step-line{ transition-delay:.15s; }
  .steps.lines-in .step:nth-child(2) .step-line{ transition-delay:1s; }
  /* On a phone the three stand one under the other. The dashes run down the
     gap between them, clear of the words, and draw the same way. */
  @media (max-width:799px){
    .step-line{ top:auto; bottom:-2.3rem; height:2.3rem; left:50%; right:auto; width:4px;
      background:repeating-linear-gradient(to bottom, var(--flame) 0 10px, rgba(250,117,18,.18) 10px 18px);
      transform:translateX(-50%) scaleY(0); transform-origin:center top; }
    .steps.lines-in .step-line{ transform:translateX(-50%) scaleY(1); }
  }
  @media (prefers-reduced-motion:reduce){ .step-line{ transform:none; transition:none; } }
  .step:last-child .step-line{ display:none; }


  /* ---------- collections / product cards ---------- */
  /* Two to a row on a phone as well: one design per screen turned a page of
     26 into half a metre of scrolling. */
  .cards-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr); }
  @media (min-width:640px){ .cards-grid{ gap:1.5rem; } }
  @media (min-width:1100px){ .cards-grid{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:639px){
    .cards-grid .p-card-body{ padding:.75rem .85rem 1rem; gap:.4rem; }
    .cards-grid .p-card-body h3{ font-size:.9375rem; line-height:1.3; }
    /* the description is the first thing to go when the card is this narrow */
    .cards-grid .p-card-body p{ font-size:.8125rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .cards-grid .p-card-foot{ flex-direction:column; align-items:flex-start; gap:.35rem; }
    .cards-grid .p-card-price{ font-size:.9375rem; }
    .cards-grid .p-card-link{ font-size:.8125rem; }
  }
  .p-card{
    position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
    display:flex; flex-direction:column;
  }
  /* No shadow under a card: the light running round its edge is enough. */
  .p-card:hover{ transform:translateY(-8px); border-color:rgba(250,117,18,.35); }

  /* A light travels around the card's edge while the cursor is on it, the
     way a sweep passes over glass. The angle has to be a real angle, or the
     browser cannot move it; where it cannot, the edge simply glows. */
  @property --sweep{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .p-card::before, .d-card::before{
    content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:2px; pointer-events:none; opacity:0;
    background:conic-gradient(from var(--sweep, 0deg), transparent 0deg 250deg, rgba(255,176,103,.2) 288deg,
      #FFB067 320deg, #FF8401 338deg, rgba(255,132,1,.2) 350deg, transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    transition:opacity .35s;
  }
  .p-card:hover::before, .d-card:hover::before{ opacity:1; animation:card-sweep 2.4s linear infinite; }
  @keyframes card-sweep{ to{ --sweep:360deg; } }
  .d-card{ position:relative; }
  .d-card:hover{ border-color:rgba(250,117,18,.35) !important; box-shadow:none !important; }
  @media (prefers-reduced-motion: reduce){
    .p-card:hover::before, .d-card:hover::before{ animation:none; }
  }
  .p-card-media{
    aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 25%, var(--highlight), transparent 55%),
      linear-gradient(155deg,var(--cream-2), var(--media-end));
    color:var(--cocoa-faint); font-size:.8125rem; letter-spacing:.04em; overflow:hidden;
  }
  .p-card-media img{ width:100%; height:100%; object-fit:cover; }
  .p-card-media .ph-ico{ font-size:2.5rem; opacity:.55; filter:grayscale(.15); }
  .p-card-media span.tag{
    position:absolute; top:.9rem; left:.9rem; background:var(--glass); color:var(--cocoa);
    font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
  }
  /* The flame on a design people are actually buying. It breathes rather than
     blinks: enough to catch the eye while scrolling, not enough to nag. */
  .p-card-media .p-hot, .d-card-media .p-hot{
    position:absolute; top:.9rem; right:.9rem; z-index:2; display:inline-flex; align-items:center; gap:.25rem;
    padding:.28rem .6rem .28rem .45rem; border-radius:999px; background:var(--flame-grad); color:#fff;
    font-size:.6875rem; font-weight:800; letter-spacing:.06em;
    box-shadow:0 8px 18px -8px var(--flame-shadow);
    animation:hot-breathe 2.6s var(--ease) infinite;
  }
  .p-card-media .p-hot svg, .d-card-media .p-hot svg{ width:.95rem; height:.95rem; transform-origin:50% 90%; animation:hot-flicker 1.3s ease-in-out infinite alternate; }
  @keyframes hot-breathe{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-2px) scale(1.04); } }
  @keyframes hot-flicker{ from{ transform:scale(1) rotate(-3deg); opacity:.9; } to{ transform:scale(1.12) rotate(3deg); opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .p-card-media .p-hot, .p-card-media .p-hot svg,
    .d-card-media .p-hot, .d-card-media .p-hot svg{ animation:none; }
  }
  .p-card-body{ padding:1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
  .p-card-body h3{ font-size:1.1875rem; }
  .p-card-body p{ font-size:.875rem; color:var(--cocoa-soft); flex:1; }
  .p-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.25rem; }
  .p-card-price{ font-weight:700; font-size:.9375rem; color:var(--gold-deep); }
  .p-card-link{ font-size:.8125rem; font-weight:600; display:inline-flex; align-items:center; gap:.3rem; padding:.6rem 0; margin:-.6rem 0; }
  /* The whole card opens the design, not only its picture and this link: the
     link reaches over the card and takes the click wherever it lands, so the
     white part below the picture works too. */
  .p-card{ cursor:pointer; }
  .p-card-link::after{ content:""; position:absolute; inset:0; z-index:2; }
  .p-card-link svg{ width:.875rem; height:.875rem; transition:transform .3s var(--ease); }
  .p-card:hover .p-card-link svg{ transform:translateX(3px); }

  /* ---------- instagram cta ---------- */
  .insta-band{
    border-radius:2rem; background:linear-gradient(145deg, var(--band) 0%, var(--band-mid) 55%, var(--band-2) 100%);
    color:var(--on-band); padding:3.5rem 2rem; text-align:center; position:relative; overflow:hidden;
  }
  .insta-band h2{ color:var(--on-band); }
  .insta-band .eyebrow{ color:var(--on-band); opacity:.7; }
  .insta-band p{ color:var(--on-band-soft); max-width:30rem; margin:1rem auto 2rem; }
  /* Orange on orange says nothing, so the button here is the milk, with
     chocolate letters. */
  .insta-band .btn-primary{ background:linear-gradient(120deg, #FFFDF9 0%, #FFF3E4 55%, #FFE7CE 100%); color:#3A2617;
    box-shadow:0 14px 30px -16px rgba(58,38,23,.45); }
  .insta-band .btn-primary:hover{ filter:brightness(1.03); box-shadow:0 18px 36px -16px rgba(58,38,23,.55); }

  /* ---------- faq ---------- */
  .faq-list{ display:flex; flex-direction:column; gap:.75rem; max-width:44rem; margin-inline:auto; }
  /* A question lights up in the logo's orange when the mouse is on it or
     when it is the open one. */
  .faq-item{ position:relative; isolation:isolate; overflow:hidden;
    background:linear-gradient(155deg, var(--paper) 0%, var(--cream-2) 100%);
    border:1px solid var(--line); border-radius:var(--radius-sm);
    transition:border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease); }
  .faq-item::before{
    content:""; position:absolute; z-index:-1; inset:0; opacity:0; transition:opacity .35s;
    background:linear-gradient(115deg, rgba(250,117,18,.16) 0%, rgba(240,84,32,.08) 45%, transparent 75%); }
  .faq-item::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, var(--flame), var(--flame-2)); transition:transform .4s var(--ease); }
  .faq-item:hover, .faq-item[open]{ border-color:rgba(250,117,18,.55); box-shadow:0 16px 34px -20px rgba(240,84,32,.6); }
  .faq-item:hover{ transform:translateY(-2px); }
  .faq-item:hover::before, .faq-item[open]::before{ opacity:1; }
  .faq-item:hover::after, .faq-item[open]::after{ transform:scaleY(1); }
  .faq-item summary{
    list-style:none; cursor:pointer; padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    font-weight:600; font-size:1rem; transition:color .3s;
  }
  .faq-item:hover summary, .faq-item[open] summary{ color:var(--flame-2); }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ flex:none; width:1.5rem; height:1.5rem; position:relative; transition:transform .35s var(--ease); }
  .faq-item:hover summary .plus{ transform:rotate(90deg) scale(1.1); }
  .faq-item summary .plus::before,.faq-item summary .plus::after{
    content:""; position:absolute; background:var(--cocoa); border-radius:2px; transition:background .3s;
  }
  .faq-item:hover summary .plus::before, .faq-item:hover summary .plus::after,
  .faq-item[open] summary .plus::before{ background:var(--flame); }
  .faq-item summary .plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
  .faq-item summary .plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); transition:transform .3s var(--ease); }
  .faq-item[open] summary .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
  .faq-item .faq-a{ padding:0 1.5rem 1.5rem; font-size:.9375rem; color:var(--cocoa-soft); }

  /* ---------- cart / checkout ---------- */
  .cart-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
  .cart-row{
    display:flex; gap:1.25rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem;
    align-items:center;
  }
  .cart-row .thumb{ width:5.5rem; height:5.5rem; border-radius:.7rem; overflow:hidden; flex:none; position:relative; background:var(--cream-2); }
  .cart-row .thumb img{ width:100%; height:100%; object-fit:cover; }
  .cart-row .thumb:has(.thumb-polaroid){ background:none; overflow:visible; display:grid; place-items:center; }
  .thumb-polaroid{ width:4.3rem; }
  .thumb-polaroid .polaroid{ max-width:4.3rem; }
  .cart-row .thumb .thumb-more{
    position:absolute; right:.25rem; bottom:.25rem; background:rgba(20,12,6,.85); color:#FBF4EA;
    font-size:.6875rem; font-weight:700; padding:.1rem .4rem; border-radius:999px;
  }
  .cart-row .thumb .photo-overlay{ position:absolute; }
  .cart-row .info{ flex:1; min-width:0; }
  .cart-row .info h3{ font-size:1.0625rem; }
  .cart-row .info p{ font-size:.8125rem; color:var(--cocoa-soft); margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cart-row .remove-btn{ font-size:.8125rem; color:var(--terracotta); font-weight:600; flex:none; }
  /* Fewer / more of one line. Thumb-sized buttons, so a finger hits them. */
  .cart-row .qty{ display:flex; align-items:center; gap:.1rem; margin-top:.5rem; }
  .cart-row .qty button{
    width:2rem; height:2rem; border:1px solid var(--line); background:var(--paper);
    border-radius:.5rem; font-size:1.0625rem; line-height:1; color:var(--cocoa);
    display:grid; place-items:center; cursor:pointer; transition:background .15s, border-color .15s;
  }
  .cart-row .qty button:hover:not(:disabled){ background:var(--cream); border-color:var(--gold-deep); }
  .cart-row .qty button:disabled{ opacity:.35; cursor:default; }
  .cart-row .qty span{
    min-width:2.25rem; text-align:center; font-weight:700; font-size:.9375rem;
    font-variant-numeric:tabular-nums;
  }
  .cart-summary{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.5rem; }
  /* How near the basket is to carrying its own delivery. */
  .dlv-free-cart{
    margin:.35rem 0 .9rem; padding:.55rem .75rem; border-radius:.7rem; font-size:.875rem; font-weight:600;
    background:rgba(198,154,74,.12); border:1px solid rgba(198,154,74,.35); color:var(--gold-deep);
  }
  .dlv-free-cart.soon{ background:none; border:0; padding:0; font-weight:500; color:var(--cocoa-soft); font-size:.8125rem; }
  .cart-empty{ text-align:center; padding:4rem 1rem; color:var(--cocoa-soft); }
  .cart-empty .ico{ font-size:3rem; margin-bottom:1rem; }

  /* ---------- customizer ---------- */
  .customizer{ display:grid; gap:2.5rem; }
  .customizer > *{ min-width:0; }
  @media (min-width:960px){
    .customizer{ grid-template-columns:1.1fr .9fr; align-items:start; }
    /* The box stays in sight while the long form is scrolled: the picture is
       what the customer is deciding about. */
    .customizer > :first-child{ position:sticky; top:6rem; align-self:start; }
  }
  .stage{
    position:relative; border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line);
    box-shadow:var(--shadow-sm); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  }
  /* Both sides given, never inferred: the frame is cut to the view's own
     shape in sizeCanvas(), so filling it is exactly right. Left to work it
     out from max-width and max-height alone, Safari sized the two axes
     separately and stretched the picture to the frame. */
  .stage canvas{ width:100%; height:100%; display:block; }
  /* The shop's mark sits under every preview, faint enough to stay out of
     the way and dark enough to survive a screenshot. */
  .preview-mark{ position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%); height:4.4rem; width:auto;
    opacity:.6; pointer-events:none; user-select:none; z-index:3; }
  .wrap-preview{ position:relative; }
  .wrap-preview .preview-mark{ height:3.2rem; bottom:.25rem; opacity:.55; }
  .angle-arrow{
    position:absolute; top:50%; transform:translateY(-50%); width:2.75rem; height:2.75rem; border-radius:50%;
    background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex;
    align-items:center; justify-content:center; font-size:1.125rem; color:var(--cocoa); cursor:pointer; z-index:2;
    transition:background .2s, transform .2s;
  }
  .angle-arrow:hover{ background:var(--cream); }
  .angle-arrow.prev{ left:.75rem; }
  .angle-arrow.next{ right:.75rem; }
  /* The search-engine sentence under the catalogue: present, readable, and
     not competing with the boxes for the top of the page. */
  .collections-note{ max-width:52rem; margin:1.75rem auto 0; text-align:center; opacity:.82; }

  .angle-thumbs{ display:flex; gap:.625rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
  .angle-thumb{
    width:3.5rem; height:3.5rem; border-radius:.6rem; border:2px solid transparent; overflow:hidden; cursor:pointer;
    background:var(--paper); padding:0; opacity:.65; transition:opacity .2s, border-color .2s;
  }
  .angle-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .angle-thumb:hover{ opacity:1; }
  .angle-thumb.active{ opacity:1; border-color:var(--gold); }

  /* A wrapped gift box in 3D (partials/gift-box, painted by js/gift-box.js).
     The face is 969×1895 like the boxes; the side and top are 15 % deep. */
  .gift{ display:block; position:relative; perspective:1300px; padding:1.25rem 0 2.1rem; }
  .gift-3d{ display:block; position:relative; width:60%; margin-inline:auto; aspect-ratio:969/1895; transform-style:preserve-3d;
    transform:rotateY(-24deg) rotateX(8deg); transition:transform .7s var(--ease); }
  .gift:hover .gift-3d{ transform:rotateY(-12deg) rotateX(5deg); }
  .gift-front{ position:absolute; inset:0; width:100%; height:100%; border-radius:2px; display:block; }
  .gift-side, .gift-top{ position:absolute; background-color:#d9cbb8; background-repeat:repeat; overflow:hidden; }
  .gift-side{ top:0; left:100%; width:15%; height:100%; transform-origin:left center; transform:rotateY(90deg); }
  .gift-top{ left:0; bottom:100%; width:100%; height:7.67%; transform-origin:center bottom; transform:rotateX(-90deg); }
  .gift-side::after, .gift-top::after{ content:''; position:absolute; inset:0; }
  .gift-side::after{ background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.5)); }
  .gift-top::after{ background:rgba(255,255,255,.12); }
  /* the ribbon carries on round the side and over the top */
  .gift-side i{ position:absolute; left:0; right:0; top:40.1%; height:3.84%; background:var(--rb, transparent); }
  .gift-top i{ position:absolute; top:0; bottom:0; left:46.25%; width:7.5%; background:var(--rb, transparent); }
  .gift.twine .gift-side i{ top:41.2%; height:1.6%; background:repeating-linear-gradient(0deg, var(--rb) 0 40%, transparent 40% 60%, var(--rb) 60% 100%); }
  .gift.twine .gift-top i{ left:48.4%; width:3.2%; background:repeating-linear-gradient(90deg, var(--rb) 0 40%, transparent 40% 60%, var(--rb) 60% 100%); }
  .gift-shadow{ position:absolute; left:16%; right:6%; bottom:.9rem; height:1.5rem; border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(250,117,18,.75), rgba(240,84,32,0) 70%); filter:blur(5px); z-index:-1; }
  @media (prefers-reduced-motion: reduce){ .gift-3d{ transition:none; } }


  /* The gift box viewer: all six sides, turned by hand (js/gift-box.js). */
  html.gv-open{ overflow:hidden; }
  .gv{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1rem; }
  .gv-backdrop{ position:absolute; inset:0; background:rgba(10,6,4,.78); backdrop-filter:blur(6px); }
  .gv-panel{ position:relative; width:min(34rem, 100%); max-height:100%; overflow:auto; background:var(--paper); border:1px solid var(--line);
    border-radius:1.25rem; padding:1rem 1rem .9rem; box-shadow:var(--shadow); text-align:center; }
  .gv-close{ position:absolute; top:.6rem; right:.7rem; z-index:2; width:2.4rem; height:2.4rem; border-radius:50%;
    border:1px solid var(--line); background:var(--paper); color:var(--cocoa); font-size:1.5rem; line-height:1; }
  .gv-close:hover{ border-color:var(--gold); }
  .gv-stage{ position:relative; perspective:1400px; height:min(64vh, 580px); display:grid; place-items:center; cursor:grab;
    touch-action:none; user-select:none; border-radius:1rem; background:radial-gradient(ellipse at 50% 42%, var(--cream-2), transparent 72%); }
  .gv-stage:active{ cursor:grabbing; }
  .gv-box{ position:relative; transform-style:preserve-3d; }
  .gv-face{ position:absolute; left:0; top:0; backface-visibility:hidden; }
  .gv-back{ filter:brightness(.94); } .gv-right{ filter:brightness(.8); } .gv-left{ filter:brightness(.7); }
  .gv-top{ filter:brightness(1.06); } .gv-bottom{ filter:brightness(.6); }
  .gv-floor{ position:absolute; bottom:5%; left:50%; width:42%; height:5%; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%); filter:blur(6px); pointer-events:none; }
  .gv-info h3{ font-family:var(--serif); font-size:1.3rem; margin-top:.6rem; }
  .gv-info p{ color:var(--cocoa-soft); font-size:.9rem; margin-top:.15rem; }
  .gv-views{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:.75rem; }
  .gv-views button{ padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--paper);
    color:var(--cocoa-soft); font-size:.85rem; font-weight:600; }
  .gv-views button:hover{ border-color:var(--gold); color:var(--cocoa); }
  .gv-views button.on{ background:var(--cocoa); color:var(--cream); border-color:var(--cocoa); }
  .gv-hint{ font-size:.78rem; color:var(--cocoa-faint); margin-top:.55rem; }
  .customize-panel{ display:flex; flex-direction:column; gap:1.5rem; }
  .photo-guide{
    display:flex; align-items:center; gap:.875rem; background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:.75rem .875rem; margin:.625rem 0;
  }
  .photo-guide svg{ flex:none; }
  .photo-guide p{ margin:0; font-size:.8125rem; color:var(--cocoa-soft); line-height:1.4; }
  /* The language switcher in the top bar. */
  .lang-btn{ padding:0; overflow:hidden; }
  .lang-btn .flag{ width:1.5rem; height:1rem; }
  .flag{ width:1.2rem; height:.8rem; border-radius:.15rem; flex:none; display:block; box-shadow:0 0 0 1px rgba(58,38,23,.18); }
  .lang-panel{ min-width:11rem; }
  .lang-panel .nav-item.is-on{ color:var(--gold-deep); font-weight:700; }
  .lang-panel .ni-ico .flag{ width:1.45rem; height:.97rem; }

  .photo-guide svg{ color:var(--gold-deep); }
  .photo-guide .pg-open{
    margin-top:.35rem; background:none; border:0; padding:0; font:inherit; font-size:.8125rem; font-weight:600;
    color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  }
  .photo-guide .pg-open:hover{ color:var(--cocoa); }

  /* The window it opens: the right shot beside the two that keep coming in. */
  .pg-modal{
    position:fixed; inset:0; z-index:120; background:rgba(43,33,24,.55); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:1rem;
  }
  .pg-modal[hidden]{ display:none; }
  .pg-sheet{
    position:relative; background:var(--cream); border-radius:var(--radius); padding:1.5rem;
    max-width:40rem; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow);
  }
  .pg-sheet h3{ margin:0 0 .35rem; font-size:1.25rem; }
  .pg-lead{ margin:0 0 1.25rem; color:var(--cocoa-soft); font-size:.9375rem; }
  .pg-close{
    position:absolute; top:.5rem; right:.75rem; background:none; border:0; font-size:1.75rem; line-height:1;
    color:var(--cocoa-faint); cursor:pointer; padding:.25rem;
  }
  .pg-close:hover{ color:var(--cocoa); }
  .pg-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
  .pg-case{ margin:0; text-align:center; }
  .pg-art{
    position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.5rem; display:grid; place-items:center;
  }
  .pg-art svg{ width:100%; height:auto; max-height:9rem; }
  .pg-case.is-good .pg-art{ border-color:var(--gold); color:var(--cocoa); }
  .pg-case.is-bad .pg-art{ color:var(--cocoa-faint); }
  .pg-mark{
    position:absolute; top:-.55rem; right:-.55rem; width:1.75rem; height:1.75rem; border-radius:50%;
    display:grid; place-items:center; font-size:.9375rem; font-weight:700; color:#fff; box-shadow:var(--shadow-sm);
  }
  .pg-case.is-good .pg-mark{ background:#2f9e5f; }
  .pg-case.is-bad .pg-mark{ background:#c0473a; }
  .pg-case figcaption{ margin-top:.6rem; font-size:.8125rem; line-height:1.45; color:var(--cocoa-soft); }
  .pg-case figcaption b{ color:var(--cocoa); }
  .pg-tips{ margin:1.25rem 0 0; padding-left:1.1rem; font-size:.875rem; line-height:1.6; color:var(--cocoa-soft); }
  .pg-tips li{ margin-bottom:.25rem; }
  @media (max-width: 480px){
    .pg-sheet{ padding:1.25rem 1rem; }
    .pg-grid{ grid-template-columns:1fr; gap:.75rem; }
    .pg-case{ display:grid; grid-template-columns:5.5rem 1fr; gap:.85rem; align-items:center; text-align:left; }
    .pg-art svg{ max-height:6rem; }
    .pg-case figcaption{ margin-top:0; }
  }

  .upload-box{
    border:2px dashed var(--line); border-radius:var(--radius-sm); padding:2rem 1.5rem; text-align:center; cursor:pointer;
    transition:border-color .25s, background .25s;
  }
  .upload-box:hover{ border-color:var(--gold); background:var(--paper); }
  .upload-box .ico{ font-size:2rem; margin-bottom:.5rem; line-height:1; }
  .cam-ico{ width:2.4rem; height:2.4rem; display:block; margin-inline:auto; color:var(--flame-2);
    transition:transform .3s var(--ease); }
  .cam-lens{ transform-box:fill-box; transform-origin:center; animation:cam-focus 3s ease-in-out infinite; }
  @keyframes cam-focus{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(.8); } }
  .cam-flash{ animation:cam-blink 3s ease-in-out infinite; }
  @keyframes cam-blink{ 0%,86%,100%{ opacity:.3; } 91%{ opacity:1; } }
  .upload-box:hover .cam-ico{ transform:translateY(-2px) scale(1.06); }
  @media (prefers-reduced-motion: reduce){ .cam-lens, .cam-flash{ animation:none; } }
  .upload-box .upload-label{ overflow-wrap:anywhere; }
  .upload-box .uc-thumb, .upload-box .uc-change{ display:none; }
  /* Once a photograph is in, the target has done its job: the big dashed
     panel and the drawing above it fold into one line, so the fields below
     are on the screen instead of a page further down. The line is still the
     same label, so tapping it chooses another picture. */
  .slot-block.has-photo .photo-guide{ display:none; }
  .slot-block.has-photo .upload-box{
    display:flex; align-items:center; gap:.7rem; text-align:left;
    padding:.55rem .7rem; border-style:solid; border-width:1px; background:var(--paper);
  }
  .slot-block.has-photo .upload-box .ico{ display:none; }
  .slot-block.has-photo .upload-box .uc-thumb{
    display:block; width:2.75rem; height:2.75rem; flex:none; object-fit:cover;
    border-radius:.5rem; background:var(--cream-2);
  }
  .slot-block.has-photo .upload-box .upload-label{
    flex:1; min-width:0; font-size:.8125rem; color:var(--cocoa-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .slot-block.has-photo .upload-box .uc-change{
    display:inline; flex:none; font-size:.8125rem; font-weight:600; color:var(--gold-deep);
    text-decoration:underline; text-underline-offset:2px;
  }
  .range-row{ display:flex; align-items:center; gap:.75rem; }
  .range-row input[type=range]{ flex:1; padding:0; }
  .range-row .lbl{ font-size:.8125rem; color:var(--cocoa-soft); width:5rem; flex:none; }

  /* ---------- gift ideas (occasion pages, their links on other pages) ---------- */
  .crumbs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; font-size:.8125rem; color:var(--cocoa-faint); margin-bottom:1.25rem; }
  .crumbs a{ color:var(--cocoa-soft); }
  .crumbs a:hover{ color:var(--gold-deep); }
  .occ-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:1rem; }
  .occ-card{ position:relative; isolation:isolate; overflow:hidden;
    display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:linear-gradient(155deg, var(--paper) 0%, var(--cream-2) 100%);
    padding:1.25rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
  .occ-card::before{
    content:""; position:absolute; z-index:-1; right:-4rem; top:-4rem; width:10rem; height:10rem; border-radius:50%;
    background:radial-gradient(circle, var(--f-glow, rgba(214,163,90,.3)) 0%, transparent 70%);
    transition:transform .6s var(--ease); }
  .occ-card:hover{ transform:translateY(-6px) scale(1.012); box-shadow:0 20px 34px -22px rgba(58,38,23,.45); border-color:rgba(250,117,18,.35); }
  .occ-card:hover .occ-ico{ transform:rotate(-7deg) scale(1.12); box-shadow:0 16px 26px -14px var(--f-b, #D6A35A), inset 0 1px 0 rgba(255,255,255,.5); }
  .occ-card:hover::before{ transform:scale(1.25); }
  .occ-card .occ-ico{ flex:none; width:3rem; height:3rem; border-radius:1rem; display:grid; place-items:center; font-size:1.4rem;
    background:linear-gradient(140deg, var(--f-a, #F7DCAE), var(--f-b, #D6A35A));
    box-shadow:0 12px 22px -14px var(--f-b, #D6A35A), inset 0 1px 0 rgba(255,255,255,.5);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
  .occ-card h2, .occ-card h3{ font-family:var(--sans); font-size:1rem; font-weight:700; }
  .occ-card p{ margin-top:.3rem; font-size:.875rem; color:var(--cocoa-soft); line-height:1.5; }
  .occ-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
  .occ-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line);
    background:var(--paper); font-size:.875rem; font-weight:500; color:var(--cocoa-soft); transition:border-color .2s, color .2s, transform .2s; }
  .occ-chip:hover{ border-color:var(--gold); color:var(--cocoa); transform:translateY(-2px); }
  /* a chip that only names an occasion: nothing to click, so nothing moves */
  /* The occasions a design suits, written as tags rather than offered as
     buttons: words under a heading, nothing to press. */
  .occ-tags{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .85rem;
    max-width:44rem; margin:0 auto; line-height:1.9;
  }
  .occ-tag{ font-size:.9375rem; font-weight:500; color:var(--gold-deep); white-space:nowrap; }
  .occ-chip.is-static{ cursor:default; }
  .price-from{ margin:.4rem 0 0; font-weight:700; color:var(--gold-deep); font-size:1.0625rem; }

  /* An order left unpaid: carried on every page until it is paid or dropped. */
  .unpaid-bar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
    margin:0 auto; padding:.85rem 1.15rem; max-width:min(64rem, calc(100% - 2rem));
    border:1px solid var(--gold); border-radius:1rem; background:linear-gradient(140deg, rgba(214,163,90,.16), transparent 70%);
    color:var(--cocoa); text-decoration:none; font-size:.9375rem; }
  .unpaid-bar:hover{ border-color:var(--gold-deep); }
  .unpaid-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--gold-deep); flex:none;
    animation:unpaid-pulse 1.8s ease-in-out infinite; }
  .unpaid-text{ min-width:0; }
  .unpaid-text b{ color:var(--gold-deep); }
  .unpaid-go{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color:var(--gold-deep); white-space:nowrap; }
  .unpaid-go svg{ width:1rem; height:1rem; }
  @keyframes unpaid-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.8); } }
  @media (max-width:560px){
    .unpaid-bar{ font-size:.875rem; padding:.75rem .9rem; }
    .unpaid-go{ margin-left:0; width:100%; justify-content:flex-end; }
  }
  @media (prefers-reduced-motion: reduce){ .unpaid-dot{ animation:none; } }
  .occ-chip.is-static:hover{ border-color:var(--line); color:var(--cocoa-soft); transform:none; }
  .prose{ max-width:44rem; margin-inline:auto; color:var(--cocoa-soft); font-size:1.0625rem; }
  .prose h2{ font-size:clamp(1.4rem, 2.6vw, 1.75rem); margin:2.25rem 0 .75rem; }
  .prose h2:first-child{ margin-top:0; }
  .prose h3{ font-size:1.2rem; margin:1.75rem 0 .5rem; }
  .prose p{ margin:.85rem 0; }
  .prose ul, .prose ol{ margin:.85rem 0; padding-left:1.35rem; }
  .prose ul{ list-style:disc; }
  .prose ol{ list-style:decimal; }
  .prose li{ margin:.4rem 0; }
  .prose li::marker{ color:var(--gold); }
  .prose strong{ color:var(--cocoa); }
  .prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }

  /* ---------- footer ---------- */
  /* The foot of the page: the same milk and orange as the band above it,
     with a light coming in from the corner. */
  footer{ position:relative; isolation:isolate; overflow:hidden; color:var(--on-band-soft); padding:4rem 0 2rem;
    background:linear-gradient(168deg, var(--band) 0%, var(--band-mid) 55%, var(--band-2) 100%); }
  footer::before{
    content:""; position:absolute; z-index:-1; left:-8rem; top:-10rem; width:30rem; height:30rem; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 65%); }
  footer::after{
    content:""; position:absolute; z-index:-1; right:-10rem; bottom:-12rem; width:26rem; height:26rem; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 65%); }
  .footer-top{ display:grid; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--band-line); }
  @media (min-width:800px){ .footer-top{ grid-template-columns:1.4fr repeat(3,1fr); } }
  .footer-brand p{ margin-top:1rem; max-width:22rem; font-size:.9375rem; }
  .footer-social{ display:flex; gap:.75rem; margin-top:1.5rem; }
  .footer-social a{ width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--band-line); display:flex; align-items:center; justify-content:center; transition:background .25s, transform .25s, border-color .25s; }
  .footer-social a:hover{ background:var(--flame-grad); border-color:transparent; color:#fff; transform:translateY(-2px); }
  .footer-col h4{ font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; font-weight:700; color:var(--on-band); }
  .footer-col a{ display:block; padding:.3rem 0; font-size:.9375rem; transition:color .25s; }
  /* On the orange band a link lights up white, not oranger still. */
  .footer-col a:hover{ color:#fff; }
  .footer-col .f-phone{ font-family:var(--serif); font-size:1.25rem; color:var(--on-band); }
  .footer-col .f-hours{ display:block; padding:.5rem 0; font-size:.8125rem; opacity:.75; }
  .cat-rights{
    display:flex; align-items:center; gap:.9rem; margin:3rem auto 0; max-width:46rem;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
    padding:1rem 1.25rem; font-size:.92rem; line-height:1.6; color:var(--cocoa-2);
  }
  .cat-rights p{ margin:0; }
  .cat-rights b{ color:var(--cocoa); }
  .cat-rights a{ color:var(--gold); font-weight:600; white-space:nowrap; }
  .cat-rights-mark{
    flex:none; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
    background:var(--cream-2); color:var(--cocoa); font-size:1.15rem; font-weight:700;
  }
  @media (max-width: 560px){ .cat-rights{ margin-top:2rem; padding:.85rem 1rem; font-size:.88rem; } }
  .footer-rules{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; padding-top:1.25rem; font-size:.85rem; }
  .footer-rules a{ color:var(--cocoa-soft); }
  .footer-rules a:hover{ color:var(--cocoa); }
  /* The rule pages: long reading, so wide lines and quiet headings. */
  .legal{ font-size:1rem; line-height:1.75; color:var(--cocoa-2); }
  .legal h2{ font-size:1.15rem; margin:2.25rem 0 .6rem; color:var(--cocoa); }
  .legal p{ margin:0 0 .9rem; }
  .legal ul{ margin:0 0 1.1rem; padding-left:1.15rem; }
  .legal li{ margin-bottom:.45rem; }
  .legal-who{ font-size:.9rem; color:var(--cocoa-faint); border-bottom:1px solid var(--line); padding-bottom:1rem; }
  .legal-note{ font-size:.85rem; color:var(--cocoa-faint); margin-top:2rem; }
  .footer-legal{ font-size:.8rem; color:var(--cocoa-faint); line-height:1.6; padding-top:1rem; }
.footer-bottom{ display:flex; flex-direction:column; gap:.75rem; padding-top:1.75rem; font-size:.8125rem; }
  @media (min-width:600px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }

  /* ---------- floating contact ---------- */
  /* Both corner buttons stand in one column, the chat on top. */
  /* The box is 180x115 while the two buttons in it cover barely half of
     that: the chat bubble is round and narrow, the Instagram button sits a
     row below it, and align-items:flex-end leaves the whole left of the top
     row empty. That empty part was still catching clicks — an invisible
     dead corner on every page, and on the catalogue it sat over a design's
     own card, so clicking that design did nothing at all.
     The box lets clicks through; the buttons inside take them back. */
  .float-stack{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; pointer-events:none; }
  .float-stack > *{ pointer-events:auto; }
  /* ---------- wiping the background off a cut-out head ---------- */
  .brush{ position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:1rem; }
  .brush[hidden]{ display:none; }
  .brush-back{ position:absolute; inset:0; background:rgba(20,12,6,.74); backdrop-filter:blur(6px); }
  .brush-sheet{ position:relative; width:min(38rem, 100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; gap:.85rem;
    background:linear-gradient(165deg, var(--paper), var(--cream-2)); border-radius:1.35rem; padding:1.1rem 1.1rem 1.2rem;
    box-shadow:0 30px 70px -30px rgba(58,38,23,.7), 0 0 0 1px rgba(250,117,18,.16);
    animation:chat-in .35s var(--ease) both; }
  .brush-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
  .brush-title b{ display:block; font-size:1.0625rem; }
  .brush-title small{ display:block; font-size:.78rem; color:var(--cocoa-soft); margin-top:.15rem; }
  .brush-x{ flex:none; width:2rem; height:2rem; border:0; border-radius:50%; background:var(--cream-2); color:var(--cocoa); cursor:pointer;
    transition:background .25s, color .25s, transform .25s; }
  .brush-x:hover{ background:var(--flame-grad); color:#fff; transform:rotate(90deg); }

  /* A chequer behind the picture, so a hole in it is plain to see. */
  .brush-stage{ position:relative; display:grid; place-items:center; height:min(46vh, 22rem); border-radius:1.1rem; overflow:hidden;
    touch-action:none; background-color:#fff;
    background-image:linear-gradient(45deg, #e9e2d8 25%, transparent 25%, transparent 75%, #e9e2d8 75%),
      linear-gradient(45deg, #e9e2d8 25%, transparent 25%, transparent 75%, #e9e2d8 75%);
    background-size:18px 18px; background-position:0 0, 9px 9px;
    box-shadow:inset 0 0 0 1px var(--line); }
  .brush-stage canvas{ display:block; touch-action:none; cursor:none; }

  /* The brush itself: the customer sees what the next stroke will take. */
  .brush-ring{ position:absolute; left:0; top:0; border-radius:50%; pointer-events:none; transform:translate(-50%, -50%);
    border:2px solid rgba(240,84,32,.95); box-shadow:0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(255,255,255,.55), 0 0 12px rgba(240,84,32,.35);
    background:rgba(250,117,18,.12); }
  .brush-ring[hidden]{ display:none; }
  .brush.restoring .brush-ring{ border-color:rgba(63,185,80,.95); background:rgba(63,185,80,.12);
    box-shadow:0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(255,255,255,.55), 0 0 12px rgba(63,185,80,.3); }

  .brush-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
  .brush-seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper); }
  .brush-seg button{ display:inline-flex; align-items:center; gap:.35rem; border:0; background:none; color:var(--cocoa-soft);
    font:inherit; font-size:.8125rem; font-weight:600; padding:.5rem .85rem; cursor:pointer; transition:background .25s, color .25s; }
  .brush-seg button svg{ width:1rem; height:1rem; }
  .brush-seg button.on{ background:var(--flame-grad); color:#fff; }
  .brush.restoring .brush-seg button.on{ background:linear-gradient(120deg, #55C86B, #2E9E4B); }
  .brush-size{ display:flex; align-items:center; gap:.5rem; flex:1; min-width:11rem; }
  .brush-size-ico{ color:var(--cocoa-faint); font-size:.8rem; }
  .brush-size input{ flex:1; accent-color:var(--flame); }
  .brush-size output{ min-width:2.2rem; text-align:right; font-size:.8125rem; font-weight:700; color:var(--cocoa-soft); font-variant-numeric:tabular-nums; }
  .brush-acts{ display:flex; gap:.4rem; }
  .brush-act{ border:1px solid var(--line); background:var(--paper); color:var(--cocoa); border-radius:999px;
    font:inherit; font-size:.78rem; font-weight:600; padding:.45rem .8rem; cursor:pointer; transition:border-color .25s, color .25s; }
  .brush-act:hover:not(:disabled){ border-color:var(--flame); color:var(--flame-2); }
  .brush-act:disabled{ opacity:.45; cursor:not-allowed; }
  .brush-hint{ margin:0; font-size:.78rem; color:var(--cocoa-soft); line-height:1.5; }
  .brush-foot{ display:flex; justify-content:flex-end; gap:.6rem; }
  .brush-foot .btn{ padding:.65rem 1.3rem; font-size:.875rem; }
  .fix-bg{ margin-top:.6rem; padding:.55rem 1rem; font-size:.8125rem; }
  /* .btn sets display, which would beat the browser's own [hidden] rule. */
  .fix-bg[hidden]{ display:none; }
  @media (max-width:520px){
    .brush-sheet{ padding:.85rem .85rem 1rem; gap:.7rem; }
    .brush-stage{ height:min(42vh, 17rem); }
    .brush-size{ order:3; width:100%; flex:1 0 100%; }
  }

  /* ---------- the chat in the corner ---------- */
  .chat{ position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
  .chat-open{
    position:relative; display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; border:0; cursor:pointer;
    background:var(--flame-grad); color:#fff; box-shadow:0 14px 28px -12px var(--flame-shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .chat-open:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 18px 34px -12px var(--flame-shadow); }
  .chat-ico{ width:1.8rem; height:1.8rem; position:relative; z-index:1; }
  /* The three dots answer in turn, and a ring goes out like a knock. */
  .chat-ico .cd{ transform-box:fill-box; transform-origin:center; animation:chat-dots 1.6s ease-in-out infinite; }
  .chat-ico .cd2{ animation-delay:.18s; }
  .chat-ico .cd3{ animation-delay:.36s; }
  @keyframes chat-dots{ 0%,60%,100%{ transform:translateY(0); opacity:.85; } 28%{ transform:translateY(-1.4px); opacity:1; } }
  .chat-open::after{
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    box-shadow:0 0 0 0 rgba(250,117,18,.55); animation:chat-knock 2.8s ease-out infinite;
  }
  @keyframes chat-knock{ 0%{ box-shadow:0 0 0 0 rgba(250,117,18,.5); } 70%{ box-shadow:0 0 0 14px rgba(250,117,18,0); } 100%{ box-shadow:0 0 0 0 rgba(250,117,18,0); } }
  @media (prefers-reduced-motion: reduce){ .chat-ico .cd, .chat-open::after{ animation:none; } }
  .chat-dot{ position:absolute; top:.15rem; right:.15rem; width:.85rem; height:.85rem; border-radius:50%;
    background:#3FB950; border:2px solid var(--paper); }
  .chat-panel{
    position:relative; isolation:isolate;
    right:0; bottom:4.3rem; width:min(21.5rem, calc(100vw - 2.5rem));
    display:flex; flex-direction:column; overflow:hidden;
    background:linear-gradient(165deg, var(--paper) 0%, var(--cream-2) 100%);
    border-radius:1.35rem; border:0;
    box-shadow:0 26px 60px -30px rgba(58,38,23,.55), 0 0 0 1px rgba(250,117,18,.16);
    animation:chat-in .45s var(--ease) both;
  }
  .chat-panel{ position:absolute; }
  .chat-panel[hidden]{ display:none; }
  @keyframes chat-in{ from{ opacity:0; transform:translateY(14px) scale(.95); } to{ opacity:1; transform:none; } }
  /* A light runs around the window's edge the whole time it is open. */
  .chat-panel::before{
    content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:2px; pointer-events:none;
    background:conic-gradient(from var(--sweep, 0deg), transparent 0deg 235deg, rgba(255,176,103,.25) 280deg,
      #FFB067 316deg, #FF8401 338deg, rgba(255,132,1,.2) 352deg, transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:card-sweep 3s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .chat-panel{ animation:none; } .chat-panel::before{ animation:none; } }
  .chat-head{ position:relative; display:flex; align-items:center; gap:.65rem; padding:.8rem .9rem;
    background:var(--flame-grad); color:#fff; }
  .chat-head::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:0; height:1px; background:rgba(255,255,255,.28); }
  .chat-mark{ position:relative; flex:none; width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center;
    background:#fff; overflow:hidden; box-shadow:0 6px 14px -8px rgba(58,38,23,.6); }
  .chat-mark img{ width:1.9rem; height:auto; }
  .chat-who{ flex:1; min-width:0; }
  .chat-who b{ display:block; font-size:.9rem; }
  .chat-who small{ display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:rgba(255,255,255,.85);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-who small::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; background:#8FF0A4; flex:none;
    box-shadow:0 0 7px #8FF0A4; }
  /* The bell that silences the chime: one icon at a time, in a round button
     like the one beside it. Without these rules both icons piled up in the
     header and read as a grey box. */
  .chat-bell{ flex:none; width:1.7rem; height:1.7rem; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
    background:rgba(255,255,255,.18); color:#fff; transition:background .25s, transform .25s; }
  .chat-bell:hover{ background:rgba(255,255,255,.32); transform:scale(1.06); }
  .chat-bell svg{ width:1rem; height:1rem; display:block; }
  .chat-bell .bell-off{ display:none; }
  .chat.muted .chat-bell .bell-on{ display:none; }
  .chat.muted .chat-bell .bell-off{ display:block; }
  .chat.muted .chat-bell{ opacity:.75; }
  .chat-close{ flex:none; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:.85rem; cursor:pointer;
    width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; transition:background .25s, transform .25s; }
  .chat-close:hover{ background:rgba(255,255,255,.32); transform:rotate(90deg); }
  .chat-log{ padding:.85rem; display:flex; flex-direction:column; gap:.5rem; height:16rem; overflow-y:auto; overscroll-behavior:contain; }
  .chat-line{ max-width:85%; padding:.5rem .7rem; border-radius:1rem; font-size:.8125rem; line-height:1.45; position:relative; }
  .chat-line span{ display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
  .chat-line i{ display:block; font-style:normal; font-size:.65rem; opacity:.6; margin-top:.15rem; text-align:right; }
  .chat-line img{ display:block; max-width:100%; border-radius:.6rem; margin-bottom:.3rem; }
  .chat-line.shop{ align-self:flex-start; background:var(--paper); color:var(--cocoa); border-bottom-left-radius:.35rem;
    box-shadow:0 8px 18px -14px rgba(58,38,23,.5), 0 0 0 1px var(--line); }
  .chat-line.me{ align-self:flex-end; background:var(--flame-grad); color:#fff; border-bottom-right-radius:.35rem;
    box-shadow:0 10px 20px -14px var(--flame-shadow); }
  .chat-line{ animation:chat-line-in .35s var(--ease) both; }
  @keyframes chat-line-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
  .chat-form{ border-top:1px solid var(--line); padding:.65rem .7rem .75rem; background:var(--paper); }
  .chat-row{ display:flex; align-items:flex-end; gap:.4rem; }
  .chat-clip{ flex:none; width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:.7rem; cursor:pointer;
    color:var(--cocoa-soft); transition:background .2s, color .2s; }
  .chat-clip:hover{ background:var(--cream-2); color:var(--flame-2); }
  .chat-clip svg{ width:1.15rem; height:1.15rem; }
  .chat-form textarea{ flex:1; min-width:0; resize:none; overflow-y:auto; border:1px solid var(--line); border-radius:.9rem; padding:.55rem .75rem;
    font:inherit; font-size:.8125rem; line-height:1.4; background:var(--paper); color:var(--cocoa); max-height:7rem;
    transition:border-color .25s, box-shadow .25s; }
  .chat-form textarea::-webkit-scrollbar{ width:0; height:0; }
  .chat-form textarea:focus{ outline:none; border-color:var(--flame); box-shadow:0 0 0 3px rgba(250,117,18,.14); }
  .chat-send{ flex:none; width:2.35rem; height:2.35rem; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
    background:var(--flame-grad); color:#fff; box-shadow:0 8px 16px -10px var(--flame-shadow);
    transition:transform .25s var(--ease), box-shadow .25s; }
  .chat-send:hover{ transform:translateY(-1px) scale(1.06); box-shadow:0 12px 22px -10px var(--flame-shadow); }
  .chat-send svg{ width:1.05rem; height:1.05rem; }
  .chat-shot{ position:relative; width:4.5rem; margin-bottom:.5rem; }
  .chat-shot[hidden]{ display:none; }
  .chat-shot img{ width:100%; border-radius:.5rem; display:block; }
  .chat-shot button{ position:absolute; top:-.4rem; right:-.4rem; width:1.3rem; height:1.3rem; border-radius:50%; border:0; cursor:pointer;
    background:var(--cocoa); color:#fff; font-size:.7rem; line-height:1; }
  .chat-hint{ margin:.4rem 0 0; font-size:.72rem; color:var(--flame-2); }
  .chat-hint[hidden]{ display:none; }
  @media (max-width:520px){
    .chat-panel{ position:fixed; right:.75rem; left:.75rem; bottom:5rem; width:auto; }
    .chat-log{ height:min(50vh, 20rem); }
  }
  .float-cta{
    position:relative; right:auto; bottom:auto; z-index:70;
    display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-radius:999px;
    background:var(--flame-grad); color:#fff; font-weight:600; font-size:.875rem;
    box-shadow:0 12px 28px -10px var(--flame-shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
    opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
  }
  .float-cta.show{ opacity:1; transform:none; pointer-events:auto; }
  .float-cta:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -10px var(--shadow-strong); }
  .float-cta .ico{ font-size:1.125rem; line-height:1; display:grid; place-items:center; }
  .ig-ico{ width:1.3rem; height:1.3rem; display:block; }
  .footer-social .ig-ico, .footer-social .wa-ico{ width:1.15rem; height:1.15rem; }
  .wa-ico{ width:1.3rem; height:1.3rem; display:block; }
  /* On a phone just the round icon: the words covered the forms' last fields. */
  .float-cta span.txt{ display:none; }
  @media (min-width:900px){ .float-cta span.txt{ display:inline; } }

  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .skip-link{ position:fixed; top:-3rem; left:1rem; background:var(--cocoa); color:var(--cream); padding:.6rem 1.1rem; border-radius:.5rem; z-index:200; transition:top .25s; }
  .skip-link:focus{ top:1rem; }

/* The star map's own controls on the design page. */
.sky-block{ margin-top:1.25rem; }
.sky-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sky-row > div{ min-width:0; }
.sky-lbl{ display:block; font-size:.8125rem; color:var(--cocoa-faint); margin-bottom:.25rem; }
@media (max-width: 480px){ .sky-row{ grid-template-columns:1fr; } }

/* The switches under the date. Each one is a row of its own: the box first,
   its words beside it, both on the same line — written out because without
   it the boxes drift to the right of their own labels. */
.sky-switches{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1rem; margin-top:.75rem; }
.sky-switch{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  padding:.35rem 0; font-size:.9rem; line-height:1.3; color:var(--cocoa);
}
.sky-switch input{
  width:1.05rem; height:1.05rem; margin:0; flex:none; accent-color:var(--gold); cursor:pointer;
}
.sky-switch span{ min-width:0; }
@media (max-width: 560px){ .sky-switches{ grid-template-columns:1fr; } }

/* A finger is not a mouse pointer: on a phone the rows that are tapped get
   the height a thumb needs, without moving anything on a desktop. */
@media (max-width: 560px){
  .sky-switch{ padding:.6rem 0; font-size:.95rem; }
  .sky-switch input{ width:1.25rem; height:1.25rem; }
}

/* The shop's own calendar (public/js/date-picker.js). The browser's date
   panel cannot be styled at all, so the field below is ours: a dark band with
   the month and the arrows, a white sheet of weeks under it, the days either
   side greyed, and the chosen day a filled square — in the shop's own brown
   rather than a borrowed blue. */
.np{ position:relative; }
.np-field{
  width:100%; text-align:left; font:inherit; color:var(--cocoa);
  background:var(--paper); border:1px solid var(--line); border-radius:.7rem;
  padding:.72rem .9rem; cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.np-field:hover{ border-color:var(--cocoa-faint); }
.np.is-open .np-field, .np-field:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,138,62,.18);
}
.np-pop{
  position:absolute; z-index:40; top:calc(100% + .45rem); left:0; width:20.5rem; max-width:min(92vw, 22rem);
  background:var(--paper); border-radius:1rem; box-shadow:var(--shadow);
  overflow:hidden; border:1px solid var(--line);
}
.np-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--cocoa); color:var(--paper); padding:.7rem .8rem;
}
.np-title{ font-weight:700; font-size:.95rem; letter-spacing:.01em; }
.np-nav{
  width:1.9rem; height:1.9rem; line-height:1; font-size:1.15rem; border-radius:.5rem; cursor:pointer;
  border:0; background:transparent; color:var(--paper); opacity:.85;
}
.np-nav:hover{ opacity:1; background:rgba(255,255,255,.12); }
.np-body{ padding:.55rem .6rem .7rem; }
.np-week, .np-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:.1rem; }
.np-week span{
  text-align:center; font-size:.72rem; font-weight:700; padding:.35rem 0 .2rem;
  color:var(--cocoa); text-transform:uppercase; letter-spacing:.02em;
}
.np-day{
  height:2.35rem; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:.5rem; font:inherit; font-size:.92rem;
  font-weight:600; color:var(--cocoa-2); cursor:pointer;
}
.np-day:hover{ background:var(--cream-2); }
.np-day.is-today{ box-shadow:inset 0 0 0 1px var(--gold); }
.np-day.is-on{ background:var(--cocoa); color:var(--paper); font-weight:700; }
.np-day.is-on:hover{ background:var(--cocoa-2); }
.np-day.is-other{ color:var(--cocoa-faint); cursor:default; font-weight:500; }
.np-day.is-off{ color:var(--cocoa-faint); cursor:default; opacity:.5; }
/* Months and years, for the dates nobody reaches by stepping: a birthday is
   a hundred and twenty months-at-a-time taps away. */
.np-title.np-zoom{
  border:0; background:transparent; color:inherit; font:inherit; font-weight:700;
  padding:.2rem .45rem; border-radius:.45rem; cursor:pointer;
}
.np-title.np-zoom:hover{ background:rgba(255,255,255,.12); }
.np-title.np-zoom:focus-visible{ outline:2px solid var(--paper); outline-offset:1px; }
.np-grid.is-months{ grid-template-columns:repeat(3, 1fr); gap:.25rem; }
.np-grid.is-years{ grid-template-columns:repeat(4, 1fr); gap:.25rem; }
.np-cell{
  height:2.6rem; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:.5rem; font:inherit; font-size:.92rem;
  font-weight:600; color:var(--cocoa-2); cursor:pointer;
}
.np-cell:hover{ background:var(--cream-2); }
.np-cell.is-today{ box-shadow:inset 0 0 0 1px var(--gold); }
.np-cell.is-on{ background:var(--cocoa); color:var(--paper); font-weight:700; }
.np-cell.is-on:hover{ background:var(--cocoa-2); }
.np-cell.is-off{ color:var(--cocoa-faint); cursor:default; opacity:.5; }

/* The clock: the calendar's panel, with the days swapped for hours. Six to a
   row rather than seven, because a day has twenty-four of them. */
.np-grid.is-hours, .np-grid.is-minutes{ grid-template-columns:repeat(6, 1fr); }
.np-label{
  margin:.35rem .15rem .1rem; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--cocoa-faint);
}
.np-grid.is-minutes{ margin-bottom:.1rem; }
.np-field.is-empty{ color:var(--cocoa-faint); }
/* The window the customer frames his place in. */
.map-frame-wrap{ margin-top:.7rem; }
.map-frame{
  position:relative; width:100%; border-radius:.7rem; overflow:hidden;
  background:var(--cream-2, #f3eadc); border:1px solid var(--line);
}
.map-frame.is-shaped{ border:0; border-radius:0; background:transparent; }
.map-frame-map{ position:absolute; inset:0; }
.map-frame.look-ink .leaflet-tile-pane{ filter:invert(1); }
.map-frame .leaflet-container{ background:#e9e9e9; font:inherit; }
.map-frame .leaflet-control-zoom{ border:none; box-shadow:0 6px 18px -8px rgba(0,0,0,.5); border-radius:.6rem; overflow:hidden; }
.map-frame .leaflet-control-zoom a{ background:var(--paper); color:var(--cocoa); border-bottom-color:var(--line); }
.map-frame-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:13%; min-width:1.6rem; max-width:3.2rem; pointer-events:none; z-index:500;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.map-frame-mark svg{ width:100%; height:auto; display:block; color:var(--flame); }
.map-frame-hint{ font-size:.8125rem; color:var(--cocoa-faint); margin:.4rem 0 0; }

/* The marks that may stand on the customer's place. */
.map-marks{ display:flex; gap:.5rem; margin-top:.5rem; }
.map-mark{
  flex:1 1 0; display:flex; align-items:center; justify-content:center;
  padding:.7rem 0; border:1px solid var(--line); border-radius:.7rem;
  background:var(--paper); cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.map-mark input{ position:absolute; opacity:0; pointer-events:none; }
.map-mark svg{ width:1.9rem; height:1.9rem; display:block; color:var(--flame); }
.map-mark:hover{ border-color:var(--cocoa-faint); }
.map-mark:has(input:checked){ border-color:var(--flame); box-shadow:0 0 0 3px rgba(250,117,18,.22); }
@media (max-width: 480px){
  .np-pop{ left:0; right:0; width:auto; max-width:none; }
}

/* The shop's own dropdown, built the way the calendar is: the same paper, the
   same corners, the chosen line filled in cocoa. */
.ns{ position:relative; }
.ns-real{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.ns-field{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  text-align:left; font:inherit; color:var(--cocoa);
  background:var(--paper); border:1px solid var(--line); border-radius:.7rem;
  padding:.72rem .9rem; cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.ns-field:hover{ border-color:var(--cocoa-faint); }
.ns.is-open .ns-field, .ns-field:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,138,62,.18);
}
.ns-caret{ color:var(--cocoa-faint); font-size:.8rem; line-height:1; }
.ns.is-open .ns-caret{ color:var(--gold); }
.ns-pop{
  position:absolute; z-index:40; top:calc(100% + .45rem); left:0; width:100%; min-width:13rem;
  background:var(--paper); border-radius:1rem; box-shadow:var(--shadow);
  overflow:hidden; border:1px solid var(--line);
}
.ns-head{ background:var(--cocoa); padding:.55rem .6rem; }
.ns-search{
  width:100%; font:inherit; font-size:.9rem; color:var(--paper);
  background:rgba(255,255,255,.12); border:0; border-radius:.5rem; padding:.45rem .6rem;
}
.ns-search::placeholder{ color:rgba(255,255,255,.65); }
.ns-search:focus{ outline:none; background:rgba(255,255,255,.18); }
.ns-list{ max-height:16rem; overflow-y:auto; padding:.35rem; }
.ns-opt{
  width:100%; display:block; text-align:left; border:0; background:transparent;
  border-radius:.55rem; font:inherit; font-size:.95rem; font-weight:600; color:var(--cocoa-2);
  padding:.55rem .65rem; cursor:pointer;
}
.ns-opt:hover{ background:var(--cream-2); }
.ns-opt.is-on{ background:var(--cocoa); color:var(--paper); }
.ns-opt.is-on:hover{ background:var(--cocoa-2); }
.ns-opt:disabled{ color:var(--cocoa-faint); cursor:default; background:transparent; }
.ns-empty{ margin:0; padding:.9rem .65rem; text-align:center; color:var(--cocoa-faint); font-size:.9rem; }

/* ---------- the shop on a home screen ---------- */
/* The offer to install, and the share mark iPhone hides it behind. A bar at
   the foot of the screen rather than a sheet over the page: it is an offer,
   not a question, and the shop goes on behind it. */
.pwa-bar{ position:fixed; z-index:60; left:50%; transform:translate(-50%, 140%);
  bottom:calc(.9rem + env(safe-area-inset-bottom)); width:min(30rem, calc(100% - 1.5rem));
  display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem;
  border:1px solid var(--line); border-radius:1.15rem; background:var(--paper);
  box-shadow:0 20px 45px -22px rgba(58,38,23,.65); transition:transform .3s ease, opacity .3s ease;
  opacity:0; }
.pwa-bar.on{ transform:translate(-50%, 0); opacity:1; }
/* display:flex above would otherwise beat the browser's own [hidden]. */
.pwa-bar[hidden]{ display:none; }
/* On a phone the chat button and the Instagram button already stand in that
   corner, and the bar's close cross ended up underneath them. */
@media (max-width:760px){ .pwa-bar{ bottom:calc(9.25rem + env(safe-area-inset-bottom)); } }
.pwa-mark{ width:2.5rem; height:2.5rem; border-radius:.7rem; flex:none; }
.pwa-words{ min-width:0; flex:1; line-height:1.35; }
.pwa-words b{ display:block; font-size:.9375rem; }
.pwa-words span{ display:none; font-size:.8125rem; color:var(--cocoa-soft); }
.pwa-bar .pwa-and{ display:block; }
.pwa-bar.is-ios .pwa-and{ display:none; }
.pwa-bar.is-ios .pwa-ios{ display:block; }
.pwa-go{ flex:none; font:inherit; font-weight:700; font-size:.875rem; color:#fff;
  background:var(--gold-deep, #A9752C); border:0; border-radius:999px; padding:.6rem 1.1rem; }
.pwa-x{ flex:none; font:inherit; font-size:1.4rem; line-height:1; color:var(--cocoa-faint);
  background:none; border:0; padding:.2rem .35rem; }
.pwa-x:hover{ color:var(--cocoa); }
@media (prefers-reduced-motion: reduce){ .pwa-bar{ transition:none; } }

/* ---------- the cards we take ---------- */
/* Acceptance marks, each on its own white chip: the band behind them is cream
   in the light and dark brown at night, and a mark that changes colour with
   the theme is no longer the mark. */
.footer-pay{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.6rem; padding:1.1rem 0 .2rem; }
.footer-pay span{ font-size:.8125rem; color:var(--on-band-soft); margin-right:.15rem; }
.footer-pay img{ display:block; height:1.6rem; width:auto; padding:.32rem .5rem;
  background:#fff; border-radius:.4rem; box-shadow:0 1px 3px rgba(0,0,0,.12); }
@media (max-width:480px){ .footer-pay{ gap:.5rem; } .footer-pay span{ width:100%; text-align:center; margin:0 0 .15rem; } }

/* The small word beside a menu line: "Yeni" while a page is worth noticing,
   "Tezliklə" while it is still being drawn. The owner sets it in admin → Menyu. */
.ni-badge{
  display:inline-block; margin-inline-start:.4rem; padding:.05rem .4rem; border-radius:999px;
  font-style:normal; font-size:.625rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  vertical-align:.08em; color:#fff; background:var(--flame-grad, linear-gradient(135deg,#fa7512,#f59e0b));
}
.mobile-nav .ni-badge{ font-size:.6rem; }

/* ---------- the owner's banner ---------- */
/* Moved out of the home page's own sheet when the banner became something
   any page may carry. The markup is partials/hero.blade.php. */
.hero .hero-title{ margin-top:1.25rem; font-size:clamp(2.25rem, 5vw, 3.75rem); line-height:1.08; }
.hero-visual.has-img{ background:var(--cream-2); }
.hero-visual.has-img::before{ display:none; }
.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; }
.hero-visual img.fit-cover{ object-fit:cover; }
.hero-visual img.fit-contain{ object-fit:contain; padding:1.5rem; }
.hero-visual .hero-ribbon{ z-index:2; }
.hero-slider .hero-track{ display:grid; }
.hero-slider .hero-slide{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s; }
.hero-slider .hero-slide.is-on{ opacity:1; visibility:visible; }
.hero-slider .hero-slide:not(.is-on) .hero-in{ animation:none; opacity:0; }
.hero-nav{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.5rem; }
.hero-dots{ display:flex; align-items:center; gap:.5rem; }
.hero-dot{ width:.6rem; height:.6rem; border-radius:999px; border:0; padding:0; background:var(--line);
  transition:width .35s var(--ease), background .35s, box-shadow .35s; }
/* Under the cursor a dot lights up whole, in honey yellow. */
.hero-dot:hover{ width:1.9rem; background:linear-gradient(120deg, #FFD166, #F5B301);
  box-shadow:0 0 12px rgba(245,179,1,.65); }
.hero-dot.is-on{ width:1.9rem; background:var(--flame-grad); box-shadow:0 4px 12px -4px var(--flame-shadow); }
.hero-dot:focus-visible{ outline:2px solid var(--flame); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .hero-slider .hero-slide{ transition:none; } }
.collections-foot{ display:flex; justify-content:center; margin-top:3rem; }

  /* ---------- the catalogue card ---------- */
  /* A tap on the card opens the design; the magnifier is for the visitor
     who only wants a closer look at the artwork. */
  .d-card{ position:relative; }
  .d-card .d-zoom{
    position:absolute; top:.5rem; right:.5rem; z-index:2;
    width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--line);
    background:var(--glass); color:var(--cocoa); display:grid; place-items:center;
    cursor:pointer; padding:0; backdrop-filter:blur(6px);
  }
  .d-card .d-zoom svg{ width:1.0625rem; height:1.0625rem; }
  .d-card .d-zoom:hover{ border-color:var(--gold-deep); }
  .d-card-price{
    display:block; margin-top:.2rem; font-size:.9375rem; font-weight:700;
    color:var(--gold-deep); font-variant-numeric:tabular-nums;
  }

  /* The reason a field was refused, beside that field. */
  .field-why{
    margin:.45rem 0 0; font-size:.8125rem; font-weight:600; line-height:1.45; color:#c0392b;
  }

  /* ---------- the bar that buys, pinned to the phone ---------- */
  /* The design page is seven screens tall and the button that buys sits on
     the fourth. This is its twin, shown once the real one is off-screen. */
  .buy-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:75;
    display:flex; align-items:center; gap:.75rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background:var(--glass); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(58,38,23,.4);
  }
  .buy-bar[hidden]{ display:none; }
  .buy-bar-sum{ flex:none; display:flex; flex-direction:column; line-height:1.15; }
  .buy-bar-sum b{ font-size:1.0625rem; font-variant-numeric:tabular-nums; }
  .buy-bar .btn{ flex:1; padding-top:.85rem; padding-bottom:.85rem; }
  /* The chat bubble steps up out of its way rather than sitting on it. */
  body.has-buy-bar .float-stack{ bottom:5.25rem; }
  @media (min-width:900px){ .buy-bar{ display:none; } }

  /* ---------- who is writing in the chat ---------- */
  /* Asked once of a visitor the shop does not know, because a message with
     no name and no number cannot be answered. */
  .chat-hello{ padding:1rem 1rem 1.1rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.6rem; }
  .chat-hello[hidden]{ display:none; }
  .chat-hello > p{ margin:0; font-size:.8125rem; line-height:1.5; color:var(--cocoa-soft); }
  .chat-hello-f{ display:flex; flex-direction:column; gap:.25rem; }
  .chat-hello-f span{ font-size:.75rem; font-weight:600; color:var(--cocoa-soft); }
  .chat-hello-f input{
    width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:.7rem;
    background:var(--paper); color:var(--cocoa); font: inherit; font-size:.9375rem;
  }
  .chat-hello-f input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .chat-hello .btn{ margin-top:.15rem; }
  .chat-hello-bad{ margin:0; font-size:.8125rem; font-weight:600; color:#c0392b; }
  .chat-hello-bad[hidden]{ display:none; }

  /* The ownership notice, at the foot of the design page. */
  .design-rights-foot{ padding-top:0; }

  /* Closing an account, at the foot of the customer's own page.
     Folded shut by default: it is the one button on the site that cannot be
     taken back, and it should never be the thing a thumb lands on. */
  .danger-card{ border-color:rgba(181,71,63,.35); }
  .danger-card > summary{
    cursor:pointer; list-style:none; font-weight:700; font-size:1.0625rem;
    color:var(--red); padding:.25rem 0;
  }
  .danger-card > summary::-webkit-details-marker{ display:none; }
  .danger-card > summary::after{ content:' ▾'; opacity:.6; }
  .danger-card[open] > summary::after{ content:' ▴'; }
  .danger-card[open] > summary{ margin-bottom:.75rem; }
  .danger-card .lead{ font-size:.9375rem; }
  .btn-danger{ color:var(--red); border-color:rgba(181,71,63,.45); }
  .btn-danger:hover{ background:rgba(181,71,63,.08); }
  .field-bad{ display:block; margin-top:.35rem; font-size:.8125rem; font-weight:600; color:var(--red); }

  /* The strip asking whether Google Analytics may run. Written into the page
     hidden, so it cannot flash before the script has read the saved answer. */
  /* Above every other thing pinned to the foot of the screen — the chat
     buttons (70), the buy bar (75). It was 60, under both, and the chat
     buttons sat squarely on top of «Qəbul edirəm»: the click landed on the
     stack and the strip never went away. A strip that cannot be answered
     cannot be dismissed either, so it has to win the hit test.
     But below the mobile menu (80), which covers the whole screen: at 90
     the strip painted over its last three entries. 78 is the only free
     storey between the buy bar and the menu. */
  .cookie-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:78;
    display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.25rem;
    padding:.95rem 1.1rem calc(.95rem + env(safe-area-inset-bottom, 0px));
    background:var(--paper); border-top:1px solid var(--line);
    box-shadow:0 -8px 28px rgba(58,38,23,.12);
  }
  .cookie-bar[hidden]{ display:none; }
  .cookie-text{
    flex:1 1 20rem; margin:0; font-size:.875rem; line-height:1.5; color:var(--cocoa-soft, inherit);
  }
  .cookie-text a{ color:var(--gold-deep); font-weight:600; text-decoration:underline; }
  .cookie-acts{ display:flex; gap:.6rem; flex:0 0 auto; margin-left:auto; }
  .cookie-acts .btn{ padding:.6rem 1.1rem; font-size:.875rem; white-space:nowrap; }
  @media (max-width:40rem){
    .cookie-acts{ width:100%; margin-left:0; }
    .cookie-acts .btn{ flex:1 1 0; }
  }

  /* While the strip is asking, everything else pinned to the foot of the
     screen steps up out of its way. Winning the hit test above is enough to
     make the buttons work; this is so they can also be SEEN, and so the chat
     and the buy bar are not buried under the strip in return.

     --cookie-h is the strip's measured height, written by cookie-notice.js.
     Measured rather than written here as a number: the text wraps to two or
     three lines on a narrow phone, so any constant would be wrong on exactly
     the screens where the strip is tallest. It falls back to 0px, so if the
     script never runs nothing moves. */
  body.has-cookie-bar .float-stack{ bottom:calc(1.25rem + var(--cookie-h, 0px)); }
  body.has-cookie-bar.has-buy-bar .float-stack{ bottom:calc(5.25rem + var(--cookie-h, 0px)); }
  body.has-cookie-bar .buy-bar{ bottom:var(--cookie-h, 0px); }
  body.has-cookie-bar .pwa-bar{
    bottom:calc(.9rem + var(--cookie-h, 0px) + env(safe-area-inset-bottom));
  }
  @media (max-width:760px){
    body.has-cookie-bar .pwa-bar{
      bottom:calc(9.25rem + var(--cookie-h, 0px) + env(safe-area-inset-bottom));
    }
  }
  /* On a narrow phone the chat window leaves the stack and pins itself to the
     viewport, so the stack moving does not carry it. */
  @media (max-width:520px){
    body.has-cookie-bar .chat-panel{ bottom:calc(5rem + var(--cookie-h, 0px)); }
  }

  /* «Somebody has just ordered…» stands in the same corner on 60, so the buy
     bar and the strip both used to bury it — and its close cross with it,
     which is the one part of it a visitor wants to reach. It steps up too. */
  body.has-buy-bar .sale-toast{ bottom:5.5rem; }
  body.has-cookie-bar .sale-toast{ bottom:calc(9.5rem + var(--cookie-h, 0px)); }
  @media (max-width:640px){
    body.has-buy-bar .sale-toast{ bottom:5.5rem; }
    body.has-cookie-bar .sale-toast{ bottom:calc(1.25rem + var(--cookie-h, 0px)); }
    body.has-cookie-bar.has-buy-bar .sale-toast{ bottom:calc(5.5rem + var(--cookie-h, 0px)); }
  }

  /* The install bar stepped aside for the chat buttons under 760px, while the
     buy bar runs up to 899px. In the band between the two the buy bar covered
     the install bar's button and its close cross outright. */
  @media (max-width:899px){
    body.has-buy-bar .pwa-bar{ bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
    body.has-buy-bar.has-cookie-bar .pwa-bar{
      bottom:calc(5.5rem + var(--cookie-h, 0px) + env(safe-area-inset-bottom));
    }
  }