/* ROOOLLS shop layer: brand type + palette on top of the drop-preview design. */
@font-face{font-family:'Archivo Condensed';font-weight:900;font-style:normal;font-display:swap;src:url(/assets/fonts/ArchivoCondensed-Black.ttf) format('truetype')}
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;src:url(/assets/fonts/Archivo.ttf) format('truetype')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/InstrumentSerif-Regular.ttf) format('truetype')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/InstrumentSerif-Italic.ttf) format('truetype')}
:root{--red:#DC2628;--paper:#FCF6EC;--ink:#24120A;--chocolate:#24120A;--butter:#F5CE76;--blue:#A9DCFF}
/* Display = Archivo Condensed Black. Instrument Serif is the accent (the <em> lines). */
h1,h2,.reference-home .hero h1,.reference-home h2{font-family:'Archivo Condensed','Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
h1 em,h2 em,.reference-home .hero h1 em,.reference-home h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em}
.reference-home{--paper:#FCF6EC;--chocolate:#24120A}
.test-bar{background:var(--butter);color:var(--ink);font-size:12px;font-weight:600;text-align:center;padding:7px 18px;letter-spacing:.04em}
.drop-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.drop-form .hp{position:absolute;left:-9999px}
.drop-form input[type=text],.drop-form input[type=email]{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.drop-form .wl-submit{width:100%;margin:6px 0 14px}
.shop{padding:48px var(--gutter) 90px;max-width:1180px;margin:0 auto}
.shop h1{font-size:clamp(52px,8vw,104px);color:var(--red);margin:14px 0 22px}
.shop-grid{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:900px){.shop-grid{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
.shop-info{background:var(--red);color:#fff;padding:26px}
.shop-info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px}
.shop-info dt{font-size:11px;letter-spacing:.13em;font-weight:600;text-transform:uppercase;padding-top:3px}
.shop-info dd{margin:0}
.shop-info .left{margin-top:20px;padding-top:16px;border-top:1px solid #ffffff55;font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:30px;text-transform:uppercase;line-height:1}
.shop-form fieldset{border:0;padding:0;margin:0 0 26px}
.shop-form legend{font-size:11px;letter-spacing:.13em;font-weight:600;text-transform:uppercase;margin-bottom:12px;padding:0}
.fmt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--sand)}
.fmt b{display:block;font-size:18px}.fmt small{font-size:14px;opacity:.75}
.stepper{display:flex;align-items:center;border:1px solid var(--ink)}
.stepper button{width:48px;height:48px;background:none;border:0;font-size:22px;color:var(--ink)}
.stepper button:disabled{opacity:.3}
.stepper output{min-width:34px;text-align:center;font-weight:700}
.shop-form label.field{display:block;font-size:13px;font-weight:600;margin-bottom:12px}
.shop-form label.field input{display:block;width:100%;min-height:52px;margin-top:6px;padding:12px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.pay{display:grid;gap:10px}
.pay label{display:flex;gap:12px;align-items:center;border:1px solid var(--ink);padding:14px;min-height:56px;background:#fff;cursor:pointer}
.pay label:has(input:checked){outline:3px solid var(--red);outline-offset:-3px}
.pay small{display:block;opacity:.7;font-size:13px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin-bottom:18px}
.check input{width:22px;height:22px;flex-shrink:0;margin-top:2px;accent-color:var(--red)}
.total{display:flex;justify-content:space-between;align-items:baseline;font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:34px;text-transform:uppercase;margin:6px 0 16px}
.shop-form .button{width:100%;justify-content:center;font-size:17px;min-height:60px}
.shop-form .button:disabled{opacity:.45;transform:none;cursor:not-allowed}
.shop-msg{font-weight:600;margin:14px 0;min-height:1.5em}
.shop-msg.err{color:var(--red)}
.shop-closed{background:var(--cream);padding:28px;border:1px solid var(--sand)}
.shop-closed .button{margin-top:18px}
.order{padding:60px var(--gutter) 90px;max-width:760px;min-height:65vh}
.order h1{font-size:clamp(48px,8vw,88px);color:var(--red);margin:14px 0 24px}
.order dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:26px 0;padding:24px;background:var(--cream);border:1px solid var(--sand)}
.order dt{font-size:11px;letter-spacing:.13em;font-weight:600;text-transform:uppercase;padding-top:4px}.order dd{margin:0;font-weight:600}
.order .ref{font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em}
.allergens table{border-collapse:collapse;width:100%;margin:24px 0;font-size:15px}
.allergens th,.allergens td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand)}
.allergens th{font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.allergens .tbc{color:var(--red);font-weight:600}
.notice{border-left:6px solid var(--butter);background:#fff;padding:16px 18px;margin:20px 0;max-width:none}
.policy p,.order p{max-width:62ch}
.policy h2{margin:38px 0 14px;font-size:clamp(34px,5vw,52px)}
.order .ref{white-space:nowrap;font-size:15px}
.allergens .st-c{font-weight:700;color:var(--red)}.allergens .st-t{font-weight:700}.allergens .st-n{opacity:.65}
/* Payment step (SumUp card form inside the page) */
.pay-panel{background:#fff;border:1px solid var(--ink);padding:22px}
.pay-panel #sumup-card{min-height:260px}
.pay-secure{font-size:13px;opacity:.75;margin-top:14px;max-width:none}
.pay-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;margin-top:14px;max-width:none}
[data-sumup-id="widget__container"]{font-family:'Archivo',Arial,sans-serif;color:var(--ink);padding:0;border:0;box-shadow:none;max-width:none}
[data-sumup-id="submit_button"]{background:var(--red)!important;border-color:var(--red)!important;border-radius:0!important;min-height:56px;font-weight:700}
.pay-wallets{margin-bottom:18px;text-align:center}
.pay-wallets .wallet{width:100%;justify-content:center;background:#000;border-color:#000;font-size:16px;min-height:56px}
.pay-wallets .wallet:hover{background:#222;border-color:#222}
.pay-wallets small{display:block;margin-top:8px;font-size:13px;opacity:.7}
.pay-or{max-width:none;margin:18px 0 0;font-size:11px;letter-spacing:.13em;font-weight:600;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.pay-or::before,.pay-or::after{content:"";flex:1;border-top:1px solid var(--sand)}
/* iPhone: keep symbols as plain text (not emoji) and stop Safari colouring buttons blue */
body{font-variant-emoji:text}
.menu-button,.stepper button,.language-switch button{color:var(--ink);-webkit-appearance:none;appearance:none}
.button,.button span,.spark,.hero-stamp span{font-variant-emoji:text}
/* ---- One-page reserve layout (15 Nov 2026) ---- */
.shop-photo{position:relative;margin:0;background:var(--cream)}
.shop-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.shop-photo figcaption{position:absolute;left:16px;bottom:14px;background:var(--red);color:#fff;padding:7px 12px;font-size:11px;letter-spacing:.13em;font-weight:600}
@media(max-width:899px){.shop-photo img{aspect-ratio:4/3}}
@media(min-width:900px){.shop-photo{position:sticky;top:24px}}
.shop-form .steps-edit{border:0;padding:0;margin:0;min-width:0}
.shop-form .steps-edit:disabled{opacity:.55}
.step{padding:22px 0;border-top:1px solid var(--ink)}
.shop-form .steps-edit .step:first-child{border-top:0;padding-top:0}
.shop .step-t{display:flex;align-items:center;gap:12px;font-size:26px;line-height:1;margin:0 0 14px;color:var(--ink);letter-spacing:0}
.step-t span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-size:16px;flex-shrink:0}
.prod-desc{margin:0 0 16px;max-width:none}
.prod-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.prod-price{font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:38px;line-height:1;color:var(--red);margin:0}
.prod-price small{font-family:'Archivo',sans-serif;font-weight:500;font-size:14px;color:var(--ink);opacity:.75}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.day{position:relative;cursor:pointer}
.day input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.day>span{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ink);background:#fff;padding:12px 12px 10px;min-height:92px}
.day b{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.day strong{font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:26px;line-height:1.05;text-transform:uppercase}
.day small{font-size:12px;opacity:.75}
.day input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.day input:checked+span small{opacity:1}
.day input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.steps-edit:not(:disabled) .day input:disabled+span{opacity:.4;text-decoration:line-through}
.step-note{font-size:14px;opacity:.8;margin:14px 0 0;max-width:none}
.step .check{margin:6px 0 0}
.step .total{margin:0 0 14px}
.pay-box{margin-top:4px;background:#fff;border:1px solid var(--ink);padding:18px}
.pay-box #sumup-card{min-height:240px}
.linklike{background:none;border:0;padding:8px 0;margin-top:8px;font:inherit;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.shop-form [hidden]{display:none!important}
/* ---- Staff page (/equipo/) ---- */
.staff{padding:28px var(--gutter) 80px;max-width:720px;margin:0 auto;min-height:70vh}
.staff h1{font-size:44px;color:var(--red);margin:0}
.staff-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.staff-login{display:grid;gap:14px;max-width:420px}
.staff-login input,.staff input[type=search]{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;font:inherit;font-size:17px}
.staff-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.staff-chip{flex:0 0 auto;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:10px 12px;font:600 13px/1 'Archivo',sans-serif;min-height:44px}
.staff-chip.on{background:var(--ink);color:#fff}
.staff-sum{margin:6px 0 12px;max-width:none;text-transform:none}
.staff-sum b{display:inline-block}.staff-sum b::first-letter,.staff-day::first-letter{text-transform:uppercase}
.staff-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.staff-card{background:#fff;border:1px solid var(--ink);padding:14px 16px;display:grid;gap:8px}
.staff-card.is-done{background:transparent;border-color:var(--sand);opacity:.7}
.staff-who{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.staff-who b{font-size:20px}
.staff-qty{font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:24px;color:var(--red);white-space:nowrap}
.staff-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;opacity:.8}
.staff-meta .ref{font-family:ui-monospace,Menlo,monospace}
.staff-day{display:inline-block}
.staff-card .collect{width:100%;justify-content:center;min-height:54px;font-size:16px}
.staff-done{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#2f6b2f}
.staff-note{max-width:none;margin:14px 0}
.staff-modal{position:fixed;inset:0;background:rgba(36,18,10,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.staff-modal-card{background:var(--paper);border:2px solid var(--ink);padding:22px;max-width:420px;width:100%}
.staff-modal-card h2{font-size:30px;color:var(--ink);margin:0 0 10px}
.staff-modal-card p{max-width:none;margin:0 0 18px}
.staff-modal-card.danger{background:var(--red);border-color:var(--red);color:#fff}
.staff-modal-card.danger h2{color:#fff}
.staff-modal-card.danger .button{background:#fff;color:var(--red);border-color:#fff}
.staff-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.staff-modal-actions .button{min-width:120px;justify-content:center}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
/* ---- Polish pass (15 Nov 2026): press feedback, inline validation ---- */
.button,.stepper button,.day>span,.staff-chip,.menu-button,.linklike{transition:transform .1s ease-out,background .2s,opacity .2s}
.button:active{transform:scale(.97)}
.stepper button:active{transform:scale(.88)}
.day input:active+span{transform:scale(.96)}
.staff-chip:active,.menu-button:active{transform:scale(.92)}
@media(hover:none){.button:hover{transform:none}.button:active{transform:scale(.97)}}
.field.bad input{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.field-err{display:block;color:var(--red);font-size:13px;font-weight:600;margin-top:5px;min-height:0}
/* ---- Logo 03 ---- */
.header .wordmark{display:block;width:100%;height:auto}
.footer-top .logo img{display:block;width:100%;height:auto}
/* ---- Phone menu: brand type on a glass panel (liquid-glass test) ---- */
.header{position:relative;z-index:30}
.mobile-nav{position:absolute;left:10px;right:10px;z-index:29;margin-top:8px;padding:10px 20px 20px;border-radius:26px;
  background:linear-gradient(180deg,rgba(252,246,236,.80),rgba(252,246,236,.62));
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(36,18,10,.06),0 24px 60px -18px rgba(36,18,10,.45),0 2px 8px rgba(36,18,10,.10);
  transform-origin:top right;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.9,.25,1),visibility 0s}
.mobile-nav[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(-10px) scale(.96);pointer-events:none;transition:opacity .16s ease,transform .2s ease,visibility 0s .2s}
.mobile-nav .mn-link{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid rgba(36,18,10,.14);text-decoration:none;
  font-family:'Archivo Condensed','Archivo',sans-serif;font-weight:900;font-size:34px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
.mobile-nav .mn-link span{font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.13em;color:var(--red);min-width:20px}
.mobile-nav .mn-link:active{color:var(--red)}
.mobile-nav .mn-cta{display:flex;width:100%;margin-top:18px;min-height:56px;font-size:16px;padding:14px 20px}
.mobile-nav .mn-foot{margin:16px 0 0;font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.04em;max-width:none;color:var(--ink)}
.mobile-nav .mn-social{display:flex;gap:18px;margin:10px 0 0;max-width:none}
.mobile-nav .mn-social a{display:inline;padding:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:22px;color:var(--red);text-decoration:none}
/* Menu button: two lines that cross into an X */
.menu-button{position:relative;font-size:0!important;width:44px;height:44px;color:var(--ink)}
.menu-button::before,.menu-button::after{content:"";position:absolute;left:11px;right:11px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .25s cubic-bezier(.2,.9,.25,1)}
.menu-button::before{top:17px}.menu-button::after{top:25px}
.menu-button[aria-expanded=true]::before{transform:translateY(4px) rotate(45deg)}
.menu-button[aria-expanded=true]::after{transform:translateY(-4px) rotate(-45deg)}
@media(prefers-reduced-transparency:reduce){.mobile-nav{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.mobile-nav{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid var(--ink)}}
/* ---- Shop page: liquid-glass test (15 Nov 2026) ----
   A soft, blurred Babaroll photo sits behind the order steps so the glass has something warm to refract. */
.shop{position:relative;isolation:isolate;max-width:none;padding-left:0;padding-right:0}
.shop>*{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.shop::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/cinnamon-1200.webp?v=finished-images-20261013c) center 60%/cover no-repeat;filter:blur(48px) saturate(140%);transform:scale(1.15);opacity:.55}
.shop::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--paper) 0,rgba(252,246,236,.35) 260px,rgba(252,246,236,.25) 70%,var(--paper) 100%)}
.shop-photo{border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(36,18,10,.55)}
.shop-photo figcaption{border-radius:999px;left:14px;bottom:14px}
/* Each step is a glass card */
.shop-form .step{position:relative;border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:20px 20px 22px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(252,246,236,.42));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(36,18,10,.05),0 18px 40px -24px rgba(36,18,10,.4)}
.shop-form .steps-edit .step:first-child{border-top:1px solid rgba(255,255,255,.7);padding-top:20px}
/* Quantity: a glass pill with round buttons */
.prod-row .stepper{border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:4px;gap:2px;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px rgba(36,18,10,.45)}
.prod-row .stepper button{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 1px 2px rgba(36,18,10,.12)}
.prod-row .stepper button:not(:disabled):active{background:var(--red);color:#fff}
.prod-row .stepper output{min-width:42px;font-family:'Archivo Condensed',sans-serif;font-weight:900;font-size:26px}
/* Pickup days: glass tiles, the chosen one turns solid red and glows */
.day>span{border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -12px rgba(36,18,10,.4)}
.day input:checked+span{background:var(--red);border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px -12px rgba(220,38,40,.75)}
.shop-form .field input{border-radius:14px;border-color:rgba(36,18,10,.35);background:rgba(255,255,255,.8)}
.pay-box{border-radius:20px;border-color:rgba(36,18,10,.25);overflow:hidden}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .shop::before{display:none}
  .shop-form .step,.prod-row .stepper,.day>span{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;border-color:var(--ink)}
}
.shop{overflow:hidden}
.prod-price{white-space:nowrap}
@media(max-width:420px){.prod-row .stepper button{width:40px;height:40px}.prod-row .stepper output{min-width:34px;font-size:22px}.prod-price{font-size:32px}}
/* ---- Smooth pickup-day selection (15 Nov 2026) ----
   The red "chosen" state is a separate layer that only fades its opacity (cheap for the phone to animate);
   text, border and glow change on the same curve and timing, so nothing snaps. The glass itself never changes. */
.day>span{position:relative;isolation:isolate;transition:transform .32s cubic-bezier(.2,.9,.3,1),box-shadow .32s ease,border-color .32s ease}
.day>span::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--red);opacity:0;transform:scale(.92);
  transition:opacity .26s ease,transform .32s cubic-bezier(.2,.9,.3,1)}
.day>span b,.day>span strong,.day>span small{transition:color .26s ease,opacity .26s ease}
.day input:checked+span{background:rgba(255,255,255,.5);color:#fff;border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.day input:checked+span::before{opacity:1;transform:scale(1)}
.day input:active+span{transform:scale(.96);transition-duration:.12s}
.day input:checked:active+span{transform:translateY(-2px) scale(.97)}
@media(prefers-reduced-motion:reduce){.day>span,.day>span::before{transition:opacity .15s ease,color .15s ease!important;transform:none!important}}
/* ---- iPhone fix: no square flash when choosing a day (15 Nov 2026) ----
   1) Safari's grey tap highlight showed as a square over the hidden radio button.
   2) Safari briefly paints a moving/scaling glass (backdrop-filter) element as a square before rounding it.
   So: no tap highlight, the radio gets the tile's rounded corners, and the glass tile itself never moves.
   Press feedback and the red "chosen" state live on inner layers clipped to the rounded corners. */
.day,.day input,.day>span,.stepper button,.button,.menu-button,.mn-link{-webkit-tap-highlight-color:transparent}
.day input{border-radius:18px;-webkit-appearance:none;appearance:none}
.day>span,.day input:checked+span,.day input:active+span,.day input:checked:active+span{transform:none!important}
.day>span{overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease}
.day>span::before{inset:0}
.day>span::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(36,18,10,.08);opacity:0;transition:opacity .15s ease}
.day input:active+span::after{opacity:1;transition-duration:.05s}
.day input:checked+span::after{background:rgba(255,255,255,.12)}
.prod-row .stepper button:active{transform:none}
.prod-row .stepper button{transition:background .15s ease,color .15s ease}