/* ==========================================================================
   GAMB theme styles

   You normally never need to edit this file. Colours, fonts, text sizes and
   spacing come from theme.json, so change them in Appearance > Editor > Styles.
   This file only adds details blocks can't do on their own: the sticky header,
   the mobile menu, hover effects, the video hero, category cards, the product
   page (photos / 360 / video) and the shop card look.
   Every colour below is a palette variable, so editing the palette in the
   Site Editor updates this file's colours as well. The site is dark: the page
   is Black, cards and panels are Ink (charcoal), text is Soft (bone) and the
   accent colours are the rose family. The roles are listed under :root.

   Contents
     1. Basics            5. Category cards      9. Product cards and shop
     2. Header            6. Product page        10. How it works, About, CTA
     3. Mobile menu       7. Photos/360/Video    11. Footer
     3b. Shop dropdown
     4. Hero              8. Cart and checkout   12. Motion and reduced motion
                                                 13. Forms, Contact page, live chat
                                                 14. Basket drawer
                                                 15. Cookie consent
                                                 16. Collection or delivery (checkout)
   ========================================================================== */

/* Roles used through this file. Change a colour in Appearance > Editor > Styles > Colors and every role that uses it follows. */
:root, body, .editor-styles-wrapper {
	--gamb-page: var(--wp--preset--color--black);          /* page background */
	--gamb-panel: var(--wp--preset--color--ink);           /* cards, header bar, form fields, dark bands */
	--gamb-raise: var(--wp--preset--color--graphite, #2F2727); /* a step lighter than a panel (hover, pressed) */
	--gamb-text: var(--wp--preset--color--soft);           /* main text */
	--gamb-strong: var(--wp--preset--color--paper);        /* headings, white */
	--gamb-muted: var(--wp--preset--color--muted);         /* secondary text */
	--gamb-line: var(--wp--preset--color--line);           /* thin dividing lines */
	/* Borders on form fields and outline buttons need to be easier to see than a divider line. */
	--gamb-field-line: color-mix(in srgb, var(--gamb-muted) 62%, var(--gamb-panel));
}
html { color-scheme: dark; }

:root {
	--gamb-ease: cubic-bezier(.16, 1, .3, 1);
	--gamb-util-h: 36px;
	--gamb-nav-h: 68px;
	--gamb-good: #4cc38a;
	--gamb-bad: #f2877e;
	--gamb-warn: #e8b04e;
	/* Text that sits on the Accent colour (buttons, the cart count, sale badges) is Black: it reads clearly on the rose. */
	--gamb-on-accent: var(--wp--preset--color--black);
	/* Deeper and lighter versions of the accent for small text. The fallbacks keep an older saved palette working. */
	--gamb-accent-deep: var(--wp--preset--color--accent-deep, var(--wp--preset--color--accent));
	--gamb-accent-light: var(--wp--preset--color--accent-light, var(--wp--preset--color--accent));
}

/* Anchor links land below the sticky header. This is a margin on the targets rather than scroll-padding on
   <html>, because scroll-padding also makes the browser scroll the page whenever something inside the sticky
   header takes focus (for example when the mobile menu closes and focus returns to the hamburger). */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--gamb-nav-h) + 16px); }
.gamb-site-header, .gamb-site-header [id] { scroll-margin-top: 0; }
body { overflow-x: clip; }
img { height: auto; }

/* No gap between header, page and footer. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Buttons: soft colour change on hover, a small press when tapped. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color .3s var(--gamb-ease), color .3s var(--gamb-ease), border-color .3s var(--gamb-ease), transform .12s var(--gamb-ease);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: scale(.98); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; }

/* Keyboard focus is always visible. */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* ---------- Small shared helpers ---------- */
.gamb-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.gamb-eyebrow a { text-decoration: none; }
.gamb-eyebrow.is-accent,
.is-accent.gamb-eyebrow a { color: var(--gamb-accent-light); }
.gamb-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.gamb-section-head > * { margin-block: 0; }
.gamb-section-head h2 { margin-top: 12px; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.gamb-site-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--gamb-util-h));
	z-index: 50;
}
.gamb-util { height: var(--gamb-util-h); display: flex; align-items: center; }
.gamb-util > .wp-block-group { width: 100%; }
.gamb-util p { margin: 0; line-height: 1; }
.gamb-util a { text-decoration: none; opacity: .8; }
.gamb-nav-row { border-bottom: 1px solid var(--gamb-line); transition: box-shadow .3s var(--gamb-ease); }
/* A header or checkout bar saved in the editor before the dark scheme still carries the white Paper background. */
.gamb-nav-row.has-paper-background-color,
.gamb-checkout-head.has-paper-background-color { background-color: var(--gamb-panel) !important; }
/* Likewise the "Shop by type" section saved with the old light Soft background now sits on the page colour. */
.gamb-types.has-soft-background-color { background-color: var(--gamb-page) !important; }
.gamb-nav-row > .wp-block-group { min-height: var(--gamb-nav-h); align-items: center; }
body.gamb-scrolled .gamb-nav-row { box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .8); }
.gamb-brand { gap: 12px; align-items: center; min-width: 0; }
.gamb-brand .wp-block-site-title { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1; }
.gamb-brand .wp-block-site-title a { text-decoration: none; }
.gamb-brand .wp-block-site-logo { flex: 0 1 auto; min-width: 0; }
.gamb-brand .wp-block-site-logo img { max-width: 100%; height: auto; }
/* When a logo has been uploaded, hide the text title next to it. */
.gamb-brand:has(.wp-block-site-logo img) .wp-block-site-title { display: none; }
.gamb-nav-right { gap: 8px; align-items: center; }
.gamb-enquire .wp-block-button__link { padding: .85rem 1.2rem; }

/* Menu links: a thin line slides in on hover. */
.gamb-site-header .wp-block-navigation-item__content { position: relative; text-decoration: none; padding-block: 6px; }
@media (min-width: 600px) {
	.gamb-site-header .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .35s var(--gamb-ease);
	}
	.gamb-site-header .wp-block-navigation-item__content:hover::after,
	.gamb-site-header .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); }
	.gamb-nav-right { gap: 20px; }
}

/* Cart icon with item count (a real link to the WooCommerce cart). */
.gamb-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: inherit;
	text-decoration: none;
	flex: 0 0 auto;
}
.gamb-cart-link svg { display: block; width: 24px; height: 24px; transition: transform .3s var(--gamb-ease); }
.gamb-cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--gamb-on-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	letter-spacing: 0;
	text-align: center;
	box-sizing: border-box;
}
.gamb-cart-count[hidden] { display: none; }
.gamb-cart-count.is-bump { animation: gamb-pop .45s var(--gamb-ease); }
@media (hover: hover) { .gamb-cart-link:hover svg { transform: translateY(-1px) scale(1.06); } }
.gamb-cart-link:active svg { transform: scale(.94); }

@media (max-width: 781px) {
	.gamb-nav-right .gamb-enquire { display: none !important; }
	.gamb-brand .wp-block-site-title { font-size: clamp(.95rem, 4.4vw, 1.2rem); white-space: nowrap; }
}
@media (max-width: 599px) {
	:root { --gamb-nav-h: 60px; }
	.gamb-util .wp-block-group { justify-content: center; }
	.gamb-util .wp-block-group > p:last-child { display: none; }
	.gamb-brand .wp-block-site-logo { max-width: min(150px, 42vw); }
}

/* ==========================================================================
   3. Mobile menu (phones). Reuses WordPress's own menu, so links are still
      edited in Appearance > Editor > Header.
   ========================================================================== */
@media (max-width: 599px) {
	/* The hamburger: two lines that turn into a cross. */
	.gamb-site-header .wp-block-navigation__responsive-container-open {
		position: relative;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.gamb-site-header .wp-block-navigation__responsive-container-open svg { display: none; }
	.gamb-site-header .wp-block-navigation__responsive-container-open::before,
	.gamb-site-header .wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		left: 11px;
		right: 11px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .45s var(--gamb-ease), top .45s var(--gamb-ease);
	}
	.gamb-site-header .wp-block-navigation__responsive-container-open::before { top: 17px; }
	.gamb-site-header .wp-block-navigation__responsive-container-open::after { top: 25px; }
	html.has-modal-open .gamb-site-header .wp-block-navigation__responsive-container-open::before { top: 21px; transform: rotate(45deg); }
	html.has-modal-open .gamb-site-header .wp-block-navigation__responsive-container-open::after { top: 21px; transform: rotate(-45deg); }

	/* The panel under the header. It stays on screen while it fades out, so closing is smooth too. */
	.gamb-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default) {
		display: none;
		position: fixed;
		inset: var(--gamb-menu-top, 0px) 0 0 0;
		z-index: 99;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--paper);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		animation: none;
		transition: opacity .3s ease, transform .5s var(--gamb-ease), visibility 0s linear .5s, display .5s allow-discrete;
	}
	.gamb-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default) {
		display: flex;
		opacity: 1;
		visibility: visible;
		transform: none;
		animation: none;
		transition-delay: 0s;
	}
	@starting-style {
		.gamb-site-header .wp-block-navigation__responsive-container.is-menu-open:not(.hidden-by-default) { opacity: 0; transform: translateY(-10px); }
	}
	/* The menu panel is black. WordPress paints an open menu white (and clears it the moment it starts closing)
	   with its own "important" rules, so this one has to be as firm, otherwise the panel would blink off before it fades.
	   To change the colour, edit "Black" in Appearance > Editor > Styles > Colors (it is also the top strip and footer). */
	.gamb-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default) {
		background-color: var(--wp--preset--color--black) !important;
		color: var(--wp--preset--color--paper) !important;
	}
	/* Without the script, WordPress's own close button stays; with it, the hamburger itself closes the menu. */
	.gamb-nav-ready .gamb-site-header .wp-block-navigation__responsive-container-close { display: none; }

	.gamb-site-header .wp-block-navigation__responsive-close,
	.gamb-site-header .wp-block-navigation__responsive-dialog { width: 100%; max-width: none; margin: 0; }
	.gamb-site-header .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 8px var(--wp--style--root--padding-right, 16px) 40px;
		box-sizing: border-box;
	}
	.gamb-site-header .wp-block-navigation__container,
	.gamb-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}
	.gamb-site-header .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
	}
	.gamb-site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--paper);
	}
	.gamb-site-header .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 64px;
		padding: 0;
		font-size: clamp(1.4rem, 6.5vw, 1.9rem);
		font-weight: 800;
		letter-spacing: -.01em;
		line-height: 1.05;
		text-transform: uppercase;
		text-align: left;
	}
	.gamb-site-header .wp-block-navigation-item__content::after {
		content: "";
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		position: static;
		height: 22px;
		transform: none;
		opacity: .5;
		transition: transform .35s var(--gamb-ease), opacity .3s;
	}
	.gamb-site-header .wp-block-navigation-item__content:active { color: var(--wp--preset--color--accent); }
	.gamb-site-header .wp-block-navigation-item__content:active::after { transform: translateX(4px); opacity: 1; }

	/* Links slide up one after another as the panel opens. */
	.gamb-site-header .is-menu-open .wp-block-navigation-item { animation: gamb-rise .6s var(--gamb-ease) backwards; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .06s; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .11s; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .16s; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .21s; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .26s; }
	.gamb-site-header .is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: .3s; }
}

/* ==========================================================================
   3b. Shop dropdown in the header menu (inc/shop-menu.php draws it, gamb.js 4b opens it).
       Desktop and tablets: a panel under the menu that opens on hover, on tap, or from the keyboard.
       Phones: the item opens and closes like a drawer inside the menu panel.
       A sub-menu inside it (Accessories and its sub-categories) flies out sideways with a mouse on a wide window,
       and unfolds downwards on a phone, a tablet, a touch screen or a narrow window.
       Its sub-items are normal menu blocks: edit them in Appearance > Editor > Header.
   ========================================================================== */
