/**
 * Snooby Heritage Day Deal - landing page
 *
 * Built on a design-token layer: type scale, 8-point spacing, semantic colour,
 * control sizing and motion. No magic numbers below the token block.
 *
 * Typography inherits Lato, which the Flatsome theme already loads, so this
 * page matches the rest of the store and adds no extra font request.
 *
 * Everything is scoped under .snooby-heritage so it cannot leak into the theme.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.snooby-heritage {

	/* ---- Type scale (16px base, ~1.2 modular) --------------------------- */
	--sb-text-2xs:  0.6875rem;  /* 11px - badges, micro labels */
	--sb-text-xs:   0.75rem;    /* 12px - captions, helper text */
	--sb-text-sm:   0.875rem;   /* 14px - UI, secondary body */
	--sb-text-md:   1rem;       /* 16px - base */
	--sb-text-lg:   1.125rem;   /* 18px - lead, panel totals */
	--sb-text-xl:   1.25rem;    /* 20px - panel heading */
	--sb-text-2xl:  1.5rem;     /* 24px */
	--sb-text-3xl:  1.875rem;   /* 30px */
	--sb-text-4xl:  2.25rem;    /* 36px */
	--sb-text-5xl:  3rem;       /* 48px - hero */

	/* ---- Line height ---------------------------------------------------- */
	--sb-lh-display: 1.12;
	--sb-lh-snug:    1.3;
	--sb-lh-ui:      1.35;
	--sb-lh-body:    1.6;

	/* ---- Letter spacing ------------------------------------------------- */
	--sb-track-display: -0.022em;
	--sb-track-tight:   -0.008em;
	--sb-track-label:    0.075em;
	--sb-track-badge:    0.1em;

	/* ---- Weight (three only) -------------------------------------------- */
	--sb-w-regular: 400;
	--sb-w-bold:    700;
	--sb-w-black:   900;

	/* ---- Spacing: 8-point grid ------------------------------------------ */
	--sb-space-1:  0.25rem;  /*  4px */
	--sb-space-2:  0.5rem;   /*  8px */
	--sb-space-3:  0.75rem;  /* 12px */
	--sb-space-4:  1rem;     /* 16px */
	--sb-space-5:  1.25rem;  /* 20px */
	--sb-space-6:  1.5rem;   /* 24px */
	--sb-space-8:  2rem;     /* 32px */
	--sb-space-10: 2.5rem;   /* 40px */
	--sb-space-12: 3rem;     /* 48px */
	--sb-space-16: 4rem;     /* 64px */

	/* ---- Colour: raw brand ---------------------------------------------- */
	--sb-purple-600: #8224e3;  /* Snooby Purple - the brand */
	--sb-purple-700: #7420cc;
	--sb-purple-800: #661cb4;
	--sb-purple-900: #6a17bd;  /* "free"/"saved" states - deep enough for small text */
	--sb-lilac-300:  #c9a6f2;  /* soft highlight */
	--sb-plum-900:   #201421;  /* dark grounds and ink */
	--sb-cream-100:  #e5dbcd;  /* sherpa lining - borders and sunken surfaces */
	--sb-red-700:    #8a2723;

	/* Brand turquoise #2FB3AE is deliberately absent: house rule reserves it for
	   the gift ribbon only, so "free" and "saved" use deep purple instead. */

	/* ---- Colour: semantic ------------------------------------------------
	   Named by role, not appearance. Contrast verified against WCAG 2.1 AA:
	   body text 17.7:1, secondary text 6.1:1, brand on white 6.3:1,
	   success text 8.5:1, control borders 3.6:1.                           */
	--sb-surface:          #ffffff;
	--sb-surface-sunken:   #faf7f2;
	--sb-surface-accent:   #f3ebfd;
	--sb-surface-success:  #ede2fb;

	--sb-text-primary:     #201421;
	--sb-text-secondary:   #675a69;
	--sb-text-brand:       #8224e3;
	--sb-text-success:     #6a17bd;
	--sb-text-inverse:     #ffffff;

	--sb-border-subtle:    #e8dfd4;  /* decorative dividers only */
	--sb-border-control:   #8f8291;  /* 3.6:1 - form control boundaries */

	--sb-action:           var(--sb-purple-600);
	--sb-action-hover:     var(--sb-purple-700);
	--sb-action-active:    var(--sb-purple-800);
	--sb-focus:            var(--sb-purple-600);

	/* ---- Radius ---------------------------------------------------------- */
	--sb-radius-sm:   8px;
	--sb-radius-md:  12px;
	--sb-radius-lg:  16px;
	--sb-radius-pill: 999px;

	/* ---- Elevation ------------------------------------------------------- */
	--sb-shadow-sm: 0 1px 2px rgba(32, 20, 33, .06);
	--sb-shadow-md: 0 1px 2px rgba(32, 20, 33, .05), 0 8px 24px rgba(32, 20, 33, .07);
	--sb-shadow-lg: 0 12px 34px rgba(32, 20, 33, .18);

	/* ---- Control sizing (touch targets) ---------------------------------- */
	--sb-control-sm: 2.5rem;   /* 40px - qty steppers */
	--sb-control-md: 2.75rem;  /* 44px - buttons, selects */
	--sb-tap-min:    1.5rem;   /* 24px - WCAG 2.2 target minimum */

	/* ---- Icons ------------------------------------------------------------ */
	--sb-icon-sm: 0.875rem;  /* 14px */
	--sb-icon-md: 1rem;      /* 16px */
	--sb-icon-lg: 1.25rem;   /* 20px */

	/* ---- Motion ----------------------------------------------------------- */
	--sb-dur-fast: 120ms;
	--sb-dur-base: 180ms;
	--sb-dur-slow: 320ms;
	--sb-ease:     cubic-bezier(.4, 0, .2, 1);
	--sb-ease-out: cubic-bezier(.2, .8, .3, 1);

	/* ---- Type family -------------------------------------------------------
	   Lato is already enqueued by the Flatsome theme; this only references it. */
	--sb-font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* ---- Layout ------------------------------------------------------------ */
	--sb-maxw: 1280px;
	--sb-rail: 22.5rem;  /* 360px */

	font-family: var(--sb-font);
	font-size: var(--sb-text-md);
	line-height: var(--sb-lh-body);
	color: var(--sb-text-primary);
	background: var(--sb-surface-sunken);
	-webkit-font-smoothing: antialiased;
	padding: 0 var(--sb-space-4) var(--sb-space-16);
	box-sizing: border-box;
}

