/* =============================================================================
   Bigscreen store — storefront surfaces (owned sections), on the design system
   in bs-chrome.css. Currently: the item grid (bs-item-grid.liquid).
   ============================================================================= */

/* ---- Item grid: light store surface (the shipped store palette), tiles on
   off-white frames ---- */
.bsg-section {
  background: #fff;
  color: #0a0a0c;
  font-family: var(--font-display);
  font-weight: 400;
  padding: 40px 0 80px;   /* tight under the marquee */
}
@media (min-width: 992px) { .bsg-section { padding: 48px 0 120px; } }

.bsg-container {
  width: 100%;
  max-width: var(--desktopMaxWidth);
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

.bsg-head { margin: 0 0 32px; }
.bsg-kicker {
  font-family: var(--font-mono);
  font-size: 15px; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; color: #70777A; margin: 0;
}
.bsg-kicker::before { content: "/ "; }

.bsg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;               /* the shipped 16px grid gap */
  row-gap: 48px;
}
@media (max-width: 991.98px) {
  .bsg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; row-gap: 32px; }
}

/* ---- Tile ---- */
.bsg-tile {
  display: flex; flex-direction: column;
  color: #0a0a0c; text-decoration: none;
  transition: transform var(--dur) var(--ease-signature);
}
.bsg-tile:hover { transform: translateY(-4px); }

.bsg-frame {
  position: relative;
  aspect-ratio: 6 / 7;   /* the shipped card proportion */
  overflow: hidden;
  background: var(--off-white);   /* #F4F3F3 — the shipped store frame tone */
  border-radius: 3px 3px 16px 3px;
  corner-shape: round round bevel round;
  transition: background-color var(--dur);
}
.bsg-tile:hover .bsg-frame { background: var(--hairline); }   /* #DFDFDF hover, as shipped */
.bsg-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14%;   /* product floats smaller in the frame */
  box-sizing: border-box;
  display: block;
}

/* ---- Tag chips: angular mono, top-left on the frame ---- */
.bsg-tag {
  position: absolute; left: 12px; top: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px 2px 8px 2px;
  corner-shape: round round bevel round;
  white-space: nowrap; overflow: hidden;
}
.bsg-tag--signal { background: var(--brand); color: #fff; }      /* pre order */
.bsg-tag--solid  { background: #000; color: #fff; }              /* new */
.bsg-tag--hollow { background: transparent; color: #000;         /* replacement / sale / sold out */
  border: 1px solid rgba(0,0,0,.55); padding: 5px 9px; }

/* ---- Caption row: title + hover arrow, mono price (deck scale: Body Large /
   Label Mono) ---- */
.bsg-caption {
  margin-top: 18px;
}
.bsg-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 400; font-size: 19px; line-height: 1.3;
  letter-spacing: -.005em; margin: 0;
}
.bsg-arrow {
  flex: 0 0 auto; opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast), transform var(--dur) var(--ease-signature);
  color: #0a0a0c;
}
.bsg-tile:hover .bsg-arrow { opacity: 1; transform: none; }
.bsg-price {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: #70777A;
}
/* ---- Tile rating (gated in the section: only tiles past reviews_min) --------
   The stage's rating treatment, sized for a tile: a muted base star row that
   sizes the box, a violet row clipped to the score over it, and a mono count.
   Violet on the marks only — the same selection/emphasis signal the rest of the
   store spends it on — and the number in the one secondary grey, so the row
   reads as instrumentation under the title rather than a second price. Sits
   between title and price; the price stays the tile's last line. */
.bsg-rating {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.bsg-rating-stars { position: relative; display: inline-flex; }
/* max-content so the clipped fill row keeps its full five-star width */
.bsg-rating-set { display: flex; gap: 2px; width: max-content; }
.bsg-rating-off { color: rgba(77, 30, 247, .25); }
.bsg-rating-on {
  position: absolute; left: 0; top: 0; height: 100%;
  width: var(--bsg-fill, 0%);
  overflow: hidden;
  color: var(--brand);
}
.bsg-rating-star { display: block; }
.bsg-rating-count {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 16px;
  letter-spacing: .06em; text-transform: uppercase;
  color: #70777A;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640.98px) {
  .bsg-rating { margin-top: 6px; gap: 6px; }
  .bsg-rating-count { font-size: 11px; }
}

.bsg-tile--soldout .bsg-frame img { opacity: .55; }
.bsg-tile--soldout { pointer-events: none; }

@media (max-width: 640.98px) {
  .bsg-grid { gap: 12px; row-gap: 32px; }
  .bsg-title { font-size: 16px; }
  .bsg-price { font-size: 14px; }
  .bsg-tag { font-size: 10px; }
}

/* ---- Bevel fallback — no corner-shape support (Safari/iOS, Firefox): the
   bevel radius would render as a fat curve. Fill surfaces get the real cut
   via clip-path; convention and polygon template in bs-chrome.css
   ("BEVEL FALLBACK"). ---- */
@supports not (corner-shape: round round bevel round) {
  .bsg-frame {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 16px), calc(100% - 16px) 100%, -80px calc(100% + 80px));
  }
  .bsg-tag {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 8px), calc(100% - 8px) 100%, -80px calc(100% + 80px));
  }
  /* hollow tag (replacement/sale/sold out): the clip slices its 1px CSS ring
     open along the diagonal, so the ring is drawn by a pseudo-element
     instead — a nonzero-winding ring polygon (outer path clockwise, inner
     path counter-clockwise, joined by a zero-width seam at the top-left)
     that follows the bevel. The CSS border goes transparent but keeps its
     1px so the chip's footprint doesn't shift; the ring draws at the
     padding box (overflow:hidden clips there), 1px inside where the border
     ring sat — invisible at chip scale. Interior stays transparent. */
  .bsg-tag--hollow { border-color: transparent; }
  .bsg-tag--hollow::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(0,0,0,.55);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 0,
                       1px 1px, 1px calc(100% - 1px), calc(100% - 8.4px) calc(100% - 1px),
                       calc(100% - 1px) calc(100% - 8.4px), calc(100% - 1px) 1px, 1px 1px);
  }
}