/*
 * Hassanza Storefront Design
 * Scoped presentation for the generated homepage and native WooCommerce views.
 */
:root {
	--hzsf-ink: #01411c;
	--hzsf-accent: #0b8f3c;
	--hzsf-cream: #eff8f1;
	--hzsf-surface: #ffffff;
	--hzsf-muted: #6d675d;
	--hzsf-line: color-mix(in srgb, var(--hzsf-ink) 12%, transparent);
	--hzsf-soft-accent: color-mix(in srgb, var(--hzsf-accent) 14%, var(--hzsf-surface));
	--hzsf-radius: 22px;
	--hzsf-shadow: 0 24px 70px rgba(24, 18, 7, .10);
}

.hzsf-enabled,
.hzsf-enabled button,
.hzsf-enabled input,
.hzsf-enabled select,
.hzsf-enabled textarea {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.hzsf-enabled * {
	box-sizing: border-box;
}

.hzsf-home-page .entry-header,
.hzsf-home-page .page-header {
	display: none !important;
}

/*
 * Theme-hero suppression — CSS fallback layer (LAST RESORT).
 *
 * On Astra the page-title banner is removed at the source via the
 * `astra_single_layout_one_banner_visibility` filter (see HZSF_Theme_Bridge),
 * so nothing renders and these rules are never needed there. For themes whose
 * banner cannot be removed through a known hook, this hides a generic
 * page-title header only on the storefront front page, only when the admin has
 * left "Hide theme hero" enabled (which adds the body class below).
 */
body.hzsf-suppress-theme-hero .entry-header,
body.hzsf-suppress-theme-hero .page-header,
body.hzsf-suppress-theme-hero .page-title,
body.hzsf-suppress-theme-hero .wp-block-post-title,
body.hzsf-suppress-theme-hero .ast-single-post-banner {
	display: none !important;
}

.hzsf-home-page .site-content > .ast-container,
.hzsf-home-page .site-main,
.hzsf-home-page article.page,
.hzsf-home-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hzsf-home-page .site-content,
.hzsf-home-page #content,
.hzsf-home-page #primary,
.hzsf-home-page .site-content > .ast-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.hzsf-home-page #primary {
	width: 100% !important;
	max-width: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.hzsf-enabled .site-header {
	position: relative;
	z-index: 2200;
	overflow: visible !important;
	border-bottom: 1px solid var(--hzsf-line);
	box-shadow: none;
}

.hzsf-enabled .ast-primary-header-bar,
.hzsf-enabled .site-primary-header-wrap,
.hzsf-enabled .main-header-bar,
.hzsf-enabled .main-header-bar-navigation,
.hzsf-enabled .ast-main-header-wrap {
	overflow: visible !important;
}

.hzsf-enabled .ast-primary-header-bar,
.hzsf-enabled .main-header-bar {
	min-height: 92px !important;
}

.hzsf-enabled .site-primary-header-wrap .ast-builder-grid-row,
.hzsf-enabled .ast-primary-header-bar .ast-builder-grid-row,
.hzsf-enabled .main-header-bar > .ast-container {
	width: 100% !important;
	max-width: none !important;
	padding-right: clamp(24px, 4vw, 72px) !important;
	padding-left: clamp(24px, 4vw, 72px) !important;
}

.hzsf-enabled .site-header .ast-builder-layout-element {
	min-height: 48px;
}

.hzsf-enabled .site-header .menu-link,
.hzsf-enabled .site-header .ast-header-account-wrap,
.hzsf-enabled .site-header .ast-site-header-cart {
	font-size: 15px;
}

.hzsf-enabled .main-header-menu .sub-menu,
.hzsf-enabled .ast-builder-menu .sub-menu {
	z-index: 2250 !important;
	max-height: min(70vh, 620px);
	overflow-y: auto;
}

.hzsf-enabled .site-header a,
.hzsf-enabled .main-header-menu > .menu-item > .menu-link {
	font-weight: 700;
	letter-spacing: -.01em;
}

.hzsf-enabled .site-header .custom-logo-link img,
.hzsf-enabled .site-header .site-logo-img img,
.hzsf-enabled .site-header .custom-logo {
	width: auto;
	max-width: 225px !important;
	max-height: 88px !important;
}

/*
 * Live DOM inspection confirms that Hassanza Header Upgrade owns the public
 * header. Its 1180px .hzhu-header-inner cap—not Astra—centres the desktop
 * header. This stylesheet loads after the header plugin, so the exact owner
 * classes below remove that cap while leaving its compact mobile rules intact.
 */
@media (min-width: 922px) {
	body.hzsf-enabled .hzhu-custom-header {
		min-height: 104px;
	}

	body.hzsf-enabled .hzhu-custom-header > .hzhu-header-inner {
		width: 100% !important;
		max-width: none !important;
		min-height: 104px !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: clamp(28px, 4vw, 64px) !important;
		padding-left: clamp(28px, 4vw, 64px) !important;
		grid-template-columns: minmax(200px, 230px) minmax(0, 1fr) !important;
		column-gap: clamp(22px, 2.4vw, 44px) !important;
	}

	body.hzsf-enabled .hzhu-custom-header .hzhu-logo-link {
		width: 185px !important;
		max-width: 185px !important;
		min-height: 88px !important;
		margin-right: 0 !important;
	}

	body.hzsf-enabled .hzhu-custom-header .hzhu-logo-image {
		width: 185px !important;
		max-width: 185px !important;
		height: auto !important;
		max-height: 90px !important;
		object-fit: contain;
	}

	body.hzsf-enabled .hzhu-custom-header .hzhu-desktop-nav {
		width: 100%;
		justify-content: flex-end;
	}
}

/* Large Azadi introduction followed by a continuous announcement ticker. */
.hzsf-sale-bar {
	position: relative;
	z-index: 900;
	display: flex;
	align-items: center;
	min-height: 78px;
	overflow: hidden;
	color: var(--hzsf-surface);
	background: var(--hzsf-ink);
	border-bottom: 3px solid var(--hzsf-accent);
}

.hzsf-azadi-spotlight {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0 30px;
	white-space: nowrap;
	background: var(--hzsf-ink);
	transition: width .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

.hzsf-azadi-spotlight::after {
	position: absolute;
	right: -22px;
	width: 44px;
	height: 44px;
	background: inherit;
	transform: rotate(45deg);
	content: "";
}

.hzsf-azadi-spotlight strong {
	font-size: clamp(18px, 2vw, 29px);
	font-weight: 950;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.hzsf-sale-bar.is-running .hzsf-azadi-spotlight {
	inset: 0 auto 0 0;
	width: clamp(300px, 28vw, 430px);
	background: var(--hzsf-accent);
}

.hzsf-sale-bar.is-running .hzsf-azadi-spotlight strong {
	font-size: clamp(13px, 1.2vw, 18px);
}

.hzsf-announcement-marquee {
	width: 100%;
	overflow: hidden;
	opacity: 0;
	transform: translateX(30px);
	transition: opacity .45s ease .4s, transform .45s ease .4s;
}

.hzsf-sale-bar.is-running .hzsf-announcement-marquee {
	padding-left: clamp(330px, 31vw, 475px);
	opacity: 1;
	transform: translateX(0);
}

.hzsf-marquee-track,
.hzsf-marquee-set,
.hzsf-benefit-track,
.hzsf-benefit-set {
	display: flex;
	width: max-content;
	align-items: center;
}

.hzsf-sale-bar.is-running .hzsf-marquee-track {
	animation: hzsf-marquee-left 34s linear infinite;
}

.hzsf-marquee-set span {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 52px;
	white-space: nowrap;
}

.hzsf-marquee-set strong {
	font-size: 14px;
	font-weight: 950;
	letter-spacing: .07em;
	text-transform: uppercase;
}

@keyframes hzsf-marquee-left {
	to { transform: translateX(-50%); }
}

@keyframes hzsf-marquee-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

/* Full-bleed homepage. */
.hzsf-home {
	width: 100%;
	overflow: hidden;
	color: var(--hzsf-ink);
	background: var(--hzsf-surface);
}

.hzsf-hero {
	position: relative;
	width: 100%;
	background:
		radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--hzsf-accent) 24%, transparent), transparent 30%),
		linear-gradient(115deg, var(--hzsf-cream) 0%, var(--hzsf-surface) 68%);
}

