/* ==========================================================================
   Baby Loss Gifts — child theme styles
   Gentle, accessible, commercially credible. British English throughout.

   0. Local fonts (privacy-conscious, no external requests)
   1. Design tokens
   2. Base + accessibility
   3. Layout helpers
   4. Buttons
   5. Cards
   6. Homepage sections (pattern-friendly)
   7. Guidance / article
   8. Gift recommendation cards + affiliate disclosure
   9. Email signup
   10. Header
   11. Footer
   12. Reduced motion + responsive
   ========================================================================== */

/* 0. LOCAL FONTS
   Variable woff2, Latin subset, self-hosted. font-display:swap so text is
   never invisible while loading.
   ------------------------------------------------------------------------ */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2-variations");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin.woff2") format("woff2-variations");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
/* Archistico — brand display face. Two cuts from the same family:
   Simple = weight 400 (normal), Bold = weight 700. Limited glyph set
   (Latin, no italic), so it is used for headings/brand only; Inter carries
   body text. woff2 loads first, ttf is a fallback source. */
@font-face {
	font-family: "Archistico";
	src: url("../fonts/archistico-simple.woff2") format("woff2"),
	     url("../fonts/archistico-simple.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Archistico";
	src: url("../fonts/archistico-bold.woff2") format("woff2"),
	     url("../fonts/archistico-bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* Saylor — handwritten accent face for short phrases (e.g. "Gifts"). Small
   glyph set; never used for body or long text. */
@font-face {
	font-family: "Saylor";
	src: url("../fonts/saylor.woff2") format("woff2"),
	     url("../fonts/saylor.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* 1. DESIGN TOKENS
   Baby Loss Gifts brand palette (grown from Lotty Lollipop).

   Brand colours (exact):
     Lotty Sky Blue    #9CC9E8   heritage / feature backgrounds
     Warm Chalk White  #FFF9F2   page background
     Lotty Cocoa       #6B4A3D   headings, text, outlines, primary buttons
     Deep Bark Brown   #4A352D   darkest text, footer, hover
     Snowdrop Sage     #9CAF95   guidance / reassurance
     Dusty Rose        #D7A2AA   sparing accent
     Soft Lavender     #B9A7CF   sparing accent
     Twilight Blue     #44577E   sparing accent
     Warm Taupe        #CDB8A6   sparing accent
     Lollipop Gold     #E4B83F   tiny accents / moments of hope only

   The variable NAMES below are kept stable for continuity, but their VALUES
   now map onto the brand palette. Brand-named aliases are provided too, so new
   rules can use the clearer names.
   ------------------------------------------------------------------------ */
:root {
	/* Brand-named tokens (preferred for new work). */
	--blg-sky:          #9CC9E8; /* Lotty Sky Blue */
	--blg-sky-deep:     #7FB4D8; /* slightly deeper sky for borders/hover on sky */
	--blg-chalk:        #FFF9F2; /* Warm Chalk White */
	--blg-chalk-deep:   #F3E9DD; /* warm chalk shade for alternating sections */
	--blg-cocoa:        #6B4A3D; /* Lotty Cocoa */
	--blg-bark:         #4A352D; /* Deep Bark Brown */
	--blg-sage-brand:   #9CAF95; /* Snowdrop Sage */
	--blg-rose-brand:   #D7A2AA; /* Dusty Rose */
	--blg-lavender:     #B9A7CF; /* Soft Lavender */
	--blg-twilight:     #44577E; /* Twilight Blue */
	--blg-taupe-brand:  #CDB8A6; /* Warm Taupe */
	--blg-gold:         #E4B83F; /* Lollipop Gold (tiny accents only) */

	/* Continuity tokens (existing rules use these names). Values remapped. */
	--blg-cream:        #FFF9F2; /* was page bg -> Warm Chalk White */
	--blg-cream-deep:   #F3E9DD; /* alternating section -> warm chalk shade */
	--blg-white:        #FFFFFF; /* cards */
	--blg-blush:        #D7A2AA; /* soft accent -> Dusty Rose */
	--blg-rose:         #6B4A3D; /* primary button/accent -> Lotty Cocoa */
	--blg-rose-deep:    #4A352D; /* primary hover, links -> Deep Bark Brown */
	--blg-lilac:        #B9A7CF; /* accent -> Soft Lavender */
	--blg-sage:         #9CAF95; /* guidance -> Snowdrop Sage */
	--blg-sage-deep:    #627357; /* sage shade for text/details (AA on white/chalk) */
	--blg-taupe:        #CDB8A6; /* muted -> Warm Taupe */
	--blg-plum:         #4A352D; /* body + heading text -> Deep Bark Brown */
	--blg-plum-soft:    #6B4A3D; /* secondary text -> Lotty Cocoa */
	--blg-line:         #EADFD1; /* warm hairline borders */

	--blg-display: "Archistico", "Fraunces", Georgia, "Times New Roman", serif;
	--blg-script:  "Saylor", "Archistico", "Brush Script MT", cursive;
	--blg-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--blg-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
	--blg-step-0:  clamp(1.02rem, 0.98rem + 0.22vw, 1.15rem);
	--blg-step-1:  clamp(1.24rem, 1.15rem + 0.45vw, 1.55rem);
	--blg-step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
	--blg-step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.9rem);
	--blg-step-4:  clamp(2.2rem, 1.7rem + 2.5vw, 3.6rem);

	--blg-space-xs: 0.5rem;
	--blg-space-s:  0.9rem;
	--blg-space-m:  1.6rem;
	--blg-space-l:  2.6rem;
	--blg-space-xl: 4rem;
	--blg-space-2xl: 6rem;

	--blg-radius:      18px;
	--blg-radius-lg:   28px;
	--blg-radius-pill: 999px;
	--blg-shadow: 0 10px 30px -18px rgba(74, 53, 45, 0.35);
	--blg-shadow-soft: 0 4px 16px -12px rgba(74, 53, 45, 0.4);

	--blg-content: 1120px;
	--blg-reading: 68ch;
}

/* 2. BASE + ACCESSIBILITY
   ------------------------------------------------------------------------ */
.blg-scope {
	background: var(--blg-cream);
	color: var(--blg-plum);
	font-family: var(--blg-body);
	font-size: var(--blg-step-0);
	line-height: 1.65;
}

.blg-scope h1, .blg-scope h2, .blg-scope h3, .blg-scope h4 {
	font-family: var(--blg-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--blg-plum);
	letter-spacing: -0.01em;
	margin: 0 0 var(--blg-space-s);
}
.blg-scope h1 { font-size: var(--blg-step-4); font-weight: 700; }
.blg-scope h2 { font-size: var(--blg-step-3); }
.blg-scope h3 { font-size: var(--blg-step-1); }
.blg-scope p  { margin: 0 0 var(--blg-space-m); max-width: var(--blg-reading); }

.blg-scope a {
	color: var(--blg-cocoa);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.blg-scope a:hover { color: var(--blg-bark); }

.blg-scope a:focus-visible,
.blg-scope button:focus-visible,
.blg-scope input:focus-visible,
.blg-scope [tabindex]:focus-visible {
	outline: 3px solid var(--blg-rose-deep);
	outline-offset: 3px;
	border-radius: 6px;
}

.blg-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* 3. LAYOUT HELPERS
   ------------------------------------------------------------------------ */
.blg-wrap {
	width: min(100% - 2.5rem, var(--blg-content));
	margin-inline: auto;
}
.blg-section { padding-block: var(--blg-space-2xl); }
.blg-section--tight { padding-block: var(--blg-space-xl); }
.blg-section--deep { background: var(--blg-cream-deep); }
.blg-section--blush { background: var(--blg-blush); }

.blg-eyebrow {
	font-family: var(--blg-body);
	font-size: var(--blg-step--1);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blg-cocoa);
	margin-bottom: var(--blg-space-xs);
	display: block;
}
.blg-section__intro { max-width: 60ch; margin-bottom: var(--blg-space-l); }

/* Handwritten accent (Saylor). Use sparingly for short phrases — e.g. a
   signature word like "Gifts" or a warm one-line flourish. Never for body or
   long text (limited glyph set). Apply the class in template markup:
   <span class="blg-script">Gifts</span> */
.blg-script {
	font-family: var(--blg-script);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* 4. BUTTONS
   ------------------------------------------------------------------------ */
.blg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--blg-body);
	font-weight: 600;
	font-size: var(--blg-step-0);
	line-height: 1.2;
	padding: 0.85rem 1.6rem;
	border-radius: var(--blg-radius-pill);
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.blg-btn--primary { background: var(--blg-rose); color: var(--blg-white); }
.blg-btn--primary:hover { background: var(--blg-rose-deep); color: var(--blg-white); transform: translateY(-1px); }
.blg-btn--ghost { background: transparent; color: var(--blg-plum); border-color: var(--blg-rose); }
.blg-btn--ghost:hover { background: var(--blg-white); color: var(--blg-plum); border-color: var(--blg-rose-deep); }
/* Ensure button text colour wins over the generic link colour rule. */
.blg-scope a.blg-btn--primary { color: var(--blg-white); }
.blg-scope a.blg-btn--primary:hover { color: var(--blg-white); }
.blg-scope a.blg-btn--ghost { color: var(--blg-plum); }
.blg-scope a.blg-btn--ghost:hover { color: var(--blg-plum); }

/* On-dark button: pale outlined, for use over the Nightsky image. */
.blg-btn--ondark { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.8); }
.blg-btn--ondark:hover { background: #FFFFFF; color: var(--blg-twilight); border-color: #FFFFFF; }
.blg-scope a.blg-btn--ondark { color: #FFFFFF; }
.blg-scope a.blg-btn--ondark:hover { color: var(--blg-twilight); }
.blg-btn--ondark:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* 5. CARDS
   ------------------------------------------------------------------------ */
.blg-grid {
	display: grid;
	gap: var(--blg-space-m);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.blg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.blg-card {
	background: var(--blg-white);
	border: 1px solid var(--blg-line);
	border-radius: var(--blg-radius-lg);
	padding: var(--blg-space-l) var(--blg-space-m);
	text-decoration: none;
	color: var(--blg-plum);
	display: flex;
	flex-direction: column;
	gap: var(--blg-space-xs);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
}
a.blg-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--blg-shadow);
	border-color: var(--blg-blush);
	color: var(--blg-plum);
}
.blg-card__label { font-family: var(--blg-display); font-size: var(--blg-step-1); font-weight: 400; }
.blg-card__text { font-size: var(--blg-step--1); color: var(--blg-plum-soft); margin: 0; }
.blg-card__leaf { width: 26px; height: 26px; color: var(--blg-sage); opacity: 0.9; margin-bottom: 0.25rem; }

/* 6. HOMEPAGE HERO (pattern-friendly)
   ------------------------------------------------------------------------ */
/* Hero.
   Default (no image set): the original soft sky-blue gradient.
   With an image (.blg-hero--image): the dandelion illustration as a full-bleed
   background, with a three-part grid — left copy / clear dandelion centre /
   right "Created with understanding". Tunable via the CSS variables below. */
.blg-hero {
	--hero-min: clamp(28rem, 50vw, 46rem); /* 2:1-derived height (50vw); grows if text needs it */
	--hero-center: 24%;   /* width of the protected dandelion column */
	--hero-side: 38%;     /* width of each text column */
	--hero-pos: center 60%; /* background focal point; adjust to taste */
	--hero-wash: rgba(255, 249, 242, 0); /* localised text backing; raise alpha if needed */
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(156, 201, 232, 0.55), transparent 55%),
		radial-gradient(110% 80% at 10% 90%, rgba(156, 175, 149, 0.25), transparent 55%),
		var(--blg-sky);
	padding-block: var(--blg-space-2xl);
	overflow: hidden;
}
/* Image hero: dandelion artwork as the visual foundation. The background-image
   itself is set inline on the element (the media URL); here we only set the
   sizing/position so we never override that inline value with a shorthand. */
.blg-hero--image {
	/* Full-bleed: break out of the page content container so the artwork spans
	   the entire viewport width, edge to edge. The inner .blg-wrap keeps the
	   text aligned to the site content width. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	background-color: var(--blg-sky); /* shows behind the image while it loads */
	background-size: cover;
	background-position: var(--hero-pos);
	background-repeat: no-repeat;
	padding-block: var(--blg-space-l);
	border-radius: 0; /* full-bleed band has no rounded corners */
	/* Landscape 2:1 shape, matching the artwork. Height is driven by width via
	   the --hero-min variable (50vw ≈ 2:1), capped so it never gets gigantic on
	   ultra-wide screens. Using min-height (not aspect-ratio) lets the box GROW
	   if the text ever needs more room, so content never clips. To change the
	   landscape feel, adjust --hero-min at the top of .blg-hero. */
	min-height: var(--hero-min);
	display: flex;
	align-items: center;
}

.blg-hero__grid {
	display: grid;
	grid-template-columns: var(--hero-side) var(--hero-center) var(--hero-side);
	gap: var(--blg-space-l);
	align-items: center;
	/* Cap the text to the site content width and centre it, even though the
	   section background is full-bleed. */
	width: min(100% - 2.5rem, var(--blg-content));
	margin-inline: auto;
}
.blg-hero__center { min-height: 1px; } /* reserved dandelion space, stays empty */

.blg-hero h1 { margin-bottom: var(--blg-space-m); }
/* Hero-specific type sizing: smaller than the global h1/h2 so the heading fits
   the side columns without overflowing or clipping. */
.blg-hero--image .blg-hero__copy h1 {
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.9rem);
	line-height: 1.1;
}
.blg-hero__lede { font-size: var(--blg-step-1); color: var(--blg-bark); max-width: 42ch; }
.blg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--blg-space-s); margin-top: var(--blg-space-m); }

