/* TopStore UX, 2026-10-16. Capa reversible sobre el tema existente. */
:root{
  --ts-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ts-ui-text: #202832;
  --ts-ui-muted: #616b76;
  --ts-ui-border: #e2e6eb;
}
html body{ font-family: var(--ts-ui-font) !important; color: var(--ts-ui-text); grid-template-columns: minmax(0, 1fr); }
html body #main-container{ min-width: 0; width: 100%; }
html body #main h1, html body #main h2, html body #main h3,
html body #footer h3, html body #footer h5,
html body .tsf, html body .tsf button, html body .tsf input,
html body .ts-entrega__titulo, html body .ts-pago__titulo,
html body .ts-buscar__sug, html body .ct-pagination,
html body .woocommerce-result-count, html body .woocommerce-ordering select{
  font-family: var(--ts-ui-font) !important;
  letter-spacing: normal;
}
html body :is(a,button,input,select,textarea):focus-visible{
  outline: 3px solid #a15600 !important;
  outline-offset: 3px;
}
html body #header .ct-menu-link{ font-family: var(--ts-ui-font) !important; letter-spacing: .015em !important; }
html body #header .ts-buscar{ border-color: #cdd3db; border-radius: 10px; }
html body #header .ts-buscar__campo{ color: #202832; }
html body #header .ts-buscar__campo::placeholder{ color: #68727d; opacity: 1; }
html body .ts-ofertas-panel,
html body .ts-ofertas-panel__titulo,
html body .ts-ofertas-panel__sub,
html body .ts-ofertas-panel__ver{ font-family: var(--ts-ui-font) !important; letter-spacing: normal !important; }
html body .ts-ofertas-panel__titulo{ color: #202832; font-size: 24px; text-transform: none; line-height: 1.25; }
html body .ts-ofertas-panel__fuego{ display: none; }
html body .ts-ofertas-panel__sub{ color: var(--ts-ui-muted); font-size: 14px; }
html body .ts-ofertas-panel__ver{ color: #965100 !important; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
html body #main .titulo-seccion{ font-size: 28px !important; line-height: 1.25; letter-spacing: -.5px !important; color: #202832 !important; text-shadow: none !important; transform: none !important; text-transform: none; }
html body #main .categoria-header .categoria-titulo{ font-family: var(--ts-ui-font) !important; }

/* Tarjetas: imagen contenida, títulos alineados y acción al final. */
/* Todos los listados del catálogo usan cuatro columnas; el inicio conserva su carrusel. */
@media (min-width:992px){
  html body:not(.home) #main ul.products:not(.ts-fila){
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  }
}
html body #main ul.products > li.product{
  min-width: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--ts-ui-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgb(26 34 44 / .035) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
@media (hover:hover){
  html body #main ul.products > li.product:hover{ border-color: #dfb469 !important; box-shadow: 0 10px 24px rgb(26 34 44 / .1) !important; transform: translateY(-4px) !important; }
  html body #main ul.products > li.product:hover img{ transform: scale(1.045) !important; }
}
html body #main ul.products > li.product .ct-media-container{ overflow: hidden; }
html body #main ul.products > li.product img{ transition: transform .3s ease !important; }
html body #main ul.products > li.product figure{ margin: 0 0 16px !important; }
html body #main ul.products > li.product .ct-media-container{ height: 168px !important; }
html body #main ul.products > li.product img{ height: 168px !important; width: 100% !important; margin: 0 !important; object-fit: contain !important; transform: none !important; }
html body #main ul.products > li.product h2{
  height: 84px !important; min-height: 84px !important; max-height: 84px;
  margin: 0 0 12px !important; text-align: left !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 21px !important;
}
html body #main ul.products > li.product h2 a{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: #29323d; }
html body #main ul.products > li.product .price{ text-align: left !important; min-height: 52px; margin: 0 0 14px !important; line-height: 1.4; }
html body #main ul.products > li.product .price .sale-price{ display: flex !important; flex-direction: column-reverse !important; align-items: flex-start !important; gap: 2px; }
html body #main ul.products > li.product .price ins,
html body #main ul.products > li.product .price > .woocommerce-Price-amount{ font-size: 20px !important; font-weight: 700 !important; color: #202832; }
html body #main ul.products > li.product .price ins{ color: #c33b28; }
html body #main ul.products > li.product .price del{ color: #717983 !important; font-size: 12px !important; font-weight: 400; }
html body #main ul.products > li.product .ct-woo-card-actions{ width: 100% !important; max-width: none !important; }
html body #main ul.products > li.product .ct-woo-card-actions .button{
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; max-width: none !important; min-height: 44px !important;
  margin: 0 !important; padding: 10px 8px !important; border-radius: 8px !important;
  font-family: var(--ts-ui-font) !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.3;
}
html body #main .woo-listing-top{ align-items: center; gap: 16px; margin-bottom: 24px; }
html body #main .woocommerce-result-count{ font-size: 13px; color: #616b76; text-transform: none; }
html body #main .woocommerce-ordering select{ min-height: 44px; border: 1px solid #d5dce4; border-radius: 8px; color: #29323d; font-size: 13px; background-color: #fff; }
html body .tsf__title{ font-size: 18px; letter-spacing: normal; text-transform: none; }
html body .tsf-group__toggle{ min-height: 48px; font-family: var(--ts-ui-font) !important; font-size: 13px; letter-spacing: normal; text-transform: none; }
html body .tsf-option{ min-height: 36px; }

