/**
 * Golbaroon — global styles.
 *
 * Contents
 *   1.  Design tokens
 *   2.  Reset & base
 *   3.  Typography
 *   4.  Layout primitives
 *   5.  Buttons & links
 *   6.  Forms & validation
 *   7.  Header, navigation & drawers
 *   8.  Hero & home sections
 *   9.  Cards, badges & stars
 *   10. Footer
 *   11. Blog & inner pages
 *   12. Utilities, states & motion
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */

:root {
	/*
	 * The palette is taken from the shop's logo: the teal of the wordmark and
	 * the lilac of the outer petals, over a cool porcelain ground. Every text
	 * pairing below meets AA on the shell background.
	 */
	--gb-shell: #f7f9fa;
	--gb-mist: #eef4f5;
	--gb-mist-deep: #dae7ea;
	--gb-white: #ffffff;

	--gb-teal: #3a6f77;
	--gb-teal-deep: #2a5a61;
	--gb-teal-soft: #7fadb6;
	--gb-teal-wash: #eff5f6;

	--gb-lilac: #816394;
	--gb-lilac-soft: #c2a4c8;
	--gb-lilac-wash: #f5f0f7;
	--gb-gold: #966d18;

	--gb-ink: #222b2d;
	--gb-ink-soft: #51595b;
	--gb-ink-faint: #686f72;
	--gb-line: #dde6e8;
	--gb-line-strong: #c3d1d5;

	--gb-success: #2f6b46;
	--gb-success-wash: #eaf4ee;
	--gb-error: #ab2f3c;
	--gb-error-wash: #fceff0;
	--gb-warning-wash: #fdf3e3;

	/* Typography — system-first so nothing blocks the first paint. */
	--gb-font-display: "Cormorant Garamond", "Vazirmatn", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--gb-font-body: Inter, "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gb-text-xs: 0.75rem;
	--gb-text-sm: 0.875rem;
	--gb-text-base: 1rem;
	--gb-text-lg: 1.125rem;
	--gb-text-xl: clamp(1.25rem, 0.5vw + 1.1rem, 1.4rem);
	--gb-text-2xl: clamp(1.6rem, 1.2vw + 1.3rem, 2.1rem);
	--gb-text-3xl: clamp(2rem, 2.2vw + 1.4rem, 3rem);
	--gb-text-4xl: clamp(2.6rem, 4.4vw + 1.4rem, 4.6rem);

	/* Spacing scale */
	--gb-space-1: 0.25rem;
	--gb-space-2: 0.5rem;
	--gb-space-3: 0.75rem;
	--gb-space-4: 1rem;
	--gb-space-5: 1.5rem;
	--gb-space-6: 2rem;
	--gb-space-7: 3rem;
	--gb-space-8: 4rem;
	--gb-space-9: clamp(4rem, 7vw, 7rem);

	--gb-container: 1240px;
	--gb-container-narrow: 780px;
	--gb-gutter: clamp(1rem, 4vw, 2.5rem);

	--gb-radius-sm: 6px;
	--gb-radius: 12px;
	--gb-radius-lg: 20px;
	--gb-radius-pill: 999px;

	--gb-shadow-sm: 0 1px 2px rgba(34, 43, 45, 0.06), 0 2px 8px rgba(34, 43, 45, 0.04);
	--gb-shadow: 0 4px 12px rgba(34, 43, 45, 0.07), 0 12px 32px rgba(34, 43, 45, 0.06);
	--gb-shadow-lg: 0 12px 28px rgba(34, 43, 45, 0.1), 0 32px 64px rgba(34, 43, 45, 0.09);

	--gb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--gb-duration: 220ms;

	--gb-header-height: 76px;
}

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--gb-header-height) + 1rem);
}

body {
	margin: 0;
	background-color: var(--gb-shell);
	color: var(--gb-ink);
	font-family: var(--gb-font-body);
	font-size: var(--gb-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.gb-no-scroll {
	overflow: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	flex-shrink: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

ul,
ol {
	padding-left: 1.2em;
}

hr {
	border: 0;
	border-top: 1px solid var(--gb-line);
	margin: var(--gb-space-6) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* A single, consistent focus ring everywhere. */
:focus-visible {
	outline: 3px solid var(--gb-teal);
	outline-offset: 2px;
	border-radius: var(--gb-radius-sm);
}

/* Only remove the default ring where we have replaced it. */
:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--gb-mist-deep);
	color: var(--gb-ink);
}

.gb-skip-link {
	position: absolute;
	left: -9999px;
}

.gb-skip-link:focus {
	left: var(--gb-space-4);
	top: var(--gb-space-4);
	z-index: 1000;
	background: var(--gb-white);
	color: var(--gb-teal-deep);
	padding: var(--gb-space-3) var(--gb-space-5);
	border-radius: var(--gb-radius);
	box-shadow: var(--gb-shadow);
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 3. Typography
 * ------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
	font-family: var(--gb-font-display);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 var(--gb-space-4);
	color: var(--gb-ink);
}

h1 {
	font-size: var(--gb-text-3xl);
}
h2 {
	font-size: var(--gb-text-2xl);
}
h3 {
	font-size: var(--gb-text-xl);
}
h4 {
	font-size: var(--gb-text-lg);
	font-family: var(--gb-font-body);
	font-weight: 600;
}

p {
	margin: 0 0 var(--gb-space-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--gb-teal-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--gb-duration) var(--gb-ease);
}

a:hover {
	color: var(--gb-teal);
}

blockquote {
	margin: var(--gb-space-6) 0;
	padding-left: var(--gb-space-5);
	border-left: 3px solid var(--gb-mist-deep);
	font-family: var(--gb-font-display);
	font-size: var(--gb-text-xl);
	font-style: italic;
	color: var(--gb-ink-soft);
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.gb-eyebrow {
	font-size: var(--gb-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gb-teal);
	margin: 0 0 var(--gb-space-3);
}

.gb-lede {
	font-size: var(--gb-text-lg);
	color: var(--gb-ink-soft);
	max-width: 60ch;
}

/* ------------------------------------------------------------------ *
 * 4. Layout primitives
 * ------------------------------------------------------------------ */

/* Sticky footer: the page fills the viewport even when a template is short. */
.gb-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.gb-site > .gb-main,
.gb-site > main {
	flex: 1 0 auto;
}

.gb-site > .gb-footer {
	flex-shrink: 0;
}

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

.gb-container--narrow {
	max-width: var(--gb-container-narrow);
}

.gb-container--wide {
	max-width: 1480px;
}

.gb-section {
	padding-block: var(--gb-space-9);
}

.gb-section--tight {
	padding-block: var(--gb-space-7);
}

.gb-section--mist {
	background: var(--gb-mist);
}

.gb-section--white {
	background: var(--gb-white);
}

.gb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--gb-space-4);
	margin-bottom: var(--gb-space-6);
}

.gb-section__head > div {
	max-width: 60ch;
}

.gb-section__title {
	margin-bottom: var(--gb-space-2);
}

.gb-section__text {
	color: var(--gb-ink-soft);
	margin: 0;
}

.gb-section--centered .gb-section__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gb-grid {
	display: grid;
	gap: var(--gb-space-5);
}

.gb-main {
	display: block;
}

.gb-page-header {
	background: var(--gb-mist);
	padding-block: var(--gb-space-8) var(--gb-space-7);
	text-align: center;
}

.gb-page-header__title {
	margin-bottom: var(--gb-space-3);
}

.gb-page-header__subtitle {
	color: var(--gb-ink-soft);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Buttons & links
 * ------------------------------------------------------------------ */

.gb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	--btn-bg: var(--gb-teal);
	--btn-fg: var(--gb-white);
	--btn-border: var(--gb-teal);

	/* Sheen and glow are variables so each variant can retune them. */
	--btn-sheen: rgba(255, 255, 255, 0.32);
	--btn-glow: rgba(58, 111, 119, 0.34);

	position: relative;
	/* Clips the sheen to the pill. Outlines are unaffected, so the focus ring
	   still draws outside the button. */
	overflow: hidden;
	/* Own stacking context, so the sheen can sit above the background but
	   below the label without escaping the button. */
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gb-space-2);
	min-height: 48px;
	padding: 0.75rem 1.6rem;
	border: 1px solid var(--btn-border);
	border-radius: var(--gb-radius-pill);
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--gb-font-body);
	font-size: var(--gb-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--gb-duration) var(--gb-ease),
		border-color var(--gb-duration) var(--gb-ease),
		color var(--gb-duration) var(--gb-ease),
		transform var(--gb-duration) var(--gb-ease),
		box-shadow var(--gb-duration) var(--gb-ease);
}

