/* ==========================================================================
   PALAZE® — Components
   Navigation chrome, buttons, cards, drawers, modals, forms, footer, motion.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. ANNOUNCEMENT BAR
   A thin, continuous marquee. Streetwear's most reliable signal of "live".
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--plz-ink);
  color: var(--plz-concrete-2);
  border-bottom: 1px solid rgba(245, 243, 238, 0.10);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.marquee { display: flex; width: 100%; overflow: hidden; }
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  min-width: 100%;
  justify-content: space-around;
  animation: marquee-scroll 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--sp-4); padding-inline: var(--sp-6); white-space: nowrap; }
.marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--plz-concrete); flex: none; }
.marquee__item--accent { color: var(--plz-bone); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. HEADER / NAVIGATION
   Transparent over the hero, then condenses into a solid sticky bar.
   ══════════════════════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              backdrop-filter var(--dur-3) var(--ease-out);
}

/* Over the hero: glass, no rule, so the campaign bleeds to the top edge. */
.header[data-variant="overlay"] {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--plz-bone);
}
.header[data-variant="overlay"] .logo,
.header[data-variant="overlay"] .nav__link,
.header[data-variant="overlay"] .icon-btn { color: var(--plz-bone); }

.header[data-pinned="solid"] {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}

/* Retract the bar on downward scroll, reveal on upward — classic editorial. */
.header[data-hidden="true"] { transform: translateY(-102%); }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
  padding-block: 2px;
}
.logo sup { font-size: 0.42em; letter-spacing: 0; transform: translateY(-0.35em); }
.logo:hover { opacity: 0.72; }
.logo--lg { font-size: var(--t-3xl); letter-spacing: 0.12em; }
.logo--stacked { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

.header__start { display: flex; align-items: center; gap: var(--sp-5); }
.header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }

.nav { display: flex; align-items: center; gap: clamp(var(--sp-4), 2.2vw, var(--sp-7)); }

.nav__link {
  position: relative;
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  padding-block: var(--sp-3);
  color: var(--fg);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--sp-3) - 2px);
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-editorial);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--fg);
  border-radius: var(--r-xs);
  transition: opacity var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.icon-btn:hover { opacity: 0.6; background: var(--fill-subtle); }
.icon-btn svg { width: 19px; height: 19px; }

.cart-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: inline-grid;
  place-items: center;
  background: var(--plz-bone);
  color: var(--plz-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.header[data-variant="overlay"] .cart-count { background: var(--plz-bone); color: var(--plz-ink); }
.cart-count[data-empty="true"] { display: none; }

/* Little "pop" when an item lands in the bag. */
@keyframes count-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.cart-count[data-pop="true"] { animation: count-pop var(--dur-3) var(--ease-out); }

/* Language switch — a Polish brand selling into the EU. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.lang-switch__btn {
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lang-switch__btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.lang-switch__btn:not([aria-pressed="true"]):hover { color: var(--fg); background: var(--fill-subtle); }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile navigation panel ─────────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--plz-ink);
  color: var(--plz-bone);
  display: flex;
  flex-direction: column;
  padding: calc(var(--topbar-h) + var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-7);
  overflow-y: auto;
  transform: translateY(-2%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-editorial),
              visibility var(--dur-3);
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid rgba(245, 243, 238, 0.12);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2xl);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.mobile-nav__link span:last-child {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--track-label);
  color: var(--plz-concrete);
  font-weight: 400;
}
.mobile-nav__footer { margin-top: auto; padding-top: var(--sp-7); }

/* ══════════════════════════════════════════════════════════════════════════
   3. BUTTONS & LINKS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-6);
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  border-radius: var(--r-xs);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
/* Wipe fill — the brand's only "flashy" gesture, and it is monochrome. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-editorial);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover,
.btn:focus-visible { color: var(--btn-bg); }
.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--bg); border-color: var(--fg); }

.btn--inverse { --btn-bg: var(--plz-bone); --btn-fg: var(--plz-ink); }
.btn--dark { --btn-bg: var(--plz-ink); --btn-fg: var(--plz-bone); }
.btn--sm { min-height: 38px; padding-inline: var(--sp-5); font-size: var(--t-2xs); }
.btn--lg { min-height: 58px; padding-inline: var(--sp-8); font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

/* Text link with a rule that draws itself — used for "DISCOVER". */
.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding-bottom: 3px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease-editorial);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-underline svg { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease-out); }
.link-underline:hover svg { transform: translateX(3px); }