/* Right column: Created with understanding. */
.blg-hero__aside { max-width: 42ch; }
.blg-hero__aside-title { font-size: var(--blg-step-2); margin-bottom: var(--blg-space-s); }
.blg-hero--image .blg-hero__aside .blg-hero__aside-title {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
	line-height: 1.15;
}
.blg-hero__aside p { color: var(--blg-bark); }

/* Optional localised cream wash behind each text column for readability on a
   busy patch of artwork. Off by default (--hero-wash alpha 0). Raise the alpha
   on --hero-wash to switch it on without touching markup. */
.blg-hero--image .blg-hero__copy,
.blg-hero--image .blg-hero__aside {
	background: var(--hero-wash);
	border-radius: var(--blg-radius);
	padding: clamp(0.5rem, 2vw, 1.25rem);
}

/* 7. GUIDANCE / ARTICLE
   ------------------------------------------------------------------------ */
.blg-article { width: min(100% - 2.5rem, 760px); margin-inline: auto; padding-block: var(--blg-space-xl); }
.blg-article p, .blg-article li { max-width: var(--blg-reading); }
.blg-article h2 { margin-top: var(--blg-space-l); }

.blg-signpost {
	background: var(--blg-cream-deep);
	border: 1px solid var(--blg-line);
	border-left: 4px solid var(--blg-sage);
	border-radius: var(--blg-radius);
	padding: var(--blg-space-m);
	margin-block: var(--blg-space-l);
}
.blg-signpost p { margin-bottom: 0; }

