/* ==========================================================================
   The Beloved — base styles
   ========================================================================== */

:root {
	--cream: #f6f1ea;
	--paper: #fffdf9;
	--sand: #ece4d8;
	--line: #e2d9cc;
	--ink: #16130f;
	--ink-2: #4b443c;
	--ink-3: #6f665c;   /* was #8a8177 — 3.4:1 on the cream ground, under the 4.5:1 floor */
	--wine: #7a1f2b;
	--wine-2: #5e1621;
	--gold: #b8935a;
	--sage: #5e6b54;    /* was #6f7d63 — 3.9:1 for the in-stock line */
	--danger: #b3261e;

	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--radius: 18px;
	--radius-sm: 10px;
	--shadow: 0 18px 40px -22px rgba(22, 19, 15, .35);
	--container: 1280px;

	/* Design tokens the Customizer writes over. */
	--text-base: 16px;
	--heading-scale: 1;
	--heading-weight: 500;
	--heading-case: none;
	--body-tracking: 0;
	--nav-case: none;
	--btn-radius: 999px;
	--btn-case: none;
	--section-scale: 1;
	--header-h: 76px;
	--card-ratio: 4/5;
	--card-fit: cover;
	--card-align: left;
	--shop-cols: 4;
	--shop-cols-md: 3;
	--shop-cols-sm: 2;
	--gallery-sticky: sticky;
	--gutter: clamp(16px, 4vw, 40px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	letter-spacing: var(--body-tracking);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--heading-weight); line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; text-transform: var(--heading-case); }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 999; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; }

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.container.narrow { max-width: 820px; }
.section { padding-block: calc(clamp(48px, 7vw, 96px) * var(--section-scale)); }
.section-pad { padding-block: calc(clamp(64px, 10vw, 140px) * var(--section-scale)); }
.center-text { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.hide-mobile { display: none; }
@media (min-width: 900px) { .hide-mobile { display: inline-flex; } }

.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--wine); font-weight: 600; margin: 0 0 12px; }
.eyebrow--light { color: rgba(255,255,255,.75); }
.section-title { font-size: calc(clamp(30px, 4vw, 46px) * var(--heading-scale)); margin: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-title { font-size: calc(clamp(34px, 5vw, 56px) * var(--heading-scale)); margin-bottom: 20px; }
.page-head { padding: clamp(32px, 6vw, 64px) 0 24px; }

/* Content pages need the same breathing room before the newsletter band that the
   shop templates get from .woo-main; the home page's sections carry their own. */
.site-main:not(.home) { padding-bottom: clamp(48px, 7vw, 96px); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: gap .25s var(--ease); }
.link-arrow:hover { gap: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--btn-radius); text-transform: var(--btn-case); font-weight: 600; font-size: 14px; letter-spacing: .01em; line-height: 1; border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--wine); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--sm { padding: 10px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn--block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; transition: background .2s; position: relative; }
.icon-btn:hover { background: var(--sand); }

/* Chips */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; transition: all .2s; }
.chip:hover, .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Stars */
.stars { display: inline-flex; gap: 1px; color: var(--line); }
.stars .is-on { color: var(--gold); }

/* ---------- Announcement bar ---------- */
.announce { background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; }
.announce-track { position: relative; flex: 1; max-width: 640px; text-align: center; height: 38px; overflow: hidden; }
.announce-msg { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1.25; padding: 0 4px; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.announce-msg.is-active { opacity: 1; transform: none; }
.announce-nav { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: .6; transition: opacity .2s, background .2s; }
.announce-nav:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(246,241,234,.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -20px rgba(0,0,0,.25); }
.header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: calc(var(--header-h) - 8px); }
@media (max-width: 430px) { .header-inner { gap: 6px; } }
@media (min-width: 900px) { .header-inner { grid-template-columns: 1fr auto 1fr; height: var(--header-h); } .nav-toggle { display: none; } }
.site-brand { display: flex; align-items: center; min-width: 0; }
@media (min-width: 900px) { .site-brand { order: -1; } }
/* ---------- Brand lockup ---------- */
/* The mark sits ON the text baseline and rises a little above the cap line — box
   centring left it hanging 4px low against the uppercase wordmark. */
