/* Sweet Kitsune theme stylesheet (theme: flashcocotte).
   Source of truth: design/mockup/tokens.css (approved mockup, 28.09.2026), copied 1:1
   below with asset paths rewritten for assets/css/. Theme-only rules (WordPress admin
   bar, WooCommerce default UI suppression, header/footer extras) follow at the end.
   Keep the two in sync: change tokens.css first, then re-copy. */

/* Sweet Kitsune, direction C "warm editorial". Static design mockup, 28.09.2026.
   Breakpoints (mobile-first):
     base      < 768   phones, 2-column grids, burger menu
     768       768-1199 tablets, 3-column grids
     1200      1200-1439 desktop, 5-column grid, menu in one line
     1440      1440+    full container 1408 (1440 minus 2 x 16)
*/

:root {
  /* Colors */
  --sk-bg: #ffffff;
  --sk-blush: #fbf3f1;          /* horizontal stripes, archive head, verdict box only */
  --sk-accent: #f28a91;         /* top-bar, stripe gradient, hover, active tab only */
  --sk-accent-soft: #ecc8ca;    /* borders, chips, "Preis geprüft" strip */
  --sk-ink: #261313;            /* text, CTA, NEU badge */
  --sk-ink-2: #5f5266;          /* secondary text */
  --sk-muted: #999999;          /* del price, meta */
  --sk-sale: #e32227;           /* ins price only */
  --sk-hot: #e53216;            /* HOT badge */
  --sk-stock: #33d9b2;          /* in-stock dot */
  --sk-overlay: rgba(30, 10, 25, .55);
  --sk-shadow-drop: 0 5px 30px rgba(34, 34, 40, .08); /* dropdowns only */

  /* Mascot files: the only place to swap them (spec: v4 pin-up in badge and empty states).
     The v5 home mascot is an <img> cutout in the hero markup, not a token. */
  --sk-mascot-badge: url("../img/mascot-v4-pinup-badge-light.png");
  --sk-mascot-empty: url("../img/mascot-v5-anime-portrait-cut-640.webp");

  /* Type */
  --sk-font-display: "Fraunces", Georgia, serif;
  --sk-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-fs-10: 10px;
  --sk-fs-12: 12px;
  --sk-fs-14: 14px;
  --sk-fs-16: 16px;
  --sk-fs-18: 18px;
  --sk-fs-22: 22px;
  --sk-fs-24: 24px;
  --sk-fs-28: 28px;
  --sk-fs-34: 34px;
  --sk-fs-40: 40px;
  --sk-lh-body: 1.4;
  --sk-lh-display: 1.2;

  /* Spacing */
  --sk-s-4: 4px;
  --sk-s-6: 6px;
  --sk-s-8: 8px;
  --sk-s-12: 12px;
  --sk-s-16: 16px;
  --sk-s-24: 24px;
  --sk-s-32: 32px;
  --sk-s-48: 48px;
  --sk-s-64: 64px;

  /* Radii: four different values on purpose */
  --sk-r-badge: 4px;
  --sk-r-chip: 6px;   /* chips, selects, thumbs */
  --sk-r-btn: 8px;    /* buttons, cards, strips */
  --sk-r-photo: 12px; /* hero tiles, card image plate, modal */
  --sk-r-plate: 16px; /* product gallery plate */
  --sk-r-search: 22px;/* the only pill on the site */

  /* Layout */
  --sk-container: 1440px;
  --sk-gutter: 16px;
  --sk-section-y: 48px;
}

@media (min-width: 1200px) {
  :root { --sk-section-y: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sk-bg);
  color: var(--sk-ink);
  font: 400 var(--sk-fs-16)/var(--sk-lh-body) var(--sk-font-body);
  letter-spacing: 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { letter-spacing: 0; text-transform: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, select, input { font: inherit; letter-spacing: 0; color: inherit; }
del { color: var(--sk-muted); }
ins { text-decoration: none; }
.sk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sk-body--locked { overflow: hidden; }

.sk-container {
  width: 100%;
  max-width: var(--sk-container);
  margin: 0 auto;
  padding: 0 var(--sk-gutter);
}
.sk-section { padding: var(--sk-section-y) 0; }
.sk-section--tight-top { padding-top: var(--sk-s-24); }
.sk-section--flush-bottom { padding-bottom: 0; }

.sk-display {
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--sk-lh-display);
}
.sk-display em { font-style: italic; }

.sk-section__head {
  display: flex;
  flex-wrap: wrap; /* phones: the "Alle ..." link and carousel buttons drop under a long title */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sk-s-16);
  margin-bottom: var(--sk-s-24);
}
.sk-section__title {
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-fs-28);
  line-height: var(--sk-lh-display);
}
@media (min-width: 1440px) {
  .sk-section__title { font-size: var(--sk-fs-40); }
}
.sk-link-more {
  font-size: var(--sk-fs-14);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sk-accent-soft);
}
.sk-link-more:hover { text-decoration-color: var(--sk-accent); color: var(--sk-ink); }

/* ---------- Mascot: one class, two places (badge "Kitsune Tipp", empty state).
   The file of each place is a --sk-mascot-* token in :root. ---------- */
.sk-mascot {
  display: inline-block;
  flex: none;
  background: var(--sk-mascot-url) center / contain no-repeat;
  vertical-align: middle;
}
.sk-mascot--badge { --sk-mascot-url: var(--sk-mascot-badge); width: 14px; height: 14px; }
.sk-mascot--empty {
  --sk-mascot-url: var(--sk-mascot-empty);
  width: 110px;
  height: 110px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-photo);
  background-color: var(--sk-blush);
}

/* ---------- Flags (inline SVG, 16 x 10): dropdown, footer ---------- */
.sk-flag {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 10px;
  outline: 1px solid var(--sk-accent-soft);
  outline-offset: 0;
  border-radius: 1px;
  vertical-align: -1px;
}
/* EN: neutral globe instead of a country flag (stroke = currentColor). */
.sk-flag--globe {
  width: 12px;
  height: 12px;
  outline: 0;
  border-radius: 0;
  color: var(--sk-ink-2);
}