/*
 * `background-color` is restated here, not just the variable it reads from.
 * The declaration that consumes `--btn-bg` lives on the base rule at (0,2,1),
 * and WooCommerce's own `button:hover` sits at (0,3,1) — so on any store page
 * a hover repainted every button in WooCommerce's mauve-grey, whatever the
 * variable said. Same reasoning for the ghost and light variants below.
 */
.gb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	--btn-bg: var(--gb-teal-deep);
	--btn-border: var(--gb-teal-deep);
	background-color: var(--btn-bg);
	border-color: var(--btn-border);
	color: var(--gb-white);
	transform: translateY(-2px);
	/* A tinted glow rather than a grey drop shadow — it reads as the button
	   lighting the surface beneath it. */
	box-shadow: 0 10px 22px -8px var(--btn-glow), var(--gb-shadow-sm);
}

/*
 * A soft highlight that sweeps across on hover.
 *
 * `::before`, not `::after`: WooCommerce puts its loading spinner and its
 * "added to cart" tick on `a.button::after`, and overwriting those would break
 * the add-to-cart feedback.
 */
.gb-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before {
	/* `input.button` is deliberately absent: input is a replaced element and
	   never renders ::before, so listing it would be dead CSS. Those buttons
	   still get the lift, glow and press. */
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 26%, var(--btn-sheen) 48%, transparent 72%);
	transform: translateX(-130%);
	transition: transform 720ms var(--gb-ease);
}

.gb-btn:hover::before,
.gb-btn:focus-visible::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before {
	transform: translateX(130%);
}

/* Pressed: settle back down and dip inward, so the click feels physical. */
.gb-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	transform: translateY(0) scale(0.98);
	box-shadow: inset 0 3px 9px rgba(34, 43, 45, 0.24);
	/* Snappier than the hover so the press registers immediately. */
	transition-duration: 90ms;
}

/* Arrows lead the eye in the direction the button takes you. */
.gb-btn .gb-icon {
	transition: transform var(--gb-duration) var(--gb-ease);
}

.gb-btn:hover .gb-icon--arrow {
	transform: translateX(3px);
}

/* The base button is already the primary style; the modifier exists so the
   intent is explicit in the markup. */
.gb-btn--primary {
	--btn-bg: var(--gb-teal);
	--btn-fg: var(--gb-white);
	--btn-border: var(--gb-teal);
}

/*
 * The `.woocommerce a.button` selectors in the base rule are (0,2,1), so a
 * plain `.gb-btn--ghost` at (0,1,0) lost to them on store pages — the ghost
 * buttons that also carry WooCommerce's `.button` class (the mini-cart, and
 * Update cart / Apply coupon) were being painted with the primary fill. These
 * prefixed selectors match that specificity and, coming later, win.
 */
.gb-btn--ghost,
.woocommerce a.gb-btn--ghost,
.woocommerce button.gb-btn--ghost,
.woocommerce input.gb-btn--ghost {
	/* A white sheen is invisible on a pale button; use a teal wash instead. */
	--btn-sheen: rgba(58, 111, 119, 0.16);
	--btn-glow: rgba(58, 111, 119, 0.28);
	--btn-bg: transparent;
	--btn-fg: var(--gb-teal-deep);
	--btn-border: var(--gb-line-strong);
}

/*
 * Ghost fills with the teal it was already outlined and lettered in, rather
 * than tinting to a near-white wash that reads as grey next to the solid
 * button beside it.
 */
.gb-btn--ghost:hover,
.woocommerce a.gb-btn--ghost:hover,
.woocommerce button.gb-btn--ghost:hover,
.woocommerce input.gb-btn--ghost:hover {
	--btn-bg: var(--gb-teal);
	--btn-fg: var(--gb-white);
	--btn-border: var(--gb-teal);
	/* Now that the fill is solid, the white sheen reads again. */
	--btn-sheen: rgba(255, 255, 255, 0.32);
	background-color: var(--btn-bg);
	border-color: var(--btn-border);
	color: var(--gb-white);
}

.gb-btn--light,
.woocommerce a.gb-btn--light,
.woocommerce button.gb-btn--light {
	--btn-sheen: rgba(58, 111, 119, 0.14);
	--btn-glow: rgba(34, 43, 45, 0.24);
	--btn-bg: var(--gb-white);
	--btn-fg: var(--gb-ink);
	--btn-border: var(--gb-white);
}

