/* =============================================================
   Homesavers — Single product page (Figma 4_1920w Product)
   Loads after site.css + homepage.css (product-card / newsletter).
   ============================================================= */

.hs-product { --hs-store-blue: #1d4386; }

/* Breadcrumb styling is global (site.css). */

/* Two-column: gallery + summary (460px). */
.hs-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 40px;
	align-items: start;
	margin: 32px 0 80px;
}

/* --- Gallery --------------------------------------------------- */
.hs-product__stage { display: flex; flex-direction: column; }
.hs-product__main {
	display: block;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.hs-product__main-img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.hs-product__enlarge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--hs-font);
	font-size: 14px;
	color: #000;
	font-weight: 600;
	cursor: pointer;
}
.hs-product__thumbs { display: flex; gap: 16px; margin-top: 24px; }
.hs-product__thumb {
	width: 74px;
	height: 74px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	background: none;
	line-height: 0;
}
.hs-product__thumb.is-active { border-color: var(--hs-green); }
.hs-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Summary --------------------------------------------------- */
.hs-product__summary { display: flex; flex-direction: column; gap: 24px; }

/* Price / info card. */
.hs-product__card {
	background: #f3f5f9;
	border-radius: 4px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hs-product__head { display: flex; flex-direction: column; gap: 8px; }
.hs-product__title {
	margin: 0;
	font-family: 'poppinsbold', var(--hs-font);
	font-size: 28px;
	line-height: 1.2;
	color: var(--hs-stores-red); /* #dc2b38 */
}
.hs-product__code { margin: 0; font-family: var(--hs-font); font-size: 14px; color: #000; }
.hs-product__price {
	font-family: 'poppinsbold', var(--hs-font);
	font-size: 32px;
	line-height: 1;
	color: var(--hs-green); /* #248c2e */
}
.hs-product__price del { color: var(--hs-muted); font-size: .6em; margin-right: 8px; font-family: var(--hs-font); }
.hs-product__price ins { text-decoration: none; }
.hs-product__disclaimer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	font-family: var(--hs-font);
	font-size: 13px;
	line-height: 1.6;
	color: #4b5563;
}
.hs-product__disclaimer p { margin: 0; }
.hs-product__disclaimer a { color: var(--hs-store-blue); text-decoration: underline; }

/* Store-finder card. */
.hs-store-finder {
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hs-store-finder__head { display: flex; flex-direction: column; gap: 8px; }
.hs-store-finder__title {
	margin: 0;
	font-family: 'poppinsbold', var(--hs-font);
	font-size: 20px;
	line-height: 1.2;
	color: var(--hs-green);
}
.hs-store-finder__sub { margin: 0; font-family: var(--hs-font); font-size: 14px; color: #4b5563; }
.hs-store-finder__row { display: flex; gap: 8px; }
/* !important beats the theme's base input rule (input[type="text"] = 0,1,1). */
.hs-store-finder__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px !important;
	padding: 0 14px !important;
	border: 1px solid #9ca3af !important;
	border-radius: 4px !important;
	background: #fff !important;
	font-family: var(--hs-font);
	font-size: 16px !important;
	font-weight: 400;
	line-height: normal;
	color: var(--hs-ink) !important;
}
.hs-store-finder__input::placeholder { color: #9ca3af; font-size: 16px; font-weight: 400; opacity: 1; }
.hs-store-finder__btn {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: var(--hs-green);
	color: #fff;
	font-family: var(--hs-font-semibold);
	font-size: 16px;
	cursor: pointer;
}
.hs-store-finder__geo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--hs-font);
	font-size: 14px;
	color: var(--hs-store-blue);
	text-decoration: underline;
}

/* --- Tabs ------------------------------------------------------ */
/* Figma: two equal tabs, Medium 15px black labels; the active tab's 2px
   underline is dark, the inactive one is light. */
.hs-product__tabs { max-width: 660px; margin: 0 0 56px; }
.hs-tabs__nav { display: flex; }
.hs-tabs__tab {
	flex: 1 1 0;
	padding: 8px 16px 14px;
	border: 0;
	border-bottom: 2px solid var(--hs-line);
	border-radius: 0;
	background: none;
	cursor: pointer;
	font-family: var(--hs-font-semibold);
	font-size: 15px;
	color: #000;
	text-align: center;
}
.hs-tabs__tab.is-active { border-bottom-color: var(--hs-ink); }
.hs-tabs__panel {
	padding-top: 40px;
	font-family: var(--hs-font);
	font-size: 15px;
	line-height: 1.6;
	color: #000;
}
.hs-tabs__panel[hidden] { display: none; }
.hs-tabs__panel p { margin: 0 0 1em; }
.hs-tabs__panel p:last-child { margin-bottom: 0; }
.hs-tabs__panel ul,
.hs-tabs__panel ol { margin: 0 0 1em; padding-left: 22px; }
.hs-tabs__panel ul { list-style: disc; }
.hs-tabs__panel li { margin: 0; }
.hs-tabs__panel strong,
.hs-tabs__panel b { font-family: 'poppinsbold', var(--hs-font); font-weight: normal; }
.hs-tabs__panel em,
.hs-tabs__panel i { font-family: 'poppinslight', var(--hs-font); font-style: italic; }
.hs-tabs__panel a { color: inherit; text-decoration: underline; }


/* --- Product details (spec list under the description) --------- */
/* Colour is inherited throughout, so the block always reads in the same ink as
   the description copy above it rather than drifting to its own shade. */
.hs-product__specs { margin: 36px 0 0; }
.hs-product__specs-title {
	margin: 0 0 4px;
	font-family: 'poppinsbold', var(--hs-font);
	font-size: 18px;
	line-height: 1.3;
	color: inherit;
}
.hs-product__specs-list { margin: 0; max-width: 640px; }
.hs-product__spec {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 4px 24px;
	padding: 11px 0;
	border-bottom: 1px solid var(--hs-line);
}
.hs-product__spec:last-child { border-bottom: 0; }
.hs-product__spec-label {
	margin: 0;
	/* poppinsbold is already a bold face, and the base stylesheet puts
	   font-weight: 700 on every dt — together the browser draws a synthetic
	   bold over a bold font. Same fix as .hs-tabs__panel strong above. */
	font-family: 'poppinsbold', var(--hs-font);
	font-weight: normal;
	color: inherit;
}
.hs-product__spec-value { margin: 0; color: inherit; }

@media (max-width: 560px) {
	.hs-product__spec { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
}
/* --- You may also like ---------------------------------------- */
.hs-product__related { margin: 0 0 60px; }
.hs-product__related .hs-product-card { padding: 20px 20px 24px; }

/* You may also like: centered grid (max 4 products) — 1/2/3/4 all centre at
   normal card width. Responsive: 2-per-row on phones. */
.hs-product__related-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.hs-product__related-cards .hs-product-card {
	flex: 0 0 252px;
	max-width: 100%;
}
@media (max-width: 600px) {
	.hs-product__related-cards .hs-product-card { flex-basis: calc(50% - 5px); }
}
/* Figma: SemiBold 24px green, centred, with the divider line BELOW the title. */
.hs-product__related-title {
	margin: 0 0 34px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--hs-line);
	font-family: var(--hs-font-semibold);
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	color: var(--hs-green);
}
.hs-product__related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 29px;
}
.hs-product__related-grid .hs-product-card { border-color: #d9d9d9; padding: 22px 17px 20px; }
.hs-product__related-grid .hs-product-card__link { gap: 12px; }
.hs-product__related-grid .hs-product-card__price { margin-top: 20px; }
/* No add-to-cart on the product page cards (matches Figma). */
.hs-product .hs-product-card .button,
.hs-product .hs-product-card .added_to_cart,
.hs-product .hs-product-card .add_to_cart_button { display: none !important; }
.hs-product__main[data-enlarge] { cursor: zoom-in; }

/* --- Lightbox (click main image to enlarge) ------------------- */
.hs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(0, 0, 0, .85);
	cursor: zoom-out;
}
.hs-lightbox img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	border-radius: 4px;
	cursor: default;
}
.hs-lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
body.hs-lightbox-open { overflow: hidden; }

