/** Shopify CDN: Minification failed

Line 3799:51 Unexpected "`"
Line 3799:84 Unterminated string token
Line 3812:80 Unterminated string token
Line 3813:82 Unterminated string token
Line 3818:58 Unterminated string token

**/
/* ============================================================
   Kitsters - Native Product Page Styles
   kitsters-product.css  |  Comic-pop redesign 2026-06-13
   ============================================================ */

/* ---------- Page layout ---------- */
.kp-page {
  /* mockup buy container: 1240px centered */
  max-width: 1240px;
  margin: 0 auto;
  /* top padding - the sticky header sits in normal flow (doesn't overlap),
     so this is breathing room only; matches the design system's section-pad scale */
  padding: 20px 16px 72px;
  /* NO overflow-x:hidden here - an ancestor with overflow clipping silently
     disables position:sticky on .kp-left-col (the mockup's pinned gallery).
     It was only needed for the old full-bleed negative-margin layout, which
     was removed with the 1240px container. */
}

/* ---------- Above-fold 2-col grid ---------- */
.kp-above-fold {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Buy column - mockup has no accent bar; plain column */
.kp-info { border-left: none; padding-left: 0; }

/* ============================================================
   GALLERY - comic border + press-down nav arrows
   ============================================================ */
.kp-gallery { position: relative; }

.kp-gallery__main {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  background: var(--color-grey-light);
  width: 100%;
  aspect-ratio: 1 / 1;
  /* belt-and-suspenders: prevent runaway height on very wide/tall viewports */
  max-height: min(560px, 75vh);
}
.kp-gallery__track {
  display: flex;
  transition: transform 0.35s ease;
  height: 100%;
}
.kp-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
}
.kp-gallery__slide img,
.kp-gallery__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
/* the whole hero card is click-to-zoom (arrows keep a pointer cursor below) */
.kp-gallery__main { cursor: zoom-in; }
.kp-gallery__btn { cursor: pointer; }

/* explicit "view full image" zoom button on the hero card */
.kp-gallery__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kp-gallery__zoom svg { width: 20px; height: 20px; }
.kp-gallery__zoom:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-black); }
.kp-gallery__zoom:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-black); }
.kp-gallery__zoom:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }

/* Hover zoom - desktop only */
@media (min-width: 1024px) {
  .kp-gallery__main:hover .kp-gallery__slide img {
    transform: scale(1.06);
  }
}

/* Arrow buttons - comic press-down */
.kp-gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kp-gallery__btn:hover {
  transform: translateY(-50%) translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-black);
}
.kp-gallery__btn--prev { left: 10px; }
.kp-gallery__btn--next { right: 10px; }
.kp-gallery__btn svg { width: 16px; height: 16px; }

/* Dot indicators */
.kp-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.kp-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d0d0;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.kp-gallery__dot.active {
  background: var(--color-indigo);
  transform: scale(1.3);
}

/* Thumbnail strip - always visible as horizontal scroll strip */
.kp-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.kp-gallery__thumbs::-webkit-scrollbar { display: none; }
.kp-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 2px 2px 0 transparent;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  background: var(--color-grey-light);
  padding: 0;
}
.kp-thumb.active {
  border-color: var(--color-indigo);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-thumb:hover:not(.active) {
  border-color: var(--color-black);
  transform: translate(1px, 1px);
}
.kp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hide dots when thumbs are showing */
.kp-gallery__dots { display: none; }

/* ---------- Badge row - Bestseller / eyebrow pills above title ---------- */
.kp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.kp-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 50px;
}
.kp-badge--yellow { background: var(--color-yellow); color: var(--color-black); }
.kp-badge--indigo-tint { background: rgba(70, 90, 230, 0.08); color: var(--color-indigo); }

/* ============================================================
   PRODUCT INFO COLUMN - consistent 16-20px stack rhythm
   ============================================================ */
.kp-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--color-black);
  margin: 0 0 12px;
}

/* Trustoo star rating (app block) */
.kp-stars {
  margin-bottom: 12px;
  min-height: 24px;
}

/* ---------- Countdown timer ---------- */
.kp-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-black);
  font-weight: 600;
}
.kp-countdown__label { flex-shrink: 0; }
.kp-countdown__timer {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-black);
}

/* ---------- Price ---------- */
.kp-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.kp-price__sale {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-pink);
}
.kp-price__compare {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--color-grey-mid);
  text-decoration: line-through;
}
.kp-price__badge {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 50px;
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-tax-line {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-grey-mid);
  margin-bottom: 16px;
}
.kp-tax-line a { color: var(--color-indigo); text-decoration: underline; }

/* ---------- Kit highlight pills - comic borders ---------- */
/* Tier 3 info chips (design system v2 §6.1/§7.8), NOT buttons.
   These are read-only facts about the kit, so they carry no border, no hard
   offset shadow and no press-down hover - that treatment is reserved for Tier 1
   (primary CTA, hero badges). Deliberately identical to the sitewide
   `.product__chip` atom in kitsters-shared.css, one step up in size for the PDP,
   so the same fact reads the same way on a card and here. */
.kp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.kp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-grey-light);
  border-radius: 50px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-black);
  font-weight: 600;
}
.kp-pill i {
  color: var(--color-indigo);
  font-style: normal;
  display: inline-flex;
  font-size: 1.05em;
}

/* ---------- Fun-fact callout ---------- */
.kp-fun-fact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.kp-fun-fact__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.kp-fun-fact__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-black);
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

/* ---------- Description ---------- */
.kp-description {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-black);
  margin-bottom: 20px;
}
.kp-description > *:first-child { margin-top: 0; }

/* ---------- Variant picker ---------- */
.kp-variants { margin-bottom: 16px; }
.kp-variants__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 8px;
  display: block;
}
.kp-variants__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kp-variant-pill {
  padding: 8px 18px;
  border: 2px solid #d0d0d0;
  border-radius: 50px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--color-black);
}
.kp-variant-pill:hover {
  border-color: var(--color-indigo);
  color: var(--color-indigo);
}
.kp-variant-pill.active {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  color: var(--color-white);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-variant-pill.unavailable {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
.kp-variant-pill--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  min-width: 92px;
}
.kp-variant-pill__label { font-weight: 800; font-size: 0.9375rem; }
.kp-variant-pill__price { font-size: 0.75rem; font-weight: 600; opacity: 0.7; }
.kp-variant-pill--stacked.active .kp-variant-pill__price { opacity: 0.85; }

/* Dropdown for >10 options */
.kp-variant-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-black);
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-white);
  color: var(--color-black);
  cursor: pointer;
  appearance: auto;
}
.kp-variant-select:focus { outline: 2px solid var(--color-indigo); outline-offset: 2px; }

/* ---------- Stock line - real inventory-driven 3-state ---------- */
.kp-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
}
.kp-stock[hidden] { display: none; }
.kp-stock strong { font-weight: 800; }
.kp-stock__icon { line-height: 1; }
.kp-stock--in { color: var(--color-success); }
.kp-stock--low { color: var(--color-error); }
.kp-stock--sold { color: var(--color-error); }

/* ---------- Quantity stepper ---------- */
.kp-qty {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  border: 2px solid var(--color-black);
  border-radius: 50px;
  overflow: hidden;
  width: fit-content;
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-qty__btn {
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  font-size: 1.25rem;
  font-family: var(--font-body);
  font-weight: 700;   /* §BTN-BOLD */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transition: background 0.15s;
}
.kp-qty__btn:hover { background: var(--color-grey-light); }
.kp-qty__input {
  width: 50px;
  text-align: center;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-black);
  background: transparent;
  -moz-appearance: textfield;
}
.kp-qty__input::-webkit-inner-spin-button,
.kp-qty__input::-webkit-outer-spin-button { appearance: none; }

/* ---------- Reviews near ATC (CRO lever #1) ---------- */
.kp-review-near-atc {
  background: var(--color-grey-light);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.kp-review-near-atc__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kp-review-near-atc__stars {
  color: #f4b400;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1;
}
.kp-review-near-atc__meta {
  font-size: 0.8125rem;
  color: #5c5c5c;
  font-weight: 600;
}
.kp-review-near-atc__quote {
  font-size: 0.875rem;
  color: var(--color-black);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 4px;
}
.kp-review-near-atc__author {
  font-size: 0.75rem;
  color: #5c5c5c;
  font-weight: 600;
}

/* ---------- CTA row - comic press-down 4px shadow ---------- */
.kp-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.kp-btn-atc,
.kp-btn-buy {
  height: 56px;
  border-radius: 50px;
  border: 2px solid var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
  width: 100%;
}
.kp-btn-atc {
  background: var(--color-indigo);
  color: var(--color-white);
  box-shadow: 4px 4px 0 var(--color-black);
}
.kp-btn-buy {
  background: var(--color-indigo);
  color: #fff;
  box-shadow: 4px 4px 0 var(--color-black);
}
.kp-btn-atc:hover,
.kp-btn-buy:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-btn-atc:active,
.kp-btn-buy:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-black);
}
.kp-btn-atc:disabled,
.kp-btn-buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 2px 2px 0 var(--color-black);
  transform: none;
}
.kp-btn-atc svg { width: 18px; height: 18px; fill: var(--color-white); }
.kp-btn-atc--added { background: var(--color-success); box-shadow: 4px 4px 0 var(--color-black); }

/* ---------- Corporate gifting hook ---------- */
.kp-corporate-hook {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(70, 90, 230, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  text-decoration: none;
  color: var(--color-indigo);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.kp-corporate-hook__icon { flex-shrink: 0; }
.kp-corporate-hook__text { flex: 1; }
.kp-corporate-hook:hover {
  background: var(--color-indigo);
  color: var(--color-white);
}
.kp-corporate-hook:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-corporate-hook strong { font-weight: 700; white-space: nowrap; }

/* ---------- Trust badges - 3-col icon grid ---------- */
.kp-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 16px;
  text-align: center;
}
.kp-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kp-trust__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(70, 90, 230, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1;
}
.kp-trust__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-black);
}

/* ---------- Razorpay security ---------- */
.kp-payment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-grey-mid);
}
.kp-payment img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* ---------- Featured review teaser (anchor link) ---------- */
.kp-review-teaser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--color-grey-light);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kp-review-teaser:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-black);
}
.kp-review-teaser__stars {
  height: 18px;
  width: auto;
  display: block;
}
.kp-review-teaser__stars-emoji {
  color: #f4b400;
  font-size: 1rem;
  letter-spacing: 1px;
}
.kp-review-teaser__quote {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-black);
  font-style: italic;
  flex: 1;
  min-width: 120px;
}
.kp-review-teaser__author {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #5c5c5c;
  white-space: nowrap;
}

/* ---------- Coupon accordion ---------- */
.kp-coupon {
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
}
.kp-coupon__trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
}
.kp-coupon__trigger svg { width: 18px; height: 18px; flex-shrink: 0; }
.kp-coupon__chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform 0.25s;
  stroke: var(--color-black);
  fill: none;
}
.kp-coupon.open .kp-coupon__chevron { transform: rotate(180deg); }
.kp-coupon__body {
  display: none;
  padding: 0 12px 12px;
  flex-direction: column;
  gap: 8px;
}
.kp-coupon.open .kp-coupon__body { display: flex; }
.kp-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-grey-light);
  border-radius: 8px;
  padding: 10px 14px;
  gap: 10px;
}
.kp-code-row__info { flex: 1; min-width: 0; }
.kp-code-row__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-grey-mid);
  margin-bottom: 2px;
}
.kp-code-row__code {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-indigo);
  letter-spacing: 0.5px;
}
.kp-code-row__copy {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 50px;
  border: 2px solid var(--color-indigo);
  background: var(--color-white);
  color: var(--color-indigo);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.kp-code-row__copy:hover { background: var(--color-indigo); color: var(--color-white); }
.kp-code-row__copy.copied {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

/* ---------- OOS banner ---------- */
.kp-oos-banner {
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-black);
  margin-bottom: 16px;
  display: none;
}
.kp-oos-banner.visible { display: block; }

/* ============================================================
   BELOW FOLD - comic cards + --spacing-8 rhythm
   ============================================================ */
.kp-below-fold-section {
  margin-top: var(--spacing-8, 80px);
}
.kp-section-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-black);
  margin: 0 0 20px;
  line-height: 1.1;
}

/* ---------- What's Inside comic card ---------- */
.kp-whats-inside {
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}
.kp-whats-inside__img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 320px;
}
.kp-whats-inside__body { padding: 20px; }
.kp-whats-inside__body .rte {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.kp-whats-inside__body .rte > *:first-child { margin-top: 0; }

/* ---------- How-to GIF comic card ---------- */
.kp-how-to {
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-grey-light);
  margin-top: 20px;
}
.kp-how-to img {
  width: 100%;
  display: block;
}

/* ---------- FAQ accordion - comic press-down chevrons ---------- */
.kp-faq { margin-top: 0; }
.kp-faq__item {
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.kp-faq__item.open { box-shadow: 4px 4px 0 var(--color-black); }
.kp-faq__trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Question row - Inter Medium 500 (owner 2026-08-03; was 600). §10.55. */
  font-family: var(--font-body-medium);
  font-weight: 500;
  font-synthesis-weight: none;
  font-size: 1rem;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.kp-faq__trigger:hover { background: var(--color-grey-light); }
.kp-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.25s;
  stroke: var(--color-black);
  fill: none;
}
.kp-faq__item.open .kp-faq__chevron { transform: rotate(180deg); }
.kp-faq__body {
  display: none;
  padding: 0 20px 18px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-black);
}
.kp-faq__body > *:first-child { margin-top: 0; }
.kp-faq__item.open .kp-faq__body { display: block; }

/* ---------- Pairs Well / cross-sell cards (rendered in a .kp-pairs-track slider) ---------- */
.kp-pairs-card {
  height: 100%;
  border: 2px solid #e5e5e5;
  box-shadow: none;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.kp-pairs-card:hover {
  border-color: var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  transform: translate(-2px, -2px);
}
.kp-pairs-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-grey-light);
}
.kp-pairs-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  display: block;
}
.kp-pairs-card:hover .kp-pairs-card__img img { transform: scale(1.04); }
.kp-pairs-card__body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kp-pairs-card__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 4px;
  line-height: 1.3;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.kp-pairs-card__title:hover { color: var(--color-indigo); }
