/**
 * Crochetts — Galeria de producto
 * Reforma los thumbnails (.flex-control-thumbs) en un carrusel horizontal
 * de una sola fila con flechas y mejora el aspecto general de la galeria.
 *
 * No toca el comportamiento de flexslider de la imagen principal (zoom /
 * lightbox nativos de WooCommerce siguen funcionando).
 */

/* ----------------------------------------------------------------------
 * Variables (faciles de personalizar)
 * -------------------------------------------------------------------- */
:root {
	--cpg-accent: #b58a4a;          /* color de borde del thumb activo */
	--cpg-thumb-size: 78px;         /* tamaño del thumbnail */
	--cpg-gap: 12px;                /* separacion entre thumbnails */
	--cpg-radius-main: 14px;        /* redondeo imagen principal */
	--cpg-radius-thumb: 10px;       /* redondeo thumbnail */
	--cpg-arrow-bg: #ffffff;
	--cpg-arrow-color: #5a4a32;
	--cpg-arrow-border: #e3d8c4;
	--cpg-shadow-main: 0 8px 26px rgba(58, 44, 24, .10);
	--cpg-shadow-arrow: 0 2px 8px rgba(58, 44, 24, .12);
}

/* ----------------------------------------------------------------------
 * Imagen principal — aspecto mas profesional
 * -------------------------------------------------------------------- */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--cpg-radius-main);
	overflow: hidden;
	box-shadow: var(--cpg-shadow-main);
}

/* El viewport interno de flexslider hereda el redondeo */
.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--cpg-radius-main);
	overflow: hidden;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image a,
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
}

/* ----------------------------------------------------------------------
 * Envoltorio del carrusel de thumbnails (lo crea gallery.js)
 * -------------------------------------------------------------------- */
.cpg-thumbs-carousel {
	position: relative;
	margin-top: 16px;
	display: flex;
	align-items: center;
	width: 100%;
}

.cpg-thumbs-track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* scrollbar oculta pero scroll funcional */
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1 1 auto;
}

.cpg-thumbs-track::-webkit-scrollbar {
	display: none;
}

/* La lista de thumbnails que genera WooCommerce */
.cpg-thumbs-carousel .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--cpg-gap);
	margin: 0 !important;
	padding: 4px !important;
	list-style: none;
	width: max-content;
}

.cpg-thumbs-carousel .flex-control-thumbs li {
	flex: 0 0 auto !important;
	width: var(--cpg-thumb-size) !important;
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--cpg-radius-thumb);
	transition: box-shadow .2s ease, transform .2s ease;
}

.cpg-thumbs-carousel .flex-control-thumbs li img {
	width: var(--cpg-thumb-size) !important;
	height: var(--cpg-thumb-size) !important;
	object-fit: cover;
	border-radius: var(--cpg-radius-thumb);
	border: 2px solid transparent;
	opacity: .62;
	cursor: pointer;
	transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
	margin: 0 !important;
	/* scroll-snap por thumbnail */
	scroll-snap-align: start;
}

.cpg-thumbs-carousel .flex-control-thumbs li:hover img {
	opacity: .92;
	transform: translateY(-1px);
}

/* Thumb activo (flexslider anade .flex-active al <li>) */
.cpg-thumbs-carousel .flex-control-thumbs li.flex-active img,
.cpg-thumbs-carousel .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--cpg-accent);
	box-shadow: 0 0 0 1px var(--cpg-accent);
}

/* ----------------------------------------------------------------------
 * Flechas del carrusel
 * -------------------------------------------------------------------- */
.cpg-arrow {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cpg-arrow-bg);
	border: 1px solid var(--cpg-arrow-border);
	color: var(--cpg-arrow-color);
	box-shadow: var(--cpg-shadow-arrow);
	cursor: pointer;
	transition: opacity .2s ease, transform .15s ease, background .2s ease;
	padding: 0;
	line-height: 0;
}

