/*
 * Artisavo brand overrides for the Bagisto storefront.
 *
 * Loaded AFTER Bagisto's compiled storefront CSS in
 * resources/themes/default/views/components/layouts/index.blade.php
 * so every selector here wins.
 *
 * What this file owns:
 *   - Brand palette (forest / terracotta / cream) as CSS variables.
 *   - Typography swap: Bagisto ships Poppins; we ship Montserrat
 *     loaded from bunny.net (GDPR-friendly Google Fonts mirror).
 *   - Bagisto's Tailwind palette tokens (`navyBlue`, `lightOrange`,
 *     `darkGreen`) are overridden via direct selectors on the
 *     classes/elements that use them. We do NOT rebuild Tailwind.
 *   - Storefront header (forest navbar + cream wordmark + sticky).
 *   - Storefront footer (forest surface + cream text + tagline).
 *   - Buttons, cards, focus rings, selection.
 *   - Hero/slider treatment (cream-photo gradient, forest text).
 *   - Merchant pitch panel — same component the Aimeos build had.
 *
 * If a Bagisto upgrade introduces new components that pick up
 * `bg-navyBlue` or `text-navyBlue`, they automatically get the
 * forest treatment via the rules below — but verify after upgrades.
 *
 * Brand palette (mirrors docs/branding.md and resources/css/app.css):
 *   forest      #37452F   primary text, dark surfaces, navbar, footer
 *   forest-2    #2A3624   hover/active for forest
 *   terracotta  #C86B47   accent — links, secondary buttons, badges
 *   terracotta-2 #B25934  hover/active for terracotta
 *   cream       #F7F5F2   page background, navbar/footer text
 *   cream-2     #FFFFFF   cards, contrast surface
 *   line        #E5DFD7   borders, dividers, input outlines
 */

:root {
    --av-forest: #37452F;
    --av-forest-2: #2A3624;
    --av-terracotta: #C86B47;
    --av-terracotta-2: #B25934;
    --av-cream: #F7F5F2;
    --av-cream-2: #FFFFFF;
    --av-line: #E5DFD7;
}

/* -----------------------------------------------------------------
 * Typography
 *
 * Bagisto's app.css applies `* { @apply font-poppins }`, so we have
 * to override with the same specificity AND repeat the selector for
 * the named utility class. Loading Montserrat happens in the layout
 * head via bunny.net.
 * --------------------------------------------------------------- */
html, body, * , .font-poppins {
    font-family: "Montserrat", "Poppins", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-feature-settings: "kern" 1, "liga" 1;
}

html, body {
    background-color: var(--av-cream);
    color: var(--av-forest);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--av-forest);
    font-weight: 600;
    letter-spacing: -0.01em;
}

::selection {
    background-color: var(--av-terracotta);
    color: var(--av-cream);
}

/* -----------------------------------------------------------------
 * Bagisto Tailwind palette overrides
 *
 * Bagisto's tailwind.config.js declares custom palette names:
 *   navyBlue (#060C3B)   — primary buttons, links, page text
 *   lightOrange (#F6F2EB) — footer surface, highlight bg
 *   darkGreen, darkBlue, darkPink — sparingly used
 *
 * Tailwind generates class variants like `bg-navyBlue`,
 * `text-navyBlue`, `border-navyBlue`. Override each variant
 * directly so existing markup picks up the Artisavo palette
 * without rebuilding the CSS.
 * --------------------------------------------------------------- */
.bg-navyBlue { background-color: var(--av-forest) !important; }
.text-navyBlue { color: var(--av-forest) !important; }
.border-navyBlue { border-color: var(--av-forest) !important; }
.fill-navyBlue { fill: var(--av-forest) !important; }
.from-navyBlue { --tw-gradient-from: var(--av-forest) !important; }
.to-navyBlue { --tw-gradient-to: var(--av-forest) !important; }

.bg-lightOrange { background-color: var(--av-cream) !important; }

/* The pre-built primary button uses bg-navyBlue + border-navyBlue */
.primary-button {
    background-color: var(--av-forest) !important;
    border-color: var(--av-forest) !important;
    color: var(--av-cream) !important;
}
.primary-button:hover {
    background-color: var(--av-forest-2) !important;
    border-color: var(--av-forest-2) !important;
}

