/* =========================================================
 *  Bloques de Productos 3.0 — 5 formas: Escaparate, Lista, Carrusel, Destacado, Galería
 *  Variables por bloque: --bpx-accent, --bpx-sale, --bpx-radius, --bpx-cols
 * ========================================================= */

.bpx{
  --bpx-accent:#4F7942; --bpx-sale:#E0472B; --bpx-radius:18px; --bpx-cols:4;
  --bpx-ink:#1d2419; --bpx-muted:#6b7366; --bpx-paper:#f6f3ec; --bpx-line:rgba(29,36,25,.08);
  margin:12px 0 30px; color:var(--bpx-ink); container-type:inline-size; container-name:bpx;
}
.bpx *{ box-sizing:border-box; }
.bpx a{ text-decoration:none !important; }

/* ---------- Cabecera ---------- */
.bpx-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 18px; }
.bpx-heading{ margin:0 !important; font-size:clamp(21px,2.6vw,28px) !important; line-height:1.15 !important; font-weight:800 !important; letter-spacing:-.015em; color:var(--bpx-ink); text-transform:none !important; }
.bpx-heading::after{ content:""; display:block; width:44px; height:4px; border-radius:4px; background:var(--bpx-accent); margin-top:10px; }
.bpx-sub{ margin:8px 0 0 !important; color:var(--bpx-muted); font-size:14.5px; }
.bpx-nav{ display:flex; gap:8px; flex:0 0 auto; }
.bpx-nav button{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--bpx-line); background:#fff; color:var(--bpx-ink);
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.06); transition:background .2s, color .2s, opacity .2s;
}
.bpx-nav button:hover{ background:var(--bpx-accent); color:#fff; border-color:var(--bpx-accent); }
.bpx-nav button:disabled{ opacity:.35; cursor:default; background:#fff; color:var(--bpx-ink); }

/* ---------- Piezas comunes ---------- */
.bpx-card{ position:relative; background:#fff; border-radius:var(--bpx-radius); isolation:isolate; display:flex; flex-direction:column; min-width:0; }
.bpx-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.bpx-title{ margin:0 0 4px !important; font-size:15.5px !important; line-height:1.3 !important; font-weight:700 !important; letter-spacing:-.005em; text-transform:none !important; }
.bpx-title a{ color:var(--bpx-ink) !important; }
.bpx-media{ position:relative; overflow:hidden; background:var(--bpx-paper); }
.bpx-img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }
.bpx-img-2{ position:absolute; inset:0; opacity:0; }
.bpx-card:hover .bpx-img-2{ opacity:1; }
.bpx-card:hover .bpx-img-1{ transform:scale(1.04); }
.bpx-badges{ position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px; pointer-events:none; }
.bpx-badge{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:6px; line-height:1.2; color:#fff; background:var(--bpx-ink); }
.bpx-badge-sale{ background:var(--bpx-sale); font-size:12.5px; }
.bpx-badge-ship{ background:#fff; color:var(--bpx-sale); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.bpx-badge-own{ background:var(--bpx-accent); }
.bpx-badge-out{ background:#5c5f58; }
.bpx-desc{ font-size:13px; line-height:1.45; color:var(--bpx-muted); margin:2px 0 6px; }
.bpx-desc p{ margin:0 0 4px; }
.bpx-rating{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--bpx-muted); margin:0 0 4px; }
.bpx-stars{ position:relative; font-size:13px; letter-spacing:1px; color:#e3ded2; line-height:1; }
.bpx-stars::before{ content:"★★★★★"; position:absolute; left:0; top:0; width:var(--r); overflow:hidden; color:#f0a500; white-space:nowrap; }
.bpx-price{ font-size:19px; font-weight:800; color:var(--bpx-ink); line-height:1.2; display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.bpx-price del{ font-size:13.5px; font-weight:600; color:var(--bpx-muted); opacity:.8; }
.bpx-price ins{ text-decoration:none; color:var(--bpx-sale); }
.bpx-price .woocommerce-Price-amount{ color:inherit; }
.bpx-low{ display:inline-block; font-size:12px; font-weight:700; color:var(--bpx-sale); }
.bpx-btn{
  position:relative; z-index:2; display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:44px; padding:10px 16px !important; margin-top:12px; border-radius:calc(var(--bpx-radius) * .6 + 6px) !important; border:0 !important;
  background:var(--bpx-accent) !important; color:#fff !important; font-size:14px !important; font-weight:800 !important; letter-spacing:.01em;
  text-transform:none !important; line-height:1.2 !important; cursor:pointer; transition:filter .2s, transform .15s, box-shadow .2s;
  box-shadow:0 6px 14px -6px var(--bpx-accent);
}
.bpx-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.bpx-btn.is-ghost{ background:transparent !important; color:var(--bpx-accent) !important; box-shadow:inset 0 0 0 2px var(--bpx-accent); }
.bpx-btn.is-ghost:hover{ background:var(--bpx-accent) !important; color:#fff !important; }
.bpx-btn.is-disabled{ background:#e7e5df !important; color:#8a8d85 !important; box-shadow:none; cursor:default; }
.bpx-btn.loading{ opacity:.7; pointer-events:none; }
.bpx-btn.loading .bpx-btn-t::after{ content:"…"; }
.bpx-btn.added{ background:var(--bpx-ink) !important; }
.bpx-btn.added .bpx-btn-t::before{ content:"✓ "; }
.bpx .added_to_cart{ position:relative; z-index:2; display:block; text-align:center; margin-top:8px; font-size:13px; font-weight:700; color:var(--bpx-accent) !important; text-decoration:underline !important; }
.bpx-card.is-out .bpx-media img{ filter:grayscale(.5); opacity:.8; }
.bpx-card :is(.bpx-title a, .bpx-btn, .bpx-plus, .added_to_cart){ position:relative; z-index:2; }
@media (prefers-reduced-motion:reduce){ .bpx *{ transition:none !important; } }

/* ---------- Rejilla (Escaparate y Galería) ---------- */
.bpx-items-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.bpx-c1 .bpx-items-grid{ grid-template-columns:1fr; }
.bpx-c2 .bpx-items-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bpx-c3 .bpx-items-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.bpx-c5 .bpx-items-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@container bpx (max-width:899px){ .bpx-c4 .bpx-items-grid, .bpx-c5 .bpx-items-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container bpx (max-width:640px){
  .bpx-items-grid{ grid-template-columns:1fr; gap:14px; }
  .bpx-m2 .bpx-items-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

/* =========================================================
 *  1 · ESCAPARATE
 * ========================================================= */
.bpx-card-grid, .bpx-card-carousel{ border:1px solid var(--bpx-line); padding:8px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:box-shadow .3s, transform .3s; }
.bpx-card-grid:hover, .bpx-card-carousel:hover{ box-shadow:0 18px 40px -18px rgba(29,36,25,.35); transform:translateY(-3px); }
.bpx-card-grid .bpx-media, .bpx-card-carousel .bpx-media{ aspect-ratio:1 / 1; border-radius:calc(var(--bpx-radius) * .75); }
.bpx-card-grid .bpx-body, .bpx-card-carousel .bpx-body{ padding:12px 8px 6px; display:flex; flex-direction:column; flex:1; }
.bpx-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:6px; }
@container bpx (max-width:640px){
  .bpx-m2 .bpx-card-grid .bpx-body{ padding:10px 4px 4px; }
  .bpx-m2 .bpx-title{ font-size:13.5px !important; }
  .bpx-m2 .bpx-price{ font-size:16px; }
  .bpx-m2 .bpx-btn{ min-height:38px; font-size:12.5px !important; padding:8px 10px !important; }
  .bpx-m2 .bpx-desc{ display:none; }
}

/* =========================================================
 *  2 · LISTA
 * ========================================================= */
.bpx-list .bpx-items-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bpx-list.bpx-c1 .bpx-items-grid{ grid-template-columns:1fr; }
.bpx-card-list{ flex-direction:row; align-items:center; gap:16px; padding:12px 16px 12px 12px; border:1px solid var(--bpx-line); transition:border-color .2s, box-shadow .2s; }
.bpx-card-list:hover{ border-color:color-mix(in srgb, var(--bpx-accent) 45%, transparent); box-shadow:0 8px 22px -14px rgba(29,36,25,.4); }
.bpx-card-list .bpx-media{ flex:0 0 96px; width:96px; height:96px; border-radius:calc(var(--bpx-radius) * .6); }
.bpx-card-list .bpx-badges{ top:6px; left:6px; }
.bpx-card-list .bpx-badge{ font-size:9.5px; padding:3px 6px; }
.bpx-card-list .bpx-body{ flex:1; min-width:0; }
.bpx-card-list .bpx-aside{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; }
.bpx-card-list .bpx-btn{ width:auto; margin:0; min-height:40px; padding:8px 18px !important; white-space:nowrap; }
@container bpx (max-width:899px){ .bpx-list .bpx-items-grid{ grid-template-columns:1fr; } }
@container bpx (max-width:520px){
  .bpx-card-list{ flex-wrap:wrap; gap:12px; }
  .bpx-card-list .bpx-media{ flex-basis:84px; width:84px; height:84px; }
  .bpx-card-list .bpx-body{ flex:1 1 calc(100% - 100px); }
  .bpx-card-list .bpx-aside{ flex:1 1 100%; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* =========================================================
 *  3 · CARRUSEL
 * ========================================================= */
.bpx-track{
  display:grid; grid-auto-flow:column; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  grid-auto-columns:calc((100% - (var(--bpx-cols) - 1) * 16px) / var(--bpx-cols) - 8px);
  padding:4px 4px 18px; margin:-4px; scrollbar-width:thin; overscroll-behavior-x:contain; outline:none;
}
.bpx-track > *{ scroll-snap-align:start; }
.bpx-track::-webkit-scrollbar{ height:6px; }
.bpx-track::-webkit-scrollbar-thumb{ background:rgba(29,36,25,.18); border-radius:6px; }
@container bpx (max-width:899px){ .bpx-track{ grid-auto-columns:calc(33.33% - 14px); } }
@container bpx (max-width:640px){ .bpx-track{ grid-auto-columns:72%; } .bpx-m2 .bpx-track{ grid-auto-columns:46%; gap:10px; } .bpx-head .bpx-nav{ display:none; } }

/* =========================================================
 *  4 · DESTACADO
 * ========================================================= */
.bpx-spot{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.bpx-card-hero{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); overflow:hidden;
  background:linear-gradient(135deg, var(--bpx-paper), #fff 70%); border:1px solid var(--bpx-line);
}
.bpx-card-hero .bpx-media{ min-height:340px; height:100%; aspect-ratio:auto; }
.bpx-card-hero .bpx-img{ position:absolute; inset:0; }
.bpx-card-hero .bpx-body{ padding:26px 24px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.bpx-kicker{ align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bpx-accent); margin-bottom:6px; }
.bpx-card-hero .bpx-title{ font-size:clamp(20px,2.4vw,26px) !important; line-height:1.15 !important; }
.bpx-card-hero .bpx-price{ font-size:26px; margin:8px 0 2px; }
.bpx-card-hero .bpx-desc{ font-size:14px; }
.bpx-card-hero .bpx-btn{ margin-top:14px; }
.bpx-spot-rest{ display:flex; flex-direction:column; gap:10px; }
.bpx-card-mini{ flex-direction:row; align-items:center; gap:12px; padding:8px 14px 8px 8px; border:1px solid var(--bpx-line); flex:1; transition:border-color .2s, transform .2s; }
.bpx-card-mini:hover{ border-color:var(--bpx-accent); transform:translateX(3px); }
.bpx-card-mini .bpx-media{ flex:0 0 68px; width:68px; height:68px; border-radius:calc(var(--bpx-radius) * .55); }
.bpx-card-mini .bpx-body{ flex:1; min-width:0; }
.bpx-card-mini .bpx-title{ font-size:14px !important; margin:0 0 2px !important; }
.bpx-card-mini .bpx-price{ font-size:15px; }
.bpx-go{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--bpx-paper); color:var(--bpx-accent); display:flex; align-items:center; justify-content:center; font-weight:800; }
@container bpx (max-width:899px){ .bpx-spot{ grid-template-columns:1fr; } }
@container bpx (max-width:560px){
  .bpx-card-hero{ grid-template-columns:1fr; }
  .bpx-card-hero .bpx-media{ aspect-ratio:1 / 1; }
  .bpx-card-hero .bpx-body{ padding:18px; }
}

/* =========================================================
 *  5 · GALERÍA
 * ========================================================= */
.bpx-gallery .bpx-items-grid{ gap:14px; }
.bpx-card-gallery{ background:transparent; }
.bpx-card-gallery .bpx-media{ aspect-ratio:4 / 5; border-radius:var(--bpx-radius); }
.bpx-card-gallery .bpx-img{ transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.bpx-card-gallery:hover .bpx-img{ transform:scale(1.06); }
.bpx-pricepill{
  position:absolute; left:10px; bottom:10px; z-index:2; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(4px); font-size:14px; font-weight:800; box-shadow:0 4px 14px rgba(0,0,0,.12); pointer-events:none;
}
.bpx-pricepill del{ font-size:11.5px; color:var(--bpx-muted); font-weight:600; margin-right:4px; }
.bpx-pricepill ins{ text-decoration:none; color:var(--bpx-sale); }
.bpx-plus{
  position:absolute !important; right:10px; bottom:10px; z-index:3 !important; width:42px; height:42px; border-radius:50%;
  background:var(--bpx-accent); color:#fff !important; display:flex !important; align-items:center; justify-content:center;
  font-size:24px; font-weight:400; line-height:1; padding:0 !important; box-shadow:0 6px 16px -4px rgba(0,0,0,.35);
  transition:transform .2s;
}
.bpx-plus:hover{ transform:scale(1.08) rotate(90deg); }
.bpx-plus.loading{ opacity:.6; }
.bpx-plus.added{ background:var(--bpx-ink); font-size:0; }
.bpx-plus.added::after{ content:"✓"; font-size:20px; }
.bpx-card-gallery .bpx-body{ padding:10px 4px 0; }
.bpx-card-gallery .added_to_cart{ display:none; }
@container bpx (max-width:640px){ .bpx-m2 .bpx-card-gallery .bpx-title{ font-size:13px !important; } .bpx-m2 .bpx-pricepill{ font-size:12.5px; padding:5px 9px; } .bpx-m2 .bpx-plus{ width:36px; height:36px; } }