/* ALAVYA HOME storefront. Brand tokens live in brand.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* One visible focus style everywhere; mouse clicks stay ringless. */
:focus-visible {
  outline: 2px solid var(--brand-accent-strong);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  padding: 0.55rem 1rem;
  background: var(--brand-dark);
  color: var(--brand-dark-fg);
  border-radius: var(--brand-radius);
  transition: top 0.15s ease;
}

.skip-link:focus-visible { top: 0.75rem; }

body {
  margin: 0;
  font-family: var(--brand-font);
  color: var(--brand-fg);
  background: var(--brand-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /*
   * Never let the browser fake a weight. When the stylesheet asked for 500 and
   * 600 while only 400 and 700 were shipped, it smeared 400 into both and the
   * whole site read blurry — with no error anywhere. A missing weight should
   * look wrong in an obvious way, not quietly ruin every heading.
   */
  font-synthesis-weight: none;
  font-optical-sizing: auto;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  /* Keeps a heading from dropping a single word onto its own line. */
  text-wrap: balance;
}

.wrap { max-width: var(--brand-page-width); margin: 0 auto; padding: 0 var(--brand-gutter); }

/* ---------- Promo bar ---------- */

.promo {
  margin: 0;
  padding: 0.6rem 1rem;
  background: var(--brand-dark);
  color: var(--brand-dark-fg);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #ece5dd;
}
.header__inner {
  max-width: var(--brand-page-width-wide);
  margin: 0 auto;
  min-height: 5.5rem;
  padding: 1rem var(--brand-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}
.header__brand { grid-column: 2; grid-row: 1; justify-self: center; }
.header__brand img { display: block; width: clamp(9rem, 12vw, 11.75rem); height: auto; }

.nav { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1rem, 1.7vw, 2rem);
  justify-content: flex-start;
  /* Items carry different boxes — a plain link, a <details> group — so the row
     centres them instead of stretching each to its own height. */
  align-items: center;
}
.nav__item--all { display: none; }
/* A dropdown label and a plain link are the same thing to a reader, so they
   share one rule; typography set only on the anchor left the two on different
   baselines. */
.nav__list > .nav__item > a,
.nav__group > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.35rem 0;
  position: relative;
  white-space: nowrap;
  color: inherit;
}

.nav__list > .nav__item > a::after,
.nav__group > summary::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--brand-accent);
  transition: right 0.22s ease;
}

.nav__list > .nav__item > a:hover::after,
.nav__group > summary:hover::after { right: 0; }
.header__tools {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.header__actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.header__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  transition: background 0.18s ease;
}
.header__action:hover { background: #f4efe9; }
.header__action svg { width: 21px; height: 21px; }
.header__action--account { width: auto; padding-inline: 0.75rem; gap: 0.4rem; border-radius: 999px; }
.header__action--account svg { display: none; }

/*
 * Visually hidden but still focusable. display:none would drop the checkbox
 * from the tab order, and with it the only keyboard way to open the phone menu.
 */
.header__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.header__toggle:focus-visible ~ .header__burger {
  outline: 2px solid var(--brand-accent-strong);
  outline-offset: 3px;
}
.header__burger { display: none; }

/* ---------- Hero ---------- */

.home-slider {
  position: relative;
  max-width: var(--brand-page-width-wide);
  margin: 0 auto;
  overflow: hidden;
  background: var(--brand-bg-soft);
}
.home-slider .home-hero {
  display: none;
  position: relative;
  min-height: clamp(28rem, 56vw, 50rem);
  margin: 0;
  overflow: hidden;
  background: var(--brand-bg-soft);
}
.home-slider .home-hero.is-active { display: block; }
.home-hero picture { display: block; }
.home-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 35% 45% 0 0;
  background: linear-gradient(35deg, rgb(18 18 18 / 55%), transparent 75%);
}
.home-hero__content {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(2rem, 7vw, 6rem);
  max-width: 31rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--brand-radius);
  background: rgb(18 18 18 / 55%);
  color: #fff;
  text-align: left;
}
.home-hero h1,
.home-hero h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 400;
}
.home-hero .hero__lead {
  margin: 0 0 1.25rem;
  font-size: clamp(0.92rem, 1.5vw, 1.08rem);
}
.home-slider__controls {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(8px);
}
.home-slider__controls[hidden] { display: none; }
.home-slider__controls > button {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.home-slider__dots { display: flex; gap: 0.45rem; }
.home-slider__dots button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.home-slider__dots button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--brand-fg-muted);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}
.home-slider__dots button.is-active::after { background: var(--brand-fg); }

.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.btn--primary { background: var(--brand-dark); color: var(--brand-dark-fg); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn--light { background: #fff; color: var(--brand-fg); }
.btn--sand { background: var(--brand-accent); color: var(--brand-fg); }
.btn--light:hover, .btn--sand:hover { transform: translateY(-2px); }

/* ---------- Selling points ---------- */

.usp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  max-width: var(--brand-page-width);
  margin: 0 auto;
  padding: 3.25rem var(--brand-gutter);
  text-align: center;
}
.usp__item img { width: 38px; height: 38px; margin: 0 auto; color: var(--brand-fg); }
.usp__item h2 { margin: 0.85rem 0 0.35rem; font-size: 1rem; font-weight: 600; }
.usp__item p { margin: 0; color: var(--brand-fg-muted); font-size: 0.9rem; }

/* ---------- Archived home composition ---------- */

.home-showcase {
  max-width: var(--brand-page-width);
  margin: 0 auto;
  padding: 0 var(--brand-gutter) clamp(3rem, 6vw, 5.5rem);
}
.home-showcase__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 1fr);
  align-items: center;
  min-height: 28rem;
}
.home-showcase__row--reverse .home-showcase__media { order: 2; }
.home-showcase__media {
  align-self: stretch;
  overflow: hidden;
  background: var(--brand-bg-soft);
}
.home-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.home-showcase__media:hover img { transform: scale(1.025); }
.home-showcase__copy { padding: clamp(2rem, 6vw, 5rem); }
.home-showcase__copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 400;
}
.home-showcase__copy p {
  max-width: 39rem;
  margin: 0 0 1.4rem;
  color: var(--brand-fg-muted);
  font-size: 0.94rem;
}
.home-showcase__copy .btn { padding: 0.65rem 1.45rem; font-size: 0.85rem; }

