/*
Theme Name: Beelicious Bites
Theme URI: https://www.beeliciousbites.co.za
Author: Beelicious Bites
Description: A one-page theme for Beelicious Bites: bite-sized brownies, mini cookies and cake push pops, with corporate and personalised gifting. Emerald and gold, built mobile-first, with an editable range of treats, contact details and an enquiry form.
Version: 1.25.4
Requires at least: 5.8
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beelicious-bites
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/*
 * Mobile-first: the base styles below are the phone layout.
 *   @media (min-width: 700px)  adds the tablet layout
 *   @media (min-width: 1024px) adds the desktop layout
 * Each section keeps its own media queries next to it, so everything about
 * one section is in one place.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--emerald: #0B5D4A;
	--emerald-deep: #0A4635;
	--emerald-mid: #0F5F48;
	--emerald-hex: #0E6650;
	--gold: #E4C370;
	--gold-hi: #F2DB90;
	--gold-line: #D6AB4E;
	--gold-ink: #7A5A12;
	--gold-num: #9A7420;
	--cream: #FBF6E9;
	--cream-alt: #F4ECD6;
	--ink: #12332B;
	--on-dark: #EFE9DC;
	--white: #FFFFFF;
	--field-border: #8C7A4A;

	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--pad-x: clamp(20px, 5.5vw, 80px);
	--pad-y: clamp(56px, 6vw + 32px, 112px);
	--header-h: 76px;
	--hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@media (min-width: 1024px) {
	:root { --header-h: 96px; }
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h); /* anchor jumps land below the sticky header */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
	body { font-size: 17px; }
}

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

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.82; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gold-line);
	outline-offset: 3px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	background: var(--gold);
	color: var(--emerald-deep);
	font-weight: 600;
}

/* ==========================================================================
   Shared pieces
   ========================================================================== */
.eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.eyebrow--light { color: var(--gold-hi); }

.section { padding: var(--pad-y) var(--pad-x); }

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.section-title {
	font-size: clamp(34px, 3.8vw + 20px, 56px);
	line-height: 1.1;
	color: var(--emerald);
}
.section-lead { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.6; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}
.btn--small { min-height: 44px; padding: 8px 22px; font-size: 15px; }
.btn--gold { background: var(--gold); color: var(--emerald-deep); }
.btn--outline-light { border-color: var(--gold-hi); color: var(--cream); }
.btn--outline-dark { border-color: var(--emerald); color: var(--emerald); }
.btn--emerald { background: var(--emerald); color: var(--cream); letter-spacing: 0.06em; }
@media (min-width: 700px) {
	.btn { min-height: 56px; padding: 14px 32px; }
}

.link-underline {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--emerald);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.hex-bullet {
	flex-shrink: 0;
	width: 12px;
	height: 14px;
	margin-top: 6px;
	background: var(--gold);
	clip-path: var(--hex);
}

/* ==========================================================================
   Header: sticky on every screen size, logo on the left
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--header-h);
	padding: 0 var(--pad-x);
	background: var(--emerald);
	box-shadow: 0 1px 0 rgba(242, 219, 144, 0.25);
}
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) {
	.admin-bar .site-header { top: 32px; }
}

.brand { display: block; flex-shrink: 0; line-height: 0; }
.site-header .brand__logo,
.site-header .custom-logo-link img {
	display: block;
	width: auto;
	height: calc(var(--header-h) - 12px);
	max-height: none;
}
.custom-logo-link { display: block; flex-shrink: 0; }

/* Phone and tablet: hamburger, menu drops down under the header. */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--gold-hi);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--gold-hi);
	content: '';
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after { position: absolute; top: 7px; }
.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: 8px var(--pad-x) 28px;
	background: var(--emerald-deep);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.site-header.is-open .primary-nav { display: flex; }
.primary-nav ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.primary-nav li + li { border-top: 1px solid rgba(242, 219, 144, 0.2); }
.primary-nav a {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--cream);
}
.primary-nav li a { display: flex; align-items: center; min-height: 56px; }
.primary-nav a.btn { color: var(--emerald-deep); }

/* Desktop: inline menu. */
@media (min-width: 1024px) {
	.nav-toggle { display: none; }
	.primary-nav,
	.site-header.is-open .primary-nav {
		display: flex;
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 32px;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: none;
		box-shadow: none;
	}
	.primary-nav ul { flex-direction: row; align-items: center; gap: clamp(18px, 2.4vw - 6px, 32px); }
	.primary-nav,
	.site-header.is-open .primary-nav { gap: clamp(18px, 2.4vw - 6px, 32px); }
	.primary-nav li + li { border-top: 0; }
	.primary-nav a { font-size: 15px; white-space: nowrap; }
	.primary-nav li a { min-height: 44px; }
}

