/* ================================================================
   SeeThru — Product Detail (PDP) suite · shared design tokens
   Ported from the design project's tokens.css, namespaced under
   .stx-pdp so the variables resolve on the live WP/Elementor site
   without depending on the global Elementor kit.

   Every PDP widget wrapper carries the `stx-pdp` class, so any
   descendant can read these custom properties. Elementor style
   controls override individual selectors on top of these defaults.
   ================================================================ */

.stx-pdp {
  /* ---------- Color · Foundation ---------- */
  --stx-ink-1000: #000000;
  --stx-ink-950:  #0A0A0B;
  --stx-ink-900:  #101012;
  --stx-ink-850:  #161618;
  --stx-ink-800:  #1C1C1F;
  --stx-ink-700:  #26262A;
  --stx-ink-600:  #3A3A40;
  --stx-ink-500:  #5C5C63;
  --stx-ink-400:  #86868B;
  --stx-ink-300:  #B5B5BA;
  --stx-ink-200:  #D6D6D9;
  --stx-ink-100:  #ECECEE;
  --stx-ink-50:   #F5F5F7;
  --stx-ink-0:    #FFFFFF;

  /* ---------- Accent — matches the cart/checkout blue (no beige) ---------- */
  --stx-titanium:      #2563EB;
  --stx-titanium-soft: #9DBBF6;
  --stx-titanium-dark: #1E4FD8;
  --stx-blue:          #2563EB;
  --stx-blue-hover:    #1D4FD8;
  --stx-star:          #EF4444;

  /* ---------- Signal (semantic only) ---------- */
  --stx-signal-on:   #4ADE80;
  --stx-signal-warn: #F5A524;
  --stx-signal-err:  #EF4444;

  /* ---------- Typography ---------- */
  --stx-font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --stx-font-body:    'Geist', 'Inter', system-ui, sans-serif;
  --stx-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  --stx-ls-wide:    0.08em;
  --stx-ls-eyebrow: 0.18em;
  --stx-ls-tight:  -0.02em;

  --stx-fw-thin:    200;
  --stx-fw-light:   300;
  --stx-fw-regular: 400;
  --stx-fw-medium:  500;
  --stx-fw-semi:    600;
  --stx-fw-bold:    700;

  /* ---------- Spacing (8-grid w/ a 4 step) ---------- */
  --stx-s-1:  4px;
  --stx-s-2:  8px;
  --stx-s-3:  12px;
  --stx-s-4:  16px;
  --stx-s-5:  24px;
  --stx-s-6:  32px;
  --stx-s-7:  48px;
  --stx-s-8:  64px;
  --stx-s-9:  96px;
  --stx-s-10: 128px;

  /* ---------- Radius ---------- */
  --stx-r-2: 4px;
  --stx-r-3: 8px;
  --stx-r-4: 12px;
  --stx-r-pill: 999px;

  /* ---------- Motion ---------- */
  --stx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stx-dur-fast: 180ms;
  --stx-dur-base: 320ms;

  font-family: var(--stx-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Box-sizing + media resets, scoped so we never touch the rest of the page. */
.stx-pdp, .stx-pdp *, .stx-pdp *::before, .stx-pdp *::after { box-sizing: border-box; }
.stx-pdp img, .stx-pdp svg, .stx-pdp video { display: block; max-width: 100%; }
.stx-pdp a { color: inherit; text-decoration: none; }
.stx-pdp button { font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .stx-pdp *, .stx-pdp *::before, .stx-pdp *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------
   Robust responsive stacking for the gallery / buy two-column row.
   These classes are added to the Elementor containers that hold the
   widgets, so stacking never depends on Elementor's per-breakpoint
   container settings (which vary with the site's custom breakpoints).
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   Fixed-header space reservation (root cause of the on-load shift).
   The site header is a custom Elementor header, so Rey can't measure it
   server-side — its --header-default--height stays wrong (150px) and the
   space-reserving #rey-siteHeader-helper sits at 0 until Rey's JS runs
   ~1-2s in, so the fixed header overlaps the breadcrumb and then content
   jumps down. We reserve stable space from first paint instead; mobile keeps
   that spacer compact because the custom header visually overlays the page.
   Scoped to single-product pages (where this section is used).
   ---------------------------------------------------------------- */
body.single-product { --header-default--height: 80px; }
@media (max-width: 1024px) { body.single-product { --header-default--height: 22px; } }
body.single-product .rey-siteHeader.header-pos--fixed { --hdr-p: fixed !important; }
body.single-product #rey-siteHeader-helper {
  display: block !important;
  height: var(--header-default--height) !important;
}

@media (max-width: 1080px) {
  /* Take the gallery / buy two-column layout out of flexbox entirely and let
     normal block flow stack them. Flexbox here resolved the stacked widget's
     height through flex sizing (collapsing the gallery and overlapping the
     panel); block flow sizes every child to its natural content height. */
  .stx-pdp-row,
  .stx-pdp-row > .e-con-inner,
  .stx-pdp-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .stx-pdp-col > .elementor-widget,
  .stx-pdp-col > .elementor-widget > .elementor-widget-container {
    height: auto !important;
  }
  /* Restore vertical rhythm the flex gap was providing between the two. */
  .stx-pdp-col + .stx-pdp-col { margin-top: 40px; }
}