/*
 * WooCommerce escrito desde cero.
 * Los estilos por defecto de Woo estan desactivados en mu-plugins/stmnt-core.php
 * con el filtro woocommerce_enqueue_styles.
 *
 * Equivalencias tomadas de next-reference/src/components/ProductCard.tsx.
 */

/* ---------- Card de producto ---------- */

.stmnt-card {
  display: block;
  cursor: pointer;
  color: inherit;
}

.stmnt-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--stmnt-placeholder, #f5f5f5);
}

.stmnt-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover swap: la segunda imagen de galeria aparece encima. */
.stmnt-card__img--hover {
  opacity: 0;
}

.stmnt-card:hover .stmnt-card__img--base {
  opacity: 0;
}

.stmnt-card:hover .stmnt-card__img--hover {
  opacity: 1;
}

/* Sin segunda imagen no hay swap: la base no debe desaparecer. */
.stmnt-card__media:not(:has(.stmnt-card__img--hover)) .stmnt-card__img--base {
  opacity: 1;
}

.stmnt-card__badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--stmnt-bg, #fff);
  color: var(--stmnt-fg, #000);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
}

.stmnt-card__name {
  font-size: 13px;
  font-weight: var(--stmnt-weight-medium, 500);
  line-height: 1.375;
  color: var(--stmnt-fg, #000);
  margin: 0;
}

.stmnt-card__color {
  font-size: 12px;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  margin: 2px 0 0;
}

/* ---------- Bloque de precio ---------- */

.stmnt-card__price,
.stmnt-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
}

.stmnt-price__was {
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  text-decoration: line-through;
}