/* ==========================================================================
   2. Reset within scope
   ========================================================================== */

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

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

.snooby-heritage h1,
.snooby-heritage h2,
.snooby-heritage h3 {
	margin: 0;
	font-family: inherit;
	line-height: var(--sb-lh-snug);
	letter-spacing: var(--sb-track-tight);
	text-wrap: balance;
}

.snooby-heritage p { margin: 0; }

.snooby-heritage :is(button, a, select, [tabindex]):focus-visible {
	outline: 2px solid var(--sb-focus);
	outline-offset: 2px;
	border-radius: var(--sb-radius-sm);
}

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

/* ==========================================================================
   3. Icons  (masked SVG, inherits currentColor)
   ========================================================================== */

.sb-i {
	display: inline-block;
	flex: none;
	width: var(--sb-icon-md);
	height: var(--sb-icon-md);
	background-color: currentColor;
	-webkit-mask: var(--sb-i) center / contain no-repeat;
	mask: var(--sb-i) center / contain no-repeat;
}

.sb-i--sm { width: var(--sb-icon-sm); height: var(--sb-icon-sm); }
.sb-i--lg { width: var(--sb-icon-lg); height: var(--sb-icon-lg); }

.sb-i--check { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5 6.2 11.8 2.5 8.1'/%3E%3C/svg%3E"); }
.sb-i--plus  { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M8 3.2v9.6M3.2 8h9.6'/%3E%3C/svg%3E"); }
.sb-i--minus { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3.2 8h9.6'/%3E%3C/svg%3E"); }
.sb-i--lock  { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='7' width='10.4' height='6.6' rx='1.6'/%3E%3Cpath d='M5.4 7V5.1a2.6 2.6 0 0 1 5.2 0V7'/%3E%3C/svg%3E"); }
.sb-i--close { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }
.sb-i--chev  { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l4-4 4 4'/%3E%3C/svg%3E"); }
.sb-i--ruler { --sb-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.2' y='5' width='13.6' height='6' rx='1.2'/%3E%3Cpath d='M4.4 5v2M7 5v2.8M9.6 5v2M12.2 5v2.8'/%3E%3C/svg%3E"); }

/* ==========================================================================
   4. Hero
   ========================================================================== */

.sb-hero {
	max-width: var(--sb-maxw);
	margin: 0 auto;
	padding: var(--sb-space-12) 0 var(--sb-space-8);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sb-space-4);
}

.sb-hero__eyebrow {
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-ui);
	letter-spacing: var(--sb-track-badge);
	text-transform: uppercase;
	color: var(--sb-text-brand);
	background: var(--sb-surface-accent);
	padding: var(--sb-space-2) var(--sb-space-4);
	border-radius: var(--sb-radius-pill);
}

.sb-hero__title {
	font-size: clamp(var(--sb-text-3xl), 5.5vw, var(--sb-text-5xl));
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-display);
	letter-spacing: var(--sb-track-display);
	max-width: 18ch;
}

.sb-hero__sub {
	font-size: clamp(var(--sb-text-sm), 2vw, var(--sb-text-lg));
	line-height: var(--sb-lh-body);
	color: var(--sb-text-secondary);
	max-width: 46ch;
}

.sb-steps {
	list-style: none;
	margin: var(--sb-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sb-space-3) var(--sb-space-8);
	font-size: var(--sb-text-sm);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
}

.sb-steps li { display: flex; align-items: center; gap: var(--sb-space-2); }

.sb-steps span {
	display: grid;
	place-items: center;
	width: var(--sb-space-6);
	height: var(--sb-space-6);
	flex: none;
	border-radius: 50%;
	background: var(--sb-action);
	color: var(--sb-text-inverse);
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-bold);
	line-height: 1;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.sb-layout {
	max-width: var(--sb-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sb-rail);
	gap: var(--sb-space-8);
	align-items: start;
}

.sb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sb-space-5);
}

/*
 * Grid and flex children default to min-width:auto, which lets a long product
 * name widen its track instead of wrapping. Both of these are layout children.
 */
.sb-main,
.sb-item__info { min-width: 0; }

/* ==========================================================================
   6. Product card
   ========================================================================== */

.sb-card {
	background: var(--sb-surface);
	border: 1px solid var(--sb-border-subtle);
	border-radius: var(--sb-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--sb-dur-base) var(--sb-ease),
	            transform var(--sb-dur-base) var(--sb-ease);
}

.sb-card:hover { box-shadow: var(--sb-shadow-md); transform: translateY(-2px); }
.sb-card:focus-within { box-shadow: var(--sb-shadow-md); }
.sb-card.is-soldout { opacity: .55; }

.sb-card__media {
	position: relative;
	background: var(--sb-surface-accent);
	aspect-ratio: 5 / 6;
	overflow: hidden;
	cursor: pointer;
}

.sb-card__media:hover img {
	transform: scale(1.03);
}

.sb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sb-dur-base) var(--sb-ease); }

