/* ============================================================
   SHOP.CSS — video hero, cart, product grid/detail, pricing
   Shares tokens with styles.css (loaded first on every shop page)
   ============================================================ */

/* ---------- VIDEO HERO ---------- */
.video-hero{
  position:relative;
  min-height:78vh;
  width:100%;
  overflow:hidden;
  /* clip-path contains the position:fixed video below it, so the video
     stays pinned to the viewport (parallax) but only paints inside the hero */
  clip-path:inset(0);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #0d3550 0%, var(--grey-900) 55%, var(--grey-950) 100%);
}
.video-hero__media{
  position:fixed; top:0; left:0;
  width:100%; height:100vh;
  object-fit:cover; z-index:0;
  opacity:0.55;
}
.video-hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,13,15,0.35) 0%, rgba(12,13,15,0.75) 75%, var(--grey-900) 100%),
    radial-gradient(70% 60% at 50% 30%, rgba(47,127,176,0.25), rgba(12,13,15,0) 70%);
}
.video-hero__content{
  position:relative; z-index:2; text-align:center; max-width:760px; padding:0 24px;
}
.video-hero .eyebrow{ justify-content:center; display:flex; }
.video-hero__title{
  font-size:clamp(2.6rem, 7vw, 4.6rem); font-weight:800; line-height:1.02;
  background:linear-gradient(180deg, #fff 10%, var(--sky-soft) 65%, var(--sky) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.video-hero__sub{
  margin:20px auto 0; max-width:520px; color:var(--ice-dim); font-size:1rem; line-height:1.6;
}
.video-hero__actions{ margin-top:30px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Fallback ambient background when no video file is present */
.video-hero.no-video{
  background:
    radial-gradient(90% 70% at 50% 10%, rgba(47,127,176,0.3), rgba(18,19,23,0) 55%),
    linear-gradient(180deg, #0d3550 0%, var(--grey-900) 42%, var(--grey-950) 100%);
}

/* ---------- COMING SOON ---------- */
.coming-soon{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.coming-soon__badge{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--sky-soft); border:1px solid var(--sky-dim); padding:8px 18px; border-radius:999px;
}

/* ---------- CART TRIGGER + BADGE ---------- */
.nav__cart{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:none; border:1px solid transparent; border-radius:2px;
  color:var(--ice-dim);
}
.nav__cart:hover{ border-color:var(--sky-dim); color:var(--sky-soft); }
.nav__cart svg{ width:19px; height:19px; }
.cart-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  background:var(--sky); color:#0b1216; font-family:var(--font-mono); font-size:0.6rem; font-weight:600;
  border-radius:999px; align-items:center; justify-content:center; display:none;
}

/* ---------- CART DRAWER ---------- */
.cart-scrim{
  position:fixed; inset:0; background:rgba(6,7,8,0.55); z-index:150;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.cart-scrim.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(92vw, 400px);
  background:var(--grey-900); border-left:1px solid var(--grey-700);
  z-index:151; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.3s ease;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 16px; border-bottom:1px solid var(--grey-700);
}
.cart-drawer__head h3{ font-size:1.05rem; font-weight:700; }
.cart-drawer__head button{
  background:none; border:none; color:var(--ice-dim); font-size:1.3rem; line-height:1; padding:4px;
}
.cart-drawer__body{ flex:1; overflow-y:auto; padding:16px 22px; }
.cart-empty{ color:var(--grey-400); font-size:0.9rem; padding:20px 0; }
.cart-line{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--grey-700);
}
.cart-line__info{ display:flex; flex-direction:column; gap:3px; }
.cart-line__name{ font-size:0.88rem; color:var(--ice); }
.cart-line__tier{ font-family:var(--font-mono); font-size:0.68rem; color:var(--sky-soft); }
.cart-line__price{ font-family:var(--font-mono); font-size:0.7rem; color:var(--grey-400); }
.cart-line__qty{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.82rem; }
.qty-btn{
  width:22px; height:22px; background:var(--grey-800); border:1px solid var(--grey-600); color:var(--ice);
  border-radius:2px; line-height:1;
}
.cart-line__remove{ background:none; border:none; color:var(--grey-400); font-size:1.1rem; }
.cart-line__remove:hover{ color:var(--sky); }
.cart-drawer__footer{ padding:18px 22px 24px; border-top:1px solid var(--grey-700); }
.cart-total{
  display:flex; justify-content:space-between; font-family:var(--font-mono);
  font-size:0.95rem; margin-bottom:14px; color:var(--ice);
}
.cart-checkout-btn{ width:100%; }

/* ---------- PRODUCT GRID ---------- */
.shop-section{ padding:90px 24px 110px; background:var(--grey-900); }
.shop-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.product-card{
  background:var(--grey-800); border:1px solid var(--grey-700); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color 0.2s ease, transform 0.2s ease;
}
.product-card:hover{ border-color:var(--sky-dim); transform:translateY(-3px); }
.product-card__media{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 80% at 50% 30%, rgba(111,214,255,0.14), rgba(12,13,15,0) 70%), var(--grey-950);
  color:var(--sky-dim);
  overflow:hidden;
}
.product-card__media img{
  width:100%; height:100%; object-fit:cover;
}
.product-card__media svg{ width:56px; height:56px; }
.product-card__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card__name{ font-size:1rem; font-weight:700; color:var(--ice); }
.product-card__blurb{ font-size:0.82rem; color:var(--grey-300); line-height:1.5; flex:1; }
.product-card__price{ font-family:var(--font-mono); font-size:0.92rem; color:var(--sky-soft); margin-top:6px; }
.product-card__cta{
  margin-top:12px; padding:10px; text-align:center; border:1px solid var(--grey-600); border-radius:2px;
  font-size:0.8rem; color:var(--ice-dim); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.04em;
}
.product-card:hover .product-card__cta{ border-color:var(--sky); color:var(--sky-soft); }

