/*
  main.css — L'Escairador v2
  Minimal hand-written styles that complement Tailwind CDN.
  In production this file will be replaced by the compiled Tailwind build.
*/

/* ── Corporate colour palette ─────────────────────────────────────────────
   Defined on :root here so every page can use it. It used to live in a
   <style> block inside home_page.html, which meant the shared partials
   (testimonis, receptes carousel, recent posts…) rendered without colour on
   any other page. Do not redefine these in a template.
   ------------------------------------------------------------------------ */
:root {
  --escairador-color-principal:    #603e3a; /* marró fosc — text, icones i títols */
  --escairador-color-accent:       #a97e66; /* terracota — títols accent i CTAs */
  --escairador-color-beix-clar:    #cdc3b7; /* beix clar — fons placeholders i botons */
  --escairador-color-beix-mig:     #ccc2b6; /* beix mig — fons seccions i pills */
  --escairador-color-beix-fons:    #e2dbd3; /* beix fons — fons hero i badges */
  --escairador-color-text-opinio:  #6b5454; /* marró suau — text opinions */
  --escairador-color-beix-suau:    #f0ece8; /* beix suau — fons de seccions i vores del menú */
  --escairador-color-avis:         #b45309; /* ambre — avisos de pagament pendent */
  --escairador-color-error:        #b02a37; /* vermell — errors de formulari */
  --escairador-color-gris-clar:    #f5f5f5; /* gris clar — fons en passar-hi el ratolí */

  /* ── Escala tipogràfica ───────────────────────────────────────────────
     Cada mida té un paper i es declara un sol cop: si un dia el títol de
     secció ha de créixer, es canvia aquí i creixen tots alhora.

     Els valors són els d'escriptori —h1 40, h2 35, h3 22, entrada 18 i
     text petit 17—, presos de la portada. De 1024 amunt són fixos: a
     qualsevol ordinador o portàtil la lletra fa exactament el mateix.
     Només encongeixen per sota, en tauletes i telèfons, on un títol de
     40px es menjaria mitja pantalla. Els valors fixos es declaren al
     final del bloc, a partir de 1024.
     -------------------------------------------------------------------- */
  --escairador-text-titol-pagina:  clamp(1.875rem, 3.9vw, 2.5rem);     /* h1  30 → 40 */
  --escairador-text-titol-seccio:  clamp(1.625rem, 3.4vw, 2.1875rem);  /* h2  26 → 35 */
  --escairador-text-titol-targeta: clamp(1.25rem, 2.1vw, 1.375rem);    /* h3  20 → 22 */
  --escairador-text-entrada:       clamp(1.0625rem, 1.75vw, 1.125rem); /* 17 → 18 */

  /* El text corrent. La 3 és el text de sempre i la 2 el text petit; la 1
     queda per a peus de fitxa i noms curts. */
  --escairador-text-cos-1:         1rem;       /* 16px */
  --escairador-text-cos-2:         1.0625rem;  /* 17px — text petit */
  --escairador-text-cos-3:         1.125rem;   /* 18px — text corrent */
  --escairador-text-petit:         0.875rem;   /* 14px — peus i etiquetes */

  /* Interlineat: els títols atapeïts, el text una mica més obert. */
  --escairador-alcada-titol:       1.1;
  --escairador-alcada-text:        1.25;
}

/* De 1024 amunt la lletra no es mou: el mateix nombre de píxels a totes
   les pantalles d'ordinador. L'aire dels portàtils petits el dona el marge
   lateral (veure assets/tailwind.css), no pas una lletra més petita. */
@media (min-width: 1024px) {
  :root {
    --escairador-text-titol-pagina:  2.5rem;     /* 40px */
    --escairador-text-titol-seccio:  2.1875rem;  /* 35px */
    --escairador-text-titol-targeta: 1.375rem;   /* 22px */
    --escairador-text-entrada:       1.125rem;   /* 18px */
  }
}

/* ── Custom Tailwind-compatible prose styles ─────────────────────────────── */
.prose-brand {
  --tw-prose-body: #374151;
  --tw-prose-headings: #2c2c2c;
  --tw-prose-links: #603e3a;
  --tw-prose-bold: #2c2c2c;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #a97e66;
  --tw-prose-quotes: #6b7280;
  --tw-prose-quote-borders: #603e3a;
}

/* ── Alpine x-cloak ──────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Product detail: tab-btn active fix ──────────────────────────────────── */
.tab-btn.active {
  background-color: #603e3a;
  color: #fff;
  border-color: #603e3a;
}

/* ── Cart sidebar translate animations ───────────────────────────────────── */
/* Tailwind CDN doesn't always include translate-x-full transition classes */
#cart-sidebar {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
#cart-sidebar[style*="display: block"],
#cart-sidebar:not([style*="display: none"]) {
  transform: translateX(0);
}

/* ── Smooth scroll offset for fixed header ───────────────────────────────── */
html { scroll-padding-top: 68px; }

/* ── Portada: la foto del hero (cms_pages/home_page.html) ─────────────────
   Les diapositives de Wagtail van totes apilades al mateix lloc i nomes es
   veu la que porta `es-actiu`. Amb una de sola no es mou res; amb mes d'una
   es van encavalcant cada 6 segons, com fan les opinions dels clients.
   ------------------------------------------------------------------------ */
.hero-fotos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
.hero-foto.es-actiu { opacity: 1; }
.home-hero-titol { font-size: var(--escairador-text-titol-pagina); }
/* Mentre el capçal només mostra el símbol del logo (fins a 1139px), el títol
   de la portada va gran: creix amb l'amplada fins a omplir tres línies, i
   s'atura als 56px quan el text ja topa amb els 500px del bloc. El 10,5vw
   és el màxim amb què el castellà, que és més llarg, no passa de tres. */
@media (max-width: 1139px) {
  .home-hero-titol { font-size: clamp(2.375rem, 10.5vw, 3.5rem); }
}

/* Botó «Veure productes» de les categories. Al mòbil van dues columnes de
   150px i el text feia dues línies: lletra i coixins més petits, i sempre en
   una línia. */
.boto-veure-productes { gap: .5rem; font-size: .95rem; padding: .75rem 1.75rem; white-space: nowrap; }
/* Al mòbil, menys espai entre el text i la fletxa i el que sobra passa als
   costats: el botó fa el mateix d'ample però respira més per les vores. */
@media (max-width: 639px) {
  .boto-veure-productes { gap: .25rem; font-size: .8125rem; padding: .7rem .725rem; }
}
@media (max-width: 379px) {
  .boto-veure-productes { padding-inline: .625rem; }
}

/* ── Transparent header (home page hero) ─────────────────────────────────── */
#site-header {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
#site-header.header-transparent {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}
/* White text/icons for top bar elements */
#site-header.header-transparent a,
#site-header.header-transparent button,
#site-header.header-transparent nav,
#site-header.header-transparent span {
  color: white !important;
}
/* White logos */
#site-header.header-transparent .header-logo img {
  filter: brightness(0) invert(1) !important;
}
/* Reset: dropdowns and mobile menu keep dark colors */
#site-header.header-transparent .nav-dropdown,
#site-header.header-transparent .nav-dropdown a,
#site-header.header-transparent .nav-dropdown button,
#site-header.header-transparent .nav-dropdown span {
  color: #603e3a !important;
}

/* ── La marca d'allò que tens seleccionat al capçal ───────────────────────
   La fa servir tant la pàgina on ets com l'idioma triat: són la mateixa cosa
   i han de tenir la mateixa pinta. Va aquí i no a cada enllaç perquè, amb el
   capçal transparent —Orígens, Blog, Receptari, Contacte—, s'ha de tornar
   blanca, i el `color: white` de sobre no arriba a un fons.
   ---------------------------------------------------------------------- */
.marca-activa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 9999px;
  background: var(--escairador-color-principal);
}
#site-header.header-transparent .marca-activa { background: #fff; }

/* Els enllaços del menú i el de l'idioma comparteixen caixa. Cal perquè la
   lletra de l'idioma és més petita (12px contra 15px): amb la caixa que li
   sortia pel seu compte quedava 3px més amunt, i com que la marca va
   enganxada a baix, les dues ratlles no coincidien. Amb la mateixa alçada i
   el text centrat a dins, tot queda a la mateixa línia. */
.enllac-capcal {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px;
  line-height: 1;
}

/* ── Focus-visible ring using brand color ────────────────────────────────── */
:focus-visible {
  outline: 2px solid #603e3a;
  outline-offset: 2px;
}