.hzsf-hero-slides {
	position: relative;
	min-height: clamp(540px, 60vw, 720px);
}

.hzsf-hero-slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr);
	align-items: center;
	gap: clamp(30px, 5vw, 90px);
	padding: clamp(56px, 7vw, 108px) max(24px, calc((100vw - 1320px) / 2));
	visibility: hidden;
	opacity: 0;
	transform: translateX(26px);
	transition: opacity .55s ease, transform .65s ease, visibility .65s;
	pointer-events: none;
}

.hzsf-hero-slide.is-active {
	z-index: 2;
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.hzsf-hero-slide.is-sale {
	color: var(--hzsf-surface);
	background:
		linear-gradient(100deg, color-mix(in srgb, var(--hzsf-ink) 95%, transparent) 0%, color-mix(in srgb, var(--hzsf-ink) 80%, transparent) 58%, color-mix(in srgb, var(--hzsf-accent) 50%, var(--hzsf-ink)) 100%);
}

.hzsf-hero-copy {
	position: relative;
	z-index: 2;
	max-width: 650px;
}

.hzsf-hero-copy > span,
.hzsf-section-heading > span,
.hzsf-support-banner > div > span {
	display: block;
	margin-bottom: 14px;
	color: var(--hzsf-accent);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .19em;
	text-transform: uppercase;
}

.hzsf-hero-copy h1,
.hzsf-hero-copy h2 {
	max-width: 680px;
	margin: 0 0 22px;
	color: inherit;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(45px, 6.2vw, 88px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.055em;
}

.hzsf-hero-copy p {
	max-width: 590px;
	margin: 0 0 30px;
	color: color-mix(in srgb, currentColor 72%, transparent);
	font-size: clamp(15px, 1.4vw, 19px);
	line-height: 1.7;
}

.hzsf-hero-copy > a,
.hzsf-support-banner > a,
.hzsf-view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-height: 52px;
	padding: 13px 22px;
	color: var(--hzsf-surface) !important;
	background: var(--hzsf-ink);
	border: 1px solid var(--hzsf-ink);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}

.hzsf-hero-slide.is-sale .hzsf-hero-copy > a {
	color: var(--hzsf-ink) !important;
	background: var(--hzsf-accent);
	border-color: var(--hzsf-accent);
}

.hzsf-hero-copy > a:hover,
.hzsf-support-banner > a:hover,
.hzsf-view-all:hover {
	transform: translateY(-2px);
}

.hzsf-hero-price {
	margin: -8px 0 20px;
	color: var(--hzsf-accent);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 850;
}

.hzsf-hero-price del {
	margin-right: 10px;
	color: var(--hzsf-muted);
	font-size: .62em;
}

.hzsf-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(560px, 50vw);
	min-height: 390px;
}

.hzsf-hero-visual::before {
	position: absolute;
	width: min(34vw, 490px);
	aspect-ratio: 1;
	background: var(--hzsf-soft-accent);
	border-radius: 50%;
	content: "";
}

.hzsf-hero-visual img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 34px 32px rgba(18, 15, 10, .17));
	transition: transform .7s ease;
}

.hzsf-hero-slide.is-active .hzsf-hero-visual img {
	transform: scale(1.025) rotate(-1deg);
}

.hzsf-hero-video {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px;
	filter: drop-shadow(0 34px 32px rgba(18, 15, 10, .17));
}

/* When a video is present, it replaces the still image on all screen sizes. */
.hzsf-hero-visual.has-video picture {
	display: none;
}

/* On phones the video fills the taller mobile hero card. */
@media (max-width: 720px) {
	.hzsf-hero-video {
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hzsf-hero-video {
		display: none;
	}

	.hzsf-hero-visual.has-video picture {
		display: block;
	}
}

.hzsf-hero-controls {
	position: absolute;
	z-index: 4;
	right: max(24px, calc((100vw - 1320px) / 2));
	bottom: 27px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.hzsf-hero-controls > button {
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--hzsf-ink);
	background: rgba(255, 255, 255, .88);
	border: 1px solid var(--hzsf-line);
	border-radius: 50%;
}

.hzsf-hero-controls [data-hzsf-dots] {
	display: flex;
	gap: 6px;
}

.hzsf-hero-controls [data-hzsf-dots] button {
	width: 8px;
	height: 8px;
	padding: 0;
	background: color-mix(in srgb, var(--hzsf-ink) 24%, transparent);
	border: 0;
	border-radius: 99px;
	transition: width .25s ease, background .25s ease;
}

.hzsf-hero-controls [data-hzsf-dots] button.is-active {
	width: 27px;
	background: var(--hzsf-accent);
}

.hzsf-hero-countdown {
	display: flex;
	gap: 9px;
	margin: 0 0 30px;
}

.hzsf-hero-countdown div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px;
	min-height: 76px;
	color: var(--hzsf-ink);
	background: var(--hzsf-surface);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}

