/* app/globals.css */
:root{--bg:#171717;--surface:#202020;--surface-soft:#1b1b1b;--emerald:#b9ff38;--lime:#b9ff38;--text:#f5f5f3;--muted:#a3a5a1;--border:#353735;--max:1280px;--font:Arial,Helvetica,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}button:disabled{cursor:not-allowed;opacity:.45}a:hover{color:var(--lime)}:focus-visible{outline:2px solid var(--lime);outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.08;letter-spacing:-.045em}h1{font-size:clamp(40px,5.4vw,76px);font-weight:700;margin-bottom:22px}h2{font-size:clamp(27px,3vw,40px);margin-bottom:20px}h3{font-size:19px;letter-spacing:-.025em}p{color:var(--muted)}.container{max-width:var(--max);width:calc(100% - 96px);margin-inline:auto}.page{padding-block:80px 100px;min-height:60vh}.narrow{max-width:880px}.eyebrow{font-size:11px;line-height:1.6;letter-spacing:.25em;text-transform:uppercase;margin-bottom:22px;color:var(--muted)}.lead{font-size:19px;max-width:680px;margin-bottom:48px;line-height:1.7}.text-link{display:inline-flex;align-items:center;gap:14px;color:var(--lime);font-size:14px;line-height:1.5;border:0;background:transparent;padding:0;white-space:normal}.text-link:hover{color:#d9ff9b}.muted,.muted-link{color:var(--muted)}.muted-link{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:4px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;background:var(--lime);border:1px solid var(--lime);color:#151a0d;padding:12px 24px;border-radius:4px;font-size:14px;font-weight:700;transition:background .18s,transform .18s}.button:hover{background:#d1ff7b;color:#151a0d;transform:translateY(-1px)}.button.secondary{background:transparent;border-color:var(--border);color:var(--text);font-weight:400}.button.secondary:hover{border-color:var(--lime);color:var(--text)}.button.small{min-height:40px;padding:8px 17px;font-size:13px}.button.full{display:flex;width:100%;margin-top:14px}.inline-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:26px}.fine-print{font-size:12px;line-height:1.8;color:var(--muted);margin-top:20px}.notice{border:1px solid var(--border);border-left:2px solid var(--lime);padding:15px 18px;border-radius:3px;color:var(--muted);font-size:14px;margin-block:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:absolute;top:-80px;left:20px;z-index:200;background:var(--lime);color:#111;padding:10px}.skip-link:focus{top:12px}
.demo-banner{font-size:11px;text-align:center;padding:6px 20px;background:#202b1b;color:#d6f79e;letter-spacing:.02em}.header{border-bottom:1px solid var(--border);background:var(--bg);position:relative;z-index:30}.header-inner{height:90px;width:calc(100% - 96px);max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:35px}.wordmark{display:flex;gap:8px;align-items:center;font-size:23px;letter-spacing:.045em;white-space:nowrap;line-height:1}.wordmark b{font-weight:800;letter-spacing:-.04em}.wordmark span{font-size:19px;letter-spacing:.15em;font-weight:300;color:#ccc}.nav{display:flex;gap:30px;font-size:12px;height:100%;align-items:center}.nav a{position:relative;padding:12px 0}.nav a.active:after{content:'';height:2px;width:24px;background:var(--lime);position:absolute;bottom:4px;left:0}.header-actions{display:flex;align-items:center;gap:18px}.account-link{display:flex;gap:9px;align-items:center;font-size:11px;white-space:nowrap;border:1px solid var(--border);padding:8px 12px;border-radius:4px}.account-link svg{color:var(--lime)}.cart-link{display:flex;gap:10px;align-items:center}.cart-link span{border-radius:50%;background:var(--lime);font-size:10px;color:#121808;display:grid;place-items:center;width:18px;height:18px;font-weight:700}.icon-button{color:var(--text);display:grid;place-items:center;padding:4px;border:0;background:none}.menu-button{display:none}
.hero{text-align:center;padding-top:76px;overflow:hidden}.hero .eyebrow{font-size:10px;letter-spacing:.3em;margin-bottom:20px}.hero h1{font-size:clamp(38px,4.7vw,68px);letter-spacing:-.055em;margin-bottom:18px}.hero h1 span{font-weight:400}.hero-copy{font-size:17px;line-height:1.6;margin-bottom:28px}.hero .button{position:relative;z-index:2}.hero-showcase{margin:10px -20px 0;height:clamp(310px,43vw,570px);overflow:hidden;position:relative}.hero-showcase img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}.hero-showcase:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--bg),transparent 15%,transparent 84%,var(--bg))}
.collection{padding-block:22px 64px}.collection-header{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px;gap:25px}.collection-header h2{font-size:32px;margin-bottom:0}.collection-header .eyebrow{margin-bottom:12px}.category-tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);white-space:nowrap;overflow:auto;scrollbar-width:thin;margin-bottom:26px;padding-bottom:0;font-size:12px}.category-tabs a{padding:16px 0;position:relative}.category-tabs .selected{color:var(--text)}.category-tabs .selected:after{content:'';background:var(--lime);height:2px;width:30px;position:absolute;bottom:0;left:0}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}.product-image-link{display:block;overflow:hidden;background:var(--surface)}.product-image{position:relative;aspect-ratio:4/5;background:var(--surface);overflow:hidden}.product-image img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.product-image.demo-crop img{position:absolute;height:100%;width:300%;max-width:none;object-fit:cover;left:0;object-position:center}.product-image.position-1 img{left:-100%}.product-image.position-2 img{left:-200%}.product-image-link:hover .product-image:not(.demo-crop) img{transform:scale(1.035)}.card-meta{display:flex;gap:8px;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:17px;letter-spacing:.06em}.card-meta strong{color:var(--text);font-weight:400;letter-spacing:0}.product-card h3{font-size:16px;margin:9px 0 6px;letter-spacing:-.015em}.product-card p{font-size:12px;margin-bottom:18px;line-height:1.5}.product-card .text-link{font-size:12px;gap:18px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:35px;margin-bottom:56px;gap:30px}.benefits>div{display:grid;grid-template-columns:24px 1fr;column-gap:16px}.benefits svg{grid-row:span 2;color:var(--lime);margin-top:3px}.benefits h3{font-size:15px;margin-bottom:8px;letter-spacing:-.01em}.benefits p{font-size:12px;margin:0}.custom-strip{display:grid;grid-template-columns:1fr 1.3fr auto;gap:30px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:48px}.custom-strip h2{font-size:32px;font-weight:400;margin:0}.custom-strip .eyebrow{font-size:9px;margin-bottom:10px}.custom-strip p{margin:0;font-size:14px}.editorial{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;padding-block:76px}.editorial p{font-size:17px;line-height:1.8}.editorial .eyebrow{font-size:10px}.editorial h2{font-weight:400;font-size:40px}
.catalog-controls{display:flex;gap:14px;align-items:center;margin-bottom:22px;margin-top:40px;flex-wrap:wrap}.search-field{display:flex;flex:1;min-width:240px;align-items:center;gap:14px;border-bottom:1px solid var(--border);padding:7px 0}.search-field input{background:none;border:0;width:100%;padding:10px 0;color:var(--text);font-size:14px;min-width:0}.search-field .text-link{font-size:12px}.field{display:block;font-size:13px;color:var(--muted)}.field input,select{display:block;border:1px solid var(--border);border-radius:3px;background:var(--surface);color:var(--text);padding:10px 12px;width:100%;margin-top:8px}.field.inline select{margin:0;width:auto}.results-line{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:0 0 26px}.pagination{display:flex;justify-content:center;align-items:center;gap:24px;padding-top:55px;color:var(--muted);font-size:13px}.category-description{max-width:800px}.empty{text-align:center;padding:80px 20px;max-width:760px;margin:auto}.empty>svg{margin:0 auto 28px;color:var(--lime)}.empty h1{font-size:48px}.empty p{max-width:600px;margin-inline:auto}.empty .inline-links{justify-content:center}.empty .muted-link{display:block;margin:20px auto}
.breadcrumbs{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:35px}.product-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}.product-image.large{aspect-ratio:4/5}.product-info h1{font-size:clamp(36px,4vw,54px)}.product-info .eyebrow{color:var(--lime)}.product-price{font-size:26px;color:var(--text);margin-bottom:22px}.product-facts{display:flex;gap:24px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border);padding-bottom:24px;margin-bottom:24px}.buy-panel{margin-bottom:35px}.check-row{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px}.check-row input{accent-color:var(--lime);width:17px;height:17px}.buy-panel .field{margin-bottom:20px}details{border-top:1px solid var(--border);padding:20px 0}summary{cursor:pointer;list-style:none;position:relative;padding-right:24px;font-size:15px}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:0;color:var(--lime)}details[open] summary:after{content:'−'}details p{font-size:14px;margin:16px 0}.prose{font-size:14px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}.prose p:first-child{margin-top:22px}.prose h2,.prose h3,.prose h4{font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--text);margin-top:28px}.prose table{display:block;overflow:auto;max-width:100%;border-collapse:collapse}.prose td,.prose th{padding:10px;border:1px solid var(--border)}.prose pre{white-space:pre-wrap}.media-list{display:flex;gap:15px;flex-wrap:wrap;padding-top:20px}.media-list img{width:calc(50% - 8px);height:auto;object-fit:contain;background:var(--surface)}.related{margin-top:80px}.related h2{font-size:30px;margin-bottom:30px}
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:65px;margin-top:45px}.cart-item{display:grid;grid-template-columns:100px 1fr auto;gap:24px;padding:25px 0;border-top:1px solid var(--border);align-items:start}.cart-item img{width:100px;height:125px;object-fit:contain;background:var(--surface)}.cart-item h2{font-size:19px;margin:7px 0}.cart-item p{font-size:12px;margin:0 0 9px}.cart-item strong{font-size:15px;margin-top:8px}.quantity-label{display:flex;align-items:center;gap:15px;font-size:12px;margin-bottom:10px;color:var(--muted)}.quantity-label input{width:65px;padding:3px 5px;background:var(--surface);border:1px solid var(--border);color:var(--text)}.cart-summary{background:var(--surface-soft);border:1px solid var(--border);padding:30px;align-self:start}.cart-summary h2{font-size:26px}.cart-summary .eyebrow{font-size:10px}.summary-line{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin:14px 0;color:var(--muted)}.summary-line strong{color:var(--text);font-weight:400}.summary-line.total{border-top:1px solid var(--border);padding-top:20px;font-size:20px}.coupon-form{display:flex;gap:10px;margin-block:25px}.coupon-form input{background:none;border:1px solid var(--border);border-radius:3px;min-width:0;flex:1;padding:10px;color:var(--text);font-size:12px}.info-page .info-body{margin-top:55px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:40px 0 50px}.steps span{font-size:12px;color:var(--lime)}.steps h2{font-size:24px;margin-top:23px}.steps p{font-size:14px;line-height:1.8}.faq-list{max-width:900px;margin-bottom:35px}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.support-grid section{border-top:1px solid var(--border);padding-top:25px}.support-grid h2{font-size:30px}.support-grid p{max-width:470px}.policy-links{display:flex;flex-direction:column;max-width:800px;margin-bottom:40px}.policy-links a{padding:20px 0;border-top:1px solid var(--border);font-size:20px}.info-body>p{max-width:850px}
.footer{padding-top:35px;border-top:1px solid var(--border);padding-bottom:28px}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:38px}.footer-top p{font-size:12px;margin:0}.footer-top nav{display:flex;gap:22px;color:var(--muted);font-size:12px}.footer .wordmark{font-size:17px}.footer .wordmark span{font-size:13px}.footer-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.disclaimer{font-size:10px;margin-top:18px;margin-bottom:0;max-width:800px}.toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,20px);z-index:100;background:#192215;border:1px solid var(--lime);padding:15px 24px;max-width:calc(100% - 30px);min-width:260px;color:var(--text);font-size:13px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 20px rgba(185,255,56,.2)}.toast.visible{opacity:1;transform:translate(-50%,0)}.consent{position:fixed;bottom:20px;left:20px;right:20px;max-width:min(880px,calc(100vw - 24px));box-sizing:border-box;margin:auto;z-index:90;display:flex;gap:18px;align-items:center;background:#242724;border:1px solid #414b42;padding:20px;box-shadow:0 8px 40px #0007;border-radius:4px}.consent>div{flex:1;min-width:0;max-width:100%}.consent strong{font-size:14px}.consent p{font-size:12px;line-height:1.6;margin:5px 0 0}.privacy-control{border:0;background:none;color:var(--muted);font-size:10px;display:block;margin:0 auto 20px;text-decoration:underline}.skeleton{background:linear-gradient(90deg,#222,#2d2d2d,#222);background-size:200%;animation:loading 1.5s infinite;border-radius:3px}.skeleton.title{height:70px;width:60%;margin-bottom:60px}.skeleton.card{height:400px}@keyframes loading{to{background-position:-200%}}
@media(min-width:1600px){.hero-showcase{height:600px}}
@media(max-width:1100px){.container,.header-inner{width:calc(100% - 56px)}.header-inner{gap:20px;height:78px}.nav{gap:18px}.header-actions{gap:12px}.wordmark{font-size:21px}.wordmark span{font-size:16px}.product-grid{gap:20px}.product-layout{gap:40px}.cart-layout{gap:35px}.footer-top p{display:none}}
@media(max-width:800px){.account-link span{display:none}.account-link{border:0;padding:5px}.account-link svg{width:19px;height:19px}.hero{padding-top:55px}.hero h1{font-size:44px}.hero-copy{font-size:16px}.hero-showcase{height:360px;margin-inline:-28px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.collection-header h2{font-size:27px}.collection-header .text-link{font-size:11px}.custom-strip{grid-template-columns:1fr 1fr}.custom-strip .text-link{grid-column:1/-1}.editorial{gap:35px}.product-layout{grid-template-columns:1fr;gap:40px}.product-image.large{aspect-ratio:1/1;max-height:650px}.product-info h1{font-size:45px}.cart-layout{grid-template-columns:1fr}.cart-summary{max-width:620px;width:100%}.steps{grid-template-columns:1fr;gap:20px}.steps>div{border-top:1px solid var(--border);padding-top:20px}.steps h2{margin-top:12px}.support-grid{gap:35px}.footer-top{flex-wrap:wrap}.consent{flex-wrap:wrap}.consent>div{flex-basis:100%}.page{padding-block:55px 75px}}
@media(max-width:500px){.container,.header-inner{width:calc(100% - 36px)}.header-inner{height:72px;gap:10px}.wordmark{font-size:19px;gap:6px}.wordmark span{font-size:13px;letter-spacing:.11em}.header-actions{gap:12px}.cart-link{gap:5px}.cart-link svg{width:19px}.demo-banner{font-size:9px;padding:5px 15px}.hero h1{font-size:36px;line-height:1.12}.hero h1 span{display:block}.hero .eyebrow{font-size:8px;letter-spacing:.22em}.hero-copy{font-size:14px}.hero-showcase{height:290px;margin-inline:-18px}.hero-showcase img{object-fit:cover;object-position:50% 50%}.collection{padding-top:20px}.collection-header{align-items:flex-start;flex-direction:column;gap:15px}.collection-header h2{font-size:27px}.category-tabs{gap:23px;font-size:11px}.product-grid{gap:14px;row-gap:35px}.product-card h3{font-size:15px}.card-meta{font-size:9px;flex-wrap:wrap;gap:5px}.product-card p{font-size:10px}.product-card .text-link{font-size:11px;gap:8px}.benefits{grid-template-columns:1fr;gap:25px;padding-block:30px;margin-bottom:35px}.custom-strip{grid-template-columns:1fr;gap:20px;padding-bottom:35px}.custom-strip h2{font-size:30px}.editorial{grid-template-columns:1fr;gap:12px;padding-block:45px}.editorial h2{font-size:32px}.editorial p{font-size:15px}.catalog-controls{gap:12px}.search-field{flex-basis:100%}.field.inline{flex:1}.field.inline select{width:100%;font-size:12px}.product-facts{flex-wrap:wrap;gap:12px}.product-info h1{font-size:36px}.cart-item{grid-template-columns:70px 1fr auto;gap:14px}.cart-item img{width:70px;height:100px}.cart-item h2{font-size:16px}.cart-item strong{font-size:12px}.cart-summary{padding:23px}.support-grid{grid-template-columns:1fr}.footer-top{gap:25px;margin-bottom:28px}.footer-top nav{gap:20px;font-size:11px}.footer-bottom{font-size:10px}.empty{padding:55px 0}.empty h1{font-size:34px}.toast{bottom:20px;font-size:12px}.consent{left:12px;right:12px;bottom:12px;padding:16px}.lead{font-size:16px}.page h1{font-size:40px}.info-page .info-body{margin-top:35px}.product-page h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* ===== v2 design layer ===== */
:root{--radius:14px;--radius-lg:20px;--border-strong:#464946;--lime-soft:rgba(185,255,56,.14);--emerald-soft:rgba(185,255,56,.14);--shadow-glow:0 18px 44px -26px rgba(185,255,56,.35);--ease:cubic-bezier(.22,1,.36,1);--font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
::selection{background:var(--lime);color:#121808}
.sticky-header-stack{position:sticky;top:0;z-index:100;width:100%}
.promo-bar{background:linear-gradient(90deg,#abfa27 0%,#b9ff38 50%,#abfa27 100%);color:#10150b;font-size:13.5px;font-weight:600;padding:10px 22px;letter-spacing:.012em;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(0,0,0,.15);box-shadow:0 4px 18px -4px rgba(185,255,56,.4);transition:all .2s ease;position:relative;z-index:2}
.promo-bar-content{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;line-height:1.45;text-align:center}
.promo-bar-sparkle{color:#10150b;display:inline-flex;align-items:center}
.promo-bar-main-text{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.promo-code-pill{display:inline-flex;align-items:center;gap:8px;background:#ffffff;color:#273d1e;border:1px solid rgba(0,0,0,.10);border-radius:7px;padding:3.5px 10px 3.5px 12px;margin-inline:3px;cursor:pointer;transition:all .18s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.08);font-family:inherit}
.promo-code-pill:hover{background:#f7faf4;border-color:rgba(39,61,30,.3);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.promo-code-pill.copied{background:#273d1e;border-color:#273d1e;color:#b9ff38}
.promo-code-val{font-family:var(--font-head);font-size:13.5px;font-weight:900;letter-spacing:.08em;color:inherit;line-height:1}
.promo-copy-icon-wrap{display:inline-flex;align-items:center;justify-content:center;margin-left:3px;padding-left:8px;border-left:1px solid rgba(39,61,30,.22);color:inherit;opacity:.9;transition:all .15s ease}
.promo-code-pill:hover .promo-copy-icon-wrap{opacity:1;transform:scale(1.12)}
.promo-code-pill.copied .promo-copy-icon-wrap{border-left-color:rgba(185,255,56,.3);color:#b9ff38}
.promo-discount-num{font-weight:900;color:#060903;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.promo-sub-btn{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-head);font-weight:850;color:#0a0e05;text-decoration:none;border-bottom:1.5px solid #0a0e05;padding-bottom:1px;transition:all .15s ease;font-size:13.5px}
.promo-sub-btn:hover{color:#000;border-bottom-color:#000;transform:translateX(2px)}
.promo-arrow-icon{color:#0a0e05;transition:transform .15s ease}
.promo-sub-btn:hover .promo-arrow-icon{transform:translateX(3px)}
.header{position:relative;background:rgba(23,23,23,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--border)}
.header-inner{height:72px}
.nav a{border-radius:10px;padding:8px 12px;color:var(--muted);transition:color .15s,background .15s;font-size:13px}.nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}.nav a.active{color:var(--lime)}.nav a.active:after{display:none}
.search-pill{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:12px;padding:9px 14px;font-size:12px;min-width:170px;transition:border-color .15s}.search-pill:hover{border-color:var(--lime);color:var(--text)}
.account-link{border-radius:12px;background:var(--surface);transition:border-color .15s}.account-link:hover{border-color:var(--lime);color:var(--text)}.account-link.connected{border-color:rgba(185,255,56,.5)}.account-link .dot{width:7px;height:7px;border-radius:50%;background:#7a7d79}.account-link .dot.ok{background:var(--lime);box-shadow:none}
.cart-link{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:8px 12px;transition:border-color .15s}.cart-link:hover{border-color:var(--lime);color:var(--text)}.cart-link span{background:var(--lime);color:#121808;font-weight:700}
.button{border-radius:12px;box-shadow:none;transition:background .18s,transform .18s var(--ease)}.button:hover{box-shadow:none}.button.secondary{box-shadow:none;background:rgba(255,255,255,.03)}.button.secondary:hover{border-color:var(--lime);background:var(--lime-soft)}.button svg{flex:none}.button{gap:10px}.button.full{gap:10px}
.eyebrow{color:var(--lime);font-weight:600}
h1,h2,h3{letter-spacing:-.035em}
/* hero */
.hero2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center;padding-block:64px 34px}
.pill-label{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:22px}.pill-label i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.hero2 h1{font-size:clamp(40px,5vw,68px);letter-spacing:-.045em;margin-bottom:18px}.hero2 h1 span{color:var(--lime)}
.hero2 .hero-copy{font-size:16px;max-width:520px;margin-bottom:0}
.hero2-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.trust{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:30px 0 0}.trust li{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border:1px solid var(--border);background:rgba(255,255,255,.02);padding:7px 12px;border-radius:999px}.trust svg{color:var(--lime)}
.hero2-panel{border:1px solid rgba(185,255,56,.4);border-radius:24px;background:radial-gradient(120% 90% at 50% 0,#202c1e,#171a18 70%);box-shadow:0 0 90px -34px rgba(185,255,56,.25),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.hero2-panel img{width:100%;height:auto;display:block}
/* collection + chips */
.collection{padding-block:36px 64px}
.collection-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px}
.collection-header .eyebrow{margin-bottom:6px;letter-spacing:.22em;font-weight:700}
.collection-header h2{font-size:clamp(28px,3.2vw,36px);font-weight:900;letter-spacing:-.03em;margin:0;text-transform:uppercase}
.collection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.collection-view-all-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.03);color:var(--text);
  border:1px solid rgba(185,255,56,.35);padding:10px 22px;
  border-radius:999px;font-family:var(--font-head);
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  transition:all .2s var(--ease);box-shadow:none;white-space:nowrap;flex-shrink:0;}
.collection-view-all-btn:hover{
  background:var(--lime);color:#10140c;border-color:var(--lime);
  transform:translateY(-1px);box-shadow:none;
}
.collection-view-all-btn svg{transition:transform .2s ease}
.collection-view-all-btn:hover svg{transform:translateX(3px)}
@media(max-width:1200px){.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:768px){.collection-header{flex-direction:column;align-items:flex-start;gap:14px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:768px){.collection-grid>:nth-child(n+5){display:none}}
/* ===== Product Collection Section & Page Width (Aligned with Footer Baseline) ===== */
.collection-page,
.collection,
.subscriptions-page {
  max-width: var(--max);
  width: calc(100% - 96px);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .collection-page,
  .collection,
  .subscriptions-page {
    width: calc(100% - 56px);
  }
}
@media (max-width: 500px) {
  .collection-page,
  .collection,
  .subscriptions-page {
    width: calc(100% - 36px);
  }
}

/* Explicit alignment for all catalog components matching footer left edge */
.catalog-wrapper,
.catalog-toolbar,
.catalog-tags-section,
.catalog-meta-line,
.catalog-grid,
.product-grid.catalog-grid,
.collection-grid {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  box-sizing: border-box;
}

/* Category Tabs */
.category-tabs {
  border-bottom: 0;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 22px;
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.category-tabs::-webkit-scrollbar {
  display: none;
}
.category-tabs a {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.category-tabs a:hover {
  color: var(--text);
  border-color: rgba(185, 255, 56, 0.4);
}
.category-tabs .selected {
  background: var(--lime-soft);
  border-color: rgba(185, 255, 56, 0.55);
  color: var(--lime);
}
.category-tabs .selected:after {
  display: none;
}


/* app/styles/01-catalog.css */
/* ===== Catalog Toolbar ===== */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(26, 29, 26, 0.95);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}
.catalog-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 20, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0 8px 0 12px;
  flex: 1 1 280px;
  min-width: 220px;
  height: 42px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.catalog-search-wrap:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(185, 255, 56, 0.2);
}
.catalog-search-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.catalog-search-wrap input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
  height: 100%;
  padding: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.catalog-search-wrap input::-webkit-search-decoration,
.catalog-search-wrap input::-webkit-search-cancel-button,
.catalog-search-wrap input::-webkit-search-results-button,
.catalog-search-wrap input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}
.catalog-search-wrap input::-ms-clear,
.catalog-search-wrap input::-ms-reveal {
  display: none !important;
  width: 0;
  height: 0;
}
.catalog-search-wrap input::placeholder {
  color: #727672;
}
.catalog-search-clear-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: opacity 0.15s var(--ease), color 0.15s, background 0.15s;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.catalog-search-clear-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.catalog-search-clear-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.catalog-controls-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
}

.catalog-fixed-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.25);
  color: var(--lime);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 40px;
  box-sizing: border-box;
}

/* Universal Breadcrumbs Component */
.breadcrumbs {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  position: relative;
  z-index: 5;
}
.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumbs-link:hover {
  color: var(--lime);
}
.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
  font-size: 11px;
}
.breadcrumbs-current {
  color: #e5e7eb;
  font-weight: 600;
}

/* Subscriptions Page Editorial & Benefits Block */
.subs-hero-split {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 32px;
  align-items: center;
  margin-bottom: 42px;
  padding-top: 6px;
}
.subs-hero-content {
  min-width: 0;
}
/* Scripts reuse the collection hero without the subscription card column */
.subs-hero-split.scripts-hero {
  grid-template-columns: minmax(0, 1fr);
}
.subs-hero-content h1 {
  margin-bottom: 18px;
}
.subs-editorial-wrap {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 720px;
}
.subs-editorial-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #e2e8f0;
  margin-bottom: 14px;
}
.subs-editorial-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 0;
}
.subs-editorial-body strong {
  color: var(--text);
  font-weight: 600;
}
.subs-editorial-info {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.subs-editorial-info > svg {
  margin-top: 3px;
  color: var(--lime);
}

@keyframes borderBeamRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* VIP Membership Pass Card with Smooth Animated Rotating Border Beam */
.subs-vip-card {
  position: relative;
  border-radius: 18px;
  padding: 2px;
  background: rgba(185, 255, 56, 0.12);
  overflow: hidden;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.85), 0 0 35px -10px rgba(185, 255, 56, 0.18);
  box-sizing: border-box;
  width: 100%;
}
.mobile-subscription-promo {
  display: none;
}
.subs-vip-card-beam {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 55deg,
    rgba(185, 255, 56, 0.15) 70deg,
    rgba(185, 255, 56, 0.85) 84deg,
    #ffffff 90deg,
    rgba(185, 255, 56, 0.85) 96deg,
    rgba(185, 255, 56, 0.15) 110deg,
    transparent 125deg,
    transparent 360deg
  );
  animation: borderBeamRotate 4.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.subs-vip-card-body {
  position: relative;
  z-index: 2;
  background: linear-gradient(160deg, rgba(24, 28, 24, 0.98) 0%, rgba(13, 15, 13, 0.99) 100%);
  border-radius: 16px;
  padding: 26px 28px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.subs-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.subs-card-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subs-card-chip {
  color: var(--lime);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(185, 255, 56, 0.6);
}
.subs-card-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
}

/* Pricing Row with Emblem Badge */
.subs-vip-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}
.subs-vip-pricing {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0;
}
.subs-vip-starting {
  display: block;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 4px;
  white-space: nowrap;
}
.subs-vip-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
  white-space: nowrap;
}
.subs-vip-currency {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}
.subs-vip-amount {
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.subs-vip-period {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}
.subs-vip-billing {
  font-size: 11.5px;
  color: #8c928c;
  margin: 6px 0 0 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* Luxury VIP Emblem on the Right of Pricing */
.subs-vip-emblem {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subs-emblem-glow {
  position: absolute;
  inset: -6px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.3) 0%, transparent 70%);
  filter: blur(8px);
  border-radius: 50%;
  pointer-events: none;
}
.subs-emblem-badge {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 40, 34, 0.95), rgba(16, 20, 16, 0.98));
  border: 1px solid rgba(185, 255, 56, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.subs-emblem-badge svg {
  display: block;
  margin: auto;
}

.subs-card-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(185, 255, 56, 0.15), rgba(255, 255, 255, 0.03));
  margin: 16px 0;
}
.subs-card-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.subs-card-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #e2e8f0;
  line-height: 1.35;
}
.subs-card-checklist svg {
  color: var(--lime);
  flex-shrink: 0;
}
.subs-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subs-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--lime);
  color: #121808;
  padding: 12px 18px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: none;
  box-sizing: border-box;
}
.subs-card-btn:hover {
  background: #d1ff7b;
  color: #0c1204;
  transform: translateY(-2px);
  box-shadow: none;
}
.subs-card-guarantee {
  font-size: 10.5px;
  color: #727872;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Subscriptions Page 4-Column Landscape Grid */
.subscriptions-page .catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.subscriptions-page .pc-media {
  aspect-ratio: 16 / 10 !important;
  background: radial-gradient(circle at 50% 30%, #29302a, #131513 85%) !important;
}
.subscriptions-page .pc-media .product-image {
  aspect-ratio: auto !important;
  inset: 0 !important;
}
.subscriptions-page .pc-media img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1150px) {
  .subs-hero-split {
    grid-template-columns: 1fr 390px;
    gap: 24px;
  }
  .subscriptions-page .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 960px) {
  .subs-hero-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .subs-vip-card {
    max-width: 520px;
  }
}
@media (max-width: 580px) {
  .subscriptions-page .catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ===== Subscriptions FAQ Section ===== */
.subs-faq-section {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.subs-faq-header {
  margin-bottom: 24px;
}

.subs-faq-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 6px 0 0 0;
}

.subs-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.subs-faq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color .18s ease, background .18s ease;
  position: relative;
}

.subs-faq-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #252525;
}

.subs-faq-card[open] {
  border-color: rgba(255, 255, 255, 0.18);
  background: #232323;
}

.subs-faq-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  padding: 0;
}