.gamb-dd { position: relative; }
.gamb-dd__toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gamb-dd__chev { display: block; transition: transform .35s var(--gamb-ease); }
.gamb-dd.is-open > .gamb-dd__toggle .gamb-dd__chev { transform: rotate(180deg); }
.gamb-dd__toggle:focus-visible,
.gamb-dd__link:focus-visible,
.gamb-dd__list .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--gamb-accent-light); outline-offset: 2px; }
.gamb-site-header .gamb-dd__list { list-style: none; margin: 0; padding: 0; }
.gamb-dd__list > li { margin: 0; }
/* "View All [Category]" is the first row of a sub-menu and opens the whole category. It stands a little apart from the
   sub-categories under it: rose lettering and a thin line below. (Shown on every device, with a mouse, a finger or the keyboard.) */
html .gamb-site-header .gamb-dd__list > li.gamb-sub-all > a.wp-block-navigation-item__content { color: var(--gamb-accent-light); font-weight: 700; }
html .gamb-site-header .gamb-dd__list > li.gamb-sub-all > a.wp-block-navigation-item__content:hover,
html .gamb-site-header .gamb-dd__list > li.gamb-sub-all > a.wp-block-navigation-item__content:focus-visible { color: var(--gamb-strong); }

/* ----- Desktop and tablet ----- */
@media (min-width: 600px) {
	.gamb-dd { display: flex; align-items: center; }
	.gamb-dd__toggle { width: 26px; height: 30px; margin-left: 2px; opacity: .65; transition: opacity .25s ease; }
	.gamb-dd:hover > .gamb-dd__toggle,
	.gamb-dd.is-open > .gamb-dd__toggle,
	.gamb-dd__toggle:focus-visible { opacity: 1; }
	.gamb-dd.is-open > .gamb-dd__link::after { transform: scaleX(1); }

	.gamb-dd__panel {
		position: absolute;
		top: calc(100% + var(--gamb-dd-gap, 18px));
		left: 0;
		z-index: 60;
		min-width: 270px;
		background: var(--gamb-panel);
		border: 1px solid var(--gamb-line);
		border-top: 2px solid var(--wp--preset--color--accent);
		border-radius: 0 0 2px 2px;
		box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .9);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(10px);
		transform-origin: top left;
		transition: opacity .2s ease, transform .3s var(--gamb-ease), visibility 0s linear .3s;
	}
	.gamb-dd__panel.is-flip { left: auto; right: 0; transform-origin: top right; }
	.gamb-dd.is-open > .gamb-dd__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}
	/* An invisible bridge between the menu and the panel, so the pointer can cross the gap without the panel closing. */
	.gamb-dd__panel::before {
		content: "";
		position: absolute;
		left: -14px;
		right: -14px;
		bottom: 100%;
		height: calc(var(--gamb-dd-gap, 18px) + 6px);
	}
	/* Without the script, hover and keyboard focus still open it. */
	html:not(.gamb-dd-js) .gamb-dd:hover > .gamb-dd__panel,
	html:not(.gamb-dd-js) .gamb-dd:focus-within > .gamb-dd__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}

	.gamb-site-header .gamb-dd__list { padding: 8px 0; }
	.gamb-dd__list .wp-block-navigation-item { display: block; width: 100%; border: 0; animation: none; }
	.gamb-dd__list .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		width: 100%;
		box-sizing: border-box;
		padding: 14px 22px 14px 24px;
		color: var(--gamb-text);
		white-space: nowrap;
		transition: background-color .2s ease, color .2s ease, padding-left .3s var(--gamb-ease);
	}
	/* The sliding underline the top-level links have becomes a rose bar on the left edge. */
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 2px;
		height: auto;
		background: var(--wp--preset--color--accent);
		transform: scaleY(0);
		transform-origin: center;
		transition: transform .3s var(--gamb-ease);
	}
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item__content:hover::after,
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item__content:focus-visible::after,
	.gamb-site-header .gamb-dd__list .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleY(1); }
	.gamb-dd__list .wp-block-navigation-item__content:hover,
	.gamb-dd__list .wp-block-navigation-item__content:focus-visible {
		background: var(--gamb-raise);
		color: var(--gamb-strong);
		padding-left: 28px;
	}
	.gamb-dd__list .wp-block-navigation-item__content:focus-visible { outline-offset: -2px; }
	.gamb-dd__list .current-menu-item > .wp-block-navigation-item__content { color: var(--gamb-accent-light); }

	.gamb-site-header .gamb-dd__list > li.gamb-sub-all { margin-bottom: 6px; border-bottom: 1px solid var(--gamb-line); }

	/* The items drift up one after another as the panel opens. */
	.gamb-dd__list > li { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s var(--gamb-ease); }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(1) { transition-delay: .03s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(2) { transition-delay: .07s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(3) { transition-delay: .11s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(4) { transition-delay: .15s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(n+5) { transition-delay: .19s; }
	html:not(.gamb-dd-js) .gamb-dd:hover .gamb-dd__list > li,
	html:not(.gamb-dd-js) .gamb-dd:focus-within .gamb-dd__list > li { opacity: 1; transform: none; }

	/* ----- Sub-menus inside the panel (Accessories and its sub-categories) -----
	   Default: unfolds downwards inside the panel, which is what a touch screen and a narrow window get. */
	.gamb-site-header .gamb-dd__list > .gamb-dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
	.gamb-dd__list > .gamb-dd > .gamb-dd__link { grid-column: 1; padding-right: 8px; }
	.gamb-dd__list > .gamb-dd > .gamb-dd__toggle {
		grid-column: 2;
		width: 52px;
		height: auto;
		margin: 0;
		opacity: .7;
		transition: opacity .25s ease, background-color .2s ease, color .2s ease;
	}
	.gamb-dd__list > .gamb-dd > .gamb-dd__toggle .gamb-dd__chev { width: 18px; height: 18px; }
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__toggle { opacity: 1; }
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__link,
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__toggle { background: var(--gamb-raise); color: var(--gamb-strong); }
	.gamb-site-header .gamb-dd__list .gamb-dd.is-open > .gamb-dd__link::after { transform: scaleY(1); }
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd:hover > .gamb-dd__toggle { background: var(--gamb-raise); color: var(--gamb-strong); opacity: 1; }
	.gamb-dd__list > .gamb-dd > .gamb-dd__toggle:focus-visible { outline-offset: -2px; }

	.gamb-dd__list > .gamb-dd > .gamb-dd__panel {
		position: static;
		grid-column: 1 / -1;
		display: grid;
		grid-template-rows: 0fr;
		min-width: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: color-mix(in srgb, var(--gamb-page) 55%, var(--gamb-panel));
		opacity: 1;
		visibility: hidden;
		pointer-events: auto;
		transform: none;
		transition: grid-template-rows .4s var(--gamb-ease), visibility 0s linear .4s;
	}
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
	.gamb-dd__list > .gamb-dd > .gamb-dd__panel::before { display: none; }
	.gamb-site-header .gamb-dd__list .gamb-dd__list { min-height: 0; overflow: hidden; padding: 0; }
	/* The breathing space under the last row lives inside the list, so it folds away with it. */
	.gamb-site-header .gamb-dd__list .gamb-dd__list > li:last-child { margin-bottom: 6px; }
	.gamb-site-header .gamb-dd__list .gamb-dd__list > li:first-child { margin-top: 4px; }
	.gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content {
		padding-left: 40px;
		font-size: .94em;
		line-height: 1.3;
		white-space: normal;
		color: color-mix(in srgb, var(--gamb-text) 80%, transparent);
	}
	.gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:hover,
	.gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:focus-visible { padding-left: 44px; color: var(--gamb-strong); }
	.gamb-dd__list .gamb-dd__list .current-menu-item > .wp-block-navigation-item__content { color: var(--gamb-accent-light); }
	/* Third level (a sub-category's own sub-categories) steps in once more. */
	.gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content { padding-left: 56px; }
	.gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:hover,
	.gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:focus-visible { padding-left: 60px; }
	html:not(.gamb-dd-js) .gamb-dd__list .gamb-dd__panel { grid-template-rows: 1fr; visibility: visible; }
}

/* ----- A mouse on a wide window: sub-menus fly out to the side of the row, like a desktop menu ----- */
@media (min-width: 900px) {
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd > .gamb-dd__panel {
		position: absolute;
		top: var(--gamb-fly-top, -10px);
		left: 100%;
		right: auto;
		z-index: 2;
		display: block;
		width: max-content;
		min-width: 250px;
		max-width: 440px;
		background: var(--gamb-panel);
		border: 1px solid var(--gamb-line);
		border-top: 2px solid var(--wp--preset--color--accent);
		border-radius: 0 2px 2px 0;
		box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .9);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(-10px);
		transform-origin: left top;
		transition: opacity .2s ease, transform .3s var(--gamb-ease), visibility 0s linear .3s;
	}
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd > .gamb-dd__panel.is-flip {
		left: auto;
		right: 100%;
		border-radius: 2px 0 0 2px;
		transform: translateX(10px);
		transform-origin: right top;
	}
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd.is-open > .gamb-dd__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}
	html:not(.gamb-touch) .gamb-site-header .gamb-dd__list .gamb-dd__list { overflow: visible; padding: 8px 0; }
	html:not(.gamb-touch) .gamb-site-header .gamb-dd__list .gamb-dd__list > li:last-child { margin-bottom: 0; }
	html:not(.gamb-touch) .gamb-site-header .gamb-dd__list .gamb-dd__list > li:first-child { margin-top: 0; }
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content,
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content { padding-left: 24px; font-size: inherit; line-height: inherit; color: var(--gamb-text); }
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:hover,
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:focus-visible,
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:hover,
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content:focus-visible { padding-left: 28px; color: var(--gamb-strong); }
	html:not(.gamb-touch) .gamb-dd__list .gamb-dd__list .current-menu-item > .wp-block-navigation-item__content { color: var(--gamb-accent-light); }
	/* The arrow points to where the list will appear. */
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd > .gamb-dd__toggle .gamb-dd__chev { transform: rotate(-90deg); }
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd:has(> .gamb-dd__panel.is-flip) > .gamb-dd__toggle .gamb-dd__chev { transform: rotate(90deg); }
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd.is-open > .gamb-dd__toggle .gamb-dd__chev { transform: rotate(-90deg) translateY(2px); }
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd.is-open:has(> .gamb-dd__panel.is-flip) > .gamb-dd__toggle .gamb-dd__chev { transform: rotate(90deg) translateY(2px); }
	/* The row that opened the list keeps its highlight while the pointer is out in it. */
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd:hover > .gamb-dd__link { background: var(--gamb-raise); color: var(--gamb-strong); }
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd.is-open:hover > .gamb-dd__link::after,
	html:not(.gamb-touch) .gamb-dd__list > .gamb-dd:hover > .gamb-dd__link::after { transform: scaleY(1); }
}

/* ----- Phones: opens like a drawer inside the menu panel ----- */
@media (max-width: 599.98px) {
	/* WordPress's own phone-menu rules stack every item in a column, so this one has to be a step more specific. */
	.gamb-site-header .wp-block-navigation .wp-block-navigation__responsive-container .gamb-dd.wp-block-navigation-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
	}
	.gamb-dd > .gamb-dd__link { grid-column: 1; }
	/* The arrow the other menu rows show would point the wrong way here: the chevron button takes its place. */
	.gamb-site-header .gamb-dd > .gamb-dd__link::after { display: none; }
	.gamb-dd__toggle {
		grid-column: 2;
		width: 56px;
		min-height: 64px;
		color: var(--wp--preset--color--paper);
		opacity: .7;
	}
	.gamb-dd__toggle .gamb-dd__chev { width: 24px; height: 24px; }
	.gamb-dd.is-open > .gamb-dd__toggle { opacity: 1; color: var(--wp--preset--color--accent-light); }
	.gamb-dd.is-open > .gamb-dd__link { color: var(--wp--preset--color--accent-light); }

	/* Height animates from 0 to its natural size without measuring anything in script. */
	.gamb-dd__panel {
		grid-column: 1 / -1;
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows .45s var(--gamb-ease), visibility 0s linear .45s;
	}
	.gamb-dd.is-open > .gamb-dd__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
	.gamb-site-header .gamb-dd__list { min-height: 0; overflow: hidden; margin: 0 0 0 2px; padding: 0 0 0 16px; border-left: 2px solid var(--wp--preset--color--accent); }
	/* The breathing space under the last row lives inside the list, so it folds away with it. */
	.gamb-site-header .gamb-dd__list > li:last-child { margin-bottom: 14px; }

	.gamb-site-header .gamb-dd__list .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 9%, transparent);
		animation: none;
	}
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item:last-child { border-bottom: 0; }
	.gamb-site-header .gamb-dd__list > li.gamb-sub-all { border-bottom-color: color-mix(in srgb, var(--wp--preset--color--paper) 24%, transparent); }
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item__content {
		min-height: 56px;
		font-size: clamp(.95rem, 4.3vw, 1.15rem);
		font-weight: 700;
		letter-spacing: .02em;
	}
	.gamb-site-header .gamb-dd__list .wp-block-navigation-item__content::after { width: 18px; height: 18px; }
	.gamb-site-header .gamb-dd__list .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent-light); }
	.gamb-dd__list > li { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s var(--gamb-ease); }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(1) { transition-delay: .08s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(2) { transition-delay: .12s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(3) { transition-delay: .16s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(4) { transition-delay: .2s; }
	.gamb-dd.is-open > .gamb-dd__panel > .gamb-dd__list > li:nth-child(n+5) { transition-delay: .24s; }

	/* A sub-menu (Accessories): the same drawer again, one step in. */
	/* The arrow sits where the arrows of the other rows sit, so the right-hand edge stays tidy. */
	.gamb-dd__list > .gamb-dd > .gamb-dd__toggle { width: 44px; min-height: 56px; justify-content: flex-end; }
	.gamb-dd__list > .gamb-dd > .gamb-dd__toggle .gamb-dd__chev { width: 20px; height: 20px; margin-right: 0; }
	.gamb-site-header .gamb-dd__list .gamb-dd__list { margin: 0 0 0 2px; padding: 0 0 0 14px; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 24%, transparent); }
	.gamb-site-header .gamb-dd__list .gamb-dd__list .wp-block-navigation-item__content { min-height: 44px; font-size: clamp(.9rem, 4vw, 1.05rem); font-weight: 600; line-height: 1.25; padding-block: 6px; padding-left: 0; color: inherit; white-space: normal; }
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__link,
	.gamb-dd__list > .gamb-dd.is-open > .gamb-dd__toggle { background: none; color: var(--wp--preset--color--accent-light); }
}

/* ==========================================================================
   4. Hero (video background)
   ========================================================================== */
.gamb-hero.wp-block-cover {
	padding: 0;
	align-items: flex-end;
	background-color: var(--wp--preset--color--black);
	isolation: isolate;
}
/* Nothing uploaded yet: a quiet dark hero with a soft glow in the accent colour. */
.gamb-hero.wp-block-cover:not(:has(video)):not(:has(img.wp-block-cover__image-background)) {
	background-image: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 38%, transparent), transparent 60%);
}
/* A little extra shade behind the words so they stay readable on any video. */
.gamb-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
}
.gamb-hero .wp-block-cover__video-background,
.gamb-hero .wp-block-cover__image-background { z-index: -1; object-fit: cover; }
.gamb-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding: 0 clamp(16px, 4vw, 48px) clamp(32px, 7vw, 88px);
	box-sizing: border-box;
}
.gamb-hero__inner > * { margin-block: 0; max-width: 40rem; }
.gamb-hero__inner > * + * { margin-top: 18px; }
.gamb-hero__title {
	font-size: clamp(2.6rem, 1.1rem + 6.4vw, 6rem);
	line-height: .95;
	overflow-wrap: anywhere;
	max-width: 14ch;
}
.gamb-hero__lede { font-size: clamp(1rem, .92rem + .45vw, 1.25rem); line-height: 1.5; }
.gamb-hero__cta { gap: 10px; margin-top: 28px !important; }
.gamb-hero .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; background: transparent; }
@media (hover: hover) {
	.gamb-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); }
}
@media (max-width: 599px) {
	.gamb-hero__cta .wp-block-button { width: 100%; }
	.gamb-hero__cta .wp-block-button__link { width: 100%; text-align: center; }
}
/* Pause button for the background video (added by the script when a video is present). */
.gamb-hero-toggle {
	position: absolute;
	right: clamp(16px, 4vw, 48px);
	top: clamp(16px, 3vw, 28px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .3s var(--gamb-ease), transform .12s var(--gamb-ease);
}
.gamb-hero-toggle:active { transform: scale(.94); }
.gamb-hero-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.gamb-hero-toggle .i-play { display: none; }
.gamb-hero-toggle.is-paused .i-play { display: block; }
.gamb-hero-toggle.is-paused .i-pause { display: none; }

/* ==========================================================================
   5. Category cards (WooCommerce categories)
   ========================================================================== */
/* Bike photos are landscape, so the cards are landscape too (the phone layout always was). They used to be tall portrait boxes,
   which cut the sides off every photo, and a single category stretched across the whole row. The grid now has a fixed number of
   columns for the number of categories, and one or two categories get bigger cards so a short list still looks deliberate. */
.gamb-cat-list {
	--gamb-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--gamb-cols), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.gamb-cols-1 { --gamb-cols: 1; max-width: 760px; }
.gamb-cols-2 { --gamb-cols: 2; }
.gamb-cols-4 { --gamb-cols: 2; }
@media (min-width: 1280px) { .gamb-cols-4 { --gamb-cols: 4; } }
.gamb-cats__empty { margin: 0; padding: 32px; border: 1px dashed var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.gamb-cat { margin: 0; position: relative; overflow: hidden; background: var(--wp--preset--color--ink); }
.gamb-cat__link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.gamb-cat__media { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page)); }
.gamb-cat__media.is-empty { background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent), transparent 60%), var(--wp--preset--color--ink); }
/* A category with no picture and no product photo (Accessories, Supplements...) gets its first letter as a large outlined monogram, so it reads as a deliberate card and not a missing image. */
.gamb-cat__media.is-empty::before {
	content: attr(data-initial);
	position: absolute;
	inset: 0 0 36% 0;
	display: grid;
	place-items: center;
	font-size: 6rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	transition: transform 1s var(--gamb-ease);
	pointer-events: none;
	user-select: none;
}
@supports (width: 1cqw) {
	.gamb-cat__media.is-empty::before { font-size: clamp(3.5rem, 32cqw, 10rem); }
}
.gamb-cat__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transition: transform 1s var(--gamb-ease); }
.gamb-cat__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 10, 10, .82), rgba(11, 10, 10, 0) 58%);
	pointer-events: none;
}
.gamb-cat__body { position: absolute; left: 20px; right: 76px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
/* The title size follows the width of its own card (so four narrow cards and one wide card both look right), and a word is only ever split if it cannot fit at all. */
.gamb-cat__name { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.8rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.02; text-transform: uppercase; overflow-wrap: break-word; hyphens: manual; }
@supports (width: 1cqw) {
	.gamb-cat__link { container-type: inline-size; }
	.gamb-cat__name { font-size: clamp(1.05rem, 7.2cqw, 2rem); }
}
.gamb-cat__count { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gamb-cat__arrow {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink);
	transition: transform .5s var(--gamb-ease), background-color .3s var(--gamb-ease), color .3s var(--gamb-ease);
}
@media (hover: hover) {
	.gamb-cat__link:hover .gamb-cat__img { transform: scale(1.05); }
	.gamb-cat__link:hover .gamb-cat__media.is-empty::before { transform: scale(1.06); }
	.gamb-cat__link:hover .gamb-cat__arrow { transform: translateX(4px); background: var(--wp--preset--color--accent); color: var(--gamb-on-accent); }
}
.gamb-cat__link:active .gamb-cat__arrow { transform: scale(.94); }
.gamb-cols-1 .gamb-cat__link,
.gamb-cols-2 .gamb-cat__link { aspect-ratio: 3 / 2; }
@media (max-width: 781px) {
	.gamb-cat-list { grid-template-columns: 1fr; gap: 14px; max-width: none; }
	.gamb-cat__link,
	.gamb-cols-1 .gamb-cat__link,
	.gamb-cols-2 .gamb-cat__link { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   6. Product page
   ========================================================================== */
.wp-block-woocommerce-breadcrumbs { margin-top: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); }
.wp-block-woocommerce-breadcrumbs a { text-decoration: none; color: var(--wp--preset--color--muted); }
.wp-block-woocommerce-breadcrumbs a:hover { color: var(--gamb-strong); }

.gamb-pdp { gap: var(--wp--preset--spacing--50); align-items: flex-start; margin-bottom: 0; }
.gamb-pdp__media { min-width: 0; }
.gamb-pdp__buy { min-width: 0; }
@media (min-width: 782px) {
	.gamb-pdp__buy { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--gamb-nav-h) + 24px); }
}
.gamb-pdp__buy > * { margin-block: 0; }
.gamb-pdp__buy > * + * { margin-top: 16px; }
.gamb-pdp__title { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.4rem); line-height: .98; overflow-wrap: anywhere; margin-top: 10px !important; }
.gamb-pdp__price { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-top: 18px !important; }
.gamb-pdp__price .wc-block-components-product-price { font-size: inherit; }
.gamb-pdp__price del { opacity: .5; font-weight: 400; margin-right: .4em; }
.gamb-pdp__price ins { text-decoration: none; color: var(--wp--preset--color--accent); }

