/* =====================================================================
   LIST PRODUCTS / GEN
   ===================================================================== */
#wrap.woocommerce{ background:#fff; padding:40px 0; }
.woocommerce .cart_totals h2{ font-size:1.6em; }

/* =====================================================================
   VARIABLES GLOBALES (ajusta aquí tamaños clave)
   ===================================================================== */
:root{
  /* Precio tipográfico */
  --df-price-now: 2.8rem;   /* precio actual/único */
  --df-price-old: 1.8rem;   /* precio anterior (tachado) */
  --df-currency-scale: .70; /* relación símbolo/valor */

  /* Timings/curvas comunes */
  --df-ease-elastic: cubic-bezier(.34,1.56,.64,1);

  /* Ancho del contenido */
  --df-content-max: 1280px;
}

/* Contenedor ancho del theme */
#wrap.woocommerce .content.wide{ max-width: var(--df-content-max); }

/* =====================================================================
   SINGLE PRODUCT – SCOPE
   (aplica cuando el markup vive bajo .df-product y/o body.single-product)
   ===================================================================== */
.df-product,
body.single-product{}

/* =====================================================================
   GRID 50/50
   ===================================================================== */
.df-product .df-product-grid,
body.single-product .df-product-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:3rem;
  align-items:start;
}
@media (max-width:992px){
  .df-product .df-product-grid,
  body.single-product .df-product-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* Permite que los hijos encojan si hace falta */
.df-product .df-product-grid > *,
body.single-product .df-product-grid > *{ min-width:0; }

/* Columna derecha/izquierda sin límites heredados */
.df-product .df-summary,
body.single-product .df-summary,
.df-product .entry-summary,
body.single-product .entry-summary{
  max-width:none !important;
  width:100% !important;
  float:none !important;
  padding-right:0;
}
.df-product .df-gallery,
body.single-product .df-gallery,
.df-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery{
  max-width:none !important;
  width:100% !important;
  float:none !important;
}

/* =====================================================================
   HEADINGS EN SUMMARY
   ===================================================================== */
.df-product .summary h3,
body.single-product .summary h3{ font-size:1.2em; font-weight:400; margin:0; }
.df-product .summary h1,
body.single-product .summary h1{ font-size:2.4em; margin:.3em 0 .4em !important; }

/* Over-title (“Corregir”) */
.df-product .df-over-title,
body.single-product .df-over-title{
  font-size:1.1rem; font-weight:500; margin:0 0 .25rem; color:#3d3d3d;
}

/* =====================================================================
   GALERÍA: foto principal arriba + thumbs debajo
   ===================================================================== */
.df-gallery{ position:relative; }

.woocommerce span.onsale,
.df-gallery .onsale{
  position:absolute; z-index:100; top:25px; right:25px !important; left: auto;
  width:60px; height:60px; line-height: 5.65rem; text-align:center;
  background:#40c6c2; color:#fff; border-radius:50%;
  font-size: 1.25rem; font-weight: 400;
  -webkit-font-smoothing:antialiased; backface-visibility:hidden;
  transform:translate3d(20px,-20px,0);
}

.woocommerce-product-gallery{
  display:flex; flex-direction:column; align-items:stretch; gap:1rem;
}
.woocommerce-product-gallery__trigger{ display:none; }

.df-gallery .woocommerce-product-gallery__image img{
  display:block; width:100%; height:auto; object-fit:contain;
}

/* Thumbs fila */
.woocommerce-product-gallery .flex-control-thumbs{
  order:2;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:.5rem; width:100%;
  margin:0; padding:0; list-style:none;
  line-height:0; /* elimina aire fantasma */
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{ height:6px; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb{
  background:#d9dee3; border-radius:10px;
}
.woocommerce-product-gallery .flex-control-thumbs li{
  flex:0 0 auto; width:84px !important; height:84px; margin:0; padding:0; line-height:0;
}
.woocommerce-product-gallery .flex-control-thumbs li img{
  display:block; width:100%; height:100%; object-fit:contain; background:#fff;
  border:1px solid #e8e8e8; border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.woocommerce-product-gallery .flex-control-thumbs li:hover img{ border-color:#aeb2b6; }
.woocommerce-product-gallery .flex-control-thumbs li.flex-active img,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{ border-color:#364855; }

@media (max-width:600px){
  .woocommerce-product-gallery{ gap:.75rem; }
}

/* =====================================================================
   PRECIOS (tamaño tipográfico)
   ===================================================================== */
.df-product .summary .price,
body.single-product .summary .price{
  display:flex; align-items:baseline; gap:.75rem;
  margin:.25rem 0 1rem; line-height:1;
}
.df-product .summary .price ins,
body.single-product .summary .price ins{ text-decoration:none; }
.df-product .summary .price del,
body.single-product .summary .price del{
  text-decoration:line-through; text-decoration-thickness:1px; color:#9aa6b2;
}

/* Tamaños siempre sobre <bdi> */
.df-product .summary .price > .woocommerce-Price-amount.amount bdi,
body.single-product .summary .price > .woocommerce-Price-amount.amount bdi,
.df-product .summary .price ins bdi,
body.single-product .summary .price ins bdi{
  font-size:var(--df-price-now) !important; font-weight:400 !important; line-height:1 !important; color:#111 !important;
}
.df-product .summary .price del bdi,
body.single-product .summary .price del bdi{
  font-size:var(--df-price-old) !important; font-weight:400 !important; line-height:1 !important; color:#9aa6b2 !important;
}
/* Símbolo de moneda reducido */
.df-product .summary .price .woocommerce-Price-currencySymbol,
body.single-product .summary .price .woocommerce-Price-currencySymbol{
  font-size:calc(1em * var(--df-currency-scale)) !important;
}

/* =====================================================================
   CAMPOS RÁPIDOS BAJO LA DESCRIPCIÓN
   ===================================================================== */
.df-quick-attrs{ margin:.75rem 0 1rem; }
.df-quick-attrs .df-attr{ margin:.25rem 0; font-size:1.25rem; color:#212529; }
.df-quick-attrs .df-attr strong{ font-weight:600; margin-right:.35rem; }

/* =====================================================================
   FILA: CANTIDAD (25%) + AÑADIR (75%)
   ===================================================================== */
.df-product .df-summary form.cart,
body.single-product .df-summary form.cart{
  display:flex; align-items:center; gap: .75rem; flex-wrap:wrap; margin:.5rem 0 1.0rem !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}
/* Woo a veces añade margen al botón y a .quantity */
.df-product .df-summary form.cart .single_add_to_cart_button,
.df-product .df-summary form.cart .button,
.df-product .df-summary form.cart .quantity,
body.single-product .df-summary form.cart .quantity{
  margin: 0 !important;
}

/* ===== Qty: [-] [input centrado] [+] — FIX sólido ===== */
.df-product .df-summary form.cart .df-qty{
  flex:1 1 0;
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) 56px; /* ← el centro ya no colapsa */
  align-items:center;
  gap:.5rem;
  background:#f3f3f3;
  border-radius:14px;
  padding:.5rem;
  height:56px;
  min-width:0;
}

.df-product .df-summary form.cart .df-qty .quantity{
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  width:100%;
  min-width:0;                     /* ← importante en grid */
  margin:0; padding:0;
  background:transparent;
  position:relative;
}

/* Ocultar correctamente la label accesible para que no “empuje” nada */
.df-product .df-summary form.cart .df-qty .quantity .screen-reader-text{
  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;
}

/* Input numérico centrado y visible */
.df-product .df-summary form.cart .df-qty input.qty{
  width:100%;
  min-width:2.6ch;                 /* siempre caben 2–3 dígitos */
  height:44px;
  line-height:44px;
  text-align:center;
  color:#111;                       /* por si algún reset lo deja transparente */
  background:transparent;
  border:0;
  padding:0; margin:0;
  font-weight:400;
  font-size: 1.6rem !important;
  box-shadow:none;
  -moz-appearance:textfield;
}
.df-product .df-summary form.cart .df-qty input.qty::-webkit-outer-spin-button,
.df-product .df-summary form.cart .df-qty input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* Botones +/- */
.df-product .df-summary form.cart .df-qty .df-qty-btn{
  width:56px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border: none;
  border-radius:10px;
  font-size:1.85rem; line-height:1;
  cursor:pointer;
}
.df-product .df-summary form.cart .df-qty .df-qty-btn:focus{
  outline:2px solid #111; outline-offset:2px;
}


/* Botón “Añadir al carrito” */
.df-product .df-summary form.cart .single_add_to_cart_button,
body.single-product .df-summary form.cart .single_add_to_cart_button{
  /* blindaje contra resets de Woo */
  all: unset;
  flex:3 1 0; height:56px; line-height:56px; text-align:center;
  border-radius:14px; border:1px solid rgb(54,72,85);
  background:transparent; color:#111; font-weight:600; font-size:1.15rem; letter-spacing:.2px; cursor:pointer;
}
.df-product .df-summary form.cart .single_add_to_cart_button:hover,
body.single-product .df-summary form.cart .single_add_to_cart_button:hover{ background:#111; color:#fff; }

/* Mobile: apila */
@media (max-width:600px){
  .df-product .df-summary form.cart,
  body.single-product .df-summary form.cart{ gap:.75rem; }
  .df-product .df-summary form.cart .df-qty,
  .df-product .df-summary form.cart .single_add_to_cart_button,
  body.single-product .df-summary form.cart .df-qty,
  body.single-product .df-summary form.cart .single_add_to_cart_button{ flex:0 0 100%; }
}

/* =====================================================================
   COMPRAR AHORA + PAYLINE
   ===================================================================== */
.df-product .df-summary .df-btn-buy-now,
body.single-product .df-summary .df-btn-buy-now{
  /* blindaje contra resets de Woo */
  all: unset;
  display:block; cursor: pointer; width:100%; height:58px; line-height:58px;
  border-radius:14px; background:#000; color:#fff; border:0;
  font-weight:600; font-size:1.25rem; letter-spacing:.2px; text-align:center;
  margin-top:1rem; transition:.15s ease-in-out;
}
.df-product .df-summary .df-btn-buy-now:hover,
body.single-product .df-summary .df-btn-buy-now:hover{background: #40c6c2; color:#fff; opacity:.92; }

.df-payline{
  display:flex; align-items:center; gap:.5rem;
  color:#6b6b6b; font-size:.95rem; margin:1.5rem 0 2.5rem;
}
.df-payline i{ opacity:.85; }

/* =====================================================================
   BLOQUES: stock + logo (fila superior)
   ===================================================================== */
.df-contenido{ margin:.25rem 0 1rem; }
.df-messaging{ margin-top:1rem; }
.df-promo{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.9rem 1rem; border:1px solid #eaeaea; border-radius:8px; margin:.5rem 0 1rem;
}
.df-toprow{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:2rem 0 3rem;
}
.df-toprow .df-meta-line{ margin:0; }
.df-toprow .df-authorized img{ max-height:36px; width:auto; }
@media (max-width:600px){
  .df-toprow{ flex-wrap:wrap; }
  .df-toprow .df-authorized{ width:100%; margin-top:.25rem; }
  .df-toprow .df-authorized img{ max-height:32px; }
}

/* Ocultar meta/stock heredados del theme en la zona inferior */
.df-product .summary .product_meta,
.df-product .summary .minimog-product-meta,
.df-product .summary .stock,
.df-product .summary .product-stock,
.df-product .summary .availability,
.df-product .entry-summary .product_meta,
.df-product .entry-summary .stock,
.df-product .entry-summary [class*="stock"],
body.single-product .summary .product_meta,
body.single-product .summary .minimog-product-meta,
body.single-product .summary .stock,
body.single-product .summary .product-stock,
body.single-product .summary .availability,
body.single-product .entry-summary .product_meta,
body.single-product .entry-summary .stock,
body.single-product .entry-summary [class*="stock"]{
  display:none !important;
}

/* Si algún theme imprime un <p> “X disponibles” justo sobre el form */
@supports selector(:has(*)) {
  .df-product .summary > p:has(+ form.cart),
  body.single-product .summary > p:has(+ form.cart){ display:none !important; }
}

/* =====================================================================
   ACORDEÓN
   ===================================================================== */
.df-derm-accordion{ border-top:1px solid #eee; }
.df-acc-item{}
.df-acc-head{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:1.25rem 0; background:#fff; font-weight:500; font-size:1.05em;
  border:none; border-bottom:1px solid rgba(54,72,85,.2);
  transition: border-color .1s ease;
}
.df-acc-head[aria-expanded="true"]{ border-color:#000; opacity:1; }
.df-derm-accordion .df-acc-panel{ overflow:hidden; will-change:height; padding:0; }
.df-derm-accordion .df-acc-panel ul{ margin:30px 10px; }
.df-derm-accordion .df-acc-panel li{ font-size:1em; }
.df-derm-accordion .df-acc-panel h4{ margin:20px 10px; }
.df-derm-accordion .df-acc-panel p{ font-size:1em; margin:20px 10px; }
.df-acc-head .fa-chevron-down{
  font-size:1.1rem; margin-left:auto; transition:transform .28s var(--df-ease-elastic); transform:rotate(-90deg);
}
.df-acc-head[aria-expanded="true"] .fa-chevron-down{ transform:rotate(0deg); }

/* =====================================================================
   MENSAJES DE CARRO
   ===================================================================== */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message{
  position:relative; width:100%; border-radius:14px;
  color:var(--minimog-color-heading, #111);
  overflow-wrap:break-word; margin:0 0 30px !important;
  border-width:0; background:rgb(247,247,247);
  padding:1em 1em 1em 46px; list-style:outside none;
}
.woocommerce-error li, .woocommerce-info li, .woocommerce-message li{ font-size:1.3rem; }
.woocommerce-error li a, .woocommerce-info li a, .woocommerce-message li a{
  float:right; text-transform:uppercase;
}

.woocommerce .related.products{}
  .woocommerce .related.products h2{font-size: 2.6rem; text-align: center;}
  .woocommerce .related.products ul, .woocommerce ul.products{}
  
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product,
    .woocommerce .related.products ul li, .woocommerce ul.products li{
      box-shadow: 0 7px 17px rgba(54, 72, 85, 0.1);
      //border: 1px solid #e9ecef;
      border-radius: 15px;
      padding: 10px;
      transition: .15s ease-in-out all;
    }
    
      .woocommerce ul.products li.product .df-loop-brand{color: #9aa6b2; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; }
      
      .woocommerce ul.products li.product .price{color: #000;}
      .woocommerce ul.products li.product .price ins,
      .woocommerce ul.products li.product .price bdi{font-weight: 500; text-decoration: none;}
      //.woocommerce ul.products li.product .price bdi{font-weight: 600; text-decoration: none;}
      
      .df-product .price del, body.single-product .price del{color: #9aa6b2 !important; font-weight: 400 !important;}
      
      .woocommerce ul.products li.product .price del bdi{font-weight: 400 !important;}
      
    
    .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover,
    .woocommerce .related.products ul li:hover, .woocommerce ul.products li:hover{
      box-shadow: 0 0px 17px rgba(64, 198, 194, 0.5);
    }
    .woocommerce ul.products li.product .button{
      //background: rgba(64, 198, 194, 1.0)
    }
  
/* =====================================================================
     CATEGORÍAS DE TIENDA WOO – SIDEBAR DE FILTROS
     ===================================================================== */
  
  /* Layout general (ya lo tienes, por si acaso) */
  .df-cat{
    display:grid;
    grid-template-columns: 260px 1fr;   /* ancho sidebar */
    gap: 40px;
    //align-items: start;
  }
  @media (max-width: 992px){
    .df-cat{ grid-template-columns: 1fr; }
  }
  
  /* Caja lateral fija y limpia */
  .df-cat__sidebar{
    position: sticky;          /* queda pegado al hacer scroll */
    top: 110px;                /* ajusta según alto de tu header */
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:12px;
    padding: 18px;
  }
  
  /* Cada bloque de filtros (ya envolvemos con <section class="df-filter">… ) */
  .df-filter{ padding:16px 0; border-bottom:1px solid #eef1f4; }
  .df-filter:first-child{ padding-top:0; }
  .df-filter:last-child{ padding-bottom:0; border-bottom:0; }
  
  /* Título del bloque */
  .df-filter__title{
    margin:0 0 10px;
    font-size:.92rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6b7280; color: #000;
    font-weight:600;
    text-decoration: underline;
  }
  
  /* Listas de términos */
  /* ============================================================
     LISTA DE MARCAS
     .wc-brand-list-layered-nav-product_brand
     ============================================================ */
  
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand{
    display: flex;
    flex-direction: column;
    gap: 4px;
  
    width: 100%;
    margin: 0;
    padding: 0;
  
    list-style: none;
  }
  
  /* Ítem */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li{
      display: flex;
      align-items: center;
      width: 100%;
      gap: 8px;
      margin: 0;
    }
  
  /* Enlace */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li a{
    position: relative;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  
    width: 100%;
    min-height: 38px;
    padding: 8px 10px 8px 30px;
  
    border-radius: 8px;
    background: transparent;
  
    color: #344955;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    
    flex: 1 1 auto;
    
    width: auto;
  
    transition:
      background-color .18s ease,
      color .18s ease,
      transform .18s ease;
  }
  
  /* Punto visual */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li a::before{
    content: "";
  
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  
    width: 8px;
    height: 8px;
  
    border-radius: 50%;
    background: #c8d2da;
  
    transition:
      background-color .18s ease,
      transform .18s ease;
  }
  
  /* Hover */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li a:hover{
    background: #f4f8f9;
    color: #40c6c2;
    transform: translateX(2px);
  }
  
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li a:hover::before{
    background: #40c6c2;
    transform: translateY(-50%) scale(1.15);
  }
  
  /* Marca activa */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li.chosen > a,
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li.current > a{
    background: rgba(64,198,194,.12);
    color: #344955;
    font-weight: 600;
  }
  
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li.chosen > a::before,
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li.current > a::before{
    background: #40c6c2;
    box-shadow: 0 0 0 4px rgba(64,198,194,.14);
  }
  
  /* Contador */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand .count{
    flex: 0 0 auto;
    
    margin-left: auto;
    
    color: #7c858d;
    
    font-size: .95rem;
    
    white-space: nowrap;
  }
  
  /* Elimina bullets heredados */
  .df-cat__sidebar .wc-brand-list-layered-nav-product_brand li::marker{
    content: "";
  }
  
  
  
  
  .df-cat__sidebar .woocommerce-widget-layered-nav-list,
  .df-cat__sidebar .product-categories,
  .df-cat__sidebar .pwb-filter-products{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:.35rem;
  }
  
  /* Ítems con “checkbox” visual (los layered-nav son enlaces) */
  .df-cat__sidebar .woocommerce-widget-layered-nav-list a,
  .df-cat__sidebar .product-categories a,
  .df-cat__sidebar .pwb-filter-products a{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size: 1.3rem;
    padding:.35rem 0 .35rem 28px !important;          /* espacio para el pseudo-checkbox */
    color:#1f2937;
    text-decoration:none;
    position:relative;
    border-radius:6px;
    transition: background .15s ease, color .15s ease;
  }
  .df-cat__sidebar .woocommerce-widget-layered-nav-list a:hover,
  .df-cat__sidebar .product-categories a:hover,
  .df-cat__sidebar .pwb-filter-products a:hover{
    background:#f7f7f8;
    color:#111;
  }
  
  /* Cajita “checkbox” a la izquierda */
  .df-cat__sidebar .woocommerce-widget-layered-nav-list a::before,
  .df-cat__sidebar .product-categories a::before,
  .df-cat__sidebar .pwb-filter-products a::before{
    content:"";
    width:18px; height:18px;
    border:2px solid #d1d5db;
    border-radius:4px;
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    background:#fff;
  }
  
  /* Estado seleccionado (Woo añade .chosen en el <li>) */
  .df-cat__sidebar .woocommerce-widget-layered-nav-list .chosen > a,
  .df-cat__sidebar .product-categories .current-cat > a,
  .df-cat__sidebar .pwb-filter-products .chosen > a{
    color:#111; font-weight:600;
  }
  .df-cat__sidebar .woocommerce-widget-layered-nav-list .chosen > a::before,
  .df-cat__sidebar .product-categories .current-cat > a::before,
  .df-cat__sidebar .pwb-filter-products .chosen > a::before{
    border-color:#111; background:#111;
    box-shadow:inset 0 0 0 3px #fff;     /* efecto “tic” sólido */
  }
  
  /* Contador a la derecha, gris claro */
  .df-cat__sidebar .count{
    margin-left:.35rem;
    color:#98a3ae;
    font-size:.92em;
  }
  
  /* ============================================================
     FILTRO DE PRECIO WOOCOMMERCE
     ============================================================ */
  
  .df-cat__sidebar .price_slider_wrapper{
    width:100%;
    padding-top:4px;
  }
  
  /* Barra completa */
  .df-cat__sidebar .price_slider_wrapper .price_slider{
    position:relative;
    width:100%;
    height:6px;
    margin:10px 0 18px;
    padding:0;
  
    background:#e7edf1;
    border:0;
    border-radius:999px;
    box-shadow:none;
  }
  
  /* Rango seleccionado */
  .df-cat__sidebar .price_slider_wrapper .ui-slider-range{
    position:absolute;
    top:0;
    height:100%;
  
    background:#40c6c2;
    border-radius:999px;
    box-shadow:none;
  }
  
  /* Manillas */
  .df-cat__sidebar .price_slider_wrapper .ui-slider-handle{
    position:absolute;
    top:50%;
    z-index:2;
  
    width:18px;
    height:18px;
    margin-top:-9px;
    margin-left:-9px;
  
    background:#fff;
    border:3px solid #40c6c2;
    border-radius:50%;
    box-shadow:0 3px 10px rgba(54,72,85,.18);
  
    cursor:grab;
    outline:none;
    transition:
      transform .15s ease,
      box-shadow .15s ease,
      border-color .15s ease;
  }
  
  .df-cat__sidebar .price_slider_wrapper .ui-slider-handle:hover,
  .df-cat__sidebar .price_slider_wrapper .ui-slider-handle:focus{
    transform:scale(1.08);
    border-color:#344955;
    box-shadow:0 4px 14px rgba(54,72,85,.25);
  }
  
  .df-cat__sidebar .price_slider_wrapper .ui-slider-handle:active{
    cursor:grabbing;
  }
  
  /* Zona inferior: precio arriba y botón abajo */
  .df-cat__sidebar .price_slider_amount{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap: 4px;
  
    width:100%;
    margin-top:0;
  
    color:#6b7280;
    font-size:1.05rem;
    line-height:1.45;
    text-align:left;
  }
  
  /* Precio */
  .df-cat__sidebar .price_slider_amount .price_label{
    order:1;
    display:block;
    width:100%;
  
    margin:0;
    padding:0;
  
    color:#6b7280;
    font-size:1.05rem;
    font-weight:400;
    line-height:1.45;
  }
  
  /* Botón */
  .df-cat__sidebar .price_slider_amount .button{
    order:2;
    align-self:flex-start;
  
    min-height:34px;
    margin:0 !important;
    padding:8px 15px !important;
  
    background:#344955 !important;
    color:#fff !important;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
  
    font-family:"Poppins", sans-serif;
    font-size:.95rem !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-transform:none;
  
    cursor:pointer;
    transition:
      background-color .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
  }
  
  .df-cat__sidebar .price_slider_amount .button:hover{
    background:#40c6c2 !important;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(64,198,194,.22) !important;
  }
  
  /* Limpia floats nativos de Woo */
  .df-cat__sidebar .price_slider_amount::before,
  .df-cat__sidebar .price_slider_amount::after{
    content:"";
    display:table;
    clear:both;
  }
  
  /* Quita bullets/indent que algunos themes imprimen en categorías/marcas */
  .df-cat__sidebar .product-categories li,
  .df-cat__sidebar .pwb-filter-products li,
  .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item
  { list-style: none; margin:0; }
  .df-cat__sidebar .product-categories ul{ margin-left:0; }
  
  /* Opcional: separador sutil a la izquierda del panel, estilo “rail” */
  .df-cat__sidebar{ box-shadow: 0 1px 0 #fff inset; }


/* Layout count + ordering (3/4 — 1/4) */
.df-cat__meta{
  border-bottom: 1px solid #e9ecef;
  display:grid;
  grid-template-columns: 3fr 1fr;
  align-items:center;
  gap:1rem;
  margin: 1.25rem 0;
  padding-bottom: 2.0rem;
}
.df-cat__meta .woocommerce-result-count{ margin:0; }
.df-cat__meta .woocommerce-ordering{ margin:0; }
.df-cat__meta .woocommerce-ordering select{
  width:100%;
  height:44px;
  border-radius:10px;
}

/* Mobile: apila */
@media (max-width: 768px){
  .df-cat__meta{ grid-template-columns:1fr; gap:.5rem; }
}

/* Respeto a reduce-motion del sistema */
@media (prefers-reduced-motion: reduce){
  .animate__animated{ animation: none !important; transition: none !important; }
}

/* Wrapper del dropdown (ya lo tienes) */
.df-order{ position:relative; width:100%; max-width:260px; }

/* Botón del dropdown (ya lo tienes) */
.df-order__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border:1px solid #d8dee6; border-radius:10px;
  background:#fff; font-weight:600; cursor:pointer;
}

/* LISTA flotante con fade + down (0.8s) */
.df-order__list{
  position:absolute; z-index:50; top:100%; left:0; right:0;
  margin:.25rem 0 0; padding:.35rem 0;
  background:#fff; border:1px solid #e3e8ef; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);

  /* animación */
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(-8px) scale(.98);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1),
              transform .8s cubic-bezier(.2,.6,.2,1);

  /* sin viñetas */
  list-style:none;
}

/* Estado abierto: aparece y baja */
.df-order.is-open .df-order__list{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateY(6px) scale(1);
}

/* Ítems */
.df-order__opt{
  list-style:none; font-size: 1.2rem; margin: 0; padding:.95rem 1rem; cursor:pointer; user-select:none;
}
.df-order__opt:hover{ background:#f6f8fa; }
.df-order__opt.is-selected{ font-weight:700; }

/* Oculta visualmente el select nativo, pero accesible */
.woocommerce-ordering select.df-order__native{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Oculta el select nativo para que no capture clics */
.woocommerce-ordering .df-order__native{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Oculta sin romper animaciones */
.df-order__native { position: absolute !important; opacity: 0; pointer-events: none; }

.df-order__list{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* opcional: ayuda al rendering */
  will-change: opacity, transform;
}

.df-order.is-open .df-order__list{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* si ya tenías display:none/block, elimínalos */

/* ============================================================
   LOOP – Overlay de acciones (desktop)
   ============================================================ */

/* La tarjeta permite posicionar el overlay */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  position:relative;
  overflow:visible;
}

/* Overlay centrado (invisible por defecto) */
.df-card-actions{
  
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%) scale(.96);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:5;

  display:grid; gap:0;
  width:60%;                /* o fija: 220px */
  //max-width:260px;
  //min-width:200px;
  
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  
  opacity: 0;
  border-radius: 15px;
}

/* Fila superior (dos botones) */
.df-card-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  //gap:10px;
  
  gap:1px;
}

/* Botones cuadrados (carrito / wishlist) */
.df-card-btn{
  //height:64px;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid #e9edf3; //border-radius:14px; 
  //box-shadow:0 12px 28px rgba(0,0,0,.12);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  
  border-radius: 0px;
  border-top-left-radius: 10px;
}
  .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
    background: #fff;
    border-radius: 0px;
    border-top-left-radius: 10px;
    
    margin: 0 !important;
    
    border-right: 1px solid #e9ecef;
  }
  /* =====================================================================
   YITH WISHLIST PRODUCT
   ===================================================================== */
  .yith-add-to-wishlist-button-block{margin: .2rem auto;}

  
  /* SINGLE — Wishlist inline, ahora como fila superior sobre qty + botón */
  .df-product .df-summary form.cart .df-wish-inline{
    /* Ocupa toda la fila y va primero */
    order: -10;
    flex: 0 0 100%;
    margin-bottom: 0;
  
    display: flex;
    align-items: center;
    gap: .5rem;            /* por si en el futuro agregas texto/contador */
  }
  
  /* Botón/icono compacto del wishlist (igual estilo que antes) */
  .df-product .df-summary .df-wish-inline .yith-wcwl-add-to-wishlist a{
    width:56px; height:56px;
    display:flex; align-items:center; justify-content:center;
    background:#fff;
    border:1px solid #e9edf3; border-radius:14px;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .df-product .df-summary .df-wish-inline .yith-wcwl-add-to-wishlist a:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(0,0,0,.15);
    border-color:#dfe5ec;
  }
  
  /* Oculta cualquier etiqueta textual que meta YITH dentro del <a> */
  .df-product .df-summary .df-wish-inline .yith-wcwl-add-to-wishlist a > span{
    display:none !important;
  }
  
  /* Tooltip “globito” ya se activa con .df-tip[data-tip] desde tu CSS */
  
  /* Ajuste en móvil: un pelín más pequeño */
  @media (max-width:600px){
    .df-product .df-summary .df-wish-inline .yith-wcwl-add-to-wishlist a{
      width:48px; height:48px; border-radius:12px;
    }
  }

.df-card-btn:hover{
  background: #fff !important;
  color: #40c6c2;
  //transform:translateY(-2px);
  //box-shadow:0 16px 34px rgba(0,0,0,.17);
  border-color:#dfe5ec;
}

/* Botón inferior: "Ver producto" (ocupa 2 columnas) */
.df-card-view{
  grid-column:1 / span 1;
  //height:56px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  //border:1px solid #e9edf3; //border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  font-weight:700; color:#111; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  
  border-top: 1px solid #e9ecef;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  font-size: 1.1rem;
  font-weight: 500;
  height: auto;
  padding: 1.1rem;
}
.df-card-view:hover{
  //transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.17);
  border-color:#dfe5ec;
  color: #40c6c2;
}

/* Mostrar overlay en hover */
.woocommerce ul.products li.product:hover .df-card-actions{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}

/* ===== Iconos (si usas los embebidos) ===== */
/* Base común para iconos */
.df-icon{
  display:inline-block;
  width:24px; height:24px;
  color:#111;                 /* color por defecto del contorno */
  transition: color .2s ease;
}

/* Bolsa: máscara con solo stroke (sin fill) */
.df-icon--bag{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7V6a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7V6a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
  background-color: currentColor; /* el trazo toma este color */
}

/* Estados: hover y “añadido” */
.df-card-btn:hover .df-icon--bag{ color:rgb(54, 72, 85); }           /* ejemplo: blanco al pasar */
.df-card-btn.added .df-icon--bag,
a.added .df-icon--bag{ color:#40c6c2; }                   /* ejemplo: turquesa al añadir */

/* Estado persistente: ya en carrito */
.df-card-btn.is-in-cart .df-icon--bag,
a.is-in-cart .df-icon--bag{
  color:rgb(54, 72, 85);               /* mismo color que usas para “added” */
}



/* YITH: formatea el anchor como botón cuadrado del overlay y oculta su texto */
.df-card-btn--wish,
.df-card-btn--wish a,
.df-card-btn--wish .add_to_wishlist,
.df-card-btn--wish .yith-wcwl-icon{
  height:64px; width:100%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0;
}
.df-card-btn--wish a{
  background:#fff !important;
  border:1px solid #e9edf3 !important; border-radius:14px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.12) !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  text-decoration:none !important;
  padding:0 !important; min-height:64px !important;
}
.df-card-btn--wish a:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.17) !important;
  border-color:#dfe5ec !important;
}
.yith-wcwl-add-to-wishlist a span{ display:none !important; } /* oculta el texto del plugin */

/* Utilidad accesible para texto oculto */
.sr-only{
  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;
}

/* Móvil: no mostramos overlay ni botones de compra en el loop */
@media (max-width: 991.98px){
  .df-card-actions{ display:none !important; }
  ul.products li.product a.button,
  ul.products li.product .added_to_cart{ display:none !important; }
}

/* ============================================================
   Tooltips (burbuja negra con piquito) – solo dispositivos con hover
   ============================================================ */
@media (hover:hover){
  .df-tip[data-tip],
  .df-card__btn--cart[data-tip],
  .df-card-btn--cart[data-tip],
  .yith-wcwl-add-to-wishlist a[data-tip]{ position:relative; }

  .df-tip[data-tip]::before,
  .df-tip[data-tip]::after,
  .df-card__btn--cart[data-tip]::before,
  .df-card__btn--cart[data-tip]::after,
  .df-card-btn--cart[data-tip]::before,
  .df-card-btn--cart[data-tip]::after,
  .yith-wcwl-add-to-wishlist a[data-tip]::before,
  .yith-wcwl-add-to-wishlist a[data-tip]::after{
    position:absolute; left:50%;
    transform:translate(-50%, -8px);
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none; z-index:60;
  }

  /* Burbuja */
  .df-tip[data-tip]::before,
  .df-card__btn--cart[data-tip]::before,
  .df-card-btn--cart[data-tip]::before,
  .yith-wcwl-add-to-wishlist a[data-tip]::before{
    content:attr(data-tip);
    bottom:100%;
    background:#111; color:#fff;
    padding:.5rem .75rem; border-radius:.6rem;
    white-space:nowrap; font-size:.95rem; line-height:1;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  /* Piquito */
  .df-tip[data-tip]::after,
  .df-card__btn--cart[data-tip]::after,
  .df-card-btn--cart[data-tip]::after,
  .yith-wcwl-add-to-wishlist a[data-tip]::after{
    content:"";
    bottom:calc(100% - 6px);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #111;
    width:0; height:0;
  }

  /* Mostrar en hover / focus teclado */
  .df-tip[data-tip]:hover::before,
  .df-tip[data-tip]:hover::after,
  .df-tip[data-tip]:focus-visible::before,
  .df-tip[data-tip]:focus-visible::after,
  .df-card__btn--cart[data-tip]:hover::before,
  .df-card__btn--cart[data-tip]:hover::after,
  .df-card__btn--cart[data-tip]:focus-visible::before,
  .df-card__btn--cart[data-tip]:focus-visible::after,
  .df-card-btn--cart[data-tip]:hover::before,
  .df-card-btn--cart[data-tip]:hover::after,
  .df-card-btn--cart[data-tip]:focus-visible::before,
  .df-card-btn--cart[data-tip]:focus-visible::after,
  .yith-wcwl-add-to-wishlist a[data-tip]:hover::before,
  .yith-wcwl-add-to-wishlist a[data-tip]:hover::after,
  .yith-wcwl-add-to-wishlist a[data-tip]:focus-visible::before,
  .yith-wcwl-add-to-wishlist a[data-tip]:focus-visible::after{
    opacity:1; visibility:visible; transform:translate(-50%, -12px);
  }
}
/* Sin hover (móviles): ocultar tooltips */
@media (hover:none){
  .df-tip[data-tip]::before,
  .df-tip[data-tip]::after{ display:none !important; }
}

/* ===========================
   LOOP – Limpieza de textos
   =========================== */

/* 1) Woo: oculta el enlace “Ver carrito” que inserta tras el botón AJAX */
ul.products li.product .added_to_cart { 
  display: none !important;
}

/* 2) YITH: oculta cualquier texto visible en el botón/estados y los feedbacks */
.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-add-to-wishlist a span,
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button span,
.yith-wcwl-wishlistaddedbrowse a span,
.yith-wcwl-wishlistexistsbrowse a span {
  display: none !important;
}

/* Evita que el link del wishlist se deforme por textos ocultos */
.df-card-btn--wish a { overflow: hidden; }

/* Si el tema metiera un “tooltip” propio por title, lo quitamos por JS, pero por si acaso: */
.woocommerce ul.products li.product a[title] { /* no estilos, solo recordatorio */ }

/* Mantén centrados los tres botones aunque el plugin intente meter contenido */
.df-card-row,
.df-card-btn,
.df-card-view { min-width: 0; }

/* ====== YITH en overlay: oculta cualquier texto que rompa el layout ====== */
.df-card-actions .yith-wcwl-add-to-wishlist .feedback,
.df-card-actions .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
.df-card-actions .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse,
.df-card-actions .yith-wcwl-add-to-wishlist .view-wishlist,
.df-card-actions .yith-wcwl-add-to-wishlist .yith-wcwl-icon + span { /* textos sueltos */
  display: none !important;
}

/* El ancla del corazón se queda como “botón” cuadrado */
.df-card-actions .yith-wcwl-add-to-wishlist a{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:64px;
  background:#fff; border:1px solid #e9edf3; border-radius:14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  text-decoration:none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.df-card-actions .yith-wcwl-add-to-wishlist a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.17);
  border-color:#dfe5ec;
}
/* Icono corazón (si no usas el del plugin) — ya lo controlas con tu regla ::before */
.df-card-actions .yith-wcwl-add-to-wishlist a > span { display:none !important; } /* textos internos del <a> */

/* ====== Tooltips (usa tu sistema de [data-tip]) ====== */
@media (hover:hover) {
  .df-tip[data-tip],
  .df-card__btn[data-tip],
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip] { position:relative; }
  .df-tip[data-tip]::before,
  .df-card__btn[data-tip]::before,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]::before,
  .df-tip[data-tip]::after,
  .df-card__btn[data-tip]::after,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]::after{
    position:absolute; left:50%; transform:translate(-50%, -8px);
    opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
    pointer-events:none; z-index:60;
  }
  .df-tip[data-tip]::before,
  .df-card__btn[data-tip]::before,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]::before{
    content:attr(data-tip);
    bottom:100%; background:#111; color:#fff;
    padding:.5rem .75rem; border-radius:.6rem; white-space:nowrap; font-size:.95rem; font-weight: 500; line-height:1;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  .df-tip[data-tip]::after,
  .df-card__btn[data-tip]::after,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]::after{
    content:""; bottom:calc(100% - 6px);
    border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #111;
    width:0; height:0;
  }
  .df-tip[data-tip]:hover::before,
  .df-tip[data-tip]:hover::after,
  .df-tip[data-tip]:focus-visible::before,
  .df-tip[data-tip]:focus-visible::after,
  .df-card__btn[data-tip]:hover::before,
  .df-card__btn[data-tip]:hover::after,
  .df-card__btn[data-tip]:focus-visible::before,
  .df-card__btn[data-tip]:focus-visible::after,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]:hover::before,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]:hover::after,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]:focus-visible::before,
  .df-card-actions .yith-wcwl-add-to-wishlist a[data-tip]:focus-visible::after{
    opacity:1; visibility:visible; transform:translate(-50%, -12px);
  }
}

/* ====== Toast “añadido al carrito” ====== */
.df-toast{
  position:fixed; left:50%; top:50%; transform:translate(-50%, -10px);
  background:#fff; color:#111; border:1px solid #e9edf3; border-radius: 10px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  padding:1.85rem 1.8rem; z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  font-size:1.45rem; font-weight: 500; line-height:1.25;
}

/* ---------- df-toast con icono superior ---------- */
.df-toast{
  /* mantiene tu posición/animación existentes */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: left;         /* el texto queda normal */
  max-width: min(720px, 92vw);
}

.df-toast__icon{
  /* icono ≈ 1/4–1/5 del ancho, con límites */
  width: clamp(48px, 14%, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  border: 6px solid #40c6c2;     /* aro verde */
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin-top: .2rem;             /* un poco de aire arriba */
}

.df-toast__icon svg{
  width: 58%;
  height: 58%;
  display: block;
}

.df-toast__body{
  width: 100%;
}

.df-toast__msg{
  display: inline;  /* para que el link quede a la derecha del texto */
}


.df-toast.is-show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.df-toast__link{ margin-left:.5rem; font-weight:700; text-decoration:none; }

/* ———————————————————————————————
   YITH WISHLIST: esconder textos en el loop
   ——————————————————————————————— */

/* En cualquier tarjeta del loop */
ul.products li.product .yith-wcwl-add-to-wishlist .feedback,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist .view-wishlist,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-add-button > a > span,
/* a veces YITH imprime los "browse" como hermanos adyacentes */
ul.products li.product .yith-wcwl-add-to-wishlist + .yith-wcwl-wishlistaddedbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist + .yith-wcwl-wishlistexistsbrowse {
  display: none !important;
}

/* El ancla (corazón) sigue siendo un cuadrado limpio */
ul.products li.product .yith-wcwl-add-to-wishlist a {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:64px;
  background:#fff; border:1px solid #e9edf3; border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  text-decoration:none;
  position:relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
ul.products li.product .yith-wcwl-add-to-wishlist a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.17);
  border-color:#dfe5ec;
}

/* Si el plugin inyecta spans/textos dentro del <a>, los escondemos igual */
ul.products li.product .yith-wcwl-add-to-wishlist a > span{ display:none !important; }

/* Por si quedara algún espacio residual */
ul.products li.product .yith-wcwl-add-to-wishlist{ overflow:hidden; }


/* Ocultar cualquier texto del botón de wishlist SOLO en las tarjetas del loop */
ul.products li.product .yith-wcwl-add-to-wishlist-button__label,
ul.products li.product .yith-wcwl-add-to-wishlist .feedback,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist .view-wishlist,
ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-add-button > a > span,
/* por si YITH imprime los “browse” como hermanos adyacentes */
ul.products li.product .yith-wcwl-add-to-wishlist + .yith-wcwl-wishlistaddedbrowse,
ul.products li.product .yith-wcwl-add-to-wishlist + .yith-wcwl-wishlistexistsbrowse{
  display: none !important;
}

/* ============================================================
   WISHLIST – Globito "Añadir a favoritos" (solo cuando NO está en lista)
   Adaptado a YITH v4: .yith-add-to-wishlist-button-block + <a.yith-wcwl-add-to-wishlist-button>
   ============================================================ */
@media (hover:hover){

  /* El ancla del corazón sirve de anclaje para el tooltip */
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button{
    position: relative;
  }

  /* Burbuja + piquito (oculta por defecto) */
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button::before,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button::after{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 60;
  }
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button::before{
    content: "Añadir a favoritos";
    bottom: 100%;
    background: #111;
    color: #fff;
    padding: .5rem .75rem;
    border-radius: .6rem;
    white-space: nowrap;
    font-size: .95rem;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
  }
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button::after{
    content: "";
    bottom: calc(100% - 6px);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #111;
    width: 0; height: 0;
  }

  /* Mostrar al pasar el mouse / focus teclado */
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button:hover::before,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button:hover::after,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button:focus-visible::before,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button:focus-visible::after{
    opacity: 1; visibility: visible; transform: translate(-50%, -12px);
  }

  /* -------- Mostrar SOLO cuando NO está en favoritos --------
     YITH cambia el SVG a "heart" cuando está añadido, o añade modificadores "--added/--exists".
     Con :has() lo detectamos y escondemos el globito en esos casos. */
  @supports selector(:has(*)){
    /* corazón relleno → ya está en wishlist */
    .df-card-actions .yith-add-to-wishlist-button-block:has(#yith-wcwl-icon-heart) a.yith-wcwl-add-to-wishlist-button::before,
    .df-card-actions .yith-add-to-wishlist-button-block:has(#yith-wcwl-icon-heart) a.yith-wcwl-add-to-wishlist-button::after{
      content: none;
    }
  }
  /* Si YITH usa modificadores en el <a> (seguridad extra) */
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button--added::before,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button--added::after,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button--exists::before,
  .df-card-actions .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button--exists::after{
    content: none;
  }
}

/* Oculta cualquier etiqueta de texto que YITH deje dentro del botón (ya lo haces, reforzamos en contexto del overlay) */
.df-card-actions .yith-wcwl-add-to-wishlist-button__label{ display: none !important; }

/* ==== Listados: ocultar cualquier .onsale nativo por si algún theme lo pinta igual ==== */
body.post-type-archive-product .onsale,
body.tax-product_cat .onsale,
body.tax-product_tag .onsale { display: none !important; }

/* ==== Badge de % en listados ==== */
.onsale-discount{
  position: absolute;
  z-index: 100;
  top: 10px;
  right: auto;
  width: auto;
  left: 10px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #40c6c2;
  color: #fff;
  font-weight: 700;
  padding: .4rem 1.0rem;
  font-size: 1.15rem;
  letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(64,198,194,.35);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px){
  .onsale-discount{ width:52px; height:52px; font-size:.95rem; }
}

/* ==== Single: % encima del precio ==== */
.product .df-single-discount{
  display:inline-block;
  margin:0 0 .35rem;
  padding: .4rem 1.0rem;
  border-radius: 6px;
  background:#40c6c2;
  color:#fff;
  font-weight:700;
  font-size: 1.25rem;
  vertical-align:middle;
}

/* ============================================================
   PAGINACIÓN WOOCOMMERCE
   ============================================================ */

.woocommerce nav.woocommerce-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 55px 0 30px;
  padding: 0;
  clear: both;
}

.woocommerce nav.woocommerce-pagination ul{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  list-style: none;
  white-space: nowrap;
}

.woocommerce nav.woocommerce-pagination ul li{
  float: none;
  display: block;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  margin: 0;

  border: 1px solid #d8e0e5;
  border-radius: 12px;
  background: #fff;

  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;

  color: #344955;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

/* Hover */
.woocommerce nav.woocommerce-pagination ul li a:hover{
  color: #fff;
  background: #40c6c2;
  border-color: #40c6c2;
  box-shadow: 0 8px 20px rgba(64,198,194,.22);
  transform: translateY(-1px);
}

/* Página actual */
.woocommerce nav.woocommerce-pagination ul li span.current{
  color: #fff;
  background: #40c6c2;
  border-color: #40c6c2;
  box-shadow: 0 8px 20px rgba(64,198,194,.22);
}

/* Flechas siguiente/anterior */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev{
  min-width: 46px;
  font-size: 0;
}

/* Flecha siguiente */
.woocommerce nav.woocommerce-pagination ul li a.next::after{
  content: "→";
  font-size: 1.8rem;
  line-height: 1;
}

/* Flecha anterior */
.woocommerce nav.woocommerce-pagination ul li a.prev::after{
  content: "←";
  font-size: 1.8rem;
  line-height: 1;
}

/* Puntos suspensivos */
.woocommerce nav.woocommerce-pagination ul li span.dots{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #91a0aa;
  min-width: 28px;
  padding: 0 4px;
}

/* Responsive */
@media screen and (max-width: 800px){

  .woocommerce nav.woocommerce-pagination{
    margin: 40px 0 20px;
    padding: 0 12px;
  }

  .woocommerce nav.woocommerce-pagination ul{
    gap: 6px;
  }

  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span{
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 1.25rem;
  }
}

/* ============================================================
   LOOP PRODUCTOS: tarjetas con el mismo alto
   ============================================================ */

/* La grilla estira todas las tarjetas de una misma fila */
.woocommerce ul.products{
  align-items: stretch;
}

/* Tarjeta */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  border: 1px solid #d7e0e9;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 390px;
}

/* Enlace principal ocupa toda la tarjeta */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

/* Área de imagen uniforme */
.woocommerce ul.products li.product a img{
  width: 100%;
  height: 245px;
  object-fit: contain;
  object-position: center;
  margin: 0 0 18px !important;
}

/* Marca siempre alineada */
.woocommerce ul.products li.product .df-loop-brand{
  min-height: 24px;
  margin-top: auto;
}

/* Reserva dos líneas para el nombre */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  margin: 4px 0 0;
}

/* Tablet */
@media (max-width: 991px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    min-height: 360px;
  }

  .woocommerce ul.products li.product a img{
    height: 215px;
  }
}

/* Móvil */
@media (max-width: 600px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    min-height: 310px;
  }

  .woocommerce ul.products li.product a img{
    height: 175px;
    margin-bottom: 12px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    min-height: 52px;
  }
}


/* ============================================================
   SINGLE PRODUCT: botón WhatsApp
   ============================================================ */

.df-whatsapp-product{
  width:100%;
  margin:2.25rem 0 2.5rem;
}

.df-whatsapp-product__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;

  width:100%;
  min-height:58px;
  padding:.85rem 1.25rem;

  background:#25d366;
  color:#fff !important;
  border:1px solid #25d366;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(37,211,102,.18);

  font-family:"Poppins", sans-serif;
  font-size: 1.6rem;
  font-weight:600;
  line-height:1;
  text-decoration:none !important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.df-whatsapp-product__btn i{
  font-size:1.65rem;
  line-height:1;
}

.df-whatsapp-product__btn:hover{
  background:#128c4a;
  border-color:#128c4a;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(18,140,74,.24);
}

.df-whatsapp-product__btn:focus-visible{
  outline:3px solid rgba(37,211,102,.28);
  outline-offset:3px;
}

@media (max-width:600px){
  .df-whatsapp-product__btn{
    min-height:54px;
    font-size:1.1rem;
  }
}

/* ============================================================
   CHECKOUT CLÁSICO - DERMATOLOGÍA FISCHER
   ============================================================ */

.woocommerce-checkout{
  font-family: "Poppins", sans-serif;
  color: #212529;
}

/* Contenedor */
.woocommerce-checkout .woocommerce{
  max-width: 1400px;
  margin: 0 auto;
}

/* Título */
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title{
  font-size: 2.6em;
  font-weight: 700;
  margin-bottom: 35px;
  color: #212529;
}

/* ============================================================
   CUPÓN
   ============================================================ */

.woocommerce-form-coupon-toggle .woocommerce-info{
  background: #f7f9fa;
  border: 1px solid #e5eaed;
  border-radius: 14px;
  padding: 16px 20px;
  color: #354a58;
  margin-bottom: 30px;
}

.woocommerce-form-coupon-toggle .woocommerce-info:before{
  color: #40c6c2;
}

.woocommerce-form-coupon-toggle a{
  color: #40c6c2;
  font-weight: 600;
}


/* ============================================================
   COLUMNAS CHECKOUT
   ============================================================ */

/* #customer_details NO debe ser un grid de 2 columnas.
   Sus .col-1 y .col-2 se apilan dentro de la columna izquierda. */
.woocommerce-checkout #customer_details{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  width: 100%;
  float: none;
  background: #fff;
  border: 1px solid #d7e0e9;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(31, 48, 58, .05);
}

/* títulos */
.woocommerce-checkout h3{
  font-size: 1.65em;
  font-weight: 700;
  color: #212529;
  margin: 0 0 25px;
}


/* ============================================================
   CAMPOS
   ============================================================ */

.woocommerce-checkout .form-row{
  margin-bottom: 16px;
}

.woocommerce-checkout .form-row label{
  display: block;
  font-size: .9em;
  font-weight: 600;
  color: #354a58;
  margin-bottom: 7px;
}

.woocommerce-checkout .form-row label .required{
  color: #40c6c2;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single{
  width: 100%;
  min-height: 48px;
  border: 1px solid #d9e1e5;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-family: "Poppins", sans-serif;
  font-size: .95em;
  color: #212529;
  box-shadow: none;
  transition: .2s ease;
}


.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 17px !important;}

.woocommerce-checkout textarea{
  min-height: 100px;
  resize: vertical;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  border-color: #40c6c2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64,198,194,.12);
}


/* Select2 */
.woocommerce-checkout .select2-container .select2-selection--single{
  height: 48px;
}

.woocommerce-checkout .select2-container--default
.select2-selection--single .select2-selection__rendered{
  line-height: 27px;
  padding-left: 0;
}

.woocommerce-checkout .select2-container--default
.select2-selection--single .select2-selection__arrow{
  height: 46px;
  right: 8px;
}


/* ============================================================
   PEDIDO
   ============================================================ */

.woocommerce-checkout #order_review_heading{
  margin-top: 20px;
  font-size: 1.8em;
}

