/* Product detail page (v0.16.0). Reuses landing.css for .product-btn,
   .variant-* pills and .sold-out-badge; this file only owns the PDP layout:
   breadcrumb, two-column grid, gallery with thumb strip, description prose.
   Mobile-first: single column, gallery on top. */

.pdp {
  /* v0.20.1: follows the widened product grid (1200px) so grid -> PDP reads
     as one system; gallery column ~640px, lookbook pairs grow with it. */
  max-width: 1200px;
  margin: 0 auto;
  /* v0.20.2: main + body already clear the fixed nav — the old
     calc(64px + …) cleared it a second time (104px above the breadcrumb
     on phones). Plain rhythm padding now. */
  padding: 2rem 1.25rem clamp(4rem, 9vw, 7rem);
  /* v0.22.2: ONE rhythm model for the space between content bands
     (gallery/buy box → lookbook → Produktdetails → related tiles → footer).
     Every band consumes the same pair of fluid tokens, so the page breathes
     evenly and future tuning is a two-line change. */
  --band-gap: clamp(4rem, 9vw, 7rem);   /* space above a band (margin) */
  --band-pad: clamp(2.5rem, 5vw, 4rem); /* space between its border and content */
}

/* v0.20.2: landing.css (loaded here for the shared card styles) carries a
   bare `section { padding: var(--section-pad) }` — 48-96px on EVERY pdp
   section. Gallery + buy box must not inherit it; the band sections below
   re-declare their full padding shorthand instead. */
.pdp-grid > section { padding: 0; }

