/* =====================================================================
   SKS PRODUCT MAIN — scoped design tokens + section styles
   All classes prefixed with sks- to avoid Dawn conflicts.
   ===================================================================== */

/* Design tokens — scoped to section wrapper */
.sks-product-section {
  --sks-ivory:   #F5F0E8;
  --sks-parch:   #E8DFD0;
  --sks-white:   #FFFFFF;
  --sks-slate:   #2C3E50;
  --sks-slate-d: #1E2D3B;
  --sks-amber:   #B8520A;
  --sks-amber-l: #D4681A;
  --sks-amber-p: #FEF3EC;
  --sks-onyx:    #1A1A1A;
  --sks-body:    #4A4440;
  --sks-muted:   #9A9088;
  --sks-rule:    rgba(74,68,64,.14);
  --sks-rule2:   rgba(74,68,64,.22);
  --sks-crimsn:  #8B1F1F;
  --sks-ok:      #1A5C2A;
  --sks-ok-p:    #EAF3DE;
  --sks-r:       6px;
  --sks-rl:      10px;

  box-sizing: border-box;
  background: var(--sks-ivory);
  color: var(--sks-body);
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.sks-product-section *,
.sks-product-section *::before,
.sks-product-section *::after {
  box-sizing: inherit;
}

.sks-product-section img { max-width: 100%; display: block; }
.sks-product-section a { color: var(--sks-amber); text-decoration: none; transition: color .2s; }
.sks-product-section a:hover { color: var(--sks-amber-l); }
.sks-product-section button:not(.sks-btn):not(.sks-btn-heart) { font-family: inherit; cursor: pointer; border: none; background: none; }
.sks-product-section h1,
.sks-product-section h2,
.sks-product-section h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--sks-onyx);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

/* ── 2-COLUMN GRID ──────────────────────────────────────────────── */
.sks-prod-wrap {
  display: grid;
  grid-template-columns: 1.27fr 1fr;
  gap: 0;
  background: var(--sks-white);
  width: 100%;
}

/* ── LEFT: GALLERY ──────────────────────────────────────────────── */
.sks-gallery {
  position: sticky;
  top: 0;
  height: auto;
  max-height: none;
  display: flex;
  gap: 16px;
  padding: 24px 0 24px 24px;
  background: var(--sks-white);
  align-self: start;
}

/* vertical thumbnail strip */
.sks-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 82px;
  overflow-y: auto;
  flex-shrink: 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sks-rule2) transparent;
}
.sks-thumbs::-webkit-scrollbar { width: 4px; }
.sks-thumbs::-webkit-scrollbar-thumb { background: var(--sks-rule2); border-radius: 2px; }

.sks-thumb {
  aspect-ratio: 3/4;
  border-radius: var(--sks-r);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
  background: var(--sks-ivory);
  padding: 0;
  flex-shrink: 0;
}
/* Thumbs use object-fit: contain so the FULL product photo fits inside the
   thumb frame (with a touch of letterbox when the photo is taller than the
   thumb's 3/4 ratio) instead of cropping out the model's head and feet.
   Background colour (.sks-thumb has var(--sks-ivory)) covers any letterbox
   space so it reads as deliberate framing, not a missing image. */
.sks-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sks-thumb.active { border-color: var(--sks-amber); }
.sks-thumb:hover { border-color: var(--sks-amber-l); }

/* main image frame — sizes itself to the active image's natural ratio.
   Active image is position:relative (takes up space and dictates container height).
   Inactive images are stacked absolutely on top for fade transitions. */
.sks-gal-main {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--sks-rl);
  background: var(--sks-ivory);
  min-height: 500px;
}

.sks-gal-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.sks-gal-img.active {
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
}
.sks-gal-img.active { opacity: 1; }

