/**
 * Skincare theme chrome. HARD RULE: nothing in this file may target .bz-*
 * content or global h1/p typography — page content belongs to the builder.
 * Theme styles are namespaced under .sk-*.
 */

:root {
	--sk-header-h: 84px;
}

/* ------------------------------- base ----------------------------------- */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
	margin: 0;
	font: 400 15px/1.6 'Montserrat', system-ui, sans-serif;
	color: var(--bz-ink, #2A2A2A);
	background: var(--bz-cream-soft, #F9F8F7);
	-webkit-font-smoothing: antialiased;
}

/*
 * THE FOOTER STAYS AT THE BOTTOM ON A SHORT PAGE.
 *
 * An empty cart, a thin legal page or a 404 does not fill a tall screen: on a
 * 1366px tablet the whole document came to 1058px, so 308px of window sat
 * below the footer showing the page background. It read as a white band the
 * theme had left there, which is exactly how a visitor reads it too.
 *
 * The usual column: the page is at least as tall as the window, the main
 * region takes the slack, and the footer keeps its own height. Snap pages are
 * excluded — they already size every section to the viewport, and a second
 * height rule on top of that fights the scroll snapping.
 */
html { background: var(--bz-cream-soft, #F9F8F7); }

body:not(.sk-snap-page) {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}
body:not(.sk-snap-page) > .sk-main,
body:not(.sk-snap-page) > #bz-main,
body:not(.sk-snap-page) > .bz-main {
	flex: 1 0 auto;
}
body:not(.sk-snap-page) > .sk-footer { flex: 0 0 auto; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* ------------------------------ header ---------------------------------- */

.sk-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
	/* min-height, not height: the header now holds up to three rows, and a
	   fixed height squeezed them all into the space of one — the extra rows
	   were in the DOM but invisible. */
	min-height: var(--sk-header-h);
	transition: background .25s ease, box-shadow .25s ease;
}
/* One number for the admin bar, so the header offset and the snap slide
   height cannot drift apart. WordPress uses 32px, and 46px below 783px where
   the bar becomes two rows tall. */
/* The admin bar's height is MEASURED by theme.js and written to --sk-admin-h,
   because 32/46 are only true when it is actually on screen. In DevTools device
   emulation the bar is hidden while body.admin-bar is still present, so the
   assumption subtracted 46px that nothing occupied and every section came up
   short — the gap that appears logged in and disappears in a private window.
   The values below are the pre-measurement fallback only. */
body.admin-bar { --sk-admin-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --sk-admin-h: 46px; } }

/* Admin bar: only FIXED/overlay headers need the offset — WP's html margin
   already pushes in-flow content, so solid headers get none (the old double
   offset was the "gap above header" bug). */
body.admin-bar.sk-header-overlay .sk-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.sk-header-overlay .sk-header { top: 46px; } }

.sk-header-in {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* The main row keeps the original header height; the other rows size to
   their content, so an empty top bar costs nothing. */
.sk-header-row--main .sk-header-in { min-height: var(--sk-header-h); }
.sk-header-row--top .sk-header-in,
.sk-header-row--bottom .sk-header-in { min-height: 44px; }

/* Overlay mode (hero pages): HIDDEN until hover — Zara behavior. The bar
   itself is the hover hotzone (invisible but interactive at the top edge).
   Touch devices have no hover, so there it stays visible over the hero. */
body.sk-header-overlay .sk-header { position: fixed; color: #fff; }
@media (hover: hover) {
	body.sk-header-overlay .sk-header {
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity .22s ease, transform .22s ease, background .22s ease, color .22s ease;
	}
	body.sk-header-overlay .sk-header:hover,
	body.sk-header-overlay .sk-header:focus-within {
		opacity: 1;
		transform: translateY(0);
		background: rgba(249, 248, 247, .96); /* cream, per design */
		color: var(--bz-ink, #2A2A2A);
		backdrop-filter: blur(8px);
		box-shadow: 0 1px 0 rgba(42, 42, 42, .08);
	}
}
/*
 * 5.42.0 — the scrolled overlay header no longer paints itself cream.
 *
 * This block used to hard-set a near-opaque cream background on any touch
 * device (`hover: none` is every phone and tablet) the moment the page passed
 * 40px of scroll. So the header was transparent over the first section and
 * turned into a white bar on the second, with no setting anywhere that could
 * stop it: the Customizer's "Background once scrolled" control writes to
 * `.sk-header.is-stuck`, and nothing in this theme has ever added that class —
 * the script only toggles `is-scrolled`. The control was wired to a class
 * that does not exist, so it had never done anything at all.
 *
 * Transparent is now the default in overlay mode, scrolled or not, on every
 * device. A bar is opted into: Customize -> Header -> Sticky & transparent ->
 * Background once scrolled, which now targets the class that is really there,
 * per device.
 *
 * The variables carry the defaults so the Customizer can override them
 * without needing !important — a defined variable beats a fallback.
 */
@media (hover: none) {
	body.sk-header-overlay .sk-header.is-scrolled {
		background: var(--sk-header-scrolled-bg, transparent);
		color: var(--sk-header-scrolled-color, inherit);
		/* No blur variable here on purpose: nothing writes one, and preflight
		   is right to call that out. A frosted bar is already a first-class
		   choice under Header -> Bar -> Background -> Translucent, so a second
		   half-wired route to the same effect would just be a control that
		   silently does nothing — which is the bug this release removes. */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Snap pages: the footer is a snap stop too, so mandatory snapping can rest
   on it (otherwise the last section would swallow every scroll attempt). */
html:not(.sk-paged) body.sk-snap-page .sk-footer { scroll-snap-align: end; }

/* Solid mode (plain pages): sage bar, content pushed below it */
body.sk-header-solid .sk-header {
	position: relative;
	background: var(--bz-cream-soft, #F9F8F7);
	color: var(--bz-ink, #2A2A2A);
	border-bottom: 1px solid rgba(42, 42, 42, .08);
}

.sk-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sk-logo img { max-height: 48px; width: auto; }
.sk-logo-text { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 17px; }

/* Zones own the horizontal distribution now — see .sk-header-zone. A nav
   that also claims flex:1 would push the centre zone off-centre. */
.sk-nav { flex: 0 1 auto; }
.sk-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; justify-content: center; }
.sk-menu a {
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .92;
}
.sk-menu a:hover { opacity: 1; }

/* .sk-header-tools no longer exists in the markup; the right zone replaced
   it. Kept as an alias so any third-party CSS targeting it still lands. */
.sk-header-tools,
.sk-header-zone--right { display: flex; align-items: center; gap: 18px; }

/* Search opens INLINE (design's underline field) — never navigates away. */
.sk-search { width: 0; overflow: hidden; transition: width .25s ease; }
.sk-header.sk-search-open .sk-search { width: 200px; }
.sk-search-input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: 400 14px/1.4 'Montserrat', sans-serif;
	letter-spacing: .04em;
	padding: 6px 2px;
	outline: none;
}
.sk-search-input::placeholder { color: inherit; opacity: .55; }
.sk-cart-count.is-empty { display: none; }
.sk-tool { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; letter-spacing: .04em; }
.sk-cart { position: relative; }
.sk-cart-count {
	position: absolute;
	top: -7px; right: -9px;
	background: var(--bz-gold, #AA6A04);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.sk-burger { display: none; }

/* 900px was a third boundary that agreed with nothing.
   The builder calls anything up to 1023px a tablet, the header builder ships a
   tablet layout, and this rule hid .sk-nav from 900 down — so between 768 and
   900 the layout said "menu here" and the stylesheet said "not here", and the
   header rendered with a logo, a search icon and no way at all to reach the
   menu. Aligned to the tablet breakpoint the rest of the theme already uses. */
@media (max-width: 1023px) {
	.sk-header-in { padding: 0 20px; gap: 16px; }
	.sk-nav {
		display: none;
		position: absolute;
		top: var(--sk-header-h); left: 0; right: 0;
		background: var(--bz-cream-soft, #F9F8F7);
		color: var(--bz-ink, #2A2A2A);
		box-shadow: 0 12px 24px rgba(0,0,0,.08);
		padding: 12px 20px 20px;
	}
	.sk-nav.is-open { display: block; }
	.sk-menu { flex-direction: column; gap: 14px; }
	.sk-account-link { display: none; }
	.sk-burger {
		display: inline-flex;
		flex-direction: column;
		gap: 5px;
		margin-left: auto;
		background: transparent;
		border: 0;
		padding: 6px;
		cursor: pointer;
	}
	.sk-burger span { width: 22px; height: 2px; background: currentColor; color: inherit; display: block; }
	.sk-header-tools { margin-left: auto; }

	/*
	 * `margin-left: auto` on the burger dates from when it was the only thing
	 * in its zone and had to be pushed to the edge. Once the tablet layout put
	 * search and cart in that same zone, the auto margin shoved the burger
	 * away from them and left a gap across the middle of the bar — the icons
	 * marooned in the centre with the burger alone on the right.
	 *
	 * Inside a zone the zone does the aligning, so the burger just queues up
	 * with its neighbours. It keeps the auto margin when it really is alone.
	 */
	.sk-header-zone .sk-burger { margin-left: 0; }
	.sk-header-zone--right {
		gap: 16px;
		align-items: center;
	}
	/* The burger reads as the primary control here, so it sits last and a
	   little apart from the two icons rather than flush against them. */
	.sk-header-zone--right .sk-burger {
		order: 9;
		margin-left: 2px;
		padding-left: 4px;
	}
}

/* ------------------------------ plain pages ------------------------------ */

.sk-main.sk-plain {
	/*
	 * `width: 100%` is load-bearing, not decoration.
	 *
	 * `body:not(.sk-snap-page)` is a COLUMN flex container (sticky footer).
	 * In flexbox, `align-self: stretch` — which is what would normally make
	 * this element fill the body — is switched off the moment a cross-axis
	 * margin is `auto`. `margin: 0 auto` does exactly that, so the main
	 * region stopped stretching and fell back to shrink-to-fit: on /cart/
	 * it measured 887px inside a 1265px body, and every cart rule inherited
	 * that squeeze no matter what max-width it declared.
	 *
	 * An explicit width restores the full measure; the auto margins then
	 * only matter when a max-width narrows the element.
	 */
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 64px 24px 96px;
}
.sk-title {
	font-size: clamp(28px, 3vw, 40px); /* bounded fluid — theme chrome only */
	font-weight: 900;
	letter-spacing: .02em;
	margin: 0 0 24px;
}

/* ------------------------------- footer ---------------------------------- */

.sk-footer {
	background: var(--bz-footer, #D8D0C5); /* per Homepage design annotation */
	color: var(--bz-slate, #414F4E);
}
/*
 * ONE CONTAINER WIDTH, STATED ONCE.
 *
 * This was 1240px with 32px of side padding, and box-sizing: border-box means
 * the padding comes out of the width — so the footer's content was 1176px
 * while everything above it ran wider. The footer looked inset by a hand's
 * width on every page, and the brand blurb wrapped a word earlier than the
 * design.
 *
 * The number now comes from --bz-container, the same custom property the
 * builder's own containers use, so a site that widens its content widens its
 * footer with it. The padding is added on top rather than taken out of it,
 * which is what "1320px of content" means to everyone except the box model.
 */
.sk-footer-in {
	max-width: calc(var(--bz-container, 1320px) + 64px);
	margin: 0 auto;
	/* The three numbers stay as the defaults they always were; the top and
	   bottom are now overridable from Customize -> Footer -> Type & space,
	   because the only way to loosen a cramped footer used to be editing this
	   file. Left and right keep the container's own gutter. */
	/* All four sides, each with the number it has always used as its default,
	   so an untouched footer is pixel-identical to the one before the controls
	   existed. */
	padding:
		var(--sk-footer-pad-top, 72px)
		var(--sk-footer-pad-right, 32px)
		var(--sk-footer-pad-bottom, 32px)
		var(--sk-footer-pad-left, 32px);
}

.sk-footer-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sk-footer-col-gap, 48px);
	padding-bottom: var(--sk-footer-row-gap, 56px);
	border-bottom: 1px solid rgba(65, 79, 78, .18);
}
/* ---------------------------------------------------------------------------
   Footer type: theme defaults expressed as variables, not as fixed values.

   These used to be hardcoded, which meant any owner whose brand is not
   centred-and-uppercase had to write Additional CSS on their first day. They
   are still the Skincare look — the numbers below are unchanged — but each one
   is now a variable the Customizer can set, so the panel can do the whole job.

   The old rule also declared letter-spacing twice (.1em then .02em); the
   second silently won, so the tracking was never what the first line said.
   --------------------------------------------------------------------------- */
.sk-footer-title {
	font-size: var(--sk-footer-title-size, clamp(20px, 1.8vw, 26px));
	font-weight: var(--sk-footer-title-weight, 700);
	letter-spacing: var(--sk-footer-title-tracking, .02em);
	text-transform: var(--sk-footer-title-case, uppercase);
	text-align: var(--sk-footer-title-align, center);
	margin: 0 0 var(--sk-footer-title-gap, 28px);
}
.sk-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: var(--sk-footer-link-align, center);
}
.sk-footer-menu li { margin: 0 0 var(--sk-footer-link-gap, 16px); }
.sk-footer-menu a {
	text-decoration: none;
	font-size: var(--sk-footer-link-size, 13px);
	font-weight: var(--sk-footer-link-weight, 600);
	letter-spacing: var(--sk-footer-link-tracking, .12em);
	text-transform: var(--sk-footer-link-case, uppercase);
	/* Not a control: an opacity slider next to a colour picker is two ways to
	   set the same thing, and they fight. Link colour and hover colour cover
	   it. */
	opacity: .85;
}
.sk-footer-menu a:hover {
	opacity: 1;
	text-decoration: var(--sk-footer-link-hover-decoration, underline);
}

/* The Text element is prose: it follows the heading's alignment so a column
   of blurb and a column of links line up, without needing its own control. */
.sk-footer .sk-footer-text { text-align: var(--sk-footer-text-align, inherit); }
.sk-footer .sk-footer-text h1,
.sk-footer .sk-footer-text h2,
.sk-footer .sk-footer-text h3,
.sk-footer .sk-footer-text h4 {
	font-size: var(--sk-footer-title-size, clamp(20px, 1.8vw, 26px));
	font-weight: var(--sk-footer-title-weight, 700);
	letter-spacing: var(--sk-footer-title-tracking, .02em);
	text-transform: var(--sk-footer-title-case, uppercase);
	color: var(--sk-footer-title-color, inherit);
	margin: 0 0 var(--sk-footer-title-gap, 28px);
}
.sk-footer .sk-footer-text p { margin: 0; line-height: 1.75; }

/* The closing line: centred by default, but a row when the owner asks. */
/* The closing line is styled in one place, further down — see the note there.
   A second .sk-footer-bottom rule used to live here and was silently beaten by
   it, which is how the alignment control came to do nothing at all. */

.sk-newsletter { text-align: center; padding: 56px 0 24px; }
.sk-newsletter-title { font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 28px; }
.sk-newsletter-form {
	display: flex;
	max-width: 640px;
	margin: 0 auto;
}
.sk-newsletter-form input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--bz-slate, #414F4E);
	border-right: 0;
	background: transparent;
	padding: 16px 18px;
	font: inherit;
	color: inherit;
}
.sk-newsletter-form button {
	border: 1px solid var(--bz-slate, #414F4E);
	background: transparent;
	padding: 16px 28px;
	font: 700 13px/1 'Montserrat', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}
.sk-newsletter-form button:hover { background: var(--bz-slate, #414F4E); color: #fff; }
.sk-newsletter-note { font-size: 12.5px; opacity: .7; max-width: 560px; margin: 14px auto 0; }

/* ---------------------------------------------------------------------------
   The closing line — ONE rule.

   There were two, and the later one hardcoded `text-align: center`, so the
   alignment variable never had a chance. Worse, the items are flex children in
   a column, so `align-items: center` centred them whatever text-align said —
   the control could not have worked even if it had won.

   Alignment therefore drives THREE properties, not one: the flex direction,
   the cross-axis alignment, and the text. That is what "align the closing
   line" actually means in a flex row.
   --------------------------------------------------------------------------- */
/*
 * TWO SELECTORS, BECAUSE THERE ARE TWO FOOTERS.
 *
 * `.sk-footer-bottom` is emitted by exactly one file — fallback.php, the
 * hand-written footer used before anything is arranged. The zone renderer,
 * which is what every configured site uses, emits
 * `.sk-footer-row--bottom .sk-footer-zone` instead.
 *
 * So this rule styled the fallback and nothing else: every closing-line
 * control was inert on the sites the zone system exists for. `.sk-footer-row`
 * is a grid, so the copyright and the note landed in one cell and stacked, and
 * the flex variables had no flex container to act on. It also explains why
 * merging the earlier duplicate rule changed nothing — both copies were aiming
 * at a class the renderer never produces.
 *
 * `padding` and `opacity` stay on `.sk-footer-bottom` alone: the zone row
 * brings its own spacing, and adding this on top would shift the closing line
 * on every footer already built.
 */
.sk-footer-bottom,
.sk-footer-row--bottom .sk-footer-zone {
	display: flex;
	flex-direction: var(--sk-footer-bottom-dir, column);
	gap: 14px;
	align-items: var(--sk-footer-bottom-items, center);
	justify-content: var(--sk-footer-bottom-justify, center);
	text-align: var(--sk-footer-bottom-align, center);
	text-transform: var(--sk-footer-bottom-case, uppercase);
	letter-spacing: var(--sk-footer-bottom-tracking, .1em);
	font-size: var(--sk-footer-bottom-size, 11.5px);
}

.sk-footer-bottom {
	padding: var(--sk-footer-bottom-gap, 24px) 0 0;
	opacity: .8;
}

/* A row that has been asked to spread apart still has to stack on a narrow
   screen — two items at opposite edges of a 360px phone is not a layout. */
@media (max-width: 767px) {
	.sk-footer-bottom,
	.sk-footer-row--bottom .sk-footer-zone {
		flex-direction: column;
		align-items: var(--sk-footer-bottom-items, center);
	}
}
.sk-getintouch { font-weight: 700; text-decoration: none; letter-spacing: .14em; }

@media (max-width: 700px) {
	.sk-footer-cols { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================ WooCommerce v1 ============================= */
/* Shop / product / cart / checkout in the Skincare design language.
   First pass: palette, typography, buttons, grid. Pixel pass follows the
   final PDF in the Woo phase. */

/* `width: 100%` for the same reason as .sk-main.sk-plain above: .sk-woo is a
   direct child of the column-flex body, and `margin: 0 auto` switches off the
   stretch that would otherwise give it the full measure. */
.sk-woo { width: 100%; max-width: 1520px; margin: 0 auto; padding: 40px 40px 110px; background: var(--bz-cream, #F4F1ED); }
body.sk-header-solid .sk-main { background: var(--bz-cream, #F4F1ED); }

/* shop hero: SOAP BAR + sage tagline (design) */
.sk-shop-hero { padding: 34px 8px 10px; }
.sk-shop-title {
	font: 900 clamp(34px, 4vw, 54px)/1.1 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--bz-ink, #2A2A2A);
}
.sk-shop-tagline { color: var(--bz-sage-dark, #506C61); font-size: 17px; margin: 0; }
.sk-woo--listing .woocommerce-products-header { display: none; } /* our hero replaces it */

/* layout: price rail left + grid */
.sk-shop-layout { display: flex; gap: 56px; padding-top: 46px; }
.sk-shop-rail { flex: 0 0 220px; }
.sk-shop-main { flex: 1 1 auto; min-width: 0; }
.sk-rail-title {
	font: 700 12px/1 'Montserrat', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 6px 0 22px;
}
.sk-shop-rail .price_slider_wrapper { margin-top: 4px; }
.sk-shop-rail .ui-slider { height: 2px; background: var(--bz-ink, #2A2A2A); border: 0; border-radius: 0; margin: 18px 8px 14px; }
.sk-shop-rail .ui-slider .ui-slider-range { background: var(--bz-ink, #2A2A2A); }
.sk-shop-rail .ui-slider .ui-slider-handle {
	width: 11px; height: 11px;
	background: var(--bz-ink, #2A2A2A);
	border: 0; border-radius: 50%;
	top: -5px; margin-left: -5px;
	cursor: pointer;
}
.sk-shop-rail .price_slider_amount { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.sk-shop-rail .price_slider_amount .button {
	order: 3; margin-left: auto;
	border: 1px solid var(--bz-ink, #2A2A2A); background: transparent;
	font: 700 10.5px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
	padding: 8px 12px; border-radius: 0; cursor: pointer;
}

@media (max-width: 900px) {
	.sk-shop-layout { flex-direction: column; gap: 24px; }
	.sk-shop-rail { flex-basis: auto; max-width: 320px; }
}

.sk-woo .woocommerce-breadcrumb { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bz-text-muted, #999); margin-bottom: 28px; }

/* product grid — airy per design, images on their own neutral stage */
.sk-woo ul.products { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 56px 34px; list-style: none; margin: 0 !important; padding: 0; width: 100%; }
.sk-woo ul.products::before, .sk-woo ul.products::after { display: none; }
@media (max-width: 900px) { .sk-woo ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sk-woo ul.products { grid-template-columns: 1fr; } }
.sk-woo ul.products li.product { text-align: left; width: auto !important; float: none !important; margin: 0 !important; }
.sk-woo ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1 / 1.15; object-fit: cover; background: #E4DCD2; display: block; }
.sk-woo ul.products .woocommerce-loop-product__title {
	font: 600 11px/1.6 'Montserrat', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 14px 0 2px;
	color: var(--bz-ink, #2A2A2A);
}
.sk-woo ul.products .price { font-size: 13.5px; color: var(--bz-ink, #2A2A2A); font-weight: 600; }
.sk-woo ul.products .price del { opacity: .5; margin-right: 6px; }
.sk-woo .onsale {
	position: absolute;
	background: var(--bz-gold, #AA6A04);
	color: #fff;
	font: 700 11px/1 'Montserrat', sans-serif;
	letter-spacing: .1em;
	padding: 7px 12px;
	margin: 12px;
	z-index: 2;
}
.sk-woo ul.products li.product { position: relative; }

/* buttons — the SUBSCRIBE outline language */
.sk-woo .button,
.sk-woo button.button,
.sk-woo .woocommerce-button,
.sk-woo #place_order {
	display: inline-block;
	border: 1px solid var(--bz-slate, #414F4E);
	background: transparent;
	color: var(--bz-slate, #414F4E);
	font: 700 12px/1 'Montserrat', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 15px 26px;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.sk-woo .button:hover,
.sk-woo #place_order:hover { background: var(--bz-slate, #414F4E); color: #fff; }
.sk-woo .button.alt, .sk-woo .single_add_to_cart_button { background: var(--bz-slate, #414F4E); color: #fff; }
.sk-woo .button.alt:hover, .sk-woo .single_add_to_cart_button:hover { background: var(--bz-sage-dark, #506C61); border-color: var(--bz-sage-dark, #506C61); }

/* ordering + result count row */
.sk-woo .woocommerce-result-count { float: none; font-size: 13px; color: var(--bz-text-secondary, #666); margin: 0 0 8px; }
.sk-woo .woocommerce-ordering { float: right; margin: -30px 0 26px; }
.sk-woo .woocommerce-ordering select {
	border: 1px solid var(--bz-ink, #2A2A2A);
	background: transparent;
	font: 500 12px/1.3 'Montserrat', sans-serif;
	padding: 9px 12px;
	border-radius: 0;
}

/* The cart used to be styled twice: an early "PLACANJE" block sat here and a
   second, later block redefined every one of the same selectors further down.
   Both applied, the later one won on shared properties and the earlier one
   survived on the rest, which is why the cart behaved differently from what
   either block said on its own. The single owner is now the consolidated
   `CART PAGE` block below — search for `sk-cart-page`. */


/* ===== checkout per Checkout design ===== */
.sk-woo form.checkout label { font: 600 11px/1.4 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bz-ink, #2A2A2A); }
.sk-woo form.checkout h3 { font: 400 20px/1.3 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sk-woo #order_review_heading { font: 400 20px/1.3 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sk-woo #order_review { border: 1px solid var(--bz-sage, #728988); background: #fff; padding: 24px; }
.sk-woo #place_order { background: var(--bz-sage-dark, #506C61); border-color: var(--bz-sage-dark, #506C61); color: #fff; width: 100%; }
.sk-woo #place_order:hover { background: var(--bz-slate, #414F4E); }

/* ===== static templates (story / new / contact / collections) ===== */
.sk-main { background: var(--bz-cream, #F4F1ED); }
.sk-sage-title { color: var(--bz-sage, #728988); font: 900 clamp(24px, 2.6vw, 40px)/1.15 'Montserrat', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.sk-twotone { font: 900 clamp(34px, 4vw, 56px)/1.1 'Montserrat', sans-serif; letter-spacing: .04em; margin: 0 0 26px; }
.sk-twotone .t-light { color: #fff; text-shadow: 0 0 1px rgba(0,0,0,.06); }
.sk-twotone .t-sage { color: var(--bz-sage, #728988); }

.sk-story-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; }
.sk-story-photo { background-size: cover; background-position: center; }
.sk-story-intro { padding: clamp(40px, 8vw, 120px); display: flex; flex-direction: column; justify-content: center; }
.sk-story-intro p { max-width: 460px; line-height: 1.75; }
.sk-story-belief { padding: 90px 8vw 70px; }
.sk-story-belief h2 { color: #CFC5B8; font: 900 clamp(22px, 2.4vw, 34px)/1.35 'Montserrat', sans-serif; text-transform: uppercase; max-width: 560px; margin: 0; }
.sk-story-band { height: 56vh; background-size: cover; background-position: center; }
.sk-story-values { padding: 100px 8vw; max-width: 900px; margin-left: auto; }
.sk-story-values p { max-width: 440px; line-height: 1.8; font-weight: 600; }
.sk-special { text-align: center; padding: 60px 24px 90px; }
.sk-checks { list-style: none; margin: 40px auto 0; padding: 0; max-width: 640px; text-align: left; }
.sk-checks li { padding: 10px 0 10px 44px; position: relative; font-size: 16.5px; font-weight: 500; }
.sk-checks li::before { content: '\2713'; position: absolute; left: 0; top: 6px; color: var(--bz-sage, #728988); font-size: 24px; font-weight: 700; }
.sk-ingredients { padding: 60px 5vw 110px; }
.sk-ingredients-lead { max-width: 420px; font-size: 15.5px; margin-bottom: 46px; }
.sk-ingredient-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sk-ingredient-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
.sk-ingredient { border: 1px solid var(--bz-slate, #414F4E); padding: 22px 18px; background: transparent; }
.sk-ingredient h3 { font: 600 12.5px/1.4 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.sk-ingredient p { font-size: 11.5px; line-height: 1.7; margin: 0; color: var(--bz-text-secondary, #666); }
@media (max-width: 1000px) { .sk-ingredient-grid { grid-template-columns: repeat(2, 1fr); } .sk-story-hero { grid-template-columns: 1fr; } .sk-story-photo { min-height: 50vh; } }

.sk-page-intro { text-align: center; padding: 80px 24px 30px; }
.sk-page-intro p { color: var(--bz-sage-dark, #506C61); }
.sk-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding: 60px 8vw; }
.sk-feature--flip .sk-feature-img { order: 2; }
.sk-feature-img img { width: 100%; height: auto; display: block; }
.sk-feature-copy p { max-width: 380px; line-height: 1.8; }
.sk-new-products { padding: 40px 8vw 80px; background: var(--bz-cream-soft, #F9F8F7); }
.sk-botanicals { text-align: center; padding: 90px 8vw 120px; }
.sk-botanicals-lead { color: var(--bz-text-secondary, #666); margin-bottom: 50px; }
@media (max-width: 860px) { .sk-feature { grid-template-columns: 1fr; } .sk-feature--flip .sk-feature-img { order: 0; } }

.sk-watermark-head { position: relative; padding: 90px 8vw 20px; }
.sk-watermark { position: absolute; top: 46px; left: 8vw; font: 900 clamp(48px, 7vw, 96px)/1 'Montserrat', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #DDD5C9; z-index: 0; }
.sk-watermark-head .sk-sage-title { position: relative; z-index: 1; margin-top: 52px; }
.sk-contact-store { max-width: 760px; margin: 30px auto 60px; padding: 0 24px; }
.sk-contact-store img { width: 100%; height: auto; display: block; }
.sk-contact-address { font-size: 13px; }
.sk-contact-hours { text-align: center; color: var(--bz-text-muted, #999); font-size: 13px; margin-top: 10px; }
.sk-contact-info { max-width: 520px; margin: 0 auto 70px; padding: 0 24px; line-height: 1.8; }
.sk-contact-form { max-width: 560px; margin: 0 auto; padding: 0 24px 120px; }
.sk-contact-form h2 { font: 700 14px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sk-contact-form textarea, .sk-contact-form input:not(.sk-hp) {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--bz-sage, #728988); background: transparent;
	font: 400 12px/1.5 'Montserrat', sans-serif; letter-spacing: .08em;
	padding: 14px; margin-bottom: 14px;
}
.sk-contact-form button {
	border: 1px solid var(--bz-ink, #2A2A2A); background: transparent;
	font: 700 12px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase;
	padding: 15px 42px; cursor: pointer;
}
.sk-contact-form button:hover { background: var(--bz-ink, #2A2A2A); color: #fff; }
.sk-hp { position: absolute !important; left: -9999px; }
.sk-form-sent { color: var(--bz-sage-dark, #506C61); font-weight: 600; }

.sk-collections-block { text-align: center; padding: 80px 8vw 40px; }
.sk-collections-lead { color: var(--bz-text-secondary, #666); max-width: 460px; margin: 0 auto 46px; }
.sk-collections .products { max-width: 1020px; margin: 0 auto !important; }

/* ===================== single product (product_page.pdf) ================= */
.sk-woo .woocommerce-breadcrumb { margin: 8px 0 26px; }
.sk-woo div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.sk-woo div.product .woocommerce-product-gallery,
.sk-woo div.product div.summary { float: none !important; width: 100% !important; margin: 0 !important; }
.sk-woo div.product .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
.sk-woo div.product div.summary { max-width: 560px; }
@media (max-width: 900px) { .sk-woo div.product { grid-template-columns: 1fr; gap: 30px; } }

.sk-woo div.product .product_title {
	font: 500 20px/1.35 'Montserrat', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bz-ink, #2A2A2A);
}
.sk-woo div.product .woocommerce-product-details__short-description { font-weight: 300; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.7; color: var(--bz-ink, #2A2A2A); }

/* SIZE | quantity | price line + Add to bag */
.sk-woo div.product form.cart { border-top: 1px solid var(--bz-ink, #2A2A2A); padding-top: 20px; margin: 22px 0 8px; }
.sk-pp-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 22px;
	margin-bottom: 18px;
	font-size: 14px;
	width: 100%;
}
.sk-pp-size { letter-spacing: .06em; text-transform: uppercase; justify-self: start; }
.sk-pp-price { margin-left: 0; justify-self: end; text-align: right; font-weight: 600; font-size: 16px; }
.sk-pp-price del { opacity: .5; margin-right: 8px; }
.sk-woo div.product form.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--bz-ink, #2A2A2A); }
.sk-woo div.product form.cart .qty { width: 46px; border: 0; text-align: center; padding: 9px 2px; background: transparent; }
.sk-qty-btn { border: 0; background: transparent; width: 30px; height: 36px; cursor: pointer; font-size: 15px; }
.sk-woo div.product form.cart .single_add_to_cart_button {
	display: block; width: 100%;
	background: transparent; color: var(--bz-ink, #2A2A2A);
	border: 1px solid var(--bz-ink, #2A2A2A);
	font: 400 15px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase;
	padding: 16px;
}
.sk-woo div.product form.cart .single_add_to_cart_button:hover { background: var(--bz-ink, #2A2A2A); color: #fff; }

/* tabs inside summary: underline text row, thin content */
.sk-woo div.product .woocommerce-tabs { margin-top: 26px; }
.sk-woo div.product .woocommerce-tabs ul.tabs { display: flex; gap: 26px; list-style: none; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--bz-ink, #2A2A2A); background: none; }
.sk-woo div.product .woocommerce-tabs ul.tabs::before, .sk-woo div.product .woocommerce-tabs ul.tabs li::before, .sk-woo div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.sk-woo div.product .woocommerce-tabs ul.tabs li,
.sk-woo div.product .woocommerce-tabs ul.tabs li.active {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0;
	padding: 0;
}
.sk-woo div.product .woocommerce-tabs ul.tabs li a { font: 500 12px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 0; color: var(--bz-text-muted, #999); }
.sk-woo div.product .woocommerce-tabs ul.tabs li.active a { color: var(--bz-ink, #2A2A2A); }
.sk-woo div.product .woocommerce-tabs .panel { font-weight: 300; font-size: 12.5px; line-height: 1.8; letter-spacing: .04em; }
.sk-woo div.product .woocommerce-tabs .panel h2:first-of-type { display: none; }

/* certifications */
.sk-pp-certs { margin: 30px 0 0; text-align: center; border-top: 1px solid var(--bz-ink, #2A2A2A); padding-top: 20px; }
.sk-pp-certs h3, .sk-pp-reco h3 { font: 500 12px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 18px; }
.sk-pp-certs-row { display: flex; gap: 22px; justify-content: center; }
.sk-pp-certs-row img { width: 64px; height: 64px; object-fit: contain; }
.sk-cert-stamp {
	width: 64px; height: 64px; border-radius: 50%;
	border: 2px solid #8a9a3b; color: #8a9a3b;
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	font: 700 7.5px/1.25 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase;
	padding: 6px; box-sizing: border-box;
}

/* recommended with — compact editorial upsell from the supplied product comp */
.sk-pp-reco { margin-top: 28px; text-align: left; }
.sk-pp-reco h3 { margin-bottom: 12px; }
.sk-pp-reco-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
	background: var(--bz-cream-soft, #F9F8F7);
	padding: 14px;
	box-sizing: border-box;
}
.sk-pp-reco-thumb { display: block; min-width: 0; }
.sk-pp-reco-thumb img { width: 96px; height: 118px; object-fit: cover; display: block; }
.sk-pp-reco-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 10.5px;
	line-height: 1.45;
}
.sk-pp-reco-title {
	font: 500 11.5px/1.3 'Montserrat', sans-serif;
	letter-spacing: .045em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bz-ink, #2A2A2A);
}
.sk-pp-reco-info p {
	margin: 0;
	font-weight: 300;
	font-size: 9.5px;
	line-height: 1.45;
	color: var(--bz-text-secondary, #666);
}
.sk-pp-reco-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: auto;
	font: 500 9.5px/1.2 'Montserrat', sans-serif;
	letter-spacing: .055em;
	text-transform: uppercase;
}
.sk-pp-reco-price { margin-left: auto; font-weight: 600; white-space: nowrap; }
.sk-pp-reco-add {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--bz-ink, #2A2A2A);
	background: transparent;
	padding: 7px 12px;
	text-align: center;
	font: 500 9.5px/1 'Montserrat', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bz-ink, #2A2A2A);
}
.sk-pp-reco-add:hover { background: var(--bz-ink, #2A2A2A); color: #fff; }
@media (max-width: 480px) {
	.sk-pp-reco-card { grid-template-columns: 82px minmax(0, 1fr); gap: 11px; padding: 11px; }
	.sk-pp-reco-thumb img { width: 82px; height: 105px; }
	.sk-pp-reco-title { font-size: 10.5px; }
	.sk-pp-reco-info p { font-size: 9px; }
}

/* key ingredients band — true viewport width, no clipped right edge */
.sk-pp-keys {
	background: var(--bz-cream-soft, #F9F8F7);
	width: 100vw;
	max-width: 100vw;
	margin: 70px calc(50% - 50vw) 40px;
	padding: 54px 8vw;
	box-sizing: border-box;
}
.sk-pp-keys h2 { font: 600 14px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 34px; }
.sk-pp-keys-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--bz-cream-soft, #F9F8F7); }
.sk-pp-key { padding: 0 34px; border-left: 1px solid rgba(42,42,42,.25); background: var(--bz-cream-soft, #F9F8F7); }
.sk-pp-key:first-child { border-left: 0; padding-left: 0; }
.sk-pp-key h3 { font: 500 12px/1.4 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.sk-pp-key p { font-weight: 300; font-size: 11.5px; line-height: 1.75; margin: 0; color: var(--bz-ink, #2A2A2A); }
@media (max-width: 860px) { .sk-pp-keys-row { grid-template-columns: 1fr; gap: 26px; } .sk-pp-key { border: 0; padding: 0; } }

/* related products row */
.sk-woo .related.products { clear: both; padding-top: 20px; }
.sk-woo .related.products > h2 { display: none; }

/* added-to-cart notice as bordered card (cart_page.pdf) */
.sk-woo .woocommerce-message {
	border: 1px solid var(--bz-ink, #2A2A2A) !important;
	border-top-width: 1px;
	background: #fff;
	text-align: center;
	font: 500 12.5px/1.6 'Montserrat', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 18px 20px !important;
}
.sk-woo .woocommerce-message::before { display: none; }
.sk-woo .woocommerce-message .button { float: none; margin-left: 14px; }

/* ===================== checkout (Checkout.pdf) ==================== */
.sk-woo form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 50px; align-items: start; }
.sk-woo form.checkout #customer_details { width: 100%; }
.sk-woo form.checkout #customer_details .col-1, .sk-woo form.checkout #customer_details .col-2 { float: none; width: 100%; }
.sk-woo form.checkout .sk-order-col { position: sticky; top: 110px; }
.sk-woo form.checkout .form-row { margin-bottom: 14px; }
.sk-woo form.checkout input.input-text, .sk-woo form.checkout textarea, .sk-woo form.checkout select { width: 100%; }
.sk-woo #order_review table.shop_table { border: 0; }
.sk-woo #payment { background: transparent; }
.sk-woo #payment .payment_box { background: var(--bz-cream-soft, #F9F8F7); }
@media (max-width: 980px) { .sk-woo form.checkout { grid-template-columns: 1fr; } .sk-woo form.checkout .sk-order-col { position: static; } }

/* forms (cart, checkout, account) — the newsletter input language */
.sk-woo input.input-text,
.sk-woo textarea.input-text,
.sk-woo select,
.sk-woo .qty {
	border: 1px solid var(--bz-slate, #414F4E);
	background: transparent;
	padding: 13px 14px;
	font: inherit;
	color: inherit;
	border-radius: 0;
}
.sk-woo table.shop_table { border: 1px solid var(--bz-border, #ddd); border-collapse: collapse; }
.sk-woo table.shop_table th, .sk-woo table.shop_table td { border-bottom: 1px solid var(--bz-border, #ddd); padding: 14px 12px; }
.sk-woo table.shop_table th { font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bz-text-secondary, #666); }

.sk-woo .woocommerce-message, .sk-woo .woocommerce-info {
	border-top: 2px solid var(--bz-sage, #728988);
	background: var(--bz-cream, #F4F1ED);
	color: var(--bz-ink, #2A2A2A);
}

/* ===== design-pass 3.5: shop archive + header requests (tema dizajn) ===== */

/* PNG brand logo in the header (bilo-bi-dobro #1) */
.sk-logo .custom-logo { display: block; max-height: 56px; width: auto; }

/* Shop dropdown — white, slightly transparent (bilo-bi-dobro #2) */
.sk-nav .sk-menu { position: relative; }
.sk-nav .sk-menu > li { position: relative; }
.sk-nav .sk-menu .sub-menu {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	min-width: 210px; padding: 14px 0; margin: 0; list-style: none;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(4px);
	box-shadow: 0 14px 34px rgba(20, 24, 22, .10);
	opacity: 0; visibility: hidden; transition: opacity .18s ease;
	z-index: 60;
}
.sk-nav .sk-menu > li:hover > .sub-menu,
.sk-nav .sk-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.sk-nav .sk-menu .sub-menu li { margin: 0; }
.sk-nav .sk-menu .sub-menu a {
	display: block; padding: 10px 22px;
	font: 500 11.5px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A); text-decoration: none; white-space: nowrap;
}
.sk-nav .sk-menu .sub-menu a:hover { background: rgba(80, 108, 97, .08); }

/* Price rail per PDF: ink hairline slider, amounts under the ends, quiet button */
.sk-shop-rail .price_slider_wrapper .ui-slider,
.sk-shop-rail .ui-slider { height: 2px !important; background: #cfc9c0 !important; border: 0 !important; border-radius: 0 !important; margin: 20px 6px 12px !important; }
.sk-shop-rail .ui-slider .ui-slider-range { background: var(--bz-ink, #2A2A2A) !important; border-radius: 0 !important; }
.sk-shop-rail .ui-slider .ui-slider-handle {
	width: 11px !important; height: 11px !important; top: -5px !important;
	background: var(--bz-ink, #2A2A2A) !important; border: 0 !important; border-radius: 50% !important;
	cursor: pointer;
}
.sk-shop-rail .price_slider_amount { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1 'Montserrat', sans-serif; color: var(--bz-ink, #2A2A2A); }
.sk-shop-rail .price_slider_amount .price_label { order: -1; margin-right: auto; }
.sk-shop-rail .price_slider_amount .button {
	background: transparent !important; color: var(--bz-ink, #2A2A2A) !important;
	border: 0 !important; padding: 4px 0 !important;
	font: 700 10.5px/1 'Montserrat', sans-serif !important; letter-spacing: .12em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 3px;
}

/* Loop cards per PDF: no visible button; ADD TO BAG strip slides over the
   photo bottom on hover. Sale badges and result counts are removed in PHP. */
.sk-woo ul.products li.product { overflow: hidden; }
.sk-woo ul.products li.product .sk-loop-media,
.sk-woo ul.products li.product > a.woocommerce-LoopProduct-link { position: relative; display: block; }
.sk-woo ul.products li.product .button,
.sk-woo ul.products li.product .added_to_cart {
	position: absolute; left: 0; right: 0; bottom: 0;
	margin: 0 !important; border: 0 !important;
	background: rgba(80, 108, 97, .82) !important; color: #fff !important;
	text-align: center; padding: 12px 8px !important;
	font: 500 11px/1 'Montserrat', sans-serif !important; letter-spacing: .14em; text-transform: uppercase;
	opacity: 0; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
	z-index: 2;
}
.sk-woo ul.products li.product:hover .button,
.sk-woo ul.products li.product:hover .added_to_cart,
.sk-woo ul.products li.product .button:focus-visible { opacity: 1; transform: none; }
.sk-woo .woocommerce-result-count { display: none !important; }

/* Checkout coupon toggle with a real square that ticks (bilo-bi-dobro #3) */
.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding-left: 0; }
.sk-coupon-check {
	flex: 0 0 22px; width: 22px; height: 22px;
	border: 1px solid var(--bz-sage-dark, #506C61);
	display: inline-flex; align-items: center; justify-content: center;
	color: transparent; font-size: 14px; line-height: 1; cursor: pointer;
	background: #fff;
}
.sk-coupon-check.is-checked { color: var(--bz-sage-dark, #506C61); }
.sk-woo .woocommerce-form-coupon-toggle a.showcoupon {
	font: 600 11px/1.5 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bz-sage-dark, #506C61); text-decoration: none;
}

/* ============ design-pass 3.6 — cart/checkout/search/rail (PDF) ============ */

/* #4 Search + header tools: transparent by default, soft grey on hover */
.sk-tool { background: transparent; border: 0; }
.sk-tool:hover, .sk-tool:focus-visible { background: rgba(0, 0, 0, .06); border-radius: 4px; }

/* #5 Toolbar row above the columns; rail label aligns with image tops */
.sk-shop-toolbar { display: flex; justify-content: flex-end; margin: 0 0 26px; }
.sk-shop-toolbar .woocommerce-ordering { margin: 0; }
.sk-shop-toolbar select.orderby {
	border: 1px solid var(--bz-ink, #2A2A2A); background: #fff; padding: 9px 34px 9px 14px;
	font: 500 11px/1 'Montserrat', sans-serif; letter-spacing: .05em;
}
.sk-shop-rail { padding-top: 0; }
.sk-rail-title { margin: 0 0 14px; font: 600 11.5px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sk-shop-main ul.products { margin-top: 0 !important; }
.sk-shop-main .woocommerce-ordering { display: none; } /* safety if any renders inside */

/* ===========================================================================
   CART PAGE — the single owner of every .sk-cart-* / .sk-summary-* rule
   above the 767px mobile breakpoint. Built to the supplied SHOPPING CART comp.

   Reference values taken from the comp, all in the design tokens:
     panel + card border   #d9d5cd (a lighter sibling of --bz-border)
     checkout bar          --bz-sage-dark  #506C61
     item name             Montserrat 500 (MIDIUM in the annotation)
     price / total         Montserrat 600 (SEMIBOLD)
     headings and rows     Montserrat 400 (REGULAR)
   ======================================================================== */

/* The padding is added to the container width rather than subtracted from it,
   so the cart lines up with the page above it — same reasoning as .sk-footer-in. */
.sk-cart-page {
	width: 100%;
	max-width: calc(var(--bz-container, 1320px) + 48px);
	margin: 0 auto;
	padding: 48px 24px 90px;
}

.sk-cart-title {
	font: 400 30px/1.2 'Montserrat', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 26px;
}

/* Left column flexes, right panel is fixed — the comp gives the summary a
   little under a third of the measure and a small gutter between the two. */
.sk-cart-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 448px;
	gap: 18px;
	align-items: start;
}
.sk-cart-items { min-width: 0; }

/* ------------------------------- item card ------------------------------ */
.sk-cart-card {
	position: relative;
	display: flex;
	gap: 26px;
	align-items: flex-start;
	border: 1px solid #d9d5cd;
	background: var(--bz-white, #fff);
	padding: 16px;
	margin: 0 0 18px;
}
.sk-cart-card:last-of-type { margin-bottom: 0; }

/* The X is a thin, generous glyph in the comp, not a small dense one. */
.sk-cart-remove {
	position: absolute; top: 12px; right: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	font: 300 26px/1 'Montserrat', sans-serif;
	color: var(--bz-ink, #2A2A2A);
	text-decoration: none;
	transition: opacity .18s ease;
}
.sk-cart-remove:hover { opacity: .55; }

.sk-cart-thumb { flex: 0 0 auto; }
.sk-cart-thumb img { width: 124px; height: auto; display: block; }

.sk-cart-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 14px 40px 0 0; /* right pad keeps long names off the X */
}
.sk-cart-name, .sk-cart-name a {
	font: 500 15px/1.45 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
	text-decoration: none;
	margin: 0;
	max-width: 34ch;
}
/* Variation data (the "50ML" in the comp) reads lighter than the name. */
.sk-cart-name .variation,
.sk-cart-name .variation p,
.sk-cart-name dl.variation,
.sk-cart-name .sk-atc-size { font-weight: 300; margin: 0; display: inline; }

.sk-cart-line { display: flex; align-items: center; gap: 26px; margin-top: 26px; }
.sk-cart-line .quantity { margin: 0; }
.sk-cart-line .quantity .qty {
	width: 30px; height: 26px; padding: 0;
	text-align: center;
	border: 1px solid var(--bz-ink, #2A2A2A);
	background: var(--bz-white, #fff);
	font: 400 13px/1 'Montserrat', sans-serif;
	-moz-appearance: textfield;
}
.sk-cart-line .qty::-webkit-outer-spin-button,
.sk-cart-line .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-cart-price { font: 600 22px/1 'Montserrat', sans-serif; }

/* CONTINUE SHOPPING sits centred under the item column in the comp, with the
   chevron tight against the label. UPDATE CART is a quiet secondary action. */
/* Right-aligned, not centred: the action belongs to the edge of the item
   column, in line with the summary panel beside it. UPDATE CART stays to its
   left so the primary action keeps the outer position at every width. */
.sk-cart-actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	margin-top: 30px;
}
.sk-continue {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 14px/1 'Montserrat', sans-serif;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A); text-decoration: none;
}
.sk-continue-arrow { font-size: 17px; line-height: 1; }
/*
 * UPDATE CART is absent from the comp, but WooCommerce needs it: a quantity
 * typed into the box does nothing until this form is submitted. Hiding it
 * outright would silently discard the customer's edit.
 *
 * So it is hidden only while there is nothing to update, and revealed by
 * theme.js the moment a quantity changes. `visibility` rather than `display`
 * keeps CONTINUE SHOPPING from jumping sideways when it appears.
 */
.sk-update-cart {
	background: transparent; border: 0; padding: 0; cursor: pointer;
	font: 400 12px/1 'Montserrat', sans-serif;
	letter-spacing: .06em; text-transform: uppercase;
	color: #8b857b; text-decoration: underline; text-underline-offset: 3px;
	/* Taken out of the flow, not merely hidden. Left in place it still
	   reserved its width, which held CONTINUE SHOPPING a hundred pixels short
	   of the right edge it is supposed to sit on. Absolute keeps the primary
	   action flush and lets this one appear without moving anything. */
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity .18s ease;
}
.sk-cart-page.is-dirty .sk-update-cart { visibility: visible; opacity: 1; }

/* ------------------------------ summary panel --------------------------- */
.sk-cart-summary {
	border: 1px solid #d9d5cd;
	background: var(--bz-white, #fff);
	padding: 24px 24px 0;
	position: sticky;
	top: calc(var(--sk-header-h, 92px) + 20px);
}
/* The comp rules "N ITEMS" off with a dark line and leaves a deliberate gap
   below it — that space is where coupon and shipping rows appear when the
   store enables them, so it is padding rather than a fixed spacer. */
.sk-summary-count {
	font: 500 20px/1 'Montserrat', sans-serif;
	letter-spacing: .02em; text-transform: uppercase;
	margin: 0; padding: 0 0 14px;
	border-bottom: 1px solid var(--bz-ink, #2A2A2A);
}
.sk-summary-row {
	display: flex; justify-content: space-between; align-items: center;
	font: 400 16px/1.4 'Montserrat', sans-serif;
	letter-spacing: .02em; text-transform: uppercase;
	padding: 22px 0;
}
/* The comp's deliberate gap under the N ITEMS rule is a desktop-only
   proportion — on a phone the panel is full-bleed and the same gap reads
   as a rendering fault, so it is scoped rather than global. */
@media (min-width: 768px) {
	.sk-summary-row:first-of-type { padding-top: 78px; }
}
.sk-summary-row .amount { font-weight: 400; font-size: 22px; }
.sk-summary-row + .sk-summary-total { border-top: 1px solid #d9d5cd; }
.sk-summary-total { padding-bottom: 24px; }
.sk-total-box {
	border: 1px solid var(--bz-ink, #2A2A2A);
	padding: 10px 16px;
}
.sk-total-box .amount { font-weight: 600; }

/* The checkout bar is flush with the panel: it spans the full width and sits
   on the bottom edge, so it needs to cancel the panel's side padding. Both the
   bare button and WooCommerce's .wc-proceed-to-checkout wrapper are covered —
   which of the two renders depends on the plugins the store has installed. */
.sk-cart-summary .wc-proceed-to-checkout { margin: 0 -24px; padding: 0; }
/*
 * `.woocommerce` is in every selector for one reason: WooCommerce's own
 * stylesheet paints this button with `.woocommerce a.button.alt` — three
 * classes AND an element — and it loads after the theme. A two- or
 * three-class selector here loses to it and the button comes out purple.
 * Matching its shape and adding one more class wins on specificity alone,
 * which is why none of this needs !important.
 *
 * Transparent by default, filled on hover. Both colours come from the
 * `--bz-sage-dark` token, so Customize -> Global styles -> Colours ->
 * "Brand dark" moves the button with the rest of the brand instead of this
 * one shade being frozen into the stylesheet.
 */
.woocommerce .sk-cart-summary .checkout-button,
.woocommerce .sk-cart-summary a.button.alt,
.woocommerce .sk-cart-summary .wc-proceed-to-checkout .checkout-button,
.sk-cart-summary .checkout-button,
.sk-cart-summary a.button,
.sk-cart-summary .button.alt {
	display: block; width: 100%; margin: 0; border-radius: 0;
	border: 1px solid var(--bz-sage-dark, #506C61);
	background: transparent;
	color: var(--bz-sage-dark, #506C61);
	padding: 20px 10px; text-align: center; text-decoration: none;
	font: 600 17px/1 'Montserrat', sans-serif;
	letter-spacing: .04em; text-transform: uppercase;
	transition: background .18s ease, color .18s ease;
}
/* Only the bare button needs to break out of the padding itself. The `.alt`
   in the selector is not decoration: the shared rule above matches
   `.sk-cart-summary .button.alt` and so carries three classes, and a
   two-class selector here would lose the width to it. */
.woocommerce .sk-cart-summary > a.button.alt,
.sk-cart-summary > .checkout-button.button,
.sk-cart-summary > a.button.alt,
.sk-cart-summary > .checkout-button.wc-forward {
	width: calc(100% + 48px);
	margin-left: -24px;
}
.woocommerce .sk-cart-summary .checkout-button:hover,
.woocommerce .sk-cart-summary a.button.alt:hover,
.woocommerce .sk-cart-summary .checkout-button:focus-visible,
.sk-cart-summary .checkout-button:hover,
.sk-cart-summary a.button:hover {
	background: var(--bz-sage-dark, #506C61);
	color: #fff;
}

/* Between 768px and 1100px the 448px panel leaves the cards too narrow for the
   image + name + price row, so the panel drops under the list. */
@media (max-width: 1100px) {
	.sk-cart-grid { grid-template-columns: 1fr; }
	.sk-cart-summary { position: static; }
}

/* #2 CHECKOUT — Checkout.pdf exactly: beige page, single narrow column,
   caps labels above white bordered inputs, sage section headings, bordered
   YOUR ORDER table with shaded TOTAL, payment box, sage PLACE ORDER right. */
.sk-woo .woocommerce-checkout { max-width: 900px; margin: 0 auto; padding: 46px 24px 90px; }
.sk-woo .woocommerce-checkout h1.entry-title,
.sk-checkout-title { font: 900 34px/1.1 'Montserrat', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.sk-woo form.checkout .col2-set { width: 100%; float: none; }
.sk-woo form.checkout .col2-set .col-1, .sk-woo form.checkout .col2-set .col-2 { width: 100%; float: none; }
.sk-woo .woocommerce-billing-fields > h3,
.sk-woo .woocommerce-additional-fields > h3,
.sk-woo #order_review_heading {
	font: 600 14px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase;
	color: var(--bz-sage-dark, #506C61); margin: 40px 0 18px;
}
.sk-woo form.checkout .form-row { padding: 0; margin: 0 0 18px; }
.sk-woo form.checkout .form-row label {
	display: block; font: 500 10.5px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A); margin: 0 0 7px;
}
.sk-woo form.checkout .form-row-first, .sk-woo form.checkout .form-row-last { width: 48.5%; }
.sk-woo form.checkout .input-text, .sk-woo form.checkout select, .sk-woo form.checkout textarea,
.sk-woo form.checkout .select2-container--default .select2-selection--single {
	width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--bz-sage-dark, #506C61);
	border-radius: 0; padding: 12px 13px; height: auto;
	font: 400 13px/1.4 'Montserrat', sans-serif; color: var(--bz-ink, #2A2A2A);
}
.sk-woo form.checkout ::placeholder { color: #9a948b; }
.sk-woo form.checkout textarea { min-height: 90px; }
/* YOUR ORDER table */
.sk-woo table.woocommerce-checkout-review-order-table { width: 100%; border: 1px solid var(--bz-ink, #2A2A2A); border-collapse: collapse; }
.sk-woo table.woocommerce-checkout-review-order-table th,
.sk-woo table.woocommerce-checkout-review-order-table td {
	border: 0; padding: 15px 18px; font: 400 12.5px/1.4 'Montserrat', sans-serif;
	letter-spacing: .05em; text-transform: uppercase; background: transparent;
}
.sk-woo table.woocommerce-checkout-review-order-table thead th { border-bottom: 1px solid var(--bz-ink, #2A2A2A); font-weight: 600; font-size: 13px; }
.sk-woo table.woocommerce-checkout-review-order-table td.product-total, .sk-woo table.woocommerce-checkout-review-order-table th + td { text-align: right; }
.sk-woo table.woocommerce-checkout-review-order-table .cart-subtotal th, .sk-woo table.woocommerce-checkout-review-order-table .cart-subtotal td { font-weight: 700; }
.sk-woo table.woocommerce-checkout-review-order-table .order-total th, .sk-woo table.woocommerce-checkout-review-order-table .order-total td { background: #dedbd3; font-weight: 700; }
/* payment box */
.sk-woo #payment { background: #fff; border: 1px solid #9aa39d; border-radius: 0; }
.sk-woo #payment ul.payment_methods { border-bottom: 0; padding: 20px 22px; }
.sk-woo #payment .payment_method_title, .sk-woo #payment label { font: 500 13px/1.4 'Montserrat', sans-serif; letter-spacing: .05em; }
.sk-woo #payment div.payment_box { background: transparent; }
.sk-woo #payment div.payment_box::before { display: none; }
.sk-woo #payment .place-order { padding: 18px 0 0; background: transparent; }
.sk-woo .woocommerce-privacy-policy-text p { font: 400 10.5px/1.7 'Montserrat', sans-serif; color: #7d776e; text-align: center; }
.sk-woo #place_order {
	float: right; background: var(--bz-sage-dark, #506C61); color: #fff; border: 0; border-radius: 0;
	padding: 16px 44px; font: 600 13px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
/* coupon */
.sk-woo form.checkout_coupon { border: 0; padding: 0; max-width: 430px; }
.sk-woo form.checkout_coupon .form-row { display: inline-block; vertical-align: top; }
.sk-woo form.checkout_coupon .button {
	background: var(--bz-sage-dark, #506C61); color: #fff; border: 0; border-radius: 0;
	padding: 13px 24px; font: 500 11px/1 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}

/* Builder contact form — matches the PDF boxes (labels live as placeholders) */
.bz-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.bz-form input[type="text"], .bz-form input[type="email"], .bz-form textarea {
	width: 100%; background: transparent; border: 1px solid #8b857b; border-radius: 0;
	padding: 13px 14px; font: 400 11.5px/1.5 'Montserrat', sans-serif; letter-spacing: .06em;
	text-transform: uppercase; color: var(--bz-ink, #2A2A2A);
}
.bz-form ::placeholder { color: #7d776e; }
.bz-form textarea { min-height: 130px; }
.bz-form .bz-hp { position: absolute; left: -9999px; }
.bz-form .bz-btn { align-self: flex-start; border: 1px solid #8b857b; background: transparent; padding: 14px 34px; font: 500 11px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

/* ===== 3.6.1 hotfix: logo size (robust) + page-title handling on cart/checkout ===== */
.sk-header .sk-logo { display: flex; align-items: center; }
.sk-header .custom-logo-link { display: block; line-height: 0; }
.sk-header .custom-logo-link img,
.sk-header img.custom-logo { max-height: 52px !important; width: auto !important; height: auto; }

/* Cart page: our template prints SHOPPING CART — hide the duplicate page title */
body.sk-woo--cart .entry-title, body.sk-woo--cart .wp-block-post-title { display: none; }
/* Checkout page: the page title IS the design's CHECKOUT heading */
body.sk-woo--checkout .entry-title, body.sk-woo--checkout .wp-block-post-title {
	font: 900 34px/1.1 'Montserrat', sans-serif; letter-spacing: .02em; text-transform: uppercase;
	max-width: 900px; margin: 46px auto 0; padding: 0 24px;
}
body.sk-woo--checkout .woocommerce { max-width: 900px; margin: 0 auto; padding: 10px 24px 90px; }

/* ===== 3.6.2 hotfix ===== */
/* .sk-woo box styles are for <main>; on <body> (cart/checkout scope) they
   inset the whole page — neutralize the box, keep only the cream canvas. */
body.sk-woo { max-width: none; margin: 0; padding: 0; background: var(--bz-cream, #F4F1ED); }

/* The PROCEED TO CHECKOUT rule that used to sit here duplicated the one in
   the CART PAGE block above and won on !important alone, so editing the block
   above had no visible effect. Removed; the block above is the only owner. */

/* Logo hard clamp — covers every markup variant the customizer can output */
.sk-header .sk-logo img, .sk-header .custom-logo-link img, .sk-header img.custom-logo,
.sk-logo img { max-height: 52px !important; max-width: 160px !important; width: auto !important; height: auto !important; }

/* ===== 3.6.3 — checkout širina: forme dišu preko cele stranice ===== */
body.sk-woo--checkout .entry-title, body.sk-woo--checkout .wp-block-post-title { max-width: 1200px; }
body.sk-woo--checkout .woocommerce,
.sk-woo .woocommerce-checkout { max-width: 1200px; }
.sk-woo form.checkout .input-text, .sk-woo form.checkout select, .sk-woo form.checkout textarea,
.sk-woo form.checkout .select2-container--default .select2-selection--single { max-width: none; }
.sk-woo form.checkout .woocommerce-billing-fields,
.sk-woo form.checkout .woocommerce-additional-fields { max-width: 640px; }
.sk-woo form.checkout .form-row-wide { width: 100%; }
.sk-woo table.woocommerce-checkout-review-order-table { max-width: none; }

/* ===== 3.6.4 — ADD TO BAG pinned to the photo bottom (design 241) ===== */
.sk-woo ul.products li.product .sk-loop-media { position: relative; overflow: hidden; display: block; margin: 0 0 12px; }
.sk-woo ul.products li.product .sk-loop-media img { display: block; width: 100%; height: auto; margin: 0; }
.sk-woo ul.products li.product .sk-loop-media .button,
.sk-woo ul.products li.product .sk-loop-media .added_to_cart {
	position: absolute; left: 0; right: 0; bottom: 0; top: auto;
}

/* ===== 3.6.8 — builder stays in control =====
   The theme must NEVER override builder layout with !important: per-node
   styles (#bz-content .bz-nXXXX, specificity 1-1-0) are the strongest layer
   so everything remains editable from the Bluerizon inspector. The theme only
   ships editable-by-builder defaults below. Requires Bluerizon >= 1.9.1
   (older plugin CSS centered section content — update the plugin, do not
   pin layout here). */
.bz-container { width: 100%; }
.bz-form { width: 100%; max-width: 560px; }
.bz-form input[type="text"], .bz-form input[type="email"], .bz-form textarea { width: 100%; }

/* ===== 3.7.0 — SHOP dropdown = full-width translucent panel (Home PDF) ===== */
.sk-nav .sk-menu > li { position: static; }
.sk-nav .sk-menu .sub-menu {
	position: absolute; left: 0; right: 0; top: 100%; transform: none;
	min-width: 0; margin: 0; padding: 34px 8vw 38px;
	display: flex; gap: 64px; align-items: flex-start;
	background: rgba(242, 240, 235, .62);
	backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
	box-shadow: 0 18px 40px rgba(20, 24, 22, .08);
}
.sk-nav .sk-menu .sub-menu li { margin: 0; }
.sk-nav .sk-menu .sub-menu a {
	padding: 6px 0; background: transparent;
	font: 500 11.5px/1.6 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
}
.sk-nav .sk-menu .sub-menu a:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.sk-nav .sk-menu .sub-menu li:first-child a { font-weight: 600; }
/* panel anchors to the header bar */
.sk-header { position: relative; }
.sk-header.sk-header-overlay { position: fixed; left: 0; right: 0; top: 0; }

/* ===== 3.7.1 — dropdown starts at the header's BOTTOM edge ===== */
.sk-nav, .sk-nav .sk-menu, .sk-nav .sk-menu > li { position: static; }
/* (panel keeps position:absolute; its containing block is now .sk-header) */

/* ========================================================================
   3.8.0 - mobile storefront + portable builder product pages
   ======================================================================== */

/* Builder Product elements are real WooCommerce products (SKU-backed), not
   static catalogue pictures. Typography stays neutral and editable through
   the parent node while Woo supplies the live link, title, excerpt and price. */
.bz-product {
	background: transparent;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.22;
	color: var(--bz-ink, #2A2A2A);
}
.bz-product-name {
	font: inherit;
	color: inherit;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-top: 18px;
}
.bz-product-excerpt {
	font-family: inherit;
	font-size: .78em;
	font-weight: inherit;
	line-height: 1.45;
	color: inherit;
	margin-top: 10px;
}
.bz-product-price {
	font-family: inherit;
	font-size: .94em;
	font-weight: inherit;
	line-height: 1.2;
	color: inherit;
	margin-top: 14px;
}

/* Shop toolbar: SHOW + desktop ordering + mobile FILTER trigger. */
.sk-shop-toolbar { align-items: center; gap: 12px; }
.sk-show-control { display: flex; align-items: center; gap: 9px; margin-right: 0; }
.sk-show-control label { font: 300 12px/1 'Montserrat', sans-serif; color: #8b857d; }
.sk-show-control select,
.sk-ordering-mobile select.orderby {
	border: 1px solid #b9b3aa;
	border-radius: 0;
	background: transparent;
	padding: 10px 28px 10px 12px;
	font: 400 12px/1 'Montserrat', sans-serif;
	color: var(--bz-ink, #2A2A2A);
}
.sk-filter-toggle,
.sk-filter-x,
.sk-filter-save { display: none; }
.sk-ordering-mobile { display: none; }
.sk-filter-scrim { display: none; }

/* Existing product categories are dynamic links below the price filter on
   the main /shop archive. Names, counts and destinations remain editable in
   WooCommerce instead of being frozen into the theme. */
.sk-shop-categories { margin-top: 38px; }
.sk-shop-categories ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d1cbc2; }
.sk-shop-categories li { margin: 0; border-bottom: 1px solid #d1cbc2; }
.sk-shop-categories a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 13px 0; text-decoration: none;
	font: 500 11.5px/1.35 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.sk-shop-categories a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sk-shop-categories small { font-size: 10px; font-weight: 400; opacity: .58; }

/* ===========================================================================
   CHECKOUT — tablet (768–1023px)

   The single-column checkout starts at 980px, but the billing group keeps the
   640px cap it was given for the two-column desktop arrangement. Inside a
   ~770px container that cap is not centred, it is simply left-aligned, so at
   820px the form sits noticeably left of the page while the title above it
   runs to the full width — which is the "sve više u levo nego na sredini"
   effect.

   Releasing the cap lets the fields use the container the page has already
   centred, so nothing here positions anything by hand.
   ======================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	body.sk-woo--checkout .woocommerce { padding-left: 40px; padding-right: 40px; }

	.sk-woo form.checkout .woocommerce-billing-fields,
	.sk-woo form.checkout .woocommerce-additional-fields,
	.sk-woo form.checkout_coupon { max-width: none; }

	/* The title used its own 1520px/40px container while the form used
	   1200px/40px, so the two left edges did not line up. One measure for
	   both, taken from the form's. */
	.sk-woo--checkout .sk-title { max-width: 1200px; padding-left: 40px; padding-right: 40px; }

	/* Two fields per row still fit comfortably at this width; the coupon
	   notice and the order table follow the same measure. */
	.sk-woo table.woocommerce-checkout-review-order-table { width: 100%; }
}

/* ===========================================================================
   SHOP FILTERS — off-canvas from the tablet down (<= 1023px)

   These rules used to live inside `@media (max-width: 767px)`, so a tablet got
   the desktop arrangement: a fixed filter rail beside the product grid. At
   820px that rail leaves the products about half the width they need, and the
   price slider, the category list and the grid all fight for the same space.

   The drawer itself was already built and its markup and JS ship on every
   width — only the CSS that revealed it was locked to phones. So this is the
   same panel, opened one breakpoint earlier, rather than a second
   implementation for tablets.

   1023px, not 900px: it is the upper edge the Customizer already calls
   "Tablet", and matching it means a setting made on the tablet preview and the
   layout it is previewing change over at the same width.
   ======================================================================== */
@media (max-width: 1023px) {
	.sk-ordering-desktop { display: none; }
	.sk-filter-toggle {
		display: inline-flex; align-items: center; gap: 12px;
		border: 1px solid #a8a29a; background: transparent; color: var(--bz-ink, #2A2A2A);
		padding: 13px 18px; font: 400 16px/1 'Montserrat', sans-serif; text-transform: uppercase;
	}
	.sk-shop-toolbar { justify-content: flex-end; }
	.sk-shop-layout { display: block; padding: 0; }
	.sk-shop-main { width: 100%; }

	.sk-filter-scrim {
		display: block; position: fixed; inset: 0; z-index: 89;
		background: rgba(20, 20, 18, .28); opacity: 0; visibility: hidden;
		transition: opacity .22s ease, visibility .22s ease;
	}
	.sk-shop-rail {
		position: fixed; z-index: 90; top: 0; right: 0; bottom: 0;
		width: min(78vw, 460px); max-width: none; overflow-y: auto;
		background: #f8f6f2; padding: 76px 34px 112px;
		transform: translateX(105%); transition: transform .25s ease;
		box-shadow: -18px 0 46px rgba(20, 20, 18, .12);
	}
	body.sk-filter-open { overflow: hidden; }
	body.sk-filter-open .sk-shop-rail { transform: translateX(0); }
	body.sk-filter-open .sk-filter-scrim { opacity: 1; visibility: visible; }
	.sk-filter-x {
		display: block; position: absolute; top: 22px; right: 25px;
		border: 0; background: transparent; font: 300 36px/1 'Montserrat', sans-serif; cursor: pointer;
	}
	.sk-ordering-mobile { display: block; margin-bottom: 42px; }
	.sk-ordering-mobile .woocommerce-ordering { float: none; margin: 0; }
	.sk-ordering-mobile select.orderby { width: 100%; padding: 15px; font-size: 14px; }
	.sk-rail-title { margin: 0 0 20px; font-size: 20px; font-weight: 400; text-align: center; letter-spacing: .02em; }
	.sk-price-filter { padding: 0 0 38px; border-bottom: 1px solid #d1cbc2; }
	.sk-shop-rail .price_slider_amount { font-size: 16px; }
	.sk-shop-rail .price_slider_amount .button { display: none; }
	.sk-shop-categories { margin-top: 34px; }
	.sk-shop-categories .sk-rail-title { text-align: left; font-size: 15px; font-weight: 600; }
	.sk-shop-categories a { padding: 15px 0; font-size: 13px; }
	.sk-filter-save {
		display: block; position: fixed; right: 0; bottom: 0; z-index: 91;
		width: min(78vw, 460px); border: 0; background: var(--bz-sage, #829997); color: #fff;
		padding: 22px 15px; font: 400 16px/1.2 'Montserrat', sans-serif;
		letter-spacing: .04em; text-transform: uppercase;
	}

}

@media (max-width: 767px) {
	:root { --sk-header-h: 150px; }

	/* Mobile header geometry lives in ONE place now — the authoritative block
	   at the end of this file. Keeping a second per-mode rule here is what
	   produced three different headers depending on body classes. */
	.sk-header-in { position: relative; padding: 0 28px; gap: 0; justify-content: space-between; }
	.sk-burger { order: 1; display: inline-flex; margin: 0; padding: 4px 0; gap: 7px; }
	.sk-burger span { width: 34px; height: 3px; }
	.sk-logo {
		order: 2; position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%); z-index: 2;
	}
	.sk-header .sk-logo img, .sk-header .custom-logo-link img, .sk-header img.custom-logo,
	.sk-logo img { max-height: 76px !important; max-width: 92px !important; }
	.sk-header-tools { order: 3; margin-left: auto; flex-direction: column-reverse; gap: 13px; align-items: center; }
	.sk-tool svg { width: 30px; height: 30px; stroke-width: 1.45; }
	.sk-cart-count { top: -4px; right: -10px; }
	body:not(.sk-woo--listing-page) .sk-search-toggle { display: none; }
	.sk-search { position: absolute; right: 20px; top: calc(100% - 16px); z-index: 4; }
	.sk-header.sk-search-open .sk-search { width: min(240px, calc(100vw - 40px)); }
	.sk-nav { top: var(--sk-header-h); z-index: 8; padding: 22px 28px 28px; }
	.sk-nav .sk-menu .sub-menu {
		position: static; display: block; opacity: 1; visibility: visible;
		padding: 10px 0 0 18px; background: transparent; box-shadow: none; backdrop-filter: none;
	}
	.sk-nav .sk-menu .sub-menu a { padding: 5px 0; }

	/* Mobile shop/category archive from the Soap Bar/Bestsellers comps. */
	.sk-woo { padding: 0 0 64px; background: var(--bz-cream, #F4F1ED); }
	.sk-shop-hero { padding: 62px 24px 40px; text-align: center; }
	.sk-shop-title { font-size: clamp(37px, 10vw, 52px); line-height: 1; margin-bottom: 18px; }
	.sk-shop-tagline { max-width: 650px; margin: 0 auto; font-size: 16px; line-height: 1.45; font-weight: 600; }
	.sk-shop-toolbar { padding: 0 22px 30px; margin: 0; justify-content: flex-end; }
	.sk-show-control { margin-right: 0; }
	.sk-woo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 52px 10px !important;
		padding: 0 !important;
	}
	.sk-woo ul.products li.product { min-width: 0; margin: 0 !important; }
	.sk-woo ul.products li.product .sk-loop-media { margin-bottom: 14px; }
	.sk-woo ul.products li.product .sk-loop-media img { aspect-ratio: 1 / 1.28; object-fit: cover; }
	.sk-woo ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px !important; line-height: 1.25 !important; padding: 0 14px !important; margin: 0 !important;
	}
	.sk-woo ul.products li.product .price { padding: 0 14px; margin-top: 14px !important; font-size: 16px !important; }
	.sk-woo ul.products li.product .button,
	.sk-woo ul.products li.product .added_to_cart { display: none !important; }

	/* Mobile cart page: horizontal line-separated products, then totals and a
	   full-width sage checkout action, matching the supplied cart comp. */
	.sk-cart-page { max-width: none; padding: 26px 20px 0; background: #fff; }
	.sk-cart-grid { display: block; }
	.sk-cart-title { text-align: center; font-size: 26px; margin: 8px 0 42px; }
	.sk-cart-card {
		display: grid; grid-template-columns: 30% 1fr; gap: 22px;
		border: 0; border-top: 1px solid #bdb8b0; background: transparent;
		padding: 16px 4px 14px; margin: 0;
	}
	.sk-cart-card:last-of-type { border-bottom: 1px solid #bdb8b0; }
	.sk-cart-thumb img { width: 100%; aspect-ratio: 1 / 1.22; object-fit: cover; }
	.sk-cart-info { padding: 12px 28px 0 0; }
	.sk-cart-name, .sk-cart-name a { font-size: 13px; line-height: 1.35; margin: 0 0 20px; }
	.sk-cart-remove { top: 12px; right: 4px; font-size: 24px; font-weight: 200; }
	.sk-cart-line { gap: 20px; }
	.sk-cart-line .quantity .qty { width: 48px; height: 44px; font-size: 16px; }
	.sk-cart-price { font-size: 21px; }
	.sk-cart-actions { margin: 34px 0 130px; }
	.sk-continue { font-size: 16px; }
	.sk-update-cart { display: none; }
	.sk-cart-summary { border: 0; margin: 0 -20px; padding: 0; background: #fff; }
	.sk-summary-count { margin: 0; padding: 28px 74px; border-top: 1px solid #d7d2ca; border-bottom: 1px solid #d7d2ca; font-size: 16px; }
	.sk-summary-row { padding: 34px 74px; font-size: 14px; }
	.sk-summary-row + .sk-summary-total { border-top: 0; }
	.sk-summary-row .amount { font-size: 22px; }
	.sk-total-box { min-width: 142px; text-align: center; padding: 12px 18px; }
	.sk-cart-summary .checkout-button,
	.sk-cart-summary a.button, .sk-cart-summary .button.alt,
	.sk-cart-summary .wc-proceed-to-checkout .checkout-button {
		width: 100% !important; margin: 0 !important; padding: 28px 12px !important;
		font-size: 19px !important;
	}

	/* Builder product cards inherit Typography from the Product node. */
	.bz-product { font-size: 15px; }
	.bz-product-name { font-size: inherit; margin-top: 14px; }
	.bz-product-excerpt { font-size: .8em; margin-top: 8px; }
	.bz-product-price { font-size: 1.06em; margin-top: 12px; }
}

@media (max-width: 480px) {
	.sk-shop-rail, .sk-filter-save { width: 84vw; }
	.sk-shop-rail { padding-left: 26px; padding-right: 26px; }
	.sk-summary-count, .sk-summary-row { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 767px) {
	/* The supplied Bestsellers comp has two half-width cards and one final
	   editorial card across the full row. Apply that only when the archive has
	   exactly three products; larger live catalogues keep the regular grid. */
	body.term-bestsellers .sk-woo ul.products li.product:nth-child(3):last-child { grid-column: 1 / -1; }
	body.term-bestsellers .sk-woo ul.products li.product:nth-child(3):last-child .sk-loop-media img { aspect-ratio: 1 / 1.18; }
}


/* ========================================================================
   3.8.3 - single-product document flow
   WooCommerce renders gallery, summary, key ingredients and related products
   as direct children of div.product. The first 3.8.x grid allowed later blocks
   to occupy the second column beside each other. Keep only the product hero in
   two columns; every section after it spans the complete page width.
   ======================================================================== */
@media (min-width: 901px) {
	body.single-product .sk-woo div.product {
		column-gap: 60px;
		row-gap: 0;
	}
	body.single-product .sk-woo div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
	}
	body.single-product .sk-woo div.product > .summary {
		grid-column: 2;
		grid-row: 1;
	}
}

body.single-product .sk-woo div.product > .sk-pp-keys,
body.single-product .sk-woo div.product > .upsells.products,
body.single-product .sk-woo div.product > .related.products {
	grid-column: 1 / -1;
	min-width: 0;
	box-sizing: border-box;
}
body.single-product .sk-woo div.product > .upsells.products,
body.single-product .sk-woo div.product > .related.products {
	width: 100%;
}

/* The PDF has a single untitled recommendation carousel below Key ingredients.
   The compact Recommended with card already consumes the selected upsell. */
body.single-product .sk-woo div.product > .upsells.products > h2,
body.single-product .sk-woo div.product > .related.products > h2 {
	display: none;
}
body.single-product .sk-woo div.product > .upsells.products,
body.single-product .sk-woo div.product > .related.products {
	clear: both;
	margin: 0;
	padding: 20px 0 0;
}
body.single-product .sk-woo div.product > .upsells.products ul.products,
body.single-product .sk-woo div.product > .related.products ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 48px 32px;
}

@media (max-width: 900px) {
	body.single-product .sk-woo div.product > .woocommerce-product-gallery,
	body.single-product .sk-woo div.product > .summary,
	body.single-product .sk-woo div.product > .sk-pp-keys,
	body.single-product .sk-woo div.product > .upsells.products,
	body.single-product .sk-woo div.product > .related.products {
		grid-column: 1 / -1;
	}

	/*
	 * Once the two columns stack, the summary is the only thing on its row —
	 * but it keeps the 560px cap it was given as a side-by-side column, so on
	 * a tablet it sat hard against the left edge under a full-width photo.
	 * The cap is right; what was missing is that a narrower block alone on a
	 * row should be centred under the image it belongs to.
	 */
	body.single-product .sk-woo div.product > .summary {
		margin-left: auto;
		margin-right: auto;
	}
	body.single-product .sk-woo div.product > .upsells.products ul.products,
	body.single-product .sk-woo div.product > .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	body.single-product .sk-woo div.product > .upsells.products ul.products,
	body.single-product .sk-woo div.product > .related.products ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* ========================================================================
   3.8.4 - live WooCommerce cards in builder editorial pages
   ======================================================================== */
/* Fit-content bestseller filmstrips keep their exact image-height geometry,
   while the name is live WooCommerce data positioned like the old caption. */
.bz-col--auto > .bz-product {
	position: relative;
	display: block;
	height: 100%;
	width: max-content;
	color: inherit;
}
.bz-col--auto > .bz-product .bz-product-media { display: block; height: 100%; overflow: visible; }
.bz-col--auto > .bz-product .bz-product-media img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.bz-col--auto > .bz-product .bz-product-name {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 10px;
	color: inherit;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
}
/* Editorial product rows keep their images stable and links unobtrusive. */
.bz-heading-link { color: inherit; text-decoration: none; }
.bz-heading-link:hover .bz-heading { text-decoration: underline; text-underline-offset: .18em; }

/* ========================================================================
   3.8.5 - mobile commerce and editorial-page finish
   ======================================================================== */

/* The 3.7 desktop mega-menu deliberately made .sk-nav static. Restore an
   actual full-width panel on phones so the opened menu never occupies only
   the remaining flex space beside the logo/bag. */
@media (max-width: 767px) {
	.sk-header { overflow: visible; }
	.sk-nav {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: var(--sk-header-h) !important;
		width: 100% !important;
		max-width: none !important;
		z-index: 80 !important;
		background: rgba(249, 248, 247, .98) !important;
		padding: 24px 30px 30px !important;
		box-shadow: 0 18px 34px rgba(20, 24, 22, .10);
	}
	.sk-nav .sk-menu { width: 100%; }
}

/* Cart and checkout are Woo shortcodes inside page.php. Remove the generic
   page wrapper spacing and the duplicate WordPress page heading. */
body.sk-woo--cart .sk-main.sk-plain,
body.sk-woo--checkout .sk-main.sk-plain {
	max-width: none;
	/*
	 * `padding: 0` used to sit here, and being a shorthand it wiped the top
	 * offset that the rule further down sets for these two pages — so the
	 * cart and the checkout began directly under a fixed header while every
	 * other page reserved room for it. The shorthand is gone; only the three
	 * sides that need zeroing are zeroed, and the top is left to the offset.
	 */
	padding: var(--sk-woo-offset, 9rem) 0 0;
	background: var(--bz-cream, #F4F1ED);
}
body.sk-woo--cart .sk-main.sk-plain > article,
body.sk-woo--checkout .sk-main.sk-plain > article { width: 100%; }
body.sk-woo--cart .sk-title { display: none !important; }
body.sk-woo--cart .woocommerce,
body.sk-woo--checkout .woocommerce { width: 100%; }

/* The real cart is a vertical item list on mobile. It scales to any number of
   products, remains scannable, and matches the supplied line-separated comp. */
@media (max-width: 767px) {
	body.sk-woo--cart { background: var(--bz-cream, #F4F1ED); }
	body.sk-woo--cart .woocommerce-notices-wrapper { padding: 0 20px; }
	.sk-cart-page {
		max-width: none;
		width: 100%;
		padding: 34px 20px 0;
		background: var(--bz-cream, #F4F1ED);
	}
	.sk-cart-title {
		margin: 0 0 34px;
		font-size: 29px;
		font-weight: 400;
		line-height: 1.15;
		letter-spacing: .035em;
		text-align: center;
	}
	.sk-cart-card {
		grid-template-columns: minmax(104px, 31%) minmax(0, 1fr);
		gap: 22px;
		padding: 16px 4px 15px;
	}
	.sk-cart-thumb a { display: block; }
	.sk-cart-thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1.24;
		object-fit: cover;
	}
	.sk-cart-info { min-width: 0; padding: 12px 32px 0 0; }
	.sk-cart-name, .sk-cart-name a {
		font-size: 13px;
		line-height: 1.35;
		letter-spacing: .035em;
		overflow-wrap: anywhere;
	}
	.sk-cart-remove {
		top: 11px;
		right: 4px;
		font-size: 25px;
		font-weight: 300;
	}
	.sk-cart-line { flex-wrap: wrap; gap: 16px 20px; }
	.sk-cart-line .quantity .qty { width: 50px; height: 46px; }
	.sk-cart-price { font-size: 20px; white-space: nowrap; }
	.sk-cart-actions { margin: 36px 0 96px; }
	.sk-continue {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		font-size: 16px;
		line-height: 1;
	}
	.sk-continue-arrow { font-size: 44px; line-height: .65; font-weight: 300; }
	.sk-cart-summary { margin: 0 -20px; }
	.sk-summary-count { padding: 28px 40px; }
	.sk-summary-row { padding: 32px 40px; gap: 20px; }
	.sk-summary-total { background: #fbfaf8; }
	.sk-total-box { min-width: 138px; }
}

@media (max-width: 430px) {
	.sk-cart-page { padding-left: 14px; padding-right: 14px; }
	.sk-cart-card { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
	.sk-cart-info { padding-right: 28px; }
	.sk-cart-name, .sk-cart-name a { font-size: 12px; }
	.sk-cart-price { font-size: 18px; }
	.sk-cart-summary { margin-left: -14px; margin-right: -14px; }
	.sk-summary-count, .sk-summary-row { padding-left: 26px; padding-right: 26px; }
}

/* Mobile checkout follows the supplied two-part design: coupon, billing and
   notes first; order review and payment below. It remains native WooCommerce
   markup, so gateways, validation and extensions keep working. */
@media (max-width: 767px) {
	body.sk-woo--checkout { background: var(--bz-cream, #F4F1ED); }
	body.sk-woo--checkout .sk-title {
		display: block !important;
		margin: 0;
		padding: 48px 22px 42px;
		font: 900 32px/1.1 'Montserrat', sans-serif;
		letter-spacing: .015em;
		text-align: center;
		text-transform: uppercase;
	}
	body.sk-woo--checkout .woocommerce {
		max-width: none;
		margin: 0;
		padding: 0 28px 72px;
	}
	body.sk-woo--checkout .woocommerce-checkout {
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.sk-woo form.checkout { display: block !important; }
	.sk-woo form.checkout #customer_details,
	.sk-woo form.checkout .sk-order-col { width: 100%; }

	/* coupon row */
	.sk-woo .woocommerce-form-coupon-toggle { margin: 0 0 6px; }
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info {
		margin: 0;
		padding: 0;
		gap: 10px;
		font-size: 11px;
		line-height: 1.35;
		color: var(--bz-sage, #728988);
	}
	.sk-coupon-check { width: 54px; height: 54px; flex-basis: 54px; font-size: 22px; }
	.sk-woo .woocommerce-form-coupon-toggle a.showcoupon {
		font-size: 11px;
		line-height: 1.35;
		letter-spacing: .025em;
	}
	.sk-woo form.checkout_coupon {
		display: flex;
		align-items: stretch;
		width: 100%;
		max-width: none;
		margin: 0 0 86px;
		padding: 0;
	}
	.sk-woo form.checkout_coupon > p:first-child { display: none; }
	.sk-woo form.checkout_coupon .form-row { margin: 0; padding: 0; }
	.sk-woo form.checkout_coupon .form-row-first { width: 58% !important; }
	.sk-woo form.checkout_coupon .form-row-last { width: 42% !important; }
	.sk-woo form.checkout_coupon input.input-text {
		height: 72px;
		border-right: 0;
		background: transparent;
		font-size: 15px;
	}
	.sk-woo form.checkout_coupon .button {
		width: 100%;
		height: 72px;
		padding: 0 10px;
		background: var(--bz-sage, #829997);
		font-size: 14px;
		font-weight: 400;
	}

	.sk-woo .woocommerce-billing-fields > h3,
	.sk-woo .woocommerce-additional-fields > h3,
	.sk-woo #order_review_heading {
		margin: 0 0 58px;
		font-size: 24px;
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: .035em;
		text-align: center;
		color: var(--bz-sage, #728988);
	}
	.sk-woo .woocommerce-additional-fields > h3 { margin-top: 76px; }
	.sk-woo form.checkout .form-row { margin-bottom: 28px; }
	.sk-woo form.checkout .form-row label {
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: .025em;
	}
	.sk-woo form.checkout .form-row-first,
	.sk-woo form.checkout .form-row-last { width: calc(50% - 8px) !important; }
	.sk-woo form.checkout .form-row-first { float: left; clear: both; }
	.sk-woo form.checkout .form-row-last { float: right; clear: none; }
	.sk-woo form.checkout .input-text,
	.sk-woo form.checkout select,
	.sk-woo form.checkout textarea,
	.sk-woo form.checkout .select2-container--default .select2-selection--single {
		min-height: 59px;
		padding: 15px 18px;
		border-color: var(--bz-sage, #728988);
		background: transparent;
		font-size: 13px;
	}
	.sk-woo form.checkout textarea { min-height: 185px; }
	.sk-woo form.checkout .woocommerce-additional-fields { margin-bottom: 90px; }

	/* order and payment */
	.sk-woo form.checkout .sk-order-col { position: static; }
	.sk-woo #order_review_heading { margin-bottom: 42px; }
	.sk-woo #order_review { margin: 0 -28px; padding: 0; border: 0; background: transparent; }
	.sk-woo table.woocommerce-checkout-review-order-table { border: 0; }
	.sk-woo table.woocommerce-checkout-review-order-table th,
	.sk-woo table.woocommerce-checkout-review-order-table td {
		padding: 19px 28px;
		font-size: 12px;
		line-height: 1.45;
	}
	.sk-woo table.woocommerce-checkout-review-order-table thead th {
		padding-top: 18px;
		padding-bottom: 18px;
		font-size: 18px;
		font-weight: 500;
	}
	.sk-woo table.woocommerce-checkout-review-order-table .order-total th,
	.sk-woo table.woocommerce-checkout-review-order-table .order-total td {
		background: #dedbd6;
	}
	.sk-woo #payment {
		margin-top: 120px;
		border: 0;
		border-top: 1px solid #9a958d;
		background: #fff;
	}
	.sk-woo #payment ul.payment_methods { padding: 34px 28px; }
	.sk-woo #payment .wc_payment_method > label {
		display: block;
		font-size: 25px;
		font-weight: 400;
		text-align: center;
	}
	.sk-woo #payment div.payment_box {
		margin: 22px 0 0;
		padding: 0;
		font-size: 13px;
		text-align: center;
	}
	.sk-woo #payment .woocommerce-privacy-policy-text { padding: 34px 28px 12px; }
	.sk-woo .woocommerce-privacy-policy-text p { font-size: 11px; text-align: left; }
	.sk-woo #payment .place-order { padding: 0; }
	.sk-woo #place_order {
		float: none;
		width: 100%;
		margin: 0;
		padding: 27px 14px;
		font-size: 20px;
		font-weight: 700;
	}
}

@media (max-width: 430px) {
	body.sk-woo--checkout .woocommerce { padding-left: 20px; padding-right: 20px; }
	.sk-woo #order_review { margin-left: -20px; margin-right: -20px; }
	.sk-woo table.woocommerce-checkout-review-order-table th,
	.sk-woo table.woocommerce-checkout-review-order-table td { padding-left: 20px; padding-right: 20px; }
	.sk-woo form.checkout .form-row-first,
	.sk-woo form.checkout .form-row-last { width: calc(50% - 6px) !important; }
}

/* Contact-form proportions in the supplied mobile page. */
@media (max-width: 767px) {
	.bz-form { width: 100%; max-width: none; gap: 28px; }
	.bz-form input[type="text"], .bz-form input[type="email"], .bz-form textarea {
		padding: 20px 24px;
		font-size: 15px;
		border-color: #6f6a63;
	}
	.bz-form textarea { min-height: 210px; }
	.bz-form .bz-btn {
		align-self: center;
		min-width: 62%;
		padding: 18px 30px;
		font-size: 20px;
		font-weight: 400;
	}
}


/* ========================================================================
   3.8.6 - mobile polish: overflow, search, cart bleed, coupon, contact CTA
   ======================================================================== */
@media (max-width: 767px) {
	/* Builder pages may contain intentionally large editorial type, but no node
	   may make the commercial storefront horizontally scrollable. */
	body.wp-singular #bz-content,
	body.wp-singular .bz-content { max-width: 100%; overflow-x: clip; }
	body.wp-singular .bz-section,
	body.wp-singular .bz-section-inner,
	body.wp-singular .bz-row,
	body.wp-singular .bz-column { min-width: 0; max-width: 100%; }

	/* Search opens as a real full-width row below the header instead of a short
	   underline detached on the right side. */
	.sk-search {
		left: 24px; right: 24px; top: 100%; width: auto !important;
		max-height: 0; opacity: 0; pointer-events: none;
		padding: 0; background: var(--bz-cream-soft, #F9F8F7);
		transition: max-height .2s ease, opacity .18s ease, padding .2s ease;
	}
	.sk-header.sk-search-open .sk-search {
		width: auto !important; max-height: 64px; opacity: 1; pointer-events: auto;
		padding: 10px 0 12px;
	}
	.sk-header.sk-search-open + .sk-main { margin-top: 58px; }
	.sk-search-input { display: block; width: 100%; padding: 8px 2px; }

	/* Cart totals and checkout CTA are true full-bleed blocks, independent of
	   shortcode/article wrapper padding. */
	.sk-cart-summary {
		width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.sk-cart-summary .wc-proceed-to-checkout,
	.sk-cart-summary .checkout-button,
	.sk-cart-summary a.button,
	.sk-cart-summary .button.alt { width: 100% !important; max-width: none !important; }

	/* Woo applies inline display:block while opening the coupon. A body state
	   makes the layout deterministic and keeps the native toggle functional. */
	.sk-coupon-check { display: none !important; }
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info {
		display: block; text-align: center; padding: 0 4px;
		font-size: 12px; line-height: 1.5;
	}
	.sk-woo .woocommerce-form-coupon-toggle a.showcoupon {
		display: inline; margin-left: 4px; font-size: 12px; line-height: 1.5;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(142px, 40%);
		align-items: stretch; gap: 0;
		margin: 18px 0 76px;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon .form-row-first,
	body.sk-coupon-open .sk-woo form.checkout_coupon .form-row-last {
		float: none; clear: none; display: block; width: auto !important;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon input.input-text {
		display: block; width: 100%; min-width: 0; height: 64px;
		border: 1px solid var(--bz-sage, #728988); border-right: 0;
		padding: 0 14px; background: transparent;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon .button {
		display: block; width: 100%; height: 64px; padding: 0 10px;
	}

	/* A primary mobile form action should be easy to tap and line up with the
	   fields above it. */
	.bz-form .bz-btn { align-self: stretch; width: 100%; min-width: 0; }
}

@media (max-width: 430px) {
	body.sk-coupon-open .sk-woo form.checkout_coupon {
		grid-template-columns: minmax(0, 1fr) 132px;
	}
	.sk-header.sk-search-open + .sk-main { margin-top: 54px; }
}

/* ========================================================================
   3.8.7 - narrow-screen titles, native coupon entry, desktop shop toolbar
   ======================================================================== */

/* Keep the product-count selector in the same right-aligned control cluster,
   immediately before WooCommerce ordering. The previous auto margin pushed it
   to the opposite side of the desktop toolbar. */
.sk-shop-toolbar {
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}
.sk-show-control { margin-right: 0; flex: 0 0 auto; }
.sk-ordering-desktop { flex: 0 0 auto; }

/* The demo About/Contact wordmarks originally had only a <=767px override.
   At 768-1023px the 5rem desktop value could therefore overflow a narrow
   browser pane. These node selectors also repair pages already imported on a
   customer site, while the bundled JSON now carries matching tablet styles. */
@media (max-width: 1023px) {
	#bz-content .bz-na0000003,
	#bz-content .bz-nc0000003 {
		box-sizing: border-box;
		max-width: 100%;
		overflow: hidden;
		padding-left: clamp(14px, 4vw, 32px) !important;
		padding-right: clamp(14px, 4vw, 32px) !important;
	}
	#bz-content .bz-na0000001,
	#bz-content .bz-nc0000001 {
		display: block;
		box-sizing: border-box;
		flex: 0 1 auto;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		white-space: nowrap;
	}
}

/* Native WooCommerce coupon UX. No decorative checkbox is injected; the
   reveal link remains the sole control and the opened form is a clean,
   full-width input/action pair. */
.sk-coupon-check { display: none !important; }
.sk-woo .woocommerce-form-coupon-toggle { margin: 0 0 18px; }
.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex !important;
	align-items: baseline;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bz-text-secondary, #666);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}
/* Woo positions this ::before absolutely at `top: 1em`, which was written for
   its own boxed notice with padding. Ours is a flat centred line, so a whole
   em pushes the icon below the text and it prints as a stray mark near the
   logo. Zero puts it on the same line as the words it belongs to. */
.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info::before {
	top: 0;
}
.sk-woo .woocommerce-form-coupon-toggle a.showcoupon {
	display: inline;
	margin: 0;
	color: var(--bz-sage-dark, #506C61);
	font: 600 12px/1.5 'Montserrat', sans-serif;
	letter-spacing: .045em;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sk-woo form.checkout_coupon {
	box-sizing: border-box;
	width: 100%;
	max-width: 620px;
	margin: 18px auto 66px;
	padding: 0;
	border: 0;
	background: transparent;
}
body.sk-coupon-open .sk-woo form.checkout_coupon {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 10px;
}
.sk-woo form.checkout_coupon > p:first-child:not(.form-row) { display: none !important; }
.sk-woo form.checkout_coupon .form-row,
body.sk-coupon-open .sk-woo form.checkout_coupon .form-row-first,
body.sk-coupon-open .sk-woo form.checkout_coupon .form-row-last {
	float: none !important;
	clear: none !important;
	display: block;
	box-sizing: border-box;
	width: auto !important;
	margin: 0;
	padding: 0;
}
body.sk-coupon-open .sk-woo form.checkout_coupon input.input-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 58px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--bz-sage, #728988);
	background: #fff;
	font: 400 14px/1 'Montserrat', sans-serif;
}
body.sk-coupon-open .sk-woo form.checkout_coupon .button {
	display: block;
	box-sizing: border-box;
	width: auto;
	min-width: 180px;
	height: 58px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--bz-sage, #728988);
	background: var(--bz-sage, #829997);
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.sk-woo .woocommerce-form-coupon-toggle { margin-bottom: 14px; }
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info {
		font-size: 12px;
		padding: 0 6px;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon {
		grid-template-columns: minmax(0, 1fr) minmax(145px, 38%);
		gap: 0;
		margin: 14px auto 70px;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon input.input-text {
		height: 60px;
		border-right: 0;
		background: #fff;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon .button {
		width: 100%;
		min-width: 0;
		height: 60px;
		padding: 0 12px;
	}
}

@media (max-width: 480px) {
	body.sk-coupon-open .sk-woo form.checkout_coupon {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon input.input-text {
		border-right: 1px solid var(--bz-sage, #728988);
	}
	body.sk-coupon-open .sk-woo form.checkout_coupon .button {
		width: 100%;
	}
}

/* ========================================================================
   3.8.9 - deterministic Home slide geometry across viewport aspect ratios
   ======================================================================== */

/* BESTSELLERS
   Size the three cards from the smaller practical viewport constraint rather
   than a fixed rem height. This keeps the composition full on short/wide
   screens and prevents giant empty bands on tall screens. */
@media (min-width: 768px) {
	#bz-content #home-bestsellers > .bz-section-inner,
	#bz-content .bz-nd000000c > .bz-section-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: clamp(18px, 3svh, 42px) !important;
	}
	/* NODE-ID CLEANUP — step 3: the bestsellers heading owns its own width.
	   `margin: 0 !important` was removed from here once before, for exactly
	   the reason this note gives: it beat every margin the builder could set.
	   `width: min(92vw, 1440px) !important` was left behind and did the same
	   thing one property over — type 100% into Width on any device and
	   nothing moved, because this line won. The heading then rendered
	   narrower than its container and centred, which reads as a left padding
	   that no setting explains and none can remove.

	   The value itself was right, so it moved into the document as the
	   heading's desktop width rather than being deleted. Same look on a fresh
	   install, and the Width field now works on every device.

	   position/inset/transform stay: they are a reset against a stray
	   absolute position, not a design value, and nothing in the editor
	   competes with them. */
	#bz-content #home-bestsellers .bz-nd0000004,
	#bz-content .bz-nd000000c .bz-nd0000004 {
		position: relative !important;
		inset: auto !important;
		transform: none !important;
	}
	/* EDGE TO EDGE.
	   This used to be width: min(82vw, calc(205svh - 80px), 1440px), which is
	   where the white margins came from — and no builder setting could win,
	   because the rule is !important. The svh term in it was the height guard:
	   narrowing the strip is what kept three 1:1 cards inside a snap slide on
	   short, wide screens. Full width removes that lever, so the guard moves
	   onto the card itself as a max-height further down. Same protection, and
	   the strip now touches both edges at every width. */
	#bz-content #home-bestsellers .bz-nd000000b,
	#bz-content .bz-nd000000c .bz-nd000000b {
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 auto !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		align-items: flex-start !important;
		justify-content: center !important;
		overflow: visible !important;
	}
	#bz-content #home-bestsellers .bz-nd000000b > .bz-col,
	#bz-content .bz-nd000000c .bz-nd000000b > .bz-col {
		flex: 1 1 0 !important;
		width: 33.333333% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0 !important;
	}
	#bz-content #home-bestsellers .bz-product,
	#bz-content .bz-nd000000c .bz-product {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
	}
	#bz-content #home-bestsellers .bz-product-media,
	#bz-content .bz-nd000000c .bz-product-media {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		/* The card is a third of the viewport wide now, so on a short or very
		   wide screen a true square would be taller than the slide and the
		   section's overflow: hidden would cut the bottoms off. Capping the
		   height lets the image crop instead (object-fit: cover below), which
		   costs a strip of empty background and never the product. */
		max-height: calc(100svh - 200px) !important;
		overflow: hidden !important;
	}
	#bz-content #home-bestsellers .bz-product-media img,
	#bz-content .bz-nd000000c .bz-product-media img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: cover !important;
	}
	#bz-content #home-bestsellers .bz-product-name,
	#bz-content .bz-nd000000c .bz-product-name {
		position: static !important;
		display: block !important;
		margin: 10px 8px 0 !important;
	}
}

/* 100% NATURAL — fit is a CONTROL now, not a decision made here.
   This block forced `object-fit: contain`, which letterboxes: the moment the
   viewport aspect stopped matching the artwork's, cream bars appeared at the
   sides. It also made Background -> Zoom useless, because scaling a
   letterboxed image just scales the letterbox with it. The section's own
   Fit / Position / Zoom settings decide, and they travel inline. */
/* When the viewport is taller/narrower than the source image, contain creates
   top/bottom letterboxing. This formula anchors the heading to 36.5% of the
   actual rendered image rather than 36.5% of the viewport. */

/* WHAT MAKES US SPECIAL — one native Icon List, no fragile nested row maths. */






@media (max-width: 767px) {
	#bz-content #home-bestsellers > .bz-section-inner,
	#bz-content .bz-nd000000c > .bz-section-inner { gap: 20px !important; }
	#bz-content #home-bestsellers .bz-product-name,
	#bz-content .bz-nd000000c .bz-product-name { margin: 7px 3px 0 !important; }
	
}

/* ========================================================================
   3.8.10 - edge-to-edge natural art + shared composition container +
            fully builder-authored mobile Home slides
   ======================================================================== */

/* The landscape source is slightly narrower than common 16:7 browser
   viewports. `contain` produced the visible cream bars at both sides; `cover`
   fills the slide and only trims a small, visually empty strip top/bottom. */
/* (the desktop counter-override above went with it) */

/* Heading and bullets now share the SAME responsive row. The list can no
   longer drift left/right independently as viewport width changes. */

/* ===========================================================================
   NODE-ID CLEANUP — step 4: #what-makes-us-special

   76 rules for this one section, spread from line 2503 to 4003 and interleaved
   with other sections. 56 of them changed nothing at all: each had been fully
   shadowed by a later rule, kept alive only by the fact that nobody could tell.
   They are gone. 20 remain, and those 20 are the ones that actually decide how
   the section looks.

   HOW THIS WAS ESTABLISHED, because the first attempt got it wrong:

   The first attempt resolved the cascade in Python — importance, then
   specificity, then order — and rewrote the section from the winners. It
   reported 213 of 213 declarations preserved, and it had broken the mobile
   layout: `display` on the list items flipped from flex to grid, padding went
   from 122px to 0. The specificity function counted `:is()` and `:has()` as
   plain pseudo-classes, so the rules carrying the phone layout were ranked
   below the base ones. The same wrong function ran over both the old and the
   new file, the errors cancelled, and the check passed. A verification that
   shares a bug with the thing it verifies proves nothing.

   The second attempt computes no specificity at all. It deletes one rule, asks
   a real browser for the computed style of EVERY element in the section, and
   keeps the deletion only if nothing moved — then repeats, greedily, with the
   previous deletions already applied. 56 rules survived that test as dead.

   Coverage: 56 elements per width, 47 properties each, at 390, 820 and 1440.
   Those three widths are not a sample: the media queries here break at 767,
   768, 1200 and 1201, and within a single band the cascade does not vary with
   width, so one width per band is the whole space.

   Cross-checked against computed styles measured on the live site before any
   of this: 1551 values compared, 0 differences.
   ======================================================================== */

/* ===========================================================================
   NODE-ID CLEANUP — step 4: #what-makes-us-special loses its !important

   104 !important declarations across the 19 rules that own this section are
   gone. Nothing else about them changed: same selectors, same breakpoints,
   same values, so the section renders exactly as before — verified against a
   computed-style capture of the live site at 390, 820 and 1440.

   Removing them is provably safe here, and that is worth spelling out. Each
   of these selectors carries two ids (`#bz-content #what-makes-us-special`),
   while the builder can only ever write one id and one class
   (`#bz-content .bz-nXXXXXXX`). The lowest specificity left in the group is
   (2 ids, 0 classes), so the theme still wins on specificity alone and the
   !important was doing nothing that the selector was not already doing.

   Which is also the honest limit of this step: the buyer STILL cannot
   override this section from the editor. Two ids beat one id and a class with
   or without !important. Handing control back means lowering the specificity
   and moving these values into the document — a separate step, because that
   one does change what renders and has to be verified value by value.
   ======================================================================== */
#bz-content #what-makes-us-special .bz-nd0000083,
#bz-content .bz-nd0000080 .bz-nd0000083 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: min(86vw, 930px);
	max-width: 930px;
	margin: 0 auto;
	gap: clamp(30px, 6svh, 70px);
}



@media (max-width: 767px) {
	/* The Home comp uses the search underline as part of the mobile chrome.
	   It remains a real product-search form, not decorative builder content. */
	body.sk-snap-mobile { --sk-header-h: 210px; }
	body.sk-snap-mobile .sk-search-toggle { display: inline-flex !important; }
	body.sk-snap-mobile .sk-search {
		display: block !important;
		position: absolute !important;
		left: 48px !important;
		right: 48px !important;
		top: 142px !important;
		width: auto !important;
		overflow: visible !important;
	}
	body.sk-snap-mobile .sk-search-input {
		padding: 8px 48px 9px 4px !important;
		font-size: 17px !important;
		text-align: center !important;
	}
	#bz-content .bz-nd0000101 .bz-slider-track,
	#bz-content .bz-nd0000101 .bz-slide,
	#bz-content .bz-nd0000101 .bz-slide-inner,
	#bz-content .bz-nd0000101 .bz-row,
	#bz-content .bz-nd0000101 .bz-product {
		height: 100% !important;
		min-height: 0 !important;
	}
	#bz-content .bz-nd0000101 .bz-row {
		display: block !important;
		width: 100% !important;
	}
	#bz-content .bz-nd0000101 .bz-product {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}
	#bz-content .bz-nd0000101 .bz-product-media {
		display: block !important;
		width: 100% !important;
		height: calc(100% - 82px) !important;
		background: #d8cec1 !important;
		overflow: hidden !important;
	}
	#bz-content .bz-nd0000101 .bz-product-media img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	#bz-content .bz-nd0000101 .bz-product-name {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 82px !important;
		margin: 0 !important;
		padding: 12px 18px !important;
	}
	#bz-content .bz-nd0000090,
	#bz-content .bz-nd0000093 { display: block !important; }
	#bz-content .bz-nd0000090 .bz-nd0000091 img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: 50% 24% !important;
	}

	/* Shared row keeps title and bullets centred to the same axis on every
	   narrow width. */
	#bz-content #what-makes-us-special .bz-nd0000083,
	#bz-content .bz-nd0000080 .bz-nd0000083 {
		width: min(90vw, 480px);
		max-width: 480px;
		gap: 36px;
	}
}

/* ========================================================================
   3.8.11 - ID-independent Special slide composition
   ========================================================================
   Import/append can legitimately regenerate node IDs. The earlier repair
   still targeted d0000081/d0000082, so the layout silently fell back to the
   base .bz-row horizontal rules on those documents. The public anchor is the
   stable page-level contract and is therefore the correct selector. */

/* Backward compatibility for 3.8.8-3.8.10 documents where Heading and
   Icon List were wrapped in a Row. display:contents removes that layout
   boundary while keeping both nodes fully editable in Layers. */

#bz-content #what-makes-us-special > .bz-section-inner > .bz-heading,
#bz-content #what-makes-us-special > .bz-section-inner > .bz-icon-list,
#bz-content #what-makes-us-special > .bz-section-inner > .bz-row > .bz-heading,
#bz-content #what-makes-us-special > .bz-section-inner > .bz-row > .bz-icon-list {
	/* NODE-ID CLEANUP — step 5: four properties handed back to the editor.
	
	   `align-self: stretch`, `width: 100%`, `max-width: none` and `margin: 0`
	   used to be forced here. The heading and the icon list are both real
	   builder nodes, and the document already sets those four to exactly these
	   values — so this rule was not deciding anything, it was restating the
	   document at a specificity the document could never answer. Typing a
	   width into the editor for either node did nothing, and the reason was
	   invisible: the value shown in the panel was the same one on screen.
	
	   Deleted, the document's own rule applies and the numbers are identical.
	   The difference is that changing them now works.
	
	   What stays is a reset, not a design value: position/inset/transform undo
	   a stray absolute position, box-sizing keeps padding inside the measure,
	   and `flex: 0 0 auto` stops these two from being stretched by the column
	   they sit in. None of those is offered as a control, so none of them is
	   taking anything away. */
	position: relative;
	inset: auto;
	box-sizing: border-box;
	flex: 0 0 auto;
	transform: none;
}

#bz-content #what-makes-us-special > .bz-section-inner > .bz-icon-list,
#bz-content #what-makes-us-special > .bz-section-inner > .bz-row > .bz-icon-list {
	display: grid;
	padding: 0;
	gap: clamp(18px, 2.5svh, 30px);
}
#bz-content #what-makes-us-special .bz-icon-list > li {
	display: grid;
	grid-template-columns: clamp(30px, 2.6vw, 44px) minmax(0, 1fr);
	align-items: center;
	width: 100%;
	min-width: 0;
	gap: clamp(14px, 1.4vw, 24px);
	margin: 0;
}
#bz-content #what-makes-us-special .bz-icon-list > li > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
#bz-content #what-makes-us-special .bz-icon-list .bz-icon {
	display: block;
	width: clamp(30px, 2.6vw, 44px);
	height: clamp(30px, 2.6vw, 44px);
	object-fit: contain;
}

@media (max-width: 767px) {
	
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-icon-list,
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-row > .bz-icon-list {
		gap: 16px;
	}
}

/* ========================================================================
   3.8.12 - exact mobile Home composition + resilient header/snap geometry
   ======================================================================== */

/* The final Home slide is semantic: target its public anchor and, as a
   backward-compatible fallback, the only fullscreen Home section containing
   an Icon List. This survives node-ID regeneration during imports. */
@media (max-width: 767px) {
	/* On real phones the chrome floats over each snap slide, matching the
	   supplied comps. Force it visible even when DevTools reports hover:hover;
	   that was why the menu vanished in responsive inspection mode. */
	:root { --sk-header-h: 112px; }
	body.sk-snap-mobile { --sk-header-h: 112px !important; }
	body.sk-snap-mobile.sk-header-overlay .sk-header,
	body.sk-snap-mobile.sk-header-solid .sk-header {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		height: var(--sk-header-h) !important;
		min-height: var(--sk-header-h) !important;
		z-index: 80 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		border: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		pointer-events: auto !important;
	}
	body.admin-bar.sk-snap-mobile .sk-header { top: 46px !important; }
	body.sk-snap-mobile .sk-header.sk-header-tone-light { color: var(--sk-ink, #fff) !important; }
	body.sk-snap-mobile .sk-header.sk-header-tone-dark { color: var(--sk-ink, #171a18) !important; }
	body.sk-snap-mobile .sk-header.sk-nav-open {
		color: #171a18 !important;
	}
	body.sk-snap-mobile .sk-header-in {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		padding: 0 !important;
	}
	body.sk-snap-mobile .sk-burger {
		position: absolute !important;
		left: 18px !important;
		top: 18px !important;
		z-index: 84 !important;
		display: inline-flex !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 5px !important;
	}
	body.sk-snap-mobile .sk-burger span { width: 28px !important; height: 2px !important; }
	body.sk-snap-mobile .sk-logo {
		position: absolute !important;
		left: 50% !important;
		top: 9px !important;
		z-index: 84 !important;
		transform: translateX(-50%) !important;
	}
	body.sk-snap-mobile .sk-header .sk-logo img,
	body.sk-snap-mobile .sk-header .custom-logo-link img,
	body.sk-snap-mobile .sk-header img.custom-logo {
		display: block !important;
		width: auto !important;
		height: 48px !important;
		max-width: 58px !important;
		max-height: 48px !important;
	}
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-burger span {
		background: var(--sk-ink, currentColor) !important;
	}
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle,
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart {
		color: var(--sk-ink, currentColor) !important;
	}
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-burger span {
		background: var(--sk-ink, currentColor) !important;
	}
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-search-toggle,
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-cart {
		color: var(--sk-ink, currentColor) !important;
	}
	body.sk-snap-mobile .sk-header-tools {
		position: static !important;
		display: block !important;
		margin: 0 !important;
	}
	body.sk-snap-mobile .sk-cart {
		position: absolute !important;
		right: 18px !important;
		top: 16px !important;
		z-index: 84 !important;
	}
	body.sk-snap-mobile .sk-tool svg { width: 25px !important; height: 25px !important; }
	body.sk-snap-mobile .sk-search-toggle {
		position: absolute !important;
		right: 17px !important;
		top: 65px !important;
		z-index: 84 !important;
		display: inline-flex !important;
		padding: 0 !important;
	}
	body.sk-snap-mobile .sk-search {
		position: absolute !important;
		left: 28px !important;
		right: 58px !important;
		top: 64px !important;
		z-index: 83 !important;
		display: block !important;
		width: auto !important;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		overflow: hidden !important;
		padding: 0 !important;
		background: transparent !important;
		pointer-events: none !important;
		transition: opacity .18s ease, max-height .18s ease !important;
	}
	body.sk-snap-mobile .sk-header.sk-search-open:not(.sk-nav-open) .sk-search {
		max-height: 32px !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
		pointer-events: auto !important;
	}
	body.sk-snap-mobile .sk-header.sk-nav-open .sk-search,
	body.sk-snap-mobile .sk-header.sk-nav-open .sk-search-toggle {
		display: none !important;
	}
	body.sk-snap-mobile .sk-search-input {
		display: block !important;
		width: 100% !important;
		height: 28px !important;
		padding: 2px 4px 6px !important;
		border-bottom: 1px solid currentColor !important;
		font-size: 14px !important;
		text-align: center !important;
	}

	/* Full-height mobile menu. It no longer depends on the header's flex width,
	   so it is visible in DevTools emulation and on narrow physical phones. */
	body.sk-snap-mobile .sk-nav {
		position: fixed !important;
		left: 0 !important;
		right: auto !important;
		top: 0 !important;
		z-index: 82 !important;
		display: none !important;
		width: min(78vw, 430px) !important;
		max-width: 430px !important;
		height: 100svh !important;
		max-height: 100svh !important;
		overflow-y: auto !important;
		padding: 118px 28px 36px !important;
		background: rgba(249,248,247,.99) !important;
		color: #171a18 !important;
		box-shadow: 18px 0 34px rgba(20,24,22,.12) !important;
	}
	body.admin-bar.sk-snap-mobile .sk-nav {
		top: 46px !important;
		height: calc(100svh - 46px) !important;
		max-height: calc(100svh - 46px) !important;
	}
	body.sk-snap-mobile .sk-nav.is-open { display: block !important; }
	body.sk-snap-mobile .sk-nav .sk-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100% !important;
	}
	body.sk-snap-mobile .sk-nav .sk-menu > li { border-bottom: 1px solid rgba(30,30,28,.28); }
	body.sk-snap-mobile .sk-nav .sk-menu > li > a {
		display: block !important;
		padding: 17px 0 !important;
		font-size: 18px !important;
		letter-spacing: .03em !important;
	}
	body.sk-snap-mobile .sk-nav .sk-menu .sub-menu {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		padding: 2px 0 14px 18px !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* HERO */
	#bz-content #home-hero > .bz-section-inner,
	#bz-content .bz-nd0000003 > .bz-section-inner {
		padding: 0 !important;
		justify-content: center !important;
		align-items: center !important;
	}

	/* SECTION 3 - mobile bestseller swipe rail. Header is overlaid; title band
	   and slider together consume exactly one snap slide. */
	#bz-content #home-bestsellers > .bz-section-inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		padding: 0 !important;
		gap: 0 !important;
	}
	#bz-content #home-bestsellers > .bz-section-inner > .bz-heading {
		flex: 0 0 auto !important;
		padding: 116px 14px 20px !important;
		margin: 0 !important;
	}
	#bz-content #home-bestsellers .bz-slider {
		flex: 1 1 auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}
	#bz-content #home-bestsellers .bz-slider-track,
	#bz-content #home-bestsellers .bz-slide,
	#bz-content #home-bestsellers .bz-slide-inner,
	#bz-content #home-bestsellers .bz-slide-inner > .bz-row,
	#bz-content #home-bestsellers .bz-product { height: 100% !important; min-height: 0 !important; }
	#bz-content #home-bestsellers .bz-product { display: flex !important; flex-direction: column !important; }
	#bz-content #home-bestsellers .bz-product-media { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
	#bz-content #home-bestsellers .bz-product-name {
		flex: 0 0 78px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 10px 18px !important;
	}

	/* SECTION 4 - inset editorial image, as supplied. */
	#bz-content #home-care { background: var(--bz-cream, #F4F1ED) !important; }


	#bz-content #home-care .bz-heading { z-index: 3 !important; }

	/* SECTION 5 - portrait soap artwork fills edge-to-edge below the transparent
	   fixed chrome, with no contain/letterbox gaps. */


	/* SECTION 8 - story copy, centered under the persistent mobile chrome. */
	#bz-content #home-story-mobile-copy > .bz-section-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 112px 22px 24px !important;
		gap: clamp(34px, 6svh, 54px) !important;
	}
	#bz-content #home-story-mobile-copy .bz-heading { margin: 0 !important; }
	#bz-content #home-story-mobile-copy .bz-text { width: min(92%, 390px) !important; margin: 0 auto !important; }

	/* SECTION 9 - on mobile the supplied design is centered; desktop remains
	   deliberately left-aligned above. */
	
	
	
	
	
	
}

/* ========================================================================
   3.8.14 - user-approved Limited desktop + exact mobile design canvas
   ========================================================================
   The mobile comps were authored at a phone canvas ratio. At widths between
   a real phone and the 767px breakpoint, unrestricted vw values made the live
   page look radically different from the 390px builder canvas. Every mobile
   Home composition now lives in the same max-430px design canvas, centred in
   the viewport. The rules use stable public anchors only, so imports and node
   ID regeneration cannot break them. */

/* User-approved Limited Collection desktop export. The Text element contains
   semantic h1/p children, so reset those descendants explicitly instead of
   allowing global theme heading sizes to inflate them. */
@media (min-width: 768px) {


	/* Unconditional anchor-based left axis. This applies on the live page AND
	   in the builder canvas, whose body class is intentionally different. */
	#bz-content #what-makes-us-special > .bz-section-inner {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 clamp(2rem, 8vw, 8rem);
		gap: clamp(2rem, 5svh, 4.5rem);
	}
	
	
	
}

@media (max-width: 767px) {
	:root { --sk-mobile-design-w: 430px; }

	/* The real header and the builder canvas use the same phone-width axis. */
	body.sk-snap-mobile .sk-header-in {
		width: min(100%, var(--sk-mobile-design-w)) !important;
		max-width: var(--sk-mobile-design-w) !important;
		margin: 0 auto !important;
	}

	/* Stable design canvas for all mobile Home slides. */
	

	/* Full-bleed artwork remains phone-sized at 431-767px instead of scaling
	   typography and crop to a pseudo-tablet width. */


	#bz-content #home-care .bz-heading {
		max-width: 390px !important;
	}

	/* SECTION 4 - 100% Natural: fixed visual coordinate under the 112px chrome,
	   independent of whether the viewport is 360, 390 or DevTools' 650px. */


	/* SECTION 5 - Limited Collection: preserve the user's single editable Text
	   node while making its nested h1/p deterministic on every mobile width. */


	/* SECTION 7 - Story copy. */
	#bz-content #home-story-mobile-copy > .bz-section-inner {
		padding: clamp(8.5rem, 21svh, 10rem) 1.25rem 2rem !important;
		justify-content: flex-start !important;
		gap: clamp(2rem, 5svh, 2.75rem) !important;
	}
	#bz-content #home-story-mobile-copy .bz-text {
		width: min(92%, 390px) !important;
	}

	/* SECTION 8 - Special: exact centered mobile comp, independent of the
	   desktop left axis above. */
	
	
	
	
	
	
}


/* ========================================================================
   3.8.15 - final desktop typography/alignment corrections
   ======================================================================== */
@media (min-width: 768px) {
	/* Hero supporting copy: user-approved desktop dimensions. */
	#bz-content #home-hero > .bz-section-inner > .bz-text {
		width: 28rem !important;
		max-width: calc(100% - 2rem) !important;
	}

	/* Keep the Limited copy block centred as a unit, but align both nested
	   lines to the same left edge. */


	/* A max-content heading cannot appear visually centred even if an older
	   cached generic .bz-heading rule survives. Its left edge is the section's
	   exact content axis, shared with the Icon List. */
	
	
	
}


/* ========================================================================
   3.8.16 - remove the legacy desktop centering lock
   ========================================================================
   The legacy direct-child rule used `text-align:center !important`, which had
   greater specificity than the later anchor-based desktop rule. Keep an exact
   direct-child desktop override as a regression guard for both current and old
   documents that still contain the Row wrapper. */
/* ========================================================================
   3.8.18 - persistent transparent header
   ========================================================================
   Header controls are always present and follow scrolling on snap and normal
   pages. The bar itself stays transparent until pointer hover/focus; mobile
   has no synthetic white bar. Plain pages keep an in-flow spacer so their
   first content is not hidden beneath the fixed chrome. */
.sk-header,
body.sk-header-overlay .sk-header,
body.sk-header-solid .sk-header {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	z-index: 90 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	background: transparent;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
body.admin-bar .sk-header { top: 32px !important; }
body.sk-header-solid .sk-header + .sk-main { margin-top: var(--sk-header-h) !important; }

@media (hover: hover) {
	body .sk-header:hover,
	body .sk-header:focus-within {
		background: rgba(249, 248, 247, .96) !important;
		color: var(--bz-ink, #2A2A2A) !important;
		backdrop-filter: blur(8px) !important;
		box-shadow: 0 1px 0 rgba(42, 42, 42, .08) !important;
	}
}

/* White chrome over dark/image-led Home slides; dark chrome over cream/light
   slides and ordinary pages. Hover/focus always switches to dark on cream. */
.sk-header.sk-header-tone-light:not(:hover):not(:focus-within):not(.sk-nav-open) {
	color: var(--sk-ink, #fff) !important;
}
.sk-header.sk-header-tone-dark:not(:hover):not(:focus-within):not(.sk-nav-open),
body.sk-header-solid .sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) {
	color: var(--sk-ink, currentColor) !important;
}

@media (max-width: 782px) {
	body.admin-bar .sk-header { top: 46px !important; }
}
@media (max-width: 767px) {
	/* Override the older non-snap mobile solid bar: fixed and transparent now. */
	body.sk-header-overlay .sk-header,
	body.sk-header-solid .sk-header {
		background: transparent;
		box-shadow: none !important;
		border: 0 !important;
	}
	body.sk-header-solid .sk-header + .sk-main { margin-top: var(--sk-header-h) !important; }
	body.sk-header-solid .sk-header.sk-search-open + .sk-main {
		margin-top: calc(var(--sk-header-h) + 58px) !important;
	}
}


/* ========================================================================
   3.8.19 - exact supplied mobile artwork + wide-mobile viewport parity
   ========================================================================
   The previous phone composition was intentionally capped at 430px. That
   made a 431-767px responsive viewport render a small phone island inside a
   larger mobile page, and an absolutely-positioned replaced image kept its
   intrinsic square height in Complete Care. Mobile now uses the full CSS
   viewport width at every width below the tablet breakpoint, while preserving
   the same 12px editorial inset on Complete Care. */
@media (max-width: 767px) {
	:root { --sk-mobile-design-w: 100vw !important; }

	body.sk-snap-mobile .sk-header-in {
		width: 100% !important;
		max-width: none !important;
	}

	#bz-content #home-hero > .bz-section-inner,
#bz-content #home-bestsellers > .bz-section-inner,
#bz-content #home-care > .bz-section-inner,
#bz-content #home-natural > .bz-section-inner,
#bz-content #home-limited > .bz-section-inner,
#bz-content #home-story-mobile-copy > .bz-section-inner,
#bz-content #what-makes-us-special > .bz-section-inner {
		width: 100% !important;
		max-width: none !important;
	}


	/* A positioned <img> with top+bottom and height:auto keeps its intrinsic
	   aspect-ratio height. Give it an explicit available height so the supplied
	   square artwork crops vertically and fills the whole snap card. */


	/* Keep labels on the visual mobile axis without scaling them as if a
	   635px-wide responsive viewport were a desktop composition. */
	#bz-content #home-care > .bz-section-inner > .bz-heading {
		left: 50% !important;
		max-width: min(88%, 430px) !important;
	}


}

/* ========================================================================
   3.8.20 - centred Special composition + uniform white header chrome
   ======================================================================== */
@media (min-width: 768px) {
	/* Keep the heading and Icon List left-aligned internally, but centre their
	   shared composition as one compact block in the viewport. */
	
	
	


}

/* The resting header tone no longer changes from slide to slide. Keep every
   control and the logo white; hover/focus still uses the existing cream bar
   and dark chrome, so navigation remains readable when it is interacted with. */
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) {
	color: var(--sk-ink, currentColor) !important;
}
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .sk-burger span {
	background: var(--sk-ink, currentColor) !important;
}
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .sk-search-toggle,
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .sk-cart,
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .sk-menu a {
	color: var(--sk-ink, currentColor) !important;
}


/* ========================================================================
   3.8.21 - full-width Special background, centred left-aligned composition
   ======================================================================== */
@media (min-width: 768px) {
	/* The section and its painted background always span the full viewport. */
	
	

	/* Centre the heading and list as one equal-width composition while keeping
	   every line left-aligned. Their identical width gives them one left edge. */
	
}


/* ========================================================================
   3.8.22 - centre the whole Special composition, not each child separately
   ======================================================================== */
@media (min-width: 768px) {
	/* The painted section stays edge-to-edge. The inner element is the single
	   layout container for the heading + list and is centred with auto margins. */
	
	
	
	
}

/* ========================================================================
   3.8.23 - exact centred Special composition width approved in QA
   ======================================================================== */
@media (min-width: 1201px) {
	/* Keep the section/background edge-to-edge. Centre the complete heading +
	   list composition as one block, while preserving left-aligned content. */
	
}

@media (min-width: 768px) and (max-width: 1200px) {
	/* Prevent the 40rem desktop gutter from over-compressing narrower desktop
	   and tablet canvases while keeping the same centred composition logic. */
	
}


/* ========================================================================
   3.8.24 - phone header: translucent chrome + grouped search/cart controls
   ========================================================================
   On phones the entire header now has one softly translucent cream surface,
   so its chrome remains readable over both pale artwork and photography.
   The magnifier sits immediately to the left of the cart. Its existing search
   field still opens on the second row only after an explicit click. */
@media (max-width: 767px) {
	:root { --sk-header-h: 112px !important; }

	body .sk-header,
	body.sk-header-overlay .sk-header,
	body.sk-header-solid .sk-header,
	body.sk-snap-mobile .sk-header,
	body.sk-snap-mobile.sk-header-overlay .sk-header,
	body.sk-snap-mobile.sk-header-solid .sk-header {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		height: auto !important;
		min-height: var(--sk-header-mobile-h, 60px) !important;
		z-index: 90 !important;
		/* 4.16.1 — was rgba(…, .76) with a 10px backdrop blur: a translucent
		   glass bar over the hero. It reads as unfinished on a phone, where
		   the header is a utility strip rather than part of the artwork, and
		   the !important on every line meant no later rule could correct it.
		   Opaque by default; the translucent overlay is opt-in under
		   Header — mobile. */
		/* Every declaration here is !important, which is why the Customizer
		   options could not touch it: a normal rule loses no matter how late
		   it appears. Routing through custom properties fixes that without
		   unpicking the legacy block — !important applies to the declaration,
		   but a var() resolves afterwards, so setting the variable wins. */
		border: 0 !important;
		/* No hairline by default. The bar floats over the page on a phone and a
		   rule under it reads as a seam across the artwork — visible right
		   through a full-bleed hero. The Customizer control still works: set a
		   border there and --sk-header-mobile-border supplies it. */
		border-bottom: var(--sk-header-mobile-border, 0) !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: var(--sk-header-mobile-blur, none) !important;
		backdrop-filter: var(--sk-header-mobile-blur, none) !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
	body.admin-bar .sk-header,
	body.admin-bar.sk-header-overlay .sk-header,
	body.admin-bar.sk-header-solid .sk-header,
	body.admin-bar.sk-snap-mobile .sk-header {
		top: 46px !important;
	}
	body .sk-header.sk-search-open,
	body .sk-header.sk-nav-open,
	body .sk-header:focus-within {
		background: rgba(249, 248, 247, .92) !important;
		color: #171a18 !important;
	}

	/* One deterministic phone grid: burger / centred logo / search + cart. */
	body .sk-header-in,
	body.sk-snap-mobile .sk-header-in {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body .sk-burger,
	body.sk-snap-mobile .sk-burger {
		position: absolute !important;
		left: 18px !important;
		top: 18px !important;
		z-index: 94 !important;
		display: inline-flex !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 5px !important;
		background: transparent !important;
		border: 0 !important;
	}
	body .sk-burger span,
	body.sk-snap-mobile .sk-burger span,
	body .sk-header:not(.sk-nav-open) .sk-burger span {
		width: 28px !important;
		height: 2px !important;
		/* Same reason as the bar above: !important here meant the Customizer
		   could not recolour the burger at all. The variable resolves after
		   !important is applied, so setting it wins. */
		background: var(--sk-ink, currentColor) !important;
	}
	body .sk-logo,
	body.sk-snap-mobile .sk-logo {
		position: absolute !important;
		left: 50% !important;
		top: 9px !important;
		z-index: 94 !important;
		transform: translateX(-50%) !important;
	}
	body .sk-header .sk-logo img,
	body .sk-header .custom-logo-link img,
	body .sk-header img.custom-logo,
	body.sk-snap-mobile .sk-header .sk-logo img,
	body.sk-snap-mobile .sk-header .custom-logo-link img,
	body.sk-snap-mobile .sk-header img.custom-logo {
		display: block !important;
		width: auto !important;
		height: 48px !important;
		max-width: 58px !important;
		max-height: 48px !important;
	}

	body .sk-header-tools,
	body.sk-snap-mobile .sk-header-tools {
		position: static !important;
		display: block !important;
		margin: 0 !important;
	}
	body .sk-cart,
	body.sk-snap-mobile .sk-cart {
		position: absolute !important;
		right: 18px !important;
		top: 16px !important;
		z-index: 94 !important;
		display: inline-flex !important;
		color: #171a18 !important;
	}
	body .sk-search-toggle,
	body:not(.sk-woo--listing-page) .sk-search-toggle,
	body.sk-snap-mobile .sk-search-toggle {
		position: absolute !important;
		right: 58px !important;
		top: 16px !important;
		z-index: 94 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		color: currentColor !important;
		cursor: pointer !important;
	}
	body .sk-tool svg,
	body.sk-snap-mobile .sk-tool svg {
		width: 25px !important;
		height: 25px !important;
	}

	/* Keep the current second-row search line; only its trigger moved. */
	body .sk-search,
	body.sk-snap-mobile .sk-search {
		position: absolute !important;
		left: 28px !important;
		right: 28px !important;
		top: 66px !important;
		z-index: 93 !important;
		display: block !important;
		width: auto !important;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		overflow: hidden !important;
		padding: 0 !important;
		background: transparent !important;
		pointer-events: none !important;
		transition: opacity .18s ease, max-height .18s ease !important;
	}
	body .sk-header.sk-search-open:not(.sk-nav-open) .sk-search,
	body.sk-snap-mobile .sk-header.sk-search-open:not(.sk-nav-open) .sk-search {
		max-height: 34px !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
		pointer-events: auto !important;
	}
	body .sk-search-input,
	body.sk-snap-mobile .sk-search-input {
		display: block !important;
		width: 100% !important;
		height: 30px !important;
		padding: 2px 4px 7px !important;
		border: 0 !important;
		border-bottom: 1px solid currentColor !important;
		background: transparent !important;
		color: #171a18 !important;
		font-size: 14px !important;
		text-align: center !important;
	}
	body .sk-header.sk-nav-open .sk-search,
	body .sk-header.sk-nav-open .sk-search-toggle,
	body.sk-snap-mobile .sk-header.sk-nav-open .sk-search,
	body.sk-snap-mobile .sk-header.sk-nav-open .sk-search-toggle {
		display: none !important;
	}

	/* The pale surface always uses dark phone chrome, regardless of the active
	   slide tone class or the desktop-wide white-chrome rule. */
	body .sk-header:not(.sk-nav-open),
	body .sk-header.sk-header-tone-light:not(.sk-nav-open),
	body .sk-header.sk-header-tone-dark:not(.sk-nav-open),
	body.sk-header-solid .sk-header:not(.sk-nav-open),
	body.sk-header-overlay .sk-header:not(.sk-nav-open) {
		color: #171a18 !important;
	}
	body .sk-header:not(.sk-nav-open) .sk-search-toggle,
	body .sk-header:not(.sk-nav-open) .sk-cart,
	body .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle,
	body .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart {
		color: currentColor !important;
	}

	/* Fixed mobile chrome needs the same safe content offset on ordinary pages. */
	body.sk-header-solid .sk-header + .sk-main {
		margin-top: var(--sk-header-h) !important;
	}
	body.sk-header-solid .sk-header.sk-search-open + .sk-main {
		margin-top: var(--sk-header-h) !important;
	}
}


/* ========================================================================
   3.8.25 - deterministic dark phone chrome + restored mobile Special slide
   ======================================================================== */
@media (max-width: 767px) {
	/* Phone chrome is intentionally dark on every slide. These selectors match
	   the tone-specific rules exactly, so the scroll observer can no longer
	   turn the logo, burger, search or cart white on selected sections. */
	body .sk-header,
	body.sk-snap-mobile .sk-header,
	body .sk-header.sk-header-tone-light,
	body .sk-header.sk-header-tone-dark,
	body.sk-snap-mobile .sk-header.sk-header-tone-light,
	body.sk-snap-mobile .sk-header.sk-header-tone-dark,
	body .sk-header.sk-nav-open,
	body.sk-snap-mobile .sk-header.sk-nav-open {
		color: var(--sk-ink, #171a18) !important;
	}
	body .sk-header .sk-burger span,
	body.sk-snap-mobile .sk-header .sk-burger span,
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-burger span,
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-burger span {
		background: var(--sk-ink, currentColor) !important;
	}
	body .sk-header .sk-search-toggle,
	body .sk-header .sk-cart,
	body .sk-header .sk-menu a,
	body.sk-snap-mobile .sk-header .sk-search-toggle,
	body.sk-snap-mobile .sk-header .sk-cart,
	body.sk-snap-mobile .sk-header .sk-menu a,
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle,
	body.sk-snap-mobile .sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart,
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-search-toggle,
	body.sk-snap-mobile .sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-cart {
		color: currentColor !important;
	}
	body .sk-header .sk-search-input,
	body.sk-snap-mobile .sk-header .sk-search-input {
		color: #171a18 !important;
		border-bottom-color: rgba(23, 26, 24, .65) !important;
	}

	/* Restore the approved mobile composition independently of every desktop
	   max-width/alignment correction. The section remains full bleed; only the
	   heading/list composition is constrained and centred. */
	#bz-content #what-makes-us-special,
	#bz-content .bz-nd0000080 {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		min-height: 100svh;
		margin: 0;
		background: var(--bz-cream, #F4F1ED);
		overflow: hidden;
	}
	#bz-content #what-makes-us-special > .bz-section-inner,
	#bz-content .bz-nd0000080 > .bz-section-inner {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: calc(var(--sk-header-h) + .65rem) 1.25rem 1.5rem;
		gap: clamp(1.25rem, 3.8svh, 1.9rem);
	}
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-row,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-row {
		display: contents;
	}
	
	
	#bz-content #what-makes-us-special .bz-icon-list > li,
	#bz-content .bz-nd0000080 .bz-icon-list > li,
	#bz-content #what-makes-us-special .bz-nd0000082 > li,
	#bz-content .bz-nd0000080 .bz-nd0000082 > li {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 0;
		gap: .42rem;
	}
	#bz-content #what-makes-us-special .bz-icon-list .bz-icon,
	#bz-content .bz-nd0000080 .bz-icon-list .bz-icon,
	#bz-content #what-makes-us-special .bz-nd0000082 .bz-icon,
	#bz-content .bz-nd0000080 .bz-nd0000082 .bz-icon {
		display: block;
		flex: 0 0 auto;
		width: 27px;
		height: 27px;
		margin: 0 auto;
		object-fit: contain;
	}
	#bz-content #what-makes-us-special .bz-icon-list > li > span,
	#bz-content .bz-nd0000080 .bz-icon-list > li > span,
	#bz-content #what-makes-us-special .bz-nd0000082 > li > span,
	#bz-content .bz-nd0000080 .bz-nd0000082 > li > span {
		display: block;
		width: 100%;
		max-width: 20rem;
		margin: 0 auto;
	}
}

/* ========================================================================
   3.8.26 - deterministic desktop Special composition centering
   ========================================================================
   Older corrective layers used a mixture of physical margins and
   margin-inline. Some browsers kept the earlier margin-left:0 !important,
   leaving the approved composition pinned to the left. Use an explicit
   physical auto-margin pair and an explicit calculated width as the final
   desktop authority. The section/background itself remains full width. */
@media (min-width: 1201px) {
	body.home #bz-content #what-makes-us-special > .bz-section-inner,
	body.home #bz-content .bz-nd0000080 > .bz-section-inner {
		box-sizing: border-box;
		width: calc(100% - 40rem);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		align-items: flex-start;
	}
}
@media (min-width: 768px) and (max-width: 1200px) {
	body.home #bz-content #what-makes-us-special > .bz-section-inner,
	body.home #bz-content .bz-nd0000080 > .bz-section-inner {
		box-sizing: border-box;
		width: calc(100% - 10rem);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		align-items: flex-start;
	}
}


/* ========================================================================
   3.8.27 - Special composition + Bluerizon layout-engine parity
   ========================================================================
   The section/background remains full bleed. Only the content composition is
   constrained and centred. This is intentionally not body.home-scoped, so
   the Bluerizon canvas and the visitor page render the exact same geometry. */
@media (min-width: 1201px) {
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-row,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-row,
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-heading,
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-icon-list,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-heading,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-icon-list {
		width: calc(100% - 40rem);
		max-width: none;
	}
}
@media (min-width: 768px) and (max-width: 1200px) {
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-row,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-row,
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-heading,
	#bz-content #what-makes-us-special > .bz-section-inner > .bz-icon-list,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-heading,
	#bz-content .bz-nd0000080 > .bz-section-inner > .bz-icon-list {
		width: calc(100% - 10rem);
		max-width: none;
	}
}


/* ========================================================================
   3.8.29 — stable desktop Shop hover corridor
   ========================================================================
   The submenu is positioned at the bottom edge of the whole header. The
   top-level menu item used to be only as tall as its text, leaving a dead
   strip between SHOP and the panel; crossing that strip removed :hover and
   closed the submenu. Make the navigation/item hit area span the complete
   header height so the pointer can travel into the dropdown without a gap. */
@media (min-width: 901px) {
	.sk-header .sk-nav,
	.sk-header .sk-menu,
	.sk-header .sk-menu > li,
	.sk-header .sk-menu > li > a {
		height: 100%;
	}
	.sk-header .sk-nav {
		display: flex;
		align-items: stretch;
	}
	.sk-header .sk-menu {
		width: 100%;
		align-items: stretch;
	}
	.sk-header .sk-menu > li {
		display: flex;
		align-items: stretch;
	}
	.sk-header .sk-menu > li > a {
		display: flex;
		align-items: center;
	}
	.sk-header .sk-menu .sub-menu {
		top: 100%;
		pointer-events: none;
	}
	.sk-header .sk-menu > li:hover > .sub-menu,
	.sk-header .sk-menu > li:focus-within > .sub-menu {
		pointer-events: auto;
	}
}

/* ========================================================================
   3.8.32 — product-page finishing pass
   ======================================================================== */
body.single-product { overflow-x: clip; }
@media (max-width: 560px) {
	.sk-pp-line { column-gap: 10px; font-size: 12px; }
	.sk-pp-price { font-size: 14px; }
	.sk-woo div.product form.cart .qty { width: 38px; }
	.sk-qty-btn { width: 28px; }
	.sk-pp-keys { padding-left: 24px; padding-right: 24px; }
}


/* ========================================================================
   4.0.0 — checkout two-column layout, category rail, page titles
   Implements: Checkout.pdf, Bestsellers.pdf, limited collection.pdf,
               soap bar.pdf
   ======================================================================== */

/* --- checkout -----------------------------------------------------------
   form-checkout.php now wraps the heading + review panel in .sk-order-col,
   so form.checkout has exactly two grid children. Without that wrapper the
   heading occupied the right column and the table wrapped to a new row. */

.sk-woo--checkout .sk-main.sk-plain { max-width: none; padding: 0; }

.sk-woo--checkout .sk-title,
.sk-woo--cart .sk-title {
	max-width: 1520px;
	margin: 0 auto;
	padding: 46px 40px 0;
	font: 900 34px/1.1 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
}

.sk-order-col { min-width: 0; }

.sk-woo form.checkout .sk-order-col > #order_review_heading { margin: 0 0 14px; }

/* Order table header row — "PRODUCT / SUBTOTAL" per the design. */
.sk-woo table.woocommerce-checkout-review-order-table thead th {
	font: 600 11px/1.4 'Montserrat', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bz-ink, #2A2A2A);
}
.sk-woo table.woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
.sk-woo table.woocommerce-checkout-review-order-table td { padding: 12px 14px; border-bottom: 1px solid #e3ded6; font-size: 13px; }
.sk-woo table.woocommerce-checkout-review-order-table td:last-child,
.sk-woo table.woocommerce-checkout-review-order-table tfoot th + td,
.sk-woo table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.sk-woo table.woocommerce-checkout-review-order-table tfoot th {
	padding: 12px 14px;
	text-align: left;
	font: 600 11px/1.4 'Montserrat', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sk-woo table.woocommerce-checkout-review-order-table tfoot .order-total th,
.sk-woo table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: 1px solid var(--bz-ink, #2A2A2A);
	font-weight: 700;
}

/* Payment box — "PAY BY CARD" and the gateway's own fields (instalment
   selector included) render inside .payment_box; keep it visually attached. */
.sk-woo #payment { background: transparent; border-radius: 0; margin-top: 26px; }
.sk-woo #payment ul.payment_methods {
	border: 1px solid #e3ded6;
	border-bottom: 0;
	padding: 18px;
	margin: 0;
	list-style: none;
	background: #fff;
}
.sk-woo #payment ul.payment_methods li { margin: 0 0 8px; }
.sk-woo #payment ul.payment_methods li:last-child { margin-bottom: 0; }
.sk-woo #payment ul.payment_methods label {
	font: 600 12px/1.4 'Montserrat', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.sk-woo #payment .payment_box {
	background: var(--bz-cream-soft, #F9F8F7);
	border: 0;
	margin: 10px 0 0;
	padding: 14px 16px;
	font-size: 13px;
	color: var(--bz-text-secondary, #666);
}
.sk-woo #payment .payment_box::before { display: none; }
.sk-woo #payment .payment_box select,
.sk-woo #payment .payment_box input.input-text {
	width: 100%;
	margin-top: 8px;
}
.sk-woo #payment .place-order {
	border: 1px solid #e3ded6;
	border-top: 0;
	padding: 18px;
	margin: 0;
	background: #fff;
}
.sk-woo .woocommerce-privacy-policy-text p {
	font-size: 12px;
	line-height: 1.6;
	color: var(--bz-text-secondary, #666);
	margin: 0 0 16px;
}

/* --- category rail ------------------------------------------------------
   Now rendered on category archives too, with the current term marked. */

.sk-shop-categories .sk-all-products {
	display: block;
	padding: 0 0 14px;
	font: 600 12px/1.4 'Montserrat', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
	text-decoration: none;
}
.sk-shop-categories .sk-all-products:hover,
.sk-shop-categories .sk-all-products.is-active { text-decoration: underline; text-underline-offset: 3px; }

.sk-shop-categories li.is-active > a { font-weight: 700; }
.sk-shop-categories li.is-active > a span { text-decoration: underline; text-underline-offset: 3px; }

/* The rail sits above the grid on narrow screens; it is a drawer there, so
   only the spacing needs adjusting. */
@media (max-width: 980px) {
	.sk-shop-categories { margin-top: 26px; }
}

/* Header zones: elements are placed by the Customizer, so the container has
   to lay out an arbitrary sequence rather than three known children. */
.sk-header-divider { width: 1px; height: 18px; background: currentColor; opacity: .28; }
.sk-header-block { display: flex; align-items: center; }
.sk-header-block .bz-section { padding: 0 !important; min-height: 0 !important; }
.sk-account { display: inline-flex; align-items: center; }

/* ========================================================================
   4.15.0 — header builder: rows × zones × device
   Both device arrangements are in the DOM; CSS shows one. Deciding this
   server-side would make the markup device-dependent and break page caching.
   ======================================================================== */

.sk-header-row { width: 100%; }
.sk-header-row--top { font-size: 12px; }

/* Breakpoints match BZ_Style::BP_TABLET (1023) and BP_MOBILE (767), which is
   what the page builder uses — one definition of "tablet" for the whole
   theme. All three arrangements are in the DOM; CSS picks one. */
.sk-header-device { display: none; width: 100%; align-items: center; gap: 16px; }

@media (min-width: 1024px) {
	.sk-header-device--desktop { display: flex; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.sk-header-device--tablet { display: flex; }
}
@media (max-width: 767px) {
	.sk-header-device--mobile { display: flex; }
}

/* Left grows, centre and right size to content — so the centre zone is
   genuinely centred only when the left and right zones balance, which is
   what the arrangement in the builder implies. */
.sk-header-zone { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sk-header-zone--left { flex: 1 1 0; justify-content: flex-start; }
.sk-header-zone--center { flex: 0 1 auto; justify-content: center; }
.sk-header-zone--right { flex: 1 1 0; justify-content: flex-end; }
.sk-header-zone.is-empty { flex: 1 1 0; }

/* An empty centre zone must not steal space from the other two. */
.sk-header-zone--center.is-empty { flex: 0 0 0; }

.sk-header-text { font-size: 12px; letter-spacing: .04em; }
.sk-contact { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.sk-contact-link { text-decoration: none; }
.sk-social { display: flex; align-items: center; gap: 8px; }
.sk-header-btn {
	display: inline-flex; align-items: center; padding: 8px 16px;
	border: 1px solid currentColor; border-radius: 2px;
	font: 600 11px/1 'Montserrat', sans-serif; letter-spacing: .1em;
	text-transform: uppercase; text-decoration: none;
}
.sk-search--inline { position: static; opacity: 1; pointer-events: auto; width: auto; }
.sk-nav--secondary .sk-menu { gap: 14px; }

/* ========================================================================
   4.16.0 — mobile header baseline

   The desktop header is a transparent overlay so the hero video runs edge to
   edge behind it. On a phone that costs a third of the viewport before any
   content appears, for a bar that usually holds a menu icon, a logo and a
   cart. Inheriting the desktop height and overlay there was wrong, not a
   matter of taste — so the compact solid bar is the DEFAULT, and the overlay
   is opt-in under Header — mobile.
   ======================================================================== */

@media (max-width: 849px) {
	:root { --sk-header-mobile-h: 60px; }

	.sk-header { min-height: var(--sk-header-mobile-h); }
	.sk-header-row--main .sk-header-in { min-height: var(--sk-header-mobile-h); padding: 0 18px; }

	.sk-logo img,
	.sk-logo .custom-logo { max-height: 40px; }

	/* The phone header's position and colour are decided ONCE, in the
	   authoritative block at the end of this file. What used to be here — a
	   cream fallback, and an .is-scrolled rule that painted the bar cream
	   unconditionally — is why the header stayed white however many other
	   rules were relaxed: on a snap page the visitor is always "scrolled". */
	body.admin-bar.sk-header-overlay .sk-header { top: 0; }

	/* Secondary rows are rarely wanted on a phone; they still render if the
	   user puts something in them, just tighter. */
	.sk-header-row--top .sk-header-in,
	.sk-header-row--bottom .sk-header-in { min-height: 36px; padding: 0 18px; }

	.sk-header-zone { gap: 10px; }
}

/* ========================================================================
   4.19.0 — footer rows and columns

   The old footer was three fixed blocks. It is now rows of columns, so the
   grid has to size itself from however many columns actually have content —
   an empty column must take no space, or removing an element leaves a hole
   where it used to be.
   ======================================================================== */

.sk-footer-row {
	display: grid;
	/*
	 * Every row lays itself out from its OWN column count, which the renderer
	 * prints inline per row.
	 *
	 * The Column widths template used to be read here. It is emitted once, on
	 * .sk-footer, so every row inherited it — including the closing line and
	 * the wide row, which are one column each. A single-column row on a
	 * four-column template puts everything in the first track: with "Wide
	 * first column" that is 2fr of 5, so the copyright and the note were
	 * crammed into 40% of the footer and `space-between` had nothing to spread
	 * across. The short divider was the same row, the same cause.
	 */
	grid-template-columns: repeat(var(--sk-footer-cols, 3), 1fr);
	gap: 40px;
	align-items: start;
}

/*
 * The Column widths control describes the MENU COLUMNS and nothing else — its
 * label says so, and now the CSS does too.
 *
 * Not applied to the top row, which also offers four zones: a template chosen
 * while arranging the menu columns is a decision about those columns, and
 * quietly governing a different row's contents would be the same leak in a
 * smaller form.
 */
.sk-footer-row--menus {
	grid-template-columns: var(--sk-footer-cols-template, repeat(var(--sk-footer-cols, 3), 1fr));
}

.sk-footer-row--bottom {
	align-items: center;
	gap: 20px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(42, 42, 42, .12);
}

.sk-footer-row + .sk-footer-row { margin-top: var(--sk-footer-row-gap, 48px); }
.sk-footer-row--bottom + .sk-footer-row--bottom { margin-top: 0; }

.sk-footer-zone { min-width: 0; }
/* Centred, matching the hand-written footer. An earlier version right-aligned
   the last column on the theory that a two-column closing line reads as
   left/right — but the design centres it, and the builder must not quietly
   restyle what it replaces. */
/* Centred is the right default — it matches the hand-written footer — but it
   has to be a fallback, not a fixed value. These two rules come after the
   closing-line block above and were beating it, so the alignment control still
   could not move anything. */
.sk-footer-row--bottom { text-align: var(--sk-footer-bottom-align, center); }
.sk-footer-row--bottom .sk-footer-zone { justify-items: var(--sk-footer-bottom-items, center); }

.sk-payments { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Uploaded marks vary wildly in dimensions, so height is fixed and width
   follows — a row of icons at different heights reads as broken. */
.sk-pay { height: 24px; width: auto; display: block; }
.sk-footer-block { min-width: 0; }

@media (max-width: 849px) {
	/* One column on a phone — which is why the footer needs no separate
	   mobile arrangement the way the header does. */
	.sk-footer-row { grid-template-columns: 1fr; gap: 32px; }
	.sk-footer-row + .sk-footer-row { margin-top: 32px; }

}

/* ========================================================================
   WooCommerce notice colours

   Woo ships its own palette for info / success / error notices — a blue that
   belongs to no theme. The icon colour in particular is set on ::before, so
   restyling the notice box alone leaves a blue mark next to it.
   ======================================================================== */

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--bz-sage-dark, #506C61);
}
.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--bz-sage-dark, #506C61);
}

/* Woo's own buttons inside a notice inherit the same blue. */
.woocommerce-info .button,
.woocommerce-message .button {
	background-color: var(--bz-sage-dark, #506C61);
	color: #fff;
}
.woocommerce-info .button:hover,
.woocommerce-message .button:hover {
	background-color: var(--bz-slate, #414F4E);
	color: #fff;
}

.woocommerce-error { border-top-color: #b3261e; }
.woocommerce-error::before { color: #b3261e; }

/* Footer device arrangements — same breakpoints as the header and the page
   builder, so "tablet" means one thing across the whole theme. */
.sk-footer-device { display: none; }
@media (min-width: 1024px) { .sk-footer-device--desktop { display: grid; } }
@media (min-width: 768px) and (max-width: 1023px) { .sk-footer-device--tablet { display: grid; } }
@media (max-width: 767px) { .sk-footer-device--mobile { display: grid; } }

/* Footer logo.
   Its own class rather than .sk-logo: that one is pinned by
   `body .sk-logo { position: absolute !important }`, written for the header
   but scoped document-wide, so a shared class sends the footer logo to the
   top of the page. */
.sk-footer-logo { display: block; }
.sk-footer-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.sk-footer-logo-img { max-height: 56px; width: auto; height: auto; display: block; }
.sk-footer-logo-text {
	font: 900 17px/1 'Montserrat', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Footer copies of shared elements carry their own classes.
   Sharing .sk-tool with the header meant inheriting rules written for the
   mobile header — `body .sk-tool svg { width: 25px !important }` and the
   tone-switching colours — which is the wrong behaviour in a footer. */
.sk-footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sk-footer-social-link { display: inline-flex; text-decoration: none; color: inherit; opacity: .8; }
.sk-footer-social-link:hover { opacity: 1; }
.sk-footer-divider { display: block; width: 100%; height: 1px; background: currentColor; opacity: .18; }
.sk-footer-text { display: block; font-size: 13px; line-height: 1.6; }


/* ========================================================================
   Logo tone — ONE rule, two variables
   ------------------------------------------------------------------------
   Eight rules used to fight over this filter, six of them !important and
   three flatly contradicting each other, which is why the logo flipped to
   black on hover and why the Customizer setting had no effect: at
   (0,2,1) it could never beat (0,6,1)!important.

   Now the stylesheet only supplies a DEFAULT, through a variable:

     --sk-logo-tone          what the theme wants (white over a dark slide)
     --sk-logo-filter        Customizer, resting state — wins over the tone
     --sk-logo-filter-hover  Customizer, hover/focus state

   Nothing here is !important, so Header → Logo always wins.
   ======================================================================== */
/*
 * The logo follows the MEASURED tone and nothing else.
 *
 * This used to also invert for any overlay header without an explicit dark
 * tone — a guess made before theme.js has measured anything. For the first
 * moments of every page load, and on any page where the measurement is
 * unavailable, the logo went white while the burger and the cart were already
 * ink: the mismatch that kept reappearing. One source of truth now, and the
 * unmeasured default is the same ink as everything else.
 */
.sk-header.sk-header-tone-light { --sk-logo-tone: brightness(0) invert(1); }
.sk-header.sk-header-tone-dark  { --sk-logo-tone: none; }

/* Hover / focus state (the resting rule below is more specific). */
.sk-header .sk-logo img,
.sk-header .custom-logo-link img,
.sk-header img.custom-logo {
	filter: var(--sk-logo-filter-hover, var(--sk-logo-filter, none));
	transition: filter .2s ease, background-color .2s ease;
}

/* Resting state. */
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .sk-logo img,
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) .custom-logo-link img,
.sk-header:not(:hover):not(:focus-within):not(.sk-nav-open) img.custom-logo {
	filter: var(--sk-logo-filter, var(--sk-logo-tone, none));
}



/* ===========================================================================
   MOBILE HEADER — single authoritative rule
   ---------------------------------------------------------------------------
   Being last is not enough: an earlier rule at (0,4,0) beats a later one at
   (0,2,0), which is exactly how `body.sk-header-overlay .sk-header.is-scrolled`
   kept repainting the bar cream after everything else had been relaxed. So
   this block carries the SAME shape as the rules it replaces — both modes,
   and the scrolled state — and wins on order at equal specificity.

   The header carries no background of its own. A bar is something the owner
   opts into in Customize -> Header -> Bar, not something the theme imposes on
   every phone.
   ======================================================================== */
@media (max-width: 767px) {
	body.sk-header-overlay .sk-header,
	body.sk-header-solid .sk-header,
	body.sk-header-overlay .sk-header.is-scrolled,
	body.sk-header-solid .sk-header.is-scrolled {
		/* Default floats; picking "Solid" in Customize -> Header -> Bar sets
		   the variable to relative and the bar takes its own space again. */
		position: var(--sk-header-mobile-position, fixed);
		top: 0;
		left: 0;
		right: 0;
		z-index: 80;
		height: var(--sk-header-h);
		background: var(--sk-header-mobile-bg, transparent);
		color: var(--sk-ink, inherit);
		border: 0;
		box-shadow: none;
		backdrop-filter: var(--sk-header-mobile-blur, none);
		overflow: visible;
		pointer-events: auto;
	}
	body.admin-bar.sk-header-overlay .sk-header,
	body.admin-bar.sk-header-solid .sk-header { top: 46px; }

	/* The drawer follows the HEADER's state, not the nav element's.
	   The click handler marks the header open; keying the drawer off the same
	   class means it cannot matter which .sk-nav node the handler happened to
	   find on a page that has more than one. */
	/* Both conditions, deliberately: the header says a drawer is open, and
	   THIS nav is the one that was opened. A header can hold an empty
	   secondary nav, and showing that one is a blank panel sliding in — which
	   reads as "the burger only put a background behind the header". */
	body .sk-header.sk-nav-open .sk-nav.is-open,
	body.sk-snap-mobile .sk-header.sk-nav-open .sk-nav.is-open {
		display: block !important;
		pointer-events: auto !important;
	}
	/* A nav with nothing in it is never a drawer. */
	body .sk-header .sk-nav:not(:has(li)) { display: none !important; }
	body .sk-header .sk-nav { z-index: 82; }
	body .sk-header .sk-burger,
	body .sk-header .sk-tool,
	body .sk-header .sk-logo { pointer-events: auto; }

	/* A fixed header reserves no space, so a document that is not full-height
	   would start underneath it. */
	body:not(.sk-snap-page) .sk-main > .bz-content > .bz-section:first-child:not(.bz-full-height) {
		padding-top: var(--sk-header-h);
	}
}


/* The inner-scroller experiment lived here and is gone. It fixed the height
   maths and broke something far worse: on a real phone the page could not be
   scrolled past the first section at all. A layout bug is a nuisance; a page
   that does not scroll is a dead site. Slides are sized in lvh again — see
   bluerizon.css — which scrolls correctly everywhere and, at worst, hides a
   sliver of a slide while the browser toolbar is showing. */


/* ===========================================================================
   MOBILE DRAWER — its own element, its own rules
   ---------------------------------------------------------------------------
   Rendered by header.php, outside the zone system, so no Customizer layout can
   leave it empty and no legacy .sk-nav rule can hide it. Everything it needs is
   in this one block.
   ======================================================================== */
.sk-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	/* Top-aligned, just under the header. Centring pushed the list toward the
	   middle of a tall phone, which reads as "the menu is sitting too low". */
	justify-content: flex-start;
	gap: 0;
	padding: calc(var(--sk-header-h, 92px) + 0.4rem) 2rem 3rem;
	background: var(--bz-cream-soft, #F4F0EC);
	color: var(--bz-ink, #2A2A2A);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sk-drawer[hidden] { display: none; }

.sk-drawer-close {
	position: absolute;
	top: 1.1rem;
	right: 1.4rem;
	appearance: none;
	border: 0;
	background: none;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--bz-ink, #2A2A2A);
	cursor: pointer;
	padding: .3rem .6rem;
}

.sk-drawer-menu,
.sk-drawer-menu ul { list-style: none; margin: 0; padding: 0; }
.sk-drawer-menu > li { margin: 0 0 2.1rem; }
.sk-drawer-menu > li > a {
	display: block;
	font: 700 1.5rem/1.2 Montserrat, system-ui, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
	text-decoration: none;
}
/* Second level is shown inline: a phone has no hover, so a submenu that only
   opens on hover is a submenu nobody can reach. */
.sk-drawer-menu .sub-menu { margin: 1.1rem 0 0 .9rem; }
.sk-drawer-menu .sub-menu li { margin: 0 0 1rem; }
.sk-drawer-menu .sub-menu a {
	display: block;
	font: 400 .95rem/1.3 Montserrat, system-ui, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bz-ink-soft, #5F5F5F);
	text-decoration: none;
}

/* Desktop keeps its own hover menu; the drawer is a phone and tablet thing. */
@media (min-width: 1024px) { .sk-drawer { display: none !important; } }


/* ===========================================================================
   PHONE: breathing room, legal pages, pagination, product page
   ======================================================================== */
@media (max-width: 767px) {

	/* Every non-builder page started immediately under a fixed header, so a
	   title sat against the logo. Builder documents position their own first
	   section and are left alone. */
	.sk-main.sk-plain,
	.sk-woo {
		padding-top: 2.4rem;
	}
	.sk-main.sk-plain > article > .sk-title:first-child,
	.sk-woo .sk-woo-hero { margin-top: 0; }

	/* ---- the four legal pages share one rule ------------------------------
	   Privacy policy, Delivery, Terms and conditions, Secure payment are all
	   plain pages: centred column, justified body, and side padding so a line
	   never touches the edge of the screen. */
	.sk-main.sk-plain {
		padding-left: 1.4rem;
		padding-right: 1.4rem;
		text-align: center;
	}
	.sk-main.sk-plain > article {
		max-width: 34rem;
		margin: 0 auto;
	}
	.sk-main.sk-plain > article p,
	.sk-main.sk-plain > article li {
		text-align: justify;
		text-justify: inter-word;
		hyphens: auto;
		line-height: 1.85;
	}
	.sk-main.sk-plain > article h1,
	.sk-main.sk-plain > article h2,
	.sk-main.sk-plain > article h3 { text-align: center; }

	/* ---- shop pagination -------------------------------------------------
	   The default pink chips were both hard to read and a small tap target.
	   44px is the accessibility minimum for a finger. */
	.woocommerce-pagination .page-numbers,
	.sk-woo .page-numbers {
		background: transparent;
		border: 1px solid rgba(42, 42, 42, .18);
		border-radius: 6px;
		color: var(--bz-ink, #2A2A2A);
	}
	.woocommerce-pagination .page-numbers li .page-numbers,
	.sk-woo .page-numbers li a,
	.sk-woo .page-numbers li span {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		letter-spacing: .02em;
		background: transparent;
		border-radius: 6px;
	}
	.woocommerce-pagination .page-numbers li .page-numbers.current,
	.sk-woo .page-numbers li .current {
		/* Pale sage from the palette, not the plugin's pink. */
		background: color-mix(in srgb, var(--bz-sage, #718887) 18%, transparent);
		border-color: var(--bz-sage, #718887);
		color: var(--bz-ink, #2A2A2A);
	}

	/* ---- single product --------------------------------------------------
	   Text ran edge to edge, which reads as broken rather than as full-bleed.
	   The gallery keeps the full width; everything else gets a margin. */
	body.single-product .sk-woo .summary,
	body.single-product .sk-woo .woocommerce-tabs,
	body.single-product .sk-woo .related,
	body.single-product .sk-woo .up-sells,
	body.single-product .sk-woo .product_meta,
	body.single-product .sk-woo .woocommerce-breadcrumb,
	body.single-product #bz-content .bz-product-summary,
	body.single-product #bz-content .bz-product-tabs,
	body.single-product #bz-content .bz-product-related {
		padding-left: 1.4rem;
		padding-right: 1.4rem;
	}
	body.single-product .sk-woo .woocommerce-product-gallery { padding: 0; }
}


/* ===========================================================================
   HEADER TONE — on every page, not only the snap home page
   ---------------------------------------------------------------------------
   The tone classes were only painted under body.sk-snap-mobile, so on the shop,
   a legal page or any customer layout the burger and the cart kept whatever
   colour they inherited — white ink on a cream background. theme.js measures
   what is actually behind the bar; these rules are what that measurement does.
   ======================================================================== */
.sk-header.sk-header-tone-light:not(.sk-nav-open) { color: #fff; }
.sk-header.sk-header-tone-dark:not(.sk-nav-open) { color: var(--bz-ink, #2A2A2A); }

.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-burger span { background: var(--sk-ink, #fff); }
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-burger span { background: var(--sk-ink, var(--bz-ink, #2A2A2A)); }

.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle,
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart,
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-nav a { color: #fff; }
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-search-toggle,
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-cart,
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-nav a { color: var(--bz-ink, #2A2A2A); }

/* SVG icons that paint with fill rather than colour. */
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart svg [fill]:not([fill="none"]),
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle svg [fill]:not([fill="none"]) { fill: #fff; }
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-cart svg [fill]:not([fill="none"]),
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-search-toggle svg [fill]:not([fill="none"]) { fill: var(--bz-ink, #2A2A2A); }
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-cart svg [stroke]:not([stroke="none"]),
.sk-header.sk-header-tone-light:not(.sk-nav-open) .sk-search-toggle svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-cart svg [stroke]:not([stroke="none"]),
.sk-header.sk-header-tone-dark:not(.sk-nav-open) .sk-search-toggle svg [stroke]:not([stroke="none"]) { stroke: var(--bz-ink, #2A2A2A); }

/* ===========================================================================
   PHONE: a fixed header reserves no space
   ---------------------------------------------------------------------------
   2.4rem was not the problem — the header is `position: fixed`, so it occupies
   no room in the flow at all and the first line of any page began at y=0,
   underneath it. The offset has to be the header's own height plus the breathing
   room, not the breathing room alone.
   ======================================================================== */
@media (max-width: 767px) {
	/* Builder documents render into <main id="bz-main" class="bz-main">, NOT
	   into .sk-main — which is why the previous selector matched nothing on
	   every builder page. Both are listed now. */
	.sk-main.sk-plain,
	.sk-woo,
	body:not(.sk-snap-page) .bz-main > .bz-content,
	body:not(.sk-snap-page) .sk-main > .bz-content {
		/* On a phone the header is FIXED in both modes, so it reserves no space
		   at all: the offset has to carry its height plus the breathing room the
		   owner set in Customize -> Header -> Bar -> Content offset. Setting the
		   offset alone left every page pinned under the bar. */
		padding-top: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem)) !important;
	}
	/* Nothing should touch the edge of the screen. */
	.sk-main.sk-plain,
	.sk-woo {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}
	/* Full-bleed things inside a padded page reclaim the width themselves. */
	.sk-woo .woocommerce-product-gallery,
	.sk-woo .sk-woo-hero,
	.sk-main.sk-plain > .bz-content > .bz-section.bz-full-height {
		margin-left: -1.1rem;
		margin-right: -1.1rem;
	}
	/* A full-height or snap section positions its own content and must keep
	   sitting behind the bar, exactly as the design intends. */
	body.sk-snap-page .bz-main > .bz-content,
	body.sk-snap-page .sk-main > .bz-content { padding-top: 0 !important; }
	/* Same for a first section that is deliberately full-bleed. */
	body:not(.sk-snap-page) .bz-main > .bz-content > .bz-section.bz-full-height:first-child {
		margin-top: calc(-1 * (var(--sk-header-h, 92px) + 2rem));
	}
}


/* The inner-scroller experiment is gone for good. Twice it fixed the height
   maths and twice it broke something worse — first the page would not scroll,
   then it reordered what the visitor saw. Moving the footer into another
   parent at runtime is not worth a few pixels of snap accuracy.

   Slides are sized in dvh, which is what the platform actually recommends for
   full-page snap. It reflows while the toolbar animates; that is a cosmetic
   cost paid on a gesture, not a broken page. */


/* ===========================================================================
   HEADER INK — one colour, no exceptions
   ---------------------------------------------------------------------------
   A burger in one colour, a logo in another and a cart in a third came from
   three different rules winning on three different elements. This block is the
   last word: everything inside the bar takes the header's own `color`, so
   whatever the tone decides applies to all of it or to none of it.

   Appended last and marked important on purpose — it exists to overrule the
   older per-element rules that caused the mismatch, not to express a design.
   ======================================================================== */
.sk-header:not(.sk-nav-open) .sk-burger span { background: currentColor !important; }
.sk-header:not(.sk-nav-open) .sk-cart,
.sk-header:not(.sk-nav-open) .sk-cart *,
.sk-header:not(.sk-nav-open) .sk-search-toggle,
.sk-header:not(.sk-nav-open) .sk-search-toggle *,
.sk-header:not(.sk-nav-open) .sk-tool,
.sk-header:not(.sk-nav-open) .sk-nav a,
.sk-header:not(.sk-nav-open) .sk-menu a { color: currentColor !important; }

.sk-header:not(.sk-nav-open) .sk-cart svg [stroke]:not([stroke="none"]),
.sk-header:not(.sk-nav-open) .sk-search-toggle svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.sk-header:not(.sk-nav-open) .sk-cart svg [fill]:not([fill="none"]),
.sk-header:not(.sk-nav-open) .sk-search-toggle svg [fill]:not([fill="none"]) { fill: currentColor !important; }

/* The logo is an image and cannot take `color`, so it follows the tone through
   --sk-logo-tone, set once above. The resting-state rule further up applies it
   and the Customizer's --sk-logo-filter still overrides both. */

/* The cart count is a badge: it keeps its own colours so the number stays
   readable against the accent, whichever ink the bar is using. */
.sk-header:not(.sk-nav-open) .sk-cart-count,
.sk-header:not(.sk-nav-open) .sk-cart-count * { color: #fff !important; }


/* ===========================================================================
   WOOCOMMERCE BUTTONS — the theme's own button, everywhere
   ---------------------------------------------------------------------------
   "Return to shop", "Update cart", "Apply coupon", the block cart and checkout
   buttons: all of them shipped in the plugin's default lilac, which reads as a
   different product bolted on. They now use the same outline button as
   Subscribe in the footer — same border, same tracking, same inversion on
   press — because a shop should not look assembled from two kits.
   ======================================================================== */
/*
 * `:not(.checkout-button)` is the one exception this block carves out.
 *
 * Every declaration here is !important, which is what makes the block do its
 * job: it has to beat whatever a payment or shipping plugin ships. But the
 * cart's PROCEED TO CHECKOUT is OUR design, not a plugin's — it is the sage
 * bar flush with the summary panel — and this block was flattening it to a
 * transparent outline. The previous fix was a second !important rule further
 * up the file, which meant editing the cart block had no visible effect.
 *
 * .checkout-button is WooCommerce's own class for that single button and is
 * used nowhere else, so excluding it here is exact rather than broad.
 */
.woocommerce .button:not(.checkout-button),
.woocommerce a.button:not(.checkout-button),
.woocommerce button.button:not(.checkout-button),
.woocommerce input.button:not(.checkout-button),
.woocommerce a.button.alt:not(.checkout-button),
.woocommerce button.button.alt:not(.checkout-button),
.woocommerce input.button.alt:not(.checkout-button),
.woocommerce #respond input#submit,
.woocommerce .wc-block-components-button,
.woocommerce-page .wc-block-components-button,
.wc-block-cart .wc-block-components-button,
.wc-block-checkout .wc-block-components-button,
.woocommerce .return-to-shop .button {
	border: 1px solid var(--bz-slate, #414F4E) !important;
	background: transparent !important;
	color: var(--bz-slate, #414F4E) !important;
	padding: 16px 28px !important;
	font: 700 13px/1 'Montserrat', sans-serif !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.woocommerce .button:not(.checkout-button):hover,
.woocommerce a.button:not(.checkout-button):hover,
.woocommerce button.button:not(.checkout-button):hover,
.woocommerce input.button:not(.checkout-button):hover,
.woocommerce a.button.alt:not(.checkout-button):hover,
.woocommerce button.button.alt:not(.checkout-button):hover,
.woocommerce input.button.alt:not(.checkout-button):hover,
.woocommerce #respond input#submit:hover,
.woocommerce .wc-block-components-button:hover,
.woocommerce-page .wc-block-components-button:hover {
	background: var(--bz-slate, #414F4E) !important;
	color: #fff !important;
}
/* A disabled button must not look pressable. */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .wc-block-components-button:disabled {
	opacity: .45 !important;
	cursor: not-allowed;
}
/* The empty-cart notice carried the same lilac panel. */
.woocommerce .cart-empty,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	background: transparent !important;
	border-top: 1px solid rgba(65, 79, 78, .35) !important;
	border-bottom: 1px solid rgba(65, 79, 78, .35) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	color: var(--bz-ink, #2A2A2A) !important;
	border-radius: 0 !important;
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .cart-empty::before { color: var(--bz-slate, #414F4E) !important; }

@media (max-width: 767px) {
	/* On a phone these are the only action on screen: full width, real target. */
	.woocommerce .return-to-shop .button,
	.woocommerce .wc-proceed-to-checkout .button,
	.woocommerce .wc-block-components-button {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 52px;
	}
	.woocommerce .return-to-shop { padding: 0 1.4rem; }
}


/* ===========================================================================
   PAGED SCROLLING — CSS snap steps aside
   ---------------------------------------------------------------------------
   When theme.js is driving the gesture (see "one swipe = one section"), CSS
   snap must not also try to correct the landing: two systems aiming at the same
   scroll position is what produced the stall. The script marks the root, and
   these rules hand over.
   ======================================================================== */
@media (max-width: 767px) {
	html.sk-paged,
	html.sk-paged body { scroll-snap-type: none !important; }
	/* Removing native touch scrolling is what kills the momentum the pager
	   cannot shape — but it belongs ONLY on the full-screen sections. Applied
	   to the whole document it also took momentum away from the footer, which
	   is a tall page meant to be read: every swipe then moved it by exactly
	   the distance the finger travelled, so reaching its top took a dozen
	   gestures. The footer keeps ordinary scrolling; the pager takes over
	   again at its edges. */
	html.sk-paged .bz-content.bz-snap-mobile > .bz-snap { touch-action: pan-x pinch-zoom; }
	html.sk-paged .bz-content .bz-snap { scroll-snap-align: none !important; }
	/* Smooth is the script's animation, not the browser's guess. */
	html.sk-paged { scroll-behavior: auto; }
}


/* ===========================================================================
   FORCED HEADER INK — the page has decided, nothing argues
   ---------------------------------------------------------------------------
   Set per page (Header icons) or site-wide in Customize → Header → Bar. When a
   page has decided, the measurement is not consulted and no other rule gets a
   say — including the Customizer's own logo filter, which is meant for the
   overlay case and is exactly what kept turning the logo white while the
   burger was already ink.
   ======================================================================== */
body.sk-header-force-dark .sk-header { color: var(--bz-ink, #2A2A2A) !important; }
body.sk-header-force-light .sk-header { color: #fff !important; }

body.sk-header-force-dark .sk-header .sk-burger span { background: var(--sk-ink, var(--bz-ink, #2A2A2A)) !important; }
body.sk-header-force-light .sk-header .sk-burger span { background: var(--sk-ink, #fff) !important; }

body.sk-header-force-dark .sk-header .sk-cart,
body.sk-header-force-dark .sk-header .sk-cart *,
body.sk-header-force-dark .sk-header .sk-search-toggle,
body.sk-header-force-dark .sk-header .sk-search-toggle *,
body.sk-header-force-dark .sk-header .sk-nav a,
body.sk-header-force-dark .sk-header .sk-menu a { color: var(--bz-ink, #2A2A2A) !important; }
body.sk-header-force-light .sk-header .sk-cart,
body.sk-header-force-light .sk-header .sk-cart *,
body.sk-header-force-light .sk-header .sk-search-toggle,
body.sk-header-force-light .sk-header .sk-search-toggle *,
body.sk-header-force-light .sk-header .sk-nav a,
body.sk-header-force-light .sk-header .sk-menu a { color: #fff !important; }

/* The logo is an image: dark means leave it alone, light means invert it. */
body.sk-header-force-dark .sk-header .sk-logo img,
body.sk-header-force-dark .sk-header .custom-logo-link img,
body.sk-header-force-dark .sk-header img.custom-logo { filter: none !important; }
body.sk-header-force-light .sk-header .sk-logo img,
body.sk-header-force-light .sk-header .custom-logo-link img,
body.sk-header-force-light .sk-header img.custom-logo { filter: brightness(0) invert(1) !important; }

/* The badge keeps its own ink so the number stays readable on the accent. */
body.sk-header-force-dark .sk-header .sk-cart-count,
body.sk-header-force-dark .sk-header .sk-cart-count *,
body.sk-header-force-light .sk-header .sk-cart-count,
body.sk-header-force-light .sk-header .sk-cart-count * { color: #fff !important; }

/* ---- desktop: regular pages sit too close to the bar --------------------
   The phone offsets were tightened and the desktop inherited the tightening,
   which it never needed: there the header is in flow and the page began right
   against it. */
@media (min-width: 768px) {
	.sk-main.sk-plain,
	body:not(.sk-snap-page) .bz-main > .bz-content,
	body:not(.sk-snap-page) .sk-main > .bz-content,
	.sk-woo { padding-top: var(--sk-content-offset, 4.5rem); }
}


/* The single product page renders its own layout and never picked up the page
   offset, so its breadcrumb sat against the bar. Same variable, same control.
   An overlay header is FIXED and reserves nothing, so its height has to be
   part of the sum — the offset alone was smaller than the bar and the content
   stayed underneath it. */
@media (max-width: 767px) {
	body.single-product .sk-woo,
	body.single-product .sk-main.sk-woo,
	body.single-product .sk-main {
		padding-top: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem)) !important;
	}
}
@media (min-width: 768px) {
	body.single-product .sk-woo,
	body.single-product .sk-main { padding-top: var(--sk-content-offset, 4.5rem) !important; }
}


/* ===========================================================================
   LOGO: the tone owns the filter
   ---------------------------------------------------------------------------
   The resting rule reads var(--sk-logo-filter, var(--sk-logo-tone, none)), so a
   filter set in Customize -> Header -> Logo won whatever the tone said — a logo
   tinted white stayed white while the burger and the cart were already ink.
   That variable is meant for the overlay case; once a tone has been decided it
   is the tone that decides.
   ======================================================================== */
.sk-header.sk-header-tone-dark {
	--sk-logo-tone: none;
	--sk-logo-filter: none;
	--sk-logo-filter-hover: none;
}
.sk-header.sk-header-tone-light {
	--sk-logo-tone: brightness(0) invert(1);
	--sk-logo-filter: brightness(0) invert(1);
	--sk-logo-filter-hover: brightness(0) invert(1);
}

/* Hovering the bar always paints it cream and the menu ink — so the logo has
   to come with them. The tone classes above were setting the HOVER variable
   white as well, which left a white mark on a cream bar: invisible.

   `body .sk-header:hover` outranks `.sk-header.sk-header-tone-light` on its
   own, so no !important is involved. Both variables are reset because the
   resting rule falls back through --sk-logo-filter to --sk-logo-tone and
   either one left white would win. */
@media (hover: hover) {
	body .sk-header:hover,
	body .sk-header:focus-within {
		--sk-logo-tone: none;
		--sk-logo-filter: none;
		--sk-logo-filter-hover: none;
	}
}

/* ---- the product tabs break onto two lines on a narrow screen ---------- */
@media (max-width: 767px) {
	.sk-woo div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sk-woo div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.sk-woo div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
	.sk-woo div.product .woocommerce-tabs ul.tabs li a {
		/* "How to use" was wrapping after the first word. */
		white-space: nowrap;
		font-size: 11px;
		letter-spacing: .08em;
	}
}


/* ===========================================================================
   4.67.0 — HEADER INK HAS EXACTLY ONE SOURCE
   ---------------------------------------------------------------------------
   The burger came out black beside a white logo and a white cart because three
   different rules were deciding three different things:

     burger  ->  var(--sk-header-mobile-burger, …)   set by the Customizer
     cart    ->  the header's own `color`            set by the tone class
     logo    ->  var(--sk-logo-tone)                 set by the tone class

   Nothing tied them together, so a leftover Customizer colour split the trio
   and no amount of !important further down could reunite them: they were not
   competing for the same declaration.

   Now every painted thing in the bar reads ONE variable, --sk-ink, and this
   block is the only place that variable is assigned. The old per-element
   variables no longer exist anywhere in this file. Whatever wins here wins for
   the burger, the logo, the cart and the menu at the same instant, because
   they are literally the same value.

   --sk-ink-user is the owner's override (Customize -> Header -> Icons); when
   it is empty the automatic tone decides.
   ======================================================================== */

/* 1. default: dark ink on a light page */
.sk-header {
	--sk-ink: var(--sk-ink-user, var(--bz-ink, #2A2A2A));
	--sk-logo-tone: none;
}

/* 2. an overlay header floats over a hero, which is light-on-dark until the
      measurement says otherwise — this avoids a dark burger flashing over a
      dark video for the first frame after load */
body.sk-header-overlay .sk-header {
	--sk-ink: var(--sk-ink-user, #fff);
	--sk-logo-tone: brightness(0) invert(1);
}

/* 3. what theme.js measured */
body .sk-header.sk-header-tone-light {
	--sk-ink: var(--sk-ink-user, #fff);
	--sk-logo-tone: brightness(0) invert(1);
}
body .sk-header.sk-header-tone-dark {
	--sk-ink: var(--sk-ink-user, var(--bz-ink, #2A2A2A));
	--sk-logo-tone: none;
}

/* 4. what the page said, in Header icons on the edit screen — beats the
      measurement, and beats the Customizer override too: an explicit per-page
      answer is the most specific thing anyone can state */
body.sk-header-force-light .sk-header {
	--sk-ink: #fff;
	--sk-logo-tone: brightness(0) invert(1);
}
body.sk-header-force-dark .sk-header {
	--sk-ink: var(--bz-ink, #2A2A2A);
	--sk-logo-tone: none;
}

/* 5. an open or hovered bar always sits on cream, so it always takes dark ink,
      whatever the page decided for the resting state */
body .sk-header.sk-nav-open,
body .sk-header.sk-search-open {
	--sk-ink: var(--bz-ink, #2A2A2A);
	--sk-logo-tone: none;
}
@media (hover: hover) {
	body .sk-header:hover,
	body .sk-header:focus-within {
		--sk-ink: var(--bz-ink, #2A2A2A);
		--sk-logo-tone: none;
	}
}

/* 6. the consumers — one value, applied everywhere it can be applied */
.sk-header { color: var(--sk-ink); }
.sk-header .sk-burger span { background: var(--sk-ink) !important; }
.sk-header .sk-tool,
.sk-header .sk-cart,
.sk-header .sk-cart svg,
.sk-header .sk-search-toggle,
.sk-header .sk-search-toggle svg,
.sk-header .sk-nav a,
.sk-header .sk-menu a { color: var(--sk-ink) !important; }
.sk-header .sk-cart svg [stroke]:not([stroke="none"]),
.sk-header .sk-search-toggle svg [stroke]:not([stroke="none"]) { stroke: var(--sk-ink) !important; }
.sk-header .sk-cart svg [fill]:not([fill="none"]),
.sk-header .sk-search-toggle svg [fill]:not([fill="none"]) { fill: var(--sk-ink) !important; }

/* The logo is an image and cannot take `color`; it follows the same decision
   through --sk-logo-tone, assigned in the very same rules above. A Customizer
   logo colour (--sk-logo-filter) still overrides it, as before. */
.sk-header .sk-logo img,
.sk-header .custom-logo-link img,
.sk-header img.custom-logo {
	filter: var(--sk-logo-filter, var(--sk-logo-tone, none));
}

/* The badge is not chrome: it keeps white text on the accent so the number
   stays readable whichever ink the bar is using. */
.sk-header .sk-cart-count,
.sk-header .sk-cart-count * { color: #fff !important; }


/* ===========================================================================
   4.67.0 — CART AND CHECKOUT SIT CLOSER TO THE BAR
   ---------------------------------------------------------------------------
   Both pages inherited the generic page offset (header height + the Customizer
   content offset), which is right for an editorial page that opens with a
   heading and far too much for a transactional page whose first line is a
   table. They get their own, tighter offset — still measured from the header
   height, so it survives a taller or shorter bar.
   ======================================================================== */
@media (max-width: 767px) {
	/* Cart and Checkout follow the same setting as every other page now, so a
	   single number in Customize -> Header moves the whole site. The header's
	   PHONE height is the base here — the old rule used --sk-header-h (92px,
	   the desktop bar), which on a phone reserved space for a bar that is
	   60px tall and left the extra as dead air. */
	body.sk-woo--cart .sk-woo,
	body.sk-woo--checkout .sk-woo,
	body.sk-woo--cart .sk-main.sk-plain,
	body.sk-woo--checkout .sk-main.sk-plain {
		padding-top: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem)) !important;
		padding-bottom: 6rem;
		/* The desktop 9rem would be dead air above a 60px bar. */
		--sk-woo-offset: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem));
	}
	body.sk-woo--checkout .woocommerce { padding-top: 0 !important; }
	body.sk-woo--cart .woocommerce {
		padding-top: 0 !important;
		/* Room under PROCEED TO CHECKOUT so the button is not sitting on the
		   footer edge — the value measured in DevTools. */
		padding-bottom: 5rem;
	}
	/* The CHECKOUT title carried its own 48px top pad, which would stack on
	   top of the offset above and put the page back where it started. */
	body.sk-woo--checkout .sk-title { padding-top: 0 !important; }

	/* Same stacking on the cart: .sk-cart-page adds its own 34px above the
	   heading, on top of the offset. The offset alone owns the top gap now;
	   the side padding is left alone. */
	body.sk-woo--cart .sk-cart-page { padding-top: 0 !important; }
}
@media (min-width: 768px) {
	/* 1.5rem was not an offset, it was a nudge — and with !important it beat
	   the site-wide rule further down, so the cart and the checkout started
	   under a fixed header with nothing reserved for it. Same expression as
	   every other page now, which also means Customize -> Header -> Content
	   offset moves these two along with the rest instead of leaving them
	   behind. No !important: the selector already outranks the generic one. */
	/*
	 * The offset lives on .sk-main.sk-plain now, because that is the element
	 * the cart and the checkout actually render into — .sk-woo is not always
	 * present on these two, which is why an offset set on it appeared to do
	 * nothing. 9rem clears the fixed bar with room to breathe, and it is a
	 * variable so an owner can change it in Customize -> Header -> Content
	 * offset -> WooCommerce pages without touching this file.
	 */
	body.sk-woo--cart .sk-woo,
	body.sk-woo--checkout .sk-woo {
		padding-top: 0;
	}
	body.sk-woo--checkout .woocommerce { padding-top: 12px; }
}


/* ===========================================================================
   4.67.0 — THE ORDER TABLE'S SUBTOTAL / TOTAL BLOCK
   ---------------------------------------------------------------------------
   With `border-collapse: collapse`, adjacent cells fight over the shared edge
   and the CELL THAT COMES FIRST wins when only the colour differs. The
   subtotal row's <td> carried a pale rule and the total row's <td> a dark one,
   so the dark line under SUBTOTAL stopped dead where the <th> ended — the
   half-width line in the screenshot. The grey band on TOTAL then made the
   break look deliberate, which it was not.

   One hairline between every row, one solid rule above the total, no band.
   ======================================================================== */
.sk-woo table.woocommerce-checkout-review-order-table tfoot th,
.sk-woo table.woocommerce-checkout-review-order-table tfoot td {
	border-bottom: 1px solid #e3ded6;
	vertical-align: middle;
}
.sk-woo table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.sk-woo table.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-bottom: 0;
}
.sk-woo table.woocommerce-checkout-review-order-table tfoot .order-total th,
.sk-woo table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: 1px solid var(--bz-ink, #2A2A2A);
	font-weight: 700;
	padding-top: 16px;
	padding-bottom: 16px;
}
/* The band on TOTAL is in the design and stays. It was never the problem — the
   problem was the rule ABOVE it stopping halfway, which made the band look like
   a mistake rather than a deliberate block. */
.sk-woo table.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 15px;
	letter-spacing: .02em;
}
/* The product row above the footer already has its own hairline; a second one
   from the subtotal's top edge doubled it. */
.sk-woo table.woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.sk-woo table.woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
	border-top: 0;
}



/* ===========================================================================
   4.68.0 — PHONE CHECKOUT: THE TWO FILLED BUTTONS FROM THE DESIGN
   ---------------------------------------------------------------------------
   The store's button language is an outline (the SUBSCRIBE treatment) and that
   stays everywhere else. The phone checkout design deliberately breaks it in
   two places — APPLY COUPON and PLACE ORDER are solid sage with white type,
   because they are the only two commitments on the page and an outline reads
   as optional next to eight bordered inputs.
   ======================================================================== */
@media (max-width: 767px) {
	.sk-woo form.checkout_coupon .button,
	.sk-woo #place_order {
		background: var(--bz-sage-dark, #728988) !important;
		border-color: var(--bz-sage-dark, #728988) !important;
		color: #fff !important;
	}
	.sk-woo form.checkout_coupon .button:hover,
	.sk-woo #place_order:hover {
		background: var(--bz-slate, #414F4E) !important;
		border-color: var(--bz-slate, #414F4E) !important;
		color: #fff !important;
	}
	/* The section headings are slate-green and centred in the design; the
	   page title above them is the only black one. */
	.sk-woo .woocommerce-billing-fields > h3,
	.sk-woo .woocommerce-additional-fields > h3,
	.sk-woo #order_review_heading {
		color: var(--bz-sage-dark, #728988);
		text-align: center;
		text-transform: uppercase;
	}
}



/* ===========================================================================
   4.68.2 — PHONE: SKINCARE OPENING, AND THE TWO WHAT'S NEW CAPTIONS
   ======================================================================== */
@media (max-width: 767px) {

	/* ---- Skincare, top of the page --------------------------------------
	   The section carries the banner as a BACKGROUND on desktop, with the
	   title sitting on top of it. The phone design separates the two: title
	   on cream, photo full-bleed underneath. A background cannot be pushed
	   below its own section's text, so the background is switched off here
	   and the same photo is rendered as a real image node (skinherobanner)
	   directly after the title. Setting bg_image_mobile in the document does
	   not do this — an empty value there means "inherit the desktop image",
	   which is why the title was still printed over the photo. */
	/* THIS is why the title was still printed over the photo in 4.68.2, and
	   my `background-image: none` did nothing: a section background in this
	   builder is NOT a CSS background. render_section() outputs a real
	   element — <img class="bz-section-bg"> — positioned behind the content.
	   You cannot switch off an <img> with a background property. */
	#bz-content .bz-nskinhero .bz-section-bg,
	#bz-content .bz-nskinhero > .bz-section-bg {
		display: none !important;
	}
	#bz-content .bz-nskinhero,
	#bz-content .bz-nskinhero > .bz-section-inner {
		background-image: none !important;
	}
	#bz-content .bz-nskinhero {
		min-height: 0 !important;
		height: auto !important;
		padding: 5.4rem 1.25rem 1.5rem !important;
		background-color: var(--bz-cream, #F4F1ED) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	#bz-content .bz-nskinherobanner {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: cover !important;
	}

	/* ---- What's New: the caption under each of the first two photos ------
	   Both captions live in a container inside the text column, and both
	   columns were reserving their full height while painting nothing. The
	   whole chain is forced back into flow and given the design's type:
	   product name centred, small, near-black; description centred beneath. */
	#bz-content .bz-nd0000056,
	#bz-content .bz-nd000005b,
	#bz-content .bz-n69785624,
	#bz-content .bz-n1ffbfe86,
	#bz-content .bz-nd0000054,
	#bz-content .bz-nd0000055,
	#bz-content .bz-nd0000059,
	#bz-content .bz-nd000005a {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		transform: none !important;
	}
	#bz-content .bz-nd0000056 .bz-heading-link,
	#bz-content .bz-nd000005b .bz-heading-link {
		display: block !important;
		color: #1A1A1A !important;
		-webkit-text-fill-color: #1A1A1A !important;
		text-decoration: none !important;
	}
	/* -----------------------------------------------------------------------
	   NODE-ID CLEANUP — step 2: What's New phone typography

	   Four rules stood here, 17 !important declarations across them, and every
	   one of them is now gone. What each was doing, and where it lives instead:

	   * two `-webkit-text-fill-color` rules pinning the heading and the copy.
	     Nothing in this theme, the builder, or its generated CSS sets
	     `-webkit-text-fill-color` or `background-clip` anywhere — grep returns
	     these three lines and nothing else. They were defending against a
	     technique the theme does not use, so they defended against nothing.

	   * the heading rule: colour, size, weight, line-height, letter-spacing,
	     alignment, margin and padding. The document's own `style_mobile` on
	     both heading nodes already carries the identical eight values. This
	     was a copy of the document, one file later and unbeatable.

	   * the paragraph rule: same story, except the `<p>` margin, which the
	     document had no way to express — Paragraph margin was a single value
	     for every screen. It is per-device now, and the two description nodes
	     carry `para_margin_mobile: 0`.

	   Which is the whole point of removing these rather than tidying them: a
	   value in the document can be changed from the editor. A value here
	   cannot, no matter what the panel shows the owner.
	   -------------------------------------------------------------------- */
}


/* ===========================================================================
   4.68.4 — A STACKED ROW MUST NEVER WRAP INTO A SECOND COLUMN
   ---------------------------------------------------------------------------
   Measured, not guessed. On What's New at 398px wide:

       DIV.bz-nd0000057  (the row)      x0    w398  h649  flex
       DIV.bz-nd0000056  (text column)  x398  w398  h649

   The caption column starts at x = 398 — exactly one viewport to the RIGHT of
   the row. It was never invisible: it was off-screen, and body clipping meant
   there was no scrollbar to hint at it. Everything about the text itself was
   already correct — colour rgb(26,26,26), font-size 16.8px, the words present.

   The cause is the combination of three things that are individually fine:

     .bz-row          { flex-wrap: wrap; }        base
     .bz-row--stack   { flex-direction: column; } phone
     the row is stretched to its flex parent's height (649px, set by the photo)

   A COLUMN-direction flex container that wraps and cannot fit its children in
   the available HEIGHT starts a new column beside the first — which is exactly
   what wrapping is defined to do. The photo filled the height on its own, so
   the caption was pushed sideways.

   A stacked row is a stack by definition, so it does not wrap, and its height
   follows its content rather than whatever the parent hands it. Rows that are
   deliberately side-by-side on a phone (the 2-up product strips) carry
   stack_mobile: false, get no bz-row--stack class, and are untouched.
   ======================================================================== */
@media (max-width: 767px) {
	#bz-content .bz-row--stack {
		flex-wrap: nowrap !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	#bz-content .bz-row--stack > .bz-col {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	/* The chain above the row hands down that fixed height, so it is released
	   at every level of a stacked section too. */
	#bz-content .bz-section:has(> .bz-section-inner .bz-row--stack) > .bz-section-inner,
	#bz-content .bz-section-inner:has(.bz-row--stack) > .bz-container {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
}


/* ===========================================================================
   4.68.5 — ONE TOP OFFSET FOR SKINCARE, WHAT'S NEW, ABOUT, CONTACT AND SHOP
   ---------------------------------------------------------------------------
   Each of these pages was setting its own top gap in its own document —
   6.5rem on About and Contact, 5.4rem on Skincare, 0 on What's New — so no two
   of them started at the same height. They now share one value.

   The value is NOT written here. It comes from --sk-content-offset, the
   variable Skincare_Header_Tone::print_offset() prints from
   `skincare_content_offset_mobile` — Customize -> Header, default 3rem, with a
   per-page override in the page's own meta box. Hardcoding 3rem in the
   stylesheet would mean every owner who wants their content tighter or looser
   has to edit a file, which is exactly what that setting exists to avoid. The
   3rem in the fallback is only what applies if the variable is ever missing.

   It is measured from the BOTTOM OF THE HEADER, not from the top of the
   viewport. The header is fixed and overlays the page on a phone, so the
   offset on its own would tuck the first heading behind the burger. Adding the
   header's own height gives that many rem of actual visible breathing room,
   and matches how the Shop listing already computed its offset.
   ======================================================================== */
@media (max-width: 767px) {
	/*
	 * THE GAP WAS DOUBLE ON EVERY BUILDER PAGE. Two different elements were
	 * each adding a full offset:
	 *
	 *   .bz-content                       calc(header + offset)
	 *   first .bz-section-inner           calc(header + offset)   <- mine, 4.68.5
	 *
	 * They are different elements, so nothing overrode anything — the page
	 * simply started twice as far down. On Cart, Checkout and Shop the two
	 * rules landed on the SAME element, one won, and those pages looked right,
	 * which is why the doubling only showed on Skincare, What's New, About and
	 * Contact.
	 *
	 * .bz-content is now the single place that spaces a page from the bar. The
	 * first section contributes nothing: its own document padding (6.5rem on
	 * About and Contact, 5.4rem on Skincare) is cleared here so an owner's
	 * offset is the whole story.
	 */
	body:not(.sk-snap-page) #bz-content > .bz-section:first-child,
	body:not(.sk-snap-page) #bz-content > .bz-section:first-child > .bz-section-inner {
		padding-top: 0 !important;
	}

	/* Shop, product categories and product search share the listing scope.
	   The gap at the top of a listing was never coming from .sk-woo — on a
	   phone that has `padding: 0 0 64px`. It came from .sk-shop-hero's own
	   `padding: 62px 24px 40px`, which is why setting .sk-woo alone changed
	   nothing visible. The hero's top padding is handed over to the offset so
	   the listing lines up with the other four pages and follows the same
	   setting; its side and bottom padding are untouched. */
	body.sk-woo--listing-page .sk-woo {
		padding-top: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem)) !important;
	}
	body.sk-woo--listing-page .sk-shop-hero,
	.sk-woo--listing .sk-shop-hero {
		padding-top: 0 !important;
	}

	/* Skincare opens with the title block added in 4.68.2 — its own padding
	   would stack on top of the offset above, so only the sides remain. */
	#bz-content .bz-nskinhero,
	#bz-content .bz-nskinhero > .bz-section-inner {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		padding-bottom: 1.5rem !important;
	}
}


/* Tablet band for the same five pages. --sk-content-offset already carries the
   tablet value between 768px and 1023px (Skincare_Header_Tone::print_offset
   emits one rule per band), so the only thing needed here is to apply it. */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Above 767px .bz-content already gets `padding-top: var(--sk-content-offset)`
	   and the bar is in flow, so again the section adds nothing. */
	body:not(.sk-snap-page) #bz-content > .bz-section:first-child,
	body:not(.sk-snap-page) #bz-content > .bz-section:first-child > .bz-section-inner {
		padding-top: 0 !important;
	}
	body.sk-woo--listing-page .sk-shop-hero,
	.sk-woo--listing .sk-shop-hero {
		padding-top: 0 !important;
	}
}



/* ===========================================================================
   4.70.0 — DESKTOP: PLAIN PAGES WERE RUNNING UNDER THE BAR
   ---------------------------------------------------------------------------
   Delivery, Terms, Privacy Policy and the Cart all began at the very top of
   the document on a wide screen, so their titles were drawn straight through
   the logo. The desktop rule set `padding-top: var(--sk-content-offset)` and
   nothing else — correct only if the bar takes up room in the flow, which it
   does not: .sk-header is fixed in both header modes. The bar's own height has
   to be part of the sum, exactly as it already is on the phone.
   ======================================================================== */
@media (min-width: 768px) {
	.sk-main.sk-plain,
	body:not(.sk-snap-page) .bz-main > .bz-content,
	body:not(.sk-snap-page) .sk-main > .bz-content,
	.sk-woo {
		padding-top: calc(var(--sk-header-h, 92px) + var(--sk-content-offset, 4.5rem));
	}
	/* The cart draws its own heading and added 48px on top of that. */
	body.sk-woo--cart .sk-cart-page { padding-top: 0; }
}


/* ===========================================================================
   4.70.0 — WHAT'S NEW HERO VIDEO IS A DESKTOP-ONLY THING
   ---------------------------------------------------------------------------
   The section background is an element (<video class="bz-section-bg">), so it
   is switched off the same way the Skincare photo was — by hiding the element,
   not by clearing a background property. The phone design has cream behind the
   title, which is what style_mobile already sets.
   ======================================================================== */
@media (max-width: 767px) {
	#bz-content .bz-nd0000051 video.bz-section-bg,
	#bz-content .bz-nd0000051 .bz-section-bg {
		display: none !important;
	}
}


/* ===========================================================================
   4.70.0 — PHONE CHECKOUT: THE TOP OF THE PAGE
   ---------------------------------------------------------------------------
   Against the design: CHECKOUT is a large centred title in the page's display
   face, the coupon toggle is a real checkbox with the prompt beside it in
   sage, and the code field and APPLY COUPON sit as one bar with no gap. What
   was rendering instead was WooCommerce's inline notice — small, left aligned,
   underlined, with the checkbox floating over the text.
   ======================================================================== */
@media (max-width: 767px) {
	body.sk-woo--checkout .sk-title {
		display: block !important;
		margin: 0 0 1.6rem !important;
		font-family: var(--bz-font-display, 'Montserrat', sans-serif);
		font-weight: 800;
		font-size: clamp(2rem, 9vw, 2.6rem);
		line-height: 1.05;
		letter-spacing: .01em;
		text-transform: uppercase;
		text-align: center;
		color: var(--bz-ink, #2A2A2A);
	}
	.sk-woo .woocommerce-form-coupon-toggle {
		margin: 0 0 1rem !important;
	}
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info {
		display: flex !important;
		align-items: center !important;
		gap: .75rem !important;
		margin: 0 !important;
		padding: .9rem 1rem !important;
		border: 1px solid rgba(42, 42, 42, .18) !important;
		background: transparent !important;
		font-size: .82rem !important;
		letter-spacing: .06em !important;
		text-transform: uppercase !important;
		color: var(--bz-sage-dark, #728988) !important;
		line-height: 1.3 !important;
	}
	/* WooCommerce draws a tick glyph as a pseudo-element on the notice; the
	   design wants it as a square control at the left, not floating on the
	   text. */
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info::before {
		position: static !important;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 26px !important;
		height: 26px !important;
		margin: 0 !important;
		border: 1px solid rgba(42, 42, 42, .3) !important;
		color: var(--bz-sage-dark, #728988) !important;
		font-size: 15px !important;
		top: auto !important;
		left: auto !important;
	}
	.sk-woo .woocommerce-form-coupon-toggle .woocommerce-info a {
		color: inherit !important;
		text-decoration: none !important;
		border: 0 !important;
	}
	/* Code field and button as one bar, as drawn. */
	.sk-woo form.checkout_coupon {
		display: flex !important;
		gap: 0 !important;
		margin: 0 0 2.4rem !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.sk-woo form.checkout_coupon .form-row {
		flex: 1 1 auto !important;
		margin: 0 !important;
		padding: 0 !important;
		width: auto !important;
	}
	.sk-woo form.checkout_coupon input[type="text"] {
		width: 100% !important;
		height: 52px !important;
		border: 1px solid rgba(42, 42, 42, .18) !important;
		border-right: 0 !important;
	}
	.sk-woo form.checkout_coupon .button {
		flex: 0 0 45% !important;
		height: 52px !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
	.sk-woo form.checkout_coupon p:last-child { display: none !important; }
}


/* ===========================================================================
   4.70.3 — A PAGE THAT OPENS ON FOOTAGE STARTS AT THE TOP
   ---------------------------------------------------------------------------
   Keyed to the artwork, not to a page id, so it keeps working for a customer
   who builds their own page the same way: when the FIRST section carries a
   background video OR a background image, the page takes no top offset and
   the artwork runs to the very top of the window, with the bar floating over
   it — the same treatment the home hero already gets.

   4.96.0: it used to match `video.bz-section-bg` only. Skincare opens on a
   background IMAGE, which the renderer emits as <img class="bz-section-bg">,
   so it fell through to the generic desktop offset (header + 4.5rem) and its
   banner started a couple of hundred pixels down the page. Same intent, both
   media types.

   Sections whose first block is plain (About, Contact) keep the offset from
   Customize -> Header, and the phone is untouched: there the What's New video
   is switched off entirely and the title sits on cream.
   ======================================================================== */
@media (min-width: 768px) {
	body:not(.sk-snap-page) .bz-main > .bz-content:has(> .bz-section:first-child > :is(video, img).bz-section-bg),
	body:not(.sk-snap-page) .sk-main > .bz-content:has(> .bz-section:first-child > :is(video, img).bz-section-bg) {
		padding-top: 0 !important;
	}
	/* Fallback for engines without :has() — the demo's own heroes, by name. */
	body.page-template-default #bz-content > .bz-nd0000051,
	body.page-template-default #bz-content > .bz-nskinhero {
		margin-top: 0 !important;
	}
	body.sk-page-skincare:not(.sk-snap-page) .bz-main > .bz-content,
	body.sk-page-skincare:not(.sk-snap-page) .sk-main > .bz-content,
	body.sk-page-whats-new:not(.sk-snap-page) .bz-main > .bz-content,
	body.sk-page-whats-new:not(.sk-snap-page) .sk-main > .bz-content {
		padding-top: 0 !important;
	}
}


/* ===========================================================================
   4.71.0 — MENU ITEMS THAT BELONG TO ONE PRESENTATION ONLY
   ---------------------------------------------------------------------------
   One Primary menu feeds both the desktop bar (.sk-nav .sk-menu) and the phone
   drawer (.sk-drawer-menu). Registering a second menu location would mean an
   owner has to keep two lists in step and remember which one they edited; a
   class on the item keeps one list and states the exception on the item
   itself. Both classes are visible and removable in Appearance -> Menus
   (Screen Options -> CSS Classes), so nothing here is hidden from the owner.

   Deliberately keyed to the CONTAINER, not to a width: the drawer already
   decides for itself when it is on screen, so these two rules stay correct if
   that breakpoint ever moves.

     sk-menu-mobile   in the drawer only
     sk-menu-desktop  in the bar only
   ======================================================================== */
.sk-header .sk-nav .sk-menu li.sk-menu-mobile,
.sk-header .sk-menu li.sk-menu-mobile { display: none !important; }

.sk-drawer .sk-drawer-menu li.sk-menu-desktop { display: none !important; }



/* ===========================================================================
   4.74.1 — THE EDITOR CANVAS GETS THE SAME TOP OFFSET AS THE FRONT END
   ---------------------------------------------------------------------------
   In the canvas the heading was drawn straight through the logo, while the
   same page was fine for visitors. The markup differs by exactly one node:

     front end   <main class="bz-main">          > #bz-content
     canvas      <main id="bz-main"> #bz-canvas-root > #bz-content

   Every offset rule in this file uses the child combinator `.bz-main >
   .bz-content`, so #bz-canvas-root in the middle stopped all of them. The
   canvas then pinned the header with `position: fixed` — correct, it is meant
   to match what visitors see — over content that had no room reserved for it.

   Adding the canvas path rather than loosening the existing rules to
   descendant selectors: the child combinator is deliberate elsewhere, and an
   editor-only quirk should not widen the front end's own matching.
   ======================================================================== */
@media (max-width: 767px) {
	body:not(.sk-snap-page) #bz-canvas-root > .bz-content {
		padding-top: calc(var(--sk-header-mobile-h, 60px) + var(--sk-content-offset, 1.5rem)) !important;
	}
	body.sk-snap-page #bz-canvas-root > .bz-content { padding-top: 0 !important; }
}
@media (min-width: 768px) {
	body:not(.sk-snap-page) #bz-canvas-root > .bz-content {
		padding-top: calc(var(--sk-header-h, 92px) + var(--sk-content-offset, 4.5rem));
	}
	body.sk-snap-page #bz-canvas-root > .bz-content { padding-top: 0 !important; }
	/* A page that opens on footage still runs to the top, in the canvas too. */
	body:not(.sk-snap-page) #bz-canvas-root > .bz-content:has(> .bz-section:first-child > :is(video, img).bz-section-bg) {
		padding-top: 0 !important;
	}
}
/* A full-height first section is its own hero and never takes the offset. */
body:not(.sk-snap-page) #bz-canvas-root > .bz-content > .bz-section.bz-full-height:first-child {
	margin-top: calc(-1 * var(--sk-header-h, 92px));
}


/* ===========================================================================
   4.75.3 — THE FOOTER CLOSES UP WHEN IT HAS NO MENU COLUMNS
   ---------------------------------------------------------------------------
   .sk-footer-in opens with 72px and the newsletter block adds another 56px of
   its own. Together that is the design's breathing room ABOVE THE COLUMNS —
   correct when the columns are there, and 128px of empty taupe when they are
   not. A site that starts blank has no footer menus, so it was showing a band
   of nothing before the first thing it actually has to say.

   Keyed to the absence of the columns rather than to a body class: the footer
   already decides for itself whether to print them (fallback.php returns early
   when neither menu location is assigned), so this follows that same decision
   instead of duplicating it.
   ======================================================================== */
/*
 * These two used to hardcode 24px, and that quietly disabled the Customizer's
 * "Space above" control on most sites.
 *
 * `.sk-footer-cols` is rendered by fallback.php only. A footer built from the
 * zone editor emits `.sk-footer-row` instead — so :not(:has(.sk-footer-cols))
 * is true for every zone-built footer, not just the column-less one this rule
 * was written for. Being later and more specific than .sk-footer-in, it won,
 * and the padding variable it overrode was the one the control writes. Typing
 * a number in the panel changed a variable nothing was reading any more.
 *
 * Same intent, expressed as a default: tighter when there are no columns,
 * unless the owner has said otherwise.
 */
.sk-footer-in:not(:has(.sk-footer-cols)) {
	padding-top: var(--sk-footer-pad-top, 24px);
}
.sk-footer-in:not(:has(.sk-footer-cols)) .sk-newsletter {
	padding-top: var(--sk-footer-pad-top, 24px);
}


/* The closing line's second item. Inherits the closing line's own type so it
   reads as a pair with the copyright rather than as a stray sentence. */
.sk-footer .sk-footer-note { display: block; }


/* ===========================================================================
   4.88.0 — DESKTOP: THE TWO PAGES THAT OPEN ON A TITLE
   ---------------------------------------------------------------------------
   Skincare and What's New start with a heading on cream, and the generic
   desktop offset (header height + 4.5rem) left most of a screen empty above
   it. Capped at 1.5rem of breathing room, still measured from the bar so it
   survives a taller header.
   ======================================================================== */
/* 4.94.0 — REMOVED. Both pages open on a full-width banner, and the offset
   pushed that banner down the screen, leaving a cream strip under the header
   where the artwork should start. The title no longer needs the room either:
   its section centres it over the banner. */

/* ===========================================================================
   NODE-ID CLEANUP — step 1: What's New description columns

   Two rules stood here:

       #bz-content .bz-nd0000055 { text-align: left; }
       #bz-content .bz-nd000005a { text-align: right; }

   Both are DELETED, and nothing changes on screen, because the document
   already carries the same two values as node styles (`text_align: left` and
   `text_align: right`). The stylesheet was restating what the builder was
   emitting one line later anyway — visible in DevTools as the theme.css rule
   sitting struck through under the document's own.

   Why they had to go rather than be improved: the builder writes
   `#bz-content .bz-ndXXXXXXX` too, with identical specificity, and its
   <style id="bz-doc-css"> is printed after this file. So a node rule here can
   only ever win against something the document does NOT set — and lose,
   silently, against everything it does. That is the whole reason a padding
   typed into the editor appeared to be ignored on this page.

   The remaining ~110 node-id rules elsewhere in this file are the same debt.
   They come out a page at a time, each one checked against what its document
   already says, rather than in one sweep.
   ======================================================================== */


/* ===========================================================================
   4.88.0 — A FULL-BLEED SECTION REALLY REACHES THE EDGE
   ---------------------------------------------------------------------------
   `contained: false` stops the builder adding its container, but a row inside
   such a section still inherits the page's own gutter, so the artwork stopped
   short of the viewport by exactly that much. On a wide screen the two big
   What's New photos drifted away from the edge they are designed to touch.

   Only inside a section that has opted out of containment: a boxed section
   keeps its gutter, which is the whole point of being boxed.
   ======================================================================== */
#bz-content .bz-section:not(:has(> .bz-section-inner > .bz-container)) > .bz-section-inner {
	padding-left: 0;
	padding-right: 0;
}
/* The row's own left/right margins used to be zeroed here as well. That also
   cancelled `margin: 0 auto`, which is how a row with a max-width centres
   itself — so every capped row in the theme was pinned to the left edge. The
   gutter this block exists to remove lives on .bz-section-inner above; the row
   never contributed it, so zeroing the row was never needed. */

/* A photo in a full-bleed row fills its half completely — no letterboxing,
   no white edge where the aspect ratio disagrees with the column. */
#bz-content .bz-section:not(:has(> .bz-section-inner > .bz-container)) .bz-col > img,
#bz-content .bz-section:not(:has(> .bz-section-inner > .bz-container)) .bz-col > a > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================================================================
   4.93.0 — the SHOP dropdown survives the trip down to it
   ------------------------------------------------------------------------
   The panel is positioned against .sk-header (top: 100%, so the header's
   bottom edge), but it only stays open while :hover is true on the <li>.
   .sk-header-in centres its children, so the <li> was as tall as its text —
   roughly 20px inside a ~90px bar. Everything between the bottom of the word
   SHOP and the bottom of the header was dead space: the pointer left the
   <li> there, :hover went false, and the panel vanished before the pointer
   ever reached it. No amount of transition delay fixes that; the hit area
   itself was wrong.

   Stretching the nav, the list, the items and their anchors to the full bar
   height makes the <li> reach down to exactly where the panel begins, so the
   pointer never crosses unhovered ground. Desktop only — below 1024px the
   nav is an absolutely positioned drawer and none of this applies.
   ======================================================================== */
@media (min-width: 1024px) {
	/* 4.99.0 put `display: flex` on .sk-header-device here. render_row() emits
	   EVERY device variant and CSS hides all but one with `display: none` —
	   that declaration un-hid them, which is why the bar printed the logo and
	   the menu three times over. NEVER set display on that wrapper.

	   Stretching is all that was needed anyway. .sk-nav sits three wrappers
	   deep (.sk-header-in > .sk-header-device > .sk-header-zone > .sk-nav)
	   and each was only as tall as its text, so the <li> never reached the
	   bar's bottom edge where the panel begins. align-items and align-self
	   carry no display side effect. */
	/* Stretch ONLY the branch the menu lives in. Stretching every zone made
	   the cart button as tall as the bar, and its counter is positioned
	   against that button — so the badge climbed to the top of the header.
	   The device wrapper still stretches (it is just a box), but its zones
	   keep their own centring; only the zone holding .sk-nav opts in. */
	.sk-header .sk-header-device { align-self: stretch; }
	.sk-header .sk-header-zone:has(> .sk-nav) { align-self: stretch; align-items: stretch; }
	.sk-header .sk-nav { align-self: stretch; align-items: stretch; }
	.sk-header .sk-nav .sk-menu { align-items: stretch; }
	.sk-header .sk-nav .sk-menu > li { display: flex; align-items: stretch; }
	.sk-header .sk-nav .sk-menu > li > a { display: flex; align-items: center; }
	/* Hovering the panel keeps the <li> hovered (it is a DOM descendant), so
	   the panel only needs to not swallow pointer events while hidden. */
	.sk-header .sk-nav .sk-menu .sub-menu { pointer-events: none; }
	.sk-header .sk-nav .sk-menu > li:hover > .sub-menu,
	.sk-header .sk-nav .sk-menu > li:focus-within > .sub-menu { pointer-events: auto; }
}

/* ===========================================================================
   4.98.0 — WHY THE 4.97.0 BLOCK DID NOTHING, AND THE FIX
   ---------------------------------------------------------------------------
   The builder prints each document's styles into <style id="bz-doc-css"> in
   the HEAD, AFTER theme.css. Its selectors look like

       #bz-content .bz-nskinhero > .bz-section-inner

   which is exactly what 4.97.0 wrote here — identical specificity, and the
   later rule wins. So every declaration in that block was overruled on arrival
   and the page never moved. Same reason the earlier attempts at the Limited
   Collection images went nowhere.

   The answer is NOT !important. Adding one class the document never emits —
   the body page class — raises specificity above the document while leaving
   the builder able to beat it with a more specific setting of its own. These
   rules therefore hold whether or not the demo pack has been re-imported.
   ======================================================================== */
@media (min-width: 768px) {

	/* --- Skincare: the title block clears the banner ----------------------
	   margin-bottom, not margin-top: pushing from below leaves the title where
	   the banner wants it and moves the rest of the page down instead. */
	body.sk-page-skincare #bz-content .bz-nskinhero > .bz-section-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 11rem;
	}
	/* The gap belongs to the inner block only — a margin on the section as
	   well doubled it and pushed the banner down the page. */
	body.sk-page-skincare #bz-content .bz-nskinhero {
		margin-bottom: 0;
	}

	body.sk-page-skincare #bz-content .bz-nbalancerow {
		max-width: 1120px;
		margin-left: auto;
		margin-right: auto;
	}
	body.sk-page-skincare #bz-content .bz-nritrow {
		max-width: 820px;
		margin-left: auto;
		margin-right: auto;
	}

	/* The two Limited Collection photographs are no longer handled here. A
	   fit can only ever crop or letterbox, because the frame and the file
	   disagree about shape. The document now gives each frame the file's own
	   aspect ratio, so there is nothing left for a fit to decide. */
}

/* ===========================================================================
   5.15.0 — 16 MOBILE BLOCKS MOVED OUT OF THIS FILE
   ---------------------------------------------------------------------------
   They set width / padding / margin / gap / height / font-size on a builder
   node's own selector, with !important, inside (max-width: 767px). Every one
   of them therefore disabled the matching control in the inspector: an owner
   could change the value, see it in the panel, and see nothing on the page.

   All 42 declarations now live in each node's own `style_mobile`, which is
   where the builder already keeps 147 other mobile values — so the mobile
   design is no longer implemented in two places that fight each other. One
   block was `display: none`, which is not a style but a visibility decision;
   it became `hide_mobile: true` on that node, the control that exists for it.

   What is still here needs to be: 26 blocks reach INSIDE an element — the
   <img> within a figure, the <li> within an icon list, .bz-product-name
   within a product. A per-node style layer cannot express those. See
   docs/02-the-builder.md, "Where a style belongs".
   ======================================================================== */


/* ===========================================================================
   5.40.0 — PRODUCT SUCCESSFULLY ADDED TO YOUR SHOPPING CART

   The confirmation panel from the supplied comp. It is a dialog rather than an
   inline block because it has to appear after an AJAX add on a listing page,
   where there is no page load to render into and no obvious place on the grid
   for it to sit without pushing the products around.

   Annotated values from the comp, mapped to the existing tokens:
     item name colour   #AA6A04  -> --bz-gold
     checkout bar       #506C61  -> --bz-sage-dark
     name weight        MIDIUM   -> 500     size suffix LIGHT -> 300
     amounts            SEMIBOLD -> 600     rows REGULAR -> 400
   ======================================================================== */

.sk-atc {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.sk-atc.is-open { display: flex; }
.sk-atc-scrim { position: absolute; inset: 0; background: rgba(20, 24, 22, .35); }

.sk-atc-dialog {
	position: relative;
	width: 100%;
	max-width: 1140px;
	max-height: calc(100vh - 48px);
	overflow: auto;
	background: var(--bz-white, #fff);
	border: 1px solid #d9d5cd;
}
.sk-atc-close {
	position: absolute; top: 10px; right: 12px;
	width: 32px; height: 32px;
	background: transparent; border: 0; cursor: pointer;
	font: 300 20px/1 'Montserrat', sans-serif;
	color: var(--bz-ink, #2A2A2A);
}
.sk-atc-close:hover { opacity: .55; }

/* The heading is a full-width banded row in the comp, ruled off from the body. */
.sk-atc-heading {
	margin: 0;
	padding: 26px 56px;
	text-align: center;
	border-bottom: 1px solid #d9d5cd;
	font: 400 19px/1.3 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
}

/* Product on the left, totals on the right, a hairline between them. The
   product side is narrower than half — the comp gives the totals the room. */
/* 460px, not 380px: at the narrower measure the product name broke onto four
   lines instead of the two the comp shows, which pushed the qty row down past
   the totals and made the two halves look unrelated. */
.sk-atc-grid {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	align-items: start;
}
.sk-atc-product {
	display: flex;
	gap: 24px;
	padding: 30px;
	border-right: 1px solid #d9d5cd;
}
.sk-atc-thumb { flex: 0 0 auto; }
.sk-atc-thumb img { width: 150px; height: auto; display: block; }
.sk-atc-info { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.sk-atc-name {
	margin: 0;
	font: 500 17px/1.4 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bz-gold, #AA6A04);
}
/* The size suffix — "(50ML)" in the comp — is set lighter than the name. */
.sk-atc-name .sk-atc-size { font-weight: 300; }
.sk-atc-line {
	display: flex; align-items: center; gap: 18px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--bz-ink, #2A2A2A);
}
.sk-atc-qty {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 24px; padding: 0 5px;
	border: 1px solid var(--bz-ink, #2A2A2A);
	font: 400 13px/1 'Montserrat', sans-serif;
}
.sk-atc-price { font: 600 20px/1 'Montserrat', sans-serif; }

.sk-atc-totals { padding: 30px 34px 34px; }
.sk-atc-count {
	margin: 0 0 4px;
	font: 300 16px/1.5 'Montserrat', sans-serif;
	color: var(--bz-ink, #2A2A2A);
}
.sk-atc-row {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 10px 0;
	font: 400 17px/1.4 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
}
/* The total sits on a tinted band in the comp; the tint is the page cream so
   the panel does not introduce a colour of its own. */
.sk-atc-row--total {
	background: var(--bz-cream-soft, #F9F8F7);
	padding: 16px 18px;
	margin: 8px -18px 0;
}
.sk-atc-amount, .sk-atc-amount .amount { font-weight: 600; white-space: nowrap; }

.sk-atc-actions {
	display: flex; align-items: center; justify-content: flex-end; gap: 40px;
	margin-top: 42px;
}
.sk-atc-continue {
	background: transparent; border: 0; padding: 0; cursor: pointer;
	font: 500 17px/1 'Montserrat', sans-serif;
	letter-spacing: .02em; text-transform: uppercase;
	color: var(--bz-ink, #2A2A2A);
}
.sk-atc-continue:hover { opacity: .6; }
.sk-atc-checkout {
	display: inline-block;
	background: var(--bz-sage-dark, #506C61);
	color: #fff; text-decoration: none;
	padding: 20px 40px;
	font: 600 17px/1 'Montserrat', sans-serif;
	letter-spacing: .04em; text-transform: uppercase;
	transition: background .18s ease;
}
.sk-atc-checkout:hover { background: var(--bz-slate, #414F4E); color: #fff; }

/* Below the divider's usable width the two halves stack and the rule becomes a
   horizontal one, so the product still reads as separate from the totals. */
@media (max-width: 860px) {
	.sk-atc { padding: 12px; }
	.sk-atc-grid { grid-template-columns: 1fr; }
	.sk-atc-product { border-right: 0; border-bottom: 1px solid #d9d5cd; padding: 20px; gap: 16px; }
	.sk-atc-thumb img { width: 110px; }
	.sk-atc-heading { padding: 18px 44px; font-size: 15px; }
	.sk-atc-name { font-size: 14px; }
	.sk-atc-totals { padding: 20px; }
	.sk-atc-row { font-size: 14px; }
	.sk-atc-actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; margin-top: 24px; }
	.sk-atc-checkout { text-align: center; padding: 16px 20px; font-size: 14px; }
	.sk-atc-continue { font-size: 14px; padding: 6px 0; }
}