@charset "UTF-8";
/*
 * inner.css : the inner pages : about, awards, blogs, contact, store, living room, a recliner's page, the 404.
 *
 * 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.
 */

/* ════════ <app-enquire> ════════ */
/* The enquiry form of Contact Us : a card with the topic chips, the fields, and a thank-you once sent. */

app-enquire {
  display: block;
}

app-enquire .enq {
  padding: clamp(22px, 3.2vw, 40px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  box-shadow: 0 40px 80px -56px rgba(60, 25, 15, 0.5);
}
:root[data-theme=dark] app-enquire .enq {
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}

app-enquire .form {
  display: grid;
  gap: 22px;
}

app-enquire .form__head {
  display: grid;
  gap: 6px;
}
app-enquire .form__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
app-enquire .form__sub {
  color: var(--muted);
  font-size: 15px;
  text-wrap: pretty;
}

/* ── what it is about : chips ─────────────────────────────────────────── */
app-enquire .topics {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
app-enquire .topics__legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-enquire .topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
app-enquire .topic {
  position: relative;
  cursor: pointer;
}
app-enquire .topic input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
app-enquire .topic span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
/* the chip's icon ; the chosen one shows the tick in its place */
app-enquire .topic__icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transition: color 0.2s;
}
@media (hover: hover) {
  app-enquire .topic:hover span {
    border-color: var(--edge-hover);
  }
  app-enquire .topic:hover .topic__icon {
    color: var(--red);
  }
}
app-enquire .topic input:checked + span {
  border-color: var(--red);
  background: var(--tint);
  color: var(--red);
}
app-enquire .topic input:checked + span .topic__icon {
  display: none;
}
/* a tick before the chosen one */
app-enquire .topic input:checked + span::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
app-enquire .topic input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.18);
}

/* ── the fields ───────────────────────────────────────────────────────── */
app-enquire .form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

app-enquire .field {
  display: grid;
  gap: 7px;
  align-content: start;
}
app-enquire .field--wide {
  grid-column: 1/-1;
}
app-enquire .field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-enquire .field__opt {
  font-weight: 400;
  color: var(--muted);
}

app-enquire .field input,
app-enquire .field select,
app-enquire .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  /* 16px stops iOS zooming the page when a field is focused */
  font-size: 16px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
app-enquire .field ::placeholder {
  color: var(--faint);
  opacity: 1;
}
@media (hover: hover) {
  app-enquire .field input:hover,
  app-enquire .field select:hover,
  app-enquire .field textarea:hover {
    border-color: var(--edge-hover);
  }
}
app-enquire .field input:focus,
app-enquire .field select:focus,
app-enquire .field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.12);
}
app-enquire .field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}
app-enquire .field select {
  padding-right: 44px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

/* "Which recliner?" : the Angular site's dropdown (a button opening a listbox, lib/dropdown.js), shaped as the fields */
app-enquire .dd {
  position: relative;
}
app-enquire .dd__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px 0 15px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  app-enquire .dd__btn:hover {
    border-color: var(--edge-hover);
  }
}
app-enquire .dd__btn:focus-visible,
app-enquire .dd__btn.is-open {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.12);
}
app-enquire .dd__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color 0.2s;
}
app-enquire .dd__btn.is-open .dd__icon {
  color: var(--red);
}
app-enquire .dd__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
app-enquire .dd__caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.2s;
}
app-enquire .dd__btn.is-open .dd__caret {
  transform: rotate(180deg);
}
app-enquire .dd__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--edge-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
  outline: 0;
  scrollbar-width: thin;
  animation: enq-dd-in 0.16s ease-out;
}
app-enquire .dd__list[hidden] {
  display: none;
}
@keyframes enq-dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
app-enquire .dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
}
app-enquire .dd__opt svg {
  flex: none;
  width: 16px;
  height: 16px;
}
app-enquire .dd__opt.is-active {
  background: var(--surface-2);
  color: var(--ink);
}
app-enquire .dd__opt.is-on {
  background: var(--tint);
  color: var(--red);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  app-enquire .dd__list {
    animation: none;
  }
}

/* the mobile number, after a fixed +91 */
app-enquire .field__phone {
  position: relative;
}
app-enquire .field__prefix {
  position: absolute;
  left: 1.5px;
  top: 1.5px;
  bottom: 1.5px;
  display: grid;
  place-items: center;
  width: 54px;
  border-right: 1.5px solid var(--edge-strong);
  border-radius: 12.5px 0 0 12.5px;
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}
app-enquire .field__phone input {
  padding-left: 68px;
  letter-spacing: 0.02em;
}

/* a field in error : red, with its line below */
app-enquire .field.is-invalid input {
  border-color: var(--red);
  background: var(--tint);
}
app-enquire .field__error {
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
}
app-enquire .field__error:empty {
  display: none;
}

app-enquire .form__submit {
  width: 100%;
  min-height: 56px;
  font-size: 16px;
}

app-enquire .form__privacy {
  margin-top: -8px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}
app-enquire .form__privacy svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
}
app-enquire .form__privacy a {
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
app-enquire .form__privacy a:hover {
  color: var(--red);
}

/* ── thank you ────────────────────────────────────────────────────────── */
app-enquire .thanks {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(28px, 6vw, 72px) 0;
  text-align: center;
  animation: enq-in 0.5s var(--ease);
}
@keyframes enq-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
app-enquire .thanks__tick {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}
app-enquire .thanks__tick svg {
  width: 34px;
  height: 34px;
}
app-enquire .thanks__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
}
app-enquire .thanks__text {
  max-width: 40ch;
  color: var(--muted);
  font-size: 16px;
}
app-enquire .thanks__sooner {
  margin-bottom: 8px;
  font-size: 14.5px;
  color: var(--muted);
}
app-enquire .thanks__sooner a {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
app-enquire .thanks__sooner a:hover {
  color: var(--red);
}

app-enquire .btn--outline {
  border: 1.5px solid var(--edge-strong);
  background: var(--surface);
  color: var(--ink);
}
app-enquire .btn--outline:hover {
  border-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  app-enquire .thanks {
    animation: none;
  }
}

@media (max-width: 560px) {
  app-enquire .form__grid {
    grid-template-columns: 1fr;
  }
  app-enquire .topic span {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13.5px;
  }
  app-enquire .topic__icon {
    width: 16px;
    height: 16px;
  }
}

/* ════════ <app-about> ════════ */
/* About us : a clean, editorial page. Light bands take turns (white, a soft grey) ; the cards are plain : the surface
   colour, a hairline and a soft shadow. Every part says what it is in its heading, so the page reads at a glance. */

app-about {
  --amber: #ff8a5c;
  --card-shadow: 0 24px 48px -34px rgba(60, 25, 15, 0.38);
  /* the milestones' panel */
  --panel: #f5f2ef;
  /* the soft grey of every other band (What We Make, Our Milestones, Our Reach) */
  --ab-band: #fbfbfb;
  /* India, on the map of Our Reach */
  --land: rgba(215, 26, 33, 0.07);
  --land-edge: rgba(215, 26, 33, 0.35);
  display: block;
  background: var(--page-inner);
}
:root[data-theme="dark"] app-about {
  --card-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.8);
  --panel: var(--cream);
  /* (a shade over the page's near black, the cards a shade over it again) */
  --ab-band: #161211;
  --land: rgba(255, 255, 255, 0.05);
  --land-edge: rgba(255, 255, 255, 0.24);
}

app-about .ab-band {
  background: var(--ab-band);
}

/* a plain card */
app-about .card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

/* the heading of a part, centred : the small line (with a rule on both sides), the title, a sentence */
app-about .ab-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 52px);
  text-align: center;
}
app-about .ab-head .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
app-about .ab-head .lead {
  margin-inline: auto;
  max-width: 60ch;
}

app-about .ab-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
/* the second button : an outline that fills on hover */
app-about .btn--outline {
  border: 1.5px solid var(--edge-strong);
  background: var(--surface);
  color: var(--ink);
}
app-about .btn--outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--page-inner);
}
/* the words of the page : every paragraph one size (the leads, the story, the philosophy) */
app-about {
  --ab-text: 16px;
  /* a card lifted under the pointer */
  --lift-shadow: 0 30px 56px -34px rgba(60, 25, 15, 0.5);
}
:root[data-theme="dark"] app-about {
  --lift-shadow: 0 30px 56px -30px rgba(0, 0, 0, 0.9);
}
app-about .lead {
  font-size: var(--ab-text);
  line-height: 1.75;
}

/* the glowing border of a card, as the Contact us top cards (sections/glow.js) : a red-to-amber light on the border,
   under the pointer, drawn as a ring over the border (the inside masked out) so it fades in and out */
app-about [data-glow] {
  position: relative;
}
app-about [data-glow]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), rgba(215, 26, 33, 0.95) 0%, rgba(255, 138, 92, 0.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
app-about [data-glow].is-glowing::before {
  opacity: 1;
}

/* ── 1. the company ────────────────────────────────────────────────────── */
app-about .company__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
app-about .company__intro {
  display: grid;
  gap: 18px;
  justify-items: start;
}
app-about .company__lead {
  font-size: var(--ab-text);
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* the head office in a leaf shape (its top left and bottom right corners round, the others barely), a tinted block
   of the same shape set behind it, down and to the right, and a grid of red dots peeping out at its top right */
app-about .company__photo {
  --big: clamp(70px, 10vw, 150px);
  --small: 22px;
  --off: 18px;
  position: relative;
  isolation: isolate;
  margin: 0 var(--off) var(--off) 0;
}
app-about .company__photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--off) calc(var(--off) * -1) calc(var(--off) * -1) var(--off);
  border: 1px solid var(--tint-edge);
  border-radius: var(--big) var(--small) var(--big) var(--small);
  background: rgba(215, 26, 33, 0.08);
}
:root[data-theme="dark"] app-about .company__photo::before {
  background: rgba(232, 38, 45, 0.16);
}
app-about .company__photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--off) * -1);
  right: calc(var(--off) * -1);
  width: 120px;
  height: 120px;
  background-image: radial-gradient(var(--red) 1.6px, transparent 1.9px);
  background-size: 14px 14px;
  opacity: 0.4;
}
app-about .company__photo img {
  display: block;
  width: 100%;
  /* (auto : the height in the markup would beat the ratio) */
  height: auto;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--big) var(--small) var(--big) var(--small);
  box-shadow: 0 40px 70px -45px rgba(60, 20, 10, 0.55);
}
/* "Since 2011" : a red stamp half off the photo's corner ; the brand's words turning round a stitched seam (as on the
   upholstery), the chair of the logo and the year on a disc in the middle. Sized by the stamp (cqi), so it scales whole */
app-about .company__seal {
  --seal: clamp(132px, 12vw, 168px);
  position: absolute;
  left: calc(var(--seal) * -0.3);
  bottom: calc(var(--seal) * -0.2);
  container-type: inline-size;
  display: grid;
  place-items: center;
  width: var(--seal);
  height: var(--seal);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #f0474d 0%, var(--red) 48%, #9e1219 100%);
  box-shadow:
    0 0 0 6px var(--page-inner),
    0 28px 46px -22px rgba(120, 10, 15, 0.65),
    inset 0 -8px 18px rgba(70, 0, 5, 0.28);
  transition: transform 0.5s var(--ease), opacity 0.4s;
}
app-about .seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
app-about .seal__edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
}
/* (the seam : short stitches) */
app-about .seal__seam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1.5;
  stroke-dasharray: 4.5 3.5;
  stroke-linecap: round;
}
app-about .seal__words {
  transform-origin: 100px 100px;
  animation: about-seal-turn 32s linear infinite;
}
app-about .seal__words text {
  font: 700 15px var(--font-body);
  letter-spacing: 0.08em;
  fill: #fff;
}
app-about .seal__core {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, var(--surface) 55%, var(--tint) 100%);
  box-shadow: inset 0 3px 8px rgba(80, 10, 10, 0.22);
  line-height: 1;
}
/* the chair of the logo : it leans back when the photo is pointed at */
app-about .seal__chair {
  width: 15cqi;
  aspect-ratio: 304 / 260;
  margin-bottom: 2.5cqi;
  background: var(--red);
  -webkit-mask: url("../assets/misc/chair.png") center / contain no-repeat;
  mask: url("../assets/misc/chair.png") center / contain no-repeat;
  transform-origin: 70% 90%;
  transition: transform 0.6s var(--ease);
}
app-about .seal__since {
  font-family: var(--font-display);
  font-size: max(10px, 7.5cqi);
  font-style: italic;
  color: var(--muted);
}
app-about .seal__year {
  margin-top: 0.5cqi;
  font-family: var(--font-display);
  font-size: 18.5cqi;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
app-about .company__photo:hover .company__seal {
  transform: scale(1.05);
}
app-about .company__photo:hover .seal__chair {
  transform: rotate(-16deg);
}
/* (stamped on once the photo is in : it lands turning) */
app-about .company__photo.reveal:not(.is-done) .company__seal {
  transition: transform 0.9s calc(var(--reveal-delay, 0ms) + 0.45s) cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.4s calc(var(--reveal-delay, 0ms) + 0.45s);
}
app-about .company__photo.reveal:not(.is-in) .company__seal {
  opacity: 0;
  transform: scale(0.4) rotate(-120deg);
}
@keyframes about-seal-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-about .seal__words {
    animation: none;
  }
  app-about .company__seal,
  app-about .seal__chair {
    transition: none;
  }
  app-about .company__photo.reveal:not(.is-in) .company__seal {
    opacity: 1;
    transform: none;
  }
}

/* the story in two cards : the number large and faint in the corner, an icon and a label saying what it is about,
   the first sentence darker so the gist reads first */
app-about .company__story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(48px, 5.5vw, 84px);
}
app-about .part {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius, 24px);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
/* (a red tab on the top edge) */
app-about .part::after {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(24px, 2.8vw, 38px);
  width: 56px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--red);
}
app-about .part:hover {
  transform: translateY(-4px);
  border-color: var(--tint-edge);
  box-shadow: 0 30px 60px -36px rgba(120, 20, 20, 0.35);
}
app-about .part__num {
  position: absolute;
  top: clamp(10px, 1.4vw, 18px);
  right: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 100px);
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--tint-edge);
  pointer-events: none;
  user-select: none;
}
app-about .part__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
app-about .part__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--tint-edge);
  border-radius: 15px;
  background: var(--tint);
  color: var(--red);
  transition: transform 0.45s var(--ease);
}
app-about .part__icon svg {
  width: 24px;
  height: 24px;
}
/* (the chair of the logo) */
app-about .part__icon--chair::before {
  content: "";
  width: 27px;
  height: 23px;
  background: currentColor;
  -webkit-mask: url("../assets/misc/chair.png") center / contain no-repeat;
  mask: url("../assets/misc/chair.png") center / contain no-repeat;
}
app-about .part:hover .part__icon {
  transform: rotate(-8deg) scale(1.06);
}
app-about .part__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
app-about .part__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
app-about .part__text {
  font-size: var(--ab-text);
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}
app-about .part__first {
  font-weight: 500;
  color: var(--ink-soft);
}
/* the range : tags (not buttons), a red dot before each */
app-about .range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
app-about .range li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page-inner);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-about .range li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
app-about .part__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}
app-about .part__more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}
app-about .part__more:is(:hover, :focus-visible) svg {
  transform: translateX(4px);
}

/* 15 years in the industry : a white card, a soft red glow in its corner ; the big figure over a line filling from
   2011 to 2026, then the words (the lead, the paragraph with its figures picked out, the thank you as a sign-off) */
app-about .fifteen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(200px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px);
  border: 1px solid var(--tint-edge);
  border-radius: var(--radius, 24px);
  background:
    radial-gradient(70% 110% at 0% 0%, var(--tint) 0%, transparent 70%),
    var(--surface);
  box-shadow: var(--card-shadow);
  color: var(--ink);
}
/* (a faint "15" behind the words) */
app-about .fifteen::after {
  content: attr(data-figure);
  position: absolute;
  z-index: -1;
  right: -0.04em;
  bottom: -0.3em;
  font-family: var(--font-display);
  font-size: clamp(200px, 24vw, 340px);
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--tint-edge);
  opacity: 0.7;
  pointer-events: none;
}
app-about .fifteen__badge {
  display: grid;
  gap: 18px;
  justify-items: center;
}
app-about .fifteen__num {
  display: grid;
  justify-items: center;
  margin: 0;
  line-height: 0.85;
}
app-about .fifteen__num strong {
  font-family: var(--font-display);
  font-size: clamp(96px, 11vw, 156px);
  font-weight: 400;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ff5a5f 0%, var(--red) 60%, #a3121a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
app-about .fifteen__num span {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
}
/* the years : 2011, a track of fifteen ticks the red fills along, 2026 */
app-about .fifteen__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}
app-about .fifteen__line span:last-child {
  color: var(--red);
}
app-about .fifteen__track {
  position: relative;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(215, 26, 33, 0.35) 0 1px, transparent 1px calc(100% / 15)) center / 100% 8px no-repeat;
}
app-about .fifteen__track::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  border-radius: 2px;
  background: var(--tint-edge);
}
app-about .fifteen__track i {
  position: absolute;
  inset: 3px 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #a3121a, #ff4d53);
  transform-origin: left;
  transition: transform 1.6s 0.5s var(--ease);
}
/* (and a dot on 2026) */
app-about .fifteen__track i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 2.5px var(--red), 0 0 0 7px rgba(215, 26, 33, 0.16);
}
app-about .fifteen.reveal:not(.is-in) .fifteen__track i {
  transform: scaleX(0);
}
app-about .fifteen__body {
  display: grid;
  gap: 14px;
  justify-items: start;
}
app-about .fifteen__body .eyebrow {
  margin: 0;
}
app-about .fifteen__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
app-about .fifteen__title em {
  color: var(--red);
}
app-about .fifteen__lead {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
}
app-about .fifteen__text {
  max-width: 68ch;
  font-size: var(--ab-text);
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}
app-about .fifteen__text strong {
  font-weight: 700;
  color: var(--red);
  background: linear-gradient(transparent 64%, rgba(215, 26, 33, 0.14) 64%);
}
/* the thank you : a sign-off under a hairline */
app-about .fifteen__thanks {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
app-about .fifteen__thanks span {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  color: var(--ink);
}
app-about .fifteen__thanks small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
app-about .fifteen__thanks small::before {
  content: "\2014  ";
}
@media (prefers-reduced-motion: reduce) {
  app-about .part,
  app-about .part__icon,
  app-about .fifteen__track i {
    transition: none;
  }
  app-about .fifteen.reveal:not(.is-in) .fifteen__track i {
    transform: none;
  }
}

/* ── 2. the spaces : photo cards ───────────────────────────────────────── */
app-about .segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
/* a card : the photo, its bottom right corner cut out round the arrow (the mask of a recliner card) */
app-about .segment {
  --go: 46px;
  --bay-gap: 8px;
  --bay-r: 14px;
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  position: relative;
  display: block;
  /* (a shadow drawn round the card's own shape, the cut corner too) */
  filter: drop-shadow(0 16px 20px rgba(60, 25, 15, 0.16));
  transition: transform 0.4s var(--ease), filter 0.4s;
}
app-about .segment__card {
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}
app-about .segment__card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
/* a dark foot, so the name reads over any photo */
app-about .segment__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 11, 10, 0.55) 62%, rgba(15, 11, 10, 0.9) 100%);
}
/* the name, clear of the cut corner */
app-about .segment__body {
  position: absolute;
  left: 0;
  right: var(--n);
  bottom: 0;
  padding: clamp(16px, 2vw, 24px);
  color: #fff;
}
app-about .segment__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 500;
  line-height: 1.15;
}
app-about .segment__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
/* the round arrow, in the cut corner */
app-about .segment__go {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-about .segment__go svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  app-about .segment:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 22px 26px rgba(60, 25, 15, 0.22));
  }
  app-about .segment:hover .segment__card img {
    transform: scale(1.06);
  }
  app-about .segment:hover .segment__go {
    background: var(--red);
  }
  app-about .segment:hover .segment__go svg {
    transform: rotate(45deg);
  }
}

/* ── 4. the milestones : a panel with a notch in its top edge ──────────── */
/* The panel is two shapes of one colour : the body (::before), from the notch down and rounded at every corner, with
   two soft lights of colour in it (low and right, clear of the tab), and the raised tab on the left (::after), only as
   tall as the notch and the body's corner, whose right end slopes down to the body. The heading sits on the tab, the
   line under it on the body past the slope ; the figures are panes of frosted glass over the lights. */
app-about .numbers {
  --notch: clamp(40px, 5vw, 72px);
  --tab: 60%;
  --pad-top: clamp(24px, 2.6vw, 34px);
  --round: calc(var(--radius) + 10px);
  /* the glass of a figure */
  --glass-hi: rgba(255, 255, 255, 0.82);
  --glass-lo: rgba(255, 255, 255, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 16px 32px -26px rgba(80, 30, 20, 0.5);
  /* the lights behind it */
  --light-red: rgba(215, 26, 33, 0.16);
  --light-amber: rgba(255, 138, 92, 0.24);
  position: relative;
  isolation: isolate;
  padding: var(--pad-top) clamp(16px, 2.8vw, 40px) clamp(16px, 2.8vw, 40px);
}
/* on a grey band : a white panel (dark theme : the page's darkest, the glass smoked) */
app-about .ab-band .numbers {
  --panel: var(--surface);
}
:root[data-theme="dark"] app-about .numbers {
  --panel: var(--paper);
  --glass-hi: rgba(255, 255, 255, 0.09);
  --glass-lo: rgba(255, 255, 255, 0.03);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.8);
  --light-red: rgba(232, 38, 45, 0.22);
  --light-amber: rgba(255, 140, 80, 0.12);
}
app-about .numbers::before,
app-about .numbers::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--panel);
}
app-about .numbers::before {
  inset: var(--notch) 0 0 0;
  border-radius: var(--round);
  background: radial-gradient(420px 240px at 10% 112%, var(--light-red), transparent 70%), radial-gradient(380px 260px at 96% 22%, var(--light-amber), transparent 70%), radial-gradient(300px 200px at 58% 100%, var(--light-amber), transparent 70%), var(--panel);
}
app-about .numbers::after {
  top: 0;
  left: 0;
  width: var(--tab);
  height: calc(var(--notch) + var(--round) + 2px);
  border-top-left-radius: var(--round);
  clip-path: polygon(0 0, calc(100% - var(--notch) * 1.3) 0, 100% var(--notch), 100% 100%, 0 100%);
}

app-about .numbers__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px clamp(24px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
app-about .numbers__title {
  display: grid;
  gap: 10px;
  justify-items: start;
}

/* four to a row : six figures, then the partners across two */
app-about .numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}
/* a figure : a pane of frosted glass, its icon beside the number and its name */
app-about .stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: linear-gradient(155deg, var(--glass-hi), var(--glass-lo));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
app-about .stat__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--tint-edge);
  border-radius: 14px;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
app-about .stat__icon svg {
  width: 23px;
  height: 23px;
}
app-about .stat__text {
  display: grid;
  gap: 5px;
  min-width: 0;
}
app-about .stat__value {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* digits keep their width while the figure counts up */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
app-about .stat__label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}
/* under the pointer, as a Contact us top card : it lifts, its shadow grows, the icon turns red, the border glows */
@media (hover: hover) {
  app-about .stat:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--lift-shadow);
  }
  app-about .stat:hover .stat__icon {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }
}

