/*
Theme Name:  RIGIEL DiELI
Theme URI:   https://dieli.com.mx
Author:      RIGIEL DiELI
Author URI:  https://dieli.com.mx
Description: Tema WooCommerce profesional para RIGIEL DiELI — Distribuidora autorizada LaMotte. Equipamiento de laboratorio, análisis de agua y suelos. Optimizado para SEO y conversión.
Version:     2.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dieli
Tags:        woocommerce, ecommerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, post-formats, right-sidebar, sticky-post, threaded-comments, translation-ready

Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.0
*/

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --azul-corp:        #1F4E78;
  --azul-agua:        #0078D4;
  --verde-stock:      #27AE60;
  --naranja-pedido:   #E67E22;
  --gris-prof:        #5A6C7D;
  --gris-claro:       #ECF0F1;
  --gris-borde:       #E0E0E0;
  --gris-linea:       #ECEFF1;
  --blanco:           #FFFFFF;
  --texto-negro:      #2C3E50;
  --rojo-suave:       #E74C3C;
  --amarillo-suave:   #FEF5E7;
  --bg-gris:          #F5F5F5;
  --bg-valor:         #F8F9FA;
  --azul-claro-info:  #E8F0F7;

  --font-head: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  --shadow-card:       0 2px 8px rgba(0,0,0,.10);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,.14);
  --shadow-modal:      0 4px 20px rgba(0,0,0,.15);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --container-max: 1480px;
  --container-px:  120px;

  --header-h: 80px;
}

/* ─── RESET + BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-agua); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.4em; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--azul-corp);
  margin-top: 0;
}

/* ─── SKIP LINK (accesibilidad) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  background: var(--azul-corp);
  color: var(--blanco);
  padding: .5rem 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  z-index: 9999;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

/* ─── LAYOUT ─────────────────────────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ─── HEADER ─────────────────────────────────────────────────────── */
#masthead {
  height: var(--header-h);
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-linea);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.site-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 60px;
}

/* Logo */
/* Logo — must override WordPress's inline width/height HTML attributes */
.site-logo img,
.site-logo a img,
.site-logo .custom-logo-link img,
.custom-logo-link img.custom-logo {
  height: var(--logo-h, 40px) !important;
  width: auto !important;
  max-height: var(--logo-h, 40px) !important;
  display: block;
  object-fit: contain;
}
.site-logo-svg { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo-svg:hover { text-decoration: none; }

/* Nav */
.main-navigation { display: flex; align-items: center; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; align-items: center; }
.main-navigation a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--azul-corp);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a {
  color: var(--naranja-pedido);
  border-bottom-color: var(--naranja-pedido);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-cart-link { position: relative; display: flex; align-items: center; color: var(--azul-corp); cursor: pointer; }
.header-cart-link svg { stroke: var(--azul-corp); }
.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  background: var(--naranja-pedido);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 700;
  width: 19px; height: 19px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
}

/* ─── HERO BANNER ────────────────────────────────────────────────── */
.hero-banner {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--azul-corp) 0%, #0a2840 100%);
}
.hero-banner-bg {
  position: absolute;
  inset: 0;
  background: url('assets/images/hero-bg.jpg') center/cover no-repeat;
  opacity: .45;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,20,32,.55);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  color: var(--blanco);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px;
  color: var(--blanco);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--naranja-pedido);
}
.hero-banner h1 {
  color: var(--blanco);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 760px;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.hero-banner p {
  color: rgba(255,255,255,.9);
  font-size: 19px;
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 36px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-trust {
  display: flex;
  gap: 48px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  margin-top: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--azul-corp); color: var(--blanco); border-color: var(--azul-corp); }
.btn-primary:hover { background: #163a5a; border-color: #163a5a; color: var(--blanco); }
.btn-naranja { background: var(--naranja-pedido); color: var(--blanco); border-color: var(--naranja-pedido); }
.btn-naranja:hover { background: #ca6d1b; border-color: #ca6d1b; color: var(--blanco); }
.btn-verde { background: var(--verde-stock); color: var(--blanco); border-color: var(--verde-stock); }
.btn-verde:hover { background: #1e8449; border-color: #1e8449; color: var(--blanco); }
.btn-ghost { background: transparent; color: var(--azul-corp); border: 2px solid var(--azul-corp); }
.btn-ghost:hover { background: #f0f0f0; color: var(--azul-corp); }
.btn-ghost-blanco { background: transparent; color: var(--blanco); border: 2px solid var(--blanco); }
.btn-ghost-blanco:hover { background: rgba(255,255,255,.12); color: var(--blanco); }
.btn-ghost-naranja { background: transparent; color: var(--naranja-pedido); border: 2px solid var(--naranja-pedido); }
.btn-ghost-naranja:hover { background: rgba(230,126,34,.08); }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-full { width: 100%; }

/* ─── BADGES ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 3px;
}
.badge-stock   { background: var(--verde-stock); color: var(--blanco); }
.badge-pedido  { background: var(--naranja-pedido); color: var(--blanco); }

/* ─── PRODUCT CARDS ──────────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--blanco);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gris-linea);
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.product-card-topline { height: 5px; }
.product-card-image {
  position: relative;
  height: 220px;
  background: #F4F8FB;
  overflow: hidden;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}
.product-card-badge { position: absolute; top: 14px; right: 14px; z-index: 2; }
.product-card-body { padding: 20px 22px 8px; border-bottom: 1px solid var(--gris-linea); flex: 1; display: flex; flex-direction: column; }
/* Título más chico; el código gana peso (los clientes buscan por código).
   Alineado a la izquierda: el justificado abría huecos feos en columnas angostas.
   Se limita a 2 líneas (…) para que TODAS las tarjetas midan igual y el precio
   quede alineado; el nombre completo se ve al pasar el mouse (title del enlace). */
.product-card-body h3 {
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto-negro);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* reserva 2 líneas aunque el nombre sea corto */
}
.product-card-code { font-size: 15px; color: var(--gris-prof); }
.product-card-code strong { color: var(--texto-negro); }

/* Mini-slide: la imagen va cambiando al pasar el mouse (JS en main.js) */
.product-card-image img { transition: opacity .13s ease; }
.product-card-image img.is-fading { opacity: 0; }
/* Indicador discreto de que hay más fotos */
.product-card-more {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--gris-borde);
  border-radius: 20px;
  padding: 3px 9px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-prof);
}
.product-card-price {
  margin-top: auto; /* ancla el precio al fondo del cuerpo → alineado entre tarjetas */
  padding-top: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px; /* ~15% menos que 26px original */
  text-align: center;
  color: var(--texto-negro);
  letter-spacing: -.01em;
}
.product-card-foot { padding: 14px 22px 18px; }

/* WooCommerce overrides — product loop */
.woocommerce ul.products li.product { margin: 0 !important; }
.woocommerce ul.products { margin: 0 !important; }

/* ─── CATEGORY HERO ──────────────────────────────────────────────── */
.category-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--azul-agua) 0%, var(--azul-corp) 100%);
}
.category-hero .hero-overlay { background: rgba(0,120,212,.55); }
.category-hero .hero-content { color: var(--blanco); }
.category-hero h1 { font-size: 48px; color: var(--blanco); }

/* ─── BREADCRUMBS ────────────────────────────────────────────────── */
.breadcrumbs {
  padding: 16px 0;
  font-size: 14px;
  color: var(--gris-prof);
  border-bottom: 1px solid var(--gris-linea);
}
.breadcrumbs a { color: var(--azul-corp); opacity: .75; }
.breadcrumbs a:hover { opacity: 1; }
.breadcrumbs .sep { margin: 0 10px; opacity: .4; }

