/* ==========================================================================
   CASEKING — PRODUCT DETAIL PAGE
   --------------------------------------------------------------------------
   The whole PDP lives here: buy area (gallery + buying panel), trust strip,
   product information tabs, the dormant bundle slot, related products and the
   closing banner. It was scattered through ck-system.css section 6; keeping it
   in one file means the page that GPT restyles next has one place to work.

   Loaded by index.html only, LAST (after ck-system.css and
   ck-product-card.css). Related products are rendered with the shared card
   from ck-product-card.css - this file must never grow a card of its own.

   Layout intent, top to bottom, in the order a shopper actually decides:
     what is it → does it fit my phone → can I get it → what does it cost →
     buy it → what backs the purchase → the long-form detail → what else.

   Tokens are read from ck-system.css with literal fallbacks, so the file stays
   readable on its own.
   ========================================================================== */

:root {
  --pdp-ink:      var(--k-ink, #161A1B);
  --pdp-ink-2:    var(--k-ink-2, #5A615F);
  --pdp-ink-3:    var(--k-ink-3, #6B7371);
  --pdp-gold:     var(--k-gold, #86692F);
  --pdp-gold-2:   var(--k-gold-2, #C8A86E);
  --pdp-gold-3:   var(--k-gold-3, #DCC596);
  --pdp-champagne:var(--k-champagne, #EFE6D4);
  --pdp-surface:  var(--k-surface, #ffffff);
  /* Page and quiet-panel neutrals. These deliberately do NOT inherit --k-ivory
     / --k-surface-2: those sit at ~54% HSL saturation on a 40 degree amber hue,
     and against the pure-white panels and product photos they frame, that much
     yellow reads as khaki rather than ivory. Same warm family and hue, roughly
     a third less chroma - still warm and premium, no longer muddy. */
  --pdp-surface-2:#f8f5f0;
  --pdp-ivory:    #faf8f4;
  --pdp-line:     var(--k-line, rgba(18, 62, 68, .17));
  --pdp-line-2:   var(--k-line-2, rgba(18, 62, 68, .09));
  --pdp-r:        var(--k-r, 14px);
  --pdp-r-sm:     var(--k-r-sm, 9px);
  --pdp-r-lg:     var(--k-r-lg, 20px);
  --pdp-r-pill:   var(--k-r-pill, 999px);
  --pdp-font:     var(--k-font, 'Inter', system-ui, -apple-system, sans-serif);
  --pdp-sh-1:     var(--k-sh-1, 0 1px 2px rgba(11,43,48,.05), 0 6px 16px rgba(11,43,48,.06));
  --pdp-sh-2:     var(--k-sh-2, 0 2px 4px rgba(11,43,48,.06), 0 18px 44px rgba(11,43,48,.10));

  /* The floating header measures 161px on desktop (announcement island +
     topline). The buy panel sticks below it with a 17px breather - change this
     one value if the header's height ever changes. */
  --pdp-sticky-top: 178px;
}

.product-page-section {
  background: var(--pdp-ivory) !important;
  padding: 22px 0 clamp(40px, 4.6vw, 74px) !important;
}

/* --- Back link ----------------------------------------------------------- */
.pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pdp-ink-3) !important;
  font-family: var(--pdp-font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, gap .18s ease;
}
.pdp-back:hover { color: var(--pdp-gold) !important; gap: 12px; }

/* ==========================================================================
   1. BUY AREA — gallery dominant, buying panel beside it
   ========================================================================== */

.pdp-buy {
  display: grid;
  /* ~58% gallery / ~42% panel: the photograph is the page. */
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}

/* Desktop: the gallery well stretches to the panel's height so both columns
   end on the same line and read as one composition rather than two cards that
   happen to sit next to each other. The photo stays contained and centred, so
   the added height becomes deliberate whitespace, not dead space. */
@media (min-width: 1101px) {
  .pdp-buy { align-items: stretch; }
  .pdp-stage { flex: 1 1 auto; }
}

/* --- Gallery ------------------------------------------------------------- */

.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.pdp-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(16px, 2vw, 26px);
  overflow: hidden;
  /* Near-white, not a cream gradient. The catalogue's photos are opaque JPEGs
     with their own white background, so a cream well framed every one of them
     as a visible off-white box - which reads as a muddied product shot. A
     near-white well lets the photo's own background blend with the surface. */
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}

/* --- gallery stage states (set by app.js: is-loading / is-ready / is-failed) */

/* While the CDN responds. Without this the well was simply blank, which is
   what a slow catalogue image looked like: a broken gallery. */
.pdp-stage.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .72) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: pdp-stage-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pdp-stage-shimmer {
  to { transform: translateX(100%); }
}

.pdp-stage-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.pdp-stage.is-failed .pdp-stage-img { display: none; }
.pdp-stage.is-failed .pdp-stage-fallback { display: flex; }
.pdp-stage-fallback img { width: 168px; height: auto; opacity: .5; }
.pdp-stage-fallback p { margin: 0; color: var(--pdp-ink-3); font-size: 13px; }
/* The navigation arrows control nothing when there is no image to page. */
.pdp-stage.is-failed .pdp-nav,
.pdp-stage.is-failed .pdp-stage-count { display: none !important; }
.pdp-stage-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No filter, deliberately. This used to carry
     `drop-shadow(0 18px 34px rgba(11, 43, 48, .13))` to "lift the cut-out off
     the surface" - but rgba(11,43,48) is a dark OLIVE-BROWN, and every product
     photo in this catalogue is an opaque JPEG with its own white background,
     so there is no cut-out to lift: the only thing the shadow could do was
     darken the well beneath each photo by ~10 levels in a khaki direction.
     Product imagery is now rendered exactly as the catalogue stores it:
     filter: none, mix-blend-mode: normal, opacity: 1. */
  filter: none;
}
/* Applied by updateProductPageImage() on every switch. */
.pdp-stage-img.is-swapping { animation: pdp-img-in .34s ease; }
@keyframes pdp-img-in {
  from { opacity: .4; transform: scale(.985); }
  to   { opacity: 1;  transform: none; }
}

.pdp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;               /* app.js switches this to flex when >1 image */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pdp-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--pdp-ink);
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--pdp-sh-1);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
  z-index: 2;
}
.pdp-nav-prev { left: 16px; }
.pdp-nav-next { right: 16px; }
.pdp-nav:hover { color: var(--pdp-gold); border-color: var(--pdp-gold-2); background: #fff; }
/* The site-wide "button:active { transform: scale(.97) }" replaced the
   translateY(-50%) that centres the arrow, so on a tap the arrow dropped half
   its height, the finger was no longer on it when lifted, and the tap was
   lost (owner, 2026-10-06: "4 taps for one image"). Keep the centring. */
.pdp-nav:active { transform: translateY(-50%) scale(.94); }
.pdp-nav { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.pdp-stage-count {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 5px 11px;
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--pdp-ink-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Single-image products never render this rail at all. */
.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pdp-thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  padding: 8px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-sm);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pdp-thumb:hover { border-color: var(--pdp-gold-2); }
.pdp-thumb.is-active {
  border-color: var(--pdp-gold);
  box-shadow: 0 0 0 1px var(--pdp-gold);
}

/* --- Buying panel -------------------------------------------------------- */

.pdp-panel { min-width: 0; }

.pdp-panel-inner {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}

/* Restrained sticky: only where there is comfortably enough vertical room for
   the panel to fit under the header. On short viewports it simply scrolls. */
@media (min-width: 1024px) and (min-height: 820px) {
  .pdp-panel {
    position: sticky;
    top: var(--pdp-sticky-top);
    z-index: 3;               /* stays under the header's z-index: 250 */
  }
}

/* Brand as a quiet eyebrow - secondary to the title, not a badge. */
.pdp-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--pdp-gold) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The full product name, never truncated - card clamp rules do not apply. */
.pdp-title {
  margin: 0 0 18px !important;
  max-width: 32ch;
  color: var(--pdp-ink) !important;
  font-family: var(--pdp-font);
  font-size: clamp(28px, 2.5vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -.028em !important;
  text-wrap: pretty;
}
/* styles.css still carries `#product-page-title { font-size: 1.5rem !important }`
   (2.25rem inside a media query). An ID selector out-ranks this sheet's class
   selectors even when both are !important, so every title size set above was
   being silently discarded - desktop only looked correct because 2.25rem and
   that clamp happen to agree at 1440px. Restated with the matching ID so the
   PDP sheet genuinely owns its own heading. */
#product-page-title {
  font-size: clamp(28px, 2.5vw, 38px) !important;
}

/* Compatibility. The single biggest purchase risk on this site, so it reads as
   its own statement rather than a row in the attribute list. */
/* A confidence chip, not a boxed paragraph: device icon, brand, model, check.
   It used to be a tall tinted block holding three short lines, which spent a
   lot of the panel on very little and read as dead space. */
.pdp-compat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 13px 15px;
  background: var(--pdp-champagne);
  border: 1px solid rgba(134, 105, 47, .22);
  border-radius: var(--pdp-r);
}
.pdp-compat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--pdp-r-sm);
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(134, 105, 47, .20);
  color: var(--pdp-gold);
  font-size: 17px;
}
.pdp-compat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdp-compat-label {
  color: var(--pdp-ink-3) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pdp-compat-brand {
  color: var(--pdp-ink-2) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.pdp-compat-value {
  color: var(--pdp-ink) !important;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.pdp-compat-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pdp-gold);
  color: #fff;
  font-size: 11px;
}
/* Future device-context state. app.js adds .is-match when the shopper's
   selected device matches this product. */
.pdp-compat.is-match { background: #eef5ea; border-color: rgba(93, 143, 73, .28); }
.pdp-compat.is-match .pdp-compat-check { background: #5d8f49; }

/* Factual sales points. Deliberately not boxed - the panel is already a card,
   and another rectangle inside it is exactly the nested-box look to avoid. */
/* Feature list: an icon tile per fact, not a bullet. Each row is a stated
   product property, so it gets the same visual weight as a spec - that is what
   stops the panel reading as plain stacked form rows. */
.pdp-points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.pdp-point { display: flex; align-items: center; gap: 13px; }
.pdp-point-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--pdp-surface-2);
  border: 1px solid var(--pdp-line-2);
  color: var(--pdp-gold);
  font-size: 17px;
}
.pdp-point-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp-point-title {
  color: var(--pdp-ink) !important;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}
.pdp-point-sub {
  color: var(--pdp-ink-3);
  font-size: 13px;
  line-height: 1.4;
}

/* Stock: stated calmly, no oversized green badge. */
.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  color: var(--pdp-ink-2) !important;
  font-size: 15px;
  font-weight: 600;
}
.pdp-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6da85c;
  box-shadow: 0 0 0 3px rgba(109, 168, 92, .15);
}