/* the partners : a wide pane of red glass, their names beside the figure */
app-about .stat--partners {
  grid-column: span 2;
  grid-template-columns: auto auto minmax(0, 1fr);
  border-color: rgba(255, 255, 255, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%), linear-gradient(145deg, rgba(226, 34, 41, 0.94), rgba(150, 12, 18, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 34px -22px rgba(215, 26, 33, 0.75);
  color: #fff;
}
app-about .stat--partners .stat__icon {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
app-about .stat--partners .stat__value {
  color: #fff;
}
app-about .stat--partners .stat__label {
  color: rgba(255, 255, 255, 0.8);
}
@media (hover: hover) {
  app-about .stat--partners:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 30px 56px -28px rgba(215, 26, 33, 0.85);
  }
  app-about .stat--partners:hover .stat__icon {
    border-color: #fff;
    background: #fff;
    color: var(--red);
  }
}
/* on the red pane the light is white */
app-about .stat--partners::before {
  background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.95) 0%, rgba(255, 214, 190, 0.5) 45%, transparent 70%);
}
app-about .stat__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
app-about .stat__names li {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── 3. half and half : the brand philosophy (its paragraphs) and the award ── */
app-about .duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
app-about .philosophy {
  display: grid;
  align-content: start;
  gap: 18px;
  justify-items: start;
}
app-about .philosophy__text {
  display: grid;
  gap: 14px;
}
app-about .philosophy__text p {
  font-size: var(--ab-text);
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}
/* the first paragraph, under a red rule (the same size as the rest) */
app-about .philosophy__text p:first-child {
  padding-left: 18px;
  border-left: 2px solid var(--red);
  color: var(--ink-soft);
}

/* the award : a card as tall as the words beside it, the certificate on top, a soft red light behind it */
app-about .award {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: clamp(28px, 3.4vw, 48px);
  background: radial-gradient(110% 55% at 50% 0%, var(--tint), transparent 70%), var(--surface);
  text-align: center;
}
app-about .award .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
app-about .award .title {
  font-size: clamp(24px, 2.4vw, 30px);
}
app-about .award .ab-ctas {
  justify-content: center;
}
/* View All Awards : a trophy before the words (it tips on hover), the arrow after them */
app-about .award__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
app-about .award__ico svg {
  width: 17px;
  height: 17px;
}
app-about .award__btn:hover .award__ico svg {
  transform: rotate(-12deg) scale(1.08);
}
/* the certificate, framed and tilted ; it straightens on hover */
app-about .award__frame {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 26px 50px -30px rgba(60, 20, 10, 0.55);
  transform: rotate(-3deg);
  transition: transform 0.5s var(--ease);
}
app-about .award:hover .award__frame {
  transform: rotate(0deg) scale(1.02);
}
app-about .award__img {
  display: block;
  width: clamp(170px, 18vw, 230px);
  height: auto;
  border-radius: 8px;
}

/* ── 5. customer first ─────────────────────────────────────────────────── */
app-about .first {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
app-about .first__photo {
  margin: 0;
}
app-about .first__photo img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  object-position: 62% 40%;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 40px 70px -45px rgba(60, 20, 10, 0.55);
}
app-about .first__text {
  display: grid;
  gap: 18px;
  justify-items: start;
}
app-about .ticks {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
app-about .ticks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-about .ticks__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
app-about .ticks__mark svg {
  width: 14px;
  height: 14px;
}

/* ── 6. our reach : the words beside a map of India ────────────────────── */
app-about .reach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
app-about .reach__text {
  display: grid;
  gap: 18px;
  justify-items: start;
}
app-about .reach__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
app-about .reach__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
app-about .reach__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.3s, color 0.3s;
}
/* under the pointer, as a Contact us top card : it lifts, its shadow grows, the icon turns red, the border glows */
@media (hover: hover) {
  app-about .reach__item:hover {
    transform: translateY(-6px);
    box-shadow: var(--lift-shadow);
  }
  app-about .reach__item:hover .reach__icon {
    background: var(--red);
    color: #fff;
  }
}
app-about .reach__icon svg {
  width: 20px;
  height: 20px;
}
app-about .reach__item strong {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
}
app-about .reach__item strong + span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* the map : a pulsing pin per showroom, each one opening it on the Store page */
app-about .atlas {
  margin: 0;
  padding: clamp(16px, 2.4vw, 28px);
}
app-about .atlas svg {
  display: block;
  width: 100%;
  max-height: 560px;
  height: auto;
  overflow: visible;
}
app-about .atlas__land {
  fill: var(--land);
  stroke: var(--land-edge);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
app-about .spot__dot,
app-about .spot__ring {
  transform-box: fill-box;
  transform-origin: center;
}
app-about .spot__dot {
  fill: var(--red);
  stroke: var(--surface);
  stroke-width: 2;
  transition: transform 0.3s var(--ease);
}
app-about .spot--hub .spot__dot {
  fill: var(--ink);
  stroke: var(--red);
  stroke-width: 3;
}
app-about .spot__ring {
  fill: var(--red);
  opacity: 0;
  animation: about-ping 2.8s ease-out infinite;
}
app-about .spot:hover .spot__dot,
app-about .spot:focus-visible .spot__dot {
  transform: scale(1.5);
}
@keyframes about-ping {
  0% {
    opacity: 0.45;
    transform: scale(0.5);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-about .spot__ring {
    animation: none;
    opacity: 0.16;
  }
}
app-about .atlas__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
app-about .atlas__caption strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
app-about .atlas__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
app-about .atlas__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
app-about .atlas__key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}
app-about .atlas__key--hub {
  background: var(--ink);
  box-shadow: 0 0 0 2.5px var(--red);
}

/* ── smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  app-about .company__top,
  app-about .duo,
  app-about .first,
  app-about .reach {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the head office across the page under the words : a wide, low strip (not a tall photo), the seal inside its
     corner (the page has no room beside it) */
  app-about .company__photo img {
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-position: center 45%;
  }
  app-about .company__seal {
    --seal: 120px;
    left: 14px;
    bottom: 14px;
  }
  /* (the customer first photo the same : a wide, low strip over its words) */
  app-about .first__photo img {
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-position: 62% 35%;
  }
  app-about .segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  app-about .atlas {
    width: min(100%, 560px);
    justify-self: center;
  }
  /* the milestones : two tiles to a row, the partners across both */
  app-about .numbers {
    --tab: 74%;
  }
  app-about .numbers__head {
    grid-template-columns: minmax(0, 1fr);
  }
  app-about .numbers__title {
    max-width: 62%;
  }
  app-about .numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  app-about .company__photo img,
  app-about .first__photo img {
    aspect-ratio: 3 / 2;
  }
  app-about .company__seal {
    --seal: 96px;
    left: 10px;
    bottom: 10px;
  }
  /* the 15 years : the figure and its years above the words, in a row */
  app-about .fifteen {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  app-about .fifteen__badge {
    justify-items: start;
  }
  app-about .fifteen__num {
    grid-auto-flow: column;
    align-items: end;
    gap: 12px;
  }
  app-about .fifteen__num span {
    padding-bottom: 12px;
  }
  app-about .fifteen__line {
    max-width: 320px;
  }
  app-about .company__photo {
    --off: 12px;
  }
  app-about .company__photo::after {
    width: 84px;
    height: 84px;
  }
  app-about .company__story,
  app-about .reach__points {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the notch : shallower, the tab wider */
  app-about .numbers {
    --notch: 30px;
    --tab: 82%;
  }
  app-about .numbers__title {
    max-width: 72%;
  }
  /* a figure : the icon above the number, smaller */
  app-about .stat {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  app-about .stat__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  app-about .stat__icon svg {
    width: 19px;
    height: 19px;
  }
  app-about .stat__value {
    font-size: 22px;
  }
  app-about .stat__label {
    font-size: 12.5px;
  }
  /* the partners : the icon and the figure side by side, their names under them */
  app-about .stat--partners {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }
  app-about .stat__names {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  app-about .segments {
    gap: 10px;
  }
  app-about .segment {
    --go: 36px;
    --bay-gap: 6px;
    --bay-r: 10px;
  }
  app-about .segment__card {
    aspect-ratio: 1;
  }
  app-about .segment__body {
    padding: 12px;
  }
  app-about .segment__name {
    font-size: 16px;
  }
  app-about .segment__hint {
    font-size: 12px;
  }
  app-about .segment__go svg {
    width: 15px;
    height: 15px;
  }
  app-about .reach__text .ab-ctas .btn {
    flex: 1 1 auto;
  }
}

/* ════════ <app-blogs> ════════ */

app-blogs {
  display: block;
  background: var(--page-inner);
  /* the title colour of the journal : wine, into the brand red, into ember (each step reads on the page, 4.5:1 or more) */
  --title-from: #5a1520;
  --title-mid: #b3162a;
  --title-to: #c2410c;
  --title-ink: linear-gradient(100deg, var(--title-from) 0%, var(--title-mid) 55%, var(--title-to) 100%);
}
:root[data-theme=dark] app-blogs {
  --title-from: #ffd9cc;
  --title-mid: #ff7b72;
  --title-to: #ffb066;
}

/* ── the posts, and the sidebar beside them ───────────────────────────── */
app-blogs .journal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
}
/* the posts on the left, the sidebar on the right (as a post's page has them) */
app-blogs .journal__main {
  grid-column: 1;
  grid-row: 1;
}
app-blogs .journal__side {
  grid-column: 2;
  grid-row: 1;
}

/* three lines at most, then "…" */
app-blogs .post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── the grid ──────────────────────────────────────────────────────────── */
app-blogs .posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  scroll-margin-top: calc(var(--header-h) + 32px);
}

/* a post, as the Store's showroom cards (app-store .room) */
app-blogs .post {
  --r: 22px;
  --pad: 8px;
  --go: 42px;
  --bay-gap: 8px;
  --bay-r: 14px;
  position: relative;
  display: flex;
}
app-blogs .post__card {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
@media (hover: hover) {
  app-blogs .post:hover .post__card {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px rgba(23, 19, 18, 0.08));
  }
  app-blogs .post:hover .post__media img {
    transform: scale(1.05);
  }
}
/* the card, its bottom right corner cut out round the arrow */
app-blogs .post__front {
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  background-color: var(--surface-2);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}

app-blogs .post__media {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  border-radius: calc(var(--r) - var(--pad));
  overflow: hidden;
  background: var(--well);
}
app-blogs .post__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
/* the date, as the tag of a showroom's card */
app-blogs .post__date {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
}

app-blogs .post__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 8px 0;
}

/* the category, as the page's eyebrows : a short red dash before it */
app-blogs .post__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
app-blogs .post__cat::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* the title, in the body font as a recliner card's name ; red on hover */
app-blogs .post__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: pretty;
  transition: color 0.2s;
}
app-blogs .post:hover .post__title {
  color: var(--red);
}

/* the excerpt, set off from the title by a thin rule */
app-blogs .post .post__excerpt {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* the bottom line, beside the arrow in the cut-out corner (as a recliner card's price) : "Read article", and how
   long the post takes to read ; it keeps to the bottom, so the cards of a row end alike */
app-blogs .post .post__body {
  padding-bottom: 0;
}
app-blogs .post__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--go);
  margin-top: auto;
  padding-right: calc(var(--go) + var(--bay-gap));
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-soft);
}
app-blogs .post__read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s;
}
app-blogs .post__read::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--edge-strong);
}
app-blogs .post:hover .post__read {
  color: var(--red);
}
app-blogs .post__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--muted);
}
app-blogs .post__time svg {
  flex: none;
  width: 15px;
  height: 15px;
}

/* the round arrow in the corner cut out of the card */
app-blogs .post__bay {
  position: absolute;
  right: 0;
  bottom: 0;
}
app-blogs .post__go {
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-blogs .post__go svg {
  width: 17px;
  height: 17px;
  transition: transform 0.4s var(--ease);
}
app-blogs .post:hover .post__go {
  background: var(--red);
}
app-blogs .post:hover .post__go svg {
  transform: rotate(45deg);
}

app-blogs .journal__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 52px);
}

/* ── the pager : ‹ 1 2 3 › ─────────────────────────────────────────────── */
app-blogs .pager {
  align-items: center;
  gap: 8px;
}
app-blogs .pager[hidden] {
  display: none;
}
app-blogs .pager__nums {
  display: flex;
  align-items: center;
  gap: 8px;
}
app-blogs .pager__num,
app-blogs .pager__step {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
app-blogs .pager__step {
  padding: 0;
}
app-blogs .pager__step svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  app-blogs .pager__num:hover,
  app-blogs .pager__step:hover {
    border-color: var(--red);
    color: var(--red);
  }
}
/* the page shown, as a picked category */
app-blogs .pager__num[aria-current=page] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  cursor: default;
}
app-blogs .pager__step:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
app-blogs .pager__gap {
  min-width: 20px;
  color: var(--muted);
  text-align: center;
}

/* ── the sidebar : the newest posts, the categories ────────────────────── */
app-blogs .journal__side {
  display: grid;
  gap: 20px;
}

app-blogs .side {
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* the heading, a short red rule under it */
app-blogs .side__title {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* the title mark's bar (see "the title pattern" below) */
app-blogs .side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--title-mid), var(--title-to));
}

app-blogs .recent {
  display: grid;
  gap: 2px;
}
app-blogs .recent__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline: -8px;
  padding: 8px;
  border-radius: 14px;
  transition: background-color 0.2s;
}
app-blogs .recent__item img {
  flex: none;
  width: 76px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--well);
}
app-blogs .recent__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
/* two lines at most, then "…" */
app-blogs .recent__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-blogs .recent__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
app-blogs .recent__date svg {
  flex: none;
  width: 13px;
  height: 13px;
}
@media (hover: hover) {
  app-blogs .recent__item:hover {
    background: var(--surface);
  }
  app-blogs .recent__item:hover .recent__title {
    color: var(--red);
  }
}

app-blogs .cats {
  display: grid;
  gap: 8px;
}
/* a category : pressed, the grid shows only its posts */
app-blogs .cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
app-blogs .cat__count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: color 0.2s, background-color 0.2s;
}
@media (hover: hover) {
  app-blogs .cat:hover {
    border-color: var(--tint-edge);
    color: var(--red);
  }
}
app-blogs .cat[aria-pressed=true],
app-blogs .cat[aria-current=true] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
app-blogs .cat[aria-pressed=true] .cat__count,
app-blogs .cat[aria-current=true] .cat__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* A wide screen : three equal columns. The posts fill the first two ; the sidebar takes the third beside the first two
   rows, and under it the third row's third post (blogs.js shows one more post a page here : STEP_WIDE). */
@media (min-width: 1001px) {
  app-blogs .journal__layout--fill {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
  }
  app-blogs .journal__layout--fill .journal__main,
  app-blogs .journal__layout--fill .posts {
    display: contents;
  }
  app-blogs .journal__layout--fill .journal__side {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
  }
  app-blogs .journal__layout--fill .journal__foot {
    grid-column: 1 / -1;
  }
  app-blogs .journal__layout--fill .posts > li {
    scroll-margin-top: calc(var(--header-h) + 32px);
  }
}

/* the sidebar goes under the posts, its two boxes side by side */
@media (max-width: 1000px) {
  app-blogs .journal__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  app-blogs .journal__main,
  app-blogs .journal__side {
    grid-column: auto;
    grid-row: auto;
  }
  app-blogs .journal__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 600px) {
  app-blogs .posts,
  app-blogs .journal__side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── a post's page (pages/blogs/[slug].tsx) : the same tag, for the cards and the sidebar ── */

/* over the photo : the title, and the date and reading time under it */
app-blogs .read__head {
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
/*
 * The title pattern of a post's page, h1 to h6 : the words in the journal's colour (--title-ink, painted through the
 * letters), and a mark under them — a short bar, then a dot — narrower at each level (--mark-w, --mark-gap).
 * h1 to h3 are set in the display face, h4 to h6 in the text face, bold ; h6 in small capitals.
 */
app-blogs .read__title,
app-blogs .prose :is(h2, h3, h4, h5, h6) {
  /* as wide as its longest line, so the colour runs to its end on every title */
  width: fit-content;
  max-width: 100%;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--title-mid);
  background: var(--title-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* selected : a light tint, the coloured letters still showing through it (a solid colour would cover them, their
   colour being the title's background) */
app-blogs .read__title::selection,
app-blogs .read__title *::selection,
app-blogs .prose :is(h2, h3, h4, h5, h6)::selection,
app-blogs .prose :is(h2, h3, h4, h5, h6) *::selection {
  -webkit-text-fill-color: transparent;
  color: transparent;
  background: rgba(215, 26, 33, 0.14);
}
:root[data-theme=dark] app-blogs .read__title::selection,
:root[data-theme=dark] app-blogs .read__title *::selection,
:root[data-theme=dark] app-blogs .prose :is(h2, h3, h4, h5, h6)::selection,
:root[data-theme=dark] app-blogs .prose :is(h2, h3, h4, h5, h6) *::selection {
  background: rgba(255, 123, 114, 0.22);
}
app-blogs .read__title::after,
app-blogs .prose :is(h2, h3, h4, h5, h6)::after {
  content: "";
  display: block;
  width: var(--mark-w);
  height: 8px;
  margin-top: var(--mark-gap);
  background:
    radial-gradient(circle, var(--title-to) 3px, transparent 3.5px) right center / 8px 8px no-repeat,
    linear-gradient(90deg, var(--title-mid), var(--title-to)) left center / calc(100% - 14px) 3px no-repeat;
  border-radius: 3px;
}
/* a link in a title : the title's colour and weight, underlined */
app-blogs .prose :is(h2, h3, h4, h5, h6) a {
  font-weight: inherit;
}
@media (forced-colors: active) {
  app-blogs .read__title,
  app-blogs .prose :is(h2, h3, h4, h5, h6) {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
  app-blogs .read__title::after,
  app-blogs .prose :is(h2, h3, h4, h5, h6)::after {
    background: CanvasText;
    height: 3px;
  }
}

/* the levels : size, face, mark */
app-blogs .read__title {
  --mark-w: 64px;
  --mark-gap: 6px;
  font-size: 29px;
  line-height: 1.2;
}
app-blogs .prose h2 {
  --mark-w: 52px;
  --mark-gap: 6px;
  font-size: 27px;
}
app-blogs .prose h3 {
  --mark-w: 42px;
  --mark-gap: 5px;
  font-size: 23px;
}
app-blogs .prose h4 {
  --mark-w: 34px;
  --mark-gap: 4px;
  font-size: 20px;
}
app-blogs .prose h5 {
  --mark-w: 30px;
  --mark-gap: 4px;
  font-size: 18px;
}
app-blogs .prose h6 {
  --mark-w: 28px;
  --mark-gap: 4px;
  font-size: 16px;
}
app-blogs .read__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
app-blogs .read__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
app-blogs .read__meta svg {
  width: 16px;
  height: 16px;
  color: #ff6a6f;
}

/* the post, the sidebar on its right */
app-blogs .read__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
}
app-blogs .read__main {
  min-width: 0;
  max-width: 800px;
}
app-blogs .read__side {
  display: grid;
  gap: 20px;
}
/* the sidebar stays in view beside a long post, when the window is tall enough to show all of it */
@media (min-width: 1001px) and (min-height: 1020px) {
  app-blogs .read__side {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}

/* share the post : a row of round buttons, filled red under the pointer */
app-blogs .share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
app-blogs .share__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s;
}
app-blogs .share__btn svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  app-blogs .share__btn:hover {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    transform: translateY(-2px);
  }
}
app-blogs .share__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

app-blogs .read__photo {
  aspect-ratio: 16/7;
  margin-bottom: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--well);
}
app-blogs .read__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the text */
app-blogs .prose {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}
app-blogs .prose > * + * {
  margin-top: 18px;
}
/* the opening line, a step larger */
app-blogs .prose > p:first-child {
  color: var(--ink);
}
/* the titles in the text (their colour, mark and size : "the title pattern", above) ; the space over each, smaller
   at each level */
app-blogs .prose :is(h2, h3) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
app-blogs .prose :is(h4, h5, h6) {
  font-weight: 700;
  letter-spacing: -0.005em;
}
app-blogs .prose h6 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
app-blogs .prose h2 {
  margin-top: 46px;
}
app-blogs .prose h3 {
  margin-top: 34px;
}
app-blogs .prose :is(h4, h5, h6) {
  margin-top: 28px;
}
app-blogs .prose :is(h2, h3, h4, h5, h6) + * {
  margin-top: 14px;
}
app-blogs .prose strong {
  font-weight: 600;
  color: var(--ink);
}
app-blogs .prose a {
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(215, 26, 33, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
app-blogs .prose a:hover {
  text-decoration-color: currentColor;
}
app-blogs .prose a strong {
  color: inherit;
}
/* the lists : a red dot, or a number in a red disc (as a recliner's care steps) */
app-blogs .prose ul,
app-blogs .prose ol {
  display: grid;
  gap: 12px;
}
app-blogs .prose ul li {
  position: relative;
  padding-left: 26px;
}
app-blogs .prose ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
app-blogs .prose ol {
  counter-reset: step;
}
app-blogs .prose ol li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  counter-increment: step;
}
app-blogs .prose ol li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

/* visit a showroom : a dark card, as the banners */
app-blogs .read__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  margin-top: clamp(44px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius);
  background: radial-gradient(60% 90% at 90% 10%, rgba(255, 150, 90, 0.18), transparent 70%), radial-gradient(50% 80% at 0% 100%, rgba(215, 26, 33, 0.24), transparent 70%), var(--night);
  color: #fff;
}
app-blogs .read__cta-text {
  display: grid;
  gap: 10px;
  flex: 1 1 320px;
}
app-blogs .read__cta .eyebrow,
app-blogs .read__cta .title em {
  color: #ff6a6f;
}
app-blogs .read__cta .title {
  color: #fff;
}
app-blogs .read__cta-text > p:last-child {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
app-blogs .read__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* the older and the newer post */
app-blogs .read__pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
}
app-blogs .step {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 20px;
  border: 1px solid var(--edge-strong);
  border-radius: 18px;
  background: var(--surface);
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
app-blogs .step--next {
  grid-column: 2;
  text-align: right;
}
app-blogs .step__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
app-blogs .step--next .step__dir {
  justify-content: flex-end;
}
app-blogs .step__dir svg {
  width: 15px;
  height: 15px;
}
app-blogs .step__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color 0.2s;
}
@media (hover: hover) {
  app-blogs .step:hover {
    border-color: var(--red);
    transform: translateY(-2px);
  }
  app-blogs .step:hover .step__title {
    color: var(--red);
  }
}

/* more to read, under the post */
app-blogs .read__more {
  border-top: 1px solid var(--line);
}
app-blogs .posts--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* the sidebar goes under the post, its two boxes side by side ; two more posts, not three */
@media (max-width: 1000px) {
  app-blogs .read__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  app-blogs .read__main {
    max-width: none;
  }
  app-blogs .read__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  /* sharing, a row of its own over the two boxes */
  app-blogs .side--share {
    grid-column: 1 / -1;
  }
  app-blogs .posts--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  app-blogs .posts--three > li:nth-child(3) {
    display: none;
  }
}

@media (max-width: 600px) {
  app-blogs .read__side,
  app-blogs .posts--three,
  app-blogs .read__pager {
    grid-template-columns: minmax(0, 1fr);
  }
  app-blogs .step--next {
    grid-column: auto;
  }
  app-blogs .posts--three > li:nth-child(3) {
    display: flex;
  }
}

/* ════════ <app-contact> ════════ */
/* Contact Us : the quick ways to reach us (cards), the form beside what happens next and the head office (on a cream
   band), the self-help links, the franchise. Cards are plain : the surface colour, a hairline and a soft shadow. */

app-contact {
  --card-shadow: 0 24px 48px -36px rgba(60, 25, 15, 0.4);
  display: block;
  background: var(--page-inner);
}
:root[data-theme=dark] app-contact {
  --card-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
}

app-contact .ico-arrow {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  transition: transform 0.25s var(--ease);
}

/* the second button : an outline that darkens on hover */
app-contact .btn--outline {
  border: 1.5px solid var(--edge-strong);
  background: var(--surface);
  color: var(--ink);
}
app-contact .btn--outline:hover {
  border-color: var(--ink);
}
app-contact .btn--outline.is-copied {
  border-color: var(--ok);
  color: var(--ok);
}
app-contact .btn svg {
  flex: none;
}

/* ── 1. the quick ways to reach us ────────────────────────────────────── */
app-contact .ways {
  padding-bottom: clamp(32px, 4.5vw, 56px);
}

app-contact .ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
app-contact .ways__grid li {
  display: flex;
}

app-contact .way {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s;
}
/* the glowing border : a red-to-amber light on the border, under the pointer (--mx, --my and .is-glowing :
   sections/contact.js). Drawn as a ring over the border (the inside masked out), so it fades in and out. */
app-contact .way::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(215, 26, 33, 0.95) 0%, rgba(255, 138, 92, 0.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
app-contact .way.is-glowing::before {
  opacity: 1;
}
@media (hover: hover) {
  app-contact .way:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 56px -34px rgba(60, 25, 15, 0.5);
  }
  app-contact .way:hover .way__icon {
    background: var(--red);
    color: #fff;
  }
  app-contact .way--wa:hover .way__icon {
    background: #25d366;
  }
  app-contact .way:hover .ico-arrow {
    transform: translateX(4px);
  }
}
/* tabbed to : the card shows it (the site draws no focus rings) */
app-contact .way:has(.way__action:focus-visible) {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.16);
}

app-contact .way__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.3s, color 0.3s;
}
app-contact .way__icon svg {
  width: 23px;
  height: 23px;
}
app-contact .way--wa .way__icon {
  background: rgba(37, 211, 102, 0.12);
  color: #17a34a;
}
:root[data-theme=dark] app-contact .way--wa .way__icon {
  color: #4ade80;
}