.hzsf-hero-countdown strong {
	font-size: 25px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hzsf-hero-countdown small {
	margin-top: 7px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Live-sale row directly under the main campaign bar. */
.hzsf-sale-live-row {
	position: relative;
	z-index: 899;
	display: flex;
	height: 76px;
	flex-direction: row;
	min-height: 76px;
	align-items: stretch;
	overflow: visible;
	color: var(--hzsf-ink);
	background: #fff;
	border-bottom: 2px solid color-mix(in srgb, #ffd84d 75%, var(--hzsf-accent));
}

.hzsf-sale-live-row .hzsf-sale-is-on {
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

.hzsf-campaign-bands {
	color: var(--hzsf-surface);
	background: var(--hzsf-ink);
}

.hzsf-benefit-marquee,
.hzsf-sale-is-on {
	width: 100%;
	overflow: hidden;
}

.hzsf-benefit-marquee {
	padding: 17px 0;
	color: #fff;
	background: var(--hzsf-ink);
	border-top: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(255,255,255,.2);
}

.hzsf-benefit-track {
	animation: hzsf-marquee-left 32s linear infinite;
}

.hzsf-benefit-set span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-right: clamp(42px, 5vw, 84px);
	font-size: 14px;
	font-weight: 950;
	letter-spacing: .055em;
	white-space: nowrap;
	text-transform: uppercase;
}

.hzsf-benefit-set b {
	display: grid;
	width: 24px;
	height: 24px;
	color: var(--hzsf-ink);
	background: #ffd84d;
	border-radius: 50%;
	place-items: center;
}

.hzsf-sale-is-on {
	min-height: 76px;
	padding: 12px 410px 12px 0;
	color: var(--hzsf-ink);
	background: #fff;
	border-bottom: 0;
}

.hzsf-sale-is-on > div {
	display: flex;
	width: max-content;
	animation: hzsf-marquee-right 22s linear infinite;
	animation-delay: var(--hzsf-live-phase, 0ms);
}

.hzsf-sale-live-set {
	display: flex;
	width: max-content;
	align-items: center;
}

.hzsf-sale-live-set span {
	display: flex;
	align-items: center;
	gap: 17px;
	padding-right: clamp(38px, 4vw, 72px);
	white-space: nowrap;
}

.hzsf-sale-live-set i {
	display: grid;
	width: 52px;
	height: 52px;
	color: #fff;
	background: var(--hzsf-accent);
	font-size: 10px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: .04em;
	place-items: center;
	transform: rotate(8deg);
	clip-path: polygon(50% 0%,61% 10%,75% 7%,82% 20%,96% 25%,93% 39%,100% 50%,90% 61%,93% 75%,80% 82%,75% 96%,61% 93%,50% 100%,39% 90%,25% 93%,18% 80%,4% 75%,7% 61%,0% 50%,10% 39%,7% 25%,20% 18%,25% 4%,39% 7%);
}

.hzsf-sale-live-set strong {
	color: var(--hzsf-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -.01em;
}

.hzsf-strip-clock {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 4px;
	padding: 8px 13px;
	background: linear-gradient(135deg, var(--hzsf-ink), var(--hzsf-accent));
	border-left: 2px solid #ffd84d;
}

.hzsf-countdown-below {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	display: flex;
	width: 390px;
	flex: 0 0 auto;
	justify-content: flex-end;
	padding: 0;
	background: var(--hzsf-ink);
	border-top: 0;
	box-shadow: 0 12px 28px rgba(0,45,20,.18);
}

.hzsf-countdown-stack {
	display: grid;
	width: 390px;
	grid-template-columns: 140px 250px;
	align-items: stretch;
}

.hzsf-days-left {
	display: flex;
	width: 140px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 13px;
	color: #ffd84d;
	background: var(--hzsf-ink);
	border-right: 1px solid rgba(255,255,255,.16);
	border-top: 0;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .12em;
	line-height: 1.15;
	text-align: center;
}

.hzsf-days-left strong {
	height: auto;
	color: #fff;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 29px;
	text-shadow: none;
}

.hzsf-strip-clock > div {
	position: relative;
	display: flex;
	width: auto;
	flex: 1 1 0;
	flex-direction: column;
	gap: 3px;
}

.hzsf-strip-clock > div::after {
	position: absolute;
	z-index: 2;
	top: 24px;
	right: 0;
	left: 0;
	height: 1px;
	background: rgba(0, 0, 0, .62);
	box-shadow: 0 1px rgba(255, 255, 255, .12);
	content: "";
}

.hzsf-strip-clock strong {
	display: grid;
	height: 47px;
	color: #fff;
	background: linear-gradient(#087a39 0 49.5%, #01411c 50.5% 100%);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 5px;
	box-shadow: inset 0 1px rgba(255,255,255,.12), 0 15px 35px rgba(0,0,0,.28);
	font-family: "Arial Black", Impact, sans-serif;
	font-size: 27px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	place-items: center;
	text-shadow: 0 3px 0 #000;
}

.hzsf-strip-clock small {
	color: #ffd84d;
	font-size: 6px;
	font-weight: 850;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Round moving categories. */
.hzsf-categories,
.hzsf-products {
	padding: clamp(66px, 7vw, 106px) max(24px, calc((100vw - 1320px) / 2));
}

.hzsf-categories {
	background: var(--hzsf-surface);
	padding-right: 0;
	padding-left: 0;
}

.hzsf-categories .hzsf-section-heading {
	padding-right: 24px;
	padding-left: 24px;
}

.hzsf-section-heading {
	max-width: 650px;
	margin: 0 auto clamp(35px, 4vw, 58px);
	text-align: center;
}

.hzsf-section-heading h2 {
	margin: 0 0 12px;
	color: var(--hzsf-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1.05;
}

.hzsf-section-heading p {
	margin: 0;
	color: var(--hzsf-muted);
	font-size: 15px;
	line-height: 1.6;
}

.hzsf-category-viewport {
	direction: ltr;
	width: 100vw;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	cursor: grab;
}

.hzsf-category-viewport::-webkit-scrollbar {
	display: none;
}

.hzsf-category-track,
.hzsf-category-set {
	display: flex;
	align-items: flex-start;
	width: max-content;
}

.hzsf-category-set {
	gap: clamp(24px, 2.4vw, 42px);
	padding-right: clamp(24px, 2.4vw, 42px);
}

.hzsf-category-item {
	display: flex;
	flex: 0 0 clamp(190px, 15vw, 240px);
	flex-direction: column;
	align-items: center;
	color: var(--hzsf-ink) !important;
	text-align: center;
	text-decoration: none !important;
}

.hzsf-category-image {
	display: grid;
	width: clamp(182px, 14.5vw, 228px);
	aspect-ratio: 1;
	margin-bottom: 17px;
	overflow: hidden;
	place-items: center;
	background: var(--hzsf-cream);
	border: 4px solid var(--hzsf-surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--hzsf-line), 0 14px 30px rgba(28, 22, 11, .09);
	transition: transform .32s ease, box-shadow .32s ease;
}

.hzsf-category-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.hzsf-category-image b {
	color: var(--hzsf-accent);
	font-family: Georgia, serif;
	font-size: 55px;
}

.hzsf-category-item:hover .hzsf-category-image {
	transform: translateY(-7px);
	box-shadow: 0 0 0 2px var(--hzsf-accent), 0 20px 38px rgba(28, 22, 11, .13);
}

.hzsf-category-item:hover img {
	transform: scale(1.07);
}

.hzsf-category-item > strong {
	max-width: 225px;
	font-size: 15px;
	line-height: 1.25;
}

.hzsf-category-item > small {
	margin-top: 5px;
	color: var(--hzsf-muted);
	font-size: 11px;
}

/* Product presentation. */
.hzsf-products {
	background: var(--hzsf-cream);
}

.hzsf-trending {
	background: var(--hzsf-surface);
}

.hzsf-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
}

.hzsf-product-card {
	position: relative;
	overflow: hidden;
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: var(--hzsf-radius);
	box-shadow: 0 10px 30px rgba(29, 22, 8, .04);
	transition: transform .28s ease, box-shadow .28s ease;
}

.hzsf-product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hzsf-shadow);
}

.hzsf-product-image {
	position: relative;
	display: block;
	aspect-ratio: .92;
	overflow: hidden;
	background: color-mix(in srgb, var(--hzsf-cream) 70%, var(--hzsf-surface));
}

.hzsf-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px;
	transition: opacity .45s ease, transform .55s ease;
}

.hzsf-product-image .is-secondary {
	opacity: 0;
	transform: scale(1.04);
}

.hzsf-product-card:hover .hzsf-product-image .is-primary {
	opacity: 0;
	transform: scale(.97);
}

.hzsf-product-card:hover .hzsf-product-image .is-secondary {
	opacity: 1;
	transform: scale(1);
}

.hzsf-sale-badge {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	padding: 6px 10px;
	color: var(--hzsf-surface);
	background: var(--hzsf-ink);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .14em;
}

.hzsf-product-copy {
	padding: 19px 19px 17px;
}

.hzsf-product-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 20px;
}

.hzsf-product-meta .star-rating {
	float: none;
	margin: 0;
	color: var(--hzsf-accent);
	font-size: 12px;
}

.hzsf-product-meta small {
	max-width: 45%;
	overflow: hidden;
	color: var(--hzsf-muted);
	font-size: 9px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hzsf-product-copy h3 {
	min-height: 2.7em;
	margin: 9px 0 7px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.hzsf-product-copy h3 a {
	color: var(--hzsf-ink);
	text-decoration: none;
}

.hzsf-product-price {
	min-height: 28px;
	color: var(--hzsf-ink);
	font-size: 16px;
	font-weight: 850;
}

.hzsf-product-price del {
	margin-right: 6px;
	color: var(--hzsf-muted);
	font-size: .82em;
	font-weight: 500;
}

.hzsf-product-price ins {
	color: var(--hzsf-accent);
	text-decoration: none;
}

.hzsf-product-action.button {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	margin-top: 13px !important;
	padding: 10px 15px !important;
	color: var(--hzsf-surface) !important;
	background: var(--hzsf-ink) !important;
	border: 1px solid var(--hzsf-ink) !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .04em;
	line-height: 1.1 !important;
	text-decoration: none !important;
	text-transform: uppercase;
}

.hzsf-product-action b {
	font-size: 18px;
	font-weight: 400;
}

.hzsf-view-all {
	display: flex;
	width: max-content;
	margin: 40px auto 0;
}

.hzsf-proof-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	padding: clamp(24px, 3vw, 46px) max(24px, calc((100vw - 1120px) / 2));
	background: var(--hzsf-ink);
}

.hzsf-proof-strip > div {
	display: flex;
	min-height: 150px;
	align-items: center;
	justify-content: center;
	padding: 22px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(255, 255, 255, .28);
}

.hzsf-proof-strip img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 96px;
	object-fit: contain;
}

.hzsf-support-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin: clamp(50px, 7vw, 100px) max(24px, calc((100vw - 1320px) / 2));
	padding: clamp(36px, 5vw, 70px);
	color: var(--hzsf-surface);
	background:
		radial-gradient(circle at 85% 0, color-mix(in srgb, var(--hzsf-accent) 40%, transparent), transparent 32%),
		var(--hzsf-ink);
	border-radius: 28px;
}

.hzsf-support-banner h2 {
	margin: 0 0 10px;
	color: inherit;
	font-family: Georgia, serif;
	font-size: clamp(30px, 4vw, 50px);
	font-weight: 500;
	letter-spacing: -.035em;
}

.hzsf-support-banner p {
	margin: 0;
	color: rgba(255, 255, 255, .7);
}

.hzsf-support-banner > a {
	flex: 0 0 auto;
	color: var(--hzsf-ink) !important;
	background: var(--hzsf-accent);
	border-color: var(--hzsf-accent);
}

/* Native WooCommerce shop and product screens. */
.hzsf-enabled.woocommerce .site-main,
.hzsf-enabled.woocommerce-page .site-main {
	color: var(--hzsf-ink);
}

.hzsf-enabled.woocommerce ul.products,
.hzsf-enabled.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.hzsf-enabled.woocommerce ul.products::before,
.hzsf-enabled.woocommerce ul.products::after {
	display: none;
}

.hzsf-enabled.woocommerce ul.products li.product,
.hzsf-enabled.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	overflow: hidden;
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: var(--hzsf-radius);
	box-shadow: 0 10px 30px rgba(29, 22, 8, .04);
}