.secondary-button {
    background-color: var(--av-cream-2) !important;
    color: var(--av-forest) !important;
    border-color: var(--av-forest) !important;
}
.secondary-button:hover {
    background-color: var(--av-cream) !important;
}

/* -----------------------------------------------------------------
 * Header / sticky top bar
 *
 * Bagisto's <header> ships `bg-white shadow-gray sticky`; convert
 * to forest with cream content. The wordmark image is swapped via
 * the blade override; we just paint the surface.
 * --------------------------------------------------------------- */
header.sticky,
header.sticky.shadow-gray,
header.bg-white {
    background-color: var(--av-forest) !important;
    color: var(--av-cream) !important;
    border-color: var(--av-forest-2) !important;
}

/*
 * Site header text colors.
 *
 * Scope to Bagisto's site header (which always carries `.sticky` or
 * `.bg-white`) so the rules don't bleed into in-page `<header>`
 * landmarks used inside page content (recipe pages, etc.).
 */
header.sticky a,
header.sticky span,
header.sticky p,
header.sticky li,
header.sticky svg,
header.bg-white a,
header.bg-white span,
header.bg-white p,
header.bg-white li,
header.bg-white svg {
    color: var(--av-cream);
    fill: currentColor;
}

header.sticky a:hover,
header.sticky [role="button"]:hover,
header.bg-white a:hover,
header.bg-white [role="button"]:hover {
    color: var(--av-terracotta);
}

/* Header search input — cream pill on forest */
header.sticky input[type="text"],
header.sticky input[type="search"],
header.bg-white input[type="text"],
header.bg-white input[type="search"] {
    background-color: var(--av-cream) !important;
    color: var(--av-forest) !important;
    border-color: var(--av-line) !important;
    border-radius: 9999px !important;
}
header.sticky input[type="text"]::placeholder,
header.sticky input[type="search"]::placeholder,
header.bg-white input[type="text"]::placeholder,
header.bg-white input[type="search"]::placeholder {
    color: rgba(55, 69, 47, 0.55) !important;
}
header.sticky input[type="text"]:focus,
header.sticky input[type="search"]:focus,
header.bg-white input[type="text"]:focus,
header.bg-white input[type="search"]:focus {
    box-shadow: 0 0 0 2px rgba(200, 107, 71, 0.45) !important;
}

/*
 * Storefront logo.
 *
 * Bagisto renders the channel logo from /storage/channel/1/logo.png.
 * That file is still seeded for emails/admin-managed channel settings,
 * but the storefront header needs the light horizontal wordmark and it
 * must not be held hostage by browser/CDN caching of the storage URL.
 * Replacing the <img> content here makes the public storefront match
 * local deterministically while keeping Bagisto's markup intact.
 */
header img[src*="/storage/channel/1/logo.png"] {
    content: url("/images/brand/artisavo-logo-light-horizontal.png");
    display: block !important;
    width: 131px !important;
    height: auto !important;
    max-height: 29px !important;
    object-fit: contain !important;
}

/*
 * Marketplace seller-auth pages (sign-in, sign-up, forgot/reset password,
 * and the marketplace customer guest-login) render the channel logo on
 * a cream background instead of inside the dark forest header. The
 * cream-friendly dark wordmark lives at /images/brand/artisavo-logo-horizontal.png.
 *
 * The auth blade templates wrap the logo in
 *   <a aria-label="@lang('marketplace::app.seller.login.bagisto')">…</a>
 * so once `lang/vendor/marketplace/en/app.php` overrides that key to
 * "Artisavo" we can target it deterministically without editing the
 * Webkul vendor templates.
 *
 * IMPORTANT: the storefront header logo link also has aria-label="Artisavo"
 * (see lang/vendor/shop/en/app.php). To avoid stomping on the light-wordmark
 * rule above, this rule is scoped with `:not(header *)` so it only fires
 * outside of <header> — i.e. on auth pages that pass `:has-header="false"`
 * to <x-shop::layouts>.
 */
