/* ================================================================
   🎨 DESIGN SYSTEM — Heritage & Harvest
   Modify variables below to rebrand for any client
   ================================================================ */
:root {
    /* ----- Colors — Hassouna Gold/Black ----- */
    --primary: #E3BF22;
    --on-primary: #1a1a1a;
    --primary-container: #eed468;
    --on-primary-container: #1a1a1a;
    --inverse-primary: #b8922e;
    --primary-fixed: #f0dfa0;
    --primary-fixed-dim: #E3BF22;
    --on-primary-fixed: #1a1a1a;
    --on-primary-fixed-variant: #3d3010;

    --secondary: #1a1a1a;
    --on-secondary: #ffffff;
    --secondary-container: #2a2a2a;
    --on-secondary-container: #f5f5f5;
    --secondary-fixed: #e0e0e0;
    --secondary-fixed-dim: #b0b0b0;
    --on-secondary-fixed: #1a1a1a;
    --on-secondary-fixed-variant: #333333;

    --tertiary: #595d64;
    --on-tertiary: #ffffff;
    --tertiary-container: #72757d;
    --on-tertiary-container: #fffdff;
    --tertiary-fixed: #dfe2eb;
    --tertiary-fixed-dim: #c3c6cf;
    --on-tertiary-fixed: #181c22;
    --on-tertiary-fixed-variant: #43474e;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    --surface: #f8f9fa;
    --surface-dim: #d9dadb;
    --surface-bright: #f8f9fa;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f4f5;
    --surface-container: #edeeef;
    --surface-container-high: #e7e8e9;
    --surface-container-highest: #e1e3e4;
    --on-surface: #191c1d;
    --on-surface-variant: #424655;
    --inverse-surface: #2e3132;
    --inverse-on-surface: #f0f1f2;
    --surface-variant: #e1e3e4;
    --surface-tint: #E3BF22;

    --outline: #727687;
    --outline-variant: #c2c6d8;
    --background: #f8f9fa;
    --on-background: #191c1d;

    /* Brand accent — Hassouna Gold */
    --brand: #E3BF22;

    /* Cart bar background */
    --cart-bg: #1a1a1a;

    /* ----- Typography ----- */
    --font-display: 'Be Vietnam Pro', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-label: 'IBM Plex Sans', sans-serif;

    /* ----- Spacing (8px base) ----- */
    --space-xs: 4px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-gutter: 24px;
    --margin-mobile: 16px;

    /* ----- Border-radius ----- */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ----- Shadows ----- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.05);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    background: var(--background);
    color: var(--on-background);
    padding-bottom: 90px;
    -webkit-tap-highlight-color: transparent;
}