/* ---------- Top-bar ---------- */
.sk-topbar {
  background: var(--sk-accent);
  color: var(--sk-ink); /* brief says white; white on #f28a91 = 2.4:1 (fails WCAG AA), #261313 = 7.4:1. Deviation recorded in spec P4. */
  font-size: var(--sk-fs-12);
  font-weight: 500;
}
.sk-topbar__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sk-s-32);
  height: 32px;
  padding: 0;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
}
.sk-topbar__list li:nth-child(n+2) { display: none; }
@media (min-width: 768px) {
  .sk-topbar__list li:nth-child(n+2) { display: block; }
}

/* ---------- Header (sticky: logo row + menu) ---------- */
.sk-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sk-bg);
  border-bottom: 1px solid var(--sk-accent-soft);
}
.sk-head__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sk-s-12);
  min-height: 64px;
}
.sk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-s-8);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-24);
  font-weight: 400;
  color: var(--sk-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sk-wordmark__mark {
  display: block;
  height: 34px;
  width: auto;
}
.sk-wordmark__text {
  line-height: 1;
}
@media (min-width: 768px) {
  .sk-wordmark__mark { height: 44px; }
}
.sk-search {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: var(--sk-s-12);
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-search);
  background: var(--sk-bg);
  padding: 0 6px 0 18px;
}
.sk-search:focus-within { border-color: var(--sk-accent); }
.sk-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--sk-fs-14);
  outline: none;
}
.sk-search input::placeholder { color: var(--sk-muted); }
.sk-search button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sk-lang {
  position: relative;
  font-size: var(--sk-fs-14);
  font-weight: 500;
}
.sk-lang summary {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 var(--sk-s-8) 0 10px;
  background: var(--sk-blush);
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  color: var(--sk-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sk-lang summary::-webkit-details-marker { display: none; }
.sk-lang summary svg:first-child { flex: none; color: var(--sk-ink-2); }
.sk-lang__caret { flex: none; margin-left: 2px; color: var(--sk-ink-2); transition: transform .15s ease; }
.sk-lang[open] .sk-lang__caret { transform: rotate(180deg); }
.sk-lang[open] summary { border-color: var(--sk-accent); }
.sk-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-btn);
  box-shadow: var(--sk-shadow-drop);
}
.sk-lang__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--sk-r-chip);
  text-decoration: none;
  color: var(--sk-ink-2);
  font-weight: 500;
}
.sk-lang__menu a b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  border-radius: var(--sk-r-badge);
  background: var(--sk-blush);
  color: var(--sk-ink-2);
  font-size: var(--sk-fs-12);
  font-weight: 700;
}
.sk-lang__menu a[aria-current="true"] { color: var(--sk-ink); }
.sk-lang__menu a[aria-current="true"] b { background: var(--sk-ink); color: #fff; }
.sk-lang__menu a:hover { background: var(--sk-accent-soft); color: var(--sk-ink); }
.sk-foot__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-s-12);
  padding-bottom: var(--sk-s-24, 24px);
  margin-bottom: var(--sk-s-24, 24px);
  border-bottom: 1px solid var(--sk-blush);
}
.sk-foot__brand .sk-wordmark__mark { height: 28px; }
.sk-foot__lang {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sk-fs-14);
}
.sk-foot__lang li { display: inline-flex; align-items: center; gap: var(--sk-s-8); }
.sk-foot__lang li:not(:last-child)::after { content: "·"; margin: 0 var(--sk-s-8); color: var(--sk-muted); }
.sk-foot__lang a {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-s-6);
  color: var(--sk-ink-2);
  text-decoration: none;
}
.sk-foot__lang a[aria-current="true"] { color: var(--sk-ink); font-weight: 700; }
.sk-foot__lang a:hover { color: var(--sk-accent); }

.sk-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.sk-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.sk-nav { display: none; border-top: 1px solid var(--sk-blush); }
.sk-nav-toggle:checked ~ .sk-nav { display: block; }
.sk-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--sk-s-8) 0;
  list-style: none;
}
.sk-nav__list a {
  display: block;
  padding: 12px 14px;
  font-size: var(--sk-fs-14);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sk-nav__list a:hover { color: var(--sk-accent); }
.sk-nav__lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 14px; font-size: var(--sk-fs-14); font-weight: 500; color: var(--sk-ink-2); }
.sk-nav__list .sk-nav__lang a { display: inline; padding: 0; border: 0; color: var(--sk-ink-2); }
.sk-nav__list .sk-nav__lang a[aria-current="true"] { color: var(--sk-ink); font-weight: 700; }
.sk-nav__list a[aria-current="page"] { border-bottom-color: var(--sk-accent); }

@media (min-width: 768px) {
  .sk-head__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 80px;
    gap: var(--sk-s-24);
  }
  .sk-search { grid-column: 2; grid-row: 1; margin: 0; width: 100%; max-width: 560px; justify-self: center; }
  .sk-burger { display: none; }
  .sk-nav__lang { display: none; }
  .sk-nav { display: block; }
  .sk-nav__list {
    flex-direction: row;
    flex-wrap: wrap; /* 768-1199: two 44 px rows, nothing hidden behind a scroll */
    padding: 0;
  }
  .sk-nav__list li { flex: none; }
  .sk-nav__list a { padding: 12px 14px; line-height: 18px; }
}
@media (min-width: 1200px) {
  .sk-nav__list { flex-wrap: nowrap; justify-content: space-between; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  /* One row in a 1168 px container: FR labels need the tighter side padding. */
  .sk-nav__list a { padding: 12px 10px; }
}

/* ---------- Breadcrumbs ---------- */
.sk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-s-6);
  padding: var(--sk-s-16) 0 0;
  font-size: var(--sk-fs-12);
  color: var(--sk-ink-2);
  list-style: none;
}
.sk-crumbs li + li::before { content: "/"; margin-right: var(--sk-s-6); color: var(--sk-muted); }
.sk-crumbs a { text-decoration: none; }
.sk-crumbs a:hover { color: var(--sk-accent); }

