/*
 * Giftwise design system layer for vitaluce-woo.
 * Source of truth: brand resources/design system/giftwise-v3.1 (tokens.json → tokens.css).
 * Loaded after theme.css and tokens.css. Use var(--bds-*) only: no raw colors, sizes or radii.
 */

/* ---------------------------------------------------------------------------
 * 1. Legacy variable bridge: theme.css keeps working, now drawn from tokens.
 * ------------------------------------------------------------------------- */
:root {
	--ecq-green: var(--bds-primary);
	--ecq-green-dark: var(--bds-primary-pressed);
	--ecq-ink: var(--bds-on-surface);
	--ecq-muted: var(--bds-on-surface-variant);
	--ecq-border: var(--bds-outline-variant);
	--ecq-bg: var(--bds-surface);
	--ecq-bg-soft: var(--bds-surface-container);
	--ecq-sale: var(--bds-sale);
	--ecq-radius: var(--bds-radius-card);
	--ecq-page: var(--bds-space-container);
	--ecq-shadow: none;
	--gw-tap: 44px;
	--gw-control-h: 48px;
	--gw-button-h: 56px;
	--gw-header-offset: calc(var(--ecq-header-h, 0px) + var(--wp-admin--admin-bar--height, 0px));
}

/* ---------------------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------------------- */
body {
	background: var(--bds-surface);
	color: var(--bds-on-surface);
	font-family: var(--bds-font-body);
	font-size: var(--bds-text-body-md);
	line-height: var(--bds-text-body-md-lh);
}

h1, h2, h3,
.product_title,
.ecq-section-heading h2 {
	font-family: var(--bds-font-display);
	color: var(--bds-secondary);
	letter-spacing: 0;
}

h1 { font-size: var(--bds-text-headline-lg); line-height: var(--bds-text-headline-lg-lh); font-weight: var(--bds-text-headline-lg-weight); }
h2 { font-size: var(--bds-text-headline-md); line-height: var(--bds-text-headline-md-lh); font-weight: var(--bds-text-headline-md-weight); }

a { color: var(--bds-primary); }

:focus-visible {
	outline: 2px solid var(--bds-primary);
	outline-offset: 2px;
}

.ecq-container {
	width: min(var(--bds-space-container), calc(100% - 2 * var(--bds-gutter)));
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.ecq-container { width: min(var(--bds-space-container), calc(100% - 2 * var(--bds-space-12))); }
}

/* Skip link becomes visible on keyboard focus. */
.skip-link.screen-reader-text:focus {
	clip-path: none;
	position: fixed;
	z-index: 60;
	top: var(--bds-space-2);
	left: var(--bds-space-2);
	width: auto;
	height: auto;
	padding: var(--bds-space-3) var(--bds-space-4);
	background: var(--bds-surface-container-lowest);
	color: var(--bds-primary);
	border-radius: var(--bds-radius-button);
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
}

/* ---------------------------------------------------------------------------
 * 3. Buttons and form controls
 * ------------------------------------------------------------------------- */
.gw-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bds-space-2);
	min-height: var(--gw-tap);
	padding: var(--bds-space-3) var(--bds-space-6);
	border: 1px solid var(--bds-primary);
	border-radius: var(--bds-radius-button);
	background: var(--bds-surface);
	color: var(--bds-primary);
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bds-duration-short) var(--bds-ease-standard), border-color var(--bds-duration-short) var(--bds-ease-standard);
}

.gw-button:hover,
.woocommerce .button:hover { background: var(--bds-surface-hover); }

/* The one buy action per view. */
.gw-button--primary,
.woocommerce .single_add_to_cart_button,
.woocommerce .button.alt,
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: var(--gw-button-h);
	border-color: var(--bds-primary) !important;
	background: var(--bds-primary) !important;
	color: var(--bds-on-primary) !important;
	text-transform: none;
	letter-spacing: 0;
}

.gw-button--primary:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover { background: var(--bds-primary-hover) !important; }

.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button.disabled {
	background: var(--bds-disabled-container) !important;
	border-color: var(--bds-disabled-container) !important;
	color: var(--bds-on-disabled) !important;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.woocommerce form .input-text {
	min-height: var(--gw-control-h);
	padding: var(--bds-space-3) var(--bds-space-4);
	border: 1px solid var(--bds-outline);
	border-radius: var(--bds-radius-input);
	background-color: var(--bds-surface-container-lowest);
	color: var(--bds-on-surface);
	/* 16px floor: iOS Safari zooms the page when a focused field is smaller. */
	font: var(--bds-text-body-md-weight) max(16px, var(--bds-text-body-md)) / 1.25 var(--bds-font-body);
	box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--bds-primary);
	outline: 2px solid var(--bds-primary);
	outline-offset: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Announcement bar and header
 * ------------------------------------------------------------------------- */
.ecq-ticker {
	padding: var(--bds-space-2) 0;
	background: var(--bds-inverse-surface);
	color: var(--bds-inverse-on-surface);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / var(--bds-text-label-sm-lh) var(--bds-font-body);
	letter-spacing: 0.02em;
}

/* Spacing lives inside each item (not flex gap) so the two halves of the track are identical and
   the -50% loop is seamless. 175 s keeps the old speed (~20 px/s) with 5 groups per half. */
.ecq-ticker-track { gap: 0; animation-duration: 175s; }
.ecq-ticker-group { display: flex; flex-shrink: 0; }
.ecq-ticker-group span { padding-right: var(--bds-space-12); }
.ecq-ticker:hover .ecq-ticker-track,
.ecq-ticker:focus-within .ecq-ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.ecq-ticker-track { animation: none !important; transform: none !important; }
}

.ecq-site-header {
	background: var(--bds-surface);
	border-bottom: 1px solid var(--bds-outline-variant);
	box-shadow: none;
}

.ecq-header-main {
	gap: var(--bds-space-3);
	padding-block: var(--bds-space-3);
}

.ecq-wordmark,
.ecq-logo-link {
	font-family: var(--bds-font-display);
	font-size: var(--bds-text-headline-lg);
	font-weight: 700;
	color: var(--bds-secondary);
	text-decoration: none;
}

.ecq-menu-toggle {
	width: var(--gw-tap);
	height: var(--gw-tap);
	border: 0;
	border-radius: var(--bds-radius-full);
	background: transparent;
}

.ecq-menu-toggle:hover { background: var(--bds-surface-hover); }

.ecq-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--gw-tap);
	color: var(--bds-on-surface);
	font: 500 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
	text-decoration: none;
}