/* ==========================================================================
   Hero, with the decorative hexagons behind the text
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 48px var(--pad-x) 72px;
	background: var(--emerald);
}
.hero__hex {
	position: absolute;
	background: var(--emerald-hex);
	clip-path: var(--hex);
	pointer-events: none;
}
.hero__hex--1 { right: -110px; bottom: -120px; width: 300px; height: 346px; }
.hero__hex--2 { right: 24px; top: 24px; width: 72px; height: 83px; }
.hero__hex--3 { left: -40px; bottom: 40px; width: 96px; height: 111px; opacity: 0.7; }

.hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 22px;
	width: 100%;
}
.hero__title {
	font-size: clamp(46px, 5vw + 28px, 88px);
	line-height: 1;
	color: var(--cream);
}
.hero__title em { display: block; font-style: italic; color: var(--gold-hi); }
.hero__lead {
	margin: 0;
	max-width: 560px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--on-dark);
}
.hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

@media (min-width: 700px) {
	.hero { min-height: 560px; padding: 72px var(--pad-x) 96px; }
	.hero__copy { align-items: flex-start; max-width: 600px; gap: 28px; }
	.hero__lead { font-size: 20px; }
	.hero__actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
	.hero__hex--1 { right: -60px; top: auto; bottom: -80px; width: 380px; height: 438px; }
	.hero__hex--2 { right: 80px; top: 48px; width: 110px; height: 127px; }
	.hero__hex--3 { left: auto; right: 300px; bottom: 60px; width: 90px; height: 104px; opacity: 1; }
}
@media (min-width: 1024px) {
	.hero { min-height: 680px; }
	.hero__copy { max-width: 660px; }
	.hero__lead { font-size: 21px; }
	.hero__hex--1 { right: 60px; top: 70px; bottom: auto; width: 440px; height: 508px; }
	.hero__hex--2 { right: 470px; top: 430px; width: 200px; height: 231px; }
	.hero__hex--3 { right: 30px; top: 540px; bottom: auto; width: 150px; height: 173px; }
}

/* ==========================================================================
   Gold band
   ========================================================================== */
.band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	padding: 14px var(--pad-x);
	background: var(--gold);
	color: var(--emerald-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}
.band__hex {
	width: 9px;
	height: 10px;
	background: var(--emerald);
	clip-path: var(--hex);
}
@media (min-width: 700px) {
	.band { gap: 14px 40px; min-height: 64px; font-size: 14px; letter-spacing: 0.28em; }
	.band__hex { width: 10px; height: 12px; }
}

/* ==========================================================================
   Three ways
   ========================================================================== */
.ways { background: var(--cream); }
.ways__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 36px;
}
/* Phone and tablet: icon beside the title, text underneath. */
.way {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px 16px;
	padding: 24px 20px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--white);
}
.way__text,
.way .link-underline { grid-column: 1 / -1; }
.hex-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 60px;
	background: var(--emerald);
	clip-path: var(--hex);
}
.hex-icon svg { width: 26px; height: 26px; }
.way__title { font-size: 28px; line-height: 1.1; color: var(--emerald); }
.way__text { margin: 0; font-size: 16px; line-height: 1.6; }
.way .link-underline { justify-self: start; }

@media (min-width: 700px) {
	.ways__grid { gap: 20px; margin-top: 48px; }
	.way { padding: 28px 32px; }
}
@media (min-width: 1024px) {
	.ways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
	.way {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 40px;
	}
	.hex-icon { width: 64px; height: 74px; }
	.hex-icon svg { width: 30px; height: 30px; }
	.way__title { font-size: 34px; }
	.way__text { font-size: 17px; line-height: 1.65; }
}

/* ==========================================================================
   The range: two treats per row on phones, four on tablet and desktop
   ========================================================================== */
.range {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	background: var(--cream-alt);
}
.range .section-title { max-width: 820px; }
.range > .btn { width: 100%; }

.treat-group { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.treat-group__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--gold-line);
}
.treat-group__title { font-size: 32px; line-height: 1.1; color: var(--emerald); }
.treat-group__note {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.treat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 14px;
}

.treat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.treat__frame {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	max-width: 264px;
	aspect-ratio: 264 / 305;
	margin-bottom: 6px;
	background: var(--gold);
	clip-path: var(--hex);
}
.treat__window {
	position: absolute;
	inset: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 50%, #23956F 0%, #0F5F48 55%, #072F24 100%);
	clip-path: var(--hex);
}
/* Product photos fill the hexagon. */
.treat__window img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.treat__name {
	font-size: 23px;
	font-style: italic;
	line-height: 1.1;
	color: var(--emerald);
}
.treat__desc { max-width: 250px; margin: 0; font-size: 14px; line-height: 1.45; }

.treat-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	padding: 28px 22px;
	border: 2px solid var(--gold);
	border-radius: 4px;
	background: var(--emerald);
}
.treat-box__title { font-size: 34px; line-height: 1.1; color: var(--cream); }
.treat-box__sub { margin: 6px 0 0; font-size: 16px; font-weight: 500; color: var(--gold-hi); }
.treat-box__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gold-hi);
}
.treat-box__line { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.treat-box__line--small { font-size: 15px; }
.treat-box__price {
	font-family: var(--serif);
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
	color: var(--gold-hi);
}

@media (min-width: 700px) {
	.range { gap: 64px; }
	.range > .btn { width: auto; }
	.treat-group { gap: 32px; }
	.treat-group__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
	.treat-group__title { font-size: 40px; }
	.treat-group__note { font-size: 14px; }
	.treat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
	.treat__name { font-size: 26px; }
	.treat__desc { font-size: 15px; }
	.treat-box { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 32px 40px; }
	.treat-box__title { font-size: 40px; }
	.treat-box__price { font-size: 72px; }
}
@media (min-width: 1024px) {
	.range { gap: 72px; }
	.treat-group { gap: 36px; }
	.treat-group__title { font-size: 44px; }
	.treat-group__note { font-size: 15px; }
	.treat-grid { gap: 40px 32px; }
	.treat__window { inset: 5px; }
	.treat__name { font-size: 34px; }
	.treat__desc { font-size: 16px; line-height: 1.5; }
	.treat-box { padding: 32px 48px; gap: 28px 48px; }
	.treat-box__sub,
	.treat-box__line { font-size: 17px; }
	.treat-box__price { font-size: 80px; }
}

/* ==========================================================================
   Christmas collection (seasonal; inc/christmas.php)
   ========================================================================== */
.christmas {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	background: var(--emerald-deep);
	scroll-margin-top: var(--header-h);
}
.christmas__hex {
	position: absolute;
	background: var(--emerald-mid);
	clip-path: var(--hex);
	pointer-events: none;
}
.christmas__hex--1 { left: -90px; top: -70px; width: 240px; height: 277px; }
.christmas__hex--2 { right: -60px; top: 38%; width: 160px; height: 185px; opacity: 0.8; }
.christmas .section-head { position: relative; }
.christmas__title { color: var(--cream); }
.christmas__title em { display: block; color: var(--gold-hi); }
.christmas__lead { color: var(--on-dark); }
.christmas__deadline {
	margin: 6px 0 0;
	padding: 8px 18px;
	border: 1px solid var(--gold);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-hi);
}