/* Availability: a coloured dot and the words from WooCommerce. */
.gamb-pdp__stock,
.wc-block-components-product-stock-indicator.gamb-pdp__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gamb-good);
}
.gamb-pdp__stock::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 0 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
/* In the editor the wrapper and the inner element both carry the class; only draw one dot. */
.gamb-pdp__stock:has(.gamb-pdp__stock)::before { content: none; }
.gamb-pdp__stock.wc-block-components-product-stock-indicator--out-of-stock { color: var(--gamb-bad); }
.gamb-pdp__stock.wc-block-components-product-stock-indicator--available-on-backorder { color: var(--gamb-warn); }

.gamb-pdp__summary { color: var(--wp--preset--color--muted); }
.gamb-pdp__summary p { margin: 0; }

/* Add to cart and Buy now. */
.gamb-pdp__buy .wc-block-add-to-cart-form .stock { display: none; }
.gamb-pdp__buy form.cart,
.gamb-pdp__buy .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 22px 0 0;
}
.gamb-pdp__buy .woocommerce-variation-add-to-cart { margin-top: 0; }
/* WooCommerce's block styles put the button in a narrow second column; make everything one full-width column. */
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form form.cart,
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form .variations_button {
	grid-auto-flow: row;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
	margin-bottom: 0;
}
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form form.cart > .single_add_to_cart_button,
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form .variations_button > .single_add_to_cart_button {
	grid-column: 1 / -1;
	justify-self: stretch;
}
.gamb-pdp__buy .quantity { max-width: 140px; }
.gamb-pdp__buy .quantity:has(input[type="hidden"]) { display: none; }
.gamb-pdp__buy .quantity input.qty {
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--gamb-field-line);
	border-radius: 2px;
	background: var(--gamb-panel);
	color: inherit;
	font: inherit;
	text-align: center;
}
.gamb-pdp__buy .single_add_to_cart_button {
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 1.1rem 1.5rem;
	text-align: center;
	cursor: pointer;
}
.gamb-pdp__buy .single_add_to_cart_button:not(.gamb-buy-now) {
	background: transparent;
	color: var(--gamb-text);
	border: 1.5px solid var(--gamb-text);
}
.gamb-pdp__buy .single_add_to_cart_button.disabled,
.gamb-pdp__buy .single_add_to_cart_button:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) {
	.gamb-pdp__buy .single_add_to_cart_button:not(.gamb-buy-now):hover { background: var(--gamb-text); color: var(--wp--preset--color--black); }
}
/* Sizes (variable products): label above, full-width select. */
.gamb-pdp__buy table.variations,
.gamb-pdp__buy table.variations tbody,
.gamb-pdp__buy table.variations tr,
.gamb-pdp__buy table.variations th,
.gamb-pdp__buy table.variations td { display: block; width: 100%; border: 0; }
.gamb-pdp__buy table.variations { margin: 0 0 6px; }
.gamb-pdp__buy table.variations tr + tr { margin-top: 12px; }
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form table.variations { margin: 0 0 10px; }
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form table.variations th,
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form table.variations td { padding: 0; text-align: left; }
.gamb-pdp__buy .wp-block-add-to-cart-form.wc-block-add-to-cart-form .woocommerce-variation { margin: 0; }
.gamb-pdp__buy table.variations th.label { margin-bottom: 6px; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gamb-pdp__buy table.variations select { width: 100%; min-height: 52px; padding: 0 12px; border: 1px solid var(--gamb-field-line); border-radius: 2px; background-color: var(--gamb-panel); color: inherit; font: inherit; }
.gamb-pdp__buy .reset_variations { display: inline-block; margin-top: 8px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.gamb-pdp__buy .single_variation_wrap { display: grid; gap: 14px; }
.gamb-pdp__buy .woocommerce-variation:empty { display: none; }
.gamb-pdp__buy .woocommerce-variation-price { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.1; }
.gamb-pdp__buy .woocommerce-variation-description:empty { display: none; }
/* Variable bikes: the availability block above stays empty, so show WooCommerce's own text once a size is chosen. */
.gamb-pdp__stock:empty { display: none; }
.gamb-pdp__buy .woocommerce-variation-availability .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gamb-good);
}
.gamb-pdp__buy .woocommerce-variation-availability .stock::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.gamb-pdp__buy .woocommerce-variation-availability .stock.out-of-stock { color: var(--gamb-bad); }
.gamb-pdp__buy .woocommerce-variation-availability .stock.available-on-backorder { color: var(--gamb-warn); }
.gamb-ask { color: var(--wp--preset--color--muted); }

