/* ══════════════════════════════════════════════════════════════════════════════════════════════
   L'Atelier TCG (ateliertcg.com) — the whole skin, in ONE file.

   Written 2026-11-14, taking the shop light. It had been dark with gold since it opened, and the
   owner asked the right question about that: "I feel like all websites are light for a reason?"
   There is one, and it is commercial, not aesthetic. Packshots are photographed on white, so on
   a dark page every one needs a plate behind it. Long text (descriptions, shipping, returns) is
   easier dark-on-light. And checkout hands off to Stripe's own light page. Every serious TCG
   retailer is light: Hobbiesville, Card Kingdom, Face to Face, 401 Games, Star City Games.

   BRONZE, NOT GOLD. Owner: "Atelier is more bronze, it's a workshop basically." Atelier means
   workshop and the logo is riveted metal plates with a clock and a gear, so the tones below are
   SAMPLED from the logo itself (#706050, #807060, #A09080): aged and muted, never shiny.

   ⚠ IT MUST NOT READ AS THE SAME COMPANY AS ccctcg.ca. Owner: "we don't want people or Google to
   think it's the same owner/website/company." The two shops share this codebase, so they are
   kept apart deliberately, on every lever a real pair of sibling brands uses:
       colour   bronze on warm paper        CCC: green on white
       type     Cinzel headings             CCC: Inter throughout
       header   logo and search on the LEFT CCC: centred search in a colour band
       nav      dark bar, uppercase         CCC: white tabs with an underline
       extras   four shop-by tiles, no      CCC: a trust strip, no tiles
                trust strip
       slides   its own art and its own     CCC: its own, and never the same words
                wording (store/slides.py)
   The wording is the one that matters most: duplicated copy across two domains is what Google
   actually reads as affiliation. Their product descriptions already differ; keep it that way.

   ⚠ Nothing here may be appended to. Change the rule that exists. Layout and behaviour come from
   store.css; this only re-skins.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

html[data-brand="atelier"]{
  --paper:#FAF8F4; --soft:#F2EFE8;
  --bronze:#8A6033; --bronze-dk:#5E4222; --bronze-lt:#B08855; --bronze-pale:#EFE4D4;
  --steel:#2B2721;

  /* the tokens store.css reads */
  --bg:#FAF8F4; --bg-2:#FFFFFF; --bg-3:#F2EFE8;
  --text:#2E2820; --muted:#5E5648; --dim:#8E8678;
  --line:#E6E1D7; --line-2:#D6CFC1;
  --brass:#8A6033; --brass-2:#B08855; --brass-dk:#5E4222; --brass-glow:rgba(138,96,51,.18);
  --brass-grad:linear-gradient(180deg,#9A6C3A,#8A6033);
  --brass-text:none;
  --shadow:0 1px 2px rgba(46,40,32,.07);
  --r:10px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Cinzel",Georgia,serif;
}

html[data-brand="atelier"] body{background:var(--paper);color:var(--text);
  background-image:none;font-family:var(--font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip}
html[data-brand="atelier"] h1,html[data-brand="atelier"] h2,html[data-brand="atelier"] h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:.03em;color:var(--text);
  -webkit-text-fill-color:var(--text);background:none;text-shadow:none}
html[data-brand="atelier"] a{color:var(--text)}
html[data-brand="atelier"] a:hover{color:var(--bronze-dk)}
html[data-brand="atelier"] :focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ── the notice strip: dark, with a bronze rule under it ─────────────────────────────────── */
html[data-brand="atelier"] .topbar{background:var(--steel);color:#CFC6B6;
  border-bottom:2px solid var(--bronze);font-size:12.5px;text-align:center;padding:8px 16px}
