/* ============================================================================
   shop.css — PLP + tarjeta de producto (Fase 3 · Ronda 1 · theme 0.8.41)
   Dos modos: MARCA (packshot) y CLÍNICO (empaque placeholder + monografía).
   Usa los tokens del theme (dkt-color-tokens + tokens.css, site-wide).
   Todo scopeado bajo .dkt-pcard / .woocommerce para ganar especificidad sobre
   Astra + el CSS inline del motor SIN !important (salvo la retícula, ver nota).
   ========================================================================== */

/* ---- Cabecera de categoría: banda sobria de marca ---- */
.woocommerce .woocommerce-products-header{margin:0 0 var(--space-5)}
.woocommerce .woocommerce-products-header__title,
.woocommerce .page-title{
  font-family:var(--dkt-font-titles);color:var(--dkt-vino);
  font-size:var(--fs-xl);letter-spacing:-.01em;margin:0 0 .35rem
}
.woocommerce .term-description,
.woocommerce .woocommerce-products-header + .term-description{
  color:var(--dkt-muted);max-width:62ch;font-size:.95rem
}
.woocommerce .woocommerce-result-count{color:var(--dkt-muted);font-size:.82rem}
.woocommerce .woocommerce-ordering select{
  font-family:var(--dkt-font-body);font-size:.85rem;color:var(--dkt-ink);
  background:#fff;border:1px solid var(--dkt-line);border-radius:var(--dkt-radius);padding:.45rem .7rem
}

/* ---- Retícula ----
   NOTA: Astra fija el ancho de columnas de ul.products; para imponer la retícula
   premium hace falta ganarle. Se usa una cadena específica; si Astra insiste con
   inline, ajustar columnas del shop desde el Customizer de Astra (documentado). */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);
  margin:0;padding:0;list-style:none
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto;margin:0;float:none;clear:none
}
.woocommerce ul.products li.product::before{content:none}

