/* =============================================================================
   Bio Lotus — Homepage Stylesheet
   Loaded only on is_front_page(). Depends on theme.css (tokens, buttons, icons).
   Source: bio-lotus-second-attempt/project/theme-home.jsx
   ============================================================================= */


/* ── TICKER ──────────────────────────────────────────────────────────────────── */
@keyframes bl-ticker-ltr {
	from { transform: translateX(0);    }
	to   { transform: translateX(-25%); }
}

.bl-ticker {
	background:   var(--bl-bold);
	height:       52px;
	overflow:     hidden;
	display:      flex;
	align-items:  center;
}
.bl-ticker__track {
	display:     flex;
	animation:   bl-ticker-ltr 22s linear infinite;
	white-space: nowrap;
	will-change: transform;
}
.bl-ticker__item {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-size:      19px;
	color:          rgba(253, 250, 242, 0.88);
	letter-spacing: 0.05em;
	flex-shrink:    0;
}


/* ── HERO ────────────────────────────────────────────────────────────────────── */
.bl-hero {
	min-height: 100vh;
	position:   relative;
	overflow:   hidden;
	background: #EFE3CC;
	/* Pull the hero UP behind the sticky promo banner + header so the
	   transparent header overlays the hero image instead of sitting above it.
	   The .bl-hero__content already has padding-top: var(--bl-header-h) so
	   the headline and CTAs start below the header visual area. */
	margin-top: calc(-1 * var(--bl-header-h));
}

/* Background layers */
.bl-hero__bg {
	position: absolute;
	inset:    0;
	z-index:  0;
}
.bl-hero__bg-grad {
	position: absolute;
	inset:    0;
	background: linear-gradient(125deg, #FAF1DC 0%, #F1E2C2 35%, #E7D2A8 70%, #DCC089 100%);
}
.bl-hero__bg-svg {
	position: absolute;
	inset:    0;
}
.bl-hero__bg-wash {
	position: absolute;
	inset:    0;
	background: linear-gradient(95deg,
		rgba(255,247,228,0.55) 0%,
		rgba(255,247,228,0.25) 40%,
		transparent           70%);
}
.bl-hero__bg-fade {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     140px;
	background: linear-gradient(to bottom, transparent, rgba(242,240,230,0.56));
}

/* Full-bleed hero image — covers entire section, gradient protects text */
.bl-hero__img-overlay {
	position:       absolute;
	inset:          0;          /* full coverage — not right-half */
	z-index:        1;
	pointer-events: none;
}
.bl-hero__img-overlay img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center top;
	display:         block;
}
/* Gradient mask: strong on the left so headline + CTAs stay readable,
   fades to transparent on the right so the product image shows through. */
.bl-hero__img-overlay::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(
		90deg,
		rgba(250, 241, 220, 0.94) 0%,
		rgba(250, 241, 220, 0.76) 28%,
		rgba(250, 241, 220, 0.32) 54%,
		transparent               72%
	);
	pointer-events: none;
}

/* Content must sit above the overlay + its ::after gradient mask */
.bl-hero__content {
	position:     relative;
	z-index:      2;            /* was 1 */
	min-height:   100vh;
	display:      flex;
	align-items:  center;
	padding-top:  var(--bl-header-h);
	padding-bottom: 60px;
}

/* Hero content is above the fold — always show it immediately without
   waiting for the JS IntersectionObserver to add .is-visible.
   This prevents a blank hero when JS is slow or deferred.
   The .bl-fade-in.is-visible rule also sets opacity:1 so there is no conflict. */
.bl-hero .bl-fade-in {
	opacity:   1;
	transform: none;
}

