/*
 * Steelnoir shop styles. Built from design/mockups/project/fk.css and rewritten for real responsive pages: mobile first,
 * fluid up to --wrap, no phone shell. Colours, fonts, sizes, spacing, radii and shadows come ONLY from tokens.css (var(--…));
 * a test fails when this file contains a colour literal. No inline styles anywhere in the markup (CSP): use these classes.
 * Targets are at least var(--tap) = 44 px, focus is always visible, and there is no animation (the exceptions, the turn of a
 * product row's chevron and the one-off sheen on a steelbook's frame when the pointer rests on its card, run only under
 * prefers-reduced-motion: no-preference).
 */

/* ---- fonts: self-hosted (public/shop/fonts, copied by scripts/copy-shop-fonts.ts), latin + latin-ext (Polish letters) ---- */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks (Capsize numbers: average glyph width and ascent/descent of each font against Arial or
   Courier New), so the swap to the web font moves the text very little (CLS). Archivo is used condensed, which no local
   font matches: its fallback only fixes the line height. */
@font-face {
  font-family: 'Geist Fallback';
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 104.75%;
  ascent-override: 95.95%;
  descent-override: 28.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Mono Fallback';
  src: local("Courier New"), local("Liberation Mono"), local("Cousine");
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 98.7%;
  ascent-override: 88.95%;
  descent-override: 21.28%;
  line-gap-override: 0%;
}

/* ---- base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}
main {
  flex: 1 0 auto;
  display: block;
}
main:focus {
  outline: none; /* the skip link lands here; it is not an interactive control */
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}
/* No word left alone on the last line (owner 2026-10-28): headings balanced, running text pretty. */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p, li, dd {
  text-wrap: pretty;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input, select, textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- accessibility helpers ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--sp-4);
  top: -6rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  background: var(--tx);
  color: var(--bg);
  font-weight: 600;
}
.skip:focus {
  top: var(--sp-2);
}

/* ---- layout ---- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sec {
  padding-block: var(--sp-6); /* vertical only: .wrap.sec keeps the wrap's side padding */
}
.sec-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.rule {
  height: var(--bw);
  background: var(--ln);
  border: 0;
  margin: 0;
}

/* ---- header ---- */
/* Catalogue-only mode (SHOP_ORDERING=off): one quiet line above the header, the page's ink inverted. */
.soon-bar {
  margin: 0;
  padding: var(--sp-1) max(16px, env(safe-area-inset-right, 0px)) var(--sp-1) max(16px, env(safe-area-inset-left, 0px));
  background: var(--tx);
  color: var(--bg);
  font-size: var(--fs-sm);
  text-align: center;
}
.soon-bar a,
.soon-tester {
  color: inherit;
  font-weight: 600;
}
.soon-bar a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tester-form {
  margin-top: var(--sp-3);
  text-align: left;
}
.pw-wrap {
  position: relative;
  flex: 1;
  display: flex;
}
.pw-wrap .inp {
  flex: 1;
  padding-right: 44px;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--mu);
  cursor: pointer;
}
.pw-toggle[hidden] {
  display: none;
}
.pw-toggle:hover {
  color: var(--tx);
}
.pw-toggle:focus-visible {
  outline: 2px solid var(--tx);
  outline-offset: 1px;
}
.pw-toggle .pw-slash {
  display: none;
}
.pw-toggle[aria-pressed="true"] .pw-slash {
  display: inline;
}
.tester-form .ck-alert {
  margin-top: var(--sp-2);
}
.site-header {
  background: var(--bg);
  border-bottom: var(--bw) solid var(--ln);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  margin-right: auto;
}
.brand .ico {
  font-size: 1.75rem;
}
/* wordmark C "Quiet" (strategy.md 2026-10-11): wide caps, one weight */
.wm {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
  line-height: 1;
  color: var(--tx);
}
/* outlines of Archivo at width 118, weight 500, tracking .34em. The box is the flat capitals: an even number of pixels high
   (centred on the even icon tile), so their top and baseline fall on whole pixels and stay sharp on any screen; a vector needs
   no other resolutions. The round letters overshoot the box, so it must not clip. Width = height × 13.777, rounded up. */
.wm svg {
  display: block;
  width: 166px;
  height: 12px;
  overflow: visible;
  fill: currentColor;
}
/* icon B "Noir slit" (strategy.md 2026-10-14): a black tile (the steel case) with one amber slit of light below the middle */
.ico {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: var(--tx);
  border-radius: 0.18em;
  overflow: hidden;
}
.ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.6em;
  height: max(0.07em, 3px);
  background: var(--ac);
}
.langsw {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  border-bottom: var(--bw) solid var(--ln);
}
.site-nav {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-5);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a[aria-current="page"],
.site-nav a:hover {
  border-bottom-color: var(--tx);
}
.site-search {
  flex: 1 1 100%;
  display: flex;
  gap: var(--sp-2);
  min-width: 0;
  padding-bottom: var(--sp-2);
}
/* width 0 + grow: the field's built-in width (size=20) would otherwise set the row's minimum and push "Szukaj" off a
   320 px screen */
.site-search .inp {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}
/* On phones the brand row holds the wordmark, the basket and "English" (plan 2, task 4): the wordmark steps down one size, then
   another on the narrowest, and the language link loses its side padding, so all three stay on one line down to 320 px */
@media (max-width: 26rem) {
  .site-header .wrap {
    column-gap: var(--sp-2);
  }
  .brand {
    gap: var(--sp-2);
  }
  .langsw {
    justify-content: center;
    min-width: var(--tap);
    padding-inline: 0;
  }
}
@media (max-width: 22.5rem) {
  .brand .wm svg {
    width: 138px;
    height: 10px;
  }
}
@media (min-width: 76rem) {
  .site-header .wrap {
    flex-wrap: nowrap;
    gap: var(--sp-5);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
  }
  .brand {
    margin-right: 0;
  }
  .site-nav {
    flex: 0 0 auto;
  }
  .site-search {
    flex: 1 1 12rem;
    max-width: 22rem;
    margin-left: auto;
    padding-bottom: 0;
  }
  /* DOM order is brand, language, nav, search (the phone's reading and focus order); on a wide screen the language link goes last */
  .basket-link {
    order: 1;
  }
  .langsw {
    order: 2;
  }
}

/* ---- footer ---- */
.site-footer {
  margin-top: var(--sp-8);
  border-top: var(--bw) solid var(--ln);
  font-size: var(--fs-sm);
}
.site-footer .wrap {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.foot-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 24rem;
}
.foot-brand .brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.foot-brand .ico {
  font-size: 2.125rem;
}
.foot-brand .wm svg {
  width: 221px;
  height: 16px;
}
.foot-tagline {
  font-size: var(--fs-lg);
}
.foot-group h2 {
  margin-bottom: var(--sp-2);
  font: 500 var(--fs-xs) / 1.2 var(--m);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--act);
}
.foot-group a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: underline;
  text-decoration-color: var(--ln);
  text-underline-offset: 0.25em;
}
.foot-group a:hover {
  text-decoration-color: currentColor;
}
/* steelnoir.com's line to the local shop (part D): "Shopping from Poland? Visit steelnoir.pl". */
.foot-local {
  margin-top: var(--sp-2);
}
/* The band under the columns (plan 5): payment methods and delivery partners as white logo tiles, then the company line. */
.site-footer .wrap.foot-base {
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-top: 0;
}
.foot-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--ln);
}
.foot-mark-row h2 {
  margin-bottom: var(--sp-2);
  font: 500 var(--fs-xs) / 1.2 var(--m);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--act);
}
.foot-mark-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.foot-mark-row .mark {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 6px 10px;
  background: var(--s1); /* --s1 is white: the official logos are drawn for a white ground */
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-sm);
}
.foot-mark-row img {
  display: block;
  height: 28px;
  width: auto;
}
@media (min-width: 40rem) {
  .site-footer .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (min-width: 60rem) {
  .site-footer .wrap {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-6) var(--sp-7);
  }
  .foot-brand {
    grid-column: auto;
  }
}