.subs-faq-summary::-webkit-details-marker,
.subs-faq-summary::marker {
  display: none !important;
}

.subs-faq-question {
  font-size: 15px;
  font-weight: 750;
  color: #ffffff;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.subs-faq-summary:after {
  content: '+';
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s ease, color .18s ease;
}

.subs-faq-card[open] .subs-faq-summary:after {
  content: '×';
  font-size: 19px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

.subs-faq-card[open] .subs-faq-summary {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subs-faq-body {
  padding: 0;
}

.subs-faq-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: #a3a5a1;
  white-space: pre-line;
}

.subs-faq-body p + p {
  margin-top: 10px;
}

.subs-faq-link-row {
  margin-top: 14px;
  font-size: 13.5px;
  color: #a3a5a1;
  word-break: break-all;
}

.subs-faq-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.subs-faq-link:hover {
  color: #d1ff7b;
}

@media (max-width: 600px) {
  .subs-faq-section {
    margin-top: 48px;
    padding-top: 32px;
  }
  .subs-faq-card {
    padding: 16px 18px;
    border-radius: 10px;
  }
}

.catalog-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.catalog-dropdown-wrapper.is-open {
  z-index: 60;
}
.catalog-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 20, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 0 12px;
  height: 42px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  box-sizing: border-box;
  user-select: none;
  white-space: nowrap;
}
.catalog-dropdown-trigger:hover {
  border-color: rgba(185, 255, 56, 0.4);
  background: rgba(24, 28, 24, 0.98);
}
.catalog-dropdown-trigger:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.catalog-dropdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
}
.catalog-dropdown-value {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.catalog-dropdown-caret {
  color: var(--muted);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s;
  flex-shrink: 0;
  margin-left: 2px;
}
.catalog-dropdown-caret.open {
  transform: rotate(180deg);
  color: var(--lime);
}
.catalog-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 32px));
  background: rgba(18, 20, 18, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.75), 0 0 20px -8px rgba(185, 255, 56, 0.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  box-sizing: border-box;
  animation: catalogDropdownFadeIn 0.15s ease-out;
}
@keyframes catalogDropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.catalog-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c9ccc9;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.35;
}
.catalog-dropdown-item:hover,
.catalog-dropdown-item.focused {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.catalog-dropdown-item.active {
  background: var(--lime-soft);
  color: var(--lime);
  font-weight: 700;
}
.catalog-dropdown-item.active:hover,
.catalog-dropdown-item.active.focused {
  background: rgba(185, 255, 56, 0.16);
  color: var(--lime);
}
.dropdown-item-text {
  flex: 1;
}
.dropdown-item-check {
  color: var(--lime);
  flex-shrink: 0;
}

.catalog-reset-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.catalog-reset-btn:hover {
  color: #ff728f;
}
.catalog-reset-btn.active {
  background: rgba(255, 71, 114, 0.12);
  border: 1px solid rgba(255, 71, 114, 0.35);
  border-radius: 10px;
  color: #ff5277;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 0 14px;
}
.catalog-reset-btn.active:hover {
  background: rgba(255, 71, 114, 0.22);
  color: #ff728f;
  border-color: #ff5277;
}

/* ===== Catalog Tags Section (Placed directly below toolbar) ===== */
.catalog-tags-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 2px 0 4px;
  flex-wrap: wrap;
  min-height: 38px;
  box-sizing: border-box;
}
.catalog-tags-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.catalog-tags-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.catalog-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 29, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  user-select: none;
  min-height: 34px;
  box-sizing: border-box;
}
.catalog-tag-chip:hover {
  color: var(--text);
  border-color: rgba(185, 255, 56, 0.45);
  background: rgba(32, 36, 32, 0.95);
  transform: translateY(-1px);
}
.catalog-tag-chip.active {
  background: var(--lime-soft);
  border-color: rgba(185, 255, 56, 0.6);
  color: var(--lime);
  font-weight: 700;
  box-shadow: 0 0 14px -4px rgba(185, 255, 56, 0.35);
}
.catalog-tag-chip:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Compact, refined clear tag button */
.catalog-tag-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  user-select: none;
  min-height: 34px;
  box-sizing: border-box;
}
.catalog-tag-clear-btn:hover {
  background: rgba(255, 82, 119, 0.08);
  border-color: rgba(255, 82, 119, 0.35);
  color: #ff728f;
  transform: translateY(-1px);
}
.catalog-tag-clear-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.catalog-active-tags-summary {
  color: var(--lime);
  margin-left: 4px;
}

/* Meta line */
.catalog-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 2px 2px 14px;
  font-size: 12.5px;
  color: var(--muted);
  box-sizing: border-box;
}
.catalog-count-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 24px;
}
.catalog-count-number {
  color: var(--text);
  font-weight: 700;
}
.catalog-search-tag {
  color: var(--lime);
  margin-left: 4px;
  max-width: min(340px, 60vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.catalog-page-count {
  font-size: 12px;
  color: var(--muted);
}

/* ===== Product Collection Grid ===== */
.product-grid.catalog-grid,
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1279px) {
  .product-grid.catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 999px) {
  .product-grid.catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 679px) {
  .product-grid.catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 380px) {
  .product-grid.catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .collection-page .subs-hero-split > .subs-vip-card {
    display: none;
  }
  .mobile-subscription-promo {
    display: block;
    margin-top: 32px;
  }
  .mobile-subscription-promo .subs-vip-card {
    max-width: none;
  }
  .catalog-tags-section {
    flex-wrap: nowrap;
  }
  .catalog-tags-label {
    flex-shrink: 0;
  }
  .catalog-tags-list {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 8px;
  }
  .catalog-tag-chip,
  .catalog-tag-clear-btn {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
  }
  .product-grid.catalog-grid,
  .subscriptions-page .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .catalog-grid > .pc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Square product image everywhere */
.product-image {
  aspect-ratio: 1/1;
  border-radius: 0;
}
.product-image.large {
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.product-image img {
  object-fit: contain;
}

/* ===== Product Card ===== */
.pc {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
  position: relative;
  box-sizing: border-box;
}
.pc:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 255, 56, 0.45);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 0 18px -6px rgba(185, 255, 56, 0.2);
}
.pc-media-wrap {
  position: relative;
  width: 100%;
}
.pc-media {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 28%, #2b312d, #1b1c1b 75%);
  overflow: hidden;
}
.pc-media .product-image {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: transparent;
}
.pc:hover .product-image:not(.demo-crop) img {
  transform: scale(1.04);
}
.pc-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  max-width: calc(100% - 56px);
  pointer-events: none;
}
.pc-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(15, 17, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(185, 255, 56, 0.35);
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.pc-badge.new {
  background: var(--lime);
  color: #121808;
  border-color: var(--lime);
  font-weight: 800;
}
.pc-body {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  flex: 1;
  gap: 4px;
  box-sizing: border-box;
}
.pc-cat {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.pc-title,
.pc h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  color: var(--text);
}
.pc-title a,
.pc h3 a {
  color: inherit;
  transition: color 0.15s;
}
.pc-title a:hover,
.pc h3 a:hover {
  color: var(--lime);
}
.pc-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pc-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pc-price strong {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.pc-price small {
  font-size: 10px;
  color: var(--muted);
}
.pc-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  min-width: 44px;
  background: var(--lime);
  color: #121808;
  border: 0;
  border-radius: 9px;
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: all 0.18s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.pc-add::after {
  content: '';
  position: absolute;
  inset: -2px;
}
.pc-add:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.pc-add:hover:not(:disabled) {
  background: #d1ff7b;
  transform: translateY(-1px);
  box-shadow: none;
}

/* Empty State */
.catalog-empty {
  text-align: center;
  padding: 56px 20px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 26, 0.4);
  border: 1px dashed var(--border);
  border-radius: 16px;
  margin-block: 10px 36px;
  box-sizing: border-box;
}
.catalog-empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 24px -6px rgba(185, 255, 56, 0.18);
}
.catalog-empty .catalog-empty-icon svg,
.catalog-empty svg {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 26px !important;
  height: 26px !important;
  color: var(--lime) !important;
  box-shadow: none !important;
}
.catalog-empty h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}
.catalog-empty p {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 22px;
  max-width: 440px;
  margin-inline: auto;
  line-height: 1.5;
}
.catalog-empty-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
    min-height: 116px;
  }
  .catalog-search-wrap {
    flex: 1 1 100%;
    width: 100%;
    padding: 0 8px 0 12px;
  }
  .catalog-controls-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .catalog-dropdown-wrapper {
    flex: 1 1 calc(50% - 6px);
    min-width: 135px;
  }
  .catalog-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .catalog-dropdown-menu {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 500px) {
  .pc-body {
    padding: 10px 10px 12px;
  }
  .pc-title,
  .pc h3 {
    font-size: 13px;
    line-height: 1.25;
    min-height: 2.5em;
  }
  .pc-price strong {
    font-size: 13px;
  }
  .pc-add {
    min-height: 38px;
    min-width: 38px;
    padding: 6px 10px;
    font-size: 11.5px;
    gap: 4px;
  }
}