/* badges */
.sks-badge-l {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.sks-badge-r {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
.sks-b {
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 6px 12px;
  border-radius: var(--sks-r);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sks-b-sale { background: var(--sks-crimsn); color: #fff; }
.sks-b-cust { background: var(--sks-ok);    color: #fff; }

/* prev / next arrows */
.sks-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--sks-onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 4;
  transition: background .2s, color .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border: none;
}
.sks-gal-arrow:hover { background: var(--sks-amber); color: #fff; }
.sks-gal-prev { left: 16px; }
.sks-gal-next { right: 16px; }

/* dots */
.sks-gal-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.sks-gal-dot {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s, width .3s;
  border: none;
  padding: 0;
}
.sks-gal-dot.active {
  background: var(--sks-amber);
  width: 24px;
  border-radius: 6px;
}

/* ── RIGHT: DETAILS PANEL ───────────────────────────────────────── */
/* IMPORTANT: do NOT set overflow-y: auto/scroll here. There's no max-height
   on this column so it can't actually overflow vertically, but per CSS
   spec setting one axis to auto/scroll causes the OTHER axis to clip too
   — which silently cut off swatch-hover tooltips that extended past the
   column's right edge. Keep overflow visible so absolute-positioned
   children (tooltips, dropdowns, etc.) can render freely. */
.sks-details {
  padding: 36px 44px;
  background: var(--sks-white);
}

/* rating + sku row */
.sks-det-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.sks-det-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sks-body);
}
.sks-det-stars .sks-s {
  color: var(--sks-amber);
  font-size: 15px;
  letter-spacing: 1px;
}
.sks-det-stars a {
  color: var(--sks-muted);
  text-decoration: underline;
  text-decoration-color: var(--sks-rule2);
  text-underline-offset: 2px;
}
.sks-det-stars a:hover { color: var(--sks-amber); }
.sks-det-sku {
  background: var(--sks-ivory);
  color: var(--sks-muted);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 500;
}

.sks-det-eyebrow {
  color: var(--sks-amber);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}

/* title + heart */
.sks-det-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sks-det-h1 {
  flex: 1;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--sks-onyx);
}
.sks-btn-heart {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sks-ivory);
  border: 1px solid var(--sks-rule2);
  color: var(--sks-onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  margin-top: 2px;
}
.sks-btn-heart:hover { border-color: var(--sks-amber); color: var(--sks-amber); }
.sks-btn-heart.saved { background: var(--sks-amber); border-color: var(--sks-amber); color: #fff; }
/* Solid filled heart when saved — outline-only was too faint on amber */
.sks-btn-heart.saved svg { fill: currentColor; }

.sks-wl-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.sks-wl-nudge {
  font-size: 11px;
  color: var(--sks-amber);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.sks-wl-nudge:hover { text-decoration: underline; text-underline-offset: 2px; }

.sks-det-sub {
  font-size: 14px;
  color: var(--sks-body);
  line-height: 1.65;
  margin-bottom: 22px;
}

/* Long-description clamp + inline "Read more" affordance. The wrap is
   position:relative so the Read-more link can sit absolutely at the
   bottom-right of the clamped paragraph — visually the link reads as
   the tail of the last visible line ("... they were used for [Read
   more →]"), giving the "1.5 lines then link" look the merchant
   asked for. A left-side gradient fade blends the text underneath
   the link into the page background so it doesn't just overlap into
   readable garble. */
.sks-det-sub-wrap {
  position: relative;
  margin-bottom: 22px;
}

.sks-det-sub--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.sks-det-sub-readmore {
  position: absolute;
  /* Box spans from ~40% to 100% of the paragraph, so the link's LEFT
     edge sits near the visual middle of line 2. Read-more text is
     left-aligned inside the box so it appears just after the fade,
     landing around 45% of line 2. Gradient stops are in ABSOLUTE PX
     (not %) so the fade width is stable across viewport sizes — the
     earlier percentage-based fade was only ~12% of the box, which
     wasn't enough to fully dissolve dense underlying text on wide
     containers. Now: fade dissolves over 55px, then a 15px solid
     buffer separates fade-end from where the link glyphs actually
     start rendering — no more text bleed under "Read more →". */
  left: 40%;
  right: 0;
  bottom: 0;
  padding-left: 70px;
  text-align: left;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0,
    #fff 55px,
    #fff 100%);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--sks-amber, #B8520A);
  text-decoration: none;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
}
.sks-det-sub-readmore:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sks-det-sub-readmore[hidden] { display: none; }

/* price */
.sks-det-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sks-det-price-now {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--sks-amber);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
.sks-det-price-was {
  font-size: 16px;
  color: var(--sks-muted);
  text-decoration: line-through;
}
.sks-det-save {
  background: var(--sks-crimsn);
  color: #fff;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: var(--sks-r);
  text-transform: uppercase;
  font-weight: 500;
}

/* Desktop keeps the "Save X%" phrasing; mobile switches to compact
   "-X%" so the pill stays proportional next to the price on narrow
   viewports. aria-label on the outer span still carries the full
   "Save X%" for screen readers on both. */
.sks-det-save__mob { display: none; }
@media (max-width: 749px) {
  .sks-det-save__desk { display: none; }
  .sks-det-save__mob { display: inline; }
}
.sks-det-price-note {
  font-size: 12px;
  color: var(--sks-muted);
  margin-bottom: 22px;
  font-style: italic;
}

/* Shop Pay Installments widget — small spacing under the price.
   The widget itself is a Shopify-rendered iframe (.shopify-payment-terms),
   so we only control the wrapper margins. The form element introduced by
   {% form %} is invisible — no extra padding from it. */
.sks-det-installments {
  margin: 8px 0 6px;
}
.sks-det-installments form {
  margin: 0;
}
.sks-det-installments shopify-payment-terms {
  display: block;
  font-size: 13px;
}
.sks-div-line {
  height: 1px;
  background: var(--sks-rule);
  margin: 22px 0;
}

/* app block area (tartan + measurements from custom app) */
.sks-app-blocks { margin-bottom: 4px; }

/* Options injected by YGPRODUCTOPTIONS app */
#sks-options-injection-point:not(:empty) {
  margin-bottom: 20px;
}
#sks-options-injection-point > * {
  font-family: 'Jost', 'Helvetica Neue', sans-serif;
  color: var(--sks-body);
}

/* ── QUANTITY ────────────────────────────────────────────────────── */
.sks-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
  flex-wrap: wrap;
}
.sks-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sks-rule2);
  border-radius: var(--sks-r);
  overflow: hidden;
}
.sks-qty button {
  width: 38px;
  height: 42px;
  background: var(--sks-white);
  color: var(--sks-onyx);
  font-size: 18px;
  transition: background .2s, color .2s;
  border: none;
}
.sks-qty button:hover { background: var(--sks-ivory); color: var(--sks-amber); }
.sks-qty input {
  width: 50px;
  height: 42px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--sks-rule);
  border-right: 1px solid var(--sks-rule);
  background: var(--sks-white);
  font-family: inherit;
  font-size: 14px;
  color: var(--sks-onyx);
  font-weight: 500;
}
.sks-qty input:focus { outline: none; }
.sks-qty input::-webkit-inner-spin-button,
.sks-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }

