/* === VERTICAL CARD + DRAWER DESIGN === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none}
:root{
  --primary:#005FCC;
  --primary-hover:color-mix(in srgb,var(--primary) 85%,black);
  --primary-fg:#fff;
  --primary-10:color-mix(in srgb,var(--primary) 10%,white);
  --primary-04:color-mix(in srgb,var(--primary) 4%,white);
  --primary-30:color-mix(in srgb,var(--primary) 30%,transparent);
  --bg:#ffffff;--bg-sec:#f8fafc;--fg:#0f172a;--fg-sec:#1e293b;--muted:#64748b;
  --border:#e2e8f0;--card:#ffffff;--success:#16a34a;--success-10:rgba(22,163,74,.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,.1);
  --card-radius:24px;
}
html.dark{
  --bg:#0f172a;--bg-sec:#1e293b;--fg:#f1f5f9;--fg-sec:#e2e8f0;--muted:#94a3b8;
  --border:#334155;--card:#1e293b;
  --primary-10:color-mix(in srgb,var(--primary) 15%,#0f172a);
  --primary-04:color-mix(in srgb,var(--primary) 6%,#0f172a);
  --primary-30:color-mix(in srgb,var(--primary) 30%,#0f172a);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg-sec);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── Header ── */
.cp-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);padding:0 24px;backdrop-filter:blur(12px)}
.cp-header-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.cp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.cp-logo-icon{width:40px;height:40px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--primary-fg);flex-shrink:0}
.cp-logo span{font-weight:700;font-size:16px}
.cp-back{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--primary);text-decoration:none;font-size:14px;font-weight:500}
.cp-back:hover{text-decoration:underline}

/* ── Layout ── */
.cp-wrap{max-width:1440px;margin:0 auto;padding:32px 24px;display:grid;grid-template-columns:320px 1fr;gap:32px}
@media(max-width:960px){.cp-wrap{grid-template-columns:1fr;gap:20px;padding:20px 16px}}
.cp-wrap>main{min-width:0;overflow:hidden}

/* ── Sidebar ── */
.cp-sidebar{position:sticky;top:96px;align-self:start;background:var(--card);border-radius:var(--card-radius);padding:24px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
@media(max-width:960px){.cp-sidebar{position:static;border-radius:16px;padding:20px}}
.cp-sidebar h2{font-size:18px;font-weight:800;margin-bottom:16px}
.cp-search{position:relative;margin-bottom:20px}
.cp-search input{width:100%;padding:10px 14px 10px 38px;border-radius:12px;border:1px solid var(--border);font-size:14px;outline:none;background:var(--bg-sec);color:var(--fg);transition:border-color .2s}
.cp-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-10)}
.cp-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none}
.cp-filter-group{margin-bottom:18px}
.cp-filter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px}
.cp-filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.cp-pill{padding:5px 12px;border-radius:20px;border:1px solid var(--border);font-size:12px;cursor:pointer;background:var(--bg-sec);color:var(--fg);transition:all .2s;user-select:none}
.cp-pill:hover{border-color:var(--primary);color:var(--primary)}
.cp-pill.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.cp-stats{padding:14px;border-radius:12px;background:var(--bg-sec);margin-top:16px;font-size:13px;color:var(--muted)}
.cp-stats strong{color:var(--fg)}

/* ── Page header ── */
.cp-page-header{margin-bottom:24px}
.cp-page-header h1{font-size:28px;font-weight:800;margin-bottom:4px}
.cp-page-header p{font-size:14px;color:var(--muted)}

/* ── Course Grid: 3 columns ── */
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1100px){.cp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cp-grid{grid-template-columns:1fr;gap:16px}}

/* ── Vertical Course Card ── */
.cp-card{border-radius:var(--card-radius);background:var(--card);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s;display:flex;flex-direction:column}
.cp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* Photo area — top of card */
.cp-card-photo{width:100%;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--primary-04)}
.cp-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cp-card:hover .cp-card-photo img{transform:scale(1.05)}
.cp-card-nophoto{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-04),var(--primary-10))}
.cp-card-nophoto svg{width:56px;height:56px;color:var(--primary);opacity:.3}

