/* Tema «Taulell de colmado» · Colmado Carpanta (Sarau Studio)
   Capa de marca sobre el nucli (app.css). Només retoca aspecte: res de funcionalitat.
   Granate i crema del seu segell, rajola blanca de la seva barra com a textura,
   Rammetto One (pes del «CARPANTA» del logo) per als titulars, Courier Prime
   (la màquina d'escriure de l'anell del segell) per a preus, números i comprovant,
   i DM Sans per al text. */

:root{
  /* blanc trencat del taulell i rajola en rombe, com la paret de la barra: només les juntes */
  --tile:#FEFDF7;--grout:#E2D3BE;
  --rombe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z' fill='none' stroke='%23DCCBB4' stroke-width='1.4'/%3E%3C/svg%3E");
  --rombe-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 0 30 15 15 30 0 15Z' fill='none' stroke='%23E2D3BE' stroke-width='1.1'/%3E%3C/svg%3E");
}
body::before{display:none}
body{background:var(--paper)}
body{font-size:16px}
:focus-visible{outline-color:var(--accent)}
.num,.pr,.card .pr,.row .pr,.tot b,.cartbar .info b,.tk-tot b,.lines .p,.ups .pp{font-family:var(--f-accent);font-weight:700;letter-spacing:-.01em}

/* titulars: el pes del rètol, en majúscules */
.hero h1,.cat-head h2,.card h3,.co h1,.panel-h h2,.sheet h2,.foot h2,.modal-in h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em}