a[aria-label="Artisavo"]:not(header *) > img[src*="/storage/channel/1/logo.png"] {
    content: url("/images/brand/artisavo-logo-horizontal.png");
    display: block !important;
    width: 160px !important;
    height: auto !important;
    max-height: 36px !important;
    object-fit: contain !important;
}

/* Mobile header (lg:hidden variant) */
header > div.lg\:hidden,
header [class*="px-4 pb-4 pt-6"] {
    background-color: var(--av-forest) !important;
}

/*
 * Mobile drawer text color reset.
 *
 * Bagisto's <v-mobile-drawer> renders the drawer slot DOM in-place
 * underneath <header> (no teleport to body), so the drawer ends up
 * matching `header a, header p, header span` above and inherits the
 * cream color we paint on the forest navbar. The drawer's own surface
 * is white (`bg-white`), so cream text on white becomes effectively
 * invisible — the "Sign up or Login" link, the bottom USD / English
 * currency-locale footer, and any future drawer copy all silently
 * disappear.
 *
 * Force forest text on every descendant of the drawer's fixed wrapper
 * (`fixed z-[1000] overflow-hidden bg-white ...`). The hover state
 * still picks up our terracotta accent via the more specific selector
 * below.
 */
header div.fixed.bg-white,
header div.fixed.bg-white * {
    color: var(--av-forest) !important;
    fill: currentColor;
}
header div.fixed.bg-white a:hover,
header div.fixed.bg-white [role="button"]:hover {
    color: var(--av-terracotta) !important;
}

/*
 * Drawer logo — restore the DARK Artisavo wordmark.
 *
 * Same root cause as the text-color fix above: the drawer is nested
 * inside <header>, so the navbar rule that swaps the channel logo to
 * the light cream wordmark also runs for the drawer's logo, giving
 * us a cream wordmark on a white drawer surface (effectively
 * invisible — only the terracotta icon mark survives). Reverse the
 * swap back to the dark variant inside the drawer wrapper.
 */
header div.fixed.bg-white img[src*="/storage/channel/1/logo.png"],
header div.fixed.bg-white a > img[alt="Artisavo"] {
    content: url("/images/brand/artisavo-logo-horizontal.png") !important;
}

/* -----------------------------------------------------------------
 * Inline language toggle (EN | ES) injected into the desktop nav via
 * `bagisto.shop.components.layouts.header.desktop.bottom.compare.before`
 * — see App\Providers\AppServiceProvider::boot() and
 * resources/themes/default/views/partials/locale-toggle.blade.php.
 *
 * Lives in the right action group (between search and cart). We
 * deliberately keep it minimal so it reads as a system control, not a
 * promo: cream type, terracotta active state, no bordered "pill".
 * --------------------------------------------------------------- */
.av-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 0.1rem;
}
.av-lang-toggle__link {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--av-cream) !important;
    opacity: 0.7;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.av-lang-toggle__link + .av-lang-toggle__link {
    border-left: 1px solid rgba(247, 245, 242, 0.35);
}
.av-lang-toggle__link:hover,
.av-lang-toggle__link:focus-visible {
    color: var(--av-terracotta) !important;
    opacity: 1;
    text-decoration: none;
}
.av-lang-toggle__link--active {
    color: var(--av-terracotta) !important;
    opacity: 1;
}

/* -----------------------------------------------------------------
 * Footer
 *
 * Bagisto's footer uses bg-lightOrange + an inner bg-[#F1EADF] band.
 * Both flip to forest with cream text. Newsletter input becomes a
 * cream pill so it remains readable on dark.
 *
 * NOTE on specificity: the footer carries Bagisto's `bg-lightOrange`
 * Tailwind class. Our global `.bg-lightOrange { background-color:
 * var(--av-cream) }` rule (cream page panels) is specificity (0,1,0)
 * and would otherwise outrank a bare `footer` selector at (0,0,1),
 * leaving the footer cream-on-cream and hiding all of its text.
 * The `footer.bg-lightOrange` selector below is (0,1,1), so it
 * wins over both the bare `footer` rule AND the global
 * `.bg-lightOrange` helper, regardless of source order.
 * --------------------------------------------------------------- */
