/* ==========================================================================
   JUL Positive Design — Home (v2)
   Retail editorial a sang: 100vw, sense espais laterals ni entre fotos,
   tipografia petita, titulars en MAJÚSCULES amb la tipo del logo,
   cap cantonada arrodonida. Mobile-first · breakpoints 768px i 1024px.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   TT Rationalist ExtraLight: font corporativa de titulars (llicència client).
   WP: pujar el woff2 al tema fill i declarar-la a theme.json/custom CSS. */
@font-face {
  font-family: "TT Rationalist";
  src: url("../assets/fonts/TTRationalist-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset i base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cru);
  color: var(--tinta);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Gra subtil de tela per tota la pàgina */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Titulars: MAJÚSCULES espaiades, com el logo */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
  line-height: 1.35;
}
h1 { font-size: var(--titol-h1); }
h2 { font-size: var(--titol-h2); }

:focus-visible {
  outline: 2px solid var(--teula-fosc);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.etiqueta {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--teula-fosc);
  margin-bottom: var(--space-1);
}

/* ---- Botons i enllaços ---------------------------------------------------- */
.boto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  border: 1px solid transparent;
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.boto-fosc { background: var(--tinta); color: var(--cru); }
.boto-fosc:hover { background: var(--teula-fosc); }

.enllac-subratllat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-out);
}
.enllac-subratllat:hover { color: var(--teula-fosc); }

/* ---- Barra d'anunci -------------------------------------------------------- */
.anunci {
  background: var(--groc);
  color: var(--tinta);
  text-align: center;
  padding: 0.45rem var(--vora);
}
.anunci p {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Capçalera (estreta, full width) ------------------------------------------ */
.capcalera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cru) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.capcalera.amb-ombra { box-shadow: 0 1px 0 var(--linia), 0 6px 18px rgba(33, 27, 19, 0.07); }

.capcalera-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding-inline: var(--vora);
}

.logo { display: inline-flex; align-items: center; gap: 0.6rem; }

.logo-quadrat {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  background: var(--tinta);
  color: var(--cru);
  outline: 1px solid var(--cru);
  outline-offset: -4px;
}

.logo-text {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--tinta-suau);
}

.nav { display: none; }

.capcalera-accions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.icona-boto {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.icona-boto:hover { color: var(--teula-fosc); }
.icona-boto svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cistell-num {
  position: absolute;
  top: 0;
  right: -0.05rem;
  min-width: 0.85rem;
  height: 0.85rem;
  padding-inline: 0.15rem;
  border-radius: 999px; /* únic element rodó: comptador Woo */
  background: var(--teula);
  color: var(--cru);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 0.85rem;
  text-align: center;
}

/* Menú mòbil */
.menu-boto {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-boto span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--tinta);
  transition: transform var(--dur-1) var(--ease-out);
}
.menu-boto[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-boto[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav.oberta {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cru);
  border-bottom: 1px solid var(--linia);
  padding: var(--space-2) var(--vora) var(--space-3);
}
.nav.oberta ul { display: grid; gap: 0.7rem; }
.nav.oberta a {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
}

/* ---- Intro ------------------------------------------------------------------------ */
.intro {
  text-align: center;
  padding: clamp(2rem, 4vw, 3.25rem) var(--vora) clamp(2rem, 4vw, 2.75rem);
}
.intro h1 .accent { color: var(--teula-fosc); }
.intro-lead {
  max-width: 34rem;
  margin: 0.9rem auto 1.4rem;
  font-size: var(--text-sm);
  color: var(--tinta-suau);
}

/* Entrada orquestrada */
.heroi-anim {
  opacity: 0;
  transform: translateY(14px);
  animation: heroiEntra var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroiEntra { to { opacity: 1; transform: none; } }

/* ---- Duo de categories (a sang) ------------------------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--junta);
}

.duo-item {
  display: block;
  min-width: 0;
}
.duo-media { display: block; overflow: hidden; }
.duo-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 62%;
  transition: transform var(--dur-2) var(--ease-out);
}
.duo-item:hover img { transform: scale(1.03); }

.duo-text {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.9rem 1.9rem; /* enganxat a la foto, aire abans de la secció següent */
}
.duo-titol {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
}
.duo-sub {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}
.duo-item:hover .duo-sub { color: var(--teula-fosc); }
.duo-cta { display: none; }

/* ---- Bandes de títol de secció ------------------------------------------------------- */
.banda-titol {
  border-top: 1px solid var(--linia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.75rem var(--vora);
  border-bottom: 1px solid var(--linia);
}
.banda-titol h2 { font-size: var(--titol-h3); }

/* ---- Graella de productes (a sang, sense espais) --------------------------------------- */
.graella {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--junta);
  background: var(--cru);
}

.tile { min-width: 0; }

.tile-imatge {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3; /* més altes: les fotos són verticals i així es veu tota la bossa */
  background: var(--cru-2);
}
.tile-imatge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transition: transform var(--dur-2) var(--ease-out);
}
.tile:hover .tile-imatge img { transform: scale(1.04); }

