/*
Theme Name: Ohla Patisserie
Theme URI: https://ohlapatisserie.local
Author: Ohla Patisserie
Description: Custom WooCommerce-ready theme for Ohla Patisserie, a handcrafted cake and dessert shop. Built to the brand's brown/greyscale palette and elegant serif logo mark.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ohla-patisserie
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root {
	--color-surface: #e6e6e6;   /* light grey - cards, dividers, subtle fills */
	--color-bg: #f2f2f4;        /* background light grey - page background */
	--color-ink: #121214;       /* black font colour */
	--color-brand: #6c432c;     /* brown - primary brand / accent */
	--color-brand-dark: #4f2f1f;
	--color-white: #ffffff;

	--font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--font-body: "Jost", "Segoe UI", Arial, sans-serif;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;

	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 999px;

	--container-w: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	color: var(--color-ink);
}

h1 { font-size: clamp(2.25rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 500; }
h3 { font-size: 1.4rem; }

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

button, input, select, textarea { font-family: var(--font-body); font-size: 1rem; }

.container {
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 0 var(--space-3);
}

.section { padding: var(--space-5) 0; }
.section--alt { background: var(--color-surface); }

.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.95em 2.1em;
	border-radius: var(--radius-lg);
	border: 1.5px solid var(--color-brand);
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
	color: var(--color-white);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(108, 67, 44, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
}
/* Soft sheen that sweeps across on hover — pure decoration, sits behind
   the label and never intercepts clicks. */
.btn::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-18deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.btn:hover::after { left: 115%; }
.btn:hover {
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(108, 67, 44, 0.32);
}
.btn:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(108, 67, 44, 0.26); }
.btn:focus-visible { outline: 3px solid rgba(108, 67, 44, 0.35); outline-offset: 3px; }

.btn--outline {
	background: transparent;
	color: var(--color-brand);
	box-shadow: none;
}
.btn--outline:hover {
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
	color: var(--color-white);
	box-shadow: 0 10px 22px rgba(108, 67, 44, 0.28);
}

.btn--full { width: 100%; }

/* ==========================================================================
   Announcement bar — real cutoff state, computed by
   ohla_cutoff_banner_message(), never a static/stale claim.
   ========================================================================== */
.announcement-bar {
	background: var(--color-ink);
	color: var(--color-white);
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.55em var(--space-2);
}
.announcement-bar i { color: var(--color-brand); margin-right: 0.5em; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}

.site-logo { display: flex; align-items: center; gap: 0.6em; max-width: 100%; }
.site-logo img { display: block; max-height: 56px; max-width: 100%; width: auto; height: auto; }
.site-logo__text {
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	color: var(--color-ink);
}

.primary-nav ul { display: flex; align-items: center; gap: var(--space-3); }
.primary-nav a {
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3em 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item a { color: var(--color-brand); border-color: var(--color-brand); }

/* Category dropdown (built in ohla_add_menu_category_dropdown). Opens on
   hover and on keyboard focus, so it's reachable by tabbing too. */
.primary-nav li { position: relative; }
.primary-nav .menu-item-has-children > a::after {
	content: "\f078"; /* chevron-down */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.6em;
	margin-left: 0.5em;
	vertical-align: middle;
	opacity: 0.7;
}
.primary-nav .sub-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 200px;
	margin: 0;
	padding: 0.45em 0;
	gap: 0;
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 30px rgba(18, 18, 20, 0.13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu li { display: block; }
.primary-nav .sub-menu a {
	display: block;
	padding: 0.6em 1.2em;
	font-size: 0.82rem;
	text-transform: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
	border: 0;
}
.primary-nav .sub-menu a:hover { background: var(--color-bg); color: var(--color-brand); border: 0; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9rem;
}
.header-actions .cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.3em;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-white);
	font-size: 0.7rem;
}

.nav-toggle { display: none; }

.nav-toggle__icon { position: relative; width: 20px; height: 2px; background: currentColor; }
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
	.primary-nav { display: none; }
	.nav-toggle { display: inline-flex; width: 44px; height: 44px; padding: 0; }

	.primary-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-surface);
		padding: var(--space-2) var(--space-3);
		box-shadow: 0 12px 24px rgba(18, 18, 20, 0.08);
	}
	.primary-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
	/* No hover on touch — the category submenu just sits open, indented,
	   inside the drawer instead of floating. */
	.primary-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0.4em 0 0 var(--space-2);
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.primary-nav .sub-menu a { padding: 0.35em 0; }
	.primary-nav .sub-menu a:hover { background: transparent; }
	.primary-nav .menu-item-has-children > a::after { content: none; }
}

@media (max-width: 480px) {
	.site-logo__text { font-size: 1.15rem; white-space: nowrap; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding: var(--space-5) 0;
	background: var(--color-surface);
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-4);
	align-items: center;
}
.hero__copy p { max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.hero__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg);
}
.hero__media img,
.hero__media .widget,
.hero__media figure {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.hero__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
	font-family: var(--font-display);
	font-size: 1.1rem;
	text-align: center;
	border: 1px dashed var(--color-brand);
	padding: var(--space-3);
}

@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; }
}

/* Homepage hero only: the photo becomes a full-bleed background behind
   the copy (not a side-by-side box like the about-teaser section, which
   keeps the default .hero__media/.hero__inner rules above) — a dark
   scrim keeps the existing white-on-dark-friendly text readable over any
   photo. Falls back to a warm brand-colored gradient (not a dashed
   placeholder box) when no photo is set yet, so the hero still feels
   finished either way. Text content itself is unchanged — only the
   container it sits in. */
.hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
}
.hero > .hero__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
	z-index: 0;
}
/* Hero photo slider — slides stack on top of each other and cross-fade;
   only the active one is opaque (assets/js/hero-slider.js). */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.hero__slide { transition: none; }
}

