/**
 * Senplo Linked Colors — "Compre o Look" frontend strip styles.
 *
 * Photo-only, centered, flat composition: no name/price shown by
 * default, a quick "add to cart" button floats on each photo.
 */

.senplo-lc-look {
	--senplo-lc-look-size: 150px;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid #e7ded2;
	text-align: center;
}

.senplo-lc-look__label {
	margin: 0 0 16px;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #746657;
}

.senplo-lc-look__items {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.senplo-lc-look-item {
	position: relative;
	width: var( --senplo-lc-look-size );
	height: var( --senplo-lc-look-size );
	max-width: 100%;
}

.senplo-lc-look-item__photo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e7ded2;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.senplo-lc-look-item:hover .senplo-lc-look-item__photo,
.senplo-lc-look-item:focus-within .senplo-lc-look-item__photo {
	border-color: #6e4b36;
	transform: translateY( -2px );
}

.senplo-lc-look-item__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.senplo-lc-look-item__add {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #3a2a20 !important;
	color: #f4ece2 !important;
	border: 2px solid #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba( 20, 15, 10, 0.28 );
	text-decoration: none;
	font-size: 0;
	line-height: 0;
	transition: transform 0.15s ease, background 0.15s ease;
}

.senplo-lc-look-item__add:hover,
.senplo-lc-look-item__add:focus-visible {
	background: #6e4b36 !important;
	transform: scale( 1.08 );
	color: #f4ece2 !important;
}

/*
 * Some themes hide the default WooCommerce add-to-cart button text by
 * zeroing out its `color` (to show their own icon-font glyph instead),
 * which — since our icon used `stroke="currentColor"` — silently made
 * the bag icon invisible while the circular background stayed visible.
 * The stroke color is set directly here, decoupled from `color`, so it
 * can never be knocked out by that pattern again.
 */
.senplo-lc-look-item__add svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
	overflow: visible;
	stroke: #f4ece2 !important;
	fill: none !important;
}

.senplo-lc-look-item__add.loading svg {
	opacity: 0;
}

.senplo-lc-look-item__add.loading::before {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba( 244, 236, 226, 0.4 );
	border-top-color: #f4ece2;
	animation: senplo-lc-look-spin 0.6s linear infinite;
}

.senplo-lc-look-item__add.added::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	background: #3a2a20;
	border-radius: 50%;
}

@keyframes senplo-lc-look-spin {
	to { transform: rotate( 360deg ); }
}

/*
 * WooCommerce's own `wc-add-to-cart` script appends a "View cart" link
 * right after the button on success. Our floating circular button has no
 * room for it, and the checkmark state above already confirms success,
 * so it is hidden rather than left to overflow the layout.
 */
.senplo-lc-look-item .added_to_cart {
	display: none !important;
}

/*
 * `position: fixed` (not `absolute`) is deliberate: page-builder themes
 * (Uncode included) commonly wrap grid/row content in containers with
 * `overflow: hidden`, which would silently clip an absolutely positioned
 * popover at that ancestor's edge — cropping exactly the rightmost photo
 * whenever the popover needed to extend past it. Fixed positioning is
 * measured from the viewport and escapes that clipping entirely.
 */
.senplo-lc-look-popover {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0;
	transform: translate( -50%, 6px );
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.senplo-lc-look-popover.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

.senplo-lc-look-popover__images {
	display: flex;
	gap: 2px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e7ded2;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba( 20, 15, 10, 0.2 );
}

/*
 * `object-fit: contain` on a shared neutral canvas — never crops a
 * product (a belt, being wide and thin, used to lose both ends to a
 * square `cover` crop), and every thumbnail sits on the exact same
 * background regardless of the tone of its own studio backdrop, so
 * three photos side by side read as one strip instead of a patchwork.
 */
.senplo-lc-look-popover__images img {
	display: block;
	width: 150px;
	height: 168px;
	object-fit: contain;
	background: #f1ece2;
}

.senplo-lc-look-popover__images img:first-child {
	border-radius: 7px 0 0 7px;
}

.senplo-lc-look-popover__images img:last-child {
	border-radius: 0 7px 7px 0;
}

@media ( max-width: 640px ) {
	.senplo-lc-look-popover__images img {
		width: 100px;
		height: 112px;
	}
}

.senplo-lc-look-popover::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 6px solid transparent;
	border-top-color: #fff;
}

@media ( hover: none ) {
	.senplo-lc-look-popover {
		display: none !important;
	}
}

@media ( max-width: 480px ) {
	.senplo-lc-look {
		--senplo-lc-look-size: 110px;
	}
}