/* 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; height: 4rem; width: 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; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.lang-switch { display: flex; align-items: center; gap: 0.1rem; margin-right: 0.25rem; font-size: 0.78rem; font-weight: var(--brand-font-weight-bold); letter-spacing: 0.04em; }
.lang-switch__item { padding: 0.3rem 0.4rem; border-radius: 999px; color: inherit; text-decoration: none; opacity: 0.6; }
.lang-switch__item:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.lang-switch__item.is-current { opacity: 1; background: rgba(255, 255, 255, 0.55); }
.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; }
/* Category introduction: a narrow line measure keeps it readable. */
.page-head__intro { margin: 0.9rem 0 0; max-width: 72ch; color: var(--brand-fg);
  font-size: 1.05rem; line-height: 1.6; }
/* Detailed category copy follows the products as a distinct reading section. */
.category-copy { max-width: 72ch; margin: 2.5rem auto 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--brand-line);
  color: var(--brand-fg-muted); font-size: 0.95rem; line-height: 1.65; }
.category-copy h2 { margin: 0 0 1rem; color: var(--brand-fg);
  font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 400; line-height: 1.3; }
.category-copy a { color: inherit; text-underline-offset: 0.15em; }
.category-copy p { margin: 0 0 0.75rem; }
.page-head__intro p { margin: 0 0 0.6rem; }
.page-head__intro p:last-child { margin-bottom: 0; }
.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: var(--brand-accent); border-top: 0; 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: 5rem; 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__company { margin-top: 0.85rem; font-style: normal; color: var(--brand-fg-muted); font-size: 0.88rem; line-height: 1.6; }
.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-card--payment {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-bottom: 1rem; background: var(--brand-bg-soft);
}
.account-card--payment h2 { margin-bottom: 0.35rem; }
.account-card--payment p { margin: 0; color: var(--brand-muted); }
.account-card--payment form { flex: 0 0 auto; }
.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 { height: 3.25rem; width: auto; }
  .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-card--payment { align-items: stretch; flex-direction: column; }
  .account-card--payment .btn { width: 100%; }
  .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 ---------- */

.catalog-controls {
  max-width: var(--brand-page-width); margin: 0 auto; padding: 0 var(--brand-gutter) 1.25rem;
  display: flex; align-items: end; justify-content: flex-end; gap: 1rem;
}
.catalog-controls label { display: grid; gap: 0.3rem; font-size: 0.78rem; color: var(--brand-fg-muted); }
.catalog-controls select {
  min-height: 2.5rem; padding: 0.45rem 2rem 0.45rem 0.7rem;
  border: 1px solid var(--brand-line); border-radius: var(--brand-radius);
  background: var(--brand-surface); color: var(--brand-fg); font: inherit;
}
.catalog-controls__availability { display: flex !important; grid-auto-flow: column; align-items: center; gap: 0.5rem !important; min-height: 2.5rem; }
.catalog-controls__availability input { width: 1rem; height: 1rem; accent-color: var(--brand-dark); }
.catalog-controls__submit { min-height: 2.5rem; border: 1px solid var(--brand-dark); background: var(--brand-dark); color: #fff; cursor: pointer; }

@media (max-width: 48rem) {
  .catalog-controls { align-items: stretch; display: grid; grid-template-columns: 1fr auto; padding-inline: 1rem; }
  .catalog-controls__availability { grid-column: 1 / -1; }
}

.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__row--minor { margin-top: .65rem; font-size: .95rem; }
.cart-summary__row--minor strong { font-size: 1rem; }
.cart-summary__note { margin: 0.3rem 0 1.25rem; font-size: 0.8rem; color: var(--brand-fg-muted); }
.cart-summary__row--discount { margin-top: .65rem; font-size: .95rem; color: var(--brand-berry); }
.cart-summary__hint { margin: 0 0 1rem; font-size: .9rem; font-weight: 600; color: var(--brand-berry-dark); }
.ship-bar { margin: 0 0 1rem; }
.ship-bar__text { margin: 0 0 .4rem; font-size: .9rem; }
.ship-bar__track { display: block; width: 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--brand-pink-soft); appearance: none; -webkit-appearance: none; }
.ship-bar__track::-webkit-progress-bar { background: var(--brand-pink-soft); border-radius: 999px; }
.ship-bar__track::-webkit-progress-value { background: var(--brand-berry); border-radius: 999px; }
.ship-bar__track::-moz-progress-bar { background: var(--brand-berry); border-radius: 999px; }
.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; }
.search-correction { margin: 0.65rem 0 0; color: var(--brand-fg-muted); font-size: 0.9rem; }