.cpg-arrow:hover {
	background: #faf6ef;
	transform: scale(1.06);
}

.cpg-arrow:active {
	transform: scale(.96);
}

.cpg-arrow.cpg-prev {
	margin-right: 8px;
}

.cpg-arrow.cpg-next {
	margin-left: 8px;
}

.cpg-arrow[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.cpg-arrow svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ----------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--cpg-thumb-size: 64px;
		--cpg-gap: 9px;
	}
}

@media (max-width: 480px) {
	:root {
		--cpg-thumb-size: 56px;
		--cpg-gap: 8px;
		--cpg-radius-main: 10px;
	}
	.cpg-arrow {
		width: 30px;
		height: 30px;
	}
}

/* ----------------------------------------------------------------------
 * Precio en la ficha de producto (widget Elementor woocommerce-product-price)
 *  - Precio tachado (<del>, precio original antes del descuento):
 *      verde de marca #416843.
 *  - Precio normal (sin oferta: <p class="price">) y precio rebajado en
 *      oferta (<ins>): negro, para que destaque sobre el tachado en verde.
 * -------------------------------------------------------------------- */
.elementor-widget-woocommerce-product-price .price {
	color: #000;
}
.elementor-widget-woocommerce-product-price .price del {
	color: #416843;
}
.elementor-widget-woocommerce-product-price .price del .woocommerce-Price-amount {
	color: #416843;
}
.elementor-widget-woocommerce-product-price .price ins {
	color: #000;
	text-decoration: none;
}
.elementor-widget-woocommerce-product-price .price ins .woocommerce-Price-amount {
	color: #000;
}

/* ----------------------------------------------------------------------
 * Soporte preferencia de movimiento reducido
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cpg-thumbs-track {
		scroll-behavior: auto;
	}
	.cpg-thumbs-carousel .flex-control-thumbs li img,
	.cpg-arrow {
		transition: none;
	}
}

/* ----------------------------------------------------------------------
 * Selector de cantidad de la ficha de producto
 *  WC imprime solo el <input type="number">. gallery.js le mete un wrapper
 *  con botones - y +. Aqui se da estilo: input mas grande, botones circulares
 *  verdes, en linea y visualmente llamativo.
 * -------------------------------------------------------------------- */
.woocommerce .quantity.cpg-qty-wrap,
.woocommerce div.quantity.cpg-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	gap: 10px;
	margin: 0 12px 0 0;
	vertical-align: middle;
}

.cpg-qty-wrap .cpg-qty-btn {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #416843;            /* verde de marca */
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 65, 104, 67, .25 );
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
	font-family: 'Poppins', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.cpg-qty-wrap .cpg-qty-btn:hover {
	background: #355837;            /* verde oscuro hover */
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 65, 104, 67, .32 );
}

.cpg-qty-wrap .cpg-qty-btn:active {
	transform: translateY( 0 );
	box-shadow: 0 2px 8px rgba( 65, 104, 67, .28 );
}

.cpg-qty-wrap .cpg-qty-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 65, 104, 67, .25 ), 0 4px 12px rgba( 65, 104, 67, .25 );
}

.cpg-qty-wrap .cpg-qty-btn[disabled] {
	background: #b6b6b6;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.cpg-qty-wrap .qty {
	width: 64px;
	height: 48px;
	padding: 0 10px;
	border: 2px solid #416843;
	border-radius: 14px;
	background: #fff;
	color: #1f1f1f;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	-moz-appearance: textfield;
	font-family: 'Poppins', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	box-sizing: border-box;
}

.cpg-qty-wrap .qty::-webkit-outer-spin-button,
.cpg-qty-wrap .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cpg-qty-wrap .qty:focus {
	outline: none;
	border-color: #355837;
	box-shadow: 0 0 0 3px rgba( 65, 104, 67, .18 );
}