/* Price, on its own separated row. EUR only, always. */
.pdp-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pdp-line-2);
}
.pdp-price {
  color: var(--pdp-ink) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: -.03em;
}
.pdp-price-old {
  color: var(--pdp-ink-3) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}
/* Campaign and the lawful 30-day low (Omnibus), under the price. */
.pdp-price-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--pdp-ink-3) !important;
  font-size: 13px !important;
  line-height: 1.45;
}
.pdp-price-note[hidden] { display: none; }
.pdp-price-campaign {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 9px;
  border: 1px solid rgba(134, 105, 47, .25);
  border-radius: var(--pdp-r-pill);
  background: var(--pdp-champagne);
  color: var(--pdp-gold) !important;
  font-weight: 700;
}
.pdp-b2b-badge {
  display: none;
  padding: 4px 9px;
  border: 1px solid rgba(134, 105, 47, .25);
  border-radius: var(--pdp-r-pill);
  background: var(--pdp-champagne);
  color: var(--pdp-gold) !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Calm label / value rows - not a dense table, not a boxed form. */
/* Secondary detail, last in the panel and deliberately quiet. */
.pdp-attrs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  margin: 16px 0 0;
  border-top: 1px solid var(--pdp-line-2);
}
.pdp-attrs dt,
.pdp-attrs dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--pdp-line-2);
  font-size: 14.5px;
  line-height: 1.5;
}
/* Secondary facts sit below the purchase decision, so they stay quiet: the
   value is readable but deliberately NOT as heavy as the price or the points
   above it, otherwise the panel has three things shouting at once. */
