/* Woo Extended Product Related — frontend styles
 * The product cards reuse the active theme's product-loop markup (li.product,
 * .products-entry, .item-img, .item-content) so they inherit theme styling.
 * Only widget chrome (header / layout / drawer / linked swatches) is styled here.
 */

/* ---------- Font inheritance ----------
 * All plugin elements explicitly inherit font-family from the body so the
 * active theme font (e.g. DM Sans) is picked up automatically. Form elements
 * (input/button/select) don't inherit by default in all browsers.
 */
.wepr-family,
.wepr-linked,
.wepr-drawer {
	font-family: inherit;
}
.wepr-family input,
.wepr-family button,
.wepr-family select,
.wepr-linked input,
.wepr-linked button,
.wepr-linked select,
.wepr-drawer input,
.wepr-drawer button,
.wepr-drawer select,
.wepr-drawer textarea {
	font-family: inherit;
}

/* ---------- Family widget ---------- */
.wepr-family {
	margin: 24px 0 32px;
	color: inherit;
}
.wepr-family__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 12px;
}
.wepr-family__title {
	font-size: 1.05em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
	font-weight: 600;
}
.wepr-family__nav { display: flex; gap: 6px; }
.wepr-family__nav button {
	background: #111;
	color: #fff;
	border: 0;
	width: 34px;
	height: 34px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	border-radius: 0;
	transition: opacity 0.15s ease;
}
.wepr-family__nav button:hover { opacity: 0.8; }

