/* ============================================================
   MAS Diseño Tienda — v1.0.0
   Paleta: primario #0099ff · navy #16324f · fondo #f5f8fc
   Secciones: 1) Catálogo / grillas  2) Producto  3) Carrito
   ============================================================ */

:root {
    --mas-primary: #0099ff;
    --mas-primary-dark: #007fd4;
    --mas-navy: #16324f;
    --mas-bg-soft: #f5f8fc;
    --mas-border: #e4ecf4;
    --mas-radius: 16px;
    --mas-shadow: 0 2px 8px rgba(22, 50, 79, .06);
    --mas-shadow-hover: 0 14px 30px rgba(0, 153, 255, .18);
}

/* ============================================================
   1) CATÁLOGO — tarjetas de curso (shop, categorías y grillas
      insertadas con Elementor/Woodmart)
   ============================================================ */

.wd-product.product-grid-item {
    background: #fff;
    border: 1px solid var(--mas-border);
    border-radius: var(--mas-radius);
    overflow: hidden;
    box-shadow: var(--mas-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
    margin-bottom: 30px;
}

.wd-product.product-grid-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--mas-shadow-hover);
    border-color: rgba(0, 153, 255, .35);
}

/* Imagen a sangre completa arriba */
.wd-product.product-grid-item .product-element-top {
    border-radius: 0;
    margin: 0;
}

.wd-product.product-grid-item .product-element-top img {
    width: 100%;
    transition: transform .4s ease;
}

.wd-product.product-grid-item:hover .product-element-top img {
    transform: scale(1.04);
}

/* Cuerpo de la tarjeta */
.wd-product.product-grid-item .product-element-bottom {
    padding: 18px 20px 22px;
    text-align: left;
}

/* Chip de categoría */
.wd-product .wd-product-cats {
    margin-bottom: 8px;
}

.wd-product .wd-product-cats a {
    display: inline-block;
    background: var(--mas-bg-soft);
    color: var(--mas-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 6px 4px 0;
}

.wd-product .wd-product-cats a:hover {
    background: var(--mas-primary);
    color: #fff;
}

/* Título del curso */
.wd-product .wd-entities-title,
.wd-product .wd-entities-title a {
    color: var(--mas-navy);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
}

.wd-product .wd-entities-title a:hover {
    color: var(--mas-primary);
}

/* Precio */
.wd-product .price {
    font-size: 20px;
    font-weight: 800;
    color: var(--mas-navy);
}

.wd-product .price del {
    font-size: 14px;
    font-weight: 400;
    color: #9aa8b8;
    margin-inline-end: 8px;
}

.wd-product .price ins {
    text-decoration: none;
    color: var(--mas-primary);
}

/* Botón agregar al carrito */
.wd-product .add_to_cart_button,
.wd-product a.button {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(135deg, var(--mas-primary), var(--mas-primary-dark)) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 153, 255, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

.wd-product .add_to_cart_button:hover,
.wd-product a.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 153, 255, .4);
}

/* Etiqueta de oferta (-4%) */
.wd-product .onsale,
.wd-product .product-label {
    background: linear-gradient(135deg, #e91e63, #ff9800) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(233, 30, 99, .35);
}

/* ============================================================
   2) PÁGINA DE PRODUCTO (interior del curso)
   ============================================================ */

.single-product .product_title {
    color: var(--mas-navy);
    font-weight: 800;
    line-height: 1.2;
}

/* Bloque de precio destacado */
.single-product .summary .price,
.single-product .wd-single-price .price {
    display: inline-block;
    background: var(--mas-bg-soft);
    border: 1px solid var(--mas-border);
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 28px;
    font-weight: 800;
    color: var(--mas-navy);
}

.single-product .summary .price del,
.single-product .wd-single-price .price del {
    font-size: 17px;
    color: #9aa8b8;
    font-weight: 400;
}

.single-product .summary .price ins,
.single-product .wd-single-price .price ins {
    text-decoration: none;
    color: var(--mas-primary);
}

/* Imagen del curso con marco redondeado */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery img {
    border-radius: var(--mas-radius);
    overflow: hidden;
}

.single-product .woocommerce-product-gallery {
    box-shadow: var(--mas-shadow);
}

/* Botón de compra grande */
.single-product .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--mas-primary), var(--mas-primary-dark)) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 0;
    border-radius: 12px;
    padding: 16px 40px;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(0, 153, 255, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.single-product .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 153, 255, .45);
}

/* Descripción corta con separador sutil */
.single-product .woocommerce-product-details__short-description,
.single-product .wd-single-short-desc {
    color: #4a5a6a;
    line-height: 1.7;
    border-top: 1px solid var(--mas-border);
    padding-top: 18px;
    margin-top: 18px;
}

/* Pestañas / acordeón de información (temario, detalles, etc.) */
.single-product .wd-accordion-title,
.single-product .woocommerce-tabs .tabs li a {
    color: var(--mas-navy);
    font-weight: 700;
}