.hero .hero__media--empty {
	border: none;
	color: rgba(255, 255, 255, 0.55);
	background: transparent;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(18, 18, 20, 0.68) 0%, rgba(18, 18, 20, 0.38) 45%, rgba(18, 18, 20, 0.08) 75%);
}
.hero .hero__inner {
	position: relative;
	z-index: 2;
	display: block;
}
.hero .hero__copy { max-width: 540px; color: var(--color-white); }
.hero .hero__copy .eyebrow { color: var(--color-white); }
.hero .hero__copy h1,
.hero .hero__copy h2 { color: var(--color-white); }
.hero .hero__copy p { color: var(--color-white); opacity: 0.92; }
.hero .btn--outline { border-color: var(--color-white); color: var(--color-white); }
.hero .btn--outline:hover { background: var(--color-white); color: var(--color-brand); }

@media (max-width: 860px) {
	.hero { min-height: 460px; }
}

/* ==========================================================================
   Homepage product picker: badge-style tabs (All Products / Best Seller
   / New Arrivals) — all three panels are rendered server-side, JS just
   toggles which one shows (see assets/js/homepage-tabs.js).
   ========================================================================== */
.product-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0;
}
.product-tabs__btn {
	font: inherit;
	padding: 0.55em 1.3em;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-brand);
	background: transparent;
	color: var(--color-brand);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.product-tabs__btn:hover { background: var(--color-surface); }
.product-tabs__btn.is-active { background: var(--color-brand); color: var(--color-white); }
.product-tab-panel { display: none; }
.product-tab-panel.is-active { display: block; }

/* ==========================================================================
   Why Choose Us
   ========================================================================== */
.why-choose__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	text-align: center;
}
.why-choose__item i {
	font-size: 1.8rem;
	color: var(--color-brand);
	margin-bottom: var(--space-2);
}
.why-choose__item h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.why-choose__item p { color: var(--color-ink); opacity: 0.75; max-width: 32ch; margin: 0 auto; }

@media (max-width: 860px) {
	.why-choose__grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ==========================================================================
   Product grid / cards
   ========================================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-3);
}

.product-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-align: center;
	padding-bottom: var(--space-2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(18, 18, 20, 0.08); }

.product-card__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	width: 90%;
	margin: var(--space-2) auto var(--space-1);
	overflow: hidden;
	background: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
	font-size: 0.8rem;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.product-card:hover .product-card__media img { transform: scale(1.08); }

.product-card h3 { font-size: 1.15rem; margin-bottom: 0.2em; }
.product-card__price { color: var(--color-brand); font-weight: 600; margin-bottom: 0.6em; }
.product-card__allergens { font-size: 0.78rem; color: var(--color-ink); opacity: 0.6; padding: 0 var(--space-2); }

/* ==========================================================================
   Menu page: category tabs + allergen filter
   ========================================================================== */
.menu-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--space-4);
	align-items: start;
}

.menu-filters {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	position: sticky;
	top: 96px;
}
.menu-filters h4 { font-family: var(--font-body); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.menu-filters__count { margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-brand); font-weight: 600; }
#ohla-menu-results { transition: opacity 0.15s ease; }
/* Allergen filter reads as a row of toggle chips rather than a plain
   checkbox list — the whole chip is the hit target, and a ticked chip
   fills with the brand colour so the active filter is obvious. */
.menu-filters label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0 0.4em 0.55em 0;
	padding: 0.5em 0.95em;
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.menu-filters label:hover { border-color: var(--color-brand); transform: translateY(-1px); }
.menu-filters label:has(input:checked) {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
}
.menu-filters label:has(input:checked) input[type="checkbox"] {
	background: var(--color-white);
	border-color: var(--color-white);
}
.menu-filters label:has(input:checked) input[type="checkbox"]::before { box-shadow: inset 1em 1em var(--color-brand); }

.category-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); flex-wrap: wrap; }
.category-tabs a {
	padding: 0.5em 1.2em;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-surface);
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.category-tabs a.is-active,
.category-tabs a:hover { background: var(--color-brand); color: var(--color-white); border-color: var(--color-brand); }

@media (max-width: 860px) {
	.menu-layout { grid-template-columns: 1fr; }
	.menu-filters { position: static; }
}

/* ==========================================================================
   Single product
   ========================================================================== */
.woocommerce-breadcrumb {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	color: var(--color-ink);
	opacity: 0.6;
	margin-bottom: var(--space-3);
}
.woocommerce-breadcrumb a { color: inherit; }
.woocommerce-breadcrumb a:hover { color: var(--color-brand); }

.product-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "gallery summary";
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.product-detail__gallery-main {
	grid-area: gallery;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
}
.product-detail__summary { grid-area: summary; }
.product-detail__tabs { margin-top: var(--space-3); }
/* WooCommerce's legacy classic-layout CSS floats/shrinks .images to
   48% width, assuming it sits next to a floated summary column — undo
   that so the gallery fills this grid cell instead. Height is left
   natural (not forced to a square) so the flexslider viewport keeps
   the photo's real proportions and the thumbnail strip below it has
   room instead of being clipped off. */
.product-detail__gallery-main .images,
.product-detail__gallery-main .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
}
.product-detail__gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	font-size: 0.85rem;
}
/* Per-product badges (Best Seller / New Arrival) — outlined rather than
   filled so they stand out from the plain shop-wide pills. */
.meta-pill--accent {
	background: var(--color-white);
	color: var(--color-brand);
	border: 1.5px solid var(--color-brand);
	font-weight: 600;
}
.meta-pill--accent i { color: var(--color-brand); }

.product-detail__price { font-size: 1.4rem; color: var(--color-brand); font-weight: 600; margin: var(--space-1) 0; }

.qty-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.qty-input {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.qty-input button { border: 0; background: var(--color-surface); width: 2.2em; height: 2.2em; cursor: pointer; }
.qty-input input { width: 3em; text-align: center; border: 0; background: transparent; }

.accordion-item { border-top: 1px solid var(--color-surface); }
.accordion-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
	content: "\25BE"; /* ▾ */
	flex: none;
	margin-left: auto;
	color: var(--color-brand);
	font-size: 0.9em;
	line-height: 1;
}
.accordion-item[open] summary::after { content: "\25B4"; } /* ▴ */
.accordion-item p { padding-bottom: var(--space-2); }