/* Vertical date column */
.bl-hero__margin-col {
	position:           absolute;
	inset-inline-start: 48px;
	top:                var(--bl-header-h);
	bottom:             80px;
	z-index:            2;
	display:            flex;
	flex-direction:     column;
	align-items:        center;
	gap:                10px;
	width:              36px;
	pointer-events:     none;
}
.bl-hero__margin-line {
	flex:       1;
	width:      1px;
	background: rgba(60, 38, 16, 0.30);
}
.bl-hero__margin-date {
	font-family:  var(--bl-font-sans);
	font-size:    9px;
	letter-spacing: 0.3em;
	color:        rgba(60, 38, 16, 0.70);
	writing-mode: vertical-rl;
	text-transform: uppercase;
	padding:      14px 0;
}

/* Content inner wrapper */
.bl-hero__inner {
	max-width:          var(--bl-max-width);
	margin-inline:      auto;
	/* 48px base + 36px col + 10px gap + 38px breathing room = 132px */
	padding-inline-start: calc(var(--bl-padding-x) + 84px);
	padding-inline-end:   var(--bl-padding-x);
	width:              100%;
}
.bl-hero__copy {
	max-width: 720px;
}

/* Eyebrow */
.bl-hero__eyebrow {
	display:       flex;
	align-items:   center;
	gap:           16px;
	margin-bottom: 32px;
}
.bl-hero__eyebrow-rule {
	width:      44px;
	height:     1px;
	background: var(--bl-bold);
	flex-shrink: 0;
}
.bl-hero__eyebrow span {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color:          var(--bl-bold);
	font-weight:    600;
}

/* Headline */
.bl-hero__headline {
	font-family:    var(--bl-font-serif);
	font-weight:    400;
	line-height:    0.96;
	font-size:      clamp(68px, 9vw, 120px);
	color:          #1C1207;
	letter-spacing: 0.02em;
	margin-bottom:  32px;
	text-shadow:    0 1px 24px rgba(255, 247, 228, 0.5);
}
.bl-hero__headline em {
	font-style:  italic;
	font-weight: 400;
}

/* Body text */
.bl-hero__body {
	font-family:   var(--bl-font-sans);
	font-size:     16px;
	color:         #3A2818;
	line-height:   1.8;
	max-width:     460px;
	margin-bottom: 28px;
	font-weight:   500;
}

/* Trust strip */
.bl-hero__trust {
	display:       flex;
	align-items:   center;
	gap:           16px;
	margin-bottom: 32px;
	flex-wrap:     wrap;
}
.bl-hero__trust-stars {
	display:     flex;
	align-items: center;
	gap:         4px;
}
.bl-hero__rating {
	font-family:      var(--bl-font-sans);
	font-size:        11px;
	color:            #3A2818;
	letter-spacing:   0.04em;
	margin-inline-start: 6px;
	font-weight:      500;
}
.bl-hero__rating strong {
	color:       #1C1207;
	font-weight: 700;
}
.bl-hero__free-ship {
	font-family:          var(--bl-font-sans);
	font-size:            11px;
	color:                var(--bl-bold);
	letter-spacing:       0.04em;
	border-inline-start:  1px solid rgba(60, 38, 16, 0.22);
	padding-inline-start: 16px;
	font-weight:          600;
}

/* CTAs */
.bl-hero__ctas {
	display:     flex;
	align-items: center;
	gap:         24px;
	flex-wrap:   wrap;
}
.bl-hero__cta-primary {
	box-shadow: 0 10px 26px rgba(60, 38, 16, 0.32);
}
.bl-hero__cta-ghost {
	font-family:   var(--bl-font-sans);
	font-size:     12px;
	letter-spacing: 0.08em;
	color:         #1C1207;
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 18, 7, 0.40);
	padding-bottom: 2px;
	font-weight:   500;
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	transition:    border-color 200ms var(--bl-ease), color 200ms var(--bl-ease);
}
.bl-hero__cta-ghost:hover {
	color:        #1C1207;
	border-color: #1C1207;
}