.hzsf-enabled.woocommerce ul.products li.product a img {
	aspect-ratio: .95;
	margin: 0;
	padding: 18px;
	object-fit: contain;
	background: var(--hzsf-cream);
}

.hzsf-enabled.woocommerce ul.products li.product .woocommerce-loop-product__title,
.hzsf-enabled.woocommerce ul.products li.product .price,
.hzsf-enabled.woocommerce ul.products li.product .star-rating {
	margin-right: 17px;
	margin-left: 17px;
}

.hzsf-enabled.woocommerce ul.products li.product .button {
	margin: 12px 17px 17px;
	color: var(--hzsf-surface);
	background: var(--hzsf-ink);
	border-radius: 999px;
}

.hzsf-enabled.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
	gap: clamp(35px, 6vw, 90px);
	padding-top: 45px;
}

.hzsf-enabled.single-product div.product > .woocommerce-product-gallery,
.hzsf-enabled.single-product div.product > .summary {
	float: none !important;
	width: auto !important;
}

.hzsf-enabled.single-product div.product > .woocommerce-product-gallery {
	align-self: start;
}

.hzsf-enabled.single-product .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	background: var(--hzsf-cream);
	border-radius: 24px;
}

.hzsf-enabled.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: 1;
	object-fit: contain;
	padding: clamp(15px, 3vw, 38px);
}

.hzsf-enabled.single-product div.product .summary {
	margin-bottom: 0;
	padding: 12px 0;
}

.hzsf-enabled.single-product .product_title {
	margin: 0 0 15px;
	color: var(--hzsf-ink);
	font-family: Georgia, serif;
	font-size: clamp(35px, 4.3vw, 60px);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1.04;
}

.hzsf-enabled.single-product div.product p.price {
	margin: 13px 0 17px;
	color: var(--hzsf-accent);
	font-size: clamp(23px, 2.5vw, 34px);
	font-weight: 850;
}

.hzsf-enabled.single-product div.product p.price del {
	color: var(--hzsf-muted);
	font-size: .65em;
}

.hzsf-enabled.single-product .woocommerce-product-details__short-description {
	color: var(--hzsf-muted);
	font-size: 15px;
	line-height: 1.7;
}

.hzsf-bundle {
	margin: 27px 0 20px;
}

.hzsf-bundle-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.hzsf-bundle-heading span {
	font-size: 15px;
	font-weight: 850;
}

.hzsf-bundle-heading small {
	color: var(--hzsf-muted);
	font-size: 11px;
}

.hzsf-bundle-options {
	display: grid;
	gap: 9px;
}

.hzsf-bundle-options button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 59px;
	padding: 11px 15px;
	color: var(--hzsf-ink);
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: 12px;
	text-align: left;
	transition: border .2s ease, background .2s ease, box-shadow .2s ease;
}

.hzsf-bundle-options button.is-active {
	background: var(--hzsf-soft-accent);
	border-color: var(--hzsf-accent);
	box-shadow: 0 0 0 1px var(--hzsf-accent);
}

.hzsf-bundle-options button > span {
	display: flex;
	align-items: center;
	gap: 9px;
}

.hzsf-bundle-options i {
	width: 15px;
	height: 15px;
	border: 1px solid var(--hzsf-muted);
	border-radius: 50%;
}

.hzsf-bundle-options .is-active i {
	background: var(--hzsf-accent);
	border: 4px solid var(--hzsf-surface);
	box-shadow: 0 0 0 1px var(--hzsf-accent);
}