.kp-pairs-card__price {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  /* Indigo, matching .kp-bundle__price - and 5.43:1 on white, where the pink
     it replaced was 3.25:1 (fails AA for normal text). */
  color: var(--color-indigo);
  margin-bottom: 10px;
  min-height: 1.3em;
}
.kp-pairs-card__compare {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-grey-mid, #5c5c5c);
  margin-left: 4px;
}
.kp-pairs-card__atc {
  margin-top: auto;
  width: 100%;
  padding: 9px 0;
  border-radius: 50px;
  border: 2px solid var(--color-indigo);
  box-shadow: 2px 2px 0 var(--color-black);
  background: transparent;
  color: var(--color-indigo);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.kp-pairs-card__atc:hover {
  background: var(--color-indigo);
  color: var(--color-white);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-black);
}
.kp-pairs-card__atc:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Desktop tabs ---------- */
.kp-tabs {
  margin-top: var(--spacing-8, 80px);
  border-bottom: 2px solid var(--color-black);
}
.kp-tabs__nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* padding gives comic box-shadows room so they render without clipping */
  padding: 2px 2px 4px;
}
.kp-tabs__nav::-webkit-scrollbar { display: none; }
.kp-tab-btn {
  flex-shrink: 0;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;   /* §BTN-BOLD */
  color: #5c5c5c;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  margin-bottom: -2px;
}
.kp-tab-btn.active {
  color: var(--color-indigo);
  border-bottom-color: var(--color-indigo);
}
.kp-tab-btn:hover { color: var(--color-indigo); }

.kp-tab-panel { display: none; padding: 28px 0; }
.kp-tab-panel.active { display: block; }
.kp-tab-panel .rte {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.kp-tab-panel .rte > *:first-child { margin-top: 0; }

/* Mobile accordion tabs */
.kp-accordion-tab { display: none; }

/* ---------- Featured review block ---------- */
.kp-featured-review {
  background: var(--color-grey-light);
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  border-radius: 16px;
  padding: 32px;
  margin-top: var(--spacing-8, 80px);
}
.kp-featured-review__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-black);
  margin: 0 0 24px;
}
.kp-featured-review__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kp-featured-review__photos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kp-featured-review__photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  flex-shrink: 0;
}
.kp-featured-review__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.kp-featured-review__stars { height: 22px; width: auto; }
.kp-featured-review__stars-text {
  color: #f4b400;
  font-size: 1.25rem;
  letter-spacing: 2px;
}
.kp-featured-review__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-black);
  margin: 0;
  line-height: 1.3;
}
.kp-featured-review__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-black);
  margin: 0;
}
.kp-featured-review__author {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #5c5c5c;
  font-weight: 600;
  margin: 0;
}

/* ---------- Related products ---------- */
.kp-related {
  margin-top: var(--spacing-8, 80px);
}
.kp-related__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-black);
  margin-bottom: 20px;
}
.kp-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ---------- Refill cross-sell banner ---------- */
.kp-refill-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-pink);
  color: var(--color-black); /* black-on-pink passes AA */
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: var(--spacing-8, 80px);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
}
.kp-refill-banner__link {
  color: var(--color-black);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.kp-refill-banner__link:hover { opacity: 0.82; }

/* ============================================================
   ABOVE-FOLD ADDITIONS - value prop + proof strip
   ============================================================ */

/* Value prop: 1-2 line benefit copy from custom.value_prop metafield */
.kp-value-prop {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  border-radius: 10px;
}

/* Proof strip: shipping speed + returns + free-ship threshold */
.kp-proof-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5c5c5c;
  padding: 10px 0 14px;
  border-top: 1px solid var(--color-grey-light, #f5f5f5);
}
.kp-proof-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kp-proof-strip__item:not(:first-child)::before {
  content: '·';
  color: var(--color-grey-mid, #5c5c5c);
  font-weight: 400;
}
.kp-proof-strip__item svg {
  flex-shrink: 0;
  color: var(--color-indigo);
}

/* ============================================================
   STICKY ATC - slide-in + comic style + variant line
   ============================================================ */
.kp-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-white);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -2px 8px rgba(10, 10, 10, 0.06);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.kp-sticky-atc.visible {
  display: flex;
  transform: translateY(0);
}
.kp-sticky-atc__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid var(--color-black);
  object-fit: cover;
  flex-shrink: 0;
}
.kp-sticky-atc__info {
  flex: 1;
  min-width: 0;
}
.kp-sticky-atc__title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.kp-sticky-atc__variant {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #5c5c5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-sticky-atc__price {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-pink);
}
.kp-sticky-atc__btn {
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  border-radius: 50px;
  background: var(--color-indigo);
  color: var(--color-white);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kp-sticky-atc__btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-sticky-atc__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Chat widget clearance - lift third-party widgets above sticky ATC ----------
   Covers Tawk.to, Tidio, Crisp, Gorgias, Intercom, Freshchat, Zendesk, WhatsApp embeds,
   and the native Kitsters .fab (WhatsApp "Chat with us" button).
   Triggered via the body class toggled by kitsters-product.js when the bar is visible. */
body.kp-atc-bar-visible .fab,
body.kp-atc-bar-visible #tawkchat-container,
body.kp-atc-bar-visible #tawkchat-minified-box,
body.kp-atc-bar-visible #tidio-chat,
body.kp-atc-bar-visible #tidio-chat-iframe,
body.kp-atc-bar-visible .crisp-client,
body.kp-atc-bar-visible #gorgias-chat-container,
body.kp-atc-bar-visible .intercom-lightweight-app,
body.kp-atc-bar-visible #intercom-container,
body.kp-atc-bar-visible #fc_frame,
body.kp-atc-bar-visible #launcher,
body.kp-atc-bar-visible .wa-chat-btn-container,
body.kp-atc-bar-visible [id*="whatsapp-chat"],
body.kp-atc-bar-visible [class*="whatsapp-chat"] {
  bottom: 88px !important;
  transition: bottom 0.3s ease;
}

/* ---------- Confetti canvas (ATC micro-delight) ---------- */
#kp-confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
#kp-confetti-canvas.active { display: block; }
@media (prefers-reduced-motion: reduce) {
  #kp-confetti-canvas { display: none !important; }
}

/* ============================================================
   TABLET ≥ 768px
   ============================================================ */
@media (min-width: 768px) {
  .kp-page { padding: 32px 24px 72px; }

  .kp-above-fold {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* thumbs and dots handled in base styles */

  /* overflow-x stays auto (base); padding handles shadow room - do NOT set visible here as it causes page x-scroll */
  .kp-related__grid { grid-template-columns: repeat(3, 1fr); }
  .kp-sticky-atc__thumb { display: block; }

  .kp-featured-review__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }
  .kp-featured-review__photos {
    flex-direction: column;
    flex-shrink: 0;
  }
  .kp-featured-review__content { flex: 1; }
}

/* ============================================================
   DESKTOP ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {
  .kp-page { padding: 40px 40px 72px; }

  .kp-gallery {
    position: static;
  }
  .kp-gallery__main { width: 100%; }
  .kp-thumb { width: 80px; height: 80px; }

  .kp-btn-atc,
  .kp-btn-buy { height: 52px; font-size: 0.9375rem; }

  .kp-related__grid { grid-template-columns: repeat(4, 1fr); }

  /* ---------- Sticky ATC on desktop (2026-08-06) ----------
     This breakpoint used to carry `.kp-sticky-atc, .kp-sticky-atc.visible
     { display: none !important }`, i.e. the bar was mobile-only. On desktop the
     LEFT column is the pinned one (see the scroll-synchroniser notes below) and
     the buy box scrolls away with the page, so past the first screen there was
     no Add-to-Cart anywhere on a very long PDP.

     Removing the hide rule is the WHOLE change - visibility is still owned by
     the same IntersectionObserver in kitsters-product.js that has always driven
     the mobile bar (it watches #kp-atc and toggles `.visible`, at every width;
     only this CSS was suppressing the result). So the bar appears exactly when
     the real Add to bag button leaves the viewport and hides again when it comes
     back: a CTA is on screen at every scroll depth, and the two are never on
     screen together. No JS, no markup and no other breakpoint changed.

     The rules below are presentation only - the bar is sized for a 375px phone
     by default, so desktop gets the page's own 1240px measure (the white band
     stays full-bleed; only the contents are constrained, matching .kp-page) and
     slightly larger type/controls. Height lands at ~72px, which the existing
     `body.kp-atc-bar-visible` clearance (88px, applied at all widths) clears -
     that rule already lifts the sitewide WhatsApp .fab off the bar on desktop
     exactly as it does on mobile. */
  .kp-sticky-atc {
    padding: 12px max(40px, calc((100% - 1240px) / 2));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 16px;
  }
  .kp-sticky-atc__thumb { width: 48px; height: 48px; }
  .kp-sticky-atc__title { font-size: 0.875rem; }
  .kp-sticky-atc__variant { font-size: 0.8125rem; }
  .kp-sticky-atc__price { font-size: 0.9375rem; }
  .kp-sticky-atc__btn {
    height: 48px;
    padding: 0 36px;
    font-size: 0.9375rem;
  }

  /* Scroll clearance. A fixed bar cannot be scrolled past, so at the very
     bottom of the page it sat on top of the footer's legal row (measured:
     Privacy / Terms / Refunds all inside the bar's band at 1440x900). The
     body class is already toggled by kitsters-product.js in lockstep with
     the bar, so the page is exactly one bar-height taller precisely while
     the bar is on screen - and back to its natural height the moment the
     real CTA returns to view. Scoped to this breakpoint on purpose: mobile
     keeps the behaviour it has always had.

     Measurement note for anyone re-testing this: the class is added BY the
     scroll that reaches the bottom, so the page grows 73px after the scroll
     has already clamped - a single scrollTo(0, 1e7) lands 73px short and
     reports the legal row as still covered. Scroll, let the observer settle,
     scroll again; then footer bottom 826.8 vs bar top 827.0, 0 covered. */
  body.kp-atc-bar-visible { padding-bottom: 73px; }

  .kp-accordion-tab { display: none !important; }
  .kp-tab-btn { display: block !important; }
  .kp-tab-panel { display: none; }
  .kp-tab-panel.active { display: block; }
}

/* ============================================================
   MOBILE accordion / upsell  ≤ 1023px
   ============================================================ */
@media (max-width: 1023px) {
  .kp-tabs__nav { display: none; }
  .kp-tab-panel { display: none !important; }

  .kp-accordion-tab {
    display: block;
    border: 2px solid var(--color-black);
    box-shadow: 2px 2px 0 var(--color-black);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .kp-accordion-tab__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-black);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
  }
  .kp-accordion-tab__trigger:hover { background: var(--color-grey-light); }
  .kp-accordion-tab__chevron {
    width: 16px;
    height: 16px;
    stroke: var(--color-black);
    fill: none;
    transition: transform 0.25s;
  }
  .kp-accordion-tab.open .kp-accordion-tab__chevron { transform: rotate(180deg); }
  .kp-accordion-tab__body {
    display: none;
    padding: 0 20px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.7;
  }
  .kp-accordion-tab.open .kp-accordion-tab__body { display: block; }

  .kp-cta-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRODUCT DESCRIPTION - 3-line clamp + read-more toggle
   ============================================================ */
.kp-desc-wrap {
  margin: 12px 0 16px;
}
.kp-desc__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-foreground);
  transition: none;
}
.kp-desc__body.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.kp-desc__toggle {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-indigo);
  cursor: pointer;
  text-decoration: underline;
}
.kp-desc__toggle:hover { opacity: 0.8; }

/* ============================================================
   RAZORPAY BADGE - inline under CTA row
   ============================================================ */
.kp-payment--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #5c5c5c;
  margin: 10px 0 4px;
}
.kp-payment__logo {
  max-width: 80px;
  height: auto;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* ============================================================
   BUNDLE - Upgrade Your Experience
   ============================================================ */
.kp-bundle {
  position: relative;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
  background: #fffdf4;
  overflow: hidden;
}
.kp-bundle__sticker {
  position: absolute;
  top: 12px;
  right: -34px;
  transform: rotate(7deg);
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  padding: 4px 40px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.kp-bundle__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
}
.kp-bundle__items {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
}
.kp-bundle__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.kp-bundle__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid var(--color-black);
  flex-shrink: 0;
}
.kp-bundle__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  width: 100%;
}
.kp-bundle__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.3;
  word-break: break-word;
  text-transform: capitalize;
}
.kp-bundle__price {
  font-size: 0.75rem;
  color: #5c5c5c;
}
.kp-bundle__plus {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-indigo);
  align-self: center;
  padding: 0;
  flex-shrink: 0;
}
.kp-bundle__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-bundle__total {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-black);
}
.kp-bundle__atc {
  width: 100%;
  font-size: 0.9375rem;
}

/* ============================================================
   ABOUT KIT - FBT-matching brutalist container
   ============================================================ */
