/* ─── OL-COMMERCE-000152 (Core 1.0.73.131 "One marketplace") ─────────────
   WHAT  The Oleren Marketplace (commerce/catalogue on layouts/front2-public) in the New Courses 8 look:
         oleren-front-2.css tokens (white to light cream or dark slate, antique gold hairlines, olive for the
         action, Fraunces headings, Instrument Sans text). Hero, one search, type chips with counts, filters,
         a grid of cards with a cover (the item's image, or a drawn cover: a letter, or the pack's amount),
         price in the buyer's currency, View and Buy. Phone first: one column, 16px gutters, 44px controls.
   GUARD Strict CSP: classes only, no inline styles; cover colours are six classes (olm-cov-1…6) picked from
         the item's key, so a card always gets the same cover. */

/* ── 1. Page frame and hero ───────────────────────────────────────── */
.ol-f2-pub .olm{padding-top:48px}
.olm-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin:0 0 30px}
.olm-hero-text{min-width:0;max-width:720px}
.olm-hero .display{margin:0}
.olm-hero .display::after{content:"";display:block;width:44px;height:1.5px;margin-top:18px;background:var(--gold)}
.olm-hero .lede{margin-top:16px}
.olm-hero-side{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.olm-hero-links{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.ol-f2 .olm-wallet{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--ivory);text-decoration:none;font-size:14px;background:var(--card)}
.olm-wallet span{color:var(--mist)}
.olm-wallet b{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums}
.olm-wallet svg{width:16px;height:16px;color:var(--gold)}
.olm-wallet:hover{border-color:var(--gold)}

/* ── 2. Search, chips, bar, filters ───────────────────────────────── */
.olm-search{display:flex;gap:10px;margin:0 0 18px}
.olm-searchbox{position:relative;flex:1;min-width:0}
.olm-searchbox svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gold);pointer-events:none}
.olm-searchbox input{width:100%;min-height:54px;padding:0 18px 0 50px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ivory);font-size:16.5px;box-shadow:0 1px 0 var(--soft)}
.olm-searchbox input::placeholder{color:var(--mist);opacity:.85}
.olm-searchbox input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px var(--soft)}
.olm-searchbox input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.olm-search .btn{min-height:54px;border-radius:14px;padding:0 26px}
.olm-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.ol-f2 .olm-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--ivory);text-decoration:none;font-size:14.5px;font-weight:500;background:var(--card);white-space:nowrap}
.olm-chip em{font-style:normal;font-size:12.5px;color:var(--mist);font-variant-numeric:tabular-nums;min-width:20px;text-align:center;padding:2px 7px;border-radius:999px;background:var(--wash)}
.ol-f2 .olm-chip:hover{border-color:var(--gold)}
.ol-f2 .olm-chip.on{background:var(--olive);border-color:var(--olive);color:var(--on-olive)}
.olm-chip.on em{color:var(--on-olive);background:rgba(255,255,255,.16)}
.olm-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--soft)}
.olm-count{margin:0;color:var(--mist);font-size:15px;min-width:0;overflow-wrap:anywhere}
.olm-count b{color:var(--ivory);font-weight:600;font-variant-numeric:tabular-nums}
.olm-bar-tools{display:flex;align-items:center;gap:10px}
.olm-sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mist)}
.olm-sort .sel{width:auto;min-width:196px;min-height:44px}
.olm-filters{margin:0 0 26px;border:1px solid var(--soft);border-radius:14px;background:var(--wash)}
.olm-filters>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;cursor:pointer;list-style:none;font-weight:500;font-size:15px;color:var(--ivory)}
.olm-filters>summary::-webkit-details-marker{display:none}
.olm-filters>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translateY(-3px)}
.olm-filters[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.olm-filters>summary svg{width:18px;height:18px;color:var(--gold)}
.olm-filters>summary em{font-style:normal;font-size:12px;font-weight:600;min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:999px;background:var(--olive);color:var(--on-olive)}
.olm-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:4px 18px 18px}
.olm-field{display:grid;gap:7px;min-width:0;font-size:13.5px;color:var(--mist)}
.olm-field .sel{min-height:44px}
.olm-filter-acts{display:flex;align-items:center;gap:14px}
.olm-filter-acts .btn{min-height:44px}

/* 1.0.73.143 (OL-MKT-000150): on wide screens the search, type tabs, count/sort bar and Filters stay under the site header
   while the cards scroll (position:sticky, so it works without JavaScript). oleren-marketplace.js sets --olm-top to the
   header's real height and adds .is-stuck, which makes the box slimmer. Phones and print: not sticky. */
.olm-sticky-mark{height:0;margin:0;padding:0}
@media screen and (min-width:821px){
  html{scroll-padding-top:var(--olm-scroll,0)}
  html:has(.olm-sticky){overflow-anchor:none}
  .olm-sticky{position:sticky;top:var(--olm-top,72px);z-index:15;margin:0 -12px 18px;padding:10px 12px 0;background:var(--slate);max-height:calc(100vh - var(--olm-top,72px) - 12px);overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid transparent}
  .olm-sticky .olm-filters{margin-bottom:12px}
  .olm-sticky.is-stuck{border-bottom-color:var(--soft);box-shadow:0 10px 22px -18px rgba(60,45,10,.45)}
  .olm-sticky.is-stuck .olm-search{margin-bottom:8px}
  .olm-sticky.is-stuck .olm-searchbox input{min-height:44px;font-size:16px}
  .olm-sticky.is-stuck .olm-search .btn{min-height:44px}
  .olm-sticky.is-stuck .olm-chips{margin-bottom:6px}
  .olm-sticky.is-stuck .olm-bar{padding:6px 0;border-top:0}
  .olm-sticky.is-stuck .olm-filters{margin-bottom:8px}
  .olm-sticky.is-stuck .olm-filters>summary{min-height:40px}
  /* once stuck, an open Filters panel drops over the cards instead of making the bar tall */
  .olm-sticky.is-stuck{overflow:visible}
  .olm-sticky.is-stuck .olm-filters{position:relative}
  .olm-sticky.is-stuck .olm-filters[open] .olm-filter-grid{position:absolute;left:-1px;right:-1px;top:100%;z-index:3;padding-top:14px;border:1px solid var(--soft);border-top:0;border-radius:0 0 14px 14px;background:var(--pop);box-shadow:var(--shadow)}
}
@media print{.olm-sticky{position:static}}

