/* HILADA v2 — tienda. Base neutra hueso + oliva; la fotografia pone el color. */

/* Colecciones: el circulo es para navegar, no para vender. */
.collections{margin:0 0 2.6rem}
.collections__title{margin:0 0 1.1rem}
.collections__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.collection-card{display:grid;justify-items:center;gap:.55rem;text-align:center;text-decoration:none}
.collection-card__media{position:relative;display:block;width:100%;max-width:220px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--hilada-bone-secondary)}
.collection-card__media img,.collection-card__image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.collection-card__fallback{position:absolute;inset:0;display:grid;place-items:center;background:var(--hilada-sand);color:var(--hilada-olive);font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);line-height:1}
.collection-card__name{font-size:var(--step-sm);letter-spacing:.06em}
.collection-card__count{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hilada-greige)}
@media(hover:hover){.collection-card:hover .collection-card__media img{transform:scale(1.04)}.collection-card:hover .collection-card__name{text-decoration:underline;text-underline-offset:.22em}}

/* Subcolecciones: filtro rapido dentro de una categoria. */
.subcollections{margin:0 0 1.6rem}
.subcollections ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.subcollections a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1px solid var(--line);font-size:var(--step-sm);text-decoration:none;transition:background .24s ease,color .24s ease,border-color .24s ease}
.subcollections a:hover{background:var(--hilada-olive);border-color:var(--hilada-olive);color:var(--hilada-bone)}

/* =========================================================================
   Cuadricula de catalogo — imagen circular
   Sustituye por completo al CSS suelto que estaba en Additional CSS.
   Un solo sistema: grid. Nada de flex + width en calc + !important.
   ========================================================================= */

.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.4rem) clamp(1.2rem,2.4vw,2rem);
  margin:clamp(1.6rem,3vw,2.6rem) 0 0;
  padding:0;
  list-style:none;
  width:100%;
  max-width:100%;
}
.woocommerce ul.products li.product{
  float:none;
  width:auto;
  min-width:0;                    /* sin esto un boton largo estira la columna */
  max-width:100%;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none}

/* -------------------------------------------------------------------------
   CAUSA RAIZ del hueco: "circulo | circulo | HUECO" y el tercero abajo.
   WooCommerce le pone al <ul> un clearfix de la epoca del float:
     .woocommerce ul.products::before,
     .woocommerce ul.products::after{content:" ";display:table}
   Con float era invisible. Con display:grid los pseudo-elementos DEL
   CONTENEDOR cuentan como grid items: el ::before se come la primera celda
   y el ::after una celda al final. Medido en vivo: el <ul> arranca en x=360
   y el primer producto caia en x=715, o sea el carril 2.
   Se anulan con la misma especificidad (0-2-1), sin !important.
   ------------------------------------------------------------------------- */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after{
  content:none;
  display:none;
}

/* La tarjeta: columna, texto centrado bajo el circulo. */
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;
}

/* El circulo. --card-fit controla el recorte: cover llena, contain no corta. */
.product-card__media{
  position:relative;
  display:block;
  width:100%;
  max-width:var(--card-size,290px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--hilada-bone-secondary);
  text-decoration:none;
}
/* La foto respira dentro del circulo: no llega al borde. --card-inset la abre
   o la cierra; --card-fit decide si recorta (cover) o entra completa (contain). */
.product-card__media img{
  position:absolute;
  inset:var(--card-inset,9%);
  width:auto;
  height:auto;
  max-width:none;
  block-size:calc(100% - var(--card-inset,9%) * 2);
  inline-size:calc(100% - var(--card-inset,9%) * 2);
  object-fit:var(--card-fit,contain);
  object-position:center;
  display:block;
  transition:transform .5s ease,opacity .28s ease;
}
/* Aro finisimo: separa la foto del fondo hueso sin ensuciar. */
.product-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(27,26,21,.07);
  pointer-events:none;
}
.product-card__image-alt{position:absolute;inset:0;opacity:0}
@media(hover:hover){
  .product-card__media:hover img:first-child{transform:scale(1.04)}
  .product-card__media:hover .product-card__image-alt{opacity:1}
}