/* Responsive: en movil reduce tamano para no romper el layout */
@media ( max-width: 480px ) {
	.cpg-qty-wrap .cpg-qty-btn,
	.cpg-qty-wrap .qty {
		height: 42px;
	}
	.cpg-qty-wrap .cpg-qty-btn {
		width: 42px;
		font-size: 1.25rem;
	}
	.cpg-qty-wrap .qty {
		width: 54px;
		font-size: 1.05rem;
	}
}

/* ----------------------------------------------------------------------
 * Pagina del carrito (WC Cart Block) + checkout
 *  Unifica el aspecto con la imagen corporativa: verde de marca para
 *  botones primarios, fondo crema para el resumen, tipografia Poppins
 *  y bordes suaves. Sustituye el estilo por defecto de WC Blocks (que
 *  pinta los botones en negro plano) por los colores de Crochetts.
 * -------------------------------------------------------------------- */
:root {
	--cpg-cart-accent: #416843;       /* verde de marca */
	--cpg-cart-accent-dark: #355837;  /* hover del verde */
	--cpg-cart-bg: #faf7f1;           /* crema fondo resumen */
	--cpg-cart-border: #e9e0cf;
	--cpg-cart-text: #3a2f20;
	--cpg-cart-text-soft: #5a4a32;
}

/* Cabecera "Carrito" (h1 de la pagina) */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
h1.woocommerce-cart__title,
h1.woocommerce-checkout__title {
	font-family: 'Poppins', sans-serif;
	color: var(--cpg-cart-text);
	letter-spacing: .01em;
}

/* Wrapper general del cart block */
.wc-block-cart,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: 'Poppins', sans-serif;
	color: var(--cpg-cart-text);
}

/* ---- Titulos de bloque (PRODUCTO, TOTAL, TOTALES DEL CARRITO...) ---- */
.wc-block-cart__totals-title,
.wc-block-checkout__totals-title,
.wc-block-cart__header,
.wc-block-cart__header-cell,
.wc-block-cart .wc-block-cart__header-cell,
.wc-block-cart table.wc-block-cart-items thead th,
.wc-block-checkout .wc-block-checkout__summary-title {
	font-family: 'Poppins', sans-serif !important;
	color: var(--cpg-cart-text) !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .82rem !important;
	font-weight: 700 !important;
	border-bottom: 2px solid var(--cpg-cart-border) !important;
	padding: 12px 8px !important;
}

/* ---- Lineas del carrito (productos) ---- */
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart table.wc-block-cart-items tbody tr {
	border-bottom: 1px solid var(--cpg-cart-border) !important;
}

.wc-block-cart-items .wc-block-cart-item__wrap {
	padding: 18px 4px !important;
}

/* Nombre del producto en el carrito */
.wc-block-cart-item__product a,
.wc-block-cart .product-name a {
	color: var(--cpg-cart-text) !important;
	font-weight: 700 !important;
	font-family: 'Poppins', sans-serif !important;
	text-decoration: none !important;
}

.wc-block-cart-item__product a:hover {
	color: var(--cpg-cart-accent) !important;
}

/* Precio en el carrito */
.wc-block-cart-item__total,
.wc-block-components-product-price,
.wc-block-cart .product-price {
	color: var(--cpg-cart-accent) !important;
	font-weight: 700 !important;
	font-family: 'Poppins', sans-serif !important;
}

/* Subtotal (precio unitario en cada linea) */
.wc-block-cart-item__product-price,
.wc-block-format-currency {
	color: var(--cpg-cart-text-soft) !important;
}

/* ---- Bloque resumen del carrito (Totales del carrito) ---- */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart__totals,
.wc-block-cart__sidebar {
	background: var(--cpg-cart-bg) !important;
	border: 1px solid var(--cpg-cart-border) !important;
	border-radius: 16px !important;
	padding: 22px 24px !important;
	box-shadow: 0 4px 18px rgba( 58, 44, 24, .06 );
}

