@charset "UTF-8";
/*
 * site.css : every page (pages/_layout.tsx) : the tokens, the reset, the shared classes, the layout around the pages.
 *
 * Each part is the styles of one component, scoped under its tag (app-header ...) as Angular scoped them :
 * the selectors start with the tag. Plain CSS, edited here.
 */

/* ════════ global ════════ */

/* Global tokens, reset and the classes every section shares (from the Angular website's styles.scss). */
/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
/* Bodoni Moda (SIL Open Font License, Owen Earl) : the footer's big name "Little NAP", as Little Nap chose */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bodoni-moda-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bodoni-moda-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/inter-normal-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/inter-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --red: #d71a21;
  --red-dark: #b0141a;
  --ink: #171312;
  --ink-soft: #2b2422;
  --night: #0f0b0a;
  --paper: #fbf8f5;
  --cream: #f4ece4;
  --sand: #e8dccf;
  --muted: #6d6460;
  --line: rgba(23, 19, 18, 0.1);
  /* surfaces, by role — each one redefined for the dark theme below */
  /** cards, menus, popups: whatever sits on the page */
  --surface: #fff;
  /** a well inside a surface (inputs, chips, image wells) */
  --surface-2: #f6f2ef;
  /** a red-tinted wash (hovered rows, soft icon discs) */
  --tint: #fff5f5;
  /** a dark chip with white text (tooltips, the dark button) */
  --dark-chip: var(--ink);
  /** ink that stays dark whatever the theme: text on a surface that stays white */
  --ink-fixed: #171312;
  /** the inner pages' own background, under their dark banner */
  --page-inner: #fff;
  /** the well behind a chair photographed on white */
  --photo-well: #fff;
  /** the soft blush tile a photo on white melts into (multiply) */
  --well: #f6eeec;
  /** a quiet stone band between sections (the videos) */
  --band: #ece6e0;
  /** a small frosted chip over a photo (the like heart…) */
  --chip: rgba(255, 255, 255, 0.92);
  /** a card's faint outline, and a firmer one (chips, inputs) */
  --edge: rgba(23, 19, 18, 0.07);
  --edge-strong: #ddd5d1;
  /** the border of a red-tinted box */
  --tint-edge: #f1d7d4;
  /** success: the tick's disc and ink */
  --ok-bg: #e6f4ea;
  --ok: #1f8a44;
  /** a selected tab raised off its track */
  --raised: #fff;
  /** secondary text in the popups, a quieter grey, and the faintest (placeholders, disabled) */
  --text-2: #6d6d6d;
  --popup-muted: #8a8a8a;
  --faint: #b0b0b0;
  /** a field's border under the pointer */
  --edge-hover: #b4b4b4;
  /** dark red text on a red-tinted box */
  --tint-ink: #7a2226;
  /* the popups' own palette (Enquire Now, Recliner Finder): a brighter red beside the brand's */
  --popup-red: #ff2d35;
  --popup-red-dark: #96070d;
  --popup-ink: #323232;
  --popup-line: #dcdcdc;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  /* the footer's links and its big name (Little Nap's choice ; the logo itself is set in Philosopher) */
  --font-footer: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(18px, 4vw, 40px);
  --radius: 22px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* The dark theme (see theme.ts): the same roles in a warm, near-black palette. */
:root[data-theme=dark] {
  color-scheme: dark;
  --red: #e8262d;
  --red-dark: #c4161d;
  --ink: #f4ede8;
  --ink-soft: #d9cfc9;
  --night: #080605;
  --paper: #110d0c;
  --cream: #1b1614;
  --sand: #2a231f;
  --muted: #a89c95;
  --line: rgba(255, 255, 255, 0.1);
  --surface: #1c1715;
  --surface-2: #26201d;
  --tint: rgba(232, 38, 45, 0.14);
  --dark-chip: #3b322e;
  --page-inner: var(--paper);
  /* (the white of the photos, toned down to a warm studio grey: see the multiply on those photos) */
  --photo-well: #e9e2dc;
  --well: #e6dcd7;
  --band: #191412;
  --chip: rgba(28, 23, 21, 0.86);
  --edge: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.16);
  --tint-edge: rgba(232, 38, 45, 0.4);
  --ok-bg: rgba(52, 168, 90, 0.16);
  --ok: #4cc27a;
  --raised: #3a312d;
  --text-2: #c9c0ba;
  --popup-muted: #9d948e;
  --faint: #6f6660;
  --edge-hover: rgba(255, 255, 255, 0.3);
  --tint-ink: #ffb3b6;
  --popup-ink: #e9e3df;
  --popup-line: rgba(255, 255, 255, 0.14);
  /* the header's glass */
  --hdr-glass: rgba(24, 19, 17, 0.35);
  --hdr-glass-stuck: rgba(20, 16, 14, 0.62);
  --hdr-edge: rgba(255, 255, 255, 0.09);
  --hdr-dock: rgba(255, 255, 255, 0.06);
  --popup-close: rgba(255, 255, 255, 0.08);
  --popup-close-hover: rgba(255, 255, 255, 0.16);
}

/* the logo (and anything else) in two versions: one per theme */
.only-dark {
  display: none !important;
}

:root[data-theme=dark] .only-light {
  display: none !important;
}
:root[data-theme=dark] .only-dark {
  display: block !important;
}

/* Switching theme: the new one opens out as a circle from the button (see Theme.toggle), */
/* in place of the browser's own cross-fade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Nothing in a page widens it: on a phone or a tablet, content past the right edge (a section's reveal, a card
   beside a picture) would make the browser lay the page out wider than the screen, and push the header's buttons
   off it. (clip, not hidden: the page still scrolls as one, and sticky parts stay sticky) */
main {
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* no focus ring anywhere on the site, clicked or tabbed to (this beats every element's own ring below) */
*:focus,
*:focus-visible {
  outline: none !important;
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: none !important;
}
input[type=range]:focus-visible::-moz-range-thumb {
  outline: none !important;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 32px);
}

/* A section reached through a "#…" link with the keyboard takes focus, so that */
/* tabbing carries on from there (see App.onClick) — it needs no ring of its own. */
:where(section, aside)[tabindex="-1"]:focus-visible {
  outline: none;
}

.container {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section {
  padding-block: clamp(36px, 5vw, 68px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.title em {
  font-style: italic;
  color: var(--red);
}

.lead {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn:active {
  transform: scale(0.98);
}
.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(215, 26, 33, 0.7);
}
.btn--primary:hover {
  background: var(--red-dark);
}

/* ── a button with the little delivery truck (components/Truck.tsx; in the browser public/js/lib/truck.js): under the
   pointer it drives a recliner in from the left and waits beside the label, the label making room; on a click
   (aria-busy) it drives away with it, and keeps crossing until the button is done. Login, Buy now, Place order.
   The truck is placed from the label, so that it parks beside it whatever the button says.
   (svg.truck: so that .btn's own icon rules, the size and the nudge, leave it alone) ── */
.truck-btn {
  position: relative;
  overflow: hidden;
}
.truck-btn__label {
  position: relative;
  display: inline-block;
  transition: translate 0.6s var(--ease);
}
.truck-btn__text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}
.truck-btn svg.truck {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  width: 54px;
  height: 30px;
  overflow: visible;
  pointer-events: none;
  transform: none;
  translate: -360px -50%;
  /* leaving: it backs out, speeding up */
  transition: translate 0.5s cubic-bezier(0.55, 0, 0.8, 0.3);
}
.truck__chair {
  fill: #4b4442;
}
.truck__seam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.truck__cab {
  fill: #fff;
}
.truck__bed {
  fill: #f4ece4;
}
.truck__window {
  fill: #cfe6f5;
}
.truck__light {
  fill: #ffd76a;
}
.truck__pipe {
  fill: #9a9290;
}
.truck__wheel circle {
  fill: #2b2422;
}
.truck__wheel .truck__hub {
  fill: #e6e0dc;
}
.truck__spoke {
  stroke: #e6e0dc;
  stroke-width: 1.2;
  stroke-linecap: round;
}
.truck__wheel,
.truck__puff {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.truck__wheel {
  animation: truck--back 0.5s cubic-bezier(0.55, 0, 0.8, 0.3);
}
.truck__puff {
  fill: rgba(255, 255, 255, 0.75);
  opacity: 0;
}

/* under the pointer (or the keyboard): in from the left, slowing down to park, then idling */
.truck-btn:is(:hover, :focus-visible) .truck-btn__label {
  translate: 32px 0;
}
.truck-btn:is(:hover, :focus-visible) svg.truck {
  translate: 0 -50%;
  transition: translate 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.truck-btn:is(:hover, :focus-visible) .truck__wheel {
  animation: truck--roll 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.truck-btn:is(:hover, :focus-visible) .truck__body {
  animation: truck--idle 0.38s ease-in-out 0.75s infinite alternate;
}
.truck-btn:is(:hover, :focus-visible) .truck__puff {
  animation: truck--puff 1.1s ease-out 0.7s infinite;
}
.truck-btn:is(:hover, :focus-visible) .truck__puff:nth-of-type(2) {
  animation-delay: 1.07s;
}
.truck-btn:is(:hover, :focus-visible) .truck__puff:nth-of-type(3) {
  animation-delay: 1.44s;
}

/* busy (logging in, off to the cart): the label steps aside and the truck drives off with the chair, then keeps
   crossing until the button is done */
.truck-btn[aria-busy=true] .truck-btn__label {
  translate: 32px 0;
}
.truck-btn[aria-busy=true] .truck-btn__text {
  opacity: 0;
}
.truck-btn[aria-busy=true] svg.truck {
  translate: 0 -50%;
  transition: none;
  animation: truck--away 0.6s cubic-bezier(0.55, 0, 0.85, 0.35) forwards, truck--run 1.4s linear 0.6s infinite;
}
.truck-btn[aria-busy=true] .truck__wheel {
  animation: truck--spin 0.22s linear infinite;
}
.truck-btn[aria-busy=true] .truck__body {
  animation: truck--idle 0.16s ease-in-out infinite alternate;
}
.truck-btn[aria-busy=true] .truck__puff {
  animation: truck--puff 0.5s ease-out infinite;
}
.truck-btn[aria-busy=true] .truck__puff:nth-of-type(2) {
  animation-delay: 0.17s;
}
.truck-btn[aria-busy=true] .truck__puff:nth-of-type(3) {
  animation-delay: 0.34s;
}

@keyframes truck--roll {
  to {
    rotate: 1080deg;
  }
}
@keyframes truck--back {
  to {
    rotate: -720deg;
  }
}
@keyframes truck--spin {
  to {
    rotate: 360deg;
  }
}
@keyframes truck--idle {
  to {
    translate: 0 -0.8px;
  }
}
@keyframes truck--puff {
  from {
    opacity: 0.85;
    scale: 0.4;
  }
  to {
    opacity: 0;
    scale: 1.6;
    translate: -9px -5px;
  }
}
@keyframes truck--away {
  from {
    translate: 0 -50%;
  }
  to {
    translate: 520px -50%;
  }
}
@keyframes truck--run {
  from {
    translate: -360px -50%;
  }
  to {
    translate: 520px -50%;
  }
}

/* less motion: no truck, the label stays put and in sight */
@media (prefers-reduced-motion: reduce) {
  .truck-btn svg.truck {
    display: none;
  }
  .truck-btn .truck-btn__label {
    translate: none !important;
  }
  .truck-btn .truck-btn__text {
    opacity: 1 !important;
  }
}
.btn--dark {
  background: var(--dark-chip);
  color: #fff;
}
.btn--dark:hover {
  background: #000;
}
.btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink-fixed);
}
.btn--light {
  background: #fff;
  color: var(--ink-fixed);
}
.btn--light:hover {
  background: var(--cream);
}
.btn--sm {
  min-height: 42px;
  padding: 0 20px;
  font-size: 14px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--red);
}
.link-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* "View all …": a pill with the range's icon, a two-line label and a round arrow. On hover the */
/* pill fills with red and the arrow slides on. */
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 8px;
  border: 1.5px solid rgba(215, 26, 33, 0.22);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 10px 24px -18px rgba(215, 26, 33, 0.6);
  transition: background-color 0.3s var(--ease), border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.view-all:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 16px 30px -14px rgba(215, 26, 33, 0.75);
  transform: translateY(-2px);
}
.view-all:active {
  transform: translateY(0) scale(0.98);
}
.view-all:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.view-all__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.3s, color 0.3s;
}
.view-all__icon svg {
  width: 21px;
  height: 21px;
}
.view-all:hover .view-all__icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.view-all__text {
  display: grid;
  line-height: 1.2;
}
.view-all__text small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.view-all__text strong {
  font-size: 15px;
  font-weight: 700;
}
.view-all:hover .view-all__text small {
  color: rgba(255, 255, 255, 0.75);
}

.view-all__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transition: background-color 0.3s, color 0.3s;
}
.view-all__go svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease);
}
.view-all:hover .view-all__go {
  background: #fff;
  color: var(--red);
}
.view-all:hover .view-all__go svg {
  animation: view-all-go 0.5s var(--ease);
}

/* the arrow leaves on the right and comes back in from the left */
@keyframes view-all-go {
  45% {
    transform: translateX(150%);
  }
  46% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .view-all:hover {
    transform: none;
  }
  .view-all:hover .view-all__go svg {
    animation: none;
  }
}
/* Scroll-in reveal (see RevealDirective). Content is visible by default so it */
/* never depends on JavaScript having run. */
/* (`:not(.is-done)` : until the reveal has played it beats a card's own transition, e.g. its hover lift ; once done,
   the script adds `is-done` and the card's own transition is back, with no delay) */
.reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}
.reveal:not(.is-done) {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
/* in from the side: a longer way to travel, so a little longer to do it */
.reveal.reveal--left:not(.is-done), .reveal.reveal--right:not(.is-done) {
  transition-duration: 1s;
}
.reveal.reveal--left:not(.is-in) {
  transform: translateX(-64px);
}
.reveal.reveal--right:not(.is-in) {
  transform: translateX(64px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* A page's sections (lib/chrome.js) : each rises into place, one by one, as the page is scrolled to it */
.reveal-section:not(.is-in) {
  opacity: 0;
  transform: translateY(56px);
}
.reveal-section:not(.is-done) {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The shell of a centre popup (see Popups): the dimmed page, the dialog's box */
/* and its close button. Each popup's component lays out its own dialog. */
.popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* the type its text starts from — lighter and a little wider-set than the page's */
  color: var(--popup-ink);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.3px;
}
.popup.is-open {
  display: flex;
}

.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: popup-fade 0.25s ease-out;
}

.popup__dialog {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: popup-pop 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.popup__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--popup-close, rgba(0, 0, 0, 0.07));
  color: var(--popup-ink);
  font: 400 20px/1 Arial, sans-serif;
  letter-spacing: normal;
  transition: background-color 0.2s;
}
.popup__close:hover {
  background: var(--popup-close-hover, rgba(0, 0, 0, 0.15));
}
.popup__close:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 2px;
  border-radius: 50%;
}

@keyframes popup-fade {
  from {
    opacity: 0;
  }
}
@keyframes popup-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}
/* the page behind an open popup stays where it is */
body.popup-lock {
  overflow: hidden;
}

@media (max-width: 560px) {
  .popup {
    padding: 16px 12px;
  }
}
/* landscape phones: a slimmer header leaves more room for the page */
@media (max-height: 520px) {
  :root {
    --header-h: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal:not(.is-done),
  .reveal.reveal--left:not(.is-done),
  .reveal.reveal--right:not(.is-done),
  .reveal-section:not(.is-done) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .popup__backdrop,
  .popup__dialog {
    animation: none;
  }
}
/* the "Skip to content" link (from app.scss) */
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--dark-chip);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s;
}
.skip:focus {
  top: 16px;
}

/* (what the Angular templates left out with @if, the server writes hidden : the scripts show it) */
[hidden] {
  display: none !important;
}

/* the loader is the first page of a visit only (see the script in the head of pages/_layout.tsx) */
:root[data-seen] app-preloader {
  display: none;
}

/* ════════ <app-header> ════════ */

app-header {
  display: block;
}

/* A glass pill floating over the hero; once the page scrolls it docks to the */
/* top edge. Only the bar takes clicks — the space around it lets them through. */
app-header .hdr {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(10px, 1.6vw, 18px) clamp(12px, 3vw, 36px);
  pointer-events: none;
  transition: padding-top 0.3s;
}
app-header .hdr.is-stuck {
  padding-top: 0;
}

app-header .hdr__bar {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 28px);
  width: min(100%, 1296px);
  margin-inline: auto;
  min-height: calc(var(--header-h) - 4px);
  padding: 8px 8px 8px clamp(16px, 2vw, 24px);
  /* (a faint edge, so the rim is a hint of glass rather than a white outline) */
  border: 1px solid var(--hdr-edge, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  /* (translucent: the page shows through, the strong blur keeps the black-and-red logo and the links readable) */
  background: var(--hdr-glass, rgba(255, 255, 255, 0.4));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 14px 34px -26px rgba(26, 26, 26, 0.4);
  transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s, box-shadow 0.3s;
}
app-header .is-stuck .hdr__bar {
  background: var(--hdr-glass-stuck, rgba(255, 255, 255, 0.7));
  border-top-color: transparent;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 16px 38px -22px rgba(26, 26, 26, 0.6);
}

/* (the logo keeps its width however tight the bar) */
app-header .hdr__logo {
  flex: none;
}
app-header .hdr__logo img {
  width: auto;
  max-width: none;
  height: 40px;
}

/* ── links ─────────────────────────────────────────────────────────────── */
app-header .hdr__nav {
  justify-self: center;
}

app-header .hdr__nav-head,
app-header .hdr__nav-foot {
  display: none;
}

app-header .hdr__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

app-header .hdr__item {
  position: relative;
}

app-header .hdr__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
app-header .hdr__link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}
app-header .hdr__link:hover, app-header .hdr__link.is-active {
  color: #fff;
  background: var(--red);
}

/* (the gliding pill under the menu is for the wide bar only — see below) */
app-header .hdr__glider {
  display: none;
}

/* The logo's chair beside the name of the page you are on, and of the link under the pointer. */
/* Every link has the same room on both sides, so the gaps between the names are even. When the chair shows, */
/* that room moves to its left (the width stays), so the name slides over for it and nothing else moves. */
@media (min-width: 1101px) {
  app-header {
    /* (Collections turns red while its menu is open: its chair shows too) */
    /* ── once the pill is placed, it alone is red: the links only turn white over it ── */
    /* the liquid drop: the logo's own flat red, with a faint light on its top edge, that squashes */
    /* as it sets off and wobbles as it lands */
  }
  /* (the room on either side grows with the screen: 13px on a small laptop, 22px on a wide screen) */
  app-header .hdr__link {
    --pad: clamp(13px, 2.2vw - 11px, 22px);
    position: relative;
    z-index: 1;
    padding-left: var(--pad);
    padding-right: var(--pad);
    font-size: 13.5px;
    transition: color 0.2s, background-color 0.2s, padding 0.32s var(--ease);
  }
  app-header .hdr__link svg {
    width: 14px;
    height: 14px;
  }
  /* (with the chair: the chair as far from the left edge as the name from the right, 5px between them : the same
     width in all) */
  app-header .hdr__link:hover, app-header .hdr__link:focus-visible, app-header .hdr__link.is-active,
  app-header .hdr__item--sub:not(.is-dismissed):hover > .hdr__link,
  app-header .hdr__item--sub:not(.is-dismissed):focus-within > .hdr__link {
    padding-left: calc(var(--pad) + 9px);
    padding-right: calc(var(--pad) - 9px);
  }
  app-header .hdr__link::before {
    content: "";
    position: absolute;
    left: calc(var(--pad) - 9px);
    top: 50%;
    width: 13px;
    height: 11px;
    margin-top: -5.5px;
    background: currentColor;
    /* (the chair cut out of the logo's red square — public/assets/misc/chair.png) */
    -webkit-mask: url("../assets/misc/chair.png") center/contain no-repeat;
    mask: url("../assets/misc/chair.png") center/contain no-repeat;
    opacity: 0;
    transform: translateX(-5px) rotate(-14deg) scale(0.6);
    transition: opacity 0.22s, transform 0.32s var(--ease);
  }
  app-header .hdr__link:hover::before, app-header .hdr__link:focus-visible::before, app-header .hdr__link.is-active::before {
    opacity: 1;
    transform: none;
  }
  app-header .hdr__item--sub:not(.is-dismissed):hover > .hdr__link::before,
  app-header .hdr__item--sub:not(.is-dismissed):focus-within > .hdr__link::before {
    opacity: 1;
    transform: none;
  }
  app-header .hdr__list {
    position: relative;
  }
  app-header .hdr__list.has-glider .hdr__link,
  app-header .hdr__list.has-glider .hdr__link:hover,
  app-header .hdr__list.has-glider .hdr__link.is-active,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):hover > .hdr__link,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):focus-within > .hdr__link {
    background: transparent;
    box-shadow: none;
    color: var(--ink);
  }
  app-header .hdr__list.has-glider .hdr__link::before,
  app-header .hdr__list.has-glider .hdr__link:hover::before,
  app-header .hdr__list.has-glider .hdr__link.is-active::before,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):hover > .hdr__link::before {
    opacity: 0;
    transform: translateX(-5px) rotate(-14deg) scale(0.6);
  }
  /* (the name's room follows its chair: even on both sides while the chair is hidden) */
  app-header .hdr__list.has-glider .hdr__link,
  app-header .hdr__list.has-glider .hdr__link:hover,
  app-header .hdr__list.has-glider .hdr__link.is-active,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):hover > .hdr__link {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  app-header .hdr__list.has-glider .hdr__link.is-lit,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):hover > .hdr__link.is-lit {
    color: #fff;
    padding-left: calc(var(--pad) + 9px);
    padding-right: calc(var(--pad) - 9px);
    transition-delay: 0.08s;
  }
  app-header .hdr__list.has-glider .hdr__link.is-lit::before,
  app-header .hdr__list.has-glider .hdr__item--sub:not(.is-dismissed):hover > .hdr__link.is-lit::before {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
  }
  app-header .hdr__glider {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: var(--w, 0);
    height: var(--h, 0);
    opacity: 0;
    transform: translate(var(--x, 0), var(--y, 0));
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1), width 0.55s cubic-bezier(0.34, 1.32, 0.5, 1), opacity 0.25s;
    will-change: transform, width;
    /* a first appearance, or a resize: no slide */
  }
  app-header .hdr__glider.is-on {
    opacity: 1;
  }
  app-header .hdr__glider.no-slide {
    transition: opacity 0.25s;
  }
  app-header .hdr__glider-blob {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 6px 16px -8px rgba(215, 26, 33, 0.6);
    /* the gloss along the top */
    /* a light that sweeps across on each move */
  }
  app-header .hdr__glider-blob::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 12%;
    right: 12%;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  }
  app-header .hdr__glider-blob::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    opacity: 0;
  }
  app-header .is-moving .hdr__glider-blob {
    animation: app-header--liquid 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  app-header .is-moving .hdr__glider-blob::after {
    animation: app-header--shine 0.6s ease-out;
  }
  @keyframes app-header--liquid {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1.12, 0.78);
    }
    55% {
      transform: scale(0.95, 1.08);
    }
    78% {
      transform: scale(1.02, 0.97);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  @keyframes app-header--shine {
    0% {
      left: -60%;
      opacity: 1;
    }
    100% {
      left: 120%;
      opacity: 0;
    }
  }
}

/* ── the Collections menu ──────────────────────────────────────────────── */
app-header .sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 270px;
  width: max-content;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 50px -24px rgba(26, 26, 26, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  /* bridges the gap under the link, so the pointer can cross it without the menu closing */
}
app-header .sub::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto;
  height: 10px;
}

app-header .sub__item {
  position: relative;
}
/* a little space between two rows, so two lit ones (hovered and active) never touch */
app-header .sub__item + .sub__item {
  margin-top: 4px;
}

app-header .sub__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

app-header .sub__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(215, 26, 33, 0.08);
  color: var(--red);
  transition: background-color 0.2s, color 0.2s;
}
app-header .sub__icon svg {
  width: 18px;
  height: 18px;
}

app-header .sub__label {
  flex: 1;
}

app-header .sub__arrow {
  width: 15px;
  height: 15px;
  color: var(--muted);
  opacity: 0.45;
  transition: transform 0.2s, opacity 0.2s, color 0.2s;
}

app-header .sub__link:hover,
app-header .sub__item:hover > .sub__link,
app-header .sub__item:focus-within > .sub__link {
  background: rgba(215, 26, 33, 0.06);
  color: var(--red-dark);
}
app-header .sub__link:hover .sub__icon,
app-header .sub__item:hover > .sub__link .sub__icon,
app-header .sub__item:focus-within > .sub__link .sub__icon {
  background: var(--red);
  color: #fff;
}
app-header .sub__link:hover .sub__arrow,
app-header .sub__item:hover > .sub__link .sub__arrow,
app-header .sub__item:focus-within > .sub__link .sub__arrow {
  opacity: 1;
  color: var(--red);
  transform: translateX(3px);
}

/* the collection the visitor is in: tinted row, solid red icon, red bold label, red arrow */
app-header .sub__link.is-active {
  background: rgba(215, 26, 33, 0.08);
  color: var(--red);
  font-weight: 700;
}
app-header .sub__link.is-active .sub__icon {
  background: var(--red);
  color: #fff;
}
app-header .sub__link.is-active .sub__arrow {
  opacity: 1;
  color: var(--red);
}

@media (min-width: 1101px) {
  app-header .hdr__item--sub:not(.is-dismissed):hover > .sub,
  app-header .hdr__item--sub:not(.is-dismissed):focus-within > .sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  app-header .hdr__item--sub:not(.is-dismissed):hover > .hdr__link,
  app-header .hdr__item--sub:not(.is-dismissed):focus-within > .hdr__link {
    color: #fff;
    background: var(--red);
  }
  app-header .hdr__item--sub:not(.is-dismissed):hover > .hdr__link svg,
  app-header .hdr__item--sub:not(.is-dismissed):focus-within > .hdr__link svg {
    transform: rotate(180deg);
  }
  app-header .hdr__backdrop {
    display: none;
  }
}

/* ── account, wishlist, cart, menu button ──────────────────────────────── */
app-header .hdr__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

app-header .hdr__icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  /* signed in: a small red dot on the account icon */
}
app-header .hdr__icon-btn svg {
  width: 21px;
  height: 21px;
}
app-header .hdr__icon-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
app-header .hdr__icon-btn.is-signed-in::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--red);
}

app-header .hdr__burger {
  display: none;
}

/* wishlist and cart, side by side in one soft pill */
app-header .hdr__dock {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hdr-dock, rgba(244, 236, 228, 0.7));
}

app-header .hdr__dock-btn {
  width: 38px;
  height: 38px;
  /* a thin rule between the two */
  /* its name, under it, on hover or focus */
}
app-header .hdr__dock-btn svg {
  width: 19px;
  height: 19px;
}
app-header .hdr__dock-btn + .hdr__dock-btn::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}
app-header .hdr__dock-btn:hover, app-header .hdr__dock-btn:focus-visible {
  border-color: transparent;
  background: var(--surface);
  color: var(--red);
  box-shadow: 0 6px 14px -8px rgba(23, 19, 18, 0.45);
}
app-header .hdr__dock-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
app-header .hdr__dock-btn::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
app-header .hdr__dock-btn:hover::after, app-header .hdr__dock-btn:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
app-header .hdr__dock-btn .hdr__count {
  top: 0;
  right: -1px;
}