.home-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: var(--brand-page-width);
  margin: 0 auto;
  padding: 0 var(--brand-gutter) 3rem;
  text-align: center;
}
.home-values div { display: grid; justify-items: center; gap: 0.35rem; }
.home-values span { color: var(--brand-accent-strong); font-size: 2.25rem; line-height: 1; }
.home-values strong { font-size: 0.84rem; font-weight: 400; }

/* ---------- Section heads ---------- */

.section { max-width: var(--brand-page-width); margin: 0 auto; padding: 0 var(--brand-gutter) 3.5rem; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem;
}
.section__head h2 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 400; }
.section__link { font-size: 0.9rem; text-decoration: none; color: var(--brand-fg-muted); }
.section__link:hover { color: var(--brand-fg); }

/* ---------- Category tiles ---------- */

.categories__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.category-tile a {
  display: block; position: relative;
  min-height: 11rem; border-radius: 1rem; overflow: hidden;
  background: linear-gradient(150deg, #f7f3ee 0%, #ece2d6 100%);
  border: 1px solid #e8ddd0;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.category-tile a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(120, 100, 80, .16);
  border-color: var(--brand-accent);
}
.category-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s ease;
}
.category-tile a:hover .category-tile__img { transform: scale(1.05); }

.category-tile__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 11rem; padding: 1.35rem;
}
/* Photo tiles get a gradient so the label stays readable over any image. */
.category-tile--photo .category-tile__body {
  background: linear-gradient(to top, rgba(18,18,18,.72) 0%, rgba(18,18,18,.28) 45%, rgba(18,18,18,0) 100%);
  color: #fff;
}
.category-tile--photo .category-tile__count { color: rgba(255,255,255,.82); }
.category-tile__name { font-weight: 600; font-size: 1.08rem; }
.category-tile__count { font-size: 0.8rem; color: var(--brand-fg-muted); }

/* ---------- Product cards ---------- */

.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem 1rem;
}
.product-card a {
  display: flex; flex-direction: column; gap: 0.6rem;
  height: 100%; text-decoration: none;
}
.product-card__img {
  /* height:auto is what lets aspect-ratio act: the HTML height attribute
     otherwise fixes the box at 512px and the ratio is silently ignored. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--brand-radius); background: #f4efe9;
  transition: transform 0.35s ease;
}
.product-card a:hover .product-card__img { transform: scale(1.03); }
.product-card__figure { overflow: hidden; border-radius: var(--brand-radius); }
.product-card__name {
  font-size: 0.94rem; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__meta { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.product-card__price { font-weight: 700; font-size: 1.02rem; }

.badge {
  font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  letter-spacing: 0.02em;
}
.badge--in { background: #e7f6f0; color: #176b4f; }
.badge--out { background: #f3efec; color: #8a7666; }

/* ---------- Quality block ---------- */

.quality { background: #faf7f4; padding: clamp(3rem, 6vw, 4.5rem) 1.25rem; }
.quality__inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.quality h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.quality--archive .quality__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 0.6fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 56rem;
}
.quality--archive .quality__inner > div { text-align: center; }
.quality-slider { width: min(100%, 16rem); margin: 0 auto; }
.quality-slider__viewport {
  display: grid;
  place-items: center;
  height: 18.5rem;
}
.quality-slider__viewport img {
  display: none;
  width: auto;
  max-width: 15rem;
  height: 18.5rem;
  object-fit: contain;
  margin: 0 auto;
}
.quality-slider__viewport img.is-active { display: block; }
.quality-slider__dots { display: flex; justify-content: center; }
.quality-slider__dots button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.quality-slider__dots button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-accent);
  transform: translate(-50%, -50%);
}
.quality-slider__dots button.is-active::after { background: #1685e5; }

.home-story {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--brand-page-width);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--brand-gutter);
}
.home-story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-story h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; }
.home-story p { margin: 0 0 1.4rem; color: var(--brand-fg-muted); }
.home-story .btn { padding: 0.65rem 1.6rem; font-size: 0.85rem; }
.quality p { margin: 0; font-size: 1.02rem; color: #46403a; }

/* ---------- Page head ---------- */

.page-head { max-width: var(--brand-page-width); margin: 0 auto; padding: 2.5rem 1.25rem 1.5rem; }
.page-head h1 { margin: 0 0 0.4rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; }
.page-head__meta { margin: 0; color: var(--brand-fg-muted); font-size: 0.9rem; }
.empty { max-width: var(--brand-page-width); margin: 0 auto; padding: 1rem 1.25rem 4rem; color: var(--brand-fg-muted); }

/* ---------- Breadcrumbs ---------- */

.crumbs {
  max-width: var(--brand-page-width); margin: 0 auto;
  padding: 1.25rem var(--brand-gutter) 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  font-size: 0.82rem; color: var(--brand-fg-muted);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brand-fg); text-decoration: underline; }