.product-detail__tabs .accordion-item summary { font-family: var(--font-display); font-size: 1.25rem; }
.product-detail__tabs .accordion-item p,
.product-detail__tabs .accordion-item div { max-width: 65ch; }

@media (max-width: 860px) {
	.product-detail {
		grid-template-columns: 1fr;
		grid-template-areas: "gallery" "summary";
	}
}

/* ==========================================================================
   FAQ / accordion page
   ========================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list .accordion-item summary { font-family: var(--font-display); font-size: 1.15rem; }

/* ==========================================================================
   Delivery / checkout extras
   ========================================================================== */
.delivery-box {
	border: 1px dashed var(--color-brand);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	background: var(--color-surface);
}
.delivery-box h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.delivery-box__map {
	margin-top: var(--space-2);
	aspect-ratio: 16 / 7;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
	font-size: 0.85rem;
	text-align: center;
	border: 1px dashed var(--color-brand);
}
.delivery-box__fee { display: flex; justify-content: space-between; margin-top: var(--space-2); font-weight: 600; }

.fulfillment-options { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
/* Each choice is a selectable card (checkout's Pickup/Delivery and time
   sessions, plus the product-page extras) — bigger hit target, and the
   chosen one is unmistakable. */
.fulfillment-option {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex: 1 1 auto;
	padding: 0.85em 1.1em;
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fulfillment-option:hover { border-color: var(--color-brand); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(18, 18, 20, 0.07); }
.fulfillment-option:has(input:checked) {
	border-color: var(--color-brand);
	border-width: 2px;
	background: var(--color-bg);
	padding: calc(0.85em - 0.5px) calc(1.1em - 0.5px);
}
.fulfillment-option i { color: var(--color-brand); }
#ohla-delivery-panel { margin-top: var(--space-2); }

/* ==========================================================================
   Product page: celebration message / candle & knife set opt-ins
   ========================================================================== */
.product-extras { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-1); }

/* ==========================================================================
   Homepage: Best Seller / Whole Cake banner photos
   ========================================================================== */
.section-banner-photo {
	aspect-ratio: 21 / 6;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-3);
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
}
.section-banner-photo--empty { border: 1px dashed var(--color-brand); }
.section-banner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pickup needs no address — JS adds .ohla-fulfillment-pickup to the form.
   !important because WooCommerce's address-i18n.js calls jQuery .show()
   on these fields (inline display:block) on load and on country change. */
.ohla-fulfillment-pickup #billing_company_field,
.ohla-fulfillment-pickup #billing_country_field,
.ohla-fulfillment-pickup #billing_address_1_field,
.ohla-fulfillment-pickup #billing_address_2_field,
.ohla-fulfillment-pickup #billing_city_field,
.ohla-fulfillment-pickup #billing_state_field,
.ohla-fulfillment-pickup #billing_postcode_field { display: none !important; }
#ohla-delivery-map { width: 100%; }
#ohla-delivery-status { font-size: 0.85rem; color: var(--color-brand); min-height: 1.2em; }
.ohla-search-results {
	display: none;
	position: relative;
	z-index: 5;
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	max-height: 220px;
	overflow-y: auto;
}
.ohla-search-result { padding: 0.6em 0.8em; font-size: 0.85rem; cursor: pointer; border-bottom: 1px solid var(--color-surface); }
.ohla-search-result:last-child { border-bottom: none; }
.ohla-search-result:hover { background: var(--color-bg); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-info li { margin-bottom: var(--space-2); }
.contact-info .label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand); }

.form-field { margin-bottom: var(--space-2); }
.form-field label { display: block; margin-bottom: 0.35em; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; }

/* ==========================================================================
   Form controls — shared by the contact form, the menu filter, the
   product-page extras and the WooCommerce checkout, so every input on
   the site looks like it belongs to the same shop.
   ========================================================================== */
.form-field input,
.form-field textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-ink);
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(108, 67, 44, 0.13);
	outline: none;
}
.form-field textarea,
.woocommerce form .form-row textarea { min-height: 7em; resize: vertical; }
.woocommerce form .form-row label { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.35em; display: block; }

/* Native checkbox/radio replaced with brand-coloured marks — still real
   inputs (keyboard + screen-reader behaviour unchanged), just repainted. */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	display: inline-grid;
	place-content: center;
	border: 2px solid var(--color-surface);
	background: var(--color-white);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--color-brand); }
input[type="checkbox"]::before,
input[type="radio"]::before {
	content: "";
	transform: scale(0);
	transition: transform 0.15s ease-in-out;
	box-shadow: inset 1em 1em var(--color-white);
}
input[type="checkbox"]::before {
	width: 0.7em;
	height: 0.7em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="radio"]::before { width: 0.6em; height: 0.6em; border-radius: 50%; }
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--color-brand); border-color: var(--color-brand); }
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 3px solid rgba(108, 67, 44, 0.35); outline-offset: 2px; }

@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-ink); color: var(--color-bg); padding: var(--space-5) 0 var(--space-3); }
.site-footer a:hover { color: var(--color-brand); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.footer-grid h4 { color: var(--color-bg); font-family: var(--font-body); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.footer-grid li { margin-bottom: 0.6em; font-size: 0.92rem; opacity: 0.85; }
.footer-bottom {
	border-top: 1px solid rgba(242, 242, 244, 0.15);
	padding-top: var(--space-2);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: 0.82rem;
	opacity: 0.7;
}

@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   WooCommerce notices / misc
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--color-brand) !important;
	background: var(--color-surface) !important;
	color: var(--color-ink) !important;
}

/* ==========================================================================
   WooCommerce core component styling (gallery, variations, tabs, price)
   ========================================================================== */
.woocommerce-product-gallery__image { border-radius: var(--radius-md); overflow: hidden; }
.flex-control-thumbs { display: flex; gap: 0.6em; margin-top: 0.6em; padding: 0; }
.flex-control-thumbs li { list-style: none; width: 72px; }
.flex-control-thumbs img { border-radius: var(--radius-sm); cursor: pointer; opacity: 0.7; }
.flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--color-brand); }