/* Badge floating on photo */
.cp-badge-float{position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.3px;backdrop-filter:blur(8px)}

/* Card info section */
.cp-card-info{padding:20px;flex:1;display:flex;flex-direction:column}
.cp-card-title{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-card-badge{padding:3px 10px;border-radius:8px;font-size:10px;font-weight:700}
.cp-card-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-card-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-bottom:16px}
.cp-card-meta span{display:flex;align-items:center;gap:4px}
.cp-card-meta svg{width:14px;height:14px;color:var(--primary)}
.course-save-tag{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border:1.5px solid #6ee7b7;border-radius:16px;padding:5px 12px;font-size:12px;font-weight:700;color:#047857;white-space:nowrap;box-shadow:0 2px 6px rgba(4,120,87,.12);animation:saveTagPulse 2s ease-in-out infinite}
.course-save-tag::before{content:'🎉';font-size:12px}
@keyframes saveTagPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* Price bar at bottom of card info */
.cp-card-price-bar{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border);margin-top:auto}
.cp-card-price{font-size:22px;font-weight:800;color:var(--primary)}
.cp-card-price small{font-size:12px;font-weight:400;color:var(--muted);margin-left:2px}
.cp-view-btn{padding:8px 18px;border-radius:12px;border:1px solid var(--primary);background:transparent;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.cp-view-btn:hover{background:var(--primary);color:var(--primary-fg)}

/* ── Drawer (expandable below card) ── */
.cp-drawer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.cp-card.open .cp-drawer{max-height:2000px}
.cp-drawer-inner{border-top:1px solid var(--border);padding:0}

/* Drawer slots */
.cp-slot{border-bottom:1px solid var(--border)}
.cp-slot:last-child{border-bottom:none}
.cp-slot-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg);transition:background .15s;gap:8px}
.cp-slot-header:hover{background:var(--primary-04)}
.cp-slot-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--primary-10);color:var(--primary);flex-shrink:0}
.cp-slot-icon svg{width:15px;height:15px}
.cp-slot-label{flex:1;display:flex;align-items:center;gap:10px}
.cp-slot-count{font-size:11px;color:var(--muted);font-weight:400;background:var(--bg-sec);padding:2px 8px;border-radius:10px}
.cp-slot-arrow{width:18px;height:18px;transition:transform .2s;color:var(--muted)}
.cp-slot.open .cp-slot-arrow{transform:rotate(180deg);color:var(--primary)}
.cp-slot-content{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px 0 58px}
.cp-slot.open .cp-slot-content{max-height:800px;padding-bottom:16px}