/* Description and specification table. */
.gamb-pdp-details {
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}
.gamb-pdp-details .wp-block-column { min-width: 0; }
.gamb-pdp-details h2 { margin: 12px 0 var(--wp--preset--spacing--40); }
.gamb-desc-col:not(:has(.wp-block-woocommerce-product-description > *)),
.gamb-specs-col:not(:has(table)) { display: none; }
.wp-block-woocommerce-product-specifications { margin: 0; }
.wp-block-woocommerce-product-specifications table { width: 100%; border-collapse: collapse; border: 0; }
.wp-block-woocommerce-product-specifications th,
.wp-block-woocommerce-product-specifications td {
	padding: .85rem 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	vertical-align: top;
}
.wp-block-woocommerce-product-specifications th { width: 36%; padding-right: 16px; font-weight: 400; color: var(--wp--preset--color--muted); }
.wp-block-woocommerce-product-specifications td { font-weight: 500; }
.wp-block-woocommerce-product-specifications td p { margin: 0; }
.wp-block-woocommerce-product-specifications tr:last-child th,
.wp-block-woocommerce-product-specifications tr:last-child td { border-bottom: 1px solid var(--wp--preset--color--line); }
.gamb-related { margin-top: var(--wp--preset--spacing--70); }
.gamb-related:not(:has(li)) { display: none; }
@media (max-width: 781px) {
	.gamb-pdp { gap: var(--wp--preset--spacing--40); }
	.gamb-pdp-details { gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--60); }
}

/* ==========================================================================
   7. Photos / 360 / Video switcher (product page)
   ========================================================================== */
.gamb-media { position: relative; min-width: 0; }
.gamb-pane { margin: 0; }
.gamb-pane > * { margin-block: 0; }
.gamb-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.gamb-tab {
	appearance: none;
	margin: 0;
	padding: .75rem 1.1rem;
	min-height: 44px;
	border: 1px solid var(--gamb-field-line);
	border-radius: 2px;
	background: var(--gamb-panel);
	color: var(--gamb-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .3s var(--gamb-ease), color .3s var(--gamb-ease), border-color .3s var(--gamb-ease), transform .12s var(--gamb-ease);
}
.gamb-tab[aria-selected="true"],
.gamb-tab.is-demo-active { background: var(--gamb-text); border-color: var(--gamb-text); color: var(--wp--preset--color--black); }
.gamb-tab:active { transform: scale(.97); }

/* Before the script has run, only the photos show. Afterwards, only the chosen tab. */
.gamb-media:not(.is-ready) .gamb-pane:not(.gamb-photos) { display: none; }
.gamb-media.is-ready .gamb-pane:not(.is-active) { display: none; }

/* Photos: swipeable, one at a time, with arrows, a counter and thumbnails. */
.gamb-gallery-wrap { position: relative; background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page)); }
.gamb-gallery {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	outline-offset: -3px;
}
.gamb-gallery::-webkit-scrollbar { display: none; }
.gamb-slide { flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gamb-slide__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gamb-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: .5rem .7rem;
	background: rgba(255, 255, 255, .86);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	pointer-events: none;
}
.gamb-thumbstrip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gamb-thumbstrip::-webkit-scrollbar { display: none; }
.gamb-thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--gamb-line);
	border-radius: 2px;
	background: var(--gamb-panel);
	opacity: .65;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .3s var(--gamb-ease), border-color .3s var(--gamb-ease);
}
.gamb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gamb-thumb[aria-current="true"] { opacity: 1; border-color: var(--gamb-text); }
@media (hover: hover) { .gamb-thumb:hover { opacity: 1; } }

.gamb-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--wp--preset--color--ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .12s var(--gamb-ease), background-color .3s var(--gamb-ease), opacity .3s;
}
.gamb-arrow:active { transform: scale(.94); }
.gamb-arrow[disabled] { opacity: 0; pointer-events: none; }
.gamb-arrow.is-prev { left: 12px; }
.gamb-arrow.is-next { right: 12px; }
@media (hover: none) {
	.gamb-gallery-wrap .gamb-arrow { display: none; }
	/* On touchscreens the 360 arrows sit in the bottom corner so they never cover the bike. */
	.gamb-spin .gamb-arrow { top: auto; bottom: 12px; width: 40px; height: 40px; margin: 0; font-size: 22px; }
	.gamb-spin .gamb-arrow.is-prev { left: auto; right: 60px; }
	.gamb-spin .gamb-arrow.is-next { right: 12px; }
}

/* 360 viewer: one image that changes as you drag, swipe or use the arrow keys. */
.gamb-360 { position: relative; }
.gamb-360 .gamb-360__first { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page)); }
.gamb-spin {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page));
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	outline-offset: 3px;
}
.gamb-spin.is-dragging { cursor: grabbing; }
.gamb-spin-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.gamb-spin-hint {
	position: absolute;
	left: 12px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .55rem .8rem;
	background: rgba(255, 255, 255, .86);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity .6s var(--gamb-ease);
}
.gamb-spin-hint svg { width: 18px; height: 18px; flex: 0 0 auto; }
.gamb-spin.is-touched .gamb-spin-hint { opacity: 0; }
.gamb-spin-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--wp--preset--color--accent); transition: width .3s var(--gamb-ease), opacity .4s; }
.gamb-spin.is-ready .gamb-spin-bar { opacity: 0; }
.gamb-spin-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 10, 10, .6); }
.gamb-spin-loadbtn {
	appearance: none;
	border: 0;
	border-radius: 2px;
	padding: 1rem 1.5rem;
	min-height: 48px;
	background: var(--wp--preset--color--accent);
	color: var(--gamb-on-accent);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

/* Videos: stacked, 16:9. */
.gamb-video { display: grid; gap: 12px; }
.gamb-video__item { position: relative; aspect-ratio: 16 / 9; background: var(--wp--preset--color--black); }
.gamb-video__item video,
.gamb-video__item iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--wp--preset--color--black); }

/* In the Site Editor the block shows a labelled stand-in. */
.gamb-media--placeholder .gamb-demo-stage {
	display: grid;
	gap: 6px;
	place-content: center;
	aspect-ratio: 4 / 3;
	padding: 24px;
	text-align: center;
	background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page));
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.gamb-media--placeholder .gamb-demo-stage strong { color: var(--gamb-strong); }

/* ==========================================================================
   8. Cart and checkout (WooCommerce's own blocks, just spaced to match)
   ========================================================================== */
.gamb-woo-page > .wp-block-post-title { margin: 0 0 var(--wp--preset--spacing--40); font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }
.gamb-checkout-head { border-bottom: 1px solid var(--wp--preset--color--line); }
.gamb-checkout-head > .wp-block-group { min-height: 64px; align-items: center; }
.gamb-checkout-back { margin: 0; }
.gamb-checkout-back a { text-decoration: none; color: var(--wp--preset--color--muted); }
.gamb-woo-page .wc-block-components-button:not(.is-link) { border-radius: 2px; }

/* WooCommerce ships its fields, ticks and notices in light colours (white boxes, pale banners). The rules below re-colour
   them with the roles above, so the cart, checkout, order confirmation and the notices after "Add to cart" match the dark
   site. They only change colours, never layout, so WooCommerce keeps working exactly as before. */

/* Text fields: dark panel, bone text, a border you can see, a rose focus ring. */
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-totals-coupon__form input[type="text"] {
	background-color: var(--gamb-panel);
	border-color: var(--gamb-field-line);
	color: var(--gamb-strong);
}
body .wc-block-components-form .wc-block-components-text-input input[type]:focus,
body .wc-block-components-form .wc-block-components-text-input input[type]:focus-within,
body .wc-block-components-form .wc-block-components-text-input input[type]:active,
body .wc-block-components-text-input input:focus,
body .wc-block-components-textarea:focus {
	background-color: var(--gamb-panel);
	border-color: var(--gamb-accent-light);
	box-shadow: 0 0 0 1px var(--gamb-accent-light);
	color: var(--gamb-strong);
	outline: 0; /* the border and ring above replace the browser's own focus outline */
}
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label { color: var(--gamb-muted); }
.wc-block-components-textarea::placeholder { color: var(--gamb-muted); }
/* Browsers paint autofilled fields pale yellow; keep them dark and readable. */
.wc-block-components-text-input input:-webkit-autofill {
	-webkit-text-fill-color: var(--gamb-strong);
	box-shadow: 0 0 0 100px var(--gamb-panel) inset;
	caret-color: var(--gamb-strong);
}

/* Drop-downs (country, county, sort order). */
.wc-blocks-components-select .wc-blocks-components-select__container { background-color: var(--gamb-panel); }
.wc-blocks-components-select .wc-blocks-components-select__select { border-color: var(--gamb-field-line); color: var(--gamb-strong); }
.wc-blocks-components-select .wc-blocks-components-select__select:focus { border-color: var(--gamb-accent-light); }
.wc-blocks-components-select .wc-blocks-components-select__select option { background: var(--gamb-panel); color: var(--gamb-strong); }
.wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--gamb-muted); }

/* Ticks and radio buttons. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--gamb-panel);
	border-color: var(--gamb-field-line);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--gamb-on-accent); }
.wc-block-components-radio-control .wc-block-components-radio-control__input { background: var(--gamb-panel); border-color: var(--gamb-field-line); }
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border-color: var(--wp--preset--color--accent); }
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--accent); }
.wc-block-components-checkbox .wc-block-components-checkbox__input:focus-visible,
.wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible { outline: 2px solid var(--gamb-accent-light); outline-offset: 2px; }

/* Messages and errors. */
.wc-block-components-validation-error,
.wc-block-components-form .wc-block-components-text-input.has-error label,
.wc-block-components-text-input.has-error label,
.wc-block-components-checkbox.has-error,
.wc-block-components-checkbox.has-error a { color: var(--gamb-bad); }
body .wc-block-components-form .wc-block-components-text-input.has-error input[type],
.wc-block-components-text-input.has-error input,
.has-error .wc-blocks-components-select .wc-blocks-components-select__container .wc-blocks-components-select__select { border-color: var(--gamb-bad); }
body .wc-block-components-form .wc-block-components-text-input.has-error input[type]:focus-within,
body .wc-block-components-text-input.has-error input:focus-within { border-color: var(--gamb-bad); box-shadow: 0 0 0 1px var(--gamb-bad); }