.xmas-group { position: relative; width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 24px; }
.xmas-group__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--gold-line);
}
.xmas-group__title { font-size: 32px; line-height: 1.1; color: var(--gold-hi); }
.xmas-group__note {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}
.xmas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xmas-group--gingerbread .xmas-grid { grid-template-columns: minmax(0, 1fr); }

.xmas-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--cream);
}
.xmas-card__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-alt); }
.xmas-group--gingerbread .xmas-card__photo { aspect-ratio: 3 / 2; }
.xmas-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.xmas-card__photo:hover img { transform: scale(1.03); }
.xmas-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 14px 16px; }
.xmas-card__code { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-ink); }
.xmas-card__name { font-size: 22px; font-style: italic; line-height: 1.1; color: var(--emerald); }
.xmas-card__desc { margin: 0; font-size: 14px; line-height: 1.45; }
.xmas-card__price { margin: auto 0 0; padding-top: 8px; font-size: 16px; font-weight: 600; color: var(--emerald); }
.xmas-card__price span { display: block; }

.christmas__actions { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* Home page: "Add to cart" on each product, and the "Added to your cart" message */
.xmas-card { scroll-margin-top: calc(var(--header-h) + 16px); }
.card-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.card-add__select {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--gold);
	border-radius: 2px;
	background: var(--white);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
}
.card-add .btn { width: 100%; }
/* Pushed to the bottom so the buttons in a row line up, whatever the description length. */
.treat__add { margin-top: auto; }
.treat:has(.treat__add) .treat__desc { padding-bottom: 10px; }
.home-notices {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 200;
	width: min(560px, calc(100% - 32px));
	transform: translateX(-50%);
}
.home-notices ul,
.home-notices .woocommerce-message,
.home-notices .woocommerce-error { margin: 0 !important; }
.home-notices .woocommerce-message,
.home-notices .woocommerce-error { padding-right: 56px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.home-notices__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: var(--emerald);
	cursor: pointer;
}
.qty.is-picked { background: var(--cream); box-shadow: inset 3px 0 0 var(--gold); }

@media (min-width: 700px) {
	.xmas-grid { gap: 22px; }
	.xmas-card__body { padding: 18px 18px 20px; }
	.xmas-card__name { font-size: 25px; }
	.christmas__actions { flex-direction: row; justify-content: center; width: auto; }
}
@media (min-width: 1024px) {
	.xmas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
	.xmas-group--gingerbread .xmas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.xmas-group__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; }
}

/* ==========================================================================
   Corporate gifting
   ========================================================================== */
.corporate {
	display: flex;
	flex-direction: column;
	gap: 40px;
	background: var(--emerald);
}
.corporate__copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 22px;
}
.corporate__title {
	font-size: clamp(36px, 3.4vw + 22px, 60px);
	line-height: 1.05;
	color: var(--cream);
}
.corporate__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-dark); }
.corporate__copy .btn { margin-top: 6px; }
.corporate__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.corporate__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cream);
}
.corporate__visual {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 300px;
	margin: 0 auto;
}
.hex-photo {
	position: absolute;
	width: 190px;
	height: 219px;
	overflow: hidden;
	background: var(--emerald-mid);
	clip-path: var(--hex);
}
.hex-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hex-photo--1 { left: 0; top: 0; }
.hex-photo--2 { right: 0; top: 80px; }

@media (min-width: 700px) {
	.corporate__copy { align-items: flex-start; }
	.corporate__lead { font-size: 19px; }
	.corporate__list li { font-size: 18px; gap: 16px; }
	.corporate__visual { max-width: 620px; height: 440px; }
	.hex-photo { width: 280px; height: 323px; }
	.hex-photo--2 { top: 117px; }
}
@media (min-width: 1024px) {
	.corporate { flex-direction: row; align-items: center; gap: 80px; }
	.corporate__copy { flex: 1 1 0; min-width: 0; max-width: 620px; gap: 28px; }
	/* The two photos scale with their column, so narrow desktops don't overflow. */
	.corporate__visual { flex: 1 1 0; min-width: 0; max-width: 620px; height: auto; aspect-ratio: 616 / 520; margin: 0; }
	.hex-photo { width: 48.7%; height: auto; aspect-ratio: 300 / 346; }
	.hex-photo--2 { left: auto; right: 0; top: 33.5%; }
}

/* ==========================================================================
   Personalised gifts and About: one framed photo beside the copy
   ========================================================================== */
