/* =====================================================================
   Storefront — partner shops at /partners
   ---------------------------------------------------------------------
   Loaded after public.css and built only on its tokens (--deep, --mid,
   --sun, --gold, --ink, --muted, --line, --paper, --cream, radii, fonts).
   No new colours. Every rule is prefixed .sf- so nothing here can alter
   an existing page. A file, never an inline <style>: the CSP is
   style-src 'self'.
   ===================================================================== */

/* ---------- test-mode bar ---------- */
.sf-testbar{background:var(--ink);color:#E8EAED;font-size:14px;padding:10px 0;text-align:center}
.sf-testbar b{color:var(--sun);margin-right:6px}

/* ---------- breadcrumbs ---------- */
.sf-crumbs{padding-top:28px;font-size:14px;color:var(--muted)}
.sf-crumbs a{color:var(--muted);text-decoration:none}
.sf-crumbs a:hover{color:var(--deep);text-decoration:underline}
.sf-crumbs span[aria-hidden]{margin:0 8px;color:var(--line-strong)}

/* ---------- partner logo tile ---------- */
.sf-logotile{display:flex;align-items:center;justify-content:center;background:var(--deep);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 40px -24px rgba(23,59,92,.7);position:relative;overflow:hidden}
.sf-logotile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--sun)}
.sf-logotile img{width:72%;height:auto;max-height:60%;object-fit:contain}
.sf-logotile.sm{width:120px;height:72px;border-radius:12px}
.sf-logotile.sm::after{height:3px}
.sf-logotile.md{width:220px;height:130px}
.sf-logotile.lg{width:100%;aspect-ratio:4/3}
.sf-logotile.xl{width:100%;aspect-ratio:5/4}
.sf-logotext{font-family:var(--font-display);color:#fff;font-size:28px;padding:0 18px;text-align:center}
.sf-logotile.sm .sf-logotext{font-size:15px}

/* ---------- partners overview ---------- */
.sf-partner{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:48px;align-items:center}
.sf-partner-logo{display:block;text-decoration:none;transition:transform .2s ease}
.sf-partner-logo:hover{transform:translateY(-3px)}
.sf-partner-body h2{margin-bottom:4px}
.sf-partner-body p{color:var(--muted)}
.sf-partner-body .btn{margin-top:26px}
.sf-tagline{font-family:var(--font-display);font-size:22px;color:var(--deep)!important;margin-bottom:16px}
.sf-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sf-chips li{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}

/* ---------- partner shop hero ---------- */
.sf-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;padding:48px 28px 80px}
.sf-hero h1{margin-bottom:8px}
.sf-hero .lead{margin-top:6px}

/* ---------- product cards ---------- */
.sf-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.sf-product{display:flex;flex-direction:column;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.sf-product:hover{transform:translateY(-4px);border-color:var(--deep);box-shadow:0 22px 44px -28px rgba(23,59,92,.55)}
.sf-product-top{padding:32px 32px 8px;border-top:6px solid var(--deep)}
.sf-product:nth-child(2n) .sf-product-top{border-top-color:var(--sun)}
.sf-product h3{font-size:30px;margin-bottom:2px}
.sf-cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sf-sub{color:var(--deep);font-weight:600;font-size:15.5px}
.sf-sub-lg{font-size:18px;margin-top:4px}
.sf-cardtext{color:var(--muted);font-size:15.5px;margin-top:14px}
.sf-product-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:22px 32px 28px;margin-top:22px;border-top:1px solid var(--line);background:var(--cream)}
.sf-from{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--ink)}
.sf-from small{font-family:var(--font-body);font-size:13px;color:var(--muted);display:block;line-height:1.5}
.sf-from small:last-child{display:block;margin-top:4px}
.sf-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap}
.sf-go .arr{width:30px;height:30px;border-radius:50%;background:var(--sun);display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease}
.sf-product:hover .sf-go .arr{transform:translateX(4px)}

/* ---------- pillars on deep band ---------- */
.sf-pillar{border-top:2px solid rgba(255,255,255,.18);padding-top:20px}
.sf-pillar h3{font-size:21px;margin-bottom:8px}
.sf-pillar p{font-size:15.5px}
.sf-num{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--sun);margin-bottom:8px}

/* ---------- facilitator ---------- */
.sf-facilitator{display:grid;grid-template-columns:120px 1fr;gap:34px;align-items:start}
.sf-avatar{width:120px;height:120px;border-radius:50%;background:var(--deep);color:var(--sun);font-family:var(--font-display);font-size:42px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--line)}
.sf-role{font-weight:700;color:var(--gold);font-size:14.5px;margin-bottom:12px}

/* ---------- buying steps ---------- */
.sf-steps{list-style:none;counter-reset:sfstep;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 36px}
.sf-steps li{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
.sf-steps li::before{counter-increment:sfstep;content:counter(sfstep,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.1em;margin-bottom:10px}
.sf-steps b{display:block;color:var(--deep);margin-bottom:4px}
.sf-steps span{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}

/* ---------- seller of record ---------- */
.sf-seller{display:flex;gap:20px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--sun);border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px}
.sf-seller-mark{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--deep);color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center}
.sf-seller p{font-size:15px;color:var(--muted)}
.sf-seller p b{color:var(--deep)}
.sf-seller a{color:var(--deep)}