app-contact .way__title {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
app-contact .way__note {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}
app-contact .way__value {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

app-contact .way__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  margin-top: auto;
  padding-top: 18px;
}
app-contact .way__value + .way__foot {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

app-contact .way__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--red);
}
/* the whole card follows the link */
app-contact .way__action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* copy the number : above the card's link */
app-contact .way__copy {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
app-contact .way__copy svg {
  width: 17px;
  height: 17px;
}
app-contact .way__copy:hover {
  border-color: var(--red);
  color: var(--red);
}
app-contact .way__copy:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.16);
}
app-contact .way__copy.is-copied {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}
/* a phone dials by itself : no need to copy there */
@media (hover: none) {
  app-contact .way__copy {
    display: none;
  }
}

/* ── 2. the form, what happens next, the head office ──────────────────── */
app-contact .talk {
  background: var(--cream);
  padding-block: clamp(40px, 6vw, 88px);
}

app-contact .talk__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
}

app-contact .talk__side {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

app-contact .panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
app-contact .panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.015em;
}

/* what happens next : three numbered steps on a thread */
app-contact .next__list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
app-contact .next__step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
}
app-contact .next__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: -14px;
  width: 2px;
  border-radius: 2px;
  background: var(--tint-edge);
}
app-contact .next__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
app-contact .next__title {
  margin-top: 6px;
  font-size: 15.5px;
  font-weight: 700;
}
app-contact .next__text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* the head office : the map, then the address */
app-contact .office {
  padding: 0;
  overflow: hidden;
}
app-contact .office__map {
  background: var(--sand);
}
app-contact .office__map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
}
/* dark theme : the map turned to night too (inverted, its hues turned back) */
:where([data-theme=dark]) app-contact .office__map iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.7);
}

app-contact .office__body {
  display: grid;
  gap: 12px;
  padding: 22px 24px 24px;
}
app-contact .office__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
app-contact .office__kicker svg {
  width: 16px;
  height: 16px;
}
app-contact .office__address {
  display: grid;
  gap: 2px;
  font-style: normal;
  font-size: 15px;
  color: var(--muted);
}
app-contact .office__address strong {
  font-size: 16px;
  color: var(--ink);
}
app-contact .office__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* ── 3. the self-help links ───────────────────────────────────────────── */
app-contact .shortcuts {
  padding-top: clamp(48px, 6vw, 88px);
}
app-contact .shortcuts__head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
app-contact .shortcuts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
app-contact .shortcuts__grid li {
  display: flex;
}
app-contact .shortcut {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "icon arrow" "text text";
  align-items: start;
  gap: 18px 14px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s;
}
/* the glowing border, as on the top cards (.way::before) : 2px wide, over the 1px border */
app-contact .shortcut::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(215, 26, 33, 0.95) 0%, rgba(255, 138, 92, 0.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
app-contact .shortcut.is-glowing::before {
  opacity: 1;
}
app-contact .shortcut__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-soft);
  transition: background-color 0.25s, color 0.25s;
}
app-contact .shortcut__icon svg {
  width: 22px;
  height: 22px;
}
app-contact .shortcut__text {
  grid-area: text;
  display: grid;
  gap: 3px;
  min-width: 0;
}
app-contact .shortcut__text strong {
  font-size: 15.5px;
  font-weight: 700;
}
app-contact .shortcut__text span {
  font-size: 13.5px;
  color: var(--muted);
}
app-contact .shortcut > .ico-arrow {
  grid-area: arrow;
  margin-top: 4px;
  color: var(--muted);
}
/* hovered : the same lift, shadow and red icon as the top cards */
@media (hover: hover) {
  app-contact .shortcut:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 56px -34px rgba(60, 25, 15, 0.5);
  }
  app-contact .shortcut:hover .shortcut__icon {
    background: var(--red);
    color: #fff;
  }
  app-contact .shortcut:hover > .ico-arrow {
    color: var(--red);
    transform: translateX(4px);
  }
}
/* tabbed to : as the top cards */
app-contact .shortcut:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 26, 33, 0.16);
}
app-contact .shortcut:focus-visible .shortcut__icon {
  background: var(--red);
  color: #fff;
}

/* ── 4. the franchise (components/FranchiseBand.tsx, also at the foot of About us) ──────────────────────── */
/* A dark, warm card : the living-room photo on the right fades into the card's colour (taken from the photo's own
   dark wood), the words and one button on the left. The amber is the flowers' colour. */
app-franchise-band {
  display: block;
}
app-franchise-band .franchise-band {
  padding-bottom: clamp(48px, 7vw, 96px);
}
/* on Contact us it follows the self-help links, close under them */
app-contact app-franchise-band .franchise-band {
  padding-top: 0;
}
app-franchise-band .ico-arrow {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  transition: transform 0.25s var(--ease);
}
app-franchise-band .franchise {
  --room: #1b110c;
  --amber: #f2a46e;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(280px, 25vw, 330px);
  border-radius: calc(var(--radius) + 6px);
  background: var(--room);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 44px 80px -52px rgba(40, 20, 10, 0.75);
}
:root[data-theme=dark] app-franchise-band .franchise {
  box-shadow: none;
  outline: 1px solid rgba(255, 255, 255, 0.07);
  outline-offset: -1px;
}
/* a soft amber glow behind the words */
app-franchise-band .franchise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 90% at 0% 100%, rgba(242, 164, 110, 0.16), transparent 70%);
  pointer-events: none;
}

app-franchise-band .franchise__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  width: 68%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%);
  mask-image: linear-gradient(to right, transparent 0, #000 32%);
}
app-franchise-band .franchise__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}
@media (hover: hover) {
  app-franchise-band .franchise:hover .franchise__photo img {
    transform: scale(1.06);
  }
}

app-franchise-band .franchise__text {
  display: grid;
  gap: 12px;
  justify-items: start;
  width: min(100%, 520px);
  padding: clamp(24px, 3.4vw, 44px) clamp(24px, 4.5vw, 64px);
}
app-franchise-band .franchise__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
app-franchise-band .franchise__kicker::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
app-franchise-band .franchise__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
app-franchise-band .franchise__title em {
  font-style: italic;
  color: var(--amber);
}
app-franchise-band .franchise__lead {
  max-width: 36ch;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}

/* the one button : white, with a red round arrow */
app-franchise-band .franchise__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  margin-top: 6px;
  padding: 0 6px 0 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-fixed);
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6);
  transition: background-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
app-franchise-band .franchise__btn-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transition: transform 0.3s var(--ease), background-color 0.25s;
}
app-franchise-band .franchise__btn:hover {
  background: #fff6ef;
  transform: translateY(-2px);
}
app-franchise-band .franchise__btn:hover .franchise__btn-arrow {
  background: var(--red-dark);
  transform: translateX(3px);
}
app-franchise-band .franchise__btn:hover .ico-arrow {
  transform: none;
}
app-franchise-band .franchise__btn:active {
  transform: scale(0.98);
}
app-franchise-band .franchise__btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(242, 164, 110, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  app-franchise-band .franchise__photo img {
    transition: none;
  }
}

/* ── smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  app-contact .ways__grid,
  app-contact .shortcuts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* (an odd last card takes the whole row) */
  app-contact .ways__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  app-contact .talk__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  app-contact .talk__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* tablets and phones : the franchise's photo on top, fading down into the card ; the words below */
@media (max-width: 900px) {
  app-franchise-band .franchise {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  app-franchise-band .franchise::before {
    background: radial-gradient(90% 60% at 0% 100%, rgba(242, 164, 110, 0.16), transparent 70%);
  }
  app-franchise-band .franchise__photo {
    position: relative;
    z-index: -2;
    width: 100%;
    aspect-ratio: 5/2;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  app-franchise-band .franchise__photo img {
    object-position: 42% 50%;
  }
  app-franchise-band .franchise__text {
    width: 100%;
    margin-top: -28px;
    padding: 0 clamp(22px, 5vw, 44px) clamp(26px, 5vw, 44px);
  }
}

@media (max-width: 700px) {
  app-contact .talk__side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* phones : each way a slim row — icon, name and number, a round arrow */
@media (max-width: 560px) {
  app-contact .ways__grid,
  app-contact .shortcuts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  app-contact .way {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "icon title foot" "icon value foot";
    align-items: center;
    column-gap: 14px;
    row-gap: 1px;
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
  }
  app-contact .way__icon {
    grid-area: icon;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
  app-contact .way__title {
    grid-area: title;
    align-self: end;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
  }
  app-contact .way__note {
    display: none;
  }
  app-contact .way__value {
    grid-area: value;
    align-self: start;
    margin: 0;
    font-size: 17px;
  }
  app-contact .way__foot,
  app-contact .way__value + .way__foot {
    grid-area: foot;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* the action : a round arrow (its words stay for screen readers) */
  app-contact .way__action {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tint);
    font-size: 0;
  }
  app-contact .way--wa .way__action {
    background: rgba(37, 211, 102, 0.12);
    color: #17a34a;
  }
  app-contact .way__copy {
    display: none;
  }
  app-contact .panel {
    padding: 20px;
  }
  app-contact .office {
    padding: 0;
  }
  app-contact .office__body {
    padding: 20px;
  }
  app-contact .office__ctas .btn {
    flex: 1 1 auto;
  }
  app-contact .shortcut {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon text arrow";
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }
  app-contact .shortcut > .ico-arrow {
    margin-top: 0;
  }
  app-contact .way__foot {
    min-height: 0;
  }
  app-franchise-band .franchise__btn {
    justify-content: space-between;
    width: 100%;
  }
  app-franchise-band .franchise__photo {
    aspect-ratio: 16/9;
  }
}

/* ════════ <app-store> ════════ */

app-store {
  display: block;
  background: var(--page-inner);
}

/* ── the showrooms on the map of India ────────────────────────────────── */
app-store .intro {
  padding-bottom: 0;
}

app-store .intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

app-store .intro__text {
  display: grid;
  gap: 16px;
  justify-items: start;
}
app-store .intro__text > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 54ch;
  text-wrap: pretty;
}

/* the three figures : three dark tiles, each warmed by a red glow (from a different corner), a faint ring in the
   corner ; each lifts a little when pointed at */
app-store .facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 18px;
}
app-store .facts li {
  --glow-at: 100% 0%;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding: 20px 18px 18px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background: radial-gradient(120% 90% at var(--glow-at), rgba(215, 26, 33, 0.55), transparent 60%), linear-gradient(160deg, #2a1d1a, var(--night));
  color: #fff;
  box-shadow: 0 18px 34px -26px rgba(23, 19, 18, 0.55);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
app-store .facts li:nth-child(2) {
  --glow-at: 50% 0%;
}
app-store .facts li:nth-child(3) {
  --glow-at: 0% 0%;
}
/* a faint ring in the corner of each tile */
app-store .facts li::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -38px;
  bottom: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.03);
}
@media (hover: hover) {
  app-store .facts li:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 106, 111, 0.45);
    box-shadow: 0 26px 40px -24px rgba(215, 26, 33, 0.5);
  }
  app-store .facts li:hover .facts__icon {
    background: var(--red);
    box-shadow: none;
    transform: rotate(-8deg) scale(1.06);
  }
  app-store .facts li:hover .facts__rule {
    width: 44px;
  }
}
app-store .facts__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.35s var(--ease);
}
app-store .facts__icon svg {
  width: 20px;
  height: 20px;
}
app-store .facts strong {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* a short red rule between the figure and its name, which grows when pointed at */
app-store .facts__rule {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #ff6a6f;
  transition: width 0.35s var(--ease);
}
app-store .facts__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}


/* ── the map and its list ─────────────────────────────────────────────── */

app-store .atlas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  align-items: center;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  border-radius: var(--radius);
  background: radial-gradient(70% 70% at 30% 40%, rgba(255, 150, 90, 0.18), transparent 70%), radial-gradient(50% 50% at 10% 100%, rgba(215, 26, 33, 0.22), transparent 70%), var(--night);
  color: #fff;
  box-shadow: 0 30px 60px -36px rgba(23, 19, 18, 0.55);
}

app-store .atlas__map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  align-self: stretch;
  margin: 0;
}
app-store .atlas__title {
  display: grid;
  gap: 2px;
}
app-store .atlas__title strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.2;
}
app-store .atlas__title span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
app-store .atlas__map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  overflow: visible;
}

/* what the marks of the map mean */
app-store .atlas__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
app-store .atlas__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
app-store .atlas__key {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--red);
  transform: rotate(-45deg);
}
app-store .atlas__key--hub {
  width: 14px;
  height: 14px;
  background: #1d1715;
  box-shadow: 0 0 0 2px var(--red);
}
app-store .atlas__land {
  fill: #f3ebe4;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}
app-store .atlas__routes path {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  opacity: 0.35;
  transition: opacity 0.25s, stroke-width 0.25s;
}
/* the route to the pin pointed at stands out, and runs */
app-store .atlas__routes path.is-on {
  opacity: 1;
  stroke-width: 2.6;
  animation: atlas-route 0.9s linear infinite;
}
@keyframes atlas-route {
  to {
    stroke-dashoffset: -22;
  }
}

/* the head office : a dark pin, ringed in red */
app-store .pin--hub .pin__mark {
  fill: #1d1715;
  stroke: var(--red);
  stroke-width: 2.4;
}
app-store .pin--hub .pin__dot {
  fill: var(--red);
}
app-store .pin--hub.is-on .pin__mark,
app-store .pin--hub:focus-visible .pin__mark {
  fill: #000;
}

/* the name of the pin pointed at */
app-store .atlas__tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
app-store .atlas__tip.is-on {
  opacity: 1;
}
app-store .atlas__tip rect {
  fill: #fff;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
app-store .atlas__tip text {
  fill: #1d1715;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
}

app-store .pin {
  cursor: pointer;
}
app-store .pin__mark {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 2;
  transform-origin: 0 0;
  transition: transform 0.3s var(--ease), fill 0.2s;
}
app-store .pin__dot {
  fill: #fff;
  transform-origin: 0 0;
  transition: transform 0.3s var(--ease);
}
app-store .pin__glow {
  fill: var(--red);
  opacity: 0;
  transform-origin: 0 0;
}
app-store .pin.is-on .pin__mark,
app-store .pin:focus-visible .pin__mark {
  fill: var(--red-dark);
  transform: scale(1.35);
}
app-store .pin.is-on .pin__dot,
app-store .pin:focus-visible .pin__dot {
  transform: scale(1.35);
}
app-store .pin.is-on .pin__glow {
  animation: atlas-pulse 1.4s ease-out infinite;
}
/* no focus box around a pin, clicked or tabbed to : the pin itself grows and darkens */
app-store .pin,
app-store .pin:focus,
app-store .pin:focus-visible {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
@keyframes atlas-pulse {
  from {
    transform: scale(0.4);
    opacity: 0.55;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

app-store .atlas__list {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  padding: 16px 10px 10px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
}
app-store .atlas__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 12px;
}
app-store .atlas__head strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
app-store .atlas__head span span {
  font-size: 12.5px;
  color: var(--muted);
}
app-store .atlas__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--red);
}
app-store .atlas__icon svg {
  width: 20px;
  height: 20px;
}
app-store .atlas__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

app-store .atlas__spots {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-strong) transparent;
}
app-store .spot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px 7px 7px;
  border: 1.5px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.2s, background-color 0.2s;
}
app-store .spot img {
  flex: none;
  width: 56px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--well);
}
app-store .spot__text {
  display: grid;
  flex: 1;
  min-width: 0;
}
app-store .spot__text strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
app-store .spot__text span {
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
app-store .spot svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.25s var(--ease), color 0.2s;
}
app-store .spot.is-on,
app-store .spot:focus-visible {
  border-color: var(--red);
  background: var(--tint);
}
app-store .spot.is-on svg {
  color: var(--red);
  transform: translateX(3px);
}

/* a card reached from the map */
app-store .room.is-flash .room__card {
  animation: room-flash 1.8s var(--ease);
}
@keyframes room-flash {
  0%,
  60% {
    filter: drop-shadow(0 0 2px var(--red)) drop-shadow(0 0 10px rgba(215, 26, 33, 0.45));
  }
}

/* ── the showrooms ────────────────────────────────────────────────────── */
app-store .locator__head .section-head {
  margin-bottom: 12px;
}




/* the parts of India */
app-store .locator__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 22px;
}

/* the tabs : pills in one soft tray, the chosen one red */
app-store .regions {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  background: var(--surface-2);
}
app-store .regions::-webkit-scrollbar {
  display: none;
}
app-store .regions__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
/* the location pin before the label : red on a plain tab, white on the chosen one */
app-store .regions__tab svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: -2px;
  color: var(--red);
  transition: color 0.25s;
}
app-store .regions__tab.is-on svg {
  color: currentColor;
}
app-store .regions__tab b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.25s, color 0.25s;
}
@media (hover: hover) {
  app-store .regions__tab:not(.is-on):hover {
    background: var(--surface);
    box-shadow: 0 6px 14px -10px rgba(23, 19, 18, 0.4);
  }
}
app-store .regions__tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
app-store .regions__tab.is-on {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(215, 26, 33, 0.8);
}
app-store .regions__tab.is-on b {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* a card hidden by a tab ; the ones a tab shows come in softly */
app-store .room[hidden] {
  display: none;
}
app-store .room.is-shown .room__card {
  animation: room-in 0.45s var(--ease) var(--in-delay, 0ms) both;
}
@keyframes room-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-store .room.is-shown .room__card {
    animation: none;
  }
}
@media (max-width: 599px) {
  app-store .locator__bar {
    flex-direction: column;
    align-items: stretch;
  }
  app-store .regions__tab {
    padding: 7px 8px 7px 11px;
    font-size: 13px;
  }
  app-store .regions__tab svg {
    width: 14px;
    height: 14px;
  }
}

app-store .rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* a showroom, as the Best Sellers' cards (home.css, app-products .product) */
app-store .room {
  --r: 22px;
  --pad: 8px;
  --go: 42px;
  --bay-gap: 8px;
  --bay-r: 14px;
  position: relative;
  display: flex;
  container-type: inline-size;
}
app-store .room__card {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
@media (hover: hover) {
  app-store .room:hover .room__card {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px rgba(23, 19, 18, 0.08));
  }
  app-store .room:hover .room__media img {
    transform: scale(1.05);
  }
}
/* the card, its bottom right corner cut out round the arrow button */
app-store .room__front {
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  background-color: var(--surface-2);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}

app-store .room__media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: calc(var(--r) - var(--pad));
  overflow: hidden;
  background: var(--well);
}
app-store .room__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.5s var(--ease);
}
/* a card's photo still on its way (public/js/sections/store.js) : a shimmer, then the photo fades in */
app-store .room__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%) var(--well);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
app-store .room__media.is-loading::before {
  opacity: 1;
  animation: room-shimmer 1.4s linear infinite;
}
app-store .room__media.is-loading img {
  opacity: 0;
}
app-store .room__media.is-loading .room__count,
app-store .room__media.is-loading .room__tag {
  visibility: hidden;
}
@keyframes room-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-store .room__media.is-loading::before {
    animation: none;
  }
}
/* the part of India, as the tag of a recliner's card */
app-store .room__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
}
/* how many photos, where a recliner's card has its heart */
app-store .room__count {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 11, 10, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
app-store .room__count svg {
  width: 14px;
  height: 14px;
}

app-store .room__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 8px 0;
}
app-store .room__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-store .room:hover .room__name {
  color: var(--red);
}
app-store .room__place {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
app-store .room__place svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* "Book a visit" and the call, left of the cut-out corner and as tall as it */
app-store .room__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  min-height: calc(var(--go) + var(--bay-gap) + 6px);
  padding: 6px calc(var(--go) + var(--bay-gap) + 4px) 0 0;
}
app-store .room__visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.06);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
app-store .room__visit svg {
  width: 15px;
  height: 15px;
  flex: none;
}
app-store .room__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.06);
  color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
app-store .room__icon svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  app-store .room__visit:hover,
  app-store .room__icon:hover {
    border-color: var(--tint-edge);
    background: var(--tint);
    color: var(--red);
  }
}

/* the directions, the round arrow button in the corner cut out of the card */
app-store .room__bay {
  position: absolute;
  right: 0;
  bottom: 0;
}
app-store .room__go {
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-store .room__go svg {
  width: 17px;
  height: 17px;
  transition: transform 0.4s var(--ease);
}
app-store .room:hover .room__go {
  background: var(--red);
}
app-store .room:hover .room__go svg {
  transform: rotate(45deg);
}
@media (max-width: 1279px) {
  app-store .rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ── what a visit gives ───────────────────────────────────────────────── */
/* the cream band, with soft red and warm blobs of light behind the cards for their frosted glass to blur */
app-store .perks {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
  counter-reset: perk;
}
app-store .perks::before,
app-store .perks::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
app-store .perks::before {
  left: 8%;
  bottom: -18%;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(215, 26, 33, 0.12), transparent 65%);
}
app-store .perks::after {
  right: 6%;
  top: 18%;
  width: clamp(240px, 30vw, 460px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 150, 90, 0.18), transparent 65%);
}
app-store .perks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 30px;
}
app-store .perks__head .section-head {
  margin-bottom: 0;
}
app-store .perks__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

/* a card : frosted glass, a light edge on top, its number faint in the corner ; pointed at, it lifts, its icon
   turns red and a red line runs along its foot */
app-store .perk {
  --glass: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.85);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 24px 28px;
  overflow: hidden;
  counter-increment: perk;
  border: 1px solid var(--glass-edge);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.75), var(--glass) 55%, rgba(255, 255, 255, 0.35));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -28px rgba(80, 30, 20, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
:root[data-theme="dark"] app-store .perk {
  --glass: rgba(255, 255, 255, 0.05);
  --glass-edge: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1), var(--glass) 55%, rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -28px rgba(0, 0, 0, 0.6);
}
/* its number, faint and large in the top right corner */
app-store .perk::before {
  content: counter(perk, decimal-leading-zero);
  position: absolute;
  z-index: -1;
  top: 14px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 46px;
  font-style: italic;
  line-height: 1;
  color: var(--red);
  opacity: 0.12;
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
/* the red line along its foot, drawn when pointed at */
app-store .perk::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--red), #ff8a5c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
/* the glowing border, as on Contact Us (.way::before) : a red-to-amber light under the pointer (--mx, --my and
   .is-glowing : sections/store.js). The card clips what is outside its border, so the ring lies just inside it. */