.price .woocommerce-Price-amount { color: var(--color-brand); font-weight: 600; }

.variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
.variations td { padding: 0.4em 0; }
.variations select {
	padding: 0.6em 1em;
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	min-width: 160px;
}
.woocommerce-variation-price .woocommerce-Price-amount { color: var(--color-brand); font-weight: 600; }

.quantity { display: inline-flex; margin-right: var(--space-2); }
.quantity .qty {
	width: 4em;
	padding: 0.9em 0.6em;
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	text-align: center;
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quantity .qty:focus {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(108, 67, 44, 0.13);
	outline: none;
}

/* − / + stepper pill (assets/js/quantity-stepper.js). The number input
   keeps its own value; the buttons just nudge it. */
.ohla-qty {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ohla-qty:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(108, 67, 44, 0.13); }
.ohla-qty__btn {
	width: 2.6em;
	height: 2.9em;
	border: 0;
	background: transparent;
	color: var(--color-brand);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ohla-qty__btn:hover { background: var(--color-brand); color: var(--color-white); }
.ohla-qty__btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
.ohla-qty .qty {
	width: 3em;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.9em 0.2em;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.ohla-qty .qty::-webkit-outer-spin-button,
.ohla-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce button.button.single_add_to_cart_button,
.woocommerce button.button.single_add_to_cart_button.disabled,
.woocommerce a.button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 2em;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-brand) !important;
	background: var(--color-brand) !important;
	color: var(--color-white) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}
.woocommerce button.button.single_add_to_cart_button::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f217"; /* cart-plus */
}
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce button.button.single_add_to_cart_button.disabled:hover { background: var(--color-brand-dark) !important; }
.woocommerce button.button.single_add_to_cart_button.disabled { opacity: 0.6; cursor: not-allowed; }
.woocommerce button.button.single_add_to_cart_button.loading { opacity: 0.7; cursor: wait; }

/* ==========================================================================
   WooCommerce's own buttons (cart, checkout, coupon, place order) pulled
   onto the same pill/gradient/lift treatment as .btn, so the journey from
   menu → product → cart → checkout doesn't change visual language partway.
   ========================================================================== */
.woocommerce #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.95em 2.1em !important;
	border-radius: var(--radius-lg) !important;
	border: 1.5px solid var(--color-brand) !important;
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%) !important;
	color: var(--color-white) !important;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(108, 67, 44, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.woocommerce #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(108, 67, 44, 0.32);
}
.woocommerce #place_order:active,
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(108, 67, 44, 0.26); }

/* ==========================================================================
   Checkout: order summary — WooCommerce ships this as a bordered table
   that reads like a spreadsheet; this turns it into a soft summary card
   with thumbnails, a quantity badge and an emphasised total.
   ========================================================================== */
#order_review_heading { margin-top: var(--space-4); }
.woocommerce-checkout #payment,
.woocommerce-checkout-review-order {
	background: var(--color-white) !important;
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md) !important;
	box-shadow: 0 8px 26px rgba(18, 18, 20, 0.06);
}
.woocommerce-checkout-review-order { padding: var(--space-3); }
.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	border: 0 !important;
	background: transparent !important;
	vertical-align: middle;
}
.woocommerce-checkout-review-order-table thead th {
	padding: 0 0 var(--space-2) !important;
	border-bottom: 2px solid var(--color-surface) !important;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-brand);
}
.woocommerce-checkout-review-order-table tbody td {
	padding: var(--space-2) 0 !important;
	border-bottom: 1px solid var(--color-surface) !important;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	padding: 0.75em 0 !important;
	border-bottom: 1px solid var(--color-surface) !important;
	font-weight: 600;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0 !important;
	padding-top: var(--space-2) !important;
	font-size: 1.15rem;
}
.woocommerce-checkout-review-order-table tfoot .order-total td { color: var(--color-brand); font-weight: 700; }
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }

/* inline-flex (not flex) so WooCommerce's "× 2" quantity, which it
   appends after the filtered name, stays on the same line instead of
   dropping below the thumbnail. */
.ohla-order-item { display: inline-flex; align-items: center; gap: var(--space-2); vertical-align: middle; }
.ohla-order-item img {
	width: 58px;
	height: 58px;
	flex: none;
	margin: 0 !important;
	border-radius: var(--radius-md);
	object-fit: cover;
	background: var(--color-surface);
}
.ohla-order-item__name { font-weight: 600; line-height: 1.3; }
.woocommerce-checkout-review-order-table .product-quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.8em;
	height: 1.8em;
	margin-left: 0.5em;
	padding: 0 0.45em;
	border-radius: var(--radius-lg);
	background: var(--color-brand);
	color: var(--color-white);
	font-size: 0.72rem;
	font-weight: 700;
}
.woocommerce-checkout #payment { padding: var(--space-3); margin-top: var(--space-3); }
.woocommerce-checkout #payment ul.payment_methods { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-checkout #payment div.form-row { padding: var(--space-2) 0 0 !important; border: 0 !important; }
.woocommerce-privacy-policy-text p { font-size: 0.85rem; opacity: 0.72; }

/* ==========================================================================
   Cart page
   ========================================================================== */
.woocommerce-cart table.shop_table {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--color-white);
}
.woocommerce-cart table.shop_table th {
	padding: var(--space-2) !important;
	background: transparent;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-brand);
}
.woocommerce-cart table.shop_table td {
	padding: var(--space-2) !important;
	vertical-align: middle;
	border-top: 1px solid var(--color-surface);
}
/* Cart thumbnails ship at 32px, which is too small to recognise a cake by. */
.woocommerce-cart table.cart img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.woocommerce-cart table.cart td.product-name a { font-weight: 600; }
.woocommerce-cart table.cart td.product-remove a.remove { font-size: 1.3em; }

/* Coupon field + buttons sit on one line: field and Apply together on the
   left, Update cart on the right. (The shared input styling further up
   sets width:100%, which alone would push Apply onto its own row.) */