/* Notice banners ("added to your cart", errors at checkout, coupon messages). */
.wc-block-components-notice-banner {
	background-color: var(--gamb-panel);
	border-color: var(--gamb-field-line);
	border-radius: 2px;
	color: var(--gamb-text);
}
.wc-block-components-notice-banner > svg { background-color: var(--gamb-muted); fill: var(--gamb-page); }
.wc-block-components-notice-banner.is-success { background-color: var(--gamb-panel); border-color: var(--gamb-good); }
.wc-block-components-notice-banner.is-success > svg { background-color: var(--gamb-good); }
.wc-block-components-notice-banner.is-error { background-color: var(--gamb-panel); border-color: var(--gamb-bad); }
.wc-block-components-notice-banner.is-error > svg { background-color: var(--gamb-bad); }
.wc-block-components-notice-banner.is-warning { background-color: var(--gamb-panel); border-color: var(--gamb-warn); }
.wc-block-components-notice-banner.is-warning > svg { background-color: var(--gamb-warn); }
.wc-block-components-notice-banner.is-info { background-color: var(--gamb-panel); border-color: var(--gamb-accent-light); }
.wc-block-components-notice-banner.is-info > svg { background-color: var(--gamb-accent-light); }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
.wc-block-components-notice-banner > .wc-block-components-button { color: var(--gamb-text) !important; }
.wc-block-components-notice-banner a { color: var(--gamb-strong); }

/* The older (shortcode) notices WooCommerce still shows on a few pages. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	background-color: var(--gamb-panel);
	border: 1px solid var(--gamb-field-line);
	border-left: 4px solid var(--gamb-accent-light);
	border-radius: 2px;
	color: var(--gamb-text);
}
.woocommerce-message { border-left-color: var(--gamb-good); }
.woocommerce-error { border-left-color: var(--gamb-bad); }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--gamb-strong); }

/* Quantity badge on the order summary thumbnails and other small chips. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { background: var(--wp--preset--color--accent); box-shadow: 0 0 0 2px var(--gamb-page); }
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span { color: var(--gamb-on-accent); }
.wc-block-components-chip { background-color: var(--gamb-raise); color: var(--gamb-text); }
.wc-block-components-chip .wc-block-components-chip__remove { background: var(--gamb-muted); }
.wc-block-components-chip .wc-block-components-chip__remove-icon { fill: var(--gamb-page); }

/* Panels, totals and the order summary card keep their dividers visible on the dark page. */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-order-summary,
.wc-block-cart-items th,
.wc-block-cart-items td { border-color: var(--gamb-line); }
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar { color: var(--gamb-text); }
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { color: var(--gamb-muted); }
.wc-block-components-product-price__regular { color: var(--gamb-muted); }
.wc-block-cart-item__remove-link { color: var(--gamb-muted); }
.wc-block-cart-item__remove-link:hover { color: var(--gamb-strong); }
.wc-block-components-quantity-selector { border-color: var(--gamb-field-line); background: transparent; }
.wc-block-components-quantity-selector::after { border-color: var(--gamb-field-line); }
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button { color: var(--gamb-strong); background: transparent; }
.wc-block-components-skeleton__element, .wc-block-components-skeleton-text { background-color: var(--gamb-raise); }

/* ==========================================================================
   9. Product cards (home grid, shop page, related bikes)
   ========================================================================== */
/* Every Product Collection block gets these cards, so a product grid you add in the editor matches the shop page.
   Woo sizes its columns assuming its default gap, so keep the gap unchanged and cap the columns on smaller screens. */
@media (max-width: 1100px) { :is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-product-template__responsive[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 781px) { :is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-product-template__responsive[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--gamb-line);
	background: var(--gamb-panel);
	transition: transform .3s var(--gamb-ease), box-shadow .3s var(--gamb-ease), border-color .3s var(--gamb-ease);
}
:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product > * { margin-block: 0; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product > :not(.wc-block-components-product-image) { margin-inline: 18px; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-components-product-image { margin: 0 0 6px; background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page)); overflow: hidden; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-components-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gamb-ease); }
.gamb-card-cat { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.gamb-card-cat a { text-decoration: none; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-post-title { font-size: 1.25rem; line-height: 1.05; overflow-wrap: anywhere; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-post-title a { text-decoration: none; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-woocommerce-product-price { font-size: 1.1rem; font-weight: 600; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product > .wp-block-woocommerce-product-button { margin-top: auto; padding-top: 6px; } /* buttons line up along the bottom of each row */
/* A grid added without a picture shape gets the shop's 4:3 pictures (a shape chosen in the block's settings still wins). */
.wp-block-woocommerce-product-collection .wc-block-components-product-image img:not([style*="aspect-ratio"]) { aspect-ratio: 4 / 3; }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-woocommerce-product-button .wp-block-button__link { padding: .95rem .5rem; font-size: var(--wp--preset--font-size--x-small); }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-components-product-button .wp-block-button__link,
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-woocommerce-product-button .wp-block-button__link { width: 100%; text-align: center; background: transparent; border: 1px solid var(--gamb-text); color: var(--gamb-text); }
:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-components-product-sale-badge { background: var(--wp--preset--color--accent); color: var(--gamb-on-accent); border: 0; border-radius: 2px; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) {
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9); }
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wc-block-components-product-button .wp-block-button__link:hover,
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-woocommerce-product-button .wp-block-button__link:hover { background: var(--gamb-text); color: var(--wp--preset--color--black); }
}
@media (max-width: 781px) {
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) li.wc-block-product > :not(.wc-block-components-product-image) { margin-inline: 12px; }
	:is(.gamb-grid, .wp-block-woocommerce-product-collection) .wp-block-post-title { font-size: 1.05rem; }
}
.gamb-shop-bar { margin: 20px 0 28px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); align-items: center; }
.gamb-shop-bar > * { margin: 0; }
/* Product search box (shop page, search results). */
.gamb-shop-search { flex: 1 1 220px; max-width: 340px; }
.gamb-shop-search .wp-block-search__inside-wrapper { border: 1px solid var(--gamb-field-line); border-radius: 2px; background: var(--gamb-panel); padding: 2px; }
.gamb-shop-search .wp-block-search__input { border: 0; background: transparent; padding: .5rem .7rem; font-size: var(--wp--preset--font-size--small); color: var(--gamb-strong); }
.gamb-shop-search .wp-block-search__button { margin: 0; padding: .4rem .6rem; background: transparent; color: var(--gamb-text); }
.gamb-shop-search .wp-block-search__button:hover, .gamb-shop-search .wp-block-search__button:focus-visible { color: var(--wp--preset--color--accent-light); }
.gamb-shop-search .wp-block-search__button svg { fill: currentColor; }
main > .gamb-shop-search { margin-block: 0 var(--wp--preset--spacing--50); }
.gamb-search-title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
@media (max-width: 781px) { .gamb-shop-search { order: 3; max-width: none; flex-basis: 100%; } }
.gamb-shop select { padding: .6rem 2rem .6rem .8rem; border: 1px solid var(--gamb-field-line); border-radius: 2px; background-color: var(--gamb-panel); color: inherit; font: inherit; font-size: var(--wp--preset--font-size--small); }

/* ==========================================================================
   10. How it works, About us, Shop call to action
   ========================================================================== */
.gamb-how .gamb-eyebrow { color: var(--gamb-muted); }
.gamb-steps { gap: var(--wp--preset--spacing--50); }
.gamb-steps .wp-block-column { border-top: 1px solid var(--gamb-field-line); padding-top: 18px; }
.gamb-step-n { margin: 0 0 10px; font-size: var(--wp--preset--font-size--large); font-weight: 700; letter-spacing: .06em; line-height: 1; }
.gamb-steps h3 { margin: 0 0 8px; }
.gamb-steps p { margin-block: 0; opacity: .8; }
@media (max-width: 781px) {
	.gamb-steps { gap: 28px; }
	.gamb-steps .wp-block-column { flex-basis: 100% !important; }
}

.gamb-about__cols { gap: var(--wp--preset--spacing--60); }
.gamb-about__img { margin: 0; }
.gamb-about__img img { display: block; width: 100%; background: linear-gradient(180deg, var(--gamb-panel), var(--gamb-page)); }
.gamb-about h2 { margin: 12px 0 var(--wp--preset--spacing--30); }
.gamb-about p { color: var(--wp--preset--color--muted); }
.gamb-ticks { margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gamb-ticks li { position: relative; padding-left: 30px; font-weight: 500; }
.gamb-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 781px) {
	.gamb-about__cols { gap: var(--wp--preset--spacing--40); }
	.gamb-about__cols .wp-block-column { flex-basis: 100% !important; }
}

/* "The stock" band (call to action). A dark panel on the dark page, edged with a rose line and lit by a soft rose glow in the
   corner. The words and the button get their colours here, from the palette (White, Bone, Accent light and Accent), so the band
   stays readable whichever colour classes an older copy of the section was saved with. */
/* Announcement strip and promotion banner (patterns "Announcement strip" and "Promotion banner"). */
.gamb-announce p { margin: 0; text-align: center; }
.gamb-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gamb-announce a:hover { text-decoration-thickness: 2px; }
.gamb-announce { padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px); }
.gamb-promo.wp-block-cover { padding-left: 0; padding-right: 0; }
.gamb-promo .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1400px) + var(--wp--style--root--padding-left, 16px) + var(--wp--style--root--padding-right, 16px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
	color: var(--gamb-strong);
}
.gamb-promo .gamb-eyebrow { color: var(--wp--preset--color--accent-light); }
.gamb-muted { color: var(--gamb-muted); }
.gamb-cta { background-color: var(--gamb-page); color: var(--gamb-text); }
.gamb-cta.has-accent-background-color,
.gamb-cta.has-accent-deep-background-color { background-color: var(--gamb-page) !important; color: var(--gamb-text) !important; }
.gamb-cta__inner {
	position: relative;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(28px, 5vw, 64px);
	border: 1px solid var(--gamb-line);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	background:
		radial-gradient(90% 150% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent), transparent 62%),
		var(--gamb-panel);
}
.gamb-cta .gamb-cta__text { max-width: 36rem; }
.gamb-cta__text > * { margin-block: 0; }
.gamb-cta h2 { color: var(--gamb-strong) !important; }
.gamb-cta p { color: var(--gamb-text) !important; }
.gamb-cta .gamb-eyebrow { color: var(--gamb-accent-light) !important; opacity: 1; }
.gamb-cta__text h2 { margin: 12px 0 14px; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); }
.gamb-cta__button .wp-block-button__link,
.gamb-cta__button .wp-block-button__link.has-paper-background-color {
	padding: 1.35rem 2.4rem;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--gamb-on-accent) !important;
}
@media (hover: hover) {
	.gamb-cta__button .wp-block-button__link:hover { background-color: var(--gamb-accent-light) !important; color: var(--gamb-on-accent) !important; }
}
@media (max-width: 781px) {
	.gamb-cta__button, .gamb-cta__button .wp-block-button { width: 100%; }
	.gamb-cta__button .wp-block-button__link { width: 100%; text-align: center; }
}