.stmnt-price__off {
  background: var(--stmnt-sale, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: var(--stmnt-weight-medium, 500);
  padding: 2px 4px;
  line-height: 1;
}

.stmnt-price__now {
  color: var(--stmnt-fg, #000);
}

/* wc_price() envuelve en <span class="woocommerce-Price-amount"> */
.stmnt-price__was .woocommerce-Price-amount,
.stmnt-price__now .woocommerce-Price-amount,
.stmnt-price__was bdi,
.stmnt-price__now bdi {
  text-decoration: inherit;
  color: inherit;
}

/* ---------- Aviso de stock ---------- */

.stmnt-card__stock {
  margin: 4px 0 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.stmnt-card__stock--out {
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
}

.stmnt-card__stock--low {
  color: var(--stmnt-sale, #dc2626);
}

/* ---------- Archivo de tienda ---------- */

.woocommerce ul.products,
.stmnt-shop__items {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  .stmnt-shop__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .woocommerce ul.products,
  .stmnt-shop__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
}

/* ---------- Ficha de producto ---------- */

.stmnt-pdp {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .stmnt-pdp { flex-direction: row; align-items: flex-start; }
  .stmnt-pdp__gallery { width: 55%; }
  .stmnt-pdp__info { width: 45%; position: sticky; top: 0; }
}

@media (min-width: 1280px) {
  .stmnt-pdp__gallery { width: 60%; }
  .stmnt-pdp__info { width: 40%; }
}

/* Galeria apilada en vertical, no carrusel. */
.stmnt-pdp__shot {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--stmnt-placeholder, #f5f5f5);
}

.stmnt-pdp__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stmnt-pdp__info {
  padding: 40px var(--stmnt-gutter, 24px);
}

@media (min-width: 768px) {
  .stmnt-pdp__info { padding-left: var(--stmnt-gutter-md, 40px); padding-right: var(--stmnt-gutter-md, 40px); }
}

@media (min-width: 1024px) {
  .stmnt-pdp__info { padding: 56px 48px; }
}

.stmnt-pdp__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.stmnt-pdp__title {
  font-size: 18px;
  font-weight: var(--stmnt-weight-medium, 500);
  line-height: 1.25;
  text-transform: lowercase;
  margin: 0;
}

.stmnt-pdp__price { flex-shrink: 0; margin-top: 0; font-size: 18px; }
.stmnt-pdp__price .stmnt-price__was { font-size: 15px; font-weight: var(--stmnt-weight-medium, 500); }
.stmnt-pdp__price .stmnt-price__off { font-size: 11px; padding: 2px 6px; }
.stmnt-pdp__price .stmnt-price__now { font-weight: var(--stmnt-weight-medium, 500); }

@media (min-width: 768px) {
  .stmnt-pdp__title { font-size: 20px; }
  .stmnt-pdp__price { font-size: 20px; }
  .stmnt-pdp__price .stmnt-price__was { font-size: 16px; }
}

.stmnt-pdp__fit {
  font-size: 12px;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  margin: 0 0 4px;
}

.stmnt-pdp__stock {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 0 0 4px;
}

.stmnt-pdp__stock--out { color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4)); }
.stmnt-pdp__stock--low { color: var(--stmnt-sale, #dc2626); }

.stmnt-pdp__guide {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 32px;
  display: block;
}

/* El select nativo de Woo queda oculto: los chips lo manejan. */
.stmnt-pdp .variations,
.stmnt-pdp .reset_variations { display: none; }

.stmnt-sizes {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.stmnt-size {
  flex: 1;
  padding: 12px 0;
  font-size: 12px;
  letter-spacing: 0.025em;
  font-family: inherit;
  /* Explicito: sin esto hereda el #c36 que Hello Elementor le pone a todo
     <button>, y las tallas disponibles salen magenta. */
  color: var(--stmnt-fg, #000);
  background: none;
  cursor: pointer;
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  transition: border-color var(--stmnt-transition, 300ms),
    background-color var(--stmnt-transition, 300ms), color var(--stmnt-transition, 300ms);
}

.stmnt-size:hover:not(.is-sold-out) { border-color: var(--stmnt-fg, #000); }

.stmnt-size.is-active {
  border-color: var(--stmnt-fg, #000);
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
}

.stmnt-size.is-sold-out {
  border-color: var(--stmnt-line, rgba(0, 0, 0, 0.1));
  color: var(--stmnt-fg-25, rgba(0, 0, 0, 0.25));
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Woo imprime su propio precio dentro del form: el nuestro ya esta arriba. */
.stmnt-pdp .woocommerce-variation-price,
.stmnt-pdp .woocommerce-variation-availability,
.stmnt-pdp .quantity { display: none; }

.stmnt-pdp button.single_add_to_cart_button {
  width: 100%;
  padding: 14px 0;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: none;
  color: var(--stmnt-fg, #000);
  border: 1px solid var(--stmnt-fg, #000);
  cursor: pointer;
  margin-bottom: 40px;
  transition: background-color var(--stmnt-transition, 300ms), color var(--stmnt-transition, 300ms);
}

.stmnt-pdp button.single_add_to_cart_button:hover:not(.disabled) {
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
}

.stmnt-pdp button.single_add_to_cart_button.disabled,
.stmnt-pdp button.single_add_to_cart_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stmnt-pdp__description {
  font-size: 13px;
  line-height: 1.625;
  color: var(--stmnt-fg-70, rgba(0, 0, 0, 0.7));
  margin-bottom: 40px;
}

.stmnt-pdp__description p { margin: 0; }

/* ---------- Acordeones ---------- */

.stmnt-accordion { border-top: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1)); }

.stmnt-accordion__item { border-bottom: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1)); }

.stmnt-accordion__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: inherit;
}

.stmnt-accordion__sign { font-size: 16px; line-height: 1; }

/* El atributo `hidden` oculta via display:none en la hoja del navegador, y
   cualquier `display` de autor lo pisa. Sin esta regla el acordeon queda
   siempre abierto y parece que el JS no funciona. */
.stmnt-accordion__panel[hidden] { display: none; }

.stmnt-accordion__panel {
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stmnt-accordion__panel li {
  font-size: 12px;
  color: var(--stmnt-fg-60, rgba(0, 0, 0, 0.6));
}

/* ---------- Drawer del carrito ---------- */

.stmnt-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--stmnt-z-drawer-backdrop, 40);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--stmnt-transition, 300ms);
}

body.stmnt-drawer-open .stmnt-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.stmnt-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 448px;
  background: var(--stmnt-bg, #fff);
  z-index: var(--stmnt-z-drawer, 50);
  transform: translateX(100%);
  transition: transform var(--stmnt-transition, 300ms);
}

body.stmnt-drawer-open .stmnt-drawer { transform: translateX(0); }

.stmnt-drawer.is-loading { opacity: 0.5; pointer-events: none; }

.stmnt-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stmnt-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--stmnt-gutter, 24px);
  border-bottom: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
}

.stmnt-drawer__title {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: var(--stmnt-weight-regular, 400);
  margin: 0;
}

.stmnt-drawer__close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  transition: color var(--stmnt-transition, 300ms);
}

.stmnt-drawer__close:hover { color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5)); }