.hzsf-bundle-options em {
	padding: 4px 7px;
	color: var(--hzsf-surface);
	background: var(--hzsf-ink);
	border-radius: 999px;
	font-size: 8px;
	font-style: normal;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hzsf-bundle-options small {
	color: var(--hzsf-muted);
	font-size: 11px;
}

.hzsf-enabled.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 20px 0 0 !important;
}

.hzsf-enabled.single-product form.cart .quantity {
	flex: 0 0 90px;
	margin: 0 !important;
}

.hzsf-enabled.single-product form.cart .qty {
	width: 100%;
	height: 51px;
	border: 1px solid var(--hzsf-line);
	border-radius: 999px;
}

.hzsf-enabled.single-product form.cart .single_add_to_cart_button,
.hzsf-enabled.single-product form.cart .hzsf-buy-now {
	flex: 1 1 170px;
	min-height: 51px;
	margin: 0 !important;
	padding: 12px 20px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 850 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.hzsf-enabled.single-product form.cart .single_add_to_cart_button {
	color: var(--hzsf-surface) !important;
	background: var(--hzsf-ink) !important;
}

.hzsf-enabled.single-product form.cart .hzsf-buy-now {
	color: var(--hzsf-ink) !important;
	background: var(--hzsf-accent) !important;
}

.hzsf-product-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 19px;
}