/* light / dark: a sun whose rays draw in as a shadow bites it into a moon */
app-header .hdr__theme svg {
  overflow: visible;
}

app-header .hdr__theme-core,
app-header .hdr__theme-bite,
app-header .hdr__theme-rays {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s;
}

:where([data-theme=dark]) app-header .hdr__theme .hdr__theme-core {
  transform: scale(1.55);
}
:where([data-theme=dark]) app-header .hdr__theme .hdr__theme-bite {
  transform: translate(-7px, 4px);
}
:where([data-theme=dark]) app-header .hdr__theme .hdr__theme-rays {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* signed out: a clear way in */
app-header .hdr__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 5px;
  border: 1.5px solid rgba(215, 26, 33, 0.28);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
app-header .hdr__login-btn:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(215, 26, 33, 0.9);
  transform: translateY(-1px);
}
app-header .hdr__login-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

app-header .hdr__login-btn-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transition: background-color 0.25s, color 0.25s;
}
app-header .hdr__login-btn-icon svg {
  width: 16px;
  height: 16px;
}
app-header .hdr__login-btn:hover .hdr__login-btn-icon {
  background: #fff;
  color: var(--red);
}

/* the number of liked recliners, on the heart */
app-header .hdr__count {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ── signed in: the first name, and the account menu under it ──────────── */
app-header .hdr__me {
  position: relative;
}

app-header .hdr__me-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px 0 11px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(215, 26, 33, 0.9);
  transition: background-color 0.2s, transform 0.2s;
}
app-header .hdr__me-btn:hover, app-header .hdr__me-btn[aria-expanded=true] {
  background: var(--red-dark);
}
app-header .hdr__me-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

app-header .hdr__me-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
}

app-header .hdr__me-avatar--lg {
  width: 42px;
  height: 42px;
  background: var(--red);
  color: #fff;
  font-size: 17px;
}

app-header .hdr__me-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* (as wide as "Customer", then … ) */
app-header .hdr__me-name {
  max-width: 4.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

app-header .hdr__me-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
app-header [aria-expanded=true] > .hdr__me-caret {
  transform: rotate(180deg);
}

/* a desktop (the links in the bar, which is full) : the person alone on the red disc, its name and caret left out, a
   tip under it as the dock's have ; tablets keep the name (their bar has room), phones the person and the caret */
@media (min-width: 1101px) {
  app-header .hdr__me-btn {
    position: relative;
    justify-content: center;
    width: 36px;
    padding: 0;
  }
  app-header .hdr__me-btn .hdr__me-name,
  app-header .hdr__me-btn .hdr__me-caret {
    display: none;
  }
  app-header .hdr__me-btn .hdr__me-icon {
    width: 18px;
    height: 18px;
  }
  app-header .hdr__me-btn::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 5;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--dark-chip);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -4px);
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
  }
  /* (not while its menu is open : the menu is there) */
  app-header .hdr__me-btn:is(:hover, :focus-visible):not([aria-expanded=true])::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

app-header .hdr__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  width: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 50px -16px rgba(23, 19, 18, 0.35);
  animation: app-header--menu-in 0.18s var(--ease);
}

@keyframes app-header--menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

app-header .hdr__menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--cream);
}
app-header .hdr__menu-head span:last-child {
  min-width: 0;
}
app-header .hdr__menu-head strong,
app-header .hdr__menu-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
app-header .hdr__menu-head strong {
  font-size: 15px;
  color: var(--ink);
}
app-header .hdr__menu-head small {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

app-header .hdr__menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 18px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}
app-header .hdr__menu-link svg {
  width: 18px;
  height: 18px;
  color: var(--red);
}
app-header .hdr__menu-link:hover, app-header .hdr__menu-link:focus-visible {
  background: var(--tint);
  color: var(--red);
  outline: none;
}

app-header .hdr__menu-link--out {
  border-top: 1px solid var(--line);
  color: var(--red);
}

app-header .hdr__login {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 11px 11px 20px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 0 12px 24px -14px rgba(215, 26, 33, 0.9);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
app-header .hdr__login:hover {
  transform: translateY(-2px);
  background: var(--red-dark);
  box-shadow: 0 16px 28px -14px rgba(215, 26, 33, 0.9);
}

/* "Login" — or, once signed in, the account's name (cut short if it is long) */
app-header .hdr__login-name {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

app-header .hdr__login-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
}
app-header .hdr__login-icon svg {
  width: 16px;
  height: 16px;
}

/* ── tablet & phone: the links move into a drawer ──────────────────────── */
@media (max-width: 1100px) {
  app-header {
    /* each menu becomes a list that folds open inside the drawer */
  }
  app-header .hdr__bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-left: clamp(12px, 3vw, 20px);
    /* The blur moves to a layer behind the bar: on the bar itself it would make */
    /* the bar, not the window, the box its fixed drawer is laid out in. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  app-header .hdr__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
  }
  app-header .hdr__burger {
    display: grid;
  }
  app-header .hdr__nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    padding: 16px 20px 24px;
    overflow-y: auto;
    background: var(--surface);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s, visibility 0.3s;
  }
  app-header .hdr__nav.is-open {
    transform: none;
    visibility: visible;
  }
  app-header .hdr__nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  app-header .hdr__nav-head img {
    width: auto;
    height: 46px;
  }
  app-header .hdr__nav-head .hdr__icon-btn {
    border-color: var(--line);
  }
  app-header .hdr__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  app-header .hdr__item {
    border-bottom: 1px solid var(--line);
  }
  app-header .hdr__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
    border-radius: 0;
    font-size: 16px;
  }
  app-header .hdr__link svg {
    width: 18px;
    height: 18px;
  }
  app-header .hdr__link:hover, app-header .hdr__link.is-active {
    color: var(--red);
    background: none;
  }
  app-header .hdr__item.is-open > .hdr__link svg {
    transform: rotate(180deg);
  }
  app-header .sub {
    position: static;
    display: none;
    min-width: 0;
    width: auto;
    padding: 0 0 8px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  app-header .sub::before {
    display: none;
  }
  app-header .hdr__item.is-open > .sub {
    display: block;
  }
  app-header .hdr__nav-foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 24px;
  }
  app-header .hdr__nav-foot .hdr__login {
    justify-content: center;
    padding-block: 13px;
  }
  app-header .hdr__nav-foot .hdr__login-name {
    max-width: 220px;
  }
  app-header .hdr__drawer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  app-header .hdr__drawer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
  }
  app-header .hdr__drawer-link svg {
    width: 19px;
    height: 19px;
  }
  app-header .hdr__drawer-link:hover {
    border-color: var(--red);
    color: var(--red);
  }
  /* the cart's count beside its word */
  app-header .hdr__drawer-link .hdr__count {
    position: static;
  }
  app-header .hdr__backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(26, 26, 26, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  app-header .hdr__backdrop.is-visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }
  /* a slimmer bar once the links move into the drawer */
  app-header .hdr__bar {
    min-height: 0;
    padding-block: 4px;
    padding-right: 5px;
  }
  /* ...and full width: the bar runs edge to edge along the top (its lower corners rounded), the logo and the menu
     button in line with the page's own edges */
  app-header .hdr,
  app-header .hdr.is-stuck {
    padding: 0;
  }
  app-header .hdr__bar,
  app-header .is-stuck .hdr__bar {
    width: 100%;
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) - 8px);
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
  }
  app-header .hdr__logo img {
    height: 38px;
  }
  app-header .hdr__icon-btn {
    width: 36px;
    height: 36px;
  }
  app-header .hdr__icon-btn svg {
    width: 20px;
    height: 20px;
  }
  app-header .hdr__icon-btn.is-signed-in::after {
    top: 5px;
    right: 5px;
  }
  app-header .hdr__dock {
    padding: 2px;
  }
  app-header .hdr__dock-btn {
    width: 32px;
    height: 32px;
  }
  app-header .hdr__dock-btn svg {
    width: 18px;
    height: 18px;
  }
  app-header .hdr__dock-btn + .hdr__dock-btn::before {
    top: 8px;
    bottom: 8px;
  }
  app-header .hdr__login-btn {
    height: 38px;
    padding: 0 16px 0 4px;
  }
  app-header .hdr__login-btn-icon {
    width: 28px;
    height: 28px;
  }
  app-header .hdr__login-btn-icon svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 575px) {
  app-header {
    /* (just the icon on a phone) */
    /* (just the person on a phone) */
  }
  app-header .hdr__logo img {
    height: 34px;
  }
  app-header .hdr__actions {
    gap: 2px;
  }
  app-header .hdr__icon-btn {
    width: 34px;
    height: 34px;
  }
  app-header .hdr__dock {
    padding: 1px;
  }
  app-header .hdr__dock-btn {
    width: 32px;
    height: 32px;
  }
  app-header .hdr__dock-btn::after {
    display: none;
  }
  app-header .hdr__login-btn {
    height: 34px;
    padding: 0 3px;
  }
  app-header .hdr__login-btn-text {
    display: none;
  }
  app-header .hdr__me-btn {
    gap: 3px;
    height: 34px;
    padding: 0 7px 0 9px;
  }
  app-header .hdr__me-name {
    display: none;
  }
  /* (the menu's right edge 10px in from the screen's : past the menu button and the bar's edge) */
  app-header .hdr__menu {
    right: calc(-1 * (var(--gutter) + 18px));
  }
}

/* landscape phones: a slimmer bar leaves more room for the page */
@media (max-height: 520px) and (min-width: 1101px) {
  app-header .hdr {
    padding-top: 6px;
  }
}
@media (max-height: 520px) {
  app-header .hdr__bar {
    padding-block: 4px;
  }
  app-header .hdr__logo img {
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  app-header {
    /* (the pill still moves to the link, but at once, without the wobble) */
  }
  app-header .hdr__nav,
  app-header .sub {
    transition: none;
  }
  app-header .hdr__glider {
    transition: opacity 0.2s !important;
  }
  app-header .hdr__glider-blob {
    animation: none !important;
  }
  app-header .hdr__glider-blob::after {
    animation: none !important;
  }
}

/* ════════ <app-footer> ════════ */

app-footer {
  display: block;
}

app-footer .footer {
  background: var(--night);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
}

app-footer .footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 56px);
}

app-footer .footer__logo {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
}
app-footer .footer__logo img {
  height: 56px;
  width: auto;
}

/* (dark theme: the logo's own light-ink version needs no white card behind it) */
:where([data-theme=dark]) app-footer .footer__logo {
  padding-inline: 0;
  background: none;
}

app-footer .footer__tag {
  margin-top: 18px;
  max-width: 38ch;
}

app-footer .footer__phones {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
app-footer .footer__phones span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
app-footer .footer__phones a {
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
}
app-footer .footer__phones a:hover {
  color: var(--red);
}

app-footer .footer__title {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

/* (the links close together : a line each, about 26px apart, still an easy tap) */
app-footer .footer__col ul {
  display: grid;
  gap: 0;
}

app-footer .footer__col a {
  position: relative;
  display: inline-block;
  padding: 3px 0;
  /* (the footer's typeface ; a little larger, its small letters being shorter than Inter's) */
  font-family: var(--font-footer);
  font-size: 16px;
  line-height: 1.35;
  transition: color 0.2s;
}
/* Under the pointer (or the keyboard) : the name turns white and a red line is drawn under it from the left. */
app-footer .footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
app-footer .footer__col a:is(:hover, :focus-visible) {
  color: #fff;
}
app-footer .footer__col a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  app-footer .footer__col a,
  app-footer .footer__col a::after {
    transition: none;
  }
}

/* The links, with the name lying behind them: drawn in a faint outline and sized to span the */
/* footer — the font size is a share of its box's width (cqw), which the two words then fill. */
app-footer .footer__main {
  position: relative;
  /* (the name stays behind the links, and inside this block) */
  isolation: isolate;
  overflow: hidden;
}

app-footer .footer__name {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  align-items: center;
  container-type: inline-size;
  pointer-events: none;
}
app-footer .footer__name span {
  display: block;
  /* (in the footer's typeface, as the logo writes it : "Little NAP") */
  font-family: var(--font-footer);
  /* (for a browser without cqw: about as wide, by the window's width) */
  font-size: clamp(46px, 16.8vw, 253px);
  font-size: 21.3cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: center;
  /* The letters are filled with the footer's own colour and the line is drawn first, twice as */
  /* thick: the fill then hides its inner half, and with it the places where a letter's strokes */
  /* overlap, which a plain outline would show. */
  color: var(--night);
  /* (very faint: the links in front of it have to stay easy to read) */
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.07);
  paint-order: stroke fill;
}

app-footer .footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 22px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

