/*
 * The Food's Life — Design System v3 ("Roasted & Raw")
 *
 * v2 ("Fresh Market") was deep green + cream — a well-worn "wellness
 * DTC" look shared by half the health-food brands on the internet.
 * v3 replaces the palette with something this category actually owns:
 * roasted-nut rust, market-stall mustard and a near-black coffee-bean
 * charcoal — colors that read as dry fruits, roasted makhana and
 * spice, not generic "healthy". Headlines move to Bricolage Grotesque,
 * a characterful, slightly irregular display face, instead of a soft
 * editorial serif, so the type itself feels like a considered brand
 * choice rather than a template default.
 *
 * The token NAMES below (--ds-green-*, --ds-turmeric*) are kept as-is
 * on purpose: every page already wired to them (homepage, gift page,
 * header, footer, cart, checkout, login, product cards — see git log)
 * automatically picks up the new brand colors without re-touching
 * fifteen files again. Read --ds-green-600 as "the primary brand
 * color", not literally green, going forward.
 *
 * Loaded last on every front-end page (see layouts/front.blade.php) so
 * it wins the cascade over the legacy template CSS without needing to
 * touch every Blade file. Contrast checked against WCAG AA.
 */

:root {
    /* ---- Color tokens ---- */
    --ds-bg: #faf3e6;
    --ds-surface: #ffffff;
    --ds-surface-alt: #f3e6d2;
    --ds-border: #e8d5b8;

    /* Primary brand color: roasted-nut rust (was sage green in v2) */
    --ds-green-50: #f7e7e0;
    --ds-green-100: #edc9ba;
    --ds-green-500: #b85535;
    --ds-green-600: #a8452b;
    /* buttons / interactive fills — ~6.2:1 with white text */
    --ds-green-700: #7c331f;
    --ds-green-900: #2b1a14;
    /* near-black coffee-bean charcoal — headings, dark bands */

    /* Accent: market-stall mustard (was flat turmeric in v2) */
    --ds-turmeric: #d9a62e;
    --ds-turmeric-700: #9c6b12;
    /* offer/discount only — passes AA with white text */

    --ds-ink: #2b211c;
    --ds-ink-muted: #6b5d50;
    --ds-white: #ffffff;

    --ds-success: var(--ds-green-600);
    --ds-danger: #b3261e;

    /* ---- Type ---- */
    /* Bricolage Grotesque: an irregular, characterful display face —
       reads as a deliberate brand choice, not a template default.
       Inter stays for body/UI: distinctiveness belongs in headlines,
       not in paragraph legibility. */
    --ds-font-heading: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --ds-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* ---- Spacing scale ---- */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 40px;
    --ds-space-7: 64px;
    --ds-space-8: 96px;

    /* ---- Radius / shadow ---- */
    --ds-radius-sm: 10px;
    --ds-radius-md: 18px;
    --ds-radius-lg: 28px;
    --ds-radius-pill: 999px;
    /* Signature asymmetric "hand-cut" corner — one corner square, three
       rounded — used on hero art, cards and images instead of a plain
       rectangle or a uniform rounded-rect everywhere. */
    --ds-radius-cut: 32px 8px 32px 8px;

    --ds-shadow-sm: 0 1px 2px rgba(18, 48, 15, .06), 0 4px 12px rgba(18, 48, 15, .05);
    --ds-shadow-md: 0 8px 28px rgba(18, 48, 15, .10);
    --ds-shadow-lg: 0 24px 64px rgba(18, 48, 15, .18);

    --ds-transition: 220ms cubic-bezier(.4, 0, .2, 1);

    /* ---- z-index scale ----
       One shared scale for every fixed/sticky/overlay element on the
       site, instead of ad-hoc numbers (z-index:9999 etc.) scattered
       per component. Higher wins; each layer's numbers leave headroom
       for internal stacking (e.g. dropdown above nav, but still below
       the popup layer). */
    --z-content: 1;
    --z-sticky-header: 500;
    --z-floating: 800;
    /* WhatsApp/Call, back-to-top, sticky add-to-cart */
    --z-cookie: 1050;
    --z-popup: 2000;
    /* lead-capture popup, any modal */
    --z-toast: 3000;
}

/* ================= BASE / RESPONSIVE FOUNDATION ================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* A too-wide element anywhere still won't force the whole page to
       scroll sideways — this is a backstop, not a fix for the element
       itself (those are fixed individually below/elsewhere). */
    overflow-x: hidden;
}