/* 8. GIFT CARD + AFFILIATE DISCLOSURE
   ------------------------------------------------------------------------ */
.blg-gift {
	background: var(--blg-white);
	border: 1px solid var(--blg-line);
	border-radius: var(--blg-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.blg-gift__media { aspect-ratio: 4 / 3; background: var(--blg-cream-deep); object-fit: cover; width: 100%; }
.blg-gift__media--empty {
	display: flex;
	background:
		radial-gradient(60% 60% at 50% 45%, rgba(185, 167, 207, 0.45), transparent 70%),
		var(--blg-cream-deep);
}
.blg-gift__body { padding: var(--blg-space-m); display: flex; flex-direction: column; gap: var(--blg-space-xs); flex: 1; }
.blg-gift__name { font-family: var(--blg-display); font-size: var(--blg-step-1); margin: 0; }
.blg-gift__desc { font-size: var(--blg-step--1); color: var(--blg-plum-soft); margin: 0; }
.blg-gift__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.blg-tag {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.7rem;
	border-radius: var(--blg-radius-pill);
	background: var(--blg-blush);
	color: var(--blg-plum);
}
.blg-tag--sage { background: var(--blg-sage); color: var(--blg-bark); }
.blg-tag--lilac { background: var(--blg-lilac); color: var(--blg-plum); }
.blg-gift__price { font-weight: 600; }
.blg-gift__cta { margin-top: var(--blg-space-xs); align-self: flex-start; }

.blg-affiliate-note {
	font-size: var(--blg-step--1);
	color: var(--blg-plum-soft);
	background: var(--blg-cream-deep);
	border-radius: var(--blg-radius);
	padding: var(--blg-space-s) var(--blg-space-m);
	margin-block: var(--blg-space-m);
}

/* 9. EMAIL SIGNUP
   ------------------------------------------------------------------------ */
.blg-signup {
	background: var(--blg-white);
	border: 1px solid var(--blg-line);
	border-radius: var(--blg-radius-lg);
	padding: var(--blg-space-l);
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}
.blg-signup__form { display: flex; gap: var(--blg-space-s); flex-wrap: wrap; justify-content: center; margin-top: var(--blg-space-m); }
.blg-signup__form input[type="email"] {
	flex: 1 1 240px;
	padding: 0.85rem 1.1rem;
	border: 1.5px solid var(--blg-line);
	border-radius: var(--blg-radius-pill);
	font-family: var(--blg-body);
	font-size: var(--blg-step-0);
	background: var(--blg-cream);
	color: var(--blg-plum);
}
.blg-signup__note { font-size: var(--blg-step--1); color: var(--blg-plum-soft); margin-top: var(--blg-space-s); }
.blg-signup__msg { margin-top: var(--blg-space-s); font-weight: 600; }
.blg-signup__msg--ok { color: var(--blg-sage-deep); }
.blg-signup__msg--err { color: var(--blg-rose-deep); }
.blg-signup--placeholder {
	border-style: dashed;
	background: var(--blg-cream-deep);
}

/* 10. FOOTER
   The site header is provided by the Astra parent theme; this child theme
   styles only the custom footer added via Astra's footer hook.
   ------------------------------------------------------------------------ */
.blg-footer {
	position: relative;
	background: var(--blg-chalk);
	color: var(--blg-bark);
	margin-top: var(--blg-space-2xl);
}
/* Snowdrop border: delicate artwork sitting directly above the cream area,
   as though growing out of it. Repeats horizontally only to fill wide screens;
   natural height so it is never stretched. */
.blg-footer__snowdrops {
	height: 96px;
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 96px;
	margin-bottom: -1px; /* seat the flowers onto the cream with no gap */
}
@media (max-width: 782px) {
	.blg-footer__snowdrops { height: 72px; background-size: auto 72px; }
}
@media (max-width: 480px) {
	.blg-footer__snowdrops { height: 56px; background-size: auto 56px; }
}
.blg-footer__main { padding-block: var(--blg-space-xl) var(--blg-space-l); }
.blg-footer a { color: var(--blg-cocoa); text-decoration: none; }
.blg-footer a:hover { color: var(--blg-bark); text-decoration: underline; }
.blg-footer a:focus-visible {
	outline: 2px solid var(--blg-cocoa);
	outline-offset: 3px;
	border-radius: 3px;
}
.blg-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.6fr;
	gap: var(--blg-space-l);
	align-items: start;
}
.blg-footer__heading {
	font-family: var(--blg-body);
	font-size: var(--blg-step--1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--blg-cocoa);
	margin: 0 0 var(--blg-space-s);
}
.blg-footer ul { list-style: none; padding: 0; margin: 0; }
.blg-footer li { margin-bottom: 0.55rem; }
.blg-footer__hint { font-size: 0.8rem; color: var(--blg-sage-deep); margin-top: 0.6rem; }

/* Brand column. */
.blg-footer__brand {
	font-family: var(--blg-display);
	font-weight: 700;
	font-size: var(--blg-step-2);
	color: var(--blg-bark);
	display: inline-block;
	margin-bottom: var(--blg-space-xs);
}
.blg-footer__brand:hover { text-decoration: none; color: var(--blg-cocoa); }
.blg-footer__statement { color: var(--blg-bark); max-width: 32ch; margin-bottom: var(--blg-space-s); }
.blg-footer__mark { color: var(--blg-sage); margin: 0; }

/* "Stay close" panel: soft, lightly tinted, rounded — inviting not aggressive. */
.blg-footer__stay {
	background: var(--blg-white);
	border: 1px solid var(--blg-line);
	border-radius: var(--blg-radius-lg);
	padding: var(--blg-space-m);
}
.blg-footer__stay .blg-footer__heading { color: var(--blg-cocoa); }
.blg-footer__stay-text { font-size: var(--blg-step--1); color: var(--blg-bark); margin-bottom: var(--blg-space-s); }

/* The shared signup component drops its card chrome inside the Stay close panel
   (no card-in-a-card), and aligns left with a full-width field on narrow space. */
.blg-footer__stay .blg-signup {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	max-width: none;
	margin: 0;
	text-align: left;
}
.blg-footer__stay .blg-signup--placeholder { background: transparent; }
.blg-footer__stay .blg-signup__form { justify-content: flex-start; margin-top: 0; }
.blg-footer__stay .blg-signup__form input[type="email"] { background: var(--blg-chalk); flex: 1 1 100%; }
.blg-footer__stay .blg-signup__note { color: var(--blg-sage-deep); }

/* Legal bar: fine border, handmade centre phrase, small social icons. */
.blg-footer__legal {
	border-top: 1px solid var(--blg-line);
	margin-top: var(--blg-space-l);
	padding-top: var(--blg-space-m);
	padding-bottom: var(--blg-space-l);
	font-size: var(--blg-step--1);
	color: var(--blg-cocoa);
	display: flex;
	flex-wrap: wrap;
	gap: var(--blg-space-m);
	align-items: center;
	justify-content: space-between;
}
.blg-footer__phrase {
	font-size: var(--blg-step-1);
	color: var(--blg-sage-deep);
}
.blg-footer__legal-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-m);
}
.blg-footer__legal-menu { display: flex; flex-wrap: wrap; gap: var(--blg-space-m); }
.blg-footer__legal-menu li { margin: 0; }
.blg-footer__social { display: flex; gap: 0.6rem; align-items: center; }
.blg-footer__social li { margin: 0; }
.blg-footer__social a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--blg-line);
	border-radius: 50%;
	color: var(--blg-cocoa);
}
.blg-footer__social a:hover {
	background: var(--blg-cocoa);
	color: var(--blg-white);
	text-decoration: none;
}