.sb-card__badge {
	position: absolute;
	top: var(--sb-space-3);
	left: var(--sb-space-3);
	z-index: 2;
	background: var(--sb-action);
	color: var(--sb-text-inverse);
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-black);
	line-height: 1;
	letter-spacing: var(--sb-track-badge);
	text-transform: uppercase;
	padding: var(--sb-space-2) var(--sb-space-3);
	border-radius: var(--sb-radius-pill);
}

.sb-card__body {
	padding: var(--sb-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-3);
	flex: 1;
}

.sb-card__title {
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-snug);
}

.sb-card__title a { color: inherit; text-decoration: none; }
.sb-card__title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.sb-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--sb-space-2);
	flex-wrap: wrap;
	font-size: var(--sb-text-md);
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-ui);
	font-variant-numeric: tabular-nums;
}

.sb-card__price .amount,
.sb-totals .amount { white-space: nowrap; }

.sb-card__payflex {
	font-size: var(--sb-text-2xs);
	color: var(--sb-text-secondary);
	font-weight: var(--sb-w-medium);
	margin-top: calc(var(--sb-space-1) * -1);
}

/* ---- Form field ---------------------------------------------------------- */

.sb-field { display: block; margin-top: auto; }

.sb-field__label {
	display: block;
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-ui);
	letter-spacing: var(--sb-track-label);
	text-transform: uppercase;
	color: var(--sb-text-secondary);
	margin-bottom: var(--sb-space-2);
}

.sb-select {
	width: 100%;
	height: var(--sb-control-md);
	padding: 0 var(--sb-space-8) 0 var(--sb-space-3);
	font: inherit;
	font-size: var(--sb-text-sm);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-primary);
	background-color: var(--sb-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b5f59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.8 6 6.4l5-4.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sb-space-3) center;
	background-size: 11px;
	border: 1px solid var(--sb-border-control);
	border-radius: var(--sb-radius-sm);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color var(--sb-dur-fast) var(--sb-ease),
	            box-shadow var(--sb-dur-fast) var(--sb-ease);
}

.sb-select:hover { border-color: var(--sb-text-secondary); }

.sb-select.is-invalid {
	border-color: var(--sb-action);
	background-color: var(--sb-surface-accent);
	box-shadow: 0 0 0 3px var(--sb-surface-accent);
}