html, body { overflow-x: clip; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); line-height: 1; }
/* The mark is a PNG silhouette painted with the palette's gold. Where masks are
   supported the colour follows --gold (so the Customizer still drives it); where they
   are not, the file's own gold shows through unchanged. */
.brand-mark { flex: none; height: 1.45em; aspect-ratio: 786 / 1203; background: url(../img/mark.png) center / contain no-repeat; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
	.brand-mark {
		background: var(--gold);
		-webkit-mask: url(../img/mark.png) center / contain no-repeat;
		mask: url(../img/mark.png) center / contain no-repeat;
	}
}
.brand-name { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; }
.brand-the { font-size: .62em; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.brand-word { font-size: 1em; letter-spacing: .04em; text-transform: uppercase; }
.brand--header { font-size: 26px; }
.brand-tagline { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }

/* Stacked: mark over the wordmark, tagline beneath - the full lockup. */
.brand--stacked { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 30px; }
.brand--stacked .brand-mark { height: 64px; width: 42px; }
.brand--stacked .brand-name { flex-direction: column; align-items: flex-start; gap: 2px; }
.brand--stacked .brand-the { font-size: .4em; }

@media (max-width: 899px) {
	.brand--header { font-size: 22px; }
}

/* Small phones: the burger, the wordmark and three icons do not all fit at 320px,
   so the wordmark loses its "The" and steps down a size. */
@media (max-width: 430px) {
	.brand--header { font-size: 19px; gap: 7px; }
	.brand--header .brand-the { display: none; }
}
@media (max-width: 360px) {
	.brand--header { font-size: 17px; }
}

.custom-logo { max-height: 48px; width: auto; }
.site-nav { display: none; }
@media (min-width: 900px) { .site-nav { display: block; justify-self: center; } }
.nav-list { display: flex; gap: 4px; }
.nav-list > li { position: relative; }
.nav-list > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; font-weight: 600; font-size: 14px; border-radius: 999px; transition: background .2s; }
.nav-list > li > a:hover, .nav-list > li.current-menu-item > a { background: var(--sand); }
.nav-list .menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.nav-list .sub-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s var(--ease); z-index: 10; }
.nav-list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-list > li:hover .sub-menu, .nav-list > li:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-list .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.nav-list .sub-menu a:hover { background: var(--sand); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--wine); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; transform: scale(0); transition: transform .25s var(--ease); }
.cart-count.has-items { transform: scale(1); }
.search-drawer { border-top: 1px solid var(--line); background: var(--paper); }
.search-drawer[hidden] { display: none; }
.search-form { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.search-form input[type="search"] { flex: 1; border: 0; background: transparent; font-size: 18px; outline: none; font-family: var(--font-display); }

/* Mobile nav */
.mobile-nav { position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw); background: var(--paper); z-index: 100; transform: translateX(-100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; display: flex; flex-direction: column; padding: 16px 20px; overflow-y: auto; }
.mobile-nav.is-open { transform: none; visibility: visible; transition-delay: 0s, 0s; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mobile-nav-list > li > a { display: block; padding: 14px 0; font-family: var(--font-display); font-size: 26px; border-bottom: 1px solid var(--line); }
.mobile-nav-list .sub-menu { padding: 6px 0 12px 12px; }
.mobile-nav-list .sub-menu a { display: block; padding: 8px 0; font-size: 15px; color: var(--ink-2); }
.mobile-nav-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; font-weight: 600; font-size: 14px; }
.mobile-nav-foot a { display: inline-flex; align-items: center; gap: 8px; }
.scrim { position: fixed; inset: 0; background: rgba(22,19,15,.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .3s; }
.scrim.is-open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 5vw, 56px); overflow: hidden; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
.hero-title { font-size: calc(clamp(40px, 5.6vw, 74px) * var(--heading-scale)); line-height: 1; margin: 0 0 20px; max-width: 14ch; }
.hero-title em { font-style: italic; color: var(--wine); }
.hero-text { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-proof { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.hero-media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.hero-img { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); aspect-ratio: 4/5; box-shadow: var(--shadow); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-img:hover img { transform: scale(1.04); }
.hero-img--a { transform: translateY(-24px); }
.hero-img--b { aspect-ratio: 4/5.4; }
.hero-verse { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--paper); padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow); text-align: center; width: max-content; max-width: 78%; }
.hero-verse-text { display: block; font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.3; }
.hero-verse-ref { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); font-weight: 700; margin-top: 4px; }

