/* Bambinos - Custom styles for WordPress */

html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #FFFDF7;
}

::-webkit-scrollbar-thumb {
    background: #FFD3B6;
    border-radius: 10px;
    border: 3px solid #FFFDF7;
}

::-webkit-scrollbar-thumb:hover {
    background: #FF8B94;
}

/* Selection color */
::selection {
    background: #FFD93D;
    color: #2D3142;
}

/* Fixed navbar — always solid, no visual movement */
#navbar {
    transform: translateZ(0);
    will-change: auto;
}

/* Card hover glow effects */
.card-glow:hover {
    box-shadow: 0 25px 50px -12px rgba(255, 147, 154, 0.25);
}

/* Button press effect */
button:active,
a:active {
    transform: scale(0.98);
}

/* Floating shapes animation variants */
@keyframes float-vertical {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(3deg); }
    66% { transform: translateY(8px) rotate(-2deg); }
}

/* Confetti pieces */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 100;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Reveal on scroll — visible por defecto (progressive enhancement).
   El JS es quien aplica el estado oculto vía inline style antes de animar,
   así que si el JS no corre (bloqueado, error, crawler) el contenido
   sigue viéndose en vez de quedar invisible para siempre. */
.reveal {
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.stagger-children.active > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

/* Wiggle hover for playful elements */
.wiggle-hover:hover {
    animation: wiggle-hover 0.5s ease-in-out;
}

@keyframes wiggle-hover {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #FF8B94 0%, #FFD93D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dotted pattern background */
.dots-pattern {
    background-image: radial-gradient(#2D3142 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.05;
}

/* Input autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #FFFDF7 inset;
    box-shadow: 0 0 0px 1000px #FFFDF7 inset;
    -webkit-text-fill-color: #2D3142;
}

/* Image loading placeholder shimmer */
.img-loading {
    background: linear-gradient(90deg, #FFFDF7 25%, #FFD3B6 50%, #FFFDF7 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hero decorative dots */
.hero-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#FFD93D 2px, transparent 2px);
    background-size: 30px 30px;
    opacity: 0.15;
}

/* Mobile menu animation */
#mobileMenu {
    transition: all 0.3s ease;
}

#mobileMenu.hidden {
    display: none;
}

/* Smooth image hover zoom container */
.img-zoom-container {
    overflow: hidden;
}

.img-zoom-container img {
    transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.img-zoom-container:hover img {
    transform: scale(1.08);
}

/* Custom focus ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #FFD93D;
    outline-offset: 2px;
}

/* Cart count badge animation */
#cartCount,
#cartCountMobile {
    transition: transform 0.2s ease;
}

#cartCount.bump,
#cartCountMobile.bump {
    transform: scale(1.4);
}

/* Choices.js custom styling */
.choices {
    margin-bottom: 0;
    font-family: 'Nunito', sans-serif;
}

.choices__inner {
    background-color: #FFFDF7;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    min-height: 56px;
    padding: 8px 16px;
    font-size: 1rem;
    color: #2D3142;
    transition: all 0.2s ease;
}

.choices__inner:hover {
    border-color: #A8E6CF;
}

.choices.is-focused .choices__inner {
    border-color: #A8E6CF;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(168, 230, 207, 0.15);
}

.choices__list--single {
    padding: 4px 28px 4px 4px;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: #ffffff;
    border: 2px solid #A8E6CF;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
    margin-top: 8px;
    padding: 8px;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    padding: 12px 16px;
    border-radius: 0.5rem;
    color: #2D3142;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #FFFDF7;
    color: #2D3142;
}

.choices__list--dropdown .choices__item.is-selected,
.choices__list[aria-expanded] .choices__item.is-selected {
    background-color: #A8E6CF;
    color: #2D3142;
    font-weight: 700;
}

.choices[data-type*="select-one"]::after {
    border-color: #2D3142 transparent transparent transparent;
    border-width: 6px;
    right: 16px;
    margin-top: -3px;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #2D3142 transparent;
    margin-top: -9px;
}

/* Legal page content styling */
.legal-content h2 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #2D3142;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.legal-content h3 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #2D3142;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-content ul li {
    list-style: disc;
    margin-bottom: 0.5rem;
}