.gamb-video-banner { overflow: hidden; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
/* The footer has its own two colours: "Footer background" and "Footer text" (Appearance > Editor > Styles > Colors).
   If a site's saved colours do not include them yet, they fall back to Black and Paper so the footer never goes blank. */
.gamb-footer {
	--gamb-footer-bg: var(--wp--preset--color--footer-bg, var(--wp--preset--color--black));
	--gamb-footer-fg: var(--wp--preset--color--footer-text, var(--wp--preset--color--paper));
	background-color: var(--gamb-footer-bg);
	color: var(--gamb-footer-fg);
}
/* A footer saved in the editor before these colours existed still carries the old Black / Paper classes. Point them at the new colours. */
.gamb-footer.has-black-background-color { background-color: var(--gamb-footer-bg) !important; }
.gamb-footer.has-paper-color { color: var(--gamb-footer-fg) !important; }
.gamb-footer .gamb-eyebrow { color: inherit; opacity: .6; margin-bottom: 12px; }
.gamb-footer a { text-decoration: none; opacity: .88; }
.gamb-footer .gamb-brand a { opacity: 1; }
/* The footer logo shows in its own colours, the same as in the header. To force an all-white logo on a dark footer,
   add the class gamb-logo-white to the footer group (block settings > Advanced > Additional CSS class). */
.gamb-footer.gamb-logo-white .gamb-brand .wp-block-site-logo img { filter: brightness(0) invert(1); }
.gamb-links, .gamb-footer-cats ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--wp--preset--font-size--small); }
.gamb-links--lead { margin-bottom: 10px; }
.gamb-links--lead + .gamb-footer-cats { margin-block-start: 0; }
.gamb-footer-cats { font-size: var(--wp--preset--font-size--small); }
.gamb-footer-cats li { margin: 0; }
/* "Policies" column: a menu block, so links are added, renamed, reordered and pointed at pages from the editor. */
.gamb-footer-nav { margin-block-start: 0; font-size: var(--wp--preset--font-size--small); font-weight: 400; text-transform: none; letter-spacing: normal; }
.gamb-footer-nav .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 10px; }
.gamb-footer-nav .wp-block-navigation-item { margin: 0; }
.gamb-footer-nav .wp-block-navigation-item__content { padding: 0; }
.gamb-footer-cols { gap: var(--wp--preset--spacing--50); }
.gamb-footer-base { margin-top: var(--wp--preset--spacing--60); padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--gamb-footer-fg) 18%, transparent); }
.gamb-footer-base p { margin: 0; opacity: .6; }
@media (hover: hover) {
	.gamb-footer a:hover, .gamb-util a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 781px) {
	.gamb-footer-cols { gap: 32px; }
	.gamb-footer-cols .wp-block-column { flex-basis: 100% !important; }
}

/* ==========================================================================
   12. Motion
   ========================================================================== */
/* Reveal-on-scroll: add the class gamb-reveal to any block to use it. */
.gamb-js .gamb-reveal,
.gamb-js .gamb-grid li.wc-block-product { opacity: 0; }
.gamb-js .gamb-reveal.is-in,
.gamb-js .gamb-grid li.wc-block-product.is-in { opacity: 1; animation: gamb-rise .7s var(--gamb-ease) backwards; animation-delay: calc(var(--gamb-i, 0) * 70ms); }
.gamb-all-in .gamb-reveal,
.gamb-all-in .gamb-grid li.wc-block-product { opacity: 1 !important; }

/* Hero words rise in once, one after another, when the page opens. */
.gamb-js .gamb-hero__inner > * { animation: gamb-rise .9s var(--gamb-ease) backwards; }
.gamb-js .gamb-hero__inner > :nth-child(2) { animation-delay: .08s; }
.gamb-js .gamb-hero__inner > :nth-child(3) { animation-delay: .16s; }
.gamb-js .gamb-hero__inner > :nth-child(4) { animation-delay: .24s; }

@keyframes gamb-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes gamb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Respect "reduce motion" settings: nothing moves, everything is simply there. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.gamb-js .gamb-reveal,
	.gamb-js .gamb-grid li.wc-block-product { opacity: 1; }
}

/* ==========================================================================
   13. Forms, the Contact page and live chat
   ========================================================================== */

/* Every plain text field, text area and drop-down on the site (search, comment forms, Contact Form 7, the order note)
   gets the same dark look. :where() keeps this easy to override, so the product and checkout rules above still win. */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea, select) {
	background-color: var(--gamb-panel);
	border: 1px solid var(--gamb-field-line);
	border-radius: 2px;
	color: var(--gamb-strong);
	font: inherit;
}
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea)::placeholder { color: var(--gamb-muted); opacity: 1; }
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea, select):focus {
	border-color: var(--gamb-accent-light);
	box-shadow: 0 0 0 1px var(--gamb-accent-light);
	outline: 0;
}
.wp-block-search__input { background-color: var(--gamb-panel); border-color: var(--gamb-field-line); color: var(--gamb-strong); }
.wp-block-search__button { background: var(--wp--preset--color--accent); border: 0; color: var(--gamb-on-accent); }

/* Contact page layout: the form on the left, other ways to reach you on the right (stacked on phones, form first). */
.gamb-contact-page > .wp-block-post-title { margin: 0 0 var(--wp--preset--spacing--30); font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }
.gamb-contact__lead { margin: 0 0 var(--wp--preset--spacing--40); max-width: 60ch; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--medium); }
.gamb-contact__cols { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); align-items: flex-start; }
.gamb-contact__form {
	box-sizing: border-box;
	padding: clamp(20px, 4vw, 40px);
	background: var(--gamb-panel);
	border: 1px solid var(--gamb-line);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	min-width: 0;
}
.gamb-contact__form > h2 { margin: 0 0 var(--wp--preset--spacing--30); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.gamb-contact__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gamb-contact__aside > * { margin: 0; }
.gamb-contact__card { padding: 20px 22px; border: 1px solid var(--gamb-line); border-radius: 2px; }
.gamb-contact__card > * { margin-block: 0; }
.gamb-contact__card h3 { margin-bottom: 8px; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gamb-contact__card p { color: var(--gamb-text); }
.gamb-contact__card a:not(.wp-block-button__link) { color: var(--gamb-strong); text-underline-offset: 3px; }
.gamb-contact__card .wp-block-buttons { margin-top: 16px; }
.gamb-contact__card .wp-block-button__link { width: 100%; text-align: center; }
@media (min-width: 600px) { .gamb-contact__card .wp-block-button__link { width: auto; } }

/* The live chat card only shows when a Tawk.to link is saved (Settings > Contact & chat). The editor always shows it. */
.gamb-chat-card { display: none; }
.gamb-js body.gamb-has-chat .gamb-chat-card { display: block; }
.editor-styles-wrapper .gamb-chat-card { display: block; }

/* If Contact Form 7 is not active the page says so politely. */
.gamb-contact__fallback p { margin: 0 0 8px; }
.gamb-contact__fallback a { color: var(--gamb-strong); }
.gamb-contact__fallback-admin { padding: 10px 12px; border: 1px dashed var(--gamb-warn); border-radius: 2px; color: var(--gamb-text); font-size: var(--wp--preset--font-size--small); }

/* The Contact Form 7 form. */
.gamb-cf7 p { margin: 0 0 20px; }
.gamb-cf7 br { display: none; }
.gamb-field { display: block; }
.gamb-field__label { display: block; margin-bottom: 8px; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.gamb-field__label em { color: var(--gamb-muted); font-style: normal; font-weight: 400; }
.gamb-field__label abbr { color: var(--gamb-accent-light); text-decoration: none; }
.gamb-cf7 .wpcf7-form-control-wrap { display: block; }
.gamb-cf7 input[type="text"],
.gamb-cf7 input[type="email"],
.gamb-cf7 textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	background-color: var(--gamb-page);
	font-size: 1rem;
}
.gamb-cf7 textarea { min-height: 170px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.gamb-cf7 .wpcf7-not-valid { border-color: var(--gamb-bad); }
.gamb-cf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--gamb-bad); font-size: var(--wp--preset--font-size--small); }
.gamb-hp { display: none !important; }
/* "Sending" spinner: inside the button on phones, beside it on wider screens, so it never adds a gap. */
.gamb-cf7__submit { position: relative; margin-bottom: 14px; }
.gamb-cf7 .wpcf7-spinner { position: absolute; top: 50%; right: 16px; margin: -12px 0 0; }
@media (min-width: 600px) {
	.gamb-cf7__submit { display: flex; align-items: center; gap: 14px; }
	.gamb-cf7 .wpcf7-spinner { position: static; margin: 0; }
}
.gamb-cf7 .gamb-submit,
.gamb-cf7 input[type="submit"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 32px;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 2px;
	color: var(--gamb-on-accent);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .2s var(--gamb-ease);
}
@media (min-width: 600px) { .gamb-cf7 .gamb-submit, .gamb-cf7 input[type="submit"] { width: auto; min-width: 220px; } }
.gamb-cf7 .gamb-submit:hover, .gamb-cf7 input[type="submit"]:hover { background: var(--gamb-accent-light); }
.gamb-cf7 .gamb-submit:focus-visible { outline: 2px solid var(--gamb-strong); outline-offset: 3px; }
.gamb-cf7 .gamb-submit:disabled { cursor: progress; opacity: .7; }
.gamb-cf7__note { margin: 0; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--small); }
.gamb-cf7__note a { color: var(--gamb-text); }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 12px 14px; border: 1px solid var(--gamb-field-line); border-radius: 2px; color: var(--gamb-text); font-size: var(--wp--preset--font-size--small); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--gamb-good); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: var(--gamb-bad); }
.wpcf7-spinner { background-color: var(--gamb-muted); }
.wpcf7-spinner::before { background-color: var(--gamb-page); }

/* Page text (policies and other pages): quieter table borders, a rose rule beside quotes, dividers that match the dark page. */
.wp-block-table td, .wp-block-table th { border-color: var(--gamb-line); }
.wp-block-table thead { border-color: var(--gamb-field-line); }
.wp-block-table th { color: var(--gamb-strong); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--gamb-panel); }
.wp-block-quote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--wp--preset--color--accent); }
.wp-block-quote cite { color: var(--gamb-muted); }
.wp-block-separator:not(.is-style-dots), hr { border-color: var(--gamb-line); color: var(--gamb-line); }
.wp-block-separator:not(.is-style-dots):not(.is-style-wide) { background-color: var(--gamb-line); }

/* ==========================================================================
   14. Basket drawer (the panel that slides in from the cart icon; markup in inc/basket-drawer.php,
       behaviour in assets/js/basket-drawer.js). It uses the same roles as the rest of the site, so it follows the palette.
   ========================================================================== */
/* While the drawer is open the page behind it does not scroll. The gap stands in for the scrollbar so nothing shifts sideways. */
html.gamb-drawer-open { overflow: hidden; padding-right: var(--gamb-sbw, 0px); }

.gamb-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the sticky header (50), the phone menu (99) and the WordPress toolbar */
	visibility: hidden;
}
.gamb-drawer[hidden] { display: none !important; }
/* "is-closing" holds the drawer on screen while it slides back out, then the script hides it. */
.gamb-drawer.is-open,
.gamb-drawer.is-closing { visibility: visible; }
.gamb-drawer.is-closing { pointer-events: none; }
/* The WordPress toolbar (only shown to you when you are logged in) stays visible above the drawer. It scrolls away on phones. */
@media (min-width: 601px) { body.admin-bar .gamb-drawer { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar .gamb-drawer { top: 46px; } }

.gamb-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .66);
	opacity: 0;
	transition: opacity .35s ease;
	touch-action: none;
}
.gamb-drawer.is-open .gamb-drawer__scrim { opacity: 1; }

.gamb-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(460px, calc(100% - 40px)); /* on a phone a strip of page stays visible; tapping it closes the basket */
	max-width: 100%;
	box-sizing: border-box;
	background: var(--gamb-panel);
	color: var(--gamb-text);
	border-left: 1px solid var(--gamb-line);
	box-shadow: -28px 0 64px -24px rgba(0, 0, 0, .8);
	transform: translate3d(100%, 0, 0);
	transition: transform .48s var(--gamb-ease);
	outline: 0;
	overscroll-behavior: contain;
}
.gamb-drawer.is-open .gamb-drawer__panel { transform: none; }
/* Closing: the panel and the dark layer behind it leave together, on one curve and one duration, so the page fades back up exactly as the
   basket slides away. (It starts moving straight away, so a click on the close button never feels ignored.) */