app-store .perk__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(215, 26, 33, 0.95) 0%, rgba(255, 138, 92, 0.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
app-store .perk.is-glowing .perk__glow {
  opacity: 1;
}
app-store .perk__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, var(--tint));
  box-shadow: inset 0 0 0 1px var(--tint-edge), 0 10px 20px -14px rgba(215, 26, 33, 0.6);
  color: var(--red);
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease), box-shadow 0.3s;
}
:root[data-theme="dark"] app-store .perk__icon {
  background: var(--tint);
}
app-store .perk__icon svg {
  width: 26px;
  height: 26px;
}
app-store .perk h3 {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
}
app-store .perk p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
@media (hover: hover) {
  app-store .perk:hover {
    transform: translateY(-6px);
    border-color: var(--tint-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 50px -28px rgba(215, 26, 33, 0.4);
  }
  app-store .perk:hover::before {
    opacity: 0.22;
    transform: translateY(-3px);
  }
  app-store .perk:hover::after {
    transform: scaleX(1);
  }
  app-store .perk:hover .perk__icon {
    background: var(--red);
    color: #fff;
    box-shadow: 0 12px 22px -12px rgba(215, 26, 33, 0.8);
    transform: rotate(-6deg) scale(1.05);
  }
}

/* ── a showroom's photos (and a Segments page's projects) : a full-screen lightbox ── */
/* (no box round the photo : it sits on the dark page, so a photo of any shape shows no black bars) */
:is(app-store, app-collection) .popup[data-popup="photos"] {
  padding: 0;
}
:is(app-store, app-collection) .popup[data-popup="photos"] .popup__backdrop {
  background: rgba(8, 6, 6, 0.94);
}
:is(app-store, app-collection) .popup__dialog.photos {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  --popup-close: rgba(255, 255, 255, 0.12);
  --popup-close-hover: rgba(255, 255, 255, 0.26);
  animation: photos-fade 0.25s ease-out;
}
@keyframes photos-fade {
  from {
    opacity: 0;
  }
}

:is(app-store, app-collection) .photos__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 3vw, 32px);
}
:is(app-store, app-collection) .photos__text {
  min-width: 0;
}
:is(app-store, app-collection) .photos__title {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(app-store, app-collection) .photos__count {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
:is(app-store, app-collection) .photos__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}
:is(app-store, app-collection) .photos .popup__close {
  position: static;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 24px;
}

:is(app-store, app-collection) .photos__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 clamp(16px, 6vw, 96px);
  touch-action: pan-y;
  user-select: none;
}
/* the photo as large as fits, centred, its own shape (the space round it is the stage : a click there closes) */
:is(app-store, app-collection) .photos__stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  transition: opacity 0.25s;
}
:is(app-store, app-collection) .photos__stage img.is-loading {
  opacity: 0;
}
:is(app-store, app-collection) .photos__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.2s, transform 0.2s var(--ease);
}
:is(app-store, app-collection) .photos__nav[hidden] {
  display: none;
}
:is(app-store, app-collection) .photos__nav:hover {
  background: rgba(255, 255, 255, 0.26);
}
:is(app-store, app-collection) .photos__nav:active {
  transform: translateY(-50%) scale(0.94);
}
:is(app-store, app-collection) .photos__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
:is(app-store, app-collection) .photos__nav svg {
  width: 24px;
  height: 24px;
}
/* the arrows sit in the margins beside the photo, not over it */
:is(app-store, app-collection) .photos__nav--prev {
  left: calc(-1 * clamp(16px, 6vw, 96px) + clamp(8px, 2vw, 24px));
}
:is(app-store, app-collection) .photos__nav--next {
  right: calc(-1 * clamp(16px, 6vw, 96px) + clamp(8px, 2vw, 24px));
}

:is(app-store, app-collection) .photos__thumbs {
  display: flex;
  flex: none;
  justify-content: safe center;
  gap: 10px;
  padding: 16px clamp(16px, 3vw, 32px) 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}
:is(app-store, app-collection) .photos__thumbs button {
  display: block;
  flex: none;
  width: 84px;
  height: 58px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
:is(app-store, app-collection) .photos__thumbs button:hover {
  opacity: 0.85;
}
:is(app-store, app-collection) .photos__thumbs button.is-on {
  border-color: #ff6a6f;
  opacity: 1;
}
:is(app-store, app-collection) .photos__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  app-store .intro__grid {
    grid-template-columns: 1fr;
  }
  app-store .rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  app-store .perks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── phone : one card to a row ───────────────────────────────────────── */
@media (max-width: 599px) {
  app-store .atlas {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  app-store .atlas__list {
    max-height: 340px;
  }
  app-store .rooms {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  app-store .perks__grid {
    grid-template-columns: 1fr;
  }
  app-store .perk {
    padding: 20px;
  }
  app-store .facts {
    gap: 8px;
  }
  app-store .facts li {
    padding: 16px 12px 14px;
    border-radius: 16px;
  }
  app-store .facts__label {
    font-size: 10.5px;
    letter-spacing: 0.03em;
  }
  app-store .facts__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border-radius: 10px;
  }
  app-store .facts__icon svg {
    width: 18px;
    height: 18px;
  }
  app-store .atlas__map svg {
    max-height: 360px;
  }
  /* (a phone : the photo takes the full width, the arrows sit over it, "Get directions" is its arrow alone) */
  :is(app-store, app-collection) .photos__bar {
    padding: 12px 12px 12px 16px;
  }
  :is(app-store, app-collection) .photos__title {
    font-size: 18px;
  }
  :is(app-store, app-collection) .photos__count {
    font-size: 12.5px;
  }
  :is(app-store, app-collection) .photos__actions {
    gap: 8px;
  }
  :is(app-store, app-collection) .photos__directions-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :is(app-store, app-collection) .photos__bar .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
  :is(app-store, app-collection) .photos__stage {
    margin: 0;
  }
  :is(app-store, app-collection) .photos__nav {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.42);
  }
  :is(app-store, app-collection) .photos__nav--prev {
    left: 8px;
  }
  :is(app-store, app-collection) .photos__nav--next {
    right: 8px;
  }
  :is(app-store, app-collection) .photos__thumbs {
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 12px 16px;
  }
  :is(app-store, app-collection) .photos__thumbs button {
    width: 64px;
    height: 46px;
  }
}

/* ════════ <app-collection> ════════ */

app-collection {
  display: block;
}

/* the home page's Best Sellers sit on white, apart from the sections either side */
app-collection .products {
  background: var(--surface);
}

app-collection .products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 30px;
}
app-collection .products__head .section-head {
  margin-bottom: 0;
}

app-collection .rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px) clamp(14px, 1.8vw, 24px);
}

app-collection {
  /* The card: soft, the picture inset in it, the name and price under the picture, and the bottom */
  /* right corner cut out for the arrow button. The shadow is drawn round the card's own shape, the */
  /* cut-out corner included. */
  /* The bottom right corner is cut out of the card for the arrow button, so whatever is behind the */
  /* card shows round it. The mask is the card less that corner: a square of --n with its top left */
  /* rounded by --nr, the button's centre as the centre, and its two ends rounded off by --bay-r */
  /* where they meet the card's edges. */
  /* the label on the picture's top left corner */
  /* the words keep to the left of the cut-out corner, however long the name */
  /* two lines at most, and room for two whatever its length (the names and blurbs line up across a row) */
  /* the same: two lines, no more, and room for two */
  /* the price keeps to the left of the cut-out corner, and is as tall as it */
  /* how much is saved, after the struck-out price */
  /* the arrow button, in the corner cut out of the card */
  /* the heart, on the picture's top right corner; it rises with the card */
  /* the price line needs a card about 280px wide: three across below 1280px, two below 1000px */
  /* phones: one card to a row, the width of the page */
  /* ── help in choosing ──────────────────────────────────────────────────── */
}
app-collection .product {
  --r: 22px;
  --pad: 8px;
  --go: 42px;
  --bay-gap: 8px;
  --bay-r: 14px;
  position: relative;
  display: flex;
  container-type: inline-size;
}
app-collection .product__link {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
@media (hover: hover) {
  app-collection .product__link:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px rgba(23, 19, 18, 0.08));
  }
}
app-collection .product__front {
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  background-color: var(--surface-2);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}
app-collection .product__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--r) - var(--pad));
  overflow: hidden;
  background: var(--sand);
}
app-collection .product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
app-collection .product__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
}
app-collection .product__tag--bestseller {
  background: #e8692e;
}
app-collection .product__tag--new {
  background: #1f8a5b;
}
app-collection .product__tag--offer {
  background: var(--red);
}
app-collection .product__foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 8px 0;
}
app-collection .product__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-collection .product:hover .product__name {
  color: var(--red);
}
app-collection .product__blurb {
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
app-collection .product__price {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: min(6px, 2cqi);
  white-space: nowrap;
  margin-top: auto;
  min-height: calc(var(--go) + var(--bay-gap));
  padding-right: calc(var(--go) + var(--bay-gap) + 4px);
}
app-collection .product__price strong {
  font-size: min(18px, 6.2cqi);
  font-weight: 700;
  letter-spacing: -0.01em;
}
app-collection .product__price s {
  font-size: min(12px, 4.2cqi);
  color: var(--muted);
}
app-collection .product__save {
  font-size: min(12px, 4.2cqi);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ok);
}
app-collection .product__bay {
  position: absolute;
  right: 0;
  bottom: 0;
}
app-collection .product > app-like {
  position: absolute;
  top: calc(var(--pad) + 10px);
  right: calc(var(--pad) + 10px);
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  app-collection .product:hover > app-like {
    transform: translateY(-4px);
  }
}
app-collection .product__go {
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-collection .product__go svg {
  width: 17px;
  height: 17px;
  transition: transform 0.4s var(--ease);
}
app-collection .product:hover .product__go {
  background: var(--red);
}
app-collection .product:hover .product__go svg {
  transform: rotate(45deg);
}
@media (max-width: 1279px) {
  app-collection .rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  app-collection .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  app-collection .rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
app-collection {
  display: block;
  background: var(--page-inner);
}
app-collection .help {
  padding-top: 0;
}
app-collection .help__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(60% 90% at 100% 0%, rgba(255, 150, 90, 0.18), transparent 70%), var(--night);
  color: #fff;
}
app-collection .help__card .eyebrow,
app-collection .help__card .title em {
  color: #ff6a6f;
}
app-collection .help__card .lead {
  color: rgba(255, 255, 255, 0.72);
}
app-collection .help__text {
  display: grid;
  gap: 16px;
  flex: 1 1 420px;
}
app-collection .help__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 480px) {
  app-collection .help__ctas .btn {
    flex: 1;
  }
}

/* ── the sections after the first follow on without a second gap ─────────── */
app-collection .faqs,
app-collection .perks,
app-collection .projects,
app-collection .clients {
  padding-top: 0;
}

/* ── the questions people ask: the heading on the left, the answers on the right ── */
app-collection .faqs__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
app-collection .faq {
  border-bottom: 1px solid var(--line);
}
app-collection .faq:first-of-type {
  border-top: 1px solid var(--line);
}
app-collection .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
app-collection .faq summary::-webkit-details-marker {
  display: none;
}
app-collection .faq summary:hover {
  color: var(--red);
}
app-collection .faq p {
  padding: 0 40px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
app-collection .faq__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
app-collection .faq__icon::before,
app-collection .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
app-collection .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
app-collection .faq[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ── Multiplex: what makes the recliners right for a hall, four cards in a row ── */
app-collection .perks__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
app-collection .perk {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 20px;
  background: var(--surface-2);
}
app-collection .perk__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
}
app-collection .perk__icon svg {
  width: 22px;
  height: 22px;
}
app-collection .perk__title {
  font-size: 17px;
  font-weight: 700;
}
app-collection .perk__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Massage Chair: the chairs to come, the photo beside what they do ───── */
app-collection .soon__card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(24px, 4vw, 56px);
  border-radius: calc(var(--radius) + 6px);
  background: var(--well);
}
app-collection .soon__pic {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
app-collection .soon__pic img {
  display: block;
  width: 100%;
  height: auto;
}
app-collection .soon__text {
  display: grid;
  gap: 22px;
  justify-items: start;
}
app-collection .soon__text .section-head {
  margin-bottom: 0;
}
app-collection .soon__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
app-collection .soon__points li {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
}
app-collection .soon__points strong {
  font-size: 15px;
}
app-collection .soon__points span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Segments: what we make for them beside a photo, their projects, their clients ── */
app-collection .intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
app-collection .intro__text {
  display: grid;
  gap: 16px;
  justify-items: start;
}
app-collection .intro__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
app-collection .intro__para {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
app-collection .intro__text .btn {
  margin-top: 8px;
}
app-collection .intro__pic {
  margin: 0;
  aspect-ratio: 920/596;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}
app-collection .intro__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
app-collection .projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
app-collection .projects__item {
  aspect-ratio: 3/2;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sand);
}
app-collection .projects__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
/* (no photo left alone on a row: four in two columns, five with the first one twice as tall) */
app-collection .projects__grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
app-collection .projects__grid[data-count="5"] .projects__item:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}
/* a photo opens the lightbox : a soft shade and an "expand" badge on hover */
app-collection .projects__open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: zoom-in;
}
app-collection .projects__open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 11, 10, 0.45));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
app-collection .projects__open:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -3px;
}
app-collection .projects__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--red);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}
app-collection .projects__zoom svg {
  width: 18px;
  height: 18px;
}
app-collection .projects__open:focus-visible .projects__zoom {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  app-collection .projects__item:hover img {
    transform: scale(1.04);
  }
  app-collection .projects__open:hover::after {
    opacity: 1;
  }
  app-collection .projects__open:hover .projects__zoom {
    opacity: 1;
    transform: none;
  }
}
/* (a touch screen has no hover : the badge stays, smaller, so the photos read as tappable) */
@media (hover: none) {
  app-collection .projects__zoom {
    width: 34px;
    height: 34px;
    opacity: 0.92;
    transform: none;
  }
}
/* the clients : the heading centred over the logos, centred too */
app-collection .clients__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  text-align: center;
}
app-collection .clients__inner .section-head {
  justify-items: center;
  margin-bottom: 0;
}
/* (centred, the eyebrow takes its line on both sides) */
app-collection .clients__inner .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
app-collection .clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* (the logos are on white : their tiles stay white in either theme) */
app-collection .clients__item {
  display: grid;
  place-items: center;
  width: 168px;
  height: 92px;
  padding: 12px 18px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: #fff;
}
/* (a tall logo stays inside its tile : 92 px less the padding) */
app-collection .clients__item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 68px;
  object-fit: contain;
}

@media (max-width: 1000px) {
  app-collection .perks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  app-collection .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  app-collection .faqs__inner,
  app-collection .soon__card,
  app-collection .intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  app-collection .soon__pic {
    max-width: 420px;
  }
}
@media (max-width: 560px) {
  app-collection .perks__list,
  app-collection .projects__grid,
  app-collection .soon__points {
    grid-template-columns: minmax(0, 1fr);
  }
  app-collection .clients__item {
    width: calc(50% - 7px);
  }
  app-collection .projects__grid[data-count="5"] .projects__item:first-child {
    grid-row: auto;
    aspect-ratio: 3/2;
  }
}

/* ════════ <app-recliner-grid> ════════ */

app-recliner-grid {
  display: block;
}

/* the home page's Best Sellers sit on white, apart from the sections either side */
app-recliner-grid .products {
  background: var(--surface);
}

app-recliner-grid .products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 30px;
}
app-recliner-grid .products__head .section-head {
  margin-bottom: 0;
}

app-recliner-grid .rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px) clamp(14px, 1.8vw, 24px);
}

app-recliner-grid {
  /* The card: soft, the picture inset in it, the name and price under the picture, and the bottom */
  /* right corner cut out for the arrow button. The shadow is drawn round the card's own shape, the */
  /* cut-out corner included. */
  /* The bottom right corner is cut out of the card for the arrow button, so whatever is behind the */
  /* card shows round it. The mask is the card less that corner: a square of --n with its top left */
  /* rounded by --nr, the button's centre as the centre, and its two ends rounded off by --bay-r */
  /* where they meet the card's edges. */
  /* the label on the picture's top left corner */
  /* the words keep to the left of the cut-out corner, however long the name */
  /* two lines at most, and room for two whatever its length (the names and blurbs line up across a row) */
  /* the same: two lines, no more, and room for two */
  /* the price keeps to the left of the cut-out corner, and is as tall as it */
  /* how much is saved, after the struck-out price */
  /* the arrow button, in the corner cut out of the card */
  /* the heart, on the picture's top right corner; it rises with the card */
  /* the price line needs a card about 280px wide: three across below 1280px, two below 1000px */
  /* phones: one card to a row, the width of the page */
  /* ── filter and sort ───────────────────────────────────────────────────── */
  /* the button that opens the filter panel, with how many filters are on */
  /* the sort dropdown: a pill like the chips, and the list of orders under it */
  /* ── the filter panel ──────────────────────────────────────────────────── */
  /* one track, the stretch between the handles filled in red; the two sliders lie on top of each */
  /* other and only their handles take the pointer */
}
app-recliner-grid .product {
  --r: 22px;
  --pad: 8px;
  --go: 42px;
  --bay-gap: 8px;
  --bay-r: 14px;
  position: relative;
  display: flex;
  container-type: inline-size;
}
app-recliner-grid .product__link {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
@media (hover: hover) {
  app-recliner-grid .product__link:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px rgba(23, 19, 18, 0.08));
  }
}
app-recliner-grid .product__front {
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  background-color: var(--surface-2);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}
app-recliner-grid .product__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--r) - var(--pad));
  overflow: hidden;
  background: var(--sand);
}
app-recliner-grid .product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease);
}
/* a card's photo still on its way (public/js/sections/grid.js) : a shimmer, then the photo fades in */
app-recliner-grid .product__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%) var(--sand);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
app-recliner-grid .product__media.is-loading::before {
  opacity: 1;
  animation: room-shimmer 1.4s linear infinite;
}
app-recliner-grid .product__media.is-loading img {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  app-recliner-grid .product__media.is-loading::before {
    animation: none;
  }
}
app-recliner-grid .product__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
}
app-recliner-grid .product__tag--bestseller {
  background: #e8692e;
}
app-recliner-grid .product__tag--new {
  background: #1f8a5b;
}
app-recliner-grid .product__tag--offer {
  background: var(--red);
}
app-recliner-grid .product__foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 8px 0;
}
app-recliner-grid .product__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-recliner-grid .product:hover .product__name {
  color: var(--red);
}
app-recliner-grid .product__blurb {
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
app-recliner-grid .product__price {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: min(6px, 2cqi);
  white-space: nowrap;
  margin-top: auto;
  min-height: calc(var(--go) + var(--bay-gap));
  padding-right: calc(var(--go) + var(--bay-gap) + 4px);
}
app-recliner-grid .product__price strong {
  font-size: min(18px, 6.2cqi);
  font-weight: 700;
  letter-spacing: -0.01em;
}
app-recliner-grid .product__price s {
  font-size: min(12px, 4.2cqi);
  color: var(--muted);
}
app-recliner-grid .product__save {
  font-size: min(12px, 4.2cqi);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ok);
}
app-recliner-grid .product__bay {
  position: absolute;
  right: 0;
  bottom: 0;
}
app-recliner-grid .product > app-like {
  position: absolute;
  top: calc(var(--pad) + 10px);
  right: calc(var(--pad) + 10px);
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  app-recliner-grid .product:hover > app-like {
    transform: translateY(-4px);
  }
}
app-recliner-grid .product__go {
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-recliner-grid .product__go svg {
  width: 17px;
  height: 17px;
  transition: transform 0.4s var(--ease);
}
app-recliner-grid .product:hover .product__go {
  background: var(--red);
}
app-recliner-grid .product:hover .product__go svg {
  transform: rotate(45deg);
}
@media (max-width: 1279px) {
  app-recliner-grid .rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  app-recliner-grid .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  app-recliner-grid .rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
app-recliner-grid {
  display: block;
}
app-recliner-grid .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
app-recliner-grid .chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
app-recliner-grid .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s;
}
app-recliner-grid .filter-btn svg {
  width: 17px;
  height: 17px;
}
app-recliner-grid .filter-btn:hover {
  background: var(--red);
}
app-recliner-grid .filter-btn__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
app-recliner-grid .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
app-recliner-grid .chip svg {
  width: 13px;
  height: 13px;
}
app-recliner-grid .chip:hover {
  border-color: var(--red);
  color: var(--red);
}
app-recliner-grid .chip.is-on {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
app-recliner-grid .chip.is-on:hover {
  background: #b9151b;
}
app-recliner-grid .clear {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
app-recliner-grid .sort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 6px;
  font-size: 14px;
  color: var(--muted);
}
app-recliner-grid .dd {
  position: relative;
}
app-recliner-grid .dd__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 190px;
  min-height: 40px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s;
}
app-recliner-grid .dd__btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}
app-recliner-grid .dd__btn:hover, app-recliner-grid .dd__btn.is-open {
  border-color: var(--ink);
}
app-recliner-grid .dd__btn.is-open svg {
  transform: rotate(180deg);
}
app-recliner-grid .dd__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px -16px rgba(23, 19, 18, 0.3);
  list-style: none;
  outline: none;
  animation: app-recliner-grid--dd-in 0.18s var(--ease);
}
app-recliner-grid .dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  /* the option the arrow keys (or the pointer) are on */
}
app-recliner-grid .dd__opt svg {
  flex: none;
  width: 16px;
  height: 16px;
}
app-recliner-grid .dd__opt.is-active {
  background: var(--paper);
}
app-recliner-grid .dd__opt.is-on {
  font-weight: 700;
  color: var(--red);
}
@keyframes app-recliner-grid--dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
/* how many are shown, on the toolbar's left */
/* how many are on show: a recliner in a soft red disc, then the line, its number in red (it pops as it changes) */
app-recliner-grid .count {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
app-recliner-grid .count__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tint-edge);
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
}
app-recliner-grid .count__icon svg {
  width: 20px;
  height: 20px;
}
app-recliner-grid .count__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
app-recliner-grid .count__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
app-recliner-grid .count__sub {
  font-size: 12.5px;
  color: var(--muted);
}
app-recliner-grid .count__num {
  display: inline-block;
  font-weight: 800;
  color: var(--red);
}
app-recliner-grid .count__num.is-bump {
  animation: app-recliner-grid--bump 0.4s var(--ease);
}
@keyframes app-recliner-grid--bump {
  40% {
    transform: scale(1.35);
  }
}
app-recliner-grid .sort__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
app-recliner-grid .sort__label svg {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: reduce) {
  app-recliner-grid .count__num.is-bump {
    animation: none;
  }
}
/* grid or list: two icon buttons in one pill, the one on filled in */
app-recliner-grid .views {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
app-recliner-grid .views__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border-radius: 999px;
  color: var(--muted);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
app-recliner-grid .views__btn svg {
  width: 18px;
  height: 18px;
}
app-recliner-grid .views__btn:hover {
  color: var(--ink);
}
app-recliner-grid .views__btn.is-on {
  background: var(--surface);
  color: var(--red);
  box-shadow: 0 2px 8px -3px rgba(23, 19, 18, 0.25);
}
app-recliner-grid .views + .sort {
  margin-left: -8px;
}

/* the list: a card to a row, its photo on the left and the words beside it */
app-recliner-grid .rail.is-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
app-recliner-grid .rail.is-list .product {
  --media-w: clamp(150px, 24%, 220px);
}
app-recliner-grid .rail.is-list .product__front {
  flex-direction: row;
  align-items: stretch;
  padding: var(--pad);
}
/* (not square here: the photo is as tall as the words beside it, a wide landscape) */
app-recliner-grid .rail.is-list .product__media {
  flex: none;
  width: var(--media-w);
  aspect-ratio: auto;
  min-height: 140px;
}
/* (laid over the box, so the square photo does not make the row taller) */
app-recliner-grid .rail.is-list .product__media img {
  position: absolute;
  inset: 0;
}
app-recliner-grid .rail.is-list .product__foot {
  min-width: 0;
  padding: 10px 8px 0 22px;
}
app-recliner-grid .rail.is-list .product__name {
  white-space: normal;
  font-size: 19px;
}
app-recliner-grid .rail.is-list .product__blurb {
  min-height: 0;
  -webkit-line-clamp: 3;
  max-width: 60ch;
  font-size: 14px;
}
app-recliner-grid .rail.is-list .product__price {
  min-height: var(--go);
}
app-recliner-grid .rail.is-list .product__price strong {
  font-size: 20px;
}
app-recliner-grid .rail.is-list .product__price s,
app-recliner-grid .rail.is-list .product__save {
  font-size: 12.5px;
}
/* the heart stays on the photo's top right corner */
app-recliner-grid .rail.is-list .product > app-like {
  right: auto;
  left: calc(var(--pad) + var(--media-w) - 46px);
}
@media (max-width: 639px) {
  app-recliner-grid .rail.is-list .product {
    --media-w: 110px;
  }
  app-recliner-grid .rail.is-list .product__media {
    min-height: 110px;
  }
  app-recliner-grid .rail.is-list .product__foot {
    padding: 4px 4px 0 14px;
  }
  app-recliner-grid .rail.is-list .product__name {
    font-size: 15px;
  }
  app-recliner-grid .rail.is-list .product__blurb {
    -webkit-line-clamp: 2;
    font-size: 12.5px;
  }
  app-recliner-grid .rail.is-list .product__price strong {
    font-size: 16px;
  }
  app-recliner-grid .rail.is-list .product__tag {
    left: 6px;
    top: 6px;
    padding: 4px 7px;
    font-size: 10.5px;
  }
}

/* the row of chips under the toolbar: the Filters button (smaller screens) and the filters chosen */
app-recliner-grid .toolbar + .chips {
  margin-top: 14px;
}
app-recliner-grid .rail {
  margin-top: clamp(20px, 2.6vw, 28px);
}
app-recliner-grid .empty {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}
app-recliner-grid .empty button {
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
}
@media (max-width: 900px) {
  app-recliner-grid .toolbar {
    border-radius: 22px;
  }
}
@media (max-width: 560px) {
  app-recliner-grid {
    /* sorting gets a row of its own */
  }
  app-recliner-grid .sort {
    width: 100%;
    justify-content: space-between;
    padding: 0 4px;
  }
  app-recliner-grid .dd__btn {
    min-width: 0;
  }
}
app-recliner-grid .drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8, 5, 5, 0.5);
  animation: app-recliner-grid--fade 0.25s ease-out;
}
/* the filters: a panel sliding in from the right, opened by the Filters button (below 1200px) */
app-recliner-grid .drawer {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
@media (max-width: 1199px) {
  app-recliner-grid .drawer {
    display: none;
  }
  app-recliner-grid .drawer.is-open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 121;
    display: flex;
    width: min(400px, 100%);
    box-shadow: -20px 0 60px -20px rgba(8, 5, 5, 0.35);
    animation: app-recliner-grid--slide-in 0.35s var(--ease);
  }
}
/* the head: the sliders in a soft red disc (with how many filters are on), "Filters" and a line under it — as the
   toolbar's count beside it, and as tall */