.sb-card__note {
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-brand);
}

.sb-card__note:empty { display: none; }

/* ---- Size guide trigger -------------------------------------------------
   A quiet text link, not a second button: the card already has one primary
   action and the size guide must not compete with "Add to offer". It sits
   directly under the size select, where the doubt actually happens.        */

.sb-sizelink {
	display: inline-flex;
	align-items: center;
	gap: var(--sb-space-1);
	align-self: flex-start;
	margin: calc(var(--sb-space-2) * -1) 0 0;
	padding: var(--sb-space-1) 0;
	min-height: var(--sb-space-6);
	font: inherit;
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
	background: none;
	border: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color var(--sb-dur-fast) var(--sb-ease);
}

.sb-sizelink:hover,
.sb-sizelink:focus-visible { color: var(--sb-text-brand); }

/* ==========================================================================
   6b. Size chart modal
   ========================================================================== */

/* Above the mobile bar (9998) and the bag drawer (9999), below toasts (99999):
   the guide is opened from inside the drawer on mobile, so it must sit on top. */
.sb-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: var(--sb-space-4);
}

.sb-modal[hidden] { display: none; }

.sb-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(32, 20, 33, .58);
	animation: sb-fade var(--sb-dur-base) var(--sb-ease);
}

.sb-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 44rem;
	max-height: min(88vh, 46rem);
	background: var(--sb-surface);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow-md);
	overflow: hidden;
	animation: sb-modal-in var(--sb-dur-slow) var(--sb-ease-out);
}

@keyframes sb-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.sb-modal__head {
	display: flex;
	align-items: center;
	gap: var(--sb-space-3);
	padding: var(--sb-space-4) var(--sb-space-5);
	border-bottom: 1px solid var(--sb-border-subtle);
}

.sb-modal__title {
	flex: 1;
	margin: 0;
	font-size: var(--sb-text-lg);
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-snug);
	letter-spacing: var(--sb-track-tight);
	color: var(--sb-text-primary);
}

.sb-modal__close {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--sb-control-sm);
	height: var(--sb-control-sm);
	border: 0;
	border-radius: 50%;
	background: var(--sb-surface-sunken);
	color: var(--sb-text-primary);
	cursor: pointer;
	transition: background-color var(--sb-dur-fast) var(--sb-ease);
}

.sb-modal__close:hover { background: var(--sb-surface-accent); }

.sb-modal__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--sb-space-5);
}

.sb-modal__foot {
	flex: none;
	padding: var(--sb-space-4) var(--sb-space-5);
	border-top: 1px solid var(--sb-border-subtle);
	background: var(--sb-surface-sunken);
	padding-bottom: calc(var(--sb-space-4) + env(safe-area-inset-bottom));
}

.sb-modal__hint {
	margin: 0 0 var(--sb-space-3);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-body);
	color: var(--sb-text-secondary);
}

/* ---- Chart content ---------------------------------------------------- */

.sb-chart__note {
	margin: 0 0 var(--sb-space-4);
	padding: var(--sb-space-3);
	font-size: var(--sb-text-sm);
	line-height: var(--sb-lh-body);
	color: var(--sb-text-primary);
	background: var(--sb-surface-accent);
	border-radius: var(--sb-radius-sm);
}

.sb-chart__figures {
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-5);
}

.sb-chart__figure { margin: 0; }

.sb-chart__figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sb-border-subtle);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-surface);
}

.sb-chart__figure figcaption {
	margin-top: var(--sb-space-2);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	text-align: center;
}

.sb-chart__figure figcaption a { color: var(--sb-text-brand); }

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sb-space-2);
	min-height: var(--sb-control-md);
	padding: 0 var(--sb-space-5);
	font: inherit;
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-ui);
	letter-spacing: var(--sb-track-tight);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--sb-radius-sm);
	cursor: pointer;
	transition: background-color var(--sb-dur-fast) var(--sb-ease),
	            transform var(--sb-dur-fast) var(--sb-ease),
	            opacity var(--sb-dur-fast) var(--sb-ease);
}

.sb-btn--primary { background: var(--sb-action); color: var(--sb-text-inverse); }
.sb-btn--primary:hover:not(:disabled) { background: var(--sb-action-hover); color: var(--sb-text-inverse); }
.sb-btn--primary:active:not(:disabled) { background: var(--sb-action-active); transform: translateY(1px); }

.sb-btn:disabled { opacity: .45; cursor: not-allowed; }
.sb-btn--block { width: 100%; }
.sb-card__add { width: 100%; }
.sb-card__add.is-added { background: var(--sb-green-600); }