.gamb-drawer:not(.is-open) .gamb-drawer__panel,
.gamb-drawer:not(.is-open) .gamb-drawer__scrim { transition-duration: .38s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
@supports (height: 100dvh) {
	.gamb-drawer__panel { height: 100dvh; bottom: auto; }
	body.admin-bar .gamb-drawer__panel { height: calc(100dvh - 32px); }
}
@media (min-width: 601px) and (max-width: 782px) { @supports (height: 100dvh) { body.admin-bar .gamb-drawer__panel { height: calc(100dvh - 46px); } } }
@media (max-width: 600px) { @supports (height: 100dvh) { body.admin-bar .gamb-drawer__panel { height: 100dvh; } } }

/* Head */
.gamb-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 6px 8px 6px 22px;
	min-height: 68px;
	border-bottom: 1px solid var(--gamb-line);
}
.gamb-drawer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
	color: var(--gamb-strong);
}
.gamb-drawer__count {
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--gamb-on-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	letter-spacing: 0;
}
.gamb-drawer__count[hidden] { display: none; }
.gamb-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: var(--gamb-strong);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .25s var(--gamb-ease), color .25s var(--gamb-ease), transform .25s var(--gamb-ease);
}
.gamb-drawer__close svg { display: block; }
@media (hover: hover) { .gamb-drawer__close:hover { background: var(--gamb-raise); color: var(--gamb-accent-light); } .gamb-drawer__close:hover svg { transform: rotate(90deg); } }
.gamb-drawer__close svg { transition: transform .35s var(--gamb-ease); }

/* Body (the only part that scrolls) */
.gamb-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 22px;
	scrollbar-width: thin;
	scrollbar-color: var(--gamb-field-line) transparent;
}
.gamb-drawer__notice {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--gamb-bad) 55%, transparent);
	border-left-width: 3px;
	background: color-mix(in srgb, var(--gamb-bad) 10%, var(--gamb-panel));
	color: var(--gamb-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.gamb-drawer__notice[hidden] { display: none; }
.gamb-drawer__list { margin: 0; padding: 0; list-style: none; }
.gamb-drawer__list[hidden] { display: none; }

/* One bike in the basket */
.gamb-line {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 0 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--gamb-line);
	transition: opacity .25s ease, max-height .3s var(--gamb-ease), padding .3s var(--gamb-ease), transform .3s var(--gamb-ease), border-color .3s ease;
}
.gamb-line.is-new { animation: gamb-line-in .5s var(--gamb-ease) backwards; }
@keyframes gamb-line-in { from { opacity: 0; transform: translateX(18px); } }
.gamb-line.is-busy { opacity: .55; }
.gamb-line.is-leaving { opacity: 0; transform: translateX(28px); max-height: 0 !important; padding-block: 0; border-color: transparent; overflow: hidden; }
.gamb-line__img {
	display: block;
	width: 88px;
	height: 88px;
	overflow: hidden;
	background: var(--gamb-raise);
	border: 1px solid var(--gamb-line);
}
.gamb-line__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gamb-line__main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gamb-line__name {
	max-width: 100%;
	color: var(--gamb-strong);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	overflow-wrap: break-word;
	transition: color .25s var(--gamb-ease);
}
@media (hover: hover) { .gamb-line__name:hover { color: var(--gamb-accent-light); } }
.gamb-line__meta, .gamb-line__unit { margin: 0; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.gamb-line__meta[hidden], .gamb-line__was[hidden], .gamb-line__each[hidden], .gamb-line__limit[hidden] { display: none; }
.gamb-line__was { margin-right: 8px; text-decoration: line-through; }
.gamb-line__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; margin-top: 8px; }
.gamb-line__total { margin-left: auto; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--medium); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gamb-line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; }
.gamb-line__limit { color: var(--gamb-warn); font-size: var(--wp--preset--font-size--x-small); line-height: 1.3; }
.gamb-line__rm {
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--gamb-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .25s var(--gamb-ease);
}
@media (hover: hover) { .gamb-line__rm:hover { color: var(--gamb-accent-light); } }

/* Quantity: a small stepper. A button at its limit stays focusable (so keyboard users do not lose their place) but looks off. */
.gamb-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--gamb-field-line); border-radius: 2px; }
.gamb-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gamb-strong);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s var(--gamb-ease), color .2s var(--gamb-ease);
}
@media (hover: hover) { .gamb-qty__btn:hover:not(.is-disabled) { background: var(--gamb-raise); } }
.gamb-qty__btn:active:not(.is-disabled) { background: var(--gamb-raise); }
.gamb-qty__btn.is-disabled { color: var(--gamb-field-line); cursor: not-allowed; }
.gamb-qty__n { display: flex; align-items: center; justify-content: center; min-width: 34px; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--medium); font-weight: 600; font-variant-numeric: tabular-nums; }
/* A product sold one at a time has no stepper, just the number. */
.gamb-line.is-fixed .gamb-qty__btn { display: none; }
.gamb-line.is-fixed .gamb-qty { border-color: transparent; }
.gamb-line.is-fixed .gamb-qty__n::before { content: "Qty "; margin-right: .35em; color: var(--gamb-muted); font-weight: 400; }

/* Footer: subtotal and the two buttons, always in view */
.gamb-drawer__foot {
	flex: 0 0 auto;
	padding: 18px 22px max(22px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--gamb-line);
	background: var(--gamb-panel);
	box-shadow: 0 -18px 28px -22px rgba(0, 0, 0, .9);
}
.gamb-drawer__foot[hidden] { display: none; }
.gamb-drawer__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.gamb-drawer__sub-label { color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gamb-drawer__sub-amount { color: var(--gamb-strong); font-size: var(--wp--preset--font-size--x-large); font-size: clamp(1.4rem, 1.15rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gamb-drawer__fine { margin: 6px 0 16px; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); line-height: 1.5; }
.gamb-drawer__actions { display: grid; gap: 10px; }
.gamb-drawer__btn { display: block; box-sizing: border-box; width: 100%; border: 1.5px solid transparent; text-align: center; text-decoration: none; cursor: pointer; } /* both buttons carry a border, so they are the same height */
.gamb-drawer__btn.is-outline {
	background: transparent;
	color: var(--gamb-strong);
	border: 1.5px solid var(--gamb-field-line);
}
@media (hover: hover) { .gamb-drawer__btn.is-outline:hover { background: transparent; color: var(--gamb-accent-light); border-color: var(--gamb-accent-light); } }
.gamb-drawer__btn.is-outline:focus-visible { background: transparent; color: var(--gamb-strong); }

/* Empty basket */
.gamb-drawer__empty { display: flex; flex-direction: column; align-items: center; padding: 56px 8px 24px; text-align: center; }
.gamb-drawer__empty[hidden] { display: none; }
.gamb-drawer__empty-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 20px; border: 1px solid var(--gamb-line); border-radius: 50%; background: var(--gamb-raise); color: var(--gamb-accent-light); }
.gamb-drawer__empty-title { margin: 0; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.2; }
.gamb-drawer__empty-hint { margin: 8px 0 24px; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--small); }
.gamb-drawer__empty .gamb-drawer__btn { width: auto; min-width: 200px; }

/* While the first look at the basket loads */
.gamb-drawer__loading { padding: 20px 0; }
.gamb-drawer__loading[hidden] { display: none; }
.gamb-skel { display: block; height: 88px; margin-bottom: 20px; background: linear-gradient(100deg, var(--gamb-raise) 30%, color-mix(in srgb, var(--gamb-raise) 70%, var(--gamb-muted)) 50%, var(--gamb-raise) 70%) 0 0 / 220% 100%; animation: gamb-shimmer 1.3s linear infinite; }
@keyframes gamb-shimmer { to { background-position: -120% 0; } }

/* Read aloud by screen readers, not seen. */
.gamb-drawer__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* "Add to cart" on the bike page while it is being added. */
.single_add_to_cart_button.is-loading { opacity: .65; cursor: progress; pointer-events: none; }

