/* ============================================
   WOOCOMMERCE CSS PERSONALIZADO
   America Cafe Trip Theme
   ============================================ */

/* ---- Reset selectores WC ---- */
.woocommerce-page .woocommerce,
.woocommerce {
    font-family: var(--font-body);
    color: var(--color-text-dark);
}

/* ---- Mensajes de notificación ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-top-color: var(--color-gold) !important;
    background-color: var(--color-cream) !important;
    color: var(--color-espresso) !important;
    padding: var(--space-4) var(--space-5) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-5) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.woocommerce-error {
    border-top-color: var(--color-error) !important;
    background-color: rgba(204, 51, 51, 0.06) !important;
    color: var(--color-error) !important;
}

/* ---- Rating stars ---- */
.star-rating,
.woocommerce-product-rating .star-rating {
    font-size: var(--text-sm) !important;
    color: var(--color-gold) !important;
    height: auto !important;
}

.star-rating::before {
    color: var(--color-latte) !important;
}

.star-rating span::before {
    color: var(--color-gold) !important;
}

/* ---- Precio ---- */
.woocommerce-Price-amount,
.price .amount {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-espresso) !important;
    /* Evitar que bdi se convierta en bloque */
    display: inline !important;
}

.woocommerce-Price-amount bdi {
    display: inline !important;
    vertical-align: baseline !important;
}

/* Precio de oferta en rojo */
ins .woocommerce-Price-amount {
    color: var(--color-error) !important;
}

/* Precio original tachado */
del .woocommerce-Price-amount {
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.75em !important;
}

/* ---- Precio: del e ins en línea (no apilados) ---- */
.woocommerce span.price,
.product-detail-price span.price {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}

.woocommerce span.price del,
.woocommerce span.price ins {
    display: inline-flex !important;
    align-items: baseline !important;
}

/* Símbolo de moneda: pequeño, alineado al texto, sin superíndice */
.woocommerce-Price-currencySymbol {
    font-size: 0.6em !important;
    vertical-align: baseline !important;
    font-weight: 400 !important;
    margin-right: 1px !important;
}

/* ---- Botón agregar al carrito ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--color-espresso) !important;
    color: var(--color-cream) !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: var(--text-sm) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-3) var(--space-6) !important;
    border: 2px solid var(--color-espresso) !important;
    transition: all var(--transition-base) !important;
    cursor: pointer !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-espresso) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-espresso) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--color-gold-light) !important;
    border-color: var(--color-gold-light) !important;
}

/* ---- Campo de cantidad ---- */
.woocommerce .quantity .qty {
    border: 1px solid var(--color-cappuccino) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-3) var(--space-3) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    color: var(--color-espresso) !important;
    background-color: var(--color-white) !important;
    width: 70px !important;
    text-align: center !important;
}

/* ---- Formularios ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid var(--color-cappuccino) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    color: var(--color-text-dark) !important;
    background-color: var(--color-white) !important;
    transition: border-color var(--transition-fast) !important;
    outline: none !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
}

.woocommerce form .form-row label {
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-medium) !important;
    margin-bottom: var(--space-2) !important;
}

.woocommerce form .form-row label .required {
    color: var(--color-error) !important;
}

/* ---- Tabla del carrito ---- */
.woocommerce-cart-form__cart-item td,
.woocommerce-cart-form__cart-item th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
    padding: var(--space-4) !important;
    border-bottom: 1px solid var(--color-latte) !important;
    vertical-align: middle !important;
}

.woocommerce table.shop_table th {
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
    background-color: var(--color-cream) !important;
}

.woocommerce table.shop_table {
    border: 1px solid var(--color-latte) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

/* ---- Resumen del carrito ---- */
.woocommerce .cart_totals,
.woocommerce .order-total {
    background-color: var(--color-cream) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
}

.woocommerce .cart_totals h2 {
    font-family: var(--font-display) !important;
    font-size: var(--text-xl) !important;
    color: var(--color-espresso) !important;
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-3) !important;
    border-bottom: 2px solid var(--color-gold) !important;
}

.woocommerce .cart_totals .order-total .amount {
    font-size: var(--text-2xl) !important;
}

/* ---- Checkout ---- */
.woocommerce #payment {
    background-color: var(--color-cream) !important;
    border-radius: var(--radius-lg) !important;
}

.woocommerce #payment div.payment_box {
    background-color: rgba(201, 168, 76, 0.1) !important;
    border-radius: var(--radius-md) !important;
}

.woocommerce #payment ul.payment_methods li {
    padding: var(--space-3) !important;
    border-bottom: 1px solid var(--color-latte) !important;
}

.woocommerce #payment ul.payment_methods li label {
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
}

/* ---- Mi cuenta ---- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: var(--color-cream) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: var(--space-1) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-medium) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-espresso) !important;
    color: var(--color-cream) !important;
}

/* ---- Resultados de búsqueda ---- */
.woocommerce-result-count {
    font-size: var(--text-sm) !important;
    color: var(--color-text-muted) !important;
}

/* ---- Selector de ordenamiento ---- */
.woocommerce-ordering select {
    border: 1px solid var(--color-cappuccino) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-text-medium) !important;
    background-color: var(--color-white) !important;
    outline: none !important;
    cursor: pointer !important;
}

/* ---- Badge de venta ---- */
.woocommerce span.onsale {
    background-color: var(--color-error) !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: 0.05em !important;
}

/* ---- Breadcrumb ---- */
.woocommerce-breadcrumb {
    font-size: var(--text-sm) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-top: var(--space-3) !important;
}

.woocommerce-breadcrumb a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-gold) !important;
}

/* ---- Paginación ---- */
.woocommerce nav.woocommerce-pagination ul {
    display: flex !important;
    gap: var(--space-2) !important;
    list-style: none !important;
    padding: 0 !important;
    justify-content: center !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--color-cappuccino) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-medium) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--color-espresso) !important;
    border-color: var(--color-espresso) !important;
    color: var(--color-white) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-espresso) !important;
}

/* ---- Variaciones de producto ---- */
.variations td,
.variations th {
    padding: var(--space-3) 0 !important;
    border: none !important;
}

.variations label {
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-medium) !important;
}

.variations select {
    border: 1px solid var(--color-cappuccino) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    color: var(--color-text-dark) !important;
    background-color: var(--color-white) !important;
    outline: none !important;
    cursor: pointer !important;
    min-width: 150px !important;
}

/* ---- Reseñas ---- */
#reviews {
    margin-top: var(--space-6) !important;
}

#reviews h3 {
    font-family: var(--font-display) !important;
    font-size: var(--text-xl) !important;
    color: var(--color-espresso) !important;
    margin-bottom: var(--space-4) !important;
}

.comment-text .description {
    font-size: var(--text-base) !important;
    color: var(--color-text-medium) !important;
    line-height: 1.7 !important;
}

.review_form #comment {
    min-height: 100px !important;
}

/* ---- Productos relacionados ---- */
.related > h2,
.upsells > h2 {
    font-family: var(--font-display) !important;
    font-size: var(--text-2xl) !important;
    color: var(--color-espresso) !important;
    margin-bottom: var(--space-6) !important;
}

.related ul.products,
.upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-5) !important;
}

/* ---- Imagen de producto en mini carrito ---- */
.widget_shopping_cart .cart_list li a.remove {
    color: var(--color-error) !important;
}

/* Responsive WooCommerce */
@media (max-width: 768px) {
    .related ul.products,
    .upsells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .woocommerce-cart-form__cart-item .product-thumbnail {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .related ul.products,
    .upsells ul.products {
        grid-template-columns: 1fr !important;
    }
}