/* Titulo y precio: cerca del circulo y alineados entre tarjetas. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-card .woocommerce-loop-product__title{
  font-family:var(--font-ui);
  font-size:var(--step-sm);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.02em;
  margin:1.1rem 0 .35rem;
  padding:0;
  min-height:2.8em;              /* 2 lineas: mantiene los precios en linea */
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.product-card .woocommerce-loop-product__title a{
  color:var(--hilada-charcoal);
  text-decoration:none;
  transition:color .24s ease;
}
.product-card .woocommerce-loop-product__title a:hover{color:var(--hilada-olive)}

.woocommerce ul.products li.product .price,
.product-card .price{
  margin:0;
  font-size:var(--step-sm);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--hilada-olive);
}
.product-card .price del{opacity:.5;font-weight:400;margin-right:.4rem}
.product-card .price ins{text-decoration:none}

/* -------------------------------------------------------------------------
   Boton de la tarjeta: uno solo, angosto y discreto.
   Antes salian dos (el de WooCommerce y el del tema) montados uno sobre otro.
   ---------------------------------------------------------------------- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  min-height:0;
  margin:.85rem 0 0;
  padding:.62rem 1.35rem;
  font-family:var(--font-ui);
  font-size:.68rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--hilada-olive);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background-color .24s ease,border-color .24s ease,color .24s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible{
  color:var(--hilada-bone);
  background:var(--hilada-olive);
  border-color:var(--hilada-olive);
}
.woocommerce ul.products li.product .button.loading{opacity:.6}
.woocommerce ul.products li.product .button.added{display:none}
/* El enlace "Ver carrito" que WooCommerce inyecta tras anadir. */
.woocommerce ul.products li.product .added_to_cart{
  margin-top:.5rem;
  border-style:dashed;
}
/* Empuja el boton al fondo para que quede alineado entre tarjetas. */
.woocommerce ul.products li.product .price{margin-bottom:auto}

/* -------------------------------------------------------------------------
   CAUSA RAIZ del "hueco" y de los relacionados rotos.
   WooCommerce fija el ancho del <li> con selectores MAS especificos que los
   nuestros: .woocommerce ul.products.columns-3 li.product{width:30.75%}
   (0-4-2) le gana a .woocommerce ul.products li.product (0-3-2). En la
   cuadricula de categoria el <ul> es columns-4 y ganabamos; en relacionados
   es columns-3 y perdiamos. Se igualan los pesos, sin !important.
   ------------------------------------------------------------------------- */
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products.columns-1 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-5 li.product,
.woocommerce-page ul.products.columns-6 li.product,
.woocommerce.columns-1 ul.products li.product,
.woocommerce.columns-2 ul.products li.product,
.woocommerce.columns-3 ul.products li.product,
.woocommerce.columns-4 ul.products li.product,
.woocommerce.columns-5 ul.products li.product,
.woocommerce.columns-6 ul.products li.product,
.woocommerce-page.columns-1 ul.products li.product,
.woocommerce-page.columns-2 ul.products li.product,
.woocommerce-page.columns-3 ul.products li.product,
.woocommerce-page.columns-4 ul.products li.product,
.woocommerce-page.columns-5 ul.products li.product,
.woocommerce-page.columns-6 ul.products li.product{
  float:none;
  width:auto;
  min-width:0;
  max-width:100%;
  margin:0;
}

/* Relacionados: mismo sistema de cuadricula, 3 columnas. */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .up-sells ul.products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* El boton "Filtrar" solo existe donde hace falta: por debajo de 860px,
   que es donde la barra lateral de filtros se oculta. WooCommerce le pone
   display:inline-block con .woocommerce button.button (0-2-1), por eso
   seguia visible en escritorio; se iguala el peso. */
.shop-layout button.button.shop-filter-toggle{display:none}
@media(max-width:860px){
  .shop-layout button.button.shop-filter-toggle{display:inline-flex}
}

@media(max-width:1100px){
  .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-card__media{max-width:280px}
}
@media(max-width:860px){
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card__media{max-width:none}
}
@media(max-width:520px){
  .woocommerce ul.products{gap:1.8rem 1rem}
  .product-card .woocommerce-loop-product__title{
    font-size:.86rem;
    margin-top:.85rem;
    min-height:2.6em;
  }
}
@media(prefers-reduced-motion:reduce){
  .product-card__media img{transition:none}
}

/* =========================================================================
   Fichas de categoria que imprime WooCommerce dentro de ul.products
   El (13) venia dentro de <mark>, y <mark> en el navegador es AMARILLO.
   Aqui se apaga ese amarillo y la tarjeta se alinea al lenguaje circular.
   ========================================================================= */

