/* === Instagram grid hover === */
.ig-tile:hover .ig-overlay { opacity: 1; }
.ig-tile:hover .ig-img    { transform: scale(1.06); }
@media (max-width: 720px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ig-section { padding: 48px 16px !important; }
}

/* === VideoShop "Tap to shop what you see" — manual carousel ===
 *
 * Tile sizing rule (NON-NEGOTIABLE):
 *   - Desktop (≥1024px): every tile is exactly 1/5 of the rail width
 *   - Mobile  (<1024px): every tile is exactly 1/2 of the rail width
 *   …regardless of how many videos exist. With 1 video on desktop the tile
 *   stays at 20% rail width and the rail centers it (handled in JSX).
 *
 * Height cap:
 *   - Tiles use 9:16 aspect ratio for the video, BUT the video stage is
 *     capped so it never exceeds 80% of viewport height on desktop (so the
 *     section never blows past the fold) and 75% of viewport height on
 *     mobile (matches the reference screenshot proportion).
 */

/* Hide native scrollbar across browsers — controls below replace it. */
.videoshop-rail { scrollbar-width: none; -ms-overflow-style: none; }
.videoshop-rail::-webkit-scrollbar { display: none; }

/* DESKTOP — 5 tiles per page. 14px gap × 4 = 56px total gaps.
 * !important + max-width are deliberate: they protect the column rule from
 * being overridden by inline styles or parent flex shrink/grow defaults. */
.videoshop-tile {
  flex: 0 0 calc((100% - 56px) / 5) !important;
  width:     calc((100% - 56px) / 5) !important;
  max-width: calc((100% - 56px) / 5) !important;
  min-width: 0;
}

/* The video stage inside the tile owns the height cap */
.videoshop-tile .videoshop-stage,
.videoshop-tile > a:first-child {
  aspect-ratio: 9 / 16;
  max-height: 80vh; /* desktop: never exceeds 80% of viewport height */
}

/* MOBILE — 2 tiles per page. 12px gap × 1 = 12px total gap */
@media (max-width: 1024px) {
  .videoshop-section { padding: 36px 10px 0 !important; }
  .videoshop-rail    { gap: 10px !important; }
  .videoshop-tile {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width:     calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
  }
  .videoshop-tile > a:first-child { max-height: 75vh; }
  /* Mini-card + arrows tightened for touch */
  .videoshop-tile .vs-mini { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 7px 8px !important; }
  .videoshop-tile .vs-mini span:first-child { width: 34px !important; height: 34px !important; }
  .videoshop-controls .vs-arrow { width: 40px !important; height: 40px !important; }
}

/* === Hero image carousel — fit by width on every viewport ===
 * Desktop and mobile both use the natural 24:10 banner ratio. The image
 * `objectFit: cover` (set inline in carousel.jsx) ensures the banner fills
 * the rail edge-to-edge with no letterboxing. */

/* === Product card hover (used on Bestsellers + Category page) ===
 * Each .pcard-img has two overlapping <img>s:
 *   .pcard-img-a — primary (visible by default, gentle zoom on hover)
 *   .pcard-img-b — secondary (fades in on hover, scales toward 1)
 * Card itself lifts with shadow. Tap-friendly on touch (no hover state, just the lift).
 */
.pcard-img { position: relative; overflow: hidden; }
.pcard-img .pcard-img-a,
.pcard-img .pcard-img-b {
  transition: opacity .45s ease, transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.pcard-img .pcard-img-b {
  position: absolute; top: 50%; left: 50%;
  /* Start slightly smaller so the swap-in feels like the new shot is "settling" */
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0; pointer-events: none;
}
.pcard-hover { transition: transform .25s ease, box-shadow .25s ease; }
.pcard-hover:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(26,58,107,0.12); }

/* Always cross-fade on hover — even when both images are the same primary
 * photo, the differing scale start/end produces a "ken-burns" swap that looks
 * intentional rather than a static zoom. */
.pcard-hover:hover .pcard-img-a { opacity: 0; transform: scale(1.10); }
.pcard-hover:hover .pcard-img-b { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) {
  /* Touch devices — no hover, but a tap-down feedback */
  .pcard-hover:active { transform: translateY(-2px); }
  .pcard-hover:active .pcard-img-a { transform: scale(1.03); }
}

