/* Carpet Ends Live Preview */
.woocommerce-product-gallery.cepv-hidden { display: none !important; }

.cepv {
	--cepv-ink: #16202c;
	--cepv-muted: #5d6670;
	--cepv-line: #e3ddd2;
	--cepv-paper: #faf8f3;
	--cepv-accent: #9e2a2f;
	float: left;
	width: 48%;
	margin: 0 0 2em;
	box-sizing: border-box;
	color: var(--cepv-ink);
}
.woocommerce div.product div.summary { float: right; }
@media (max-width: 768px) {
	.cepv { float: none; width: 100%; }
}
.cepv.cepv-in-layout { float: none; width: auto; min-width: 0; }

.cepv-stage { position: relative; border-radius: 10px; overflow: hidden; background: var(--cepv-paper); }
.cepv-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.cepv-zoom:focus-visible { outline: 3px solid var(--cepv-accent); outline-offset: -3px; }
.cepv-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .25s ease; }
.cepv-img.is-fading { opacity: .35; }
.cepv-chip {
	position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
	padding: 5px 10px; border-radius: 999px; background: rgba(22, 32, 44, .82); color: #fff;
	font-size: 13px; line-height: 1.3; font-weight: 600; pointer-events: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cepv-chip[hidden] { display: none; }

.cepv-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; }
.cepv-thumbs[hidden] { display: none; }
.cepv-thumb {
	flex: 0 0 auto; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px;
	background: var(--cepv-paper); overflow: hidden; cursor: pointer; opacity: .75; transition: opacity .15s, border-color .15s;
}
.cepv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cepv-thumb:hover, .cepv-thumb.is-on { opacity: 1; }
.cepv-thumb.is-on { border-color: var(--cepv-ink); }
.cepv-thumb:focus-visible { outline: 3px solid var(--cepv-accent); outline-offset: 1px; }

.cepv-size { margin-top: 12px; padding: 10px 12px 8px; border: 1px solid var(--cepv-line); border-radius: 10px; background: #fff; }
.cepv-size[hidden] { display: none; }
.cepv-size.is-pulse { animation: cepv-pulse .9s ease; }
@keyframes cepv-pulse { 0% { box-shadow: 0 0 0 0 rgba(158, 42, 47, .35); } 100% { box-shadow: 0 0 0 10px rgba(158, 42, 47, 0); } }
@media (prefers-reduced-motion: reduce) { .cepv-size.is-pulse { animation: none; } .cepv-img { transition: none; } }
.cepv-size-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.cepv-size-h span { text-transform: uppercase; letter-spacing: .06em; color: var(--cepv-muted); font-weight: 600; font-size: 11.5px; }
.cepv-size-l { font-weight: 700; text-align: right; }
.cepv-draw { background: #f4f0e8; border-radius: 6px; padding: 4px; }
.cepv-svg { display: block; width: 100%; height: auto; max-height: 300px; }
.cepv-grid line { stroke: #d8cfbf; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cepv-ghost > * { fill: none; stroke: #a89e8e; stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.cepv-ghost-t { fill: #7d7466; paint-order: stroke; stroke: #f4f0e8; stroke-width: .6px; font-family: inherit; }
.cepv-piece > * { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
.cepv-dim line { stroke: var(--cepv-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cepv-dim-t { fill: var(--cepv-ink); font-weight: 700; font-family: inherit; }
.cepv-note { margin: 6px 2px 0 !important; font-size: 12px; color: var(--cepv-muted); line-height: 1.4; }
.cepv-draw-empty { padding: 22px 12px; text-align: center; font-size: 13.5px; color: var(--cepv-muted); }
.cepv-treads { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.cepv-treads i { display: block; width: 22px; height: 8px; border-radius: 2px; border: 1.5px solid; }

.cepv-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 14, 20, .88); }
.cepv-lb img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.cepv-lb-x { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.cepv-lb-x:focus-visible { outline: 3px solid #fff; }

/* Larger view popup */
.cepv-lb { padding: 24px; }
.cepv-lb-box { position: relative; max-width: min(1100px, 92vw); max-height: 86vh; line-height: 0; }
.cepv-lb-box img { display: block; max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s ease; }
.cepv-lb-box img.is-fading { opacity: .3; }
.cepv-lb .cepv-lb-x { top: -16px; right: -16px; width: 40px; height: 40px; background: #fff; color: #16202c; font-size: 26px; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.cepv-lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0 0 4px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #16202c; font-size: 32px; line-height: 1;
	cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.cepv-lb-nav:hover { background: #fff; }
.cepv-lb-nav:focus-visible, .cepv-lb .cepv-lb-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cepv-lb-prev { left: 12px; }
.cepv-lb-next { right: 12px; }
@media (max-width: 600px) {
	.cepv-lb { padding: 12px; }
	.cepv-lb .cepv-lb-x { top: -14px; right: -6px; }
	.cepv-lb-nav { width: 40px; height: 40px; font-size: 26px; }
	.cepv-lb-prev { left: 6px; } .cepv-lb-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cepv-lb-box img { transition: none; } }

/* Color swatch buttons (only on products where every color has a close-up) */
.variations_form .cevb-buttons.cepv-sw-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 8px; }
.variations_form .cevb-buttons .cevb-btn.cepv-sw {
	flex-direction: column; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 0; padding: 4px 4px 6px; white-space: normal; height: auto;
	font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; color: #1f1f1f;
	background: #fff; border: 1px solid #e2ddd4; border-radius: 9px;
}
.cepv-sw-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.cepv-sw-name { display: block; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; }
.variations_form .cevb-buttons .cevb-btn.cepv-sw:hover { color: #1f1f1f; background: #fff; border-color: #8a8378; }
.variations_form .cevb-buttons .cevb-btn.cepv-sw.is-selected,
.variations_form .cevb-buttons .cevb-btn.cepv-sw.is-selected:hover { color: #1f1f1f; background: #fff; border-color: #1f1f1f; box-shadow: 0 0 0 1px #1f1f1f; font-weight: 700; }
.variations_form .cevb-buttons .cevb-btn.cepv-sw.is-unavailable { background: #fff; border-style: dashed; opacity: .55; }
.cepv-sw-cur { font-weight: 400; color: #5d6670; }
