/* =========================================================================
   ZaroratZone — storefront stylesheet
   Ported from the approved "ZaroratZone Home" design canvas.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
	--zz-gold:        #ffc600;
	--zz-gold-deep:   #f08c00;
	--zz-gold-link:   #f0a500;
	--zz-gold-dark:   #b07f00;
	--zz-gold-darker: #8a6100;
	--zz-gold-soft:   #fff3d1;
	--zz-gold-soft-2: #ffe6a8;
	--zz-gold-dim:    #d8b25a;

	--zz-ink:         #1d2128;
	--zz-ink-900:     #14161a;
	--zz-ink-950:     #0f1114;
	--zz-ink-800:     #17191d;
	--zz-ink-700:     #23272e;

	--zz-text:        #1e2126;
	--zz-text-2:      #2a2f37;
	--zz-muted:       #4b515c;
	--zz-muted-2:     #6b7280;
	--zz-muted-3:     #8a919c;
	--zz-muted-4:     #9aa1ab;
	--zz-on-dark:     #e8e9eb;
	--zz-on-dark-2:   #c9ccd2;

	--zz-line:        #e9eaec;
	--zz-line-2:      #e5e6e9;
	--zz-line-3:      #e2e3e6;
	--zz-line-dark:   #2a2f37;
	--zz-line-dark-2: #3a3f47;

	--zz-red:         #e53935;
	--zz-red-deep:    #c22a21;
	--zz-red-soft:    #fbdcda;

	--zz-bg:          #f5f5f6;
	--zz-surface:     #ffffff;
	--zz-hero-bg:     #eff0f2;
	--zz-ph:          #f1f1f2;
	--zz-ph-2:        #e9eaec;

	--zz-container:   1420px;
	--zz-gutter:      24px;

	--zz-r-sm:  6px;
	--zz-r:     10px;
	--zz-r-md:  14px;
	--zz-r-lg:  16px;
	--zz-pill:  999px;

	--zz-shadow-card: 0 6px 20px rgba(29, 33, 40, .10);
	--zz-shadow-pop:  0 8px 30px rgba(29, 33, 40, .16);

	--zz-t: .2s ease;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--zz-bg);
	font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--zz-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--zz-text); text-decoration: none; transition: color var(--zz-t); }
a:hover { color: var(--zz-gold-link); }

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--zz-text); line-height: 1.2; font-weight: 800; }

p { margin: 0 0 1rem; }

button { font: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--zz-on-dark-2); border-radius: 4px; }

.zz-container {
	width: 100%;
	max-width: var(--zz-container);
	margin-inline: auto;
	padding-inline: var(--zz-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 10px; left: 10px;
	z-index: 999;
	width: auto; height: auto;
	padding: 12px 20px;
	clip: auto;
	background: var(--zz-ink);
	color: #fff;
	border-radius: var(--zz-r-sm);
}

:focus-visible { outline: 3px solid var(--zz-gold); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.zz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--zz-pill);
	background: var(--zz-ink);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	transition: background var(--zz-t), color var(--zz-t), opacity var(--zz-t);
}
.zz-btn:hover { background: var(--zz-gold); color: var(--zz-ink); }

.zz-btn--gold { background: var(--zz-gold); color: var(--zz-ink); font-weight: 700; }
.zz-btn--gold:hover { background: var(--zz-ink); color: #fff; }

.zz-btn--sm { padding: 10px 20px; font-size: 13.5px; }
.zz-btn--lg { padding: 14px 30px; font-size: 15.5px; }

/* WooCommerce button skin */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .widget_price_filter .price_slider_amount .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--zz-pill);
	background: var(--zz-ink);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.1;
	transition: background var(--zz-t), color var(--zz-t);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--zz-gold);
	color: var(--zz-ink);
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled[disabled] {
	padding: 13px 28px;
	background: var(--zz-muted-3);
	color: #fff;
	opacity: 1;
}

/* -------------------------------------------------------------------------
   4. Gold bar, topbar
   ------------------------------------------------------------------------- */
.zz-goldbar { height: 4px; background: var(--zz-gold); }

.zz-topbar {
	background: var(--zz-surface);
	border-bottom: 1px solid var(--zz-line);
	font-size: 13px;
	color: var(--zz-muted);
}
.zz-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 8px;
}
.zz-topbar__left,
.zz-topbar__right { display: flex; align-items: center; gap: 22px; }
.zz-topbar__right { gap: 18px; }

.zz-topbar a,
.zz-topbar span { display: flex; align-items: center; gap: 6px; color: var(--zz-muted); }
.zz-topbar a { font-weight: 500; }
.zz-topbar a:hover { color: var(--zz-gold-link); }

.zz-socials { display: flex; align-items: center; gap: 12px; }
.zz-socials a { color: var(--zz-muted); }

.zz-topbar__menu {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */
.zz-header { background: var(--zz-surface); }

.zz-header__inner {
	display: flex;
	align-items: center;
	gap: 30px;
	padding-block: 18px;
}

/* Logo */
.zz-logo { display: flex; align-items: center; gap: 12px; flex: none; }

.zz-logo__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	flex: none;
	border-radius: 50% 50% 50% 14%;
	background: linear-gradient(135deg, var(--zz-gold), var(--zz-gold-deep));
	box-shadow: 0 3px 8px rgba(240, 140, 0, .3);
	transform: rotate(-8deg);
}
.zz-logo__mark span {
	font-size: 30px;
	font-weight: 800;
	font-style: italic;
	color: #fff;
	line-height: 1;
	transform: rotate(8deg);
}

.zz-logo__text { display: flex; flex-direction: column; gap: 2px; }
.zz-logo__name {
	font-size: 29px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1;
	color: var(--zz-gold-deep);
}
.zz-logo__name-alt { color: var(--zz-ink); }
.zz-logo__tagline {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.4px;
	color: var(--zz-ink);
}

.zz-logo--panel .zz-logo__mark { width: 38px; height: 38px; box-shadow: none; }
.zz-logo--panel .zz-logo__mark span { font-size: 22px; }
.zz-logo--panel .zz-logo__name { font-size: 21px; color: var(--zz-gold); }
.zz-logo--panel .zz-logo__name-alt { color: #fff; }

.custom-logo { max-height: 56px; width: auto; }

/* Burger */
.zz-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	flex: none;
	border: 0;
	background: none;
}
.zz-burger__bars { display: flex; flex-direction: column; gap: 5.1px; }
.zz-burger__bars span {
	display: block;
	width: 26px; height: 2.6px;
	border-radius: 1.3px;
	background: var(--zz-ink);
}

/* Search */
.zz-search {
	flex: 1;
	display: flex;
	align-items: center;
	height: 46px;
	padding: 4px 4px 4px 0;
	border: 2px solid var(--zz-gold);
	border-radius: var(--zz-pill);
	background: var(--zz-surface);
}
.zz-search__cat {
	height: 26px;
	padding: 0 10px 0 20px;
	border: 0;
	border-right: 1px solid var(--zz-line-2);
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--zz-text);
	max-width: 180px;
}
/* Suppress the resting outline only — keep the :focus-visible ring. */
.zz-search__cat:not(:focus-visible) { outline: none; }
.zz-search__field {
	flex: 1;
	min-width: 0;
	padding: 0 16px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--zz-text);
}
.zz-search__field:not(:focus-visible) { outline: none; }

.zz-search__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var(--zz-gold);
	color: var(--zz-ink);
	transition: background var(--zz-t);
}
.zz-search__btn:hover { background: var(--zz-gold-deep); }

/* Header actions */
.zz-header__actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex: none;
	color: var(--zz-ink);
}
.zz-hact {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 0;
	background: none;
	padding: 0;
	color: var(--zz-ink);
}
.zz-hact:hover { color: var(--zz-gold-deep); }
.zz-hact__icon { position: relative; display: flex; }
.zz-hact__label { font-size: 16px; font-weight: 600; }

.zz-count {
	position: absolute;
	top: -6px; right: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: var(--zz-pill);
	background: var(--zz-gold);
	color: var(--zz-ink);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   6. Primary nav
   ------------------------------------------------------------------------- */
.zz-nav { background: var(--zz-ink); }
.zz-nav__inner { display: flex; }

.zz-nav__menu {
	display: flex;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}
.zz-nav__menu li { position: relative; }
.zz-nav__menu > li > a {
	display: block;
	padding: 15px 0;
	color: var(--zz-on-dark);
	border-bottom: 3px solid transparent;
}
.zz-nav__menu > li > a:hover { color: var(--zz-gold); }
.zz-nav__menu > li.current-menu-item > a,
.zz-nav__menu > li.current_page_item > a,
.zz-nav__menu > li.current-menu-ancestor > a {
	color: var(--zz-gold);
	border-bottom-color: var(--zz-gold);
	font-weight: 600;
}

/* Dropdown */
.zz-nav__menu .sub-menu {
	position: absolute;
	top: 100%; left: -14px;
	z-index: 40;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--zz-surface);
	border-radius: var(--zz-r);
	box-shadow: var(--zz-shadow-pop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--zz-t);
}
.zz-nav__menu li:hover > .sub-menu,
.zz-nav__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.zz-nav__menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--zz-r-sm);
	color: var(--zz-text);
	font-size: 14.5px;
}
.zz-nav__menu .sub-menu a:hover { background: var(--zz-gold-soft); color: var(--zz-gold-darker); }

/* -------------------------------------------------------------------------
   7. Off-canvas panel
   ------------------------------------------------------------------------- */
.zz-panel { position: fixed; inset: 0; z-index: 90; }
.zz-panel[hidden] { display: none; }

.zz-panel__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 15, .55);
	animation: zz-fade .2s ease;
}

.zz-panel__body {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: 88vw;
	background: var(--zz-surface);
	overflow: hidden;
	animation: zz-slide-in .25s ease;
}

@keyframes zz-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes zz-slide-in { from { transform: translateX(-100%) } to { transform: none } }

.zz-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	padding: 16px 18px;
	border-bottom: 1px solid var(--zz-line);
}
.zz-panel__back {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: none;
	border: 1px solid var(--zz-line-2);
	border-radius: 50%;
	background: var(--zz-surface);
	color: var(--zz-ink);
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-panel__back:hover { background: var(--zz-ink); border-color: var(--zz-ink); color: #fff; }
.zz-panel__heading { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--zz-ink); }

.zz-panel__search {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
	height: 44px;
	margin: 14px 18px 0;
	padding: 0 14px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-pill);
	background: var(--zz-bg);
	color: var(--zz-muted-3);
}
.zz-panel__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--zz-text);
}
.zz-panel__search input:not(:focus-visible) { outline: none; }

.zz-panel__tabs { display: flex; gap: 8px; flex: none; padding: 14px 18px 12px; }
.zz-panel__tab {
	flex: 1;
	padding: 10px 8px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-pill);
	background: var(--zz-surface);
	color: var(--zz-muted);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	transition: background var(--zz-t), color var(--zz-t), border-color var(--zz-t);
}
.zz-panel__tab.is-active { background: var(--zz-ink); border-color: var(--zz-ink); color: #fff; }

.zz-panel__pane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 18px; }
.zz-panel__pane.is-active { display: block; }
.zz-panel__empty { color: var(--zz-muted-3); font-size: 14px; }