/* Lito redesign — brand aligned */
:root {
  --cream: #F4F7FB;
  --cream-2: #D8E6F3;
  --ink: #1A3A6B;
  --ink-2: #1C2A4A;
  --steel: #2B82C9;
  --steel-2: #4BAFD6;
  --violet: #1E5FA8;
  --violet-2: #2B82C9;
  --gold: #4BAFD6;
  --muted: #5B6479;
  --line: rgba(26,58,107,0.14);
  --accent: var(--steel);
  --density: 1;
  --radius: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); }
body {
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Prevent iOS Safari from auto-scaling text on rotation */
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

.display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.035em; line-height: 0.98; font-weight: 600; }
.sans { font-family: 'Space Grotesk', sans-serif; }
.italic-accent { font-family: 'Space Grotesk', sans-serif; font-style: italic; font-weight: 500; color: var(--gold); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
  font-family: 'Space Grotesk', sans-serif;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.accent { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn.steel { background: var(--steel); color: #fff; border-color: var(--steel); }
.btn.lg { padding: 18px 28px; font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
}

.section { padding: calc(96px * var(--density)) 48px; position: relative; }
.section.pad-lg { padding: calc(140px * var(--density)) 48px; }
.container { max-width: 1400px; margin: 0 auto; }

.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(26,58,107,0.08); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 60px; animation: marquee 40s linear infinite; width: max-content; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float { animation: float 6s ease-in-out infinite; }

.ticker {
  background: var(--ink);
  color: var(--cream);
  padding: 10px 0;
  overflow: hidden;
}
.ticker .mono { color: var(--cream); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,242,237,0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--violet); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 2px;
  background: var(--ink); color: var(--cream);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}

.input {
  width: 100%;
  padding: 18px 22px;
  border-radius: 2px;
  border: 1.5px solid var(--ink);
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.input:focus { box-shadow: 0 0 0 3px var(--steel); }

body.dark {
  --cream: #0A1628;
  --cream-2: #0F1D34;
  --ink: #F4F7FB;
  --ink-2: #D8E6F3;
  --muted: #8E9AB3;
  --line: rgba(244,242,237,0.14);
}
body.dark .card { background: #0F1D34; }
body.dark .input { background: #0F1D34; color: var(--ink); }
body.dark .nav { background: rgba(10,22,40,0.85); }

a { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   Responsive overrides — fluid, calmer, less cluttered on every device.
   Uses attribute selectors to override inline JSX style props.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤900px) ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .section { padding: 56px 24px !important; }
  .section.pad-lg { padding: 64px 24px !important; }
  .container { padding: 0 !important; }
  .nav-inner { padding: 14px 20px !important; }
  .nav-links { display: none !important; }
  .ticker { padding: 10px 0 !important; }
  .ticker .marquee-track { gap: 32px !important; animation-duration: 30s; }

  /* Every multi-col grid → 1 column with calm gap */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(6"],
  [style*="gridTemplateColumns"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="gap: 80"], [style*="gap: 60"], [style*="gap: 48"] { gap: 28px !important; }

  /* Categories grid: 2 cols, normal sizing */
  #screens .container > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #screens .card { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 1/1.05 !important; }
  #screens .card h3 { font-size: 28px !important; }

  /* Bestsellers + reviews → 2 cols */
  #bestsellers .container > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .section [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Hero stage shrink */
  [style*="height: 720px"], [style*="height:720px"] { height: 380px !important; }
  [style*="height: 560px"], [style*="height:560px"] { height: 320px !important; }
  [style*="height: 520px"], [style*="height:520px"] { height: 320px !important; }
  [style*="height: 460px"], [style*="height:460px"] { height: 280px !important; }
  /* Hero crest circles */
  [style*="width: 580px"][style*="height: 580px"] { width: 340px !important; height: 340px !important; }
  [style*="width: 440px"][style*="height: 440px"][style*="border-radius: 50%"] { width: 280px !important; height: 280px !important; }
  [style*="width: 460px"][style*="height: 460px"] { width: 280px !important; height: 280px !important; }

  /* Inset panel padding (CTA / PurpleStrip / etc) */
  [style*="padding: 100px 60px"] { padding: 48px 24px !important; }
  [style*="padding: 80px 60px"]  { padding: 40px 22px !important; }
  [style*="padding: 60px 40px"]  { padding: 32px 20px !important; }

  /* Image carousel chrome */
  [style*="bottom: 28px"][style*="left: 40px"] { left: 16px !important; right: 16px !important; bottom: 16px !important; flex-wrap: wrap; gap: 12px; }
  [style*="padding: 0 48px 36px"]  { padding: 0 16px 16px !important; }
  [style*="top: 32px"][style*="left: 48px"] { top: 14px !important; left: 14px !important; }
  [style*="font-size: 96px"] { font-size: 48px !important; }

  /* Trust strip → 2x2 */
  section[style*="padding: 60px 48px"] { padding: 32px 20px !important; }
  section[style*="padding: 60px 48px"] .container { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  section[style*="padding: 60px 48px"] .container > div { border-right: none !important; padding-left: 0 !important; }

  /* Footer */
  footer { padding: 48px 20px 24px !important; }
}

/* ── Phone (≤600px) ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Calmer section spacing */
  .section, .section.pad-lg { padding: 48px 18px !important; }
  .nav-inner { padding: 12px 16px !important; }
  body { font-size: 15px; }
  p { line-height: 1.6 !important; }

  /* Inset / margin-bound carousels (PurpleStrip etc.) — full bleed */
  section[style*="padding: 40px 24px"],
  section[style*="padding: 0 24px"]   { padding: 24px 12px !important; }
  section[style*="margin: 0 24px"]    { margin: 0 12px 24px !important; }
  section[style*="margin: 60px 24px"] { margin: 32px 12px !important; }

  /* Touch targets */
  button, a.btn { min-height: 44px; }
  .pill { padding: 10px 14px !important; }

  /* Display headlines — calm, readable */
  .display { letter-spacing: -0.02em; }
  h1, h1.display { font-size: clamp(36px, 9.5vw, 56px) !important; line-height: 1.04 !important; margin-bottom: 20px !important; }
  h2, h2.display { font-size: clamp(30px, 8vw, 48px) !important; line-height: 1.05 !important; margin-bottom: 18px !important; }
  h3, h3.display { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.15 !important; }

  /* Inline-style font sizes — knock everything down */
  [style*="font-size: 140px"], [style*="font-size: 120px"] { font-size: 48px !important; }
  [style*="font-size: 96px"]  { font-size: 44px !important; }
  [style*="font-size: 88px"]  { font-size: 40px !important; }
  [style*="font-size: 72px"]  { font-size: 36px !important; }
  [style*="font-size: 64px"]  { font-size: 34px !important; }
  [style*="font-size: 56px"]  { font-size: 32px !important; }
  [style*="font-size: 48px"]  { font-size: 28px !important; }
  [style*="font-size: 44px"]  { font-size: 26px !important; }
  [style*="font-size: 40px"]  { font-size: 26px !important; }
  [style*="font-size: 36px"]  { font-size: 24px !important; }
  [style*="font-size: 32px"]  { font-size: 22px !important; }
  [style*="font-size: 28px"]  { font-size: 20px !important; }
  [style*="font-size: 22px"]  { font-size: 17px !important; }
  [style*="font-size: 20px"]  { font-size: 16px !important; }
  [style*="font-size: 19px"]  { font-size: 15px !important; }
  [style*="font-size: 18px"]  { font-size: 15px !important; }

  /* Buttons */
  .btn.lg { padding: 14px 20px !important; font-size: 13px !important; width: auto; }
  .btn { padding: 12px 18px !important; font-size: 12px !important; }
  /* Hero CTA stack vertically + uniform size */
  .section [style*="display: flex"][style*="gap: 12"]:has(> .btn) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .section [style*="display: flex"][style*="gap: 12"] .btn {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Inputs */
  .input { padding: 14px 16px !important; font-size: 15px !important; border-radius: 2px !important; }

  /* Find-my-phone finder — single column on mobile */
  .finder-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Categories — strict 2-per-row on mobile.
   * Inline JSX sets gridColumn/gridRow span 2 on Screens (desktop big tile)
   * and Accessories (desktop wide tile). On mobile, EVERY tile must be a
   * single 1×1 cell. The very-specific selectors with !important override
   * the inline style — the regular @media rule wasn't winning the cascade
   * against React inline styles. */
  .cats-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
  }
  .cats-grid > a,
  .cats-grid > a:first-child,
  .cats-grid > a:last-child {
    grid-column: auto / span 1 !important;
    grid-row:    auto / span 1 !important;
    aspect-ratio: 1 / 1.15 !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Bring the giant Screens title down to size on a 1-up tile */
  .cats-grid > a:first-child h3 {
    font-size: clamp(26px, 7.5vw, 40px) !important;
  }
  .input[style*="paddingLeft: 60"], .input[style*="padding-left: 60"] { padding-left: 50px !important; }

  /* Stat row in hero — wrap to 2x2 */
  .section [style*="gap: 40"][style*="paddingTop: 32"],
  .section [style*="gap: 40"][style*="padding-top: 32"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }

  /* Categories + bestsellers + reviews → 2 cols on phone (was 1 col).
   * The earlier rule on line ~281 already set bestsellers to 2 cols; this
   * block was contradicting it. Now both match at 2 cols. */
  #screens .container > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #bestsellers .container > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .section [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* Bestseller pill row scrolls horizontally instead of wrapping */
  #bestsellers [style*="display: flex"][style*="gap: 8"] { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  #bestsellers .pill { flex-shrink: 0; }

  /* Hero crest discs further compressed */
  [style*="width: 440px"][style*="height: 440px"][style*="border-radius: 50%"] { width: 240px !important; height: 240px !important; }
  [style*="width: 580px"][style*="height: 580px"] { width: 300px !important; height: 300px !important; }
  /* Hero stage */
  [style*="height: 720px"], [style*="height:720px"] { height: 320px !important; }
  /* Hero corner labels — pin tighter */
  [style*="top: 60px"][style*="left: 60px"],
  [style*="top: 60px"][style*="right: 60px"],
  [style*="bottom: 60px"][style*="left: 60px"],
  [style*="bottom: 60px"][style*="right: 60px"] {
    top: 14px !important; bottom: 14px !important;
    left: 14px !important; right: 14px !important;
    font-size: 9px !important;
  }

  /* Image fullscreen carousel — shorter */
  [style*="height: 100vh"] { height: 60vh !important; min-height: 380px !important; }

  /* Section labels in interactive steps */
  .section [style*="margin: '16px 0 24px'"] { margin: 12px 0 16px !important; }

  /* Reviews card padding tight */
  .section[style*="background: var(--ink)"] [style*="padding: 28"] { padding: 20px !important; }
  .section[style*="background: var(--ink)"] [style*="border-radius: 22"] { border-radius: 4px !important; }

  /* Footer cols stack + brand row left-align */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  footer [style*="justify-content: space-between"] { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  footer { padding: 40px 18px 24px !important; }

  /* Tweak panel */
  .twk-panel { right: 8px !important; bottom: 8px !important; width: calc(100vw - 16px) !important; max-width: 320px !important; }

  /* Cart drawer */
  .lito-drawer { width: 100% !important; }

  /* PurpleStrip image disc */
  [style*="width: 300px"][style*="height: 300px"] { width: 220px !important; height: 220px !important; }
}

/* ── Small phones (≤400px) ─────────────────────────────────────────────── */
@media (max-width: 400px) {
  .section, .section.pad-lg { padding: 40px 14px !important; }
  .ticker { padding: 8px 0; }
  .ticker .mono { font-size: 9px; }
  h1, h1.display { font-size: 36px !important; }
  h2, h2.display { font-size: 28px !important; }
  /* Even smaller hero discs */
  [style*="width: 440px"][style*="height: 440px"][style*="border-radius: 50%"] { width: 200px !important; height: 200px !important; }
  [style*="width: 580px"][style*="height: 580px"] { width: 260px !important; height: 260px !important; }
}