/* ===== LOADING ===== */
.loading-screen {
    position: fixed; inset: 0; background: #fff;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; z-index: 9999;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.loading-screen.hidden { opacity: 0; pointer-events: none; transform: scale(1.02); }
.loading-screen img {
    animation: logo-pulse 1.6s ease-in-out infinite;
}
@keyframes logo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.93); }
}
.loading-spinner {
    width: 48px; height: 48px; border: 4px solid var(--surface-container);
    border-top-color: var(--brand); border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
.loading-text { margin-top: var(--space-md); font-size: 14px; color: var(--on-surface-variant); animation: fade-in 0.8s ease both; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== ERROR ===== */
.error-screen {
    position: fixed; inset: 0; background: #fff;
    display: none; flex-direction: column; align-items: center;
    justify-content: center; z-index: 9999; padding: 40px;
}
.error-screen.show { display: flex; }
.error-screen i { font-size: 48px; color: var(--secondary); margin-bottom: var(--space-md); }
.error-screen h2 { font-size: 20px; font-family: var(--font-display); margin-bottom: 8px; }
.error-screen p { font-size: 14px; color: var(--on-surface-variant); text-align: center; margin-bottom: var(--space-md); }
.error-screen button {
    padding: var(--space-sm) 32px; border-radius: var(--radius);
    background: var(--primary); color: var(--on-primary); border: none;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ===== TOP BAR ===== */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    padding: var(--space-md) 20px var(--space-sm);
    border-bottom: 1px solid var(--surface-container);
    transition: box-shadow 0.3s;
    animation: slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes slide-down {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
.topbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

/* ===== TOPBAR NAVIGATION TABS ===== */
.topbar-nav {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--surface-container);
}
.topbar-nav .nav-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-label);
    color: var(--on-surface-variant);
    background: var(--surface-container);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.topbar-nav .nav-link i {
    font-size: 11px;
    opacity: 0.8;
}
.topbar-nav .nav-link:hover {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-container-high));
    transform: translateY(-1px);
}
.topbar-nav .nav-link.active {
    color: var(--on-primary);
    background: var(--brand);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
.topbar-nav .nav-link:active {
    transform: scale(0.97);
}

.topbar-row { display: flex; justify-content: space-between; align-items: center; }
.topbar .logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 22px; font-family: var(--font-display); font-weight: 700;
    color: var(--brand); letter-spacing: -1px;
}
.topbar .logo img { max-height: 40px; width: auto; border-radius: var(--radius-sm); }
.topbar .logo .logo-fallback { display: block; }
.topbar-icons { display: flex; gap: var(--space-sm); }
.topbar-icons button {
    width: 40px; height: 40px; border-radius: var(--radius);
    background: var(--surface); border: none; color: var(--on-surface-variant);
    font-size: 16px; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
}
.topbar-icons button:hover { transform: scale(1.1); }
.topbar-icons button:active { transform: scale(0.9); }
.topbar-icons .cart-btn { background: var(--brand); color: var(--on-primary); }
.topbar-icons .cart-btn:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 50%, transparent);
    filter: brightness(1.08);
}
.topbar-icons .cart-btn .badge {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--on-surface); color: #fff; font-size: 10px;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.topbar .greeting { font-size: 12px; color: var(--on-surface-variant); margin-top: 8px; animation: fade-in 0.6s ease 0.3s both; }
.topbar .greeting strong { color: var(--on-surface); font-family: var(--font-display); }