.gb-btn--light:hover,
.woocommerce a.gb-btn--light:hover,
.woocommerce button.gb-btn--light:hover {
	--btn-bg: var(--gb-mist);
	--btn-border: var(--gb-mist);
	color: var(--gb-ink);
}

.gb-btn--small {
	min-height: 40px;
	padding: 0.45rem 1.1rem;
	font-size: var(--gb-text-xs);
}

/*
 * Fill the container, but stop being a pill about it.
 *
 * `width: 100%` is right in the containers this was written for — a 420px
 * drawer, a 268px filter sidebar, a 400px order summary. It is wrong the
 * moment the container is wider than a button has any business being: past
 * roughly 400px the pill radius stops reading as a button and starts reading
 * as a bar with a word in it. Checkout hit this first, where the step button
 * shares a class with #place_order but sits in the `1fr` column rather than
 * the 400px one and came out over 900px wide.
 *
 * Capping here rather than at each call site means the next wide container
 * does not rediscover it. Every existing use is already under the cap, so
 * nothing but checkout changes.
 *
 * `flex`, not the inherited `inline-flex`: an inline-level box ignores
 * `margin-inline: auto` and would sit against the left edge once capped.
 *
 * Prefixed selectors for the same reason the ghost variant carries them, and
 * it bites harder here. The base rule reaches these buttons through
 * `.woocommerce button.button` at (0,2,1), so a plain `.gb-btn--wide` at
 * (0,1,0) lost `display` on every button that also carries WooCommerce's own
 * class — sign in, register — leaving them inline-level, deaf to the auto
 * margins, and hard against the left edge of their card while the checkout
 * button, which has no `.button` class, centred correctly.
 */
.gb-btn--wide,
.woocommerce a.gb-btn--wide,
.woocommerce button.gb-btn--wide,
.woocommerce input.gb-btn--wide {
	display: flex;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
}

.gb-btn[disabled],
.gb-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Nothing should lift or shine while it cannot be pressed. */
.gb-btn[disabled]:hover,
.gb-btn[aria-disabled="true"]:hover,
.gb-btn.is-loading:hover {
	transform: none;
	box-shadow: none;
}

.gb-btn[disabled]::before,
.gb-btn[aria-disabled="true"]::before,
.gb-btn.is-loading::before {
	display: none;
}

/* Text link with a moving arrow. */
.gb-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gb-space-2);
	font-weight: 600;
	font-size: var(--gb-text-sm);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.gb-link .gb-icon {
	transition: transform var(--gb-duration) var(--gb-ease);
}

.gb-link:hover .gb-icon {
	transform: translateX(3px);
}

.gb-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--gb-duration) var(--gb-ease),
		color var(--gb-duration) var(--gb-ease),
		transform var(--gb-duration) var(--gb-ease);
}

.gb-icon-btn:hover {
	background: var(--gb-mist);
	color: var(--gb-teal-deep);
	transform: translateY(-1px);
}

.gb-icon-btn:active {
	transform: translateY(0) scale(0.92);
	transition-duration: 90ms;
}

.gb-icon--flip {
	transform: rotate(180deg);
}

/* Inline loading spinner used on any async button. */
.gb-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gb-spin 640ms linear infinite;
}

.is-loading .gb-spinner,
.gb-btn.is-loading .gb-spinner {
	display: inline-block;
}

.gb-btn.is-loading {
	pointer-events: none;
}

.gb-btn.is-loading .gb-btn__label {
	opacity: 0.7;
}

@keyframes gb-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------ *
 * 6. Forms & validation
 * ------------------------------------------------------------------ */

.gb-field,
.form-row {
	margin: 0 0 var(--gb-space-4);
}

.gb-field label,
.form-row label,
.gb-checkout-field label {
	display: block;
	font-size: var(--gb-text-sm);
	font-weight: 600;
	margin-bottom: var(--gb-space-2);
	color: var(--gb-ink);
}

.gb-field label .gb-icon {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 4px;
	color: var(--gb-teal);
}

.gb-input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--gb-line-strong);
	border-radius: var(--gb-radius-sm);
	background: var(--gb-white);
	color: var(--gb-ink);
	font-size: var(--gb-text-base);
	transition: border-color var(--gb-duration) var(--gb-ease);
}

textarea {
	min-height: 110px;
	resize: vertical;
}

/*
 * Date fields in WebKit.
 *
 * Safari does not draw a date input the way it draws a text input. The value
 * lives in a shadow element that carries its own sizing and centres itself, so
 * on iOS the delivery date renders wider than the time-window select directly
 * beneath it, with its text centred while every other field is left-aligned.
 * The two together read as a form whose boxes do not line up.
 *
 * `appearance: none` drops the native chrome so the box styled above is the box
 * that draws, and the pseudo-elements pull the value back to the left and stop
 * it claiming a width of its own. Gecko already lays these out identically to a
 * text input and ignores all of it, so nothing changes there.
 */
input[type="date"],
input[type="time"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	text-align: left;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
	width: 100%;
	margin: 0;
	text-align: left;
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
	padding: 0;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351595b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	padding-right: 2.4rem;
}

/*
 * One ring, not three.
 *
 * These two rules used to draw a focused field three times over: the border
 * went teal, a soft `box-shadow` halo sat outside it, and then the outline
 * below landed a third ring one pixel further out again. The `outline: none`
 * here was meant to leave the halo as the only ring, but it cannot — a text
 * input matches :focus-visible whenever it is focused, so the rule below has
 * the last word on `outline` every time and the halo never gets to stand
 * alone. Read together they were a double border with a gap down the middle.
 *
 * The halo is gone and the outline sits flush against the border, so the two
 * read as a single ring. The outline is the one worth keeping: it is what
 * forced-colours and high-contrast modes honour, and a `box-shadow` is not.
 */
.gb-input:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: var(--gb-teal);
	outline: none;
}

.gb-input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gb-teal);
	outline-offset: 0;
}

::placeholder {
	color: var(--gb-ink-faint);
	opacity: 1;
}

.gb-field__help {
	display: block;
	margin-top: var(--gb-space-2);
	font-size: var(--gb-text-xs);
	color: var(--gb-ink-soft);
	font-weight: 400;
}

.gb-required {
	color: var(--gb-error);
	margin-left: 2px;
}

.gb-field-row {
	display: grid;
	gap: var(--gb-space-4);
}