.pdp-attrs dt { color: var(--pdp-ink-3) !important; font-weight: 500; font-size: 14px; }
.pdp-attrs dd { color: var(--pdp-ink-2) !important; font-weight: 600; font-size: 14px; text-align: right; }

/* --- Purchase actions ---------------------------------------------------- */

.pdp-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

.pdp-qty {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-r-sm);
  background: var(--pdp-surface);
}
.pdp-qty-btn {
  width: 44px;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--pdp-ink-2);
  font-family: var(--pdp-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pdp-qty-btn:hover { background: var(--pdp-champagne); color: var(--pdp-ink); }
.pdp-qty-btn:active { background: #ece0c9; }
.pdp-qty-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  color: var(--pdp-ink);
  font-size: 16px;
  font-weight: 700;
}

/* The primary action of the page. Gold stays the store's one action colour;
   only the proportion and weight are set here. */
.pdp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 17px 28px;
  border: 0;
  border-radius: var(--pdp-r-sm);
  background: linear-gradient(180deg, var(--pdp-gold-3), var(--pdp-gold-2) 46%, var(--pdp-gold));
  color: #0B2B30 !important;
  font-family: var(--pdp-font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(134, 105, 47, .20), inset 0 1px 0 rgba(255, 255, 255, .40);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.pdp-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 30px rgba(134, 105, 47, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pdp-cta:active { transform: translateY(0) scale(.99); }
.pdp-cta:focus-visible { outline: 2px solid var(--pdp-gold-2); outline-offset: 2px; }
/* In-flight state, toggled by app.js while addToCart() runs. */
.pdp-cta.is-loading { pointer-events: none; filter: saturate(.6) brightness(.99); }
.pdp-cta.is-loading .pdp-cta-label { opacity: .6; }
/* Success state. Defined, deliberately not wired: addToCart() reports no
   success signal, so the PDP cannot honestly claim an item was added. This is
   the hook for the future floating cart. */
.pdp-cta.is-done {
  background: linear-gradient(180deg, #86b871, #5d8f49) !important;
  color: #101a0b !important;
  box-shadow: 0 8px 20px rgba(93, 143, 73, .26);
}

/* Compact reassurance. The full benefits island stays in the header. */
.pdp-reassure {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--pdp-line-2);
  list-style: none;
}
.pdp-reassure li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--pdp-ink-2);
  font-size: 14.5px;
  font-weight: 500;
}
.pdp-reassure i { width: 17px; color: var(--pdp-gold); font-size: 14px; text-align: center; }

/* ==========================================================================
   2. TRUST STRIP — one band, not four floating boxes
   ========================================================================== */

.pdp-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(30px, 3.6vw, 54px);
  overflow: hidden;
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  border-left: 1px solid var(--pdp-line-2);
}
.pdp-trust-item:first-child { border-left: 0; }
.pdp-trust-item i {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pdp-champagne);
  border: 1px solid rgba(134, 105, 47, .18);
  color: var(--pdp-gold);
  font-size: 20px;
}
.pdp-trust-item strong { display: block; color: var(--pdp-ink) !important; font-size: 15px; font-weight: 700; }
.pdp-trust-item span { display: block; color: var(--pdp-ink-3) !important; font-size: 13.5px; line-height: 1.45; }

