/*
 * Shoppy Tabs — tabbed platform section with a full-bleed media preview
 * (photo or video) per tab.
 * Tokens mirror the Shoppy landing (Option I): Lora serif, Inter sans,
 * navy text #1c274f, clay accent #d4998a.
 */

.shoppy-tabs {
  /* tokens */
  --st-text: #1c274f;
  --st-accent: #d4998a;
  --st-bg: #ffffff;
  --st-bg-alt: #f6f7f9;
  --st-group: #f3f4f6;
  --st-g200: #e5e7eb;
  --st-g400: #9ca3af;
  --st-g600: #4b5563;
  --st-soft: #f0ede5;
  --st-soft2: #e7e3d8;
  --st-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --st-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-shadow-subtle: 0 1px 2px rgba(28, 39, 79, 0.06);
  --st-shadow-card: 0 1px 3px rgba(28, 39, 79, 0.08), 0 4px 12px rgba(28, 39, 79, 0.04);
  --st-card-border: 0.5px solid #e5e7eb;
  --st-accent-wash: rgba(212, 153, 138, 0.12);
  --st-g500: #6b7280;

  /* Transparent and flush: the section inherits the page background and
     brings no padding of its own (the tinted band, borders, and section
     padding from the original design were removed on purpose). */
  background: transparent;
  padding: 0;
  font-family: var(--st-sans);
  color: var(--st-text);
}

.shoppy-tabs .st-inner {
  max-width: 1088px;
  margin: 0 auto;
}

/* ── Button hardening ───────────────────────────────────── */
/* Themes commonly style `button` globally (padding, min-width, colors,
   shadows, uppercase). Reset everything our buttons rely on so the
   section renders identically under any theme. */
.shoppy-tabs .st-tab,
.shoppy-tabs .st-more,
.shoppy-tabs .st-menu-item {
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: normal;
}

/* ── Tab rail ───────────────────────────────────────────── */
.shoppy-tabs .st-railwrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shoppy-tabs .st-rail {
  display: inline-flex;
  gap: 8px;
  background: var(--st-group);
  padding: 6px;
  border-radius: 8px;
}
.shoppy-tabs .st-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-family: var(--st-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: var(--st-g600);
}
.shoppy-tabs .st-tab svg {
  color: var(--st-g400);
  flex-shrink: 0;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Stroke icons: keep fill off even if the theme styles `svg { fill: … }`
   (CSS overrides the fill="none" presentation attribute). */
.shoppy-tabs .st-tab svg,
.shoppy-tabs .st-menu-item svg,
.shoppy-tabs .st-check svg {
  fill: none;
  display: block;
}
.shoppy-tabs .st-tab.is-active {
  background: var(--st-bg);
  color: var(--st-text);
  box-shadow: var(--st-shadow-subtle);
}
.shoppy-tabs .st-tab.is-active svg {
  color: var(--st-accent);
}
.shoppy-tabs .st-tab:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 2px;
}

/* ── Mobile overflow ("···") button + floating menu ─────── */
/* Hidden outside the mobile breakpoint. The button carries an accent
   ring while open or when the active tab lives in the overflow menu. */
.shoppy-tabs .st-more {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--st-group);
  border: 1.5px solid transparent;
  color: var(--st-g500);
}
.shoppy-tabs .st-more svg {
  display: block;
  fill: currentColor;
}
.shoppy-tabs .st-railwrap.is-open .st-more,
.shoppy-tabs .st-more.is-overflow-active {
  background: var(--st-accent-wash);
  border-color: var(--st-accent);
  color: var(--st-accent);
}
.shoppy-tabs .st-more:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 2px;
}
.shoppy-tabs .st-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--st-bg);
  border: var(--st-card-border);
  border-radius: 14px;
  box-shadow: var(--st-shadow-card);
  padding: 6px;
}
.shoppy-tabs .st-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  font-family: var(--st-sans);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  background: transparent;
  color: var(--st-text);
  transition: background 0.15s;
}
.shoppy-tabs .st-menu-item svg {
  color: var(--st-g400);
  flex-shrink: 0;
}
.shoppy-tabs .st-menu-item.is-active {
  background: var(--st-accent-wash);
  color: var(--st-accent);
}
.shoppy-tabs .st-menu-item.is-active svg {
  color: var(--st-accent);
}

