/* =====================================================================
   TCM SPORTS 2026 — Reskin de WooCommerce
   Aplica el sistema de diseño de la marca a Tienda, ficha de producto,
   carrito, checkout y Mi cuenta. Scopeado a .woocommerce para no afectar
   la cabecera/pie de Divi ni el resto del sitio.
   ===================================================================== */

:root{
  --tcm-navy:      #141B4D;
  --tcm-navy-deep: #0C1236;
  --tcm-royal:     #234FB8;
  --tcm-pink:      #E31C79;
  --tcm-pink-dark: #C2155F;
  --tcm-gray:      #E6E6E6;
  --tcm-gray-2:    #F4F4F6;
  --tcm-ink:       #2C3357;
  --tcm-mute:      #6A6F89;
  --tcm-f-head: "Oswald", "Arial Narrow", sans-serif;
  --tcm-f-body: "Montserrat", system-ui, sans-serif;
  --tcm-r:    8px;
  --tcm-r-lg: 16px;
  --tcm-shadow:    0 18px 50px -22px rgba(20,27,77,.45);
  --tcm-shadow-sm: 0 8px 24px -14px rgba(20,27,77,.5);
}

/* ---------- Tipografía base del contenido Woo ---------- */
.woocommerce, .woocommerce-page .woocommerce,
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce{
  font-family:var(--tcm-f-body);
  color:var(--tcm-ink);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4, .woocommerce h5,
.woocommerce .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart .cart_totals h2,
.woocommerce .cart-collaterals h2,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce .related > h2, .woocommerce .upsells > h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3{
  font-family:var(--tcm-f-head) !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--tcm-navy) !important;
  font-weight:600;
  line-height:1.05;
}
.woocommerce .product_title{ font-size:clamp(1.8rem,3.2vw,2.6rem); }

/* ---------- Botones (estilo .btn-primary de la landing) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce .product_type_variable,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-account .woocommerce-Button{
  font-family:var(--tcm-f-head) !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:500;
  background:var(--tcm-pink) !important;
  color:#fff !important;
  border:2px solid transparent !important;
  border-radius:999px !important;
  padding:.85em 1.7em !important;
  line-height:1 !important;
  box-shadow:0 10px 26px -12px rgba(227,28,121,.8);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover{
  background:var(--tcm-pink-dark) !important;
  color:#fff !important;
  transform:translateY(-2px);
}
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order{
  padding:1.05em 2.1em !important;
  font-size:1.05rem !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order{ width:100%; text-align:center; }

/* Botón secundario (outline navy): "Ver carrito", "Actualizar carrito", etc. */
.woocommerce a.added_to_cart,
.woocommerce .button[name="update_cart"],
.woocommerce-cart .actions .button{
  background:transparent !important;
  color:var(--tcm-navy) !important;
  border:2px solid var(--tcm-navy) !important;
  box-shadow:none;
}
.woocommerce a.added_to_cart:hover,
.woocommerce-cart .actions .button:hover{
  background:var(--tcm-navy) !important;
  color:#fff !important;
}

/* ---------- Precios ---------- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce .woocommerce-Price-amount,
.woocommerce ul.products li.product .price{
  color:var(--tcm-royal) !important;
  font-family:var(--tcm-f-head);
  font-weight:600;
}
.woocommerce .price del, .woocommerce del .amount{
  color:var(--tcm-mute) !important; font-weight:400; opacity:.7;
}
.woocommerce .price ins, .woocommerce ins .amount{
  color:var(--tcm-pink) !important; text-decoration:none;
}

/* ---------- Badge de oferta ---------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--tcm-pink) !important;
  color:#fff !important;
  font-family:var(--tcm-f-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:500;
  border-radius:999px !important;
  min-height:0; line-height:1; padding:.5em .9em !important;
  top:14px; left:14px;
}

/* ---------- Tarjetas de producto (loop) ---------- */
.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid rgba(20,27,77,.06);
  border-radius:var(--tcm-r-lg);
  box-shadow:var(--tcm-shadow-sm);
  padding:14px 14px 22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--tcm-shadow);
}
.woocommerce ul.products li.product a img{
  border-radius:var(--tcm-r);
  margin-bottom:1rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--tcm-navy) !important;
  font-size:1.15rem;
  padding:0 6px;
}
.woocommerce ul.products li.product .button{ margin-top:.6rem; }