.kp-about-kit {
  border: 2px solid var(--color-black);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.kp-about-kit__header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-grey-light);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-black);
}
/* Strip duplicate border/shadow from inner accordion wrapper inside .kp-about-kit */
.kp-about-kit .kp-detail-accordions {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
/* Replace harsh black separator lines with a subtle grey to match the header background */
.kp-about-kit .kp-detail-acc { border-bottom: 1px solid var(--color-grey-light, #f5f5f5); }
.kp-about-kit .kp-detail-acc:last-child { border-bottom: none; }

/* ---------- Image lightbox (hero + In real homes) ---------- */
.kp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.88);
}
.kp-lightbox.is-open { display: flex; }
.kp-lightbox__img {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  border: 3px solid var(--color-white, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
/* Video / external-player clone mounted by the lightbox (kitsters-product.js).
   Same box as .kp-lightbox__img so a video zooms to exactly the size a still
   would. `height: auto` lets a <video> keep its own aspect ratio; the 16/9 is
   only a floor for an <iframe>, which has no intrinsic ratio to fall back on. */
.kp-lightbox__media {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  width: min(92vw, 1100px);
  height: auto;
  border-radius: 8px;
  border: 3px solid var(--color-white, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #000;
}
iframe.kp-lightbox__media { aspect-ratio: 16 / 9; height: min(90vh, 619px); }
.kp-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white, #fff);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kp-lightbox__close:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-black); }
.kp-lightbox__close:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }

/* ============================================================
   MOBILE - all phones < 768px
   ============================================================ */
@media (max-width: 767px) {

  /* Stack CTA buttons for full-width tap targets */
  .kp-cta-row { grid-template-columns: 1fr; }

  /* Collapse benefit badges to single column on very small phones */
  .kp-benefit-badges { grid-template-columns: 1fr; }

  /* Ensure the left/right columns never render side-by-side on phones */
  .kp-above-fold {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .kp-featured-review { padding: 20px 16px; }
  .kp-featured-review__photo { width: 100px; height: 100px; }
}

@media (max-width: 480px) {
  .kp-benefit-badges { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLET (iPad portrait) 768-1023px
   Put the buy box BESIDE the gallery so price + ATC are visible
   above the fold - previously the gallery was full-width and
   pushed the buy box below a ~720px-tall image. The full sticky/
   row-reverse gallery treatment still kicks in at ≥1024px.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .kp-above-fold {
    /* gallery capped at 380px on tablet; info fills the rest */
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 28px;
    align-items: start;
  }
  /* Stack ATC/Buy in the narrower (~340px) column for full-width tap targets. */
  .kp-cta-row { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCT PAGE OVERHAUL - NEW COMPONENTS (2026-06-16)
   ============================================================ */

/* ---------- Left column wrapper (mockup kt-left-col: gap 32) ---------- */
.kp-left-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Above-fold: true 50vw / 50vw split on desktop ----------
   .kp-page has 40px horizontal padding, so we bleed .kp-above-fold
   to full width with the negative-margin technique and move the outer
   spacing into column padding.  .kp-page already has overflow-x:hidden
   so no horizontal scrollbar is introduced.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* Two-column above-fold: gallery (flex 1 1 480) beside the buy box
     (flex 1 1 560), 56px gap. The two sides scroll in SYNC - see the
     "Synchronized column scroll" block below.
     NOTE: an earlier revision used position:sticky to pin the gallery while
     the buy column scrolled past it; per owner request the gallery is not
     pinned, so no sticky/align-self is applied here. */
  .kp-above-fold {
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .kp-left-col {
    flex: 1 1 480px;
    min-width: 320px;
  }
  .kp-info {
    flex: 1 1 560px;
    min-width: 320px;
  }
}

/* ---------- Column scroll behaviour - matches the "Standalone 2" reference ----------
   Owner supplied Kitsters_PDP__Standalone_2.html and asked for exactly its
   behaviour. That file pins the gallery column:

     .kt-left-col { flex:1 1 480px; min-width:320px; display:flex;
                    flex-direction:column; gap:32px;
                    position:sticky; top:24px; align-self:flex-start }
     @media (max-width:1024px){ .kt-left-col { position:static !important } }

   Our flex setup already matched it exactly (flex 1 1 480px, gap 56px on the
   row, align-items:flex-start); the pin is the only thing that differed.

   TOP OFFSET - 96px, not the reference's 24px, and this is not a deviation.
   The reference is a standalone mockup with NO header, so `top:24px` means
   "24px below the top of the visible area". This theme has a sticky header.
   Measured on the rendered page: the header pins with its bottom at 71.6px,
   compacting to ~62.3px on deeper scroll. 71.6 + 24 = 95.6 -> 96px reproduces
   the reference's 24px gap against the *actual* top of visible content, and
   guarantees the column never tucks underneath the header. A literal 24px
   would put the gallery behind it.

   The min() is the one real addition, and it is inert wherever the reference's
   own assumption holds. The reference never handles a column taller than the
   viewport; ours is 740px, so a flat 96px would put its bottom permanently out
   of reach on common laptops (1366x768 -> 68px unreachable, 1280x800 -> 36px).
   min() slides the pin up only in that case; where the column fits (1440x900
   and up) it resolves to exactly 96px and the behaviour is identical to the
   reference. --kp-col-h is published by kitsters-product.js on RESIZE ONLY -
   never on scroll, because it is an inherited custom property and writing it
   per frame invalidates style for the whole gallery subtree (that was the
   original glitch; see §10.56).

   BREAKPOINT - 768px: the pin must turn on wherever THIS page is two-column,
   which is not where the reference's was. Copying the reference's
   `max-width:1024px { position:static }` (i.e. pin at >=1025px) left a band of
   widths rendering two columns with NO pin, so the gallery scrolled away and
   the left half of the page went empty while the right column carried on -
   owner-reported as "left side section move to at the end", and invisible in
   testing because every sweep had been run at >=1025px. Measured on the broken
   build: at 900 / 960 / 1000 / 1024px the column top went 182 -> -517 -> -1225
   (gone), while 1025px pinned rock-solid at 96. Two separate faults:
     - an OFF-BY-ONE at exactly 1024px, where this theme's desktop layout
       (`@media (min-width:1024px)`, line ~1713) is already active but the pin
       was not. 1024 is not an edge case: it is what a 1280px window at 125%
       browser zoom reports, and a 1536px window at 150% - i.e. ordinary
       desktops, which is why a "desktop-only" report kept failing to
       reproduce on a nominally identical desktop viewport.
     - the TABLET band 768-1023px (`@media (min-width:768px) and
       (max-width:1023px)`, line ~1685) is also two-column - gallery capped at
       380px beside the buy box - and never had a pin either.
   Both are the same defect: the pin's breakpoint has to be derived from the
   layout's, never from a mockup's. Below 768px the columns genuinely stack
   (`max-width:767px` sets flex-direction:column), and a sticky element in a
   single-column flow is correctly a no-op.

   RULE: when a sticky/scroll behaviour is scoped to "desktop", assert the
   breakpoint against the LAYOUT rule that creates the multi-column context -
   sweep the widths and check the pin engages at the same px the columns do.
   ------------------------------------------------------------------ */
/* Drives the column synchroniser below. --kp-travel = containerH - columnH,
   published by kitsters-product.js on resize. */
@keyframes kp-col-sync {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--kp-travel, 0px), 0); }
}

@media (min-width: 768px) {
  .kp-left-col {
    position: sticky;
    align-self: flex-start;   /* a stretched flex item cannot stick */
    top: min(96px, calc(100vh - var(--kp-col-h, 0px) - 20px));
  }

  /* The synchroniser (kitsters-product.js) drifts this column so it reaches the
     container's bottom exactly when the buy column does - both halves end
     together, instead of the pin parking the gallery at the top and leaving
     ~2,700px of blank beneath it (owner 2026-08-03).

     The class is added by the JS on its FIRST applied frame, so the sticky rule
     above stays in force until the synchroniser actually takes over, and
     remains the fallback if the script never runs. The two must never both
     apply: sticky's release logic knows nothing about the transform, so
     layering them overshoots the container by ~64px at release (§10.56). */
  /* The synchroniser: drift this column so it reaches the container's bottom
     exactly when the buy column does - both halves end together, instead of the
     pin parking the gallery at the top and leaving ~2,700px of blank beneath it.

     Driven by a CSS SCROLL-PROGRESS TIMELINE, so the browser runs it on the
     compositor: no scroll listener, no main-thread work, no frame of lag. A JS
     scroll handler writing `transform` was the previous attempt and the owner's
     verdict was "still jerky" - correctly, and unfixably, since a main-thread
     transform lands a frame behind a composited scroll by definition.

     `scroll()` NOT `view()`: the view-timeline version needed
     `view-timeline-inset` to align its range, and an engine can pass
     `@supports (animation-timeline: view())` while mishandling that property -
     the range then maps to the viewport bottom and the gallery sags down the
     screen (what the owner saw, while it measured perfectly locally). A
     scroll-progress timeline takes its range as two absolute lengths, which
     kitsters-product.js publishes on resize, so there is no inset to get wrong.

     The class is only added once the JS has published the three custom
     properties, so the sticky rule above stays in force until then and remains
     the fallback where `scroll()` is unsupported. The two must never both
     apply: sticky's release logic knows nothing about the transform, so
     layering them overshoots the container by ~64px at release (§10.56). */
  .kp-left-col.kp-col-sync {
    position: static;
    animation: kp-col-sync linear both;
    animation-timeline: scroll(root block);
    animation-range: var(--kp-sync-start, 0px) var(--kp-sync-end, 0px);
  }

  /* The flex row above is `flex-wrap: wrap`, and two columns do not actually
     fit until ~1056px - so 1024-1055px renders STACKED (measured at 1024px:
     gallery offsetTop 190, buy column offsetTop 1017). Pinning a stacked
     gallery makes the buy info scroll underneath it, which is simply wrong.
     The JS detects the wrap by comparing the two columns' offsetTop and adds
     this class. It is JS-only on purpose: without the script the page keeps
     its previous behaviour rather than losing the pin everywhere. */
  .kp-left-col.kp-col-unpin { position: static; }
}

/* ---------- Scroll synchroniser - the DRIFT is capped, which is what makes it
   read as a pin ----------
   (2026-08-18.) A block here used to claim `position: sticky` had replaced the
   scroll-driven synchroniser. It had not - the `.kp-col-sync` rule above has
   been live and doing the work; sticky is its fallback. The comment was
   describing an intention, and it was believed over the code.

   What is true is the observation underneath it: on this page the two look
   identical. The synchroniser's drift is not a design choice, it is
   arithmetic - exactly `viewportH - 96 - columnH`, the empty space under the
   column while it is pinned. Measured at 1440px:

       retail PDP,  900px window, column 740px ->  64px  (reads as a pin)
       retail PDP, 1080px window, column 740px -> 244px
       Magic Hour,  900px window, column 537px -> 267px  (owner: "not great")

   So the same code produces a calm pin here and a gallery visibly creeping
   down the screen on the Magic Hour PDP, purely because that column is ~200px
   shorter - and this page has the same defect on a taller monitor.
   kitsters-product.js (and the identical probe in
   kitsters-magic-hour-product.js) therefore caps the published `--kp-travel`
   at `range + 64px`, 64px being this page's own natural drift at 1440x900 -
   the geometry the effect was tuned and signed off on. The cap is a no-op
   here and makes every other column height / viewport height behave like it:
   measured after, both pages run 96 -> 155 at 768/900/1080/1200 window
   heights. Travel given up stays as slack BELOW the gallery, which is what a
   pinned column already shows, instead of a gap above it.

   The cap deliberately does NOT apply when the drift is negative (a column
   taller than the visible band, e.g. this page at 768px): there the column
   must run slower than the page or its own bottom never becomes reachable.
   ------------------------------------------------------------------ */

/* Thumbnail strip - horizontal below hero on all breakpoints */
.kp-gallery__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-gallery__main { width: 100%; }
.kp-gallery__thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  order: 1;
}
.kp-gallery__thumbs::-webkit-scrollbar { display: none; }
.kp-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 2px solid #d0d0d0;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kp-thumb.active {
  border-color: var(--color-indigo);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- "In real homes" mini lifestyle strip (mockup kt-lifestyle-grid) ---------- */
.kp-ugc-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-grey-mid);
  margin: 14px 0 4px;
}
.kp-ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.kp-ugc-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(10,10,10,0.12);
  overflow: hidden;
}
.kp-ugc-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.kp-ugc-grid__item:hover .kp-ugc-grid__img { transform: scale(1.04); }

/* ---------- Benefit badges ---------- */
.kp-benefit-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kp-benefit-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-grey-light, #f5f5f5);
  border-radius: 14px;
  padding: 14px 16px;
}
.kp-benefit-badge__icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.kp-benefit-badge__title {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-black);
  margin-bottom: 2px;
}
.kp-benefit-badge__desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #5c5c5c;
  margin: 0;
  line-height: 1.4;
}

/* ---------- Customer review carousel (real Trustoo data - kp-review-carousel) ---------- */
.kp-review-carousel {
  background: var(--color-blush, #fff1f1);
  border-radius: 20px;
  padding: 24px;
  position: relative;
}
.kp-review-carousel__stars {
  color: var(--color-yellow);
  -webkit-text-stroke: 1px var(--color-black);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.kp-review-carousel__track { position: relative; min-height: 84px; }
.kp-review-carousel__slide { display: none; }
.kp-review-carousel__slide.active { display: block; }
.kp-review-carousel__quote {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
  margin: 0 0 16px;
  color: var(--color-black);
}
.kp-review-carousel__author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kp-review-carousel__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.kp-review-carousel__author { font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; }
.kp-review-carousel__verified {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-success);
  font-weight: 700;
}
.kp-review-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.kp-review-carousel__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kp-review-carousel__btn:hover { transform: translate(1px, 1px); }
.kp-review-carousel__dots { display: flex; align-items: center; gap: 6px; }
.kp-review-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background: rgba(10, 10, 10, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.2s ease, background 0.2s ease;
}
.kp-review-carousel__dot.active { width: 20px; background: var(--color-black); }

/* ---------- Ratings & reviews snapshot (kp-rr) - reference "Ratings and reviews" card ---------- */
.kp-rr {
  /* top space so "Ratings and reviews" clears the About Kit block above */
  margin: 36px 0 8px;
  font-family: var(--font-body);
}
.kp-rr__title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.6px;
  text-transform: none;
  color: var(--color-black);
  margin: 0 0 12px;
  line-height: 1.15;
}
/* dual-colour accent word, matching the "About Kit" heading (no underline) */
.kp-rr__title span { color: var(--color-indigo); }
.kp-rr__overall {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kp-rr__score {
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--color-black);
  line-height: 1;
}
.kp-rr__score-star { color: var(--color-success, #388e3c); font-size: 1.25rem; line-height: 1; }
/* 5-star rating, filled to the real overall score, in brand blue (indigo) */
.kp-rr__stars {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 1px;
}
.kp-rr__stars-empty { color: rgba(70, 90, 230, 0.22); }
.kp-rr__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-indigo);
}
.kp-rr__badge {
  display: inline-flex;
  align-items: center;
  background: #e7f5ea;
  color: var(--color-success, #388e3c);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 4px 12px;
  border-radius: 8px;
}
.kp-rr__based {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: #5c5c5c;
}
.kp-rr__verified { display: inline-flex; align-items: center; gap: 3px; color: #5c5c5c; }

/* "Customers say" - AI review summary (custom.ai_review_summary metafield).
   Deliberately quiet: prose block, no comic border - it supports the real
   reviews below rather than competing with them. */
.kp-rr__ai { margin-top: 18px; }
.kp-rr__ai-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.2px;
  color: var(--color-black);
  margin: 0 0 6px;
}
.kp-rr__ai-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5c5c5c; /* mid grey #848484 on white is 3.7:1, fails AA (CLAUDE.md s5) */
  margin: 0;
}
.kp-rr__ai-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: #5c5c5c;
}
.kp-rr__ai-note svg { flex: 0 0 auto; color: var(--color-indigo); }