/* ── Preview panel ──────────────────────────────────────── */
/* All panels stack in the same grid cell and stay laid out (hidden via
   visibility, not display), so every panel gets the tallest panel's
   height and switching tabs never shifts the page. */
.shoppy-tabs .st-panels {
  display: grid;
  margin-top: 24px;
}
.shoppy-tabs .st-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  display: grid;
  min-height: 500px;
  grid-template-columns: 300px 1fr;
  background: var(--st-bg);
  border: var(--st-card-border);
  border-radius: 20px;
  overflow: hidden;
}
.shoppy-tabs .st-panel.is-active {
  visibility: visible;
}
/* Media cell: the photo/video covers the whole cell (no phone frame).
   Height comes from the panel's min-height / the content column. */
.shoppy-tabs .st-media-cell {
  position: relative;
  background: var(--st-bg-alt);
  border-right: var(--st-card-border);
}
.shoppy-tabs .st-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.shoppy-tabs .st-media--placeholder {
  background: linear-gradient(160deg, var(--st-soft2), var(--st-soft));
}
.shoppy-tabs .st-content {
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shoppy-tabs .st-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-accent);
}
.shoppy-tabs .st-head {
  font-family: var(--st-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  max-width: 460px;
  color: var(--st-text);
}
.shoppy-tabs .st-body {
  font-size: 16px;
  line-height: 1.625;
  color: var(--st-g600);
  margin: 14px 0 0;
  max-width: 540px;
}
.shoppy-tabs .st-bullets {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shoppy-tabs .st-bullet {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 14px;
  color: var(--st-text);
  font-weight: 500;
}
.shoppy-tabs .st-check {
  color: var(--st-accent);
  display: flex;
  flex-shrink: 0;
}

/* ── Breakpoints (mirror the design's t/m configs) ─────── */
@media (max-width: 900px) {
  /* Stacked rows: pin the media row to its aspect-ratio height and give
     all the extra space (from the shared tallest-panel height) to the
     content row, so the media area is the same height on every tab. */
  .shoppy-tabs .st-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* Stacked: the media keeps the desktop cell's portrait ratio
     (300px column × 500px min panel = 3/5), capped so wider stacked
     viewports don't produce an oversized cell. The explicit width stops
     the max-height from transferring through the aspect-ratio and
     shrinking the cell below the panel width. */
  .shoppy-tabs .st-media-cell {
    border-right: none;
    border-bottom: var(--st-card-border);
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 3 / 5;
    max-height: 660px;
  }
  .shoppy-tabs .st-content {
    padding: 40px;
  }
}
@media (max-width: 520px) {
  /* Pill keeps only the first two tabs; the rest sit in the ··· menu. */
  .shoppy-tabs .st-rail {
    gap: 6px;
    border-radius: 14px;
  }
  .shoppy-tabs .st-rail .st-tab:nth-child(n + 3) {
    display: none;
  }
  .shoppy-tabs .st-tab {
    padding: 11px 16px;
    border-radius: 10px;
  }
  .shoppy-tabs .st-more {
    display: flex;
  }
  .shoppy-tabs .st-railwrap.is-open .st-menu {
    display: block;
  }
  .shoppy-tabs .st-content {
    padding: 28px 22px;
  }
  .shoppy-tabs .st-head {
    font-size: 24px;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shoppy-tabs .st-tab,
  .shoppy-tabs .st-tab svg,
  .shoppy-tabs .st-more,
  .shoppy-tabs .st-menu-item {
    transition: none;
  }
}