/* ==========================================================================
   3. PRODUCT INFORMATION — tabs with a quiet underline, not pill boxes
   ========================================================================== */

.pdp-info {
  margin-top: clamp(32px, 3.8vw, 58px);
  overflow: hidden;
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}

.pdp-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 14px 0;
  overflow-x: auto;
  background: var(--pdp-surface-2);
  border-bottom: 1px solid var(--pdp-line-2);
  scrollbar-width: none;
}
.pdp-tabs::-webkit-scrollbar { display: none; }

.ck-pdp-tab {
  position: relative;
  padding: 15px 18px 17px;
  border: 0;
  background: transparent;
  color: var(--pdp-ink-3) !important;
  font-family: var(--pdp-font);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}
.ck-pdp-tab:hover { color: var(--pdp-ink) !important; }
.ck-pdp-tab.active { color: var(--pdp-ink) !important; }
.ck-pdp-tab.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--pdp-gold);
}

/* Editorial story slots for the later visual pass. app.js only fills this when
   the catalogue really holds the media, so it is inert rather than decorative.
   Each .pdp-story-block is an image + copy pair: feature, lifestyle, materials,
   close-up detail. */
.pdp-story {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(24px, 3vw, 42px);
  border-top: 1px solid var(--pdp-line-2);
}
.pdp-story-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
}
.pdp-story-block:nth-child(even) .pdp-story-media { order: 2; }
.pdp-story-media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pdp-surface-2);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r);
}
.pdp-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-story-copy h3 {
  margin: 0 0 10px;
  color: var(--pdp-ink) !important;
  font-family: var(--pdp-font);
  font-size: clamp(18px, 1.9vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
}
.pdp-story-copy p { margin: 0; color: var(--pdp-ink-2); font-size: 14px; line-height: 1.75; }

.pdp-panels { padding: clamp(24px, 3vw, 42px); }
.ck-pdp-panel { display: none; color: var(--pdp-ink-2); font-size: 16.5px; line-height: 1.75; }
.ck-pdp-panel.active { display: block; animation: pdp-panel-in .24s ease; }
@keyframes pdp-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.ck-pdp-panel h3 {
  margin: 0 0 12px;
  color: var(--pdp-ink) !important;
  font-family: var(--pdp-font);
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: -.025em;
}

/* --- Описание: copy left, real product media right ---
   This catalogue's description field is empty on most products, so a single
   full-width column left the panel mostly blank. The two columns give the
   photograph the space it needs to carry the section. */
.ck-tab-desc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.ck-tab-desc.is-text-only { grid-template-columns: minmax(0, 1fr); }
.ck-tab-desc-copy { max-width: 62ch; }
.ck-tab-desc-body { max-width: 68ch; }
.ck-tab-desc-body p { margin: 0 0 14px; }
.ck-tab-desc-body p:last-child { margin-bottom: 0; }
.ck-tab-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ck-tab-subhead {
  margin: 24px 0 14px;
  color: var(--pdp-ink) !important;
  font-family: var(--pdp-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
}
.ck-tab-subhead + .ck-tab-checks { margin-top: 0; }
.ck-tab-checks-facts { margin-top: 18px; }
.ck-tab-checks li { display: flex; align-items: flex-start; gap: 11px; color: var(--pdp-ink-2); font-size: 16px; line-height: 1.55; }
.ck-tab-checks i { margin-top: 6px; color: var(--pdp-gold); font-size: 13px; }

.pdp-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pdp-gold) !important;
  font-family: var(--pdp-font);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: gap .18s ease;
}
.pdp-inline-link:hover { gap: 12px; }