@media (min-width: 600px) {
	.gb-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Invalid state: colour is never the only signal — the message text and the
   icon carry the meaning too. */
.gb-field.is-invalid .gb-input,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--gb-error);
	background: var(--gb-error-wash);
}

.gb-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--gb-space-2);
	margin-top: var(--gb-space-2);
	font-size: var(--gb-text-sm);
	font-weight: 500;
	color: var(--gb-error);
}

.gb-form-status {
	margin: var(--gb-space-3) 0 0;
	font-size: var(--gb-text-sm);
	min-height: 1.4em;
}

.gb-form-status.is-success {
	color: var(--gb-success);
	font-weight: 600;
}

.gb-form-status.is-error {
	color: var(--gb-error);
	font-weight: 600;
}

.gb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--gb-space-3);
	font-size: var(--gb-text-sm);
	font-weight: 500;
	cursor: pointer;
	padding: var(--gb-space-2) 0;
	margin: 0;
}

.gb-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--gb-teal);
	cursor: pointer;
}


/* Search form */
.gb-search-form {
	display: flex;
	gap: var(--gb-space-2);
}

.gb-search-form .gb-input {
	flex: 1;
}

/* ------------------------------------------------------------------ *
 * 7. Header, navigation & drawers
 * ------------------------------------------------------------------ */

.gb-announcement {
	background: var(--gb-teal-deep);
	color: var(--gb-white);
	font-size: var(--gb-text-xs);
	letter-spacing: 0.04em;
	text-align: center;
	padding: var(--gb-space-2) var(--gb-gutter);
}

.gb-announcement p {
	margin: 0;
}

.gb-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--gb-shell);
	border-bottom: 1px solid var(--gb-line);
	transition: box-shadow var(--gb-duration) var(--gb-ease);
}

.gb-header.is-stuck {
	box-shadow: var(--gb-shadow-sm);
}

.gb-header__inner {
	display: flex;
	align-items: center;
	gap: var(--gb-space-4);
	min-height: var(--gb-header-height);
}

.gb-branding {
	display: flex;
	align-items: center;
	gap: var(--gb-space-3);
	margin-right: auto;
}

.gb-branding__logo,
.gb-branding .custom-logo-link {
	display: block;
	/* Kills the inline-image descender gap. */
	line-height: 0;
}

.gb-branding img,
.gb-branding .custom-logo {
	height: 44px;
	width: auto;
	/* Keeps a very wide custom upload from crowding out the header icons. */
	max-width: min(240px, 44vw);
	object-fit: contain;
	object-position: left center;
}

/*
 * The logo lockup: lotus mark, then the wordmark beside it. One custom
 * property drives the whole thing — the wordmark and the gap between the two
 * are proportions of the mark's height, so the lockup can never fall out of
 * step with itself at a new size.
 */
.gb-logo {
	--gb-logo-size: 44px;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--gb-logo-size) * 0.28);
	color: var(--gb-teal);
}

.gb-logo__mark {
	height: var(--gb-logo-size);
	width: auto;
}

.gb-logo__word {
	height: calc(var(--gb-logo-size) * 0.6);
	width: auto;
	/*
	 * Optical alignment: the script's x-height band, not its bounding box, is
	 * what should sit level with the middle of the lotus. Nudged down so the
	 * two read as one line.
	 */
	position: relative;
	top: calc(var(--gb-logo-size) * 0.06);
}

/*
 * The header lockup is painted with a gradient rather than `currentColor`, so
 * a colour change would not reach it. Deepen the whole mark instead.
 */
.gb-branding__logo .gb-logo {
	transition: filter var(--gb-duration) var(--gb-ease);
}

.gb-branding__logo:hover .gb-logo,
.gb-branding__logo:focus-visible .gb-logo {
	filter: saturate(1.15) brightness(0.92);
}

@media (max-width: 420px) {
	.gb-branding img,
	.gb-branding .custom-logo {
		height: 34px;
	}

	.gb-branding .gb-logo {
		--gb-logo-size: 34px;
	}
}

/*
 * The site name always sits beside the logo as screen-reader-only text, so it
 * needs no visual styling — only a reset, since `screen-reader-text` clips the
 * element rather than hiding it.
 */
.gb-branding__title {
	margin: 0;
}

.gb-nav ul {
	display: flex;
	align-items: center;
	gap: var(--gb-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-nav a {
	position: relative;
	display: block;
	padding: var(--gb-space-2) 0;
	color: var(--gb-ink);
	font-size: var(--gb-text-sm);
	font-weight: 500;
	text-decoration: none;
}

.gb-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--gb-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--gb-duration) var(--gb-ease);
}

.gb-nav a:hover::after,
.gb-nav .current-menu-item > a::after,
.gb-nav .current_page_item > a::after {
	transform: scaleX(1);
}

.gb-nav .current-menu-item > a,
.gb-nav .current_page_item > a {
	color: var(--gb-teal-deep);
}

/* Sub-menus */
.gb-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--gb-space-3);
	background: var(--gb-white);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius);
	box-shadow: var(--gb-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--gb-duration) var(--gb-ease),
		transform var(--gb-duration) var(--gb-ease),
		visibility var(--gb-duration);
}

.gb-nav li {
	position: relative;
}

.gb-nav li:hover > .sub-menu,
.gb-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gb-nav .sub-menu a {
	padding: var(--gb-space-2) var(--gb-space-3);
	border-radius: var(--gb-radius-sm);
}

.gb-nav .sub-menu a::after {
	display: none;
}

.gb-nav .sub-menu a:hover {
	background: var(--gb-mist);
	color: var(--gb-teal-deep);
}

.gb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gb-space-1);
}

.gb-cart-toggle {
	position: relative;
}

.gb-cart-toggle__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--gb-radius-pill);
	background: var(--gb-teal);
	color: var(--gb-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.gb-cart-toggle__count.is-empty {
	display: none;
}

.gb-menu-toggle {
	display: none;
}

/* Off-canvas drawers, shared by the menu, the cart and the shop filters. */
.gb-drawer {
	position: fixed;
	inset: 0;
	z-index: 900;
	visibility: hidden;
	pointer-events: none;
}

.gb-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gb-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 43, 45, 0.42);
	opacity: 0;
	transition: opacity var(--gb-duration) var(--gb-ease);
	border: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

.gb-drawer.is-open .gb-drawer__backdrop {
	opacity: 1;
}

.gb-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	background: var(--gb-shell);
	box-shadow: var(--gb-shadow-lg);
	transform: translateX(100%);
	transition: transform var(--gb-duration) var(--gb-ease);
}

