/* =========================================================
   Sugo Toys — Good Smile Clearance
   Scoped under .sgc so Flatsome CSS doesn't leak / collide.
   Mobile-first. Flat editorial. Josefin Sans.
   ========================================================= */

.sgc {
  /* tokens */
  --sgc-bg: #ffffff;
  --sgc-surface: #fafafa;
  --sgc-ink: #141414;
  --sgc-body: #2b2b2b;
  --sgc-muted: #8a8a8a;
  --sgc-line: #e6e6e6;
  --sgc-line-strong: #141414;
  --sgc-red: #f04948;
  --sgc-success: #1b7a3e;
  --sgc-radius: 4px;
  --sgc-font: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sgc-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  font-family: var(--sgc-font);
  color: var(--sgc-body);
  background: var(--sgc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: clip;
}

.sgc *, .sgc *::before, .sgc *::after { box-sizing: border-box; }
.sgc [hidden] { display: none !important; }
.sgc img { max-width: 100%; }

.sgc button {
  font: inherit; color: inherit; cursor: pointer;
}
/* Explicitly restore all the component buttons we need — beats `.sgc button` reset by being more specific */
.sgc input, .sgc select {
  font: inherit; color: inherit;
}
.sgc a { color: inherit; text-decoration: none; }

/* ---------- HERO ---------- */
.sgc-hero {
  position: relative;
  /* v1.5.13 — operator-configurable solid background (admin → Hero →
     Background color). Inline `--sgc-hero-color` injected by the
     template; falls back to near-black if missing. */
  background: var(--sgc-hero-color, #0a0a0a);
  color: #fff;
  padding: 88px 24px 72px;
  overflow: hidden;
  isolation: isolate;
}
.sgc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.08), transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,0.035) 119px 120px);
  pointer-events: none;
}
.sgc-hero__inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  display: grid; gap: 28px;
}
/* v2.0.18 — optional per-offer brand lockup. Sits above the eyebrow in
   the same left-aligned column as the rest of the hero copy. Height-driven
   so any aspect ratio behaves; capped on width so a wide wordmark can't
   push past the text column. */
.sgc-hero .sgc-hero__logo {
  height: 68px; width: auto; max-width: min(340px, 66vw);
  object-fit: contain; object-position: left center;
  display: block; margin-bottom: 2px;
  opacity: 0.92;
}
.sgc-hero__eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; gap: 12px;
  font-weight: 500;
}
.sgc-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px; background: rgba(255,255,255,0.45);
}
.sgc-hero__title {
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.sgc-hero__title em {
  font-style: normal;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  display: inline;
}
.sgc-hero__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 4px 0 0;
  line-height: 1.55;
}
.sgc-hero__note {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 640px;
  margin: 4px 0 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border-left: 2px solid var(--sgc-red);
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.sgc-hero__note i {
  color: var(--sgc-red);
  font-size: 13px;
  margin-top: 3px;
  flex-shrink: 0;
}
.sgc-hero__note strong {
  color: #fff;
  font-weight: 600;
}
/* v1.5.20 — independence disclaimer rendered inline after the note.
   Smaller + slightly more muted so it reads as a footnote, not as a
   second sentence with equal weight. */
.sgc-hero__note-disclaimer {
  display: inline;
  font-size: 11.5px;
  font-style: italic;
  color: rgba(255,255,255,0.62);
  margin-left: 4px;
}
.sgc-hero__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 28px;
  margin: 16px 0 0;
}
.sgc-hero__stat {
  padding: 0 40px 0 0;
  margin-right: 40px;
  border-right: 1px solid rgba(255,255,255,0.15);
  min-width: 0;
}
.sgc-hero__stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sgc-hero__stat dt {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  font-weight: 500;
}
.sgc-hero__stat dd {
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
  margin: 0;
  color: #fff;
}
.sgc-hero__stat dd small {
  font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em; text-transform: uppercase;
}
@media (max-width: 640px) {
  .sgc-hero .sgc-hero__logo { height: 40px; max-width: 66vw; }
  .sgc-hero {
    padding: 36px 18px 28px;
  }
  .sgc-hero__inner { gap: 18px; }
  .sgc-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    gap: 10px;
  }
  .sgc-hero__eyebrow::before { width: 18px; }
  .sgc-hero__subtitle {
    font-size: 13px;
    line-height: 1.5;
  }
  .sgc-hero__note {
    font-size: 11px;
    line-height: 1.5;
    padding: 10px 12px;
    gap: 9px;
  }
  .sgc-hero__note i { font-size: 11px; margin-top: 2px; }
  .sgc-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding-top: 18px;
    margin-top: 6px;
  }
  .sgc-hero__stat {
    padding: 0 12px;
    margin: 0;
    border-right: 1px solid rgba(255,255,255,0.15);
    min-width: 0;
  }
  .sgc-hero__stat:first-child { padding-left: 0; }
  .sgc-hero__stat:last-child { padding-right: 0; border-right: 0; }
  .sgc-hero__stat dt {
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
  }
  .sgc-hero__stat dd {
    font-size: 17px;
    gap: 3px;
    flex-wrap: wrap;
    letter-spacing: -0.015em;
  }
  .sgc-hero__stat dd small {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  /* compact countdown: tight kerning between numbers */
  #sgc-stat-countdown { letter-spacing: -0.02em; }
  #sgc-stat-countdown small { margin-right: 2px; }
}

/* ---------- STICKY FILTER BAR ---------- */
.sgc-stickybar {
  /* v1.5.14 — chiprows moved out of .sgc-stickybar in the template, so
     this bar now contains ONLY the slim search/sort/cart row. That row
     stays pinned to the top for the entire page scroll, keeping the
     search input visible and inviting while customers browse the grid.
     Light box-shadow draws the eye to the input once content scrolls
     beneath it. */
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--sgc-line);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.18);
  overflow-x: clip;                   /* belt-and-braces against runaway flex children */
}
.sgc-stickybar__row {
  /* v1.5.5 — slightly more vertical padding for breathing room around
     the search + sort + cart row. Horizontal stays tight. */
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.sgc-stickybar__row > * { min-width: 0; }
.sgc-search {
  /* v1.5.4 — search takes the biggest share. The cap is removed now
     that the sort/cart/filter buttons are locked to inline-flex auto
     width via !important (Flatsome can no longer force them full-row).
     Search grows to fill whatever space remains. */
  flex: 1 1 180px;
  min-width: 0; max-width: 100%;
  display: flex; align-items: center; gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  background: #fff;
  transition: border-color .15s ease;
  box-sizing: border-box;
}
.sgc-search:focus-within { border-color: var(--sgc-ink); }
.sgc-search i,
.sgc-search > .sgc-icon { color: var(--sgc-muted); font-size: 13px; flex-shrink: 0; width: 14px; height: 14px; }
/* v1.5.1 — bump specificity with `.sgc` parent + !important so the
   Flatsome theme's `input[type="search"]` rules don't paint a border /
   padding / background on this field, which was making the icon look
   detached from the input box. Same fix we applied to .sgc-ipfilter__input
   in v1.4.3. */
.sgc .sgc-search input {
  flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  font-size: 13px !important; color: var(--sgc-ink) !important;
  font-family: inherit !important;
  padding: 0 !important; margin: 0 !important;
  height: auto !important; line-height: 1.2 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sgc .sgc-search input:focus,
.sgc .sgc-search input:focus-visible {
  outline: 0 !important; box-shadow: none !important; border: 0 !important;
}
.sgc-search input::placeholder { color: var(--sgc-muted); }
/* v1.5.5 — `.sgc` parent + !important so Flatsome's button rules
   (which were forcing display:block/width:100%) don't push the X
   icon outside the search box. Lock to inline-flex auto-width. */
.sgc .sgc-search__clear {
  flex: 0 0 auto !important;
  width: 18px !important; height: 18px !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important;
  box-shadow: none !important;
  color: var(--sgc-muted) !important; font-size: 12px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 1 !important;
}
.sgc .sgc-search__clear .sgc-icon { width: 12px; height: 12px; }
.sgc .sgc-search--has-value .sgc-search__clear { display: inline-flex !important; }
.sgc .sgc-search__clear:hover { color: var(--sgc-ink) !important; }

/* v1.5.4 — `.sgc` parent + !important on width/flex so Flatsome's
   `select { width: 100% }` rule doesn't make the sort dropdown
   take a full row by itself, pushing cart down. */
.sgc .sgc-sort {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 180px;
  height: 34px; padding: 0 28px 0 10px;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  font-size: 12px !important; background: #fff;
  font-family: inherit !important;
  color: var(--sgc-ink) !important;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23141414' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
  cursor: pointer;
  margin: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
/* v1.5.4 — Flatsome can force `<a>` elements with .button-style classes
   (or `flex` children) to width:100%; lock to inline-flex auto width. */
.sgc .sgc-cart {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--sgc-ink);
  border-radius: var(--sgc-radius);
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  font-family: inherit !important;
  text-decoration: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sgc-ink);
  transition: background .15s ease, color .15s ease;
}
.sgc-cart:hover { background: var(--sgc-ink); color: #fff; }
.sgc-cart__count {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--sgc-ink); color: #fff;
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.sgc-cart:hover .sgc-cart__count { background: #fff; color: var(--sgc-ink); }

/* v1.5.4 — same lock-to-inline-flex pattern; Flatsome's button styles
   apply width:100% on form buttons inside flex parents, breaking the
   single-row layout. */
.sgc .sgc-mobile-filter-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  display: none;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--sgc-ink) !important;
  border-radius: var(--sgc-radius);
  font-size: 11px !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  align-items: center; gap: 6px;
  font-family: inherit !important;
  background: #fff !important;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.sgc .sgc-filter-toggle {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--sgc-line) !important;
  border-radius: var(--sgc-radius);
  font-size: 11px !important; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sgc-body) !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  background: #fff !important;
  font-family: inherit !important;
  cursor: pointer;
  transition: border-color .12s, color .12s;
  margin: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.sgc-filter-toggle:hover { border-color: var(--sgc-ink); color: var(--sgc-ink); }
.sgc-filter-toggle i { font-size: 12px; color: var(--sgc-muted); }
.sgc-filter-toggle[aria-expanded="false"] i { color: var(--sgc-ink); }
.sgc-chiprows {
  overflow: hidden;
}
.sgc-mobile-filter-btn__badge {
  background: var(--sgc-ink); color: #fff;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 99px; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- CHIP ROWS (desktop) ---------- */
.sgc-chiprows {
  max-width: 1240px; margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  transition: grid-template-rows .28s ease;
}
.sgc-chiprows.sgc-chiprows--collapsed {
  grid-template-rows: minmax(0, 0fr);
}
.sgc-chiprows__inner {
  /* v1.5.5 — tighter row spacing inside the chip filter section. */
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 8px 0 4px;
}
.sgc-chiprow {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: start;
}
.sgc-chiprow__label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sgc-muted); padding-top: 5px;
  font-weight: 500;
}
.sgc-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.sgc-chip {
  height: 26px; padding: 0 10px;
  border: 1px solid var(--sgc-line);
  border-radius: 99px;
  background: #fff;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sgc-ink);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
}
.sgc-chip:hover {
  border-color: var(--sgc-ink);
  background: #fafafa;
}
.sgc-chip__count {
  color: var(--sgc-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding-left: 2px;
  border-left: 1px solid var(--sgc-line);
  margin-left: 2px;
  padding-left: 8px;
}
.sgc-chip--active {
  background: var(--sgc-ink) !important;
  color: #fff !important;
  border-color: var(--sgc-ink);
}
.sgc-chip--active:hover { background: #000 !important; }
.sgc-chip--active .sgc-chip__count {
  color: rgba(255,255,255,0.75) !important;
  border-left-color: rgba(255,255,255,0.25);
}
.sgc-chip--showall {
  background: transparent; border-style: dashed; color: var(--sgc-muted);
}
.sgc-chip--showall:hover { color: var(--sgc-ink); }
.sgc-chip--pulse .sgc-chip__dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--sgc-red);
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .sgc-chip--pulse .sgc-chip__dot { animation: sgc-pulse 1.6s infinite; }
}
@keyframes sgc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* ---------- RESULTS BAR ---------- */
.sgc-resultsbar {
  /* v1.5.2 — compact: less vertical space + smaller fonts. */
  max-width: 1240px; margin: 0 auto;
  padding: 12px 16px 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--sgc-line);
}
.sgc-resultsbar__count {
  font-size: 12px; color: var(--sgc-body);
}
.sgc-resultsbar__count strong {
  color: var(--sgc-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sgc-resultsbar__clear {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sgc-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.sgc-resultsbar__clear:hover { color: var(--sgc-ink); border-bottom-color: var(--sgc-ink); }
.sgc-resultsbar__clear[hidden] { display: none; }

/* ---------- GRID + CARD ---------- */
.sgc-grid {
  max-width: 1840px; margin: 0 auto;
  padding: 28px 24px 80px;
  display: grid;
  /* base: 6 cols on standard desktop */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 14px;
}
/* very large screens: up to 8 columns */
@media (min-width: 1800px) {
  .sgc-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 32px 16px;
  }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  .sgc-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.sgc-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}
.sgc-card__media {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  background: var(--sgc-surface);
  overflow: hidden;
  cursor: zoom-in;
}
.sgc-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sgc-card__img--fallback {
  object-fit: contain;
  padding: 18%;
  background: #f3f1ec;
}
.sgc-card:hover .sgc-card__img--fallback { transform: none !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sgc-card:hover .sgc-card__img { transform: scale(1.04); }
}

.sgc-card__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--sgc-ink); color: #fff;
  /* v1.4.2 — tightened so OFF + stock badges don't overlap on
     narrow grid columns (mobile + low-DPI desktop). */
  font-size: 9px; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 99px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sgc-card__stock {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  border: 1px solid var(--sgc-line);
  /* v1.4.2 — same tightening as the OFF badge so labels like
     "ONLY A FEW LEFT" don't crash into "-28% OFF" on narrow cards. */
  font-size: 9px; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 99px;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--sgc-ink);
  white-space: nowrap;
}
/* v1.4.0 — inline SVG icon helpers (replaces FontAwesome). All icons
   inherit currentColor so existing colour rules continue to apply. */