body {
    background: var(--ds-bg);
    color: var(--ds-ink);
    font-family: var(--ds-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Long product names, emails, URLs never force horizontal scroll */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th {
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ds-font-heading);
    color: var(--ds-green-900);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

a { color: var(--ds-green-700); }

::selection { background: var(--ds-green-100); color: var(--ds-green-900); }

/* Signature link style: an underline that grows from the left on hover,
   instead of a plain color swap — used for inline text links. */
.ds-link {
    position: relative;
    color: var(--ds-green-700);
    text-decoration: none;
    padding-bottom: 2px;
}

.ds-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--ds-transition);
}

.ds-link:hover::after { width: 100%; }

/* ================= COLOR-BLOCK SECTIONS ================= */
/* Alternate cream / white / deep-green full-bleed bands between homepage
   sections instead of one flat background top to bottom — the strongest
   single change that makes a page stop reading as "generic template". */

.ds-band-cream { background: var(--ds-bg); }
.ds-band-white { background: var(--ds-surface); }

.ds-band-dark {
    background: var(--ds-green-900);
    color: rgba(255, 255, 255, .82);
}

.ds-band-dark h1, .ds-band-dark h2, .ds-band-dark h3,
.ds-band-dark .h1, .ds-band-dark .h2, .ds-band-dark .h3 {
    color: var(--ds-white);
}

.ds-band-dark .ds-eyebrow, .ds-band-dark .section-tag {
    background: rgba(255, 255, 255, .12);
    color: var(--ds-green-50);
}

/* ================= SECTION HEADING ================= */

.ds-section-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--ds-space-7);
}

.ds-section-heading .ds-eyebrow,
.section-tag {
    display: inline-block;
    font-family: var(--ds-font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-green-700);
    background: var(--ds-green-50);
    padding: 6px 16px;
    border-radius: var(--ds-radius-pill);
    margin-bottom: var(--ds-space-4);
}

.ds-section-heading h2 {
    font-size: clamp(28px, 4.6vw, 44px);
    margin: 0 0 var(--ds-space-3);
}

.ds-section-heading p {
    color: var(--ds-ink-muted);
    font-size: 16px;
    margin: 0;
}

/* ================= BUTTONS ================= */

.ds-btn,
.btn,
button:not(.hamburger-menu):not([class*="lead-cc"]),
input[type="submit"],
.add_cart_button,
.submit-btn,
.affilate-btn,
.btn-add-cart {
    font-family: var(--ds-font-body);
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: var(--ds-radius-pill);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), opacity var(--ds-transition);
}

.ds-btn-primary,
.btn-primary,
.add_cart_button,
.btn-add-cart,
.submit-btn {
    background: var(--ds-green-600) !important;
    border-color: var(--ds-green-600) !important;
    color: var(--ds-white) !important;
}

.ds-btn-primary:hover,
.btn-primary:hover,
.add_cart_button:hover,
.btn-add-cart:hover,
.submit-btn:hover {
    background: var(--ds-green-700) !important;
    border-color: var(--ds-green-700) !important;
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-sm);
}

.ds-btn-outline {
    background: transparent;
    border: 2px solid var(--ds-green-600);
    color: var(--ds-green-700);
}

.ds-btn-outline:hover { background: var(--ds-green-50); }

/* A second, deliberately different primary shape for hero-level CTAs:
   the asymmetric cut corner instead of a pill, so the hero doesn't look
   like every other button on the page. */
.ds-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-body);
    font-weight: 700;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: var(--ds-radius-cut);
    background: var(--ds-turmeric);
    color: var(--ds-green-900);
    border: none;
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-lg);
    color: var(--ds-green-900);
}

/* ================= CARDS ================= */

.ds-card,
.card,
.product-card,
[class*="-card-fe"],
[class$="-card"] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--ds-transition), transform var(--ds-transition);
}

.ds-card:hover,
.card:hover,
.product-card:hover,
[class*="-card-fe"]:hover,
[class$="-card"]:hover {
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-4px);
}

/* Product photography gets the signature asymmetric cut, cards stay a
   normal rounded rect — the contrast between the two is the point.
   Scoped to .ds-card only (opt-in, on markup we control the structure
   of) — most existing product-card image wrappers clip via an ancestor
   with its own overflow:hidden + border-radius, so setting radius on
   the <img> itself there would silently do nothing. */
.ds-card img:first-child {
    border-radius: var(--ds-radius-cut);
}

/* ================= BADGES ================= */
/* A stamp/ticket shape (notched corners via a conic-gradient mask) for
   discount + status badges instead of a generic rounded pill — reads
   like a printed price tag, on-brand for a market/grocer. Falls back to
   a plain pill automatically in any browser without mask support. */

.ds-badge, .badge, .on-sale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ds-font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 12px;
    border-radius: var(--ds-radius-pill);
    color: var(--ds-white);
}

.on-sale { background: var(--ds-turmeric-700) !important; }

.ds-badge-fresh, .badge-bestseller, .badge-new, .badge-recommended {
    background: var(--ds-green-600);
}