/* ---------- Buttons ---------- */
.sk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-s-6);
  width: 100%;
  min-height: 44px;
  padding: 2px 12px;
  border: 0;
  border-radius: var(--sk-r-btn);
  background: var(--sk-ink);
  color: #ffffff;
  font-size: var(--sk-fs-16);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sk-cta:hover { background: var(--sk-accent); color: var(--sk-ink); }
.sk-cta:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
.sk-cta__long { display: none; }
@media (min-width: 768px) {
  .sk-cta__long { display: inline; }
  .sk-cta__short { display: none; }
}
.sk-cta--lg { min-height: 56px; padding: 2px 24px; font-size: var(--sk-fs-18); }
.sk-cta svg { flex: none; }
.sk-ad-label {
  display: block;
  margin-top: var(--sk-s-4);
  font-size: var(--sk-fs-12);
  color: var(--sk-ink-2);
  text-align: right;
}

/* ---------- Badges ---------- */
.sk-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-s-6);
  z-index: 2;
}
.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 5px 10px;
  border-radius: var(--sk-r-badge);
  font-size: var(--sk-fs-10);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.sk-badge--new { background: var(--sk-ink); color: #ffffff; }
.sk-badge--hot { background: var(--sk-hot); color: #ffffff; }
.sk-badge--save { background: var(--sk-blush); color: var(--sk-ink); text-transform: none; }
.sk-badge--tip { background: var(--sk-ink); color: #ffffff; }

/* ---------- Product card ---------- */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-s-16);
}
@media (min-width: 768px) { .sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sk-s-8);
  padding: 0 0 var(--sk-s-8);
  background: var(--sk-bg);
}
.sk-card__plate {
  position: relative;
  border-radius: var(--sk-r-photo);
  background: var(--sk-blush);
  overflow: hidden;
}
.sk-card .sk-badges { top: 8px; left: 8px; }
.sk-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}
.sk-card__media img {
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  mix-blend-mode: multiply; /* the white packshot background takes the plate colour */
  transition: opacity .4s;
}
.sk-card__img2 { opacity: 0; }
@media (hover: hover) {
  .sk-card--swap:hover .sk-card__img2 { opacity: 1; }
  .sk-card--swap:hover .sk-card__img1 { opacity: 0; }
  .sk-card:hover .sk-cta { background: var(--sk-accent); color: var(--sk-ink); }
}
.sk-card__brand {
  margin-top: var(--sk-s-4);
  font-size: var(--sk-fs-12);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sk-ink-2);
  text-transform: uppercase; /* the only uppercase outside badges */
}
.sk-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  font-size: var(--sk-fs-16);
  font-weight: 500;
  line-height: 1.3;
}
.sk-card__title a { text-decoration: none; }
.sk-card__title a:hover { color: var(--sk-ink-2); }
.sk-card__line {
  font-size: var(--sk-fs-14);
  font-weight: 300;
  color: var(--sk-ink-2);
}
.sk-card__facts {
  display: flex;
  margin-top: auto; /* facts, score, price, merchant and CTA line up across a row */
  flex-wrap: wrap;
  gap: var(--sk-s-4) var(--sk-s-12);
  padding: 0;
  list-style: none;
  font-size: var(--sk-fs-12);
  color: var(--sk-ink-2);
}
.sk-card__facts li { display: inline-flex; align-items: center; gap: var(--sk-s-4); white-space: nowrap; }
.sk-card__facts svg { flex: none; color: var(--sk-ink); }
.sk-card__score {
  display: flex;
  align-items: center;
  gap: var(--sk-s-8);
  font-size: var(--sk-fs-12);
  color: var(--sk-ink-2);
}
.sk-ring { display: block; flex: none; }
.sk-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-s-8);
  font-size: var(--sk-fs-18);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sk-ink);
}
.sk-price del { font-size: var(--sk-fs-14); font-weight: 400; }
.sk-price ins { color: var(--sk-sale); }
.sk-mchip {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-s-6);
  max-width: 100%;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  font-size: var(--sk-fs-14);
  color: var(--sk-ink);
}
.sk-mchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-mchip__logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sk-accent-soft);
  color: var(--sk-ink);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.sk-card__buy { margin-top: var(--sk-s-4); }
.sk-card .sk-ad-label { font-size: var(--sk-fs-10); }
@media (min-width: 768px) {
  .sk-card__title { font-size: var(--sk-fs-18); }
  .sk-card { padding-bottom: var(--sk-s-12); }
}

/* ---------- Home: intro (text column + mascot) + hero tiles ----------
   Owner feedback 28.09.2026 03:10: the text column fills the mascot's height,
   aligned to the top, so no empty band sits above the H1.
   Phones: one column, mascot (180) under the button row.
   768+: text column + mascot column (220 / 300 / 340). The last text row is 1fr,
   so the text column is exactly as tall as the mascot (min-height = mascot height)
   and every text row keeps its own height from the top. */
.sk-home-intro { padding: var(--sk-s-24) 0 0; }
.sk-home-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title" "lead" "actions" "mascot" "facts" "note";
  align-items: start;
}
.sk-home-intro__eyebrow {
  grid-area: eyebrow;
  font-size: var(--sk-fs-12);
  font-weight: 500;
  line-height: 1.4;
  color: var(--sk-muted);
}
.sk-home-intro__title {
  grid-area: title;
  margin-top: var(--sk-s-8);
  font-size: var(--sk-fs-28);
  line-height: 1.15;
}
.sk-home-intro__title em { display: block; }
.sk-home-intro__lead {
  grid-area: lead;
  margin-top: var(--sk-s-12);
  font-size: var(--sk-fs-18);
  font-weight: 300;
  line-height: 1.5;
  color: var(--sk-ink-2);
}
.sk-home-intro__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-s-12);
  margin-top: var(--sk-s-24);
}
.sk-home-btn {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 2px 24px;
  border: 1px solid var(--sk-ink);
  border-radius: var(--sk-r-btn);
  background: var(--sk-ink);
  color: #ffffff;
  font-size: var(--sk-fs-16);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.sk-home-btn:hover { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-ink); }