/* 12. REDUCED MOTION + RESPONSIVE
   ------------------------------------------------------------------------ */
.blg-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.blg-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.blg-scope * { animation: none !important; transition: none !important; }
	.blg-reveal { opacity: 1; transform: none; }
	a.blg-card:hover, .blg-btn--primary:hover { transform: none; }
}

@media (max-width: 1024px) {
	/* Tablet: keep two text columns but drop the reserved centre gap so the
	   dandelions sit behind, and ease the type down. */
	.blg-hero {
		--hero-center: 8%;
		--hero-side: 46%;
	}
	.blg-hero__aside-title { font-size: var(--blg-step-1); }
}
@media (max-width: 860px) {
	/* Mobile: stack — hero copy first, a clear band of dandelion artwork in the
	   middle, then Created with understanding. The centre row shows the image
	   (which is the section background) through an unobstructed strip. */
	.blg-hero--image {
		--hero-pos: center 62%;
		aspect-ratio: auto;
		display: block;
		min-height: 0;
		padding-block: var(--blg-space-l);
	}
	.blg-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--blg-space-m);
	}
	.blg-hero__center {
		min-height: 40vw; /* a visible band of dandelions between the two texts */
		max-height: 260px;
	}
	.blg-hero__copy, .blg-hero__aside { max-width: none; }
	/* Turn the localised wash on by default on mobile, where text sits directly
	   over more of the artwork. Subtle, not a card. */
	.blg-hero--image .blg-hero__copy,
	.blg-hero--image .blg-hero__aside {
		background: rgba(255, 249, 242, 0.72);
	}
	/* Tablet footer wrap. */
	.blg-footer__grid { grid-template-columns: 1fr 1fr; }
	.blg-footer__col--brand { grid-column: 1 / -1; }
	.blg-footer__col--stay { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.blg-section { padding-block: var(--blg-space-xl); }
	/* Mobile: stack everything, brand first, tap-friendly links. */
	.blg-footer__grid { grid-template-columns: 1fr; }
	.blg-footer li { margin-bottom: 0.75rem; }
	.blg-footer__legal { justify-content: center; text-align: center; flex-direction: column; }
	.blg-footer__legal-right { justify-content: center; }
}