.gb-drawer--left .gb-drawer__panel {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

.gb-drawer.is-open .gb-drawer__panel {
	transform: translateX(0);
}

.gb-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gb-space-3);
	padding: var(--gb-space-4) var(--gb-space-5);
	border-bottom: 1px solid var(--gb-line);
}

.gb-drawer__title {
	font-family: var(--gb-font-display);
	font-size: 1.4rem;
	margin: 0;
}

.gb-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--gb-space-5);
	overscroll-behavior: contain;
}

.gb-drawer__footer {
	padding: var(--gb-space-4) var(--gb-space-5);
	border-top: 1px solid var(--gb-line);
	background: var(--gb-white);
}

.gb-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gb-space-1);
}

.gb-drawer__nav .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	padding: 0 0 0 var(--gb-space-4);
	margin-top: var(--gb-space-1);
}

.gb-drawer__nav a {
	display: block;
	padding: var(--gb-space-3) var(--gb-space-2);
	border-radius: var(--gb-radius-sm);
	color: var(--gb-ink);
	font-size: var(--gb-text-lg);
	font-weight: 500;
	text-decoration: none;
}

.gb-drawer__nav a:hover {
	background: var(--gb-mist);
	color: var(--gb-teal-deep);
}

.gb-drawer__nav a::after {
	display: none;
}

.gb-drawer__meta {
	margin-top: var(--gb-space-6);
	padding-top: var(--gb-space-5);
	border-top: 1px solid var(--gb-line);
	font-size: var(--gb-text-sm);
	color: var(--gb-ink-soft);
}

/* Header search panel */
.gb-search-panel {
	display: none;
	background: var(--gb-white);
	border-bottom: 1px solid var(--gb-line);
	padding-block: var(--gb-space-5);
}

.gb-search-panel.is-open {
	display: block;
}

@media (max-width: 979px) {
	.gb-nav--primary {
		display: none;
	}

	.gb-menu-toggle {
		display: inline-flex;
		order: -1;
		margin-left: calc(var(--gb-space-2) * -1);
	}
}

@media (min-width: 980px) {
	.gb-drawer--menu {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Hero & home sections
 * ------------------------------------------------------------------ */

.gb-hero {
	position: relative;
	background: linear-gradient(160deg, var(--gb-mist) 0%, var(--gb-shell) 62%);
	overflow: hidden;
}

.gb-hero__inner {
	display: grid;
	gap: var(--gb-space-7);
	align-items: center;
	padding-block: clamp(3rem, 7vw, 6rem);
}

@media (min-width: 900px) {
	.gb-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--gb-space-8);
	}
}

.gb-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gb-space-2);
	padding: 0.4rem 0.9rem;
	margin-bottom: var(--gb-space-4);
	border-radius: var(--gb-radius-pill);
	background: var(--gb-white);
	border: 1px solid var(--gb-mist-deep);
	color: var(--gb-teal-deep);
	font-size: var(--gb-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.gb-hero__title {
	font-size: var(--gb-text-4xl);
	margin-bottom: var(--gb-space-4);
	max-width: 14ch;
}

.gb-hero__text {
	font-size: var(--gb-text-lg);
	color: var(--gb-ink-soft);
	max-width: 46ch;
	margin-bottom: var(--gb-space-6);
}

.gb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-3);
	margin-bottom: var(--gb-space-6);
}

.gb-hero__actions--center {
	justify-content: center;
}

.gb-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-3) var(--gb-space-5);
	font-size: var(--gb-text-sm);
	color: var(--gb-ink-soft);
}

.gb-hero__proof-item {
	display: flex;
	align-items: center;
	gap: var(--gb-space-2);
}

.gb-hero__proof-item .gb-icon {
	color: var(--gb-lilac);
}

.gb-hero__media {
	position: relative;
	border-radius: var(--gb-radius-lg);
	overflow: hidden;
	box-shadow: var(--gb-shadow-lg);
	aspect-ratio: 5 / 4;
	background: var(--gb-mist-deep);
}

.gb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When no hero image has been uploaded, draw a soft floral gradient instead
   so the layout never collapses. */
.gb-hero__media--empty {
	background:
		radial-gradient(circle at 30% 28%, rgba(194, 164, 200, 0.85), transparent 46%),
		radial-gradient(circle at 72% 40%, rgba(127, 173, 182, 0.55), transparent 44%),
		radial-gradient(circle at 52% 78%, rgba(129, 99, 148, 0.5), transparent 52%),
		linear-gradient(150deg, var(--gb-mist-deep), var(--gb-mist));
}

.gb-hero__caption {
	position: absolute;
	left: var(--gb-space-4);
	bottom: var(--gb-space-4);
	right: var(--gb-space-4);
	padding: var(--gb-space-3) var(--gb-space-4);
	border-radius: var(--gb-radius);
	background: rgba(247, 249, 250, 0.94);
	backdrop-filter: blur(6px);
	font-size: var(--gb-text-sm);
	color: var(--gb-ink);
	display: flex;
	align-items: center;
	gap: var(--gb-space-3);
}

.gb-hero__caption strong {
	display: block;
	font-family: var(--gb-font-display);
	font-size: 1.15rem;
	font-weight: 600;
}

/* Trust strip */
.gb-usp {
	background: var(--gb-white);
	border-block: 1px solid var(--gb-line);
}

.gb-usp__grid {
	display: grid;
	gap: var(--gb-space-5);
	margin: 0;
	padding: var(--gb-space-6) 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gb-usp__item {
	display: flex;
	gap: var(--gb-space-3);
	align-items: flex-start;
}

.gb-usp__item .gb-icon {
	color: var(--gb-teal);
	margin-top: 2px;
}

.gb-usp__item strong {
	display: block;
	font-size: var(--gb-text-sm);
	margin-bottom: 2px;
}

.gb-usp__item span {
	font-size: var(--gb-text-sm);
	color: var(--gb-ink-soft);
}

/* Collections */
.gb-collections {
	display: grid;
	gap: var(--gb-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.gb-collections {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.gb-collections {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	/* Give the first card a little more presence. */
	.gb-collections .gb-collection:first-child {
		grid-row: span 2;
	}

	.gb-collections .gb-collection:first-child .gb-collection__media {
		aspect-ratio: 3 / 5;
	}
}

.gb-collection {
	position: relative;
	display: block;
	border-radius: var(--gb-radius-lg);
	overflow: hidden;
	background: var(--gb-mist-deep);
	text-decoration: none;
	color: var(--gb-white);
	box-shadow: var(--gb-shadow-sm);
	transition: transform var(--gb-duration) var(--gb-ease),
		box-shadow var(--gb-duration) var(--gb-ease);
}

.gb-collection:hover {
	transform: translateY(-3px);
	box-shadow: var(--gb-shadow);
	color: var(--gb-white);
}

/* Behind an unset collection image: the logo's own teal-to-lilac sweep. */
.gb-collection__media {
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, var(--gb-teal-soft), var(--gb-lilac-soft));
}

.gb-collection__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--gb-ease);
}

.gb-collection:hover .gb-collection__media img {
	transform: scale(1.05);
}

.gb-collection__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--gb-space-5) var(--gb-space-4) var(--gb-space-4);
	background: linear-gradient(to top, rgba(34, 43, 45, 0.82), rgba(34, 43, 45, 0));
}

