/* ── Ficha de producto (PDP) · dirección "suave" (D27, 19 oct) ─────────────────────────
   Paleta del home suave: fondo #FFFCFA, títulos vino, rosa pálido y magenta como acentos.
   Radios: tarjetas y fotos 4px, campos y botones 8px. Tokens: docs/02-spec.md. Prefijo cl-pdp.
   La franja de título de UiCore se oculta: el H1 va en el resumen (inc/cl-product.php). ── */
.single-product {
	--cl-wine: #4F1731; --cl-magenta: #B53570; --cl-pink: #F4D7E5; --cl-peach-100: #FFFCFA;
	--cl-cream: #F7F1E8; --cl-sand: #EBDCD1; --cl-ink: #1C1A1B; --cl-muted: #5A514B; --cl-accent: #AC326A;
}
body.single-product, .single-product #uicore-page, .single-product .uicore-body-content { background-color: #FFFCFA; }
.single-product .uicore-page-title { display: none; }
.single-product .site-main { padding-top: 32px; }

/* Grilla: galería + resumen */
.single-product .product .uicore-summary-wrapp {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start;
}
/* UiCore fija anchos con --uicore-woo-summary-width: dentro de la grilla mandan las columnas */
.single-product .product .uicore-summary-wrapp .uicore-summary-gallery { position: static; width: auto; min-width: 0; }
/* Galería fija al hacer scroll solo en desktop, donde va al lado del resumen. En una columna (≤1024px)
   tapaba el contenido: el 20 oct quedó sticky en móvil porque esta regla le ganaba a la de la media query. */
@media (min-width: 1025px) {
	.single-product .product .uicore-summary-wrapp .uicore-summary-gallery { position: sticky; top: 112px; }
}
/* !important: UiCore usa `.woocommerce #content div.product div.summary` (con ID), que ninguna clase supera */
.single-product .product .uicore-summary-wrapp .summary.entry-summary { width: 100% !important; min-width: 0; float: none; margin: 0; padding: 0; }
/* La barra fija "Add to cart" de UiCore no lleva los campos de personalización: en esos productos se oculta */
body.single-product:has([data-cl-pers]) .uicore-sticky-add-to-cart { display: none !important; }

/* Galería */
.single-product .woocommerce-product-gallery img { border-radius: 4px; }
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li { width: auto; margin: 0; float: none; list-style: none; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 4px; opacity: .7; outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; transition: opacity .2s;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; outline-color: var(--cl-magenta); }

/* Resumen */
.single-product .summary .woocommerce-breadcrumb { margin: 0 0 12px; font: 400 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.single-product .summary .woocommerce-breadcrumb a { color: var(--cl-muted); }
.single-product .summary .cl-pdp__title { margin: 0 0 8px; font: 600 40px/46px "Fraunces", Georgia, serif; color: var(--cl-wine); letter-spacing: -.01em; }
.single-product .summary .price { margin: 0 0 20px; font: 600 28px/34px "Fraunces", Georgia, serif; color: var(--cl-ink); }
.single-product .summary .woocommerce-product-details__short-description { font: 400 16px/26px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.single-product .summary .woocommerce-product-details__short-description p { margin: 0 0 16px; }
.single-product .summary ul.cl-inside { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--cl-ink); }
.single-product .summary ul.cl-inside li { position: relative; padding-left: 26px; }
.single-product .summary ul.cl-inside li::before {
	content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: var(--cl-magenta);
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/heart.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/heart.svg") center / contain no-repeat;
}

/* Personalización (campos del plugin craftlab-suite) */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.cl-pers {
	flex: 1 1 100%; margin: 0 0 4px; padding: 20px; border: 1px solid var(--cl-pink); border-radius: 4px; background: #FFFFFF;
	min-width: 0;
}
.cl-pers__title { float: left; width: 100%; margin: 0 0 16px; padding: 0; font: 600 20px/26px "Fraunces", Georgia, serif; color: var(--cl-wine); }
.cl-pers__field { clear: both; display: grid; gap: 6px; margin: 0 0 16px; }
.cl-pers__field:last-child { margin-bottom: 0; }
.cl-pers__field label { font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-ink); }
.cl-pers__req { color: var(--cl-accent); }
.cl-pers input[type="text"], .cl-pers input[type="date"], .cl-pers textarea {
	display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--cl-sand); border-radius: 8px; background: #FFFFFF;
	font: 400 16px/22px "Inter", system-ui, sans-serif; color: var(--cl-ink); box-sizing: border-box;
}
.cl-pers textarea { min-height: 96px; resize: vertical; }
/* Fecha: en Safari de iPhone el campo tiene un ancho mínimo propio y se salía de la caja (20 oct).
   Sin apariencia nativa respeta el 100%; el selector de fecha del sistema sigue funcionando. */
