/* Perfumo — storefront styles */

/* Self-hosted fonts. Loading these from fonts.googleapis.com cost two extra DNS
   lookups and TLS handshakes before the first byte of a font could be requested,
   and the stylesheet that declared them was itself render-blocking on a third-
   party host. Served from our own origin the browser reuses the connection it
   already has for this file.

   Variable weight axes, so one file per subset covers every weight the design
   uses instead of one file per weight. The unicode-range split means a Bulgarian
   page downloads the cyrillic file only and an English page the latin one. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Sapphire rather than a bright utility blue: deep and slightly desaturated so
     it reads as a fragrance house instead of a dashboard. Gold stays as the
     single warm note — navy and gold is the classic luxury pairing. */
  --brand: #1c3f6e;
  --brand-dark: #12294a;
  --brand-light: #4a7bb7;
  --accent: #8fc0e8;
  --accent-soft: #eaf2fa;
  --gold: #b8912f;
  /* Neutrals carry a cool cast so nothing under the blue looks pink. */
  --ink: #131a26;
  --muted: #667085;
  --line: #e3e8ef;
  --bg: #ffffff;
  --soft: #f5f8fb;
  --ok: #17864a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(19, 26, 38, 0.07);
  --shadow-lg: 0 12px 40px rgba(19, 26, 38, 0.16);
  /* Cormorant Garamond for display, Jost for everything read at small sizes: a
     high-contrast serif over a geometric sans is the standard fragrance-and-beauty
     pairing, and Cormorant is too fine-stroked to carry body copy or numbers. */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --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: var(--font-body);
  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; }

/* The display serif runs noticeably smaller than the sans at the same px, so the
   headings are stepped up and weighted to keep the old visual hierarchy. */
h1, h2, h3, h4 {
  margin: 0 0 .5em; line-height: 1.18; font-weight: 600;
  font-family: var(--font-display); letter-spacing: .1px;
}
h1 { font-size: 34px; }
h2 { font-size: 29px; }
h3 { font-size: 22px; }

.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; }
/* The wordmark is set in the display serif so it reads as one piece with the
   lettering on the badge beside it. The clamp keeps it inside a phone header. */
.logo__word {
  font-family: var(--font-display);
  font-size: clamp(19px, 3.1vw, 25px); font-weight: 600; letter-spacing: 3.2px;
  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; }
/* The slides are absolutely positioned, so the track cannot grow to fit them —
   its height has to be declared, and anything shorter than the wordiest slide
   crops that slide or pushes its copy against the edges. The values below are
   measured against the longest slide at each width, with headroom on top. */
.hero__track {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 426px; 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; }

/* Slide 1 is the brand itself, slide 2 shifts to indigo so the niche panel still
   reads as a different world, and slide 3 keeps the bronze that signals an offer
   and gives the navy something warm to sit against. */
