/* StyleGauge - category page. Built entirely on tokens.css. */

.sg-shophead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sg-space-12); flex-wrap: wrap; padding: var(--sg-space-12) 0 var(--sg-space-10); border-bottom: var(--sg-rule-ink); }
.sg-shophead__title { margin: 0; font-size: var(--sg-display-xl); font-weight: 900; letter-spacing: var(--sg-display-xl-ls); line-height: var(--sg-display-xl-lh); text-transform: uppercase; }
.sg-shophead__desc { margin: var(--sg-space-5) 0 0; max-width: 52ch; font-size: var(--sg-body-lg); line-height: 1.55; color: var(--sg-body); }
.sg-shophead__trust { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sg-space-10); flex-wrap: wrap; }
.sg-shophead__trust li { display: flex; flex-direction: column; gap: 3px; max-width: 21ch; }
.sg-shophead__trust strong { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; }
.sg-shophead__trust span { font-size: var(--sg-body-sm); color: var(--sg-slate); line-height: 1.5; }

.sg-shop { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: var(--sg-space-13); padding: var(--sg-space-12) 0; align-items: start; }

/* ---- filter rail ---------------------------------------- */
.sg-filters { position: sticky; top: var(--sg-space-8); display: flex; flex-direction: column; gap: var(--sg-space-10); }
.sg-filters__h { margin: 0; font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-ink); }
.sg-facet { border-top: var(--sg-border); padding-top: var(--sg-space-6); }
.sg-facet h3 { margin: 0 0 var(--sg-space-5); font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-facet__list, .sg-facet__swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); }
.sg-facet__swatches { grid-template-columns: 1fr 1fr; gap: var(--sg-space-3); }

.sg-check, .sg-fswatch { display: flex; align-items: center; gap: var(--sg-space-3); padding: 5px 6px; margin-left: -6px; border-radius: var(--sg-radius-sm); font-size: var(--sg-body-sm); color: var(--sg-body); text-decoration: none; min-height: 32px; }
.sg-check:hover, .sg-fswatch:hover { background: var(--sg-cream); color: var(--sg-ink); }
.sg-check i { width: 15px; height: 15px; flex: 0 0 auto; border: var(--sg-border); border-radius: 3px; background: var(--sg-white); }
.sg-check.is-on i { background: var(--sg-ink); border-color: var(--sg-ink); position: relative; }
.sg-check.is-on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sg-check.is-on, .sg-fswatch.is-on { color: var(--sg-ink); font-weight: 600; }
.sg-check span, .sg-fswatch span { flex: 1 1 auto; }
.sg-check em, .sg-fswatch em { font-style: normal; font-size: 11px; color: var(--sg-mute); font-variant-numeric: tabular-nums; }
.sg-fswatch i { width: 17px; height: 17px; flex: 0 0 auto; border-radius: var(--sg-radius-full); background: var(--sw); border: 1px solid transparent; }
.sg-fswatch.has-border i { border-color: var(--sg-line); }
.sg-fswatch.is-on i { box-shadow: var(--sg-ring-select); }

.sg-price-form { display: flex; align-items: center; gap: var(--sg-space-3); flex-wrap: wrap; }
.sg-price-form__to { font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-input--sm { height: 36px; min-width: 0; width: 68px; padding: 0 8px; font-size: var(--sg-body-sm); }
.sg-btn--sm { height: 36px; padding: 0 14px; font-size: 11px; }

/* ---- results bar ---------------------------------------- */
.sg-results__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-9); flex-wrap: wrap; padding-bottom: var(--sg-space-6); border-bottom: var(--sg-border); }
.sg-results__count { margin: 0; font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-results__count strong { color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-sort { display: flex; align-items: center; gap: var(--sg-space-5); flex-wrap: wrap; }
.sg-sort__label { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-sort ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sg-space-4); flex-wrap: wrap; }
.sg-sort a { font-size: var(--sg-body-sm); color: var(--sg-slate); text-decoration: none; padding: 4px 0; }
.sg-sort a:hover { color: var(--sg-ink); }
.sg-sort a.is-on { color: var(--sg-ink); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--sg-ink); }

.sg-chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-3); padding: var(--sg-space-6) 0 0; }
.sg-chipx { display: inline-flex; align-items: center; gap: var(--sg-space-3); height: 32px; padding: 0 12px; border: var(--sg-border); border-radius: var(--sg-radius-full); background: var(--sg-white); font-size: var(--sg-body-sm); color: var(--sg-ink); text-decoration: none; }
.sg-chipx:hover { border-color: var(--sg-ink); }
.sg-chipx span[aria-hidden] { color: var(--sg-slate); font-size: 15px; line-height: 1; }
.sg-chipx--clear { border-style: dashed; color: var(--sg-slate); }

