/* adelmann.tech product page: the familiar shop layout (gallery · title and bullets ·
   buy box) in the Adelmann look: warm graphite neutrals, dark primary button, brand
   orange as the accent. */
:root {
  --bg: #ffffff;
  --bg-2: #f7f5f2;
  --ink: #1c1b19;
  --ink-2: #6a655e;
  --line: #ebe7e2;
  --line-2: #dad5ce;
  --link: #a8490b;
  --tile: #f5f3ef;
  --accent: #ff8f3f;
  --accent-edge: #f07a26;
  --accent-hover: #ff9d55;
  --ok: #067d3f;
  --dark: #1a1918;
  --radius: 10px;
  --wrap: 1480px;
  --gutter: clamp(16px, 2.6vw, 28px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.pdp {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 300; background: #fff; padding: 8px 12px; border: 2px solid var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  color: #fff;
}
.top-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.wordmark {
  flex: none;
  display: block;
  width: 146px; /* the mask image ends in a superscript ® */
  height: 17px;
  background: currentColor;
  color: #fff;
  -webkit-mask: url("media/wordmark.webp") no-repeat center / contain;
  mask: url("media/wordmark.webp") no-repeat center / contain;
}
.wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top-nav { display: flex; gap: 22px; margin-left: auto; }
.top-nav a { color: #e6e3de; font-size: 14px; }
.top-buy {
  flex: none;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--accent-edge);
  color: #111;
  font-weight: 600;
  font-size: 14px;
}
.top-buy:hover { background: var(--accent-hover); text-decoration: none; }
.lang-pick {
  flex: none;
  padding: 6px 8px;
  border: 1px solid #4a4744;
  border-radius: 8px;
  background: transparent;
  color: #f1eee9;
  font: 13px var(--font);
  cursor: pointer;
}
.lang-pick option { color: var(--ink); background: #fff; }
.top-acct { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #4a4744; border-radius: 8px; color: #f1eee9; }
.top-acct:hover { border-color: #f1eee9; }


/* ---------- product top: gallery · head + info · buy box ---------- */
.pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 300px;
  grid-template-areas:
    "gallery head buy"
    "gallery info buy";
  grid-template-rows: auto 1fr;
  column-gap: 30px;
  align-items: start;
  padding-block: 26px 32px;
}
.pdp-head { grid-area: head; }
.pdp-info { grid-area: info; }
.pdp-gallery { grid-area: gallery; position: sticky; top: 72px; }
.buybox { grid-area: buy; position: sticky; top: 72px; }

.pdp-title { margin: 0 0 6px; font-size: 30px; font-weight: 650; line-height: 1.18; letter-spacing: -0.01em; }
.pdp-sub { margin-bottom: 12px; font-size: 15px; color: var(--ink-2); }
.seller-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.sr-badge { padding: 1px 8px; border-radius: 999px; background: #e6f4ea; color: var(--ok); font-weight: 700; }
.sr-sub { color: var(--ink-2); }

/* gallery */
.pdp-gallery { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
.pg-thumbs { display: flex; flex-direction: column; gap: 8px; }
.pg-thumb {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.pg-thumb:hover { border-color: var(--ink-2); }
.pg-thumb.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pg-play { position: absolute; inset: 0; display: grid; place-items: center; }
.pg-play::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 17, 17, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.pg-main { margin: 0; }
.pg-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: var(--tile); overflow: hidden; cursor: zoom-in; }
.pg-zoom img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.pg-main video { display: block; width: 100%; height: auto; background: #000; border-radius: var(--radius); }
.pg-hint { display: none; }

/* price + facts + bullets */
.pdp-price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pr { font-size: 30px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-note { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.pr-note b { color: var(--ink); }
.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.keyfacts div { padding: 10px 12px; border-radius: var(--radius); background: var(--tile); }
.keyfacts .kf-wide { grid-column: 1 / -1; }
.keyfacts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.keyfacts dd { margin: 2px 0 0; font-size: 14px; }
.info-h { margin: 22px 0 10px; font-size: 17px; font-weight: 650; }
.bullets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.bullets li { position: relative; padding-left: 28px; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* buy box */
.buybox {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(28, 27, 25, 0.08);
  font-size: 14px;
}
.bx-price { font-size: 28px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bx-vat { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.bx-ship b { font-weight: 400; }
#eta { font-weight: 700; }
.bx-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.bx-dest select { max-width: 100%; padding: 2px 4px; border: 1px solid #d5d0ca; border-radius: 6px; background: #fff; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.bx-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ok); }
.bx-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(6, 125, 63, 0.15); }
.bx-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.bx-qty select { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
/* Sets: 1 Stück / 2er-Set / 3er-Set; kasse.js fills prices and savings */
.bx-set { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bx-set[hidden] { display: none; }
.bx-set legend { margin-bottom: 6px; padding: 0; font-size: 13px; color: var(--ink-2); }
.set-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
.set-opt input { margin: 0; accent-color: var(--accent-edge); }
.set-opt.is-on { border-color: var(--accent-edge); box-shadow: inset 0 0 0 1px var(--accent-edge); background: #fff8f2; }
.set-opt:has(input:focus-visible) { outline: 2px solid var(--accent-edge); outline-offset: 2px; }
.set-name { font-weight: 600; }
.set-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-each { grid-column: 2 / -1; font-size: 12px; color: var(--ok); }
.set-each:empty { display: none; }
.bx-express { display: grid; gap: 6px; }
.bx-express[hidden] { display: none; }
.bx-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bx-express.is-loading #express-element {
  min-height: 96px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #f1f1f1 0%, #fafafa 50%, #f1f1f1 100%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.bx-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.bx-or::before, .bx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bx-or[hidden] { display: none; }
.bx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font: 600 15px/1.2 var(--font);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.bx-btn:hover { background: #34312d; text-decoration: none; }
.bx-btn:active { transform: translateY(1px); }
.bx-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.bx-btn-sub { margin-top: -4px; text-align: center; font-size: 12px; color: var(--ink-2); }
.perks { display: grid; gap: 8px; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; }
.perks li { display: flex; align-items: center; gap: 10px; }
.perks svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-legal { font-size: 11px; line-height: 1.45; color: var(--ink-2); }
.form-message { padding: 8px 10px; border: 1px solid #f5c2c0; border-radius: var(--radius); background: #fdf1f0; color: #b3261e; font-size: 13px; }
.form-message[hidden] { display: none; }

/* ---------- blocks below ---------- */
.block { padding-block: 36px; border-top: 1px solid var(--line); }
.block-h { margin: 0 0 20px; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.desc-text { display: grid; gap: 12px; max-width: 760px; margin: 0 auto 28px; font-size: 16px; line-height: 1.65; }
.aplus { display: grid; max-width: 970px; margin: 0 auto; }
.aplus img { display: block; width: 100%; height: auto; }
.views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 970px; margin: 26px auto 0; }
.views figure { margin: 0; }
.views img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: #1a1918; }
.views figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.views figcaption b { display: block; color: var(--ink); }
.steps { max-width: 970px; margin: 28px auto 0; }
.steps-h { margin-bottom: 12px; font-size: 18px; }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--ink-2); counter-increment: s; }
.steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
  font-weight: 700;
}
.steps li b { display: block; color: var(--ink); }

.info-grid, .safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec caption { padding-bottom: 8px; text-align: left; font-size: 16px; font-weight: 650; }
.spec th { width: 40%; padding: 10px 12px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; color: var(--ink-2); }
.spec td { padding: 10px 0; border-top: 1px solid var(--line); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--line); }
.safety-text h3 { margin-bottom: 8px; font-size: 16px; }
.safety-text ul { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.safety-text li { margin-bottom: 6px; }

/* reviews */
.rv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.rv-big { font-size: 40px; font-weight: 700; line-height: 1; color: var(--ok); }
.rv-cap { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.rv-bar { height: 10px; margin: 12px 0 8px; border-radius: 999px; background: #eceeee; overflow: hidden; }
.rv-bar span { display: block; width: 98.2%; height: 100%; background: var(--ok); }
.rv-counts { font-size: 14px; }
.rv-link { display: inline-block; margin: 10px 0 14px; font-size: 14px; }
.rv-note { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.rv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rv-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.rv-card blockquote { margin: 0; font-size: 15px; line-height: 1.5; }
.rv-card figcaption { font-size: 12px; color: var(--ink-2); }
.rv-card figcaption b { display: block; color: var(--ink); font-size: 13px; }

/* faq */
.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 14px 32px 14px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font-size: 22px; font-weight: 400; color: var(--ink-2); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
/* links inside running text are underlined, not told apart by colour alone */
.faq a, .spec td a, .bx-legal a, .rv-note a, .safety-text a, .desc-text a { text-decoration: underline; text-underline-offset: 2px; }

/* footer */
.foot { margin-top: 12px; background: var(--dark); color: #cfcac3; font-size: 13px; }
.foot-acct { padding-top: 24px; text-align: center; font-weight: 600; }
.foot-acct a { color: #f1eee9; }
.foot-acct + .foot-links { padding-top: 8px; }
.foot-links { padding: 28px 0 8px; text-align: center; }
.foot-links a { color: #f1eee9; }
.foot .withdraw-link { color: var(--accent); font-weight: 600; }
.foot-small { padding-bottom: 24px; text-align: center; font-size: 12px; color: #9d978f; }
.foot-cookies { padding: 0 0 10px; font-size: 13px; }

/* mobile buy bar */
.buybar { display: none; }

/* ---------- checkout panel ---------- */
html.drawer-open { overflow: hidden; }
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(540px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--bg-2);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer::backdrop { background: rgba(15, 17, 17, 0.5); }
.drawer[open] { animation: drawer-in 0.32s var(--ease); }
@keyframes drawer-in { from { transform: translateX(48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }
.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--dark);
  color: #fff;
}
.drawer-head h2 { font-size: 18px; }
.drawer-x { width: 36px; height: 36px; border: 1px solid #4a4744; border-radius: 50%; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.drawer-body { display: grid; gap: 12px; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.drawer form { display: grid; gap: 12px; }
.test-banner { padding: 8px 10px; border: 1px dashed #c45500; border-radius: var(--radius); background: #fff6ec; color: #8a3b00; font-size: 13px; }
.test-banner[hidden] { display: none; }
.d-product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.d-product img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.d-name { font-weight: 600; font-size: 14px; line-height: 1.35; }
.d-sub { font-size: 12px; color: var(--ink-2); }
.d-set { font-size: 13px; font-weight: 600; white-space: nowrap; }
.d-qty { display: grid; gap: 2px; font-size: 11px; color: var(--ink-2); }
.d-qty select { padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: #f0f2f2; font: 600 14px var(--font); color: var(--ink); }
.d-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.d-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; }
.step-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 12px; font-weight: 700; }
.d-small { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.sum { margin: 0 0 12px; font-size: 14px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sum dt, .sum dd { margin: 0; }
.sum .sum-total { font-size: 17px; font-weight: 700; border-bottom: 0; }
.sum .sum-tax { padding-top: 0; font-size: 12px; color: var(--ink-2); border-bottom: 0; }
.legal-hint { margin-bottom: 12px; font-size: 12px; color: var(--ink-2); }
/* small picture above the order button; the whole row opens the full notice */
.guarantee { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.guarantee a { flex: none; display: block; }
.guarantee a::after { content: ""; position: absolute; inset: 0; }
.guarantee img { display: block; width: 64px; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.guarantee figcaption { font-size: 12px; color: var(--ink-2); }
.btn-order { min-height: 48px; font-size: 16px; }
.pay-note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--ink-2); }
.drawer .form-message { margin-top: 10px; }

/* image zoom */
.zoom { width: min(92vw, 92vh); max-width: none; padding: 0; border: 0; border-radius: var(--radius); background: #fff; overflow: visible; }
.zoom::backdrop { background: rgba(15, 17, 17, 0.8); }
.zoom img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.zoom-btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.zoom-close { top: -14px; right: -14px; }
.zoom-prev { left: -22px; top: 50%; transform: translateY(-50%); }
.zoom-next { right: -22px; top: 50%; transform: translateY(-50%); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pdp-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "gallery head"
      "gallery buy"
      "info info";
    grid-template-rows: auto auto auto;
    row-gap: 14px;
  }
  .buybox { position: static; }
  .top-nav { display: none; }
  .top-buy { margin-left: auto; }
  .top-acct { margin-left: auto; }
  .top-acct + .top-buy { margin-left: 0; }
}
@media (max-width: 760px) {
  body.pdp { font-size: 15px; }
  .top-inner { gap: 8px; height: 56px; }
  .wordmark { width: 116px; height: 14px; }
  .lang-pick { max-width: 92px; padding: 5px 6px; }
  .top-buy { padding: 7px 12px; font-size: 13px; }
  .pdp-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "gallery" "buy" "info";
    padding-top: 10px;
  }
  .pdp-gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .pg-thumbs { order: 2; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pg-thumb { flex: none; }
  .pg-hint { display: none; }
  .pdp-title { font-size: 22px; }
  .pdp-sub { font-size: 14px; }
  .pdp-info .pdp-price { display: none; }
  .views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps ol, .info-grid, .safety, .rv, .rv-list { grid-template-columns: minmax(0, 1fr); }
  .buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 14px rgba(15, 17, 17, 0.08);
    transform: translateY(110%);
    transition: transform 0.3s var(--ease);
  }
  .buybar.show { transform: none; }
  .buybar-prod { display: grid; line-height: 1.25; }
  .buybar-prod b { font-size: 18px; }
  .buybar-prod span { font-size: 12px; color: var(--ok); }
  .buybar .bx-btn { width: auto; min-width: 150px; }
  .zoom-prev { left: 6px; }
  .zoom-next { right: 6px; }
  .zoom-close { top: 6px; right: 6px; }
}
@media (max-width: 420px) {
  .facts th { white-space: normal; }
}

/* Temporary offer, Amazon-style deal block (owner's decision, 04.10.2026; the 17,99 offer is temporary, no end date
   set). The struck-through 24,99 is the shop's lowest price in the 30 days before the reduction (§ 11 PAngV). */
.deal-badge { width: fit-content; margin: 0 0 6px; padding: 4px 8px; border-radius: 4px; background: #cc0c39; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; }
.bx-deal { display: grid; gap: 4px; justify-items: start; }
.bx-deal .deal-badge { display: none; margin: 0 0 2px; }
.off { margin-right: 2px; color: #cc0c39; font-weight: 300; }
.amz-price sup { position: relative; top: -0.7em; font-size: 0.46em; line-height: 0; vertical-align: baseline; }
.amz-price sup.cur { margin-left: 1px; }
.amz-price sup.cur:first-child { margin: 0 1px 0 0; }
.was-line { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.bx-deal .was-line { margin-top: 0; }
.was-line s { text-decoration-thickness: 1px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-stars { width: 90px; height: 18px; margin-right: 6px; vertical-align: -3px; flex: none; }
@media (max-width: 760px) { .bx-deal .deal-badge { display: block; } }

/* Phones: price and Apple Pay / Google Pay on the first screen, also inside the Instagram and Facebook apps
   (owner's decision, 07.11.2026). Smaller photo with the thumbnails beside it, stock and quantity in one row,
   delivery countries under the buttons. Larger screens keep the layout above. */
@media (max-width: 760px) {
  .pdp-top { row-gap: 8px; padding-top: 8px; }
  .pdp-title { margin-bottom: 4px; font-size: 20px; }
  .pdp-sub { display: none; }
  .seller-rating { gap: 2px 6px; font-size: 13px; }
  .sr-stars { width: 80px; height: 16px; margin-right: 2px; }
  .sr-sub { width: 100%; font-size: 12px; }
  .pdp-gallery { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .pg-thumbs { display: grid; grid-template-columns: repeat(2, 52px); gap: 6px; padding-bottom: 0; overflow: visible; }
  .pg-thumb { width: 52px; height: 52px; }
  .buybox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
  .buybox > * { width: 100%; }
  .bx-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; order: 1; }
  .bx-deal .bx-price { order: -1; width: 100%; }
  .bx-deal .deal-badge { margin: 0; }
  .bx-ship { order: 2; }
  .bx-stock { order: 3; width: auto; }
  .bx-qty { order: 4; width: max-content; padding: 4px 8px; }
  .bx-set { order: 4; }
  .bx-express { order: 5; }
  .bx-label { display: none; }
  .bx-express.is-loading #express-element { min-height: 44px; }
  #express-message { order: 6; }
  .bx-or { order: 7; }
  .buybox > .bx-btn { order: 8; }
  .bx-btn-sub { order: 9; }
  .bx-dest { order: 2; width: 100%; }
  .perks { order: 11; }
  .bx-legal { order: 12; }
}
/* iPhones zoom the page into any field with text under 16 px and stay zoomed (owner's report, 07.11.2026).
   Stripe's fields get their 16 px from fontSizeBase in kasse.js. */
@media (pointer: coarse), (max-width: 760px) {
  .lang-pick, .bx-qty select, .bx-dest select, .d-qty select { font-size: 16px; }
}
/* the orange top button and the bottom bar point at the Apple Pay / Google Pay button */
@keyframes wallet-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 122, 38, 0); } 30%, 70% { box-shadow: 0 0 0 4px rgba(240, 122, 38, 0.6); } }
.bx-express.is-called { border-radius: var(--radius); animation: wallet-call 1.4s var(--ease) 2; }
@media (prefers-reduced-motion: reduce) { .bx-express.is-called { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; } }

/* phones: logo, language, account and buy button have to share one row */
@media (max-width: 430px) { .wordmark { width: 100px; height: 12px; } }
@media (max-width: 379px) { .top-acct { display: none; } .top-acct + .top-buy { margin-left: auto; } }