.ecq-menu a:hover {
	color: var(--bds-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ecq-cart-link {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--gw-tap);
	height: var(--gw-tap);
	border-radius: var(--bds-radius-full);
	color: var(--bds-on-surface);
	font-size: var(--bds-text-label-sm);
}

.ecq-cart-link::before { content: none !important; }
.ecq-cart-link:hover { background: var(--bds-surface-hover); }
.ecq-cart-link .gw-icon { width: var(--bds-space-6); height: var(--bds-space-6); }

.ecq-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-grid;
	place-items: center;
	min-width: var(--bds-space-5);
	height: var(--bds-space-5);
	padding-inline: var(--bds-space-1);
	border-radius: var(--bds-radius-badge);
	background: var(--bds-secondary);
	color: var(--bds-on-secondary);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / 1 var(--bds-font-body);
}

.ecq-header-search { position: relative; }

.ecq-header-search::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--bds-space-4);
	width: var(--bds-space-4);
	height: var(--bds-space-4);
	background: var(--bds-on-surface-variant);
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.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='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ecq-header-search input[type="search"] {
	width: 100%;
	min-height: var(--gw-tap);
	padding-left: var(--bds-space-10);
	border-color: var(--bds-outline-variant);
	border-radius: var(--bds-radius-button);
	background: var(--bds-surface-container-lowest);
}

/* Phones and tablets: hamburger, logo, cart on row one; full-width search on row two.
   Equal outer columns keep the logo centred whatever the icons' widths. */
@media (max-width: 1023px) {
	.ecq-header-main {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "toggle brand actions" "search search search";
		row-gap: var(--bds-space-2);
	}

	.ecq-menu-toggle { grid-area: toggle; justify-self: start; }
	.ecq-brand { grid-area: brand; justify-self: center; }
	.ecq-header-actions { grid-area: actions; display: contents; }
	.ecq-header-actions .ecq-cart-link { grid-area: actions; justify-self: end; }

	.ecq-header-search {
		grid-area: search;
		display: block !important;
	}

	.ecq-primary-nav {
		inset: var(--gw-header-offset) 0 auto 0;
		max-height: calc(100dvh - var(--gw-header-offset));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--bds-space-2) var(--bds-gutter) var(--bds-space-6);
		background: var(--bds-surface);
		border-bottom: 1px solid var(--bds-outline-variant);
		box-shadow: var(--bds-shadow-level3);
	}

	.ecq-menu { gap: 0; }

	.ecq-menu > li > a {
		display: flex;
		min-height: var(--gw-control-h);
		border-bottom: 1px solid var(--bds-outline-variant);
		font-size: var(--bds-text-body-lg);
	}

	body.ecq-nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------------------
 * 5. Product grid and product card (one link per card, no button)
 * ------------------------------------------------------------------------- */
.woocommerce ul.products,
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(var(--bds-grid-cols), minmax(0, 1fr)) !important;
	gap: var(--bds-grid-gap) var(--bds-space-3);
	margin: 0;
}

@media (min-width: 768px) {
	.woocommerce ul.products { column-gap: var(--bds-grid-gap); }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: var(--bds-radius-card);
	background: transparent;
	box-shadow: none;
	text-align: left;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: var(--bds-space-2);
	height: 100%;
	color: var(--bds-on-surface);
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 !important;
	border-radius: var(--bds-radius-card);
	background: var(--bds-surface-container);
	transition: transform var(--bds-duration-short) var(--bds-ease-standard);
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover img { transform: scale(1.05); }
}

/* Clip the zoom to the image's own rounded box. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > .ecq-shopify-product-image { clip-path: inset(0 round var(--bds-radius-card)); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(2em * var(--bds-text-body-md-lh));
	max-height: calc(2em * var(--bds-text-body-md-lh));
	margin: 0;
	padding: 0;
	color: var(--bds-on-surface);
	font: var(--bds-text-body-md-weight) var(--bds-text-body-md) / var(--bds-text-body-md-lh) var(--bds-font-body);
	text-align: left;
}

@media (min-width: 768px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: calc(2em * var(--bds-text-body-lg-lh)); max-height: calc(2em * var(--bds-text-body-lg-lh)); font-size: var(--bds-text-body-lg); line-height: var(--bds-text-body-lg-lh); }
}

.woocommerce ul.products li.product .price,
.woocommerce div.product .summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bds-space-2);
	margin: 0;
	color: var(--bds-secondary);
	font: var(--bds-text-price-md-weight) var(--bds-text-price-md) / var(--bds-text-price-md-lh) var(--bds-font-body);
	font-variant-numeric: tabular-nums;
}

.woocommerce .price del {
	order: 2;
	color: var(--bds-on-surface-variant);
	font-weight: 400;
	opacity: 1;
}

.woocommerce .price ins {
	color: var(--bds-sale);
	text-decoration: none;
}

.ecq-product-badges {
	position: absolute;
	z-index: 1;
	top: var(--bds-space-2);
	left: var(--bds-space-2);
	display: flex;
	gap: var(--bds-space-1);
}

.ecq-product-badge {
	padding: var(--bds-space-1) var(--bds-space-2);
	border-radius: var(--bds-radius-badge);
	background: var(--bds-sale);
	color: var(--bds-on-sale);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / var(--bds-text-label-sm-lh) var(--bds-font-body);
}

/* Section headings above rails and grids. */
.ecq-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bds-space-4);
	margin-bottom: var(--bds-space-4);
}

.ecq-section-heading h2 { margin: 0; font-size: var(--bds-text-headline-lg); line-height: var(--bds-text-headline-lg-lh); }

.ecq-section-heading a {
	display: inline-flex;
	align-items: center;
	min-height: var(--gw-tap);
	color: var(--bds-primary);
	font: 600 var(--bds-text-label-lg) / 1 var(--bds-font-body);
	white-space: nowrap;
}

/* Pagination wraps instead of pushing the page sideways on phones. */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bds-space-2);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--gw-tap);
	min-height: var(--gw-tap);
	border: 1px solid var(--bds-outline-variant);
	border-radius: var(--bds-radius-button);
	color: var(--bds-on-surface);
	font: 500 var(--bds-text-label-lg) / 1 var(--bds-font-body);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--bds-secondary);
	background: var(--bds-secondary);
	color: var(--bds-on-secondary);
}

/* ---------------------------------------------------------------------------
 * 6. Product page
 * ------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	margin: var(--bds-space-3) 0;
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--bds-on-surface-variant); }

.woocommerce div.product {
	gap: var(--bds-space-6);
}

@media (min-width: 1024px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--bds-space-12);
	}
}

/* Tablet: the gallery stacks above the buy box but never fills more than ~60% of the screen. */
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce div.product div.images {
		width: min(100%, 60vh);
		margin-inline: auto;
	}
}