app-recliner-grid .drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--tint) 0%, var(--surface) 100%);
}
app-recliner-grid .drawer__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tint-edge);
  border-radius: 50%;
  background: var(--surface);
  color: var(--red);
}
app-recliner-grid .drawer__icon svg {
  width: 20px;
  height: 20px;
}
app-recliner-grid .drawer__badge {
  position: absolute;
  top: -4px;
  right: -6px;
  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: 10.5px;
  font-weight: 800;
  line-height: 1;
}
app-recliner-grid .drawer__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
  line-height: 1.25;
}
app-recliner-grid .drawer__title {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
app-recliner-grid .drawer__sub {
  font-size: 12.5px;
  color: var(--muted);
}
/* "Clear all" by the title, once a filter is on (the sidebar: the panel has its own at the foot) */
app-recliner-grid .drawer__reset {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--tint-edge);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
app-recliner-grid .drawer__reset svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s var(--ease);
}
app-recliner-grid .drawer__reset:hover:not(:disabled) {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
app-recliner-grid .drawer__reset:hover:not(:disabled) svg {
  transform: rotate(-90deg);
}
/* nothing to reset yet */
app-recliner-grid .drawer__reset:disabled {
  border-color: var(--line);
  color: var(--muted);
  opacity: 0.6;
  cursor: default;
}
app-recliner-grid .drawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: background-color 0.2s, color 0.2s;
}
app-recliner-grid .drawer__close svg {
  width: 18px;
  height: 18px;
}
app-recliner-grid .drawer__close:hover {
  background: var(--red);
  color: #fff;
}
app-recliner-grid .drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 8px;
}
/* a part of the filters: a small capitalised title that folds it away, then its controls */
app-recliner-grid .group + .group {
  border-top: 1px solid var(--line);
}
app-recliner-grid .group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
app-recliner-grid .group__toggle svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: rotate(180deg);
  transition: transform 0.25s var(--ease);
}
app-recliner-grid .group__toggle[aria-expanded=false] svg {
  transform: none;
}
app-recliner-grid .group__toggle:hover {
  color: var(--red);
}
app-recliner-grid .group__body {
  padding-bottom: 18px;
}
/* the tick boxes, each with how many chairs it has */
app-recliner-grid .checks {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
app-recliner-grid .check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
app-recliner-grid .check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}
app-recliner-grid .check:hover .check__label {
  color: var(--ink);
}
app-recliner-grid .check input:checked + .check__label {
  font-weight: 600;
  color: var(--ink);
}
app-recliner-grid .check__count {
  margin-left: auto;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}
/* the Min and Max lists under the slider */
app-recliner-grid .minmax {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
app-recliner-grid .minmax__to {
  font-size: 13px;
  color: var(--muted);
}
/* the Min and Max dropdowns: the Sort by dropdown, as wide as their column, the list under its own button */
app-recliner-grid .minmax .dd__btn {
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 0 10px 0 14px;
  font-size: 13px;
}
app-recliner-grid .minmax .dd__btn svg {
  width: 14px;
  height: 14px;
}
app-recliner-grid .minmax .dd__btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
app-recliner-grid .minmax .dd__list {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
app-recliner-grid .minmax .dd--min .dd__list {
  left: 0;
  right: auto;
}
app-recliner-grid .range {
  position: relative;
  height: 32px;
  margin: 0 9px 12px;
}
app-recliner-grid .range::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--line) var(--lo), var(--red) var(--lo) var(--hi), var(--line) var(--hi));
  transform: translateY(-50%);
}
app-recliner-grid .range input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}
app-recliner-grid .range input::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--red);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 19, 18, 0.25);
  appearance: none;
  cursor: grab;
  pointer-events: auto;
}
app-recliner-grid .range input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--red);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 19, 18, 0.25);
  cursor: grab;
  pointer-events: auto;
}
app-recliner-grid .range input::-moz-range-track {
  background: none;
}
app-recliner-grid .range input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
app-recliner-grid .drawer__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
app-recliner-grid .drawer__foot .btn:disabled {
  opacity: 0.4;
  cursor: default;
}
app-recliner-grid .drawer__clear {
  border: 1.5px solid var(--line);
  color: var(--ink);
}
app-recliner-grid .drawer__clear:hover:not(:disabled) {
  border-color: var(--ink);
}
/* ── wide screens: the filters as a sidebar on the left, the cards in three columns on the right ── */
app-recliner-grid .main {
  min-width: 0;
}
@media (min-width: 1200px) {
  app-recliner-grid .layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  app-recliner-grid .rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* (always there: no button to open it, none to close it ; its Clear all by the title) */
  app-recliner-grid .filter-btn,
  app-recliner-grid .drawer__close,
  app-recliner-grid .drawer__foot,
  app-recliner-grid .chips.is-empty {
    display: none;
  }
  app-recliner-grid .drawer {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    max-height: calc(100vh - var(--header-h) - 56px);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
  }
  app-recliner-grid .drawer__body {
    padding: 0 22px 4px;
  }
}
@keyframes app-recliner-grid--slide-in {
  from {
    transform: translateX(100%);
  }
}
@keyframes app-recliner-grid--fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-recliner-grid .dd__list,
  app-recliner-grid .drawer,
  app-recliner-grid .drawer-backdrop {
    animation: none;
  }
}

/* a chair littlenap.in gives no price: the price line says so, in the same place */
app-recliner-grid .product__ask {
  font-size: min(13px, 4.6cqi);
  font-weight: 600;
  color: var(--muted);
}

/* a plain grid (a few chairs, no filters): no sidebar, four across on wide screens */
@media (min-width: 1200px) {
  app-recliner-grid .layout.is-plain {
    display: block;
  }
  app-recliner-grid .layout.is-plain .rail:not(.is-list) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ════════ <app-product> ════════ */

app-product {
  display: block;
}

/* the home page's Best Sellers sit on white, apart from the sections either side */
app-product .products {
  background: var(--surface);
}

app-product .products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 30px;
}
app-product .products__head .section-head {
  margin-bottom: 0;
}

app-product .rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px) clamp(14px, 1.8vw, 24px);
}

app-product {
  /* The card: soft, the picture inset in it, the name and price under the picture, and the bottom */
  /* right corner cut out for the arrow button. The shadow is drawn round the card's own shape, the */
  /* cut-out corner included. */
  /* The bottom right corner is cut out of the card for the arrow button, so whatever is behind the */
  /* card shows round it. The mask is the card less that corner: a square of --n with its top left */
  /* rounded by --nr, the button's centre as the centre, and its two ends rounded off by --bay-r */
  /* where they meet the card's edges. */
  /* the label on the picture's top left corner */
  /* the words keep to the left of the cut-out corner, however long the name */
  /* two lines at most, and room for two whatever its length (the names and blurbs line up across a row) */
  /* the same: two lines, no more, and room for two */
  /* the price keeps to the left of the cut-out corner, and is as tall as it */
  /* how much is saved, after the struck-out price */
  /* the arrow button, in the corner cut out of the card */
  /* the heart, on the picture's top right corner; it rises with the card */
  /* the price line needs a card about 280px wide: three across below 1280px, two below 1000px */
  /* phones: one card to a row, the width of the page */
  /* ── the first view ────────────────────────────────────────────────────── */
  /* (the floating header is taller than --header-h with the gap above it) */
  /* the pictures on the left (the larger share), the choices on the right */
  /* ── the pictures ──────────────────────────────────────────────────────── */
  /* every picture of the colour stacked, the chosen one faded in */
  /* ── the name, price and choices ───────────────────────────────────────── */
  /* each choice: a label with what is chosen, then its options */
  /* a round of the colour, ringed when chosen */
  /* ── the figures ───────────────────────────────────────────────────────── */
  /* ── about and specifications ──────────────────────────────────────────── */
  /* ── care and FAQs ─────────────────────────────────────────────────────── */
  /* numbered, the number in a red round */
  /* a plus in a ring, a minus once open */
  /* ── similar recliners ─────────────────────────────────────────────────── */
  /* ── smaller screens ───────────────────────────────────────────────────── */
}
app-product .product {
  --r: 22px;
  --pad: 8px;
  --go: 42px;
  --bay-gap: 8px;
  --bay-r: 14px;
  position: relative;
  display: flex;
  container-type: inline-size;
}
app-product .product__link {
  position: relative;
  display: flex;
  width: 100%;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
@media (hover: hover) {
  app-product .product__link:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px rgba(23, 19, 18, 0.08));
  }
}
app-product .product__front {
  --n: calc(var(--go) + var(--bay-gap));
  --nr: calc(var(--go) / 2 + var(--bay-gap));
  --solid: linear-gradient(#000 0 0);
  --end: radial-gradient(circle at 0 0, #000 calc(var(--bay-r) - 0.5px), transparent var(--bay-r));
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--r);
  background-color: var(--surface-2);
  mask: var(--solid) 0 0/100% calc(100% - var(--n) - var(--bay-r)) no-repeat, var(--solid) 0 0/calc(100% - var(--n) - var(--bay-r)) 100% no-repeat, var(--solid) right var(--bay-r) bottom var(--n)/var(--n) var(--bay-r) no-repeat, var(--end) right 0 bottom var(--n)/var(--bay-r) var(--bay-r) no-repeat, var(--solid) right var(--n) bottom var(--bay-r)/var(--bay-r) calc(var(--n) - var(--bay-r)) no-repeat, var(--end) right var(--n) bottom 0/var(--bay-r) var(--bay-r) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--nr) - 0.5px), #000 var(--nr)) right calc(var(--go) / 2) bottom calc(var(--go) / 2)/var(--nr) var(--nr) no-repeat;
}
app-product .product__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--r) - var(--pad));
  overflow: hidden;
  background: var(--sand);
}
app-product .product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
app-product .product__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px -4px rgba(15, 11, 10, 0.35);
}
app-product .product__tag--bestseller {
  background: #e8692e;
}
app-product .product__tag--new {
  background: #1f8a5b;
}
app-product .product__tag--offer {
  background: var(--red);
}
app-product .product__foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 8px 0;
}
app-product .product__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-product .product:hover .product__name {
  color: var(--red);
}
app-product .product__blurb {
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
app-product .product__price {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: min(6px, 2cqi);
  white-space: nowrap;
  margin-top: auto;
  min-height: calc(var(--go) + var(--bay-gap));
  padding-right: calc(var(--go) + var(--bay-gap) + 4px);
}
app-product .product__price strong {
  font-size: min(18px, 6.2cqi);
  font-weight: 700;
  letter-spacing: -0.01em;
}
app-product .product__price s {
  font-size: min(12px, 4.2cqi);
  color: var(--muted);
}
app-product .product__save {
  font-size: min(12px, 4.2cqi);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ok);
}
app-product .product__bay {
  position: absolute;
  right: 0;
  bottom: 0;
}
app-product .product > app-like {
  position: absolute;
  top: calc(var(--pad) + 10px);
  right: calc(var(--pad) + 10px);
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  app-product .product:hover > app-like {
    transform: translateY(-4px);
  }
}
app-product .product__go {
  display: grid;
  place-items: center;
  width: var(--go);
  height: var(--go);
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  transition: background-color 0.3s;
}
app-product .product__go svg {
  width: 17px;
  height: 17px;
  transition: transform 0.4s var(--ease);
}
app-product .product:hover .product__go {
  background: var(--red);
}
app-product .product:hover .product__go svg {
  transform: rotate(45deg);
}
@media (max-width: 1279px) {
  app-product .rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  app-product .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  app-product .rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
app-product {
  display: block;
  background: var(--page-inner);
  /* one size for every title of the page, top to bottom (the name, Product Details, the chair's name over its A+
     blocks, the numbers, the reviews, You may also like), and one for the A+ blocks' own titles */
  --pd-h2: 32px;
  --pd-h3: 26px;
}
@media (max-width: 1000px) {
  app-product {
    --pd-h2: 28px;
    --pd-h3: 24px;
  }
}
@media (max-width: 600px) {
  app-product {
    --pd-h2: 24px;
    --pd-h3: 21px;
  }
}
app-product .title {
  font-size: var(--pd-h2);
  line-height: 1.1;
}
app-product .pd__top {
  padding-top: calc(var(--header-h) + clamp(20px, 2.4vw, 32px));
  padding-bottom: clamp(40px, 5vw, 64px);
}
app-product .pd__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
app-product .pd__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s, border-color 0.2s;
}
app-product .pd__back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}
app-product .pd__back:hover {
  border-color: var(--red);
  color: var(--red);
}
app-product .pd__back:hover svg {
  transform: translateX(-3px);
}
app-product .crumbs {
  min-width: 0;
}
app-product .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}
app-product .crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.5;
}
app-product .crumbs a {
  transition: color 0.2s;
}
app-product .crumbs a:hover {
  color: var(--red);
}
app-product .crumbs [aria-current] {
  font-weight: 600;
  color: var(--ink);
}
app-product .pd__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4.5vw, 72px);
}
app-product .gallery {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 12px;
}
app-product .stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface-2);
  outline-offset: 4px;
}
app-product .stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
app-product .stage__img.is-on {
  opacity: 1;
}
app-product .stage__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--dark-chip);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
app-product .stage__tag--bestseller {
  background: #e8692e;
}
app-product .stage__tag--new {
  background: #1f8a5b;
}
app-product .stage__tag--offer {
  background: var(--red);
}
app-product .stage__like {
  position: absolute;
  top: 14px;
  right: 14px;
}
/* the share button, under the heart and dressed as it */
app-product .stage__share {
  position: absolute;
  top: 58px;
  right: 14px;
  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-product .stage__share svg {
  width: 17px;
  height: 17px;
}
app-product .stage__share:hover {
  color: var(--red);
}
app-product .stage__share:active {
  transform: scale(0.9);
}
app-product .stage__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--ink);
  box-shadow: 0 6px 18px -6px rgba(23, 19, 18, 0.35);
  transform: translateY(-50%);
  transition: background-color 0.2s, color 0.2s;
}
app-product .stage__arrow svg {
  width: 20px;
  height: 20px;
}
app-product .stage__arrow:hover {
  background: var(--red);
  color: #fff;
}
app-product .stage__arrow--prev {
  left: 14px;
}
app-product .stage__arrow--next {
  right: 14px;
}
app-product .stage__count {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(23, 19, 18, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
app-product .thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
app-product .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--surface-2);
  opacity: 0.7;
  transition: border-color 0.2s, opacity 0.2s;
}
app-product .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
app-product .thumb:hover {
  opacity: 1;
}
app-product .thumb.is-on {
  border-color: var(--red);
  opacity: 1;
}
app-product .info {
  padding-top: 4px;
}
/* the name, with the copy-link button right after it */
app-product .info__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
app-product .info__copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
app-product .info__copy svg {
  width: 17px;
  height: 17px;
}
app-product .info__copy:hover {
  border-color: var(--red);
  color: var(--red);
}
app-product .info__copy:active {
  transform: scale(0.9);
}
app-product .info__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--pd-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
app-product .info__lead {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
app-product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-top: 20px;
}
app-product .price__now {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
app-product .price__was {
  font-size: 14px;
  color: var(--muted);
}
app-product .price__off {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 138, 91, 0.12);
  color: var(--ok);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
app-product .price__note {
  font-size: 13px;
  color: var(--muted);
}
app-product .choice {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
app-product .choice + .choice {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
app-product .choice__label {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}
app-product .choice__label span {
  margin-left: 6px;
  font-weight: 500;
  color: var(--muted);
}
app-product .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
app-product .swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 18, 0.12), 0 0 0 3px var(--page-inner), 0 0 0 4px transparent;
  transition: box-shadow 0.2s, transform 0.2s var(--ease);
}
app-product .swatch:hover {
  transform: scale(1.08);
}
app-product .swatch.is-on {
  box-shadow: inset 0 0 0 1px rgba(23, 19, 18, 0.12), 0 0 0 3px var(--page-inner), 0 0 0 5px var(--ink);
}
/* the seating and the variant: two dropdowns side by side, one above the other when there is no room */
app-product .selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
app-product .field .choice__label {
  margin-bottom: 8px;
}
app-product .dd {
  position: relative;
}
/* the button: the chosen option's picture, name and line, and a caret that turns when the list is open */
app-product .dd__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 9px 14px 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
}
app-product .dd__btn:hover {
  border-color: var(--muted);
}
app-product .dd__btn.is-open,
app-product .dd__btn:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 26, 33, 0.14);
  outline: none;
}
app-product .dd__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--red);
}
app-product .dd__icon svg {
  width: 20px;
  height: 20px;
}
app-product .dd__text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
app-product .dd__text strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
app-product .dd__text small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
app-product .dd__caret {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
}
app-product .dd__caret svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease);
}
app-product .dd__btn.is-open .dd__caret svg {
  transform: rotate(180deg);
}
/* the list, under the button and as wide */
app-product .dd__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px -16px rgba(23, 19, 18, 0.35);
  list-style: none;
  outline: none;
  animation: app-product--dd-in 0.18s var(--ease);
}
app-product .dd__list[hidden] {
  display: none;
}
app-product .dd__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s;
}
app-product .dd__opt .dd__icon {
  width: 34px;
  height: 34px;
  background: var(--surface-2);
  color: var(--ink-soft);
}
/* the option the arrow keys (or the pointer) are on */
app-product .dd__opt.is-active {
  background: var(--surface-2);
}
app-product .dd__opt.is-active .dd__icon {
  background: var(--surface);
}
app-product .dd__opt.is-on .dd__icon {
  background: var(--red);
  color: #fff;
}
app-product .dd__opt.is-on strong {
  color: var(--red);
}
app-product .dd__tick {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--red);
}
@keyframes app-product--dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-product .dd__list {
    animation: none;
  }
}
/* the quantity (its name, then the stepper); under it Buy now, with Dimension and 3D View beside it, all as tall; */
/* a line above parts them from the choices. The column is measured (a container) : when it is narrow, Buy now */
/* takes the whole row and the other two share the one under it. */
app-product .info {
  container-type: inline-size;
}
app-product .buy {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
app-product .buy__qty {
  display: flex;
  align-items: center;
  gap: 16px;
}
app-product .buy__qty .choice__label {
  margin: 0;
}
app-product .buy__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}
app-product .buy__now {
  min-height: 52px;
}
app-product .buy__alt {
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
app-product .buy__alt svg {
  color: var(--red);
}
app-product .buy__alt:hover {
  border-color: var(--ink);
}
app-product .buy__alt:hover svg {
  transform: none;
}
@container (max-width: 480px) {
  app-product .buy__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  app-product .buy__now {
    grid-column: 1 / -1;
  }
}
app-product .qty {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 4px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
app-product .qty__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.2s, opacity 0.2s;
}
app-product .qty__btn svg {
  width: 16px;
  height: 16px;
}
app-product .qty__btn:hover:not(:disabled) {
  background: var(--surface-2);
}
app-product .qty__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
app-product .qty__value {
  min-width: 34px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
/* ── a chair asked for, not bought (the cinema recliners) ─────────────────── */
/* what it is available in : tiles, each its picture in a red tint beside its name */
app-product .avail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
app-product .avail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
app-product .avail__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--red);
}
app-product .avail__icon svg {
  width: 20px;
  height: 20px;
}
app-product .avail__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
@media (hover: hover) {
  app-product .avail__item:hover {
    border-color: var(--tint-edge);
    transform: translateY(-2px);
  }
}
/* littlenap.in's line, then Enquire now beside Call (and Dimension, 3D View when the chair has them) */
app-product .buy__note {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
}
app-product .buy__actions--ask {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: auto;
  grid-auto-flow: column;
}
@container (max-width: 480px) {
  app-product .buy__actions--ask {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }
}
/* ── the Dimension and 3D View popups (the site's popup shell) ─────────────── */
/* a title bar, then the picture (scrolled when taller than the screen) or the 3D stage */
app-product .pd-pop__dialog {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}
app-product .pd-pop__dialog--view-3d {
  max-width: 900px;
}
app-product .pd-pop__head {
  flex: none;
  padding: 18px 64px 14px 24px;
  border-bottom: 1px solid var(--line);
}
app-product .pd-pop__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}
app-product .pd-pop__head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}
app-product .pd-pop__body {
  overflow: auto;
  padding: 16px;
}
app-product .pd-pop__dims {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  margin: 0 auto;
  border-radius: 12px;
}
/* the 3D stage: the chair's picture and "Loading" until the model is on screen, then the model alone */
app-product .pd-pop__stage {
  position: relative;
  flex: 1;
  aspect-ratio: 4/3;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  background: radial-gradient(circle at 50% 42%, var(--surface) 0%, var(--surface-2) 78%);
}
app-product .pd-pop__viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  /* (hidden until its camera is set for the open chair, product.js : no zoom as it appears) */
  opacity: 0;
  transition: opacity 0.4s;
}
app-product .is-ready .pd-pop__viewer {
  opacity: 1;
}
app-product .pd-pop__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10%;
  object-fit: contain;
  opacity: 0.55;
  /* (as big, and where, the model shows once its camera is set for the open chair : no zoom from one to the other) */
  transform: translate(1%, 3%) scale(0.83);
  transition: opacity 0.4s;
}
app-product .pd-pop__status {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s;
}
app-product .pd-pop__spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: app-product--spin 0.8s linear infinite;
}
app-product .is-ready .pd-pop__poster,
app-product .is-ready .pd-pop__status {
  opacity: 0;
  visibility: hidden;
}
app-product .is-failed .pd-pop__spin {
  display: none;
}
app-product .is-failed .pd-pop__status {
  color: var(--red);
}
/* "View in your room", on the phones that can run AR (model-viewer shows it) */
app-product .pd-pop__ar {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(215, 26, 33, 0.7);
}
app-product .pd-pop__ar svg {
  width: 18px;
  height: 18px;
}
/* "Open recliner" : the back lies down and the footrest comes up, in the viewer (lib/recline-model.js) */
/* (the site's red, so it stands out on the light stage ; pressed, dark : "Close recliner" ; it nods once as it appears) */
app-product .pd-pop__open {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px -10px rgba(215, 26, 33, 0.75);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
  animation: app-product--open-nod 0.9s 0.3s var(--ease) 2;
}
app-product .pd-pop__open:hover {
  background: #b5121a;
  transform: translateY(-1px);
}
app-product .pd-pop__open[aria-pressed=true] {
  background: var(--dark-chip);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6);
  animation: none;
}
app-product .pd-pop__open svg {
  width: 22px;
  height: 22px;
}
@keyframes app-product--open-nod {
  40% {
    transform: translateY(-4px) scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-product .pd-pop__open {
    animation: none;
  }
}
app-product .pd-pop__open:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
@keyframes app-product--spin {
  to {
    transform: rotate(360deg);
  }
}
/* the delivery check: a compact soft red-tinted card, its title on one line above the field */
/* the bulk-buy offers (lib/bulk.ts) : a box of tiers under the quantity ; the one reached turns green */
app-product .bulk {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--tint-edge);
  border-radius: 16px;
  background: var(--surface);
}
app-product .bulk__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
app-product .bulk__head svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--red);
}
app-product .bulk__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
app-product .bulk__tier {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--muted);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
app-product .bulk__tier strong {
  font-size: 13.5px;
  color: var(--ink);
}
app-product .bulk__tier.is-on {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}
app-product .bulk__note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
app-product .bulk.is-reached .bulk__note {
  color: var(--ok);
  font-weight: 600;
}
app-product .pin {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--tint-edge);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tint), var(--surface) 70%);
}
app-product .pin__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
app-product .pin__head svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--red);
}
app-product .pin__form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
app-product .pin__form[hidden] {
  display: none;
}
app-product .pin__form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 500 14.5px var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
app-product .pin__form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 26, 33, 0.12);
}
app-product .pin__form input[aria-invalid=true] {
  border-color: var(--red);
}
app-product .pin__error {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--red);
}
app-product .pin__result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
}
app-product .pin__result[hidden] {
  display: none;
}
app-product .pin__result > span:nth-child(2) {
  flex: 1;
}
app-product .pin__result button {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
app-product .pin__result button:hover {
  background: var(--tint);
}
app-product .pin__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}
app-product .pin__tick svg {
  width: 16px;
  height: 16px;
}
/* the three cards under the pincode : a red-tinted card, a short red bar on top, the picture in a ringed disc, then
   what it is (small, red) over what we promise */