/* ==========================================================================
   8. Bag panel
   ========================================================================== */

.sb-cart__inner { position: sticky; top: var(--sb-space-5); }

.sb-panel {
	background: var(--sb-surface);
	border: 1px solid var(--sb-border-subtle);
	border-radius: var(--sb-radius-lg);
	padding: var(--sb-space-5);
	box-shadow: var(--sb-shadow-md);
}

.sb-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sb-space-3);
	padding-bottom: var(--sb-space-4);
	border-bottom: 1px solid var(--sb-border-subtle);
}

.sb-panel__head h2 {
	font-size: var(--sb-text-xl);
	font-weight: var(--sb-w-black);
}

.sb-pill {
	min-width: var(--sb-space-6);
	height: var(--sb-space-6);
	padding: 0 var(--sb-space-2);
	display: grid;
	place-items: center;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-surface-accent);
	color: var(--sb-text-brand);
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-black);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---- Progress ------------------------------------------------------------ */

.sb-progress { padding: var(--sb-space-4) 0; }

.sb-progress__track {
	height: var(--sb-space-2);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-surface-accent);
	overflow: hidden;
}

.sb-progress__fill {
	height: 100%;
	width: 0;
	background: var(--sb-action);
	border-radius: var(--sb-radius-pill);
	transition: width var(--sb-dur-slow) var(--sb-ease),
	            background-color var(--sb-dur-base) var(--sb-ease);
}

.sb-progress__msg {
	margin-top: var(--sb-space-3);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
}

.sb-progress__msg strong { color: var(--sb-text-brand); font-weight: var(--sb-w-black); }
.sb-progress.is-complete .sb-progress__fill { background: var(--sb-green-600); }
.sb-progress.is-complete .sb-progress__msg strong { color: var(--sb-text-success); }

/* ---- Items --------------------------------------------------------------- */

.sb-items {
	display: flex;
	flex-direction: column;
	max-height: 40vh;
	overflow-y: auto;
	border-top: 1px solid var(--sb-border-subtle);
	border-bottom: 1px solid var(--sb-border-subtle);
}

.sb-empty {
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-body);
	color: var(--sb-text-secondary);
	padding: var(--sb-space-6) 0;
	text-align: center;
}

.sb-item {
	display: grid;
	grid-template-columns: var(--sb-space-16) minmax(0, 1fr);
	gap: var(--sb-space-3);
	padding: var(--sb-space-3) 0;
	border-bottom: 1px solid var(--sb-border-subtle);
	animation: sb-in var(--sb-dur-slow) var(--sb-ease-out);
}

.sb-item:last-child { border-bottom: 0; }

@keyframes sb-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.sb-item__media {
	position: relative;
	border-radius: var(--sb-radius-sm);
	overflow: hidden;
	background: var(--sb-surface-accent);
	aspect-ratio: 5 / 6;
}

.sb-item__media img { width: 100%; height: 100%; object-fit: cover; }

.sb-item__name {
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-snug);
}

.sb-item__meta {
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
	margin-top: var(--sb-space-1);
}

.sb-item__free {
	display: inline-flex;
	align-items: center;
	gap: var(--sb-space-1);
	margin-top: var(--sb-space-2);
	background: var(--sb-surface-success);
	color: var(--sb-text-success);
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-black);
	line-height: 1;
	letter-spacing: var(--sb-track-badge);
	text-transform: uppercase;
	padding: var(--sb-space-1) var(--sb-space-2);
	border-radius: var(--sb-radius-pill);
}

.sb-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-2);
}

.sb-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sb-border-control);
	border-radius: var(--sb-radius-pill);
	overflow: hidden;
}

.sb-qty button {
	display: grid;
	place-items: center;
	width: var(--sb-control-sm);
	height: var(--sb-control-sm);
	border: 0;
	background: var(--sb-surface);
	color: var(--sb-text-primary);
	cursor: pointer;
	transition: background-color var(--sb-dur-fast) var(--sb-ease);
}

.sb-qty button:hover:not(:disabled) { background: var(--sb-surface-accent); }
.sb-qty button:active:not(:disabled) { background: var(--sb-border-subtle); }
.sb-qty button:disabled { opacity: .35; cursor: not-allowed; }

.sb-qty__value {
	min-width: var(--sb-space-6);
	text-align: center;
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-black);
	font-variant-numeric: tabular-nums;
}

.sb-item__price {
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-ui);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sb-item__price del {
	display: block;
	font-weight: var(--sb-w-regular);
	font-size: var(--sb-text-2xs);
	color: var(--sb-text-secondary);
}