/* ---------- Inputs / formularios ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce select,
.woocommerce #order_review input.input-text,
.woocommerce-account form input.input-text,
.woocommerce table.variations select{
  border:1px solid rgba(20,27,77,.18) !important;
  border-radius:var(--tcm-r) !important;
  padding:.7em .9em !important;
  color:var(--tcm-ink);
  background:#fff;
  font-family:var(--tcm-f-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce select:focus,
.woocommerce .quantity input.qty:focus{
  border-color:var(--tcm-royal) !important;
  outline:0;
  box-shadow:0 0 0 3px rgba(35,79,184,.15);
}
.woocommerce form .form-row label,
.woocommerce-cart label, .woocommerce-checkout label{
  font-family:var(--tcm-f-body); font-weight:600; color:var(--tcm-navy);
}

/* ---------- Tablas (carrito, totales, review checkout) ---------- */
.woocommerce table.shop_table{
  border-radius:var(--tcm-r-lg);
  border:1px solid rgba(20,27,77,.10);
  overflow:hidden;
}
.woocommerce table.shop_table thead th,
.woocommerce table.cart th,
.woocommerce-checkout #order_review .shop_table th{
  background:var(--tcm-navy);
  color:#fff;
  font-family:var(--tcm-f-head);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:500;
}
.woocommerce-cart .cart_totals,
.woocommerce .cart-collaterals .cart_totals{
  background:var(--tcm-gray-2);
  border-radius:var(--tcm-r-lg);
  padding:6px 22px 18px;
}

/* ---------- Mensajes / notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{
  border-top-color:var(--tcm-pink) !important;
  border-radius:var(--tcm-r);
  font-family:var(--tcm-f-body);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--tcm-pink) !important; }
.woocommerce-message a.button,
.woocommerce-info a.button{ font-size:.85rem; }

/* ---------- Pestañas de producto ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:#fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--tcm-f-head); text-transform:uppercase; color:var(--tcm-navy);
}

/* ---------- Mi cuenta: navegación ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  color:var(--tcm-pink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  font-family:var(--tcm-f-head); text-transform:uppercase; letter-spacing:.02em;
}

/* ---------- Breadcrumb ---------- */
.woocommerce .woocommerce-breadcrumb a{ color:var(--tcm-royal); }
.woocommerce .woocommerce-breadcrumb{ color:var(--tcm-mute); font-family:var(--tcm-f-body); }

/* =====================================================================
   Módulos WooCommerce de Divi (et_pb_wc_*, et_pb_shop)
   Divi pinta sus propios botones/tarjetas con alta especificidad; aquí
   forzamos el estilo de marca también en esos módulos.
   ===================================================================== */

/* Botón "Finalizar compra" del módulo de totales del carrito */
.woocommerce a.checkout-button,
a.checkout-button.button,
.wc-proceed-to-checkout a.button,
.et_pb_wc_cart_totals a.button,
.et_pb_wc_cart_totals a.checkout-button,
.et_pb_module a.checkout-button{
  font-family:var(--tcm-f-head) !important;
  text-transform:uppercase; letter-spacing:.05em; font-weight:500;
  background:var(--tcm-pink) !important;
  color:#fff !important;
  border:2px solid transparent !important;
  border-radius:999px !important;
  padding:1.05em 2.1em !important;
  font-size:1.05rem !important; line-height:1 !important;
  box-shadow:0 10px 26px -12px rgba(227,28,121,.8);
  width:100%; text-align:center;
  transition:background .2s ease, transform .15s ease;
}
.woocommerce a.checkout-button:hover,
.wc-proceed-to-checkout a.button:hover,
.et_pb_wc_cart_totals a.button:hover{
  background:var(--tcm-pink-dark) !important; color:#fff !important; transform:translateY(-2px);
}