.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .canvas-container {
	border-radius: var(--bds-radius-card);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--bds-space-2);
	margin-top: var(--bds-space-2);
}

.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; margin: 0 !important; }

.woocommerce div.product div.images .flex-control-thumbs img {
	border: 1px solid var(--bds-outline-variant);
	opacity: 1;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	border: 2px solid var(--bds-secondary);
}

.woocommerce div.product .summary {
	display: flex;
	flex-direction: column;
	gap: var(--bds-space-4);
	min-width: 0;
}

.woocommerce div.product .summary > * { margin: 0; }

.woocommerce div.product .product_title {
	color: var(--bds-secondary);
	font: var(--bds-text-headline-lg-weight) var(--bds-text-headline-lg) / var(--bds-text-headline-lg-lh) var(--bds-font-display);
}

.woocommerce div.product .summary .price { font-size: var(--bds-text-headline-md); line-height: var(--bds-text-headline-md-lh); }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--bds-on-surface-variant);
	font-size: var(--bds-text-body-lg);
	line-height: var(--bds-text-body-lg-lh);
}

/* Delivery promise */
.gw-delivery {
	display: grid;
	gap: var(--bds-space-1);
	padding: var(--bds-space-3) var(--bds-space-4);
	border-radius: var(--bds-radius-md);
	background: var(--bds-surface-container-high);
	color: var(--bds-on-surface);
}

.gw-delivery p { margin: 0; }

.gw-delivery__eta {
	font: 500 var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body);
}

.gw-delivery__eta .gw-icon {
	margin-right: var(--bds-space-2);
	vertical-align: -0.3em;
}

.gw-delivery__eta strong,
.gw-delivery__cutoff strong { color: var(--bds-secondary); font-weight: 700; }

.gw-delivery__cutoff,
.gw-delivery__ship { font-size: var(--bds-text-body-md); }

.gw-delivery__ship strong { color: var(--bds-on-surface); font-weight: 700; }

.gw-delivery__note {
	color: var(--bds-on-surface-variant);
	font-size: var(--bds-text-body-sm);
	line-height: var(--bds-text-body-sm-lh);
}

/* Icons: one line set drawn from currentColor. */
.gw-icon {
	flex: none;
	display: inline-block;
	width: var(--bds-space-5);
	height: var(--bds-space-5);
	background: currentColor;
	-webkit-mask: var(--gw-icon) center / contain no-repeat;
	mask: var(--gw-icon) center / contain no-repeat;
}

.gw-icon--truck { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.gw-icon--eye { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.gw-icon--refresh { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4M4 13a8 8 0 0 0 14.3 4.9L20 16m0 4v-4h-4'/%3E%3C/svg%3E"); }
.gw-icon--flag { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.gw-icon--bag { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.gw-icon--lock { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* Buy box: WooCommerce variations + Customily options share one control style. */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--bds-space-4);
	margin: 0;
}

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody { display: block; width: 100%; margin: 0; border: 0; }
.woocommerce div.product form.cart .variations tr { display: grid; gap: var(--bds-space-2); margin-bottom: var(--bds-space-4); }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0; border: 0; text-align: left; }

.woocommerce div.product form.cart .variations label,
#customily-options .customily_option > label,
#customily-options .option_name {
	color: var(--bds-on-surface);
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
}

.woocommerce div.product form.cart .variations select,
#customily-options select,
#customily-options input[type="text"],
#customily-options textarea {
	width: 100% !important;
	min-height: var(--gw-control-h) !important;
	border: 1px solid var(--bds-outline) !important;
	border-radius: var(--bds-radius-input) !important;
	background-color: var(--bds-surface-container-lowest) !important;
	color: var(--bds-on-surface) !important;
	font: var(--bds-text-body-md-weight) max(16px, var(--bds-text-body-md)) / 1.25 var(--bds-font-body) !important;
}

#customily-options .customily_option { margin-bottom: var(--bds-space-4); }
#customily-options .option_number { display: none; }
#customily-options .maxlength-counter { display: none; }
#customily-options .customily-required-label { color: var(--bds-on-surface-variant); }
#customily-options .customily-required-label > span { color: var(--bds-error) !important; font-weight: 600; }

.gw-char-count {
	display: block;
	margin-top: var(--bds-space-1);
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* "Clear" only blanks the defaults and leaves the form unbuyable; shoppers change a select instead. */
.woocommerce div.product form.cart .reset_variations { display: none !important; }
.woocommerce div.product form.cart .variations tr:last-child { margin-bottom: 0; }

/* One price only: the price under the title follows the chosen variation (giftwise.js). */
.woocommerce div.product form.cart .woocommerce-variation-price { display: none; }

/* Quantity + add to cart on one row. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bds-space-3);
}

.woocommerce div.product form.cart div.quantity { margin: 0; }

.woocommerce .quantity .qty {
	width: 5em;
	min-height: var(--gw-button-h);
	border-radius: var(--bds-radius-input);
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	text-transform: none !important;
	font-size: var(--bds-text-body-lg);
}

/* Reassurance list under the button. */
.gw-reassurance {
	display: grid;
	gap: var(--bds-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bds-on-surface);
	font: var(--bds-text-body-md-weight) var(--bds-text-body-md) / var(--bds-text-body-md-lh) var(--bds-font-body);
}

.gw-reassurance li { display: flex; align-items: center; gap: var(--bds-space-2); }
.gw-reassurance .gw-icon { color: var(--bds-primary); }

/* Detail accordions (replace WooCommerce tabs). */
.gw-accordions { border-top: 1px solid var(--bds-outline-variant); }

.gw-accordion { border-bottom: 1px solid var(--bds-outline-variant); }

.gw-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--bds-space-12);
	color: var(--bds-secondary);
	font: 600 var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body);
	list-style: none;
	cursor: pointer;
}

.gw-accordion > summary::-webkit-details-marker { display: none; }

.gw-accordion > summary::after {
	content: "";
	width: var(--bds-space-3);
	height: var(--bds-space-3);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--bds-duration-short) var(--bds-ease-standard);
}

.gw-accordion[open] > summary::after { transform: translateY(25%) rotate(-135deg); }

.gw-accordion__body {
	padding-bottom: var(--bds-space-4);
	color: var(--bds-on-surface);
	font: var(--bds-text-body-md-weight) var(--bds-text-body-md) / var(--bds-text-body-lg-lh) var(--bds-font-body);
}