/* --- Responsive ----------------------------------------------- */
@media (max-width: 900px) {
	.hs-product__top { grid-template-columns: 1fr; gap: 28px; margin: 24px 0 32px; }
	.hs-product__related-grid { grid-template-columns: repeat(2, 1fr); }
	.hs-product__tabs { max-width: none; }
}
@media (max-width: 560px) {
	.hs-product__card, .hs-store-finder { padding: 20px; }
	.hs-tabs__tab { min-width: 0; flex: 1 1 auto; font-size: 15px; padding: 10px 8px 12px; }
	/* Store finder: stack the input + Find button so the row can't overflow
	   (the input keeps a min-width from the theme's base input rule). */
	.hs-store-finder__row { flex-direction: column; align-items: stretch; }
	.hs-store-finder__input { flex: 0 0 auto; width: 100%; }
	.hs-store-finder__btn { width: 100%; }
	/* "You may also like" → swipeable slider on phones (CSS scroll-snap). */
	.hs-product__related-grid {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 10px;
		margin-inline: -16px; /* bleed to the screen edges */
		scrollbar-width: none; /* Firefox: hide scrollbar */
	}
	.hs-product__related-grid::-webkit-scrollbar { display: none; } /* WebKit: hide scrollbar */
	.hs-product__related-grid .hs-product-card {
		flex: 0 0 70%; /* ~1.4 cards visible so it clearly reads as swipeable */
		scroll-snap-align: start;
		padding: 14px 10px;
	}
}