/* Cascading card rows */
.zz-nlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zz-nlist--depth1 { gap: 6px; padding: 8px 0 4px 12px; }

.zz-ncard {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	overflow: hidden;
	transition: border-color var(--zz-t), box-shadow var(--zz-t);
}
.zz-ncard:hover { border-color: var(--zz-line-3); box-shadow: 0 2px 10px rgba(29,33,40,.06); }
.zz-nitem.is-current > .zz-ncard,
.zz-nitem.is-open > .zz-ncard { border-color: var(--zz-gold); }

.zz-ncard__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	color: var(--zz-ink);
}
.zz-ncard--plain .zz-ncard__main { padding: 14px 16px; }

.zz-ncard__thumb {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	border: 1px solid var(--zz-line);
	border-radius: 50%;
	background: var(--zz-bg);
	overflow: hidden;
}
.zz-ncard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zz-ncard__initial { font-size: 16px; font-weight: 800; color: var(--zz-muted-3); }

.zz-ncard__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zz-ncard__name {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--zz-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.zz-ncard__meta { font-size: 11.5px; color: var(--zz-muted-3); }

.zz-ncard__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	flex: none;
	border: 0;
	border-left: 1px solid var(--zz-line);
	background: var(--zz-bg);
	color: var(--zz-muted);
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-ncard__toggle:hover { background: var(--zz-gold-soft); color: var(--zz-gold-darker); }
.zz-ncard__toggle svg { transition: transform var(--zz-t); }
.zz-nitem.is-open > .zz-ncard .zz-ncard__toggle svg { transform: rotate(180deg); }

.zz-panel__foot {
	flex: none;
	padding: 14px 18px;
	border-top: 1px solid var(--zz-line);
	background: var(--zz-bg);
}
.zz-panel__foot a { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--zz-ink); }
.zz-panel__foot a:hover { color: var(--zz-gold-deep); }

/*
 * Phones: keep a good slice of the page visible behind the drawer so it reads
 * as an overlay rather than a new screen. Everything inside scales down to
 * suit the narrower column, and category names wrap onto two lines instead of
 * truncating, since there is less width to play with.
 */
@media (max-width: 640px) {
	.zz-panel__body { width: 300px; max-width: 62vw; }

	.zz-panel__head { padding: 13px 14px; gap: 9px; }
	.zz-panel__back { width: 31px; height: 31px; }
	.zz-panel__heading { font-size: 15.5px; }

	.zz-panel__search { height: 38px; margin: 11px 14px 0; padding: 0 12px; gap: 7px; }
	.zz-panel__search input { font-size: 13px; }

	.zz-panel__tabs { padding: 11px 14px 9px; gap: 6px; }
	.zz-panel__tab { padding: 8px 4px; font-size: 12px; }

	.zz-panel__pane { padding: 0 14px 14px; }

	.zz-nlist { gap: 7px; }
	.zz-nlist--depth1 { padding-left: 9px; gap: 5px; }

	.zz-ncard__main { gap: 9px; padding: 8px 9px; }
	.zz-ncard--plain .zz-ncard__main { padding: 11px 12px; }

	.zz-ncard__thumb { width: 34px; height: 34px; }
	.zz-ncard__initial { font-size: 13px; }

	.zz-ncard__name {
		font-size: 12.5px;
		line-height: 1.25;
		white-space: normal;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.zz-ncard__meta { font-size: 10.5px; }

	.zz-ncard__toggle { width: 34px; }

	/* Clear the phone's gesture bar / browser chrome at the very bottom. */
	.zz-panel__foot { padding: 11px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
	.zz-panel__foot a { font-size: 13.5px; gap: 7px; }
}

/* Same breathing room at the foot of the drawer on larger screens. */
.zz-panel__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* -------------------------------------------------------------------------
   Shop toolbar on mobile: Filters, result count and sorting on ONE row.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.zz-toolbar {
		flex-wrap: nowrap;
		gap: 8px;
		align-items: center;
		padding-bottom: 14px;
		margin-bottom: 18px;
	}
	.zz-filter-toggle {
		flex: none;
		padding: 8px 14px;
		font-size: 12.5px;
	}
	.woocommerce .zz-toolbar .woocommerce-result-count {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 11.5px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.woocommerce .zz-toolbar .woocommerce-ordering { flex: none; min-width: 0; }
	.woocommerce .zz-toolbar select {
		max-width: 42vw;
		padding: 8px 10px;
		font-size: 12.5px;
	}
}

@media (max-width: 460px) {
	/* Below this the count cannot fit legibly alongside both controls. */
	.woocommerce .zz-toolbar .woocommerce-result-count { display: none; }
	.woocommerce .zz-toolbar select { max-width: none; }
	.zz-toolbar { justify-content: space-between; }
}

body.zz-panel-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.zz-hero-wrap {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	padding-top: 28px;
}

.zz-hero {
	position: relative;
	min-height: 380px;
	border-radius: var(--zz-r-lg);
	background: var(--zz-hero-bg);
	overflow: hidden;
}

.zz-hero__slide {
	display: none;
	grid-template-columns: 1.05fr 1fr;
	gap: 32px;
	align-items: center;
	min-height: 380px;
	padding: 48px 52px;
}
.zz-hero__slide.is-active { display: grid; animation: zz-fade .35s ease; }

.zz-hero__kicker {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--zz-gold-dark);
}
.zz-hero__title {
	margin: 0 0 18px;
	font-size: 44px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--zz-ink-800);
	text-wrap: pretty;
}
.zz-hero__text {
	margin: 0 0 26px;
	max-width: 420px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--zz-muted);
}

.zz-hero__media {
	align-self: stretch;
	min-height: 280px;
	border-radius: 12px;
	overflow: hidden;
}
.zz-hero__img { width: 100%; height: 100%; object-fit: cover; }

.zz-hero__dots {
	position: absolute;
	bottom: 20px; left: 52px;
	display: flex;
	gap: 8px;
}
.zz-hero__dot {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c2c5cb;
	transition: background var(--zz-t);
}
.zz-hero__dot.is-active { background: var(--zz-ink); }

/* Promo cards */
.zz-promos { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }

.zz-promo {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 14px;
	align-items: center;
	padding: 24px;
	border-radius: var(--zz-r-lg);
	overflow: hidden;
}

.zz-promo--1 { background: var(--zz-gold-soft); }
.zz-promo--1 .zz-promo__kicker { font-size: 14px; font-weight: 600; color: var(--zz-gold-darker); }
.zz-promo--1 .zz-promo__title { margin: 2px 0 6px; font-size: 21px; font-weight: 800; color: var(--zz-ink-800); line-height: 1.2; }
.zz-promo--1 .zz-promo__text { margin-bottom: 14px; font-size: 13px; color: #6b5a2b; }

.zz-promo--2 {
	grid-template-columns: 1fr;
	align-content: space-between;
	position: relative;
	background: linear-gradient(150deg, #131519 25%, #2b3038 70%, var(--zz-gold-darker) 160%);
}
.zz-promo--2 .zz-promo__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 58%; }
.zz-promo--2 .zz-promo__title { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .5px; line-height: 1.2; }
.zz-promo--2 .zz-promo__text { margin: 0 0 14px; font-size: 13.5px; color: var(--zz-on-dark-2); }
.zz-promo--2 .zz-promo__text strong,
.zz-promo--2 .zz-promo__text b { color: var(--zz-gold); font-weight: 700; }
.zz-promo--2 .zz-promo__media {
	position: absolute;
	right: 20px; top: 52px; bottom: 60px;
	width: 150px;
	border-radius: var(--zz-r);
	overflow: hidden;
}

.zz-promo__media { align-self: stretch; border-radius: var(--zz-r); overflow: hidden; }
.zz-promo__img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholders */
.zz-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	min-height: 100px;
	background: repeating-linear-gradient(45deg, var(--zz-ph) 0 12px, var(--zz-ph-2) 12px 24px);
}
.zz-ph__label {
	padding: 3px 9px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .75);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 10px;
	color: var(--zz-muted-3);
	text-align: center;
}
.zz-ph--hero { background: repeating-linear-gradient(45deg, var(--zz-line-3) 0 14px, #d8dade 14px 28px); }
.zz-ph--promo { background: repeating-linear-gradient(45deg, var(--zz-gold-soft-2) 0 12px, #fddf95 12px 24px); }
.zz-ph--promo .zz-ph__label { color: var(--zz-gold-darker); }
.zz-ph--dark { background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 14px, rgba(255,255,255,.05) 14px 28px); }
.zz-ph--dark .zz-ph__label { background: rgba(0,0,0,.25); color: #d7dade; }

.zz-promo--2 .zz-ph { background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 12px, rgba(255,255,255,.07) 12px 24px); }
.zz-promo--2 .zz-ph__label { background: rgba(0,0,0,.2); color: var(--zz-line-2); }

/* -------------------------------------------------------------------------
   9. Category marquee
   ------------------------------------------------------------------------- */
.zz-marquee-wrap { padding-top: 34px; }

/*
 * Real scroll container rather than a CSS transform animation: a transform
 * cannot be grabbed and dragged, so the strip looked interactive but wasn't.
 * initMarquee() in main.js drives scrollLeft and yields to the user on touch.
 */
.zz-marquee {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.zz-marquee::-webkit-scrollbar { display: none; }
.zz-marquee.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.zz-marquee.is-dragging .zz-cat { pointer-events: none; }

.zz-marquee__track {
	display: flex;
	width: max-content;
}

.zz-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 158px;
	flex: none;
}
.zz-cat__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 118px; height: 118px;
	border: 1px solid var(--zz-line-3);
	border-radius: 50%;
	background: repeating-linear-gradient(45deg, #ededee 0 12px, #e4e5e7 12px 24px);
	overflow: hidden;
	transition: transform var(--zz-t), border-color var(--zz-t);
}
.zz-cat:hover .zz-cat__circle { transform: translateY(-4px); border-color: var(--zz-gold); }
.zz-cat__circle img { width: 100%; height: 100%; object-fit: cover; }
.zz-cat__ph { font-size: 26px; font-weight: 800; color: var(--zz-muted-3); }
.zz-cat__name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--zz-text);
	text-align: center;
}

.zz-marquee__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	padding: 24px 0 2px;
}
.zz-marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zz-on-dark-2); }
.zz-marquee__dot.is-active { background: var(--zz-ink); }

/* -------------------------------------------------------------------------
   10. Section headings
   ------------------------------------------------------------------------- */
.zz-section { padding-top: 46px; }

.zz-sec-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
}
.zz-sec-head--center {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.zz-sec-head--center .zz-sec-title { text-align: center; }
.zz-sec-head--center .zz-viewall { justify-self: end; }

.zz-sec-title {
	margin: 0;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--zz-text);
}

.zz-sec-head__extra { display: flex; align-items: center; }