.gb-collection__title {
	font-family: var(--gb-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 2px;
	color: var(--gb-white);
}

.gb-collection__count {
	font-size: var(--gb-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.86;
}

/* Testimonials */
.gb-testimonials {
	display: grid;
	gap: var(--gb-space-5);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gb-testimonial {
	background: var(--gb-white);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius-lg);
	padding: var(--gb-space-6) var(--gb-space-5) var(--gb-space-5);
	position: relative;
}

.gb-testimonial::before {
	content: "\201C";
	position: absolute;
	top: 0.1em;
	left: var(--gb-space-5);
	font-family: var(--gb-font-display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--gb-mist-deep);
}

/* Overrides the global blockquote treatment — the card already frames it. */
.gb-testimonial__quote {
	position: relative;
	font-family: var(--gb-font-display);
	font-size: 1.3rem;
	font-style: normal;
	line-height: 1.45;
	color: var(--gb-ink);
	border-left: 0;
	padding-left: 0;
	margin: 0 0 var(--gb-space-4);
}

.gb-testimonial__author {
	font-size: var(--gb-text-sm);
	font-weight: 600;
	margin: 0;
}

.gb-testimonial__meta {
	font-size: var(--gb-text-xs);
	color: var(--gb-ink-faint);
	margin: 0;
}

.gb-testimonial .gb-stars {
	margin-bottom: var(--gb-space-3);
}

/* Contact block */
.gb-contact-grid {
	display: grid;
	gap: var(--gb-space-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gb-contact-card {
	display: flex;
	gap: var(--gb-space-3);
	align-items: flex-start;
}

.gb-contact-card .gb-icon {
	color: var(--gb-teal);
	margin-top: 3px;
}

.gb-contact-card h3 {
	font-family: var(--gb-font-body);
	font-size: var(--gb-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--gb-space-1);
}

.gb-contact-card p,
.gb-contact-card a {
	font-size: var(--gb-text-sm);
	color: var(--gb-ink-soft);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Cards, badges & stars
 * ------------------------------------------------------------------ */

.gb-badges {
	position: absolute;
	top: var(--gb-space-3);
	left: var(--gb-space-3);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-badge {
	padding: 0.25rem 0.6rem;
	border-radius: var(--gb-radius-pill);
	background: var(--gb-white);
	color: var(--gb-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--gb-shadow-sm);
}

.gb-badge--sale {
	background: var(--gb-teal);
	color: var(--gb-white);
}

.gb-badge--same-day {
	background: var(--gb-lilac);
	color: var(--gb-white);
}

.gb-badge--low {
	background: var(--gb-warning-wash);
	color: var(--gb-gold);
}

.gb-badge--out {
	background: var(--gb-ink);
	color: var(--gb-white);
}

/* Star rating */
.gb-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
	color: var(--gb-line-strong);
}

.gb-stars__track,
.gb-stars__fill {
	display: flex;
	gap: 1px;
}

.gb-stars__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--gb-gold);
}

.gb-stars__fill .gb-icon {
	fill: currentColor;
}

.gb-stars__count {
	margin-left: var(--gb-space-2);
	font-size: var(--gb-text-xs);
	color: var(--gb-ink-faint);
	vertical-align: middle;
}

/* Payment badges */
.gb-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-payments__item {
	line-height: 0;
}

.gb-card {
	display: block;
	width: 46px;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid var(--gb-line);
	background: var(--gb-white);
}

.gb-payments__note {
	display: flex;
	align-items: center;
	gap: var(--gb-space-2);
	font-size: var(--gb-text-xs);
	color: var(--gb-ink-soft);
	margin-left: var(--gb-space-2);
}

.gb-payments__note .gb-icon {
	color: var(--gb-lilac);
}

/* Detail lists (order summaries, delivery details) */
.gb-detail-list {
	margin: 0;
	display: grid;
	gap: var(--gb-space-3);
}

.gb-detail-list__row {
	display: grid;
	gap: var(--gb-space-1);
	grid-template-columns: minmax(140px, 200px) 1fr;
	align-items: start;
	padding-bottom: var(--gb-space-3);
	border-bottom: 1px solid var(--gb-line);
}

.gb-detail-list__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gb-detail-list dt {
	font-size: var(--gb-text-sm);
	font-weight: 600;
	color: var(--gb-ink-soft);
	margin: 0;
}

.gb-detail-list dd {
	margin: 0;
	font-size: var(--gb-text-sm);
}

@media (max-width: 520px) {
	.gb-detail-list__row {
		grid-template-columns: 1fr;
	}
}

/* Generic panel */
.gb-panel {
	background: var(--gb-white);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius-lg);
	padding: var(--gb-space-5);
}

/* ------------------------------------------------------------------ *
 * 10. Footer
 * ------------------------------------------------------------------ */

.gb-footer {
	background: var(--gb-ink);
	color: rgba(247, 249, 250, 0.82);
	padding-block: var(--gb-space-8) var(--gb-space-5);
	margin-top: var(--gb-space-9);
}

.gb-footer a {
	color: rgba(247, 249, 250, 0.82);
	text-decoration: none;
}

.gb-footer a:hover {
	color: var(--gb-white);
	text-decoration: underline;
}

.gb-footer__grid {
	display: grid;
	gap: var(--gb-space-6);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-bottom: var(--gb-space-7);
	border-bottom: 1px solid rgba(247, 249, 250, 0.16);
}

.gb-footer__brand {
	max-width: 34ch;
}

.gb-footer__logo {
	color: var(--gb-white);
	display: inline-block;
	line-height: 0;
	margin-bottom: var(--gb-space-4);
	text-decoration: none;
}

/*
 * White on the dark footer, inherited straight from the link. Written as two
 * classes so it outranks the base `.gb-logo` colour wherever it is placed.
 */
.gb-logo.gb-logo--footer {
	--gb-logo-size: 52px;
	color: inherit;
}

.gb-footer__logo:hover,
.gb-footer__logo:focus-visible {
	color: var(--gb-teal-soft);
	text-decoration: none;
}

.gb-footer__note {
	font-size: var(--gb-text-sm);
	line-height: 1.7;
}

.gb-footer__heading {
	font-family: var(--gb-font-body);
	font-size: var(--gb-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gb-white);
	margin-bottom: var(--gb-space-4);
}

/* Second heading inside the same footer column. */
.gb-footer__heading--spaced {
	margin-top: var(--gb-space-6);
}

.gb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gb-space-2);
	font-size: var(--gb-text-sm);
}