.woocommerce-checkout #order_review{
  background: #fff;
  border: 1px solid #d7e0e9;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 35px rgba(31,48,58,.06);
  margin-bottom: 40px;
}

.woocommerce-checkout-review-order-table{
  border: 0 !important;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding: 17px 12px !important;
  border-color: #edf0f2 !important;
}

.woocommerce-checkout-review-order-table thead th{
  font-weight: 600;
  color: #354a58;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  font-size: 1.15em;
  font-weight: 700;
}


/* ============================================================
   CHILEXPRESS
   ============================================================ */

.woocommerce-checkout ul#shipping_method{
  margin: 0;
  padding: 0;
}

.woocommerce-checkout ul#shipping_method li{
  list-style: none;
  background: #f8fafb;
  border: 1px solid #e3e9ec;
  border-radius: 12px;
  padding: 15px 18px;
  margin: 8px 0;
}

.woocommerce-checkout ul#shipping_method li:has(input:checked){
  border-color: #40c6c2;
  background: rgba(64,198,194,.06);
}

.woocommerce-checkout ul#shipping_method input[type="radio"]{
  accent-color: #40c6c2;
  margin-right: 8px;
}


/* ============================================================
   PAGO
   ============================================================ */

.woocommerce-checkout #payment{
  background: #f8fafb !important;
  border: 1px solid #d7e0e9;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 25px;
}

