/**
 * Similar Products section (replaces WooCommerce related products).
 *
 * Rendered by inc/similar-products.php via
 * template-parts/woocommerce/similar-products.php on
 * woocommerce_after_single_product (priority 20), i.e. OUTSIDE `div.product`.
 * None of Konte's layout-vN or loop-card CSS reaches this markup, so everything
 * here is self-contained - including the wishlist heart, which Konte normally
 * positions with `div.product`-scoped rules.
 *
 * @package Konte Child
 */

.woocommerce-Price-currencySymbol
{ 
	margin-right: 5px !important;
	    font-size: 1rem;
}

.konte-similar-card__price .woocommerce-Price-currencySymbol
{
	 font-size: 12 px;
}

.konte-pricing__row--vataly .woocommerce-Price-currencySymbol
{
	font-size: 23px;
}


@media (max-width: 767.98px) {
	/* mobile-only rules here */

	.konte-pricing__row--truecost .woocommerce-Price-currencySymbol
	{
		font-size: 16px;
		font-weight: 500;
	}

	.konte-pricing__row--retail .woocommerce-Price-currencySymbol
	{
		font-size: 16px;
		font-weight: 500;
	}

	.konte-pricing__row--vataly .woocommerce-Price-currencySymbol
	{
		font-size: 18px;
		font-weight: 500;
	}

	.woocommerce-Price-currencySymbol
	{
		font-size: 13px;
		font-weight: 400;
	}

	.konte-similar-card__price
	{
		margin-top: 4px !important;
	}

.konte-similar-products
{
	padding-top:12px !important;
	padding-bottom:34px !important;

}

.konte-similar-products__title
{
	margin-bottom:20px !important;
}

}



.konte-similar-products {
	clear: both;
	width: 100%;
	box-sizing: border-box;
	padding: 48px 0 71px;
}

.konte-similar-products__title {
	margin: 0 0 24px 3.05%;
	padding: 0 0px;
	font-size: 14px;
	
	/*letter-spacing: 0.08em;*/
	text-transform: uppercase;

	color: var(--ink_text) !important;
font-family: var(--font2) !important;
font-size: 14px ;
font-style: normal;
font-weight: 700;
line-height: normal;
}

/* ------------------------------------------------------------------ *
 * Grid: flush 5-up on desktop, degrading to a 2-up scroller on mobile.
 * ------------------------------------------------------------------ */

.konte-similar-products__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.konte-similar-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.konte-similar-products__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Mobile (<768px): a single-row horizontal swipe carousel instead of a
 * wrapping 2-up grid. Both the Similar Products and You May Also Like
 * rows use this grid class, so both become scrollers. The desktop
 * min-width queries above do not match below 768px, so desktop is
 * untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.konte-similar-products__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		/* Full-bleed: cancel the parent theme's .konte-container 15px gutter
		   so the row scrolls screen-edge to screen-edge (edge-to-edge). */
		margin-left: -15px;
		margin-right: -15px;
		/* Leading inset only: 15px before the first card on the initial view.
		   It scrolls away, and with no right padding the next card reaches the
		   right screen edge and the row scrolls flush edge-to-edge. */
		padding-left: 15px;
		padding-right: 0;
		overflow-x: auto;
		overflow-y: hidden; /* stop the forced overflow-y:auto clipping card bottoms */
		-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
		overscroll-behavior-x: contain; /* don't trigger the browser back-swipe */
		scrollbar-width: none; /* Firefox: hide the h-scrollbar so it can't eat card height */
	}

	/* WebKit/Blink: hide the scrollbar (mirrors .kvl-track) so it never
	   consumes vertical space and clips the swatch row. */
	.konte-similar-products__grid::-webkit-scrollbar {
		display: none;
	}

	.konte-similar-card {
		/* Fixed viewport-relative card width: 52.48% of the viewport width.
		   Cards otherwise have no width of their own (they size from the
		   grid track on desktop). */
		flex: 0 0 52.48vw;
	}
}

.konte-similar-card {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Media: images stack, only the active one is shown.
 * ------------------------------------------------------------------ */

.konte-similar-card__media {
	position: relative;
	overflow: hidden;
}

.konte-similar-card__link {
	display: block;
	position: relative;
	/* Reserve the image box so swapping colours never shifts the layout. */
	aspect-ratio: 3 / 4;
	background-color: #f4f2ee;
}

.konte-similar-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.konte-similar-card__img.is-active {
	opacity: 1;
}

/* Browsers without aspect-ratio: fall back to natural flow for the first image. */
@supports not (aspect-ratio: 3 / 4) {
	.konte-similar-card__link {
		height: 0;
		padding-bottom: 133.33%;
	}
}

/* ------------------------------------------------------------------ *
 * Hover / focus affordances: arrows + size overlay.
 * Revealed on :focus-within too, so keyboard users are not excluded.
 * ------------------------------------------------------------------ */

.konte-similar-card__nav,
.konte-similar-card__sizes {
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.konte-similar-card:hover .konte-similar-card__nav,
.konte-similar-card:hover .konte-similar-card__sizes,
.konte-similar-card:focus-within .konte-similar-card__nav,
.konte-similar-card:focus-within .konte-similar-card__sizes {
	opacity: 1;
	pointer-events: auto;
}

/* Touch devices have no hover: keep the controls permanently visible rather
   than unreachable. */
@media (hover: none) {
	.konte-similar-card__nav,
	.konte-similar-card__sizes {
		opacity: 1;
		pointer-events: auto;
	}
}

.konte-similar-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #1d1d1d;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.konte-similar-card__nav.is-hidden {
	display: none;
}

.konte-similar-card__nav--prev {
	left: 4px;
}

.konte-similar-card__nav--next {
	right: 4px;
}

.konte-similar-card__nav:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

/* Full-width size selector overlay, pinned to the bottom of the image. */
.konte-similar-card__sizes {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	padding: 14px 8px;
	background: rgba(238, 232, 221, 0.80);
}

.konte-similar-card__size {
	flex: 1 1 0;
	padding: 4px 2px;
	border: 0;
	background: none;
	text-transform: uppercase;
	cursor: pointer;
	color:  var(--ink_text);
	font-family: var(--font2);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.konte-similar-card__size:hover:not(:disabled) {
	text-decoration: underline;
}

.konte-similar-card__size:disabled {
	color: #b6b6b6;
	cursor: default;
}

.konte-similar-card__size.is-busy {
	opacity: 0.5;
	cursor: wait;
}

.konte-similar-card__size:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ *
 * Name row: title left, wishlist heart right.
 * ------------------------------------------------------------------ */

.konte-similar-card__info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	margin-left:3%;
}

.konte-similar-card__name {
	text-decoration: none;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-similar-card__name:hover {
	text-decoration: underline;
}

.konte-similar-card__wishlist {
	flex: 0 0 auto;
	line-height: 1;
	margin-right:4%;
}

/* Konte's `soo_wishlist_button` filter emits an icon-only heart SVG plus a
   screen-reader label. Strip the button chrome the parent theme would otherwise
   have applied inside `div.product`. */
.konte-similar-card__wishlist .add-to-wishlist-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink_text);
	line-height: 1;
}