.single-product .wd-accordion-title.wd-active,
.single-product .woocommerce-tabs .tabs li.active a {
    color: var(--mas-primary);
}

.single-product .woocommerce-Tabs-panel {
    background: var(--mas-bg-soft);
    border: 1px solid var(--mas-border);
    border-radius: var(--mas-radius);
    padding: 26px 30px;
    color: #3d4d5d;
    line-height: 1.7;
}

/* Metadatos (SKU, categorías) más discretos */
.single-product .product_meta {
    font-size: 13px;
    color: #8296aa;
    border-top: 1px solid var(--mas-border);
    padding-top: 14px;
    margin-top: 20px;
}

.single-product .product_meta a {
    color: var(--mas-primary);
}

/* ============================================================
   3) CARRITO
   ============================================================ */

/* Tabla de productos como tarjeta */
.woocommerce-cart-form .shop_table {
    background: #fff;
    border: 1px solid var(--mas-border) !important;
    border-radius: var(--mas-radius);
    overflow: hidden;
    box-shadow: var(--mas-shadow);
    border-collapse: separate;
}

.woocommerce-cart-form .shop_table th {
    background: var(--mas-bg-soft);
    color: var(--mas-navy);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    padding: 14px 18px;
    border: 0 !important;
}

.woocommerce-cart-form .shop_table td {
    padding: 18px;
    border: 0 !important;
    border-top: 1px solid var(--mas-border) !important;
    vertical-align: middle;
}

/* Miniatura del curso */
.woocommerce-cart-form .product-thumbnail img {
    border-radius: 10px;
    box-shadow: var(--mas-shadow);
    min-width: 70px;
}

/* Nombre del curso */
.woocommerce-cart-form .product-name a {
    color: var(--mas-navy);
    font-weight: 700;
}

.woocommerce-cart-form .product-name a:hover {
    color: var(--mas-primary);
}

/* Precios en la tabla */
.woocommerce-cart-form .product-price .amount,
.woocommerce-cart-form .product-subtotal .amount {
    color: var(--mas-navy);
    font-weight: 700;
}

/* Botón de eliminar */
.woocommerce-cart-form .product-remove .remove {
    background: #fceef1 !important;
    color: #e91e63 !important;
    border-radius: 50%;
    transition: transform .2s ease;
}

.woocommerce-cart-form .product-remove .remove:hover {
    background: #e91e63 !important;
    color: #fff !important;
    transform: rotate(90deg);
}

/* Selector de cantidad */
.woocommerce-cart-form .quantity input {
    border: 1px solid var(--mas-border);
    border-radius: 8px;
}

/* Cupón + actualizar carrito */
.woocommerce-cart-form .coupon .input-text {
    border: 1px solid var(--mas-border);
    border-radius: 10px;
    padding: 10px 16px;
}

.woocommerce-cart-form .coupon .button,
.woocommerce-cart-form button[name="update_cart"] {
    background: #fff !important;
    color: var(--mas-primary) !important;
    border: 2px solid var(--mas-primary) !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 10px 22px;
}

.woocommerce-cart-form .coupon .button:hover,
.woocommerce-cart-form button[name="update_cart"]:hover {
    background: var(--mas-primary) !important;
    color: #fff !important;
}

/* Panel de totales */
.cart_totals {
    background: #fff;
    border: 1px solid var(--mas-border);
    border-radius: var(--mas-radius);
    box-shadow: var(--mas-shadow);
    padding: 26px 28px;
}

.cart_totals h2 {
    color: var(--mas-navy);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 16px;
}

.cart_totals .shop_table,
.cart_totals .shop_table th,
.cart_totals .shop_table td {
    border: 0 !important;
    background: transparent;
}

.cart_totals .shop_table tr {
    border-bottom: 1px solid var(--mas-border);
}

.cart_totals .order-total .amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--mas-primary);
}

/* Línea de descuento (Promo 2x1) en verde */
.cart_totals .fee .amount,
.woocommerce-checkout-review-order .fee .amount {
    color: #1db954;
    font-weight: 700;
}

/* Botón finalizar compra */
.wc-proceed-to-checkout .checkout-button {
    background: linear-gradient(135deg, var(--mas-primary), var(--mas-primary-dark)) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(0, 153, 255, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.wc-proceed-to-checkout .checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 153, 255, .45);
}

/* Carrito vacío */
.cart-empty.wd-empty-page {
    color: var(--mas-navy);
    font-weight: 700;
}

.return-to-shop .button {
    background: linear-gradient(135deg, var(--mas-primary), var(--mas-primary-dark)) !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 12px 28px;
}

/* Responsive: tarjetas del catálogo con menos padding en mobile */
@media (max-width: 768px) {
    .wd-product.product-grid-item .product-element-bottom {
        padding: 14px 14px 18px;
    }

    .single-product .summary .price {
        font-size: 22px;
    }
}