/* ---------- Trust row ---------- */
.trust { border-block: 1px solid var(--line); background: var(--paper); }
.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 18px 0; }
@media (min-width: 800px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.trust-item svg { color: var(--wine); flex: none; }
.trust-item strong { display: block; color: var(--ink); font-size: 14px; }

/* ---------- Category tiles ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--sand); aspect-ratio: 1; }
.cat-tile--feature { grid-column: span 2; aspect-ratio: 16/10; }
@media (min-width: 700px) { .cat-tile--feature { grid-row: span 2; aspect-ratio: auto; } }
.cat-tile-media, .cat-tile-media img { width: 100%; height: 100%; }
.cat-tile-media { position: absolute; inset: 0; }
.cat-tile-media img { object-fit: cover; transition: transform .9s var(--ease); }
.cat-tile:hover .cat-tile-media img { transform: scale(1.05); }
/* The scrim has to reach full strength BEHIND the label, not below it. The old
   gradient peaked at the tile's bottom edge and had faded to almost nothing by the
   time it reached the text, which left white type on pale product photos at about
   1.3:1 — invisible. It now starts above the text and stays dense across it, so the
   label reads on any photograph, light or dark. */
.cat-tile-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 72px 18px 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: #fff;
	background: linear-gradient(to top,
		rgba(22,19,15,.94) 0%,
		rgba(22,19,15,.88) 42%,
		rgba(22,19,15,.60) 72%,
		rgba(22,19,15,0) 100%);
}
.cat-tile-name { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); flex: 1 1 100%; }
.cat-tile--feature .cat-tile-name { font-size: clamp(28px, 3vw, 44px); }
.cat-tile-count { font-size: 13px; opacity: .92; }
.cat-tile .icon-arrow { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: all .3s var(--ease); }
.cat-tile:hover .icon-arrow { opacity: 1; transform: none; }
.tile-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--sand), #ddd2c2); }

