/* DESIGN FOUNDATION — one container, everything aligns to it.
   --content is the only width in the system: main content, tile grid,
   footer columns and title bands all derive from it. A section is
   either inside the container or deliberately full bleed (.salehero,
   main > h1, .promo-bar); nothing sits at a third width. */
:root{--content:1140px;--gutter:40px}
*{box-sizing:border-box;margin:0}
body{font:300 18px/1.6 Archivo,-apple-system,sans-serif;color:#808080;background:#fff}
h1,h2,h3,h4,h5,h6{font-family:Archivo,sans-serif;font-weight:400;color:#000}
/* centered logo header, nav row beneath — same structure as the live
   "centered_logo" theme header */
header{border-bottom:1px solid #eaeaea;position:relative;z-index:10}
.headtop{position:relative;text-align:center;padding:26px var(--gutter) 4px}
.logo{display:inline-block}
/* width/height attributes carry the file's real pixel size (the shape the
   browser reserves before it loads); the drawn size is set here */
.logo img{display:block;height:40px;width:auto}
.headicons{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%)}
header nav{display:flex;justify-content:center;padding:8px var(--gutter) 18px}
nav ul{display:flex;list-style:none;padding:0;gap:32px;flex-wrap:wrap;justify-content:center}
nav a{text-decoration:none;color:#000;font-family:Archivo,sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase}
nav a:hover{color:#909090}
nav a.navsale{color:#e0532d}
nav li{position:relative}
.drop{display:none;position:absolute;top:100%;left:-14px;background:#fff;border:1px solid #eaeaea;padding:10px 0;min-width:210px}
.hasdrop:hover .drop{display:block}
.drop a{display:block;padding:7px 18px;font-weight:400;text-transform:none;letter-spacing:.5px;font-size:13px}
.baglink{text-decoration:none;color:#000;font-family:Archivo,sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.headicons{display:flex;align-items:center;gap:22px}
.searchtoggle{background:none;border:0;padding:0;cursor:pointer;color:#000;display:flex}
.searchtoggle:hover{color:#909090}
.searchpanel{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #eaeaea;padding:18px var(--gutter);z-index:20}
.searchpanel.open{display:block}
.searchpanel input{width:100%;max-width:480px;padding:10px 0;border:0;border-bottom:1px solid #000;font:16px Archivo,sans-serif;outline:0}
#searchresults{margin-top:14px;display:flex;flex-direction:column;gap:2px;max-width:480px}
#searchresults a{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:#000;font-size:14px}
#searchresults img,#searchresults .sr-noimg{width:40px;height:40px;object-fit:cover;background:#f5f5f5;flex:none}
#searchresults .sr-name{display:flex;flex-direction:column;gap:1px}
#searchresults .sr-cat{color:#b5b5b5;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
#searchresults .sr-price{color:#909090;margin-left:auto;font-size:13px;align-self:center}
#searchresults .sr-more{color:#b5b5b5;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:8px 0 2px;border-top:1px solid #f0eee9;margin-top:4px}
#searchresults .sr-empty{color:#909090;font-size:13px;padding:6px 0}
.promo-bar{display:block;background:#000;color:#fff;text-align:center;padding:12px 20px;font-family:Archivo,sans-serif;font-size:14px;letter-spacing:.5px;text-decoration:none}
.promo-bar strong{font-weight:600}
.promo-bar .pct{color:#e03131;font-weight:700}
.promo-bar:hover{opacity:.9}
main{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:36px var(--gutter)}
main:has(> .salehero){padding-top:0}
/* page titles: centered, compact — matching the landing pages the
   live nav actually links to (scoped to main's direct h1 so it never
   reaches the product-name h1 nested inside .product .info) */
main > h1{font-size:40px;line-height:1.25;font-weight:400;letter-spacing:2px;text-transform:uppercase;
  text-align:center;padding:52px 0 10px;margin:0}
/* explicit overrides: these <a>s live inside a <nav>, so without them
   they'd inherit the main nav's bold uppercase 16px/2px look. Live
   sub-tabs are small, thin and title-case. */
.subtabs{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;padding:2px 0 0}
.subtabs a{text-decoration:none;color:#909090;font-size:13px;font-weight:400;
  letter-spacing:.3px;text-transform:none;padding-bottom:4px}
.subtabs a:hover{color:#000}
.subtabs a.current{color:#000;border-bottom:1px solid #000}
.center{text-align:center}
/* shop/category product loop is a deliberate full-bleed section like
   the hero and tiles (the live theme runs it in an
   elementor-section-stretched); title/subtabs/footer stay in the
   container. Toolbar + grid break out to 100vw with a --gutter edge
   so their edges line up with the header nav padding. */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:30px 0 20px;
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding:0 var(--gutter) 16px;border-bottom:1px solid #eaeaea}
.toolleft,.toolright{display:flex;align-items:center;gap:22px;position:relative}
/* shared pill-style trigger for both Filter and Sort */
.toolbtn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;
  font:600 12px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#000}
.toolbtn:hover{color:#555}
.ficon{width:14px;height:10px;background:
  linear-gradient(#000,#000) left 1px/14px 1.5px no-repeat,
  linear-gradient(#000,#000) left 5px/10px 1.5px no-repeat,
  linear-gradient(#000,#000) left 9px/6px 1.5px no-repeat}
.fcount{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  border-radius:50%;background:#000;color:#fff;font-size:10px;letter-spacing:0;padding:0 4px}
.fcount[hidden]{display:none}
.chev{width:7px;height:7px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;
  transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-top:2px}
.itemcount{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#b5b5b5}
/* shared dropdown surface */
.popover{position:absolute;top:calc(100% + 14px);background:#fff;border:1px solid #eaeaea;
  z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.08);animation:pop .16s ease}
.popover[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#filterpanel{left:0;padding:22px 24px;min-width:230px}
.fgroup{margin-bottom:18px}
.fgroup:last-child{margin-bottom:0}
.flabel{display:block;font:600 10px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#b5b5b5;margin-bottom:10px}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{min-width:38px;padding:7px 12px;border:1px solid #e0dede;background:#fff;cursor:pointer;
  font:400 13px Archivo,sans-serif;color:#333;transition:.12s}
.pill:hover{border-color:#000}
.pill.active{background:#000;border-color:#000;color:#fff}
.sortwrap{position:relative}
#sortlist{right:0;padding:8px 0;min-width:190px;list-style:none}
#sortlist li{padding:9px 20px;font-size:13px;color:#555;cursor:pointer;white-space:nowrap}
#sortlist li:hover{background:#f7f5f2;color:#000}
#sortlist li[aria-selected="true"]{color:#000;font-weight:600}
.activechips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 20px}
.activechips[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #e0dede;background:#fafafa;
  cursor:pointer;font:400 12px Archivo,sans-serif;color:#333}
.chip::after{content:"\00d7";font-size:14px;line-height:1;color:#999}
.chip:hover{border-color:#000}.chip:hover::after{color:#000}
.chipclear{background:none;border:0;cursor:pointer;font:600 11px Archivo,sans-serif;letter-spacing:1px;
  text-transform:uppercase;color:#909090;padding:6px 4px;text-decoration:underline}
.chipclear:hover{color:#000}
/* the live hero is one pre-composited banner graphic (the "Sale up to
   50%" text is baked into the JPG, not HTML/CSS) — swapped for a
   dedicated mobile crop below 900px, same as the real site's
   elementor-hidden-desktop / elementor-hidden-mobile sections */
.salehero{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-bottom:36px}
.salehero img{width:100%;height:auto;display:block}
@media(max-width:900px){.salehero.nophone{display:none}}
/* the stacked bar is never shown on the home page — the hero image
   already carries that text (:has() only matches when a .salehero
   actually follows, so every other page is unaffected) */
.promo-bar:has(+ main .salehero){display:none}
/* the tile row is deliberately full bleed like the hero (small edge
   gutter), matching the live homepage where the 4 tiles span the
   whole page; captions are italic per the live .wp-caption-text */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding:0 12px}
/* height:auto is load-bearing, as for .card img: the height attribute would
   otherwise fix each tile at the picture's pixel height */
.tiles img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block}
.tiles figcaption{text-align:center;padding:14px 0}
.tiles figcaption a{text-decoration:none;color:#555;font-style:italic;font-size:16px;font-weight:300}
/* 3 large columns like the live loop, full-bleed with a --gutter edge;
   hover reveals the action strip */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 14px;
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0 var(--gutter)}
.card{text-align:center}
.card[hidden]{display:none}
.cardmedia{position:relative;overflow:hidden}
.cardmedia > a{display:block}
.noimg,.cardmedia a.noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;background:#f5f5f5;text-decoration:none}
.noimg span{font:400 11px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#c1c1c1}
.salebadge{position:absolute;top:0;left:0;z-index:2;background:#000;color:#fff;
  font:600 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;padding:9px 16px}
.price s{color:#c1c1c1}
.price .now{color:#000}
/* .cardmedia .cardbuy (0,0,2,0) beats the .buy rule (0,0,1,0) that
   in-stock simple products also carry — otherwise .buy's margin:16px
   lifts the banner off the image bottom, and its colours make simple
   vs variable cards inconsistent. margin:0 keeps it flush at the base. */
.cardmedia .cardbuy{position:absolute;left:0;right:0;bottom:0;margin:0;display:block;background:#000;color:#fff;border:0;
  padding:15px 10px;font:600 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer}
@media(hover:hover){
  .cardbuy{opacity:0;transition:opacity .15s}
  .cardmedia:hover .cardbuy{opacity:1}
}
/* wishlist heart */
.hicon{fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle;display:inline-block}
.wishbtn{background:none;border:0;padding:0;cursor:pointer;color:#111;line-height:0}
.wishbtn.saved .hicon{fill:#111;stroke:#111}
.cardmedia .wishbtn{position:absolute;top:9px;right:9px;z-index:3;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.12);transition:transform .12s}
.cardmedia .wishbtn:hover{transform:scale(1.08)}
.cardmedia .wishbtn.saved{color:#b23b3b}
.cardmedia .wishbtn.saved .hicon{fill:#b23b3b;stroke:#b23b3b}
.wishlink{display:inline-flex;align-items:center;gap:6px}
.wishlink .hicon{width:16px;height:16px}
.wishline{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0 auto;padding:9px 2px;
  font:600 11px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#555}
.info .wishline{margin-left:auto}
.wishline:hover{color:#000}
.wishline.saved{color:#b23b3b}
.wishline.saved .hicon{fill:#b23b3b;stroke:#b23b3b}
/* wishlist page */
.wishpage{min-height:40vh}
.wishempty{text-align:center;color:#8b8b8b;padding:70px 20px}
.wishempty a{color:#000}
/* height:auto is load-bearing: img width/height ATTRIBUTES otherwise
   keep their fixed pixel height when CSS only overrides width, which
   stretches/letterboxes every card (the attrs stay in the HTML purely
   as the browser's pre-load aspect hint) */
.card img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:#f5f5f5}
/* a card's name is an h2 on a grid page and an h3 under "You may also like":
   one rule, so the level a heading takes to follow the one before it never
   changes how the card looks */
.card h2,.card h3{font-size:15px;line-height:25px;letter-spacing:2px;text-transform:uppercase;margin-top:16px}
.card h2 a,.card h3 a{text-decoration:none;color:#000}
.price{font-size:15px;color:#a4a4a4;margin-top:2px}
.sale{color:#a33;margin-left:6px}
.oos{color:#b5b5b5;margin-left:6px}
/* gallery takes the leftover width; the info column is a fixed-width
   block whose right edge sits on the container's right edge, and
   align-items:start keeps its first line level with the image top */
/* full-bleed with a --gutter edge so the product lines up with the
   header (logo/nav/basket) and the shop grid: gallery left edge = 40px,
   info right edge = viewport-40px, level with the BASKET text above */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(48px,6vw,110px);align-items:start;
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:0 var(--gutter)}
/* the gallery is a tall stack of images; the info column sticks so the
   title/price/add-to-basket/description follow you down instead of
   ending and leaving dead space on the right */
.info{position:sticky;top:28px;align-self:start;text-align:right}
.gallery img{width:100%;height:auto;margin-bottom:18px}
.info h1{font-size:28px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.info .price{font-size:18px;color:#000}
.variant{display:block;width:fit-content;margin:18px 0 0 auto;padding:10px 14px;min-width:220px;border:1px solid #000;background:#fff;font:14px Archivo,sans-serif;text-align:left}
.variantpick{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin:18px 0 0}
.vlabel{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#8b8b8b}
.vlabel select{width:fit-content;min-width:220px;padding:10px 14px;border:1px solid #000;background:#fff;font:14px Archivo,sans-serif;text-align:left;color:#1a1a1a}
.buy{margin:16px 0;padding:13px 40px;background:#000;color:#fff;border:0;cursor:pointer;font-family:Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:12px}
.buy:disabled{background:#b5b5b5;cursor:default}
.desc{margin-top:18px;color:#444}
.stock{color:#909090;font-size:13px;margin-top:2px}
.lowstock{color:#e0532d;font-size:13px;letter-spacing:.5px;margin-top:8px;font-weight:600}
.lowstock[hidden]{display:none}
.notify{margin-top:18px;max-width:320px;margin-left:auto}
.notify-lead{font-size:13px;color:#555;margin-bottom:8px}
.notify input{width:100%;padding:11px 12px;border:1px solid #ccc;font:14px Archivo,sans-serif;outline:0;margin-bottom:8px}
.notify input:focus{border-color:#000}
.notify button{width:100%;padding:12px;background:#000;color:#fff;border:0;cursor:pointer;font:600 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase}
.notify-msg{display:block;font-size:12px;color:#2a7a4b;margin-top:8px}
.related{width:100vw;position:relative;left:50%;right:50%;margin:70px -50vw 0;padding:0 var(--gutter)}
.related h2{font-size:15px;letter-spacing:2px;text-transform:uppercase;text-align:center;font-weight:600;margin-bottom:30px}
.related .grid{grid-template-columns:repeat(4,1fr);width:auto;position:static;margin:0;padding:0}
@media(max-width:760px){.related .grid{grid-template-columns:repeat(2,1fr)}}
.note{color:#909090}
.prose{max-width:760px}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:44px;margin-top:34px;max-width:900px}
.contact h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;font-weight:400}
.contact p{margin-bottom:15px;color:#666;line-height:1.7}
.contact a{color:#000;text-decoration:none;border-bottom:1px solid #ddd}
.contact a:hover{border-color:#000}
.prose p{margin:0 0 14px}
.prose h2,.prose h3{margin:26px 0 10px}
/* a heading whose level moved so it follows the page's h1 (follow_headings)
   keeps the size and the spacing it had at the level it was written at, so the
   page reads correctly to a screen reader and looks exactly as it did. These
   rules are written from _H_LOOK, the one table that says what each level is */
.prose .lvl3{font-size:1.17em;margin:26px 0 10px}
.prose .lvl4{font-size:1em;margin:0}
.prose .lvl5{font-size:.83em;margin:0}
.prose .lvl6{font-size:.67em;margin:0}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose a{color:#000}
/* the home page's own words, in the container under the tiles */
.homeintro{max-width:760px;margin:44px auto 0;text-align:center}
.homeintro h1{font-size:15px;line-height:25px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:10px}
/* 404.html, the page Apache shows for an address the site does not have */
.notfound{text-align:center;padding:6px 0 30px}
.notfound p{margin-top:10px}
.notfound a{color:#000}
footer{border-top:1px solid #eaeaea;margin-top:60px;padding:48px var(--gutter) 24px}
footer .cols{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:40px 80px}
footer .fineprint{margin-top:40px}
.newsletter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid #eaeaea}
.newsletter h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.newsletter .nltext p{color:#777;font-size:14px;max-width:420px}
.nlform{display:flex;align-items:center;gap:0;flex-wrap:wrap;position:relative}
.nlform input{width:min(300px,60vw);padding:13px 14px;border:1px solid #ccc;border-right:0;
  font:14px Archivo,sans-serif;outline:0;background:#fff}
.nlform input:focus{border-color:#000}
.nlform button{padding:13px 26px;background:#000;color:#fff;border:1px solid #000;cursor:pointer;
  font:600 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase}
.nlform button:hover{background:#222}
.nlmsg{position:absolute;top:100%;left:0;margin-top:7px;font-size:12px;color:#2a7a4b}
.nlmsg.err{color:#b23b3b}
.nlform.done input,.nlform.done button{opacity:.5}
@media(max-width:640px){.nlform input{width:100%;border-right:1px solid #ccc}.nlform button{width:100%;margin-top:8px}}
/* the footer's column titles are h2s: an h4 under a page's h1 skips two
   levels, and these sit under the page title on every page */
footer h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
footer a{display:block;color:#444;text-decoration:none;padding:3px 0;font-size:14px}
footer a:hover{color:#000}
footer p{color:#444;font-size:14px}
.social{margin-top:12px}
.payments{margin-top:16px;width:180px;height:auto}
.fineprint{text-align:center;color:#b5b5b5;font-size:12px;margin-top:40px}
/* fixed qty + price columns so the +/- controls and price numbers line
   up vertically across every row (auto columns drifted per row because
   €85.00 and €250.00 differ in width) */
.bagrow{display:grid;grid-template-columns:64px 1fr 108px 96px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid #eaeaea}
.bagrow img{width:64px;height:64px;object-fit:cover;background:#f5f5f5}
.bagname{font-size:15px;color:#000}
.bagqty{display:flex;gap:10px;align-items:center;justify-content:center}
.bagqty button{width:26px;height:26px;border:1px solid #ccc;background:#fff;cursor:pointer;font-size:14px}
.bagqty span{min-width:16px;text-align:center}
.bagprice{text-align:right;font-size:15px;color:#000}
/* total + checkout grouped and right-aligned so they line up with the
   price column instead of total-right / checkout-left diagonal */
.bagsummary{display:flex;flex-direction:column;align-items:flex-end;gap:14px;margin-top:22px}
.bagtotal{font-size:16px;letter-spacing:.5px}
.bagtotal span{color:#909090;font-weight:400;margin-right:6px}
.bagsummary .buy{margin:0}
.bagsummary .stock{margin:0}
@media(max-width:900px){
  :root{--gutter:20px}
  .headtop{padding:18px var(--gutter) 2px;text-align:left}
  main > h1{font-size:30px;line-height:1.3;letter-spacing:2px;padding:36px 0 8px}
  .subtabs{flex-wrap:wrap;gap:18px}
  .itemcount{display:none}
  .toolleft,.toolright{gap:16px}
  #filterpanel{min-width:min(280px,calc(100vw - 40px))}
  #sortlist{min-width:170px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .salebadge{font-size:10px;padding:6px 10px;letter-spacing:1.5px}
  .cardbuy{display:none}
  .product{grid-template-columns:1fr}
  .info{position:static;text-align:left}
  .info .variant{margin-left:0}
  .info .variantpick,.info .vlabel{align-items:flex-start}
  .bagrow{grid-template-columns:48px 1fr 78px 66px;gap:6px 10px}
  .bagqty{gap:6px}
  .bagqty button{width:24px;height:24px}
  .bagsummary{align-items:stretch}
  .bagsummary .bagtotal{text-align:right}
  .bagsummary .buy{width:100%;text-align:center}
  main{padding:20px var(--gutter)}
  footer .cols{grid-template-columns:1fr}
}

/* the site's own cookie notice (only built when data/mirrorball.json names a
   Google tag id). Fixed, so revealing it shifts nothing that is already drawn */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;
  border-top:1px solid #eaeaea;box-shadow:0 -8px 28px rgba(0,0,0,.07)}
.cookiebar[hidden]{display:none}
.cookieinner{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;
  padding:16px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookietext{font-size:13px;line-height:1.55;color:#808080;max-width:640px}
.cookietext a{color:#000}
.cookiebtns{display:flex;gap:10px}
/* both answers identical but for the word: same width, same border, same weight */
.cookiebtn{min-width:128px;padding:11px 18px;border:1px solid #000;background:#fff;
  color:#000;cursor:pointer;font:600 11px Archivo,sans-serif;letter-spacing:2px;
  text-transform:uppercase}
.cookiebtn:hover{background:#000;color:#fff}
.cookiebtn:focus-visible{outline:2px solid #000;outline-offset:2px}
/* the way back to the choice, drawn as the footer's other links are. Its box is
   there from the first paint and only its visibility waits for the script, so
   the footer does not grow and the fineprint under it does not move once the
   script runs. Invisible is not pressable and not read out, which is what a
   control nothing has bound yet has to be: a browser with no script has no
   notice to change either, and keeps an empty line where the control would be */
.cookieprefs{display:block;background:none;border:0;padding:3px 0;margin:0;
  font:300 14px/1.6 Archivo,-apple-system,sans-serif;color:#444;cursor:pointer;
  text-align:left;visibility:hidden}
.cookieprefs.cookieon{visibility:visible}
.cookieprefs:hover{color:#000}
@media(max-width:640px){
  .cookieinner{padding:14px var(--gutter);gap:14px}
  .cookiebtns{width:100%}
  .cookiebtn{flex:1;min-width:0}
}