.sgc-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
@keyframes sgc-spin { to { transform: rotate(360deg); } }
.sgc-spin { animation: sgc-spin .9s linear infinite; transform-origin: 50% 50%; }

.sgc-card__stock--last { color: var(--sgc-red); border-color: var(--sgc-red); }
.sgc-card__stock--soldout {
  color: #6b6b6b;
  background: rgba(0,0,0,0.78);
  color: #fff;
  border-color: transparent;
  letter-spacing: 0.14em;
}

/* Sold-out card — greyed media + disabled action; sorted to grid end */
.sgc-card--soldout .sgc-card__media,
.sgc-card--soldout .sgc-card__img {
  filter: grayscale(0.85) brightness(0.96);
  opacity: 0.78;
}
.sgc-card--soldout .sgc-card__name,
.sgc-card--soldout .sgc-card__price-now,
.sgc-card--soldout .sgc-card__price-rrp,
.sgc-card--soldout .sgc-card__save,
.sgc-card--soldout .sgc-card__meta { color: #8a8a8a !important; }
.sgc-card--soldout .sgc-card__price-rrp { text-decoration: line-through; }
.sgc-card--soldout .sgc-addbtn[disabled] {
  background: #f3f1ec !important;
  color: #6b6b6b !important;
  border-color: #ddd !important;
  cursor: not-allowed;
  width: 100%;
}
.sgc-card__stock-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--sgc-red);
}
@media (prefers-reduced-motion: no-preference) {
  .sgc-card__stock--last .sgc-card__stock-dot {
    animation: sgc-pulse 1.4s infinite;
    box-shadow: 0 0 0 0 rgba(240,73,72,0.6);
  }
}

.sgc-card__body {
  padding: 12px 0 0;
  display: flex; flex-direction: column; gap: 5px;
  flex: 1;
}
.sgc-card__meta {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sgc-muted);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgc-card__meta-sep {
  width: 2px; height: 2px; border-radius: 99px; background: var(--sgc-muted);
}
.sgc-card__sku {
  font-family: var(--sgc-mono);
  font-size: 10px; color: var(--sgc-muted); letter-spacing: 0.05em;
}
.sgc-card__name {
  font-size: 13px; font-weight: 500;
  color: var(--sgc-ink); line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.sgc-card__price {
  margin-top: 4px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sgc-card__price-now {
  font-size: 16px; font-weight: 700; color: var(--sgc-ink);
  letter-spacing: -0.01em;
}
.sgc-card__price-rrp {
  font-size: 12px; color: var(--sgc-muted); text-decoration: line-through;
}

/* v1.5.25 — price values are now wrapped in WC's standard
   `.woocommerce-Price-amount` markup so currency-switcher plugins can
   recognise + convert them. The Flatsome theme (and WC's own stylesheet)
   define their own styles for these classes that conflict with our
   card layout — reset font/padding so the price inherits our card
   styling above, and let the line-through on `.sgc-card__price-rrp`
   continue to apply via the strikethrough rule on the parent. */
.sgc-card__price-now .woocommerce-Price-amount,
.sgc-card__price-rrp .woocommerce-Price-amount,
.sgc-modal__price .woocommerce-Price-amount,
.sgc-modal__rrp .woocommerce-Price-amount {
  font: inherit; color: inherit; padding: 0; background: transparent;
  text-decoration: inherit; letter-spacing: inherit;
  display: inline; white-space: nowrap;
}
.sgc-card__price-now .woocommerce-Price-amount > bdi,
.sgc-card__price-rrp .woocommerce-Price-amount > bdi,
.sgc-modal__price .woocommerce-Price-amount > bdi,
.sgc-modal__rrp .woocommerce-Price-amount > bdi {
  font: inherit; color: inherit; text-decoration: inherit;
  letter-spacing: inherit;
}
/* v1.5.25 — `.sgc-card__save` and `.sgc-modal__save` "Save N%" text
   removed at operator request. We hide via CSS too (not just by
   stopping the JS from emitting it) so any browser still running the
   pre-1.5.25 JS from cache also stops showing the text the moment the
   new CSS loads. Safe to delete the `.sgc-card__save` rule entirely
   in a future release once everyone's cache has rolled over. */
.sgc-card__save,
.sgc-modal__save { display: none !important; }

.sgc-card__actions {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 6px;
}
.sgc-card__actions .sgc-stepper,
.sgc-card__actions .sgc-addbtn {
  height: 40px;
  box-sizing: border-box;
  line-height: 1;
  margin: 0;
}
.sgc-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  height: 40px;
  overflow: hidden;
}
.sgc-stepper__btn {
  width: 22px; font-size: 13px; font-weight: 600;
  color: var(--sgc-ink);
  padding: 0;
}
.sgc-stepper__btn:disabled { color: var(--sgc-line); cursor: not-allowed; }
.sgc-stepper__val {
  width: 20px; text-align: center;
  border: 0; outline: 0;
  font-size: 12px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  padding: 0;
}
.sgc-stepper__val::-webkit-outer-spin-button,
.sgc-stepper__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sgc-addbtn {
  height: 40px;
  padding: 0 12px;
  background: #fff;
  color: var(--sgc-ink) !important;
  border: 1px solid var(--sgc-ink);
  border-radius: var(--sgc-radius);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.sgc-addbtn:hover {
  background: var(--sgc-ink);
  color: #fff !important;
}
.sgc-addbtn--success {
  background: var(--sgc-success) !important;
  color: #fff !important;
  border-color: var(--sgc-success);
}
.sgc-addbtn--success:hover { background: var(--sgc-success) !important; }
.sgc-addbtn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* PC floor: never less than 5 columns */
@media (max-width: 1280px) {
  .sgc-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px 12px;
  }
}
/* Tablet landscape: still 5 to honour PC floor until we hit tablet */
@media (max-width: 1024px) {
  .sgc-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 12px;
  }
}
/* Tablet portrait */
@media (max-width: 880px) {
  .sgc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 12px;
  }
}
/* Small tablet / large phone */
@media (max-width: 680px) {
  .sgc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 10px;
    padding: 20px 14px 60px;
  }
}
/* Phone: 2 cols floor */
@media (max-width: 540px) {
  .sgc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    padding: 18px 12px 56px;
  }
}