.cl-pers input[type="date"] { -webkit-appearance: none; appearance: none; height: 48px; line-height: 22px; text-align: left; }
.cl-pers input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: left; }
.cl-pers input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.cl-pers input[type="file"] { font: 400 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-pers input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 10px 16px; border: 1px solid var(--cl-wine); border-radius: 8px; background: #FFFFFF;
	font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--cl-wine); cursor: pointer;
}
.cl-pers [aria-invalid="true"] { border-color: var(--cl-accent) !important; }
.cl-pers__hint { margin: 0; font: 400 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-pers__count.is-near { color: var(--cl-accent); }
.cl-pers__count.is-full { color: var(--cl-accent); font-weight: 600; }
.cl-pers__error { margin: 0; font: 600 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-accent); }
/* Resumen de errores (o "completa los datos") al principio del formulario */
.cl-pers__summary {
	clear: both; margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: var(--cl-pink);
	font: 600 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-wine);
}
.cl-added-wrap { margin: 0; }

/* Cantidad: UiCore pone − y + (absolutos) sobre el campo con 38px de relleno a cada lado; con 72px de ancho
   el número quedaba tapado (20 oct). 132px dejan el número visible entre los dos botones de 44px. */
.single-product form.cart .quantity { position: relative; flex: none; width: 132px; }
.single-product form.cart .quantity .qty {
	width: 132px; height: 52px; padding: 0 44px; border: 1px solid var(--cl-sand); border-radius: 8px; background: #FFFFFF;
	font: 600 16px/1 "Inter", system-ui, sans-serif; color: var(--cl-ink); text-align: center; -moz-appearance: textfield;
}
.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart .quantity .minus, .single-product form.cart .quantity .plus {
	position: absolute; top: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: auto;
	font: 500 20px/1 "Inter", system-ui, sans-serif; color: var(--cl-wine); cursor: pointer; user-select: none; border-radius: 8px;
}
.single-product form.cart .quantity .minus { left: 0; }
.single-product form.cart .quantity .plus { right: 0; left: auto; }
.single-product form.cart .quantity [aria-disabled="true"] { color: var(--cl-sand); cursor: default; }
.single-product form.cart .single_add_to_cart_button.button {
	flex: 1 1 160px; justify-content: center; align-items: center; min-height: 52px; padding: 0 20px; border: 0; border-radius: 8px; /* 160px: entra junto a la cantidad desde 360px */
	background: var(--cl-magenta); color: #FFFFFF; font: 600 15px/1 "Inter", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
	transition: background-color .2s ease;
}
.single-product form.cart .single_add_to_cart_button.button:hover { background: var(--cl-wine); color: #FFFFFF; }
.single-product form.cart .single_add_to_cart_button.is-loading { background: var(--cl-wine); cursor: progress; pointer-events: none; }

/* Indicador de carga (botones) y texto solo para lectores de pantalla */
.cl-spinner {
	display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cl-spin .7s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-spinner { animation: none; border-right-color: currentColor; opacity: .6; } }
.cl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Aviso "Added to your cart" (reemplaza el texto genérico de WooCommerce) */
.woocommerce-notices-wrapper .woocommerce-message:has(.cl-added) { padding: 0; border: 0; background: none; box-shadow: none; }
.woocommerce-notices-wrapper .woocommerce-message:has(.cl-added)::before { display: none; }
.cl-added {
	display: grid; gap: 4px; padding: 16px 20px 16px 52px; position: relative; margin: 0 0 24px;
	border: 1px solid var(--cl-pink); border-radius: 4px; background: #FFFFFF; color: var(--cl-ink); outline: none;
}
.cl-added::before {
	content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--cl-magenta);
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/check-circle-bold.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/icons/solar/check-circle-bold.svg") center / contain no-repeat;
}
.cl-added:focus-visible { box-shadow: 0 0 0 2px var(--cl-wine); }
.cl-added__title { font: 600 18px/24px "Fraunces", Georgia, serif; color: var(--cl-wine); }
.cl-added__item { font: 400 15px/22px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-added__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cl-added .cl-added__btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; background: var(--cl-magenta);
	font: 600 14px/1 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; text-decoration: none;
}
.cl-added .cl-added__btn:hover { background: var(--cl-wine); color: #FFFFFF; }
.cl-added .cl-added__btn--line { background: #FFFFFF; border: 1.5px solid var(--cl-wine); color: var(--cl-wine); }
.cl-added .cl-added__btn--line:hover { background: var(--cl-wine); color: #FFFFFF; }
/* Error del servidor: el resumen arriba, cada error junto a su campo */
.single-product .woocommerce-notices-wrapper .woocommerce-error { border-radius: 4px; }

/* Add-ons: "Complete the gift" */
.cl-addons { margin: 0 0 24px; }
.cl-addons__title { margin: 0 0 12px; font: 600 20px/26px "Fraunces", Georgia, serif; color: var(--cl-wine); }
.cl-addons__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-addon {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px;
	padding: 10px; border: 1px solid var(--cl-pink); border-radius: 4px; background: #FFFFFF;
}
.cl-addon__img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.cl-addon__copy { display: grid; gap: 2px; min-width: 0; }
.cl-addon__name { font: 600 15px/20px "Inter", system-ui, sans-serif; color: var(--cl-ink); }
.cl-addon__price { font: 400 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.single-product .cl-addon .cl-addon__btn.button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--cl-wine); border-radius: 8px; background: #FFFFFF;
	font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--cl-wine); text-transform: none; letter-spacing: 0;
}
.single-product .cl-addon .cl-addon__btn.button:hover { background: var(--cl-wine); color: #FFFFFF; }
.single-product .cl-addon .cl-addon__btn.added { background: var(--cl-pink); border-color: var(--cl-pink); color: var(--cl-wine); }
.single-product .cl-addon .cl-addon__btn.loading { opacity: 1; cursor: progress; pointer-events: none; }
.single-product .cl-addon .cl-addon__btn.loading::after, .single-product .cl-addon .cl-addon__btn.added::after { display: none; } /* íconos propios de WooCommerce */
.cl-addon .added_to_cart { grid-column: 2 / -1; justify-self: end; font: 600 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-accent); }

/* Datos de entrega */
.cl-perks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; padding: 0; list-style: none; font: 400 14px/20px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.cl-perks li { position: relative; padding-left: 22px; }
.cl-perks li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--cl-magenta);
	-webkit-mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/sparkle.svg") center / contain no-repeat;
	        mask: url("/wp-content/themes/outgrid-child/assets/brand-shapes/sparkle.svg") center / contain no-repeat;
}
.single-product .summary .product_meta { font: 400 13px/18px "Inter", system-ui, sans-serif; color: var(--cl-muted); }
.single-product .summary .product_meta .sku_wrapper { display: none !important; } /* SKU interno, no le sirve al cliente; UiCore lo fuerza a block */
.single-product .summary .product_meta > span { color: var(--cl-muted); }