/* ─── SIDEBAR / FILTERS ──────────────────────────────────────────── */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 40px 0 80px;
  align-items: start;
}
.shop-sidebar {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background: var(--blanco);
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.filter-group { border-top: 1px solid var(--gris-linea); padding: 16px 0; }
.filter-group-title {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--azul-corp);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.widget_layered_nav ul,
.widget_price_filter { list-style: none; margin: 0; padding: 0; }
.widget_layered_nav ul li a,
.widget_layered_nav ul li { font-size: 14px; color: var(--texto-negro); }

/* ─── SINGLE PRODUCT ─────────────────────────────────────────────── */
.single-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  /* El padding-bottom era 80px y las tabs sumaban 56px de margin = 136px de
     hueco antes de la descripción. Lo dejamos compacto. */
  padding: 32px 0 24px;
  align-items: start;
}
/* Columna izquierda: galería + compartir (así el grid sigue siendo de 2 columnas) */
.product-gallery-col { align-self: start; }
.product-gallery { background: #F4F8FB; border-radius: var(--radius-lg); overflow: hidden; }
/* Imagen principal más contenida (antes 480px se veía enorme) */
.product-gallery img { width: 100%; height: 380px; object-fit: contain; padding: 20px; }

/* Miniaturas más grandes y con estado activo */
.product-thumbs {
  display: flex;
  gap: 10px;
  padding: 14px 16px 16px;
  background: #F4F8FB;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  flex-wrap: wrap;
}
.product-thumb {
  width: 104px;
  height: 104px;
  padding: 6px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.product-thumb:hover { border-color: var(--azul-agua); }
.product-thumb.is-active { border: 2px solid var(--azul-agua); box-shadow: 0 0 0 3px rgba(0,120,212,.12); }
.product-info h1 { font-size: 26px; line-height: 1.3; margin-bottom: 10px; }

/* Código destacado arriba del título */
.product-sku-big {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--naranja-pedido);
  line-height: 1.1;
  margin-bottom: 4px;
}

/* Estrellas + reseñas */
.product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.product-rating__stars { display: inline-flex; gap: 2px; }
.product-rating__stars svg { fill: #DDE3E8; }
.product-rating__stars svg.is-on { fill: #F5B301; }
.product-rating__count { color: var(--gris-prof); text-decoration: none; }
.product-rating__count:hover { color: var(--azul-agua); }
.product-rating__sep { color: var(--gris-borde); }
.product-rating__write { color: var(--azul-agua); font-weight: 600; text-decoration: none; }
.product-rating__write:hover { text-decoration: underline; }

/* Disponibilidad */
.product-availability { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.product-availability__note { font-size: 13px; color: var(--naranja-pedido); }

/* Fila de compra: [cantidad] [añadir al carrito] [cotizar] en una sola línea.
   El form.cart de WooCommerce se renderiza fuera de .product-add-to-cart, por eso
   la cantidad salía a todo lo ancho y encima del botón: aquí lo maquetamos. */
.product-buy-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.product-buy-row form.cart {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  flex: 1 1 300px;
  min-width: 0;
}
.product-buy-row .quantity { flex: 0 0 auto; margin: 0; }
.product-buy-row .quantity input {
  width: 72px;
  height: 52px;
  padding: 0 6px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--texto-negro);
  background: var(--blanco);
  outline: none;
}
.product-buy-row .quantity input:focus { border-color: var(--azul-agua); box-shadow: 0 0 0 3px rgba(0,120,212,.12); }
/* Botón nativo de WooCommerce (añadir al carrito): acción principal, más ancho */
.product-buy-row .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 180px;
  height: 52px;
  padding: 0 20px;
}
/* Cotización: naranja, coherente con "Bajo Pedido" */
.product-buy-row .open-cotizacion {
  flex: 1 1 190px;
  min-width: 190px;
  height: 52px;
  padding: 0 20px;
  white-space: nowrap;
}
.product-quote-hint { font-size: 12.5px; color: var(--gris-prof); margin: 10px 0 0; line-height: 1.5; }

/* Métodos de pago aceptados */
.product-payments {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gris-linea);
}
.product-payments__title {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-prof);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.product-payments__logos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.product-payments__logo {
  height: 30px;
  width: auto;
  padding: 5px 8px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  object-fit: contain;
  transition: border-color .15s;
}
.product-payments__logo:hover { border-color: var(--azul-agua); }

@media (max-width: 480px) {
  .product-buy-row form.cart { flex: 1 1 100%; }
  .product-buy-row .open-cotizacion { flex: 1 1 100%; }
}
.product-meta { font-size: 13px; color: var(--gris-prof); margin-bottom: 16px; }
.product-short-desc { font-size: 15px; line-height: 1.7; color: var(--gris-prof); margin-bottom: 24px; }
.product-price-block { margin-bottom: 28px; }
.product-price-block .price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  color: var(--texto-negro);
}
.woocommerce .single-product .woocommerce-Price-amount { font-size: 38px; font-weight: 800; }
.product-add-to-cart { display: flex; gap: 14px; flex-wrap: wrap; }
.product-add-to-cart .quantity input {
  width: 80px; height: 52px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--azul-corp);
  color: var(--blanco);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: none;
  padding: 0 28px;
  height: 52px;
  cursor: pointer;
  transition: background .15s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #163a5a; }
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--verde-stock);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #1e8449; }

/* ─── PRODUCT TABS ───────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--gris-linea);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--azul-corp);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-prof);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--azul-corp); }
.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 32px;
  border: 1px solid var(--gris-linea);
  border-top: none;
  background: var(--blanco);
}

/* ─── FICHA: PESTAÑAS Y RELACIONADOS ─────────────────────────────── */
/* OJO: el CSS de más arriba usa selectores `.woocommerce div.product …` que
   NUNCA aplican, porque nuestra plantilla no tiene ese contenedor. Estas reglas
   apuntan directo al markup real. */
.woocommerce-tabs { margin-top: 8px; }
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--gris-borde);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 13px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-prof);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--azul-corp); }
.woocommerce-tabs ul.tabs li.active a {
  color: var(--azul-corp);
  border-bottom-color: var(--azul-corp);
}
.woocommerce-tabs .panel {
  padding: 30px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--texto-negro);
}
.woocommerce-tabs .panel h2 {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--azul-corp);
  margin-bottom: 14px;
}
/* Tabla de atributos (Especificaciones) con formato legible */
.woocommerce-tabs table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gris-linea);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-linea);
  font-size: 14px;
  text-align: left;
}
.woocommerce-tabs table.shop_attributes th {
  width: 34%;
  background: var(--bg-valor);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--azul-corp);
}
.woocommerce-tabs table.shop_attributes tr:last-child th,
.woocommerce-tabs table.shop_attributes tr:last-child td { border-bottom: none; }
.woocommerce-tabs table.shop_attributes p { margin: 0; }

/* Productos relacionados: rejilla contenida (salían enormes por falta de CSS) */
.related.products ul.products,
.upsells.products ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.related.products ul.products li.product,
.upsells.products ul.products li.product {
  margin: 0;
  width: auto;
  float: none;
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 0 16px;
  text-align: center;
  transition: box-shadow .18s, transform .18s;
}
.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  padding: 14px;
  background: #F4F8FB;
  margin: 0 0 12px;
}
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-negro);
  line-height: 1.4;
  padding: 0 14px;
  margin: 0 0 8px;
}
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--azul-corp);
  padding: 0 14px;
  margin-bottom: 12px;
}
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button { margin: 0 14px; height: 38px; font-size: 12px; padding: 0 12px; }
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--azul-corp);
  margin-bottom: 24px;
}

@media (max-width: 1100px) {
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: 1fr; }
  .product-sku-big { font-size: 22px; }
  .product-info h1 { font-size: 21px; }
  .product-gallery img { height: 280px; }
}

/* ─── CART ────────────────────────────────────────────────────────── */
/* WooCommerce no aporta estilos en escritorio (los desactivamos), así que la
   página del carrito clásico se maqueta aquí completa. */