.stmnt-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px var(--stmnt-gutter, 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stmnt-drawer__empty {
  font-size: 13px;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  margin: 0;
}

.stmnt-drawer__item { display: flex; gap: 16px; }

.stmnt-drawer__thumb {
  position: relative;
  width: 80px;
  height: 96px;
  flex-shrink: 0;
  background: var(--stmnt-placeholder, #f5f5f5);
}

.stmnt-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }

.stmnt-drawer__detail { flex: 1; min-width: 0; }

.stmnt-drawer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.stmnt-drawer__name {
  font-size: 13px;
  font-weight: var(--stmnt-weight-medium, 500);
  line-height: 1.375;
  margin: 0;
}

.stmnt-drawer__variant {
  font-size: 11px;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  margin: 2px 0 0;
}

.stmnt-drawer__line-total { font-size: 13px; font-weight: var(--stmnt-weight-medium, 500); }

.stmnt-drawer__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.stmnt-drawer__step {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  transition: color var(--stmnt-transition, 300ms);
}

.stmnt-drawer__step:hover:not(:disabled) { color: var(--stmnt-fg, #000); }
.stmnt-drawer__step:disabled { opacity: 0.4; cursor: not-allowed; }

.stmnt-drawer__count { font-size: 12px; width: 16px; text-align: center; }

.stmnt-drawer__remove {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 8px;
  transition: color var(--stmnt-transition, 300ms);
}

.stmnt-drawer__remove:hover { color: var(--stmnt-fg, #000); }

.stmnt-drawer__foot {
  border-top: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
  padding: 20px var(--stmnt-gutter, 24px);
}

.stmnt-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: var(--stmnt-weight-medium, 500);
}

.stmnt-drawer__checkout {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--stmnt-transition, 300ms);
}

.stmnt-drawer__checkout:hover {
  background: rgba(0, 0, 0, 0.8);
  color: var(--stmnt-bg, #fff);
}

/* ---------- Archivo de tienda ---------- */

/* El Next envuelve la grilla en pt-8 y el propio ProductGrid pone
   px-6 md:px-10 py-12 md:py-16. */
.woocommerce-page .woocommerce-products-header,
.woocommerce-page .woocommerce-notices-wrapper:empty { display: none; }

body.post-type-archive-product:not([class*="elementor-page-"]) .site-main,
body.tax-product_cat:not([class*="elementor-page-"]) .site-main {
  max-width: none;
  padding: 32px var(--stmnt-gutter, 24px) 64px;
}

@media (min-width: 768px) {
  body.post-type-archive-product:not([class*="elementor-page-"]) .site-main,
  body.tax-product_cat:not([class*="elementor-page-"]) .site-main {
    padding: 32px var(--stmnt-gutter-md, 40px) 96px;
  }
}

/* ---------- "you might also like" ---------- */

.stmnt-related {
  padding: 64px var(--stmnt-gutter, 24px);
  border-top: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
}

@media (min-width: 768px) {
  .stmnt-related { padding: 80px var(--stmnt-gutter-md, 40px); }
}

.stmnt-related__title {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  font-weight: var(--stmnt-weight-regular, 400);
  text-align: center;
  margin: 0 0 40px;
}

.stmnt-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 768px) {
  .stmnt-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Las cards de relacionados son las mismas que las de la grilla:
   el markup y el hover salen de content-product.php. Aca solo el grid. */


/* ---------- Checkout ---------- */

.stmnt-checkout__title {
  font-size: 32px;
  font-weight: var(--stmnt-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 48px;
}

@media (min-width: 768px) {
  .stmnt-checkout__title { font-size: 40px; }
}

.stmnt-checkout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .stmnt-checkout { flex-direction: row; gap: 64px; }
  .stmnt-checkout__main { flex: 1 1 auto; min-width: 0; }
  .stmnt-checkout__aside { flex: 0 0 380px; position: sticky; top: 24px; }
}

.stmnt-checkout__legend {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stmnt-fg, #000);
  font-weight: var(--stmnt-weight-medium, 500);
  margin: 0 0 20px;
}

/* Los <h3> que WooCommerce imprime para "Detalles de facturacion" */
.stmnt-checkout h3 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--stmnt-weight-medium, 500);
  margin: 0 0 20px;
}

.stmnt-checkout__payment { margin-top: 48px; }

/* Campos */
.stmnt-checkout .form-row {
  margin: 0 0 12px;
  padding: 0;
}

/* Las etiquetas de los campos se ocultan porque el diseno usa placeholders.
   OJO: se acota a .stmnt-checkout__fields y NO a .form-row en general. El
   bloque de envio se engancha dentro de <div class="form-row place-order">,
   asi que una regla global sobre .form-row label le borraria los labels de
   los metodos de envio y quedarian dos bordes vacios. */
.stmnt-checkout__fields .form-row label:not(.checkbox) { display: none; }

.stmnt-checkout input[type="text"],
.stmnt-checkout input[type="email"],
.stmnt-checkout input[type="tel"],
.stmnt-checkout input[type="password"],
.stmnt-checkout textarea,
.stmnt-checkout select,
.stmnt-checkout .select2-container .select2-selection--single {
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--stmnt-fg, #000);
  background: var(--stmnt-bg, #fff);
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  border-radius: 0;
  height: auto;
  transition: border-color var(--stmnt-transition, 300ms);
}

.stmnt-checkout input:focus,
.stmnt-checkout textarea:focus,
.stmnt-checkout select:focus {
  outline: none;
  border-color: var(--stmnt-fg, #000);
}

.stmnt-checkout ::placeholder { color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5)); }

/* Nombre/Apellidos, Ciudad/Departamento y CP/Telefono en dos columnas */
@media (min-width: 640px) {
  .stmnt-checkout .form-row-first,
  .stmnt-checkout .form-row-last {
    width: calc(50% - 6px);
    display: inline-block;
    vertical-align: top;
  }
  .stmnt-checkout .form-row-first { margin-right: 12px; }
}

.stmnt-checkout .woocommerce-input-wrapper { width: 100%; }

/* Formas de pago */
.stmnt-checkout .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stmnt-checkout .wc_payment_method {
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  padding: 20px;
  margin-bottom: 12px;
  transition: border-color var(--stmnt-transition, 300ms);
}

.stmnt-checkout .wc_payment_method:has(input:checked) {
  border-color: var(--stmnt-fg, #000);
}

/* El radio nativo se oculta y se dibuja con CSS, igual que en los envios,
   para que las dos listas se lean como el mismo tipo de control. */
.stmnt-checkout .wc_payment_method > input[type="radio"] { display: none; }

.stmnt-checkout .wc_payment_method label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
}

.stmnt-checkout .wc_payment_method label::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  transition: border-color var(--stmnt-transition, 300ms),
    box-shadow var(--stmnt-transition, 300ms);
}

.stmnt-checkout .wc_payment_method:has(input:checked) label::before {
  border-color: var(--stmnt-fg, #000);
  box-shadow: inset 0 0 0 4px var(--stmnt-fg, #000);
}

/* La descripcion se alinea con el texto, no con el punto. */
.stmnt-checkout .wc_payment_method .payment_box { padding-left: 28px; }

.stmnt-checkout .payment_box {
  margin: 12px 0 0;
  padding: 0;
  background: none;
  font-size: 13px;
  color: var(--stmnt-fg-60, rgba(0, 0, 0, 0.6));
}

.stmnt-checkout .payment_box::before { display: none; }
.stmnt-checkout .payment_box p:last-child { margin-bottom: 0; }

/* Boton de confirmar */
.stmnt-checkout #place_order,
.stmnt-checkout button.alt {
  width: 100%;
  padding: 18px 0;
  margin-top: 24px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--stmnt-transition, 300ms);
}

.stmnt-checkout #place_order:hover {
  background: rgba(0, 0, 0, 0.8);
  color: var(--stmnt-bg, #fff);
}

.stmnt-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: 12px;
  color: var(--stmnt-fg-60, rgba(0, 0, 0, 0.6));
  margin-top: 24px;
}

/* ---------- Resumen del pedido ---------- */

.stmnt-checkout__summary {
  border: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
  padding: 24px;
}

.stmnt-summary__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
}