/* ---- type ---- */
.eyebrow {
  font: 500 var(--fs-xs) / 1.2 var(--m);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--act);
}
.h1 {
  font-family: var(--d);
  font-stretch: 75%;
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.h1.display {
  font-size: var(--fs-display);
  line-height: 0.92;
}
.h2 {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.h3 {
  font-size: var(--fs-md);
  font-weight: 500;
}
/* calm title: big condensed caps are for one hero moment per page; product pages use this */
.pt {
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.mu {
  color: var(--mu);
}
.mono {
  font-family: var(--m);
}
.lead {
  font-size: var(--fs-lg);
  color: var(--mu);
  max-width: 36rem;
}
.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  border-bottom: var(--bw) solid var(--ln);
  font-size: var(--fs-sm);
}
.link:hover {
  border-bottom-color: var(--tx);
}
/* running text of guides and policy pages: a readable measure */
.prose {
  max-width: 44rem;
  line-height: 1.65;
}
.prose > * + * {
  margin-top: var(--sp-4);
}
.prose h2 {
  margin-top: var(--sp-6);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.2;
}
.prose h3 {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: 500;
}
.prose ul, .prose ol {
  padding-left: var(--sp-5);
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li + li {
  margin-top: var(--sp-2);
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* the privacy policy's tables (purposes, cookies): a table on a wide screen; on a phone each row is a card, its first cell the
   heading and the others labelled from the cell's data-label (owner, 2026-10-30: most visits are mobile, no sideways scroll) */
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.legal-body th,
.legal-body td {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--ln);
  text-align: left;
  vertical-align: top;
}
.legal-body thead th {
  color: var(--mu);
  font-weight: 500;
}
@media (max-width: 600px) {
  .legal-body table,
  .legal-body tbody,
  .legal-body tr,
  .legal-body td {
    display: block;
  }
  .legal-body thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-body tr {
    padding: var(--sp-3) 0;
    border-bottom: var(--bw) solid var(--ln);
  }
  .legal-body td {
    padding: 0;
    border: 0;
  }
  .legal-body td + td {
    margin-top: var(--sp-2);
  }
  .legal-body td:first-child {
    font-weight: 600;
  }
  .legal-body td + td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--mu);
    font-size: var(--fs-xs, 0.75rem);
  }
}

/* ---- buttons, chips ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.btn-lg {
  min-height: 3.25rem;
  font-size: var(--fs-md);
}
.btn-p {
  background: var(--tx);
  color: var(--bg);
}
.btn-s {
  border: var(--bw) solid var(--ln-ui);
  color: var(--tx);
}
.btn-ac {
  background: var(--ac);
  color: var(--acx);
}
.btn-block {
  display: flex;
  width: 100%;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.chip.on,
.chip[aria-current="true"] {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}

/* ---- status and language tags ---- */
.st {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: 500 var(--fs-xs) / 1.3 var(--m);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.st::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.st-in {
  color: var(--ok);
}
.st-low {
  color: var(--low);
}
.st-out {
  color: var(--mu);
}
/* A pre-order card's row under the price (owner, 2026-10-26: the word only; the ship date is on the product page). */
/* The pre-order word under a card's price: set in the display face like a heading, so a pre-order is a
   small event on the shelf and never reads as in stock (owner, 2026-10-26). */
.pre-w {
  margin-top: 2px;
  font: 600 var(--fs-md)/1.2 var(--d);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--act);
  /* one row on any phone: the word shrinks with the screen below ~410 px instead of wrapping (owner, 2026-10-26) */
  font-size: min(var(--fs-md), 3.9vw);
  white-space: nowrap;
  overflow: hidden;
}
.pre-d {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--act);
  white-space: nowrap;
}
.pdp-preorder {
  margin: var(--sp-2) 0;
}
.pdp-preorder p {
  margin: 0 0 var(--sp-1);
}
.lang-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--mu);
}

/* ---- products: cover, grid, card ---- */
/* A fixed box: the picture is laid over it (absolute), so its own ratio can never stretch the box, and a case that is wider
   than the box sits on the bottom edge. 17:20 (0.85) is the widest upright case in the trimmed dev photos (shrink-wrapped
   steelbooks), so every upright case fills the height and the row is level; only a clearly wider shot comes out shorter. */
/* Photos on white (owner, 2026-10-26: no cut-outs): the box is a white tile with a hairline, so a publisher's white shot blends into
   it and the tile still has an edge on the stone page. */
.cv {
  position: relative;
  aspect-ratio: 17 / 20;
  background: var(--s1);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--ln);
  overflow: hidden;
}
/* The edition frame (owner, 2026-10-28): the title's "(Steelbook)" can be clamped away on a long title, so the tile itself says it.
   A steelbook gets a 3 px brushed-steel ring: a transparent border painted by a gradient on the border box, the white tile painted
   on the padding box over it (the picture is absolute to the padding box, so it never covers the ring). The ring sits inside the
   tile, so the grid stays level. A box set and a standard edition keep the hairline (owner, 2026-10-28, later: a 2 px ink ring on
   box sets drew the eye before the steel, so the steelbook is the one framed edition; "(Zestaw)" in the title says box set).
   Colour is never the only sign: the edition is still in the title text and the filter. */
.cv.ed-steelbook {
  border: 3px solid transparent;
  background: linear-gradient(var(--s1), var(--s1)) padding-box, var(--ed-steel) border-box;
  background-size: auto, 250% 250%;
  background-position: 0 0, 50% 50%;
  box-shadow: var(--ed-steel-shadow);
}
/* The sheen (owner, 2026-10-28): when the pointer rests on a steelbook's card, or the card has keyboard focus, the light sweeps
   once across the steel edge (the oversized gradient slides from its far corner back to rest, 0.9 s) and stops: feedback to the
   customer's own action, never a loop. The rest position is the last keyframe, so nothing jumps when it ends. */
@media (prefers-reduced-motion: no-preference) {
  .card a:hover .cv.ed-steelbook,
  .card a:focus-visible .cv.ed-steelbook {
    animation: steel-sheen 0.9s ease-out 1;
  }
  @keyframes steel-sheen {
    from {
      background-position: 0 0, 100% 100%;
    }
    to {
      background-position: 0 0, 50% 50%;
    }
  }
}
.cv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  padding: 6%;
}
/* The PL pill on a cover, bottom right (owner, 2026-10-26): white, a little Polish flag, white over red, and the claim, "napisy PL"
   (steelnoir.pl only). Colours from tokens.css. */
.tag-pl {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  max-width: calc(100% - 2 * var(--sp-2));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 5px;
  border-radius: var(--r-pill);
  background: var(--s1);
  color: var(--tx);
  box-shadow: 0 0 0 1px var(--tag-ring), 0 1px 3px var(--tag-ring);
  font: 600 var(--fs-xs) / 1 var(--f);
  white-space: nowrap;
  pointer-events: none;
}
.pl-flag {
  flex: none;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(var(--s1) 50%, var(--tag-pl) 50%);
  box-shadow: 0 0 0 1px var(--tag-ring);
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-3);
}
@media (min-width: 40rem) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--sp-7) var(--sp-5);
  }
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* Grid rows stretch the cards to one height and the link fills its card. The title (with its edition) keeps a two-line slot, so
   the price right under it lines up across a row; a pre-order's rows go under the price (owner, 2026-10-26: no
   empty gap above the price on the other cards). */
.card a {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: var(--tap);
}
/* The title row keeps the two-line slot, so the rows below still line up. */
.card .th {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 2.5em;
  font-size: var(--fs-sm);
}
.card .t {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
}
.card .ed {
  font-weight: 400;
  color: var(--mu);
}
.card .o {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--mu);
}
.price {
  font-weight: 500;
  font-feature-settings: "tnum";
}
/* A card's price row: the price, then the 24 h cue right after it as one group (owner 2026-10-28: at the card's far edge it
   read as the neighbour's), one line. */
.price-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.fast {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 var(--fs-xs) / 1 var(--m);
  letter-spacing: 0.03em;
  color: var(--mu);
  white-space: nowrap;
}
.fast-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.empty {
  padding: var(--sp-7) 0;
  max-width: 36rem;
  color: var(--mu);
}

/* ---- key-value lists and the edition index card (languages and specs as data, with the proof) ---- */
.kv {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  gap: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
}
.kv dt {
  color: var(--mu);
}
.idx {
  border: var(--bw) solid var(--ln);
  background: var(--s1);
}
.idx-hd {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: var(--bw) solid var(--tx);
  font: 600 var(--fs-xs) / 1.2 var(--m);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.idx table {
  width: 100%;
  border-collapse: collapse;
  font: var(--fs-xs) / 1.5 var(--m);
}
.idx th,
.idx td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--bw) solid var(--ln);
}
.idx th {
  width: 6rem;
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu);
}
.idx tr.pl th,
.idx tr.pl td {
  background: var(--s2);
}
.idx .no {
  padding: 1px var(--sp-2);
  background: var(--tx);
  color: var(--bg);
  font-weight: 600;
}