/* Stats row */
.bl-hero__stats {
	display:       flex;
	gap:           56px;
	margin-top:    60px;
	border-top:    1px solid rgba(28, 18, 7, 0.18);
	padding-top:   28px;
	max-width:     560px;
}
.bl-hero__stat-num {
	font-family:    var(--bl-font-serif);
	font-weight:    400;
	font-size:      34px;
	color:          #1C1207;
	letter-spacing: 0.02em;
	line-height:    1;
}
.bl-hero__stat-label {
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          #5A4030;
	margin-top:     6px;
	font-weight:    500;
}

/* Scroll cue */
.bl-hero__scroll-cue {
	position:       absolute;
	bottom:         28px;
	left:           50%;
	transform:      translateX(-50%);
	z-index:        2;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	pointer-events: none;
}
.bl-hero__scroll-line {
	height:     36px;
	width:      1px;
	background: rgba(28, 18, 7, 0.40);
}
.bl-hero__scroll-cue span {
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color:          rgba(28, 18, 7, 0.60);
	font-weight:    500;
}


/* ── CATEGORIES ──────────────────────────────────────────────────────────────── */
.bl-categories {
	background: var(--bl-bg-alt);
}
.bl-categories__header {
	padding-block-start: 56px;
	padding-block-end:   0;
}
.bl-categories__band {
	display:              grid;
	grid-template-columns: 1fr 320px 64px;
	border-top:           1px solid var(--bl-line);
	min-height:           200px;
	cursor:               pointer;
	text-decoration:      none;
	color:                inherit;
	background:           transparent;
	transition:           background 200ms var(--bl-ease);
}
.bl-categories__band:hover {
	background: rgba(224, 232, 216, 0.56);
	color:      inherit;
}
.bl-categories__band--rev {
	grid-template-columns: 320px 1fr 64px;
}
.bl-categories__band-text {
	padding:        36px 56px;
	display:        flex;
	flex-direction: column;
	justify-content: center;
}
.bl-categories__band-img {
	overflow:   hidden;
	min-height: 200px;
}
.bl-categories__band-img img,
.bl-categories__band-ph {
	width:      100%;
	height:     100%;
	min-height: 200px;
	object-fit: cover;
	display:    block;
	transform:  scale(1);
	transition: transform 420ms var(--bl-ease);
}
.bl-categories__band:hover .bl-categories__band-img img,
.bl-categories__band:hover .bl-categories__band-ph {
	transform: scale(1.025);
}
.bl-categories__band-num {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--bl-accent);
	margin-bottom:  10px;
	display:        block;
}
.bl-categories__band-name {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      clamp(28px, 3vw, 46px);
	color:          var(--bl-text);
	letter-spacing: 0.04em;
	line-height:    1.1;
	margin-bottom:  10px;
}
.bl-categories__band-desc {
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	color:          var(--bl-text-faint);
	letter-spacing: 0.06em;
	margin:         0;
}
.bl-categories__band-arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--bl-accent);
	transition:      transform 220ms var(--bl-ease);
}
.bl-categories__band:hover .bl-categories__band-arrow {
	transform: translateX(5px);
}
.bl-categories__border-bottom {
	border-top: 1px solid var(--bl-line);
}


/* ── PHILOSOPHY ──────────────────────────────────────────────────────────────── */
.bl-philosophy {
	background: var(--bl-bg-dark);
	padding:    120px 64px;
}
.bl-philosophy__inner {
	max-width:   860px;
	margin:      0 auto;
	text-align:  center;
}
.bl-philosophy__rule {
	width:      36px;
	height:     1px;
	background: rgba(240, 229, 206, 0.25);
	margin:     0 auto;
}
.bl-philosophy__rule:first-child { margin-bottom: 48px; }
.bl-philosophy__rule:last-child  { margin-top:    44px; }
.bl-philosophy__quote {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(28px, 4vw, 52px);
	color:          #F0E5CE;
	letter-spacing: 0.04em;
	line-height:    1.35;
	margin:         0 0 44px;
}
.bl-philosophy__cite {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color:          rgba(240, 229, 206, 0.40);
	font-style:     normal;
	display:        block;
}