footer,
footer.bg-lightOrange {
    background-color: var(--av-forest) !important;
    color: var(--av-cream) !important;
    margin-top: 4rem !important;
}
footer a, footer p, footer li, footer span, footer h1, footer h2, footer h3, footer h4 {
    color: var(--av-cream) !important;
}
footer a:hover { color: var(--av-terracotta) !important; }

/* The bg-[#F1EADF] inline copyright bar */
footer > div[class*="F1EADF"],
footer > div.bg-\[\#F1EADF\] {
    background-color: var(--av-forest-2) !important;
}

footer .text-zinc-600 { color: rgba(247, 245, 242, 0.75) !important; }

/* Newsletter input on dark surface */
footer input[type="email"] {
    background-color: var(--av-cream) !important;
    color: var(--av-forest) !important;
    border-color: var(--av-line) !important;
}
footer input[type="email"]::placeholder {
    color: rgba(55, 69, 47, 0.55) !important;
}
footer button[type="submit"] {
    background-color: var(--av-terracotta) !important;
    color: var(--av-cream) !important;
}
footer button[type="submit"]:hover {
    background-color: var(--av-terracotta-2) !important;
}

/*
 * Artisavo footer wordmark sizing.
 * Set in our footer override; the rule lives here so logo size
 * tracks viewport breakpoints without touching the blade.
 */
footer .av-footer-wordmark img {
    height: 40px;
    width: auto;
    display: block;
}
@media (max-width: 768px) {
    footer .av-footer-wordmark img { height: 32px; }
}

/* -----------------------------------------------------------------
 * Forms — softer, warmer inputs across the storefront
 * --------------------------------------------------------------- */
input, textarea, select {
    border-color: var(--av-line);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--av-terracotta);
    box-shadow: 0 0 0 3px rgba(200, 107, 71, 0.18);
    outline: none;
}

/* -----------------------------------------------------------------
 * Product cards — soft rounded, warm shadow
 * --------------------------------------------------------------- */
[class*="product-card"],
.product-item,
[class*="grid-cols"] > article,
[class*="grid-cols"] > .relative {
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[class*="product-card"]:hover,
.product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(55, 69, 47, 0.10);
}

/* -----------------------------------------------------------------
 * Merchant onboarding pitch
 *
 * Same partial we used on Aimeos (resources/views/partials/merchant-pitch.blade.php),
 * just ported to render cleanly inside Bagisto's main content area.
 * The component's outer wrapper is `.av-pitch`, the card is
 * `.av-pitch-card`. Hide once a category page has 10+ products
 * (preserves the "coming soon" feel only while sparse).
 * --------------------------------------------------------------- */
.av-pitch {
    padding: 3.5rem clamp(1rem, 3vw, 1.5rem) 4rem;
}
@media (min-width: 768px) {
    .av-pitch { padding: 5rem clamp(1.5rem, 4vw, 2.5rem) 6rem; }
}
main:has([class*="catalog-grid"] > :nth-child(10)) .av-pitch--category,
main:has(.product-item:nth-child(10)) .av-pitch--category {
    display: none;
}

.av-pitch-card {
    background: var(--av-forest);
    color: var(--av-cream);
    border-radius: 18px;
    padding: 2.25rem 1.75rem;
    box-shadow: 0 18px 40px rgba(55, 69, 47, 0.18);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: min(1280px, 100%);
    margin: 0 auto;
}
@media (min-width: 768px) {
    .av-pitch-card {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        padding: 3rem 3.25rem;
        gap: 3.5rem;
    }
}
.av-pitch-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--av-terracotta);
    font-weight: 600;
}
.av-pitch-headline {
    margin: 0 0 1rem;
    color: var(--av-cream);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.av-pitch-body {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(247, 245, 242, 0.86);
}
.av-pitch-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.av-pitch-points li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    color: rgba(247, 245, 242, 0.92);
}
.av-pitch-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--av-terracotta);
}
.av-pitch-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}
@media (min-width: 768px) {
    .av-pitch-cta { align-items: stretch; text-align: center; }
}
.av-pitch-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--av-terracotta) !important;
    border: 2px solid var(--av-terracotta);
    color: var(--av-cream) !important;
    padding: 0.85rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.av-pitch-btn-primary:hover,
