/* The CricStor — storefront. Page canvas, nav, and footer match landing (css/chrome.css). */

.vision-shop{padding-bottom:24px;}
.vision-stage{
  padding:6px 18px 10px;
  perspective:1600px;
  perspective-origin:50% 42%;
}
.vision-window{
  --rx:0deg; --ry:0deg; --px:0; --py:0;
  position:relative;
  min-height:min(86vh, 860px);
  border-radius:40px;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin:center center;
  will-change:transform;
  box-shadow:
    0 40px 80px rgba(22,38,74,.18),
    calc(var(--px) * -18px) calc(var(--py) * 14px) 40px rgba(22,38,74,.12),
    0 0 0 1px rgba(255,255,255,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.vision-depth{
  position:absolute;inset:-6%;
  z-index:0;
  transform:translate3d(var(--dx,0px), var(--dy,0px), -60px) scale(1.08);
  will-change:transform;
}
.vision-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
  z-index:0;
  animation:visionKen 26s ease-in-out infinite alternate;
}
@keyframes visionKen{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.08) translate3d(-1.4%, 1.1%, 0);}
}
.vision-window [data-depth]{
  --dx:0px; --dy:0px;
  will-change:transform;
}
.vision-kicker,.vision-split,.vision-copy,.vision-dock,.vision-specs,.price-orb{
  transform:translate3d(var(--dx,0px), var(--dy,0px), 0);
}
.vision-shine{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(680px 420px at calc(50% + (var(--px) * 28%)) calc(28% + (var(--py) * 22%)),
      rgba(255,255,255,.28), transparent 58%);
  mix-blend-mode:soft-light;
}
.vision-motes{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(245,181,66,.45) 0 1px, transparent 1.8px);
  background-size:180px 220px, 260px 300px;
  background-position:12% 20%, 70% 40%;
  animation:visionMotes 18s linear infinite;
  opacity:.35;
}
@keyframes visionMotes{
  from{background-position:12% 20%, 70% 40%;}
  to{background-position:18% 8%, 62% 52%;}
}
.live-pip{
  display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-style:normal;font-size:9px;letter-spacing:1.4px;font-weight:800;
  color:#fff;background:var(--navy);padding:3px 8px 3px 7px;border-radius:99px;
}
.live-pip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#E63329;
  box-shadow:0 0 0 0 rgba(230,51,41,.7);
  animation:livePulse 1.6s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(230,51,41,.55);}
  70%{box-shadow:0 0 0 8px rgba(230,51,41,0);}
  100%{box-shadow:0 0 0 0 rgba(230,51,41,0);}
}
.vision-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(245,247,252,.55) 0%, rgba(245,247,252,.08) 28%, transparent 42%, transparent 62%, rgba(245,247,252,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 22%, transparent 70%, rgba(230,234,242,.35) 100%);
}
.vision-kicker{
  position:absolute;z-index:3;top:36px;left:42px;margin:0;
  font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:#3d4a63;display:flex;align-items:center;gap:10px;
}
.vision-kicker i{
  width:28px;height:3px;border-radius:99px;background:var(--orange);display:block;
}
body.shop-mode h1.vision-split,
body.shop-mode .vision-tag,
body.shop-mode .vision-dock h2,
body.shop-mode .vision-kicker,
body.shop-mode .vision-look{color:#1a2744;}
.vision-split{
  position:absolute;z-index:3;top:68px;left:42px;right:42px;margin:0;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  font-size:clamp(44px, 7.1vw, 104px);font-weight:800;letter-spacing:-.045em;
  line-height:.9;color:#1a2744;
  pointer-events:none;
}
.vision-copy{
  position:absolute;z-index:3;left:42px;top:auto;bottom:118px;
  max-width:min(420px, 34vw);
}
.vision-tag{
  margin:0 0 14px;font-size:clamp(26px, 3.1vw, 42px);font-weight:800;
  line-height:1.12;letter-spacing:-.03em;color:#1a2744;
}
.vision-lede{
  margin:0 0 26px;font-size:15.5px;line-height:1.55;color:#4a5870;font-weight:600;max-width:36ch;
}
.vision-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.vision-pill{
  border:0;cursor:pointer;font-family:var(--font);font-weight:800;font-size:14.5px;
  background:var(--orange);color:#fff;padding:13px 22px;border-radius:99px;
  box-shadow:0 10px 24px rgba(242,101,34,.32);
  display:inline-flex;align-items:center;gap:8px;
}
.vision-pill:hover{filter:brightness(1.05);}
.vision-look{
  border:0;background:transparent;cursor:pointer;font-family:var(--font);
  font-weight:800;font-size:14.5px;color:#1a2744;
  display:inline-flex;align-items:center;gap:10px;padding:6px 0;
}
.vision-look .play{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 20px rgba(22,38,74,.10);
  display:grid;place-items:center;position:relative;
}
.vision-look .play::after{
  content:"";width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent #1a2744;
  margin-left:2px;
}
.price-orb{
  position:absolute;z-index:5;left:58%;top:46%;
  width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 16px 40px rgba(22,38,74,.14), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;color:#1a2744;font-family:var(--font);
}
.price-orb b{font-size:18px;font-weight:800;letter-spacing:-.03em;}
.price-orb span{font-size:14px;opacity:.7;}
.price-orb:hover{transform:translate3d(var(--dx,0px), var(--dy,0px), 0) scale(1.06);}
.price-orb::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  animation:orbRing 3.6s ease-out infinite;
  pointer-events:none;
}
@keyframes orbRing{
  0%{transform:scale(.92);opacity:.5;}
  100%{transform:scale(1.18);opacity:0;}
}
.vision-dock{
  position:absolute;z-index:4;right:28px;top:210px;width:min(280px, 24vw);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:28px;
  padding:18px 18px 16px;
  box-shadow:0 20px 50px rgba(22,38,74,.12), inset 0 1px 0 rgba(255,255,255,.7);
  color:#1a2744;
}
.dock-rate{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.dock-rate span{font-size:11px;font-weight:800;color:#5a6b85;letter-spacing:.3px;}
.dock-badge{
  background:#1a2744;color:#fff;font-size:11px;font-weight:800;
  padding:4px 8px;border-radius:8px;display:flex;align-items:center;gap:6px;
}
.dock-badge i{color:#F5B542;letter-spacing:1px;font-style:normal;font-size:10px;}
.vision-dock h2{font-size:26px;letter-spacing:-.03em;margin:0 0 10px;color:#1a2744;}
.dock-bar{height:4px;background:rgba(22,38,74,.12);border-radius:99px;margin:0 0 12px;overflow:hidden;}
.dock-bar i{display:block;width:72%;height:100%;background:#1a2744;border-radius:99px;}
.vision-dock p{margin:0 0 16px;font-size:13.5px;line-height:1.45;color:#4a5870;font-weight:600;}
.dock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.dock-stats div{text-align:left;}
.dock-stats b{display:block;font-size:20px;letter-spacing:-.03em;color:#1a2744;}
.dock-stats span{font-size:11px;font-weight:700;color:#5a6b85;}
.dock-price{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 12px;font-size:13px;font-weight:700;color:#5a6b85;}
.dock-price strong{color:#1a2744;font-size:18px;}
.dock-add{
  width:100%;border:0;border-radius:14px;padding:12px 14px;cursor:pointer;
  background:#fff;color:#1a2744;font-family:var(--font);font-weight:800;font-size:14px;
  box-shadow:0 8px 20px rgba(22,38,74,.08);display:flex;align-items:center;justify-content:center;gap:8px;
}
.dock-add:hover{background:var(--orange);color:#fff;}
.look-sheet{position:relative;}
.vision-specs{
  position:absolute;z-index:8;left:42px;bottom:22px;
  width:min(720px, calc(100% - 340px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  padding:12px 22px 12px 24px;
  box-shadow:0 16px 40px rgba(22,38,74,.12), inset 0 1px 0 rgba(255,255,255,.8);
  color:#1a2744;
  transform:none !important;
  overflow:hidden;
  pointer-events:none;
}
.spec-brand{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 180px;}
.spec-brand strong{font-size:16px;letter-spacing:-.02em;white-space:nowrap;}
.spec-brand span{
  font-size:12px;font-weight:600;color:#5a6b85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spec-nums{display:flex;gap:22px;flex:0 0 auto;align-items:flex-end;}
.spec-nums div{text-align:left;min-width:0;}
.spec-nums b{display:block;font-size:20px;letter-spacing:-.03em;white-space:nowrap;}
.spec-nums span{font-size:11px;font-weight:700;color:#5a6b85;white-space:nowrap;}

.vision-catalog{padding-top:28px;}
.vision-shop .shop-trust div,
.vision-shop .shop-filters,
.vision-shop .kit-card,
.vision-shop .shop-search,
.vision-shop .shop-sort{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.7);
}
.vision-shop .law{
  background:rgba(22,38,74,.82);
  backdrop-filter:blur(18px);
}

.shop-modal.vision-lookbook{
  background:rgba(160,172,196,.28);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.shop-modal.vision-lookbook .look-sheet{
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(40px) saturate(170%);
  -webkit-backdrop-filter:blur(40px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:36px;
  padding:0;overflow:hidden;max-width:920px;
  box-shadow:0 30px 80px rgba(22,38,74,.22);
}
.look-shot{width:100%;height:min(62vh, 560px);object-fit:cover;display:block;background:#d9dee8;}
.look-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 16px;
}
.look-bar p{margin:0;font-weight:800;color:#1a2744;}
.look-bar button{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);font-size:22px;cursor:pointer;color:#1a2744;
}
.shop-modal.vision-lookbook .size-close{
  position:absolute;right:14px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.7);float:none;
}

@media (max-width:1100px){
  .vision-copy{max-width:min(380px, 38vw);bottom:108px;}
  .vision-dock{width:min(250px, 28vw);top:190px;}
  .vision-specs{width:min(560px, calc(100% - 300px));}
  .price-orb{left:54%;}
}
@media (prefers-reduced-motion:reduce){
  .vision-window,.vision-depth,.vision-bg,.vision-kicker,.vision-split,.vision-copy,.vision-dock,.vision-specs,.price-orb{
    transform:none !important;animation:none !important;
  }
  .vision-motes,.vision-shine,.live-pip::before,.price-orb::after{animation:none !important;}
}
@media (max-width:900px){
  .vision-stage{padding:4px 12px 8px;perspective:none;}
  .vision-window{
    min-height:0;display:flex;flex-direction:column;border-radius:28px;
    transform:none !important;
  }
  .vision-depth{
    position:relative;inset:auto;transform:none;height:52vw;min-height:280px;max-height:420px;
  }
  .vision-bg{
    position:absolute;height:100%;
    object-position:center 10%;
  }
  .vision-kicker,.vision-split,.vision-copy,.vision-dock,.vision-specs,.price-orb{
    transform:none !important;
  }
  .vision-shine,.vision-motes{display:none;}
  .vision-veil{display:none;}
  .vision-kicker,.vision-split,.vision-copy,.vision-dock,.vision-specs,.price-orb{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;
    width:100%;max-width:none;box-sizing:border-box;
  }
  .vision-kicker{padding:18px 20px 0;margin:0;}
  .vision-split{
    display:block;padding:8px 20px 0;
    font-size:clamp(34px, 11vw, 48px);
  }
  .vision-split span + span{margin-left:.18em;}
  .vision-copy{padding:8px 20px 4px;}
  .vision-tag{font-size:clamp(22px, 7vw, 30px);}
  .price-orb{display:none;}
  .vision-dock{
    margin:0 16px 12px;padding:16px;
    width:calc(100% - 32px);
  }
  .vision-dock p{overflow-wrap:anywhere;}
  .dock-price{flex-direction:column;align-items:flex-start;gap:2px;}
  .vision-copy{bottom:auto;}
  .vision-specs{
    margin:0 16px 16px;border-radius:24px;flex-direction:column;align-items:flex-start;
    padding:14px 16px;width:calc(100% - 32px);pointer-events:none;
  }
  .spec-nums{width:100%;justify-content:space-between;gap:8px;}
}

.shop-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px 0 8px;
}
@media(max-width:800px){.shop-trust{grid-template-columns:repeat(2,1fr);}}
.shop-trust div{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font-size:13px;font-weight:700;color:var(--navy);display:flex;gap:10px;align-items:center;min-width:0;
}
.shop-trust div div{background:none;border:0;padding:0;display:block;min-width:0;}
.shop-trust small{display:block;font-weight:600;color:var(--ink-dim);font-size:11.5px;}

.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:28px 0 80px;align-items:start;}
@media(max-width:960px){.shop-layout{grid-template-columns:1fr;}}
.shop-filters{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 18px 22px;
  position:sticky;top:92px;
}
@media(max-width:960px){
  .shop-filters{position:static;display:none;}
  .shop-filters.open{display:block;}
}
.shop-filters h3{font-size:13px;letter-spacing:.8px;text-transform:uppercase;margin:16px 0 10px;}
.shop-filters h3:first-child{margin-top:0;}
.filter-row{display:flex;flex-direction:column;gap:6px;}
.filter-row label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer;font-weight:600;}
.filter-row input{accent-color:var(--orange);}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px;}
.swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;
}
.swatch.on{box-shadow:0 0 0 2px var(--orange);}
.price-chips{display:flex;flex-wrap:wrap;gap:6px;}
.price-chips button,.chip{
  border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--font);color:var(--ink);
}
.price-chips button.on,.chip.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.filter-clear{margin-top:14px;width:100%;border:0;background:transparent;color:var(--orange);font-weight:800;cursor:pointer;font-family:var(--font);}

.shop-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.shop-search{
  flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;
}
.shop-search input{border:0;outline:0;background:transparent;width:100%;font-family:var(--font);font-size:14px;color:var(--ink);}
.shop-sort, .filter-toggle{
  border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;
  font-family:var(--font);font-weight:700;color:var(--ink);font-size:13.5px;
}
.filter-toggle{display:none;cursor:pointer;}
@media(max-width:960px){.filter-toggle{display:inline-flex;}}
.shop-count{font-size:13px;color:var(--ink-dim);font-weight:700;}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:1100px){.shop-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.shop-grid{grid-template-columns:1fr;}}
.kit-card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 8px 24px rgba(22,38,74,.08);display:flex;flex-direction:column;
  transition:transform .18s, box-shadow .18s;cursor:pointer;text-align:left;
}
.kit-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(22,38,74,.14);}
.kit-card .shot{position:relative;aspect-ratio:4/3;background:var(--surface2);overflow:hidden;}
.kit-card .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.kit-card .drop,.pdp-drop{
  position:absolute;top:12px;left:12px;background:var(--orange);color:#16264A;
  font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 8px;border-radius:99px;text-transform:uppercase;
}
.wish-btn{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;
  background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.wish-btn.on{color:var(--cherry);background:#fff3f1;}
.kit-card .meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.kit-card h3{font-size:18px;line-height:1.2;}
.stars{color:var(--gold);font-size:12px;letter-spacing:1px;}
.stars span{color:var(--ink-dim);font-weight:700;letter-spacing:0;margin-left:6px;font-size:12px;}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.price{font-weight:800;font-size:22px;color:var(--navy);}
.mrp{color:var(--faint);text-decoration:line-through;font-size:14px;}
.off{color:#1f7a3a;font-size:12.5px;font-weight:800;}
.dots{display:flex;gap:6px;margin-top:4px;}
.dots i{width:12px;height:12px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--line);}
.quick-add{
  margin-top:8px;width:100%;border:0;border-radius:12px;padding:10px 12px;cursor:pointer;
  background:var(--navy);color:#fff;font-weight:800;font-size:13.5px;font-family:var(--font);
}
.quick-add:hover{background:var(--orange);}
.oos{opacity:.55;pointer-events:none;}
.empty-shop{padding:48px 16px;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:20px;}

/* PDP */
.pdp{padding:28px 0 80px;}
.crumbs{font-size:13px;color:var(--ink-dim);margin-bottom:18px;}
.crumbs a{color:var(--orange);text-decoration:none;font-weight:700;cursor:pointer;}
.pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;}
@media(max-width:900px){.pdp-grid{grid-template-columns:1fr;}}
.pdp-gallery .main{
  border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--surface2);aspect-ratio:4/3;
}
.pdp-gallery .main img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp-gallery .main.kit-pdp-spin{
  position:relative;
  aspect-ratio:4/5;
  background:#0B1428;
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.pdp-gallery .main.kit-pdp-spin img{object-fit:contain;pointer-events:none;}
.kit-pdp-stamp{
  position:absolute;left:50%;top:27%;transform:translateX(-50%);
  width:48%;text-align:center;color:#16264A;pointer-events:none;opacity:0;
}
.kit-pdp-spin.is-back .kit-pdp-stamp{opacity:1;}
.kit-pdp-stamp span{
  display:block;font-size:11px;font-weight:900;letter-spacing:2px;line-height:1.2;
}
.kit-pdp-stamp b{
  display:block;font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1;
}
.kit-pdp-hint{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--ink-dim);}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.thumbs button{
  width:78px;height:62px;border-radius:12px;overflow:hidden;border:2px solid var(--line);padding:0;cursor:pointer;background:#fff;
}
.thumbs button.on{border-color:var(--orange);}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp-info h1{font-size:clamp(28px,4vw,40px);line-height:1.1;}
.pdp-info .sku{font-size:12px;color:var(--faint);font-weight:700;margin-top:6px;letter-spacing:.4px;}
.pdp-block{margin-top:18px;}
.pdp-block .lbl{font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px;display:flex;justify-content:space-between;}
.pdp-block .lbl button{border:0;background:none;color:var(--orange);font-weight:800;cursor:pointer;font-family:var(--font);}
.sizes{display:flex;gap:8px;flex-wrap:wrap;}
.sizes button{
  min-width:44px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);
  font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;font-family:var(--font);
}
.sizes button.on{background:var(--orange);border-color:var(--orange);color:#fff;}
.sizes button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed;}
.qty{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.qty button{width:38px;height:40px;border:0;background:var(--surface);font-size:18px;cursor:pointer;font-family:var(--font);color:var(--ink);}
.qty span{min-width:36px;text-align:center;font-weight:800;}
.pdp-cta{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;margin-top:20px;}
@media(max-width:640px){.pdp-cta{grid-template-columns:1fr;}}
.btn-navy,.btn-ghost,.btn-gold, .btn-pay{
  border:0;border-radius:14px;padding:13px 16px;font-weight:800;font-family:var(--font);cursor:pointer;font-size:14.5px;
}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--orange);}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--navy);}
.btn-gold{background:var(--gold);color:#16264A;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.pdp-perks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;}
.pdp-perks div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:700;}
.pin-row{display:flex;gap:8px;}
.pin-row input,.field input,.field select,.field textarea{
  flex:1;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-family:var(--font);font-size:14px;background:var(--surface);color:var(--ink);
}
.pin-row button{border-radius:12px;border:0;background:var(--navy);color:#fff;font-weight:800;padding:0 14px;cursor:pointer;font-family:var(--font);}
.pin-msg{font-size:13px;margin-top:8px;font-weight:700;}
.pin-msg.ok{color:#1f7a3a;} .pin-msg.bad{color:var(--cherry);}
.personalize{display:grid;grid-template-columns:1fr 90px;gap:8px;}
.acc{margin-top:22px;border-top:1px solid var(--line);}
.acc details{border-bottom:1px solid var(--line);}
.acc summary{cursor:pointer;padding:14px 0;font-weight:800;color:var(--navy);list-style:none;display:flex;justify-content:space-between;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";color:var(--orange);}
.acc details[open] summary::after{content:"–";}
.acc .body{padding:0 0 16px;color:var(--ink-dim);font-size:14.5px;}
.review{padding:12px 0;border-top:1px solid var(--line);}
.review strong{color:var(--navy);}
.related{margin-top:48px;}
.related h2{margin-bottom:16px;}

/* Cart page */
.cart-page,.check-page,.thanks-page{padding:40px 0 80px;}
.cart-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:start;}
@media(max-width:900px){.cart-grid,.check-grid{grid-template-columns:1fr;}}
.line{
  display:grid;grid-template-columns:110px 1fr auto;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:14px;margin-bottom:12px;
}
.line img{width:110px;height:88px;object-fit:cover;border-radius:12px;}
.line h3{font-size:16px;}
.line .sub{font-size:12.5px;color:var(--ink-dim);margin:4px 0 8px;}
.line .rm{border:0;background:none;color:var(--cherry);font-weight:800;cursor:pointer;font-size:12px;font-family:var(--font);}
.summary{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;position:sticky;top:92px;
}
.summary h3{margin-bottom:12px;}
.sum-row{display:flex;justify-content:space-between;font-size:14px;margin:8px 0;color:var(--ink-dim);}
.sum-row.total{color:var(--navy);font-weight:800;font-size:18px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;}
.coupon{display:flex;gap:8px;margin:12px 0;}
.coupon input{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-family:var(--font);text-transform:uppercase;}
.coupon button{border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:800;padding:0 14px;cursor:pointer;font-family:var(--font);}
.ship-bar{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden;margin:10px 0 6px;}
.ship-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));}

/* Checkout */
.check-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px;}
.panel h3{margin-bottom:14px;}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:640px){.fields{grid-template-columns:1fr;}}
.field.span{grid-column:1/-1;}
.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px;color:var(--ink-dim);}
.pay-grid{display:grid;gap:8px;}
.pay-opt{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;background:var(--paper);
}
.pay-opt.on{border-color:var(--orange);background:#fff7f2;}
.pay-opt b{display:block;color:var(--navy);}
.pay-opt p{margin:4px 0 0;font-size:12.5px;}
.steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.steps span{font-size:12px;font-weight:800;padding:6px 10px;border-radius:99px;background:var(--surface2);color:var(--ink-dim);}
.steps span.on{background:var(--navy);color:#fff;}
.err{color:var(--cherry);font-size:12.5px;font-weight:700;margin-top:4px;}

.thanks{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:48px 24px;max-width:640px;margin:0 auto;}
.thanks .oid{font-size:28px;margin:8px 0;color:var(--orange);}
.order-lines{text-align:left;margin-top:24px;}

.bag-drawer[hidden], .bag-scrim[hidden], .shop-modal[hidden], .shop-toast[hidden]{display:none !important;}

/* Drawer */
.bag-scrim{position:fixed;inset:0;background:rgba(10,16,34,.45);z-index:70;}
.bag-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);z-index:80;
  box-shadow:-20px 0 50px rgba(10,16,34,.2);display:flex;flex-direction:column;
}
.bag-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);}
.bag-head button{border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink);}
.bag-body{flex:1;overflow:auto;padding:14px;}
.bag-foot{padding:16px 18px;border-top:1px solid var(--line);background:var(--surface);}
.mini-line{display:grid;grid-template-columns:72px 1fr auto;gap:10px;margin-bottom:12px;}
.mini-line img{width:72px;height:58px;object-fit:cover;border-radius:10px;}