.sb-item__remove {
	display: inline-flex;
	align-items: center;
	min-height: var(--sb-tap-min);
	margin-top: var(--sb-space-1);
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--sb-text-2xs);
	color: var(--sb-text-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color var(--sb-dur-fast) var(--sb-ease);
}

.sb-item__remove:hover { color: var(--sb-text-brand); }

/* ---- Savings + totals ---------------------------------------------------- */

.sb-saving {
	margin-top: var(--sb-space-4);
	background: var(--sb-surface-success);
	color: var(--sb-text-success);
	border-radius: var(--sb-radius-sm);
	padding: var(--sb-space-3) var(--sb-space-4);
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-black);
	line-height: var(--sb-lh-ui);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sb-totals {
	margin: var(--sb-space-4) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-2);
}

.sb-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sb-space-3);
	font-size: var(--sb-text-sm);
	line-height: var(--sb-lh-ui);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.sb-totals dt, .sb-totals dd { margin: 0; }

.sb-totals__row--discount { color: var(--sb-text-success); font-weight: var(--sb-w-bold); }

.sb-totals__row--total {
	border-top: 1px solid var(--sb-border-subtle);
	margin-top: var(--sb-space-1);
	padding-top: var(--sb-space-3);
	font-size: var(--sb-text-lg);
	font-weight: var(--sb-w-black);
	letter-spacing: var(--sb-track-tight);
}

.sb-panel [data-sb-checkout] { margin-top: var(--sb-space-4); }

.sb-panel__hint {
	margin-top: var(--sb-space-3);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
	text-align: center;
}

.sb-trust {
	list-style: none;
	margin: var(--sb-space-4) 0 0;
	padding: var(--sb-space-4) 0 0;
	border-top: 1px solid var(--sb-border-subtle);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sb-space-2) var(--sb-space-4);
	font-size: var(--sb-text-2xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
}

.sb-trust li { display: inline-flex; align-items: center; gap: var(--sb-space-1); }
.sb-trust .sb-i { color: var(--sb-text-success); }

.sb-noscript {
	text-align: center;
	padding: var(--sb-space-4);
	background: var(--sb-surface-accent);
	border-radius: var(--sb-radius-sm);
}

/* ==========================================================================
   9. Toasts
   ========================================================================== */

.sb-toasts {
	position: fixed;
	left: 50%;
	bottom: var(--sb-space-6);
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sb-space-2);
	width: calc(100% - var(--sb-space-8));
	max-width: 26.25rem;
	pointer-events: none;
}

.sb-toast {
	width: 100%;
	background: var(--sb-text-primary);
	color: var(--sb-surface-sunken);
	border-radius: var(--sb-radius-sm);
	padding: var(--sb-space-3) var(--sb-space-4);
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-bold);
	line-height: var(--sb-lh-ui);
	text-align: center;
	box-shadow: var(--sb-shadow-lg);
	animation: sb-toast-in var(--sb-dur-slow) var(--sb-ease-out);
}

.sb-toast--nudge { background: var(--sb-action); color: var(--sb-text-inverse); }
.sb-toast--win   { background: var(--sb-green-600); color: var(--sb-text-inverse); }
.sb-toast--error { background: var(--sb-red-700); color: var(--sb-text-inverse); }
.sb-toast.is-out { animation: sb-toast-out var(--sb-dur-base) var(--sb-ease) forwards; }

@keyframes sb-toast-in {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes sb-toast-out {
	to { opacity: 0; transform: translateY(10px); }
}

/* ==========================================================================
   10. Mobile bar + drawer
   ========================================================================== */

.sb-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: none;
	align-items: center;
	gap: var(--sb-space-3);
	padding: var(--sb-space-3) var(--sb-space-3) calc(var(--sb-space-3) + env(safe-area-inset-bottom));
	background: var(--sb-surface);
	border-top: 1px solid var(--sb-border-subtle);
	box-shadow: 0 -6px 20px rgba(32, 20, 33, .1);
}

.sb-mobilebar__open {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--sb-space-3);
	min-width: 0;
	min-height: var(--sb-control-md);
	background: none;
	border: 0;
	padding: var(--sb-space-1);
	text-align: left;
	font: inherit;
	color: var(--sb-text-primary);
	cursor: pointer;
}

.sb-mobilebar__count {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--sb-space-8);
	height: var(--sb-space-8);
	border-radius: 50%;
	background: var(--sb-action);
	color: var(--sb-text-inverse);
	font-size: var(--sb-text-xs);
	font-weight: var(--sb-w-black);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sb-mobilebar__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: var(--sb-lh-ui);
}

