/**
 * Estilos para el HTML que genera WooCommerce por su cuenta (carrito,
 * checkout, "pedido recibido", mi cuenta) — el tema no controla ese
 * marcado directamente, así que se estiliza aquí por las clases fijas
 * que usa WooCommerce, con los mismos colores y tipografías de marca.
 */

:root {
	--kole-classic: #F3E7E7;
	--kole-chalk: #F8F3EE;
	--kole-mocha: #6B4A43;
	--kole-mocha-dark: #4A302B;
	--kole-antique: #DFA7B2;
	--kole-muted: #C78492;
}

/* ---------- Tipografía base dentro del contenido de WooCommerce ---------- */
.woocommerce {
	font-family: 'Montserrat', sans-serif;
	color: var(--kole-mocha-dark);
	font-size: 0.9rem;
	line-height: 1.7;
}
.woocommerce h2, .woocommerce h3 {
	font-family: 'Playfair Display', serif;
	color: var(--kole-mocha);
	font-weight: 500;
	margin: 1.75rem 0 1rem;
}
.woocommerce a { color: var(--kole-muted); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.woocommerce a:hover { text-decoration-color: currentColor; }

/* ---------- Avisos (producto añadido, errores, info) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error,
ul.woocommerce-error {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.woocommerce-message, .woocommerce-info {
	background: var(--kole-classic);
	border: 1px solid var(--kole-antique);
	color: var(--kole-mocha-dark);
}
.woocommerce-error {
	background: #FBEAE7;
	border: 1px solid #E3AFA3;
	color: #7A3226;
}
.woocommerce-message .button, .woocommerce-error .button {
	background: var(--kole-mocha);
	color: var(--kole-chalk) !important;
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important;
}

/* ---------- "Pedido recibido" ---------- */
.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.25rem;
	background: var(--kole-classic);
	border-radius: 1.5rem;
	padding: 1.75rem;
	margin: 0 0 2rem;
}
.woocommerce-order-overview li {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--kole-mocha-dark);
	opacity: 0.7;
}
.woocommerce-order-overview li strong {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--kole-mocha);
	margin-top: 0.35rem;
	opacity: 1;
}

/* ---------- Tablas: carrito, resumen de pedido, detalle de pedido ---------- */
table.shop_table,
table.woocommerce-table,
.woocommerce-order-details table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 2rem;
	background: var(--kole-chalk);
	border: 1px solid rgba(107,74,67,0.15);
	border-radius: 1.25rem;
	overflow: hidden;
}
table.shop_table th,
table.woocommerce-table th {
	text-align: left;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--kole-mocha);
	background: var(--kole-classic);
	padding: 0.9rem 1.1rem;
	font-weight: 600;
}
table.shop_table td,
table.woocommerce-table td {
	padding: 0.9rem 1.1rem;
	border-top: 1px solid rgba(107,74,67,0.1);
	font-size: 0.85rem;
	vertical-align: middle;
}
table.shop_table tfoot th, table.shop_table tfoot td {
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
}
.shop_table .product-remove a {
	color: var(--kole-muted);
	font-size: 1.1rem;
	text-decoration: none;
}
.shop_table td.actions .button, .shop_table .coupon .button {
	background: var(--kole-mocha);
	color: var(--kole-chalk);
	border-radius: 999px;
	padding: 0.6rem 1.5rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.quantity .qty {
	width: 4rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid rgba(107,74,67,0.25);
	border-radius: 0.6rem;
	background: var(--kole-classic);
	color: var(--kole-mocha-dark);
}
.coupon input#coupon_code {
	padding: 0.6rem 1rem;
	border: 1px solid rgba(107,74,67,0.25);
	border-radius: 999px;
	margin-right: 0.5rem;
	background: var(--kole-classic);
}

/* ---------- Formularios: checkout, mi cuenta ---------- */
.woocommerce form .form-row label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(74,46,40,0.7);
	margin-bottom: 0.35rem;
	display: block;
}
.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-account form input.input-text {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(107,74,67,0.25);
	border-radius: 0.85rem;
	background: rgba(243,231,231,0.35);
	color: var(--kole-mocha-dark);
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
}
.woocommerce form .input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
	outline: none;
	border-color: var(--kole-muted);
}
.woocommerce #payment { background: var(--kole-classic); border-radius: 1.25rem; padding: 1.5rem; margin-top: 1.5rem; }
.woocommerce #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; }
.woocommerce #payment div.payment_box { background: var(--kole-chalk); border-radius: 1rem; padding: 1rem; margin: 0.75rem 0 1.25rem; font-size: 0.8rem; }