/* 13. ASTRA OVERRIDES — remove all default Astra blue
   ------------------------------------------------------------------------
   Astra ships a blue accent (commonly #0274be / #046bd2) and exposes theme
   colours through --ast-global-color-* custom properties. We remap those
   variables to the brand palette at the root, then belt-and-braces override
   the specific components Astra colours directly, so no default blue appears
   in links, buttons, header, navigation, focus rings, forms, pagination,
   breadcrumbs, or inherited LearnDash / WooCommerce elements.

   Brand mapping used here:
     global-color-0 (primary/link)         -> Lotty Cocoa   #6B4A3D
     global-color-1 (link hover / accent)  -> Deep Bark     #4A352D
     global-color-2 (headings)             -> Deep Bark     #4A352D
     global-color-3 (body text)            -> Deep Bark     #4A352D
     global-color-4 (light background)     -> Warm Chalk     #FFF9F2
     global-color-5 (section background)   -> warm chalk deep #F3E9DD
     global-color-6/7 (borders/subtle)     -> warm hairline  #EADFD1
   ------------------------------------------------------------------------ */
:root {
	--ast-global-color-0: #6B4A3D; /* primary / links */
	--ast-global-color-1: #4A352D; /* link hover / accent */
	--ast-global-color-2: #4A352D; /* headings */
	--ast-global-color-3: #4A352D; /* body text */
	--ast-global-color-4: #FFF9F2; /* light background */
	--ast-global-color-5: #F3E9DD; /* alt section background */
	--ast-global-color-6: #EADFD1; /* subtle border */
	--ast-global-color-7: #EADFD1; /* subtle border */
	--ast-global-color-8: #6B4A3D;

	/* Some Astra builds also read these link tokens. */
	--ast-link-color:       #6B4A3D;
	--ast-link-hover-color: #4A352D;

	/* Button tokens used by Astra's button styling. */
	--ast-global-color-primary:        #6B4A3D;
	--ast-global-color-primary-hover:  #4A352D;
}

/* Links in Astra-rendered content (posts, pages, widgets). */
.ast-container a,
.entry-content a,
.site-content a,
.ast-header-break-point a,
.main-header-menu a {
	color: #6B4A3D;
}
.ast-container a:hover,
.entry-content a:hover,
.site-content a:hover {
	color: #4A352D;
}

/* Primary Astra buttons and theme/WordPress button classes. */
.ast-button,
.button,
button.ast-button,
.wp-block-button__link,
input[type="submit"],
.ast-custom-button,
.menu-toggle {
	background-color: #6B4A3D;
	border-color: #6B4A3D;
	color: #FFFFFF;
}
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.ast-custom-button:hover {
	background-color: #4A352D;
	border-color: #4A352D;
	color: #FFFFFF;
}