/* ── Semantic form components ────────────────────────────────────────────── */
.form-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #2c2c2c;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: #603e3a;
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}
.form-input.error {
  border-color: var(--escairador-color-error);
  border-width: 2px;
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

/* ── Button components ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn-primary {
  background-color: #603e3a;
  color: #fff;
  border-color: #603e3a;
}
.btn-primary:hover { background-color: #2c2c2c; border-color: #2c2c2c; }
.btn-secondary {
  background-color: transparent;
  color: #603e3a;
  border-color: #603e3a;
}
.btn-secondary:hover { background-color: #603e3a; color: #fff; }
.btn-danger {
  background-color: transparent;
  color: #dc2626;
  border-color: #dc2626;
}
.btn-danger:hover { background-color: #dc2626; color: #fff; }
.btn-sm { padding: 0.375rem 1rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }

/* ── Card component ─────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-body { padding: 1.5rem; }
.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  font-weight: 600;
  color: #2c2c2c;
}
.card-hover {
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-hover:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #6b7280;
  flex-wrap: wrap;
}
.breadcrumb a { color: #603e3a; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #d1d5db; }

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-green  { background: #dcfce7; color: #166534; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: #f3f4f6; color: #374151; }

/* ── Alert / notification box ───────────────────────────────────────────── */
.alert {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border-width: 1px;
  border-style: solid;
}
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ── Section heading ─────────────────────────────────────────────────────── */
.section-heading {
  font-family: 'Roboto', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.2;
}
.section-subheading {
  font-size: 1rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

/* ── Carousel: hide scrollbar (home receptes carousel track) ────────────── */
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Receptes carousel: snap + marge lateral igual que el del header ─────── */
.receptes-carousel-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 1.5rem;   /* px-6  */
}
@media (min-width: 640px)  { .receptes-carousel-track { scroll-padding-left: 2.5rem; } } /* sm:px-10 */
@media (min-width: 1024px) { .receptes-carousel-track { scroll-padding-left: 5rem; } }   /* lg:px-20 */

/* ── Receptes carousel: centre la primera card en mòbil ──────────────────── */
@media (max-width: 639px) {
  .receptes-carousel-track {
    padding-left: calc(50vw - 190px) !important;
    padding-right: calc(50vw - 190px) !important;
    scroll-padding-left: calc(50vw - 190px) !important;
  }
}

/* ── Testimonis (partials/testimonis.html) ───────────────────────────────────
   Aquestes regles vivien dins d'un <style> de home_page.html, així que a la
   resta de pàgines els tres panells es pintaven un sota l'altre en comptes de
   superposats. Aquí funcionen a totes.
   ------------------------------------------------------------------------- */

/* Crossfade en CSS pur — sense display:none, així no hi ha salt vertical */
.testimoni-panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}
.testimoni-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Els panells són absoluts: centra'ls verticalment dins l'alçada fixa */
.testimonis-panels {
  position: relative;
  height: 11rem;
  overflow: hidden;
}
.testimonis-panels > .testimoni-panel {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  #testimonis-wrapper {
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }
  #testimonis-wrapper > h2 {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    min-width: 0 !important;
    max-width: none !important;
    margin-bottom: 0.25rem;
  }
  #testimonis-wrapper > button {
    flex-shrink: 0;
  }
  #testimonis-wrapper > .testimonis-content {
    flex: 1 1 0%;
    min-width: 0;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 639px) {
  .testimonis-text { font-size: 0.875rem !important; }
}
/* Al mòbil, amb un botó a cada costat el text quedava en una columna estreta.
   El text passa a tota l'amplada i els dos botons van a sota, junts. */
@media (max-width: 767px) {
  #testimonis-wrapper { justify-content: center; column-gap: 1.25rem !important; }
  #testimonis-wrapper > .testimonis-content {
    order: 1;
    flex: 0 0 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #testimonis-wrapper > button { order: 2; margin-top: .5rem; }
}

/* ── Sense gluten icon next to the product title ─────────────────────────
   The art is cropped to the disc now, so it is sized to about half the <h1>
   clamp: that reproduces the size it had when it still carried a white
   margin around it. */
.gluten-icon-title {
  height: clamp(1.95rem, 3.65vw, 2.95rem);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: .9rem;
  /* `middle` leaves it ~0.1em low against the caps; nudge it onto the
     optical centre of the title. In em so it holds at any title size. */
  position: relative;
  top: -.1em;
}

/* ── Product gallery (botiga/_product_gallery.html) ──────────────────────── */
.product-gallery-main {
  /* Les fletxes s'ancoren aqui, a la columna, i no a la imatge. Ancorades a
     la imatge es movien amb ella: amb una de vertical quedaven al seu lloc,
     pero amb una d'ampla sortien de la columna i es posaven a sobre de les
     miniatures. */
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 320px;
  display: flex;
  /* El paquet es mes alt que la franja beix a posta, per vessar cap avall
     damunt de la d'ingredients. Centrat, pero, vessava igual cap amunt, i
     alla hi ha el capcal fix, que se'n menjava la part de sobre. Amb `safe`
     el navegador el centra mentre hi cap i, quan no, l'enganxa a dalt en
     comptes de deixar-lo sortir. */
  align-items: center;
  align-items: safe center;
  justify-content: center;
}

.product-gallery-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  /* L'alcada del plafo, per poder-hi limitar la imatge: un percentatge
     nomes val si el pare en te una de concreta. */
  height: 100%;
  min-height: 0;
}

.product-gallery-img {
  width: auto;
  /* L'alcada mana, que es el que fa que els paquets es vegin grans. Pero una
     imatge ampla, com la d'especificacions de la pasta (1396x630), amb 680 px
     d'alt se n'aniria a mes de 1.500 d'ample. El limit la deixa a una mida
     raonable sense tocar els paquets, que son verticals i no hi arriben. */
  max-width: min(100%, 520px);
  height: clamp(320px, 42vw, 680px);
  /* Amb poc text al costat, el plafo es mes baix que el paquet i el paquet
     s'enganxava al capcal, que es fix. Amb aquest limit no hi arriba mai.
     A les fitxes amb text de sobres no toca res: alla el plafo ja es mes
     alt que els 680 px i el paquet es queda igual. */
  max-height: calc(100% - 2rem);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(61, 43, 43, .18));
}

.product-gallery-thumbs {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centred against the main image */
  gap: .75rem;
  flex-shrink: 0;
  width: 5.25rem;
}
.product-gallery-thumb {
  border: 1px solid rgba(96, 62, 58, .15);
  border-radius: 1rem;
  overflow: hidden;
  padding: .3rem;
  cursor: pointer;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;            /* portrait, like the pack shots */
  opacity: .55;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.product-gallery-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.product-gallery-thumb:hover { opacity: .85; }
.product-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--escairador-color-principal);
  box-shadow: 0 2px 10px rgba(96, 62, 58, .18);
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: var(--escairador-color-principal);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.gallery-arrow svg { width: 1.35rem; height: 1.35rem; }
.gallery-arrow:hover { opacity: .75; }
.gallery-arrow.is-prev { left: 0; }
.gallery-arrow.is-next { right: 0; }

@media (max-width: 1023px) {
  .product-gallery-img { height: clamp(260px, 55vw, 420px); }
  .product-gallery-thumbs { width: 4rem; gap: .5rem; }
  .product-gallery-thumb { height: 4.25rem; border-radius: .75rem; }
  .gallery-arrow { width: 2.5rem; height: 2.5rem; }
  .gallery-arrow svg { width: 1.15rem; height: 1.15rem; }
  .gallery-arrow.is-prev { left: 0; }
  .gallery-arrow.is-next { right: 0; }
}
@media (max-width: 767px) {
  .gallery-arrow { width: 2.125rem; height: 2.125rem; }
  .gallery-arrow svg { width: 1rem; height: 1rem; }
}

/* ── Variant row on the product page ─────────────────────────────────────── */
.variant-row { display: flex; align-items: center; gap: .75rem; }
.variant-pill {
  width: 14rem;
  height: 3.25rem;
  flex-shrink: 0;
}
.variant-add {
  width: 14rem;
  height: 3.25rem;
  flex-shrink: 0;
}
/* On a phone the two fixed 14rem boxes (460px) overflowed the screen. */
@media (max-width: 639px) {
  .variant-row { width: 100%; gap: .5rem; }
  .variant-pill { width: auto; flex: 1 1 auto; min-width: 0; }
  .variant-add  { width: 5rem; }
}

/* ── Footer institutional logos ──────────────────────────────────────────── */
/* El peu parla amb la mateixa lletra que el capçal. Les tres columnes ja
   eren totes Roboto, però el menú de dalt és Open Sans i la diferència es
   notava justament a la columna dels enllaços legals, que és la que més
   s'assembla a un menú. */
footer { font-family: 'Open Sans', sans-serif; }

.footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: .25rem;
  padding: .3rem .4rem;
}
.footer-logo img {
  height: auto;
  width: auto;
  max-height: 28px;
  max-width: 130px;
  object-fit: contain;
  display: block;
}
/* squarer logos need more height to look the same size as the wide ones */
.footer-logo img.is-tall { max-height: 42px; max-width: 74px; }

/* ── Fletxes (partials/_fletxa.html) ─────────────────────────────────────── */
.fletxa-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.fletxa-btn:disabled {
  opacity: .25;
  cursor: default;
}
.fletxa-btn img {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}
@media (max-width: 639px) {
  .fletxa-btn img { width: 1.5rem; height: 1.5rem; }
}

/* Related products carousel: 3 cards visible, hidden scrollbar */
/* Graella en lloc de flex: així les fitxes poden compartir les alçades de
   les files (subgrid) i queden alineades entre elles, com a la botiga. */
.related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4rem) / 3);   /* 3 per pantalla amb 2rem de separació */
  grid-template-rows: auto auto auto auto auto; /* foto · títol · descripció · preus · botons */
  column-gap: 2rem;
  row-gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.related-track::-webkit-scrollbar { display: none; }
.related-track > * { scroll-snap-align: start; }
@media (max-width: 1023px) {
  .related-track { grid-auto-columns: calc((100% - 2rem) / 2); }
}
@media (max-width: 639px) {
  .related-track { column-gap: 1.25rem; grid-auto-columns: 100%; }
}