/* ── BESTSELLERS ─────────────────────────────────────────────────────────────── */
.bl-bestsellers {
	background:      var(--bl-bg);
	padding-block-start: 80px;
}
.bl-bestsellers__header {
	padding-block-end: 48px;
	display:           flex;
	justify-content:   space-between;
	align-items:       flex-end;
}
.bl-bestsellers__title {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      clamp(32px, 4vw, 54px);
	color:          var(--bl-text);
	letter-spacing: 0.04em;
	line-height:    1.1;
}
.bl-bestsellers__border-bottom {
	border-top: 1px solid var(--bl-line);
}

/* Product band */
.bl-product-band {
	display:              grid;
	grid-template-columns: 1fr 280px auto;
	border-top:           1px solid var(--bl-line);
	cursor:               pointer;
	background:           transparent;
	transition:           background 200ms var(--bl-ease);
}
.bl-product-band--rev {
	grid-template-columns: 280px 1fr auto;
}
.bl-product-band:hover {
	background: rgba(224, 232, 216, 0.44);
}
.bl-product-band__info {
	padding:        28px 48px;
	display:        flex;
	flex-direction: column;
	justify-content: center;
}
.bl-product-band__meta {
	display:       flex;
	gap:           12px;
	align-items:   center;
	margin-bottom: 10px;
	flex-wrap:     wrap;
}
.bl-product-band__tag {
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color:          var(--bl-accent);
	border:         1px solid var(--bl-accent);
	padding:        3px 10px;
}
.bl-product-band__cat {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	color:          var(--bl-text-faint);
	letter-spacing: 0.06em;
}
.bl-product-band__rating {
	display:        inline-flex;
	align-items:    center;
	gap:            4px;
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-mid);
	letter-spacing: 0.04em;
}
.bl-product-band__rating strong {
	color:       var(--bl-text);
	font-weight: 600;
}
.bl-product-band__name {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      30px;
	color:          var(--bl-text);
	letter-spacing: 0.04em;
	line-height:    1;
	margin-bottom:  6px;
}
.bl-product-band__name a {
	color: inherit;
}
.bl-product-band__name a:hover {
	color: var(--bl-bold);
}
.bl-product-band__sub {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-faint);
	letter-spacing: 0.06em;
	margin:         0;
}
.bl-product-band__urgency {
	margin-top:  12px;
	display:     inline-flex;
	align-items: center;
	gap:         6px;
}
.bl-product-band__urgency-dot {
	width:        6px;
	height:       6px;
	border-radius: 50%;
	background:   var(--bl-bold);
	flex-shrink:  0;
}
.bl-product-band__urgency-text {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	color:          var(--bl-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight:    500;
}
.bl-product-band__img {
	overflow:  hidden;
	height:    180px;
	position:  relative;
}
.bl-product-band__img img,
.bl-product-band__ph {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transform:  scale(1);
	transition: transform 400ms var(--bl-ease);
}
.bl-product-band:hover .bl-product-band__img img,
.bl-product-band:hover .bl-product-band__ph {
	transform: scale(1.03);
}
.bl-product-band__badge {
	position:           absolute;
	top:                12px;
	inset-inline-start: 12px;
	background:         var(--bl-bold);
	color:              #FDFAF2;
	padding:            4px 10px;
	font-family:        var(--bl-font-sans);
	font-size:          9px;
	letter-spacing:     0.2em;
	text-transform:     uppercase;
	font-weight:        600;
}
.bl-product-band__cta {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	justify-content: center;
	padding:        0 48px;
	gap:            12px;
	min-width:      160px;
}
.bl-product-band__price {
	text-align:     end;
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      26px;
	color:          var(--bl-text);
	letter-spacing: 0.02em;
}
.bl-product-band__price del {
	font-family: var(--bl-font-sans);
	font-size:   12px;
	color:       var(--bl-text-faint);
	display:     block;
	margin-bottom: 2px;
	opacity:     0.7;
}
.bl-product-band__price ins {
	text-decoration: none;
}
/* Smaller add-to-cart in the band */
.bl-product-band .bl-btn-primary {
	padding:   11px 24px;
	font-size: 10px;
}


/* ── TESTIMONIALS ────────────────────────────────────────────────────────────── */
.bl-testimonials {
	background: var(--bl-bg);
	padding:    90px 0 100px;
	border-top: 1px solid var(--bl-line);
}
.bl-testimonials__header {
	padding-block-end: 48px;
	display:           flex;
	justify-content:   space-between;
	align-items:       flex-end;
	flex-wrap:         wrap;
	gap:               24px;
}
.bl-testimonials__title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(36px, 5vw, 68px);
	color:          var(--bl-text);
	letter-spacing: 0.04em;
	line-height:    1;
}
.bl-testimonials__aggregate {
	display:     flex;
	align-items: center;
	gap:         14px;
}
.bl-testimonials__score {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      26px;
	color:          var(--bl-text);
	letter-spacing: 0.02em;
	line-height:    1;
}
.bl-testimonials__score span {
	font-size: 16px;
	color:     var(--bl-text-faint);
}
.bl-testimonials__count {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	color:          var(--bl-text-faint);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-top:     4px;
}
/* Grid uses bl-container for outer padding; gap = 1px via bg colour */
.bl-testimonials__grid {
	display:              grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                  1px;
	background:           var(--bl-line);
	border:               1px solid var(--bl-line);
}
.bl-testimonials__card {
	background:     var(--bl-bg);
	padding:        44px 36px 36px;
	display:        flex;
	flex-direction: column;
	gap:            20px;
	position:       relative;
}
.bl-testimonials__deco {
	position:           absolute;
	top:                24px;
	inset-inline-end:   28px;
	font-family:        var(--bl-font-serif);
	font-size:          56px;
	color:              var(--bl-accent);
	opacity:            0.25;
	line-height:        0.7;
	font-style:         italic;
	pointer-events:     none;
	user-select:        none;
}
.bl-testimonials__stars {
	gap: 2px;
}
.bl-testimonials__quote {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      20px;
	color:          var(--bl-text);
	letter-spacing: 0.02em;
	line-height:    1.45;
	flex:           1;
	margin:         0;
}
.bl-testimonials__footer {
	border-top:     1px solid var(--bl-line);
	padding-top:    16px;
	display:        flex;
	justify-content: space-between;
	align-items:    center;
}
.bl-testimonials__name {
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	color:          var(--bl-text);
	font-weight:    500;
	letter-spacing: 0.05em;
}
.bl-testimonials__city {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	color:          var(--bl-text-faint);
	letter-spacing: 0.08em;
	margin-top:     2px;
}
.bl-testimonials__product {
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	color:          var(--bl-accent);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align:     end;
	max-width:      110px;
}