.sk-home-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
.sk-home-btn--outline { background: transparent; color: var(--sk-ink); }
.sk-home-btn--outline:hover { background: var(--sk-blush); border-color: var(--sk-accent); color: var(--sk-ink); }
.sk-home-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-s-8);
  margin-top: var(--sk-s-24);
  padding: 0;
  list-style: none;
}
.sk-home-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-s-6);
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  background: var(--sk-bg);
  font-size: var(--sk-fs-14);
  font-weight: 500;
  color: var(--sk-ink);
  white-space: nowrap;
}
.sk-home-fact svg { flex: none; color: var(--sk-ink-2); }
.sk-home-intro__note {
  grid-area: note;
  margin-top: var(--sk-s-16);
  margin-bottom: var(--sk-s-24); /* air above the hero tiles */
  padding-top: var(--sk-s-12);
  border-top: 1px solid var(--sk-accent-soft);
  font-size: var(--sk-fs-14);
  font-weight: 300;
  line-height: 1.4;
  color: var(--sk-ink-2);
}
.sk-home-mascot {
  grid-area: mascot;
  justify-self: center;
  position: relative;
  z-index: 0;
  width: 180px;
  margin: var(--sk-s-24) 0 0;
}
.sk-home-mascot__ground {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: auto;
}
.sk-home-mascot picture, .sk-home-mascot__img { display: block; width: 100%; height: auto; }
.sk-home-hero { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .sk-home-intro__row {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas:
      "eyebrow mascot"
      "title   mascot"
      "lead    mascot"
      "actions mascot"
      "facts   mascot"
      "note    mascot"
      ".       mascot";
    grid-template-rows: repeat(6, auto) 1fr;
    column-gap: 40px;
  }
  .sk-home-intro__eyebrow { padding-top: var(--sk-s-8); }
  .sk-home-intro__title { font-size: var(--sk-fs-34); }
  .sk-home-btn { flex: none; }
  .sk-home-mascot {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    margin: 0 0 -12px; /* the feet stand behind the top of the tiles */
  }
}
@media (min-width: 1200px) {
  .sk-home-intro__row { grid-template-columns: minmax(0, 1fr) 300px; }
  .sk-home-intro__title { font-size: var(--sk-fs-40); }
}
@media (min-width: 1440px) {
  .sk-home-intro__row { grid-template-columns: minmax(0, 1fr) 340px; }
  .sk-home-intro__title { font-size: 44px; }
}

.sk-hero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--sk-s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
@media (min-width: 768px) {
  .sk-hero { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
.sk-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sk-r-photo);
  overflow: hidden;
  scroll-snap-align: start;
  color: #ffffff;
}
.sk-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.sk-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sk-overlay);
}
.sk-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-s-16);
  padding: var(--sk-s-24);
}
.sk-tile__title {
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-fs-34);
  line-height: 1.1;
}
.sk-tile__title em { font-style: italic; }
.sk-tile__btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--sk-r-btn);
  background: #ffffff;
  color: var(--sk-ink);
  font-size: var(--sk-fs-16);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
}
.sk-tile__btn:hover { background: var(--sk-accent); }
@media (min-width: 1440px) { .sk-tile__title { font-size: var(--sk-fs-40); } }

/* ---------- USP boxes ---------- */
.sk-usp {
  display: grid;
  gap: var(--sk-s-16);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sk-usp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sk-usp li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px var(--sk-s-12);
  padding: var(--sk-s-16) var(--sk-s-24) var(--sk-s-16) var(--sk-s-16);
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-btn);
}
.sk-usp svg { grid-row: span 2; margin-top: 2px; }
.sk-usp b { font-size: var(--sk-fs-16); font-weight: 500; }
.sk-usp span { font-size: var(--sk-fs-14); color: var(--sk-ink-2); }

/* ---------- Hot categories ---------- */
.sk-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-s-16);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-s-16) var(--sk-s-24); } }
@media (min-width: 1200px) { .sk-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sk-cat { display: block; text-decoration: none; }
.sk-cat__img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--sk-r-photo);
  background: linear-gradient(180deg, var(--sk-accent) 0%, var(--sk-accent-soft) 100%);
  overflow: hidden;
}
.sk-cat__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-cat__name { display: block; margin-top: var(--sk-s-12); font-size: var(--sk-fs-16); font-weight: 500; }
.sk-cat__count { display: block; font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-cat:hover .sk-cat__name { color: var(--sk-accent); }

/* ---------- Category stripe (blush + accent gradient edge) ---------- */
.sk-stripe {
  position: relative;
  background: var(--sk-blush);
  overflow: hidden;
}
.sk-stripe::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sk-accent) 0%, var(--sk-accent-soft) 100%);
}
.sk-stripe__inner {
  display: grid;
  gap: var(--sk-s-16);
  padding-top: var(--sk-s-32);
  padding-bottom: var(--sk-s-32);
}
@media (min-width: 1200px) {
  .sk-stripe__inner { grid-template-columns: 5fr 7fr; align-items: center; padding-top: var(--sk-s-48); padding-bottom: var(--sk-s-48); }
}
.sk-stripe__title { font-size: var(--sk-fs-28); }
@media (min-width: 1440px) { .sk-stripe__title { font-size: var(--sk-fs-40); } }
.sk-stripe__text { font-size: var(--sk-fs-16); color: var(--sk-ink-2); max-width: 560px; margin-top: var(--sk-s-8); }
.sk-stripe__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-s-8);
  padding: 0;
  list-style: none;
}
.sk-stripe__links a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  background: var(--sk-bg);
  font-size: var(--sk-fs-14);
  font-weight: 500;
  text-decoration: none;
}
.sk-stripe__links a:hover { border-color: var(--sk-accent); }
.sk-stripe__links small { margin-left: 6px; color: var(--sk-muted); font-size: var(--sk-fs-12); }

