/* Fragamo — storefront styles */

:root {
  --brand: #8b0001;
  --brand-dark: #77001d;
  --brand-light: #c81042;
  --accent: #ff83b0;
  --accent-soft: #ffe9f1;
  --gold: #b8912f;
  --ink: #1b1a1f;
  --muted: #6f6b75;
  --line: #e9e4ea;
  --bg: #ffffff;
  --soft: #faf6f8;
  --ok: #17864a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(27, 26, 31, 0.07);
  --shadow-lg: 0 12px 40px rgba(27, 26, 31, 0.16);
  --container: 1400px;
  --topbar-h: 30px;
  /* Sticky offset for the filter sidebar and cart summary: the pinned part of
     the header, i.e. everything except the promo bar that scrolls away. */
  --header-h: 141px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 600; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ header */

.topbar {
  background: var(--brand);
  color: #fff;
  font-size: 12.5px;
}
/* The ticker runs edge to edge, so it opts out of the centred page width. */
.topbar .container {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0; max-width: none;
}
.topbar__promo { display: flex; align-items: center; font-weight: 500; min-width: 0; width: 100%; }
/* Inline icons carry no width/height attributes, so they need explicit sizing. */
.topbar__promo svg { width: 15px; height: 15px; flex-shrink: 0; }

/* The promo bar is a running ticker at every width. */
.marquee { overflow: hidden; width: 100%; }
.marquee__track { display: flex; width: max-content; animation: marquee 19s linear infinite; }
.marquee__group { display: flex; }
/* Generous spacing keeps the same message from reappearing too often. The
   duration scales with it so the scroll speed stays put. */
.marquee__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding-right: 96px; white-space: nowrap;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Half the track is one full copy of the list, so this loops seamlessly. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Without motion the ticker collapses to a single centred message. */
@media (prefers-reduced-motion: reduce) {
  .marquee { display: flex; justify-content: center; }
  .marquee__track { animation: none !important; }
  .marquee__group:nth-child(2) { display: none !important; }
  .marquee__group .marquee__item:not(:first-child) { display: none !important; }
  .marquee__item:first-child { padding-right: 0; }
}

/* Sticky must live on the wrapper: pinning .header itself did nothing, because
   its containing block is exactly as tall as its contents, leaving no travel.
   The negative offset lets the promo bar scroll away while the action row and
   nav stay pinned. */
#site-header {
  position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 60;
  background: #fff;
}
.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* Equal side columns keep the search bar centred on the page rather than in
   whatever space is left over next to the logo. */
.header__main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 24px; padding: 14px 0;
}
.header__main > .logo { justify-self: start; }

.logo { display: flex; align-items: center; gap: 11px; line-height: 1; flex-shrink: 0; }
.logo__mark {
  width: 54px; height: 54px; object-fit: contain; flex-shrink: 0;
  transition: transform .25s ease;
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.05); }
.logo__text { display: flex; flex-direction: column; }
/* Tracking is tightened so the ten-letter wordmark still fits a phone header. */
.logo__word {
  font-size: clamp(15px, 2.6vw, 20px); font-weight: 700; letter-spacing: 1.8px;
  color: var(--brand); text-transform: uppercase; white-space: nowrap;
}
.logo__tag {
  font-size: 8.5px; letter-spacing: 2.2px; color: var(--muted);
  text-transform: uppercase; margin-top: 4px; padding-left: 2px; white-space: nowrap;
}

.search { position: relative; width: min(640px, 42vw); justify-self: center; }
.search form { display: flex; }
.search input {
  flex: 1; height: 44px; padding: 0 16px;
  border: 2px solid var(--line); border-right: 0;
  border-radius: 24px 0 0 24px; font-size: 15px; outline: none;
}
.search input:focus { border-color: var(--brand); }
.search button {
  width: 58px; border: 0; border-radius: 0 24px 24px 0;
  background: var(--brand); color: #fff; display: grid; place-items: center;
}
.search button svg { width: 20px; height: 20px; }
.search button:hover { background: var(--brand-dark); }