.stmnt-summary__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.stmnt-summary__thumb {
  position: relative;
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  background: var(--stmnt-placeholder, #f5f5f5);
}

.stmnt-summary__thumb img { width: 100%; height: 100%; object-fit: cover; }

.stmnt-summary__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stmnt-summary__detail { flex: 1; min-width: 0; }

.stmnt-summary__name {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--stmnt-weight-medium, 500);
  margin: 0;
}

.stmnt-summary__variant {
  font-size: 11px;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  margin: 4px 0 0;
}

.stmnt-summary__price {
  font-size: 13px;
  font-weight: var(--stmnt-weight-medium, 500);
  white-space: nowrap;
}

.stmnt-summary__totals { padding-top: 20px; }

.stmnt-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 8px 0;
}

.stmnt-summary__row--total {
  border-top: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
  margin-top: 8px;
  padding-top: 16px;
  font-size: 15px;
  font-weight: var(--stmnt-weight-medium, 500);
}

/* ---------- Confirmacion: el paso a WhatsApp ---------- */

.stmnt-thanks {
  border: 1px solid var(--stmnt-fg, #000);
  padding: 32px 24px;
  margin-bottom: 40px;
  text-align: center;
}

.stmnt-thanks__label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  margin: 0 0 8px;
}

.stmnt-thanks__title {
  font-size: 20px;
  font-weight: var(--stmnt-weight-bold, 700);
  margin: 0 0 8px;
}