.zz-viewall {
	margin-left: auto;
	padding: 10px 24px;
	border-radius: var(--zz-pill);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-viewall--gold { background: var(--zz-gold); color: var(--zz-ink); padding: 11px 26px; }
.zz-viewall--gold:hover { background: var(--zz-ink); color: #fff; }
.zz-viewall--red { background: var(--zz-red); color: #fff; }
.zz-viewall--red:hover { background: var(--zz-ink); color: #fff; }
.zz-viewall--soft { background: var(--zz-gold-soft); color: var(--zz-gold-darker); border-radius: 8px; }
.zz-viewall--soft:hover { background: var(--zz-gold); color: var(--zz-ink); }

/* Carousel arrows — mobile only; the desktop grids do not scroll. */
.zz-rail-nav { display: none; }

@media (max-width: 900px) {
	.zz-rail-nav {
		display: flex;
		gap: 6px;
		flex: none;
		margin-left: auto;
	}
	.zz-rail-nav[hidden] { display: none; }

	.zz-rail-btn {
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 1px solid var(--zz-line-2);
		border-radius: 50%;
		background: var(--zz-surface);
		color: var(--zz-ink);
		transition: background var(--zz-t), color var(--zz-t), opacity var(--zz-t);
	}
	.zz-rail-btn:disabled { opacity: .32; cursor: default; }
	.zz-rail-btn:not(:disabled):hover,
	.zz-rail-btn:not(:disabled):active {
		background: var(--zz-gold);
		border-color: var(--zz-gold);
		color: var(--zz-ink);
	}

	/* With arrows present the View All pill moves next to them. */
	.zz-sec-head { flex-wrap: nowrap; gap: 8px; }
	.zz-sec-head .zz-viewall { margin-left: auto; }
	.zz-sec-head .zz-viewall + .zz-rail-nav { margin-left: 8px; }
}

/* Countdown */
.zz-countdown {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--zz-muted-2);
}
.zz-countdown__unit {
	padding: 4px 8px;
	border-radius: 5px;
	background: var(--zz-ink);
	color: var(--zz-gold);
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.zz-countdown__sep { font-weight: 700; color: var(--zz-ink); }

/* -------------------------------------------------------------------------
   11. Product grid + card
   ------------------------------------------------------------------------- */
.zz-grid,
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * These must out-specify `.woocommerce ul.products` (0,2,1) above, which is
 * where the default 4-column track list lives.
 */
.woocommerce ul.products.zz-grid--5,
ul.products.zz-grid--5,
.zz-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.woocommerce ul.products.zz-grid--7,
ul.products.zz-grid--7,
.zz-grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }

/*
 * Related/up-sell blocks request 5 columns. Scoped to desktop rather than given
 * higher specificity, so the responsive step-downs below still win.
 */
@media (min-width: 1201px) {
	.woocommerce ul.products.columns-5,
	ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Must outrank the !important grid display above so [hidden] still hides. */
[hidden] { display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product,
.zz-card {
	width: auto !important;
	margin: 0 !important;
	padding: 14px;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	transition: box-shadow var(--zz-t);
}
.zz-card:hover { box-shadow: var(--zz-shadow-card); }
/*
 * WooCommerce adds clearfix ::before/::after to ul.products for its float
 * layout. Inside a grid container those pseudo-elements become real grid items
 * and take the first cell, shifting row one across by a column. Only shows on
 * pages carrying body.woocommerce, which is why the homepage looked fine.
 */
.zz-card::before,
.zz-card::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

.zz-card__media {
	position: relative;
	margin-bottom: 12px;
}
.zz-card__thumb {
	display: block;
	height: 160px;
	border-radius: 8px;
	background: repeating-linear-gradient(45deg, var(--zz-ph) 0 12px, var(--zz-ph-2) 12px 24px);
	overflow: hidden;
}
.zz-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.zz-card:hover .zz-card__img { transform: scale(1.06); }

.zz-card__badges {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}
.zz-badge {
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
}
.zz-badge--off { background: var(--zz-red); color: #fff; }
.zz-badge--new { background: var(--zz-gold); color: var(--zz-ink); }

/* Sale variant badge treatment */
.zz-card--gold .zz-badge--off {
	background: var(--zz-red-soft);
	color: var(--zz-red-deep);
	border-radius: var(--zz-pill);
	padding: 4px 11px;
	font-size: 11px;
	letter-spacing: .5px;
}
.zz-card--flash .zz-badge--off { background: var(--zz-gold); color: var(--zz-ink); font-size: 11px; padding: 3px 8px; }

.zz-wish {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid var(--zz-line-2);
	border-radius: 50%;
	background: #fff;
	color: var(--zz-ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	transition: background var(--zz-t), border-color var(--zz-t), color var(--zz-t);
}
.zz-wish:hover,
.zz-wish.is-active { background: var(--zz-gold); border-color: var(--zz-gold); }
.zz-wish.is-active svg { fill: var(--zz-ink); }

/*
 * Out of stock: fade the photo back only. The disabled "Out Of Stock" button
 * carries the message — an overlay label as well was saying it twice.
 */
.zz-card.outofstock .zz-card__img { opacity: .5; filter: grayscale(.5); }

.zz-card__body { display: flex; flex-direction: column; flex: 1; }

.zz-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0;
	min-height: 58px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--zz-text-2);
}
.zz-card__title:hover { color: var(--zz-gold-deep); }

.zz-card__rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; }
.zz-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 2px; line-height: 1; }
.zz-stars__off { color: #dcdfe4; }
.zz-stars__on {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #e8a53a;
}
.zz-card__reviews { font-size: 11.5px; color: var(--zz-muted-4); }

/*
 * get_price_html() returns bare <del>/<ins>/<span class="amount"> markup —
 * there is no .price wrapper here, so .zz-card__price is the flex container.
 */
.zz-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--zz-ink-800);
}
.zz-card__price del {
	order: 2;
	font-size: 13px;
	font-weight: 400;
	color: var(--zz-muted-4);
	text-decoration: line-through;
	opacity: 1;
}
.zz-card__price ins {
	order: 1;
	background: none;
	text-decoration: none;
	color: var(--zz-ink-800);
	font-weight: 800;
}
.zz-card__price .woocommerce-Price-amount { white-space: nowrap; }

/* On Sale variant: old price first */
.zz-card--gold .zz-card__price del { order: 1; }
.zz-card--gold .zz-card__price ins { order: 2; }

.zz-card__cta { margin-top: auto; }

.zz-card__btn {
	display: block;
	width: 100%;
	padding: 11px 8px;
	border-radius: var(--zz-pill);
	background: var(--zz-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-card__btn:hover { background: var(--zz-gold); color: var(--zz-ink); }
.zz-card__btn--disabled { background: var(--zz-muted-3); cursor: not-allowed; }
.zz-card__btn--disabled:hover { background: var(--zz-muted-3); color: #fff; }

.zz-card__btn.loading { opacity: .7; pointer-events: none; }

/*
 * WooCommerce injects "View cart" after a successful AJAX add. Left unstyled it
 * lands as a raw blue link under the button; present it as a quiet second action.
 */
.zz-card .added_to_cart,
.zz-card__cta .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	padding: 9px 8px;
	border-radius: var(--zz-pill);
	background: var(--zz-gold-soft);
	color: var(--zz-gold-darker);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-card .added_to_cart::after {
	content: "→";
	font-weight: 700;
}
.zz-card .added_to_cart:hover {
	background: var(--zz-gold);
	color: var(--zz-ink);
}

.zz-card--gold .added_to_cart,
.zz-card--flash .added_to_cart { border-radius: var(--zz-r-sm); }
.zz-card--flash .added_to_cart { margin-top: 6px; padding: 7px 6px; font-size: 11.5px; }

/* Same treatment on the single product page. */
.woocommerce div.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 12px;
	font-weight: 700;
	color: var(--zz-gold-deep);
}

/* Gold variant (On Sale) */
.zz-card--gold .zz-card__btn {
	border-radius: var(--zz-r-sm);
	background: var(--zz-gold);
	color: var(--zz-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.zz-card--gold .zz-card__btn:hover { background: var(--zz-ink); color: #fff; }

/* Flash variant — deliberately denser than the 5-up sections. */
.zz-card--flash { padding: 10px; border-radius: var(--zz-r-sm); }
.zz-card--flash .zz-card__thumb { height: 108px; border-radius: 6px; }
.zz-card--flash .zz-card__media { margin-bottom: 9px; }
.zz-card--flash .zz-wish { width: 26px; height: 26px; top: 7px; right: 7px; }
.zz-card--flash .zz-wish svg { width: 12px; height: 11px; }
.zz-card--flash .zz-card__badges { top: 8px; left: 8px; gap: 4px; }
.zz-card--flash .zz-badge { padding: 2px 7px; font-size: 10.5px; border-radius: 3px; }
.zz-card--flash .zz-card__title { -webkit-line-clamp: 2; min-height: 33px; font-size: 12px; line-height: 1.38; }
.zz-card--flash .zz-card__price {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 8px 0 10px;
	font-size: 15.5px;
	color: var(--zz-gold-dark);
}
.zz-card--flash .zz-card__price ins { color: var(--zz-gold-dark); }
.zz-card--flash .zz-card__price del { font-size: 11.5px; }
.zz-card--flash .zz-card__rating { margin: 4px 0 2px; }
.zz-card--flash .zz-card__btn { border-radius: var(--zz-r-sm); padding: 9px 6px; font-size: 12.5px; }

/* -------------------------------------------------------------------------
   12. What's Hot
   ------------------------------------------------------------------------- */
.zz-hot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.zz-hot__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 380px;
	padding: 28px 24px 24px;
	border-radius: var(--zz-r-md);
	background: linear-gradient(170deg, var(--zz-ink-950) 0%, var(--zz-ink-700) 55%, var(--zz-gold-dark) 170%);
}
.zz-hot__brand { font-size: 12.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--zz-gold-dim); }
.zz-hot__title { margin: 10px 0 20px; font-size: 22px; font-weight: 800; line-height: 1.2; color: #fff; }
.zz-hot__media {
	flex: 1;
	width: 100%;
	min-height: 170px;
	margin-bottom: 22px;
	border-radius: var(--zz-r);
	overflow: hidden;
}
.zz-hot__img { width: 100%; height: 100%; object-fit: cover; }
.zz-hot__btn {
	padding: 10px 22px;
	border: 1.5px solid rgba(255, 255, 255, .6);
	border-radius: var(--zz-pill);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	transition: background var(--zz-t), color var(--zz-t), border-color var(--zz-t);
}
.zz-hot__btn:hover { background: var(--zz-gold); border-color: var(--zz-gold); color: var(--zz-ink); }

/* -------------------------------------------------------------------------
   13. SEO block
   ------------------------------------------------------------------------- */
.zz-seo-wrap { padding-top: 56px; }
.zz-seo {
	max-height: 330px;
	padding: 36px 42px;
	border: 1px solid var(--zz-line);
	border-radius: 12px;
	background: var(--zz-surface);
	overflow-y: auto;
}
.zz-seo h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.zz-seo h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 700; }
.zz-seo p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--zz-muted); }
.zz-seo ul { margin: 0 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.9; color: var(--zz-muted); }
.zz-seo strong { color: var(--zz-text); }

/* -------------------------------------------------------------------------
   14. Trust strip + footer
   ------------------------------------------------------------------------- */
.zz-trust { margin-top: 56px; background: var(--zz-ink-900); }
.zz-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: 30px;
}
.zz-trust__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-inline: 28px;
	border-right: 1px solid var(--zz-line-dark);
	color: var(--zz-gold);
}
.zz-trust__item:first-child { padding-left: 0; }
.zz-trust__item:last-child { border-right: 0; padding-right: 0; }
.zz-trust__item svg { flex: none; }
.zz-trust__title { font-size: 16.5px; font-weight: 700; color: #fff; }
.zz-trust__text { margin-top: 3px; font-size: 13.5px; color: var(--zz-muted-4); }

.zz-footer { background: var(--zz-ink); color: var(--zz-muted-4); }
.zz-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 52px 24px 40px;
}
.zz-footer__heading { font-size: 21px; font-weight: 800; color: #fff; }
.zz-footer__phone {
	display: block;
	margin: 8px 0 18px;
	font-size: 23px;
	font-weight: 700;
	color: var(--zz-gold);
}
.zz-footer__hours { margin-bottom: 18px; font-size: 14.5px; color: var(--zz-muted-4); }
.zz-footer__emails { font-size: 14.5px; line-height: 1.9; color: var(--zz-on-dark-2); }
.zz-footer__emails strong { color: #fff; }
.zz-footer__emails a { color: var(--zz-on-dark-2); }
.zz-footer__emails a:hover { color: var(--zz-gold); }

.zz-footer__follow { margin: 24px 0 12px; font-size: 17px; font-weight: 800; color: #fff; }
.zz-footer__socials { display: flex; gap: 10px; }
.zz-footer__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--zz-line-dark);
	color: var(--zz-on-dark);
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-footer__socials a:hover { background: var(--zz-gold); color: var(--zz-ink); }

.zz-footer__title { margin-bottom: 18px; font-size: 18px; font-weight: 800; color: #fff; }
.zz-footer__links {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}
.zz-footer__links a { color: var(--zz-muted-4); }
.zz-footer__links a:hover { color: var(--zz-gold); }
.zz-footer__hint a { color: var(--zz-muted-3); font-size: 13px; }

.zz-footer__bar { border-top: 1px solid var(--zz-line-dark); }
.zz-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 20px;
	font-size: 14px;
	color: var(--zz-muted-4);
}
.zz-footer__slogan { font-weight: 600; color: #fff; }
.zz-footer__slogan span { color: var(--zz-gold); }

/* -------------------------------------------------------------------------
   Mobile tab bar — app-style sticky bottom navigation. Mobile only.
   ------------------------------------------------------------------------- */
.zz-tabbar { display: none; }

@media (max-width: 900px) {
	.zz-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: stretch;
		background: var(--zz-surface);
		border-top: 1px solid var(--zz-line);
		box-shadow: 0 -4px 20px rgba(20, 22, 26, .1);
		/*
		 * Plain padding, NOT a ::after strip — with grid-auto-flow: column a
		 * pseudo-element becomes an extra column, which shunted the five tabs
		 * across and clipped Account off the right edge.
		 */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.zz-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		padding: 9px 2px 8px;
		border: 0;
		background: none;
		color: var(--zz-muted-2);
		font-family: inherit;
		text-decoration: none;
		transition: color var(--zz-t);
	}
	.zz-tabbar__item.is-active { color: var(--zz-gold-deep); }

	.zz-tabbar__icon { position: relative; display: flex; }

	.zz-tabbar__label {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .01em;
		line-height: 1;
	}

	/* Active tab gets a gold cap, echoing the desktop nav's underline. */
	.zz-tabbar__item.is-active::before {
		content: "";
		position: absolute;
		top: 0;
		width: 30px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: var(--zz-gold);
	}
	.zz-tabbar__item { position: relative; }

	.zz-tabbar .zz-count {
		top: -7px;
		right: -10px;
		background: var(--zz-hot, var(--zz-red));
		color: #fff;
	}
	.zz-tabbar .zz-count--cart { background: var(--zz-gold); color: var(--zz-ink); }

	/* Everything that floats clears the bar AND the device's safe-area inset. */
	.zz-site { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
	.zz-totop { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
}

/* Back to top — stacked above the floating WhatsApp button */
.zz-totop {
	position: fixed;
	right: 22px; bottom: 82px;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--zz-ink);
	color: var(--zz-gold);
	box-shadow: var(--zz-shadow-pop);
	transition: background var(--zz-t), color var(--zz-t);
}
.zz-totop:hover { background: var(--zz-gold); color: var(--zz-ink); }
.zz-totop[hidden] { display: none; }

/* -------------------------------------------------------------------------
   15. Shop / archive layout
   ------------------------------------------------------------------------- */
.zz-pagehead {
	padding-block: 34px 26px;
	background: var(--zz-surface);
	border-bottom: 1px solid var(--zz-line);
}
.zz-pagehead__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.zz-pagehead__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.zz-pagehead__count {
	font-size: 14px;
	font-weight: 600;
	color: var(--zz-muted-3);
}
.zz-pagehead__desc { margin-top: 8px; max-width: 70ch; color: var(--zz-muted); font-size: 14.5px; }
.zz-pagehead__meta { margin-top: 6px; color: var(--zz-muted-3); font-size: 13.5px; }

.zz-crumbs { padding-block: 18px 0; }

.zz-breadcrumb {
	margin: 0 0 10px !important;
	font-size: 13px;
	color: var(--zz-muted-3);
}
.zz-breadcrumb a { color: var(--zz-muted-3); }
.zz-breadcrumb a:hover { color: var(--zz-gold-deep); }
.zz-crumb-sep { margin: 0 8px; color: var(--zz-line-3); }

.zz-shop {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 40px;
	padding-block: 34px 60px;
	align-items: start;
}
.zz-shop--full { grid-template-columns: minmax(0, 1fr); }

/*
 * <main> is emitted before <aside> in the markup. Both the column AND the row
 * must be pinned: sparse auto-placement never moves an item backwards, so
 * column-only placement would drop the sidebar onto a second row.
 */
.zz-shop__main { grid-column: 2; grid-row: 1; min-width: 0; }
.zz-shop__side { grid-column: 1; grid-row: 1; min-width: 0; }

.zz-shop--full .zz-shop__main { grid-column: 1; }
.zz-shop__side .widget {
	padding: 20px;
	margin-bottom: 18px;
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
}
/*
 * A long category list is the single tallest thing in the sidebar. Cap it and
 * let it scroll rather than letting it set the height of the whole column.
 */
.zz-shop__side .widget_product_categories > ul,
.zz-shop__side .widget_categories > ul {
	max-height: 268px;
	overflow-y: auto;
	padding-right: 6px;
}
.zz-shop__side .widget_product_categories > ul::-webkit-scrollbar { width: 5px; }
.zz-shop__side .widget_product_categories > ul::-webkit-scrollbar-thumb {
	background: var(--zz-line-3);
	border-radius: 3px;
}

/*
 * Thin listings: keep only the tools that help on this page. The discovery
 * widgets would otherwise tower over a one- or two-product grid.
 */
.zz-thin-listing .zz-shop__side .widget_zz_promo,
.zz-thin-listing .zz-shop__side .widget_products,
.zz-thin-listing .zz-shop__side .widget_recently_viewed_products {
	display: none;
}

/*
 * Long listings: the filter column travels with the shopper.
 *
 * No max-height and no overflow here — an inner scrollbar on the whole column
 * reads as a second page scrollbar. initStickySidebar() in main.js translates
 * the column with scroll direction instead, so scrolling down reveals its foot
 * and scrolling back up brings the price filter into view.
 */
@media (min-width: 1025px) {
	.zz-shop__side--filters {
		align-self: start;
		will-change: transform;
	}
	/* Fallback when JS is unavailable. */
	.no-zz-js .zz-shop__side--filters {
		position: sticky;
		top: 20px;
	}
}

/*
 * With auto-apply wired up the submit button is redundant. Hidden only once JS
 * has confirmed itself, so a no-JS visitor keeps a working button.
 */
.zz-js .widget_price_filter .price_slider_amount .button { display: none; }
.zz-js .widget_price_filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 4px;
}
.widget_price_filter .price_slider_amount .price_label {
	font-size: 13px;
	color: var(--zz-muted);
}
.widget_price_filter .price_slider_amount .price_label span {
	font-weight: 800;
	color: var(--zz-ink);
}
.zz-price-busy { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.zz-shop__side .widget-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zz-ink);
}
.zz-shop__side ul { margin: 0; padding: 0; list-style: none; }
.zz-shop__side li { padding: 6px 0; font-size: 14px; }
.zz-shop__side a { color: var(--zz-muted); }
.zz-shop__side a:hover { color: var(--zz-gold-deep); }

.zz-filter-close, .zz-filter-toggle { display: none; }

/* Sidebar: store promises */
.zz-promise { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.zz-promise li { display: flex; align-items: flex-start; gap: 12px; }
.zz-promise svg { flex: none; margin-top: 2px; color: var(--zz-gold-deep); }
.zz-promise li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zz-promise strong { font-size: 13.5px; font-weight: 700; color: var(--zz-ink); }
.zz-promise li > span > span { font-size: 12.5px; color: var(--zz-muted-3); line-height: 1.4; }

/* Sidebar: contact card */
.zz-help__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--zz-ink);
	letter-spacing: -.2px;
}
.zz-help__phone:hover { color: var(--zz-gold-deep); }
.zz-help__hours { margin: 6px 0 14px; font-size: 12.5px; color: var(--zz-muted-3); }
.zz-help__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zz-help__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: var(--zz-pill);
	background: var(--zz-bg);
	border: 1px solid var(--zz-line-2);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--zz-text-2);
	transition: background var(--zz-t), color var(--zz-t), border-color var(--zz-t);
}
.zz-help__btn:hover { background: var(--zz-ink); border-color: var(--zz-ink); color: #fff; }
.zz-help__btn--wa:hover { background: #25d366; border-color: #25d366; color: #fff; }

/* Sidebar: promo card */
.zz-promocard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: -4px -4px 0;
	padding: 20px 18px;
	border-radius: var(--zz-r);
}
.zz-promocard--gold { background: var(--zz-gold-soft); }
.zz-promocard--dark {
	background: linear-gradient(150deg, var(--zz-ink-950) 20%, var(--zz-ink-700) 75%, var(--zz-gold-darker) 165%);
}
.zz-promocard__media {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	border-radius: var(--zz-r-sm);
	overflow: hidden;
}
.zz-promocard__media img { width: 100%; height: auto; display: block; }
.zz-promocard__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.zz-promocard__head { font-size: 17px; font-weight: 800; line-height: 1.25; }
.zz-promocard__text { font-size: 13px; line-height: 1.5; }
.zz-promocard__btn {
	margin-top: 10px;
	padding: 10px 20px;
	border-radius: var(--zz-pill);
	font-size: 13px;
	font-weight: 700;
	transition: background var(--zz-t), color var(--zz-t);
}

.zz-promocard--gold .zz-promocard__kicker { color: var(--zz-gold-darker); }
.zz-promocard--gold .zz-promocard__head { color: var(--zz-ink-800); }
.zz-promocard--gold .zz-promocard__text { color: #6b5a2b; }
.zz-promocard--gold .zz-promocard__btn { background: var(--zz-ink); color: #fff; }
.zz-promocard--gold .zz-promocard__btn:hover { background: var(--zz-gold); color: var(--zz-ink); }

.zz-promocard--dark .zz-promocard__kicker { color: var(--zz-gold-dim); }
.zz-promocard--dark .zz-promocard__head { color: #fff; }
.zz-promocard--dark .zz-promocard__text { color: var(--zz-on-dark-2); }
.zz-promocard--dark .zz-promocard__btn { background: var(--zz-gold); color: var(--zz-ink); }
.zz-promocard--dark .zz-promocard__btn:hover { background: #fff; }

/*
 * Sidebar product lists (Best sellers, Recently viewed).
 * Markup comes from woocommerce/content-widget-product.php: image-forward,
 * with the name kept to two tight lines.
 */
.product_list_widget { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.product_list_widget li { margin: 0; padding: 0; }

/*
 * WooCommerce core styles these lists for its own 32px-thumb layout with
 * `.woocommerce ul.product_list_widget li a { display:block }` and
 * `... li img { float:right; width:32px }`. Both need out-specifying.
 */
.product_list_widget li a.zz-mini,
.woocommerce ul.product_list_widget li a.zz-mini {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.zz-mini__thumb,
.woocommerce ul.product_list_widget li a.zz-mini .zz-mini__thumb {
	display: block;
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: var(--zz-r-sm);
	overflow: hidden;
	background: var(--zz-ph);
	border: 1px solid var(--zz-line);
}
.zz-mini__thumb img,
.woocommerce ul.product_list_widget li a.zz-mini .zz-mini__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	float: none;
	margin: 0;
	border-radius: 0;
	transition: transform .4s ease;
}
.zz-mini:hover .zz-mini__thumb img { transform: scale(1.07); }

.zz-mini__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.zz-mini__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--zz-text-2);
}
.zz-mini:hover .zz-mini__title { color: var(--zz-gold-deep); }

.zz-mini__rating { line-height: 1; }
.zz-mini__rating .zz-stars { font-size: 11px; letter-spacing: 1px; }

.zz-mini__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--zz-ink-800);
	line-height: 1.3;
}
.zz-mini__price del {
	order: 2;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--zz-muted-4);
	opacity: 1;
}
.zz-mini__price ins { order: 1; background: none; text-decoration: none; }
.zz-mini__price .woocommerce-Price-amount { white-space: nowrap; }

.zz-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--zz-line);
}
.woocommerce .zz-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 14px;
	color: var(--zz-muted-3);
}
.woocommerce .zz-toolbar .woocommerce-ordering { margin: 0; }
.woocommerce .zz-toolbar select {
	padding: 10px 14px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	background: var(--zz-surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--zz-text);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination,
.pagination { margin-top: 40px; }
.woocommerce nav.woocommerce-pagination ul,
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	border: 0;
	margin: 0;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px; height: 42px;
	padding: 0 14px;
	border-radius: var(--zz-r-sm);
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	color: var(--zz-text);
	font-size: 14px;
	font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.pagination .page-numbers.current {
	background: var(--zz-ink);
	border-color: var(--zz-ink);
	color: var(--zz-gold);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.pagination a.page-numbers:hover { background: var(--zz-gold); border-color: var(--zz-gold); color: var(--zz-ink); }

/* -------------------------------------------------------------------------
   16. Single product
   ------------------------------------------------------------------------- */
.woocommerce div.product { padding-block: 10px 20px; }
.woocommerce div.product div.images { width: 46%; }
.woocommerce div.product div.summary { width: 50%; margin-bottom: 40px; }

.woocommerce div.product div.images img { border-radius: 12px; }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 12px; gap: 10px; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 84px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: 8px; border: 1px solid var(--zz-line); }

.woocommerce div.product .product_title {
	margin-bottom: 12px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.5px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 30px;
	font-weight: 800;
	color: var(--zz-ink-800);
}
.woocommerce div.product p.price del { font-size: 19px; font-weight: 400; color: var(--zz-muted-4); opacity: 1; }
.woocommerce div.product p.price ins { background: none; text-decoration: none; color: var(--zz-ink-800); }

.woocommerce div.product .woocommerce-product-rating { margin-bottom: 16px; }
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: #e8a53a; }

.woocommerce div.product .woocommerce-product-details__short-description {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--zz-line);
	color: var(--zz-muted);
	font-size: 14.5px;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-block: 22px;
}
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 0; }
.woocommerce div.product form.cart .variations td { padding: 6px 0; }
.woocommerce div.product form.cart .variations select {
	padding: 12px 14px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	font-family: inherit;
	min-width: 200px;
}
.woocommerce div.product form.cart .button { flex: 1; min-width: 210px; }