/* La ficha mantiene precios y condiciones, con mejor jerarquía de lectura. */
html body.single-product #main h1.product_title{ font-size: clamp(23px,2vw,30px) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.4px !important; }
html body.single-product #main .woocommerce-product-details__short-description{ color: #52606d; font-size: 15px; line-height: 1.65; }
html body.single-product #main .woocommerce-breadcrumb{ font-family: var(--ts-ui-font) !important; font-size: 12px; line-height: 1.6; }
html body.single-product #main .ts-compra{ border-color: #e7d8bd; background: #fffcf6; box-shadow: 0 3px 14px rgb(40 32 16 / .04); }
html body.single-product #main .ts-compra .single_add_to_cart_button,
html body.single-product #main .ts-compra .ts-wa{ border-radius: 8px !important; min-height: 46px; }
html body.single-product #main .ts-entrega__titulo,
html body.single-product #main .ts-pago__titulo{ font-size: 15px; text-transform: none; letter-spacing: normal; }
html body.woocommerce-checkout #main form.checkout label{ font-family: var(--ts-ui-font) !important; font-size: 14px; color: #334155; }
html body.woocommerce-checkout #main #order_review .order-total{ font-size: 20px; }
html body #footer :is(h3,h5){ font-family: var(--ts-ui-font) !important; font-size: 14px !important; text-transform: none !important; letter-spacing: normal !important; color: #29323d !important; }
html body #footer a{ text-underline-offset: 3px; }