/* ---------- Blog ---------- */
.sk-blog {
  display: grid;
  gap: var(--sk-s-24);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sk-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sk-blog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sk-post { display: flex; flex-direction: column; gap: var(--sk-s-8); }
.sk-post__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--sk-r-btn);
  background: var(--sk-blush);
}
.sk-post__title { font-size: var(--sk-fs-18); font-weight: 500; line-height: 1.3; }
.sk-post__title a { text-decoration: none; }
.sk-post__title a:hover { color: var(--sk-accent); }
.sk-post__meta { font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-post__text { font-size: var(--sk-fs-14); font-weight: 300; color: var(--sk-ink-2); }

/* ---------- SEO text (collapsed) ---------- */
.sk-seo { max-width: 880px; }
.sk-seo h2 { font-family: var(--sk-font-display); font-weight: 400; font-size: var(--sk-fs-24); line-height: var(--sk-lh-display); margin: var(--sk-s-24) 0 var(--sk-s-12); color: var(--sk-ink); }
.sk-seo h2:first-child { margin-top: 0; }
.sk-seo h3 { font-size: var(--sk-fs-18); font-weight: 500; margin: var(--sk-s-16) 0 var(--sk-s-8); }
.sk-seo p, .sk-seo li { font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-seo p + p { margin-top: var(--sk-s-12); }
.sk-seo ul { margin: var(--sk-s-12) 0; padding-left: 20px; }
.sk-seo li + li { margin-top: var(--sk-s-6); }
.sk-more > summary {
  display: inline-block;
  margin-top: var(--sk-s-12);
  font-size: var(--sk-fs-14);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sk-accent-soft);
  cursor: pointer;
  list-style: none;
}
.sk-more > summary::-webkit-details-marker { display: none; }
.sk-more > summary:hover { text-decoration-color: var(--sk-accent); }
.sk-more[open] > summary { display: none; }

/* ---------- Category page ---------- */
.sk-archive-head { background: var(--sk-blush); padding-bottom: var(--sk-s-32); }
.sk-archive-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sk-s-12); margin-top: var(--sk-s-16); }
.sk-archive-head h1 { font-size: var(--sk-fs-34); }
@media (min-width: 1200px) { .sk-archive-head h1 { font-size: var(--sk-fs-40); } }
.sk-archive-head__count { font-size: var(--sk-fs-14); color: var(--sk-ink-2); }
.sk-archive-head__intro { max-width: 880px; margin-top: var(--sk-s-12); }
.sk-archive-head__intro p { font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-archive-head__intro p + p { margin-top: var(--sk-s-8); }

.sk-chips {
  display: flex;
  gap: var(--sk-s-12);
  margin-top: var(--sk-s-24);
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-chips li { flex: none; }
@media (min-width: 768px) { .sk-chips { flex-wrap: wrap; overflow: visible; } }
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-s-8);
  height: 40px;
  padding: 2px 12px 2px 8px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  background: var(--sk-bg);
  font-size: var(--sk-fs-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sk-chip img { width: 28px; height: 28px; object-fit: contain; }
.sk-chip small { font-size: var(--sk-fs-12); color: var(--sk-muted); font-weight: 400; }
.sk-chip:hover { border-color: var(--sk-accent); }

.sk-facets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-s-8) var(--sk-s-16);
  margin: var(--sk-s-24) 0 var(--sk-s-12);
}
@media (min-width: 768px) { .sk-facets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sk-facets { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sk-facet { display: flex; flex-direction: column; gap: 4px; }
.sk-facet span { font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-facet select {
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  background: var(--sk-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23261313' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: var(--sk-fs-14);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.sk-facet select:hover { border-color: var(--sk-accent); }
.sk-facet--sort select { font-weight: 500; }

.sk-disclosure {
  margin-bottom: var(--sk-s-16);
  font-size: var(--sk-fs-12);
  color: var(--sk-ink-2);
}
.sk-disclosure a { color: var(--sk-ink); }
.sk-disclosure a:hover { color: var(--sk-accent); }

.sk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sk-s-8);
  margin-top: var(--sk-s-32);
  padding: 0;
  list-style: none;
  font-size: var(--sk-fs-14);
}
.sk-pagination a, .sk-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-chip);
  text-decoration: none;
}
.sk-pagination [aria-current="page"] { background: var(--sk-ink); border-color: var(--sk-ink); color: #ffffff; }
.sk-pagination a:hover { border-color: var(--sk-accent); }
.sk-pagination .sk-pagination__info { border: 0; color: var(--sk-ink-2); font-size: var(--sk-fs-12); }

.sk-howto {
  max-width: 880px;
  margin-top: var(--sk-s-32);
  padding: var(--sk-s-16) var(--sk-s-24);
  border-left: 3px solid var(--sk-accent-soft);
  font-size: var(--sk-fs-14);
  color: var(--sk-ink-2);
}
.sk-howto h3 { font-size: var(--sk-fs-16); font-weight: 500; color: var(--sk-ink); margin-bottom: var(--sk-s-4); }

/* ---------- Product page ---------- */
.sk-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sk-s-24);
  padding-top: var(--sk-s-16);
}
@media (min-width: 768px) {
  .sk-product { grid-template-columns: minmax(0, 634fr) minmax(0, 694fr); gap: var(--sk-s-24); align-items: start; }
}
.sk-gallery { display: flex; flex-direction: column; gap: var(--sk-s-12); }
.sk-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--sk-r-plate);
  background: var(--sk-blush);
  overflow: hidden;
  cursor: zoom-in;
}
.sk-gallery__main img {
  width: 100%;
  height: 100%;
  padding: var(--sk-s-24);
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .35s ease;
  transform-origin: 50% 50%;
}
@media (hover: hover) {
  .sk-gallery__main:hover img { transform: scale(1.6); } /* zoom inside the plate, not a card hover */
}
.sk-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--sk-r-badge);
  background: var(--sk-bg);
  font-size: var(--sk-fs-12);
  font-weight: 500;
}
.sk-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 86px)); gap: var(--sk-s-12); padding: 0; list-style: none; }
.sk-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 86px;
  padding: 0;
  border: 1px solid var(--sk-blush);
  border-radius: var(--sk-r-chip);
  background: var(--sk-blush);
  overflow: hidden;
  cursor: pointer;
}
.sk-thumb img { width: 100%; height: 100%; padding: 6px; object-fit: contain; mix-blend-mode: multiply; }
.sk-thumb[aria-current="true"] { border-color: var(--sk-accent-soft); border-width: 2px; }
.sk-thumb:hover { border-color: var(--sk-accent); }