.link-quiet {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.link-quiet:hover { text-decoration-color: currentColor; }

/* ══════════════════════════════════════════════════════════════════════════
   4. BADGES, PILLS, SWATCHES
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-xs);
  line-height: 1;
}
.badge--outline { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.badge--muted { background: var(--fill-subtle); color: var(--fg-muted); }
.badge--signal { background: var(--plz-signal); color: var(--plz-ink); }
.badge--burgundy { background: var(--plz-burgundy); color: var(--plz-bone); }

.swatches { display: flex; align-items: center; gap: var(--sp-2); }

.swatch {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  padding: 0;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--fg);
}
.swatch:hover { transform: scale(1.12); }
.swatch--lg { width: 30px; height: 30px; }

.swatch-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swatch-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.swatch-btn:hover { border-color: var(--line-strong); background: var(--fill-subtle); }
.swatch-btn[aria-pressed="true"] { border-color: var(--fg); }
.swatch-btn__chip {
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  flex: none;
}

/* Size selector. Sold-out sizes are struck through, never hidden. */
.sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.size-opt {
  position: relative;
  min-width: 46px;
  height: 42px;
  padding-inline: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  border-radius: var(--r-xs);
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.size-opt:hover:not([disabled]) { border-color: var(--fg); }
.size-opt[aria-pressed="true"],
.size-opt[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.size-opt[disabled] {
  color: var(--fg-subtle);
  cursor: not-allowed;
  overflow: hidden;
}
.size-opt[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent 46%, var(--line-strong) 46%, var(--line-strong) 54%, transparent 54%);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. PRODUCT CARD
   Two stacked frames; hover cross-fades to the second (back / detail) shot.
   ══════════════════════════════════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-3);
}
@media (min-width: 700px) { .product-grid { gap: var(--sp-8) var(--sp-5); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card { position: relative; display: flex; flex-direction: column; }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--plz-bone-2);
  border-radius: var(--r-xs);
}

.product-card__frames,
.product-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.product-card__frame svg { width: 100%; height: 100%; display: block; }

/* The media link is an empty overlay whose accessible name comes from
   aria-label; the art lives in an aria-hidden sibling so no visible SVG text
   leaks into the link's label (WCAG 2.5.3 / axe label-content-name-mismatch). */
.product-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-xs);
}
.product-card__media-link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

.product-card__frame--alt {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-5) var(--ease-out);
}
.product-card__media:hover .product-card__frame--alt,
.product-card__media:focus-within .product-card__frame--alt {
  opacity: 1;
  transform: scale(1);
}
.product-card__frame--main { transition: opacity var(--dur-3) var(--ease-out); }
.product-card__media:hover .product-card__frame--main { opacity: 0; }

.product-card__flags {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  z-index: 2;
  pointer-events: none;
}

.product-card__quick {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-editorial);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { opacity: 1; transform: none; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
}
.product-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.product-card__name {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.product-card__name a::after { content: ""; position: absolute; inset: 0; } /* whole-card hit area */
.product-card { position: relative; }
.product-card__name a { position: static; }
.product-card--linkable .product-card__body { position: static; }
.product-card__name a { color: inherit; }
.product-card:hover .product-card__name a { opacity: 0.72; }
.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 20px;
}
.product-card__colors { display: flex; align-items: center; gap: 5px; }

.price { font-family: var(--font-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price--lg { font-size: var(--t-lg); }
.price__was { color: var(--fg-subtle); text-decoration: line-through; font-size: 0.85em; margin-inline-end: var(--sp-2); }
.price__now { color: var(--fg); }
.price__now--sale { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════════
   6. COLLECTION / EDITORIAL CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 760px) { .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }

.collection-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--plz-ink-3);
  border-radius: var(--r-xs);
  aspect-ratio: 3 / 4;
}
@media (max-width: 759px) { .collection-card { aspect-ratio: 4 / 5; } }