/* ---------- EMPTY STATE ---------- */
.sgc-empty {
  max-width: 1240px; margin: 0 auto;
  padding: 80px 24px 120px;
  text-align: center;
}
.sgc-empty__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--sgc-line);
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--sgc-muted);
  font-size: 18px;
}
.sgc-empty__title {
  font-size: 20px; font-weight: 700; color: var(--sgc-ink);
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.sgc-empty__sub {
  color: var(--sgc-muted); font-size: 14px; margin: 0 0 20px;
}
.sgc-empty__cta {
  height: 40px; padding: 0 22px;
  border: 1px solid var(--sgc-ink);
  border-radius: var(--sgc-radius);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.sgc-empty__cta:hover { background: var(--sgc-ink); color: #fff; }

/* ---------- SALE ENDED ---------- */
.sgc-ended {
  min-height: 70vh;
  display: grid; place-items: center;
  padding: 80px 24px;
  text-align: center;
}
.sgc-ended__eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sgc-muted); margin-bottom: 16px;
}
.sgc-ended__title {
  font-size: clamp(32px, 6vw, 64px);
  text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 1; margin: 0 0 16px;
  font-weight: 700;
}
.sgc-ended__sub { color: var(--sgc-muted); margin: 0 0 28px; font-size: 15px; }

/* ---------- MODAL ---------- */
.sgc-modal {
  /* v1.5.25 — z-index bumped from 80 → 99989 so the modal renders
     ABOVE the Flatsome theme's fixed/sticky header (typically
     z-index 30–1000). At 80 the title and close button were sliding
     UNDER the site header on desktop and especially on mobile where
     the header takes a larger slice of the viewport. 99989 stays
     BELOW the WP admin bar (z-index 99998) so admins can still use
     the toolbar. Original relative stacking inside the plugin is
     preserved: drawer (99988) < modal (99989) < toast (99990) <
     allocation modal (100002). */
  position: fixed; inset: 0; z-index: 99989;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.sgc-modal[open] { opacity: 1; pointer-events: auto; }
.sgc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(2px);
}
.sgc-modal__card {
  position: relative;
  background: #fff;
  width: min(960px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  border-radius: var(--sgc-radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.sgc-modal[open] .sgc-modal__card { transform: none; }
.sgc-modal__media {
  background: var(--sgc-surface);
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.sgc-modal__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.sgc-modal__details {
  padding: 36px 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: auto;
}
.sgc-modal__meta {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sgc-muted);
  display: flex; gap: 10px; align-items: center;
}
.sgc-modal__name {
  font-size: 26px; font-weight: 700;
  color: var(--sgc-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.sgc-modal__sku {
  font-family: var(--sgc-mono); font-size: 11px; color: var(--sgc-muted);
}
.sgc-modal__price {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--sgc-line);
  border-bottom: 1px solid var(--sgc-line);
  font-variant-numeric: tabular-nums;
}
.sgc-modal__price-now { font-size: 32px; font-weight: 700; color: var(--sgc-ink); letter-spacing: -0.02em; }
.sgc-modal__price-rrp { font-size: 16px; color: var(--sgc-muted); text-decoration: line-through; }
.sgc-modal__save { margin-left: auto; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

.sgc-modal__stock {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sgc-ink);
}
.sgc-modal__stock .sgc-card__stock-dot { background: var(--sgc-ink); }
.sgc-modal__stock--last { color: var(--sgc-red); }
.sgc-modal__stock--last .sgc-card__stock-dot { background: var(--sgc-red); }

.sgc-modal__actions {
  margin-top: 8px;
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
}
.sgc-modal__actions .sgc-stepper, .sgc-modal__actions .sgc-addbtn { height: 48px; }
.sgc-modal__actions .sgc-addbtn { font-size: 13px; }
.sgc-modal__actions .sgc-stepper__val { width: 36px; font-size: 14px; }

.sgc-modal__allocation {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #faf6ef;
  border-left: 2px solid var(--sgc-red);
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sgc-body);
}
.sgc-modal__allocation i {
  color: var(--sgc-red);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.sgc-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 99px;
  background: rgba(255,255,255,0.9);
  color: var(--sgc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 2;
}
.sgc-modal__close:hover { background: var(--sgc-ink); color: #fff; }

@media (max-width: 780px) {
  .sgc-modal__card { grid-template-columns: 1fr; max-height: calc(100vh - 32px); overflow: auto; }
  .sgc-modal__details { padding: 24px 20px 28px; }
  .sgc-modal__name { font-size: 20px; }
}

/* ---------- MOBILE DRAWER ---------- */
.sgc-drawer {
  /* v1.5.25 — bumped from 70 → 99988 so the filters drawer renders
     above the Flatsome header on mobile. Just below the modal (99989)
     so the modal still wins if both are open at once (rare). */
  position: fixed; inset: 0; z-index: 99988;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.sgc-drawer[open] { opacity: 1; pointer-events: auto; }
.sgc-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,20,20,0.5);
}
.sgc-drawer__sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.sgc-drawer[open] .sgc-drawer__sheet { transform: none; }
.sgc-drawer__handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--sgc-line);
  margin: 10px auto 4px;
}
.sgc-drawer__header {
  padding: 6px 20px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--sgc-line);
}
.sgc-drawer__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sgc-ink); }
.sgc-drawer__close { font-size: 16px; color: var(--sgc-muted); width: 32px; height: 32px; }
.sgc-drawer__body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: grid; gap: 24px;
}
.sgc-drawer__section-title {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sgc-muted);
  margin-bottom: 10px;
  font-weight: 500;
}
.sgc-drawer__footer {
  border-top: 1px solid var(--sgc-line);
  padding: 14px 20px;
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
}
.sgc-drawer__footer .sgc-addbtn { height: 46px; }
.sgc-drawer__clear {
  height: 46px; padding: 0 18px;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sgc-body);
}

