/*
        ============================================================
        CSS — This is where your site gets its visual identity.
        CSS rules look like this:
            selector { property: value; }
        The selector picks WHAT to style.
        The property + value define HOW to style it.
        ============================================================
      */

    /*
        CSS VARIABLES — Think of these as named color/font constants.
        Define once here, use everywhere. If you want to change your
        brand color, you change it in ONE place and it updates the
        whole site. Variables start with two dashes: --variable-name
        :root means "apply these to the whole document."
      */
    :root {
        /* ── Brand Colors (sampled directly from your logo) ── */
        --color-bg: #1a1a0f;
        /* Deep volcanic black — main background */
        --color-cream: #e8dfc8;
        /* Warm cream — primary text on dark bg */
        --color-lava: #e8541a;
        /* Volcano orange — primary accent / CTA buttons */
        --color-cherry: #c0412b;
        /* Coffee cherry red — secondary accent */
        --color-forest: #2d5016;
        /* Deep green — subtle accents */
        --color-sky: #2e6fa3;
        /* Salvadoran flag blue — used sparingly */
        --color-surface: #242418;
        /* Slightly lighter than bg — for cards */
        --color-border: #3a3a28;
        /* Subtle borders */
        --color-muted: #9a9070;
        /* Muted text — captions, labels */

        /* ── Typography ── */
        --font-heading: 'Playfair Display', Georgia, serif;
        --font-body: 'DM Sans', system-ui, sans-serif;

        /* ── Spacing scale (consistent spacing throughout the site) ── */
        --space-xs: 0.5rem;
        /*  8px */
        --space-sm: 1rem;
        /* 16px */
        --space-md: 1.5rem;
        /* 24px */
        --space-lg: 3rem;
        /* 48px */
        --space-xl: 6rem;
        /* 96px */

        /* ── Layout ── */
        --max-width: 1200px;
        /* Page never stretches wider than this */
        --radius: 6px;
        /* Border radius for cards and buttons */
    }

    /*
        RESET — Browsers add their own default margins, padding, and
        box sizing that differ between Chrome, Firefox, Safari, etc.
        This resets all of that so we start from a clean slate.
        * means "apply to every single element."
        box-sizing: border-box means padding and border are INCLUDED
        in an element's width — much more intuitive to work with.
      */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Base page styles */
    body {
        background-color: var(--color-bg);
        color: var(--color-cream);
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.6;
        /* Space between lines of text */
        -webkit-font-smoothing: antialiased;
        /* Crisper fonts on Mac */
    }

    /*
        UTILITY CLASS — .container centers content and limits
        its width. We'll add class="container" to sections that
        need their content centered. margin: 0 auto centers a
        block element horizontally.
      */
    .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--space-md);
        /* Side padding so text doesn't touch screen edges */
    }

    /* ── Smooth scroll when clicking anchor links (like nav links) ── */
    html {
        scroll-behavior: smooth;
    }

    /* ════════════════════════════════════════
         NAVIGATION BAR
         ════════════════════════════════════════ */
    /*
        position: sticky + top: 0 makes the nav "stick" to the
        top of the screen as you scroll down.
        z-index: 100 keeps it on top of all other content.
        backdrop-filter adds the frosted glass blur effect.
      */
    .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(26, 26, 15, 0.92);
        /* Slightly transparent bg */
        backdrop-filter: blur(12px);
        /* Blurs content behind nav */
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-sm) 0;
    }

    /* flex makes children line up in a row */
    .nav__inner {
        display: flex;
        align-items: center;
        /* Vertically center items */
        justify-content: space-between;
        /* Logo left, links right */
    }

    .nav__logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        font-family: var(--font-heading);
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--color-cream);
        text-decoration: none;
        /* Remove default underline from links */
        letter-spacing: 0.05em;
    }

    .nav__logo-img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;

    }

    /* The accent dot on the logo text */
    .nav__logo span {
        color: var(--color-lava);
    }

    /* The nav links list — list-style: none removes bullet points */
    .nav__links {
        display: flex;
        gap: var(--space-md);
        /* Space between each link */
        list-style: none;
    }

    .nav__links a {
        color: var(--color-muted);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        /*
          transition animates property changes smoothly.
          "color 0.2s ease" means: when color changes, animate
          it over 0.2 seconds with an ease curve.
        */
        transition: color 0.2s ease;
    }

    /* :hover applies when the user's mouse is over the element */
    .nav__links a:hover {
        color: var(--color-cream);
    }

    .nav__cta {
        background: var(--color-lava);
        color: #fff !important;
        /* !important overrides the muted color above */
        padding: 0.5rem 1.25rem;
        border-radius: var(--radius);
        transition: background 0.2s ease, transform 0.1s ease !important;
    }

    .nav__cta:hover {
        background: var(--color-cherry) !important;
        transform: translateY(-1px);
        /* Subtle lift on hover */
    }

    /* ── Hamburger button ── */
    .nav__hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
    }

    .nav__hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-cream);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Show hamburger, hide links on mobile */
    @media (max-width: 480px) {
        .nav__hamburger {
            display: flex;
        }

        .nav__links {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            background: rgba(26, 26, 15, 0.98);
            border-bottom: 1px solid var(--color-border);
            padding: var(--space-sm) var(--space-md);
            gap: var(--space-sm);
        }

        /* When menu is open, show the links */
        .nav__links.open {
            display: flex;
        }

        /* Animate the burger into an X when open */
        .nav__hamburger.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .nav__hamburger.open span:nth-child(2) {
            opacity: 0;
        }

        .nav__hamburger.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }
    }

    /* ════════════════════════════════════════
         HERO SECTION
         The big banner at the top of the page
         ════════════════════════════════════════ */
    .hero {
        min-height: 92vh;
        /* 92% of the screen height */
        display: flex;
        align-items: center;
        /* Vertically center the content */
        position: relative;
        overflow: hidden;
        /* Hides anything that sticks out */
        padding: var(--space-xl) 0;
    }

    /*
        Pseudo-elements ::before and ::after let you add decorative
        content without extra HTML. Here we use ::before to add a
        subtle texture/gradient overlay on the hero background.
      */
    .hero::before {
        content: '';
        /* Required for pseudo-elements */
        position: absolute;
        inset: 0;
        /* Shorthand for top/right/bottom/left: 0 */
        background:
            radial-gradient(ellipse at 70% 50%, rgba(232, 84, 26, 0.08) 0%, transparent 60%),
            radial-gradient(ellipse at 20% 80%, rgba(45, 80, 22, 0.12) 0%, transparent 50%);
        pointer-events: none;
        /* So it doesn't block clicks */
    }

    .hero__content {
        position: relative;
        /* Sits above the ::before overlay */
        max-width: 680px;
    }

    /* Small label above the main headline */
    .hero__label {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-lava);
        margin-bottom: var(--space-sm);
        /* The line before the label */
        padding-left: 2.5rem;
        position: relative;
    }

    .hero__label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 1.75rem;
        height: 1px;
        background: var(--color-lava);
    }

    /* Main heading — clamp() makes font size responsive:
         minimum 2.5rem, preferred 5vw, maximum 4.5rem */
    .hero__heading {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-bottom: var(--space-md);
        color: var(--color-cream);
    }

    .hero__heading em {
        font-style: italic;
        color: var(--color-lava);
        /* Highlighted word in lava color */
    }

    .hero__subtext {
        font-size: 1.1rem;
        color: var(--color-muted);
        max-width: 520px;
        margin-bottom: var(--space-lg);
        line-height: 1.7;
    }

    /* Button group — side by side buttons */
    .hero__actions {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
        /* Stack on small screens */
    }

    /* ════════════════════════════════════════
         BUTTONS
         ════════════════════════════════════════ */

    /* Base button styles shared by all buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem 2rem;
        border-radius: var(--radius);
        font-family: var(--font-body);
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

    /* Primary button — filled lava orange */
    .btn--primary {
        background: var(--color-lava);
        color: #fff;
    }

    .btn--primary:hover {
        background: var(--color-cherry);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(232, 84, 26, 0.3);
    }

    /* Secondary button — outlined, no fill */
    .btn--secondary {
        background: transparent;
        color: var(--color-cream);
        border: 1px solid var(--color-border);
    }

    .btn--secondary:hover {
        border-color: var(--color-cream);
        transform: translateY(-2px);
    }

    /* ════════════════════════════════════════
         SECTION SHARED STYLES
         ════════════════════════════════════════ */
    .section {
        padding: var(--space-xl) 0;
    }

    /* Alternating section background for visual rhythm */
    .section--alt {
        background: var(--color-surface);
    }

    /* Section header — centered label + heading */
    .section__header {
        margin-bottom: var(--space-lg);
    }

    .section__label {
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-lava);
        margin-bottom: var(--space-xs);
    }

    .section__title {
        font-family: var(--font-heading);
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
        font-weight: 700;
        line-height: 1.15;
        color: var(--color-cream);
    }

    .section__desc {
        margin-top: var(--space-sm);
        color: var(--color-muted);
        max-width: 540px;
        line-height: 1.7;
    }

    /* ════════════════════════════════════════
         PRODUCT GRID
         ════════════════════════════════════════ */
    /*
        CSS Grid — the modern way to build layouts.
        grid-template-columns: repeat(3, 1fr) means:
        "make 3 columns, each taking 1 equal fraction of the space."
        gap adds space between grid items.
      */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    /* On tablets (max 768px wide), switch to 2 columns */
    @media (max-width: 768px) {
        .product-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* On phones (max 480px), switch to 1 column */
    @media (max-width: 480px) {
        .product-grid {
            grid-template-columns: 1fr;
        }

        .nav__links {
            display: none;
        }

        /* Hide nav links on mobile (hamburger menu comes later) */
    }

    /* Individual product card */
    .product-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: calc(var(--radius) * 2);
        overflow: hidden;
        /* So the image corners are rounded */
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        cursor: pointer;
    }

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }

    /* Placeholder for product image */
    .product-card__image {
        width: 100%;
        aspect-ratio: 4/3;
        /* Keeps a consistent image shape */
        background: var(--color-border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        /* The placeholder emoji */
        position: relative;
        overflow: hidden;
    }

    .product-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 40%;
        display: block;
    }

    /* Badge — e.g. "New" or "Best Seller" */
    .product-card__badge {
        position: absolute;
        top: var(--space-sm);
        left: var(--space-sm);
        background: var(--color-lava);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.25rem 0.6rem;
        border-radius: 3px;
    }

    .product-card__body {
        padding: var(--space-md);
    }

    /* Origin tag (e.g. "El Salvador · Highland") */
    .product-card__origin {
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-lava);
        margin-bottom: 0.4rem;
    }

    .product-card__name {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--color-cream);
        margin-bottom: 0.4rem;
    }

    .product-card__desc {
        font-size: 0.88rem;
        color: var(--color-muted);
        margin-bottom: var(--space-md);
        line-height: 1.5;
    }

    /* Price + button row at the bottom of the card */
    .product-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .product-card__price {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--color-cream);
    }

    /* Small "Add" button on the card */
    .btn--small {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* ════════════════════════════════════════
         ORIGIN STORY / ABOUT STRIP
         ════════════════════════════════════════ */
    .origin {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: center;
    }

    @media (max-width: 768px) {
        .origin {
            grid-template-columns: 1fr;
        }
    }

    .origin__image {
        aspect-ratio: 1;
        background: var(--color-surface);
        border-radius: calc(var(--radius) * 3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8rem;
        border: 1px solid var(--color-border);
    }

    .origin__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    .origin__stat {
        padding: var(--space-sm);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }

    .origin__stat-number {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-lava);
        display: block;
    }

    .origin__stat-label {
        font-size: 0.8rem;
        color: var(--color-muted);
        letter-spacing: 0.08em;
    }

    /* ════════════════════════════════════════
         SUBSCRIPTION BANNER
         ════════════════════════════════════════ */
    .sub-banner {
        background: var(--color-lava);
        border-radius: calc(var(--radius) * 2);
        padding: var(--space-lg) var(--space-xl);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        flex-wrap: wrap;
    }

    .sub-banner__text h2 {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        font-weight: 900;
        color: #fff;
        margin-bottom: 0.4rem;
    }

    .sub-banner__text p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
    }

    .btn--light {
        background: #fff;
        color: var(--color-lava);
    }

    .btn--light:hover {
        background: var(--color-cream);
        transform: translateY(-2px);
    }

    /* ════════════════════════════════════════
   CART SIDEBAR
   ════════════════════════════════════════ */

    /* Cart icon button in nav */
    .nav__cart-btn {
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-cream);
        display: flex;
        align-items: center;
        padding: 4px;
        transition: color 0.2s ease;
    }

    .nav__cart-btn:hover {
        color: var(--color-lava);
    }

    /* The number badge on the cart icon */
    .nav__cart-count {
        position: absolute;
        top: -6px;
        right: -8px;
        background: var(--color-lava);
        color: #fff;
        font-size: 0.65rem;
        font-weight: 500;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dark overlay behind the cart */
    .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* When cart is open, show the overlay */
    .cart-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    /* The sidebar itself */
    .cart {
        position: fixed;
        top: 0;
        right: 0;
        width: 380px;
        max-width: 100vw;
        height: 100vh;
        background: var(--color-surface);
        border-left: 1px solid var(--color-border);
        z-index: 300;
        display: flex;
        flex-direction: column;
        /*
    translateX(100%) moves the cart completely off screen to the right.
    When .open is added, it slides back to translateX(0) — on screen.
    transition animates that movement smoothly.
  */
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cart.open {
        transform: translateX(0);
    }

    .cart__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    .cart__title {
        font-family: var(--font-heading);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-cream);
    }

    .cart__close {
        background: none;
        border: none;
        color: var(--color-muted);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: var(--radius);
        transition: color 0.2s ease, background 0.2s ease;
    }

    .cart__close:hover {
        color: var(--color-cream);
        background: var(--color-border);
    }

    /* Scrollable items area */
    .cart__items {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-sm);
    }

    /* Empty cart message */
    .cart__empty {
        text-align: center;
        color: var(--color-muted);
        padding: var(--space-xl) var(--space-md);
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .cart__empty-icon {
        font-size: 3rem;
        display: block;
        margin-bottom: var(--space-sm);
    }

    /* Individual cart item row */
    .cart__item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        border-bottom: 1px solid var(--color-border);
    }

    .cart__item-icon {
        font-size: 2rem;
        width: 52px;
        height: 52px;
        background: var(--color-bg);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .cart__item-info {
        flex: 1;
    }

    .cart__item-name {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--color-cream);
        margin-bottom: 2px;
    }

    .cart__item-price {
        font-size: 0.82rem;
        color: var(--color-muted);
    }

    /* Quantity controls — minus, number, plus */
    .cart__item-qty {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .qty-btn {
        width: 26px;
        height: 26px;
        background: var(--color-border);
        border: none;
        border-radius: 4px;
        color: var(--color-cream);
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
    }

    .qty-btn:hover {
        background: var(--color-lava);
    }

    .qty-num {
        font-size: 0.9rem;
        color: var(--color-cream);
        min-width: 20px;
        text-align: center;
    }

    /* Footer with total + checkout */
    .cart__footer {
        padding: var(--space-md);
        border-top: 1px solid var(--color-border);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .cart__total {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-cream);
    }

    .cart__note {
        text-align: center;
        font-size: 0.78rem;
        color: var(--color-muted);
    }

    /* ════════════════════════════════════════
         FOOTER
         ════════════════════════════════════════ */
    .footer {
        border-top: 1px solid var(--color-border);
        padding: var(--space-lg) 0 var(--space-md);
    }

    .footer__inner {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    @media (max-width: 768px) {
        .footer__inner {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 480px) {
        .footer__inner {
            grid-template-columns: 1fr;
        }
    }

    .footer__brand-name {
        font-family: var(--font-heading);
        font-size: 1.3rem;
        font-weight: 900;
        color: var(--color-cream);
        margin-bottom: var(--space-xs);
    }

    .footer__brand-desc {
        font-size: 0.85rem;
        color: var(--color-muted);
        line-height: 1.6;
        max-width: 240px;
    }

    .footer__col-title {
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-cream);
        margin-bottom: var(--space-sm);
    }

    .footer__links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .footer__links a {
        font-size: 0.88rem;
        color: var(--color-muted);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .footer__links a:hover {
        color: var(--color-cream);
    }

    .footer__bottom {
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .footer__copy {
        font-size: 0.8rem;
        color: var(--color-muted);
    }

    .footer__flag {
        font-size: 1.2rem;
    }

    /* ════════════════════════════════════════
         PAGE LOAD ANIMATION
         Fade in everything when the page loads
         ════════════════════════════════════════ */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Apply the animation with staggered delays */
    .hero__label {
        animation: fadeUp 0.6s ease both;
    }

    .hero__heading {
        animation: fadeUp 0.6s ease 0.1s both;
    }

    .hero__subtext {
        animation: fadeUp 0.6s ease 0.2s both;
    }

    .hero__actions {
        animation: fadeUp 0.6s ease 0.3s both;
    }