/*
Theme Name: Cal Camilo
Theme URI: https://www.calcamilocastellar.cat
Author: Xavi
Description: Tema a mida per a la pizzeria: monocrom negre/blanc, tipografia de cartell (Anton + Archivo) i el cercle com a motiu — les pizzes sobre el taulell. Integrat amb el plugin pizzeria-core.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: calcamilo
*/

/* =========================================================
   TIPOGRAFIA — Archivo (variable, llicència OFL) allotjada al tema
   ========================================================= */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('fonts/archivo-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}

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Aproximats del web actual — ajusta amb els valors exactes
     de calcamilocastellar.cat (DevTools) si difereixen: */
  --ink:#111111;            /* text principal (negre) */
  --ink-dim:#6E6E6E;        /* text secundari */
  --paper:#FFFFFF;          /* fons blanc, com el web actual */
  --paper-2:#F5F4F2;        /* superfícies suaus (targetes, panells) */
  --line:rgba(17,17,17,.4); /* línia fina dels cercles */
  --line-soft:rgba(17,17,17,.12);
  --ember:#D3442A;          /* ÚNIC accent: estat del servei i avisos */

  --font-display:'Archivo', 'Helvetica Neue', sans-serif; /* grotesca ampla en caixa alta */
  --font-body:'Archivo', system-ui, sans-serif;
  --display-weight:800;

  --measure:64ch;
  --gap:clamp(16px, 3vw, 32px);
  --radius:14px;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
/* Sense zoom: el meta viewport ja ho demana, però iOS ignora user-scalable=no;
   touch-action treu el pinch-zoom i el doble toc, i deixa el desplaçament. */
html{-webkit-text-size-adjust:100%;touch-action:pan-x pan-y}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.75}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0 0 .4em;
}
h1{font-size:clamp(42px, 8vw, 96px)}
h2{font-size:clamp(28px, 4.5vw, 48px)}
h3{font-size:clamp(20px, 3vw, 28px)}
p{margin:0 0 1em;max-width:var(--measure)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}

.wrap{width:100%;padding-inline:clamp(16px, 4vw, 56px);margin-inline:auto}
section{padding-block:clamp(40px, 8vw, 96px)}

/* =========================================================
   CAPÇALERA / HEADER
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);
}
.site-head .site-logo img{width: 240px;}
.site-head .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.site-logo{font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.site-nav a{line-height:1}
.site-nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14px;text-transform:uppercase;letter-spacing:.1em}
/* Cistella = icona + globus amb el nombre de pizzes */
.head-cart{position:relative;display:flex;align-items:center;padding:2px}
.head-cart__icon{display:block}
.head-cart .count{
  position:absolute;top:-6px;right:-9px;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:0;line-height:1;
}
/* Estat del servei: l'únic lloc on viu el vermell */
.pizzeria-service-notice{
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:var(--radius);padding:12px 16px;
  margin:16px clamp(16px, 4vw, 56px);font-size:14px;
}
.pizzeria-service-notice strong{color:var(--ember)}

/* Cercador del header */
.site-head .pz-search{margin-left:auto}
.site-head .site-nav{margin-left:0}
@media (max-width:640px){
  .site-head .pz-search input[type="search"]{min-width:110px}
}

/* =========================================================
   HERO (portada)
   ========================================================= */
.hero{display:grid;gap:var(--gap);align-items:center;
  grid-template-columns:1.1fr .9fr;min-height:min(70vh, 640px)}
.hero .claim{font-size:18px;color:var(--ink-dim);max-width:44ch}
.hero-img{aspect-ratio:1;border-radius:50%;overflow:hidden;border:1.5px solid var(--line);
  justify-self:center;width:min(100%, 480px)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero-img{order:-1;width:min(70vw,340px)}}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;
  border:1.5px solid var(--ink);border-radius:999px;
  font-size:14px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;
  background:transparent;color:var(--ink);transition:background .15s,color .15s;
}
.btn:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--ink)}