/* ---- forms ---- */
.inp {
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-sm);
  background: var(--s1);
  color: var(--tx);
  font-size: var(--fs-md); /* 16 px: iOS does not zoom into the field */
}
.inp::placeholder {
  color: var(--mu);
  opacity: 1;
}

/* ---- video: a thumbnail button until clicked, then the youtube-nocookie player (shop.js) ---- */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tx);
  border-radius: var(--r-sm);
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  /* The play mark: a 4.5rem disc on the poster (the 4rem mark scaled by 9/8 with it), decorative; the link carries the name. */
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: var(--scrim);
}
.video-facade::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -0.85rem 0 0 -0.45rem;
  border-style: solid;
  border-width: 0.85rem 0 0.85rem 1.4rem;
  border-color: transparent transparent transparent var(--on-photo);
}
.video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-sm);
}
/* The video modal (shop.js, owner 2026-10-17): the player at 16:9, min(90vw, 64rem) wide and never taller than the viewport
   leaves room for the close button above it; a dark backdrop. No padding, so a click outside the player is a backdrop click. */
.video-dialog {
  width: min(90vw, 64rem, calc((100svh - 8rem) * 16 / 9));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-dialog::backdrop {
  background: var(--backdrop);
}
.video-dialog-stage {
  background: var(--tx);
  border-radius: var(--r-sm);
}
.video-dialog-close {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--bw) solid var(--on-photo-mu);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-photo);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.video-dialog-close:hover {
  background: var(--scrim);
}
.video-dialog-close:focus-visible {
  outline-color: var(--on-photo);
}
.on-photo {
  color: var(--on-photo);
}
.on-photo .mu {
  color: var(--on-photo-mu);
}

/* ---- product page ---- */
.pdp {
  padding-block: var(--sp-4) var(--sp-8);
}
.pdp > * + * {
  margin-top: var(--sp-7);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--mu);
}
.crumbs li + li::before {
  content: "›";
  margin-right: var(--sp-2);
}
.crumbs a,
.crumbs [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.crumbs a {
  border-bottom: var(--bw) solid transparent;
}
.crumbs a:hover {
  border-bottom-color: var(--tx);
}
.pdp > .crumbs + .pdp-top {
  margin-top: var(--sp-2);
}
.pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a scrolling thumbnail row never widens the column */
  gap: var(--sp-6);
}
.pdp-stage {
  position: relative;
  /* A horizontal swipe on the photo is shop.js's; the page still scrolls vertically. */
  touch-action: pan-y;
}
.pdp-slides > .pdp-main-photo:not(.is-current) {
  display: none;
}
.pdp-main-photo img,
.pdp-thumb img {
  width: 100%;
  height: auto;
  background: var(--s1);
  border-radius: var(--r-sm);
}
/* The photo's width/height attributes are the untrimmed file's; the served image has its white border cut off, so every gallery
   photo gets a fixed box instead of the attributes' ratio: no layout shift when it loads or when another photo is shown, and a
   case at a standard ratio fills it. A wider shot (back, sides, angled) is centred in the box on the surface colour. */
.pdp-main-photo img {
  outline: 1px solid var(--ln);
  outline-offset: -1px;
}
.pdp-main-photo img,
.pdp-thumb img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: 50% 50%;
  /* White margin round every photo, as on the cards (owner, 2026-10-26). */
  padding: 6%;
}
/* Round previous / next buttons over the left and right edge of the photo (added by shop.js). */
.pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--tx);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.pdp-arrow:hover {
  background: var(--s1);
}
.pdp-arrow-prev {
  left: var(--sp-2);
}
.pdp-arrow-next {
  right: var(--sp-2);
}
/* One small row of thumbnails under the photo (about 5rem each, never wrapping); more than fit scroll sideways. The shown one has
   a dark frame. */
.pdp-gallery-list {
  display: flex;
  gap: var(--sp-2);
  /* The padding (cancelled by the negative margin) leaves room for the focus ring inside the scrolling row. */
  padding: var(--sp-2);
  margin: var(--sp-1) calc(-1 * var(--sp-2)) 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sp-2);
}
.pdp-photo {
  flex: 0 0 5rem;
  scroll-snap-align: start;
}
.pdp-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}
.pdp-thumb[aria-current="true"],
.pdp-thumb[aria-pressed="true"] {
  border-color: var(--tx);
  box-shadow: inset 0 0 0 var(--bw) var(--tx);
}
.pdp-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.pdp-subline {
  font-size: var(--fs-sm);
}
.pdp-price {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xl);
  white-space: nowrap;
}
/* The benefits box under the basket button (task 12j, owner 2026-10-17, Zalando as the reference): one bordered box, a row per
   benefit divided by a hairline, a 20 px line icon and one bold line each; the returns row links the returns page. Full width on
   a phone, the basket button's width (26rem) on a desktop. */
.pdp-perks {
  width: 100%;
  margin-top: var(--sp-2);
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-sm);
}
.pdp-perks > li + li {
  border-top: var(--bw) solid var(--ln);
}
.pdp-perk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx);
}
.pdp-perk-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.pdp-perk-link {
  text-decoration: none;
}
.pdp-perk-link:hover span {
  text-decoration: underline;
}
/* The returns row is a link: a small chevron at its end says so. */
.pdp-perk-link::after {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: auto;
  border-top: calc(1.5 * var(--bw)) solid currentColor;
  border-right: calc(1.5 * var(--bw)) solid currentColor;
  transform: rotate(45deg);
}
.pdp-buy-form {
  width: 100%;
  margin-top: var(--sp-3);
}
.pdp-soon .pdp-buy-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.pdp-soon-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
}
@media (min-width: 60rem) {
  .pdp-top {
    /* Gallery and buy column at about 3 : 2 (task 12l, owner 2026-10-17, Zalando's product page as the reference): the buy
       column is ~29rem (467 px) wherever the wrap is at its 80rem cap, and never under 22rem (at 60rem it takes 22rem and the
       gallery the rest). Its right edge is the wrap's content edge, the header's right edge. */
    grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
    gap: var(--sp-7);
    align-items: start;
  }
  /* The main photo's height: the first screen less what sits above it at load (header and breadcrumbs: ~14.6rem while the
     header takes three rows, under 76rem) and a little room below, with the 22rem floor for a very short window. While the
     gallery is stuck (--sp-4 from the top) the photo needs less, so it fits then too. The photo's width follows at 4:5, so its
     box stays exactly 4:5 (no layout shift) and the case is centred inside it (object-fit: contain). */
  .pdp-gallery {
    --pdp-photo-h: max(22rem, calc(100svh - 16rem));
    --pdp-photo-w: calc(var(--pdp-photo-h) * 4 / 5);
  }
  /* The gallery like Zalando's (task 12l): a strip of thumbnails (5rem) left of the photo, both from the same top; the strip and
     the photo sit at the gallery column's left. One photo: the photo alone, at the same size. */
  .pdp-gallery-many {
    display: grid;
    grid-template-columns: 5rem minmax(0, var(--pdp-photo-w));
    column-gap: var(--sp-3);
    justify-content: start;
    align-items: start;
  }
  .pdp-gallery-many > .pdp-stage {
    grid-column: 2;
    grid-row: 1;
  }
  .pdp-gallery:not(.pdp-gallery-many) > .pdp-stage {
    max-width: var(--pdp-photo-w);
  }
  /* The strip is exactly as tall as the photo: `contain: size` keeps its thumbnails out of the row's height, which the photo
     alone sets, and the stretch fills that height. More thumbnails than fit scroll inside the strip (its scroll bar hidden, as
     the chips row's: the cut thumbnail at the bottom says there is more, and shop.js scrolls the shown one into view). The
     padding (cancelled by the negative margin) leaves room for the focus ring. */
  .pdp-gallery-many > .pdp-gallery-list {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    contain: size;
    flex-direction: column;
    margin: calc(-1 * var(--sp-2));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    scroll-padding-block: var(--sp-2);
    scrollbar-width: none;
  }
  .pdp-gallery-many > .pdp-gallery-list::-webkit-scrollbar {
    display: none;
  }
  .pdp-gallery-many .pdp-photo {
    flex: none;
  }
  /* No arrows over the photo on a desktop (owner, 2026-10-17): the strip beside it shows every photo, and the arrows covered the
     art. Thumbnails, ArrowLeft / ArrowRight and the swipe still change the photo; phones and tablets keep the arrows. */
  .pdp-arrow {
    display: none;
  }
  /* The gallery is the sticky column (task 12h, owner 2026-10-17, Zalando's product page as the reference): the photos stay
     while the buy column with every text about the product scrolls beside them; when that column ends, the page scrolls on.
     Sticky inside .pdp-top, so it never runs past the two columns (align-items: start keeps its own height). Only in a window
     at least 36rem tall (task 12h review, minor 4): the 22rem photo floor, the thumbnail row and the top gap need ~32rem, so a
     shorter window would hide the stuck thumbnail row below the fold; there the gallery scrolls with the page. */
  @media (min-height: 36rem) {
    .pdp-gallery {
      position: sticky;
      top: var(--sp-4);
    }
  }
  /* One width in the buy column (task 12l): every block, from the basket button to the videos, spans the whole column, so the
     column has one left and one right edge (the header's). The reading caps (44rem, 60rem) apply outside it only. */
  .pdp-buy > .pdp-buy-form,
  .pdp-buy > .pdp-perks,
  .pdp-buy > .pdp-facts,
  .pdp-buy > .pdp-texts,
  .pdp-buy > .pdp-block {
    width: 100%;
    max-width: none;
  }
  .pdp-buy .pdp-note {
    max-width: none;
  }
}
/* From 76rem the header is one row: header and breadcrumbs take ~8.5rem above the photo. */
@media (min-width: 76rem) {
  .pdp-gallery {
    --pdp-photo-h: max(22rem, calc(100svh - 9.5rem));
  }
}
.pdp-block {
  max-width: 60rem;
}
/* The key facts sit under the basket button (and, on a phone, right after the buy block). */
.pdp-facts {
  width: 100%;
  margin-top: var(--sp-5);
}
/* Ruled rows across the column: the rules show the column's right edge, which meets the header's (owner, 2026-10-17). The
   borders sit on dt and dd, since `.kv > div` is display: contents. */