.pdp-state {
  text-align: center;
  padding: 6rem 1rem;
}
.pdp-state h1 { margin-bottom: 0.75rem; }
.pdp-state p { color: var(--text-muted, #667); margin-bottom: 1.5rem; }
.pdp-back-btn { display: inline-block; width: auto; padding: 0.8rem 2rem; }

.pdp-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted, #667);
  flex-wrap: wrap;
}
.pdp-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.pdp-breadcrumb a:hover { text-decoration: underline; }
.pdp-breadcrumb span[aria-current] {
  color: var(--text, #1c244b);
  font-weight: 600;
}

.pdp-grid {
  display: grid;
  /* v0.20.1: minmax(0, 1fr), NOT bare 1fr — 1fr means minmax(auto, 1fr) and
     the thumb strip's min-content (6 thumbs × 72px) inflated the whole page
     width on phones. With a 0 floor the strip actually overflow-scrolls. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 641px) {
  .pdp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 3rem; }
}

/* Gallery */
.pdp-main-img {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--blue-light, #f2f3f7);
  border-radius: 12px;
  overflow: hidden;
  /* v0.20.2: horizontal gestures on the image belong to the gallery swipe —
     without this the browser sometimes pans the page instead. Vertical
     scrolling and pinch-zoom stay native. */
  touch-action: pan-y pinch-zoom;
}
.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* v0.20.0: barely-there gallery navigation. Ghost chevrons that live on the
   main image, firm up when the pointer approaches, and never fight the
   photo — no solid disc, no border, a whisper of scrim for contrast. */
.pdp-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55; /* v0.20.1: nudged up from 0.35 — still quiet, now findable */
  text-shadow: 0 1px 8px rgba(20, 30, 60, 0.7);
  transition: opacity 0.25s ease;
}
.pdp-gallery-prev { left: 2px; }
.pdp-gallery-next { right: 2px; }
.pdp-main-img:hover .pdp-gallery-nav { opacity: 0.85; }
.pdp-gallery-nav:hover { opacity: 1; }
.pdp-gallery-nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -4px;
  border-radius: 8px;
  opacity: 1;
}
/* v0.20.2: thumbs wrap naturally — the slider (scroll-snap + pagers) is
   gone; a second calm row on phones beats hidden thumbs + snap glitches. */
.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  min-width: 0;
}
.pdp-thumb {
  flex: 0 0 auto;
  width: 72px;
  aspect-ratio: 4 / 5;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: var(--blue-light, #f2f3f7);
  cursor: pointer;
}
.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-thumb.active { border-color: var(--blue, #1c244b); }
.pdp-thumb:focus-visible {
  outline: 2px solid var(--blue, #1c244b);
  outline-offset: 2px;
}

/* Buy box */
.pdp-title {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.pdp-price {
  font-size: 1.25rem;
  font-weight: 700;
  /* The PAngV note (.price-note, landing.css) sits directly beneath and
     carries the 1.5rem gap to the variant picker for both of them. */
  margin-bottom: 0;
}
.pdp-info .variant-group { margin-bottom: 1rem; }
/* landing.css centers the grid card pills; the PDP buy box is left-aligned. */
.pdp-info .variant-group-label { text-align: left; }
.pdp-info .variant-pills { justify-content: flex-start; }
.pdp-cta {
  width: 100%;
  margin: 1rem 0 1.5rem;
}

.pdp-description {
  color: var(--text-muted, #445);
  line-height: 1.65;
}
.pdp-description p { margin-bottom: 1rem; }

/* Spec table (v0.17.0). v0.18.3: a full-content-width band below .pdp-grid
   rather than a column-bound block — see produkt.html. Rows flow into two
   text columns on desktop so a 12-row table stays compact instead of
   stretching each label/value pair across the whole page. */
.pdp-details { margin-top: var(--band-gap); padding: 0; }
.pdp-details h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.pdp-details dl { margin: 0; }
.pdp-details-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--blue-light, #e8eaf1);
  font-size: 0.85rem;
}
.pdp-details-row:last-child { border-bottom: none; }
@media (min-width: 641px) {
  .pdp-details {
    margin-top: var(--band-gap);
    padding: var(--band-pad) 0 0;
    border-top: 1px solid var(--blue-light, #e8eaf1);
  }
  /* v0.26.1: a column-flow GRID replaced CSS multicol. Multicol kept the
     reading order but could not keep the two columns LOOKING like one table:
     its columns are independent boxes, so a two-line value on the left pushed
     every rule below it out of step with the right column, and with an odd row
     count (7 → 4/3) the shorter column terminated a whole row higher.
     `column-fill: balance` is already the default and cannot fix either.
     Grid fixes both: `grid-auto-flow: column` over explicit row tracks keeps
     document order reading DOWN column one and then down column two (plain
     auto-flow would zig-zag pairs across), the two columns SHARE their row
     tracks so every rule lines up horizontally, and grid items never
     fragment, so a row still cannot split across the break.
     --pdp-detail-rows = ceil(rows / 2), set inline from Alpine in
     produkt.html; the 99 fallback degrades to a single column rather than to
     a broken N-column strip if that inline style is ever missing. */
  .pdp-details dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--pdp-detail-rows, 99), auto);
    grid-auto-flow: column;
    column-gap: 3rem;
    /* The closing rule belongs to the DL, not to a row: it spans the full
       width, so BOTH columns terminate on the same line even when the right
       one is one row shorter. Rows therefore separate with border-TOP. */
    border-bottom: 1px solid var(--blue-light, #e8eaf1);
  }
  .pdp-details-row {
    border-top: 1px solid var(--blue-light, #e8eaf1);
    border-bottom: none;
  }
}
.pdp-details dt {
  color: var(--gray, #667);
  font-weight: 300;
  /* "Materialzusammensetzung" overflows its column unbroken */
  hyphens: auto;
  overflow-wrap: break-word;
}
.pdp-details dd { margin: 0; overflow-wrap: break-word; }

/* Story band (v0.17.0) — the loud extra section */
.pdp-story {
  margin-top: var(--band-gap);
  padding: var(--band-pad) 0 0;
  border-top: 1px solid var(--blue-light, #e8eaf1);
  text-align: center;
}
.pdp-story h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-bottom: 1.25rem;
}
.pdp-story-text {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--gray, #556);
  line-height: 1.75;
}
.pdp-story-text p { margin-bottom: 1rem; }
/* v0.20.0 portrait-only lookbook (face + garment must survive every crop:
   no cell may be WIDER than the 4:5 masters, so crops only take width —
   off-centre subjects carry a catalog focus tag → inline object-position).
   Mobile: staggered swipe row, both card ratios narrower than 4:5.
   Tablet/desktop: 5-column grid, each row one PAIR — a wide portrait
   (span 3, aspect 4:5 ≈ uncropped, it sets the row height) beside a tall
   portrait (span 2, stretches to match → ~1:1.9, sideways-trimmed). DOM
   order alternates wide/tall per row (storyImgClass), so plain auto-flow
   mirrors the layout without explicit column placement. An odd leftover
   is a centred wide portrait. */
/* v0.20.1: the pair grid is UNIVERSAL — phones get the same mirrored
   wide/tall pairs at a tighter gap instead of a swipe row that hid all but
   one photo. Every frame is visible while scrolling, grouped in rows, and
   the portrait-only guarantee (no cell wider than 4:5) holds at every
   width, so faces + garments never crop out on mobile either. */
.pdp-story-images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.pdp-story-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.story-wide { grid-column: span 3; aspect-ratio: 4 / 5; }
.story-tall { grid-column: span 2; }
.story-solo { grid-column: 2 / span 3; aspect-ratio: 4 / 5; }
@media (min-width: 641px) {
  .pdp-story-images { gap: 1rem; }
  .pdp-story-images img { border-radius: 14px; }
}
/* v0.22.0: at the widest width the pairs become mirrored TRIPLETS — one
   wide portrait beside two slender talls, sides alternating per row (12
   tee frames = 4 rows instead of 6). Every element carries BOTH a pair
   role (story-wide/tall) and a triplet role (story-t-*); this block
   overrides the pair spans. Portrait-only guarantee still holds: the wide
   is 4:5, the talls are narrower. */
@media (min-width: 1000px) {
  .pdp-story-images { grid-template-columns: repeat(7, 1fr); }
  .story-wide, .story-tall, .story-solo { grid-column: auto; aspect-ratio: auto; }
  .story-t-wide { grid-column: span 3; aspect-ratio: 4 / 5; }
  .story-t-tall { grid-column: span 2; aspect-ratio: auto; }
  /* Remainder pair rows (v0.22.2 global model: rows of 3 while >4 images
     remain, then 2+2 / 2 — so 4 lookbook images keep their 2:2 split at
     full width instead of a 3+solo). Pair cells span 4+3 of the 7 columns. */
  .story-t-pwide { grid-column: span 4; aspect-ratio: 4 / 5; }
  .story-t-ptall { grid-column: span 3; aspect-ratio: auto; }
  .story-t-solo { grid-column: 3 / span 3; aspect-ratio: 4 / 5; }
}
@media (min-width: 641px) and (hover: hover) {
  .pdp-story-images img {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .pdp-story-images img:hover {
    transform: scale(1.025);
    box-shadow: 0 12px 32px rgba(20, 40, 80, 0.18);
  }
}

/* Related-product tiles (v0.17.0) — replaces the back-link */
.pdp-related {
  margin-top: var(--band-gap);
  padding: var(--band-pad) 0 0;
  border-top: 1px solid var(--blue-light, #e8eaf1);
  text-align: center;
}
.pdp-related h2 { margin-bottom: 1.5rem; }

/* === ONE layout, count-agnostic (v0.26.2 rework) ===
   Previously two layouts were selected by tile COUNT (>3 → fixed-width slider
   at every width), which made 5 tiles scroll and clip even at 1280px once the
   arrow gutters landed. Card count is now irrelevant to the CSS:

   A single-row fluid grid whose columns SHARE the available width between a
   210px floor and a 280px cap.
     - floor 210px: the 5-tile set at its minimum — 5x210 + 4x16 gap = 1114px,
       which fits the 1160px content box of `.pdp` (1200 - 2x1.25rem) exactly.
     - cap 280px: 3 tiles must not balloon to 370px each.
     - `width: max-content` + `max-width: 100%` + `margin-inline: auto` is the
       centring mechanism, NOT `justify-content: center`. With max-content the
       box shrink-wraps the capped tracks (3x280 + 32 = 872px) and the auto
       margins centre it in the 1160px band. When the tracks no longer fit, the
       max-width clamp takes over: the box is exactly 100% wide, the auto
       margins collapse to 0, and the row starts at the left edge — so an
       overflowing rail is never centre-offset and scrollLeft 0 always shows
       the first card in full. `justify-content: center` would have distributed
       the overflow to BOTH sides while scrollLeft floors at 0, permanently
       hiding the leading card; `safe center` is unevenly supported. This
       construct needs neither.
   Track sizing does the rest: between the two extremes the free space is
   handed out equally to the tracks up to their 280px growth limit, so any
   count from 1 upward lands in one row at the biggest size that fits, and 6
   tiles need no new breakpoint. */
.pdp-related-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--pdp-card-min, 210px), 280px);
  gap: 1rem;
  width: max-content;
  max-width: 100%;
  /* FITTING state: `clip`, not `auto` and not `visible`.
     - not `auto`: a scroll container clips at its padding box on BOTH axes,
       which chopped the hover shadow of the outer cards sideways — and in
       this state the tracks can consume the full width, so there is no room
       to pad with. `overflow-clip-margin` buys the shadow 36px on all four
       sides at ZERO layout cost, which no padding trick can do.
     - not `visible`: with JS or the network in a bad state the row would
       spill across the page instead of being contained.
     - `clip` still reports scrollWidth > clientWidth (verified in Chromium),
       so chatRailNav()'s overflow probe keeps working and the row can flip
       itself into the scrolling state below. */
  overflow: clip;
  overflow-clip-margin: 36px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  /* --- Hover-shadow room ---
     `overflow-x: auto` makes overflow-y compute to auto too, so this box clips
     on BOTH axes and .product-card:hover's lift (-4px) + shadow (0 8px 30px)
     got chopped. The room is given INSIDE the scroll port as vertical padding
     and must stay SYMMETRIC: the arrows are absolutely centred on the wrap
     (`top: 50%`), and equal padding keeps the card band's centre and the
     wrap's centre on the same line. The negative margins hand the space back
     so the band's vertical rhythm is unchanged (bottom keeps 8px of scrollbar
     clearance). No vertical scrollbar appears: padding grows the scroll port,
     not the content, and transforms never contribute to scroll size.
     Applies in both states, hence on the base rule. */
  --pdp-rail-pad-y: 36px;
  padding-block: var(--pdp-rail-pad-y);
  margin-block: calc(-1 * var(--pdp-rail-pad-y))
                calc(-1 * var(--pdp-rail-pad-y) + 8px);
  margin-inline: auto;
}
/* Phones: the floor rises so a tile is not a stamp on a 390px screen. Purely
   viewport-driven — no card-count logic, and the row overflow-scrolls here at
   every count >= 2 anyway. */
@media (max-width: 640px) {
  .pdp-related-grid { --pdp-card-min: min(64vw, 240px); }
}
/* --- Arrow gutters: gated on ACTUAL overflow (`scrollable` from
   chatRailNav()), never on card count. 44px arrow + its 6px inset from
   landing.css + 2px breathing room. When the row fits there are no arrows and
   no gutters — reserving them unconditionally is exactly what pushed the
   fitting 5-tile row into overflow before. */
.pdp-related-grid.is-scrollable {
  --pdp-rail-pad-x: 52px;
  /* Real scroll container now (both axes, as before). The gutters double as
     the hover-shadow room sideways, the padding-block above does it
     vertically, so overflow-clip-margin is not needed — and would be inert
     here anyway. */
  overflow: auto;
  padding-inline: var(--pdp-rail-pad-x);
  scroll-padding-inline: var(--pdp-rail-pad-x);
}
.pdp-related-card {
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.pdp-related-card .product-info { padding: 0.9rem; }
.pdp-related-card .name { font-size: 0.9rem; }
.pdp-related-card:focus-visible {
  outline: 2px solid var(--blue, #1c244b);
  outline-offset: 2px;
}

/* The badge is absolutely positioned (landing.css) — the grid card gets its
   containing block from an inline style; the related tile gets it here. */
.pdp-related-card .product-img { position: relative; }

/* === Farbe fabric-crop chips — PDP only ===
   A two-zone card: fabric crop on top, colour name below. It replaces the
   inline packshot thumbnail, which read as three grey boxes (each thumb
   carried the packshot's own light-grey photo background) and made "Blanc
   White" — a white shirt on a near-white ground — effectively invisible.

   DELIBERATE EXCEPTION to the repo's no-cover-crop invariant: that rule
   protects PRODUCT PRESENTATION imagery (grid cards, chat tiles, related
   tiles, PDP gallery, lookbook), where the garment must stay fully in frame.
   A colour swatch is the opposite job — it must show fabric and nothing else,
   so a deep cover-crop is exactly right here. Presentation surfaces stay
   uncropped.

   landing.css owns the shared .variant-pill (also used by the #produkte grid's
   size pills) and must not grow an image variant; this modifier lives here
   and, because produkt.css loads AFTER landing.css, it wins every
   equal-specificity rule there — including the mobile
   `.variant-pill { height: 38px; padding: 0 14px }` override, since a media
   query adds no specificity, only order, and we are later. `height: auto` is
   therefore load-bearing: without it the pill height clamps the card. */
.variant-pill--swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  line-height: 1.2;
  /* Selection must not move anything (v0.26.6 flicker fix), AND an unselected
     chip must show the same 1px hairline as every other .variant-pill on the
     site (v0.26.9). v0.26.6 achieved the first by making the unselected border
     2px too, which cost the second — the chips read heavier than the Größe
     pills beside them.
     Both at once: the SELECTED ring is 2px of border, the UNSELECTED one is
     1px of border plus 1px of margin. Same two pixels either way, only one of
     them painted when unselected.
     The width has to move with it or the fix reintroduces the very jump it
     replaces. `width` sets the BORDER box, so a chip carrying 1px of margin
     needs a 2px narrower border box to occupy the same slot. --swatch-slot is
     that constant footprint, declared once per breakpoint so the arithmetic
     lives in one place:
       unselected  62px border box + 1px margin  = 64px slot, 60px content
       selected    64px border box + 0px margin  = 64px slot, 60px content
     Content box and content offset are identical in both states, which is what
     P27b measures — the outer box was stable through the original bug too, so
     it proves nothing on its own. */
  --swatch-slot: 64px;
  width: calc(var(--swatch-slot) - 2px);
  margin: 1px;
  border-width: 1px;
  border-color: var(--border, #e8eaf1);
}
.swatch-crop {
  display: block;
  width: 100%;
  height: 44px;
  overflow: hidden;
  border-bottom: 1px solid var(--border, #e8eaf1);
}
.swatch-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Deep centre-crop into the torso. The garment occupies roughly the central
     60% of the 4:5 packshot, so ~2.4x is where the last of the photo
     background leaves the zone. The origin lands the window on mid-torso:
     42% still caught a sliver of the teal chest logo on Soft Salvia, 50%
     clears it and stays well above the hem. ONE value for all colourways —
     the packshots are framed identically. */
  transform: scale(2.4);
  transform-origin: 50% 50%;
}
/* Flex-centred, not a plain block: the chips stretch to the tallest card, and
   a one-line name ("Soft Salvia") next to a two-line one would otherwise sit
   top-aligned in its taller box. */
.swatch-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
  font-size: 0.72rem;
  text-align: center;
}
/* Selected: 2px ring on the whole card, label zone filled blue. The shared
   .variant-pill.selected paints the WHOLE button blue — the crop zone covers
   its own area, so only the label reads as filled, which is the intent. */
/* Trades the 1px margin for the second border pixel — see --swatch-slot above.
   The three declarations move together; changing one alone puts the flicker
   back. */
.variant-pill--swatch.selected {
  width: var(--swatch-slot);
  margin: 0;
  border-width: 2px;
  border-color: var(--blue, #1c244b);
}
.variant-pill--swatch.selected .swatch-label {
  background: var(--blue, #1c244b);
  color: var(--white, #fff);
}
.variant-pill--swatch.selected .swatch-crop {
  border-bottom-color: var(--blue, #1c244b);
}
/* .unavailable dimming comes from landing.css (opacity + line-through); the
   strike lands on the label text only, which is what we want. */

/* v0.28.2 patch picker: colour-dot pills. Photo chips died twice (44px crops
   of an embroidered patch read as noise at any zoom — operator call). The
   dot + pulse styles are SHARED with the grid and live in landing.css (which
   every shop page loads before this file); only the PDP-specific hint line
   below is defined here.

   The line under the pills is ALWAYS rendered: hint text before a pick, the
   element one-liner after — same slot, so the description below never jumps
   when the fan selects. min-height guards the swap moment. */
/* v0.29.1 companion products ---------------------------------------- */
.pdp-companion-note { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--accent, #E96B0A); background: rgba(233, 107, 10, 0.06); font-size: 0.92rem; line-height: 1.5; }
.pdp-addon--line { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.8rem 0 1.2rem; text-decoration: none; color: inherit; font-size: 0.92rem; line-height: 1.45; }
.pdp-addon-label { font-weight: 600; }
.pdp-addon-arrow { color: var(--accent, #E96B0A); font-weight: 600; }
.pdp-addon--line:hover .pdp-addon-label, .pdp-addon--line:focus-visible .pdp-addon-label { text-decoration: underline; }
.pdp-companion { margin: 2.5rem 0 0; }
.pdp-companion h2 { margin-bottom: 1rem; }
.pdp-companion-card { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1rem; align-items: center; max-width: 560px; }
.pdp-companion-card .name a { text-decoration: none; color: inherit; }
.pdp-companion-card .name a:hover { text-decoration: underline; }
.pdp-companion-card .product-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.pdp-companion-card .name { font-weight: 600; margin: 0 0 0.3rem; }
.pdp-companion-card .price { margin: 0 0 0.4rem; }
.pdp-companion-card .detail { margin: 0; color: var(--muted, #6b7280); font-size: 0.9rem; }

.pdp-patch-line {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  min-height: 1.3em;
  color: var(--muted, #6b7280);
}
.pdp-patch-line--hint {
  font-style: normal;
}
/* On phones both the hint and some one-liners wrap to two lines, but not all
   of them do — reserve the two-line slot so a pick still never shifts the
   content below (the whole point of the always-rendered line).
   (The nudge deliberately adds NO text emphasis — operator call: the pulse
   from landing.css is the whole signal, same as on every other picker row.) */
@media (max-width: 640px) {
  .pdp-patch-line { min-height: 2.6em; }
}

@media (max-width: 640px) {
  .pdp { padding-top: 1.5rem; }
  .pdp-grid { gap: 1.5rem; }
  .pdp-title { font-size: 1.35rem; }
  /* Bigger touch target on phones (mirrors landing.css's pill bump). Only the
     slot changes — the border/margin trade above is expressed in terms of it,
     so both states follow automatically. */
  .variant-pill--swatch { --swatch-slot: 76px; }
  .swatch-crop { height: 52px; }
  .swatch-label { padding: 7px 4px; font-size: 0.74rem; }
}

/* v0.26.6: the PDP no longer renders a .ship-perk element — the free-shipping
   threshold is a clause inside .price-note now (see produkt.html). The two
   v0.26.5 spacing overrides that split the gap across the pair are gone with
   it, so .price-note gets landing.css's own 1.5rem margin-bottom back and is
   once again the last thing above the variant picker. Nothing to override.

   .ship-perk itself still exists in landing.css: the cart drawer and the
   #produkte grid footnote both use it, and the drawer ships on every page. */