:root{
  --verde:#c2d8be;
  --verde-oscuro:#1e311c;
  --negro:#111;
  --blanco:#fff;
  --borde: rgba(17,17,17,.14);
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --font: "Lato", Arial, sans-serif;
}

html, body, button, input, select, textarea{
  font-family: var(--font) !important;
}

/* Ocultar header original Storefront */
.site-header,
.storefront-primary-navigation{ display:none !important; }

/* Quitar 3 botones flotantes de móvil (cuenta/buscar/carrito) */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul,
.storefront-handheld-footer-bar ul li{
  display:none !important;
}

/* Ocultar orden/contador */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.storefront-sorting,
.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count{
  display:none !important;
}

/* Contenedor */
.td-wrap{ max-width:1200px; margin:0 auto; padding:0 18px; }

/* TOPBAR */
.td-topbar{ background: var(--verde); border-bottom:1px solid rgba(0,0,0,.08); }
.td-topbar-text{ display:block; padding:6px 0; font-weight:400; font-size:13px; color:rgba(0,0,0,.72); }

/* HEADER */
.td-header{
  position:sticky; top:0; z-index:999;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.td-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
}

.td-brand{ flex:0 0 auto; }
.td-brand img.custom-logo,
.td-brand img.td-fallback-logo{
  max-height:46px; max-width:170px; object-fit:contain; display:block;
}

/* Buscador desktop */
.td-search{ flex:1 1 auto; min-width:320px; }
.td-search form{ position:relative; margin:0; }
.td-search-field{
  width:100%;
  border:2px solid var(--verde);
  border-radius:8px;
  padding:14px 52px 14px 16px;
  background:#fff;
  font-weight:700;
  outline:none;
}
.td-search-field:focus{ box-shadow:0 0 0 4px rgba(194,216,190,.35); }
.td-search-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:8px;
  border:0;
  background: rgba(194,216,190,.45);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.td-search-btn:hover{ background: rgba(194,216,190,.75); }
.td-search-icon{ font-weight:900; font-size:18px; line-height:1; }

/* Menú (Mi cuenta / Servicios / Desnos...) */
.td-nav{ flex:0 0 auto; }
.td-menu{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  white-space:nowrap;
}
.td-menu a{
  font-weight:900;
  text-decoration:none;
  padding:8px 4px;
  position:relative;
  color:#111;
}
.td-menu a:after{
  content:"";
  position:absolute; left:4px; right:4px; bottom:0;
  height:3px;
  background: var(--verde);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .16s ease;
}
.td-menu a:hover:after{ transform:scaleX(1); }

/* Carrito */
.td-cart{ margin-left:auto; flex:0 0 auto; }
.td-cart-link{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--borde);
  border-radius:999px;
  padding:10px 12px;
  text-decoration:none;
  background:#fff;
  color:#111;
}
.td-cart-link:hover{ background: rgba(194,216,190,.22); }
.td-cart-count{
  font-weight:900; font-size:13px;
  padding:2px 8px;
  border-radius:999px;
  background: var(--verde);
}

/* =======================
   MÓVIL: busqueda entre logo y carrito + alineaciones con “aire”
   ======================= */
@media (max-width:780px){

  /* Más aire a los bordes (antes 14px, ahora 18px) */
  .td-wrap{ padding:0 18px !important; }

  /* Grid: logo | buscador (más grande) | carrito */
  .td-row{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "logo search cart"
      "menu menu menu" !important;
    gap:10px 12px !important;
    padding:12px 0 !important;
    align-items:center !important;
  }

  .td-brand{ grid-area:logo; justify-self:start !important; }
  .td-search{ grid-area:search; min-width:0 !important; width:100% !important; }
  .td-cart{ grid-area:cart; margin-left:0 !important; justify-self:end !important; }
  .td-nav{ grid-area:menu; }

  /* Logo menos pegado visualmente (aire dentro) */
  .td-brand{
    padding-left:2px !important;
  }
  .td-brand img.custom-logo,
  .td-brand img.td-fallback-logo{
    max-height:34px !important;
    max-width:140px !important;
  }

  /* Buscador: crecer “un poquito” */
  .td-search-field{
    padding:12px 50px 12px 14px !important;
    font-size:14px !important;
  }
  .td-search-btn{
    width:38px !important;
    height:38px !important;
    right:6px !important;
  }

  /* Menú centrado y con aire, no cargado a la izquierda */
  .td-nav{
    justify-self:center !important;
    width:100% !important;
  }
  .td-menu{
    justify-content:center !important;
    width:100% !important;
    gap:16px !important;
    padding:6px 0 2px 0 !important;
  }

  /* Carrito con un poquito de aire extra */
  .td-cart{
    padding-right:2px !important;
  }
}