.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; display: none;
}
.suggest.open { display: block; }
.suggest__item { display: flex; gap: 12px; padding: 9px 14px; align-items: center; }
.suggest__item:hover { background: var(--soft); }
.suggest__item img { width: 40px; height: 46px; object-fit: contain; }
.suggest__name { font-size: 13.5px; }
.suggest__brand { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.suggest__price { margin-left: auto; font-weight: 700; color: var(--brand); font-size: 13.5px; }
.suggest__head {
  padding: 7px 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: var(--soft);
}

.header__actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
.icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 11px; position: relative;
}
.icon-btn:hover { background: var(--soft); color: var(--brand); }
.icon-btn svg { width: 23px; height: 23px; }
/* Promo and cart carry the brand colour, matching the burger. */
.icon-btn--brand { color: var(--brand); }
.icon-btn--brand:hover { background: var(--soft); color: var(--brand-dark); }
.badge {
  position: absolute; top: 2px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* nav */
.nav { border-top: 1px solid var(--line); background: #fff; }
.nav__list { display: flex; align-items: stretch; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px;
  font-size: 14.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 3px solid transparent;
}
.nav__item:hover > .nav__link,
.nav__link.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.nav__link--hot { color: var(--brand); }
.nav__caret { width: 10px; height: 10px; opacity: .55; }

.mega {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--brand);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .16s ease; z-index: 70;
}
.nav__item:hover .mega { opacity: 1; visibility: visible; transform: none; }
.mega a {
  display: flex; justify-content: space-between; gap: 20px; padding: 8px 20px; font-size: 14px;
}
.mega a:hover { background: var(--soft); color: var(--brand); }
.mega .count { color: var(--muted); font-size: 12px; }

.burger { display: none; }

/* Drawer-only title bar; the desktop nav is a plain horizontal bar. */
.nav__head {
  display: none; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--brand); color: #fff; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; font-size: 13.5px; flex-shrink: 0;
}
.nav__close {
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1;
  padding: 0 2px;
}
.nav__close:hover { color: var(--accent); }

/* ------------------------------------------------------------------- hero */

.hero { padding: 22px 0 6px; }
.hero__track {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 340px; isolation: isolate;
}

/* Slides are stacked; only the active one fades and settles into place. */
.hero__slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 46px 56px; color: #fff;
  opacity: 0; visibility: hidden; transform: scale(1.06);
  transition: opacity .5s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1), visibility .5s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }

/* The decoration layer is appended last so it stays out of the copy stagger. */
.hero__slide > *:not(.hero__fx) {
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.hero__slide.is-active > *:not(.hero__fx) { opacity: 1; transform: none; }
.hero__slide.is-active > *:nth-child(1) { transition-delay: .1s; }
.hero__slide.is-active > *:nth-child(2) { transition-delay: .18s; }
.hero__slide.is-active > *:nth-child(3) { transition-delay: .26s; }
.hero__slide.is-active > *:nth-child(4) { transition-delay: .34s; }

/* ---------------------------------------------------- hero decoration ---- */

.hero__fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Soft light pools drifting behind the copy. */
.hero__orb {
  position: absolute; border-radius: 50%; filter: blur(38px); opacity: .5;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
}
.hero__orb--a { width: 300px; height: 300px; top: -90px; left: 6%; animation: hero-drift-a 19s ease-in-out infinite alternate; }
.hero__orb--b { width: 240px; height: 240px; bottom: -80px; left: 42%; animation: hero-drift-b 23s ease-in-out infinite alternate; }

/* Fragrance motes rising and fading out. */
.hero__mote {
  position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .8); opacity: 0;
  animation: hero-rise linear infinite;
}

.hero__art {
  position: absolute; right: 4%; top: 50%; width: 260px; max-width: 42%;
  transform: translateY(-50%); color: #fff; opacity: .22;
  animation: hero-float 9s ease-in-out infinite;
}
.hero__art svg { width: 100%; height: auto; }

/* A slow diagonal highlight sweeping across the panel. */
.hero__sheen {
  position: absolute; top: -60%; left: -40%; width: 45%; height: 220%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0));
  transform: rotate(18deg); animation: hero-sheen 11s ease-in-out infinite;
}

