/* Product page — frame `Kortele` (159:1745), canvas 1728x5706; sold-out state from
   `Preke isparduota` (377:6486). Offsets below are frame-absolute values from
   design/figma-cache/frames/kortele.json. Text tops are ink tops (Figma cap-trims). */

/* ---- Breadcrumb: Frame 75 @294,88, 12/15.6, 16px gaps ---- */
.crumbs { position: absolute; left: 0; right: 0; top: -32px; }   /* box top 88, .pdp top 120 */
.crumbs__inner {
  width: var(--container); margin-inline: auto; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.crumbs__inner a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.crumbs__inner a:hover, .crumbs__inner a:focus-visible { color: var(--accent); }
.crumbs__inner span { color: var(--muted); }
.crumbs__inner img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

/* ---- Stage + info: Group 5300 @0,120 (1252x976) and the 364 column @1294 ---- */
/* Comment 21 — the hero ends at the bottom of the screen: product.js sets --hero-h to the room
   between the stage top and the viewport bottom (976 at the comp's 1728x1096), and --info-h to
   the info column's own height. The section is the taller of the two; when the column is the
   taller one the stage is sticky, so its foot stays on the viewport bottom while the column
   scrolls past it and lands flush on the band (no gap under the photo — comment 23). With JS off
   both fall back to the comp's 976.
   R2-05: the column never runs onto the band — its foot keeps the comp's 68px above it
   (Group 5540 foot @1028 → Rectangle 7 @1096), however short the viewport. */
.pdp {
  position: relative; margin-top: 48px;
  height: max(var(--hero-h, 976px), calc(var(--info-h, 0px) + 68px));
  /* Title growth (design/DEVIATIONS.md): product.js measures the rendered title and sets
     --title-max to its whole lines (up to 3) and --title-gap to the revised comp's 8px wrap gap
     under a wrapped title. With JS off the title clips to its declared clamp. */
  --title-lh: 41.7px;
}
.pdp__gallery {
  position: sticky; top: var(--hero-top, 0px); width: 1252px; height: var(--hero-h, 976px);
}
.pdp__stage { position: absolute; inset: 0; overflow: hidden; background: var(--shell); }
/* R2-03: a photo change slides in from the side of the arrow pressed — the incoming shot
   starts a stage-width off (product.js sets it), the outgoing one leaves the other way. The
   stage clips both; a shot that is neither active nor leaving is hidden. */
.pdp__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: transform var(--t-reveal) var(--ease-out);
}
.pdp__shot.is-active, .pdp__shot.is-leaving { opacity: 1; }
/* Client request 2026-10-28 #6: a product shot on white (`ProductImage.is_packshot`) sits at
   most half the frame — contained inside a 25% inset on white, like the maude reference; a
   lifestyle photo keeps the full-bleed cover. The frames are size containers, so the inset is
   25% of each side (cqw/cqh), not of the width alone. Thumbs stay covers. */
.pdp__stage, .pdp-about__photo { container-type: size; }
.pdp__shot.is-packshot, .pdp-about__shot.is-packshot {
  object-fit: contain; padding: 25cqh 25cqw; background: #fff;
}
/* client request 2026-10-28: no Rectangle 2965 scrim under the photo (design/DEVIATIONS.md) */
/* Frame 67 @1133,144 (right edge @1228), 24 tall r8 — client request 2026-10-28: the badge
   hugs its label instead of the comp's fixed 95 with the label pushed right. The paddings are
   the INK's: measured at 4x, 0 / 8 left the caps 9.5 / 8.25 from the sides and 6.5 / 8.75 from
   top / bottom (DM Sans sits high in its line box), 2.25 / 8 / 0 / 7.4 centres them both ways */
.pdp__badge {
  position: absolute; right: 24px; top: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; padding: 2.25px 8px 0 7.4px;
  background: var(--ink); color: var(--cream); border-radius: 8px;
  font-weight: 500; font-size: 12px; line-height: 15.6px; letter-spacing: .6px;
}
/* 2026-11-04: Firefox sets DM Sans ~1px lower in its line box than Chromium, so the padding
   above centres the caps in one engine only. Where the cap box can be trimmed, the flex centre
   centres the INK itself in both (measured 4x: top/bottom and left/right within 0.5px). */
@supports (text-box: trim-both cap alphabetic) {
  /* text-box applies to a block's own lines (a flex item's anonymous box does not inherit
     it): a block whose content box is exactly the cap height, centred by the padding */
  .pdp__badge {
    display: block; text-align: center; text-box: trim-both cap alphabetic;
    padding-block: calc((24px - 1cap) / 2);
  }
}
.pdp__discount {                                    /* Frame 80 @290,197 — mobile only */
  position: absolute; left: 290px; top: 56px; width: 46px; height: 24px;
  display: flex; align-items: center; justify-content: flex-end; padding: 8px;
  background: var(--danger); color: var(--cream); border-radius: 8px;
  font-weight: 500; font-size: 12px; line-height: 15.6px; letter-spacing: .6px;
}
/* R2-03: Frame 7 @314,990 + Group 5261 @387,975 + Frame 6 @889,990 as ONE row centred on the
   stage (314..938, centre 626): the arrows keep the comp's 24px to the strip whatever the photo
   count, and the strip shows at most the comp's six thumbs (478) — more scroll inside it. */