.legal-content ol li {
    list-style: decimal;
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: #FF8B94;
    font-weight: 600;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* WooCommerce overrides — adaptar al diseño Bambinos */

/* Compensar el navbar fijo en páginas que usan templates por defecto de WC
   (single-product, cart, checkout, my-account) — no tienen su propio pt-32 */
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
    padding-top: 5rem;
}

/* Shop archive */
.woocommerce .products ul,
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* WooCommerce trae un clearfix viejo (::before/::after con content) pensado
   para el grid armado con floats. En un grid de CSS real, ese contenido
   "fantasma" ocupa una celda de verdad y corre todos los productos un lugar
   (por eso en "productos relacionados" el primero aparecía vacío arriba a
   la izquierda). Sacamos el content para que no participen del grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

@media (max-width: 768px) {
    .woocommerce .products ul,
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce .products ul,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

.woocommerce ul.products li.product {
    background: white;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
    transition: all 0.3s ease;
    margin: 0;
    text-align: left;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 25px 50px rgba(45, 49, 66, 0.1);
    transform: translateY(-8px);
}

.woocommerce ul.products li.product img {
    border-radius: 0;
    margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: #2D3142;
    padding: 1.5rem 1.5rem 0.5rem;
}

.woocommerce ul.products li.product .price {
    color: #FF8B94;
    font-weight: 700;
    padding: 0 1.5rem 1rem;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

.woocommerce ul.products li.product .button {
    background: #2D3142;
    color: white;
    border-radius: 0.75rem;
    padding: 0.625rem 1.25rem;
    font-weight: 700;
    margin: 0 1.5rem 1.5rem;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.woocommerce ul.products li.product .button:hover {
    background: #FF8B94;
}

/* WooCommerce messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: #FF8B94;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    background: white;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
}

/* Single product page */
.woocommerce div.product .product_title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: #2D3142;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #FF8B94;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-color: #FF8B94;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #FF8B94;
}

/* Cart page */
.woocommerce table.shop_table {
    border-radius: 1.5rem;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
}

.woocommerce-cart-form table.cart td.actions {
    padding: 1.5rem;
}

/* Checkout page */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border-radius: 0.75rem;
    border: 2px solid #E5E7EB;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: #A8E6CF;
    box-shadow: 0 0 0 4px rgba(168, 230, 207, 0.15);
}

/* WooCommerce buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: #FF8B94;
    color: white;
    border-radius: 1rem;
    padding: 0.875rem 2rem;
    font-weight: 700;
    transition: all 0.2s;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: #FF7A87;
    color: white;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: #FF8B94;
    color: white;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: #FF7A87;
}

/* WooCommerce checkout */
.woocommerce-checkout #payment {
    border-radius: 1.5rem;
    background: white;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
}

/* WooCommerce account */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    transition: background 0.2s;
}

.woocommerce-MyAccount-navigation ul li.is-active {
    background: #FFFDF7;
}

.woocommerce-MyAccount-navigation ul li a {
    color: #2D3142;
    font-weight: 600;
}