.pdp-facts .kv {
  gap: 0 var(--sp-4);
}
.pdp-facts .kv dt,
.pdp-facts .kv dd {
  padding-block: var(--sp-2);
  border-bottom: var(--bw) solid var(--ln);
}
.pdp-facts .kv > div:first-child dt,
.pdp-facts .kv > div:first-child dd {
  border-top: var(--bw) solid var(--ln);
}
/* Everything else about the product follows the facts in the same column (task 12h): texts, videos and GPSR at reading width;
   the facts keep their wider cap so their rules reach the column's edge. */
.pdp-buy > .pdp-texts,
.pdp-buy > .pdp-block:not(.pdp-facts) {
  width: 100%;
  max-width: 44rem;
  margin-top: var(--sp-6);
}
/* Below the two columns only wide content remains (other editions of the film), under a hairline. */
.pdp > .pdp-top + * {
  border-top: var(--bw) solid var(--ln);
  padding-top: var(--sp-6);
}
.pdp-block > * + * {
  margin-top: var(--sp-4);
}
.kv > div {
  display: contents;
}
.kv dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pdp-polish dt,
.pdp-polish dd {
  color: var(--tx);
  font-weight: 600;
}
.pdp-texts {
  max-width: 44rem;
}
.pdp-text > * + * {
  margin-top: var(--sp-3);
}
.pdp-text + .pdp-text {
  margin-top: var(--sp-4);
}
/* The product's texts as collapsible rows (task 12j, owner 2026-10-17, Zalando as the reference): native <details>, a hairline
   above each row and below the last, the row's h2 in the summary on the left and a chevron on the right that turns when open.
   Works without JavaScript; shop.js only opens the row a #sec-… link points into. */
.pdp-texts > .pdp-row {
  margin-top: 0;
  border-top: var(--bw) solid var(--ln);
}
.pdp-texts > .pdp-row:last-child {
  border-bottom: var(--bw) solid var(--ln);
}
.pdp-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding-block: var(--sp-2);
  list-style: none;
  cursor: pointer;
}
.pdp-row > summary::-webkit-details-marker {
  display: none;
}
.pdp-row > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--sp-1);
  border-right: calc(1.5 * var(--bw)) solid currentColor;
  border-bottom: calc(1.5 * var(--bw)) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.pdp-row[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}
@media (prefers-reduced-motion: no-preference) {
  .pdp-row > summary::after {
    transition: transform 0.15s ease-out;
  }
}
.prose .pdp-row-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.3;
}
.pdp-row-body {
  padding-bottom: var(--sp-5);
}
.pdp-row-body > * + * {
  margin-top: var(--sp-3);
}
.pdp-list {
  list-style: disc;
  padding-left: var(--sp-5);
}
.pdp-list li + li {
  margin-top: var(--sp-2);
}
/* Videos as posters (owner, 2026-10-17): one video spans the text column (capped at 44rem); two or more sit two per row from
   40rem, one per row below. */
.pdp-videos {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .pdp-videos-many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pdp-videos figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}
.pdp-note {
  font-size: var(--fs-sm);
  max-width: 44rem;
}
.pdp .grid {
  margin-top: var(--sp-4);
}

/* ---- home: hero (a generated photo under a scrim, the H1 and two links) ---- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 24rem;
  overflow: hidden;
  background: var(--tx);
}
.hero-pic {
  position: absolute;
  inset: 0;
}
.hero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-photo-narrow);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-5);
}
/* The hero's headline is two thirds of the display size (owner, 2026-10-17: the banner was too tall; the first products should be on
   the first screen). */