.woocommerce table.cart {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}
.woocommerce table.cart th {
  background: var(--azul-corp);
  color: var(--blanco);
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px;
  text-align: left;
}
.woocommerce table.cart td { padding: 18px 14px; vertical-align: middle; border-bottom: 1px solid var(--gris-linea); }
/* Imagen del producto: sin esto sale gigante */
.woocommerce table.cart td.product-thumbnail { width: 96px; }
.woocommerce table.cart td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border: 1px solid var(--gris-linea);
  border-radius: var(--radius-sm);
  background: var(--blanco);
}
.woocommerce table.cart td.product-name a { color: var(--azul-corp); font-weight: 600; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--azul-agua); }
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal { white-space: nowrap; }
.woocommerce table.cart td.product-subtotal { font-family: var(--font-head); font-weight: 700; color: var(--texto-negro); }
/* Botón eliminar (la "x") */
.woocommerce table.cart td.product-remove { width: 44px; text-align: center; }
.woocommerce table.cart a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-gris); color: var(--rojo-suave) !important;
  font-size: 18px; line-height: 1; text-decoration: none; font-weight: 700;
}
.woocommerce table.cart a.remove:hover { background: var(--rojo-suave); color: #fff !important; }
/* Cantidad */
.woocommerce table.cart td.product-quantity .qty {
  width: 72px; height: 40px; padding: 0 8px; text-align: center;
  border: 1px solid var(--gris-borde); border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 600;
}
/* Fila de acciones: cupón + actualizar (venían encimados) */
.woocommerce table.cart td.actions {
  padding: 18px 14px;
  background: var(--bg-valor);
  border-bottom: none;
}
.woocommerce table.cart td.actions .coupon {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  float: none;
  margin: 0;
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce table.cart td.actions .coupon .input-text {
  width: 200px; height: 44px; padding: 0 12px;
  border: 1px solid var(--gris-borde); border-radius: var(--radius-sm);
  font-size: 14px; outline: none;
}
.woocommerce table.cart td.actions .coupon .input-text:focus { border-color: var(--azul-agua); }
.woocommerce table.cart td.actions .button { height: 44px; padding: 0 20px; }
/* "Actualizar carrito" a la derecha, separado del cupón */
.woocommerce table.cart td.actions > button[name="update_cart"],
.woocommerce table.cart td.actions > input[name="update_cart"] { float: right; }
.woocommerce table.cart td.actions::after { content: ""; display: table; clear: both; }

/* Totales del carrito */
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart-collaterals .cart_totals {
  width: 100%;
  max-width: 420px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th,
.cart_totals table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--gris-linea);
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}
.cart_totals table th { font-family: var(--font-head); font-weight: 600; color: var(--gris-prof); width: 45%; }
.cart_totals table td { text-align: right; color: var(--texto-negro); }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--azul-corp);
  padding-top: 16px;
}
.cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; }
.cart_totals ul#shipping_method li { padding: 3px 0; }
.cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--gris-prof); margin: 6px 0 0; text-align: right; }
.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .checkout-button {
  display: block; width: 100%; text-align: center;
  height: 52px; line-height: 52px; padding: 0;
  background: var(--azul-corp) !important; color: var(--blanco) !important;
  font-size: 15px !important;
}
.wc-proceed-to-checkout .checkout-button:hover { background: #163a5a !important; }

@media (max-width: 768px) {
  .cart-collaterals .cart_totals { max-width: 100%; }
  .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; }
  .woocommerce table.cart td.actions .coupon .input-text { width: 100%; }
  .woocommerce table.cart td.actions > button[name="update_cart"],
  .woocommerce table.cart td.actions > input[name="update_cart"] { float: none; width: 100%; margin-top: 10px; }
}
.cart_totals h2 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--azul-corp);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.woocommerce-checkout-payment { background: var(--bg-valor); border-radius: var(--radius-md); padding: 24px; }

/* ─── CHECKOUT ───────────────────────────────────────────────────── */
.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #D0D0D0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--texto-negro);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce form .form-row textarea { height: 100px; padding: 12px 14px; resize: none; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--naranja-pedido);
  box-shadow: 0 0 0 3px rgba(0,120,212,.15);
}
.woocommerce form .form-row label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--texto-negro);
  margin-bottom: 6px;
}
/* Selects con el mismo estilo que los inputs */
.woocommerce form .form-row select {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #D0D0D0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--texto-negro);
  width: 100%;
  background: #fff;
  outline: none;
}
.woocommerce form .form-row select:focus { border-color: var(--azul-agua); box-shadow: 0 0 0 3px rgba(0,120,212,.15); }

/* Grid también para envío y notas del pedido */
.woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ─── CHECKOUT CLÁSICO: LAYOUT 2 COLUMNAS ────────────────────────── */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 36px;
  align-items: start;
}
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1; min-width: 0; }
/* El bloque de pago va en la columna PRINCIPAL (izquierda), debajo de los
   datos del cliente, para que el formulario de tarjeta tenga espacio. */
.woocommerce-checkout form.checkout .dieli-payment-panel {
  grid-column: 1; grid-row: 2; min-width: 0;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.dieli-payment-panel__title {
  font-family: var(--font-head); font-size: 18px; color: var(--azul-corp);
  margin: 0 0 18px;
}
/* El sticky vive en el WRAPPER (no en #order_review): WooCommerce inyecta
   position:relative inline en #order_review al refrescarlo por AJAX y eso
   rompía el sticky al hacer scroll de regreso. Ocupa las 2 filas de la izq. */
.woocommerce-checkout form.checkout .dieli-checkout-side {
  grid-column: 2; grid-row: 1 / span 2;
  position: sticky; top: 96px;
  min-width: 0;
  align-self: start;
}
.woocommerce-checkout form.checkout #order_review_heading {
  margin: 0 0 12px;
  font-family: var(--font-head); font-size: 19px; color: var(--azul-corp);
}

/* Paneles de facturación / envío */
#customer_details .col-1,
#customer_details .col-2 {
  width: 100%;
  float: none;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.woocommerce-checkout h3 {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--azul-corp);
  margin-bottom: 18px;
}
.woocommerce-checkout h3#ship-to-different-address {
  display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer;
}
#ship-to-different-address input { accent-color: var(--azul-agua); width: 17px; height: 17px; }

/* Resumen del pedido (tarjeta lateral) */
#order_review {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
#order_review table.shop_table { width: 100%; border-collapse: collapse; }
#order_review table.shop_table th,
#order_review table.shop_table td {
  padding: 9px 4px;
  border-bottom: 1px solid var(--gris-linea);
  font-size: 13.5px;
  text-align: left;
  vertical-align: top;
}
/* Nombre del producto compacto: máx. 2 líneas (con muchos productos el
   recuadro se hacía larguísimo). La cantidad "× N" siempre visible. */
#order_review table.shop_table td.product-name {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#order_review table.shop_table td.product-name a,
#order_review table.shop_table td.product-name > span:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#order_review table.shop_table td.product-name .product-quantity {
  display: inline-block;
  color: var(--gris-prof);
  font-weight: 700;
}
#order_review table.shop_table thead th:last-child,
#order_review table.shop_table td.product-total,
#order_review table.shop_table tfoot td {
  text-align: right;
  /* Antes tenía white-space:nowrap → con miles, "(con impuestos)" se desbordaba.
     Ahora el importe y su sufijo pueden envolver dentro de la celda. */
  overflow-wrap: anywhere;
}
/* Ocultamos el "(con impuestos)" repetido en CADA línea (producto, subtotal,
   envío): es redundante y alargaba mucho el recuadro. El desglose de IVA se
   conserva SOLO en el Total (fila .order-total), que ya dice "incluye $X IVA". */