/* photo mosaic - first tile large, rest fill */
.kp-rr__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
  margin-top: 16px;
}
.kp-rr__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
  background: #f0f0f0;
}
.kp-rr__photos[data-count="1"] .kp-rr__photo { grid-column: span 2; grid-row: span 2; max-width: 260px; }
.kp-rr__photos .kp-rr__photo:first-child { grid-column: span 2; grid-row: span 2; }
/* Four equal squares in one row, used when the "View all" tile is not rendered
   (owner 2026-08-20, Magic Hour: there is no reviews list to link to, so both
   "show all" affordances are omitted). Without this the 2x2 hero above would
   leave the bottom-right cell empty - the tile it normally holds is what fills
   it. Two-class so it beats the single-class first-child rule it overrides
   (§10.33); a media query is not involved but the ordering trap is the same. */
.kp-rr__photos.kp-rr__photos--flat .kp-rr__photo:first-child { grid-column: span 1; grid-row: span 1; }

/* fills the leftover grid cell when fewer than 5 photos are shown */
.kp-rr__photo-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--color-indigo);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  padding: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kp-rr__photo-viewall:hover { background: var(--color-black); transform: translateY(-2px); }
.kp-rr__photo-viewall:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }

/* review cards - horizontal snap scroll */
.kp-rr__cards-wrap { position: relative; margin-top: 16px; }
.kp-rr__cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* room so the soft card shadow isn't clipped by the scroll container */
  padding: 2px 2px 8px;
}
.kp-rr__cards::-webkit-scrollbar { display: none; }
.kp-rr__card {
  flex: 0 0 clamp(220px, 80%, 260px);
  scroll-snap-align: start;
  background: var(--color-white);
  border: 1px solid rgba(10,10,10,0.12);
  box-shadow: 0 2px 8px rgba(10,10,10,0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* our hover effect: soft at rest → comic border pops on hover (matches homepage cards) */
  transition: transform var(--dur-normal, 200ms) var(--ease-out-soft, cubic-bezier(0.22,1,0.36,1)),
              box-shadow var(--dur-normal, 200ms) var(--ease-out-soft, cubic-bezier(0.22,1,0.36,1)),
              border-color var(--dur-normal, 200ms) var(--ease-out-soft, cubic-bezier(0.22,1,0.36,1));
}
.kp-rr__card:hover {
  transform: translateY(-2px);
  border-color: var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
}
.kp-rr__card-top { display: flex; align-items: center; gap: 8px; }
.kp-rr__stars-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-grey-light, #f5f5f5);
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 0.8125rem;
  color: var(--color-black);
  flex-shrink: 0;
}
.kp-rr__stars-badge span { color: var(--color-indigo); }
.kp-rr__card-title {
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-rr__card-date { margin-left: auto; font-size: 0.8125rem; color: #848484; white-space: nowrap; flex-shrink: 0; }
.kp-rr__card-text {
  font-size: 0.875rem;
  color: #3a3a3a;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kp-rr__card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  font-size: 0.8125rem;
  color: #5c5c5c;
}
.kp-rr__card-author { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--color-black); min-width: 0; }
.kp-rr__card-verified { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: #5c5c5c; }
.kp-rr__scroll-next {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white, #fff);
  border: 1px solid rgba(10,10,10,0.15);
  box-shadow: 0 2px 8px rgba(10,10,10,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.kp-rr__scroll-next:hover { transform: translateY(-50%) scale(1.06); }
.kp-rr__scroll-next:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-rr__all {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(10,10,10,0.18);
  border-radius: 10px;
  background: var(--color-white, #fff);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-black);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kp-rr__all:hover { background: var(--color-grey-light, #f5f5f5); border-color: var(--color-black); }
.kp-rr__all:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }

/* ---------- Pincode ---------- */
.kp-pincode {
  background: var(--color-grey-light);
  border-radius: 12px;
  padding: 16px;
  /* clear separation - Ratings & reviews and Check Delivery are distinct sections */
  margin: 32px 0 16px;
}
.kp-pincode__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-black);
}
.kp-pincode__row { display: flex; gap: 8px; }
.kp-pincode__input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--color-black);
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-black);
  background: var(--color-white);
  outline: none;
}
.kp-pincode__input:focus {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}
.kp-pincode__btn {
  padding: 10px 20px;
  background: var(--color-indigo);
  color: var(--color-white);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 50px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.kp-pincode__btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--color-black); }
.kp-pincode__btn:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-pincode__result {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 20px;
  color: var(--color-black);
}
.kp-pincode__result.success { color: var(--color-success); }
.kp-pincode__result.error   { color: var(--color-error); }

/* ---------- Offers block ---------- */
.kp-offers {
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.kp-offers__header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-yellow);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-black);
}
.kp-offers__toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-black);
  padding: 0;
  transition: background 0.15s;
}
.kp-offers__toggle:hover { background: rgba(0,0,0,0.08); }
.kp-offers__toggle:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-offers__chevron {
  width: 18px;
  height: 18px;
  transition: transform 0.25s;
}
.kp-offers__toggle[aria-expanded="false"] .kp-offers__chevron { transform: rotate(-90deg); }
.kp-offers__body {
  padding: 12px 16px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kp-offers__body[hidden] { display: none; }

/* ---------- FBT ---------- */
.kp-fbt {
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.kp-fbt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-white, #fff);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-black);
}
.kp-fbt__nav { display: flex; flex-shrink: 0; gap: 6px; }
.kp-pairs-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
}
.kp-pairs-arrow:hover:not(:disabled) { background: var(--color-yellow); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-black); }
.kp-pairs-arrow:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-black); }
.kp-pairs-arrow:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-pairs-arrow:disabled { opacity: 0.35; cursor: default; }
/* The hover state lifts a card OUTSIDE its resting box — transform:
   translate(-2px,-2px) plus a 3px 3px comic shadow — but a scroll container
   clips at its padding box, and `scrollLeft` floors at 0, so anything left of
   the resting edge is both clipped AND unreachable (CLAUDE.md §10.50).
   Measured on the old build: the FIRST card lost exactly 2px off its left edge
   at 320/390/768/1440 — i.e. its whole border vanished on hover — and the LAST
   card lost 1px of shadow on the right at 390 (box-shadow never contributes to
   scrollable overflow, §10.50b). Owner-reported as "the border cut while
   hovering".
   Fix: 4px of horizontal room INSIDE the scroll area (on the track, so it counts
   toward scroll width and the right edge is genuinely reachable), pulled back out
   with a matching negative margin on the wrap so the resting layout is
   pixel-identical. `.kp-fbt` has 22px of padding, so -4px stays well inside it
   and is not re-clipped by that panel's own overflow:hidden.
   scroll-padding-inline is load-bearing, not decoration: with `scroll-snap-type:
   x mandatory`, a start-aligned item would otherwise snap to the wrap's padding
   box and scroll the new 4px straight back off, restoring the bug. */
.kp-pairs-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: -4px;
  scroll-padding-inline: 4px;
}
.kp-pairs-track-wrap::-webkit-scrollbar { display: none; }
.kp-pairs-track-wrap:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-pairs-track { display: flex; align-items: stretch; gap: 12px; width: max-content; padding: 8px 4px; }
.kp-pairs-item { flex: 0 0 150px; scroll-snap-align: start; display: flex; }
@media (min-width: 480px) { .kp-pairs-item { flex-basis: 170px; } }
@media (min-width: 1024px) { .kp-pairs-item { flex-basis: 190px; } }
.kp-pairs-card__atc:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .kp-pairs-track-wrap { scroll-behavior: auto; }
  .kp-pairs-arrow { transition: none; }
}

/* ---------- Detail Accordions ---------- */
.kp-detail-accordions {
  margin-bottom: 12px;
  border: 2px solid var(--color-black);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--color-black);
}
.kp-inside-eyebrow { margin-top: 4px; }

.kp-detail-acc { border-bottom: 2px solid var(--color-black); }
.kp-detail-acc:last-child { border-bottom: none; }
.kp-detail-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.kp-detail-acc__trigger:hover { background: var(--color-grey-light); }
.kp-detail-acc__trigger[aria-expanded="true"] { background: var(--color-grey-light); }
.kp-detail-acc__trigger:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: -3px; }
.kp-detail-acc__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.kp-detail-acc__trigger[aria-expanded="true"] .kp-detail-acc__chevron { transform: rotate(180deg); }
.kp-detail-acc__body {
  padding: 16px;
  background: var(--color-white);
  border-top: 1px solid #e8e8e8;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-black);
}
.kp-detail-acc__body[hidden] { display: none; }
.kp-detail-acc__body ul { padding-left: 20px; margin: 8px 0; }
.kp-detail-acc__body li { margin-bottom: 4px; }

/* Links inside an accordion body - indigo + underlined, so a hyperlink reads as
   a hyperlink (owner 2026-08-06: "we have hyperlink, but here it looks same").
   `assets/base.css` ships a sitewide `a { color: inherit; text-decoration:
   inherit }` at (0,0,1), so every link in here - the FAQ policy link AND any
   link authored inside an rte metafield - was rendering as plain black body
   text with no underline. This selector is (0,1,1) so it wins, and it is
   deliberately on the shared `__body` (not scoped to .kp-about-kit) because the
   buy-column accordions render the same authored metafield content.
   Matches the house link treatment in kitsters-blog.css `.ka__content.rte a`. */
.kp-detail-acc__body a {
  color: var(--color-indigo);
  /* §10.55: plain 'Inter' ships only 400 + 700 here, so a bare `font-weight:600`
     paints as Bold. Pair it with the real SemiBold face declared further down
     this file (same pattern as .kp-about-kit .kp-detail-acc__trigger). */
  font-family: 'Inter SemiBold', var(--font-body);
  font-weight: 600;
  font-synthesis-weight: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kp-detail-acc__body a:hover { opacity: 0.8; }
.kp-detail-acc__body a:focus-visible {
  outline: 3px solid var(--color-indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- "What's Inside the Kit?" - checklist rows ---- */
.kp-detail-acc--checklist .kp-detail-acc__body ul,
.kp-detail-acc--checklist .kp-detail-acc__body ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.kp-detail-acc--checklist .kp-detail-acc__body li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-grey-light);
  font-weight: 600;
}
.kp-detail-acc--checklist .kp-detail-acc__body li:last-child { border-bottom: none; }
.kp-detail-acc--checklist .kp-detail-acc__body li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 60% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* ---- "Kit Highlights" - numbered circle-badge rows ---- */
.kp-detail-acc--numbered .kp-detail-acc__body ul,
.kp-detail-acc--numbered .kp-detail-acc__body ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
  counter-reset: kp-highlight;
}
.kp-detail-acc--numbered .kp-detail-acc__body li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  counter-increment: kp-highlight;
}
.kp-detail-acc--numbered .kp-detail-acc__body li:last-child { margin-bottom: 0; }
.kp-detail-acc--numbered .kp-detail-acc__body li::before {
  content: counter(kp-highlight);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-indigo);
  color: #fff;
  font-weight: 800; font-size: 12px;
}

/* ---- "How can I use this kit?" - REMOVED 2026-08-03 (owner: "it looks wired") ----
   This carried a `--chips` pill treatment: `display:flex` on each <li> plus a
   `✦` ::before. The metafield is authored as "<strong>Term:</strong> sentence",
   so flex made the <strong> one flex item and the sentence another - two columns
   that wrapped independently, giving a ragged layout with the bold term stacked
   above a misaligned description. Chips only ever worked for one-or-two-word
   labels, which is not what the backend holds. The accordion now uses the plain
   `rte` body, i.e. exactly the authored markup. If a chip treatment is ever
   wanted again, read the real metafield content first. */

/* ---- "Product FAQ" - merged Q&A rows ---- */
.kp-faq-item { padding: 12px 0; border-bottom: 1px solid var(--color-grey-light); }
.kp-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
/* Question row inside the buy-column "Product FAQ" accordion - Inter Medium 500
   (owner 2026-08-03; was 800). §10.55: plain 'Inter' has no 500 face here. */
.kp-faq-item__q { font-family: var(--font-body-medium); font-weight: 500; font-synthesis-weight: none; margin-bottom: 4px; }
.kp-faq-item__a { color: var(--color-grey-mid); margin: 0; }
.kp-detail-acc__img { max-width: 100%; border-radius: 8px; margin-bottom: 12px; }

/* ============================================================
   SECTION 2: MARQUEE - now the shared .kmq component
   ============================================================ */
/* The .kpdm-* rules that lived here are gone: sections/kitsters-pdp-marquee
   renders snippets/kitsters-marquee-bar.liquid, whose look is the homepage's
   first marquee (owner instruction 2026-08-10). This band had already been
   pointed at that reference once, for type size only (2026-08-06); it now
   inherits the whole component, so the two can no longer drift.
   Both lessons this block documented live on in .kmq: two groups at
   `min-width: 100%` each animating -100% of ITSELF (§10.42 - the gap that
   appeared the moment the type shrank), and tracking expressed relative to the
   type rather than in px (§10.48). */

/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.kp-section-inner {
  max-width: 1620px;
  margin: 0 auto;
  padding: 80px 40px;
}
@media (max-width: 767px) { .kp-section-inner { padding: 48px 16px; } }
.kp-section-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--color-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  text-transform: uppercase;
}
/* Two-color style: black for main text, indigo for the <em> accent word */
.kp-section-heading em { font-style: normal; color: var(--color-indigo); }
.kp-section-heading--center { text-align: center; }
.kp-section-heading--accent em { color: var(--color-indigo); }
/* Centered eyebrow pill above a section heading (design ref: Standalone 2) */
.kp-eyebrow-row { display: flex; justify-content: center; }
.kp-eyebrow-row--left { justify-content: flex-start; }
.kp-eyebrow-row .eyebrow {
  box-shadow: 2px 2px 0 var(--color-black);
  margin-bottom: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 8px 16px;
}
/* Subtitle line directly under a section heading */
.kp-section-sub {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--color-grey-mid);
  text-align: center;
  margin: -28px 0 48px;
}