.av-pitch-btn-primary:focus {
    background-color: var(--av-terracotta-2) !important;
    border-color: var(--av-terracotta-2);
    box-shadow: 0 8px 20px rgba(200, 107, 71, 0.35);
}
.av-pitch-btn-secondary {
    color: var(--av-cream) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    font-weight: 500;
}
.av-pitch-btn-secondary:hover,
.av-pitch-btn-secondary:focus {
    color: var(--av-terracotta) !important;
}

/* -----------------------------------------------------------------
 * Hero slider — Artisavo treatment
 *
 * Bagisto ships a slider component that cycles through admin-uploaded
 * banners. We override the visual treatment when the slider is the
 * homepage hero (selector hooks the .av-hero-slider class added in our
 * home view override).
 *
 * Goal: light-photo cream backdrop + dark gradient at the top so the
 * forest navbar text stays readable, and on-photo forest copy on the
 * left side.
 * --------------------------------------------------------------- */
.av-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.av-hero-slide {
    position: relative;
    display: block;
    background-color: var(--av-cream);
}
.av-hero-slide img {
    width: 100%;
    height: clamp(440px, 56vw, 640px);
    object-fit: cover;
    display: block;
}
.av-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(55, 69, 47, 0.78) 0%,
        rgba(55, 69, 47, 0.55) 14%,
        rgba(55, 69, 47, 0.18) 35%,
        rgba(55, 69, 47, 0) 55%
    );
}
.av-hero-text {
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 5%;
    max-width: 46%;
    color: var(--av-forest);
    text-shadow: 0 1px 12px rgba(247, 245, 242, 0.65);
}
.av-hero-text h2 {
    color: var(--av-forest);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}