/* ── 3. Cards ─────────────────────────────────────────────────────── */
.olm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.olm-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 var(--soft),0 18px 40px -30px rgba(60,45,10,.45);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.olm-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow)}
.olm-card.is-featured{border-color:var(--gold)}
.olm-cover{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.olm-cover::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.34);border-radius:10px;pointer-events:none;z-index:1}
.olm-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.olm-cover-mark{font:300 76px/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;position:relative}
.olm-cover-units{display:inline-flex;align-items:center;gap:10px;position:relative;color:#e2c47f}
.olm-cover-units svg{width:34px;height:34px}
.olm-cover-units b{font:300 58px/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.015em;font-variant-numeric:lining-nums}
.olm-cov-1{background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.65),transparent 55%),linear-gradient(135deg,#f5ecd8,#e3cd9b);color:#7a5b1c}
.olm-cov-2{background:radial-gradient(120% 90% at 85% 10%,rgba(205,170,98,.28),transparent 55%),linear-gradient(135deg,#0a0e34,#273163);color:#d8b977}
.olm-cov-3{background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.22),transparent 55%),linear-gradient(135deg,#5f5615,#9a8c34);color:#f3efe4}
.olm-cov-4{background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.55),transparent 55%),linear-gradient(135deg,#f3e3d6,#d6a487);color:#7b3a1f}
.olm-cov-5{background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.55),transparent 55%),linear-gradient(135deg,#e4e8f4,#a9b4d8);color:#33467e}
.olm-cov-6{background:radial-gradient(120% 90% at 85% 10%,rgba(226,196,127,.26),transparent 55%),linear-gradient(135deg,#33291e,#6b5537);color:#ecd9ad}
.olm-card.is-credits .olm-cover{background:radial-gradient(90% 120% at 100% 0%,rgba(205,170,98,.32),transparent 60%),radial-gradient(70% 90% at 0% 100%,rgba(61,79,134,.55),transparent 60%),linear-gradient(135deg,#05081b,#1b2350)}
.olm-cover:has(img)::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,27,.32),transparent 40%);z-index:1}
.olm-tags{position:absolute;left:18px;top:15px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.olm-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.92);color:#5c4510;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.olm-tag.is-owned{background:#5e5612;color:#f3efe4}
.olm-tag.is-featured::before{content:"";width:6px;height:6px;border-radius:50%;background:#b48a2c}
.olm-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 20px}
.olm-type{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olm-type span{letter-spacing:.06em;text-transform:none;font-size:13px;color:var(--mist)}
.olm-title{margin:0;font:400 23px/1.22 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.005em;overflow-wrap:anywhere}
.olm-title a{color:var(--ivory);text-decoration:none}
.olm-title a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px}
.olm-units{margin:0;color:var(--mist);font-size:14.5px}
.olm-units b{color:var(--ivory);font-variant-numeric:tabular-nums}
.olm-bonus{align-self:flex-start;margin:0;padding:4px 10px;border-radius:999px;background:var(--wash);border:1px solid var(--soft);color:var(--gold-ink);font-size:13px;font-weight:500}
.olm-sum{margin:2px 0 0;color:var(--mist);font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.olm-foot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--soft)}
.olm-price{display:flex;flex-direction:column;gap:2px;min-width:0}
.olm-price strong{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ivory);letter-spacing:-.01em}
.olm-price strong.olm-have{font-size:15px;color:var(--okc)}
.olm-price small{font-size:12.5px;color:var(--mist);font-variant-numeric:tabular-nums}
.olm-noprice{font-size:14px;color:var(--mist)}
.olm-acts{display:flex;gap:8px;flex-wrap:wrap}
.olm .btn.sm{min-height:44px;padding:0 16px}

/* ── 4. Empty and pages ───────────────────────────────────────────── */
.olm-empty{padding:64px 28px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px}
.olm-empty b{display:block;font:400 28px/1.2 var(--serif);margin:0 0 10px;overflow-wrap:anywhere}
.olm-empty p{margin:0 auto 20px;color:var(--mist);max-width:46ch}
.olm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 0;color:var(--mist);font-size:14.5px}
.olm-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.ol-f2 .olm-pages a,.olm-pages b{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:12px;text-decoration:none;color:var(--ivory);font-variant-numeric:tabular-nums}
.olm-pages a:hover{background:var(--wash)}
.olm-pages b{background:var(--olive);color:var(--on-olive);font-weight:600}
.olm-pages i{font-style:normal;padding:0 4px}

/* ── 5. Dark ──────────────────────────────────────────────────────── */
[data-ol-theme="dark"] .olm-card{box-shadow:0 1px 0 rgba(0,0,0,.25),0 24px 50px -32px rgba(0,0,0,.8)}
[data-ol-theme="dark"] .olm-cov-1{background:radial-gradient(120% 90% at 85% 10%,rgba(205,170,98,.22),transparent 55%),linear-gradient(135deg,#3b3424,#5b4b2b);color:#e6c983}
[data-ol-theme="dark"] .olm-cov-4{background:radial-gradient(120% 90% at 85% 10%,rgba(217,150,128,.22),transparent 55%),linear-gradient(135deg,#3c2b25,#6a4232);color:#efc2ad}
[data-ol-theme="dark"] .olm-cov-5{background:radial-gradient(120% 90% at 85% 10%,rgba(143,156,201,.24),transparent 55%),linear-gradient(135deg,#252b40,#3c4a78);color:#c9d2f0}
[data-ol-theme="dark"] .olm-cover::after{border-color:rgba(255,255,255,.14)}
[data-ol-theme="dark"] .olm-tag{background:rgba(37,39,43,.9);color:#e6c983}
[data-ol-theme="dark"] .olm-tag.is-owned{background:#d9d38a;color:#25272b}
[data-ol-theme="dark"] .olm-chip.on em{background:rgba(0,0,0,.18)}

/* ── 6. Smaller screens ───────────────────────────────────────────── */
@media screen and (max-width:1100px){
  .olm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .olm-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .olm-filter-acts{grid-column:1/-1}
}
@media screen and (max-width:820px){
  .ol-f2-pub .olm{padding-top:26px}
  .olm-hero{margin-bottom:22px;gap:16px}
  .olm-hero .lede{font-size:16.5px}
  .olm-hero-side{width:100%}
  .olm-search{gap:8px}
  .olm-searchbox input{min-height:50px;font-size:16px;padding-left:46px}
  .olm-searchbox svg{left:15px}
  .olm-search .btn{min-height:50px;padding:0 18px}
  .olm-chips{gap:6px}
  .olm-chip{padding:0 13px;font-size:14px}
  .olm-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .olm-sort .sel{min-width:0;max-width:62vw}
  .olm-cover{aspect-ratio:5/2}
  .olm-cover-mark{font-size:58px}
  .olm-cover-units b{font-size:46px}
  .olm-body{padding:18px 18px 18px}
  .olm-title{font-size:21.5px}
  .olm-pager{flex-wrap:wrap}
}
@media screen and (max-width:420px){
  .olm-filter-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:4px 14px 16px}
  .olm-filter-grid .olm-field:has(select){grid-column:1/-1}
  .olm-sort span{display:none}
  .olm-bar{gap:8px 12px}
}
@media (prefers-reduced-motion:reduce){.olm-card{transition:none}.olm-card:hover{transform:none}}
@media print{.olm-search,.olm-chips,.olm-filters,.olm-bar-tools,.olm-pager,.olm-acts{display:none}.olm-card{break-inside:avoid;box-shadow:none}}

/* ─── OL-MKT-000033 (Core 1.0.73.132 "Marketplace step 1 + settings") ─────────
   "Coming soon" on a card, and the course product page (/marketplace/courses/{slug}): picture, facts, the three
   "How do you want it?" cards (For me · For my team with the seats stepper · For my LMS, coming soon), what's
   inside, languages and a quote form. Light and dark from the same tokens; phone first. */
.olm-tag.is-soon{background:#3d4f86;color:#eef0f8}
.olm-card.is-courses .olm-tags .olm-tag.is-soon{letter-spacing:.1em}
.olp{padding:28px 0 72px}
.olp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--mist);margin:0 0 22px;min-width:0}
.olp-crumbs a{color:var(--gold-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.olp-crumbs span[aria-current]{color:var(--ivory);overflow-wrap:anywhere}
.olp-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.olp-media .ol-thumb,.olp-media .olp-cover-mark{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.olp-media .olp-cover-mark{aspect-ratio:16/9}
.olp-intro .display{margin:0}
.olp-intro .lede{margin-top:14px}
.olp-facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;color:var(--mist);font-size:15px}
.olp-facts b{color:var(--ivory);font-weight:600}
.olp-langs{display:inline-flex;gap:6px}
.olp-chip{display:inline-grid;place-items:center;min-width:38px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--ivory);background:var(--wash)}
.ol-f2 .olp-h2{font:400 clamp(26px,2.6vw,34px)/1.15 var(--serif);margin:0 0 20px;color:var(--ivory)}
.olp-choose{margin-top:56px}
.olp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.olp-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 1px 0 var(--soft),0 18px 40px -30px rgba(60,45,10,.45)}
.olp-card h3{margin:0;font:500 22px/1.2 var(--serif);color:var(--ivory)}
.olp-card.is-soon{background:var(--wash);border-style:dashed}
.olp-for{margin:0;color:var(--mist);font-size:15px}
.olp-price{margin:4px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.olp-price strong{font:400 30px/1.1 var(--serif);color:var(--ivory)}
.olp-price small{display:block;color:var(--mist);font-size:13px;margin-top:4px}
.olp-per{color:var(--mist);font-size:14px}
.olp-off{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:var(--olive);color:var(--on-olive);font-size:12.5px;font-weight:600;margin-left:4px}
.olp-total{margin:0;color:var(--mist);font-size:15px;font-variant-numeric:tabular-nums}
.olp-total b{color:var(--ivory);font-size:17px}
.olp-note{margin:0;color:var(--mist);font-size:14px;line-height:1.45}
.olp-list{margin:0;padding-left:18px;color:var(--mist);font-size:14.5px}
.olp-card .btn{margin-top:auto;width:100%}
.olp-card .btn[disabled]{opacity:.45;cursor:not-allowed}
.olp-team{display:flex;flex-direction:column;gap:12px;flex:1}
.olp-stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.olp-stepper .btn{width:44px;min-width:44px;min-height:44px;padding:0;font-size:20px;margin:0}
.ol-f2 .olp-seats{width:92px;min-height:44px;text-align:center;font-variant-numeric:tabular-nums;justify-content:center}
.olp-seats-word{color:var(--mist);font-size:14.5px}
.olp-quote{font-size:14px;align-self:flex-start}
.olp-quote.is-on{font-weight:700}
.olp-notify{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto}
.olp-notify .sel{flex:1 1 200px;min-width:0}
.olp-notify .btn{width:auto;margin:0}
.olp-card .olp-notify .btn{flex:1 1 140px}
.olp-done{margin:0;color:var(--okc);font-weight:600;font-size:14px}
.olp-sec{margin-top:56px;max-width:860px}
.olp-sec>p{color:var(--mist);margin:0 0 14px}
.olp-outline{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.olp-outline li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--soft);border-radius:14px;background:var(--card);min-width:0}
.olp-outline b{display:block;font-weight:600;color:var(--ivory)}
.olp-outline p{margin:4px 0 0;color:var(--mist);font-size:14.5px;line-height:1.5}
.olp-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold-ink);font:400 16px var(--serif)}
.olp-notify-sec{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--wash)}
.olp-quote-form .olp-seats{flex:0 0 110px}
@media screen and (max-width:1100px){.olp-cards{grid-template-columns:1fr 1fr}.olp-card[data-choice="lms"]{grid-column:1/-1}}
@media screen and (max-width:820px){
  .olp{padding:18px 0 56px}
  .olp-head{grid-template-columns:1fr;gap:22px}
  .olp-cards{grid-template-columns:1fr}
  .olp-card{padding:18px}
  .olp-choose,.olp-sec{margin-top:40px}
  .olp-price strong{font-size:26px}
  .olp-outline li{padding:14px;gap:12px}
}

/* ─── OL-MKT-000085 (Core 1.0.73.134 "Course previews") ───────────────────────
   1. Preview on a Marketplace card: a glass capsule over the picture. (1.0.73.137: in the top-right corner; 1.0.73.138:
      always there, in the look chosen on Marketplace → Course previews; see below.)
   2. The preview window (partials/preview-modal, a native <dialog>): dark glass backdrop, a near-black panel with a
      hairline of antique gold, the title in Fraunces, the player 16:9, Previous / Next for the free lessons.
   3. "Watch a preview" on the product page: free lessons as large tiles; the rest as frosted, locked tiles
      ("Unlocks when you buy") or "In your course". Light and dark from the same tokens; phone first.
   Classes only (strict CSP); every motion is off under prefers-reduced-motion. */

/* ── 1. The card's Preview ────────────────────────────────────────── */
.olm-cover img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.olm-card:hover .olm-cover:has(.olm-play) img{transform:scale(1.035)}
/* OL-MKT-000114 (1.0.73.137 "Marketplace fixes"): Preview in the top-right corner of the picture (the owner: "a play
   button top right, tap to preview, video pops up"), short and narrow so the presenter's round portrait in the middle
   of the picture is never covered (the length is read out by screen readers, not shown). The badges (top left, top
   15px) stop short of it and wrap instead of running under it.
   OL-MKT-000115 (1.0.73.138 "Preview button style"): how the button looks is now a setting (Marketplace → Course
   previews → "Preview button on course cards"), carried by the grid as data-preview-style:
     hover (the default, also for a grid without the attribute): computers: the gold play disc, always there; pointing
            at the card (or tabbing to it) opens it smoothly into the PREVIEW capsule. Phones and touch screens: the disc.
     disc:  the disc alone on every screen.
     label: the PREVIEW capsule on every screen, phones too (the disc alone where the picture is too small for it to
            stay clear of the presenter's portrait: a phone narrower than about 370px, such as 320 or 360).
   In each look the button lights up on card hover, keyboard focus or press: a darker glass, a gold border, a soft gold
   glow and the disc a little larger (colour only under reduced motion). Phones: the disc is a 44px button inside a
   48px tap area; the phone capsule is 36px tall inside an invisible 48px tap area. The font is set by longhands, so a
   [marketplace] block (where --sans is "inherit") keeps 11px semibold instead of dropping the whole shorthand.
   Switches (custom properties, so one set of rules serves every look):
     --pv-can   on the grid: the capsule can show in this look on this screen (badges keep room for it);
     --pv-open  on the grid or the card: the capsule shows now;
     --pv-room  on the button and the badges: 0 when there is no room for the capsule (two badges on a narrow picture,
                found with a container query on the picture), so it stays the disc and the badges keep to one row. */
.olm-cover:has(.olm-play){container:olm-cover/inline-size}
.olm-grid{--pv-can:0;--pv-open:0}
.olm-grid[data-preview-style="label"]{--pv-can:1;--pv-open:1}
.ol-f2 .olm-play{position:absolute;top:10px;right:12px;z-index:3;display:inline-flex;align-items:center;--pv:calc(var(--pv-open,0) * var(--pv-room,1));
  gap:calc(var(--pv-gap,7px) * var(--pv));min-height:0;padding:3px 3px 3px calc(3px + (var(--pv-pad,11px) - 3px) * var(--pv));border-radius:999px;
  background:rgba(8,10,22,.58);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 26px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
  color:#f7f3e8;text-decoration:none;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .3s ease,color .22s ease,padding .34s cubic-bezier(.2,.8,.2,1),gap .34s cubic-bezier(.2,.8,.2,1)}
.olm-play-label{order:1;display:inline-block;max-width:calc(var(--pv-word,96px) * var(--pv));opacity:var(--pv);overflow:hidden;transition:max-width .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease}
.olm-play-time{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.olm-play-disc{order:2;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,#f3e2b4,#c9a253);color:#1c1608;
  box-shadow:0 0 0 3px rgba(226,196,127,.2),0 6px 14px -4px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.olm-play-disc svg{width:12px;height:12px;margin-left:2px;fill:currentColor}
/* Lit up: keyboard focus or press on every screen; pointing at the card where there is a mouse. */
.olm-card:focus-within .olm-play,.ol-f2 .olm-play:focus-visible,.ol-f2 .olm-play:active{background:rgba(6,8,18,.76);border-color:rgba(226,196,127,.85);color:#fbefcf;
  box-shadow:0 0 0 1px rgba(226,196,127,.22),0 0 22px -3px rgba(226,196,127,.55),0 12px 28px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.olm-card:focus-within .olm-play-disc,.ol-f2 .olm-play:active .olm-play-disc{transform:scale(1.08);box-shadow:0 0 0 3px rgba(226,196,127,.38),0 0 16px -2px rgba(240,214,150,.7),0 6px 14px -4px rgba(0,0,0,.5)}
.ol-f2 .olm-play:focus-visible{outline:2px solid #e2c47f;outline-offset:3px}
@media (hover:hover){
  .olm-card:hover .olm-play{background:rgba(6,8,18,.76);border-color:rgba(226,196,127,.85);color:#fbefcf;
    box-shadow:0 0 0 1px rgba(226,196,127,.22),0 0 22px -3px rgba(226,196,127,.55),0 12px 28px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
  .olm-card:hover .olm-play-disc{transform:scale(1.08);box-shadow:0 0 0 3px rgba(226,196,127,.38),0 0 16px -2px rgba(240,214,150,.7),0 6px 14px -4px rgba(0,0,0,.5)}
  .ol-f2 .olm-play:hover{background:rgba(4,6,14,.84);border-color:#e2c47f}
  .ol-f2 .olm-play:hover .olm-play-disc{transform:scale(1.12)}
}
/* "hover" (and a grid without the attribute) on a computer: the capsule opens on pointing or keyboard focus. */
@media (hover:hover) and (pointer:fine) and (min-width:481px){
  .olm-grid:not([data-preview-style="disc"]){--pv-can:1}
  .olm-grid:not([data-preview-style="disc"]) .olm-card:is(:hover,:focus-within){--pv-open:1}
}
.olm-cover:has(.olm-play)::before{background:linear-gradient(180deg,rgba(5,8,27,.32),transparent 40%)}
.olm-card:hover .olm-cover:has(.olm-play)::before,.olm-card:focus-within .olm-cover:has(.olm-play)::before{background:radial-gradient(50% 70% at 100% 0%,rgba(5,8,27,.3),transparent 70%),linear-gradient(180deg,rgba(5,8,27,.32),transparent 40%)}
/* The badges stop short of the button: of the capsule when it can show, else of the disc. */
.olm-cover:has(.olm-play) .olm-tags{right:calc(var(--pv-tags,56px) + var(--pv-tags-word,77px) * var(--pv-can,0) * var(--pv-room,1))}
/* No room for the capsule, so the disc: two badges (for example Featured and Coming soon) on a picture under 392px wide;
   any picture under 316px wide (the capsule would reach the presenter's portrait; a [marketplace] block in a narrow
   column, for example). */
@container olm-cover (max-width:391.98px){
  .olm-cover:has(.olm-tag + .olm-tag) :is(.olm-play,.olm-tags){--pv-room:0}
}
@container olm-cover (max-width:315.98px){
  .olm-cover :is(.olm-play,.olm-tags){--pv-room:0}
}
@media (hover:none),(pointer:coarse),screen and (max-width:480px){
  .ol-f2 .olm-play{top:calc(7px + 3px * var(--pv));right:10px;--pv-pad:10px;--pv-gap:6px;--pv-word:84px;font-size:10px;letter-spacing:.11em}
  .ol-f2 .olm-play::after{content:"";position:absolute;inset:calc(-2px - 4px * var(--pv)) -4px;border-radius:999px}
  .olm-play-disc{width:calc(36px - 8px * var(--pv,0));height:calc(36px - 8px * var(--pv,0))}
  .olm-play-disc svg{width:calc(16px - 4px * var(--pv,0));height:calc(16px - 4px * var(--pv,0))}
  .olm-cover:has(.olm-play) .olm-tags{--pv-tags:58px;--pv-tags-word:60px}
  /* A phone picture (5:2) under 336px wide: the capsule would reach the presenter's portrait, so the disc. */
  @container olm-cover (max-width:335.98px){.olm-cover :is(.olm-play,.olm-tags){--pv-room:0}}
}
@media screen and (max-width:480px){
  /* Two badges beside the play button on a phone: a little tighter, so they stay on one row (not on the portrait). */
  .olm-cover:has(.olm-play):has(.olm-tag + .olm-tag) .olm-tags{left:12px;gap:4px}
  .olm-cover:has(.olm-play):has(.olm-tag + .olm-tag) .olm-tag{padding:5px 8px;gap:5px;font-size:10.5px;letter-spacing:.07em}
}
@media screen and (max-width:480px){
  /* On a phone the tighter badges leave room for the phone capsule on a picture 336px wide or more (a 375px phone). */
  @container olm-cover (min-width:336px){.olm-cover:has(.olm-tag + .olm-tag) :is(.olm-play,.olm-tags){--pv-room:1}}
}

/* ── 2. The preview window ────────────────────────────────────────── */
html.olpv-locked,html.olpv-locked body{overflow:hidden}
.olpv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:#f3efe4;overflow:auto;
  display:none;align-items:center;justify-content:center;overscroll-behavior:contain}
.olpv[open]{display:flex}
.olpv::backdrop{background:radial-gradient(120% 90% at 50% 0%,rgba(40,34,18,.55),transparent 60%),rgba(4,5,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.olpv[open]::backdrop{animation:olpvFade .3s ease both}
.olpv.is-closing::backdrop{animation:olpvFadeOut .2s ease both}
.olpv-panel{position:relative;width:min(1120px,100%,calc((100dvh - 210px) * 16 / 9 + 48px));min-width:min(560px,100%);display:flex;flex-direction:column;gap:18px;padding:22px 24px 24px;border-radius:22px;
  background:linear-gradient(180deg,#14161f,#0b0c12 70%);border:1px solid rgba(205,170,98,.22);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  font:400 16px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.olpv[open] .olpv-panel{animation:olpvIn .38s cubic-bezier(.2,.8,.2,1) both}
.olpv.is-closing .olpv-panel{animation:olpvOut .2s ease both}
.olpv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0}
.olpv-titles{min-width:0}
.olpv-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#cdaa62}
.olpv-free{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:rgba(205,170,98,.14);border:1px solid rgba(205,170,98,.38);color:#e6c983;letter-spacing:.14em}
.olpv-dot{width:4px;height:4px;border-radius:50%;background:rgba(205,170,98,.6)}
.olpv-title{margin:0;font:400 clamp(22px,2.4vw,30px)/1.15 "Fraunces",Georgia,serif;letter-spacing:-.01em;color:#f6f2e7;overflow-wrap:anywhere}
.olpv-sub{margin:6px 0 0;color:#a9a79f;font-size:14.5px;overflow-wrap:anywhere}
.olpv-sub:empty{display:none}
.olpv-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -6px 0 0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#f3efe4;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.olpv-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.olpv-close:hover{border-color:#cdaa62;background:rgba(205,170,98,.1);transform:rotate(90deg)}
.olpv-close:focus-visible,.olpv-step:focus-visible{outline:2px solid #e2c47f;outline-offset:3px;border-radius:999px}
.olpv-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 50px -20px rgba(0,0,0,.8)}
.olpv-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.olpv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.olpv-foot[hidden]{display:none}
.olpv-step{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#f3efe4;font:500 14.5px/1 inherit;font-family:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.olpv-step svg{width:16px;height:16px;fill:none;stroke:#cdaa62;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.olpv-step:hover:not([disabled]){border-color:#cdaa62;background:rgba(205,170,98,.1)}
.olpv-step[disabled]{opacity:.35;cursor:default}
.olpv-count{margin:0;color:#a9a79f;font-size:13.5px;font-variant-numeric:tabular-nums;text-align:center;min-width:0}
@keyframes olpvFade{from{opacity:0}to{opacity:1}}
@keyframes olpvFadeOut{from{opacity:1}to{opacity:0}}
@keyframes olpvIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@keyframes olpvOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.985)}}
@media screen and (max-width:640px){
  .olpv{padding:10px;align-items:center}
  .olpv-panel{width:100%;min-width:0;padding:16px 14px 16px;gap:14px;border-radius:18px}
  .olpv-head{gap:12px}
  .olpv-kicker{font-size:10.5px;letter-spacing:.16em;margin-bottom:6px}
  .olpv-sub{font-size:13.5px}
  .olpv-close{margin:-2px -2px 0 0}
  .olpv-stage{border-radius:10px}
  .olpv-step{padding:0 13px;font-size:14px}
}
@media screen and (max-width:360px){.olpv-step span{display:none}.olpv-step{width:44px;padding:0;justify-content:center}}

/* ── 3. "Watch a preview" on the product page ─────────────────────── */
.olp-pv{margin-top:56px}
.olp-pv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;margin:0 0 24px}
.olp-pv-heading .eyebrow{margin-bottom:12px}
.olp-pv-heading .olp-h2{margin:0}
.olp-pv-lede{margin:0;max-width:46ch;color:var(--mist);font-size:15.5px;line-height:1.55}
.olp-pv-free,.olp-pv-locked{list-style:none;margin:0;padding:0;display:grid;min-width:0}
.olp-pv-free{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.olp-pv-free:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:720px}
.olp-pv-tile{min-width:0}
.ol-f2 .olp-pv-card{display:flex;flex-direction:column;height:100%;min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);color:var(--ivory);text-decoration:none;
  box-shadow:0 1px 0 var(--soft),0 22px 48px -32px rgba(60,45,10,.55);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease}
.olp-pv-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:#11131b}
.olp-pv-media .ol-thumb{position:absolute;inset:0;aspect-ratio:auto;background:transparent}
.olp-pv-media img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.olp-pv-cover{position:absolute;inset:0;aspect-ratio:auto}
.olp-pv-cover::after{display:none}
.olp-pv-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,8,27,.06) 0%,rgba(5,8,27,0) 45%,rgba(5,8,27,.55) 100%);transition:background-color .3s ease}
.olp-pv-badge{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.94);color:#4f480d;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 4px 14px -4px rgba(0,0,0,.35)}
.olp-pv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#6f6419;box-shadow:0 0 0 3px rgba(111,100,25,.18)}
.olp-pv-disc{position:absolute;left:20px;bottom:20px;z-index:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(8,10,22,.42);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.34);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);color:#fbf7ec;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .25s ease,border-color .25s ease}
.olp-pv-disc::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(226,196,127,.38);opacity:.9;transition:inset .3s ease,opacity .3s ease}
.olp-pv-disc svg{width:24px;height:24px;margin-left:3px;fill:currentColor}
.olp-pv-time{position:absolute;right:14px;bottom:14px;z-index:2;padding:4px 9px;border-radius:8px;background:rgba(8,10,22,.66);color:#f6f2e7;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.olp-pv-text{display:flex;flex-direction:column;gap:5px;padding:18px 22px 20px;min-width:0;flex:1}
.olp-pv-k{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.olp-pv-t{font:400 22px/1.25 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.005em;color:var(--ivory);overflow-wrap:anywhere}
.olp-pv-cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--okc);font-size:14.5px;font-weight:600}
.olp-pv-cta svg{width:14px;height:14px;fill:currentColor}
.ol-f2 a.olp-pv-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
a.olp-pv-card:hover .olp-pv-media img{transform:scale(1.04)}
a.olp-pv-card:hover .olp-pv-disc{transform:scale(1.07);background:rgba(8,10,22,.6);border-color:rgba(226,196,127,.8)}
a.olp-pv-card:hover .olp-pv-disc::after{inset:-12px;opacity:.5}
.ol-f2 a.olp-pv-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:18px}
.olp-pv-tile.is-unavailable .olp-pv-card{opacity:.75}
.olp-pv-tile.is-unavailable .olp-pv-badge{background:rgba(255,255,255,.8);color:#5c5a52}
.olp-pv-tile.is-unavailable .olp-pv-cta{color:var(--mist);font-weight:500}

.olp-pv-rest{margin-top:30px}
.olp-pv-rest-h{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.olp-pv-rest-h svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.olp-pv-rest-h::after{content:"";flex:1;height:1px;background:var(--soft)}
.olp-pv-locked{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.olp-pv-locked .olp-pv-card{border-radius:14px;box-shadow:0 1px 0 var(--soft)}
.olp-pv-locked .olp-pv-media img{filter:blur(16px) saturate(.85);transform:scale(1.3)}
.olp-pv-locked .olp-pv-veil{background:linear-gradient(160deg,rgba(10,12,24,.34),rgba(10,12,24,.68))}
.olp-pv-num{position:absolute;left:14px;top:8px;z-index:2;font:300 38px/1 var(--serif);font-variation-settings:"opsz" 144;color:rgba(251,247,236,.92);letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.olp-pv-lock{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f6f2e7}
.olp-pv-lock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.olp-pv-locked .olp-pv-text{padding:13px 15px 15px;gap:4px}
.olp-pv-locked .olp-pv-k{font-size:10.5px;letter-spacing:.16em}
.olp-pv-locked .olp-pv-t{font:600 15px/1.35 var(--sans);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.olp-pv-state{margin-top:auto;padding-top:6px;color:var(--mist);font-size:12.5px}
.olp-pv-tile.is-owned .olp-pv-media img{filter:none;transform:none}
.olp-pv-tile.is-owned .olp-pv-num{display:none}
.olp-pv-tile.is-owned .olp-pv-veil{background:linear-gradient(180deg,rgba(5,8,27,.1),rgba(5,8,27,.5))}
.olp-pv-tile.is-owned .olp-pv-lock{background:linear-gradient(145deg,#f3e2b4,#c9a253);border-color:transparent;color:#1c1608}
.olp-pv-tile.is-owned .olp-pv-lock svg{fill:currentColor;stroke:none;margin-left:2px;width:14px;height:14px}
.olp-pv-tile.is-owned .olp-pv-state{color:var(--okc);font-weight:600}
.ol-f2 .olp-pv-tile.is-owned a.olp-pv-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow)}

/* "Free preview" in What's inside */
.ol-f2 .olp-free-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:2px;margin-left:10px;min-height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:var(--tint);color:var(--okc);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.olp-free-badge::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.ol-f2 .olp-free-badge:hover{border-color:var(--gold)}

[data-ol-theme="dark"] .olp-pv-card{box-shadow:0 1px 0 rgba(0,0,0,.25),0 26px 56px -34px rgba(0,0,0,.85)}
[data-ol-theme="dark"] .olp-pv-badge{background:rgba(24,26,30,.88);color:#d9d38a;border:1px solid rgba(217,211,138,.3)}
[data-ol-theme="dark"] .olp-pv-badge::before{background:#d9d38a;box-shadow:0 0 0 3px rgba(217,211,138,.16)}

@media screen and (max-width:1100px){.olp-pv-locked{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:820px){
  .olp-pv{margin-top:40px}
  .olp-pv-head{margin-bottom:18px}
  .olp-pv-free{gap:16px}
  .olp-pv-t{font-size:20px}
  .olp-pv-locked{grid-template-columns:minmax(0,1fr);gap:10px}
  .olp-pv-locked .olp-pv-card{flex-direction:row;align-items:stretch}
  .olp-pv-locked .olp-pv-media{flex:0 0 132px;aspect-ratio:auto;min-height:84px}
  .olp-pv-locked .olp-pv-text{justify-content:center;padding:12px 14px}
  .olp-pv-locked .olp-pv-state{margin-top:2px;padding-top:0}
  .olp-pv-num{font-size:30px;left:11px;top:6px}
  .olp-pv-lock{width:30px;height:30px;right:9px;bottom:9px}
  .olp-pv-lock svg{width:14px;height:14px}
}
@media screen and (max-width:640px){
  .olp-pv-free{grid-template-columns:minmax(0,1fr)}
  .olp-pv-text{padding:15px 16px 17px}
  .olp-pv-disc{width:54px;height:54px;left:14px;bottom:14px}
  .olp-pv-disc svg{width:20px;height:20px}
  .olp-pv-badge{left:12px;top:12px}
  .olp-pv-rest{margin-top:24px}
}
@media screen and (max-width:360px){
  .olp-pv-locked .olp-pv-media{flex-basis:104px}
  .olp-pv-locked .olp-pv-t{font-size:14.5px}
  .ol-f2 .olp-free-badge{margin-left:0;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .olm-cover img,.olp-pv-media img,.ol-f2 .olp-pv-card,.olp-pv-disc,.olp-pv-disc::after,.olpv-close{transition:none}
  /* 1.0.73.138: the card's Preview changes colour only: no opening movement, no larger disc. */
  .ol-f2 .olm-play{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
  .olm-play-label{transition:none}
  .olm-play-disc{transition:box-shadow .2s ease;transform:none!important}
  .olm-card:hover .olm-cover:has(.olm-play) img,a.olp-pv-card:hover .olp-pv-media img{transform:none}
  .olp-pv-locked .olp-pv-media img{transform:scale(1.3)}
  .ol-f2 a.olp-pv-card:hover,.olpv-close:hover{transform:none}
  a.olp-pv-card:hover .olp-pv-disc{transform:none}
  .olpv[open] .olpv-panel,.olpv[open]::backdrop,.olpv.is-closing .olpv-panel,.olpv.is-closing::backdrop{animation:none}
}
@media print{.olm-play,.olp-pv,.olpv{display:none}}

/* ── 1.0.73.139 "Course languages" (OL-MKT-000130) ──────────────────
   The card's small "EN · FR" tag (only on a course in more than one language), "Available in: English · Français"
   on the product page, and the English / Français switch for its free previews (links, so no script), with a
   language tag on a tile that plays in French. Classes only (strict CSP); the theme's tokens give light and dark. */
.olm-langs{float:right;display:inline-flex;align-items:center;margin:-1px 0 0 10px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--wash);color:var(--ivory);font-size:10.5px;font-weight:700;letter-spacing:.1em;line-height:1.5;font-variant-numeric:tabular-nums}
.olm-type .olm-langs span{font-size:inherit;letter-spacing:inherit;color:inherit}
.olm-type .olm-langs .olm-langs-more{opacity:.72;letter-spacing:.04em}   /* 1.0.73.141: "EN · FR · ES · HI +2" */
.olp-facts .olp-langs{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.olp-langs-k{color:var(--mist)}
.olp-lang{color:var(--ivory);font-weight:600}
.olp-lang-sep{color:var(--gold)}
.olp-pv-lang{flex-basis:100%;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.olp-pv-lang-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.olp-pv-lang-opts{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--wash)}
.olp-pv-lang-opts{flex-wrap:wrap;max-width:100%}   /* 1.0.73.141: any number of languages wraps on a phone */
.ol-f2 .olp-pv-lang-opt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px 0 5px;border-radius:999px;color:var(--mist);text-decoration:none;font-size:14.5px;font-weight:600;transition:background-color .18s ease,color .18s ease}
.olp-pv-lang-code{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--ivory);font-size:10.5px;font-weight:800;letter-spacing:.05em}
.ol-f2 .olp-pv-lang-opt:hover{color:var(--ivory)}
.ol-f2 .olp-pv-lang-opt.is-on{background:var(--olive);color:var(--on-olive)}
.olp-pv-lang-opt.is-on .olp-pv-lang-code{background:rgba(255,255,255,.2);color:var(--on-olive)}
.ol-f2 .olp-pv-lang-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.olp-pv-langtag{position:absolute;right:14px;top:16px;z-index:2;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:rgba(8,10,22,.66);color:#f6f2e7;font-size:11px;font-weight:700;letter-spacing:.14em;box-shadow:0 4px 14px -4px rgba(0,0,0,.35)}
@media (max-width:480px){
  .olp-pv-langtag{right:12px;top:12px}
  .ol-f2 .olp-pv-lang-opt{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.ol-f2 .olp-pv-lang-opt{transition:none}}

/* ── 7. Phones: a compact top (Core 1.0.73.148 "Compact Marketplace on phones", OL-MKT-000155) ──────────────────────────
   WHAT  Up to 640px wide only (tablets and desktops keep every rule above, unchanged). The title block is short (no
         "Shop" label, no rule, no subtitle), the currency, wallet and My orders sit on ONE row, the search is one 44px field
         with a magnifier button inside it, the type chips are one row that scrolls sideways (fading at the right edge), and
         "57 items", Sort and Filters share one row. The first course card starts about 360px from the top.
   HOW   CSS only: the markup is the same at every width (the words the screen reader needs stay in the page and are only
         hidden from the eye). The Filters panel still opens below the row and pushes the cards down.
   GUARD No inline style or script (a mask drawn from a small data: image, which the Content-Security-Policy allows). */
@media screen and (max-width:640px){
  .ol-f2-pub .olm:not(.olp){padding-top:14px}
  .olm-hero{margin-bottom:12px;gap:10px}
  .olm-hero-text{width:100%}
  .olm-hero .eyebrow,.olm-hero .lede{display:none}
  .olm-hero .display::after{display:none}
  .ol-f2-pub .olm-hero .display{font-size:29px;line-height:1.1;letter-spacing:-.01em}
  /* one toolbar row: currency, wallet, My orders */
  .olm-hero-side{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
  .olm-hero-side:not(:has(.olpay-switch,.olm-hero-links)){display:none}
  .olm-hero-side .olpay-switch{position:relative;gap:4px;flex:none}
  .olm-hero-side .olpay-switch-label,.olm-wallet span{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .olm-hero-side .olpay-switch-select,.olm-hero-side .olpay-pick-btn{min-height:40px;min-width:0;padding:0 4px 0 10px;font-size:14.5px;border-radius:12px}
  .olm-hero-side .olpay-pick-btn{padding:0 30px 0 12px}
  .olm-hero-side .olpay-switch-go{min-height:40px;padding:0 8px;font-size:13px;border-radius:12px}
  .olm-hero-side .olm-hero-links{flex:1 1 0;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  .olm-hero-side .olm-hero-links .olm-wallet{flex:none;min-height:40px;padding:0 12px;gap:6px;position:relative}
  .olm-hero-side .olm-hero-links .link{margin-left:auto;flex:none;min-height:40px;padding:0 2px;font-size:14.5px;white-space:nowrap}
  /* search: one 44px field, the magnifier button inside its right end */
  .olm-sticky .olm-search{position:relative;display:block;margin:0 0 10px}
  .olm-sticky .olm-searchbox svg{display:none}
  .olm-sticky .olm-searchbox input{min-height:44px;font-size:16px;padding:0 56px 0 14px;border-radius:12px}
  .olm-sticky .olm-search .btn{position:absolute;right:0;top:0;width:44px;min-height:44px;height:44px;padding:0;gap:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0 12px 12px 0;font-size:0;line-height:0;overflow:hidden}
  .olm-sticky .olm-search .btn::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
  .olm-sticky .olm-search .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  /* type chips: one row that scrolls sideways, a soft fade at the right edge, the last chip clear of the fade at the end */
  .olm-sticky .olm-chips{flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;margin:-3px -3px 7px;padding:3px 40px 3px 3px;scroll-padding-left:3px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .olm-sticky .olm-chips::-webkit-scrollbar{display:none}
  .olm-sticky .olm-chips .olm-chip{flex:none;min-height:40px;padding:0 12px;gap:7px;font-size:14px;scroll-snap-align:start}
  .olm-sticky .olm-chip em{min-width:18px;padding:1px 6px;font-size:12px}
  /* one row: the count, Sort, and a compact Filters button; the Filters panel still opens below */
  .olm-sticky .olm-bar{flex-wrap:nowrap;gap:8px;height:40px;margin:0;padding:0 100px 0 0;border-top:0}
  .olm-sticky:has(.olm-filters>summary em) .olm-bar{padding-right:128px}
  .olm-sticky .olm-count{flex:1 1 0;min-width:0;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
  .olm-sticky .olm-bar-tools{flex:none;margin-left:auto}
  .olm-sticky .olm-sort span{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .olm-sticky .olm-sort{position:relative;display:block}
  .olm-sticky .olm-sort .sel{display:block;width:min(34vw,150px);min-width:0;max-width:none;min-height:40px;padding:0 4px 0 8px;font-size:14px;text-overflow:ellipsis}
  .olm-sticky .olm-filters{margin:-40px 0 14px;border:0;border-radius:0;background:none;pointer-events:none}
  .olm-sticky .olm-filters>summary{pointer-events:auto;width:max-content;margin-left:auto;min-height:40px;padding:0 12px;gap:7px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14.5px}
  .olm-sticky .olm-filters>summary::after{display:none}
  .olm-sticky .olm-filters>summary svg{width:17px;height:17px}
  .olm-sticky .olm-filters[open]>summary{border-color:var(--gold);background:var(--wash)}
  .olm-sticky .olm-filter-grid{pointer-events:auto;margin-top:8px;padding:14px;border:1px solid var(--soft);border-radius:14px;background:var(--wash)}
  /* cards: the same, a little closer together */
  .olm-grid{gap:14px}
  .olm-body{padding:16px}
}