/**
 * Bony Products — front-end styles.
 */

/* ---------- Products Grid ---------- */
.bony-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.bony-product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.bony-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.bony-product-card__image {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.bony-product-card__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .4s ease;
}

.bony-product-card:hover .bony-product-card__image img {
	transform: scale(1.05);
}

.bony-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}

.bony-product-card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.bony-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.bony-product-card__subtitle {
	margin: 0;
	font-size: .875rem;
	opacity: .7;
}

.bony-product-card__price {
	margin-top: 4px;
	font-weight: 600;
}

.bony-product-card__spec {
	margin-top: 4px;
	font-size: .85rem;
	opacity: .75;
}

/* ---------- Price ---------- */
.bony-price__regular {
	margin-right: 6px;
	font-weight: 400;
	opacity: .6;
}

.bony-price__sale {
	color: #c0392b;
}

/* ---------- Title highlight ([bracketed] text) ---------- */
.bony-hl {
	color: var(--bony-highlight, #c8102e);
}

/* Locks background scroll while a popup is open. */
.bony-noscroll {
	overflow: hidden;
}

/* ---------- Specification row (on cards) ---------- */
.bony-spec__name {
	font-weight: 600;
}

.bony-spec__sep {
	margin: 0;
}

/* ---------- Carousel ---------- */
.bony-carousel {
	position: relative;
	--bony-slides: 4;
	--bony-gap: 24px;
}

.bony-carousel__track {
	display: flex;
	gap: var(--bony-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.bony-carousel__track::-webkit-scrollbar {
	display: none;
}

.bony-carousel__slide {
	flex: 0 0 calc((100% - (var(--bony-gap) * (var(--bony-slides) - 1))) / var(--bony-slides));
	scroll-snap-align: start;
}

.bony-carousel__nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	color: #222;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}

.bony-carousel__nav:hover {
	background: #f2f2f2;
}

.bony-carousel__prev {
	left: -8px;
}

.bony-carousel__next {
	right: -8px;
}

/* ---------- Categories ---------- */
.bony-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.bony-category-card {
	position: relative;
	display: block;
	height: 240px;
	border-radius: 10px;
	overflow: hidden;
	background-color: #e9e9e9;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}

.bony-category-card--noimg {
	background: linear-gradient(135deg, #e2e2e2, #c4c4c4);
}

.bony-category-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	transition: background .3s ease;
}

.bony-category-card:hover .bony-category-card__overlay {
	background: rgba(0, 0, 0, .5);
}

.bony-category-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
}

.bony-category-card__title {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.bony-category-card__count {
	margin-top: 4px;
	color: #fff;
	font-size: .85rem;
	opacity: .85;
}

/* ---------- Single Product ---------- */
.bony-single-wrap {
	max-width: 1140px;
	margin: 40px auto;
	padding: 0 20px;
}

.bony-single {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.bony-gallery__main {
	border-radius: 10px;
	overflow: hidden;
	background: #f7f7f7;
}

.bony-gallery__main-img {
	width: 100%;
	height: auto;
	display: block;
	cursor: zoom-in;
}

.bony-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 12px 0 0;
	list-style: none;
}

.bony-gallery__thumb {
	width: 70px;
	height: 70px;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
}

.bony-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bony-gallery__thumb.is-active {
	border-color: #222;
}

.bony-single__title {
	margin: 0 0 6px;
}

.bony-single__subtitle {
	margin: 0 0 16px;
	font-size: 1.1rem;
	opacity: .7;
}

.bony-single__price {
	margin-bottom: 16px;
	font-size: 1.5rem;
	font-weight: 700;
}

.bony-single__meta {
	margin: 4px 0;
	font-size: .9rem;
}

.bony-single__meta span {
	font-weight: 600;
}

.bony-single__description {
	margin: 20px 0;
	line-height: 1.7;
}

.bony-single__specs {
	margin-top: 24px;
}

.bony-specs {
	width: 100%;
	border-collapse: collapse;
}

.bony-specs th,
.bony-specs td {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	text-align: left;
	font-size: .95rem;
}

.bony-specs th {
	width: 35%;
	font-weight: 600;
	background: #fafafa;
}

/* ---------- Lightbox ---------- */
.bony-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .85);
	cursor: zoom-out;
}

.bony-lightbox img {
	max-width: 95%;
	max-height: 95%;
	border-radius: 6px;
}

.bony-lightbox__close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}

/* ---------- Responsive fallbacks (when not overridden by Elementor) ---------- */
@media (max-width: 1024px) {
	.bony-products-grid,
	.bony-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.bony-single {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.bony-products-grid,
	.bony-categories-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Bony Products List widget
   ========================================================= */
.bony-plist {
	--bony-detail-bg: #bcb9a6;
}

/* ---------- Menu bar ---------- */
.bony-plist__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 8px;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	background: #ffffff;
}

.bony-plist--sticky .bony-plist__menu {
	position: sticky;
	z-index: 15;
	/* top/bottom edge + offset are set inline per widget. */
}

.bony-plist__menu--top {
	top: 0;
}

.bony-plist__menu--bottom {
	bottom: 0;
}

/* ---------- Parent + dropdown ---------- */
.bony-plist__parent {
	position: relative;
	flex: 0 0 auto;
}

.bony-plist__parent-link {
	display: inline-flex;
	align-items: center;
	color: var(--bony-highlight, #c8102e);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
}

.bony-plist__caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 12px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

/* The panel opens *over* the label rather than below it. The current
   category is the first row, so it lands where the label was and the name
   is never visible twice at once. Row metrics are in em so the offsets
   still line up when the Typography control changes the font size. */
.bony-plist__parent-dropdown {
	--bony-dd-pad-y: 14px;
	--bony-dd-row-pad-x: 26px;
	--bony-dd-row-pad-y: .55em;
	position: absolute;
	top: calc(-1 * (var(--bony-dd-pad-y) + var(--bony-dd-row-pad-y)));
	left: calc(-1 * var(--bony-dd-row-pad-x));
	min-width: 240px;
	margin: 0;
	padding: var(--bony-dd-pad-y) 0;
	list-style: none;
	background: #f5f4f2;
	border-radius: 30px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 20;
}

.bony-plist__parent:hover .bony-plist__parent-dropdown,
.bony-plist__parent:focus-within .bony-plist__parent-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bony-plist__parent-dropdown a {
	display: block;
	padding: var(--bony-dd-row-pad-y) var(--bony-dd-row-pad-x);
	color: #8a8a8a;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.bony-plist__parent-dropdown .is-current a {
	color: var(--bony-highlight, #c8102e);
}

/* Listed after .is-current so hovering the current row keeps it lit. */
.bony-plist__parent-dropdown a:hover {
	color: var(--bony-highlight, #c8102e);
}

/* ---------- Sub-category menu ---------- */
/* flex is 0 1 auto so the list is content-sized by default and hugs the
   right of the bar. Sub-menu Width switches it to 1 1 auto (same row) or
   1 1 100% (its own row under the label). */
.bony-plist__subs {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sub-menu Layout > Merged sets display:contents on the list
   above, which promotes these to flex items of the menu bar itself. Keeping
   the marker off them here means it cannot resurface once the <ul> stops
   generating a box. */
.bony-plist__subs > li {
	list-style: none;
}

.bony-plist__sub {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
	color: #666;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease;
}

.bony-plist__sub::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--bony-highlight, #c8102e);
	transform: scaleX(0);
	transition: transform .25s ease;
}

.bony-plist__sub:hover::after,
.bony-plist__sub.is-active::after {
	transform: scaleX(1);
}

.bony-plist__sub.is-active {
	color: #1a1a1a;
}

/* ---------- Sections + product grid ---------- */
.bony-plist__section {
	padding: 48px 0;
}

.bony-plist__section-title {
	margin: 0 0 24px;
	font-size: 1.6rem;
	font-weight: 600;
	color: #1a1a1a;
}

/* Flex (not grid) so a non-full last row can align (e.g. center) via
   justify-content. Item width is derived from the column count + gap. */
.bony-plist__grid {
	--bony-cols: 3;
	--bony-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bony-gap, 24px);
}

.bony-plist__product {
	flex: 0 0 calc((100% - (var(--bony-gap, 24px) * (var(--bony-cols, 3) - 1))) / var(--bony-cols, 3));
	max-width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

.bony-plist__product-image {
	margin-bottom: 20px;
}

.bony-plist__product-image img {
	display: block;
	max-width: 220px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	transition: transform .3s ease;
}

.bony-plist__product-title {
	margin: 0 0 6px;
	font-size: 1.4rem;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: .02em;
}

.bony-plist__product-subtitle {
	margin: 0;
	color: #8a8a8a;
	font-size: 1rem;
}

.bony-plist__product-spec {
	margin-top: 6px;
	font-size: .9rem;
	color: #8a8a8a;
}

/* Hidden per-product detail (source for the popup clone). */
.bony-plist__detail[hidden] {
	display: none;
}

/* ---------- Popup ---------- */
.bony-plist__popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bony-plist__popup[hidden] {
	display: none;
}

.bony-plist__popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.bony-plist__popup-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1000px;
	max-height: calc(100vh - 48px);
}

.bony-plist__popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #222;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.bony-plist__popup-inner {
	display: flex;
	gap: 24px;
	height: 80vh;
	max-height: calc(100vh - 48px);
}

.bony-plist__detail-media {
	flex: 1 1 var(--bony-media-w, 45%);
	min-width: 0;
	min-height: 0;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--bony-detail-bg, #d99a2b);
}

.bony-plist__detail-images {
	position: relative;
	width: 100%;
	height: 100%;
}

.bony-plist__detail-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.bony-plist__detail-img--2 {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
}

.bony-plist__detail-images.has-second:hover .bony-plist__detail-img--2 {
	opacity: 1;
}

.bony-plist__detail-info {
	flex: 1 1 var(--bony-info-w, 55%);
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	border-radius: 16px;
	background-color: var(--bony-detail-bg, #d99a2b);
	color: var(--bony-content-color, #fff);
	/* Minimal, mobile-style scrollbar inside the right column. */
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .28) transparent;
}

.bony-plist__detail-info::-webkit-scrollbar {
	width: 6px;
}

.bony-plist__detail-info::-webkit-scrollbar-track {
	background: transparent;
}

.bony-plist__detail-info::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .28);
	border-radius: 10px;
}

.bony-plist__detail-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 100%;
	padding: 44px;
	box-sizing: border-box;
}

.bony-plist__detail-title {
	margin: 0;
	font-size: 1.8rem;
	color: var(--bony-content-color, var(--bony-c-title, inherit));
}

.bony-plist__detail-subtitle {
	margin: 0;
	font-size: 1.05rem;
	color: var(--bony-content-color, var(--bony-c-subtitle, inherit));
	opacity: .9;
}

.bony-plist__detail-specs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bony-plist__detail-specs li {
	color: var(--bony-content-color, #fff);
}

.bony-plist__spec-name {
	font-weight: 600;
	color: var(--bony-content-color, var(--bony-c-spec-name, inherit));
}

.bony-plist__spec-value {
	color: var(--bony-content-color, var(--bony-c-spec-value, inherit));
}

.bony-plist__spec-sep {
	margin: 0;
	padding: 0;
	color: var(--bony-content-color, var(--bony-c-spec-sep, inherit));
}

.bony-plist__detail-desc {
	line-height: 1.7;
	color: var(--bony-content-color, var(--bony-c-desc, inherit));
	opacity: .95;
}

.bony-plist__detail-desc p {
	margin: 0 0 1em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.bony-plist__grid {
		--bony-cols: 2;
	}
}

@media (max-width: 768px) {
	.bony-plist__menu {
		flex-wrap: wrap;
		gap: 14px;
	}

	.bony-plist__subs {
		gap: 20px;
	}

	.bony-plist__popup {
		padding: 16px;
	}

	/* Stack the panels and let the whole popup scroll as one column.
	   height is forced with !important to beat the Popup Height control,
	   which otherwise pins the inner to a fixed height and crams the stack. */
	.bony-plist__popup-inner {
		flex-direction: column;
		height: auto !important;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		gap: 16px;
	}

	.bony-plist__detail-media,
	.bony-plist__detail-info {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
	}

	.bony-plist__detail-info {
		overflow: visible;
	}

	.bony-plist__detail-content {
		min-height: 0;
	}

	/* Show the full image at its natural ratio so it is never cropped
	   (an auto-height img matches its intrinsic size, so object-fit is moot). */
	.bony-plist__detail-media {
		display: block;
	}

	.bony-plist__detail-images {
		height: auto;
	}

	.bony-plist__detail-img--1 {
		position: relative;
		height: auto;
	}

	/* --- Optional "Image Beside Text": one unified box on mobile ---
	   image + head (title/subtitle/specs) side by side, description below.
	   display:contents unwraps the info/content panels so head and desc
	   become direct grid items of the popup. */
	.bony-plist--inline-image .bony-plist__popup-inner {
		display: grid;
		grid-template-columns: var(--bony-m-img-w, 40%) minmax(0, var(--bony-m-text-w, 1fr));
		grid-template-areas:
			"media head"
			"desc desc";
		align-items: start;
		gap: 16px;
		padding: 20px;
		border-radius: 16px;
		background-color: var(--bony-detail-bg, #d99a2b);
	}

	.bony-plist--inline-image .bony-plist__detail-info,
	.bony-plist--inline-image .bony-plist__detail-content {
		display: contents;
	}

	.bony-plist--inline-image .bony-plist__detail-media {
		grid-area: media;
		background: transparent;
	}

	.bony-plist--inline-image .bony-plist__detail-head {
		grid-area: head;
		align-self: var(--bony-m-valign, center);
	}

	.bony-plist--inline-image .bony-plist__detail-desc {
		grid-area: desc;
		margin-top: 4px;
	}
}

@media (max-width: 600px) {
	.bony-plist__grid {
		--bony-cols: 1;
	}
}