.gw-accordion__body p { margin: 0 0 var(--bds-space-3); }
.gw-accordion__body ul { margin: 0 0 var(--bds-space-3); padding-left: var(--bds-space-5); }
.gw-accordion__body table { width: 100%; border-collapse: collapse; }
.gw-accordion__body th,
.gw-accordion__body td { padding: var(--bds-space-2) 0; border-bottom: 1px solid var(--bds-outline-variant); text-align: left; vertical-align: top; }

/* "You may also like" */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	grid-column: 1 / -1;
	margin-top: var(--bds-space-12);
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
	margin: 0 0 var(--bds-space-4);
	font-size: var(--bds-text-headline-lg);
	line-height: var(--bds-text-headline-lg-lh);
	text-align: left;
}

/* Sticky add-to-cart bar: phones and tablets only. */
.gw-sticky-atc {
	position: fixed;
	z-index: 20;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	gap: var(--bds-space-3);
	padding: var(--bds-space-3) var(--bds-gutter) calc(var(--bds-space-3) + env(safe-area-inset-bottom));
	background: var(--bds-surface-container-lowest);
	border-top: 1px solid var(--bds-outline-variant);
	transform: translateY(110%);
	transition: transform var(--bds-duration-medium) var(--bds-ease-standard);
}

.gw-sticky-atc[hidden] { display: none; }
.gw-sticky-atc.is-visible { transform: none; }

.gw-sticky-atc__info { display: grid; min-width: 0; flex: 1 1 auto; }

.gw-sticky-atc__name {
	overflow: hidden;
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gw-sticky-atc__price,
.gw-sticky-atc__price .price { color: var(--bds-secondary); font: var(--bds-text-price-md-weight) var(--bds-text-price-md) / var(--bds-text-price-md-lh) var(--bds-font-body); }
.gw-sticky-atc__price del { color: var(--bds-on-surface-variant); font-weight: 400; }
.gw-sticky-atc__price ins { color: var(--bds-sale); text-decoration: none; }

.gw-sticky-atc__button { flex: 0 0 auto; min-width: 9.5rem; }

@media (min-width: 1024px) {
	.gw-sticky-atc { display: none !important; }
}

/* Keep the footer's last lines reachable above the sticky bar. */
@media (max-width: 1023px) {
	body.single-product { padding-bottom: calc(var(--gw-button-h) + var(--bds-space-6)); }
}

/* Live preview dock: a small mirror of the Customily canvas while typing. */
.gw-preview-dock {
	position: fixed;
	z-index: 20;
	top: calc(var(--gw-header-offset) + var(--bds-space-2));
	right: var(--bds-gutter);
	display: grid;
	gap: var(--bds-space-1);
	width: calc(var(--bds-space-24) + var(--bds-space-6));
	padding: var(--bds-space-1);
	border: 1px solid var(--bds-outline-variant);
	border-radius: var(--bds-radius-md);
	background: var(--bds-surface-container-lowest);
	box-shadow: var(--bds-shadow-level2);
	cursor: pointer;
	opacity: 0;
	transform: translateY(calc(-1 * var(--bds-space-2)));
	transition: opacity var(--bds-duration-medium) var(--bds-ease-standard), transform var(--bds-duration-medium) var(--bds-ease-standard);
	pointer-events: none;
}

.gw-preview-dock[hidden] { display: none; }

/* Phones and tablets: the dock is a full-width strip under the header, so the
   page scrolls under a clean edge instead of a card half-covering a field. */
@media (max-width: 1023px) {
	.gw-preview-dock {
		left: 0;
		right: 0;
		top: var(--gw-header-offset);
		width: auto;
		grid-template-columns: calc(var(--bds-space-16) + var(--bds-space-2)) 1fr;
		align-items: center;
		gap: var(--bds-space-3);
		padding: var(--bds-space-2) max(var(--bds-gutter), env(safe-area-inset-right, 0px)) var(--bds-space-2) max(var(--bds-gutter), env(safe-area-inset-left, 0px));
		border-width: 0 0 1px;
		border-radius: 0;
		text-align: left;
	}

	.gw-preview-dock .gw-preview-dock__label { justify-self: start; text-align: left; }

	/* Fields scrolled into view (sticky bar, keyboard) land below the strip. */
	html:has(body.gw-dock-open) { scroll-padding-top: calc(var(--gw-header-offset) + var(--bds-space-24)); }
}
.gw-preview-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.gw-preview-dock__canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: var(--bds-radius-sm);
}

.gw-preview-dock__label {
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / var(--bds-text-label-sm-lh) var(--bds-font-body);
	text-align: center;
}

@media (min-width: 1024px) {
	.gw-preview-dock { display: none !important; }
}

/* One-choice attributes read as text; their select stays in the form, hidden. */
.gw-single-attr { color: var(--bds-on-surface); font-weight: 600; }
.variations select.gw-single-attr__select { display: none !important; }
.variations:not(:has(select:not(.gw-single-attr__select))) ~ .reset_variations,
.variations:not(:has(select:not(.gw-single-attr__select))) .reset_variations { display: none !important; }

/* ---------------------------------------------------------------------------
 * 7. Footer
 * ------------------------------------------------------------------------- */
.ecq-site-footer {
	margin-top: var(--bds-space-16);
	background: var(--bds-surface-container);
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
}

.ecq-footer-newsletter {
	background: var(--bds-inverse-surface);
	color: var(--bds-inverse-on-surface);
}

.ecq-footer-newsletter h2 { color: var(--bds-inverse-on-surface); }

.ecq-footer-newsletter input[type="email"] {
	border-color: var(--bds-inverse-on-surface) !important;
	border-radius: var(--bds-radius-button) !important;
	font-size: max(16px, var(--bds-text-body-md)) !important;
}

/* One focus ring, on the whole pill: none on the field inside it (it drew a second, offset ring). */
.ecq-footer-newsletter input[type="email"]:focus { outline: none !important; box-shadow: none !important; }

.ecq-footer-newsletter .wpforms-form:focus-within,
.ecq-newsletter-form:focus-within {
	border-color: var(--bds-inverse-on-surface) !important;
	box-shadow: 0 0 0 1px var(--bds-inverse-on-surface);
}

.ecq-footer-newsletter button,
.ecq-footer-newsletter [type="submit"] {
	min-width: var(--gw-tap) !important;
	min-height: var(--gw-tap) !important;
}

.ecq-footer-newsletter [type="submit"]:focus-visible { outline: 2px solid var(--bds-inverse-on-surface) !important; outline-offset: -4px; }

.ecq-footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bds-space-8);
	color: var(--bds-on-surface-variant);
	text-decoration: none;
}