/* ---------- Offers ---------- */
.offers-banner { background: var(--wine); color: #fff; border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 84px; position: relative; overflow: hidden; }
.offers-banner::after { content: "✝"; position: absolute; right: -10px; bottom: -60px; font-size: 260px; opacity: .06; font-family: var(--font-body); }
.offers-banner p { margin: 0; opacity: .85; }
.offers-title { font-size: clamp(40px, 6vw, 72px); margin: 0 0 6px; line-height: 1; }
.offers-code { display: flex; flex-direction: column; gap: 8px; font-size: 13px; opacity: .95; }
.code-pill { background: #fff; color: var(--wine); padding: 12px 18px; border-radius: 12px; font-weight: 800; letter-spacing: .12em; display: flex; align-items: center; gap: 12px; transition: transform .2s; }
.code-pill:hover { transform: scale(1.03); }
.code-pill small { font-weight: 500; letter-spacing: 0; opacity: .6; font-size: 11px; }
.code-pill.is-copied small { color: var(--sage); opacity: 1; }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-track { display: flex !important; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li { flex: 0 0 min(72vw, 290px); scroll-snap-align: start; }
.carousel-nav { display: none; position: absolute; top: -66px; right: 0; gap: 6px; }
.has-carousel .section-head { padding-right: 110px; }
@media (min-width: 900px) { .carousel-nav { display: flex; } }
.carousel-nav .icon-btn { border: 1px solid var(--line); background: var(--paper); }
.carousel-nav .icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Story cards ---------- */
.story-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .story-grid { grid-template-columns: 1fr 1fr; } }
.story-card { display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .story-card { grid-template-columns: 1fr 1fr; } }
.story-card-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.story-card-body h3 { font-size: clamp(26px, 2.6vw, 36px); }
.story-card-body p { color: var(--ink-2); font-size: 15px; }
.story-card-media { margin: 0; background: var(--sand); }
.story-card-media img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.story-card--custom .story-card-media { order: 1; }
@media (min-width: 640px) { .story-card--custom .story-card-media { order: 0; } }
.check-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.check-list svg { color: var(--sage); }
.plain-list { list-style: disc; padding-left: 20px; }
.plain-list li { margin-bottom: 8px; }

/* ---------- Reviews ---------- */
.reviews { background: var(--paper); border-block: 1px solid var(--line); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.reviews-score { display: flex; align-items: center; gap: 12px; }
.reviews-score-num { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.reviews-score > div { display: flex; flex-direction: column; }
.review-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.review-card { margin: 0; padding: 24px; background: var(--cream); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; }
.review-card p { font-family: var(--font-display); font-size: 19px; line-height: 1.35; margin: 0; flex: 1; }
.review-card footer { font-size: 13px; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--sand); padding: clamp(40px, 6vw, 72px) 0; }
.newsletter-inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .newsletter-inner { grid-template-columns: 1fr 1fr; } }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.newsletter-form input { flex: 1 1 220px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 15px; outline: none; }
.newsletter-form input:focus { border-color: var(--ink); }
.form-msg { flex: 1 1 100%; margin: 6px 0 0 6px; font-size: 13px; min-height: 1.2em; }
.form-msg.is-ok { color: var(--sage); }
.form-msg.is-err { color: var(--danger); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.8); padding-top: clamp(40px, 6vw, 72px); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; padding-bottom: 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .brand-the { color: rgba(255,255,255,.55); }
.footer-brand .brand-mark { background-color: var(--gold); }
.site-footer .muted { color: rgba(255,255,255,.6); }
.footer-social { display: flex; gap: 8px; margin-top: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: background .2s; }
.footer-social a:hover { background: rgba(255,255,255,.1); }
.footer-title { color: #fff; font-family: var(--font-body); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer-list li { margin-bottom: 2px; font-size: 14px; }
/* Inline list links were 17-22px tall — under the 24px minimum and well under what a
   thumb expects. The padding grows the target without moving the text. */
.footer-list a { display: inline-block; padding: 6px 0; min-height: 24px; }
.footer-list a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.footer-bottom p { margin: 0; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-icons li { padding: 4px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* ---------- Content / blog ---------- */
.prose { font-size: 17px; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 1em; }
.prose ul { list-style: disc; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.post-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card-media { display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.post-card-title { font-size: 26px; }
/* Works for the coded grid and for a core/columns block carrying the same class. */
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-grid.wp-block-columns { display: grid; flex-wrap: nowrap; }
.contact-grid .wp-block-column { flex-basis: auto !important; min-width: 0; }
.contact-content .contact-card > *:first-child { margin-top: 0; }
.contact-content .contact-card > *:last-child { margin-bottom: 0; }
.contact-details { list-style: none; margin: 0 0 18px; padding: 0; }
.contact-details li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15px; }
.contact-details li svg { color: var(--wine); flex: none; margin-top: 3px; }
.contact-content .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.contact-content .wp-block-button__link:hover { background: var(--wine); }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-card h3 { font-size: 24px; }
.contact-card li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15px; }
.contact-card li svg { color: var(--wine); flex: none; margin-top: 3px; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Announcement bar: room for two short lines on narrow screens */
@media (max-width: 600px) {
	.announce { font-size: 13px; }
	.announce-inner { gap: 4px; }
	.announce-inner, .announce-track { min-height: 44px; height: 44px; }
}

/* ---------- Core blocks wearing the theme's clothes ----------
   A core/button sets its class on the wrapper, so the styling has to reach the link. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--btn-radius); font-weight: 600; font-size: 14px; line-height: 1; text-transform: var(--btn-case); text-decoration: none; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-beloved-dark .wp-block-button__link { background: var(--ink); color: #fff; }
.wp-block-button.is-style-beloved-dark .wp-block-button__link:hover { background: var(--wine); color: #fff; }
.wp-block-button.is-style-beloved-ghost .wp-block-button__link { background: transparent; border-color: var(--ink); color: var(--ink); }
.wp-block-button.is-style-beloved-ghost .wp-block-button__link:hover { background: var(--ink); color: #fff; }
.hero-actions .wp-block-button__link { padding: 16px 28px; font-size: 15px; }
.is-style-beloved-display { font-family: var(--font-display); font-weight: var(--heading-weight); line-height: 1.05; }
.is-style-beloved-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); font-weight: 600; margin-bottom: 12px; }

/* ---------- Storefront extras (Customize → Design) ---------- */
.announce { background: var(--announce-bg, var(--ink)); color: var(--announce-fg, var(--cream)); position: relative; }
.announce-pause { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .6; cursor: pointer; transition: opacity .2s, background .2s; }
.announce-pause:hover { opacity: 1; background: rgba(255,255,255,.12); }
.announce-pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.announce-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; opacity: .7; }
.announce-close:hover { opacity: 1; }

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s var(--ease), background .2s; }
.to-top:hover { background: var(--ink); color: #fff; }
.to-top[hidden] { display: none; }

.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(0,0,0,.4); padding: 10px 0; }
.sticky-atc[hidden] { display: none; }
.sticky-atc-inner { display: flex; align-items: center; gap: 14px; }
.sticky-atc-img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.sticky-atc-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sticky-atc-copy strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc-copy span { font-size: 13px; color: var(--ink-2); }
.sticky-atc .btn { flex: none; }
@media (max-width: 560px) { .sticky-atc-img { display: none; } .to-top { bottom: 76px; } }

.delivery-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.delivery-line svg { color: var(--sage); flex: none; }

.pay-icons--product { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0 0; }
.pay-icons--product li { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); }

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; }
.share-row span { color: var(--ink-3); }
.share-row a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.share-row a:hover { color: var(--wine); }

/* Reassurance strip above the checkout form. It spans the full content width, so the
   items are centred and evenly spaced rather than huddled at one end of a wide box. */
.checkout-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 32px; list-style: none; padding: 14px 0 16px; margin: 0 0 28px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.checkout-trust li { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
.checkout-trust svg { flex: none; color: var(--sage); }

/* On a phone the three items become an even row: icon over label, nothing wrapping
   awkwardly onto a second line. */
@media (max-width: 640px) {
	.checkout-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 12px 0; margin-bottom: 22px; }
	.checkout-trust li { flex-direction: column; gap: 5px; text-align: center; font-size: 11px; line-height: 1.3; white-space: normal; }
}

/* The order summary sticks while the form scrolls. WooCommerce pins it 24px from the
   top of the viewport, which puts it underneath our sticky header and clips the
   heading, so the offset has to clear the header. A summary taller than the screen
   scrolls inside itself instead of having its bottom cut off. */
.wc-block-checkout__sidebar.is-sticky,
.wc-block-cart__sidebar.is-sticky {
	top: calc(var(--header-h) + 20px);
	max-height: calc(100vh - var(--header-h) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.wc-block-checkout__sidebar.is-sticky::-webkit-scrollbar,
.wc-block-cart__sidebar.is-sticky::-webkit-scrollbar { width: 6px; }
.wc-block-checkout__sidebar.is-sticky::-webkit-scrollbar-thumb,
.wc-block-cart__sidebar.is-sticky::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* WooCommerce splits cart and checkout 65/35 at any width above the phone breakpoint,
   which leaves the order summary about 250px wide on a tablet — narrow enough that a
   product name wraps to one word per line. Below 1024px the columns stack instead, the
   same way they already do on a phone. Selectors are doubled up only to outweigh
   WooCommerce's own rules, which load after this stylesheet. */
@media (max-width: 1023px) {
	/* On checkout the layout is a child of the block; on cart the block root IS the
	   layout, hence the two shapes of selector. */
	.wc-block-checkout .wc-block-components-sidebar-layout.wc-block-components-sidebar-layout,
	.wc-block-components-sidebar-layout.wc-block-cart.wc-block-cart { flex-direction: column; }

	.wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-main { width: 100%; padding-right: 0; }

	.wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-sidebar { width: 100%; max-width: 100%; padding-left: 0; }

	/* On checkout the summary goes above the form, so the total stays in view while the
	   address is typed — the order WooCommerce already uses on a phone. The cart keeps
	   its items first and the totals underneath, which is how a cart is read. */
	.wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar { order: -1; }

	/* Nothing is pinned once the columns stack, so the height cap must come off too. */
	.wc-block-checkout .wc-block-checkout__sidebar.is-sticky,
	.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__sidebar.is-sticky { position: static; max-height: none; overflow: visible; }
}

/* ---------- Sign in / create account ---------- */

/* One panel, two tabs, driven by radio inputs so it needs no JavaScript. */
.acct-auth { max-width: 460px; }
.acct-auth--login-only { max-width: 420px; }

.acct-tab-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.acct-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); }

.acct-tab {
	flex: 1;
	text-align: center;
	padding: 10px 14px;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	transition: background .18s, color .18s;
}
.acct-tab:hover { color: var(--ink); }

/* The checked radio lights its own tab and reveals the matching panel. */
#acct-tab-login:checked ~ .acct-tabs .acct-tab[for="acct-tab-login"],
#acct-tab-register:checked ~ .acct-tabs .acct-tab[for="acct-tab-register"] { background: var(--ink); color: #fff; }

.acct-tab-input:focus-visible ~ .acct-tabs .acct-tab { outline: 2px solid var(--ink); outline-offset: 2px; }

.acct-panel { display: none; }
.acct-auth--login-only .acct-panel--login,
#acct-tab-login:checked ~ .acct-panels .acct-panel--login,
#acct-tab-register:checked ~ .acct-panels .acct-panel--register { display: block; }

.acct-title { margin: 0 0 18px; font-size: 22px; }

.acct-form .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.acct-form label { font-size: 13px; font-weight: 600; }
.acct-form .required { color: #b32d2e; }

.acct-form input[type="text"],
.acct-form input[type="email"],
.acct-form input[type="password"] {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	font: inherit;
	font-size: 15px;
}
.acct-form input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }

/* WooCommerce's form styling stretches the submit button to the row, so the checkbox
   and the button are stacked deliberately rather than left to wrap by accident. */
.acct-form-actions { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; margin-top: 22px !important; }

.woocommerce-form-login__rememberme { flex-direction: row; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.woocommerce-form-login__rememberme input { margin: 0; }

.acct-btn {
	width: 100%;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	padding: 13px 26px;
	border: 1px solid var(--ink);
	border-radius: 99px;
	background: var(--ink);
	color: #fff;
	cursor: pointer;
}
.acct-btn:hover { opacity: .88; }

/* WooCommerce appends a password-strength line to this row once zxcvbn has loaded,
   which on a slow connection can be well after the page looks settled. Taking it out
   of flow and reserving the space means the button below can never move out from
   under a pointer between mousedown and mouseup, which silently loses the click. */
.acct-form .form-row { position: relative; }
.acct-form .woocommerce-password-strength,
.acct-form .woocommerce-password-hint {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink-2);
}
.acct-form .woocommerce-password-strength.short,
.acct-form .woocommerce-password-strength.bad { color: #b32d2e; }
.acct-form .woocommerce-password-strength.good { color: #8a5700; }
.acct-form .woocommerce-password-strength.strong { color: #1a7f37; }
.acct-panel--register .form-row:has(#reg_password) { margin-bottom: 42px; }

.acct-lost { margin: 16px 0 0; font-size: 13px; }
.acct-lost a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.acct-note { font-size: 13px; color: var(--ink-2); margin: 0 0 16px; }

@media (max-width: 480px) {
	.acct-auth { max-width: none; }
}

/* "You are currently checking out as a guest" sits directly above the create-account
   box, so once that box is ticked the sentence contradicts it. */
.wc-block-components-address-form:has(input[type="checkbox"]:checked) .wc-block-checkout__guest-checkout-notice { display: none; }


.badge--new { background: var(--sage); color: #fff; }

/* Motion switches */
.no-hover-lift .btn:hover, .no-hover-lift .wp-block-button__link:hover, .no-hover-lift li.product:hover .card-img--main { transform: none !important; }
.no-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Menu position */
@media (min-width: 900px) {
	.menu-left .header-inner { grid-template-columns: auto 1fr auto; }
	.menu-left .site-brand { order: -1; }
	.menu-left .site-nav { justify-content: flex-start; margin-left: 24px; }
	.menu-right .site-nav { justify-content: flex-end; }
}
.ship-bar[hidden] { display: none; }