.collection-card__media { position: absolute; inset: 0; }
.collection-card__media svg { width: 100%; height: 100%; }
.collection-card__media { transition: transform var(--dur-5) var(--ease-editorial); }
.collection-card:hover .collection-card__media { transform: scale(1.05); }

.collection-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 9, 0.86) 0%, rgba(9, 9, 9, 0.28) 42%, rgba(9, 9, 9, 0.05) 72%);
}
.collection-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: var(--plz-bone);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 760px) { .collection-card__body { padding: var(--sp-6); } }
.collection-card__index {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--track-label);
  color: var(--plz-concrete-2);
}
.collection-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2xl);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.collection-card__desc { font-size: var(--t-sm); color: rgba(245, 243, 238, 0.76); max-width: 34ch; }
.collection-card__cta { margin-top: var(--sp-2); }

/* ══════════════════════════════════════════════════════════════════════════
   7. FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
}
.field__hint { font-size: var(--t-2xs); color: var(--fg-subtle); }
.field__error {
  font-size: var(--t-2xs);
  color: var(--danger);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.field__error::before { content: "▲"; font-size: 8px; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 13px var(--sp-4);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--t-base);
  color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  min-height: 48px;
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-subtle); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--line-strong); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--fg); outline: none; }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }

.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-9);
  cursor: pointer;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.5;
}
.checkbox input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  display: grid;
  place-content: center;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.checkbox input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.checkbox input[type="checkbox"]:checked { background: var(--fg); border-color: var(--fg); }
.checkbox input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot: humans never see it, bots fill it in. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-note {
  font-size: var(--t-2xs);
  color: var(--fg-subtle);
  line-height: 1.6;
  max-width: 58ch;
}

/* Inline status line for forms (success / error / unconfigured). */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  line-height: 1.55;
  background: var(--fill-subtle);
}
.form-status[data-state="ok"] { border-color: rgba(120, 190, 140, 0.4); }
.form-status[data-state="error"] { border-color: var(--danger); }
.form-status[data-state="unconfigured"] { border-color: var(--plz-signal); }
.form-status svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   8. QUANTITY STEPPER
   ══════════════════════════════════════════════════════════════════════════ */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  height: 46px;
  overflow: hidden;
}
.qty__btn {
  width: 42px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.qty__btn:hover:not([disabled]) { background: var(--fill-hover); color: var(--fg); }
.qty__btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.qty__btn svg { width: 13px; height: 13px; }
.qty__value {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--line);
  height: 100%;
  display: grid;
  place-items: center;
  padding-inline: var(--sp-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   9. CART DRAWER, SEARCH OVERLAY, MODALS
   ══════════════════════════════════════════════════════════════════════════ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(460px, 100vw);
  background: var(--bg);
  color: var(--fg);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-editorial), visibility var(--dur-4);
}
.drawer[data-open="true"] { transform: none; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.drawer__count {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  color: var(--fg-muted);
}
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); }
.drawer__foot { flex: none; border-top: 1px solid var(--line); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.cart-line {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-faint);
}
.cart-line:first-child { padding-top: 0; }
.cart-line__media {
  aspect-ratio: 4 / 5;
  background: var(--plz-bone-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.cart-line__media svg { width: 100%; height: 100%; }
.cart-line__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.cart-line__name { font-size: var(--t-sm); font-weight: 500; line-height: 1.35; }
.cart-line__variant { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); }
.cart-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; }
.cart-line__remove {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-line__remove:hover { color: var(--danger); }

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--t-sm);
}
.summary-row--total {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.summary-row--total .price { font-size: inherit; }

.ship-meter { display: flex; flex-direction: column; gap: var(--sp-2); }
.ship-meter__bar { height: 2px; background: var(--line); overflow: hidden; }
.ship-meter__fill { height: 100%; background: var(--fg); width: 0; transition: width var(--dur-4) var(--ease-out); }
.ship-meter__text { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-editorial), visibility var(--dur-3);
}
.search-overlay[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.search-overlay__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--gutter);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.search-overlay__form { flex: 1; display: flex; align-items: center; gap: var(--sp-4); }
.search-overlay__input {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  padding-block: var(--sp-2);
  min-width: 0;
}
.search-overlay__input::placeholder { color: var(--fg-subtle); font-weight: 400; }
.search-overlay__body { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--gutter) var(--sp-9); }
.search-overlay__section + .search-overlay__section { margin-top: var(--sp-7); }