/* ── Fitxes de relacionats alineades ─────────────────────────────────────── */
.related-fitxa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* El mateix criteri que a la botiga: la fitxa més estreta que la
     columna, perquè els títols llargs facin dues línies. */
  padding-inline: min(2rem, calc((100% - 16rem) / 2));
}
.related-fitxa-accions { margin-top: auto; padding-top: .5rem; }

/* Igual que a la botiga: si cap producte relacionat no porta descripcio, la
   fila se'n va i el contingut s'ajunta amb la foto. */
.related-track:not(:has(.related-fitxa-descripcio:not(:empty)))
  .related-fitxa-descripcio { display: none; }

@supports (grid-template-rows: subgrid) {
  .related-track > .related-fitxa {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: center;
    /* align-items:center de la versió flex centraria cada element dins de
       la seva fila i els desalinearia entre fitxes. */
    align-items: start;
  }
  /* Els dos productes sense variant no porten botó de cistell i la seva
     fila d'accions és 6px més baixa: alineats pel final, el botó de veure
     producte els quedava desquadrat respecte dels altres. */
  .related-fitxa-accions { margin-top: 0; align-self: start; }
}

/* ── Carousel navigation buttons ─────────────────────────────────────────── */
.carousel-btn {
  background-color: #7a5a48;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}
.carousel-btn:not(:disabled):hover {
  background-color: #5e4236;
}
.carousel-btn:not(:disabled):active {
  background-color: #3e2b22;
}
.carousel-btn:disabled {
  background-color: #cdc3b7;
  color: #fff;
  cursor: default;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  border: 3px solid rgba(96, 62, 58, 0.2);
  border-left-color: #603e3a;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: spinner-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.spinner-petit {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}

/* ── Print styles ────────────────────────────────────────────────────────── */
@media print {
  header, footer, #cart-sidebar, .cookies-banner { display: none !important; }
  body { background: white; }
}

/* ── Listing pages: Receptari and Blog ────────────────────────────────────
   Shared by templates/receptes/index.html and templates/blog/index.html.
   ------------------------------------------------------------------------ */

/* Filter pills. They sit on a coloured band, so they inherit its text colour
   and only draw a ring when active. */
.filter-pill {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: var(--escairador-text-cos-2);
  line-height: 1;
  color: inherit;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 9999px;
  padding: .55rem 1.1rem;
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.filter-pill:hover { opacity: .75; }
.filter-pill.is-active { border-color: #fff; }

/* Targeta de recepta: la mateixa al receptari i al carrusel de la portada. */
.targeta-recepta { display: flex; }
.targeta-recepta-enllac {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--escairador-color-beix-fons);
  transition: transform .25s ease, box-shadow .25s ease;
}
.targeta-recepta-enllac:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(96, 62, 58, .14);
}
.targeta-recepta-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.targeta-recepta-cos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.35rem;
}
/* Dues linies per a totes les targetes, hi hagi el titol que hi hagi: el que
   no hi cap s'acaba amb punts suspensius i el peu queda sempre a la mateixa
   alcada. */
.targeta-recepta-titol {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-titol-targeta);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-principal);
  margin: 0;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.targeta-recepta-peu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}
.targeta-recepta-etiquetes {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  min-width: 0;
  overflow: hidden;
}
/* Sempre en una fila: si salten de linia, unes targetes queden mes altes
   que les altres. La que no hi cap s'acaba amb punts suspensius. */
.targeta-recepta-etiqueta {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1;
  color: var(--escairador-color-principal);
  background: #fff;
  border-radius: 9999px;
  padding: .45rem .8rem;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.targeta-recepta-fletxa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.9rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--escairador-color-principal);
  color: #fff;
  transition: background-color .2s ease, transform .2s ease;
}
.targeta-recepta-enllac:hover .targeta-recepta-fletxa {
  background: var(--escairador-color-accent);
  transform: translateX(3px);
}
/* Al carrusel de la portada les targetes van totes de la mateixa amplada. */
.targeta-recepta-carrusel {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .targeta-recepta-carrusel { flex-basis: 380px; }
}

/* Blog cards: full-bleed photo, category chip, title over a dark gradient. */
.post-card { display: flex; }
.post-card-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  border-radius: 2.125rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--escairador-color-beix-clar);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(96, 62, 58, .18);
}
.post-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(35, 22, 20, .78) 0%, rgba(35, 22, 20, .25) 45%, rgba(35, 22, 20, 0) 70%);
}
.post-card-chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: .875rem;
  line-height: 1;
  color: var(--escairador-color-principal);
  background: var(--escairador-color-beix-fons);
  border-radius: 9999px;
  padding: .45rem 1rem;
}
.post-card-title {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.4rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-titol-targeta);
  line-height: var(--escairador-alcada-text);
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .post-card-link { border-radius: 1.75rem; }
  .post-card-title { font-size: var(--escairador-text-cos-3); left: 1.15rem; right: 1.15rem; bottom: 1.15rem; }
  .post-card-chip { font-size: .8125rem; padding: .35rem .8rem; top: .85rem; left: .85rem; }
}

@media (max-width: 639px) {
  /* Coixins laterals més justos: els filtres del receptari passen de set
     línies a cinc al mòbil sense baixar la lletra de 14px. */
  .filter-pill { font-size: var(--escairador-text-petit); padding: .45rem .5rem; }
  .targeta-recepta-titol { font-size: 1.125rem; }
  .targeta-recepta-cos { padding: 1rem 1.1rem 1.15rem; }
  .targeta-recepta-etiqueta { font-size: .75rem; padding: .4rem .65rem; }
  .post-card-title { font-size: 1.15rem; }
}
@media (max-width: 379px) {
  .filter-pill { padding-inline: .45rem; }
}

.xarxa-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--escairador-color-beix-fons);
  color: var(--escairador-color-principal);
  transition: opacity .2s;
}
.xarxa-social.es-clara { background: #fff; }
.xarxa-social:hover { opacity: .8; }
.xarxa-social svg { width: 1.25rem; height: 1.25rem; }

.contacte-entradeta {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-entrada);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-text-opinio);
  margin: 0;
}
.contacte-dada { display: flex; align-items: flex-start; gap: 1rem; }
.contacte-icona {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--escairador-color-beix-fons);
  color: var(--escairador-color-principal);
}
.contacte-icona svg { width: 1.25rem; height: 1.25rem; }
.contacte-etiqueta {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-cos-2);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-principal);
  margin: 0 0 .25rem;
}
.contacte-valor {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-cos-2);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-text-opinio);
  margin: 0;
}
.contacte-enllac { display: inline-block; transition: color .2s; }
.contacte-enllac:hover {
  color: var(--escairador-color-principal);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.camp-etiqueta {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: var(--escairador-text-cos-2);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-principal);
  margin-bottom: .4rem;
}
.camp-formulari {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-cos-2);
  line-height: var(--escairador-alcada-text);
  color: var(--escairador-color-principal);
  background: #fff;
  border: 1px solid var(--escairador-color-beix-mig);
  border-radius: .5rem;
  padding: .7rem 1rem;
  transition: border-color .2s;
}
.camp-formulari::placeholder { color: var(--escairador-color-text-opinio); opacity: .65; }
.camp-formulari:focus {
  outline: none;
  border-color: var(--escairador-color-principal);
}
.camp-formulari.te-error { border-color: #c0392b; }
textarea.camp-formulari { resize: vertical; }
.camp-obligatori { color: #c0392b; }
.camp-error {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-petit);
  color: #c0392b;
  margin: .35rem 0 0;
}
.camp-avis {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-petit);
  line-height: 1.3;
  color: #c0392b;
  margin: .35rem 0 0;
}
.camp-avis svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.camp-avis-error {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-cos-2);
  color: #c0392b;
  background: #fdf1ef;
  border: 1px solid #f0c9c3;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.contacte-boto {
  width: 100%;
  max-width: 24rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-cos-3);
  color: #fff;
  background: var(--escairador-color-principal);
  border-radius: 9999px;
  padding: .95rem 2rem;
  transition: background .2s;
}
.contacte-boto:hover { background: var(--escairador-color-accent); }

/* ── Legal pages (cms_pages/legal.html) ───────────────────────────────────
   One readable column: comfortable measure, clear headings and lists.
   ------------------------------------------------------------------------ */
.legal-body {
  max-width: 62rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--escairador-color-text-opinio);
}
.legal-body > *:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1.25rem; }
.legal-body h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--escairador-color-principal);
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(96, 62, 58, .18);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--escairador-color-principal);
  margin: 1.75rem 0 .6rem;
}
.legal-body ul,
.legal-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.legal-body li { margin-bottom: .6rem; }
.legal-body ul li::marker { color: var(--escairador-color-accent); }
.legal-body ol li::marker {
  color: var(--escairador-color-principal);
  font-weight: 700;
}
.legal-body strong { color: var(--escairador-color-principal); font-weight: 600; }
.legal-body a {
  color: var(--escairador-color-principal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--escairador-color-accent); }

/* ── Blog post (blog/detail.html) ─────────────────────────────────────────
   Editorial layout, everything left-aligned on the site gutters. Widths go
   from wide to narrow: heading 58rem, then the cover and the prev/next cards
   at 52rem bookending the reading column of 44rem (~78 characters at 18px,
   a comfortable measure). Figures live inside that column.
   ------------------------------------------------------------------------ */

/* ·· Title band ·········································································· */
.post-head { max-width: 58rem; }
.post-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--escairador-color-principal);
  margin: 0;
}
/* Date and category, right under the title */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: var(--escairador-color-text-opinio);
}
.post-chip {
  background: var(--escairador-color-principal);
  color: #fff;
  border-radius: 9999px;
  padding: .5rem 1.15rem;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
}
.post-intro {
  max-width: 46rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--escairador-color-text-opinio);
  margin: 1.75rem 0 0;
}