/* Override theme float/grid for our track and use our own grid/carousel layout. */
ul.products.wepr-family__track {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.products.wepr-family__track > li.wepr-card {
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	clear: none;
}

/* Hide theme-injected loop extras inside our cards (wishlist, quickview, add-to-cart) */
.wepr-family .wepr-card .item-bottom,
.wepr-family .wepr-card .item-bottom4,
.wepr-family .wepr-card .yith-wcwl-add-to-wishlist,
.wepr-family .wepr-card .sw-quickview,
.wepr-family .wepr-card .add_to_cart_button,
.wepr-family .wepr-card .added_to_cart,
.wepr-family .wepr-card .button.product_type_simple,
.wepr-family .wepr-card .button.product_type_variable,
.wepr-family .wepr-card .item-description {
	display: none !important;
}

/* Make sure clicking anywhere on the image opens the drawer */
.wepr-family .wepr-card__image-link { cursor: pointer; display: block; }

/* Stock badges inside our card */
.wepr-card__stock { font-size: 0.8em; margin-top: 4px; }
.wepr-card__stock--out { color: #b00020; }
.wepr-card__stock--backorder { color: #b06b00; }

/* Grid mode */
.wepr-family--grid ul.products.wepr-family__track {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--wepr-cols-d, 4), minmax(0, 1fr));
}
@media (max-width: 1024px) {
	.wepr-family--grid ul.products.wepr-family__track { grid-template-columns: repeat(var(--wepr-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.wepr-family--grid ul.products.wepr-family__track { grid-template-columns: repeat(var(--wepr-cols-m, 2), minmax(0, 1fr)); }
}

/* Carousel mode */
.wepr-family--carousel ul.products.wepr-family__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.wepr-family--carousel ul.products.wepr-family__track > li.wepr-card {
	flex: 0 0 calc((100% - (var(--wepr-cols-d, 4) - 1) * 16px) / var(--wepr-cols-d, 4));
	scroll-snap-align: start;
	min-width: 0;
}
@media (max-width: 1024px) {
	.wepr-family--carousel ul.products.wepr-family__track > li.wepr-card {
		flex-basis: calc((100% - (var(--wepr-cols-t, 3) - 1) * 16px) / var(--wepr-cols-t, 3));
	}
}
@media (max-width: 640px) {
	.wepr-family--carousel ul.products.wepr-family__track > li.wepr-card {
		flex-basis: calc((100% - (var(--wepr-cols-m, 2) - 1) * 16px) / var(--wepr-cols-m, 2));
	}
}

/* ---------- Linked options ---------- */
.wepr-linked { margin: 16px 0 20px; }
.wepr-linked__label { font-size: 1.2em; margin-bottom: 8px; font-weight: 600; }
.wepr-linked__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wepr-swatch {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	padding: 2px;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.wepr-swatch__inner {
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: #f4f4f4;
	display: block;
}
.wepr-swatch__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wepr-swatch.is-active { border-color: #c2185b; }
.wepr-swatch__name { font-size: 0.75em; opacity: 0.85; display: none; }

/* ---------- Shared buttons (drawer + general) ---------- */
.wepr-btn {
	display: inline-block;
	padding: 8px 14px;
	border: 0;
	cursor: pointer;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #111;
	color: #fff;
	height: 34px;
	line-height: 1;
	transition: opacity 0.15s ease;
	text-decoration: none;
	text-align: center;
}
.wepr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wepr-btn:hover:not(:disabled) { opacity: 0.85; color: #fff; }
.wepr-btn--primary { background: #111; }

/* ---------- Drawer ---------- */
.wepr-drawer-root { position: fixed; inset: 0; z-index: 99999; visibility: hidden; }
.wepr-drawer-root.is-open { visibility: visible; }
.wepr-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.wepr-drawer-root.is-open .wepr-drawer-overlay { opacity: 1; }

.wepr-drawer {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(460px, 100%);
	background: #fff;
	box-shadow: -6px 0 24px rgba(0,0,0,0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.wepr-drawer-root.is-open .wepr-drawer { transform: translateX(0); }
.wepr-drawer__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #111;
	z-index: 5;
}
.wepr-drawer__body {
	overflow-y: auto;
	padding: 36px 22px 28px;
	height: 100%;
}
.wepr-drawer__loading { display: flex; align-items: center; justify-content: center; padding: 40px 0; }

@media (max-width: 720px) {
	.wepr-drawer {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 90vh;
		transform: translateY(100%);
		box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}
	.wepr-drawer-root.is-open .wepr-drawer { transform: translateY(0); }
}

/* Drawer content */
.wepr-d { display: flex; flex-direction: column; gap: 18px; }
.wepr-d__main-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f4f4f4;
	overflow: hidden;
}
.wepr-d__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wepr-d__thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.wepr-d__thumb { border: 1px solid #ddd; background: none; padding: 0; width: 56px; height: 56px; flex: 0 0 auto; cursor: pointer; }
.wepr-d__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wepr-d__thumb.is-active { border-color: #111; }
.wepr-d__title { font-size: 1.25em; margin: 0; line-height: 1.35; letter-spacing: 0.01em; padding-bottom: 1rem; }
.wepr-d__sku { font-size: 0.85em; opacity: 0.6; letter-spacing: 0.03em; margin-top: -8px; padding-bottom: 0.5rem; }
.wepr-d__price { font-size: 1.3em; font-weight: 700; }
.wepr-d__short { font-size: 16px; line-height: 1.6; opacity: 0.85; padding-top: 0.5em; border-top: 1px solid #eee; }
.wepr-d__attrs { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.wepr-d__attrs th, .wepr-d__attrs td { text-align: left; padding: 4px 0; border-bottom: 1px solid #eee; }
.wepr-d__variations { width: 100%; border-collapse: collapse; }
.wepr-d__variations td { padding: 4px 0; }
.wepr-d__variations td.label { width: 40%; font-size: 0.85em; }
.wepr-d__variations select { width: 100%; padding: 6px; }
.wepr-d__buy { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.wepr-d__qty { display: inline-flex; border: 1px solid #ddd; height: 42px; }
.wepr-d__qty .wepr-qty-minus, .wepr-d__qty .wepr-qty-plus {
	width: 36px; height: 100%;
	background: #fff;
	border: 0;
	cursor: pointer;
	font-size: 16px;
	color: #111;
}
.wepr-d__qty .wepr-qty {
	width: 44px; height: 100%;
	text-align: center;
	border: 0;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #fff;
	-moz-appearance: textfield;
}
.wepr-d__qty .wepr-qty::-webkit-outer-spin-button,
.wepr-d__qty .wepr-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wepr-d__add { flex: 1; height: 42px; border-radius: 0; }
.wepr-d__message { font-size: 0.9em; min-height: 1em; }
.wepr-d__message.is-success { color: #1b7e3a; }
.wepr-d__message.is-error { color: #b00020; }
.wepr-d__full-link { font-size: 0.85em; text-decoration: underline; color: inherit; }
.wepr-d__success-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wepr-d__success-actions .wepr-btn { flex: 1; }