/* =====================================================================
   Electrygas del Oriente — tienda (/tienda/)
   Se carga DESPUÉS de /styles.css y usa sus tokens y componentes
   (.btn, .acc-item, .diag-opt, .mnav, .site-header, .fab…).
   Aquí solo va lo propio de la tienda.
   ===================================================================== */

html:not(.js) .needs-js{ display: none !important; }

/* ============================ CABECERA: PEDIDO ============================ */
.cart-btn{
  position: relative;
  width: 46px; height: 44px; flex: none;
  display: grid; place-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--blue-700);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cart-btn .ico{ width: 22px; height: 22px; }
.cart-btn:hover{ border-color: var(--blue-700); background: var(--paper); }
.cart-btn:active{ transform: scale(.95); }
.cart-count{
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 6px;
  display: grid; place-content: center;
  border-radius: 999px;
  background: var(--green-700); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);
}
.cart-count.is-bump{ animation: cart-bump 260ms var(--ease); }
@keyframes cart-bump{ 0%{ transform: scale(1); } 45%{ transform: scale(1.28); } 100%{ transform: scale(1); } }

/* Entre 1040 y 1279 px el menú de 7 enlaces + WhatsApp + pedido no cabía
   (se salía 12 px): el botón de WhatsApp queda solo con el ícono. El texto
   sigue ahí para lectores de pantalla y el flotante lo repite abajo. */