html[data-brand="atelier"] .topbar b,html[data-brand="atelier"] .topbar strong,
html[data-brand="atelier"] .topbar a{color:#fff;font-weight:600}

/* ── the header: paper, logo and search LEFT, utilities right ────────────────────────────── */
html[data-brand="atelier"] header.site{background:var(--paper);background-image:none;
  border-bottom:1px solid var(--line);box-shadow:none;padding:0}
html[data-brand="atelier"] header.site>.wrap{max-width:1320px;padding:0 24px}
html[data-brand="atelier"] .hdr{display:flex;align-items:center;gap:20px;min-height:84px;
  padding:14px 0;background:none;border:0;box-shadow:none;clip-path:none;flex-wrap:wrap}
html[data-brand="atelier"] .logo{flex:none}
html[data-brand="atelier"] .logo img{height:46px;width:auto;filter:none}
html[data-brand="atelier"] .hdr form{flex:1;min-width:220px;max-width:520px;position:relative;
  background:none;border:0;box-shadow:none;display:block}
html[data-brand="atelier"] .hdr .suggest-wrap{display:block}
html[data-brand="atelier"] .hdr input[type=search]{width:100%;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;color:var(--text);padding:11px 104px 11px 14px;
  font-size:14.5px;height:auto}
html[data-brand="atelier"] .hdr input[type=search]:focus{border-color:var(--bronze);
  box-shadow:0 0 0 3px rgba(138,96,51,.14)}
html[data-brand="atelier"] .hdr input[type=search]::placeholder{color:var(--dim)}
html[data-brand="atelier"] .hdr form button{position:absolute;right:4px;top:4px;bottom:4px;
  background:var(--bronze);color:#fff;border:0;border-radius:4px;padding:0 15px;height:auto;
  font:600 12.5px var(--font);letter-spacing:0;text-transform:none}
html[data-brand="atelier"] .hdr form button:hover{background:var(--bronze-dk);filter:none}

html[data-brand="atelier"] .hdr nav{margin-left:auto;display:flex;align-items:center;gap:3px}
html[data-brand="atelier"] .hdr nav a{color:var(--muted);font:500 13.5px var(--font);
  letter-spacing:0;padding:8px 10px;border-radius:6px;background:none}
html[data-brand="atelier"] .hdr nav a:hover{color:var(--text);background:var(--soft)}
html[data-brand="atelier"] .seg{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  margin:0 4px}
html[data-brand="atelier"] .seg-b,html[data-brand="atelier"] .hdr nav a.seg-b{color:var(--dim);
  background:#fff;border-radius:0;padding:6px 10px;font:600 12px var(--font)}
html[data-brand="atelier"] .seg-b.on,html[data-brand="atelier"] .hdr nav a.seg-b.on{
  background:var(--bronze);color:#fff}
html[data-brand="atelier"] .cart-btn{background:var(--bronze);color:#fff;border:0;
  border-radius:6px;padding:10px 16px;font:600 13.5px var(--font);margin-left:5px}
html[data-brand="atelier"] .cart-btn:hover{background:var(--bronze-dk)}
html[data-brand="atelier"] .cart-btn .n{background:rgba(255,255,255,.24);color:#fff;
  border-radius:999px;padding:1px 7px;font-size:11.5px}
html[data-brand="atelier"] .mnav summary{border:1px solid var(--line-2);color:var(--muted);
  border-radius:6px;background:#fff}
html[data-brand="atelier"] .mnav .panel{background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 16px 40px rgba(46,40,32,.16)}
html[data-brand="atelier"] .mnav .panel a{color:var(--text)}
html[data-brand="atelier"] .mnav .panel a:hover{background:var(--soft)}

/* ── the nav: a dark bar, the clearest structural break from CCC's white tabs ─────────────── */
/* ⚠ Three goes at this bar on 2026-11-14, all by the owner's eye. Bunched left left ~700px of
   dead bar ("a lot of emptiness on the right"); space-between pushed ALL and MORE GAMES onto the
   far edges; equal cells with a hairline between them ("should we put a | between the
   categories?") were turned down because the rule ran the full height of the bar. It is CENTRED
   at its natural width, with a SHORT | in the middle of each gap. Five games stays his
   2026-09-25 ruling. */
html[data-brand="atelier"] .gamesbar{background:var(--steel);background-image:none;border:0;
  box-shadow:none;gap:26px;justify-content:center;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 max(24px,calc(50vw - 660px))}
html[data-brand="atelier"] .gamesbar>a,html[data-brand="atelier"] .gamesbar summary{
  font:600 13px var(--font);letter-spacing:.05em;text-transform:uppercase;color:#CFC6B6;
  padding:14px 10px;border:0;border-radius:0;background:none;display:flex;align-items:center;
  white-space:nowrap}
/* a | between the categories, SHORT and centred on the label. Owner 2026-11-14: "I wanted | but
   it doesn't hit the top or bottom" — a full-height border-left was the first try and he turned
   it down. It is drawn in the middle of the gap, so it belongs to neither neighbour. */
html[data-brand="atelier"] .gamesbar>a,html[data-brand="atelier"] .gamesbar>details{
  position:relative}
html[data-brand="atelier"] .gamesbar>a+a::before,
html[data-brand="atelier"] .gamesbar>a+details::before,
html[data-brand="atelier"] .gamesbar>details+a::before{content:"";display:block;position:absolute;
  left:-13px;top:50%;transform:translateY(-50%);width:1px;height:15px;
  background:rgba(255,255,255,.32)}
html[data-brand="atelier"] .gamesbar>a::before{display:none}
html[data-brand="atelier"] .gamesbar>a:hover,html[data-brand="atelier"] .gamesbar summary:hover{
  color:#fff;background:rgba(255,255,255,.07)}
html[data-brand="atelier"] .gamesbar>a.on,html[data-brand="atelier"] .moregames[open] summary{
  color:#fff;background:none;box-shadow:none}
html[data-brand="atelier"] .moregames .menu{background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 16px 40px rgba(46,40,32,.18)}
html[data-brand="atelier"] .moregames .menu a{color:var(--text)}

/* ── the page body ───────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] main.wrap{background:var(--paper);max-width:1320px;
  padding:0 24px 64px;box-shadow:none}

/* ── the carousel ────────────────────────────────────────────────────────────────────────
   Full-bleed art with the words over it on the RIGHT, which is the mirror of CCC's. A hard split
   with the words on a solid plate was tried on 2026-11-14 and the owner turned it down, so this
   is the format. Keep the two shops apart through the art and the words instead: different
   pictures per shop (store/slides.py), different palette, different type.
   ───────────────────────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .ccc-hero{position:relative;background:var(--soft);
  max-width:none;margin:28px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
html[data-brand="atelier"] .ccc-slide{display:none;position:relative;height:340px}
html[data-brand="atelier"] .ccc-slide.on{display:block}
html[data-brand="atelier"] .ccc-slide .art{position:absolute;inset:0;background-size:cover;
  background-position:center 45%}
html[data-brand="atelier"] .ccc-slide .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(20,16,10,.9) 0%,rgba(20,16,10,.64) 44%,
    rgba(20,16,10,.06) 78%,transparent 100%)}
html[data-brand="atelier"] .ccc-slide .in{position:relative;max-width:1320px;margin:0 auto;
  padding:36px 44px;height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;text-align:right}
html[data-brand="atelier"] .ccc-slide .box{max-width:520px}
html[data-brand="atelier"] .ccc-slide .kicker{font:600 11px var(--font);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-lt);margin-bottom:12px}
html[data-brand="atelier"] .ccc-slide .setlogo{height:74px;width:auto;display:block;
  margin:0 0 16px auto}
html[data-brand="atelier"] .ccc-slide h2{margin:0 0 11px;
  font:700 clamp(23px,2.8vw,34px)/1.16 var(--font-display);color:#fff;
  -webkit-text-fill-color:#fff;letter-spacing:.015em}
html[data-brand="atelier"] .ccc-slide p{margin:0 0 20px;font-size:15.5px;line-height:1.55;
  color:#DCD4C6;max-width:44ch;margin-left:auto}
html[data-brand="atelier"] .ccc-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;
  justify-content:center;gap:8px;z-index:3}
html[data-brand="atelier"] .ccc-dots button{width:26px;height:3px;border:0;border-radius:999px;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0}
html[data-brand="atelier"] .ccc-dots button.on{background:var(--bronze-lt)}
html[data-brand="atelier"] .ccc-arrow{position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;width:38px;height:38px;border-radius:999px;border:0;background:rgba(255,255,255,.16);
  color:#fff;cursor:pointer;font-size:17px;line-height:1;display:flex;align-items:center;
  justify-content:center}
html[data-brand="atelier"] .ccc-arrow:hover{background:rgba(255,255,255,.3)}
html[data-brand="atelier"] .ccc-arrow.prev{left:14px}
html[data-brand="atelier"] .ccc-arrow.next{right:14px}

/* ── the shop-by tiles, the row CCC does not have ────────────────────────────────────────── */
html[data-brand="atelier"] .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin:18px 0 0}
html[data-brand="atelier"] .tile{display:flex;align-items:center;gap:16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;text-decoration:none;
  overflow:hidden}
html[data-brand="atelier"] .tile:hover{border-color:var(--bronze-lt);background:var(--soft)}
html[data-brand="atelier"] .tile .im{flex:none;width:62px;height:62px;display:flex;
  align-items:center;justify-content:center}
html[data-brand="atelier"] .tile .im img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply}
html[data-brand="atelier"] .tile b{font:700 14.5px var(--font-display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text)}

/* ── buttons ─────────────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .btn{background:var(--bronze);color:#fff;border:0;border-radius:6px;
  font:600 14px var(--font);letter-spacing:0;text-transform:none;padding:12px 22px;
  box-shadow:none;text-shadow:none}
html[data-brand="atelier"] .btn:hover{background:var(--bronze-dk);filter:none}
html[data-brand="atelier"] .btn.ghost{background:#fff;color:var(--text);
  border:1px solid var(--line-2)}
html[data-brand="atelier"] .btn.ghost:hover{background:var(--soft)}
html[data-brand="atelier"] .ccc-slide .btn.line{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.5)}
html[data-brand="atelier"] .ccc-slide .btn.line:hover{background:rgba(255,255,255,.14)}

/* ── product tiles ───────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:26px 20px}
html[data-brand="atelier"] .card{background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;display:flex;flex-direction:column;position:relative;background-image:none}
html[data-brand="atelier"] .card:hover{box-shadow:none}
html[data-brand="atelier"] .card .img{background:#fff;border:1px solid var(--line);
  border-radius:var(--r);aspect-ratio:1/1;padding:16px;margin:0;display:flex;align-items:center;
  justify-content:center;overflow:hidden;position:relative}
html[data-brand="atelier"] .card:hover .img{border-color:var(--bronze-lt)}
html[data-brand="atelier"] .card .img img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply}
html[data-brand="atelier"] .card .name{margin:12px 0 0;font:500 14px/1.4 var(--font);
  color:var(--text);-webkit-text-fill-color:var(--text);background:none;letter-spacing:0;
  height:2.8em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[data-brand="atelier"] .card .meta{margin:4px 0 0;font-size:12.5px;color:var(--dim)}
html[data-brand="atelier"] .card .price{margin:7px 0 0;font:700 16px var(--font-display);
  color:var(--text);letter-spacing:.015em}
html[data-brand="atelier"] .card .badge{position:absolute;top:10px;left:10px;right:auto;
  border-radius:4px;background:var(--bronze-pale);color:var(--bronze-dk);border:0;
  font:600 10.5px var(--font);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;
  z-index:2}
html[data-brand="atelier"] .card .badge.b-soldout{background:#EFEDE7;color:var(--dim)}

/* ── filters, sort bar, pager ────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .filters{background:none;border:0;box-shadow:none;padding:0 20px 0 0}
html[data-brand="atelier"] .facet{border-top:1px solid var(--line);padding:4px 0}
html[data-brand="atelier"] .facet:first-of-type{border-top:0}
html[data-brand="atelier"] .facet summary{background:none;border:0;padding:12px 2px;
  font:700 13px var(--font-display);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text)}
html[data-brand="atelier"] .facet li label{color:var(--muted);font-size:13.5px}
html[data-brand="atelier"] .facet li label:hover{color:var(--text)}
html[data-brand="atelier"] .facet li small{color:var(--dim)}
html[data-brand="atelier"] .facet input[type=checkbox]{accent-color:var(--bronze)}
html[data-brand="atelier"] .facet input[type=search],
html[data-brand="atelier"] .facet input[type=text]{background:#fff;border:1px solid var(--line-2);
  color:var(--text);border-radius:6px}
html[data-brand="atelier"] .toolbar{background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:0 0 14px;color:var(--muted)}
html[data-brand="atelier"] .toolbar *{color:var(--muted)}
html[data-brand="atelier"] .toolbar select,html[data-brand="atelier"] .toolbar .ftoggle{
  background:#fff;border:1px solid var(--line-2);color:var(--text);border-radius:6px}
html[data-brand="atelier"] .pager a,html[data-brand="atelier"] .pager .cur{border-radius:6px;
  border-color:var(--line-2)}

/* ── product page ────────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .pdp .gallery{background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:none}
html[data-brand="atelier"] .pdp .gallery img{background:none;mix-blend-mode:multiply}
html[data-brand="atelier"] .buybox{background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:none}
html[data-brand="atelier"] .buybox .price,html[data-brand="atelier"] .pdp .price{
  color:var(--text);-webkit-text-fill-color:var(--text);background:none;
  font-family:var(--font-display);font-weight:700}
html[data-brand="atelier"] .chip{background:var(--soft);border:1px solid var(--line);
  color:var(--muted);border-radius:999px}
html[data-brand="atelier"] .notice{background:var(--soft);border-left:3px solid var(--bronze)}
html[data-brand="atelier"] .trust-strip{background:#fff;border:1px solid var(--line);
  border-radius:var(--r)}
html[data-brand="atelier"] .trust-strip li::before{color:var(--bronze)}
html[data-brand="atelier"] .section h2::after{background:var(--bronze)}

/* ── events ──────────────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] .ev-card,html[data-brand="atelier"] .ev-mini,
html[data-brand="atelier"] .ev-where{background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:none}
html[data-brand="atelier"] .ev-date{background:var(--soft);border:1px solid var(--line);
  border-radius:8px}
html[data-brand="atelier"] .ev-date b{color:var(--text);-webkit-text-fill-color:var(--text);
  font-family:var(--font-display)}

/* ── footer ──────────────────────────────────────────────────────────────────────────────── */
html[data-brand="atelier"] footer.site{background:var(--steel);background-image:none;
  border-top:3px solid var(--bronze);color:#B6AD9D;padding:46px 0 34px}
html[data-brand="atelier"] footer.site>.wrap{max-width:1320px;padding:0 24px}
html[data-brand="atelier"] footer.site h3{font:700 12px var(--font-display);letter-spacing:.09em;
  text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff;background:none}
html[data-brand="atelier"] footer.site a{color:#B6AD9D}
html[data-brand="atelier"] footer.site a:hover{color:var(--bronze-lt)}
html[data-brand="atelier"] footer.site b,html[data-brand="atelier"] footer.site strong{color:#fff}

/* ── the home page under the carousel ────────────────────────────────────────────────────── */
/* ⚠ the carousel's class names start with ccc- because CCC got it first; both shops share the
   markup and the script, and only the skin differs. Renaming them would mean touching ccc.css
   and cart.js on a live site, so they stay. */
html[data-brand="atelier"] .ccc-grid-title{margin:34px 0 16px;
  font:700 19px var(--font-display);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line)}
html[data-brand="atelier"] .section h2{font:700 19px var(--font-display);letter-spacing:.06em;
  text-transform:uppercase}
html[data-brand="atelier"] .game{background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:none}
html[data-brand="atelier"] .game:hover{border-color:var(--bronze-lt);background:var(--soft)}
html[data-brand="atelier"] .game b{color:var(--text);-webkit-text-fill-color:var(--text);
  background:none;font-family:var(--font-display);letter-spacing:.02em}
html[data-brand="atelier"] .about-strip{background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px}

/* ── narrow screens ──────────────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  html[data-brand="atelier"] .hdr{row-gap:10px}
  html[data-brand="atelier"] .hdr form{order:3;flex-basis:100%;max-width:none}
  html[data-brand="atelier"] .hdr nav{order:2}
  html[data-brand="atelier"] .ccc-slide{height:300px}
  html[data-brand="atelier"] .ccc-slide .art::after{
    background:linear-gradient(180deg,rgba(20,16,10,.30) 0%,rgba(20,16,10,.78) 42%,
      rgba(20,16,10,.92) 70%)}
}
@media (max-width:640px){
  html[data-brand="atelier"] main.wrap{padding:0 16px 48px}
  html[data-brand="atelier"] header.site>.wrap,
  html[data-brand="atelier"] footer.site>.wrap{padding:0 16px}
  html[data-brand="atelier"] .logo img{height:38px}
  /* a phone has to hold the longest slide (three lines and two buttons) without the words
     landing on the dots, and every slide must still be the SAME height: the owner caught the
     banner changing size on desktop and the fix is the same one here, a fixed box. */
  /* a phone has to hold the longest slide without the words landing on the dots, and every
     slide must still be the SAME height: the owner caught the banner changing size on desktop. */
  html[data-brand="atelier"] .ccc-slide{height:384px}
  html[data-brand="atelier"] .ccc-slide .in{padding:24px 18px 54px;align-items:flex-start;
    text-align:left}
  html[data-brand="atelier"] .ccc-slide h2{font-size:21px;margin-bottom:9px}
  html[data-brand="atelier"] .ccc-slide p{margin-left:0;font-size:14.5px;margin-bottom:16px}
  html[data-brand="atelier"] .ccc-slide .btn{padding:10px 16px;font-size:13.5px}
  html[data-brand="atelier"] .ccc-dots{bottom:14px}
  html[data-brand="atelier"] .ccc-slide .setlogo{margin-left:0;height:54px}
  html[data-brand="atelier"] .ccc-arrow{display:none}
  html[data-brand="atelier"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  /* a phone scrolls the bar, so it starts at the left edge instead of centring */
  html[data-brand="atelier"] .gamesbar{justify-content:flex-start;gap:0}
  html[data-brand="atelier"] .gamesbar>a+a::before,
  html[data-brand="atelier"] .gamesbar>a+details::before{display:none}
  html[data-brand="atelier"] .gamesbar>a,html[data-brand="atelier"] .gamesbar summary{
    padding:14px 14px}
  html[data-brand="atelier"] .tiles{grid-template-columns:1fr;gap:10px}
  html[data-brand="atelier"] .tile{padding:10px 14px}
  html[data-brand="atelier"] .tile .im{width:48px;height:48px}
}