/* ==========================================================================
   WooCommerce Blocks (Carrito y Checkout) — adaptar a la estética Bambinos
   Estos bloques (Cart/Checkout) se renderizan client-side y traen su propia
   grilla; solo tocamos tipografía, color y redondeo, sin pelear el layout.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    font-family: 'Nunito', sans-serif;
    color: #2D3142;
}

.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-checkout-order-summary__title {
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    font-weight: 700;
    color: #2D3142;
}

.wc-block-components-order-summary,
.wc-block-components-address-card-wrapper,
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
    background: #fff !important;
    border-radius: 1.5rem !important;
    border-color: rgba(45, 49, 66, 0.08) !important;
}

.wc-block-components-checkout-step {
    background: #fff !important;
    border-radius: 1.5rem !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
    padding: 1.75rem !important;
    margin-bottom: 1.25rem !important;
}

.wc-block-components-checkout-step:last-of-type {
    margin-bottom: 0 !important;
}

.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar > * {
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(45, 49, 66, 0.05);
}

/* Filas del formulario (nombre/apellido, ciudad/región, etc.) — sin esto
   quedan pegadas verticalmente, solo tenían separación horizontal. */
.wc-block-components-address-form,
#contact.wc-block-components-address-form {
    row-gap: 1rem !important;
}

.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input {
    margin-bottom: 0.25rem;
}

/* Vendemos solo productos digitales: no hace falta la dirección postal.
   Se oculta acá y se autocompleta por JS (ver bambinosFillHiddenAddressField
   en main.js) para no romper la validación del checkout. */
.wc-block-components-address-form__address_1 {
    display: none;
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-blocks-components-select__select,
.wc-block-components-country-input input {
    border-radius: 0.75rem !important;
    border-color: rgba(45, 49, 66, 0.15) !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
    border-color: #A8E6CF !important;
    box-shadow: 0 0 0 4px rgba(168, 230, 207, 0.2) !important;
    outline: none !important;
}

/* Cupón — el toggle "Agregar cupón" como un link discreto, no un botón gris.
   El panel colapsado mide ~18px de alto por defecto; con el border-radius de
   1.5rem heredado de .wc-block-components-panel quedaba "cortado" (el radio
   era más grande que la mitad de la altura). Se le da padding vertical al
   botón para que la caja tenga alto real y el radio se vea bien. */
.wc-block-components-totals-coupon.wc-block-components-panel {
    padding: 0 !important;
}

.wc-block-components-totals-coupon.wc-block-components-panel > .wc-block-components-panel__button {
    font-weight: 700;
    color: #2D3142;
    padding: 0.9rem 2.75rem 0.9rem 1.1rem !important;
    width: 100%;
}

.wc-block-components-totals-coupon__input {
    margin-right: 0.5rem;
}

.wc-block-components-totals-coupon__button.contained {
    border-radius: 0.75rem !important;
    background: #2D3142 !important;
}

.wc-block-components-totals-coupon__button.contained:not([aria-disabled="true"]):hover {
    background: #FF8B94 !important;
}

.wc-block-components-radio-control__option {
    border-radius: 1rem !important;
    border-color: rgba(45, 49, 66, 0.12) !important;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__input:checked {
    border-color: #FF8B94 !important;
    accent-color: #FF8B94;
}

.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
    background: #FF8B94 !important;
    border-radius: 1rem !important;
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: #FF7A87 !important;
    transform: translateY(-1px);
}

.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #FF8B94;
    font-weight: 800;
}

.wc-block-components-product-name {
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    color: #2D3142;
}

.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
    border-radius: 0.75rem;
}

/* Sacamos la nota del pedido: no la necesitamos para productos digitales
   con entrega automática por email. */
.wc-block-checkout__order-notes {
    display: none;
}

/* Resumen del pedido (carrito y checkout) — sin la descripción del producto,
   queda muy cargado para un simple resumen de compra. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
    display: none;
}

/* Badge de cantidad prolijo sobre la miniatura, en vez del círculo genérico */
.wc-block-components-order-summary-item__quantity {
    background: #FF8B94 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

/* Filtro de categorías en el home — estado activo, sin importar de qué
   clases haya partido el pill (el de "Ver todos" ya nace activo). */
.bambinos-home-filter-pill.is-active {
    background: #2D3142 !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ==========================================================================
   Carrito lateral (drawer)
   ========================================================================== */

#cartDrawerOverlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#cartDrawer.is-open {
    transform: translateX(0);
}

.cart-drawer-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem;
    background: #fff;
    border-radius: 1.25rem;
    margin-bottom: 0.75rem;
}