.hero .h1.display {
  font-size: var(--fs-display-hero);
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 40rem;
}
.hero-text .lead {
  color: var(--on-photo-mu);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.btn-on-photo {
  border: var(--bw) solid var(--on-photo);
  color: var(--on-photo);
}
.btn-on-photo:hover {
  background: var(--scrim);
}
@media (min-width: 60rem) {
  .hero {
    min-height: 26rem;
  }
  .hero-inner {
    padding-block: var(--sp-6);
  }
  .hero::after {
    background: var(--scrim-photo);
  }
}

/* ---- home sections ---- */
.home {
  padding-bottom: var(--sp-8);
}
.home-browse .chips + .home-studios-hd {
  margin-top: var(--sp-5);
}
.home-browse > .h2,
.home-studios-hd {
  margin-bottom: var(--sp-3);
}
.home-guide {
  border-top: var(--bw) solid var(--ln);
}
.home-guide p + p {
  margin-top: var(--sp-4);
}

/* ---- category, polish-subtitles and search pages ---- */
.listing {
  padding-block: var(--sp-4) var(--sp-8);
}
.listing > * + * {
  margin-top: var(--sp-5);
}
.listing-count {
  font-size: var(--fs-sm);
}
/* The category row scrolls sideways on a phone with no scrollbar track (task 12k): the half-visible last chip is the cue. */
.cat-links .chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.cat-links .chips::-webkit-scrollbar {
  display: none;
}
@media (min-width: 40rem) {
  .cat-links .chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.chip[aria-current="page"] {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
/* The filter form (owner 2026-10-28, zalando.pl as the reference; task 12k before it). Below 40rem, and wherever ::details-content
   is not supported: one bar of two equal 44 px buttons, the "Filtry (n)" toggle (the <summary> of .fdetails) on the left and the
   Sortuj dropdown on the right, in the first grid row with the <details>, which spans both columns, so the panel opens under
   the bar at full width. In the panel each group (.fdd) is an accordion row: pill-less, full width, its options in one column;
   the Zapisz of each group is hidden there and the actions box under the panel applies them all. */
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: start;
}
.fdetails {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}
.ftoggle {
  width: calc((100% - var(--sp-3)) / 2);
  height: var(--tap);
  padding: 0 var(--sp-4);
  background: var(--s1);
  list-style: none;
  cursor: pointer;
}
.ftoggle::-webkit-details-marker {
  display: none;
}
.ftoggle::after,
.fdd-btn::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: calc(1.5 * var(--bw)) solid currentColor;
  border-bottom: calc(1.5 * var(--bw)) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.fdetails[open] > .ftoggle::after,
.fdd[open] > .fdd-btn::after {
  transform: translateY(25%) rotate(-135deg);
}
.fsort {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.fpanel {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--s1);
  border: var(--bw) solid var(--ln);
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.fdetails:not([open]) ~ .filters-actions {
  display: none;
}
/* One dropdown: the pill (a <summary>) and its panel. */
.fdd {
  position: relative;
  min-width: 0;
}
.fdd-btn {
  justify-content: flex-start;
  width: 100%;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.fdd-btn::-webkit-details-marker {
  display: none;
}
.fdd-n {
  font-variant-numeric: tabular-nums;
}
/* The sort is a pill in both layouts: beside the toggle on a phone, first in the bar on a desktop. */
.fsort .fdd-btn {
  height: var(--tap);
  border-radius: var(--r-sm);
  background: var(--s1);
}
.fsort .fdd-btn.on {
  background: var(--tx);
}
/* In the phone panel a group is an accordion row: the pill becomes a full-width row with the chevron at its end. */
.fpanel .fdd {
  border-top: var(--bw) solid var(--ln);
}
.fpanel .fdd:first-child {
  border-top: 0;
}
.fpanel .fdd-btn {
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tx);
  font-weight: 500;
}
.fpanel .fdd-btn.on .fdd-n {
  color: var(--mu);
}
.fpanel .fdd-panel {
  padding-bottom: var(--sp-3);
}
.fpanel .fdd-foot {
  display: none;
}
/* The dropdown's panel: on a phone in the flow (an accordion); from 40rem floated under the pill (below). */
.fdd-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
/* The sort sits at the bar's right end on a phone, so its panel opens from the pill's right edge. */
.fsort .fdd-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--sp-2));
  right: 0;
  left: auto;
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-3) var(--sp-4);
  background: var(--s1);
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.fsort .fdd-panel {
  max-height: var(--fdd-room);
}
.fsort .fdd-panel .fchecks {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.fdd-foot {
  flex: none;
}
/* A panel that would run past the window's right edge opens from the pill's right edge instead (shop.js). */
.fdd-panel.fdd-panel-r {
  right: 0;
  left: auto;
}
.fchecks {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chk:has(input:disabled) {
  color: var(--mu);
  cursor: default;
}
/* One size for every checkbox; the 44 px tap target is the label's min-height. */
.chk input {
  flex: none;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--tx);
}
.filters .chk span {
  white-space: nowrap;
}
.fsubs-link {
  align-self: flex-start;
  min-height: 1.5rem;
}
/* Wyczyść (the group) and Zapisz: the clear link keeps its place while nothing is chosen, so the footer never jumps. */
.fdd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--ln);
}
.fdd-clear[aria-hidden="true"],
.filters-clear[aria-hidden="true"] {
  visibility: hidden;
}
.fdd-foot[hidden],
.fdd-save[hidden],
.filters-apply[hidden] {
  display: none;
}
/* The Nowości toggle: a pill around a hidden checkbox, filled while it is on. */
.chip-toggle {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.chip-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.chip-toggle:has(input:focus-visible) {
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}
.chip-toggle:has(input:checked) {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
}
.fpanel .chip-toggle {
  align-self: flex-start;
  margin: var(--sp-3) 0;
}
.filters-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  background: var(--s1);
  border: var(--bw) solid var(--ln);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
/* From 40rem the <details> and its panel dissolve (display: contents) and the toggle hides, so the dropdown pills, the sort
   first (order: -1), the Nowości toggle and the actions are one wrapping row. Only where ::details-content can be shown while
   closed; elsewhere the phone layout stays, so the filters are never out of reach. A pill never shrinks or wraps, so nothing in
   the row changes width on a reload except a multi-choice pill's " · n". */
@media (min-width: 40rem) {
  @supports selector(::details-content) {
    .filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-3);
    }
    .fdetails,
    .fpanel {
      display: contents;
    }
    .fdetails::details-content {
      display: contents;
      content-visibility: visible;
    }
    .ftoggle {
      display: none;
    }
    .fsort {
      order: -1;
    }
    .fdd {
      flex: none;
    }
    .fpanel .fdd {
      border-top: 0;
    }
    .fpanel .fdd-btn,
    .fsort .fdd-btn {
      width: auto;
      min-height: var(--tap);
      padding: 0 var(--sp-4);
      border: var(--bw) solid var(--ln-ui);
      border-radius: var(--r-pill);
      background: none;
      color: var(--tx);
      font-weight: 400;
    }
    .fpanel .fdd-btn.on,
    .fsort .fdd-btn.on {
      background: var(--tx);
      color: var(--bg);
      border-color: var(--tx);
    }
    .fpanel .fdd-btn.on .fdd-n {
      color: inherit;
    }
    .fpanel .fdd-panel,
    .fsort .fdd-panel {
      position: absolute;
      z-index: 5;
      top: calc(100% + var(--sp-2));
      left: 0;
      min-width: 16rem;
      max-width: min(22rem, calc(100vw - 2 * var(--sp-4)));
      padding: var(--sp-3) var(--sp-4);
      background: var(--s1);
      border: var(--bw) solid var(--ln);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-pop);
    }
    .fdd-panel.fdd-panel-r {
      right: 0;
      left: auto;
    }
    /* shop.js caps a floating panel at the window's bottom edge; then only the options scroll. */
    .fpanel .fdd-panel {
      max-height: var(--fdd-room);
    }
    .fpanel .fdd-panel .fchecks,
    .fsort .fdd-panel .fchecks {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
    }
    .fpanel .fdd-foot {
      display: flex;
    }
    .fdd-btn::after {
      margin-left: var(--sp-2);
    }
    .fpanel .chip-toggle {
      align-self: auto;
      margin: 0;
    }
    .filters-apply {
      display: none;
    }
    .filters-actions,
    .fdetails:not([open]) ~ .filters-actions {
      display: flex;
      flex: none;
      flex-wrap: nowrap;
      align-self: center;
      margin-left: auto;
      min-height: var(--tap);
      padding: 0;
      background: none;
      border: 0;
      border-radius: 0;
      white-space: nowrap;
    }
  }
}
.active-filters {
  align-items: center;
}
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  font-size: var(--fs-sm);
}

/* ---- content pages (guides, contact, legal) and the error page ---- */
/* one centred reading column (owner 2026-10-20, zalando.pl's policy pages): crumbs, title and text share its left edge */
.article {
  display: grid;
  gap: var(--sp-5);
  max-width: 44rem;
  margin-inline: auto;
}
.article > * {
  min-width: 0;
}
/* the column is already a reading measure: the lead fills it like the text below */
.article .lead {
  max-width: none;
}
.returns-address address {
  font-style: normal;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.returns-address form > * + * {
  margin-top: var(--sp-3);
}
.article-block > * + * {
  margin-top: var(--sp-3);
}
.article-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  padding-top: var(--sp-3);
}
.legal-note {
  color: var(--mu);
}
.legal-meta {
  color: var(--mu);
  font-size: var(--fs-sm);
}
.legal-old {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.legal-draft {
  display: inline-block;
  padding: 0 var(--sp-2);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal-versions {
  margin-top: var(--sp-6);
}
.legal-versions ul {
  margin-top: var(--sp-2);
  padding-left: var(--sp-5);
}
.pdp-guide-link {
  margin-top: var(--sp-3);
}
.error-page {
  display: grid;
  gap: var(--sp-5);
  max-width: 44rem;
}
.error-search label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--mu);
}
.error-search-row {
  display: flex;
  gap: var(--sp-2);
}
.error-search-row .inp {
  flex: 1;
  min-width: 0;
}
.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---- header basket link: a bag and the count (plan 2, task 4) ---- */
.basket-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--tap);
  min-height: var(--tap);
  border-bottom: 2px solid transparent;
}
.basket-link[aria-current="page"],
.basket-link:hover {
  border-bottom-color: var(--tx);
}
.basket-count {
  min-width: 1.35rem;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--ac);
  color: var(--acx);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
  font-feature-settings: "tnum";
}