/* app/styles/02-home.css */
/* ===== Benefit Container (Below Hero) ===== */
.benefits-container {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 15;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.benefit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(22, 25, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.22s var(--ease);
  position: relative;
  overflow: hidden;
}
.benefit-card:hover {
  background: rgba(28, 32, 27, 0.96);
  border-color: rgba(185, 255, 56, 0.35);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7), 0 0 24px -10px rgba(185, 255, 56, 0.2);
  transform: translateY(-2px);
}
.benefit-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.22);
  color: var(--lime);
  transition: transform 0.22s var(--ease), background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.benefit-card:hover .benefit-icon-badge {
  transform: scale(1.08);
  background: rgba(185, 255, 56, 0.18);
  border-color: rgba(185, 255, 56, 0.45);
  box-shadow: 0 0 16px -2px rgba(185, 255, 56, 0.35);
}
.benefit-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.benefit-info h3 {
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}
.benefit-info p {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  letter-spacing: -0.01em;
}
@media (max-width: 1120px) {
  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 580px) {
  .benefits-container {
    margin-top: 14px;
    margin-bottom: 14px;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .benefit-card {
    padding: 13px 15px;
  }
}
.custom-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid rgba(185,255,56,.35);border-radius:24px;padding:40px 44px;background:radial-gradient(90% 140% at 100% 0,rgba(185,255,56,.14),transparent 60%),var(--surface)}
.custom-banner h2{font-size:34px;margin-bottom:8px}.custom-banner p:last-child{margin:0;max-width:520px}.custom-banner .eyebrow{margin-bottom:10px}
.editorial{padding-block:72px}
/* product page */
.product-layout{gap:56px}
.product-price{font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--text);margin-bottom:18px;display:flex;align-items:baseline;gap:12px}.product-price small{font-size:11px;font-weight:600;color:var(--lime);background:var(--lime-soft);border:1px solid rgba(185,255,56,.35);border-radius:999px;padding:3px 10px;letter-spacing:.04em;text-transform:uppercase}
.product-facts{gap:8px;flex-wrap:wrap;border-bottom:0;padding-bottom:6px;margin-bottom:18px}.fact{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted)}
.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:12px;padding:4px;background:var(--surface);margin-bottom:16px}.segmented button{border:0;background:transparent;color:var(--muted);border-radius:9px;padding:10px;font-size:13px;transition:all .15s}.segmented button.on{background:var(--lime);color:#121808;font-weight:700}
.perks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}.perks li{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}.perks svg{color:var(--lime)}
.buy-panel{border:1px solid var(--border);background:var(--surface-soft);border-radius:var(--radius-lg);padding:22px;margin-bottom:28px}
.field input,select{border-radius:10px}
.breadcrumbs a:hover{color:var(--lime)}
details{border-radius:0}summary:after{font-size:18px;line-height:1}
.cart-summary,.cart-item img{border-radius:var(--radius-lg)}
.cart-item img{border-radius:12px}
.empty svg{padding:12px;background:var(--lime-soft);border-radius:18px;width:72px;height:72px;color:var(--lime)}
.footer{margin-top:20px}
.toast{border-radius:12px}
@media(max-width:1100px){.search-pill{min-width:0}.search-pill span{display:none}.hero2{gap:36px}}
@media(max-width:800px){.hero2{grid-template-columns:1fr;padding-block:40px 20px;gap:30px}.hero2 h1{font-size:40px}.custom-banner{flex-direction:column;align-items:flex-start;padding:28px}.search-pill{display:none}.benefits{grid-template-columns:1fr}.product-layout{gap:30px}.product-price{font-size:30px}}
@media(max-width:500px){.promo-bar{font-size:10.5px;padding:7px 12px}.pc-body{padding:12px}.pc h3{font-size:14px}.pc-price strong{font-size:17px}.pc-add{padding:8px 11px;font-size:12px}.pc-add span{display:none}.pc-add{width:36px;height:36px;justify-content:center;padding:0}.pc-badge{font-size:9px;top:8px;left:8px;padding:3px 7px}.pc-badge.new{right:8px}.hero2 h1{font-size:36px}.trust li{font-size:11px}.custom-banner h2{font-size:28px}.buy-panel{padding:18px}}
/* ===== v3: typography + Pewe menu + product page ===== */
:root{--font:'Inter Variable',Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-head:'Montserrat Variable',Montserrat,'Inter Variable',system-ui,sans-serif}
body{font-family:var(--font);font-weight:450;font-size:15px;line-height:1.65}
h1,h2,h3,.button,.nav,.tablist,.pc-add,.tag,.pill-label,.eyebrow,.wordmark,.segmented button{font-family:var(--font-head)}
h1,h2{font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:1.12}
h3{font-weight:700;letter-spacing:-.01em}
.hero2 h1{font-size:clamp(32px,4.2vw,56px);letter-spacing:-.01em}
.page h1{font-size:clamp(30px,4vw,52px)}
.collection-header h2,.custom-banner h2{font-size:clamp(24px,2.6vw,32px)}
.button{font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px}
.button.small{font-size:12px}
.wordmark{display:inline-flex;gap:11px;align-items:center;white-space:nowrap;line-height:1}
.wordmark img{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.wordmark span{font-family:var(--font-head);font-weight:600;letter-spacing:.18em;font-size:15px;color:var(--text);text-transform:uppercase;transition:color .15s}
.wordmark:hover span{color:var(--lime)}
.footer .wordmark img{width:24px;height:24px}
.footer .wordmark span{font-size:13px;letter-spacing:.16em}
/* header + nav */
.header-inner{gap:clamp(10px,1.4vw,24px)}
.nav{gap:2px;height:100%}
.nav>a,.nav-parent{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);transition:color .15s,background .15s}
.nav>a:hover,.nav-parent:hover,.nav-group:focus-within .nav-parent{color:var(--text);background:rgba(255,255,255,.05)}
.nav>a.active,.nav-parent.active{color:var(--lime)}
.nav>a svg,.nav-parent>svg:first-child{color:var(--lime)}
.nav .caret{margin-left:-2px;transition:transform .2s;color:var(--muted)!important}
.nav-parent:hover .caret,.nav-parent.active .caret,.nav-group:hover .caret{color:var(--lime)!important}
.nav-group{position:relative;display:flex;align-items:center;height:100%}
.nav-group:hover .caret,.nav-group:focus-within .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% - 6px);left:0;min-width:240px;padding:8px;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:50}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
@media(min-width:1201px){.nav-group.dismissed .nav-menu{opacity:0;visibility:hidden;transform:translateY(6px)}.nav-group.dismissed .caret{transform:none}}
.nav-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;font-family:var(--font-head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nav-menu a:hover{background:var(--lime-soft);color:var(--text)}.nav-menu a svg{color:var(--lime)}
.header-actions{gap:10px}
.social{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:11px;color:var(--muted);transition:color .15s,border-color .15s,background .15s}.social:hover{color:var(--lime);border-color:rgba(185,255,56,.5);background:var(--lime-soft)}
.search-button{position:relative;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);transition:all .15s ease}
.search-button::after{content:'';position:absolute;inset:-4px}
.search-button:hover{border-color:var(--lime);color:var(--lime)}
.search-button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.nav-drawer-search-btn{display:none}
.account-link{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;height:38px;padding:0 13px}
.cart-link{height:38px;padding:0 12px}
/* demo crop: each square shows one whole character */
.product-image.demo-crop img{position:absolute;top:0;height:100%;width:auto;max-width:none;object-fit:contain}
.product-image.demo-crop.position-0 img{left:25%}.product-image.demo-crop.position-1 img{left:-25%}.product-image.demo-crop.position-2 img{left:-75%}
.pc h3{font-size:15px}
/* product page */
.product-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.product-info h1{font-size:clamp(24px,2.8vw,36px);text-transform:none;letter-spacing:-.02em;margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.tag.hot{color:#121808;background:var(--lime);border-color:var(--lime)}
.gallery-main{position:relative}
.gallery-hit{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-lg);overflow:hidden}
.gallery .product-image{aspect-ratio:1/1;border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 28%,#2b312d,#1b1c1b 75%);overflow:hidden;position:relative}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-strong);background:rgba(15,18,16,.78);backdrop-filter:blur(8px);color:var(--text);transition:background .15s,border-color .15s}
.gallery-nav:hover{border-color:var(--lime);color:var(--lime)}.gallery-nav.prev{left:12px}.gallery-nav.next{right:12px}
.gallery-count{position:absolute;right:12px;bottom:12px;z-index:3;font-size:11px;font-weight:600;background:rgba(15,18,16,.78);border:1px solid var(--border);border-radius:999px;padding:3px 10px;color:var(--text)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;margin-top:12px}
.thumb{padding:0;background:none;border:0;border-radius:12px;overflow:hidden;opacity:.7;transition:opacity .15s,box-shadow .15s}
.thumb .product-image{border-radius:12px}
.thumb:hover{opacity:1}.thumb.on{opacity:1;box-shadow:0 0 0 2px var(--lime)}
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.lightbox-bg{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.lightbox-box{position:relative;width:min(92vw,86vh,820px)}
.lightbox-box .product-image{aspect-ratio:1/1;border-radius:18px;border:1px solid var(--border-strong);background:#161c1a;overflow:hidden;position:relative}
.lightbox-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);display:grid;place-items:center}
.ptabs{margin-top:8px}
.tablist{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.tablist::-webkit-scrollbar{display:none;width:0;height:0}
.tablist button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);padding:11px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:color .15s}
.tablist button:hover{color:var(--text)}.tablist button.on{color:var(--text);border-bottom-color:var(--lime)}
.tabpanel:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:6px}
.tablist button:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;border-radius:6px 6px 0 0}
.tabpanel p{font-size:14px;margin-bottom:14px}
.related h2{font-size:clamp(22px,2.4vw,28px)}
.gallery-main:focus-within .gallery-hit{outline:0}
@media(max-width:1280px){.nav>a,.nav-parent{padding:8px 8px;font-size:11.5px}.social{display:none}.container,.header-inner{width:calc(100% - 56px)}}
@media(max-width:1100px){.nav>a svg,.nav-parent>svg:first-child{display:none}.header-inner{gap:14px}.account-link span{max-width:110px;overflow:hidden;text-overflow:ellipsis}}
/* Drawer navigation up to 1200px: below that the full nav plus a signed-in account pushes the header past the screen edge. */
@media(max-width:1200px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:20px 28px;border-bottom:1px solid var(--border);flex-direction:column}.nav.open{display:flex}.menu-button{display:grid}
  .nav{height:auto;gap:2px;max-height:calc(100dvh - 110px);overflow:auto;align-items:stretch}
  .nav-drawer-search-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;margin-bottom:8px;background:rgba(185,255,56,.08);border:1px solid rgba(185,255,56,.25);border-radius:10px;color:var(--lime);font-family:var(--font-head);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .15s,border-color .15s}
  .nav-drawer-search-btn:hover{background:rgba(185,255,56,.16);border-color:var(--lime)}
  .nav-drawer-search-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
  .nav>a,.nav-parent{padding:13px 8px;font-size:13px;width:100%}
  .nav>a svg,.nav-parent>svg:first-child{display:block}
  .nav-group{flex-direction:column;align-items:stretch;height:auto}.nav .caret{display:none}
  .nav-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 6px 22px;min-width:0}
  .nav-menu a{padding:10px 8px}
}
@media(max-width:800px){
  .social{display:grid}.header-actions{gap:8px}
  .product-layout{grid-template-columns:minmax(0,1fr)}
  .product-layout>*{min-width:0}
}
@media(max-width:500px){.social{display:none}.wordmark span{display:none}.gallery-thumbs{grid-template-columns:repeat(4,1fr)}.button{font-size:12px}}
@media(max-width:400px){
  /* Search remains available in the mobile drawer without crowding the toolbar. */
  .header .search-button{display:none}
}
@media(min-width:501px) and (max-width:600px){
  .header .wordmark span{display:none}
}
@media(max-width:359px){
  .header-inner{width:calc(100% - 24px);gap:8px}
  .header-actions{gap:4px}
}

/* ===== Hero 5-Zone Architecture (Matches User Red Boxes) ===== */
.hero-layout{
  max-width:var(--max);
  margin-inline:auto;
  padding-top:58px;
  padding-bottom:0;
  position:relative;
  isolation:isolate;
  z-index:2;
}

/* Row Top: Zone 1 (Left), Spacer (Center for Zone 3 head), Zone 4 (Right) */
.hero-row-top{
  display:grid;
  grid-template-columns:minmax(230px,360px) minmax(240px,1fr) minmax(230px,320px);
  gap:24px;
  align-items:flex-end;
  margin-bottom:12px;
  position:relative;
  z-index:2;
}

/* Zone 1: Define Your CHARACTER */
.hero-zone-1{
  display:flex;
  flex-direction:column;
}
.hero-title-wrap,
.hero-tagline-wrap{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}
.hero-zone-4 .hero-tagline-wrap{
  align-items:flex-end;
}
.hero-zone-1 .hero-script-label,
.hero-zone-4 .hero-script-label{
  font-family:var(--font-head);
  font-size:clamp(18px,2vw,24px);
  font-weight:600;
  font-style:italic;
  text-transform:none;
  color:var(--muted);
  line-height:1;
}
.hero-zone-1 .hero-headline{
  font-family:var(--font-head);
  font-size:clamp(36px,4.5vw,58px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.025em;
  line-height:.95;
  margin:6px 0 0;
  color:var(--text);
  white-space:nowrap;
}

/* Zone 4: Own Your WORLD + */
.hero-zone-4{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.hero-zone-4 .hero-headline{
  font-family:var(--font-head);
  font-size:clamp(36px,4.5vw,58px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.025em;
  line-height:.95;
  margin:6px 0 0;
  color:var(--text);
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.hero-sparkle-icon{
  color:var(--lime);
  margin-left:8px;
  vertical-align:middle;
}

/* Main Card: Wraps Zone 2 (Left), Zone 3 (Center), Zone 5 (Right) */
.hero-main-card{
  background:radial-gradient(100% 120% at 50% 0%,#202622 0%,#161816 65%,#121312 100%);
  border:1px solid rgba(185,255,56,.25);
  border-radius:32px;
  padding:36px 38px 28px;
  min-height:380px;
  position:relative;
  overflow:visible;
  display:grid;
  grid-template-columns:minmax(230px,360px) minmax(240px,1fr) minmax(230px,320px);
  gap:24px;
  align-items:end;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.7),0 0 45px -25px rgba(185,255,56,.12),inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-ambient-glow{
  position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  background:radial-gradient(circle at 50% 25%,rgba(8,184,137,.16),transparent 65%),
             radial-gradient(circle at 10% 80%,rgba(185,255,56,.08),transparent 45%);
}

/* Zone 2: Card Left Content */
.hero-zone-2{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  z-index:5;
}
.hero-pill-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--lime);background:rgba(185,255,56,.08);
  border:1px solid rgba(185,255,56,.3);border-radius:999px;
  padding:5px 13px;width:fit-content;
}
.hero-mobile-plus{display:none}
.hero-banner-heading{
  font-family:var(--font-head);font-size:clamp(22px,2.4vw,32px);
  font-weight:800;text-transform:uppercase;line-height:1.1;letter-spacing:-.02em;
  margin:0;color:#fff;
}
.hero-banner-sub{
  font-size:13.5px;line-height:1.55;color:var(--muted);margin:0;max-width:310px;
}
.hero-action-row{margin-top:2px}
.hero-explore-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:#0d110d;color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:12px 24px;border-radius:999px;font-family:var(--font-head);
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  transition:all .18s;width:fit-content;
}
.hero-explore-btn:hover{background:var(--lime);color:#10140c;border-color:var(--lime);transform:translateY(-1px)}
.hero-stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  width: fit-content;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-stat-number-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-stat-number {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-stat-number.hero-stat-text {
  font-size: 18px;
  letter-spacing: 0.02em;
}
.hero-stat-star {
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
  flex-shrink: 0;
}
.hero-stat-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #767d73;
  letter-spacing: 0.08em;
  line-height: 1;
}
.hero-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  align-self: center;
}

/* Zone 3: Center Column Duo */
.hero-zone-3{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  height:100%;
  min-height:360px;
  z-index:10;
  pointer-events:none;
}
.hero-duo-photo{
  position:absolute;
  bottom:-28px;
  left:50%;
  transform:translateX(-50%);
  height:523px;
  width:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* Zone 5: Card Right (Social Actions & Recent Purchases) */
.hero-zone-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: end;
  position: relative;
  z-index: 5;
  width: 100%;
}
.hero-social-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 16px;
}
.hero-social-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
}
.hero-social-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hero-social-btn:hover svg {
  transform: scale(1.1);
}
.hero-social-btn.btn-discord {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.hero-social-btn.btn-discord:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}
.hero-social-btn.btn-youtube {
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
}
.hero-social-btn.btn-youtube:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #10140c;
  transform: translateY(-2px);
  box-shadow: none;
}
.hero-recent-payments-container {
  width: 100%;
  max-width: 340px;
  background: rgba(18, 22, 18, 0.65);
  backdrop-filter: blur(20px);
  border: none;
  border-radius: 20px;
  padding: 10px 14px 8px;
  box-shadow: 0 16px 40px -15px rgba(0, 0, 0, 0.6);
  transition: background 0.2s, transform 0.2s;
}
.hero-recent-payments-container:hover {
  background: rgba(22, 27, 22, 0.85);
}
.recent-pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.recent-pay-live {
  display: flex;
  align-items: center;
  gap: 7px;
}
.recent-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: recentPulseDot 1.6s ease-in-out infinite;
}
.recent-pulse-dot.is-paused {
  animation-play-state: paused;
  opacity: 0.45;
}
@keyframes recentPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.recent-kicker-text {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}
.recent-pay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.recent-pay-pause-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8a9184;
  border-radius: 7px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.recent-pay-pause-btn::after {
  content: '';
  position: absolute;
  inset: -9px;
}
.recent-pay-pause-btn:hover {
  background: rgba(185, 255, 56, 0.12);
  border-color: rgba(185, 255, 56, 0.35);
  color: var(--lime);
}
.recent-pay-pause-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.recent-tebex-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #8a9184;
}
.recent-tebex-badge img {
  height: 12px;
  width: auto;
  opacity: 0.85;
}
.recent-chat-stack {
  list-style: none;
  padding: 0;
  margin: 7px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.recent-chat-pill {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px 11px 6px 8px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  animation: chatPillSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
  flex-shrink: 0;
}
@keyframes chatPillSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.recent-chat-pill:hover {
  background: rgba(185, 255, 56, 0.07);
  border-color: rgba(185, 255, 56, 0.28);
  transform: translateX(-2px);
}
.recent-chat-pill.is-newest {
  border-color: rgba(0, 230, 118, 0.35);
  box-shadow: 0 0 16px -4px rgba(0, 230, 118, 0.2);
}
.recent-chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.recent-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent-chat-avatar span {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.recent-chat-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  justify-content: center;
}
.recent-chat-user {
  font-family: var(--font-head);
  font-weight: 700;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-chat-bought-row {
  display: flex;
  align-items: center;
  gap: 4.5px;
  font-size: 11px;
  line-height: 1.25;
  min-width: 0;
}
.recent-chat-bought {
  color: #8a9184;
  font-size: 10.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.recent-chat-product {
  color: #00e676;
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.recent-chat-product:hover {
  text-decoration: underline;
  color: #69f0ae;
}
.recent-chat-time {
  margin-left: auto;
  align-self: center;
  font-size: 10.5px;
  color: #71776b;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 6px;
  font-feature-settings: "tnum";
}
.recent-pay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  min-height: 24px;
  box-sizing: border-box;
  padding: 7px 4px 0;
  margin-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
}
.recent-pay-hint {
  color: var(--muted);
}
.recent-pay-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lime);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s;
}
.recent-pay-all-link:hover {
  opacity: 0.85;
  color: var(--lime);
}
.recent-chat-product.unlinked {
  color: #c5cdc2;
  font-weight: 600;
  cursor: default;
  text-decoration: none;
}
.recent-chat-product.unlinked:hover {
  color: #c5cdc2;
  text-decoration: none;
}
.recent-chat-skeleton {
  pointer-events: none;
}
.recent-chat-pill.recent-chat-skeleton {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  box-sizing: border-box;
  animation: none;
}
.recent-skeleton-line {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  animation: recentSkeletonPulse 1.5s ease-in-out infinite;
}
@keyframes recentSkeletonPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
.recent-pay-empty {
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  box-sizing: border-box;
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  padding: 12px;
}

@media(max-width:1100px){
  .hero-row-top{grid-template-columns:1fr 1fr}
  .hero-zone-3-spacer{display:none}
  .hero-main-card{grid-template-columns:1fr 1fr;padding:30px 24px 20px}
  .hero-zone-5{display:none}
  .hero-zone-3{margin-top:-80px}
  .hero-duo-photo{max-width:380px}
}
@media(min-width:769px) and (max-width:1100px){
  /* Override the editor's inline desktop sizes so the tablet grid fits its container. */
  .hero-main-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:30px 24px 20px!important}
  .hero-zone-2,.hero-zone-3{min-width:0}
  .hero-zone-1 .hero-headline,.hero-zone-4 .hero-headline{font-size:clamp(32px,4.5vw,48px)!important}
  .hero-duo-photo{width:380px;max-width:100%;height:auto!important;bottom:-20px!important;transform:translateX(-50%)!important}
}
@media(max-width:768px){
  /* Keep the existing h1 accessible without adding a row above the reference composition. */
  .hero-row-top {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero-zone-4 {
    display: none;
  }

  .hero-layout {
    width: calc(100% - 32px);
    max-width: 500px !important;
    padding-top: clamp(16px, 9vw, 52px) !important;
    container-type: inline-size;
  }

  .hero-main-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 35.6cqw 4.6cqw 4.4cqw !important;
    gap: 0 !important;
    border-radius: 3.2cqw !important;
    min-height: auto !important;
    margin-top: 14cqw;
    overflow: visible !important;
    align-items: stretch;
    background: linear-gradient(180deg, #0d2118, #101711 52%, #11130f);
  }

  .hero-zone-2 {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    gap: 3cqw;
  }

  .hero-pill-badge {
    min-height: 8cqw;
    padding: 4px 4.2cqw;
    font-size: clamp(11px, 3.25cqw, 16.25px) !important;
    font-weight: 800;
    line-height: 1.25;
    background: #243b10;
    border-color: rgba(185, 255, 56, .42);
  }

  .hero-pill-badge > svg {
    display: none;
  }

  .hero-mobile-plus {
    display: inline-flex;
    align-items: center;
    font-size: 1.25em;
    line-height: 1;
  }

  .hero-banner-heading {
    font-size: clamp(31px, 9.6cqw, 48px) !important;
    font-weight: 900;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    overflow-wrap: anywhere;
  }

  .hero-banner-heading > span {
    display: block;
  }

  .hero-banner-sub {
    max-width: none;
    font-size: clamp(14px, 4cqw, 19px) !important;
    line-height: 1.5 !important;
    color: #c3c6c1;
  }

  /* The duo overlaps the card and fades behind the headline, as in the supplied reference. */
  .hero-zone-3 {
    display: flex !important;
    position: absolute;
    inset: -14cqw 0 auto;
    height: 105cqw;
    min-height: 0;
    margin-top: 0;
    z-index: 1;
  }

  .hero-duo-photo {
    top: 0;
    left: 52.8%;
    width: 90%;
    height: auto !important;
    max-width: none;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, .2) 48%, transparent 86%);
  }

  .hero-action-row {
    margin-top: 0;
  }

  .hero-explore-btn {
    width: 100%;
    min-height: clamp(48px, 14cqw, 70px);
    padding: 10px 16px !important;
    font-size: clamp(14px, 4.4cqw, 22px) !important;
    line-height: 1.2;
    gap: 4cqw;
    justify-content: center;
    border: 2px solid rgba(185, 255, 56, .85);
    background: rgba(6, 9, 7, .82);
  }

  .hero-explore-btn > svg {
    width: clamp(16px, 4cqw, 20px);
    height: clamp(16px, 4cqw, 20px);
  }

  .hero-stats-row {
    display: none;
  }
}

@media(min-width:601px) and (max-width:768px){
  /* Portrait tablets use the page gutters instead of the phone's 500px hero cap. */
  .hero-layout{width:calc(100% - 56px);max-width:none!important}
}