@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, .field select {
  border: 1px solid #e0d5c7; border-radius: 0.6rem;
  padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem;
  background: #fff;
}
.field select { color: inherit; min-height: 2.75rem; }
.field input:focus, .field textarea:focus, .field select: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; gap: 0.75rem; margin-bottom: 1.4rem; }
  .checkout__block legend { margin-bottom: 0.35rem; }
  .field { gap: 0.2rem; }
  .field input, .field textarea, .field select { padding: 0.58rem 0.7rem; }
  .payments { gap: 0.45rem; }
  .payments__item label { padding: 0.72rem 0.8rem; }
}

/* --- 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__delivery { margin: -0.45rem 0 0; font-size: 0.82rem; }
.pdp__delivery a { color: var(--brand-fg-muted); text-underline-offset: 2px; }

.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,
.lightbox__count,
.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; }
/* Below a blog article: aligned with the 68ch reading column of .prose. */
.subcats--article { max-width: calc(68ch + 2 * var(--brand-gutter)); margin-bottom: 3rem; }
.subcats__title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 400; }

.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%);
}

/* Keep the hover target continuous across the visual gap below the trigger. */
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

.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; }
  .nav__sub::before { display: none; }
}

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

/* Equal width as well as equal style: neither answer may dominate. */
.consent__actions .btn { flex: 1 1 9rem; text-align: center; border: 0; cursor: pointer; font-family: inherit; }
.consent:focus { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.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; }

/* EU legal guarantee notice: the official file at its own proportions, never
   cropped or recoloured; 40rem keeps its small print legible at default size
   (EU guidelines, 2.3); the 1px frame only separates its white field from the page. */
.cart-guarantee { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--brand-line); }
.cart-guarantee h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 400; }
.guarantee-notice { margin: 0; max-width: 40rem; }
.guarantee-notice img { display: block; width: 100%; height: auto; border: 1px solid var(--brand-line); }
.guarantee-notice figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--brand-muted); }
.guarantee-notice a { color: var(--brand-fg); 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;
}

/* ---------- Customer reviews ---------- */

/* Read-only stars: a grey row of five with a gold overlay clipped to the
   rating, in tenths so 4.8 fills the fifth star to 80 % (like Amazon). The
   width comes from a data attribute — inline style is not an option under the
   CSP. System font: the brand fonts have no star glyph. */
.stars {
  position: relative;
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-star-empty);
  white-space: nowrap;
  vertical-align: -0.1em;
}
.stars::before { content: "★★★★★"; }
.stars::after {
  content: "★★★★★";
  position: absolute; inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--brand-star);
  width: 0;
}
.stars--large { font-size: 1.5rem; }
.stars[data-rating="0.1"]::after { width: 2%; }
.stars[data-rating="0.2"]::after { width: 4%; }
.stars[data-rating="0.3"]::after { width: 6%; }
.stars[data-rating="0.4"]::after { width: 8%; }
.stars[data-rating="0.5"]::after { width: 10%; }
.stars[data-rating="0.6"]::after { width: 12%; }
.stars[data-rating="0.7"]::after { width: 14%; }
.stars[data-rating="0.8"]::after { width: 16%; }
.stars[data-rating="0.9"]::after { width: 18%; }
.stars[data-rating="1.0"]::after { width: 20%; }
.stars[data-rating="1.1"]::after { width: 22%; }
.stars[data-rating="1.2"]::after { width: 24%; }
.stars[data-rating="1.3"]::after { width: 26%; }
.stars[data-rating="1.4"]::after { width: 28%; }
.stars[data-rating="1.5"]::after { width: 30%; }
.stars[data-rating="1.6"]::after { width: 32%; }
.stars[data-rating="1.7"]::after { width: 34%; }
.stars[data-rating="1.8"]::after { width: 36%; }
.stars[data-rating="1.9"]::after { width: 38%; }
.stars[data-rating="2.0"]::after { width: 40%; }
.stars[data-rating="2.1"]::after { width: 42%; }
.stars[data-rating="2.2"]::after { width: 44%; }
.stars[data-rating="2.3"]::after { width: 46%; }
.stars[data-rating="2.4"]::after { width: 48%; }
.stars[data-rating="2.5"]::after { width: 50%; }
.stars[data-rating="2.6"]::after { width: 52%; }
.stars[data-rating="2.7"]::after { width: 54%; }
.stars[data-rating="2.8"]::after { width: 56%; }
.stars[data-rating="2.9"]::after { width: 58%; }
.stars[data-rating="3.0"]::after { width: 60%; }
.stars[data-rating="3.1"]::after { width: 62%; }
.stars[data-rating="3.2"]::after { width: 64%; }
.stars[data-rating="3.3"]::after { width: 66%; }
.stars[data-rating="3.4"]::after { width: 68%; }
.stars[data-rating="3.5"]::after { width: 70%; }
.stars[data-rating="3.6"]::after { width: 72%; }
.stars[data-rating="3.7"]::after { width: 74%; }
.stars[data-rating="3.8"]::after { width: 76%; }
.stars[data-rating="3.9"]::after { width: 78%; }
.stars[data-rating="4.0"]::after { width: 80%; }
.stars[data-rating="4.1"]::after { width: 82%; }
.stars[data-rating="4.2"]::after { width: 84%; }
.stars[data-rating="4.3"]::after { width: 86%; }
.stars[data-rating="4.4"]::after { width: 88%; }
.stars[data-rating="4.5"]::after { width: 90%; }
.stars[data-rating="4.6"]::after { width: 92%; }
.stars[data-rating="4.7"]::after { width: 94%; }
.stars[data-rating="4.8"]::after { width: 96%; }
.stars[data-rating="4.9"]::after { width: 98%; }
.stars[data-rating="5.0"]::after { width: 100%; }

