/* =========================================
   PEAK FRESH — MAIN STYLES
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f8faf7;
    color: #17251d;
    line-height: 1.6;
}

body.modal-open {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
}

/* =========================================
   HEADER
   ========================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(63, 36, 36, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e4ebe5;
}

nav {
    max-width: 1150px;
    margin: auto;
    min-height: 72px;
    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.nav-links {
    display: flex;
    gap: 28px;
    font-size: 0.9rem;
    color: #526158;
}

.nav-links a:hover {
    color: #17251d;
}

/* =========================================
   HERO
   ========================================= */

.hero {
    min-height: 620px;
    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(248, 250, 247, 0.98) 0%,
            rgba(248, 250, 247, 0.90) 48%,
            rgba(248, 250, 247, 0.25) 100%
        ),
        url("../assets/smoothie.jpg") center right / cover no-repeat;
}

.hero-content {
    width: min(1150px, 100%);
    margin: auto;
    padding: 80px 24px;
}

.eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #557461;
    margin-bottom: 14px;
}

.hero h1 {
    max-width: 600px;
    font-size: clamp(3rem, 7vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -3px;
    margin-bottom: 24px;
}

.hero p:not(.eyebrow) {
    max-width: 500px;
    color: #526158;
    font-size: 1.05rem;
    margin-bottom: 32px;
}

/* =========================================
   BUTTON
   ========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #17251d;
    color: white;

    border: none;
    border-radius: 12px;

    padding: 14px 22px;

    font-weight: 700;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    background: #263a2e;
}

.btn:active {
    transform: translateY(0);
}

/* =========================================
   GENERAL SECTIONS
   ========================================= */

.menu-section,
.info-section,
.pickup-section {
    max-width: 1150px;
    margin: auto;
    padding: 100px 24px;
}

.section-heading {
    margin-bottom: 45px;
}

.section-heading h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.section-heading > p:last-child {
    color: #657169;
}

/* =========================================
   PRODUCT
   ========================================= */

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    align-items: stretch;
    gap: 18px;
    min-width: 0;
}

.product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;

    background: white;
    border: 1px solid #e4ebe5;
    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 15px 45px rgba(23, 37, 29, 0.07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-image img { transition: transform .25s ease; }
.size-option:active { transform: scale(.985); }
@media (hover:hover) and (pointer:fine) {
    .product-card:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(23, 37, 29, .12); }
}

.product-image {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    max-height: 240px;
    overflow: hidden;
    background: #e8eddf;
}

.product-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 8px;
}

.product-info {
    min-width: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-wrap: anywhere;
}

.available {
    color: #4f775e;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.product-info h3 {
    min-width: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.15;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.product-info > p {
    color: #657169;
    margin-bottom: 12px;
}

.product-info .product-current-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    color: #657169;
    font-size: .84rem;
}

.product-current-price strong {
    color: #17251d;
    font-size: 1rem;
    text-align: right;
}

/* =========================================
   SMOOTHIE SIZE SELECTOR
   ========================================= */

.sizes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
}

.size-option {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    min-width: 0;
    min-height: 44px;
    gap: 6px;
    padding: 8px 10px;

    border: 1px solid #dfe7e1;
    border-radius: 12px;

    background: #fafcf9;
    color: #17251d;

    cursor: pointer;
    text-align: left;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.size-option:hover {
    border-color: #17251d;
    transform: translateY(-1px);
}

.size-option:focus-visible {
    outline: 3px solid rgba(85, 116, 97, 0.25);
    outline-offset: 2px;
}

.size-option.selected {
    border-color: #17251d;
    background: #eef4ef;
    box-shadow: inset 0 0 0 1px #17251d;
}

.size-option strong {
    min-width: 0;
    font-size: .9rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.size-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.size-option:disabled {
    cursor: not-allowed;
    color: #758077;
    background: #f0f2ef;
    opacity: .8;
    transform: none;
}

.product-info .order-btn {
    width: 100%;
    min-height: 46px;
}

/* =========================================
   STEPS
   ========================================= */

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

.step {
    background: white;
    border: 1px solid #e4ebe5;
    border-radius: 18px;
    padding: 28px;
}

.step span {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #718078;
    margin-bottom: 22px;
}

.step h3 {
    margin-bottom: 8px;
}

.step p {
    color: #657169;
    font-size: 0.92rem;
}

/* =========================================
   PICKUP
   ========================================= */

.pickup-section {
    padding-top: 20px;
}

.pickup-card {
    background: #17251d;
    color: white;
    border-radius: 22px;
    padding: 40px;
}

.pickup-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.pickup-card p {
    color: #c8d3cb;
    margin-bottom: 20px;
}

.map-link {
    display: inline-block;
    color: white;
    border-bottom: 1px solid #aebbb2;
    padding-bottom: 3px;
}

/* =========================================
   FOOTER
   ========================================= */

footer {
    border-top: 1px solid #e4ebe5;
    padding: 30px 24px;
    text-align: center;
    color: #718078;
    font-size: 0.85rem;
}

/* =========================================
   ORDER MODAL
   ========================================= */

.order-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(15, 25, 19, 0.65);
    backdrop-filter: blur(8px);

    animation: modalFadeIn 0.18s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.order-box {
    position: relative;

    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    background: #ffffff;
    border-radius: 22px;

    padding: 35px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);

    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(12px);
    }

    to {
        transform: translateY(0);
    }
}