.tile-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem 0.6rem;
  background: var(--teula);
  color: var(--cru);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tile-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 1.2rem;
}
.tile-nom {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.tile-preu {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Oferta: preu anterior ratllat + preu rebaixat en vermell */
.tile-preu del {
  font-weight: 400;
  color: var(--tinta-suau);
}
.preu-oferta { color: var(--vermell); }

.tile-tag-oferta { background: var(--vermell); }

/* ---- Filosofia (negre del logo) --------------------------------------------------------- */
.filosofia {
  background: var(--negre);
  color: var(--cru);
  padding: clamp(2rem, 4vw, 3rem) var(--vora) clamp(2.25rem, 4vw, 3.25rem);
}
.filosofia .etiqueta { color: var(--groc); }
.filosofia-cap { margin-bottom: var(--space-3); }

.valors {
  display: grid;
  gap: var(--space-3);
}
.valor {
  border-top: 1px solid rgba(246, 241, 230, 0.3);
  padding-top: var(--space-2);
}
.valor h3 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--titol-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
  margin-bottom: 0.5rem;
}
.valor p {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cru) 80%, var(--negre));
  max-width: 30rem;
}

/* ---- Arrels (split a sang) -------------------------------------------------------------------- */
.arrels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.arrels-imatge img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Variant: foto sencera, sense retall ni límit d'alçada (Juli a la pàgina de marca) */
.arrels-imatge-alta img { aspect-ratio: auto; height: auto; }

.arrels-text {
  padding: clamp(2rem, 4vw, 3.5rem) var(--vora);
  align-self: center;
  max-width: 34rem;
}
.arrels-text h2 { margin-bottom: var(--space-2); }
.arrels-text p {
  font-size: var(--text-sm);
  color: var(--tinta-suau);
  margin-bottom: var(--space-2);
}

/* ---- Butlletí -------------------------------------------------------------------------------- */
.butlleti {
  background: var(--cru-2);
  border-top: 1px solid var(--linia);
  padding: clamp(2.25rem, 4vw, 3.25rem) var(--vora);
  text-align: center;
}
.butlleti-inner p {
  font-size: var(--text-sm);
  color: var(--tinta-suau);
  max-width: 28rem;
  margin: 0.6rem auto 0;
}

.butlleti-form {
  display: flex;
  flex-direction: column;
  gap: var(--junta);
  max-width: 26rem;
  margin: var(--space-3) auto 0;
}
.butlleti-form input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid var(--linia);
  background: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--tinta);
}
.butlleti-form input::placeholder { color: var(--tinta-suau); }
.butlleti-form input:focus-visible { outline-offset: 0; }

/* ---- Confiança --------------------------------------------------------------------------------- */
.confianca {
  border-top: 1px solid var(--linia);
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--vora);
}
.confianca-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
}
.confianca-item svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--teula-fosc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.4rem;
}
.confianca-item h3 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}
.confianca-item p { font-size: var(--text-xs); color: var(--tinta-suau); }

/* ---- Instagram (graella a sang) ---------------------------------------------------------------------- */
.insta { border-top: 1px solid var(--linia); }
.insta .banda-titol { border-top: 0; }

.insta-graella {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--junta);
}
.insta-graella li { min-width: 0; }
.insta-graella a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.insta-graella img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transition: transform var(--dur-2) var(--ease-out);
}
.insta-graella a:hover img { transform: scale(1.05); }