/* ===== SOCIAL LINKS ===== */
.social-row { display: flex; gap: 10px; margin-top: 10px; }
.social-row a {
    width: 32px; height: 32px; border-radius: var(--radius);
    background: var(--surface); display: flex; align-items: center;
    justify-content: center; color: var(--on-surface-variant); font-size: 14px;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.social-row a:hover { 
    background: var(--brand); color: var(--on-primary);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
.social-row a:active { transform: scale(0.9); }

/* ===== SEARCH ===== */
.search-wrap { padding: var(--space-md) 20px 8px; }
.search-box {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--outline-variant); transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-box:focus-within { 
    border-color: var(--brand); 
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 12%, transparent);
    transform: translateY(-2px);
}
.search-box i { color: var(--outline); font-size: 14px; }
.search-box input {
    flex: 1; border: none; outline: none;
    font-family: var(--font-body); font-size: 14px;
    background: transparent; color: var(--on-surface);
}
.search-box input::placeholder { color: var(--outline); }

/* ===== CATEGORIES ===== */
.cats-scroll-wrap {
    position: relative;
}
.cats-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 100%;
    background: linear-gradient(to left, var(--background) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.cats-scroll {
    display: flex; gap: 8px; padding: 20px 20px var(--space-sm);
    overflow-x: auto; 
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}
.cats-scroll.active-drag {
    cursor: grabbing;
}
.cats-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
    flex-shrink: 0; padding: 10px 20px; border-radius: var(--radius-full);
    background: var(--surface-container); font-size: 13px; font-weight: 600;
    font-family: var(--font-label); color: var(--on-surface);
    cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap;
    border: 1px solid transparent;
}
.cat-pill:hover:not(.active) {
    background: var(--surface-container-high);
    transform: translateY(-2px);
}
.cat-pill:active {
    transform: scale(0.95);
}
.cat-pill.active {
    background: var(--brand); color: var(--on-primary); border-color: var(--brand);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* ===== SECTION TITLE ===== */
.section-title {
    padding: var(--space-md) 20px 14px;
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
}

/* ===== PRODUCT CARDS (horizontal scroll) ===== */
.products-scroll {
    display: flex; gap: 14px; overflow-x: auto;
    padding: 0 20px 8px; scroll-snap-type: x mandatory;
    -ms-overflow-style: none; scrollbar-width: none;
}
.products-scroll::-webkit-scrollbar { display: none; }

.product-card {
    flex-shrink: 0; width: 160px;
    background: #fff; border-radius: var(--radius-lg);
    overflow: hidden; scroll-snap-align: start;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; cursor: pointer;
}
.product-card:hover { 
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08); 
}
.product-card:active { transform: scale(0.97); }
.product-card .img-wrap {
    width: 100%; height: 130px;
    background: var(--surface); position: relative;
    display: flex; align-items: center; justify-content: center;
}
.product-card .img-wrap img { width: 85%; height: 85%; object-fit: contain; }
.product-card .img-wrap .no-img i { font-size: 32px; color: var(--outline-variant); }
.product-card .tag {
    position: absolute; top: 8px; left: 8px;
    background: var(--secondary-container); color: var(--on-secondary);
    font-size: 9px; font-weight: 600; font-family: var(--font-label);
    padding: 3px 8px; border-radius: var(--radius-sm);
}
.product-card .body { padding: 14px; }
.product-card .body h4 {
    font-size: 13px; font-family: var(--font-display); font-weight: 700; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card .body p {
    font-size: 10px; color: var(--on-surface-variant); margin-bottom: 10px;
    line-height: 1.4; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .bottom { display: flex; align-items: center; justify-content: space-between; }
.product-card .price { font-size: 15px; font-weight: 700; color: var(--secondary); }
.product-card .add-btn {
    width: 32px; height: 32px; border-radius: var(--radius);
    background: var(--brand); color: var(--on-primary); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
}
.product-card .add-btn:hover {
    transform: scale(1.1);
    background: var(--primary-container);
}
.product-card .add-btn:active { transform: scale(0.85); }

/* ===== PRODUCT GRID (category view) ===== */
.products-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 0 20px 20px;
}
.products-grid .product-card {
    width: auto;
}

/* ===== FULL WIDTH PRODUCT ===== */
.full-product {
    margin: var(--space-sm) 20px; background: #fff; border-radius: var(--radius-lg);
    display: flex; overflow: hidden; box-shadow: var(--shadow-sm);
    cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.full-product:hover { 
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06); 
}
.full-product .img-side {
    width: 120px; flex-shrink: 0; background: var(--surface);
    display: flex; align-items: center; justify-content: center;
}
.full-product .img-side img { width: 90%; object-fit: contain; }
.full-product .img-side .no-img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.full-product .img-side .no-img i { font-size: 36px; color: var(--outline-variant); }
.full-product .info-side { flex: 1; padding: var(--space-md); display: flex; flex-direction: column; justify-content: center; }
.full-product .info-side h4 { font-size: 15px; font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.full-product .info-side p { font-size: 11px; color: var(--on-surface-variant); margin-bottom: 10px; line-height: 1.5; }
.full-product .info-side .row { display: flex; align-items: center; justify-content: space-between; }
.full-product .info-side .price { font-size: 18px; font-weight: 700; color: var(--secondary); }
.full-product .info-side .add-btn {
    width: 36px; height: 36px; border-radius: var(--radius);
    background: var(--brand); color: var(--on-primary); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
}

/* ===== PRODUCT DETAIL MODAL ===== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 400; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.detail-modal {
    position: fixed; bottom: 0; left: 0; width: 100%;
    max-height: 90vh; background: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 401; transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
}
.detail-modal.open { transform: translateY(0); }
.detail-modal .handle {
    width: 36px; height: 4px; border-radius: var(--radius-sm);
    background: var(--outline-variant); margin: var(--space-sm) auto 0;
}
.detail-modal .modal-header {
    padding: 20px var(--space-md) var(--space-md);
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--surface-container);
}
.detail-modal .modal-header h3 { font-size: 18px; font-family: var(--font-display); font-weight: 700; }
.detail-modal .modal-header .close-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface); border: none; font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant);
}
.detail-modal .modal-body {
    flex: 1; overflow-y: auto; padding: 20px var(--space-md);
}
.detail-modal .modal-body .product-img {
    width: 100%; height: 200px; border-radius: var(--radius-lg);
    background: var(--surface); display: flex; align-items: center;
    justify-content: center; margin-bottom: var(--space-md); overflow: hidden;
}
.detail-modal .modal-body .product-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.detail-modal .modal-body .product-img .no-img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.detail-modal .modal-body .product-img .no-img i { font-size: 48px; color: var(--outline-variant); }
.detail-modal .modal-body .product-name { font-size: 20px; font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.detail-modal .modal-body .product-desc { font-size: 13px; color: var(--on-surface-variant); margin-bottom: 20px; line-height: 1.6; }

/* Variant groups */
.variant-group { margin-bottom: 20px; }
.variant-group .group-title {
    font-size: 15px; font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-sm);
    display: flex; align-items: center; gap: 8px;
}
.variant-group .group-title .required {
    font-size: 10px; color: var(--secondary); font-weight: 600;
    background: color-mix(in srgb, var(--secondary) 12%, transparent); padding: 2px 8px; border-radius: var(--radius-sm);
}
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-opt {
    padding: 10px 20px; border-radius: var(--radius);
    border: 2px solid var(--surface-container-high); background: #fff;
    font-family: var(--font-body); font-size: 13px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.variant-opt.selected {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, white);
    color: var(--brand);
}

/* Addons */
.addon-group { margin-bottom: 20px; }
.addon-group .group-title { font-size: 15px; font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-sm); }
.addon-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
    border: 1px solid var(--surface-container); margin-bottom: 8px;
    cursor: pointer; transition: all 0.2s;
}
.addon-item.checked { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, white); }
.addon-item .left { display: flex; align-items: center; gap: var(--space-sm); }
.addon-item .check {
    width: 22px; height: 22px; border-radius: var(--radius-sm);
    border: 2px solid var(--outline-variant); display: flex; align-items: center;
    justify-content: center; font-size: 11px; color: #fff; transition: all 0.2s;
}
.addon-item.checked .check { background: var(--brand); border-color: var(--brand); }
.addon-item .name { font-size: 14px; font-weight: 600; }
.addon-item .price { font-size: 13px; font-weight: 600; color: var(--secondary); }