.ecq-footer-menu a:hover { color: var(--bds-primary); text-decoration: underline; }

.ecq-footer-nav-heading,
.ecq-footer-brand { color: var(--bds-secondary); font-family: var(--bds-font-display); font-size: var(--bds-text-headline-md); }

/* ---------------------------------------------------------------------------
 * 8. Page frame
 * ------------------------------------------------------------------------- */
main.site-main.ecq-shop-main { padding-top: var(--bds-space-2); }

@media (min-width: 1024px) {
	.ecq-header-main { column-gap: var(--bds-space-8); }
	.ecq-menu { column-gap: var(--bds-space-6); }
}

/* ---------------------------------------------------------------------------
 * 9. Home
 * ------------------------------------------------------------------------- */
.gw-icon--heart { --gw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }

.gw-section { margin-block: var(--bds-space-12); }

@media (min-width: 1024px) {
	.gw-section { margin-block: var(--bds-space-16); }
}

.gw-eyebrow {
	margin: 0;
	color: var(--bds-on-primary-container);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / var(--bds-text-label-sm-lh) var(--bds-font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Hero: brand photo. Phones and tablets: copy above the 4:5 photo so the button is on the first screen.
   Desktop: copy over the clear left side of the 1920×800 photo (as in the approved mockup). */
.gw-hero {
	display: flex;
	flex-direction: column-reverse;
	background: var(--bds-surface);
}

.gw-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.gw-hero__media img { aspect-ratio: auto; height: 60vh; object-position: center 40%; }
}

.gw-hero__copy {
	display: grid;
	gap: var(--bds-space-3);
	justify-items: start;
	padding-block: var(--bds-space-6) var(--bds-space-5);
}

.gw-hero__title {
	margin: 0;
	color: var(--bds-secondary);
	font: var(--bds-text-display-lg-weight) var(--bds-text-display-lg) / var(--bds-text-display-lg-lh) var(--bds-font-display);
	letter-spacing: -0.01em;
}

.gw-hero__lede {
	margin: 0;
	color: var(--bds-on-surface);
	font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body);
}

.gw-hero__copy .gw-button { min-height: var(--gw-button-h); padding-inline: var(--bds-space-8); font-size: var(--bds-text-body-lg); }

@media (min-width: 1024px) {
	.gw-hero { position: relative; display: block; }
	.gw-hero__media img { aspect-ratio: 1920 / 800; max-height: 80vh; object-position: 70% center; }
	.gw-hero__copy {
		position: absolute;
		inset: 0;
		align-content: center;
		max-width: none;
		padding-block: 0;
	}
	.gw-hero__copy > * { max-width: 30rem; }
}

/* Shop by gift: a swipeable row on phones, a full row from tablet up. */
.gw-category-tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--bds-space-3)) / 3.4);
	gap: var(--bds-space-3);
	margin: 0;
	padding: 0 0 var(--bds-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gw-category-tiles::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.gw-category-tiles {
		grid-auto-flow: row;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		overflow: visible;
	}
}

.gw-category-tiles li { scroll-snap-align: start; }

.gw-category-tiles a {
	display: grid;
	gap: var(--bds-space-2);
	justify-items: center;
	color: var(--bds-on-surface);
	text-align: center;
	text-decoration: none;
}

.gw-category-tiles__image {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--bds-radius-full);
	background: var(--bds-surface-container);
}

.gw-category-tiles__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--bds-duration-short) var(--bds-ease-standard);
}

@media (hover: hover) {
	.gw-category-tiles a:hover img { transform: scale(1.05); }
}

.gw-category-tiles__label { font: 500 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body); }

/* Promise strip */
.gw-promise-strip {
	border-block: 1px solid var(--bds-outline-variant);
	background: var(--bds-surface-container-lowest);
}

.gw-promise-strip ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bds-space-4);
	margin-block: 0;
	padding: var(--bds-space-6) 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.gw-promise-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gw-promise-strip li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--bds-space-3);
	align-items: center;
}

.gw-promise-strip .gw-icon { grid-row: span 2; width: var(--bds-space-6); height: var(--bds-space-6); color: var(--bds-primary); }
.gw-promise-strip strong { color: var(--bds-secondary); font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body); }
.gw-promise-strip li > span:last-child { color: var(--bds-on-surface-variant); font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body); }

/* Rails: 4 cards on phones (2×2), 8 from tablet up. */
@media (max-width: 767px) {
	.gw-rail ul.products li.product:nth-child(n + 5) { display: none; }
}

/* Our promise */
.gw-story__card {
	display: grid;
	gap: var(--bds-space-4);
	justify-items: start;
	max-width: 48rem;
	margin-inline: auto;
	padding: var(--bds-space-8) var(--bds-space-6);
	border-radius: var(--bds-radius-lg);
	background: var(--bds-primary-container);
	text-align: left;
}

.gw-story__card h2 { margin: 0; font-size: var(--bds-text-headline-lg); line-height: var(--bds-text-headline-lg-lh); }
.gw-story__card p { margin: 0; font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body); }

@media (min-width: 1024px) {
	.ecq-menu a { white-space: nowrap; }
	.ecq-header-search { width: clamp(11rem, 20vw, 20rem); }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.ecq-header-main { column-gap: var(--bds-space-4); }
	.ecq-menu { column-gap: var(--bds-space-4); }
	/* Track order stays in the footer at this width so the gift types fit on one line. */
	.ecq-menu > li:last-child { display: none; }
}

/* ---------------------------------------------------------------------------
 * 10. Shop / category pages
 * ------------------------------------------------------------------------- */
.gw-chips { margin: 0 0 var(--bds-space-4); }

.gw-chips ul {
	display: flex;
	gap: var(--bds-space-2);
	margin: 0;
	padding: 0 0 var(--bds-space-2);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.gw-chips ul::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
	.gw-chips ul { flex-wrap: wrap; overflow: visible; }
}

.gw-chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--gw-tap);
	padding: 0 var(--bds-space-4);
	border: 1px solid var(--bds-outline-variant);
	border-radius: var(--bds-radius-full);
	background: var(--bds-surface-container-lowest);
	color: var(--bds-on-surface);
	font: 500 var(--bds-text-label-lg) / 1 var(--bds-font-body);
	text-decoration: none;
	white-space: nowrap;
}

.gw-chip:hover { background: var(--bds-surface-hover); }

.gw-chip.is-selected {
	border-color: var(--bds-secondary);
	background: var(--bds-secondary-container);
	color: var(--bds-on-secondary-container);
	box-shadow: inset 0 0 0 1px var(--bds-secondary);
}

.woocommerce .woocommerce-result-count {
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-sm-weight) var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
}