.woocommerce .quantity .qty {
	width: 88px;
	height: 48px;
	padding: 0 8px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.zz-single-actions { display: flex; gap: 18px; margin: 4px 0 18px; }
.zz-act {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--zz-muted);
	font-size: 13.5px;
	font-weight: 600;
}
.zz-act:hover { color: var(--zz-gold-deep); }
.zz-act.is-active { color: var(--zz-gold-deep); }
.zz-act.is-active svg { fill: currentColor; }

.zz-single-trust {
	display: grid;
	gap: 12px;
	margin: 22px 0 0;
	padding: 20px 22px;
	list-style: none;
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
}
.zz-single-trust li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--zz-text);
}
.zz-single-trust svg { flex: none; color: var(--zz-gold-deep); }

.product_meta {
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid var(--zz-line);
	font-size: 13.5px;
	color: var(--zz-muted-3);
}
.product_meta > span { display: block; margin-bottom: 5px; }
.product_meta a { color: var(--zz-muted); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 26px;
	border-bottom: 2px solid var(--zz-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 22px;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	color: var(--zz-muted-3);
	font-weight: 700;
	font-size: 14.5px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--zz-ink);
	border-bottom-color: var(--zz-gold);
}
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 20px; }

.related.products, .upsells.products {
	padding-top: 44px;
	margin-top: 36px;
	border-top: 1px solid var(--zz-line);
	clear: both;
}
.related.products > h2, .upsells.products > h2 {
	margin-bottom: 22px;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.5px;
}