.woocommerce mark,
.woocommerce .count,
.woocommerce-loop-category__title mark{
  background:transparent;
  color:var(--hilada-greige);
  font-weight:400;
}
.woocommerce ul.products li.product-category>a{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  text-decoration:none;
}
.woocommerce ul.products li.product-category img{
  width:100%;
  max-width:var(--card-size,290px);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  margin:0;
  box-shadow:inset 0 0 0 1px rgba(27,26,21,.07);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  font-family:var(--font-ui);
  font-size:var(--step-sm);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--hilada-charcoal);
  margin:1rem 0 0;
  padding:0;
}
.woocommerce ul.products li.product-category .count{
  display:block;
  margin-top:.25rem;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* En /shop/ el tema ya dibuja sus propios circulos de colecciones arriba:
   las fichas que repite WooCommerce debajo sobran. */
body.post-type-archive-product .woocommerce ul.products li.product-category{display:none}
body.post-type-archive-product .woocommerce ul.products:not(:has(li.product)){display:none}

/* =========================================================================
   Barra lateral de filtros — widgets nativos de WooCommerce
   Quita vinetas, subrayados y el morado por defecto del slider de precio.
   ========================================================================= */

.shop-sidebar .filter-list{display:grid;gap:clamp(1.8rem,3vw,2.6rem)}
.shop-sidebar .widget{margin:0;padding:0}

/* Titulos de widget: mismo tono discreto que el resto del tema. */
.shop-sidebar .widget>h2,
.shop-sidebar .widget>h3,
.shop-sidebar .widgettitle,
.shop-sidebar .widget-title{
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--hilada-olive);
  margin:0 0 1rem;
  padding:0 0 .7rem;
  border-bottom:1px solid var(--line);
}

/* Listas de categorias: sin vinetas, sin subrayado, con jerarquia clara. */
.shop-sidebar .widget ul{list-style:none;margin:0;padding:0}
.shop-sidebar .widget ul li{margin:0;padding:0}
.shop-sidebar .product-categories li{border-bottom:1px solid rgba(27,26,21,.06)}
.shop-sidebar .product-categories li:last-child{border-bottom:0}
.shop-sidebar .widget ul li a{
  display:inline-block;
  padding:.5rem 0;
  font-size:var(--step-sm);
  font-weight:300;
  line-height:1.4;
  color:var(--hilada-charcoal);
  text-decoration:none;
  transition:color .22s ease;
}
.shop-sidebar .widget ul li a:hover{color:var(--hilada-olive)}
.shop-sidebar .widget ul li .count{
  color:var(--hilada-greige);
  font-size:.72rem;
  letter-spacing:.06em;
}
/* Subcategorias: indentadas con una guia fina, no con vinetas. */
.shop-sidebar .widget ul .children{
  margin:0 0 .4rem .1rem;
  padding-left:.9rem;
  border-left:1px solid var(--line);
}
.shop-sidebar .widget ul .children li{border-bottom:0}
.shop-sidebar .widget ul .children a{
  padding:.32rem 0;
  font-size:.84rem;
  color:var(--hilada-greige);
}
.shop-sidebar .widget ul .children a:hover{color:var(--hilada-olive)}
.shop-sidebar .product-categories .current-cat>a{
  color:var(--hilada-olive);
  font-weight:500;
}

/* Filtro de precio: fuera el morado #a46497 de WooCommerce. */
.shop-sidebar .price_slider_wrapper{padding-top:.3rem}
.shop-sidebar .price_slider_wrapper .ui-slider{
  position:relative;
  height:2px;
  margin:1.4rem 0 1.2rem;
  background:var(--line);
  border:0;
  border-radius:0;
  text-align:left;
}
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-range{
  position:absolute;
  top:0;
  height:100%;
  background:var(--hilada-olive);
  border:0;
  border-radius:0;
}
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle{
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  margin-left:-7px;
  transform:translateY(-50%);
  background:var(--hilada-olive);
  border:0;
  border-radius:50%;
  cursor:pointer;
  outline:0;
  transition:box-shadow .2s ease;
}
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle:hover,
.shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle:focus-visible{
  box-shadow:0 0 0 5px rgba(95,107,73,.2);
}
.shop-sidebar .price_slider_amount{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  font-size:var(--step-sm);
}
.shop-sidebar .price_slider_amount .price_label{
  order:1;
  color:var(--hilada-greige);
  font-size:.8rem;
}
.shop-sidebar .price_slider_amount .price_label span{color:var(--hilada-charcoal)}
.shop-sidebar .price_slider_amount .button{
  order:2;
  min-height:40px;
  padding:.5rem 1.4rem;
  font-family:var(--font-ui);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hilada-bone);
  background:var(--hilada-olive);
  border:1px solid var(--hilada-olive);
  border-radius:0;
  cursor:pointer;
  transition:background-color .24s ease,border-color .24s ease;
}
.shop-sidebar .price_slider_amount .button:hover{
  background:var(--hilada-charcoal);
  border-color:var(--hilada-charcoal);
}