.gb-footer .widget {
	margin-bottom: var(--gb-space-5);
}

/*
 * The footer sets `.gb-footer ul { display: grid }` for its link columns, and
 * at (0,1,1) that outranks a bare `.gb-social` at (0,1,0) — which turned the
 * icon row into a single-column grid and stacked the icons vertically. Naming
 * each ancestor takes these to (0,2,0) so the row wins wherever it appears.
 */
.gb-social,
.gb-footer .gb-social,
.gb-drawer__meta .gb-social,
.gb-contact-card .gb-social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-2);
	list-style: none;
	margin: var(--gb-space-4) 0 0;
	padding: 0;
}

.gb-social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(247, 249, 250, 0.24);
	border-radius: 50%;
	transition: background-color var(--gb-duration) var(--gb-ease),
		border-color var(--gb-duration) var(--gb-ease);
}

.gb-social a:hover {
	background: var(--gb-teal);
	border-color: var(--gb-teal);
	text-decoration: none;
}

.gb-social--header a {
	border-color: var(--gb-line);
	color: var(--gb-ink);
}

.gb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gb-space-4);
	padding-top: var(--gb-space-5);
	font-size: var(--gb-text-xs);
}

.gb-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-4);
}

.gb-footer .gb-payments__note {
	color: rgba(247, 249, 250, 0.7);
}

/* ------------------------------------------------------------------ *
 * 11. Blog & inner pages
 * ------------------------------------------------------------------ */

.gb-layout {
	display: grid;
	gap: var(--gb-space-7);
	padding-block: var(--gb-space-8);
}

@media (min-width: 900px) {
	body:not(.gb-no-sidebar) .gb-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/*
 * Grid and flex children default to `min-width: auto`, which lets a long word,
 * a wide table or a code block push the whole column past the viewport. Every
 * column that can receive arbitrary content is pinned to 0 here.
 */
.gb-layout > *,
.gb-hero__content,
.gb-sidebar {
	min-width: 0;
}

.gb-sidebar {
	align-self: start;
}

.gb-comments__title {
	font-size: var(--gb-text-xl);
	margin-bottom: var(--gb-space-5);
}

.gb-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-2);
	margin-top: var(--gb-space-6);
	font-size: var(--gb-text-sm);
	font-weight: 600;
}

.gb-post-nav {
	display: grid;
	gap: var(--gb-space-4);
	margin-top: var(--gb-space-8);
	padding-top: var(--gb-space-6);
	border-top: 1px solid var(--gb-line);
}

@media (min-width: 700px) {
	.gb-post-nav .nav-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gb-space-5);
	}

	.gb-post-nav .nav-next {
		text-align: right;
	}
}

.gb-post-nav a {
	display: grid;
	gap: var(--gb-space-1);
	font-family: var(--gb-font-display);
	font-size: var(--gb-text-lg);
	text-decoration: none;
}

.gb-footer__widgets {
	min-width: 0;
}

.gb-entry {
	background: var(--gb-white);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius-lg);
	overflow: hidden;
	transition: transform var(--gb-duration) var(--gb-ease),
		box-shadow var(--gb-duration) var(--gb-ease);
}

.gb-entry:hover {
	transform: translateY(-2px);
	box-shadow: var(--gb-shadow);
}

.gb-entry__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.gb-entry__body {
	padding: var(--gb-space-5);
}

.gb-entry__title {
	font-size: var(--gb-text-xl);
	margin-bottom: var(--gb-space-2);
}

.gb-entry__title a {
	color: var(--gb-ink);
	text-decoration: none;
}

.gb-entry__title a:hover {
	color: var(--gb-teal-deep);
}

.gb-post-meta {
	font-size: var(--gb-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gb-ink-faint);
	margin-bottom: var(--gb-space-3);
}

.gb-entry-list {
	display: grid;
	gap: var(--gb-space-5);
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Featured image above a post or page. */
.gb-feature-image {
	margin: var(--gb-space-6) auto 0;
}

.gb-feature-image img {
	width: 100%;
	border-radius: var(--gb-radius-lg);
}

.gb-content > * + * {
	margin-top: var(--gb-space-4);
}

.gb-content h2,
.gb-content h3 {
	margin-top: var(--gb-space-6);
}

.gb-content img {
	border-radius: var(--gb-radius);
}

.widget {
	margin-bottom: var(--gb-space-6);
}

.widget__title {
	font-family: var(--gb-font-body);
	font-size: var(--gb-text-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--gb-space-3);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gb-space-2);
	font-size: var(--gb-text-sm);
}

/* Pagination */
.gb-pagination,
.woocommerce-pagination {
	margin-top: var(--gb-space-7);
}

.gb-pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gb-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.gb-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--gb-space-2);
	min-width: 44px;
	height: 44px;
	padding-inline: var(--gb-space-3);
	justify-content: center;
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius-pill);
	background: var(--gb-white);
	color: var(--gb-ink);
	font-size: var(--gb-text-sm);
	font-weight: 600;
	text-decoration: none;
	float: none;
}

.woocommerce-pagination li {
	border: 0 !important;
	overflow: visible !important;
}

.gb-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var(--gb-teal-soft);
	background: var(--gb-teal-wash);
	color: var(--gb-teal-deep);
}

.gb-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--gb-teal);
	border-color: var(--gb-teal);
	color: var(--gb-white);
}

/* Empty states */
.gb-empty {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
	padding-block: var(--gb-space-8);
}

