/* =============================================================================
   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; }
/* Declutter: hide the big 3-card "who are you ordering for" picker (kept in the
   DOM so the existing price-list JS still works), replaced by a small dropdown. */
.segment-pick{ 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; }

/* =====================================================================
   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;
}
