/* =========================================================
   BUILD MY FOOD BUSINESS
   OWNER LIVE STORE
   PART 1
   HEADER • HERO • STORE INFO • MENU TOOLS
========================================================= */

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

:root {

    --primary: #111827;
    --accent: #d19035;
    --accent-dark: #a86b17;

    --bg: #fffaf1;

    --card: #ffffff;

    --text: #1f2937;

    --muted: #6b7280;

    --border: #ececec;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: Arial, Helvetica, sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

}

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

.store-header {

    background: var(--primary);

    color: white;

    padding: 26px 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

}

.store-brand {

    display: flex;

    align-items: center;

    gap: 20px;

}

.store-logo-wrap {

    width: 76px;

    height: 76px;

    border-radius: 50%;

    overflow: hidden;

    background: white;

    flex-shrink: 0;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);

}

.store-logo-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.eyebrow {

    color: var(--accent);

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;

    margin-bottom: 6px;

}

.store-header h1 {

    font-size: 38px;

    margin-bottom: 8px;

}

.store-header p {

    color: #d1d5db;

}

#cartBtn {

    border: none;

    border-radius: 999px;

    background: var(--accent);

    color: white;

    padding: 15px 28px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s;

}

#cartBtn:hover {

    background: var(--accent-dark);

    transform: translateY(-2px);

}

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

.hero {

    background:

        linear-gradient(135deg,

            #fff5de,

            #ffffff);

    padding: 70px 7%;

}

.hero h2 {

    font-size: 42px;

    margin: 10px 0;

}

.hero p {

    max-width: 720px;

    color: var(--muted);

}

.hero-actions {

    margin-top: 30px;

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}

.primary-store-action {

    display: inline-block;

    text-decoration: none;

    background: var(--accent);

    color: white;

    padding: 14px 28px;

    border-radius: 999px;

    font-weight: 800;

}

.secondary-store-action {

    border: none;

    background: white;

    border: 2px solid var(--primary);

    color: var(--primary);

    padding: 14px 28px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 800;

}

/* =========================================================
   STORE INFORMATION
========================================================= */

.store-info-card {

    width: min(1200px, 90%);

    margin: -35px auto 50px;

    background: white;

    border-radius: 24px;

    padding: 34px;

    box-shadow:

        0 18px 45px rgba(0, 0, 0, .08);

}

.store-info-card h2 {

    margin: 8px 0;

}

.store-info-grid {

    margin-top: 30px;

    display: grid;

    grid-template-columns:

        repeat(auto-fit,

            minmax(220px, 1fr));

    gap: 24px;

}

.store-info-grid strong {

    display: block;

    margin-bottom: 8px;

}

.store-contact-actions {

    margin-top: 30px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.store-contact-actions a {

    text-decoration: none;

    background: var(--primary);

    color: white;

    padding: 12px 22px;

    border-radius: 999px;

    font-weight: 700;

}

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

.menu-tools {

    width: min(1200px, 90%);

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    flex-wrap: wrap;

}

.menu-tools h2 {

    margin: 8px 0;

}

.menu-search-wrap {

    width: 340px;

    max-width: 100%;

}

.menu-search-wrap input {

    width: 100%;

    padding: 15px 18px;

    border-radius: 999px;

    border: 1px solid var(--border);

    outline: none;

    font-size: 15px;

}

.menu-search-wrap input:focus {

    border-color: var(--accent);

}

/* =========================================================
   BUILD MY FOOD BUSINESS
   OWNER LIVE STORE
   PART 2
   CATEGORY BAR • FILTERS • PRODUCTS • CART
========================================================= */

/* =========================================================
   CATEGORY STRIP
========================================================= */

.category-strip {

    width: min(1200px, 90%);

    margin: 35px auto 20px;

    display: flex;

    gap: 14px;

    overflow-x: auto;

    padding-bottom: 6px;

}

.category-strip::-webkit-scrollbar {

    height: 8px;

}

.category-strip::-webkit-scrollbar-thumb {

    background: #ddd;

    border-radius: 999px;

}

.category-chip {

    border: none;

    background: white;

    border: 1px solid var(--border);

    padding: 12px 20px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 700;

    white-space: nowrap;

    transition: .25s;

}

.category-chip:hover {

    background: #fff2d6;

}

.category-chip.active {

    background: var(--accent);

    color: white;

    border-color: var(--accent);

}

/* =========================================================
   FILTER STRIP
========================================================= */

.filter-strip {

    width: min(1200px, 90%);

    margin: 0 auto 28px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}

.filter-chip {

    border: none;

    background: #f3f4f6;

    color: #374151;

    padding: 10px 18px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 700;

    transition: .25s;

}

.filter-chip:hover {

    background: #e5e7eb;

}

.filter-chip.active {

    background: var(--primary);

    color: white;

}

/* =========================================================
   PRODUCTS
========================================================= */

.products-section {

    width: min(1200px, 90%);

    margin: auto;

    padding: 10px 0 60px;

}

.products-grid {

    display: grid;

    grid-template-columns:

        repeat(auto-fit,

            minmax(270px, 1fr));

    gap: 28px;

}

.product-card {

    background: white;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid var(--border);

    box-shadow:

        0 12px 32px rgba(0, 0, 0, .06);

    transition: .25s;

}

.product-card:hover {

    transform: translateY(-6px);

    box-shadow:

        0 22px 45px rgba(0, 0, 0, .12);

}

.product-card img {

    width: 100%;

    height: 210px;

    object-fit: cover;

    background: #ececec;

}

.product-body {

    padding: 24px;

}

.product-body h3 {

    font-size: 22px;

    margin-bottom: 8px;

}

.product-body p {

    color: var(--muted);

    min-height: 48px;

}

.product-footer {

    margin-top: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

}

.price {

    font-size: 24px;

    font-weight: 900;

    color: var(--accent-dark);

}

.product-card button {

    border: none;

    background: var(--primary);

    color: white;

    padding: 12px 18px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 800;

    transition: .25s;

}

.product-card button:hover {

    background: #1f2937;

}

/* =========================================================
   CART DRAWER
========================================================= */

.cart-drawer {

    position: fixed;

    top: 0;

    right: -430px;

    width: 420px;

    max-width: 95%;

    height: 100vh;

    background: white;

    box-shadow:

        -15px 0 45px rgba(0, 0, 0, .18);

    padding: 24px;

    transition: .35s;

    overflow-y: auto;

    z-index: 9999;

}

.cart-drawer.open {

    right: 0;

}

.close-btn {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    cursor: pointer;

    float: right;

    font-size: 20px;

}

.cart-line {

    padding: 18px 0;

    border-bottom: 1px solid var(--border);

}

.cart-line strong {

    display: block;

    margin-bottom: 6px;

}

.cart-total {

    margin-top: 24px;

    font-size: 22px;

    font-weight: 800;

}

.checkout-btn {

    width: 100%;

    margin-top: 24px;

    padding: 15px;

    border: none;

    border-radius: 999px;

    background: var(--accent);

    color: white;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s;

}

.checkout-btn:hover {

    background: var(--accent-dark);

}

/* =========================================================
   BUILD MY FOOD BUSINESS
   OWNER LIVE STORE
   PART 3
   FLOATING CART • FOOTER • RESPONSIVE
========================================================= */

/* =========================================================
   FLOATING CART BAR
========================================================= */

.floating-cart-bar {

    position: fixed;

    left: 50%;

    bottom: 22px;

    transform: translateX(-50%);

    width: min(900px, 92%);

    background: #111827;

    color: #ffffff;

    border-radius: 18px;

    padding: 18px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);

    z-index: 9998;

}

.floating-cart-bar strong {

    display: block;

    font-size: 18px;

}

.floating-cart-bar span {

    color: #d1d5db;

    font-size: 14px;

}

#floatingCheckoutBtn {

    border: none;

    background: var(--accent);

    color: #ffffff;

    padding: 13px 24px;

    border-radius: 999px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s;

}

