/*
 * WooCommerce Overrides
 * - Classic cart/checkout (Blocks disabled)
 * - Accessible focus
 * - Minimal, scalable, design-token driven
 */

 /* ------------------------------------------------------------
  * Single product layout (controlled width via your .container)
  * Goal: Gallery LEFT, Summary RIGHT (desktop)
  * ------------------------------------------------------------ */
 
 /* Main grid (robust: with and without .woocommerce wrapper) */
 body.single-product .woocommerce div.product,
 body.single-product div.product {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-xl);
   margin-top: var(--spacing-xl);
   margin-bottom: var(--spacing-2xl, 48px);
   align-items: start;
 }
 
 /* Remove possible floats from Woo defaults */
 body.single-product .woocommerce div.product .summary,
 body.single-product .woocommerce div.product .woocommerce-product-gallery,
 body.single-product div.product .summary,
 body.single-product div.product .woocommerce-product-gallery {
   float: none !important;
   width: 100% !important;
 }
 
 @media (min-width: 1024px) {
   body.single-product .woocommerce div.product,
   body.single-product div.product {
     grid-template-columns: 1fr 1fr;
     gap: 48px;
   }
 
   /* Gallery LEFT */
   body.single-product .woocommerce div.product .woocommerce-product-gallery,
   body.single-product div.product .woocommerce-product-gallery {
     grid-column: 1;
     grid-row: 1;
     margin: 0;
   }
 
   /* Summary RIGHT */
   body.single-product .woocommerce div.product .summary,
   body.single-product div.product .summary {
     grid-column: 2;
     grid-row: 1;
     margin: 0;
   }
 }
 
 /* Title + price spacing */
 body.single-product .summary .product_title {
   margin: 0 0 var(--spacing-md);
 }
 
 body.single-product .summary p.price,
 body.single-product .summary span.price {
   color: var(--color-primary);
   font-weight: var(--font-weight-bold);
   margin: 0 0 var(--spacing-md);
 }
 
 /* Short description spacing (optional fine-tune) */
 body.single-product .summary .woocommerce-product-details__short-description {
   margin-bottom: 18px;
 }
 
 /* ------------------------------------------------------------
  * Gallery: thumbs bottom (desktop + mobile), no bullets
  * ------------------------------------------------------------ */
 body.single-product .woocommerce-product-gallery {
   width: 100%;
 }
 
 /* Ensure wrapper behaves normally */
 body.single-product .woocommerce-product-gallery__wrapper {
   margin: 0;
 }
 
 /* Thumbs base (fix numbered list) */
 body.single-product .flex-control-thumbs {
   margin: var(--spacing-md) 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }
 
 body.single-product .flex-control-thumbs li {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 72px;
 }
 
 body.single-product .flex-control-thumbs img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--radius-sm);
 }
 
 /* Desktop thumbs a baix una mica més grans */
 @media (min-width: 1024px) {
   body.single-product .flex-control-thumbs li {
     width: 84px;
   }
 }
 
 /* ------------------------------------------------------------
  * Add to cart form (single) - Align qty + button
  * ------------------------------------------------------------ */
 body.single-product .woocommerce div.product form.cart,
 body.single-product div.product form.cart {
   margin-top: var(--spacing-md);
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
   align-items: stretch;
 }
 
 body.single-product .woocommerce div.product form.cart .quantity,
 body.single-product div.product form.cart .quantity {
   margin: 0;
 }
 
 body.single-product .woocommerce div.product form.cart .qty,
 body.single-product div.product form.cart .qty {
   height: 44px;
   padding: 0 var(--spacing-sm);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
 }
 
 body.single-product .woocommerce div.product form.cart .button,
 body.single-product div.product form.cart .button {
   height: 44px;
   padding: 0 var(--spacing-lg);
   background-color: var(--color-primary);
   color: #fff;
   border: 1px solid var(--color-primary);
   border-radius: var(--radius-md);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
   transition: background-color var(--transition-fast), color var(--transition-fast);
 }
 
 body.single-product .woocommerce div.product form.cart .button:hover,
 body.single-product .woocommerce div.product form.cart .button:focus,
 body.single-product div.product form.cart .button:hover,
 body.single-product div.product form.cart .button:focus {
   background-color: var(--color-secondary);
 }
 
 /* ------------------------------------------------------------
  * Tabs (Descripción / Valoraciones) - no bullets
  * ------------------------------------------------------------ */
 body.single-product .woocommerce-tabs ul.tabs {
   list-style: none;
   margin: var(--spacing-xl) 0 var(--spacing-md);
   padding: 0;
   display: flex;
   gap: var(--spacing-md);
   border-bottom: 1px solid var(--color-border);
 }
 
 body.single-product .woocommerce-tabs ul.tabs li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 body.single-product .woocommerce-tabs ul.tabs li a {
   display: inline-block;
   padding: 0 0 var(--spacing-sm);
   text-decoration: none;
   color: var(--color-text);
   font-size: 0.875rem; /* 14px */
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
 
 body.single-product .woocommerce-tabs ul.tabs li.active a {
   border-bottom: 2px solid var(--color-text);
 }
 
 /* ------------------------------------------------------------
  * Notices
  * ------------------------------------------------------------ */
 .woocommerce-notices-wrapper .woocommerce-message,
 .woocommerce-notices-wrapper .woocommerce-error,
 .woocommerce-notices-wrapper .woocommerce-info {
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   margin: 0 0 var(--spacing-md);
 }
 
 /* ------------------------------------------------------------
  * Cart table
  * ------------------------------------------------------------ */
 .woocommerce table.shop_table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: var(--spacing-lg);
 }
 
 .woocommerce table.shop_table th,
 .woocommerce table.shop_table td {
   padding: var(--spacing-sm);
   border: 1px solid var(--color-border);
   text-align: left;
 }
 
 .woocommerce table.shop_table thead th {
   background-color: var(--color-surface);
 }
 
 /* ------------------------------------------------------------
  * Checkout basics
  * ------------------------------------------------------------ */
 .woocommerce-checkout #customer_details,
 .woocommerce-checkout #order_review {
   margin-bottom: var(--spacing-lg);
 }
 
 .woocommerce-checkout .form-row input.input-text,
 .woocommerce-checkout .form-row textarea,
 .woocommerce-checkout .form-row select {
   width: 100%;
 }
 
 /* ------------------------------------------------------------
  * Focus visible (AA)
  * ------------------------------------------------------------ */
 .woocommerce a:focus-visible,
 .woocommerce button:focus-visible,
 .woocommerce input:focus-visible,
 .woocommerce select:focus-visible,
 .woocommerce textarea:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 2px;
 }
 /* ============================================================
   LONJEBA – Purchase cards (match reference)
   Markup:
   label.lonjeba-purchase__option >
     input[type=radio] + span.lonjeba-purchase__card
   ============================================================ */