.search-result {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line-faint);
  border-radius: var(--r-xs);
  transition: background-color var(--dur-1) var(--ease-out);
}
.search-result:hover,
.search-result:focus-visible { background: var(--fill-subtle); }
.search-result__media { aspect-ratio: 1; background: var(--plz-bone-2); border-radius: var(--r-xs); overflow: hidden; }
.search-result__media svg { width: 100%; height: 100%; }
.search-result__name { font-size: var(--t-sm); }
.search-result__cat { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  transition: all var(--dur-2) var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.modal[data-open="true"] { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: min(90dvh, 900px);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr;
  transform: scale(0.97) translateY(10px);
  transition: transform var(--dur-4) var(--ease-editorial);
}
.modal[data-open="true"] .modal__panel { transform: none; }
@media (min-width: 880px) { .modal__panel { grid-template-columns: 1fr 1fr; } }

.modal__media { position: relative; background: var(--plz-bone-2); overflow: hidden; min-height: 260px; }
.modal__media svg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (max-width: 879px) { .modal__media { aspect-ratio: 4 / 5; } }

.modal__content { padding: var(--sp-6); overflow-y: auto; max-height: min(90dvh, 900px); display: flex; flex-direction: column; gap: var(--sp-5); }

.modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--fg);
}
.modal__close:hover { background: var(--fg); color: var(--bg); }

.modal--sheet .modal__panel { width: min(760px, 100%); grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════════════════
   10. TABLES & ACCORDIONS
   ══════════════════════════════════════════════════════════════════════════ */
.table { width: 100%; font-size: var(--t-sm); border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; }
.table th,
.table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.table th {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  font-weight: 500;
  white-space: nowrap;
}
.table td { font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--fill-subtle); }
.table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  padding-bottom: var(--sp-3);
}

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
}
.accordion__trigger:hover { opacity: 0.65; }
.accordion__icon { position: relative; width: 12px; height: 12px; flex: none; }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-editorial);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel-inner { padding-bottom: var(--sp-5); font-size: var(--t-sm); color: var(--fg-muted); display: flex; flex-direction: column; gap: var(--sp-3); }

/* ══════════════════════════════════════════════════════════════════════════
   11. NEWSLETTER
   ══════════════════════════════════════════════════════════════════════════ */
.newsletter__form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 44rem; }
@media (min-width: 620px) {
  .newsletter__form { flex-direction: row; align-items: flex-start; }
  .newsletter__form .input { flex: 1; }
  .newsletter__form .field { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--plz-ink);
  color: var(--plz-bone);
  border-top: 1px solid rgba(245, 243, 238, 0.12);
  padding-top: var(--section-y);
  padding-bottom: var(--sp-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); } }

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--plz-concrete);
  margin-bottom: var(--sp-4);
}
.footer__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__link { font-size: var(--t-sm); color: rgba(245, 243, 238, 0.82); }
.footer__link:hover { color: var(--plz-bone); }
.footer__link[aria-disabled="true"] { color: var(--plz-concrete); cursor: not-allowed; }
.footer__link[aria-disabled="true"]::after {
  content: " — do skonfigurowania";
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.footer__bar {
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(245, 243, 238, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--plz-concrete);
}

/* ══════════════════════════════════════════════════════════════════════════
   13. BREADCRUMBS, PAGINATION, EMPTY STATES, SKELETONS
   ══════════════════════════════════════════════════════════════════════════ */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); }