.shop-modal{
  position:fixed;inset:0;background:rgba(10,16,34,.5);z-index:90;display:grid;place-items:center;padding:20px;
}
.shop-modal .sheet{
  background:var(--paper);border-radius:20px;max-width:720px;width:100%;max-height:90vh;overflow:auto;padding:22px;
}
.shop-modal table{width:100%;border-collapse:collapse;font-size:14px;}
.shop-modal th,.shop-modal td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;}
.size-close{float:right;border:0;background:none;font-size:22px;cursor:pointer;}

.shop-toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:99px;font-weight:800;font-size:13.5px;
  box-shadow:var(--shadow);display:none;
}
.shop-toast.show{display:block;}

.shop-laws{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 28px;}
@media(max-width:800px){.shop-laws{grid-template-columns:1fr;}}
.law{background:var(--navy-deep);color:#fff;border-radius:18px;padding:20px;}
.law h4{color:#F5B542;font-size:15px;letter-spacing:.8px;text-transform:uppercase;}
.law p{color:rgba(255,255,255,.72);font-size:13.5px;margin:8px 0 0;}

/* ---------- product card extras ---------- */
.gsm-chip{
  position:absolute;top:10px;left:10px;background:rgba(22,38,74,.82);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:4px 9px;border-radius:99px;
  backdrop-filter:blur(4px);
}
.color-names{font-size:11px;color:var(--faint);margin:2px 0 10px;text-transform:capitalize;}

.find-size-link{
  background:none;border:0;padding:0;margin-top:8px;color:var(--orange);font-weight:700;font-size:12.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:var(--font);
}
.fit-hint{font-size:12px;color:var(--ink-dim);margin:8px 0 0;}

/* ---------- shop by style ---------- */
.shop-style{margin:40px 0 8px;text-align:center;}
.shop-style h2{font-size:24px;margin-bottom:4px;}
.shop-style-sub{color:var(--ink-dim);font-size:14px;margin-bottom:20px;}
.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:800px){.style-grid{grid-template-columns:repeat(2,1fr);}}
.style-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 14px;
  cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;font-family:var(--font);
}
.style-tile:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:var(--shadow-sm);}
.style-emoji{font-size:26px;}
.style-tile b{font-size:14.5px;color:var(--ink);}
.style-tile span:last-child{font-size:12px;color:var(--ink-dim);}