body.single-product{
  --lonjeba-accent: var(--color-brand);
  --lonjeba-card-bg: transparent;
  --lonjeba-card-bg-active: var(--color-surface);
  --lonjeba-border: var(--color-border);
}

/* Cards enganxades (sense espai) */
.lonjeba-purchase{
  border: 1px solid var(--lonjeba-border);
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 0; /* IMPORTANT: enganxades */
}

/* Label wrapper */
.lonjeba-purchase__option{
  display: block;
  position: relative;
  cursor: pointer;
}

/* Hide real radio but keep accessible */
.lonjeba-purchase__option > input[type="radio"]{
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Card (square, with padding) */
/* Cada card: sense border general, només separador a baix */
.lonjeba-purchase__card{
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto 220px;
  gap: 18px;
  padding: 18px 20px;

  border: 0;
  border-bottom: 1px solid var(--lonjeba-border);

  border-radius: 0;
  background: var(--lonjeba-card-bg);
  align-items: start;
  width: 100%;
}

/* Custom radio bullet INSIDE the card (brown, beside title) */
.lonjeba-purchase__card::before{
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--lonjeba-accent);
  margin-top: 2px;
  background: transparent;
}

/* L’última sense línia a baix */
.lonjeba-purchase__option:last-child .lonjeba-purchase__card{
  border-bottom: 0;
}

/* Hover: remarcat sense moure res */
.lonjeba-purchase__option:hover .lonjeba-purchase__card{
  box-shadow: inset 0 0 0 1px var(--lonjeba-accent);
}