/* Feature media sits under the copy in a row, capped so one image can never
   stretch across the whole panel. */
/* auto-fit, not auto-fill: a single real image should fill its column rather
   than sit at 190px with empty tracks beside it. */
.ck-tab-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.ck-tab-desc.is-text-only .ck-tab-feat-grid { max-width: 720px; margin-top: 26px; }
/* styles.css makes the first feature image span every column
   (.ck-tab-feat-grid .ck-tab-feat-img:first-child), which at this panel width
   blows one photo up to 740px. Restated here to win on specificity. */
.ck-tab-feat-grid .ck-tab-feat-img:first-child { grid-column: auto; }
/* Square frame, because every catalogue image is 1000x1000. A 4:3 frame
   letterboxed the product between two cream bands. The white background
   matches the photos' own canvas so any future non-square image blends
   instead of showing a tinted bar. */
.ck-tab-feat-img {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r);
}
/* contain, not cover. These frames hold the SAME square catalogue cut-outs the
   gallery shows - a 4:3 cover crop of a 1:1 product shot sliced the top and
   bottom off the product, which is what made the details section look like it
   was mishandling the imagery. */
.ck-tab-feat-img img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- Характеристики: label / value rows --- */
.ck-tab-spec-list {
  max-width: 720px;
  margin: 0;
  border-top: 1px solid var(--pdp-line-2);
}
.ck-tab-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pdp-line-2);
}
.ck-tab-spec-row { padding: 14px 0; }
.ck-tab-spec-row dt { margin: 0; color: var(--pdp-ink-3); font-size: 15.5px; font-weight: 600; }
.ck-tab-spec-row dd { margin: 0; color: var(--pdp-ink); font-size: 16px; font-weight: 700; }