.konte-similar-card__wishlist .add-to-wishlist-button svg {
	width: 16px;
	height: 16px;
}

.konte-similar-card__wishlist .adding-to-wishlist {
	display: none;
}

/* Keep the screen-reader label available; never `display: none`. */
.konte-similar-card__wishlist .button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.konte-similar-card__price {
	margin-top: 2px;
	margin-left:3%;
	color: var(--ink_text);
	font-family: var(--font2);
	font-size: 0.750rem;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.konte-similar-card__price del {
	margin-right: 6px;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 * Colour swatches.
 * ------------------------------------------------------------------ */

/* Swatches + "+N colors" share one non-wrapping row (desktop AND mobile). */
.konte-similar-card__colorline {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	margin-left: 3%;
}

.konte-similar-card__swatches {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.konte-similar-card__swatch-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cap the visible square swatches at 3 on all viewports; the 4th onward are
   represented by the "+N colors" link on the same row. */
.konte-similar-card__swatch-item:nth-of-type(n + 4) {
	display: none;
}

/* "+N colors" indicator: sits inline with the swatches, never wraps. */
.konte-similar-card__more-colors {
	flex: 0 0 auto;
	color: #6b6b6b;
	font-size: 12px;
	line-height: 1;
	text-decoration: underline;
	white-space: nowrap;
}

.konte-similar-card__swatch {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #e6e6e6;
	cursor: pointer;
}

.konte-similar-card__swatch.is-active {
	box-shadow: 0 0 0 2px transparent, 0 0 0 0.5px var(--h_clr);
}

.konte-similar-card__swatch:focus-visible {
	outline: 2px solid var(--ink_text);
	outline-offset: 2px;
}

/* Image-type swatch (e.g. Printed): the term image fills the same chip box,
   so interaction/UX is identical to a colour chip. */
.konte-similar-card__swatch--image {
	background-color: transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ *
 * Colour row: desktop hover affordance.
 * The swatches join the nav arrows and the size overlay so the resting
 * card carries only image / name / price. `display` (not opacity) so
 * the collapsed row reserves no height; the fade-in keeps all three
 * affordances arriving on the same 0.2s curve.
 *
 * Gated on `hover: hover` as well as the 768px desktop breakpoint:
 * a coarse-pointer device at desktop width (e.g. an iPad in landscape)
 * can never fire :hover, so it keeps the row permanently visible -
 * mirroring the `@media (hover: none)` escape hatch used for the nav
 * and size overlay above.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (hover: hover) {
	.konte-similar-card__colorline {
		display: none;
	}

	.konte-similar-card:hover .konte-similar-card__colorline,
	.konte-similar-card:focus-within .konte-similar-card__colorline {
		display: flex;
		animation: konte-similar-card-reveal 0.2s ease;
	}
}

@keyframes konte-similar-card-reveal {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Colour row: hidden on mobile.
 * The mobile card is image / Quick Shop / name / price only. Colour now
 * lives one tap away in the Quick Shop sheet, which carries the chips,
 * the "+N Colours" link and a full "Choose a colour" sheet - so the
 * on-card row duplicated a control the shopper already has.
 *
 * Hiding the wrapper covers both the swatches and the "+N colors" link
 * in one rule, and takes its own 10px top margin with it, so the card
 * ends cleanly at the price with no leftover gap.
 *
 * Deliberately CSS and not a markup removal: the same row is still the
 * desktop hover affordance above, and leaving the swatch buttons in the
 * DOM keeps the delegated colour-swap handler in
 * js/konte-similar-products.js valid there.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.konte-similar-card__colorline {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Section separators (You May Also Like reference).
 * Full-width hairline; vertical spacing is owned by the adjacent
 * sections' padding (.konte-similar-products has 48px/64px), so the
 * separator itself carries no margin.
 * ------------------------------------------------------------------ */

.konte-section-separator {
	height: 0;
	margin: 0 auto;
	border: 0;
	border-top: 1px solid var(--b_clr);
	width: 94%;
	
}

/* You May Also Like reuses the Similar Products layout verbatim. */
.konte-you-may-also-like {
	/* placeholder hook for future YMAL-only tweaks */
}

@media (min-width: 768px) {
	#konte-you-may-also-like .konte-similar-products__grid {
		gap: 1px;
	}
}