/* =========================================================
   LA CARTA — graella de cercles (element signatura)
   ========================================================= */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:var(--gap);list-style:none;margin:0 auto;padding:0;
  max-width:1100px;
}
/* Anul·la el clearfix heretat de WooCommerce: en un grid, ::before/::after
   amb content compten com a elements reals i es mengen la primera cel·la
   (això causava el forat al primer slot de la graella). */
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{text-align:center;margin:0;width:auto;float:none}
.woocommerce ul.products li.product a:hover{opacity: 1;}
.woocommerce ul.products li.product a img{aspect-ratio:1;border-radius:50%;object-fit:cover;width:100%; margin:0 0 14px;transition:transform .2s ease;}
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:19px;text-transform:uppercase;
  letter-spacing:.03em;padding:0;margin:0 0 4px;color:var(--ink);
}
.woocommerce ul.products li.product .price{
  color:var(--ink-dim);font-size:14px;display:block;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{display:none} /* la compra passa a la fitxa */

/* =========================================================
   FITXA DE PRODUCTE (integració amb pizzeria-core)
   ========================================================= */
body.single-product div.product{
  display:grid;grid-template-columns:minmax(280px, 45%) 1fr;
  gap:var(--gap);align-items:start;
}
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .entry-summary{
  float:none !important;width:100% !important;margin:0;
}
body.single-product div.product .woocommerce-product-gallery{max-width:600px; margin: 0 auto;}
/* La imatge de la pizza és decorativa: sense lightbox/zoom ni l'opacity de hover dels enllaços */
body.single-product div.product .woocommerce-product-gallery a{
  pointer-events:none;cursor:default;
}
body.single-product div.product .woocommerce-product-gallery a:hover{opacity:1}
@media (max-width:820px){
  body.single-product div.product{grid-template-columns:1fr}
  body.single-product div.product .woocommerce-product-gallery{max-width:340px;margin-inline:auto}
}

.single-product .product_title{font-size:clamp(34px, 5vw, 60px)}
.pizzeria-ingredients ul{color:var(--ink-dim)}
.pizzeria-ingredients li{border-bottom-color:var(--line-soft)}
.pizzeria-allergen img{filter:none;border-radius:50%}
.pizzeria-allergen small{color:var(--ink-dim)}

/* Components del plugin en fosc */
.pz-btn{color:var(--ink); background-color: var(--paper-2);}
.pz-btn:has(input:checked),.pz-btn.is-active{background:var(--ink);color:var(--paper)}
.pz-btn:has(input:checked) *,.pz-btn.is-active *{mix-blend-mode:normal;filter:none;color:var(--paper); filter: none !important;}
.pz-chip{border-color:var(--line); background-color: var(--paper-2);}
.pz-chip:has(input:checked){border-color:var(--ink)}
.pz-combo{--pz-panel-bg:var(--paper-2)}
.pz-combo-field,.pz-supp-toggle,.pz-half-search{color:var(--ink);border-color:var(--line)}
.pz-combo-search{color:var(--ink)}
#pz-bar{background:#111;color:#fff;border-top:0}
#pz-bar #pz-bar-add{background:#fff;color:#111}

/* =========================================================
   FORMULARIS WOO (carretó, checkout) en fosc
   ========================================================= */
.woocommerce input.input-text, .woocommerce select, .woocommerce textarea,
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--paper-2);color:var(--ink);border:1.5px solid var(--line);
  border-radius:10px;padding:11px 13px;font-family:var(--font-body);
}
.woocommerce form .form-row label{color:var(--ink-dim);font-size:13px;
  text-transform:uppercase;letter-spacing:.08em}
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #place_order{
  background:var(--ink);color:var(--paper);border-radius:999px;
  text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:14px 26px;border:0;
}
.woocommerce table.shop_table{border:1px solid var(--line-soft);border-radius:var(--radius);
  border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{
  border-color:var(--line-soft);background:transparent}
.woocommerce-message,.woocommerce-info{background:var(--paper-2);color:var(--ink);}
.woocommerce-error{background:var(--paper-2);color:var(--ink);border-top-color:var(--ember)}

/* =========================================================
   PEU
   ========================================================= */
.site-foot{border-top:1px solid var(--line-soft);padding-block:44px 32px;margin-top:64px}
.site-foot .wrap{display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;color:var(--ink-dim);font-size:14px}
.site-foot .foot-logo img{width:170px}
.site-foot .foot-contact{display:flex;flex-direction:column;gap:4px;font-style:normal;line-height:1.5}
.site-foot .foot-phone{color:var(--ink);font-size:17px;font-weight:600;letter-spacing:.02em}
.site-foot .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.site-foot .foot-links a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.site-foot .foot-copy{margin:0;font-size:12px;opacity:.7}

/* =========================================================
   BANNER DE PORTADA (full-bleed, tipus app)
   ========================================================= */
.banner{position:relative;min-height:min(72vh, 620px);display:flex;align-items:flex-end;
  overflow:hidden;padding:0}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;
  /* degradat a baix: alt contrast per al títol i la frase sobre qualsevol foto */
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 62%)}
.banner .banner-inner{z-index:1}
.banner h1,.banner .claim,.banner .eyebrow{color:#fff}
.banner .btn{border-color:#fff;background:#fff;color:#111}
.banner .banner-inner{position:relative;padding:clamp(24px,5vw,64px);width:100%}
.banner h1{margin-bottom:.2em;font-size:clamp(42px, 7vw, 80px)}
/* Expressions que no poden partir-se en dues línies ("Cal Camilo", "Castellar del Vallès") */
.nw{white-space:nowrap}
/* Amb el nom sense poder partir-se, en pantalles molt estretes el títol baixa una mica
   perquè "CAL CAMILO" hi càpiga dins del marge. */
@media (max-width:360px){.banner h1{font-size:34px}}
/* Frase sota el títol: gran, en blanc i amb ombra suau sobre el degradat fosc */
.banner .banner-claim{max-width:34ch;margin:.5em 0 1.1em;
  color:#fff;font-size:clamp(20px,2.6vw,30px);font-weight:600;line-height:1.25;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* "Castellar del Vallès" una mica més petit que "Pizzes per emportar" i sense partir-se */
.banner h1 .sub{display:block;font-size:.66em;letter-spacing:.03em;margin-top:.12em}
/* sempre dins de l'ample de la pantalla (20 lletres sense partir-se) */
.banner h1 .sub{font-size:min(.66em, 6.2vw)}

/* =========================================================
   RELACIONADES (fitxa de producte)
   ========================================================= */
.related.products{
  /* WooCommerce l'imprimeix DINS de div.product (a woocommerce_after_single_product_summary),
     que és un grid de 2 columnes: sense això queda encaixat a la columna esquerra
     i el max-width/centrat de sota no té cap efecte visible. */
  grid-column:1 / -1;
  margin-top:clamp(32px,6vw,72px);
  max-width:900px;margin-inline:auto;text-align:center;
}
.related.products > h2{font-size:clamp(22px,3vw,32px)}
/* Carrusel natiu amb scroll-snap (sense Slick): cada posició de repòs queda
   alineada amb una pizza sencera, així mai surten imatges ni textos tallats
   a les vores. Es veuen 4 / 3 / 2 pizzes segons l'ample, i com que tallen
   exactament l'ample del carrusel, l'última posició arriba justa a l'extrem. */
.related.products{position:relative}
.woocommerce .related ul.products{
  display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  max-width:none;margin:0;padding-inline:0;
}
.related ul.products::-webkit-scrollbar{display:none}
.woocommerce .related ul.products[class*="columns-"] li.product{
  flex:0 0 25%;width:auto;float:none;margin:0;padding:0 10px;
  scroll-snap-align:start;
}
@media (max-width:1024px){.woocommerce .related ul.products[class*="columns-"] li.product{flex-basis:33.3333%}}
@media (max-width:700px){.woocommerce .related ul.products[class*="columns-"] li.product{flex-basis:50%}}
/* Fletxes (només amb ratolí/escriptori; al mòbil es llisca) */
.related .rel-arrow{position:absolute;top:38%;z-index:5;width:42px;height:42px;
  border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1;cursor:pointer}
.related .rel-prev{left:-6px}
.related .rel-next{right:-6px}
.related .rel-arrow.is-off{opacity:.3;pointer-events:none}
@media (max-width:700px){.related .rel-arrow{display:none}}

/* =========================================================
   TOCS APP
   ========================================================= */
.site-head .wrap{padding-block:12px}
@media (max-width:640px){
  .site-nav{gap:14px;font-size:12px}
  section{padding-block:28px}
}

/* =========================================================
   MÒBIL
   ========================================================= */
/* El logo no s'ha de poder encongir: amb max-width:100% a la imatge, dins
   d'un flex el seu mínim és 0 i desapareixia quan no hi cabia tot a la fila. */
.site-logo{flex:0 0 auto}
@media (max-width:640px){
  /* Capçalera en dues files: logo + menú a dalt, cercador a sota a tot l'ample */
  .site-head .wrap{flex-wrap:wrap;gap:10px 12px}
  .site-head .site-logo img{width:205px}
  .site-head .site-nav{margin-left:auto}
  .site-head .pz-search{order:3;flex:1 0 100%;margin-left:0}
  .site-head .pz-search input[type="search"]{width:100%;min-width:0}

  /* La carta: 2 pizzes per línia */
  .woocommerce ul.products{grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px 14px;
    padding-inline:clamp(16px, 4vw, 56px)}
  /* El CSS de WooCommerce per a pantalles petites fixa cada pizza a 48% d'ample i
     la fa flotar: dins del grid la deixava a mig cel·la. */
  .woocommerce ul.products[class*="columns-"] li.product{width:auto;float:none;margin:0;clear:none}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px}
  .woocommerce ul.products li.product .price{font-size:13px}
}
@media (max-width:360px){.site-head .site-logo img{width:165px}}

/* Fitxa de producte en mòbil/tauleta: sense marge lateral el contingut tocava la
   vora, i amb la columna "1fr" (mínim = contingut) la pàgina s'eixamplava més
   que la pantalla (imatge descentrada, botons de mida tallats). */
@media (max-width:820px){
  body.single-product div.product{
    grid-template-columns:minmax(0, 1fr);
    padding-inline:clamp(16px, 4vw, 56px);
  }
  body.single-product div.product .woocommerce-product-gallery{max-width:min(100%, 340px)}
  body.single-product .product_title{font-size:clamp(30px, 9vw, 44px)}
  /* El slider de relacionades és un element de la graella: sense min-width:0
     s'eixamplava fins a l'ample de totes les diapositives i es desplaçava. */
  .related.products{min-width:0;max-width:100%}
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#CFCDC9;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* Barra "Filtra la carta": mateixa amplada i centrat que la graella de pizzes
   (que és de 1100px màxim); al mòbil, amb el mateix marge lateral que les targetes. */
.pz-filters{max-width:1100px;margin:0 auto 18px}
@media (max-width:640px){
  .pz-filters{margin-inline:clamp(16px, 4vw, 56px)}
}

/* =========================================================
   PÀGINES LEGALS (política de compra, avís legal, privadesa, cookies)
   ========================================================= */
article:has(> .legal){max-width:780px;margin-inline:auto;padding-block:clamp(8px,3vw,32px)}
article:has(> .legal) h1{font-size:clamp(32px,5vw,52px)}
.legal{font-size:16px;line-height:1.65}
.legal h2{font-size:clamp(19px,2.3vw,24px);letter-spacing:.02em;margin:2em 0 .5em}
.legal p,.legal li{max-width:none}
.legal ul,.legal ol{margin:0 0 1em;padding-left:1.3em}
.legal li{margin-bottom:.4em}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .legal-upd{font-size:13px;color:var(--ink-dim);margin-bottom:1.5em}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:14.5px}
.legal-table th,.legal-table td{border:1px solid var(--line-soft);padding:9px 12px;text-align:left;vertical-align:top}
.legal-table th{background:var(--paper-2)}
.legal code{font-size:.9em;overflow-wrap:anywhere}
@media (max-width:640px){.legal-table{display:block;overflow-x:auto}}
/* Dades que falten (titular, NIF, correu): ressaltades perquè no passin per alt */
.pz-pendent{background:#ffe27a;color:#111;padding:0 3px;border-radius:3px}

/* =========================================================
   BANNER "COMANDES ESPECIALS" (final de la home, abans del peu)
   ========================================================= */
.special{background:var(--ink);color:#fff;text-align:center;padding:clamp(44px,8vw,88px) clamp(16px,4vw,56px);
  margin-top:clamp(32px,6vw,72px)}
.special-inner{max-width:760px;margin-inline:auto}
/* p té max-width:64ch (a l'esquerra): sense treure-la, la frase no quedava centrada al banner */
.special .eyebrow{color:rgba(255,255,255,.7);margin:0 auto .9em;max-width:none;text-align:center}
.special h2{font-size:clamp(26px,4.4vw,46px);color:#fff;margin-bottom:.45em}
.special .special-text{font-size:clamp(17px,2vw,21px);margin:0 auto 1.6em;max-width:none;color:rgba(255,255,255,.88)}
.special .special-phone{background:#fff;color:var(--ink);border-color:#fff;
  font-size:clamp(16px,2.2vw,20px);letter-spacing:.06em;padding:16px 34px}
.special .special-phone:hover{background:transparent;color:#fff}
/* El banner toca el peu: sense el buit blanc entre tots dos */
main:has(> .special:last-child) + .site-foot{margin-top:0}

/* Horari al peu */
.site-foot .foot-hours{display:flex;flex-direction:column;align-items:center;gap:4px}
.site-foot .foot-hours strong{color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.site-foot .foot-hours ul{list-style:none;margin:0;padding:0;line-height:1.6}
.site-foot .foot-hours li span{font-weight:600;margin-right:6px} /* mateix color que l'hora */

/* Dos telèfons (fix i mòbil): banner i peu */
.special .special-phones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
.site-foot .foot-phones{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px}

/* =========================================================
   CHECKOUT — MÈTODES DE PAGAMENT
   Cada mètode és una targeta amb el seu logo a la dreta; la triada es marca amb vora
   fosca. El formulari de targeta (Paycomet) ocupa l'amplada: número de targeta, caducitat
   i CVV en una mateixa fila quan hi caben, apilats al mòbil. Els amples fixos (290px,
   142px…) són "style" en línia del plugin de la passarel·la: d'aquí el !important.
   ========================================================= */
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 22px;padding:0;border:0;
  display:grid;gap:10px}
/* WooCommerce posa ::before/::after (clearfix, display:table) a cada li: en un grid comptarien com a cel·les */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after{content:none;display:none}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
  position:relative;margin:0;padding:14px 16px;list-style:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked){
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input{margin:0;width:20px;height:20px;accent-color:var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label{
  display:flex;align-items:center;gap:12px;margin:0;cursor:pointer;
  font-size:16px;font-weight:600;line-height:1.3;text-transform:none;letter-spacing:0;color:var(--ink)}
/* Tota la targeta és clicable (el quadre del formulari queda per sobre) */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::after{content:"";position:absolute;inset:0}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img{
  float:none;margin:0 0 0 auto;height:26px;width:auto;max-height:26px;max-width:120px;
  object-fit:contain;border:0;padding:0}
.woocommerce-checkout #payment div.payment_box{
  grid-column:1 / -1;position:relative;z-index:1;
  margin:14px 0 0;padding:16px 0 2px;border-top:1px solid var(--line-soft);
  background:transparent;color:var(--ink);font-size:15px;border-radius:0}
.woocommerce-checkout #payment div.payment_box::before{content:none;display:none}

/* Formulari de targeta (Paycomet) */
#paycometPaymentForm #toHide[style*="block"]{
  display:flex !important;flex-wrap:wrap;gap:16px 18px;align-items:flex-start}
#paycometPaymentForm #toHide > .row{margin:0;padding:0;width:auto}
#paycometPaymentForm #toHide > .row:nth-of-type(1){flex:2 1 300px}   /* número de targeta */
#paycometPaymentForm #toHide > .row:nth-of-type(2){flex:2 1 280px}   /* mes + any */
#paycometPaymentForm #toHide > .row:nth-of-type(3){flex:0 1 130px}   /* CVV */
#paycometPaymentForm #toHide > .row > [class*="col-"]{float:none;width:100%;max-width:none;padding:0 !important}
#paycometPaymentForm .form-group{margin:0}
#paycometPaymentForm label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
#paycometPaymentForm .input-group{display:block}
#paycometPaymentForm .form-inline{display:flex;gap:10px}
#paycometPaymentForm .form-inline select,#paycometPaymentForm .form-inline .select2-container{flex:1 1 0;width:auto !important;min-width:0}
/* Contenidor d'errors de la passarel·la: té fons vermell en línia i NOMÉS ha de ser visible si hi ha un missatge.
   Sense padding vertical (el buit del contenidor té espais en blanc i no compta com a :empty): l'alçada
   del missatge la dona el line-height, i buit no ocupa res. */
#paymentErrorMsg{margin-top:12px;padding:0 14px;border-radius:10px;font-size:14px;line-height:2.4}

/* Condicions, privadesa i botó de pagar */
.woocommerce-checkout #payment .place-order{padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:0}
.woocommerce-checkout .woocommerce-privacy-policy-text p{margin:0 0 14px;font-size:14px;color:var(--ink-dim);max-width:none}
.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a{text-decoration:underline;text-underline-offset:3px}
/* Casella: text en línia i asterisc just darrere (amb flex, l'asterisc se n'anava a l'extrem dret) */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox{
  display:block;position:relative;margin:0;padding-left:32px;
  font-size:15px;font-weight:500;line-height:1.5;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox input[type="checkbox"]{
  position:absolute;left:0;top:1px;width:20px;height:20px;margin:0;accent-color:var(--ink)}
/* La plantilla de WooCommerce fa el text i l'asterisc display:block: en línia perquè l'asterisc quedi enganxat al text */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox abbr.required{display:inline}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox abbr.required{
  margin-left:2px;border:0;text-decoration:none;color:#a00}
.woocommerce-checkout #payment #place_order{align-self:flex-end;float:none;margin:0;padding:16px 38px;font-size:15px}
@media (max-width:640px){
  .woocommerce-checkout #payment #place_order{align-self:stretch;width:100%}
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label{font-size:15px}
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img{max-width:92px}
}

/* =========================================================
   CHECKOUT — UN SOL ESTIL PER A TOTS ELS CAMPS
   Dades de contacte, dia i franja de recollida, i formulari de targeta: mateix alt (46px),
   mateixa vora (1.5px), mateix radi (10px) i fons blanc. Els camps de la passarel·la
   (número, CVV) són iframes: la vora i el radi els posa el seu contenidor.
   ========================================================= */
body.woocommerce-checkout{
  --pz-field-h:46px;--pz-field-r:10px;
  /* variables que fa servir el CSS propi de WooCommerce per a inputs, selects i select2 */
  --wc-form-border-width:1.5px;--wc-form-border-color:var(--line);--wc-form-border-radius:var(--pz-field-r);
  --wc-form-color-background:#fff;--wc-form-color-text:var(--ink)}

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce #paycometPaymentForm select{
  box-sizing:border-box;height:var(--pz-field-h);padding:0 14px;
  font-family:inherit;font-size:16px;line-height:1.2;color:var(--ink);
  background-color:#fff;border:1.5px solid var(--line);border-radius:var(--pz-field-r)}
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce #paycometPaymentForm select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:right 14px center}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .woocommerce #paycometPaymentForm select:focus{border-color:var(--ink);outline:0}

/* select2 (WooCommerce l'aplica als desplegables de la targeta): mateix aspecte que un select */
body.woocommerce-checkout .select2-container{width:100% !important}
body.woocommerce-checkout .select2-container .select2-selection--single{
  box-sizing:border-box;height:var(--pz-field-h);padding:0;display:flex;align-items:center;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--pz-field-r)}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{
  padding:0 44px 0 14px;line-height:1.2;font-size:16px;color:var(--ink);width:100%}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{
  top:0;right:14px;height:100%;display:flex;align-items:center}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow b{
  position:static;margin:0}

/* Número de targeta: contenidor amb el marc, l'iframe de dins no en té */
body.woocommerce-checkout #paycomet-pan{
  box-sizing:border-box;display:flex;align-items:center;width:100% !important;
  height:var(--pz-field-h) !important;padding:0 12px !important;
  background:#fff;border:1.5px solid var(--line) !important;border-radius:var(--pz-field-r);overflow:hidden}
body.woocommerce-checkout #paycomet-pan > *{width:100%}
/* CVV: mateix marc (només quan hem pogut treure-li la vora quadrada pròpia de l'iframe) */
body.woocommerce-checkout #paycometPaymentForm.pz-pay-styled #paycomet-cvc2{
  box-sizing:border-box;display:flex;align-items:center;width:100%;max-width:130px;
  height:var(--pz-field-h) !important;padding:0 12px !important; /* !important: el plugin posa padding:0 en línia */
  background:#fff;border:1.5px solid var(--line);border-radius:var(--pz-field-r);overflow:hidden}
body.woocommerce-checkout #paycometPaymentForm.pz-pay-styled #paycomet-cvc2 > *{width:100%}
body.woocommerce-checkout #paycometPaymentForm:not(.pz-pay-styled) #paycomet-cvc2{height:var(--pz-field-h) !important;display:flex;align-items:center}

/* Missatge sota l'hora de recollida: ben visible, com un avís */
body.woocommerce-checkout #pizzeria-franja-field .pizzeria-note{
  display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;max-width:none;
  padding:14px 16px;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:12px;
  font-size:clamp(16px,1.9vw,18px);font-weight:600;line-height:1.4;color:var(--ink);opacity:1}
body.woocommerce-checkout #pizzeria-franja-field .pizzeria-note::before{
  content:"";flex:0 0 26px;height:26px;margin-top:-1px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E")}

/* Hora de recollida: dia i franja de costat a l'escriptori (apilats al mòbil) */
body.woocommerce-checkout #pizzeria-franja-field .form-row{float:none;width:100%;margin:0 0 16px;padding:0}
body.woocommerce-checkout #pizzeria-franja-field .form-row select{width:100%}
@media (min-width:640px){
  body.woocommerce-checkout #pizzeria-franja-field{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}
  body.woocommerce-checkout #pizzeria-franja-field > h3,
  body.woocommerce-checkout #pizzeria-franja-field > .pizzeria-note,
  body.woocommerce-checkout #pizzeria-franja-field > .pizzeria-closed{grid-column:1 / -1}
}