.stmnt-thanks__text {
  font-size: 13px;
  color: var(--stmnt-fg-60, rgba(0, 0, 0, 0.6));
  margin: 0 0 24px;
}

.stmnt-thanks__cta {
  display: inline-block;
  padding: 16px 48px;
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background-color var(--stmnt-transition, 300ms);
}

.stmnt-thanks__cta:hover { background: rgba(0, 0, 0, 0.8); color: var(--stmnt-bg, #fff); }

/* Padding de las paginas de carrito, checkout y confirmacion */
body.woocommerce-checkout:not([class*="elementor-page-"]) .site-main,
body.woocommerce-cart:not([class*="elementor-page-"]) .site-main {
  max-width: none;
  padding: 48px var(--stmnt-gutter, 24px) 96px;
}

@media (min-width: 768px) {
  body.woocommerce-checkout:not([class*="elementor-page-"]) .site-main,
  body.woocommerce-cart:not([class*="elementor-page-"]) .site-main {
    padding: 64px var(--stmnt-gutter-md, 40px) 128px;
  }
}

/* Metodos de envio en el resumen del pedido */
.stmnt-summary__totals .woocommerce-shipping-totals th,
.stmnt-summary__totals .woocommerce-shipping-totals td {
  padding: 8px 0;
  font-size: 13px;
  text-align: left;
  font-weight: var(--stmnt-weight-regular, 400);
}

.stmnt-summary__totals #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stmnt-summary__totals #shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}

.stmnt-summary__totals #shipping_method label {
  cursor: pointer;
  line-height: 1.4;
}

.stmnt-summary__totals .woocommerce-shipping-destination { display: none; }

/* ---------- Opciones de envio (debajo de las formas de pago) ---------- */

.stmnt-shipping { margin-top: 40px; }

.stmnt-shipping__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stmnt-shipping__option {
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  margin-bottom: 12px;
  transition: border-color var(--stmnt-transition, 300ms);
}

.stmnt-shipping__option:has(input:checked),
.stmnt-shipping__option.is-active {
  border-color: var(--stmnt-fg, #000);
}

.stmnt-shipping__option input { display: none; }

.stmnt-shipping__option label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  font-size: 14px;
}

/* El punto del radio, dibujado con CSS para no depender del control nativo. */
.stmnt-shipping__name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stmnt-shipping__name::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  transition: border-color var(--stmnt-transition, 300ms),
    box-shadow var(--stmnt-transition, 300ms);
}