#order_review table.shop_table small,
#order_review table.shop_table .tax_label { display: none; }
#order_review table.shop_table .order-total small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--gris-prof);
  white-space: normal;
}
/* El importe (con la clase de WooCommerce) no se parte a media cifra */
#order_review .woocommerce-Price-amount { white-space: nowrap; }
#order_review table.shop_table tfoot th { font-family: var(--font-head); font-size: 13px; color: var(--gris-prof); overflow-wrap: anywhere; }
#order_review table.shop_table .order-total th,
#order_review table.shop_table .order-total td {
  border-bottom: none;
  font-size: 17px;
  color: var(--azul-corp);
  font-family: var(--font-head);
  font-weight: 700;
}
/* Opciones de envío (Skydropx en vivo): fila limpia [radio][etiqueta ...... precio] */
#order_review .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 13.5px; }
#order_review .woocommerce-shipping-methods li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  line-height: 1.4;
  border-bottom: 1px solid #eef1f4;
}
#order_review .woocommerce-shipping-methods li:last-child { border-bottom: none; }
#order_review .woocommerce-shipping-methods li input[type="radio"] { margin: 3px 0 0; flex: 0 0 auto; }
#order_review .woocommerce-shipping-methods li label { margin: 0; flex: 1 1 auto; color: var(--texto-negro); }
#order_review .woocommerce-shipping-methods li label .woocommerce-Price-amount { font-weight: 700; white-space: nowrap; color: var(--azul-corp); }

/* Métodos de pago */
#payment ul.wc_payment_methods { list-style: none; margin: 14px 0 0; padding: 0; }
/* Cada método en una fila alineada: [radio] [texto/logo] [ⓘ] */
#payment ul.wc_payment_methods li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
#payment ul.wc_payment_methods li input[type="radio"] { flex-shrink: 0; margin: 0; }
#payment ul.wc_payment_methods li > label {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* El logo que MP mete en la fila: tamaño fijo y alineado (no suelto abajo) */
#payment ul.wc_payment_methods li img {
  max-height: 24px;
  max-width: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  margin: 0;
  flex-shrink: 0;
}
/* Que el texto del método pueda encogerse y no empuje el logo fuera del marco */
#payment ul.wc_payment_methods li > label { min-width: 0; flex: 1 1 auto; }
#payment input[type="radio"] { accent-color: var(--azul-agua); }
/* El recuadro del método (formulario de tarjeta / datos de transferencia)
   ocupa toda la fila. WooCommerce muestra solo el del método seleccionado;
   nosotros solo lo estilizamos (antes lo escondíamos tras un ⓘ, se quitó). */
#payment ul.wc_payment_methods li div.payment_box { flex: 0 0 100%; }
#payment div.payment_box {
  background: var(--azul-claro-info);
  border-left: 3px solid var(--azul-agua);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}
#payment div.payment_box::before { display: none; } /* quita la flechita del core */
#payment .place-order { margin-top: 16px; }
#payment .place-order .button { width: 100%; }
/* Texto de privacidad más compacto */
#payment .woocommerce-privacy-policy-text p { font-size: 12.5px; line-height: 1.5; color: var(--gris-prof); margin: 10px 0 0; }

/* Casilla "¿Requieres factura?": fila destacada */
#billing_requiere_factura_field {
  background: var(--bg-valor);
  border: 1px dashed var(--gris-borde);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#billing_requiere_factura_field label { display: inline; margin: 0; cursor: pointer; font-weight: 600; }
#billing_requiere_factura_field input { accent-color: var(--azul-agua); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.dieli-cfdi-field .optional,
#billing_requiere_factura_field .optional { display: none; }

/* Checkbox "enviar a otra dirección": forzado activo por PHP; se oculta y el
   título queda como encabezado normal de la sección de envío. */
#ship-to-different-address input { display: none; }
.woocommerce-checkout h3#ship-to-different-address { cursor: default; }

/* Cupón reubicado dentro de "Tu pedido" */
.dieli-checkout-side .woocommerce-form-coupon-toggle { margin-bottom: 12px; }
.dieli-checkout-side .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13.5px;
  color: var(--gris-prof);
}
.dieli-checkout-side form.checkout_coupon {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px dashed var(--gris-borde);
  border-radius: var(--radius-sm);
  background: var(--bg-valor);
}
.dieli-checkout-side form.checkout_coupon .form-row { margin: 0; width: 100%; float: none; }
.dieli-checkout-side form.checkout_coupon input.input-text { height: 42px; width: 100%; margin-bottom: 8px; }
.dieli-checkout-side form.checkout_coupon .button { width: 100%; height: 42px; }

/* Selector de direcciones guardadas: a todo lo ancho y arriba del formulario */
#shipping_address_book_field,
#billing_address_book_field { grid-column: 1 / -1; }
/* Ocultar "(opcional)" del selector de direcciones del plugin */
#shipping_address_book_field .optional,
#billing_address_book_field .optional { display: none; }