.av-hero-text p {
    margin-top: 0.5rem;
    color: var(--av-forest-2);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    line-height: 1.4;
}
.av-hero-text .av-hero-btn {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.7rem 1.5rem;
    border-radius: 9999px;
    background-color: var(--av-forest);
    color: var(--av-cream);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.av-hero-text .av-hero-btn:hover {
    background-color: var(--av-terracotta);
}
@media (max-width: 768px) {
    .av-hero-text {
        top: 18%;
        left: 5%;
        max-width: 80%;
    }
}

/* -----------------------------------------------------------------
 * Hero carousel — Artisavo BEM-style overlay
 *
 * Hooks rendered by our override of Bagisto's image_carousel
 * (resources/themes/default/views/components/carousel/index.blade.php).
 *
 * Each slide is the full-bleed photo with a dark left-side scrim
 * carrying:
 *   .av-hero__eyebrow  → diet name (e.g. "Keto")
 *   .av-hero__title    → tagline
 *   .av-hero__cta      → "Take a look" pill button
 * --------------------------------------------------------------- */
.av-hero {
    background-color: var(--av-cream);
}
.av-hero__slide {
    position: relative;
    overflow: hidden;
}
.av-hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(55, 69, 47, 0.62) 0%,
        rgba(55, 69, 47, 0.38) 35%,
        rgba(55, 69, 47, 0.05) 65%,
        rgba(55, 69, 47, 0) 100%
    );
}
.av-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.av-hero__inner {
    pointer-events: auto;
    margin-left: clamp(1.25rem, 6vw, 5rem);
    max-width: min(46%, 38rem);
    color: var(--av-cream);
}
.av-hero__eyebrow {
    margin: 0 0 0.6rem 0;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--av-cream);
    opacity: 0.92;
}
.av-hero__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--av-cream);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.18);
}
.av-hero__cta {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.75rem 1.6rem;
    border-radius: 9999px;
    background-color: var(--av-cream);
    color: var(--av-forest);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.av-hero__cta:hover,
.av-hero__cta:focus-visible {
    background-color: var(--av-terracotta);
    color: var(--av-cream);
    transform: translateY(-1px);
}

.av-hero__dot {
    background-color: rgba(247, 245, 242, 0.45);
    transition: background-color 0.15s ease;
}
.av-hero__dot--active {
    background-color: var(--av-cream);
}

/*
 * Cap the hero height on desktop. The slide image is aspect-driven
 * (2.743:1) with no ceiling, so on wide monitors it grows to ~600-700px
 * and pushes the Featured Products row well below the fold. Capping the
 * height keeps the hero short enough that products surface with minimal
 * scroll; object-fit: cover crops the photo cleanly on wide screens.
 * Phones/tablets keep their own height rule in the max-width block below.
 */
@media (min-width: 769px) {
    .av-hero__slide img {
        max-height: 440px;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .av-hero__slide img {
        aspect-ratio: auto !important;
        height: clamp(260px, 72vw, 340px) !important;
        object-fit: cover;
    }

    .av-hero__overlay {
        align-items: flex-start;
        padding-top: 1.4rem;
    }

    .av-hero__inner {
        max-width: 78%;
        margin-left: 1.25rem;
    }

    .av-hero__eyebrow {
        margin-bottom: 0.35rem;
        font-size: 0.68rem;
    }

    .av-hero__title {
        font-size: clamp(1.25rem, 7vw, 1.65rem);
        line-height: 1.1;
    }

    .av-hero__cta {
        margin-top: 0.9rem;
        padding: 0.6rem 1.1rem;
        font-size: 0.85rem;
        line-height: 1;
    }

    .av-hero__slide::before {
        background: linear-gradient(
            180deg,
            rgba(55, 69, 47, 0.78) 0%,
            rgba(55, 69, 47, 0.55) 35%,
            rgba(55, 69, 47, 0.10) 75%,
            rgba(55, 69, 47, 0) 100%
        );
    }
}

/* -----------------------------------------------------------------
 * Category landing — tagline + merchant pitch
 *
 * The tagline is rendered from category_translations.description
 * (seeded by scripts/seed-artisavo-categories.php). The pitch panel
 * is rendered server-side by
 * resources/themes/default/views/categories/view.blade.php when the
 * category has 10 or fewer active products.
 * --------------------------------------------------------------- */
.av-cat-tagline {
    margin: 0;
}
.av-cat-tagline h2 {
    margin: 0;
    color: var(--av-terracotta);
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.av-cat-tagline p {
    margin: 0.35rem 0 0 0;
    color: var(--av-terracotta);
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.4;
    opacity: 0.95;
}

.av-cat-pitch {
    background-color: var(--av-forest);
    border-radius: 18px;
    color: var(--av-cream);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 12px 36px rgba(55, 69, 47, 0.16);
}
.av-cat-pitch__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
}
.av-cat-pitch__copy {
    min-width: 0;
}
.av-cat-pitch__eyebrow {
    margin: 0 0 0.5rem 0;
    color: var(--av-terracotta);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.av-cat-pitch__headline {
    margin: 0 0 0.85rem 0;
    color: var(--av-cream);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
}
.av-cat-pitch__body {
    margin: 0 0 1rem 0;
    color: var(--av-cream);
    line-height: 1.55;
    opacity: 0.92;
    max-width: 42rem;
}
.av-cat-pitch__points {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--av-cream);
    opacity: 0.95;
}
.av-cat-pitch__points li {
    position: relative;
    padding-left: 1.25rem;
    margin: 0.3rem 0;
    line-height: 1.4;
}
.av-cat-pitch__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background-color: var(--av-terracotta);
}
.av-cat-pitch__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.av-cat-pitch__btn-primary {
    display: inline-block;
    padding: 0.85rem 1.7rem;
    border-radius: 9999px;
    background-color: var(--av-terracotta);
    color: var(--av-cream);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.av-cat-pitch__btn-primary:hover,
.av-cat-pitch__btn-primary:focus-visible {
    background-color: var(--av-terracotta-2);
    transform: translateY(-1px);
}
.av-cat-pitch__btn-secondary {
    color: var(--av-cream);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    transition: opacity 0.15s ease;
}
.av-cat-pitch__btn-secondary:hover,
.av-cat-pitch__btn-secondary:focus-visible {
    opacity: 0.8;
    color: var(--av-cream);
}

@media (max-width: 1024px) {
    .av-cat-pitch__inner {
        grid-template-columns: 1fr;
    }
    .av-cat-pitch__cta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

/* -----------------------------------------------------------------
 * Recipe form — native file picker button
 *
 * Bagisto's compiled Tailwind doesn't include the `file:` variant
 * (it wasn't enabled at build time + JIT doesn't see our blade
 * files), so `file:bg-[#37452F]` etc. on the recipe form's
 * <input type="file"> don't render. Style the real
 * `::file-selector-button` pseudo-element directly so the picker
 * matches the rest of the form (forest pill, cream label).
 *
 * The selector hits any file input inside a recipe form — both the
 * hero photo at the top and per-step photos in the steps list.
 * --------------------------------------------------------------- */
#recipe-form input[type="file"]::file-selector-button {
    margin-right: 16px;
    padding: 10px 20px;
    border: 0;
    border-radius: 9999px;
    background-color: var(--av-forest);
    color: var(--av-cream);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
#recipe-form input[type="file"]::file-selector-button:hover {
    background-color: var(--av-forest-2);
}
#recipe-form input[type="file"] {
    color: #5F6857;
    font-size: 14px;
}

/* -----------------------------------------------------------------
 * Recipe page brand utility classes.
 *
 * Bagisto's compiled Tailwind bundle is a snapshot — JIT only sees
 * the blade/Vue files that were in `content` at build time. Adding
 * new arbitrary values like `text-[#C86B47]` to a project blade
 * does NOT regenerate the bundle, so any color/typography token we
 * use in recipe blades silently falls back to the inherited color.
 *
 * Rather than rebuild Bagisto on every brand tweak, expose stable
 * brand classes here and use them from blade. They reference the
 * `--av-*` CSS variables already defined at :root, so they survive
 * Bagisto upgrades and re-compiles cleanly.
 * --------------------------------------------------------------- */
.av-text-forest    { color: var(--av-forest) !important; }
.av-text-forest-2  { color: var(--av-forest-2) !important; }
.av-text-terracotta{ color: var(--av-terracotta) !important; }
.av-text-muted     { color: #5F6857 !important; }
.av-text-soft      { color: #9AA29A !important; }
.av-text-cream     { color: var(--av-cream) !important; }

.av-bg-forest      { background-color: var(--av-forest) !important; }
.av-bg-forest-2    { background-color: var(--av-forest-2) !important; }
.av-bg-terracotta  { background-color: var(--av-terracotta) !important; }
.av-bg-cream       { background-color: var(--av-cream) !important; }
.av-bg-white       { background-color: #FFFFFF !important; }

.av-border-line    { border-color: var(--av-line) !important; }
.av-border-terracotta { border-color: var(--av-terracotta) !important; }

.av-tracking-eyebrow { letter-spacing: 0.24em !important; }

/* -----------------------------------------------------------------
 * Recipe form — chrome
 *
 * Compose into a single rule the input chrome that every textbox /
 * textarea / select on the recipe form shares. Avoids the per-input
 * Tailwind utility chain that wouldn't survive a recompile anyway.
 * --------------------------------------------------------------- */
#recipe-form input[type="text"],
#recipe-form input[type="number"],
#recipe-form textarea,
#recipe-form select {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--av-line);
    background-color: #FFFFFF;
    color: var(--av-forest);
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(55, 69, 47, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#recipe-form input[type="text"]::placeholder,
#recipe-form textarea::placeholder {
    color: #9AA29A;
}
#recipe-form input[type="text"]:focus,
#recipe-form input[type="number"]:focus,
#recipe-form textarea:focus,
#recipe-form select:focus {
    outline: none;
    border-color: var(--av-terracotta);
    box-shadow: 0 0 0 3px rgba(200, 107, 71, 0.18);
}

/* -----------------------------------------------------------------
 * Recipe form layout
 *
 * Class-driven rhythm for the share-a-recipe form. Replaces the
 * previous Tailwind-utility chain so we don't depend on the
 * compiled Bagisto bundle including our arbitrary values.
 *
 * Vertical rhythm:
 *   - 40px between top-level sections (.recipe-form-stack > * + *)
 *   - 24px between fields inside a section (.recipe-section > * + *)
 *   - 20px between section header and first card
 *   -  8px between label and input (.recipe-field label)
 *   -  6px between input and helper text (.recipe-hint)
 * --------------------------------------------------------------- */

.recipe-form-stack > * + * { margin-top: 40px; }

.recipe-section { display: block; }
.recipe-section > * + * { margin-top: 20px; }
.recipe-section-tight > * + * { margin-top: 24px; }

.recipe-section-stack > * + * { margin-top: 16px; }

.recipe-section-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.recipe-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.recipe-field { display: block; }

.recipe-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.recipe-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}
.recipe-hint-tight { margin-top: 0 !important; margin-bottom: 12px; }

.recipe-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .recipe-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
    .recipe-grid-4 { grid-template-columns: 1fr; gap: 16px; }
}

.recipe-ingredient-grid {
    display: grid;
    grid-template-columns: 80px 100px 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .recipe-ingredient-grid { grid-template-columns: 1fr; gap: 10px; }
}

.recipe-card {
    border-radius: 16px;
    border: 1px solid var(--av-line);
    background-color: #FFFFFF;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(55, 69, 47, 0.05);
}

.recipe-row-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.recipe-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.recipe-step-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.recipe-step-image { margin-top: 14px; }
.recipe-step-image-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
}