.crumbs__current {
  color: var(--brand-fg);
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Product detail ---------- */

.pdp { max-width: var(--brand-page-width); margin: 0 auto; padding: 1.5rem var(--brand-gutter) 4rem; }
.pdp__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
.pdp__cover-wrap { aspect-ratio: 1 / 1; }
.pdp__cover {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: var(--brand-radius); background: #f4efe9;
}
.pdp__thumbs {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 5.5rem)); gap: 0.5rem;
}
.pdp__thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0;
  border-radius: 0.6rem; background: #f4efe9; cursor: pointer;
  transition: opacity 0.18s ease;
  overflow: hidden;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { opacity: 0.82; }

.pdp h1 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pdp__sku { margin: 0 0 1.25rem; color: var(--brand-fg-muted); font-size: 0.82rem; }

.pdp__pricebox { margin: 0 0 0.85rem; }
.pdp__price { margin: 0; font-size: 1.85rem; font-weight: 700; }
.pdp__tax { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--brand-fg-muted); }
.pdp__stock { margin: 0 0 1.5rem; }

.pdp__highlights { margin: 0 0 1.5rem; }
.pdp__highlights h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 0.6rem; color: var(--brand-fg-muted); }
.pdp__highlights ul { margin: 0; padding-left: 1.15rem; }
.pdp__highlights li { margin: 0.3rem 0; font-size: 0.93rem; }
.pdp__highlights p { margin: 0.3rem 0; font-size: 0.93rem; }

.pdp__option { margin: 0 0 1.15rem; }
.pdp__option-name {
  display: block; font-size: 0.82rem; font-weight: 600;
  margin-bottom: 0.5rem; letter-spacing: 0.01em;
}
.pdp__swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch {
  display: inline-block; padding: 0.5rem 0.95rem;
  border: 1px solid #e0d5c7; border-radius: 0.6rem;
  font-size: 0.87rem; background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.swatch:hover { border-color: var(--brand-accent); background: #faf7f4; }

.pdp__bundle {
  background: #faf7f4; border-left: 3px solid var(--brand-accent);
  padding: 0.8rem 1.05rem; margin: 0 0 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0; font-size: 0.9rem;
}

.btn--block { display: block; width: 100%; text-align: center; border: 0; cursor: pointer; font-family: inherit; }
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.pdp__note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--brand-fg-muted); text-align: center; }

.pdp__section { margin-top: 3rem; }
.pdp__section h2 { font-size: 1.15rem; margin: 0 0 1rem; }