.woocommerce-cart table.cart td.actions { text-align: right; padding: var(--space-3) var(--space-2) !important; }
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	float: left;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: auto !important;
	min-width: 220px;
	margin: 0 !important;
}
.woocommerce-cart table.cart td.actions .button { margin: 0; }

.cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; }
.cart-collaterals .cart_totals > h2 { font-size: 1.5rem; }
.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th { border-top: 1px solid var(--color-surface); }
.woocommerce-cart .cart_totals .order-total td { color: var(--color-brand); font-weight: 700; font-size: 1.1rem; }
.wc-proceed-to-checkout { padding-top: var(--space-3) !important; text-align: right; }

/* ==========================================================================
   WooCommerce notices — the stock ones are an unpadded grey strip; these
   match the rest of the site's card language.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex !important;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin: 0 0 var(--space-3) !important;
	padding: var(--space-3) !important;
	background: var(--color-white) !important;
	border: 1px solid var(--color-surface) !important;
	border-left: 4px solid var(--color-brand) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: 0 6px 18px rgba(18, 18, 20, 0.06);
	color: var(--color-ink);
	font-size: 0.95rem;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static !important;
	top: auto !important;
	left: auto !important;
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900;
	font-size: 1.1rem;
	color: var(--color-brand) !important;
}
.woocommerce-message::before { content: "\f058" !important; /* circle-check */ }
.woocommerce-info::before { content: "\f05a" !important; /* circle-info */ }
.woocommerce-error { border-left-color: #b73a2b !important; }
.woocommerce-error::before { content: "\f06a" !important; color: #b73a2b !important; /* circle-exclamation */ }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }
/* WooCommerce focuses the notice so screen readers announce it, which
   otherwise paints the browser's default black focus ring right over
   this card. Keep the ring (it's doing real a11y work), just make it
   the brand colour. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus { outline: 3px solid rgba(108, 67, 44, 0.35); outline-offset: 3px; }

/* ==========================================================================
   Size swatch cake mark (assets/js/size-swatches.js)
   ========================================================================== */
.ohla-swatch__mark-wrap { display: flex; align-items: flex-end; justify-content: center; height: 58px; color: var(--color-brand); }
.ohla-swatch__mark { display: block; transition: transform 0.18s ease; }
.ohla-swatch:hover .ohla-swatch__mark { transform: translateY(-2px) scale(1.04); }

/* ==========================================================================
   Add-to-cart toast (assets/js/ajax-add-to-cart.js)
   ========================================================================== */
.ohla-toast {
	position: fixed;
	top: 104px;
	right: 24px;
	z-index: 300;
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	width: 320px;
	max-width: calc(100vw - 48px);
	padding: var(--space-3);
	background: var(--color-white);
	color: var(--color-ink);
	border: 1px solid var(--color-surface);
	border-left: 4px solid var(--color-brand);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 38px rgba(18, 18, 20, 0.18);
	opacity: 0;
	transform: translateX(28px);
	pointer-events: none;
	transition: opacity 0.28s ease, transform 0.28s ease;
}
.ohla-toast.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.ohla-toast > i { flex: none; color: var(--color-brand); font-size: 1.2rem; line-height: 1.35; }
.ohla-toast__body { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; }
.ohla-toast__body strong { font-size: 0.95rem; font-weight: 700; }
.ohla-toast__product { font-size: 0.88rem; opacity: 0.7; line-height: 1.35; }
.ohla-toast__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	align-self: flex-start;
	margin-top: 0.2em;
	padding: 0.5em 1.1em;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
	color: var(--color-white);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(108, 67, 44, 0.24);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ohla-toast__link:hover { color: var(--color-white); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(108, 67, 44, 0.3); }
.ohla-toast--error { border-left-color: #b73a2b; }
.ohla-toast--error > i { color: #b73a2b; }

@media (max-width: 480px) {
	.ohla-toast { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; max-width: none; }
}

/* ==========================================================================
   Size/variation swatch buttons (assets/js/size-swatches.js) — replaces
   the default WooCommerce <select>, which stays in the DOM (hidden) so
   WooCommerce's own variation-price/stock logic keeps working unchanged.
   ========================================================================== */
.ohla-swatches-source { display: none !important; }
.ohla-swatches { display: flex; flex-wrap: wrap; gap: 0.8em; margin: 0.4em 0; }
.ohla-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	min-width: 96px;
	padding: 0.9em 1.3em;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-surface);
	background: var(--color-white);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ohla-swatch__label { font-weight: 600; font-size: 0.95rem; }
.ohla-swatch__price { font-size: 0.82rem; color: var(--color-brand); font-weight: 600; }
.ohla-swatch:hover { border-color: var(--color-brand); }
.ohla-swatch.is-active { border-color: var(--color-brand); border-width: 2px; background: var(--color-bg); }

/* ==========================================================================
   Sticky add-to-cart bar (assets/js/sticky-add-to-cart.js)
   ========================================================================== */
.sticky-add-to-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-white);
	border-top: 1px solid var(--color-surface);
	box-shadow: 0 -8px 20px rgba(18, 18, 20, 0.08);
	padding: var(--space-2) 0;
	transform: translateY(100%);
	transition: transform 0.25s ease;
	z-index: 150;
}
.sticky-add-to-cart.is-visible { transform: translateY(0); }
.sticky-add-to-cart__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sticky-add-to-cart__name { font-family: var(--font-display); font-size: 1.05rem; flex: 1; }
.sticky-add-to-cart__price { color: var(--color-brand); font-weight: 600; }
@media (max-width: 600px) {
	.sticky-add-to-cart__name { display: none; }
}

.product-detail__gallery-main--empty {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-brand);
	font-family: var(--font-display);
	font-size: 1.1rem;
	border: 1px dashed var(--color-brand);
	padding: var(--space-3);
}

.woocommerce-tabs ul.tabs { display: none; } /* accordion (details/summary) replaces tab nav */