/* Hero Visual Tweaker HUD */
.hero-tweaker-toggle{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(20,24,20,.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(185,255,56,.4);
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transition:all .18s ease;
}
.hero-tweaker-toggle:hover{
  background:var(--lime);
  color:#0f140c;
  transform:translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,0,0,.7);
}
.tweaker-active-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
  box-shadow: none;
}
.hero-tweaker-panel{
  position:fixed;
  right:24px;
  bottom:76px;
  width:360px;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 120px);
  background:rgba(18,22,18,.96);
  backdrop-filter:blur(24px);
  border:1px solid rgba(185,255,56,.3);
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.85),0 0 40px rgba(185,255,56,.18);
  display:flex;
  flex-direction:column;
  z-index:9999;
  overflow:hidden;
  animation:tweakerSlideUp .2s ease-out;
}
@keyframes tweakerSlideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.tweaker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tweaker-title{display:flex;align-items:center;gap:8px}
.tweaker-logo-icon{color:var(--lime);font-size:14px}
.tweaker-title strong{font-family:var(--font-head);font-size:13px;color:#fff}
.tweaker-title small{
  background:rgba(185,255,56,.1);
  color:var(--lime);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
}
.tweaker-close-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
  transition:color .15s;
}
.tweaker-close-btn:hover{color:#fff}
.tweaker-drag-picker{
  padding:12px 16px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.picker-label{
  font-family:var(--font-head);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--lime);
}
.picker-pills{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.picker-pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s;
}
.picker-pill:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.picker-pill.active{
  background:var(--lime);
  color:#0f140c;
  border-color:var(--lime);
  font-weight:800;
  box-shadow:0 0 10px rgba(185,255,56,.4);
}
.picker-hint{
  font-size:10px;
  color:var(--lime);
  line-height:1.2;
}
.tweaker-tabs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3px;
  background:rgba(0,0,0,.25);
  padding:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tweaker-tabs button{
  background:transparent;
  border:none;
  color:var(--muted);
  font-family:var(--font-head);
  font-size:10.5px;
  font-weight:700;
  padding:7px 4px;
  border-radius:6px;
  cursor:pointer;
  transition:all .15s;
  text-align:center;
}
.tweaker-tabs button.active{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.tweaker-body{
  padding:16px 18px;
  overflow-y:auto;
  max-height:420px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.tweaker-drag-banner{
  background:rgba(8,184,137,.1);
  border:1px dashed rgba(8,184,137,.4);
  border-radius:12px;
  padding:10px 12px;
}
.tweaker-checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.tweaker-checkbox-row input{
  accent-color:var(--lime);
  margin-top:2px;
  cursor:pointer;
}
.tweaker-checkbox-row span{display:flex;flex-direction:column;line-height:1.25}
.tweaker-checkbox-row strong{font-size:12px;color:#fff}
.tweaker-checkbox-row small{font-size:10.5px;color:var(--muted)}
.tweaker-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field-label-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11.5px;
}
.field-label-row span{color:var(--muted)}
.field-label-row strong{
  font-family:var(--font-head);
  color:var(--lime);
  background:rgba(185,255,56,.08);
  padding:2px 8px;
  border-radius:6px;
  font-size:12px;
}
.tweaker-field input[type="range"]{
  accent-color:var(--lime);
  width:100%;
  cursor:pointer;
}
.field-hint{
  font-size:10px;
  color:var(--muted);
  line-height:1.3;
}
.field-hint strong{color:#fff}
.field-quick-row{
  display:flex;
  gap:6px;
  margin-top:2px;
}
.field-quick-row button{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:10px;
  padding:3px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:all .15s;
}
.field-quick-row button:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.tweaker-subhead{
  font-family:var(--font-head);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--lime);
  margin:0 0 4px;
}
.tweaker-footer{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:8px;
  padding:12px 18px;
  background:rgba(0,0,0,.3);
  border-top:1px solid rgba(255,255,255,.08);
}
.tweaker-save-btn{
  background:var(--lime);
  color:#0f140c;
  border:none;
  font-family:var(--font-head);
  font-size:11.5px;
  font-weight:800;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.tweaker-save-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.tweaker-copy-btn{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-head);
  font-size:11.5px;
  font-weight:700;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.tweaker-copy-btn:hover{background:rgba(255,255,255,.15)}
.tweaker-toast{
  background:var(--lime);
  color:#121808;
  font-size:11px;
  font-weight:700;
  padding:8px 14px;
  text-align:center;
  animation:fadeIn .2s ease;
}
.tweaker-toast code{
  background:rgba(0,0,0,.15);
  padding:1px 4px;
  border-radius:4px;
}

/* ===== FiveM Server Preview Banner (Below Hero) ===== */
.preview-banner-wrap {
  margin-top: 0;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 0% 50%, rgba(22, 34, 22, 0.85) 0%, rgba(17, 19, 17, 0.94) 60%, rgba(14, 15, 14, 0.98) 100%);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 16px;
  padding: 18px 26px;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7), 0 0 40px -28px rgba(185, 255, 56, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.preview-banner:hover {
  border-color: rgba(185, 255, 56, 0.38);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(185, 255, 56, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.preview-banner-glow {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 100px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.14) 0%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
.preview-banner-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.preview-banner-kicker-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.preview-banner-kicker {
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  color: var(--lime);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.live-ping-dot {
  position: relative;
  display: inline-flex;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}
.ping-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0.75;
  animation: pingDot 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ping-core {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}
@keyframes pingDot {
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.preview-banner-text {
  margin: 0;
  font-size: 13.5px;
  color: rgba(245, 245, 243, 0.9);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.preview-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.preview-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(38, 58, 34, 0.65);
  border: 1px solid rgba(185, 255, 56, 0.45);
  color: var(--lime);
  padding: 11px 20px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
.preview-connect-btn .btn-icon {
  color: var(--lime);
  transition: transform 0.2s ease, color 0.2s ease;
}
.preview-connect-btn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #121808;
  transform: translateY(-1px);
  box-shadow: none;
}
.preview-connect-btn:hover .btn-icon {
  color: #121808;
  transform: scale(1.1);
}
.preview-close-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #8d918b;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preview-close-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.preview-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.preview-close-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
@media (max-width: 860px) {
  .preview-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 44px 16px 18px;
  }
  .preview-banner-actions {
    width: 100%;
  }
  .preview-connect-btn {
    width: 100%;
    justify-content: center;
  }
  .preview-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
  .preview-close-btn::after {
    inset: -2px;
  }
}

/* ===== Subscription Showcase Banner (Below Featured Peds) ===== */
.subs-showcase-wrap {
  margin-top: 10px;
  margin-bottom: 36px;
  position: relative;
  z-index: 5;
}
.subs-showcase-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(100% 120% at 0% 0%, #1c241c 0%, #151815 55%, #111311 100%);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 28px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.95fr);
  gap: 44px;
  align-items: stretch;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 50px -25px rgba(185, 255, 56, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.subs-ambient-glow {
  position: absolute;
  left: -80px;
  top: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.12) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(50px);
}
.subs-showcase-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.subs-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 16px;
}
.subs-headline {
  font-family: var(--font-head);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 16px;
}
.subs-highlight {
  color: var(--lime);
}
.subs-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #e2e5df;
  margin: 0 0 12px;
}
.subs-lead strong {
  color: var(--lime);
  font-weight: 800;
}
.subs-subtext {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}

/* app/styles/03-footer-legal.css */
/* ===== Redesigned Studio Multi-Column Footer ===== */
.footer {
  margin-top: 56px;
  padding-top: 56px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 56px;
  width: 100%;
  align-items: start;
}

/* Brand Column */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 320px;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 16px;
  margin-left: 0;
  padding-left: 0;
}

.footer-wordmark .footer-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transition: transform 0.25s ease;
}

.footer-wordmark:hover .footer-logo-img {
  transform: scale(1.05);
}

.footer-wordmark-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 38px;
}

.footer-wordmark-text .brand-title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600; /* same face as the header .wordmark span */
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.footer-wordmark-text .brand-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.footer-tagline {
  font-size: 13.5px;
  line-height: 1.65;
  color: #9ea29b;
  margin: 0 0 24px;
  max-width: 340px;
}

/* Discord CTA Button */
.footer-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 18px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.footer-discord-btn svg {
  color: #5865F2;
  transition: transform 0.2s ease;
}

.footer-btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: none;
  margin-left: 2px;
  animation: pulse-dot 2.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.footer-discord-btn:hover {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: none;
}

.footer-discord-btn:hover svg {
  transform: scale(1.15);
}

/* Navigation Columns (3 Columns: Explore, Support, Legal spanning to far right) */
.footer-nav-col {
  display: flex;
  flex-direction: column;
}

.footer-nav-title {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-nav-title::before {
  content: '';
  display: inline-block;
  width: 3.5px;
  height: 12.5px;
  background: var(--lime);
  border-radius: 2px;
  flex-shrink: 0;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-nav-link {
  font-size: 13.5px;
  color: #9ba3af;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  line-height: 1.4;
}

.footer-nav-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* Footer Bottom Bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  line-height: 1.5;
  color: #7b8077;
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.footer-sep {
  opacity: 0.4;
}

.footer-pay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: inherit;
  font-size: 11px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-pay img {
  display: block;
  height: 20px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s;
}

.footer-pay:hover img {
  opacity: 1;
  transform: translateY(-0.5px);
}

/* Responsive Footer */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    margin-bottom: 40px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .footer-tagline {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
.about-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: stretch;
  padding-block: 56px 72px;
}
.about-strip-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-strip-left .eyebrow {
  margin: 0 0 14px;
}
.about-strip-left h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.08;
}
.about-strip-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding-left: 48px;
  border-left: 2px solid rgba(185, 255, 56, 0.35);
}
.about-strip-right p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #d2d6ce;
  max-width: 62ch;
}
.about-strip-right .inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
}
@media (max-width: 800px) {
  .about-strip {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 40px 56px;
  }
  .about-strip-right {
    padding-left: 20px;
  }
}
.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #5865f2;
  color: #fff;
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}
.discord-btn:hover {
  background: #6d79f6;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: none;
}
.discord-btn:hover span,
.discord-btn:hover svg {
  color: #ffffff;
}
.subs-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
@media (min-width: 1061px) {
  .subs-feature-tags { flex-wrap: nowrap; }
  .subs-feature-tags span { white-space: nowrap; }
}
.subs-feature-tags span {
  font-size: 11px;
  font-weight: 700;
  color: #d2d6ce;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 11px;
  border-radius: 8px;
}
.subs-cta-row {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.subs-pricing-block {
  display: flex;
  flex-direction: column;
}
.subs-pricing-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.subs-price-val {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.subs-price-val strong {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}
.subs-price-val small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.subs-price-fallback {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.subs-view-pricing-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.15s;
}
.subs-view-pricing-link:hover {
  opacity: 0.85;
}
.subs-card-pricing-link {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.subs-buttons-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.subs-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: #10150b;
  border: 0;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}
.subs-btn-primary:hover {
  background: #d1ff7b;
  transform: translateY(-2px);
  box-shadow: none;
}
.subs-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.2s var(--ease);
}
.subs-btn-secondary:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.08);
  transform: translateY(-1px);
}
.subs-showcase-preview {
  position: relative;
  z-index: 2;
}
.subs-product-card {
  background: #191c19;
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 45px -15px rgba(0, 0, 0, 0.85);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.subs-product-card:hover {
  border-color: rgba(185, 255, 56, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 24px 55px -12px rgba(0, 0, 0, 0.9), 0 0 35px -15px rgba(185, 255, 56, 0.3);
}
.subs-card-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #121412;
  overflow: hidden;
}
.subs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.subs-product-card:hover .subs-card-media img {
  transform: scale(1.05);
}
.subs-card-tag-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 17, 15, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(185, 255, 56, 0.4);
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.subs-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subs-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subs-card-cat {
  color: var(--lime);
}
.subs-card-escrow {
  color: var(--muted);
}
.subs-card-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.015em;
}
.subs-perks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.subs-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #d6dad2;
  line-height: 1.4;
}
.subs-perk-check {
  color: var(--lime);
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}
.subs-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.subs-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.subs-card-pricing strong {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}
.subs-card-pricing small {
  font-size: 11px;
  color: var(--muted);
}
.subs-card-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lime);
  color: #121808;
  border: 0;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s;
}
.subs-card-add-btn:hover {
  background: #d1ff7b;
  transform: translateY(-1px);
  box-shadow: none;
}

@media (max-width: 1060px) {
  .subs-showcase-card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 28px;
  }
}
@media (max-width: 600px) {
  .subs-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .subs-buttons-group {
    width: 100%;
    flex-direction: column;
  }
  .subs-btn-primary, .subs-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Legal Article & Info Pages Styling (Terms, Privacy, Impressum, Policies) ===== */
.info-page,
.info-page.legal-page {
  max-width: var(--max);
  width: calc(100% - 96px);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  padding-block: 36px 80px;
}
@media (max-width: 1100px) {
  .info-page,
  .info-page.legal-page {
    width: calc(100% - 56px);
  }
}
@media (max-width: 500px) {
  .info-page,
  .info-page.legal-page {
    width: calc(100% - 36px);
    padding-block: 24px 60px;
  }
}
.info-page.legal-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 999px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}
.info-page.legal-page h1 {
  font-family: var(--font-head);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: #ffffff;
  line-height: 1.1;
}
.info-page.legal-page .lead {
  width: 100%;
  max-width: 100%;
  font-size: 16.5px;
  line-height: 1.7;
  color: #a3a79f;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.info-page.legal-page .info-body {
  margin-top: 0;
}
.legal-article {
  max-width: 100%;
  color: #cfd4cb;
  font-size: 15px;
  line-height: 1.8;
}
.legal-article a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.legal-article a:hover {
  color: #d1ff7b;
}
.legal-h2 {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  scroll-margin-top: 110px;
}
.legal-h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-top: 28px;
  margin-bottom: 12px;
  scroll-margin-top: 110px;
}
.legal-p {
  margin-top: 0;
  margin-bottom: 18px;
  color: #cfd4cb;
}
.legal-ul {
  margin: 0 0 24px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-ul li {
  line-height: 1.65;
  color: #cfd4cb;
  scroll-margin-top: 110px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: 28px 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: var(--surface-soft);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.legal-table th {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 800;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.02em;
}
.legal-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  color: #cfd4cb;
}
.legal-table tbody tr:last-child td {
  border-bottom: none;
}
.legal-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}
.legal-cell-line {
  margin-bottom: 4px;
}
.legal-cell-line:last-child {
  margin-bottom: 0;
}

/* ===== Policies Page Full-Width Alignment & Styling ===== */
.policies-page .policy-links {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
  margin-bottom: 40px;
}
.policies-page .policy-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  transition: all 0.2s ease;
}
.policies-page .policy-links a:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.policies-page .policy-links a:hover {
  color: var(--lime);
  padding-left: 8px;
}
.policies-page p {
  color: #cfd4cb;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 18px;
  max-width: 100%;
}
.policies-page h2 {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* app/styles/04-header-search-account.css */
/* ===== Header Live Search Popup ===== */
.header-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-search-wrap .search-button.active {
  background: rgba(185, 255, 56, 0.14);
  border-color: var(--lime);
  color: var(--lime);
}
.search-popup {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 440px;
  background: #181b17;
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(185, 255, 56, 0.08);
  backdrop-filter: blur(20px);
  z-index: 250;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: searchPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}
@keyframes searchPopIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.search-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #181b17;
  border-left: 1px solid rgba(185, 255, 56, 0.25);
  border-top: 1px solid rgba(185, 255, 56, 0.25);
  transform: rotate(45deg);
  z-index: 1;
}
.search-popup-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  z-index: 2;
}
.search-input-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: #212620;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input-field:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(185, 255, 56, 0.15);
}
.search-input-icon {
  color: var(--lime);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search-input-field input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 13.5px;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: inherit;
}
.search-input-field input::placeholder {
  color: #7b8077;
}
.search-clear-btn {
  background: none;
  border: none;
  color: #7b8077;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s;
}
.search-clear-btn:hover {
  color: #ffffff;
}
.search-esc-hint {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #7b8077;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 8px;
  flex-shrink: 0;
}
.search-popup-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 255, 56, 0.3) transparent;
}
.search-popup-body::-webkit-scrollbar {
  width: 5px;
}
.search-popup-body::-webkit-scrollbar-thumb {
  background: rgba(185, 255, 56, 0.25);
  border-radius: 4px;
}
.search-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888d84;
  margin-bottom: 8px;
  padding-left: 6px;
}
.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, transform 0.15s;
  border: 1px solid transparent;
}
.search-result-item:hover {
  background: rgba(185, 255, 56, 0.07);
  border-color: rgba(185, 255, 56, 0.18);
  transform: translateX(3px);
  color: inherit;
}
.search-result-thumb {
  width: 48px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #242922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.search-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.search-result-item:hover .search-result-thumb img {
  transform: scale(1.06);
}
.search-result-fallback {
  color: #63685e;
}
.search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.search-result-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-version-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  line-height: 1.2;
}
.badge-escrow {
  color: #ffb84d;
  background: rgba(255, 184, 77, 0.12);
  border: 1px solid rgba(255, 184, 77, 0.28);
}
.badge-opensource {
  color: #4dc4ff;
  background: rgba(77, 196, 255, 0.12);
  border: 1px solid rgba(77, 196, 255, 0.28);
}
.badge-free {
  color: #d77aff;
  background: rgba(215, 122, 255, 0.12);
  border: 1px solid rgba(215, 122, 255, 0.28);
}
.badge-subscription {
  color: #b9ff38;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.28);
}
.search-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #888d84;
}
.search-result-cat {
  font-size: 11.5px;
}
.search-result-price {
  font-weight: 700;
  color: var(--lime);
  font-size: 12.5px;
}
.search-result-arrow {
  color: var(--lime);
  font-size: 15px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.search-result-item:hover .search-result-arrow {
  opacity: 1;
  transform: translateX(0);
}
.search-state-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 16px;
  color: #888d84;
  font-size: 13px;
}
.search-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(185, 255, 56, 0.2);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: searchSpin 0.7s linear infinite;
}
@keyframes searchSpin {
  to { transform: rotate(360deg); }
}
.search-state-empty {
  padding: 32px 18px;
  text-align: center;
}
.search-empty-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
}
.search-empty-desc {
  color: #888d84;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.search-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.2);
  transition: background 0.15s;
}
.search-empty-cta:hover {
  background: rgba(185, 255, 56, 0.16);
  color: var(--lime);
}
.search-popup-footer {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.search-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  text-decoration: none;
  transition: opacity 0.15s;
}
.search-view-all:hover {
  opacity: 0.85;
  color: var(--lime);
}
.search-backdrop {
  display: none;
}
@media (max-width: 800px) {
  .search-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 240;
  }
  .search-popup {
    position: fixed;
    top: 76px;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 96px);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(185, 255, 56, 0.12);
    z-index: 250;
  }
  .search-popup::before {
    display: none;
  }
}

/* ===== Wishlist, Account Dropdown & My Purchases Styling ===== */

/* ===== Currency Selector Dropdown (Navbar) ===== */
.currency-selector-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.currency-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 38px;
  padding: 0 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.currency-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: none;
}

.currency-trigger-btn.open {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: none;
}

.currency-caret {
  color: var(--muted);
  transition: transform 0.2s ease, color 0.15s ease;
}

.currency-trigger-btn:hover .currency-caret,
.currency-trigger-btn.open .currency-caret {
  color: var(--lime);
}

.currency-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 204px;
  padding: 10px;
  background: #202020;
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 14px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 8px;
  z-index: 200;
  animation: currencyDropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.currency-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background: #202020;
  border-left: 1px solid rgba(185, 255, 56, 0.25);
  border-top: 1px solid rgba(185, 255, 56, 0.25);
  transform: rotate(45deg);
  z-index: 1;
}

@keyframes currencyDropIn {
  from {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.currency-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 4px;
}

.currency-option-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(185, 255, 56, 0.18);
}

.currency-option-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--lime);
  border-color: rgba(185, 255, 56, 0.35);
  font-weight: 800;
  box-shadow: none;
}

@media (max-width: 600px) {
  .currency-dropdown-menu {
    left: 0;
    transform: none;
  }
  .currency-dropdown-menu::before {
    left: 24px;
    margin-left: 0;
  }
  @keyframes currencyDropIn {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Wishlist header action link */
.wishlist-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.wishlist-link:hover,
.wishlist-link.active {
  color: #ff5277;
  border-color: rgba(255, 82, 119, 0.4);
  background: rgba(255, 82, 119, 0.08);
  box-shadow: 0 0 20px -6px rgba(255, 82, 119, 0.4);
}
.action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4772;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 8px rgba(255, 71, 114, 0.6);
  line-height: 1;
}

/* Account nav-group & dropdown */
.account-group {
  position: relative;
}
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto; /* .nav-menu sets left:0, which pushed the menu past the right screen edge */
  width: 256px;
  padding: 10px;
  background: #141714;
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 16px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 120;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: dropIn 0.18s ease;
}
.account-group:hover .account-dropdown,
.account-group:focus-within .account-dropdown {
  display: flex;
}
.account-group.dismissed .account-dropdown {
  display: none;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Account Navbar Trigger Styles */
button.account-link {
  color: inherit;
  cursor: pointer;
}
.account-link.connected {
  border-color: rgba(185, 255, 56, 0.45);
  padding: 4px 11px 4px 6px;
  gap: 8px;
  height: 38px;
}
.account-nav-avatar-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: #182015;
  border: 1.5px solid var(--lime);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.account-nav-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-nav-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--lime);
  background: #1c2617;
}
.account-nav-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  max-width: 115px;
}
.account-nav-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
}
.account-nav-id {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.02em;
  opacity: 0.95;
  text-transform: uppercase;
}

/* Account Dropdown Profile Header */
.account-dropdown-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(185, 255, 56, 0.15);
}
.account-dropdown-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #182015;
  border: 2px solid rgba(185, 255, 56, 0.6);
  box-shadow: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-dropdown-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-dropdown-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--lime);
  background: #1c2617;
}
.account-dropdown-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-dropdown-cfx-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.02em;
}
.account-dropdown-user {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.account-dropdown-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.account-dropdown-handle {
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-dropdown-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lime);
  color: #10150b;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  transition: all 0.15s;
}
.account-dropdown-cta:hover {
  background: #d1ff7b;
}
.account-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}
.account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #d6dad2;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.account-dropdown-item:hover {
  background: rgba(185, 255, 56, 0.1);
  color: var(--lime);
  transform: translateX(2px);
}
.account-dropdown-item.logout-item:hover {
  background: rgba(255, 82, 119, 0.1);
  color: #ff5277;
}
.dropdown-pill {
  margin-left: auto;
  background: rgba(255, 71, 114, 0.2);
  color: #ff5277;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 71, 114, 0.35);
}