.hzsf-product-trust span {
	display: flex;
	min-height: 75px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	color: var(--hzsf-muted);
	background: var(--hzsf-cream);
	border-radius: 12px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.hzsf-product-trust b {
	margin-bottom: 6px;
	color: var(--hzsf-accent);
	font-size: 18px;
}

.hzsf-enabled.single-product div.product .woocommerce-tabs,
.hzsf-enabled.single-product div.product .related,
.hzsf-enabled.single-product div.product .upsells {
	grid-column: 1 / -1;
}

.hzsf-enabled.single-product div.product .woocommerce-tabs {
	margin-top: 45px;
	padding: clamp(25px, 4vw, 55px);
	background: var(--hzsf-cream);
	border-radius: var(--hzsf-radius);
}

@media (max-width: 980px) {
	.hzsf-hero-slide {
		grid-template-columns: minmax(0, 1fr) minmax(290px, .8fr);
		gap: 25px;
	}

	.hzsf-product-grid,
	.hzsf-enabled.woocommerce ul.products,
	.hzsf-enabled.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hzsf-enabled.single-product div.product {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

@media (max-width: 720px) {
	.hzsf-enabled .ast-primary-header-bar,
	.hzsf-enabled .main-header-bar {
		min-height: 70px !important;
	}

	.hzsf-enabled .site-primary-header-wrap .ast-builder-grid-row,
	.hzsf-enabled .ast-primary-header-bar .ast-builder-grid-row,
	.hzsf-enabled .main-header-bar > .ast-container {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	.hzsf-enabled .site-header .custom-logo-link img,
	.hzsf-enabled .site-header .site-logo-img img,
	.hzsf-enabled .site-header .custom-logo {
		max-width: 135px !important;
		max-height: 58px !important;
	}

	.hzsf-sale-bar {
		min-height: 0;
		flex-direction: column;
	}

	.hzsf-azadi-spotlight {
		gap: 9px;
		min-height: 34px;
		padding: 7px 14px;
	}

	.hzsf-azadi-spotlight strong {
		font-size: clamp(16px, 5vw, 22px);
	}

	.hzsf-sale-bar.is-running .hzsf-azadi-spotlight {
		position: relative;
		width: 100%;
		min-height: 34px;
	}

	.hzsf-sale-bar.is-running .hzsf-azadi-spotlight strong {
		font-size: 11px;
		letter-spacing: .065em;
	}

	.hzsf-sale-bar.is-running .hzsf-azadi-spotlight::after {
		display: none;
	}

	.hzsf-sale-bar.is-running .hzsf-announcement-marquee {
		min-height: 32px;
		padding-left: 0;
	}

	.hzsf-marquee-set strong,
	.hzsf-benefit-set span {
		font-size: 10px;
	}

	.hzsf-benefit-marquee {
		padding: 13px 0;
	}

	.hzsf-sale-live-set span {
		gap: 10px;
		padding-right: 29px;
	}

	.hzsf-sale-live-set i {
		width: 41px;
		height: 41px;
		font-size: 8px;
	}

	.hzsf-sale-live-set strong {
		font-size: 16px;
	}

	.hzsf-sale-live-row {
		display: grid;
		height: auto;
		min-height: 0;
		grid-template-columns: 1fr;
	}

	.hzsf-sale-is-on {
		min-height: 58px;
		padding: 8px 0;
	}

	.hzsf-countdown-below {
		position: relative;
		right: auto;
		width: 100%;
		padding: 0;
	}

	.hzsf-strip-clock {
		gap: 2px;
		padding: 7px 6px;
	}

	.hzsf-days-left {
		width: auto;
		padding: 5px 8px;
		font-size: 7px;
		letter-spacing: .05em;
	}

	.hzsf-days-left strong {
		font-size: 21px;
	}

	.hzsf-strip-clock > div {
		width: auto;
	}

	.hzsf-countdown-stack {
		display: grid;
		width: 100%;
		grid-template-columns: auto minmax(0, 1fr);
	}

	.hzsf-strip-clock > div::after {
		top: 18px;
	}

	.hzsf-strip-clock strong {
		height: 35px;
		font-size: 18px;
	}

	.hzsf-strip-clock small {
		font-size: 5px;
		letter-spacing: 0;
	}

	.hzsf-hero-slides {
		min-height: 0;
		height: min(70vh, 520px);
		aspect-ratio: auto;
	}

	.hzsf-hero-slide {
		display: block;
		overflow: hidden;
		padding: 0;
		isolation: isolate;
		background: linear-gradient(155deg, var(--hzsf-ink), var(--hzsf-accent));
	}

	.hzsf-hero-slide::after {
		position: absolute;
		z-index: 1;
		inset: 0;
		content: "";
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, .08) 28%, rgba(0, 0, 0, .74) 100%);
	}

	.hzsf-hero-copy {
		position: absolute;
		z-index: 2;
		right: 20px;
		bottom: 88px;
		left: 20px;
		text-align: center;
		color: #fff;
		text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
	}

	.hzsf-hero-copy h1,
	.hzsf-hero-copy h2 {
		margin-right: auto;
		margin-left: auto;
		color: #fff;
		font-size: clamp(34px, 10vw, 52px);
	}

	.hzsf-hero-copy p {
		margin-right: auto;
		margin-bottom: 21px;
		margin-left: auto;
		font-size: 14px;
		color: rgba(255, 255, 255, .92);
	}

	.hzsf-hero-visual {
		position: absolute;
		z-index: 0;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
	}

	.hzsf-hero-visual::before {
		display: none;
	}

	.hzsf-hero-visual picture,
	.hzsf-hero-visual img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hzsf-hero-visual img {
		object-fit: cover;
		object-position: center;
	}

	.hzsf-hero-controls {
		right: 50%;
		bottom: 18px;
		transform: translateX(50%);
	}

	.hzsf-hero-countdown {
		justify-content: center;
	}

	.hzsf-hero-countdown div {
		width: 61px;
		min-height: 64px;
	}

	.hzsf-hero-countdown strong {
		font-size: 21px;
	}

	.hzsf-categories,
	.hzsf-products {
		padding: 62px 15px;
	}

	.hzsf-categories {
		padding-right: 0;
		padding-left: 0;
	}

	.hzsf-category-viewport {
		width: 100vw;
	}

	.hzsf-category-item {
		flex-basis: 144px;
	}

	.hzsf-category-image {
		width: 136px;
	}

	.hzsf-product-grid {
		gap: 10px;
	}

	.hzsf-product-card {
		border-radius: 14px;
	}

	.hzsf-product-image img {
		padding: 9px;
	}

	.hzsf-product-copy {
		padding: 12px 10px 10px;
	}

	.hzsf-product-copy h3 {
		font-size: 13px;
	}

	.hzsf-product-price {
		font-size: 13px;
	}

	.hzsf-product-action.button {
		min-height: 38px;
		padding: 8px 11px !important;
		font-size: 9px !important;
	}

	.hzsf-proof-strip {
		grid-template-columns: repeat(2, 1fr);
		padding: 18px 15px;
	}

	.hzsf-proof-strip > div {
		min-height: 112px;
		padding: 15px;
	}

	.hzsf-proof-strip img {
		height: 72px;
	}

	.hzsf-support-banner {
		flex-direction: column;
		align-items: flex-start;
		margin: 45px 15px;
		padding: 34px 24px;
	}

	.hzsf-enabled.single-product div.product {
		display: block;
		padding-top: 20px;
	}

	.hzsf-enabled.single-product div.product > .summary {
		margin-top: 28px;
	}

	.hzsf-enabled.single-product .product_title {
		font-size: 38px;
	}

	.hzsf-bundle-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.hzsf-bundle-options button {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}

	.hzsf-product-trust {
		gap: 5px;
	}

	.hzsf-enabled.woocommerce ul.products,
	.hzsf-enabled.woocommerce-page ul.products {
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hzsf-enabled *,
	.hzsf-enabled *::before,
	.hzsf-enabled *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ------------------------------------------------------------------ */
/* Hero Slider (Stage 3) — per-slide presentation options.            */
/* These build on the existing .hzsf-hero-* layout so migrated and    */
/* legacy heroes look identical unless an admin sets an option.       */
/* ------------------------------------------------------------------ */

/* Optional per-slide text colour, applied via the --hzsf-hero-text var. */
.hzsf-hero-slide[style*="--hzsf-hero-text"] .hzsf-hero-copy {
	color: var(--hzsf-hero-text);
}

/* Text alignment. */
.hzsf-hero-slide.hzsf-align-center .hzsf-hero-copy {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.hzsf-hero-slide.hzsf-align-center .hzsf-hero-actions {
	justify-content: center;
}
.hzsf-hero-slide.hzsf-align-right .hzsf-hero-copy {
	margin-left: auto;
	text-align: right;
}
.hzsf-hero-slide.hzsf-align-right .hzsf-hero-actions {
	justify-content: flex-end;
}

/* Vertical content position within the slide. */
.hzsf-hero-slide.hzsf-pos-top {
	align-items: start;
}
.hzsf-hero-slide.hzsf-pos-bottom {
	align-items: end;
}

/* Copy width. */
.hzsf-hero-slide.hzsf-width-narrow .hzsf-hero-copy {
	max-width: 460px;
}
.hzsf-hero-slide.hzsf-width-wide .hzsf-hero-copy {
	max-width: 820px;
}

/* Subtitle sits between the title and description. */
.hzsf-hero-subtitle {
	margin: -8px 0 18px !important;
	font-size: clamp(16px, 1.6vw, 22px) !important;
	font-weight: 700;
	color: color-mix(in srgb, currentColor 85%, transparent) !important;
}

/* Primary + optional secondary button row. */
.hzsf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.hzsf-hero-secondary {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 13px 22px;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform .2s ease, opacity .2s ease;
}
.hzsf-hero-secondary:hover {
	transform: translateY(-2px);
	opacity: .82;
}

/* Focal point for images and video via object-position. */
.hzsf-hero-visual[style*="--hzsf-hero-object"] img,
.hzsf-hero-visual[style*="--hzsf-hero-object"] .hzsf-hero-video {
	object-position: var(--hzsf-hero-object);
}

/* Optional darkening/tint overlay over the media. */
.hzsf-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 28px;
	pointer-events: none;
}
.hzsf-hero-visual.is-empty::before {
	display: none;
}

/* ---------------------------------------------------------------------
 * Full-bleed slide mode (Stage 3.1).
 * Add `hzsf-full-bleed` in a slide's "Extra CSS classes" to stretch its
 * media across the whole hero as a background, with the copy on top.
 * Pair with a white text colour and 30–45% overlay for readability.
 * ------------------------------------------------------------------- */
.hzsf-hero-slide.hzsf-full-bleed {
	display: block;
	padding: 0;
}

.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-visual {
	position: absolute;
	inset: 0;
	height: 100%;
	min-height: 0;
	z-index: 0;
}

.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-visual::before {
	display: none;
}

.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-visual img,
.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-visual video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hzsf-hero-object, center);
	filter: none;
}

.hzsf-hero-slide.hzsf-full-bleed.is-active .hzsf-hero-visual img {
	transform: none;
}

.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	max-width: 640px;
	padding: clamp(56px, 7vw, 108px) max(24px, calc((100vw - 1320px) / 2));
}

.hzsf-hero-slide.hzsf-full-bleed.hzsf-align-center .hzsf-hero-copy {
	margin: 0 auto;
	text-align: center;
	align-items: center;
}

@media (max-width: 720px) {
	.hzsf-hero-slide.hzsf-full-bleed .hzsf-hero-copy {
		padding: 48px 22px;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------
 * Banner-only slides (Stage 3.2).
 * Applied automatically by the renderer when a slide has no text: the
 * media fills the hero edge-to-edge and any button floats on top as a
 * pill. `contain` on very wide screens keeps the artwork uncropped.
 * ------------------------------------------------------------------- */
.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-visual img,
.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-visual video {
	object-fit: cover;
}

.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-copy {
	position: absolute;
	inset: auto 0 clamp(28px, 5vw, 56px) 0;
	z-index: 2;
	display: flex;
	height: auto;
	max-width: none;
	padding: 0 max(24px, calc((100vw - 1320px) / 2));
	justify-content: flex-start;
}

.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-actions {
	margin: 0;
}

.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-actions a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 999px;
	background: #fff;
	color: var(--hzsf-ink, #0b3d1f);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 14px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
	transition: transform .25s ease, box-shadow .25s ease;
}

.hzsf-hero-slide.hzsf-banner-only .hzsf-hero-actions a:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, .34);
}

/* Generic action buttons on text slides too (they previously rendered as
 * bare links because legacy styles only matched `.hzsf-hero-copy > a`). */
.hzsf-hero-actions a {
	text-decoration: none;
}

/* =========================================================================
 * Daraz-style Cart (Phase 1)
 * Layout mirrors Daraz; all colours come from the theme variables in :root
 * (--hzsf-ink, --hzsf-accent, etc.) so the store's green scheme is used, not
 * Daraz orange. Applied on the cart page only.
 * ========================================================================= */

/* Two-column shell: line items on the left, sticky summary on the right. */
.woocommerce-cart .woocommerce {
	max-width: 1200px;
	margin-inline: auto;
}

@media (min-width: 981px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-areas:
			"toolbar toolbar"
			"items   summary";
		gap: 24px;
		align-items: start;
		overflow: visible;
	}
	.woocommerce-cart .hzsf-cart-form,
	.woocommerce-cart form.woocommerce-cart-form { grid-area: items; }
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart .hzsf-cart-collaterals { grid-area: summary; width: 100% !important; }
	.woocommerce-cart .hzsf-cart-toolbar { grid-area: toolbar; }

	/* Pin the Order Summary while the item list scrolls (Daraz behaviour).
	   position:sticky only works when the sticky element's containing block is
	   taller than the element itself. The reliable containing block here is the
	   grid cell (.cart-collaterals / .hzsf-cart-collaterals), which spans the full
	   height of the items column — so we stick THAT, not the inner summary box.
	   A sticky element also can't escape an ancestor with overflow other than
	   visible, so the grid + its parents must not clip. */
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart .hzsf-cart-collaterals {
		position: sticky;
		top: 24px;
		align-self: start;
	}
	/* Astra sometimes floats collaterals; neutralise it inside our grid. */
	.woocommerce-cart .cart-collaterals { float: none !important; width: 100% !important; }
	.woocommerce-cart .cart-collaterals .cross-sells { display: none; }
}

