/* ==========================================================================
   ANAS RADWAN — Store page
   Loads AFTER style.css and reuses its tokens, buttons, .kicker and .shine.
   ========================================================================== */

/* ---------- 1. BREADCRUMB (shared pattern with course-reels.html / refund-policy.html) ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);flex-wrap:wrap;margin-bottom:20px}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--light)}
.crumb svg{width:11px;height:11px;flex:none;opacity:.55}
.crumb [aria-current]{color:var(--mid)}

/* ---------- 2. STORE HERO ---------- */
.shero{position:relative;overflow:hidden;padding:clamp(30px,4vw,46px) 0 clamp(56px,7vw,86px);
  border-bottom:1px solid var(--line);text-align:center}
.shero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(148,0,0,.36),transparent 65%)}
/* same skewed light-bars motif as the landing hero */
.shero__bars{position:absolute;inset:0;z-index:0;opacity:.45;overflow:hidden;pointer-events:none}
.shero__bars i{position:absolute;display:block;height:38px;transform:skewX(var(--sk));filter:blur(15px);
  background:linear-gradient(90deg,rgba(148,0,0,.5),rgba(148,0,0,0))}
.shero__bars i:nth-child(1){top:14%;right:-6%;width:42%}
.shero__bars i:nth-child(2){top:46%;right:52%;width:30%;opacity:.65}
.shero__bars i:nth-child(3){top:76%;right:-2%;width:34%;opacity:.5}
.shero > .wrap{position:relative;z-index:2}
.shero .crumb{justify-content:center}
.shero .kicker{margin-bottom:14px}
.shero h1{font-family:var(--font-display);font-size:clamp(30px,4.4vw,54px);font-weight:400;line-height:1.32}
.shero__lede{margin:18px auto 0;font-size:clamp(15px,1.3vw,17px);line-height:1.9;color:var(--mid);max-width:54ch}

/* big pseudo-3D product boxes — isometric cube (top/left/right faces via
   gradients), same red family as the brand, gently floating */
.shero__visuals{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(20px,4vw,52px);margin-top:clamp(40px,5.5vw,64px)}
.shero__visual{width:clamp(88px,10vw,132px);animation:visual-float 5s ease-in-out infinite}
.shero__visual svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 28px rgba(148,0,0,.4))}
.shero__visual--b{animation-delay:.6s}
.shero__visual--c{animation-delay:1.2s}
@keyframes visual-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ---------- 3. PRODUCTS ---------- */
.products{padding:clamp(50px,6vw,80px) 0}
.products + .products{padding-top:0}
/* fixed-max tracks keep the cards compact instead of stretching to fill the
   1220px container — the row centres itself however many products there are */
.products__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,332px));
  gap:22px;justify-content:center}

.product{background:var(--bg-2);border:1px solid var(--line);display:flex;flex-direction:column;
  position:relative;isolation:isolate;transition:border-color .35s,transform .35s var(--ease)}
.product:hover{transform:translateY(-4px);border-color:rgba(215,216,213,.22)}

.product__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.product__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);transition:transform .7s var(--ease),filter .5s}
.product:hover .product__media img{transform:scale(1.06);filter:grayscale(1) brightness(.82)}
.product__media::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.1) 55%,transparent 80%)}

/* placeholder media used when a real product image isn't ready yet */
.product__media--placeholder{display:grid;place-items:center;
  background:linear-gradient(155deg,var(--bg-3),var(--bg-2));}
.product__media--placeholder svg{width:42px;height:42px;color:var(--slate);stroke-width:1.2}
.product__media-caption{position:absolute;bottom:12px;inset-inline-start:0;inset-inline-end:0;
  text-align:center;font-size:10.5px;color:var(--slate);z-index:1}

