/*
 * Monopol · layout refinements on top of the Marble theme.
 * Pure CSS on the theme's stable sa-* hooks and design tokens, so it survives
 * theme updates and follows whatever accent palette settings.json defines.
 */

/* ── Hero as a contained panel ──────────────────────────────────────────── */
.sa-tpl-shop .sa-hero {
  max-width: var(--container-max);
  width: calc(100% - 2rem);
  margin: 1rem auto 0;
  border: var(--border-w) solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sa-tpl-shop .sa-hero .wrap { padding-inline: 1.5rem; }
@media (min-width: 1024px) {
  .sa-tpl-shop .sa-hero .wrap { padding-inline: 3rem; }
}

/* Hero media (split-media variant): full height, bleeding to the panel edge
   like the reference. The theme's offset frame, glow blob and duplicate chip
   overlay are hidden so the image carries the right half on its own. */
.sa-hero--split-media .sa-hero-media > div > div[aria-hidden="true"] { display: none; }
.sa-hero--split-media .sa-hero-media img,
.sa-hero--split-media .sa-hero-media lite-youtube {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1024px) {
  .sa-hero--split-media .wrap > .flex { align-items: stretch; }
  .sa-hero--split-media .sa-hero-media { display: flex; min-height: 24rem; }
  .sa-hero--split-media .sa-hero-media > div {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin-right: -3rem;              /* reach the panel edge; the panel clips the rest */
  }
  .sa-hero--split-media .sa-hero-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;              /* fills the half exactly, any aspect ratio */
    object-position: left center;   /* keeps the left side; use "center" or "right center" instead if needed */
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    border-right: 0;
  }
}

/* ── Stats as a framed row directly under the hero ─────────────────────── */
.sa-tpl-shop .sa-stats--strip { padding-top: 1rem; padding-bottom: 0; }
.sa-tpl-shop .sa-stats--strip .wrap { width: calc(100% - 2rem); padding-inline: 0; }   /* same width formula as the hero panel */
.sa-tpl-shop .sa-stats--strip .sa-stats-items {
  border: var(--border-w) solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.75rem 0.5rem;
}
.sa-tpl-shop .sa-stats--strip .icon-tile { display: none; }
.sa-tpl-shop .sa-stats--strip .sa-stats-item { padding-inline: 1.5rem; }

/* ── Category tiles docked under the stats box ─────────────────────────── */
.sa-tpl-shop .sa-categories--tile { padding-top: 1rem; padding-bottom: 0; }
.sa-tpl-shop .sa-categories--tile .wrap { width: calc(100% - 2rem); padding-inline: 0; }
.sa-tpl-shop .sa-categories--tile .sa-categories-item { padding: 1.1rem 1.25rem; }
.sa-tpl-shop .sa-categories--tile .sa-categories-item h3 { font-family: var(--ff-heading); }

/* ── Editorial section eyebrows ─────────────────────────────────────────── */
.sa-section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
.sa-section-header.text-left .sa-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.8;
}

/* ── Soft vignette behind everything ────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}