app-footer .footer__also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
app-footer .footer__also span {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* tablets: the brand across the top in a soft card (the logo, the phone across from it, the line about us under
   them), the three columns of links under it */
@media (max-width: 900px) {
  app-footer .footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  app-footer .footer__brand {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo phone" "tag tag";
    align-items: center;
    gap: 18px 24px;
    padding: clamp(18px, 3.4vw, 26px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
  }
  app-footer .footer__logo {
    grid-area: logo;
    justify-self: start;
  }
  app-footer .footer__phones {
    grid-area: phone;
    justify-self: end;
    margin-top: 0;
    text-align: right;
  }
  app-footer .footer__tag {
    grid-area: tag;
    max-width: none;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* phones : the links in two columns, Help across both (its own links in two columns) */
@media (max-width: 700px) {
  app-footer .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  app-footer .footer__col:last-child {
    grid-column: 1/-1;
  }
  app-footer .footer__col:last-child ul {
    display: block;
    columns: 2;
    column-gap: 20px;
  }
  app-footer .footer__col:last-child li {
    break-inside: avoid;
  }
}

/* (narrow phones : the logo, the words, then the phone, one under another) */
@media (max-width: 480px) {
  app-footer .footer__brand {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "tag" "phone";
    gap: 16px;
  }
  app-footer .footer__phones {
    justify-self: start;
    text-align: left;
  }
  app-footer .footer__logo img {
    height: 48px;
  }
  /* (the links a touch smaller, so that each fits on one line in its half) */
  app-footer .footer__top {
    column-gap: 16px;
  }
  app-footer .footer__col a {
    font-size: 15px;
  }
  app-footer .footer__col:last-child ul {
    column-gap: 16px;
  }
}

/* ════════ <app-fabs> ════════ */

app-fabs {
  display: contents;
}

app-fabs .fabs {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  /* under the header and its drawer, over everything else on the page */
  z-index: 40;
  /* (set by Fabs: the buttons have stepped aside for a section's own controls) */
}
app-fabs .fabs.is-away .fabs__stack {
  opacity: 0;
  visibility: hidden;
}
app-fabs .fabs.is-settled .fabs__stack {
  transition: transform 0.25s var(--ease), opacity 0.2s, visibility 0.2s;
}

app-fabs .fabs__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transform: translateY(calc(-1 * var(--lift, 0px)));
}

app-fabs .fab {
  border-radius: 999px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.3px;
}
app-fabs .fab:hover {
  transform: translateY(-2px);
}

app-fabs .fab--finder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 15px;
  border: 1px solid var(--red);
  background: var(--surface);
  color: var(--red);
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s, background-color 0.25s, color 0.25s;
}
app-fabs .fab--finder:hover {
  background: var(--red);
  color: #fff;
}
app-fabs .fab--finder:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 3px;
}

/* Enquire Now: a red round button under WhatsApp's, a speech bubble in it (its name beside it on hover) */
app-fabs .fab--enquiry {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 22px rgba(215, 26, 33, 0.4);
  transition: transform 0.2s, background-color 0.25s;
}
app-fabs .fab--enquiry svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
app-fabs .fab--enquiry:hover {
  background: var(--popup-red);
}
app-fabs .fab--enquiry:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* (Find My Recliner's magnifier, before its words) */
app-fabs .fab__icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WhatsApp: a green round button over the other two, straight to a chat, a soft ring going out of it now and then */
app-fabs .fab--whatsapp {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s, background-color 0.25s;
  animation: app-fabs--ping 2.6s ease-out infinite;
}
app-fabs .fab--whatsapp:hover {
  background: #1ebe5b;
  animation: none;
}
app-fabs .fab--whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}
app-fabs .fab--whatsapp svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

@keyframes app-fabs--ping {
  0% {
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70%, 100% {
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

/* ── back to the top ───────────────────────────────────────────────────── */
/* a round button above the other two (out of their column, so that their resting box stays the same) */
app-fabs .top {
  position: absolute;
  /* (bigger than WhatsApp's button below it, and centred over it) */
  right: -8px;
  bottom: calc(100% + 10px);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  /* (not there until Fabs says the first screen is behind) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.8);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease), background-color 0.25s;
}
app-fabs .top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
app-fabs .top:hover, app-fabs .top.is-leaving {
  background: var(--red);
}
app-fabs .top:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 3px;
  border-radius: 50%;
}

/* the ring: how far down the page is (Fabs sets --depth, from 0 to 1) */
app-fabs .top__ring {
  position: absolute;
  inset: 0;
  fill: none;
  /* (light enough to give the button an edge on the dark sections too) */
  stroke: rgba(255, 255, 255, 0.3);
  /* (1px : the drawing is 54 units across a 64px button) */
  stroke-width: 0.85;
  rotate: -90deg;
}

app-fabs .top__depth {
  stroke: #ff5a60;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--depth, 0) * 100);
}
app-fabs .top:hover .top__depth, app-fabs .top.is-leaving .top__depth {
  stroke: #fff;
}

/* The recliner. It opens as the page goes down — backrest back, footrest out — as far as the page is */
/* down (--depth, set by public/js/lib/fabs.js : half way down, half open), and dozes once it is well laid */
/* back; under the pointer it sits up; pressed, it rises out of the button while the page goes back to the top. */
app-fabs .top {
  /* (the thin gaps between the chair's parts : the button's own colour) */
  --chair-cut: var(--dark-chip);
}
app-fabs .top:hover, app-fabs .top.is-leaving {
  --chair-cut: var(--red);
}

/* (big enough to read as a recliner at a glance : the drawing keeps room around the closed chair for the */
/* backrest and footrest to open into, so the closed chair is only about half its width) */
app-fabs .chair {
  width: 50px;
  height: 42px;
  /* (the closed chair sits a little high in its drawing ; lower, it is centred and, laid back, clear of the ring) */
  translate: 0 1px;
  fill: currentColor;
  overflow: visible;
}

app-fabs .chair :is(rect, circle) {
  /* (drawn under the fill : only its outer half shows, as a gap where one part lies over another) */
  stroke: var(--chair-cut);
  stroke-width: 1.4px;
  paint-order: stroke;
  transition: stroke 0.25s;
}

app-fabs .chair__back,
app-fabs .chair__foot {
  /* (they turn about a point given in the drawing's own units) */
  transform-box: view-box;
  /* (short, so the chair follows the scroll closely but never jumps) */
  transition: transform 0.3s var(--ease);
}

app-fabs .chair__back {
  /* (about the back of the seat) */
  transform-origin: 19px 26px;
  transform: rotate(calc(var(--depth, 0) * -30deg));
}

app-fabs .chair__foot {
  /* (about the front of the seat : it swings forward and up, level with the seat when fully open) */
  transform-origin: 36px 24px;
  transform: rotate(calc(var(--depth, 0) * -84deg));
}

app-fabs .chair__z {
  font: 700 7px var(--font-body);
  stroke: none;
  opacity: 0;
}

/* (well laid back : it dozes) */
app-fabs .top.is-dozing .chair__z {
  animation: app-fabs--doze 2.6s ease-in-out infinite;
}

app-fabs .chair__z--late {
  font-size: 5.5px;
  animation-delay: 1.3s;
}

@keyframes app-fabs--doze {
  0% {
    opacity: 0;
    transform: translate(0, 3px);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(3px, -5px);
  }
}

app-fabs .top:hover .chair__back,
app-fabs .top:hover .chair__foot,
app-fabs .top:focus-visible .chair__back,
app-fabs .top:focus-visible .chair__foot,
app-fabs .top.is-leaving .chair__back,
app-fabs .top.is-leaving .chair__foot {
  transform: none;
}
app-fabs .top:hover .chair__z,
app-fabs .top:focus-visible .chair__z,
app-fabs .top.is-leaving .chair__z {
  animation: none;
}

app-fabs .top.is-leaving .chair {
  animation: app-fabs--lift-off 0.85s cubic-bezier(0.5, 0, 0.8, 0.4) forwards;
}

@keyframes app-fabs--lift-off {
  /* (a dip first, as before a jump) */
  22% {
    transform: translateY(3px);
    opacity: 1;
  }
  100% {
    transform: translateY(-64px);
    opacity: 0;
  }
}

/* its name (and WhatsApp's), beside it, for a pointer or the keyboard */
app-fabs .top__label,
app-fabs .fab__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  translate: 0 -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
app-fabs .top:hover .top__label, app-fabs .top:focus-visible .top__label,
app-fabs .fab--whatsapp:hover .fab__label, app-fabs .fab--whatsapp:focus-visible .fab__label,
app-fabs .fab--enquiry:hover .fab__label, app-fabs .fab--enquiry:focus-visible .fab__label {
  opacity: 1;
}

/* tablets : the four round buttons smaller (46px), one over another, the back to the top button right over WhatsApp's */
@media (max-width: 1100px) {
  app-fabs .top {
    right: 0;
    width: 46px;
    height: 46px;
  }
  app-fabs .top__ring {
    /* (1px across a 46px button) */
    stroke-width: 1.17;
  }
  app-fabs .chair {
    width: 34px;
    height: 29px;
  }
  app-fabs .fab--whatsapp {
    width: 46px;
    height: 46px;
  }
  app-fabs .fab--whatsapp svg {
    width: 23px;
    height: 23px;
  }
  /* Find My Recliner and Enquire Now : round, as WhatsApp's, an icon each ; the words beside it under the pointer
     (as WhatsApp's label), and read out always */
  app-fabs .fab--finder,
  app-fabs .fab--enquiry {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }
  app-fabs .fab__icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  app-fabs .fab__text {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--dark-chip);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    translate: 0 -50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  app-fabs .fab:is(:hover, :focus-visible) .fab__text {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  app-fabs .fabs {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  app-fabs .fabs__stack {
    gap: 8px;
  }
  /* (round : as WhatsApp's, 44px) */
  app-fabs .fab--finder,
  app-fabs .fab--enquiry {
    width: 44px;
    height: 44px;
  }
  app-fabs .top {
    bottom: calc(100% + 8px);
    width: 44px;
    height: 44px;
  }
  app-fabs .top__ring {
    /* (1px across a 44px button) */
    stroke-width: 1.23;
  }
  app-fabs .fab--whatsapp {
    width: 44px;
    height: 44px;
  }
  app-fabs .fab--whatsapp svg {
    width: 22px;
    height: 22px;
  }
  app-fabs .chair {
    width: 32px;
    height: 27px;
  }
}

/* less motion: the chair neither dozes nor takes off (it still opens with the page, which the reader moves) */
@media (prefers-reduced-motion: reduce) {
  app-fabs .top.is-dozing .chair__z,
  app-fabs .top.is-leaving .chair,
  app-fabs .fab--whatsapp {
    animation: none;
  }
}

/* ════════ <app-preloader> ════════ */

/* above everything, the header and the popups included */
app-preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: block;
  background: var(--night);
  /* the page's dark-and-brand-red lighting */
  background-image: radial-gradient(60% 50% at 50% 46%, rgba(215, 26, 33, 0.28), transparent 70%);
  color: #fff;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1);
}

/* bottom to top */
app-preloader.is-leaving {
  transform: translateY(-100%);
  pointer-events: none;
}
app-preloader.is-leaving .ld {
  opacity: 0;
  transition: opacity 0.25s;
}

app-preloader[hidden] {
  display: none;
}

app-preloader .ld {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ── the round box: the chair in its ring, which fills in a second ─────── */
app-preloader .ld__box {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--ink-fixed);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(215, 26, 33, 0.25);
  animation: app-preloader--pop 0.45s var(--ease) both;
}

app-preloader .ld__ring {
  position: absolute;
  inset: 0;
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  rotate: -90deg;
}

app-preloader .ld__fill {
  stroke: #ff5a60;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: app-preloader--fill 0.95s cubic-bezier(0.45, 0.05, 0.3, 1) 0.05s forwards;
}

@keyframes app-preloader--fill {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes app-preloader--pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* ── the chair: laid back and dozing, then it wakes and sits up ────────── */
app-preloader .ld__chair {
  width: 58px;
  height: 48px;
  fill: currentColor;
  overflow: visible;
  animation: app-preloader--hop 0.35s ease-out 0.7s;
}

app-preloader .ld__back,
app-preloader .ld__foot {
  transform-box: view-box;
}

app-preloader .ld__back {
  transform-origin: 19.3px 26px;
  animation: app-preloader--back-up 0.5s var(--ease) 0.4s both;
}

app-preloader .ld__foot {
  transform-origin: 34.5px 25px;
  animation: app-preloader--foot-up 0.5s var(--ease) 0.4s both;
}

@keyframes app-preloader--back-up {
  from {
    transform: rotate(-36deg);
  }
}

@keyframes app-preloader--foot-up {
  from {
    transform: rotate(-84deg);
  }
}

@keyframes app-preloader--hop {
  45% {
    transform: translateY(-4px);
  }
}

app-preloader .ld__z {
  font: 700 7px var(--font-body);
  opacity: 0;
  animation: app-preloader--doze 0.9s ease-in-out infinite;
}

app-preloader .ld__z--late {
  font-size: 5.5px;
  animation-delay: 0.3s;
}

@keyframes app-preloader--doze {
  0% {
    opacity: 0;
    transform: translate(0, 3px);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(3px, -5px);
  }
}

/* ── the name: letter by letter out of a line ──────────────────────────── */
app-preloader .ld__name {
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

app-preloader .ld__mask {
  display: inline-block;
  overflow: hidden;
  /* (room for the descenders and italics the mask would cut) */
  padding: 0 0.01em 0.12em;
  margin-bottom: -0.12em;
}

app-preloader .ld__letter {
  display: inline-block;
  animation: app-preloader--rise 0.5s var(--ease) calc(0.2s + var(--i) * 0.035s) both;
}

@keyframes app-preloader--rise {
  from {
    transform: translateY(110%);
  }
}

/* "Recliners", in the brand red, spreading out between two lines */
app-preloader .ld__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #ff5a60;
  /* (the trailing letter-space would tilt the centring) */
  padding-left: 0.5em;
  animation: app-preloader--spread 0.7s var(--ease) 0.55s both;
}
app-preloader .ld__tag::before, app-preloader .ld__tag::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.7;
}

@keyframes app-preloader--spread {
  from {
    opacity: 0;
    letter-spacing: 0.1em;
  }
}

/* less motion: no hopping, rising or spreading — just the ring */
@media (prefers-reduced-motion: reduce) {
  app-preloader .ld__box,
  app-preloader .ld__chair,
  app-preloader .ld__back,
  app-preloader .ld__foot,
  app-preloader .ld__z,
  app-preloader .ld__letter,
  app-preloader .ld__tag {
    animation: none;
  }
  app-preloader .ld__fill {
    animation: none;
    stroke-dashoffset: 0;
  }
  app-preloader {
    transition: opacity 0.3s;
  }
  app-preloader.is-leaving {
    transform: none;
    opacity: 0;
  }
}

/* ════════ <app-toast> ════════ */

app-toast .toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
app-toast .toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
app-toast .toast svg {
  color: #4ade80;
}

/* ════════ <app-like> ════════ */

app-like {
  display: block;
}

/* a white round button with a heart outline; a red heart once liked */
app-like .like {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--ink);
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
  transition: color 0.2s, transform 0.2s var(--ease);
}
app-like .like svg {
  width: 18px;
  height: 18px;
  fill: none;
  transition: fill 0.2s;
}
app-like .like:hover {
  color: var(--red);
}
app-like .like:active {
  transform: scale(0.9);
}
app-like .like.is-liked {
  color: var(--red);
}
app-like .like.is-liked svg {
  fill: currentColor;
}

/* ════════ <app-page-banner> ════════ */

app-page-banner {
  /* the colour of what is under the band : the notch is filled with it */
  --notch-bg: var(--page-inner);
  --notch-r: clamp(18px, 2.4vw, 28px);
  display: block;
}

/* the landing page's dark room, warmed by a glow on the right, with the brand's red low on the left */
app-page-banner .banner {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(28px, 4vw, 48px)) 0 clamp(64px, 6vw, 80px);
  background: radial-gradient(55% 80% at 85% 20%, rgba(255, 150, 90, 0.2), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(215, 26, 33, 0.22), transparent 70%), var(--night);
  color: #fff;
}

/* the photo (the page's own, else the standard one) fills the band, a dark veil over it, deeper on the side of the text */
app-page-banner .banner--photo {
  padding-bottom: clamp(72px, 7vw, 96px);
  background: var(--night);
}

/* the notch : a block of the page's colour in the bottom right corner, rounded on its top left, with two concave
   curves (above it and on its left) so the band flows round it */
app-page-banner .banner__notch {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  padding: 12px clamp(16px, 3vw, 40px) 0 12px;
  background: var(--notch-bg);
  border-top-left-radius: var(--notch-r);
}
app-page-banner .banner__notch::before,
app-page-banner .banner__notch::after {
  content: "";
  position: absolute;
  width: var(--notch-r);
  height: var(--notch-r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - 0.5px), var(--notch-bg) var(--notch-r));
  pointer-events: none;
}
app-page-banner .banner__notch::before {
  right: 0;
  bottom: 100%;
}
app-page-banner .banner__notch::after {
  right: 100%;
  bottom: 0;
}
app-page-banner .banner__tag {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}
/* "India relaxes" : red first, then black, and back again */
app-page-banner .banner__tag-hl {
  font-style: normal;
  font-weight: 600;
  color: var(--red);
  animation: banner-tag-hl 3.2s ease-in-out infinite alternate;
}
@keyframes banner-tag-hl {
  0%,
  30% {
    color: var(--red);
  }
  70%,
  100% {
    color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-page-banner .banner__tag-hl {
    animation: none;
  }
}
@media (max-width: 600px) {
  app-page-banner .banner__notch {
    padding: 8px 16px 0 8px;
  }
  app-page-banner .banner__tag {
    padding: 7px 14px;
    font-size: 12px;
  }
}
app-page-banner .banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}
app-page-banner .banner--photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 13, 12, 0.86) 0%, rgba(18, 13, 12, 0.68) 45%, rgba(18, 13, 12, 0.42) 100%), linear-gradient(180deg, rgba(18, 13, 12, 0.55) 0%, transparent 35%, rgba(18, 13, 12, 0.35) 100%);
}
app-page-banner .banner--photo .banner__inner {
  z-index: 2;
}
app-page-banner .banner--photo .banner__inner .lead {
  color: rgba(255, 255, 255, 0.85);
}

