/* ============================================================
   TiendaPocket — WooCommerce CSS
   Estilos para páginas de WooCommerce: tienda, producto, checkout, cuenta.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   SHOP / ARCHIVE
═══════════════════════════════════════════════════════════════ */
.woocommerce-page .site-main,
.woocommerce .site-main {
  padding-block: 2rem;
  overflow-x: clip;   /* no "hidden": ese valor fuerza overflow-y a "auto" y rompe sticky */
  overflow-y: visible; /* preserva position: sticky en single-product (galería) */
}
@media (max-width: 640px) {
  .woocommerce-page.single-product .site-main,
  .woocommerce.single-product .site-main {
    padding-block-start: .5rem;
  }
}

.tp-shop-wrapper {
  display: grid;
  gap: 2rem;
  min-width: 0;
}
.tp-shop-wrapper--with-sidebar {
  grid-template-columns: 280px 1fr;
}
.tp-shop-wrapper > * { min-width: 0; }
@media (max-width: 1024px) {
  .tp-shop-wrapper--with-sidebar { grid-template-columns: 1fr; }
  .tp-shop-sidebar { overflow: hidden; }
}

/* Breadcrumb */
.breadcrumb { margin-bottom: 1.5rem; }
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--color-text-muted);
}
.breadcrumb__item a { color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumb__item a:hover { color: var(--color-accent); }
.breadcrumb__item:last-child a { color: var(--color-text); font-weight: 500; }
.breadcrumb__sep { color: var(--color-border); }

/* Shop toolbar */
.tp-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.woocommerce-result-count { font-size: .875rem; color: var(--color-text-muted); }
.woocommerce-ordering select {
  padding: .5rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.woocommerce-ordering select:focus { border-color: var(--color-accent); }

/* Products grid */
.woocommerce-page ul.products,
.woocommerce ul.products {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.tp-shop-main { min-width: 0; }
.tp-shop-cols-2 ul.products { grid-template-columns: repeat(2, 1fr); }
.tp-shop-cols-3 ul.products { grid-template-columns: repeat(3, 1fr); }
.tp-shop-cols-4 ul.products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .tp-shop-cols-4 ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .tp-shop-cols-3 ul.products,
  .tp-shop-cols-4 ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tp-shop-cols-2 ul.products,
  .tp-shop-cols-3 ul.products,
  .tp-shop-cols-4 ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* WC default product li → usar nuestro card */
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.woocommerce-page ul.products li.product > a,
.woocommerce ul.products li.product > a,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: block;
}

.woocommerce-page ul.products li.product img,
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-surface);
}

/* Pagination */
.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 2.5rem;
  list-style: none;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.woocommerce-pagination ul li a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.woocommerce-pagination ul li span.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR / FILTROS
══════════════════════════════════════════════════════════════ */

/* Sidebar container */
.tp-shop-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 1024px) {
  .tp-shop-sidebar { gap: .75rem; }
}

/* Widget wrapper */
.tp-shop-sidebar .widget {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Widget title */
.tp-shop-sidebar .widget__title {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: .875rem 1rem;
  margin: 0;
  border-bottom: 1.5px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

/* Chevron icon */
.tp-shop-sidebar .widget__title::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--transition);
  flex-shrink: 0;
}

/* Chevron rotated when expanded */
.tp-shop-sidebar .widget__title[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Widget body */
.tp-shop-sidebar .widget__body {
  padding: 1rem;
}
.tp-shop-sidebar .widget__body img {
  max-width: 100%;
  height: auto;
}

/* Desktop: always show body, hide chevron */
@media (min-width: 1025px) {
  .tp-shop-sidebar .widget__title::after { display: none; }
  .tp-shop-sidebar .widget__body { display: block !important; }
}

/* Mobile accordion: max-height transition */
@media (max-width: 1024px) {
  .tp-shop-sidebar .widget__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding-block var(--transition-slow);
    padding-inline: 1rem;
    padding-block: 0;
  }
  .tp-shop-sidebar .widget__body.is-open {
    max-height: 600px;
    padding-block: 1rem;
  }
}

/* ── Price filter: TP custom widget ──────────────────────────── */

/* Rangos predefinidos */
.tp-shop-sidebar .tp-price-presets {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .0625rem;
}
.tp-shop-sidebar .tp-price-presets li a {
  display: block;
  font-size: .875rem;
  color: var(--color-text);
  padding: .3125rem .25rem;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  transition: color var(--transition), background var(--transition);
}
.tp-shop-sidebar .tp-price-presets li a:hover {
  color: var(--color-accent);
  background: var(--color-surface);
}
.tp-shop-sidebar .tp-price-presets li.is-active a {
  color: var(--color-accent);
  font-weight: 600;
}