/* Header + primary navigation.
   Sky Blue heritage bar with Deep Bark Brown text (6.5:1, passes AA). Sky Blue
   is pale, so header text must be dark, never white. */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap {
	background-color: #9CC9E8;
	border-bottom-color: #7FB4D8;
}
.main-header-menu,
.ast-desktop .main-header-menu.submenu-with-border .sub-menu {
	border-color: #7FB4D8;
}
/* Site title (when a text title is shown) stays dark on the blue bar. */
.site-title a,
.ast-site-title-wrap .site-title a,
.site-title a:focus,
.site-title a:hover {
	color: #4A352D;
}
.main-header-menu .menu-item > a,
.ast-header-break-point .main-header-menu .menu-item > a {
	color: #4A352D;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a,
.main-header-menu .menu-item.focus > a {
	color: #6B4A3D;
}
/* Submenus (dropdowns) sit on chalk with dark text for readability. */
.main-header-menu .sub-menu {
	background-color: #FFF9F2;
}
.main-header-menu .sub-menu .menu-item > a { color: #4A352D; }
.main-header-menu .sub-menu .menu-item > a:hover { color: #6B4A3D; }

/* Hardcoded brand logo in place of the text title (Option B).
   Astra keeps the .site-title element; we swap in the logo image. */
.blg-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.blg-logo {
	display: block;
	height: auto;
	max-height: 72px;
	width: auto;
}
@media (max-width: 600px) {
	.blg-logo { max-height: 52px; }
}

/* --- Header height + vertical rhythm -----------------------------------
   The default Astra header is tall, which leaves the logo marooned in empty
   blue. Compress the bar to roughly 84px, vertically centre the branding and
   navigation, and give the logo a little breathing room top and bottom so the
   brand — not the whitespace — is the focal point. */
.ast-primary-header-bar .site-header-primary-inner-wrap,
.main-header-bar,
.ast-primary-header-bar .ast-container {
	min-height: 0;
}
.site-header .main-header-bar {
	padding-top: 6px;
	padding-bottom: 6px;
}
/* Vertically centre the branding + nav row. */
.main-header-bar-wrap .main-header-bar,
.ast-flex,
.site-primary-header-wrap .ast-container {
	display: flex;
	align-items: center;
}
/* Trim Astra's site-branding padding so the logo sits centred, not hugging the top. */
.site-branding,
.ast-site-identity {
	padding: 0;
	display: flex;
	align-items: center;
}
/* Keep the sky bar tidy on desktop: a calm fixed-ish height. */
@media (min-width: 922px) {
	.site-header .main-header-bar { min-height: 84px; }
}

/* Mobile menu toggle icon + its bars, and mobile menu background. */
.ast-mobile-menu-buttons-minimal,
button.menu-toggle.main-header-menu-toggle {
	color: #6B4A3D;
	background: transparent;
}
.menu-toggle .menu-toggle-icon,
.ast-mobile-menu-buttons-fill.ast-button {
	background-color: #6B4A3D;
	color: #FFFFFF;
}
.ast-mobile-header-wrap .main-header-menu,
.ast-mobile-popup-drawer .main-header-menu {
	background-color: #FFF9F2;
}
.ast-mobile-popup-drawer .menu-item > a { color: #4A352D; }
.ast-mobile-popup-drawer .menu-item > a:hover { color: #6B4A3D; }

/* Focus states everywhere (accessibility). */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.ast-button:focus,
.wp-block-button__link:focus {
	outline-color: #4A352D;
}
input:focus,
textarea:focus,
select:focus {
	border-color: #6B4A3D;
	box-shadow: 0 0 0 2px rgba(107, 74, 61, 0.35);
}

/* Form field borders. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border-color: #EADFD1;
}

/* Pagination + archive navigation. */
.ast-pagination a,
.page-links a,
.paging-navigation a,
.post-navigation a,
.nav-links a {
	color: #6B4A3D;
}
.ast-pagination .current,
.page-links > .page-links-title,
.nav-links .current {
	background-color: #6B4A3D;
	border-color: #6B4A3D;
	color: #FFFFFF;
}

/* Breadcrumbs (Astra + common plugins). */
.ast-breadcrumbs a,
.trail-items a,
.breadcrumb a,
nav.woocommerce-breadcrumb a {
	color: #6B4A3D;
}
.ast-breadcrumbs .last-item,
.trail-items .trail-end {
	color: #4A352D;
}

/* LearnDash (if inherited): accent buttons and progress. */
.learndash-wrapper .ld-primary-color,
.learndash-wrapper a.ld-primary-color,
.learndash-wrapper .ld-primary-background,
.learndash-wrapper .btn-join,
.learndash-wrapper .ld-button {
	color: #FFFFFF;
	background-color: #6B4A3D;
	border-color: #6B4A3D;
}
.learndash-wrapper .ld-primary-color-hover:hover,
.learndash-wrapper .ld-button:hover {
	background-color: #4A352D;
	border-color: #4A352D;
}
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	background-color: #9CAF95; /* sage progress reads as reassurance */
}

/* WooCommerce (if inherited): buttons, sale badge, price, links. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background-color: #6B4A3D;
	color: #FFFFFF;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
	background-color: #4A352D;
	color: #FFFFFF;
}
.woocommerce span.onsale {
	background-color: #E4B83F; /* Lollipop Gold accent */
	color: #4A352D;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce a { color: #6B4A3D; }

/* 14. FIND A GIFT — finder + enhanced gift detail (Phase 2)
   Uses only brand tokens. Selected states use a filled chip + a check mark, so
   selection never relies on colour alone.
   ------------------------------------------------------------------------ */
.blg-finder { margin-block: var(--blg-space-l); }
.blg-finder__lede {
	font-size: var(--blg-step-1);
	color: var(--blg-bark);
	max-width: 52ch;
	margin-bottom: var(--blg-space-l);
}
.blg-finder__form {
	background: var(--blg-white);
	border: 1px solid var(--blg-line);
	border-radius: var(--blg-radius-lg);
	padding: var(--blg-space-l);
	margin-bottom: var(--blg-space-l);
}
.blg-finder__groups {
	display: grid;
	gap: var(--blg-space-l);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.blg-finder__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.blg-finder__legend {
	font-family: var(--blg-display);
	font-size: var(--blg-step-1);
	color: var(--blg-cocoa);
	padding: 0;
	margin-bottom: var(--blg-space-s);
}
.blg-finder__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Chip = an accessible checkbox styled as a soft pill. */
.blg-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1.5px solid var(--blg-line);
	border-radius: var(--blg-radius-pill);
	background: var(--blg-chalk);
	color: var(--blg-bark);
	font-size: var(--blg-step--1);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.blg-chip:hover { border-color: var(--blg-cocoa); }
.blg-chip__label { line-height: 1.2; }
/* Native checkbox kept, visually compact, still focusable. */
.blg-chip input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em; height: 1.1em;
	margin: 0;
	border: 1.5px solid var(--blg-cocoa);
	border-radius: 4px;
	background: var(--blg-white);
	display: inline-grid;
	place-content: center;
	flex: 0 0 auto;
}
.blg-chip input[type="checkbox"]::before {
	content: "";
	width: 0.6em; height: 0.6em;
	transform: scale(0);
	transition: transform 0.12s ease;
	box-shadow: inset 1em 1em var(--blg-white);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.blg-chip input[type="checkbox"]:checked::before { transform: scale(1); }
/* Selected chip: filled + darker border + the tick above = not colour alone. */
.blg-chip:has(input:checked) {
	background: var(--blg-cocoa);
	border-color: var(--blg-cocoa);
	color: var(--blg-white);
}
.blg-chip:has(input:checked) input[type="checkbox"] {
	background: var(--blg-cocoa);
	border-color: var(--blg-white);
}
/* Fallback for browsers without :has — checked box still shows a clear tick. */
.blg-chip input[type="checkbox"]:checked { background: var(--blg-cocoa); }
.blg-chip input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--blg-bark);
	outline-offset: 2px;
}

.blg-finder__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--blg-space-s);
	margin-top: var(--blg-space-l);
	align-items: center;
}
.blg-finder__count {
	font-family: var(--blg-display);
	font-size: var(--blg-step-1);
	color: var(--blg-bark);
	margin-bottom: var(--blg-space-m);
}
.blg-finder__results { scroll-margin-top: var(--blg-space-l); }
.blg-finder__results.is-loading { opacity: 0.6; transition: opacity 0.2s ease; }
.blg-finder__empty {
	background: var(--blg-chalk-deep);
	border: 1px solid var(--blg-line);
	border-left: 4px solid var(--blg-sage);
	border-radius: var(--blg-radius);
	padding: var(--blg-space-m);
}
.blg-finder__empty p { margin-bottom: var(--blg-space-s); }
.blg-finder__empty p:last-child { margin-bottom: 0; }

.blg-finder__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--blg-space-l);
}
.blg-finder__page {
	display: inline-flex;
	min-width: 2.4rem;
	justify-content: center;
	padding: 0.4rem 0.7rem;
	border: 1.5px solid var(--blg-line);
	border-radius: var(--blg-radius);
	text-decoration: none;
	color: var(--blg-cocoa);
}
.blg-finder__page:hover { border-color: var(--blg-cocoa); color: var(--blg-bark); }
.blg-finder__page.is-current {
	background: var(--blg-cocoa);
	border-color: var(--blg-cocoa);
	color: var(--blg-white);
}

/* Gift card: two actions sit neatly; details link is secondary. */
.blg-gift__title-link { color: var(--blg-plum); text-decoration: none; }
.blg-gift__title-link:hover { color: var(--blg-cocoa); text-decoration: underline; }
.blg-gift .blg-gift__cta + .blg-gift__cta { margin-top: 0.5rem; }
.blg-gift__media-link { display: block; }