.split {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}
.personalised { background: var(--cream); }
.about { background: var(--white); }
.split__visual { display: flex; justify-content: center; width: 100%; }
.split__copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	width: 100%;
}
.split__title {
	font-size: clamp(34px, 3.8vw + 20px, 56px);
	line-height: 1.1;
	color: var(--emerald);
}
.split__lead { margin: 0; font-size: 17px; line-height: 1.6; }
.split__price {
	margin: 0;
	font-family: var(--serif);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var(--gold-num);
}
.split__price span {
	display: block;
	margin-top: 8px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.split__text p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.split__text p:last-child { margin-bottom: 0; }
.split__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.split__list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; }
.split__copy .btn { margin-top: 6px; }
.about__sign {
	margin: 4px 0 0;
	font-family: var(--serif);
	font-size: 26px;
	font-style: italic;
	font-weight: 600;
	color: var(--gold-num);
}

/* Gold-edged hexagon photo frame (same look as the treat frames, larger). */
.hex-frame {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: min(100%, 260px);
	aspect-ratio: 300 / 346;
	background: var(--gold);
	clip-path: var(--hex);
}
.hex-frame__window {
	position: absolute;
	inset: 5px;
	overflow: hidden;
	background: var(--emerald-mid);
	clip-path: var(--hex);
}
.hex-frame__window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hex-frame--logo .hex-frame__window {
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 50%, #23956F 0%, #0F5F48 55%, #072F24 100%);
}
.hex-frame--logo .hex-frame__window img { width: 84%; height: auto; object-fit: contain; }
.hex-frame--small { width: 100%; max-width: 120px; }
a.gallery-link { cursor: zoom-in; }
a.gallery-link:hover { opacity: 1; filter: brightness(1.06); }

/* Gallery of message boxes under the Personalised gifts list. */
.box-styles { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 4px; }
.box-styles__label { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--gold-ink); }
.box-styles__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.box-styles__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.box-styles__name { font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--emerald); }

/* Lightbox (opened by main.js). */
.lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(7, 47, 36, 0.93); }
.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: min(94vw, 1100px);
	margin: 0;
	padding: 0 0 72px;
}
.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 170px);
	width: auto;
	height: auto;
	border: 3px solid var(--gold);
	border-radius: 4px;
}
.lightbox__caption { font-family: var(--serif); font-size: 26px; font-style: italic; font-weight: 600; color: var(--gold-hi); }
.lightbox__btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0 0 4px;
	border: 2px solid var(--gold-hi);
	border-radius: 2px;
	background: rgba(10, 70, 53, 0.9);
	color: var(--gold-hi);
	font-family: var(--sans);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 16px; right: 16px; }
/* Phone: arrows sit under the photo, within thumb reach. */
.lightbox__prev { bottom: 20px; left: calc(50% - 60px); }
.lightbox__next { bottom: 20px; left: calc(50% + 12px); }
@media (min-width: 700px) {
	.lightbox__figure { padding: 0; }
	.lightbox__img { max-height: calc(100vh - 120px); }
	.lightbox__prev { top: 50%; bottom: auto; left: 20px; transform: translateY(-50%); }
	.lightbox__next { top: 50%; bottom: auto; left: auto; right: 20px; transform: translateY(-50%); }
}

@media (min-width: 700px) {
	.split__copy { align-items: flex-start; max-width: 640px; }
	.split__lead,
	.split__text p { font-size: 18px; }
	.split__list li { font-size: 18px; gap: 16px; }
	.hex-frame { width: 320px; }
}
@media (min-width: 1024px) {
	.split { flex-direction: row; justify-content: center; gap: 96px; }
	.split__visual { flex: 0 0 auto; width: auto; }
	.split__copy { flex: 0 1 600px; gap: 24px; }
	.hex-frame { width: 380px; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how { background: var(--cream-alt); }
.how__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin-top: 36px;
}
/* Phone: number beside the title. */
.step {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 8px 16px;
	padding-top: 20px;
	border-top: 2px solid var(--gold-line);
}
.step__text { grid-column: 1 / -1; }
.step__num {
	font-family: var(--serif);
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	color: var(--gold-num);
}
.step__title { font-size: 28px; line-height: 1.1; color: var(--emerald); }
.step__text { margin: 0; font-size: 16px; line-height: 1.6; }

@media (min-width: 700px) {
	.how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
	.step { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
	.step__num { font-size: 60px; }
}
@media (min-width: 1024px) {
	.how__steps { gap: 48px; margin-top: 64px; }
	.step { gap: 16px; padding-top: 28px; }
	.step__num { font-size: 72px; }
	.step__title { font-size: 32px; }
	.step__text { font-size: 17px; line-height: 1.65; }
}

/* ==========================================================================
   Delivery
   ========================================================================== */
.delivery {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	background: var(--cream);
}
.delivery__table-wrap { width: 100%; max-width: 720px; }
.delivery__table {
	width: 100%;
	border: 1px solid var(--gold);
	border-radius: 4px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--white);
	font-size: 15px;
}
.delivery__table th,
.delivery__table td { padding: 12px 12px; border-bottom: 1px solid var(--cream-alt); text-align: left; vertical-align: middle; }
.delivery__table tbody tr:last-child th,
.delivery__table tbody tr:last-child td { border-bottom: 0; }
.delivery__table thead th {
	background: var(--emerald);
	color: var(--gold-hi);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.delivery__table tbody th { font-weight: 400; }
.delivery__table tbody th strong {
	display: block;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--emerald);
}
.delivery__table tbody th span { font-size: 13px; color: var(--ink); opacity: 0.75; }
.delivery__table th:last-child,
.delivery__fee { text-align: right; }
.delivery__fee {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--gold-num);
	white-space: nowrap;
}
.delivery__subtitle { margin-top: 8px; font-size: 28px; line-height: 1.15; color: var(--emerald); text-align: center; }
.delivery__date { font-weight: 600; color: var(--emerald); }
.parcel-guide {
	width: 100%;
	max-width: 720px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--white);
}
.parcel-guide li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--cream-alt);
	font-size: 15px;
}
.parcel-guide li:last-child { border-bottom: 0; }
.parcel-guide strong { color: var(--emerald); white-space: nowrap; }
.delivery__table--zones th:last-child,
.delivery__table--zones td:last-child { text-align: right; }
.delivery__note { max-width: 620px; margin: 0; font-size: 14px; line-height: 1.55; text-align: center; color: var(--gold-ink); }
.delivery > .btn { width: 100%; }