.woocommerce-checkout #payment ul.payment_methods{
  padding: 20px !important;
  border-bottom: 1px solid #e5eaed;
}

.woocommerce-checkout #payment ul.payment_methods li{
  list-style: none;
}

.woocommerce-checkout #payment .payment_box{
  background: #fff !important;
  border-radius: 10px;
  margin-top: 15px !important;
  color: #354a58;
}

.woocommerce-checkout #payment .payment_box:before{
  display: none;
}

.woocommerce-checkout #payment .place-order{
  padding: 20px !important;
}


/* ============================================================
   BOTÓN FINAL
   ============================================================ */

.woocommerce-checkout #place_order{
  width: 100%;
  background: #40c6c2;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 16px 25px;
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  font-weight: 600;
  transition: .2s ease;
}

.woocommerce-checkout #place_order:hover{
  background: #00a68c;
  color: #fff;
}


/* ============================================================
   CHECKBOX / RADIO
   ============================================================ */

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"]{
  accent-color: #40c6c2;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 991px){

  .woocommerce-checkout #customer_details{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2{
    padding: 22px;
  }

  .woocommerce-checkout h1,
  .woocommerce-checkout .entry-title{
    font-size: 2em;
  }

  .woocommerce-checkout #order_review{
    padding: 20px;
  }
}