/* --- Съвместимост --- */
.ck-tab-compat-lead { margin: 0 0 4px; color: var(--pdp-ink-3); font-size: 12.5px; }
.ck-tab-compat-device {
  margin: 0 0 18px;
  color: var(--pdp-ink) !important;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* --- Доставка и връщане --- */
.ck-tab-info { display: flex; flex-direction: column; gap: 13px; max-width: 760px; }
.ck-tab-info p { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.ck-tab-info p i { margin-top: 5px; width: 15px; color: var(--pdp-gold); font-size: 12px; text-align: center; }

/* ==========================================================================
   4. BUNDLE SLOT — dormant until real bundle data exists
   ========================================================================== */

.pdp-bundle {
  margin-top: clamp(32px, 3.8vw, 58px);
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--pdp-surface);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}
.pdp-bundle-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   5. SECTION HEADS + RELATED
   ========================================================================== */

.pdp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.pdp-section-kicker {
  margin: 0 0 7px;
  color: var(--pdp-gold) !important;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pdp-section-title {
  margin: 0 !important;
  color: var(--pdp-ink) !important;
  font-size: clamp(21px, 2.3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -.028em;
}

.pdp-related { margin-top: clamp(38px, 4.4vw, 68px); }

/* ==========================================================================
   6. CLOSING BANNER
   ========================================================================== */

.ck-pdp-banner {
  position: relative;
  overflow: hidden;
  margin-top: clamp(34px, 4vw, 58px);
  border: 1px solid var(--pdp-line-2);
  border-radius: var(--pdp-r-lg);
  box-shadow: var(--pdp-sh-1);
}
.ck-pdp-banner img { display: block; width: 100%; height: 240px; object-fit: cover; }
.ck-pdp-banner-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(18px, 2.4vw, 30px);
  background: linear-gradient(180deg, rgba(11, 43, 48, 0) 0%, rgba(11, 43, 48, .86) 100%);
}
.ck-pdp-banner-overlay h3 { margin: 0 0 6px; color: #fff !important; font-size: clamp(17px, 1.8vw, 23px); font-weight: 800; }
.ck-pdp-banner-overlay p { margin: 0 0 12px; color: rgba(255, 255, 255, .82); font-size: 12.5px; }

/* ==========================================================================
   7. RESPONSIVE
   Mobile order: gallery → title/compatibility/price → buy → reassurance →
   trust → details → related. The two-column buy area is never forced down.
   ========================================================================== */

@media (max-width: 1100px) {
  .pdp-buy { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pdp-title { max-width: none; }
  .pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Keep the band reading as one strip: re-draw the dividers for 2 columns. */
  .pdp-trust-item:nth-child(odd) { border-left: 0; }
  .pdp-trust-item:nth-child(n + 3) { border-top: 1px solid var(--pdp-line-2); }
}

@media (max-width: 760px) {
  .product-page-section { padding-top: 16px !important; }
  .pdp-stage { padding: 20px; border-radius: var(--pdp-r); }
  .pdp-nav { width: 38px; height: 38px; }
  .pdp-nav-prev { left: 10px; }
  .pdp-nav-next { right: 10px; }
  .pdp-thumb { width: 62px; height: 62px; padding: 6px; }
  .pdp-panel-inner { padding: 20px 18px; border-radius: var(--pdp-r); }
  .pdp-title,
  #product-page-title { font-size: 26px !important; }
  .pdp-price { font-size: 32px !important; }
  .pdp-point-title { font-size: 15px; }
  .ck-tab-checks li { font-size: 15px; }
  .pdp-actions { grid-template-columns: minmax(0, 1fr); }
  .pdp-qty { justify-content: space-between; }
  .pdp-qty-btn { flex: 1; min-height: 48px; }
  .pdp-cta { min-height: 50px; }
  .pdp-trust { grid-template-columns: minmax(0, 1fr); }
  .pdp-trust-item { padding: 16px 18px; }
  .pdp-trust-item:nth-child(odd) { border-left: 0; }
  .pdp-trust-item:nth-child(n + 2) { border-top: 1px solid var(--pdp-line-2); }
  .pdp-trust-item:nth-child(3) { border-top: 1px solid var(--pdp-line-2); }
  .pdp-panels { padding: 20px 18px 24px; }
  .ck-tab-desc { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ck-tab-desc-copy { max-width: none; }
  .pdp-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ck-tab-spec-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ck-tab-spec-row dd { margin-bottom: 6px; }
  .ck-pdp-banner img { height: 190px; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .pdp-stage-img.is-swapping, html.ck-calm .ck-pdp-panel.active { animation: none; }
  html.ck-calm .pdp-cta, html.ck-calm .pdp-back, html.ck-calm .pdp-inline-link { transition: none; }


/* A real reduction on the product page (owner, 2026-10-23): the percent beside
   the price in deep petrol, the saving in euro on its own line, then the lawful
   30-day note. */
.pdp-price-row.is-sale .pdp-price { color: #0B2B30 !important; }
.pdp-price-off {
  align-self: center;
  padding: 6px 12px 5px;
  border: 1px solid rgba(200, 168, 110, .55);
  border-radius: 999px;
  background: #0B2B30;
  color: #C8A86E !important;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pdp-price-off[hidden], .pdp-price-saving[hidden] { display: none; }
.pdp-price-saving {
  flex-basis: 100%;
  margin-top: 2px;
  line-height: 1;
}
.pdp-price-saving > span {
  display: inline-block;
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: rgba(184, 149, 90, .16);
  color: #86692F !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}