/* -------------------------------------------------------------------------
   17. Cart, checkout, account
   ------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--zz-surface);
}
.woocommerce table.shop_table th {
	padding: 16px 18px;
	background: var(--zz-bg);
	color: var(--zz-ink);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.woocommerce table.shop_table td { padding: 18px; border-top: 1px solid var(--zz-line); }
.woocommerce table.shop_table img { width: 70px; border-radius: 8px; }
.woocommerce table.shop_table .product-name a { font-weight: 600; }

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--zz-bg);
	color: var(--zz-muted-3) !important;
	font-size: 16px;
	line-height: 1;
}
.woocommerce a.remove:hover { background: var(--zz-red); color: #fff !important; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	padding: 26px 28px;
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
}
.woocommerce-cart .cart_totals h2 { font-size: 19px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; }

.woocommerce .cart .actions .coupon { display: flex; gap: 10px; }
.woocommerce .cart .actions .coupon input.input-text {
	width: auto;
	min-width: 200px;
	padding: 12px 16px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	background: var(--zz-surface);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--zz-text);
	height: auto;
	line-height: 1.4;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13.5px; color: var(--zz-text); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--zz-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 8px; }

/*
 * Cart, checkout, account, wishlist and compare all render through page.php,
 * which applies an article reading measure. These are app screens, not prose —
 * release the constraint so they use the full column.
 */
.woocommerce-cart .zz-entry__content,
.woocommerce-checkout .zz-entry__content,
.woocommerce-account .zz-entry__content,
.zz-entry__content:has(.zz-listpage),
.zz-entry__content:has(.zz-page) {
	max-width: none;
}

.woocommerce-checkout h3 {
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--zz-line);
	font-size: 19px;
}

/* Two-column checkout: details left, order summary sticky on the right. */
@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}
	.woocommerce-checkout form.checkout > * { grid-column: 1; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 20px;
	}
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; }

#order_review,
.woocommerce-checkout #order_review {
	padding: 26px 28px;
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 16px;
	margin: 0;
	border-bottom: 1px solid var(--zz-line);
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 10px; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--zz-gold-soft);
	color: var(--zz-gold-darker);
	border-radius: var(--zz-r-sm);
	font-size: 13.5px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--zz-gold-soft); }
.woocommerce-checkout #payment div.form-row { padding: 18px 0 0; }
.woocommerce #payment #place_order { width: 100%; }

/* Account — WooCommerce renders nav + content as siblings inside .woocommerce */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

.woocommerce-account:not(.logged-in) .woocommerce { max-width: 520px; margin-inline: auto; }

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 14px;
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--zz-r-sm);
	color: var(--zz-muted);
	font-weight: 600;
	font-size: 14.5px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--zz-ink);
	color: var(--zz-gold);
}
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .zz-shop { grid-template-columns: 260px minmax(0, 1fr); }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	padding: 15px 20px 15px 54px;
	margin: 0 0 22px;
	border: 0;
	border-radius: var(--zz-r-sm);
	background: var(--zz-gold-soft);
	color: var(--zz-gold-darker);
	font-size: 14.5px;
	font-weight: 500;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { top: 17px; left: 20px; }
.woocommerce-message { background: #e6f7ee; color: #14663f; }
.woocommerce-message::before { color: #17a05f; }
.woocommerce-error { background: var(--zz-red-soft); color: var(--zz-red-deep); }
.woocommerce-error::before { color: var(--zz-red); }
.woocommerce-message .button,
.woocommerce-error .button { padding: 9px 18px; font-size: 13px; }

.zz-empty {
	padding: 50px 20px;
	text-align: center;
}
.zz-empty h2 { font-size: 22px; }
.zz-empty p { color: var(--zz-muted); }
.zz-empty .zz-searchform { max-width: 420px; margin: 20px auto; }

.zz-notice {
	padding: 40px;
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	text-align: center;
}

/* Empty product listing */
.zz-noresults {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 24px 48px;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r-md);
	background: var(--zz-surface);
}
.zz-noresults__icon {
	display: grid;
	place-items: center;
	width: 82px;
	height: 82px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--zz-gold-soft);
	color: var(--zz-gold-deep);
}
.zz-noresults__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.4px;
}
.zz-noresults__text {
	max-width: 46ch;
	margin: 0 0 22px;
	color: var(--zz-muted);
	font-size: 15px;
	line-height: 1.6;
}
.zz-noresults__search { width: 100%; max-width: 420px; margin-bottom: 20px; }
.zz-noresults__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.zz-noresults__cats {
	width: 100%;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--zz-line);
}
.zz-noresults__catlabel {
	display: block;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zz-muted-3);
}
.zz-noresults__catlist {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.zz-noresults__catlist a {
	padding: 9px 18px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-pill);
	background: var(--zz-bg);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zz-text-2);
	transition: background var(--zz-t), border-color var(--zz-t), color var(--zz-t);
}
.zz-noresults__catlist a:hover {
	background: var(--zz-gold);
	border-color: var(--zz-gold);
	color: var(--zz-ink);
}

@media (max-width: 640px) {
	.zz-noresults { padding: 40px 18px 34px; }
	.zz-noresults__title { font-size: 20px; }
	.zz-noresults__icon { width: 68px; height: 68px; }
}

/* -------------------------------------------------------------------------
   18. Wishlist / compare pages
   ------------------------------------------------------------------------- */