app-page-banner .banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-items: start;
}
app-page-banner .banner__inner .eyebrow,
app-page-banner .banner__inner .title em {
  color: #ff6a6f;
}
app-page-banner .banner__inner .title {
  max-width: 18ch;
  font-size: clamp(26px, 3vw, 38px);
}
app-page-banner .banner__inner .lead {
  color: rgba(255, 255, 255, 0.72);
}

/* Back (a blog post's) : a glass pill over the photo */
app-page-banner .banner__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-bottom: 6px;
  padding: 0 16px 0 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s;
}
app-page-banner .banner__back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}
app-page-banner .banner__back:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
app-page-banner .banner__back:hover svg {
  transform: translateX(-3px);
}

/* ════════ <app-enquiry-popup> ════════ */

/* Laid out as the login popup is: a slanted dark red panel on the left with the offer, the form on the right.
   Opening: the red sweeps in from the left, specks of light drift up it, and each line of both sides (.st, its place --i) slides in after the one before it. `.is-sending`: they slide away;
   `.is-success`: the red swings over the whole card and the coupon comes up on it as a ticket. Every entrance is an
   animation that only has a `from`, so without motion each part is simply where it ends. */
app-enquiry-popup {
  display: contents;
  /* the fields, links and buttons in the brand's red, as the login popup has them */
  --popup-red: var(--red);
}

/* the card: a light red edge, softly glowing */
app-enquiry-popup .enquiry {
  display: grid;
  grid-template-columns: 42% 1fr;
  width: min(980px, 100%);
  height: min(600px, 100vh - 48px);
  height: min(600px, 100dvh - 48px);
  border: 1px solid rgba(255, 45, 53, 0.45);
  box-shadow: 0 0 14px rgba(255, 45, 53, 0.22), 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ── the red: a bright edge just past the dark panel, both slanted (wider at the top) ── */
app-enquiry-popup .enquiry__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

app-enquiry-popup .enquiry__edge,
app-enquiry-popup .enquiry__red {
  position: absolute;
  inset: 0;
  transition: clip-path 1s var(--ease) 0.15s;
}

app-enquiry-popup .enquiry__edge {
  background: linear-gradient(180deg, #ff4a50, var(--popup-red) 60%, #9a101c);
  clip-path: polygon(0 0, 47.7% 0, 41.7% 100%, 0 100%);
  animation: app-enquiry-popup--wipe-edge 1.05s var(--ease) 0.05s backwards;
}

app-enquiry-popup .enquiry__red {
  overflow: hidden;
  background: radial-gradient(110% 60% at 0% 0%, rgba(255, 110, 96, 0.22) 0%, rgba(255, 110, 96, 0) 60%), linear-gradient(165deg, #9a101c 0%, #7d0a15 38%, #5a0610 72%, #2b0206 100%);
  clip-path: polygon(0 0, 47% 0, 41% 100%, 0 100%);
  animation: app-enquiry-popup--wipe 1s var(--ease) backwards;
}

/* a soft light drifting slowly over the red */
app-enquiry-popup .enquiry__red::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 10%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 150, 0.2), rgba(255, 196, 150, 0));
  animation: app-enquiry-popup--drift 11s ease-in-out infinite alternate;
}

/* the coupon is out: the red swings over the whole card */
app-enquiry-popup .is-success .enquiry__edge,
app-enquiry-popup .is-success .enquiry__red {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes app-enquiry-popup--wipe {
  from {
    clip-path: polygon(0 0, 7% 0, 0 100%, 0 100%);
  }
}
@keyframes app-enquiry-popup--wipe-edge {
  from {
    clip-path: polygon(0 0, 7.7% 0, 0.7% 100%, 0 100%);
  }
}
@keyframes app-enquiry-popup--drift {
  to {
    translate: 70% 55%;
  }
}

/* specks of light drifting up the red (the ones right of the slant show once the red is over the whole card) */
app-enquiry-popup .spark {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 230, 180, 0.85) 40%, rgba(255, 230, 180, 0) 72%);
  opacity: 0;
  animation: app-enquiry-popup--float var(--v) linear var(--t) infinite;
}

@keyframes app-enquiry-popup--float {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  60% {
    translate: 14px -330px;
  }
  100% {
    translate: -6px -620px;
    opacity: 0;
  }
}

/* ── the stagger: each line of a side slides in after the one before it, and away the same way ── */
app-enquiry-popup .st {
  animation: app-enquiry-popup--in-right 0.75s var(--ease) backwards;
  animation-delay: calc(var(--start, 0.3s) + var(--i, 0) * var(--step, 0.06s));
  transition: translate 0.55s var(--ease), opacity 0.45s ease, filter 0.55s ease;
  transition-delay: calc(var(--i, 0) * 0.035s);
}
app-enquiry-popup .enquiry__aside .st {
  --start: 0.55s;
  --step: 0.09s;
  animation-name: app-enquiry-popup--in-left;
}

app-enquiry-popup .is-sending .enquiry__main .st {
  translate: 70px 0;
  opacity: 0;
  filter: blur(10px);
}
app-enquiry-popup .is-sending .enquiry__aside .st {
  translate: -60px 0;
  opacity: 0;
  filter: blur(10px);
}

@keyframes app-enquiry-popup--in-right {
  from {
    translate: 60px 0;
    opacity: 0;
    filter: blur(10px);
  }
}
@keyframes app-enquiry-popup--in-left {
  from {
    translate: -50px 0;
    opacity: 0;
    filter: blur(10px);
  }
}

/* ── the offer ── */
app-enquiry-popup .enquiry__aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 40px 64px 40px 40px;
  overflow: hidden;
  color: #fff;
}

app-enquiry-popup .enquiry__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  opacity: 0.85;
}
app-enquiry-popup .enquiry__eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

app-enquiry-popup .enquiry__headline {
  margin: 10px 0 12px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.4px;
}
app-enquiry-popup .enquiry__headline em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: #ffd9a8;
}

app-enquiry-popup .enquiry__sub {
  max-width: 300px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.9;
}

app-enquiry-popup .points {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}
app-enquiry-popup .points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  line-height: 1.35;
}

app-enquiry-popup .points__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.1);
  color: #ffe2bd;
}

/* ── the form ── */
/* the dialog never grows taller than the screen: this side scrolls instead (clear of the slant of the red) */
app-enquiry-popup .enquiry__main {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 38px 44px 28px 74px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

app-enquiry-popup .enquiry__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--popup-red);
}

app-enquiry-popup .enquiry__title {
  margin: 4px 0 4px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--popup-ink);
}

app-enquiry-popup .enquiry__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--popup-muted);
}

app-enquiry-popup .req {
  font-weight: 600;
  color: var(--popup-red);
}

app-enquiry-popup .form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  margin-top: 4px;
}

app-enquiry-popup .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

app-enquiry-popup .field--wide,
app-enquiry-popup .form__end,
app-enquiry-popup .form__problem,
app-enquiry-popup .form__privacy {
  grid-column: 1/-1;
}

/* a field: a line to type on, its label rising off it when the field is in use or filled; a red line runs along it
   from the left while it is in use */
app-enquiry-popup .line {
  position: relative;
  height: 46px;
  margin-top: 20px;
}
app-enquiry-popup .line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--popup-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  pointer-events: none;
}
app-enquiry-popup .line:focus-within::after,
app-enquiry-popup .has-error .line::after {
  transform: none;
}

app-enquiry-popup .line input,
app-enquiry-popup .line textarea {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 8px 0 32px;
  border: 0;
  border-bottom: 2px solid var(--popup-line);
  border-radius: 0;
  background: transparent;
  color: var(--popup-ink);
  font: 600 15px/1.4 var(--font-body);
  letter-spacing: normal;
  outline: 0;
  transition: border-color 0.4s;
}
/* (the browser's filled-in fields keep the card's colour, not its own blue) */
app-enquiry-popup .line input:-webkit-autofill {
  -webkit-text-fill-color: var(--popup-ink);
  box-shadow: inset 0 0 0 100px var(--surface);
  caret-color: var(--popup-ink);
}
app-enquiry-popup .line input:not(:placeholder-shown),
app-enquiry-popup .line textarea:not(:placeholder-shown) {
  border-bottom-color: color-mix(in srgb, var(--popup-red) 40%, var(--popup-line));
}

app-enquiry-popup .line--area {
  height: auto;
}
app-enquiry-popup .line--area textarea {
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 8px;
  resize: none;
}

app-enquiry-popup .line label {
  position: absolute;
  left: 32px;
  top: 23px;
  max-width: calc(100% - 40px);
  overflow: hidden;
  color: var(--popup-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  translate: 0 -50%;
  transition: top 0.45s var(--ease), left 0.45s var(--ease), font-size 0.45s var(--ease), color 0.45s;
  pointer-events: none;
}
app-enquiry-popup .line label b {
  color: var(--popup-red);
}

/* in use, or filled: the label rises and turns red */
app-enquiry-popup .line :is(input, textarea):is(:focus, :not(:placeholder-shown), :-webkit-autofill) ~ label {
  top: -4px;
  left: 0;
  font-size: 12.5px;
  color: var(--popup-red);
}

/* the field's icon at the start of the line */
app-enquiry-popup .line > svg {
  position: absolute;
  left: 0;
  top: 23px;
  color: var(--popup-muted);
  translate: 0 -50%;
  transition: color 0.45s, scale 0.3s var(--ease);
  pointer-events: none;
}
app-enquiry-popup .line :is(input, textarea):is(:focus, :not(:placeholder-shown)) ~ svg,
app-enquiry-popup .has-error .line > svg {
  color: var(--popup-red);
}
app-enquiry-popup .line :is(input, textarea):focus ~ svg {
  scale: 1.12;
}

app-enquiry-popup .has-error .line :is(input, textarea) {
  border-bottom-color: var(--popup-red);
}
app-enquiry-popup .is-shaking :is(.line, .captcha__box) {
  animation: app-enquiry-popup--shake 0.42s ease;
}

/* what is wrong with a field, under it */
app-enquiry-popup .error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--popup-red);
  animation: app-enquiry-popup--error 0.3s var(--ease);
}

@keyframes app-enquiry-popup--shake {
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes app-enquiry-popup--error {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* the security question beside Submit */
app-enquiry-popup .form__end {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  margin-top: 22px;
}

app-enquiry-popup .captcha__box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--popup-line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--popup-muted);
  transition: border-color 0.3s, box-shadow 0.3s;
}
app-enquiry-popup .captcha__box:focus-within {
  border-color: var(--popup-red);
  box-shadow: 0 0 0 3px rgba(215, 26, 33, 0.12);
}
app-enquiry-popup .captcha.has-error .captcha__box {
  border-color: var(--popup-red);
}
app-enquiry-popup .captcha__box > svg {
  flex: none;
  color: var(--popup-red);
}

