:root {
    --primary: #3fae5a;
    --primary-dark: #2e8b47;
    --ink: #19311f;
    --muted: #6b7b70;
    --page: #f7fbf6;
    --line: #e6f0e7;
    --heart: #e45b78;
    --header: #1b4332;
    --shadow: 0 10px 30px rgba(27, 67, 50, 0.08);
    font-family: "Segoe UI", "Open Sans", sans-serif;
    color: var(--ink);
    background: var(--page);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--page);
    color: var(--ink);
}

button, a { font: inherit; }

button { cursor: pointer; }

.skip-link {
    position: absolute;
    left: 12px;
    top: -40px;
    background: white;
    padding: 8px 12px;
    z-index: 20;
}

.skip-link:focus { top: 12px; }

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: white;
    border-top: 1px solid var(--line);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}

.tab svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.tab.is-active { color: var(--primary-dark); }

.store-shell { min-height: 100vh; }

.store { padding-bottom: 92px; }

.hero {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: var(--header);
    border-radius: 0 0 28px 28px;
    color: white;
}

.hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(27, 67, 50, 0.28) 0%, rgba(27, 67, 50, 0.05) 42%, rgba(27, 67, 50, 0.62) 100%);
}

.tagline,
.modes,
.cart-button { position: absolute; z-index: 1; }

.tagline {
    top: 16px;
    left: 16px;
    right: 76px;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.modes {
    top: 58px;
    left: 16px;
    display: flex;
    gap: 10px;
}

.mode {
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    background: white;
    color: #17351f;
    font-size: 13px;
    font-weight: 700;
}

.mode.is-selected {
    background: var(--primary);
    color: white;
}

.cart-button {
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid white;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: grid;
    place-items: center;
}

.cart-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ffe14a;
    color: #17351f;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
}

.store-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 20px 12px;
}

.shop-closed {
    margin: 0;
    background: #fff4c9;
    color: #17351f;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 700;
}

.store-search .field { margin-top: 0; }

.add-button:disabled,
.qty button:disabled { background: #c9d8cc; }

.store-search input { width: 100%; }

#search-results[hidden] { display: none; }

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

.section-head h2,
.promo-card h2,
.product-card h3,
.cart-head h2,
.page-intro h1 {
    margin: 0;
}

.section-head h2 { font-size: 24px; }

.section-head a,
.see-all {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.promo-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.promo-track::-webkit-scrollbar { display: none; }

.promo-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 170px;
    border-radius: 24px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.promo-card h2 { font-size: 24px; line-height: 1.15; }

.promo-card p { margin: 10px 0 0; font-size: 14px; }

.shop-now {
    display: inline-block;
    margin-top: 12px;
    background: white;
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 700;
    border-radius: 16px;
    padding: 8px 14px;
}

.promo-emoji {
    width: 88px;
    height: 88px;
    border-radius: 44px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.33);
    font-size: 40px;
}

.promo-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.promo-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background: #c9d8cc;
    padding: 0;
}

.promo-dot.is-active { background: var(--ink); }

.circle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 8px;
}

.circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.25;
}

.circle {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    display: grid;
    place-items: center;
    font-size: 30px;
}

.product-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.product-card {
    flex: 0 0 190px;
    scroll-snap-align: start;
    background: white;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 14px;
}

.product-card.is-hidden { display: none; }

.product-art {
    position: relative;
    height: 120px;
    border-radius: 18px;
    display: grid;
    place-items: center;
}

.product-art.is-short { height: 100px; }

.product-emoji { font-size: 48px; }

.favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--heart);
    font-size: 18px;
}

.heart-on { display: none; }

.favorite.is-on .heart-on { display: inline; }

.favorite.is-on .heart-off { display: none; }

.product-card h3 { margin-top: 12px; font-size: 17px; }

.product-card p,
.price { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.price { color: var(--primary-dark); font-size: 16px; }

.product-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.product-buy strong,
.price { color: var(--primary-dark); }

.price-row { display: flex; align-items: baseline; gap: 8px; }

.price-row s { color: var(--muted); font-size: 13px; }

.add-button,
.qty button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 21px;
    background: var(--primary);
    color: white;
    font-size: 22px;
    font-weight: 700;
}

.empty-note { color: var(--muted); }

.cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 53, 31, 0.35);
    z-index: 40;
}

.cart-panel {
    display: none;
    position: fixed;
    z-index: 50;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(100%, 380px);
    background: white;
    padding: 20px 20px 28px;
    box-shadow: var(--shadow);
    flex-direction: column;
    gap: 16px;
}

.cart-panel.is-open { display: flex; }

.cart-head,
.subtotal,
.cart-lines li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.line-emoji { font-size: 28px; }

.line-copy { flex: 1; display: flex; flex-direction: column; }

.line-copy span { color: var(--muted); font-size: 13px; }

.qty { display: flex; align-items: center; gap: 8px; }

.qty button { width: 32px; height: 32px; font-size: 18px; }

.cart-foot { margin-top: auto; }

.checkout {
    width: 100%;
    margin-top: 12px;
    border: 0;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    padding: 14px 16px;
}

.checkout:disabled { background: #c9d8cc; }

.whatsapp-order {
    display: block;
    width: 100%;
    margin-top: 12px;
    border-radius: 16px;
    background: #128c7e;
    color: white;
    font-weight: 700;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}

.text-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--primary-dark);
    font-weight: 700;
}

.cart-note { color: var(--muted); font-size: 13px; }

.simple-page {
    padding: 28px 20px 110px;
    max-width: 720px;
}

