/* ─── 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}

/* ── 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:18px;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}}