/* ==========================================================================
   Cheap Funny Shirts — the short list.
   A one-page shop with a few shirts on it, for the time before the full shop
   opens. Same tokens as shop/assets/css/site.css so the two read as one
   brand; nothing here is loaded from the shop, so this folder can be moved
   to any path on the domain on its own.
   Rule observed throughout: no max-width on prose. Text fills its container.
   ========================================================================== */

:root{
  --ink:#151515;
  --paper:#faf9f5;
  --white:#fff;
  /* The brand pink, as drawn in the logo. Ink on it is 4.33:1, so text ON a
     pink fill is pure black (4.98:1). Small pink text on ink uses --electric-lift. */
  --electric:#ed008c;
  --electric-lift:#ff0b9b;
  --muted:#5f5e59;
  --line:#d9d9d0;
  --focus:#5b34d6;
  --display:Impact,Haettenschweiler,'Arial Narrow Bold','Arial Black',sans-serif;
  --body:Arial,Helvetica,sans-serif;
  --measure:1440px;
  --gutter:clamp(16px,4vw,48px);
  --shadow:6px 6px 0 var(--electric);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
html.bag-open,html.zoom-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
/* Author display rules beat the browser's own [hidden]; this puts it back. */
[hidden]{display:none!important}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border-radius:0}
button:disabled{cursor:not-allowed}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.wrap{width:min(var(--measure),calc(100% - (var(--gutter) * 2)));margin-inline:auto}
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.96}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:12px;z-index:100;background:var(--electric);color:#000;padding:12px;font-weight:800}
.skip:focus{top:12px}