/* Resumen de dirección colapsada (JS en main.js) */
.dieli-addr-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--azul-claro-info);
  border: 1px solid #CFE0EF;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  grid-column: 1 / -1;
}
.dieli-addr-summary__text { font-size: 14px; color: var(--texto-negro); line-height: 1.5; }
.dieli-addr-summary__btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 2px solid var(--azul-corp);
  border-radius: var(--radius-sm);
  color: var(--azul-corp);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.dieli-addr-summary__btn:hover { background: #f0f0f0; }

@media (max-width: 960px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout .dieli-payment-panel,
  .woocommerce-checkout form.checkout .dieli-checkout-side { grid-column: 1; grid-row: auto; position: static; }
  /* Orden en móvil: datos → resumen → pago (el resumen antes del botón). */
  .woocommerce-checkout form.checkout #customer_details   { order: 1; }
  .woocommerce-checkout form.checkout .dieli-checkout-side { order: 2; }
  .woocommerce-checkout form.checkout .dieli-payment-panel { order: 3; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ─── NOTICES ────────────────────────────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-left: 4px solid var(--verde-stock) !important;
  padding: 14px 20px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  font-family: var(--font-body) !important;
  background: #f0faf4 !important;
}
.woocommerce-info { border-left-color: var(--azul-agua) !important; background: var(--azul-claro-info) !important; }
.woocommerce-error { border-left-color: var(--rojo-suave) !important; background: #fdf0f0 !important; }

/* ─── SECTIONS ───────────────────────────────────────────────────── */
.section-featured-products { padding: 90px 0 60px; }
.section-categories { padding: 20px 0 60px; }
.section-values { background: var(--gris-claro); padding: 90px 0; }
.section-brands { padding: 60px 0; text-align: center; }

.section-eyebrow {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--naranja-pedido);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-heading {
  font-size: 38px;
  color: var(--azul-corp);
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.section-subtext {
  font-size: 16px;
  color: var(--gris-prof);
  max-width: 600px;
  margin: 0 auto;
}

/* Category banners */
.category-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.category-banner {
  position: relative;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: var(--blanco);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
.category-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.category-banner-text { position: relative; }
.category-banner-tag { font-family: var(--font-head); font-size: 13px; font-weight: 600; opacity: .85; letter-spacing: .1em; text-transform: uppercase; }
.category-banner-name { font-family: var(--font-head); font-size: 26px; font-weight: 700; margin-top: 4px; }
.category-banner-count { font-size: 14px; opacity: .9; margin-top: 8px; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card {
  background: var(--bg-valor);
  border-top: 5px solid var(--azul-corp);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.value-icon {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  margin-bottom: 22px;
}
.value-card h3 { font-size: 22px; color: var(--azul-corp); margin-bottom: 12px; }
.value-card p { font-size: 15px; line-height: 1.65; color: var(--gris-prof); margin: 0; }

/* Brands bar */
.brands-bar { display: flex; justify-content: center; gap: 64px; align-items: center; flex-wrap: wrap; opacity: .65; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--azul-corp); letter-spacing: .05em; }

/* ─── BOTÓN FLOTANTE DE WHATSAPP ─────────────────────────────────── */
.dieli-wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9990; /* debajo de modales/drawer (9999) */
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0;
  background: #25D366;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
}
.dieli-wa-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(37,211,102,.55); color: #fff; }
.dieli-wa-fab__icon {
  width: 58px; height: 58px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Etiqueta: colapsada por defecto, se despliega al pasar el mouse (desktop) */
.dieli-wa-fab__label {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transition: max-width .28s ease, opacity .2s ease, padding .28s ease;
}
.dieli-wa-fab:hover .dieli-wa-fab__label {
  max-width: 200px;
  opacity: 1;
  padding: 0 4px 0 18px;
}
/* Pulso sutil para llamar la atención (sin ser molesto) */
.dieli-wa-fab::after {
  content: "";
  position: absolute;
  right: 8px; bottom: 8px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: dieli-wa-pulse 2.4s ease-out infinite;
}
@keyframes dieli-wa-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dieli-wa-fab::after { animation: none; }
}
@media (max-width: 600px) {
  .dieli-wa-fab { right: 16px; bottom: 16px; height: 54px; }
  .dieli-wa-fab__icon { width: 54px; height: 54px; }
  /* En móvil no desplegamos la etiqueta (ocuparía mucho); solo el ícono */
  .dieli-wa-fab:hover .dieli-wa-fab__label { max-width: 0; opacity: 0; padding: 0; }
}

/* ─── COMPARTIR PRODUCTO (ficha) ─────────────────────────────────── */
.product-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gris-linea);
}
.product-share__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: var(--gris-prof);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: 2px;
}
.product-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  color: var(--gris-prof);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.product-share__btn:hover { border-color: currentColor; }
.product-share__btn--wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.product-share__btn--mail:hover { background: var(--azul-corp); border-color: var(--azul-corp); color: #fff; }
.product-share__btn--copy:hover { background: var(--azul-agua); border-color: var(--azul-agua); color: #fff; }
.product-share__btn.is-copied { background: var(--verde-stock); border-color: var(--verde-stock); color: #fff; }

/* ─── BUSCADOR DE LA TIENDA (sidebar) ────────────────────────────── */
.shop-search-wrap { position: relative; margin-bottom: 20px; }
.shop-search-icon {
  position: absolute;
  left: 12px;
  top: 21px; /* centrado sobre el input de 42px */
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.shop-sidebar .woocommerce-product-search { display: flex; }
.shop-sidebar .woocommerce-product-search .search-field {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px 0 36px; /* 36px = espacio para la lupa */
  border: 1px solid var(--gris-borde);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--texto-negro);
  background: var(--blanco);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.shop-sidebar .woocommerce-product-search .search-field:focus {
  border-color: var(--azul-agua);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}
.shop-sidebar .woocommerce-product-search button {
  flex-shrink: 0;
  height: 42px;
  padding: 0 16px;
  background: var(--azul-corp);
  color: var(--blanco);
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.shop-sidebar .woocommerce-product-search button:hover { background: #163a5a; }

/* ─── PÁGINA NOSOTROS ────────────────────────────────────────────── */
.nosotros-hero__eyebrow { color: var(--blanco); opacity: .9; }
.nosotros-hero__sub { max-width: 640px; margin-top: 14px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.92); }

/* Quiénes somos */
.nosotros-intro { padding: 80px 0 40px; }
.nosotros-intro__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.nosotros-lead { font-size: 20px; line-height: 1.6; color: var(--texto-negro); margin-bottom: 20px; }
.nosotros-intro__text p { font-size: 16px; line-height: 1.75; color: var(--gris-prof); }
.nosotros-intro__text strong { color: var(--texto-negro); }

/* Card de sectores */
.nosotros-sectores {
  background: var(--bg-valor);
  border-top: 5px solid var(--naranja-pedido);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 100px;
}
.nosotros-sectores__title { font-family: var(--font-head); font-size: 18px; color: var(--azul-corp); margin-bottom: 18px; }
.nosotros-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nosotros-chip {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-corp);
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 40px;
  padding: 7px 14px;
}
.nosotros-sectores__foot { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--gris-prof); }
.nosotros-sectores__foot strong { color: var(--naranja-pedido); }

/* Banda "equipar laboratorio" */
.nosotros-mas {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-top: 44px;
  padding: 28px 32px;
  background: var(--azul-claro-info);
  border-radius: var(--radius-lg);
}
.nosotros-mas__icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 12px;
  background: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.nosotros-mas h3 { font-family: var(--font-head); font-size: 20px; color: var(--azul-corp); margin-bottom: 8px; }
.nosotros-mas p { font-size: 15px; line-height: 1.7; color: var(--gris-prof); margin: 0; }
.nosotros-mas strong { color: var(--texto-negro); }

/* Misión / Visión */
.nosotros-mv-section { padding: 40px 0 20px; }
.nosotros-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.nosotros-mv__card {
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.nosotros-mv__card h2 { font-family: var(--font-head); font-size: 24px; color: var(--azul-corp); margin-bottom: 14px; }
.nosotros-mv__card p { font-size: 16px; line-height: 1.75; color: var(--gris-prof); margin: 0; }

/* Grid 3×2 para "por qué" */
.nosotros-porque-grid .value-card h3 { font-size: 19px; }
.nosotros-porque-grid .value-card p { font-size: 14.5px; }

/* CTA final */
.nosotros-cta {
  margin-top: 40px;
  background: linear-gradient(135deg, var(--azul-corp) 0%, #0a2840 100%);
  padding: 66px 0;
  text-align: center;
  color: var(--blanco);
}
.nosotros-cta h2 { font-family: var(--font-head); font-size: 32px; color: var(--blanco); margin-bottom: 12px; }
.nosotros-cta p { font-size: 17px; color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 28px; }
.nosotros-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .nosotros-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .nosotros-sectores { position: static; }
  .nosotros-mv { grid-template-columns: 1fr; }
  .nosotros-porque-grid { grid-template-columns: 1fr; }
  .nosotros-mas { flex-direction: column; gap: 16px; }
  .nosotros-cta h2 { font-size: 26px; }
}

/* ─── INFO BAR (top) ─────────────────────────────────────────────── */
.info-bar {
  background: var(--azul-corp);
  color: var(--blanco);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 8px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-bar a { color: var(--blanco); opacity: .9; }
.info-bar-items { display: flex; gap: 32px; }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
#colophon {
  border-top: 2px solid var(--azul-corp);
  background: var(--azul-corp);
  color: var(--blanco);
}
.footer-grid {
  padding: 56px 60px 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 48px;
}
.footer-about p { font-size: 14px; line-height: 1.65; opacity: .85; max-width: 320px; }
.footer-widget h5 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 14px;
}
.footer-widget a,
.footer-widget li { color: rgba(255,255,255,.85); font-size: 14px; line-height: 2; text-decoration: none; list-style: none; }
.footer-widget ul { padding: 0; margin: 0; }
.footer-widget a:hover { color: var(--naranja-pedido); }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 14px; opacity: .85; }
.social-links { display: flex; gap: 12px; }
.social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco);
  font-weight: 700;
  font-family: var(--font-head);
  transition: background .15s;
  text-decoration: none;
}
.social-link:hover { background: var(--naranja-pedido); }
.footer-bottom {
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: .8;
}

/* ─── PAGINATION ─────────────────────────────────────────────────── */
/* OJO: woocommerce_pagination() pinta <ul class="page-numbers"> con <li> dentro.
   El <ul> COMPARTE la clase con los enlaces, así que hay que resetearlo o se
   dibuja como si fuera un botón; y los <li> muestran sus viñetas. */
.pagination { display: flex; justify-content: center; margin-top: 48px; }
.pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  min-width: 0;
  height: auto;
}
.pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
/* Solo los enlaces/número actual se ven como botón */
.pagination a.page-numbers,
.pagination span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  min-width: 40px; height: 40px;
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanco);
  color: var(--gris-prof);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover { background: var(--azul-agua); color: var(--blanco); border-color: var(--azul-agua); }