/* ============================================================
   STANDALONE-2 SKELETON PRIMITIVES
   Extracted 1:1 from the approved mockup bundle (kt-section /
   kt-container / SectionHeading component). Every below-fold
   band uses these shells so section division matches the ref.
   ============================================================ */
.kt-section { padding: 72px 0; }
@media (max-width: 767px) { .kt-section { padding: 48px 0; } }
.kt-container { margin: 0 auto; padding: 0 40px; }
@media (max-width: 767px) { .kt-container { padding: 0 16px; } }
.kt-container--1240 { max-width: 1240px; }
.kt-container--1180 { max-width: 1180px; }
.kt-container--1080 { max-width: 1080px; }
.kt-container--820  { max-width: 820px; }

/* SectionHeading: eyebrow pill → 12px gap → giant Snug title + accent word */
.ktsh--center { text-align: center; }
.ktsh__eyebrow {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  background: var(--color-yellow);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 50px;
  padding: 8px 16px;
}
.ktsh__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  color: var(--color-black);
}
.ktsh__title .is-pink { color: var(--color-indigo); }
.ktsh__title .is-indigo { color: var(--color-indigo); }
.kp-view-all-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-indigo);
  text-decoration: underline;
  white-space: nowrap;
}
.kp-view-all-link:hover { color: var(--color-black); }
.kp-view-all-link:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kp-placeholder-note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #5c5c5c;
  border: 2px dashed #d0d0d0;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

/* ============================================================
   SECTION 3: OCCASION GALLERY - CategoryTile row (Standalone 2)
   220px fixed tiles, 3:4, centered flex-wrap, gap 16, mt 40
   ============================================================ */
.kp-occasion-gallery { background: var(--color-white); }

/* Unforgettable Moments - bento photo mosaic.
   Photos are per-product (product.metafields.custom.product_images), so the tile
   count varies - 4 to 7 in practice. The section picks the column count, the
   hero/wide flags AND the desktop row count (--kp-mrows, inline on the grid) in
   Liquid so the mosaic always closes out to a full rectangle; these classes just
   apply what it decided.

   DESKTOP HEIGHT IS BUDGETED, NOT INTRINSIC (owner-reported 2026-08-16: with
   real photos wired the section ran past one viewport). grid-auto-rows divides
   --kp-mbudget (viewport height minus sticky header + section padding + heading
   + grid margin, ~380px) across --kp-mrows, capped per column count so a short
   layout never balloons into extreme portrait tiles. Every aspect-ratio is
   released on desktop and the img is absolutely positioned, so an image's
   intrinsic height can never stretch a row (the s10.83 lesson).

   Columns are the FEWEST that still tile in the fewest rows, so tiles stay as
   WIDE as possible (rows already cap the height):

     n  | cols | tile 1      | trailing row      | rows | tile w @1240
     ---|------|-------------|-------------------|------|-------------
     1  |  1   | -           | -                 | 1    | 1160 banner
     2  |  2   | -           | -                 | 1    | 574
     3  |  3   | -           | -                 | 1    | 379
     4  |  4   | -           | -                 | 1    | 281
     5  |  4   | 2x2 hero    | -                 | 2    | 281
     6  |  3   | -           | -                 | 2    | 379
     7  |  4   | -           | --w2 on tile 5    | 2    | 281
     8  |  4   | -           | -                 | 2    | 281
     9  |  3   | -           | -                 | 3    | 379
     10 |  4   | -           | --w2 on 9,10      | 3    | 281
     11 |  4   | -           | --w2 on tile 9    | 3    | 281
     13 |  4   | 2x2 hero    | -                 | 4    | 281

   Mobile is always 2 columns, with tile 1 spanning both whenever the count is
   odd - which is exactly when that tiles evenly. No hole at any count. Mobile
   keeps the aspect-ratio sizing (the page scrolls there by design).
   Auto-flow is deliberately NOT dense: the counts above already tile exactly,
   and dense would reorder the owner's photos to backfill. */
.kp-moments__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 32px;
}
.kp-moments__grid--c1 { grid-template-columns: 1fr; }
.kp-moments__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(10,10,10,0.12);
  box-shadow: 0 2px 8px rgba(10,10,10,0.08);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s cubic-bezier(0.22,1,0.36,1);
}
.kp-moments__grid--c1 > .kp-moments__item { aspect-ratio: 16 / 10; }
/* Mobile hero - tile 1 spans the full 2-column width */
.kp-moments__grid--mhero > .kp-moments__item:first-child {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}
.kp-moments__item:hover {
  border-color: var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  transform: translateY(-2px);
}
.kp-moments__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.kp-moments__item:hover .kp-moments__img { transform: scale(1.05); }

@media (min-width: 768px) {
  .kp-moments__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    /* One-viewport budget (see the block comment above). --kp-mrows comes
       inline from the section's Liquid; the fallbacks keep a sane grid if it
       is ever missing.
         --kp-mcap  stops a 1-row layout stretching tiles to the whole budget:
                    each cap is ~the column's own width at the 1240 container,
                    so tiles land near-square instead of portrait.
         --kp-mmin  floor. Below it the photo is too letterboxed to read, so a
                    high count is allowed to spill rather than be crushed - the
                    common 4-7 counts never reach it.
       Retuned 2026-08-16 after the owner reported the first pass as "so small".
       The reserve is now MEASURED off the rendered PDP rather than estimated:
       sticky header 110 + section padding-top 72 + heading block 162 = 344px
       above the grid. The section's 72px BOTTOM padding is deliberately not
       reserved - what has to fit on screen is the mosaic, and charging the
       photos 72px for trailing whitespace is what made them letterboxed. */
    --kp-mgap: 12px;
    --kp-mbudget: clamp(420px, 100vh - 344px, 860px);
    --kp-mcap: 300px;
    --kp-mmin: 210px;
    grid-auto-rows: max(
      var(--kp-mmin),
      min(
        calc((var(--kp-mbudget) - (var(--kp-mrows, 2) - 1) * var(--kp-mgap)) / var(--kp-mrows, 2)),
        var(--kp-mcap)
      )
    );
  }
  /* Re-declared inside the query: a media query adds no specificity, so the
     4-column default above would otherwise beat the base --c1 rule. */
  .kp-moments__grid--c1 { grid-template-columns: 1fr; --kp-mcap: 620px; }
  .kp-moments__grid--c2 { grid-template-columns: repeat(2, 1fr); --kp-mcap: 480px; }
  .kp-moments__grid--c3 { grid-template-columns: repeat(3, 1fr); --kp-mcap: 390px; }
  /* Rows own the height now - release every base/mobile aspect-ratio (the
     higher-specificity base rules are repeated here so they lose on source
     order) and take the image out of flow so its intrinsic height can never
     stretch a row past the budget. */
  .kp-moments__item,
  .kp-moments__grid--c1 > .kp-moments__item,
  .kp-moments__grid--mhero > .kp-moments__item:first-child {
    aspect-ratio: auto;
  }
  .kp-moments__grid--mhero > .kp-moments__item:first-child { grid-column: span 1; }
  .kp-moments__img { position: absolute; inset: 0; }
  /* Desktop hero - tile 1 spans 2×2 */
  .kp-moments__grid--hero > .kp-moments__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  /* Trailing wide tile(s) that square off a part-filled final row; the row
     sizes them, so no aspect-ratio here. */
  .kp-moments__grid > .kp-moments__item--w2 {
    grid-column: span 2;
  }
}

/* ============================================================
   SECTION 4: OCCASION TAGS - the Occasion Index, premium-playful
   Calm at rest: light editorial band (Magic Hour blue-white wash),
   hairline frame, vertical spine titles. Joyful on click: the
   panel unfolds left→right, the spine floods with the occasion's
   brand colour, the emoji sticker spring-pops with a colour offset
   shadow, and the ghost numeral glows in the same colour. Yellow
   brand CTA.
   ============================================================ */
.kp-occasion-tags {
  background: var(--color-white);
  overflow: hidden;
}

/* header on light: default yellow eyebrow pill, black title, indigo accent word */
.kp-occasion-tags .ktsh__title { color: var(--color-black); }
.kp-occasion-tags .ktsh__title em { font-style: normal; color: var(--color-indigo); }
.kpe-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: #5c5c5c; /* AA-safe on light background */
  margin: 14px 0 0;
}
.kp-occasion-tags .kp-placeholder-note { color: #5c5c5c; list-style: none; }

/* ── The strip - hairline-framed row of unfolding columns ── */
.kpe-strip {
  display: flex;
  align-items: stretch;
  min-height: 420px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

/* per-panel brand accent (colour-coded card set, v2 §3.3) */
.kpe-panel--indigo { --acc: var(--color-indigo); --acc-ink: var(--color-white); --acc-ghost: rgba(70, 90, 230, 0.22); }
.kpe-panel--pink   { --acc: var(--color-pink);   --acc-ink: var(--color-black); --acc-ghost: rgba(255, 70, 131, 0.18); }
.kpe-panel--yellow { --acc: var(--color-yellow); --acc-ink: var(--color-black); --acc-ghost: rgba(253, 218, 13, 0.14); }

.kpe-panel {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 0 1 88px;
  min-width: 88px;
  border-left: 1px solid rgba(10, 10, 10, 0.12);
  transition:
    flex-basis 650ms var(--ease-out-soft),
    flex-grow  650ms var(--ease-out-soft),
    background 300ms var(--ease-out-soft);
}
.kpe-panel:first-child { border-left: 0; }
.kpe-panel.is-open {
  flex: 1 1 460px;
  background: var(--color-white);
}
.kpe-panel:not(.is-open):hover { background: rgba(255, 255, 255, 0.6); }

/* the collapsed spine - the whole clickable face.
   At rest: light + quiet. Open: floods with the occasion colour. */
.kpe-panel__face {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 8px;
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  transition: background 350ms var(--ease-out-soft);
}
.kpe-panel.is-open .kpe-panel__face {
  background: var(--acc, var(--color-yellow));
  cursor: default;
}
.kpe-panel__face:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: -6px;
}
.kpe-panel.is-open .kpe-panel__face:focus-visible {
  outline-color: var(--color-black);
}
.kpe-panel__index {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--color-indigo);
  transition: color 300ms var(--ease-out-soft);
}
.kpe-panel.is-open .kpe-panel__index { color: var(--acc-ink, var(--color-black)); }
.kpe-panel__spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(10, 10, 10, 0.7);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 240px;
  transition: color 300ms var(--ease-out-soft);
}
.kpe-panel:hover .kpe-panel__spine-title { color: var(--color-black); }
.kpe-panel.is-open .kpe-panel__spine-title { color: var(--acc-ink, var(--color-black)); }
.kpe-panel__plus {
  color: rgba(10, 10, 10, 0.4);
  transition: transform 350ms var(--ease-spring), color 300ms var(--ease-out-soft);
}
.kpe-panel:hover .kpe-panel__plus { color: var(--color-indigo); }
.kpe-panel.is-open .kpe-panel__plus {
  color: var(--acc-ink, var(--color-black));
  transform: rotate(45deg);
}

/* the panel body that unfolds */
.kpe-panel__reveal {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  visibility: hidden;
  transition: visibility 0s 650ms;
}
.kpe-panel.is-open .kpe-panel__reveal {
  visibility: visible;
  transition: visibility 0s;
}
/* ghosted display numeral - glows in the panel's colour */
.kpe-panel__ghost {
  position: absolute;
  right: 8px;
  bottom: -30px;
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 1;
  color: var(--acc-ghost, rgba(10, 10, 10, 0.04));
  pointer-events: none;
  user-select: none;
}
.kpe-panel__inner {
  position: relative;
  min-width: 300px;
  max-width: 480px;
  padding: 36px 44px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 350ms var(--ease-out-soft), transform 350ms var(--ease-out-soft);
}
.kpe-panel.is-open .kpe-panel__inner {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 280ms;
}

/* the playful signature: emoji sticker with a colour offset shadow,
   spring-pops when the panel opens */
.kpe-panel__sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--acc, var(--color-yellow));
  transform: rotate(-8deg) scale(0);
  transition: transform 400ms var(--ease-spring);
}
.kpe-panel.is-open .kpe-panel__sticker {
  transform: rotate(-8deg) scale(1);
  transition-delay: 380ms;
}

.kpe-panel__title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--color-black);
  text-transform: capitalize;
  margin: 0 0 10px;
}
/* short colour accent bar under the title */
.kpe-panel__bar {
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--acc, var(--color-yellow));
  margin: 0 0 14px;
}
.kpe-panel__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #5c5c5c; /* AA-safe on light background */
  max-width: 44ch;
  margin: 0;
}

/* ── CTA - brand yellow pill (§7.1; pops on the light band) ──
   NOTE: .kp-occasion-tags__footer was deleted 2026-08-10 with the occasion
   section's "Make it a gift" CTA (owner request). The pill class below is
   still LIVE - section-related-blogs.liquid and kitsters-pdp-bestsellers.liquid
   both render "View All →" with it. Do not delete it with the footer. */
.kp-occasion-tags__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--color-yellow);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 50px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.kp-occasion-tags__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(253, 218, 13, 0.35);
}
.kp-occasion-tags__cta:active { transform: translateY(1px); }
.kp-occasion-tags__cta:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