.sk-buy {
  padding: var(--sk-s-16);
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-photo);
  background: var(--sk-bg);
}
@media (min-width: 768px) { .sk-buy { position: sticky; top: 186px; padding: var(--sk-s-24); } } /* header: logo row 80 + up to two menu rows 88 */
@media (min-width: 1200px) { .sk-buy { top: 132px; } }                                           /* header 124 + 8 */
.sk-buy__brand { font-size: var(--sk-fs-12); font-weight: 500; color: var(--sk-ink-2); }
.sk-buy h1 { margin-top: var(--sk-s-4); font-size: var(--sk-fs-28); }
@media (min-width: 1200px) { .sk-buy h1 { font-size: 30px; } }
.sk-buy__sub { margin-top: var(--sk-s-8); font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-buy__rating {
  display: flex;
  align-items: center;
  gap: var(--sk-s-12);
  margin-top: var(--sk-s-16);
  padding-top: var(--sk-s-16);
  border-top: 1px solid var(--sk-blush);
}
.sk-buy__rating-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-buy__rating-text a { font-size: var(--sk-fs-14); font-weight: 500; color: var(--sk-ink); text-underline-offset: 3px; text-decoration-color: var(--sk-accent-soft); }
.sk-buy__rating-text a:hover { text-decoration-color: var(--sk-accent); }
.sk-buy__price { display: flex; flex-direction: column; gap: var(--sk-s-4); margin-top: var(--sk-s-16); }
.sk-buy__amount { font-size: var(--sk-fs-28); font-weight: 600; line-height: 1.2; }
.sk-buy__tax { font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-buy__merchant { display: flex; align-items: center; gap: var(--sk-s-8); margin-top: var(--sk-s-12); }
.sk-stock { display: inline-flex; align-items: center; gap: var(--sk-s-6); font-size: var(--sk-fs-14); }
.sk-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-stock); }
.sk-buy__cta { margin-top: var(--sk-s-16); }
.sk-checked {
  margin-top: var(--sk-s-12);
  padding: 6px 12px;
  border-radius: var(--sk-r-btn);
  background: var(--sk-accent-soft);
  font-size: var(--sk-fs-12);
}
.sk-trust {
  display: grid;
  gap: 10px;
  margin-top: var(--sk-s-16);
  padding: var(--sk-s-16) 0 0;
  border-top: 1px solid var(--sk-blush);
  list-style: none;
  font-size: var(--sk-fs-14);
  color: var(--sk-ink-2);
}
.sk-trust li { display: flex; align-items: flex-start; gap: 10px; }
.sk-trust svg { flex: none; width: 20px; height: 20px; }

/* quick facts strip */
.sk-qfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-s-12);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .sk-qfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sk-s-16); } }
.sk-qfacts li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--sk-s-12);
  align-items: center;
  padding: var(--sk-s-16);
  border-radius: var(--sk-r-btn);
  background: var(--sk-blush);
}
.sk-qfacts svg { grid-row: span 2; }
.sk-qfacts span { font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-qfacts b { font-size: var(--sk-fs-16); font-weight: 500; line-height: 1.3; }

/* tabs on 768+, accordion on phones: one set of <details>, the bar only drives them */
.sk-tabs { border-top: 1px solid var(--sk-accent-soft); }
.sk-tabs__bar { display: none; }
.sk-tabs__panel { border-bottom: 1px solid var(--sk-accent-soft); }
.sk-tabs__panel > summary {
  display: flex;
  align-items: center;
  gap: var(--sk-s-8);
  padding: var(--sk-s-16) 0;
  font-size: var(--sk-fs-16);
  font-weight: 500;
  text-transform: uppercase; /* accordion headings: allowed by the brief */
  cursor: pointer;
  list-style: none;
}
.sk-tabs__panel > summary::-webkit-details-marker { display: none; }
.sk-tabs__panel > summary span { flex: 1; }
.sk-tabs__panel > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--sk-ink);
  border-bottom: 1.5px solid var(--sk-ink);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}
.sk-tabs__panel[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.sk-tabs__panel > summary:hover { color: var(--sk-accent); }
.sk-tabs__body { padding: 0 0 var(--sk-s-24); font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-tabs__body--text { max-width: 880px; }
.sk-tabs__body--text p + p { margin-top: var(--sk-s-12); }
@media (min-width: 768px) {
  .sk-tabs { border-top: 0; }
  .sk-tabs__bar {
    display: flex;
    gap: var(--sk-s-4);
    margin-bottom: var(--sk-s-24);
    border-bottom: 1px solid var(--sk-accent-soft);
  }
  .sk-tabs__bar button {
    display: inline-flex;
    align-items: center;
    gap: var(--sk-s-8);
    height: 48px;
    margin-bottom: -1px;
    padding: 0 var(--sk-s-16);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: var(--sk-fs-16);
    font-weight: 500;
    color: var(--sk-ink-2);
    cursor: pointer;
  }
  .sk-tabs__bar button[aria-selected="true"] { color: var(--sk-ink); border-bottom-color: var(--sk-accent); }
  .sk-tabs__bar button:hover { color: var(--sk-ink); }
  .sk-tabs__panel { border-bottom: 0; }
  .sk-tabs__panel > summary { display: none; }
  .sk-tabs__body { padding: 0; }
}

/* Eigenschaften: two-column definition list */
.sk-props { max-width: 880px; margin: 0; border: 1px solid var(--sk-blush); border-radius: var(--sk-r-btn); overflow: hidden; }
.sk-props div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--sk-s-16);
  padding: 10px var(--sk-s-16);
}
.sk-props div:nth-child(odd) { background: var(--sk-blush); }
.sk-props dt { font-weight: 500; color: var(--sk-ink); }
.sk-props dd { margin: 0; color: var(--sk-ink-2); }

