/**
 * Bersoft Theme — Estilos base globales de WooCommerce (woocommerce.css)
 *
 * Aplica los tokens del Design System a elementos estándar de WooCommerce
 * (botones, precios, avisos, formularios y migas de pan) sin sobreconstruir
 * el catálogo ni la ficha de producto (reservados para fases posteriores).
 *
 * @package Bersoft_Theme
 * @since   0.2.0
 */

/* ==========================================================================
   1. Contenedores y Títulos
   ========================================================================== */

.bersoft-woocommerce-container {
	padding-top: var(--bs-spacing-compact, 48px);
	padding-bottom: var(--bs-spacing-normal, 80px);
}

.woocommerce .page-title {
	font-family: var(--bs-font-heading, system-ui, sans-serif);
	font-size: var(--bs-h1-size, 48px);
	font-weight: var(--bs-h1-font-weight, 700);
	color: var(--bs-color-heading, #172126);
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. Precios
   ========================================================================== */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce .amount {
	color: var(--bs-color-primary, #0F4C5C);
	font-weight: 700;
}

.woocommerce del .amount {
	color: var(--bs-color-text-secondary, #6B7280);
	font-weight: 400;
}

.woocommerce ins {
	text-decoration: none;
}

/* ==========================================================================
   3. Botones WooCommerce
   ========================================================================== */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bs-font-body, system-ui, sans-serif);
	font-size: var(--bs-btn-font-size, 15px);
	font-weight: var(--bs-btn-font-weight, 600);
	text-transform: var(--bs-btn-transform, none);
	line-height: 1.2;
	padding: var(--bs-btn-padding-y, 12px) var(--bs-btn-padding-x, 24px);
	border-radius: var(--bs-btn-radius, 8px);
	background-color: var(--bs-color-surface, #F5F7F8);
	color: var(--bs-color-heading, #172126);
	border: 1px solid var(--bs-color-border, #DDE4E6);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--bs-color-border, #DDE4E6);
	color: var(--bs-color-heading, #172126);
}

/* Botones Principales / Alt (Añadir al carrito, Finalizar compra) */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--bs-color-primary, #0F4C5C);
	color: #FFFFFF;
	border-color: var(--bs-color-primary, #0F4C5C);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--bs-color-primary-dark, #0A3540);
	border-color: var(--bs-color-primary-dark, #0A3540);
	color: #FFFFFF;
}

/* ==========================================================================
   4. Formularios de WooCommerce
   ========================================================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--bs-form-height, 46px);
	padding: 8px var(--bs-form-padding-x, 14px);
	border-radius: var(--bs-form-radius, 6px);
	border: var(--bs-form-border-width, 1px) solid var(--bs-color-border, #DDE4E6);
	background-color: var(--bs-color-background, #FFFFFF);
	color: var(--bs-color-text, #4B5563);
	font-family: var(--bs-font-body, system-ui, sans-serif);
	font-size: var(--bs-form-font-size, 15px);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--bs-color-primary, #0F4C5C);
	box-shadow: 0 0 0 3px var(--bs-color-primary-light, #DCECEF);
	outline: none;
}

/* ==========================================================================
   5. Avisos y Notificaciones de WooCommerce
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 1rem 1.5rem 1rem 3rem !important;
	border-radius: var(--bs-radius-sm, 6px);
	font-size: var(--bs-small-size, 14px);
	line-height: 1.5;
	margin-bottom: 2rem !important;
	background-color: var(--bs-color-surface, #F5F7F8) !important;
	color: var(--bs-color-heading, #172126) !important;
	border-top-width: 3px !important;
}

.woocommerce-message {
	border-top-color: var(--bs-color-success, #10B981) !important;
}

.woocommerce-info {
	border-top-color: var(--bs-color-primary, #0F4C5C) !important;
}

.woocommerce-error {
	border-top-color: var(--bs-color-error, #EF4444) !important;
}

/* ==========================================================================
   6. Breadcrumbs (Migas de Pan)
   ========================================================================== */

.woocommerce-breadcrumb {
	font-size: var(--bs-small-size, 14px);
	color: var(--bs-color-text-secondary, #6B7280);
	margin-bottom: 1.5rem;
}

.woocommerce-breadcrumb a {
	color: var(--bs-color-text, #4B5563);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--bs-color-primary, #0F4C5C);
	text-decoration: underline;
}