/* ---- product grid --------------------------------------- */
.sg-grid { list-style: none; margin: var(--sg-space-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sg-space-7); }
.sg-card { position: relative; display: flex; flex-direction: column; }
.sg-card__img { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--sg-radius-lg); background: var(--sg-beige); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sg-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sg-card__ph { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7E7568; }
.sg-card__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--sg-radius-sm); background: var(--sg-success-tint); color: var(--sg-success-deep); border: 1px solid var(--sg-success-line); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sg-card__save { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: var(--sg-radius-full); background: var(--sg-white); border: var(--sg-border); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sg-card__save svg { width: 15px; height: 15px; fill: none; stroke: var(--sg-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sg-card__body { display: flex; flex-direction: column; gap: 5px; padding-top: var(--sg-space-5); }
.sg-card__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-card__name { margin: 0; font-size: var(--sg-body-sm); font-weight: 600; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.sg-card__name a { color: var(--sg-ink); text-decoration: none; }
.sg-card__name a:hover { text-decoration: underline; }
.sg-card__price { display: flex; align-items: baseline; gap: var(--sg-space-3); }
.sg-card__price .sg-price { font-size: var(--sg-price); }
.sg-card__oos { font-size: var(--sg-body-sm); color: var(--sg-slate); font-weight: 600; }
.sg-card__swatches { display: flex; gap: 4px; }
.sg-card__swatches i { width: 11px; height: 11px; border-radius: var(--sg-radius-full); background: var(--sw); border: 1px solid var(--sg-line); }
.sg-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); margin-top: 2px; }
.sg-card__stores { margin-left: auto; font-size: 11px; color: var(--sg-slate); font-variant-numeric: tabular-nums; }
.sg-card__compare { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--sg-slate); cursor: pointer; }
.sg-card__compare input { width: 14px; height: 14px; accent-color: var(--sg-ink); }

.sg-pager { margin-top: var(--sg-space-13); }
.sg-pager ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sg-space-3); justify-content: center; flex-wrap: wrap; }
.sg-pager a, .sg-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: var(--sg-border); border-radius: var(--sg-radius-md); font-size: var(--sg-body-sm); text-decoration: none; color: var(--sg-ink); }
.sg-pager .current { background: var(--sg-ink); color: var(--sg-white); border-color: var(--sg-ink); }

/* ---- compare tray --------------------------------------- */
.sg-tray { position: sticky; bottom: 0; z-index: 20; margin-top: var(--sg-space-10); background: var(--sg-white); border-top: var(--sg-border); box-shadow: var(--sg-shadow-bar); }
.sg-tray__inner { display: flex; align-items: center; gap: var(--sg-space-9); padding: var(--sg-space-6) var(--sg-space-8); flex-wrap: wrap; }
.sg-tray__count { margin: 0; font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; }
.sg-tray__items { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sg-space-5); flex: 1 1 auto; flex-wrap: wrap; font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-tray__actions { display: flex; gap: var(--sg-space-3); margin-left: auto; }
.sg-tray [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---- internal links ------------------------------------- */
.sg-links { padding: var(--sg-space-12) 0; border-top: var(--sg-border); }
.sg-links__list { list-style: none; margin: var(--sg-space-7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-3); }
.sg-links__list a { display: inline-flex; align-items: center; gap: var(--sg-space-3); height: 38px; padding: 0 14px; border: var(--sg-border); border-radius: var(--sg-radius-full); font-size: var(--sg-body-sm); color: var(--sg-ink); text-decoration: none; }
.sg-links__list a:hover { border-color: var(--sg-ink); background: var(--sg-cream); }
.sg-links__list i { width: 13px; height: 13px; border-radius: var(--sg-radius-full); background: var(--sw); border: 1px solid transparent; }
.sg-links__list i.has-border { border-color: var(--sg-line); }

/* ---- responsive ----------------------------------------- */
@media (max-width: 1279px) { .sg-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1023px) {
  .sg-shop { grid-template-columns: 1fr; gap: var(--sg-space-10); }
  .sg-filters { position: static; }
  .sg-facet__swatches { grid-template-columns: repeat(3, 1fr); }
  .sg-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .sg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sg-space-5); }
  .sg-shophead__title { font-size: var(--sg-display-lg); }
  .sg-tray__inner { padding: var(--sg-space-5) var(--sg-space-6); gap: var(--sg-space-5); }
  .sg-tray__items { display: none; }
}