/* ---- Tarjeta ---- */
.dkt-pcard{
  background:#fff;border:1px solid var(--dkt-line);border-radius:var(--dkt-radius-lg);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:transform var(--dur,240ms) var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow var(--dur,240ms),border-color var(--dur,240ms)
}
.dkt-pcard:hover{transform:translateY(-4px);box-shadow:var(--dkt-shadow-lg);border-color:#E7C6D3}
.dkt-pcard__media{
  position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;
  padding:1.1rem;background:radial-gradient(120% 90% at 50% 18%,#fff,var(--dkt-paper) 96%)
}
.dkt-pcard__imglink{display:flex;align-items:center;justify-content:center;width:100%}
.dkt-pcard__media img{
  height:158px;width:auto;object-fit:contain;transition:transform var(--dur,240ms) var(--ease,ease)
}
.dkt-pcard--marca .dkt-pcard__media img{filter:drop-shadow(0 14px 22px rgba(95,14,57,.18))}
.dkt-pcard--marca:hover .dkt-pcard__media img{transform:translateY(-8px) scale(1.03)}
/* Empaque placeholder (Cat A/B): la sombra viene en la imagen; se sirve a mayor tamaño */
.dkt-pcard .dkt-rx-pack{height:auto;width:100%;max-height:158px;object-fit:contain}

/* Badge del motor: REUBICADO a la esquina sup. izq. (ya no tapa el packshot).
   Se conservan los colores sólidos on-brand del motor (inline); solo posición/forma. */
.dkt-pcard .dkt-loop-badge{
  left:12px;right:auto;top:12px;
  font-family:var(--dkt-font-titles);font-weight:600;border-radius:var(--radius-pill,999px);
  box-shadow:var(--dkt-shadow-sm)
}
/* Chips SUAVES del mockup aprobado (los 2 modos). El motor fija bg/color como
   estilo INLINE del elemento (specificity 1,0,0,0), imposible de vencer por clase
   → ÚNICA excepción justificada de !important. NO se toca el texto ni se oculta.
   Colores AA verificados en el mockup (los tokens del theme no traen variantes soft). */
.dkt-pcard--cat-a .dkt-loop-badge{background:#FBF0F5 !important;color:#5F0E39 !important;border:1px solid #E7CEDA !important;box-shadow:var(--dkt-shadow-sm) !important}
.dkt-pcard--cat-b .dkt-loop-badge{background:#FEF6E7 !important;color:#B45309 !important;border:1px solid #F3D9A6 !important;box-shadow:var(--dkt-shadow-sm) !important}
.dkt-pcard--cat-c .dkt-loop-badge{background:#ECFBFD !important;color:#0E7490 !important;border:1px solid #BEE9F0 !important;box-shadow:var(--dkt-shadow-sm) !important}

/* ---- Cuerpo ---- */
.dkt-pcard__body{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.dkt-pcard__eyebrow{
  font-family:var(--dkt-font-titles);font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink,#8E0045)
}
.dkt-pcard__title{font-family:var(--dkt-font-titles);font-weight:600;font-size:.98rem;line-height:1.25;margin:0}
.dkt-pcard__title a{color:var(--dkt-ink);text-decoration:none}
.dkt-pcard__title a:hover{color:var(--dkt-magenta)}
.dkt-pcard__mono{font-size:.84rem;color:var(--dkt-ink);margin:.1rem 0 0}
.dkt-pcard__pres{font-size:.76rem;color:var(--dkt-muted);margin:.05rem 0 0}

/* Precio (filtrado por el motor). "(IVA incluido)" discreto (decisión Ricardo). */
.dkt-pcard__price{margin-top:.15rem;font-family:var(--dkt-font-titles);font-weight:700;color:var(--dkt-vino)}
.dkt-pcard__price .woocommerce-Price-amount{font-size:var(--fs-lg);color:var(--dkt-vino)}
.dkt-pcard__price .woocommerce-price-suffix{
  font-family:var(--dkt-font-body);font-weight:400;font-size:.7rem;color:var(--dkt-muted);margin-left:.25rem
}
/* Estados de precio por rol (dual-pricing): tachado gris + rol magenta */
.dkt-pcard__price del{color:#9CA3AF;opacity:.8;font-size:.85em;margin-right:.3rem}
.dkt-pcard__price ins{text-decoration:none}
.dkt-pcard__price ins .woocommerce-Price-amount{color:var(--dkt-magenta)}
.dkt-pcard__price .dkt-precio-doctor{
  display:inline-block;margin-left:.4rem;font-family:var(--dkt-font-titles);font-weight:600;font-size:.68rem;
  color:#8E0045;background:#FBEAF1;border:1px solid #F1C9DA;border-radius:var(--radius-pill,999px);padding:.15rem .5rem
}

/* Botón añadir al carrito (WC nativo, AJAX intacto) restilado a píldora magenta */
.dkt-pcard__cta{margin-top:.7rem}
.dkt-pcard__cta .button,
.dkt-pcard__cta .added_to_cart{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--dkt-font-titles);font-weight:600;font-size:.875rem;line-height:1;
  background:var(--dkt-magenta);color:#fff;border:2px solid transparent;border-radius:var(--radius-pill,999px);
  padding:.6rem 1.1rem;box-shadow:var(--dkt-shadow-sm);
  transition:transform var(--dur,240ms) var(--ease,ease),background var(--dur,240ms)
}
.dkt-pcard__cta .button:hover{background:var(--dkt-magenta-mid);transform:translateY(-2px)}
.dkt-pcard__cta .added_to_cart{margin-top:.4rem;background:#fff;color:var(--dkt-vino);border-color:var(--dkt-line)}

/* ---- Modo CLÍNICO: monografía sobria ---- */
.dkt-pcard--clinico{border-top:3px solid var(--dkt-vino)}
.dkt-pcard--clinico .dkt-pcard__media{min-height:172px}
.dkt-pcard--clinico:hover{transform:translateY(-3px);box-shadow:var(--dkt-shadow-md);border-color:var(--dkt-line)}
.dkt-pcard__rxhint{
  font-size:.7rem;color:var(--dkt-vino);margin:.4rem 0 0;display:flex;align-items:center;gap:.3rem
}
.dkt-pcard__rxhint::before{content:"✓";font-weight:700}

/* ---- Botón "cargar más" (lo pinta el hook en Stage 2; estilo listo) ---- */
.dkt-shop-loadmore{display:flex;justify-content:center;margin-top:var(--space-6)}

/* ---- Responsive ---- */
/* ---- Cabecera: arco de marca (banda sobria); en clínico se atenúa ---- */
.dkt-shop-arco{
  display:block;height:12px;width:88px;margin:.5rem 0 .2rem;background:var(--dkt-magenta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 4 C40 13 80 13 117 4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 4 C40 13 80 13 117 4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%
}
body.dkt-cat-a .dkt-shop-arco,body.dkt-cat-b .dkt-shop-arco{background:var(--dkt-vino);opacity:.5}

/* ---- Chips de subcategoría (P1) ---- */
.dkt-subnav{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1rem;margin:.2rem 0 .4rem;scrollbar-width:thin}
.dkt-subnav a{
  white-space:nowrap;font-family:var(--dkt-font-titles);font-weight:500;font-size:.82rem;text-decoration:none;
  color:var(--dkt-vino);background:#fff;border:1px solid var(--dkt-line);border-radius:var(--radius-pill,999px);
  padding:.4rem .9rem;transition:all var(--dur,240ms)
}
.dkt-subnav a:hover{border-color:var(--dkt-magenta);color:var(--dkt-magenta)}
.dkt-subnav a[aria-current]{background:var(--dkt-vino);color:#fff;border-color:var(--dkt-vino)}

/* ---- Sticky buy-bar móvil (P6) ---- */
.dkt-stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;align-items:center;gap:.8rem;
  background:#fff;border-top:1px solid var(--dkt-line);box-shadow:0 -6px 18px rgba(95,14,57,.10);padding:.6rem .9rem
}
.dkt-stickybuy__price{font-family:var(--dkt-font-titles);font-weight:700;color:var(--dkt-vino);font-size:1.1rem;line-height:1.1}
/* IVA se CONSERVA (decisión Ricardo), diminuto — nunca oculto en la superficie de compra. */
.dkt-stickybuy__price .woocommerce-price-suffix{display:inline;font-family:var(--dkt-font-body);font-weight:400;font-size:.58rem;color:var(--dkt-muted);margin-left:.2rem}
.dkt-stickybuy__rx{display:block;font-family:var(--dkt-font-body);font-weight:400;font-size:.62rem;color:var(--dkt-vino)}
.dkt-stickybuy .dkt-btn{flex:1;justify-content:center}

@media(max-width:1024px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.dkt-stickybuy{display:flex}body.single-product{padding-bottom:70px}}
@media(max-width:760px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.dkt-pcard,.dkt-pcard__media img,.dkt-pcard__cta .button{transition:none}}