/* Unsere Einschätzung */
.sk-verdict { color: var(--sk-ink); }
.sk-verdict__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-s-8) var(--sk-s-16); }
.sk-verdict__score { font-size: var(--sk-fs-22); font-weight: 500; }
.sk-verdict__score small { font-size: var(--sk-fs-14); font-weight: 400; color: var(--sk-ink-2); }
.sk-stars { display: flex; gap: 2px; }
.sk-stars svg { flex: none; }
.sk-verdict__text { max-width: 880px; margin-top: var(--sk-s-16); font-size: var(--sk-fs-16); }
.sk-pc { display: grid; gap: var(--sk-s-16); margin-top: var(--sk-s-24); }
@media (min-width: 768px) { .sk-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sk-pc__card { padding: var(--sk-s-16) var(--sk-s-24) var(--sk-s-24); border: 1px solid var(--sk-accent-soft); border-radius: var(--sk-r-photo); }
.sk-pc__card h3 { margin-bottom: var(--sk-s-12); font-size: var(--sk-fs-16); font-weight: 500; }
.sk-pc__card ul { display: grid; gap: var(--sk-s-8); padding: 0; list-style: none; }
.sk-pc__card li { display: flex; align-items: baseline; gap: 10px; font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-pc__card li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-stock); transform: translateY(-1px); }
.sk-pc__card--con li::before { background: var(--sk-sale); }

/* FAQ with Fraunces numerals */
.sk-faq { max-width: 880px; padding: 0; list-style: none; counter-reset: sk-faq; }
.sk-faq li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--sk-s-16);
  padding: var(--sk-s-16) 0;
  border-bottom: 1px solid var(--sk-blush);
  counter-increment: sk-faq;
}
.sk-faq li:first-child { padding-top: 0; }
.sk-faq li:last-child { border-bottom: 0; }
.sk-faq li::before {
  content: counter(sk-faq, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-28);
  line-height: 1;
  color: var(--sk-ink);
}
.sk-faq h3 { font-size: var(--sk-fs-16); font-weight: 500; color: var(--sk-ink); }
.sk-faq p { margin-top: var(--sk-s-4); font-size: var(--sk-fs-16); }

/* author box */
.sk-authorbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sk-s-16);
  max-width: 880px;
  padding: var(--sk-s-16) var(--sk-s-24);
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-photo);
}
.sk-authorbox__img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--sk-blush); }
.sk-authorbox__name { font-size: var(--sk-fs-16); font-weight: 500; }
.sk-authorbox__name a { text-decoration: none; }
.sk-authorbox__name a:hover { color: var(--sk-accent); }
.sk-authorbox__role { font-size: var(--sk-fs-12); color: var(--sk-ink-2); }
.sk-authorbox__text { margin-top: var(--sk-s-8); font-size: var(--sk-fs-14); color: var(--sk-ink-2); }
.sk-authorbox__text a { color: var(--sk-ink); text-underline-offset: 3px; text-decoration-color: var(--sk-accent-soft); }

/* related carousel */
.sk-rail-nav { display: flex; align-items: center; gap: var(--sk-s-8); }
.sk-rail-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--sk-accent-soft);
  border-radius: var(--sk-r-btn);
  background: var(--sk-bg);
  color: var(--sk-ink);
  cursor: pointer;
}
.sk-rail-btn:hover { border-color: var(--sk-accent); }
.sk-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 2);
  gap: var(--sk-s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sk-rail::-webkit-scrollbar { display: none; }
.sk-rail > * { scroll-snap-align: start; }
@media (min-width: 768px) { .sk-rail { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (min-width: 1200px) {
  .sk-rail { grid-auto-columns: calc((100% - 64px) / 5); }
  .sk-rail-btn { display: none; } /* all 5 cards visible */
}

.sk-qa__empty {
  display: flex;
  align-items: center;
  gap: var(--sk-s-24);
  padding: var(--sk-s-24);
  border: 1px dashed var(--sk-accent-soft);
  border-radius: var(--sk-r-btn);
}
.sk-qa__empty p { font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-qa__empty b { display: block; color: var(--sk-ink); font-weight: 500; margin-bottom: 4px; }

/* ---------- Footer (white) ---------- */
.sk-foot {
  margin-top: var(--sk-s-48);
  border-top: 1px solid var(--sk-accent-soft);
  padding: var(--sk-s-48) 0 var(--sk-s-32);
  font-size: var(--sk-fs-14);
  color: var(--sk-ink-2);
}
.sk-foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-s-32) var(--sk-s-24);
}
@media (min-width: 1200px) { .sk-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } }
.sk-foot__cols h2 { font-family: var(--sk-font-body); font-size: var(--sk-fs-16); font-weight: 500; color: var(--sk-ink); margin-bottom: var(--sk-s-12); }
.sk-foot__cols ul { padding: 0; list-style: none; }
.sk-foot__cols li + li { margin-top: var(--sk-s-8); }
.sk-foot a { text-decoration: none; }
.sk-foot a:hover { color: var(--sk-accent); }
.sk-foot__contact { grid-column: 1 / -1; }
@media (min-width: 1200px) { .sk-foot__contact { grid-column: auto; } }
.sk-foot__contact address { font-style: normal; line-height: 1.6; }
.sk-foot__contact p { margin-top: var(--sk-s-12); font-size: var(--sk-fs-12); }
.sk-foot__merchants {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-s-12) var(--sk-s-32);
  margin-top: var(--sk-s-32);
  padding: var(--sk-s-24) 0;
  border-top: 1px solid var(--sk-blush);
  border-bottom: 1px solid var(--sk-blush);
}
.sk-foot__merchants span:first-child { font-size: var(--sk-fs-12); width: 100%; }
@media (min-width: 1200px) { .sk-foot__merchants span:first-child { width: auto; } }
.sk-foot__merchant-list { display: flex; flex-wrap: wrap; gap: var(--sk-s-12) var(--sk-s-32); margin: 0; padding: 0; list-style: none; }
.sk-merchant { font-size: var(--sk-fs-16); font-weight: 700; color: var(--sk-ink); }
.sk-foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sk-s-8) var(--sk-s-24);
  margin-top: var(--sk-s-16);
  font-size: var(--sk-fs-12);
}
.sk-foot__legal b { color: var(--sk-ink); font-weight: 500; }