.ds-badge-offer, .badge-offer { background: var(--ds-turmeric-700); }

/* ================= TRUST STRIP ================= */

.ds-trust-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-space-3) var(--ds-space-4);
    box-shadow: var(--ds-shadow-sm);
}

.ds-trust-item .ds-trust-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ds-green-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ================= ORGANIC BACKDROP SHAPES ================= */
/* Soft blob decorations behind hero/section content — pure CSS
   (radial gradients + border-radius), no image assets needed. */

.ds-blob {
    position: absolute;
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    filter: blur(0px);
    z-index: 0;
    pointer-events: none;
}

.ds-blob--green {
    background: radial-gradient(circle at 30% 30%, var(--ds-green-100), transparent 70%);
}

.ds-blob--turmeric {
    background: radial-gradient(circle at 70% 30%, rgba(217, 138, 29, .18), transparent 70%);
}

/* ================= INPUTS ================= */

.ds-input, .form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
    font-family: var(--ds-font-body);
    font-size: 16px;
    /* never below 16px: stops mobile Safari auto-zoom on focus */
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-ink);
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-input:focus, .form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--ds-green-600);
    box-shadow: 0 0 0 3px rgba(44, 107, 47, .16);
    outline: none;
}

/* ================= ACCESSIBLE FOCUS ================= */

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ds-green-600);
    outline-offset: 2px;
}

/* ================= PRICE / RATING ================= */

.ds-price, .price-new {
    font-family: var(--ds-font-heading);
    font-weight: 600;
    color: var(--ds-green-900);
}

.ds-price-old, .price-old {
    color: var(--ds-ink-muted);
    text-decoration: line-through;
    font-size: .9em;
}

.stars, .star-rating { color: var(--ds-turmeric); }

/* ================= FLOATING ELEMENT STACKING ================= */
/* Shared z-index tiers for every fixed/sticky element (see --z-* in
   :root). Individual position/offset values stay wherever each
   component already defines them (hand-tuned per breakpoint) — this
   only fixes the STACKING ORDER and the "cookie banner covers the
   floating buttons" overlap. */

/* .header's own z-index is set at its source (common-header.blade.php)
   since that file's cascade position would otherwise win over this one
   without !important — see the comment there. */

.sticky-whatsapp-img,
#scroll,
.mobile-sticky-buybar {
    z-index: var(--z-floating) !important;
}

.cookie-consent { z-index: var(--z-cookie) !important; }

.lead-gate, .slider-header { z-index: var(--z-popup) !important; }

/* Cookie card (bottom-right, ~340px) mirrored via body.cookie-consent-
   visible (see common-footer.blade.php's MutationObserver) — lifts the
   floating buttons clear of it instead of letting the card sit on top
   of them. */
body.cookie-consent-visible .sticky-whatsapp-img {
    transform: translateY(-190px);
    transition: transform var(--ds-transition);
}

body.cookie-consent-visible #scroll {
    transform: translateY(-190px);
    transition: transform var(--ds-transition);
}

@media (max-width: 480px) {
    body.cookie-consent-visible .sticky-whatsapp-img,
    body.cookie-consent-visible #scroll {
        /* Cookie card goes full-width-ish and taller on very small
           phones (see footer.css's <480px rule) — lift further. */
        transform: translateY(-220px);
    }
}

/* ================= SAFE AREA (notch / home-indicator) ================= */
/* Adds clearance only — never overrides the padding these already have
   on other sides, so their hand-tuned per-breakpoint left/right/top
   offsets are untouched. Needs viewport-fit=cover on the <meta
   viewport> (see layouts/front.blade.php) or these all resolve to 0. */

.footer-menu {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cookie-consent {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

.sticky-whatsapp-img, #scroll {
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* ================= PAGE BANNERS ================= */
/* The "breadcrumb" banner strip (page title + Home > X trail over a
   background image) repeats on almost every inner page — cart,
   checkout, login, contact, product list. It's one legacy rule
   (.overlay-dark::before, a flat rgba(26,26,30,.6) grey-black), so one
   override here reskins all of those pages' top banner at once. */
.overlay-dark::before {
    background-color: rgba(18, 48, 15, .72) !important;
}

/* ================= IMAGE ASPECT RATIO ================= */
/* Reserves the image's box before it loads, so the page doesn't jump
   as lazy-loaded product photos come in. Square is the pattern the
   product photography already follows on the homepage. */
.product-image, .product-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ================= SMALL SCREENS ================= */

@media (max-width: 576px) {
    body { font-size: 16px; }
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.55rem; }

    .btn, button, .add_cart_button, .submit-btn, .btn-add-cart {
        min-height: 44px;
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .ds-btn-hero {
        width: 100%;
        justify-content: center;
    }
}