/* ---------- PRODUCT DETAIL ---------- */
.product-detail{ padding:150px 24px 100px; background:var(--grey-900); }
.product-detail__inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-start;
}
.product-detail__media{
  aspect-ratio:1/1; border-radius:8px; border:1px solid var(--grey-700);
  background:radial-gradient(80% 80% at 50% 30%, rgba(111,214,255,0.16), rgba(12,13,15,0) 70%), var(--grey-950);
  display:flex; align-items:center; justify-content:center; color:var(--sky-dim);
  overflow:hidden;
}
.product-detail__media img{
  width:100%; height:100%; object-fit:cover;
}
.product-detail__media svg{ width:120px; height:120px; }
.product-detail__eyebrow{ font-family:var(--font-mono); font-size:0.72rem; color:var(--sky-soft); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
.product-detail h1{ font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:800; margin-bottom:16px; }
.product-detail__blurb{ color:var(--grey-300); font-size:0.98rem; line-height:1.7; margin-bottom:26px; max-width:460px; }
.product-detail__price{ font-family:var(--font-mono); font-size:1.5rem; color:var(--sky-soft); margin-bottom:22px; }
.tier-select{ margin-bottom:24px; }
.tier-select label{ display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-400); margin-bottom:10px; }
.tier-options{ display:flex; flex-direction:column; gap:8px; }
.tier-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--grey-700); border-radius:4px; cursor:pointer;
  font-size:0.86rem; color:var(--ice-dim); transition:border-color 0.2s ease, background 0.2s ease;
}
.tier-option:hover{ border-color:var(--sky-dim); }
.tier-option.selected{ border-color:var(--sky); background:rgba(111,214,255,0.06); color:var(--ice); }
.tier-option span:last-child{ font-family:var(--font-mono); color:var(--sky-soft); }
.color-selector{ margin-bottom:24px; }
.color-selector label{ display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-400); margin-bottom:10px; }
.color-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.qty-row .qty-btn{ width:34px; height:34px; font-size:1rem; }
.qty-row span{ font-family:var(--font-mono); font-size:1rem; min-width:20px; text-align:center; }
.add-to-cart-btn{ width:100%; max-width:320px; }
.product-detail__specs{ margin-top:32px; padding-top:20px; border-top:1px solid var(--grey-700); display:flex; flex-direction:column; gap:9px; }
.product-detail__specs li{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.78rem; }
.product-detail__specs li span:first-child{ color:var(--grey-400); text-transform:uppercase; }
.product-detail__specs li span:last-child{ color:var(--sky-soft); }

/* ---------- CHECKOUT ---------- */
.checkout{ padding:150px 24px 100px; background:var(--grey-900); }
.checkout__inner{ max-width:720px; margin:0 auto; }
.checkout h1{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; margin-bottom:30px; }
.checkout__lines{ border-top:1px solid var(--grey-700); }
.checkout__note{ margin-top:26px; font-family:var(--font-mono); font-size:0.8rem; color:var(--grey-400); line-height:1.7; }
.checkout__total{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; margin-top:6px; border-top:1px solid var(--grey-700);
  font-size:1.2rem; font-weight:700; color:var(--ice);
}
.stripe-btn{
  width:100%; margin-top:10px; padding:16px; font-size:0.95rem;
}