@media (min-width: 1040px) and (max-width: 1279.98px){
  .shop-page .header-cta{ width: 44px; min-height: 44px; padding: 0; }
  .shop-page .header-cta span{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* el número del selector de cantidad también es área táctil completa */
.qty input{ height: 52px; }

/* ============================ MIGAS ============================ */
.crumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  margin-bottom: clamp(8px, 2vw, 20px);
  color: var(--ink-2); font-size: .84rem;
}
.crumbs a{ display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
.crumbs a:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current]{ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.crumbs-sep{ width: 14px; height: 14px; opacity: .6; }
.crumbs-dark{ color: oklch(0.82 0.02 255); }
.crumbs-dark a:hover{ color: #fff; }
.crumbs-dark [aria-current]{ color: #fff; }

/* ============================ CABECERA DE LA TIENDA ============================ */
.shop-hero{
  background:
    radial-gradient(900px 440px at 8% -20%, oklch(0.36 0.20 268 / .55), transparent 62%),
    radial-gradient(720px 400px at 96% 0%, oklch(0.505 0.14 150 / .26), transparent 60%),
    var(--night-2);
  color: #fff;
  padding-block: 8px clamp(26px, 5vw, 60px);
}
.shop-hero-grid{ display: grid; gap: 20px; }
@media (min-width: 960px){
  .shop-hero-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
}
.shop-hero h1{ color: #fff; font-size: clamp(1.8rem, 7vw, 3.1rem); max-width: 16ch; }
.shop-hero h1 .hl{ color: var(--green-400); }
.shop-hero-sub{ margin-top: 12px; max-width: 46ch; color: oklch(0.88 0.015 255); font-size: clamp(.95rem, 3.4vw, 1.08rem); }
.shop-assure{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.shop-assure li{ display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: oklch(0.93 0.01 250); font-size: .84rem; font-weight: 600; line-height: 1.3; }
.shop-assure .ico{ width: 18px; height: 18px; margin-top: 1px; color: var(--green-400); }
@media (min-width: 560px){ .shop-assure li{ font-size: .9rem; } }

/* ---- encuentra el tuyo ---- */
.pick{
  padding: 18px 16px 16px;
  border-radius: var(--radius-lg);
  background: oklch(1 0 0 / .06);
  border: 1px solid oklch(1 0 0 / .15);
}
@media (min-width: 560px){ .pick{ padding: 24px 24px 22px; } }
.pick h2{ color: #fff; font-size: clamp(1.12rem, 4.4vw, 1.4rem); }
.pick-q{ display: flex; align-items: center; gap: 9px; margin-top: 16px; color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.pick-n{
  width: 22px; height: 22px; flex: none;
  display: grid; place-content: center;
  border-radius: 50%; background: var(--green-700);
  font-size: .75rem; font-weight: 700;
}
.pick-opts{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pick-help{ display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; color: oklch(0.84 0.018 255); font-size: .82rem; line-height: 1.4; }
.pick-help .ico{ width: 15px; height: 15px; margin-top: 2px; color: var(--blue-400); }
.pick-go{ width: 100%; margin-top: 18px; }
/* opción descartada por el paso 2 (más duchas de las que hay en la vivienda) */
.pick-opts .diag-opt:disabled{ opacity: .4; cursor: not-allowed; }
.pick-opts .diag-opt:disabled:hover{ background: oklch(1 0 0 / .07); }
.pick-go .ico{ width: 18px; height: 18px; }

/* ============================ CATÁLOGO ============================ */
.shop{
  background: var(--paper-2);
  padding-block: clamp(24px, 4.5vw, 60px);
  scroll-margin-top: var(--head-h);
}
.shop-top{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 14px;
}
.shop-top h2{ font-size: clamp(1.4rem, 5vw, 2rem); }
.shop-count{ margin-top: 3px; color: var(--ink-2); font-size: .9rem; }
.shop-tools{ display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
@media (min-width: 760px){ .shop-tools{ width: auto; flex-wrap: nowrap; } }

.shop-search{ position: relative; flex: 1 1 100%; min-width: 0; }
@media (min-width: 760px){ .shop-search{ flex: 0 1 300px; } }
.shop-search > .ico{
  position: absolute; left: 15px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  color: var(--ink-3); pointer-events: none;
}
.shop-search input{
  width: 100%; min-height: 48px;
  padding: 10px 46px 10px 43px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 1rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.shop-search input::placeholder{ color: var(--ink-3); }
.shop-search input::-webkit-search-cancel-button{ -webkit-appearance: none; display: none; }
.shop-search input:hover{ border-color: var(--blue-400); }
.shop-search input:focus{ border-color: var(--blue-700); box-shadow: 0 0 0 4px oklch(0.36 0.20 268 / .12); }
.search-clear{
  position: absolute; right: 4px; top: 4px;
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border: 0; border-radius: 50%;
  background: none; color: var(--ink-2); cursor: pointer;
}
.search-clear .ico{ width: 14px; height: 14px; }
.search-clear:hover{ background: var(--paper-3); color: var(--ink); }

.shop-filter-btn, .shop-sort select{
  min-height: 48px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background-color: var(--paper); color: var(--ink);
  font: inherit; font-size: .94rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.shop-filter-btn{ flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; }
.shop-filter-btn .ico{ width: 18px; height: 18px; color: var(--blue-700); }
.shop-filter-btn:hover, .shop-sort select:hover{ border-color: var(--blue-700); }
.shop-filter-btn:active{ transform: scale(.98); }
.shop-filter-n{
  min-width: 21px; height: 21px; padding: 0 6px;
  display: grid; place-content: center;
  border-radius: 999px; background: var(--blue-700); color: #fff;
  font-size: .74rem;
}
@media (min-width: 960px){ .shop-filter-btn{ display: none; } }
.shop-sort{ position: relative; flex: 1 1 0; min-width: 0; }
@media (min-width: 760px){ .shop-sort{ flex: 0 0 auto; } }
.shop-sort select{
  width: 100%;
  padding: 10px 40px 10px 16px;
  -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
}
.shop-sort::after{
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--blue-700); border-bottom: 2px solid var(--blue-700);
  transform: rotate(45deg); pointer-events: none;
}

.shop-active{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.chip-x{
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 12px 6px 14px;
  border: 1px solid var(--blue-200); border-radius: 999px;
  background: var(--paper); color: var(--blue-800);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.chip-x .ico{ width: 13px; height: 13px; }
.chip-x:hover{ border-color: var(--blue-700); background: var(--paper-3); }
.linkbtn{
  min-height: 44px; padding: 0 6px;
  background: none; border: 0;
  color: var(--blue-700); font: inherit; font-size: .9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.shop-layout{ display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px){
  .shop-layout{ grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  .shop-layout-full{ grid-template-columns: minmax(0, 1fr); }
}
.shop-results{ min-width: 0; }

/* ---- casilla propia (filtros, instalación) ---- */
.check{
  -webkit-appearance: none; appearance: none;
  width: 21px; height: 21px; flex: none; margin: 0;
  display: grid; place-content: center;
  border: 1.5px solid var(--line-2); border-radius: 6px;
  background: var(--paper); cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.check::before{
  content: ""; width: 11px; height: 6px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(.6); opacity: 0;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.check:checked{ background: var(--blue-700); border-color: var(--blue-700); }
.check:checked::before{ transform: translateY(-1px) rotate(-45deg); opacity: 1; }
.check:disabled{ cursor: default; background: var(--paper-3); }
.check-row{ display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: .92rem; line-height: 1.35; cursor: pointer; }

/* ---- filtros: panel lateral en escritorio, cajón en celular ---- */
.shop-filters-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-filters-head p{ font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.05rem; }
/* La legend flota: si no, el navegador la monta sobre el borde superior del
   fieldset y la línea divisoria sale al lado del título en vez de encima. */
.facet{ min-width: 0; margin: 0; padding: 14px 0 10px; border: 0; box-shadow: inset 0 1px 0 var(--line); }
.facet legend{ float: left; width: 100%; padding: 0; margin-bottom: 6px; font-family: Archivo, sans-serif; font-weight: 700; font-size: .92rem; color: var(--ink); }
.facet-opt{ clear: both; }
.facet-opt{
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 8px; margin-inline: -8px;
  border-radius: 10px; cursor: pointer;
  color: var(--ink); font-size: .94rem;
  transition: background-color var(--fast) var(--ease);
}
.facet-opt:hover{ background: var(--paper-2); }
.facet-t{ min-width: 0; line-height: 1.3; }
.facet-n{
  margin-left: auto; min-width: 28px; padding: 1px 7px;
  border-radius: 999px; background: var(--paper-3);
  color: var(--ink-2); font-size: .78rem; font-weight: 600; text-align: center;
}
.facet-opt.is-empty{ color: var(--ink-3); cursor: default; }
.facet-opt.is-empty:hover{ background: none; }
.shop-filters-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 959.98px){
  .shop-filters{
    position: fixed; z-index: var(--z-drawer);
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 360px);
    display: flex; flex-direction: column;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 46px oklch(0.235 0.125 268 / .18);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--mid) var(--ease), visibility 0s linear var(--mid);
  }
  .shop-filters.is-open{ transform: none; visibility: visible; transition: transform var(--mid) var(--ease), visibility 0s; }
  .shop-filters-head{ padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .shop-filters-body{ flex: 1; overflow-y: auto; padding: 0 16px 12px; overscroll-behavior: contain; }
  .shop-filters-body .facet:first-child{ box-shadow: none; }
  .shop-filters-foot{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-2); }
  .shop-filters-apply{ flex: 1; }
}
@media (min-width: 960px){
  .shop-filters{
    position: sticky; top: calc(var(--head-h) + 16px);
    padding: 14px 18px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .shop-filters-x, .shop-filters-apply, .shop-filters-backdrop{ display: none; }
  .shop-filters-head{ padding-bottom: 8px; }
  .shop-filters-foot{ padding-top: 4px; box-shadow: inset 0 1px 0 var(--line); }
}

.drawer-backdrop{
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: oklch(0.155 0.04 264 / .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
.drawer-backdrop.is-open{ opacity: 1; visibility: visible; transition: opacity var(--mid) var(--ease), visibility 0s; }

/* ---- tarjetas ---- */
.shop-grid{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 400px){ .shop-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 700px){ .shop-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px){ .shop-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1160px){ .shop-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcard{
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
@media (hover: hover){
  .pcard:hover{ border-color: var(--blue-200); box-shadow: var(--shadow-2); transform: translateY(-3px); }
  .pcard:hover .pcard-media img{ transform: scale(1.04); }
}
.pcard-media{ display: block; aspect-ratio: 1; background: #fff; overflow: hidden; border-bottom: 1px solid var(--line); }
.pcard-media img{ width: 100%; height: 100%; object-fit: contain; transition: transform 300ms var(--ease); }
.pcard-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px; }
@media (min-width: 700px){ .pcard-body{ padding: 16px; gap: 6px; } }
.pcard-brand, .pdp-brand{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pcard-brand img{ width: 20px; height: 20px; }
.brand-name{ font-family: Archivo, sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .1em; color: var(--ink-2); }
.pcard-name{ font-size: .98rem; line-height: 1.22; overflow-wrap: break-word; }
.pcard-name a{ color: var(--ink); text-decoration: none; }
.pcard-name a:hover{ color: var(--blue-700); }
@media (min-width: 700px){ .pcard-name{ font-size: 1.08rem; } }
.pcard-ref{ color: var(--ink-3); font-size: .78rem; overflow-wrap: anywhere; }
.pcard-tags{ list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pcard-tags li{ padding: 3px 8px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font-size: .72rem; font-weight: 600; line-height: 1.25; }
.pcard-sum{ display: none; color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
@media (min-width: 700px){
  .pcard-sum{ display: block; margin-top: 4px; }
  .pcard-tags li{ font-size: .76rem; }
}
.pcard-foot{ margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-price{ font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
@media (min-width: 700px){ .pcard-price{ font-size: 1.3rem; } }
.pcard-add{
  width: 44px; height: 44px; flex: none;
  display: grid; place-content: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--blue-700); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pcard-add .ico{ width: 21px; height: 21px; }
.pcard-add:hover{ border-color: var(--blue-700); background: var(--paper-2); }
.pcard-add:active{ transform: scale(.94); }
.pcard-add.is-added, .pdp-add.is-added{ background: var(--green-700); border-color: var(--green-700); color: #fff; }
.pcard-cta{ margin-top: 10px; min-height: 44px; padding-block: 8px; font-size: .9rem; }

/* celulares muy angostos: tarjeta horizontal, dos columnas quedaban de 140 px */
@media (max-width: 399.98px){
  .shop-grid:not(.shop-rail) .pcard{ display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .shop-grid:not(.shop-rail) .pcard-media{ aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .shop-grid:not(.shop-rail) .pcard-media img{ min-height: 150px; }
  .shop-grid:not(.shop-rail) .pcard-body{ padding: 11px 12px; }
}

/* carril (productos relacionados) */
@media (max-width: 699.98px){
  .shop-rail{
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: minmax(220px, 64vw);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -18px; padding: 2px 18px 12px;
    scroll-padding-inline: 18px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .shop-rail::-webkit-scrollbar{ display: none; }
  .shop-rail > .pcard{ scroll-snap-align: start; }
}
@media (min-width: 960px){ .shop-rail{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- sin resultados y nota ---- */
.shop-empty{
  display: grid; justify-items: center; gap: 8px;
  padding: 34px 18px; text-align: center;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}
.shop-empty-ico{ width: 34px; height: 34px; color: var(--blue-700); }
.shop-empty h3{ font-size: 1.15rem; }
.shop-empty p{ max-width: 44ch; color: var(--ink-2); font-size: .92rem; }
.shop-empty-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.shop-note{ display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; color: var(--ink-2); font-size: .84rem; line-height: 1.45; }
.shop-note .ico{ width: 16px; height: 16px; margin-top: 2px; color: var(--blue-700); }

/* ---- asesoría ---- */
.shop-help{ background: var(--paper); border-top: 1px solid var(--line); padding-block: clamp(30px, 5vw, 64px); }
.shop-help-card{
  display: grid; gap: 18px;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: #fff;
}
@media (min-width: 860px){ .shop-help-card{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 34px 38px; } }
.shop-help-card h2{ color: #fff; font-size: clamp(1.35rem, 4.8vw, 2rem); }
.shop-help-card p{ margin-top: 8px; max-width: 52ch; color: oklch(0.90 0.02 255); }
.shop-help-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.shop-help-actions .btn{ flex: 1 1 200px; }
@media (min-width: 860px){
  .shop-help-actions{ flex-direction: column; }
  .shop-help-actions .btn{ flex: none; }
}

/* ============================ FICHA DE PRODUCTO ============================ */
.pdp-top{ background: var(--paper); padding-block: 4px clamp(28px, 5vw, 60px); }
.pdp{ display: grid; gap: 22px; }
@media (min-width: 960px){
  .pdp{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: start; }
  .pdp-gallery{ position: sticky; top: calc(var(--head-h) + 16px); }
}
.pdp-gallery{ min-width: 0; }

/* ---- galería ---- */
.pg-main{ position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pg-track{
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.pg-track::-webkit-scrollbar{ display: none; }
.pg-track:focus-visible{ outline-offset: -3px; }
.pg-slide{ flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; scroll-snap-stop: always; }
.pg-slide img{ width: 100%; height: 100%; object-fit: contain; }
.pg-nav{
  position: absolute; top: 50%;
  width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: oklch(1 0 0 / .94); color: var(--ink);
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pg-nav .ico{ width: 20px; height: 20px; }
.pg-prev{ left: 12px; }
.pg-next{ right: 12px; }
.pg-nav:hover{ border-color: var(--blue-700); }
.pg-nav:active{ transform: scale(.94); }
.pg-nav:disabled{ opacity: 0; pointer-events: none; }
@media (hover: none){ .pg-nav{ display: none; } }
.pg-count{
  position: absolute; right: 12px; bottom: 12px;
  padding: 3px 10px; border-radius: 999px;
  background: oklch(0.205 0.045 262 / .8); color: #fff;
  font-size: .78rem; font-weight: 600;
}
.pg-thumbs{ position: relative; display: flex; gap: 8px; margin-top: 10px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.pg-thumbs::-webkit-scrollbar{ display: none; }
.pg-thumb{
  flex: 0 0 64px; aspect-ratio: 1; padding: 0;
  background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
@media (min-width: 560px){ .pg-thumb{ flex-basis: 80px; } }
.pg-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.pg-thumb:hover{ border-color: var(--blue-400); }
.pg-thumb[aria-current="true"]{ border-color: var(--blue-700); box-shadow: 0 0 0 3px oklch(0.36 0.20 268 / .15); }

/* ---- información y compra ---- */
.pdp-info{ min-width: 0; }
.pdp-brand img{ width: 30px; height: 30px; }
.pdp-brand .brand-name{ font-size: .8rem; }
.brand-dealer{ margin-left: 2px; padding: 3px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .74rem; font-weight: 700; }
.pdp-info h1{ margin-top: 10px; font-size: clamp(1.45rem, 5.2vw, 2.15rem); line-height: 1.12; overflow-wrap: break-word; }
.pdp-ref{ margin-top: 8px; color: var(--ink-2); font-size: .88rem; overflow-wrap: anywhere; }
.pdp-ref strong{ color: var(--ink); font-weight: 600; }
.pdp-tags{ margin-top: 12px; }
.pdp-tags li{ padding: 4px 10px; font-size: .8rem; }
.pdp-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 18px; }
.pdp-price-n{ font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(1.95rem, 7vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.pdp-price-t{ color: var(--ink-2); font-size: .84rem; }
.pdp-summary{ margin-top: 10px; max-width: 52ch; color: var(--ink-2); }
.pdp-buy{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.pdp-buy .pdp-wa{ grid-column: 1 / -1; }
html:not(.js) .pdp-buy{ grid-template-columns: minmax(0, 1fr); }
.pdp-add{ min-width: 0; padding-inline: 16px; }
.qty{ display: flex; align-items: center; justify-content: space-between; min-height: 54px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); }
.qty button{
  width: 44px; height: 52px;
  display: grid; place-content: center;
  background: none; border: 0; border-radius: 999px;
  color: var(--blue-700); cursor: pointer;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.qty button .ico{ width: 18px; height: 18px; }
.qty button:active{ transform: scale(.9); }
.qty button:disabled{ color: var(--line-2); cursor: default; }
.qty input, .qty output{
  width: 36px; padding: 0; border: 0; background: none;
  text-align: center; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.pdp-inst{ margin-top: 8px; }
.pdp-assure{ list-style: none; margin: 14px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.pdp-assure li{ display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.pdp-assure .ico{ width: 20px; height: 20px; margin-top: 1px; color: var(--green-700); }
.pdp-assure strong{ font-weight: 600; }
.pdp-note{ margin-top: 12px; color: var(--ink-2); font-size: .8rem; line-height: 1.45; }

/* ---- detalles ---- */
.pdp-more{ background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(28px, 5vw, 64px); }
.pdp-cols{ display: grid; gap: 10px; }
@media (min-width: 960px){ .pdp-cols{ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; } }
.pdp-col{ display: grid; gap: 10px; min-width: 0; }
@media (min-width: 960px){ .pdp-col{ gap: 16px; } }
.pdp-acc summary h2{ font-size: 1.08rem; line-height: 1.3; }
@media (min-width: 760px){
  .pdp-acc summary{ padding: 16px 20px; }
  .pdp-acc .acc-body{ padding: 0 20px 20px; }
}
.pdp-acc .acc-body{ color: var(--ink-2); font-size: .95rem; }
.pdp-acc .acc-body > p + p{ margin-top: 10px; }
.pdp-list{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pdp-acc .acc-body > .pdp-list:first-child{ margin-top: 0; }
.pdp-list li{ display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: .92rem; line-height: 1.45; }
.pdp-list .ico{ width: 18px; height: 18px; margin-top: 2px; color: var(--green-700); }
.pdp-uso{
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: 12px;
  background: var(--green-100);
  border: 1px solid oklch(0.74 0.165 150 / .45);
  color: var(--ink); font-size: .92rem;
}
.pdp-uso .ico{ width: 20px; height: 20px; margin-top: 1px; color: var(--green-800); }
.spec-group + .spec-group{ margin-top: 18px; }
.spec-group h3{ margin-bottom: 2px; color: var(--green-700); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.spec-table{ width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td{ padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom: 0; }
.spec-table th{ width: 48%; padding-right: 14px; color: var(--ink-2); font-weight: 500; }
.spec-table td{ color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pdp-help{
  display: grid; justify-items: start; gap: 8px;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: #fff;
}
.pdp-help-ico{ width: 28px; height: 28px; color: var(--green-400); }
.pdp-help h2{ color: #fff; font-size: 1.15rem; }
.pdp-help p{ color: oklch(0.90 0.02 255); font-size: .92rem; }
.pdp-help .btn{ margin-top: 6px; }

.pdp-related{ background: var(--paper); border-top: 1px solid var(--line); padding-block: clamp(28px, 5vw, 64px); }
.pdp-related-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.pdp-related-head h2{ font-size: clamp(1.3rem, 4.6vw, 1.8rem); }

/* ---- barra fija de compra (celular) ---- */
.pdp-bar{
  position: fixed; z-index: var(--z-fab);
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px oklch(0.235 0.125 268 / .10);
  transform: translateY(110%);
  transition: transform var(--mid) var(--ease);
}
.pdp-bar.is-on{ transform: none; }
.pdp-bar-info{ flex: 1; min-width: 0; }
.pdp-bar-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: .78rem; }
.pdp-bar-price{ font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.pdp-bar .btn{ min-height: 46px; padding-inline: 16px; }
@media (min-width: 960px){ .pdp-bar{ display: none; } }
@media (max-width: 959.98px){
  .pdp-page .fab{ display: none; }
  .pdp-page .site-footer{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ============================ PEDIDO ============================ */
.cart{
  position: fixed; z-index: var(--z-drawer);
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px oklch(0.235 0.125 268 / .18);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--mid) var(--ease), visibility 0s linear var(--mid);
}
.cart.is-open{ transform: none; visibility: visible; transition: transform var(--mid) var(--ease), visibility 0s; }
.cart-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cart-title{ display: flex; align-items: center; gap: 8px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.15rem; }
.cart-title .ico{ width: 22px; height: 22px; color: var(--blue-700); }
.cart-body{ flex: 1; overflow-y: auto; padding: 0 16px; overscroll-behavior: contain; }
.cart-empty{ display: grid; justify-items: center; gap: 8px; padding: 44px 8px; text-align: center; color: var(--ink-2); font-size: .92rem; }
.cart-empty strong{ color: var(--ink); }
.cart-empty-ico{ width: 40px; height: 40px; color: var(--blue-400); }
.cart-empty .btn{ margin-top: 8px; }
.cart-list{ list-style: none; margin: 0; padding: 0; }
.cart-item{ display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item:last-child{ border-bottom: 0; }
.cart-item-img{ width: 68px; height: 68px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.cart-item-name{ font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cart-item-name a{ color: var(--ink); text-decoration: none; }
.cart-item-name a:hover{ color: var(--blue-700); text-decoration: underline; }
.cart-item-ref{ margin-top: 2px; color: var(--ink-2); font-size: .78rem; overflow-wrap: anywhere; }
.cart-item-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.qty-sm{ min-height: 42px; }
.qty-sm button{ width: 40px; height: 40px; }
.qty-sm output{ width: 26px; font-size: .95rem; }
.cart-item-price{ font-weight: 700; font-size: .95rem; white-space: nowrap; }
.cart-remove{
  min-height: 36px; padding: 0;
  background: none; border: 0;
  color: var(--ink-2); font: inherit; font-size: .82rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cart-remove:hover{ color: oklch(0.47 0.17 25); }
.cart-foot{ display: grid; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--paper-2); border-top: 1px solid var(--line); }
.cart-total{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: .9rem; }
.cart-total strong{ font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.cart-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.field-light{ display: block; min-width: 0; }
.field-light > span{ display: block; margin-bottom: 4px; color: var(--ink-2); font-size: .78rem; font-weight: 600; }
.field-light em{ font-style: normal; font-weight: 500; }
.field-light input, .field-light select{
  width: 100%; min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background-color: var(--paper); color: var(--ink);
  font: inherit; font-size: 1rem;
}
.field-light input:focus, .field-light select:focus{ border-color: var(--blue-700); }
.cart-note{ color: var(--ink-2); font-size: .76rem; line-height: 1.4; }

/* ---- aviso al agregar ---- */
.toast{
  position: fixed; z-index: calc(var(--z-fab) + 1);
  left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 28px);
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: var(--night); color: #fff;
  box-shadow: 0 12px 32px oklch(0.155 0.04 264 / .35);
  font-size: .9rem; font-weight: 600; line-height: 1.3;
  opacity: 0; transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast > .ico{ width: 18px; height: 18px; color: var(--green-400); }
.toast button{
  min-height: 40px; padding: 6px 12px;
  border: 0; border-radius: 10px;
  background: oklch(1 0 0 / .14); color: #fff;
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.toast button:hover{ background: oklch(1 0 0 / .22); }

/* ============================ RESEÑAS (solo vista previa) ============================ */
.draft-banner{
  position: relative; z-index: calc(var(--z-sticky) + 1);
  padding: 8px 16px;
  background: oklch(0.88 0.12 90); color: oklch(0.28 0.06 70);
  text-align: center; font-size: .82rem; font-weight: 700; line-height: 1.35;
}
.rev-section{ background: var(--paper); border-top: 1px solid var(--line); }
.rev-draft{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 5px 12px;
  border-radius: 999px;
  background: oklch(0.95 0.06 90); color: oklch(0.36 0.07 70);
  font-size: .8rem; font-weight: 700;
}
.rev-draft .ico{ width: 15px; height: 15px; flex: none; }
.rev-grid{
  list-style: none; margin: 0 -18px; padding: 2px 18px 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 80vw);
  gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 18px;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
@media (min-width: 760px){
  .rev-grid{ margin: 0; padding: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; overflow: visible; }
}
@media (min-width: 1040px){ .rev-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rev-card{
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-snap-align: start;
}
.rev-stars{ display: flex; gap: 2px; color: oklch(0.76 0.16 75); }
.rev-stars .ico{ width: 17px; height: 17px; }
.rev-stars .is-off{ color: var(--line-2); }
.rev-card blockquote{ flex: 1; margin: 0; }
.rev-card blockquote p{ color: var(--ink); font-size: .95rem; line-height: 1.55; }
.rev-who{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .88rem; }
.rev-who span{ color: var(--ink-2); }
.rev-prod, .rev-prod-t{
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--paper-3);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.rev-prod{ color: var(--blue-700); }
.rev-prod:hover{ text-decoration: underline; text-underline-offset: 3px; }
.rev-prod-t{ color: var(--ink-2); }
.rev-compact{ background: var(--paper-2); }
.rev-section .sec-head .trust-link{ margin-top: 6px; }
/* más de 6 reseñas: el resto se abre con "Ver las N opiniones" (sin JS se ven todas) */
.js .rev-section:not(.rev-open) .rev-extra{ display: none; }
.rev-more{ display: flex; justify-content: center; margin-top: 18px; }

@media (prefers-reduced-motion: reduce){
  .pcard:hover{ transform: none; }
  .pcard:hover .pcard-media img{ transform: none; }
}