@media screen and (max-width: 600px){

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout #order_review{
    border-radius: 14px;
    padding: 18px;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{
    width: 100% !important;
    float: none !important;
  }

  .woocommerce-checkout h3{
    font-size: 1.4em;
  }
}

/* ============================================================
   CHECKOUT — ESTRUCTURA 2 COLUMNAS
   SOLO LAYOUT. NO MODIFICA LA ESTÉTICA DEL BLOQUE BASE.
   ============================================================ */

@media screen and (min-width: 992px){

  /* Los 3 hijos directos son:
     #customer_details
     #order_review_heading
     #order_review
  */
  form.checkout.woocommerce-checkout{
    display:grid !important;
    grid-template-columns:minmax(0, 56%) minmax(0, 44%) !important;
    grid-template-rows:auto auto !important;
    column-gap:35px !important;
    align-items:start !important;
  }

  /* IZQUIERDA: todos los datos del comprador */
  form.checkout.woocommerce-checkout > #customer_details{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    float:none !important;
    clear:none !important;
    margin:0 !important;
  }

  /* Facturación arriba */
  .woocommerce-checkout #customer_details > .col-1{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    clear:both !important;
  }

  /* "Enviar a una dirección diferente" + notas,
     DEBAJO de facturación, en la misma columna izquierda */
  .woocommerce-checkout #customer_details > .col-2{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    clear:both !important;
    margin-top:25px !important;
  }

  /* DERECHA: título */
  form.checkout.woocommerce-checkout > #order_review_heading{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    float:none !important;
    clear:none !important;
    align-self:end !important;
    margin-top:0 !important;
  }

  /* DERECHA: resumen + envío + pago + botón */
  form.checkout.woocommerce-checkout > #order_review{
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    float:none !important;
    clear:none !important;
    margin-top:0 !important;
  }

  /* Neutraliza clearfix del col2-set sin tocar su aspecto */
  .woocommerce-checkout #customer_details.col2-set::before,
  .woocommerce-checkout #customer_details.col2-set::after{
    content:"" !important;
    display:table !important;
    clear:both !important;
  }
}

