/* Tema «Súper súper» · La Seca (Poble-sec)
   Capa de marca sobre el nucli (app.css). Només retoca aspecte: res de funcionalitat.
   Crema de fons, blau del logo per a la tinta i els botons, vermell de l'oval per als accents.
   Gloock (serif de falca, com el logotip) en caixa baixa per als titulars, Schibsted Grotesk per al text
   i Barlow Condensed en majúscules per a les etiquetes, com la targeta de la botiga.
   Element propi: la quadrícula blava de la targeta i del tovalló de La Seca. */

:root{
  --red:#C8402E;--red-ink:#B23525;--blue:#1C4F96;
  --f-label:'Barlow Condensed','Arial Narrow',sans-serif;
  --grid:linear-gradient(color-mix(in srgb,var(--paper) 30%,transparent) 1px,transparent 1px) 0 0/22px 22px,
         linear-gradient(90deg,color-mix(in srgb,var(--paper) 30%,transparent) 1px,transparent 1px) 0 0/22px 22px;
}
body::before,.screen{background-image:none!important}
body{font-size:16px;color:var(--ink)}
::selection{background:var(--blue);color:var(--paper)}
:focus-visible{outline-color:var(--red)}

/* titulars: Gloock en caixa baixa, sense cursives falses */
.brand b,.hero h1,.steps b,.cat-head h2,.card h3,.panel-h h2,.sheet h2,.grp h3,.co h1,.tk-when b,
.foot h2,.modal-in h2,.stamp{font-family:var(--f-display);text-transform:none;letter-spacing:-.005em;font-weight:400}
.hero h1 em,.co h1 em,.cat-head p,.empty b,.tgrp h3{font-family:var(--f-display)!important;font-style:normal!important}

/* etiquetes com la targeta: condensada, majúscules, espaiat */
.kicker,.brand small,.cats h2,.cat-head .count,.panel-h small,.tot span,.prog,.blk>h2,.day small,.tk-num small,.tk-when small,
.tk-tot span,.foot h3,.card .tag,.hero-photo figcaption,.row .lab,.day em,.pill{font-family:var(--f-label);font-weight:600;letter-spacing:.12em}
.kicker{color:var(--red-ink);font-size:14px}
.kicker::before{background:var(--red)!important}