/* Selected: fons + remarcat 100% ample (sense marges) */
.lonjeba-purchase__option > input[type="radio"]:checked + .lonjeba-purchase__card{
  background: var(--lonjeba-card-bg-active);
  box-shadow: inset 0 0 0 1px var(--lonjeba-accent);
}
/* Checked bullet fill */
.lonjeba-purchase__option > input[type="radio"]:checked + .lonjeba-purchase__card::before{
  background: var(--lonjeba-accent);
  box-shadow: inset 0 0 0 3px var(--lonjeba-card-bg-active);
}

/* Focus visible (AA) */
.lonjeba-purchase__option > input[type="radio"]:focus-visible + .lonjeba-purchase__card{
  outline: 2px solid var(--lonjeba-accent);
  outline-offset: 3px;
}

/* Left block */
.lonjeba-purchase__left{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lonjeba-purchase__title{
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.2;
  color: var(--color-text);
}

.lonjeba-purchase__meta{
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Badge column */
.lonjeba-purchase__mid{
  align-self: start;
}

.lonjeba-purchase__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 0; /* quadrat */
  background: var(--color-surface);
  border: 1px solid var(--lonjeba-border);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Right pricing block */
.lonjeba-purchase__right{
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.lonjeba-purchase__regular{
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  color: var(--lonjeba-accent);
  text-decoration: line-through;
}

.lonjeba-purchase__price{
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.15;
  color: var(--color-text);
}

.lonjeba-purchase__price-label{
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-right: 8px;
}

.lonjeba-purchase__perday{
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  color: var(--lonjeba-accent);
}

/* Responsive: stack badge + price under content */
@media (max-width: 900px){
  .lonjeba-purchase__card{
    grid-template-columns: 22px 1fr;
    gap: 12px 14px;
  }

  .lonjeba-purchase__mid{
    grid-column: 2;
  }

  .lonjeba-purchase__right{
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}


/* Override solo para las cards de compra (evita el margin-bottom global de label) */
.lonjeba-purchase label,
label.lonjeba-purchase__option{
  margin-bottom: 0;
  font-weight: inherit;
}




/* ============================================================
   SINGLE PRODUCT – fixes per grid + full-width children
   ============================================================ */

/* Evita overflow dins grid (important) */
body.single-product .woocommerce div.product > *,
body.single-product div.product > *{
  min-width: 0;
}

/* Qualsevol secció que ve després de galeria/summary, a full-row */
body.single-product .woocommerce div.product > section.prod-ba,
body.single-product div.product > section.prod-ba,
body.single-product .woocommerce div.product > .woocommerce-tabs,
body.single-product div.product > .woocommerce-tabs,
body.single-product .woocommerce div.product > .related,
body.single-product div.product > .related,
body.single-product .woocommerce div.product > .upsells,
body.single-product div.product > .upsells{
  grid-column: 1 / -1;
}

/* (si el wrapper del producte és flex en algun cas/tema) */
.single-product div.product > section.prod-ba{
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* Single product: botó "Añadir al carrito" full width i més gran */
body.single-product div.product .summary form.cart .single_add_to_cart_button,
body.single-product .woocommerce div.product .summary form.cart .single_add_to_cart_button{
  width: 100%;
  display: block;
  height: 52px;              /* puja a 56px si el vols més “premium” */
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
}

/* Si el form.cart encara és flex, força'l a column perquè el botó faci 100% */
body.single-product div.product .summary form.cart,
body.single-product .woocommerce div.product .summary form.cart{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.single-product form.cart .quantity{ display:none !important; }




/* ============================================================
   Product: Beneficios (izq) + Accordion (der)
   Responsive: mobile + tablet + desktop
   Sustituye TODO tu bloque actual por este
   ============================================================ */

/* --- Safety: evita scroll horizontal si algo desborda --- */
html, body { overflow-x: clip; }

/* ============================================================
   Accordion (shared)
   ============================================================ */
.prod-accordion {
  margin-top: 2rem;
  border-top: 1px solid rgba(0,0,0,.12);
}

.prod-accordion__item {
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.prod-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.prod-accordion__trigger::after {
  content: "+";
  font-size: 1.25em;
  line-height: 1;
}

.prod-accordion__trigger[aria-expanded="true"]::after {
  content: "–";
}

.prod-accordion__panel {
  padding: 0 0 1rem 0;
}

.prod-accordion__content > *:first-child { margin-top: 0; }
.prod-accordion__content > *:last-child  { margin-bottom: 0; }

/* ============================================================
   Full-width background (sense desbocar layout)
   ============================================================ */
.fullbleed{
  clip-path: inset(0 -100vmax);
}

.prod-ba{
  padding: clamp(24px, 4vw, 64px) 0;
}

/* Contenidor intern de la secció */
.prod-ba__inner{
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

/* ============================================================
   Layout general (mobile-first)
   ============================================================ */
.prod-ba__grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile: 1 columna */
  gap: clamp(20px, 5vw, 40px);
  align-items: start;
}

/* Beneficis (mobile-first): 1 columna */
.prod-benefits__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.prod-benefit{
  display:flex;
  align-items:flex-start; /* millor amb text a 2 línies */
  gap: 12px;
}

.prod-benefit__icon{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prod-benefit__icon img{
  width: 34px;
  height: 34px;
  display: block;
}

.prod-benefit__text{
  font-size: 0.95rem;
  line-height: 1.25;
}

/* Accordion dins la secció: sense marge/linia superior extra */
.prod-ba__accordion .prod-accordion{
  margin-top: 0;
  border-top: 0;
}

/* Tap target millor en mobile */
@media (max-width: 639px){
  .prod-accordion__trigger{
    padding: 14px 0;
  }
}

/* ============================================================
   Tablet (>= 640px i < 992px)
   - Secció continua apilada (1 columna)
   - Beneficis passen a 2 columnes
   ============================================================ */
@media (min-width: 640px) and (max-width: 991px){
  .prod-benefits__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
  }

  .prod-benefit__icon,
  .prod-benefit__icon img{
    width: 38px;
    height: 38px;
  }

  .prod-benefit__text{
    font-size: 1rem;
  }
}

/* ============================================================
   Desktop (>= 992px)
   - 2 columnes: beneficis esquerra / accordion dreta
   ============================================================ */
@media (min-width: 992px){
  .prod-ba__grid{
    grid-template-columns: minmax(0, 560px) minmax(0, 720px);
    justify-content: space-between;
    gap: clamp(24px, 4vw, 80px);
  }

  .prod-benefits__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
  }

  .prod-benefit{
    align-items: center;
  }

  .prod-benefit__icon,
  .prod-benefit__icon img{
    width: 40px;
    height: 40px;
  }

  .prod-benefit__text{
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* ============================================================
   Forçar que la secció ocupi 100% (si el wrapper del producte és 2-column)
   ============================================================ */

/* Si el wrapper del producte és FLEX (molt típic) */
.single-product div.product > section.prod-ba{
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* Si el wrapper del producte és GRID */
@supports (grid-column: 1 / -1){
  .single-product div.product > section.prod-ba{
    grid-column: 1 / -1;
  }
}


/* FIX mobile: força que es vegi el + / – */
.single-product .prod-accordion__trigger{
  position: relative;
  overflow: visible;
}

.single-product .prod-accordion__trigger::after{
  content: "+" !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: auto;
  font-size: 1.25em;
  line-height: 1;
}

.single-product .prod-accordion__trigger[aria-expanded="true"]::after{
  content: "–" !important;
}

/* Opcional: assegura que el text no “tapi” la icona */
.single-product .prod-accordion__trigger-text{
  flex: 1 1 auto;
  min-width: 0;
}


/* ============================================================
   Product - "¿POR QUÉ FUNCIONA?" (layout com el mock)
   ============================================================ */

   .woocommerce-product-gallery__trigger{
    display: none !important;
  }

   .prod-why{
    padding: clamp(20px, 6vw, 20px) 0;
  }
  
  .prod-why__inner{
    max-width: 1200px; /* perquè quedi com el mock (més “centrat”) */
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
  }
  
  .prod-why__title{
    text-align: center;
    margin-bottom: 50px;
  }
  
  /* 2 columnes principals */
  .prod-why__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 80px);
  }
  
  @media (min-width: 1024px){
    .prod-why__grid{
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
  }
  
  /* cada columna amb 3 files */
  .prod-why__col{
    display: grid;
    gap: clamp(28px, 3.2vw, 56px);
  }
  
  /* item: media + text */
  .prod-why__item{
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  
  /* cercle imatge */
  .prod-why__media{
    width: 124px;
    height: 124px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,.04);
  }
  
  .prod-why__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* tipografia */
  .prod-why__item-title{
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 1.05rem;
    line-height: 1.15;
  }
  
  .prod-why__item-desc{
    line-height: 1.65;
    font-size: 1rem;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
  }
  
  .prod-why__item-desc > *{
    margin: 0;
  }
  
  /* Tablet */
  @media (max-width: 1023px){
    .prod-why__inner{ max-width: 900px; }
  
    .prod-why__item{
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 18px;
    }
    .prod-why__media{
      width: 104px;
      height: 104px;
    }
  }
  
  /* Mobile */
  @media (max-width: 520px){
    .prod-why__item{
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 16px;
    }
    .prod-why__media{
      width: 88px;
      height: 88px;
    }
  
    .prod-why__item-title{
      font-size: 1rem;
    }
  }
  
  /* full row dins del grid del producte (si cal) */
  body.single-product div.product > section.prod-why{
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  



/* ============================================================
   Sección: imagen + texto con icono (check-circle)
   ACF:
   - prod_info_img (image ID)
   - prod_info_title (text)
   - prod_info_content (wysiwyg -> ideal en <ul><li>)
   ============================================================ */

/* ============================================================
   LONJEBA — Secció "prod-info" (imatge + títol + bullets amb check)
   Usa H2 global: .lonjeba-h2
   ============================================================ */

   .prod-info{
    background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);

  padding: clamp(56px, 6vw, 120px) 0;
  }
  
  .prod-info__inner{
    max-width: 1760px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
  }
  
  /* Layout: 2 columnes (desktop), apilat (tablet/mòbil) */
  .prod-info__grid{
    display: grid;
    gap: clamp(28px, 4.2vw, 88px);
    align-items: center;
  }
  
  @media (min-width: 1024px){
    .prod-info__grid{
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      align-items: center;
    }
  }
  
  /* Imatge esquerra */
  .prod-info__media{
    width: 100%;
    justify-self: start;
  }
  
  .prod-info__img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
  }
  
  /* Columna dreta */
  .prod-info__right{
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    text-align: left;
  }
  
  /* Títol: el teu component global */
  .prod-info__title{
    text-align: left;
  }
  
  /* Contingut (WYSIWYG) */
  .prod-info__content{
    width: 100%;
    text-align: left;
  }
  
  /* Convertim el UL en llista neta amb espai */
  .prod-info__content ul{
    list-style: none;
    margin: 0;
    padding: 30px 0 0 0;
    display: grid;
    gap: clamp(14px, 1.6vw, 22px);
  }
  
  /* Cada LI: icon + text */
  .prod-info__content li{
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 16px;
    align-items: start;
  
    font-size: clamp(16px, 1.05vw, 20px);
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
  }
  
  /* Icon check-circle.svg */
  .prod-info__content li::before{
    content: "";
    width: 26px;
    height: 26px;
    margin-top: 2px;
  
    background: color-mix(in srgb, var(--color-text) 70%, transparent);
    -webkit-mask: url("../svg/check-circle.svg") no-repeat center / contain;
    mask: url("../svg/check-circle.svg") no-repeat center / contain;
  }
  
  /* Si WP posa <p> dins del LI, el normalitzem */
  .prod-info__content li > p{
    margin: 0;
  }
  
  /* ------------------------------------------------------------
     Responsive
     ------------------------------------------------------------ */
  
  /* Tablet i avall: apilat */
  @media (max-width: 1023px){
    .prod-info__grid{
      grid-template-columns: 1fr;
      align-items: start;
    }
  
    .prod-info__media{
      max-width: 100%;
    }
  
    .prod-info__right{
      width: 100%;
    }
  
    .prod-info__content li{
      grid-template-columns: 24px 1fr;
      column-gap: 14px;
      font-size: 1.05rem;
    }
  
    .prod-info__content li::before{
      width: 24px;
      height: 24px;
    }
  }
  
  /* Mòbil petit: una mica més compacte */
  @media (max-width: 520px){
    .prod-info{
      padding: 44px 0;
    }
  
    .prod-info__content ul{
      gap: 14px;
    }
  }





/* ------------------------------------------------------------
 * Product grid (Shop / archives) - WooCommerce default loops
 * ------------------------------------------------------------ */
 .woocommerce ul.products,
 .woocommerce-page ul.products {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--spacing-lg);
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .woocommerce ul.products li.product,
 .woocommerce-page ul.products li.product {
   margin: 0;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   background-color: var(--color-background);
 }
 
 .woocommerce ul.products li.product:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .woocommerce ul.products li.product .woocommerce-loop-product__title {
   font-weight: var(--font-weight-bold);
   margin: var(--spacing-sm);
 }
 
 .woocommerce ul.products li.product .price {
   color: var(--color-primary);
   margin: 0 var(--spacing-sm) var(--spacing-sm);
   font-weight: var(--font-weight-bold);
 }
 
 /* Add to cart button (loop) */
 .woocommerce ul.products li.product .button {
   margin: var(--spacing-sm);
   display: block;
   width: calc(100% - 2 * var(--spacing-sm));
   padding: var(--spacing-sm);
   text-align: center;
   background-color: var(--color-primary);
   color: #fff;
   border-radius: var(--radius-sm);
   transition: background-color var(--transition-fast);
 }
 
 .woocommerce ul.products li.product .button:hover,
 .woocommerce ul.products li.product .button:focus {
   background-color: var(--color-secondary);
 }
 
 
 /* ------------------------------------------------------------
  * Single product layout helper (full-row section)
  * ------------------------------------------------------------ */
 body.single-product div.product > section.prod-info {
   grid-column: 1 / -1;
   width: 100%;
   max-width: 100%;
   min-width: 0;
 }
 
 
 /* ============================================================
  * LONJEBA – Products grid (reusable)  ✅ SIN DUPLICADOS
  * ============================================================ */
 
 /* Section spacing */
 .lonjeba-products {
   padding: clamp(40px, 5vw, 80px) 0;
 }
 
 /* Fullbleed section */
 .lonjeba-products.fullbleed {
   clip-path: inset(0 -100vmax);
   padding: clamp(32px, 5vw, 80px) 0;
 }
 
 /* Single product: fullbleed background + true full width */
 body.single-product .lonjeba-products.fullbleed {
   background: var(--color-bg-soft);
   width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
 }
 
 /* Inner container */
 .lonjeba-products__inner {
   max-width: 1760px;
   margin-inline: auto;
 }
 
 /* Single product: inner constrained */
 body.single-product .lonjeba-products.fullbleed .lonjeba-products__inner {
   background: transparent;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
 }
 
 /* Titles */
 .lonjeba-products__title { margin: 0 0 12px; }
 
 .lonjeba-products__subtitle {
   margin: 0 0 clamp(18px, 2.5vw, 28px);
   color: color-mix(in srgb, var(--color-text) 75%, transparent);
   max-width: 100%;
 }
 
 /* Grid: 1 / 2 / (desktop usa --cols del PHP) */
 .lonjeba-products__grid {
  display: grid;
  gap: clamp(5px, 2vw, 7px);
  margin-top: 20px;
  grid-template-columns: 1fr; /* móvil: 1 */
  align-items: stretch;
 }
 
 /* evitar overflow en grids */
 .lonjeba-products__grid,
 .lonjeba-products__grid > * {
   min-width: 0;
 }
 
 /* ≥640px: 2 columnas */
@media (min-width: 640px) {
  .lonjeba-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≥900px y <1200px: 3 columnas */
@media (min-width: 900px) {
  .lonjeba-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ≥1200px: usa --cols (lo que pases desde el PHP: 3 o 6) */
@media (min-width: 1200px) {
  .lonjeba-products__grid {
    grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  }
}
 
 /* ============================================================
  * LONJEBA – Product card  ✅ SIN DUPLICADOS
  * ============================================================ */
 
 .lonjeba-pcard {
   background: var(--pc-bg, #E9E2D8);
   border-radius: 14px;
   padding: 9px;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
 .lonjeba-pcard__link {
   display: block;
   text-decoration: none;
   color: inherit;
 }
 
 /* Thumbnail container */
 .lonjeba-pcard__imgwrap {
   width: 100%;
   box-sizing: border-box;
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   display: grid;
   place-items: center;
   aspect-ratio: 1 / 1; /* estable en móvil */
 }
 
 /* Force thumbnail to always fit inside */
 .lonjeba-pcard__imgwrap img,
 .lonjeba-pcard__img {
   display: block;
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain;
 }
 
 .lonjeba-pcard__title {
   margin: 14px 0 10px;
   color: #fff;
   font-weight: 900;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   line-height: 1.15;
   font-size: 15px !important;
 }
 
 .lonjeba-pcard__desc {
   margin: 0;
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.35;
   max-width: 36ch;
   font-size: 0.95rem;
 }
 
 /* CTA always bottom */
 .lonjeba-pcard__cta {
   margin-top: auto;
   padding-top: 14px;
 }
 
 /* If your markup uses .lonjeba-pcard__btn */
 .lonjeba-pcard__btn {
   width: 100%;
   display: block;
   text-align: center;
   background: #fff;
   color: var(--color-text);
   border: 0;
   border-radius: 10px;
   padding: 12px 14px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-size:small;
   text-decoration: none !important;
  
 }
 
 /* If Woo outputs .button inside the card */
 .lonjeba-pcard .button {
   margin: 0 !important;
 }
 
 .lonjeba-pcard__btn:hover,
 .lonjeba-pcard__btn:focus-visible {
   transform: translateY(-1px);
 }
 
 /* Small phones: give a bit of breathing room */
 @media (max-width: 520px) {
   .lonjeba-pcard__imgwrap {
     padding: 14px;
   }
 }
 
 .status-publish {
   padding-top: 0px;
 }
 
 
 /* ============================================================
  * CART + CHECKOUT: sin sidebar + centrado + padding
  * ============================================================ */
 
 .lonjeba-wc-page {
   width: 100%;
   background: transparent;
   padding: clamp(28px, 4vw, 64px) 0;
 }
 
 .lonjeba-wc-page__inner {
   width: min(1200px, calc(100% - 40px));
   margin: 0 auto;
 }
 
 body.woocommerce-cart #secondary,
 body.woocommerce-checkout #secondary,
 body.woocommerce-cart .widget-area,
 body.woocommerce-checkout .widget-area,
 body.woocommerce-cart aside.sidebar,
 body.woocommerce-checkout aside.sidebar {
   display: none !important;
 }
 
 body.woocommerce-cart #primary,
 body.woocommerce-checkout #primary,
 body.woocommerce-cart .content-area,
 body.woocommerce-checkout .content-area {
   width: 100% !important;
   max-width: none !important;
 }
 
 
 /* ============================================================
  * My Account nav
  * ============================================================ */
 
 .woocommerce-account .woocommerce-MyAccount-navigation ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
 
 .woocommerce-account .woocommerce-MyAccount-navigation a {
   display: block;
   padding: 0.75rem 1rem;
   text-decoration: none;
   border-radius: 0.75rem;
 }
 
 .woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
   font-weight: 600;
 }
 
 .woocommerce-account .woocommerce-MyAccount-navigation { width: 260px; }
 .woocommerce-account .woocommerce-MyAccount-content { flex: 1; }
 
 .woocommerce-account .woocommerce {
   display: flex;
   gap: 2rem;
   align-items: flex-start;
 }
 
 @media (max-width: 768px) {
   .woocommerce-account .woocommerce { display: block; }
   .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; }
 }
 
 .post-edit-link { display: none !important; }
 
 
 /* ============================================================
  * Lonjeba Programs CTA
  * ============================================================ */
 
 .lonjeba-programs {
   padding-block: clamp(2rem, 3vw, 3.5rem);
 }
 
 .lonjeba-programs__title {
   margin: 0 0 0.5rem;
   letter-spacing: 0.02em;
 }
 
 .lonjeba-programs__lead {
   margin: 0 0 1.5rem;
 }
 
 .lonjeba-programs__grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(1rem, 1.6vw, 1.5rem);
 }
 
 @media (max-width: 980px) {
   .lonjeba-programs__grid { grid-template-columns: 1fr; }
 }
 
 .lonjeba-program-card {
   position: relative;
   display: block;
   border-radius: 16px;
   overflow: hidden;
   min-height: clamp(260px, 25vw, 340px);
   text-decoration: none;
   background-image: var(--bg);
   background-size: cover;
   background-position: center;
   transform: translateZ(0);
 }
 
 .lonjeba-program-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(
     to top,
     rgba(0, 0, 0, 0.55) 0%,
     rgba(0, 0, 0, 0.25) 45%,
     rgba(0, 0, 0, 0.10) 100%
   );
 }
 
 .lonjeba-program-card__content {
   position: relative;
   height: 100%;
   padding: clamp(1rem, 1.4vw, 1.5rem);
   display: grid;
   align-content: end;
   gap: 0.5rem;
   color: #fff;
 }
 
 .lonjeba-program-card__title {
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   font-size: clamp(1.25rem, 1.6vw, 1.6rem);
 }
 
 .lonjeba-program-card__text {
   margin: 0;
   max-width: 40ch;
   opacity: 0.95;
 }
 
 .lonjeba-program-card__btn {
   justify-self: start;
   margin-top: 0.75rem;
   padding: 0.7rem 1.1rem;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.92);
   color: #111;
   font-size: 0.85rem;
   letter-spacing: 0.08em;
 }
 
 .lonjeba-program-card:hover { transform: translateY(-2px); }
 .lonjeba-program-card:focus:not(:focus-visible) { outline: none; }
 .lonjeba-program-card:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 4px;
 }
 


 /* Título producto: LONJEBA arriba (sin partir) + nombre abajo */
.lonjeba-pcard__brand{
  display: block;
  white-space: nowrap; /* LONJEBA siempre en una línea */
}

.lonjeba-pcard__name{
  display: block;      /* el nombre siempre debajo */
}




:root{ --store-notice-h: 0px; }

body.woocommerce-demo-store p.woocommerce-store-notice.demo_store{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;

  display: flex;            /* ✅ sin !important */
  align-items: center;
  justify-content: center;

  gap: 20px;
  padding: 10px 16px;

  background: var(--color-brand);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

/* Dismiss separado y clicable */
body.woocommerce-demo-store .woocommerce-store-notice__dismiss-link{
  margin-left: 20px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Header fixed baja lo que mida el aviso (JS lo calcula) */
body.woocommerce-demo-store #masthead.site-header{
  top: var(--store-notice-h);
}



/* El contenidor general passa a grid de 2 columnes */
.prod-why__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;               /* ajusta al teu sistema d'espais */
  align-items: stretch;    /* perquè els items s’estirin igual */
}

/* "Elimina" les columnes del layout sense tocar el HTML */
.prod-why__col{
  display: contents;
}

/* Cada item ocupa tota l’alçada de la fila */
.prod-why__item{
  height: 100%;
  display: grid;
  grid-template-columns: 110px 1fr;  /* imatge + text */
  column-gap: 24px;
  align-items: start;
}

/* Imatge rodona (si no ho tens ja) */
.prod-why__media{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
}
.prod-why__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Mobile: una columna */
@media (max-width: 900px){
  .prod-why__grid{
    grid-template-columns: 1fr;
  }
}



 /* ============================================================
  * Card Badge
  * ============================================================ */
 

/* Cart badge */
.c-cartlink{ position: relative; }

.c-cartlink__badge{
  position:absolute;
  top: 0;
  right: 0;
  transform: translate(60%, -45%); /* más separado del icono */
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: var(--color-accent, #111);
  color: #fff;
}

.c-cartlink[data-count="0"] .c-cartlink__badge{ display:none; }

.c-cartlink.is-bump .c-cartlink__badge{ animation: lonjebaBump .45s ease; }
@keyframes lonjebaBump{
  0%{ transform: translate(60%, -45%) scale(1); }
  35%{ transform: translate(60%, -45%) scale(1.25); }
  100%{ transform: translate(60%, -45%) scale(1); }
}