.zz-listpage__loading { padding: 40px 0; color: var(--zz-muted-3); text-align: center; }
.zz-listpage__empty { padding: 60px 20px; text-align: center; color: var(--zz-muted); }
.zz-listpage__empty svg { color: var(--zz-line-3); margin-bottom: 12px; }
.zz-listpage__empty h2 { font-size: 22px; }
.zz-listpage__empty .zz-btn { margin-top: 14px; }

.zz-compare-scroll { overflow-x: auto; }
.zz-compare {
	width: 100%;
	min-width: 640px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	overflow: hidden;
}
.zz-compare th, .zz-compare td {
	padding: 16px;
	border-bottom: 1px solid var(--zz-line);
	border-right: 1px solid var(--zz-line);
	vertical-align: top;
	font-size: 14px;
	text-align: left;
}
.zz-compare th { position: relative; background: var(--zz-bg); }
.zz-compare tr:last-child td { border-bottom: 0; }
.zz-compare th:last-child, .zz-compare td:last-child { border-right: 0; }
.zz-compare__label { width: 150px; font-weight: 700; color: var(--zz-ink); background: var(--zz-bg); }
.zz-compare__thumb { display: block; margin-bottom: 10px; }
.zz-compare__thumb img { border-radius: 8px; }
.zz-compare__name { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.zz-compare__price { font-size: 17px; font-weight: 800; color: var(--zz-ink-800); }
.zz-compare__price del { font-size: 13px; font-weight: 400; color: var(--zz-muted-4); }
.zz-compare__price ins { background: none; text-decoration: none; }
.zz-compare__desc { color: var(--zz-muted); font-size: 13px; }
.zz-compare__remove {
	position: absolute;
	top: 8px; right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border: 1px solid var(--zz-line-2);
	border-radius: 50%;
	background: #fff;
	color: var(--zz-muted-3);
}
.zz-compare__remove:hover { background: var(--zz-red); border-color: var(--zz-red); color: #fff; }

/* -------------------------------------------------------------------------
   19. Blog
   ------------------------------------------------------------------------- */
.zz-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.zz-post {
	display: flex;
	flex-direction: column;
	background: var(--zz-surface);
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	overflow: hidden;
	transition: box-shadow var(--zz-t);
}
.zz-post:hover { box-shadow: var(--zz-shadow-card); }
.zz-post__thumb { display: block; aspect-ratio: 16 / 10; background: var(--zz-ph); }
.zz-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zz-post__body { padding: 20px; }
.zz-post__title { margin: 6px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.zz-post__excerpt { color: var(--zz-muted); font-size: 14px; }
.zz-post__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--zz-gold-deep); }
.zz-meta { font-size: 12.5px; color: var(--zz-muted-3); }

.zz-entry { background: var(--zz-surface); border: 1px solid var(--zz-line); border-radius: var(--zz-r); padding: 32px 36px; }
.zz-entry__thumb { margin-bottom: 24px; border-radius: var(--zz-r); overflow: hidden; }
.zz-entry__content { max-width: 78ch; color: var(--zz-muted); }
.zz-entry__content h2, .zz-entry__content h3 { color: var(--zz-text); margin-top: 1.6em; }
.zz-entry__content h2 { font-size: 22px; margin-top: 2em; }
.zz-entry__content h3 { font-size: 17px; }
.zz-entry__content ul { padding-left: 20px; line-height: 1.9; }

/* Opening paragraph on content pages */
.zz-entry__content .zz-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--zz-text-2);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--zz-line);
}
.zz-entry__content .zz-btn { display: inline-flex; margin-top: 10px; text-decoration: none; }
.zz-entry__content .zz-btn--gold { color: var(--zz-ink); }
.zz-entry__content .zz-btn--gold:hover { color: #fff; }
.zz-entry__content .zz-btn--dark { color: #fff; }
.zz-entry__content .zz-btn--dark:hover { color: var(--zz-ink); }

/* =========================================================================
   Content pages (About, Contact)
   ========================================================================= */
.zz-page { max-width: none; }
.zz-page > section + section { margin-top: 64px; }
.zz-page p { color: var(--zz-muted); }
.zz-page a { text-decoration: none; }

.zz-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zz-gold-deep);
}

/* Page hero */
.zz-phero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 44px;
	padding: 44px;
	border-radius: var(--zz-r-lg);
	background: var(--zz-hero-bg);
	overflow: hidden;
}
.zz-phero__kicker {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--zz-gold-dark);
}
.zz-phero__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.8px;
	color: var(--zz-ink-800);
}
.zz-phero__text { font-size: 16.5px; line-height: 1.6; margin-bottom: 22px; }
.zz-phero__media { border-radius: var(--zz-r-md); overflow: hidden; }
.zz-phero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stats strip */
.zz-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 40px;
	border-radius: var(--zz-r-md);
	background: var(--zz-line);
	overflow: hidden;
}
.zz-stats__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 20px;
	background: var(--zz-surface);
	text-align: center;
}
.zz-stats__item strong {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.6px;
	color: var(--zz-gold-deep);
	line-height: 1.1;
}
.zz-stats__item span { font-size: 13px; color: var(--zz-muted-3); }

/* Alternating image/text */
.zz-psplit {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	align-items: center;
	gap: 40px;
}
.zz-psplit--flip .zz-psplit__media { order: 2; }
.zz-psplit__media { border-radius: var(--zz-r-md); overflow: hidden; background: var(--zz-bg); }
.zz-psplit__media img { width: 100%; height: auto; display: block; }
.zz-psplit__copy h3 { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.zz-psplit__copy p { font-size: 15px; line-height: 1.7; }

/* Values grid */
.zz-pvalues__title,
.zz-pcats__title,
.zz-pfaq__title {
	margin: 0 0 22px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.4px;
}
.zz-pvalues__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.zz-pvalue {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 22px;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	background: var(--zz-surface);
}
.zz-pvalue__ico { color: var(--zz-gold-deep); }
.zz-pvalue strong { font-size: 15.5px; color: var(--zz-ink); }
.zz-pvalue > span:last-child { font-size: 13.5px; line-height: 1.55; color: var(--zz-muted); }

/* Category showcase */
.zz-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zz-catgrid__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	overflow: hidden;
	transition: box-shadow var(--zz-t), transform var(--zz-t);
}
.zz-catgrid__item:hover { transform: translateY(-3px); box-shadow: var(--zz-shadow-card); }
.zz-catgrid__media { display: block; aspect-ratio: 4 / 3; background: var(--zz-ph); overflow: hidden; }
.zz-catgrid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zz-catgrid__name { padding: 14px 16px 2px; font-size: 14.5px; font-weight: 700; color: var(--zz-ink); }
.zz-catgrid__count { padding: 0 16px 16px; font-size: 12.5px; color: var(--zz-muted-3); }

/* Closing CTA */
.zz-pcta {
	padding: 44px;
	border-radius: var(--zz-r-lg);
	background: linear-gradient(150deg, var(--zz-ink-950) 20%, var(--zz-ink-700) 75%, var(--zz-gold-darker) 175%);
	text-align: center;
}
.zz-pcta h3 { margin: 0 0 10px; font-size: 26px; font-weight: 800; color: #fff; }
.zz-pcta p { max-width: 60ch; margin-inline: auto; color: var(--zz-on-dark-2); }
.zz-pcta strong { color: var(--zz-gold); }
.zz-pcta a:not(.zz-btn) { color: var(--zz-gold); }
.zz-pcta .zz-btn { margin: 6px 4px 0; }

/* =========================================================================
   Contact page
   ========================================================================= */
.zz-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 28px 0 0;
}
.zz-ccard {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 24px;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r-md);
	background: var(--zz-surface);
	transition: transform var(--zz-t), box-shadow var(--zz-t), border-color var(--zz-t);
}
.zz-ccard:hover { transform: translateY(-3px); box-shadow: var(--zz-shadow-card); border-color: var(--zz-line-3); }
.zz-ccard__icon {
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--zz-gold-soft);
	color: var(--zz-gold-deep);
}
.zz-ccard__label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--zz-muted-3); }
.zz-ccard__value { font-size: 18px; font-weight: 800; color: var(--zz-ink); letter-spacing: -.3px; }
.zz-ccard__note { font-size: 13px; color: var(--zz-muted); }
.zz-ccard--wa .zz-ccard__icon { background: #e7f9ee; color: #128c4a; }
.zz-ccard--wa:hover { border-color: #25d366; }

/* Contact: methods stacked on the left, form filling the right */
.zz-pcontact {
	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin-top: 28px;
}
.zz-pcontact__side { display: grid; gap: 14px; }

/* Stacked contact cards become horizontal rows. */
.zz-pcontact__side .zz-contact-cards {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0;
}
.zz-pcontact__side .zz-ccard {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 18px 20px;
}
.zz-pcontact__side .zz-ccard__icon {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 48px;
	height: 48px;
	margin-bottom: 0;
}
.zz-pcontact__side .zz-ccard__label,
.zz-pcontact__side .zz-ccard__value,
.zz-pcontact__side .zz-ccard__note { grid-column: 2; }
.zz-pcontact__side .zz-ccard__value { font-size: 16.5px; }

.zz-pcontact__main {
	padding: 34px 36px;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r-md);
	background: var(--zz-surface);
}
.zz-pcontact__title { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }

.zz-pform__hint {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: var(--zz-r-sm);
	background: var(--zz-gold-soft);
	font-size: 13.5px;
	color: var(--zz-gold-darker) !important;
}
.zz-pform__hint strong { color: var(--zz-gold-darker); }

.zz-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zz-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.zz-field--full { grid-column: 1 / -1; }
.zz-field label { font-size: 13px; font-weight: 700; color: var(--zz-ink); }
.zz-field label span { color: var(--zz-red); }
.zz-field input,
.zz-field select,
.zz-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	background: var(--zz-bg);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--zz-text);
}
.zz-field textarea { resize: vertical; min-height: 130px; }
.zz-field input:focus,
.zz-field select:focus,
.zz-field textarea:focus {
	border-color: var(--zz-gold);
	background: var(--zz-surface);
	outline: none;
	box-shadow: 0 0 0 3px var(--zz-gold-soft);
}

.zz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zz-formfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.zz-formfoot__note { font-size: 12.5px; color: var(--zz-muted-3); }

.zz-formnote {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 20px;
	margin-bottom: 20px;
	border-radius: var(--zz-r-sm);
	font-size: 14px;
}
.zz-formnote strong { font-size: 14.5px; }
.zz-formnote--ok { background: #e6f7ee; color: #14663f; }
.zz-formnote--err { background: var(--zz-red-soft); color: var(--zz-red-deep); }

/* FAQ */
.zz-pfaq__sub { margin: -14px 0 22px; color: var(--zz-muted-3); }
.zz-faq {
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r);
	background: var(--zz-surface);
	margin-bottom: 10px;
	overflow: hidden;
}
.zz-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	color: var(--zz-ink);
	list-style: none;
}
.zz-faq summary::-webkit-details-marker { display: none; }
.zz-faq summary::after {
	content: "+";
	flex: none;
	font-size: 22px;
	font-weight: 400;
	color: var(--zz-gold-deep);
	line-height: 1;
	transition: transform var(--zz-t);
}
.zz-faq[open] summary::after { content: "–"; }
.zz-faq[open] summary { border-bottom: 1px solid var(--zz-line); }
.zz-faq > div { padding: 18px 22px; }
.zz-faq > div p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; }
.zz-faq > div p:last-child { margin: 0; }

