/* ============================================================
   SABLE — Product page (PDP)
   Loaded only on the product template. Uses tokens from
   sbl-tokens.css exclusively — no local token redefinition.
   ============================================================ */

.sbl-pdp {
  background: var(--sbl-ink);
  padding-top: var(--sbl-s-5);
}

.sbl-pdp__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sbl-s-7);
  align-items: start;
}

@media (min-width: 990px) {
  .sbl-pdp__layout {
    grid-template-columns: 1.3fr 0.85fr;
    gap: var(--sbl-s-8);
  }
}

/* ------------------------------------------------------------
   Gallery
   ------------------------------------------------------------ */
.sbl-pdp__gallery {
  position: relative;
}

.sbl-pdp__gallery-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.sbl-pdp__gallery-track::-webkit-scrollbar { display: none; }

.sbl-pdp__gallery-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sbl-pdp__zoom-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  transition: opacity var(--sbl-dur) var(--sbl-ease);
}
.sbl-pdp__zoom-trigger:hover { opacity: 0.9; }

.sbl-pdp__gallery-item .sbl-media img {
  width: 100%;
  height: 100%;
}

/* Mobile: dots + counter over a snap carousel */
.sbl-pdp__gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sbl-s-4);
  display: flex;
  justify-content: center;
  gap: var(--sbl-s-2);
  pointer-events: none;
}
.sbl-pdp__gallery-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(244, 244, 242, 0.35);
  transition: background var(--sbl-dur) var(--sbl-ease), transform var(--sbl-dur) var(--sbl-ease);
}
.sbl-pdp__gallery-dots span[data-active] {
  background: var(--sbl-paper);
  transform: scale(1.2);
}

/* Sits over the product photo, not the page ground — the chip
   background is a deliberately dark, theme-independent scrim (see
   docs/DESIGN-BRIEF.md), so its text is forced light rather than
   using --sbl-paper (which is now dark and unreadable here). */
.sbl-pdp__gallery-counter {
  position: absolute;
  top: var(--sbl-s-3);
  right: var(--sbl-s-3);
  padding: 0.4rem 1rem;
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  color: var(--sbl-ink);
  background: rgba(10, 10, 11, 0.7);
  border: 1px solid var(--sbl-line);
}

@media (min-width: 990px) {
  .sbl-pdp__gallery-track {
    display: flex;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    gap: var(--sbl-s-3);
  }
  .sbl-pdp__gallery-item { flex: none; scroll-margin-top: var(--sbl-s-6); }
  .sbl-pdp__gallery-item.sbl-is-target .sbl-media {
    outline: 1px solid var(--sbl-signal);
    outline-offset: -1px;
  }
  .sbl-pdp__gallery-dots,
  .sbl-pdp__gallery-counter { display: none; }
}

/* ------------------------------------------------------------
   Buy box
   ------------------------------------------------------------ */
.sbl-pdp__buybox {
  display: flex;
  flex-direction: column;
  /* A single flat gap put ~32px between EVERY child, so brand / title / price
     — which are one idea — read as three disconnected fragments with dead air
     between them. Tight base gap groups the identity block; the larger
     separations below are applied only between actual groups. */
  gap: var(--sbl-s-2);
}

/* Group separation: identity → buy form → trust → stock. */
.sbl-pdp__buybox > .sbl-pdp__form { margin-top: var(--sbl-s-5); }
.sbl-pdp__buybox > .sbl-pdp__trust { margin-top: var(--sbl-s-4); }

@media (min-width: 750px) {
  .sbl-pdp__buybox { gap: var(--sbl-s-3); }
  .sbl-pdp__buybox > .sbl-pdp__form { margin-top: var(--sbl-s-6); }
}

@media (min-width: 990px) {
  .sbl-pdp__buybox {
    position: sticky;
    top: calc(var(--sbl-s-6) + 6rem);
  }
}

.sbl-pdp__brand {
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  color: var(--sbl-mute);
  margin: 0;                 /* UA paragraph margins were stacking on the gap */
}

.sbl-pdp__title {
  font-size: var(--sbl-t-h1);
  margin: 0;
}

.sbl-pdp__price {
  font-size: var(--sbl-t-h3);
  color: var(--sbl-paper);
}
.sbl-pdp__price .price-item--sale,
.sbl-pdp__price .price-item--regular {
  color: var(--sbl-signal);
  font-weight: 600;
}

/* Size grid */
.sbl-pdp__option {
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-3);
}

.sbl-pdp__option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sbl-s-3);
}