/* Cart / checkout tables */
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-3);
}
table.shop_table th,
table.shop_table td {
	padding: 1em;
	border-bottom: 1px solid var(--color-surface);
	text-align: left;
}
.shop_table .product-thumbnail img { border-radius: var(--radius-sm); width: 72px; }

#payment .payment_methods { list-style: none; padding: 0; }
#payment .place-order .button,
.checkout-button {
	display: inline-flex;
	padding: 0.9em 2em;
	border-radius: var(--radius-lg);
	background: var(--color-brand);
	color: var(--color-white) !important;
	border: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.woocommerce-MyAccount-navigation ul { border-bottom: 1px solid var(--color-surface); display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.woocommerce-MyAccount-navigation a { padding: 0.6em 0; display: inline-block; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--color-brand); border-bottom: 2px solid var(--color-brand); }

/* ==========================================================================
   Homepage customer reviews (slider)
   ========================================================================== */
.reviews {
	background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}

.reviews-slider {
	position: relative;
	margin-top: var(--space-3);
}

/*
 * The viewport is a plain scroll container with snap points — see
 * assets/js/reviews-slider.js. Negative margin + matching padding let the
 * cards' focus rings and hover lift breathe without being clipped by
 * overflow, while the row still lines up with the container edge.
 */
.reviews-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin: calc(var(--space-1) * -1);
	padding: var(--space-1);
}
.reviews-slider__viewport::-webkit-scrollbar { display: none; }
.reviews-slider__viewport:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }

.reviews-slider__track {
	display: flex;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.review-card {
	flex: 0 0 calc((100% - var(--space-3) * 2) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	box-shadow: 0 2px 10px rgba(18, 18, 20, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(18, 18, 20, 0.1);
}

.review-card__mark {
	color: var(--color-brand);
	opacity: 0.35;
	font-size: 1.5rem;
}

.review-card__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-ink);
	/* Pushes the handle to the bottom so every card's author line sits on
	   the same baseline regardless of how long the comment runs. */
	flex: 1 1 auto;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--color-brand);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-surface);
}
.review-card__author i { font-size: 1.05rem; }
.review-card__author a { color: inherit; text-decoration: none; }
.review-card__author a:hover { text-decoration: underline; }

.reviews-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-surface);
	background: var(--color-white);
	color: var(--color-brand);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(18, 18, 20, 0.12);
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.reviews-slider__nav:hover:not(:disabled) { background: var(--color-brand); color: var(--color-white); }
.reviews-slider__nav:disabled { opacity: 0.35; cursor: default; }
.reviews-slider__nav--prev { left: calc(var(--space-3) * -1); }
.reviews-slider__nav--next { right: calc(var(--space-3) * -1); }

.reviews-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
}
.reviews-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	/* Not --color-surface: the section's gradient ends on that exact grey,
	   which would make the inactive dots invisible. */
	background: rgba(108, 67, 44, 0.25);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}
.reviews-slider__dot:hover { background: rgba(108, 67, 44, 0.5); }
.reviews-slider__dot.is-active { background: var(--color-brand); width: 22px; }

@media (max-width: 1080px) {
	.review-card { flex-basis: calc((100% - var(--space-3)) / 2); }
	/* No room to hang the arrows outside the container at this width. */
	.reviews-slider__nav--prev { left: 0; }
	.reviews-slider__nav--next { right: 0; }
}

@media (max-width: 680px) {
	.review-card { flex-basis: 100%; }
	.reviews-slider__nav { display: none; }
}

/* ==========================================================================
   Contact page map (Leaflet / OpenStreetMap)
   ========================================================================== */
.contact-map { margin-top: var(--space-3); }

.contact-map__canvas {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-surface);
	overflow: hidden;
	/* Leaflet's own panes sit at z-index 400+; without a stacking context
	   here the tiles would paint over the sticky header on scroll. */
	isolation: isolate;
	z-index: 0;
	position: relative;
}

.contact-map__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-brand);
}

.contact-map--empty { margin-top: var(--space-3); }

/* ==========================================================================
   Order confirmation ("order received") page
   Scoped under .order-confirmation so it cannot leak into the cart or
   checkout tables, which keep their own styling above.
   ========================================================================== */
.order-confirmation { max-width: 820px; margin: 0 auto; }

/* --- Confirmation panel ------------------------------------------------- */
.order-confirmation__head {
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-3) var(--space-3);
	text-align: center;
	box-shadow: 0 10px 30px rgba(18, 18, 20, 0.05);
}

.order-confirmation__head h1 {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	line-height: 1.15;
}

.order-confirmation__lead {
	max-width: 46ch;
	margin: 0 auto;
	color: rgba(18, 18, 20, 0.72);
	font-size: 1.02rem;
	line-height: 1.65;
}

.order-confirmation__lead strong {
	color: var(--color-ink);
	font-weight: 600;
	white-space: nowrap;
}

/* Wax-seal mark. A double ring rather than a flat circle so it reads as a
   stamp on the card, echoing the brand's serif/letterpress feel. */
.order-confirmation__seal {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
	box-shadow: 0 0 0 5px var(--color-white), 0 0 0 6px var(--color-surface), 0 8px 18px rgba(108, 67, 44, 0.24);
}

.order-confirmation__seal::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f00c";
	font-size: 1.55rem;
	color: var(--color-white);
}

.order-confirmation__seal--pending {
	background: linear-gradient(135deg, var(--color-surface) 0%, rgba(18, 18, 20, 0.14) 100%);
}
.order-confirmation__seal--pending::before {
	content: "\f017";
	color: var(--color-brand-dark);
}

.order-confirmation__seal--failed {
	background: #b73a2b;
	box-shadow: 0 0 0 5px var(--color-white), 0 0 0 6px var(--color-surface), 0 8px 18px rgba(183, 58, 43, 0.24);
}
.order-confirmation__seal--failed::before { content: "\f00d"; }

.order-confirmation__actions { margin: var(--space-3) 0 0; }

/* --- Order figures ----------------------------------------------------- */
.order-confirmation__meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.order-confirmation__meta li {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: var(--space-3) var(--space-2);
	background: var(--color-white);
	text-align: center;
}

