/* /shop/ (templates/shop.html), scoped under .shp. The tokens are /books/' and
   /coaching/'s (static/css/pages/books.css):
     ground #05080f · ink #f4f7fc · body #d6deeb · dim #a3afc6 · muted #6f7c96
     blue #5bc3f9 · gold #f5c542 · red #E8282B (#ff6b6e as text)
   Cards in a grid: the books' covers stand whole on a tinted ground, the courses'
   artwork and the coaches' photos fill the frame. */

body.shp-page{ height:auto; min-height:100vh; background:#05080f; }
html{ scroll-padding-top:88px; background:#05080f; }
.shp-page .landing-nav{ position:sticky; top:0; z-index:50; }

.shp{
  --shp-ease:cubic-bezier(.2,.7,.2,1);
  /* Headings in Inter, as on /books/ and /coaching/: the site's display font is
     Orbitron, which stays on the eyebrows only. */
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative; overflow:hidden; flex-shrink:0; line-height:normal;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e7ecf6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%,rgba(47,107,255,.14),transparent 70%),
    radial-gradient(ellipse 50% 30% at 90% 6%,rgba(245,197,66,.08),transparent 70%),
    #05080f;
}
.shp :where(h1,h2,h3,p,ul){ margin:0; }
.shp :where(ul){ padding:0; list-style:none; }
.shp :where(a){ color:#5bc3f9; text-decoration:none; }

.shp-card--blue{ --c:#5bc3f9; --rgb:91,195,249; --t:#5bc3f9; }
.shp-card--gold{ --c:#f5c542; --rgb:245,197,66; --t:#f5c542; }
.shp-card--red{ --c:#E8282B; --rgb:232,40,43; --t:#ff6b6e; }

/* ===== Hero ===== */
.shp-hero{ position:relative; max-width:1280px; margin:0 auto; padding:clamp(56px,8vw,104px) clamp(20px,4vw,48px) 8px; }
.shp-hero-glow{ position:absolute; inset:-120px auto auto 50%; width:900px; height:420px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(91,195,249,.10),transparent); pointer-events:none; }
.shp-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:#5bc3f9; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.shp-rule{ flex:none; width:28px; height:1px; background:currentColor; }
.shp-h1{ position:relative; margin-top:18px; color:#f4f7fc; font-size:clamp(40px,6vw,76px); font-weight:800; letter-spacing:-.04em; line-height:1; }
.shp-grad{ background:linear-gradient(90deg,#f7e3a1,#f5c542 50%,#e0975a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shp-lede{ position:relative; max-width:560px; margin-top:18px; color:#a3afc6; font-size:17px; line-height:1.6; }
.shp-jump{ position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.shp .shp-chip{ padding:9px 18px; border:1px solid rgba(160,180,220,.22); border-radius:999px; color:#d6deeb; font-size:14px; font-weight:600; transition:border-color .2s,color .2s,background-color .2s; }
.shp .shp-chip:hover{ border-color:rgba(91,195,249,.6); color:#f4f7fc; background:rgba(91,195,249,.08); }

/* ===== Sections ===== */
.shp-sec{ max-width:1280px; margin:0 auto; padding:clamp(56px,7vw,96px) clamp(20px,4vw,48px) 0; }
.shp-sec:last-of-type{ padding-bottom:clamp(72px,9vw,128px); }
.shp-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.shp-h2{ margin-top:14px; color:#f4f7fc; font-size:clamp(28px,3.4vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1.08; }
.shp-intro{ max-width:560px; margin-top:12px; color:#a3afc6; font-size:16px; line-height:1.6; }
.shp .shp-more{ flex:none; color:#5bc3f9; font-size:15px; font-weight:600; }
.shp .shp-more:hover{ color:#8fd6fb; }

/* ===== Cards ===== */
.shp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:20px; margin-top:32px; }
.shp-grid--courses,.shp-grid--coaching,.shp-grid--membership{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.shp-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(160,180,220,.12); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:border-color .25s var(--shp-ease),transform .25s var(--shp-ease),box-shadow .25s var(--shp-ease);
}
/* The hover is blue on every card, the bootcamp's too (owner 2026-11-14). */
.shp-card:hover{ border-color:rgba(91,195,249,.45); transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(91,195,249,.35); }

.shp-media{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.shp-media img{ display:block; }
.shp-media--contain{
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:radial-gradient(ellipse 70% 70% at 50% 60%,rgba(var(--rgb),.22),rgba(var(--rgb),.04) 70%,transparent),#0a1020;
}
.shp-media--contain > img{ height:100%; width:auto; max-width:100%; object-fit:contain; border-radius:4px; box-shadow:0 14px 30px -8px rgba(0,0,0,.7); transition:transform .3s var(--shp-ease); }
.shp-card:hover .shp-media--contain > img{ transform:translateY(-3px) scale(1.02); }
.shp-media--cover{ aspect-ratio:16/9; background:#0a1020; }
.shp-media--cover > img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .4s var(--shp-ease); }
.shp-card:hover .shp-media--cover > img{ transform:scale(1.04); }

/* The bundle: its three covers fanned out. */
.shp-fan{ position:relative; display:block; height:100%; aspect-ratio:1.25; }
.shp-fan img{ position:absolute; top:6%; height:88%; width:auto; border-radius:4px; box-shadow:0 14px 30px -8px rgba(0,0,0,.75); }
.shp-fan img:nth-child(1){ left:0; transform:rotate(-7deg); }
.shp-fan img:nth-child(2){ left:50%; z-index:2; transform:translateX(-50%); top:2%; height:92%; }
.shp-fan img:nth-child(3){ right:0; transform:rotate(7deg); }

.shp-body{ display:flex; flex:1; flex-direction:column; padding:18px 20px 20px; }
.shp-title{ color:#f4f7fc; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.shp .shp-title a{ color:inherit; }
.shp .shp-title a:hover{ color:#5bc3f9; }
.shp-meta{ margin-top:8px; color:#a3afc6; font-size:14px; line-height:1.5; }
.shp-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; }
.shp-price{ color:#f4f7fc; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.shp .shp-btn{
  flex:none; padding:10px 18px; border-radius:10px;
  background:var(--c); color:#05080f; font-size:14px; font-weight:700;
  transition:filter .2s,transform .2s;
}
.shp-card--red .shp-btn{ color:#fff; }
.shp .shp-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.shp .shp-btn:focus-visible,.shp .shp-chip:focus-visible,.shp .shp-title a:focus-visible,.shp .shp-more:focus-visible{ outline:2px solid #5bc3f9; outline-offset:3px; }

/* The membership plans: the plan's length over the picture, the yearly's ribbon, the
   price with its cycle after it ("every 3 months"), as the checkout's plan rows. */
.shp-label{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:40px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.92));
  color:#fff; font-size:26px; font-weight:900; letter-spacing:-.02em; line-height:1;
  text-transform:uppercase;
}
.shp-ribbon{
  position:absolute; top:12px; right:12px; z-index:1;
  padding:5px 11px; border-radius:999px;
  background:linear-gradient(90deg,#34d399,#10b981); color:#04210f;
  font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.shp-pricebox{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; }
.shp-per{ color:#a3afc6; font-size:13.5px; font-weight:600; }
.shp-vat{ margin-top:14px; color:#a3afc6; font-size:13.5px; text-align:right; }

/* Phones: the books two to a row, so the five don't make a long scroll. */
@media (max-width:520px){
  .shp-grid--books{ grid-template-columns:1fr 1fr; gap:12px; }
  .shp-grid--books .shp-media--contain{ padding:14px; }
  .shp-grid--books .shp-body{ padding:14px 14px 16px; }
  .shp-grid--books .shp-title{ font-size:15px; }
  .shp-grid--books .shp-meta{ font-size:12.5px; }
  .shp-grid--books .shp-foot{ flex-wrap:wrap; gap:8px; padding-top:14px; }
  .shp-grid--books .shp-price{ font-size:18px; }
  .shp-grid--books .shp-btn{ padding:8px 14px; }
}

@media (prefers-reduced-motion:reduce){
  .shp-card,.shp-card:hover,.shp-media img,.shp .shp-btn{ transition:none; transform:none !important; }
}