/* ---------- product hero + buy box ---------- */
.sf-phero{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;padding:40px 28px 56px}
.sf-phero h1{margin-bottom:0}
.sf-headline{font-family:var(--font-display);font-size:24px;line-height:1.35;color:var(--ink);margin:22px 0 14px;max-width:34ch}
.sf-buybox{position:sticky;top:124px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:0 24px 48px -32px rgba(20,20,20,.45)}
.sf-buybox-logo{display:inline-block;margin-bottom:14px}
.sf-buybox-by{font-size:14px;color:var(--muted)}
.sf-buybox-price{font-family:var(--font-display);font-size:48px;line-height:1.1;margin:10px 0 2px}
.sf-buybox-price small{font-family:var(--font-body);font-size:14px;color:var(--muted);margin-right:4px}
.sf-buybox-vat{font-size:13px;color:var(--muted);margin-bottom:18px}
.sf-buybox-list{list-style:none;margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.sf-buybox-list li{font-size:14px;padding:6px 0 6px 26px;position:relative;color:var(--ink)}
.sf-buybox-list li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:50%;background:var(--sun)}
.sf-buybox-list li::after{content:"";position:absolute;left:4px;top:15px;width:6px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}

/* ---------- facts strip ---------- */
.sf-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.sf-fact{background:var(--paper);padding:22px 24px}
.sf-fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:28px;color:var(--deep);line-height:1.2}
.sf-fact span{font-size:14px;color:var(--muted)}

/* ---------- cards / two-column ---------- */
.sf-card h3{font-size:20px;color:var(--deep)}
.sf-two{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.sf-curriculum{list-style:none;counter-reset:sfcur;margin-top:18px}
.sf-curriculum li{counter-increment:sfcur;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.sf-curriculum li::before{content:counter(sfcur,decimal-leading-zero);font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--gold)}
.sf-audience{margin-top:20px;font-size:15px;color:#C9D6E4}
.sf-audience b{color:var(--sun)}

/* ---------- options ---------- */
.sf-options{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch}
.sf-options.single{grid-template-columns:minmax(0,460px);justify-content:center}
.sf-option{position:relative;display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px 28px}
.sf-option.pop{background:var(--deep);border-color:var(--deep);color:#C9D6E4;box-shadow:0 30px 60px -36px rgba(23,59,92,.8)}
.sf-option h3{font-size:26px;margin-bottom:2px}
.sf-option.pop h3{color:#fff}
.sf-badge{position:absolute;top:-13px;left:28px;background:var(--sun);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.sf-opt-tag{font-size:14.5px;color:var(--gold);font-weight:700}
.sf-option.pop .sf-opt-tag{color:var(--sun)}
.sf-price{font-family:var(--font-display);font-size:52px;line-height:1.1;color:var(--ink);margin-top:18px}
.sf-option.pop .sf-price{color:#fff}
.sf-price s{font-size:24px;color:var(--muted);margin-left:8px;text-decoration-thickness:2px}
.sf-option.pop .sf-price s{color:#9AB0C6}
.sf-price-note{font-size:13px;color:var(--muted)}
.sf-option.pop .sf-price-note{color:#9AB0C6}
.sf-opt-sum{font-size:15px;margin:16px 0 8px}
.sf-feat{list-style:none;margin:6px 0 26px;flex-grow:1}
.sf-feat li{position:relative;padding:8px 0 8px 28px;font-size:14.5px;border-top:1px solid var(--line)}
.sf-option.pop .sf-feat li{border-top-color:rgba(255,255,255,.14)}
.sf-feat li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:var(--sun)}
.sf-feat li::after{content:"";position:absolute;left:4.5px;top:17.5px;width:7px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
button.btn.sf-buy{width:100%;justify-content:center;background:var(--ink);color:#fff}
button.btn.sf-buy:hover{background:#000}
.sf-option.pop button.btn.sf-buy{background:var(--sun);color:var(--ink)}
.sf-option.pop button.btn.sf-buy:hover{background:#E5A800}
.sf-soon{display:block;text-align:center;border:2px dashed var(--line-strong);border-radius:999px;padding:13px;font-weight:700;color:var(--muted)}
.sf-option.pop .sf-soon{border-color:#5C7488;color:#C9D6E4}

/* ---------- FAQ ---------- */
.sf-faq{max-width:820px}
.sf-faq details{border-bottom:1px solid var(--line);padding:4px 0}
.sf-faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;padding:16px 36px 16px 0;position:relative}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;font-weight:400;color:var(--gold)}
.sf-faq details[open] summary::after{content:"–"}
.sf-faq details p{color:var(--muted);padding:0 0 18px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .sf-partner,.sf-hero,.sf-phero,.sf-two{grid-template-columns:1fr;gap:32px}
  .sf-hero-logo{max-width:420px}
  .sf-buybox{position:static}
  .sf-options{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .sf-facts{grid-template-columns:1fr 1fr}
  .sf-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .sf-facilitator{grid-template-columns:1fr}
  .sf-avatar{width:88px;height:88px;font-size:30px}
  .sf-steps{grid-template-columns:1fr}
  .sf-product-top{padding:26px 22px 6px}
  .sf-product-foot{padding:18px 22px 22px}
  .sf-seller{flex-direction:column}
}