.product__badge{position:absolute;top:16px;inset-inline-end:16px;z-index:2;font-size:11px;font-weight:500;
  padding:7px 16px;color:#fff}
.product__badge::before{content:'';position:absolute;inset:0;background:#25D366;transform:skewX(var(--sk));z-index:-1}

.product__body{padding:22px 21px 24px;display:flex;flex-direction:column;flex:1}
.product__body h3{font-size:18px;line-height:1.45;margin-bottom:10px}
.product__body p{font-size:13.5px;line-height:1.85;color:var(--mid);margin-bottom:18px}

.product__price{display:flex;align-items:baseline;gap:7px;margin-bottom:16px}
.product__price b{font-family:var(--font-en);font-size:23px;color:#fff;font-variation-settings:'wght' 600;direction:ltr;unicode-bidi:isolate}
.product__price span{font-size:12.5px;color:var(--mid)}

.product__cta{margin-top:auto}
.product__cta .btn{width:100%;justify-content:center;padding:14px 24px;font-size:14px}

/* section headings sit centred here so they line up with the centred card row */
.products .shead{margin-inline:auto;text-align:center}
.products .shead > p{margin-inline:auto}

/* ---------- 4. RESPONSIVE ---------- */
@media (max-width:620px){
  .shero__visuals{gap:16px}
  .shero__visual{width:78px}
}

@media (prefers-reduced-motion:reduce){
  .shero__visual{animation:none}
}

/* ---------- 5. THANK-YOU PAGE ---------- */
.thanks{position:relative;padding:clamp(90px,14vw,150px) 0;text-align:center;overflow:hidden}
.thanks__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(148,0,0,.42),transparent 65%)}
.thanks > .wrap{position:relative;z-index:2}
.thanks__icon{width:84px;height:84px;margin:0 auto 28px;position:relative;display:grid;place-items:center;isolation:isolate}
.thanks__icon::before{content:'';position:absolute;inset:0;background:var(--red);transform:skewX(var(--sk));z-index:-1}
.thanks__icon svg{width:38px;height:38px;color:#fff;stroke-width:2.4}
.thanks h1{font-family:var(--font-display);font-size:clamp(28px,4.2vw,48px);font-weight:400;line-height:1.4;margin-bottom:16px}
.thanks > .wrap > p{color:var(--mid);max-width:52ch;margin:0 auto 34px}
.thanks__note{margin-top:30px;font-size:13.5px;color:var(--slate)}
.thanks__note a{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}
.thanks__note a:hover{color:#fff}

/* ---------- 6. PRODUCT DETAIL PAGE ---------- */
/* content column + sticky form card — same shape as course-reels.html's
   .cgrid/.cside/.pcard, kept here under the same names since the two pages
   never load together */
.pdbody{padding:clamp(50px,6vw,80px) 0 clamp(60px,7vw,96px)}
.cgrid{display:grid;grid-template-columns:1fr 366px;gap:clamp(32px,4vw,58px);align-items:start}
.ccol{min-width:0}
.cside{position:sticky;top:calc(var(--nav-h) + 22px)}

.cblock{margin-bottom:clamp(40px,5vw,60px)}
.cblock:last-child{margin-bottom:0}
.cblock > .kicker{margin-bottom:14px}
.cblock h2{font-family:var(--font-display);font-size:clamp(21px,2.4vw,30px);font-weight:400;
  line-height:1.44;margin-bottom:20px}
.cblock h2 b{font-weight:400}
.cblock p{font-size:15px;line-height:2;color:var(--mid);max-width:68ch}

.learn{display:grid;gap:14px}
.learn li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.8;color:var(--light)}
.learn i{width:22px;height:22px;flex:none;margin-top:2px;display:grid;place-items:center;
  position:relative;font-style:normal;z-index:0}
.learn i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.16);border:1px solid rgba(148,0,0,.5)}
.learn i svg{width:12px;height:12px;color:var(--red-hi);stroke-width:2.6}
.learn li > span{flex:1;min-width:0}

.pcard{background:var(--bg-2);border:1px solid var(--line);padding:20px}
.pcard__thumb{position:relative;overflow:hidden;aspect-ratio:3/2;margin-bottom:16px}
.pcard__thumb img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.7);transition:filter .5s var(--ease),transform .7s var(--ease)}
.pcard__thumb:hover img{filter:none;transform:scale(1.04)}
.pcard__tag{position:absolute;top:12px;inset-inline-end:12px;font-size:11px;font-weight:500;
  color:#fff;padding:6px 14px;z-index:1}
.pcard__tag::before{content:'';position:absolute;inset:0;background:#25D366;transform:skewX(var(--sk));z-index:-1}

.pcard__mini{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.pcard__mini img{width:64px;height:44px;object-fit:cover;flex:none;
  filter:grayscale(1) brightness(.75);border:1px solid var(--line)}
.pcard__mini span{font-size:12px;color:var(--slate);line-height:1.6}

.pcard__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pcard__price b{font-size:26px;color:#fff;font-weight:600}
.pcard__price em{font-style:normal;font-size:13px;color:var(--mid)}

.pfeats{margin-top:20px}
.pfeats li{display:flex;align-items:center;gap:13px;padding:13px 0;
  border-top:1px solid var(--line);font-size:14px;color:var(--light)}
.pfeats li:first-child{border-top:0;padding-top:2px}
.pfeats svg{width:18px;height:18px;flex:none;color:var(--red-hi)}

/* GHL form embed — see note on .product__form-embed history: form_embed.js
   sets the iframe's own height in JS after load, so never force a height here */
.pcard__form{margin-top:2px}
.pcard__form iframe{display:block;width:100%}

@media (max-width:1120px){
  .cgrid{grid-template-columns:1fr 330px;gap:30px}
}

@media (max-width:980px){
  .cgrid{grid-template-columns:1fr;gap:40px}
  .cside{position:static;order:-1;max-width:560px}
}

@media print{
  .totop,.wa-fab{display:none}
}