.order-confirmation__label {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(18, 18, 20, 0.5);
}

.order-confirmation__value {
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
}

.order-confirmation__value--figure {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--color-brand);
}

.order-confirmation__value--figure .woocommerce-Price-amount { color: inherit; }

/* --- Items table + fulfillment + address ------------------------------- */
.order-confirmation .woocommerce-order-details,
.order-confirmation .woocommerce-customer-details {
	margin-top: var(--space-4);
}

.order-confirmation .woocommerce-order-details__title,
.order-confirmation .woocommerce-column__title,
.order-confirmation .woocommerce-order-details h3 {
	font-family: var(--font-display);
	font-size: 1.45rem;
	margin: 0 0 var(--space-2);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid var(--color-surface);
}

.order-confirmation table.shop_table {
	width: 100%;
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--color-white);
}

.order-confirmation table.shop_table th,
.order-confirmation table.shop_table td {
	padding: 0.95em var(--space-2);
	border-bottom: 1px solid var(--color-surface);
	text-align: left;
	vertical-align: top;
}

.order-confirmation table.shop_table thead th {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(18, 18, 20, 0.55);
	background: var(--color-bg);
	font-weight: 600;
}

.order-confirmation table.shop_table td:last-child,
.order-confirmation table.shop_table th:last-child { text-align: right; }

.order-confirmation table.shop_table tfoot th { font-weight: 600; }

.order-confirmation table.shop_table tfoot tr:last-child th,
.order-confirmation table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 1.05rem;
	color: var(--color-brand);
}

.order-confirmation table.shop_table tbody tr:last-child td { border-bottom: 2px solid var(--color-surface); }

.order-confirmation .product-quantity { color: rgba(18, 18, 20, 0.6); }

/* The Fulfillment block is echoed after the table by
   ohla_display_fulfillment_details(), as bare <h3>/<p> -- give it the same
   card treatment as the table it follows. */
.order-confirmation .woocommerce-order-details h3 { margin-top: var(--space-4); }

.order-confirmation .woocommerce-order-details h3 + p,
.order-confirmation .woocommerce-order-details h3 ~ p {
	margin: 0 0 0.4em;
	font-size: 0.95rem;
}

.order-confirmation .woocommerce-order-details h3 ~ p strong {
	display: inline-block;
	min-width: 8.5em;
	font-weight: 600;
	color: rgba(18, 18, 20, 0.6);
}

.order-confirmation .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.7;
	padding: var(--space-3);
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
}

/* Pay / Cancel, which core renders only while an order still needs paying. */
.order-confirmation .order-actions-button {
	display: inline-block;
	margin: 0 0.4em 0.4em 0;
	padding: 0.6em 1.4em;
	border: 1.5px solid var(--color-brand);
	border-radius: var(--radius-lg);
	background: transparent;
	color: var(--color-brand);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.order-confirmation .order-actions-button:hover {
	background: var(--color-brand);
	color: var(--color-white);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 720px) {
	.order-confirmation__meta { grid-template-columns: repeat(2, 1fr); }
	.order-confirmation__head { padding: var(--space-3) var(--space-2); }
	.order-confirmation__value--figure { font-size: 1.2rem; }
}

@media (max-width: 420px) {
	.order-confirmation__meta { grid-template-columns: 1fr; }
	.order-confirmation .woocommerce-order-details h3 ~ p strong { min-width: 0; display: block; }
}

/* --- Waiting-for-payment state ----------------------------------------- */
.order-confirmation__spinner {
	display: block;
	width: 58px;
	height: 58px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	border: 3px solid var(--color-surface);
	border-top-color: var(--color-brand);
	animation: ohla-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.order-confirmation__spinner { animation-duration: 3s; }
}

.order-confirmation__head--waiting.is-stalled .order-confirmation__spinner {
	animation: none;
	border-top-color: var(--color-surface);
	opacity: 0.5;
}

.order-confirmation__stall { margin-top: var(--space-3); }

/* --- Pickup / delivery callout ----------------------------------------- */
.order-confirmation__callout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	margin: var(--space-3) auto 0;
	padding: 0.9em 1.3em;
	max-width: 34em;
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-md);
	background: rgba(108, 67, 44, 0.06);
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}

.order-confirmation__callout i {
	flex: none;
	font-size: 1.15rem;
	color: var(--color-brand);
}

.order-confirmation__callout strong { white-space: nowrap; }

/* --- Item cards --------------------------------------------------------- */
.order-confirmation__items { margin-top: var(--space-4); }

.order-confirmation__section-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0 0 var(--space-2);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid var(--color-surface);
}

.order-item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	margin-bottom: var(--space-2);
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.order-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(18, 18, 20, 0.07);
}

.order-item__media {
	width: 84px;
	height: 84px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg);
}

.order-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.order-item__name {
	font-family: var(--font-display);
	font-size: 1.2rem;
	margin: 0 0 0.25em;
	line-height: 1.25;
}

.order-item__qty {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(18, 18, 20, 0.55);
}

/* WooCommerce renders the gift message / candle-set choices in here. */
.order-item__body .wc-item-meta {
	list-style: none;
	margin: 0 0 0.35em;
	padding: 0;
	font-size: 0.88rem;
	color: rgba(18, 18, 20, 0.7);
}

.order-item__body .wc-item-meta li { margin: 0 0 0.15em; }
.order-item__body .wc-item-meta strong { font-weight: 600; }
.order-item__body .wc-item-meta p { display: inline; margin: 0; }

.order-item__price {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-brand);
	white-space: nowrap;
}

/* --- Totals ------------------------------------------------------------- */
.order-confirmation__totals {
	margin: var(--space-3) 0 0;
	padding: var(--space-2) var(--space-3);
	background: var(--color-white);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
}

.order-confirmation__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 0.5em 0;
	border-bottom: 1px dashed var(--color-surface);
}

.order-confirmation__total-row:last-child { border-bottom: 0; }

.order-confirmation__total-row dt {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(18, 18, 20, 0.62);
}

.order-confirmation__total-row dd { margin: 0; font-weight: 500; }