/* Modal footer */
.detail-modal .modal-footer {
    padding: var(--space-md) var(--space-md) 32px; border-top: 1px solid var(--surface-container);
    display: flex; align-items: center; gap: 14px;
}
.detail-modal .modal-footer .qty-controls {
    display: flex; align-items: center; gap: var(--space-sm);
    background: var(--surface); border-radius: var(--radius); padding: 8px 14px;
}
.detail-modal .modal-footer .qty-controls button {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    border: none; background: #fff; font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.detail-modal .modal-footer .qty-controls .qty {
    font-size: 18px; font-weight: 700; min-width: 24px; text-align: center;
}
.detail-modal .modal-footer .add-btn {
    flex: 1; padding: 14px; border-radius: var(--radius);
    background: var(--brand); color: var(--on-primary); border: none;
    font-family: var(--font-body); font-size: 15px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.detail-modal .modal-footer .add-btn:active { transform: scale(0.98); }

/* ===== BOTTOM CART BAR ===== */
.cart-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 200; }
.cart-bar[style*='block'] .bar-inner {
    animation: cart-bar-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cart-bar-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}
.cart-bar .bar-inner {
    margin: 0 var(--margin-mobile) var(--margin-mobile);
    background: var(--cart-bg); border-radius: var(--radius-lg);
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    color: #fff; cursor: pointer;
    box-shadow: 0 -2px 0 rgba(255,255,255,0.04), var(--shadow-lg);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.cart-bar .bar-inner:hover { box-shadow: 0 -2px 0 rgba(255,255,255,0.04), 0 16px 40px rgba(0,0,0,0.18); }
.cart-bar .bar-inner:active { transform: scale(0.98); }
.cart-bar .left { display: flex; align-items: center; gap: var(--space-sm); }
.cart-bar .cart-icon {
    width: 40px; height: 40px; border-radius: var(--radius);
    background: var(--brand); display: flex; align-items: center;
    justify-content: center; font-size: 16px; position: relative;
}
.cart-bar .cart-icon .num {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--secondary); color: var(--on-secondary); font-size: 10px;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cart-bar .cart-info .count { font-size: 11px; opacity: 0.6; }
.cart-bar .cart-info .view { font-size: 14px; font-weight: 600; }
.cart-bar .total { font-size: 18px; font-weight: 700; color: #fff; }

/* ===== CART BOTTOM SHEET ===== */
.cart-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-sheet {
    position: fixed; bottom: 0; left: 0; width: 100%;
    max-height: 85vh; background: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 301; transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
}
.cart-sheet.open { transform: translateY(0); }
.cart-sheet .handle {
    width: 36px; height: 4px; border-radius: var(--radius-sm);
    background: var(--outline-variant); margin: var(--space-sm) auto 0;
}
.cart-sheet .sheet-header {
    padding: 20px var(--space-md) var(--space-md);
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--surface-container);
}
.cart-sheet .sheet-header h3 { font-size: 20px; font-family: var(--font-display); font-weight: 700; }
.cart-sheet .sheet-header .close-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface); border: none; font-size: 14px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant);
}
.cart-sheet .sheet-body { flex: 1; overflow-y: auto; padding: var(--space-md) 14px; }
.cart-sheet .empty { text-align: center; padding: 60px 0; color: var(--outline); }
.cart-sheet .empty i { font-size: 48px; margin-bottom: var(--space-sm); }
.cart-sheet .empty p { font-weight: 600; }