/* --- Select-all toolbar (Daraz: "SELECT ALL (N)" left, DELETE right) --- */
.hzsf-cart-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: var(--hzsf-radius);
	box-shadow: var(--hzsf-shadow);
	margin-bottom: 14px;
}
.hzsf-select-all-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	color: var(--hzsf-ink);
	cursor: pointer;
}
.hzsf-select-all-label { letter-spacing: .2px; }
/* DELETE action on the right, like Daraz. Wired to remove selected lines. */
.hzsf-toolbar-delete {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	color: var(--hzsf-muted);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 10px;
	transition: color .15s ease, background .15s ease, opacity .15s ease;
}
.hzsf-toolbar-delete:hover { color: #c0392b; background: #fde8e8; }
.hzsf-toolbar-delete[disabled] { opacity: .4; cursor: not-allowed; }
.hzsf-toolbar-delete svg { width: 17px; height: 17px; }

/* --- Cart table as cards --- */
.hzsf-cart-table {
	border: 0;
	background: transparent;
}
.hzsf-cart-table thead { display: none; }
.hzsf-cart-table .cart_item.hzsf-cart-line {
	display: grid;
	grid-template-columns: 34px 76px minmax(0, 1fr) auto auto auto;
	grid-template-areas: "select thumb name price quantity subtotal";
	column-gap: 18px;
	align-items: center;
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: var(--hzsf-radius);
	box-shadow: var(--hzsf-shadow);
	padding: 16px 20px;
	margin-bottom: 14px;
}
.hzsf-cart-table td { border: 0 !important; padding: 0 !important; vertical-align: middle; }
.hzsf-cart-table .product-select    { grid-area: select; align-self: center; }
.hzsf-cart-table .product-thumbnail { grid-area: thumb; }
.hzsf-cart-table .product-name      { grid-area: name; align-self: center; padding-right: 12px !important; }
.hzsf-cart-table .product-price     { grid-area: price; align-self: center; text-align: right; font-weight: 700; color: var(--hzsf-accent); font-size: 1.05rem; white-space: nowrap; }
.hzsf-cart-table .product-quantity  { grid-area: quantity; align-self: center; }
.hzsf-cart-table .product-subtotal  { grid-area: subtotal; align-self: center; display: flex; align-items: center; gap: 14px; justify-content: flex-end; white-space: nowrap; }
.hzsf-cart-table .product-thumbnail img {
	width: 68px; height: 68px; object-fit: cover; border-radius: 12px;
	border: 1px solid var(--hzsf-line);
}
.hzsf-cart-table .product-name { line-height: 1.4; font-size: .98rem; }
.hzsf-cart-table .product-name,
.hzsf-cart-table .product-name a { color: var(--hzsf-ink); text-decoration: none; font-weight: 600; }
.hzsf-cart-table .product-name a:hover { color: var(--hzsf-accent); }
/* Product meta (No Brand / Color:…) sits under the name, muted, like Daraz. */
.hzsf-cart-table .product-name .variation,
.hzsf-cart-table .product-name .wc-item-meta,
.hzsf-cart-table .product-name dl { margin: 4px 0 0; font-size: .82rem; color: var(--hzsf-muted); font-weight: 400; }
/* The bold line subtotal shown before the trash icon. */
.hzsf-cart-table .product-subtotal > .hzsf-line-sub { font-weight: 700; color: var(--hzsf-ink); font-size: 1.05rem; }

/* Daraz-style −/+ quantity stepper. */
.hzsf-cart-table .product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hzsf-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--hzsf-surface);
}
.hzsf-cart-table .product-quantity .quantity .qty {
	width: 44px; height: 32px;
	border: 0 !important;
	border-left: 1px solid var(--hzsf-line) !important;
	border-right: 1px solid var(--hzsf-line) !important;
	border-radius: 0 !important;
	text-align: center;
	background: var(--hzsf-surface);
	-moz-appearance: textfield;
	box-shadow: none !important;
	font-weight: 600;
	color: var(--hzsf-ink);
}
.hzsf-cart-table .product-quantity .quantity .qty::-webkit-outer-spin-button,
.hzsf-cart-table .product-quantity .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hzsf-cart-table .product-quantity .quantity .hzsf-qty-btn {
	width: 32px; height: 32px;
	border: 0;
	background: var(--hzsf-cream);
	color: var(--hzsf-ink);
	font-size: 18px; line-height: 1;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease;
	-webkit-user-select: none; user-select: none;
}
.hzsf-cart-table .product-quantity .quantity .hzsf-qty-btn:hover { background: var(--hzsf-soft-accent); }