@media (min-width: 700px) {
	.delivery { gap: 36px; }
	.delivery__table { font-size: 16px; }
	.delivery__table th,
	.delivery__table td { padding: 14px 24px; }
	.delivery__table tbody th strong { display: inline; margin-right: 10px; }
	.delivery__note { font-size: 15px; }
	.delivery > .btn { width: auto; }
}

/* Lead-time callouts and the live note under "Date needed". */
.lead-time {
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--gold-line);
	border-radius: 2px;
	background: var(--white);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.lead-time strong { color: var(--emerald); }
.lead-time--banner { max-width: 720px; width: 100%; font-size: 16px; text-align: center; border-left: 0; border-top: 3px solid var(--gold-line); }
.field__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gold-ink); }
.field__note.is-ok { color: var(--emerald); font-weight: 600; }
.field__note.is-error { color: #8A2D1F; font-weight: 600; }

/* Delivery part of the enquiry form. */
.delivery-address { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 700px) {
	.field--short { max-width: 220px; }
}

/* ==========================================================================
   Find us
   ========================================================================== */
.market {
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: var(--emerald-deep);
}
.market__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.market__title { font-size: clamp(34px, 3.8vw + 20px, 56px); line-height: 1.1; color: var(--cream); }
.market__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-dark); }
.market__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(242, 219, 144, 0.4);
}
.market__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid rgba(242, 219, 144, 0.4);
}
.market__name { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--cream); }
.market__when { font-size: 16px; color: var(--gold-hi); }

@media (min-width: 700px) {
	.market__row { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 24px 0; }
	.market__name { font-size: 30px; }
	.market__when { font-size: 17px; }
}
@media (min-width: 1024px) {
	.market { flex-direction: row; align-items: flex-start; gap: 96px; }
	.market__copy { flex: 0 1 520px; gap: 20px; }
	.market__lead { font-size: 18px; }
	.market__list { flex: 1 1 0; min-width: 0; }
	.market__row { padding: 28px 0; }
}

/* ==========================================================================
   Enquiries
   ========================================================================== */
.enquire {
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: var(--cream);
}
.enquire__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.enquire__title { font-size: clamp(34px, 3.8vw + 20px, 56px); line-height: 1.1; color: var(--emerald); }
.enquire__lead { margin: 0; font-size: 17px; line-height: 1.6; }
.contact-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	color: var(--emerald);
}
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Social links (Enquiries section and footer). */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--emerald);
}
.social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.social-links a:hover span { text-decoration: underline; text-underline-offset: 5px; }
.social-icon { flex-shrink: 0; }
.social-links--footer { flex-direction: column; gap: 0; font-weight: 400; color: var(--cream); }
.social-links--footer .social-icon { color: var(--gold-hi); }

.enquiry-form {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 16px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--white);
}
.enquiry-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--emerald);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	border: 1px solid var(--field-border);
	border-radius: 2px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px; /* 16px or more stops phones zooming in on focus */
}
.field select { padding: 0 10px; }
.field textarea { height: 140px; padding: 14px; resize: vertical; }
.field__hint { font-weight: 500; letter-spacing: 0; color: var(--gold-ink); }
.enquiry-form .btn { width: 100%; }
.enquiry-form [hidden] { display: none !important; }
.enquiry-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 700px) {
	.enquire { gap: 48px; }
	.enquire__lead { font-size: 18px; }
	.enquiry-form { gap: 24px; padding: 40px; }
	.enquiry-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.enquiry-form .btn { width: auto; align-self: flex-start; }
}
@media (min-width: 1024px) {
	.enquire { flex-direction: row; align-items: flex-start; gap: 64px; }
	.enquire__copy { flex: 0 1 400px; gap: 24px; }
	.enquiry-form { flex: 1 1 0; padding: 48px; }
}

/* "Your order" block */
.order {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	margin: 0;
	padding: 16px 12px 20px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--cream);
}
.order__title {
	padding: 0 6px;
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--emerald);
}
.order__title span { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--gold-ink); }
.order__hint { margin: 0; font-size: 15px; line-height: 1.55; }
.order__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--gold);
}
.order__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}
.order__name { font-size: 25px; line-height: 1.1; color: var(--emerald); }
.order__price {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.order__desc { margin: 0; font-size: 15px; line-height: 1.5; }
.order__total {
	margin: 0;
	padding: 14px 16px;
	border-radius: 2px;
	background: var(--emerald);
	color: var(--cream);
	font-size: 16px;
}
.order__total strong { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--gold-hi); }

@media (min-width: 700px) {
	.order { gap: 20px; padding: 24px 28px 28px; }
	.order__title { padding: 0 8px; font-size: 30px; }
	.order__title span { font-size: 15px; }
	.order__hint,
	.order__desc { font-size: 16px; }
	.order__item { gap: 16px; padding-top: 20px; }
	.order__name { font-size: 28px; }
	.order__price { font-size: 15px; }
	.order__total { padding: 16px 20px; font-size: 17px; }
	.order__total strong { font-size: 30px; }
}