/* SLIDER */
.td-hero-inner{
  position:relative;
  width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.td-hero-track{ position:relative; height:clamp(150px, 16vw, 280px); background:#f6f6f6; }
.td-hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .30s ease; }
.td-hero-slide.is-active{ opacity:1; pointer-events:auto; }
.td-hero-media{ width:100%; height:100%; object-fit:cover; display:block; }

.td-hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.82);
  font-size:24px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.td-hero-nav:hover{ background: rgba(194,216,190,.55); }
.td-hero-prev{ left:12px; }
.td-hero-next{ right:12px; }

.td-hero-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px;
  display:flex; gap:5px;
  padding:5px 8px;
  border-radius:10px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.10);
  z-index:6;
}
.td-hero-dot{
  width:7px; height:7px; border-radius:2px;
  border:1px solid rgba(30,49,28,.35);
  background: rgba(30,49,28,.22);
  cursor:pointer; padding:0;
}
.td-hero-dot.is-active{ background: var(--verde-oscuro); border-color: var(--verde-oscuro); }

/* CATEGORÍAS */
.td-catbar{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  overflow: visible !important;
}
.td-catbar .td-wrap{ overflow: visible !important; }
.td-catbar-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  padding:12px 0;
  gap:0;
  position:relative;
  overflow: visible !important;
}

.td-catroot{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow: visible !important;
}
.td-catbtn{
  border:0;
  background:transparent;
  padding:6px 12px;
  margin:0;
  cursor:pointer;
  font-weight:900;
  font-size:14px;
  color: rgba(17,17,17,.86);
  position:relative;
  line-height:1.2;
  z-index: 2;
}
.td-catbtn:before{
  content:"";
  position:absolute;
  left:10px; right:10px;
  bottom:2px;
  height:2px;
  background: var(--verde);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .16s ease, background .16s ease;
}
.td-catbtn:hover:before{ transform:scaleX(1); }
.td-catbtn.is-active{ color: var(--verde-oscuro); }
.td-catbtn.is-active:before{ transform:scaleX(1); background: var(--verde-oscuro); }

.td-catroot.has-children.is-open > .td-catbtn:before{
  transform: scaleX(1);
  background: var(--verde);
}

.td-catroot:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:14px;
  background: rgba(17,17,17,.18);
  pointer-events:none;
}

.td-catroot.has-children > .td-catbtn{ padding-right:20px; }
.td-catroot.has-children > .td-catbtn::after{
  content:"▾";
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-55%);
  font-size:12px;
  opacity:.55;
  pointer-events:none;
}

/* Subcategorías (desktop hover) */
.td-submenu{
  position:absolute;
  top: 100%;
  left:50%;
  transform:translateX(-50%);
  min-width: 220px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  padding:10px;
  display:none;
  flex-direction:column;
  gap:6px;
  z-index: 99999;
  pointer-events:auto;
  margin-top: 8px;
}
.td-submenu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
  background:transparent;
}

@media (hover:hover){
  .td-catroot.has-children:hover .td-submenu,
  .td-catroot.has-children .td-submenu:hover{
    display:flex;
  }
}

.td-subbtn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  color: rgba(17,17,17,.86);
}
.td-subbtn:hover{ background: rgba(194,216,190,.22); }
.td-subbtn.is-active{ background: rgba(194,216,190,.35); color: var(--verde-oscuro); }