app-product .assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
app-product .assure__item {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  padding: 22px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--tint) 0%, var(--surface) 70%);
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
app-product .assure__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 36px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--red);
  transform: translateX(-50%);
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
app-product .assure__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--red);
  box-shadow: 0 0 0 1px var(--tint-edge), 0 12px 22px -12px rgba(215, 26, 33, 0.6);
  transition: background-color 0.35s, color 0.35s;
}
/* a dashed ring around the disc, that turns a little on hover */
app-product .assure__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1.5px dashed var(--tint-edge);
  border-radius: 50%;
  transition: transform 0.8s var(--ease), border-color 0.35s;
}
app-product .assure__icon svg {
  width: 24px;
  height: 24px;
}
app-product .assure__text {
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
/* "T&C apply" under a warranty : the Warranty Terms & Conditions page */
app-product .assure__tc,
app-product .pd-tabs__badge-tc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
app-product .assure__tc:hover,
app-product .pd-tabs__badge-tc:hover {
  color: var(--red);
}
app-product .pd-tabs__badge-tc {
  margin-left: 4px;
}
app-product .assure__text small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
@media (hover: hover) {
  app-product .assure__item:hover {
    transform: translateY(-3px);
    border-color: var(--tint-edge);
    box-shadow: 0 20px 36px -24px rgba(23, 19, 18, 0.4);
  }
  app-product .assure__item:hover::before {
    width: 64%;
  }
  app-product .assure__item:hover .assure__icon {
    background: var(--red);
    color: #fff;
  }
  app-product .assure__item:hover .assure__icon::before {
    border-color: var(--red);
    transform: rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  app-product .assure__item,
  app-product .assure__item::before,
  app-product .assure__icon::before {
    transition: none;
  }
  app-product .assure__item:hover {
    transform: none;
  }
}
/* the figures : one box on every chair's page (under the Product Details), four cells, each its picture beside the
   number (counting up) and its line */
app-product .figures {
  padding-block: clamp(28px, 4vw, 48px) clamp(44px, 6vw, 80px);
}
app-product .figures + .pd-feature {
  padding-top: 0;
}
/* its title, centred over it */
app-product .figures__head {
  justify-items: center;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 34px);
  text-align: center;
}
app-product .figures__head .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
app-product .figures__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: clamp(22px, 2.8vw, 32px) 0;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--page-inner));
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 16px 28px rgba(23, 19, 18, 0.07);
  list-style: none;
}
app-product .figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px clamp(12px, 2vw, 28px);
}
app-product .figure + .figure {
  border-left: 1px solid var(--line);
}
app-product .figure__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--tint-edge);
  border-radius: 16px;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--ease);
}
app-product .figure__icon svg {
  width: 26px;
  height: 26px;
}
app-product .figure:hover .figure__icon {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  transform: translateY(-3px);
}
app-product .figure__text {
  display: grid;
  gap: 5px;
  min-width: 0;
}
app-product .figure strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--red);
}
app-product .figure__text span {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}
@media (max-width: 560px) {
  /* phones : two by two, each picture over its number */
  app-product .figure {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
/* ── a detail up close (the Trident's stitching) : a wide photo, its name and line over a dark fade on the left ── */
app-product .pd-feature {
  padding-bottom: 0;
}

/* ── Setup : a button that plays the setup video (lib/product-extras.ts) ── */
app-product .assure__item--btn {
  padding: 0;
}
app-product .assure__btn {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 22px 12px 18px;
  border-radius: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
app-product .assure__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
app-product .assure__item--btn:hover {
  border-color: var(--tint-edge);
  box-shadow: 0 16px 30px -22px rgba(215, 26, 33, 0.6);
}
app-product .assure__play {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
app-product .assure__play svg {
  width: 11px;
  height: 11px;
  margin-left: 1px;
}
app-product .assure__watch {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── the setup video's popup : a 16:9 player ── */
app-product .pd-pop__dialog--setup-video {
  max-width: 960px;
}
app-product .pd-pop__video {
  position: relative;
  aspect-ratio: 16/9;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  background: #000;
}
app-product .pd-pop__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── A+ content, as Amazon's A+ : the chair's name, then blocks of pictures and words on soft panels. A picture is
   always shown whole : beside words it is at most --shot-h tall and its side of the panel is just as wide as it, so the
   panel is as tall as the picture (or as the words, when they are taller) ; nothing is ever written over a picture. ── */
app-product .aplus {
  --aplus-radius: 28px;
  --aplus-panel: linear-gradient(118deg, var(--surface-2) 0%, var(--cream) 100%);
  --aplus-pad: clamp(26px, 3.6vw, 52px);
  /* the tallest a picture beside words is */
  --shot-h: 460px;
  /* (close under the Product Details : their own space below is enough) */
  padding-top: clamp(4px, 1.2vw, 16px);
}
/* the title : "More about the <chair>", centred, at the size of the page's other titles */
app-product .aplus__head {
  margin-bottom: clamp(22px, 3vw, 36px);
  text-align: center;
}
app-product .aplus__heading {
  margin: 0;
}

app-product .aplus__blocks {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
}

/* the words of a block, as wide as their side of the panel */
app-product .aplus__words {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: var(--aplus-pad);
}
app-product .aplus__lede {
  display: grid;
  justify-items: start;
  gap: 12px;
}
app-product .aplus__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--pd-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
app-product .aplus__title em {
  font-style: italic;
  color: var(--red);
}
app-product .aplus__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2, var(--muted));
  text-wrap: pretty;
}

/* a picture, whole : its own proportions, as wide as its column allows and at most --shot-h tall (its column, sized to
   fit it, is then just as wide : no band beside it, nothing cut) */
app-product .aplus__pic {
  min-width: 0;
  margin: 0;
}
app-product .aplus__shot {
  position: relative;
  overflow: hidden;
}
app-product .aplus__shot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--shot-h);
  margin-inline: auto;
  transition: transform 1.6s var(--ease);
}
/* (the pictures settle into place as their block rises in) */
app-product .reveal:not(.is-in) .aplus__shot img {
  transform: scale(1.05);
}

/* its points : boxes of an icon and a few words */
app-product .aplus__feats {
  min-width: 0;
}
app-product .aplus__feats ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
app-product .aplus__feats[data-cols="1"] ul {
  grid-template-columns: minmax(0, 1fr);
}
app-product .aplus__feats[data-cols="3"] ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
app-product .aplus__feats li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04), 0 14px 26px -22px rgba(23, 19, 18, 0.4);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
app-product .aplus__feat-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tint-edge);
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
}
app-product .aplus__feat-ic svg {
  width: 18px;
  height: 18px;
}
app-product .aplus__feats li:hover {
  border-color: var(--tint-edge);
  transform: translateY(-2px);
}

/* banner : the words, the picture on the right side, whole, to the panel's edges (fading in on its left) */
app-product .aplus__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(56%);
  align-items: center;
  overflow: hidden;
  border-radius: var(--aplus-radius);
  background: radial-gradient(110% 90% at 0% 0%, var(--tint) 0%, transparent 58%), var(--aplus-panel);
}
app-product .aplus__hero:not(.aplus__hero--wide) .aplus__shot {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
/* (a wide picture : across the top, the title and the words under it side by side) */
app-product .aplus__hero--wide {
  grid-template-columns: minmax(0, 1fr);
}
app-product .aplus__hero--wide .aplus__pic {
  order: -1;
}
app-product .aplus__hero--wide .aplus__shot img,
app-product .aplus__duo--wide .aplus__shot img {
  width: 100%;
  max-height: none;
}
app-product .aplus__hero--wide .aplus__words {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 16px clamp(24px, 5vw, 72px);
}

/* split : the picture on the left side, whole, to the panel's edges (right : flip), the words beside it, the points
   under them */
app-product .aplus__duo {
  display: grid;
  grid-template-columns: fit-content(52%) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "pic ." "pic words" "pic feats" "pic .";
  overflow: hidden;
  border-radius: var(--aplus-radius);
  background: var(--aplus-panel);
}
app-product .aplus__duo--flip {
  grid-template-columns: minmax(0, 1fr) fit-content(52%);
  grid-template-areas: ". pic" "words pic" "feats pic" ". pic";
}
app-product .aplus__duo .aplus__pic {
  grid-area: pic;
  align-self: center;
}
app-product .aplus__duo .aplus__words {
  grid-area: words;
}
app-product .aplus__duo--feats .aplus__words {
  padding-bottom: 22px;
}
app-product .aplus__duo .aplus__feats {
  grid-area: feats;
  margin: 0 var(--aplus-pad) var(--aplus-pad);
}
/* (beside a picture : two boxes across) */
app-product .aplus__duo:not(.aplus__duo--wide) .aplus__feats[data-cols="3"] ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* (a wide picture : across the top, the words and the points under it) */
app-product .aplus__duo--wide,
app-product .aplus__duo--wide.aplus__duo--flip {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "pic" "words" "feats";
}

/* tiles : cards in a row, each its picture (whole) with its name and line under it */
app-product .aplus__cards-block {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}
app-product .aplus__cards-block .aplus__lede {
  justify-items: start;
}
app-product .aplus__cards {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
app-product .aplus__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04), 0 20px 40px -32px rgba(23, 19, 18, 0.45);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
app-product .aplus__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.05), 0 28px 50px -30px rgba(23, 19, 18, 0.5);
}
app-product .aplus__card-pic {
  aspect-ratio: var(--tr, 1);
  margin: 0;
  background: var(--photo-well);
}
app-product .aplus__card-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
app-product .aplus__card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 14px;
  padding: 18px 18px 20px;
  border-top: 1px solid var(--edge);
}
app-product .aplus__card-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--tint-edge);
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
}
app-product .aplus__card-ic svg {
  width: 22px;
  height: 22px;
}
app-product .aplus__card-body strong {
  align-self: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
app-product .aplus__card-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
/* (the card's own width decides : stacked as above, or side by side once it is wide enough) */
app-product .aplus__card {
  container-type: inline-size;
}
app-product .aplus__card-in {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* (a wide card : as the A+ cards of a marketplace, the picture down its left side, whole, to its edges ; the icon on a
   white disc, the name and the line on the right, set to the right) */
@container (min-width: 380px) {
  app-product .aplus__card-in {
    display: grid;
    grid-template-columns: minmax(0, 56%) minmax(0, 1fr);
    align-items: center;
    background: linear-gradient(105deg, var(--surface) 45%, var(--surface-2) 100%);
  }
  app-product .aplus__card-pic img {
    height: auto;
  }
  app-product .aplus__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 14px 18px 14px 10px;
    border-top: 0;
    text-align: right;
  }
  app-product .aplus__card-ic {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    border: 0;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--tint-edge), 0 12px 24px -12px rgba(215, 26, 33, 0.5);
  }
  app-product .aplus__card-ic svg {
    width: 23px;
    height: 23px;
  }
  app-product .aplus__card-body strong {
    align-self: auto;
    font-size: 15.5px;
    text-wrap: balance;
  }
  app-product .aplus__card-text {
    font-size: 13px;
    text-wrap: pretty;
  }
}

/* words alone : the title on the left, the words and the points on the right */
app-product .aplus__note {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 18px clamp(24px, 5vw, 80px);
  padding: var(--aplus-pad);
  border-radius: var(--aplus-radius);
  background: var(--aplus-panel);
}
app-product .aplus__note-body {
  display: grid;
  gap: 16px;
}
app-product .aplus__note .aplus__feats {
  margin-top: 6px;
}

/* a film, with its words beside it */
app-product .aplus__video {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  margin: 0;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: var(--aplus-radius);
  background: var(--aplus-panel);
}
app-product .aplus__video .aplus__words {
  padding: clamp(14px, 2.4vw, 32px);
}
app-product .aplus__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: calc(var(--aplus-radius) - 10px);
  background: var(--night, #0f0b0a);
}
app-product .aplus__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* under the pointer : a block lifts a little, its shadow deepening and a red hairline drawn round it ; a card's icon
   turns red (as the figures' do) */
app-product :is(.aplus__duo, .aplus__hero, .aplus__note, .aplus__video) {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
app-product .aplus__card-ic {
  transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease);
}
@media (hover: hover) {
  app-product :is(.aplus__duo, .aplus__hero, .aplus__note, .aplus__video):hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--tint-edge), 0 32px 60px -36px rgba(60, 25, 15, 0.42);
  }
  :root[data-theme="dark"] app-product :is(.aplus__duo, .aplus__hero, .aplus__note, .aplus__video):hover {
    box-shadow: 0 0 0 1px var(--tint-edge), 0 32px 60px -30px rgba(0, 0, 0, 0.85);
  }
  app-product .aplus__card:hover {
    border-color: var(--tint-edge);
  }
  app-product .aplus__card:hover .aplus__card-ic {
    background: var(--red);
    color: #fff;
    transform: translateY(-2px);
  }
}