.hero__slide--1 { background: linear-gradient(115deg, #0d1e37 0%, #1c3f6e 45%, #4a7bb7 100%); }
.hero__slide--2 { background: linear-gradient(115deg, #161a34 0%, #3b3f7a 50%, #8b8fd0 100%); }
/*.hero__slide--3 { background: linear-gradient(115deg, #3d2410 0%, #8a5a1f 50%, #d9b26a 100%); }*/
.hero__slide--3 { background: linear-gradient(140deg, #4a1f47, #b06fa8); }
.hero__eyebrow {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; opacity: .9; margin-bottom: 12px;
}
.hero__title { font-size: 54px; max-width: 15em; margin-bottom: 12px; font-weight: 600; }
.hero__text { font-size: 17px; max-width: 34em; opacity: .95; margin-bottom: 24px; }

/* The call to action keeps drifting after the copy has settled, so the eye comes
   back to it. The float lives on the button while the entrance stagger lives on
   its wrapper — same property on the same element would fight. The delay lets the
   slide finish arriving first, and hovering parks it so the target holds still
   under the cursor. */
.hero__slide .btn {
  animation: hero-cta-float 3.4s ease-in-out .9s infinite both;
  will-change: transform;
}
.hero__slide:not(.is-active) .btn,
.hero__slide .btn:hover,
.hero__slide .btn:focus-visible { animation-play-state: paused; }

@keyframes hero-cta-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 5px 13px rgba(9, 17, 30, .2); }
  50% { transform: translateY(-6px); box-shadow: 0 15px 22px rgba(9, 17, 30, .26); }
}

.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; }
  /* The button keeps its resting shadow, just stops moving. */
  .hero__slide .btn {
    animation: none; transform: none; box-shadow: 0 5px 13px rgba(9, 17, 30, .2);
  }
}

.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(4, 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: 31px; 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(6, 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%);
}
/* Six categories still need six recognisable hues, but they are retuned to jewel
   tones that sit under the sapphire brand rather than fighting it. Men's keeps the
   brand navy; the rest fan out through periwinkle, teal, slate, bronze and plum. */
.tile--w { background: linear-gradient(140deg, #463f8c, #a79bdb); }
.tile--m { background: linear-gradient(140deg, #12294a, #4a7bb7); }
.tile--u { background: linear-gradient(140deg, #0e4550, #5fa4ac); }
.tile--n { background: linear-gradient(140deg, #1a1f2b, #6b7688); }
.tile--a { background: linear-gradient(140deg, #6b4416, #d9ab5f); }
.tile--k { background: linear-gradient(140deg, #4a1f47, #b06fa8); }

/* 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 six 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; }
.tile--a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'24.7%208.7%2068.6%2081.6'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M26%2052h32v30a7%207%200%200%201-7%207H33a7%207%200%200%201-7-7z'%2F%3E%3Cpath%20d%3D'M36%2052v-7h12v7'%2F%3E%3Cpath%20d%3D'M42%2018l9%2014c0%205-4%208-9%208s-9-3-9-8z'%2F%3E%3Cpath%20d%3D'M42%2010v8'%2F%3E%3Cpath%20d%3D'M70%2089V62a11%2011%200%200%201%2022%200v27'%2F%3E%3Cpath%20d%3D'M81%2051v-8'%2F%3E%3C%2Fsvg%3E"); width: 71px; height: 84px; }
.tile--k::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'12.7%2023%2070.6%2066.3'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'20'%20y%3D'46'%20width%3D'56'%20height%3D'42'%20rx%3D'5'%2F%3E%3Crect%20x%3D'14'%20y%3D'34'%20width%3D'68'%20height%3D'12'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M48%2034v54'%2F%3E%3Cpath%20d%3D'M48%2034c-7-11-20-13-20-4%200%206%209%206%2020%204z'%2F%3E%3Cpath%20d%3D'M48%2034c7-11%2020-13%2020-4%200%206-9%206-20%204z'%2F%3E%3C%2Fsvg%3E"); width: 84px; height: 79px; }


/* ------------------------------------------------------------ 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: #d3dbe6; 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: #3b3f7a; }
.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='%23667085' 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, #eef2f7 25%, #e3e8ef 37%, #eef2f7 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: 33px; 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); }

/* 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); }

.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 .28s cubic-bezier(.22, .61, .36, 1); }
.nav-drawer .nav__item.open .nav__caret { transform: rotate(180deg); }

/* Accordion. display:none cannot be animated, so the panel is a one-row grid and
   the row is what moves: 0fr to 1fr interpolates to the content's real height,
   with no JavaScript measuring and no max-height guess to outgrow. Browsers that
   do not interpolate grid-template-rows simply snap open, which is the previous
   behaviour rather than a broken one.
   The selectors carry .nav__item so they outrank the desktop `.nav__item:hover
   .mega` rule, which would otherwise reveal the panel on hover inside the drawer. */
.nav-drawer .nav__item .mega {
  position: static; transform: none; box-shadow: none; border: 0; border-radius: 0;
  padding: 0; min-width: 0; background: var(--soft);
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition: grid-template-rows .3s cubic-bezier(.22, .61, .36, 1),
              opacity .2s ease, visibility .3s;
}
.nav-drawer .nav__item.open .mega {
  grid-template-rows: 1fr;
  opacity: 1; visibility: visible;
}
/* min-height:0 is required or the row refuses to shrink below its content. */
.nav-drawer .mega__inner { overflow: hidden; min-height: 0; }

.nav-drawer .mega a {
  padding: 11px 18px 11px 32px;
  /* Each row starts slightly left and behind, then catches up — the panel reads as
     unfolding instead of appearing. */
  opacity: 0; transform: translateX(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.nav-drawer .nav__item.open .mega a { opacity: 1; transform: none; }
.nav-drawer .nav__item.open .mega a:nth-child(1) { transition-delay: .04s; }
.nav-drawer .nav__item.open .mega a:nth-child(2) { transition-delay: .08s; }
.nav-drawer .nav__item.open .mega a:nth-child(3) { transition-delay: .12s; }
.nav-drawer .nav__item.open .mega a:nth-child(4) { transition-delay: .16s; }
.nav-drawer .nav__item.open .mega a:nth-child(n + 5) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  /* Still opens and closes, just without the travel or the stagger. */
  .nav-drawer .nav__item .mega,
  .nav-drawer .mega a,
  .nav-drawer .nav__caret { transition: none; }
  .nav-drawer .mega a { transform: none; }
  .nav-drawer .nav__item.open .mega a { transition-delay: 0s; }
}
.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: 26px; }
.seo-block h3 { font-size: 20px; 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: #101725; color: #a8b2c1; 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 #101725;
}
.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: #7c8798; }
/* 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: #f5f8fb; 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; }
/* Language switcher sits as the last contact row. The two-letter code rides
   alongside the name so the target language is obvious at a glance. */
/* Host for the switcher once the footer columns stack; empty (and so collapsed)
   at wider widths, where the switcher lives in the contact list instead. */
.footer__lang { padding-bottom: 18px; }
.footer__lang:empty { display: none; }
.lang-switch { display: inline-flex; align-items: center; gap: 7px; }
.lang-switch__code {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  border: 1px solid #384457; border-radius: 4px; padding: 1px 5px; color: #7c8798;
}
.lang-switch:hover .lang-switch__code { border-color: currentColor; color: inherit; }
.footer__bottom {
  border-top: 1px solid #232d3f; 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(3, 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: 358px; }
  .hero__slide { padding: 30px 26px; }
  .hero__title { font-size: 36px; }
  .hero__nav { width: 34px; height: 34px; font-size: 19px; }
  .hero__nav--prev { left: 8px; }
  .hero__nav--next { right: 8px; }
}

@media (max-width: 700px) {
  /* The height has to rise as the width falls, because a narrower screen wraps
     the headline onto more lines. That growth is steep below ~430px and almost
     flat above it, so one straight line either crops the small phones or leaves
     a lot of dead space on the big ones — hence two fitted segments, each
     tracking the measured worst-case slide with roughly 10px to spare. */
  .hero__track { min-height: clamp(343px, calc(463px - 17.1vw), 390px); }
  .hero__slide { padding: 28px 22px; }
  /* 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; }
  /* Stacked copyright and payment badges read better centred than split. */
  .footer__bottom { justify-content: center; text-align: center; gap: 12px; }
  /* Last row of the footer, centred on the copyright below it. */
  .footer__lang li { justify-content: center; }
  .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; }
  .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; }
}

/* Second hero segment. Below ~430px each drop in width costs the headline
   another line, so the height climbs about four times faster than it does on
   the wider phones handled above. Declared after that block so it wins. */
@media (max-width: 430px) {
  .hero__track { min-height: clamp(389px, calc(674px - 66.4vw), 466px); }
}