.woocommerce .woocommerce-ordering select { min-height: var(--gw-tap); border-color: var(--bds-outline-variant); border-radius: var(--bds-radius-button); }

/* ---------------------------------------------------------------------------
 * 11. Cart (block cart): readable personalization, a real-size preview.
 * ------------------------------------------------------------------------- */
/* Block cart sets the image column width on the table cell; widen the cell and the image together. */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	width: calc(var(--bds-space-20) + var(--bds-space-4));
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	width: 100%;
	max-width: none;
	border-radius: var(--bds-radius-card);
}

.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: calc(var(--bds-space-20) + var(--bds-space-4)) 1fr;
}

.wc-block-components-product-details,
.wc-block-components-product-details__name,
.wc-block-components-product-details__value {
	color: var(--bds-on-surface-variant);
	font-size: var(--bds-text-body-sm) !important;
	line-height: var(--bds-text-body-sm-lh);
}

.wc-block-cart-item__image a { display: block; }
.wc-block-components-product-name { display: inline-block; min-height: var(--bds-space-6); }

.wc-block-components-product-details__value a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bds-space-6);
	color: var(--bds-primary);
	font-weight: 600;
}

.wc-block-components-totals-coupon input,
.wc-block-components-text-input input { font-size: max(16px, var(--bds-text-body-md)) !important; }

.ecq-cart-progress-bar { height: var(--bds-space-2); border-radius: var(--bds-radius-full); background: var(--bds-surface-container); overflow: hidden; }
.ecq-cart-progress-bar span { display: block; height: 100%; background: var(--bds-primary); }

/* ---------------------------------------------------------------------------
 * 12. Hit areas: ≥ 24px everywhere, 44px for the main controls (WCAG 2.5.8).
 * ------------------------------------------------------------------------- */
.ecq-header-search input[type="search"] { font-size: max(16px, var(--bds-text-body-md)); }

.ecq-wordmark,
.ecq-logo-link { display: inline-flex; align-items: center; min-height: var(--gw-tap); }

.woocommerce .woocommerce-breadcrumb a { display: inline-block; padding-block: var(--bds-space-1); }

.ecq-continue-shopping,
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--gw-tap);
}

.wc-block-components-address-form__address_2-toggle,
.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	min-height: var(--bds-space-6);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-size: max(16px, var(--bds-text-body-md)); }

/* Footer: old rules set 75%-white text; the footer is a light panel now. */
.ecq-footer-brand-col p,
.ecq-footer-bottom,
.ecq-footer-bottom-links { color: var(--bds-on-surface-variant); }

/* Reserve the gallery's square + thumbnail row before Customily swaps in its canvas,
   so the title and buy box below do not jump while the page loads. */
@media (max-width: 767px) {
	.woocommerce div.product div.images { min-height: calc(100vw - 2 * var(--bds-gutter) + (100vw - 2 * var(--bds-gutter)) / 5 + var(--bds-space-2)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce div.product div.images { min-height: calc(60vh + 60vh / 5 + var(--bds-space-2)); }
}

/* Brand logo (colors live inside the SVG). */
.gw-logo { display: inline-flex; align-items: center; min-height: var(--gw-tap); }
.gw-logo img { display: block; width: auto; height: var(--bds-space-8); }

@media (min-width: 1024px) {
	.gw-logo--header img { height: var(--bds-space-10); }
}

.gw-logo--footer img { height: var(--bds-space-10); }

/* Lifestyle scene tiles (trend / recipient). */
.gw-scenes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bds-space-4) var(--bds-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.gw-scenes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bds-grid-gap); }
}

@media (min-width: 1024px) {
	.gw-scenes--recipient .gw-scenes__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Three trend tiles sit in one row on phones too, as a swipeable strip. */
@media (max-width: 767px) {
	.gw-scenes__grid[data-count="3"] {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 70%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.gw-scenes__grid[data-count="3"] li { scroll-snap-align: start; }
}

.gw-scenes__grid a {
	display: grid;
	gap: var(--bds-space-2);
	color: var(--bds-on-surface);
	text-decoration: none;
}

.gw-scenes__grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--bds-radius-card);
	background: var(--bds-surface-container);
	transition: transform var(--bds-duration-short) var(--bds-ease-standard);
}

.gw-scenes__grid a { overflow: hidden; }

@media (hover: hover) {
	.gw-scenes__grid a:hover img { transform: scale(1.05); }
}

.gw-scenes__label { font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body); }

/* Christmas banner: photo with copy in its clear left third. */
.gw-banner__inner {
	position: relative;
	overflow: hidden;
	border-radius: var(--bds-radius-lg);
	background: var(--bds-surface-container);
}

.gw-banner__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 640;
	object-fit: cover;
}

.gw-banner__copy {
	display: grid;
	gap: var(--bds-space-3);
	justify-items: start;
	padding: var(--bds-space-6);
	background: var(--bds-surface-container-lowest);
}

.gw-banner__copy h2 { margin: 0; font-size: var(--bds-text-headline-lg); line-height: var(--bds-text-headline-lg-lh); }
.gw-banner__copy p { margin: 0; font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body); }
.gw-banner__copy strong { color: var(--bds-secondary); }
.gw-banner__copy .gw-eyebrow { color: var(--bds-primary); }

@media (min-width: 1024px) {
	.gw-banner__copy {
		position: absolute;
		inset: 0 auto 0 0;
		width: 34%;
		align-content: center;
		background: transparent;
	}
}

/* Our promise with the craft photo. */
.gw-story__card {
	grid-template-columns: 1fr;
	max-width: none;
	padding: 0;
	overflow: hidden;
	align-items: center;
}

@media (min-width: 768px) {
	.gw-story__card { grid-template-columns: 2fr 3fr; }
}

.gw-story__image { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gw-story__text { display: grid; gap: var(--bds-space-4); justify-items: start; padding: var(--bds-space-8) var(--bds-space-6); }

/* ---------------------------------------------------------------------------
 * Empty cart: small calm icon, one primary action, gift categories.
 * ------------------------------------------------------------------------- */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: var(--bds-space-6) 0 0;
	color: var(--bds-on-surface);
	font: var(--bds-text-headline-lg-weight) var(--bds-text-headline-lg) / var(--bds-text-headline-lg-lh) var(--bds-font-display);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: var(--bds-space-12);
	height: var(--bds-space-12);
	margin: 0 auto var(--bds-space-4);
	background-color: var(--bds-on-primary-container);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l-1 12.5h-11z'/%3E%3Cpath d='M9 7.5V6.5a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l-1 12.5h-11z'/%3E%3Cpath d='M9 7.5V6.5a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.gw-empty-cart {
	display: grid;
	justify-items: center;
	gap: var(--bds-space-4);
	margin: var(--bds-space-2) 0 0;
	text-align: center;
}

.gw-empty-cart__lead {
	margin: 0;
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body);
}