.pdp__nav {
  position: absolute; left: 0; right: 0; bottom: 40px;          /* strip @975 on a 1096 foot */
  display: flex; justify-content: center; align-items: flex-end; gap: 24px;
}
.pdp__thumbs {                                      /* Group 5261 — 73x81, pitch 81 */
  position: relative; flex: 0 1 auto; max-width: 478px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.pdp__thumbs::-webkit-scrollbar { display: none; }
/* client request 2026-10-28: every thumb fully opaque; the active one a 1px accent frame
   (the comp's 3px) — hover tints the frame sand instead of lifting the opacity */
.pdp__thumb {
  flex: none; width: 73px; height: 81px; padding: 0; border: 1px solid transparent;
  transition: border-color var(--t-tint) var(--ease-out);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb:hover { border-color: var(--sand); }
.pdp__thumb:focus-visible { outline-offset: -2px; }  /* the scrolling strip clips anything outside */
.pdp__thumb.is-active { border-color: var(--accent); }
.pdp__arrow {                                       /* Frame 7 / Frame 6 — 49x50, foot @1040 */
  flex: none; margin-bottom: 16px; width: 49px; height: 50px; border-radius: var(--r-btn);
  border: 1px solid var(--cream); display: flex; align-items: center; justify-content: center;
  transition: background-color var(--t-tint) var(--ease-out);
}
/* client request 2026-11-04: a translucent ink disc behind the cream chevron, so the arrow reads
   on a white packshot as well as on a dark photo */
.pdp__arrow { background: rgba(44, 36, 32, .55); }
.pdp__arrow:hover, .pdp__arrow:focus-visible { background: rgba(44, 36, 32, .8); }
.pdp__arrow img { width: 9px; height: 15px; }
/* Client request 2026-11-10 (codity #548, design/DEVIATIONS.md) replaces the 1252x976 stage and
   the strip under it: the stage is SQUARE — side min(--hero-h, 853) with its right edge at 1147,
   so at 853 it starts on the 294 gutter — and the thumbs are a vertical column of 81x81 flush
   with the gallery's right edge (1171..1252, 24 from the stage), capped at the stage height and
   scrolling past it. The arrows overlay the stage, centred, 24 in from its sides. The row wrapper
   steps aside (`display: contents`), so arrows and column place against the gallery. ≤767 keeps
   the comp's stage and strip (the mobile block never sees these rules). */
@media (min-width: 768px) {
  .pdp__gallery { --stage: min(var(--hero-h, 976px), 853px); }
  .pdp__stage { inset: 0 105px auto auto; width: var(--stage); height: var(--stage); }
  .pdp__badge { right: 129px; }                       /* 24 from the stage's corner */
  .pdp__nav { display: contents; }
  .pdp__arrow { position: absolute; top: calc(var(--stage) / 2 - 25px); margin: 0; }
  .pdp__arrow--prev { left: calc(1171px - var(--stage)); }   /* 1147 - S + 24 */
  .pdp__arrow--next { left: 1074px; }                        /* 1147 - 24 - 49 */
  .pdp__thumbs {
    position: absolute; left: 1171px; top: 0; width: 81px; max-width: none;
    max-height: var(--stage); flex-direction: column; overflow: hidden auto;
  }
  .pdp__thumb { width: 81px; height: 81px; }
}

.pdp__info { position: absolute; left: 1294px; top: 0; width: 364px; }
.pdp__info > * { margin: 0; }
.pdp__title {                                       /* @1294,120 — 32/41.7 ls3.2 UPPER */
  text-transform: uppercase; color: var(--ink);
  font-weight: 500; font-size: 32px; line-height: 41.7px; letter-spacing: 3.2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  max-height: var(--title-max, var(--title-lh));
}
.pdp__brand {                                       /* @1294,158 — 14/18.2 w600 UPPER */
  text-transform: uppercase; color: var(--accent);
  font-weight: 600; font-size: 14px; line-height: 18.2px;
}
.pdp__rule { margin: 0; border: 0; border-top: 1px solid var(--sand); }
/* client request 2026-10-28: no quantity row (Group 5296 @468) — rule 3 and everything under
   it rise by its 48px pitch: 406 -> 358, CTA 430 -> 382, USP 481.4 -> 433.4, rule 4 525 -> 477,
   bundle 565 -> 517 (design/DEVIATIONS.md) */
/* P-03: price and old price share one row, so a longer price (`€41,50`) pushes the old one
   along instead of running into it — the comp's gap is 1353 - (1294 + 48) = 11px. The row
   sits at the price's old top; the old price keeps its 77.81 - 74.01 = 3.8px drop. */
.pdp__prices {
  display: flex; align-items: flex-start; gap: 11px;
}
.pdp__price {                                       /* @1294,200 — 20/26 w500 */
  margin: 0; color: var(--ink); font-weight: 500; font-size: 20px; line-height: 26px; white-space: nowrap;
}
.pdp__compare {                                     /* @1353,202 — 14/18.2 #fb6262 */
  margin: 3.8px 0 0; color: var(--danger); white-space: nowrap;
  font-weight: 400; font-size: 14px; line-height: 18.2px;
}
.pdp__compare s { text-decoration-thickness: 1px; }
.pdp__sku {                                         /* @1588,203 right-aligned to 1658 */
  color: var(--muted);
  font-weight: 400; font-size: 12px; line-height: 15.6px;
}
.pdp__lead {                                        /* @1294,238 — 364x70, 14/20 w300 */
  color: var(--ink);
  font-weight: 300; font-size: 14px; line-height: 20px;
}
/* client request 2026-10-28: a liquid's „Kiekis: 100 ml“, its own line under the lead (no
   comp; leads stay <= 3 lines, so lead + volume still clear the chips / rule 2) */
/* 2026-11-04: the lead's own type (w300), and the price → lead ink gap (≈24) above it: the
   lead's last baseline to the volume's cap top = 5.2 (rest of the line) + 14 + 5 (to the cap). */
.pdp__volume { display: block; margin-top: 17px; font-weight: 300; }
.pdp__chips {                                       /* Group 5508/5506 — 2 cols @0/193, pitch 32 */
  list-style: none;
  padding: 0; display: grid; grid-template-columns: 193px 1fr; row-gap: 14px;
  grid-template-rows: repeat(2, 18px);
}
.pdp__chips li {
  position: relative; color: var(--ink);
  font-weight: 300; font-size: 12px; line-height: 18px;
}
.pdp__chips li::before {                            /* Ellipse 2 — 4x4 @ text top +2 */
  content: ""; position: absolute; left: -12px; top: 8.48px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

.pdp__opt-label {                                   /* `SPalva` @1294,427 — 14/18.2 ls1.4 UPPER */
  flex: none; padding: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px;
}
.pdp__opt { border: 0; padding: 0; margin: 0; }
/* Label and control are ONE flex row, not two absolutely placed boxes: a longer label (EN, or
   an admin-edited string) pushes the control right instead of running under it. The row sits at
   the CONTROL's comp top and the label carries its own baseline offset; the gap is the comp's
   control left minus the LT label's measured width (78 - 54.41 / 68 - 46.41). */
.pdp__opt--colour { display: flex; align-items: flex-start; gap: 23.59px; }
.pdp__opt--colour .pdp__opt-label { margin-top: 2.81px; }      /* label ink @427, dots @424 */
.pdp__swatches { display: flex; gap: 12px; }        /* Group 5331 — 24px dots @1372, pitch 36 */
.pdp__swatch { display: block; width: 24px; height: 24px; cursor: pointer; }
.pdp__swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdp__swatch > span:first-of-type {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 0 var(--cream);
  transition: box-shadow var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out),
              transform var(--t-move) var(--ease-out);
}
.pdp__swatch:hover > span:first-of-type { transform: scale(var(--zoom)); }
.pdp__swatch.is-active > span:first-of-type {       /* Ellipse 1 3px accent + Ellipse 4 2px cream */
  border: 3px solid var(--accent); box-shadow: inset 0 0 0 2px var(--cream);
}
/* P-01: a colour with no stock is drawn faded and struck through, and cannot be picked —
   no comp draws this state (design/DEVIATIONS.md) */
.pdp__swatch.is-soldout { position: relative; cursor: not-allowed; }
.pdp__swatch.is-soldout > span:first-of-type { opacity: .35; }
.pdp__swatch.is-soldout:hover > span:first-of-type { transform: none; }
.pdp__swatch.is-soldout::after {
  content: ""; position: absolute; left: 11.5px; top: -2px; width: 1px; height: 28px;
  background: var(--ink); transform: rotate(45deg);
}
/* P-06 sizes — no comp draws one (design/DEVIATIONS.md). The row takes the colour row's place
   (or the next 48px pitch under it); each size is the quantity stepper's pill (Frame 8: 34px,
   1px sand, r24, 14/18.2 w500) and the picked one the quiz pills' accent fill. The label sits
   on the stepper row's offsets (`Dydis` 46.41 wide, gap 21.59, ink +5.84). */
.pdp__opt--size {
  display: flex; align-items: flex-start; gap: 21.59px;
}
.pdp__opt--size .pdp__opt-label { margin-top: 5.84px; }
.pdp__sizes { display: flex; gap: 8px; max-width: 296px; overflow-x: auto; scrollbar-width: none; }
.pdp__size { position: relative; flex: none; cursor: pointer; }
.pdp__size input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdp__size > span:first-of-type {
  display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 14px; border: 1px solid var(--sand); border-radius: var(--r-card); color: var(--ink);
  font-weight: 500; font-size: 14px; line-height: 18.2px; white-space: nowrap;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out),
              color var(--t-tint) var(--ease-out);
}
.pdp__size:hover > span:first-of-type, .pdp__size:has(:focus-visible) > span:first-of-type { border-color: var(--accent); }
.pdp__size:has(:focus-visible) > span:first-of-type { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp__size.is-active > span:first-of-type { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.pdp__size.is-soldout { cursor: not-allowed; }
.pdp__size.is-soldout > span:first-of-type { opacity: .35; text-decoration: line-through; }
.pdp__size.is-soldout:hover > span:first-of-type { border-color: var(--sand); }

.pdp__cta {                                         /* Frame 4 @1294,550 */
  display: flex; align-items: center; gap: 16px;
}
.pdp__add {
  flex: 1 1 auto; min-width: 0; height: 47px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ink); color: var(--cream); border-radius: 40px;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.pdp__add:hover, .pdp__add:focus-visible { background: var(--ink-hover); }     /* ASSETS 452:4464; tint only — see motion.css */
.pdp__circle {                                      /* Group 5332 @1548 / Group 29 @1611 — 47x47 */
  flex: none; width: 47px; height: 47px; border-radius: 40px;
  border: 1px solid var(--sand); display: flex; align-items: center; justify-content: center;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.pdp__circle:hover, .pdp__circle:focus-visible { background: var(--shell); border-color: var(--accent); }
.pdp__circle[aria-pressed="true"] img { filter: brightness(0) saturate(100%) invert(38%) sepia(24%) saturate(600%) hue-rotate(330deg); }
.pdp__soldout {                                     /* 377:6865 @1294,420 — 18/23.4 UPPER */
  text-transform: uppercase; color: var(--danger);
  font-weight: 300; font-size: 18px; line-height: 23.4px;
}
.pdp__usp {                                         /* @1294,613 — 12/32 centred */
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 18px;
}

/* `Be pasirinkimu` 347:2324 — nothing to choose: no option row and no third rule; the CTA
   sits G under rule 2 */
.pdp__info--plain .pdp__rule--3 { display: none; }

/* client 2026-11-04 (Laura): the info column is IN FLOW. Every ruled section is rule -> G of air ->
   content -> G of air -> rule, measured ink to rule (a text row's own leading is taken off its
   margin), so a longer lead, a volume line, chips, one or two option rows or a taller title can
   no longer crowd a rule (design/DEVIATIONS.md). Sold out (377:6486): the status line, then the
   notify CTA, on the same rhythm. */
.pdp__info { display: grid; grid-template-columns: 1fr auto; align-content: start; top: -8.61px; --g: 24px; }   /* the title's line box starts 8.61 above its ink */
.pdp__info > *, .pdp__buy > * { grid-column: 1 / -1; }
.pdp__buy > * { margin: 0; }
.pdp__buy { display: contents; }
.pdp__brand { margin-top: calc(.72px + var(--title-gap, 0px)); }
.pdp__rule--1 { margin-top: calc(var(--g) - 3px); }   /* brand ink -> rule = G as well */
.pdp__prices { grid-column: 1; align-self: baseline; margin-top: calc(var(--g) - 5px); }
.pdp__sku { grid-column: 2; align-self: baseline; white-space: nowrap; }
.pdp__lead { margin-top: 11px; }
.pdp__chips { margin: 24px 0 0 12px; }
.pdp__rule--2, .pdp__rule--4 { margin-top: calc(var(--g) - 2px); }
.pdp__lead:has(.pdp__volume) + .pdp__rule--2 { margin-top: calc(var(--g) - 4px); }   /* no descender on the volume line */
.pdp__opt--colour, .pdp__opt--size { margin-top: var(--g); }
.pdp__opt + .pdp__opt { margin-top: 14px; }
.pdp__rule--3, .pdp__cta { margin-top: var(--g); }
.pdp__soldout { margin-top: calc(var(--g) - 1px); }
.pdp__cta--soldout { margin-top: 14px; }
.pdp__usp { margin-top: 14px; }

/* ---- Group 5540 @1294,685 — `Įsigykite kartu`, 3 cards 113x125 on a 125.5 pitch ---- */
.bundle { position: relative; margin-top: calc(var(--g) + 1px); width: 364px; }
.bundle__title {
  position: absolute; top: -13.81px; left: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px;
}
.bundle__nav { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }   /* @1626 / @1644 */
/* R2-04: each state is its Figma group drawn as exported. Group 5334 (default — Ellipse 176, a
   1px #d4c5b5 CENTER stroke, so its 15px export overhangs the 14px box by .5, chevron 3x6 @+5,+4)
   is the comp's LEFT arrow; Group 5455 (hover — Ellipse 175 #d4c5b5 disc, #8b6355 chevron
   @+6,+4) its RIGHT one. The other direction of each is the same group turned 180°, which is
   exactly how the comp builds its left arrow. The two states cross-fade. The default export's
   viewBox is widened by .5 each side (paths untouched) so it sits on whole pixels at -1: Chromium
   snaps a box at -.5 to the CSS pixel grid, which moved the ring half a pixel. */
.bundle__arrow { position: relative; width: 14px; height: 14px; padding: 0; border: 0; background: none; }
.bundle__ico {
  position: absolute; left: -1px; top: -1px; width: 16px; height: 16px; max-width: none;
  transition: opacity var(--t-tint) var(--ease-out);
}
.bundle__ico--hover { left: 0; top: 0; width: 14px; height: 14px; opacity: 0; }
.bundle__arrow--next .bundle__ico:not(.bundle__ico--hover),
.bundle__arrow--prev .bundle__ico--hover { transform: rotate(180deg); }
.bundle__arrow:hover .bundle__ico--hover, .bundle__arrow:focus-visible .bundle__ico--hover { opacity: 1; }
.bundle__arrow:hover .bundle__ico:not(.bundle__ico--hover),
.bundle__arrow:focus-visible .bundle__ico:not(.bundle__ico--hover) { opacity: 0; }
.bundle__track {                                    /* images @721 */
  display: flex; gap: 12.5px; margin-top: 36px;
  /* up to 12 picks (2026-11-04): three a page, the arrows page through (motion.js) */
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.bundle__track::-webkit-scrollbar { display: none; }
.bundle__track > * { scroll-snap-align: start; }
.bundle__nav[hidden] { display: none; }
/* `.bcard` is also the BLOG card, and mobile.css reflows that one into a 100%-wide flex row
   with a 120px thumb — it loads after this sheet, so the bundle's cards are scoped to their
   own section to outweigh it (the collision squeezed `.bcard__name` to 3px at every width
   under 768). */
.bundle .bcard { display: flex; flex-direction: column; gap: 0; flex: none; width: 113px; }
/* Comment 25: the name box is only as tall as its lines (≤2), so a one-line name keeps the
   comp's name→price gap instead of an empty second line; the Pridėti pills stay on one row. */
.bundle .bcard__name { height: auto; max-height: 2lh; }
.bundle .bcard form { margin-top: auto; }   /* the 360 track scrolls, it does not squeeze */
.bundle .bcard img { width: 113px; height: 125px; object-fit: cover; display: block; }
.bcard__brand {                                     /* @862 — 12/15.6 w500 UPPER, one line */
  margin: 13.4px 0 0; text-transform: uppercase; color: var(--accent);
  font-weight: 500; font-size: 12px; line-height: 15.6px;
  height: 1lh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* The comp's 28px box is a CAP box over two 18px lines; two CSS line boxes are 36px, and a
   28px height cuts the second one 10px in. The box is `2lh` — the clamp lands on a line
   boundary — and the price gives back the 8px so its ink stays at the comp's @930. */
.bcard__name {                                      /* @886 — 14/18, 2 lines */
  margin: 7.62px 0 0; height: 2lh; overflow: hidden; color: var(--ink);
  font-weight: 400; font-size: 14px; line-height: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bcard__name a { color: inherit; transition: color var(--t-tint) var(--ease-out); }
.bcard__name a:hover, .bcard__name a:focus-visible { color: var(--accent); }
.bcard__price { margin: 6.8px 0 0; color: var(--ink); font-weight: 300; font-size: 12px; line-height: 18px; }
.bcard__add {                                       /* Frame 5 @954 — 75x24 r40 */
  margin-top: 10.61px; width: 75px; height: 24px; border-radius: 40px;
  border: 1px solid var(--sand); color: var(--accent); text-transform: uppercase;
  font-weight: 500; font-size: 12px; line-height: 15.6px;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out),
    color var(--t-tint) var(--ease-out);
}
.bcard__add:hover, .bcard__add:focus-visible { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); }   /* ASSETS 452:4469 */
.bcard__add--soldout {                              /* P-01: the 377:6865 status red, as a link */
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 75px;
  padding: 0 8px; color: var(--danger);
}

/* ---- The highlights band — client request 2026-11-04 (design/DEVIATIONS.md, no comp) ----
   The header's own ink + cream, three centred columns in flow (maude reference): each column's
   first line 16 w400, the rest 14 w300. Fewer columns stay centred; a long line wraps and grows
   the band. */
.pdp-highlights { background: var(--ink); color: var(--cream); }
.pdp-highlights__cols {
  display: flex; justify-content: center; gap: 48px; padding-block: 64px; text-align: center;
}
.pdp-highlights__col { flex: 1 1 0; min-width: 0; }
.pdp-highlights__col > p { margin: 0; overflow-wrap: anywhere; }
.pdp-highlights__title { font-weight: 400; font-size: 16px; line-height: 22px; }
.pdp-highlights__body { margin-top: 8px; font-weight: 300; font-size: 14px; line-height: 20px; }

/* ---- Gift sets: „Rinkinio sudėtis“ (client request 2026-10-28/29, no comp —
   design/DEVIATIONS.md). A band in flow under the hero: up to three items a row, each the
   card photo beside brand / name / qty and, for an item the buyer picks, the PDP's own dots or
   pills. The picked option is the CHECKED radio (no JS drives these), so `.is-active` — the
   server's first in-stock pick — only paints while it is still the checked one. ---- */
.pdp-set { padding: 72px 0 96px; }
.pdp-set__title { color: var(--accent); }
.pdp-set__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.pdp-set__item { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.pdp-set__photo { flex: none; width: 73px; height: 81px; object-fit: cover; background: var(--shell); }
.pdp-set__text { flex: 1 1 auto; min-width: 0; }
.pdp-set__text > p { margin: 0; overflow-wrap: anywhere; }
.pdp-set__text > p + p { margin-top: 4px; }
.pdp-set__brand {                                   /* .pdp__brand's 14/18.2 w600 UPPER accent */
  text-transform: uppercase; color: var(--accent); font-weight: 600; font-size: 14px; line-height: 18.2px;
}
.pdp-set__name { color: var(--ink); font-weight: 400; font-size: 16px; line-height: 20.8px; }
.pdp-set__name a { color: inherit; transition: color var(--t-tint) var(--ease-out); }
.pdp-set__name a:hover, .pdp-set__name a:focus-visible { color: var(--accent); }
.pdp-set__qty { color: var(--muted); font-weight: 400; font-size: 12px; line-height: 15.6px; }
.pdp-set__choice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; }
.pdp-set__picked { color: var(--ink); font-weight: 400; font-size: 14px; line-height: 18.2px; }
.pdp-set .pdp__sizes { flex-wrap: wrap; max-width: none; overflow: visible; }
.pdp-set .pdp__swatch { position: relative; }
.pdp-set .pdp__swatch.is-active:not(:has(input:checked)) > span:first-of-type {
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 0 var(--cream);
}
.pdp-set .pdp__swatch:has(input:checked) > span:first-of-type {
  border: 3px solid var(--accent); box-shadow: inset 0 0 0 2px var(--cream);
}
.pdp-set .pdp__swatch:has(:focus-visible) > span:first-of-type { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp-set .pdp__size.is-active:not(:has(input:checked)) > span:first-of-type {
  background: transparent; border-color: var(--sand); color: var(--ink);
}
.pdp-set .pdp__size:has(input:checked) > span:first-of-type {
  background: var(--accent); border-color: var(--accent); color: var(--cream);
}

/* ---- Group 5298 @295,1494 tabs + description @294,1553, shot 558x527 @876 ---- */
.pdp-about { position: relative; height: 730px; }   /* 1374 -> 2104 */
.pdp-about .container { position: relative; height: 100%; }
.pdp-about__tabs { position: absolute; top: 116.21px; left: 1px; display: flex; gap: 64px; }
.pdp-tab {
  padding: 0 0 1px; text-transform: uppercase; color: var(--muted);
  font-weight: 300; font-size: 16px; line-height: 20.8px; letter-spacing: 1.6px;
  white-space: nowrap;   /* V8: EN „About the product” has ~3px slack at 360 — a zoom wrapped it */
  border-bottom: 1px solid transparent;
  transition: color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.pdp-tab:hover, .pdp-tab:focus-visible { color: var(--accent); }
.pdp-tab.is-active { color: var(--accent); font-weight: 400; border-color: var(--accent); }
.pdp-about__title { position: absolute; top: 170.41px; left: 0; color: var(--accent); }   /* @294,1553 — 159:1876 #8b6355 */
.pdp-about__text, .pdp-spec {                                       /* @295,1615 — 460 wide */
  position: absolute; top: 235.8px; left: 1px; width: 460px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 14px; line-height: 20px;
}
.pdp-about__text p + p { margin-top: 20px; }
/* an editor image (PH-14): the copy sits in a fixed panel above / beside the slider, so a photo
   never grows past 200px — a portrait one cannot push the text into the slider */
.pdp-about__text img { display: block; max-width: 100%; width: auto; height: auto; max-height: 200px; }
.pdp-spec div { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--shell); }
.pdp-spec dt { width: 160px; color: var(--accent); }
.pdp-spec dd { margin: 0; }
.pdp-about__photo {                                 /* Rectangle 2956 @876,1553 — one photo */
  position: absolute; top: 179px; left: 582px; width: 558px; height: 527px; overflow: hidden;
}
.pdp-about__shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Rectangle 9 @0,2224 — 1728x880 full bleed ---- */
.pdp-wide { margin: 120px 0 0; overflow: hidden; }   /* the parallax moves the photo, never the band */
/* client request 2026-11-04: 400 tall on the 1728 canvas, not the comp's 880 (DEVIATIONS) */
.pdp-wide img { display: block; width: 100%; height: 400px; object-fit: cover; }

/* ---- The second banner — client round 2026-11-04 (DEVIATIONS, no comp): its own aspect
   ratio, at most 800 tall on the 1728 canvas ---- */
.pdp-banner2 { margin: 0; overflow: hidden; }
.pdp-banner2__img { display: block; width: 100%; height: auto; max-height: 800px; object-fit: cover; }

/* ---- Group 5490 @294,3224 — the home page's collection component ---- */
.collections.related { padding-bottom: 120px; }     /* dots end 3863 -> band 3983 */
/* Comment 27: home.css sizes each tab to the HOME comp's label (Madam 65, Karšta 65 …); our
   labels are the collection names, so those fixed widths squeezed or padded them and the 40px
   rhythm (294/399/504/595/750 — 40 between labels) broke. Each tab is its own label here. */
.collections.related .tabs .tab { width: auto; }

/* ---- Group 5375 @0,3983 — 1728x686 editorial band ---- */
.pdp-editorial { position: relative; height: 686px; background: var(--shell); }
.pdp-editorial__shot { position: absolute; left: 0; top: 0; width: 864px; height: 686px; object-fit: cover; }
.pdp-editorial__copy { position: absolute; left: 973px; top: 0; width: 461px; }
.pdp-editorial__copy h2 { position: absolute; top: 152.43px; width: 461px; margin: 0; color: var(--accent); }
.pdp-editorial__copy p {
  position: absolute; top: 293.22px; width: 461px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 16px; line-height: 24px;
}

/* ---- Group 5517 @488,4789 — FAQ, first row open ---- */
.pdp-faq { padding: 111.43px 0 116.25px; }
.pdp-faq__title { width: 752px; margin: 0 auto; color: var(--accent); }
.pdp-faq__list { width: 752px; margin: 0.13px auto 0; }    /* row 1 box top 4818.7 */
.acc { border-bottom: 1px solid var(--shell); }
.acc__head {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24.38px 0 28.5px; text-align: left; color: var(--accent);
  font-weight: 300; font-size: 18px; line-height: 23.4px;
  transition: color var(--t-tint) var(--ease-out);
}
.acc__head:hover, .acc__head:focus-visible { color: var(--ink); }
.acc__head span { width: 678px; }
.acc__head img {
  width: 15px; height: 9px; margin-top: 6.9px; flex: none;     /* chevron ink 14x7 @1226,+3 */
  transition: transform var(--t-move) var(--ease-out);
}
.acc.is-open .acc__head { padding-bottom: 0; }
.acc.is-open .acc__head img { transform: rotate(180deg); }
.acc__body { overflow: hidden; height: 0; transition: height var(--t-move) var(--ease-out); }
.acc.is-open .acc__body { height: auto; }
.acc__body p {
  margin: 0; padding: 13.19px 0 28.34px; width: 750px; color: var(--ink);
  font-weight: 300; font-size: 16px; line-height: 24px;
}
.acc:last-child { padding-bottom: 13.4px; }         /* the comp's last divider sits 13px lower */

/* ---- Mobile — frame `Kortele - mobile` (345:1475), canvas 360, gutter 16, header 141 ---- */
@media (max-width: 767px) {
  .pdp { display: flex; flex-direction: column; height: auto; margin-top: 0; }
  .pdp__gallery { position: relative; top: auto; order: 1; width: 100%; height: 427px; }
  .pdp__badge { right: 24px; top: 24px; }                    /* right edge @336,165 */
  .pdp__discount {                                    /* Frame 80 @290,197 — mobile only */
  position: absolute; left: 290px; top: 56px; width: 46px; height: 24px;
  display: flex; align-items: center; justify-content: flex-end; padding: 8px;
  background: var(--danger); color: var(--cream); border-radius: 8px;
  font-weight: 500; font-size: 12px; line-height: 15.6px; letter-spacing: .6px;
}
  /* V16: Frame 80 is stacked under Frame 67 (pitch 32); with no badge it takes the badge's
     own row instead of floating under an empty one (design/DEVIATIONS.md) */
  .pdp__stage + .pdp__discount { top: 24px; }
  /* Frame 7 @16 + Group 5261 @54.372,509 + Frame 6 @318.243 — the same centred row, 12.615
     between arrow and strip, six 38.372x42.577 thumbs on a 42.577 pitch (251.256) */
  .pdp__nav { top: 368px; bottom: auto; align-items: flex-start; gap: 12.615px; }
  .pdp__thumbs { max-width: 251.256px; gap: 4.205px; }
  .pdp__thumb { width: 38.372px; height: 42.577px; }
  .pdp__arrow {                                       /* 25.756x26.282 @516.885 */
    margin: 7.885px 0 0; width: 25.756px; height: 26.282px; border-radius: 17px;
  }
  /* Vector 42 345:1669/345:1667 — 3.68x7.36 path + .54 stroke, not the 7x14 desktop pair */
  .pdp__arrow img { width: 5px; height: 8px; }
  .pdp__arrow--prev img { content: url("../img/icons/icon-chevron-left-cream-mobile.svg"); }
  .pdp__arrow--next img { content: url("../img/icons/icon-chevron-right-cream-mobile.svg"); }

  .crumbs { position: static; order: 2; padding: 0; margin-top: 9.5px; }       /* @18,577.5 — 10/13 */
  .crumbs__inner { width: var(--container); padding-left: 2px; height: 13px; gap: 16px; font-size: 10px; line-height: 13px; }
  /* Vector 3 345:1486 is the same 3.5x7 node as desktop — its 5x8 export stands */

  .pdp__info {                                               /* title line top 605.87 */
    /* `flow-root` + `min-height`, not a fixed `height`: a bundle taller than the comp's demo
       cards (real client copy wraps to its full 2 lines + a wrapped price) must grow the
       column instead of running past it — flow-root keeps `.bundle`'s margin-top from
       collapsing out through this box, so the growth actually counts (see quirk on `.bundle`). */
    position: relative; order: 3; left: auto; top: auto;
    width: var(--container); margin: 15.37px auto 0;
  }
  .pdp__brand { font-weight: 500; margin-top: 6.7px; }     /* the 360 comp: title line box 5.52 + 41.7, brand 53.92 */
  .pdp__lead { font-size: 12px; line-height: 18px; }   /* 345:1491 — 12/18 w300 */
  .pdp__volume { margin-top: 16.5px; }                       /* the 360 price → lead ink gap */
  .pdp__chips { margin-left: 13px; grid-template-columns: 168px 1fr; row-gap: 6px; }
  .pdp__chips li { width: 126px; }                          /* 347:2168/2175/2172/2178 — 126 text boxes */
  .pdp__opt--colour .pdp__opt-label { margin-top: 2.79px; }
  .pdp__sizes { max-width: 260px; }                         /* the 328 CTA row minus the 68 label column */
  /* The comp's own 202px pill: one line at the comp's 14px, EN included (`Add to cart • €49.99`
     is 159px). `nowrap` keeps a longer admin-edited label out of the 47px pill's second line. */
  .pdp__add { white-space: nowrap; }
  /* `flow-root` keeps `.bundle__track`'s own margin-top from collapsing out through the band */
  .bundle { display: flow-root; width: 100%; }               /* Group 5456 */
  /* „Rekomenduojamos alternatyvos“ (2026-10-28) is 279 wide at ls 1.4 and ran 5px into the
     prev arrow @290; ls .6 ends it at ~273 */
  .bundle__title { top: -9.82px; letter-spacing: .6px; }
  /* Group 5334 345:1594 (default, 23px export framed to 24 at -1) / Group 5456 345:1591 (hover — the
     ink chevron), 22px circles @290 / @322 */
  .bundle__arrow { width: 22px; height: 22px; }
  .bundle__ico { width: 24px; height: 24px; content: url("../img/icons/bundle-arrow-default-mobile.svg"); }
  .bundle__ico--hover { width: 22px; height: 22px; content: url("../img/icons/bundle-arrow-hover-mobile.svg"); }
  .bundle__nav { gap: 10px; }
  .bundle__track { margin-top: 40px; margin-left: -2px; gap: 12px; overflow-x: auto; }

  /* 2026-11-04 (Laura): the same in-flow rhythm at 360, G = 20 */
  .pdp__info { --g: 20px; }
  .pdp__title { margin-top: 5.52px; }

  /* gift sets: one column on the 328 container; the dots and pills get unpainted 40px tap boxes */
  .pdp-set { margin-top: 40px; padding: 0 0 48px; }
  .pdp-set .pdp-set__title { font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px; }
  .pdp-set__list { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  .pdp-set .pdp__swatches { gap: 16px; }
  .pdp-set .pdp__swatch::before { content: ""; position: absolute; inset: -8px; }
  .pdp-set .pdp__size::before { content: ""; position: absolute; inset: -3px 0; }
  .pdp-set + .pdp-highlights { margin-top: 0; }

  .pdp-highlights { margin-top: 40px; }                      /* Rectangle 7 @1513 */
  /* stacked, centred (2026-11-04) */
  .pdp-highlights__cols { flex-direction: column; gap: 24px; padding-block: 40px; }

  .pdp-about { height: 944px; }                              /* 1812 -> 2756 */
  .pdp-about__tabs { top: 35.81px; left: 5px; gap: 41px; }   /* @21,1852 — 14/18.2 ls1.4 */
  /* Vector 46 @1870 — the underline's centre 18 below the label's cap top (1852) */
  .pdp-tab { padding-bottom: 3.5px; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; }
  /* `.pdp-about` scope: mobile.css's `.t-section` (18px) loads after this sheet and won on equal
     specificity — 345:1697 is 24/31.2 ls2.4 in a fixed 328 box */
  .pdp-about .pdp-about__title { top: 90.82px; width: 100%; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px; }
  .pdp-about__text, .pdp-spec { top: 134.42px; left: 0; width: 100%; font-size: 12px; line-height: 18px; }   /* @16,1951 — 345:1698 12/18 */
  .pdp-about__photo { top: 583px; left: 0; width: 100%; height: 311px; }  /* @16,2395 */

  .pdp-wide { margin-top: 14px; }                            /* @0,2770 */
  .pdp-wide img { height: 160px; }                           /* 400 × 360/1728 ≈ 83, kept readable */
  .pdp-banner2__img { max-height: 333px; }

  .collections.related { padding-bottom: 24px; }
  .collections.related .dots { margin-left: 0; }   /* Group 5478 @16,3671 — at the gutter */
  .pdp-editorial { height: 699px; }                        /* right under the banner (2026-11-04) */                          /* image 286 + band 413 */
  .pdp-editorial__shot { position: relative; width: 100%; height: 286px; }
  .pdp-editorial__copy {
    position: absolute; left: 0; top: 286px; width: 100%; height: 413px;
    background: var(--shell);
  }
  .pdp-editorial__copy h2 {                                  /* @17,4045 */
    top: 32.8px; left: 17px; width: 327px; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
  }
  .pdp-editorial__copy p {                                   /* @17,4148 */
    top: 137.8px; left: 17px; width: 327px; font-size: 14px; line-height: 20px;   /* 345:1634 — 14/20 */
    /* the comp's own copy is 12 lines at 327px, cap foot 40 above the band's foot */
    display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden;
  }

  .pdp-faq { padding: 32.81px 16px 40px 17px; }              /* Group 5502 @17,4458 — 327 wide */
  .pdp-faq .pdp-faq__title { width: 327px; font-size: 24px; line-height: 31px; letter-spacing: 2.4px; }   /* 345:1637 — 24/31, same `.t-section` override */
  /* Group 5502: Q cap top 24 below the heading's cap foot (4506 -> 4530), rules on an 80 pitch
     (Vector 48/53/54/55 @4745/4825/4905/4985) — 24 from the rule to a question's cap top, 24 from
     its cap foot to the next rule. The OPEN row draws a rule under its question (Vector 47 @4586.5)
     and the answer at 14/20 (345:1644, cap top @4611); that rule is the answer's own top border,
     so it arrives with the body's height animation and the head keeps one padding in both states. */
  .pdp-faq__list { width: 100%; }
  .pdp-faq .acc__head, .pdp-faq .acc.is-open .acc__head {   /* 345:1643 — 16/20.832 w300 */
    padding: 19.7px 0 17.9px; gap: 12px; font-size: 16px; line-height: 20.832px;
  }
  /* row 1 has no rule above: it starts on the heading's line-box foot (4512.8), 6.3 less padding */
  .pdp-faq .acc:first-child .acc__head { padding-top: 13.4px; }
  .acc__head span { width: 295px; }
  .pdp-faq .acc__body p {
    width: 100%; padding: 18.8px 0 18.7px; border-top: 1px solid var(--shell);
    font-size: 14px; line-height: 20px;
  }
  .pdp-faq .acc:last-child { padding-bottom: 0; }            /* Vector 55 keeps the 80 pitch */

  /* Tap targets: the comp's painted sizes stay; an invisible ::before grows each hit box to
     >= 40 without reaching a neighbour */
  .pdp-tab, .pdp__arrow { position: relative; }
  .bundle__arrow::before, .pdp-tab::before, .pdp__arrow::before {
    content: ""; position: absolute;
  }
  .bundle__arrow--prev::before { inset: -9px -5px -9px -13px; }       /* split at the 10px gap */
  .bundle__arrow--next::before { inset: -9px -13px -9px -5px; }
  .pdp-tab::before { inset: -8.65px 0; }
  .pdp__arrow--prev::before { inset: -8px -6.3px -8px -9px; }         /* 6.3 = half the 12.615 gap */
  .pdp__arrow--next::before { inset: -8px -9px -8px -6.3px; }
}

/* ---- `Stikcy apačioj` 341:2991 — 360x39 #403632, label 341:2992 14/18.2 w500 UPPER #f5f0e8
   centred (the CTA's own string, so the CTA's 6px-gap spans). Fixed to the viewport bottom —
   „apačioj“; no frame places it, and no desktop frame draws it, so it lives ≤767px only and
   with JS only (motion.js shows it). Stacking: above the page (z 30), under the overlays and
   the compare strip (z 40), the header (50) and both drawers (100/120); with the compare
   strip up it rides on top of it instead of covering it. ---- */
.pdp-sticky { display: none; }
@media (max-width: 767px) {
  .js .pdp-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    opacity: 0; transform: translateY(12px); visibility: hidden;
    transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out),
                visibility 0s linear var(--t-move);
  }
  .js .pdp-sticky.is-shown {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out),
                visibility 0s linear 0s;
  }
  body:has(.cmpbar-mount:not([hidden]) .cmpbar) .pdp-sticky { bottom: 150px; }
  /* the page reserves the bar's 39 under the footer, the way compare.css reserves its 150 */
  body.js:has(.pdp-sticky) { padding-bottom: 39px; }
  body.js:has(.pdp-sticky):has(.cmpbar-mount:not([hidden]) .cmpbar) { padding-bottom: 189px; }
  .pdp-sticky__btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 39px; padding: 1px 24px 0; border: 0; border-radius: 0;
    background: #403632; color: var(--cream); cursor: pointer;
    text-transform: uppercase; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 18.2px;
    white-space: nowrap; transition: background-color var(--t-tint) var(--ease-out);
  }
  /* the bar rests on #403632, the ASSETS dark-pill HOVER colour, so its hover goes the other way:
     to the pill's resting ink */
  .pdp-sticky__btn:hover, .pdp-sticky__btn:focus-visible { background: var(--ink); }
}

/* Above the mobile frame there is only the 1728 canvas — the shell scales it (mobile.css). */
@media (min-width: 768px) {
  .pdp__discount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp__shot, .pdp__thumb, .pdp__swatch > span:first-of-type, .pdp__add, .acc__body,
  .acc__head img, .bundle__ico { transition: none; }
}