app-enquiry-popup .captcha__q {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--popup-ink);
}
app-enquiry-popup .captcha__q [data-sum] {
  font-variant-numeric: tabular-nums;
}

app-enquiry-popup .captcha__input {
  width: 50px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--popup-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--popup-ink);
  font: 700 15px/1 var(--font-body);
  text-align: center;
  outline: 0;
  transition: border-color 0.3s;
}
app-enquiry-popup .captcha__input::placeholder {
  color: var(--faint);
}
app-enquiry-popup .captcha__input:focus {
  border-color: var(--popup-red);
}

/* the main button, as the header's Login button: a white pill with its icon in a red disc at the start; under the
   pointer the pill turns red, the disc white, and it lifts a little (the icon taking off). While it sends, the disc
   holds a spinner. */
app-enquiry-popup .cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 52px;
  border: 1.5px solid rgba(215, 26, 33, 0.28);
  border-radius: 999px;
  background: var(--surface);
  color: var(--popup-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.2px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
app-enquiry-popup .cta:hover,
app-enquiry-popup .cta[aria-busy=true] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(215, 26, 33, 0.9);
  transform: translateY(-1px);
}
app-enquiry-popup .cta:active {
  transform: translateY(0) scale(0.98);
}
app-enquiry-popup .cta:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
app-enquiry-popup .cta[aria-busy=true] {
  pointer-events: none;
  cursor: progress;
}

app-enquiry-popup .cta__icon {
  position: absolute;
  left: 5px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  translate: 0 -50%;
  transition: background-color 0.25s, color 0.25s;
}
app-enquiry-popup .cta:hover .cta__icon,
app-enquiry-popup .cta[aria-busy=true] .cta__icon {
  background: #fff;
  color: var(--red);
}
app-enquiry-popup .cta__icon svg {
  transition: translate 0.35s var(--ease);
}
app-enquiry-popup .cta:hover .cta__icon svg {
  translate: 2px -2px;
}
app-enquiry-popup .cta[aria-busy=true] .cta__icon svg {
  display: none;
}

app-enquiry-popup .cta__spin {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(215, 26, 33, 0.25);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: app-enquiry-popup--spin 0.7s linear infinite;
}
app-enquiry-popup .cta[aria-busy=true] .cta__spin {
  display: block;
}

@keyframes app-enquiry-popup--spin {
  to {
    rotate: 1turn;
  }
}

app-enquiry-popup .form__problem {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--popup-red);
}
app-enquiry-popup .form__problem:empty {
  display: none;
}

app-enquiry-popup .form__privacy {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--popup-muted);
}
app-enquiry-popup .form__privacy a {
  font-weight: 600;
  color: var(--popup-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
app-enquiry-popup .form__privacy a:hover {
  color: var(--popup-red);
}

/* ── after Submit: the coupon, as a ticket on the red ── */
app-enquiry-popup .enquiry__done {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 1200px;
}

/* (in the middle, but never cut at the top when it is taller than the card: it scrolls) */
app-enquiry-popup .ticket {
  position: relative;
  width: min(500px, 100%);
  margin-block: auto;
  filter: drop-shadow(0 24px 34px rgba(20, 0, 3, 0.45));
  transform-origin: 50% 100%;
  animation: app-enquiry-popup--ticket 0.95s var(--ease) 0.55s backwards;
}

app-enquiry-popup .ticket__top {
  position: relative;
  padding: 22px 28px 12px;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  text-align: center;
}
app-enquiry-popup .ticket__top h3 {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--popup-ink);
}
app-enquiry-popup .ticket__top > p:not(.sr-only) {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

/* where it tears: a notch on each side, a dashed line between */
app-enquiry-popup .ticket__cut {
  position: relative;
  height: 22px;
  background: var(--surface);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 12px, #000 12.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 12px, #000 12.5px) right/51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 12px, #000 12.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 12px, #000 12.5px) right/51% 100% no-repeat;
}
app-enquiry-popup .ticket__cut::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  border-top: 2px dashed var(--popup-line);
}

app-enquiry-popup .ticket__bottom {
  padding: 2px 24px 22px;
  border-radius: 0 0 20px 20px;
  background: var(--surface);
  text-align: center;
}

/* the tick: its ring drawn round, then the mark */
app-enquiry-popup .tick {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  overflow: visible;
  animation: app-enquiry-popup--pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s backwards;
}
app-enquiry-popup .tick__ring {
  fill: var(--ok-bg);
  stroke: var(--ok);
  stroke-width: 2.5;
  stroke-dasharray: 146;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
  animation: app-enquiry-popup--ring 0.7s var(--ease) 1.05s backwards;
}
app-enquiry-popup .tick__mark {
  fill: none;
  stroke: var(--ok);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  animation: app-enquiry-popup--mark 0.4s ease-out 1.55s backwards;
}

/* confetti bursting off the tick (gone once it has flown) */
app-enquiry-popup .burst {
  position: absolute;
  left: 50%;
  top: 49px;
  z-index: 3;
  pointer-events: none;
}
app-enquiry-popup .burst i {
  position: absolute;
  left: -4px;
  top: -6px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: app-enquiry-popup--burst 1.5s cubic-bezier(0.12, 0.7, 0.3, 1) calc(1.45s + var(--d, 0s)) forwards;
}
app-enquiry-popup .burst i:nth-child(3n) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* the lines of the ticket, one after the other */
app-enquiry-popup .rise {
  animation: app-enquiry-popup--rise 0.6s var(--ease) backwards;
  animation-delay: calc(1.2s + var(--i, 0) * 0.1s);
}

@keyframes app-enquiry-popup--ticket {
  from {
    opacity: 0;
    transform: translateY(70px) rotateX(28deg) scale(0.94);
  }
}
@keyframes app-enquiry-popup--pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes app-enquiry-popup--ring {
  from {
    stroke-dashoffset: 146;
    fill-opacity: 0;
  }
}
@keyframes app-enquiry-popup--mark {
  from {
    stroke-dashoffset: 34;
  }
}
@keyframes app-enquiry-popup--burst {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0) rotate(0) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(var(--spin)) scale(1);
  }
}
@keyframes app-enquiry-popup--rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* the code: rolls in, then glows once */
app-enquiry-popup .code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 2px dashed var(--popup-red);
  border-radius: 14px;
  background: var(--tint);
}
app-enquiry-popup .code.is-revealed {
  animation: app-enquiry-popup--ping 1.1s ease-out;
}
app-enquiry-popup .code code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--popup-red);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

app-enquiry-popup .code__copy {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--popup-red);
  border-radius: 999px;
  background: var(--surface);
  color: var(--popup-red);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
app-enquiry-popup .code__copy:hover {
  background: var(--popup-red);
  color: #fff;
}
app-enquiry-popup .code__copy:active {
  transform: scale(0.96);
}
app-enquiry-popup .code__copy:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 2px;
}
app-enquiry-popup .code__copy .ic-done,
app-enquiry-popup .code__copy.is-copied .ic-copy {
  display: none;
}
app-enquiry-popup .code__copy.is-copied .ic-done {
  display: block;
}
app-enquiry-popup .code__copy.is-copied {
  border-color: #32a25a;
  background: #32a25a;
  color: #fff;
}

@keyframes app-enquiry-popup--ping {
  from {
    box-shadow: 0 0 0 0 rgba(215, 26, 33, 0.45);
  }
  to {
    box-shadow: 0 0 0 16px rgba(215, 26, 33, 0);
  }
}

app-enquiry-popup .terms {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
}
app-enquiry-popup .terms li {
  position: relative;
  padding-left: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}
app-enquiry-popup .terms li + li {
  margin-top: 3px;
}
app-enquiry-popup .terms li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--popup-red);
}

app-enquiry-popup .cta--link {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  padding: 0 26px 0 56px;
}

/* the close button: light on the red */
app-enquiry-popup .enquiry .popup__close {
  transition: background-color 0.2s, color 0.6s;
}
app-enquiry-popup .enquiry.is-success .popup__close {
  background: hsla(0, 0%, 100%, 0.22);
  color: #fff;
}
app-enquiry-popup .enquiry.is-success .popup__close:hover {
  background: hsla(0, 0%, 100%, 0.35);
}

/* a short laptop screen: no room for the three points under the words */
@media (min-width: 861px) and (max-height: 680px) {
  app-enquiry-popup .points {
    display: none;
  }
}

/* tablet and phone: the red panel sits above the form (its foot slanted), the coupon on red of its own */
@media (max-width: 860px) {
  app-enquiry-popup .enquiry {
    display: flex;
    flex-direction: column;
    width: min(480px, 100%);
    height: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  app-enquiry-popup .enquiry__bg {
    display: none;
  }
  app-enquiry-popup .enquiry__aside,
  app-enquiry-popup .enquiry__done {
    background: radial-gradient(110% 60% at 0% 0%, rgba(255, 110, 96, 0.22) 0%, rgba(255, 110, 96, 0) 60%), linear-gradient(165deg, #9a101c 0%, #7d0a15 40%, #5a0610 75%, #3a0309 100%);
  }
  app-enquiry-popup .enquiry__aside {
    flex: none;
    padding: 26px 24px 42px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
    animation: app-enquiry-popup--wipe-down 0.8s var(--ease) backwards;
  }
  app-enquiry-popup .enquiry__aside .st {
    --start: 0.4s;
    --step: 0.07s;
  }
  app-enquiry-popup .enquiry__headline {
    margin: 8px 0 8px;
    font-size: 26px;
  }
  app-enquiry-popup .enquiry__sub {
    max-width: none;
    font-size: 13px;
  }
  app-enquiry-popup .points {
    display: none;
  }
  app-enquiry-popup .enquiry__main {
    flex: none;
    padding: 10px 24px 26px;
    overflow: visible;
  }
  app-enquiry-popup .enquiry__title {
    font-size: 24px;
  }
  app-enquiry-popup .enquiry__done {
    position: relative;
    inset: auto;
    flex: none;
    padding: 58px 16px 22px;
    overflow: visible;
  }
  /* the close button sits on the red panel */
  app-enquiry-popup .enquiry .popup__close {
    background: hsla(0, 0%, 100%, 0.22);
    color: #fff;
  }
  app-enquiry-popup .enquiry .popup__close:hover {
    background: hsla(0, 0%, 100%, 0.35);
  }
}

@keyframes app-enquiry-popup--wipe-down {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}

@media (max-width: 560px) {
  app-enquiry-popup .form {
    grid-template-columns: 1fr;
  }
  app-enquiry-popup .form__end {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  app-enquiry-popup .captcha__box {
    width: max-content;
    max-width: 100%;
  }
  /* 16px stops iOS zooming the page when a field is focused */
  app-enquiry-popup .line input,
  app-enquiry-popup .line textarea,
  app-enquiry-popup .captcha__input {
    font-size: 16px;
  }
  app-enquiry-popup .ticket__top {
    padding: 22px 18px 12px;
  }
  app-enquiry-popup .ticket__bottom {
    padding: 4px 16px 20px;
  }
  app-enquiry-popup .code {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    text-align: center;
  }
  app-enquiry-popup .code__copy {
    justify-content: center;
  }
}

/* less motion: every part is simply where it ends (the entrances only have a `from`) */
@media (prefers-reduced-motion: reduce) {
  app-enquiry-popup .enquiry *,
  app-enquiry-popup .enquiry *::before,
  app-enquiry-popup .enquiry *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
  app-enquiry-popup .cta[aria-busy=true] .cta__spin {
    border-color: var(--red);
  }
}

/* ════════ <app-finder> ════════ */

app-finder {
  display: contents;
}

/* the dialog: a head and a foot that stay put, and a body that scrolls between them */
app-finder .finder {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

app-finder .finder__head {
  flex: 0 0 auto;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--popup-line);
}

app-finder .finder__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--popup-red);
}

app-finder .finder__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

app-finder .progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

app-finder .progress__bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--popup-line);
  overflow: hidden;
}
app-finder .progress__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--popup-red);
  transition: width 0.3s ease;
}

app-finder .progress__count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--popup-muted);
  font-variant-numeric: tabular-nums;
}

app-finder .finder__body {
  flex: 1 1 auto;
  padding: 24px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

app-finder .finder__hint {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--popup-muted);
}

/* a question's answers: radio buttons dressed as tiles */
app-finder .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

app-finder .option {
  position: relative;
  display: block;
}
app-finder .option input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
app-finder .option:hover .option__box {
  border-color: var(--edge-hover);
}
app-finder .option input:focus-visible + .option__box {
  outline: 2px solid var(--popup-red);
  outline-offset: 2px;
}
app-finder .option input:checked + .option__box {
  border-color: var(--popup-red);
  background: var(--tint);
  box-shadow: 0 0 0 3px rgba(255, 45, 53, 0.12);
  font-weight: 600;
}
app-finder .option small {
  font-weight: 400;
  color: var(--popup-muted);
}

app-finder .option__box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 13px 15px;
  border: 1.5px solid var(--popup-line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.35;
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}

app-finder .option__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--popup-red);
}
app-finder .option__icon svg {
  display: block;
}

app-finder .finder__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px 20px;
  border-top: 1px solid var(--popup-line);
}

app-finder .finder__gap {
  flex: 1 1 auto;
}

app-finder .finder__btn {
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

app-finder .finder__btn--primary {
  background: var(--popup-red);
  color: #fff;
}
app-finder .finder__btn--primary:hover {
  background: var(--red);
}
app-finder .finder__btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

app-finder .finder__btn--ghost {
  border: 1px solid var(--popup-line);
  color: var(--text-2);
}
app-finder .finder__btn--ghost:hover {
  border-color: var(--edge-hover);
  color: var(--popup-ink);
}

app-finder .finder__btn--link {
  padding: 11px 6px;
  color: var(--popup-muted);
  font-weight: 500;
  text-decoration: underline;
}
app-finder .finder__btn--link:hover {
  color: var(--popup-red);
}

app-finder .intro {
  padding: 6px 4px 2px;
  text-align: center;
}
app-finder .intro h3 {
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 700;
}
app-finder .intro p {
  max-width: 420px;
  margin: 0 auto 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

app-finder .intro__chair {
  margin-bottom: 10px;
  font-size: 40px;
}

/* the results */
app-finder .finder__why {
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid var(--tint-edge);
  border-radius: 11px;
  background: var(--tint);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tint-ink);
}

app-finder .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

app-finder .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--popup-line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
app-finder .card:hover {
  border-color: var(--edge-hover);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

app-finder .card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  background: var(--surface-2);
  overflow: hidden;
}
app-finder .card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

app-finder .card__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px 14px;
}