.wc-block-cart__totals-title {
	margin: 0 0 14px !important;
	border-bottom: none !important;
	padding: 0 0 10px !important;
	border-radius: 0;
}

/* Filas del resumen (subtotal, envio, impuestos) */
.wc-block-cart__totals-item,
.wc-block-components-totals-item,
.wc-block-cart .cart-subtotal,
.wc-block-cart .order-total {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	padding: 8px 0 !important;
	font-family: 'Poppins', sans-serif !important;
	color: var(--cpg-cart-text-soft) !important;
	border: none !important;
}

.wc-block-cart__totals-item .wc-block-formatted-money-amount,
.wc-block-components-totals-item .wc-block-formatted-money-amount,
.wc-block-cart .cart-subtotal .amount,
.wc-block-cart .order-total .amount {
	color: var(--cpg-cart-text) !important;
	font-weight: 700 !important;
}

/* Total estimado (gran) */
.wc-block-cart .wc-block-totals__item--total,
.wc-block-cart .order-total,
.wc-block-checkout .wc-block-totals__item--total {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--cpg-cart-text) !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--cpg-cart-border) !important;
	margin-top: 8px !important;
}

.wc-block-cart .wc-block-totals__item--total .wc-block-formatted-money-amount,
.wc-block-cart .order-total .amount {
	color: var(--cpg-cart-accent) !important;
	font-size: 1.25rem !important;
}

/* ---- Boton principal "Finalizar compra" y resto de CTAs WC Blocks ----
 *  Sustituye el outline negro plano por defecto por un boton verde lleno
 *  coherente con la marca. Cubre el boton del Cart Block y el boton de
 *  Place Order en el checkout. */