.sb-mobilebar__text strong {
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-black);
	font-variant-numeric: tabular-nums;
}

.sb-mobilebar__text small {
	font-size: var(--sb-text-xs);
	color: var(--sb-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sb-mobilebar__chev {
	flex: none;
	color: var(--sb-text-secondary);
	transition: transform var(--sb-dur-base) var(--sb-ease);
}

.sb-mobilebar.is-open .sb-mobilebar__chev { transform: rotate(180deg); }
.sb-mobilebar__checkout { flex: none; }

.sb-drawer { position: fixed; inset: 0; z-index: 9999; }

.sb-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(32, 20, 33, .5);
	animation: sb-fade var(--sb-dur-base) var(--sb-ease);
}

@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }

.sb-drawer__sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 88vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sb-surface-sunken);
	border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
	padding: var(--sb-space-4) var(--sb-space-3) calc(var(--sb-space-16) + env(safe-area-inset-bottom));
	animation: sb-slide-up var(--sb-dur-slow) var(--sb-ease-out);
}

@keyframes sb-slide-up { from { transform: translateY(100%); } to { transform: none; } }

.sb-drawer__close {
	position: absolute;
	top: var(--sb-space-3);
	right: var(--sb-space-3);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--sb-control-md);
	height: var(--sb-control-md);
	border: 0;
	border-radius: 50%;
	background: var(--sb-surface);
	box-shadow: var(--sb-shadow-md);
	color: var(--sb-text-primary);
	cursor: pointer;
}

.sb-drawer .sb-items { max-height: none; }
.sb-drawer .sb-panel [data-sb-checkout] { display: none; }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.snooby-heritage { --sb-rail: 20rem; }
	.sb-layout { gap: var(--sb-space-6); }
	.sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.snooby-heritage { padding-bottom: var(--sb-space-16); }
	.sb-layout { grid-template-columns: minmax(0, 1fr); }
	.sb-cart { display: none; }
	.sb-mobilebar { display: flex; }
}

@media (max-width: 640px) {
	.snooby-heritage { padding-left: var(--sb-space-3); padding-right: var(--sb-space-3); }
	.sb-hero { padding: var(--sb-space-4) 0 var(--sb-space-3); gap: var(--sb-space-2); }
	.sb-hero__eyebrow { font-size: var(--sb-text-2xs); padding: var(--sb-space-1) var(--sb-space-3); }
	.sb-hero__title { font-size: var(--sb-text-lg); }
	.sb-hero__sub { font-size: var(--sb-text-xs); }
	.sb-steps { gap: var(--sb-space-1) var(--sb-space-3); font-size: var(--sb-text-2xs); margin-top: var(--sb-space-1); }

	/*
	 * Two columns on phones: on a browse-and-compare page this shows twice as
	 * much of the range per scroll. For a single-column grid instead, change
	 * the line below to `grid-template-columns: minmax(0, 1fr);`
	 */
	.sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sb-space-3); }

	.sb-card__body { padding: var(--sb-space-3); gap: var(--sb-space-2); }
	.sb-card__title { font-size: var(--sb-text-xs); }
	.sb-card__price { font-size: var(--sb-text-sm); }
	.sb-card__payflex { font-size: 0.65rem; }

	/* 16px stops iOS Safari zooming the page on focus. */
	.sb-select { font-size: var(--sb-text-md); }

	/* Full-bleed sheet on phones: the chart is the whole point of the screen. */
	.sb-modal { padding: 0; place-items: end stretch; }

	.sb-modal__box {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
		animation: sb-slide-up var(--sb-dur-slow) var(--sb-ease-out);
	}

	.sb-modal__head,
	.sb-modal__foot { padding-left: var(--sb-space-4); padding-right: var(--sb-space-4); }
	.sb-modal__body { padding: var(--sb-space-4); }
	.sb-modal__title { font-size: var(--sb-text-md); }

	/* Bigger tap target on touch. */
	.sb-sizelink { min-height: var(--sb-space-8); font-size: var(--sb-text-sm); }
}