.order-confirmation__total-row.is-grand {
	padding-top: 0.7em;
	border-top: 2px solid var(--color-surface);
	border-bottom: 0;
}

.order-confirmation__total-row.is-grand dt {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-ink);
}

.order-confirmation__total-row.is-grand dd {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-brand);
}

@media (max-width: 560px) {
	.order-item {
		grid-template-columns: 64px 1fr;
		grid-template-areas: "media body" "price price";
	}
	.order-item__media { grid-area: media; width: 64px; height: 64px; }
	.order-item__body  { grid-area: body; }
	.order-item__price { grid-area: price; text-align: right; }
	.order-confirmation__callout { flex-direction: column; text-align: center; }
}

/* --- Confirmation motion ------------------------------------------------ */
/* The panel lifts in and the seal stamps itself once, so a confirmed
   payment feels acknowledged rather than just rendered. Both are purely
   decorative and are switched off for reduced-motion visitors. */
@keyframes ohla-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ohla-stamp {
	0%   { opacity: 0; transform: scale(0.4); }
	60%  { opacity: 1; transform: scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes ohla-ellipsis {
	0%, 20%  { content: "."; }
	40%      { content: ".."; }
	60%, 100% { content: "..."; }
}

.order-confirmation__head { animation: ohla-rise 0.45s ease both; }
.order-confirmation__seal { animation: ohla-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both; }
.order-confirmation__meta,
.order-confirmation__items { animation: ohla-rise 0.45s ease 0.1s both; }

/* Animated ellipsis on the waiting headline, so the page reads as busy
   even before the spinner is noticed. */
.order-confirmation__working::after {
	content: "...";
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: ohla-ellipsis 1.4s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.order-confirmation__head,
	.order-confirmation__seal,
	.order-confirmation__meta,
	.order-confirmation__items { animation: none; }
	.order-confirmation__working::after { animation: none; content: "..."; }
}

/* --- Delivery recipient (gift orders) ----------------------------------- */
.delivery-box__recipient {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-surface);
}

.delivery-box__recipient h4 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 0.25em;
}

.delivery-box__recipient-hint {
	margin: 0 0 var(--space-2);
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(18, 18, 20, 0.65);
}

.delivery-box__recipient .form-field { margin-bottom: var(--space-2); }

.delivery-box__recipient label {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.35em;
}

.delivery-box__recipient .required {
	color: var(--color-brand);
	border: 0;
	text-decoration: none;
}

.delivery-box__recipient input.input-text { width: 100%; }

/* Mirrored from the billing fields, so shown as read-only rather than
   editable text that would be overwritten on the next keystroke. */
.delivery-box__recipient input.is-mirrored {
	background: var(--color-bg);
	color: rgba(18, 18, 20, 0.7);
	cursor: not-allowed;
}

.delivery-box__same-as-buyer {
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-weight: 400;
	font-size: 0.9rem;
	cursor: pointer;
}

.delivery-box__same-as-buyer input { width: auto; margin: 0; }

/* --- Delivery service selector ------------------------------------------ */
.delivery-services {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-surface);
}

.delivery-services h4 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 var(--space-2);
}

.delivery-service {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 0.9em 1em;
	margin-bottom: var(--space-1);
	background: var(--color-white);
	border: 1.5px solid var(--color-surface);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.delivery-service:hover { border-color: var(--color-brand); }

.delivery-service:has(input:checked) {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(108, 67, 44, 0.12);
}

.delivery-service input {
	width: auto;
	margin: 0.2em 0 0;
	flex: none;
	accent-color: var(--color-brand);
}

.delivery-service__body { flex: 1; }

.delivery-service__name {
	display: block;
	font-weight: 600;
	font-size: 0.98rem;
	margin-bottom: 0.15em;
}

.delivery-service__badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.5em;
	border-radius: var(--radius-lg);
	background: rgba(108, 67, 44, 0.1);
	color: var(--color-brand);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

.delivery-service__note {
	display: block;
	font-size: 0.84rem;
	line-height: 1.45;
	color: rgba(18, 18, 20, 0.6);
}

.delivery-service__price {
	flex: none;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-brand);
	white-space: nowrap;
}

.delivery-services__hint,
.delivery-services__free {
	margin: var(--space-1) 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(18, 18, 20, 0.6);
}

.delivery-services__free {
	padding: 0.6em 0.9em;
	border-radius: var(--radius-sm);
	background: rgba(108, 67, 44, 0.07);
	color: var(--color-brand-dark);
	font-weight: 500;
}

.delivery-box__fee--total {
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 2px solid var(--color-surface);
	font-weight: 600;
}

@media (max-width: 560px) {
	.delivery-service {
		flex-wrap: wrap;
		row-gap: 0.4em;
	}
	.delivery-service__price {
		width: 100%;
		padding-left: 2.1em;
	}
}

/* --- "View cart" link after adding to cart ------------------------------
   WooCommerce appends this link immediately after the add-to-cart button
   with no spacing of its own, so it ends up touching the button. Give it
   room and the same outline-button treatment as the rest of the theme. */
.woocommerce a.added_to_cart,
.woocommerce a.added_to_cart.wc-forward,
.woocommerce div.product form.cart a.added_to_cart {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: var(--space-2) 0 0 var(--space-2);
	padding: 0.72em 1.5em;
	border: 1.5px solid var(--color-brand);
	border-radius: var(--radius-lg);
	background: transparent;
	color: var(--color-brand);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce a.added_to_cart::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f105"; /* chevron-right */
	font-size: 0.85em;
}

.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart:focus-visible {
	background: var(--color-brand);
	color: var(--color-white);
}

/* On a narrow screen the link sits under the button rather than beside
   it, so the side margin would push it out of alignment. */
@media (max-width: 560px) {
	.woocommerce a.added_to_cart,
	.woocommerce a.added_to_cart.wc-forward,
	.woocommerce div.product form.cart a.added_to_cart {
		display: flex;
		justify-content: center;
		margin-left: 0;
		width: 100%;
	}
}