/* ·· Cover ··············································································· */
.post-article { padding: 0 0 4rem; }

/* Portada a tota pantalla, una mica apagada perquè no cridi més que el text */
.post-portada { display: block; background: var(--escairador-color-principal); }
.post-portada img {
  display: block;
  width: 100%;
  height: clamp(360px, 67vh, 720px);
  object-fit: cover;
  object-position: top;
  filter: brightness(.82);
}

/* ·· Body ················································································ */
/* El cos alterna text (dins de les cantonades) i fotos a sang */
.post-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.75;
  /* Mateix marró que el títol */
  color: var(--escairador-color-principal);
}
/* Sense columna estreta: el text va d'una cantonada a l'altra, igual que
   la capçalera del web. */
.post-text > *:first-child { margin-top: 0; }
.post-text > *:last-child  { margin-bottom: 0; }
.post-text p { margin: 0 0 1.6rem; }
.post-text h2,
.post-text h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--escairador-color-principal);
  line-height: 1.25;
}
.post-text h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin: 3rem 0 1rem; }
.post-text h3 { font-size: 1.3125rem; margin: 2.25rem 0 .75rem; }
.post-text ul,
.post-text ol { margin: 0 0 1.6rem; padding-left: 1.5rem; }
.post-text li { margin-bottom: .6rem; }
.post-text ul li::marker { color: var(--escairador-color-accent); }
.post-text blockquote {
  margin: 2.5rem 0;
  padding: .25rem 0 .25rem 1.6rem;
  border-left: 3px solid var(--escairador-color-accent);
  font-size: 1.1875rem;
  font-style: italic;
  color: var(--escairador-color-principal);
}
.post-text strong { color: var(--escairador-color-principal); font-weight: 600; }
.post-text a {
  color: var(--escairador-color-principal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s;
}
.post-text a:hover { color: var(--escairador-color-accent); }

/* Fotos de l'article a tota pantalla, amb el peu centrat a sota */
.post-figure { margin: 3rem 0; }
.post-figure img {
  display: block;
  width: 100%;
  /* Amb l'alcada automatica la foto es veu sencera, amb les seves propies
     proporcions. El limit nomes hi es perque no ocupi mes que la pantalla en
     monitors amples; quan hi arriba, el retall se'l menja per baix. */
  height: auto;
  max-height: 88vh;
  object-fit: cover;
  object-position: top;
}
.post-figure figcaption {
  margin-top: .85rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--escairador-color-text-opinio);
}

/* ·· Previous / next ····································································· */
.post-nav {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.post-nav-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1.5px solid var(--escairador-color-beix-mig);
  border-radius: 1rem;
  text-decoration: none;
  background: transparent;
  transition: background-color .2s, border-color .2s;
}
.post-nav-card:hover {
  background: var(--escairador-color-beix-fons);
  border-color: var(--escairador-color-beix-fons);
}
.post-nav-card.is-next { flex-direction: row-reverse; text-align: right; }
.post-nav-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--escairador-color-principal);
  color: #fff;
}
.post-nav-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.post-nav-label {
  font-family: 'Open Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--escairador-color-accent);
}
.post-nav-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--escairador-color-principal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .post-intro { font-size: 1.0625rem; margin-top: 1.25rem; }
  .post-portada img { height: clamp(264px, 41vh, 384px); }
  .post-figure img { max-height: 60vh; }
  .post-text { font-size: 1.125rem; line-height: 1.7; }
  .post-figure { margin: 2.25rem 0; }
  .post-nav { grid-template-columns: 1fr; margin-top: 3rem; }
  .post-nav-card.is-next { flex-direction: row; text-align: left; }
}

/* ── Orígens: línia de temps interactiva (cms_pages/historia.html) ─────────
   A partir de 1024px la secció es queda enganxada a la pantalla mentre es fa
   scroll, i cada pantalla de recorregut avança un punt: el contingut llisca
   lateralment i només se'n veu un a la vegada. Per sota, i per a qui demana
   menys moviment, els punts s'apilen i s'hi arriba fent scroll normal.
   ------------------------------------------------------------------------ */

/* Mides i espais de la línia de temps en un sol lloc: en pantalles baixes
   només cal tornar a declarar aquestes variables. */
.origens-linia {
  /* Numero + una linia de titol + el que separa l'etiqueta de la linia.
     Els titols hi caben d'una perque l'etiqueta es prou ampla. Si algun
     dia n'hi ha un de mes llarg val mes eixamplar-la que no pas reservar
     aqui una segona linia que gairebe mai no es fa servir: aquesta
     reserva es paga dues vegades, a dalt i a baix, i la treu de la foto. */
  --origens-etiqueta: calc(var(--origens-num) * 1.1
    + var(--origens-titol) * 1.15 + .75rem);
  /* Prou ampla per al títol més llarg dels dos idiomes («Poner en valor la
     tradición» fa 12 vegades la mida de la lletra). La pista en deixa mitja
     a cada extrem perquè el primer i l'últim no surtin de la reixa. */
  --origens-etiqueta-ample: calc(var(--origens-titol) * 12);
  --origens-h2: var(--escairador-text-titol-seccio);
  --origens-subtitol: var(--escairador-text-entrada);
  /* El títol de cada punt, a la franja beix: la mateixa mida que el títol
     de la secció, a la part blanca de sobre. */
  --origens-titol-fitxa: var(--escairador-text-titol-seccio);
  --origens-cos: var(--escairador-text-cos-3);
  /* Les etiquetes són secundàries: número a mida de títol de targeta i
     títol a mida de text, un pas per sota del que duien. */
  --origens-num: var(--escairador-text-titol-targeta);
  --origens-titol: var(--escairador-text-cos-3);
  /* L'aire del plafó, tot en un sol lloc: el que hi ha sobre el títol de la
     secció, el que el separa dels punts, el que separa els punts de la
     franja beix i el que la franja deixa per dins. */
  --origens-aire-cap: 3.5rem;    /* per sobre del títol de la secció */
  --origens-aire-sub: 1rem;      /* del subtítol als punts */
  --origens-buit: 3.25rem;       /* aire entre la línia i la franja beix: el mateix blanc que hi ha sobre el títol */
  --origens-farcit: 3rem;        /* aire de dins de la franja beix */
  --origens-titol-aire: .5rem;   /* del títol de la franja al text */
}

/* ── Les tres píndoles de la portada ──────────────────────────────────────
   Dibuix a l'esquerra i text a la dreta, dins d'una càpsula. Abans cada una
   portava la seva mida d'icona escrita a mà —88, 68 i 120px— i el text anava
   a la mida dels títols de fitxa. Ara les tres comparteixen mida i el dibuix
   encongeix amb la pantalla, com fa la lletra.
   ------------------------------------------------------------------------ */
.pindola {
  /* El dibuix va una mica per sobre del bloc de text, que fa tres línies
     de 17px: així la càpsula no queda plana. */
  --pindola-icona: clamp(4rem, 5.2vw, 4.75rem);     /* 64 → 76px */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--escairador-color-beix-mig);
  border: 2px solid #fff;
  border-radius: 9999px;
  /* Més aire a dalt i a baix que als costats: el text hi guanya amplada i
     la càpsula respira. */
  padding: .9rem .75rem;
  overflow: hidden;
}
.pindola-icona {
  flex-shrink: 0;
  width: var(--pindola-icona);
  height: var(--pindola-icona);
  box-sizing: border-box;
}
.pindola-icona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Els tres dibuixos omplen el seu fitxer de punta a punta, però els
   fitxers no tenen la mateixa forma: el dels cereals és vertical (600×881)
   i els altres dos són quadrats. Dins d'una caixa quadrada, el vertical es
   dibuixa estret i els quadrats l'omplen sencera, i per això es veien més
   grossos. Se'ls encongeix fins que ocupen la mateixa superfície.

   El farciment va en calc i no en percentatge: un percentatge es mesura
   contra l'amplada del pare, no la de la icona. */
.pindola-icona.es-quadrada { padding: calc(var(--pindola-icona) * .09); }

/* Apilades, la càpsula és ampla i el text hi cap en poques línies: allà el
   dibuix del molí es menjava la fila. */
@media (max-width: 749px) {
  .pindola:nth-child(2) .pindola-icona { --pindola-icona: 3.6rem; }
}
.pindola-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: var(--escairador-text-cos-2);
  line-height: var(--escairador-alcada-text);
  letter-spacing: -.02em;
  color: var(--escairador-color-principal);
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ── La secció que obre les pàgines del menú ──────────────────────────────
   Totes fan la mateixa alçada, i la mida surt del bloc beix de Com ho fem:
   la franja del títol més les quatre columnes, seguides i just sota del
   capçal: 738px de beix a 1440.

   El contingut hi va centrat verticalment.

   És min-height i no height perquè en pantalles estretes el text ocupa més
   línies, i val més que la secció creixi que no pas que talli paraules.

   A la Home, Orígens, Receptari, Blog i Contacte el capçal fix passa per
   sobre de la foto. Allà s'hi afegeix `sota-el-capcal`, que reserva els
   seus 68px a part perquè el que es veu segueixi fent els mateixos 738.
   ------------------------------------------------------------------------ */