/* ---------- curated collection rows ---------- */
.shop-collection{margin:44px 0 8px;}
.shop-collection h2{font-size:22px;margin-bottom:4px;}
.shop-collection-sub{color:var(--ink-dim);font-size:13.5px;margin-bottom:18px;}
.shop-more-label{font-size:22px;margin:44px 0 18px;}

/* ---------- why cricstor ---------- */
.shop-why{margin:44px 0 8px;background:var(--surface2);border-radius:24px;padding:32px 24px;}
.shop-why h2{font-size:22px;margin-bottom:18px;text-align:center;}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr;}}
.why-grid b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px;}
.why-grid p{font-size:12.5px;color:var(--ink-dim);margin:0;}

/* ---------- bottom endcap ---------- */
.shop-endcap{
  margin-top:56px;padding:60px 20px;text-align:center;
  background:linear-gradient(160deg,var(--hero-grad-1),var(--hero-grad-2) 60%,var(--hero-grad-3));color:#fff;
}
.shop-endcap h2{font-size:clamp(24px,4vw,34px);letter-spacing:-.4px;margin-bottom:10px;}
.shop-endcap > .wrap > p{color:rgba(255,255,255,.72);font-size:15px;max-width:480px;margin:0 auto 24px;}
.shop-endcap-app{margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);}
.shop-endcap-app p{color:rgba(255,255,255,.6);font-size:13px;margin-bottom:6px;}
.shop-endcap-app b{display:block;font-size:17px;margin-bottom:16px;}
.shop-endcap-app .store-row{justify-content:center;}

/* ---------- checkout trust strip ---------- */
.checkout-trust{
  display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;padding:12px 16px;
  background:var(--surface2);border-radius:14px;font-size:12.5px;font-weight:700;color:var(--ink-dim);
}