@media (max-width: 380px) {
	.sb-grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The media query above sets `display: flex` on the mobile bar, and author
 * styles beat the browser's own [hidden] rule - so restate it explicitly.
 */
.snooby-heritage .sb-mobilebar[hidden],
.snooby-heritage .sb-drawer[hidden] { display: none !important; }

.snooby-heritage.is-busy .sb-panel { opacity: .7; pointer-events: none; }


/* ==========================================================================
   Free delivery
   Sits directly under the totals so the nudge is the last thing read before
   the checkout button.
   ========================================================================== */

.snooby-heritage .sb-totals__row--delivery dd b.sb-free {
	color: var(--sb-text-success);
	font-weight: var(--sb-w-black);
	font-size: var(--sb-text-2xs);
	letter-spacing: var(--sb-track-label);
}

.snooby-heritage .sb-ship {
	display: flex;
	align-items: flex-start;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-3);
	padding: var(--sb-space-3);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-surface-sunken);
	color: var(--sb-text-secondary);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
}

.snooby-heritage .sb-ship--won {
	background: var(--sb-surface-success);
	color: var(--sb-text-success);
	font-weight: var(--sb-w-bold);
}

.snooby-heritage .sb-ship__body { flex: 1 1 auto; min-width: 0; }

.snooby-heritage .sb-ship__track {
	display: block;
	height: 4px;
	margin-top: var(--sb-space-2);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-surface-accent);
	overflow: hidden;
}

.snooby-heritage .sb-ship__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-action);
	transition: width var(--sb-dur-slow) var(--sb-ease);
}

@media ( prefers-reduced-motion: reduce ) {
	.snooby-heritage .sb-ship__fill { transition: none; }
}

/* Author `display` declarations outrank the browser's own [hidden] rule, so any
   element this plugin toggles with el.hidden has to restate it. This also fixes
   the discount row, which set display:flex and therefore never hid. */
.snooby-heritage .sb-totals__row[hidden],
.snooby-heritage .sb-ship[hidden],
.snooby-heritage .sb-ship__track[hidden],
.snooby-heritage .sb-btn[hidden],
.snooby-heritage .sb-i[hidden] { display: none !important; }

/* ==========================================================================
   Heritage Day skin
   --------------------------------------------------------------------------
   The layout above is unchanged; only the colour tokens are re-pointed, from
   Snooby purple to the Springbok green and gold the rest of the site uses for
   this range. Declared last so these win without raising specificity.
   Contrast checked on white: green 11.6:1, deep green text 13.4:1; the gold
   badge carries near-black ink at 9.7:1.
   ========================================================================== */

.snooby-heritage {
	--sb-bok-green:      #0e3b28;  /* jersey green - actions and headings */
	--sb-bok-green-700:  #0b3021;
	--sb-bok-green-800:  #082619;
	--sb-bok-gold:       #f5b921;  /* jersey gold - badges only */
	--sb-bok-gold-ink:   #2a1e00;  /* ink on gold */

	--sb-surface-accent:  #eaf2ed;
	--sb-surface-success: #e3efe8;

	--sb-text-brand:    var(--sb-bok-green);
	--sb-text-success:  var(--sb-bok-green-700);

	--sb-action:        var(--sb-bok-green);
	--sb-action-hover:  var(--sb-bok-green-700);
	--sb-action-active: var(--sb-bok-green-800);
	--sb-focus:         var(--sb-bok-green);
}

/* The "Buy 2, 20% off" flash on each card. */
.snooby-heritage .sb-card__badge {
	background: var(--sb-bok-gold);
	color: var(--sb-bok-gold-ink);
}

/* ---- Countdown ---------------------------------------------------------- */

.snooby-heritage .sb-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-4);
	padding: var(--sb-space-2) var(--sb-space-4);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-bok-green);
	color: #fff;
}

.snooby-heritage .sb-countdown__label {
	font-size: var(--sb-text-2xs);
	font-weight: var(--sb-w-bold);
	letter-spacing: var(--sb-track-label);
	text-transform: uppercase;
	color: var(--sb-bok-gold);
}

.snooby-heritage .sb-countdown__time {
	font-size: var(--sb-text-sm);
	font-weight: var(--sb-w-black);
	font-variant-numeric: tabular-nums;
}

/* ---- "The deal has ended" ------------------------------------------------ */

.snooby-heritage .sb-hero__note {
	margin-top: var(--sb-space-4);
	font-size: var(--sb-text-sm);
	color: var(--sb-text-secondary);
}

.snooby-heritage .sb-hero__note--over {
	display: inline-block;
	padding: var(--sb-space-2) var(--sb-space-4);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-surface-sunken);
	border: 1px solid var(--sb-border-subtle);
}

/* Note under the totals when the cart holds items outside this offer. */
.snooby-heritage .sb-panel__note {
	margin-top: var(--sb-space-3);
	padding: var(--sb-space-3);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-surface-sunken);
	font-size: var(--sb-text-xs);
	line-height: var(--sb-lh-ui);
	color: var(--sb-text-secondary);
}