/* Add-row pill (Add ingredient / Add step) */
.recipe-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9999px;
    border: 1px solid var(--av-terracotta);
    color: var(--av-terracotta);
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.recipe-add-btn:hover,
.recipe-add-btn:focus-visible {
    background-color: var(--av-terracotta);
    color: var(--av-cream);
    outline: none;
}

/* Remove link inside ingredient/step cards */
.recipe-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #9AA29A;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.recipe-remove-btn:hover,
.recipe-remove-btn:focus-visible {
    color: var(--av-terracotta);
    outline: none;
}

/* Diet chips */
.recipe-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.recipe-diet-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid var(--av-line);
    background-color: #FFFFFF;
    color: var(--av-forest);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.recipe-diet-chip:hover { border-color: var(--av-terracotta); }
.recipe-diet-chip[data-checked="true"] {
    background-color: var(--av-terracotta);
    color: var(--av-cream);
    border-color: var(--av-terracotta);
}
/* Hide the actual checkbox without removing it from the DOM */
.recipe-diet-toggle {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Advanced disclosure */
.recipe-advanced {
    border-radius: 12px;
    border: 1px solid var(--av-line);
    background-color: var(--av-cream);
    padding: 16px 20px;
}
.recipe-advanced-summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}
.recipe-advanced-summary::-webkit-details-marker { display: none; }
.recipe-advanced-summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--av-terracotta);
    transition: transform 0.15s ease;
}
.recipe-advanced[open] .recipe-advanced-summary::before { transform: rotate(90deg); }
.recipe-advanced-body { margin-top: 16px; }

/* Hero preview after editing */
.recipe-hero-preview {
    margin-top: 16px;
    height: 160px;
    border-radius: 12px;
    border: 1px solid var(--av-line);
    object-fit: cover;
}

/* Optional pill next to chef notes label */
.recipe-optional-pill {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
}

/* Submit row */
.recipe-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--av-line);
    padding-top: 24px;
}
.recipe-submit-publish,
.recipe-submit-draft {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
}

/* -----------------------------------------------------------------
 * Recipe page header (create / edit) and error banner
 * --------------------------------------------------------------- */
.recipe-page-head {
    margin-bottom: 40px;
}
.recipe-page-eyebrow {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.recipe-page-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 600;
}
@media (max-width: 640px) {
    .recipe-page-title { font-size: 28px; }
}
.recipe-page-lead {
    margin: 12px 0 0 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.6;
}

.recipe-error-banner {
    margin-bottom: 32px;
    border-radius: 12px;
    border: 1px solid #E2C7B7;
    background-color: #FBEEE6;
    padding: 16px 20px;
    color: #7A3C22;
    font-size: 14px;
}
.recipe-error-banner ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}
.recipe-error-banner ul li + li {
    margin-top: 4px;
}