/* ---- basket page ---- */
.basket-notice {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-sm);
  background: var(--s1);
  max-width: 44rem;
}
.basket-notice p + p {
  margin-top: var(--sp-2);
}
.basket-empty {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.basket-body {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.basket-lines {
  display: grid;
  gap: var(--sp-4);
}
/* Zalando's line (owner, 2026-10-19): cover | title, price, edition, unit price, quantity | × at the top right. */
.basket-line {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw) solid var(--ln);
}
.basket-cv {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
}
.basket-cv img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
.basket-info {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: var(--sp-1);
  justify-items: start;
}
.basket-title {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.basket-info .o {
  font-size: var(--fs-sm);
  color: var(--mu);
}
.basket-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.basket-remove {
  grid-column: 3;
  grid-row: 1;
  /* The 44 px target hangs out so the × itself lines up with the title's first line and the line's right edge. */
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0 0;
}
.basket-qty,
.basket-remove {
  display: flex;
  gap: var(--sp-2);
}
/* WebKit ignores min-height on this select too: a fixed height keeps it 44 px. */
.basket-qty select.inp {
  height: var(--tap);
}
.basket-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  cursor: pointer;
}
.basket-x:hover {
  color: var(--mu);
}
.basket-update[hidden] {
  display: none;
}
.basket-line-total {
  font-weight: 600;
}
.basket-summary {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.basket-sum {
  display: grid;
  gap: var(--sp-2);
}
.basket-sum > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}
.basket-gap {
  font-weight: 500;
}
/* The discount code (owner, 2026-10-18): a fold-out at the top of the basket summary, and the discount row with its Remove button. */
.basket-voucher {
  border-block: var(--bw) solid var(--ln);
}
.basket-voucher > summary {
  padding-block: var(--sp-3);
  font-weight: 500;
  cursor: pointer;
}
.voucher-form {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
}
.voucher-input {
  display: flex;
  gap: var(--sp-2);
}
.voucher-input .inp {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}
.sum-discount dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-3);
}
.voucher-remove {
  display: inline-flex;
}
/* The free-delivery strip (owner, 2026-10-18; "a strip of amber light", 2026-10-19): the logo's slit, a black track that fills with
   amber light and ends at a parcel mark with the threshold; the mark takes the amber once delivery is free (.fl-20). Decorative
   (aria-hidden; the sentence above says it). The CSP forbids style attributes, so the fill is a width class in 5% steps. */
.free-delivery {
  display: grid;
  gap: var(--sp-2);
}
.free-delivery[hidden] {
  display: none;
}
.free-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.free-line {
  flex: 1;
  height: 6px;
  border-radius: var(--r-sm);
  background: var(--tx);
  overflow: hidden;
}
.free-line > span {
  display: block;
  height: 100%;
  background: var(--ac);
  box-shadow: 0 0 6px var(--ac);
}
@media (prefers-reduced-motion: no-preference) {
  .free-line > span {
    transition: width 0.3s ease-out;
  }
}
.free-goal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--mu);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.free-mark {
  color: var(--ln-ui);
}
.free-strip:has(.fl-20) .free-mark {
  color: var(--act);
}
.free-strip:has(.fl-20) .free-goal {
  color: var(--act);
  font-weight: 600;
}
.fl-0 { width: 0%; }
.fl-1 { width: 5%; }
.fl-2 { width: 10%; }
.fl-3 { width: 15%; }
.fl-4 { width: 20%; }
.fl-5 { width: 25%; }
.fl-6 { width: 30%; }
.fl-7 { width: 35%; }
.fl-8 { width: 40%; }
.fl-9 { width: 45%; }
.fl-10 { width: 50%; }
.fl-11 { width: 55%; }
.fl-12 { width: 60%; }
.fl-13 { width: 65%; }
.fl-14 { width: 70%; }
.fl-15 { width: 75%; }
.fl-16 { width: 80%; }
.fl-17 { width: 85%; }
.fl-18 { width: 90%; }
.fl-19 { width: 95%; }
.fl-20 { width: 100%; }
@media (min-width: 60rem) {
  .basket-body {
    grid-template-columns: 1fr 22rem;
    align-items: start;
  }
  /* Desktop as on zalando.pl: cover | details | quantity | ×, all top-aligned on one row. */
  .basket-line {
    grid-template-columns: 6rem 1fr auto auto;
  }
  .basket-cv {
    grid-row: 1;
  }
  .basket-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .basket-remove {
    grid-column: 4;
    margin-top: 0;
  }
  .basket-side {
    position: sticky;
    top: var(--sp-4);
  }
}

/* ---- checkout, test payment and order pages (plan 2, task 5): one column on a phone (320 px too), form and summary side by
   side from 60rem with the summary sticky, like the basket. Errors use --low and a text message, never colour alone. ---- */
.ck-body {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.ck-main,
.ck-side {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
  align-content: start;
}
.ck-set {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ck-set[hidden] {
  display: none;
}
.ck-set legend {
  margin-bottom: var(--sp-3);
  padding: 0;
}
.ck-field {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}
.ck-field > label:not(.chk) {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.ck-field .inp {
  width: 100%;
  min-width: 0;
}
/* WebKit ignores min-height on a select outside a flex row (the basket's sits in one): a fixed height keeps it 44 px. */
.ck-field select.inp {
  height: var(--tap);
}
.ck-field .inp[aria-invalid="true"] {
  border-color: var(--low);
  outline: var(--bw) solid var(--low);
}
.ck-hint {
  font-size: var(--fs-sm);
  color: var(--mu);
}
.ck-error {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--low);
}
.ck-row {
  display: grid;
  gap: var(--sp-4);
}
.ck-alert {
  border-color: var(--low);
}
.ck-errors {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--low);
  border-radius: var(--r-sm);
  background: var(--s1);
  max-width: 44rem;
}
.ck-errors ul {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding-left: var(--sp-5);
  list-style: disc;
}
.ck-errors a {
  display: inline-block;
  padding-block: var(--sp-2);
  text-decoration: underline;
}
/* Private person or company (owner, 2026-10-18): the company block and the delivery address show by what is chosen, by :has() on the
   form, so it works without JavaScript. A company's parcel goes to its own address unless "deliver to a different address" is ticked. */
.ck-choices {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-6);
}
.ck-body:has(#buyer-private:checked) .ck-company,
.ck-body:not(:has(#shipElsewhere:checked)):has(#buyer-company:checked) .ck-ship {
  display: none;
}
.ck-company .chk {
  justify-self: start;
}
/* Delivery methods (plan 3 task 5; Zalando's pattern, not its look): one row per method with its name and price, the checked
   row outlined. A row the chosen country lacks is hidden. */
.ck-method-list {
  display: grid;
  gap: var(--sp-2);
}
/* A method's row holds its radio label and, for the checked point method, the point block (owner, 2026-10-19). */
.ck-method-row {
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-sm);
}
.ck-method-row[hidden] {
  display: none;
}
.ck-method-row:has(> .ck-method input:checked) {
  border-color: var(--tx);
  outline: var(--bw) solid var(--tx);
}
.ck-method {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}
.ck-method-row > .ck-point {
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + var(--sp-3) + 1.25rem);
}
.ck-method input,
.ck-point-opt input {
  flex: none;
  margin: 0;
  accent-color: var(--tx);
}
.ck-method-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.ck-method-price {
  flex: none;
  font-variant-numeric: tabular-nums;
}
/* The pickup point shows only while a point method is checked (:has(), so it works without JavaScript). */
.ck-body:not(:has(input[name="deliveryMethod"][data-point]:checked)) .ck-point {
  display: none;
}
.ck-point-chosen {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ck-point-chosen[hidden],
.ck-point-list[hidden],
.ck-point-search[hidden] {
  display: none;
}
.ck-point > .btn {
  justify-self: start;
}
.ck-point-search {
  display: grid;
  gap: var(--sp-2);
  align-items: end;
}
.ck-point-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ck-point-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.ck-point-opt input {
  grid-row: span 2;
}
.ck-point-opt:has(input:checked) {
  border-color: var(--tx);
  outline: var(--bw) solid var(--tx);
}
.ck-point-name {
  font-weight: 500;
}
.ck-point-addr {
  font-size: var(--fs-sm);
  color: var(--mu);
  overflow-wrap: anywhere;
}
/* The point map (shop.js): full screen on a phone, a large box from 40rem; the close button above the map. */
.point-dialog {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--tx);
}
.point-dialog[open] {
  display: flex;
  flex-direction: column;
}
.point-dialog::backdrop {
  background: var(--backdrop);
}
.point-dialog-close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
/* The point picker (shop.js): search, "near me" and the status on top; the map above the list on a phone, beside it from 40rem. */
.pf-head {
  display: grid;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
}
.pf-title {
  margin: 0;
}
.pf-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
}
.pf-q {
  min-width: 0;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: var(--bw) solid var(--ln-ui);
  border-radius: var(--r-sm);
  background: var(--s1);
  color: var(--tx);
  font: inherit;
}
.pf-locate {
  justify-self: start;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.pf-locate[hidden] {
  display: none;
}
.pf-status {
  min-height: 1.4em;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--mu);
}
.pf-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 38svh 1fr;
  border-top: var(--bw) solid var(--ln);
}
.pf-map {
  min-height: 0;
  background: var(--ln);
}
.pf-map[hidden] {
  display: none;
}
.pf-body:has(> .pf-map[hidden]) {
  grid-template-rows: 1fr;
}
.pf-list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.pf-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw) solid var(--ln);
}
.pf-item.is-on {
  background: var(--s1);
  box-shadow: inset var(--sp-1) 0 0 var(--ac);
}
.pf-main {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  cursor: pointer;
}
.pf-main p {
  margin: 0;
}
.pf-name {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-weight: 600;
}
.pf-dist {
  flex: none;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--mu);
  font-variant-numeric: tabular-nums;
}
.pf-note,
.pf-hours {
  font-size: var(--fs-sm);
  color: var(--mu);
}
.pf-addr {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
/* Map pins (Leaflet divIcons: Leaflet positions the element, the drop shape is its ::before). */
.pf-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--s1);
  border-radius: 50% 50% 50% 0;
  background: var(--tx);
  box-shadow: var(--shadow-drop);
  transform: rotate(-45deg);
}
.pf-pin.is-chosen::before,
.pf-pin.is-on::before {
  background: var(--ac);
}
.pf-pin.is-on::before {
  inset: -4px;
}
.pf-me {
  border: 3px solid var(--s1);
  border-radius: 50%;
  background: var(--act);
  box-shadow: var(--shadow-drop);
}
/* The searched address: a target ring, unlike the point pins (drop shapes) and the "you are here" dot. */
.pf-place {
  border: 6px solid var(--ac);
  border-radius: 50%;
  background: var(--tx);
  box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--tx), var(--shadow-drop);
}
/* The "?" beside Delivery in the basket and checkout summaries (shop.js opens its page in the sheet below); the pseudo-element
   widens the touch area to the 44 px minimum without growing the circle. */