/* ✅ MÓVIL: overlay fijo (JS posiciona arriba) */
@media (max-width:1024px){
  .td-catbar-inner{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .td-catroot{ flex:0 0 auto; }
  .td-catroot::after{ display:none; }

  .td-submenu{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 10px; /* JS lo recalcula */
    margin: 0 !important;
    max-width: min(92vw, 520px) !important;
    width: auto !important;
    display: none !important;
    z-index: 999999 !important;
  }
  .td-catroot.has-children.is-open .td-submenu{
    display: flex !important;
  }
}

/* FIX espacio blanco arriba del grid */
.woocommerce.archive .woocommerce-products-header,
.woocommerce.archive .page-header{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce.archive .td-catbar{ margin-bottom:12px !important; }
.woocommerce.archive .site-main{ margin-top:0 !important; padding-top:12px !important; }
.woocommerce.archive .storefront-sorting,
.woocommerce.archive .woocommerce-notices-wrapper{
  margin:0 !important;
  padding:0 !important;
}
.woocommerce.archive .woocommerce ul.products{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Loading */
.woocommerce ul.products.td-is-loading{
  opacity:.45;
  filter: blur(.2px);
  transition: opacity .15s ease;
}

/* =========================
   PRODUCTOS (RECTÁNGULO VERTICAL) + BOTONES VERDES
   Reemplaza tu bloque actual de "Grid productos" por este
   ========================= */

/* Grid */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px !important;
  padding:0 !important;
  margin-top: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; }

/* Tarjeta */
.woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:none !important;

  background:#fff;
  border:1px solid var(--borde);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;

  padding:14px;
  display:flex !important;
  flex-direction:column !important;

  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(30,49,28,.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* Imagen: rectángulo vertical (poster) */
.woocommerce ul.products li.product a img{
  width:100% !important;

  /* 🔥 Rectángulo vertical */
  aspect-ratio: 3 / 4;          /* más alto que ancho */
  height:auto !important;
  object-fit: cover;

  border-radius:14px;
  margin:0 0 12px 0 !important;

  transition: transform .25s ease !important;
}
.woocommerce ul.products li.product:hover a img{
  transform: scale(1.02) !important;
}

/* Título */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight:900;
  font-size:16px;
  line-height:1.2;
  margin:6px 0 8px 0 !important;
  color:#111;
}

/* Precio */
.woocommerce ul.products li.product .price{
  color:#111;
  font-weight:900;
  margin:0 0 12px 0 !important;
}

/* ===== Botones verdes ===== */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background: var(--verde) !important;
  color: var(--verde-oscuro) !important;
  border: 1px solid rgba(30,49,28,.35) !important;
  border-radius: 999px !important;

  font-weight: 900 !important;
  text-transform: none !important;
  box-shadow: none !important;

  padding: 12px 14px !important;
  line-height: 1.1 !important;

  transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease !important;
}

/* Botón dentro de card: ancho completo y al fondo */
.woocommerce ul.products li.product .button{
  width:100% !important;
  text-align:center !important;
  margin-top:auto !important;
  white-space: normal !important;
}

/* Hover */
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background: var(--verde-oscuro) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

/* Focus accesible */
.woocommerce ul.products li.product .button:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(194,216,190,.45) !important;
}

/* Badge “Sale” editorial */
.woocommerce span.onsale{
  background: var(--verde) !important;
  color: var(--verde-oscuro) !important;
  border: 1px solid rgba(30,49,28,.35) !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  min-height: auto !important;
  line-height: 1 !important;
  top: 12px !important;
  left: 12px !important;
}

/* Responsive */
@media (max-width:1024px){
  .woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:780px){
  .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce ul.products li.product{ padding:12px; }
  .woocommerce ul.products li.product a img{
    aspect-ratio: 3 / 4; /* mantener vertical en móvil */
  }
}



/* =========================
   FOOTER GRIS SIMPLE (COMPACTO)
   ========================= */
.td-footer--simple{
  margin-top: 22px;
  background: #f1f1f1;
  border-top: 1px solid rgba(0,0,0,.10);
}

.tdf-simple-inner{
  padding: 10px 0 10px 0;   /* antes 16/18 */
  display:flex;
  flex-direction:column;
  gap:6px;                 /* antes 10 */
  align-items:center;
  justify-content:center;
  text-align:center;
}

.tdf-simple-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;                 /* antes 10 */
  align-items:center;
  justify-content:center;
  max-width: 1050px;
}