.seccio-capcalera {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 738px;
}
.seccio-capcalera.sota-el-capcal {
  min-height: 806px;             /* 738 + els 68 del capçal */
  padding-top: 68px;
}

/* ── Capçaleres de secció amb foto ────────────────────────────────────────
   Mateix títol, mateixa entradeta, mateixa foto i mateix vel a Orígens,
   Receptari, Blog i Contacte. Els valors són els d'Orígens.

   Cada pàgina se n'havia fet una versió pel seu compte: una amb degradat,
   una altra només amb el filtre i Contacte sense res, on el text blanc es
   llegia just damunt de la terra al sol. Ara la foto va una mica apagada
   i, al damunt, un vel que s'aclareix d'esquerra a dreta: el text viu a
   l'esquerra i la foto es continua veient a la dreta.
   ------------------------------------------------------------------------ */
.capcalera-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.capcalera-foto,
.origens-hero-foto { filter: brightness(.85); }
.capcalera-vel {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(25, 16, 14, .72) 0%,
              rgba(25, 16, 14, .35) 55%,
              rgba(25, 16, 14, .15) 100%);
}
/* En pantalles estretes el text ocupa tota l'amplada i el degradat lateral
   ja no li fa cap servei: la darrera línia queda damunt de la part clara.
   Aquí el vel s'iguala. */
@media (max-width: 767px) {
  .capcalera-vel {
    background: linear-gradient(90deg,
                rgba(25, 16, 14, .72) 0%,
                rgba(25, 16, 14, .55) 100%);
  }
}

/* La foto de la capçalera d'Orígens va un 20% més gran i enganxada a
   l'esquerra: així el retrat es desplaça cap a la dreta i el text de sota
   el títol no li passa per sobre de la cara. */
/* La foto va un 20% mes ampla que la seccio i enganxada a l'esquerra: el
   retrat es desplaça cap a la dreta i el text de sota el titol no li passa
   per sobre de la cara. El que sobresurt per la dreta el retalla la seccio.
   Es fa amb l'amplada i no amb un transform perque, eixamplant-la, la vora
   esquerra segueix coberta: desplaçant-la hi quedava una franja de fons. */
.origens-hero-foto {
  position: absolute;
  inset: 0;
  width: 120%;
  /* El reset la deixaria a l'amplada de la seccio i no sobresortiria. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* En pantalles molt amples el text se'n va cap al centre amb la reixa de la
   pagina i acabava trobant-se la cara. A partir de 1800 la foto s'eixampla
   una mica mes per cada pixel de mes, i el retrat es manté sempre a la
   dreta del text. */
@media (min-width: 1800px) {
  .origens-hero-foto { width: calc(120% + (100vw - 1800px) * .25); }
}

/* L'entradeta d'Orígens, i només la d'aquesta pàgina: als dos extrems
   s'estreny perquè no s'acosti al retrat. Per sota de 1400 la foto encara
   no s'eixampla i la cara queda a prop; per sobre de 2250 el text se'n va
   cap al centre amb la reixa i tornaria a trobar-se-la. */
@media (max-width: 1400px), (min-width: 2250px) {
  #origens-hero .hero-entradeta { max-width: 18rem; }
}

.hero-titol {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-titol-pagina);
  line-height: var(--escairador-alcada-titol);
  color: #fff;
  margin: 0;
}
.hero-entradeta {
  /* Prou estreta perquè no travessi la foto: a Orígens hi ha un retrat i el
     text li passava per sobre de la cara. */
  max-width: 26rem;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--escairador-text-entrada);
  /* Pes normal a posta: si tot el paràgraf va en semi-negreta, el <strong>
     no es distingeix de la resta. */
  font-weight: 400;
  line-height: var(--escairador-alcada-text);
  color: #fff;
}
.hero-entradeta p { margin: 0 0 .75rem; }
.hero-entradeta p:last-child { margin-bottom: 0; }
/* 600 i no 700: de la Open Sans només carreguem 400 i 600, i el 700
   se l'inventaria el navegador. Contra el 400 del text ja destaca. */
.hero-entradeta b, .hero-entradeta strong { font-weight: 600; }

/* Doble fletxa reutilitzable (partials/_fletxa_avall.html). La secció que
   la conté ha de ser position:relative. */
.fletxa-avall {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  margin-left: -17px;
  display: inline-flex;
  color: #fff;
  opacity: .85;
  animation: fletxa-bota 2.4s ease-in-out infinite;
}
.fletxa-avall:hover { opacity: 1; }
.fletxa-avall.es-en-flux { position: static; margin-left: 0; }
@keyframes fletxa-bota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(.45rem); }
}
@media (prefers-reduced-motion: reduce) {
  .fletxa-avall { animation: none; }
}

/* ·· Encapçalament ······················································· */
.origens-encapcalament { text-align: center; }
.origens-encapcalament h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--origens-h2);
  line-height: var(--escairador-alcada-titol);
  color: var(--escairador-color-principal);
  margin: 0;
}
.origens-encapcalament p {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--origens-subtitol);
  color: var(--escairador-color-text-opinio);
  margin: .3rem 0 0;
}

/* ·· Els punts ··························································· */
.origens-pista {
  /* Mitja etiqueta a cada costat: els punts dels extrems s'endinsen i les
     seves etiquetes queden justes amb el marge de la pàgina. */
  --origens-marge: calc(var(--origens-etiqueta-ample) / 2);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--origens-etiqueta) var(--origens-marge);
}
.origens-linia-base,
.origens-linia-feta {
  position: absolute;
  left: var(--origens-marge);
  right: var(--origens-marge);
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.origens-linia-base { background: var(--escairador-color-beix-mig); }
/* El progrés s'escala en comptes de créixer d'amplada: així el 100% cau
   exactament sobre l'últim punt, hi hagi el marge que hi hagi. */
.origens-linia-feta {
  background: var(--escairador-color-principal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s ease;
}

.origens-punt {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.origens-bola {
  position: relative;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 9999px;
  border: 2px solid var(--escairador-color-beix-mig);
  background: #fff;
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}
/* El punt seleccionat es veu més gran i ple.
   El marró es pinta d'una sola peça —la vora i el fons del mateix color—
   perquè abans eren dues: la vora i una ombra interior. A la costura de les
   dues, en una vora corba, s'hi veia un fil blanc del fons. */
.origens-punt.es-actiu .origens-bola {
  transform: scale(1.25);
  border-color: var(--escairador-color-principal);
  background: var(--escairador-color-principal);
}
/* La bola blanca del mig, a sobre del marró: la mateixa mida que abans. */
.origens-punt.es-actiu .origens-bola::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: .7rem;
  height: .7rem;
  border-radius: 9999px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.origens-etiqueta {
  position: absolute;
  top: calc(100% + .35rem);      /* inactius: a sota de la línia */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  white-space: nowrap;               /* sempre d'una sola línia */
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: var(--escairador-color-principal);
  transition: top .35s ease, opacity .35s ease;
}
/* L'actiu puja per damunt de la línia, com al disseny */
.origens-punt.es-actiu .origens-etiqueta {
  top: auto;
  bottom: calc(100% + .5rem);
}
.origens-num {
  display: block;
  font-weight: 700;
  font-size: var(--origens-num);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.origens-titol {
  display: block;
  font-weight: 700;
  font-size: var(--origens-titol);
  line-height: 1.15;
  margin-top: .15rem;
}
.origens-punt:not(.es-actiu) .origens-etiqueta { opacity: .75; }
.origens-punt:hover .origens-etiqueta { opacity: 1; }

/* ·· Contingut que llisca ················································ */
.origens-punts {
  --origens-fletxa-aire: 1rem;   /* de la fletxa a la pista */
  margin-bottom: var(--origens-buit);
}
/* Les fletxes van dins dels marges de la pàgina, a banda i banda de la
   pista i a l'altura de la línia. Abans eren al marge de la reixa, tocant
   la vora de la pantalla. Com que ocupen el seu lloc, les etiquetes no les
   poden trepitjar. Quan una s'amaga guarda l'espai: si no, els punts
   saltarien de lloc en arribar al primer o a l'últim. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .origens-punts { display: flex; align-items: center; gap: var(--origens-fletxa-aire); }
  .origens-pista { flex: 1 1 auto; min-width: 0; }
}
.origens-fletxa { flex: none; display: flex; justify-content: center; }
.origens-fletxa[hidden] { display: flex; visibility: hidden; }
/* Per sota de 1200 la pista és justa: fletxes i aire una mica més petits. */
@media (max-width: 1199px) {
  .origens-punts { --origens-fletxa-aire: .75rem; }
  .origens-fletxa img { width: 1.75rem; height: 1.75rem; }
}
.origens-finestra { overflow: hidden; }
.origens-carril {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.origens-fitxa {
  flex: 0 0 100%;
  min-width: 100%;
}
.origens-text {
  background: var(--escairador-color-beix-clar);
  /* El títol va centrat entre la vora de dalt de la franja i el text: l'aire
     que hi havia —el farciment de dalt més el que el separava del text— es
     reparteix a parts iguals a sobre i a sota. Abans quedava enganxat al
     text amb tot el buit a dalt. */
  --origens-titol-marge: calc((var(--origens-farcit) + var(--origens-titol-aire)) / 2);
  padding: calc(var(--origens-titol-marge) + .5rem) 0;   /* el mateix aire a baix que a dalt */
}
.origens-text h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--origens-titol-fitxa);
  line-height: var(--escairador-alcada-titol);
  color: var(--escairador-color-principal);
  text-align: center;
  margin: 0 0 var(--origens-titol-marge);
}
/* El número va amb el títol i fa la seva mateixa mida: només se'n separa
   per un espai. */
.origens-text h2 span { margin-right: .5rem; }

.origens-columnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 8rem;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--origens-cos);
  line-height: 1.3;
  color: var(--escairador-color-principal);
}
/* Justificat: així les dues columnes queden rectes pels dos costats i
   arriben net fins als laterals de la secció. */
.origens-columnes p { margin: 0; text-align: justify; text-wrap: pretty; }

.origens-foto {
  display: block;
  width: 100%;
  height: clamp(360px, 52vh, 620px);
  object-fit: cover;
  /* Enquadrament cap amunt: retallant pel centre, en pantalles molt amples
     es menjava el cap de les persones de la foto del punt 03. */
  object-position: center 30%;
}
/* Enquadraments propis, mirats sobre la llenca panoràmica de l'ordinador:
   a la pallissa hi ha de sortir el garbell, el molí es veu millor per baix,
   la parella necessita una mica de marge per sota del cap i a la pasta hi
   han de cabre les dues mans senceres. */
.origens-foto[data-num="01"] { object-position: center 58%; }
.origens-foto[data-num="02"] { object-position: center 62%; }
.origens-foto[data-num="03"] { object-position: center 45%; }
.origens-foto[data-num="04"] { object-position: center 60%; }
/* A l'ordinador, alta: abans la foto només s'omplia amb el que quedava de
   pantalla, i en un portàtil se'n quedava amb una llenca. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .origens-foto { height: clamp(480px, 66vh, 780px); }
}

/* ·· El plafó de la línia de temps (només a partir de 1024px) ············
   Una secció normal, que fa l'alçada que li cal. Abans s'encaixava en una
   pantalla, i en un portàtil tot s'havia d'encongir alhora perquè hi
   cabés: la lletra, l'aire i la foto. Els punts es canvien clicant-los.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .origens-sticky {
    padding-top: var(--origens-aire-cap);
    background: #fff;
  }
  .origens-encapcalament { margin-bottom: var(--origens-aire-sub); }
}

/* Per sota de 1200 la reixa porta 6,5rem per banda, les fletxes ocupen el
   seu lloc i els punts queden més junts: el títol baixa a 16px, i per sota
   de 1160 a 14px, i continua cabent en una línia sense tocar l'etiqueta del
   costat. */
@media (max-width: 1199px) {
  .origens-linia { --origens-titol: var(--escairador-text-cos-1); }
}
@media (max-width: 1159px) {
  .origens-linia { --origens-titol: var(--escairador-text-petit); }
}
@media (max-width: 1023px) {
  .origens-linia { --origens-titol: var(--escairador-text-petit); }
}


/* ·· Apilat: mòbil, tauleta i qui demana menys moviment ·················· */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .origens-scroll { height: auto !important; }
  .origens-finestra { overflow: visible; }
  .origens-carril { display: block; transform: none !important; }
  /* Sense separació: la foto d'un punt enllaça amb el text del següent i
     desapareix la franja blanca buida que quedava entremig. */
  .origens-fitxa { min-width: 0; margin-bottom: 0; }
  /* Aire per al títol de la secció, que quedava enganxat a la capçalera */
  .origens-sticky { padding-top: 2.75rem; }
  /* Apilat, la secció no porta l'aire de l'ordinador: el subtítol quedava a
     2-4px de l'etiqueta del primer punt i els números a 9px de la franja
     beix. El mateix aire a dalt i a baix. */
  .origens-encapcalament { margin-bottom: 1rem; }
  .origens-punts { margin-bottom: 2.375rem; }
  .origens-fletxa,
  .origens-fletxa[hidden] { display: none; }
  .origens-linia { --origens-farcit: 2.5rem; }
  .origens-linia { --origens-titol-aire: 1rem; }
  /* Justificat en columna estreta deixa forats lletjos entre paraules.
     I una columna sola, estreta, demana una mica més d'interlineat que les
     dues de l'ordinador. */
  .origens-columnes p { text-align: left; }
  .origens-columnes { line-height: 1.45; }
  .hero-entradeta { font-size: 1.0625rem; }
  .origens-columnes { grid-template-columns: 1fr; gap: 1rem; }
}

