/* ========== STORE: Scoped styles ========== */
:root {
  --s3-blue: #00a8f3;
  --s3-blue-dark: #008ec9;
  --card-bg: rgba(255,255,255,0.04);
}

.store-hero {
  position: relative; min-height: 40vh;
  background: none !important;   /* shows your normal lights background from body */
}
.store-hero__overlay {
  backdrop-filter: blur(2px);
  padding: 8rem 2rem 3rem;
}
.store-hero__title { font: 800 3rem/1.1 Montserrat, sans-serif; color:#fff; }
.store-hero__tag { color:#cfeeff; font-weight:600; margin-top:.5rem; }

.store-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem; }

.store-cart-toggle {
  display:none; margin: 0 0 1rem auto; background: var(--s3-blue);
  color:#000; border:none; border-radius: 999px; padding:.6rem 1rem; font-weight:700; cursor:pointer;
}
.store-cart-count { background:#fff; color:#000; border-radius:999px; padding:.1rem .5rem; margin-left:.5rem; }

.store-grid {
  display:grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap:2rem;
}
.product-card {
  background: var(--card-bg); border-radius:12px; padding:1.2rem; display:flex; flex-direction:column;
}
.product-image {
  width:100%;
  aspect-ratio: 1/1;
  object-fit: contain; /* Shows whole image */
  background-color: #fff; /* Optional: gives a clean background behind transparent areas */
  border-radius:8px;
  padding: 10px; /* Optional: so narrower images don’t touch edges */
}

.product-title { font: 800 1.4rem/1.2 Montserrat, sans-serif; margin:.8rem 0 .2rem; }
.product-price { color:#cfeeff; margin-bottom:.8rem; }
.product-variants { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; }
.variant-select { background:#111a; color:#fff; border:1px solid #333; border-radius:8px; padding:.4rem .6rem; }

.add-to-cart {
  margin-top:auto; background: var(--s3-blue); color:#000; font-weight:700; border:none;
  border-radius:10px; padding:.8rem 1rem; cursor:pointer; transition:.2s;
}
.add-to-cart:hover { background: var(--s3-blue-dark); color:#fff; }

/* Cart drawer */
.store-cart {
  position: fixed; top:0; right:-420px; width: 380px; height: 100vh; background: #0b0f1a;
  box-shadow: -8px 0 24px rgba(0,0,0,.4); transition:right .3s ease; z-index: 1200; display:flex; flex-direction:column;
}
.store-cart.open { right:0; }
.store-cart__header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid #1e2633; }
.store-cart__close { background:none; border:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.store-cart__items { flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.cart-item { display:grid; grid-template-columns: 64px 1fr auto; gap:.8rem; align-items:center; }
.cart-thumb { width:64px; height:64px; object-fit:cover; border-radius:6px; }
.cart-meta { font-size:.95rem; color:#cfeeff; }
.cart-meta strong { display:block; color:#fff; }
.cart-actions { display:flex; align-items:center; gap:.4rem; }
.qty-btn { background:#111a; border:1px solid #333; color:#fff; padding:.2rem .5rem; border-radius:6px; cursor:pointer; }
.remove-btn { background:none; border:none; color:#aaa; cursor:pointer; }
.store-cart__footer { border-top:1px solid #1e2633; padding:1rem; }
.store-cart__row { display:flex; justify-content:space-between; margin-bottom:.6rem; }
.store-cart__hint { color:#9abbd1; font-size:.9rem; margin:.4rem 0 1rem; }
.store-checkout { width:100%; background:#00b2ff; color:#000; border:none; font-weight:800; border-radius:10px; padding:1rem; cursor:pointer; }
.store-checkout:hover { background:#0090cc; color:#fff; }

/* Responsive */
@media (max-width: 900px) {
  .store-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
  .store-cart { width: 100%; right:-100%; }
}
@media (max-width: 640px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-cart-toggle { display:inline-flex; align-items:center; }
}
/* Slim S3 footer */
.s3-footer-min{
  border-top:1px solid rgba(255,255,255,.08);
  padding: clamp(12px,1.8vw,18px) 0;
  color:#cfe3ee;
  background: transparent;
}

.s3f-inner{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.s3f-brand{
  display: inline-flex; align-items: center; height: 48px;
}
.s3f-brand img{ height: 28px; width: auto; opacity:.95; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }

.s3f-tag{
  margin:0; text-align:center;
  font-weight:800; letter-spacing:.2px; color:#fff;
}

.s3f-social{ justify-self:end; display:flex; gap:14px; }
.s3f-social .social{
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .12s ease, filter .15s ease, background .15s ease;
}
.s3f-social .social:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10); }
.s3f-social svg{ width:20px; height:20px; fill:#fff; opacity:.95; }

.s3f-legal{
  text-align:center; font-size:12px; opacity:.65;
  margin-top:10px;
}
/* === HAMBURGER: hard reset so it never looks like a white button === */
.navbar .hamburger{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;              /* keep a decent tap target */
  border-radius: 10px;       /* visual radius only, no background */
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* kill any focus/active/visited styles that might leak in */
.navbar .hamburger:focus,
.navbar .hamburger:focus-visible,
.navbar .hamburger:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* if some template sets .active on the hamburger, neutralize it */
.navbar .hamburger.active,
.navbar .hamburger.active:focus{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* the three bars */
.navbar .hamburger span{
  display: block;
  width: 22px;
  height: 2px;
  margin: 3px 0;
  border-radius: 2px;
  background: #fff;          /* always white bars */
  transition: transform .15s ease, opacity .15s ease;
}

/* when your JS toggles .is-open, animate the bars (optional) */
.navbar .hamburger.is-open span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.navbar .hamburger.is-open span:nth-child(2){ opacity: 0; }
.navbar .hamburger.is-open span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Make Store hero heading match Programs/Coaches */
.store-hero__title{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-size: clamp(32px, 5vw, 62px) !important;
  line-height: 1.05 !important;
  margin: 0 0 6px !important;
  color: #fff !important;
}

/* Optional: subtitle style to match your other pages */
.store-hero__tag{
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  margin: 0 0 26px;
}

.size-chart-link{ display:inline-block; margin-left:10px; font-weight:800; color:#27B0FF; }
.size-chart-link:hover{ text-decoration:underline; }

/* Product image: allow hover swap */
.product-card .product-image{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;       /* match your card look */
  aspect-ratio: 1 / 1;       /* keep the frame square */
  background: #fff;          /* white frame behind images */
}

.product-card .product-image .tee-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* keep the shirt fully visible */
  transition: opacity .25s ease;
}

.product-card .product-image .back{ opacity: 0; }
.product-card .product-image:hover .front{ opacity: 0; }
.product-card .product-image:hover .back{  opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-card .product-image .tee-img{ transition: none; }
}

.product-card .product-image.flipped .front{ opacity: 0; }
.product-card .product-image.flipped .back{  opacity: 1; }

.nav-links a.is-active,
.nav-links a[aria-current="page"]{
  color:#27B0FF; /* your blue */
}
/* Ensure the active nav item shows blue on the store page, even if other rules set it white */
.navbar .nav-links a.is-active,
.navbar .nav-links a[aria-current="page"]{
  color: #27B0FF !important;   /* your blue */
}