/* Phones: slightly tighter, and the bottom buttons clear the home bar. */
@media (max-width: 480px) {
	.gamb-drawer__head { padding-left: 18px; min-height: 64px; }
	.gamb-drawer__body { padding: 0 18px; }
	.gamb-drawer__foot { padding-inline: 18px; }
	.gamb-line { grid-template-columns: 76px minmax(0, 1fr); gap: 0 14px; padding: 18px 0; }
	.gamb-line__img { width: 76px; height: 76px; }
	.gamb-line__name, .gamb-line__total { font-size: var(--wp--preset--font-size--small); }
}
/* A phone on its side: less height, so the two buttons sit side by side and the bars shrink. */
@media (max-height: 560px) {
	.gamb-drawer__head { min-height: 56px; }
	.gamb-drawer__fine { display: none; }
	.gamb-drawer__foot { padding-top: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
	.gamb-drawer__sub { margin-bottom: 10px; }
	.gamb-drawer__actions { grid-template-columns: 1fr 1fr; }
	.gamb-drawer__actions .gamb-drawer__btn { padding-block: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
	.gamb-drawer__panel, .gamb-drawer__scrim, .gamb-line { transition: none !important; }
	.gamb-skel { animation: none !important; }
}

/* ==========================================================================
   15. Cookie consent (banner, settings panel, held-back videos, cookie list).
       Markup is printed by inc/consent.php; behaviour is assets/js/consent.js. Colours are the site's own roles.
   ========================================================================== */
.gamb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The banner. It only exists on screen until the visitor chooses (html.gamb-consent-pending is set by the first script on the page). */
.gamb-consent { display: none; }
html.gamb-consent-pending .gamb-consent {
	display: block;
	position: fixed;
	z-index: 99990; /* above the sticky header and page content; the basket drawer (100000) and the settings panel sit above it */
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 16px max(14px, env(safe-area-inset-bottom));
	pointer-events: none;
}
/* The page can always be scrolled far enough to clear the banner. */
html.gamb-consent-pending body { padding-bottom: var(--gamb-consent-h, 0px); }
.gamb-consent__inner {
	pointer-events: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px 32px;
	align-items: center;
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 24px;
	background: var(--gamb-panel);
	color: var(--gamb-text);
	border: 1px solid var(--gamb-field-line);
	border-top: 2px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	box-shadow: 0 -18px 56px -18px rgba(0, 0, 0, .85);
	animation: gamb-consent-in .6s var(--gamb-ease) both;
}
@keyframes gamb-consent-in { from { opacity: 0; transform: translateY(18px); } }
.gamb-consent__title { margin: 0 0 6px; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: 1.2; }
.gamb-consent__msg { margin: 0; color: var(--gamb-text); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }
.gamb-consent__msg a { color: var(--gamb-accent-light); text-underline-offset: 3px; }
.gamb-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Accept all and Reject non-essential look exactly alike (same size, same colour): saying no is as easy as saying yes. */
.gamb-consent__btn { box-sizing: border-box; min-height: 48px; padding: .9rem 1.3rem; border: 1.5px solid var(--wp--preset--color--accent); cursor: pointer; text-align: center; font-family: inherit; white-space: nowrap; }
.gamb-consent__btn.is-outline { background: transparent; color: var(--gamb-strong); border-color: var(--gamb-field-line); }
@media (hover: hover) { .gamb-consent__btn.is-outline:hover { background: transparent; color: var(--gamb-accent-light); border-color: var(--gamb-accent-light); } }
.gamb-consent__btn.is-outline:focus-visible { background: transparent; color: var(--gamb-strong); }

@media (max-width: 860px) {
	html.gamb-consent-pending .gamb-consent { padding-inline: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.gamb-consent__inner { grid-template-columns: 1fr; padding: 14px 16px 16px; gap: 12px; max-height: min(78dvh, 640px); overflow-y: auto; overscroll-behavior: contain; }
	.gamb-consent__title { margin-bottom: 4px; font-size: var(--wp--preset--font-size--small); }
	.gamb-consent__msg { font-size: var(--wp--preset--font-size--x-small); line-height: 1.5; }
	.gamb-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; }
	.gamb-consent__actions .is-outline { grid-column: 1 / -1; }
	.gamb-consent__btn { min-height: 44px; padding: .6rem .6rem; white-space: normal; line-height: 1.2; }
}
@media (max-width: 360px) { .gamb-consent__btn { font-size: .72rem; letter-spacing: .06em; } }
/* A phone on its side: the text and the buttons share the width so the banner stays short. */
@media (max-height: 520px) and (min-width: 560px) {
	.gamb-consent__inner { grid-template-columns: minmax(0, 1fr) auto; max-height: 86dvh; padding: 12px 16px; }
	.gamb-consent__actions { display: flex; flex-direction: column; }
	.gamb-consent__title { display: none; }
}

/* The settings panel and the small question. */
html.gamb-consent-modal { overflow: hidden; padding-right: var(--gamb-csbw, 0px); }
.gamb-consent-panel { position: fixed; inset: 0; z-index: 100010; display: grid; place-items: center; padding: 16px; }
.gamb-consent-panel[hidden] { display: none; }
.gamb-consent-panel__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .74); opacity: 0; transition: opacity .3s ease; }
.gamb-consent-panel.is-open .gamb-consent-panel__scrim { opacity: 1; }
.gamb-consent-panel__box {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(660px, 100%);
	max-height: min(calc(100vh - 32px), 780px);
	max-height: min(calc(100dvh - 32px), 780px);
	background: var(--gamb-panel);
	color: var(--gamb-text);
	border: 1px solid var(--gamb-field-line);
	border-top: 2px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9);
	opacity: 0;
	transform: translateY(16px) scale(.985);
	transition: opacity .25s ease, transform .4s var(--gamb-ease);
	outline: 0;
}
.gamb-consent-panel.is-open .gamb-consent-panel__box { opacity: 1; transform: none; }
.gamb-consent-ask .gamb-consent-panel__box { width: min(460px, 100%); padding: 26px 24px 24px; }
.gamb-consent-ask .gamb-consent-panel__title { margin-bottom: 10px; }
.gamb-consent-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--gamb-line); }
.gamb-consent-panel__title { margin: 0; color: var(--gamb-strong); font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.2; }
.gamb-consent-panel__x { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gamb-text); cursor: pointer; }
@media (hover: hover) { .gamb-consent-panel__x:hover { background: var(--gamb-raise); color: var(--gamb-accent-light); } }
.gamb-consent-panel__body { flex: 1 1 auto; min-height: 0; padding: 16px 24px 4px; overflow-y: auto; overscroll-behavior: contain; /* a soft edge shows when there is more to scroll to */ background: linear-gradient(var(--gamb-panel) 30%, transparent) top / 100% 24px no-repeat local, linear-gradient(transparent, var(--gamb-panel) 70%) bottom / 100% 24px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .55), transparent) top / 100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .55), transparent) bottom / 100% 12px no-repeat scroll; }
.gamb-consent-panel__head, .gamb-consent-panel__foot, .gamb-consent-panel__more { flex: 0 0 auto; }
.gamb-consent-panel__intro { margin: 0 0 14px; color: var(--gamb-text); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }
.gamb-consent-panel__intro[hidden] { display: none; }
[data-gamb-ask-note] { padding: 10px 12px; border-left: 3px solid var(--gamb-accent-light); background: var(--gamb-raise); color: var(--gamb-strong); }
.gamb-consent-cats { margin: 0; padding: 0; list-style: none; }
.gamb-consent-cat { margin: 0; padding: 14px 0; border-top: 1px solid var(--gamb-line); }
.gamb-consent-cat.is-asked { box-shadow: -12px 0 0 -9px var(--gamb-accent-light); }
.gamb-consent-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.gamb-consent-cat__label { color: var(--gamb-strong); font-size: var(--wp--preset--font-size--medium); font-weight: 700; cursor: pointer; }
.gamb-consent-cat__fixed { color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gamb-consent-cat__desc { margin: 2px 0 0; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; max-width: 52ch; }
.gamb-consent-panel__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 24px 8px; }
.gamb-consent-ask .gamb-consent-panel__foot { grid-template-columns: 1fr 1fr; padding: 16px 0 0; }
.gamb-consent-panel__foot .gamb-consent__btn { padding-inline: .6rem; white-space: normal; }
.gamb-consent-panel__more { margin: 0; padding: 4px 24px 18px; font-size: var(--wp--preset--font-size--x-small); }
.gamb-consent-panel__more a { color: var(--gamb-accent-light); text-underline-offset: 3px; }

/* The on/off switch. The real checkbox sits invisibly over the whole switch, so the whole thing is the tap target. */
.gamb-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex: 0 0 auto; }
.gamb-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.gamb-switch__state { min-width: 2.2em; color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gamb-switch__track { position: relative; order: 2; flex: 0 0 auto; width: 52px; height: 30px; border: 1.5px solid var(--gamb-field-line); border-radius: 15px; background: var(--gamb-page); transition: background-color .25s ease, border-color .25s ease; }
.gamb-switch__state { order: 1; }
.gamb-switch__thumb { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--gamb-muted); transition: transform .3s var(--gamb-ease), background-color .25s ease; }
.gamb-switch input:checked + .gamb-switch__track { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.gamb-switch input:checked + .gamb-switch__track .gamb-switch__thumb { transform: translateX(22px); background: var(--gamb-on-accent); }
.gamb-switch input:checked ~ .gamb-switch__state { color: var(--gamb-accent-light); }
.gamb-switch input:focus-visible + .gamb-switch__track { outline: 2px solid var(--gamb-accent-light); outline-offset: 3px; }

/* A phone on its side: the panel uses every pixel of the short screen and only its list scrolls. */
@media (max-height: 520px) {
	.gamb-consent-panel { padding: 8px; }
	.gamb-consent-panel__box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
	.gamb-consent-panel__head { padding: 4px 6px 4px 20px; }
	.gamb-consent-panel__title { font-size: var(--wp--preset--font-size--medium); }
	.gamb-consent-panel__foot { padding: 10px 20px 6px; }
	.gamb-consent-panel__foot .gamb-consent__btn { min-height: 44px; padding-block: .5rem; }
	.gamb-consent-panel__more { padding: 2px 20px 8px; }
	.gamb-consent-panel__body { padding-inline: 20px; }
	.gamb-consent-ask .gamb-consent-panel__box { padding: 16px 20px 14px; }
}
@media (max-width: 560px) {
	.gamb-consent-panel { padding: 0; place-items: end center; }
	.gamb-consent-panel__box { width: 100%; max-height: 92dvh; border-radius: 10px 10px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(40px); }
	.gamb-consent-panel__head { padding: 14px 8px 12px 18px; }
	.gamb-consent-panel__body { padding: 14px 18px 2px; }
	.gamb-consent-panel__foot { grid-template-columns: 1fr; padding: 14px 18px 6px; }
	.gamb-consent-ask .gamb-consent-panel__foot { grid-template-columns: 1fr; }
	.gamb-consent-panel__more { padding: 4px 18px 16px; }
	.gamb-consent-ask .gamb-consent-panel__box { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
}

/* An embedded video that is held back until the visitor allows it. */
.gamb-gate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; box-sizing: border-box; text-align: center; background: var(--gamb-panel); color: var(--gamb-text); }
.gamb-gate p { margin: 0; max-width: 34ch; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* The list of cookies on the Cookie page, as a table that turns into cards on a phone. */
.gamb-cookie-cat { margin-top: 1.6em; }
.gamb-cookie-table table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.gamb-cookie-table th, .gamb-cookie-table td { padding: 10px 12px; border: 1px solid var(--gamb-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.gamb-cookie-table th { color: var(--gamb-strong); background: var(--gamb-panel); }
.gamb-consent-status { padding: 14px 16px; border-left: 3px solid var(--wp--preset--color--accent); background: var(--gamb-panel); color: var(--gamb-strong); }
@media (max-width: 640px) {
	.gamb-cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.gamb-cookie-table table, .gamb-cookie-table tbody, .gamb-cookie-table tr, .gamb-cookie-table td { display: block; }
	.gamb-cookie-table tr { margin-bottom: 12px; border: 1px solid var(--gamb-line); background: var(--gamb-panel); }
	.gamb-cookie-table td { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 10px; border: 0; border-bottom: 1px solid var(--gamb-line); }
	.gamb-cookie-table td:last-child { border-bottom: 0; }
	.gamb-cookie-table td::before { content: attr(data-label); color: var(--gamb-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
}
.gamb-footer-cookie { margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.gamb-consent__inner { animation: none !important; }
	.gamb-consent-panel__scrim, .gamb-consent-panel__box, .gamb-switch__track, .gamb-switch__thumb { transition: none !important; }
}

/* ==========================================================================
   16. Collection or delivery. Markup: inc/collection.php. The panels on the product page, basket and checkout, the panel on the
   order confirmation page, and the Delivery / Collection switch at checkout (WooCommerce's own, restyled for the dark site).
   ========================================================================== */
.gamb-fulfil {
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--gamb-panel);
	border: 1px solid var(--gamb-line);
	border-left: 4px solid var(--gamb-accent-light);
	border-radius: 4px;
	color: var(--gamb-text);
	font-size: .9375rem;
	line-height: 1.55;
}
.gamb-fulfil p { margin: 0 0 10px; }
.gamb-fulfil > :last-child { margin-bottom: 0; }
.gamb-fulfil strong { color: var(--gamb-strong); }
.gamb-fulfil a:not(.wp-element-button) { color: var(--gamb-accent-light); text-decoration: underline; text-underline-offset: 3px; }
.gamb-fulfil a:not(.wp-element-button):hover { color: var(--gamb-strong); }
.gamb-fulfil__title { margin: 0 0 12px; font-size: 1rem; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--gamb-strong); }
.gamb-fulfil__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; margin: 0 0 14px; }
.gamb-fulfil__grid h4 { margin: 0 0 4px; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gamb-muted); }
.gamb-fulfil__grid p { margin: 0; }
.gamb-fulfil__note { color: var(--gamb-strong); }
.gamb-fulfil__rule { padding: 10px 12px; background: var(--gamb-raise); border-radius: 3px; color: var(--gamb-strong); }
.gamb-fulfil--cart, .gamb-fulfil--checkout { margin: 0 0 28px; }
.gamb-fulfil--product { margin-top: 28px; }
.gamb-fulfil--after { margin: 8px 0 32px; padding: 22px 24px; border-left-width: 6px; font-size: 1rem; }
.gamb-fulfil--after .gamb-fulfil__title { font-size: 1.125rem; }
.gamb-fulfil__steps { margin: 0 0 16px; padding-left: 1.4em; }
.gamb-fulfil__steps li { margin: 0 0 8px; padding-left: 4px; }
.gamb-fulfil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gamb-fulfil__actions .wp-element-button { text-decoration: none; }
.gamb-fulfil__addr { color: var(--gamb-strong); word-break: break-word; }
@media (max-width: 600px) {
	.gamb-fulfil { padding: 16px; }
	.gamb-fulfil--after { padding: 18px 16px; }
	.gamb-fulfil__actions .wp-element-button { width: 100%; text-align: center; }
}

/* WooCommerce's Delivery / Collection switch: its selected option is white, which hides the white text on the dark site. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container { background-color: var(--gamb-panel); border: 1px solid var(--gamb-line); }
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option { color: var(--gamb-text); min-height: 52px; }
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option-title { font-size: 1rem; }
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	background: var(--gamb-raise);
	border-color: var(--gamb-accent-light);
	color: var(--gamb-strong);
}
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon { fill: var(--gamb-accent-light); }
@media (hover: hover) {
	.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):hover { background-color: var(--gamb-raise); }
}