.wc-block-cart__submit,
.wc-block-checkout__submit,
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-checkout__submit-button,
.wc-block-components-button,
.wc-block-components-button--primary,
.wc-block-cart__submit-container button,
.wc-block-cart__submit-container a,
button.wc-block-components-button,
a.wc-block-components-button {
	background: var(--cpg-cart-accent) !important;
	background-color: var(--cpg-cart-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	font-size: 1rem !important;
	text-transform: none !important;
	box-shadow: 0 6px 16px rgba( 65, 104, 67, .25 ) !important;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease !important;
	cursor: pointer !important;
	display: inline-block !important;
	text-decoration: none !important;
	text-align: center !important;
	line-height: 1.2 !important;
}

.wc-block-cart__submit:hover,
.wc-block-checkout__submit:hover,
.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-checkout .wc-block-checkout__submit-button:hover,
.wc-block-components-button:hover,
.wc-block-components-button--primary:hover,
.wc-block-cart__submit-container button:hover,
.wc-block-cart__submit-container a:hover {
	background: var(--cpg-cart-accent-dark) !important;
	background-color: var(--cpg-cart-accent-dark) !important;
	color: #fff !important;
	transform: translateY( -1px ) !important;
	box-shadow: 0 8px 20px rgba( 65, 104, 67, .32 ) !important;
}

.wc-block-cart__submit:disabled,
.wc-block-checkout__submit:disabled {
	background: #b6b6b6 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Botones secundarios (vaciar carrito, volver, etc) */
.wc-block-cart__empty-cart__button a,
.wc-block-components-button--outlined,
.wc-block-components-button--secondary,
button.wc-block-components-button.wc-block-components-button--secondary {
	background: #fff !important;
	color: var(--cpg-cart-text) !important;
	border: 1px solid var(--cpg-cart-border) !important;
	border-radius: 999px !important;
	padding: 10px 20px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.wc-block-cart__empty-cart__button a:hover,
.wc-block-components-button--outlined:hover,
.wc-block-components-button--secondary:hover {
	background: #f3ebdd !important;
	color: var(--cpg-cart-accent) !important;
	border-color: var(--cpg-cart-accent) !important;
}

/* ---- Input cupones ---- */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-text-input input,
.wc-block-cart input[type="text"] {
	border: 1px solid var(--cpg-cart-border) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	font-family: 'Poppins', sans-serif !important;
	background: #fff !important;
	color: var(--cpg-cart-text) !important;
}

.wc-block-components-text-input input:focus {
	outline: none !important;
	border-color: var(--cpg-cart-accent) !important;
	box-shadow: 0 0 0 3px rgba( 65, 104, 67, .15 ) !important;
}

/* Boton aplicar cupon */
.wc-block-components-form .wc-block-components-button,
.wc-block-coupon button {
	background: var(--cpg-cart-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 10px 16px !important;
	font-weight: 700 !important;
}

/* ---- Mensajes de aviso (info, error) coherentes con la marca ---- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: rgba( 65, 104, 67, .08 ) !important;
	color: var(--cpg-cart-accent) !important;
	border: 1px solid rgba( 65, 104, 67, .25 ) !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	font-family: 'Poppins', sans-serif !important;
}

.woocommerce-error {
	background: rgba( 200, 60, 50, .08 ) !important;
	color: #a23830 !important;
	border-color: rgba( 200, 60, 50, .25 ) !important;
}

/* ---- Boton papelera (eliminar del carrito) ---- */
.wc-block-cart-item__remove a,
.wc-block-cart .remove {
	color: var(--cpg-cart-text-soft) !important;
	opacity: .65;
	transition: color .15s ease, opacity .15s ease;
}

.wc-block-cart-item__remove a:hover,
.wc-block-cart .remove:hover {
	color: #a23830 !important;
	opacity: 1;
}

/* ---- Titulo "Carrito vacio" cuando no hay productos ---- */
.wc-block-cart__empty-cart__title,
.wc-block-cart .cart-empty {
	font-family: 'Poppins', sans-serif !important;
	color: var(--cpg-cart-text) !important;
}

/* ---- Checkout: cabecera de pasos ---- */
.wc-block-checkout__login-header,
.wc-block-checkout__billing-header,
.wc-block-checkout__shipping-header,
.wc-block-checkout__payment-header,
.wc-block-checkout .wc-block-checkout__form-section h2,
.wc-block-checkout .wc-block-components-checkout-step__heading {
	font-family: 'Poppins', sans-serif !important;
	color: var(--cpg-cart-text) !important;
	letter-spacing: .02em;
}

/* Inputs del checkout */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select,
.wc-block-checkout textarea {
	border: 1px solid var(--cpg-cart-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-family: 'Poppins', sans-serif !important;
	background: #fff !important;
	color: var(--cpg-cart-text) !important;
	box-sizing: border-box;
}

.wc-block-checkout input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus {
	outline: none !important;
	border-color: var(--cpg-cart-accent) !important;
	box-shadow: 0 0 0 3px rgba( 65, 104, 67, .15 ) !important;
}

/* ---- Responsive carrito ---- */
@media ( max-width: 768px ) {
	.wc-block-cart__submit,
	.wc-block-checkout__submit {
		width: 100% !important;
		font-size: .95rem !important;
		padding: 13px 20px !important;
	}
	.wp-block-woocommerce-cart-order-summary-block {
		padding: 18px !important;
	}
}

/* ----------------------------------------------------------------------
 * Mensaje "FABRICANDO... SE PUEDE RESERVAR" en productos agotados
 * (lo genera crochetts-product-gallery.php via woocommerce_get_stock_html)
 * -------------------------------------------------------------------- */
.stock.cpg-reserving {
	display: inline-block;
	margin: 10px 0 16px; /* espacio abajo para separar del boton de carrito */
	padding: 7px 14px;
	border-radius: 9px;
	background: rgba( 65, 104, 67, .10 ); /* verde #416843 al 10% */
	color: #416843;
	font-weight: 700;
	font-size: .9em;
	letter-spacing: .03em;
	line-height: 1.4;
	text-transform: none; /* el texto ya llega en mayusculas */
	border: 1px solid rgba( 65, 104, 67, .35 );
}