/* ---------- PRICING (3D tables) ---------- */
.pricing{ padding:110px 24px; background:var(--grey-900); perspective:1400px; }
.pricing-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
.pricing-card{
  background:var(--grey-800); border:1px solid var(--grey-700); border-radius:8px;
  padding:32px 28px; transform-style:preserve-3d; transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  will-change:transform;
}
.pricing-card:hover{
  border-color:var(--sky-dim);
  box-shadow:0 24px 50px -20px rgba(47,127,176,0.5);
}
.pricing-card--featured{ border-color:var(--sky); background:var(--grey-700); }
.pricing-card__tier{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sky-soft); margin-bottom:12px; }
.pricing-card__price{ font-size:2.1rem; font-weight:800; color:var(--ice); margin-bottom:4px; }
.pricing-card__price span{ font-size:0.95rem; color:var(--grey-400); font-weight:500; }
.pricing-card__desc{ font-size:0.85rem; color:var(--grey-300); margin-bottom:24px; min-height:40px; }
.pricing-card__features{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.pricing-card__features li{ font-size:0.86rem; color:var(--ice-dim); padding-left:20px; position:relative; }
.pricing-card__features li::before{ content:'\2713'; position:absolute; left:0; color:var(--sky-soft); }

/* ---------- CONSULT SECTION ---------- */
.consult{
  padding:110px 24px; text-align:center;
  background:radial-gradient(70% 100% at 50% 0%, rgba(47,127,176,0.2), rgba(18,19,23,0) 60%), var(--grey-950);
  border-top:1px solid var(--grey-700);
}
.consult__inner{ max-width:600px; margin:0 auto; }
.consult h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:700; margin-bottom:14px; }
.consult p{ color:var(--grey-300); margin-bottom:30px; }
.consult-options{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:30px; }
.consult-option{
  padding:18px 14px; border:1px solid var(--grey-700); border-radius:6px; cursor:pointer;
  font-size:0.85rem; color:var(--ice-dim); transition:border-color 0.2s ease;
}
.consult-option:hover, .consult-option.selected{ border-color:var(--sky); color:var(--sky-soft); }

@media (max-width:860px){
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; }
  .product-detail__inner{ grid-template-columns:1fr; }
  .consult-options{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .shop-grid{ grid-template-columns:1fr; }
}

/* ---------- COLOR CAROUSEL (SPLATT) ---------- */
.color-carousel{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  background:var(--grey-800); border:1px solid var(--grey-700); border-radius:6px;
  padding:32px; max-width:900px; margin:0 auto;
}
.carousel-media{
  aspect-ratio:1/1; border-radius:4px; overflow:hidden;
  background:radial-gradient(80% 80% at 50% 30%, rgba(111,214,255,0.16), rgba(12,13,15,0) 70%), var(--grey-950);
  display:flex; align-items:center; justify-content:center;
}
.color-image{
  width:100%; height:100%; object-fit:cover;
}
.carousel-body{
  display:flex; flex-direction:column; gap:24px;
}
.carousel-info{
  display:flex; flex-direction:column; gap:10px;
}
.color-name{
  font-size:1.2rem; font-weight:700; color:var(--ice);
}
.color-variant{
  font-size:0.9rem; color:var(--sky-soft); font-family:var(--font-mono); letter-spacing:0.05em;
}
.carousel-controls{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:20px 0; border-top:1px solid var(--grey-700); border-bottom:1px solid var(--grey-700);
}
.carousel-btn{
  background:none; border:none; color:var(--ice-dim);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color 0.2s ease;
}
.carousel-btn:hover{ color:var(--sky-soft); }
.carousel-btn svg{ width:24px; height:24px; stroke-width:2; }
.carousel-dots{
  display:flex; gap:8px; align-items:center;
}
.dot{
  width:8px; height:8px; border-radius:50%; background:var(--grey-600);
  cursor:pointer; transition:background 0.2s ease, transform 0.2s ease;
}
.dot:hover{ background:var(--grey-500); transform:scale(1.2); }
.dot.active{ background:var(--sky-soft); transform:scale(1.3); }

@media (max-width:768px){
  .color-carousel{
    grid-template-columns:1fr; gap:24px; padding:24px;
  }
}