.order-box h2 {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 8px;
}

.order-subtitle {
    color: #657169;
    margin-bottom: 28px;
}

/* =========================================
   CLOSE BUTTON
   ========================================= */

.close-order {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f0f4f1;
    color: #17251d;

    font-size: 1.6rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.close-order:hover {
    background: #e4ebe5;
    transform: rotate(4deg);
}

/* =========================================
   ORDER FORM
   ========================================= */

#orderForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#orderForm label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 8px;
}

#orderForm select {
    width: 100%;

    padding: 14px;

    border: 1px solid #dce5de;
    border-radius: 10px;

    background: #fafcf9;
    color: #17251d;

    font-size: 0.95rem;

    cursor: pointer;
}

#orderForm select:focus {
    outline: 2px solid #557461;
    outline-offset: 2px;
}

/* =========================================
   ORDER TOTAL
   ========================================= */

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 18px 0;
    padding: 18px;

    border-radius: 12px;

    background: #f1f6f2;
}

.order-total strong {
    font-size: 1.2rem;
}

/* =========================================
   CONFIRM BUTTON
   ========================================= */

.confirm-order {
    width: 100%;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    nav {
        min-height: 64px;
    }

    .nav-links {
        display: none;
    }

    .hero {
        min-height: 620px;

        background:
            linear-gradient(
                180deg,
                rgba(248, 250, 247, 0.88),
                rgba(248, 250, 247, 0.97)
            ),
            url("../assets/smoothie.jpg") center / cover no-repeat;
    }

    .hero-content {
        padding: 70px 24px;
    }

    .hero h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
        letter-spacing: -2px;
    }

    .menu-section,
    .info-section,
    .pickup-section {
        padding: 70px 20px;
    }

    .steps {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 430px) {

    .hero {
        min-height: 580px;
    }

    .hero-content {
        padding: 60px 20px;
    }

    .pickup-card {
        padding: 28px 22px;
    }

    .order-modal {
        padding: 12px;
    }

    .order-box {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .order-box h2 {
        font-size: 1.7rem;
    }

    .success-row {
        flex-direction: column;
        gap: 2px;
    }

    .success-row strong {
        text-align: left;
        overflow-wrap: anywhere;
    }
}
.account-btn {
    margin-left: 12px;
    cursor: pointer;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}

.auth-modal.active {
    display: flex;
}

.auth-box {
    width: min(100%, 420px);
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.auth-brand {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #527461;
    margin-bottom: 18px;
}

.auth-box h2 {
    margin: 0 0 8px;
}

.auth-box p {
    margin-top: 0;
}

.auth-box label {
    display: block;
    margin: 18px 0 7px;
    font-weight: 600;
}

.auth-box input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #d5dfd9;
    border-radius: 12px;
    font: inherit;
}

.auth-submit {
    width: 100%;
    margin-top: 22px;
    cursor: pointer;
}

.auth-close {
    float: right;
    border: 0;
    background: #f0f4f1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
}

.auth-message {
    min-height: 20px;
    margin-top: 14px !important;
    font-size: 14px;
}

.auth-message.error {
    color: #b42318;
}

.auth-message.success {
    color: #26734d;
}
/* =========================================
   ORDER SUCCESS
   ========================================= */

.order-success {
    text-align: center;
}

.success-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    background: #e8f7ed;
    color: #198754;
}

.order-success h2 {
    margin-bottom: 10px;
}

.order-success-card {
    margin: 24px 0 16px;
    padding: 16px;
    border-radius: 14px;
    background: #f7f8f6;
    text-align: left;
}

.success-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7e5;
}

.success-row:last-child {
    border-bottom: none;
}

.success-row span {
    color: #6b716c;
}

.success-row strong {
    text-align: right;
}

.order-status-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #fff8e8;
    text-align: left;
}

.status-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #d99b19;
    flex-shrink: 0;
}

.order-status-box strong {
    display: block;
    margin-bottom: 4px;
}

.order-status-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

.success-note {
    margin: 18px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

.close-success {
    width: 100%;
}
.auth-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
}

.auth-link {
    border: 0;
    padding: 4px 0;
    background: transparent;
    color: #42634e;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.auth-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px !important;
    font-size: 0.85rem;
}

.auth-toggle input {
    width: auto;
}