.gw-empty-cart__cta { padding-inline: var(--bds-space-12); }

.gw-empty-cart__heading {
	margin: var(--bds-space-10) 0 var(--bds-space-2);
	font: var(--bds-text-headline-md-weight) var(--bds-text-headline-md) / var(--bds-text-headline-md-lh) var(--bds-font-display);
}

.gw-empty-cart .gw-category-tiles {
	justify-self: stretch;
	text-align: center;
}

/* Checkout benefits: two or three cards share the row evenly. */
.ecq-commerce-assurance { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Cart totals, wide screens: Proceed to Checkout is the first action and the
   express wallets follow it. Phones keep WooCommerce's sticky button. */
@media (min-width: 782px) {
	.wp-block-woocommerce-cart-totals-block { display: flex; flex-direction: column; }
	.wp-block-woocommerce-cart-totals-block .wc-block-cart__payment-options { display: flex; flex-direction: column; order: 1; }
	.wc-block-cart__payment-options .wc-block-components-express-payment--cart { width: 100%; }
	.wc-block-cart__payment-options .wc-block-components-express-payment-continue-rule--cart { order: -1; margin-block: var(--bds-space-2) var(--bds-space-4); }
}

/* ---------------------------------------------------------------------------
 * Customily personalizer pickers on the design system. Customily's own click
 * handling stays: only layout, colour and shape change. Image and colour
 * swatches are sized by theme.js (fluid, square); the selected one gets the
 * brand ring (theme.css) plus a check badge.
 * ------------------------------------------------------------------------- */
#customily-options .customily_option > label,
#customily-options .option_name { font-weight: 500; }

#customily-options .customily_option { display: block !important; }

#cl_optionsapp .swatch-container:not(:has(.text-swatch)) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--bds-space-2);
	margin-top: var(--bds-space-2);
}

#cl_optionsapp .swatch-container .customily-swatch {
	position: relative;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}

#cl_optionsapp .swatch-container .customily-swatch:not(.text-swatch) label {
	display: block;
	border-width: 1px !important;
	border-style: solid !important;
	overflow: hidden;
	background: var(--bds-surface-container-lowest);
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--bds-outline-variant);
	transition: box-shadow var(--bds-duration-short) var(--bds-ease-standard);
}

#cl_optionsapp .swatch-container label .csh-image-container { position: relative; overflow: hidden; border-radius: var(--bds-radius-md) !important; }
#cl_optionsapp .swatch-container label .csh-image-container img { object-fit: contain; border-radius: var(--bds-radius-md) !important; }

@media (hover: hover) {
	#cl_optionsapp .swatch-container .customily-swatch:not(.text-swatch) label:hover { box-shadow: 0 0 0 1px var(--bds-on-surface-variant); }
}

/* Selected: brand ring (theme.css) and a check badge in the corner. */
#cl_optionsapp .swatch-container .customily-swatch:not(.text-swatch) input:checked + label,
#cl_optionsapp .swatch-container .customily-swatch:not(.text-swatch) label.label-focus { box-shadow: 0 0 0 2px var(--bds-primary); }

#cl_optionsapp .swatch-container .customily-swatch input:checked + label .csh-image-container::after { opacity: 1; }

#cl_optionsapp .swatch-container .customily-swatch:not(.text-swatch):has(input:checked)::after {
	content: '';
	position: absolute;
	top: var(--bds-space-1);
	right: var(--bds-space-1);
	z-index: 1;
	width: 20px;
	height: 20px;
	border-radius: var(--bds-radius-full);
	background: var(--bds-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
	pointer-events: none;
}

/* Keyboard focus on the option group (Customily moves selection with arrow keys). */
#cl_optionsapp .swatch-container:focus-visible { outline: 2px solid var(--bds-primary); outline-offset: var(--bds-space-1); border-radius: var(--bds-radius-md); }
#cl_optionsapp .swatch .label-focus { border-color: transparent !important; }

/* Text swatches: chips. */
#cl_optionsapp .swatch-container:has(.text-swatch) { display: flex !important; flex-wrap: wrap; gap: var(--bds-space-2); margin-top: var(--bds-space-2); }

#cl_optionsapp .customily-swatch.text-swatch label {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--gw-tap) !important;
	min-height: var(--gw-tap) !important;
	padding: var(--bds-space-2) var(--bds-space-4) !important;
	border: 1px solid var(--bds-outline-variant) !important;
	border-radius: var(--bds-radius-button) !important;
	background: var(--bds-surface-container-lowest) !important;
	cursor: pointer;
}

#cl_optionsapp .customily-swatch.text-swatch .label-text {
	color: var(--bds-on-surface) !important;
	font: 500 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body) !important;
}

#cl_optionsapp .customily-swatch.text-swatch input:checked + label {
	border: 2px solid var(--bds-primary) !important;
	background: var(--bds-primary-container) !important;
}

#cl_optionsapp .customily-swatch.text-swatch input:checked + label .label-text { color: var(--bds-primary) !important; font-weight: 600 !important; }

/* Checkbox and photo upload. */
#cl_optionsapp .customily_option input[type="checkbox"] {
	width: 22px; min-width: 22px; max-width: 22px;
	height: 22px; min-height: 22px; max-height: 22px;
	accent-color: var(--bds-primary);
}

#cl_optionsapp .customily-download-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bds-space-2);
	min-height: var(--gw-tap);
	padding: var(--bds-space-3) var(--bds-space-6);
	border: 1px solid var(--bds-primary) !important;
	border-radius: var(--bds-radius-button) !important;
	background: var(--bds-surface) !important;
	color: var(--bds-primary) !important;
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body) !important;
}

#cl_optionsapp .customily-download-button:hover { background: var(--bds-surface-hover) !important; }

/* One selection ring: the label's outer ring. The inner overlay ring from theme.css is not needed. */
#cl_optionsapp .swatch-container label .csh-image-container::after { display: none; }

/* Customily's value tooltips: on touch screens they stick after a tap and cover the next option's
   label (the check badge already marks the choice), so phones and tablets don't show them. */
@media (hover: none) {
	.tippy-popper { display: none !important; }
}

.tippy-popper .tippy-tooltip.dark-theme {
	background: var(--bds-inverse-surface);
	color: var(--bds-inverse-on-surface);
	border-radius: var(--bds-radius-sm);
	font: 500 var(--bds-text-body-sm) / var(--bds-text-body-sm-lh) var(--bds-font-body);
}