.cart-item {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--surface); align-items: flex-start;
}
.cart-item .thumb {
    width: 56px; height: 56px; border-radius: var(--radius);
    background: var(--surface); overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .details { flex: 1; }
.cart-item .details h4 { font-size: 14px; font-family: var(--font-display); font-weight: 700; margin-bottom: 2px; }
.cart-item .details .variant-label { font-size: 11px; color: var(--on-surface-variant); margin-bottom: 2px; }
.cart-item .details .addons-label { font-size: 11px; color: var(--outline); margin-bottom: 4px; }
.cart-item .details .item-price { font-size: 13px; font-weight: 600; color: var(--secondary); }
.cart-item .qty-controls { display: flex; align-items: center; gap: 10px; }
.cart-item .qty-controls button {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--surface-container-high); background: #fff;
    font-size: 14px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.cart-item .qty-controls .qty { font-size: 16px; font-weight: 700; min-width: 20px; text-align: center; }

.cart-sheet .sheet-footer { padding: 20px var(--space-md) 32px; border-top: 1px solid var(--surface-container); }
.cart-sheet .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: var(--on-surface-variant); }
.cart-sheet .summary-row.total {
    font-size: 18px; font-weight: 700; color: var(--on-surface);
    margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--surface-container);
}
.cart-sheet .order-btn {
    width: 100%; padding: var(--space-md); border-radius: var(--radius);
    background: var(--brand); color: var(--on-primary); border: none;
    font-family: var(--font-body); font-size: 16px;
    font-weight: 600; cursor: pointer; margin-top: var(--space-md); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-sheet .order-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 40%, transparent);
}
.cart-sheet .order-btn:active { transform: scale(0.98); }