.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current { background: var(--azul-agua); color: var(--blanco); border-color: var(--azul-agua); }
/* Los puntos suspensivos "…" sin recuadro */
.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots { border: none; background: none; min-width: 24px; padding: 0; }

/* ─── WOOCOMMERCE STAR RATING ────────────────────────────────────── */
.woocommerce .star-rating span::before { color: var(--naranja-pedido); }
.woocommerce .star-rating::before { color: var(--gris-borde); }

/* ─── STOCK STATUS ───────────────────────────────────────────────── */
.woocommerce .in-stock { color: var(--verde-stock); font-weight: 700; }
.woocommerce .out-of-stock { color: var(--rojo-suave); font-weight: 700; }
.woocommerce .available-on-backorder { color: var(--naranja-pedido); font-weight: 700; }

/* ─── MOBILE MENU ────────────────────────────────────────────────── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --container-px: 60px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 960px) {
  :root { --container-px: 24px; }
  .shop-layout { grid-template-columns: 1fr; }
  .single-product-layout { grid-template-columns: 1fr; gap: 32px; }
  .category-banners { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .hero-banner h1 { font-size: 36px; }
  .hero-banner p { font-size: 16px; }
  .hero-trust { gap: 24px; }
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    --container-px: 16px;
    /* On mobile, cap logo height so it fits the 60px header */
    --logo-h: min(var(--logo-h, 40px), 36px);
  }
  .site-header-inner { padding: 0 16px; }
  .info-bar { display: none; }
  .main-navigation { display: none; }
  .main-navigation.toggled {
    display: block;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: var(--blanco);
    border-bottom: 2px solid var(--gris-linea);
    padding: 16px;
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
  }
  .main-navigation.toggled ul { flex-direction: column; gap: 0; }
  .main-navigation.toggled ul li a { padding: 14px 0; display: block; border-bottom: 1px solid var(--gris-linea); }
  .menu-toggle { display: block; }

  /* Hero mobile */
  .hero-banner { height: auto; min-height: 420px; padding: 60px 0 48px; }
  .hero-content { padding: 0 20px; }
  .hero-banner h1 { font-size: 28px !important; }
  .hero-banner p { font-size: 15px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { min-width: 0 !important; width: 100%; }
  .hero-trust { gap: 14px; font-size: 12px; flex-wrap: wrap; justify-content: center; }
  .hero-eyebrow { font-size: 10px; }

  /* Productos */
  .products-grid { grid-template-columns: 1fr; }
  .section-heading { font-size: 24px; }
  .section-featured-products { padding: 48px 0 32px; }
  .section-categories { padding: 16px 0 32px; }
  .section-values { padding: 48px 0; }
  .section-brands { padding: 32px 0; }

  /* Values mobile — texto completo visible */
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .value-card { padding: 24px 20px; }
  .value-card h3 { font-size: 18px; }
  .value-card p { font-size: 14px; }
  .value-icon { width: 52px; height: 52px; margin-bottom: 16px; }

  /* WooCommerce botón añadir al carrito en loop */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button,
  .product-card-foot .btn,
  .product-card-foot a.button,
  .product-card-foot button.button {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0 16px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* Category banners */
  .category-banners { grid-template-columns: 1fr; gap: 12px; }
  .category-banner { height: 120px; padding: 20px; }
  .category-banner-name { font-size: 20px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; padding: 32px 20px 0; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 20px; }
  .shop-sidebar { position: static; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDES SOCIALES — HOVER CON CÍRCULO ANIMADO + RELLENO (footer)
   Basado en el efecto stroke-dasharray del código original
   ═══════════════════════════════════════════════════════════════════════════ */

.footer-socials {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* Contenedor de cada ícono */
.fsoc {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  /* Transición de fondo y glow */
  transition: background-color .5s ease, box-shadow .5s ease;
  flex-shrink: 0;
}
.fsoc:hover {
  background-color: var(--fsoc-color);
  box-shadow: 0 0 16px var(--fsoc-color);
  text-decoration: none;
}

/* SVG del anillo (ocupa todo el contenedor) */
.fsoc__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Círculo trazado — EFECTO DASHARRAY */
.fsoc__circle {
  stroke-dasharray: 90;          /* estado inicial: arco parcial */
  stroke-dashoffset: 0;
  transition: stroke-dasharray .55s ease-in-out;
  transform-origin: center;
  transform: rotate(-90deg);
}
.fsoc:hover .fsoc__circle {
  stroke-dasharray: 220;         /* en hover: círculo completo */
}

/* Ícono SVG centrado */
.fsoc__icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  color: #fff;
  transition: transform .3s ease;
  display: block;
}
.fsoc:hover .fsoc__icon {
  transform: scale(1.1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS GENÉRICOS (modal cotización, contacto)
   Estas clases se usaban en las plantillas pero no existían: por eso las
   etiquetas salían pegadas a los inputs y sin formato.
   ═══════════════════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--texto-negro);
  margin-bottom: 6px;
}
.form-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--texto-negro);
  background: var(--blanco);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--azul-agua);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}
.form-input::placeholder { color: #9AA7B2; }
.form-textarea {
  padding: 12px 14px;
  line-height: 1.5;
}
/* Todos los textareas de tamaño fijo (sin la manija de las rayitas diagonales) */
textarea { resize: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL COTIZACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-box {
  width: 500px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  padding: 36px 40px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  font-family: var(--font-body);
}
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-prof);
  transition: background .15s;
}
.modal-close-btn:hover { background: var(--bg-gris); }


/* ═══════════════════════════════════════════════════════════════════════════
   MINI-CARRITO LATERAL (drawer)
   ═══════════════════════════════════════════════════════════════════════════ */
#mini-cart-drawer {
  position: fixed;
  top: 0;
  right: -110vw;               /* fuera de pantalla en reposo */
  width: min(390px, 100vw);    /* nunca más ancho que la pantalla */
  /* Altura: usar la variable de viewport dinámico cuando esté disponible */
  height: 100vh;
  height: 100svh;              /* small viewport height — excluye UI del browser en iOS */
  background: #fff;
  z-index: 99998;
  box-shadow: -4px 0 28px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  transition: right .32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#mini-cart-drawer.is-open {
  right: 0;
}

#mini-cart-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 9997;
}
#mini-cart-backdrop.is-open {
  display: block;
}

/* Header del drawer */
.mcd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--gris-linea);
  flex-shrink: 0;
  background: #fff;
}
.mcd-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--azul-corp);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mcd-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-prof);
  transition: background .15s;
}
.mcd-close-btn:hover { background: var(--bg-gris); }

/* Contenido scroll */
.mcd-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}
.mcd-content::-webkit-scrollbar { width: 4px; }
.mcd-content::-webkit-scrollbar-thumb { background: var(--gris-borde); border-radius: 2px; }

/* Item del carrito */
.mcd-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-linea);
  position: relative;
}
.mcd-item__img-link { flex-shrink: 0; display: block; }
.mcd-item__img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border: 1px solid var(--gris-linea);
  border-radius: 4px;
  background: var(--bg-gris);
  display: block;
  transition: opacity .15s;
}
.mcd-item__img-link:hover .mcd-item__img { opacity: .8; }