/* Card Wishlist Button */
.pc-media-wrap {
  position: relative;
  width: 100%;
}
.pc-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(15, 17, 15, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.pc-wishlist-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.pc-wishlist-btn:hover {
  background: rgba(18, 20, 18, 0.95);
  border-color: rgba(255, 82, 119, 0.4);
  color: #ff5277;
  transform: scale(1.08);
}
.pc-wishlist-btn:focus-visible {
  outline: 2px solid #ff5277;
  outline-offset: 2px;
}
.pc-wishlist-btn.active {
  background: rgba(255, 71, 114, 0.2);
  border-color: #ff5277;
  color: #ff5277;
  box-shadow: 0 0 16px -4px rgba(255, 71, 114, 0.6);
}

/* Buy panel subactions */
.buy-panel-subactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.wishlist-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.wishlist-buy-btn.active {
  border-color: #ff5277;
  color: #ff5277;
  background: rgba(255, 71, 114, 0.1);
}

/* Wishlist page specific */
.wishlist-total-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.pc-wishlist-add {
  margin-left: auto;
  gap: 6px;
  padding: 8px 14px;
}

/* Purchases Page */
.account-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: #191c19;
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 16px;
  margin-bottom: 24px;
}
.account-status-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-status-kicker {
  display: block;
  font-size: 10px;
  color: var(--lime);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.account-status-info strong {
  font-size: 16px;
  color: #ffffff;
}
.keymaster-link-btn,
.portal-cfx-link-btn {
  gap: 8px;
}

.account-prompt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: #191c19;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 24px;
}
.account-prompt-text {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-prompt-text h2 {
  font-size: 18px;
  margin: 0 0 4px;
}
.account-prompt-text p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.purchase-receipt-box {
  background: #141614;
  border: 1px solid rgba(185, 255, 56, 0.3);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 24px;
}
.receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.receipt-kicker {
  font-size: 10px;
  color: var(--lime);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.receipt-header h3 {
  margin: 2px 0 0;
  font-size: 17px;
}
.status-badge {
  background: rgba(185, 255, 56, 0.14);
  color: var(--lime);
  border: 1px solid rgba(185, 255, 56, 0.35);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.status-badge.pending {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: var(--border);
}
.status-badge.refunded,
.status-badge.declined {
  background: rgba(255, 85, 85, 0.1);
  color: #ff7a7a;
  border-color: rgba(255, 85, 85, 0.35);
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 13.5px;
  color: #d6dad2;
}
.receipt-row strong {
  text-align: right;
  overflow-wrap: anywhere;
}
.receipt-mono {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
}
.receipt-sub {
  color: var(--muted);
  font-weight: 400;
}
.receipt-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 8px;
}
.receipt-row.total strong {
  font-size: 18px;
  color: var(--lime);
}

.purchases-info-card {
  background: #151815;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
}
.info-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lime);
  margin-bottom: 16px;
}
.info-card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}
.info-card-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.info-card-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.info-step-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--lime);
}
.info-card-steps li strong {
  font-size: 14px;
  color: #ffffff;
}
.info-card-steps li p {
  margin: 0;
  font-size: 12.5px;
  color: #a3a79f;
  line-height: 1.6;
}
.info-card-steps li a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.purchase-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}
.purchase-support-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
  font-weight: 700;
}

@media (max-width: 700px) {
  .info-card-steps {
    grid-template-columns: 1fr;
  }
}

.purchases-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Cart authentication notice */
.cart-auth-notice {
  background: rgba(185, 255, 56, 0.06);
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-auth-notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-size: 13px;
}
.cart-auth-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #d6dad2;
}
.cfx-auth-btn {
  margin-top: 4px;
  justify-content: center;
}


/* app/styles/05-affiliate.css */
/* ==========================================================================
   AFFILIATE PROGRAM PAGE (Crafted Anti-Slop Design System)
   ========================================================================== */
.affiliate-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
  overflow-x: clip;
}

/* Hero Section */
.affiliate-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.affiliate-ambient-glow {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100%);
  max-width: 100%;
  height: 260px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.affiliate-kicker-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affiliate-hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(24px, 4.2vw, 44px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  max-width: 800px;
}

.affiliate-highlight {
  color: var(--lime);
  text-shadow: 0 0 35px rgba(185, 255, 56, 0.22);
}

.affiliate-hero-lead {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.65;
  color: #b4bcaf;
  max-width: 640px;
  margin: 0 auto;
}

/* Audience Chips */
.affiliate-audience-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 10px;
}

.affiliate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #d0d6cb;
  transition: border-color 0.2s, background 0.2s;
}

.affiliate-chip:hover {
  border-color: rgba(185, 255, 56, 0.3);
  background: rgba(185, 255, 56, 0.05);
  color: #ffffff;
}

.affiliate-chip svg {
  color: var(--lime);
  flex-shrink: 0;
}

/* Hero Actions */
.affiliate-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.affiliate-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--lime);
  color: #0f140a;
  border: 0;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: none;
  cursor: pointer;
  min-height: 44px;
}

.affiliate-btn-primary:hover {
  background: #d1ff7b;
  transform: translateY(-2px);
  box-shadow: none;
  color: #0a0e07;
}

.affiliate-btn-primary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.affiliate-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e4e7e1;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: 44px;
}

.affiliate-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.affiliate-btn-secondary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* Section Header Shared */
.affiliate-section-header {
  text-align: center;
  margin-bottom: 24px;
}

.affiliate-mini-eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.affiliate-section-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.affiliate-section-sub {
  font-size: 14px;
  color: #8e9688;
  margin: 0 auto;
  max-width: 520px;
}

/* 3 Core Perks Grid */
.affiliate-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.affiliate-perk-card {
  display: flex;
  flex-direction: column;
  background: rgba(19, 25, 19, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 26px 22px;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.affiliate-perk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(185, 255, 56, 0.35);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7);
}

.affiliate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.affiliate-perk-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(185, 255, 56, 0.1);
  border: 1px solid rgba(185, 255, 56, 0.25);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.affiliate-card-badge {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--lime);
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
}

.affiliate-perk-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.affiliate-perk-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #a6aea0;
  margin: 0 0 16px;
  flex-grow: 1;
}

.affiliate-perk-pill {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lime);
}

/* Action & Onboarding Combined Card */
.affiliate-action-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(20, 27, 20, 0.85) 0%, rgba(13, 18, 13, 0.95) 100%);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 16px 45px -15px rgba(0, 0, 0, 0.7);
}

.affiliate-action-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 100%);
  max-width: 100%;
  height: 180px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.affiliate-action-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.affiliate-action-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.affiliate-action-sub {
  font-size: 14px;
  color: #b4bcaf;
  max-width: 520px;
  margin: 0;
  line-height: 1.5;
}

/* Compact 3-Step Timeline */
.affiliate-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
  width: 100%;
  max-width: 760px;
}

.affiliate-timeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  flex: 1;
  text-align: left;
}

.affiliate-timeline-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(185, 255, 56, 0.15);
  border: 1px solid var(--lime);
  color: var(--lime);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.affiliate-timeline-body strong {
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.affiliate-timeline-body p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9ea697;
}

.affiliate-timeline-sep {
  width: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.affiliate-action-btn-row {
  margin-top: 4px;
}

.affiliate-discord-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lime);
  color: #0e130a;
  padding: 14px 34px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 48px;
  transition: all 0.2s ease;
  box-shadow: none;
}

.affiliate-discord-main-btn:hover {
  background: #d1ff7b;
  transform: translateY(-2px);
  box-shadow: none;
  color: #0a0e07;
}

.affiliate-discord-main-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.affiliate-tebex-disclaimer {
  font-size: 11.5px;
  color: #727a6c;
  margin-top: 6px;
}

/* Responsive Reflow Breakpoints */
@media (max-width: 768px) {
  .affiliate-page {
    gap: 36px;
    padding: 24px 16px 60px;
  }
  .affiliate-perks-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .affiliate-timeline {
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
  }
  .affiliate-timeline-sep {
    display: none;
  }
  .affiliate-timeline-step {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
  }
  .affiliate-action-card {
    padding: 24px 16px;
  }
  .affiliate-btn-primary,
  .affiliate-btn-secondary,
  .affiliate-discord-main-btn {
    width: 100%;
    justify-content: center;
  }
  .affiliate-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .affiliate-audience-chips {
    gap: 6px;
  }
  .affiliate-chip {
    font-size: 11px;
    padding: 5px 11px;
  }
}


/* app/styles/06-peds-landing.css */
/* ===== FiveM Peds Landing Page Styles ===== */
.peds-landing {
  padding-block: 28px 24px;
}
.peds-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  font-size: 12.5px;
  color: var(--muted);
}
.peds-breadcrumbs li a {
  color: var(--muted);
  transition: color .18s;
}
.peds-breadcrumbs li a:hover {
  color: var(--lime);
}
.peds-breadcrumb-sep {
  color: var(--border-strong);
}
.peds-breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* Peds Hero Ambient Artwork Background */
.peds-hero-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: -24px;
  padding-top: 24px;
  margin-bottom: 30px;
}

.peds-hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.peds-hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('peds-hero-bg.jpg');
  background-position: center 15%;
  background-size: cover;
  background-repeat: no-repeat;
  /* Clearly visible character artwork */
  opacity: 0.55;
  filter: contrast(1.08) brightness(0.95);
  /* Short bottom-only gradient fade: image remains fully visible until 72% */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateZ(0);
}

.peds-hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Open and transparent across characters, short smooth fade into #171717 at bottom only */
  background: linear-gradient(
    to bottom,
    rgba(23, 23, 23, 0.22) 0%,
    rgba(23, 23, 23, 0.22) 65%,
    rgba(23, 23, 23, 0.72) 86%,
    #171717 100%
  );
}

.peds-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  margin: 0 auto 60px;
  padding: 30px 16px 10px;
}
.peds-hero .eyebrow {
  font-size: 11.5px;
  letter-spacing: .25em;
  margin-bottom: 16px;
  color: var(--lime);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.peds-hero h1 {
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-bottom: 22px;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95);
}
.peds-hero .lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: #d1d5db;
  max-width: 720px;
  margin: 0 auto 34px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
.peds-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.peds-hero-actions .button {
  min-width: 140px;
  justify-content: center;
}
/* Hero Free Ped Callout Banner */
.peds-hero-free-banner {
  margin-top: 28px;
  background: linear-gradient(135deg, rgba(24, 28, 22, 0.78) 0%, rgba(18, 21, 17, 0.9) 100%);
  border: 1px solid rgba(185, 255, 56, 0.24);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 35px -15px rgba(0, 0, 0, 0.65), 0 0 24px -10px rgba(185, 255, 56, 0.12);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.peds-hero-free-banner:hover {
  border-color: rgba(185, 255, 56, 0.38);
  box-shadow: 0 16px 40px -15px rgba(0, 0, 0, 0.75), 0 0 28px -8px rgba(185, 255, 56, 0.2);
}
.peds-hero-free-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.peds-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.28);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 7px;
}
.peds-hero-free-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #f5f5f3;
  margin: 0;
}
.peds-free-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: #0d110b;
  font-family: var(--font-head);
  font-weight: 850;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.peds-free-cta-btn:hover {
  background: #c5ff4d;
  color: #0a0d08;
  transform: translateY(-2px);
  box-shadow: none;
}
.peds-free-cta-arrow {
  transition: transform .2s ease;
}
.peds-free-cta-btn:hover .peds-free-cta-arrow {
  transform: translateX(3px);
}
@media (max-width: 680px) {
  .peds-hero-free-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px 18px;
    gap: 16px;
  }
  .peds-hero-free-body {
    text-align: center;
  }
  .peds-free-badge {
    margin: 0 auto 8px;
  }
  .peds-free-cta-btn {
    width: 100%;
    justify-content: center;
  }
}
.peds-hero-subtext {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.peds-sublink {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  transition: color .15s;
}
.peds-sublink:hover {
  color: #d1ff7b;
}
.peds-section {
  margin-bottom: 86px;
}
.peds-section-header {
  margin-bottom: 38px;
}
.peds-section-header.text-center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.peds-section-header h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 850;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.peds-section-subtitle {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.peds-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.peds-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: transform .2s var(--ease), border-color .2s ease;
}
.peds-feature-card:hover {
  border-color: rgba(185, 255, 56, 0.4);
  transform: translateY(-2px);
}
.peds-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(185, 255, 56, 0.1);
  color: var(--lime);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.peds-feature-card h3 {
  font-size: 15.5px;
  font-weight: 750;
  margin-bottom: 10px;
  color: var(--text);
  letter-spacing: -.02em;
}
.peds-feature-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.62;
  margin: 0;
}
.peds-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.peds-type-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.escrow-card {
  border-color: rgba(185, 255, 56, 0.35);
  box-shadow: 0 12px 38px -20px rgba(185, 255, 56, 0.18);
}
.escrow-card:hover {
  border-color: var(--lime);
}
.open-source-card:hover {
  border-color: var(--border-strong);
}
.peds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 16px;
  width: fit-content;
}
.escrow-badge {
  background: rgba(185, 255, 56, 0.14);
  color: var(--lime);
  border: 1px solid rgba(185, 255, 56, 0.32);
}
.open-badge {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
}
.peds-type-card h3 {
  font-size: 23px;
  font-weight: 850;
  margin-bottom: 6px;
}
.peds-type-tag {
  font-size: 13px;
  color: var(--lime);
  font-weight: 600;
  margin-bottom: 18px;
}
.peds-type-desc {
  font-size: 13.8px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.peds-ideal-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13px;
}
.peds-ideal-box strong {
  display: block;
  color: var(--text);
  margin-bottom: 5px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.peds-ideal-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.peds-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.peds-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
}
.peds-checklist svg {
  color: var(--lime);
  flex-shrink: 0;
}
.peds-type-footer {
  margin-top: auto;
  display: flex;
  width: 100%;
}
.peds-type-footer .button {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
}
.peds-type-footer .button:hover {
  box-shadow: none;
}
.peds-highlights-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 20px;
}
.peds-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
  font-size: 12.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .18s;
  white-space: nowrap;
}
.peds-view-all-link:hover {
  color: #d1ff7b;
  transform: translateX(2px);
}
/* Escrow & Open Source Split Showcase (Side-by-side inspired by Subscription Showcase) */
.peds-showcase-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 34px;
}
.peds-split-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(100% 120% at 0% 0%, #1c241c 0%, #151815 55%, #111311 100%);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), 0 0 40px -20px rgba(185, 255, 56, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.peds-split-card:hover {
  border-color: rgba(185, 255, 56, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.9), 0 0 45px -15px rgba(185, 255, 56, 0.25);
}
.peds-split-ambient-glow {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.1) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
}
.peds-split-card-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #121412;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
}
.peds-split-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.peds-split-card:hover .peds-split-card-media img {
  transform: scale(1.04);
}
.peds-split-tag-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 17, 15, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(185, 255, 56, 0.35);
  color: var(--lime);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.peds-split-tag-badge.open-badge-accent {
  border-color: rgba(185, 255, 56, 0.45);
  color: #c9ff59;
}
.peds-split-card-body {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
  gap: 12px;
}
.peds-split-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.peds-split-cat {
  color: var(--lime);
}
.peds-split-cat.open-cat-accent {
  color: var(--lime);
}
.peds-split-badge-pill {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}
.peds-split-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 850;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.peds-split-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #d6dad2;
  margin: 0;
}
.peds-split-feature-tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.peds-split-feature-tags::-webkit-scrollbar {
  display: none;
}
.peds-split-feature-tags span {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: #d0d6cb;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 9px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.peds-split-feature-tags span:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
}
/* Split Showcase Callout Boxes (Condensed Licensing Guidelines) */
.peds-split-callouts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
}
.peds-split-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s ease;
}
.peds-split-callout:hover {
  border-color: rgba(255, 255, 255, 0.14);
}
.peds-split-callout-warning {
  background: rgba(255, 171, 0, 0.04);
  border-color: rgba(255, 171, 0, 0.22);
}
.peds-split-callout-warning:hover {
  border-color: rgba(255, 171, 0, 0.38);
}
.peds-split-callout-warning .peds-split-callout-icon {
  color: #ffb726;
  background: rgba(255, 171, 0, 0.12);
}
.peds-split-callout-ideal {
  background: rgba(185, 255, 56, 0.035);
  border-color: rgba(185, 255, 56, 0.2);
}
.peds-split-callout-ideal:hover {
  border-color: rgba(185, 255, 56, 0.38);
}
.peds-split-callout-ideal .peds-split-callout-icon {
  color: var(--lime);
  background: rgba(185, 255, 56, 0.12);
}
.peds-split-callout-notice {
  background: rgba(56, 189, 248, 0.035);
  border-color: rgba(56, 189, 248, 0.2);
}
.peds-split-callout-notice:hover {
  border-color: rgba(56, 189, 248, 0.38);
}
.peds-split-callout-notice .peds-split-callout-icon {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}
.peds-split-callout-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  background: rgba(185, 255, 56, 0.1);
}
.peds-split-callout-body {
  flex: 1;
  min-width: 0;
}
.peds-split-callout-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffffff;
  margin-bottom: 3px;
}
.peds-split-callout-text {
  font-size: 12px;
  line-height: 1.5;
  color: #b8c0b2;
  margin: 0;
}
.peds-split-callout-text a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.peds-split-callout-text a:hover {
  color: #d1ff7b;
}
.peds-split-perks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: auto;
}
.peds-split-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #e5e7eb;
  line-height: 1.45;
}
.peds-split-perk-check {
  color: var(--lime);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}
.peds-split-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.peds-split-pricing {
  display: flex;
  flex-direction: column;
}
.peds-split-price-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.peds-split-price-val {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1.1;
}
.peds-split-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: #0e120d;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.peds-split-cta-btn:hover {
  background: #c5ff4d;
  color: #0a0d08;
  transform: translateY(-2px);
  box-shadow: none;
}
.peds-split-cta-btn svg {
  transition: transform .2s ease;
}
.peds-split-cta-btn:hover svg {
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .peds-showcase-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 520px) {
  .peds-split-card-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .peds-split-cta-btn {
    justify-content: center;
  }
}
.peds-catalog-callout {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.peds-callout-text h3 {
  font-size: 15.5px;
  font-weight: 750;
  margin: 0 0 4px;
}
.peds-callout-text p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.peds-callout-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.peds-callout-actions .button {
  gap: 8px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .03em;
  padding: 9px 16px;
}
.peds-free-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 8px 12px;
  transition: color .15s;
}
.peds-free-btn:hover {
  color: var(--lime);
}
.peds-matrix-container {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}
.peds-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
  min-width: 620px;
}
.peds-matrix-table th,
.peds-matrix-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.peds-matrix-table thead th {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(255, 255, 255, 0.02);
}
.matrix-feature-col,
.peds-matrix-table thead th:first-child {
  color: var(--lime);
  font-weight: 850;
}
.matrix-escrow-col {
  color: #ffffff;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.matrix-open-col {
  color: #ffffff;
}
.matrix-col-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}
.matrix-col-header svg {
  color: #ffffff;
}
.peds-matrix-table tbody tr:last-child th,
.peds-matrix-table tbody tr:last-child td {
  border-bottom: 0;
}
.peds-matrix-table tbody th {
  color: var(--lime);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.peds-matrix-table tbody td {
  color: #ffffff;
}
.peds-matrix-table tbody td:nth-child(2) {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: #ffffff;
}
.peds-matrix-table tbody td:nth-child(3) {
  color: #ffffff;
}
.peds-faq-list {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.peds-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color .2s ease;
}
.peds-faq-item:hover {
  border-color: var(--border-strong);
}
.peds-faq-item[open] {
  border-color: rgba(185, 255, 56, 0.38);
}
.peds-faq-item summary {
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.peds-faq-item summary::-webkit-details-marker {
  display: none;
}
.peds-faq-question {
  padding-right: 16px;
}
.peds-faq-item summary:after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--lime);
  flex-shrink: 0;
}
.peds-faq-item[open] summary:after {
  content: '−';
}
.peds-faq-answer {
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.peds-faq-answer p {
  margin: 0;
}
.peds-final-cta {
  position: relative;
  overflow: hidden;
  background: #141712;
  border: 1px solid rgba(185, 255, 56, 0.35);
  border-radius: var(--radius-lg);
  padding: 68px 32px;
  text-align: center;
  box-shadow: 0 16px 50px -20px rgba(185, 255, 56, 0.2);
}
.peds-final-cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('showcase.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
}
.peds-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.peds-final-cta h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.peds-final-cta p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 30px;
}
.peds-final-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.peds-final-cta-actions .button {
  min-width: 150px;
  justify-content: center;
}
.peds-cta-free-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 14px;
  transition: color .15s;
}
.peds-cta-free-link:hover {
  color: var(--lime);
}

@media (max-width: 1200px) {
  .peds-highlights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .peds-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1080px) {
  .peds-types-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 800px) {
  .peds-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .peds-hero {
    margin-bottom: 52px;
    padding: 16px 0;
  }
  .peds-section {
    margin-bottom: 64px;
  }
  .peds-callout-actions {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .peds-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .peds-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .peds-highlight-info {
    padding: 10px 12px;
  }
  .peds-highlight-title {
    font-size: 13px;
  }
  .peds-highlight-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .peds-highlight-detail-btn {
    width: 100%;
    text-align: center;
  }
  .peds-type-card {
    padding: 24px 20px;
  }
  .peds-final-cta {
    padding: 40px 18px;
  }
}

/* Documentation notice alert & card doc links */
.peds-doc-alert {
  background: rgba(185, 255, 56, 0.04);
  border: 1px solid rgba(185, 255, 56, 0.28);
  border-radius: var(--radius);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.peds-doc-alert-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}
.peds-doc-alert-icon {
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}
.peds-doc-alert-content strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.peds-doc-alert-content p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.peds-doc-alert-content a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.peds-doc-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(185, 255, 56, 0.12);
  color: var(--lime);
  border: 1px solid rgba(185, 255, 56, 0.35);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: all .18s ease;
}
.peds-doc-alert-btn:hover {
  background: var(--lime);
  color: #10140c;
}
/* Product Type Callout Cards: Icon centered vertically between title & description */
.peds-callout-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.peds-callout-warning {
  border-left: 3px solid var(--lime);
  background: rgba(255, 255, 255, 0.03);
}
.peds-callout-ideal {
  border-left: 3px solid rgba(255, 255, 255, 0.22);
}
.peds-callout-notice {
  border-left: 3px solid var(--lime);
  background: rgba(185, 255, 56, 0.03);
}
.peds-callout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--lime);
  flex-shrink: 0;
}
.peds-callout-body {
  flex: 1;
  min-width: 0;
}
.peds-callout-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: 4px;
}
.peds-callout-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.peds-callout-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.peds-callout-link:hover {
  color: #d1ff7b;
}