#customily-options #cl_optionsapp .customily_option { margin-bottom: var(--bds-space-5) !important; }

/* ---------------------------------------------------------------------------
 * Design-system sweep fixes (2026-10-24).
 * ------------------------------------------------------------------------- */
/* Footer column headings: same display style as "Join our email list", not uppercase. */
.ecq-footer-nav-heading {
	margin-bottom: var(--bds-space-3);
	font-weight: var(--bds-text-headline-md-weight);
	line-height: var(--bds-text-headline-md-lh);
	letter-spacing: 0;
	text-transform: none;
}

/* Touch screens: no hover circle left behind on the menu button after a tap. */
@media (hover: none) {
	.ecq-menu-toggle:hover { background: transparent; }
}

/* 404 */
.ecq-empty-state h1 { font: var(--bds-text-headline-lg-weight) var(--bds-text-headline-lg) / var(--bds-text-headline-lg-lh) var(--bds-font-display); color: var(--bds-secondary); }
.ecq-empty-state p { color: var(--bds-on-surface-variant); font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body); }

/* Track order page */
.ecq-tracking-hero p {
	margin: 0 0 var(--bds-space-2);
	color: var(--bds-on-primary-container);
	font: var(--bds-text-label-sm-weight) var(--bds-text-label-sm) / var(--bds-text-label-sm-lh) var(--bds-font-body);
	letter-spacing: 0.08em;
}

.ecq-tracking-hero h1 {
	display: block;
	margin: 0 0 var(--bds-space-2);
	color: var(--bds-secondary);
	font: var(--bds-text-display-lg-weight) var(--bds-text-display-lg) / var(--bds-text-display-lg-lh) var(--bds-font-display);
}

.ecq-tracking-hero span {
	color: var(--bds-on-surface-variant);
	font: var(--bds-text-body-lg-weight) var(--bds-text-body-lg) / var(--bds-text-body-lg-lh) var(--bds-font-body);
}

.ecq-3pt-form,
.ecq-tracking-help {
	border: 1px solid var(--bds-outline-variant);
	border-radius: var(--bds-radius-card);
	background: var(--bds-surface-container-lowest);
	box-shadow: none;
}

.ecq-3pt-form { padding: var(--bds-space-8) var(--bds-space-6); }

.ecq-3pt-form-label {
	color: var(--bds-on-surface);
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
	letter-spacing: 0;
	text-transform: none;
}

.ecq-3pt-input-row { gap: var(--bds-space-2); flex-wrap: wrap; }

.ecq-3pt-input {
	flex: 1 1 14rem;
	height: var(--gw-control-h);
	padding: 0 var(--bds-space-4);
	border: 1px solid var(--bds-outline);
	border-radius: var(--bds-radius-input);
	background: var(--bds-surface-container-lowest);
	font: var(--bds-text-body-md-weight) max(16px, var(--bds-text-body-md)) / 1.25 var(--bds-font-body);
}

.ecq-3pt-input:focus { border-color: var(--bds-primary); outline: 2px solid var(--bds-primary); outline-offset: 0; }

.ecq-3pt-btn {
	justify-content: center;
	min-height: var(--gw-tap);
	height: auto;
	padding: var(--bds-space-3) var(--bds-space-8);
	border-radius: var(--bds-radius-button);
	background-color: var(--bds-primary);
	color: var(--bds-on-primary);
	font: 600 var(--bds-text-label-lg) / var(--bds-text-label-lg-lh) var(--bds-font-body);
	letter-spacing: 0;
}

.ecq-3pt-btn:hover { background-color: var(--bds-primary-hover); }

.ecq-tracking-help { padding: var(--bds-space-6); }
.ecq-tracking-help h2 { color: var(--bds-secondary); font: var(--bds-text-headline-md-weight) var(--bds-text-headline-md) / var(--bds-text-headline-md-lh) var(--bds-font-display); }
.ecq-tracking-help p { color: var(--bds-on-surface-variant); font: var(--bds-text-body-md-weight) var(--bds-text-body-md) / var(--bds-text-body-md-lh) var(--bds-font-body); }

/* Express wallets that can't show on this device (Stripe leaves an 8px placeholder for
   Apple Pay, Amazon Pay or Link) keep no empty 48px row; available wallets size themselves. */
.wc-block-components-express-payment__event-buttons > li:has(.StripeElement iframe[style*="height: 8px"]) { display: none; }
.wc-block-components-express-payment__event-buttons > li[id^="express-payment-method-express_checkout_element_"],
.wc-block-components-express-payment__event-buttons > li[id^="express-payment-method-express_checkout_element_"] > div { min-height: 0 !important; }

/* Policy tables fit a phone: tighter cell padding so every column shows. */
@media (max-width: 767px) {
	.ecq-page-content table th,
	.ecq-page-content table td,
	.page-id-16864 .ecq-page-content table th,
	.page-id-16864 .ecq-page-content table td { padding: var(--bds-space-3) var(--bds-space-2); }
}

/* Empty cart: the footer's own top margin is the only space below the tiles. */
.ecq-commerce-page:has(.gw-empty-cart) { padding-bottom: 0; }

/* Phones: Proceed to Checkout is pinned to the bottom of the screen, so the "OR" under the
   wallet buttons would point at nothing. */
@media (max-width: 781px) {
	.wc-block-components-express-payment-continue-rule--cart { display: none; }
}

/* Narrow carts: wallet buttons and Proceed to Checkout stack with a gap (no "OR" between them here). */
@media (max-width: 781px) {
	.wp-block-woocommerce-cart-totals-block .wc-block-cart__payment-options { margin-bottom: var(--bds-space-3); }
}

/* Product gallery layout jump (CLS 0.119): while FlexSlider starts, its slide strip is 10x the gallery
   width for one frame and the first photo stretches to fill it (3880 px tall on a phone), pushing the
   product summary off screen. Each slide may never be wider than the gallery itself. */
.woocommerce-product-gallery { container-type: inline-size; }
.woocommerce-product-gallery .woocommerce-product-gallery__image { max-width: 100cqw; }

/* Photo first: the product photo over Customily's preview until the shopper uses an option (giftwise.js initPhotoFirst).
   Customily's loading spinner stays hidden until then; it shows again if they start before Customily is ready. */
body.gw-photo-first .loadingoverlay { display: none !important; }

.woocommerce-product-gallery__image.gw-cover-frame { position: relative; }

.gw-preview-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: var(--bds-surface-container-lowest);
	pointer-events: none;
}