.mcd-item__info { flex: 1; min-width: 0; }
.mcd-item__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-negro);
  line-height: 1.35;
  margin-bottom: 8px;
  text-decoration: none;
  /* Truncate to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .12s;
}
.mcd-item__name:hover { color: var(--azul-agua); }

.mcd-item__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.mcd-item__price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--azul-corp);
}

/* Controles de cantidad */
.mcd-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gris-borde);
  border-radius: 4px;
  overflow: hidden;
  height: 30px;
}
.mcd-qty__btn {
  width: 28px;
  height: 30px;
  border: none;
  background: var(--bg-gris);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--gris-prof);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  padding: 0;
}
.mcd-qty__btn:hover { background: var(--azul-agua); color: #fff; }
.mcd-qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.mcd-qty__num {
  width: 42px;
  height: 30px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--texto-negro);
  border: none;
  border-left: 1px solid var(--gris-borde);
  border-right: 1px solid var(--gris-borde);
  padding: 0 2px;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mcd-qty__num:focus {
  outline: none;
  background: #f0f7ff;
}
.mcd-qty__num::-webkit-outer-spin-button,
.mcd-qty__num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botón eliminar */
.mcd-item__remove {
  position: absolute;
  top: 14px;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-prof);
  transition: background .12s, color .12s;
  padding: 0;
  flex-shrink: 0;
}
.mcd-item__remove:hover { background: #fdf0f0; color: #c0392b; }

/* Ajustar info para dejar espacio al botón eliminar */
.mcd-item__info { padding-right: 32px; }

/* Empty state */
.mcd-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--gris-prof);
}
.mcd-empty svg { margin: 0 auto 14px; opacity: .3; display: block; }

/* Footer del drawer (totales y botones) */
.mcd-footer {
  padding: 16px 22px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--gris-linea);
  flex-shrink: 0;
  background: #fff;
}
.mcd-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.mcd-total span { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--gris-prof); }
.mcd-total strong { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--azul-corp); }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  overflow: hidden;          /* REQUIRED: clips slides outside viewport */
  background: #0a1e30;
  width: 100%;
}
.hero-slides {
  display: flex;
  flex-wrap: nowrap;
  /* DO NOT set width here — JS sets width dynamically based on slide count */
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hero-slide {
  /* JS sets actual pixel width via slider.offsetWidth */
  flex: 0 0 auto;
  min-height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 768px) { .hero-slide { min-height: 420px; } }

/* Imagen de fondo del slide */
.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-slide__overlay {
  position: absolute;
  inset: 0;
}

/* Contenido del slide */
.hero-slide__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 40px;
  max-width: 860px;
  color: #fff;
}
@media (max-width: 768px) {
  .hero-slide__content { padding: 48px 20px; }
}
.hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.hero-slide__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--naranja-pedido); }
.hero-slide__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: #fff;
}
.hero-slide__body {
  font-family: var(--font-body);
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 620px;
  margin: 0 auto 28px;
}
.hero-slide__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero-slide__ctas { flex-direction: column; align-items: stretch; }
  .hero-slide__ctas .btn { min-width: 0 !important; }
}

/* Controles (flechas) */
.hero-slider__prev,
.hero-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.hero-slider__prev:hover,
.hero-slider__next:hover { background: rgba(255,255,255,.28); }
.hero-slider__prev { left: 20px; }
.hero-slider__next { right: 20px; }
@media (max-width: 480px) {
  .hero-slider__prev { left: 8px; }
  .hero-slider__next { right: 8px; }
}

/* Dots (indicadores) */
.hero-slider__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s;
}
.hero-slider__dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* Trust badges del slider */
.hero-slide__trust {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BANDA DE MARCAS ANIMADA (marquee — puro CSS)
   ═══════════════════════════════════════════════════════════════════════════ */
.section-brands {
  padding: 40px 0;
  text-align: center;
  overflow: hidden;           /* clip the scrolling content */
}

.brands-marquee-wrap {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* The inner track holds items × 2 (duplicated for seamless loop) */
.brands-marquee {
  display: inline-flex;       /* shrinks to content width */
  flex-wrap: nowrap;
  gap: 56px;
  align-items: center;
  white-space: nowrap;
  animation: marquee-scroll 18s linear infinite;
}
.brands-marquee:hover { animation-play-state: paused; }

/* Scroll exactly half (the duplicated set) */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brands-marquee .brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--azul-corp);
  letter-spacing: .06em;
  opacity: .45;
  white-space: nowrap;
  display: inline-block;      /* ensures width is measured */
  transition: opacity .2s;
  cursor: default;
}
.brands-marquee .brand-name:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE — BOTÓN "AÑADIR AL CARRITO" EN TARJETA (móvil + desktop)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Asegurar que el botón nativo de WC dentro de .product-card-foot sea full-width */
.product-card-foot .button,
.product-card-foot a.button,
.product-card-foot button.button,
.product-card-foot input.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  background: var(--verde-stock) !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.product-card-foot .button:hover,
.product-card-foot a.button:hover {
  background: #1e8449 !important;
}

/* Loading state (AJAX add to cart) */
.product-card-foot .button.loading {
  opacity: .7 !important;
  cursor: wait !important;
}
.product-card-foot .button.added {
  background: var(--azul-corp) !important;
}

/* Cuando abre el mini-cart al añadir — asegurar z-index correcto */
/* z-index set in main rule above */
#mini-cart-backdrop { z-index: 99997 !important; }
#modal-cotizacion { z-index: 99999; }


/* ═══════════════════════════════════════════════════════════════════════════
   ESTRELLA DE VALORACIÓN — formulario de reseña + display
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Estrellas mostradas (display) ──────────────────────────────────────── */
.woocommerce .star-rating {
  position: relative;
  display: inline-flex;
  width: 5.4em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  overflow: hidden;
  letter-spacing: 0;
}
.woocommerce .star-rating::before {
  content: '\2605\2605\2605\2605\2605';
  color: var(--gris-borde, #ddd);
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  letter-spacing: .15em;
}
.woocommerce .star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.woocommerce .star-rating span::before {
  content: '\2605\2605\2605\2605\2605';
  color: var(--naranja-pedido, #E67E22);
  top: 0;
  position: absolute;
  left: 0;
  letter-spacing: .15em;
}

/* ── Selector interactivo de estrellas (formulario de reseña) ───────────── */
/* Hide the default radio buttons & text labels */
.comment-form-rating label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--texto-negro); margin-bottom: 8px; }

.comment-form-rating .stars {
  display: inline-flex;
  gap: 4px;
  font-size: 0;        /* hide text inside anchors */
  line-height: 1;
  margin-bottom: 12px;
}
.comment-form-rating .stars a {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-indent: -9999px; /* hide "1 de 5 estrellas" text */
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform .1s;
}
.comment-form-rating .stars a:hover { transform: scale(1.15); }

/* Star shape via ::before */
.comment-form-rating .stars a::before {
  content: '\2605';
  display: block;
  text-indent: 0;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  width: 32px;
  height: 32px;
  color: var(--gris-borde, #ccc);
  transition: color .15s;
  cursor: pointer;
}

/* Hover state — all stars up to and including hovered one turn gold */
.comment-form-rating .stars a:hover::before,
.comment-form-rating .stars a:hover ~ a::before { /* reverse: a:hover and PREVIOUS siblings */
  /* CSS can't select previous siblings, so we use a different approach */
}
/* Use parent hover to color ALL stars, then un-color after the hovered one */
.comment-form-rating .stars:hover a::before {
  color: var(--naranja-pedido, #E67E22);
}
.comment-form-rating .stars a:hover ~ a::before {
  color: var(--gris-borde, #ccc) !important;
}

/* Active/selected state — WooCommerce adds .active class */
.comment-form-rating .stars.selected a.active::before,
.comment-form-rating .stars.selected a.active ~ a::before { /* wrong direction again */ }
/* WC marks selected stars: all <a> before .active get the star color */
.comment-form-rating .stars.selected a::before {
  color: var(--naranja-pedido, #E67E22);
}
.comment-form-rating .stars.selected a.active ~ a::before {
  color: var(--gris-borde, #ccc) !important;
}

/* ── Review form styling ────────────────────────────────────────────────── */
#reviews {
  margin-top: 48px;
}
#reviews h2 {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--azul-corp);
  margin-bottom: 24px;
}

#review_form_wrapper {
  margin-top: 32px;
}

#commentform {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#commentform label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-negro);
  margin-bottom: 6px;
}

#commentform .comment-form-comment textarea,
#commentform input[type="text"],
#commentform input[type="email"] {
  width: 100%;
  max-width: 520px;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--texto-negro);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: 16px;
}
#commentform .comment-form-comment textarea {
  height: 120px;
  padding: 12px 14px;
  resize: none;
  line-height: 1.6;
}
#commentform .comment-form-comment textarea:focus,
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus {
  border-color: var(--azul-agua);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}