/* ── Mobile: spines stack, panels unfold downward ── */
@media (max-width: 767px) {
  .kpe-strip {
    flex-direction: column;
    min-height: 0;
    margin-top: 36px;
  }
  .kpe-panel,
  .kpe-panel.is-open {
    flex: none;
    min-width: 0;
    flex-direction: column;
    border-left: 0;
    border-top: 1px solid rgba(10, 10, 10, 0.12);
  }
  .kpe-panel:first-child { border-top: 0; }
  .kpe-panel__face {
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 60px;
    padding: 16px 16px;
  }
  .kpe-panel__spine-title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 16px;
    max-height: none;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .kpe-panel__reveal {
    flex: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 450ms var(--ease-out-soft), visibility 0s 450ms;
  }
  .kpe-panel.is-open .kpe-panel__reveal {
    grid-template-rows: 1fr;
    transition: grid-template-rows 450ms var(--ease-out-soft), visibility 0s;
  }
  /* the clipped wrapper carries no padding - a padding jump would snap
     the height animation; spacing lives on the children */
  .kpe-panel__inner {
    overflow: hidden;
    min-width: 0;
    max-width: none;
    padding: 0;
    transform: translateY(-8px);
  }
  .kpe-panel.is-open .kpe-panel__inner {
    transform: translateY(0);
    transition-delay: 160ms;
  }
  .kpe-panel__title { display: none; } /* the spine row already shows it */
  .kpe-panel__sticker {
    width: 46px;
    height: 46px;
    font-size: 22px;
    margin: 14px 0 0 16px;
  }
  .kpe-panel__bar { margin: 10px 0 0 16px; }
  .kpe-panel__desc { padding: 8px 16px 18px; }
  .kpe-panel__ghost { font-size: 120px; bottom: -22px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .kpe-panel,
  .kpe-panel__face,
  .kpe-panel__reveal,
  .kpe-panel__inner,
  .kpe-panel__index,
  .kpe-panel__spine-title,
  .kpe-panel__plus,
  .kpe-panel__sticker,
  .kp-occasion-tags__cta { transition: none; }
  .kpe-panel__sticker { transform: rotate(-8deg) scale(1); }
}

/* ============================================================
   SECTION 5: CREATORS
   ============================================================ */
.kp-creators { background: var(--color-white); }
.kp-creators__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .kp-creators__grid { grid-template-columns: repeat(3, 1fr); } }
.kp-creator-card {
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  border-radius: 0;
  overflow: hidden;
  background: var(--color-white);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kp-creator-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-black); }

/* Image wrap - relative to position "+" button and reveal panel */
.kp-creator-card__img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
}
.kp-creator-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.kp-creator-card:hover .kp-creator-card__img { transform: scale(1.04); }
.kp-creator-card__img-placeholder { background: var(--color-grey-light); width: 100%; height: 100%; }

/* "+" toggle button - bottom-right, sharp corners, thick border */
.kp-creator-card__plus {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: var(--color-black);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 2px 2px 0 #fff;
}
.kp-creator-card__plus:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #fff; }
.kp-creator-card__plus:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #fff; }
.kp-creator-card__plus:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
/* "+" → "×" when open */
.kp-creator-card__plus[aria-expanded="true"] span { font-size: 0; }
.kp-creator-card__plus[aria-expanded="true"] span::after { content: "×"; font-size: 1.5rem; }

/* Reveal panel - slides up from bottom, sharp corners, high contrast */
.kp-creator-card__reveal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-black);
  border-top: 3px solid #fff;
  padding: 18px 16px 20px;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease,
              visibility 0s linear 0.28s;
  z-index: 2;
}
.kp-creator-card__reveal.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease,
              visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .kp-creator-card__reveal,
  .kp-creator-card__reveal.is-open { transition: none; }
}
.kp-creator-card__quote {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 10px;
  font-style: italic;
}
.kp-creator-card__reveal-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-yellow);
  margin: 0;
}

.kp-creator-card__meta { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kp-creator-card__name { font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; color: var(--color-black); }
.kp-creator-card__handle { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-indigo); }

/* ── Visibility fix: override any Kalles global scroll-reveal (hdt-reveal-in-view,
       .js [reval]) that could start these left-column elements at opacity:0 ── */
.kp-page .kp-ugc-grid,
.kp-page .kp-benefit-badges,
.kp-page .kp-brand-block {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   SECTION 6: FAQ
   ============================================================ */
.kp-faq-section { background: var(--color-grey-light); }
.kp-faq-section__inner { max-width: 800px; }
.kp-faq { display: flex; flex-direction: column; }
.kp-faq__item {
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  margin-bottom: 10px;
}
.kp-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  /* Question row - Inter Medium 500 (owner 2026-08-03; was 600). §10.55. */
  font-family: var(--font-body-medium);
  font-size: 1rem;
  font-weight: 500;
  font-synthesis-weight: none;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.kp-faq__trigger:hover { background: var(--color-grey-light); }
.kp-faq__trigger:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: -3px; }
.kp-faq__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.kp-faq__trigger[aria-expanded="true"] .kp-faq__chevron { transform: rotate(180deg); }
.kp-faq__body {
  padding: 12px 20px 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-black);
  background: var(--color-white);
}
.kp-faq__body[hidden] { display: none; }

/* ============================================================
   SECTION 8: BESTSELLERS SLIDER
   ============================================================ */
.kp-bestsellers-section { background: var(--color-blush); }
.kp-bestsellers-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 36px;
}
.kp-bestsellers-section__scroll-hint {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-grey-mid);
  white-space: nowrap;
}
.kp-bestsellers-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.kp-bestsellers-section__track-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  /* mockup track: padding 6px 2px 18px (keeps hover shadows unclipped) */
  padding: 6px 2px 18px;
}
.kp-bestsellers-section__track-wrap::-webkit-scrollbar { display: none; }
.kp-bestsellers-section__track { display: flex; gap: 20px; width: max-content; align-items: stretch; }
.kp-bestsellers-section__item { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }

/* ===========================================================================
   PDP product card - VERBATIM copy of the homepage card (kitsters-home.css
   "product cards v2"). Keeps the PDP "Our Bestsellers" cards pixel-identical
   to the homepage product card. `kitsters-home.css` isn't loaded on the PDP,
   so the canonical card CSS is mirrored here (token values only).
   The ONLY PDP-specific addition is `height:100%` so cards in the flex snap
   track share equal height. Do NOT re-fork this - edit the homepage card and
   mirror the change here.
   =========================================================================== */
/* PDP delta only - the card frame itself lives in kitsters-shared.css
   (moved 2026-07-28). The PDP grid needs equal-height cards. */
.kh .product{ height: 100%; }
/* ── Wishlist heart button ──────────────────────────────────── */
hdt-wishlist.product__wishlist,
.kh .product__wishlist {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-white) !important; border: 2px solid var(--color-black) !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--color-black); cursor: pointer;
  opacity: 1 !important; visibility: visible !important;
  transform: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 2px 2px 0 var(--color-black);
}
hdt-wishlist.product__wishlist:hover,
.kh .product__wishlist:hover { transform: translate(-1px,-1px) !important; box-shadow: 3px 3px 0 var(--color-black); }
/* Hide Kalles slot and the replacement icon (.hdt-svg-wis replaces .kw-wis-slot on JS state change) */
hdt-wishlist.product__wishlist .hdt-svg-wis,
.kh .product__wishlist .kw-wis-slot,
.kh .product__wishlist .kw-wis-slot * { display: none !important; width: 0; height: 0; }
/* Outline heart: black stroke, no fill */
hdt-wishlist.product__wishlist .kw-heart--outline,
.kh .product__wishlist .kw-heart--outline { stroke: var(--color-black); fill: none; display: block; }
/* Dual-SVG toggle - unscoped so it works in any context */
hdt-wishlist.product__wishlist .kw-heart--filled,
.kh .product__wishlist .kw-heart--filled { display: none; }
hdt-wishlist.product__wishlist[action="added"] .kw-heart--outline,
hdt-wishlist.product__wishlist[action="remove"] .kw-heart--outline,
.kh .product__wishlist[action="added"] .kw-heart--outline,
.kh .product__wishlist[action="remove"] .kw-heart--outline { display: none; }
hdt-wishlist.product__wishlist[action="added"] .kw-heart--filled,
hdt-wishlist.product__wishlist[action="remove"] .kw-heart--filled,
.kh .product__wishlist[action="added"] .kw-heart--filled,
.kh .product__wishlist[action="remove"] .kw-heart--filled { display: block !important; }
/* Active: pink via color (currentColor) + direct svg/path fill override */
hdt-wishlist.product__wishlist[action="added"],
hdt-wishlist.product__wishlist[action="remove"],
.kh .product__wishlist[action="added"],
.kh .product__wishlist[action="remove"] { color: var(--color-pink) !important; }
hdt-wishlist.product__wishlist[action="added"] .kw-heart--filled,
hdt-wishlist.product__wishlist[action="remove"] .kw-heart--filled,
.kh .product__wishlist[action="added"] .kw-heart--filled,
.kh .product__wishlist[action="remove"] .kw-heart--filled { fill: var(--color-pink) !important; }
hdt-wishlist.product__wishlist[action="added"] .kw-heart--filled path,
hdt-wishlist.product__wishlist[action="remove"] .kw-heart--filled path,
.kh .product__wishlist[action="added"] .kw-heart--filled path,
.kh .product__wishlist[action="remove"] .kw-heart--filled path { fill: var(--color-pink) !important; }
.kh .product__body{ background: var(--color-white); color: var(--color-black); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kh .product__cat{
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  color: var(--color-indigo); letter-spacing: 0.14em; text-transform: uppercase;
}
a.kh .product__cat, .kh a.product__cat{
  text-decoration: none; color: var(--color-indigo);
}
.kh a.product__cat:hover{ text-decoration: underline; }
.kh .product__row1{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kh .product__sep{ color: #d0d0d0; }
.kh .product__rating{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--color-black);
}
.kh .product__rating .stars{ color: var(--color-yellow); -webkit-text-stroke: 1.1px var(--color-black); font-size: 13px; }
.kh .product__rating-count{ color: var(--color-grey-mid); font-weight: 500; font-size: 12px; }
.kh .product__name{
  font-family: var(--font-body); font-weight: 700;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.5px;
  text-transform: capitalize; color: var(--color-black); margin: 2px 0 0;
}
.kh .product__chips{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kh .product__chip{
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  padding: 5px 10px; border-radius: 50px; background: var(--color-grey-light);
  display: inline-flex; align-items: center; gap: 5px;
}
.kh .product__chip i{ color: var(--color-indigo); font-style: normal; display: inline-flex; }
.kh .product__priceRow{ display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kh .product__price{ font-family: var(--font-body); font-weight: 800; font-size: 22px; color: var(--color-black); letter-spacing: -0.01em; }
.kh .product__strike{ font-family: var(--font-body); font-size: 13px; color: var(--color-grey-mid); text-decoration: line-through; }
.kh .product__save{ font-family: var(--font-body); font-weight: 800; font-size: 11px; color: var(--color-error); margin-left: auto; }
.kh .product__add{
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px;
  background: var(--color-yellow); color: var(--color-black);
  border: 2px solid var(--color-black); border-radius: 50px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--color-black);
  transition: transform 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
.kh .product__add:hover{ transform: translateY(-1px); box-shadow: 5px 5px 0 var(--color-black); }
.kh .product__add--soldout,
.kh .product__add--disabled{
  background: #c8c8c8; color: var(--color-grey-mid); cursor: not-allowed;
  box-shadow: none; border-color: #c0c0c0;
}
.kh .product__add--soldout:hover{ transform: none; box-shadow: none; }
.kh .product__trust{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px; color: var(--color-grey-mid); font-weight: 500;
}
.kh .product__trust i{ color: var(--color-success); font-style: normal; }
/* product card - mobile sizes (mirror homepage) */
@media (max-width: 640px) {
  .kh .product__body{ padding: 12px 14px 14px; gap: 6px; }
  .kh .product__name{ font-size: 18px; letter-spacing: -0.5px; }
  .kh .product__price{ font-size: 19px; }
  .kh .product__chip{ font-size: 10px; padding: 4px 8px; }
}

/* ============================================================
   PDP REVIEWS SECTION
   ============================================================ */
.kp-reviews-section { background: var(--color-white); }

.kp-reviews-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 36px;
}
.kp-reviews-section__ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-indigo);
  text-decoration: none;
}
.kp-reviews-section__ig:hover { color: var(--color-black); }
.kp-reviews-section__ig:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 2px; }

/* UGC grid - 5 square tiles, pastel placeholders per the mockup */
/* Instafeed app-block host. The feed app renders its own grid - per `docs/19` M22 we
   never target its internal DOM, so this wrapper only owns width + overflow. */
