/* =============================================================================
   Jibu Kenya — Customer Ordering Web App
   Production stylesheet (replaces the page's inline <style>)
   Fonts (Poppins + Inter) and Font Awesome are linked in the HTML <head>.
   Mobile-first, responsive, accessible.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN SYSTEM — TOKEN LAYER
   --------------------------------------------------------------------------- */
:root {
    /* Brand */
    --jibu-primary:      #1660B0;   /* core Jibu blue            */
    --jibu-primary-rgb:  22, 96, 176;
    --jibu-deep:         #0D4280;   /* deep navy / hover         */
    --jibu-deep-rgb:     13, 66, 128;
    --jibu-accent:       #4DAEE3;   /* bright water accent       */
    --jibu-accent-rgb:   77, 174, 227;

    /* Surfaces */
    --jibu-page-bg:      #eef6fb;   /* soft water-tint page bg   */
    --surface:           #ffffff;
    --surface-muted:     #f8fafc;
    --surface-tint:      #f4fafe;

    /* Status */
    --success:           #1aa85d;
    --success-rgb:       26, 168, 93;
    --success-dark:      #15924f;
    --warning:           #f0ad4e;
    --warning-bg:        #fff3cd;
    --warning-fg:        #856404;
    --danger:            #e74c3c;
    --whatsapp-green:    #25D366;

    /* Neutral gray ramp */
    --gray-50:   #f8fafc;
    --gray-100:  #eef2f6;
    --gray-200:  #dce6ee;
    --gray-300:  #cbd5e1;
    --gray-400:  #94a3b8;
    --gray-500:  #64748b;
    --gray-600:  #475569;
    --gray-700:  #334155;
    --gray-800:  #1e293b;
    --gray-900:  #0f172a;
    --ink:       #142e44;   /* primary text on light surfaces */

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* Radius scale */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* Shadow scale */
    --shadow-xs: 0 1px 2px rgba(var(--jibu-deep-rgb), .06);
    --shadow-sm: 0 2px 8px rgba(var(--jibu-deep-rgb), .07);
    --shadow-md: 0 4px 14px rgba(var(--jibu-deep-rgb), .10);
    --shadow-lg: 0 10px 24px rgba(var(--jibu-deep-rgb), .14);
    --shadow-xl: 0 18px 40px rgba(var(--jibu-deep-rgb), .20);

    /* Typography */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

    /* Motion */
    --transition: all .25s ease;
    --transition-fast: all .18s ease;

    /* Layout */
    --container-max:    1100px;
    --container-max-xl: 1280px;
    --tap-target:       44px;

    /* ----- Backward-compatible aliases (legacy markup) ----- */
    --primary:        var(--jibu-primary);
    --primary-dark:   var(--jibu-deep);
    --secondary:      var(--success);
    --secondary-dark: var(--success-dark);
    --accent:         var(--jibu-accent);
    --dark:           var(--ink);
    --gray:           var(--gray-500);
    --light:          var(--surface-muted);
    --light-gray:     var(--gray-200);
    --bg-light-blue:  var(--jibu-page-bg);
    --whatsapp:       var(--whatsapp-green);
    --card-shadow:    var(--shadow-md);
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--jibu-page-bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 78px; /* room for fixed bottom nav */
}

h1, h2, h3,
.product-name,
.jibu-hero-title {
    font-family: var(--font-display);
    line-height: 1.25;
}

img { max-width: 100%; display: block; }

a { color: var(--jibu-primary); }

button { font-family: inherit; }

.hidden { display: none !important; }

.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }

/* App shell */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--surface);
    min-height: 100vh;
}

/* -----------------------------------------------------------------------------
   3. ACCESSIBILITY — global focus
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid rgba(var(--jibu-accent-rgb), .65);
    outline-offset: 2px;
}

button,
.price-option,
.delivery-option,
.payment-option,
.nav-btn,
.customer-type-btn,
.star {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.price-option:focus-visible,
.delivery-option:focus-visible,
.payment-option:focus-visible {
    outline: 3px solid rgba(var(--jibu-accent-rgb), .65);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   4. CUSTOMER TYPE SELECTION SCREEN
   --------------------------------------------------------------------------- */
.customer-type-selection {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, rgba(var(--jibu-deep-rgb), .92), rgba(var(--jibu-primary-rgb), .9));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: var(--space-4);
}

.selection-container {
    background: var(--surface);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    animation: jibu-pop .3s ease;
}

.selection-container h2 {
    color: var(--jibu-primary);
    margin-bottom: var(--space-6);
    font-size: 1.4rem;
}

.customer-type-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.customer-type-btn {
    padding: var(--space-4);
    min-height: var(--tap-target);
    border: none;
    border-radius: var(--radius-md);
    background: var(--jibu-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.customer-type-btn:hover {
    background: var(--jibu-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#reseller-code-section { margin-top: var(--space-5); }

#reseller-code-input,
#discount-code-input {
    padding: var(--space-3);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    width: 100%;
    margin-bottom: var(--space-4);
    font-size: 1rem;
    background: var(--surface-muted);
    transition: var(--transition);
}

#reseller-code-input:focus,
#discount-code-input:focus {
    outline: none;
    border-color: var(--jibu-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

#verify-reseller-code,
#apply-discount-code {
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border: none;
    border-radius: var(--radius-md);
    background: var(--jibu-primary);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

#verify-reseller-code:hover,
#apply-discount-code:hover { background: var(--jibu-deep); }

.error-message,
.discount-code-error,
.reseller-code-error {
    color: var(--danger);
    margin-top: var(--space-2);
    font-size: .9rem;
}
.discount-code-error { font-size: .8rem; }

/* -----------------------------------------------------------------------------
   5. BRANDED HERO
   --------------------------------------------------------------------------- */
.jibu-hero {
    position: relative;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--jibu-deep) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.jibu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--jibu-deep-rgb), .80), rgba(var(--jibu-primary-rgb), .85));
}

.jibu-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--space-6) var(--space-5) var(--space-5);
    width: 100%;
}

.jibu-logo {
    height: 42px;
    width: auto;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}

.jibu-hero-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 var(--space-1);
    color: #fff;
}

.jibu-hero-tag {
    font-size: .95rem;
    opacity: .95;
    margin: 0 0 var(--space-4);
    font-weight: 400;
}

/* -----------------------------------------------------------------------------
   6. PRICE PILLS  (.price-list-toggle / .price-option)
   --------------------------------------------------------------------------- */
