/* ==========================================================================
   Carlo Studio — product page (gallery, native WooCommerce form restyled,
   size/color buttons, accordions, mobile buy bar)
   ========================================================================== */

.crl-pdp{ --crl-select: #111; padding-bottom: 32px; color: var(--crl-black); }
.crl-pdp__grid{ display: grid; gap: 22px; padding-inline: 0; }

/* ---------- Gallery ---------- */
.crl-gallery{ position: relative; min-width: 0; }
.crl-gallery__main{ position: relative; }
.crl-gallery__track{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.crl-gallery__track::-webkit-scrollbar{ display: none; }
.crl-gallery__track:focus-visible{ outline: 2px solid var(--crl-black); outline-offset: -2px; }

.crl-gallery__slide{
	position: relative;
	margin: 0;
	aspect-ratio: var(--crl-ratio, 4/5);
	overflow: hidden;
	background: var(--crl-media);
	scroll-snap-align: start;
}
.crl-gallery__slide img, .crl-gallery__img{
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform .5s var(--crl-ease-out), opacity .35s;
	transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.crl-gallery__slide.is-zooming img{ transform: scale(2); transition: transform .15s linear; cursor: zoom-out; }
.crl-gallery--zoom .crl-gallery__slide{ cursor: zoom-in; }
.crl-gallery__img.is-swapping{ opacity: .3; }

.crl-gallery .crl-card__badges{ top: 14px; left: 14px; }

.crl-gallery__expand{
	position: absolute;
	right: 12px;
	bottom: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--crl-tap);
	height: var(--crl-tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--crl-black);
	cursor: pointer;
}
.crl-gallery__expand .crl-icon{ width: 20px; height: 20px; }

.crl-gallery__dots{ position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.crl-gallery__dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 17, 17, .25); transition: background-color .3s, width .3s; }
.crl-gallery__dot.is-active{ width: 18px; border-radius: 3px; background: var(--crl-black); }

.crl-gallery__thumbs{ display: none; }
.crl-gallery__thumb{ position: relative; display: block; width: 100%; aspect-ratio: var(--crl-ratio, 4/5); padding: 0; border: 1px solid transparent; background: var(--crl-media); cursor: pointer; overflow: hidden; opacity: .62; transition: opacity .3s, border-color .3s; }
.crl-gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.crl-gallery__thumb.is-active, .crl-gallery__thumb:hover{ opacity: 1; border-color: var(--crl-black); }

/* ---------- Info column ---------- */
.crl-pdp__info{ min-width: 0; padding-inline: var(--crl-gutter); }
.crl-pdp__cat{ margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--crl-muted); }
.crl-pdp__titlerow{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.crl-pdp__title{ margin: 0; font-family: var(--crl-font-display); font-size: clamp(24px, 6.4vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: inherit; }
.crl-fav--pdp{ position: relative; top: auto; right: auto; flex: 0 0 auto; margin: -6px -10px 0 0; }
.crl-fav--pdp::before{ background: var(--crl-paper); }

.crl-pdp__price{ margin: 12px 0 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
.crl-pdp__sku{ margin: 8px 0 0; font-size: 12px; color: var(--crl-muted); }
.crl-pdp__excerpt{ margin: 16px 0 0; font-size: 14px; line-height: 1.75; color: var(--crl-brand-gray); }
.crl-pdp__excerpt p{ margin: 0 0 10px; }
.crl-pdp__stock{ margin-top: 12px; }

body .crl-pdp.crl-pdp .stock{ margin: 0; font-size: 13px; letter-spacing: .02em; }
body .crl-pdp.crl-pdp .stock.in-stock{ color: var(--crl-ok); }
body .crl-pdp.crl-pdp .stock.out-of-stock{ color: var(--crl-sale); }
body .crl-pdp.crl-pdp .stock.available-on-backorder{ color: var(--crl-brand-gray); }

.crl-pdp__buy{ position: relative; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--crl-soft); }
.crl-pdp__guide-btn{
	position: absolute;
	top: 22px;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--crl-brand-gray);
	font: 12px var(--crl-font);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.crl-pdp__guide-btn .crl-icon{ width: 16px; height: 16px; }

/* Native WooCommerce form */
body .crl-pdp.crl-pdp form.cart{ margin: 0; }
body .crl-pdp.crl-pdp table.variations{ width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
body .crl-pdp.crl-pdp table.variations tbody, body .crl-pdp.crl-pdp table.variations tr, body .crl-pdp.crl-pdp table.variations th, body .crl-pdp.crl-pdp table.variations td{ display: block; padding: 0; border: 0; background: none; text-align: left; }
body .crl-pdp.crl-pdp table.variations tr{ margin-bottom: 18px; }
body .crl-pdp.crl-pdp table.variations th.label, body .crl-pdp.crl-pdp table.variations .label{ padding: 6px 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
body .crl-pdp.crl-pdp table.variations th.label label{ margin: 0; }
body .crl-pdp.crl-pdp .crl-opt-current{ margin-left: 8px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--crl-brand-gray); }
body .crl-pdp.crl-pdp table.variations select{
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--crl-border);
	border-radius: var(--crl-radius);
	background: #fff;
	font: 15px var(--crl-font);
	color: var(--crl-black);
}
body .crl-pdp.crl-pdp .reset_variations{ display: inline-block; margin-top: 10px; font-size: 12px; color: var(--crl-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Enhanced buttons (select kept as source of truth, visually hidden). */
body .crl-pdp.crl-pdp td.value.crl-enhanced select{ position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.crl-opts{ display: flex; flex-wrap: wrap; gap: 8px; }
.crl-opt{
	position: relative;
	display: inline-grid;
	place-items: center;
	min-width: 52px;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--crl-border);
	border-radius: var(--crl-radius);
	background: #fff;
	color: var(--crl-black);
	font: 400 14px/1 var(--crl-font);
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
	-webkit-tap-highlight-color: transparent;
}
.crl-opt:hover{ border-color: var(--crl-black); }
.crl-opt[aria-checked="true"]{ background: var(--crl-select); border-color: var(--crl-select); color: #fff; }
.crl-opt.is-out{ color: #B5B0AA; background: #FAFAF8; cursor: not-allowed; }
.crl-opt.is-out::after{ content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: #C9C4BD; transform: rotate(-24deg); }
.crl-opt.is-out:hover{ border-color: var(--crl-border); }

.crl-opts--color .crl-opt{ min-width: 0; height: auto; padding: 6px 12px 6px 6px; gap: 8px; grid-auto-flow: column; justify-content: start; min-height: 44px; }
.crl-opt__dot{ width: 28px; height: 28px; border-radius: 50%; background: var(--crl-dot, #ddd); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.crl-opts--color .crl-opt[aria-checked="true"]{ background: #fff; color: var(--crl-black); border-color: var(--crl-select); box-shadow: inset 0 0 0 1px var(--crl-select); }

.crl-opts.is-attention{ animation: crlShake .45s var(--crl-ease); }
.crl-opts.is-attention .crl-opt:not(.is-out){ border-color: var(--crl-black); }
@keyframes crlShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

body .crl-pdp.crl-pdp .single_variation_wrap{ margin-top: 4px; }
body .crl-pdp.crl-pdp .woocommerce-variation{ margin: 0 0 14px; }
body .crl-pdp.crl-pdp .woocommerce-variation-price .price{ font-size: 18px; font-weight: 500; }
body .crl-pdp.crl-pdp .woocommerce-variation-price .price ins{ text-decoration: none; color: var(--crl-sale); }
body .crl-pdp.crl-pdp .woocommerce-variation-price .price del{ color: var(--crl-muted); font-weight: 400; }
body .crl-pdp.crl-pdp .woocommerce-variation-availability p{ margin: 6px 0 0; }

body .crl-pdp.crl-pdp .woocommerce-variation-add-to-cart, body .crl-pdp.crl-pdp form.cart:not(.variations_form){ display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

body .crl-pdp.crl-pdp .quantity{ position: relative; display: flex; align-items: stretch; flex: 0 0 auto; margin: 0 !important; border: 1px solid var(--crl-border); border-radius: var(--crl-radius); background: #fff; }
body .crl-pdp.crl-pdp .quantity .qty{ width: 48px; min-height: 52px; padding: 0; border: 0; background: transparent; font: 15px var(--crl-font); text-align: center; -moz-appearance: textfield; }
body .crl-pdp.crl-pdp .quantity .qty::-webkit-outer-spin-button, body .crl-pdp.crl-pdp .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
/* Blocksy draws its own +/- marks (.ct-increase/.ct-decrease) over the field; ours replace them. */
body .crl-pdp.crl-pdp .quantity .ct-increase, body .crl-pdp.crl-pdp .quantity .ct-decrease{ display: none !important; }
body .crl-pdp.crl-pdp .quantity[data-type] .qty{ padding: 0 !important; }
.crl-qty-btn{ width: 40px; padding: 0; border: 0; background: none; color: var(--crl-black); font-size: 18px; cursor: pointer; }
.crl-qty-btn .crl-icon{ width: 16px; height: 16px; }

body .crl-pdp.crl-pdp .single_add_to_cart_button{
	flex: 1 1 200px;
	min-height: 54px;
	padding: 0 24px !important;
	border: 1px solid var(--crl-black) !important;
	border-radius: var(--crl-radius) !important;
	background: var(--crl-black) !important;
	color: #fff !important;
	font: 500 13px/1 var(--crl-font) !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s var(--crl-ease), opacity .3s;
}
body .crl-pdp.crl-pdp .single_add_to_cart_button:hover{ background: var(--crl-brand-gray) !important; border-color: var(--crl-brand-gray) !important; }
body .crl-pdp.crl-pdp .single_add_to_cart_button.disabled, body .crl-pdp.crl-pdp .single_add_to_cart_button:disabled{ opacity: .45; cursor: not-allowed; }
body .crl-pdp.crl-pdp .single_add_to_cart_button.loading{ opacity: .7; }

.crl-pdp__form-preview{ pointer-events: none; }

.crl-pdp__extras:empty{ display: none; }
.crl-pdp__extras{ margin-top: 16px; }

.crl-pdp__wa{ width: 100%; margin-top: 12px; }
.crl-pdp__wa .crl-icon{ width: 20px; height: 20px; }

.crl-pdp__trust{ display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.crl-pdp__trust li{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--crl-brand-gray); }
.crl-pdp__trust .crl-icon{ width: 18px; height: 18px; }

.crl-pdp__accordions{ margin-top: 26px; border-top: 1px solid var(--crl-soft); }

/* Related */
.crl-pdp__related{ padding-block: 48px 64px; border-top: 1px solid var(--crl-soft); }

/* ---------- Lightbox ---------- */
.crl-lightbox{ width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0E0E0F; color: #fff; }
.crl-lightbox::backdrop{ background: #0E0E0F; }
.crl-lightbox__close{ position: absolute; top: 10px; right: 10px; z-index: 2; color: #fff; }
.crl-lightbox__track{ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.crl-lightbox__track::-webkit-scrollbar{ display: none; }
.crl-lightbox__slide{ display: grid; place-items: center; margin: 0; scroll-snap-align: center; overflow: hidden; }
.crl-lightbox__slide img{ max-width: 100%; max-height: 100dvh; object-fit: contain; touch-action: pinch-zoom; }

/* ---------- Mobile buy bar ---------- */
.crl-buybar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--crl-gutter) calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--crl-soft);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
	transform: translateY(110%);
	transition: transform .45s var(--crl-ease-out);
	visibility: hidden;
}
.crl-buybar.is-visible{ transform: none; visibility: visible; }
.crl-buybar__info{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.crl-buybar__name{ overflow: hidden; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.crl-buybar__price{ font-size: 14px; font-weight: 500; }
.crl-buybar__price .screen-reader-text{ position: absolute; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; overflow: hidden; }
.crl-buybar__btn{ flex: 0 0 auto; min-height: 50px; padding-inline: 20px; }
.crl-buybar__btn[disabled]{ opacity: .5; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px){
	.crl-pdp__grid{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; padding-inline: var(--crl-gutter); padding-top: 28px; }
	.crl-pdp__info{ padding-inline: 0; }
	.crl-pdp__sticky{ position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--crl-header-h, 0px) + 24px); }
	.crl-gallery__thumbs{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
	.crl-gallery--left{ display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; }
	.crl-gallery--left .crl-gallery__thumbs{ grid-template-columns: 1fr; grid-row: 1; grid-column: 1; margin-top: 0; max-height: 80vh; overflow-y: auto; scrollbar-width: none; }
	.crl-gallery--left .crl-gallery__main{ grid-column: 2; }
	.crl-gallery__dots{ display: none; }
	.crl-buybar{ display: none; }
}

@media (min-width: 1025px){
	.crl-pdp__grid{ grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: clamp(40px, 5vw, 88px); padding-top: 36px; }
	.crl-gallery--left{ grid-template-columns: 84px minmax(0, 1fr); }
	.crl-pdp__title{ font-size: clamp(28px, 2.6vw, 40px); }
	/* Grid mode: all photos visible as an editorial grid */
	.crl-gallery--grid .crl-gallery__track{ grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 8px; overflow: visible; scroll-snap-type: none; }
	.crl-gallery--grid .crl-gallery__slide:first-child{ grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce){
	.crl-buybar, .crl-gallery__img, .crl-acc__title .crl-icon{ transition: none !important; }
	.crl-acc[open] .crl-acc__body, .crl-opts.is-attention{ animation: none !important; }
}

/* ==========================================================================
   4.6 — Purchase box: one clear panel with sizes, quantity and button, a
   hint until a size is chosen, and calmer typography in the summary.
   ========================================================================== */
body .crl-pdp.crl-pdp .crl-pdp__title { font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -.005em; }
body .crl-pdp.crl-pdp .crl-pdp__price { margin-top: 6px; font-size: 22px; font-weight: 500; }
body .crl-pdp.crl-pdp .crl-pdp__excerpt { color: #4F4A43; }

.crl-pdp__buy--panel {
	position: relative;
	margin-top: 22px;
	padding: 20px 18px 18px;
	border: 1px solid #ECE7DF;
	border-radius: 6px;
	background: #F8F6F2;
}
@media (min-width: 768px) { .crl-pdp__buy--panel { padding: 24px 24px 22px; } }
.crl-pdp__buy--panel .crl-pdp__guide-btn { top: 22px; right: 22px; }

body .crl-pdp.crl-pdp table.variations tr { margin-bottom: 14px; }
body .crl-pdp.crl-pdp table.variations th.label { padding-top: 0; }
/* "Limpiar" takes no space until a size is chosen. */
body .crl-pdp.crl-pdp .reset_variations[style*="hidden"] { display: none; }

.crl-pdp__buy .crl-opts--size { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.crl-pdp__buy .crl-opts--size .crl-opt { min-width: 0; height: 50px; border-color: #DDD7CE; font-size: 15px; }
.crl-pdp__buy .crl-opts--size .crl-opt:hover:not(.is-out):not([aria-checked="true"]) { border-color: var(--crl-black); background: #fff; }
.crl-pdp__buy .crl-opts--size .crl-opt[aria-checked="true"] { background: var(--crl-black); border-color: var(--crl-black); color: #fff; }

body .crl-pdp.crl-pdp .single_variation_wrap { margin-top: 6px; }
body .crl-pdp.crl-pdp .woocommerce-variation-add-to-cart { gap: 10px; }
body .crl-pdp.crl-pdp .crl-pdp__buy .quantity { background: #fff; border-color: #DDD7CE; }
body .crl-pdp.crl-pdp .single_add_to_cart_button { min-height: 52px; }
/* Waiting for a size: keep the brand black (not grey) and say what is missing. */
body .crl-pdp.crl-pdp .single_add_to_cart_button.disabled,
body .crl-pdp.crl-pdp .single_add_to_cart_button:disabled { opacity: 1; background: #3A3835 !important; border-color: #3A3835 !important; color: rgba(255, 255, 255, .78) !important; }

.crl-pdp__hint { display: none; align-items: center; gap: 8px; margin: 12px 0 0; color: #6E6860; font-size: 12px; line-height: 1.5; }
.crl-pdp__hint .crl-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.crl-pdp__buy:has(.woocommerce-variation-add-to-cart-disabled) .crl-pdp__hint { display: flex; }

/* Payment-plan notices from other plugins sit under the panel, quietly. */
.crl-pdp__extras { margin-top: 14px; font-size: 13px; color: #4F4A43; }
.crl-pdp__wa { margin-top: 14px; }
body .crl-pdp.crl-pdp .crl-pdp__buy--panel .single_add_to_cart_button { flex: 1 1 140px; padding: 0 16px !important; }
body .crl-pdp.crl-pdp .crl-pdp__buy--panel table.variations tr:last-child { margin-bottom: 6px; }