.sks-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sks-ok);
  font-size: 12.5px;
  font-weight: 500;
}
.sks-stock svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── TRUST ROW ───────────────────────────────────────────────────── */
.sks-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sks-rule);
  border-radius: var(--sks-r);
  overflow: hidden;
  border: 1px solid var(--sks-rule);
  margin-bottom: 16px;
}
.sks-trust-cell {
  background: var(--sks-white);
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* Anchor reset — the trust cells are now <a> elements linking to
     supporting pages (measuring guide, refund policy, etc.). Kill
     the browser's default blue+underline so the cell keeps its
     understated card look. Cursor + hover state below signals
     interactivity without visual noise. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  border: 1px solid transparent;
}
.sks-trust-cell:hover {
  background: #FEF3EC;
  border-color: rgba(184, 82, 10, .28);
  box-shadow: 0 2px 6px rgba(28, 39, 51, .08);
}
.sks-trust-cell:hover .sks-trust-t {
  color: var(--sks-amber);
}
.sks-trust-cell:active {
  transform: translateY(1px);
}
.sks-trust-cell:focus-visible {
  outline: 2px solid var(--sks-amber);
  outline-offset: 2px;
}
.sks-trust-cell svg { color: var(--sks-amber); width: 18px; height: 18px; margin-bottom: 2px; }
.sks-trust-t { font-size: 11.5px; font-weight: 500; color: var(--sks-onyx); letter-spacing: .02em; line-height: 1.2; transition: color .15s ease; }
.sks-trust-s { font-size: 10px; color: var(--sks-muted); letter-spacing: .04em; }