.sbl-pdp__option-label {
  font-size: var(--sbl-t-small);
  font-weight: 600;
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  color: var(--sbl-paper);
}
.sbl-pdp__option-label span {
  color: var(--sbl-mute);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.sbl-pdp__size-guide {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--sbl-t-small);
  color: var(--sbl-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
}

.sbl-pdp__size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--sbl-s-2);
}

.sbl-pdp__size-btn {
  min-height: 4.8rem;
  min-width: 4.8rem;
  padding: 0 var(--sbl-s-2);
  background: transparent;
  color: var(--sbl-paper);
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius);
  font: inherit;
  font-size: var(--sbl-t-small);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--sbl-dur) var(--sbl-ease), background var(--sbl-dur) var(--sbl-ease);
}
.sbl-pdp__size-btn:hover:not([disabled]) { border-color: var(--sbl-paper); }
.sbl-pdp__size-btn[aria-pressed="true"] {
  border-color: var(--sbl-signal);
  background: var(--sbl-raise-2);
  color: var(--sbl-signal);
}
.sbl-pdp__size-btn[disabled] {
  position: relative;
  color: var(--sbl-faint);
  border-color: var(--sbl-line-soft);
  cursor: not-allowed;
  background: none;
}
.sbl-pdp__size-btn[disabled]::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: var(--sbl-faint);
  transform: rotate(-8deg);
}

/* Fit note — a tinted panel, not a bordered box; one fewer ruled
   line in the buy path. */
.sbl-pdp__fit-note {
  display: flex;
  gap: var(--sbl-s-3);
  padding: var(--sbl-s-3) var(--sbl-s-4);
  background: var(--sbl-raise-2);
  font-size: var(--sbl-t-small);
  color: var(--sbl-paper);
  line-height: var(--sbl-lh-snug);
}

/* As a flex item the label was shrinking and breaking "Fit note:" across two
   lines against the note itself. It's two words — keep it on one. */
.sbl-pdp__fit-note > strong {
  flex: 0 0 auto;
  white-space: nowrap;
}
.sbl-pdp__fit-note strong {
  color: var(--sbl-signal);
  font-weight: 600;
}

/* Add to bag / express */
.sbl-pdp__form {
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-3);
}

.sbl-pdp__atc {
  width: 100%;
}

.sbl-pdp__atc[aria-disabled="true"] { pointer-events: none; }

.sbl-pdp__express .shopify-payment-button__button {
  min-height: 4.8rem;
}

/* Trust strip — quieter: a single hairline instead of a boxed band,
   the details accordion below supplies its own top rule so a second
   line here would double up. */
.sbl-pdp__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sbl-s-3);
  border-top: var(--sbl-border);
  padding-top: var(--sbl-s-4);
}

.sbl-pdp__trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--sbl-s-1);
  text-align: center;
}
.sbl-pdp__trust-item svg {
  width: 2rem;
  height: 2rem;
  margin-inline: auto;
  color: var(--sbl-mute);
}
.sbl-pdp__trust-item p {
  margin: 0;
  font-size: var(--sbl-t-micro);
  line-height: var(--sbl-lh-snug);
  color: var(--sbl-mute);
}

/* Low stock */
.sbl-pdp__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sbl-s-2);
  font-size: var(--sbl-t-small);
  color: var(--sbl-alert);
}
.sbl-pdp__stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sbl-alert);
}

/* ------------------------------------------------------------
   Details accordion
   ------------------------------------------------------------ */
.sbl-pdp__accordion {
  margin-top: var(--sbl-s-8);
  max-width: 68rem;
}

.sbl-pdp__accordion details {
  border-bottom: var(--sbl-border);
}
.sbl-pdp__accordion details:first-child { border-top: var(--sbl-border); }

.sbl-pdp__accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbl-s-3);
  padding-block: var(--sbl-s-4);
  cursor: pointer;
  font-size: var(--sbl-t-body);
  font-weight: 500;
  color: var(--sbl-paper);
  list-style: none;
  min-height: 4.8rem;
}
.sbl-pdp__accordion summary::-webkit-details-marker { display: none; }

.sbl-pdp__accordion summary .sbl-pdp__accordion-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--sbl-mute);
  transition: transform var(--sbl-dur) var(--sbl-ease);
}
.sbl-pdp__accordion details[open] summary .sbl-pdp__accordion-icon { transform: rotate(45deg); }