app-finder .card__category {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--popup-muted);
}

app-finder .card__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

app-finder .card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--popup-red);
}

app-finder .card__go {
  display: inline-block;
  margin-top: auto;
  padding: 7px 12px;
  border: 1px solid var(--popup-red);
  border-radius: 8px;
  color: var(--popup-red);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}
app-finder .card__go:hover {
  background: var(--popup-red);
  color: #fff;
}

app-finder .finder__note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--popup-muted);
}

@media (max-width: 640px) {
  app-finder .finder {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  app-finder .finder__head {
    padding: 18px 18px 14px;
  }
  app-finder .finder__title {
    font-size: 17px;
  }
  app-finder .finder__body {
    padding: 18px;
  }
  app-finder .finder__foot {
    flex-wrap: wrap;
    padding: 14px 18px 16px;
  }
  app-finder .options,
  app-finder .cards {
    grid-template-columns: 1fr;
  }
  app-finder .finder__btn {
    font-size: 14px;
  }
  app-finder .finder__btn--primary,
  app-finder .finder__btn--ghost {
    padding: 10px 16px;
  }
}

/* ════════ <app-auth-popup> ════════ */

/* An animated login / registration card: Login on the left, with "Welcome back" and the recliners in 3D on a slanted
   red panel to its right; Sign Up on the right, with "Join Little Nap" on the left. `.is-signup` on the card switches
   side: the side going away slides out, field after field (0.1 s apart), the red shape swings over the whole card, the
   shape of the card's colour swings up from the foot to slant the other way, and the other side slides in. */
app-auth-popup {
  display: contents;
  --muted: var(--popup-muted);
  --ok: var(--ok);
  /* the fields, links and checkbox in the brand's red, the same as the Login button (not the brighter popup red) */
  --popup-red: var(--red);
}
app-auth-popup [hidden] {
  display: none !important;
}

/* the card: a light red edge, softly glowing */
app-auth-popup .auth {
  /* when each side's items move: the side coming in waits for the shapes, the side going away starts at once */
  --in: 1.7s;
  --back: 2.1s;
  --step: 0.1s;
  width: min(960px, 100%);
  height: min(620px, 100vh - 48px);
  height: min(620px, 100dvh - 48px);
  border: 1px solid rgba(255, 45, 53, 0.45);
  box-shadow: 0 0 14px rgba(255, 45, 53, 0.22), 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ── the two shapes (drawn on a 750 × 450 card, stretched to this one) ── */
app-auth-popup .sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the red one: slanted over the right of the card for Login; the whole card while it swings over */
app-auth-popup .sweep__red {
  transform-origin: 750px 595px;
  transform: rotate(10deg) skewY(40deg);
  transition: transform 1.5s ease 1.6s;
}
app-auth-popup .is-signup .sweep__red {
  transform: rotate(0deg) skewY(0deg);
  transition-delay: 0.5s;
}

/* the one of the card's colour, with a red edge: under the card for Login; swung up over its right for Sign Up */
app-auth-popup .sweep__card {
  transform-origin: 250px 1153px;
  transform: rotate(0deg) skewY(0deg);
  transition: transform 1.5s ease 0.5s;
}
app-auth-popup .is-signup .sweep__card {
  transform: rotate(-11deg) skewY(-41deg);
  transition-delay: 1.2s;
}
app-auth-popup .sweep__card rect {
  fill: var(--surface);
}
app-auth-popup .sweep__card line {
  stroke: var(--popup-red);
  stroke-width: 3px;
}

/* ── the two sides: each form takes half the card, its panel the other half ── */
app-auth-popup .auth__panes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

app-auth-popup .auth__pane {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}
/* (in the middle, but never cut at the top when it is taller than the card: it scrolls) */
app-auth-popup .auth__pane > :first-child {
  margin-top: auto;
}
app-auth-popup .auth__pane > :last-child {
  margin-bottom: auto;
}
app-auth-popup .auth__pane[inert],
app-auth-popup .auth__info[inert] {
  pointer-events: none;
}

app-auth-popup .auth__pane--login {
  left: 0;
  padding: 26px 64px;
}

/* (wider on the left, clear of the red that slants over its top) */
app-auth-popup .auth__pane--signup {
  right: 0;
  padding: 22px 40px 22px 92px;
}

app-auth-popup .auth__info {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 50%;
  color: #fff;
}

/* (centred under its lamp; wide on the left, clear of the slant of the red) */
app-auth-popup .auth__info--login {
  --lamp-x: calc(50% + 63px);
  right: 0;
  align-items: center;
  padding: 100px 24px 36px 150px;
  text-align: center;
}

/* the close button: light on the red of Login's side, as the shell has it on Sign Up's */
app-auth-popup .auth .popup__close {
  transition: background-color 0.2s, color 0.6s;
}
app-auth-popup .auth:not(.is-signup) .popup__close {
  background: hsla(0, 0%, 100%, 0.22);
  color: #fff;
}
app-auth-popup .auth:not(.is-signup) .popup__close:hover {
  background: hsla(0, 0%, 100%, 0.35);
}

app-auth-popup .auth__info--signup {
  left: 0;
  justify-content: center;
  padding: 0 170px 90px 40px;
}

/* ── the slide: every item of a side, one after the other (--i, its place; --d, when it starts moving) ──
   (it moves with `translate`, so that a button keeps its own `transform` and colours for the pointer, which change
   at once whatever the side is doing) */
app-auth-popup .auth :is(.auth__pane, .auth__info) > * {
  transition: translate 0.7s ease var(--d, 0s), opacity 0.7s ease var(--d, 0s), filter 0.7s ease var(--d, 0s), transform 0.25s var(--ease), background-color 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(2) { --i: 1; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(3) { --i: 2; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(4) { --i: 3; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(5) { --i: 4; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(6) { --i: 5; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(7) { --i: 6; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(8) { --i: 7; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(9) { --i: 8; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(10) { --i: 9; }
app-auth-popup :is(.auth__pane, .auth__info) > :nth-child(n + 11) { --i: 10; }

/* Login's side: in place (coming back once the shapes have swung back); away to the left (the form) and the
   right (its panel) when Sign Up is on show */
app-auth-popup :is(.auth__pane--login, .auth__info--login) > * {
  --d: calc(var(--back) + var(--step) * var(--i, 0));
}
app-auth-popup .is-signup :is(.auth__pane--login, .auth__info--login) > * {
  --d: calc(var(--step) * var(--i, 0));
  opacity: 0;
  filter: blur(10px);
}
app-auth-popup .is-signup .auth__pane--login > * {
  translate: -120% 0;
}
app-auth-popup .is-signup .auth__info--login > * {
  translate: 120% 0;
}

/* Sign Up's side: away to the right (the form) and the left (its panel) until it is on show */
app-auth-popup :is(.auth__pane--signup, .auth__info--signup) > * {
  --d: calc(var(--step) * var(--i, 0));
  opacity: 0;
  filter: blur(10px);
}
app-auth-popup .auth__pane--signup > * {
  translate: 120% 0;
}
app-auth-popup .auth__info--signup > * {
  translate: -120% 0;
}
app-auth-popup .is-signup :is(.auth__pane--signup, .auth__info--signup) > * {
  --d: calc(var(--in) + var(--step) * var(--i, 0));
  translate: 0 0;
  opacity: 1;
  filter: blur(0);
}

/* the next step of a side (Forgot password, the code…) slides in the same way */
app-auth-popup .auth__pane.is-entering > * {
  animation: app-auth-popup--enter 0.7s ease both;
  animation-delay: calc(var(--step) * var(--i, 0));
}

@keyframes app-auth-popup--enter {
  from {
    translate: 60px 0;
    opacity: 0;
    filter: blur(10px);
  }
}

/* opening on a side: it is simply there */
app-auth-popup .is-still,
app-auth-popup .is-still * {
  transition: none !important;
}

/* ── the side panels ── */
app-auth-popup .auth__eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.9;
}

app-auth-popup .auth__head {
  margin: 6px 0 8px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

app-auth-popup .auth__sub {
  max-width: 270px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.93;
}

/* ── the lamp over Login's panel: hung from the top of the card, already lit ── */
app-auth-popup .lamp {
  position: absolute;
  top: 0;
  left: var(--lamp-x);
  z-index: 3;
  width: 96px;
  height: 80px;
  /* (centred by its margin: `translate` is the slide's) */
  margin-left: -48px;
  pointer-events: none;
}
app-auth-popup .lamp svg {
  display: block;
}
/* the bulb's glow round the mouth of the shade */
app-auth-popup .lamp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 70px;
  width: 120px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 190, 0.9), rgba(255, 214, 140, 0.35) 55%, rgba(255, 214, 140, 0));
  translate: -50% -50%;
  mix-blend-mode: screen;
}

/* its light, widening down over the words and onto the chair (soft at the edges; lighter, never darker, where it falls) */
app-auth-popup .beam {
  position: absolute;
  top: 70px;
  bottom: 108px;
  left: var(--lamp-x);
  z-index: 2;
  width: 300px;
  margin-left: -150px;
  filter: blur(7px);
  mix-blend-mode: screen;
  pointer-events: none;
}
app-auth-popup .beam::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(36% 0, 64% 0, 94% 100%, 6% 100%);
  background: linear-gradient(rgba(255, 236, 186, 0.42), rgba(255, 230, 172, 0.18) 45%, rgba(255, 226, 164, 0.08) 80%, rgba(255, 226, 164, 0.02));
}

/* the recliners in 3D, standing on the red in the lamp's light */
app-auth-popup .stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  margin-top: 6px;
}

/* where the light lands: a warm pool on the floor round the chair */
app-auth-popup .stage__pool {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 84%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 170, 0.36), rgba(255, 214, 150, 0.14) 55%, rgba(255, 214, 150, 0));
  transform: translateX(-50%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* the floor the chair stands on */
app-auth-popup .stage__floor {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 70%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 0, 4, 0.42), rgba(40, 0, 4, 0));
  transform: translateX(-50%);
  pointer-events: none;
}

/* the picture stands in until the model has arrived, then the model fades up over it */
app-auth-popup .stage__poster {
  position: absolute;
  left: 17%;
  top: 10%;
  width: 66%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(40, 0, 4, 0.35));
  transition: opacity 0.5s ease;
  pointer-events: none;
}
app-auth-popup .is-live .stage__poster {
  opacity: 0;
}

app-auth-popup .stage__viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.9s var(--ease);
  cursor: grab;
  --poster-color: transparent;
  --progress-bar-color: transparent;
}
app-auth-popup .stage__viewer:active {
  cursor: grabbing;
}
app-auth-popup .is-live .stage__viewer {
  opacity: 1;
  transform: none;
}

app-auth-popup .stage__hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 8px rgba(60, 0, 6, 0.2);
  color: #5a3a33;
  white-space: nowrap;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
app-auth-popup .is-live .stage__hint {
  opacity: 1;
}

/* a button for each finish (in the corner, where the red is widest at the foot) */
app-auth-popup .showcase {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  text-align: right;
}

app-auth-popup .showcase__picks {
  display: flex;
  gap: 8px;
}

app-auth-popup .pick {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 3px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 250, 247, 0.94);
  box-shadow: 0 4px 12px rgba(60, 0, 6, 0.25);
  opacity: 0.62;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
app-auth-popup .pick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
app-auth-popup .pick:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
app-auth-popup .pick[aria-pressed=true] {
  opacity: 1;
  box-shadow: 0 4px 12px rgba(60, 0, 6, 0.25), 0 0 0 2px #fff;
}
app-auth-popup .pick:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* fills while a finish is on show; when it is full the next one takes over */
app-auth-popup .pick__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--popup-red);
  transform: scaleX(0);
  transform-origin: left;
  animation: app-auth-popup--pick-fill 8s linear forwards;
}
app-auth-popup .is-holding .pick__bar {
  animation-play-state: paused;
}

@keyframes app-auth-popup--pick-fill {
  to {
    transform: scaleX(1);
  }
}

/* ── the forms ── */
app-auth-popup .pane__title {
  margin-bottom: 2px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--popup-ink);
}

app-auth-popup .auth__title {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

app-auth-popup .auth__lede {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

app-auth-popup .auth__lede--tight {
  margin-bottom: 2px;
}

/* Biometrics / Password (on a phone), split by a thin rule */
app-auth-popup .ways {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 16px 0 4px;
}

app-auth-popup .way {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
  transition: color 0.2s;
}
app-auth-popup .way + .way::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--popup-line);
}
app-auth-popup .way[aria-selected=true] {
  color: var(--popup-ink);
}
app-auth-popup .way:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 1px;
}

app-auth-popup .way__disc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--popup-line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
app-auth-popup .way:hover .way__disc {
  border-color: var(--edge-hover);
}
app-auth-popup .way[aria-selected=true] .way__disc {
  border-color: var(--popup-red);
  background: var(--popup-red);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 45, 53, 0.3);
}

app-auth-popup .way-body {
  margin-top: 14px;
  animation: app-auth-popup--way-in 0.25s var(--ease);
}

app-auth-popup .way-body--center {
  padding: 4px 0;
  text-align: center;
}

@keyframes app-auth-popup--way-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

app-auth-popup .card__title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--popup-ink);
}

app-auth-popup .card__text {
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}