.peds-checklist-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.peds-checklist-link:hover {
  color: #d1ff7b;
}

.peds-doc-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .15s ease, text-decoration .15s ease;
}
.peds-doc-link:hover {
  color: #d1ff7b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comparison Cards Desktop Strict Horizontal Alignment */
@media (min-width: 1081px) {
  .peds-type-header {
    min-height: 106px;
  }
  .peds-type-desc {
    min-height: 70px;
  }
  .peds-callout-box-1 {
    min-height: 86px;
  }
  .peds-callout-box-2 {
    min-height: 74px;
  }
  .peds-callout-box-3 {
    min-height: 96px;
  }
  .peds-checklist {
    min-height: 175px;
  }
}

/* Buying Guide Comparison Heading: 2-line layout */
.peds-compare-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin: 0 0 10px;
}
.peds-compare-title-top {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #ffffff;
  line-height: 1.1;
}
.peds-compare-title-sub {
  font-family: var(--font-head);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #ffffff;
  line-height: 1.2;
}

/* Frequently Asked Questions: 2-column card grid matching reference screenshot */
.peds-faq-section {
  margin-bottom: 86px;
}
.peds-faq-header {
  margin-bottom: 34px;
}
.peds-faq-main-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.03em;
  margin: 0;
  text-align: center;
}
.peds-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 100%;
  margin: 0 auto;
}
.peds-faq-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.peds-faq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color .18s ease, background .18s ease;
  position: relative;
}
.peds-faq-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #252525;
}
.peds-faq-card[open] {
  border-color: rgba(255, 255, 255, 0.18);
  background: #232323;
}
.peds-faq-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.peds-faq-summary::-webkit-details-marker {
  display: none;
}
.peds-faq-question {
  font-size: 15px;
  font-weight: 750;
  color: #ffffff;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.peds-faq-summary:after {
  content: '+';
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s ease, color .18s ease;
}
.peds-faq-card[open] .peds-faq-summary:after {
  content: '×';
  font-size: 19px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}
.peds-faq-card[open] .peds-faq-summary {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.peds-faq-answer {
  padding: 0;
}
.peds-faq-answer p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: #a3a5a1;
  white-space: pre-line;
}
.peds-faq-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.peds-faq-link:hover {
  color: #d1ff7b;
}

@media (max-width: 800px) {
  .peds-faq-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .peds-faq-col {
    gap: 12px;
  }
  .peds-faq-card {
    padding: 18px 20px;
  }
}

@media (max-width: 600px) {
  .peds-doc-alert {
    padding: 14px 16px;
  }
  .peds-doc-alert-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Find Your Perfect Character Banner Card */
.peds-banner-section {
  margin-bottom: 0;
}
.peds-banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: #121511;
  border: 1px solid rgba(185, 255, 56, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.75), 0 0 35px -15px rgba(185, 255, 56, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 42px 48px;
}
.peds-banner-bg {
  position: absolute;
  inset: 0;
  background-image: url('showcase.webp');
  background-size: cover;
  background-position: right 36%;
  opacity: 0.58;
  pointer-events: none;
  z-index: 0;
  transition: opacity .35s ease, transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.peds-banner-card:hover .peds-banner-bg {
  opacity: 0.68;
  transform: scale(1.02);
}
.peds-banner-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 18, 13, 0.96) 0%, rgba(14, 18, 13, 0.85) 46%, rgba(14, 18, 13, 0.32) 76%, rgba(14, 18, 13, 0.12) 100%);
  pointer-events: none;
  z-index: 1;
}
.peds-banner-left {
  flex: 1;
  min-width: 0;
  max-width: 680px;
  position: relative;
  z-index: 2;
}
.peds-banner-eyebrow {
  color: var(--lime);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.peds-banner-heading {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.peds-banner-desc {
  color: #f1f3f0;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.peds-banner-right {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.peds-banner-discord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #5865F2;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 9999px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  transition: all .2s cubic-bezier(.22, 1, .36, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.peds-banner-discord-btn:hover {
  background: #4752C4;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: none;
}
.peds-banner-discord-btn svg {
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .peds-banner-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 24px;
  }
  .peds-banner-right {
    width: 100%;
  }
  .peds-banner-discord-btn {
    width: 100%;
  }
}


/* app/styles/07-commission.css */
/* ==========================================================================
   Commission Page Styles (Anti-Slop, Bespoke Dark Aesthetic)
   ========================================================================== */

.commission-page {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Hero Section */
.comm-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 0 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.comm-ambient-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 100%);
  max-width: 100%;
  height: 280px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.comm-kicker-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comm-hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  max-width: 860px;
}

.comm-highlight {
  color: var(--lime);
  text-shadow: 0 0 35px rgba(185, 255, 56, 0.24);
}

.comm-hero-lead {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.65;
  color: #b4bcaf;
  max-width: 680px;
  margin: 0 auto;
}

/* Feature Trust Pills */
.comm-trust-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 12px;
}

.comm-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 12px;
  color: #d1d8cd;
  font-weight: 500;
}

.comm-trust-pill svg {
  color: var(--lime);
}

/* Hero Actions */
.comm-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.comm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lime);
  color: #0f140a;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}

.comm-btn-primary:hover {
  background: #cbfb60;
  color: #000;
  transform: translateY(-2px);
  box-shadow: none;
}

.comm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.18s var(--ease);
}

.comm-btn-secondary:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.06);
}

/* Section Header Shared */
.comm-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.comm-mini-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.comm-section-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.comm-section-sub {
  font-size: 14px;
  color: #9fa49c;
  max-width: 600px;
  margin: 0 auto;
}

/* 4 Core Services Grid */
.comm-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.comm-service-card {
  background: radial-gradient(120% 90% at 10% 0%, #20241f, #181a17 80%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.22s var(--ease);
  position: relative;
  overflow: hidden;
}

.comm-service-card:hover {
  border-color: rgba(185, 255, 56, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7), 0 0 24px -10px rgba(185, 255, 56, 0.2);
}

.comm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.comm-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.25);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comm-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9d2c4;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
}

.comm-service-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.comm-service-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #a4aca0;
  margin: 0 0 18px;
}

.comm-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: 16px;
}

.comm-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}

.comm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #cfd6cb;
  line-height: 1.45;
}

.comm-checklist li svg {
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Interactive Ticket Builder */
.comm-builder-card {
  background: radial-gradient(140% 100% at 50% 0%, #1f251d 0%, #151814 100%);
  border: 1px solid rgba(185, 255, 56, 0.32);
  border-radius: 22px;
  padding: 34px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), 0 0 40px -15px rgba(185, 255, 56, 0.15);
}

.comm-builder-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 30px;
}

.comm-builder-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.09);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.comm-builder-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.comm-builder-desc {
  font-size: 13.5px;
  color: #abb3a6;
  margin: 0;
  line-height: 1.55;
}

.comm-builder-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
}

.comm-builder-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comm-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comm-form-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  font-weight: 700;
  color: #e5eae1;
}

.comm-form-sublabel {
  font-size: 11px;
  font-weight: 400;
  color: #8c9288;
}

.comm-checkbox-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.comm-check-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  color: inherit;
  transition: all 0.18s var(--ease);
  cursor: pointer;
}

.comm-check-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.comm-check-option.selected {
  background: rgba(185, 255, 56, 0.07);
  border-color: rgba(185, 255, 56, 0.4);
}

.comm-custom-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.25);
  color: var(--lime);
  transition: all 0.15s ease;
}

.comm-check-option.selected .comm-custom-checkbox {
  border-color: var(--lime);
  background: rgba(185, 255, 56, 0.2);
}

.comm-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comm-check-title {
  font-size: 13px;
  color: #f1f4ee;
  font-weight: 700;
}

.comm-check-hint {
  font-size: 11.5px;
  color: #92998f;
  line-height: 1.4;
}

.comm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comm-input,
.comm-select,
.comm-textarea {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f3;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.18s ease;
  width: 100%;
  box-sizing: border-box;
}

.comm-input:focus,
.comm-select:focus,
.comm-textarea:focus {
  outline: none;
  border-color: var(--lime);
}

.comm-textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Builder Output Column */
.comm-builder-output {
  display: flex;
  flex-direction: column;
  background: rgba(12, 14, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
}

.comm-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.comm-output-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b0b8ac;
}

.comm-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e5ede0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.comm-copy-btn:hover {
  background: rgba(185, 255, 56, 0.1);
  border-color: var(--lime);
  color: var(--lime);
}

.comm-copy-btn.copied {
  background: var(--lime);
  border-color: var(--lime);
  color: #10140c;
}

.comm-output-snippet {
  background: #090b08;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px;
  color: #d1dacb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0 0 16px;
  flex: 1;
  min-height: 200px;
  overflow: auto;
}

.comm-output-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comm-launch-discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #5865f2;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}

.comm-launch-discord-btn:hover {
  background: #4752c4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none;
}

.comm-output-microcopy {
  font-size: 11px;
  color: #848b80;
  text-align: center;
  margin: 0;
}

/* Production Pipeline Grid */
.comm-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.comm-step-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease;
}

.comm-step-card:hover {
  border-color: rgba(185, 255, 56, 0.3);
}

.comm-step-num {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}

.comm-step-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}

.comm-step-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #9ba397;
  margin: 0;
}

/* What to Prepare Section */
.comm-prep-card {
  background: radial-gradient(120% 90% at 50% 0%, #20271d 0%, #171a16 100%);
  border: 1px solid rgba(185, 255, 56, 0.25);
  border-radius: 20px;
  padding: 32px;
}

.comm-prep-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.comm-prep-desc {
  font-size: 13.5px;
  color: #a4aca0;
  margin: 0 0 24px;
}

.comm-prep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.comm-prep-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
}

.comm-prep-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--lime);
  margin-bottom: 4px;
}

.comm-prep-item p {
  font-size: 12.5px;
  color: #bcc3b8;
  margin: 0;
  line-height: 1.45;
}

/* Policy Banner */
.comm-policy-banner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px;
}

.comm-policy-col {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.comm-policy-col svg {
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}

.comm-policy-col strong {
  display: block;
  font-size: 13.5px;
  color: #ffffff;
  margin-bottom: 4px;
}

.comm-policy-col p {
  font-size: 12px;
  line-height: 1.5;
  color: #92998f;
  margin: 0;
}

.comm-inline-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.comm-inline-link:hover {
  color: #dcff82;
}

/* FAQ Section */
.comm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}

.comm-faq-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.18s ease;
  overflow: hidden;
  padding: 0;
}

.comm-faq-card[open] {
  border-color: rgba(185, 255, 56, 0.35);
  background: rgba(185, 255, 56, 0.03);
}

.comm-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.comm-faq-question {
  font-size: 15px;
  font-weight: 700;
  color: #f1f4ee;
  letter-spacing: -0.01em;
}

.comm-faq-body {
  padding: 0 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
}

.comm-faq-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #aeb6aa;
  margin: 12px 0 0;
}

/* Bottom Discord CTA */
.comm-bottom-cta {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #202b1b 0%, #141712 100%);
  border: 1px solid rgba(185, 255, 56, 0.35);
  border-radius: 24px;
  padding: 44px 28px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(185, 255, 56, 0.2);
}

.comm-cta-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.comm-cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.comm-cta-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.comm-cta-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #b1b9ad;
  margin: 0 0 24px;
}

.comm-discord-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #5865f2;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}

.comm-discord-cta-btn:hover {
  background: #4752c4;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}

.comm-cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9ff38;
  box-shadow: none;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .comm-builder-grid {
    grid-template-columns: 1fr;
  }
  .comm-pipeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .comm-services-grid {
    grid-template-columns: 1fr;
  }
  .comm-policy-banner {
    grid-template-columns: 1fr;
  }
  .comm-prep-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .comm-form-row {
    grid-template-columns: 1fr;
  }
  .comm-pipeline-grid {
    grid-template-columns: 1fr;
  }
  .comm-builder-card {
    padding: 22px 16px;
  }
  .comm-service-card {
    padding: 22px 18px;
  }
  .comm-trust-pills {
    flex-direction: column;
    align-items: center;
  }
  .comm-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .comm-btn-primary,
  .comm-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* app/styles/08-refund.css */
/* ==========================================================================
   Refund Policy Page Styles (Bespoke, Clean & High-Contrast)
   ========================================================================== */

.refund-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Hero */
.refund-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 6px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.refund-ambient-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 100%);
  height: 260px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.refund-kicker-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refund-hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.refund-highlight {
  color: var(--lime);
  text-shadow: 0 0 35px rgba(185, 255, 56, 0.24);
}

.refund-hero-lead {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  line-height: 1.65;
  color: #b4bcaf;
  max-width: 680px;
  margin: 0 auto;
}

.refund-trust-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 0;
}

.refund-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 12px;
  color: #d1d8cd;
  font-weight: 500;
}

.refund-trust-pill svg {
  color: var(--lime);
}

/* 14-Day Highlight Banner */
.refund-highlight-card {
  background: radial-gradient(120% 90% at 20% 0%, #22291e 0%, #171b15 100%);
  border: 1px solid rgba(185, 255, 56, 0.35);
  border-radius: 20px;
  padding: 30px 34px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.65), 0 0 30px -12px rgba(185, 255, 56, 0.15);
}

.refund-highlight-content {
  display: flex;
  align-items: center;
  gap: 32px;
}

.refund-metric-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid var(--lime);
  border-radius: 16px;
  padding: 16px 24px;
  min-width: 120px;
  flex-shrink: 0;
  box-shadow: 0 0 25px -6px rgba(185, 255, 56, 0.3);
}

.refund-metric-num {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  color: var(--lime);
  letter-spacing: -0.04em;
}

.refund-metric-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5ede0;
  margin-top: 4px;
}

.refund-highlight-text h2 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.refund-highlight-text p {
  font-size: 14px;
  line-height: 1.65;
  color: #b8c1b3;
  margin: 0;
}

.refund-highlight-text strong {
  color: #ffffff;
}

/* Section Header Shared */
.refund-section-header {
  text-align: center;
  margin-bottom: 28px;
}

.refund-mini-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.refund-section-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.refund-section-sub {
  font-size: 14px;
  color: #9fa49c;
  max-width: 620px;
  margin: 0 auto;
}

/* Eligibility Grid */
.refund-eligibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.refund-eligibility-card {
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.2s var(--ease);
}

.refund-card-eligible {
  background: radial-gradient(120% 90% at 10% 0%, #1e261a, #151813 80%);
  border: 1px solid rgba(185, 255, 56, 0.35);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px -10px rgba(185, 255, 56, 0.12);
}

.refund-card-ineligible {
  background: radial-gradient(120% 90% at 10% 0%, #26221d, #191714 80%);
  border: 1px solid rgba(255, 170, 56, 0.3);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.refund-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.refund-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.refund-card-badge.eligible {
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.35);
  color: var(--lime);
}

.refund-card-badge.ineligible {
  background: rgba(255, 170, 56, 0.12);
  border: 1px solid rgba(255, 170, 56, 0.35);
  color: #ffb854;
}

.refund-window-tag {
  font-size: 11px;
  color: #aeb6aa;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.refund-window-tag.final {
  color: #ffb854;
}

.refund-card-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px;
}

.refund-card-desc {
  font-size: 13.5px;
  color: #a4aca0;
  line-height: 1.55;
  margin: 0 0 20px;
}

.refund-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.refund-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.refund-check-bullet {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(185, 255, 56, 0.1);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.refund-check-bullet.warning {
  background: rgba(255, 170, 56, 0.1);
  border-color: rgba(255, 170, 56, 0.3);
  color: #ffb854;
}

.refund-checklist strong {
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 4px;
}

.refund-checklist p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #a9b0a4;
  margin: 0;
}

.refund-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  margin-top: auto;
}

.refund-guarantee-note {
  font-size: 11.5px;
  color: #92998f;
  line-height: 1.45;
  display: block;
}

.refund-guarantee-note.warning {
  color: #cfbfa7;
}

/* Chargeback Warning Card */
.refund-warning-card {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #2a1f1b 0%, #181412 100%);
  border: 1px solid rgba(255, 99, 71, 0.38);
  border-radius: 20px;
  padding: 30px 34px;
  overflow: hidden;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
}

.refund-warning-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 99, 71, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.refund-warning-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.refund-warning-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(255, 99, 71, 0.12);
  border: 1.5px solid rgba(255, 99, 71, 0.4);
  color: #ff6b57;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px -4px rgba(255, 99, 71, 0.3);
}

.refund-warning-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.refund-warning-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #e5ded9;
  margin: 0 0 10px;
}

.refund-warning-desc strong {
  color: #ff7f6e;
}

.refund-warning-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: #aba19b;
  margin: 0;
}

/* Provider Links Grid */
.refund-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.refund-provider-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s var(--ease);
  text-decoration: none;
  color: inherit;
}

.refund-provider-card:hover {
  border-color: rgba(185, 255, 56, 0.35);
  background: rgba(185, 255, 56, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}

.refund-provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.refund-provider-logo-wrap {
  display: flex;
  align-items: center;
  height: 24px;
}

.refund-cfx-badge {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: 0.04em;
}

.refund-provider-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--lime);
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.2);
  padding: 3px 10px;
  border-radius: 999px;
}

.refund-provider-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
}

.refund-provider-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #9ba397;
  margin: 0 0 16px;
  flex: 1;
}

.refund-provider-url {
  font-size: 11.5px;
  color: #7d8579;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Steps Grid */
.refund-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.refund-step-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}

.refund-step-card:hover {
  border-color: rgba(185, 255, 56, 0.3);
}

.refund-step-num {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}

.refund-step-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}

.refund-step-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #9ba397;
  margin: 0;
}

.refund-step-desc code {
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--lime);
}

/* Pre-Purchase Questions Card */
.refund-contact-card {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #202b1b 0%, #141712 100%);
  border: 1px solid rgba(185, 255, 56, 0.35);
  border-radius: 24px;
  padding: 44px 28px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(185, 255, 56, 0.2);
}

.refund-contact-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.refund-contact-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.refund-contact-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.refund-contact-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #b1b9ad;
  margin: 0 0 24px;
}

.refund-contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.refund-btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #5865f2;
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}

.refund-btn-discord:hover {
  background: #4752c4;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}

.refund-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.18s var(--ease);
}

.refund-btn-secondary:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.06);
}

.refund-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.refund-btn-tertiary:hover {
  color: #d8ff85;
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .refund-highlight-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .refund-eligibility-grid {
    grid-template-columns: 1fr;
  }
  .refund-provider-grid {
    grid-template-columns: 1fr;
  }
  .refund-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .refund-steps-grid {
    grid-template-columns: 1fr;
  }
  .refund-warning-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .refund-trust-pills {
    flex-direction: column;
    align-items: center;
  }
  .refund-contact-actions {
    flex-direction: column;
    width: 100%;
  }
  .refund-btn-discord,
  .refund-btn-secondary,
  .refund-btn-tertiary {
    width: 100%;
    justify-content: center;
  }
}


/* app/styles/09-faq.css */
/* ==========================================================================
   FAQ Page Styles (Interactive Accordion, Live Search, Dark Aesthetics)
   ========================================================================== */

.faq-page {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

/* Hero */
.faq-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 6px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.faq-ambient-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 100%);
  height: 260px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.faq-kicker-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.faq-highlight {
  color: var(--lime);
  text-shadow: 0 0 35px rgba(185, 255, 56, 0.24);
}

.faq-hero-lead {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  line-height: 1.65;
  color: #b4bcaf;
  max-width: 680px;
  margin: 0 auto;
}

.faq-topic-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 0;
}

.faq-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 12px;
  color: #d1d8cd;
  font-weight: 500;
}

.faq-topic-pill svg {
  color: var(--lime);
}

/* Interactive Controls */
.faq-interactive-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.faq-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  flex: 1;
  min-width: 280px;
  transition: border-color 0.18s ease;
}

.faq-search-box:focus-within {
  border-color: rgba(255, 255, 255, 0.35);
}

.faq-search-box svg {
  color: #8c9389;
  flex-shrink: 0;
}

.faq-search-input {
  background: none;
  border: 0;
  color: #f5f5f3;
  font-size: 13.5px;
  width: 100%;
  outline: none;
  font-family: inherit;
}

.faq-search-input::placeholder {
  color: #7b8377;
}

.faq-search-clear {
  background: none;
  border: 0;
  color: #9aa195;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.faq-search-clear:hover {
  color: #ffffff;
}

.faq-expand-toggle-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: #a3a5a1;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.faq-expand-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  background: #252525;
}

/* Category Filter Pills */
.faq-category-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.faq-cat-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: #a3a5a1;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.faq-cat-pill:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  background: #252525;
}

.faq-cat-pill.active {
  background: #232323;
  border-color: var(--lime);
  color: var(--lime);
  font-weight: 700;
}

/* Filter Status */
.faq-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #9da599;
  padding: 0 4px;
}

.faq-filter-status strong {
  color: var(--lime);
}