/* ── JOURNAL ─────────────────────────────────────────────────────────────────── */
.bl-journal {
	background:      var(--bl-bg-section);
	padding-block-start: 80px;
}
.bl-journal__header {
	padding-block-end: 48px;
	display:           flex;
	justify-content:   space-between;
	align-items:       flex-end;
}
.bl-journal__title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(36px, 5vw, 68px);
	color:          var(--bl-text);
	letter-spacing: 0.04em;
	line-height:    1;
}
.bl-journal__see-all {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     var(--bl-font-sans);
	font-size:       12px;
	letter-spacing:  0.08em;
	color:           var(--bl-text);
	border-bottom:   1px solid var(--bl-line);
	padding-bottom:  2px;
	text-decoration: none;
	transition:      border-color 200ms var(--bl-ease), color 200ms var(--bl-ease);
}
.bl-journal__see-all:hover {
	color:        var(--bl-text);
	border-color: var(--bl-text);
}
/* Grid: 1.65fr 1fr 1fr with 1px gap via background colour */
.bl-journal__grid {
	display:              grid;
	grid-template-columns: 1.65fr 1fr 1fr;
	gap:                  1px;
	background:           var(--bl-line);
	/* No extra padding — bl-container provides horizontal padding */
}
.bl-journal__card {
	background:     var(--bl-bg-section);
	display:        flex;
	flex-direction: column;
	cursor:         pointer;
	transition:     background 200ms var(--bl-ease);
}
.bl-journal__card:hover {
	background: var(--bl-bg-alt);
}
.bl-journal__card-link {
	display:         block;
	overflow:        hidden;
	text-decoration: none;
}
.bl-journal__card-img {
	overflow: hidden;
	height:   200px;
}
.bl-journal__card-img--large {
	height: 300px;
}
.bl-journal__card-img img,
.bl-journal__card-ph {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transform:  scale(1);
	transition: transform 420ms var(--bl-ease);
}
.bl-journal__card:hover .bl-journal__card-img img,
.bl-journal__card:hover .bl-journal__card-ph {
	transform: scale(1.04);
}
.bl-journal__card-body {
	padding:        26px 28px 32px;
	flex:           1;
	display:        flex;
	flex-direction: column;
}
.bl-journal__card-meta {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin-bottom: 14px;
}
.bl-journal__card-cat {
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight:    500;
}
.bl-journal__card-cat--accent { color: var(--bl-accent); }
.bl-journal__card-cat--bold   { color: var(--bl-bold);   }
.bl-journal__card-read {
	font-family: var(--bl-font-sans);
	font-size:   9px;
	color:       var(--bl-text-faint);
	display:     flex;
	align-items: center;
	gap:         4px;
}
.bl-journal__card-title {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      20px;
	color:          var(--bl-text);
	letter-spacing: 0.03em;
	line-height:    1.3;
	flex:           1;
	margin-bottom:  18px;
}
.bl-journal__card-title--large { font-size: 26px; }
.bl-journal__card-title a {
	color:           inherit;
	text-decoration: none;
}
.bl-journal__card-title a:hover { color: var(--bl-bold); }
.bl-journal__card-footer {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	border-top:      1px solid var(--bl-line);
	padding-top:     14px;
}
.bl-journal__card-date {
	font-family: var(--bl-font-sans);
	font-size:   10px;
	color:       var(--bl-text-faint);
}
.bl-journal__card-arrow {
	color:      var(--bl-accent);
	transform:  translateX(0);
	transition: transform 220ms var(--bl-ease);
	display:    flex;
}
.bl-journal__card:hover .bl-journal__card-arrow {
	transform: translateX(4px);
}
.bl-journal__border {
	height:     1px;
	background: var(--bl-line);
}