/* En tablet/móvil se mantiene el comportamiento apilado del CSS base */
@media screen and (max-width: 991px){
  form.checkout.woocommerce-checkout{
    display:block !important;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{
    width:100% !important;
    float:none !important;
    clear:both !important;
  }
}

/* ============================================================
   CHECKOUT - ALINEACIÓN SUPERIOR COLUMNA DERECHA
   ============================================================ */

@media screen and (min-width: 992px){

    /* Una sola fila principal */
    form.checkout.woocommerce-checkout{
        display:grid !important;
        grid-template-columns:minmax(0, 56%) minmax(0, 44%) !important;
        grid-template-rows:1fr !important;
        column-gap:35px !important;
        align-items:start !important;
    }

    /* IZQUIERDA */
    form.checkout.woocommerce-checkout > #customer_details{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:start !important;
    }

    /* TÍTULO DERECHA */
    form.checkout.woocommerce-checkout > #order_review_heading{
        grid-column:2 !important;
        grid-row:1 !important;

        align-self:start !important;

        margin:0 0 20px !important;
        padding:0 !important;

        position:relative;
        z-index:2;
    }

    /* RESUMEN + ENVÍO + PAGO */
    form.checkout.woocommerce-checkout > #order_review{
        grid-column:2 !important;
        grid-row:1 !important;

        align-self:start !important;

        /* solo deja espacio para el título */
        margin:55px 0 0 !important;
    }
}