@media (min-width:1000px){ html body #main .woo-listing-top #tsf-fab{ display: none !important; } }
@media (max-width:999px){
  html body{ grid-template-columns: minmax(0,1fr) !important; }
  html body #header [data-device="mobile"] .ct-sticky-container{ height: var(--ts-ux-header-height,108px) !important; }
  html body #main-container, html body .ct-drawer-canvas{ min-width: 0; max-width: 100%; }
  html body #header [data-device="mobile"] [data-column="end"] [data-items="primary"]{ gap: 8px !important; }
  html body #header [data-device="mobile"] [data-row="middle"] > .ct-container{ column-gap: 0 !important; }
  html body #header [data-device="mobile"] .site-logo-container{ min-height: 44px !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html body #header [data-device="mobile"] .ct-cart-item,
  html body #header [data-device="mobile"] .ct-header-trigger{ min-width: 44px; min-height: 44px; justify-content: center; }
  html body #header [data-row="top"] > .ct-container{ grid-template-columns: minmax(0,1fr) auto !important; }
  html body #header .ts-buscar{ min-width: 0; }
  html body #header .ts-buscar__campo{ width: 0; min-width: 0; flex: 1 1 auto; font-size: 16px; }
  html body #main .woo-listing-top{ display: flex !important; flex-wrap: wrap; gap: 12px; }
  html body #main .woo-listing-top .woocommerce-result-count{ display: block !important; flex: 1 0 100%; margin: 0 !important; }
  html body #main .woo-listing-top #tsf-fab{
    display: inline-flex !important; position: static !important; inset: auto !important;
    transform: none !important; min-height: 44px; padding: 10px 14px;
    z-index: auto !important;
    border: 1px solid #d5dce4; border-radius: 8px; box-shadow: none;
    background: #fff; color: #29323d; font-family: var(--ts-ui-font); font-size: 14px;
  }
  html body #main .woo-listing-top .woocommerce-ordering{ display: block !important; flex: 1 1 160px; min-width: 0; margin: 0 !important; }
  html body #main .woo-listing-top .woocommerce-ordering select{ display: block !important; width: 100%; padding: 8px 28px 8px 10px; }
  html body #main .woo-listing-top .ct-sort-icon{ display: none !important; }
}
@media (max-width:689px){
  :root{ --ts-lado: 16px; }
  html body.home{ --ts-por-vista: 1; }
  html body #header [data-row="top"] > .ct-container{ padding-left: 16px !important; padding-right: 16px !important; }
  html body #main .titulo-seccion{ font-size: 24px !important; }
  html body .ts-ofertas-panel__titulo{ font-size: 22px; }
  html body:not(.home) #main > .ct-container{ padding-left: 16px !important; padding-right: 16px !important; }
  html body:not(.home) #main ul.products:not(.ts-fila){ display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px 10px !important; padding: 0 !important; width: 100% !important; }
  html body #main ul.products > li.product{ display: flex !important; flex-direction: column; padding: 12px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
  html body #main ul.products > li.product .ct-media-container,
  html body #main ul.products > li.product img{ height: 126px !important; }
  html body #main ul.products > li.product h2{ font-size: 13px !important; line-height: 19px !important; min-height: 76px !important; height: auto !important; max-height: none !important; }
  html body #main ul.products > li.product h2 a{ display: block; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
  html body #main ul.products > li.product .price ins,
  html body #main ul.products > li.product .price > .woocommerce-Price-amount{ font-size: 18px !important; }
  html body #main ul.products > li.product .ct-woo-card-actions{ margin-top: auto !important; }
  html body #main ul.products > li.product .ct-woo-card-actions .button{ font-size: 12px !important; min-height: 48px !important; white-space: normal; overflow-wrap: normal; }
  html body.home #main .ts-carrusel{ padding-bottom: 56px; }
  html body.home #main .ts-carrusel.is-desplazable .ts-carrusel__flecha{ display: flex !important; top: auto; bottom: 0; transform: none !important; width: 44px; height: 44px; }
  html body.home #main .ts-carrusel__flecha--prev{ left: auto; right: 56px; }
  html body.home #main .ts-carrusel__flecha--next{ right: 0; }
  html body.tax-product_cat #main .hero-section{ height: 170px !important; }
  html body.tax-product_cat #main .hero-section .entry-header{ height: 170px !important; min-height: 0 !important; padding: 20px 16px !important; }
  html body.tax-product_cat #main .hero-section > figure,
  html body.tax-product_cat #main .hero-section > figure .ct-media-container{ height: 170px !important; min-height: 0 !important; }
  html body.tax-product_cat #main .hero-section > figure img{ height: 170px !important; object-fit: cover !important; }
  html body.woocommerce-checkout #main form.checkout :is(input,select,textarea){ font-size: 16px !important; }
  /* Carrito: margen lateral y acción de eliminar con una superficie táctil propia. */
  html body.woocommerce-cart #main .woocommerce-cart-form{ padding-left: 16px; padding-right: 16px; }
  html body.woocommerce-cart #main .product-mobile-actions{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 44px;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
  }
  html body.woocommerce-cart #main .product-mobile-actions .quantity{ grid-column: 1; grid-row: 1; margin: 0; }
  html body.woocommerce-cart #main .product-mobile-actions .ct-product-multiply-symbol{ display: none; }
  html body.woocommerce-cart #main .product-mobile-actions > .amount{ grid-column: 1; grid-row: 2; font-size: 15px; white-space: nowrap; }
  html body.woocommerce-cart #main .product-mobile-actions a.remove{
    grid-column: 2; grid-row: 1 / span 2;
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important;
    min-width: 44px; min-height: 44px;
    margin: 0 !important; padding: 0 !important;
    border: 1px solid #e2e6eb; border-radius: 8px;
    background: #f8fafc; color: #61707c;
  }
  html body.woocommerce-cart #main .product-mobile-actions a.remove svg{ width: 16px; height: 16px; }
}
@media (prefers-reduced-motion:reduce){
  html body #main ul.products > li.product,
  html body #main ul.products > li.product img{ transition: none !important; }
  html body #main ul.products > li.product:hover,
  html body #main ul.products > li.product:hover img{ transform: none !important; }
  html body #main ul.products.ts-fila{ scroll-behavior: auto; }
}