/* ── NEWSLETTER ──────────────────────────────────────────────────────────────── */
.bl-newsletter {
	background: var(--bl-bold);
	padding:    56px var(--bl-padding-x);
}
.bl-newsletter__inner {
	display:         grid;
	grid-template-columns: 1fr auto;
	gap:             48px;
	align-items:     center;
}
.bl-newsletter__title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      34px;
	color:          #FDFAF2;
	letter-spacing: 0.04em;
	margin-bottom:  6px;
	line-height:    1.15;
}
.bl-newsletter__body {
	font-family:    var(--bl-font-sans);
	font-size:      13px;
	color:          rgba(253, 250, 242, 0.58);
	letter-spacing: 0.04em;
	margin:         0;
}
.bl-newsletter__field-wrap {
	display: flex;
}
.bl-newsletter__input {
	font-family:         var(--bl-font-sans);
	font-size:           13px;
	padding:             13px 20px;
	width:               260px;
	background:          rgba(253, 250, 242, 0.10);
	border:              1px solid rgba(253, 250, 242, 0.28);
	border-inline-end:   none;
	color:               #FDFAF2;
	outline:             none;
}
.bl-newsletter__input::placeholder {
	color:   rgba(253, 250, 242, 0.45);
	opacity: 1;
}
.bl-newsletter__submit {
	background:     #FDFAF2;
	color:          var(--bl-bold);
	border:         none;
	padding:        13px 22px;
	cursor:         pointer;
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	font-weight:    600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space:    nowrap;
	transition:     background 200ms var(--bl-ease);
}
.bl-newsletter__submit:hover {
	background: #F0E5CE;
}
.bl-newsletter__notice {
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	letter-spacing: 0.04em;
	padding:        10px 14px;
	border-radius:  2px;
	margin-bottom:  14px;
}
.bl-newsletter__notice--ok {
	background: rgba(253, 250, 242, 0.15);
	color:      #FDFAF2;
	border:     1px solid rgba(253, 250, 242, 0.30);
}
.bl-newsletter__notice--err {
	background: rgba(192, 57, 43, 0.20);
	color:      #FDFAF2;
	border:     1px solid rgba(192, 57, 43, 0.40);
}