.faq-reset-link {
  background: none;
  border: 0;
  color: var(--lime);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.faq-reset-link:hover {
  color: #dbff82;
}

/* Question Header in List */
.faq-question-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.faq-item-category {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Rich Answer Formatting (Tailored for Subscription Card Style) */
.faq-answer-rich {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 2px;
}

.faq-answer-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: #a3a5a1;
}

.faq-answer-lead strong {
  color: #ffffff;
}

.faq-inline-link {
  color: var(--lime);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.faq-inline-link:hover {
  color: #d1ff7b;
}

.faq-code-tag {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--lime);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12.5px;
  font-family: monospace;
}

.faq-code-block {
  background: #141414;
  border: 1px solid var(--border);
  border-left: 3px solid var(--lime);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: monospace;
  font-size: 13px;
  color: #e5ffe0;
  margin-top: 6px;
}

/* Step list ordered */
.faq-steps-ordered {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-ordered-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.faq-step-pill {
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-step-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-step-detail strong {
  font-size: 13.5px;
  color: #ffffff;
}

.faq-step-detail p {
  font-size: 13px;
  color: #a3a5a1;
  line-height: 1.55;
  margin: 0;
}

.faq-badge-new {
  display: inline-block;
  background: var(--lime);
  color: #0d1109;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  margin-left: 4px;
}

/* Step mini grid */
.faq-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.faq-step-mini {
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.faq-step-mini svg {
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-step-mini-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(185, 255, 56, 0.15);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-step-mini strong {
  display: block;
  font-size: 13.5px;
  color: #ffffff;
  margin-bottom: 3px;
}

.faq-step-mini p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #a3a5a1;
  margin: 0;
}

/* Callout Alerts */
.faq-alert-callout {
  display: flex;
  gap: 14px;
  background: rgba(255, 170, 0, 0.06);
  border: 1px solid rgba(255, 170, 0, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
  align-items: flex-start;
}

.faq-alert-callout.warning .faq-alert-icon {
  color: #ffb830;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-alert-text strong {
  display: block;
  font-size: 13.5px;
  color: #ffe6b0;
  margin-bottom: 4px;
}

.faq-alert-text p {
  font-size: 13px;
  line-height: 1.55;
  color: #d1c8b8;
  margin: 0;
}

/* Spec comparison grid */
.faq-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.faq-spec-card {
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-spec-card.highlight {
  background: #1b1f18;
  border-color: rgba(185, 255, 56, 0.25);
}

.faq-spec-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.faq-spec-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #9ba397;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-spec-badge.unlocked {
  background: rgba(185, 255, 56, 0.12);
  color: var(--lime);
  border-color: rgba(185, 255, 56, 0.35);
}

.faq-spec-badge.locked {
  background: rgba(255, 255, 255, 0.05);
  color: #aeb5a9;
}

.faq-spec-badge.recommended {
  background: rgba(185, 255, 56, 0.15);
  color: var(--lime);
  border-color: var(--lime);
}

.faq-spec-card strong {
  font-size: 14.5px;
  color: #ffffff;
}

.faq-spec-card p {
  font-size: 13px;
  line-height: 1.55;
  color: #a3a5a1;
  margin: 0;
}

/* CTA buttons inside answers */
.faq-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.faq-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.18s ease;
  text-decoration: none;
}

.faq-inline-btn.primary {
  background: var(--lime);
  color: #0f140a;
}

.faq-inline-btn.primary:hover {
  background: #d1ff7b;
  transform: translateY(-1px);
}

.faq-inline-btn.primary.discord {
  background: #5865f2;
  color: #ffffff;
}

.faq-inline-btn.primary.discord:hover {
  background: #4752c4;
}

.faq-inline-btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.faq-inline-btn.secondary:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.05);
}

/* Empty State */
.faq-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.faq-empty-icon {
  color: var(--lime);
  margin-bottom: 14px;
}

.faq-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}

.faq-empty-desc {
  font-size: 13.5px;
  color: #92998e;
  max-width: 440px;
  margin: 0 auto 20px;
}

.faq-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Escrow Spotlight Card (Clean Surface style) */
.faq-escrow-spotlight {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  overflow: hidden;
  margin-top: 14px;
}

.faq-spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.09);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.faq-spotlight-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.faq-spotlight-lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: #b1b9ad;
  max-width: 780px;
  margin: 0 0 28px;
}

.faq-escrow-points-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.faq-escrow-point {
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.faq-point-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(185, 255, 56, 0.1);
  border: 1px solid rgba(185, 255, 56, 0.25);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-escrow-point strong {
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 4px;
}

.faq-escrow-point p {
  font-size: 12px;
  line-height: 1.5;
  color: #a0a89c;
  margin: 0;
}

/* Still Have Questions Banner */
.faq-help-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 38px 28px;
  text-align: center;
}

.faq-help-content {
  max-width: 640px;
  margin: 0 auto;
}

.faq-help-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.faq-help-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: #b1b9ad;
  margin: 0 0 24px;
}

.faq-help-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.faq-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #5865f2;
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}

.faq-discord-btn:hover {
  background: #4752c4;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}

.faq-comm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.18s var(--ease);
}

.faq-comm-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.06);
}

.faq-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-catalog-link:hover {
  color: #d8ff85;
}

/* Responsive */
@media (max-width: 900px) {
  .faq-escrow-points-grid {
    grid-template-columns: 1fr;
  }
  .faq-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .faq-topic-pills {
    flex-direction: column;
    align-items: center;
  }
  .faq-help-actions {
    flex-direction: column;
    width: 100%;
  }
  .faq-discord-btn,
  .faq-comm-btn,
  .faq-catalog-link {
    width: 100%;
    justify-content: center;
  }
}
/* app/styles/10-product.css */
/* ==========================================================================
   PRODUCT PURCHASE PANEL & PREVIEW SHOWCASE (UI/UX Redesign)
   ========================================================================== */

/* Main Purchase Card */
/* Description text justified; feature lists are badges that keep a bullet dot */
.product-description {
  text-align: justify;
  hyphens: auto;
}
.product-description h2,
.product-description h3,
.product-description h4 {
  text-align: left;
}
.product-description ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.product-description ul > li {
  position: relative;
  max-width: 100%;
  padding: 9px 12px 9px 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.product-description ul > li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: calc(9px + 0.8em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}
.product-description ul > li strong {
  color: var(--lime);
}
.product-description ul > li p {
  margin: 0;
}
.product-description a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-frameworks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.product-frameworks > li {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
@media (min-width: 801px) {
  /* Row 1: main image | tags + name + buy card (same height). Row 2: thumbs | tabs. Row 3: preview video.
     Row 3 is 1fr so a long tab panel grows there, keeping the video right under the thumbnails. */
  .product-layout {
    grid-template-rows: auto auto 1fr;
    row-gap: 16px;
  }
  .product-media,
  .product-info {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
    min-width: 0;
  }
  .product-media { grid-column: 1; }
  .product-info { grid-column: 2; }
  .product-media > .gallery {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 2;
  }
  .product-media .gallery-main {
    grid-row: 1;
    display: grid;
  }
  .product-media .gallery-main .gallery-hit,
  .product-media .gallery-main .product-image {
    height: 100%;
  }
  .product-media .gallery-thumbs {
    grid-row: 2;
    margin-top: 0;
    align-self: start;
  }
  .product-media > .product-preview-section {
    grid-row: 3;
    align-self: start;
  }
  .product-summary {
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .product-summary > .product-buy-card {
    flex: 1;
    margin-bottom: 0;
  }
  .product-info > .ptabs {
    grid-row: 2 / span 2;
    margin-top: 0;
    align-self: start;
  }
}
@media (max-width: 800px) {
  /* Mobile shows four related products */
  .related .product-grid > :nth-child(n + 5) {
    display: none;
  }
}
.product-buy-card {
  background: rgba(18, 22, 19, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 26px;
  margin-bottom: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-buy-card:hover {
  border-color: rgba(185, 255, 56, 0.22);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.75), 0 0 28px -8px rgba(185, 255, 56, 0.12);
}

/* Optional Segmented Switcher (One-time vs Subscription) */
.product-buy-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(10, 12, 10, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

.product-segmented-btn {
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}

.product-segmented-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.product-segmented-btn.active {
  background: var(--lime);
  color: #121808;
  font-weight: 800;
  box-shadow: none;
}

/* Header Row: Price Block on Left, Wishlist on Right */
.product-buy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.product-buy-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-buy-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.product-buy-amount {
  font-family: var(--font-head);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1;
}

.product-demo-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lime);
  background: var(--lime-soft);
  border: 1px solid rgba(185, 255, 56, 0.35);
  border-radius: 999px;
  padding: 3px 9px;
}

.product-buy-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Wishlist Toggle Button (Top Right of Card) */
.product-wishlist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.product-wishlist-toggle:hover {
  background: rgba(255, 71, 114, 0.1);
  border-color: rgba(255, 71, 114, 0.5);
  color: #ff5277;
  transform: translateY(-1px);
}

.product-wishlist-toggle.active {
  background: rgba(255, 71, 114, 0.14);
  border-color: #ff4772;
  color: #ff4772;
  box-shadow: 0 0 18px -4px rgba(255, 71, 114, 0.55);
}

.product-wishlist-toggle.active svg {
  color: #ff4772;
}

/* Action Buttons Row 1: Split [Buy Now] and [Gift] */
.product-buy-actions-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

/* Primary "Buy now" Button (Screenshot replica in Pewe Neon Lime) */
.product-btn-buy-now {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lime);
  color: #121808;
  border: 1px solid var(--lime);
  border-radius: 14px;
  padding: 14px 22px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-btn-buy-now:hover:not(:disabled) {
  transform: translateY(-1.5px);
  filter: brightness(1.05);
  box-shadow: none;
}

.product-btn-buy-now:active:not(:disabled) {
  transform: translateY(0);
}

.product-btn-buy-now:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Secondary "Gift" Button */
.product-btn-gift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(26, 30, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 24px;
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.product-btn-gift:hover {
  background: rgba(36, 42, 36, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--lime);
  transform: translateY(-1px);
}

.product-btn-gift.active {
  border-color: var(--lime);
  background: rgba(185, 255, 56, 0.12);
  color: var(--lime);
  box-shadow: none;
}

/* Full Width "Add to cart" Button */
.product-btn-add-cart {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(24, 28, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 20px;
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-btn-add-cart:hover:not(:disabled) {
  background: rgba(34, 40, 34, 0.96);
  border-color: rgba(185, 255, 56, 0.45);
  color: var(--lime);
  transform: translateY(-1px);
  box-shadow: none;
}

.product-btn-add-cart:active:not(:disabled) {
  transform: translateY(0);
}

.product-btn-add-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Expandable Gift Details */
.product-gift-panel {
  background: rgba(14, 17, 14, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-gift-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Trust Badges Strip */
.product-buy-trust {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.product-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.product-trust-item svg {
  color: var(--lime);
  flex-shrink: 0;
}

/* Product Page Account Connection Card */
.product-account-card {
  margin-top: 18px;
  background: radial-gradient(130% 120% at 50% 0%, #191e17 0%, #111411 100%);
  border: 1px solid rgba(185, 255, 56, 0.22);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.product-account-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-account-card-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.product-account-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.product-account-card-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.product-account-card-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #9ea399;
}

.product-account-grid {
  display: grid;
  /* one account per row: the buy panel is too narrow for two side by side */
  grid-template-columns: 1fr;
  gap: 8px;
}

.product-account-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  transition: all 0.2s ease;
}

.product-account-step:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}

.product-account-step.connected {
  background: rgba(185, 255, 56, 0.04);
  border-color: rgba(185, 255, 56, 0.28);
}

.product-account-step-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.product-account-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-account-step-icon.cfx {
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.3);
  color: var(--lime);
}

.product-account-step-icon.discord {
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.35);
  color: #7983f5;
}

.product-account-step-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.product-account-step-name {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 750;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-account-step-status {
  font-size: 10.5px;
  color: #7a8274;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-account-step.connected .product-account-step-status {
  color: var(--lime);
  font-weight: 600;
}

.product-account-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 116px;
  height: 30px;
  padding: 0 12px;
  line-height: 1;
  border-radius: 7px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.product-account-action-btn.cfx {
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.35);
  color: #d1ff7b;
}

.product-account-action-btn.cfx:hover:not(:disabled) {
  background: var(--lime);
  border-color: var(--lime);
  color: #111808;
  transform: translateY(-1px);
}

.product-account-action-btn.discord {
  background: rgba(88, 101, 242, 0.16);
  border: 1px solid rgba(88, 101, 242, 0.45);
  color: #9aa5ff;
}

.product-account-action-btn.discord:hover:not(:disabled) {
  background: #5865f2;
  border-color: #5865f2;
  color: #ffffff;
  transform: translateY(-1px);
}

.product-account-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-account-badge-connected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  width: 116px;
  height: 30px;
  line-height: 1;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.35);
  color: var(--lime);
  font-size: 10.5px;
  font-weight: 750;
  padding: 0 10px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 5 Products Collection Grid */
.related {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.related h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 22px;
}

.related .product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1200px) {
  .related .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .related .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ==========================================================================
   PRODUCT PREVIEW VIDEO BUTTON & MODAL PLAYER
   ========================================================================== */

.product-preview-section {
  margin-top: 14px;
}

.product-preview-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sleek Showcase Preview Trigger Banner */
.product-preview-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(26, 30, 26, 0.95), rgba(18, 22, 19, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 13px 18px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.product-preview-trigger-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(255, 0, 0, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.product-preview-trigger-btn:hover {
  border-color: rgba(185, 255, 56, 0.4);
  background: linear-gradient(135deg, rgba(32, 38, 32, 0.98), rgba(22, 27, 23, 0.98));
  transform: translateY(-1.5px);
  box-shadow: none;
}

.product-preview-trigger-btn:hover::before {
  opacity: 1;
}

.product-preview-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.28);
  color: #ff3333;
  flex-shrink: 0;
  transition: transform 0.22s ease, background 0.22s, border-color 0.22s;
}

.product-preview-trigger-btn:hover .product-preview-icon-box {
  transform: scale(1.08);
  background: rgba(255, 0, 0, 0.2);
  border-color: #ff3333;
  box-shadow: 0 0 16px -2px rgba(255, 51, 51, 0.4);
}

.product-preview-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.product-preview-btn-text strong {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

.product-preview-btn-text small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

.product-preview-play-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--lime);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.product-preview-trigger-btn:hover .product-preview-play-badge {
  background: var(--lime);
  color: #121808;
  border-color: var(--lime);
  transform: scale(1.1);
  box-shadow: none;
}

/* Extra video buttons if multiple */
.product-preview-extra-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-preview-extra-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.product-preview-extra-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--lime);
  border-color: rgba(185, 255, 56, 0.3);
}

/* Video Modal Backdrop */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.video-modal-container {
  position: relative;
  z-index: 2;
  width: min(94vw, 980px);
  background: #141715;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.9), 0 0 40px -10px rgba(185, 255, 56, 0.15);
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(20, 24, 20, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.video-modal-yt-icon {
  color: #ff3333;
  flex-shrink: 0;
}

.video-modal-title {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.video-modal-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.video-modal-ext-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.video-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.video-modal-close-btn:hover {
  background: rgba(255, 71, 114, 0.15);
  border-color: #ff4772;
  color: #ff4772;
}

.video-modal-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.video-modal-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .product-buy-trust {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .product-buy-card {
    padding: 18px 18px;
  }
  .product-buy-trust {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .product-trust-item {
    gap: 2px;
    font-size: clamp(8px, 2.5vw, 10px);
    white-space: nowrap;
  }
  .product-trust-item svg {
    width: 10px;
    height: 10px;
  }
  .product-buy-amount {
    font-size: 32px;
  }
  .product-buy-actions-row {
    flex-direction: column;
  }
  .product-btn-gift {
    width: 100%;
  }
  .video-modal-backdrop {
    padding: 12px;
  }
}


/* app/styles/11-cart.css */
/* ==========================================================================
   CART V2 (Modern Anti-Slop High-Conversion Design System)
   ========================================================================== */
.cart-v2-container {
  width: 100%;
  margin-top: 10px;
}

.cart-v2-header {
  margin-bottom: 28px;
}

.cart-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 8px;
}

.cart-v2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
}

.cart-v2-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.cart-v2-sub {
  font-size: 14px;
  color: #9ea59c;
  margin: 0;
}

/* Layout Grid */
.cart-v2-layout {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 40px;
  align-items: start;
}

/* Items Card */
.cart-v2-items-card {
  background: #202220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.7);
}

.cart-v2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.cart-v2-card-head-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-v2-count-badge {
  background: rgba(185, 255, 56, 0.12);
  color: var(--lime);
  border: 1px solid rgba(185, 255, 56, 0.28);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.cart-v2-clear-btn {
  background: transparent;
  border: 0;
  color: #8c9388;
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.cart-v2-clear-btn:hover {
  color: #ff6b8b;
  background: rgba(255, 107, 139, 0.1);
}

/* Items List */
.cart-v2-items-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cart-v2-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 18px 20px;
  background: #202220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  align-items: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.cart-v2-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #262926;
}

/* Thumbnail Wrap (Square Aspect Ratio) */
.cart-v2-thumb-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  background: #121412;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-v2-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.cart-v2-item:hover .cart-v2-thumb {
  transform: scale(1.04);
}

.cart-v2-thumb-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(185, 255, 56, 0.4);
  color: var(--lime);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Item Details */
.cart-v2-item-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.cart-v2-item-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.cart-v2-item-title a {
  color: #ffffff;
  transition: color 0.15s ease;
}

.cart-v2-item-title a:hover {
  color: var(--lime);
}

.cart-v2-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 26px;
}

.cart-v2-license-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
}

.cart-v2-license-pill.escrow {
  color: #c7ff4d;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.28);
}

.cart-v2-license-pill.open-source {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.cart-v2-license-pill.free {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.cart-v2-type-pill {
  font-size: 11px;
  font-weight: 600;
  color: #a6afa3;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 9px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
}

.cart-v2-gift-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #f7d268;
  background: rgba(247, 210, 104, 0.1);
  border: 1px solid rgba(247, 210, 104, 0.25);
  padding: 3px 9px;
  border-radius: 5px;
}

/* Actions Row */
.cart-v2-actions-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

/* Quantity Stepper */
.cart-v2-stepper {
  display: inline-flex;
  align-items: center;
  background: #0d0f0c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
}

.cart-v2-step-btn {
  background: transparent;
  border: 0;
  color: #bcc3b8;
  width: 34px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cart-v2-step-btn:hover:not(:disabled) {
  background: rgba(185, 255, 56, 0.15);
  color: var(--lime);
}

.cart-v2-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cart-v2-step-val {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  min-width: 28px;
  text-align: center;
  padding: 0 4px;
}

/* Item Pricing & Action Column */
.cart-v2-item-pricing {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-width: 80px;
  flex-shrink: 0;
}

.cart-v2-remove-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 75, 110, 0.12);
  border: 1px solid rgba(255, 75, 110, 0.22);
  color: #ff6b8b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  box-sizing: border-box;
}

.cart-v2-remove-icon-btn:hover:not(:disabled) {
  background: rgba(255, 75, 110, 0.25);
  border-color: rgba(255, 75, 110, 0.5);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255, 75, 110, 0.35);
}

.cart-v2-remove-icon-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.cart-v2-remove-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-v2-item-price {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Navigation / Continue Row */
.cart-v2-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-v2-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-size: 13.5px;
  font-weight: 600;
  transition: transform 0.15s ease, color 0.15s ease;
}

.cart-v2-continue-link:hover {
  transform: translateX(-3px);
  color: #d7ff82;
}

/* Trust Strip below Items */
.cart-v2-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.cart-v2-trust-item {
  background: #202220;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cart-v2-trust-icon {
  color: var(--lime);
  flex-shrink: 0;
  margin-top: 2px;
}

.cart-v2-trust-text strong {
  display: block;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 2px;
}

.cart-v2-trust-text p {
  font-size: 11px;
  color: #8e958a;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   ORDER SUMMARY SIDEBAR (STICKY)
   ========================================================================== */
.cart-v2-summary {
  position: sticky;
  top: 100px;
}

.cart-v2-summary-card {
  background: #1c1e1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 34px 30px;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.cart-v2-summary-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.18em;
  color: var(--lime);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cart-v2-summary-title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}

/* Summary Breakdown Lines */
.cart-v2-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-v2-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #9ba297;
}

.cart-v2-line strong {
  color: #ffffff;
  font-weight: 600;
  font-size: 14.5px;
}

.cart-v2-tax-calc {
  color: #838a7f;
  font-size: 12.5px;
}

.cart-v2-line.total {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 6px;
}

.cart-v2-total-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-v2-total-label span {
  font-size: 15px;
  font-weight: 750;
  color: #ffffff;
}

.cart-v2-total-sub {
  font-size: 11px;
  color: #727a6f;
}

.cart-v2-total-amount {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: -0.02em;
}

/* Coupon Form */
.cart-v2-coupon-wrap {
  margin: 18px 0;
}

.cart-v2-coupon-form {
  display: flex;
  gap: 8px;
}

.cart-v2-coupon-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 12px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  min-width: 0;
  transition: border-color 0.15s ease;
}

.cart-v2-coupon-input:focus {
  border-color: var(--lime);
}

.cart-v2-coupon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cart-v2-coupon-btn:hover:not(:disabled) {
  background: rgba(185, 255, 56, 0.15);
  border-color: var(--lime);
  color: var(--lime);
}

.cart-v2-active-coupons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.cart-v2-coupon-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(185, 255, 56, 0.08);
  border: 1px dashed rgba(185, 255, 56, 0.35);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--lime);
}

.cart-v2-remove-coupon-btn {
  background: transparent;
  border: 0;
  color: #ff6b8b;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
}

.cart-v2-remove-coupon-btn:hover {
  text-decoration: underline;
}