.sheet-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: var(--sp-1);
  border: var(--bw) solid var(--mu);
  border-radius: var(--r-pill);
  color: var(--mu);
  font-size: var(--fs-xs);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.sheet-link::after {
  content: "";
  position: absolute;
  inset: calc((1.25rem - var(--tap)) / 2);
}
.sheet-link:hover {
  border-color: var(--tx);
  color: var(--tx);
}
/* The delivery sheet: the point dialog's frame (full screen on a phone) around a scrolling page body; the page's breadcrumb stays out. */
.sheet-dialog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-inline: var(--sp-4);
  padding-bottom: var(--sp-5);
}
.sheet-dialog-body .crumbs {
  display: none;
}
.sheet-dialog-body .wrap,
.sheet-dialog-body .sec {
  padding: 0;
}
.delivery-table {
  width: 100%;
  border-collapse: collapse;
}
.delivery-table th,
.delivery-table td {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--ln);
  text-align: left;
  vertical-align: top;
}
.delivery-table thead th {
  color: var(--mu);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.delivery-table tbody th {
  font-weight: 500;
}
.ck-summary {
  display: grid;
  gap: var(--sp-3);
}
.ck-lines {
  display: grid;
  gap: var(--sp-3);
}
.ck-line {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw) solid var(--ln);
}
.ck-line-title {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ck-line-title .o {
  font-size: var(--fs-sm);
  color: var(--mu);
}
/* The product name in a summary opens its page in a new tab (the typed form stays); plain text like the basket's titles (owner, 2026-10-19). */
.ck-line-link {
  color: inherit;
  text-decoration: none;
}
.sum-total {
  padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--ln);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.vat-note {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--mu);
}
.ck-precontract {
  margin: 0;
  font-size: var(--fs-sm);
}
.ck-precontract a {
  text-decoration: underline;
}
.ck-terms .chk {
  align-items: flex-start;
  padding-block: var(--sp-2);
}
.ck-terms .chk a {
  text-decoration: underline;
}
.ck-blocked {
  font-weight: 500;
  color: var(--low);
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* .btn's display would win over the hidden attribute (the point map button stays hidden without a dialog API). */
.btn[hidden] {
  display: none;
}
.test-banner {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--ac);
  color: var(--acx);
}
.pay-box {
  display: grid;
  gap: var(--sp-4);
  max-width: 28rem;
  margin-top: var(--sp-4);
}
/* The order page (owner, 2026-11-01): number and status on one line, then the discs and the facts as two cards of a narrower page. */
.order-page {
  max-width: 62rem;
}
.order-page .test-banner {
  margin-block: 0 var(--sp-4);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}
.order-head {
  display: grid;
  gap: var(--sp-2);
}
.order-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.order-status {
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
}
.order-status strong {
  font-weight: 500;
}
.order-grid {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-5);
}
.order-grid section {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-width: 0;
}
.order-card {
  padding: var(--sp-4);
  border: var(--bw) solid var(--ln);
  border-radius: var(--r-sm);
}
/* The facts read as one block: small labels, each fact right under its own. */
.order-facts h2 {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--mu);
}
.order-facts h2:not(:first-child) {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--ln);
}
.order-facts .order-address {
  margin-top: calc(-1 * var(--sp-2));
}
.order-card .ck-line .price {
  white-space: nowrap;
}
.order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-5);
  padding-top: var(--sp-2);
  border-top: var(--bw) solid var(--ln);
}
/* Two quiet links: the withdrawal the law asks for, and our own cancel while nothing has left yet. */
.order-withdraw-link a,
.order-cancel-all a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  color: var(--mu);
  text-decoration: underline;
}
/* The buyer's cancel (on-demand plan, task 12): a quiet link on a waiting disc, a secondary button under the totals. */
.ck-line-title .order-cancel-link {
  color: var(--mu);
  text-decoration: underline;
  justify-self: start;
}
.order-cancel {
  max-width: 36rem;
}
.order-cancel .ck-lines {
  margin-block: var(--sp-3);
}
.order-cancel-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.order-address {
  font-style: normal;
  overflow-wrap: anywhere;
}
@media (min-width: 40rem) {
  .ck-row {
    grid-template-columns: 10rem 1fr;
  }
  .ck-point-search {
    grid-template-columns: 1fr auto;
  }
  .point-dialog {
    width: min(90vw, 60rem);
    height: min(85svh, 48rem);
    margin: auto;
    border-radius: var(--r-sm);
  }
  .pf-head {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--sp-4);
  }
  .pf-title,
  .pf-status {
    grid-column: 1 / -1;
  }
  .pf-body {
    grid-template-rows: none;
    grid-template-columns: 1fr 22rem;
  }
  .pf-body:has(> .pf-map[hidden]) {
    grid-template-columns: 1fr;
  }
  .pf-list {
    border-left: var(--bw) solid var(--ln);
  }
  .sheet-dialog {
    width: min(90vw, 40rem);
    height: auto;
    max-height: min(85svh, 48rem);
  }
}
@media (min-width: 60rem) {
  .ck-body {
    grid-template-columns: 1fr 24rem;
    align-items: start;
  }
  .ck-side {
    position: sticky;
    top: var(--sp-4);
  }
  .order-grid {
    grid-template-columns: 1fr 19rem;
  }
}

/* The withdrawal steps: one readable column, the terms set apart from the form, each field clearly its own. */
.order.order-withdraw {
  max-width: 40rem;
}
.order-withdraw .pt {
  margin-bottom: var(--sp-3);
}
.order-withdraw .lead {
  margin-bottom: var(--sp-3);
}
.order-withdraw > .mu {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.order-withdraw form {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.order-withdraw .ck-field > label:not(.chk) + .inp,
.order-withdraw .ck-hint + .inp {
  margin-top: var(--sp-1);
}
.order-withdraw fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  gap: var(--sp-2);
}
.order-withdraw legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.order-withdraw fieldset > label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-weight: 400;
}
/* The list of discs only matters when the buyer withdraws from some of them. */
.order-withdraw form:has(input[name="scope"][value="all"]:checked) .ck-field:has(#text) {
  display: none;
}
.order-withdraw form > .btn {
  justify-self: start;
}