/* ── RESPONSIVE ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	/* Hide vertical margin col; reset inner padding */
	.bl-hero__margin-col { display: none; }
	.bl-hero__inner      { padding-inline-start: var(--bl-padding-x); }

	/* Journal: 2-col layout */
	.bl-journal__grid { grid-template-columns: 1fr 1fr; }
	.bl-journal__card:last-child { display: none; }
}

@media (max-width: 900px) {
	.bl-categories__band,
	.bl-categories__band--rev {
		grid-template-columns: 1fr 200px 48px;
	}
	.bl-product-band,
	.bl-product-band--rev {
		grid-template-columns: 1fr 200px auto;
	}
	.bl-product-band__cta { padding: 0 24px; min-width: 120px; }
	.bl-testimonials__grid { grid-template-columns: 1fr 1fr; }
	.bl-testimonials__card:last-child { display: none; }
	.bl-newsletter__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.bl-hero__headline  { font-size: clamp(44px, 12vw, 72px); }
	.bl-hero__stats     { gap: 24px; flex-wrap: wrap; }
	.bl-hero__scroll-cue { display: none; }

	.bl-categories__band,
	.bl-categories__band--rev {
		display:        flex;
		flex-direction: column;
		position:       relative;
	}
	.bl-categories__band-img {
		display:    block;
		width:      100%;
		height:     200px;
		overflow:   hidden;
		flex-shrink: 0;
		order:      -1; /* always render image first regardless of DOM order */
	}
	.bl-categories__band-img img,
	.bl-categories__band-ph {
		width:      100%;
		height:     100%;
		min-height: 200px;
		object-fit: cover;
	}
	.bl-categories__band-text {
		padding:         20px var(--bl-padding-x);
		padding-inline-end: 56px; /* keep space for the arrow */
	}
	.bl-categories__band-arrow {
		position:          absolute;
		bottom:            20px;
		inset-inline-end:  var(--bl-padding-x);
	}

	.bl-product-band,
	.bl-product-band--rev {
		grid-template-columns: 1fr auto;
	}
	.bl-product-band__img { display: none; }

	.bl-testimonials__grid { grid-template-columns: 1fr; }
	.bl-testimonials__card:nth-child(n+2) { display: none; }

	.bl-journal__grid { grid-template-columns: 1fr; }
	.bl-journal__card:nth-child(n+2) { display: none; }

	.bl-newsletter__input { width: 100%; }
	.bl-newsletter__field-wrap { flex-direction: column; }
	.bl-newsletter__input {
		border-inline-end:   1px solid rgba(253, 250, 242, 0.28);
		border-block-end:    none;
	}
}