.breadcrumbs a:hover { color: var(--fg); }
.breadcrumbs__sep { opacity: 0.5; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-9) 0;
  max-width: 46rem;
}
.empty-state__title { font-family: var(--font-display); font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: var(--track-tight); font-weight: 800; }
.empty-state__text { color: var(--fg-muted); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fill-subtle);
  border-radius: var(--r-xs);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--fill-hover), transparent);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.4s var(--ease-in-out) infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
.skeleton--media { aspect-ratio: 4 / 5; }
.skeleton--line { height: 12px; }
.skeleton--line-sm { height: 9px; width: 55%; }

.spinner {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   14. TOASTS
   ══════════════════════════════════════════════════════════════════════════ */
.toast-region {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--plz-bone);
  color: var(--plz-ink);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-lg);
  font-size: var(--t-sm);
  line-height: 1.45;
  animation: toast-in var(--dur-3) var(--ease-editorial);
}
.toast[data-state="error"] { background: var(--plz-ink); color: var(--plz-bone); border: 1px solid var(--danger); }
.toast[data-state="notice"] { background: var(--plz-ink); color: var(--plz-bone); border: 1px solid var(--line-strong); }
.toast[data-leaving="true"] { animation: toast-out var(--dur-2) var(--ease-out) forwards; }
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.toast__title { font-weight: 600; }
.toast__text { color: inherit; opacity: 0.75; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ══════════════════════════════════════════════════════════════════════════
   15. MOTION — scroll reveal
   Elements start hidden only when JS is present (`data-reveal-ready`),
   so a broken script can never leave the page blank.
   ══════════════════════════════════════════════════════════════════════════ */
[data-reveal] { will-change: opacity, transform; }

[data-reveal-ready="true"] [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-5) var(--ease-out),
              transform var(--dur-5) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-ready="true"] [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-5) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-ready="true"] [data-reveal][data-revealed="true"] { opacity: 1; transform: none; }
[data-reveal-ready="true"] [data-reveal="mask"][data-revealed="true"] { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal-ready="true"] [data-reveal],
  [data-reveal-ready="true"] [data-reveal="mask"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Hero word-by-word reveal. */
.hero-line { display: block; overflow: hidden; }
.hero-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-5) var(--ease-editorial);
  transition-delay: var(--line-delay, 0ms);
}
[data-hero-ready="true"] .hero-line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-line > span { transform: none; transition: none; }
}

/* Slow parallax zoom on campaign imagery. */
@keyframes ken-burns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.ken-burns { animation: ken-burns 2.4s var(--ease-editorial) both; }
@media (prefers-reduced-motion: reduce) { .ken-burns { animation: none; } }

/* Ticker for the campaign strip. */
.ticker {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp-4);
  user-select: none;
}
.ticker__track {
  display: flex;
  flex: none;
  align-items: center;
  min-width: 100%;
  justify-content: space-around;
  gap: var(--sp-7);
  animation: ticker-scroll 32s linear infinite;
  padding-inline: var(--sp-4);
}
.ticker__item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2xl);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
}
.ticker__item em { color: var(--fg-muted); }
@keyframes ticker-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   16. DESKTOP / MOBILE NAV SWITCH
   ══════════════════════════════════════════════════════════════════════════ */
/* Deterministic grid placement so the three header zones never drift. */
.header__start { grid-column: 1; }
.header__nav   { grid-column: 2; justify-self: center; }
.header__end   { grid-column: 3; justify-self: end; }

@media (max-width: 959px) {
  .nav--desktop { display: none; }
  .burger { display: flex; }
  /* Two columns on mobile: brand left, actions hard right. */
  .header__inner { grid-template-columns: 1fr auto; }
  .header__start { gap: var(--sp-2); }
  .header__end { grid-column: 2; }
  .header__end .icon-btn--account { display: none; }
  .lang-switch--header { display: none; }
}
@media (min-width: 960px) {
  .burger { display: none; }
  .mobile-nav { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. PRINT — invoices, packing slips, size guides
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  .header, .topbar, .footer, .drawer, .scrim, .modal, .search-overlay, .toast-region, .mobile-nav { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="#"]::after { content: ""; }
}