.gb-empty__art {
	width: 96px;
	height: 96px;
	margin: 0 auto var(--gb-space-5);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--gb-mist);
	color: var(--gb-teal);
}

.gb-empty__art .gb-icon {
	width: 44px;
	height: 44px;
}

.gb-empty__title {
	font-size: var(--gb-text-2xl);
	margin-bottom: var(--gb-space-3);
}

.gb-empty__text {
	color: var(--gb-ink-soft);
	margin-bottom: var(--gb-space-5);
}

/* Comments */
.gb-comments {
	margin-top: var(--gb-space-8);
}

.comment-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--gb-space-5);
}

.comment-body {
	background: var(--gb-white);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-radius);
	padding: var(--gb-space-4);
}

/* ------------------------------------------------------------------ *
 * 12. Utilities, states & motion
 * ------------------------------------------------------------------ */

/*
 * Available to a screen reader, invisible to everyone else. WordPress core
 * ships no front-end stylesheet, so `screen-reader-text` — the class the
 * templates and WordPress's own markup use — is the theme's to define. Do not
 * leave it to WooCommerce: its sheet also declares the class, but the theme
 * has to hold up on a site where the plugin is inactive.
 */
.screen-reader-text,
.gb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Skip links and the like must become visible once focused. */
.screen-reader-text:focus {
	background-color: var(--gb-white);
	border-radius: var(--gb-radius-sm);
	box-shadow: var(--gb-shadow);
	clip-path: none;
	color: var(--gb-teal-deep);
	display: block;
	font-size: var(--gb-text-sm);
	font-weight: 600;
	height: auto;
	left: var(--gb-space-4);
	line-height: 1.4;
	padding: var(--gb-space-3) var(--gb-space-4);
	text-decoration: none;
	top: var(--gb-space-4);
	width: auto;
	z-index: 100000;
}

.gb-text-center {
	text-align: center;
}

.gb-mt-6 {
	margin-top: var(--gb-space-6);
}

[hidden] {
	display: none !important;
}

/* Toast for AJAX confirmations. */
.gb-toast {
	position: fixed;
	left: 50%;
	bottom: var(--gb-space-5);
	z-index: 950;
	display: flex;
	align-items: center;
	gap: var(--gb-space-3);
	max-width: min(440px, calc(100vw - 2rem));
	padding: var(--gb-space-3) var(--gb-space-5);
	border-radius: var(--gb-radius-pill);
	background: var(--gb-ink);
	color: var(--gb-white);
	font-size: var(--gb-text-sm);
	font-weight: 500;
	box-shadow: var(--gb-shadow-lg);
	transform: translate(-50%, 140%);
	transition: transform 320ms var(--gb-ease);
}

.gb-toast.is-visible {
	transform: translate(-50%, 0);
}

.gb-toast .gb-icon {
	color: var(--gb-teal-soft);
}

.gb-toast--error {
	background: var(--gb-error);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * With motion reduced the global rule collapses every transition to ~0s, which
 * would make the sheen flash rather than sweep. Remove the effect outright and
 * keep the colour change, which still communicates the state.
 */
@media (prefers-reduced-motion: reduce) {
	.gb-btn::before,
	.woocommerce a.button::before,
	.woocommerce button.button::before {
		display: none;
	}

	.gb-btn:hover,
	.gb-btn:active,
	.gb-icon-btn:hover,
	.gb-icon-btn:active {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--gb-ink-soft: #333c3e;
		--gb-ink-faint: #3f4749;
		--gb-line: #9fb0b4;
		--gb-line-strong: #78888c;
	}
}

/* Print: strip the chrome, keep the content. */
@media print {
	.gb-header,
	.gb-footer,
	.gb-announcement,
	.gb-drawer,
	.gb-toast {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* ------------------------------------------------------------------ *
 * Intentionally unstyled hooks
 *
 * These class names carry no rules of their own. They exist so a child
 * theme, a plugin or a future variant has something specific to target
 * without having to restructure the markup:
 *
 *   .gb-main--shop        page-type hook on the store's <main> element
 *   .gb-textarea          textarea modifier (the element selector styles it)
 *   .gb-card--visa        card-brand hooks in the payment badge list
 *   .gb-card--mastercard
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Floating WhatsApp button
 *
 * Sits bottom-left, below the drawers (z-index 900) so an open cart or
 * menu covers it, and below the toast (950).
 *
 * The label is a separate dark chip rather than text inside the green
 * pill: white on WhatsApp green is about 2.4:1, which fails WCAG for
 * body text. Brand marks are exempt from contrast rules, so the glyph
 * itself keeps the recognisable green; the words do not sit on it.
 * ------------------------------------------------------------------ */

.gb-whatsapp {
	position: fixed;
	left: var(--gb-space-5);
	bottom: var(--gb-space-5);
	z-index: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4), var(--gb-shadow-sm);
	transition: transform var(--gb-duration) var(--gb-ease),
		box-shadow var(--gb-duration) var(--gb-ease);
}

.gb-whatsapp:hover,
.gb-whatsapp:focus-visible {
	color: #ffffff;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5), var(--gb-shadow);
}

.gb-whatsapp__icon {
	display: grid;
	place-items: center;
	line-height: 0;
}

/* Kept in the DOM at all times — it is the link's accessible name. */
.gb-whatsapp__label {
	position: absolute;
	left: calc(100% + var(--gb-space-3));
	white-space: nowrap;
	padding: 0.4rem 0.75rem;
	border-radius: var(--gb-radius-pill);
	background: var(--gb-ink);
	color: var(--gb-white);
	font-size: var(--gb-text-xs);
	font-weight: 600;
	opacity: 0;
	transform: translateX(-6px);
	pointer-events: none;
	transition: opacity var(--gb-duration) var(--gb-ease),
		transform var(--gb-duration) var(--gb-ease);
}

.gb-whatsapp:hover .gb-whatsapp__label,
.gb-whatsapp:focus-visible .gb-whatsapp__label {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 600px) {
	.gb-whatsapp {
		left: var(--gb-space-4);
		bottom: var(--gb-space-4);
		width: 52px;
		height: 52px;
	}

	/* No hover on touch, and a chip beside a corner button would clip. */
	.gb-whatsapp__label {
		display: none;
	}
}

/* The button must not cover the sticky checkout button on small screens. */
@media (max-width: 600px) {
	body.woocommerce-checkout .gb-whatsapp,
	body.woocommerce-cart .gb-whatsapp {
		bottom: calc(var(--gb-space-4) + env(safe-area-inset-bottom, 0px));
	}
}