.kp-ugc-feed {
  width: 100%;
  overflow: hidden;
}
.kp-ugc-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px) { .kp-ugc-row { grid-template-columns: repeat(5, 1fr); } }
.kp-ugc-row__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(10,10,10,0.1);
}
/* pastel fallback backgrounds (mockup ugcBg values) */
.kp-ugc-row__tile--0 { background: #ffe3ee; }
.kp-ugc-row__tile--1 { background: #fdf0cf; }
.kp-ugc-row__tile--2 { background: #e6ebff; }
.kp-ugc-row__tile--3 { background: #e6f7ee; }
.kp-ugc-row__tile--4 { background: #ffe9d6; }
.kp-ugc-row__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kp-ugc-row__handle {
  position: absolute;
  left: 10px; bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10,10,10,0.7);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 50px;
}

.kp-reviews-section__widget-wrap {
  padding-top: 48px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Indent the Shopify section wrapper itself - this is the outermost
   containing block the widget sees, so padding here is respected even
   when the widget uses width:100% of its nearest containing block.
   max-width:100vw is a hard ceiling on the wrapper's own box (belt-and-
   suspenders on top of overflow:hidden, which only clips descendants -
   it can't stop the wrapper's own box from being stretched by some
   unrelated ancestor layout change). overflow:hidden clips any hard bleed
   from the widget's own markup.
   Targets .kitsters-inspired-creations (the section that actually renders
   the @app review widget block) - .kitsters-pdp-reviews only holds the
   "See it in action" UGC photo grid, no 3rd-party widget, since the two
   were split into separate sections. */
.kitsters-pdp-reviews,
.kitsters-inspired-creations {
  max-width: 100vw !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  .kitsters-pdp-reviews,
  .kitsters-inspired-creations {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   OOS NOTIFY CARD
   ============================================================
   Rebuilt 2026-08-19 (owner: "in out of stock product, the layout is wired.
   Please fix this and apply our new design system").

   TWO separate problems were in play and only one of them was ours.

   1. LAYOUT — Kalles' theme.css styles `.hdt-product__notify-stock`, which was a
      class on the very element our CSS targets as `hdt-back-instock`. We styled
      that element but never RESET the properties Kalles sets, so four rules leaked
      straight through: a `0.1rem` border (the stray inner rectangle), 57.6px of
      padding, a 41.6px top margin, and `margin-top: 32px` on BOTH the input and
      the submit which double-counted against the form's own `gap` (§6.10: own each
      gap in ONE place). Measured on the staging theme at 1440: a 484px-tall card
      for three lines of copy, an input and a button.
      The rem values are 1.6x what Kalles intended, too - its stylesheets assume a
      10px root (`--spacing-3-6: 3.6rem; /* 36px */`) and this theme's root is 16px,
      so every Kalles rem renders 1.6x large. That is why it read as "wired" rather
      than merely roomy.
      Fixed at the source: `snippets/back-instock.liquid` no longer emits that class
      (it has zero JS references). The belt-and-braces resets below stay so a future
      edit that puts it back cannot silently reopen the same hole.

   2. DESIGN SYSTEM — the card was Tier 1 everywhere (2px black border + hard offset
      shadow on the card AND the input AND the button, plus a flat indigo text
      eyebrow). Per claude-design/design-system/kitsters-design-system-new.md:
        - §6.1  the card is a "generic panel" -> Tier 2 (hairline + soft shadow)
        - §7.9  inputs -> Tier 2 (1px hairline, pill 40px, indigo focus + glow)
        - §7.1  the submit is the "Indigo solid" variant -> Tier 2
        - §7.2  the eyebrow is the canonical yellow pill atom; a "flat coloured
                text" eyebrow is named as a banned drift pattern, which is exactly
                what `.kp-notify-card__eyebrow` used to be
        - §4.1  a card heading is NOT a Section Header -> Inter 700 mixed case,
                not Snug-Black
      That leaves exactly one Tier 1 accent in the card (the eyebrow pill), which is
      the point of §6.1's "use the loud tool less often".
   ============================================================ */
.kp-cta-row--hidden { display: none !important; }

/* ---- The card: Tier 2 panel (§6.1) ---- */
.kp-notify-card {
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08);
  border-radius: 12px;
  background: var(--color-white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  /* The card owns the gap between its header block and the form, and nothing
     else does - §6.10, one gap in one place. */
  gap: 20px;
}
.kp-notify-card--hidden { display: none !important; }

/* ---- Header block: eyebrow pill -> heading -> sub ---- */
.kp-notify-card__head {
  display: flex;
  flex-direction: column;
  /* stretch would blow the inline-flex eyebrow pill out to the full card width */
  align-items: flex-start;
  gap: 8px;
}

/* The canonical `.eyebrow` atom (colors_and_type.css) carries its own
   `margin-bottom: var(--space-5)`, which would double-count against this
   column's gap. The column owns the rhythm. */
.kp-notify-card__head .eyebrow { margin-bottom: 0; }

/* §4.1: a card heading is Inter 700 mixed case, not a Snug-Black Section Header.
   700 rather than the 800 the DS also allows - only Regular/Medium/SemiBold/Bold
   Inter faces are loaded, so 800 is browser-synthesised (CLAUDE.md §10.55). */
.kp-notify-card__heading {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-black);
  margin: 0;
}
.kp-notify-card__sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-mid, #5c5c5c);
  margin: 0;
}

@media (max-width: 767px) {
  .kp-notify-card { padding: 20px; gap: 16px; }
  .kp-notify-card__heading { font-size: 17px; }
}

/* ---- The form (snippets/back-instock.liquid) ----
   The snippet ships Kalles' hdt-* utility classes and this theme does not load
   Kalles' component CSS for them, so everything the form needs is declared here.
   Selectors are deliberately two-class / class+element qualified so they still win
   if this section ever picks up the sitewide `.kh` resets (CLAUDE.md §10.11-14:
   `.kh p`, `.kh button`, `.kh h3` at (0,1,1) beat single-class rules). */
.kp-notify-card hdt-back-instock {
  display: block;
  width: 100%;
  /* Belt-and-braces against §1 above: if `hdt-product__notify-stock` is ever put
     back on this element, its border/padding/margin cannot reach the layout. */
  border: 0;
  padding: 0;
  margin: 0;
}
.kp-notify-card hdt-back-instock form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* The snippet's own heading + subtitle duplicate the card's branded copy above. */
.kp-notify-card .hdt-product__notify-stock-heading,
.kp-notify-card .hdt-product__notify-stock-subtitle { display: none; }

/* contact[product] / contact[message] / the nt94 template - submitted, never seen. */
.kp-notify-card .hdt-hidden { display: none; }

/* Success / error message returned by the contact form - Tier 2, tinted fill. */
.kp-notify-card .hdt-form__message {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
}
.kp-notify-card .hdt-icon__color-success {
  background: #eaf6ea;
  color: var(--color-success);
}
.kp-notify-card .hdt-icon__color-error {
  background: #fdecec;
  color: var(--color-error);
}

/* ---- Inputs: Tier 2 (§7.9) ---- */
.kp-notify-card select.hdt-select,
.kp-notify-card input.hdt-input {
  width: 100%;
  height: 48px;          /* explicit: Kalles' --height-input would otherwise make it 64px */
  min-height: 48px;
  margin: 0;             /* Kalles ships margin-top: 2rem on both */
  font-family: var(--font-body);
  font-size: 16px;       /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: var(--radius-input, 40px);
  padding: 0 18px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.kp-notify-card select.hdt-select {
  cursor: pointer;
  /* Brand-black caret, inlined so there is no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a0a0a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}
.kp-notify-card input.hdt-input::placeholder { color: var(--color-grey-mid); opacity: 1; }

/* §7.9's focus state is "border -> indigo 2px + glow". The second border pixel is
   drawn with an inset shadow rather than a real border-width change, so focusing
   the field cannot shift the layout by 1px. */
.kp-notify-card select.hdt-select:focus-visible,
.kp-notify-card input.hdt-input:focus-visible,
.kp-notify-card select.hdt-select:focus,
.kp-notify-card input.hdt-input:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(70, 90, 230, 0.15),
              inset 0 0 0 1px var(--color-indigo);
}

/* ---- Submit: "Indigo solid" button, Tier 2 (§7.1) ----
   Not the yellow Tier 1 primary: the DS reserves that for the hero/add-to-cart CTA
   and lists indigo-solid for "secondary CTA, newsletter", which is what a
   back-in-stock email capture is. It also keeps the card to a single Tier 1 accent
   (the eyebrow pill) per §6.1's 1-3-moments rule. */
.kp-notify-card button.hdt-product-notify__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;             /* Kalles ships margin-top: var(--spacing-2) */
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--tracking-button, 0.03em);
  text-transform: none;  /* §4.1 / §7.1 - buttons are mixed case, like Add to cart */
  color: var(--color-white);
  background: var(--color-indigo);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-button, 50px);
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.12);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.kp-notify-card button.hdt-product-notify__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.16);
}
.kp-notify-card button.hdt-product-notify__submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.12);
}
.kp-notify-card button.hdt-product-notify__submit:focus-visible {
  outline: 3px solid var(--color-indigo);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kp-notify-card select.hdt-select,
  .kp-notify-card input.hdt-input,
  .kp-notify-card button.hdt-product-notify__submit { transition: none; }
  .kp-notify-card button.hdt-product-notify__submit:hover { transform: none; }
}

/* ============================================================
   PDP REDESIGN 2026-07 - "Standalone 2" Claude Design frame.
   Reskin of the buy box to the new frame. Keyed to existing
   kp-* classes so all kitsters-product.js hooks stay intact.
   (Appended last so these rules win the cascade.)
   ============================================================ */

/* ---- Column rhythm ---- */
.kp-left-col { gap: 32px; }
.kp-info { border-left: none; padding-left: 0; }
@media (min-width: 1024px) {
  .kp-info { padding-left: 24px; padding-right: 40px; }
}

/* ---- Gallery frame + bestseller sticker ---- */
.kp-gallery__main {
  border-radius: 20px;
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  background: var(--bg-alt);
}
.kp-gallery__sticker {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
  border-radius: 50px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-black);
}
/* Thumbnails - rounded squares, comic active state */
.kp-gallery__thumbs { gap: 12px; margin-top: 14px; }
.kp-thumb {
  width: 78px; height: 78px;
  border-radius: 12px;
  border: 1px solid rgba(10,10,10,0.12);
  box-shadow: none;
  background: var(--bg-alt);
}
.kp-thumb.active {
  border: 2px solid var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-thumb:hover:not(.active) { border-color: var(--color-black); }

/* Captioned thumbnails - label pulled from the media's real alt text only */
.kp-thumb--captioned {
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--color-white);
}
.kp-thumb--captioned img {
  width: 78px; height: 78px;
  border-radius: 10px;
  overflow: hidden;
}
.kp-thumb__caption {
  display: block;
  width: 78px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-grey-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.kp-thumb--captioned.active .kp-thumb__caption { color: var(--color-indigo); }

/* ---- Trust icon strip (2 cards) ---- */
.kp-benefit-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kp-benefit-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--bg-alt);
  border: none;
  box-shadow: none;
  border-radius: 14px;
}
.kp-benefit-badge__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: var(--color-indigo);
  display: flex; align-items: center; justify-content: center;
}
.kp-benefit-badge__icon svg { width: 28px; height: 28px; }
.kp-benefit-badge__title { font-weight: 800; font-size: 15px; letter-spacing: -0.3px; display: block; }
.kp-benefit-badge__desc { font-size: 12px; color: var(--fg-muted); margin: 0; }
@media (max-width: 420px) { .kp-benefit-badges { grid-template-columns: 1fr; } }
/* trust badges are hidden on mobile (owner request - keeps the buy box higher) */
@media (max-width: 767px) { .kp-benefit-badges { display: none; } }

/* ---- Review carousel - blush card ---- */
.kp-review-carousel {
  background: var(--color-blush);
  border: none;
  box-shadow: none;
  border-radius: 20px;
  padding: 28px;
}
.kp-review-carousel__stars {
  color: var(--color-yellow);
  -webkit-text-stroke: 1.2px var(--color-black);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.kp-review-carousel__quote {
  font-size: 19px; line-height: 1.5; font-weight: 600;
  letter-spacing: -0.3px; margin: 0 0 18px; min-height: 84px;
  color: var(--color-black); font-style: normal;
}
.kp-review-carousel__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  font-weight: 800; font-size: 17px; color: var(--color-black);
  display: flex; align-items: center; justify-content: center;
}
.kp-review-carousel__verified { color: var(--color-success); font-weight: 700; }
.kp-review-carousel__btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--color-black); background: #fff;
}

/* ---- Title ---- */
.kp-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -1.4px;
  margin: 0 0 10px;
  text-transform: capitalize;
}

/* ---- Price ---- */
.kp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.kp-price__sale { font-family: var(--font-body); font-weight: 800; font-size: 32px; letter-spacing: -1px; color: var(--color-black); }
.kp-price__compare { font-size: 18px; color: var(--fg-muted); }
.kp-price__badge {
  background: var(--color-error); color: #fff;
  font-weight: 700; font-size: 12px; padding: 4px 10px;
  border-radius: 50px; text-transform: uppercase; letter-spacing: 0.04em;
  border: none; box-shadow: none;
}
.kp-tax-line { font-size: 12px; color: var(--fg-muted); margin: 8px 0 22px; }