/* Hours + email split */
.zz-phours { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.zz-phours__box {
	padding: 28px;
	border: 1px solid var(--zz-line);
	border-radius: var(--zz-r-md);
	background: var(--zz-surface);
}
.zz-phours__box h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.zz-phours__time { font-size: 16px; font-weight: 700; color: var(--zz-ink) !important; }
.zz-phours__box ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.9; color: var(--zz-muted); }

/* Floating WhatsApp — bottom right, with the back-to-top button stacked above */
.zz-wafloat {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px 12px 14px;
	border-radius: var(--zz-pill);
	background: #25d366;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: 0 6px 22px rgba(37, 211, 102, .38);
	transition: transform var(--zz-t), box-shadow var(--zz-t);
}
.zz-wafloat:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, .5); }

/* Redundant on the contact page, where the WhatsApp card is already on screen. */
body:has(.zz-pcontact) .zz-wafloat { display: none; }

@media (max-width: 900px) {
	/* Clear the bottom tab bar and any safe-area inset below it. */
	.zz-wafloat {
		right: 16px;
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
		padding: 11px 16px 11px 13px;
	}
}

@media (max-width: 1024px) {
	.zz-phero { grid-template-columns: 1fr; padding: 30px; gap: 26px; }
	.zz-phero__media { order: -1; max-height: 260px; }
	.zz-psplit,
	.zz-psplit--flip { grid-template-columns: 1fr; gap: 22px; }
	.zz-psplit--flip .zz-psplit__media { order: 0; }
	.zz-psplit__media { max-height: 280px; }
	.zz-pvalues__grid { grid-template-columns: repeat(2, 1fr); }
	.zz-catgrid { grid-template-columns: repeat(3, 1fr); }
	.zz-pcontact { grid-template-columns: 1fr; gap: 22px; }
	.zz-pcontact__main { padding: 26px 22px; }
	.zz-contact-cards { grid-template-columns: 1fr; }
	.zz-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.zz-page > section + section { margin-top: 44px; }
	.zz-phero { padding: 22px; }
	.zz-pvalues__grid { grid-template-columns: 1fr; }
	.zz-catgrid { grid-template-columns: repeat(2, 1fr); }
	.zz-formgrid { grid-template-columns: 1fr; }
	.zz-phours { grid-template-columns: 1fr; }
	.zz-pcta { padding: 28px 22px; }
	.zz-pcontact__main { padding: 22px 18px; }
	.zz-stats__item { padding: 20px 12px; }
	.zz-stats__item strong { font-size: 22px; }
}
.zz-entry__content a { color: var(--zz-gold-deep); text-decoration: underline; }
.zz-entry__content img { border-radius: var(--zz-r-sm); }
.zz-entry__content blockquote {
	margin: 24px 0;
	padding-left: 22px;
	border-left: 4px solid var(--zz-gold);
	font-size: 17px;
	color: var(--zz-text);
}
.zz-entry__footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--zz-line); font-size: 13.5px; }

.zz-postnav { margin-top: 26px; }
.zz-postnav .nav-links { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.zz-postnav a { font-weight: 600; }
.zz-postnav__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--zz-muted-3); }

.zz-comments { margin-top: 30px; padding: 28px 32px; background: var(--zz-surface); border: 1px solid var(--zz-line); border-radius: var(--zz-r); }
.zz-comments__list { list-style: none; margin: 0 0 24px; padding: 0; }
.zz-comments__list .children { list-style: none; padding-left: 26px; }
.zz-comments .comment-body { padding: 16px 0; border-bottom: 1px solid var(--zz-line); }

.zz-404 { padding: 60px 20px; text-align: center; }
.zz-404__code { font-size: 96px; font-weight: 800; line-height: 1; color: var(--zz-gold); letter-spacing: -4px; }
.zz-404 h1 { margin-top: 10px; font-size: 28px; }
.zz-404 p { color: var(--zz-muted); max-width: 50ch; margin-inline: auto; }
.zz-404 .zz-searchform { max-width: 420px; margin: 22px auto; }
.zz-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.zz-searchform { display: flex; gap: 8px; }
.zz-searchform input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--zz-line-2);
	border-radius: var(--zz-r-sm);
	font-family: inherit;
	font-size: 14.5px;
}
.zz-searchform button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	border: 0;
	border-radius: var(--zz-r-sm);
	background: var(--zz-ink);
	color: var(--zz-gold);
}
.zz-searchform button:hover { background: var(--zz-gold); color: var(--zz-ink); }

/* Widgets in dark footer already styled; generic widget lists */
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget select { width: 100%; padding: 10px; border: 1px solid var(--zz-line-2); border-radius: var(--zz-r-sm); }

/* Price filter widget */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--zz-gold); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--zz-line-3); }
.woocommerce .widget_price_filter .price_slider_amount .button { padding: 9px 18px; font-size: 13px; }

/* Toast */
.zz-toast {
	position: fixed;
	left: 50%; bottom: 26px;
	z-index: 200;
	transform: translateX(-50%) translateY(16px);
	padding: 12px 22px;
	border-radius: var(--zz-pill);
	background: var(--zz-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--zz-shadow-pop);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--zz-t), transform var(--zz-t);
}
.zz-toast.is-visible { opacity: 1; transform: translateX(-50%); }

/* -------------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------------- */
/* =========================================================================
   Homepage section grids — never leave a half-empty final row.

   Each section queries more products than the widest layout needs; the rules
   below drop the overflow so every visible row is complete. Below 900px the
   sections become swipeable carousels, where row completeness is moot.
   ========================================================================= */

/*
 * Selectors are deliberately verbose: the base card rule is
 * `.woocommerce ul.products li.product` (0,3,2), so anything hiding a card has
 * to out-specify it, and the base grid rule carries !important.
 */

/* Featured / On Sale / New Arrivals — two complete rows. */
@media (min-width: 1201px) {
	.woocommerce ul.products.zz-grid--5 > li:nth-child(n + 11),
	ul.products.zz-grid--5 > li:nth-child(n + 11) { display: none; }
}
@media (max-width: 1200px) and (min-width: 901px) {
	.woocommerce ul.products.zz-grid--5,
	ul.products.zz-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

	.woocommerce ul.products.zz-grid--5 > li:nth-child(n + 9),
	ul.products.zz-grid--5 > li:nth-child(n + 9) { display: none; }
}

