/* Admin-only product card toolbar (delete/edit/featured/id/view icons) -
   hidden for now on the customer-facing listing pages. Purely a CSS hide so
   it's a one-line revert (delete this rule) whenever it should come back. */
.adminToolsProd {
	display: none !important;
}

/* Product card fixes: base theme uses a fixed height + overflow:hidden on
   .product-box, which clips the card once real content (image + name + price)
   exceeds the hardcoded 370px budget. Switching to auto height with a
   min-height keeps the grid tidy without cutting anything off. */

.product-box {
	height: auto !important;
	min-height: auto;
	overflow: visible !important;
	margin-bottom: 22px !important;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* base theme forces a 435px floor on .imagebox regardless of actual content -
   with the smaller image slot above, that left a large dead gap after the
   price. Drop the floor and use a fixed, modest bottom padding instead. */
.product-box .imagebox {
	min-height: auto !important;
	padding-bottom: 24px;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* base theme's .row is float-based (not flex), so columns never equalized
   height on their own - cards ended up as tall as their own content only,
   producing a visibly uneven grid when titles/categories vary in length.
   Making the row flex + stretching the columns lets each .product-box fill
   its column's full height; the flex-column chain above then lets the
   price/name area line up the same way across every card in the row. */
.box-product .row {
	row-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.box-product .row > [class*="col-"] {
	display: flex;
}

/* On mobile, "col-sm-6" only turns into a 2-up grid at >=768px - below that
   it's just a full-width block, so each product stacked on its own line and
   the row became one long vertical scroll. Force the row into a horizontal
   scroll strip instead so products page left-to-right, matching the same
   swipeable-row pattern already used for the Google reviews/testimonials
   strip above (.gr-strip). */
@media (max-width: 767px) {
	.box-product .row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding: 2px 15px 10px;
		margin-left: -15px;
		margin-right: -15px;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.box-product .row::-webkit-scrollbar {
		display: none;
	}
	.box-product .row > [class*="col-"] {
		flex: 0 0 48%;
		max-width: 48%;
		padding-left: 0;
		padding-right: 0;
		scroll-snap-align: start;
	}

	/* shorter, wider card on mobile: less vertical height overall (smaller
	   image slot, tighter spacing) so the card reads more landscape than the
	   tall desktop version, while the wider 48% flex-basis above gives the
	   name/price text more room instead of wrapping cramped in a narrow column */
	.product-box {
		margin-bottom: 12px !important;
	}
	.product-box .imagebox {
		padding-bottom: 12px;
	}
	.imagebox .box-image {
		height: 110px !important;
		margin-bottom: 8px;
	}
	.imagebox .box-image .owl-stage-outer,
	.imagebox .box-image .owl-stage,
	.imagebox .box-image .owl-item,
	.imagebox .box-image li {
		height: 110px !important;
	}
}

.imagebox .box-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* reserve the same vertical space for the category line whether or not a
   product actually has one, and clamp the title to 2 lines so a long name
   ("TitanMix 20L Planetary Mixer PM-20") doesn't grow that one card taller
   than its neighbors - the row-stretch above still equalizes the rest. */
.imagebox .box-content .cat-name {
	min-height: 18px;
}

.imagebox .box-content .product-name {
	min-height: 44px;
	max-height: 44px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.imagebox .box-content .price {
	margin-top: auto;
	padding-top: 8px;
}

/* Price tag font matched to zigzag.am's price styling (bold, ~20px) - not
   their actual font ("Arian AMU", a licensed Armenian-script font not
   available for reuse and without Georgian glyph coverage anyway) but a
   properly licensed equivalent that actually renders Georgian: Noto Sans
   Georgian, confirmed on Google Fonts to support the script (unlike most
   Latin-first fonts), loaded in index.php. */
.imagebox .box-content .price .sale,
.product-detail .content-detail .price .sale {
	font-weight: bold;
	font-family: "Noto Sans Georgian", Arial, sans-serif;
	font-size: 20px;
}

/* Smaller, fixed-ratio image slot so product photos sit more compactly
   above the title/price instead of stretching to their natural aspect ratio. */

.imagebox .box-image {
	height: 160px;
	line-height: normal;
	overflow: hidden;
	margin-bottom: 14px;
}

.imagebox .box-image .owl-stage-outer,
.imagebox .box-image .owl-stage,
.imagebox .box-image .owl-item,
.imagebox .box-image li {
	height: 160px;
}

.imagebox .box-image a {
	margin: 0 auto;
	height: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.imagebox .box-image img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Home page banner grid: was 4 banners in an uneven layout (2 side-by-side
   + 1 wide below in an 8-col block, 1 tall alongside in a 4-col block) -
   now 6 equal banners, 3 per row, using plain col-md-4 instead of the
   vendored .one-half (50%-split) sizing that only worked for the old
   2-and-4 layout. */
.banner-grid-row {
	margin-bottom: 30px;
}

.banner-grid-item .inner-box {
	margin-bottom: 0;
}

.banner-grid-item .inner-box a img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

@media (max-width: 767px) {
	/* theme's own responsive.css (line ~1199) sets ".banner-box{display:none}"
	   at this breakpoint, hiding the whole grid - override just our grid items */
	.banner-grid-item {
		display: block !important;
		margin-bottom: 0;
	}

	/* collapse the two 3-item ".row" wrappers out of layout so all 6 images
	   become direct grid items of one shared 2-column grid, flowing 2/2/2
	   regardless of the underlying 3+3 markup */
	.flat-banner-box .container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	.banner-grid-row {
		display: contents;
	}
	.banner-grid-row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 0;
	}
	.banner-grid-item .inner-box a img {
		height: 140px;
	}
}

/* Product detail page (mobile): the theme's responsive CSS forces
   ".quanlity-box > div.colors" to display:block, but the size <select>'s
   wrapper also carries the "colors" class ("colors quanlity"), so BOTH the
   color and size dropdowns got stacked/disordered instead of sitting side
   by side. Force them back into a two-column row. */
@media (max-width: 767px) {
	.product-detail .footer-detail .quanlity-box {
		display: flex !important;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.product-detail .footer-detail .quanlity-box > div.colors,
	.product-detail .footer-detail .quanlity-box > div.quanlity {
		display: block !important;
		width: 50% !important;
		max-width: 50% !important;
		margin: 0 !important;
	}

	.product-detail .footer-detail .quanlity-box > div.colors select,
	.product-detail .footer-detail .quanlity-box > div.quanlity select {
		width: 100%;
	}
}

/* Google Reviews (live, home page): pulled from the Google Places API and
   cached server-side by mod/googleReviews/proc.php, replacing the old static
   testimonials grid + link-out button. */
.gr-section {
	background-color: #F6F6FA;
	padding: 50px 0 80px;
}
.gr-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 30px;
}
.gr-eyebrow {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #4F529D;
	margin: 0;
}
.gr-heading {
	margin: 8px 0 0;
	max-width: 620px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	color: #14181F;
}
.gr-rating-badge {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #fff;
	border: 1px solid #E0E2E9;
	border-radius: 999px;
	padding: 12px 16px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(79,82,157,0.08);
	width: fit-content;
}
.gr-rating-badge .gr-g-icon svg { width: 24px; height: 24px; display: block; }
.gr-rating-num {
	display: flex;
	align-items: center;
	gap: 6px;
}
.gr-rating-val {
	font-size: 18px;
	font-weight: 800;
	color: #14181F;
}
.gr-rating-stars svg { margin-right: 1px; }
.gr-rating-count {
	font-size: 12px;
	font-weight: 600;
	color: #6A7181;
}
.gr-head-arrows {
	display: none;
	align-items: center;
	gap: 12px;
}
.gr-head-arrows button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid #E0E2E9;
	background-color: #fff;
	color: #4F529D;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gr-head-arrows button svg {
	width: 18px !important;
	height: 18px !important;
	flex: none;
	display: block;
}
.gr-head-arrows button:hover {
	border-color: #4F529D;
	background-color: #F0EFF8;
}
.gr-head-arrows .gr-arrow-next {
	background-color: #4F529D;
	color: #fff;
	border-color: #4F529D;
}
.gr-head-arrows .gr-arrow-next:hover { background-color: #3f4384; }

.gr-strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.gr-strip::-webkit-scrollbar { display: none; }

.gr-card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-height: 260px;
	background-color: #fff;
	border: 1px solid #E0E2E9;
	border-radius: 16px;
	padding: 20px;
}
.gr-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.gr-card-who {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.gr-avatar-img,
.gr-avatar-fallback {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	flex: none;
	object-fit: cover;
}
.gr-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #4F529D;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}
.gr-who-text { min-width: 0; }
.gr-who-text h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #14181F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gr-who-text p {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
}
.gr-card-top .gr-g-icon svg { width: 20px; height: 20px; flex: none; display: block; }
.gr-card-stars {
	margin-top: 14px;
	display: flex;
	gap: 2px;
}
.gr-card-text {
	margin: 14px 0 0;
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #6A7181;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}
.gr-card-src {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid #F1F2F4;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #6B7280;
}

@media (min-width: 768px) {
	.gr-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.gr-head-arrows { display: flex; }
	.gr-card {
		flex: 0 0 340px;
	}
}