/* ===== KEYFRAMES & ANIMATION HELPERS ===== */
@keyframes bounce-pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.15) translateY(-4px); }
    50% { transform: scale(0.95) translateY(0); }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.bounce-pulse {
    animation: bounce-pulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-appear {
    opacity: 0;
    animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== TOAST ===== */
.toast-msg {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(24px) scale(0.92);
    background: var(--on-surface); color: #fff; padding: 10px 20px;
    border-radius: var(--radius-full); font-size: 13px; font-weight: 600;
    z-index: 999; opacity: 0; 
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    white-space: nowrap;
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ===== NOTES TEXTAREA ===== */
.notes-area {
    width: 100%; border: 1px solid var(--outline-variant); border-radius: var(--radius);
    padding: 14px var(--space-md); font-family: var(--font-body);
    font-size: 13px; resize: none; outline: none; transition: border-color 0.3s;
    background: var(--surface); margin-top: 8px; color: var(--on-surface);
}
.notes-area:focus { border-color: var(--brand); background: #fff; }
.notes-area::placeholder { color: var(--outline); }

/* ===== ZONE PICKER FOOTER BUTTON ===== */
#zoneFooter .add-btn { flex: 1; }

/* ===== RESPONSIVE — small screens ===== */
@media (max-width: 480px) {
    :root { --space-gutter: 16px; --margin-mobile: 12px; }
    .topbar { padding: 14px 16px 10px; }
    .topbar .logo { font-size: 18px; }
    .topbar .logo img { max-height: 32px; }
    .topbar .greeting { font-size: 11px; margin-top: 6px; }
    .social-row { margin-top: 8px; }
    .social-row a { width: 28px; height: 28px; font-size: 12px; }
    .search-wrap { padding: 12px 16px 6px; }
    .search-box { padding: 10px 14px; }
    .search-box input { font-size: 13px; }
    .cats-scroll { padding: 14px 16px 8px; gap: 6px; }
    .cat-pill { padding: 8px 16px; font-size: 12px; }
    .section-title { padding: 14px 16px 10px; font-size: 17px; }
    .products-scroll { gap: 10px; padding: 0 16px 6px; }
    .products-grid { gap: 10px; padding: 0 16px 16px; }
    .product-card { width: 140px; }
    .product-card .img-wrap { height: 110px; }
    .product-card .body { padding: 10px; }
    .product-card .body h4 { font-size: 12px; }
    .product-card .body p { font-size: 9px; }
    .product-card .price { font-size: 13px; }
    .product-card .add-btn { width: 28px; height: 28px; font-size: 11px; }
    .full-product { margin: 8px 16px; }
    .full-product .img-side { width: 90px; }
    .full-product .info-side { padding: 12px; }
    .full-product .info-side h4 { font-size: 13px; }
    .full-product .info-side p { font-size: 10px; }
    .full-product .info-side .price { font-size: 15px; }
    .full-product .info-side .add-btn { width: 30px; height: 30px; font-size: 12px; }
    .detail-modal .modal-header { padding: 14px 16px 12px; }
    .detail-modal .modal-header h3 { font-size: 16px; }
    .detail-modal .modal-body { padding: 14px 16px; }
    .detail-modal .modal-body .product-img { height: 160px; }
    .detail-modal .modal-body .product-name { font-size: 17px; }
    .detail-modal .modal-body .product-desc { font-size: 12px; }
    .variant-opt { padding: 8px 14px; font-size: 12px; }
    .addon-item { padding: 10px 14px; }
    .addon-item .name { font-size: 13px; }
    .addon-item .price { font-size: 12px; }
    .detail-modal .modal-footer { padding: 12px 16px 24px; gap: 10px; }
    .detail-modal .modal-footer .qty-controls { padding: 6px 10px; gap: 6px; }
    .detail-modal .modal-footer .qty-controls button { width: 28px; height: 28px; font-size: 12px; }
    .detail-modal .modal-footer .qty-controls .qty { font-size: 16px; min-width: 20px; }
    .detail-modal .modal-footer .add-btn { padding: 12px; font-size: 14px; }
    .cart-bar .bar-inner { padding: 12px 16px; }
    .cart-bar .cart-icon { width: 36px; height: 36px; font-size: 14px; }
    .cart-bar .cart-info .count { font-size: 10px; }
    .cart-bar .cart-info .view { font-size: 12px; }
    .cart-bar .total { font-size: 16px; }

    /* Cart sheet — compact */
    .cart-sheet .sheet-header { padding: 14px 16px 12px; }
    .cart-sheet .sheet-header h3 { font-size: 17px; }
    .cart-sheet .sheet-body { padding: 8px 16px; }
    .cart-item { gap: 10px; padding: 12px 0; }
    .cart-item .thumb { width: 44px; height: 44px; }
    .cart-item .details h4 { font-size: 13px; }
    .cart-item .details .variant-label { font-size: 10px; }
    .cart-item .details .addons-label { font-size: 10px; }
    .cart-item .details .item-price { font-size: 12px; }
    .cart-item .qty-controls { gap: 6px; }
    .cart-item .qty-controls button { width: 26px; height: 26px; font-size: 12px; }
    .cart-item .qty-controls .qty { font-size: 14px; min-width: 18px; }
    .cart-sheet .sheet-footer { padding: 14px 16px 24px; }
    .cart-sheet .summary-row { font-size: 13px; }
    .cart-sheet .summary-row.total { font-size: 16px; }
    .cart-sheet .order-btn { padding: 14px; font-size: 14px; }
    .notes-area { padding: 10px 14px; font-size: 12px; }
    .copyright { padding: 24px 16px 20px; font-size: 11px; }
}

/* ===== COPYRIGHT ===== */
/* ===== COPYRIGHT ===== */
.copyright {
    text-align: center; padding: 32px 20px 24px;
    font-size: 12px; color: var(--outline);
    font-family: var(--font-body);
}
.copyright a {
    color: var(--on-surface-variant); text-decoration: none; font-weight: 600;
}
.copyright a:hover { color: var(--brand); text-decoration: underline; }

/* ===== SHARED KEYFRAMES ===== */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance — applied per card by JS */
.card-appear {
    opacity: 0;
    animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}