/* Remove (trash) sits inline at the far right of the row, Daraz-style. */
.hzsf-line-actions { display: inline-flex; align-items: center; margin: 0; }
.hzsf-line-remove {
	color: var(--hzsf-muted) !important;
	line-height: 1; text-decoration: none;
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; background: transparent;
	transition: background .15s ease, color .15s ease;
}
.hzsf-line-remove svg { width: 18px; height: 18px; }
.hzsf-line-remove:hover { background: #fde8e8; color: #c0392b !important; }
/* Daraz shows the price once (in the price column) + trash. The per-line
   qty×price subtotal is redundant there, so hide its text but keep it in the
   DOM for the selection/zeroing logic. */
.hzsf-cart-table .product-subtotal > .hzsf-line-sub { display: none; }

/* Daraz has no visible "Update cart" button — steppers auto-post. Keep it in
   the DOM (WooCommerce needs the submit + nonce) but visually hidden. */
.hzsf-cart-table .hzsf-cart-actions-row td.actions {
	padding: 0 !important;
	border: 0 !important;
}
.hzsf-cart-table .hzsf-update-cart {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* --- Custom green checkbox (works on injected markup too) --- */
.hzsf-select-item-wrap,
.hzsf-select-all-wrap { position: relative; display: inline-flex; align-items: center; }
.hzsf-select-item-wrap {
	margin: 8px 0 0;
	vertical-align: middle;
	cursor: pointer;
}
.hzsf-select-item-text {
	font-size: 0; /* Visually hidden; the checkbox alone reads as Daraz-style. */
}
.hzsf-select-item,
.hzsf-select-all {
	width: 22px; height: 22px;
	accent-color: var(--hzsf-accent);
	cursor: pointer;
	margin: 0;
}

/* Unselected lines fade back, exactly like Daraz's unticked rows. */
.hzsf-cart-line.hzsf-line-unselected {
	opacity: .62;
}
.hzsf-cart-line.hzsf-line-unselected .product-subtotal { color: var(--hzsf-muted); }
.hzsf-line-price-inactive { color: var(--hzsf-muted); }

/* --- Order Summary box --- */
.hzsf-order-summary,
.woocommerce-cart .cart_totals {
	background: var(--hzsf-surface);
	border: 1px solid var(--hzsf-line);
	border-radius: var(--hzsf-radius);
	box-shadow: var(--hzsf-shadow);
	padding: 22px;
	width: 100%;
	min-width: 280px;
	float: none;
}
.hzsf-order-summary th,
.hzsf-order-summary td,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
}
.hzsf-summary-title {
	margin: 0 0 16px;
	font-size: 1.25rem;
	color: var(--hzsf-ink);
	border-bottom: 1px solid var(--hzsf-line);
	padding-bottom: 12px;
}
.hzsf-summary-table { width: 100%; margin: 0 0 18px; border: 0; }
.hzsf-summary-table th,
.hzsf-summary-table td { border: 0 !important; padding: 8px 0 !important; }
.hzsf-summary-table th { text-align: left; font-weight: 500; color: var(--hzsf-muted); }
.hzsf-summary-table td { text-align: right; font-weight: 600; color: var(--hzsf-ink); }
.hzsf-summary-table .order-total th,
.hzsf-summary-table .order-total td {
	padding-top: 14px !important;
	border-top: 1px solid var(--hzsf-line) !important;
	font-size: 1.2rem;
}
.hzsf-summary-table .order-total th { vertical-align: baseline; }
/* Daraz makes the grand total the biggest, boldest figure in the box. */
.hzsf-summary-table .order-total td {
	color: var(--hzsf-accent);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.1;
}
/* "(2 items)" count sits muted and lighter next to the Subtotal label. */
.hzsf-sum-count {
	color: var(--hzsf-muted);
	font-weight: 400;
	font-size: 0.9em;
}
/* Voucher row spans both columns; reset the inherited right-align/bold. */
.hzsf-summary-table .hzsf-voucher-row td {
	text-align: left !important;
	font-weight: 400 !important;
	padding: 6px 0 4px !important;
}
.hzsf-sum-shipping .hzsf-free-ship { color: var(--hzsf-accent); font-weight: 700; }

/* --- Voucher / coupon box inside the summary (Daraz layout) --- */
.hzsf-summary-voucher {
	display: flex;
	gap: 8px;
	margin: 6px 0 6px;
}
.hzsf-summary-voucher input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hzsf-line);
	border-radius: 10px;
	background: var(--hzsf-surface);
	color: var(--hzsf-ink);
}
.hzsf-summary-voucher input[type="text"]:focus {
	outline: none;
	border-color: var(--hzsf-accent);
	box-shadow: 0 0 0 2px var(--hzsf-soft-accent);
}
.hzsf-summary-voucher .hzsf-voucher-apply {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--hzsf-ink) !important;
	color: var(--hzsf-surface) !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: filter .15s ease;
}
.hzsf-summary-voucher .hzsf-voucher-apply:hover { filter: brightness(1.1); }

/* --- Proceed button --- */
.hzsf-proceed-wrap { margin-top: 4px; }
.hzsf-proceed-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	text-align: center;
	padding: 15px 18px !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--hzsf-surface) !important;
	background: var(--hzsf-accent) !important;
	border: 0 !important;
	border-radius: 14px !important;
	text-decoration: none !important;
	transition: filter .15s ease, transform .05s ease;
}
/* Count sits in a soft rounded pill (Daraz shows the item count on the button). */
.hzsf-proceed-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
}
.hzsf-proceed-checkout:hover { filter: brightness(1.06); }
.hzsf-proceed-checkout:active { transform: translateY(1px); }
.hzsf-proceed-checkout.hzsf-disabled {
	background: var(--hzsf-muted) !important;
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Mobile sticky checkout bar (Daraz-style) --- */
/* Hidden on desktop; the sticky panel handles large screens. Shown as a fixed
   bottom bar on mobile via the media query below. */
.hzsf-mobile-checkout-bar { display: none; }

/* Loading state while AJAX recalculates. */
.hzsf-cart-loading { position: relative; }
.hzsf-cart-loading::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(255,255,255,.4);
	border-radius: var(--hzsf-radius);
}

/* --- Mobile --- */
@media (max-width: 980px) {
	.hzsf-cart-table .cart_item.hzsf-cart-line {
		grid-template-columns: 30px 64px minmax(0, 1fr);
		grid-template-areas:
			"select thumb name"
			"select thumb price"
			"select thumb quantity"
			"select thumb subtotal";
		column-gap: 12px;
		row-gap: 8px;
		padding: 14px 16px;
	}
	.hzsf-cart-table .product-name      { align-self: end; }
	.hzsf-cart-table .product-price     { text-align: left; }
	.hzsf-cart-table .product-subtotal  { justify-content: flex-start; }
	.hzsf-cart-table .product-thumbnail img { width: 60px; height: 60px; }
	.woocommerce-cart .hzsf-order-summary { margin-top: 18px; }
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }

	/* On mobile, Daraz hides the big summary "Proceed" button and pins a compact
	   bar to the bottom instead. Keep the summary card (subtotal, voucher, total)
	   visible for reference, but hide its full-width button to avoid duplication. */
	.hzsf-proceed-wrap { display: none; }

	/* Leave room so the fixed bar never covers the last cart row / footer. */
	.woocommerce-cart .woocommerce { padding-bottom: 84px; }

	.hzsf-mobile-checkout-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--hzsf-surface);
		border-top: 1px solid var(--hzsf-line);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
	}
	.hzsf-bar-figures {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		line-height: 1.25;
	}
	.hzsf-bar-subtotal { font-size: 0.95rem; }
	.hzsf-bar-subtotal .hzsf-bar-label { color: var(--hzsf-ink); font-weight: 500; }
	.hzsf-bar-subtotal .hzsf-bar-amount { color: var(--hzsf-accent); font-weight: 800; }
	.hzsf-bar-shipping { font-size: 0.8rem; color: var(--hzsf-muted); }
	.hzsf-bar-shipping .hzsf-bar-amount { font-weight: 600; }
	.hzsf-bar-shipping .hzsf-free-ship { color: var(--hzsf-accent); font-weight: 700; }

	.hzsf-bar-checkout {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 12px 20px;
		border-radius: 12px;
		background: var(--hzsf-accent);
		color: var(--hzsf-surface);
		font-weight: 700;
		font-size: 1rem;
		text-decoration: none;
		white-space: nowrap;
		transition: filter .15s ease, transform .05s ease;
	}
	.hzsf-bar-checkout:active { transform: translateY(1px); }
	.hzsf-bar-checkout-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.25);
		font-size: 0.82rem;
		line-height: 1;
	}
	.hzsf-bar-checkout.hzsf-disabled {
		background: var(--hzsf-muted);
		opacity: .55;
		pointer-events: none;
	}
}