/* L'Atelier TCG storefront. Palette from the logo: brass on near-black. One stylesheet, no framework. */
/* Cinzel (SIL Open Font License), self-hosted: no request to Google Fonts (Law 25, and one fewer origin). */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(/static/store/fonts/cinzel-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(/static/store/fonts/cinzel-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#0f0e0c; --bg-2:#181612; --bg-3:#221f19; --line:#2e2a22; --line-2:#3d372c;
  --text:#efe7d6; --muted:#a89f8e; --dim:#8b8271;
  --brass:#c9a24a; --brass-2:#e2c37a; --brass-dk:#8a6a2a; --brass-glow:rgba(201,162,74,.22);
  --ok:#8fcf8a; --warn:#e0b25a; --bad:#e08a7a; --info:#8ab8e0;
  --r:10px; --r-sm:6px; --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Cinzel",Georgia,"Times New Roman",serif;
  --brass-grad:linear-gradient(180deg,#f0d692 0%,#c9a24a 45%,#8a6a2a 100%);
  --brass-text:linear-gradient(180deg,#f3dc9c 0%,#d3ad57 55%,#9a7733 100%);
  --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);
  background-image:radial-gradient(1200px 600px at 50% -200px,rgba(201,162,74,.12),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
a{color:var(--brass-2);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;line-height:1.2;margin:0 0 .5em;color:#f4ecdc}
h1{font-size:clamp(1.4rem,2.2vw,2rem)} h2{font-size:1.2rem} h3{font-size:1rem}
h1{background:var(--brass-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 12px rgba(201,162,74,.15)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}

/* header */
.topbar{background:var(--bg-2);color:var(--muted);font-size:.85rem;text-align:center;padding:6px 12px;border-bottom:1px solid var(--line-2)}
.topbar b,.topbar strong{color:var(--brass-2);font-weight:600}
.topbar a{color:var(--brass-2);text-decoration:underline}
header.site{position:sticky;top:0;z-index:20;background:rgba(15,14,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 0;min-height:64px}
.logo img{height:44px;width:auto}
/* the search box keeps a usable width; when the header is too narrow for it next to the nav (a phone in desktop
   mode, a small window) it wraps to its own row instead of shrinking to the button (owner 2026-09-25) */
.hdr form{flex:1 1 280px;display:flex;max-width:560px;min-width:240px}
.hdr input[type=search]{flex:1;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:10px 14px;border-radius:var(--r-sm) 0 0 var(--r-sm);font:inherit;min-width:0}
.hdr button{background:var(--brass-grad);color:#141109;border:1px solid #6d5320;border-left:0;padding:10px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;font:inherit;font-weight:700;cursor:pointer}
.hdr nav{display:flex;gap:6px;align-items:center;margin-left:auto}
.hdr nav a{padding:8px 10px;border-radius:var(--r-sm);color:var(--text);font-weight:500;white-space:nowrap}
.hdr nav a:hover{background:var(--bg-3)}
.lang{border:1px solid var(--line-2);padding:6px 10px!important;font-size:.85rem;letter-spacing:.06em}
.cart-btn{position:relative}
.cart-btn .n{position:absolute;top:0;right:0;background:var(--brass);color:#141109;font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 6px;transform:translate(30%,-30%)}
.gamesbar{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:6px 0 10px}
.gamesbar>a,.gamesbar summary{padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.9rem;white-space:nowrap;line-height:1.3}
.gamesbar>a:hover,.gamesbar>a.on,.gamesbar summary:hover,.moregames[open] summary{color:var(--text);border-color:var(--brass-dk);background:var(--bg-2)}
.moregames{position:relative} .moregames summary{cursor:pointer;list-style:none;display:inline-block} .moregames summary::-webkit-details-marker{display:none}
.moregames .menu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:240px;max-height:70vh;overflow:auto;background:var(--bg-3);border:1px solid var(--brass-dk);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 0}
.moregames .menu a{display:block;padding:8px 16px;color:var(--text);font-size:.92rem;white-space:nowrap}
.moregames .menu a:hover,.moregames .menu a.on{background:var(--bg-2);color:var(--brass-2)}
@media (max-width:640px){.gamesbar>a,.gamesbar summary{padding:5px 10px;font-size:.85rem}.moregames .menu{left:auto;right:0}}

/* layout bits */
main{padding:24px 0 48px;min-height:60vh}
main>h1:first-child,.crumbs+h1{margin:14px 0 22px}   /* the breadcrumb used to hold the title off the games bar */
.crumbs{display:none} /* owner 2026-09-20: no breadcrumb trail on screen ("too much little useless writing"); BreadcrumbList JSON-LD stays for Google */
.crumbs{font-size:.85rem;color:var(--dim);margin:0 0 14px;flex-wrap:wrap;gap:4px}
.crumbs a{color:var(--muted)} .crumbs span::before{content:"›";margin:0 6px;color:var(--dim)}
.crumbs span:first-child::before{content:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,74,.25)}
.card .img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:contain}
.card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .name{color:var(--text);font-weight:600;font-size:.95rem;line-height:1.3}
.card .meta{color:var(--dim);font-size:.8rem}
.card .price{margin-top:auto;padding-top:6px;font-size:1.1rem;font-weight:700;color:var(--brass-2)}
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid transparent;letter-spacing:.02em}
.b-shelf{color:var(--ok);border-color:rgba(143,207,138,.35);background:rgba(143,207,138,.08)}
.b-warehouse{color:var(--info);border-color:rgba(138,184,224,.35);background:rgba(138,184,224,.08)}
.b-preorder{color:var(--warn);border-color:rgba(224,178,90,.4);background:rgba(224,178,90,.08)}
.b-soldout{color:var(--dim);border-color:var(--line-2);background:var(--bg-3)}
.pill{display:inline-block;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);font-size:.85rem;margin:0 6px 6px 0}
.pill:hover,.pill.on{border-color:var(--brass);color:var(--text)}
.section{margin:28px 0}
.section h2{display:flex;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line-2);position:relative}
.section h2::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--brass-grad)}
.section h2 a{font:500 .85rem var(--font);color:var(--brass-2)}
.notice{background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--brass);padding:10px 14px;border-radius:var(--r-sm);color:var(--muted);font-size:.92rem}
.pager{display:flex;gap:6px;justify-content:center;margin:24px 0 0;flex-wrap:wrap}
.pager a,.pager span{padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--muted)}
.pager .cur{color:var(--text);border-color:var(--brass)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 18px;color:var(--muted);font-size:.9rem}
/* faceted filter sidebar (listing pages) */
.catalog{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start;margin-top:6px}
.gamesbar>a:first-child{font-weight:700}
.catalog.nofilters{display:block}
.filters{font-size:.9rem;padding-right:4px}   /* scrolls with the page: no second scrollbar */
.fhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px;font-size:1rem}
.fhead a{font-size:.82rem;color:var(--brass-2)}
.facet{border-top:1px solid var(--line-2);padding:6px 0}
.facet summary{cursor:pointer;font-weight:700;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px;padding:6px 0}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"+";margin-left:auto;color:var(--dim);font-weight:400} .facet[open] summary::after{content:"–"}
.facet ul{list-style:none;margin:2px 0 0;padding:0;max-height:272px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.facet li label{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--muted);cursor:pointer;line-height:1.25}
.facet li label:hover{color:var(--text)} .facet li small{margin-left:auto;color:var(--dim);font-size:.8rem}
.facet input[type=checkbox]{accent-color:var(--brass);width:15px;height:15px;margin:0;flex:none}
.fsearch{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:6px 8px;border-radius:var(--r-sm);font:inherit;font-size:.85rem;margin:2px 0 4px}
.fmore{background:none;border:0;color:var(--brass-2);cursor:pointer;font:inherit;font-size:.83rem;padding:4px 0}
.frange{display:flex;gap:6px;align-items:center;color:var(--dim);padding:4px 0}
.frange input{width:66px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:6px;border-radius:var(--r-sm);font:inherit;font-size:.85rem}
.fgo{background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:6px 10px;border-radius:var(--r-sm);font:inherit;font-size:.85rem;cursor:pointer}
.fgo:hover{border-color:var(--brass)}
.fn{background:var(--brass);color:#1a1712;border-radius:999px;font-size:.72rem;padding:1px 7px;font-weight:700}
.toolbar .count{font-weight:700;color:var(--text)}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid var(--brass);border-radius:999px;color:var(--text);font-size:.82rem;background:rgba(200,160,80,.08);text-decoration:none}
.chip b{color:var(--brass-2)} .chip:hover{background:rgba(200,160,80,.18)}
.ftoggle{display:none}
@media (max-width:800px){
  .catalog{display:block}
  .filters{position:static;max-height:none;display:none;margin:0 0 14px;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;background:var(--bg-2)}
  .filters.open{display:block}
  .ftoggle{display:inline-block;padding:6px 12px}
}
.toolbar select{background:var(--bg-2);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;font:inherit}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:28px 0 8px}
.hero h1{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:10px}
.hero p{color:var(--muted);font-size:1.05rem;max-width:56ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;padding:12px 20px;border-radius:var(--r-sm);font-weight:700;background:var(--brass-grad);color:#141109;border:1px solid #6d5320;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 4px 14px rgba(201,162,74,.18);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn:hover{filter:brightness(1.08);color:#141109}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--brass);color:#fff}
.hero .art{position:relative;min-height:300px}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.collage a{background:#fff;border:2px solid var(--brass-dk);border-radius:var(--r);padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,74,.2);transition:transform .2s,border-color .2s;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.collage a:nth-child(1){transform:rotate(-4deg) translateY(10px)}
.collage a:nth-child(2){transform:translateY(-8px) scale(1.06);z-index:2}
.collage a:nth-child(3){transform:rotate(4deg) translateY(10px)}
.collage a:hover{border-color:var(--brass-2);transform:scale(1.08);z-index:3}
.collage img{max-height:100%;object-fit:contain}
.collage-cap{margin-top:16px;text-align:center;color:var(--dim);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.hero .art::before{content:"";position:absolute;inset:-20px -10px;background:radial-gradient(closest-side,rgba(201,162,74,.16),transparent 70%);z-index:-1}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.game{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--brass-dk);border-radius:var(--r);padding:14px;color:var(--text)}
.game:hover{border-color:var(--brass);background:var(--bg-3)}
.game b{display:block;font-size:.98rem}
.game small{color:var(--dim)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:10px 0 0}
.trust div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 12px 40px;font-size:.9rem;color:var(--muted);position:relative}
.trust div::before{content:"\2699";position:absolute;left:13px;top:11px;color:var(--brass);font-size:1.1rem}
.trust b{color:var(--text);display:block;margin-bottom:2px}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:860px){.pdp{gap:18px}}
.pdp .gallery{background:#fff;border-radius:var(--r);padding:16px;display:flex;align-items:center;justify-content:center;min-height:320px;position:sticky;top:90px}
.pdp .gallery img{width:100%;max-width:520px;height:auto;aspect-ratio:1/1;object-fit:contain}   /* a square is reserved before the photo arrives: product-page CLS read 0.26 (2026-09-21) */
.pdp h1{margin-bottom:6px}
.pdp .sub{color:var(--muted);margin-bottom:14px}
.buybox{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;margin:12px 0 18px;box-shadow:var(--shadow)}
.buybox .price{font-size:2rem;font-weight:800;color:var(--brass-2);line-height:1;font-family:var(--font-display)}
.buybox .price small{font-size:.8rem;color:var(--dim);font-weight:500;margin-left:6px}
.buybox .avail{margin:10px 0 4px;font-weight:600}
.buybox .eta{color:var(--muted);font-size:.9rem}
.buybox .row{display:flex;gap:10px;align-items:center;margin-top:14px}
.buybox input[type=number]{width:70px;background:var(--bg);border:1px solid var(--line-2);color:var(--text);padding:11px 8px;border-radius:var(--r-sm);font:inherit;text-align:center}
.buybox .btn{flex:1;text-align:center;font-size:1.05rem}
.buybox .btn[disabled]{opacity:.45;cursor:not-allowed}
.buybox ul{margin:12px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.9rem}
.buybox li{padding:3px 0 3px 22px;position:relative}
.buybox li::before{content:"✓";position:absolute;left:0;color:var(--brass)}
.specs{width:100%;border-collapse:collapse;font-size:.92rem;margin:12px 0}
.specs th{text-align:left;color:var(--dim);font-weight:500;padding:6px 10px 6px 0;width:38%;vertical-align:top}
.specs td{padding:6px 0;border-bottom:1px solid var(--line)}
.desc{color:var(--muted);line-height:1.6}
.desc h2{color:var(--text)}
.stickybuy{display:none}

/* footer */
footer.site{border-top:2px solid var(--brass-dk);background:var(--bg-2);margin-top:40px;padding:28px 0 32px;color:var(--muted);font-size:.9rem;
  background-image:radial-gradient(circle at 100% 0,rgba(201,162,74,.08),transparent 40%)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.fcols h3{font:600 .85rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fcols a{display:block;color:var(--muted);padding:3px 0}
.fcols a:hover{color:#fff}
.legal{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim)}

@media (max-width:700px){
  .pdp{grid-template-columns:1fr}
  .pdp .gallery{position:static;min-height:0;padding:10px}
  .pdp .gallery img{max-height:min(400px,44vh)}
}
/* between a phone and a wide desktop (a phone in desktop mode, a narrow window) the nav does not fit beside the
   search: keep logo + nav on the first row and give the search its own full row, the way the phone layout does */
@media (max-width:1180px){
  .hdr form{order:3;flex-basis:100%;max-width:none}
  .hdr nav{flex:1;justify-content:space-between}           /* the nav fills the row after the logo, no dead gap */
  /* the games bar stays one row and swipes, as on phones, instead of dropping 'Autres jeux' to a second line */
  .gamesbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  .gamesbar::-webkit-scrollbar{display:none}
  .gamesbar>a,.gamesbar summary{flex:none;padding:5px 10px;font-size:.85rem}
  .moregames{position:static}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero .art{order:1;min-height:0;margin-top:10px}

  .hdr{flex-wrap:wrap}
  .hdr form{order:3;flex-basis:100%;max-width:none}
  .hdr nav>a:not(.lang):not(.cart-btn){display:none}
  .hdr nav .mnav{display:block}   /* the base .mnav{display:none} sits later in the file; specificity wins here */
  .hdr nav .seg-b{padding:6px 8px!important}
  .stickybuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(15,14,12,.96);border-top:1px solid var(--line-2);padding:10px 14px;gap:12px;align-items:center;backdrop-filter:blur(8px)}
  .stickybuy .price{font-weight:800;font-size:1.2rem;color:#fff}
  .stickybuy .btn{flex:1;text-align:center}
  main{padding-bottom:84px}
}

/* phone menu: a CSS-only dropdown in the header (2026-09-22) */
.mnav{display:none}
.hdr nav{position:relative}   /* the phone menu's panel hangs from the nav row's right edge */
.mnav summary{list-style:none;cursor:pointer;padding:6px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:1.15rem;line-height:1;color:var(--text)}
.mnav summary::-webkit-details-marker{display:none}
.mnav .panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:240px;max-width:min(320px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#1a1815;border:1px solid var(--line-2);border-radius:10px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mnav .panel a{display:block;padding:10px 12px;color:var(--text);font-weight:700;border-radius:6px;text-decoration:none}
.mnav .panel a:hover{background:rgba(255,255,255,.06)}
.mnav .panel hr{border:0;border-top:1px solid var(--line);margin:4px 0}
html[data-brand="ccc"] .mnav summary{border-color:#cfd8e0;color:#0e1b2e}
html[data-brand="ccc"] .mnav .panel{background:#fff;border-color:#e2e8ee;box-shadow:0 12px 30px rgba(0,0,0,.14)}
html[data-brand="ccc"] .mnav .panel a{color:#0e1b2e}
html[data-brand="ccc"] .mnav .panel a:hover{background:#f1f5f8}

/* policy / about pages */
.prose{max-width:760px;line-height:1.65;color:var(--muted)}
.prose h1{color:#fff;margin:6px 0 14px}
.prose h2{color:var(--brass);font-size:1.1rem;margin:26px 0 8px}
.prose b{color:var(--text)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--brass)}

/* consent banner */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:720px;margin:0 auto;background:var(--bg-2);border:1px solid var(--brass);border-radius:var(--r);padding:14px 16px;display:flex;gap:14px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.consent p{margin:0;font-size:.88rem;color:var(--muted);flex:1}
.consent div{display:flex;gap:8px;flex-shrink:0}
@media (max-width:640px){.consent{flex-direction:column;align-items:stretch}.consent div{justify-content:flex-end}}
.consent[hidden]{display:none}

/* events */
.events{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.event{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--brass-dk);border-radius:var(--r);padding:12px 14px;color:var(--text);display:flex;flex-direction:column;gap:2px}
.event:hover{border-color:var(--brass)}
.event b{color:var(--brass-2)} .event span{font-size:.95rem} .event small{color:var(--dim)}
.specs thead th{color:var(--dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-2)}
.specs tbody th,.specs tbody td{vertical-align:top}

.intro{max-width:78ch;margin:-4px 0 14px}
.events-table td,.events-table th{padding-right:18px}

/* release calendar */
.releases{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.release{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:10px;color:var(--text)}
.release:hover{border-color:var(--brass)}
.release .rimg{width:72px;height:72px;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.release .rimg img{max-height:100%;object-fit:contain}
.release b{display:block;color:var(--brass-2)} .release span{font-size:.85rem;color:var(--muted)} .release small{display:block;color:var(--dim);font-size:.8rem}

/* home: products first, a one-strip hero */
.hero-strip{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0 6px}
.hero-strip h1{font-size:clamp(1.15rem,1.9vw,1.6rem);margin:0 0 4px}
.hero-strip p{margin:0;color:var(--muted);font-size:.95rem}
.hero-strip .cta{display:flex;gap:8px;flex-wrap:wrap}
.hero-strip .btn{padding:9px 14px;font-size:.9rem}
.section.first{margin-top:14px}
.trust-strip{list-style:none;margin:18px 0 6px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 22px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);font-size:.88rem;color:var(--muted)}
.trust-strip li::before{content:"\2699";color:var(--brass);margin-right:7px}
.trust-strip a{color:var(--brass-2)}
.about-strip .desc{max-width:80ch}
@media (max-width:700px){.hero-strip{padding-top:8px}.hero-strip h1{font-size:1.15rem}.hero-strip p{font-size:.9rem}.trust-strip{gap:4px 14px;font-size:.82rem}}

/* product page: pre-order block, estimator */
.preorder-block{background:var(--bg-3);border:1px solid var(--line-2);border-left:3px solid var(--warn);border-radius:var(--r-sm);padding:10px 12px;margin:10px 0;font-size:.9rem;color:var(--muted)}
.preorder-block p{margin:0 0 6px;color:var(--text)} .preorder-block ul{margin:0 0 6px;padding-left:18px} .preorder-block li{margin:3px 0}
.estimator{margin-top:10px;font-size:.9rem;color:var(--muted)} .estimator summary{cursor:pointer;color:var(--brass-2)}
.est-row{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.est-row select,.est-row input{background:var(--bg);border:1px solid var(--line-2);color:var(--text);padding:8px;border-radius:var(--r-sm);font:inherit}
.est-row .btn{padding:8px 12px}

.langbar{background:var(--bg-3);border-bottom:1px solid var(--line-2);text-align:center;font-size:.9rem;padding:8px 12px;color:var(--muted)}
.langbar a{color:var(--brass-2);text-decoration:underline}

/* footer: newsletter, payment, social */
.fbottom{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.newsletter label{display:block;margin-bottom:8px;color:var(--text)} .newsletter small{color:var(--dim);line-height:1.35}
.newsletter div{display:flex;gap:8px;max-width:420px} .newsletter input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);color:var(--text);padding:10px;border-radius:var(--r-sm);font:inherit}
.pay{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--dim);font-size:.82rem}
.pay b{border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;color:var(--muted);font-weight:600;font-size:.75rem}
.social{margin-top:10px;font-size:.88rem} .social a{color:var(--muted)}
@media (max-width:700px){.fbottom{grid-template-columns:minmax(0,1fr)}}

/* header typeahead */
.suggest-wrap{position:relative;flex:1;display:flex;min-width:0}
.suggest-wrap input{width:100%}
.suggest{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--bg-3);border:1px solid var(--brass-dk);border-radius:0 0 var(--r-sm) var(--r-sm);max-height:420px;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.suggest a{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:8px 10px;color:var(--text);border-bottom:1px solid var(--line);font-size:.9rem}
.suggest a:hover,.suggest a.on{background:var(--bg-2)}
.suggest img,.suggest .noimg{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:4px}
.suggest .pr{color:var(--brass-2);font-weight:600}
.suggest a.more{display:block;text-align:center;color:var(--brass-2);border-bottom:0}
.hero-strip .upcoming{flex-basis:100%;margin:0;font-size:.85rem;color:var(--dim)} .hero-strip .upcoming a{color:var(--muted)}

/* explore block at the bottom of listings */
.about-game{margin:36px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.about-game h2{font:600 .78rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;padding:0;border:0}
.about-game h2::after{content:none}
.about-game p{margin:0 0 10px;color:var(--muted);font-size:.92rem;line-height:1.55}
.explore-line{margin:0;font-size:.85rem;color:var(--muted);line-height:2}
.explore-line b{color:var(--text);margin-right:6px}
.explore-line a{color:var(--brass-2);white-space:nowrap;display:inline-block}
.explore-line a::after{content:"·";color:var(--dim);margin:0 8px}
.explore-line a:last-child::after{content:none}
.explore-line small{color:var(--dim)}
.explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.explore-grid a{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--text)}
.explore-grid a:hover{border-color:var(--brass)} .explore-grid b{display:block;font-size:.92rem} .explore-grid small{color:var(--dim)}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:#141109;padding:8px 12px;z-index:100;border-radius:0 0 6px 0}
.skip:focus{left:0}

.seticon{display:inline-block;vertical-align:-4px;margin-right:6px;filter:invert(0.85) sepia(0.6) saturate(2) hue-rotate(5deg)}
h1 .seticon{width:28px;height:28px;vertical-align:-3px;margin-right:10px}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;vertical-align:middle}
.seg-b,.hdr nav a.seg-b{background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.06em;padding:6px 10px!important;border:0;border-radius:0;line-height:1.2;text-decoration:none}
.seg-b+.seg-b{border-left:1px solid var(--line-2)}
.seg-b:hover{color:var(--text)}
.seg-b.on,.hdr nav a.seg-b.on{background:var(--brass);color:#1a1712}
.usd{color:var(--dim);font-weight:500;font-size:.75em;white-space:nowrap}
.booster ul{margin:6px 0 8px;padding-left:20px;columns:2;column-gap:24px} .booster li{margin:2px 0;break-inside:avoid}
@media (max-width:520px){.booster ul{columns:1}}

/* ── CCC (ccctcg.ca, Dorval): the second brand, same layout, its own palette (store/brand.py) ──
   Navy for trust, gold for the cards, teal as the fresh accent; Outfit instead of Cinzel. Every rule
   above reads the variables, so the theme is this block and nothing else. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/store/fonts/outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/store/fonts/outfit-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── CCC (ccctcg.ca): LIGHT theme modelled on 401games.ca (owner 2026-09-20: "use 401 games as an example"): white page,
   dark text, logo + wide search + account row, a full-width teal category band, four image tiles instead of game boxes,
   plain white product cards, dark teal footer with centred columns. Everything below the tokens is structure. ── */
html[data-brand="ccc"]{
  --bg:#ffffff; --bg-2:#f5f7f9; --bg-3:#eaeff3; --line:#e2e8ee; --line-2:#cbd5df;
  --text:#1b2330; --muted:#4b5968; --dim:#76859a;
  --brass:#1f8a8a; --brass-2:#136d6d; --brass-dk:#0f5757; --brass-glow:rgba(31,138,138,.18);
  --ok:#1f8a4b; --warn:#b7791f; --bad:#c0392b; --info:#1f6f8a;
  --font-display:"Outfit",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --brass-grad:linear-gradient(180deg,#ffd45a 0%,#f2b632 55%,#d99b12 100%);
  --brass-text:none; --shadow:0 2px 10px rgba(16,32,48,.08);
}
html[data-brand="ccc"] body{background:#fff;background-image:none;color:#1b2330}
html[data-brand="ccc"] h1,html[data-brand="ccc"] h2,html[data-brand="ccc"] h3{letter-spacing:0;font-weight:800;color:#0e1b2e;background:none;-webkit-text-fill-color:#0e1b2e;text-shadow:none}
html[data-brand="ccc"] h1{-webkit-background-clip:initial;background-clip:initial;color:#0e1b2e}
html[data-brand="ccc"] a{color:#136d6d}
html[data-brand="ccc"] a:hover{color:#0f5757}
html[data-brand="ccc"] :focus-visible{outline-color:#1f8a8a}
html[data-brand="ccc"] .topbar{background:#0e1b2e;color:#e6eef7;border-bottom:0}
html[data-brand="ccc"] .topbar b,html[data-brand="ccc"] .topbar strong,html[data-brand="ccc"] .topbar a{color:#fff}
/* header row: logo left, wide search, account/cart right (401) */
html[data-brand="ccc"] header.site{background:#fff;backdrop-filter:none;border-bottom:0;box-shadow:0 1px 0 #e2e8ee}
html[data-brand="ccc"] .hdr{gap:18px;padding:12px 0}
html[data-brand="ccc"] .logo img{height:56px;width:auto}
html[data-brand="ccc"] .hdr form{flex:1 1 320px;max-width:640px}
html[data-brand="ccc"] .hdr input[type=search]{background:#fff;border:2px solid #cbd5df;border-right:0;color:#1b2330;border-radius:6px 0 0 6px;padding:11px 14px}
html[data-brand="ccc"] .hdr input[type=search]::placeholder{color:#8a97a8}
html[data-brand="ccc"] .hdr form button{background:#1f8a8a;color:#fff;border:2px solid #1f8a8a;border-radius:0 6px 6px 0;font-weight:700}
html[data-brand="ccc"] .hdr nav a{color:#1b2330;font-weight:600}
html[data-brand="ccc"] .hdr nav a:hover{background:#eaeff3}
html[data-brand="ccc"] .seg{border-color:#cbd5df}
html[data-brand="ccc"] .seg-b,html[data-brand="ccc"] .hdr nav a.seg-b{color:#4b5968}
html[data-brand="ccc"] .seg-b.on,html[data-brand="ccc"] .hdr nav a.seg-b.on{background:#1f8a8a;color:#fff}
html[data-brand="ccc"] .cart-btn{border:2px solid #0e1b2e;border-radius:6px;padding:7px 12px!important}
html[data-brand="ccc"] .cart-btn .n{background:#f2b632;color:#0e1b2e}
/* category band: full-bleed teal row of uppercase links, like 401's green menu */
html[data-brand="ccc"] .gamesbar{margin:0 calc(50% - 50vw);padding:0 calc(50vw - 50%);background:#1f8a8a;justify-content:space-evenly;gap:0;flex-wrap:nowrap}
html[data-brand="ccc"] .gamesbar>a,html[data-brand="ccc"] .gamesbar summary{border:0;border-radius:0;background:transparent;color:#f4fbfa;font-weight:700;font-size:clamp(.68rem,.9vw,.82rem);letter-spacing:.06em;text-transform:uppercase;padding:14px 10px;line-height:1;flex:0 1 auto;min-width:0}
html[data-brand="ccc"] .gamesbar>a:hover,html[data-brand="ccc"] .gamesbar>a.on,html[data-brand="ccc"] .gamesbar summary:hover,html[data-brand="ccc"] .moregames[open] summary{background:#176b6b;color:#fff}
html[data-brand="ccc"] .moregames .menu{background:#fff;border:1px solid #cbd5df;box-shadow:0 8px 24px rgba(16,32,48,.15)}
html[data-brand="ccc"] .moregames .menu a{color:#1b2330}
/* home: four image tiles (401's New releases / Restocks / Pre-orders / Best selling row) */
html[data-brand="ccc"] .ccc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0 30px}
html[data-brand="ccc"] .ccc-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eaeff3;box-shadow:0 2px 10px rgba(16,32,48,.12)}
html[data-brand="ccc"] .ccc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
html[data-brand="ccc"] .ccc-tile:hover img{transform:scale(1.04)}
html[data-brand="ccc"] .ccc-tile span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 14px;background:linear-gradient(180deg,rgba(14,27,46,0),rgba(14,27,46,.85));color:#fff;font:800 1.15rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.04em;text-align:center}
@media (max-width:900px){html[data-brand="ccc"] .ccc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-brand="ccc"] .ccc-grid-title{margin:0 0 6px;font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;text-align:center}
html[data-brand="ccc"] .catalog.nofilters{margin-top:0}
html[data-brand="ccc"] .toolbar{justify-content:center}
html[data-brand="ccc"] .toolbar select{background:#fff}
/* cards: white, thin border, dark name, teal price */
html[data-brand="ccc"] .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
html[data-brand="ccc"] .card{background:#fff;border:1px solid #e2e8ee;border-radius:8px;box-shadow:none}
html[data-brand="ccc"] .card:hover{border-color:#1f8a8a;transform:none;box-shadow:0 6px 18px rgba(16,32,48,.12)}
html[data-brand="ccc"] .card .img{background:#fff;padding:12px}
html[data-brand="ccc"] .card .body{padding:10px 14px 14px;text-align:center}
html[data-brand="ccc"] .card .name{font-size:.95rem;font-weight:700;color:#1b2330}
html[data-brand="ccc"] .card .meta{color:#76859a}
html[data-brand="ccc"] .card .price{color:#136d6d;font-size:1.15rem;font-weight:800;align-self:center;margin-top:8px}
html[data-brand="ccc"] .card .badge{border:0;background:none;padding:0;font-weight:600;color:#1f8a4b;align-self:center}
html[data-brand="ccc"] .card .badge.b-preorder{color:#b7791f}
html[data-brand="ccc"] .card .badge.b-soldout{color:#76859a}
html[data-brand="ccc"] .card .badge::before{content:"\25CF";margin-right:6px;font-size:.7em;vertical-align:1px}
/* filters, chips, pager, notices on white */
html[data-brand="ccc"] .filters{background:#f5f7f9;border:1px solid #e2e8ee;border-radius:8px;padding:12px 14px}
html[data-brand="ccc"] .chip{background:#e6f4f4;border-color:#1f8a8a;color:#0f5757}
html[data-brand="ccc"] .chip b{color:#0f5757}
html[data-brand="ccc"] .pager .cur{background:#1f8a8a;color:#fff;border-color:#1f8a8a}
html[data-brand="ccc"] .notice{background:#f5f7f9;border-left-color:#1f8a8a}
html[data-brand="ccc"] .btn{color:#0e1b2e;border-color:#c9931a}
html[data-brand="ccc"] .btn.ghost{color:#1b2330;border-color:#cbd5df}
html[data-brand="ccc"] .btn.ghost:hover{color:#0e1b2e;border-color:#1f8a8a}
/* product page */
html[data-brand="ccc"] .pdp .gallery{border:1px solid #e2e8ee}
html[data-brand="ccc"] .buybox{background:#f5f7f9;border-color:#e2e8ee;box-shadow:none}
html[data-brand="ccc"] .buybox .price{color:#0e1b2e}
html[data-brand="ccc"] .buybox input[type=number]{background:#fff}
html[data-brand="ccc"] .section h2::after{background:#1f8a8a;height:3px;width:48px}
html[data-brand="ccc"] .trust-strip{background:#f5f7f9;border:1px solid #e2e8ee;border-radius:8px;justify-content:center}
html[data-brand="ccc"] .trust-strip li::before{color:#1f8a8a}
html[data-brand="ccc"] .about-strip{text-align:center}
html[data-brand="ccc"] .about-strip .desc{margin:0 auto}
html[data-brand="ccc"] .ccc-faq{margin:12px 0 16px;border-top:1px solid #e2e8ee}
html[data-brand="ccc"] .ccc-faq details{border-bottom:1px solid #e2e8ee;padding:8px 0}
html[data-brand="ccc"] .ccc-faq summary{color:#0e1b2e;cursor:pointer;font-weight:700}
html[data-brand="ccc"] .ccc-faq p{margin:6px 0 0;color:#4b5968}
html[data-brand="ccc"] .suggest{background:#fff;border-color:#cbd5df;color:#1b2330}
html[data-brand="ccc"] input,html[data-brand="ccc"] select,html[data-brand="ccc"] textarea{color:#1b2330}
/* footer: dark teal, centred uppercase headings (401's olive block) */
html[data-brand="ccc"] footer.site{background:#176b6b;border-top:0;color:#d9efee;text-align:center;margin-top:48px}
html[data-brand="ccc"] .fcols{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-items:center;gap:28px}
html[data-brand="ccc"] .fcols h3{color:#fff;font-size:1rem;letter-spacing:.1em}
html[data-brand="ccc"] .fcols a,html[data-brand="ccc"] footer.site a{color:#e8f6f5}
html[data-brand="ccc"] .fcols a:hover,html[data-brand="ccc"] footer.site a:hover{color:#fff;text-decoration:underline}
html[data-brand="ccc"] .fbottom{grid-template-columns:1fr;text-align:center;border-top-color:rgba(255,255,255,.2)}
html[data-brand="ccc"] .fcols p{color:#d9efee}
@media (max-width:700px){html[data-brand="ccc"] .logo img{height:44px}}

/* ── Mobile (both brands), owner 2026-09-20: the sticky header ate half the phone screen, the games bar wrapped to
   four rows, cards ran one per row. Header scrolls away on phones, the games bar becomes one swipeable row,
   products go two per row, tile labels shrink. ── */
@media (max-width:700px){
  header.site{position:static}
  .gamesbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  .gamesbar::-webkit-scrollbar{display:none}
  .gamesbar>a,.gamesbar summary{flex:none}
  .moregames{position:static}
  html[data-brand="ccc"] .gamesbar{justify-content:flex-start;padding-left:calc(50vw - 50%);flex-wrap:nowrap}
  html[data-brand="ccc"] .gamesbar>a,html[data-brand="ccc"] .gamesbar summary{padding:12px 12px;flex:none;white-space:nowrap;font-size:.78rem}
  .hdr{padding:8px 0;gap:8px 12px}
  html[data-brand="ccc"] .hdr{padding:8px 0}
}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-brand="ccc"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .name{font-size:.88rem}
  .card .body{padding:8px 10px 10px}
  html[data-brand="ccc"] .card .body{padding:8px 10px 10px}
  html[data-brand="ccc"] .ccc-tiles{gap:10px;margin:14px 0 22px}
  html[data-brand="ccc"] .ccc-tile span{font-size:.9rem;padding:20px 8px 10px}
  html[data-brand="ccc"] .ccc-grid-title{font-size:1.2rem}
}

/* ── CCC collection pages after 401's: centred uppercase title band, filters as grey header bars over plain
   checkbox lists, coloured stock badges on the picture, centred card text with "CAD" ── */
html[data-brand="ccc"] .ccc-ptitle{text-align:center;text-transform:uppercase;font-weight:600;font-size:1.35rem;letter-spacing:.04em;margin:0 calc(50% - 50vw) 18px;padding:14px calc(50vw - 50%);border-bottom:1px solid #e2e8ee}
html[data-brand="ccc"] .filters{background:none;border:0;padding:0}
html[data-brand="ccc"] .fhead{font-weight:700;color:#1b2330;padding:6px 0 10px;border-bottom:1px solid #1b2330;margin-bottom:8px}
html[data-brand="ccc"] .facet{border:0;padding:0 0 10px}
html[data-brand="ccc"] .facet summary{background:#f2f4f6;border:1px solid #e2e8ee;border-radius:4px;padding:10px 12px;font-weight:600;color:#1b2330;font-size:.95rem}
html[data-brand="ccc"] .facet summary::after{content:"▾";font-size:1rem;line-height:1;color:#1b2330}
html[data-brand="ccc"] .facet[open] summary::after{content:"▴"}
html[data-brand="ccc"] .facet ul{padding:6px 6px 0}
html[data-brand="ccc"] .facet li label{color:#1b2330;padding:5px 0}
html[data-brand="ccc"] .facet li small{color:#76859a}
html[data-brand="ccc"] .facet input[type=checkbox]{accent-color:#1f8a8a;width:16px;height:16px;border-radius:3px}
html[data-brand="ccc"] .fsearch{background:#eef1f4;border:0;border-radius:999px;padding:7px 12px;margin:8px 6px 0;width:calc(100% - 12px);color:#1b2330}
html[data-brand="ccc"] .fmore{background:none;border:0;color:#1b2330;font-weight:600;padding:6px;cursor:pointer;text-align:left}
html[data-brand="ccc"] .fmore::after{content:" +"}
html[data-brand="ccc"] .frange input{background:#fff;border:1px solid #cbd5df;color:#1b2330}
html[data-brand="ccc"] .card{position:relative}
html[data-brand="ccc"] .card .body{padding:12px 12px 16px;text-align:center}
html[data-brand="ccc"] .card .badge{position:absolute;top:10px;left:10px;z-index:1;border-radius:3px;padding:4px 8px;font-size:.72rem;font-weight:700;text-transform:none;background:#1f8a4b;color:#fff;align-self:auto}
html[data-brand="ccc"] .card .badge::before{content:none}
html[data-brand="ccc"] .card .badge.b-preorder{background:#b7791f;color:#fff}
html[data-brand="ccc"] .card .badge.b-warehouse{background:#1f6f8a;color:#fff}
html[data-brand="ccc"] .card .badge.b-soldout{background:#c0392b;color:#fff}
html[data-brand="ccc"] .card .price{color:#1b2330;font-size:1.05rem;font-weight:600}
html[data-brand="ccc"] .card .price::after{content:" CAD";font-size:.85em;font-weight:600}
html[data-brand="ccc"] .toolbar{justify-content:flex-start}
html[data-brand="ccc"] .toolbar .count{font-weight:400;color:#1b2330}
html[data-brand="ccc"] .toolbar select{border:1px solid #cbd5df;padding:8px 12px}
html[data-brand="ccc"] .ftoggle{border-color:#1b2330;color:#1b2330}
@media (min-width:901px){html[data-brand="ccc"] .ftoggle{display:none}}