/* Quantity rows: "Biscoff  [ - 0 + ]" */
.qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 4px 0;
	border-bottom: 1px solid var(--cream-alt);
}
.qty__label { min-width: 0; font-size: 16px; line-height: 1.3; }
.qty--lead { border-bottom: 0; }
.qty--lead .qty__label { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--emerald); }
.qty__input {
	width: 48px;
	height: 44px;
	padding: 0 2px;
	border: 1px solid var(--field-border);
	border-radius: 2px;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	text-align: center;
}
.stepper { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; }
.stepper .qty__input { -moz-appearance: textfield; appearance: textfield; }
.stepper .qty__input::-webkit-inner-spin-button,
.stepper .qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.stepper__btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--emerald);
	border-radius: 2px;
	background: var(--white);
	color: var(--emerald);
	font-family: var(--sans);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation; /* no double-tap zoom when tapping + quickly */
}
.stepper__btn:hover { background: var(--emerald); color: var(--cream); }

.picker { display: flex; flex-direction: column; gap: 6px; }
.picker__count {
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid var(--gold-line);
	background: var(--white);
	font-size: 15px;
	font-weight: 600;
	color: var(--emerald);
}
.picker__count.is-done { border-left-color: var(--emerald); }
.picker__count.is-over { border-left-color: #8A2D1F; color: #5E1B11; }
.picker__group {
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.picker__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

@media (min-width: 700px) {
	.qty { gap: 12px; }
	.qty__input { width: 56px; padding: 0 4px; }
	.stepper { gap: 6px; }
	.picker { gap: 8px; }
	.picker__count { padding: 10px 14px; font-size: 16px; }
	.picker__group { font-size: 13px; }
}
/* Two columns of flavours only when the order box itself is wide enough. */
.order { container-type: inline-size; }
@container (min-width: 600px) {
	.picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}

.notice {
	margin: 0;
	padding: 14px 16px;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 500;
}
.notice--ok { border: 1px solid var(--emerald); background: #E8F3EE; color: var(--emerald-deep); }
.notice--error { border: 1px solid #8A2D1F; background: #FBEBE7; color: #5E1B11; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 48px var(--pad-x) 28px;
	background: var(--emerald);
	color: var(--cream);
}
.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}
.site-footer__logo { display: block; width: 180px; height: auto; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-title {
	margin: 0 0 6px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold-hi);
}
.footer-col ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer-col a,
.footer-col span { font-size: 16px; color: var(--cream); }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 20px;
	border-top: 1px solid rgba(242, 219, 144, 0.35);
	font-size: 14px;
	color: var(--on-dark);
}

@media (min-width: 700px) {
	.site-footer { gap: 56px; padding: 64px var(--pad-x) 36px; }
	.site-footer__top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
	.site-footer__logo { width: 240px; }
	.site-footer__cols { gap: 48px 96px; }
	.footer-col a,
	.footer-col span { font-size: 17px; }
	.site-footer__bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 24px; }
}
@media (min-width: 1024px) {
	.site-footer { min-height: 420px; justify-content: space-between; padding: 72px var(--pad-x) 40px; }
	.site-footer__logo { width: 300px; }
}

/* ==========================================================================
   Shop: thank-you page (Checkout > Order received)
   ========================================================================== */
.woocommerce-order-received .content > .entry > h1 { display: none; }
.woocommerce-order { display: flex; flex-direction: column; gap: 24px; }
.thanks__badge { display: flex; justify-content: center; }
.thanks__badge span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	aspect-ratio: 300 / 346;
	background: radial-gradient(circle at 50% 50%, #23956F 0%, #0F5F48 55%, #072F24 100%);
	clip-path: var(--hex);
}
.thanks__badge img { width: 82%; height: auto; }
.woocommerce-order .woocommerce-thankyou-order-received {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}
.woocommerce-order .woocommerce-thankyou-order-received::before { display: none; }
.thanks__title {
	font-family: var(--serif);
	font-size: clamp(34px, 3.8vw + 20px, 52px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--emerald);
}
.thanks__lead { font-size: 17px; line-height: 1.6; color: var(--ink); }
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--gold);
	list-style: none;
}
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after { display: none; }
.woocommerce-order ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	background: var(--white);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-ink);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-family: var(--serif);
	font-size: 22px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--emerald);
}
.thanks__panel {
	padding: 22px 20px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--white);
}
.woocommerce-order .thanks__heading { margin: 0 0 14px; font-size: 26px; color: var(--emerald); }
.thanks__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.thanks__rows div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--cream-alt); }
.thanks__rows div:last-child { padding-bottom: 0; border-bottom: 0; }
.thanks__rows dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.thanks__rows dd { margin: 0; font-size: 16px; color: var(--ink); }
.thanks__steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.thanks__steps li::marker { font-family: var(--serif); font-weight: 700; color: var(--gold-num); }
.thanks__steps strong { display: block; color: var(--emerald); }
.thanks__sign { margin: 16px 0 0; font-family: var(--serif); font-size: 24px; font-style: italic; font-weight: 600; color: var(--gold-num); }
.thanks__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.thanks__actions .btn { width: 100%; }
.social-links--thanks { justify-content: center; }
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { margin: 0; }
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order h2.woocommerce-column__title { margin: 0 0 12px; font-size: 26px; color: var(--emerald); }
.woocommerce-order table.shop_table { border-color: var(--gold); border-radius: 4px; background: var(--white); }
.woocommerce-order .woocommerce-customer-details address { border-color: var(--gold); border-radius: 4px; background: var(--white); }