/* Flash Deals — one complete row of compact cards. */
@media (min-width: 1301px) {
	.woocommerce ul.products.zz-grid--7 > li:nth-child(n + 8),
	ul.products.zz-grid--7 > li:nth-child(n + 8) { display: none; }
}
@media (max-width: 1300px) and (min-width: 1101px) {
	.woocommerce ul.products.zz-grid--7,
	ul.products.zz-grid--7 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

	.woocommerce ul.products.zz-grid--7 > li:nth-child(n + 7),
	ul.products.zz-grid--7 > li:nth-child(n + 7) { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
	.woocommerce ul.products.zz-grid--7,
	ul.products.zz-grid--7 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

	.woocommerce ul.products.zz-grid--7 > li:nth-child(n + 6),
	ul.products.zz-grid--7 > li:nth-child(n + 6) { display: none; }
}

@media (max-width: 1200px) {
	.zz-hero-wrap { grid-template-columns: 1fr 320px; }
	.zz-hero__title { font-size: 38px; }
	.zz-hero__slide { padding: 36px 38px; }
	.zz-hero__dots { left: 38px; }

	/* Shop and category archives only — homepage sections handled above. */
	.woocommerce ul.products:not([class*="zz-grid--"]),
	ul.products:not([class*="zz-grid--"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.zz-nav__menu { gap: 26px; font-size: 14.5px; }
	.zz-header__inner { gap: 20px; }
	.zz-header__actions { gap: 18px; }
}

@media (max-width: 1024px) {
	.zz-hero-wrap { grid-template-columns: 1fr; }
	.zz-promos { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.zz-promo--2 .zz-promo__copy { max-width: 100%; }
	.zz-promo--2 .zz-promo__media { position: static; width: 100%; height: 120px; margin-top: 14px; }

	.zz-hot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zz-hot__card { min-height: 320px; }

	.zz-shop { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 22px; }

	/* Single column: release the desktop row/column pinning so they stack. */
	.zz-shop__main,
	.zz-shop__side { grid-column: 1; grid-row: auto; }

	/* Blog sidebar simply stacks below the content. */
	.zz-shop__side { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--zz-line); }

	/* Only the shop filter sidebar becomes a slide-in drawer. */
	.zz-filter-toggle {
		display: inline-flex;
		align-items: center;
		padding: 10px 20px;
		border: 1px solid var(--zz-line-2);
		border-radius: var(--zz-r-sm);
		background: var(--zz-surface);
		font-size: 14px;
		font-weight: 700;
	}
	.zz-shop__side--filters {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		z-index: 95;
		width: 320px;
		max-width: 88vw;
		padding: 60px 20px 30px;
		margin-top: 0;
		border-top: 0;
		background: var(--zz-bg);
		overflow-y: auto;
		/* visibility (not just transform) so the closed drawer leaves the tab order */
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform .25s ease, visibility 0s linear .25s;
		box-shadow: var(--zz-shadow-pop);
	}
	.zz-shop__side--filters.is-open {
		visibility: visible;
		transform: none;
		transition: transform .25s ease, visibility 0s;
	}
	.zz-filter-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 16px; right: 16px;
		width: 32px; height: 32px;
		border: 1px solid var(--zz-line-2);
		border-radius: 50%;
		background: #fff;
		color: var(--zz-ink);
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary { width: 100%; float: none; }
	.woocommerce div.product div.images { margin-bottom: 26px; }

	.zz-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.zz-trust__grid { grid-template-columns: 1fr 1fr; gap: 22px 0; }
	.zz-trust__item:nth-child(2) { border-right: 0; padding-right: 0; }
	.zz-trust__item:nth-child(3) { padding-left: 0; }
}

@media (max-width: 900px) {
	.zz-nav { display: none; }
	.zz-topbar__left span:last-child { display: none; }

	/* Scoped to the masthead — the panel has its own .zz-logo that must not reorder. */
	.zz-header__inner { flex-wrap: wrap; gap: 14px; }
	.zz-header__inner .zz-logo { order: 2; margin-right: auto; }
	.zz-header__inner .zz-burger { order: 1; }
	.zz-header__inner .zz-header__actions { order: 3; }
	.zz-header__inner .zz-search { order: 4; flex-basis: 100%; }

	.zz-header__inner .zz-logo__mark { width: 44px; height: 44px; }
	.zz-header__inner .zz-logo__mark span { font-size: 25px; }
	.zz-header__inner .zz-logo__name { font-size: 24px; }
	.zz-header__inner .zz-logo__tagline { font-size: 10px; letter-spacing: 1.8px; }

	.zz-hact--cart .zz-hact__label { display: none; }

	.zz-sec-title { font-size: 23px; }
	.zz-hero__title { font-size: 32px; }
	.zz-hero__slide { grid-template-columns: 1fr; padding: 30px 26px 44px; }
	.zz-hero__media { min-height: 200px; }
	.zz-hero__dots { left: 26px; bottom: 16px; }

	.zz-seo { padding: 26px 24px; max-height: 300px; }
}

/* =========================================================================
   Mobile / small tablet: homepage sections become swipeable carousels.
   Shop and category archives keep a normal grid.
   ========================================================================= */
@media (max-width: 900px) {
	.woocommerce ul.products.zz-grid--5,
	.woocommerce ul.products.zz-grid--7,
	ul.products.zz-grid--5,
	ul.products.zz-grid--7,
	.zz-hot {
		/*
		 * Grid rather than flex: grid-auto-columns resolves a percentage
		 * against the container reliably, where a percentage flex-basis in a
		 * scrolling flex row does not.
		 */
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: none !important;
		grid-auto-columns: calc((100% - 12px) / 2);
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/*
		 * Sit inside the container gutter like the On Sale grid does, so the
		 * rails line up with the rest of the page instead of bleeding to the
		 * screen edges. The arrow buttons signal that there is more to see.
		 */
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 4px;
	}
	ul.products.zz-grid--5::-webkit-scrollbar,
	ul.products.zz-grid--7::-webkit-scrollbar,
	.zz-hot::-webkit-scrollbar { display: none; }

	/*
	 * Card width: sized so exactly TWO cards fit on screen with a sliver of the
	 * third showing to signal that the row scrolls.
	 *
	 * Set via flex-basis, not width: the base rule
	 * `.woocommerce ul.products li.product { width: auto !important }` beats any
	 * width declared here, which is why these cards were previously stuck at
	 * their max-width and only 1.5 fitted.
	 *
	 *   available from the first card to the screen edge = 100vw - gutter
	 *   two cards + one gap + peek must fit inside that
	 */
	/*
	 * Exactly two cards across the padded container, matching the On Sale
	 * grid's columns. Percentage of the rail — not viewport units — so the
	 * gutters stay equal on both sides.
	 */
	:root { --zz-card-w: calc((100% - 12px) / 2); }

	.woocommerce ul.products.zz-grid--5 > li,
	.woocommerce ul.products.zz-grid--7 > li,
	ul.products.zz-grid--5 > li,
	ul.products.zz-grid--7 > li,
	.zz-hot > .zz-hot__card {
		/* Track width comes from grid-auto-columns on the rail. */
		width: auto;
		max-width: none;
		min-width: 0;
		scroll-snap-align: start;
	}

	.zz-hot > .zz-hot__card { min-height: 0; }

	/*
	 * On Sale is the exception: a browsable 2-column grid of up to 8 products
	 * (4 rows) rather than a carousel. Anything beyond that lives behind
	 * "View All".
	 */
	.woocommerce ul.products.zz-grid--5.zz-grid--sale,
	ul.products.zz-grid--5.zz-grid--sale {
		display: grid !important;
		/*
		 * grid-auto-flow MUST be reset here. Inheriting `column` from the
		 * carousel rule above while also declaring two explicit columns makes
		 * grid spill every extra product into a new implicit column, which
		 * overflows the page sideways and stacks the cards on top of each other.
		 */
		grid-auto-flow: row !important;
		grid-auto-columns: auto !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
	.woocommerce ul.products.zz-grid--5.zz-grid--sale > li,
	ul.products.zz-grid--5.zz-grid--sale > li {
		flex: none;
		width: auto;
		max-width: none;
	}
	.woocommerce ul.products.zz-grid--5.zz-grid--sale > li:nth-child(n + 9),
	ul.products.zz-grid--5.zz-grid--sale > li:nth-child(n + 9) { display: none; }

	.zz-hot__media { min-height: 130px; }
	.zz-hot__title { font-size: 18px; margin: 8px 0 14px; }

	/* Compact section headers: title left, View All right, always one row. */
	.zz-sec-head,
	.zz-sec-head--center {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 14px;
	}
	.zz-sec-head--center .zz-sec-head__spacer { display: none; }
	.zz-sec-head--center .zz-sec-title { text-align: left; }
	.zz-sec-head--center .zz-viewall { justify-self: auto; }

	/* Title shrinks so the View All pill and the arrows stay on one row. */
	.zz-sec-title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.zz-viewall,
	.zz-viewall--gold {
		flex: none;
		margin-left: 0;
		padding: 7px 13px;
		font-size: 11.5px;
	}

	.zz-section { padding-top: 34px; }

	/*
	 * One line of title, so the photo gets the space instead.
	 *
	 * Must out-specify the base rule, which also matches
	 * `.woocommerce ul.products li.product .woocommerce-loop-product__title`
	 * (0,3,3) — the card title carries both classes, and the base min-height
	 * of 58px was leaving a white gap under the one-line title.
	 */
	.zz-card__title,
	.woocommerce ul.products li.product .zz-card__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 1;
		min-height: 0;
		margin-bottom: 8px;
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}
	/* Match the gap above the price to the gap above the button. */
	.zz-card__price { margin-bottom: 8px; }
	.zz-grid--5 .zz-card__thumb { height: 168px; }
	.zz-grid--7 .zz-card__thumb { height: 150px; }
	.zz-grid--5 .zz-card__btn { padding: 10px 6px; font-size: 13px; }

	/* Countdown sits under the heading rather than squeezing it. */
	.zz-sec-head__extra { order: 3; flex-basis: 100%; }
	.zz-countdown { font-size: 12px; }
	.zz-countdown__unit { padding: 3px 6px; font-size: 12px; }

	/*
	 * Mobile section order: Flash Deals is promoted above Featured so the one
	 * time-limited section lands where thumbs reach first. Desktop order is
	 * untouched — this only applies inside the mobile breakpoint.
	 */
	.zz-home-sections {
		display: flex;
		flex-direction: column;
	}
	.zz-home-sections > * { order: 50; }
	.zz-home-sections > .zz-hero-wrap        { order: 10; }
	.zz-home-sections > .zz-marquee-wrap     { order: 20; }
	.zz-home-sections > .zz-section--flash   { order: 30; }
	.zz-home-sections > .zz-section--featured{ order: 40; }
	.zz-home-sections > .zz-section--sale    { order: 50; }
	.zz-home-sections > .zz-section--hot     { order: 60; }
	.zz-home-sections > .zz-section--arrivals{ order: 70; }
	.zz-home-sections > .zz-seo-wrap         { order: 80; }
}

/* -------------------------------------------------------------------------
   Admin-only note where an empty homepage section would have been.
   ------------------------------------------------------------------------- */
.zz-secnote {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding: 16px 20px;
	border: 1px dashed var(--zz-line-3);
	border-radius: var(--zz-r);
	background: var(--zz-surface);
}
.zz-secnote__tag {
	flex: none;
	padding: 4px 10px;
	border-radius: var(--zz-pill);
	background: var(--zz-gold-soft);
	color: var(--zz-gold-darker);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.zz-secnote__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zz-secnote__body strong { font-size: 14px; color: var(--zz-ink); }
.zz-secnote__body span { font-size: 13px; color: var(--zz-muted); }
.zz-secnote__cta {
	margin-left: auto;
	flex: none;
	padding: 9px 18px;
	border-radius: var(--zz-pill);
	background: var(--zz-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}
.zz-secnote__cta:hover { background: var(--zz-gold); color: var(--zz-ink); }

@media (max-width: 640px) {
	.zz-secnote__cta { margin-left: 0; }
}

@media (max-width: 782px) {
	.woocommerce ul.products:not([class*="zz-grid--"]),
	ul.products:not([class*="zz-grid--"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	:root { --zz-gutter: 16px; }

	.zz-topbar__left { gap: 14px; }
	.zz-topbar__left a:nth-child(2) { display: none; }
	.zz-topbar__right .zz-topbar__menu { display: none; }

	.zz-search__cat { display: none; }
	.zz-search { height: 44px; }

	.woocommerce ul.products:not([class*="zz-grid--"]),
	ul.products:not([class*="zz-grid--"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

	.zz-card { padding: 10px; }
	.zz-card__thumb { height: 140px; }
	/* Titles are single-line below 900px — no reserved height. */
	.zz-card__title { font-size: 12.5px; min-height: 0; }
	/* get_price_html() emits no .price wrapper — style the container itself. */
	.zz-card__price { font-size: 16px; }
	.zz-card--flash .zz-card__price { font-size: 15px; }
	.zz-card__btn { font-size: 13px; padding: 10px 6px; }

	.zz-promos { grid-template-columns: 1fr; }
	.zz-hot { grid-template-columns: 1fr; }

	.zz-sec-head { flex-wrap: wrap; gap: 12px; }
	.zz-sec-head--center { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
	.zz-sec-head--center .zz-sec-head__spacer { display: none; }
	.zz-sec-head--center .zz-viewall { justify-self: center; }
	.zz-viewall { margin-left: 0; }

	.zz-cat { width: 128px; }
	.zz-cat__circle { width: 96px; height: 96px; }
	.zz-cat__name { font-size: 13px; }

	/* Keep the container's side gutter — a bare `0` here flattened the footer
	   against the screen edges. */
	.zz-footer__grid { grid-template-columns: 1fr; gap: 28px; padding: 36px var(--zz-gutter) 30px; }
	.zz-footer__bar-inner { flex-direction: column; text-align: center; gap: 10px; }
	.zz-trust__grid { grid-template-columns: 1fr; }
	.zz-trust__item { border-right: 0; padding-inline: 0; }

	.zz-entry { padding: 22px 20px; }
	.zz-comments { padding: 20px; }

	.woocommerce div.product .product_title { font-size: 24px; }
	.woocommerce div.product p.price { font-size: 24px; }
	.woocommerce div.product form.cart .button { min-width: 0; }

	.woocommerce table.shop_table th { padding: 12px; font-size: 11px; }
	.woocommerce table.shop_table td { padding: 12px; }

	.zz-404__code { font-size: 72px; }
	.zz-pagehead__title { font-size: 25px; }
}

/* Keep burger + logo + actions on one line on phones. */
@media (max-width: 560px) {
	.zz-header__inner { gap: 10px; }
	.zz-header__inner .zz-logo { gap: 8px; }
	.zz-header__inner .zz-logo__mark { width: 36px; height: 36px; }
	.zz-header__inner .zz-logo__mark span { font-size: 21px; }
	.zz-header__inner .zz-logo__name { font-size: 20px; }
	.zz-header__inner .zz-logo__tagline { display: none; }
	.zz-header__inner .zz-header__actions { gap: 13px; }
	.zz-header__inner .zz-burger { padding: 4px; }
	.zz-header__inner .zz-burger__bars span { width: 22px; }

	/* The count badge overhangs its icon; give the row room so the last one
	   is not clipped by the container edge. */
	.zz-header__inner .zz-header__actions { padding-right: 10px; }
}

@media (max-width: 420px) {
	.zz-topbar__left a:first-child span { display: none; }
	.zz-card__thumb { height: 120px; }
	.zz-header__inner .zz-header__actions { gap: 11px; }
	.zz-header__inner .zz-logo__name { font-size: 18px; }
}

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