/* --- chrome ------------------------------------------------------------- */
.bar{background:var(--electric);color:#000;font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;padding:9px 16px;text-align:center}
.header{border-bottom:1px solid var(--ink)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:46px;height:46px;flex:none}
.logo-type{display:inline-flex;flex-direction:column;font:900 24px/.9 var(--display);letter-spacing:-.03em;transform:rotate(-2deg)}
.logo-type span{background:var(--ink);color:var(--paper);font-size:15px;line-height:1.2;letter-spacing:.07em;margin-top:4px;padding:2px 5px;width:fit-content}
.header-actions{display:flex;align-items:center;gap:10px}
.ccy{appearance:none;-webkit-appearance:none;border:1px solid var(--ink);background:transparent;min-height:44px;padding:0 12px;font-size:.8rem;font-weight:800}
.bag-button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);min-height:44px;padding:0 15px;display:flex;gap:10px;align-items:center;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bag-button:hover{background:var(--electric);color:#000;border-color:var(--electric)}
.bag-count{background:var(--electric);color:#000;border-radius:50%;min-width:23px;height:23px;display:grid;place-items:center;font-size:.75rem;padding:0 5px}
.bag-button:hover .bag-count{background:var(--ink);color:var(--paper)}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}

/* --- buttons ------------------------------------------------------------ */
.button{border:2px solid var(--ink);background:var(--ink);color:#fff;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 24px;text-decoration:none;font-size:.87rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.button:hover{background:var(--electric);border-color:var(--electric);color:#000}
.button:disabled{background:#dedfd3;border-color:#dedfd3;color:#6d6d64}
.button .arrow{font-size:20px;line-height:1}
.text-link{background:none;border:0;padding:0;font-size:.87rem;font-weight:800;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.text-link:hover{color:var(--electric)}

/* --- pre-launch banner -------------------------------------------------- */
/* Edge to edge (Dom, 1 Nov 2026), straight under the header, closed off with
   the same 3px ink rule the cards use. On a laptop it fills the first screen;
   that is the point of it. The source is 1672px wide, so on screens wider than
   that it is scaled up a little. */
.promo{display:block;width:100%;background:var(--ink);border-bottom:3px solid var(--ink)}
/* height:auto, or the 941 in the height attribute wins and the banner stretches. */
.promo img{display:block;width:100%;height:auto}

/* --- hero --------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(36px,6vw,84px) 0}
.hero-copy{display:flex;flex-direction:column;gap:18px}
.hero-title{font-size:clamp(68px,10.5vw,158px);margin-top:6px}
.hl{display:inline-block;background:var(--electric);padding:0 .06em;margin-left:-.06em;transform:rotate(-1.5deg)}
.hero-lead{font-size:clamp(20px,2vw,27px);font-weight:800;line-height:1.25;margin-top:8px}
.hero-sub{font-size:1.02rem;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:8px}
/* Words only now: the title on the left, the pitch on the right, sitting on
   the title's baseline rather than floating in the middle of it. */
.hero{align-items:end}
.hero-side{display:flex;flex-direction:column;gap:18px;padding-bottom:clamp(4px,1vw,14px);max-width:560px}

/* --- coming next -------------------------------------------------------- */
/* A dark band, so it reads as a different thing from the shirts on sale
   above it: a look ahead, not something to buy. */
.next{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,112px) 0}
.next-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px)}
.next-head .eyebrow{color:var(--electric-lift);margin-bottom:14px}
/* 34px floor so "Same bad manners." stays on one line on a 390px phone: the
   highlight is one block, and wrapped it leaves half a line of empty pink. */
.next-title{font-size:clamp(34px,6.4vw,96px)}
.next .hl{color:#000}
.next-lead{flex:1 1 320px;max-width:46ch;color:#d8d6cd;font-size:1.02rem}
.next-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.next-card figure{margin:0;height:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:3px solid var(--paper);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.next-card:hover figure{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--electric)}
.next-media{position:relative;overflow:hidden;border-bottom:3px solid var(--ink)}
/* height:auto, or the 900 in the height attribute wins over aspect-ratio. */
.next-media img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .6s ease}
.next-card:hover .next-media img{transform:scale(1.05)}
/* A sticker, not a label: round, tilted, hard shadow. Black on the pink. */
.next-media.can-zoom{cursor:zoom-in}
/* Small tiles on a phone, and the whole photo opens it anyway: a smaller button. */
@media (max-width:640px){.next-media .card-zoom{width:36px;height:36px;right:8px;bottom:8px;box-shadow:2px 2px 0 var(--ink)}.next-media .card-zoom svg{width:18px;height:18px}}
.next-badge{position:absolute;top:12px;right:12px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--electric);color:#000;border:3px solid #000;box-shadow:3px 3px 0 #000;font:900 16px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;transform:rotate(12deg)}
.next-card figcaption{padding:13px 15px 16px;font-size:.9rem;line-height:1.35;color:var(--muted)}
.next-card figcaption b{display:block;margin-bottom:3px;font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.next-card:hover figure,.next-card:hover .next-media img{transform:none}}

/* --- strip -------------------------------------------------------------- */
.strip{background:var(--ink);color:var(--paper);overflow:hidden;padding:16px 0;font:900 clamp(18px,2.4vw,30px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.strip-track{display:flex;width:max-content;margin-inline:auto}
.strip-set{display:flex;align-items:center;gap:26px;padding:0 13px;margin:0;white-space:nowrap}
.strip i{font-style:normal;color:var(--electric-lift)}
.strip-copy,.strip-tail{display:none}
/* Too narrow for one line: run it as a ticker rather than wrap it. Each set
   ends in a star and the track moves exactly one set's width, so it loops. */
@media (max-width:1180px){
  .strip-track{margin-inline:0;animation:strip 24s linear infinite}
  .strip-copy{display:flex}
  .strip-tail{display:inline}
}
@keyframes strip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .strip{overflow-x:auto}
  .strip-track{animation:none}
  .strip-copy{display:none}
}

/* --- the shirts --------------------------------------------------------- */
.six{padding:clamp(48px,7vw,104px) 0 clamp(36px,5vw,64px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.section-title{font-size:clamp(52px,7vw,104px)}
.section-head p{flex:1 1 320px;color:var(--muted);font-size:1.02rem}
.grid-note{border:2px solid var(--ink);background:var(--white);padding:14px 18px;font-weight:700;margin-bottom:28px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}

.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(22px,2.6vw,38px)}
/* Five shirts on a six-column grid: three across, then the last two centred. */
.grid>.card{grid-column:span 2}
.grid>.card:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.card{display:flex;flex-direction:column;background:var(--white);border:3px solid var(--ink);box-shadow:var(--shadow);scroll-margin-top:24px}
.card[hidden]{display:none}
.card:target{outline:3px solid var(--electric);outline-offset:6px}
.card-media{position:relative;aspect-ratio:1;background:#f1f0ea;border-bottom:3px solid var(--ink);overflow:hidden}
/* A small gallery: the pictures stacked, one showing. Hover shows the next
   where there is a mouse; a tap moves on where there isn't. */
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.card-img.is-on{opacity:1}
.card-media.has-more{cursor:pointer}
/* Tapstitch's garment mock-up is a whole shirt on white with a small print in
   the middle. Cropped in towards the chest, the words are readable at card size. */
.card-img.is-garment{transform:scale(1.32);transform-origin:50% 36%}
.card-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:2px;z-index:1}
.card-dots button{width:26px;height:26px;padding:0;border:0;background:none;display:grid;place-items:center}
.card-dots button::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--ink);transition:background .2s,transform .2s}
.card-dots button[aria-current]::before{background:var(--electric);transform:scale(1.15)}
.card-body{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;flex:1}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.card-title{font-size:clamp(25px,2.1vw,31px);line-height:1}
.card-price{font-weight:800;font-size:1.05rem;white-space:nowrap;min-width:4ch;text-align:right}
.card-price:empty::before{content:"";display:inline-block;width:56px;height:14px;background:#ecebe4}
.card-says{font-weight:700;font-size:.92rem}
.card-blurb{color:var(--muted);font-size:.92rem}
.card-buy{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-top:6px}

.opt{border:0;margin:0;padding:0;min-width:0}
.opt legend{display:flex;justify-content:space-between;width:100%;padding:0;margin-bottom:8px;font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.opt legend em{font-style:normal;color:var(--muted);letter-spacing:.04em;text-transform:none;font-weight:700}
.chips{display:grid;gap:6px}
.chips.colour-chips{grid-template-columns:1fr 1fr}
.chips.colour-chips.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.colour-chips.n3 .chip span{gap:6px;padding:0 4px;font-size:.78rem;text-align:center;line-height:1.1}
.chips.size-chips{grid-template-columns:repeat(7,minmax(0,1fr))}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid var(--ink);font-size:.84rem;font-weight:800;background:var(--white);user-select:none}
.chip input:checked+span{background:var(--ink);color:var(--paper)}
.chip input:disabled+span{color:#9a9990;border-color:var(--line);text-decoration:line-through;cursor:not-allowed}
.chip input:not(:disabled):hover+span{border-color:var(--electric);box-shadow:inset 0 0 0 1px var(--electric)}
.swatch{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink);flex:none}
.swatch.black{background:#111}
.swatch.white{background:#fff}
/* Two-tone colourways: the shirt, then the print. */
.swatch.black-pink{background:linear-gradient(135deg,#111 50%,var(--electric) 50%)}
.swatch.white-pink{background:linear-gradient(135deg,#fff 50%,var(--electric) 50%)}
.chip input:checked+span .swatch.black,.chip input:checked+span .swatch.black-pink{border-color:var(--paper)}
.add{width:100%}
.card-msg{font-size:.86rem;font-weight:700;min-height:1.3em}
.card-msg.bad{color:#b0122e}

/* --- size guide --------------------------------------------------------- */
.sizes{padding:clamp(24px,4vw,48px) 0}
.size-card{border:3px solid var(--ink);box-shadow:var(--shadow);background:var(--white);scroll-margin-top:24px}
.size-head{background:var(--ink);padding:16px 20px}
.size-head h2{color:var(--electric);font-size:clamp(28px,3vw,38px)}
.size-intro{padding:18px 20px 0;color:var(--muted)}
.size-scroll{overflow-x:auto;padding:16px 20px 4px}
.size-table{width:100%;border-collapse:collapse;min-width:520px;font-size:.95rem}
.size-table th,.size-table td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:center}
.size-table thead th{font-family:var(--display);font-weight:900;font-size:1.15rem;border-bottom:2px solid var(--ink)}
.size-table tbody th{text-align:left;font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.size-table td{font-weight:800}
.size-table td span{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
.size-back{padding:14px 20px 20px}

/* --- facts -------------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,104px)}
.fact{border-top:3px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.fact h3{font-size:clamp(24px,2.2vw,30px)}
.fact p{color:var(--muted)}

/* --- footer ------------------------------------------------------------- */
.footer{background:var(--ink);color:var(--paper)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding:clamp(40px,5vw,64px) 0 32px}
.footer-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.logo-type-light{color:var(--paper)}
.logo-type-light span{background:var(--electric);color:#000}
.footer-brand p{color:#c9c8c0}
.footer a{text-decoration:none}
.footer-brand a,.footer-links a{text-decoration:underline;text-decoration-color:rgba(250,249,245,.35);text-underline-offset:5px}
.footer-brand a:hover,.footer-links a:hover{color:var(--electric-lift);text-decoration-color:currentColor}
.footer-links{display:flex;flex-direction:column;gap:2px}
.footer-links a{padding:8px 0;font-weight:700;font-size:.92rem}
.footer-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;border-top:1px solid #33332f;padding:12px 0 16px}
.footer-base small{font-size:.8rem;color:#a8a79f}
@media (min-width:561px){.footer-base{align-items:baseline}}

/* --- the bag ------------------------------------------------------------ */
.bag{padding:0;border:0;margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100%;max-height:100%;background:var(--paper);color:var(--ink);border-left:3px solid var(--ink)}
.bag::backdrop{background:rgba(21,21,21,.55)}
.bag-panel{display:flex;flex-direction:column;height:100%}
.bag-head{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);padding:14px 18px}
.bag-head h2{font-size:30px;color:var(--electric)}
.bag-close{background:none;border:1px solid var(--paper);color:var(--paper);width:44px;height:44px;font-size:26px;line-height:1}
.bag-close:hover{background:var(--electric);border-color:var(--electric);color:#000}
.bag-empty{padding:24px 18px;font-weight:700}
.bag-lines{flex:1;overflow-y:auto;padding:0 18px}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.line img{width:76px;height:76px;object-fit:cover;border:1px solid var(--ink);background:#fff}
.line-name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.12rem;line-height:1}
.line-opt{font-size:.84rem;color:var(--muted);margin-top:4px}
.line-price{font-weight:800;text-align:right;white-space:nowrap}
.line-tools{display:flex;align-items:center;gap:14px;margin-top:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.qty button{width:40px;height:40px;background:var(--white);border:0;font-size:18px;font-weight:800}
.qty button:hover{background:var(--electric)}
.qty output{min-width:30px;text-align:center;font-weight:800}
.line-remove{font-size:.8rem}
.bag-error{margin:12px 18px 0;padding:10px 12px;border:2px solid #b0122e;color:#b0122e;font-weight:700;font-size:.9rem}
.bag-foot{border-top:3px solid var(--ink);padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--white)}
.bag-sub{display:flex;justify-content:space-between;font-weight:800;font-size:1.1rem}
.bag-note{font-size:.84rem;color:var(--muted)}
.bag-checkout{width:100%}
.bag-keep{align-self:center;padding:8px}
.bag[aria-busy=true] .bag-lines,.bag[aria-busy=true] .bag-foot{opacity:.55;pointer-events:none}

/* --- the magnifier ------------------------------------------------------ */
/* Bottom right of every picture; opens it full screen to read the print. */
.card-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:44px;height:44px;padding:0;display:grid;place-items:center;background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:zoom-in;transition:background .2s,transform .2s,box-shadow .2s}
.card-zoom:hover{background:var(--electric);color:#000}
.card-zoom:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.zoom{padding:0;border:0;margin:0;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;background:var(--ink);color:var(--paper)}
.zoom[open]{display:flex;flex-direction:column}
.zoom::backdrop{background:rgba(21,21,21,.6)}
.zoom-head,.zoom-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter)}
.zoom-title{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);line-height:1}
.zoom-title span{color:var(--electric-lift)}
.zoom-close,.zoom-step{flex:none;background:none;border:1px solid var(--paper);color:var(--paper);width:44px;height:44px;padding:0;font-size:26px;line-height:1}
.zoom-step{font-size:22px}
.zoom-close:hover,.zoom-step:hover{background:var(--electric);border-color:var(--electric);color:#000}
.zoom:not(.has-more) .zoom-step,.zoom:not(.has-more) [data-zoom-count]{visibility:hidden}
.zoom-hint{margin:0;text-align:center;font-size:.86rem;color:#d4d3cb}
.zoom-hint b{display:block;color:var(--paper);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
/* The picture fits the screen; looking closer, it is shown nearer full size
   and the stage scrolls. Auto margins centre it without cutting off the left
   or top edge once it is bigger than the stage. */
.zoom-stage{flex:1;min-height:0;display:flex;overflow:hidden;padding:0 var(--gutter)}
.zoom-img{margin:auto;width:100%;height:100%;object-fit:contain;cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.zoom-stage.is-zoomed{overflow:auto;padding:0;overscroll-behavior:contain;scrollbar-width:none}
.zoom-stage.is-zoomed::-webkit-scrollbar{display:none}
.zoom-stage.is-zoomed .zoom-img{flex:none;height:auto;max-width:none;object-fit:fill;cursor:zoom-out}

/* --- asking about analytics --------------------------------------------- */
/* A bar along the bottom until answered. Both answers are the same size and
   colour: saying no has to be as easy as saying yes. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:var(--paper);border-top:3px solid var(--electric);padding:14px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.consent[hidden]{display:none}
.consent-text{margin:0;flex:1 1 420px;font-size:.92rem}
.consent-text b{font-family:var(--display);font-weight:900;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;color:var(--electric-lift);margin-right:4px}
.consent-text a{color:var(--paper)}
.consent-buttons{display:flex;gap:10px;flex:none}
.consent .button{min-height:46px;padding:10px 18px;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.consent .button:hover{background:var(--electric);border-color:var(--electric);color:#000}
@media (max-width:640px){.consent-buttons{width:100%}.consent .button{flex:1}}
.policy-consent{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:8px}
.policy-consent [data-consent-now]{font-weight:700}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid>.card:nth-child(4):nth-last-child(2){grid-column:span 2}
  .grid>.card:last-child:nth-child(odd){grid-column:2/span 2}
  .next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:22px}
  .facts{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .grid>.card,.grid>.card:nth-child(4):nth-last-child(2),.grid>.card:last-child:nth-child(odd){grid-column:auto}
  .header-row{min-height:72px}
  .logo-mark{width:40px;height:40px}
  .logo-type{font-size:20px}
  .logo-type span{font-size:12px}
  .bag-button{padding:0 12px}
  .bag-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .next-grid{gap:14px}
  .next-card figure{box-shadow:4px 4px 0 var(--electric)}
  .next-badge{width:48px;height:48px;font-size:13px;top:8px;right:8px}
  .next-card figcaption{padding:10px 11px 12px;font-size:.8rem}
  .next-card figcaption b{font-size:1.05rem}
}
@media (max-width:400px){
  .header .logo-type{display:none}
}

/* ================= "Built by CREATE" — the canonical CREATE credit =================
   Source: _brain/reference/create-footer-credit.md, values lifted from aibasics.uk (Oct 2026).
   Same inline mark, 23px, Barlow Condensed 800 1.28rem/.08em wordmark, baseline-aligned,
   mark + wordmark both in THE SITE'S OWN BRAND COLOUR (Dom, 7 Oct 2026) — set --credit-brand
   below. That colour is the ONLY thing that changes from site to site.
   Keep this block LAST in the stylesheet so no earlier footer link rule (a hover accent,
   a coarse-pointer min-height) can reach it. The `body` prefix lifts specificity over a
   typical `.footer a:hover` as a second guard — it is not a licence to put this earlier. */

/* Self-hosted wordmark font. Path is relative to THIS stylesheet — adjust if the font
   lives elsewhere. If the site already loads Barlow Condensed 800 from Google Fonts,
   delete this @font-face and add the family to that request instead. */
@font-face{
  font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/barlow-condensed-800-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;
}
:root{--credit-brand:#ed008c}   /* The logo pink. 4.33:1 on the #151515 footer — passes 3:1 for large display text. */
:root{--credit-muted:#66707D}   /* Dark footer. */

body .ftr-credit{
  display:inline-flex;align-items:baseline;gap:10px;
  margin:0;color:var(--credit-muted);font-size:.8rem;white-space:nowrap;
}
body .ftr-credit a{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 0;min-height:0;            /* 41px tap target; min-height would break the baseline */
  color:var(--credit-brand);text-decoration:none;
  transition:opacity .3s ease;
}
body .ftr-credit a:hover{color:var(--credit-brand);opacity:.72;text-decoration:none}
body .ftr-credit .create-mark{
  height:23px;width:auto;flex:none;
  color:var(--credit-brand);          /* paths are fill="currentColor" */
}
body .ftr-credit b{
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-weight:800;font-size:1.28rem;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--credit-brand);
}

/* --- policy pages (delivery/, returns/, terms/ …) ------------------------ */
.policy-back{min-height:44px;padding:10px 18px}
.policy{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px);max-width:820px}
.policy .eyebrow{color:var(--electric);margin-bottom:14px}
.policy h1{font-size:clamp(46px,7.4vw,96px)}
.policy-lead{margin-top:14px;font-size:1.12rem;font-weight:700}
.policy-lead span{display:block;margin-top:4px;font-size:.88rem;font-weight:400;color:var(--muted)}
.policy-body{margin-top:clamp(26px,3vw,40px)}
.policy-body h2{font:900 clamp(24px,2.6vw,32px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:clamp(30px,3.4vw,44px) 0 12px}
.policy-body p,.policy-body li{font-size:1.02rem;line-height:1.62}
.policy-body p+p{margin-top:12px}
.policy-body ul{list-style:disc;padding-left:1.25em;display:grid;gap:8px}
.policy-body a{text-decoration:underline;text-underline-offset:3px}
.policy-body a:hover{color:var(--electric)}
.policy-body table{width:100%;border-collapse:collapse;margin:14px 0 18px;background:var(--white);border:2px solid var(--ink);font-size:.95rem}
.policy-body th,.policy-body td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.policy-body thead th{background:var(--ink);color:var(--paper);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.policy-body tbody th{width:38%;font-weight:800}
.policy-body code{font-size:.86rem;word-break:break-all}
.tbc{color:var(--muted);font-style:italic}
.policy-more{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:2px solid var(--ink);font-weight:800;font-size:.9rem}
.policy-more a{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){
  .policy-back{padding:8px 12px;font-size:.78rem}
  .policy-body table{font-size:.88rem}
  .policy-body th,.policy-body td{padding:9px 10px}
}