/* Slot content */
.cp-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.cp-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5}
.cp-check{width:18px;height:18px;border-radius:50%;background:var(--success-10);color:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.cp-check svg{width:10px;height:10px}
.cp-num{width:22px;height:22px;border-radius:6px;background:var(--primary-10);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px}
.cp-tags{display:flex;flex-wrap:wrap;gap:6px}
.cp-tag{padding:4px 10px;border-radius:8px;background:var(--bg-sec);border:1px solid var(--border);font-size:12px}
.cp-cert{padding:4px 10px;border-radius:8px;background:var(--success-10);font-size:12px;color:var(--success);display:flex;align-items:center;gap:4px}

/* Pricing inside drawer */
.cp-pricing-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cp-price-box{padding:12px 20px;border-radius:12px;background:var(--bg-sec);border:1px solid var(--border);text-align:center;min-width:100px}
.cp-price-box p{font-size:11px;color:var(--muted);margin-bottom:2px}
.cp-price-box .big{font-size:22px;font-weight:800;color:var(--fg)}
.cp-price-box .big.accent{color:var(--primary)}
.cp-enroll-btn{padding:10px 24px;border-radius:12px;border:none;background:var(--primary);color:var(--primary-fg);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.cp-enroll-btn:hover{background:var(--primary-hover);box-shadow:0 4px 12px var(--primary-30)}

/* Empty state */
.cp-empty{text-align:center;padding:80px 24px;color:var(--muted);grid-column:1/-1}
.cp-empty svg{width:64px;height:64px;margin-bottom:16px;opacity:.3}
.cp-empty h3{font-size:20px;color:var(--fg);margin-bottom:6px}

/* ── Top Banner ── */
.cp-banner{border-radius:var(--card-radius);overflow:hidden;margin-bottom:28px;position:relative;box-shadow:0 25px 60px -12px rgba(0,0,0,.25),0 12px 25px -8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1);background:var(--primary);transform:perspective(1000px) rotateX(1deg);transition:transform .4s,box-shadow .4s}
.cp-banner:hover{transform:perspective(1000px) rotateX(0deg) translateY(-3px);box-shadow:0 35px 80px -15px rgba(0,0,0,.3),0 15px 35px -10px rgba(0,0,0,.2)}
.cp-banner-img{position:relative;display:flex;align-items:center}
.cp-banner-img img{display:block;width:100%;height:auto;max-height:350px;object-fit:cover;border-radius:inherit}
.cp-banner-img::before{display:none}
.cp-banner-text{position:absolute;z-index:2;padding:40px 36px;text-align:left;max-width:540px;top:0;left:0;height:100%;display:flex;flex-direction:column;justify-content:center}
.cp-banner-text h2{font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;color:#fff}
.cp-banner-text p{margin-top:12px;font-size:16px;line-height:1.6;color:#fff;opacity:.9;max-width:420px}
.cp-banner-btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.cp-banner-btns a{padding:10px 22px;border-radius:12px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.cp-btn-white{background:#fff;color:#000}.cp-btn-white:hover{background:#f1f5f9}
.cp-btn-outline{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}.cp-btn-outline:hover{background:rgba(255,255,255,.15)}
.cp-banner-noimg{padding:48px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}
.cp-banner-noimg h2{font-size:32px;font-weight:800;color:var(--primary-fg)}
.cp-banner-noimg p{margin-top:12px;font-size:16px;color:var(--primary-fg);opacity:.85;max-width:500px}
.cp-banner-noimg .cp-banner-btns{justify-content:center;margin-top:20px}
@media(max-width:639px){.cp-banner-img{flex-direction:column}.cp-banner-img::before{display:none}.cp-banner-img img{border-radius:var(--card-radius) var(--card-radius) 0 0}.cp-banner-text{position:relative;top:auto;left:auto;height:auto;max-width:100%;padding:28px 24px;color:#fff;background:var(--primary);border-radius:0 0 var(--card-radius) var(--card-radius)}.cp-banner-noimg{padding:36px 24px}.cp-banner-noimg h2,.cp-banner-text h2{font-size:24px}.cp-banner-noimg p,.cp-banner-text p{font-size:14px}}
/* Price bar Add to Cart button */
.cp-card-atc{display:inline-flex;align-items:center;gap:4px;padding:10px 24px;border-radius:12px;background:var(--primary);color:var(--primary-fg);font-size:16px;font-weight:800;letter-spacing:.3px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:'Inter','SF Pro Display',system-ui,-apple-system,sans-serif}
.cp-card-atc:hover{background:var(--primary-hover);color:var(--primary-fg);transform:translateY(-1px);box-shadow:0 4px 12px var(--primary-30)}
/* Cart system */
.cart-fab{display:none}
.header-cart{position:relative;cursor:pointer;background:none;border:none;color:var(--fg);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;transition:background .15s}
.header-cart:hover{background:var(--primary-04)}
.header-cart .badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-sidebar{position:fixed;top:0;left:0;bottom:0;width:420px;max-width:100vw;background:var(--bg);z-index:201;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:8px 0 32px rgba(0,0,0,.15)}
.cart-sidebar.open{transform:translateX(0)}
.mobile-cart{display:none}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.cart-header h2{font-size:20px;font-weight:700}
.cart-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;color:var(--fg)}
.cart-body{flex:1;overflow-y:auto;padding:24px}
.cart-empty{text-align:center;padding:48px 0;color:var(--muted)}
.cart-item{display:flex;justify-content:space-between;align-items:flex-start;padding:16px;margin-bottom:12px;border-radius:14px;border:1px solid var(--border);background:var(--card)}
.cart-item-info h4{font-size:15px;font-weight:600;margin-bottom:4px}
.cart-item-info p{font-size:13px;color:var(--muted)}
.cart-item-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-item-price{font-weight:700;font-size:16px}
.cart-item-remove{font-size:12px;color:#ef4444;cursor:pointer;border:none;background:none;padding:0}
.cart-item-qty{display:flex;align-items:center;gap:6px}
.cart-item-qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--fg)}
.cart-item-qty span{font-size:14px;font-weight:600;min-width:20px;text-align:center}
.cart-footer{border-top:1px solid var(--border);padding:20px 24px}
.cart-total{display:flex;justify-content:space-between;font-size:18px;font-weight:700;margin-bottom:16px}
.checkout-btn{width:100%;height:44px;border-radius:12px;background:var(--primary);color:var(--primary-fg);font-size:15px;font-weight:700;border:none;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.checkout-btn:hover{background:var(--primary-hover)}
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;display:flex;align-items:center;justify-content:center}
.checkout-overlay.open{opacity:1;pointer-events:auto}
.checkout-modal{background:var(--bg);border-radius:20px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;padding:12px 14px;box-shadow:var(--shadow-2xl)}
.checkout-modal h2{font-size:18px;font-weight:700;margin-bottom:4px}
.checkout-modal .form-group{margin-bottom:5px}
.checkout-modal .form-group label{display:block;font-size:11px;font-weight:600;margin-bottom:2px;color:var(--fg)}
.checkout-modal .form-group input,.checkout-modal .form-group select{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--fg);box-sizing:border-box}
.checkout-modal .checkout-btn{margin-top:4px}
.checkout-cancel{margin-top:4px;width:100%;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--fg);font-size:12px;font-weight:600;cursor:pointer}
.payment-methods{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.pm-option{display:flex!important;align-items:center;justify-content:center;text-align:center;padding:6px 4px;border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:.2s;flex:1;min-width:55px;min-height:36px;box-sizing:border-box}
.pm-option:hover{border-color:var(--primary);background:var(--primary-04)}
.pm-option.selected{border-color:var(--primary);background:var(--primary-04);box-shadow:0 0 0 1px var(--primary)}
.pm-option input[type=radio]{display:none}
.pm-option .pm-label{font-weight:700;font-size:13px;color:var(--fg);letter-spacing:.2px}
.order-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-200%);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 28px;box-shadow:var(--shadow-xl);z-index:400;transition:transform .4s,opacity .4s;max-width:480px;width:90%;text-align:center;opacity:0;pointer-events:none}
.order-toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.order-toast h3{font-size:18px;font-weight:700;margin-bottom:8px}
.order-toast p{font-size:14px;color:var(--muted)}

/* Language switcher */
.cp-lang-switcher{position:relative;display:flex;align-items:center}
.cp-lang-btn{display:flex;align-items:center;padding:4px 8px;border-radius:8px;border:2px solid var(--border);background:var(--bg-sec);cursor:pointer;transition:.2s}
.cp-lang-btn:hover{border-color:var(--primary);transform:scale(1.06)}
.cp-lang-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:200}
.cp-lang-dropdown.open{display:block}
.cp-lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;font-size:14px;font-weight:500;color:var(--fg-sec);cursor:pointer;transition:.15s;border:none;background:none;text-align:left}
.cp-lang-opt:hover{background:var(--bg-sec);color:var(--primary)}
.cp-lang-opt.active{color:var(--primary);font-weight:700;background:var(--primary-04)}