/* Enhanced single gift detail. */
.blg-single-gift__back { margin-bottom: var(--blg-space-m); }
.blg-single-gift__image {
	border-radius: var(--blg-radius-lg);
	margin-bottom: var(--blg-space-m);
	max-width: 100%;
	height: auto;
}
.blg-single-gift__meta { margin-bottom: var(--blg-space-m); }
.blg-single-gift__price { font-size: var(--blg-step-1); }
.blg-single-gift__cta { margin-block: var(--blg-space-m); }
.blg-single-gift__section { margin-block: var(--blg-space-l); }
.blg-single-gift__section h2 { margin-bottom: var(--blg-space-s); }
.blg-single-gift__message {
	border-left: 4px solid var(--blg-sage);
	background: var(--blg-chalk-deep);
	border-radius: var(--blg-radius);
	padding: var(--blg-space-m);
	margin: 0 0 var(--blg-space-s);
	font-style: italic;
}
.blg-single-gift__related ul { padding-left: 1.2em; }
.blg-single-gift__related li { margin-bottom: 0.4rem; }

@media (max-width: 520px) {
	.blg-finder__form { padding: var(--blg-space-m); }
	.blg-finder__groups { grid-template-columns: 1fr; }
}

/* 15. HOMEPAGE JOURNEY ROUTES (Phase 2)
   ------------------------------------------------------------------------ */
.blg-journeys { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.blg-journey { gap: var(--blg-space-xs); }
.blg-journey .blg-card__text { margin-top: 0.25rem; }
/* The strongest action: Find a Gift, on a soft sky-blue feature card. */
.blg-journey--feature {
	background: var(--blg-sky);
	border-color: var(--blg-sky-deep);
	grid-column: 1 / -1;
}
.blg-journey--feature .blg-card__label a { color: var(--blg-bark); }
.blg-journey--feature .blg-card__text { color: var(--blg-bark); }
@media (min-width: 861px) {
	/* Let the feature card sit alongside the others but stand out by tone. */
	.blg-journey--feature { grid-column: span 2; }
}

/* 16. CODED TEMPLATE EXTRAS (homepage story block, Find a Gift intro)
   ------------------------------------------------------------------------ */
.blg-fag__intro {
	font-size: var(--blg-step-1);
	color: var(--blg-bark);
	max-width: 60ch;
}

/* Editorial two-column feature (Help with what to say, Our Story).
   A composed block: image/visual on one side, editorial copy on the other.
   No heavy card or border — the composition itself carries it. */
.blg-feature__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--blg-space-2xl);
	align-items: center;
}
.blg-feature--reverse .blg-feature__media { order: 2; }
.blg-feature--reverse .blg-feature__copy { order: 1; }
.blg-feature__copy { min-width: 0; max-width: 46ch; }
.blg-feature__copy h2 { margin-bottom: var(--blg-space-s); }
.blg-feature__copy > p { color: var(--blg-bark); margin-bottom: var(--blg-space-m); }
/* Selective Saylor accent line above a heading. */
.blg-feature__accent {
	display: block;
	font-family: var(--blg-script);
	font-size: var(--blg-step-1);
	color: #B15E6B; /* deeper dusty rose, AA-large on chalk */
	margin-bottom: 0.2rem;
}

/* Feature image: portrait, cover, large soft corners, gentle depth. */
.blg-feature__media { min-width: 0; }
.blg-feature__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center; /* adjust here to reframe once live */
	border-radius: var(--blg-radius-lg);
	box-shadow: var(--blg-shadow-soft);
}
.blg-feature__image--placeholder {
	background: linear-gradient(160deg, var(--blg-twilight), var(--blg-lavender));
}
.blg-feature__image--oval {
	aspect-ratio: 1 / 1;
	border-radius: 46% 54% 52% 48% / 55% 46% 54% 45%;
}

/* Delicate divider: two fine lines with a small heart between. */
.blg-divider {
	display: flex;
	align-items: center;
	gap: var(--blg-space-m);
	margin-block: var(--blg-space-xl);
	color: #B15E6B;
}
.blg-divider__line {
	flex: 1;
	height: 1px;
	background: var(--blg-line);
}
.blg-divider__heart { flex: 0 0 auto; display: block; }

/* Our Story visual: an intentional soft organic shape with a botanical mark,
   ready to be swapped for a real image later. Not a generic tech gradient blob. */
.blg-story-art {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 440px;
	margin-inline: auto;
}
.blg-story-art__shape {
	position: absolute;
	inset: 0;
	border-radius: 46% 54% 52% 48% / 55% 46% 54% 45%;
	background:
		radial-gradient(120% 100% at 30% 25%, var(--blg-chalk), transparent 55%),
		linear-gradient(155deg, var(--blg-lavender), var(--blg-sky-deep) 70%, var(--blg-twilight));
	box-shadow: var(--blg-shadow);
}
.blg-story-art__botanical {
	position: absolute;
	left: -6px;
	bottom: 4%;
	color: var(--blg-sage);
	opacity: 0.9;
}

@media (max-width: 860px) {
	.blg-feature__inner { grid-template-columns: 1fr; gap: var(--blg-space-l); }
	/* Image always sits above the copy when stacked. */
	.blg-feature__media { order: -1; }
	.blg-feature--reverse .blg-feature__media { order: -1; }
	.blg-feature--reverse .blg-feature__copy { order: 0; }
	.blg-feature__copy { max-width: none; }
	.blg-feature__image { aspect-ratio: 3 / 2; max-height: 420px; }
	.blg-story-art { max-width: 300px; }
}

/* "Say / care" merged feature: Nightsky overlay card + Created-with-
   understanding text column, one balanced two-column composition.
   ------------------------------------------------------------------------ */
.blg-saycare__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr; /* image slightly narrower than text */
	gap: var(--blg-space-2xl);
	align-items: stretch; /* tops aligned; card fills column height */
}

/* Left: the Nightsky card, with content overlaid on the artwork. */
.blg-saycard {
	position: relative;
	display: flex;
	align-items: flex-start; /* content sits toward the top */
	min-height: 30rem;
	border-radius: var(--blg-radius-lg);
	overflow: hidden;
	background-color: var(--blg-twilight);
	background-size: cover;
	background-position: center; /* reframe here once live, e.g. center 30% */
	box-shadow: var(--blg-shadow-soft);
}
.blg-saycard--placeholder {
	background-image: linear-gradient(160deg, var(--blg-twilight), var(--blg-lavender));
}
/* A subtle, localised gradient behind the text only — not a heavy full overlay.
   Sits behind the content in the upper area to keep pale text readable. */