/* Al mòbil la línia de temps no hi cap —quatre títols en una línia no
   caben a cap mida de l'escala—: es treu i queden les seccions, una sota
   l'altra, sense el número. El blanc de sota l'encapçalament és el mateix
   que el de sobre. */
@media (max-width: 839px) {
  .origens-punts { display: none; }
  .origens-encapcalament { margin-bottom: 2.75rem; }
  .origens-text h2 span { display: none; }
}

/* ── Recepta: fitxa de detall (receptes/detail.html) ───────────────────────
   El text viu dins de les cantonades del web i les fotos del pas a pas van a
   sang, amb el peu centrat a sota. Els botons d'anterior/següent són els
   mateixos que al blog (.post-nav-*).
   ------------------------------------------------------------------------ */

/* El capçal fix passa per sobre de la portada i el seu text és blanc. Una
   ombra a la franja de dalt el fa llegible sigui quina sigui la foto, sense
   enfosquir el plat. */
.recepta-portada {
  display: block;
  position: relative;
  background: var(--escairador-color-beix-fons);
}
.recepta-portada::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Al mòbil la portada és baixa i 180px se'n menjaven massa. */
  height: min(180px, 40%);
  background: linear-gradient(to bottom, rgba(25, 16, 14, .55) 0%, rgba(25, 16, 14, 0) 100%);
  pointer-events: none;
}
.recepta-portada img {
  display: block;
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover;
  object-position: center;
}


.recepta-titol {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  color: var(--escairador-color-principal);
  max-width: 56rem;
  margin: 3.5rem 0 0;
}
.recepta-entradeta {
  max-width: 46rem;
  margin: 1.25rem 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--escairador-color-text-opinio);
}

.recepta-cos { padding: 2.5rem 0 1rem; }

/* ·· Text ································································ */
.recepta-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--escairador-color-principal);
}
.recepta-text > * { max-width: 56rem; }
.recepta-text p { margin: 0 0 1.15rem; }
.recepta-text > *:last-child { margin-bottom: 0; }

/* Al disseny «Ingredients» i «Preparació» són negretes, no titulars grossos */
.recepta-text h2,
.recepta-text h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--escairador-color-principal);
  margin: 2rem 0 .35rem;
}
.recepta-text > *:first-child { margin-top: 0; }

/* El reset del Tailwind treu els pics de totes les llistes del web. Als
   ingredients i als passos d'una recepta hi fan falta: hi havia el color
   del pic escrit, però no es veia enlloc. */