.variants { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.variants td { padding: 0.7rem 0.5rem; border-bottom: 1px solid #f0eae3; }
.variants td:first-child { padding-left: 0; }
.variants__sku { color: var(--brand-fg-muted); font-size: 0.82rem; }
.variants__row--out td:first-child { color: var(--brand-fg-muted); }

.pdp__description { line-height: 1.75; max-width: 52rem; }
.pdp__description img { border-radius: 0.6rem; margin: 1rem 0; }
.pdp__description table { max-width: 100%; }

/* ---------- Footer ---------- */

.footer { background: #faf7f4; border-top: 1px solid #ece5dd; margin-top: 2rem; }
.footer__inner {
  max-width: var(--brand-page-width); margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem;
}
.footer__logo { height: 26px; width: auto; margin-bottom: 0.85rem; }
.footer__col--brand p { margin: 0; color: var(--brand-fg-muted); font-size: 0.88rem; max-width: 22rem; }
.footer__col h2 { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.9rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__col a { text-decoration: none; font-size: 0.88rem; color: var(--brand-fg-muted); }
.footer__col a:hover { color: var(--brand-fg); }
.footer__bottom { padding: 2.6rem 1.25rem 2.8rem; border-top: 1px solid #ece5dd; text-align: center; }
.footer__payments {
  list-style: none; margin: 0 auto 1.15rem; padding: 0; display: flex;
  align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem;
}
.payment-mark {
  box-sizing: border-box; min-width: 2.45rem; height: 1.55rem; padding: 0 0.38rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ddd8d3; border-radius: 0.2rem;
  color: #171717; font: 700 0.58rem/1 Arial, sans-serif; letter-spacing: -0.02em;
}
.payment-mark--amex { color: #fff; background: #0877b9; border-color: #0877b9; }
.payment-mark--apple { font-size: 0.66rem; }
.payment-mark--bancontact { color: #172e87; font-size: 0.43rem; }
.payment-mark--eps { color: #b73586; font-size: 0.72rem; }
.payment-mark--gpay { color: #185abc; font-size: 0.62rem; }
.payment-mark--ideal { color: #cb006b; }
.payment-mark--klarna { color: #111; background: #ffb3c7; border-color: #ffb3c7; }
.payment-mark--maestro::first-letter, .payment-mark--mastercard::first-letter { color: #e3232d; }
.payment-mark--maestro { color: #176fc1; font-size: 1rem; letter-spacing: -0.42rem; padding-right: 0.72rem; }
.payment-mark--mastercard { color: #f59d1f; font-size: 1rem; letter-spacing: -0.42rem; padding-right: 0.72rem; }
.payment-mark--paypal { color: #123b7a; font-style: italic; }
.payment-mark--unionpay { color: #087c74; font-size: 0.46rem; }
.payment-mark--visa { color: #1434cb; font-size: 0.7rem; font-style: italic; }
.footer__legal {
  max-width: var(--brand-page-width); margin: 0 auto; display: flex; justify-content: center;
  align-items: center; flex-wrap: wrap; gap: 0.35rem 0.55rem;
  color: var(--brand-fg-muted); font-size: 0.66rem; letter-spacing: 0.045em;
  text-transform: uppercase;
}
.footer__legal a, .footer__legal .footer__link-button { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.footer__legal a:hover, .footer__legal .footer__link-button:hover { color: var(--brand-fg); text-decoration: underline; }

/* ---------- Customer account ---------- */

.account-shell {
  max-width: var(--brand-page-width); margin: 0 auto;
  padding: 2rem var(--brand-gutter) 4rem;
}
.account-shell--narrow { max-width: 34rem; min-height: 32rem; }
.account__eyebrow {
  margin: 0 0 0.35rem; color: var(--brand-muted); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.account-shell h1 { margin: 0 0 0.6rem; }
.account__head { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; margin-bottom: 2rem; }
.account__head p { margin: 0.3rem 0 0; color: var(--brand-muted); }
.account__grid { display: grid; grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.account-card { padding: 1.35rem; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: var(--brand-surface); }
.account-card h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.account-card address { font-style: normal; line-height: 1.65; }
.account__hint { color: var(--brand-muted); font-size: 0.82rem; line-height: 1.5; }
.account-form { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
.account-form input { width: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); font: inherit; }
.notice--success { background: #edf7f1; border-left: 3px solid var(--brand-success); }
.notice--error { background: #fbeeed; border-left: 3px solid #b94a40; }
.account-orders { display: grid; }
.account-order-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 1rem; padding: 0.9rem 0; text-decoration: none;
  border-top: 1px solid var(--brand-line);
}
.account-order-row:first-child { border-top: 0; padding-top: 0; }
.account-order-row span:first-child { display: grid; gap: 0.2rem; }
.account-order-row small, .account-lines small { color: var(--brand-muted); }
.account-status { display: inline-flex; width: fit-content; padding: 0.3rem 0.55rem; border-radius: 999px; background: var(--brand-bg-soft); font-size: 0.78rem; }
.account-money, .account-status, .account-lines small, .account-total strong {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}
.account-lines { display: grid; }
.account-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--brand-line); }
.account-lines > div:first-child { border-top: 0; padding-top: 0; }
.account-lines span { display: grid; gap: 0.25rem; }
.account-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-line); }
.account-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.account-history li { display: flex; justify-content: space-between; gap: 1rem; }
.account-history time { color: var(--brand-muted); }

/* ---------- Responsive ----------
   Three steps, each for a real reason:
   - 64rem: nine menu items no longer fit next to the logo → burger;
   - 48rem: phones — single-column footer, tighter spacing;
   - 30rem: narrow phones — two product columns still readable.
*/

@media (max-width: 64rem) {
  .header__inner { min-height: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
  .header__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.5rem; height: 2.5rem; cursor: pointer; order: 1;
    margin-right: 0.25rem;
  }
  .header__burger span {
    display: block; height: 2px; width: 20px;
    background: var(--brand-fg); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .header__brand { order: 2; }
  .header__brand img { width: 8.5rem; }
  .header__tools { display: contents; }
  .header__actions { order: 3; margin-left: auto; }
  .nav { order: 4; flex-basis: 100%; display: none; }
  .header__toggle:checked ~ .nav { display: block; }
  /* Burger turns into a cross when the menu is open. */
  .header__toggle:checked ~ .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header__toggle:checked ~ .header__burger span:nth-child(2) { opacity: 0; }
  .header__toggle:checked ~ .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Stacked menu: every entry is a full-width row, dropdown or not. Selectors
     mirror the desktop ones so they are not out-specified by them. */
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item--all { display: list-item; }
  .nav__list li { border-top: 1px solid var(--brand-line); }
  .nav__list > .nav__item > a,
  .nav__group > summary {
    display: flex;
    padding: 0.85rem 0.25rem;
    font-size: 0.95rem;
  }
  .nav__list > .nav__item > a::after,
  .nav__group > summary::after { display: none; }
  .nav__group > summary svg { margin-left: auto; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .pdp__layout { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 48rem) {
  .header__action--account { width: 2.5rem; padding: 0; }
  .header__action--account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header__action--account svg { display: block; }
  .account__head { align-items: flex-start; flex-direction: column; }
  .account__grid { grid-template-columns: 1fr; }
  .account-order-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-order-row .account-status { grid-row: 2; grid-column: 1; }
  .account-order-row .account-money { grid-row: 1; grid-column: 2; }
  .account-order-row > span[aria-hidden] { display: none; }
  .promo { font-size: 0.76rem; padding: 0.5rem 0.75rem; }
  .header__inner { padding: 0.75rem 1rem; }
  .home-slider .home-hero { min-height: 27rem; }
  .home-slider .home-hero:not(:first-child),
  .home-slider__controls { display: none; }
  .home-hero::after { inset: 38% 0 0; }
  .home-hero__image { object-position: 58% center; }
  .home-hero__content {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
    padding: 1.25rem;
  }
  .usp { padding: 2.5rem 1.25rem; gap: 2rem; }
  .home-showcase { padding-inline: 0; }
  .home-showcase__row { grid-template-columns: 1fr; min-height: 0; }
  .home-showcase__row--reverse .home-showcase__media { order: 0; }
  .home-showcase__media { aspect-ratio: 4 / 3; }
  .home-showcase__copy { padding: 2rem 1.25rem 3rem; }
  .home-values { gap: 1rem; padding-inline: 1rem; }
  .home-values strong { font-size: 0.75rem; }
  .quality--archive .quality__inner,
  .home-story { grid-template-columns: 1fr; }
  .quality-slider { width: min(100%, 13rem); }
  .quality-slider__viewport { height: 14rem; }
  .quality-slider__viewport img { max-width: 12rem; height: 14rem; }
  .home-story { gap: 2rem; padding-inline: 1rem; }
  .section { padding: 0 1rem 2.5rem; }
  .page-head { padding: 1.75rem 1rem 1rem; }
  .pdp { padding: 1rem 1rem 3rem; }
  .crumbs { padding: 1rem 1rem 0; font-size: 0.78rem; }
  .crumbs__current { max-width: 12rem; }
  .pdp__section { margin-top: 2rem; }
  .variants__sku { display: none; }
  .categories__grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.85rem; }
  .category-tile a { min-height: 8rem; padding: 1rem; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.25rem 0.85rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 1rem 1.5rem; }
  .footer__bottom { padding: 2rem 1rem; }
  .footer__payments { gap: 0.35rem; }
  .footer__legal { line-height: 1.65; gap: 0.1rem 0.42rem; }
  .pdp__price { font-size: 1.45rem; }
}

@media (max-width: 30rem) {
  .categories__grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-card__name { font-size: 0.88rem; }
  .hero h1 { font-size: 1.75rem; }
}

/* Respect users who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Content pages ---------- */

/*
 * Legal pages arrive from the archive as one paragraph per line, so an address
 * is three paragraphs rather than one block. A tighter rhythm keeps those lines
 * reading as a unit; the measure is set in ch so the line length follows the
 * font rather than a guessed pixel width.
 */
/* Measure only — the page container does the centring, so the text keeps the
   same left edge as the heading above it. */
.prose { max-width: 68ch; margin-inline: auto; line-height: 1.7; text-wrap: pretty; }
.prose p { margin: 0.55rem 0; }
.prose h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.prose h3 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 0.45rem; }
.prose a { color: var(--brand-fg); }
.prose--document { max-width: 74ch; }
.prose--document > .lead { font-size: 1.08rem; color: var(--brand-fg-muted); margin-bottom: 2rem; }
.prose--document h2 { padding-top: 0.4rem; border-top: 1px solid var(--brand-line); }
.prose--document address { font-style: normal; line-height: 1.75; margin: 0.75rem 0 1.5rem; }
.prose--document ul:not(.tiers) { padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.prose--document .document-date { color: var(--brand-muted); font-size: 0.9rem; margin-top: 2rem; }
.prose--document .document-example {
  background: var(--brand-bg-soft); border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius); padding: 1rem 1.15rem; margin: 1rem 0;
}

.notice {
  padding: 0.9rem 1.15rem; border-radius: 0.6rem;
  font-size: 0.9rem; margin: 0 0 1.75rem;
}
.notice--warn { background: #fdf6e7; border-left: 3px solid #d9a441; color: #6b5327; }

.pdp__thumb.is-active { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.pdp__thumb:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* ---------- Cart ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pdp__buy-form { display: grid; gap: 0.9rem; }
.pdp__variant { display: grid; gap: 0.35rem; }

/* Native control, brand shell: appearance is reset so the arrow can be drawn
   with the same chevron used elsewhere instead of the OS default. */
.pdp__variant select {
  appearance: none;
  width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 0.8rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background-color: var(--brand-surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-muted) 50%),
    linear-gradient(135deg, var(--brand-muted) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pdp__variant select:focus-visible { outline: 2px solid var(--brand-accent-strong); outline-offset: 1px; }
.pdp__variant select option:disabled { color: var(--brand-muted); }

.pdp__from { font-size: 0.62em; font-weight: 500; color: var(--brand-muted); }

.pdp__buy { display: flex; gap: 0.6rem; align-items: stretch; }
.pdp__buy input[type="number"] {
  width: 4.5rem; padding: 0.6rem; text-align: center;
  border: 1px solid #e0d5c7; border-radius: 0.6rem;
  font-family: inherit; font-size: 0.95rem;
}
.pdp__buy .btn { flex: 1; border: 0; cursor: pointer; font-family: inherit; }

.cart-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  gap: 1.25rem; align-items: center;
  padding: 1.25rem 0; border-bottom: 1px solid #f0eae3;
}
.cart-line--warn { background: #fdf9f2; }
.cart-line__media img {
  width: 5.5rem; height: 5.5rem; object-fit: cover;
  border-radius: 0.6rem; background: #f4efe9;
}
.cart-line__name { font-weight: 600; text-decoration: none; }
.cart-line__variant { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--brand-fg-muted); }
.cart-line__sku { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--brand-fg-muted); }
.cart-line__warn { margin: 0.35rem 0 0; font-size: 0.82rem; color: #9a6b2f; }
.cart-line__qty { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.cart-line__qty input {
  width: 4rem; padding: 0.45rem; text-align: center;
  border: 1px solid #e0d5c7; border-radius: 0.5rem; font-family: inherit;
}
.cart-line__price { text-align: right; display: flex; flex-direction: column; gap: 0.3rem; }
.cart-line__price span { font-weight: 700; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.78rem; text-decoration: underline;
  color: var(--brand-fg);
}
.link-btn--muted { color: var(--brand-fg-muted); }

.cart-summary {
  max-width: 22rem; margin-left: auto;
  background: #faf7f4; border-radius: 0.9rem; padding: 1.5rem;
}
.cart-summary__row { display: flex; justify-content: space-between; font-size: 1.1rem; }
.cart-summary__row strong { font-size: 1.35rem; }
.cart-summary__note { margin: 0.3rem 0 1.25rem; font-size: 0.8rem; color: var(--brand-fg-muted); }
.cart-summary__back { display: block; text-align: center; margin-top: 0.9rem; font-size: 0.85rem; }

@media (max-width: 48rem) {
  .cart-line { grid-template-columns: 4.5rem 1fr; grid-template-areas: "media info" "qty price"; }
  .cart-line__media { grid-area: media; }
  .cart-line__info { grid-area: info; }
  .cart-line__qty { grid-area: qty; align-items: flex-start; }
  .cart-line__price { grid-area: price; }
  .cart-line__media img { width: 4.5rem; height: 4.5rem; }
  .cart-summary { max-width: none; }
}

.header__action--cart { position: relative; }
.header__badge {
  position: absolute; top: 0; right: 0;
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--brand-dark); color: var(--brand-dark-fg);
  font-size: 0.66rem; line-height: 1.05rem; text-align: center; font-weight: 600;
}

/* ---------- Search ---------- */

.search-form {
  display: flex; align-items: center; gap: 0.35rem;
  background: #f6f1eb; border: 1px solid #ece2d6;
  border-radius: 999px; padding: 0.25rem 0.35rem 0.25rem 0.85rem;
  flex-shrink: 1; min-width: 0; max-width: 15rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.search-form:focus-within { border-color: var(--brand-accent); background: #fff; }
.search-form input {
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 0.86rem; padding: 0.35rem 0;
  width: 100%; min-width: 0;
}
.search-form button {
  border: 0; background: none; cursor: pointer; padding: 0.3rem;
  display: inline-flex; color: var(--brand-fg);
}
.search-form button svg { width: 17px; height: 17px; }

.search-form--page {
  max-width: 32rem; margin: 1rem 0 0;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
}
.search-form--page input { font-size: 0.95rem; }
.search-form--page .btn { padding: 0.6rem 1.4rem; font-size: 0.88rem; border: 0; cursor: pointer; font-family: inherit; }

@media (max-width: 64rem) {
  .search-form { order: 5; flex-basis: 100%; max-width: none; margin-top: 0.5rem; }
}

/* ---------- Checkout ---------- */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
.checkout__block { border: 0; margin: 0 0 2rem; padding: 0; }
.checkout__block legend { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; padding: 0; }
.checkout__main { display: block; }

.checkout__block { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkout__block legend { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; color: var(--brand-fg-muted); }
.field input, .field textarea {
  border: 1px solid #e0d5c7; border-radius: 0.6rem;
  padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem;
  background: #fff;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; border-color: transparent; }
.field input[readonly] { background: #f6f1eb; color: var(--brand-fg-muted); }
.field--error input, .field--error textarea { border-color: #c0532f; }

.notice--error { background: #fbeeea; border-left: 3px solid #c0532f; color: #7a3320; }

.payments { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-column: 1 / -1; }
.payments__item label {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid #e0d5c7; border-radius: 0.6rem; padding: 0.85rem 1rem;
  font-size: 0.92rem; cursor: pointer; background: #fff;
}
.payments__item input:disabled + span { color: var(--brand-fg-muted); }

.checkout__summary { background: #faf7f4; border-radius: 0.9rem; padding: 1.5rem; position: sticky; top: 5.5rem; }
.checkout__summary h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.checkout__lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; }
.checkout__lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.checkout__summary .btn { border: 0; cursor: pointer; font-family: inherit; }

.thanks { text-align: center; padding-top: 3rem; max-width: 34rem; }
.thanks h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.thanks__number { font-size: 1.05rem; }

@media (max-width: 64rem) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
}
@media (max-width: 48rem) {
  .checkout__block { grid-template-columns: 1fr; }
}

/* --- Product page: gallery + sticky buy column ---------------------------- */
.pdp__cover-wrap { position: relative; }

.pdp__cover[src$=".svg"] {
  height: 100%;
  object-fit: contain;
  background: var(--brand-bg-soft);
}

.pdp__badge-sale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-dark);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pdp__buybox { display: grid; gap: 0.9rem; align-content: start; }

.pdp__brand {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.pdp__buybox h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.pdp__sku { margin: 0; font-size: 0.85rem; color: var(--brand-muted); }

.pdp__pricebox { display: grid; gap: 0.2rem; }

.pdp__rrp {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--brand-muted);
}

.pdp__rrp del { text-decoration-thickness: 1px; }

.pdp__save {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--brand-bg-soft);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.8rem;
}

.pdp__price {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pdp__price--sale { color: var(--brand-dark); }
.pdp__tax { margin: 0; font-size: 0.82rem; color: var(--brand-muted); }

.pdp__stock {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pdp__stock-note { font-size: 0.85rem; color: var(--brand-muted); }

.pdp__option { display: grid; gap: 0.4rem; }
.pdp__option-name { font-size: 0.85rem; color: var(--brand-muted); }
.pdp__variant-pills { min-width: 0; margin: 0; padding: 0; border: 0; }
.pdp__variant-pills legend { margin-bottom: 0.45rem; padding: 0; }
.pdp__variant-groups { display: grid; gap: 0.8rem; }
.pdp__variant-fallback { display: grid; gap: 0.4rem; }
.pdp__variant-fallback select { min-height: 2.75rem; width: 100%; }
.pdp__variant-pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pdp__variant-pill { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.pdp__variant-pill input {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pdp__variant-pill > span {
  display: inline-flex; align-items: center; min-height: 2.5rem; max-width: 100%;
  padding: 0.55rem 0.85rem; border: 1px solid var(--brand-line);
  border-radius: 999px; background: var(--brand-surface); color: var(--brand-fg);
  font-size: 0.86rem; line-height: 1.25; font-variant-numeric: lining-nums tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pdp__variant-pill:hover > span { border-color: var(--brand-accent-strong); }
.pdp__variant-pill input:checked + span {
  border-color: var(--brand-dark); background: var(--brand-dark); color: #fff;
}
.pdp__variant-pill input:focus-visible + span {
  outline: 2px solid var(--brand-accent-strong); outline-offset: 2px;
}
.pdp__variant-pill:has(input:disabled) { cursor: not-allowed; }
.pdp__variant-pill input:disabled + span {
  color: var(--brand-muted); background: var(--brand-bg-soft); text-decoration: line-through;
}
.pdp__variant-pill--out { cursor: not-allowed; }
.pdp__variant-pill--out > span { color: var(--brand-muted); background: var(--brand-bg-soft); text-decoration: line-through; }
.pdp__swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.swatch {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  font-size: 0.88rem;
}

.pdp__buy-form { display: grid; gap: 0.9rem; }
.pdp__variant { display: grid; gap: 0.35rem; }

/* Native control, brand shell: appearance is reset so the arrow can be drawn
   with the same chevron used elsewhere instead of the OS default. */
.pdp__variant select {
  appearance: none;
  width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 0.8rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background-color: var(--brand-surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-muted) 50%),
    linear-gradient(135deg, var(--brand-muted) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pdp__variant select:focus-visible { outline: 2px solid var(--brand-accent-strong); outline-offset: 1px; }
.pdp__variant select option:disabled { color: var(--brand-muted); }

.pdp__from { font-size: 0.62em; font-weight: 500; color: var(--brand-muted); }

.pdp__buy { display: flex; gap: 0.6rem; align-items: stretch; }

.pdp__buy .btn { flex: 1 1 auto; }

.pdp__trust {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--brand-line);
  display: grid;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.pdp__trust li { display: flex; align-items: center; gap: 0.55rem; }
.pdp__trust svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand-accent-strong, var(--brand-dark)); }
.pdp__trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pdp__added { margin: 0.75rem 0 0; color: #286c58; font-size: 0.9rem; }
.pdp__added a { color: inherit; font-weight: 600; }

/* The buy column follows the gallery on long pages, as the Odoo shops do. */
@media (min-width: 64rem) {
  .pdp__buybox { position: sticky; top: 5.5rem; }
}

/* --- Selling points ------------------------------------------------------- */
.pdp__facts-lead { padding-top: 0; }

.pdp__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.pdp__points li { position: relative; padding-left: 1.55rem; line-height: 1.55; }

.pdp__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  transform: rotate(-45deg);
}

/* --- Collapsible detail sections ----------------------------------------- */
.pdp__accordion {
  max-width: var(--brand-page-width);
  margin: 0 auto;
  padding: 1rem var(--brand-gutter) 0;
  border-top: 1px solid var(--brand-line);
}

.pdp__panel { border-bottom: 1px solid var(--brand-line); }

.pdp__panel > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 600;
}

.pdp__panel > summary::-webkit-details-marker { display: none; }

/* Chevron drawn from the marker so no extra element is needed. */
.pdp__panel > summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--brand-muted);
  border-bottom: 2px solid var(--brand-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.pdp__panel[open] > summary::after { transform: rotate(-135deg); }

.pdp__panel-count {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--brand-bg-soft);
  color: var(--brand-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.pdp__panel-body { padding: 0 0 1.4rem; max-width: 52rem; line-height: 1.65; }
.pdp__panel-body > :first-child { margin-top: 0; }
.pdp__specs p { margin: 0 0 0.4rem; }
.pdp__specs ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }

.pdp__description { max-width: 76ch; }
.pdp__description p { margin: 0 0 1rem; }
.pdp__description p:last-child { margin-bottom: 0; }
.pdp__description ul,
.pdp__description ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.pdp__description li + li { margin-top: 0.35rem; }
.pdp__number,
.product-card__price,
.product-card__rrp,
.product-card__sale,
.pdp__price,
.pdp__rrp del,
.pdp__save,
.pdp__badge-sale,
.pdp__sku,
.pdp__panel-count,
.pdp__variant select,
.pdp__variant select option,
.variants__sku,
.variants td,
.bundle__qty,
.cart-line__qty input,
.cart-line__price span,
.cart-summary__row strong,
.checkout__lines,
.checkout__summary,
.tiers,
.pager__state {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.pdp__content-section + .pdp__content-section {
  border-top: 1px solid var(--brand-line);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.pdp__content-section > :first-child { margin-top: 0; }
.pdp__content-section > :last-child { margin-bottom: 0; }
.pdp__package { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.pdp__section-lead { margin: 0 0 1rem; color: var(--brand-muted); }

.pdp__notes {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--brand-accent);
  background: var(--brand-bg-soft);
  border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
}

/* The old shop hid some notes in white text; force them readable. */
.pdp__notes [style*="255, 255, 255"],
.pdp__notes [style*="#fff"] { color: inherit !important; }

/* --- Set contents (Stückliste) ------------------------------------------- */
.bundle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.bundle__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: var(--brand-surface);
}

.bundle__img {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: calc(var(--brand-radius) - 2px);
  background: var(--brand-bg-soft);
}

.bundle__img--empty { display: block; border: 1px dashed var(--brand-line); }

.bundle__name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.95rem;
}

.bundle__name a { color: inherit; }
.bundle__sku { font-size: 0.78rem; color: var(--brand-muted); letter-spacing: 0.02em; }
.bundle__qty { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Sub-categories and paging ------------------------------------------- */
.subcats { max-width: var(--brand-page-width); margin: 0 auto 1.5rem; padding: 0 var(--brand-gutter); }
.subcats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.subcats a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-surface);
  color: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.subcats a:hover { border-color: var(--brand-accent); background: var(--brand-bg-soft); }
.subcats a span { color: var(--brand-muted); font-size: 0.78rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }

.pager__link {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  color: inherit;
  font-size: 0.92rem;
}

.pager__link:hover { border-color: var(--brand-accent); }
.pager__state { color: var(--brand-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* --- Grouped navigation -------------------------------------------------- */
.nav__item { position: relative; }

.nav__group > summary { cursor: pointer; list-style: none; }

.nav__group > summary::-webkit-details-marker { display: none; }
.nav__group > summary svg { transition: transform 0.15s ease; opacity: 0.7; }
.nav__group[open] > summary svg { transform: rotate(180deg); }

.nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.6rem;
  z-index: 40;
  min-width: 15rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  box-shadow: 0 12px 32px rgb(18 18 18 / 12%);
}

.nav__sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  border-radius: calc(var(--brand-radius) - 2px);
  color: inherit;
  font-size: 0.92rem;
  text-decoration: none;
}

.nav__sub a:hover { background: var(--brand-bg-soft); }
.nav__sub a span { color: var(--brand-muted); font-size: 0.78rem; }

@media (max-width: 64rem) {
  .nav__sub {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 0.9rem;
    min-width: 0;
  }
  .nav__group > summary { padding: 0.5rem 0; }
}

/* --- Checkout ------------------------------------------------------------ */

/* --- Consent banner ------------------------------------------------------- */
.consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  box-shadow: 0 16px 40px rgb(18 18 18 / 18%);
}

.consent p { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.55; }

.consent__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.consent__actions a { font-size: 0.85rem; color: var(--brand-muted); }

.footer__link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.footer__link-button:hover { text-decoration: underline; }

.checkout__legal {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--brand-muted);
}

.checkout__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Blog ------------------------------------------------------------------ */
.articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.articles__item a {
  display: block;
  height: 100%;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: var(--brand-surface);
  color: inherit;
  transition: border-color 0.15s ease;
}

.articles__item a:hover { border-color: var(--brand-accent); }
.articles__item h2 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 500; }
.articles__item time { font-size: 0.8rem; color: var(--brand-muted); }
.articles__item p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--brand-muted); line-height: 1.55; }

.article__date { color: var(--brand-muted); font-size: 0.85rem; margin-top: -0.5rem; }

/* --- Card sale marks ------------------------------------------------------- */
.product-card__figure { position: relative; }

.product-card__sale {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-dark);
  color: var(--brand-dark-fg);
  font-size: 0.75rem;
  font-weight: 600;
}

.product-card__rrp { color: var(--brand-muted); font-size: 0.82rem; margin-left: 0.4rem; }
.product-card__price--sale { font-weight: 600; }

/* --- Quantity stepper ------------------------------------------------------ */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  overflow: hidden;
}

.qty input[type="number"] {
  width: 3.2rem;
  border: 0;
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty__btn {
  width: 2.4rem;
  border: 0;
  background: var(--brand-bg-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.qty__btn:hover { background: var(--brand-line); }

/* --- Sticky buy bar (phones) ------------------------------------------------ */
.buybar { display: none; }
.buybar[hidden] { display: none; }

@media (max-width: 48rem) {
  .buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-line);
    box-shadow: 0 -10px 30px rgb(18 18 18 / 10%);
  }

  .buybar__price {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .buybar .btn { flex: 1 1 auto; }

  /* The page must not end underneath the bar. */
  .pdp { padding-bottom: 4.5rem; }
}

/* Blog imagery. height:auto so the width/height attributes reserve space
   without fighting the ratio (the trap that squashed the product grid). */
.articles__img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: calc(var(--brand-radius) - 1px);
  margin-bottom: 0.75rem;
  background: var(--brand-bg-soft);
}

.article__hero {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--brand-radius);
  margin-bottom: 1.5rem;
  background: var(--brand-bg-soft);
}

/* The whole article card is one link, so the underline has to be switched off
   here rather than inherited onto the title, date and excerpt. */
.articles__item a,
.articles__item a:hover { text-decoration: none; }
.articles__item h2 { text-decoration: none; }

/* --- Numbers in prose ------------------------------------------------------ */
/*
 * Raleway's default figures are proportional, so a column of prices and weight
 * ranges never lines up — "15-40" sits wider than "0-5" and the eye reads the
 * list as crooked. Tabular figures in running content fix that; the shop
 * already uses them for prices.
 */
.prose { font-variant-numeric: tabular-nums; }

.tiers {
  list-style: none;
  margin: 0.6rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  max-width: 26rem;
}

.tiers li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.4rem 0.7rem;
  border-radius: calc(var(--brand-radius) - 1px);
  background: var(--brand-bg-soft);
}

/* The row arrives as "0-5 Kg: 2,99€"; the colon separates label from value. */
.tiers li::before { content: none; }

/* Country lists and similar runs of short lines the old theme set as
   paragraphs. Compact, so they read as one block instead of a sparse column. */
.prose .plain {
  margin: 0.5rem 0 1rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.15rem;
}