.page-intro h1 { font-size: 30px; }

.page-intro p { color: var(--muted); }

.menu-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.menu-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    font-weight: 700;
}

@media (min-width: 980px) {
    .store-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 20px;
        max-width: 1180px;
        margin: 0 auto;
        padding: 20px;
        align-items: start;
    }

    .hero { border-radius: 28px; height: 300px; }

    .promo-track { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }

    .promo-card { flex-basis: auto; }

    .promo-dots { display: none; }

    .product-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        overflow: visible;
    }

    .product-card { flex-basis: auto; }

    .cart-backdrop { display: none; }

    .cart-panel {
        display: flex;
        position: sticky;
        top: 20px;
        width: auto;
        height: calc(100vh - 120px);
        bottom: auto;
        right: auto;
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: none;
    }

    #close-cart { display: none; }

    .simple-page { margin: 0 auto; }
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title-row h1 { margin: 0; font-size: 30px; }

.back-link {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: white;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.checkout-page { display: flex; flex-direction: column; gap: 16px; }

.panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 18px;
}

.panel h2 { margin: 0; font-size: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 14px; }

.field input,
.field textarea,
.field select {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink);
    background: white;
}

.choice { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.checkout-lines { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.summary-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); }

.total-row { color: var(--ink); font-size: 16px; }

.total-row strong { color: var(--primary-dark); font-size: 18px; }

.form-error { color: #9b2335; margin: 12px 0 0; }

.order-list { display: flex; flex-direction: column; gap: 12px; }

.order-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 18px;
}

.order-card h2 { margin: 0; font-size: 18px; }

.order-status { margin: 8px 0 0; color: var(--primary-dark); font-weight: 700; }

.status-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.status-form select {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 10px;
    font: inherit;
}

.order-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

#checkout-form { display: flex; flex-direction: column; gap: 16px; }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.catalog-grid .product-card h2 { margin-top: 12px; font-size: 17px; }

.more-products {
    display: flex;
    gap: 16px;
    margin: 18px 0 0;
}

.more-products a {
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.cart-link { align-self: flex-start; width: auto; text-align: center; text-decoration: none; }

.menu-item { color: inherit; text-decoration: none; display: block; }

.product-art { overflow: hidden; }

.product-photo { width: 100%; height: 100%; object-fit: cover; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 18px; }

.admin-nav a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }

.admin-nav form { margin: 0; }

.admin-table { width: 100%; border-collapse: collapse; background: white; border-radius: 20px; overflow: hidden; }

.admin-table th, .admin-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.admin-table form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.admin-table input, .admin-table select, .admin-form select {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 10px;
    font: inherit;
}

.admin-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-bottom: 16px; }

.admin-summary { margin-bottom: 16px; }

.admin-summary p { margin: 0; }

.admin-summary p + p { margin-top: 8px; }

.admin-summary strong { color: var(--primary-dark); }

.admin-summary form { margin-top: 12px; }

.admin-summary ul { list-style: none; margin: 8px 0 0; padding: 0; }

.admin-summary li + li { margin-top: 4px; }

.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }

.notice { color: var(--primary-dark); font-weight: 700; }

.order-alert {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    width: min(520px, calc(100% - 100px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #1b4332;
    color: white;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
}

.order-alert[hidden] { display: none; }

.order-alert p { margin: 0; }

.order-alert a,
.order-alert button {
    color: white;
    font-weight: 700;
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.order-bell {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 80;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    color: var(--header);
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    text-decoration: none;
}

.order-bell[hidden] { display: none; }

.order-bell svg { width: 26px; height: 26px; fill: currentColor; }

.order-bell-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c4384a;
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.order-bell-count[hidden] { display: none; }

.phone-alert {
    position: fixed;
    left: 16px;
    right: 80px;
    bottom: 84px;
    z-index: 65;
    border: 0;
    border-radius: 16px;
    background: #1b4332;
    color: white;
    font-weight: 700;
    padding: 12px 14px;
    text-align: left;
}

.phone-alert[hidden] { display: none; }

.notice.error { color: #9b2335; }

#checkout-form[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .hero img {
        animation: hero-drift 18s ease-in-out infinite alternate;
    }

    .promo-emoji {
        animation: promo-float 3.4s ease-in-out infinite;
    }

    .store-body > section {
        animation: section-rise 520ms ease both;
    }

    .mode,
    .shop-now,
    .add-button,
    .cart-button,
    .promo-dot {
        transition: transform 180ms ease, background-color 180ms ease, width 180ms ease;
    }

    .promo-dot.is-active { width: 22px; }

    .add-button.is-pop,
    .cart-count.is-pop,
    .favorite.is-pop {
        animation: button-pop 320ms ease;
    }

    .cart-backdrop { transition: opacity 220ms ease; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-card,
    .circle,
    .promo-card,
    .menu-item {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .product-card:hover,
    .promo-card:hover,
    .menu-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
    }

    .circle-item:hover .circle { transform: translateY(-4px) scale(1.05); }

    .add-button:not(:disabled):hover,
    .shop-now:hover { transform: translateY(-1px); }
}

@media (max-width: 979px) {
    .order-bell {
        top: 12px;
        right: 70px;
    }

    .tagline { right: 132px; }

    .cart-panel {
        display: flex;
        transform: translateX(110%);
        transition: transform 280ms ease;
        pointer-events: none;
    }

    .cart-panel.is-open {
        transform: none;
        pointer-events: auto;
    }
}

@keyframes hero-drift {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@keyframes promo-float {
    50% { transform: translateY(-6px); }
}

@keyframes section-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes button-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}