/** Shopify CDN: Minification failed

Line 42:0 All "@import" rules must come first

**/
/* ==========================================================================
   Smart Tike — Design Tokens
   Brand: airflow / coolness. Palette pinned by brief.
   ========================================================================== */

:root{
  /* --- brief-pinned palette --- */
  --st-blue:        #30AFFF; /* primary / CTA / links */
  --st-cyan:         #92EEFF; /* secondary accent / gradients */
  --st-mint:          #D8FFC5; /* light tint / badges */
  --st-sage:          #C4F7CA; /* secondary bg / cards */

  /* --- derived neutrals, kept cool to match the brief, not generic black --- */
  --st-ink:           #0B2A3D; /* primary text, deep "night sky after rain" navy */
  --st-ink-soft:      #4A6572; /* secondary text */
  --st-white:         #FFFFFF;
  --st-panel:         #0E3350; /* dark control-panel background for spec strip */

  /* --- gradients / surfaces --- */
  --st-gradient-cta:  linear-gradient(135deg, var(--st-blue) 0%, #1E8FE0 100%);
  --st-grid-line:     rgba(48, 175, 255, 0.14); /* blueprint grid lines, not a pastel wash */
  --st-surface:       #F3FAFD; /* near-white, cool-toned instrument-panel background */

  /* --- type --- */
  --st-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --st-font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --st-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* --- scale: squared-off, instrument-panel proportions rather than soft/rounded --- */
  --st-radius-lg: 14px;
  --st-radius-md: 10px;
  --st-radius-sm: 6px;
  --st-shadow-soft: 0 20px 60px -20px rgba(11, 42, 61, 0.25);
}

/* Fonts: safe to self-host or swap for Shopify's font_picker; loaded via Google Fonts here for portability */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

.st-scope, .st-scope * { box-sizing: border-box; }
.st-scope{
  font-family: var(--st-font-body);
  color: var(--st-ink);
}

.st-eyebrow{
  font-family: var(--st-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.st-eyebrow::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-blue);
  box-shadow: 0 0 0 4px rgba(48,175,255,0.18);
}

.st-btn{
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--st-radius-sm);
  padding: 14px 26px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.st-btn-primary{
  background: var(--st-gradient-cta);
  color: var(--st-white);
  box-shadow: 0 12px 30px -10px rgba(30,143,224,0.55);
}
.st-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(30,143,224,0.6); }
.st-btn-ghost{
  background: transparent;
  color: var(--st-ink);
  border: 1.5px solid rgba(11,42,61,0.15);
}
.st-btn-ghost:hover{ border-color: var(--st-blue); color: var(--st-blue); }

/* --- Airflow rings: the signature motif. Concentric arcs suggesting circulating
   cool air, radiating from the product. Reused in hero + section dividers. --- */
.st-airflow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.st-airflow svg{ width: 100%; height: 100%; }
.st-airflow-ring{
  fill: none;
  stroke: var(--st-blue);
  stroke-opacity: 0.4;
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
  transform-origin: center;
  animation: st-ripple 6s ease-in-out infinite;
}
.st-airflow-ring:nth-child(2){ animation-delay: 1.2s; stroke: var(--st-cyan); }
.st-airflow-ring:nth-child(3){ animation-delay: 2.4s; stroke-opacity: 0.22; }

@keyframes st-ripple{
  0%   { transform: scale(0.85); opacity: 0; }
  35%  { opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .st-airflow-ring{ animation: none; opacity: 0.25; }
}

/* --- Hero --- */
.st-hero{
  position: relative;
  overflow: hidden;
  background: var(--st-white);
  border-bottom: 1px solid rgba(11,42,61,0.08);
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 72px);
}
.st-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px){
  .st-hero-grid{ grid-template-columns: 1fr; }
}
.st-hero-title{
  font-family: var(--st-font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 18px 0 16px;
}
.st-hero-title em{
  font-style: normal;
  color: var(--st-blue);
}
.st-hero-copy{
  font-size: 17px;
  line-height: 1.6;
  color: var(--st-ink-soft);
  max-width: 42ch;
  margin: 0 0 32px;
}
.st-hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.st-hero-stage{
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  display: grid;
  place-items: center;
  background: var(--st-white);
}
.st-dim-callout{
  position: absolute;
  font-family: var(--st-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--st-ink-soft);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-dim-callout.st-dim-w{ bottom: -28px; left: 0; right: 0; justify-content: center; }
.st-dim-callout .st-dim-line{ flex:1; border-top: 1px dashed rgba(11,42,61,0.3); max-width: 60px; }
.st-hero-stage model-viewer{
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}
.st-hero-stage img.st-hero-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(11,42,61,0.25));
}
.st-tilt-stage{
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  cursor: grab;
}
.st-tilt-stage:active{ cursor: grabbing; }
.st-tilt-img{
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.st-tilt-peek{ opacity: 0; }
.st-3d-hint{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--st-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-ink-soft);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 2;
}

/* --- Spec strip: control-panel readout, real product data not decoration --- */
.st-spec-strip{
  background: var(--st-panel);
  border-radius: var(--st-radius-md);
  margin: -32px clamp(16px, 4vw, 48px) 0;
  position: relative;
  z-index: 2;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  box-shadow: var(--st-shadow-soft);
}
.st-spec{
  border-left: 1px solid rgba(146,238,255,0.2);
  padding-left: 18px;
}
.st-spec:first-child{ border-left: none; padding-left: 0; }
.st-spec-label{
  font-family: var(--st-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-cyan);
  opacity: 0.75;
  display: block;
  margin-bottom: 6px;
}
.st-spec-value{
  font-family: var(--st-font-mono);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--st-white);
}

/* --- Section shell --- */
.st-section{
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px);
}
.st-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
}
.st-section-title{
  font-family: var(--st-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}

/* --- Product grid --- */
.st-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.st-card{
  background: var(--st-white);
  border: 1px solid rgba(11,42,61,0.08);
  border-radius: var(--st-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.st-card:hover{ transform: translateY(-4px); box-shadow: var(--st-shadow-soft); }
.st-card-media{
  position: relative;
  aspect-ratio: 4 / 3.2;
  background: var(--st-white);
  border-bottom: 1px solid rgba(11,42,61,0.06);
  display: grid;
  place-items: center;
}
.st-card-media img{ width: 84%; height: 84%; object-fit: contain; }
.st-card-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--st-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--st-panel);
  color: var(--st-cyan);
  padding: 4px 8px;
  border-radius: var(--st-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-card-badge svg{ width: 11px; height: 11px; }
.st-card-body{ padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-card-title{ font-weight: 700; font-size: 16px; }
.st-card-title a{ color: inherit; text-decoration: none; }
.st-card-meta{ font-size: 13px; color: var(--st-ink-soft); }
.st-card-price{ margin-top: auto; padding-top: 10px; font-family: var(--st-font-mono); font-weight: 600; font-size: 16px; color: var(--st-blue); }

/* --- Product page: 3D viewer block --- */
.st-pdp-stage{
  position: relative;
  background: var(--st-white);
  border: 1px solid rgba(11,42,61,0.1);
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.st-pdp-stage model-viewer{ width: 100%; height: 100%; }
.st-pdp-thumbs{ display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; }
.st-pdp-thumb{
  width: 64px; height: 64px; border-radius: var(--st-radius-sm);
  border: 1.5px solid rgba(11,42,61,0.1); background: var(--st-white);
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.st-pdp-thumb.is-active{ border-color: var(--st-blue); }
.st-pdp-thumb img{ width: 78%; height: 78%; object-fit: contain; }