/* ============================================================
   CHECKOUT - ORDEN CAMPOS FACTURACIÓN DESKTOP / MOBILE
   ============================================================ */

/* Ocultar país */
#billing_country_field{
  display:none !important;
}

/* Desktop */
@media screen and (min-width: 992px){

  .woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper{
    display:grid !important;
    grid-template-columns:repeat(10, minmax(0, 1fr));
    column-gap:20px;
    row-gap:0;
  }

  /* Reset para que grid mande */
  .woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper > .form-row{
    width:auto !important;
    float:none !important;
    clear:none !important;
    margin:0 0 16px !important;
  }

  /* Nombre / Apellido = 50 / 50 */
  #billing_first_name_field{
    grid-column:1 / 6;
  }

  #billing_last_name_field{
    grid-column:6 / 11;
  }

  /* Región / Población = 50 / 50 */
  #billing_state_field{
    grid-column:1 / 6;
  }

  #billing_city_field{
    grid-column:6 / 11;
  }

  /* Calle / Número = 70 / 30 */
  #billing_address_1_field{
    grid-column:1 / 8;
  }

  #billing_address_2_field{
    grid-column:8 / 11;
  }
  #billing_address_2_field .screen-reader-text{
    /* word-wrap: normal!important; */
    /* border: 0; */
    clip-path: none !important;
    height: auto !important;
    /* margin: -1px; */
    /* overflow: hidden; */
    /* padding: 0; */
    position: relative !important;
    width: 100% !important;
  }

  /* Complemento = 100% */
  #billing_address_3_field{
    grid-column:1 / 11;
  }

  /* Teléfono / Email = 50 / 50 */
  #billing_phone_field{
    grid-column:1 / 6;
  }

  #billing_email_field{
    grid-column:6 / 11;
  }

  /* Select2 siempre al ancho de su celda */
  #billing_state_field .select2-container,
  #billing_city_field .select2-container{
    width:100% !important;
  }

  /* Corrige el width inline que Chilexpress mete en población */
  #billing_city_field .select2-container{
    max-width:100% !important;
  }
}

/* Mobile / tablet: todo ancho completo */
@media screen and (max-width: 991px){

  .woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper{
    display:block !important;
  }

  .woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper > .form-row{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    clear:both !important;
    margin:0 0 16px !important;
  }

  .woocommerce-checkout
  .woocommerce-billing-fields__field-wrapper .select2-container{
    width:100% !important;
  }
}