.blg-saycard::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 38, 66, 0.55) 0%, rgba(30, 38, 66, 0.28) 42%, rgba(30, 38, 66, 0) 72%);
	pointer-events: none;
}
.blg-saycard__content {
	position: relative;
	padding: var(--blg-space-l);
	max-width: 42ch;
}
.blg-saycard .blg-saycard__title { color: #FFFFFF; margin-bottom: var(--blg-space-s); }
.blg-saycard .blg-saycard__text { color: rgba(255, 255, 255, 0.92); margin-bottom: var(--blg-space-m); }
/* Eyebrow variant that reads on the dark image. */
.blg-saycard .blg-eyebrow--ondark { color: rgba(255, 255, 255, 0.85); }

/* Right: Created with understanding as a clean editorial column, no card. */
.blg-saycare__copy {
	align-self: center; /* balances naturally against the image panel */
	max-width: 52ch;
}
.blg-saycare__heading { font-size: var(--blg-step-2); margin-bottom: var(--blg-space-m); }
.blg-saycare__copy > p { color: var(--blg-bark); }

@media (max-width: 860px) {
	.blg-saycare__inner { grid-template-columns: 1fr; gap: var(--blg-space-l); }
	/* Nightsky feature stacks first, then Created with understanding. */
	.blg-saycard { min-height: 24rem; }
	.blg-saycare__copy { align-self: start; max-width: none; }
}
@media (max-width: 520px) {
	.blg-saycard { min-height: 22rem; }
	.blg-saycard__content { padding: var(--blg-space-m); }
}

/* Featured gifts — adaptive: static row (<=3) or manual carousel (>3).
   ------------------------------------------------------------------------ */
/* Static row: calm and centred; the cards do not stretch to fill the width. */
.blg-featured-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--blg-space-m);
}
.blg-featured-row > .blg-gift {
	flex: 0 1 300px;
	max-width: 340px;
}

/* Carousel. Without JS this is a native horizontally scrollable row (works and
   swipes); the script reveals arrows/dots and adds paging. */
.blg-carousel {
	position: relative;
}
.blg-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.blg-carousel__track {
	display: flex;
	gap: var(--blg-space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}
.blg-carousel__slide {
	flex: 0 0 auto;
	width: min(300px, 80%);
	scroll-snap-align: start;
	margin: 0;
}
.blg-carousel__slide > .blg-gift { height: 100%; }

/* Arrows: only meaningful once enhanced; shown outside the cards on wider
   screens, tucked in on small ones. Kept clear of the cards. */
.blg-carousel__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--blg-line);
	background: var(--blg-white);
	color: var(--blg-cocoa);
	cursor: pointer;
	box-shadow: var(--blg-shadow-soft);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.blg-carousel__arrow:hover { background: var(--blg-cocoa); color: var(--blg-white); border-color: var(--blg-cocoa); }
.blg-carousel__arrow:focus-visible { outline: 3px solid var(--blg-bark); outline-offset: 2px; }
.blg-carousel__arrow[disabled] { opacity: 0.35; cursor: default; }
.blg-carousel__arrow[disabled]:hover { background: var(--blg-white); color: var(--blg-cocoa); border-color: var(--blg-line); }
.blg-carousel__arrow--prev { left: -8px; }
.blg-carousel__arrow--next { right: -8px; }
@media (min-width: 1200px) {
	.blg-carousel__arrow--prev { left: -22px; }
	.blg-carousel__arrow--next { right: -22px; }
}

/* When enhanced, hide the native scrollbar for a cleaner look (paging drives it). */
.blg-carousel.is-enhanced .blg-carousel__viewport {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.blg-carousel.is-enhanced .blg-carousel__viewport::-webkit-scrollbar { display: none; }

/* Dots. */
.blg-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--blg-space-m);
}
.blg-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--blg-cocoa);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.blg-carousel__dot:hover { background: var(--blg-blush); }
.blg-carousel__dot.is-current { background: var(--blg-cocoa); }
.blg-carousel__dot:focus-visible { outline: 3px solid var(--blg-bark); outline-offset: 2px; }

/* 17. HOMEPAGE SIGNATURE BLOCKS + HEADER SEARCH
   ------------------------------------------------------------------------ */
/* "Need a little help choosing?" — the signature, reassuring and prominent. */
.blg-helpchoose {
	background: var(--blg-sky);
	border-radius: var(--blg-radius-lg);
	padding: var(--blg-space-l) var(--blg-space-l);
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
	box-shadow: var(--blg-shadow-soft);
}
.blg-helpchoose h2 { font-size: var(--blg-step-2); }
.blg-helpchoose__text { max-width: 52ch; }

/* Compact recipient cards: navigation options, not large empty boxes. Body
   font for the labels (heading stays the display font at section level). */
.blg-recipients .blg-grid { gap: var(--blg-space-s); }
.blg-recipients .blg-card {
	padding: var(--blg-space-s) var(--blg-space-m);
	border-radius: var(--blg-radius);
	min-height: 0;
}
.blg-recipients .blg-card__label {
	font-family: var(--blg-body);
	font-size: var(--blg-step-0, 1rem);
	font-weight: 600;
}
.blg-recipients__more { margin-top: var(--blg-space-m); }
.blg-recipients__more a,
.blg-hero__aside-link {
	font-family: var(--blg-body);
	font-weight: 600;
	color: var(--blg-cocoa);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.blg-recipients__more a:hover,
.blg-hero__aside-link:hover {
	color: var(--blg-bark);
	border-bottom-color: currentColor;
}
.blg-hero__aside-link {
	display: inline-block;
	margin-top: var(--blg-space-xs);
	font-size: var(--blg-step--1);
}
.blg-helpchoose .blg-eyebrow { color: var(--blg-bark); }
.blg-helpchoose h2 { color: var(--blg-bark); }
.blg-helpchoose__text {
	color: var(--blg-bark);
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: var(--blg-space-m);
}

/* "Created with understanding" — quiet reassurance, lighter and tighter. */
.blg-trust {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}
.blg-trust h2 {
	font-size: var(--blg-step-2);
	margin-bottom: var(--blg-space-s);
}
.blg-trust p {
	max-width: 62ch;
	margin-inline: auto;
	color: var(--blg-bark);
}

/* Header search item (added to the primary nav). */
.blg-nav-search a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #4A352D;
}
.blg-nav-search a:hover { color: #6B4A3D; }
.blg-nav-search__icon { flex: 0 0 auto; }