/* ===== Flash Sale Coupons ===== */
:root{--fs-ink:#2a2012;--fs-bg:#fff8ec;--fs-paper:#fffdf8;--fs-honey:#ffc53d;--fs-honey-deep:#eda600;--fs-leaf:#28a56b;--fs-leaf-deep:#1c7a4f;--fs-line:#efe3cf;--fs-muted:#9a8a6a;--fs-flame:#ff5a2c}
.fs-wrap{padding:44px 0;background:radial-gradient(90% 60% at 50% -5%,#fff0c6 0%,rgba(255,240,198,0) 60%),var(--fs-bg);border-radius:24px;margin:28px 0}
.fs-head{text-align:center;margin-bottom:26px;padding:0 20px;font-family:'Bricolage Grotesque',sans-serif}
.fs-badge{display:inline-flex;align-items:center;gap:9px;background:var(--fs-flame);color:#fff;font-family:'Space Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.16em;padding:9px 16px;border-radius:999px;text-transform:uppercase;box-shadow:0 0 22px rgba(255,90,44,.5)}
.fs-badge .fs-pulse{width:8px;height:8px;border-radius:50%;background:#fff;animation:fsPulse 1.4s infinite}
@keyframes fsPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.fs-head h2{font-size:clamp(28px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;margin-top:16px;line-height:1.02;color:var(--fs-ink)}
.fs-head h2 .fs-u{background:var(--fs-honey);color:var(--fs-ink);padding:.02em .16em;border-radius:8px;display:inline-block;transform:rotate(-1.6deg);box-shadow:0 6px 0 -1px rgba(237,166,0,.5)}
.fs-count{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--fs-ink);border-radius:14px;padding:10px 14px}
.fs-count .fs-seg{color:#fff;text-align:center;min-width:34px}
.fs-count .fs-seg b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.fs-count .fs-seg span{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--fs-honey);margin-top:3px}
.fs-count .fs-c{color:var(--fs-honey);font-weight:800}
.fs-marquee{overflow:hidden;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.fs-track{display:flex;width:max-content;animation:fsScroll var(--fs-speed,42s) linear infinite}
.fs-marquee:hover .fs-track{animation-play-state:paused}
.fs-set{display:flex;gap:20px;margin-right:20px}
@keyframes fsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fs-ticket{flex:0 0 460px;width:460px;position:relative;display:flex;background:var(--fs-paper);border:1px solid var(--fs-line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(120,90,0,.55);font-family:'Bricolage Grotesque',sans-serif}
.fs-stub{flex:0 0 38%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;position:relative;padding:28px 16px;background:linear-gradient(165deg,#ffd45f 0%,var(--fs-honey) 45%,#eda600 100%)}
.fs-stub .fs-pct{font-size:clamp(46px,12vw,58px);font-weight:800;line-height:.9;letter-spacing:-.04em}
.fs-stub .fs-off{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.32em;padding-left:.32em;color:rgba(255,255,255,.85);margin-top:4px}
.fs-stub .fs-lvl{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.2);border-radius:999px;padding:4px 11px;white-space:nowrap}
.fs-perf{position:absolute;top:0;bottom:0;left:38%;border-left:2px dashed rgba(42,32,18,.22)}
.fs-perf::before,.fs-perf::after{content:"";position:absolute;left:-10px;width:18px;height:18px;border-radius:50%;background:var(--fs-bg)}
.fs-perf::before{top:-9px}.fs-perf::after{bottom:-9px}
.fs-main{flex:1;padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fs-tag{align-self:flex-start;font-size:11px;font-weight:700;color:var(--fs-honey);background:var(--fs-ink);font-family:'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 11px}
.fs-main h4{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--fs-ink);margin-top:4px}
.fs-csub{color:#5c4f37;font-size:13px;margin-top:2px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fs-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;font-weight:600;color:#6b5d40;margin-top:6px}
.fs-meta span{display:inline-flex;align-items:center;gap:5px}
.fs-prices{margin-top:auto;padding-top:12px;border-top:1px solid var(--fs-line)}
.fs-was{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.fs-prices .fs-old{font-size:18px;font-weight:600;color:var(--fs-muted);text-decoration:line-through;text-decoration-color:#ef4a1f;text-decoration-thickness:2px}
.fs-discpill{font-size:13px;font-weight:800;color:#fff;background:#ef4a1f;border-radius:999px;padding:4px 11px;border:none}
.fs-nowrow{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.fs-prices .fs-now{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--fs-ink)}
.fs-savepill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:#fff;background:#1c7a4f;border:none;border-radius:999px;padding:6px 13px}
.fs-choose{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a6c48;margin-top:10px}
.fs-opts{display:flex;gap:8px;margin-top:8px}
.fs-opt{flex:1;border:1.5px solid var(--fs-line);background:#fff;border-radius:12px;padding:9px 6px;cursor:pointer;text-align:center;font-family:inherit;transition:border-color .15s,background .15s,box-shadow .15s}
.fs-opt .fs-od{display:block;font-weight:800;font-size:14px;color:var(--fs-ink)}
.fs-opt .fs-op{display:block;font-size:12px;color:var(--fs-muted);margin-top:2px;font-weight:700}
.fs-opt:hover{border-color:#dccba4}
.fs-opt.active{border-color:#eda600;background:#fff2bf;box-shadow:0 0 0 3px #fff2bf}
.fs-opt.active .fs-op{color:#6b5320}
.fs-redeem{margin-top:14px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--fs-honey);color:var(--fs-ink);border:none;border-radius:999px;padding:14px;font-family:inherit;font-weight:800;font-size:15px;box-shadow:0 7px 0 -1px rgba(237,166,0,.4);cursor:pointer;text-decoration:none;transition:transform .1s,filter .15s}
.fs-redeem:hover{filter:brightness(.98)}.fs-redeem:active{transform:translateY(1px)}
.s-peach{background:linear-gradient(160deg,#ff9f45,#f2791b)}
.s-green{background:linear-gradient(160deg,#56c172,#2f9b54)}
.s-teal{background:linear-gradient(160deg,#3fbfa8,#1f9c87)}
.s-blue{background:linear-gradient(160deg,#5a9bef,#2f6fd0)}
.s-pink{background:linear-gradient(160deg,#f2667f,#d83a58)}
@media(max-width:600px){.fs-ticket{flex:0 0 340px;width:340px;flex-direction:column}.fs-stub{flex-basis:auto;flex-direction:row;justify-content:center;gap:14px;padding:18px}.fs-stub .fs-lvl{position:static;transform:none}.fs-stub .fs-pct{font-size:44px}.fs-stub .fs-off{align-self:center}.fs-perf{display:none}.fs-prices .fs-now{font-size:32px}}
@media(prefers-reduced-motion:reduce){.fs-track{animation:none}.fs-badge .fs-pulse{animation:none}.fs-marquee{overflow-x:auto}}
/* Currency switcher */
.cur-switcher{position:relative;display:flex;align-items:center}
.cur-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;border:2px solid var(--border);background:var(--bg-sec);cursor:pointer;transition:.2s;white-space:nowrap;font-size:13px;font-weight:700;font-family:inherit;color:var(--fg)}
.cur-btn:hover{border-color:var(--primary);transform:scale(1.06)}
.cur-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:140px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden;z-index:100}
.cur-dropdown.open{display:block}
.cur-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;font-size:14px;font-weight:500;color:var(--fg-sec);cursor:pointer;transition:.15s;border:none;background:none;text-align:left;font-family:inherit}
.cur-option:hover{background:var(--bg-sec);color:var(--primary)}
.cur-option.active{color:var(--primary);font-weight:700;background:var(--primary-04)}