.insta-icona {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(33, 27, 19, 0.28);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.insta-graella a:hover .insta-icona,
.insta-graella a:focus-visible .insta-icona { opacity: 1; }
.insta-icona svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--cru);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Peu de pàgina ---------------------------------------------------------------------------------- */
.peu {
  background: var(--cru-2);
  border-top: 1px solid var(--linia);
  padding-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

.peu-columnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  padding-inline: var(--vora);
}
.peu-marca { grid-column: 1 / -1; max-width: 22rem; }
.peu-marca p { margin-top: 0.7rem; font-size: var(--text-xs); color: var(--tinta-suau); }

.peu h3 {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--tinta-suau);
  margin-bottom: 0.7rem;
}
.peu nav ul { display: grid; gap: 0.4rem; }
.peu nav a { font-size: var(--text-xs); }
.peu nav a:hover { color: var(--teula-fosc); }

.peu-legal {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--linia);
  padding: 0.8rem var(--vora);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--tinta-suau);
}
.peu-legal ul { display: flex; gap: var(--space-3); }
.peu-legal a:hover { color: var(--teula-fosc); }

/* ---- Reveal en fer scroll ------------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal].es-visible { opacity: 1; transform: none; }

/* ---- Utilitats responsive ------------------------------------------------------------------------------- */
.amaga-mobil { display: none; }

/* ==================================== ≥ 768px ==================================== */
@media (min-width: 768px) {
  .amaga-mobil { display: inline-grid; }

  .duo-item img { aspect-ratio: 4 / 3.1; }
  .duo-text { padding: 2.2rem 1.2rem 1rem; }
  .duo-cta { display: inline; }

  .graella { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .butlleti-form { flex-direction: row; }

  .confianca-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .insta-graella { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .valors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

  .arrels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrels-imatge { max-height: 38rem; }
  .arrels-imatge img { aspect-ratio: auto; height: 100%; max-height: 38rem; object-position: 50% 55%; }
  .arrels-imatge-alta, .arrels-imatge-alta img { max-height: none; }
  .arrels-imatge-alta img { height: auto; }
  .arrels-text { justify-self: center; padding-inline: clamp(2rem, 5vw, 4.5rem); }

  .peu-columnes { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .peu-marca { grid-column: auto; }
}

/* ==================================== ≥ 1024px ==================================== */
@media (min-width: 1024px) {
  .menu-boto { display: none; }

  .valors { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .nav { display: block; flex: 1; }
  .nav ul {
    display: flex;
    justify-content: center;
    gap: clamp(0.9rem, 2vw, 1.9rem);
  }
  .nav a {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: 0.3rem;
    position: relative;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--teula-fosc);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-1) var(--ease-out);
  }
  .nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ---- Moviment reduït --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroi-anim,
  [data-reveal] {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .duo-item img, .tile-imatge img, .insta-graella img { transition: none; }
}

/* ==========================================================================
   BOTIGA — llistat de productes
   ========================================================================== */
.filtres {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.6rem var(--vora);
  border-bottom: 1px solid var(--linia);
}
.filtres-grup { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtre {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--linia);
  background: transparent;
  color: var(--tinta);
  font-family: var(--font-text);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.filtre:hover { border-color: var(--tinta); }
.filtre.actiu { background: var(--tinta); border-color: var(--tinta); color: var(--cru); }
.filtres-ordena {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}

/* ==========================================================================
   FITXA DE PRODUCTE
   ========================================================================== */
.cami {
  padding: 0.65rem var(--vora);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}
.cami a:hover { color: var(--teula-fosc); }
.cami span[aria-hidden] { margin-inline: 0.35rem; }

.producte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.galeria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--junta);
  align-self: start;
}
.galeria li { min-width: 0; }
.galeria img { width: 100%; height: auto; } /* la foto sencera, sense retallar */
.galeria-detall {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.galeria-detall img {
  height: 100%;
  object-fit: cover;
  transform: scale(1.9); /* simula la foto de detall del teixit i l'etiqueta */
  transform-origin: 50% 42%;
}

.producte-cos { padding: 1.5rem var(--vora) 2.25rem; }

.producte-cos h1 { font-size: 1.05rem; }
.producte-ref {
  margin-top: 0.3rem;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}
.producte-preu {
  margin-top: 0.7rem;
  font-size: var(--text-lg);
  font-weight: 600;
}
.producte-lead {
  margin-top: 0.8rem;
  font-size: var(--text-sm);
  color: var(--tinta-suau);
}

.opcio { margin-top: 1.4rem; }
.opcio-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.opcio-label b { font-weight: 600; color: var(--teula-fosc); }

.swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.swatch {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid rgba(33, 27, 19, 0.25);
  background: var(--c, var(--cru));
  cursor: pointer;
}
.swatch-mix { background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.swatch.actiu { outline: 1px solid var(--tinta); outline-offset: 2px; }

.producte-cos .boto { width: 100%; margin-top: 1.5rem; }
.compra-meta {
  margin-top: 0.8rem;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}

.plecs { margin-top: 1.6rem; border-bottom: 1px solid var(--linia); }
.plec { border-top: 1px solid var(--linia); }
.plec summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.plec summary::-webkit-details-marker { display: none; }
.plec summary::after { content: "+"; font-weight: 400; font-size: 1rem; }
.plec[open] summary::after { content: "\2212"; }
.plec-cos { padding: 0 0 1.1rem; font-size: var(--text-sm); color: var(--tinta-suau); }
.plec-cos p { margin-bottom: 0.6rem; }
.plec-cos ul { padding-left: 1rem; list-style: disc; }
.plec-cos li { margin-bottom: 0.3rem; }

/* ==========================================================================
   LA MARCA
   ========================================================================== */
.marca-seccio {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) var(--vora);
}
.marca-seccio h2 { margin-bottom: 1rem; }
.marca-seccio h2:not(:first-child) { margin-top: 2.25rem; }
.marca-seccio + .marca-seccio { padding-top: 0; } /* sense doble espai entre seccions de text */
.marca-seccio p { color: var(--tinta-suau); margin-bottom: 0.9rem; }

.marca-imatge img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 62%;
}

.cita {
  background: var(--negre);
  color: var(--cru);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--vora);
}
.cita p {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(0.95rem, 0.85rem + 0.9vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
  line-height: 1.7;
  max-width: 46rem;
  margin-inline: auto;
}
.cita .etiqueta { color: var(--groc); margin-bottom: 1rem; }

.cta-banda {
  text-align: center;
  border-top: 1px solid var(--linia);
  padding: clamp(2rem, 4vw, 3rem) var(--vora);
}
.cta-banda h2 { margin-bottom: 1.25rem; }

/* ---- Responsive de les planes noves ---- */
@media (min-width: 768px) {
  .producte { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .producte-cos {
    position: sticky;
    top: 4.5rem;
    align-self: start;
    padding: 2rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
  }
}

/* ==========================================================================
   CONTACTE
   ========================================================================== */
.contacte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0 var(--vora) clamp(2.5rem, 5vw, 4rem);
  max-width: 62rem;
  margin-inline: auto;
}

.camp { margin-bottom: 1rem; }
.camp label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.camp input,
.camp textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linia);
  background: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--tinta);
  resize: vertical;
}
.camp input::placeholder,
.camp textarea::placeholder { color: var(--tinta-suau); }