/* capçalera: el segell sencer, sense repetir el nom */
.top{background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:2px solid var(--accent)}
.brand img{width:92px!important;height:46px!important;object-fit:contain}
.brand b,.brand em{display:none}
.brand small{font:700 11px/1.2 var(--f-accent);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tel,.lang{border-width:1.5px;border-color:var(--accent);border-radius:3px}
.tel{color:var(--accent)}
.lang button{border-radius:2px}
.lang button[aria-pressed=true]{background:var(--accent);color:var(--paper)}

/* portada sobre el taulell de rajola blanca */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;opacity:.75;background-image:var(--rombe);background-size:64px 64px;background-position:center top;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.kicker{font:700 12px/1.3 var(--f-accent);letter-spacing:.18em;color:var(--accent)}
.kicker::before{background:var(--accent)}
.hero h1{font-size:clamp(38px,10.4vw,96px);line-height:1.04;color:var(--ink)}
.hero h1 em{font:italic 400 clamp(30px,8.4vw,74px)/1.08 var(--f-accent);text-transform:none;color:var(--accent);letter-spacing:-.03em;margin:.08em 0 .12em}
@media (min-width:900px){.hero h1{font-size:clamp(56px,5.6vw,92px)}.hero h1 em{font-size:clamp(46px,4.6vw,74px)}}
.hero-txt{color:var(--ink-2)}
.steps{border:2px solid var(--accent);border-radius:4px;background:var(--paper)}
.steps li+li{border-left:2px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.steps i{font:700 30px/1 var(--f-accent);font-style:normal;color:var(--paper);background:var(--accent);border-radius:50%/42%;width:58px;height:42px;display:grid;place-items:center}
.steps b{font:400 19px/1.1 var(--f-display);text-transform:uppercase}
.hero-photo{margin:12px!important;border-radius:999px 999px 6px 6px;background:var(--kraft);box-shadow:0 0 0 2px var(--accent),0 0 0 10px var(--paper),0 0 0 12px var(--accent)}
.hero-photo img{border-radius:999px 999px 6px 6px}

/* el segell del colmado, picat sobre la foto */
.seal{width:184px!important;height:92px!important;right:-6px!important;top:auto!important;bottom:-26px;background:var(--paper)!important;border-radius:50%!important;
  transform:rotate(-9deg);box-shadow:0 10px 24px -14px rgba(43,23,20,.6);animation:stamp .7s cubic-bezier(.2,1.4,.4,1) .5s both}
.seal svg{display:none}
.seal>img{position:absolute!important;inset:8px 10px!important;width:calc(100% - 20px)!important;height:calc(100% - 16px)!important;border-radius:0!important;background:transparent!important;object-fit:contain}
@keyframes stamp{0%{opacity:0;transform:rotate(-9deg) scale(1.6)}60%{opacity:1}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@media (min-width:900px){.seal{width:230px!important;height:115px!important;right:-34px!important;bottom:40px}}

/* botons: granate amb text crema (contrast 8,9:1) */
.btn{border-radius:3px;letter-spacing:.08em;text-transform:uppercase;font-size:14px;font-weight:700}
.btn-red,.cartbar .btn,.add{background:var(--accent);color:var(--paper)}
.btn-red:hover,.cartbar .btn:hover,.add:hover{background:var(--ink);color:var(--paper)}
.add{border-radius:3px;font-weight:700;letter-spacing:.04em}
.add.ghost{background:transparent;color:var(--accent)}
.btn-line{border:2px solid var(--accent);color:var(--accent)}
.next .dot{background:#3E7B3A}

/* menú de categories */
.chips a{border-radius:3px;border-width:1.5px;font-weight:700}
.chips a[aria-current=true]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.cats a i{font-family:var(--f-accent);font-style:normal;font-weight:700}
.cats .bar{background:var(--accent);width:3px}
.cats .callbox{border:2px solid var(--accent);border-radius:4px;background:var(--tile)}
.cats .callbox a{font:700 22px var(--f-accent);color:var(--accent)}

/* capçalera de categoria: número dins d'un segell ovalat */
.cat-head{grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;padding:28px 0 16px}
.cat-head::before{height:2px;background:var(--accent)}
.cat-head .n{grid-row:span 2;display:grid;place-items:center;width:66px;height:46px;border-radius:50%;border:2px solid var(--accent);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--accent);
  color:var(--accent);font:700 19px/1 var(--f-accent);font-style:normal;transform:rotate(-6deg)}
.cat-head h2{font-size:clamp(26px,6.6vw,46px);line-height:1.08;color:var(--ink)}
.cat-head p{grid-column:2/4;font:italic 400 16px/1.35 var(--f-accent);color:var(--ink-2);margin-top:6px}
.cat-head .count{font-family:var(--f-accent);letter-spacing:.1em}

/* targetes: rajola blanca amb junta */
.card{border:1.5px solid var(--grout);border-radius:4px;background:var(--tile)}
.card:hover{box-shadow:0 8px 0 -2px var(--accent);transform:translateY(-3px)}
.card .ph{background-color:var(--tile);background-image:var(--rombe);background-size:64px 64px}
.card .tag{border:1.5px solid var(--accent);background:var(--paper);color:var(--accent);border-radius:3px;font:700 11px/1 var(--f-accent);letter-spacing:.06em;text-transform:uppercase}
.card .tag.sold{background:var(--accent);color:var(--paper)}
.card h3{font-size:24px;line-height:1.05}
.card .pr{font-size:24px;color:var(--accent)}
@media (min-width:560px){.card.wide h3{font-size:32px}}

/* files de carta */
.row{border-bottom:1.5px dotted color-mix(in srgb,var(--ink) 30%,transparent)}
.row h3{font-weight:700}
.row .th{border-radius:4px;background-color:var(--tile);background-image:var(--rombe-s);background-size:30px 30px}
.row .pr{color:var(--accent);font-size:18px}
.row .lab{font-family:var(--f-accent);font-weight:700;border-radius:3px}
.plus{background:var(--accent);color:var(--paper);border-radius:50%}
.qtybadge{background:var(--accent);color:var(--paper);font-family:var(--f-accent)}

/* cistella i fitxa */
.panel{border:2px solid var(--accent);border-radius:4px;background:var(--tile)}
.panel-h h2{font-size:22px}
.nudge{border:1.5px dashed var(--accent);border-radius:4px}
.cartbar{border-top:2px solid var(--accent)}

/* comprovant: paper d'embolicar del colmado, a màquina d'escriure */
.ticket{background-color:#fff;font-family:var(--f-accent);border-top:10px solid var(--accent);
  background-image:repeating-linear-gradient(90deg,transparent 0 22px,color-mix(in srgb,var(--accent) 6%,transparent) 22px 24px)}
.ticket .tk-h{border-bottom:2px dashed var(--accent)}
.ticket .tk-h img{width:104px!important;height:52px!important}
.ticket .tk-h b{font:400 18px/1.1 var(--f-display);text-transform:uppercase}
.tk-num b{font:700 84px/.85 var(--f-accent);color:var(--accent);letter-spacing:-.04em}
.tk-when{border-color:var(--accent)}
.tk-when b{font:400 26px/1.08 var(--f-display);text-transform:uppercase}
.tk-items{font-size:15px}
.tk-tot{border-top:2px solid var(--accent)}
.tk-tot b{font:700 34px/1 var(--f-accent);color:var(--accent)}

/* peu: el granate dels seus cartells */
.foot{background:var(--accent-ink);border-top:10px solid var(--accent)}
.foot h2{font-size:clamp(34px,10vw,52px)}
.foot h2 em{font:italic 400 26px/1.2 var(--f-accent);color:var(--kraft)}
.foot .big{font:700 30px/1 var(--f-accent);color:var(--paper)}
.foot .num{font-family:var(--f-text);font-weight:600;letter-spacing:0}
.foot li{border-bottom-color:rgba(255,255,255,.16)}

/* panell: el segell en crema sobre la barra fosca */
.bar .brand img{content:url(../img/logo-crema.svg);background:transparent!important;border-radius:0!important}
.bar .brand small{color:var(--kraft);opacity:1;font-family:var(--f-accent);font-weight:700}

/* confirmació: el comprovant cau i es clava al pinxo de la barra */
.printer{display:none}
.tk-wrap{position:relative}
.slot{overflow:visible;position:relative;margin-top:0;padding:72px 4px 54px}
/* vareta (darrere del paper) i peu */
.slot::before{content:"";position:absolute;left:calc(50% - 3px);top:18px;bottom:22px;width:6px;border-radius:3px 3px 0 0;z-index:0;
  background:linear-gradient(#1c1715 0 12px,transparent 12px),linear-gradient(90deg,#8d8d8d,#f2f2f2 45%,#9c9c9c 70%,#6f6f6f)}
.slot::after{content:"";position:absolute;left:calc(50% - 64px);bottom:8px;width:128px;height:30px;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse at 50% 30%,#4a4340,#1c1715 62%);box-shadow:0 8px 14px -6px rgba(43,23,20,.5)}
.ticket{z-index:1;transform-origin:50% 46px;animation:clavar 1.15s cubic-bezier(.3,.1,.3,1) both}
/* forat del pinxo */
.ticket::before{content:"";position:absolute;left:calc(50% - 7px);top:39px;width:14px;height:14px;border-radius:50%;z-index:3;
  background:radial-gradient(circle,#2b1714 0 38%,#d9cdbd 40% 55%,transparent 58%);opacity:0;animation:forat .01s linear .62s both}
/* la punta que travessa el paper, per davant */
.tk-wrap::after{content:"";position:absolute;left:calc(50% - 3px);top:44px;height:100px;width:6px;border-radius:3px 3px 0 0;z-index:4;pointer-events:none;
  background:linear-gradient(#1c1715 0 12px,transparent 12px),linear-gradient(90deg,#8d8d8d,#f2f2f2 45%,#9c9c9c 70%,#6f6f6f);
  clip-path:inset(0 0 100% 0);animation:punta 1.15s cubic-bezier(.3,.1,.3,1) both}
@keyframes clavar{
  0%{transform:translateY(-300px) rotate(-7deg);opacity:0}
  18%{opacity:1}
  54%{transform:translateY(-96px) rotate(-4deg)}
  78%{transform:translateY(5px) rotate(2.4deg)}
  90%{transform:translateY(-2px) rotate(1deg)}
  100%{transform:translateY(0) rotate(1.6deg)}}
@keyframes punta{0%,54%{clip-path:inset(0 0 100% 0)}78%,100%{clip-path:inset(0 0 0 0)}}
@keyframes forat{to{opacity:1}}
.stamp{animation-delay:1.1s!important}
@media (prefers-reduced-motion:reduce){.ticket,.tk-wrap::after,.ticket::before{animation-duration:.01s!important;animation-delay:0s!important}}