#commentform .form-submit input[type="submit"] {
  margin-top: 8px;
}

/* Review list */
.woocommerce #reviews #comments ol.commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce #reviews #comments ol.commentlist li {
  padding: 20px 0;
  border-bottom: 1px solid var(--gris-linea);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  padding: 0;
  border: none;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  float: left;
  margin-right: 16px;
}
.woocommerce #reviews #comments ol.commentlist li .meta {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-negro);
  margin-bottom: 8px;
}
.woocommerce #reviews #comments ol.commentlist li .description p {
  font-size: 14.5px;
  color: var(--gris-prof);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA "PEDIDO RECIBIDO" (thankyou) — formato RIGIEL DiELI
   Override en woocommerce/checkout/thankyou.php. Aquí solo el estilo.
   ═══════════════════════════════════════════════════════════════════════════ */
.dieli-thankyou { max-width: 880px; margin: 0 auto; }

/* Banner de éxito */
.dieli-ty-hero { text-align: center; padding: 6px 0 30px; }
.dieli-ty-badge {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(39,174,96,.12); color: var(--verde-stock);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.dieli-ty-badge svg { width: 40px; height: 40px; }
.dieli-ty-badge--error { background: rgba(231,76,60,.12); color: #E74C3C; }
.dieli-ty-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 800;
  color: var(--azul-corp); margin: 0 0 8px; line-height: 1.15;
}
.dieli-ty-sub { color: var(--gris-prof); font-size: 15px; margin: 0; }
.dieli-ty-actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Resumen del pedido en UN recuadro con filas (label izq. / valor der.) */
.dieli-thankyou ul.woocommerce-order-overview {
  list-style: none; margin: 4px auto 30px; padding: 0;
  max-width: 560px; display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.dieli-thankyou ul.woocommerce-order-overview li {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 13px 20px; margin: 0; text-transform: none;
  border-bottom: 1px solid var(--gris-linea);
}
.dieli-thankyou ul.woocommerce-order-overview li:last-child { border-bottom: 0; }
.dieli-thankyou ul.woocommerce-order-overview li .dieli-ov-label {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris-prof);
  flex-shrink: 0;
}
.dieli-thankyou ul.woocommerce-order-overview li strong {
  font-size: 14.5px; color: var(--texto-negro); font-weight: 700;
  text-align: right; word-break: break-word;
}

/* Animación del check de éxito (sin librerías) */
.dieli-ty-badge { animation: dieli-ty-pop .42s ease-out both; }
@keyframes dieli-ty-pop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);   opacity: 1; }
}
.dieli-ty-badge svg path {
  stroke-dasharray: 32; stroke-dashoffset: 32;
  animation: dieli-ty-draw .5s .28s ease forwards;
}
@keyframes dieli-ty-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dieli-ty-badge { animation: none; }
  .dieli-ty-badge svg path { animation: none; stroke-dashoffset: 0; }
}

/* Datos bancarios (BACS / transferencia) como aviso destacado */
.dieli-thankyou .woocommerce-bacs-bank-details,
.dieli-thankyou .wc-bacs-bank-details {
  background: var(--azul-claro-info); border: 1px solid #C9DDEF;
  border-left: 4px solid var(--azul-agua); border-radius: var(--radius-sm);
  padding: 18px 22px; margin: 0 0 28px; list-style: none;
}
.dieli-thankyou .wc-bacs-bank-details-heading,
.dieli-thankyou h2.woocommerce-column__title,
.dieli-thankyou .woocommerce-order-details__title,
.dieli-thankyou .woocommerce-customer-details h2 {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--azul-corp); margin: 0 0 14px;
}
.dieli-thankyou ul.wc-bacs-bank-details { margin: 6px 0 0; padding: 0; list-style: none; }
.dieli-thankyou ul.wc-bacs-bank-details li {
  padding: 6px 0; border-bottom: 1px dashed #C9DDEF; font-size: 14px; color: var(--texto-negro);
}
.dieli-thankyou ul.wc-bacs-bank-details li:last-child { border-bottom: 0; }
.dieli-thankyou ul.wc-bacs-bank-details li strong { color: var(--azul-corp); }

/* Tabla de detalles del pedido */
.dieli-thankyou table.woocommerce-table--order-details,
.dieli-thankyou table.order_details {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--gris-borde); border-radius: var(--radius-lg);
  overflow: hidden; margin: 0 0 30px;
}
.dieli-thankyou table.order_details th,
.dieli-thankyou table.order_details td {
  padding: 13px 18px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--gris-linea);
}
.dieli-thankyou table.order_details thead th {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris-prof); background: #F7F9FB;
}
.dieli-thankyou table.order_details td.product-total,
.dieli-thankyou table.order_details th.product-total,
.dieli-thankyou table.order_details tfoot td { text-align: right; }
.dieli-thankyou table.order_details tfoot th { text-align: left; color: var(--gris-prof); font-weight: 600; }
.dieli-thankyou table.order_details tfoot tr:last-child th,
.dieli-thankyou table.order_details tfoot tr:last-child td {
  font-size: 16px; color: var(--azul-corp); font-weight: 800; border-top: 2px solid var(--gris-borde);
}
.dieli-thankyou table.order_details a { color: var(--azul-agua); text-decoration: none; font-weight: 600; }

/* Direcciones del cliente en tarjetas */
.dieli-thankyou .woocommerce-customer-details { margin-top: 4px; }
.dieli-thankyou .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0;
}
.dieli-thankyou .woocommerce-customer-details .woocommerce-column {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radius-lg); padding: 20px 22px;
}
.dieli-thankyou .woocommerce-customer-details address {
  font-style: normal; font-size: 14px; line-height: 1.7; color: var(--texto-negro); border: 0; padding: 0;
}

@media (max-width: 640px) {
  .dieli-ty-title { font-size: 24px; }
  .dieli-thankyou .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVISO DE COOKIES — banner inferior izquierdo (no choca con el FAB WhatsApp)
   ═══════════════════════════════════════════════════════════════════════════ */
.dieli-cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 9998;
  max-width: 420px; width: calc(100% - 40px);
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(8,20,32,.20);
  padding: 18px 20px;
  transform: translateY(180%); opacity: 0; pointer-events: none;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease;
}
.dieli-cookie.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.dieli-cookie__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--texto-negro); }
.dieli-cookie__text a { color: var(--azul-agua); font-weight: 600; }
.dieli-cookie__actions { display: flex; align-items: center; gap: 18px; }
.dieli-cookie__actions .btn { flex-shrink: 0; }
.dieli-cookie__link { font-size: 13px; color: var(--gris-prof); text-decoration: underline; }
.dieli-cookie__link:hover { color: var(--azul-corp); }

@media (max-width: 480px) {
  .dieli-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}
/* En móvil, mientras el banner está visible, sube el botón de WhatsApp */
@media (max-width: 600px) {
  body.dieli-cookie-open .dieli-wa-fab { bottom: 172px; }
}
@media (prefers-reduced-motion: reduce) {
  .dieli-cookie { transition: opacity .2s ease; transform: none; }
  .dieli-cookie:not(.is-visible) { display: none; }
}