/* StyleGauge - product surfaces. Built entirely on tokens.css. */

.sg-main { padding: 0 0 var(--sg-space-15); }
.sg-h2 { font-size: var(--sg-heading-lg); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.sg-h3 { font-size: var(--sg-heading-sm); font-weight: 700; letter-spacing: var(--sg-heading-sm-ls); text-transform: uppercase; margin: 0; }

/* ---- breadcrumbs ---------------------------------------- */
.sg-crumbs { padding: var(--sg-space-6) 0; border-bottom: var(--sg-border); }
.sg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-4); font-size: var(--sg-meta, 12.5px); color: var(--sg-slate); }
.sg-crumbs li + li::before { content: "\203A"; margin-right: var(--sg-space-4); color: var(--sg-mute); }
.sg-crumbs a { color: var(--sg-slate); text-decoration: none; }
.sg-crumbs a:hover { color: var(--sg-ink); text-decoration: underline; }
.sg-crumbs [aria-current] { color: var(--sg-ink); font-weight: 600; }

/* ---- product detail ------------------------------------- */
.sg-pdp { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--sg-space-12); padding: var(--sg-space-12) 0; align-items: start; }
.sg-pdp__media { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--sg-space-7); }
.sg-pdp__thumbs { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sg-thumb { aspect-ratio: 4/5; border-radius: var(--sg-radius-md); border: var(--sg-border); background: var(--sg-beige); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
.sg-thumb.is-active { border: var(--sg-border-strong); }
.sg-thumb span { font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: #7E7568; }
.sg-pdp__main { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: var(--sg-radius-lg); background: var(--sg-beige); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sg-pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.sg-pdp__ph { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7E7568; text-align: center; line-height: 1.8; }
.sg-heart { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: var(--sg-radius-full); background: var(--sg-white); border: var(--sg-border); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-heart svg { width: 18px; height: 18px; fill: none; stroke: var(--sg-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.sg-pdp__info { display: flex; flex-direction: column; gap: var(--sg-space-5); }
.sg-pdp__title { font-size: var(--sg-display-md); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; text-transform: uppercase; margin: 0; }
.sg-pdp__brand { margin: 0; font-size: var(--sg-label-brand); font-weight: 500; letter-spacing: var(--sg-label-brand-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sg-space-4); margin-top: var(--sg-space-3); }
.sg-pdp__from { font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sg-ink); }
.sg-price--xl { font-size: var(--sg-price-xl); font-weight: 800; letter-spacing: -.02em; }
.sg-price--none { font-size: var(--sg-heading-md); color: var(--sg-slate); font-weight: 600; }
.sg-price.is-sale { color: var(--sg-alert); }
.sg-pdp__spread { margin: 0; font-size: var(--sg-body-sm); color: var(--sg-slate); }

.sg-chip { display: inline-block; padding: 3px 9px; border-radius: var(--sg-radius-sm); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sg-chip--success { background: var(--sg-success-tint); color: var(--sg-success-deep); border: 1px solid var(--sg-success-line); }

.sg-field { display: flex; flex-direction: column; gap: var(--sg-space-4); margin-top: var(--sg-space-3); }
.sg-field__label { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-swatchrow { display: flex; gap: var(--sg-space-4); flex-wrap: wrap; }
.sg-swatch { width: 30px; height: 30px; border-radius: var(--sg-radius-full); background: var(--sw); border: 1px solid transparent; cursor: pointer; padding: 0; }
.sg-swatch.has-border { border-color: var(--sg-line); }
.sg-swatch.is-selected { box-shadow: var(--sg-ring-select); }

.sg-sizes { display: flex; gap: var(--sg-space-3); flex-wrap: wrap; }
.sg-size { min-width: var(--sg-hit-min); height: var(--sg-hit-min); padding: 0 var(--sg-space-5); border: var(--sg-border); border-radius: var(--sg-radius-md); background: var(--sg-white); font-family: var(--sg-font); font-size: var(--sg-body-sm); font-weight: 600; color: var(--sg-ink); cursor: pointer; }
.sg-size:hover { border-color: var(--sg-ink); }
.sg-size.is-gone { color: var(--sg-mute); text-decoration: line-through; cursor: not-allowed; background: var(--sg-cream); }
.sg-sizes__note { margin: 0; font-size: var(--sg-body-sm); font-weight: 600; color: var(--sg-success); }
.sg-sizes__note.is-gone { color: var(--sg-amber); }

.sg-fit { display: flex; align-items: center; gap: var(--sg-space-4); padding: var(--sg-space-5) var(--sg-space-6); background: var(--sg-success-tint); border: 1px solid var(--sg-success-line); border-radius: var(--sg-radius-md); font-size: var(--sg-body-sm); color: var(--sg-success-deep); }
.sg-fit svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--sg-success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sg-pdp__cta { display: flex; gap: var(--sg-space-3); flex-wrap: wrap; margin-top: var(--sg-space-3); }
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sg-space-3); height: var(--sg-hit-min); padding: 0 22px; border: 1px solid var(--sg-ink); border-radius: var(--sg-radius-md); background: var(--sg-ink); color: var(--sg-white); text-decoration: none; font-family: var(--sg-font); font-size: var(--sg-button); font-weight: var(--sg-button-w); letter-spacing: var(--sg-button-ls); text-transform: uppercase; cursor: pointer; transition: background var(--sg-dur-fast) var(--sg-ease); }
.sg-btn:hover { background: #000; color: var(--sg-white); }
.sg-btn--lg { height: 52px; flex: 1 1 200px; }
.sg-btn--ghost { background: var(--sg-white); color: var(--sg-ink); }
.sg-btn--ghost:hover { background: var(--sg-cream); color: var(--sg-ink); }
.sg-spark { color: var(--sg-gold-ink); }

.sg-pdp__trust { list-style: none; margin: var(--sg-space-3) 0 0; padding: var(--sg-space-6) 0 0; border-top: var(--sg-border); display: grid; gap: var(--sg-space-4); font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-pdp__trust li { display: flex; align-items: center; gap: var(--sg-space-3); }
.sg-pdp__trust a { color: var(--sg-ink); }

.sg-dot { width: 7px; height: 7px; border-radius: var(--sg-radius-full); background: var(--sg-slate); flex: 0 0 auto; display: inline-block; }
.sg-dot--fresh, .sg-dot--in-stock { background: var(--sg-success); }
.sg-dot--stale, .sg-dot--low-stock { background: var(--sg-amber); }
.sg-dot--out-of-stock, .sg-dot--stock-unknown { background: var(--sg-mute); }

/* ---- comparison table ----------------------------------- */
.sg-compare { padding: var(--sg-space-12) 0; border-top: var(--sg-rule-ink); }
.sg-compare__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sg-space-9); flex-wrap: wrap; padding-bottom: var(--sg-space-6); }
.sg-compare__match { margin: 6px 0 0; font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-stamp { margin: 0; display: flex; align-items: center; gap: var(--sg-space-3); font-size: 12px; font-weight: 600; color: var(--sg-slate); }
.sg-stamp--stale { color: var(--sg-amber); }

.sg-table { border: var(--sg-border); border-radius: var(--sg-radius-lg); overflow: hidden; }
.sg-table__head, .sg-row { display: grid; grid-template-columns: 1.75fr 1fr 1fr 1.05fr .85fr 1fr .9fr 168px; gap: var(--sg-space-7); align-items: center; padding: var(--sg-space-5) var(--sg-space-8); }
.sg-table__head { background: var(--sg-cream); }
.sg-table__head span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-slate); }
.sg-row { border-top: var(--sg-border); background: var(--sg-white); padding-top: var(--sg-space-7); padding-bottom: var(--sg-space-7); font-size: var(--sg-body-sm); }
.sg-row.is-unavailable { opacity: .55; }
.sg-row.is-similar { background: var(--sg-cream-2); }

.sg-row__store { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sg-space-2); }
.sg-logo { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 60px; padding: 0 8px; border: var(--sg-border); border-radius: var(--sg-radius-xs); background: var(--sg-white); }
.sg-logo img { max-height: 16px; width: auto; filter: grayscale(1); transition: filter var(--sg-dur-fast) var(--sg-ease); }
.sg-row:hover .sg-logo img { filter: none; }
.sg-logo__initials { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--sg-slate); }
.sg-row__name { font-size: 13.5px; font-weight: 600; color: var(--sg-ink); }
.sg-badge { display: inline-block; padding: 3px 8px; border-radius: var(--sg-radius-sm); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sg-badge--ink { background: var(--sg-ink); color: var(--sg-white); border: 1px solid var(--sg-ink); }
.sg-badge--success { background: var(--sg-success); color: var(--sg-white); border: 1px solid var(--sg-success); }
.sg-badge--outline { background: var(--sg-white); color: var(--sg-ink); border: 1px solid var(--sg-ink); }
.sg-note { font-size: 11.5px; color: var(--sg-slate); }
.sg-note--warn { color: var(--sg-amber); font-weight: 500; }

.sg-row__price { display: flex; flex-direction: column; gap: 3px; }
.sg-row__price .sg-price { font-size: var(--sg-price-lg); line-height: 1.1; }
.sg-was { font-size: 11.5px; color: var(--sg-mute); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.sg-off { color: var(--sg-alert); text-decoration: none; font-weight: 700; }
.sg-row__ship, .sg-row__ret { color: var(--sg-ink); }
.sg-row__del, .sg-row__sizes, .sg-row__ret { color: var(--sg-slate); }
.sg-row__stock { display: flex; align-items: center; gap: var(--sg-space-3); font-weight: 600; }
.sg-btn--row { width: 100%; height: 44px; padding: 0 12px; font-size: 11.5px; letter-spacing: .06em; }
.sg-btn--row.is-muted { background: var(--sg-white); color: var(--sg-mute); border-color: var(--sg-line); }

.sg-disclosure { margin: var(--sg-space-6) 0 0; max-width: 86ch; font-size: var(--sg-body-sm); line-height: 1.65; color: var(--sg-slate); }
.sg-empty { padding: var(--sg-space-12); border: var(--sg-border-dashed); border-radius: var(--sg-radius-lg); text-align: center; color: var(--sg-slate); }

/* ---- price history -------------------------------------- */
.sg-history { padding: var(--sg-space-10) 0; border-top: var(--sg-border); }
.sg-history__head { display: flex; align-items: center; gap: var(--sg-space-5); flex-wrap: wrap; margin-bottom: var(--sg-space-6); }
svg.sg-spark { display: block; width: 100%; height: 64px; }
svg.sg-spark polyline { fill: none; stroke: var(--sg-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sg-history__scale { display: flex; justify-content: space-between; margin-top: var(--sg-space-3); font-size: 11.5px; color: var(--sg-slate); font-variant-numeric: tabular-nums; }

.sg-editorial { padding: var(--sg-space-12) 0; border-top: var(--sg-border); }
.sg-editorial p { max-width: var(--sg-max-measure); color: var(--sg-body); }

/* ---- responsive ----------------------------------------- */
@media (max-width: 1023px) {
  .sg-pdp { grid-template-columns: 1fr; }
  .sg-table__head { display: none; }
  .sg-row { grid-template-columns: 1fr 1fr; gap: var(--sg-space-4) var(--sg-space-7); padding: var(--sg-space-8); }
  .sg-row__store { grid-column: 1 / -1; }
  .sg-row__cta { grid-column: 1 / -1; }
  .sg-row__sizes, .sg-row__ret { font-size: 12px; }
}
@media (max-width: 767px) {
  .sg-pdp__media { grid-template-columns: 1fr; }
  .sg-pdp__thumbs { flex-direction: row; overflow-x: auto; }
  .sg-thumb { width: 64px; flex: 0 0 auto; }
  .sg-pdp__cta { flex-direction: column; }
  .sg-btn--lg { width: 100%; }
}
/* Remote retailer imagery. Containers own the aspect ratio so a feed image
   of unknown dimensions cannot shift the layout as it loads. */
.sg-thumb { overflow: hidden; }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-thumb span { font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: #7E7568; }