/* ---------- TOAST ---------- */
.sgc-toast {
  /* v1.5.25 — z-index bumped above the Flatsome header (was 90,
     lost to the sticky header on some viewports). Stays just above
     the modal (99989) to preserve the original stacking — toasts
     sit at the bottom of the viewport, so covering modal content is
     unlikely; this matches pre-bump behaviour. */
  position: fixed;
  bottom: 24px; left: 50%; transform: translate(-50%, 100px);
  z-index: 99990;
  background: var(--sgc-ink); color: #fff;
  padding: 14px 20px;
  border-radius: var(--sgc-radius);
  font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  min-width: 260px;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.sgc-toast[open] { transform: translate(-50%, 0); }
.sgc-toast--success i { color: #7ee094; }
.sgc-toast--error i { color: var(--sgc-red); }
.sgc-toast__msg { flex: 1; }
.sgc-toast__msg strong { font-weight: 700; }

/* ---------- RESPONSIVE SWAPS ---------- */
@media (max-width: 900px) {
  /* v1.5.6 — chiprows are now visible on mobile too. Mobile-filter-btn
     ("Filters") toggles their collapse state (same job as desktop's
     filter-toggle). The bottom-sheet drawer is no longer opened on
     mobile; chiprows inline are simpler to scan. */
  .sgc-filter-toggle { display: none; }
  .sgc-mobile-filter-btn { display: inline-flex; }
}
@media (min-width: 901px) {
  .sgc-drawer { display: none; }
}

/* ---------- MOBILE STICKY BAR ---------- */
@media (max-width: 640px) {
  .sgc-stickybar__row {
    padding: 12px 12px;
    gap: 6px;
    display: grid;
    /* v1.5.5 — search on row 1, then [Filters] [Sort] [Cart] on row 2.
       Filters takes flex (the visible label is "Filters"), sort takes
       flex too (longest content like "Biggest savings"), cart auto. */
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "search search search"
      "filter sort   cart";
    align-items: center;
  }
  .sgc-search {
    grid-area: search;
    height: 32px;
    padding: 0 10px;
    max-width: 100%;
  }
  .sgc .sgc-search input { font-size: 12px !important; }
  .sgc .sgc-mobile-filter-btn {
    grid-area: filter;
    width: 100% !important;
    height: 30px;
    padding: 0 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em;
    gap: 5px;
    justify-content: center;
  }
  .sgc-mobile-filter-btn i,
  .sgc-mobile-filter-btn .sgc-icon { font-size: 10px; width: 12px; height: 12px; }
  .sgc .sgc-sort {
    grid-area: sort;
    width: 100% !important;
    max-width: none !important;
    height: 30px;
    padding: 0 24px 0 8px !important;
    font-size: 10px !important;
    background-position: right 8px center;
    background-size: 8px;
  }
  .sgc .sgc-cart {
    grid-area: cart;
    height: 30px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    gap: 5px;
  }
  .sgc-cart__count {
    min-width: 16px; height: 16px;
    font-size: 9px;
    padding: 0 4px;
  }
  .sgc-resultsbar {
    padding: 8px 12px 6px;
  }
  .sgc-resultsbar__count { font-size: 12px; }
  .sgc-resultsbar__clear {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  /* v1.5.6 — chiprows on mobile: stack label above chips, tighten
     padding + chip pill size, smaller IP combobox. */
  .sgc-chiprows {
    padding: 0 12px;
  }
  .sgc-chiprows__inner {
    gap: 8px;
    padding: 4px 0 6px;
  }
  .sgc-chiprow {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: stretch;
  }
  .sgc-chiprow__label {
    padding-top: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .sgc-chips { gap: 4px; }
  .sgc-chip {
    height: 24px;
    padding: 0 8px;
    font-size: 10.5px;
    gap: 5px;
  }
  .sgc-chip__count { font-size: 10px; }
  .sgc-ipfilter__combo {
    height: 30px;
    padding: 0 10px;
  }
  .sgc-ipfilter__chip {
    height: 24px;
    padding: 0 6px 0 10px;
    font-size: 11px;
  }
  /* compact card type on mobile */
  .sgc-card__meta { font-size: 9px; letter-spacing: 0.12em; }
  .sgc-card__name { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; }
  .sgc-card__price-now { font-size: 14px; }
  .sgc-card__price-rrp { font-size: 11px; }
  .sgc-card__save { font-size: 9px; letter-spacing: 0.08em; }
  .sgc-card__badge { font-size: 9px; padding: 4px 7px; }
  .sgc-card__stock { font-size: 9px; padding: 4px 7px; letter-spacing: 0.06em; }
  .sgc-card__body { padding: 10px 0 0; gap: 4px; }
  .sgc-card__actions { padding-top: 10px; gap: 4px; }
  .sgc-card__actions .sgc-stepper,
  .sgc-card__actions .sgc-addbtn { height: 34px; }
  .sgc-stepper__btn { width: 18px; font-size: 12px; }
  .sgc-stepper__val { width: 18px; font-size: 11px; }
  .sgc-addbtn { font-size: 10px; letter-spacing: 0.08em; padding: 0 8px; }
}

/* ---------- TWEAKS PANEL (dev-mode only) ---------- */
.sgc-tweaks {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  background: #fff; border: 1px solid var(--sgc-line);
  border-radius: 6px;
  width: 260px;
  font-family: var(--sgc-font);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  display: none;
}
.sgc-tweaks[open] { display: block; }
.sgc-tweaks__header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sgc-line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
}
.sgc-tweaks__body { padding: 12px 14px; display: grid; gap: 14px; }
.sgc-tweaks__row { display: grid; gap: 6px; }
.sgc-tweaks__row label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sgc-muted);
}
.sgc-tweaks__row select,
.sgc-tweaks__row input[type="text"] {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--sgc-line); border-radius: 4px;
  font-size: 12px;
}
.sgc-tweaks__row input[type="range"] { width: 100%; }
.sgc-tweaks__opts { display: flex; gap: 4px; flex-wrap: wrap; }
.sgc-tweaks__opt {
  padding: 4px 8px;
  border: 1px solid var(--sgc-line);
  border-radius: 4px;
  font-size: 11px;
  background: #fff;
}
.sgc-tweaks__opt--active { background: var(--sgc-ink); color: #fff; border-color: var(--sgc-ink); }

/* ---------- UTIL ---------- */
.sgc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- ALLOCATION CONFIRMATION MODAL ---------- */
.sgc-alloc {
  position: fixed; inset: 0; z-index: 100002;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  font-family: var(--sgc-font);
}
.sgc-alloc.is-open { display: flex; }
.sgc-alloc__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.sgc-alloc__card {
  position: relative; z-index: 1;
  background: #fff; color: var(--sgc-ink);
  width: 100%; max-width: 480px;
  padding: 28px 28px 24px;
  border-radius: var(--sgc-radius-lg, 8px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
  animation: sgc-alloc-in .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes sgc-alloc-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.sgc-alloc__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff7ed; color: var(--sgc-red);
  border-radius: 99px;
  font-size: 20px;
  margin-bottom: 14px;
}
.sgc-alloc__title {
  margin: 0 0 12px;
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sgc-ink);
}
.sgc-alloc__lede {
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.55;
  color: var(--sgc-body);
}
.sgc-alloc__lede strong { color: var(--sgc-ink); font-weight: 600; }
.sgc-alloc__remember {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 18px;
  font-size: 13px;
  color: var(--sgc-body);
  cursor: pointer;
  user-select: none;
}
.sgc-alloc__remember input { margin: 0; cursor: pointer; }
.sgc-alloc__actions {
  display: flex; gap: 8px;
}
.sgc-alloc__btn {
  flex: 1;
  height: 44px; padding: 0 16px;
  border-radius: var(--sgc-radius);
  font: 600 13px/1 var(--sgc-font);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
}
/* `!important` and an extra .sgc qualifier — Flatsome's `.button { color }`
   rule has the same specificity (0,1,0) and ships earlier in the cascade,
   so without these the CTA renders dark-text-on-dark and is unreadable. */
.sgc .sgc-alloc__btn--primary {
  background: var(--sgc-ink) !important;
  color: #fff !important;
  border: 1px solid var(--sgc-ink) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sgc .sgc-alloc__btn--primary:hover { background: #000 !important; color: #fff !important; }
.sgc-alloc__btn--secondary {
  background: #fff; color: var(--sgc-body);
  border: 1px solid var(--sgc-line);
  flex: 0 0 auto; padding: 0 18px;
}
.sgc-alloc__btn--secondary:hover { border-color: var(--sgc-ink); color: var(--sgc-ink); }

@media (max-width: 480px) {
  .sgc-alloc__card { padding: 22px 20px 18px; }
  .sgc-alloc__title { font-size: 17px; }
  .sgc-alloc__lede { font-size: 13px; }
  .sgc-alloc__actions { flex-direction: column-reverse; }
  .sgc-alloc__btn { flex: none; width: 100%; }
}

/* ---------- ADMIN PREVIEW BANNER (plugin-only) ---------- */
.sgc-admin-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: #fff7ed; color: #7c2d12;
  border-bottom: 1px solid #fdba74;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-family: var(--sgc-font);
}
.sgc-admin-banner i { color: #c2410c; }
.sgc-admin-banner a { color: #7c2d12; text-decoration: underline; margin-left: auto; }

/* ---------- IP / SERIES COMBOBOX ---------- */
.sgc-ipfilter {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
  font-family: var(--sgc-font);
}
.sgc-ipfilter__selected {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sgc-ipfilter__selected[hidden] { display: none; }
/* v1.5.1 — `.sgc` parent + !important on color/background so Flatsome's
   global `button` / `.button` rules (which set color to a dark grey)
   don't override our white-on-black chip styling. Without these the
   chip text was invisible (dark text on dark background). */
.sgc .sgc-ipfilter__chip {
  height: 28px; padding: 0 8px 0 12px;
  border: 1px solid var(--sgc-ink) !important;
  border-radius: 99px;
  background: var(--sgc-ink) !important;
  color: #fff !important;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 var(--sgc-font);
  cursor: pointer;
  transition: opacity .12s;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
.sgc .sgc-ipfilter__chip:hover { opacity: .75; background: var(--sgc-ink) !important; color: #fff !important; }
.sgc-ipfilter__chip i,
.sgc-ipfilter__chip .sgc-icon { font-size: 11px; opacity: .8; color: #fff !important; }
.sgc-ipfilter__combo {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  background: #fff;
  transition: border-color .12s;
}
.sgc-ipfilter--open .sgc-ipfilter__combo,
.sgc-ipfilter__combo:focus-within { border-color: var(--sgc-ink); }
.sgc-ipfilter__combo > i,
.sgc-ipfilter__combo > .sgc-icon { color: var(--sgc-muted); font-size: 12px; flex-shrink: 0; width: 14px; height: 14px; }
/* v1.4.3 — bump specificity with `.sgc` parent + !important so Flatsome's
   global `input { … }` rules don't paint a border / background on this
   field, which made the icon look detached from the input box. */
.sgc .sgc-ipfilter__input {
  flex: 1 1 auto !important; min-width: 0 !important;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  font-size: 13px !important; color: var(--sgc-ink) !important;
  font-family: inherit !important;
  padding: 0 !important; margin: 0 !important;
  height: auto !important; line-height: 1.2 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sgc .sgc-ipfilter__input:focus,
.sgc .sgc-ipfilter__input:focus-visible {
  outline: 0 !important; box-shadow: none !important; border: 0 !important;
}
.sgc-ipfilter__input::placeholder { color: var(--sgc-muted); }
.sgc-ipfilter__close {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--sgc-muted); font-size: 14px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 99px;
}
.sgc-ipfilter__close:hover { color: var(--sgc-ink); background: var(--sgc-surface); }

.sgc-ipfilter__list {
  /* v1.4.4 — `position: fixed` so the dropdown escapes the
     overflow:hidden of `.sgc-chiprows` and `.sgc-stickybar`'s
     overflow-x:clip. JS computes top/left/width from the combo's
     bounding rect on open. */
  position: fixed;
  z-index: 100;        /* above the sticky bar (z:40) and modals */
  margin: 0; padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sgc-line);
  border-radius: var(--sgc-radius);
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.16);
  max-height: 320px; overflow-y: auto;
  font-size: 13px;
}
.sgc-ipfilter__list[hidden] { display: none; }
.sgc-ipfilter--up .sgc-ipfilter__list {
  box-shadow: 0 -12px 36px -8px rgba(0,0,0,0.16);
}
.sgc-ipfilter__list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--sgc-ink);
  line-height: 1.2;
}
.sgc-ipfilter__list li:hover,
.sgc-ipfilter__list li.is-active { background: var(--sgc-surface); }
.sgc-ipfilter__opt-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.sgc-ipfilter__opt-count {
  flex-shrink: 0;
  color: var(--sgc-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
  border-left: 1px solid var(--sgc-line);
}
.sgc-ipfilter__list li i {
  color: var(--sgc-success);
  font-size: 11px;
  flex-shrink: 0;
}
.sgc-ipfilter__list .sgc-ipfilter__empty {
  padding: 14px; text-align: center; color: var(--sgc-muted);
  font-size: 12px; cursor: default;
  background: transparent !important;
}

/* Mobile sheet — when combobox opens on a phone, lift list to a fixed sheet
   from the bottom of the viewport. The combobox + selected chips visually
   stay at the top of the sheet. */
@media (max-width: 640px) {
  .sgc-ipfilter--open .sgc-ipfilter__list {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    z-index: 9999;
    box-shadow: 0 -16px 40px rgba(0,0,0,0.15);
    padding-top: 12px;
  }
  .sgc-ipfilter--mobile .sgc-ipfilter__close { display: inline-flex; }
  body.sgc-ipfilter-locked { overflow: hidden; }
  /* Backdrop for the mobile sheet */
  .sgc-ipfilter--open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(20,20,20,0.5);
    z-index: 9998;
    pointer-events: none;
  }
}

/* ---------- HERO BACKGROUND IMAGE OVERRIDE ---------- */
/* When admin sets a hero image URL, the template adds .sgc-hero--has-bg + a
   --sgc-hero-bg / --sgc-hero-overlay var on the section element. */
.sgc-hero--has-bg {
  /* v1.5.13 — fallback colour respects the operator-set hero background
     colour, so the image still fades into the right shade if it has
     transparency / lazy-loads / fails. */
  background: var(--sgc-hero-bg) center / cover no-repeat, var(--sgc-hero-color, #0a0a0a);
  isolation: isolate;
}
.sgc-hero--has-bg::before {
  background: linear-gradient(180deg, rgba(0,0,0, calc(var(--sgc-hero-overlay, .65) * .8)) 0%, rgba(0,0,0, var(--sgc-hero-overlay, .65)) 100%);
}

/* =========================================================
   v2.0.1 — Brutalist sale-ended state
   Used by both Sugo_GSC_Frontend::render_closed() (server-side)
   AND the #sgc-ended client-side block in templates/clearance-page.php.
   Scoped under .sgc-ended-brutalist; tokens are CSS custom-properties on
   the root selector so styles can't leak.
   Fonts (Archivo Black, Archivo, JetBrains Mono) are imported below;
   the import is page-render-blocking but the ended state is low-traffic
   and not LCP-critical, so the trade-off is fine.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

.sgc-ended-brutalist {
  --be-ink:    #0E0E0E;
  --be-paper:  #FFFFFF;
  --be-accent: #FF3B1F;
  --be-yellow: #F5C518;
  --be-muted:  #B5B5B5;
  background: var(--be-ink);
  color: var(--be-paper);
  border: 2px solid var(--be-ink);
  padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 88px);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.sgc-ended-brutalist *,
.sgc-ended-brutalist *::before,
.sgc-ended-brutalist *::after { box-sizing: border-box; }

.sgc-ended-brutalist__marquee {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase; font-size: 11px; letter-spacing: .14em;
  color: var(--be-muted);
  margin-bottom: clamp(48px, 10vh, 120px);
  padding-bottom: 18px;
  border-bottom: 2px solid var(--be-paper);
}
.sgc-ended-brutalist__marquee .live {
  color: var(--be-paper);
  display: inline-flex; align-items: center; gap: 8px;
}
.sgc-ended-brutalist__marquee .dot {
  color: #1cb255; font-size: 13px; line-height: 1;
  animation: sgc-ended-brutalist__pulse 1.4s ease-in-out infinite;
}

.sgc-ended-brutalist__hero { max-width: 1100px; }

.sgc-ended-brutalist__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--be-accent);
  margin-bottom: 24px;
}

.sgc-ended-brutalist__title {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  line-height: .88;
  letter-spacing: -.035em;
  margin: 0 0 28px;
  text-transform: none;
  color: var(--be-paper);
}
.sgc-ended-brutalist__title .stroke {
  -webkit-text-stroke: 2px var(--be-paper);
  color: transparent;
  display: inline-block;
}

.sgc-ended-brutalist__sub {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--be-muted);
  max-width: 56ch;
  margin: 0 0 36px;
}

.sgc-ended-brutalist__cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: clamp(40px, 8vh, 80px);
}
.sgc-ended-brutalist__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  border: 2px solid var(--be-paper);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--be-paper);
  background: transparent;
  transition: transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.sgc-ended-brutalist__cta--primary {
  background: var(--be-accent);
  color: var(--be-paper);
  border-color: var(--be-accent);
}
.sgc-ended-brutalist__cta--primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--be-paper);
  color: var(--be-paper);
}
.sgc-ended-brutalist__cta--secondary:hover {
  background: var(--be-yellow);
  color: var(--be-ink);
  border-color: var(--be-yellow);
}
.sgc-ended-brutalist__cta span[aria-hidden] { font-family: 'Archivo Black', system-ui, sans-serif; }

.sgc-ended-brutalist__stamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--be-muted);
  padding-top: 24px;
  border-top: 2px solid var(--be-paper);
}

@keyframes sgc-ended-brutalist__pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Hide the legacy sgc-state--closed shell when the brutalist child is
   present — render_closed() emits the brutalist block as the only child
   of <section class="sgc-state sgc-state--closed">, so we neutralise the
   parent's padding/border-radius/icon spacing. */
.sgc-state--closed { padding: 0; background: transparent; border: 0; }
.sgc-state--closed .sgc-icon { display: none; }

@media (max-width: 640px) {
  .sgc-ended-brutalist { padding: 56px 20px; }
  .sgc-ended-brutalist__marquee { gap: 14px; font-size: 10px; }
  .sgc-ended-brutalist__title { font-size: clamp(40px, 12vw, 72px); }
  .sgc-ended-brutalist__cta { padding: 14px 18px; font-size: 13px; }
}

/* =========================================================
   v2.0.2 — BRUTALIST CATALOG OVERRIDE LAYER
   ---------------------------------------------------------
   Re-skins the existing card/hero/filter/modal classes the
   JS already emits — no markup or JS change required. Last-
   wins in the cascade so this block overrides the editorial
   styles above without removing them (rolls back cleanly by
   commenting out this block).
   Matches the brutalist sale-ended state's vocabulary:
   Archivo Black + Archivo + JetBrains Mono, 2px ink borders,
   --ink/--paper/--accent/--yellow tokens, // 0N mono prefixes.
   ========================================================= */

.sgc {
  --be-ink:    #0E0E0E;
  --be-paper:  #FFFFFF;
  --be-accent: #FF3B1F;
  --be-yellow: #F5C518;
  --be-muted:  #B5B5B5;
  --be-muted-2: #6b6b6b;
  --be-font-display: 'Archivo Black', system-ui, sans-serif;
  --be-font-body:    'Archivo', system-ui, sans-serif;
  --be-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--be-paper);
  color: var(--be-ink);
  font-family: var(--be-font-body);
}

/* ---------- HERO ---------- */
.sgc .sgc-hero {
  background: var(--be-ink);
  color: var(--be-paper);
  border-bottom: 2px solid var(--be-ink);
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px);
}
.sgc .sgc-hero--has-bg { background: var(--sgc-hero-bg) center/cover no-repeat, var(--be-ink); }
.sgc .sgc-hero--has-bg::before {
  background: linear-gradient(180deg, rgba(0,0,0, calc(var(--sgc-hero-overlay, .65) * .85)) 0%, rgba(0,0,0, var(--sgc-hero-overlay, .82)) 100%);
}
.sgc .sgc-hero__inner { max-width: 1100px; }

.sgc .sgc-hero__eyebrow {
  font-family: var(--be-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--be-accent);
  margin-bottom: 24px;
}
.sgc .sgc-hero__eyebrow::before {
  content: "// 01 — ";
  color: var(--be-accent);
  font-weight: 600;
}
.sgc .sgc-hero__title {
  font-family: var(--be-font-display);
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: .86;
  letter-spacing: -.035em;
  margin: 0 0 28px;
  color: var(--be-paper);
  text-transform: none;
}
.sgc .sgc-hero__title em {
  font-style: normal;
  -webkit-text-stroke: 2px var(--be-paper);
  color: transparent;
  display: inline-block;
}
.sgc .sgc-hero__subtitle {
  font-family: var(--be-font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--be-muted);
  max-width: 56ch;
  margin: 0 0 32px;
}
.sgc .sgc-hero__note {
  display: flex; gap: 12px;
  border-left: 2px solid var(--be-accent);
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  color: var(--be-muted);
  font-family: var(--be-font-body);
  font-size: 13px;
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 28px;
}
.sgc .sgc-hero__note .sgc-icon { color: var(--be-accent); flex: 0 0 auto; }
.sgc .sgc-hero__note-disclaimer { color: var(--be-muted); font-size: 12px; display: block; margin-top: 6px; }

/* Stats strip — kept as <dl> but visually a 3-tile bordered row */
.sgc .sgc-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--be-paper);
  margin: 0;
  padding: 0;
}
.sgc .sgc-hero__stat {
  padding: 16px 16px 14px;
  border-right: 2px solid var(--be-paper);
}
.sgc .sgc-hero__stat:last-child { border-right: none; }
.sgc .sgc-hero__stat dt {
  font-family: var(--be-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--be-muted);
  margin-bottom: 8px;
}
.sgc .sgc-hero__stat dt::before { content: "// "; }
.sgc .sgc-hero__stat dd {
  font-family: var(--be-font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--be-paper);
  margin: 0;
}
.sgc .sgc-hero__stat dd small {
  font-family: var(--be-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--be-muted);
  margin-left: 4px;
}
/* Make the third stat (discount) red for emphasis */
.sgc .sgc-hero__stat:last-child dd { color: var(--be-accent); }
@media (max-width: 640px) {
  .sgc .sgc-hero__stat { padding: 12px 10px; }
  .sgc .sgc-hero__stat dd { font-size: 22px; }
}

/* ---------- STICKY FILTER BAR ---------- */
.sgc .sgc-stickybar {
  background: var(--be-paper);
  border-bottom: 2px solid var(--be-ink);
  padding: 14px clamp(16px, 4vw, 64px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.sgc .sgc-stickybar__row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Search input — brutalist border, mono placeholder */
.sgc .sgc-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--be-ink);
  padding: 0 12px;
  background: var(--be-paper);
  border-radius: 0 !important;
}
.sgc .sgc-search .sgc-icon { color: var(--be-muted-2); }
.sgc .sgc-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 11px 0;
  font-family: var(--be-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--be-ink);
}
.sgc .sgc-search input::placeholder {
  color: var(--be-muted-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.sgc .sgc-search__clear {
  border: 0; background: transparent; cursor: pointer; color: var(--be-muted-2);
}

/* Sort + Filter toggle + Mobile filter btn — same brutalist button vocabulary */
.sgc .sgc-sort,
.sgc .sgc-filter-toggle,
.sgc .sgc-mobile-filter-btn {
  border: 2px solid var(--be-ink) !important;
  background: var(--be-paper) !important;
  color: var(--be-ink) !important;
  padding: 10px 14px !important;
  font-family: var(--be-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .12s;
}
.sgc .sgc-sort:hover,
.sgc .sgc-filter-toggle:hover,
.sgc .sgc-mobile-filter-btn:hover { background: var(--be-yellow) !important; }
.sgc .sgc-filter-toggle[aria-expanded="false"] { background: var(--be-ink) !important; color: var(--be-paper) !important; }
.sgc .sgc-mobile-filter-btn__badge {
  background: var(--be-accent); color: var(--be-paper);
  font-family: var(--be-font-mono); font-weight: 600;
  padding: 2px 6px; font-size: 10px; letter-spacing: .06em;
}

/* Cart link in stickybar — we have an upstream mini-cart at the
   top of the site, so hide the redundant one inside the offer
   page. Operators can re-enable per-offer via CSS if desired. */
.sgc .sgc-stickybar .sgc-cart { display: none !important; }

/* Chip rows */
.sgc .sgc-chiprows {
  padding: 14px clamp(16px, 4vw, 64px) 0;
  border-bottom: 2px solid var(--be-ink);
  overflow: hidden;
  transition: max-height .25s ease, padding .2s ease, opacity .2s ease;
  max-height: 800px;
}
.sgc .sgc-chiprows--collapsed {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom: none; pointer-events: none;
}
.sgc .sgc-chiprows__inner { padding-bottom: 14px; }
.sgc .sgc-chiprow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0;
}
.sgc .sgc-chiprow__label {
  font-family: var(--be-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--be-muted-2);
  padding: 8px 0;
  white-space: nowrap;
  flex: 0 0 70px;
}
.sgc .sgc-chiprow__label::before { content: "// "; }
.sgc .sgc-chips {
  display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}

.sgc .sgc-chip {
  border: 2px solid var(--be-ink) !important;
  background: var(--be-paper) !important;
  color: var(--be-ink) !important;
  padding: 6px 12px !important;
  font-family: var(--be-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, color .12s;
}
.sgc .sgc-chip:hover { background: var(--be-yellow) !important; }
.sgc .sgc-chip--active { background: var(--be-ink) !important; color: var(--be-paper) !important; }
.sgc .sgc-chip__count {
  font-family: var(--be-font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--be-muted-2) !important;
  letter-spacing: .04em !important;
}
.sgc .sgc-chip--active .sgc-chip__count { color: var(--be-muted) !important; }
.sgc .sgc-chip__dot {
  width: 6px; height: 6px;
  background: #1cb255;
  border-radius: 50%;
  animation: sgc-chip-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes sgc-chip-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* IP combo filter — keep its layout but apply brutalist border */
.sgc .sgc-ipfilter {
  flex: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sgc .sgc-ipfilter__combo {
  display: flex; align-items: center; gap: 6px;
  border: 2px solid var(--be-ink); background: var(--be-paper);
  padding: 0 10px;
  min-width: 240px; flex: 1;
}
.sgc .sgc-ipfilter__combo input {
  border: 0; outline: 0; background: transparent;
  padding: 8px 0;
  font-family: var(--be-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  flex: 1;
}
.sgc .sgc-ipfilter__combo input::placeholder {
  color: var(--be-muted-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
}
.sgc .sgc-ipfilter__list {
  list-style: none; padding: 0; margin: 0;
  border: 2px solid var(--be-ink);
  background: var(--be-paper);
  max-height: 240px; overflow: auto;
  flex: 1 1 100%;
}
.sgc .sgc-ipfilter__list li {
  padding: 8px 12px;
  font-family: var(--be-font-mono);
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.sgc .sgc-ipfilter__list li:hover { background: var(--be-yellow); }

/* ---------- RESULTS BAR ---------- */
.sgc .sgc-resultsbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 64px);
  border-bottom: 2px solid var(--be-ink);
  background: var(--be-paper);
}
.sgc .sgc-resultsbar__count {
  font-family: var(--be-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--be-muted-2);
}
.sgc .sgc-resultsbar__count::before { content: "// "; }
.sgc .sgc-resultsbar__clear {
  border: 2px solid var(--be-ink); background: var(--be-paper); color: var(--be-ink);
  padding: 8px 14px;
  font-family: var(--be-font-body); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; border-radius: 0;
}
.sgc .sgc-resultsbar__clear:hover { background: var(--be-yellow); }

/* ---------- GRID ---------- */
.sgc .sgc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border-top: 2px solid var(--be-ink);
  border-left: 2px solid var(--be-ink);
  margin: 0 clamp(0px, 0vw, 0px);
  padding: 0 !important;
}
@media (min-width: 640px)  { .sgc .sgc-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 960px)  { .sgc .sgc-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1280px) { .sgc .sgc-grid { grid-template-columns: repeat(6, 1fr) !important; } }
@media (min-width: 1600px) { .sgc .sgc-grid { grid-template-columns: repeat(8, 1fr) !important; } }

/* ---------- CARD ---------- */
.sgc .sgc-card {
  border-right: 2px solid var(--be-ink) !important;
  border-bottom: 2px solid var(--be-ink) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  background: var(--be-paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
}
.sgc .sgc-card:hover {
  z-index: 2;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--be-ink) !important;
}
.sgc .sgc-card--soldout { opacity: .85; }
.sgc .sgc-card--soldout .sgc-card__media { opacity: .55; }

.sgc .sgc-card__media {
  aspect-ratio: 1 / 1;
  border-bottom: 2px solid var(--be-ink) !important;
  border-radius: 0 !important;
  background: #f3f0eb !important;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.sgc .sgc-card__img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  display: block;
  background: #f3f0eb;
}
.sgc .sgc-card__img--fallback { object-fit: contain; padding: 20%; opacity: .35; }

.sgc .sgc-card__badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--be-accent) !important;
  color: var(--be-paper) !important;
  font-family: var(--be-font-mono) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sgc .sgc-card__stock {
  position: absolute; top: 10px; left: 10px;
  background: var(--be-paper) !important;
  color: var(--be-ink) !important;
  border: 2px solid var(--be-ink) !important;
  font-family: var(--be-font-mono) !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 3px 7px !important;
  border-radius: 0 !important;
  display: inline-flex; align-items: center; gap: 5px;
}
.sgc .sgc-card__stock--last { background: var(--be-yellow) !important; }
.sgc .sgc-card__stock--soldout { background: var(--be-ink) !important; color: var(--be-paper) !important; }
.sgc .sgc-card__stock-dot {
  width: 6px; height: 6px; background: #1cb255; border-radius: 50%;
  animation: sgc-chip-dot-pulse 1.4s ease-in-out infinite;
}

.sgc .sgc-card__body {
  padding: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) clamp(12px, 1.2vw, 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1;
  min-width: 0;
}
.sgc .sgc-card__meta {
  font-family: var(--be-font-mono) !important;
  font-size: clamp(9px, .7vw, 11px) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--be-muted-2) !important;
  display: flex !important; flex-wrap: wrap;
  gap: 4px 8px !important;
  line-height: 1.3;
}
.sgc .sgc-card__meta-sep { display: none; }
.sgc .sgc-card__meta > :first-child { color: var(--be-ink); font-weight: 600; }

.sgc .sgc-card__name {
  font-family: var(--be-font-display) !important;
  font-size: clamp(12px, .95vw, 16px) !important;
  font-weight: normal !important;
  line-height: 1.2 !important;
  letter-spacing: -.005em !important;
  color: var(--be-ink) !important;
  margin: 2px 0 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-transform: none !important;
}

.sgc .sgc-card__price {
  display: flex !important; align-items: baseline !important; gap: 8px !important;
  margin-top: auto !important;
  flex-wrap: wrap;
}
.sgc .sgc-card__price-now {
  font-family: var(--be-font-display) !important;
  font-size: clamp(18px, 1.5vw, 26px) !important;
  letter-spacing: -.02em !important;
  color: var(--be-accent) !important;
  line-height: 1;
}
.sgc .sgc-card__price-rrp {
  font-family: var(--be-font-mono) !important;
  font-size: clamp(10px, .75vw, 12px) !important;
  color: var(--be-muted-2) !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
}

/* CTA button inside .sgc-card__actions */
.sgc .sgc-card__actions {
  border-top: 2px solid var(--be-ink);
  padding: 0 !important;
  margin: 0 !important;
}
.sgc .sgc-card__actions button,
.sgc .sgc-card__actions .sgc-card__add,
.sgc .sgc-card__actions [data-action="add"] {
  width: 100% !important;
  background: var(--be-ink) !important;
  color: var(--be-paper) !important;
  border: 0 !important;
  padding: clamp(10px, 1vw, 14px) !important;
  font-family: var(--be-font-body) !important;
  font-size: clamp(11px, .85vw, 14px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .12s;
}
.sgc .sgc-card__actions button:hover,
.sgc .sgc-card__actions .sgc-card__add:hover { background: var(--be-accent) !important; }
.sgc .sgc-card--soldout .sgc-card__actions button { background: var(--be-muted) !important; color: var(--be-ink) !important; pointer-events: none; }

/* ---------- MODAL (quick-view) ---------- */
.sgc .sgc-modal__backdrop {
  background: rgba(14,14,14,0.92) !important;
}
.sgc .sgc-modal__card {
  background: var(--be-paper) !important;
  border: 2px solid var(--be-ink) !important;
  border-radius: 0 !important;
  box-shadow: 12px 12px 0 var(--be-accent) !important;
}
.sgc .sgc-modal__media { border-right: 2px solid var(--be-ink); border-radius: 0 !important; }
.sgc .sgc-modal__media img { border-radius: 0 !important; }
.sgc .sgc-modal__close {
  border: 2px solid var(--be-ink) !important;
  background: var(--be-paper) !important;
  border-radius: 0 !important;
}
.sgc .sgc-modal__close:hover { background: var(--be-yellow) !important; }
.sgc .sgc-modal__details {
  padding: 24px;
  font-family: var(--be-font-body);
}
.sgc .sgc-modal h3,
.sgc .sgc-modal__name {
  font-family: var(--be-font-display) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: var(--be-ink) !important;
  text-transform: none !important;
}
.sgc .sgc-modal__meta {
  font-family: var(--be-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--be-muted-2) !important;
}
.sgc .sgc-modal__price {
  border-top: 2px solid var(--be-ink);
  border-bottom: 2px solid var(--be-ink);
  padding: 12px 0;
}
.sgc .sgc-modal__price-now,
.sgc .sgc-modal .sgc-modal__price-now {
  font-family: var(--be-font-display) !important;
  font-size: 36px !important;
  color: var(--be-accent) !important;
  letter-spacing: -.02em !important;
}
.sgc .sgc-modal__price-rrp {
  font-family: var(--be-font-mono) !important;
  color: var(--be-muted-2) !important;
  text-decoration: line-through !important;
}
.sgc .sgc-modal__stock {
  font-family: var(--be-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sgc .sgc-modal button,
.sgc .sgc-modal__btn,
.sgc .sgc-modal__add {
  border: 2px solid var(--be-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--be-font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: 13px !important;
}
.sgc .sgc-modal__btn--primary,
.sgc .sgc-modal__add {
  background: var(--be-accent) !important;
  color: var(--be-paper) !important;
  border-color: var(--be-accent) !important;
}
.sgc .sgc-modal__btn--primary:hover,
.sgc .sgc-modal__add:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--be-ink) !important;
}

/* ---------- ALLOCATION dialog (first add-to-cart) ---------- */
.sgc .sgc-alloc__card {
  background: var(--be-paper) !important;
  border: 2px solid var(--be-ink) !important;
  border-radius: 0 !important;
  box-shadow: 12px 12px 0 var(--be-accent) !important;
}
.sgc .sgc-alloc__title {
  font-family: var(--be-font-display) !important;
  font-size: 24px !important;
  letter-spacing: -.01em !important;
}
.sgc .sgc-alloc__btn {
  border: 2px solid var(--be-ink) !important;
  border-radius: 0 !important;
  font-family: var(--be-font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}
.sgc .sgc-alloc__btn--primary {
  background: var(--be-accent) !important;
  color: var(--be-paper) !important;
  border-color: var(--be-accent) !important;
}
.sgc .sgc-alloc__btn--secondary:hover { background: var(--be-yellow) !important; }

/* ---------- EMPTY / STATE BLOCKS ---------- */
.sgc .sgc-state,
.sgc .sgc-empty {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
  text-align: center;
  border-bottom: 2px solid var(--be-ink);
}
.sgc .sgc-empty__title,
.sgc .sgc-state h2 {
  font-family: var(--be-font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -.02em;
  margin: 16px 0 8px;
}
.sgc .sgc-empty__sub,
.sgc .sgc-state p {
  font-family: var(--be-font-body);
  color: var(--be-muted-2);
  max-width: 56ch;
  margin: 0 auto;
}
.sgc .sgc-empty__cta {
  margin-top: 24px;
  border: 2px solid var(--be-ink);
  background: var(--be-accent);
  color: var(--be-paper);
  padding: 14px 24px;
  font-family: var(--be-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 0;
  cursor: pointer;
  transition: transform .12s;
}
.sgc .sgc-empty__cta:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--be-ink); }

/* ---------- ADMIN PREVIEW BANNER ---------- */
.sgc .sgc-admin-banner {
  background: var(--be-yellow);
  color: var(--be-ink);
  border: 2px solid var(--be-ink);
  border-radius: 0;
  margin: 12px clamp(16px, 4vw, 64px);
  padding: 10px 14px;
  font-family: var(--be-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  display: flex; align-items: center; gap: 10px;
}

/* ---------- MOBILE RESPONSIVENESS ---------- */
@media (max-width: 640px) {
  .sgc .sgc-stickybar__row { gap: 8px; }
  .sgc .sgc-search { flex: 1 1 100%; min-width: 0; }
  .sgc .sgc-sort, .sgc .sgc-filter-toggle, .sgc .sgc-mobile-filter-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .sgc .sgc-chiprow { flex-direction: column; gap: 6px; }
  .sgc .sgc-chiprow__label { padding: 0; flex-basis: auto; }
  .sgc .sgc-chip { padding: 6px 10px !important; font-size: 11px !important; }
  .sgc .sgc-hero__stats { grid-template-columns: 1fr; }
  .sgc .sgc-hero__stat { border-right: 0; border-bottom: 2px solid var(--be-paper); }
  .sgc .sgc-hero__stat:last-child { border-bottom: 0; }
  .sgc .sgc-modal__card { grid-template-columns: 1fr !important; }
  .sgc .sgc-modal__media { border-right: 0; border-bottom: 2px solid var(--be-ink); }
}

/* =========================================================
   v2.0.3 — BRUTALIST STRUCTURAL ADDITIONS
   Marquee bar (top of #sgc-live), grid section header, and
   yellow .hrs-bar strip on each card. These selectors target
   markup added in the same release.
   ========================================================= */

/* ---------- Top marquee strip ---------- */
.sgc .sgc-marquee {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px clamp(20px, 5vw, 64px);
  background: var(--be-ink);
  color: var(--be-muted);
  border-bottom: 2px solid var(--be-ink);
  font-family: var(--be-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sgc .sgc-marquee__live {
  color: var(--be-paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.sgc .sgc-marquee__dot {
  color: #1cb255;
  font-size: 13px;
  line-height: 1;
  animation: sgc-marquee-pulse 1.4s ease-in-out infinite;
}
.sgc .sgc-marquee__item {
  white-space: nowrap;
}
@keyframes sgc-marquee-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
/* Mobile: hide marquee entirely. The hero stat tiles below carry
   the same information in a denser format. */
@media (max-width: 640px) {
  .sgc .sgc-marquee { display: none; }
}

/* ---------- Grid section header ---------- */
.sgc .sgc-grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 64px) 28px;
  background: var(--be-paper);
}
.sgc .sgc-grid-head__sub {
  font-family: var(--be-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--be-muted-2);
  margin-bottom: 6px;
}
.sgc .sgc-grid-head__title {
  font-family: var(--be-font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: .9;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--be-ink);
}
.sgc .sgc-grid-head__title em {
  font-style: normal;
  -webkit-text-stroke: 2px var(--be-ink);
  color: transparent;
  display: inline-block;
}

/* ---------- Yellow .hrs-bar signature strip on cards ---------- */
.sgc .sgc-card__hrs {
  background: var(--be-yellow);
  color: var(--be-ink);
  border-top: 2px solid var(--be-ink);
  padding: clamp(6px, .6vw, 10px) clamp(10px, 1vw, 14px);
  font-family: var(--be-font-mono);
  font-size: clamp(9px, .7vw, 11px);
  /* v2.0.20 — tracking trimmed from .12em. At a 213px grid column the
     old value cost ~14px of width, which is the difference between the
     ship label fitting on one line and spilling past the card edge. */
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  /* v2.0.20 — wrap instead of overflowing. The spans are nowrap so a
     phrase is never broken mid-way; when the ship label is too long for
     the column the SAVE chip drops to its own line instead of running
     off the card. */
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
}
.sgc .sgc-card__hrs > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgc .sgc-card--soldout .sgc-card__hrs {
  background: var(--be-muted);
  color: var(--be-ink);
}

/* Card actions row (now a sibling of __body, not nested inside it).
   Restyle the stepper+Add button as a single brutalist CTA strip. */
.sgc .sgc-card .sgc-card__actions {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-top: 2px solid var(--be-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--be-paper);
}
.sgc .sgc-card .sgc-stepper {
  display: flex !important;
  align-items: stretch !important;
  border-right: 2px solid var(--be-ink) !important;
  flex: 0 0 auto;
}
.sgc .sgc-card .sgc-stepper__btn {
  border: 0 !important;
  background: var(--be-paper) !important;
  color: var(--be-ink) !important;
  width: clamp(28px, 2.6vw, 36px) !important;
  height: auto !important;
  padding: 8px 0 !important;
  font-family: var(--be-font-display) !important;
  font-size: 14px !important;
  cursor: pointer;
}
.sgc .sgc-card .sgc-stepper__btn:hover { background: var(--be-yellow) !important; }
.sgc .sgc-card .sgc-stepper__val {
  border: 0 !important;
  border-left: 2px solid var(--be-ink) !important;
  border-right: 2px solid var(--be-ink) !important;
  width: clamp(32px, 3vw, 44px) !important;
  text-align: center !important;
  padding: 0 !important;
  font-family: var(--be-font-display) !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  font-weight: normal !important;
  background: var(--be-paper) !important;
  color: var(--be-ink) !important;
  -moz-appearance: textfield;
}
.sgc .sgc-card .sgc-stepper__val::-webkit-outer-spin-button,
.sgc .sgc-card .sgc-stepper__val::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sgc .sgc-card .sgc-addbtn {
  flex: 1 1 auto;
  background: var(--be-ink) !important;
  color: var(--be-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(10px, 1vw, 14px) !important;
  font-family: var(--be-font-body) !important;
  font-size: clamp(11px, .85vw, 14px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .12s;
}
.sgc .sgc-card .sgc-addbtn:hover { background: var(--be-accent) !important; }
.sgc .sgc-card .sgc-addbtn[disabled] {
  background: var(--be-muted) !important;
  color: var(--be-ink) !important;
  cursor: not-allowed;
}

/* ---------- Hero polish — `// 01 — ` prefix on the eyebrow ---------- */
/* The eyebrow currently prints "Flash Clearance · Ends 12 May 2026".
   The CSS injects the // 01 — prefix to match the preview pattern. */
.sgc .sgc-hero__eyebrow::before { content: "// 01 — " !important; }

/* =========================================================
   v2.0.4 — BRUTALIST LAYOUT TIGHTENING
   Reduces hero height, hides mobile-only filter button on
   desktop, compacts the hero note + grid head.
   ========================================================= */

/* Hide the legacy mobile-only filter button at desktop widths.
   The desktop-targeted .sgc-filter-toggle stays visible everywhere
   (its label flips between "Hide filters" / "Show filters"). */
@media (min-width: 640px) {
  .sgc .sgc-mobile-filter-btn { display: none !important; }
}

/* Tighter hero — was padding: 88px 64px = 931px tall on desktop.
   Drop top/bottom to ~56px and constrain inner width so 120px
   Archivo Black doesn't stretch a 200px-tall block on wide
   viewports. */
.sgc .sgc-hero {
  padding: clamp(36px, 4.5vw, 64px) clamp(20px, 5vw, 64px) !important;
}
.sgc .sgc-hero__inner { max-width: 1100px; }
.sgc .sgc-hero__title {
  /* Cap a little earlier so the headline doesn't push everything
     else below the fold on >1500px monitors. */
  font-size: clamp(48px, 7vw, 88px) !important;
}

/* Compact hero subtitle */
.sgc .sgc-hero__subtitle {
  font-size: clamp(15px, 1.1vw, 17px) !important;
  margin-bottom: 18px !important;
}

/* Slim allocation note: smaller type, single-line accent bar instead
   of full-width info card. The italic disclaimer stays underneath
   but isn't part of the visual weight competition with the hero. */
.sgc .sgc-hero__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-left: 2px solid var(--be-accent);
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.04);
  font-family: var(--be-font-body);
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--be-muted) !important;
  max-width: 70ch;
  margin: 0 0 18px !important;
}
.sgc .sgc-hero__note .sgc-icon { color: var(--be-accent); flex: 0 0 auto; width: 14px; height: 14px; }
.sgc .sgc-hero__note span { display: block; }
.sgc .sgc-hero__note-disclaimer { font-size: 11px !important; color: rgba(181,181,181,0.7) !important; display: block; margin-top: 4px; }

/* Tighter hero stats — smaller tiles, less vertical space */
.sgc .sgc-hero__stats { max-width: 720px; }
.sgc .sgc-hero__stat { padding: 12px 14px !important; }
.sgc .sgc-hero__stat dd { font-size: clamp(22px, 2.4vw, 32px) !important; }
.sgc .sgc-hero__stat dt { font-size: 9px !important; margin-bottom: 4px !important; }

/* Grid head: was 227px tall; tighten to ~120px */
.sgc .sgc-grid-head {
  padding: clamp(20px, 2.5vw, 40px) clamp(20px, 5vw, 64px) clamp(16px, 2vw, 28px) !important;
}
.sgc .sgc-grid-head__title {
  font-size: clamp(24px, 3vw, 40px) !important;
  line-height: .95 !important;
}

/* Sticky bar: drop padding so it occupies ~64px not 92px */
.sgc .sgc-stickybar { padding: 10px clamp(20px, 5vw, 64px) !important; }
.sgc .sgc-search input { padding: 9px 0 !important; }
.sgc .sgc-sort, .sgc .sgc-filter-toggle { padding: 8px 14px !important; }

/* Chiprows: a hair less padding when expanded */
.sgc .sgc-chiprows { padding: 10px clamp(20px, 5vw, 64px) 0 !important; }
.sgc .sgc-chiprows__inner { padding-bottom: 10px !important; }

/* =========================================================
   v2.0.5 — STRAGGLER FONT OVERRIDES
   Force brutalist fonts on the IP combo filter + allocation
   modal, which the editorial layer still owned because my
   earlier overrides lacked enough specificity / !important.
   ========================================================= */

.sgc .sgc-ipfilter,
.sgc .sgc-ipfilter * {
  font-family: var(--be-font-mono) !important;
  letter-spacing: .06em;
}
.sgc .sgc-ipfilter__list li {
  font-family: var(--be-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px !important;
}

.sgc .sgc-alloc,
.sgc .sgc-alloc * {
  font-family: var(--be-font-body) !important;
}
.sgc .sgc-alloc__title {
  font-family: var(--be-font-display) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  letter-spacing: -.01em !important;
  line-height: 1.05;
}
.sgc .sgc-alloc__lede {
  font-size: 14px;
  line-height: 1.5;
  color: var(--be-ink);
}
.sgc .sgc-alloc__remember {
  font-size: 12px;
  color: var(--be-muted-2);
  letter-spacing: .02em;
}
.sgc .sgc-alloc__icon { color: var(--be-accent); }

/* =========================================================
   v2.0.6 — Search input + sticky controls typographic match
   ========================================================= */

/* Search input in the sticky bar — mono caps placeholder per the
   preview design. The value stays mono so a typed SKU/barcode
   reads as code, not body. */
.sgc .sgc-search input {
  font-family: var(--be-font-mono) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}
.sgc .sgc-search input::placeholder {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .12em !important;
  color: var(--be-muted-2) !important;
}

/* =========================================================
   v2.0.7 — FIX: eyebrow prefix, badge size, hrs-bar text fit
   ========================================================= */

/* The legacy editorial CSS turns .sgc-hero__eyebrow into a flex
   container with a decorative numbered "stamp" (the screenshot
   showed `//`, `01`, `—` stacked vertically with a top rule).
   Force it back to a simple inline mono caps line and drop the
   `// 01 — ` prefix — the marquee strip above already carries
   the brand signature, the eyebrow doesn't need a redundant one. */
.sgc .sgc-hero__eyebrow {
  display: block !important;
  flex-direction: row !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
.sgc .sgc-hero__eyebrow::before {
  content: none !important;
}
.sgc .sgc-hero__eyebrow::after {
  /* If the legacy CSS added a decorative ::after rule, neutralise it. */
  content: none !important;
}
/* Defensive: nuke any flex/grid kids the legacy CSS may have added
   inside the eyebrow. */
.sgc .sgc-hero__eyebrow > * { display: inline !important; }

/* Card discount badge — the legacy CSS rendered it 230px wide
   spanning the image. Clamp to a small corner pill. */
.sgc .sgc-card .sgc-card__badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  background: var(--be-accent) !important;
  color: var(--be-paper) !important;
  font-family: var(--be-font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  border-radius: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* hrs-bar — was clipping the SAVE label because the left text
   was longer than the right column allowed. Now the left text is
   shorter ("In stock") and we let both sides shrink/wrap freely
   instead of ellipsing. */
.sgc .sgc-card__hrs > span {
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0;
}
/* Keep SAVE hard-right on both the one-line and the wrapped layout. */
.sgc .sgc-card__hrs > span:last-child { font-weight: 700; margin-left: auto; }

/* CTA — always full-width since the stepper is gone. */
.sgc .sgc-card .sgc-card__actions {
  display: block !important;
}
.sgc .sgc-card .sgc-addbtn {
  width: 100% !important;
  display: block !important;
}

/* =========================================================
   v2.0.8 — Hover refinement, meta cleanup, sort/select fix,
   shipping-notice strip
   ========================================================= */

/* CARD HOVER — drop the translate+shadow shuffle. New treatment:
   subtle yellow underline strip + accent CTA bg change. Feels
   architectural instead of bouncy. */
.sgc .sgc-card {
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sgc .sgc-card:hover {
  z-index: 2;
  transform: none;
  box-shadow: none;
  background: var(--be-paper);
}
.sgc .sgc-card:hover .sgc-card__hrs {
  background: var(--be-ink);
  color: var(--be-yellow);
  border-top-color: var(--be-ink);
}
.sgc .sgc-card:hover .sgc-addbtn {
  background: var(--be-accent) !important;
}
.sgc .sgc-card:hover .sgc-card__media {
  background: var(--be-yellow) !important;
}

/* CARD META — when only category is rendered (no IP), keep the
   layout consistent. The meta-sep was a decorative bullet on the
   editorial design; brutalist uses gap+flex-wrap, no bullet. */
.sgc .sgc-card__meta .sgc-card__meta-sep { display: none; }
.sgc .sgc-card__meta .sgc-card__meta-ip { color: var(--be-ink); font-weight: 600; }
.sgc .sgc-card__meta .sgc-card__meta-cat { color: var(--be-muted-2); font-weight: 400; }

/* SORT SELECT — text vertical centering. Native <select> uses
   platform line-height which can clip top/bottom when we set a
   height shorter than the platform default. Explicit line-height
   keeps the FEATURED text centered. */
.sgc .sgc-sort {
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 34px;
}
.sgc .sgc-filter-toggle,
.sgc .sgc-mobile-filter-btn {
  line-height: 1.4 !important;
}

/* GRID HEAD — remove the decorative `// 02 — CATALOGUE / 124 figures.
   One sale.` heading. The marquee + resultsbar already carry the
   count + section signal; the heading was duplicative. */
.sgc .sgc-grid-head { display: none !important; }

/* ALLOCATION NOTICE STRIP — sits between resultsbar and grid.
   Yellow background, mono caps label, body text. Communicates the
   14-day shipping policy without scrolling back to the hero. */
.sgc .sgc-allocnotice {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px clamp(20px, 5vw, 64px);
  background: var(--be-yellow);
  color: var(--be-ink);
  border-bottom: 2px solid var(--be-ink);
  font-family: var(--be-font-body);
  font-size: 13px;
  line-height: 1.4;
  flex-wrap: wrap;
}
.sgc .sgc-allocnotice__lab {
  font-family: var(--be-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.sgc .sgc-allocnotice__msg {
  flex: 1 1 auto;
  min-width: 200px;
}
.sgc .sgc-allocnotice strong { font-weight: 700; }
@media (max-width: 640px) {
  .sgc .sgc-allocnotice { padding: 12px 16px; gap: 8px; font-size: 12px; }
}

/* The legacy hero note (allocation explainer) becomes redundant
   now that the notice strip is sitting above the grid. Hide it on
   the hero — the strip carries the same message in a more visible
   spot. */
.sgc .sgc-hero__note { display: none !important; }

/* =========================================================
   v2.0.10 — Mobile sticky-bar compaction
   ========================================================= */

/* Hide the redundant legacy mobile filter button entirely. We
   only need one filter toggle now (.sgc-filter-toggle), which is
   visible everywhere. The old bottom-sheet drawer the
   .sgc-mobile-filter-btn used to open is no longer wired up. */
.sgc .sgc-mobile-filter-btn { display: none !important; }

/* Hide the results bar — items count is already shown in the
   hero stats and the marquee. The "Clear all filters" button
   stays reachable by toggling chips off individually; if filters
   are applied we still want a visible Clear button, so the bar
   conditionally re-appears below when state.hasFilters is true. */
.sgc .sgc-resultsbar { display: none !important; }

/* Mobile sticky bar: pack search (full row) + sort + filter-toggle
   on a second row at 50/50. More compact than 3 stacked rows. */
@media (max-width: 640px) {
  .sgc .sgc-stickybar { padding: 8px 14px !important; }
  .sgc .sgc-stickybar__row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .sgc .sgc-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 1;
  }
  .sgc .sgc-search input { padding: 8px 0 !important; font-size: 12px !important; }
  .sgc .sgc-search input::placeholder { font-size: 10px !important; }
  .sgc .sgc-sort {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    order: 2;
    padding: 8px 28px 8px 10px !important;
    font-size: 11px !important;
    background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 7px) calc(50% - 2px) !important;
  }
  .sgc .sgc-filter-toggle {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    order: 3;
    padding: 8px 10px !important;
    font-size: 11px !important;
    justify-content: center;
  }
  /* the icon inside the toggle button — slightly shrink on mobile */
  .sgc .sgc-filter-toggle .sgc-icon { width: 14px; height: 14px; flex: 0 0 auto; }
  /* hero stats tighter on phones */
  .sgc .sgc-hero { padding: clamp(24px, 5vw, 36px) 16px !important; }
  .sgc .sgc-hero__title { font-size: clamp(36px, 9vw, 56px) !important; }
  .sgc .sgc-hero__subtitle { font-size: 14px !important; }
}

/* On really narrow phones, allow sort+filter to wrap to their
   own row each if the labels are clipping. */
@media (max-width: 360px) {
  .sgc .sgc-sort, .sgc .sgc-filter-toggle { flex: 1 1 100% !important; }
}

/* =========================================================
   v2.0.11 — Add-to-cart loading / success states
   Locked brutalist colors with strong contrast. Was inheriting
   a salmon-ish fade from the legacy transition stack.
   ========================================================= */

/* LOADING — ink black bg, yellow text, spinning icon. Stays
   high-contrast and matches the yellow .hrs-bar above it for
   a brand-coherent transition. */
.sgc .sgc-card .sgc-addbtn--loading,
.sgc .sgc-card .sgc-addbtn--loading:hover,
.sgc .sgc-card:hover .sgc-addbtn--loading {
  background: var(--be-ink) !important;
  color: var(--be-yellow) !important;
  opacity: 1 !important;
  cursor: progress !important;
  pointer-events: none;
  transition: none !important;
}
.sgc .sgc-card .sgc-addbtn--loading .sgc-icon {
  width: 14px; height: 14px;
  animation: sgc-addbtn-spin .8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes sgc-addbtn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* SUCCESS — accent green (commerce-success), paper text. Brief
   confirmation flash before the button returns to its default. */
.sgc .sgc-card .sgc-addbtn--success,
.sgc .sgc-card .sgc-addbtn--success:hover,
.sgc .sgc-card:hover .sgc-addbtn--success {
  background: #1cb255 !important;  /* same green as the marquee LIVE dot */
  color: var(--be-paper) !important;
  opacity: 1 !important;
  cursor: default !important;
  transition: background .15s ease !important;
}
.sgc .sgc-card .sgc-addbtn--success .sgc-icon {
  margin-right: 6px;
  vertical-align: middle;
}

/* ERROR — accent red bg, paper text. Used by clearance.js when
   the request fails (e.g. signature, stock). */
.sgc .sgc-card .sgc-addbtn--error,
.sgc .sgc-card .sgc-addbtn--error:hover,
.sgc .sgc-card:hover .sgc-addbtn--error {
  background: var(--be-accent) !important;
  color: var(--be-paper) !important;
  opacity: 1 !important;
}

/* Modal Add-to-cart button — apply the same states for parity. */
.sgc .sgc-modal__add.sgc-addbtn--loading,
.sgc .sgc-modal .sgc-addbtn--loading {
  background: var(--be-ink) !important;
  color: var(--be-yellow) !important;
  border-color: var(--be-ink) !important;
  opacity: 1 !important;
  cursor: progress !important;
}
.sgc .sgc-modal__add.sgc-addbtn--success,
.sgc .sgc-modal .sgc-addbtn--success {
  background: #1cb255 !important;
  color: var(--be-paper) !important;
  border-color: #1cb255 !important;
  opacity: 1 !important;
}

/* =========================================================
   v2.0.12 — Mobile hero stats: 3-column layout
   ========================================================= */

/* Override the earlier mobile rule that stacked stats 1/row.
   Use 3 cols with tighter padding + smaller numbers so all
   three tiles fit on one horizontal strip even on a 360px
   phone. The "8d 23h 20m" countdown is the widest value, so
   give it slightly more width than the other two. */
@media (max-width: 640px) {
  .sgc .sgc-hero__stats {
    grid-template-columns: 1.4fr 1fr 1fr !important;
  }
  .sgc .sgc-hero__stat {
    padding: 8px 8px !important;
    border-right: 2px solid var(--be-paper) !important;
    border-bottom: 0 !important;
  }
  .sgc .sgc-hero__stat:last-child { border-right: 0 !important; }
  .sgc .sgc-hero__stat dt {
    font-size: 8px !important;
    letter-spacing: .1em !important;
    margin-bottom: 2px !important;
  }
  .sgc .sgc-hero__stat dd {
    font-size: clamp(15px, 4.4vw, 20px) !important;
    line-height: 1 !important;
  }
  .sgc .sgc-hero__stat dd small {
    font-size: 8px !important;
    margin-left: 2px !important;
  }
}
/* Very narrow phones — slightly tighter typography */
@media (max-width: 360px) {
  .sgc .sgc-hero__stat { padding: 6px 6px !important; }
  .sgc .sgc-hero__stat dd { font-size: 13px !important; }
}

/* ---------- Prize breakdown accordion (kuji full sets) ---------- */
.sgc-prizes{margin-top:14px}
.sgc-prizes__acc{border-top:1px solid rgba(0,0,0,.1);padding-top:12px}
.sgc-prizes__sum{cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:8px}
.sgc-prizes__sum::-webkit-details-marker{display:none}
.sgc-prizes__sum::after{content:"+";margin-left:auto;font-size:16px;font-weight:700;opacity:.55}
.sgc-prizes__acc[open] .sgc-prizes__sum::after{content:"\2212"}
.sgc-prizes__count{font-weight:500;opacity:.55;font-size:12px}
.sgc-prizes__grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.sgc-prize{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.25}
.sgc-prize__img{width:44px;height:44px;object-fit:cover;border-radius:6px;background:#f1f1f1;flex:0 0 auto}
.sgc-prize__img--none{display:inline-block}
.sgc-prize__label{flex:1 1 auto;min-width:0}
.sgc-prize__qty{font-weight:700;opacity:.7;flex:0 0 auto}
.sgc-prize__thumb{flex:0 0 auto;line-height:0;border-radius:6px;overflow:hidden;cursor:zoom-in;display:inline-block}
.sgc-prize__thumb:hover .sgc-prize__img{opacity:.85}
.sgc-lightbox{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.sgc-lightbox.is-open{display:flex}
.sgc-lightbox__img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.6);cursor:default}
.sgc-lightbox__close{position:absolute;top:18px;right:22px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:38px;cursor:pointer}
.sgc-lightbox__close:hover{background:rgba(255,255,255,.3)}