/* ── a field: a line to type on, its label rising off it when the field is in use or filled ── */
app-auth-popup .input,
app-auth-popup .select {
  position: relative;
  height: 46px;
  margin-top: 20px;
}

app-auth-popup .input input,
app-auth-popup .select__btn {
  width: 100%;
  height: 100%;
  /* (room for the icon at the start) */
  padding: 0 8px 0 32px;
  border: 0;
  border-bottom: 2px solid var(--popup-line);
  border-radius: 0;
  background: transparent;
  color: var(--popup-ink);
  font: 600 15px/1.2 var(--font-body);
  letter-spacing: normal;
  outline: 0;
  transition: border-color 0.5s;
}
app-auth-popup .input:has(.eye) input {
  padding-right: 40px;
}
/* (the browser's filled-in fields keep the card's colour, not its own blue) */
app-auth-popup .input input:-webkit-autofill {
  -webkit-text-fill-color: var(--popup-ink);
  box-shadow: inset 0 0 0 100px var(--surface);
  caret-color: var(--popup-ink);
}

app-auth-popup .input label,
app-auth-popup .select__label {
  position: absolute;
  left: 32px;
  top: 50%;
  max-width: calc(100% - 72px);
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition: top 0.5s, left 0.5s, font-size 0.5s, color 0.5s;
  pointer-events: none;
}
app-auth-popup :is(.input label, .select__label) b {
  color: var(--popup-red);
}

/* in use, or filled: the line and the label turn red, the label rises */
app-auth-popup .input input:is(:focus, :not(:placeholder-shown), :-webkit-autofill),
app-auth-popup .select:is(.is-filled, :focus-within) .select__btn,
app-auth-popup .field.has-error :is(.input input, .select__btn) {
  border-bottom-color: var(--popup-red);
}
app-auth-popup .input input:is(:focus, :not(:placeholder-shown), :-webkit-autofill) ~ label,
app-auth-popup .select:is(.is-filled, :focus-within) .select__label {
  top: -4px;
  left: 0;
  color: var(--popup-red);
  font-size: 12.5px;
}

/* the field's icon at the start of the line */
app-auth-popup .input > svg,
app-auth-popup .select__btn > svg:first-child {
  position: absolute;
  left: 0;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
  transition: color 0.5s;
  pointer-events: none;
}
app-auth-popup .input input:is(:focus, :not(:placeholder-shown)) ~ :is(svg, .eye),
app-auth-popup .select:is(.is-filled, :focus-within) .select__btn > svg {
  color: var(--popup-red);
}

/* show / hide the password, at the end of the line */
app-auth-popup .eye {
  position: absolute;
  right: -8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--muted);
  transform: translateY(-50%);
  transition: color 0.5s;
}
app-auth-popup .eye:hover {
  color: var(--popup-ink);
}
app-auth-popup .eye:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 1px;
}

/* what is wrong with a field, under it */
app-auth-popup .err {
  display: none;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--popup-red);
}
app-auth-popup .field.has-error .err {
  display: block;
}

/* a label above its field (the one-time password) */
app-auth-popup .field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

/* Remember me · Forgot password? */
app-auth-popup .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

app-auth-popup .check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--popup-ink);
  cursor: pointer;
}
app-auth-popup .check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--popup-red);
  cursor: pointer;
}

app-auth-popup .link {
  color: var(--popup-red);
  font-size: 13px;
  font-weight: 600;
  line-height: 15px;
}
app-auth-popup .link:hover {
  text-decoration: underline;
}

/* ── Sign up as: a list box, drawn as a field ── */
app-auth-popup .select__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

app-auth-popup .select__value {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

app-auth-popup .select__caret {
  flex: none;
  color: var(--muted);
  transition: transform 0.2s;
}
app-auth-popup [aria-expanded=true] .select__caret {
  transform: rotate(180deg);
}

app-auth-popup .select__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--popup-line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  list-style: none;
}

app-auth-popup .select__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
}
app-auth-popup .select__opt > svg {
  flex: none;
}
app-auth-popup .select__opt strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--popup-ink);
}
app-auth-popup .select__opt small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--popup-muted);
}
app-auth-popup .select__opt.is-active {
  background: var(--surface-2);
}
app-auth-popup .select__opt[aria-selected=true] {
  background: var(--tint);
  color: var(--popup-red);
}

/* the list box holds the fields below it under its open list */
app-auth-popup .auth__pane > .field:has(.select) {
  position: relative;
  z-index: 2;
}

app-auth-popup .terms {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
app-auth-popup .terms a {
  color: var(--popup-ink);
  font-weight: 600;
  text-decoration: underline;
}

/* ── the main button of each view: the website's own red button (.btn--primary), in the red of the theme; its
   darker red rises from the foot under the pointer ── */
app-auth-popup .submit {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 26px -10px rgba(215, 26, 33, 0.7);
  transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s;
}
app-auth-popup .submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red-dark);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
app-auth-popup .submit:hover::before,
app-auth-popup .submit[aria-busy=true]::before {
  transform: none;
}
app-auth-popup .submit:active {
  transform: scale(0.98);
}
app-auth-popup .submit:focus-visible {
  outline: 2px solid var(--popup-ink);
  outline-offset: 2px;
}
/* (no opacity for these: it is the slide's) */
app-auth-popup .submit[disabled] {
  background: color-mix(in srgb, var(--red) 38%, var(--surface));
  box-shadow: none;
  cursor: not-allowed;
}
app-auth-popup .submit[disabled]::before {
  display: none;
}
app-auth-popup .submit[disabled]:active {
  transform: none;
}
app-auth-popup .submit[aria-busy=true] {
  pointer-events: none;
  cursor: progress;
}

app-auth-popup .submit--gap {
  margin-top: 24px;
}

/* ── Or continue with: Google and Apple ── */
app-auth-popup .or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  font-size: 12.5px;
  color: var(--popup-muted);
}
app-auth-popup .or::before, app-auth-popup .or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--popup-line);
}

app-auth-popup .social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

app-auth-popup .sbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--popup-line);
  border-radius: 40px;
  background: var(--surface);
  color: var(--popup-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
app-auth-popup .sbtn:hover {
  border-color: var(--popup-red);
  box-shadow: 0 3px 10px rgba(255, 45, 53, 0.15);
}
app-auth-popup .sbtn:active {
  transform: translateY(1px);
}
app-auth-popup .sbtn:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 2px;
}

app-auth-popup .sbtn__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--popup-line);
}

/* Don't have an account? Sign Up */
app-auth-popup .alt {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
app-auth-popup .alt button {
  color: var(--popup-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}
app-auth-popup .alt button:hover {
  text-decoration: underline;
}

/* ── Forgot password, Verification, Create new password ── */
app-auth-popup .back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 15px;
}
app-auth-popup .back:hover {
  color: var(--popup-ink);
}

app-auth-popup .sent {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--popup-ink);
}

app-auth-popup .resend {
  min-height: 20px;
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}

/* the code: one real field laid over a row of boxes */
app-auth-popup .code {
  position: relative;
  width: max-content;
  margin: 14px auto 8px;
}

app-auth-popup .code__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 16px;
  opacity: 0;
  cursor: pointer;
}

app-auth-popup .code__boxes {
  display: flex;
  gap: 12px;
}

app-auth-popup .code__box {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--popup-line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--popup-ink);
  font: 700 22px/1 var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
app-auth-popup .code__input:focus + .code__boxes .code__box.is-current {
  border-color: var(--popup-red);
  box-shadow: 0 0 0 3px rgba(255, 45, 53, 0.13);
}

app-auth-popup .code--wide .code__box {
  width: 58px;
  height: 58px;
}

/* ── Verify your email / phone ── */
app-auth-popup .activate {
  padding-top: 4px;
  text-align: center;
}
app-auth-popup .activate .auth__lede {
  margin-bottom: 12px;
}

app-auth-popup .activate__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--popup-red);
  box-shadow: 0 0 0 6px var(--tint);
}

/* where the code went */
app-auth-popup .activate__to {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid var(--tint-edge);
  border-radius: 999px;
  background: var(--tint);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
app-auth-popup .activate__to svg {
  flex: none;
  color: var(--popup-red);
}

/* one field for all six digits, spaced out */
app-auth-popup .field .otp-input {
  width: 100%;
  height: 54px;
  padding: 0 0 0 0.6em;
  border: 1px solid var(--popup-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--popup-ink);
  font: 700 22px/1 var(--font-body);
  letter-spacing: 0.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, box-shadow 0.2s;
}
app-auth-popup .field .otp-input::placeholder {
  color: var(--faint);
}
app-auth-popup .field .otp-input:focus {
  outline: 0;
  border-color: var(--popup-red);
  box-shadow: 0 0 0 3px rgba(255, 45, 53, 0.13);
}
app-auth-popup .field.has-error .otp-input {
  border-color: var(--popup-red);
}

app-auth-popup .err--icon {
  align-items: center;
  gap: 6px;
}
app-auth-popup .has-error .err--icon {
  display: flex;
}
app-auth-popup .err--icon svg {
  flex: none;
}

app-auth-popup .submit--icon > span,
app-auth-popup .ghost--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── signed in ── */
app-auth-popup .me {
  padding: 18px 0 4px;
  text-align: center;
}
app-auth-popup .me .auth__lede {
  margin-bottom: 20px;
}

app-auth-popup .me__avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--popup-red);
  color: #fff;
  font: 800 28px/1 var(--font-body);
  box-shadow: 0 8px 20px rgba(255, 45, 53, 0.3);
}

app-auth-popup .me__role {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--popup-red);
  font-size: 12px;
  font-weight: 600;
}

app-auth-popup .ghost {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 1px solid var(--popup-line);
  border-radius: 40px;
  color: var(--popup-ink);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s;
}
app-auth-popup .ghost:hover {
  border-color: var(--popup-red);
}
app-auth-popup .ghost:focus-visible {
  outline: 2px solid var(--popup-red);
  outline-offset: 2px;
}
app-auth-popup .ghost[disabled] {
  color: var(--faint);
  cursor: default;
}
app-auth-popup .ghost[disabled]:hover {
  border-color: var(--popup-line);
}

/* ── "coming soon" for Google / Apple, over the dialog ── */
app-auth-popup .notice {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4);
  animation: app-auth-popup--notice-in 0.2s ease-out;
}

app-auth-popup .notice__box {
  width: min(340px, 100%);
  padding: 22px 22px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
app-auth-popup .notice__box h4 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}
app-auth-popup .notice__box p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

app-auth-popup .notice__ok {
  display: block;
  margin-left: auto;
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--popup-red);
  font-size: 14px;
  font-weight: 700;
}
app-auth-popup .notice__ok:hover, app-auth-popup .notice__ok:focus-visible {
  background: var(--tint);
  outline: 0;
}

@keyframes app-auth-popup--notice-in {
  from {
    opacity: 0;
  }
}

/* tablet and phone: the side's red panel sits above its form, and the two swap with the same slide (quicker,
   with no shapes to wait for) */
@media (max-width: 860px) {
  app-auth-popup .auth {
    --in: 0.45s;
    --back: 0.45s;
    --step: 0.06s;
    display: flex;
    flex-direction: column;
    max-width: 460px;
    height: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  app-auth-popup .sweep {
    display: none;
  }
  app-auth-popup .auth__info {
    position: relative;
    order: 0;
    width: auto;
    padding: 26px 24px 22px;
    align-items: flex-start;
    text-align: left;
    /* (the dark red of the card's panel) */
    background: radial-gradient(110% 60% at 0% 0%, rgba(255, 110, 96, 0.22) 0%, rgba(255, 110, 96, 0) 60%), linear-gradient(165deg, #9a101c 0%, #7d0a15 40%, #5a0610 75%, #3a0309 100%);
  }
  app-auth-popup .auth__info[inert] {
    display: none;
  }
  app-auth-popup .auth__head {
    font-size: 24px;
  }
  /* (no room for the stage and its lamp: a phone never fetches the 3D) */
  app-auth-popup .stage,
  app-auth-popup .showcase,
  app-auth-popup .lamp,
  app-auth-popup .beam {
    display: none;
  }
  app-auth-popup .auth__panes {
    position: relative;
    inset: auto;
    order: 1;
    display: grid;
  }
  app-auth-popup .auth__pane {
    position: relative;
    grid-area: 1/1;
    width: auto;
    padding: 16px 24px 28px;
    overflow: visible;
  }
  /* the side going away slides off over the one coming in, out of the flow */
  app-auth-popup .auth__pane[inert] {
    position: absolute;
    inset: 0 0 auto;
  }
  app-auth-popup .auth__pane > :first-child,
  app-auth-popup .auth__pane > :last-child {
    margin-block: 0;
  }
  app-auth-popup .pane__title {
    margin-top: 6px;
    font-size: 26px;
  }
  /* the close button now sits on the red panel */
  app-auth-popup .popup__close {
    background: hsla(0, 0%, 100%, 0.22);
    color: #fff;
  }
  app-auth-popup .popup__close:hover {
    background: hsla(0, 0%, 100%, 0.35);
  }
}

@media (max-width: 560px) {
  /* 16px stops iOS zooming the page when a field is focused */
  app-auth-popup .input input,
  app-auth-popup .select__btn {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  app-auth-popup .auth__pane {
    padding-inline: 18px;
  }
  app-auth-popup .code__boxes {
    gap: 10px;
  }
  app-auth-popup .code__box,
  app-auth-popup .code--wide .code__box {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 360px) {
  app-auth-popup .social {
    grid-template-columns: 1fr;
  }
}

/* less motion: the sides simply swap */
@media (prefers-reduced-motion: reduce) {
  app-auth-popup .auth *,
  app-auth-popup .auth *::before {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  app-auth-popup .auth__pane.is-entering > * {
    animation: none;
  }
}

/* A product card's bulk-buy offer (components/ProductCard.tsx, client requirement 8) : a small line over the price, on
   every grid that shows the cards */
.product__deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ok-bg, #e7f6ec);
  color: var(--ok, #1b7a3d);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.product__deal::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}