#place_order,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--kole-mocha);
	color: var(--kole-chalk) !important;
	border: none;
	border-radius: 999px;
	padding: 1rem 2rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .2s;
}
#place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--kole-muted);
}

/* Descripción corta en la ficha de producto (ocupa el hueco que antes
   dejaba el SKU/categoría). */
.woocommerce-product-details__short-description {
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(74, 46, 40, 0.8);
	margin: 1.25rem 0;
	max-width: 32rem;
}

/* ---------- Mi cuenta ---------- */
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; }
.woocommerce-MyAccount-navigation li { border: 1px solid rgba(107,74,67,0.2); border-radius: 999px; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.5rem 1.1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active { background: var(--kole-mocha); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--kole-chalk); }
.woocommerce-MyAccount-content { max-width: 46rem; }
mark.price { color: var(--kole-mocha); font-weight: 600; }

/* =========================================================
 * Carrito y Checkout en BLOQUES (WooCommerce Blocks)
 * Mismas reglas de marca, pero para las clases wc-block-*
 * que usa el sistema nuevo en vez de los shortcodes clásicos.
 * ========================================================= */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: 'Montserrat', sans-serif;
	color: var(--kole-mocha-dark);
}
.wc-block-components-main .wp-block-heading,
.wc-block-cart__title,
.wc-block-checkout__title {
	font-family: 'Playfair Display', serif;
	color: var(--kole-mocha);
	font-weight: 500;
}
.wc-block-cart-items, .wc-block-components-order-summary {
	border: none;
}
.wc-block-cart-item, .wc-block-components-order-summary-item {
	border-top: 1px solid rgba(107,74,67,0.12) !important;
}
.wc-block-components-order-summary,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var(--kole-classic);
	border-radius: 1.25rem;
	padding: 1.75rem !important;
	width: auto !important;
	min-width: 0 !important;
}

/* Fallo real corregido: sin min-width:0 en el bloque flex del texto,
   el navegador se niega a encoger la columna por debajo del tamaño de
   la palabra más larga sin espacios (ej. "Personalizada"), y el único
   recurso que le queda es partirla letra a letra para que quepa. */
.wc-block-components-order-summary-item,
.wc-block-cart-item {
	display: flex !important;
	align-items: flex-start;
	gap: 0.85rem;
}
.wc-block-components-order-summary-item__image,
.wc-block-cart-item__image {
	flex-shrink: 0;
}
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-cart-item__product-metadata,
.wc-block-cart-item__wrap,
.wc-block-cart-item__details {
	flex: 1 1 auto;
	min-width: 0 !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price {
	flex-shrink: 0;
	white-space: nowrap;
}
.wc-block-components-panel, .wc-block-components-totals-item {
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: inherit;
	color: var(--kole-mocha-dark);
}
.wc-block-components-checkbox svg,
.wc-block-components-radio-control input:checked ~ .wc-block-components-radio-control__input {
	color: var(--kole-muted) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	color: var(--kole-mocha);
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea,
.wc-block-components-address-form input {
	border-radius: 0.85rem !important;
	border-color: rgba(107,74,67,0.25) !important;
	font-family: 'Montserrat', sans-serif;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: var(--kole-muted) !important;
	box-shadow: none !important;
}
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-cart__submit-container a,
a.wc-block-components-button {
	background-color: var(--kole-mocha) !important;
	border-color: var(--kole-mocha) !important;
	color: var(--kole-chalk) !important;
	border-radius: 999px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-size: 0.75rem !important;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--kole-muted) !important;
	border-color: var(--kole-muted) !important;
}
.wc-block-components-quantity-selector {
	border-color: rgba(107,74,67,0.25) !important;
	border-radius: 0.6rem !important;
}
.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	background: var(--kole-antique) !important;
	color: var(--kole-mocha-dark) !important;
}