/* Ficha: solo datos reales. Si no hay medida, no hay fila. */
.spec-list{margin:0;padding:0}
.spec-row{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:0}
.spec-row dt{margin:0;color:var(--hilada-greige);font-size:var(--step-sm);letter-spacing:.04em}
.spec-row dd{margin:0}
.product-accordions{margin:2rem 0 0;border-top:1px solid var(--line)}
.product-accordions details{border-bottom:1px solid var(--line)}
.product-accordions summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.9rem 0;cursor:pointer;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.product-accordions summary::-webkit-details-marker{display:none}
.product-accordions summary::after{content:"+";font-family:var(--font-ui);font-size:1.1rem;line-height:1;color:var(--hilada-olive-medium)}
.product-accordions details[open] summary::after{content:"–"}
.product-accordions__body{padding:0 0 1.2rem}
.product-accordions__body>*:last-child{margin-bottom:0}

/* Aviso de mayoreo en la ficha: puente a cotizacion, sin gritar. */
.wholesale-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:1.4rem 0 0;padding:.9rem 1.1rem;background:var(--hilada-bone-secondary);font-size:var(--step-sm)}
.wholesale-note span{color:var(--hilada-charcoal)}
.link-underline{color:var(--hilada-olive);text-decoration:underline;text-underline-offset:.22em}
.link-underline:hover{color:var(--hilada-charcoal)}

/* Cierre de tienda: corporativo + historia. Aire generoso, un solo acento. */
.shop-outro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:clamp(3rem,6vw,5rem) 0 0}
.shop-outro__block{display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;min-height:300px;padding:clamp(1.6rem,3vw,2.6rem);background:var(--hilada-olive);color:var(--hilada-bone)}
.shop-outro__block .eyebrow{color:var(--hilada-sand)}
.shop-outro__block h2{font-size:var(--step-lg);margin:0 0 .6rem}
.shop-outro__block p{margin:0 0 1.4rem;max-width:44ch}
.shop-outro__block--quiet{background:var(--hilada-bone-secondary);color:var(--hilada-charcoal)}
.shop-outro__block--quiet .eyebrow{color:var(--hilada-olive-medium)}
.shop-outro .button-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto}
.shop-outro__block .button{background:var(--hilada-bone);border-color:var(--hilada-bone);color:var(--hilada-olive)}
.shop-outro__block .button:hover{background:var(--hilada-sand);border-color:var(--hilada-sand);color:var(--hilada-charcoal)}
.shop-outro__block .button--outline{background:transparent;color:var(--hilada-bone);border-color:rgba(243,240,231,.65)}
.shop-outro__block .button--outline:hover{background:var(--hilada-bone);border-color:var(--hilada-bone);color:var(--hilada-olive)}
.shop-outro__block--quiet .button{background:var(--hilada-olive);border-color:var(--hilada-olive);color:var(--hilada-bone)}
.shop-outro__block--quiet .button:hover{background:var(--hilada-charcoal);border-color:var(--hilada-charcoal)}
.shop-outro__block--quiet .button--outline{background:transparent;color:var(--hilada-charcoal);border-color:var(--line)}
.shop-outro__block--quiet .button--outline:hover{background:var(--hilada-olive);border-color:var(--hilada-olive);color:var(--hilada-bone)}

@media(max-width:1100px){.collection-card__media{max-width:180px}}
@media(max-width:860px){.shop-outro{grid-template-columns:1fr}.shop-outro__block{min-height:240px}}
@media(max-width:520px){
  .collections__grid{grid-template-columns:repeat(3,1fr);gap:.9rem}
  .collection-card__media{max-width:none}
  .spec-row{grid-template-columns:1fr;gap:.15rem}
  .spec-row dd{margin-bottom:.2rem}
}