@media (max-width: 1000px) {
  app-product .aplus {
    --shot-h: 400px;
  }
  app-product .aplus__cards[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  app-product .aplus {
    --aplus-radius: 22px;
    --aplus-pad: 20px;
    /* (one under the other : a picture is shown whole) */
    --shot-h: 9999px;
  }
  app-product .aplus__hero,
  app-product .aplus__hero--wide .aplus__words,
  app-product .aplus__note,
  app-product .aplus__video {
    grid-template-columns: minmax(0, 1fr);
  }
  /* (the picture first) */
  app-product .aplus__hero .aplus__pic {
    order: -1;
  }
  app-product .aplus__hero:not(.aplus__hero--wide) .aplus__shot {
    -webkit-mask-image: none;
    mask-image: none;
  }
  app-product .aplus__duo,
  app-product .aplus__duo--flip,
  app-product .aplus__duo--wide,
  app-product .aplus__duo--wide.aplus__duo--flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "pic" "words" "feats";
  }
  app-product .aplus__words {
    padding: 22px 20px 24px;
  }
  app-product .aplus__duo--feats .aplus__words {
    padding-bottom: 18px;
  }
  app-product .aplus__duo .aplus__feats {
    margin: 0 20px 20px;
  }
  app-product .aplus__feats ul,
  app-product .aplus__feats[data-cols="3"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  app-product .aplus__feats[data-cols="1"] ul {
    grid-template-columns: minmax(0, 1fr);
  }
  app-product .aplus__feats li {
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px 8px 8px;
    font-size: 12.5px;
  }
  app-product .aplus__feat-ic {
    width: 34px;
    height: 34px;
  }
  app-product .aplus__feat-ic svg {
    width: 16px;
    height: 16px;
  }
  app-product .aplus__video .aplus__words {
    padding: 14px 8px 8px;
  }
  /* (the cards : a row swiped sideways, the next one peeking in) */
  app-product .aplus__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 320px);
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 14px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  app-product .aplus__cards::-webkit-scrollbar {
    display: none;
  }
  app-product .aplus__card {
    scroll-snap-align: start;
  }
  app-product .aplus__card:hover {
    transform: none;
  }
  app-product .aplus__card-body {
    padding: 16px 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-product .aplus__shot img,
  app-product .aplus__card,
  app-product .aplus__feats li {
    transition: none;
  }
  app-product .reveal:not(.is-in) .aplus__shot img {
    transform: none;
  }
  /* (the hover keeps its shadow, not its lift) */
  app-product :is(.aplus__duo, .aplus__hero, .aplus__note, .aplus__video):hover,
  app-product .aplus__card:hover .aplus__card-ic {
    transform: none;
  }
}
app-product .pd-feature__fig {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  background: var(--surface-2);
}
app-product .pd-feature__img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  object-fit: cover;
  object-position: 48% 40%;
}
app-product .pd-feature__cap {
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  align-content: center;
  gap: 8px;
  width: min(460px, 60%);
  padding: clamp(20px, 4vw, 48px);
  background: linear-gradient(90deg, rgba(15, 11, 10, 0.72) 0%, rgba(15, 11, 10, 0.4) 70%, transparent 100%);
  color: #fff;
}
app-product .pd-feature__cap .eyebrow {
  margin: 0;
  color: #fff;
  opacity: 0.8;
}
app-product .pd-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--pd-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
app-product .pd-feature__title em {
  color: #ff8a8f;
}
app-product .pd-feature__text {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.9;
}
@media (max-width: 640px) {
  /* phones : the photo, then the words under it on a dark band */
  app-product .pd-feature__img {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  app-product .pd-feature__cap {
    position: static;
    width: auto;
    background: #1a1413;
  }
}
/* the Product Details tabs, on the page's own white (the figures' box under them) */
app-product .pd__help {
  padding-block: 0 clamp(28px, 3.6vw, 48px);
}
/* the card's shape : a low cap raised in the middle of its top (the title), its sides falling to the card in a soft
   S, and the bottom-left corner cut away the same way (the Next arrow sits in the cut). It is painted in pieces of one
   colour ; each S is one curve (a mask), stretched to its box. White, with a light grey line around the whole shape
   and a soft shadow under it : drawn by the filter on all the pieces at once (a border could not follow the curves). */
app-product .pd-info {
  --fill: var(--surface);
  --edge: color-mix(in srgb, var(--ink) 12%, var(--page-inner));
  --round: 28px;
  --cap-slope: clamp(46px, 6vw, 86px);
  --notch-w: clamp(220px, 28%, 360px);
  --notch-h: clamp(38px, 3.2vw, 42px);
  --notch-slope: clamp(34px, 4vw, 56px);
  --s-down-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C55 0 45 100 0 100H100Z'/%3E%3C/svg%3E");
  --s-down-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C45 0 55 100 100 100H0Z'/%3E%3C/svg%3E");
  --s-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C55 0 45 100 100 100V0Z'/%3E%3C/svg%3E");
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
app-product .pd-info__shape {
  padding-bottom: var(--notch-h);
  filter: drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)) drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)) drop-shadow(0 16px 28px rgba(23, 19, 18, 0.07));
}
/* the cap, and the S on each side of it */
app-product .pd-info__cap {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 2 * var(--cap-slope) - 2 * var(--round));
  margin: 0 auto -1px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 3vw, 40px) 0;
  background: var(--fill);
  text-align: center;
}
app-product .pd-info__cap::before,
app-product .pd-info__cap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--cap-slope);
  background: var(--fill);
  -webkit-mask: var(--s-down-left) 0 0 / 100% 100% no-repeat;
  mask: var(--s-down-left) 0 0 / 100% 100% no-repeat;
}
app-product .pd-info__cap::before {
  right: calc(100% - 0.5px);
}
app-product .pd-info__cap::after {
  left: calc(100% - 0.5px);
  -webkit-mask-image: var(--s-down-right);
  mask-image: var(--s-down-right);
}
app-product .pd-info__title {
  font-family: var(--font-display);
  font-size: var(--pd-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
app-product .pd-info__title em {
  font-style: italic;
  color: var(--red);
}
/* the card : a line under the title, the tabs, then the panel */
app-product .pd-info__card {
  position: relative;
  isolation: isolate;
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2.6vw, 36px) clamp(10px, 1.4vw, 16px);
  border-radius: var(--round);
  background: var(--fill);
}
/* the card carried on below, right of the cut corner… */
app-product .pd-info__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% - var(--round));
  right: 0;
  left: calc(var(--notch-w) - 0.5px);
  height: calc(var(--notch-h) + var(--round));
  border-radius: 0 0 var(--round) 0;
  background: var(--fill);
}
/* …falling to it from the card's bottom in the same S */
app-product .pd-info__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% - 1px);
  left: calc(var(--notch-w) - var(--notch-slope));
  width: var(--notch-slope);
  height: calc(var(--notch-h) + 1px);
  background: var(--fill);
  -webkit-mask: var(--s-notch) 0 0 / 100% 100% no-repeat;
  mask: var(--s-notch) 0 0 / 100% 100% no-repeat;
}
app-product .pd-info__sub {
  max-width: 60ch;
  margin: 0 auto 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
/* the tabs : one row of pills on a soft grey, centred (scrolling sideways when they do not fit), the chosen one red */
app-product .pd-tabs__list {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}
app-product .pd-tabs__list::-webkit-scrollbar {
  display: none;
}
app-product .pd-tabs__tab {
  flex: none;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
app-product .pd-tabs__tab:not(.is-on):hover {
  background: var(--surface);
  color: var(--red);
}
app-product .pd-tabs__tab.is-on {
  background: var(--red);
  color: #fff;
}
/* the panels, the drawing behind the words */
app-product .pd-tabs__body {
  position: relative;
  overflow: hidden;
}
app-product .pd-tabs__panel {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 34px) clamp(4px, 1vw, 12px) 8px;
}
app-product .pd-tabs__panel:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  border-radius: 14px;
}
/* in the cut corner : the next tab's name, and a long arrow */
app-product .pd-info__next {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(var(--notch-w) - var(--notch-slope) - 6px);
  height: var(--notch-h);
  padding-left: clamp(10px, 1.6vw, 22px);
  border-radius: 12px;
  color: var(--ink);
  text-align: left;
  transition: color 0.2s;
}
app-product .pd-info__next-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
app-product .pd-info__next-text small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
app-product .pd-info__next-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
app-product .pd-info__next-arrow {
  position: relative;
  flex: 1 0 34px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
app-product .pd-info__next-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
  app-product .pd-info__next:hover {
    color: var(--red);
  }
  app-product .pd-info__next:hover .pd-info__next-arrow {
    transform: translateX(6px);
  }
}
@media (max-width: 560px) {
  app-product .pd-info {
    --round: 20px;
    --cap-slope: 32px;
  }
  app-product .pd-info__cap {
    padding-inline: 14px;
  }
}
/* the specifications : a tile each, its picture in a red tint, the label over the value */
app-product .pd-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 12px;
  margin: 0;
}
app-product .pd-specs__row {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 14px 16px 14px 68px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.2s, background-color 0.2s;
}
app-product .pd-specs__row:hover {
  border-color: var(--tint-edge);
  background: var(--tint);
}
app-product .pd-specs__row dt {
  font-size: 13px;
  color: var(--muted);
}
app-product .pd-specs__icon {
  position: absolute;
  top: 50%;
  left: 15px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(215, 26, 33, 0.09);
  color: var(--red);
  transform: translateY(-50%);
  transition: background-color 0.2s, color 0.2s;
}
app-product .pd-specs__icon svg {
  width: 19px;
  height: 19px;
}
app-product .pd-specs__row:hover .pd-specs__icon {
  background: var(--red);
  color: #fff;
}
app-product .pd-specs__row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
/* the description */
app-product .about__para {
  max-width: 76ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
app-product .about__para + .about__para {
  margin-top: 14px;
}
/* the recliner drawing : shown (faded in) on the Care and Installation tabs, whose words leave the right side free */
app-product .pd-tabs__art {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(28px, 4vw, 64px);
  width: clamp(220px, 22vw, 290px);
  height: auto;
  opacity: 0;
  transform: translateY(-44%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
app-product .pd-tabs__body:has(> .pd-tabs__panel--care:not([hidden])) .pd-tabs__art,
app-product .pd-tabs__body:has(> .pd-tabs__panel--installation:not([hidden])) .pd-tabs__art,
app-product .pd-tabs__body:has(> .pd-tabs__panel--description:not([hidden])) .pd-tabs__sketch {
  opacity: 1;
  transform: translateY(-50%);
}
/* the Description tab's drawing : the home page's line drawing of the recliner, in red on a soft disc, drawn in line by
   line each time the tab opens (once the card has come into view) */
app-product .pd-tabs__sketch {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(28px, 4vw, 64px);
  display: grid;
  place-items: center;
  width: clamp(220px, 22vw, 290px);
  aspect-ratio: 1;
  color: var(--red);
  opacity: 0;
  transform: translateY(-44%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
app-product .pd-tabs__sketch::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--tint);
}
app-product .pd-tabs__sketch svg {
  position: relative;
  width: 76%;
  height: auto;
}
app-product .pd-tabs__sketch path {
  stroke-width: 5.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  app-product .pd-info.is-in .pd-tabs__body:has(> .pd-tabs__panel--description:not([hidden])) .pd-tabs__sketch path {
    animation: app-product--sketch 2.8s cubic-bezier(0.45, 0, 0.25, 1) both;
  }
}
@keyframes app-product--sketch {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
app-product .pd-art__disc {
  fill: var(--tint);
}
app-product .pd-art__shade {
  fill: rgba(215, 26, 33, 0.1);
}
app-product .pd-art__chair {
  fill: var(--surface);
  stroke: var(--red);
  stroke-width: 2.4;
}
app-product .pd-art__move,
app-product .pd-art__spark {
  stroke: var(--red);
  stroke-width: 2;
  opacity: 0.55;
}
app-product .pd-art__spark circle {
  fill: var(--red);
  stroke: none;
}
@media (min-width: 1081px) {
  app-product .pd-tabs__panel--description > *,
  app-product .pd-tabs__panel--care > *,
  app-product .pd-tabs__panel--installation > * {
    max-width: calc(100% - clamp(250px, 26vw, 340px));
  }
  /* tall enough for the drawing (centred in the body) to keep a gap from the tabs above and the card's edge below */
  app-product .pd-tabs__panel--description,
  app-product .pd-tabs__panel--care,
  app-product .pd-tabs__panel--installation {
    min-height: calc(clamp(220px, 22vw, 290px) + 72px);
  }
}
@media (max-width: 1080px) {
  app-product .pd-tabs__art,
  app-product .pd-tabs__sketch {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-product .pd-tabs__art,
  app-product .pd-tabs__sketch {
    transition: none;
  }
}
app-product .pd-tabs__lead {
  max-width: 72ch;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
app-product .pd-tabs__h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}
app-product .pd-tabs__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
}
app-product .pd-tabs__badge svg {
  width: 18px;
  height: 18px;
}
app-product .pd-tabs__note {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--tint-edge);
  border-radius: 14px;
  background: var(--tint);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
app-product .pd-tabs__note a {
  color: var(--red);
  font-weight: 600;
}
app-product .pd-tabs__note a:hover {
  text-decoration: underline;
}
/* numbered steps : the care, and setting it up */
app-product .pd-steps {
  display: grid;
  gap: 14px;
  counter-reset: step;
}
app-product .pd-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  counter-increment: step;
}
app-product .pd-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}
/* the warranty : what is covered, what is not, and replacements, side by side */
app-product .pd-cover {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
app-product .pd-cover__group {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.2s;
}
app-product .pd-cover__group:hover {
  border-color: var(--tint-edge);
}
/* each box's title beside its picture : green for what is covered, red for the rest */
app-product .pd-cover__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
app-product .pd-cover__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--red);
  transition: background-color 0.2s, color 0.2s;
}
app-product .pd-cover__icon svg {
  width: 21px;
  height: 21px;
}
app-product .pd-cover__group--yes .pd-cover__icon {
  background: var(--ok-bg);
  color: var(--ok);
}
app-product .pd-cover__group:hover .pd-cover__icon {
  background: var(--red);
  color: #fff;
}
app-product .pd-cover__group--yes:hover .pd-cover__icon {
  background: var(--ok);
}
app-product .pd-points {
  display: grid;
  gap: 10px;
}
app-product .pd-points li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
app-product .pd-points li::before {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
app-product .pd-points--yes li::before {
  content: "✓";
  background: var(--ok-bg);
  color: var(--ok);
}
app-product .pd-points--no li::before {
  content: "✕";
  background: var(--tint);
  color: var(--red);
}
app-product .pd-points--info li::before {
  content: "";
  top: 8px;
  left: 6px;
  width: 8px;
  height: 8px;
  background: var(--red);
}
/* the quality promise : four points, each with its picture */
app-product .pd-promise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
app-product .pd-promise__item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
app-product .pd-promise__item .pd-tabs__h3 {
  margin: 4px 0 0;
  font-size: 19px;
}
app-product .pd-promise__item p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
app-product .pd-promise__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--red);
}
app-product .pd-promise__icon svg {
  width: 24px;
  height: 24px;
}
/* the FAQs : the questions fill the panel, without lines on its edges */
app-product .pd-tabs__panel--faqs {
  padding-block: 4px;
}
app-product .pd-tabs__panel--faqs .faq:first-of-type {
  border-top: 0;
}
app-product .pd-tabs__panel--faqs .faq:last-of-type {
  border-bottom: 0;
}
@media (max-width: 1000px) {
  app-product .pd-promise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  app-product .pd-cover {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  app-product .pd-tabs__tab {
    padding: 10px 15px;
    font-size: 14px;
  }
  app-product .pd-promise {
    grid-template-columns: minmax(0, 1fr);
  }
}
app-product .faq {
  border-bottom: 1px solid var(--line);
}
app-product .faq:first-of-type {
  border-top: 1px solid var(--line);
}
app-product .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
app-product .faq summary::-webkit-details-marker {
  display: none;
}
app-product .faq summary:hover {
  color: var(--red);
}
app-product .faq p {
  padding: 0 40px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
app-product .faq[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
app-product .faq__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
app-product .faq__icon::before, app-product .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
app-product .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* the reviews : the chair's score on the right of the heading, then the reviews as cards */
app-product .pd__reviews {
  border-top: 1px solid var(--line);
}
/* the score on the left (it stays in view), the form and the reviews on the right */
app-product .reviews__body {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}
app-product .rating {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
app-product .rating__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
app-product .rating__title {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
app-product .rating__avg {
  display: flex;
  align-items: center;
  gap: 12px;
}
app-product .rating__avg strong {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
app-product .rating__avg .stars svg {
  width: 20px;
  height: 20px;
}
app-product .rating__count {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
app-product .rating__rate,
app-product .rating__write {
  border: 1.5px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}
app-product .rating__rate:hover,
app-product .rating__write:hover {
  background: var(--red);
  color: #fff;
}
app-product .rating__rate {
  flex: none;
  padding: 8px 22px;
  font-size: 14px;
}
app-product .rating__write {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}
app-product .rating__bars {
  display: grid;
  gap: 10px;
  margin: 22px 0 24px;
}
app-product .rating__bar {
  display: grid;
  grid-template-columns: 10px 16px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
app-product .rating__n {
  font-weight: 600;
  color: var(--ink-soft);
}
app-product .rating__bar > svg {
  width: 16px;
  height: 16px;
  fill: #e9a11b;
}
app-product .rating__track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
app-product .rating__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #e9a11b;
  transition: width 0.6s var(--ease);
}
app-product .rating__of {
  font-size: 13px;
  color: var(--muted);
}
/* writing a review */
app-product .rv-form {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
app-product .rv-form[hidden] {
  display: none;
}
app-product .rv-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
app-product .rv-form__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}
app-product .rv-form__title svg {
  width: 20px;
  height: 20px;
  color: var(--red);
}
app-product .rv-form__as {
  font-size: 13.5px;
  color: var(--muted);
}
app-product .rv-form__as strong {
  color: var(--ink);
}
app-product .rv-form__rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
app-product .rv-form legend,
app-product .rv-form__field label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-product .rv-form__field small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}
app-product .rv-form__req {
  color: var(--red);
}
app-product .rv-stars {
  display: flex;
  align-items: center;
  gap: 6px;
}
app-product .rv-star {
  display: grid;
  cursor: pointer;
}
app-product .rv-star svg {
  width: 32px;
  height: 32px;
  fill: transparent;
  stroke: var(--edge-hover);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke 0.15s, transform 0.2s var(--ease);
}
app-product .rv-star:hover svg {
  transform: scale(1.12);
}
app-product .rv-star.is-on svg {
  fill: #e9a11b;
  stroke: #e9a11b;
}
app-product .rv-form__word {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
app-product .rv-form__field input,
app-product .rv-form__field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--edge-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
app-product .rv-form__field textarea {
  min-height: 120px;
  resize: vertical;
}
app-product .rv-form__field input:focus,
app-product .rv-form__field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 26, 33, 0.12);
}
app-product .rv-form__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
app-product .rv-form__submit:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}
app-product .rv-form__cancel {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}
app-product .rv-form__cancel:hover {
  color: var(--ink);
}
app-product .reviews__none {
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--muted);
}
app-product .reviews__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* signed out : a blurred outline of the reviews, and over it a card asking to log in */
app-product .reviews__locked {
  position: relative;
  display: grid;
  min-height: 420px;
}
app-product .reviews__ghost {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  filter: blur(3px);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
app-product .review--ghost .review__face {
  background: var(--sand);
}
app-product .ghost-line {
  display: block;
  width: 92%;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-2);
}
app-product .ghost-line--short {
  width: 64%;
}
app-product .ghost-line--name {
  width: 40%;
  height: 10px;
}
app-product .reviews__gate {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(440px, 100%);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 3vw, 36px);
  border: 1px solid var(--tint-edge);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(23, 19, 18, 0.35);
  text-align: center;
}
app-product .reviews__gate-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border: 1.5px dashed var(--tint-edge);
  border-radius: 50%;
  background: var(--tint);
  color: var(--red);
}
app-product .reviews__gate-icon svg {
  width: 28px;
  height: 28px;
}
app-product .reviews__gate-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
}
app-product .reviews__gate-title em {
  color: var(--red);
}
app-product .reviews__gate-text {
  max-width: 34ch;
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 640px) {
  app-product .reviews__ghost {
    grid-template-columns: minmax(0, 1fr);
  }
  app-product .review--ghost:nth-child(n+3) {
    display: none;
  }
}
/* a review written on this device */
app-product .review--mine {
  border-color: var(--tint-edge);
}
app-product .review__title {
  margin-bottom: -4px;
  font-size: 15.5px;
  font-weight: 700;
}
app-product .review__tag {
  color: var(--red);
  font-weight: 600;
}
app-product .review {
  /* (holds its screen-reader-only rating) */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
app-product .stars {
  display: inline-flex;
  gap: 2px;
}
app-product .stars svg {
  width: 16px;
  height: 16px;
  fill: var(--edge-strong);
}
app-product .stars svg.is-on {
  fill: #e9a11b;
}
app-product .review__text {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.4;
  text-wrap: pretty;
}
app-product .review__by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
app-product .review__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark-chip);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
app-product .review__who {
  display: grid;
  line-height: 1.35;
}
app-product .review__name {
  font-weight: 600;
}
app-product .review__meta {
  font-size: 13px;
  color: var(--muted);
}
app-product .review__meta a {
  color: var(--red);
  font-weight: 600;
}
app-product .review__meta a:hover {
  text-decoration: underline;
}
@media (max-width: 1000px) {
  app-product .reviews__body {
    grid-template-columns: minmax(0, 1fr);
  }
  app-product .rating {
    position: static;
  }
}
@media (max-width: 640px) {
  app-product .reviews__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
app-product .pd__related {
  border-top: 1px solid var(--line);
}
@media (max-width: 1000px) {
  app-product .pd__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  app-product .gallery {
    position: static;
  }
  app-product .figures__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
  app-product .figure:nth-child(3) {
    border-left: 0;
  }
}
@media (max-width: 560px) {
  /* phones: a square 3D stage */
  app-product .pd-pop__stage {
    aspect-ratio: 1;
  }
  app-product .pd-pop__head {
    padding: 16px 60px 12px 18px;
  }
  app-product .pd-pop__body {
    padding: 10px;
  }
  app-product .thumbs {
    gap: 6px;
  }
  app-product .thumb {
    border-radius: 10px;
  }
  app-product .assure {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  app-product .assure__item {
    grid-template-columns: 50px 1fr;
    align-items: center;
    justify-items: start;
    gap: 16px;
    padding: 14px 16px 14px 20px;
    background: linear-gradient(90deg, var(--tint) 0%, var(--surface) 70%);
    text-align: left;
  }
  /* (the bar on the left, beside the picture) */
  app-product .assure__item::before {
    top: 50%;
    left: 0;
    width: 3px;
    height: 36px;
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
  }
  app-product .assure__item:hover::before {
    width: 3px;
    height: 64%;
  }
  /* (the Setup card's button : laid out as the other cards, the picture beside the words ; the card only holds it) */
  app-product .assure__item--btn {
    display: block;
    padding: 0;
  }
  app-product .assure__btn {
    grid-template-columns: 50px 1fr;
    align-items: center;
    justify-items: start;
    gap: 16px;
    padding: 14px 16px 14px 20px;
    text-align: left;
  }
}

/* ════════ <app-faqs> ════════ */
/* FAQs : the categories in a card beside the questions (a row of chips on smaller screens), each question a white card
   of its own, one open at a time, then the help card. The page is a soft stone so the white cards stand out ; the
   banner's notch takes that colour too (it is drawn in --page-inner). */
app-faqs {
  --page-inner: var(--surface-2);
  display: block;
  background: var(--page-inner);
}
:root[data-theme="dark"] app-faqs {
  --page-inner: var(--paper);
}
app-faqs .faqs__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

/* ── the categories ────────────────────────────────────────────────────── */
/* The column runs as tall as the questions, and the categories card and the ask card under it stay in view
   together beside them (.faqs__stick). When the screen is too short for both, the list of categories scrolls on
   its own, so the ways to ask us never leave the screen. */
app-faqs .faqs__side {
  align-self: stretch;
}
app-faqs .faqs__stick {
  position: sticky;
  z-index: 1;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - var(--header-h) - 40px);
}
app-faqs .side-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0; /* (on smaller screens the row of chips scrolls inside it, it must not widen the page) */
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-faqs .side-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 8px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
app-faqs .side-card__title svg {
  width: 16px;
  height: 16px;
  color: var(--red);
}
app-faqs .cats {
  display: grid;
  gap: 6px;
  min-height: 0;
  margin: -4px;
  padding: 4px; /* (room for the focus ring and the chosen category's shadow) */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
app-faqs .cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--ink-soft);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
app-faqs .cat:hover {
  background: var(--surface-2);
  color: var(--red);
}
app-faqs .cat:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
app-faqs .cat.is-active {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(215, 26, 33, 0.7);
}
app-faqs .cat__count {
  flex: none;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  transition: background-color 0.25s, color 0.25s;
}
app-faqs .cat.is-active .cat__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* still looking : the ways to ask us, a white card warmed with red in its corner */
app-faqs .ask {
  flex: none;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(80% 60% at 100% 0%, var(--tint), transparent 70%), var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-faqs .ask__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
}
app-faqs .ask__text {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--muted);
}
app-faqs .ask__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-faqs .ask__row svg {
  width: 18px;
  height: 18px;
  color: var(--red);
}
app-faqs .ask__row:hover {
  color: var(--red);
}
app-faqs .ask__btn {
  margin-top: 8px;
}

/* ── a category's questions : its name in a header card, then a white card each ── */
app-faqs .panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 14px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(70% 120% at 100% 0%, var(--tint), transparent 70%), var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-faqs .panel__name {
  display: grid;
  gap: 6px;
  min-width: 0;
}
app-faqs .panel__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
app-faqs .panel__kicker::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
app-faqs .panel__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
app-faqs .panel__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--tint-edge);
  border-radius: 999px;
  background: var(--tint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--red);
}
app-faqs .panel__count svg {
  width: 16px;
  height: 16px;
}
app-faqs .list {
  display: grid;
  gap: 12px;
}
app-faqs .faq {
  position: relative;
  padding-inline: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
  transition: border-color 0.3s, box-shadow 0.3s;
}
app-faqs .faq:hover {
  border-color: var(--tint-edge);
}
/* the open one : a red-tinted edge, lifted off the page */
app-faqs .faq.is-open {
  border-color: var(--tint-edge);
  box-shadow: 0 22px 44px -30px rgba(23, 19, 18, 0.4);
}
app-faqs .faq__h {
  margin: 0;
  font: inherit;
}
app-faqs .faq__q {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--ink-soft);
  scroll-margin-top: calc(var(--header-h) + 20px);
  transition: color 0.2s;
}
app-faqs .faq__q:hover,
app-faqs .faq.is-open .faq__q {
  color: var(--red);
}
app-faqs .faq__q:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 8px;
}
/* the number, in a small round */
app-faqs .faq__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: background-color 0.3s, color 0.3s;
}
app-faqs .faq.is-open .faq__num {
  background: var(--tint);
  color: var(--red);
}
/* a plus in a ring ; a minus on red once open */
app-faqs .faq__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
app-faqs .faq__icon::before,
app-faqs .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background-color 0.3s;
}
app-faqs .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
app-faqs .faq.is-open .faq__icon {
  border-color: var(--red);
  background: var(--red);
}
app-faqs .faq.is-open .faq__icon::before,
app-faqs .faq.is-open .faq__icon::after {
  background: #fff;
}
app-faqs .faq.is-open .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
/* the answer opens to its own height (a grid row from 0fr to 1fr) */
app-faqs .faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
app-faqs .faq.is-open .faq__a {
  grid-template-rows: 1fr;
}
app-faqs .faq__body {
  min-height: 0;
  overflow: hidden;
  padding: 0 42px 0 46px;
}
app-faqs .faq__body p {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
app-faqs .faq__body p:first-child {
  padding-top: 2px;
}
app-faqs .faq__body p:last-child {
  margin-bottom: 0;
  padding-bottom: 22px;
}

/* ── a category with no questions yet ──────────────────────────────────── */
app-faqs .empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: clamp(36px, 6vw, 64px) 24px;
  border: 2px dashed var(--edge-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
app-faqs .empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(215, 26, 33, 0.1);
  color: var(--red);
}
app-faqs .empty__icon svg {
  width: 26px;
  height: 26px;
}
app-faqs .empty__text {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-faqs .empty__sub {
  font-size: 14.5px;
  color: var(--muted);
}
app-faqs .empty__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

/* ── help : the dark card of the collection pages ──────────────────────── */
app-faqs .help {
  padding-top: 0;
}
app-faqs .help__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(60% 90% at 100% 0%, rgba(255, 150, 90, 0.18), transparent 70%), var(--night);
  color: #fff;
}
app-faqs .help__card .eyebrow,
app-faqs .help__card .title em {
  color: #ff6a6f;
}
app-faqs .help__card .lead {
  color: rgba(255, 255, 255, 0.72);
}
app-faqs .help__text {
  display: grid;
  gap: 16px;
  flex: 1 1 420px;
}
app-faqs .help__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* a screen too short for even a few categories beside the ask card : both scroll with the page */
@media (max-height: 640px) {
  app-faqs .faqs__stick {
    position: static;
    max-height: none;
  }
}

/* ── tablets and phones : the categories become a row of chips ─────────── */
@media (max-width: 1000px) {
  app-faqs .faqs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  app-faqs .faqs__stick {
    position: static;
    display: block;
    max-height: none;
  }
  app-faqs .side-card {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  app-faqs .side-card__title,
  app-faqs .ask {
    display: none;
  }
  app-faqs .cats {
    display: flex;
    gap: 8px;
    margin-block: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  app-faqs .cats::-webkit-scrollbar {
    display: none;
  }
  app-faqs .cat {
    flex: none;
    width: auto;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 14px;
    white-space: nowrap;
  }
  app-faqs .cat.is-active {
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 8px 16px -10px rgba(215, 26, 33, 0.7);
  }
}
@media (max-width: 560px) {
  app-faqs .panel__head {
    padding: 16px 18px;
  }
  app-faqs .list {
    gap: 10px;
  }
  app-faqs .faq {
    padding-inline: 16px;
    border-radius: 16px;
  }
  app-faqs .faq__q {
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 12px;
    padding: 16px 0;
    font-size: 15px;
  }
  app-faqs .faq__num {
    display: none;
  }
  app-faqs .faq__icon {
    width: 26px;
    height: 26px;
  }
  app-faqs .faq__body {
    padding: 0;
  }
  app-faqs .faq__body p {
    font-size: 14.5px;
  }
}
@media (max-width: 480px) {
  app-faqs .help__ctas .btn {
    flex: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-faqs .faq,
  app-faqs .faq__a,
  app-faqs .faq__num,
  app-faqs .faq__icon,
  app-faqs .faq__icon::before,
  app-faqs .faq__icon::after {
    transition: none;
  }
}

/* ════════ <app-legal> ════════ */
/* A legal page (the Privacy Policy, the Terms of Use) : as the FAQs page, the list of its parts and the ways to ask us
   stay in view together beside the text, and the list marks the part being read (sections/legal.js). When the screen is
   too short for both, the list scrolls on its own. Then the opening words, each part a numbered card, and a dark card
   at the foot. On tablets and phones the list is a row of chips above the text. */

app-legal {
  --page-inner: var(--surface-2);
  display: block;
  background: var(--page-inner);
}
:root[data-theme="dark"] app-legal {
  --page-inner: var(--paper);
}

app-legal .legal {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

/* ── the list of the parts, and the ways to ask us ───────────────────── */
app-legal .legal__side {
  align-self: stretch; /* (as tall as the parts : the sticky part has the whole column to travel in) */
}
app-legal .legal__stick {
  position: sticky;
  z-index: 1;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - var(--header-h) - 40px);
}
app-legal .side-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* (on smaller screens the row of chips scrolls inside it, it must not widen the page) */
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-legal .side-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 8px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
app-legal .side-card__title svg {
  width: 16px;
  height: 16px;
  color: var(--red);
}
app-legal .toc {
  display: grid;
  gap: 2px;
  min-height: 0;
  margin: -4px;
  padding: 4px; /* (room for the focus ring and the marked part's shadow) */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
app-legal .toc__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
app-legal .toc__link:hover {
  background: var(--surface-2);
  color: var(--red);
}
app-legal .toc__link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
app-legal .toc__link.is-active {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(215, 26, 33, 0.7);
}
app-legal .toc__num {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--red);
  transition: color 0.25s;
}
app-legal .toc__link.is-active .toc__num {
  color: rgba(255, 255, 255, 0.75);
}

/* still looking : the ways to ask us, a white card warmed with red in its corner (the FAQs page's) */
app-legal .ask {
  flex: none;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(80% 60% at 100% 0%, var(--tint), transparent 70%), var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-legal .ask__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
}
app-legal .ask__text {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--muted);
}
app-legal .ask__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s;
}
app-legal .ask__row svg {
  width: 18px;
  height: 18px;
  color: var(--red);
}
app-legal .ask__row:hover {
  color: var(--red);
}
app-legal .ask__btn {
  margin-top: 8px;
}

/* ── the text : the opening words, then the parts ────────────────────── */
app-legal .legal__body {
  display: grid;
  gap: 14px;
}
app-legal .intro,
app-legal .policy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(23, 19, 18, 0.04);
}
app-legal .intro {
  background: radial-gradient(70% 120% at 100% 0%, var(--tint), transparent 70%), var(--surface);
}
app-legal .intro__icon,
app-legal .policy__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tint);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}
app-legal .intro__icon {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(215, 26, 33, 0.7);
}
app-legal .intro__icon svg {
  width: 22px;
  height: 22px;
}
app-legal .intro__title,
app-legal .policy__title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.25;
}
app-legal .intro p {
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}
app-legal .policy p {
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}
app-legal .policy p + p {
  margin-top: 12px;
}
app-legal .policy a {
  font-weight: 600;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the ways to ask us, and the other legal page */
app-legal .more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  margin-top: 10px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: radial-gradient(45% 120% at 100% 0%, rgba(215, 26, 33, 0.28), transparent 70%), var(--night);
  color: #fff;
}
app-legal .more__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
}
app-legal .more__text {
  margin-top: 6px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
}
app-legal .more__other {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #ff6a6f;
}
app-legal .more__other svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}
app-legal .more__other:hover svg {
  transform: translateX(4px);
}
app-legal .more__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* a screen too short for even a few parts beside the ask card : both scroll with the page */
@media (max-height: 640px) {
  app-legal .legal__stick {
    position: static;
    max-height: none;
  }
}