/* Separador y form */
.tp-shop-sidebar .tp-price-form {
  border-top: 1px solid var(--color-border);
  padding-top: .75rem;
}
.tp-shop-sidebar .tp-price-inputs {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.tp-shop-sidebar .tp-price-input {
  flex: 1;
  min-width: 0;
  padding: .375rem .5rem;
  font-size: .8125rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition);
  -moz-appearance: textfield;
}
.tp-shop-sidebar .tp-price-input::-webkit-inner-spin-button,
.tp-shop-sidebar .tp-price-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tp-shop-sidebar .tp-price-input:focus {
  border-color: var(--color-accent);
}
.tp-shop-sidebar .tp-price-input::placeholder {
  color: var(--color-text-muted);
  font-size: .75rem;
}
.tp-shop-sidebar .tp-price-sep {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1;
}
.tp-shop-sidebar .tp-price-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
}
.tp-shop-sidebar .tp-price-submit:hover {
  background: var(--color-accent-hover);
}
.tp-shop-sidebar .tp-price-submit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Layered nav (attributes) */
.tp-shop-sidebar .woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .25rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li a,
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li span:not(.count) {
  font-size: .875rem;
  color: var(--color-text);
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li:hover {
  color: var(--color-accent);
  background: var(--color-surface);
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li:hover a {
  color: var(--color-accent);
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list li.chosen a {
  color: var(--color-accent);
  font-weight: 600;
}
.tp-shop-sidebar .woocommerce-widget-layered-nav-list .count {
  display: inline-block;
  flex-shrink: 0;
  margin-left: auto;
  font-size: .75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: var(--radius-full, 9999px);
  padding: .125rem .4375rem;
}

/* Product categories */
.tp-shop-sidebar .product-categories li {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  gap: 0 .375rem;
}
.tp-shop-sidebar .product-categories li a {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: .875rem;
  color: var(--color-text);
  padding: .3125rem .25rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-shop-sidebar .product-categories li a:hover {
  color: var(--color-accent);
  background: var(--color-surface);
}
.tp-shop-sidebar .product-categories li.current-cat > a {
  color: var(--color-accent);
  font-weight: 600;
}
.tp-shop-sidebar .product-categories .count {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: var(--radius-full, 9999px);
  padding: .125rem .4375rem;
}
.tp-shop-sidebar .product-categories .children {
  display: none;
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  padding-left: .875rem;
  margin-top: .125rem;
  box-sizing: border-box;
}
.tp-shop-sidebar .product-categories .children.is-open {
  display: block;
}
/* Botón toggle de subcategorías */
.tp-shop-sidebar .tp-cat-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: .25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.tp-shop-sidebar .tp-cat-toggle:hover {
  color: var(--color-accent);
  background: var(--color-surface);
}
.tp-shop-sidebar .tp-cat-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}
.tp-shop-sidebar .tp-cat-toggle::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT – Base compartida
═══════════════════════════════════════════════════════════════ */

/* Wrapper de página */
.tp-single-page { padding-block: 2rem; }
@media (max-width: 640px) { .tp-single-page { padding-block-start: .75rem; } }

/* Columna info compartida (tps-info) */
.tps-info { display: flex; flex-direction: column; gap: 1.25rem; }

.tps-info__category {
  font-size: .8125rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.tps-info__category a { color: inherit; transition: color var(--transition); }
.tps-info__category a:hover { color: var(--color-accent); }
@media (max-width: 640px) { .tps-info__category { font-size: .6125rem; } }

.tps-info__title-row { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.tps-info__title { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; flex: 1; }

.tps-info__rating { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--color-text-muted); }
.tps-info__rating-link { color: var(--color-accent); }
.tps-info__rating-link:hover { text-decoration: underline; }

.tps-info__price { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.tps-info__price del { font-size: 1.125rem; color: var(--color-text-muted); font-weight: 400; }
.tps-info__price ins { text-decoration: none; color: var(--color-sale-price, var(--color-danger)); }

/* Promos */
.tps-info__promos { display: flex; flex-direction: column; gap: .375rem; }
.tps-promo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500;
  padding: .5rem .875rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.tps-promo--transfer { color: var(--color-success); }
.tps-promo--cuotas   { color: var(--color-accent); }

/* Excerpt */
.tps-info__excerpt { font-size: .9375rem; line-height: 1.7; color: var(--color-text-muted); }

/* Trust badges */
.tps-info__trust {
  display: flex; gap: .75rem; flex-wrap: wrap;
  padding: 1rem; background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.tps-trust-badge {
  display: flex; align-items: center; gap: .375rem;
  font-size: .78rem; font-weight: 500; color: var(--color-text-muted);
}
.tps-trust-badge svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-success); }

/* SKU */
.tps-info__sku { font-size: .8rem; color: var(--color-text-muted); }
.tps-info__sku span { color: var(--color-text); }

/* Share buttons */
.tps-share {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
}
.tps-share__label {
  font-size: .8rem; font-weight: 500; color: var(--color-text-muted);
  white-space: nowrap;
}
.tps-share__buttons { display: flex; gap: .375rem; flex-wrap: wrap; }
.tps-share__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .775rem; font-weight: 500;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
  line-height: 1;
}
.tps-share__btn:hover { opacity: .85; transform: translateY(-1px); }
.tps-share__btn svg { flex-shrink: 0; }
.tps-share__btn--whatsapp  { background: #25d366; color: #fff; }
.tps-share__btn--messenger { background: #0084ff; color: #fff; }
.tps-share__btn--telegram  { background: #229ED9; color: #fff; }
.tps-share__btn--mail      { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
@media (max-width: 480px) {
  .tps-share__btn span { display: none; }
  .tps-share__btn { padding: .45rem; }
}

/* ── Galería – elementos compartidos ─────────────────────────────────── */
.tps-gallery__main-img { width: 100%; height: 100%; object-fit: cover; }

.tps-gallery__badges {
  position: absolute;
  top: .875rem;
  left: .875rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  pointer-events: none;
}

.tps-gallery__thumb {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
  flex-shrink: 0;
}
.tps-gallery__thumb.is-active,
.tps-gallery__thumb:hover { border-color: var(--color-accent); }
.tps-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Flechas de navegación (compartidas layouts 2, 3, 4) */
.tps-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.tps-gallery__nav:hover { background: #fff; box-shadow: var(--shadow-lg); }
.tps-gallery__nav--prev { left: .75rem; }
.tps-gallery__nav--next { right: .75rem; }

/* Zoom hint */
.tps-gallery__zoom-hint {
  position: absolute;
  bottom: .875rem;
  right: .875rem;
  background: rgba(255,255,255,.88);
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.tps-gallery-1__main:hover .tps-gallery__zoom-hint { opacity: 1; }

/* ── Video en galería ───────────────────────────────────────────────────── */
/* Thumb especial de video */
.tps-gallery__thumb--video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  border-color: var(--color-primary) !important;
}
.tps-gallery__thumb--video svg { color: #fff; }
.tps-gallery__thumb--video:hover { background: var(--color-primary-dark, color-mix(in srgb, var(--color-primary) 80%, #000)); }

/* Overlay de video sobre imagen principal */
.tps-gallery__video-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.tps-gallery__video-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Horizontal (16:9 default) */
.tps-gallery__video-iframe,
.tps-gallery__video-native {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* Vertical (9:16 — Shorts / TikTok) */
.tps-gallery__video-overlay.is-vertical .tps-gallery__video-iframe,
.tps-gallery__video-overlay.is-vertical .tps-gallery__video-native {
  width: auto;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
}
.tps-gallery__video-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  transition: background .15s;
}
.tps-gallery__video-close:hover { background: rgba(0,0,0,.85); }

/* Ocultar zoom hint cuando hay video overlay visible */
.tps-gallery-1--has-video .tps-gallery-1__main { cursor: default; }
.tps-gallery-1--has-video .tps-gallery__zoom-hint { display: none; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT 1 – Clásico (thumbnails horizontales abajo)
═══════════════════════════════════════════════════════════════ */
.tp-single--layout-1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: 2rem;
  align-items: start;
}

.tp-single--layout-1 .tp-single__gallery { position: sticky; top: 126px; }

.tps-gallery-1__main {
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: .875rem;
  cursor: zoom-in;
  position: relative;
  transition: box-shadow var(--transition);
}
.tps-gallery-1__main:hover { box-shadow: var(--shadow-lg); }
.tps-gallery-1__main img { transition: transform .4s ease; }
.tps-gallery-1__main:hover img { transform: scale(1.06); }

.tps-gallery-1__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.tps-gallery-1__thumbs .tps-gallery__thumb { width: 76px; height: 76px; }

@media (max-width: 900px) {
  .tp-single--layout-1 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tp-single--layout-1 .tp-single__gallery { position: static; }
}

/* ── Layout 7: Clásico con acordeón lateral (mismo grid que layout-1) ── */
.tp-single--layout-7 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: 2rem;
  align-items: start;
}
.tp-single--layout-7 .tp-single__gallery { position: sticky; top: 126px; }

.tps7-accordions { margin-top: .5rem; }

@media (max-width: 900px) {
  .tp-single--layout-7 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tp-single--layout-7 .tp-single__gallery { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT 2 – Thumbnails verticales (estilo Amazon)
═══════════════════════════════════════════════════════════════ */
.tp-single--layout-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: 2rem;
  align-items: start;
}

.tp-single--layout-2 .tp-single__gallery {
  position: sticky;
  top: 126px;
}

.tps-gallery-2 {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.tps-gallery-2__thumbs {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.tps-gallery-2__thumbs .tps-gallery__thumb { width: 80px; height: 80px; }

.tps-gallery-2__main {
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: zoom-in;
  position: relative;
}
.tps-gallery-2__main img { transition: transform .4s ease; }
.tps-gallery-2__main:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .tp-single--layout-2 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .tp-single--layout-2 .tp-single__gallery { position: static; }
  .tps-gallery-2 { grid-template-columns: minmax(0, 1fr); }
  .tps-gallery-2__thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .tps-gallery-2__thumbs .tps-gallery__thumb { flex-shrink: 0; }
}

/* Layout 2 — sin strip: imagen principal a ancho completo */
.tps-gallery-2--no-strip {
  grid-template-columns: 1fr;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT 3 – Magazine / Slider fullwidth
═══════════════════════════════════════════════════════════════ */
.tp-single--layout-3 {
  padding-block: 0;
}

/* Galería hero */
.tps-gallery-3 {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--color-surface);
}
@media (max-width: 768px) {
  .tps-gallery-3 {
    aspect-ratio: 1/1;         /* cuadrado en mobile — no recorta imágenes de producto */
    background: var(--color-surface);
  }
  .tps-gallery-3__slide img {
    object-fit: contain;       /* mostrar imagen completa sin recorte */
  }
}

.tps-gallery-3__track { position: relative; width: 100%; height: 100%; }

.tps-gallery-3__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.tps-gallery-3__slide.is-active { opacity: 1; pointer-events: auto; }
.tps-gallery-3__slide img { width: 100%; height: 100%; }
@media (min-width: 769px) {
  .tps-gallery-3__slide img { object-fit: cover; }
}

.tps-gallery-3__badges { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

/* Dots */
.tps-gallery-3__dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 2;
}
.tps-gallery-3__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.5);
  transition: background var(--transition), width var(--transition);
}
.tps-gallery-3__dot.is-active { background: #fff; width: 22px; }

/* Info centrada bajo galería */
.tp-single--layout-3 .tp-single__info { padding-block: 2.5rem; }
.tps-info--centered {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.tps-info--centered .tps-info__title { text-align: center; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.tps-info--centered .tps-info__title-row { justify-content: center; }
.tps-info--centered .tps-info__category { text-align: center; }
.tps-info--centered .tps-info__rating { justify-content: center; }
.tps-info--centered .tps-info__price { text-align: center; }
.tps-info--centered .tps-info__excerpt { text-align: center; }
.tps-info--centered .tp-add-to-cart { max-width: 440px; margin-inline: auto; }
.tps-info--centered .tp-variations { max-width: 440px; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT 4 – Grid lookbook / Zalando
═══════════════════════════════════════════════════════════════ */
.tp-single--layout-4 {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2.5rem;
  padding-block: 2rem;
  align-items: start;
}

.tp-single--layout-4 .tp-single__info { position: sticky; top: 90px; }

/* Galería lookbook */
.tps-gallery-4 { position: relative; }

.tps-gallery-4__hero {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: .75rem;
  position: relative;
  cursor: zoom-in;
}
.tps-gallery-4__hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tps-gallery-4__hero:hover img { transform: scale(1.04); }

/* Sub-grid secundario */
.tps-gallery-4__grid {
  display: grid;
  gap: .625rem;
}
.tps-gallery-4__grid--1 { grid-template-columns: 1fr; }
.tps-gallery-4__grid--2 { grid-template-columns: 1fr 1fr; }
.tps-gallery-4__grid--3 { grid-template-columns: repeat(3, 1fr); }

.tps-gallery-4__cell {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.tps-gallery-4__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.tps-gallery-4__cell:hover img { transform: scale(1.07); }

/* Overlay "+N más" */
.tps-gallery-4__more {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}

/* Botón "Ver N fotos" */
.tps-gallery-4__all-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .875rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition);
}
.tps-gallery-4__all-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }

/* Lightbox */
.tps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.tps-lightbox.is-open { opacity: 1; pointer-events: auto; }
.tps-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.tps-lightbox__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 90vw;
  width: 760px;
}
.tps-lightbox__img-wrap { width: 100%; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
.tps-lightbox__img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-lg); }
.tps-lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.tps-lightbox__close:hover { background: rgba(255,255,255,.3); }
.tps-lightbox .tps-gallery__nav { position: static; transform: none; background: rgba(255,255,255,.15); color: #fff; border-color: transparent; }
.tps-lightbox__thumbs { display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: thin; }
.tps-lightbox__thumb { width: 54px; height: 54px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; opacity: .55; transition: opacity var(--transition); flex-shrink: 0; border: 2px solid transparent; }
.tps-lightbox__thumb.is-active { opacity: 1; border-color: #fff; }
.tps-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tps-lightbox__counter { font-size: .8rem; color: rgba(255,255,255,.65); }

@media (max-width: 1100px) {
  .tp-single--layout-4 { grid-template-columns: 1fr 360px; }
}
@media (max-width: 900px) {
  .tp-single--layout-4 { grid-template-columns: 1fr; gap: 1.5rem; }
  .tp-single--layout-4 .tp-single__info { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT 5 – Stacked (imágenes apiladas, estilo Zara/H&M)
═══════════════════════════════════════════════════════════════ */
.tp-single--layout-5 {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2.5rem;
  padding-block: 2rem;
  align-items: start;
}
.tp-single--layout-5 .tp-single__info { position: sticky; top: 90px; }

.tps-gallery-5 {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .75rem;
  align-items: start;
}

/* Strip vertical de thumbnails */
.tps-gallery-5__strip {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: none;
}
.tps-gallery-5__strip::-webkit-scrollbar { display: none; }

.tps-gallery-5__thumb {
  width: 72px;
  aspect-ratio: 3/4;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
  flex-shrink: 0;
  background: none;
  padding: 0;
}
.tps-gallery-5__thumb.is-active,
.tps-gallery-5__thumb:hover { border-color: var(--color-primary); }
.tps-gallery-5__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Imágenes apiladas */
.tps-gallery-5__stack { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.tps-gallery-5__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

.tps-gallery-5__img-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
  background: var(--color-surface);
}
.tps-gallery-5__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tps-gallery-5__img-wrap:hover img { transform: scale(1.03); }

.tps-gallery-5__zoom {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}
.tps-gallery-5__img-wrap:hover .tps-gallery-5__zoom { opacity: 1; }
.tps-gallery-5__zoom:hover { background: #fff; }

@media (max-width: 1100px) {
  .tp-single--layout-5 { grid-template-columns: 1fr 360px; }
}
@media (max-width: 900px) {
  .tp-single--layout-5 { grid-template-columns: 1fr; gap: 1.5rem; }
  .tp-single--layout-5 .tp-single__info { position: static; }
  .tps-gallery-5 { grid-template-columns: 1fr; }
  .tps-gallery-5__strip { flex-direction: row; position: static; max-height: none; overflow-x: auto; order: 2; }
  .tps-gallery-5__thumb { width: 56px; flex-shrink: 0; }
  .tps-gallery-5__stack { order: 1; }
  .tps-gallery-5__img-wrap { aspect-ratio: 4/3; }
}

/* Layout 5 — sin strip: imagen apilada a ancho completo */
.tps-gallery-5--no-strip {
  grid-template-columns: 1fr;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT 6 – EME Studios Style
   Arquitectura: el grid ocupa exactamente el viewport menos el header.
   El scroll ocurre DENTRO de la galería, no en el body.
   Strip y panel quedan fijos visualmente sin necesitar position:sticky.
   Variable --tps6-offset se setea en JS leyendo la altura real del header.
═══════════════════════════════════════════════════════════════ */

/* Variable de offset — JS la actualiza al cargar */
:root { --tps6-offset: 116px; }

/* Fondo de página */
.tp-single-page--layout-6 {
  background: #efefef;
  padding-block: 0;
}
/* En layout-6 desktop, ocultar tabs y relacionados externos
   (descripción va en acordeones del panel, FBT va dentro del panel) */
.layout-6-active .tp-product-tabs,
.layout-6-active .woocommerce-tabs,
.layout-6-active .related.products { display: none; }

/* Grid: altura exacta del espacio disponible bajo el header */
.tp-single--layout-6 {
  display: grid;
  grid-template-columns: 72px 1fr 480px;
  gap: 0;
  height: calc(100vh - var(--tps6-offset));
  /* El grid NO scrollea — cada columna maneja su propio overflow */
  overflow: hidden;
}

/* ── COL 1: Strip thumbnails — scroll vertical propio ────────── */
.tps6-strip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  background: #efefef;
}
.tps6-strip::-webkit-scrollbar { display: none; }

.tps6-strip__thumb {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  padding: 0;
  transition: border-color .15s ease;
}
.tps6-strip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tps6-strip__thumb.is-active,
.tps6-strip__thumb:hover { border-color: #000; }

/* ── COL 2: Galería — scroll vertical propio (ella es el "page scroll") */
.tps6-gallery {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #efefef;
  position: relative;
  scrollbar-width: none;
}
.tps6-gallery::-webkit-scrollbar { display: none; }

.tps6-gallery__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

.tps6-gallery__item {
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  cursor: zoom-in;
  position: relative;
}
.tps6-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #efefef;
}

/* ── COL 3: Panel — scroll vertical propio ───────────────────── */
.tps6-panel-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
  padding: 10px 10px 10px 0;
  overflow: hidden;
}

.tps6-panel {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif);
  color: #000;
}
.tps6-panel::-webkit-scrollbar { width: 4px; }
.tps6-panel::-webkit-scrollbar-track { background: transparent; }
.tps6-panel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* Breadcrumb */
.tps6-panel__breadcrumb { font-size: 12px; color: #000; }
.tps6-panel__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #000;
  text-decoration: none;
  transition: opacity .15s;
}
.tps6-panel__breadcrumb a:hover { opacity: .6; }

/* Título + wishlist */
.tps6-panel__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tps6-panel__title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.88px;
  line-height: 24px;
  color: #000;
  flex: 1;
  margin: 0;
}
.tps6-wishlist-btn { color: #000 !important; flex-shrink: 0; }

/* Precio */
.tps6-panel__price { font-size: 18px; font-weight: 400; color: #000; padding: 4px 0; }
.tps6-panel__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.tps6-panel__price del { font-size: 14px; color: #888; }
.tps6-panel__price ins { text-decoration: none; }

/* Rating */
.tps6-panel__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
.tps6-panel__rating a { color: #000; text-decoration: underline; font-size: 13px; }

/* Promos */
.tps6-panel__promos { display: flex; flex-direction: column; gap: 6px; }
.tps6-promo {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 8px; border-radius: 4px;
  background: #f7f7f7; letter-spacing: -.26px;
}
.tps6-promo--transfer { color: #1a7a1a; }
.tps6-promo--cuotas { color: #000; }

/* Excerpt / info modelo */
.tps6-panel__excerpt {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
  letter-spacing: -.26px;
}
.tps6-panel__excerpt p { margin: 0 0 4px; }
.tps6-panel__excerpt p:last-child { margin: 0; }

/* Fila tabla de talles: se ubica justo antes de las variaciones */
.tps6-size-chart-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -8px; /* acerca visualmente al bloque de variaciones */
}

/* Botón tabla de talles — minimalista, texto con underline */
.tps6-size-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  text-decoration-line: underline;
  text-decoration-color: rgba(0,0,0,.25);
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0;
  font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif);
  transition: color .15s;
}
.tps6-size-chart-btn:hover {
  color: #000;
  text-decoration-color: #000;
}
.tps6-size-chart-btn svg { flex-shrink: 0; opacity: .6; }

/* Qty control */
.tps6-panel__atc-wrap { display: flex; flex-direction: column; gap: 8px; }
.tps6-qty-control {
  display: flex; align-items: center;
  border: 1px solid #e0e0e0; border-radius: 4px;
  overflow: hidden; width: fit-content;
}
.tps6-qty-control__btn {
  width: 32px; height: 32px; background: none; border: none;
  cursor: pointer; font-size: 16px; display: flex;
  align-items: center; justify-content: center; color: #000;
  transition: background .15s;
}
.tps6-qty-control__btn:hover { background: #f0f0f0; }
.tps6-qty-control__val {
  width: 40px; height: 32px; border: none;
  border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;
  text-align: center; font-size: 13px;
  -moz-appearance: textfield; appearance: textfield;
}
.tps6-qty-control__val::-webkit-inner-spin-button,
.tps6-qty-control__val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Botón ATC — usa colores del customizer */
.tps6-atc-btn {
  width: 100%; height: 36px; border-radius: 4px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif);
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.26px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .15s, opacity .15s; padding: 0 20px;
}
.tps6-atc-btn:hover { background: var(--color-accent-hover, var(--color-accent)); opacity: .9; }
.tps6-atc-btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: tps6-spin .6s linear infinite; display: none;
}
.tps6-atc-btn.is-loading .tps6-atc-btn__spinner { display: block; }
.tps6-atc-btn.is-loading .tps6-atc-btn__text { opacity: .5; }
@keyframes tps6-spin { to { transform: rotate(360deg); } }

/* Shipping */
.tps6-panel__shipping { font-size: 13px; }

/* Acordeones */
.tps6-accordions { display: flex; flex-direction: column; }
.tps6-accordion { border-top: 1px solid #e8e8e8; }
.tps6-accordion:last-child { border-bottom: 1px solid #e8e8e8; }
.tps6-accordion__trigger {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 14px 0;
  background: none; border: none; cursor: pointer;
  text-align: left; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .055em; color: #000; gap: 8px;
  font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif);
}
.tps6-accordion__icon { flex-shrink: 0; transition: transform .25s ease; }
.tps6-accordion__trigger[aria-expanded="true"] .tps6-accordion__icon { transform: rotate(45deg); }

/* Técnica grid-template-rows para animación fluida sin JS de altura */
.tps6-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.tps6-accordion__trigger[aria-expanded="true"] + .tps6-accordion__body {
  grid-template-rows: 1fr;
}
/* El div hijo DIRECTO necesita min-height:0 para que 0fr funcione */
.tps6-accordion__body__inner {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom .3s ease;
}
.tps6-accordion__trigger[aria-expanded="true"] + .tps6-accordion__body .tps6-accordion__body__inner {
  padding-bottom: 14px;
}
.tps6-accordion__body__inner p,
.tps6-accordion__body__inner div,
.tps6-accordion__body__inner ul,
.tps6-accordion__body__inner ol {
  font-size: 13px; line-height: 1.6; color: #333;
  letter-spacing: -.26px; margin: 0 0 8px;
}
.tps6-accordion__body__inner > :last-child { margin-bottom: 0; }

/* ── Lightbox ────────────────────────────────────────────────── */
.tps6-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.tps6-lightbox.is-open { opacity: 1; pointer-events: auto; }
.tps6-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.92); cursor: zoom-out;
}
.tps6-lightbox__box {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
}
.tps6-lightbox__img-wrap {
  max-width: 80vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.tps6-lightbox__img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 2px; }
.tps6-lightbox__close {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; z-index: 2;
}
.tps6-lightbox__close:hover { background: rgba(255,255,255,.25); }
.tps6-lightbox__nav {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.tps6-lightbox__nav:hover { background: rgba(255,255,255,.25); }
.tps6-lightbox__counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 13px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ── Etiqueta de sección (COLOR / TALLAS / COMPLETA EL LOOK) ─── */
.tps6-panel__section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: #000;
  margin: 0 0 10px;
}

/* ── Completa el look (FBT) ─────────────────────────────────── */
.tps6-panel__fbt { display: flex; flex-direction: column; }
.tps6-fbt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tps6-fbt-card {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: #000;
}
.tps6-fbt-card__img {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f7f7f7;
}
.tps6-fbt-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .3s ease;
}
.tps6-fbt-card:hover .tps6-fbt-card__img img { transform: scale(1.04); }
.tps6-fbt-card__name {
  font-size: 12px; line-height: 1.3; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.tps6-fbt-card__price { font-size: 12px; color: #555; margin: 0; }

/* ── Sticky bar mobile (oculta en desktop) ───────────────────── */
.tps6-sticky-bar { display: none; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT 6 RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .tp-single--layout-6 { grid-template-columns: 72px 1fr 400px; }
}
@media (max-width: 1100px) {
  .tp-single--layout-6 { grid-template-columns: 72px 1fr 360px; }
}
@media (max-width: 900px) {
  .tp-single--layout-6 { grid-template-columns: 72px 1fr 320px; }
  .tps6-panel__title { font-size: 18px; }
}

/* Mobile ≤ 767px: vuelve al scroll normal del body */
@media (max-width: 767px) {
  .tp-single-page--layout-6 { background: #efefef; }
  /* Mostrar los tabs/relacionados que ocultamos en desktop */
  .tp-single-page--layout-6 ~ .container { display: block; }

  /* Mostrar tabs/relacionados en mobile */
  .layout-6-active .tp-product-tabs,
  .layout-6-active .woocommerce-tabs,
  .layout-6-active .related.products { display: block; }

  /* Grid → columna única, altura libre */
  .tp-single--layout-6 {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  /* Strip → barra horizontal debajo de la galería */
  .tps6-strip {
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 16px;
    gap: 4px;
    order: 2;
  }
  .tps6-strip__thumb { flex-shrink: 0; }

  /* Galería → carrusel swipeable, scroll horizontal */
  .tps6-gallery {
    order: 1;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .tps6-gallery__item {
    flex-shrink: 0;
    width: 100vw;
    aspect-ratio: 1;
    scroll-snap-align: start;
  }
  .tps6-gallery__item img { object-fit: cover; object-position: top center; }

  /* Panel → tarjeta blanca debajo, scroll del body */
  .tps6-panel-wrap {
    height: auto;
    overflow: visible;
    padding: 0 12px 80px;
    order: 3;
  }
  .tps6-panel {
    border-radius: 8px;
    overflow-y: visible;
    flex: none;
    gap: 24px;
  }
  .tps6-panel__title { font-size: 18px; letter-spacing: -.72px; }
  .tps6-panel__price { font-size: 16px; }

  /* Sticky bar bottom */
  .tps6-sticky-bar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 100; background: #fff;
    padding: 12px 16px;
    transform: translateY(100%);
    transition: transform .3s ease;
    box-shadow: 0 -1px 0 rgba(0,0,0,.08);
  }
  .tps6-sticky-bar.is-visible { transform: translateY(0); }
  .tps6-sticky-bar__btn {
    width: 100%; height: 44px; border-radius: 4px;
    background: var(--color-accent); color: #fff;
    font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif);
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    border: none; cursor: pointer;
  }
}

/* ── Layout 6: overrides de swatches y variaciones EME style ──── */
/* ESTILOS ANTIGUOS ELIMINADOS - USAR LOS NUEVOS ABAJO */
.tp-single-page--layout-6 .tp-swatch-chip--image {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border-color: transparent;
}
.tp-single-page--layout-6 .tp-swatch-chip--image:hover,
.tp-single-page--layout-6 .tp-swatch-chip--image.is-selected {
  border-color: #000;
  border-width: 1px;
  transform: none;
}
.tp-single-page--layout-6 .tp-swatch-chip--color {
  border-radius: 4px;
  border-color: transparent;
}
.tp-single-page--layout-6 .tp-swatch-chip--color:hover,
.tp-single-page--layout-6 .tp-swatch-chip--color.is-selected {
  border-color: #000;
  transform: none;
}
.tp-single-page--layout-6 .tp-swatch-group {
  gap: 8px;
  flex-wrap: wrap;
}

/* Variaciones label style */
.tp-single-page--layout-6 .variations_form .variations td.label label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: #000;
  display: block;
  margin-bottom: 0.75rem;
}

/* Layout 6: Espaciado para celdas de variaciones */
.tp-single-page--layout-6 .variations td.label {
  vertical-align: top;
  padding-top: 0.5rem;
  padding-right: 1rem;
  width: auto;
  min-width: 100px;
}

.tp-single-page--layout-6 .variations td.value {
  vertical-align: top;
  padding-top: 1.25rem;
}

/* Forzar el label a estar arriba - ESPACIO REDUCIDO */
.tp-single-page--layout-6 .variations th.label {
  vertical-align: top !important;
  padding-top: 0.5rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0.75rem !important;
}

.tp-single-page--layout-6 .variations th.label label {
  display: block !important;
  margin-bottom: 0.75rem !important;
  padding-top: 0 !important;
  line-height: 1.2 !important;
}

.tp-single-page--layout-6 .variations td.value {
  vertical-align: top !important;
  padding-top: 0.5rem !important;
}

/* Layout 6: Espaciado dinámico para variaciones */
.tps6-panel__variations .variations {
  margin-bottom: 0.375rem !important;
  padding-bottom: 0.25rem !important;
  border-bottom: 1px solid var(--color-border);
}

.tps6-panel__variations .single_variation_wrap {
  margin-top: 0 !important; /* eliminar margen duplicado */
  padding-top: 0.25rem !important;
}

/* Mejorar UX/UI de swatches de talles */
.tps6-panel__variations .tp-swatch-chip--label {
  position: relative;
  background: #f8f9fa;
  border: 1px solid #e2e2e2;
  color: #000;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
  line-height: 1.2;
  height: auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
}

.tps6-panel__variations .tp-swatch-chip--label:hover {
  background: #000;
  border-color: #000;
  color: #fff;
  transform: translateY(-1px);
}

.tps6-panel__variations .tp-swatch-chip--label.is-selected {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  font-weight: 700;
}

.tps6-panel__variations .tp-swatch-chip--label.is-disabled {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #adb5bd !important;
  opacity: 0.6 !important;
  cursor: pointer !important;
  text-decoration: line-through !important;
}

.tps6-panel__variations .tp-swatch-chip--label.is-disabled.is-selected {
  background: #495057 !important;
  border-color: #495057 !important;
  color: #fff !important;
  opacity: 0.8 !important;
}

.tps6-panel__variations .tp-swatch-chip--label.is-disabled::after {
  content: attr(data-unavailable-label);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #dc3545;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.tps6-panel__variations .tp-swatch-chip--label.is-disabled:hover::after {
  opacity: 1;
}

/* Espacio extra para tooltip y guía de talles */
.tps6-panel__variations .tp-swatch-group {
  position: relative;
  margin-bottom: 1rem;
}

.tps6-panel__variations .tp-swatch-group::before {
  content: "Selecciona tu talle:";
  position: absolute;
  top: -25px;
  left: 0;
  font-size: 11px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Asegurar que solo los talles sin stock se vean deshabilitados */
.tps6-panel__variations .tp-swatch-chip--label:not(.is-disabled):not(.is-selected) {
  background: #f8f9fa !important;
  border: 1px solid #e2e2e2 !important;
  color: #000 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

/* Solo los swatches deshabilitados deberían tener tooltip de anotarse */
.tps6-panel__variations .tp-swatch-chip--label:not(.is-disabled)::after {
  display: none !important;
}

.tps6-panel__variations .single_variation_wrap {
  margin-top: 0; /* eliminar margen duplicado */
  padding-top: 0.5rem;
}

/* Rediseño del mensaje de stock (En stock / Sin stock) */
.tps6-panel__variations .woocommerce-variation-availability {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
}

.tps6-panel__variations .stock {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 0 0 10px 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tps6-panel__variations .stock::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}

.tps6-panel__variations .stock.in-stock {
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.tps6-panel__variations .stock.in-stock::before {
  background-color: #22c55e;
}

.tps6-panel__variations .woocommerce-variation-add-to-cart {
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

/* ATC nativo de WC dentro del panel layout-6 */
.tp-single-page--layout-6 .single_add_to_cart_button {
  width: 100%;
  height: 36px;
  border-radius: 4px !important;
  background: var(--color-accent) !important;
  color: #fff !important;
  font-family: var(--font-body, "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.26px;
  border: none !important;
  box-shadow: none !important;
  padding: 0 20px;
}
.tp-single-page--layout-6 .single_add_to_cart_button:hover {
  background: var(--color-accent-hover, var(--color-accent)) !important;
  opacity: .9;
}

/* ══════════════════════════════════════════════════════════════
   SWATCHES MODERNOS (variaciones WooCommerce)
═══════════════════════════════════════════════════════════════ */

/* Layout de variaciones — tabla convertida a bloques */
.variations_form table.variations { width: 100%; border: none; text-align: left; }
.variations_form .variations tbody { display: flex; flex-direction: column; gap: 1.5rem; }
.variations_form .variations tr { display: flex; flex-direction: column; gap: .375rem; text-align: left; }
.variations_form .variations td { display: block; padding: 0; border: none; text-align: left; }

/* Fila del nombre del atributo */
.variations_form .variations td.label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.variations_form .variations td.label label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  line-height: 1;
  text-align: left;
}
/* Valor seleccionado — se rellena con JS */
.variations_form .variations td.label .tp-swatch-selected-val {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

/* Fila de chips */
.variations_form .variations td.value { padding: 0; }
.variations_form .reset_variations { display: none !important; }

/* Grupo de chips */
.tp-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .375rem;
}

/* Base chip */
.tp-swatch-chip {
  position: relative;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  background: var(--color-bg);
  outline: none;
}
.tp-swatch-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Label / talla chip */
.tp-swatch-chip--label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1;
  white-space: nowrap;
}
.tp-swatch-chip--label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tp-swatch-chip--label.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.tp-swatch-chip--label.is-disabled {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: pointer;
}

/* Color chip */
.tp-swatch-chip--color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch-color, #ccc);
  border: 2.5px solid var(--color-border);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.tp-swatch-chip--color:hover { transform: scale(1.1); border-color: var(--color-primary); }
.tp-swatch-chip--color.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary);
  transform: scale(1.1);
}

/* Image chip */
.tp-swatch-chip--image {
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
}
.tp-swatch-chip--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-swatch-chip--image:hover { border-color: var(--color-primary); transform: scale(1.05); }
.tp-swatch-chip--image.is-selected { border-color: var(--color-primary); border-width: 2.5px; }

/* ── Chips sin stock: tachados y clickeables (abren lista de espera) ── */
.tp-swatch-chip.is-disabled.tp-swatch-chip--label {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   VARIACIONES (shared legacy)
═══════════════════════════════════════════════════════════════ */
.tp-variations { display: flex; flex-direction: column; gap: 0; }
.tp-variation-group__label { font-size: .875rem; font-weight: 600; margin-bottom: .5rem; display: block; }
.tp-variation-group__label span { font-weight: 400; color: var(--color-text-muted); margin-left: .375rem; }
.tp-swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.tp-swatch {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--color-border); cursor: pointer;
  transition: border-color var(--transition), transform var(--transition); overflow: hidden;
}
.tp-swatch--size { width: auto; height: 36px; padding: 0 .875rem; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; }
.tp-swatch.is-selected, .tp-swatch:hover { border-color: var(--color-accent); transform: scale(1.1); }
.tp-swatch.is-disabled { opacity: .35; pointer-events: none; }

/* Botón tabla de talles */
.tp-size-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: .75rem;
  font-size: .8125rem;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color .15s, text-decoration-color .15s;
}
.tp-size-chart-btn:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.tp-size-chart-btn svg { flex-shrink: 0; }

/* Modal lightbox tabla de talles */
.tp-size-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tp-size-chart-modal[hidden] { display: none; }
.tp-size-chart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.tp-size-chart-modal__box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: min(720px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: tp-modal-in .2s ease;
}
@keyframes tp-modal-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tp-size-chart-modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background .15s;
}
.tp-size-chart-modal__close:hover { background: rgba(0,0,0,.7); }
.tp-size-chart-modal__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 4rem);
  object-fit: contain;
}

/* Qty + ATC */
.tp-add-to-cart { display: flex; gap: .75rem; align-items: stretch; }

/* ── Control de cantidad ───────────────────────────────────────── */
.tp-qty-control {
  display: inline-flex;
  align-items: stretch;
  height: 52px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--color-bg);
}
.tp-qty-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.tp-qty-control__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 100%;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  user-select: none;
  -webkit-user-select: none;
}
.tp-qty-control__btn:hover {
  background: var(--color-surface, #f5f5f5);
  color: var(--color-primary);
}
.tp-qty-control__btn:active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Separadores entre botón y campo */
.tp-qty-control__btn:first-child { border-right: 1px solid var(--color-border); }
.tp-qty-control__btn:last-child  { border-left:  1px solid var(--color-border); }

.tp-qty-control__val {
  width: 48px;
  height: 100%;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
}
.tp-qty-control__val::-webkit-inner-spin-button,
.tp-qty-control__val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Qty nativo de WooCommerce (variaciones y productos simples via WC) ── */
/* WC genera: <div class="quantity"> + <input class="input-text qty text"> */
/* Nuestro JS envuelve ese input con el mismo markup que .tp-qty-control   */
.quantity { display: inline-flex; }

/* Cuando el JS inyecta el wrapper, el div.quantity queda dentro */
.tp-qty-control .quantity { display: contents; }

/* Input qty nativo — se resetea completamente */
.woocommerce-variation-add-to-cart .quantity input.qty,
.variations_form .quantity input.qty,
input.qty.input-text {
  width: 48px;
  height: 52px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}
input.qty.input-text::-webkit-inner-spin-button,
input.qty.input-text::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Wrapper qty nativo (antes de que el JS lo reemplace) */
.woocommerce-variation-add-to-cart .quantity,
.variations_form .quantity {
  display: inline-flex;
  align-items: center;
  height: 52px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce-variation-add-to-cart .quantity:focus-within,
.variations_form .quantity:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Botones +/− que inyecta nuestro JS alrededor del input de WC */
.tp-qty-native-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 52px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  user-select: none;
  -webkit-user-select: none;
}
.tp-qty-native-btn:hover { background: var(--color-surface, #f5f5f5); color: var(--color-primary); }
.tp-qty-native-btn:active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.tp-qty-native-btn--minus { border-right: 1px solid var(--color-border); }
.tp-qty-native-btn--plus  { border-left:  1px solid var(--color-border); }

/* Layout del row qty + ATC en variaciones */
.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  margin-top: clamp(1rem, 3vh, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; }

/* ── Botón Agregar al carrito moderno ──────────────────────────── */
.tp-atc-btn {
  position: relative;
  flex: 1;
  height: 52px;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 0 1.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--transition), transform .15s, box-shadow var(--transition);
  /* progreso fill */
  --atc-progress: 0%;
}
.tp-atc-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--atc-progress);
  background: rgba(255,255,255,.15);
  transition: width .35s ease;
  pointer-events: none;
}
.tp-atc-btn:hover:not(:disabled) {
  background: var(--color-primary-dark, color-mix(in srgb, var(--color-primary) 80%, #000));
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
.tp-atc-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.tp-atc-btn:disabled { cursor: not-allowed; opacity: .7; }

/* Ícono del carrito */
.tp-atc-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.tp-atc-btn:hover:not(:disabled) .tp-atc-btn__icon { transform: translateX(-2px) scale(1.1); }

/* Texto */
.tp-atc-btn__text { transition: opacity .2s; white-space: nowrap; }

/* Spinner (visible solo durante carga) */
.tp-atc-btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tp-atc-spin .7s linear infinite;
  flex-shrink: 0;
}

/* Estado: cargando */
.tp-atc-btn.is-loading .tp-atc-btn__icon  { display: none; }
.tp-atc-btn.is-loading .tp-atc-btn__spinner { display: block; }
.tp-atc-btn.is-loading .tp-atc-btn__text { opacity: .75; }

/* Estado: éxito */
.tp-atc-btn.is-success {
  background: var(--color-success, #22a85e) !important;
  transform: none !important;
  box-shadow: none !important;
}
.tp-atc-btn.is-success .tp-atc-btn__icon { display: flex; transform: scale(1.15); }
.tp-atc-btn.is-success .tp-atc-btn__spinner { display: none; }
.tp-atc-btn.is-success .tp-atc-btn__icon svg { animation: tp-atc-check .4s ease forwards; }

/* Estado: error */
.tp-atc-btn.is-error {
  background: #e53e3e !important;
}

@keyframes tp-atc-spin {
  to { transform: rotate(360deg); }
}
@keyframes tp-atc-check {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

@media (max-width: 640px) {
  .tp-atc-btn { min-width: 0; }
  .woocommerce-variation-add-to-cart { flex-wrap: nowrap; }
}

/* ── Botón nativo WooCommerce (variaciones) — mismo aspecto que .tp-atc-btn ── */
.tp-variations .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.variations_form .woocommerce-variation-add-to-cart-button .single_add_to_cart_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  height: 52px;
  padding: 0 1.75rem;
  background: var(--color-primary);
  color: #fff !important;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--transition), transform .15s, box-shadow var(--transition);
  --atc-progress: 0%;
  text-decoration: none !important;
}
/* Barra de progreso */
.tp-variations .single_add_to_cart_button::before,
.woocommerce-variation-add-to-cart .single_add_to_cart_button::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--atc-progress);
  background: rgba(255,255,255,.15);
  transition: width .35s ease;
  pointer-events: none;
}
/* Ícono carrito SVG inline via mask-image */
.tp-variations .single_add_to_cart_button::after,
.woocommerce-variation-add-to-cart .single_add_to_cart_button::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  order: -1; /* ícono antes del texto */
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.tp-variations .single_add_to_cart_button:hover:not(:disabled)::after,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover:not(:disabled)::after {
  transform: translateX(-2px) scale(1.1);
}
.tp-variations .single_add_to_cart_button:hover:not(:disabled),
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover:not(:disabled) {
  background: var(--color-primary-dark, color-mix(in srgb, var(--color-primary) 80%, #000));
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
}
.tp-variations .single_add_to_cart_button:active,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: none;
}
/* Estados cargando / éxito gestionados por JS */
.tp-variations .single_add_to_cart_button.is-loading,
.woocommerce-variation-add-to-cart .single_add_to_cart_button.is-loading {
  cursor: not-allowed;
  opacity: .85;
}
.tp-variations .single_add_to_cart_button.is-success,
.woocommerce-variation-add-to-cart .single_add_to_cart_button.is-success {
  background: var(--color-success, #22a85e) !important;
}
/* Ocultar el spinner nativo de WC */
.tp-variations .single_add_to_cart_button .woocommerce-Price-amount,
.tp-variations .wc-block-components-spinner { display: none; }

/* ══════════════════════════════════════════════════════════════
   TABS (descripción / reseñas)
═══════════════════════════════════════════════════════════════ */
.tp-product-tabs { margin-top: 1rem; }
.tp-tabs__nav { display: flex; border-bottom: 2px solid var(--color-border); gap: .25rem; }
.tp-tabs__btn {
  padding: .75rem 1.25rem;
  font-size: .9375rem; font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.tp-tabs__btn.is-active { color: var(--color-accent); border-color: var(--color-accent); }
.tp-tabs__panel { padding: 1.5rem 0; display: none; }
.tp-tabs__panel.is-active { display: block; }
.tp-tabs__panel p { margin-bottom: .875rem; line-height: 1.7; color: var(--color-text-muted); }

/* Tabla de atributos del producto (pestañas adicionales) */
.tp-product-attributes { width: 100%; border-collapse: collapse; }
.tp-product-attributes tr { border-bottom: 1px solid var(--color-border); }
.tp-product-attributes tr:last-child { border-bottom: none; }
.tp-product-attributes th,
.tp-product-attributes td { padding: .625rem .75rem; text-align: left; vertical-align: top; }
.tp-product-attributes th {
  width: 35%;
  font-weight: 600;
  color: var(--color-text);
}
.tp-product-attributes td { color: var(--color-text-muted); }
.tp-product-attributes tr:nth-child(odd) { background: var(--color-surface); }

/* ══════════════════════════════════════════════════════════════
   VALORACIONES — WooCommerce Reviews + Customer Reviews plugin
═══════════════════════════════════════════════════════════════ */

/* Contenedor principal */
.woocommerce-Reviews { max-width: 780px; }

/* Título de sección */
.woocommerce-Reviews-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* Mensaje sin reseñas */
.woocommerce-noreviews {
  color: var(--color-text-muted);
  font-size: .9375rem;
  padding: .5rem 0;
}

/* Lista de comentarios */
ol.commentlist {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

ol.commentlist li.comment {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

/* Avatar + meta */
.comment-text .meta { margin-bottom: .5rem; }
.woocommerce p.stars { margin-bottom: .5rem; }

/* Estrellas del rating (selector nativo WC) */
.comment-form-rating label { display: block; font-size: .875rem; font-weight: 500; color: var(--color-primary); margin-bottom: .375rem; }
.comment-form-rating select {
  padding: .5rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  background: var(--color-bg);
  color: var(--color-text);
  appearance: auto;
  margin-bottom: .25rem;
}

/* Estrellas interactivas (WC usa JS para convertir el select) */
.stars span a {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s;
}
.stars span a:hover,
.stars span a.active { color: #f59e0b; }

/* Formulario de valoración nativo */
#review_form_wrapper { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }

#review_form .comment-reply-title,
#review_form span#reply-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

#review_form p { margin-bottom: 1rem; }

#review_form label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: .375rem;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition);
  box-sizing: border-box;
}
#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

#review_form textarea { min-height: 130px; resize: vertical; }

.form-submit { margin-top: .25rem; }

#review_form input[type="submit"],
#review_form .submit,
.cr-single-product-rev-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.5rem;
  background: var(--color-accent);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--transition);
}
#review_form input[type="submit"]:hover,
#review_form .submit:hover,
.cr-single-product-rev-submit:hover { opacity: .85; }

/* Layout de campos nombre/email en 2 columnas */
.comment-form-author,
.comment-form-email {
  display: inline-block;
  width: calc(50% - .5rem);
  vertical-align: top;
}
.comment-form-author { margin-right: .75rem; }
@media (max-width: 540px) {
  .comment-form-author,
  .comment-form-email { width: 100%; margin-right: 0; }
}

/* Mensaje de login requerido */
.must-log-in,
.woocommerce-verification-required {
  padding: .875rem 1.125rem;
  background: #f8f9fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  color: var(--color-text-muted);
}
.must-log-in a { color: var(--color-accent); }

/* ── Customer Reviews plugin — overrides de integración ────── */

/* El plugin usa su propio sistema AJAX; ocultar el h2 duplicado que puede aparecer */
.woocommerce-Reviews .woocommerce-Reviews-title { display: none; }

/* Tabla de resumen de ratings del plugin */
.ivole-aggregateRating {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Barras de histograma */
.ivole-histogramCell2 { width: 100%; }
.ivole-histogramBar-container {
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  height: 8px;
}
.ivole-histogramBar {
  background: #f59e0b;
  height: 8px;
  border-radius: 999px;
}

/* Botón "Escribir reseña" del plugin */
.cr-write-review-btn,
.cr-reviews-write-review-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  transition: opacity var(--transition);
  margin-bottom: 1.5rem;
}
.cr-write-review-btn:hover,
.cr-reviews-write-review-btn:hover { opacity: .85; }

/* Formulario del plugin (cr-review-form.php) */
.cr-review-form-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 1.5rem;
  background: var(--color-bg);
}

.cr-review-form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cr-nav-left { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1rem; }
.cr-nav-right { cursor: pointer; }

.cr-review-form-lbl {
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: .375rem;
}

.cr-review-form-txt,
.cr-review-form-comment-txt {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.cr-review-form-txt:focus,
.cr-review-form-comment-txt:focus { outline: none; border-color: var(--color-accent); }
.cr-review-form-comment-txt { min-height: 120px; resize: vertical; }

.cr-review-form-ne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  margin-top: 1rem;
}
@media (max-width: 480px) { .cr-review-form-ne { grid-template-columns: 1fr; } }

.cr-review-form-comment { margin-top: 1rem; }
.cr-review-form-name,
.cr-review-form-email { display: flex; flex-direction: column; }

.cr-review-form-field-error { font-size: .8125rem; color: #ef4444; margin-top: .25rem; display: none; }

.cr-review-form-buttons {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}

.cr-review-form-submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  background: var(--color-accent);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--transition);
}
.cr-review-form-submit:hover { opacity: .85; }
.cr-review-form-submit img { width: 20px; height: 20px; display: none; }

.cr-review-form-cancel {
  padding: .625rem 1.25rem;
  background: transparent;
  color: var(--color-text-muted);
  font-size: .9375rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.cr-review-form-cancel:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* Legacy compat (antiguo template) */
.tp-single-product {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-block: 2rem;
}
@media (max-width: 768px) { .tp-single-product { grid-template-columns: 1fr; gap: 1.5rem; } }
.tp-product-gallery { position: sticky; top: 90px; }
.tp-product-gallery__main { aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 1rem; cursor: zoom-in; }
.tp-product-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tp-product-gallery__main:hover img { transform: scale(1.05); }
.tp-product-gallery__thumbs { display: flex; gap: .625rem; flex-wrap: wrap; }
.tp-product-gallery__thumb { width: 72px; height: 72px; border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: border-color var(--transition); flex-shrink: 0; }
.tp-product-gallery__thumb.is-active, .tp-product-gallery__thumb:hover { border-color: var(--color-accent); }
.tp-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tp-product-info { display: flex; flex-direction: column; gap: 1.25rem; }
.tp-product-info__category { font-size: .8125rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.tp-product-info__title { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; }
.tp-product-info__rating { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--color-text-muted); }
.tp-product-info__price { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); }
.tp-product-info__price del { font-size: 1.125rem; color: var(--color-text-muted); font-weight: 400; }
.tp-product-info__price ins { text-decoration: none; color: var(--color-sale-price, var(--color-danger)); }
.tp-product-promos { display: flex; flex-direction: column; gap: .375rem; }
.tp-product-promo { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; padding: .5rem .875rem; border-radius: var(--radius-md); background: var(--color-surface); }
.tp-product-promo--transfer { color: var(--color-success); }
.tp-product-promo--cuotas  { color: var(--color-accent); }
.tp-trust-badges { display: flex; gap: .75rem; flex-wrap: wrap; padding: 1rem; background: var(--color-surface); border-radius: var(--radius-lg); }
.tp-trust-badge { display: flex; align-items: center; gap: .375rem; font-size: .78rem; font-weight: 500; color: var(--color-text-muted); }
.tp-trust-badge svg { width: 16px; height: 16px; color: var(--color-success); }

/* ══════════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS / UPSELLS
═══════════════════════════════════════════════════════════════ */
.related.products,
.upsells.products {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.related.products > h2,
.upsells.products > h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

/* Grid de 4 columnas para relacionados */
.related.products ul.products,
.upsells.products ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1024px) {
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Limitar altura de imagen en relacionados */
.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Layout estilo Shopify
═══════════════════════════════════════════════════════════════ */

/* Ocultar el header/footer del tema en checkout para foco total */
.woocommerce-checkout .tp-topbar,
.woocommerce-checkout .tp-footer { display: none; }

/* Página completa: layout de 2 columnas con header propio */
.tp-checkout-page {
  display: grid;
  grid-template-columns: 1fr 38%;
  min-height: 100vh;
  align-items: start;
  max-width: 1440px;    /* centrar el layout en pantallas muy anchas */
  margin-inline: auto;
}

/* Columna izquierda — formulario */
.tp-checkout-form-col {
  padding: 2.5rem 2rem 2.5rem clamp(1.5rem, 4vw, 4rem);
  max-width: none;      /* quitar el max-width que lo corrÍa hacia la derecha */
  margin-left: 0;
  width: 100%;
}

/* Columna derecha — resumen (fondo gris) */
.tp-checkout-summary-col {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
  position: sticky;
  top: 0;
  align-self: start;
  /* Asegurar que el blockUI overlay de WC no tape esta columna */
  z-index: 1;
  isolation: isolate;
}

/* Título "Pago" — vive fuera de #order_review para sobrevivir al AJAX de WC */
.tp-checkout-payment-title {
  margin-bottom: 1rem;
}
/* Quitar margen superior de la sección pago ya que el título está encima */
.tp-checkout-payment-section {
  margin-bottom: 2rem;
}

/* blockUI overlay de WC — limitar al area del form izquierdo, no a la derecha */
.tp-checkout-form-col {
  position: relative; /* contexto de apilamiento para el blockUI */
}

/* ── Secciones del formulario ─────────────────────────────── */
.tp-checkout-section {
  margin-bottom: 2rem;
}
.tp-checkout-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .875rem;
  border-bottom: 1.5px solid #e5e7eb;
}

/* Número de paso + texto del título */
.tp-checkout-section__step {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.tp-checkout-section__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.tp-checkout-section__subtitle {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.25rem 0 .75rem;
}
.tp-checkout-login-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  text-decoration: none;
}
.tp-checkout-login-link:hover { text-decoration: underline; }

/* ── Panel auth inline (login / registro) ─────────────────────── */
.tp-checkout-auth-panel {
  background: var(--color-surface, #f9fafb);
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
  animation: tp-auth-slide-in .2s ease;
}
@keyframes tp-auth-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tp-checkout-auth-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
}
/* Tabs login / registro */
.tp-checkout-auth-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1rem;
  background: #e5e7eb;
  border-radius: 8px;
  padding: 3px;
}
.tp-checkout-auth-tab {
  flex: 1;
  padding: .45rem .75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.tp-checkout-auth-tab--active {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
/* Campos auth */
.tp-auth-field {
  position: relative;
  margin-bottom: .65rem;
}
.tp-auth-field .input-text {
  width: 100%;
  padding: .75rem 2.5rem .75rem 1rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .9375rem;
  background: #fff;
  color: var(--color-text);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  box-sizing: border-box;
}
.tp-auth-field .input-text:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
/* Botón ojo contraseña */
.tp-auth-field--pass { position: relative; }
.tp-auth-toggle-pass {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-muted, #9ca3af);
  display: flex;
  align-items: center;
}
.tp-auth-toggle-pass:hover { color: var(--color-text); }
/* Fila recordarme + olvidé */
.tp-auth-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
}
.tp-auth-row--space { justify-content: space-between; }
.tp-auth-remember {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  color: var(--color-muted, #6b7280);
  cursor: pointer;
}
.tp-auth-remember input[type="checkbox"] { margin: 0; accent-color: var(--color-primary); }
.tp-auth-forgot {
  font-size: .8125rem;
  color: var(--color-accent);
  text-decoration: none;
}
.tp-auth-forgot:hover { text-decoration: underline; }
/* Botón submit */
.tp-auth-submit {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Campos del formulario (estilo Shopify: sin label flotante) */
.woocommerce-checkout .woocommerce form .form-row,
.tp-checkout-form .form-row {
  position: relative;
  margin-bottom: .75rem;
}
.woocommerce-checkout .woocommerce form .form-row label,
.tp-checkout-form .form-row label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-muted, #666);
  margin-bottom: .3rem;
}
/* Ocultar labels y usar solo placeholders (estilo Shopify limpio) */
.tp-checkout-form .form-row label:not(.checkbox),
.woocommerce-checkout .form-row label:not(.checkbox) {
  display: none;
}
.woocommerce-checkout .woocommerce form .form-row .input-text,
.woocommerce-checkout .woocommerce form .form-row select,
.tp-checkout-form .form-row .input-text,
.tp-checkout-form .form-row select {
  width: 100%;
  padding: .875rem 1rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .9375rem;
  background: #fff;
  color: var(--color-text);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce-checkout .woocommerce form .form-row .input-text:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus,
.tp-checkout-form .form-row .input-text:focus,
.tp-checkout-form .form-row select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.tp-checkout-form .form-row .input-text::placeholder { color: #9ca3af; }

/* Grid de campos 2 columnas para nombre/apellido y ciudad/estado/zip */
.tp-checkout-address-fields .form-row-first,
.tp-checkout-address-fields .form-row-last {
  display: inline-block;
  width: calc(50% - .375rem);
}
.tp-checkout-address-fields .form-row-first { margin-right: .75rem; }

/* También aplica el grid 50/50 a los campos de nombre/apellido en la sección contacto */
#tp-checkout-contact .form-row-first,
#tp-checkout-contact .form-row-last {
  display: inline-block;
  width: calc(50% - .375rem);
}
#tp-checkout-contact .form-row-first { margin-right: .75rem; }

/* Campo país: nota sutil de país seleccionado */
.tp-country-field-wrap {
  position: relative;
}
.tp-country-field-wrap select {
  /* Reducir opacidad visual para indicar que está predefinido */
}
.tp-country-selected-note {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  color: #9ca3af;
  padding-left: .25rem;
}
.tp-country-change-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: .75rem;
  color: var(--color-accent, #2563eb);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.tp-country-change-btn:hover {
  color: var(--color-primary);
}
/* Cuando se hace clic en "Cambiar país", mostrar el select normal */
.tp-country-field-wrap.tp-country-unlocked .tp-country-selected-note {
  display: none;
}

/* ── Campos fiscales DNI / CUIT ─────────────────────────────────────────── */

/* Selector de tipo de documento — aspecto igual al select de país */
.tp-fiscal-id-type select {
  font-weight: 500;
  color: var(--color-text);
}

/* Campos DNI y CUIT: ocultos por defecto, JS los muestra según selección */
.tp-fiscal-dni-field,
.tp-fiscal-cuit-field {
  display: none;
}
.tp-fiscal-dni-field.tp-fiscal-visible,
.tp-fiscal-cuit-field.tp-fiscal-visible {
  display: block;
  animation: tp-fiscal-fadein .2s ease;
}
@keyframes tp-fiscal-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modo "solo CUIT / CUIL": el DNI y el selector de tipo de documento se ocultan
   (los campos siguen existiendo) y el CUIT queda visible sin depender del JS */
.tp-fiscal-hidden {
  display: none !important;
}
.tp-fiscal-cuit-field.tp-fiscal-cuit-only {
  display: block;
}

/* Nota explicativa del campo CUIT */
.tp-fiscal-cuit-field .description,
.tp-fiscal-cuit-field ~ .description {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* Subtítulos de los campos de facturación creados por el plugin Cianbox
   (condición IVA, tipo/número de documento, categoría) dentro de Contacto */
#tp-checkout-contact .woocommerce-input-wrapper .description {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  color: #9ca3af;
  line-height: 1.4;
}

/* Checkbox "enviar a dirección diferente" */
.tp-checkbox-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  cursor: pointer;
  font-weight: 500;
}
.tp-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; }

/* Dirección de envío alternativa: JS de WC (woocommerce-checkout.js) maneja el show/hide
   via #ship-to-different-address-checkbox y #shipping_address. Solo ocultamos por defecto. */
.tp-shipping-address-fields { display: none; }

/* Hint WhatsApp bajo el campo de teléfono */
.tp-whatsapp-hint {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: #16a34a;
  margin: -.375rem 0 .75rem;
  padding: 0;
}
.tp-whatsapp-hint svg { flex-shrink: 0; }

/* ── Métodos de pago ─────────────────────────────────────────── */
.tp-checkout-payment {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* Lista de métodos */
.tp-payment-methods,
.wc_payment_methods {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Cada método: tarjeta seleccionable */
.tp-payment-methods li,
.wc_payment_methods li {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}
.tp-payment-methods li:has(input[type="radio"]:checked),
.wc_payment_methods li:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}

/* Label: fila clickeable */
.tp-payment-methods label,
.wc_payment_methods label {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-heading);
  user-select: none;
}

/* Ocultar el radio nativo y reemplazarlo con un círculo custom */
.tp-payment-methods input[type="radio"],
.wc_payment_methods input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color .2s;
  background: #fff;
}
.tp-payment-methods input[type="radio"]:checked,
.wc_payment_methods input[type="radio"]:checked {
  border-color: var(--color-primary);
  border-width: 5px;
  background: #fff;
}

/* Icono/logo del método (imagen) */
.tp-payment-methods label img,
.wc_payment_methods label img {
  max-height: 22px;
  width: auto;
  margin-left: auto;
  border-radius: 4px;
}

/* payment_box: contenido expandible cuando está seleccionado */
.tp-payment-methods .payment_box,
.wc_payment_methods .payment_box {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: .875rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.6;
  background: transparent;
  border-top: 1px solid #f3f4f6;
  padding-top: .75rem;
}
.tp-payment-methods .payment_box p,
.wc_payment_methods .payment_box p {
  margin: 0;
}
.tp-payment-methods .payment_box::before,
.wc_payment_methods .payment_box::before {
  display: none; /* quitar el triángulo/flecha de WC */
}

/* Nota de privacidad — más sutil */
.woocommerce-checkout .woocommerce-privacy-policy-text,
#tp-checkout-payment .woocommerce-privacy-policy-text {
  font-size: .8125rem;
  color: var(--color-muted, #9ca3af);
  line-height: 1.5;
  text-align: center;
  margin-bottom: .75rem;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--color-accent); }

/* ── Métodos de envío ────────────────────────────────────────── */
#tp-checkout-shipping-method .shipping_methods,
#tp-checkout-shipping-method .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
#tp-checkout-shipping-method .shipping_methods li,
#tp-checkout-shipping-method .woocommerce-shipping-methods li {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: .875rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  transition: border-color .2s;
  cursor: pointer;
}
#tp-checkout-shipping-method .shipping_methods li:has(input:checked),
#tp-checkout-shipping-method .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}
#tp-checkout-shipping-method input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .2s;
  background: #fff;
}
#tp-checkout-shipping-method input[type="radio"]:checked {
  border-color: var(--color-primary);
  border-width: 5px;
}
#tp-checkout-shipping-method label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
}
#tp-checkout-shipping-method .woocommerce-Price-amount {
  font-weight: 600;
  color: var(--color-heading);
}
/* Skeleton loader — mientras WC calcula opciones de envío */
.tp-shipping-skeleton {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tp-shipping-skeleton__item {
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: tp-skeleton-shimmer 1.4s infinite;
}
@keyframes tp-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tp-shipping-skeleton__label {
  font-size: .75rem;
  color: #9ca3af;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-shipping-skeleton__label svg {
  animation: tp-spin 1s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}

/* Sin métodos disponibles */
#tp-checkout-shipping-method .woocommerce-shipping-destination,
#tp-checkout-shipping-method p {
  font-size: .875rem;
  color: var(--color-muted, #6b7280);
  padding: .75rem 1rem;
  background: #f9fafb;
  border-radius: 8px;
  margin: 0;
}

/* ── Botón "Pagar ahora" — Truck Button ──────────────────────── */
.tp-place-order { padding: .25rem 0 0; }

/* Variables propias del botón camión */
.tp-truck-btn {
  /* Colores del camión — todos derivados del tema o hardcodeados del original */
  --tb-color:           #fff;
  --tb-bg:              var(--color-primary);
  --tb-bg-dark:         color-mix(in srgb, var(--color-primary) 80%, #000);
  --tb-tick:            #fff;
  --tb-base:            #0D0F18;
  --tb-wheel:           #2B3044;
  --tb-wheel-inner:     #646B8C;
  --tb-wheel-dot:       #fff;
  --tb-back:            #6D58FF;
  --tb-back-inner:      #362A89;
  --tb-back-inner-shd:  #2D246B;
  --tb-front:           #A6ACCD;
  --tb-front-shadow:    #535A79;
  --tb-front-light:     #FFF8B1;
  --tb-window:          #2B3044;
  --tb-window-shadow:   #404660;
  --tb-street:          color-mix(in srgb, var(--color-primary) 50%, #000 50%);
  --tb-street-fill:     color-mix(in srgb, var(--color-primary) 30%, #000 70%);
  --tb-box:             #DCB97A;
  --tb-box-shadow:      #B89B66;

  /* Estado animado — GSAP actualiza estas vars */
  --progress:   0;
  --truck-y:    0;
  --truck-y-n: -26;
  --box-x:     -24;
  --box-y:      -6;
  --box-s:      .5;
  --box-o:      0;
  --hx:         0;
  --bx:         0;

  /* Layout */
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  position: relative;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: center;
  color: var(--tb-color);
  background: var(--tb-bg);
  border-radius: 50px;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) translateZ(0);
  transition: transform .5s, border-radius .3s linear var(--br-d, 0s);
  -webkit-tap-highlight-color: transparent;
}

/* Barra de progreso (riel del camión) — pseudo-elementos */
.tp-truck-btn::before,
.tp-truck-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 6px;
  display: block;
  border-radius: 0 0 4px 4px;
  background: var(--b, var(--tb-street));
  transform-origin: 0 0;
  transform: rotateX(90deg) scaleX(var(--sy, 1));
}
.tp-truck-btn::after {
  --sy: var(--progress, 0);
  --b: var(--tb-street-fill);
}

/* ── Textos del botón ────────────────────────────────────────── */
.tp-truck-btn__default,
.tp-truck-btn__success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  transition: opacity .3s;
}

/* Logo de la pasarela (Mercado Pago / Nave / MODO) — oculto por defecto.
   Ancho variable: el alto fijo (--tb-logo-h) define el tamaño, el ancho
   lo calcula JS según la proporción real del PNG para no deformarlo. */
.tp-truck-btn__gateway-logo {
  display: none;
  --tb-logo-h: 26px;
  height: var(--tb-logo-h);
  width: 80px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  flex-shrink: 0;
}

/* ── Bot. Pagar: estilo según método de pago seleccionado ───────────── */
/* --tp-gateway-bg lo setea JS según el gateway elegido (MP/Nave/MODO).
   Solo pisamos --tb-bg/--tb-bg-dark: el resto de la animación del camión
   no se toca. */
.tp-truck-btn--gateway {
  --tb-bg:      var(--tp-gateway-bg);
  --tb-bg-dark: color-mix(in srgb, var(--tp-gateway-bg) 80%, #000);
}
.tp-truck-btn--gateway .tp-truck-btn__gateway-logo {
  display: block;
}
.tp-truck-btn__success {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.tp-truck-btn__success svg {
  width: 14px;
  height: 12px;
  stroke: var(--tb-tick);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: stroke-dashoffset .4s ease .45s;
}

/* Animando: inclinar el botón (vista de pista) */
.tp-truck-btn--animating {
  --rx: -90deg;
  border-radius: 0 !important;
  --br-d: 0s;
}
.tp-truck-btn--animating .tp-truck-btn__default { opacity: 0; }

/* Done: volver a normal y mostrar éxito */
.tp-truck-btn--done {
  --rx: 0deg;
  border-radius: 50px !important;
  --br-d: .2s;
}
.tp-truck-btn--done .tp-truck-btn__success { opacity: 1; }
.tp-truck-btn--done .tp-truck-btn__success svg { stroke-dashoffset: 0; }
.tp-truck-btn--done .tp-truck-btn__default { opacity: 0; }

/* Hover normal (solo cuando no está animando) */
.tp-truck-btn:not(.tp-truck-btn--animating):not(.tp-truck-btn--done):hover {
  background: var(--tb-bg-dark);
  transform: translateY(-1px) rotateX(0deg);
}
.tp-truck-btn:disabled { cursor: not-allowed; }

/* ── Camión ──────────────────────────────────────────────────── */
.tp-truck-btn__truck {
  position: absolute;
  width: 72px;
  height: 28px;
  left: 0;
  bottom: 0;
  transform: rotateX(90deg)
             translate3d(4px, calc(var(--truck-y-n, -26) * 1px), 12px);
  pointer-events: none;
}

/* Ruedas (::before y ::after del truck, simuladas con spans) */
.tp-truck__wheel {
  position: absolute;
  bottom: -6px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tb-wheel);
  transform: translateY(calc(var(--truck-y, 0) * -1px)) translateZ(0);
  z-index: 2;
}
.tp-truck__wheel::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 35px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tb-wheel);
}
/* Llantas con punto blanco */
.tp-truck-btn__truck::before,
.tp-truck-btn__truck::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
  box-shadow: inset 0 0 0 2px var(--tb-wheel), inset 0 0 0 4px var(--tb-wheel-inner);
  background: var(--tb-wheel-dot);
  transform: translateY(calc(var(--truck-y, 0) * -1px)) translateZ(0);
}
.tp-truck-btn__truck::after { left: 54px; }

/* Carrocería trasera */
.tp-truck__back {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 47px;
  height: 28px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(68deg,
    var(--tb-back-inner) 0%, var(--tb-back-inner) 22%,
    var(--tb-back-inner-shd) 22.1%, var(--tb-back-inner-shd) 100%);
}
.tp-truck__back::before {
  content: '';
  position: absolute;
  left: 11px; top: 0; right: 0; bottom: 0;
  z-index: 2;
  border-radius: 0 1px 0 0;
  background: var(--tb-back);
}
.tp-truck__back::after {
  content: '';
  position: absolute;
  border-radius: 1px;
  width: 73px;
  height: 2px;
  left: -1px;
  bottom: -2px;
  background: var(--tb-base);
}

/* Cabina delantera */
.tp-truck__front {
  position: absolute;
  left: 47px;
  bottom: -1px;
  height: 22px;
  width: 24px;
  clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
  background: linear-gradient(84deg,
    var(--tb-front-shadow) 0%, var(--tb-front-shadow) 10%,
    var(--tb-front) 12%, var(--tb-front) 100%);
}
.tp-truck__front::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 8px;
  left: 7px;
  top: 2px;
  clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(59deg,
    var(--tb-window) 0%, var(--tb-window) 57%,
    var(--tb-window-shadow) 55%, var(--tb-window-shadow) 100%);
}
.tp-truck__front::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 2px;
  right: 0;
  bottom: 3px;
  background: var(--tb-front-light);
}

/* Caja de carga */
.tp-truck__box {
  position: absolute;
  width: 13px;
  height: 13px;
  right: 56px;
  bottom: 0;
  z-index: 1;
  border-radius: 1px;
  overflow: hidden;
  transform: translate(calc(var(--box-x, -24) * 1px), calc(var(--box-y, -6) * 1px)) scale(var(--box-s, .5));
  opacity: var(--box-o, 0);
  background: linear-gradient(68deg,
    var(--tb-box) 0%, var(--tb-box) 50%,
    var(--tb-box-shadow) 50.2%, var(--tb-box-shadow) 100%);
  background-size: 250% 100%;
  background-position-x: calc(var(--bx, 0) * 1%);
}
.tp-truck__box::before {
  content: '';
  position: absolute;
  background: rgba(255,255,255,.2);
  left: 0; right: 0;
  top: 6px;
  height: 1px;
}
.tp-truck__box::after {
  content: '';
  position: absolute;
  width: 6px;
  left: 100%;
  top: 0; bottom: 0;
  background: var(--tb-back);
  transform: translateX(calc(var(--hx, 0) * 1px));
}

/* Badge seguridad debajo del botón */
.tp-checkout-secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-size: .75rem;
  color: var(--color-muted, #9ca3af);
  margin-top: .75rem;
}

/* Nota de privacidad de WC */
.tp-place-order .woocommerce-privacy-policy-text {
  font-size: .8rem;
  color: var(--color-muted, #9ca3af);
  text-align: center;
  margin-bottom: .75rem;
  line-height: 1.5;
}
.tp-place-order .woocommerce-privacy-policy-text a { color: var(--color-accent); }

/* ── Footer links ────────────────────────────────────────────── */
.tp-checkout-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.tp-checkout-footer-links a {
  font-size: .8125rem;
  color: var(--color-muted, #9ca3af);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tp-checkout-footer-links a:hover { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Resumen (columna derecha)
═══════════════════════════════════════════════════════════════ */

/* Toggle móvil (en desktop siempre abierto, en mobile acordeón) */
.tp-checkout-summary-toggle {
  border: none;
  background: none;
}
.tp-checkout-summary-toggle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0 1rem;
  cursor: pointer;
  list-style: none;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1.5px solid #e5e7eb;
  margin-bottom: 1.25rem;
  user-select: none;
}
.tp-checkout-summary-toggle > summary::-webkit-details-marker { display: none; }
.tp-checkout-summary-toggle > summary > span {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tp-checkout-summary-toggle__total {
  color: var(--color-heading);
  font-size: 1rem;
}
.tp-checkout-summary-toggle__chevron {
  transition: transform .2s;
}
.tp-checkout-summary-toggle[open] .tp-checkout-summary-toggle__chevron {
  transform: rotate(180deg);
}

/* Items del resumen */
.tp-checkout-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.tp-checkout-item {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.tp-checkout-item__img-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  /* sin overflow:hidden para que el badge qty no quede recortado */
}
.tp-checkout-item__img-wrap img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: block;
}
.tp-checkout-item__qty {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #4b5563;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #f5f5f5; /* match background de la col resumen */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tp-checkout-item__info {
  flex: 1;
  min-width: 0;
}
.tp-checkout-item__name {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-checkout-item__variation {
  display: block;
  font-size: .8125rem;
  color: var(--color-muted, #6b7280);
  margin-top: .125rem;
}
.tp-checkout-item__pricing {
  text-align: right;
  flex-shrink: 0;
}
.tp-checkout-item__price {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
}
.tp-checkout-item__unit-price {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: .125rem;
}

/* Divisor */
.tp-checkout-summary-divider {
  border: none;
  border-top: 1.5px solid #e5e7eb;
  margin: 1.25rem 0;
}

/* Cupón */
.tp-checkout-coupon-row {
  display: flex;
  gap: .5rem;
}
.tp-checkout-coupon-input {
  flex: 1;
  padding: .75rem 1rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  outline: none;
  transition: border-color .2s;
  background: #fff;
}
.tp-checkout-coupon-input:focus { border-color: var(--color-primary); }
.tp-checkout-coupon-btn {
  padding: .75rem 1.125rem;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, opacity .2s;
  flex-shrink: 0;
}
.tp-checkout-coupon-btn:hover { opacity: .85; }

/* Totales */
.tp-checkout-totals { display: flex; flex-direction: column; gap: .625rem; }
.tp-checkout-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9375rem;
  color: var(--color-text);
}
.tp-checkout-totals__row--discount { color: var(--color-success, #16a34a); }
.tp-checkout-totals__shipping { color: var(--color-muted, #6b7280); font-size: .875rem; }

/* Fila de total final */
.tp-checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tp-checkout-total-row__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  display: block;
}
.tp-checkout-total-row__tax-note {
  font-size: .75rem;
  color: var(--color-muted, #9ca3af);
  display: block;
  margin-top: .125rem;
}
.tp-checkout-total-row__amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -.02em;
}

/* Loader overlay de la columna de totales */
.tp-summary-loader {
  position: absolute;
  inset: 0;
  background: rgba(245,245,245,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(1px);
  border-radius: inherit;
}
.tp-summary-loader svg {
  animation: tp-spin 1s linear infinite;
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Responsive
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tp-checkout-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  /* En móvil el resumen va abajo (formulario primero, botón al final) */
  .tp-checkout-summary-col {
    min-height: unset;
    position: static;
    order: 1;
    padding: 1rem 1rem;
  }
  .tp-checkout-form-col {
    padding: 1.5rem 1rem;
    max-width: 100%;
    margin: 0;
  }
  /* En móvil el details actúa como acordeón */
  .tp-checkout-summary-body { padding-top: .5rem; }

  /* Summary header: evitar que el total quede cortado */
  .tp-checkout-summary-toggle > summary {
    gap: .5rem;
    overflow: hidden;
  }
  .tp-checkout-summary-toggle > summary > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .tp-checkout-summary-toggle__total {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Items: nombre puede wrappear, precio no se corta */
  .tp-checkout-item__name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: .8125rem;
    line-height: 1.3;
  }
  .tp-checkout-item__img-wrap {
    width: 60px;
    height: 60px;
  }
  .tp-checkout-item__img-wrap img {
    width: 56px;
    height: 56px;
  }
  .tp-checkout-item__price {
    font-size: .875rem;
  }
  .tp-checkout-item {
    gap: .625rem;
  }
  .tp-checkout-item__variation {
    font-size: .75rem;
  }
}
@media (min-width: 1025px) {
  /* En desktop forzar el summary abierto y sin cursor pointer */
  .tp-checkout-summary-toggle > summary { display: none; }
  .tp-checkout-summary-toggle .tp-checkout-summary-body { display: block !important; }
}

/* ── Errores de validación inline ────────────────────────────── */
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: #ef4444;
}
.woocommerce-checkout .woocommerce-invalid-required-field .input-text::placeholder {
  color: #ef4444;
}

/* ── Notices dentro del checkout ─────────────────────────────── */
.woocommerce-checkout .woocommerce-NoticeGroup { margin-bottom: 1.5rem; }

/* ── Métodos de envío WC ─────────────────────────────────────── */
#tp-checkout-shipping-method .shipping_method { margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
#tp-checkout-shipping-method table { width: 100%; }
#tp-checkout-shipping-method td, #tp-checkout-shipping-method th { padding: .375rem 0; font-size: .9375rem; }

/* ── Seguridad: badge SSL ────────────────────────────────────── */
.tp-checkout-secure-note {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: var(--color-muted, #9ca3af);
  margin-top: .625rem;
  justify-content: center;
}

/* Compatibilidad con woocommerce legacy */
.woocommerce-checkout-review-order-table { display: none; } /* ocultar tabla default, usamos nuestros items */
.woocommerce-checkout #order_review_heading { display: none; }

/* ══════════════════════════════════════════════════════════════
   NOTICES
═══════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: .9375rem;
  font-weight: 500;
}
.woocommerce-message { background: #d1fae5; color: #065f46; }
.woocommerce-info    { background: #e0f2fe; color: #0c4a6e; }
.woocommerce-error   { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════
   CART PAGE — Layout Shopify style
═══════════════════════════════════════════════════════════════ */

/* Layout principal: 2 columnas */
.tp-cart-page {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
  padding: 2.5rem 0;
}
@media (max-width: 900px) {
  .tp-cart-page { grid-template-columns: 1fr; gap: 2rem; }
}

/* Carrito vacío */
.tp-cart-page--empty { grid-template-columns: 1fr; }
.tp-cart-page__empty {
  text-align: center;
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--color-text-muted);
}
.tp-cart-page__empty h2 { font-size: 1.5rem; color: var(--color-primary); }
.tp-cart-page__empty p  { font-size: 1rem; }

/* Columna items */
.tp-cart-page__items { min-width: 0; }

/* Stock insuficiente en carrito */
.tp-cart-stock-alert {
  display: flex;
  gap: .625rem;
  margin-bottom: .875rem;
  padding: .75rem .875rem;
  border: 1px solid #fecdd3;
  border-radius: var(--radius-md);
  background: #fff7f7;
  color: #881337;
}
.tp-cart-stock-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.tp-cart-stock-alert__content h2 {
  margin: 0 0 .35rem;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25;
}
.tp-cart-stock-alert__content p {
  margin: .4rem 0 0;
  color: #9f1239;
  font-size: .8125rem;
  line-height: 1.35;
}
.tp-cart-stock-alert__content ul {
  margin: 0;
  padding-left: 1rem;
  font-size: .8125rem;
  line-height: 1.35;
}
.tp-cart-stock-alert__content li + li { margin-top: .2rem; }

/* Fila de producto */
.tp-cart-row {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  align-items: flex-start;
}
.tp-cart-row--stock-issue {
  border: 1px solid #fecdd3;
  border-radius: var(--radius-md);
  background: #fffafa;
  padding: .75rem;
}
.tp-cart-row__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}
.tp-cart-row__divider:last-child { display: none; }

/* Imagen */
.tp-cart-row__img-wrap {
  width: 120px;
  min-width: 120px;
  height: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  flex-shrink: 0;
}
.tp-cart-row__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* WC genera el img dentro de a/figure, aseguramos el fill */
.tp-cart-row__img-wrap a,
.tp-cart-row__img-wrap figure { display: block; width: 100%; height: 100%; }

/* Info */
.tp-cart-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.tp-cart-row__top { display: flex; gap: .5rem; }
.tp-cart-row__name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.tp-cart-row__name a { color: inherit; text-decoration: none; }
.tp-cart-row__name a:hover { color: var(--color-accent); }
.tp-cart-row__meta {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}
.tp-cart-row__meta dl, .tp-cart-row__meta dd { margin: 0; display: inline; }
.tp-cart-row__meta dt { display: inline; font-weight: 500; }
.tp-cart-row__meta dt::after { content: ': '; }
.tp-cart-row__meta dd::after { content: ' · '; }
.tp-cart-row__meta dd:last-of-type::after { content: ''; }
.tp-cart-row__unit-price {
  font-size: .9rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}
.tp-cart-row__stock-warning {
  display: inline-flex;
  margin-top: .4rem;
  padding: .25rem .45rem;
  border-radius: var(--radius-sm);
  background: #ffe4e6;
  color: #9f1239;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
}
.tp-cart-row__bottom {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.tp-cart-row__subtotal {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-left: auto;
}
.tp-cart-row__remove {
  font-size: .8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .15s;
}
.tp-cart-row__remove:hover { color: var(--color-danger); }

/* Qty pill dentro del carrito página */
/* ── Qty pill en página de carrito ─────────────────────────── */
.tp-cart-form .tp-qty-control--pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: #fff;
}
.tp-cart-form .tp-qty-control--pill .tp-qty-control__btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.tp-cart-form .tp-qty-control--pill .tp-qty-control__btn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}
/* El div.quantity de WC queda transparente, se hereda del pill */
.tp-cart-form .tp-qty-control--pill .quantity { display: contents; }
.tp-cart-form .tp-qty-control--pill input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 44px;
  height: 40px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--color-border);
  border-right: 1.5px solid var(--color-border);
  outline: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  padding: 0;
}
.tp-cart-form .tp-qty-control--pill input[type="number"]::-webkit-outer-spin-button,
.tp-cart-form .tp-qty-control--pill input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Botón vaciar carrito ───────────────────────────────────── */
.tp-cart-clear-wrap {
  display: flex;
  justify-content: flex-start;
  padding: .75rem 0 0;
}
.tp-cart-clear-btn {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-muted, #999);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .2s;
}
.tp-cart-clear-btn:hover { color: var(--color-danger, #e53e3e); }

/* Sidebar resumen */
.tp-cart-page__sidebar { position: sticky; top: 6rem; }

/* ── Cross-sells en sidebar ─────────────────────────────────── */
.cross-sells {
  margin-bottom: 1.5rem;
}
.cross-sells > h2 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cross-sells ul.products li.product {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cross-sells ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-sm, 0.25rem);
  display: block;
}
.cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cross-sells ul.products li.product .price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.cross-sells ul.products li.product .button {
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  margin-top: auto;
}
/* En móvil el sidebar va abajo del todo: cross-sells en fila */
@media (max-width: 900px) {
  .cross-sells ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Cart totals */
.tp-cart-totals {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Barra de envío gratis dentro del sidebar */
.tp-cart-totals .tp-shipping-bar {
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

/* Acordeones */
.tp-cart-accordions { border-bottom: 1px solid var(--color-border); }
.tp-cart-accordion { border-top: 1px solid var(--color-border); }
.tp-cart-accordion:first-child { border-top: none; }
.tp-cart-accordion[open] > summary .tp-cart-accordion__chevron { transform: rotate(180deg); }

.tp-cart-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
.tp-cart-accordion__trigger:hover { background: var(--color-surface); }
.tp-cart-accordion__trigger::-webkit-details-marker { display: none; }
.tp-cart-accordion__chevron { transition: transform .2s ease; flex-shrink: 0; }

.tp-cart-accordion__body {
  padding: 0 1.25rem 1rem;
  font-size: .9rem;
}

/* Cupón form */
.tp-coupon-form { display: flex; gap: .5rem; }
.tp-coupon-form__input {
  flex: 1;
  padding: .5rem .75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .875rem;
  outline: none;
  transition: border-color .15s;
}
.tp-coupon-form__input:focus { border-color: var(--color-primary); }
.tp-coupon-form__btn { flex-shrink: 0; white-space: nowrap; }
.tp-cart-coupon-applied {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  margin-top: .5rem;
  padding: .4rem .6rem;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

/* Fees / impuestos */
.tp-cart-totals__fee,
.tp-cart-totals__tax {
  display: flex;
  justify-content: space-between;
  padding: .5rem 1.25rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* Total */
.tp-cart-totals__total {
  padding: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.tp-cart-totals__total-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.tp-cart-totals__total-label {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-primary);
}
.tp-cart-totals__tax-note {
  display: block;
  font-size: .75rem;
  color: var(--color-text-muted);
  margin-top: .15rem;
  line-height: 1.4;
  max-width: 160px;
}
.tp-cart-totals__total-amount {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}
/* WC envuelve el total en un span extra */
.tp-cart-totals__total-amount .woocommerce-Price-amount { font-size: inherit; }

/* Total a pagar inline (dentro del desglose de descuentos) */
.tp-cart-totals__row.tp-cart-totals__total-row {
  border-top: 2px solid var(--color-border);
  margin-top: .5rem;
  padding-top: .75rem;
  align-items: center;
}
.tp-cart-totals__row.tp-cart-totals__total-row .tp-cart-totals__total-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
}
.tp-cart-totals__row.tp-cart-totals__total-row .tp-cart-totals__total-amount {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Botón checkout */
.tp-cart-checkout-wrap { padding: 0 1.25rem 1.25rem; }
.tp-cart-checkout-wrap .checkout-button,
.tp-cart-checkout-wrap .wc-forward {
  display: block;
  width: 100%;
  padding: .875rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.tp-cart-checkout-wrap .checkout-button:hover,
.tp-cart-checkout-wrap .wc-forward:hover {
  background: var(--color-accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Animación ripple al hacer clic */
.tp-cart-checkout-wrap .checkout-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  transition: transform .5s ease, opacity .5s ease;
}
.tp-cart-checkout-wrap .checkout-button.tp-ripple::after {
  transform: scale(2.5);
  opacity: 0;
  animation: tp-btn-ripple .5s ease forwards;
}
@keyframes tp-btn-ripple {
  0%   { transform: scale(0); opacity: .35; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Shipping WC dentro del acordeón */
.tp-cart-accordion__body .shipping-calculator-form { margin-top: .5rem; }
.tp-cart-accordion__body table { width: 100%; font-size: .875rem; }
.tp-cart-accordion__body table th,
.tp-cart-accordion__body table td { padding: .3rem 0; vertical-align: top; }

@media (max-width: 600px) {
  .tp-cart-row__img-wrap { width: 80px; min-width: 80px; height: 80px; }
  .tp-cart-totals__total-amount { font-size: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT HEADER — Minimalista (solo logo + candado)
═══════════════════════════════════════════════════════════════ */
.tp-checkout-header {
  border-bottom: 1.5px solid #e5e7eb;
  background: #fff;
}
.tp-checkout-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
.tp-checkout-header__logo { display: flex; align-items: center; text-decoration: none; }
.tp-checkout-header__logo-img { max-height: 36px; width: auto; display: block; }
.tp-checkout-header__logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -.02em;
}
.tp-checkout-header__lock { color: var(--color-muted, #9ca3af); }

/* En checkout ocultar el topbar y el footer normal */
.woocommerce-checkout .tp-topbar { display: none; }
.woocommerce-checkout #page > footer { display: none; }

/* Checkout: quitar padding del main y contenedor del tema */
.woocommerce-checkout #main { padding: 0; }
.woocommerce-checkout .tp-container { max-width: 100%; padding: 0; }

/* El .woocommerce wrapper de WC: no debe agregar su propio grid */
.woocommerce-checkout .woocommerce { display: block !important; max-width: 100%; padding: 0; }

/* La columna del checkout ocupa todo el ancho disponible */
.woocommerce-checkout .tp-checkout-page { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Fixes específicos de WooCommerce
═══════════════════════════════════════════════════════════════ */

/* 1. Ocultar elementos nativos de WC que no usamos */
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-checkout-review-order { display: none !important; }

/* Notices antes del .tp-checkout-page: ocultar (los reemplazamos con el modal de errores) */
.woocommerce-checkout > .woocommerce > .woocommerce-NoticeGroup,
.woocommerce-checkout > .woocommerce > .woocommerce-notices-wrapper:first-child { display: none; }

/* También ocultar el bloque de errores que WC inyecta dentro del form-col via wc_print_notices() */
.tp-checkout-form-col .woocommerce-error,
.tp-checkout-form-col .woocommerce-NoticeGroup { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT ERROR MODAL
══════════════════════════════════════════════════════════════ */
.tp-error-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tp-error-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tp-error-modal {
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tp-error-modal-backdrop.is-open .tp-error-modal {
  transform: translateY(0) scale(1);
}
.tp-error-modal__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #fee2e2;
  background: #fff5f5;
}
.tp-error-modal__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fee2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
}
.tp-error-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.3;
}
.tp-error-modal__close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  color: #6b7280;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.tp-error-modal__close:hover { color: #111; background: #f3f4f6; }
.tp-error-modal__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.tp-error-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tp-error-modal__item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: #374151;
  line-height: 1.45;
}
.tp-error-modal__item::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  margin-top: .45em;
}
.tp-error-modal__footer {
  padding: 0 1.5rem 1.5rem;
}
.tp-error-modal__btn {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  background: #111;
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 10px);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.tp-error-modal__btn:hover { background: #374151; }

/* 2. Labels — visualmente ocultas, accesibles para screen readers */
.tp-checkout-form .form-row > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox) {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.tp-checkout-form .form-row > label abbr { display: none; }

/* 3. Select2 (País/Región): mismo estilo que los inputs */
.tp-checkout-form .select2-container { width: 100% !important; }
.tp-checkout-form .select2-container--default .select2-selection--single {
  height: 50px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0 1rem !important;
  display: flex !important; align-items: center !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.tp-checkout-form .select2-container--default.select2-container--open .select2-selection--single,
.tp-checkout-form .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}
.tp-checkout-form .select2-selection__rendered {
  line-height: 1 !important; padding: 0 !important;
  color: var(--color-text) !important; font-size: .9375rem !important;
}
.tp-checkout-form .select2-selection__placeholder { color: #9ca3af !important; }
.tp-checkout-form .select2-selection__arrow { height: 48px !important; right: .75rem !important; }
.select2-dropdown { border: 1.5px solid #d1d5db !important; border-radius: 8px !important; margin-top: 2px; }
.select2-search__field { border: 1.5px solid #d1d5db !important; border-radius: 6px !important; padding: .5rem .75rem !important; }
.select2-results__option--highlighted[aria-selected] { background-color: var(--color-primary) !important; }

/* ── Modal selector de provincia ─────────────────────────────── */
.tp-state-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: tp-backdrop-in .2s ease;
}
@keyframes tp-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (min-width: 600px) {
  .tp-state-modal-backdrop { align-items: center; }
}
.tp-state-modal {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tp-modal-up .25s cubic-bezier(.32,1.2,.6,1);
  box-shadow: 0 -4px 40px rgba(0,0,0,.15);
}
@media (min-width: 600px) {
  .tp-state-modal {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    animation: tp-modal-pop .22s cubic-bezier(.32,1.2,.6,1);
  }
}
@keyframes tp-modal-up {
  from { transform: translateY(100%); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes tp-modal-pop {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.tp-state-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem .75rem;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}
.tp-state-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.tp-state-modal__close {
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-muted, #6b7280);
  flex-shrink: 0;
  transition: background .15s;
}
.tp-state-modal__close:hover { background: #e5e7eb; }
.tp-state-modal__search-wrap {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}
.tp-state-modal__search {
  width: 100%;
  padding: .65rem 1rem .65rem 2.4rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .9375rem;
  outline: none;
  box-sizing: border-box;
  background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") .75rem center / 16px no-repeat;
  transition: border-color .2s;
}
.tp-state-modal__search:focus {
  border-color: var(--color-primary);
  background-color: #fff;
}
.tp-state-modal__list {
  overflow-y: auto;
  flex: 1;
  padding: .5rem 0;
  -webkit-overflow-scrolling: touch;
}
.tp-state-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.25rem;
  font-size: .9375rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background .1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.tp-state-modal__item:hover { background: #f9fafb; }
.tp-state-modal__item--selected {
  color: var(--color-primary);
  font-weight: 600;
}
.tp-state-modal__item--selected::after {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 50%;
  flex-shrink: 0;
}
.tp-state-modal__empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--color-muted, #9ca3af);
  font-size: .9rem;
}

/* 4. Radio buttons de métodos de pago
   WC genera: <li><input type="radio"> <label>Nombre</label> <div class="payment_box">...</div></li> */
.wc_payment_methods li { position: relative; }

/* El radio flota posicionado sobre la label */
.wc_payment_methods li > input[type="radio"] {
  position: absolute;
  left: 1rem;
  top: 1.1rem; /* alineado verticalmente con el texto de la label */
  margin: 0;
  z-index: 1;
  pointer-events: none; /* el click lo maneja la label */
}
/* Label: padding izquierdo para dejar espacio al radio */
.wc_payment_methods li > label {
  padding-left: 2.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
/* Caso en que el radio está DENTRO de la label (algunos gateways) */
.wc_payment_methods li label > input[type="radio"] {
  position: static !important;
  top: auto !important; left: auto !important;
  pointer-events: auto !important;
}
.wc_payment_methods li label > input[type="radio"] + span,
.wc_payment_methods li label > input[type="radio"] + strong { padding-left: 0 !important; }

/* payment_box: separador sutil, padding izquierdo para alinear con el texto */
.wc_payment_methods .payment_box {
  padding: .75rem 1rem .875rem 2.75rem !important;
  border-top: 1px solid #f3f4f6;
}

/* 5. Checkbox "Enviar a dirección diferente" — forzar visible */
#ship-to-different-address > label,
#ship-to-different-address label.checkbox {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important; overflow: visible !important;
  white-space: normal !important; margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
}
#ship-to-different-address input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
}

/* 6. Campos 2 columnas: nombre + apellido / ciudad + estado + CP */
.woocommerce-billing-fields,
.woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
  flex: 1 1 100%;
  margin-bottom: 0 !important;
}
.woocommerce-billing-fields .form-row-first,
.woocommerce-billing-fields .form-row-last,
.woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row-last {
  flex: 1 1 calc(50% - .375rem);
  min-width: 0;
}
/* Input/select fill width of their flex cell — forzar mismo estilo que sección Contacto */
.woocommerce-billing-fields .form-row .input-text,
.woocommerce-billing-fields .form-row select,
.woocommerce-shipping-fields__field-wrapper .form-row .input-text,
.woocommerce-shipping-fields__field-wrapper .form-row select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: .875rem 1rem !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: .9375rem !important;
  background: #fff !important;
  color: var(--color-text) !important;
  transition: border-color .2s, box-shadow .2s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.woocommerce-billing-fields .form-row .input-text:focus,
.woocommerce-billing-fields .form-row select:focus,
.woocommerce-shipping-fields__field-wrapper .form-row .input-text:focus,
.woocommerce-shipping-fields__field-wrapper .form-row select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}
.woocommerce-billing-fields .form-row .input-text::placeholder,
.woocommerce-shipping-fields__field-wrapper .form-row .input-text::placeholder {
  color: #9ca3af !important;
}

/* 7. Placeholder consistente en todos los inputs */
.tp-checkout-form input::placeholder,
.woocommerce-checkout input::placeholder { color: #9ca3af; }

/* 8. Resumen: nombre del item — 2 líneas max, no cortado con … */
@media (min-width: 1025px) {
  .tp-checkout-item__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 9. Totales del resumen: separador entre filas */
.tp-checkout-totals__row { padding: .375rem 0; border-bottom: 1px solid #f3f4f6; }
.tp-checkout-totals__row:last-child { border-bottom: none; }

/* 10. "Tus datos personales se utilizarán..." — ocultar, ya tenemos el badge */
.tp-place-order .woocommerce-privacy-policy-text { display: none; }
.woocommerce-checkout .woocommerce-privacy-policy-text { display: none; }

/* 10b. Contenedor de campos ocultos en col izquierda — visualmente invisible
        pero mantiene nonces y campos hidden necesarios para WC/MP */
.tp-place-order--hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  pointer-events: none;
}

/* 10d. Ocultar cualquier botón que MP u otro plugin inyecte dentro de #order_review.
        El botón real vive en .tp-checkout-summary-submit (col derecha). */
#order_review #place_order,
#order_review .place-order button,
#order_review .place-order .button { display: none !important; }

/* 10c. Botón de pago en la columna derecha (resumen) */
.tp-checkout-summary-submit {
  padding: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid #e5e7eb;
}
.tp-checkout-summary-submit .tp-truck-btn,
.tp-checkout-summary-submit .button.alt {
  width: 100%;
  display: block;
  text-align: center;
}
.tp-checkout-summary-submit .tp-checkout-secure-badge {
  justify-content: center;
  margin-top: .75rem;
}

/* 11. (errores de checkout: se muestran via modal, ver .tp-error-modal-backdrop) */

/* 12. Select2 z-index */
.select2-container { z-index: 9999 !important; }

/* 13. Error de validación: borde rojo en select2 y inputs */
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select { border-color: #ef4444 !important; }
.woocommerce-checkout .woocommerce-invalid .select2-selection--single { border-color: #ef4444 !important; }

/* 14. Quitar margin-top del form-row dentro de las secciones tp */
.tp-checkout-section .form-row { margin-top: 0; }

/* 15. Método de envío: sin tabla, estilo limpio */
#tp-checkout-shipping-method table { width: 100%; }
#tp-checkout-shipping-method table tbody { display: flex; flex-direction: column; gap: .5rem; }
#tp-checkout-shipping-method table tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: .875rem 1rem;
  cursor: pointer;
  transition: border-color .2s;
}
#tp-checkout-shipping-method table tr:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}
#tp-checkout-shipping-method td { padding: 0; }
#tp-checkout-shipping-method th,
#tp-checkout-shipping-method .woocommerce-shipping-contents { display: none; }
#tp-checkout-shipping-method td[data-title]::before { display: none; }
#tp-checkout-shipping-method td:first-child { flex: 1; }
#tp-checkout-shipping-method td.amount { font-weight: 600; color: var(--color-heading); white-space: nowrap; }
#tp-checkout-shipping-method td:has(.tp-shipping-description-box) { width: 100%; }
#tp-checkout-shipping-method td .tp-shipping-description-box { margin-top: 0; }
#tp-checkout-shipping-method input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid #d1d5db; border-radius: 50%;
  flex-shrink: 0; cursor: pointer;
  transition: border-color .2s; background: #fff;
  margin-right: .75rem;
}
#tp-checkout-shipping-method input[type="radio"]:checked {
  border-color: var(--color-primary); border-width: 5px;
}
#tp-checkout-shipping-method label { cursor: pointer; display: flex; align-items: center; gap: .5rem; flex: 1; }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Barra de envío gratis en resumen
═══════════════════════════════════════════════════════════════ */
.tp-checkout-shipping-bar {
  padding: .875rem 0 1rem;
  border-bottom: 1.5px solid #e5e7eb;
  margin-bottom: 1.25rem;
}
.tp-checkout-shipping-bar__msg {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--color-text, #374151);
  margin-bottom: .5rem;
  line-height: 1.4;
}
.tp-checkout-shipping-bar__msg svg { flex-shrink: 0; color: var(--color-muted, #6b7280); }
.tp-checkout-shipping-bar__msg strong { font-weight: 600; color: var(--color-heading); }

/* Barra de progreso */
.tp-checkout-shipping-bar__track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.tp-checkout-shipping-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 99px;
  transition: width .6s ease;
}

/* Estado "logrado": verde */
.tp-checkout-shipping-bar--achieved .tp-checkout-shipping-bar__msg { color: var(--color-success, #16a34a); }
.tp-checkout-shipping-bar--achieved .tp-checkout-shipping-bar__msg svg { color: var(--color-success, #16a34a); }
.tp-checkout-shipping-bar--achieved .tp-checkout-shipping-bar__fill {
  width: 100% !important;
  background: var(--color-success, #16a34a);
}

/* ══════════════════════════════════════════════════════════════════════
   THANK YOU PAGE  —  .tp-thankyou__*
   Página de confirmación de compra. Diseño moderno tipo Shopify.
   Sin dependencias nuevas — animaciones 100% CSS keyframes.
══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes tp-ring-draw {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: 0;   }
}
@keyframes tp-tick-draw {
  from { stroke-dashoffset: 71; }
  to   { stroke-dashoffset: 0;  }
}
@keyframes tp-hero-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes tp-card-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes tp-step-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.2);             }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Wrapper ──────────────────────────────────────────────────────── */
.tp-thankyou {
  min-height: 60vh;
  background: var(--color-surface, #f8fafc);
}

/* ══ HERO BANNER ══════════════════════════════════════════════════════ */
.tp-thankyou__hero {
  background: var(--color-success, #10b981);
  padding: 3.5rem clamp(1.25rem, 5vw, 4rem) 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Subtle noise / texture overlay */
.tp-thankyou__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(255,255,255,.12) 0%, transparent 65%);
  pointer-events: none;
}

/* SVG checkmark */
.tp-thankyou__check-wrap {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.18));
  position: relative;
  z-index: 1;
}
.tp-thankyou__check-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Static outer ring */
.tp-thankyou__ring {
  /* decorative, no animation */
}

/* Drawing circle */
.tp-thankyou__ring-fill {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transform-origin: 50px 50px;
  transform: rotate(-90deg);
  animation: tp-ring-draw .65s cubic-bezier(.4,0,.2,1) .15s forwards;
}

/* Drawing checkmark */
.tp-thankyou__tick {
  stroke-dasharray: 71;
  stroke-dashoffset: 71;
  animation: tp-tick-draw .4s cubic-bezier(.4,0,.2,1) .72s forwards;
}

/* Hero text */
.tp-thankyou__hero-text {
  position: relative;
  z-index: 1;
  animation: tp-hero-up .5s ease .2s both;
}
.tp-thankyou__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 .5rem;
}
.tp-thankyou__subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.88);
  margin: 0 0 1.1rem;
  max-width: 38ch;
  line-height: 1.5;
}
.tp-thankyou__order-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: .35rem .9rem;
  border-radius: var(--radius-full, 9999px);
  backdrop-filter: blur(4px);
  margin: 0;
}
.tp-thankyou__order-pill strong { font-weight: 700; }

.tp-thankyou__order-pills {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ══ PROGRESS TIMELINE ════════════════════════════════════════════════ */
.tp-thankyou__timeline-wrap {
  background: #fff;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}
.tp-thankyou__timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
  margin-inline: auto;
}
/* Connecting line */
.tp-thankyou__timeline::before {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background: var(--color-border, #e2e8f0);
  z-index: 0;
}
.tp-thankyou__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  flex: 1;
  position: relative;
  z-index: 1;
}
.tp-thankyou__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--color-border, #e2e8f0);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-thankyou__step--done .tp-thankyou__step-dot {
  background: var(--color-success, #10b981);
  border-color: var(--color-success, #10b981);
}
.tp-thankyou__step--done .tp-thankyou__step-dot::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.tp-thankyou__step-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  text-align: center;
  line-height: 1.3;
  max-width: 78px;
}
.tp-thankyou__step--done .tp-thankyou__step-label {
  color: var(--color-success, #10b981);
  font-weight: 700;
}
.tp-thankyou__step--active .tp-thankyou__step-dot {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .2);
}
.tp-thankyou__step--active .tp-thankyou__step-label {
  color: var(--color-primary, #3b82f6);
  font-weight: 700;
}

/* Timeline dots staggered pop */
.tp-thankyou__step:nth-child(1) .tp-thankyou__step-dot { animation: tp-step-pop .4s ease 1.0s both; }
.tp-thankyou__step:nth-child(2) .tp-thankyou__step-dot { animation: tp-step-pop .4s ease 1.1s both; }
.tp-thankyou__step:nth-child(3) .tp-thankyou__step-dot { animation: tp-step-pop .4s ease 1.2s both; }
.tp-thankyou__step:nth-child(4) .tp-thankyou__step-dot { animation: tp-step-pop .4s ease 1.3s both; }

/* ══ BODY / GRID ══════════════════════════════════════════════════════ */
.tp-thankyou__body {
  padding-block: 2.5rem 4rem;
}
.tp-thankyou__body .container {
  max-width: var(--container-width, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.tp-thankyou__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.75rem;
  align-items: start;
}

/* ══ CARDS ════════════════════════════════════════════════════════════ */
.tp-thankyou__card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: 1.75rem;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));
  margin-bottom: 1.25rem;
}
.tp-thankyou__card:last-of-type { margin-bottom: 0; }
.tp-thankyou__card-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-primary, #0f172a);
  margin: 0 0 1.25rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  letter-spacing: -.01em;
}

/* Card entrance animations */
.tp-thankyou__meta-card    { animation: tp-card-up .5s ease .75s both; }
.tp-thankyou__items-card   { animation: tp-card-up .5s ease  .9s both; }
.tp-thankyou__address-card { animation: tp-card-up .5s ease 1.0s both; }
.tp-thankyou__actions      { animation: tp-card-up .4s ease 1.1s both; }

/* ── Meta list ──────────────────────────────────────────────────────── */
.tp-thankyou__meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-thankyou__meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: .9375rem;
  gap: 1rem;
}
.tp-thankyou__meta-item:first-child { padding-top: 0; }
.tp-thankyou__meta-item:last-child  { border-bottom: none; padding-bottom: 0; }
.tp-thankyou__meta-label {
  color: var(--color-text-muted, #64748b);
  font-weight: 400;
  flex-shrink: 0;
}
.tp-thankyou__meta-value {
  font-weight: 600;
  color: var(--color-primary, #0f172a);
  text-align: right;
}
.tp-thankyou__meta-value--total {
  font-size: 1.125rem;
  color: var(--color-accent, #6366f1);
}

/* ── Items card: WC order-details table overrides ───────────────────── */
.tp-thankyou__items-card .woocommerce-order-details__title,
.tp-thankyou__items-card h2 {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-primary, #0f172a);
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.tp-thankyou__items-card .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.tp-thankyou__items-card .woocommerce-table--order-details thead th {
  padding: 0 0 .75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
}
.tp-thankyou__items-card .woocommerce-table--order-details thead th:last-child { text-align: right; }
.tp-thankyou__items-card .woocommerce-table--order-details td {
  padding: .875rem 0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}
.tp-thankyou__items-card .woocommerce-table--order-details td:last-child { text-align: right; font-weight: 600; }
.tp-thankyou__items-card .woocommerce-table--order-details tbody tr:last-child td { border-bottom: none; }
.tp-thankyou__items-card .woocommerce-table--order-details tfoot th,
.tp-thankyou__items-card .woocommerce-table--order-details tfoot td {
  padding: .5rem 0;
  font-size: .9375rem;
  color: var(--color-text-muted, #64748b);
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.tp-thankyou__items-card .woocommerce-table--order-details tfoot tr:last-child th,
.tp-thankyou__items-card .woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #0f172a);
  border-top: 2px solid var(--color-border, #e2e8f0);
  padding-top: .75rem;
}
.tp-thankyou__items-card .woocommerce-table--order-details tfoot td { text-align: right; }

/* -- BACS card: datos bancarios + botones "Copiar" -- */
.tp-bacs-card { animation: tp-card-up .5s ease .85s both; }
.tp-bacs-instructions {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text, #1e293b);
}
.tp-bacs-instructions p:first-child { margin-top: 0; }
.tp-bacs-instructions p:last-child { margin-bottom: 0; }
.tp-bacs-fields {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.tp-bacs-fields:last-of-type { margin-bottom: 0; }
.tp-bacs-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: .9375rem;
}
.tp-bacs-field:last-child { border-bottom: none; padding-bottom: 0; }
.tp-bacs-field:first-child { padding-top: 0; }
.tp-bacs-field__label {
  color: var(--color-text-muted, #64748b);
  flex-shrink: 0;
}
.tp-bacs-field__value {
  font-weight: 700;
  color: var(--color-primary, #0f172a);
  text-align: right;
  overflow-wrap: anywhere;
}
.tp-bacs-copy-btn {
  flex-shrink: 0;
  padding: .4rem .8rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary, #0f172a);
  background: var(--color-bg-muted, #f1f5f9);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background var(--transition, .2s), color var(--transition, .2s);
}
.tp-bacs-copy-btn:hover { background: var(--color-accent, #6366f1); color: #fff; border-color: transparent; }
.tp-bacs-copy-btn.is-copied { background: #16a34a; color: #fff; border-color: transparent; }
.tp-bacs-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-muted, #f1f5f9);
  border-radius: var(--radius-md, 10px);
}
.tp-bacs-amount__label {
  font-size: .875rem;
  color: var(--color-text-muted, #64748b);
  flex-basis: 100%;
}
.tp-bacs-amount__value {
  font-size: 1.25rem;
  color: var(--color-accent, #6366f1);
}
.tp-bacs-copy-btn--amount { padding: .55rem 1.1rem; }

/* -- Recommended products card: "Te puede interesar" -- */
.tp-thankyou__body--recommended { padding-block: 0 3rem; }
.tp-thankyou__recommended-card { animation: tp-card-up .5s ease 1.15s both; }
.tp-thankyou__recommended-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .tp-thankyou__recommended-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tp-thankyou__recommended-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

/* ── Address card ───────────────────────────────────────────────────── */
.tp-thankyou__address-block + .tp-thankyou__address-block {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.tp-thankyou__address-type {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted, #64748b);
  margin: 0 0 .4rem;
}
.tp-thankyou__address {
  font-style: normal;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--color-text, #1e293b);
}
.tp-thankyou__address p { margin: 0; }
.tp-thankyou__address-phone {
  margin-top: .2rem;
  color: var(--color-text-muted, #64748b);
  font-size: .875rem;
}
.tp-thankyou__address-altura {
  margin-top: .2rem;
  font-size: .875rem;
}

/* ── Ocultar bloques de direcciones que inyecta WC core via woocommerce_thankyou ── */
.tp-thankyou__items-card .woocommerce-customer-details,
.tp-thankyou__items-card .col2-set.addresses { display: none !important; }

/* ── Billing card ────────────────────────────────────────────────────── */
.tp-thankyou__body--billing {
  padding-block: 0 3rem;
}
.tp-thankyou__billing-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  animation: tp-card-up .5s ease 1.2s both;
}
.tp-thankyou__billing-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary, #0f172a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-thankyou__billing-info { display: flex; flex-direction: column; gap: .2rem; }
.tp-thankyou__billing-label {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted, #64748b);
}
.tp-thankyou__billing-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
}
.tp-thankyou__billing-fiscal {
  margin: 0;
  font-size: .875rem;
  color: var(--color-text-muted, #64748b);
}

/* ── CTA button ─────────────────────────────────────────────────────── */
.tp-thankyou__actions { margin-top: 1rem; }
.tp-thankyou__continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .9rem 1.5rem;
  background: var(--color-primary, #0f172a);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  transition: background var(--transition, .2s), transform var(--transition, .2s);
  border: none;
  cursor: pointer;
}
.tp-thankyou__continue-btn:hover {
  background: var(--color-accent, #6366f1);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Failed order fallback ──────────────────────────────────────────── */
.tp-thankyou__failed {
  max-width: var(--container-width, 1280px);
  margin: 2rem auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tp-thankyou__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tp-thankyou__hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.25rem 4.5rem;
    gap: 1.25rem;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
  .tp-thankyou__check-wrap { width: 88px; height: 88px; }
  .tp-thankyou__subtitle   { max-width: none; }
  .tp-thankyou__step-label { max-width: 58px; font-size: .65rem; }
  .tp-thankyou__card       { padding: 1.25rem; }
  .tp-thankyou__body       { padding-block: 1.5rem 2.5rem; }
  .tp-thankyou__timeline-wrap { margin-top: -1.25rem; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tp-thankyou__ring-fill,
  .tp-thankyou__tick,
  .tp-thankyou__hero-text,
  .tp-thankyou__meta-card,
  .tp-thankyou__items-card,
  .tp-thankyou__address-card,
  .tp-thankyou__actions,
  .tp-thankyou__step .tp-thankyou__step-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .tp-thankyou__ring-fill { stroke-dashoffset: 0; }
  .tp-thankyou__tick      { stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   VARIACIONES — Precio, Stock y tooltip de sin-stock
══════════════════════════════════════════════════════════════════════ */

/* ── Precio de variación ──────────────────────────────────────────── */
.woocommerce-variation-price {
  margin-bottom: .5rem;
}
.woocommerce-variation-price .price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.woocommerce-variation-price .price del {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.woocommerce-variation-price .price ins {
  text-decoration: none;
  color: var(--color-sale-price, var(--color-danger, #ef4444));
}
/* Badge de descuento automático si hay precio tachado */
.woocommerce-variation-price .price del + ins::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sale-price, var(--color-danger, #ef4444));
  margin-right: .375rem;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* ── Stock de variación ───────────────────────────────────────────── */
.woocommerce-variation-availability {
  margin-bottom: .25rem;
}
.woocommerce-variation-availability .stock {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  padding: .35rem .8rem .35rem .55rem;
  border-radius: var(--radius-full, 9999px);
  line-height: 1;
}
/* Estado: en stock */
.woocommerce-variation-availability .stock.in-stock {
  background: color-mix(in srgb, var(--color-success, #10b981) 12%, transparent);
  color: color-mix(in srgb, var(--color-success, #10b981) 85%, #000);
}
.woocommerce-variation-availability .stock.in-stock::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success, #10b981);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #10b981) 25%, transparent);
  flex-shrink: 0;
}
/* Estado: sin stock */
.woocommerce-variation-availability .stock.out-of-stock {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, transparent);
  color: var(--color-danger, #ef4444);
}
.woocommerce-variation-availability .stock.out-of-stock::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger, #ef4444);
  flex-shrink: 0;
}
/* Stock bajo (available_on_backorder / poco stock) */
.woocommerce-variation-availability .stock.available-on-backorder {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #b45309;
}
.woocommerce-variation-availability .stock.available-on-backorder::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

/* ── Tooltip en chips sin stock ───────────────────────────────────── */
.tp-swatch-chip.is-disabled {
  position: relative; /* para el tooltip */
}
.tp-swatch-chip.is-disabled::before {
  content: attr(data-unavailable-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .25rem .6rem;
  border-radius: var(--radius-sm, 6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 10;
}
.tp-swatch-chip.is-disabled:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Precio + stock juntos: layout de bloque unificado ────────────── */
.woocommerce-variation {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem;
  background: var(--color-surface, #f8fafc);
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border, #e2e8f0);
  margin-bottom: 1rem;
  min-height: 0;
  transition: background .2s;
}
/* Ocultar cuando no hay variación seleccionada */
.woocommerce-variation:empty,
.woocommerce-variation:not(:has(.price, .stock)) {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   INTEGRACIÓN: Wayra Shipping Calculator
   Sobrescribe los estilos del plugin para que sigan el sistema
   de diseño del tema (variables CSS, tipografía, colores).
═══════════════════════════════════════════════════════════════ */

/* Wrapper del tema que contiene el plugin */
.tps-wayra-shipping {
  margin-block: 1rem;
}

/* Botón principal "Calcular Envío" */
.tps-wayra-shipping .wayra-product-shipping {
  gap: .625rem;
  height: auto;
  padding: .75rem 1rem;
  background: var(--color-surface, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.tps-wayra-shipping .wayra-product-shipping:hover {
  border-color: var(--color-accent, #6366f1);
  background: #fff;
}

/* Ícono camión */
.tps-wayra-shipping .wayra-product-shipping svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--color-accent, #6366f1);
  fill: var(--color-accent, #6366f1);
}

/* Textos del botón */
.tps-wayra-shipping .wayra-product-shipping-title {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.tps-wayra-shipping .wayra-product-shipping-subtitle {
  font-size: .8125rem;
  color: var(--color-text-muted);
  line-height: 1.3;
  margin-top: .125rem;
}

/* Texto "Envío gratis" en productos que califican */
.tps-wayra-shipping .wayra-product-shipping.free svg {
  color: var(--color-success, #16a34a);
  fill: var(--color-success, #16a34a);
}
.tps-wayra-shipping .wayra-product-shipping.free .wayra-product-shipping-free {
  color: var(--color-success, #16a34a);
  font-size: .875rem;
  font-weight: 600;
}

/* Formulario de dirección */
.tps-wayra-shipping .wayra-shipping-calculator-form {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  padding: 1rem;
  margin-top: .5rem;
  background: var(--color-surface, #f8fafc);
}
.tps-wayra-shipping .wayra-shipping-calculator-form select,
.tps-wayra-shipping .wayra-shipping-calculator-form input[type="text"] {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.tps-wayra-shipping .wayra-shipping-calculator-form select:focus,
.tps-wayra-shipping .wayra-shipping-calculator-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 12%, transparent);
}

/* Botón "Calcular" dentro del formulario */
.tps-wayra-shipping #wsc_calculate_shipping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.25rem;
  background: var(--color-accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.tps-wayra-shipping #wsc_calculate_shipping:hover {
  background: var(--color-accent-hover, #4f46e5);
}

/* Área de resultados */
.tps-wayra-shipping #wayra-wsc-alert-container .wayra-wsc-alert {
  background: var(--color-surface, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
}
.tps-wayra-shipping #wayra-wsc-alert-container .wayra-wsc-alert::before {
  font-family: var(--font-heading);
  font-size: .9375rem;
  color: var(--color-text);
}
.tps-wayra-shipping #wayra-wsc-alert-container .wayra-wsc-alert::after {
  border-color: var(--color-text-muted, #94a3b8);
}

/* Lista de métodos de envío */
.tps-wayra-shipping #wayra-wsc-alert-container ul.wayra-wsc-methods li {
  border-bottom-color: var(--color-border, #e2e8f0);
  font-size: .9rem;
  color: var(--color-text);
}
.tps-wayra-shipping #wayra-wsc-alert-container .woocommerce-Price-amount {
  color: var(--color-success, #16a34a);
  font-weight: 700;
}

/* Indicador de geolocalización */
.tps-wayra-shipping .wayra-geo-detected {
  background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
  border-left-color: var(--color-accent, #6366f1);
  font-size: .875rem;
  color: var(--color-text);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}
.tps-wayra-shipping .wayra-geo-change-link {
  color: var(--color-accent, #6366f1);
}
.tps-wayra-shipping .wayra-geo-change-link:hover {
  color: var(--color-accent-hover, #4f46e5);
}

/* Alerta de validación (producto variable sin variación seleccionada) */
.tps-wayra-shipping .wsc-alert-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm, 6px);
  font-size: .875rem;
  color: var(--color-text);
}

/* Mini-barra de envío gratis dentro del resultado del plugin */
.tp-wayra-free-shipping-ctx {
  margin-top: .75rem;
  padding: .75rem 1rem;
  background: var(--color-surface, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
}
.tp-wayra-free-msg {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.tp-wayra-free-msg--ok {
  color: var(--color-success, #16a34a);
  font-weight: 600;
  margin-bottom: 0;
}
.tp-wayra-free-msg strong { color: var(--color-text); }
.tp-wayra-free-bar {
  height: 5px;
  background: var(--color-border, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
}
.tp-wayra-free-bar__fill {
  height: 100%;
  background: var(--color-accent, #6366f1);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ══════════════════════════════════════════════════════════════
   PRICING SUITE — Bloques de precios en producto single
   Clases: .tp-ps-block (contenedor), .tp-ps-row, .tp-ps-badge,
   .tp-ps-label, .tp-ps-price, .tp-ps-note, .tp-ps-inst-*
   Estilos: pills (default) | minimal | bold | inline
═══════════════════════════════════════════════════════════════ */

/* ── BASE (compartido por todos los estilos) ─────────────── */
.tp-ps-block {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-block: .75rem;
}
.tp-ps-badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem .45rem;
  background: var(--color-ps-transfer, var(--color-success, #10b981));
  color: #fff;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.tp-ps-badge--cash {
  background: var(--color-ps-cash, #f59e0b);
}
.tp-ps-label {
  color: var(--color-text-muted, #64748b);
  font-size: .8125rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.tp-ps-price {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-ps-transfer, var(--color-success, #10b981));
  white-space: nowrap;
}
.tp-ps-row--installments .tp-ps-price {
  color: var(--color-ps-installments, var(--color-accent, #6366f1));
}
.tp-ps-row--cash .tp-ps-price {
  color: var(--color-ps-cash, #f59e0b);
}
.tp-ps-note {
  font-size: .75rem;
  color: var(--color-text-muted, #64748b);
  width: 100%;
  font-style: italic;
}
.tp-ps-inst-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  width: 100%;
}
.tp-ps-inst-main {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-ps-installments, var(--color-accent, #6366f1));
}
.tp-ps-inst-note {
  font-size: .75rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}
.tp-ps-row--installments .tp-ps-inst-line + .tp-ps-inst-line {
  border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 60%, transparent);
  padding-top: .375rem;
  margin-top: .25rem;
}

/* ══════════════════════════════════════════════════════════
   ESTILO 1: pills (default) — fondo suave + borde de color
══════════════════════════════════════════════════════════ */
.tp-ps-style--pills .tp-ps-row,
.tp-ps-block:not([class*="tp-ps-style"]) .tp-ps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem .5rem;
  padding: .625rem .875rem;
  border-radius: var(--radius-sm, 6px);
  font-size: .875rem;
  line-height: 1.4;
}
.tp-ps-style--pills .tp-ps-row--transfer,
.tp-ps-block:not([class*="tp-ps-style"]) .tp-ps-row--transfer {
  background: color-mix(in srgb, var(--color-ps-transfer, #10b981) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ps-transfer, #10b981) 20%, transparent);
}
.tp-ps-style--pills .tp-ps-row--installments,
.tp-ps-block:not([class*="tp-ps-style"]) .tp-ps-row--installments {
  background: color-mix(in srgb, var(--color-ps-installments, #6366f1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ps-installments, #6366f1) 18%, transparent);
}
.tp-ps-style--pills .tp-ps-row--cash,
.tp-ps-block:not([class*="tp-ps-style"]) .tp-ps-row--cash {
  background: color-mix(in srgb, var(--color-ps-cash, #f59e0b) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ps-cash, #f59e0b) 20%, transparent);
}

/* ══════════════════════════════════════════════════════════
   ESTILO 2: minimal — sin fondos, solo borde izquierdo de color
══════════════════════════════════════════════════════════ */
.tp-ps-style--minimal .tp-ps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .625rem;
  padding: .5rem 0 .5rem .875rem;
  background: none;
  border: none;
  font-size: .875rem;
  line-height: 1.4;
}
.tp-ps-style--minimal .tp-ps-row--transfer {
  border-left: 3px solid var(--color-ps-transfer, #10b981);
}
.tp-ps-style--minimal .tp-ps-row--installments {
  border-left: 3px solid var(--color-ps-installments, #6366f1);
}
.tp-ps-style--minimal .tp-ps-row--cash {
  border-left: 3px solid var(--color-ps-cash, #f59e0b);
}
.tp-ps-style--minimal .tp-ps-badge {
  border-radius: 3px;
}
.tp-ps-style--minimal .tp-ps-note,
.tp-ps-style--minimal .tp-ps-inst-note {
  font-style: normal;
  opacity: .65;
}

/* ══════════════════════════════════════════════════════════
   ESTILO 3: bold — fondo sólido de color, texto blanco
══════════════════════════════════════════════════════════ */
.tp-ps-style--bold .tp-ps-block,
.tp-ps-style--bold.tp-ps-block {
  gap: .375rem;
}
.tp-ps-style--bold .tp-ps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem .625rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm, 6px);
  font-size: .875rem;
  line-height: 1.4;
  border: none;
}
.tp-ps-style--bold .tp-ps-row--transfer {
  background: var(--color-ps-transfer, #10b981);
}
.tp-ps-style--bold .tp-ps-row--installments {
  background: var(--color-ps-installments, #6366f1);
}
.tp-ps-style--bold .tp-ps-row--cash {
  background: var(--color-ps-cash, #f59e0b);
}
.tp-ps-style--bold .tp-ps-label,
.tp-ps-style--bold .tp-ps-price,
.tp-ps-style--bold .tp-ps-note,
.tp-ps-style--bold .tp-ps-inst-main,
.tp-ps-style--bold .tp-ps-inst-note {
  color: #fff;
}
.tp-ps-style--bold .tp-ps-badge {
  background: rgba(0,0,0,.2);
  color: #fff;
}
.tp-ps-style--bold .tp-ps-label { opacity: .85; }
.tp-ps-style--bold .tp-ps-note,
.tp-ps-style--bold .tp-ps-inst-note { opacity: .75; font-style: normal; }

/* ══════════════════════════════════════════════════════════
   ESTILO 4: inline — todo en una sola línea, sin cajas
══════════════════════════════════════════════════════════ */
.tp-ps-style--inline .tp-ps-block,
.tp-ps-style--inline.tp-ps-block {
  gap: .25rem;
  margin-block: .5rem;
}
.tp-ps-style--inline .tp-ps-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  padding: 0;
  background: none;
  border: none;
  font-size: .875rem;
  line-height: 1.6;
}
.tp-ps-style--inline .tp-ps-badge {
  font-size: .7rem;
  padding: .1rem .4rem;
  vertical-align: middle;
}
.tp-ps-style--inline .tp-ps-label {
  flex: none;
}
.tp-ps-style--inline .tp-ps-price {
  font-size: 1rem;
  margin-left: auto;
}
.tp-ps-style--inline .tp-ps-note {
  font-size: .75rem;
  font-style: normal;
  width: 100%;
  opacity: .6;
  padding-left: calc(.7rem + .4rem + .5rem + .5rem); /* badge width approx */
}
.tp-ps-style--inline .tp-ps-inst-main {
  font-size: 1rem;
}
.tp-ps-style--inline .tp-ps-inst-note {
  font-style: normal;
  opacity: .6;
  margin-left: .25rem;
}
/* separador visual entre filas en inline */
.tp-ps-style--inline .tp-ps-row + .tp-ps-row {
  border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 50%, transparent);
  padding-top: .25rem;
}

/* Variante tarjeta de producto: más compacta */
.tp-ps-block--card {
  margin-block: .375rem 0;
  gap: .25rem;
}
.tp-ps-block--card .tp-ps-row--transfer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "badge label price"
    "note  note  note";
  align-items: center;
  column-gap: .375rem;
  row-gap: .1rem;
  padding: .375rem .625rem;
  font-size: .8rem;
}
.tp-ps-block--card .tp-ps-badge   { grid-area: badge; font-size: .6875rem; padding: .1rem .35rem; align-self: center; }
.tp-ps-block--card .tp-ps-label   { grid-area: label; font-size: .75rem; flex: unset; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.tp-ps-block--card .tp-ps-price   { grid-area: price; font-size: .9rem; font-weight: 700; white-space: nowrap; text-align: right; align-self: center; }
.tp-ps-block--card .tp-ps-note    { grid-area: note;  font-size: .6875rem; width: auto; font-style: italic; }
.tp-ps-block--card .tp-ps-row--cash {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "badge label price"
    "note  note  note";
  align-items: center;
  column-gap: .375rem;
  row-gap: .1rem;
  padding: .375rem .625rem;
  font-size: .8rem;
}
/* fila cuotas: inst-line ocupa todo */
.tp-ps-block--card .tp-ps-row--installments {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tp-ps-block--card .tp-ps-inst-line {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  width: 100%;
}
.tp-ps-block--card .tp-ps-inst-main {
  font-size: .9rem;
  font-weight: 700;
}
.tp-ps-block--card .tp-ps-inst-note {
  font-size: .6875rem;
  font-style: italic;
  margin-left: auto;
}

/* Mobile: tarjeta más minimalista */
@media (max-width: 640px) {
  .tp-ps-block--card .tp-ps-row {
    padding: .3rem .5rem;
    column-gap: .25rem;
  }
  .tp-ps-block--card .tp-ps-label {
    display: none;
  }
  .tp-ps-block--card .tp-ps-price,
  .tp-ps-block--card .tp-ps-inst-main {
    font-size: .8125rem;
  }
  .tp-ps-block--card .tp-ps-badge {
    font-size: .625rem;
  }
  .tp-ps-block--card .tp-ps-note,
  .tp-ps-block--card .tp-ps-inst-note {
    font-size: .625rem;
  }
}

/* Variante compacta dentro del carrusel de la homepage */
.tp-product-carousel .tp-ps-block--card {
  margin-block: .25rem 0;
  gap: .25rem;
}
.tp-product-carousel .tp-ps-block--card .tp-ps-row {
  padding: .3rem .5rem;
  gap: .2rem .375rem;
  font-size: .75rem;
  flex-wrap: wrap;
}
.tp-product-carousel .tp-ps-block--card .tp-ps-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  font-size: .72rem;
}
.tp-product-carousel .tp-ps-block--card .tp-ps-price,
.tp-product-carousel .tp-ps-block--card .tp-ps-inst-main {
  font-size: .8rem;
  white-space: nowrap;
}
.tp-product-carousel .tp-ps-block--card .tp-ps-note,
.tp-product-carousel .tp-ps-block--card .tp-ps-inst-note {
  font-size: .68rem;
  width: 100%;
}

/* Tax note (Precio sin impuestos) en tarjeta de producto */
.tpw-tax-note {
  margin-top: .25rem;
}
.tpw-tax-note-text {
  font-size: .75rem;
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .tpw-tax-note-text {
    font-size: .6875rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRICING SUITE — Resumen en el mini-carrito (offcanvas)
   Clases: .tp-cart-pricing-summary, .tp-cart-ps-row,
   .tp-cart-ps-badge, .tp-cart-ps-label, .tp-cart-ps-price,
   .tp-cart-ps-note
═══════════════════════════════════════════════════════════════ */

.tp-cart-pricing-summary {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px dashed var(--color-border, #e2e8f0);
}

.tp-cart-ps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm, 6px);
  font-size: .8125rem;
  line-height: 1.4;
}

.tp-cart-ps-row--transfer {
  background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 22%, transparent);
}

.tp-cart-ps-row--installments {
  background: color-mix(in srgb, var(--color-accent, #6366f1) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
}

.tp-cart-ps-badge {
  display: inline-flex;
  padding: .1rem .4rem;
  background: var(--color-success, #16a34a);
  color: #fff;
  border-radius: 99px;
  font-size: .6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tp-cart-ps-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  color: var(--color-text-muted, #64748b);
  font-size: .8rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

/* En la fila de cuotas el label también lleva el precio */
.tp-cart-ps-row--installments .tp-cart-ps-label {
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-accent, #6366f1);
}

.tp-cart-ps-price {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--color-success, #16a34a);
  white-space: nowrap;
}

.tp-cart-ps-note {
  font-size: .72rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
  font-weight: 400;
  width: 100%;
}

/* ── Desglose de descuentos (carrito + checkout) ───────────────────────── */
.tp-discount-breakdown {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--color-border, #e2e8f0);
}

.tp-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem .625rem;
  border-radius: var(--radius-sm, 6px);
  font-size: .8125rem;
  line-height: 1.4;
}

.tp-discount-row--promo {
  background: color-mix(in srgb, var(--color-accent, #6366f1) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
}

.tp-discount-row--qty {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 22%, transparent);
}

.tp-discount-row--transfer {
  background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 22%, transparent);
}

.tp-discount-row--coupon {
  background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 22%, transparent);
}

.tp-discount-row__label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  flex: 1;
  min-width: 0;
}

.tp-discount-row__icon {
  flex-shrink: 0;
  opacity: .7;
}

.tp-discount-row--promo .tp-discount-row__value {
  font-weight: 700;
  color: var(--color-accent, #6366f1);
  white-space: nowrap;
}

.tp-discount-row--qty .tp-discount-row__value {
  font-weight: 700;
  color: var(--color-warning, #d97706);
  white-space: nowrap;
}

.tp-discount-row--transfer .tp-discount-row__value {
  font-weight: 700;
  color: var(--color-success, #16a34a);
  white-space: nowrap;
}

.tp-discount-row--coupon .tp-discount-row__value {
  font-weight: 700;
  color: var(--color-success, #16a34a);
  white-space: nowrap;
}

.tp-discount-row--transfer .tp-cart-ps-badge {
  font-size: .65rem;
}

/* Fee rows (descuentos del plugin por método de pago) */
.tp-checkout-totals__row--fee {
  color: var(--color-success, #16a34a);
  font-weight: 600;
}

/* ── Descuentos por cantidad ─────────────────────────────────────────────── */
.tp-qty-discount {
  margin-top: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.tp-qty-discount__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  background: var(--color-bg-soft, #f8fafc);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-primary, #1e293b);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tp-qty-discount__header svg {
  color: var(--color-accent, #6366f1);
  flex-shrink: 0;
}

.tp-qty-discount__tiers {
  display: flex;
  flex-direction: column;
}

.tp-qty-discount__tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding: .5rem .875rem;
  font-size: .8125rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tp-qty-discount__tier:last-child {
  border-bottom: none;
}

.tp-qty-discount__range {
  color: var(--color-text, #334155);
  font-weight: 500;
}

.tp-qty-discount__percent {
  color: var(--color-success, #16a34a);
  font-weight: 700;
  white-space: nowrap;
}

.tp-qty-discount__price {
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}

.tp-qty-discount__price small {
  font-size: .7em;
  opacity: .7;
}

/* ── Quick Buy — override estilos del plugin para match con el tema ───── */
.tp-qb-active #tp-toast-host,
.tp-qb-active .tp-stock-modal { display: none !important; }

.tp-qb-active .tp-vq,
.tp-qb-active .tp-sq {
  font-family: var(--font-body, inherit);
}

.tp-qb-active .tp-vq-row {
  background: var(--color-bg-soft, #f8fafc);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #e2e8f0);
  padding: .5rem .75rem;
  margin-bottom: .375rem;
}

.tp-qb-active .tp-vq-minus,
.tp-qb-active .tp-vq-plus,
.tp-qb-active .tp-sq-minus,
.tp-qb-active .tp-sq-plus {
  border-color: var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-primary, #1e293b);
  background: var(--color-bg, #fff);
  font-family: var(--font-body, inherit);
}

.tp-qb-active .tp-vq-minus:hover,
.tp-qb-active .tp-vq-plus:hover,
.tp-qb-active .tp-sq-minus:hover,
.tp-qb-active .tp-sq-plus:hover {
  background: var(--color-bg-soft, #f8fafc);
  border-color: var(--color-primary, #1e293b);
}

.tp-qb-active .tp-vq-qty .qty,
.tp-qb-active .tp-sq-qty .qty {
  border-color: var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body, inherit);
  color: var(--color-text, #334155);
}

.tp-qb-active .tp-vq-search {
  border-color: var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-body, inherit);
}

.tp-qb-active .tpqb-modal .tpqb-dialog {
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  font-family: var(--font-body, inherit);
}

.tp-qb-active .tpqb-modal .tpqb-close {
  border-radius: var(--radius-sm, 6px);
}

/* Ocultar quick-add icon del tema cuando QB está activo */
.tp-qb-active .tp-product-card__quick-add { display: none !important; }

/* QB en cards de catálogo */
.tp-qb-card-wrap {
  width: 100%;
  margin-top: .5rem;
}

.tp-qb-card-wrap .tp-sq {
  margin: 0;
}

.tp-qb-card-wrap .tp-sq-title {
  display: none;
}

.tp-qb-card-wrap .tp-sq-qty {
  justify-content: center;
}

/* QB single product wrap */
.tp-qb-single-wrap {
  margin-top: 1rem;
}

.tp-qb-single-wrap .tp-vq {
  max-width: 100%;
}

.tp-qb-single-wrap .tp-sq-title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-primary, #1e293b);
}

/* ═══════════════════════════════════════════════════════════════
   FREQUENTLY BOUGHT TOGETHER — Amazon-style
   ═══════════════════════════════════════════════════════════════ */

.tp-fbt {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg, #fff);
}

/* Dentro del panel de compra (junto al ATC/envío), más compacto y sin
   layout centrado a lo ancho — el panel ya es angosto de por sí. */
.tps-info__fbt .tp-fbt,
.tps6-panel__fbt-full .tp-fbt {
  margin: 1.25rem 0 0;
  padding: 1.25rem;
}
.tps-info__fbt .tp-fbt__layout,
.tps6-panel__fbt-full .tp-fbt__layout {
  justify-content: flex-start;
}
.tps-info__fbt .tp-fbt__action,
.tps6-panel__fbt-full .tp-fbt__action {
  width: 100%;
}

/* Variaciones inline en FBT */
.tp-fbt__item--variable .tp-fbt__variants {
  margin-top: 8px;
}
.tp-fbt__attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.tp-fbt__attr-label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tp-fbt__attr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tp-fbt__attr-pill {
  padding: 3px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #374151;
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1.6;
}
.tp-fbt__attr-pill:hover {
  border-color: var(--tp-color-primary, #1a1a2e);
}
.tp-fbt__attr-pill.is-selected {
  border-color: var(--tp-color-primary, #1a1a2e);
  background: var(--tp-color-primary, #1a1a2e);
  color: #fff;
}
.tp-fbt__variant-hint {
  font-size: 12px;
  color: #e67e22;
  margin: 0 0 8px;
  line-height: 1.4;
}

/* Hint del producto actual variable */
.tp-fbt__current-variant-hint {
  font-size: 11px;
  color: #888;
  margin: 4px 0 0;
  font-style: italic;
}

/* Pills del producto actual: solo lectura (no clickeables visualmente) */
.tp-fbt__item--current .tp-fbt__attr-pill {
  cursor: pointer;
  opacity: .85;
}
.tp-fbt__item--current .tp-fbt__attr-pill:hover {
  border-color: var(--tp-color-primary, #1a1a2e);
  opacity: 1;
}

/* Highlight del form principal al hacer click en pills del actual */
@keyframes tp-fbt-form-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,26,46,.35); }
  60%  { box-shadow: 0 0 0 10px rgba(26,26,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,26,46,0); }
}
.tp-fbt__form-highlight {
  animation: tp-fbt-form-pulse 1.2s ease-out;
  border-radius: 8px;
}

.tp-fbt__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary, #1e293b);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.tp-fbt__discount-badge {
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-success, #10b981);
  padding: .2rem .5rem;
  border-radius: 999px;
  letter-spacing: .01em;
}

/* Layout: productos + panel de acción, centrado */
.tp-fbt__layout {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Productos en fila con "+" entre ellos */
.tp-fbt__products {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.tp-fbt__products::-webkit-scrollbar { display: none; }

.tp-fbt__plus {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-text-muted, #94a3b8);
  flex-shrink: 0;
  line-height: 1;
}

/* Cada item */
.tp-fbt__item {
  flex-shrink: 0;
  width: 140px;
  text-align: center;
  transition: opacity .2s;
}

.tp-fbt__item--unchecked {
  opacity: .35;
}

.tp-fbt__img-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto .5rem;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg-soft, #f8fafc);
}

.tp-fbt__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tp-fbt__current-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .4rem;
  text-align: center;
}

/* Checkbox + nombre */
.tp-fbt__item-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.tp-fbt__check-label {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  cursor: pointer;
  text-align: left;
}

.tp-fbt__checkbox {
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--color-accent, #6366f1);
}

.tp-fbt__item-name {
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-primary, #1e293b);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.tp-fbt__item-name:hover {
  color: var(--color-accent, #6366f1);
}

.tp-fbt__item-price {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-primary, #1e293b);
}
.tp-fbt__item-price del {
  font-weight: 400;
  font-size: .7rem;
  color: var(--color-text-muted, #94a3b8);
}
.tp-fbt__item-price ins {
  text-decoration: none;
}

/* Panel de acción */
.tp-fbt__action {
  flex-shrink: 0;
  width: 260px;
  padding: 1.25rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-soft, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tp-fbt__total-label {
  display: block;
  font-size: .8rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: .15rem;
}

.tp-fbt__total-amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary, #1e293b);
}

.tp-fbt__total-original {
  display: block;
  font-size: .8rem;
  color: var(--color-text-muted, #94a3b8);
  text-decoration: line-through;
}
.tp-fbt__total-original[hidden] {
  display: none;
}

.tp-fbt__total-note {
  display: block;
  font-size: .7rem;
  color: var(--color-text-muted, #94a3b8);
  margin-top: .15rem;
  line-height: 1.3;
}
.tp-fbt__total-note[hidden] {
  display: none;
}

.tp-fbt__items-count {
  margin: 0;
  font-size: .75rem;
  color: var(--color-text-muted, #94a3b8);
}

.tp-fbt__add-all {
  font-size: .8rem;
  padding: .7rem 1rem;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.tp-fbt__add-all:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Mobile: stack vertical ─────────────────────────────────── */
@media (max-width: 768px) {
  .tp-fbt {
    padding: 1.25rem 1rem;
    margin: 1.5rem 0;
  }

  .tp-fbt__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .tp-fbt__layout {
    flex-direction: column;
    gap: .75rem;
  }

  /* Lista de productos: columna */
  .tp-fbt__products {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    overflow: visible;
  }

  /* Separador "+" centrado visualmente con la imagen */
  .tp-fbt__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    margin: .25rem 0 .25rem calc(48px - 16px); /* centrado sobre imagen de 88px */
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--color-border, #e2e8f0);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary, #1e293b);
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  /* Cada producto: imagen a la izquierda, info a la derecha */
  .tp-fbt__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: .875rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    text-align: left;
  }

  .tp-fbt__item:last-child {
    border-bottom: none;
  }

  /* Imagen cuadrada más grande */
  .tp-fbt__img-wrap {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
  }

  /* Badge "Este producto" ocupa la parte inferior de la imagen */
  .tp-fbt__current-badge {
    font-size: .6rem;
    padding: .25rem .3rem;
    line-height: 1.2;
  }

  /* Bloque de info */
  .tp-fbt__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-top: .1rem;
  }

  .tp-fbt__check-label {
    align-items: flex-start;
    gap: .35rem;
  }

  .tp-fbt__checkbox {
    margin-top: .2rem;
  }

  .tp-fbt__item-name {
    font-size: .85rem;
    font-weight: 600;
    white-space: normal;
    line-height: 1.35;
    color: var(--color-primary, #1e293b);
  }

  .tp-fbt__item-price {
    font-size: .85rem;
    font-weight: 700;
  }

  /* Variaciones inline */
  .tp-fbt__attr {
    margin-bottom: 3px;
  }

  .tp-fbt__attr-label {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .tp-fbt__attr-pills {
    gap: 3px;
  }

  .tp-fbt__attr-pill {
    padding: 2px 8px;
    font-size: .68rem;
  }

  .tp-fbt__current-variant-hint {
    font-size: 10px;
    line-height: 1.3;
  }

  /* Panel de acción */
  .tp-fbt__action {
    width: 100%;
    flex-direction: column;
    gap: .6rem;
    padding: .875rem 1rem;
    margin-top: .25rem;
  }

  .tp-fbt__total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }

  .tp-fbt__total-label {
    font-size: .8rem;
    margin-bottom: 0;
  }

  .tp-fbt__total-amount {
    font-size: 1.35rem;
    font-weight: 800;
  }

  .tp-fbt__total-note {
    font-size: .72rem;
    text-align: left;
  }

  .tp-fbt__items-count {
    display: none;
  }

  .tp-fbt__variant-hint {
    font-size: .72rem;
    text-align: center;
    margin: 0;
    line-height: 1.4;
  }

  .tp-fbt__add-all {
    width: 100%;
    padding: .8rem 1rem;
    font-size: .875rem;
    font-weight: 600;
  }
}

/* ── Extra small (< 480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  .tp-fbt {
    padding: .75rem;
  }

  .tp-fbt__img-wrap {
    width: 60px;
    height: 60px;
  }

  .tp-fbt__current-badge {
    font-size: .5rem;
    padding: 2px 4px;
  }
}

/* ══════════════════════════════════════════════════════════════
   VIDEO EN GALERÍA — thumbs y slides de video (layouts 2-6)
═══════════════════════════════════════════════════════════════ */

/* Thumb de video genérico (layout-1, layout-2) */
.tps-gallery__thumb--video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  aspect-ratio: 1;
}
.tps-gallery__thumb--video svg { opacity: .9; }
.tps-gallery__thumb--video:hover { background: #222; }
.tps-gallery__thumb--video.is-active { outline: 2px solid var(--tp-color-primary, #1a1a2e); }

/* Slide de video en layout-3 */
.tps-gallery-3__slide--video {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tps-gallery-3__slide--video iframe,
.tps-gallery-3__slide--video video {
  width: 100%;
  height: 100%;
  border: none;
}
.tps-gallery-3__slide--video.is-vertical iframe,
.tps-gallery-3__slide--video.is-vertical video {
  max-width: 56.25%; /* 9/16 */
  margin: auto;
}

/* Dot de video en layout-3 */
.tps-gallery-3__dot--video {
  font-size: 10px;
  line-height: 1;
  width: auto;
  padding: 0 4px;
  background: rgba(255,255,255,.6);
  border-radius: 4px;
  color: #333;
}
.tps-gallery-3__dot--video.is-active { background: var(--tp-color-primary, #1a1a2e); color: #fff; }

/* Celda de video en layout-4 */
.tps-gallery-4__cell--video {
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  min-height: 100px;
}
.tps-gallery-4__cell--video:hover { background: #222; }

/* Thumb de video en layout-5 */
.tps-gallery-5__thumb--video {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  aspect-ratio: 3/4;
  border: 2px solid transparent;
}
.tps-gallery-5__thumb--video:hover { border-color: var(--tp-color-primary, #1a1a2e); }
.tps-gallery-5__thumb--video.is-active { border-color: var(--tp-color-primary, #1a1a2e); }

/* Ítem de video apilado en layout-5 */
.tps-gallery-5__img-wrap--video {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
}
.tps-gallery-5__img-wrap--video.is-vertical { aspect-ratio: 9/16; max-width: 400px; }
.tps-gallery-5__img-wrap--video iframe,
.tps-gallery-5__img-wrap--video video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Thumb de video en layout-6 strip */
.tps6-strip__thumb--video {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  aspect-ratio: 1;
  border: 2px solid transparent;
}
.tps6-strip__thumb--video:hover { border-color: var(--tp-color-primary, #1a1a2e); }
.tps6-strip__thumb--video.is-active { border-color: var(--tp-color-primary, #1a1a2e); }

/* Ítem de video en layout-6 galería central */
.tps6-gallery__item--video {
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 75vh;
  cursor: pointer;
}
.tps6-gallery__item--video.is-vertical {
  aspect-ratio: 9/16;
  max-width: 420px;
  max-height: none;
  margin: 0 auto;
}
.tps6-gallery__item--video iframe,
.tps6-gallery__item--video video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Botón de play facade */
.tps6-video-play-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}
.tps6-video-play-btn svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); transition: transform .15s; }
.tps6-video-play-btn:hover svg { transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════════
   WIDGET DE VIDEO FLOTANTE
═══════════════════════════════════════════════════════════════ */
.tp-video-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Burbuja / botón */
.tp-video-widget__bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tp-color-primary, #1a1a2e);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
}
.tp-video-widget__bubble:hover {
  background: var(--tp-color-primary-dark, #11112a);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Íconos dentro de la burbuja */
.tp-video-widget__play-icon  { display: block; flex-shrink: 0; }
.tp-video-widget__close-icon { display: none;  flex-shrink: 0; }

.tp-video-widget.is-open .tp-video-widget__play-icon  { display: none; }
.tp-video-widget.is-open .tp-video-widget__close-icon { display: block; }

/* Panel de video (oculto por defecto) */
.tp-video-widget__panel {
  display: none;
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  background: #000;
  width: 320px;
  aspect-ratio: 16/9;
}

/* Vertical (Shorts / Reels) */
.tp-video-widget.is-vertical .tp-video-widget__panel {
  width: 220px;
  aspect-ratio: 9/16;
}

.tp-video-widget.is-open .tp-video-widget__panel {
  display: block;
}

.tp-video-widget__iframe,
.tp-video-widget__native {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Mobile: panel más pequeño */
@media (max-width: 480px) {
  .tp-video-widget {
    bottom: 16px;
    left: 12px;
  }
  .tp-video-widget__panel {
    width: calc(100vw - 24px);
  }
  .tp-video-widget.is-vertical .tp-video-widget__panel {
    width: 180px;
  }
}

/* ─── Notas del pedido en checkout ──────────────────────────────────────── */
.tp-checkout-order-notes .woocommerce-input-wrapper {
  display: block;
}
.tp-checkout-order-notes textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid var(--tp-border, #e2e2e2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tp-text, #1a1a1a);
  background: #fff;
  transition: border-color .18s;
}
.tp-checkout-order-notes textarea:focus {
  outline: none;
  border-color: var(--color-accent, #1a1a1a);
}
.tp-checkout-order-notes label {
  display: none; /* el título de sección hace las veces de label */
}

/* ─── Modal selector de sucursales Andreani ─────────────────────────────── */
.tp-andreani-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.tp-andreani-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tp-andreani-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(.97);
  transition: transform .22s ease;
}
.tp-andreani-overlay.is-open .tp-andreani-modal {
  transform: translateY(0) scale(1);
}
.tp-andreani-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-andreani-modal__logo {
  height: 28px;
  width: auto;
  display: block;
}
.tp-andreani-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.tp-andreani-modal__close:hover {
  color: #1a1a1a;
  background: #f5f5f5;
}
.tp-andreani-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.tp-andreani-modal__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tp-text, #1a1a1a);
}
.tp-andreani-modal__subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
}
.tp-andreani-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #888;
  padding: 12px 0;
}
.tp-andreani-modal__loading svg {
  animation: tp-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}
.tp-andreani-modal__select-wrap {
  display: none;
}
.tp-andreani-modal__select-wrap.is-loaded {
  display: block;
}
.tp-andreani-modal__select-wrap select {
  width: 100%;
  border: 1px solid var(--tp-border, #e2e2e2);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: var(--tp-text, #1a1a1a);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color .18s;
}
.tp-andreani-modal__select-wrap select:focus {
  outline: none;
  border-color: var(--color-accent, #1a1a1a);
}
.tp-andreani-modal__footer {
  padding: 14px 20px 18px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-andreani-modal__confirm {
  width: 100%;
  background: var(--color-accent, #1a1a1a);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.tp-andreani-modal__confirm:hover {
  opacity: .88;
}
.tp-andreani-modal__confirm:disabled {
  opacity: .4;
  cursor: default;
}

/* Chip de sucursal seleccionada junto al método de envío */
.tp-andreani-selected-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #444;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  cursor: pointer;
  border: 1px solid #e2e2e2;
  transition: background .15s;
}
.tp-andreani-selected-branch:hover {
  background: #eaeaea;
}
.tp-andreani-selected-branch svg {
  flex-shrink: 0;
  color: #5cb85c;
}

/* Ocultar el selector nativo del plugin Andreani oficial — lo manejamos con nuestro modal */
/* Plugin v1.5+: inyecta .andreani-sucursales-row (tr) y .andreani-sucursales-standalone */
.andreani-sucursales-row,
.andreani-sucursales-standalone {
  display: none !important;
}

/* El plugin Andreani puede inyectar billing_dni / shipping_dni.
   Si el tema ya tiene sus campos fiscales, estos duplicados se eliminan vía PHP.
   Como defensa adicional en CSS, ocultamos cualquier row con esos IDs. */
.tp-andreani-dni-hidden,
p.form-row:has(> #billing_dni),
p.form-row:has(> #shipping_dni) {
  display: none !important;
}

/* Compat: plugin viejo Andreani */
#order_sucursal_mainandreani {
  display: none !important;
}

.andreani-logo,
.tp-andreani-modal__logo {
  display: none !important;
}

@media (max-width: 480px) {
  .tp-andreani-modal {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
  .tp-andreani-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* ─── Modal selector de sucursales OCA ──────────────────────────────────── */
.tp-oca-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.tp-oca-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tp-oca-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(.97);
  transition: transform .22s ease;
}
.tp-oca-overlay.is-open .tp-oca-modal {
  transform: translateY(0) scale(1);
}
.tp-oca-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-oca-modal__brand {
  font-size: 17px;
  font-weight: 700;
  color: #004b8d;
  letter-spacing: .5px;
}
.tp-oca-modal__logo {
  height: 32px;
  width: auto;
  display: block;
}
.tp-oca-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.tp-oca-modal__close:hover {
  color: #1a1a1a;
  background: #f5f5f5;
}
.tp-oca-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.tp-oca-modal__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tp-text, #1a1a1a);
}
.tp-oca-modal__subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
}
.tp-oca-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #888;
  padding: 12px 0;
}
.tp-oca-modal__loading svg {
  animation: tp-spin .8s linear infinite;
  flex-shrink: 0;
}
.tp-oca-modal__select-wrap {
  display: none;
}
.tp-oca-modal__select-wrap.is-loaded {
  display: block;
}
.tp-oca-modal__select-wrap select {
  width: 100%;
  border: 1px solid var(--tp-border, #e2e2e2);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: var(--tp-text, #1a1a1a);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color .18s;
}
.tp-oca-modal__select-wrap select:focus {
  outline: none;
  border-color: var(--color-accent, #1a1a1a);
}
.tp-oca-modal__footer {
  padding: 14px 20px 18px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-oca-modal__confirm {
  width: 100%;
  background: var(--color-accent, #1a1a1a);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.tp-oca-modal__confirm:hover {
  opacity: .88;
}
.tp-oca-modal__confirm:disabled {
  opacity: .4;
  cursor: default;
}

/* Chip de sucursal seleccionada */
.tp-oca-selected-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #444;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  cursor: pointer;
  border: 1px solid #e2e2e2;
  transition: background .15s;
}
.tp-oca-selected-branch:hover {
  background: #eaeaea;
}
.tp-oca-selected-branch svg {
  flex-shrink: 0;
  color: #5cb85c;
}

/* Ocultar el selector nativo de OCA — lo manejamos con nuestro modal */
#oca-branches-selection-wrapper {
  display: none !important;
}

@media (max-width: 480px) {
  .tp-oca-modal {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
  .tp-oca-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* ── Widget miniaturas de marcas (WooCommerce Brands) ─────────────────────── */
/* ─── Modal selector de sucursales Correo Argentino ─────────────────────────── */
.tp-ca-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.tp-ca-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tp-ca-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(.97);
  transition: transform .22s ease;
}
.tp-ca-overlay.is-open .tp-ca-modal {
  transform: translateY(0) scale(1);
}
.tp-ca-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-ca-modal__brand {
  font-size: 16px;
  font-weight: 700;
  color: #005bac;
  letter-spacing: .3px;
}
.tp-ca-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #666;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.tp-ca-modal__close:hover {
  color: #1a1a1a;
  background: #f5f5f5;
}
.tp-ca-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.tp-ca-modal__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tp-text, #1a1a1a);
}
.tp-ca-modal__subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 0 18px;
}
.tp-ca-modal__step {
  margin-bottom: 16px;
}
.tp-ca-modal__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
.tp-ca-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
  padding: 8px 0;
}
.tp-ca-modal__loading svg {
  animation: tp-spin .8s linear infinite;
  flex-shrink: 0;
}
.tp-ca-modal__select-wrap select {
  width: 100%;
  border: 1px solid var(--tp-border, #e2e2e2);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: var(--tp-text, #1a1a1a);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color .18s;
}
.tp-ca-modal__select-wrap select:focus {
  outline: none;
  border-color: var(--color-accent, #1a1a1a);
}
.tp-ca-modal__empty {
  font-size: 13px;
  color: #888;
  margin: 8px 0 0;
}

/* Buscador de sucursales */
.tp-ca-modal__search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.tp-ca-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.tp-ca-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--tp-border, #e2e2e2);
  border-radius: 8px;
  padding: 9px 12px 9px 32px;
  font-size: 13px;
  color: var(--tp-text, #1a1a1a);
  background: #fafafa;
  outline: none;
  transition: border-color .18s, background .18s;
}
.tp-ca-search:focus {
  border-color: var(--color-accent, #1a1a1a);
  background: #fff;
}
.tp-ca-search::placeholder { color: #bbb; }

/* Lista de ítems de sucursal */
.tp-ca-branch-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* scrollbar fina */
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.tp-ca-branch-list::-webkit-scrollbar { width: 4px; }
.tp-ca-branch-list::-webkit-scrollbar-track { background: transparent; }
.tp-ca-branch-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.tp-ca-branch-item {
  padding: 10px 12px;
  border: 1px solid var(--tp-border, #e8e8e8);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.tp-ca-branch-item:hover {
  border-color: var(--color-accent, #1a1a1a);
  background: #fafafa;
}
.tp-ca-branch-item.is-selected {
  border-color: var(--color-accent, #1a1a1a);
  background: #f4f4f4;
}
.tp-ca-branch-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-text, #1a1a1a);
  margin-bottom: 2px;
}
.tp-ca-branch-item__addr {
  font-size: 12px;
  color: #777;
  line-height: 1.3;
}
.tp-ca-modal__footer {
  padding: 14px 20px 18px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tp-ca-modal__confirm {
  width: 100%;
  background: var(--color-accent, #1a1a1a);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.tp-ca-modal__confirm:hover { opacity: .88; }
.tp-ca-modal__confirm:disabled { opacity: .4; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   OFERTAS — FILTROS Y EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.tp-offers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.5rem;
}
.tp-offers-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .625rem 1.125rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.tp-offers-filters__chip:hover { border-color: var(--color-accent); }
.tp-offers-filters__chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.tp-offers-filters__count {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.tp-offers-filters__chip.is-active .tp-offers-filters__count {
  color: rgba(255, 255, 255, .75);
}

.tp-offers-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}
.tp-offers-empty svg { opacity: .3; margin-bottom: .75rem; }
.tp-offers-empty__msg { font-size: 1.125rem; font-weight: 600; color: var(--color-text); }
.tp-offers-empty__sub { font-size: .9375rem; margin-bottom: 1rem; }

.tp-ca-selected-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #444;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  cursor: pointer;
  border: 1px solid #e2e2e2;
  transition: background .15s;
}
.tp-ca-selected-branch:hover { background: #eaeaea; }
.tp-ca-selected-branch svg { flex-shrink: 0; color: #5cb85c; }

/* Ocultar los selects nativos del plugin — los manejamos con el modal */
#ca_container_select_provinces,
[id^="ca_container_select_"],
.correoargentino_province_select,
.correoargentino_branch_select,
/* Los <li> padre que envuelven los contenedores del plugin */
li:has(> #ca_container_select_provinces),
li:has(> [id^="ca_container_select_"]) {
  display: none !important;
}
/* Select2 widgets dentro de los contenedores del plugin */
#ca_container_select_provinces .select2-container,
[id^="ca_container_select_"] .select2-container {
  display: none !important;
}
/* Select2 dropdown flotante global que el plugin abre (se appenda a <body>) */
.select2-container.select2-container--open:has(.correoargentino_province_select),
body > .select2-container--open .correoargentino-select2-results {
  display: none !important;
}

@media (max-width: 600px) {
  /* Sheet desde abajo — ocupa hasta el 92% de la pantalla */
  .tp-ca-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .tp-ca-modal {
    max-width: 100%;
    max-height: 92dvh;        /* dvh = descuenta la barra del browser en mobile */
    max-height: 92vh;         /* fallback para navegadores sin dvh */
    border-radius: 20px 20px 0 0;
    /* Animación: sube desde abajo en lugar de escalar */
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  .tp-ca-overlay.is-open .tp-ca-modal {
    transform: translateY(0);
  }

  /* Handle visual (barritas de drag) */
  .tp-ca-modal__header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
  }
  .tp-ca-modal__header {
    position: relative;
    padding-top: 22px;        /* espacio para el handle */
    padding-bottom: 12px;
  }

  /* Header y body más compactos */
  .tp-ca-modal__body {
    padding: 14px 16px 8px;
  }
  .tp-ca-modal__title  { font-size: 15px; }
  .tp-ca-modal__subtitle { margin-bottom: 14px; }
  .tp-ca-modal__step   { margin-bottom: 12px; }

  /* Select de provincia: altura touch-friendly */
  .tp-ca-modal__select-wrap select {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 15px;          /* evita zoom automático en iOS */
  }

  /* Buscador: fuente ≥ 16px para evitar zoom en iOS al hacer focus */
  .tp-ca-search {
    font-size: 16px;
    padding: 11px 12px 11px 34px;
  }

  /* Body scrolleable: el modal body crece para llenar el espacio y hace scroll */
  .tp-ca-modal__body {
    flex: 1;
    overflow-y: auto;
    /* Permitir scroll con momentum en iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* Lista sin altura fija — el scroll lo maneja el body del modal */
  .tp-ca-branch-list {
    max-height: none;
    overflow: visible;
  }
  /* Ítems con área de toque más grande */
  .tp-ca-branch-item {
    padding: 12px 14px;
  }
  .tp-ca-branch-item__name { font-size: 14px; }
  .tp-ca-branch-item__addr { font-size: 12px; }

  /* Footer con safe area de iOS (notch) */
  .tp-ca-modal__footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .tp-ca-modal__confirm {
    padding: 14px;
    font-size: 16px;
  }
}

ul.brand-thumbnails {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.brand-thumbnails.fluid-columns { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
ul.brand-thumbnails.columns-1  { grid-template-columns: 1fr; }
ul.brand-thumbnails.columns-2  { grid-template-columns: repeat(2, 1fr); }
ul.brand-thumbnails.columns-3  { grid-template-columns: repeat(3, 1fr); }
ul.brand-thumbnails.columns-4  { grid-template-columns: repeat(4, 1fr); }
ul.brand-thumbnails.columns-5  { grid-template-columns: repeat(5, 1fr); }
ul.brand-thumbnails.columns-6  { grid-template-columns: repeat(6, 1fr); }
ul.brand-thumbnails li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
ul.brand-thumbnails li a { display: block; }
ul.brand-thumbnails li img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) {
  ul.brand-thumbnails:not(.columns-1):not(.columns-2) { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ── Retiro por local: ocultar fila de envío y barra de envío gratis ── */
.tp-checkout-page--local-pickup .tp-checkout-shipping-bar,
.tp-checkout-page--local-pickup .tp-checkout-totals__row--shipping { display: none !important; }

/* ── Selector retiro / envío ──────────────────────────────────────────── */
.tp-delivery-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.tp-delivery-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.25rem 1rem 1rem;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, box-shadow .18s, background .18s;
  font-family: inherit;
  line-height: 1.3;
}
.tp-delivery-option:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.tp-delivery-option--active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.tp-delivery-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--color-text-muted, #6b7280);
  transition: background .18s, color .18s;
  margin-bottom: .1rem;
}
.tp-delivery-option--active .tp-delivery-option__icon {
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  color: var(--color-primary);
}

.tp-delivery-option__label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-primary);
}
.tp-delivery-option__sub {
  display: block;
  font-size: .75rem;
  color: var(--color-text-muted, #6b7280);
}

.tp-delivery-option__check {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s, transform .18s;
}
.tp-delivery-option--active .tp-delivery-option__check {
  opacity: 1;
  transform: scale(1);
}

/* ── Tarjeta de dirección de retiro ───────────────────────────────────── */
.tp-pickup-address-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 10px;
}
.tp-pickup-address-card[hidden] { display: none; }

.tp-pickup-address-card__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-pickup-address-card__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .875rem;
}
.tp-pickup-address-card__text strong {
  font-weight: 600;
  color: var(--color-primary);
}
.tp-pickup-address-card__text span {
  color: var(--color-text-muted, #6b7280);
}

#tp-address-form[hidden] { display: none; }

@media (max-width: 480px) {
  .tp-delivery-selector {
    grid-template-columns: 1fr;
  }
}




/* ── Lista de espera en variaciones ── */
.tp-variation-waitlist-btn-wrap {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #e2e2e2;
}
.tp-variation-waitlist-btn-wrap .tp-waitlist-btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  transition: all .2s;
}
.tp-variation-waitlist-btn-wrap .tp-waitlist-btn:hover {
  background: #000;
  color: #fff;
}
.tp-variation-waitlist-btn-wrap .tp-waitlist-btn svg {
  margin-right: 8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   MILE LOGISTIC SRL — Calculadora de envío en página de producto
   ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor principal */
div[style*="width: 100%"]:has(#consult_delivery_mile_logistic_srl),
div[style*="width: 100%"]:has(#cp_single_shipping_calculate_mile_logistic_srl) {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  padding: 1rem 1.25rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* Título "Calcular Envío" */
div:has(#consult_delivery_mile_logistic_srl) > p {
  margin: 0 0 .75rem !important;
}
div:has(#consult_delivery_mile_logistic_srl) > p > b {
  font-size: .8125rem !important;
  font-weight: 700 !important;
  color: var(--tp-color-text, #0f172a) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
}
div:has(#consult_delivery_mile_logistic_srl) > p > b::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Fila input + botón */
div:has(#consult_delivery_mile_logistic_srl) .quantity {
  display: inline-flex !important;
  width: auto !important;
  vertical-align: middle;
  margin-right: .5rem !important;
}

/* Input de código postal */
#cp_single_shipping_calculate_mile_logistic_srl {
  width: 130px !important;
  height: 40px !important;
  padding: 0 .875rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: .9375rem !important;
  color: var(--tp-color-text, #0f172a) !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}
#cp_single_shipping_calculate_mile_logistic_srl::placeholder { color: #94a3b8; }
#cp_single_shipping_calculate_mile_logistic_srl:focus {
  outline: none !important;
  border-color: var(--tp-color-accent, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* Botón Calcular */
#consult_delivery_mile_logistic_srl {
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important;
  vertical-align: middle !important;
  height: 40px !important;
  padding: 0 1.125rem !important;
  border-radius: 8px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s, opacity .15s, transform .1s !important;
  white-space: nowrap !important;
  background: var(--tp-color-text, #0f172a) !important;
  color: #fff !important;
  border: none !important;
}
#consult_delivery_mile_logistic_srl:hover:not(:disabled) {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
}
#consult_delivery_mile_logistic_srl:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; }

/* Resultado de precios */
#result-shipping-price {
  margin-top: .875rem;
  font-size: .875rem;
}
#result-shipping-price table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
}
#result-shipping-price th {
  padding: .5rem .875rem;
  text-align: left;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
#result-shipping-price td {
  padding: .625rem .875rem;
  text-align: left;
  font-size: .875rem;
  border-bottom: 1px solid #f1f5f9;
  color: var(--tp-color-text, #0f172a);
}
#result-shipping-price td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--tp-color-accent, #6366f1);
}
#result-shipping-price tr:last-child td { border-bottom: none; }
#result-shipping-price img { display: block; margin: .5rem auto; }

/* ── Descripción de métodos de envío (igual al payment_box de WC) ── */
.tp-shipping-description-box {
  width: 100%;           /* ocupa toda la fila → wrap lo baja a la línea siguiente */
  margin-top: -.125rem;  /* compensa el gap del flex para pegarlo a la fila de arriba */
  padding: .625rem 0 0 calc(18px + .75rem); /* alineado con el texto del label */
  border-top: 1px solid #f3f4f6;
  font-size: .875rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.5;
}
.tp-shipping-description-box p {
  margin: 0;
}
.tp-shipping-description-box p + p {
  margin-top: .375rem;
}

/* ══ MODO PAYMENT — post-checkout page ══════════════════════════════════════
 * Estilos para la página order-received cuando el pago es con MODO.
 * Se activa con la clase .tp-modo-pending que el tema agrega al <body>
 * cuando detecta ?modo_cta en la URL.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Fondo oscuro/limpio cuando se está pagando con MODO */
body.tp-modo-pending {
  background: var(--color-primary, #0f172a) !important;
}
body.tp-modo-pending .site-header,
body.tp-modo-pending .site-footer,
body.tp-modo-pending .tp-thankyou__hero,
body.tp-modo-pending .tp-thankyou__timeline-wrap,
body.tp-modo-pending .woocommerce-order-details,
body.tp-modo-pending .woocommerce-customer-details {
  display: none !important;
}
body.tp-modo-pending .tp-thankyou {
  min-height: 100vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.tp-modo-pending .woocommerce-order {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* Texto de instrucción */
.cta-MODO-post-checkout {
  display: block;
  font-size: .95rem !important;
  color: rgba(255,255,255,.7);
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: var(--font-body, sans-serif);
}

/* Contenedor de botones */
.checkout-top-div-container.post-checkout {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}

/* Botón principal MODO */
#modo-modal-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  background: #00D0A6 !important;
  color: #fff !important;
  border: none;
  border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .1s;
}
#modo-modal-cta:hover {
  background: #00b890 !important;
  transform: translateY(-1px);
}
#modo-modal-cta img {
  max-height: 22px !important;
  margin-left: 6px !important;
  padding-bottom: 0 !important;
  vertical-align: middle;
}

/* Botón secundario — seleccionar otro método */
#select-gateway {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  background: transparent !important;
  color: rgba(255,255,255,.6) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: .875rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
#select-gateway:hover {
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* Spinner de carga — reemplaza el fondo gris del plugin */
.modo-container-spinner {
  background-color: rgba(15, 23, 42, .75) !important;
  backdrop-filter: blur(4px);
}
.modo-container-spinner .spinner img {
  width: 32px;
  height: 32px;
}