/* ---- the model withdrawal form (returns page): a fillable box on screen, the only thing on paper ---- */
.withdrawal-form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: var(--bw) solid var(--ln);
  background: var(--s1);
}
.withdrawal-form > * {
  margin: 0;
}
.withdrawal-form h2 {
  margin: 0;
}
.withdrawal-form [data-print][hidden] {
  display: none;
}
.withdrawal-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.withdrawal-form .form-actions a.btn {
  text-decoration: none;
}
.withdrawal-form .form-note {
  color: var(--mu);
  font-size: var(--fs-sm);
}
.withdrawal-form dt {
  color: var(--mu);
  font-size: var(--fs-sm);
}
.withdrawal-form dd {
  margin: 0;
}
.withdrawal-form .form-to {
  display: grid;
  gap: var(--sp-1);
}
/* write-in lines: numbered ones for the goods, then the fields in pairs, the signature and date side by side at the foot */
.withdrawal-form .form-lines {
  padding-left: 1.5em;
  color: var(--mu);
  font-size: var(--fs-sm);
}
.withdrawal-form .form-lines li,
.withdrawal-form dd.blank {
  height: 2.2em;
  border-bottom: var(--bw) solid var(--ln-ui);
}
.withdrawal-form .form-lines li {
  box-sizing: border-box;
  padding-top: 0.9em;
}
.withdrawal-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.withdrawal-form .form-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.withdrawal-form .form-grid .wide {
  grid-column: 1 / -1;
}
.withdrawal-form .form-grid .sign {
  margin-top: var(--sp-5);
}
.withdrawal-form .form-grid .sign dd.blank {
  order: -1;
  height: 3.2em;
}
@media screen and (max-width: 30rem) {
  .withdrawal-form .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media print {
  .skip,
  .no-print,
  body:has(.withdrawal-form) .site-header,
  body:has(.withdrawal-form) .site-footer {
    display: none !important;
  }
  /* on the returns page only the form stays: no heading, crumbs, summary or the other sections */
  main:has(.withdrawal-form) .article > :not(.prose),
  main:has(.withdrawal-form) .prose > :not(.legal-body),
  main:has(.withdrawal-form) .legal-body > :not(.withdrawal-form) {
    display: none !important;
  }
  html,
  body {
    background: var(--s1);
    color: var(--tx);
  }
  main:has(.withdrawal-form) .wrap,
  main:has(.withdrawal-form) .prose {
    max-width: none;
    padding: 0;
  }
  .withdrawal-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--s1);
    color: var(--tx);
    font-size: 11pt;
    break-before: auto;
    break-inside: avoid;
  }
  .withdrawal-form dt,
  .withdrawal-form .form-note {
    color: var(--tx);
  }
  .withdrawal-form dd.blank,
  .withdrawal-form .form-lines li {
    border-bottom-color: var(--tx);
  }
  .withdrawal-form a::after {
    content: none;
  }
}

/* ---- home: the slider (components/banners.tsx; owner, 2026-10-26 mockups, 2026-10-27 without the brand hero). Without JavaScript
   the strip scrolls sideways with snap points; shop.js adds the pause button, the arrows and the bars and moves on by itself. Every
   slide is as tall as the tallest. ---- */
.slider {
  position: relative;
  background: var(--tx);
}
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar {
  display: none;
}
.slides > .slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (prefers-reduced-motion: reduce) {
  .slides {
    scroll-behavior: auto;
  }
}
/* Room under the buttons for the bars (owner, 2026-10-26: the bars sat too close to the buttons). */
.slider .bn-in {
  padding-bottom: calc(var(--sp-5) + 2.75rem);
}
/* The buttons stand at the same height on every slide (owner, 2026-10-27: they jumped as the slides moved). Every slide is as tall as
   the tallest and its text ends at the bottom, so each button sits the same distance above the bars; the pictures stay centred in the
   room left. */
.slider .bn {
  align-items: stretch;
}
.slider .bn-in {
  align-items: end;
}
.slider .bn-shots,
.slider .bn-shot {
  align-self: center;
}
@media (max-width: 59.99rem) {
  .slider .bn-in {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .slider .bn-art .bn-in {
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
  }
}
.slider-nav {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--sp-3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.slider-nav[hidden] {
  display: none;
}
.slider-nav > * {
  pointer-events: auto;
}
/* A bar is drawn inside a 24 px tall button, so the touch target stays large. */
.slider-bar {
  width: 2rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: linear-gradient(var(--bar, var(--bn-bar)), var(--bar, var(--bn-bar))) center / 100% 4px no-repeat;
  cursor: pointer;
}
.slider-bar[aria-current="true"] {
  --bar: var(--bn-cream);
}
.slider-arrow,
.slider-play {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: var(--bw) solid var(--bn-bar);
  background: var(--bn-arrow);
  color: var(--on-photo);
  font: 400 1.375rem/1 var(--f);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.slider.on-light .slider-bar {
  --bar: var(--bn-bar-light);
}
.slider.on-light .slider-bar[aria-current="true"] {
  --bar: var(--tx);
}
.slider.on-light .slider-arrow,
.slider.on-light .slider-play {
  border-color: var(--ln-ui);
  background: var(--s1);
  color: var(--tx);
}
/* The pause button (WCAG 2.2.2: a slideshow that moves by itself can be stopped), apart from the arrows and drawn in CSS: two bars
   while it plays, a triangle once stopped. It stays on phones, where the arrows go. */
.slider-play {
  padding: 0;
  margin-right: var(--sp-2);
}
.slider-play::before {
  content: "";
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.75rem;
  border-left: 0.1875rem solid currentColor;
  border-right: 0.1875rem solid currentColor;
}
.slider-play[data-playing="false"]::before {
  width: 0;
  height: 0;
  margin-left: 0.1875rem;
  border-style: solid;
  border-width: 0.375rem 0 0.375rem 0.625rem;
  border-color: transparent transparent transparent currentColor;
}
@media (max-width: 59.99rem) {
  .slider-arrow {
    display: none;
  }
}

/* ---- banner templates (banners.ts): dark art, dark covers, light photo ---- */
.bn {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 24rem;
}
.bn-dark {
  background: var(--bn-ground);
  color: var(--bn-cream);
}
.bn-light {
  background: var(--s1);
  color: var(--tx);
}
.bn-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  width: 100%;
  padding-top: var(--sp-5);
}
.bn-eye {
  display: block;
  font: 600 0.8125rem/1 var(--d);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
}
.bn-light .bn-eye {
  color: var(--act);
}
.bn-title {
  margin: 0.875rem 0 0.625rem;
  font: 700 clamp(1.75rem, 1rem + 2.9vw, 3.25rem) / 1.02 var(--d);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 16ch;
  text-wrap: balance;
}
.bn-sub {
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: 34rem;
  text-wrap: pretty;
}
.bn-dark .bn-sub {
  color: var(--bn-cream-mu);
}
.bn-light .bn-sub {
  color: var(--mu);
}
.bn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.375rem;
  margin-top: var(--sp-4);
  font-weight: 500;
  text-wrap: pretty;
}
.bn-meta b {
  font-family: var(--m);
  font-weight: 600;
  color: var(--ac);
}
.bn-light .bn-meta b {
  color: var(--act);
}
.bn-cta {
  margin-top: var(--sp-5);
}
/* covers: straight, the white edge of the photos trimmed in proportion (owner, 2026-10-26: no rotation, no white lines) */
.bn-shots {
  display: flex;
  gap: 0.875rem;
  align-items: flex-end;
}
.bn-shots img {
  display: block;
  height: 18.75rem;
  width: auto;
  clip-path: inset(1.2% round 3%);
}
/* photo: our own shot on white */
.bn-light .bn-in {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.bn-light .bn-title {
  max-width: 18ch;
}
.bn-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  object-fit: contain;
}
/* art: the picture fills the slide, the text sits over its dark side */
.bn-art {
  background: var(--bn-ground-art);
}
.bn-bg {
  position: absolute;
  inset: 0;
}
.bn-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.bn-art .bn-in {
  grid-template-columns: minmax(0, 1fr);
}
.bn-art .bn-eye,
.bn-art .bn-meta b {
  color: var(--bn-orange);
}
@media (min-width: 60rem) {
  .bn {
    min-height: 26rem;
  }
}
@media (max-width: 59.99rem) {
  .bn {
    min-height: 0;
    align-items: stretch;
  }
  .bn-in,
  .bn-light .bn-in {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-top: var(--sp-4);
  }
  .bn-shots,
  .bn-shot {
    order: -1;
    justify-content: center;
  }
  .bn-shots img {
    height: 8.125rem;
  }
  .bn-shot img {
    max-height: 10.5rem;
    margin-inline: auto;
    width: auto;
    max-width: 100%;
  }
  .bn-title {
    font-size: 1.625rem;
    margin: 0.625rem 0 0.375rem;
  }
  .bn-sub {
    font-size: 0.9375rem;
  }
  .bn-meta {
    margin-top: 0.625rem;
  }
  .bn-cta {
    margin-top: var(--sp-4);
  }
  .bn-art {
    flex-direction: column;
  }
  .bn-bg {
    position: static;
    height: 11.875rem;
    -webkit-mask-image: var(--bn-fade);
    mask-image: var(--bn-fade);
  }
  .bn-bg img {
    object-position: 78% center;
  }
  .bn-art .bn-in {
    margin-top: -1.75rem;
    padding-top: 0;
  }
}