.recepta-text ul,
.recepta-text ol { margin: 0 0 1.15rem; padding-left: 1.5rem; }
.recepta-text ul { list-style: disc; }
.recepta-text ol { list-style: decimal; }
.recepta-text li { margin-bottom: .15rem; }
.recepta-text ul li::marker { color: var(--escairador-color-principal); }
.recepta-text strong { font-weight: 700; }
.recepta-text a {
  color: var(--escairador-color-principal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recepta-text a:hover { color: var(--escairador-color-accent); }
/* Els que porten a un producte de la botiga, en terracota: així es
   distingeixen d'un enllaç qualsevol dins del text. */
.recepta-text a.recepta-enllac { color: var(--escairador-color-accent); }
.recepta-text a.recepta-enllac:hover { color: var(--escairador-color-principal); }

/* ·· Ingredients i preparació, un al costat de l'altre ···················
   Els passos a l'esquerra, que és on hi ha el gruix del text, i els
   ingredients a la dreta dins d'una caixa del mateix beix i amb les
   mateixes cantonades que les targetes del receptari. A l'HTML els
   ingredients van primer —és com estan escrits— i la reixa els mou a la
   dreta; apilats, doncs, es llegeixen abans, que és l'ordre d'una recepta.
   ------------------------------------------------------------------------ */
.recepta-apartats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: 2.5rem 3.5rem;
  align-items: start;
}
.recepta-passos { grid-column: 1; grid-row: 1; }
.recepta-ingredients {
  grid-column: 2;
  grid-row: 1;
  background: var(--escairador-color-beix-fons);
  border-radius: 1rem;
  padding: 1.75rem 1.85rem;
}
/* Dins de la caixa el text ja no ha de mesurar-se per la columna de
   lectura: l'amplada la marca la caixa. */
.recepta-ingredients .recepta-text > * { max-width: none; }
.recepta-ingredients .recepta-text ul { margin-bottom: 0; }
.recepta-ingredients .recepta-text ul li::marker { color: var(--escairador-color-accent); }

/* Per sota d'uns 980px la columna dels passos queda tan estreta com la
   caixa dels ingredients: val més apilar-los. */
@media (max-width: 979px) {
  .recepta-apartats { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .recepta-passos { grid-column: 1; grid-row: 2; }
  .recepta-ingredients { grid-column: 1; grid-row: 1; padding: 1.5rem 1.5rem; }
}

/* ·· Les fotos, a sota dels botons ······································
   Una sola va a sang i enganxada al peu de pàgina. Més d'una van en una
   galeria, una a la vegada i amb les mateixes fletxes que els carrusels:
   posades en fila, eren franges a sang que no s'acabaven mai.
   ------------------------------------------------------------------------ */
.recepta-figura { margin: 2.75rem 0; }
.recepta-foto-final .recepta-figura { margin-bottom: 0; }
/* Les fotos són 3:2 i a tota l'amplada es retallaven molt: a 1440 feien
   una llenca de 1425x378. Més altes, se'n veu bona part sense que ocupin
   més que dos terços de la pantalla. */
.recepta-foto-final,
.recepta-galeria { --recepta-foto-alt: clamp(320px, 62vh, 680px); }
/* La galeria fa com la foto sola: a sang i tocant el peu. */
.recepta-galeria { padding-top: 2.75rem; }
.recepta-galeria .recepta-figura { margin: 0; }
.recepta-galeria-pas { position: relative; }
/* Les fletxes de la galeria de producte, a sobre de la foto i centrades amb
   ella (el peu va a sobre, per això es mesura des de baix). */
.recepta-galeria .gallery-arrow {
  top: auto;
  bottom: calc(var(--recepta-foto-alt) / 2);
  transform: translateY(50%);
}
/* Les fletxes s'alineen amb els marges de la pàgina: la vora de la fletxa
   cau on comença i on s'acaba el text de la recepta. Són els mateixos marges
   de la reixa (tailwind.css), també quan la pàgina fa més de 1600px i el
   contingut queda centrat. */
.recepta-galeria-pas { --pagina-marge: 1.5rem; }
@media (min-width: 640px) { .recepta-galeria-pas { --pagina-marge: 2.5rem; } }
@media (min-width: 1024px) { .recepta-galeria-pas { --pagina-marge: 5rem; } }
@media (min-width: 1024px) and (max-width: 1399px) { .recepta-galeria-pas { --pagina-marge: 6.5rem; } }
.recepta-galeria .gallery-arrow.is-prev { left: max(var(--pagina-marge), calc((100% - 1600px) / 2 + var(--pagina-marge))); }
.recepta-galeria .gallery-arrow.is-next { right: max(var(--pagina-marge), calc((100% - 1600px) / 2 + var(--pagina-marge))); }
.recepta-figura img {
  display: block;
  width: 100%;
  height: var(--recepta-foto-alt, clamp(220px, 42vh, 460px));
  object-fit: cover;
}
.recepta-figura figcaption {
  margin: 0 0 .85rem;
  padding-inline: 1.5rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: var(--escairador-color-text-opinio);
}

@media (max-width: 639px) {
  /* La portada no s'ha de menjar la pantalla: el contingut ha de treure el nas */
  .recepta-portada img { height: clamp(230px, 34vh, 320px); }
  .recepta-titol { margin-top: 2.5rem; }
  .recepta-text { font-size: 1.0625rem; }
  .recepta-figura { margin: 2rem 0; }
  /* Al mòbil l'alçada va amb l'amplada: gairebé la proporció de la foto. */
  .recepta-foto-final,
  .recepta-galeria { --recepta-foto-alt: clamp(220px, 70vw, 340px); }
  .recepta-figura img { height: var(--recepta-foto-alt, clamp(190px, 30vh, 280px)); }
  .recepta-galeria { padding-top: 2rem; }
}
/* Les fotos van a sang: el peu, de vora a vora, tocava els laterals de la
   pantalla. Porta el mateix marge que la resta de la pàgina. */
@media (min-width: 640px) {
  .recepta-foto-final .recepta-figura figcaption,
  .recepta-galeria .recepta-figura figcaption { padding-inline: 2.5rem; }
}
@media (min-width: 1024px) {
  .recepta-foto-final .recepta-figura figcaption,
  .recepta-galeria .recepta-figura figcaption { padding-inline: 5rem; }
}

/* ── Com ho fem: icones dels quatre pilars ─────────────────────────────────
   La primera és un SVG en línia de 80px; les altres tres són PNG amb
   transparència. Es dibuixen a la mateixa alçada perquè la fila quedi
   alineada, sense deformar-les.
   ------------------------------------------------------------------------ */
.comhofem-icona {
  display: block;
  width: auto;
  height: 80px;
  object-fit: contain;
}

/* ── Botiga: fitxes de producte alineades ─────────────────────────────────
   Cada fitxa té cinc parts (foto, títol, descripció, preus i botons) i
   ocupa cinc files de la graella. Amb subgrid, totes les fitxes d'una
   mateixa fila comparteixen les alçades: els títols queden a la mateixa
   línia, els preus també, i els botons al mateix nivell encara que a
   alguna fitxa li falti la descripció.
   ------------------------------------------------------------------------ */
/* La separacio entre files de productes no pot anar al row-gap: amb subgrid
   tambe separa les files de dins de la fitxa i el titol, la descripcio i els
   preus se separen de la imatge. Va al marge de sota de la fitxa, que si que
   queda per fora. */
.botiga-graella { column-gap: .75rem; row-gap: 0; }

.botiga-fitxa {
  display: flex;
  flex-direction: column;
  row-gap: 0;
  /* Sense min-width la fitxa imposa el seu contingut a la columna i la
     desborda; amb 0 s'adapta a l'amplada que li toca. */
  min-width: 0;
  padding-bottom: 4.5rem;
  /* La fitxa és més estreta que la columna: els títols hi fan dues línies
     en comptes d'una de llarguíssima, i el botó de veure producte —que
     s'estira fins on arriba— queda més curt. El coixí es queda a 2rem
     mentre hi càpiguen els dos botons de sota en una fila; a les columnes
     més justes cedeix perquè el del cistell no salti de línia. */
  padding-inline: min(2rem, calc((100% - 16rem) / 2));
}
.botiga-fitxa-titol,
.botiga-fitxa-descripcio,
.botiga-fitxa-preus,
.botiga-fitxa-accions {
  text-align: center;
}
.botiga-fitxa-titol { padding-top: .55rem; }
.botiga-fitxa-descripcio { padding-top: .25rem; }
.botiga-fitxa-preus { padding-top: .25rem; }
.botiga-fitxa-accions {
  padding: .5rem 0 0;
  justify-content: center;
}

/* Hi ha categories senceres sense descripcio (cereals en gra, sèmoles,
   farines). Quan cap fitxa de la graella no en té, la fila es treu del tot
   i el contingut s'ajunta amb la imatge. Es mira graella per graella: si
   n'hi ha una de sola amb text, la fila es queda i totes segueixen
   alineades. */
.botiga-graella:not(:has(.botiga-fitxa-descripcio:not(:empty)))
  .botiga-fitxa-descripcio { display: none; }
.botiga-fitxa-preus:empty { padding-top: 0; }

/* Si la fitxa s'estreny tant que els dos botons no hi caben de costat, el
   del cistell baixa a la línia de sota en comptes de sortir per la dreta. */
.botiga-fitxa-accions { flex-wrap: wrap; }
.botiga-fitxa-accions > a { flex: 1 1 auto; justify-content: center; }

@supports (grid-template-rows: subgrid) {
  .botiga-graella > .botiga-fitxa {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
  /* Els botons s'enganxen a baix de la seva fila */
  .botiga-fitxa-accions { align-self: end; }
}

/* Sense subgrid: els botons van a baix i la resta queda com estava */
@supports not (grid-template-rows: subgrid) {
  .botiga-fitxa-accions { margin-top: auto; }
}

/* ── Cistell: la capçalera de la taula en pantalles estretes ───────────────
   Els títols van en versaleta, l'escriptura més ampla que hi ha, i en un
   mòbil «Preu unit.» i «Total» s'acabaven tocant: quedaven a dos píxels i
   es llegien com un sol bloc.

   Dues coses. El cos baixa un pas de l'escala —el mateix que les
   etiquetes de les targetes de recepta—, i «Total» porta un coixí a
   l'esquerra. El coixí eixampla la columna per aquell costat i el text,
   alineat a la dreta com les xifres de sota, no es mou: l'aire surt d'on
   sobrava, no de la columna del producte, que ha de poder respirar.
   ------------------------------------------------------------------------ */
@media (max-width: 639px) {
  .cistell-taula thead th { font-size: .8125rem; }
  .cistell-taula thead th:nth-child(4) { padding-left: .75rem; }
}

/* ── Punts de venda: llista i mapa (partial punts_venda/_seccio.html) ───────
   A partir de 900px, llista a l'esquerra i mapa a la dreta, tots dos de la
   mateixa alçada. Per sota s'apilen, amb el mapa a dalt: en un mòbil interessa
   més veure on cau el punt que llegir la llista sencera.
   ------------------------------------------------------------------------ */

.punts-venda {
  background: var(--escairador-color-beix-fons);
  padding: 4rem 0 4.5rem;
}

.punts-capcalera { margin-bottom: 2rem; }
.punts-capcalera h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--escairador-text-titol-seccio);
  line-height: var(--escairador-alcada-titol);
  color: var(--escairador-color-principal);
  margin: 0;
}

.punts-cos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* ·· Panell de la llista ················································· */
.punts-panell {
  display: flex;
  flex-direction: column;
  min-height: 0;              /* perquè la llista pugui fer scroll dins del grid */
  background: #fff;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 14px;
  overflow: hidden;
}

.punts-filtres {
  display: grid;
  gap: .6rem;
  padding: 1rem;
  border-bottom: 1px solid var(--escairador-color-beix-fons);
}

.punts-cerca {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .85rem;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 9px;
  color: var(--escairador-color-accent);
}
.punts-cerca:focus-within { border-color: var(--escairador-color-principal); }
.punts-cerca input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  font-size: .95rem;
  color: var(--escairador-color-principal);
}
.punts-cerca input::placeholder { color: var(--escairador-color-accent); }