@media (min-width: 700px) {
	.woocommerce-order ul.woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.thanks__panel { padding: 28px 32px; }
	.thanks__rows div { flex-direction: row; gap: 16px; }
	.thanks__rows dt { flex: 0 0 170px; padding-top: 3px; }
	.thanks__actions .btn { width: auto; }
}

/* ==========================================================================
   Shop: header cart button
   ========================================================================== */
.header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-left: auto;
	color: var(--gold-hi);
}
.header-cart__count {
	position: absolute;
	top: 3px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--gold);
	color: var(--emerald-deep);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
@media (min-width: 1024px) {
	.primary-nav { margin-left: auto; order: 2; }
	.header-cart { order: 3; margin-left: 0; }
}

/* ==========================================================================
   Shop: "Order online" page
   ========================================================================== */
.shop-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 40px var(--pad-x) 44px;
	background: var(--emerald);
}
.shop-hero__title { font-size: clamp(38px, 4vw + 20px, 64px); line-height: 1.05; color: var(--cream); }
.shop-hero__lead { max-width: 620px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--on-dark); }
.shop {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 900px;
	margin: 0 auto;
	padding: 28px var(--pad-x) var(--pad-y);
}
.shop__notices:empty { display: none; }
.shop__empty { margin: 0; padding: 18px; border: 1px solid var(--gold); background: var(--white); }
.shop-dates {
	padding: 16px 18px;
	border: 1px solid var(--gold);
	border-left: 4px solid var(--gold-line);
	border-radius: 4px;
	background: var(--white);
}
.shop-dates__title { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.shop-dates__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.shop-dates__list li { display: flex; justify-content: space-between; gap: 12px; }
.shop-dates__list strong { color: var(--emerald); }
.shop-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px 16px 24px;
	border: 1px solid var(--gold);
	border-radius: 4px;
	background: var(--white);
	scroll-margin-top: calc(var(--header-h) + 16px);
}
.shop-card [hidden] { display: none !important; }
.shop-card__head { display: flex; align-items: center; gap: 16px; }
.shop-card__photo {
	flex-shrink: 0;
	width: 88px;
	aspect-ratio: 300 / 346;
	overflow: hidden;
	background: var(--gold);
	clip-path: var(--hex);
}
.shop-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: var(--hex); transform: scale(0.94); }
.shop-card__title { font-size: 28px; line-height: 1.1; color: var(--emerald); }
.shop-card__price { margin: 4px 0 0; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.shop-card__desc { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.shop-card__form { display: flex; flex-direction: column; gap: 14px; }
.shop-card__note { margin: 0; font-size: 14px; color: var(--gold-ink); }
.shop-card .btn { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.shop-corporate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 20px;
	border-radius: 4px;
	background: var(--cream-alt);
}
.shop-corporate__title { font-size: 26px; color: var(--emerald); }
.shop-corporate p { margin: 0; }

@media (min-width: 700px) {
	.shop-hero { padding: 56px var(--pad-x) 60px; }
	.shop-card { padding: 28px 32px 32px; }
	.shop-card__photo { width: 120px; }
	.shop-card__title { font-size: 34px; }
	.shop-card .btn { width: auto; align-self: flex-start; }
	.shop-dates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* WooCommerce notices ("Added to your cart", errors) in the brand colours. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	border-top-color: var(--emerald) !important;
	background: var(--white) !important;
	color: var(--ink) !important;
	font-family: var(--sans);
}
.woocommerce-error { border-top-color: #8A2D1F !important; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--emerald) !important; }
.woocommerce-message .button {
	border-radius: 2px !important;
	background: var(--emerald) !important;
	color: var(--cream) !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   Shop: cart and checkout (WooCommerce blocks)
   ========================================================================== */
.woocommerce-cart .content,
.woocommerce-checkout .content { max-width: 1140px; }
.woocommerce-cart .content .shop-dates,
.woocommerce-checkout .content .shop-dates { margin-bottom: 24px; }
.wc-block-components-button:not(.is-link) {
	border-radius: 2px !important;
	background: var(--emerald) !important;
	color: var(--cream) !important;
	font-family: var(--sans) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
}
.wc-block-components-button:not(.is-link):hover { background: var(--emerald-deep) !important; }
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title { font-family: var(--serif) !important; color: var(--emerald) !important; }
.wc-block-components-checkout-step__title { font-size: 26px !important; font-weight: 600 !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--emerald); }
.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected,
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--emerald) !important;
	background: #F1F7F4 !important;
}
.wc-block-components-radio-control__input:checked { border-color: var(--emerald) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--emerald) !important; }
.wc-block-components-product-metadata { font-size: 14px; }
/* Payfast and Ozow only show their logos: say what each one is, as on Takealot. */
#radio-control-wc-payment-method-options-payfast__label,
#radio-control-wc-payment-method-options-ozow__label {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	width: 100%;
	font-weight: 600;
	color: var(--ink);
}
#radio-control-wc-payment-method-options-payfast__label::before { content: "Card"; }
#radio-control-wc-payment-method-options-ozow__label::before { content: "Instant EFT"; }
#radio-control-wc-payment-method-options-payfast__label img,
#radio-control-wc-payment-method-options-ozow__label img { max-height: 20px; width: auto; }
.content .shop-dates p,
.content .shop-dates li { font-size: 14px; line-height: 1.5; }
.content .shop-dates p { font-size: 15px; }
.content a.wc-block-components-button,
.content .wc-block-components-button { text-decoration: none; }