#floatingCheckoutBtn:hover {

    background: var(--accent-dark);

}

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

.store-footer {

    margin-top: 80px;

    background: #111827;

    color: #ffffff;

    padding: 60px 7% 30px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(220px, 1fr));

    gap: 40px;

}

.store-footer h3 {

    margin-bottom: 12px;

}

.store-footer strong {

    display: block;

    margin-bottom: 12px;

}

.store-footer p {

    color: #d1d5db;

    margin-bottom: 10px;

}

.store-footer a {

    color: #fbbf24;

    text-decoration: none;

}

.store-footer a:hover {

    text-decoration: underline;

}

.buildframe-credit {

    grid-column: 1/-1;

    margin-top: 20px;

    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, .15);

    text-align: center;

    font-size: 14px;

    color: #cbd5e1;

}

/* =========================================================
   EMPTY STATES
========================================================= */

#productsGrid:empty::before {

    content: "No products available yet.";

    display: block;

    text-align: center;

    color: var(--muted);

    padding: 50px;

}

.list-empty {

    text-align: center;

    padding: 40px;

    color: var(--muted);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px) {

    .store-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .menu-tools {

        flex-direction: column;

        align-items: flex-start;

    }

}

@media(max-width:768px) {

    .hero {

        padding: 50px 6%;

    }

    .hero h2 {

        font-size: 34px;

    }

    .store-info-card {

        margin-top: -20px;

        padding: 24px;

    }

    .store-info-grid {

        grid-template-columns: 1fr;

    }

    .products-grid {

        grid-template-columns: 1fr;

    }

    .floating-cart-bar {

        flex-direction: column;

        align-items: flex-start;

    }

    #floatingCheckoutBtn {

        width: 100%;

    }

}