/* Primary Checkout Button */
.cart-v2-mobile-total,
.cart-v2-mobile-checkout-note,
.cart-v2-trust-mobile {
  display: none;
}

.cart-v2-checkout-actions {
  display: contents;
}

.cart-v2-checkout-btn {
  width: 100%;
  min-height: 52px;
  background: var(--lime);
  border: 1px solid var(--lime);
  color: #121808;
  border-radius: 10px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 18px;
  box-shadow: none;
  transition: all 0.18s ease;
}

.cart-v2-checkout-btn:hover:not(:disabled) {
  background: #d1ff7b;
  transform: translateY(-2px);
  box-shadow: none;
}

.cart-v2-checkout-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cart-v2-checkout-link-fallback {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--lime);
  text-decoration: underline;
}

.cart-v2-checkout-link-fallback:hover {
  color: #d1ff7b;
}

/* Security & Trust Footer in Summary */
.cart-v2-security-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-v2-security-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #9ba297;
  font-size: 11.5px;
}

.cart-v2-security-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-v2-payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cart-v2-pay-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cdd3c8;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 6px;
  text-align: center;
  display: block;
}

.cart-v2-fine-print {
  font-size: 11px;
  line-height: 1.5;
  color: #787e74;
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   EMPTY STATE (High Engagement)
   ========================================================================== */
.cart-v2-empty-wrap {
  background: #202220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 60px 30px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
}

.cart-v2-empty-icon-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 18px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.25);
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(185, 255, 56, 0.15);
}

.cart-v2-empty-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

.cart-v2-empty-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #9ba397;
  max-width: 500px;
  margin: 0 auto 30px;
}

.cart-v2-empty-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.cart-v2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lime);
  color: #121808;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.cart-v2-btn-primary:hover {
  background: #d1ff7b;
  transform: translateY(-2px);
  color: #121808;
}

.cart-v2-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.cart-v2-btn-secondary:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(185, 255, 56, 0.08);
}

.cart-v2-reset-btn {
  background: transparent;
  border: 0;
  color: #7d8479;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 12px;
}

.cart-v2-reset-btn:hover {
  color: #bcc3b8;
}

/* Responsive Cart Breakpoints */
@media (max-width: 768px) {
  html:has(.cart-v2-checkout-actions) {
    scroll-padding-bottom: calc(var(--cart-checkout-bar-height, 150px) + 16px);
  }

  body:has(.cart-v2-checkout-actions) {
    padding-bottom: calc(var(--cart-checkout-bar-height, 150px) + 16px);
  }

  .cart-v2-layout > * {
    min-width: 0;
  }

  .cart-v2-trust-desktop {
    display: none;
  }

  .cart-v2-trust-mobile {
    display: grid;
    margin-top: 0;
  }

  .cart-v2-checkout-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #202220;
    border-top: 1px solid var(--border-strong);
  }

  .cart-v2-mobile-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 13px;
    color: var(--muted);
  }

  .cart-v2-mobile-total strong {
    color: var(--lime);
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  .cart-v2-mobile-checkout-note {
    display: block;
    margin: 0;
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .cart-v2-checkout-actions .cart-v2-checkout-btn {
    margin-top: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    transform: none;
  }

  .cart-v2-checkout-actions .cart-v2-checkout-btn svg {
    flex-shrink: 0;
  }

  .cart-v2-checkout-actions .cart-v2-checkout-link-fallback {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }

  .cart-v2-item-title {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1024px) {
  .cart-v2-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .cart-v2-summary {
    position: static;
    max-width: 600px;
    width: 100%;
  }
}

@media (max-width: 680px) {
  .cart-v2-item {
    grid-template-columns: 84px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .cart-v2-thumb-wrap {
    width: 84px;
    height: 84px;
    aspect-ratio: 1 / 1;
  }
  .cart-v2-item-pricing {
    grid-column: 1 / -1;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
    margin-top: 4px;
    height: auto;
  }
  .cart-v2-trust-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cart-v2-items-card,
  .cart-v2-summary-card {
    padding: 20px 16px;
    border-radius: 14px;
  }
}


/* app/styles/12-support.css */
/* ==========================================================================
   Support Desk v2 Styles
   ========================================================================== */

.support-v2-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Hero */
.support-v2-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.support-v2-ambient {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 100%);
  height: 240px;
  background: radial-gradient(circle, rgba(185, 255, 56, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.support-v2-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(185, 255, 56, 0.08);
  border: 1px solid rgba(185, 255, 56, 0.28);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-v2-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.support-v2-lime {
  color: var(--lime);
}

.support-v2-lead {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
}

.support-v2-status-strip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12.5px;
  color: #cad1c7;
  margin-top: 4px;
}

.support-v2-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(185, 255, 56, 0.6);
  flex-shrink: 0;
}

/* 3-Column Channels (Strict Line & Button Baseline Alignment) */
.support-v2-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.support-v2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}

.support-v2-card:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 255, 56, 0.35);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
}

.support-v2-card-primary {
  background: linear-gradient(180deg, #242921 0%, #1c201a 100%);
  border-color: rgba(185, 255, 56, 0.4);
  box-shadow: 0 10px 30px -10px rgba(185, 255, 56, 0.15);
}

.support-v2-card-primary:hover {
  border-color: var(--lime);
  box-shadow: 0 16px 40px -12px rgba(185, 255, 56, 0.25);
}

.support-v2-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-bottom: 22px;
}

.support-v2-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.support-v2-badge.primary {
  background: rgba(185, 255, 56, 0.14);
  color: var(--lime);
  border-color: rgba(185, 255, 56, 0.35);
}

.support-v2-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: var(--text);
  flex-shrink: 0;
}

.support-v2-card-icon.discord {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.3);
  color: #7289da;
}

.support-v2-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.support-v2-card-content h2 {
  font-size: 21px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  min-height: 52px;
}

.support-v2-card-content p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #adb5a8;
  margin: 0 0 18px;
  min-height: 66px;
}

.support-v2-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: auto 0 24px 0;
  min-height: 28px;
  align-items: flex-end;
}

.support-v2-tags li {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #cad1c7;
  padding: 3px 9px;
  border-radius: 4px;
}

/* Dividing line and button aligned at exact same vertical offset */
.support-v2-card-action {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-v2-btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  height: 48px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
  box-sizing: border-box;
}

.support-v2-btn-secondary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 13.5px;
  box-sizing: border-box;
}

.support-v2-card-subaction {
  min-height: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-v2-note {
  font-size: 11.5px;
  color: #798075;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.support-v2-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  line-height: 1;
}

.support-v2-text-link:hover {
  color: var(--lime);
}

/* Checklist Panel */
.support-v2-checklist-panel {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
}

.support-v2-panel-header {
  margin-bottom: 32px;
}

.support-v2-panel-header .eyebrow {
  margin-bottom: 8px;
}

.support-v2-panel-header h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
}

.support-v2-panel-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 720px;
  margin: 0;
}

.support-v2-checklist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.support-v2-check-item {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.18s;
}

.support-v2-check-item:hover {
  border-color: rgba(185, 255, 56, 0.3);
}

.support-v2-check-number {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 900;
  color: var(--lime);
  background: rgba(185, 255, 56, 0.1);
  border: 1px solid rgba(185, 255, 56, 0.25);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.support-v2-check-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.support-v2-check-body p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #9ea59a;
  margin: 0;
}

.support-v2-check-body code {
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--lime);
  border: 1px solid rgba(185, 255, 56, 0.2);
}

/* Common FAQ Header with storewide subs-faq styling */
.support-v2-faq-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.support-v2-faq-header .eyebrow {
  margin-bottom: 6px;
}

.support-v2-browse-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.support-v2-browse-all:hover {
  text-decoration: underline;
}

/* Responsive Support Breakpoints */
@media (max-width: 1100px) {
  .support-v2-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .support-v2-channels-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .support-v2-page {
    gap: 40px;
  }
  .support-v2-checklist-panel {
    padding: 24px 18px;
  }
  .support-v2-checklist-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .support-v2-faq-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Promotion stays in the document flow below navigation. */
.pewe-promo-banner {
  background: #202719;
  border-bottom: 1px solid rgba(185, 255, 56, .22);
  color: var(--text);
}

.pewe-promo-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 20px;
  padding: 8px 72px 8px 0;
}

.pewe-promo-icon {
  flex-shrink: 0;
  color: var(--lime);
}

.pewe-promo-message {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.pewe-promo-message strong {
  color: var(--lime);
}

.pewe-promo-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.pewe-promo-code-label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.pewe-promo-code {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid rgba(185, 255, 56, .4);
  border-radius: 6px;
  background: transparent;
  color: var(--lime);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  touch-action: manipulation;
}

.pewe-promo-code::after {
  content: '';
  position: absolute;
  /* Keep at least a 44px touch target around the smaller visible coupon. */
  inset: -9px 0;
}

.pewe-promo-copy-error {
  display: block;
  flex-basis: 100%;
  color: var(--text);
  font-size: 12px;
  text-align: center;
}

.pewe-promo-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  padding: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.pewe-promo-close::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 13px;
  width: 1px;
  height: 18px;
  background: rgba(185, 255, 56, .3);
  pointer-events: none;
}

/* Collapsed promo: small tab on the right edge that reopens the offer */
.pewe-promo-reopen {
  position: fixed;
  right: 0;
  bottom: 112px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(185, 255, 56, .35);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #202719;
  color: var(--lime);
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .pewe-promo-reopen:hover {
    background: #2a3420;
  }
}

.pewe-promo-reopen:focus-visible,
.pewe-promo-code:focus-visible,
.pewe-promo-close:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .pewe-promo-close:hover {
    background: rgba(255, 255, 255, .08);
  }
}

@media (max-width: 900px) {
  .pewe-promo-inner {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 10px 0;
  }
  .pewe-promo-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 1px;
  }
  .pewe-promo-message {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
  }
  .pewe-promo-code-row {
    grid-column: 2;
    grid-row: 2;
    gap: 8px;
    margin-left: 0;
  }
  .pewe-promo-code-label {
    white-space: normal;
  }
  .pewe-promo-close {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: stretch;
    height: auto;
    min-height: 44px;
    /* Extend the close target across the container's 28px right gutter. */
    width: 72px;
    margin-right: -28px;
  }
  .pewe-promo-close::before {
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
  }
  .pewe-promo-copy-error {
    grid-column: 1 / -1;
    text-align: left;
  }
}


/* app/styles/13-account-modal.css */
/* ==========================================================================
   CFX Login Transition Modal & Account Management
   ========================================================================== */

.cfx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cfx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cfx-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: #191919;
  border: 1px solid #333333;
  border-radius: 22px;
  padding: 34px 28px 28px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: cfxModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cfxModalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cfx-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: #777777;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.cfx-modal-close-btn:hover {
  background: #262626;
  color: #ffffff;
}

.cfx-modal-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
}

.cfx-modal-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(185, 255, 56, 0.35);
  animation: cfxPulse 1.8s ease-out infinite;
}

@keyframes cfxPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.cfx-modal-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #222222;
  border: 1.5px solid rgba(185, 255, 56, 0.55);
  display: grid;
  place-items: center;
  box-shadow: 0 0 30px rgba(185, 255, 56, 0.2);
}

.cfx-badge-text {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: 1px;
}

.cfx-modal-title {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.cfx-modal-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.cfx-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: cfxDotBlink 1s ease-in-out infinite alternate;
}

@keyframes cfxDotBlink {
  from { opacity: 0.3; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.1); }
}

.cfx-modal-desc {
  font-size: 13.5px;
  color: #9c9c9c;
  margin: 0 0 24px;
  line-height: 1.5;
}

.cfx-modal-loader-wrap {
  width: 100%;
}

.cfx-modal-progress-bar {
  width: 100%;
  height: 4px;
  background: #252525;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}

.cfx-modal-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, #9ae600, #b9ff38, #d1ff7b);
  border-radius: 999px;
  animation: cfxProgress 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cfxProgress {
  0% {
    left: -45%;
    width: 35%;
  }
  50% {
    left: 30%;
    width: 55%;
  }
  100% {
    left: 105%;
    width: 35%;
  }
}

.cfx-modal-secure-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #666666;
}

/* Account Connected Success Modal */
.cfx-modal-success-card {
  border-color: rgba(185, 255, 56, 0.35);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(185, 255, 56, 0.12);
}

.cfx-modal-icon-badge.success {
  background: #172414;
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 0 0 35px rgba(185, 255, 56, 0.4);
}

.cfx-modal-pulse-ring.success {
  border-color: rgba(185, 255, 56, 0.55);
}

.cfx-connected-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(185, 255, 56, 0.1);
  border: 1px solid rgba(185, 255, 56, 0.3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--lime);
  margin-bottom: 14px;
}

.cfx-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cfx-modal-action-btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  background: var(--lime);
  color: #0c100a;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.cfx-modal-action-btn.primary:hover {
  background: #d1ff7b;
  box-shadow: none;
  transform: translateY(-1px);
}

/* Cfx Sign In Prompt Modal */
.cfx-prompt-modal-card {
  max-width: 440px;
}

.cfx-prompt-added-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.35);
  color: var(--lime);
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.cfx-prompt-product-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  text-align: left;
}

.cfx-prompt-product-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #171b16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.cfx-prompt-product-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cfx-prompt-product-name {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 750;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfx-prompt-product-sub {
  font-size: 11px;
  color: #889083;
}

.cfx-prompt-btn-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd4cc;
  border-radius: 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cfx-prompt-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Disconnect Buttons & Account Management Box in Cart */
.cart-v2-account-card {
  background: #161816;
  border: 1px solid #2a2d2a;
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cart-v2-account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #242624;
}

.cart-v2-account-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 750;
  color: #dedede;
}

.cart-v2-account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 16px;
}

.cart-v2-account-item + .cart-v2-account-item {
  border-top: 1px dashed #242624;
  padding-top: 12px;
}

.cart-v2-account-info {
  flex: 1;
  min-width: 0;
}

.cart-v2-account-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-v2-account-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-v2-account-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.cart-v2-account-desc {
  font-size: 11.5px;
  color: #858c82;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}

.cart-v2-account-connected-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lime);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}

.cart-v2-account-connected-name svg {
  flex-shrink: 0;
}

.cart-v2-account-action-col {
  flex-shrink: 0;
}

/* Identical sizing for all account action buttons */
.cart-v2-account-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 136px;
  height: 38px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.cart-v2-account-btn-action.cfx {
  background: #242424;
  border: 1px solid #3c3c3c;
  color: #ffffff;
}

.cart-v2-account-btn-action.cfx:hover:not(:disabled) {
  background: #2d2d2d;
  border-color: var(--lime);
  color: var(--lime);
}

.cart-v2-account-btn-action.discord {
  background: #21252d;
  border: 1px solid #38414e;
  color: #b2c2de;
}

.cart-v2-account-btn-action.discord:hover:not(:disabled) {
  background: #5865F2;
  border-color: #5865F2;
  color: #ffffff;
}

.cart-v2-account-btn-action.disconnect {
  background: transparent;
  border: 1px solid #333333;
  color: #888888;
  font-weight: 600;
  font-size: 12px;
}

.cart-v2-account-btn-action.disconnect:hover:not(:disabled) {
  background: rgba(255, 107, 139, 0.1);
  border-color: rgba(255, 107, 139, 0.4);
  color: #ff6b8b;
}

.cart-v2-account-btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .cart-v2-account-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cart-v2-account-action-col,
  .cart-v2-account-btn-action {
    width: 100%;
  }
}











/* app/styles/14-pages-latest.css */
/* ==========================================================================
   Global Button & Navbar Account Clean Matte Style (No Glow Effects)
   ========================================================================== */

button,
.button,
[type="button"],
[type="submit"],
.btn,
.product-btn-buy-now,
.product-btn-add-cart,
.product-btn-gift,
.cart-v2-checkout-btn,
.cfx-modal-action-btn,
.subs-btn-primary,
.subs-card-btn,
.discord-btn,
.comm-btn-primary,
.comm-launch-discord-btn,
.comm-discord-cta-btn,
.affiliate-btn-primary,
.affiliate-discord-main-btn,
.peds-free-cta-btn,
.peds-split-cta-btn,
.peds-banner-discord-btn,
.collection-view-all-btn,
.pc-add {
  box-shadow: none !important;
}

button:hover,
.button:hover,
[type="button"]:hover,
[type="submit"]:hover,
.btn:hover,
.product-btn-buy-now:hover,
.product-btn-add-cart:hover,
.product-btn-gift:hover,
.cart-v2-checkout-btn:hover,
.cfx-modal-action-btn:hover,
.subs-btn-primary:hover,
.subs-card-btn:hover,
.discord-btn:hover,
.comm-btn-primary:hover,
.comm-launch-discord-btn:hover,
.comm-discord-cta-btn:hover,
.affiliate-btn-primary:hover,
.affiliate-discord-main-btn:hover,
.peds-free-cta-btn:hover,
.peds-split-cta-btn:hover,
.peds-banner-discord-btn:hover,
.collection-view-all-btn:hover,
.pc-add:hover {
  box-shadow: none !important;
}

/* Navbar Account: Zero Glow */
.account-link .dot.ok,
.account-nav-avatar-wrap,
.account-dropdown-avatar-box {
  box-shadow: none !important;
}
.account-link:hover,
.account-link.connected,
.account-link.active {
  box-shadow: none !important;
}
.account-dropdown {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fly-to-cart dot (lib/fly-to-cart.js) */
.fly-to-cart {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.fly-to-cart > div {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid #121808;
}

/* Account page (components/Account.js) */
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.account-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.account-card.connected {
  border-color: rgba(185, 255, 56, 0.28);
}

.account-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-card-head .product-account-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.account-card h2 {
  flex: 1;
  min-width: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}

.account-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.account-card-badge.ok {
  color: var(--lime);
  border-color: rgba(185, 255, 56, 0.35);
  background: rgba(185, 255, 56, 0.08);
}

.account-card-desc {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-card-desc strong {
  color: var(--text);
}

.account-card-actions {
  display: grid;
  gap: 8px;
}

.account-card-actions .button {
  width: 100%;
}

.account-demo-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.account-demo-notice .muted-link {
  margin: 0;
}

.account-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.account-links + .fine-print {
  text-align: center;
}

@media (max-width: 700px) {
  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-links .button {
    flex: 1 1 100%;
  }
}

/* Guides page (app/guides/page.js) */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.guide-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Escrow and Open Source share row tracks (kicker, title, text, steps, warning, link), so their warnings line up */
.guide-grid > .guide-card:not(.guide-install) {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.guide-card h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 10px;
}

.guide-card > p,
.guide-install-intro > p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 8px;
}

/* Same license colors as the cart pills (.cart-v2-license-pill) */
.guide-badge {
  justify-self: start;
  align-self: start;
  width: fit-content;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.guide-badge.escrow {
  color: #c7ff4d;
  background: rgba(185, 255, 56, 0.12);
  border: 1px solid rgba(185, 255, 56, 0.28);
}

.guide-badge.open-source {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.info-page .lead a,
.guide-card a:not(.text-link) {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.info-page .lead strong,
.guide-card strong {
  color: var(--text);
}

/* Push the docs link to the card bottom so both columns line up */
.guide-more {
  margin-top: auto;
  min-height: 44px;
}

/* Install card: intro on top-left, then video (left) and steps (right) share one row so their tops line up */
.guide-install {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "intro ."
    "video steps"
    "more  .";
  column-gap: 40px;
  align-items: start;
}

.guide-install-intro {
  grid-area: intro;
}

.guide-install .guide-video {
  grid-area: video;
  margin: 8px 0 0;
}

.guide-install .guide-steps {
  grid-area: steps;
  margin: 8px 0 0;
}

.guide-install .guide-steps li:first-child {
  padding-top: 0;
}

.guide-install .guide-steps li:first-child::before {
  top: 0;
}

.guide-install .guide-more {
  grid-area: more;
  margin-top: 8px;
}

.guide-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.guide-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.guide-steps {
  counter-reset: guide;
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
}

.guide-steps li {
  counter-increment: guide;
  position: relative;
  padding: 9px 0 9px 40px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.guide-steps li::before {
  content: counter(guide);
  position: absolute;
  left: 0;
  top: 9px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lime);
}

.guide-card code {
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.guide-code {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}

.guide-code code {
  padding: 0;
  background: none;
  border: 0;
  color: var(--lime);
}

.guide-warning {
  align-self: start;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(255, 85, 85, 0.08);
  border: 1px solid rgba(255, 85, 85, 0.3);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #e6c4c4;
}

.guide-warning strong {
  color: #ff8a8a;
}

@media (max-width: 800px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-install {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "video" "steps" "more";
  }

  .guide-install .guide-steps {
    margin-top: 20px;
  }

  .guide-card {
    padding: 22px;
  }

  .guide-grid > .guide-card:not(.guide-install) {
    display: flex;
    grid-row: auto;
  }
}

/* My Purchases states (app/purchases/page.js) */
.purchase-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--muted);
}

.purchase-state p {
  margin: 0;
}

.purchase-state-note {
  margin: -8px 0 24px;
  font-size: 12.5px;
  color: var(--muted);
}

.account-status-info .receipt-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

/* src/css/tebex.css */
/* Tebex-only additions on top of the Next.js store CSS. Keep the store files untouched. */

/* The Tebex legal footer must stay visible; only these variables may restyle it. */
:root {
  --tebex-legal-footer-background-color: var(--bg);
  --tebex-legal-footer-text-color: var(--muted);
  --tebex-legal-footer-border-color: var(--border);
  --tebex-legal-footer-max-width: var(--max);
  --tebex-legal-footer-logo-color: var(--text);
}

/* Wrappers the Next.js DOM does not have; display:contents keeps the store layout identical. */
.site,
.pewe-slot,
[data-pewe="promo"],
[data-pewe="consent"] {
  display: contents;
}