/* Peak Fresh refreshed storefront */
:root {
    color-scheme: light;
    --ink: #193327;
    --muted: #64756a;
    --green: #286143;
    --green-dark: #173c2a;
    --lime: #d9ebaa;
    --cream: #faf8f0;
    --line: #e1e8dd;
    --paper: #fff;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    color: var(--ink);
    background: var(--cream);
    font-family: "Aptos", "Segoe UI", Arial, sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
}
body::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #91b94f; outline-offset: 3px; }

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(250, 248, 240, .94);
    border-bottom: 1px solid rgba(25, 51, 39, .1);
    backdrop-filter: blur(16px);
}
nav {
    width: min(1180px, 100%);
    min-height: 76px;
    margin: auto;
    padding: 12px 28px;
    gap: 22px;
}
.logo {
    color: var(--green-dark);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: .14em;
    white-space: nowrap;
}
.logo::before { content: "✳"; color: #79a544; margin-right: 9px; }
.nav-links { gap: clamp(16px, 3vw, 36px); color: #42574a; font-size: .92rem; font-weight: 600; }
.nav-links a { transition: color .18s ease; }
.nav-links a:hover, .map-link:hover { color: #80a64b; }
.account-btn { margin: 0; border-radius: 999px; padding: 10px 18px; flex: 0 0 auto; }

.hero {
    position: relative;
    isolation: isolate;
    min-height: min(690px, calc(100svh - 76px));
    background-color: #e6ebd9;
    background-image: linear-gradient(90deg, rgba(250,248,240,.98) 0%, rgba(250,248,240,.9) 39%, rgba(250,248,240,.14) 100%), url("../assets/smoothie.jpg");
    background-position: center, center right;
    background-size: cover;
}
.hero-content { width: min(1180px, 100%); padding: clamp(76px, 12vw, 150px) 28px; }
.eyebrow { color: var(--green); font-size: .72rem; letter-spacing: .2em; }
.hero .eyebrow { display: inline-flex; padding: 8px 13px; border: 1px solid #dce7ca; border-radius: 99px; background: rgba(255,255,255,.72); }
.hero h1 { max-width: 640px; color: var(--green-dark); font-size: clamp(3.3rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.065em; }
.hero p:not(.eyebrow) { max-width: 470px; color: #4e6254; font-size: clamp(1rem, 1.5vw, 1.18rem); }
.btn { min-height: 48px; border-radius: 999px; padding: 13px 23px; background: var(--green); box-shadow: 0 8px 22px rgba(32, 83, 54, .17); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:hover { background: var(--green-dark); box-shadow: 0 12px 25px rgba(32,83,54,.22); transform: translateY(-2px); }

.menu-section, .info-section, .pickup-section { width: min(1180px, 100%); padding: clamp(68px, 9vw, 112px) 28px; }
.section-heading { max-width: 680px; margin-bottom: 34px; }
.section-heading h2 { color: var(--green-dark); font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -.055em; }
.section-heading > p:last-child, .product-info > p, .step p { color: var(--muted); }
.available { width: fit-content; padding: 5px 10px; border-radius: 99px; background: #edf5e4; color: var(--green); }
.size-option:hover { border-color: #8aaa68; background: #f4f8eb; }
.size-option.selected { border-color: var(--green); background: #edf5e4; box-shadow: inset 0 0 0 1px var(--green); }

.info-section { padding-top: 28px; }
.steps { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { min-height: 205px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.75); padding: 25px; }
.step span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #edf5e4; color: var(--green); }
.step h3 { color: var(--green-dark); }
.pickup-section { padding-top: 22px; }
.pickup-card { border-radius: 24px; background: var(--green-dark); padding: clamp(28px, 5vw, 48px); }
.pickup-card h3 { font-size: 1.65rem; }
.pickup-card p { color: #d0ddcf; }
.map-link { display: inline-flex; padding: 10px 0 3px; color: #e2efc8; border-color: #9fb497; font-weight: 650; transition: color .18s ease; }
footer { border-color: var(--line); padding: 28px 20px; color: var(--muted); }

.order-modal, .auth-modal { padding: 16px; background: rgba(12, 27, 18, .66); backdrop-filter: blur(7px); }
.order-box, .auth-box { width: min(480px, 100%); max-height: min(90svh, 850px); overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; background: var(--cream); padding: clamp(23px, 5vw, 38px); color: var(--ink); }
.order-box h2, .auth-box h2 { color: var(--green-dark); letter-spacing: -.035em; }
.order-subtitle, .auth-box > p { color: var(--muted); }
.close-order, .auth-close { display: grid; place-items: center; width: 40px; height: 40px; background: #edf1e8; color: var(--ink); }
#orderForm { gap: 9px; }
#orderForm label, .auth-box label { color: #354d3d; }
#orderForm select, .auth-box input { min-height: 48px; border: 1px solid #d7e0d4; border-radius: 12px; background: white; color: var(--ink); font: inherit; }
#orderForm select:focus, .auth-box input:focus { outline: 3px solid #c8dfa7; outline-offset: 1px; }
.order-total { border: 1px solid #e1ead8; border-radius: 14px; background: #f0f5e9; }
.confirm-order, .auth-submit { min-height: 50px; }
.order-message { min-height: 1.5em; margin: 3px 0; color: var(--muted); font-size: .92rem; }
.order-message.error, .auth-message.error { color: #a32925; }
.order-message.success, .auth-message.success { color: var(--green); }
.auth-modal { z-index: 3000; }
.auth-box { position: relative; }
.auth-box .auth-close { float: right; border: 0; border-radius: 50%; cursor: pointer; }
.auth-brand { color: var(--green); }
.auth-toggle input { min-height: auto; accent-color: var(--green); }
.auth-link { color: var(--green); }
.order-success { text-align: center; }
.success-icon { background: #e8f3dc; color: var(--green); }
.order-success-card { border: 1px solid var(--line); background: white; }
.success-row { gap: 14px; }
.success-row span { color: var(--muted); }
.success-row strong { color: var(--ink); }
.order-status-box { border: 1px solid #f0e2b9; background: #fff8e8; border-radius: 14px; }
.success-note { color: var(--muted); }
.close-success { margin-top: 12px; }
button:disabled { cursor: wait; opacity: .62; transform: none; }

@media (max-width: 800px) {
    nav { min-height: 68px; padding-inline: 20px; }
    .nav-links { display: flex; gap: 14px; font-size: .82rem; }
    .account-btn { padding-inline: 14px; font-size: .86rem; }
    .hero { min-height: 600px; background-image: linear-gradient(180deg, rgba(250,248,240,.72), rgba(250,248,240,.96) 63%), url("../assets/smoothie.jpg"); background-position: center, 60% center; }
    .hero-content { padding: 95px 24px 78px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    nav { flex-wrap: wrap; min-height: 70px; gap: 5px 10px; padding: 10px 16px; }
    .logo { font-size: .91rem; }
    .nav-links { order: 3; width: 100%; justify-content: space-between; padding: 2px 0; font-size: .78rem; }
    .account-btn { margin-left: auto; min-height: 40px; padding: 8px 12px; font-size: .8rem; }
    .hero { min-height: 560px; }
    .hero-content { padding: 74px 21px; }
    .hero h1 { max-width: 440px; font-size: clamp(3.1rem, 16vw, 4.7rem); }
    .menu-section, .info-section, .pickup-section { padding: 68px 20px; }
    .steps { grid-template-columns: 1fr; }
    .step { min-height: 0; }
    .pickup-card { padding: 27px 22px; }
    .order-modal, .auth-modal { padding: 10px; }
    .order-box, .auth-box { max-height: 94svh; padding: 26px 20px; }
    .success-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .success-row strong { text-align: left; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Customer account and manual payment additions */
.account-control { display:flex; align-items:center; gap:10px; margin-left:auto; }
.account-create { white-space:nowrap; }
.account-details { margin:22px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.account-details > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; padding:8px 0; }
.account-details dt { color:var(--muted); font-weight:600; }
.account-details dd { margin:0; overflow-wrap:anywhere; }
.mpesa-payment { margin:18px 0; padding:18px; border:1px solid #dce7ca; border-radius:16px; background:#f5f8ef; text-align:left; }
.mpesa-payment h3 { margin:0 0 8px; color:var(--green-dark); }
.mpesa-payment ol { padding-left:22px; }
.mpesa-payment .btn { margin:6px 0; }
.payment-report-message { min-height:1.4em; margin:8px 0 0; color:var(--green-dark); }
.admin-page { width:min(1200px,100%); margin:auto; padding:32px 20px; }
.admin-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:20px 0; }
.admin-toolbar label { display:grid; gap:4px; }
.admin-toolbar input,.admin-toolbar select { min-height:44px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; }
.admin-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }
.admin-table { width:100%; min-width:950px; border-collapse:collapse; }
.admin-table th,.admin-table td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.admin-table th { background:#f2f6ed; }
.admin-actions { display:flex; flex-wrap:wrap; gap:6px; }
.admin-actions button { min-height:38px; border:1px solid var(--line); border-radius:9px; padding:6px 10px; background:#fff; color:var(--ink); cursor:pointer; }
.admin-message { min-height:1.5em; }
@media (max-width:520px) {
 .account-control { gap:6px; }
 .account-create { font-size:.75rem; }
 .account-details > div { grid-template-columns:1fr; gap:2px; }
 .mpesa-payment { padding:14px; }
 .admin-page { padding:22px 12px; }
}
@media (prefers-reduced-motion: reduce) { .admin-table-wrap { scroll-behavior:auto; } }

/* Google sign-in controls */
.auth-oauth { display:grid; gap:9px; margin-top:14px; text-align:center; color:var(--muted); }
.google-auth-button { width:100%; border:1px solid var(--line); background:white; color:var(--green-dark); box-shadow:none; }
.google-auth-button:hover { background:#f4f8eb; }
/* Policy pages, footer navigation, signup acceptance, and cookie preferences */
:root { --ink:#173629; --muted:#64756a; --green:#176b4d; --green-dark:#124c37; --lime:#f4b942; --cream:#f7f8f5; --line:#dfe7df; --paper:#fff; }
body { background:var(--cream); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:14px auto; }
.footer-links a,.footer-contact a,.policy-actions a,.policy-main a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.footer-contact { margin-top:10px; }
.policy-main { width:min(900px,100%); margin:auto; padding:clamp(38px,7vw,76px) 24px; }
.policy-main h1 { color:var(--green-dark); font-size:clamp(2.25rem,6vw,3.8rem); letter-spacing:-.045em; line-height:1.08; margin:0 0 12px; }
.policy-main h2 { color:var(--green-dark); font-size:clamp(1.25rem,3vw,1.6rem); margin:32px 0 8px; }
.policy-main p,.policy-main li { color:#46584c; }
.policy-main ul { padding-left:24px; }
.policy-lead { max-width:700px; margin:0 0 30px; font-size:1.1rem; }
.policy-callout { margin:22px 0; padding:16px 18px; border-left:4px solid var(--lime); border-radius:0 12px 12px 0; background:#fff9e9; }
.policy-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.terms-accept { display:flex !important; align-items:flex-start; gap:10px; margin:18px 0 4px !important; font-size:.9rem; line-height:1.45; }
.terms-accept input { flex:0 0 auto; width:20px; min-height:20px !important; margin-top:2px; accent-color:var(--green); }
.terms-accept a { color:var(--green); text-decoration:underline; }
.cookie-banner { position:fixed; z-index:10000; inset:auto 16px 16px; width:min(760px,calc(100% - 32px)); margin:auto; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 60px rgba(15,40,27,.2); }
.cookie-banner h2,.cookie-settings h2 { color:var(--green-dark); font-size:1.2rem; margin-bottom:6px; }
.cookie-banner p,.cookie-settings p { color:var(--muted); font-size:.93rem; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.cookie-actions button,.cookie-settings button { min-height:44px; border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:#fff; color:var(--green-dark); font:inherit; font-weight:700; cursor:pointer; }
.cookie-actions button:first-child,.cookie-settings button:first-child { border-color:var(--green); background:var(--green); color:#fff; }
.cookie-banner button:focus-visible,.cookie-settings button:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.cookie-settings-backdrop { position:fixed; z-index:10001; inset:0; display:grid; place-items:center; padding:16px; background:rgba(12,27,18,.58); }
.cookie-settings { width:min(520px,100%); padding:24px; border-radius:18px; background:var(--cream); box-shadow:0 18px 60px rgba(0,0,0,.2); }
.cookie-settings label { display:flex; gap:10px; align-items:center; margin:18px 0; }
.cookie-settings input { width:20px; height:20px; accent-color:var(--green); }
@media(max-width:520px) { .footer-links { gap:8px 16px; } .cookie-banner { inset:auto 8px 8px; width:calc(100% - 16px); padding:16px; } .cookie-actions { display:grid; grid-template-columns:1fr; } .cookie-actions button { width:100%; } }
.auth-policy-links { margin:12px 0 0; font-size:.88rem; }
.auth-policy-links a { color:var(--green); text-decoration:underline; text-underline-offset:2px; }

/* Data-driven catalog, store state, community and account profile tools */
.catalog-message { grid-column:1/-1; padding:20px; color:var(--muted); }
.catalog-error-state { grid-column:1/-1; display:grid; justify-items:center; gap:10px; padding:22px; border:1px solid #e1e8dc; border-radius:16px; background:#fff; text-align:center; }
.catalog-error-state .catalog-message { margin:0; padding:0; }
.catalog-retry { min-height:42px; }
.product-image.is-unavailable { display:grid; place-items:center; padding:18px; }
.product-image.is-unavailable::after { content:"Fresh smoothies, made to order"; color:#536b53; font-size:.92rem; text-align:center; }
.store-notice { width:min(1124px,calc(100% - 40px)); margin:24px auto 0; padding:16px 20px; border:1px solid #e5d8a9; border-radius:16px; background:#fff8e8; color:#5e4a1f; }
.store-notice p { margin:0; }
.store-notice p + p { margin-top:5px; }
.store-notice[hidden] { display:none; }
.community-section { width:min(940px,100%); margin:0 auto; padding:clamp(60px,8vw,100px) 28px; }
.feedback-form,.feedback-reply-form { display:grid; gap:10px; }
.feedback-form { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.feedback-form label,.feedback-reply-form label { font-weight:700; color:var(--green-dark); }
.feedback-form textarea,.feedback-reply-form textarea { width:100%; min-height:88px; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; resize:vertical; }
.feedback-form .btn { justify-self:start; }
.community-auth-prompt,.community-message { color:var(--muted); }
.community-message.error { color:#a32925; }
.community-message.success { color:var(--green); }
.feedback-list { display:grid; gap:16px; margin-top:18px; }
.feedback-card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(31,58,41,.05); }
.feedback-author { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.feedback-author strong { color:var(--green-dark); }
.feedback-author time { margin-left:auto; color:var(--muted); font-size:.82rem; }
.feedback-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; background:#edf5e4; }
.feedback-content { margin:14px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-actions { display:flex; gap:10px; }
.feedback-action,.feedback-reply-form button { min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green-dark); font:inherit; cursor:pointer; }
.feedback-action[aria-pressed="true"] { background:#edf5e4; border-color:#a9c28e; }
.feedback-replies { display:grid; gap:10px; margin:14px 0 0 20px; padding-left:14px; border-left:2px solid #e6eddf; }
.feedback-reply { padding:8px 0; }
.feedback-reply p { margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-reply-form { margin-top:10px; }
.account-details { margin-top:16px; }
.profile-editor { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; gap:18px; margin:18px 0; }
.profile-avatar-preview,.profile-avatar-placeholder { width:112px; height:112px; border-radius:50%; object-fit:cover; background:#edf5e4; }
.profile-avatar-placeholder { display:grid; place-items:center; padding:10px; color:var(--muted); font-size:.8rem; text-align:center; }
.profile-editor form { display:grid; gap:8px; min-width:0; }
.profile-editor input[type="file"] { padding:8px; }
.profile-help { margin:0; color:var(--muted); font-size:.83rem; }
.profile-editor .profile-save { justify-self:start; }
.delete-account-button { display:block; margin:12px auto 0; color:#a32925; }
#feedbackForm[hidden],.profile-avatar-preview[hidden],.profile-avatar-placeholder[hidden] { display:none !important; }
@media(max-width:520px) {
  .community-section { padding-inline:20px; }
  .feedback-card { padding:16px; }
  .feedback-replies { margin-left:8px; }
  .feedback-author time { width:100%; margin:0 0 0 52px; }
  .profile-editor { grid-template-columns:1fr; }
}

/* Customer order history cards */
.account-orders { margin:22px 0; padding:18px; border:1px solid #e2e9dc; border-radius:18px; background:#f8faf5; }
.account-orders h3 { margin:0 0 6px; color:#214831; }
.account-orders-status { margin:0 0 12px; color:#647268; font-size:.9rem; }
.account-order-list { display:grid; gap:10px; }
.account-order-card { min-width:0; padding:14px; border:1px solid #e4eae0; border-radius:14px; background:white; }
.account-order-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-order-status { display:inline-flex; padding:5px 9px; border-radius:999px; background:#edf4e7; color:#345b3b; font-size:.74rem; font-weight:800; }
.account-order-status.status-cancelled { background:#faecea; color:#963f37; }
.account-order-card p { margin:8px 0; color:#67746a; font-size:.88rem; }
.account-order-card ul { margin:0 0 9px; padding-left:19px; color:#34483a; font-size:.9rem; }
.account-order-total { color:#214831; }
@media(max-width:700px) { .account-orders { padding:14px; } }

/* Compact, data-driven product cards. Keep each card's actions in normal flow. */
.product-list { gap:clamp(12px,1.6vw,20px); }
.product-card { grid-template-columns:minmax(0,1fr); align-items:start; border-radius:20px; }
.product-image { aspect-ratio:16 / 10; max-height:230px; }
.product-image img { object-fit:contain; }
.product-info { padding:16px; }
.product-info h3 { font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.2; }
.product-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.product-current-price { min-width:0; }
.sizes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.size-option { min-width:0; min-height:46px; overflow-wrap:anywhere; }
.size-option.is-unavailable { border-style:dashed; }
.product-info .order-btn { min-height:48px; }
.catalog-error-state { min-width:0; }

@media(max-width:800px) {
  nav { flex-wrap:wrap; }
  .nav-links { flex-wrap:wrap; justify-content:center; }
  .product-info { padding:14px; }
  .sizes { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:520px) {
  .menu-section { padding-inline:16px; }
  .section-heading { margin-bottom:24px; }
  .product-list { gap:12px; }
  .product-card { border-radius:16px; }
  .product-image { aspect-ratio:4 / 3; max-height:180px; }
  .product-info { padding:12px; }
  .product-info h3 { font-size:clamp(1rem,4.5vw,1.2rem); margin-bottom:6px; }
  .product-description { -webkit-line-clamp:2; margin-bottom:8px; font-size:.82rem; }
  .product-info .product-current-price { margin-bottom:8px; font-size:.78rem; }
  .product-current-price strong { font-size:.9rem; }
  .sizes { gap:6px; margin-bottom:9px; }
  .size-option { min-height:44px; gap:5px; padding:8px; font-size:.82rem; }
  .size-option strong { font-size:.82rem; }
  .product-info .order-btn { min-height:46px; padding:9px 10px; font-size:.88rem; }
}
@media(min-width:380px) and (max-width:520px) {
  .product-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:379px) {
  .product-list { grid-template-columns:minmax(0,1fr); }
}
.feedback-actions { flex-wrap:wrap; }
.feedback-action { min-width:96px; }
@media(max-width:360px) { .feedback-action { min-width:0; padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) {
  .product-card,.product-image img,.feedback-card { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Storefront layout refinement: consistent sizing from compact phones to wide screens. */
html { scroll-padding-top: 108px; }
body { overflow-x: clip; }
main, section, nav, footer, .product-list, .product-card, .product-info, .community-section, .feedback-form, .feedback-card { min-width: 0; }
header nav { display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,2vw,26px); }
.nav-links { min-width:0; align-items:center; justify-content:center; flex-wrap:wrap; }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; }
.account-control { min-width:0; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.account-control > * { min-height:44px; }
.hero { min-height:clamp(480px, min(68svh, 690px), 690px); }
.hero-content { padding-inline:clamp(20px,5vw,64px); }
.hero h1 { font-size:clamp(2.8rem,7vw,6.2rem); overflow-wrap:anywhere; }
.menu-section, .info-section, .pickup-section { padding-inline:clamp(16px,4vw,40px); }
.section-heading { margin-bottom:clamp(22px,4vw,36px); }
.steps { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.step { min-width:0; }
.pickup-card { overflow-wrap:anywhere; }
.order-modal, .auth-modal { overflow-y:auto; overscroll-behavior:contain; }
.order-box, .auth-box { width:min(480px,100%); max-height:min(90dvh,850px); }
footer { padding-inline:clamp(16px,4vw,32px); overflow-wrap:anywhere; }
.footer-links { row-gap:8px; }
.cookie-banner { padding-bottom:max(20px,env(safe-area-inset-bottom)); }

@media (max-width: 1020px) {
  header nav { flex-wrap:wrap; justify-content:space-between; padding-block:10px; }
  .nav-links { order:3; flex:1 0 100%; justify-content:center; gap:4px clamp(12px,3vw,26px); }
  .account-control { margin-left:auto; }
  .hero { min-height:clamp(470px,72svh,610px); }
  .hero-content { padding-block:clamp(72px,11vw,110px); }
}
@media (max-width: 620px) {
  html { scroll-padding-top:132px; }
  header nav { min-height:0; gap:4px 10px; padding:8px 16px 6px; }
  .logo { font-size:.9rem; letter-spacing:.1em; }
  .logo::before { margin-right:5px; }
  .account-control { gap:6px; }
  .account-control > * { min-height:40px; }
  .account-btn, .account-create { padding:8px 11px; font-size:.78rem; }
  .nav-links { justify-content:flex-start; gap:2px 8px; overflow-x:auto; flex-wrap:nowrap; padding:0 0 3px; scrollbar-width:thin; }
  .nav-links a { flex:0 0 auto; min-height:42px; padding-inline:5px; font-size:.8rem; }
  .hero { min-height:clamp(430px,72svh,560px); background-image:linear-gradient(180deg,rgba(250,248,240,.82),rgba(250,248,240,.97) 70%),url("../assets/smoothie.jpg"); background-position:center,60% center; }
  .hero-content { padding:clamp(54px,12vw,76px) 20px; }
  .hero h1 { max-width:12ch; font-size:clamp(2.75rem,13vw,4.2rem); line-height:1; letter-spacing:-.055em; }
  .hero p:not(.eyebrow) { max-width:38ch; font-size:1rem; }
  .hero .btn { width:100%; max-width:360px; }
  .menu-section, .info-section, .pickup-section { padding-block:clamp(52px,12vw,72px); }
  .section-heading h2 { font-size:clamp(1.9rem,9vw,2.8rem); }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .step { padding:18px; border-radius:16px; }
  .step span { margin-bottom:14px; }
  .pickup-card { padding:clamp(20px,6vw,28px); border-radius:18px; }
  .community-section { padding-block:52px; padding-inline:16px; }
  .feedback-form { padding:15px; }
  .feedback-form .btn { justify-self:stretch; }
  .profile-editor { grid-template-columns:1fr; }
  .cookie-banner { max-height:calc(100dvh - 16px - env(safe-area-inset-top)); overflow-y:auto; }
}
@media (max-width: 380px) {
  .account-control { gap:4px; }
  .account-btn, .account-create { padding-inline:8px; font-size:.74rem; }
  .logo { font-size:.82rem; }
  .steps { grid-template-columns:1fr; }
  .product-list { grid-template-columns:minmax(0,1fr); }
  .order-box, .auth-box { padding:24px 16px; border-radius:18px; }
}
@media (min-width: 621px) and (max-width: 800px) {
  .product-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}
/* Product card polish: predictable card widths, image crops, and aligned actions. */
.product-list {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  align-items:stretch;
  gap:clamp(14px,2vw,22px);
}
.product-card {
  height:100%;
  grid-template-rows:clamp(170px,21vw,220px) minmax(0,1fr);
  align-content:stretch;
  border:1px solid #e2e9df;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 26px rgba(22,52,35,.07);
}
.product-image {
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  background:linear-gradient(145deg,#f1f5eb,#e7eee0);
}
.product-image img { padding:0; object-fit:cover; object-position:center; }
.product-image.is-unavailable { padding:18px; }
.product-info {
  height:100%;
  padding:clamp(16px,2vw,22px);
  gap:0;
}
.product-info .available { width:fit-content; margin:0 0 11px; padding:5px 10px; border-radius:999px; background:#edf5e4; color:#286143; font-size:.68rem; letter-spacing:.09em; }
.product-info h3 { min-height:2.35em; margin:0 0 8px; font-size:clamp(1.12rem,1.7vw,1.38rem); line-height:1.18; }
.product-description { display:-webkit-box; min-height:3.9em; margin:0 0 14px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:#64756a; font-size:.9rem; line-height:1.45; }
.product-info .product-current-price { min-height:24px; margin:0 0 12px; padding-top:10px; border-top:1px solid #edf0eb; }
.product-current-price strong { color:#173c2a; font-size:1.02rem; }
.sizes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.size-option { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:6px; min-height:46px; padding:8px 10px; border-radius:11px; font-size:.84rem; }
.size-option span { white-space:nowrap; }
.size-option strong { white-space:nowrap; font-size:.84rem; }
.product-info .order-btn { margin-top:auto; min-height:48px; border-radius:12px; }
@media(max-width:700px) {
  .product-list { grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; }
  .product-card { grid-template-rows:clamp(190px,54vw,270px) minmax(0,1fr); }
  .product-info { padding:18px; }
}
@media(max-width:380px) {
  .product-card { grid-template-rows:180px minmax(0,1fr); border-radius:17px; }
  .product-info { padding:15px; }
  .product-description { min-height:0; }
  .size-option { padding-inline:8px; font-size:.8rem; }
  .size-option strong { font-size:.8rem; }
}
/* Usability correction: keep the full product visible and let card content size naturally. */
.product-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.product-card { height:auto; grid-template-rows:200px auto; align-content:start; }
.product-image img { padding:10px; object-fit:contain; }
.product-info { height:auto; }
.product-info h3 { min-height:0; }
.product-description { display:block; min-height:0; overflow:visible; -webkit-line-clamp:unset; }
.product-info .product-current-price { min-height:0; }
.size-option { flex-wrap:wrap; }
.size-option span, .size-option strong { white-space:normal; overflow-wrap:anywhere; }
.product-info .order-btn { margin-top:4px; }
@media(max-width:700px) {
  .product-list { grid-template-columns:minmax(0,1fr); }
  .product-card { grid-template-rows:clamp(180px,50vw,240px) auto; }
}
@media(max-width:380px) {
  .product-card { grid-template-rows:175px auto; }
  .product-info { padding:14px; }
  .sizes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .size-option { min-height:48px; padding:8px; }
}
/* Peak Fresh vector brand assets */
.logo { display:inline-flex; align-items:center; flex:0 0 auto; width:clamp(142px,16vw,190px); min-width:0; line-height:0; letter-spacing:normal; }
.logo::before { content:none !important; }
.logo picture, .logo img { display:block; width:100%; height:auto; }
.logo img { aspect-ratio:340 / 76; object-fit:contain; }
.auth-brand { display:flex; justify-content:center; margin:0 auto 14px; }
.auth-brand img { display:block; width:min(190px,70%); height:auto; aspect-ratio:340 / 76; object-fit:contain; }
.admin-public-header .logo { width:170px; }
.sidebar-brand .brand-mark { display:block; flex:0 0 34px; width:34px; height:34px; border-radius:9px; object-fit:cover; background:transparent; }
@media(max-width:620px) {
  .logo { width:clamp(132px,40vw,164px); }
}
@media(max-width:380px) {
  .logo { width:132px; }
}
/* About story, product availability states, and shared Peak Fresh typography. */
:root { --font-body:"Aptos","Segoe UI",Arial,sans-serif; --font-heading:"Aptos Display","Segoe UI",Arial,sans-serif; }
body { font-family:var(--font-body); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); }
.about-page { width:min(1180px,100%); margin:0 auto; padding:clamp(30px,6vw,76px) clamp(18px,4vw,36px); }
.about-intro { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(260px,.82fr); align-items:center; gap:clamp(28px,6vw,76px); }
.about-copy { max-width:680px; }
.about-copy h1 { margin:0 0 8px; color:var(--green-dark); font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.055em; }
.about-tagline { margin:0 0 24px; color:var(--green); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:750; }
.about-copy > p:not(.eyebrow) { margin:0 0 15px; color:#46584c; font-size:clamp(.98rem,1.3vw,1.08rem); line-height:1.75; }
.about-copy .about-closing { margin-top:24px!important; color:var(--green-dark)!important; font-size:1.12rem!important; font-weight:750; }
.about-menu-link { margin-top:5px; background:var(--green-dark); }
.about-photo { margin:0; overflow:hidden; border:1px solid #e0e8dc; border-radius:24px; background:#eef3e8; box-shadow:0 18px 44px rgba(23,56,38,.09); }
.about-photo img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-photo figcaption { padding:12px 16px; color:var(--muted); font-size:.84rem; }
.about-contact { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(42px,7vw,84px); padding:clamp(20px,4vw,32px); border:1px solid var(--line); border-radius:20px; background:#fff; }
.about-contact h2 { margin:0; color:var(--green-dark); font-size:clamp(1.35rem,2.5vw,1.8rem); }
.about-contact > p { margin:0; color:#46584c; }
.about-contact a { color:var(--green); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.product-status-badge { display:inline-flex; width:max-content; max-width:100%; align-items:center; border:1px solid transparent; border-radius:999px; padding:5px 10px; font-size:.7rem; font-weight:800; letter-spacing:.035em; line-height:1.25; }
.product-status-available { background:#eaf3df; color:#245a37; }
.product-status-unavailable { background:#f7ede5; color:#814b2a; }
.product-status-coming-soon { background:#edf0fb; color:#45558b; }
.product-status-closed { background:#f0f2ef; color:#556157; }
.product-admin-status { flex:0 0 auto!important; padding:5px 9px; border-radius:999px; font-size:.72rem!important; font-weight:800; }
.product-size-availability { display:grid; gap:8px; margin-top:-3px; }
.product-size-availability > p { margin:0; color:#6c7b70; font-size:.8rem; }
.product-size-availability-row { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border:1px solid #e2e9e0; border-radius:10px; background:#f8faf6; }
.product-size-availability-row span { color:#405146; font-size:.84rem; font-weight:650; }
.product-size-availability-row label { display:flex; align-items:center; gap:8px; color:#53645a; font-size:.8rem; }
.product-size-availability-row input { width:18px; height:18px; accent-color:var(--green); }
.product-status-settings { display:grid; gap:12px; padding:14px; border:1px solid #e2e9e0; border-radius:12px; background:#f8faf6; }
.product-status-settings label:not(.admin-checkbox) { display:grid; gap:6px; color:#405146; font-size:.84rem; font-weight:700; }
.product-status-settings select { min-height:44px; border:1px solid #d9e3d8; border-radius:9px; padding:8px 10px; background:#fff; color:#27382d; font:inherit; }
.product-status-settings .admin-checkbox { align-items:flex-start; }
.product-card .product-status-badge { margin:0 0 10px; }
@media(max-width:720px) {
  .about-intro { grid-template-columns:minmax(0,1fr); gap:25px; }
  .about-copy { max-width:none; }
  .about-photo { width:min(100%,560px); margin-inline:auto; }
  .about-photo img { aspect-ratio:16/10; }
  .about-contact { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .about-page *, .about-page *::before, .about-page *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.product-size-availability-option { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid #e2e9e0; border-radius:10px; background:#f8faf6; color:#405146; font-size:.84rem; }
.product-size-availability-option input { flex:0 0 auto; accent-color:var(--green); }