/* capçalera */
.top{background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom-color:color-mix(in srgb,var(--blue) 18%,transparent)}
.brand img{width:62px;height:auto;border-radius:0!important;background:transparent!important}
.brand b{font-size:22px;color:var(--blue)}
.brand em{display:none}
.brand small{color:var(--red-ink)}
.tel,.lang{border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.lang button[aria-pressed=true],.lang a[aria-current=true]{background:var(--blue);color:var(--paper)}

/* portada */
.hero h1{font-size:clamp(50px,14vw,120px);line-height:.92;letter-spacing:-.02em;color:var(--ink)}
.hero h1 em{display:block;color:var(--red);font-size:.86em;line-height:1;margin:.06em 0 .1em;letter-spacing:-.02em}
@media (min-width:900px){.hero h1{font-size:clamp(72px,7.4vw,112px)}}
.steps{border:1.5px solid var(--blue);border-radius:14px;background:var(--paper)}
.steps li+li{border-left:1.5px dashed color-mix(in srgb,var(--blue) 40%,transparent)}
.steps i{font-family:var(--f-display);font-style:normal;color:var(--red)}
.steps b{font-size:24px;color:var(--blue)}
.hero-photo{background:var(--grid),var(--blue);border-radius:20px;box-shadow:12px 12px 0 0 var(--blue)}
.hero-photo img{border-radius:12px}
.hero-photo figcaption{background:var(--paper);color:var(--blue);left:22px;bottom:22px;font-size:13px}
.seal{background:var(--red)!important;color:var(--paper)}
.seal text{fill:var(--paper);font-family:var(--f-label);font-weight:600;font-size:14px;letter-spacing:.16em}
.seal>img{inset:22px 14px!important;width:auto!important;height:auto!important;max-width:calc(100% - 28px);border-radius:0!important;background:transparent!important}

/* botons: blau amb text crema (7,2:1), vermell al passar-hi */
.btn{border-radius:999px;font-weight:650;letter-spacing:.01em}
.btn-red,.cartbar .btn,.add{background:var(--blue);color:var(--paper)}
.btn-red:hover,.cartbar .btn:hover,.add:hover{background:var(--red);color:var(--paper)}
.btn-line{border:1.5px solid var(--blue);color:var(--blue)}
.btn-line:hover{background:var(--blue);color:var(--paper)}

/* menú de categories */
.chips a{border:1.5px solid color-mix(in srgb,var(--blue) 30%,transparent);color:var(--blue);font-weight:600}
.chips a[aria-current=true]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.cats a i{font-family:var(--f-display);font-style:normal;color:var(--red)}
.cats .bar{background:var(--red)}
.cats .callbox{background:var(--grid),var(--blue);color:var(--paper);border-radius:14px}
.cats .callbox a{color:var(--paper);font-family:var(--f-display);font-size:26px}

/* capçalera de categoria: número vermell, títol en caixa baixa i línia de quadrícula */
.cat-head{padding:30px 0 18px}
.cat-head::before{height:10px;background:linear-gradient(90deg,var(--blue) 1px,transparent 1px) 0 0/22px 100%,linear-gradient(var(--blue),var(--blue)) 0 0/100% 1px no-repeat;opacity:.35}
.cat-head .n{font-family:var(--f-display);font-style:normal;color:var(--red)}
.cat-head h2{font-size:clamp(32px,8.4vw,64px);line-height:.96;letter-spacing:-.02em;color:var(--ink)}
.cat-head p{font-size:17px;color:var(--ink-2)}
.cat-head .count{color:var(--red-ink)}

/* targetes */
.card{border:1.5px solid color-mix(in srgb,var(--blue) 22%,transparent);border-radius:16px;background:color-mix(in srgb,var(--paper) 70%,#fff)}
.card:hover{box-shadow:0 10px 0 -4px var(--blue);transform:translateY(-3px)}
.card .tag{background:var(--paper);color:var(--blue);border:0;font-size:12px}
.card h3{font-size:32px;line-height:1;color:var(--ink)}
.card .pr{font-family:var(--f-display);font-size:30px;color:var(--blue)}

/* files de carta */
.row{border-bottom-color:color-mix(in srgb,var(--blue) 14%,transparent)}
.row .th{border-radius:10px}
.row h3{font-weight:650}
.row .pr{color:var(--blue)}
.row .lab{color:var(--red-ink)}
.plus{border:1.5px solid var(--blue);color:var(--blue)}
.row:hover .plus{background:var(--blue);color:var(--paper)}
.plus.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.qtybadge{background:var(--red);color:var(--paper)}

/* cistella i barra inferior: la targeta blava amb quadrícula */
.panel{border:1.5px solid var(--blue);border-radius:16px}
.panel-h h2{font-size:30px;color:var(--blue)}
.tot b{font-family:var(--f-display);font-size:36px;color:var(--blue)}
.nudge{border-radius:12px;border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.empty b{color:var(--blue)}
.cartbar{background:var(--grid),var(--blue);color:var(--paper);border-radius:999px}
.cartbar .info b{font-family:var(--f-display);font-size:22px;color:var(--paper)}
.cartbar .btn{background:var(--paper);color:var(--blue)}
.cartbar .btn:hover{background:var(--red);color:var(--paper)}

/* fitxa de producte */
.sheet-in{border-radius:20px 20px 0 0}
@media (min-width:760px){.sheet-in{border-radius:20px}}
.sheet h2{font-size:38px;line-height:1;color:var(--ink)}
.sheet .meta .pr{font-family:var(--f-display);font-size:30px;color:var(--blue)}
.grp h3{font-size:22px;color:var(--blue)}
.seg span{border:1.5px solid color-mix(in srgb,var(--blue) 30%,transparent);font-weight:600}
.seg input:checked+span{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.ups .t{border-radius:8px}

/* pas 2 i comprovant */
.prog .cur i{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.co h1{font-size:clamp(40px,9vw,76px);line-height:.96;color:var(--ink)}
.co h1 em{color:var(--red)}
.day b{font-family:var(--f-display);font-size:30px}
.tk-h{background:var(--grid),var(--blue);color:var(--paper)}
.tk-h small{color:color-mix(in srgb,var(--paper) 80%,transparent)!important}
.tk-h img{background:var(--paper);border-radius:50%;padding:4px 2px;object-fit:contain}
.tk-num b{font-family:var(--f-display);color:var(--red)}
.tk-when b{font-size:32px;color:var(--blue)}
.stamp{border-color:var(--red);color:var(--red);border-radius:50%;padding:10px 16px 6px}

/* peu */
.foot{background:var(--grid),var(--blue)}
.foot h2{color:var(--paper)}

/* panell: la capçalera és fosca */
body:has(#pn) .brand b{color:var(--paper)}
body:has(#pn) .brand small{color:color-mix(in srgb,var(--paper) 72%,transparent)}
body:has(#pn) .brand img{width:52px}