/* ---------- Cookie bar ---------- */
.sk-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--sk-bg);
  border-top: 1px solid var(--sk-accent-soft);
  box-shadow: var(--sk-shadow-drop);
}
.sk-cookie[hidden] { display: none; }
.sk-cookie__inner {
  display: grid;
  gap: var(--sk-s-12);
  padding: var(--sk-s-16) 0;
  font-size: var(--sk-fs-14);
  color: var(--sk-ink-2);
}
.sk-cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-s-8); }
.sk-cookie__btns button {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--sk-ink);
  border-radius: var(--sk-r-btn);
  background: var(--sk-bg);
  color: var(--sk-ink);
  font-size: var(--sk-fs-14);
  font-weight: 500;
  cursor: pointer;
}
.sk-cookie__btns button:hover { background: var(--sk-accent); border-color: var(--sk-accent); }
@media (min-width: 768px) {
  .sk-cookie__inner { grid-template-columns: 1fr auto; align-items: center; }
  .sk-cookie__btns { grid-template-columns: 180px 180px; }
}

/* ---------- 18+ modal ---------- */
.sk-age {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--sk-s-16);
  background: rgba(38, 19, 19, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sk-age[hidden] { display: none; }
.sk-age__card {
  width: 100%;
  max-width: 420px;
  padding: var(--sk-s-32) var(--sk-s-24) var(--sk-s-24);
  border-radius: var(--sk-r-photo);
  background: #ffffff;
  text-align: center;
}
.sk-age__card h2 { margin-top: var(--sk-s-12); font-size: var(--sk-fs-28); }
.sk-age__card p { margin-top: var(--sk-s-8); font-size: var(--sk-fs-14); color: var(--sk-ink-2); }
.sk-age__actions { display: flex; flex-direction: column; align-items: center; gap: var(--sk-s-12); margin-top: var(--sk-s-24); }
.sk-age__actions .sk-cta { min-height: 48px; font-size: var(--sk-fs-16); }
.sk-age__no { font-size: var(--sk-fs-14); color: var(--sk-ink-2); }
.sk-age__no:hover { color: var(--sk-accent); }

/* ---------- Text pages: Impressum, Datenschutz, Widerruf, Autor, Über uns ---------- */
.sk-page { max-width: 880px; padding: var(--sk-s-24) 0 var(--sk-s-48); }
.sk-page h1 { font-size: var(--sk-fs-34); }
@media (min-width: 1200px) { .sk-page h1 { font-size: var(--sk-fs-40); } }
.sk-page__lead { margin-top: var(--sk-s-8); font-size: var(--sk-fs-16); color: var(--sk-ink-2); }
.sk-page h2 { font-family: var(--sk-font-display); font-weight: 400; font-size: var(--sk-fs-24); line-height: var(--sk-lh-display); margin: var(--sk-s-32) 0 var(--sk-s-12); }
.sk-page p, .sk-page li, .sk-page address { font-size: var(--sk-fs-16); font-style: normal; color: var(--sk-ink-2); }
.sk-page p + p, .sk-page ul + p { margin-top: var(--sk-s-12); }
.sk-page ul { padding-left: 20px; }
.sk-page li + li { margin-top: var(--sk-s-6); }
.sk-page a { color: var(--sk-ink); text-underline-offset: 3px; text-decoration-color: var(--sk-accent-soft); }
.sk-page a:hover { text-decoration-color: var(--sk-accent); }
.sk-author { display: flex; align-items: center; gap: var(--sk-s-24); }
.sk-author__img { flex: none; width: 120px; height: 120px; border-radius: var(--sk-r-photo); object-fit: cover; }
@media (min-width: 768px) { .sk-author__img { width: 160px; height: 160px; } }
.sk-author + p { margin-top: var(--sk-s-24); }

/* ---------- Ratgeber: list page and articles ---------- */
.sk-page .sk-page__meta { margin-top: var(--sk-s-8); font-size: var(--sk-fs-12); }
.sk-page__cover {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: var(--sk-s-24) 0;
  border-radius: var(--sk-r-btn);
  background: var(--sk-blush);
}
.sk-page--list { padding-bottom: var(--sk-s-24); } /* head of a list page, the grid follows */


/* =====================================================================
   Theme-only rules (not in the mockup)
   ===================================================================== */

/* Skip link: visible on keyboard focus */
.sk-skip:focus {
  position: fixed;
  top: var(--sk-s-8);
  left: var(--sk-s-8);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sk-s-8) var(--sk-s-12);
  clip: auto;
  overflow: visible;
  border-radius: var(--sk-r-btn);
  background: var(--sk-ink);
  color: #ffffff;
  font-size: var(--sk-fs-14);
}

/* Burger label swaps its icon when the menu is open */
.sk-burger__close { display: none; }
.sk-nav-toggle:checked ~ .sk-head__row .sk-burger__open { display: none; }
.sk-nav-toggle:checked ~ .sk-head__row .sk-burger__close { display: block; }
.sk-nav-toggle:focus-visible ~ .sk-head__row .sk-burger { outline: 2px solid var(--sk-accent); outline-offset: 2px; border-radius: var(--sk-r-btn); }

/* 18+ modal: brand mark above the title */
.sk-age__mark { display: block; width: auto; height: 56px; margin: 0 auto; }

/* Footer: plain paragraphs in the columns */
.sk-foot__cols p { font-size: var(--sk-fs-14); }
.sk-foot__cols h2 a { color: inherit; }

/* WordPress admin bar: keep the sticky header below it */
.admin-bar .sk-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .sk-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .sk-head { top: 0; } }

/* ---------- WooCommerce: suppress default UI (catalog, not a shop) ---------- */
.woocommerce .onsale,
.woocommerce span.onsale,
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb,
.woocommerce .star-rating,
.woocommerce-product-rating,
.woocommerce div.product form.cart,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce a.added_to_cart,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-store-notice,
.woocommerce-message .button.wc-forward { display: none !important; }
.woocommerce ins { text-decoration: none; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product { float: none; width: auto; margin: 0; }
.woocommerce div.product .summary,
.woocommerce div.product div.summary { float: none; width: 100%; }