.contacte-info h3 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--titol-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-titol);
  margin-bottom: 0.4rem;
}
.contacte-bloc { border-top: 1px solid var(--linia); padding-block: 1.1rem; }
.contacte-bloc p { font-size: var(--text-sm); color: var(--tinta-suau); }
.contacte-bloc a { text-decoration: underline; text-underline-offset: 3px; }
.contacte-bloc a:hover { color: var(--teula-fosc); }

@media (min-width: 768px) {
  .contacte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-5); }
}

/* ==========================================================================
   BARRA DE COMPRA FIXA (fitxa de producte, només mòbil)
   WP/Woo: sticky add-to-cart — molts temes/plugins ho ofereixen natiu
   ========================================================================== */
.compra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem var(--vora) calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--cru);
  border-top: 1px solid var(--linia);
  box-shadow: 0 -6px 18px rgba(33, 27, 19, 0.08);
}
.compra-fixa-nom {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.compra-fixa-preu { display: block; font-size: var(--text-sm); font-weight: 600; }
.compra-fixa .boto { width: auto; margin: 0; flex-shrink: 0; padding: 0.7rem 1.4rem; }

.te-compra-fixa { padding-bottom: 4.2rem; } /* que la barra no tapi el peu */

@media (min-width: 768px) {
  .compra-fixa { display: none; }
  .te-compra-fixa { padding-bottom: 0; }
}