.stmnt-shipping__option:has(input:checked) .stmnt-shipping__name::before {
  border-color: var(--stmnt-fg, #000);
  box-shadow: inset 0 0 0 4px var(--stmnt-fg, #000);
}

.stmnt-shipping__cost {
  font-weight: var(--stmnt-weight-medium, 500);
  white-space: nowrap;
}

.stmnt-shipping__cost--quote {
  font-weight: var(--stmnt-weight-regular, 400);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
}

.stmnt-shipping__nota {
  font-size: 12px;
  line-height: 1.6;
  color: var(--stmnt-fg-60, rgba(0, 0, 0, 0.6));
  margin: 12px 0 0;
}

/* Ya no se muestra el selector de envio en el resumen. */
.stmnt-summary__totals .woocommerce-shipping-totals { display: none; }

/* ---------- Cupon en el resumen del pedido ---------- */

.stmnt-coupon {
  border-top: 1px solid var(--stmnt-line, rgba(0, 0, 0, 0.1));
  padding: 4px 0;
}

.stmnt-coupon__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

/* Safari dibuja su propio triangulo en <summary>. */
.stmnt-coupon__toggle::-webkit-details-marker { display: none; }

.stmnt-coupon__chevron {
  display: flex;
  color: var(--stmnt-fg-50, rgba(0, 0, 0, 0.5));
  transition: transform var(--stmnt-transition, 300ms);
}

.stmnt-coupon[open] .stmnt-coupon__chevron { transform: rotate(180deg); }

.stmnt-coupon__form { margin: 0 0 16px; }

.stmnt-coupon__row {
  display: flex;
  gap: 8px;
}

.stmnt-coupon__input {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--stmnt-fg, #000);
  background: var(--stmnt-bg, #fff);
  border: 1px solid var(--stmnt-line-20, rgba(0, 0, 0, 0.2));
  border-radius: 0;
  transition: border-color var(--stmnt-transition, 300ms);
}

.stmnt-coupon__input:focus {
  outline: none;
  border-color: var(--stmnt-fg, #000);
}

.stmnt-coupon__submit {
  flex-shrink: 0;
  padding: 0 20px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--stmnt-fg, #000);
  color: var(--stmnt-bg, #fff);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--stmnt-transition, 300ms);
}

.stmnt-coupon__submit:hover {
  background: rgba(0, 0, 0, 0.8);
  color: var(--stmnt-bg, #fff);
}

/* Cupon ya aplicado, en la lista de totales */
.stmnt-summary__row .woocommerce-remove-coupon {
  font-size: 11px;
  color: var(--stmnt-fg-40, rgba(0, 0, 0, 0.4));
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 8px;
}