.cart-drawer-item img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.cart-drawer-qty {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid rgba(45, 49, 66, 0.12);
    border-radius: 0.6rem;
    overflow: hidden;
}

.cart-drawer-qty button {
    width: 1.75rem;
    border: none;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

.cart-drawer-qty button:hover {
    background: #FFFDF7;
}

.cart-drawer-qty span {
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border-left: 2px solid rgba(45, 49, 66, 0.12);
    border-right: 2px solid rgba(45, 49, 66, 0.12);
}

.cart-drawer-recommend {
    border: 2px dashed rgba(255, 139, 148, 0.3);
    border-radius: 1.25rem;
    padding: 1rem;
}

/* ==========================================================================
   Single Product — página de producto individual
   ========================================================================== */

/* En single-product hay una barra fija de compra en mobile: subir el botón de WhatsApp para que no choquen */
@media (max-width: 1023px) {
    body.single-product #whatsappFloat {
        bottom: 6rem;
    }
}

.bambinos-product-gallery .woocommerce-product-gallery {
    position: relative;
}

.bambinos-product-gallery img {
    border-radius: 1.5rem;
    width: 100%;
    object-fit: cover;
}

/* Ícono de lupa (zoom) de WooCommerce — se saca directamente, no aporta nada
   y quedaba mal posicionado sin importar cómo se lo reubicara. */
.bambinos-product-gallery .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* El form completo es flex: la cantidad ocupa lo que necesita y el botón
   "Agregar al carrito" se estira para llenar todo el resto del ancho
   disponible (con o sin selector de cantidad al lado). */
.bambinos-product-form form.cart {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.bambinos-product-form .quantity {
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
}

.bambinos-product-form .quantity.bambinos-qty-hidden {
    display: none;
}

.bambinos-product-form form.cart .single_add_to_cart_button {
    flex: 1;
}

.bambinos-qty-stepper {
    align-items: stretch;
    border: 2px solid rgba(45, 49, 66, 0.12);
    border-radius: 0.9rem;
    overflow: hidden;
    background: #fff;
}

.bambinos-qty-stepper .bambinos-qty-btn {
    width: 2.75rem;
    border: none;
    background: transparent;
    color: #2D3142;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.bambinos-qty-stepper .bambinos-qty-btn:hover {
    background: #FFFDF7;
}

.bambinos-qty-stepper .bambinos-qty-btn:active {
    background: #FFD3B6;
}

.bambinos-product-form .quantity input.qty {
    width: 3.25rem;
    border: none;
    border-left: 2px solid rgba(45, 49, 66, 0.12);
    border-right: 2px solid rgba(45, 49, 66, 0.12);
    text-align: center;
    font-weight: 700;
    padding: 0.875rem 0.25rem;
    -moz-appearance: textfield;
}

.bambinos-product-form .quantity input.qty::-webkit-inner-spin-button,
.bambinos-product-form .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bambinos-product-form .quantity input.qty:focus {
    outline: none;
    background: #FFFDF7;
}

.bambinos-product-form .button {
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    font-size: 1.05rem;
}

.related.products {
    margin-top: 1rem;
}

.related.products > h2 {
    font-family: 'Baloo 2', 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #2D3142;
    margin-bottom: 2rem;
    text-align: center;
}

/* Productos relacionados: salta de 1 a 3 columnas directo (sin el paso de 2)
   para que 3 productos siempre queden parejos en una sola fila, en vez de
   dejar uno solo colgando en la segunda fila con un hueco al lado. */
@media (min-width: 640px) {
    .related.products ul.products,
    .related.products .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-display {
        letter-spacing: -0.01em;
    }

    .woocommerce .products ul,
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}