/* ── CTA STACK ───────────────────────────────────────────────────── */
.sks-ctas-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.sks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  border-radius: var(--sks-r);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background .25s, transform .2s, box-shadow .2s;
}
.sks-btn-amber { background: var(--sks-amber) !important; color: #fff !important; }
.sks-btn-amber:hover {
  background: var(--sks-amber-l) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184,82,10,.3);
}
.sks-btn-slate { background: var(--sks-slate) !important; color: #fff !important; }
.sks-btn-slate:hover { background: var(--sks-slate-d) !important; color: #fff !important; transform: translateY(-1px); }
.sks-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.sks-cta-label-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.sks-atc-bundle-suffix {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: 0.02em;
  margin-top: 2px;
}


/* ── SHIP METER ──────────────────────────────────────────────────── */
.sks-ship-meter {
  background: var(--sks-ivory);
  border: 1px solid var(--sks-rule);
  border-radius: var(--sks-r);
  padding: 11px 12px;
  margin-bottom: 14px;
  transition: background .25s, border-color .25s;
}
.sks-ship-meter.unlocked {
  background: var(--sks-ok-p);
  border-color: rgba(26,92,42,.3);
}
.sks-ship-text {
  font-size: 11.5px;
  color: var(--sks-body);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sks-ship-text svg { color: var(--sks-amber); width: 13px; height: 13px; flex-shrink: 0; }
.sks-ship-text strong { color: var(--sks-onyx); font-weight: 600; }
.sks-ship-meter.unlocked .sks-ship-text { color: var(--sks-ok); font-weight: 600; }
.sks-ship-meter.unlocked .sks-ship-text svg,
.sks-ship-meter.unlocked .sks-ship-text strong { color: var(--sks-ok); }
.sks-ship-track {
  height: 6px;
  background: rgba(74, 68, 64, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.sks-ship-fill {
  display: block !important; /* override Dawn's `div:empty { display:none }` */
  height: 100%;
  background: var(--sks-amber, #B8520A);
  border-radius: 3px;
  width: 0%;
  min-width: 6px;
  transition: width .6s cubic-bezier(.4,0,.2,1), background-color .25s;
  will-change: width;
}
.sks-ship-meter.unlocked .sks-ship-fill { background: var(--sks-ok); }

/* ── MOBILE STICKY BAR ───────────────────────────────────────────── */
.sks-mob-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--sks-white);
  border-top: 1px solid var(--sks-rule);
  padding: 10px 16px;
  z-index: 80;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  align-items: center;
  gap: 12px;
}
.sks-mob-sticky-info { flex: 1; min-width: 0; }
.sks-mob-sticky-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sks-onyx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sks-mob-sticky-price {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--sks-amber);
  font-size: 14px;
  font-weight: 600;
}
.sks-mob-sticky .sks-btn {
  padding: 10px 18px;
  font-size: 12px;
  width: auto;
  flex-shrink: 0;
}

/* ── FOCUS STYLES (a11y) ─────────────────────────────────────────── */
.sks-product-section a:focus-visible,
.sks-product-section button:focus-visible,
.sks-product-section input:focus-visible,
.sks-thumb:focus-visible,
.sks-gal-dot:focus-visible {
  outline: 2px solid var(--sks-amber);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sks-product-section *,
  .sks-product-section *::before,
  .sks-product-section *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── RESPONSIVE: TABLET (≤960px) ────────────────────────────────── */
@media (max-width: 960px) {
  .sks-prod-wrap { grid-template-columns: 1fr; }

  .sks-gallery {
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    flex-direction: column;
    padding: 16px;
    align-self: auto;
  }
  .sks-thumbs {
    flex-direction: row;
    width: 100%;
    height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    order: 2;
    padding-right: 0;
    padding-bottom: 0;
    /* Hide the horizontal scrollbar on mobile — the strip still scrolls
       (touch swipe works) but the bar itself is visual noise on phones
       where users don't expect or need it. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / old Edge */
  }
  .sks-thumbs::-webkit-scrollbar { display: none; }  /* Chrome / Safari */
  .sks-thumb {
    width: 60px;
    flex-shrink: 0;
    aspect-ratio: 3/4;
  }
  .sks-gal-main {
    order: 1;
    /* No forced aspect-ratio at mobile — letting the ACTIVE image drive
       the container's height (same model as desktop) means whatever
       aspect ratio the customer uploaded fits perfectly, with no
       head/foot cropping when the photo is taller than 3:4. min-height
       also goes to 0 so the desktop 500px floor doesn't inflate the
       container vertically and break the natural aspect on small phones. */
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    position: relative;
  }
  .sks-gal-img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  /* Active image switches back to relative + natural height so it dictates
     the container's height (instead of the inactive-image absolute fill).
     This is the same trick the base desktop rules use; the mobile section
     was overriding it back to absolute/100% which broke the natural-aspect
     behaviour and caused the head/foot crop on portrait photos. */
  .sks-gal-img.active {
    position: relative;
    width: 100%;
    height: auto;
  }

  .sks-details { padding: 30px 24px; }
}

/* ── RESPONSIVE: MOBILE (≤640px) ────────────────────────────────── */
@media (max-width: 640px) {
  /* Global mobile clamp: stop the page from scrolling sideways no matter
     which third-party widget / off-canvas drawer / extra-wide section
     forgets its own `min-width: 0`. Body keeps vertical scroll so
     position:sticky elements still work as expected. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .sks-det-h1 { font-size: 24px; }
  .sks-det-price-now { font-size: 26px; }
  .sks-mob-sticky { display: flex; }

  /* Rating + SKU row: on desktop it's space-between (stars left, SKU right).
     On phones we center both so the stars/count sit under the middle of the
     screen. Applies whether the row wraps or fits one line. */
  .sks-det-meta {
    justify-content: center;
    text-align: center;
  }
  .sks-det-meta .ruk_rating_snippet { justify-content: center; }
  .sks-product-section {
    padding-bottom: 68px;
    max-width: 100vw;
  }
  .sks-product-section,
  .sks-prod-wrap,
  .sks-gallery,
  .sks-details,
  .sks-det-titlerow,
  .sks-det-price-row,
  .sks-options-form,
  #sks-options-fields,
  .sks-opt-block,
  .sks-opt-grid--radio,
  .sks-opt-grid--swatch {
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .sks-product-section,
  .sks-prod-wrap,
  .sks-gallery,
  .sks-details {
    overflow-x: hidden !important;
  }
  /* Force radio/dropdown choice columns to fit — items can shrink instead of
     pushing past the viewport edge. */
  .sks-opt-grid--radio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pleat-opt { min-width: 0; max-width: 100%; }
  .sks-details { padding: 24px 16px; }
  .sks-gallery { padding: 12px; }
  .sks-trust-row { grid-template-columns: repeat(2, 1fr); }

  /* Wrap long text and right-aligned helper links so they don't overflow */
  .sks-det-titlerow,
  .sks-det-price-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}