@media(max-width:520px) {

    .store-logo-wrap {

        width: 70px;

        height: 70px;

    }

    .store-header h1 {

        font-size: 30px;

    }

    .hero h2 {

        font-size: 28px;

    }

    .hero-actions {

        flex-direction: column;

    }

    .primary-store-action,

    .secondary-store-action {

        width: 100%;

        text-align: center;

    }

    .category-strip {

        gap: 10px;

    }

    .category-chip {

        padding: 10px 16px;

        font-size: 14px;

    }

    .filter-strip {

        gap: 8px;

    }

    .filter-chip {

        font-size: 13px;

        padding: 9px 14px;

    }

}

/* =========================================================
   SMALL ANIMATIONS
========================================================= */

.product-card,
.category-chip,
.filter-chip,
#cartBtn,
.checkout-btn,
#floatingCheckoutBtn {

    transition: all .25s ease;

}

.product-card:hover {

    transform: translateY(-5px);

}

#cartBtn:hover {

    transform: translateY(-2px);

}

.checkout-btn:hover,
#floatingCheckoutBtn:hover {

    transform: translateY(-2px);

}

/* =========================================================
   CUSTOMER BOOKING SERVICES
========================================================= */

.hidden {

    display: none !important;

}

.booking-section {

    width: min(1200px, 90%);

    margin: 0 auto 60px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 28px;

    padding: 38px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);

}

.booking-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    flex-wrap: wrap;

    margin-bottom: 32px;

}

.booking-section-header h2 {

    font-size: 34px;

    margin: 8px 0 10px;

}

.booking-section-header p {

    max-width: 720px;

    color: var(--muted);

}

.booking-status-note {

    max-width: 360px;

    padding: 16px 20px;

    border-radius: 16px;

    background: #fff5de;

    border: 1px solid #f3d8a5;

    color: var(--accent-dark);

    font-weight: 700;

}

.customer-booking-form {

    margin-top: 10px;

}

.booking-form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

}

.booking-form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.booking-form-group-full {

    grid-column: 1 / -1;

}

.booking-form-group label {

    font-weight: 800;

    color: var(--primary);

}

.booking-form-group input,
.booking-form-group select,
.booking-form-group textarea {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: #ffffff;

    color: var(--text);

    padding: 14px 16px;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: border-color .2s ease,
        box-shadow .2s ease;

}

.booking-form-group textarea {

    resize: vertical;

    min-height: 120px;

}

.booking-form-group input:focus,
.booking-form-group select:focus,
.booking-form-group textarea:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 4px rgba(209, 144, 53, .14);

}

.booking-form-group input:required,
.booking-form-group select:required,
.booking-form-group textarea:required {

    border-left: 4px solid var(--accent);

}

.booking-deposit-notice,
.booking-policy-notice {

    margin-top: 24px;

    padding: 18px 20px;

    border-radius: 16px;

}

.booking-deposit-notice {

    background: #fff8e8;

    border: 1px solid #f3d8a5;

    color: #7c4a03;

}

.booking-policy-notice {

    background: #f8fafc;

    border: 1px solid #dbe3ec;

    color: var(--text);

}

.booking-policy-notice label {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;

}

.booking-policy-notice input {

    margin-top: 5px;

    flex-shrink: 0;

}

.booking-form-message {

    margin-top: 24px;

    padding: 16px 18px;

    border-radius: 14px;

    font-weight: 700;

}

.booking-form-message.success {

    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    color: #065f46;

}

.booking-form-message.error {

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #991b1b;

}

.booking-form-message.info {

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    color: #1e40af;

}

.booking-form-actions {

    margin-top: 28px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}

.booking-form-actions button {

    font-size: 15px;

    cursor: pointer;

    border: none;

}

.booking-form-actions .secondary-store-action {

    border: 2px solid var(--primary);

}

.booking-form-actions .primary-store-action {

    border: none;

    cursor: pointer;

}

.booking-form-actions button:disabled {

    opacity: .65;

    cursor: not-allowed;

}

#bookingHeroBtn {

    text-align: center;

}


/* =========================================================
   BOOKING RESPONSIVE
========================================================= */

@media(max-width:768px) {

    .booking-section {

        width: 92%;

        padding: 26px 20px;

        border-radius: 22px;

    }

    .booking-section-header {

        gap: 20px;

    }

    .booking-section-header h2 {

        font-size: 28px;

    }

    .booking-status-note {

        max-width: 100%;

        width: 100%;

    }

    .booking-form-grid {

        grid-template-columns: 1fr;

    }

    .booking-form-group-full {

        grid-column: auto;

    }

    .booking-form-actions {

        flex-direction: column-reverse;

        align-items: stretch;

    }

    .booking-form-actions .primary-store-action,
    .booking-form-actions .secondary-store-action {

        width: 100%;

        text-align: center;

    }

}

/* =========================================================
   END OF LIVE STORE CSS
========================================================= */