.sbl-pdp__accordion-body {
  padding-bottom: var(--sbl-s-5);
  color: var(--sbl-mute);
  font-size: var(--sbl-t-small);
  line-height: var(--sbl-lh-body);
}
.sbl-pdp__accordion-body p { margin: 0 0 var(--sbl-s-3); }
.sbl-pdp__accordion-body p:last-child { margin-bottom: 0; }
.sbl-pdp__accordion-body ul { margin: 0; padding-left: 1.8rem; }

/* ------------------------------------------------------------
   Sticky mobile add-to-bag
   ------------------------------------------------------------ */
.sbl-pdp__sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--sbl-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sbl-s-3);
  padding: var(--sbl-s-3) var(--sbl-gutter);
  padding-bottom: calc(var(--sbl-s-3) + env(safe-area-inset-bottom));
  background: var(--sbl-raise);
  border-top: var(--sbl-border);
  box-shadow: var(--sbl-shadow-lg);
  transform: translateY(100%);
  transition: transform var(--sbl-dur) var(--sbl-ease);
}
.sbl-pdp__sticky-atc[data-visible] { transform: translateY(0); }

@media (min-width: 990px) {
  .sbl-pdp__sticky-atc { display: none; }
}

.sbl-pdp__sticky-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sbl-pdp__sticky-price {
  font-size: var(--sbl-t-body);
  color: var(--sbl-signal);
  font-weight: 600;
}
.sbl-pdp__sticky-size {
  font-size: var(--sbl-t-micro);
  color: var(--sbl-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbl-pdp__sticky-atc .sbl-btn {
  flex: none;
  min-width: 14rem;
}

/* ------------------------------------------------------------
   Modals (zoom + size guide) — plain <modal-dialog>, no
   component-modal CSS is loaded on this template, so the
   show/hide contract lives entirely here.
   ------------------------------------------------------------ */
.sbl-modal:not([open]) { display: none; }
.sbl-modal[open] {
  position: fixed;
  inset: 0;
  z-index: var(--sbl-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 10, 11, 0.85);
}
@media (min-width: 750px) {
  .sbl-modal[open] { align-items: center; }
}

.sbl-modal__panel {
  position: relative;
  width: 100%;
  max-width: 60rem;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--sbl-raise);
  border: var(--sbl-border);
}

.sbl-modal__close {
  position: sticky;
  top: 0;
  left: 100%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin: var(--sbl-s-1);
  background: var(--sbl-raise);
  border: 1px solid var(--sbl-line);
  color: var(--sbl-paper);
  cursor: pointer;
}
.sbl-modal__close svg { width: 1.6rem; height: 1.6rem; }

/* Zoom */
.sbl-zoom-modal .sbl-modal__panel {
  max-width: 90rem;
  background: var(--sbl-ink);
}
.sbl-zoom-modal__img-wrap {
  padding: var(--sbl-s-3);
}
.sbl-zoom-modal__img-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* Size guide */
.sbl-size-guide__panel { padding: var(--sbl-s-5); }
.sbl-size-guide__title {
  font-size: var(--sbl-t-h3);
  margin: 0 0 var(--sbl-s-2);
}
.sbl-size-guide__intro {
  color: var(--sbl-mute);
  font-size: var(--sbl-t-small);
  margin: 0 0 var(--sbl-s-4);
}
.sbl-size-guide__table-wrap {
  overflow-x: auto;
}
.sbl-size-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sbl-t-small);
}
.sbl-size-guide__table th,
.sbl-size-guide__table td {
  padding: var(--sbl-s-2) var(--sbl-s-3);
  border-bottom: 1px solid var(--sbl-line);
  text-align: left;
  white-space: nowrap;
}
.sbl-size-guide__table th {
  color: var(--sbl-mute);
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  font-weight: 500;
}

/* ------------------------------------------------------------
   You may also like — reskin of Dawn's stock related-products
   section, referenced (not edited) from product.json.
   ------------------------------------------------------------ */
.related-products {
  border-top: var(--sbl-border);
  padding-top: var(--sbl-section-y) !important;
}
.related-products__heading {
  font-size: var(--sbl-t-h2) !important;
  margin-bottom: var(--sbl-s-5) !important;
}

/* ------------------------------------------------------------
   Utility: keep space for the sticky bar on mobile so the
   accordion / related rail isn't hidden behind it.
   ------------------------------------------------------------ */
@media (max-width: 989px) {
  body:has(.sbl-pdp__sticky-atc[data-visible]) {
    scroll-padding-bottom: 8rem;
  }
}