.price-list-toggle {
    display: inline-flex;
    gap: var(--space-2);
    background: rgba(255, 255, 255, .15);
    padding: 5px;
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.price-option {
    padding: 9px 18px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.price-option:hover { color: #fff; background: rgba(255, 255, 255, .18); }

.price-option.active {
    background: #fff;
    color: var(--jibu-deep);
    box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------------------------
   7. SEARCH
   --------------------------------------------------------------------------- */
.search-container {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    padding: var(--space-3) var(--space-4) var(--space-2);
    box-shadow: var(--shadow-sm);
}

.search-box {
    width: 100%;
    min-height: var(--tap-target);
    padding: 12px 18px 12px 46px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-pill);
    font-size: .95rem;
    background: var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 16px center;
    background-size: 18px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.search-box:focus {
    outline: none;
    border-color: var(--jibu-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

/* -----------------------------------------------------------------------------
   8. PRODUCT GRID & CARDS
   --------------------------------------------------------------------------- */
.product-section { padding: var(--space-4); }

.product-grid,
#products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-image-container {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-tint), #eaf4fb);
    padding: var(--space-3);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.product-card:hover .product-image { transform: scale(1.05); }

.product-details { padding: var(--space-3); }

.product-name {
    font-weight: 600;
    font-size: .98rem;
    color: var(--ink);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.product-price {
    color: var(--jibu-primary);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: var(--space-3);
    display: inline-block;
}

/* Quantity control */
.qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.qty-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--jibu-primary);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.qty-btn:hover { background: var(--jibu-deep); }
.qty-btn:active { transform: scale(.92); }

.qty-input {
    width: 46px;
    text-align: center;
    padding: var(--space-2);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: .95rem;
}

.qty-input:focus {
    outline: none;
    border-color: var(--jibu-primary);
    box-shadow: 0 0 0 2px rgba(var(--jibu-primary-rgb), .2);
}

/* -----------------------------------------------------------------------------
   9. CART SUMMARY (fixed bar)
   --------------------------------------------------------------------------- */
.cart-summary {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    background: var(--surface);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -2px 14px rgba(var(--jibu-deep-rgb), .12);
    z-index: 40;
    display: flex;
    flex-direction: column;
}

.cart-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.cart-items { font-weight: 600; color: var(--ink); font-size: .95rem; }
.cart-total { color: var(--success); font-weight: 700; font-size: 1.05rem; }

.discount-section {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.discount-label { font-weight: 600; color: var(--ink); font-size: .9rem; margin-right: var(--space-2); }

.discount-input {
    width: 64px;
    padding: var(--space-2);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

.discount-btn {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: var(--space-2);
    transition: var(--transition);
}
.discount-btn:hover { background: var(--jibu-deep); }

.discount-note {
    font-size: .72rem;
    color: var(--gray-500);
    font-style: italic;
    flex: 1;
    min-width: 100%;
    margin-top: var(--space-1);
}

.delivery-options {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.delivery-option {
    flex: 1;
    min-width: 84px;
    min-height: var(--tap-target);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: .85rem;
    cursor: pointer;
    transition: var(--transition);
}

.delivery-option:hover { border-color: var(--jibu-accent); }

.delivery-option.active {
    border-color: var(--jibu-primary);
    background: rgba(var(--jibu-primary-rgb), .08);
    color: var(--jibu-deep);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   10. BUTTONS (generic + checkout)
   --------------------------------------------------------------------------- */
.btn {
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary { background: var(--jibu-primary); color: #fff; }
.btn-primary:hover { background: var(--jibu-deep); }
.btn-secondary { background: var(--gray-500); color: #fff; }
.btn-secondary:hover { background: var(--gray-600); }

.checkout-btn,
#checkout-button {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.checkout-btn:hover,
#checkout-button:hover { background: var(--jibu-deep); }

.checkout-btn:disabled,
#checkout-button:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    opacity: .8;
}

.submit-btn {
    background: var(--success);
    color: #fff;
    border: none;
    padding: var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: var(--space-5);
    transition: var(--transition);
}
.submit-btn:hover { background: var(--success-dark); }

.location-btn,
.feedback-btn {
    background: var(--jibu-primary);
    color: #fff;
    border: none;
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.location-btn:hover,
.feedback-btn:hover { background: var(--jibu-deep); }

.new-order-btn,
.view-orders-btn {
    border: none;
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    flex: 1;
    color: #fff;
    transition: var(--transition);
}
.new-order-btn { background: var(--jibu-primary); }
.new-order-btn:hover { background: var(--jibu-deep); }
.view-orders-btn { background: var(--success); }
.view-orders-btn:hover { background: var(--success-dark); }

/* -----------------------------------------------------------------------------
   11. MODALS (overlay/container + .modal/.modal-content aliases)
   --------------------------------------------------------------------------- */
.modal-overlay,
.modal {
    position: fixed;
    inset: 0;
    background: rgba(var(--jibu-deep-rgb), .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.modal-overlay.active,
.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-container,
.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform .3s ease;
}

.modal-overlay.active .modal-container,
.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 5;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title { font-size: 1.2rem; font-weight: 600; color: var(--ink); }

.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gray-500);
    transition: var(--transition);
}
.modal-close:hover { color: var(--ink); background: var(--gray-100); }

.modal-body { padding: var(--space-5); }

/* -----------------------------------------------------------------------------
   12. FORM ELEMENTS
   --------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--ink);
    font-size: .9rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3);
    min-height: var(--tap-target);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--surface-muted);
    transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--jibu-primary);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

.form-textarea { resize: vertical; min-height: 80px; }

.phone-input-container { position: relative; }

.phone-prefix {
    position: absolute;
    left: 12px;
    top: 13px;
    color: var(--gray-500);
    font-weight: 500;
    z-index: 1;
}

.phone-input { padding-left: 55px !important; }

.phone-hint,
.optional-note {
    font-size: .8rem;
    color: var(--gray-500);
    margin-top: var(--space-1);
}
.optional-note { font-style: italic; margin-bottom: var(--space-2); }

.location-methods {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.location-methods select { flex: 1; min-width: 150px; }

.location-warning {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.location-warning svg { width: 18px; height: 18px; flex-shrink: 0; }

.location-suggestions {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
}
.location-suggestion {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
}
.location-suggestion:hover { background: var(--surface-muted); }

/* Discount / optional payment blocks */
.discount-code-section { margin: var(--space-3) 0; }

.optional-payment-section {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-3);
    border: 1px dashed var(--gray-200);
}
.optional-payment-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toggle-optional-payment {
    background: none;
    border: none;
    color: var(--jibu-primary);
    cursor: pointer;
    font-size: .9rem;
}
.optional-payment-content { display: none; }
.optional-payment-content.active { display: block; }

/* -----------------------------------------------------------------------------
   13. MAPS
   --------------------------------------------------------------------------- */
.map-container,
.delivery-map-container {
    margin: var(--space-5) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.map-container { border: 3px solid var(--jibu-primary); }
.delivery-map-container { border: 3px solid var(--success); margin-top: var(--space-4); }

.map-container::before,
.delivery-map-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    z-index: 1;
    pointer-events: none;
}
.map-container::before { background: linear-gradient(to bottom, rgba(var(--jibu-primary-rgb), .9), rgba(var(--jibu-primary-rgb), .7)); }
.delivery-map-container::before { background: linear-gradient(to bottom, rgba(var(--success-rgb), .9), rgba(var(--success-rgb), .7)); }

.map-title,
.delivery-map-title {
    position: absolute;
    top: 9px;
    left: 15px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

#map,
#delivery-map {
    height: 300px;
    width: 100%;
    border-radius: 9px;
    margin-top: 40px;
}

.map-controls,
.delivery-map-controls {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-control-btn,
.delivery-map-control-btn {
    width: 38px;
    height: 38px;
    background: var(--surface);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}
.map-control-btn { color: var(--jibu-primary); }
.delivery-map-control-btn { color: var(--success); }
.map-control-btn:hover { background: var(--jibu-primary); color: #fff; transform: scale(1.1); }
.delivery-map-control-btn:hover { background: var(--success); color: #fff; transform: scale(1.1); }

.address-display {
    background: var(--surface-muted);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: .9rem;
    border-left: 4px solid var(--jibu-primary);
}
.address-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.franchise-info {
    background: linear-gradient(135deg, #ebf8ff, #d4ecfb);
    padding: var(--space-3);
    border-left: 4px solid var(--jibu-primary);
    font-weight: 600;
    color: var(--jibu-deep);
    margin: var(--space-3) 0;
    border-radius: var(--radius-md);
    font-size: .9rem;
}

/* -----------------------------------------------------------------------------
   14. ORDER SUMMARY / PAYMENT
   --------------------------------------------------------------------------- */
.order-summary,
.order-details {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}
.order-details { text-align: left; }

.summary-item,
.order-detail-item {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0;
    font-size: .95rem;
}

.summary-total,
.order-detail-total {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    font-weight: 700;
    font-size: 1.1em;
    color: var(--success);
}
.order-detail-total { border-top-width: 2px; }

.payment-section {
    margin-top: var(--space-5);
    border-top: 1px solid var(--gray-100);
    padding-top: var(--space-5);
}
.payment-options {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.payment-option {
    flex: 1;
    min-width: 100px;
    min-height: var(--tap-target);
    text-align: center;
    padding: var(--space-3);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.payment-option:hover { border-color: var(--jibu-accent); }
.payment-option.active {
    border-color: var(--jibu-primary);
    background: rgba(var(--jibu-primary-rgb), .06);
}
.payment-option i {
    font-size: 1.5rem;
    margin-bottom: var(--space-1);
    display: block;
    color: var(--jibu-primary);
}
.payment-details { margin-top: var(--space-4); display: none; }
.payment-details.active { display: block; }

/* -----------------------------------------------------------------------------
   15. BOTTOM NAVIGATION
   --------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    display: flex;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(var(--jibu-deep-rgb), .10);
    z-index: 50;
}
.nav-btn {
    flex: 1;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    text-align: center;
    border: none;
    background: none;
    font-size: .82rem;
    color: var(--gray-500);
    position: relative;
    cursor: pointer;
    transition: var(--transition);
}
.nav-btn i { display: block; font-size: 1.15rem; margin-bottom: 3px; }
.nav-btn:hover { color: var(--jibu-primary); }
.nav-btn.active { color: var(--jibu-primary); font-weight: 600; }
.nav-btn.active i { color: var(--jibu-primary); }
.nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: var(--jibu-primary);
    border-radius: 3px;
}

/* -----------------------------------------------------------------------------
   16. ORDER HISTORY / ACCOUNT SECTIONS
   --------------------------------------------------------------------------- */
.order-history,
.delivery-tracking,
.account-section { padding: var(--space-4); display: none; }

.order-item,
.delivery-person-info,
.customer-info,
.jibu-info,
.feedback-section {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

.customer-info h3,
.jibu-info h3,
.feedback-section h3 { margin-bottom: var(--space-3); color: var(--jibu-primary); }
.jibu-info p { margin-bottom: var(--space-1); }

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.order-id { font-weight: 700; color: var(--ink); }
.order-status {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 600;
}
.status-delivered { background: #d4edda; color: #155724; }
.status-pending   { background: var(--warning-bg); color: var(--warning-fg); }
.order-total { font-weight: 700; color: var(--success); margin-top: var(--space-1); }

#feedback-text {
    width: 100%;
    min-height: 100px;
    padding: var(--space-3);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    resize: vertical;
    margin-bottom: var(--space-3);
    font-family: inherit;
}
#feedback-text:focus {
    outline: none;
    border-color: var(--jibu-primary);
    box-shadow: 0 0 0 3px rgba(var(--jibu-primary-rgb), .18);
}

/* -----------------------------------------------------------------------------
   17. DELIVERY TRACKING
   --------------------------------------------------------------------------- */
.delivery-status {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: var(--space-5) 0 var(--space-10);
}
.delivery-progress {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gray-200);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--success);
    width: 0%;
    transition: width .5s ease;
}
.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.status-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.status-step.completed .status-icon { background: var(--success); color: #fff; }
.status-label { font-size: .8rem; text-align: center; color: var(--gray-500); }
.status-step.completed .status-label { color: var(--ink); font-weight: 600; }

.delivery-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.time-card {
    background: var(--surface-muted);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.time-label { font-size: .8rem; color: var(--gray-500); margin-bottom: var(--space-1); }
.time-value { font-weight: 600; color: var(--ink); }
.delivery-duration { grid-column: span 2; }

/* Order status visualization */
.order-status-visualization {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
}
.status-progress-bar {
    height: 10px;
    background: var(--gray-100);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.status-progress-fill {
    height: 100%;
    transition: width .5s ease;
    background: var(--success);
}
.status-to-deliver .status-progress-fill { background: var(--jibu-accent); width: 33% !important; }
.status-in-transit .status-progress-fill { background: var(--warning); width: 66% !important; }
.status-delivered .status-progress-fill { background: var(--success); width: 100% !important; }
.status-cancelled .status-progress-fill { background: var(--danger); width: 100% !important; }

.status-labels {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--gray-500);
}
.status-labels .status-label { text-align: center; flex: 1; }
.status-labels .status-label.active { color: var(--gray-800); font-weight: 600; }

.order-timestamps { margin-top: var(--space-3); font-size: .8rem; }
.timestamp { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.timestamp-label { font-weight: 500; }

/* -----------------------------------------------------------------------------
   18. SPINNER / LOADING (skeleton-friendly)
   --------------------------------------------------------------------------- */
.spinner {
    border: 4px solid rgba(var(--jibu-primary-rgb), .15);
    border-top-color: var(--jibu-primary);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    animation: jibu-spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes jibu-spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.loading-text { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }

.location-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jibu-spin 1s linear infinite;
}

/* Skeleton placeholder helper */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
    background-size: 400% 100%;
    animation: jibu-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes jibu-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* -----------------------------------------------------------------------------
   19. SUCCESS MODAL
   --------------------------------------------------------------------------- */
.order-success { text-align: center; padding: var(--space-8) var(--space-5); }
.success-icon {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: var(--space-4);
    animation: jibu-pop .4s ease;
}
.order-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

@keyframes jibu-pop {
    0%   { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* -----------------------------------------------------------------------------
   20. WHATSAPP MODAL
   --------------------------------------------------------------------------- */
.whatsapp-modal {
    position: fixed;
    inset: 0;
    background: rgba(var(--jibu-deep-rgb), .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--space-4);
}
.whatsapp-modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-xl);
}
.whatsapp-buttons {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}
.whatsapp-btn {
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    min-width: 100px;
    color: #fff;
    transition: var(--transition);
}
.whatsapp-yes { background: var(--whatsapp-green); }
.whatsapp-yes:hover { filter: brightness(.95); }
.whatsapp-no { background: var(--gray-500); }
.whatsapp-no:hover { background: var(--gray-600); }

/* -----------------------------------------------------------------------------
   21. STAR RATING / FEEDBACK
   --------------------------------------------------------------------------- */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}
.star {
    font-size: 2rem;
    color: var(--gray-300);
    cursor: pointer;
    padding: 2px;
    transition: color .2s ease, transform .15s ease;
}
.star:hover,
.star:hover ~ .star { color: #f5b301; transform: scale(1.08); }
.star.active { color: #f5b301; }

/* -----------------------------------------------------------------------------
   22. MISC
   --------------------------------------------------------------------------- */
.debug-info {
    background: var(--surface-muted);
    border-left: 4px solid var(--jibu-primary);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: var(--ink);
    max-height: 150px;
    overflow-y: auto;
}

/* -----------------------------------------------------------------------------
   23. RESPONSIVE LAYOUT
   --------------------------------------------------------------------------- */

/* Phones — tighten grid spacing on very small screens */
@media (max-width: 360px) {
    .product-grid,
    #products-grid { gap: var(--space-3); }
}

/* Small tablets */
@media (min-width: 480px) {
    .product-grid,
    #products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .product-grid,
    #products-grid { grid-template-columns: repeat(4, 1fr); }
    .jibu-hero-title { font-size: 1.7rem; }
}

/* Desktop — centered container, auto-fill product grid */
@media (min-width: 992px) {
    .container {
        max-width: var(--container-max);
        box-shadow: 0 0 40px rgba(var(--jibu-deep-rgb), .08);
    }
    .cart-summary {
        max-width: var(--container-max);
        margin: 0 auto;
    }
    .product-grid,
    #products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
    .product-card { margin: 0 !important; }
    .product-image-container { height: 170px; }

    .jibu-hero { min-height: 260px; }
    .jibu-hero-title { font-size: 2rem; }
    .jibu-logo { height: 52px; }
}

/* Wide desktop */
@media (min-width: 1400px) {
    .container { max-width: var(--container-max-xl); }
    .cart-summary { max-width: var(--container-max-xl); }
}

/* -----------------------------------------------------------------------------
   24. MOTION PREFERENCES
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   REDESIGN THEME — "Water & Sun: your neighbourhood station"  (v=test2)
   Appended override layer. Equal/raised specificity → wins via cascade order.
   Grounded in Jibu's world: clean water (cool depth) + a better life (warm sun).
   Spends its boldness on ONE signature: the hero "water line" pour.
   ============================================================================= */
:root {
    /* Water & Sun palette */
    --water-deep:   #06324F;   /* deep clean water — hero ink            */
    --water:        #0E6BA8;   /* true Jibu blue — primary structure     */
    --water-rgb:    14, 107, 168;
    --water-bright: #36C5E0;   /* fresh spring cyan — the "fill" accent   */
    --sun:          #F4A92C;   /* warm amber — forward actions / optimism */
    --sun-deep:     #E08A12;
    --sun-rgb:      244, 169, 44;
    --paper:        #EAF4F6;   /* cool water-tint page                    */
    --ink:          #082A40;

    /* Re-point the legacy brand tokens so existing rules inherit the new mood */
    --jibu-primary:     #0E6BA8;
    --jibu-primary-rgb: 14, 107, 168;
    --jibu-deep:        #06324F;
    --jibu-accent:      #36C5E0;
    --jibu-page-bg:     #EAF4F6;
    --ink:              #082A40;

    --font-display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

body { background: var(--paper); color: var(--ink); font-family: var(--font-body); }

/* ---- Display type: characterful, tighter, confident ---------------------- */
.jibu-hero-title, .order-success h2, .modal-body h3, .account-section h3,
.product-name, .summary-total, h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

/* -----------------------------------------------------------------------------
   SIGNATURE — the hero pours into the page over a water line
   --------------------------------------------------------------------------- */
.jibu-hero {
    background:
        radial-gradient(120% 90% at 80% -10%, rgba(54,197,224,.55) 0%, rgba(54,197,224,0) 55%),
        linear-gradient(160deg, var(--water) 0%, var(--water-deep) 100%) !important;
    position: relative;
    padding-bottom: 56px;     /* room for the wave */
    overflow: hidden;
}
/* faint caustic shimmer — ambient, slow, reduced-motion-safe */
.jibu-hero::before {
    content: "";
    position: absolute; inset: -40% -10% auto -10%; height: 140%;
    background: radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.12), transparent 60%);
    pointer-events: none;
}
/* the water line: a wave the page colour rises into */
.jibu-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
    background: var(--paper);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 22 C 180 2 300 2 480 18 C 680 36 760 40 960 22 C 1080 11 1140 11 1200 18 L1200 46 Z'/%3E%3C/svg%3E") bottom/100% 46px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 22 C 180 2 300 2 480 18 C 680 36 760 40 960 22 C 1080 11 1140 11 1200 18 L1200 46 Z'/%3E%3C/svg%3E") bottom/100% 46px no-repeat;
}
.jibu-hero-content { position: relative; z-index: 2; }
.jibu-hero-overlay { background: transparent !important; }
.jibu-hero-title { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.jibu-hero-tag   { opacity: .92; }

/* eyebrow that states the locality thesis, injected before the title via CSS */
.jibu-hero-title::before {
    content: "Your neighbourhood water station";
    display: block;
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--water-bright);
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   Forward actions wear the sun — ordering is an inviting, warm act
   --------------------------------------------------------------------------- */
body .checkout-btn, body .btn-primary, body .new-order-btn,
body .add-to-cart-btn, body .feedback-btn {
    background: linear-gradient(160deg, var(--sun) 0%, var(--sun-deep) 100%) !important;
    color: #3a2400 !important;
    box-shadow: 0 6px 16px rgba(var(--sun-rgb), .34) !important;
    font-family: var(--font-display); font-weight: 700;
}
body .checkout-btn:hover, body .btn-primary:hover,
body .new-order-btn:hover, body .feedback-btn:hover {
    background: var(--sun-deep) !important; transform: translateY(-1px);
}
/* final confirm stays "go" green; structure buttons stay water-blue */
body .submit-btn { background: linear-gradient(160deg,#1aa85d,#15924f) !important; color:#fff !important; font-family: var(--font-display); }

/* -----------------------------------------------------------------------------
   Cards: clean, tactile, water-tint lift
   --------------------------------------------------------------------------- */
.product-card {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(8,42,64,.05);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.product-card:hover, .product-card:focus-within {
    border-color: var(--water-bright);
    box-shadow: 0 10px 26px rgba(var(--water-rgb), .16);
    transform: translateY(-3px);
}
.product-price, .summary-total, .time-value { color: var(--water-deep); font-family: var(--font-display); font-weight: 700; }

/* -----------------------------------------------------------------------------
   Bottom nav: the active tab is marked by a sun line (accent echo)
   --------------------------------------------------------------------------- */
.nav-btn.active { color: var(--water-deep); }
.nav-btn.active i { color: var(--water); }
.nav-btn.active::after { background: var(--sun) !important; height: 3px; border-radius: 3px; }

/* price pills: active reads as a clear, bright water chip */
.price-option.active { background: rgba(255,255,255,.96); color: var(--water-deep); }

/* gentle section rhythm — a faint water-line divider, not a hard rule */
.product-section + .product-section { border-top: 1px dashed var(--gray-200); }

@media (prefers-reduced-motion: reduce) {
    .jibu-hero::before { animation: none; }
    body .checkout-btn:hover, body .btn-primary:hover { transform: none; }
}

/* =============================================================================
   APP-VIBES LAYER (v=test3) — native-feeling checkout, fields, controls.
   Appended last → wins on shared external rules; body-prefixed where it must
   beat the page's inline <style> (nav). Mobile-first; sheet scoped to phones.
   ============================================================================= */

/* ---- App-style form fields: taller, filled, calm, thumb-friendly ---------- */
.form-group { margin-bottom: 18px; }
.form-label {
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    color: var(--gray-600); margin-bottom: 7px; text-transform: none;
}
.form-input, .form-select, .form-textarea {
    min-height: 54px; padding: 15px 16px;
    border: 1.5px solid var(--gray-200); border-radius: 14px;
    background: var(--surface-muted); font-size: 1rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--water); background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--water-rgb), .14);
}
.phone-prefix { top: 17px; font-weight: 600; color: var(--water-deep); }

/* ---- Segmented control: the price toggle reads as a native segmented bar --- */
.price-list-toggle {
    display: inline-flex; gap: 4px; padding: 4px;
    background: rgba(255,255,255,.22); border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.price-option {
    flex: 1; text-align: center; padding: 9px 18px; border-radius: 999px;
    font-weight: 600; font-size: .85rem; color: #fff; transition: all .18s;
}
.price-option.active {
    background: #fff; color: var(--water-deep);
    box-shadow: 0 2px 8px rgba(6,50,79,.18);
}

/* ---- Checkout becomes a bottom sheet (phones) with a drag handle ----------- */
@media (max-width: 640px) {
    .modal-overlay, .modal { align-items: flex-end; padding: 0; }
    .modal-container, .modal-content {
        max-width: 100%; width: 100%; max-height: 94vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        padding-top: 10px;
    }
    .modal-overlay.active .modal-container,
    .modal.active .modal-content { transform: translateY(0); }
    /* grab handle */
    .modal-container::before, .modal-content::before {
        content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 8px;
        background: var(--gray-300); border-radius: 999px;
    }
    .modal-header { border-radius: 24px 24px 0 0; }
}

/* ---- Sticky "Place Order" bar at the foot of the sheet -------------------- */
.modal-body { padding-bottom: 92px; }   /* clear the sticky bar */
body .submit-btn {
    position: sticky; bottom: 0; z-index: 6;
    width: 100%; min-height: 56px; margin-top: 8px;
    border-radius: 16px; font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 -8px 18px rgba(255,255,255,.9), 0 8px 20px rgba(26,168,93,.28);
}
/* a soft fade so content scrolls "under" the sticky bar */
.modal-body form { position: relative; }

/* ---- Cart checkout CTA: big, confident, amber (the inviting action) -------- */
body #checkout-button { min-height: 56px; border-radius: 16px; font-size: 1.05rem; }

/* ---- Bottom nav: taller, calmer, safe-area aware -------------------------- */
body .bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--gray-200), 0 -6px 20px rgba(6,50,79,.06);
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body .nav-btn { min-height: 58px; font-size: .68rem; letter-spacing: .01em; }
body .nav-btn i { font-size: 1.25rem; margin-bottom: 4px; }

/* ---- A touch more rhythm in the product grid ----------------------------- */
.product-grid { gap: 14px; }
.product-card { padding: 14px; }

/* ---- Generic primary buttons: rounder, larger hit area ------------------- */
.btn { min-height: 50px; border-radius: 14px; }

/* =============================================================================
   BRAND REALIGN (v=test4) — Jibu's main colour is BLUE. Drop amber entirely;
   forward actions wear brand blue. Display face back to Poppins (brand-safe).
   Keeps the modern app layout (bottom sheet, segmented control, spacing).
   ============================================================================= */
:root {
    --font-display: 'Poppins', system-ui, sans-serif;
    /* repoint the warm tokens to brand blue → every amber usage becomes blue */
    --sun:      #1660B0;
    --sun-deep: #0D4280;
    --sun-rgb:  22, 96, 176;
}

/* forward CTAs: brand blue, white text (override the old amber dark text) */
body .checkout-btn, body .btn-primary, body .new-order-btn,
body .add-to-cart-btn, body .feedback-btn, body #checkout-button {
    background: linear-gradient(160deg, #1660B0 0%, #0D4280 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(22, 96, 176, .30) !important;
}
body .checkout-btn:hover, body .btn-primary:hover,
body .new-order-btn:hover, body .feedback-btn:hover { background: #0D4280 !important; }

/* active bottom-nav marker → bright water cyan (blue family, not amber) */
.nav-btn.active::after { background: var(--water-bright) !important; }

/* -----------------------------------------------------------------------------
   Pricing selector — labelled + tidy, so it reads as a clear pricing context
   --------------------------------------------------------------------------- */
.price-list-label {
    margin: 14px 0 7px;
    font-family: var(--font-body);
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.82); text-align: center;
}
.price-list-toggle { width: 100%; }
.price-option { font-size: .8rem; padding: 9px 8px; }
.price-option.active { color: #0D4280; }

/* =============================================================================
   COMPACT HEADER (v=test5) — this is an ordering app, not a landing page.
   Drop the marketing headline/tagline so the pricing selector + products sit
   near the top and the first tap is the order, not a read. Reversible.
   ============================================================================= */
.jibu-hero { padding-top: 14px; padding-bottom: 50px; }
.jibu-hero-title, .jibu-hero-tag { display: none; }   /* removes headline + eyebrow + tagline */
.jibu-logo { height: 34px; margin-bottom: 2px; }
.price-list-label { margin-top: 12px; }

/* =============================================================================
   PHONE-FIRST CHECKOUT (v=test6) — returning-customer greeting + name reveal.
   ============================================================================= */
.customer-greeting {
    margin-top: 10px; padding: 11px 14px; border-radius: 12px;
    background: rgba(22, 96, 176, .09); color: var(--water-deep);
    font-weight: 600; font-size: .92rem; line-height: 1.3;
}
#name-group { animation: jibuFade .18s ease; }
@keyframes jibuFade { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #name-group { animation: none; } }


/* ===== CART PANEL LAYOUT (persistent, responsive cart) ===== */
.cart-lines { display: none; }
#cart-summary.expanded .cart-lines { display: block; max-height: 40vh; overflow-y: auto; }
.cart-info { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cart-info .cart-total { margin-left: auto; }
.cart-toggle { background: none; border: none; color: inherit; font-size: 1rem; cursor: pointer; padding: 4px; transition: transform .15s ease; }
#cart-summary.expanded .cart-toggle { transform: rotate(180deg); }
.cart-line { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.cart-line-name { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-qty { display: flex; align-items: center; gap: 6px; }
.cart-line-q { min-width: 18px; text-align: center; font-weight: 600; }
.cart-line-total { min-width: 64px; text-align: right; font-weight: 600; font-size: .9rem; }
.cart-line-x { background: none; border: none; color: #b00020; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cart-empty { padding: 10px 0; color: var(--gray, #888); font-size: .9rem; }

@media (min-width: 900px) {
    .catalog-layout { display: flex; align-items: flex-start; gap: 20px; }
    .catalog-layout #products-section { flex: 1 1 auto; min-width: 0; }
    #cart-summary.cart-summary {
        position: sticky; top: 84px; bottom: auto; left: auto; right: auto;
        width: 340px; flex: 0 0 340px; margin: 0;
        max-height: calc(100vh - 100px); overflow-y: auto;
    }
    #cart-summary .cart-lines, #cart-summary.expanded .cart-lines { display: block; max-height: none; }
    .cart-toggle { display: none; }
}


/* ===== CART FULLSCREEN (mobile) + richer line cards ===== */
.cart-line { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.cart-line-img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 46px; }
.cart-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-line-name { white-space: normal; font-size: .92rem; }
.cart-line-price { font-size: .8rem; color: var(--gray, #777); }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-line-total { min-width: auto; }
.cart-line-x { background: none; border: none; color: #b00020; font-size: .8rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }

.cart-panel-title { display: none; }
.cart-bar-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
body.cart-open { overflow: hidden; }

/* Mobile: collapsed = slim trigger bar; expanded = full-screen cart page */
@media (max-width: 899.98px) {
    #cart-summary .cart-lines,
    #cart-summary .delivery-options,
    #cart-summary .checkout-btn { display: none; }
    #cart-summary.expanded {
        position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0;
        width: auto; height: 100%; max-height: 100%;
        margin: 0; border-radius: 0; z-index: 1200;
        display: flex; flex-direction: column; overflow: hidden;
        background: var(--surface, #fff);
    }
    #cart-summary.expanded .cart-info {
        position: sticky; top: 0; padding: 16px;
        border-bottom: 1px solid rgba(0,0,0,.1); background: var(--surface, #fff);
    }
    #cart-summary.expanded .cart-bar-label { display: none; }
    #cart-summary.expanded .cart-panel-title { display: inline; font-size: 1.15rem; font-weight: 700; }
    #cart-summary.expanded .cart-lines {
        display: block; flex: 1 1 auto; max-height: none; overflow-y: auto; padding: 0 16px;
    }
    #cart-summary.expanded .delivery-options { display: block; padding: 12px 16px; }
    #cart-summary.expanded .checkout-btn {
        display: block; margin: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }
}

/* Desktop: side panel shows a title, not the mobile trigger label */
@media (min-width: 900px) {
    .cart-bar-label { display: none; }
    .cart-panel-title { display: inline; font-weight: 700; font-size: 1.05rem; }
    .cart-info { cursor: default; }
}


/* ===== CHECKOUT WIZARD (guided 3-step) ===== */
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: wzfade .25s ease both; }
@keyframes wzfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wizard-step.active { animation: none; } }
.wizard-progress { margin: 2px 0 22px; }
.wizard-track { position: relative; height: 4px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.wizard-fill { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--jibu-accent, #4DAEE3), var(--jibu-primary, #1660B0));
    transition: width .35s cubic-bezier(.4,0,.2,1); }
.wizard-steps-nav { list-style: none; display: flex; justify-content: space-between; margin: 12px 0 0; padding: 0; }
.wzn { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; font-size: .78rem; color: var(--gray, #8a94a6); }
.wzn-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff;
    border: 2px solid rgba(0,0,0,.15); color: var(--gray, #8a94a6); font-weight: 700; font-size: .8rem; transition: all .2s ease; }
.wzn.active .wzn-dot { border-color: var(--jibu-primary, #1660B0); color: var(--jibu-primary, #1660B0); }
.wzn.active .wzn-label { color: var(--jibu-primary, #1660B0); font-weight: 600; }
.wzn.done .wzn-dot { background: var(--jibu-primary, #1660B0); border-color: var(--jibu-primary, #1660B0); color: #fff; }
.wizard-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.wizard-nav .wizard-next, .wizard-nav .wizard-submit { margin-left: auto; }
.wizard-nav .submit-btn { width: auto; }
#order-form[data-step="1"] .wizard-back { display: none; }
#order-form[data-step="3"] .wizard-next { display: none; }
.wizard-submit { display: none; }
#order-form[data-step="3"] .wizard-submit { display: inline-flex; }
.wizard-error { color: #b00020; background: rgba(176,0,32,.08); border: 1px solid rgba(176,0,32,.25);
    border-radius: 8px; padding: 8px 12px; font-size: .85rem; margin-top: 14px; }


/* ===== CONTINUE SHOPPING (in-cart browse action) ===== */
.cart-continue {
    display: none; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 10px 0 4px; padding: 10px 14px;
    background: transparent; color: var(--jibu-primary, #1660B0);
    border: 1px solid var(--jibu-primary, #1660B0); border-radius: 999px;
    font-weight: 600; font-size: .95rem; cursor: pointer;
}
#cart-summary.expanded .cart-continue { display: flex; }
@media (min-width: 900px) { .cart-continue { display: flex; } }


/* ===== ADD TO CART CARD + tap-to-add ===== */
.product-card { cursor: pointer; }
.add-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 8px; padding: 9px 12px;
    background: var(--jibu-primary, #1660B0); color: #fff; border: none;
    border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.product-card[data-has="0"] .qty-control { display: none; }
.product-card[data-has="1"] .add-btn { display: none; }
/* top "View all products" is the prominent (filled) action */
.cart-viewall { background: var(--jibu-primary, #1660B0); color: #fff; border-color: var(--jibu-primary, #1660B0); }


/* ===== SEGMENT PICKER (who are you ordering for) ===== */
.segment-pick { margin: 18px 0 4px; }
.segment-pick-head { text-align: center; margin-bottom: 12px; }
.segment-pick-title { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.08rem; color: #fff; }
.segment-pick-sub { display: block; font-size: .82rem; color: rgba(255,255,255,.85); margin-top: 3px; }
.segment-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.segment-cards .price-option {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 8px; min-height: 100px; border-radius: 16px; cursor: pointer;
    background: rgba(255,255,255,.96); color: var(--jibu-deep, #0D4280);
    border: 2px solid transparent; box-shadow: 0 4px 14px rgba(0,0,0,.12);
    position: relative; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.segment-cards .price-option:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.segment-cards .seg-ic { font-size: 1.5rem; color: var(--jibu-primary, #1660B0); }
.segment-cards .seg-name { font-weight: 700; font-size: .95rem; }
.segment-cards .seg-desc { font-size: .72rem; opacity: .7; line-height: 1.15; }
.segment-cards .price-option.active {
    background: linear-gradient(160deg, var(--jibu-accent, #4DAEE3), var(--jibu-primary, #1660B0));
    color: #fff; border-color: #fff;
    box-shadow: 0 8px 22px rgba(var(--jibu-primary-rgb, 22, 96, 176), .45);
}
.segment-cards .price-option.active .seg-ic { color: #fff; }
.segment-cards .price-option.active .seg-desc { opacity: .9; }
.segment-cards .price-option.active::after {
    content: "✓"; position: absolute; top: 7px; right: 10px;
    font-size: .85rem; font-weight: 700; color: #fff;
}
@media (max-width: 360px) { .segment-cards .seg-desc { display: none; } }

/* reseller code prompt as an inline card under the segment cards */
#reseller-code-section {
    background: rgba(255,255,255,.96); color: var(--jibu-deep, #0D4280);
    border-radius: 14px; padding: 14px; margin-top: 12px; text-align: center;
}
#reseller-code-section p { margin: 0 0 8px; font-weight: 600; }
#reseller-code-section input {
    padding: 10px 12px; border-radius: 10px; border: 1px solid #cbd5e1;
    width: 100%; max-width: 240px;
}
#reseller-code-section button { margin-top: 10px; }

/* =====================================================================
   ESHOP RESKIN  —  make the storefront look like the old jibuco.com shop
   (jibuco.com/old-site/shop). Appended at the END so these rules win over
   the earlier :root blocks and the "water & sun" theme. Palette + fonts +
   clean white product cards. No structural/behaviour changes.
   ===================================================================== */

/* ---- 1. Brand tokens: Jibu blue on white, Cabin/Roboto ---- */
:root{
  --jibu-primary:      #005499;
  --jibu-primary-rgb:  0, 84, 153;
  --jibu-deep:         #013a63;
  --jibu-accent:       #e8d833;
  --jibu-accent-rgb:   232, 216, 51;
  --jibu-page-bg:      #ffffff;
  --ink:               #26313a;

  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cabin', 'Roboto', system-ui, sans-serif;

  /* re-point the in-progress "water & sun" theme tokens to the eshop palette */
  --water:        #005499;
  --water-rgb:    0, 84, 153;
  --water-deep:   #013a63;
  --water-bright: #2f9fd6;
  --sun:          #e8d833;
  --sun-deep:     #cbb800;
  --sun-rgb:      232, 216, 51;
  --paper:        #ffffff;

  --primary:      #005499;
  --primary-dark: #013a63;
  --accent:       #e8d833;
  --bg-light-blue:#ffffff;
}

/* clean white page like the old shop (was a light-blue wash) */
body{ background:#ffffff; }

/* ---- 2. Header: slim, flat Jibu-blue bar like the old shop (logo left) ---- */
.jibu-hero{
  min-height:0 !important;
  padding:0 !important;
  background:#005499 !important;
  background-image:none !important;
  text-align:left !important;
  box-shadow:0 2px 8px rgba(1,42,74,.18);
}
.jibu-hero-overlay{ display:none !important; background:none !important; }
.jibu-hero-content{
  max-width:1200px; margin:0 auto;
  padding:13px 16px !important;
  text-align:left !important;
}
/* logo left on a level bar (no bottom margin that knocked it out of line) */
.jibu-logo{
  height:44px !important;
  width:auto;
  margin:0 !important;
  display:block !important;
  filter:none !important;
}
.jibu-hero-title, .jibu-hero-tag{ display:none !important; }
/* Kenya request: show the 3-card "who are you ordering for" group picker again
   (visible, so the customer knows exactly which group/pricing they're on) — and
   drop the compact "Ordering as" dropdown that had replaced it. The dropdown is
   only hidden (kept in the DOM so its harmless JS mirror still resolves), while
   the segment cards drive the price list via their own click handlers. */
.segment-pick{ display:block !important; }
.shop-head .ordering-as{ display:none !important; }

/* compact "Ordering as [dropdown]" control on the blue bar */
.ordering-as{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.ordering-as label{ color:#eaf3fb; font-size:.85rem; font-weight:500; }
#pricelist-dd{
  font-family:var(--font-body); font-size:.9rem; font-weight:600; color:#26313a;
  background:#fff; border:1px solid rgba(255,255,255,.55); border-radius:8px;
  padding:7px 12px; cursor:pointer; min-width:160px;
}
#pricelist-dd:focus-visible{ outline:3px solid var(--jibu-accent); outline-offset:2px; }

/* ---- "Shop" header row above the grid: title left, dropdown right
        (mirrors the old shop's page-title + sort-dropdown row) ---- */
.shop-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid #e7ebef;
  flex-wrap:wrap;
}
.shop-title{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:1.7rem; color:#005499;
}
/* the dropdown now sits on white in the shop row (not on the blue bar) */
.shop-head .ordering-as label{ color:#5b7688 !important; }

/* ---- 3. Product grid: 4 columns like the old shop ---- */
.product-grid{
  grid-template-columns:repeat(4, 1fr) !important;
  gap:26px !important;
}
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(3, 1fr) !important; } }
@media (max-width:680px){  .product-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:16px !important; } }

/* ---- 4. Product card: minimalist Salient-classic — image on white,
        centered title, centered price, no heavy chrome ---- */
.product-card{
  background:#ffffff;
  border:none !important;
  border-radius:8px;
  overflow:hidden;
  box-shadow:none !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  box-shadow:0 16px 32px -20px rgba(1,42,74,.45) !important;
  transform:translateY(-4px);
}
.product-image-container{
  background:#ffffff !important;
  border-bottom:none !important;
  height:210px !important;
  padding:8px !important;
}
.product-details{
  text-align:center !important;
  padding:12px 8px 16px !important;
}
.product-name{
  font-family:var(--font-display);
  color:#26313a;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:0;
}
.product-price{
  color:#005499;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  margin-top:4px;
}

/* ---- 5. Buttons in the eshop blue ---- */
.add-btn{
  background:#005499;
  color:#fff;
  border:none;
}
.add-btn:hover{ background:#013a63; }
.qty-btn{ background:#005499 !important; }
.btn-primary,
.checkout-btn{
  background:linear-gradient(160deg,#005499 0%, #013a63 100%) !important;
  box-shadow:0 6px 16px rgba(0,84,153,.30) !important;
  color:#fff !important;
}

/* =====================================================================
   BORROWED FROM OLD ESHOP: add-to-cart feedback, header cart badge,
   and a clean billing-style details form.
   ===================================================================== */

/* --- header cart icon + live count badge (top-right of the blue bar) --- */
.jibu-hero{ position:relative; }
.hdr-cart{
  position:absolute; top:50%; transform:translateY(-50%); right:16px; z-index:5;
  background:transparent; border:none; color:#fff; cursor:pointer;
  font-size:1.35rem; line-height:1; padding:6px;
}
.hdr-cart:focus-visible{ outline:3px solid var(--jibu-accent); outline-offset:2px; border-radius:6px; }
.hdr-cart-badge{
  position:absolute; top:-3px; right:-7px; min-width:18px; height:18px; padding:0 5px;
  background:var(--jibu-accent); color:#3a3300; font-family:var(--font-body);
  font-size:.7rem; font-weight:800; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
}
.hdr-cart-badge.zero{ display:none; }

/* --- "Added to cart" confirmation toast --- */
.added-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(18px);
  background:#0a8a3f; color:#fff; font-family:var(--font-display); font-weight:700;
  padding:12px 22px; border-radius:999px; box-shadow:0 12px 30px rgba(1,42,74,.32);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:99999;
}
.added-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){ .added-toast{ transition:none; } }

/* --- clean billing-style details form (old checkout look) --- */
#order-form .wizard-step h3{ font-family:var(--font-display); color:#005499; font-weight:700; }
#order-form .form-label{ color:#26313a; font-weight:600; }
#order-form .form-input, #order-form .form-select{
  border:1px solid #cbd5e1; border-radius:9px; padding:11px 13px;
  font-family:var(--font-body); font-size:.95rem; width:100%; background:#fff;
}
#order-form .form-input:focus, #order-form .form-select:focus{
  border-color:#005499; outline:none; box-shadow:0 0 0 3px rgba(0,84,153,.15);
}
/* name + phone side-by-side like the old billing form */
.form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:560px){ .form-row2{ grid-template-columns:1fr; } }
/* Name + Phone side-by-side on the details step (no markup change) */
#order-form .wizard-step.active[data-step="1"]{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
#order-form .wizard-step.active[data-step="1"] > h3{ grid-column:1 / -1; margin-bottom:14px; }
@media (max-width:560px){ #order-form .wizard-step.active[data-step="1"]{ grid-template-columns:1fr; } }

/* Keep the cart on the side, make it a bit bigger, and always show the
   selected items in it immediately (desktop side panel). */
@media (min-width:900px){
  #cart-summary.cart-summary{ width:400px !important; flex:0 0 400px !important; }
  #cart-summary:not(.hidden) .cart-lines{ display:block !important; }
}
.cart-line-img{ width:52px !important; height:52px !important; flex:0 0 52px !important; }
.cart-line-name{ font-size:.98rem !important; }
.cart-line-price{ font-size:.85rem !important; }
.cart-line-total{ font-size:1rem !important; font-weight:700; }

/* Deep-link: highlight the selected variant(s) on top, and a full-width
   "More products" divider before the rest. */
.product-card.is-featured{
  box-shadow:0 0 0 2px #005499 inset, 0 12px 26px -16px rgba(1,42,74,.45) !important;
  border-radius:10px;
}
.more-divider{
  grid-column:1 / -1; margin:6px 0 2px; padding-top:16px;
  border-top:1px solid #e7ebef;
  font-family:var(--font-display); font-weight:700; color:#5b7688;
  font-size:.9rem; text-transform:uppercase; letter-spacing:.08em;
}

/* ---- Social links + always-visible page footer (ported from UG) ---- */
.eshop-social { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.eshop-social .eshop-social-label { font-family:'Open Sans',sans-serif; font-size:13px; font-weight:600; color:#5a6a82; }
.eshop-social .eshop-social-icons { display:flex; gap:10px; }
.eshop-social a {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#005499; color:#fff !important; -webkit-text-fill-color:#fff;
  text-decoration:none; font-size:17px; line-height:1;
  transition:background .15s ease, transform .15s ease;
}
.eshop-social a:hover { background:#003a68; transform:translateY(-2px); }
.eshop-social a:focus-visible { outline:2px solid #1aa85d; outline-offset:2px; }
.eshop-footer {
  margin:26px 0 96px; padding:20px 16px 4px;
  border-top:1px solid #e5ebf2; text-align:center;
}
.eshop-social.eshop-social--footer { justify-content:center; margin-top:0; padding-top:0; border-top:none; }
.eshop-footer .eshop-footer-tag { margin:14px 0 0; font-family:'Open Sans',sans-serif; font-size:12px; color:#8a97a8; }


/* ===== Kenya only: hide the delivery map + served-by franchise card from the
   customer. The customer enters a manual address; geocodeAddress() ->
   findNearestFranchise() still writes #nearest-franchise dataset (read by
   place_order), so franchise routing to POS/delivery is unchanged. Only
   customer care (dashboard) sees/reassigns the franchise. ===== */
.map-container{display:none!important;}
#nearest-franchise{display:none!important;}

/* ===== Readable form inputs (fix 2026-07-03): the typed text/digits were
   low-contrast — on dark-mode phones the browser flipped field text to a light
   colour while our input background stayed light, so digits read light-on-light
   ("hidden"). No rule set an input text colour. Force light colour-scheme +
   explicit dark text + readable placeholder on every storefront input. ===== */
.form-input, .form-select, .form-textarea,
#order-form .form-input, #order-form .form-select,
.phone-input, #reseller-code-input, #discount-code-input,
.qty-input, .discount-input, #manual-location, #promo-code-input {
  color: #142e44 !important;
  -webkit-text-fill-color: #142e44 !important;   /* iOS Safari honours this over color */
  color-scheme: light;                            /* stop dark-mode UA flipping field colours */
  background-color: #fff !important;
  caret-color: #005499;
}
.form-input::placeholder, .form-textarea::placeholder, .form-select::placeholder,
.phone-input::placeholder, #manual-location::placeholder, #reseller-code-input::placeholder {
  color: #8a97a8 !important;
  -webkit-text-fill-color: #8a97a8 !important;
  opacity: 1;
}

/* =====================================================================
   HEADER RE-ALIGNED TO THE UGANDA LOOK (2026-07-07)
   Slim blue top-bar: logo left, "Shop" right. Price-list as light pills
   below the bar (relocated out of the blue header). Supersedes the
   .jibu-hero slim-restyle + .shop-head dropdown row.
   ===================================================================== */
.jibu-hero.eshop-topbar{
  display:flex !important; flex-direction:row !important; align-items:center; gap:14px;
  min-height:0 !important; padding:12px 18px !important;
  background:#005499 !important; background-image:none !important;
  box-shadow:0 2px 8px rgba(1,42,74,.14); text-align:left !important;
}
.jibu-hero.eshop-topbar .jibu-logo{
  height:40px !important; width:auto; margin:0 !important; display:block !important; filter:none !important;
}
.eshop-shop-title{
  margin-left:16px;
  font-family:'Cabin', var(--font-display), sans-serif;
  color:#fff !important; -webkit-text-fill-color:#fff;
  font-size:20px; font-weight:600; letter-spacing:.5px;
}
/* light "I'm ordering as" pill row below the bar */
.eshop-orderas{ padding:14px 4px 2px; }
.eshop-orderas .price-list-label{
  font-family:'Open Sans', var(--font-body), sans-serif;
  font-size:13px; color:#5a6a82; margin:0 0 8px 2px; font-weight:600;
}
.eshop-orderas .price-list-toggle{
  display:flex !important; flex-direction:row !important; gap:10px; flex-wrap:wrap;
  background:transparent !important; padding:0 !important; border:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  grid-template-columns:none !important; box-shadow:none !important;
}
.eshop-orderas .price-option{
  display:inline-flex !important; align-items:center; gap:8px;
  width:auto !important; min-width:0 !important; flex:0 0 auto !important;
  background:#eef3f8 !important; color:#005499 !important; -webkit-text-fill-color:#005499;
  border:1px solid #dbe6f0 !important; border-radius:999px !important;
  padding:9px 16px !important; margin:0 !important; cursor:pointer;
  box-shadow:none !important; text-align:left; flex-direction:row !important;
}
.eshop-orderas .price-option .seg-ic{ display:none !important; }
.eshop-orderas .price-option .seg-name{ font-weight:600; font-size:14px; margin:0 !important; }
.eshop-orderas .price-option .seg-desc{ display:none !important; }
.eshop-orderas .price-option:hover{ background:rgba(0,84,153,.10) !important; }
.eshop-orderas .price-option.active{
  background:#005499 !important; color:#fff !important; -webkit-text-fill-color:#fff;
  border-color:#005499 !important;
}
.eshop-orderas .price-option.active .seg-name,
.eshop-orderas .price-option.active .seg-ic{ color:#fff !important; -webkit-text-fill-color:#fff; }
/* reseller code block sits under the pills */
.eshop-orderas #reseller-code-section{ margin-top:12px; }
/* the old dropdown row is gone from markup; belt-and-suspenders */
.shop-head{ display:none !important; }

/* social icons in the blue top-bar (white glyphs, no circle), pushed right */
.eshop-social--bar{ display:flex; align-items:center; gap:15px; margin-left:auto; }
.eshop-social--bar a{
  width:auto !important; height:auto !important; padding:0 !important;
  background:transparent !important; border-radius:0 !important;
  color:#fff !important; -webkit-text-fill-color:#fff; font-size:17px; line-height:1;
  transition:opacity .15s ease, transform .15s ease;
}
.eshop-social--bar a:hover{ background:transparent !important; opacity:.82; transform:translateY(-1px); }
@media (max-width:520px){
  .eshop-social--bar{ gap:12px; }
  .eshop-social--bar a{ font-size:15px; }
  .eshop-shop-title{ font-size:17px; margin-left:12px; }
}

/* === SOCIAL-FAR-RIGHT-OVERRIDE (2026-07-07) ===
   Social icons to the far upper-right corner (old-website top-bar look);
   'Shop' title stays legible just left of them. Higher specificity than the
   base + mobile rules so it wins in both. */
.jibu-hero.eshop-topbar .eshop-shop-title{ margin-left:auto !important; }
.jibu-hero.eshop-topbar .eshop-social--bar{ margin-left:14px !important; }

/* === STRAIGHT-HEADER-OVERRIDE (2026-07-07) ===
   Flat, straight-edged top bar exactly like Uganda's .eshop-topbar:
   kill the water-wave (::after mask) + shimmer (::before), the extra
   bottom padding, and the drop shadow. */
.jibu-hero.eshop-topbar::before,
.jibu-hero.eshop-topbar::after{ content:none !important; display:none !important; }
.jibu-hero.eshop-topbar{
  padding:12px 18px !important; margin:0 0 2px 0 !important;
  overflow:visible !important; min-height:0 !important;
  box-shadow:none !important;
}