/* ── tablets and phones : the list becomes a row of chips above the text ── */
@media (max-width: 1000px) {
  app-legal .legal {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  app-legal .legal__stick {
    position: static;
    display: block;
    max-height: none;
  }
  app-legal .side-card {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  app-legal .side-card__title,
  app-legal .ask {
    display: none;
  }
  app-legal .toc {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  app-legal .toc::-webkit-scrollbar {
    display: none;
  }
  app-legal .toc li {
    flex: none;
  }
  app-legal .toc__link {
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 14px;
    white-space: nowrap;
  }
  app-legal .toc__link.is-active {
    border-color: var(--red);
    box-shadow: 0 8px 16px -10px rgba(215, 26, 33, 0.7);
  }
}
@media (max-width: 560px) {
  app-legal .intro,
  app-legal .policy {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  app-legal .intro__icon,
  app-legal .policy__num {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  app-legal .intro__icon svg {
    width: 19px;
    height: 19px;
  }
  app-legal .more__ctas,
  app-legal .more__ctas .btn {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-legal .toc__link,
  app-legal .toc__num,
  app-legal .more__other svg {
    transition: none;
  }
}

/* ════════ <app-awards> ════════ */
/* Awards & recognition : the story beside the trophy and three figures (white), every honour as a grid of cards on a
   white band (gold-lit dark in the dark theme ; chips filter it by kind, a pager turns it six at a time), then the
   way to a showroom ; a card opens its certificate large in the viewer (sections/awards.js). */

app-awards {
  display: block;
  background: var(--page-inner);
}

/* ── 1. the story and the trophy ───────────────────────────────────────── */
app-awards .intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
app-awards .intro__text {
  display: grid;
  gap: 18px;
  justify-items: start;
}
app-awards .intro__para {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}
app-awards .also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 4px;
}
app-awards .also ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
app-awards .also li {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
app-awards .also__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* the way down to every honour : a button, its arrow nodding down under the pointer */
app-awards .intro__more {
  margin-top: 8px;
}
app-awards .intro__more:hover svg {
  transform: translateY(3px);
}
app-awards .intro__media {
  position: relative;
}
app-awards .intro__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1400/881;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -40px rgba(23, 19, 18, 0.55);
}
/* a frosted plate over the photo's corner, naming the trophy */
app-awards .intro__badge {
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  bottom: clamp(-26px, -2vw, -14px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(15, 11, 10, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.7);
}
app-awards .intro__badge strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}
app-awards .intro__badge small {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
app-awards .intro__badge-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--red);
}
app-awards .intro__badge-icon svg {
  width: 22px;
  height: 22px;
}

/* the figures, in a row between hairlines */
app-awards .figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 6vw, 80px);
  border-block: 1px solid var(--line);
}
app-awards .figure {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 36px);
}
app-awards .figure + .figure {
  border-left: 1px solid var(--line);
}
app-awards .figure__value {
  font-family: var(--font-display);
  /* (steady digits while the figure counts up) */
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--red);
}
app-awards .figure__label {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
}
app-awards .figure__note {
  font-size: 14px;
  color: var(--muted);
}

/* ── 2. every honour : an awards night ─────────────────────────────────── */
/* Gold dresses the honours : the frames of the certificates, the seals of the years, the labels ; the buttons (the
   chips, the pager, View Certificate) keep the site's own colours. In the light theme the band is plain white, right
   under the figures ; in the dark theme it is lit from above as a stage : the dark of the banner, a warm spotlight,
   faint rays from it, the brand's red low on the left. */
app-awards .aw-honours {
  --gold: #8a5f17;
  --gold-line: rgba(184, 138, 53, 0.42);
  --gold-metal: linear-gradient(135deg, #f8e7b8 0%, #d2a650 32%, #f6dc9e 52%, #b5832f 78%, #e9c97f 100%);
  --band: var(--page-inner);
  --ray: transparent;
  --head: var(--ink);
  --text: var(--ink);
  --text-2: #7a6a5c;
  --chip-bg: var(--surface);
  --chip-edge: var(--edge-strong);
  --chip-ink: var(--ink-soft);
  --chip-hover: var(--ink-soft);
  --count-bg: var(--surface-2);
  --count-ink: var(--muted);
  --action: var(--red);
  --card-bg: #fff;
  --card-edge: rgba(184, 138, 53, 0.2);
  --card-shadow: 0 26px 50px -34px rgba(110, 72, 18, 0.45);
  --card-lift: 0 36px 64px -34px rgba(110, 72, 18, 0.55), 0 0 50px -22px rgba(214, 170, 80, 0.45);
  /* (the picture on a plain light grey : the gold frame stands out on it) */
  --well: #f2f2f3;
  --well-edge: rgba(23, 19, 18, 0.06);
  --pic-shadow: 0 20px 30px -14px rgba(80, 50, 10, 0.5), 0 0 0 1px rgba(120, 80, 20, 0.25);
  --zoom-bg: rgba(255, 255, 255, 0.85);
  --zoom-ink: var(--ink);
  --zoom-edge: rgba(184, 138, 53, 0.25);
  --kind-bg: rgba(184, 138, 53, 0.1);
  --kind-edge: rgba(184, 138, 53, 0.32);
  --foot-line: rgba(184, 138, 53, 0.25);
  --pager-bg: var(--surface);
  --pager-edge: var(--edge-strong);
  --pager-ink: var(--ink-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* (white under white : no second gap above it) */
  padding-top: clamp(12px, 2vw, 24px);
  background: var(--band);
  color: var(--text);
}
:root[data-theme="dark"] app-awards .aw-honours {
  --gold: #e0bd72;
  --gold-line: rgba(224, 189, 114, 0.38);
  --band:
    radial-gradient(48% 38% at 50% 0%, rgba(224, 189, 114, 0.2), transparent 72%),
    radial-gradient(38% 46% at 0% 100%, rgba(215, 26, 33, 0.2), transparent 70%),
    radial-gradient(34% 40% at 100% 55%, rgba(255, 150, 90, 0.09), transparent 70%),
    var(--night);
  --ray: rgba(255, 226, 170, 0.045);
  --head: #fff;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.58);
  --chip-bg: rgba(255, 255, 255, 0.05);
  --chip-edge: rgba(255, 255, 255, 0.16);
  --chip-ink: rgba(255, 255, 255, 0.86);
  --chip-hover: rgba(255, 255, 255, 0.45);
  --count-bg: rgba(255, 255, 255, 0.1);
  --count-ink: rgba(255, 255, 255, 0.7);
  --action: #ff6a6f;
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  --card-edge: rgba(255, 255, 255, 0.09);
  --card-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
  --card-lift: 0 40px 70px -40px #000, 0 0 60px -24px rgba(224, 189, 114, 0.35);
  --well:
    radial-gradient(62% 70% at 50% 8%, rgba(255, 226, 170, 0.2), transparent 70%),
    radial-gradient(50% 14% at 50% 94%, rgba(0, 0, 0, 0.55), transparent 80%);
  --well-edge: rgba(255, 255, 255, 0.07);
  --pic-shadow: 0 22px 34px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.35);
  --zoom-bg: rgba(15, 11, 10, 0.6);
  --zoom-ink: #fff;
  --zoom-edge: rgba(255, 255, 255, 0.14);
  --kind-bg: rgba(224, 189, 114, 0.1);
  --kind-edge: rgba(224, 189, 114, 0.28);
  --foot-line: rgba(255, 255, 255, 0.1);
  --pager-bg: rgba(255, 255, 255, 0.05);
  --pager-edge: rgba(255, 255, 255, 0.16);
  --pager-ink: rgba(255, 255, 255, 0.86);
  padding-top: clamp(36px, 5vw, 68px);
}
/* the rays of the spotlight */
app-awards .aw-honours::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(from 180deg at 50% -8%, var(--ray) 0deg 3deg, transparent 3deg 8deg);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(75% 65% at 50% 0%, #000, transparent 78%);
  pointer-events: none;
}
/* (the heading in the site's red, as every other heading : the gold stays on the honours themselves) */
app-awards .aw-honours .eyebrow,
app-awards .aw-honours .title em {
  color: var(--red);
}
app-awards .aw-honours .title {
  color: var(--head);
}
app-awards .honours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
app-awards .honours__heading {
  display: grid;
  gap: 14px;
}
app-awards .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
app-awards .filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--chip-edge);
  border-radius: 999px;
  background: var(--chip-bg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--chip-ink);
  white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
app-awards .filter:hover {
  border-color: var(--chip-hover);
}
app-awards .filter:active {
  transform: scale(0.97);
}
app-awards .filter.is-on {
  border-color: var(--dark-chip);
  background: var(--dark-chip);
  color: #fff;
}
app-awards .filter__count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--count-bg);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--count-ink);
  transition: background-color 0.25s, color 0.25s;
}
app-awards .filter.is-on .filter__count {
  background: var(--red);
  color: #fff;
}

/* the grid : 3 × 2 on desktop, 2 × 3 on tablets, one down a phone */
app-awards .honours__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* (the cards of a page shown by the chips or the pager rise in one after the other : an animation restarts when its
   element comes back, and the script numbers them, --i) */
app-awards .cell {
  display: flex;
  animation: aw-cell-in 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes aw-cell-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

/* a card : the certificate framed in gold under its own spotlight, the year on a seal, then what it is */
app-awards .card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
@media (hover: hover) {
  app-awards .card:hover {
    transform: translateY(-8px);
    border-color: var(--tint-edge);
    box-shadow: var(--card-lift);
  }
}
/* Under the pointer, as the Contact us cards : a red light on the border follows it (sections/glow.js sets --mx, --my
   and .is-glowing), the title turns red and a red line is drawn along the card's foot from the left. */
app-awards .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(215, 26, 33, 0.95) 0%, rgba(255, 138, 92, 0.55) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
app-awards .card.is-glowing::before {
  opacity: 1;
}
app-awards .card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, var(--red), #ff8a5c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  app-awards .card:hover::after {
    transform: scaleX(1);
  }
  app-awards .card:hover .card__title {
    color: var(--red);
  }
}
/* the whole card is its button's : the focus ring goes round the card */
app-awards .card:has(.card__open:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
app-awards .card__media {
  --pad: clamp(20px, 2.4vw, 28px);
  --floor: clamp(28px, 3vw, 36px);
  position: relative;
  aspect-ratio: 4/3;
  border-bottom: 1px solid var(--well-edge);
  background: var(--well);
}
/* the certificate, in a thin gold frame (the frame is the picture's own padding, the gold its background) : held in
   the middle of the well at its own shape, as large as fits ; out of the flow, so a tall one never stretches the card */
app-awards .card__media img {
  position: absolute;
  inset: var(--pad) var(--pad) var(--floor);
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--pad));
  max-height: calc(100% - var(--pad) - var(--floor));
  margin: auto;
  padding: 5px;
  border-radius: 3px;
  background: var(--gold-metal);
  box-shadow: var(--pic-shadow);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
app-awards .card:hover .card__media img {
  transform: translateY(-5px) scale(1.035);
  box-shadow: var(--pic-shadow), 0 0 40px -10px rgba(214, 170, 80, 0.5);
}
app-awards .card__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--zoom-edge);
  border-radius: 50%;
  background: var(--zoom-bg);
  color: var(--zoom-ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s var(--ease), background-color 0.3s, color 0.3s;
}
app-awards .card__zoom svg {
  width: 17px;
  height: 17px;
}
app-awards .card:hover .card__zoom {
  opacity: 1;
  transform: none;
  border-color: transparent;
  background: var(--red);
  color: #fff;
}
/* (no hover on a touch screen : it is there from the start) */
@media (hover: none) {
  app-awards .card__zoom {
    opacity: 1;
    transform: none;
  }
}
/* the year : a round gold seal with a ring inside, half over the picture, cut out of the card by a ring of its colour */
app-awards .card__seal {
  position: absolute;
  right: 18px;
  bottom: -28px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gold-metal);
  box-shadow: 0 0 0 4px var(--seal-ring, #fff), 0 12px 22px -8px rgba(60, 35, 5, 0.6);
  color: #2a1c08;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
:root[data-theme="dark"] app-awards .card__seal {
  --seal-ring: #1a1513;
}
app-awards .card__seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(42, 28, 8, 0.45);
  border-radius: 50%;
}
app-awards .card__seal--long {
  font-size: 12px;
}
app-awards .card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
}
app-awards .card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* (clear of the seal) */
  padding-right: 64px;
}
app-awards .kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--kind-edge);
  border-radius: 999px;
  background: var(--kind-bg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
app-awards .kind svg {
  width: 14px;
  height: 14px;
}
/* (the year in words : the seal says it, but on a phone, where the seal goes) */
app-awards .card__year {
  display: none;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* the name in two lines at most, who gave it in one : what it is for is in the viewer */
app-awards .card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  transition: color 0.25s;
}
app-awards .card__by {
  max-width: 100%;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-2);
}
app-awards .card__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--action);
}
/* the whole card opens it */
app-awards .card__open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
app-awards .card__open:focus-visible {
  outline: none;
}
app-awards .card__open svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s var(--ease);
}
app-awards .card:hover .card__open svg {
  transform: translateX(4px);
}
/* the newest one's ribbon, on its picture */
app-awards .card__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--gold-metal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #20160a;
  box-shadow: 0 8px 18px -8px rgba(60, 35, 5, 0.6);
}
app-awards .card__flag svg {
  width: 13px;
  height: 13px;
}

/* under the grid : the pages, centred (nothing, when the cards fit on one) */
app-awards .honours__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--foot-line);
}
app-awards .honours__foot:has(> .pager[hidden]) {
  display: none;
}
/* the pager : ‹ 1 2 3 ›, as the Blogs page's, in the colours of the band */
app-awards .pager {
  display: flex;
  align-items: center;
  gap: 8px;
}
app-awards .pager__nums {
  display: flex;
  align-items: center;
  gap: 8px;
}
app-awards .pager__num,
app-awards .pager__step {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--pager-edge);
  border-radius: 999px;
  background: var(--pager-bg);
  color: var(--pager-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
app-awards .pager__step {
  padding: 0;
}
app-awards .pager__step svg {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  app-awards .pager__num:hover,
  app-awards .pager__step:hover {
    border-color: var(--red);
    color: var(--action);
  }
}
app-awards .pager__num[aria-current=page] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  cursor: default;
}
app-awards .pager__step:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
app-awards .pager__gap {
  min-width: 20px;
  color: var(--text-2);
  text-align: center;
}

/* ── 3. the way to a showroom ──────────────────────────────────────────── */
app-awards .cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px clamp(28px, 5vw, 72px);
  padding: clamp(28px, 4.5vw, 60px);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(60% 90% at 100% 0%, rgba(255, 150, 90, 0.18), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(215, 26, 33, 0.22), transparent 70%), var(--night);
  color: #fff;
}
app-awards .cta__card .eyebrow,
app-awards .cta__card .title em {
  color: #ff6a6f;
}
app-awards .cta__card .lead {
  color: rgba(255, 255, 255, 0.72);
}
app-awards .cta__text {
  display: grid;
  gap: 14px;
  justify-items: start;
}
app-awards .cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── the viewer ────────────────────────────────────────────────────────── */
app-awards .viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #fff;
  overscroll-behavior: contain;
}
app-awards .viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: aw-fade 0.25s ease-out;
}
app-awards .viewer::backdrop {
  background: rgba(8, 6, 5, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: aw-fade 0.25s ease-out;
}
app-awards .viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(14px, 3vw, 28px);
}
app-awards .viewer__count {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
app-awards .viewer__of {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
app-awards .viewer__btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
app-awards .viewer__btn svg {
  width: 22px;
  height: 22px;
}
app-awards .viewer__btn:hover {
  border-color: var(--red);
  background: var(--red);
}
app-awards .viewer__btn:active {
  transform: scale(0.94);
}
app-awards .viewer__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 50%;
}
app-awards .viewer__stage {
  display: grid;
  /* (one cell the size of the stage, so the picture's max-height has something to be a share of) */
  grid-template: minmax(0, 1fr)/minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 4px clamp(14px, 9vw, 120px);
  touch-action: pan-y pinch-zoom;
}
app-awards .viewer__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
app-awards .viewer__img.is-pop {
  animation: aw-pop 0.35s var(--ease);
}
app-awards .viewer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px clamp(14px, 3vw, 28px) max(18px, env(safe-area-inset-bottom));
}
/* what it is, on a dark glass plate with a short gold rule on its top edge */
app-awards .viewer__caption {
  position: relative;
  flex: 0 1 680px;
  min-width: 0;
  padding: 14px clamp(16px, 2.5vw, 28px) 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40, 31, 26, 0.92), rgba(18, 13, 11, 0.94));
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  text-align: center;
}
app-awards .viewer__caption::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e0bd72 25%, #f6dc9e 50%, #e0bd72 75%, transparent);
  transform: translateX(-50%);
}
app-awards .viewer__meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6a6f;
}
app-awards .viewer__title {
  margin: 2px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
app-awards .viewer__by {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
/* what it is for (the cards leave it out) */
app-awards .viewer__text {
  max-width: 62ch;
  margin: 8px auto 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}
/* on a wide screen the arrows stand either side of the picture */
@media (min-width: 900px) {
  app-awards .viewer__prev,
  app-awards .viewer__next {
    position: fixed;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
  }
  app-awards .viewer__prev {
    left: clamp(16px, 3vw, 40px);
  }
  app-awards .viewer__next {
    right: clamp(16px, 3vw, 40px);
  }
}
@keyframes aw-fade {
  from {
    opacity: 0;
  }
}
@keyframes aw-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* ── smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  app-awards .intro__grid {
    grid-template-columns: 1fr;
  }
  /* the trophy first */
  app-awards .intro__media {
    order: -1;
  }
}
@media (max-width: 1000px) {
  app-awards .honours__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  app-awards .cta__card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  app-awards .figures {
    grid-template-columns: 1fr;
  }
  app-awards .figure {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 18px;
    padding: 18px 4px;
  }
  app-awards .figure + .figure {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  app-awards .figure__value {
    grid-row: span 2;
    min-width: 2ch;
  }
  app-awards .figure__label {
    margin-top: 0;
  }
  /* the cards on their side, one under the other : the framed certificate in a square on the left, the year in
     words (no seal) */
  app-awards .honours__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  app-awards .card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
  }
  app-awards .card__media {
    --pad: 12px;
    --floor: 14px;
    aspect-ratio: auto;
    min-height: 128px;
    border-bottom: 0;
    border-right: 1px solid var(--well-edge);
  }
  app-awards .card__media img {
    padding: 3px;
  }
  app-awards .card__zoom,
  app-awards .card__seal {
    display: none;
  }
  app-awards .card__year {
    display: inline;
  }
  app-awards .card__meta {
    padding-right: 0;
  }
  app-awards .card__flag {
    top: 8px;
    left: 8px;
    padding: 3px 8px 3px 6px;
    font-size: 10px;
  }
  app-awards .card__body {
    justify-content: center;
    gap: 5px;
    padding: 12px 14px;
  }
  app-awards .card__title {
    font-size: 16.5px;
  }
  app-awards .card__by {
    font-size: 12.5px;
  }
  app-awards .card__open {
    padding-top: 2px;
    font-size: 13.5px;
  }
  app-awards .viewer__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 13.5px;
  }
  /* the chips in one row that scrolls sideways, edge to edge */
  app-awards .honours__head {
    display: grid;
  }
  app-awards .filters {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  app-awards .filters::-webkit-scrollbar {
    display: none;
  }
  app-awards .cta__card,
  app-awards .cta__text {
    text-align: center;
    justify-items: center;
  }
  app-awards .cta__actions {
    justify-content: center;
  }
  app-awards .viewer__bar {
    gap: 10px;
  }
  app-awards .viewer__caption {
    flex: 1 1 auto;
    padding: 10px 14px 12px;
    border-radius: 14px;
  }
  /* the arrows over the sides of the picture, so the plate has the whole width */
  app-awards .viewer__prev,
  app-awards .viewer__next {
    position: fixed;
    top: 40%;
    z-index: 1;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background: rgba(15, 11, 10, 0.72);
  }
  app-awards .viewer__prev {
    left: 8px;
  }
  app-awards .viewer__next {
    right: 8px;
  }
  app-awards .viewer__title {
    font-size: 17px;
  }
  app-awards .viewer__by {
    font-size: 13px;
  }
}
@media (max-width: 400px) {
  app-awards .cta__actions .btn {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  app-awards .cell,
  app-awards .viewer[open],
  app-awards .viewer::backdrop,
  app-awards .viewer__img.is-pop {
    animation: none;
  }
  app-awards .card,
  app-awards .card__media img {
    transition: none;
  }
  app-awards .card:hover {
    transform: none;
  }
}