@keyframes hero-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(70px, 50px) scale(1.18); }
}
@keyframes hero-drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(-80px, -40px) scale(.9); }
}
@keyframes hero-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .7; }
  85% { opacity: .35; }
  100% { transform: translateY(-320px) scale(.4); opacity: 0; }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(calc(-50% - 14px)) rotate(2.5deg); }
}
@keyframes hero-sheen {
  0%, 100% { transform: translateX(0) rotate(18deg); }
  50% { transform: translateX(320%) rotate(18deg); }
}

/* Off-screen slides keep their layers frozen rather than burning frames. */
.hero__slide:not(.is-active) .hero__fx * { animation-play-state: paused; }

.hero__slide--1 { background: linear-gradient(115deg, #6b0019 0%, #a30028 45%, #d94a76 100%); }
.hero__slide--2 { background: linear-gradient(115deg, #2b1b3d 0%, #6c3baa 50%, #b98bd8 100%); }
.hero__slide--3 { background: linear-gradient(115deg, #3d2410 0%, #8a5a1f 50%, #d9b26a 100%); }
.hero__eyebrow {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; opacity: .9; margin-bottom: 12px;
}
.hero__title { font-size: 42px; max-width: 15em; margin-bottom: 12px; font-weight: 700; }
.hero__text { font-size: 17px; max-width: 34em; opacity: .95; margin-bottom: 24px; }

.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center; backdrop-filter: blur(3px);
  transition: background .16s ease, transform .16s ease;
}
.hero__nav:hover { background: rgba(255, 255, 255, .34); }
.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }
.hero__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero__nav--next:hover { transform: translateY(-50%) translateX(2px); }

.hero__dots { display: flex; gap: 8px; justify-content: center; padding: 14px 0 0; }
.hero__dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); transition: width .35s ease, background .25s ease;
}
.hero__dots button:hover { background: var(--accent); }
.hero__dots button.is-active { background: var(--brand); width: 26px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide > *:not(.hero__fx) { transition-duration: .01ms; transform: none; }
  .hero__fx * { animation: none !important; }
  .hero__mote, .hero__sheen { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 26px; border: 0; border-radius: 24px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 15px;
  transition: .15s ease; white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); }
.btn--light { background: #fff; color: var(--brand); }
.btn--light:hover { background: var(--accent-soft); color: var(--brand-dark); }
.btn--ghost { background: none; border: 2px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: none; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--gold { background: var(--gold); }
.btn--gold:hover { background: #96751f; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- trust strip */

.usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 26px 0; }
.usp__item {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; background: var(--soft); border-radius: var(--radius);
}
.usp__item svg { width: 30px; height: 30px; color: var(--brand); flex-shrink: 0; }
.usp__item strong { display: block; font-size: 14px; }
.usp__item span { font-size: 12.5px; color: var(--muted); }

/* -------------------------------------------------------------- sections */

.section { padding: 30px 0; }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.section__title { font-size: 25px; margin: 0; position: relative; padding-left: 14px; }
.section__title::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 2px; background: var(--brand);
}
.section__link { color: var(--brand); font-weight: 600; font-size: 14px; }
.section__link:hover { text-decoration: underline; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 150px; padding: 18px; color: #fff; display: flex; align-items: flex-end;
  font-weight: 600; font-size: 16px; transition: .18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile span { position: relative; z-index: 2; }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55) 100%);
}
.tile--w { background: linear-gradient(140deg, #c2185b, #ff9ec4); }
.tile--m { background: linear-gradient(140deg, #17324f, #4a7fb5); }
.tile--u { background: linear-gradient(140deg, #4a2a6b, #a97fd0); }
.tile--n { background: linear-gradient(140deg, #1f1f2b, #6b6b8c); }

/* Each tile carries a themed line-art mark pinned to its top-right corner. Every
   viewBox is cropped to that mark's measured bounds and the box matches its
   aspect ratio, so all four read at the same visual weight with no letterboxing
   and no drift away from the corner. */
.tile::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 12px; right: 12px;
  transform-origin: top right;
  background: no-repeat center / contain;
  opacity: .34;
  transition: transform .3s ease, opacity .3s ease;
}
.tile:hover::before { transform: scale(1.08) rotate(-5deg); opacity: .5; }
.tile--w::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'14.7%2021.7%2077.6%2067.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'16'%20y%3D'44'%20width%3D'36'%20height%3D'44'%20rx%3D'12'%2F%3E%3Cpath%20d%3D'M28%2044v-9h12v9'%2F%3E%3Crect%20x%3D'26'%20y%3D'24'%20width%3D'16'%20height%3D'11'%20rx%3D'4'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'64'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'30'%20r%3D'7'%2F%3E%3Ccircle%20cx%3D'84'%20cy%3D'42'%20r%3D'7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'54'%20r%3D'7'%2F%3E%3Ccircle%20cx%3D'60'%20cy%3D'42'%20r%3D'7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'42'%20r%3D'4'%20fill%3D'%23fff'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M72%2061v22'%2F%3E%3C%2Fsvg%3E"); width: 84px; height: 73px; }
.tile--m::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'22.7%2020.7%2062.6%2070.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M24%2046h44v38a6%206%200%200%201-6%206H30a6%206%200%200%201-6-6z'%2F%3E%3Cpath%20d%3D'M38%2046v-9h16v9'%2F%3E%3Crect%20x%3D'36'%20y%3D'22'%20width%3D'20'%20height%3D'15'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M34%2060h24M34%2072h24'%2F%3E%3Cpath%20d%3D'M78%2034v52'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M72%2044l6-10%206%2010'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E"); width: 74px; height: 84px; }
.tile--u::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'15.7%2020.7%2070.6%2057.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'38'%20cy%3D'56'%20r%3D'21'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'56'%20r%3D'21'%2F%3E%3Cpath%20d%3D'M51%2022c7%2010%2011%2016%2011%2022a11%2011%200%200%201-22%200c0-6%204-12%2011-22z'%20fill%3D'%23fff'%20stroke%3D'none'%20opacity%3D'.85'%2F%3E%3C%2Fsvg%3E"); width: 84px; height: 69px; }
.tile--n::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'16.7%208.7%2072.6%2080.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'18'%20y%3D'48'%20width%3D'34'%20height%3D'40'%20rx%3D'7'%2F%3E%3Cpath%20d%3D'M28%2048v-8h14v8'%2F%3E%3Cpath%20d%3D'M35%2016v22'%20stroke-width%3D'3.4'%2F%3E%3Crect%20x%3D'29'%20y%3D'10'%20width%3D'12'%20height%3D'9'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M74%2038l14%2012-14%2026-14-26z'%2F%3E%3Cpath%20d%3D'M60%2050h28M74%2038v38'%20stroke-width%3D'1.8'%2F%3E%3C%2Fsvg%3E"); width: 76px; height: 84px; }


/* ------------------------------------------------------------ product card */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.carousel { position: relative; }
.carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 14px; padding-bottom: 4px; }
.carousel__track > * { flex: 0 0 210px; scroll-snap-align: start; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; z-index: 5;
}
.carousel__nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.carousel__nav--prev { left: -12px; }
.carousel__nav--next { right: -12px; }

.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 12px; transition: .16s ease;
}
.card:hover { box-shadow: var(--shadow-lg); border-color: #ddd6dd; transform: translateY(-2px); }
.card__media {
  position: relative; aspect-ratio: 1 / 1.1;
  display: grid; place-items: center; margin-bottom: 10px; overflow: hidden;
}
.card__media img {
  max-height: 100%; width: auto; object-fit: contain;
  transition: transform .3s ease; mix-blend-mode: multiply;
}
.card:hover .card__media img { transform: scale(1.06); }
.card__brand {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: 600; margin-bottom: 3px;
}
.card__name {
  font-size: 13.5px; line-height: 1.35; min-height: 2.7em; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card:hover .card__name { color: var(--brand); }
.card__meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.card__rating { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-bottom: 6px; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.card__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
/* A price must never break between the amount and its currency sign. */
.price, .price--old, .price__eur { white-space: nowrap; }
.price { font-size: 19px; font-weight: 700; color: var(--brand); }
.price--old { font-size: 13px; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.price__eur { font-size: 11.5px; color: var(--muted); }
.card__cta { margin-top: 10px; }

.flags { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.flag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  background: var(--brand); color: #fff; text-transform: uppercase; letter-spacing: .4px;
}
.flag--new { background: var(--ok); }
.flag--niche { background: #4a2a6b; }
.flag--out { background: var(--muted); }

/* --------------------------------------------------------------- brands */

.brand-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.brand-chip {
  display: grid; place-items: center; text-align: center; min-height: 62px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 600; font-size: 13.5px; color: var(--ink); background: #fff;
}
.brand-chip:hover { border-color: var(--brand); color: var(--brand); }

.brands-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 20px; }
.brands-index a { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.brands-index a:hover { color: var(--brand); }
.alpha-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.alpha-nav a {
  min-width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
}
.alpha-nav a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ------------------------------------------------------------ breadcrumbs */

.crumbs { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--muted); padding: 14px 0; }
.crumbs a:hover { color: var(--brand); }
.crumbs span:last-child { color: var(--ink); }

/* -------------------------------------------------------- category layout */

.catalog { display: grid; grid-template-columns: 268px 1fr; gap: 26px; padding-bottom: 40px; }

.filters { align-self: start; position: sticky; top: calc(var(--header-h) + 8px); }
.filters__box { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.filters__title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-weight: 600; font-size: 14.5px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.filters__body { padding: 12px 14px; max-height: 290px; overflow-y: auto; }
.filters__body::-webkit-scrollbar { width: 6px; }
.filters__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.filters__search {
  width: 100%; height: 34px; padding: 0 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; outline: none;
}
.filters__search:focus { border-color: var(--brand); }
.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.check .count { margin-left: auto; color: var(--muted); font-size: 12px; }
.check:hover { color: var(--brand); }

.price-range { display: flex; align-items: center; gap: 8px; }
.price-range input {
  width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13px; outline: none;
}
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--accent-soft); color: var(--brand-dark);
  border-radius: 14px; font-size: 12.5px; font-weight: 600;
}
.chip button { background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; padding: 0; }

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--soft); border-radius: var(--radius); margin-bottom: 16px;
}
.toolbar__count { font-size: 13.5px; color: var(--muted); }
.toolbar__count b { color: var(--ink); }
.select {
  height: 38px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff no-repeat right 10px center; font-size: 13.5px; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236f6b75' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}
.select:focus { border-color: var(--brand); }

.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 26px 0; }
.pagination button, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 14px;
}
.pagination button:hover { border-color: var(--brand); color: var(--brand); }
.pagination button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); }

.skeleton { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.skeleton__box, .skeleton__line {
  background: linear-gradient(90deg, #f1eef1 25%, #e7e2e8 37%, #f1eef1 63%);
  background-size: 400% 100%; animation: shimmer 1.3s infinite linear; border-radius: 6px;
}
.skeleton__box { aspect-ratio: 1 / 1.1; margin-bottom: 10px; }
.skeleton__line { height: 11px; margin-bottom: 7px; }
.skeleton__line--short { width: 55%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --------------------------------------------------------- product page */

.product { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 34px; }
.product__media {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  display: grid; place-items: center; position: relative; background: #fff;
  min-height: 420px;
}
.product__media img { max-height: 460px; width: auto; mix-blend-mode: multiply; }
.product__brand {
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 8px; display: inline-block;
}
.product h1 { font-size: 27px; margin-bottom: 10px; }
.product__sub { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.product__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13.5px; }

.pricebox {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--soft); border-radius: var(--radius); margin-bottom: 18px;
}
.pricebox .price { font-size: 32px; }
.pricebox__save {
  padding: 4px 10px; border-radius: 4px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700;
}

.variants { margin-bottom: 18px; }
.variants__label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.variants__list { display: flex; flex-wrap: wrap; gap: 8px; }
.variant {
  padding: 8px 16px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 13.5px; font-weight: 600;
}
.variant:hover { border-color: var(--accent); }
.variant.is-active { border-color: var(--brand); color: var(--brand); background: var(--accent-soft); }

.buybox { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 24px; overflow: hidden; }
.qty button { width: 40px; height: 42px; border: 0; background: none; font-size: 18px; color: var(--brand); }
.qty button:hover { background: var(--soft); }
.qty input { width: 44px; height: 42px; border: 0; text-align: center; font-size: 15px; font-weight: 600; outline: none; }
/* The − / + buttons replace the native number spinners. */
.qty input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stock { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.stock--in { color: var(--ok); }
.stock--out { color: var(--brand); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.perks { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.perks li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); }
.perks svg { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; }

.pyramid { display: grid; gap: 10px; margin: 20px 0; }
.pyramid__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; font-size: 14px; }
.pyramid__row dt { font-weight: 600; color: var(--muted); font-size: 13px; }
.pyramid__row dd { margin: 0; }

.tabs { border-bottom: 2px solid var(--line); display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs button {
  padding: 12px 20px; border: 0; background: none; font-weight: 600; font-size: 15px;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tabpanel { display: none; max-width: 900px; }
.tabpanel.is-active { display: block; }
.spec { display: grid; grid-template-columns: 190px 1fr; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.spec dt, .spec dd { background: #fff; padding: 11px 16px; margin: 0; font-size: 14px; }
.spec dt { font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------------ cart page */

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 26px; padding-bottom: 40px; }
/* Desktop keeps one flat row. The actions wrapper only exists for the mobile
   layout, so here it dissolves and its children sit in the parent grid. */
.cart-row__actions { display: contents; }
.cart-row > .cart-row__media { grid-column: 1; }
.cart-row > .cart-row__info { grid-column: 2; }
.cart-row .qty { grid-column: 3; }
.cart-row > .price { grid-column: 4; }
.cart-row .cart-row__remove { grid-column: 5; }

.cart-row {
  display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cart-row img { width: 88px; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.cart-row__name { font-size: 14.5px; font-weight: 600; }
.cart-row__meta { font-size: 12.5px; color: var(--muted); }
.cart-row__remove { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; }
.cart-row__remove:hover { color: var(--brand); }

.summary {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  align-self: start; position: sticky; top: calc(var(--header-h) + 8px);
}
.summary__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14.5px;
}
/* Per-line amounts carry no .price class, so they need the no-break rule of
   their own; the label beside them shrinks instead. */
.summary__row > :last-child { white-space: nowrap; }
.summary__row > :first-child { min-width: 0; }
.summary__row--total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
  font-size: 19px; font-weight: 700;
}
.summary__row--total .price { font-size: 24px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select {
  height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; outline: none; background: #fff; color: var(--ink);
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 90px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.field small { color: var(--muted); font-size: 12px; }
.field.has-error input { border-color: var(--brand); }

/* The chosen pickup point: a field to look at, not one to type in. */
.field input[readonly] { background: var(--soft); color: var(--muted); cursor: default; }
.field input[readonly]:focus { border-color: var(--line); outline: none; }
.field.has-error input[readonly] { border-color: var(--brand); }

/* Single payment method: shown as a statement, not offered as a choice. */
.payment-note {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--soft);
}
.payment-note svg { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; }
.payment-note strong { display: block; font-size: 14.5px; }
.payment-note span { font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------- delivery */

/* Each step of the delivery choice is a labelled group, so the form reads as
   "deliver where → which courier → which office" rather than as a wall of
   controls. fieldset carries that grouping to a screen reader for free. */
.checkout-block { border: 0; padding: 0; margin: 0 0 22px; }
.checkout-block legend {
  padding: 0; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

.delivery-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.delivery-tab, .courier {
  font: inherit; cursor: pointer; text-align: center;
  padding: 16px 14px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--muted); font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.delivery-tab:hover, .courier:hover { border-color: var(--brand-light); color: var(--ink); }
.delivery-tab.is-active, .courier.is-active {
  border-color: var(--brand); background: var(--accent-soft); color: var(--brand-dark);
}

/* A fixed two columns rather than auto-fit: delivery to an address is offered by
   one carrier and pickup by two, and with auto-fit the lone Econt button would
   stretch across the whole row and jump to half width the moment the shopper
   switched. Pinning the track keeps the button the same size either way. */
.courier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.courier__name { font-size: 15px; }

.office-search {
  width: 100%; height: 42px; padding: 0 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--bg); color: var(--ink);
}
.office-search:focus { border-color: var(--brand); outline: none; }

/* Capped and scrollable: a city can hold a few hundred pickup points and the
   summary has to stay reachable without scrolling past all of them. */
.office-list {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.office {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.office:last-child { border-bottom: 0; }
.office:hover { background: var(--soft); }
.office.is-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--brand); }
.office__name { font-weight: 600; font-size: 14px; }
.office__meta { font-size: 12.5px; color: var(--muted); }
.office__hours { font-size: 12px; color: var(--ok); }
.office-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

.notice {
  padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft);
  border-left: 4px solid var(--brand); font-size: 14px; margin-bottom: 18px;
}
.notice--ok { background: #e7f6ec; border-left-color: var(--ok); }

/* ---------------------------------------------------------------- drawer */

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(20, 18, 22, .6); z-index: 90;
  opacity: 0; visibility: hidden; transition: .2s ease;
}
/* The mobile menu lives next to the cart drawer at body level, so it clears the
   backdrop while the sticky header stays below it and dims with the page. */
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
  width: min(320px, 86vw); background: #fff;
  box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.nav-drawer.open { transform: none; }
.nav-drawer .nav__head { display: flex; }
.nav-drawer .nav__list { flex-direction: column; gap: 0; }
.nav-drawer .nav__item { border-bottom: 1px solid var(--line); position: static; }
.nav-drawer .nav__link {
  height: 52px; padding: 0 18px; justify-content: space-between;
  border-bottom: 0; font-size: 14px;
}
.nav-drawer .nav__item.open > .nav__link { color: var(--brand); }
.nav-drawer .nav__caret { transition: transform .2s ease; }
.nav-drawer .nav__item.open .nav__caret { transform: rotate(180deg); }
.nav-drawer .mega {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: 0; border-radius: 0; padding: 0;
  background: var(--soft); display: none; min-width: 0;
}
.nav-drawer .nav__item.open .mega { display: block; }
.nav-drawer .mega a { padding: 11px 18px 11px 32px; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: #fff;
  z-index: 95; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
}
.drawer.open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.drawer__close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted); }
.drawer__body { flex: 1; overflow-y: auto; padding: 12px 18px; }
.drawer__foot { padding: 16px 18px; border-top: 1px solid var(--line); }
.mini-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-row img { width: 62px; height: 68px; object-fit: contain; mix-blend-mode: multiply; }
.mini-row__name { font-size: 13.5px; line-height: 1.3; }
.mini-row__meta { font-size: 12px; color: var(--muted); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120%);
  background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 24px;
  z-index: 200; font-size: 14.5px; transition: transform .25s ease; box-shadow: var(--shadow-lg);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- footer */

.seo-block { background: var(--soft); padding: 34px 0; margin-top: 30px; }
.seo-block h2 { font-size: 21px; }
.seo-block h3 { font-size: 16.5px; margin-top: 18px; }
.seo-block p { color: var(--muted); max-width: 92ch; font-size: 14px; }

.newsletter { background: var(--brand); color: #fff; padding: 30px 0; }
.newsletter .container { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.newsletter h3 { margin: 0; font-size: 20px; }
.newsletter p { margin: 4px 0 0; font-size: 13.5px; opacity: .9; }
.newsletter form { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.newsletter input {
  height: 46px; padding: 0 16px; border: 0; border-radius: 24px; min-width: 260px;
  font-size: 14.5px; outline: none;
}

.footer {
  background: #1b1a1f; color: #b9b5bd; padding: 40px 0 0; font-size: 13.5px;
  /* Layout heights are fractional, so the page ends on a sub-pixel the footer
     cannot paint and the white canvas shows through as a hairline. The shadow
     paints solid below the footer without adding height, and doubles as the
     overscroll colour. */
  box-shadow: 0 30px 0 0 #1b1a1f;
}
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer a:hover { color: var(--accent); }
.footer li { padding: 4px 0; }
.footer__logo .logo__word { color: #fff; }
.footer__logo .logo__tag { color: #8d8894; }
/* The badge's dark-red ring would vanish on the near-black footer, so it sits
   on a light chip. */
.footer__logo .logo__mark {
  background: #fdf7f4; border-radius: 50%; padding: 4px;
  width: 56px; height: 56px;
}
.footer__contact li { display: flex; gap: 9px; align-items: center; }
.footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer__bottom {
  border-top: 1px solid #302e35; padding: 16px 0; display: flex; gap: 16px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12.5px;
}
.pay { display: flex; gap: 8px; }
.pay span {
  padding: 4px 9px; border: 1px solid #302e35; border-radius: 4px; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .brand-strip { grid-template-columns: repeat(6, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  :root { --header-h: 100px; }
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0; z-index: 96; background: #fff; overflow-y: auto;
    padding: 16px; transform: translateX(-100%); transition: transform .2s ease;
  }
  .filters.open { transform: none; }
  .product { grid-template-columns: 1fr; gap: 24px; }
  .cart-layout { grid-template-columns: 1fr; }
  .usp { grid-template-columns: repeat(2, 1fr); }
  /* The horizontal bar gives way to the body-level drawer. */
  .nav { display: none; }

  .burger { display: flex; color: var(--brand); }
  .burger:hover { color: var(--brand-dark); }
  /* The burger becomes a fourth child, so the three-column grid gives way to a
     wrapping row with the search on its own line. */
  .header__main { display: flex; flex-wrap: wrap; gap: 12px; }
  .header__main > .logo { justify-self: auto; }
  .search { order: 3; width: 100%; justify-self: auto; }
  .header__actions { margin-left: auto; }
  .logo__mark { width: 46px; height: 46px; }
  .hero__track { min-height: 300px; }
  .hero__slide { padding: 30px 24px; }
  .hero__title { font-size: 28px; }
  .hero__nav { width: 34px; height: 34px; font-size: 19px; }
  .hero__nav--prev { left: 8px; }
  .hero__nav--next { right: 8px; }
}

@media (max-width: 700px) {
  /* Breathing room so the field is not flush with the screen edges. */
  .search { padding: 0 6px 2px; }
  .logo__mark { width: 42px; height: 42px; }
  .logo__tag { display: none; }
  /* The arrows sit over the slide's own text at this width, and the dots and a
     swipe already move the carousel, so nothing is lost by dropping them. */
  .hero__nav { display: none; }
  /* Stacked copyright and payment badges read better centred than split. */
  .footer__bottom { justify-content: center; text-align: center; gap: 12px; }
  .pay { justify-content: center; flex-wrap: wrap; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carousel__track > * { flex-basis: 165px; }
  .form-grid { grid-template-columns: 1fr; }
  /* Two delivery choices side by side leave each too narrow for its label once
     the phone is this small, and the office list needs the height back. */
  .delivery-tabs { grid-template-columns: 1fr; }
  .office-list { max-height: 260px; }
  .footer__cols { grid-template-columns: 1fr; }
  /* Two columns: thumbnail over its price on the left, everything else stacked
     on the right. minmax(0,…) lets the title shrink so the nowrap price never
     pushes the row into overflow. */
  .cart-row {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px; row-gap: 10px; align-items: start;
  }
  .cart-row > .cart-row__media { grid-column: 1; grid-row: 1; }
  .cart-row > .price { grid-column: 1; grid-row: 2; justify-self: center; }
  .cart-row > .cart-row__info { grid-column: 2; grid-row: 1; }
  /* Two equal tracks side by side, hugging the right edge. Sizing the container
     to max-content makes the 1fr tracks resolve to the wider child, so both
     controls match without a hard-coded width. */
  .cart-row__actions {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    width: max-content; justify-self: end; gap: 10px;
    grid-column: 2; grid-row: 2;
  }
  /* The desktop column assignments are descendant rules that still reach these
     two inside the actions grid and would pin them to columns 3 and 5. The
     override needs matching specificity to win, hence the full path. */
  .cart-row .cart-row__actions > .qty,
  .cart-row .cart-row__actions > .cart-row__remove { grid-column: auto; }
  .cart-row .cart-row__remove {
    border: 1px solid var(--line); border-radius: 50px; width: 100%;
  }
  .cart-row img { width: 64px; height: 70px; }
  .spec, .pyramid__row { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
  .newsletter form { margin-left: 0; }
  .newsletter input { min-width: 0; flex: 1; }
}