/* Pestañas y relacionados */
.single-product .woocommerce-tabs { margin-top: 72px; }
.single-product .woocommerce-tabs .panel { max-width: 720px; font: 400 16px/26px "Inter", system-ui, sans-serif; color: var(--cl-ink); }
.single-product .related > h2 { margin: 72px 0 24px; text-align: center; font: 600 32px/38px "Fraunces", Georgia, serif; color: var(--cl-wine); }

/* Tablet horizontal (900–1024px): dos columnas más juntas. Debajo de 900px, una columna con la foto
   limitada a 520px: en tablet vertical llegaba a 940px de ancho y el precio quedaba a más de una pantalla. */
@media (max-width: 1024px) {
	.single-product .product .uicore-summary-wrapp { gap: 32px; }
	.single-product .summary .cl-pdp__title { font-size: 32px; line-height: 38px; }
}
@media (max-width: 899px) {
	.single-product .product .uicore-summary-wrapp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.single-product .product .uicore-summary-wrapp .uicore-summary-gallery { width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 600px) {
	.single-product .site-main { padding-top: 16px; }
	.single-product .summary .cl-pdp__title { font-size: 28px; line-height: 34px; }
	.single-product .summary .price { font-size: 24px; line-height: 30px; }
	.cl-pers { padding: 16px; }
	.cl-addon { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
	.cl-addon__img { width: 56px; height: 56px; }
}

/* ── Carrito y checkout (bloques de WooCommerce): botón principal en magenta, como la ficha ── */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	min-height: 52px; border: 0 !important; border-radius: 8px !important; background: #B53570 !important; color: #FFFFFF !important;
	font: 600 15px/1 "Inter", system-ui, sans-serif !important; letter-spacing: .05em; text-transform: uppercase;
}
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: #4F1731 !important; color: #FFFFFF !important; }
.wc-block-components-product-details { font-size: 13px; line-height: 18px; color: #5A514B; }
/* Sin la descripción corta en el carrito y el checkout: es texto de venta cortado a media frase ("their name on…")
   que ya se leyó en la ficha. Queda lo que la persona eligió: nombre, personalización, cantidad y precio.
   Además, la Store API la manda en inglés y TranslatePress no la traduce en /es/. */
.wc-block-components-product-metadata__description { display: none; }
/* Totales del carrito: WooCommerce pone `padding: 16px 0` (sin lados) dentro de una caja con borde y el texto
   quedaba pegado al borde. Mismos 16px laterales que el título "Cart totals". Solo el carrito: el resumen del
   checkout ya trae sus 16px laterales. */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block { padding-left: 16px; padding-right: 16px; }