/* ---- Variant chips (rounded rectangles, black active) ---- */
.kp-variants__label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.kp-variants__label strong { color: var(--fg-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.kp-variant-pill {
  border-radius: 14px;
  border: 1px solid rgba(10,10,10,0.15);
  background: #fff;
  box-shadow: none;
  color: var(--color-black);
  padding: 11px 16px;
}
.kp-variant-pill:hover { border-color: var(--color-black); color: var(--color-black); }
.kp-variant-pill.active {
  background: var(--color-black);
  border: 2px solid var(--color-black);
  color: #fff;
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-variant-pill.active:hover { color: #fff; }
.kp-variant-pill--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 92px;
}
.kp-variant-pill--stacked .kp-variant-pill__label { font-weight: 800; font-size: 15px; letter-spacing: -0.3px; }
.kp-variant-pill--stacked .kp-variant-pill__price { font-size: 12px; font-weight: 600; color: var(--fg-muted); opacity: 1; }
.kp-variant-pill--stacked.active .kp-variant-pill__price { color: rgba(255,255,255,0.75); }

/* ---- Quantity + Add to bag (one row) · Buy Now (full width) ---- */
.kp-cta-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.kp-cta-row.kp-cta-row--hidden { display: none; }
.kp-buy-row { display: flex; gap: 12px; align-items: stretch; }
.kp-qty { margin: 0; flex-shrink: 0; height: 52px; box-shadow: none; border: 2px solid var(--color-black); }
.kp-qty__btn { width: 44px; height: 100%; }
.kp-btn-atc, .kp-btn-buy {
  height: 52px; border: 2px solid var(--color-black);
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 800; font-size: 15px;
}
.kp-btn-atc {
  flex: 1;
  background: var(--color-yellow);
  color: var(--color-black);
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-btn-atc svg { fill: var(--color-black); }
.kp-btn-buy {
  width: 100%;
  background: var(--color-indigo);
  color: #fff;
  box-shadow: 2px 2px 0 var(--color-black);
}
.kp-btn-atc:hover, .kp-btn-buy:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--color-black); }
.kp-btn-atc:active, .kp-btn-buy:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-black); }
.kp-btn-atc:disabled, .kp-btn-buy:disabled { box-shadow: 2px 2px 0 var(--color-black); transform: none; }
.kp-btn-atc--added { background: var(--color-success); color: #fff; box-shadow: 2px 2px 0 var(--color-black); }
.kp-btn-atc--added svg { fill: #fff; }
.kp-cta-note { text-align: center; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

/* ---- Razorpay trust badge - centered under CTA ---- */
.kp-payment.kp-payment--inline {
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(10,10,10,0.1);
  font-size: 12px;
  color: var(--fg-muted);
}
.kp-payment__shield { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
.kp-payment strong, .kp-payment span { font-weight: 600; }
/* Razorpay wordmark in its brand navy (mockup: #072654, 800) */
.kp-payment .kp-payment__brand { font-weight: 800; color: #072654; letter-spacing: -0.3px; }

/* ---- Icon-circle accordion header (Why love / What's inside / etc.) ---- */
.kp-acc-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-indigo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kp-acc-icon svg { width: 18px; height: 18px; }
.kp-acc-icon--dark { background: var(--color-black); color: var(--color-yellow); }
.kp-acc-icon--fire { background: var(--color-yellow); color: var(--color-black); border: 2px solid var(--color-black); }

.kp-detail-accordions { margin-top: 14px; border: none; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.kp-detail-acc--iconed {
  background: #fff;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(10,10,10,0.06);
  overflow: hidden;
}
.kp-detail-acc--iconed .kp-detail-acc__trigger {
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.kp-detail-acc--iconed .kp-detail-acc__trigger > span:not(.kp-acc-icon) { flex: 1; }
.kp-detail-acc--iconed .kp-detail-acc__body { border-top: 1px solid rgba(10,10,10,0.08); }
.kp-inside-eyebrow { display: none; }

/* ---- Upgrade Your Experience - indigo signature card ---- */
.kp-bundle {
  position: relative;
  background: var(--color-indigo);
  border: 2px solid var(--color-black);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--color-black);
  overflow: hidden;
  padding: 18px 20px 22px;
  margin-top: 22px;
  color: #fff;
}
.kp-bundle__sticker {
  position: absolute;
  top: 14px; right: -38px;
  transform: rotate(7deg);
  background: var(--color-yellow);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  box-shadow: none;
  padding: 5px 44px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap; z-index: 2;
}
.kp-bundle__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kp-bundle__header strong { font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: #fff; }
/* Mockup kt-upgrade-grid: 3-col mini product cards */
.kp-bundle__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 479px) {
  .kp-bundle__items {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 4px;
  }
  .kp-bundle__items::-webkit-scrollbar { display: none; }
  .kp-bundle__item { flex: 0 0 140px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-bundle__items { scroll-behavior: auto; }
}
.kp-bundle__item {
  position: relative;
  background: #fff; color: var(--color-black);
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.kp-bundle__item--base { border: 2px solid var(--color-black); }
.kp-bundle__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-grey-light);
}
.kp-bundle__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 0; margin: 0;
}
.kp-bundle__details {
  padding: 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kp-bundle__name { font-weight: 700; font-size: 13px; line-height: 1.25; text-transform: capitalize; }
.kp-bundle__price { font-weight: 800; font-size: 15px; color: var(--color-indigo); margin-top: 2px; }
.kp-bundle__check {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  margin-top: 8px;
  border-radius: 7px;
  background: var(--color-success);
  border: 2px solid var(--color-success);
  color: #fff;
}
.kp-bundle__check svg { width: 15px; height: 15px; }
.kp-bundle__callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.14);
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}
.kp-bundle__callout strong { font-weight: 800; color: var(--color-yellow); }
.kp-bundle__status {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--color-black);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 50px;
  padding: 3px 8px;
  white-space: nowrap;
  z-index: 1;
}
.kp-bundle__footer {
  background: #fff; color: var(--color-black);
  border: 2px solid var(--color-black);
  border-radius: 14px;
  padding: 16px 18px; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.kp-bundle__total-wrap { line-height: 1.5; }
.kp-bundle__compare { text-decoration: line-through; color: var(--color-grey-mid); font-size: 14px; margin-right: 8px; }
.kp-bundle__save-pill {
  display: inline-block;
  background: rgba(56,142,60,0.12);
  color: var(--color-success);
  font-weight: 800; font-size: 12px;
  border-radius: 50px;
  padding: 2px 10px;
}
.kp-bundle__total { font-weight: 800; font-size: 20px; color: var(--color-black); }
.kp-bundle__total strong { color: var(--color-indigo); }
.kp-bundle__atc.kp-btn-atc {
  flex: none; width: auto; height: auto;
  background: var(--color-yellow); color: var(--color-black);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 50px;
  padding: 14px 30px;
}

/* ---- Bundle - editable selection ----
   Companions are real checkboxes wrapped in a <label>, so the whole mini-card is the
   hit target. The base card (the product being viewed) is a plain <div> with a lock -
   it has no toggle at all, so it can never be removed from the bundle. */
.kp-bundle [hidden] { display: none !important; }
.kp-bundle__hint {
  margin: -8px 0 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}
.kp-bundle__toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.kp-bundle__item--pick {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.kp-bundle__item--pick:hover {
  border-color: var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  transform: translate(-1px, -1px);
}
.kp-bundle__item--pick:has(.kp-bundle__toggle:focus-visible) {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}
/* Deselected: dim the art, hollow the tick, flip the caption. Dim the <img> and not the
   media wrapper - opacity on the wrapper would drag the "Sold out" badge down with it. */
.kp-bundle__toggle:not(:checked) ~ .kp-bundle__media .kp-bundle__img { opacity: 0.4; }
.kp-bundle__toggle:not(:checked) ~ .kp-bundle__details .kp-bundle__name,
.kp-bundle__toggle:not(:checked) ~ .kp-bundle__details .kp-bundle__price { opacity: 0.55; }
.kp-bundle__toggle:not(:checked) ~ .kp-bundle__details .kp-bundle__check {
  background: transparent;
  border-color: rgba(10, 10, 10, 0.3);
  color: transparent;
}
.kp-bundle__note {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
}
/* A selected companion carries no caption - the filled tick already says it is in.
   Only the deselected/unavailable prompt shows. */
.kp-bundle__note--off { display: none; }
.kp-bundle__toggle:not(:checked) ~ .kp-bundle__details .kp-bundle__note--off { display: block; }
/* Base card - locked, never toggleable. */
.kp-bundle__check--locked {
  background: var(--color-black);
  border-color: var(--color-black);
}
.kp-bundle__item--base .kp-bundle__note { color: var(--color-black); }
/* Sold-out companion: unchecked + disabled, excluded from the total. */
.kp-bundle__item--oos { cursor: not-allowed; }
.kp-bundle__item--oos:hover { transform: none; box-shadow: none; border-color: rgba(10, 10, 10, 0.12); }
.kp-bundle__status--oos { background: var(--color-error); }
.kp-bundle__save-row { display: block; }
@media (prefers-reduced-motion: reduce) {
  .kp-bundle__item--pick { transition: none; }
  .kp-bundle__item--pick:hover { transform: none; }
}

/* ---- Pairs well with - clean white card ---- */
.kp-fbt {
  background: #fff;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(10,10,10,0.06);
  padding: 22px;
  margin-top: 22px;
}
.kp-fbt__header strong { font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }

/* ---- Available Offers - yellow accordion ---- */
.kp-offers {
  background: var(--color-yellow);
  border: 1px solid rgba(10,10,10,0.14);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 22px;
  box-shadow: none;
}
.kp-offers__header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.kp-offers__header strong { flex: 1; font-weight: 800; font-size: 17px; letter-spacing: -0.3px; }
.kp-offers__body { padding: 2px 16px 18px; background: transparent; }
.kp-code-row {
  background: #fff8d6;
  border: 1px dashed rgba(10,10,10,0.35);
  border-radius: 10px;
  padding: 12px 14px;
}
.kp-code-row__code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
.kp-code-row__copy {
  background: var(--color-black); color: #fff;
  border: none; border-radius: 50px;
  font-weight: 800; font-size: 13px; padding: 9px 20px;
}
.kp-code-row__copy.copied { background: var(--color-success); }

/* ---- About Kit - Inter dual-colour heading + soft (Tier-2) grouped accordion ---- */
.kp-about-heading {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.6px;
  text-transform: none;
  margin: 40px 0 16px;
  color: var(--color-black);
}
.kp-about-heading span { color: var(--color-indigo); }
.kp-about-kit {
  /* Section-background hex, per §5's one allowed hardcode.
     Source: owner instruction 2026-08-03 - "About Kit" accordion band moves off
     the neutral grey onto a cool indigo tint that ties into --color-indigo. */
  background: #f5f8ff;
  border: 1px solid rgba(10,10,10,0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 0;
}
.kp-about-kit .kp-detail-accordions { margin-top: 0; }
.kp-about-kit .kp-detail-acc { border-bottom: 1px solid rgba(10,10,10,0.1); }
.kp-about-kit .kp-detail-acc:last-child { border-bottom: none; }
/* Question rows read as semi-bold, not bold (owner instruction 2026-08-03).
   Two classes deep so it beats .kp-detail-acc__trigger's own font-weight:700
   AND the .kp-detail-acc--iconed 800 further down the cascade. */
.kp-about-kit .kp-detail-acc__trigger { background: transparent; font-weight: 600; }
/* hover lives on the individual accordion sub-section (e.g. Kit Highlights) only -
   never on the whole About Kit box */
.kp-about-kit .kp-detail-acc__trigger:hover,
.kp-about-kit .kp-detail-acc__trigger[aria-expanded="true"] { background: rgba(10,10,10,0.03); }
.kp-about-kit .kp-detail-acc__body { background: transparent; border-top: 1px solid rgba(10,10,10,0.08); }

/* ---- Trust badges - light-indigo tiles ---- */
.kp-trust { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; margin-bottom: 0; }
.kp-trust__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: #eef0ff; color: var(--color-indigo);
  margin: 0 auto;
}
.kp-trust__icon svg { width: 28px; height: 28px; }
.kp-trust__label { font-weight: 800; font-size: 14px; margin-top: 10px; display: block; }

/* The PDP marquee's pink-band override lived here; the shared .kmq component
   is pink by default, so there is nothing left to override. */

/* ---- Gallery hardening (Ecomposer coexistence) ------------------------------
   The theme still ships Ecomposer, whose global CSS + lazy-load/parallax JS
   apply absolute positioning / transforms to <img> site-wide. Left unguarded
   those leak onto the native PDP gallery and yank the hero image out of its
   square frame, overlapping the buy column. Pin the gallery media so no
   external rule (short of inline-!important) can reposition it.

   The first pass (2026-07-09) only pinned the media INSIDE the frame
   (img/video). That left the frame itself (.kp-gallery__main, matched by
   third-party gallery/zoom scripts via its generic aria-label="Product
   images") free to be resized by an external rule or an app's inline style -
   the child img then dutifully fills width:100%/height:100% of that now-huge
   parent, which is what actually produces an oversized hero image even
   though the img rules above are already respected. Pin the frame's own box
   too. Remove when Ecomposer is uninstalled (L4). ---------------------------------- */
.kp-gallery__main {
  position: relative !important;
  inset: auto !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: min(560px, 75vh) !important;
  transform: none !important;
}
.kp-gallery__track { position: relative; }
.kp-gallery__slide { position: relative; overflow: hidden; }
.kp-gallery__slide img,
.kp-gallery__slide video,
.kp-gallery__slide .kp-gallery__img {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}
.kp-thumb img,
.kp-ugc-grid__img {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* ============================================================
   INTER SEMIBOLD (600) - PDP-scoped
   ------------------------------------------------------------
   colors_and_type.css only @font-face's Inter Regular (400) and Inter Bold
   (700). With no 600 face in the family, `font-weight: 600` resolves to the
   NEXT AVAILABLE heavier face - i.e. Bold. Measured with the theme's own
   TTFs: "How can I use this kit?" at 40px renders 434.80px wide at BOTH 600
   and 700, and 422.91px at 400. So every `font-weight: 600` in this theme has
   always painted as Bold, and asking for "semi bold" in CSS alone is a no-op.

   Deliberately registered under its OWN family name rather than as Inter's
   600 face: adding a real 600 to `Inter` would silently re-render the 171
   other `font-weight: 600` declarations across 45 stylesheets, i.e. a
   store-wide type change nobody asked for. Scoped here, only the two PDP
   question rows below change.

   Pinned to the SAME Inter release as the bundled TTFs so the three faces
   share one set of metrics. The theme ships Inter **v3.018** (name table,
   unitsPerEm 2816); this file is Inter-SemiBold.woff2 from the rsms/inter
   v3.18 release ("Inter Web") - version 3.018, unitsPerEm 2816,
   usWeightClass 600 - rather than Google Fonts' current Inter v4, which is a
   different release of the typeface. It carries ₹ (U+20B9), so no
   unicode-range split is needed.

   Relative url() per §10.27 - resolves inside the same CDN /assets/ dir.
   Declared at exactly 600 so the requested weight matches the face and no
   faux-bold synthesis kicks in; if the file ever fails to load, the stack
   falls through to Inter at 600, which is today's Bold rendering.
   ============================================================ */
@font-face {
  font-family: 'Inter SemiBold';
  src: url('Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* The "About Kit" accordion. NOT an FAQ section, so it stays at SemiBold 600
   - the sitewide FAQ move to Medium 500 (below) deliberately does not touch it.
   Flag to the owner if the two PDP question rows should match again. */
.kp-about-kit .kp-detail-acc__trigger {
  font-family: 'Inter SemiBold', var(--font-body);
  font-weight: 600;
  font-synthesis-weight: none;
}

/* Product FAQ question rows - Inter Medium 500 (owner 2026-08-03: "make the
   question font weight 500", every FAQ section sitewide). This overrides the
   600 declared in the two earlier .kp-faq__trigger blocks in this file; it
   wins on source order at equal (0,1,0) specificity. --font-body-medium is
   load-bearing - plain 'Inter' has no 500 face, so a bare `font-weight: 500`
   would render Regular (CLAUDE.md §10.55). */
.kp-faq__trigger {
  font-family: var(--font-body-medium);
  font-weight: 500;
  font-synthesis-weight: none;
}

/* ══ Ratings & reviews - borrowed-review disclosure line (2026-08-20) ══════
   Rendered by snippets/kitsters-pdp-ratings.liquid when the reviews came from
   a `fallback_product` rather than this product. It is the only thing standing
   between "real reviews, correctly labelled" and "another product's reviews
   passed off as this one's", so it is styled to be read, not skimmed past.
   (The `.kp-rr__empty*` rules that stood here are deleted, not orphaned: the
   band now renders the real component in every state, so nothing referenced
   them - checked before removing, §10.64.) */
.kp-rr__credit {
  font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.5;
  color: var(--color-grey-mid); margin: 0 0 4px;
}
.kp-rr__credit a { color: var(--color-indigo); text-decoration: underline; text-underline-offset: 3px; }