/* Carrusel "Nuevo en la tienda" y cualquier módulo Shop de Divi */
.et_pb_shop ul.products li.product,
.et_pb_wc_related_products ul.products li.product,
.et_pb_wc_upsells ul.products li.product{
  background:#fff;
  border:1px solid rgba(20,27,77,.06);
  border-radius:var(--tcm-r-lg);
  box-shadow:var(--tcm-shadow-sm);
  padding:14px 14px 22px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.et_pb_shop ul.products li.product:hover{ transform:translateY(-4px); box-shadow:var(--tcm-shadow); }
.et_pb_shop ul.products li.product a img,
.et_pb_wc_related_products ul.products li.product a img,
.et_pb_wc_upsells ul.products li.product a img{ border-radius:var(--tcm-r); margin-bottom:1rem; }

.et_pb_shop ul.products li.product .woocommerce-loop-product__title,
.et_pb_wc_related_products .woocommerce-loop-product__title,
.et_pb_wc_upsells .woocommerce-loop-product__title{
  font-family:var(--tcm-f-head) !important; text-transform:uppercase;
  color:var(--tcm-navy) !important; font-size:1.15rem;
}
.et_pb_shop ul.products li.product .price,
.et_pb_wc_related_products .price, .et_pb_wc_upsells .price{
  color:var(--tcm-royal) !important; font-family:var(--tcm-f-head); font-weight:600;
}
.et_pb_shop ul.products li.product .button,
.et_pb_wc_related_products ul.products li.product .button,
.et_pb_wc_upsells ul.products li.product .button{
  font-family:var(--tcm-f-head) !important; text-transform:uppercase; letter-spacing:.05em;
  background:var(--tcm-pink) !important; color:#fff !important;
  border:2px solid transparent !important; border-radius:999px !important;
  padding:.8em 1.5em !important; box-shadow:0 10px 26px -12px rgba(227,28,121,.8);
}
.et_pb_shop ul.products li.product .button:hover{ background:var(--tcm-pink-dark) !important; }
.et_pb_shop span.onsale, .et_pb_wc_related_products span.onsale, .et_pb_wc_upsells span.onsale{
  background:var(--tcm-pink) !important; color:#fff !important;
  font-family:var(--tcm-f-head); text-transform:uppercase; border-radius:999px !important;
  padding:.5em .9em !important; line-height:1;
}

/* =====================================================================
   WooCommerce Blocks (carrito/checkout en bloques Gutenberg)
   No cuelgan de .woocommerce, así que se estilan por sus propias clases.
   woo.css solo carga en páginas Woo, por lo que es seguro.
   ===================================================================== */
.wc-block-components-button.contained,
a.wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--tcm-pink) !important;
  color:#fff !important;
  border:2px solid transparent !important;
  border-radius:999px !important;
  font-family:var(--tcm-f-head) !important;
  text-transform:uppercase; letter-spacing:.05em; font-weight:500;
  padding:1em 2em !important; line-height:1.1 !important;
  box-shadow:0 10px 26px -12px rgba(227,28,121,.8);
  transition:background .2s ease, transform .15s ease;
}
.wc-block-components-button.contained:hover,
a.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--tcm-pink-dark) !important; color:#fff !important; transform:translateY(-2px);
}
.wc-block-components-button.contained .wc-block-components-button__text{ color:#fff !important; }

/* Precios en bloques */
.wc-block-components-product-price,
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total{
  color:var(--tcm-royal) !important; font-family:var(--tcm-f-head); font-weight:600;
}

/* Títulos en bloques */
.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label,
.wc-block-components-title{
  font-family:var(--tcm-f-head) !important; text-transform:uppercase;
  color:var(--tcm-navy) !important; letter-spacing:.01em;
}

/* Inputs en bloques */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"]{
  border-radius:var(--tcm-r) !important;
}
.wc-block-components-text-input input:focus{
  border-color:var(--tcm-royal) !important; box-shadow:0 0 0 2px rgba(35,79,184,.2) !important;
}