/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,23,0.35) 0%, rgba(23,23,23,0.55) 100%); }
.hero__content { position: relative; z-index: 1; max-width: 720px; }
.hero__heading { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.hero__subheading { font-size: var(--fs-lg); font-weight: 500; opacity: 0.92; margin-bottom: var(--space-4); }
.hero__description { font-size: var(--fs-md); opacity: 0.85; max-width: 56ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__scroll-cue { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: 1; opacity: 0.7; animation: bob 2.2s ease-in-out infinite; }
.hero__pillars { display: flex; gap: var(--space-7); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.2); flex-wrap: wrap; }
.hero__pillars li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero__pillars .numbered-index { color: rgba(255,255,255,0.6); margin-bottom: 0; }
@media (max-width: 767px) { .hero__pillars { gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

@media (min-width: 1024px) { .hero__heading { font-size: var(--fs-4xl); } }
@media (max-width: 767px) {
	.hero { min-height: 76vh; }
	.hero__heading { font-size: var(--fs-2xl); }
	.hero__subheading { font-size: var(--fs-base); }
}

/* Promo banner */
.promo-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-9) var(--space-6); text-align: center; background: var(--color-graphite); color: #fff; }
.promo-banner h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.promo-banner p { opacity: 0.8; margin-bottom: var(--space-6); max-width: 52ch; margin-inline: auto; }
.promo-banner__bundle { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid rgba(255,255,255,0.15); }
.promo-banner__bundle h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.promo-banner__bundle p { font-size: var(--fs-sm); margin-bottom: var(--space-4); }

/* Featured product story (alternating media/text) */
.product-story__intro { max-width: 640px; margin-bottom: var(--space-8); }
.product-story__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; margin-bottom: var(--space-9); }
.product-story__row:nth-child(even) .product-story__media { order: 2; }
.product-story__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--color-mist); }
.product-story__media img { width: 100%; height: 100%; object-fit: cover; }
.product-story__text h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.product-story__text p { color: var(--color-text-muted); }
@media (max-width: 900px) {
	.product-story__row { grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-7); }
	.product-story__row:nth-child(even) .product-story__media { order: 0; }
}

/* Lifestyle / philosophy split section */
.philosophy-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.philosophy-section__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; }
.philosophy-section__media img { width: 100%; height: 100%; object-fit: cover; }
.philosophy-section__text h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
.philosophy-section__text p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
@media (max-width: 900px) { .philosophy-section { grid-template-columns: 1fr; } }

/* Page hero (interior pages: about, contact, shop, journal, delivery, etc.) */
.page-hero { padding-block: var(--space-8) var(--space-7); text-align: center; }
.page-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.page-hero p { color: var(--color-text-muted); font-size: var(--fs-md); max-width: 620px; margin-inline: auto; }
@media (max-width: 767px) { .page-hero h1 { font-size: var(--fs-2xl); } }

/* Prose (about / philosophy / journal single / legal pages) */
.prose { max-width: 760px; margin-inline: auto; font-size: var(--fs-md); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--fs-lg); }
.prose blockquote { border-left: 3px solid var(--color-accent); padding-left: var(--space-5); font-style: italic; color: var(--color-text-muted); }
.prose img { border-radius: var(--radius-md); }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ul li { margin-top: var(--space-2); }
.about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-block: var(--space-8); }
@media (max-width: 767px) { .about-values { grid-template-columns: repeat(2, 1fr); } }
.about-values__item h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.about-values__item p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-info-card__item { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.contact-info-card__item:last-child { border-bottom: none; }
.contact-info-card__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-card__icon svg { width: 20px; height: 20px; }
.contact-info-card__label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.contact-info-card__value { font-weight: 600; }
.contact-form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); }

/* -------------------------------------------------------------------------
   Support page topic tiles
   ---------------------------------------------------------------------- */
.support-tile { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.support-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.support-tile__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-mist); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.support-tile__icon svg { width: 22px; height: 22px; }
.support-tile h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.support-tile p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------------
   Account dashboard
   ---------------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-7); }
@media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); height: fit-content; }
.account-nav li a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); transition: background var(--duration-fast) var(--ease-out); }
.account-nav li a:hover, .account-nav li.is-active a { background: var(--color-mist); }
.account-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 599px) { .account-overview-grid { grid-template-columns: 1fr; } }
.account-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.account-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.account-card p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------------
   404 / search empty states already share .empty-state (layout.css)
   ---------------------------------------------------------------------- */
.not-found-visual { font-family: var(--font-display); font-size: clamp(80px, 18vw, 160px); font-weight: 800; color: var(--color-warm-gray); line-height: 1; }