.tdf-simple-links a{
  color: rgba(17,17,17,.75);
  text-decoration:none;
  font-weight:700;
  font-size: 12px;         /* antes 13 */
  line-height:1.25;
}

.tdf-simple-links a:hover{
  color: var(--verde-oscuro);
  text-decoration: underline;
  text-decoration-color: var(--verde);
  text-underline-offset: 3px;
}

.tdf-dot{
  opacity:.40;
  font-weight:900;
  font-size: 12px;
  line-height:1;
}

.tdf-simple-copy{
  color: rgba(17,17,17,.58);
  font-size: 12px;         /* antes 12.5 */
  font-weight:400;
}

/* Móvil: aún más compacto y sin puntos */
@media (max-width:780px){
  .td-footer--simple .td-wrap{ padding: 0 18px !important; }

  .tdf-simple-inner{ padding: 10px 0 10px 0; gap:6px; }

  .tdf-dot{ display:none; }

  .tdf-simple-links{
    gap:6px 10px;
  }

  .tdf-simple-links a{
    font-size: 12px;
    padding: 1px 3px;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
}


/* =========================
   META (Autor / Editorial / Material) - estilo editorial
   ========================= */

.woocommerce ul.products li.product .td-prod-meta{
  margin: 2px 0 10px 0;
  padding: 0;              /* sin “caja” */
  border: 0;               /* sin línea */
}

/* Una sola línea si cabe, si no se acomoda bonito */
.woocommerce ul.products li.product .td-prod-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Cada renglón: compacto, similar a precio */
.woocommerce ul.products li.product .td-meta-row{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0;
  line-height:1.25;
  font-size: 13px;         /* similar a precio/título en pequeño */
  letter-spacing: .1px;
}

/* Etiqueta (Autor:, Editorial:, Material:) */
.woocommerce ul.products li.product .td-meta-k{
  font-weight:900;
  color: var(--verde-oscuro);   /* 🔥 destacadas en verde oscuro */
}

/* Valor */
.woocommerce ul.products li.product .td-meta-v{
  font-weight:700;
  color: rgba(17,17,17,.78);
}

/* Si quieres un look aún más integrado: que quede “pegadito” al título */
.woocommerce ul.products li.product .woocommerce-loop-product__title + .td-prod-meta{
  margin-top: 6px;
}

/* Y que no empuje el botón */
.woocommerce ul.products li.product .price + .td-prod-meta{
  margin-top: 8px;
}

/* En móvil: un poquito más chico para que no se vea cargado */
@media (max-width:780px){
  .woocommerce ul.products li.product .td-meta-row{
    font-size: 12.5px;
  }
}

/* =========================
   META centrada + labels color #e9b48b
   ========================= */

.woocommerce ul.products li.product .td-prod-meta{
  margin: 6px 0 12px 0;
  padding: 0;
  border: 0;

  display:flex;
  flex-direction:column;
  gap:6px;

  text-align:center; /* ✅ centra */
}

.woocommerce ul.products li.product .td-meta-row{
  display:flex;
  justify-content:center;     /* ✅ centra horizontal */
  align-items:baseline;
  gap:6px;

  margin:0;
  line-height:1.25;
  font-size: 13px;
}

/* Autor:, Editorial:, Material: */
.woocommerce ul.products li.product .td-meta-k{
  font-weight:900;            /* ✅ negrita */
  color: #e9b48b;             /* ✅ color pedido */
}

/* Valor */
.woocommerce ul.products li.product .td-meta-v{
  font-weight:700;
  color: rgba(17,17,17,.78);
}

/* Móvil: un pelín más chico */
@media (max-width:780px){
  .woocommerce ul.products li.product .td-meta-row{
    font-size: 12.5px;
  }
}

/* Solo valores CENTRADOS */
.woocommerce ul.products li.product .td-prod-meta{
  margin: 6px 0 12px 0;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center !important;
}

.woocommerce ul.products li.product .td-meta-row{
  margin:0;
  line-height:1.25;
  font-size:13px;
  display:flex;
  justify-content:center; /* centra el contenido */
}

.woocommerce ul.products li.product .td-meta-v{
  font-weight:700;
  color: rgba(17,17,17,.62);
}