/* ==========================================================================
   Generic pages and posts
   ========================================================================== */
.content { max-width: 820px; margin: 0 auto; padding: var(--pad-y) var(--pad-x); }
.content h1 { font-size: clamp(36px, 3.8vw + 22px, 60px); line-height: 1.1; color: var(--emerald); margin-bottom: 24px; }
.content h2,
.content h3 { color: var(--emerald); margin: 40px 0 16px; line-height: 1.15; }
.content h2 { font-size: clamp(30px, 2vw + 22px, 40px); }
.content h3 { font-size: clamp(24px, 1.2vw + 20px, 30px); }
.content p,
.content li { font-size: 17px; line-height: 1.7; }
.content a { color: var(--emerald); text-decoration: underline; text-underline-offset: 4px; }
/* Buttons inside page content (e.g. the thank-you page) keep their own colours. */
.content a.btn { text-decoration: none; }
.content a.btn--emerald,
.content a.btn--outline-light { color: var(--cream); }
.content a.btn--gold { color: var(--emerald-deep); }
.content a.btn--outline-dark { color: var(--emerald); }
.content .entry { margin-bottom: 56px; }
@media (min-width: 1024px) {
	.content p,
	.content li { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after { transition: none; }
}

/* Order online: Christmas collection card */
.shop-card--christmas { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--cream-alt); }
.xmas-rows { display: flex; flex-direction: column; }
.xmas-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--cream-alt); }
.xmas-row__photo { flex-shrink: 0; width: 64px; height: 80px; object-fit: cover; border-radius: 3px; }
.xmas-row__body { flex: 1; min-width: 0; }
.xmas-row__name { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--emerald); }
.xmas-row__code { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold-ink); white-space: nowrap; }
.xmas-row__zoom { flex-shrink: 0; display: block; }

/* Order online: tap a photo to see it large (assets/js/shop.js) */
.shop-card__photo,
.xmas-row__zoom { cursor: zoom-in; }
.shop-card__photo:focus-visible { outline: none; background: var(--emerald); }
.xmas-row__zoom:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; border-radius: 3px; }
/* "dialog.lightbox" so the site's other image and layout rules can't move or restyle it. */
dialog.lightbox {
	width: fit-content;
	height: fit-content;
	max-width: min(92vw, 900px);
	max-height: 92vh;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
dialog.lightbox[open] { display: flex; flex-direction: column; align-items: center; }
dialog.lightbox::backdrop { background: rgba(6, 36, 29, 0.9); }
dialog.lightbox .lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 48px);
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
dialog.lightbox .lightbox__caption { display: block; margin: 12px 0 0; text-align: center; font-size: 16px; color: var(--cream); }
.lightbox__close {
	position: fixed;
	top: 12px;
	right: 12px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	color: var(--emerald);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.lightbox__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.qty--xmas { min-height: 48px; border-bottom: 0; }
.qty--xmas .qty__label { font-size: 15px; }
.shop-card__link { align-self: center; font-size: 15px; color: var(--emerald); text-decoration: underline; text-underline-offset: 4px; }
.xmas-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gold);
	color: var(--emerald-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.xmas-card__ready { font-size: 13px; font-weight: 500; color: var(--gold-ink); }
.xmas-row__preorder { margin: 4px 0 2px; font-size: 13px; color: var(--gold-ink); }

/* Order online: Brownie batch size choice */
.batch-sizes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.batch-size { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--cream-alt); border-radius: 3px; cursor: pointer; }
.batch-size:has(input:checked) { border-color: var(--emerald); background: var(--cream); }
.batch-size input { width: 20px; height: 20px; accent-color: var(--emerald); }
.batch-size strong { color: var(--emerald); }

/* Order online: sticky product buttons and fold-open products (assets/js/shop.js) */
.shop-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 10;
	margin: 0 calc(var(--pad-x) * -1);
	padding: 10px var(--pad-x);
	background: var(--cream);
	border-bottom: 1px solid var(--gold);
}
.admin-bar .shop-nav { top: calc(var(--header-h) + 46px); }
@media (min-width: 783px) {
	.admin-bar .shop-nav { top: calc(var(--header-h) + 32px); }
}
.shop-nav { display: flex; align-items: center; gap: 8px; }
.shop-nav__list { display: flex; flex: 1; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 700px) {
	.shop-nav__list { flex-wrap: wrap; overflow: visible; }
}
.shop-nav__list::-webkit-scrollbar { display: none; }
.shop-nav__chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 1px solid var(--emerald);
	border-radius: 999px;
	background: var(--white);
	color: var(--emerald);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.shop-nav__chip.is-active { background: var(--emerald); color: var(--cream); }
.shop-nav__chip--cart { flex-shrink: 0; border-color: var(--gold-line); background: var(--gold); color: var(--emerald-deep); }
.shop-card { scroll-margin-top: calc(var(--header-h) + 76px); }
.shop-card.is-foldable .shop-card__head { cursor: pointer; }
.shop-card.is-foldable:not(.is-open) .shop-card__form { display: none; }
.shop-card__head > div { flex: 1; min-width: 0; }
.shop-card__toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--emerald);
	border-radius: 2px;
	background: var(--white);
	color: var(--emerald);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.shop-card.is-open .shop-card__toggle { background: var(--emerald); color: var(--cream); }
.shop-card__chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.shop-card.is-open .shop-card__chevron { transform: rotate(-135deg) translate(-2px, 0); }
@media (max-width: 479px) {
	.shop-card__head { flex-wrap: wrap; }
	.shop-card__toggle { width: 100%; justify-content: center; }
}