.punts-comarca select {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 9px;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: .95rem;
  color: var(--escairador-color-principal);
  cursor: pointer;
}
.punts-comarca select:focus { outline: 0; border-color: var(--escairador-color-principal); }

.punts-recompte {
  margin: 0;
  padding: 0 1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: .8rem;
  color: var(--escairador-color-accent);
}
.punts-recompte:empty { display: none; }

/* ·· Fitxes ······························································ */
.punts-llista {
  list-style: none;
  margin: 0;
  padding: .5rem 0 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* Apilada, la llista ha de fer scroll dins seu: amb 83 fitxes obertes la
     pagina es fa inacabable i el mapa queda perdut a dalt de tot. */
  max-height: 55vh;
}

.punts-fitxa {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
  border-left: 3px solid transparent;
}
.punts-fitxa[hidden] { display: none; }
.punts-fitxa:hover { background: var(--escairador-color-beix-fons); }
.punts-fitxa.es-actiu {
  background: var(--escairador-color-beix-fons);
  border-left-color: var(--escairador-color-accent);
}

.punts-fitxa-boto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .8rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
}
.punts-nom {
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--escairador-color-principal);
}
.punts-adreca,
.punts-lloc {
  font-size: .85rem;
  line-height: 1.4;
  color: var(--escairador-color-text-opinio);
}
.punts-lloc { color: var(--escairador-color-accent); }


/* Els enllacos de la bombolla: el nom porta a la web i l'adreca a com
   arribar-hi. Es subratllen en passar-hi per sobre perque es vegi que es
   poden clicar. */
.punts-venda .leaflet-popup-content a {
  color: var(--escairador-color-principal);
  text-decoration: none;
}
.punts-venda .leaflet-popup-content a:hover { text-decoration: underline; }
.punts-venda .leaflet-popup-content strong a { font-weight: 700; }

.punts-web {
  flex-shrink: 0;
  padding: .3rem .7rem;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--escairador-color-principal);
  text-decoration: none;
}
.punts-web:hover {
  background: var(--escairador-color-principal);
  border-color: var(--escairador-color-principal);
  color: #fff;
}

.punts-buit {
  margin: 0;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: .92rem;
  color: var(--escairador-color-text-opinio);
}

/* ·· Mapa ································································ */
.punts-mapa {
  /* Apilat, el mapa va a dalt: en un mòbil interessa més veure on cau el punt
     que llegir la llista sencera. A partir de 900px torna al seu lloc. */
  order: -1;
  height: 340px;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;                 /* que no tapi el carret ni el menú */
}

.punts-marcador span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--escairador-color-principal);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.punts-venda .leaflet-popup-content {
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--escairador-color-text-opinio);
}
.punts-venda .leaflet-popup-content strong { color: var(--escairador-color-principal); }

@media (min-width: 900px) {
  .punts-cos {
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 1.5rem;
    height: 620px;
  }
  .punts-panell { height: 100%; }
  .punts-llista { max-height: none; }   /* aqui l'alcada la marca el panell */
  .punts-mapa { order: 0; height: 100%; }
  .punts-filtres { grid-template-columns: 1fr 1fr; }
}

/* ── Com ho fem: els sis passos del procés ─────────────────────────────────
   A l'escriptori, la foto ocupa tota la banda i es queda quieta mentre es fa
   scroll. Al mòbil això no serveix: amb la pantalla estreta, retallar la foto
   per omplir la banda en deixa veure una tira del mig i no s'entén què hi
   surt. Allà es mostra sencera, amb el text a sota.
   ------------------------------------------------------------------------ */

.comhofem-pas {
  --proporcio: 1.5;              /* ample dividit per alçada de la foto */
  /* Les fotos originals fan 3600px i fins a 2,7 MB: cada pas en demana una
     còpia de 1920px (1080 al mòbil) en format i qualitat automàtics. */
  background-image: var(--foto);
  min-height: 36.3rem;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.comhofem-pas.es-vertical { --proporcio: 0.667; }
/* El pas 03: el que explica la foto és a la part de baix, i retallant pel
   mig es perdia. */
.comhofem-pas.es-baixa { background-position: center 75%; }

@media (max-width: 767px) {
  .comhofem-pas {
    background-image: var(--foto-mobil, var(--foto));
    min-height: 0;
    background-attachment: scroll;   /* el parallax al mòbil no funciona bé */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    /* Totes reserven el mateix: dues de les fotos són verticals i, amb la
       seva proporció, aquelles seccions quedaven el doble d'altes que la
       resta. Amb `contain` les verticals es veuen senceres, més estretes,
       però la secció fa el mateix que les altres. */
    padding-top: calc(100vw / 1.5);
  }
  /* El degradat serveix per fer llegible el text a sobre de la foto. Amb el
     text a sota, només l'enfosquiria. */
  /* Amb la foto sencera a dalt i el text a sota, ancorar-la a baix la
     posaria damunt del text. */
  .comhofem-pas.es-baixa { background-position: top center; }
  /* Les dues fotos verticals (03 i 05) es veien estretes, amb franges a banda
     i banda. Ara fan tota l'amplada i se'n veu la part central: la foto és
     més alta que l'espai reservat i es desplaça perquè el seu centre caigui
     al centre d'aquest espai. */
  .comhofem-pas.es-vertical {
    background-size: 100% auto;
    background-position: center calc((100vw / 1.5 - 100vw / var(--proporcio)) / 2);
  }
  .comhofem-pas-vel { display: none; }
  .comhofem-pas-text {
    background-color: #5d3a33;
    /* Els títols i els textos no fan totes les mateixes línies, i sense
       això unes seccions quedarien més altes que les altres. */
    min-height: 19.5rem;
  }
}

/* ── Comptes de client al checkout ─────────────────────────────────────────
   El plafó de dalt (entrar o seguir com a convidat), les caselles per desar
   les dades i els botons d'edició quan ja s'ha entrat.
   ------------------------------------------------------------------------ */

.compte-plafo {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.35rem;
  background: var(--escairador-color-beix-fons);
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 12px;
  font-family: 'Open Sans', sans-serif;
}

.compte-capcalera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.compte-titol {
  margin: 0 0 .15rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--escairador-color-principal);
}
.compte-text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--escairador-color-text-opinio);
}

.compte-boto {
  padding: .55rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--escairador-color-principal);
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.compte-boto:hover { opacity: .88; }
.compte-boto:disabled { opacity: .55; cursor: default; }

.compte-enllac {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--escairador-color-accent);
  text-decoration: underline;
  cursor: pointer;
}
.compte-enllac:hover { color: var(--escairador-color-principal); }

/* ·· Entrada ····························································· */
.compte-entrada {
  display: grid;
  gap: .85rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--escairador-color-beix-clar);
}
.compte-entrada-peu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.compte-etiqueta {
  display: block;
  margin-bottom: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--escairador-color-principal);
}
.compte-camp {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--escairador-color-beix-clar);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: .95rem;
  color: var(--escairador-color-principal);
}
.compte-camp:focus { outline: 0; border-color: var(--escairador-color-principal); }
.compte-camp.te-error { border-color: #c0392b; }

/* El botó de veure la contrasenya, dins del camp. */
.compte-clau-camp { position: relative; }
.compte-clau-camp .compte-camp { padding-right: 5rem; }
.compte-ull {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  padding: .2rem .45rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--escairador-color-accent);
  cursor: pointer;
}
.compte-ull:hover { color: var(--escairador-color-principal); }

/* ·· Registre i edició ··················································· */
.compte-registre {
  margin-bottom: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--escairador-color-beix-fons);
  border-radius: 12px;
  font-family: 'Open Sans', sans-serif;
}
.compte-casella {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  color: var(--escairador-color-principal);
  cursor: pointer;
}
/* Quan el correu ja te compte, la casella queda fora de joc. L'avis de
   sota explica per que i ofereix entrar-hi. */
.compte-casella.es-bloquejada {
  cursor: default;
  opacity: .55;
}
.compte-claus {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .compte-claus { grid-template-columns: 1fr 1fr; }
}

.compte-nota {
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--escairador-color-accent);
}
.compte-error {
  margin: .3rem 0 0;
  font-size: .8rem;
  color: #b91c1c;
}
.compte-avis {
  margin: 0 0 .75rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: #fee2e2;
  font-size: .87rem;
  color: #991b1b;
}

.compte-edicio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.compte-edicio-botons {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

/* Els camps bloquejats es veuen com a text, no com a formulari. */
.es-bloquejat {
  background-color: var(--escairador-color-beix-fons) !important;
  cursor: default;
}

/* ── Icones de les formes de pagament (targeta i Bizum) ────────────────────
   Totes dues ocupen la mateixa caixa, la de la icona de la targeta, perque
   el text que ve despres comenci al mateix lloc. El simbol de Bizum es mes
   estret que alt; amb contain es dibuixa sencer i centrat, sense deformar-se. */
.icona-pagament {
  display: block;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}
/* Sobre el boto de fons fosc la icona ha de ser blanca. Els dos dibuixos
   son d'un sol color, o sigui que amb passar-los a blanc n'hi ha prou. */
.icona-pagament.es-clara {
  filter: brightness(0) invert(1);
}

/* El botó de finalitzar la compra, apagat (codi postal de fora d'Espanya). */
form[data-valida] button[type="submit"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* La província del checkout: surt del codi postal i no s'escriu. */
.camp-formulari[readonly] {
  background: #f4ede4;
  cursor: default;
}