.pdp__rating {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.9rem;
  color: var(--brand-fg-muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.pdp__rating:hover .pdp__rating-text { text-decoration: underline; text-underline-offset: 2px; }
.pdp__rating-text,
.reviews__count,
.reviews__average,
.review__meta time {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.reviews { max-width: 52rem; }
/* Anchor targets (#bewertungen, #bewertung-schreiben) must clear the sticky header. */
.reviews, .reviews__write { scroll-margin-top: 9rem; }
#review-order {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1.5rem; }
.reviews__average { font-size: 1.5rem; font-weight: 600; }
.reviews__count { color: var(--brand-muted); }
.reviews__empty { margin: 0 0 1.25rem; color: var(--brand-muted); }
.reviews__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.review { padding: 1.1rem 0; border-top: 1px solid var(--brand-line); }
.review:last-child { border-bottom: 1px solid var(--brand-line); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.45rem; }
.review__title { font-weight: 600; }
/* Stored as typed; line breaks are kept by CSS, not by injecting markup. */
.review__body { margin: 0 0 0.5rem; white-space: pre-line; text-wrap: pretty; max-width: 76ch; }
.review__meta { margin: 0; color: var(--brand-muted); font-size: 0.85rem; }
.review__verified { color: #176b4f; font-weight: 600; }
/* Shop answer (Shop Hub): a quiet grey block under the review, never in JSON-LD. */
.review__reply { margin: 0.75rem 0 0; padding: 0.75rem 1rem; background: var(--brand-bg-soft); border-radius: var(--brand-radius); max-width: 76ch; }
.review__reply-head { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--brand-muted); }
.review__reply-head strong { color: var(--brand-fg); font-weight: 600; }
.review__reply-body { margin: 0; white-space: pre-line; text-wrap: pretty; }

.reviews__write { margin: 0 0 1.5rem; }
.reviews__write > summary {
  display: inline-block;
  list-style: none;
  padding: 0.75rem 1.8rem;
  border: 1px solid var(--brand-fg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.reviews__write > summary::-webkit-details-marker { display: none; }
.reviews__write[open] > summary { margin-bottom: 1.25rem; }
.reviews__policy { margin: 0; color: var(--brand-muted); font-size: 0.85rem; max-width: 76ch; }

.review-form { display: grid; gap: 1rem; max-width: 36rem; }
.review-form textarea { resize: vertical; min-height: 7.5rem; }
.review-form .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.field__hint { margin: 0; color: var(--brand-muted); font-size: 0.8rem; }
.field__error { margin: 0; color: #9c3a1f; font-size: 0.82rem; font-weight: 600; }
.review-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.review-form__consent { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; align-items: start; font-size: 0.88rem; }
.review-form__consent input { margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-dark); }
.review-form__consent .field__error { grid-column: 2; }
.review-form__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Star picker: real radios in 1..5 order, so arrow keys move naturally.
   :has() fills every star up to the checked or hovered one; without :has()
   only the chosen star lights up, which still reads correctly. */
.rating-input { border: 0; margin: 0; padding: 0; }
.rating-input legend { font-size: 0.82rem; color: var(--brand-fg-muted); padding: 0; margin-bottom: 0.35rem; }
.rating-input__stars { display: inline-flex; gap: 0.15rem; }
.rating-input__stars label {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 2rem; line-height: 1;
  color: var(--brand-line);
  cursor: pointer;
  padding: 0.3rem 0.2rem;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rating-input__stars input:checked + label { color: var(--brand-accent-strong); }
.rating-input__stars input:focus-visible + label { outline: 2px solid var(--brand-accent-strong); outline-offset: 2px; border-radius: var(--brand-radius); }
.rating-input__stars:has(#review-rating-2:checked) label:nth-of-type(-n+2),
.rating-input__stars:has(#review-rating-3:checked) label:nth-of-type(-n+3),
.rating-input__stars:has(#review-rating-4:checked) label:nth-of-type(-n+4),
.rating-input__stars:has(#review-rating-5:checked) label:nth-of-type(-n+5) { color: var(--brand-accent-strong); }
@media (hover: hover) {
  .rating-input__stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
  .rating-input__stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
  .rating-input__stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
  .rating-input__stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
  .rating-input__stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) { color: var(--brand-accent-strong); }
}
.rating-input--error .rating-input__stars { outline: 1px solid #c0532f; outline-offset: 4px; border-radius: var(--brand-radius); }

/* ---------- Online withdrawal (§ 356a BGB) ---------- */

/* The withdrawal function must be prominent on every page: an outlined pill
   in the footer's brand column, not one more muted text link. */
.footer__col a.footer__withdraw {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.1rem; min-height: 44px; padding: 0.55rem 1.4rem;
  border: 1.5px solid var(--brand-fg); border-radius: 999px;
  color: var(--brand-fg); font-weight: 600; font-size: 0.9rem;
  background: var(--brand-surface);
}
.footer__col a.footer__withdraw:hover { background: var(--brand-fg); color: var(--brand-surface); }

.btn--outline { background: transparent; color: var(--brand-fg); border: 1.5px solid var(--brand-fg); cursor: pointer; font-family: inherit; }
.btn--outline:hover { transform: translateY(-2px); }

.withdrawal { max-width: 40rem; }
.withdrawal__lead { margin: 0 0 1.25rem; max-width: 64ch; text-wrap: pretty; }
.withdrawal__form { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.withdrawal__form textarea { resize: vertical; min-height: 5rem; }
.withdrawal__form .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.withdrawal__alt { margin: 0; color: var(--brand-muted); font-size: 0.88rem; max-width: 64ch; }
.withdrawal__alt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.withdrawal__facts { margin: 0 0 1.25rem; border-top: 1px solid var(--brand-line); }
.withdrawal__facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--brand-line); }
.withdrawal__facts dt { color: var(--brand-muted); font-size: 0.88rem; }
.withdrawal__facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }
.withdrawal__declaration { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; background: var(--brand-bg-soft); border-left: 3px solid var(--brand-accent-strong); }
.withdrawal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.withdrawal__actions .btn--primary { border: 0; cursor: pointer; font-family: inherit; }
.withdrawal .notice p { margin: 0.35rem 0 0; }
@media (max-width: 30rem) {
  .withdrawal__facts > div { grid-template-columns: 1fr; }
}

/* --- Product gallery: zoom link and full-screen viewer (gallery.js) -------- */
.pdp__zoom {
  position: relative; display: block; height: 100%;
  border-radius: var(--brand-radius); cursor: zoom-in;
}
.pdp__zoom:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.pdp__zoom-hint {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: rgb(255 255 255 / 90%); color: var(--brand-fg);
  box-shadow: 0 2px 10px rgb(18 18 18 / 14%); pointer-events: none;
}

html.lightbox-open { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgb(18 18 18 / 94%); color: var(--brand-dark-fg);
}
.lightbox::backdrop { background: rgb(18 18 18 / 60%); }
/* Flex, not grid: a grid row grows with the photo and max-height: 100% would
   not bind, so a tall photo was cut off at the bottom. */
.lightbox__stage {
  position: absolute; inset: 3.75rem 4.75rem 3rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: pan-y;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--brand-radius); background: var(--brand-surface);
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  transition: transform 0.2s ease;
}
.lightbox.is-zoomed .lightbox__stage { touch-action: none; }
.lightbox.is-zoomed .lightbox__img { cursor: zoom-out; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 14%); color: var(--brand-dark-fg); cursor: pointer;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 26%); }
.lightbox__btn:focus-visible { outline: 2px solid var(--brand-dark-fg); outline-offset: 2px; }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__prev { left: 0.9rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.9rem; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; top: 1.35rem; left: 1rem; margin: 0; font-size: 0.9rem; }
.lightbox__hint {
  position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0;
  text-align: center; font-size: 0.8rem; color: rgb(255 255 255 / 72%);
}
.lightbox.is-zoomed .lightbox__hint { visibility: hidden; }

@media (max-width: 40rem) {
  .lightbox__stage { inset: 3.75rem 0 4.5rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 0.75rem; transform: none; }
  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
  .lightbox__hint { bottom: 1.6rem; padding: 0 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__img { transition: none; }
}

.review__about { margin: .25rem 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--brand-berry-dark); }

/* ==========================================================================
   Liore look of liorelash.com (Mariana 2026-10-21: "make the EU site like the
   Australian one"). Black announcement bar, pink header and footer, Playfair
   headings, the two worlds side by side on the home page.
   ========================================================================== */

.promo {
  font-family: var(--brand-font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-block: 0.7rem;
}
.header {
  background: var(--brand-accent);
  backdrop-filter: none;
  border-bottom: 0;
}
.nav__list > .nav__item > a,
.nav__group > summary {
  font-family: var(--brand-font-display);
  font-size: 1.05rem;
  font-weight: 400;
}
.nav__list > .nav__item > a::after,
.nav__group > summary::after { background: var(--brand-fg); }
.header__action:hover { background: rgba(255, 255, 255, 0.45); }
.footer h2 { font-family: var(--brand-font-display); font-weight: 600; }

.lh-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lh-eyebrow--berry { color: var(--brand-berry-dark); }
.lh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.4rem; padding: 0 2.1rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent;
}
.lh-btn--ink { background: var(--brand-dark); color: var(--brand-dark-fg); border-radius: 999px; }
.lh-btn--white { background: #fff; color: var(--brand-dark); border-radius: 2px; }
.lh-btn--outline { color: var(--brand-dark); border-color: var(--brand-dark); border-radius: 999px; min-height: 2.75rem; padding: 0 1.5rem; }
.lh-btn:hover { transform: translateY(-1px); }
.lh-chip {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
  padding: 0.4rem 0.7rem; border-radius: 999px;
  background: var(--brand-dark); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lh-chip--light {
  top: auto; bottom: 0.6rem; left: 0.6rem;
  background: #fff; color: var(--brand-dark);
  text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Two worlds */
.lh-worlds { display: grid; grid-template-columns: 1fr 1fr; }
.lh-world { padding: 3.25rem clamp(1.25rem, 8vw, 7.5rem) 2.5rem; }
.lh-world--home { background: var(--brand-accent); color: var(--brand-fg); }
.lh-world--pro { background: var(--brand-dark); color: #fff; }
.lh-world--pro .lh-eyebrow { color: var(--brand-accent); }
.lh-world__title {
  margin: 0 0 1.25rem;
  font-family: var(--brand-font-display);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
}
.lh-world__title em { font-style: italic; }
.lh-world__lead { max-width: 30rem; margin: 0 0 1.75rem; line-height: 1.6; }
.lh-world__media {
  position: relative; display: block;
  max-width: 27.5rem; margin: 2.25rem auto 0;
  border-radius: 14px; overflow: hidden; background: #fff;
  color: inherit; text-decoration: none;
}
.lh-world__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.lh-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.75rem;
  margin: 0; padding: 1rem var(--brand-gutter); list-style: none;
  background: var(--brand-pink-soft); border-block: 1px solid var(--brand-line);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
}
.lh-strip li::before { content: "•"; color: var(--brand-berry); margin-right: 0.5rem; }

/* Sections */
.lh-section { max-width: var(--brand-page-width); margin: 0 auto; padding: 3.5rem var(--brand-gutter); }
.lh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.lh-head h2,
.lh-steps h2,
.lh-reviews h2 {
  margin: 0;
  font-family: var(--brand-font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
}
.lh-more {
  flex-shrink: 0; color: var(--brand-fg); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-underline-offset: 4px;
}
.lh-kitbar {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center;
  margin: 0 0 0.75rem; padding: 0.8rem 1rem; border-radius: 10px;
  background: var(--brand-pink-soft); font-size: 0.85rem;
}
.lh-deal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem;
  margin: 0 0 1.5rem; padding: 0.75rem 1rem; border-radius: 10px;
  background: var(--brand-dark); color: #fff; font-size: 0.85rem;
}
.lh-deal strong { font-size: 0.95rem; }
.lh-deal__badge {
  padding: 0.25rem 0.6rem; border-radius: 999px;
  background: var(--brand-accent); color: var(--brand-dark); font-weight: 700; font-size: 0.75rem;
}

/* Cluster looks */
.lh-looks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1rem;
  margin: 0; padding: 0; list-style: none;
}
.lh-look a, .lh-pro__card a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; color: inherit; text-decoration: none; }
.lh-look__figure { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--brand-pink-soft); }
.lh-look__figure img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 0.3s ease; }
.lh-look a:hover img { transform: scale(1.03); }
.lh-look__style { margin-top: 0.6rem; color: var(--brand-berry-dark); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
.lh-look__name { font-family: var(--brand-font-display); font-size: 1.35rem; line-height: 1.2; }
.lh-rating { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--brand-muted); }
.lh-rating strong { color: var(--brand-fg); }
.lh-price { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.lh-soldout { color: var(--brand-berry); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Steps */
.lh-steps { background: var(--brand-pink-soft); }
.lh-steps__inner { max-width: var(--brand-page-width); margin: 0 auto; padding: 3.5rem var(--brand-gutter); }
.lh-steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.lh-steps__list li { padding: 1.15rem; border-radius: 10px; background: #fff; }
.lh-steps__num { display: block; color: var(--brand-berry); font-family: var(--brand-font-display); font-size: 1.6rem; }
.lh-steps__list strong { display: block; margin: 0.4rem 0; }
.lh-steps__list p { margin: 0; color: var(--brand-muted); font-size: 0.9rem; line-height: 1.6; }

/* Reviews */
.lh-reviews { background: var(--brand-pink-soft); border-top: 1px solid var(--brand-line); }
.lh-reviews__inner { max-width: var(--brand-page-width); margin: 0 auto; padding: 3rem var(--brand-gutter); }
.lh-reviews__summary { margin: 0.75rem 0 1.5rem; color: var(--brand-muted); font-size: 0.85rem; }
.lh-reviews__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 0 0 1.75rem; padding: 0; list-style: none;
}
.lh-review { display: flex; flex-direction: column; padding: 1rem; border-radius: 14px; background: #fff; }
.lh-review__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
.lh-review__top .stars { font-size: 0.85rem; }
.lh-review__product { color: var(--brand-berry-dark); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
.lh-review h3 { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.35; }
.lh-review__body {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 0 1rem; color: var(--brand-muted); font-size: 0.85rem; line-height: 1.6;
}
.lh-review__meta { margin: auto 0 0; color: var(--brand-muted); font-size: 0.75rem; line-height: 1.5; }
.lh-review__meta strong { color: var(--brand-fg); }

/* Pro favourites: bordered cells like liorelash.com */
.lh-pro {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--brand-dark);
}
.lh-pro__card { padding: 1.1rem; border-left: 1px solid var(--brand-dark); }
.lh-pro__card:first-child { border-left: 0; }
.lh-pro__card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.lh-pro__name { margin-top: 0.5rem; font-size: 1.05rem; font-weight: 700; }
.lh-pro__spec { color: var(--brand-muted); font-size: 0.8rem; }

.lh-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  max-width: var(--brand-page-width); margin: 0 auto; padding: 2rem var(--brand-gutter);
  list-style: none; border-top: 1px solid var(--brand-line); font-size: 0.82rem;
}
.lh-trust li { display: flex; flex-direction: column; gap: 0.2rem; }
.lh-trust span, .lh-trust a { color: var(--brand-muted); }
.lh-trust a { text-underline-offset: 3px; }

.lh-insta { padding: 2.5rem var(--brand-gutter) 3rem; text-align: center; }
.lh-insta .lh-eyebrow { margin-bottom: 0.35rem; }
.lh-insta a {
  color: var(--brand-fg); text-decoration: none;
  font-family: var(--brand-font-display); font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 500;
}

@media (max-width: 64rem) {
  .lh-looks, .lh-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-pro, .lh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-pro__card:nth-child(3) { border-left: 0; }
  .lh-pro__card:nth-child(n + 3) { border-top: 1px solid var(--brand-dark); }
}
@media (max-width: 48rem) {
  .lh-worlds { grid-template-columns: 1fr; }
  .lh-world { padding: 2.25rem var(--brand-gutter) 2rem; }
  .lh-steps__list { grid-template-columns: 1fr; }
  .lh-head { flex-direction: column; align-items: flex-start; }
  .lh-reviews__list { grid-template-columns: 1fr; }
}

/* Header like liorelash.com on wide screens: logo left, menu centred. */
@media (min-width: 64.01rem) {
  .header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .header__brand { grid-column: 1; justify-self: start; }
  .nav { grid-column: 2; justify-self: center; }
}

/* Colour dots under the hero kit and on kit cards, as on liorelash.com. */
.lh-colours { display: flex; gap: 0.9rem; text-decoration: none; padding: 0.6rem 0.9rem; background: #fff; font-size: 0.8rem; color: var(--brand-muted); }
.lh-colours--card { padding: 0.5rem 0 0; background: none; }
.lh-colour { display: inline-flex; align-items: center; gap: 0.35rem; }
.lh-colour::before {
  content: ""; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--brand-dark);
}
.lh-colour--schwarz::before { background: #1A1416; }
.lh-colour--braun::before { background: #6B4430; }
/* Second photo (the box) fades in on hover; touch screens keep the model photo. */
.lh-look__hover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
@media (hover: hover) {
  .lh-look a:hover .lh-look__hover { opacity: 1; }
}

/* Stage gate page (src/lib/stage-gate.ts). */
.stage-gate { max-width: 28rem; margin: 15vh auto; padding: 0 var(--brand-gutter); text-align: center; }
.stage-gate h1 { font-family: var(--brand-font-display); font-weight: 500; }

/* Product page in the liorelash.com layout (Mariana 2026-10-21): stars above the
   title, a checklist under the button, "second look −15 %" with one-click add,
   box contents, and the other looks of the same world below. */
.pdp__buybox h1 { font-family: var(--brand-font-display); font-weight: 400; }
.lp-look { margin: -0.4rem 0 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-berry-dark); }
.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.lp-checks li { position: relative; padding-left: 1.4rem; }
.lp-checks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.3em; width: 0.4rem; height: 0.7rem; border: solid var(--brand-berry); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lp-pair { border: 1px solid var(--brand-line); border-radius: var(--brand-radius); padding: 0.9rem 1rem; background: var(--brand-pink-soft); }
.lp-pair h2 { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-berry-dark); font-family: var(--brand-font); font-weight: var(--brand-font-weight-bold); }
.lp-pair__lead { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--brand-muted); }
.lp-pair ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lp-pair__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp-pair__link { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.lp-pair__link img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 0.5rem; background: var(--brand-surface); flex: none; }
.lp-pair__link strong { display: block; font-weight: var(--brand-font-weight-bold); }
.lp-pair__link:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.lp-pair__price { font-size: 0.85rem; color: var(--brand-muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.lp-pair__add { flex: none; white-space: nowrap; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--brand-fg); border-radius: 999px; background: var(--brand-surface); color: var(--brand-fg); font: inherit; font-size: 0.85rem; font-weight: var(--brand-font-weight-bold); cursor: pointer; }
.lp-pair__add:hover { background: var(--brand-fg); color: var(--brand-dark-fg); }
.lp-inbox h2 { margin: 0 0 0.3rem; font-size: 0.95rem; font-family: var(--brand-font); font-weight: var(--brand-font-weight-bold); }
.lp-inbox ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.lp-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.lp-more h2 { font-family: var(--brand-font-display); font-weight: 400; }

/* One-click add under a card (Mariana 2026-10-22): a pill per colour, or one
   "In den Warenkorb"; "Auswählen" leads to the page when a choice is needed. */
.lh-look, .lh-pro__card, .product-card { display: flex; flex-direction: column; }
.lh-look > a, .lh-pro__card > a, .product-card > a { flex: 1 1 auto; }
.lh-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.lh-quick form { margin: 0; flex: 1 1 auto; }
.lh-quick__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--brand-fg); border-radius: 999px; background: var(--brand-fg); color: var(--brand-dark-fg); font: inherit; font-size: 0.85rem; font-weight: var(--brand-font-weight-bold); white-space: nowrap; text-decoration: none; cursor: pointer; }
.lh-quick__btn:hover { background: var(--brand-surface); color: var(--brand-fg); }
.lh-quick__btn--colour { background: var(--brand-surface); color: var(--brand-fg); }
.lh-quick__btn--colour:hover { background: var(--brand-fg); color: var(--brand-dark-fg); }
.lh-quick__btn .lh-colour { gap: 0; }
.cart-added { max-width: var(--brand-page-width); margin: 0.75rem auto 0; padding: 0.7rem var(--brand-gutter); background: var(--brand-pink-soft); border: 1px solid var(--brand-line); border-radius: var(--brand-radius); font-size: 0.9rem; }

/* Upsell after an add and in the cart (Mariana 2026-10-22, ClickFunnels-style). */
.lc-offer { border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: var(--brand-pink-soft); padding: 1rem 1.1rem; margin: 0 0 1.25rem; }
.lc-offer h2 { margin: 0; font-family: var(--brand-font); font-size: 0.85rem; font-weight: var(--brand-font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-berry-dark); }
.lc-offer__note { margin: 0.25rem 0 0.75rem; font-size: 0.8rem; color: var(--brand-muted); }
.lc-offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.lc-offer__item { display: grid; gap: 0.5rem; }
@media (min-width: 48rem) { .lc-offer__list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .added-panel .lc-offer__list { grid-template-columns: 1fr; } .lc-offer__item { align-content: space-between; } }
.lc-offer__item .lh-quick { margin: 0; }
.lc-offer__link { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; min-width: 0; }
.lc-offer__link img { width: 4.5rem; height: 4.5rem; flex: none; object-fit: cover; border-radius: 0.5rem; background: var(--brand-surface); }
.lc-offer__link strong { display: block; }
.lc-offer__link:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.lc-offer__look { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-berry-dark); }
.lc-offer__price { display: block; font-size: 0.85rem; color: var(--brand-muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.added-panel { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--brand-surface); border: 1px solid var(--brand-line); border-radius: var(--brand-radius); box-shadow: 0 18px 50px rgba(26, 20, 22, 0.22); padding: 1rem; }
.added-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.added-panel__title { margin: 0; font-weight: var(--brand-font-weight-bold); color: var(--brand-success); }
.added-panel__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--brand-fg); text-decoration: none; font-size: 1.4rem; line-height: 1; }
.added-panel__close:hover { background: var(--brand-pink-soft); }
.added-panel .lc-offer { margin-bottom: 0.75rem; }
.added-panel__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.added-panel__continue { color: var(--brand-fg); font-size: 0.9rem; }
@media (max-width: 40rem) {
  .added-panel { right: 0; left: 0; bottom: 0; width: 100%; max-height: 80vh; border-radius: var(--brand-radius) var(--brand-radius) 0 0; }
}

/* "Remember my details" under the checkout address (checkout-draft.js). */
.field.checkout__remember { flex-direction: row; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; cursor: pointer; }
.field.checkout__remember input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; flex: none; border-radius: 0.25rem; accent-color: var(--brand-berry-dark); }

/* Street suggestions under the street field (address-suggest.js). */
.field--suggest { position: relative; }
.address-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 0.25rem 0 0; padding: 0.3rem; list-style: none; background: #fff; border: 1px solid #e0d5c7; border-radius: 0.6rem; box-shadow: 0 10px 24px rgba(30, 20, 20, 0.12); }
.address-suggest li { padding: 0.6rem 0.7rem; border-radius: 0.4rem; cursor: pointer; font-size: 0.92rem; }
.address-suggest li:hover, .address-suggest li[aria-selected="true"] { background: var(--brand-pink-soft); }

/* Newsletter band at the top of the footer (−10 % welcome code, double opt-in). */
.newsletter {
  max-width: var(--brand-page-width); margin: 0 auto; padding: 2.25rem 1.25rem 0;
  display: grid; grid-template-columns: 1fr minmax(0, 28rem); gap: 1.25rem 2rem; align-items: center;
}
.newsletter h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.newsletter__text p { margin: 0; }
.newsletter__row { display: flex; gap: 0.5rem; }
.newsletter__row input {
  flex: 1; min-width: 0; padding: 0.75rem 0.9rem; border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius); background: #fff; font: inherit;
}
.newsletter__row .btn { border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.newsletter__consent { margin: 0.5rem 0 0; font-size: 0.8rem; opacity: 0.85; }
.newsletter__consent a { color: inherit; }
.newsletter > * { min-width: 0; }
/* minmax(0, 1fr): a plain 1fr track grows to the form's min-content and pushed the page sideways on phones. */
@media (max-width: 760px) { .newsletter { grid-template-columns: minmax(0, 1fr); } }

/* Welcome code field in the cart summary. */
.cart-code { margin: 0.75rem 0; }
.cart-code__label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.cart-code__row { display: flex; gap: 0.5rem; }
.cart-code__row input {
  flex: 1; min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius); font: inherit; text-transform: uppercase;
}
.cart-code__row input[aria-invalid="true"] { border-color: #b94a40; }
.cart-code__row .btn { border: 0; cursor: pointer; font-family: inherit; padding-block: 0.6rem; }
.cart-code__applied { margin: 0; font-size: 0.9rem; }
.cart-code__error { margin: 0.35rem 0 0; color: #b94a40; font-size: 0.85rem; }

/* Newsletter confirm / unsubscribe pages. */
.newsletter-page { max-width: 36rem; }
.newsletter-page__code {
  display: inline-block; margin: 0.5rem 0 1rem; padding: 0.6rem 1rem; border: 1px dashed var(--brand-fg);
  border-radius: var(--brand-radius); font-size: 1.35rem; letter-spacing: 0.08em; font-weight: 600;
}

/* Loyalty points: cart block and account card. */
.cart-points { margin: 0.75rem 0; font-size: 0.9rem; }
.cart-points p { margin: 0.3rem 0; }
.cart-points .btn { border: 0; cursor: pointer; font-family: inherit; padding-block: 0.6rem; margin-top: 0.25rem; }
.cart-points__earn { color: var(--brand-fg-muted); }
.account-points__balance { font-size: 1.5rem; margin: 0.25rem 0 0.5rem; }
.account-points__history { list-style: none; padding: 0; margin: 0.75rem 0; font-size: 0.9rem; }
.account-points__history li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-top: 1px solid var(--brand-line); }