/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Tema hijo de Astra para personalizaciones seguras.
 Author: Tu Nombre
 Author URI: https://tusitio.com/
 Template: astra
 Version: 1.0.0
 Text Domain: astra-child
*/

/* =========================
   CATEGORÍAS – look moderno
   (sin cambiar tu HTML)
   ========================= */

/* contenedor (deja tu grid tal cual) */
.dyt-circulos{
  gap: 28px;
}

/* círculo */
.dyt-circulos .circle{
  position: relative;
  border-radius: 999px;
  /* color base (fallback) */
  background-color: var(--dyt-bg, #3BA9FF) !important;

  /* degradé y brillo */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(165deg,
      var(--dyt-bg, #3BA9FF),
      color-mix(in srgb, var(--dyt-bg, #3BA9FF) 78%, #0b1324)
    ) !important;

  box-shadow: 0 12px 28px rgba(15,23,42,.14) !important;
  border: 1px solid rgba(255,255,255,.35) !important;

  display:flex; align-items:center; justify-content:center;
  width: var(--dyt-size,220px); height: var(--dyt-size,220px);
  margin: 0 auto 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* brillo superior */
.dyt-circulos .circle::before{
  content:"";
  position:absolute; inset:0 0 55% 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.28), transparent);
  pointer-events:none;
}

/* anillo suave */
.dyt-circulos .circle::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius: inherit;
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
  opacity:.85; pointer-events:none;
}

/* imagen/ícono (sin padding, más “limpio”) */
.dyt-circulos .circle img{
  width: 78% !important;
  height: 78% !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
  transition: transform .28s cubic-bezier(.2,.7,.2,1), filter .28s;
}

/* título y cta */
.dyt-circulos .circle-title{
  margin:.25rem 0 0 !important;
  font-weight: 800 !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  letter-spacing:.4px;
  color:#0f172a;
  transition: transform .2s ease, opacity .2s ease;
}
.dyt-circulos .circle-cta{
  margin-top:4px !important;
  font-size:13px !important;
  color:#334155 !important;
  opacity:.78;
}

/* hover / focus: levita + zoom sutil del ícono */
.dyt-circulos .circle-link:hover .circle,
.dyt-circulos .circle-link:focus .circle{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(15,23,42,.2);
  filter: saturate(1.04);
}
.dyt-circulos .circle-link:hover .circle img,
.dyt-circulos .circle-link:focus .circle img{
  transform: scale(1.06);
}
.dyt-circulos .circle-link:hover .circle-title{
  transform: translateY(-1px); opacity:.96;
}

/* accesibilidad: aro al focus visible del link */
.dyt-circulos .circle-link:focus-visible{
  outline: 3px solid #94caff; border-radius: 16px;
}

/* móvil compacto (ajusta si quieres) */
@media (max-width: 600px){
  .dyt-circulos{ gap:18px; }
  .dyt-circulos .circle{
    width: 110px !important; height: 110px !important;
  }
  .dyt-circulos .circle img{ width:82% !important; height:82% !important; }
  .dyt-circulos .circle-title{ font-size:13px !important; }
}

/* ==============================================
   TARJETAS WOOCOMMERCE (listados / shop / loop)
   ============================================== */
.woocommerce ul.products{ display:grid; gap:20px; }
.woocommerce ul.products li.product{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:20px;
  padding:16px; overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.woocommerce ul.products li.product a img{
  width:100%; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product a img:hover{ transform:scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-weight:700; margin-top:6px; }
.woocommerce ul.products li.product .price{ margin-top:4px; font-weight:800; }
.woocommerce ul.products li.product del{ color:#64748b; }
.woocommerce ul.products li.product .ast-on-card-button{ display:none !important; }

/* Botón añadir al carrito */
.woocommerce ul.products li.product .button{
  position:relative; display:inline-block; width:100%;
  padding:12px 18px; border:2px solid #3BA9FF; border-radius:30px;
  background:transparent; color:#3BA9FF; font-weight:700; text-align:center;
  overflow:hidden; transition:color .3s ease, transform .2s ease, box-shadow .2s ease;
  z-index:1; margin-top:auto;
}
.woocommerce ul.products li.product .button::before{
  content:""; position:absolute; top:2px; left:2px; right:2px; bottom:2px;
  background:#3BA9FF; border-radius:28px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease; z-index:-1;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus{
  color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,169,255,.35);
}
.woocommerce ul.products li.product .button:hover::before,
.woocommerce ul.products li.product .button:focus::before{ transform:scaleX(1); }
.woocommerce ul.products li.product .button.disabled,
.woocommerce ul.products li.product .button:disabled{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
  color:#fff; border-color:#ccc;
}
.woocommerce ul.products li.product .button.disabled::before,
.woocommerce ul.products li.product .button:disabled::before{
  transform:none; background:#ccc; border-radius:28px;
}
.woocommerce ul.products li.product .button:focus{ outline:0; box-shadow:0 0 0 3px rgba(59,169,255,.25); }
@media (max-width:600px){
  .woocommerce ul.products{ gap:14px; }
  .woocommerce ul.products li.product{ padding:14px; border-radius:18px; }
  .woocommerce ul.products li.product a img{ border-radius:14px; }
  .woocommerce ul.products li.product .button{ padding:13px 16px; border-radius:28px; }
}
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .button::before{ transition:none !important; }
}

/* ============================
   BUSCADOR HEADER – estilo pill
   ============================ */
.dyt-searchbar{
  width:100% !important; max-width:100% !important;
  margin:0 auto !important; box-sizing:border-box !important;
  position:relative !important;
}
.dyt-searchbar__inner{
  display:flex; align-items:center; width:100% !important; overflow:hidden !important;
  background:#e9e9e9; border-radius:999px !important; padding:6px 12px; gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.dyt-searchbar__cat{ position:relative; flex:0 0 auto !important; }
.dyt-searchbar__cat select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none !important; background-color:transparent !important;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 8px;
  color:#111 !important; font-size:15px; padding:10px 32px 10px 16px !important;
  border-radius:999px !important; box-shadow:none !important; outline:none !important; line-height:1; cursor:pointer;
  max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dyt-searchbar__cat::before{
  content:""; position:absolute; right:-12px; top:50%; transform:translateY(-50%);
  width:1px; height:28px; background:#d6d6d6;
}
.dyt-searchbar__input{
  flex:1 1 auto !important; min-width:0 !important; width:100% !important;
  height:44px; border:none !important; outline:none !important; background:transparent !important;
  color:#111 !important; font-size:16px; padding:0 8px !important;
  border-radius:999px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.dyt-searchbar__input::-webkit-search-cancel-button,
.dyt-searchbar__input::-webkit-search-decoration{ -webkit-appearance:none; }
.dyt-searchbar__btn{
  flex:0 0 auto !important; width:44px; height:44px; display:grid; place-items:center;
  border:none !important; background:transparent !important; border-radius:999px !important; cursor:pointer;
  transition:transform .2s ease, background-color .2s ease;
}
.dyt-searchbar__btn svg{ width:20px; height:20px; stroke:#111; }
.dyt-searchbar__btn:hover{ transform:translateY(-1px); background:rgba(0,0,0,.05); }
.dyt-searchbar__inner:has(input:focus),
.dyt-searchbar__inner:has(select:focus){ outline:2px solid #3BA9FF; outline-offset:2px; }
.dyt-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.12); z-index:99999;
}
.dyt-suggest__item{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  text-decoration:none; color:#111; transition:background .15s ease;
}
.dyt-suggest__item:hover{ background:#f3f4f6; }
.dyt-suggest__item img{ width:48px; height:48px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.dyt-suggest__title{ font-weight:600; font-size:14px; }
.dyt-suggest__price{ font-size:13px; color:#0ea5e9; margin-top:2px; }
.dyt-suggest__price del{ color:#9aa3b2; margin-right:.4rem; }
.dyt-suggest__price ins{ color:#0ea5e9; text-decoration:none; font-weight:700; }

.site-header, .ast-mobile-header-wrap, .ast-primary-header-bar{ overflow:visible !important; }
@media (max-width:920px){
  html, body{ overflow-x:hidden !important; }
  .ast-primary-header-bar .site-primary-header-wrap{
    display:grid !important; grid-template-columns:1fr !important; row-gap:10px !important;
    justify-items:center !important; align-items:center !important;
  }
  .ast-header-html-1, .ast-header-html-1 .ast-builder-html-element{ width:100% !important; }
  .dyt-searchbar__input{ height:42px; font-size:15px; }
  .dyt-searchbar__btn{ width:42px; height:42px; }
}

/* ==========================================
   SECCIÓN DESTACADA – Banner + Productos
   ========================================== */
.tds-section{ background:#fff; padding:3rem 0; }
.tds-wrap{
  max-width:1200px; margin:0 auto; padding:0 1rem;
  display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start;
}
@media (min-width:1024px){ .tds-wrap{ grid-template-columns:1fr 2fr; gap:2rem; } }

.tds-banner{ background:#009FE3; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; color:#fff; }
.tds-banner-img{ width:100%; height:220px; object-fit:cover; }
.tds-banner-body{ padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.tds-banner-title{ font-size:1.4rem; line-height:1.2; font-weight:700; margin:0; color:#fff; }
.tds-banner-text{ opacity:.95; margin:0; }
.tds-btn-yellow{ display:inline-block; background:#FFD600; color:#111; font-weight:700; padding:.8rem 1.1rem; border-radius:999px; text-align:center; text-decoration:none; }
.tds-btn-yellow:hover{ filter:brightness(1.05); }

/* GRID de productos */
.tds-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px){ .tds-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .tds-grid{ grid-template-columns:repeat(3,1fr); } }

/* Card */
.tds-card{
  border:1px solid #E6ECF8; border-radius:18px; padding:16px; background:#fff;
  display:flex; flex-direction:column; gap:.7rem;
  box-shadow:0 6px 18px rgba(13,38,76,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tds-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,38,76,.10); }
.tds-img-wrap{ display:block; width:100%; height:220px; }
.tds-img-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }
.tds-meta-cat{ font-size:.85rem; color:#7a8699; line-height:1; margin-top:.25rem; }
.tds-title{ font-size:1rem; font-weight:700; margin:.1rem 0 .25rem; }
.tds-title a{ color:#1f2937; text-decoration:none; }
.tds-title a:hover{ opacity:.9; }
.tds-price{ color:#111827; font-weight:800; font-size:1rem; }
.tds-price del{ color:#94a3b8; font-weight:600; margin-right:.35rem; }

.tds-btn-outline{
  display:block; width:100%; background:#fff; color:#1e66ff;
  border:2px solid #1e66ff; border-radius:999px; padding:.9rem 1rem;
  text-align:center; text-decoration:none; font-weight:700; margin-top:auto;
  box-shadow: inset 0 0 0 1px rgba(30,102,255,.12);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.tds-btn-outline:hover{ background:#eef5ff; box-shadow: inset 0 0 0 1px rgba(30,102,255,.2); }
.tds-card a.added_to_cart{ display:none !important; }
@media (max-width:640px){ .tds-img-wrap{ height:200px; } }

/* === Variables de color === */
:root{ --tds-accent:#3BA9FF; }

/* Card moderna */
.tds-card--modern{ border:1px solid #E6ECF8; border-radius:20px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:.7rem; box-shadow:0 6px 18px rgba(13,38,76,.06); transition:transform .18s ease, box-shadow .18s ease; }
.tds-card--modern:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,38,76,.10); }
.tds-img-wrap--big{ display:block; width:100%; height:240px; }
.tds-img-wrap--big img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }
@media (max-width:640px){ .tds-img-wrap--big{ height:210px; } }
.tds-title--clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.tds-price del{ color:#94a3b8; font-weight:600; margin-right:.35rem; }

.tds-btn-outline{
  position:relative; display:block; width:100%;
  padding:12px 18px; border:2px solid var(--tds-accent); border-radius:30px;
  background:transparent; color:var(--tds-accent); font-weight:700; text-align:center;
  overflow:hidden; transition:color .3s ease, transform .2s ease, box-shadow .2s ease;
  z-index:1; margin-top:auto; box-shadow:inset 0 0 0 1px rgba(59,169,255,.10);
}
.tds-btn-outline::before{
  content:""; position:absolute; top:2px; left:2px; right:2px; bottom:2px;
  background:var(--tds-accent); border-radius:28px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease; z-index:-1;
}
.tds-btn-outline:hover,
.tds-btn-outline:focus{
  color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,169,255,.35);
}
.tds-btn-outline:hover::before,
.tds-btn-outline:focus::before{ transform:scaleX(1); }
.tds-card a.added_to_cart{ display:none !important; }

/* Imagen a borde completo en destacados */
.tds-card--modern .tds-img-wrap{ display:block; width:100%; height:240px; border-radius:16px; overflow:hidden; }
.tds-card--modern .tds-img-wrap img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:inherit; }

@media (min-width:1024px){
  .tds-wrap{ display:grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items:start; }
  .tds-grid--featured{ align-self:center; max-width:1020px; margin-inline:auto; margin-top:12px; }
}
.tds-grid--featured{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){  .tds-grid--featured{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .tds-grid--featured{ grid-template-columns: repeat(3,1fr); } }

.tds-img-wrap .tds-badge{ position:absolute; top:12px; left:12px; z-index:2; }
.tds-badge--chip{
  --chip-bg:#E11D48; --chip-bg2:#F43F5E; --chip-tx:#fff;
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg,var(--chip-bg),var(--chip-bg2));
  color:var(--chip-tx); font-weight:800; line-height:1; font-size:.9rem; letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(225,17,72,.25); border:1px solid rgba(255,255,255,.25);
}
.tds-badge--chip::after{ content:""; position:absolute; inset:-6px; border-radius:999px; pointer-events:none; box-shadow:0 0 0 6px rgba(225,17,72,.08); }
.tds-meta-cat{ font-size:.85rem; color:#7a8699; line-height:1; margin-top:.2rem; }

@media (hover:hover){
  .tds-grid--featured .tds-card--modern .tds-img-wrap{ transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1); box-shadow: 0 6px 18px rgba(13,38,76,.06); will-change: transform; }
  .tds-grid--featured .tds-card--modern .tds-img-wrap img{ transition: transform .32s cubic-bezier(.2,.7,.2,1); will-change: transform; }
  .tds-grid--featured .tds-card--modern:hover .tds-img-wrap,
  .tds-grid--featured .tds-card--modern:focus-within .tds-img-wrap{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(13,38,76,.18); }
  .tds-grid--featured .tds-card--modern:hover .tds-img-wrap img,
  .tds-grid--featured .tds-card--modern:focus-within .tds-img-wrap img{ transform: scale(1.04); }
}

@keyframes tds-heartbeat {
  0%{ transform: translateY(var(--lift,0)) scale(1); }
  15%{ transform: translateY(var(--lift,0)) scale(1.08); }
  30%{ transform: translateY(var(--lift,0)) scale(0.98); }
  45%{ transform: translateY(var(--lift,0)) scale(1.10); }
  60%{ transform: translateY(var(--lift,0)) scale(1); }
  100%{ transform: translateY(var(--lift,0)) scale(1); }
}
@keyframes tds-pulse-ring {
  0%{ transform: scale(1); opacity:.22; }
  45%{ transform: scale(1.25); opacity:0; }
  100%{ transform: scale(1.25); opacity:0; }
}
.tds-badge--chip{ will-change: transform, filter; animation: tds-heartbeat 1.6s ease-in-out infinite; transform-origin:center; }
.tds-badge--chip::after{ animation: tds-pulse-ring 1.6s ease-in-out infinite; }
.tds-card--modern:hover .tds-badge--chip{ --lift:-1px; filter: brightness(1.03); }
@media (prefers-reduced-motion: reduce){
  .tds-badge--chip, .tds-badge--chip::after{ animation:none !important; }
}

/* CTA “Productos con descuentos” */
.tds-sale-cta{ max-width:1200px; margin:0 auto 18px; padding:0 1rem; display:flex; justify-content:center; }
.tds-sale-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px;
  background:linear-gradient(135deg,#E11D48,#F43F5E); color:#fff; font-weight:900; font-size:1rem; letter-spacing:.4px;
  text-decoration:none; box-shadow:0 12px 28px rgba(225,17,72,.28); transition: transform .06s ease, filter .15s ease, color .15s ease;
}
.tds-sale-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); color:var(--tds-accent) !important; }
.tds-sale-btn:active{ transform:translateY(0); }
.tds-sale-btn__emoji{ font-size:1.1rem; line-height:1; }
@media (max-width:480px){ .tds-sale-btn{ width:100%; justify-content:center; } }

.tds-sale-btn--brand{ background: linear-gradient(135deg, #009FE3, #3BA9FF); box-shadow: 0 12px 28px rgba(0,159,227,.28); color:#fff; }
.tds-sale-btn--brand:hover, .tds-sale-btn--brand:focus{ color:#fff !important; filter:brightness(1.05); transform:translateY(-1px); }
.tds-sale-btn--brand .tds-sale-btn__emoji{ color:#fff; }

/* ===================== HERO – LAYOUT ===================== */
/* Más ancho en desktop, sin tocar móvil */
.dyt-hero{
  max-width: 2100px;
  margin: 16px auto 28px;
  padding: 0 20px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px; /* slider / panel */
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 1800px){
  .dyt-hero{ grid-template-columns: minmax(0,1fr) 420px; }
}
@media (max-width: 1024px){
  .dyt-hero{ grid-template-columns: 1fr; padding-left:14px; padding-right:14px; gap:18px; }
}

/* ===================== SLIDER IZQUIERDA ===================== */
.dyt-hero__slider{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1220;
  min-height: 560px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@media (max-width: 1200px){ .dyt-hero__slider{ min-height: 500px; } }
@media (max-width: 1024px){ .dyt-hero__slider{ min-height: 420px; } }
@media (max-width: 520px){  .dyt-hero__slider{ min-height: 340px; } }

.dyt-hero__track{
  display: flex; height: 100%; width: 100%;
  transform: translateX(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.dyt-hero__slide{ flex: 0 0 100%; position: relative; }
.dyt-hero__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Dots centrados */
.dyt-hero__dots{
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 3;
}
.dyt-hero__dots button {
  width: 6px !important;      /* tamaño pequeño */
  height: 6px !important;     /* igual que el ancho */
  border-radius: 50% !important;  /* círculo perfecto */
  background: #cbd5e1 !important;
  border: none !important;
  padding: 0 !important;      /* evita que herede espacio */
  margin: 0 3px !important;   /* separación entre dots */
  cursor: pointer;
  transition: transform .16s, background .16s;
}

.dyt-hero__dots button.is-active {
  background: #006BFF !important;
  transform: scale(1.2);
}

/* ===================== PANEL DERECHO ===================== */
.dyt-hero__panel{
  background:#fffFFF; border-radius:20px; padding:16px;
  box-shadow:0 8px 28px rgba(15,23,42,.08);
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.dyt-hero__panel-top{ width:100%; display:flex; justify-content:space-between; align-items:center; }
.dyt-hero__menu{
  width:38px; height:34px; display:grid; align-content:center; gap:5px;
  background:#f1f5f9; border:none; border-radius:10px; cursor:pointer; padding:0 8px;
}
.dyt-hero__menu span{ display:block; height:2px; background:#111; border-radius:1px; }
.dyt-hero__hour{ font-size:14px; color:#0f172a; display:flex; align-items:center; gap:8px; }
.dyt-hero__hour .dot{ width:6px; height:6px; background:#22c55e; border-radius:999px; display:inline-block; }
.dyt-hero__welcome{ width:100%; font-size:22px; font-weight:800; margin:2px 0 4px; }

/* ===== Buscador centrado y sin desbordes (Android safe) ===== */
.dyt-hero__search{
  width:100%; max-width:980px; margin:0 auto; padding:0 4px; box-sizing:border-box;
}
.dyt-hero__search .dyt-searchbar,
.dyt-hero__search .dyt-searchbar__inner{
  width:100% !important; max-width:100% !important; margin:0 auto !important; box-sizing:border-box !important;
}
.dyt-hero__search .dyt-searchbar__input{
  min-width:0 !important; width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
@media (max-width:600px){
  .dyt-hero__search .dyt-searchbar__cat select{ max-width:44vw; }
}



/* ==== ANTI-DESBORDE GLOBAL ==== */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width:100%; height:auto; display:block; }
html, body { overflow-x:hidden; }

.tns-outer, .tns-ovh, .tns-inner,
.slick-list, .slick-track,
.swiper, .swiper-wrapper{
  max-width:100% !important;
  overflow:visible !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.tds-wrap > *, .tds-grid > *, .tds-grid--featured > *,
.dyt-hero > *, .dyt-circulos > * { min-width:0; }

@media (max-width:600px){
  /* si quieres 4 fijas también fuera del héroe en móvil */
  /* .dyt-circulos{ grid-template-columns: repeat(4, 1fr) !important; } */
}

.dyt-searchbar, .dyt-searchbar__inner{ max-width:100% !important; width:100% !important; }
.dyt-searchbar__input{ min-width:0 !important; }

.ast-container, .site, .site-content, .entry-content,
.elementor, .elementor-section, .elementor-container{
  overflow-x: clip;
}
/* ========= HERO A PANTALLA COMPLETA (FULL-BLEED) ========= */
/* Rompe el contenedor del tema y hace que el hero ocupe 100vw centrado */
.dyt-hero{
  /* ancho de viewport y centrado respecto al padre */
  width: calc(100vw - 16px);          /* pequeño respiro de 8px por lado */
  max-width: none !important;
  margin: 0;                          /* sin márgenes del contenedor */
  left: 50%;
  transform: translateX(-50%);        /* centra el bloque de 100vw */
  position: relative;
  padding-left: 8px;                  /* borde fino a la izquierda */
  padding-right: 8px;                 /* borde fino a la derecha */

  /* la malla se mantiene (slider + panel) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;  /* MÁS ancho en desktop */
  gap: 24px;
  align-items: stretch;
}

/* Un poquito más de panel en pantallas grandes */
@media (min-width: 1440px){
  .dyt-hero{ grid-template-columns: minmax(0, 1fr) 460px; }
}

/* En tablet/móvil sigue apilado, pero sin “sangrado” raro */
@media (max-width: 1024px){
  .dyt-hero{
    width: calc(100vw - 12px);  /* 6px por lado en móvil */
    transform: translateX(-50%);
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* El slider se expande bien al borde visual */
.dyt-hero__slider{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1220;
  min-height: 780px;   /* más alto en desktop */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

@media (max-width: 1200px){
  .dyt-hero__slider{ min-height: 580px; }
}
@media (max-width: 1024px){
  .dyt-hero__slider{ min-height: 460px; }
}
@media (max-width: 520px){
  .dyt-hero__slider{ min-height: 380px; }
}

/* El panel conserva su look y se alinea al borde del hero */
.dyt-hero__panel{
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 28px rgba(15,23,42,.08);
}

/* ===== CATEGORÍAS: 4 SIEMPRE EN FILA (desktop y móvil) ===== */
/* ===================== CATEGORÍAS GRANDES EN EL PANEL ===================== */
.dyt-hero__cats .dyt-circulos {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 por fila en desktop */
  gap: 22px !important;
  margin: 0 auto !important;
  justify-items: center;
}

.dyt-hero__cats .dyt-circulos .circle {
  width: 120px !important;
  height: 120px !important;
  background: #41bbff !important;
  border: none !important;
  margin: 0 auto 10px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dyt-hero__cats .dyt-circulos .circle img {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain;
}
.dyt-hero__cats .dyt-circulos .circle-title {
  font-size: 15px !important;
  font-weight: 600;
  margin: 0 !important;
}
.dyt-hero__cats .dyt-circulos .circle-cta { display: none !important; }

/* Hover (efecto flotante) */
.dyt-hero__cats .dyt-circulos .circle:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

/* En tablets */
@media (max-width: 980px) {
  .dyt-hero__cats .dyt-circulos {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .dyt-hero__cats .dyt-circulos .circle {
    width: 110px !important;
    height: 110px !important;
  }
}

/* En móviles (4 por fila, más compactos)
@media (max-width: 600px) {
  .dyt-hero__cats .dyt-circulos {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .dyt-hero__cats .dyt-circulos .circle {
    width: 90px !important;
    height: 90px !important;
  }
  .dyt-hero__cats .dyt-circulos .circle-title {
    font-size: 13px !important;
  }
} */

/* ===== Anti-desborde general para asegurar que nada empuje ===== */
*, *::before, *::after{ box-sizing: border-box; }
img, svg, video{ max-width:100%; height:auto; display:block; }
html, body{ overflow-x:hidden; }
.dyt-searchbar, .dyt-searchbar__inner{ max-width:100% !important; width:100% !important; }
.dyt-searchbar__input{ min-width:0 !important; }
.dyt-hero > *, .dyt-circulos > *{ min-width:0; }
/* ==== FIX FUERTE: categorías en móvil siempre en GRID (4 por fila) ==== 
@media (max-width: 600px){*/

  /* 1) Fuerza grid en cualquier bloque de categorías dentro del héroe 
  .dyt-hero__panel .dyt-circulos,
  .dyt-hero__cats  .dyt-circulos,
  .dyt-hero       .dyt-circulos{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;*/   /* clave: evita una sola línea 
    overflow: visible !important;*/
  }

  /* 2) Asegura que los hijos no se conviertan en inline/inline-flex 
  .dyt-hero__panel .dyt-circulos > *,
  .dyt-hero__cats  .dyt-circulos > *{
    display: block !important;
    min-width: 0 !important;    */      /* que no “empujen” el grid 
    white-space: normal !important;*/
  }

  /* 3) Neutraliza wrappers típicos de carruseles si quedaron por ahí 
  .dyt-hero__panel .tns-outer,
  .dyt-hero__panel .tns-ovh,
  .dyt-hero__panel .tns-inner,
  .dyt-hero__panel .slick-list,
  .dyt-hero__panel .slick-track,
  .dyt-hero__panel .swiper,
  .dyt-hero__panel .swiper-wrapper,
  .dyt-hero__cats  .tns-outer,
  .dyt-hero__cats  .tns-ovh,
  .dyt-hero__cats  .tns-inner,
  .dyt-hero__cats  .slick-list,
  .dyt-hero__cats  .slick-track,
  .dyt-hero__cats  .swiper,
  .dyt-hero__cats  .swiper-wrapper{
    display: contents !important; */    /* conservamos únicamente los hijos 
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;*/
  }

  /* 4) Tamaños móviles (los que te gustaron) 
  .dyt-hero__panel .dyt-circulos .circle,
  .dyt-hero__cats  .dyt-circulos .circle{
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 8px !important;
    background: #41bbff !important;
    border: none !important;
  }
  .dyt-hero__panel .dyt-circulos .circle-title,
  .dyt-hero__cats  .dyt-circulos .circle-title{
    font-size: 13px !important;
    margin: 0 !important;
  }
  .dyt-hero__panel .dyt-circulos .circle img,
  .dyt-hero__cats  .dyt-circulos .circle img{
    width: 80% !important;
    height: 80% !important;
    object-fit: contain !important;
    display: block !important;
  }
}*/
/* --- FIX: franja negra bajo las imágenes del slider en móvil --- */

/* 1) Quita el fondo oscuro del contenedor del slider */
.dyt-hero__slider{
  background: transparent !important;   /* antes: #0b1220 */
}

/* 2) Fuerza a que el slide e imagen ocupen todo el alto del contenedor */
.dyt-hero__track,
.dyt-hero__slide{ height: 100% !important; }

.dyt-hero__slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* 3) En móvil, asegura un alto suficiente para que la imagen cubra */
@media (max-width: 600px){
  .dyt-hero__slider{ min-height: 360px !important; } /* ajusta a 340–420px si quieres */
  .dyt-hero__dots{ bottom: 10px; }
}
/* === Overlay oscuro en imágenes del slider === */
.dyt-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);  /* <-- oscuridad: ajusta 0.35 = 35% */
  z-index: 1;                        /* sobre la imagen */
}

/* Asegura que las imágenes estén debajo del overlay */
.dyt-hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;   /* por debajo del overlay */
}
/* Ocultar buscador por defecto en header móvil Astra */
.ast-mobile-header-wrap .ast-mobile-header-content .ast-builder-layout-element.ast-header-search {
  display: none !important;
}
/* ===== HERO a sangrado completo por la IZQUIERDA (solo escritorio) ===== */
@media (min-width: 1025px){
  /* Lleva la sección al ancho completo del viewport y la desplaza
     para que el slider quede pegado al borde izquierdo */
  .dyt-hero{
    width: 100vw;             /* ocupa todo el viewport */
    max-width: 100vw;
    margin-left: calc(50% - 50vw); /* sangrado a la izquierda */
    margin-right: 0;                /* mantiene margen a la derecha */
    padding-left: 0;                /* sin padding interno a la izquierda */
  }

  /* El slider sin radio en la izquierda y redondeado a la derecha,
     así se integra como en Mall Aventura */
  .dyt-hero__slider{
    border-radius: 0 20px 20px 0;   /* izquierda recto, derecha redondeado */
  }
}

/* Seguridad: evitar scroll lateral por el “bleed” */
html, body{ overflow-x: hidden; }

/* ===== FIX DEFINITIVO: categorías en móvil a 2 por fila ===== */
@media (max-width: 600px){
  /* Dentro del hero (panel/cats) en móvil: 2 columnas */
  .dyt-hero__panel .dyt-circulos,
  .dyt-hero__cats  .dyt-circulos,
  .dyt-hero       .dyt-circulos{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    white-space: normal !important;
  }

  /* Tamaño compacto de los círculos en móvil */
  .dyt-hero__panel .dyt-circulos .circle,
  .dyt-hero__cats  .dyt-circulos .circle{
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 8px !important;
  }
  .dyt-hero__panel .dyt-circulos .circle-title,
  .dyt-hero__cats  .dyt-circulos .circle-title{
    font-size: 13px !important;
  }
}

/* ===== Confirma escritorio sin cambios ===== */
/* Ya tienes esto en tu CSS, pero lo refuerzo por si acaso */
@media (min-width: 1025px){
  .dyt-hero__cats .dyt-circulos{
    grid-template-columns: repeat(3, 1fr) !important; /* como lo definiste */
  }
}
/* Contenedor relativo para posicionar la lista */
.dyt-searchbar{ position: relative !important; overflow: visible !important; }

/* === Ajustes visuales del autosuggest cuando se usa en portal fijo === */
.dyt-suggest {
  /* estos valores los refuerza el JS, los dejamos por compatibilidad */
  position: fixed !important;
  top: auto; left: 0;
  right: auto; bottom: auto;
  max-height: 50vh;               /* scroll interno en móvil */
  overflow: auto;
  z-index: 999999 !important;
}

@media (max-width: 600px){
  .dyt-suggest { max-height: 55vh; }  /* un pelín más alto en móvil */
}

/* Evita que contenedores padres recorten el dropdown */
.dyt-hero__panel,
.dyt-hero,
.ast-container,
.site-content { overflow: visible !important; }
.dyt-suggest {

  backdrop-filter: saturate(120%) blur(4px); /* si te gusta un toque glass */
}
.dyt-suggest__item + .dyt-suggest__item { border-top: 1px solid #f2f2f2; }
.dyt-suggest__item:hover { background:#f9fafb; }
/* Dropdown suave en iOS */
.dyt-suggest{
  -webkit-overflow-scrolling: touch; /* momentum scroll */
  overscroll-behavior: contain;       /* evita “empujar” el body */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Safari/iOS hace zoom si el input es <16px */
.dyt-searchbar__input,
.dyt-searchbar__cat select{
  font-size: 16px !important;
}

/* Evita que wrappers corten el panel (por si los cambia Safari) */
.dyt-hero__panel,
.dyt-hero,
.ast-container,
.site-content{
  overflow: visible !important;
}

/* Arreglo común: si algún ancestro tiene transform, puede afectar fixed en iOS.
   Asegúrate de NO aplicar transform a <html> o <body>. Si tienes alguno, neutralízalo: */
html, body{ transform: none !important; }
/* El overlay NO debe bloquear clics/touch */
.dyt-hero__slide::after { pointer-events: none !important; }

/* Asegura que los dots reciban clics por encima de todo */
.dyt-hero__dots { 
  pointer-events: auto !important; 
  z-index: 5 !important;
}
/* ==== ALTURAS (ajusta a tu header) ==== */
:root{
  --header-h-desktop: 90px; /* altura aprox. del header en escritorio */
  --header-h-mobile: 70px;  /* altura aprox. del header en móvil */
}

/* ==== CABECERA FIJA ==== */
.main-header-bar{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 9999;
  background: var(--ast-global-color-5, #fff); /* color de fondo para que no sea transparente */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Compensa el espacio para que el contenido no quede oculto bajo el header */
@media (min-width: 921px){
  .site-content,
  .ast-plain-container .site-content,
  .ast-separate-container .site-main{
    padding-top: var(--header-h-desktop);
  }
}
@media (max-width: 920px){
  .site-content,
  .ast-plain-container .site-content,
  .ast-separate-container .site-main{
    padding-top: var(--header-h-mobile);
  }
}

/* Si usas el admin bar de WP (logueado) evita que tape la cabecera */
body.admin-bar .main-header-bar{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .main-header-bar{ top: 46px; }
}

/* (Opcional) si tenías “Cabecera transparente”, fuerza fondo sólido */
.ast-transparent-header .main-header-bar{
  background: var(--ast-global-color-5, #fff);
}
/* Usa opacidad variable si llega desde el shortcode (fallback: 0.70 que ya usas) */
.dyt-hero__slide::after{
  background: rgba(0,0,0,var(--dyt-hero-shade, .70)) !important;
}

/* Capa de contenido encima del slider */
.dyt-hero__slider{ position: relative; }
.dyt-hero__content{
  position:absolute; inset:0; z-index:4;        /* por encima del overlay, debajo de dots */
  display:grid; grid-template-columns: 1.1fr .9fr;
  align-items:center; gap:24px;
  padding: clamp(16px, 4vw, 40px);
  pointer-events:none;                           /* no bloquea gestos del slider */
}
.dyt-hero__copy{ color:#fff; max-width:760px; pointer-events:auto; }
.dyt-hero__badge{
  display:inline-block; font-weight:800; font-size:.85rem;
  color:#ec4899; background:#fff; border-radius:999px;
  padding:8px 14px; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.12); margin-bottom:10px;
}
/* ==== Mejora tipografía del HERO ==== */
.dyt-hero__h1 {
  margin: .2rem 0 .5rem;
  line-height: 1.15;
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 900;
  color: #fff !important;
  
  /* Sombras múltiples para resaltar en cualquier fondo */
  text-shadow:
    0 2px 4px rgba(0,0,0,0.55),
    0 4px 8px rgba(0,0,0,0.45),
    0 6px 18px rgba(0,0,0,0.35);
  letter-spacing: .5px;
}

.dyt-hero__sub {
  margin: 0 0 14px;
  opacity: .95;
  font-size: clamp(14px, 1.3vw, 17px);
  color: #f3f4f6; /* un gris muy claro para diferenciar del headline */
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.dyt-hero__btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  background:#FFD600; color:#111; font-weight:800; text-decoration:none;
  transition: transform .08s ease, filter .15s ease;
}
.dyt-hero__btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.dyt-hero__art{ display:flex; justify-content:flex-end; align-items:center; pointer-events:none; }
.dyt-hero__art img{ max-width:520px; width:100%; height:auto; display:block; }

/* Asegura clic en dots por encima del contenido */
.dyt-hero__dots{ z-index:5 !important; pointer-events:auto !important; }

@media (max-width:1024px){
  .dyt-hero__content{
    grid-template-columns: 1fr; gap:16px; padding:14px;
  }
  .dyt-hero__art{ justify-content:center; }
  .dyt-hero__art img{ max-width:360px; }
}
@media (max-width:560px){
  /* ==== Badge destacado en HERO ==== */
.dyt-hero__badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff3366, #ff1d48);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .8px;

  /* Glow / sombra para resaltar */
  text-shadow: 
    0 1px 3px rgba(0,0,0,0.4),
    0 0 6px rgba(255,255,255,0.6);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.25),
    0 4px 12px rgba(255,51,102,0.35);
}

  .dyt-hero__art img{ max-width:280px; }
}
/* Animaciones de entrada del texto del HERO */
.dyt-hero__copy,
.dyt-hero__art{ will-change: transform, opacity; }

.dyt-copy-in{
  animation: dytHeroCopyIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}

.dyt-art-in{
  animation: dytHeroArtIn 1.2s .15s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes dytHeroCopyIn{
  from{ opacity:0; transform: translateX(-28px); }
  to  { opacity:1; transform: none; }
}
@keyframes dytHeroArtIn{
  from{ opacity:0; transform: translateX(22px) scale(.98); }
  to  { opacity:1; transform: none; }
}

/* Respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce){
  .dyt-copy-in, .dyt-art-in{ animation: none !important; }
}
/* Botón turquesa */
.dyt-searchbar__btn{
  position: relative !important;
  width: 44px; height: 44px;
  border-radius: 999px !important;
  background: #41bbff !important;  
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);

  display: flex;                /* centramos con flex */
  align-items: center;
  justify-content: center;
  padding: 0;                   /* sin padding extra */
}

/* Lupa centrada */
.dyt-searchbar__btn svg{
  width: 18px;                  /* un poco más chica que el botón */
  height: 18px;
  stroke: #fff !important;
  stroke-width: 2;
  display: block;
}
/* === BOTÓN DE CARRITO REDONDO === */
.ast-site-header-cart {
  position: relative;
}

.ast-site-header-cart .cart-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #41bbff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: all .25s ease;
}

.ast-site-header-cart .cart-container:hover {
  background: #41bbff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

/* Ícono del carrito */
.ast-site-header-cart .astra-icon {
  font-size: 20px;
  color: #fff !important;
  line-height: 1;
}

/* === CONTADOR (badge) === */
.ast-site-header-cart .count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff !important;
  color: #12c0be !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
/* === Ajuste de padding interno en cards de WooCommerce === */
.woocommerce ul.products li.product {
  padding: 18px 20px 20px 20px !important; /* arriba derecha abajo izquierda */
}

/* Opcional: sangría adicional solo en títulos y precios */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .tds-meta-cat {
  padding-left: 6px;
}
/* === Unificar botones "Añadir al carrito" en TODAS las vistas === */
:root{ --wc-accent:#3BA9FF; }

/* LOOP / grillas / destacadas (más específico para ganar a Astra/Elementor) */
.tds-grid .button,
.tds-grid .added_to_cart,
.tds-grid .woocommerce a.button,
.tds-grid .woocommerce button.button,
.tds-grid .woocommerce input.button,
.woocommerce ul.products li.product .button {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;               /* full width como en tu ejemplo */
  padding: 12px 18px !important;
  border: 2px solid var(--wc-accent) !important;
  border-radius: 30px !important;
  background: transparent !important;   /* evita que salga ya relleno */
  color: var(--wc-accent) !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  transition: color .3s ease, transform .2s ease, box-shadow .2s ease !important;
  z-index: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc-accent) 20%, transparent);
}

/* Relleno animado */
.tds-grid .button::before,
.tds-grid .added_to_cart::before,
.woocommerce ul.products li.product .button::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:28px;
  background: var(--wc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: -1;
}

/* Hover / Focus */
.tds-grid .button:hover,
.tds-grid .button:focus,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus{
  color:#fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wc-accent) 35%, transparent);
  outline: 0;
}
.tds-grid .button:hover::before,
.tds-grid .button:focus::before,
.woocommerce ul.products li.product .button:hover::before,
.woocommerce ul.products li.product .button:focus::before{
  transform: scaleX(1);
}

/* Estado disabled/loading */
.tds-grid .button.disabled,
.tds-grid .button:disabled,
.tds-grid .button.loading,
.woocommerce ul.products li.product .button.loading{
  opacity:.6 !important; cursor:not-allowed !important;
  color:#fff !important; border-color:#ccc !important;
  box-shadow:none !important;
}
.tds-grid .button.disabled::before,
.tds-grid .button:disabled::before,
.tds-grid .button.loading::before{
  transform:none; background:#ccc !important;
}

/* Oculta el enlace "Ver carrito / added_to_cart" duplicado del loop */
.woocommerce ul.products li.product a.added_to_cart{ display:none !important; }
/* === MENÚ ASTRA → botones DYTSHOP sin movimientos === */

/* Separación entre items (evita que se “junten”) */
.ast-main-header-wrap .main-header-menu > .menu-item {
  margin-right: 14px;
}
.ast-main-header-wrap .main-header-menu > .menu-item:last-child {
  margin-right: 0;
}

/* Base: mismo padding SIEMPRE + borde transparente para que no cambie el tamaño */
/* Base: SIN fondo ni borde (solo texto) */
.ast-main-header-wrap .main-header-menu .menu-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid transparent;   /* mantiene tamaño sin pintar */
  background: transparent;          /* ahora ya no hay tono oscuro */
  color: #fff;                      /* texto blanco */
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}


/* Hover/focus: mismo tamaño, solo cambia color y sombra */
.ast-main-header-wrap .main-header-menu .menu-link:hover,
.ast-main-header-wrap .main-header-menu .menu-link:focus {
  background: #3BA9FF;
  border-color: #3BA9FF;              /* el borde ya existía, no crece */
  color: #fff;
  box-shadow: 0 10px 24px rgba(59,169,255,.35);
}

/* Activo/actual: mismo estilo que hover para “botón presionado” */
.ast-main-header-wrap .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-main-header-wrap .main-header-menu .menu-item.current_page_item > .menu-link {
  background: #3BA9FF;
  border-color: #3BA9FF;
  color: #fff;
  box-shadow: 0 10px 24px rgba(59,169,255,.35);
}

/* Forzar que “Catálogo” esté marcado siempre (tu caso) */
.ast-main-header-wrap .main-header-menu .menu-link[href$="/shop/"] {
  background: #3BA9FF !important;
  border-color: #3BA9FF !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(59,169,255,.35) !important;
}

/* Móvil: un poco más compacto y sin movimientos */
@media (max-width: 921px){
  .ast-main-header-wrap .main-header-menu > .menu-item {
    margin-right: 10px;
  }
  .ast-main-header-wrap .main-header-menu .menu-link {
    padding: 9px 14px;
  }
}
/* =========================
   MENÚ MÓVIL (Astra) – Botones DYTSHOP
   ========================= */

/* Quita líneas/separadores y añade espacio vertical entre items */
.ast-mobile-popup-drawer .main-header-menu > .menu-item,
.ast-builder-menu-mobile .main-header-menu > .menu-item {
  border: 0 !important;
  margin: 6px 0 !important;
}

/* Botón base (off-canvas móvil de Astra) */
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link,
.ast-mobile-header-wrap .main-header-menu .menu-item > .menu-link {
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;

  border: 2px solid #41bbff !important;
  background: transparent !important;
  color: #41bbff !important;

  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;

  box-shadow: inset 0 0 0 1px rgba(65,187,255,.15) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .06s ease !important;
}

/* Hover / Focus */
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link:hover,
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link:focus,
.ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:hover,
.ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:focus {
  background: #41bbff !important;
  border-color: #41bbff !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(65,187,255,.35) !important;
  transform: translateY(-1px);
}

/* Activo SIEMPRE (current page / menú activo / ancestro) */
.ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .current_page_item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .current-menu-ancestor > .menu-link,
.ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .current_page_item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .current-menu-ancestor > .menu-link {
  background: #41bbff !important;
  border-color: #41bbff !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(65,187,255,.35) !important;
}

/* Toggle de submenú (iconito ►) con el mismo color */
.ast-mobile-popup-drawer .ast-menu-toggle,
.ast-builder-menu-mobile .ast-menu-toggle {
  border-radius: 10px !important;
  color: #41bbff !important;
}
.ast-mobile-popup-drawer .ast-menu-toggle:hover,
.ast-builder-menu-mobile .ast-menu-toggle:hover {
  background: rgba(65,187,255,.12) !important;
}

/* Sub-items también con separación (opcional) */
.ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item > .menu-link {
  margin: 4px 0 !important;
  border-color: rgba(65,187,255,.55) !important;
  color: #41bbff !important;
}
/* === Quitar borde punteado (outline) en TODO el menú móvil Astra === */
.ast-mobile-popup-drawer *:focus,
.ast-mobile-popup-drawer *:focus-visible,
.ast-mobile-popup-drawer .focus-visible,
.ast-mobile-popup-drawer a:focus,
.ast-mobile-popup-drawer a:focus-visible,
.ast-mobile-popup-drawer button:focus,
.ast-mobile-popup-drawer button:focus-visible {
  outline: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* Botón de cerrar (X) – asegura también en el ícono */
.ast-mobile-popup-drawer .ast-mobile-popup-close,
.ast-mobile-popup-drawer .ast-mobile-popup-close * {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Firefox: borde interno de botones */
.ast-mobile-popup-drawer button::-moz-focus-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-close::-moz-focus-inner {
  border: 0 !important;
}

/* Evita halo al tocar en móviles WebKit */
.ast-mobile-popup-drawer a,
.ast-mobile-popup-drawer button {
  -webkit-tap-highlight-color: transparent;
}
/* Previene que las imágenes clonadas se vean borrosas */
body img.fly-to-cart-clone {
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Rebote del carrito al recibir un producto */
@keyframes dytCartBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  55%  { transform: scale(0.92); }
  85%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.dyt-cart-bounce {
  animation: dytCartBounce .6s cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce){
  .dyt-cart-bounce { animation: none !important; }
}