/* =========================================================================
   GLOBAL RESET
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f5f5;
    color: #222;

    /* 🔧 DESKTOP BASE SCALE (STEP 1) */
    font-size: 15px;      /* was 16px */
    line-height: 1.35;   /* was 1.45 */
}



/* =========================================================================
   PREMIUM BOLD HEADER
   ========================================================================= */
.je-header {
    background: #ffffff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 50;

    /* 🔻 REDUCE VERTICAL HEIGHT */
    padding: 6px 0;
}

.je-header-inner {
    max-width: 2000px;
    margin: 0 auto;
    padding: 4px 6px;   /* 🔻 was 18px 24px */
    display: flex;
    align-items: center;
    gap: 14px;            /* 🔻 was 24px */
}

.je-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bigger, premium logo circle */
.je-logo-circle {
    width: 48px;     /* 🔻 was 60 */
    height: 48px;    /* 🔻 was 60 */
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #D4AF37;
}


.je-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Restaurant name */
.je-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #222;
}

/* Subtitle */
.je-sub {
    margin: 0;
    font-size: 15px;
    color: #666;
}

/* SEARCH BAR — clean premium */
.je-search-bar {
    flex: 1;
    max-width: 650px;
    position: relative;
}

/* INPUT */
.je-search-bar input {
    width: 100%;
    padding: 9px 42px 9px 16px;   /* 🔻 tighter */
    font-size: 16px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fafafa;
   
    transition: border-color 0.25s ease, background 0.25s ease;
}

.je-search-bar input:focus {
    border-color: #00B7B3;
    background: #fff;
}

/* SEARCH ICON — clickable again */
.je-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    color: #888;
    cursor: pointer;                /* ← clickable again */
    transition: 
        color 0.15s ease,
        transform 0.1s ease;
}

/* Hover — slight highlight */
.je-search-icon:hover {
    color: #00A3A0;
}

/* Active/pressed — clear feedback */
.je-search-icon:active {
    transform: translateY(-50%) scale(0.88);   /* small press-in */
    color: #007d7a;                            /* darker teal */
}

/* Checkout shortcut link */
.je-header-checkout {
    font-size: 18px;
    color: #00B7B3;
    font-weight: 700;
    text-decoration: none;
}

/* =========================================================================
   CATEGORY BAR — DESKTOP (50% SMALLER, SAME LOOK)
   ========================================================================= */

.je-category-bar {
    background: #fff;
    position: sticky;
    top: 95px;
    z-index: 40;

    max-width: 2000px;
    margin: 0 auto 8px auto;

    /* 🔻 reduced spacing only */
    padding: 5px 14px;

    display: flex;
    align-items: center;
    gap: 6px;

    /* SAME gold underline */
    border-bottom: 2px solid #d4af37;
}

/* scroll container */
.cat-scroll-inner {
    display: flex;
    flex: 1;
    gap: 6px;                 /* was larger */
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-scroll-inner::-webkit-scrollbar {
    display: none;
}

/* category pills — SAME COLOURS, SAME HOVER, SAME 3D */
.je-cat-btn {
    padding: 6px 12px;        /* ↓ from large padding */
    border-radius: 999px;

    background: #f2f2f2;
    border: none;

    font-size: 14px;          /* slightly tighter, readable */
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;

    /* SAME 3D EFFECT */
    box-shadow:
      0 2px 0 #cfcfcf,
      0 4px 8px rgba(0,0,0,0.15);

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

/* SAME hover behaviour */
.je-cat-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 3px 0 #bdbdbd,
      0 6px 12px rgba(0,0,0,0.18);
}

/* SAME active colours + gold ring */
.je-cat-btn.active {
    background: #00B7B3;
    color: #fff;
    border: 2px solid #D4AF37;

    box-shadow:
      0 2px 0 #009e94,
      0 4px 8px rgba(0,0,0,0.18);
}

/* scroll arrows — SAME STYLE, JUST SMALLER */
.cat-scroll-btn {
    width: 26px;              /* ↓ from large */
    height: 26px;

    font-size: 14px;

    background: #ffffff;
    border: 2px solid #d4af37;
    color: #003c3c;

    border-radius: 14px;
    cursor: pointer;

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

    /* SAME 3D */
    box-shadow:
      0 2px 0 #c9b037,
      0 4px 8px rgba(0,0,0,0.15);

    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      background 0.15s ease;
}

/* SAME hover */
.cat-scroll-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 3px 0 #bfa52e,
      0 6px 12px rgba(0,0,0,0.18);
}


/* =========================================================================
   MAIN LAYOUT (LEFT MENU + RIGHT CART)
   ========================================================================= */
.je-layout {
    max-width: 2000px;
    margin: 24px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) 500px;
    gap: 30px;
}

.je-layout {
    align-items: flex-start;   /* IMPORTANT */
    overflow: visible;         /* Remove clipping */
}

/* =========================================================================
   LEFT SIDE — MENU + ITEM CARDS
   ========================================================================= */
.je-category-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* Item cards – gold outline + gold “3pt” shadow */
.je-item-card {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* 3pt-ish gold outline */
    border: 0px solid #D4AF37;

    /* Soft gold-tinted shadow */
    box-shadow:
      0 0 0 3px rgba(212, 175, 55, 0.4),   /* gold halo */
      0 0 1px rgba(0, 0, 0, 0.06);      /* soft drop shadow */
}

/* Slight lift on hover (keep it subtle) */
.je-item-card:hover {
    box-shadow:
      0 0 20px 4px rgba(212, 175, 55, 0.7),
      0 10px 4px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

.je-item-name {
    font-size: 20px;
    font-weight: 700;
}
.je-item-price {
    font-size: 17px;
    font-weight: 700;
    color: #00B7B3;
}
.je-item-desc {
    font-size: 15px;
    color: #666;
}

.je-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.je-item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
}

/* 2-COLUMN ITEM GRID */
.je-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* =========================================================================
   CART PANEL — PREMIUM TEAL STYLE
   ========================================================================= */
.je-cart {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    border-top: 4px solid #D4AF37;
    position: sticky;
    top: 130px;
}

/* Toggle Buttons (Collection / Delivery) */
/* Toggle container — clean, gold outline */
.je-order-toggle {
    display: flex;
    background: #f3f3f3;
    padding: 5px;
    border-radius: 999px;
    margin-bottom: 16px;
    border: 2px solid #D4AF37;       /* GOLD OUTLINE */
}

/* Toggle buttons */
.toggle-btn {
    flex: 1;
    border: none;
    padding: 10px 0;
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
    color: #444;
}

/* ACTIVE — fill teal */
.toggle-btn.active {
    background: #00B7B3;
    color: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
}

/* Spend-more message */
.je-spend-more {
    background: #fff5d6;
    border-left: 5px solid #D4AF37;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 16px;
}

/* Cart Title */
.je-cart-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* Cart Items */
.je-cart-items {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}
.je-cart-items::-webkit-scrollbar {
    width: 6px;
}
.je-cart-items::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Cart Item Row */
.je-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.je-cart-item:last-child {
    border-bottom: none;
}

.je-cart-left {
    flex: 1;
}
.je-cart-name {
    font-size: 18px;
    font-weight: 600;
}
.je-cart-options {
    font-size: 14px;
    color: #777;
}

/* Qty Box — Clean JE Style */
.je-cart-qty-box {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    border-radius: 8px;
    padding: 4px 10px;
    gap: 10px;
    height: 34px;
}

.je-qty-btn,
.je-delete-btn {
    background: #f7f7f7;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Delete (bin) */
.je-delete-btn {
    color: #cc0000;
}

/* Qty number */
.je-cart-qty {
    width: 28px;
    text-align: center;
    font-weight: 700;
}

/* Price */
.je-cart-price {
    min-width: 50px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #00B7B3 !important;
    text-align: right !important;
}

/* Checkout Button — now TEAL */
.je-checkout-btn {
    width: 100%;
    padding: 8px;
    border-radius: 999px;
    border: 2px solid #D4AF37;        /* GOLD OUTLINE */
    background: #00B7B3;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-top: 18px;
    cursor: pointer;
    transition: 0.2s ease;
}
.je-checkout-btn:hover {
    background: #009C9A;
    border-color: #B9972E;            /* Slightly deeper gold on hover */
}


/* =========================================================================
   LOGIN + OTP + ORDER TYPE POPUPS  (SC-MODAL)
   ========================================================================= */
.sc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.sc-modal-content {
    background: #ffffff;
    padding: 28px 24px;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.sc-modal-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #003c3c;
}

.sc-input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 16px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.sc-order-btn {
    width: 100%;
    background: #008080;
    color: white;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

.sc-order-btn:hover {
    background: #006b6b;
}

.sc-error {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
    .je-layout {
        grid-template-columns: 1fr;
    }
    .je-cart {
        position: static;
        max-width: 100%;
    }
}
/* TIGHTEN qty to price spacing */
.je-cart-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;    /* tighter spacing */
}

/* WIDEN CART PANEL — premium layout */
.je-layout {
    grid-template-columns: minmax(0, 2fr) 560px !important; /* wider cart */
}

.je-cart {
    width: 100% !important;
    max-width: 560px !important;
}


/* ========================================================================
   SPICE CLUB – CHECKOUT PAGE UI (MATCHED TO MAIN ONLINE ORDERING UI)
   ======================================================================== */

/* HEADER ---------------------------------------------------------------- */
.sc-header {
    background: #ffffff;
    border-bottom: 1px solid #e3e3e3;
    position: sticky;
    top: 0;
    z-index: 50;
}

.sc-header-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sc-logo-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sc-logo-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #00B7B3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.sc-restaurant-name {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.sc-restaurant-sub {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.sc-back-link {
    font-size: 18px;
    color: #00B7B3;
    font-weight: 600;
    text-decoration: none;
}

/* ========================================================================
   CHECKOUT LAYOUT
   ======================================================================== */

.sc-checkout-layout {
    max-width: 1500px;
    margin: 30px auto;
    padding: 0 24px;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 2fr) 500px;
}

/* LEFT FORM CARD -------------------------------------------------------- */
.sc-checkout-form-section {
    background: #fff;
    padding: 28px;
    border-radius: 18px;
    border-top: 4px solid #D4AF37;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.sc-checkout-form-section h2 {
    margin: 0 0 18px 0;
    font-size: 24px;
    font-weight: 700;
}

/* FORM ELEMENTS --------------------------------------------------------- */
.sc-form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.sc-form-row label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
}

.sc-form-row input,
.sc-form-row textarea {
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
    font-size: 18px;
}

.sc-form-row input:focus,
.sc-form-row textarea:focus {
    border-color: #00B7B3;
    outline: none;
    background: #fff;
}

/* BUTTON (TEAL WITH GOLD OUTLINE) -------------------------------------- */
.sc-btn-primary {
    width: 100%;
    border: 2px solid #D4AF37;
    background: #00B7B3;
    padding: 16px;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}

.sc-btn-primary:hover {
    background: #009C9A;
}

/* MESSAGE RESULT -------------------------------------------------------- */
.sc-message {
    margin-top: 14px;
    font-weight: 600;
    font-size: 16px;
}

/* ========================================================================
   RIGHT SIDE – ORDER SUMMARY BOX
   ======================================================================== */

.sc-checkout-summary {
    background: #fff;
    padding: 26px;
    border-radius: 18px;
    border-top: 4px solid #D4AF37;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    height: fit-content;
    position: sticky;
    top: 130px;
}

.sc-checkout-summary h2 {
    margin: 0 0 18px 0;
    font-size: 24px;
    font-weight: 700;
}

/* ORDER ITEMS ----------------------------------------------------------- */
.sc-summary-items {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    margin-bottom: 18px;
}


.sc-summary-left {
    font-weight: 600;
    font-size: 16px;
}

.sc-summary-right {
    font-size: 16px;
    font-weight: 700;
    color: #00B7B3;
}

/* SUMMARY TOTALS -------------------------------------------------------- */
.sc-cart-summary .sc-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 16px;
}

.sc-cart-summary .sc-total-row {
    border-top: 2px solid #ddd;
    padding-top: 10px;
    font-weight: 700;
    font-size: 18px;
}

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

@media (max-width: 900px) {
    .sc-checkout-layout {
        grid-template-columns: 1fr;
    }

    .sc-checkout-summary {
        position: static;
    }
}


.sc-logo-circle {
    width: 80px;            /* bigger logo */
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #D4AF37;  /* thicker premium gold ring */
}

.sc-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;    /* keeps the logo fully visible */
    padding: 6px;           /* adds breathing room */
}

/* HEADER LOGO IMAGE */
.je-logo-img {
    width: 58px;
    margin-right: 14px;
    margin-top: 3px;   /* perfect vertical alignment */
}

/* Align right menu */
.je-header-right {
    margin-left: auto;
	font: 28px;
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Header links */
.je-header-link {
    font-size: 18px;
    font-weight: 700;        /* BOLD */
    color: #00B7B3;          /* TEAL */
    text-decoration: none;
}

.je-header-link:hover {
    color: #009C9A;
    text-decoration: underline;
}

/* Header right links – perfect alignment */
.je-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;        /* wider gap, more premium */
    padding-right: 10px;
}

/* Links — thicker + teal */
.je-header-link {
    font-size: 17px;
    font-weight: 700;
    color: #009C9A;
    text-decoration: none;
}

.je-header-link:hover {
    color: #007F7D;
    text-decoration: underline;
}

/* =========================================================
   SPICE CLUB — Header Logo Image (MAIN + Checkout)
   ========================================================= */

/* ======================================================
   SUPER 3D GLOW / LIFT EFFECT FOR HEADER LOGO
   ====================================================== */

.sc-logo-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Base image */
.sc-logo-img {
    width: 60x;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    
    /* 3D Base Shadow */
    box-shadow:
        0 4px 10px rgba(0,0,0,0.15),
        0 10px 25px rgba(0,0,0,0.10),
        inset 0 0 12px rgba(255,255,255,0.6);

    /* Smooth 3D animation */
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}

/* Hover = SUPER 3D FLOAT */
.sc-logo-img:hover {
    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.22),
        0 14px 35px rgba(0,0,0,0.18),
        inset 0 0 18px rgba(255,255,255,0.9),
        0 0 22px rgba(0,128,128,0.45); /* TEAL outer glow */

    filter: brightness(1.12) saturate(1.1);
}

/* ===========================================
   NEON PULSE BORDER (TEAL)
=========================================== */
.sc-logo-img {
    position: relative;
    z-index: 2; /* keep image above */
}

/* Neon border wrapper */
.sc-logo-img::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%; /* circular neon ring */
    border: 4px solid rgba(0, 200, 200, 0.8);
    box-shadow: 
        0 0 10px rgba(0, 200, 200, 0.6),
        0 0 18px rgba(0, 200, 200, 0.5),
        inset 0 0 12px rgba(0, 200, 200, 0.4);
    animation: scNeonPulse 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1; /* behind the logo */
}

/* Pulse animation */
@keyframes scNeonPulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
        box-shadow:
            0 0 8px rgba(0, 200, 200, 0.5),
            0 0 15px rgba(0, 200, 200, 0.4),
            inset 0 0 8px rgba(0, 200, 200, 0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
        box-shadow:
            0 0 14px rgba(0, 255, 255, 0.85),
            0 0 28px rgba(0, 255, 255, 0.75),
            inset 0 0 14px rgba(0, 255, 255, 0.6);
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
        box-shadow:
            0 0 8px rgba(0, 200, 200, 0.5),
            0 0 15px rgba(0, 200, 200, 0.4),
            inset 0 0 8px rgba(0, 200, 200, 0.3);
    }
}


/* ===== CATEGORY SCROLL BUTTONS (PILL STYLE) ===== */
.cat-scroll-btn {
  background: #ffffff;
  border: 2px solid #d4af37;      /* gold outline */
  color: #003c3c;                 /* teal arrow colour */
  font-size: 20px;
  width: 42px;                    /* wider pill */
  height: 32px;                   /* short pill */
  border-radius: 18px;            /* round pill */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: 0.2s ease;
}

.cat-scroll-btn:hover {
  background: #003c3c;
  color: #ffffff;
  border-color: #003c3c;
}

/* ============================================
   USER INITIALS BADGE (REPLACES 👤 ICON)
   ============================================ */
#userBox .sc-user-initials {
  width: 26px;
  height: 26px;

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

  border-radius: 50%;

  background: #003c3c;
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;

  box-shadow:
    0 2px 0 #002f2f,
    0 4px 8px rgba(0,0,0,0.18);

  user-select: none;
}

/* Hover — SAME FEEL AS REST OF HEADER */
#userBox:hover .sc-user-initials {
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 #002525,
    0 6px 12px rgba(0,0,0,0.22);
}

/* === USER DROPDOWN MENU === */
.sc-user-box {
  cursor: pointer;
  padding: 6px 12px;
  background: #ffffff;
  color: #003c3c;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid #d4af37;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.sc-user-menu {
  position: absolute;
  right: 0;
  top: 42px;
  background: #ffffff;
  border: 1px solid #d4af37;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 140px;
  flex-direction: column;
  padding: 6px 0;
  z-index: 9999;
}

.sc-user-option {
  background: none;
  border: none;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  color: #003c3c;
}

.sc-user-option:hover {
  background: #f5f5f5;
}

.sc-user-logout {
  color: #c70000;
  font-weight: 600;
}

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

  /* MATCH CASH / CARD EXACTLY */
  padding: 6px 18px;
  background: #ffffff;
  border: 2px solid #008080;
  border-radius: 20px;
  font-weight: 600;
  font-size: 15px;
  color: #003c3c;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  white-space: nowrap;   /* same behaviour */
  min-width: 70px;       /* optional: keeps pills same width */
}

.sc-toggle-btn input[type="radio"] {
  display: none;
}

/* ACTIVE STATE — identical to cash/card active */
.sc-toggle-btn.active {
  background: #008080;
  color: #ffffff;
  border-color: #008080;
}

.sc-toggle-btn:hover {
  background: #e8fdfd;
}

.sc-toggle-btn {
  transition: background 0.25s ease, color 0.25s ease,
              transform 0.15s ease;
}

.sc-toggle-btn.active {
  transform: scale(1.03);
}
.sc-toggle-btn:hover {
  border-color: #d4af37;
  background: #f8fffa;
}

/* FIXED WIDTH for ALL pills: Collection, Delivery, Cash, Card */
.sc-toggle-options .sc-toggle-btn {
  width: 120px !important;     /* ← set your exact fixed width */
  height: 40px !important;     /* ← fixed height */
  padding: 0 !important;       /* ignore text width */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 22px !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}
.je-item-row {
  display: flex;
  padding: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.je-item-wrapper {
  display: flex;
  gap: 14px;
  width: 100%;
}

.je-item-img-wrap {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}

.je-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.je-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.je-item-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.je-item-desc {
  font-size: 13px;
  color: #777;
  margin: 0 0 6px;
}

.je-item-price {
  font-weight: 600;
  font-size: 15px;
  color: #003c3c;
  margin-bottom: 6px;
}

.je-item-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}


@media (max-width: 900px) {
    .je-layout {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    #cartPanel {
        width: 100%;
        position: relative;
        top: 0;
    }

    .je-category-bar,
    .je-header-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .je-items-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================
   MODIFIER POPUP — SPICE CLUB SIGNATURE STYLE
   (Gold focus, teal highlights, glowing selects)
=========================================== */




/* Each modifier group block (card) */
.mod-group-block {
    background: #ffffff;
    border: 2px solid #D4AF37; /* GOLD BORDER */
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: 0.2s ease;
}

/* Slight lift on hover */
.mod-group-block:hover {
    box-shadow: 0 0 12px rgba(212,175,55,0.45);
    transform: translateY(-2px);
}

/* Section title inside group */
.mod-group-block > div:first-child {
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 14px;
    color: #003C3C;         /* DEEP TEAL */
    border-bottom: 2px solid #D4AF37;
    padding-bottom: 6px;
}


/* On hover highlight row */
.mod-option-row:hover {
    background: rgba(0, 183, 179, 0.08); /* light teal hover */
    border-radius: 6px;
}

/* ===== CUSTOM CHECKBOX / RADIO GLOW ===== */

/* Bigger clickable hitbox */
.mod-option-row input[type="checkbox"],
.mod-option-row input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #00B7B3; /* TEAL TICK */
    transition: 0.25s ease;
}

/* GLOW when selected */
.mod-option-row input[type="checkbox"]:checked,
.mod-option-row input[type="radio"]:checked {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px #00B7B3)
            drop-shadow(0 0 4px #00B7B3);
}

/* Price styling (right side) */
.mod-option-price {
    color: #D4AF37; /* GOLD PRICE */
    font-weight: 700;
    padding-left: 10px;
}

.je-cart-mod {
    margin-left: 20px;
    border-left: 3px solid #e2e2e2;
    padding-left: 12px;
    opacity: 0.95;
}

.je-cart-mod .mod-name {
    font-size: 16px;
    color: #444;
}

.mod-qty-box .mod-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.order-mod {
    margin-left: 18px;
    font-size: 15px;
    color: #0080c8;   /* same blue as your category link */
    margin-top: 2px;
}



/* ===== ITEM ROW (TOP LEVEL) ===== */
.je-cart-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.je-cart-left .je-cart-name {
  font-size: 16px !important;
  font-weight: 600;
  margin-bottom: 2px;
}

.je-cart-price {
  font-size: 16px !important;
  font-weight: 700;
}

/* ===== MODIFIER ROW (SUB ITEMS) ===== */
.je-cart-mod-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 22px;
  padding: 2px 0;
  border-left: 2px solid #e5e5e5;
  padding-left: 10px;
}
/* Force item row right side to align to top */
.je-cart-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-end;
}

.je-cart-mod-left {
  font-size: 15px;
  color: #444;
}

.je-cart-mod-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.je-cart-mod-del {
  font-size: 13px;
  cursor: pointer;
  opacity: 0.6;
}

.je-cart-mod-del:hover {
  opacity: 1;
}

.je-cart-qty-box .je-delete-btn svg {
  width: 14px;
  height: 14px;
}
/* ===== ITEM ROW (TOP LEVEL) ===== */
.je-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* 🔥 keep right column top-aligned with name */
  padding: 10px 0;
}

/* ============================================================
   CART PRICE RIGHT (stay on same row)
   ============================================================ */

.je-cart-item,
.je-cart-mod-row,
.je-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Main cart price */
.je-cart-price {
    text-align: right !important;
    margin-left: auto !important;
    display: inline-block !important;
    min-width: 50px;
}

/* Modifier price (Chicken +£1.00 etc) */
.je-cart-mod-price {
    text-align: right !important;
    margin-left: auto !important;
    display: inline-block !important;
    white-space: nowrap;
    min-width: 40px;
}

/* Subtotal / Delivery / Total rows */
.je-cart-summary .je-row span:last-child {
    text-align: right !important;
    margin-left: auto !important;
    display: inline-block !important;
    min-width: 60px;
}

/* ============================================================
   🔥 FIX: KEEP ITEM NAME + QTY + MAIN PRICE ON SAME TOP ROW
   ============================================================ */

/* Force whole row to align to TOP */
.je-cart-item {
    display: flex !important;
    align-items: flex-start !important;   /* ← THIS IS THE REAL FIX */
}

/* Right column stays at TOP (qty + price) */
.je-cart-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;   /* ← prevents dropping */
}

/* Price stays above qty box */
.je-cart-price {
    order: -1 !important;
    margin-bottom: 4px !important;
}
/* FIX: QTY + PRICE stay in the same line at the TOP */
.je-cart-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;   /* ⬅ forces both UP */
    gap: 10px;
}

/* FORCE qty + price to sit PERFECTLY on the same baseline */
.je-cart-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   /* ⬅ center vertically */
    gap: 8px;
}

/* Remove any hidden vertical offsets */
.je-cart-price {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.je-cart-qty-box {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
/* ============================================================
   🔥 KEEP ITEM NAME + QTY + MAIN PRICE ON SAME TOP ROW
   ============================================================ */

/* Force whole row to align to TOP */
.je-cart-item {
    display: flex !important;
    align-items: flex-start !important;
}

/* Right column: qty + price in one row */
.je-cart-right {
    display: flex !important;
    flex-direction: row !important;   /* row, not column */
    align-items: center !important;
    gap: 8px;
}

/* QTY box on the LEFT */
.je-cart-qty-box {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* PRICE on the RIGHT of qty */
.je-cart-price {
    order: 2 !important;                 /* comes after qty */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* ===============================================
   SPICE CLUB — FINAL CART LAYOUT CONTROLLER
   (THIS OVERRIDES EVERYTHING ABOVE)
   =============================================== */

/* Main cart row — name on left, qty+price on right */
.je-cart-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
}

/* Right side: qty then price */
.je-cart-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Qty box */
.je-cart-qty-box {
    order: 1 !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
}

/* Item price */
.je-cart-price {
    order: 2 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #555 !important;
    text-align: right !important;
    min-width: 50px !important;
}

/* Modifier rows */
.je-cart-mod-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-left: 22px !important;
    padding: 4px 0 !important;
    border-left: 2px solid #e5e5e5 !important;
    padding-left: 10px !important;
}

/* Modifier price aligned right */
.je-cart-mod-price {
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    min-width: 40px !important;
}

/* Modifier name text */
.je-cart-mod-left {
    font-size: 18px !important;
    color: #555 !important;
}
/* ===============================================
   SPICE CLUB — CART FONT CONTROLS (FULL PACK)
   =============================================== */

/* -----------------------------
   ITEM NAME (left)
   ----------------------------- */
.je-cart-name {
    font-size: 20px !important;      /* ⬅ Change size */
    font-weight: 700 !important;     /* bold / normal */
    color: #222 !important;          /* text colour */
    line-height: 1.25 !important;    /* vertical spacing */
}

/* -----------------------------
   ITEM PRICE (right)
   ----------------------------- */
.je-cart-price {
    font-size: 18px !important;      /* ⬅ Change size */
    font-weight: 700 !important;
    color: #555 !important;       /* teal price */
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* -----------------------------
   QTY NUMBER (center digit)
   ----------------------------- */
.je-cart-qty {
    font-size: 16px !important;      /* ⬅ Change size */
    font-weight: 700 !important;
    color: #222 !important;
}

/* -----------------------------
   MODIFIER NAME (Chicken, Lamb)
   ----------------------------- */
.je-cart-mod-left {
    font-size: 16px !important;      /* ⬅ Change size */
    font-weight: 500 !important;     /* medium weight */
    color: #555 !important;
    line-height: 1.2 !important;
}

/* -----------------------------
   MODIFIER PRICE (+£1.00)
   ----------------------------- */
.je-cart-mod-price {
    font-size: 16px !important;      /* ⬅ Change size */
    font-weight: 600 !important;     /* Semi-bold */
    color: #555 !important;       /* deep teal */
    white-space: nowrap !important;
}

/* -----------------------------
   SUBTOTAL / DELIVERY / TOTAL
   ----------------------------- */
.je-row span {
    font-size: 18px !important;      /* ⬅ Change size */
    font-weight: 600 !important;
}
.cartDeliveryFee span {
    font-size: 18px !important;      /* ⬅ Change size */
    font-weight: 600 !important;
}
/* ===========================================
   SPICE CLUB — CART TOTAL ROW FONT CONTROL
   =========================================== */

.je-total-row span {
    font-size: 20px !important;     /* ⬅ change size */
    font-weight: 800 !important;    /* bold / heavy */
    color: #003c3c !important;      /* deep teal */
    line-height: 1.3 !important;
}

/* Right side number ONLY */
.je-total-row #cartTotal {
    font-size: 22px !important;     /* ⬅ bigger number */
    font-weight: 900 !important;
    color: #00B7B3 !important;      /* teal highlight */
}
.je-cart-mod-del {
    font-size: 18px !important;      /* adjust size */
    line-height: 1 !important;
    cursor: pointer;
    color: #C00000 !important;       /* 🔥 TEAL CROSS */
    font-weight: 700 !important;     /* thicker X */
}

.je-cart-mod-del:hover {
    color: #008a8a !important;       /* darker teal on hover */
    transform: scale(1.15);          /* little pop */
}

.je-cart-mod-del:hover {
    opacity: 1 !important;
    transform: scale(1.15);       /* ⬅ optional hover pop */
}

/* ===========================================
   SPICE CLUB — MODIFIER PRICE CONTROLS
   =========================================== */

.je-cart-mod-price {
    font-size: 15px !important;     /* ⬅ change size */
    font-weight: 700 !important;    /* boldness */
    color: #555 !important;      /* teal price */
    white-space: nowrap !important;

    /* POSITION CONTROLS */
    margin-left: auto !important;   /* ⬅ pushes right */
    text-align: right !important;
    min-width: 150px !important;     /* keeps column aligned */

    /* For tweaking horizontal position */
    padding-right: 4px !important;  /* ⬅ nudge right */
    padding-left: 4px !important;   /* ⬅ nudge left */
}
/* ===========================================
   GLOBAL FONT OVERRIDE (TOP PRIORITY)
   =========================================== */



/* --- ITEM IMAGE AUTO-FIT --- */
.item-card img,
.menu-item img,
.je-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fill the box, crop nicely */
    border-radius: 10px;    /* match your card style */
    display: block;
}

.je-item-img-wrap {
    width: 110px;
    height: 85px;
    overflow: hidden;
    border-radius: 10px;
}

.je-item-img-wrap img.je-item-img {
    width: 110%;
    height: 110%;
    object-fit: cover;
    display: block;
}
/* =============================
   CATEGORY HEADER CARD
   ============================= */
.category-card-header {
    width: 100%;                     /* float instead of full width */
    display: inline-block;           /* makes it float like a tag */
    background: #003c3c;             /* deeper teal to match menu */
    padding: 14px 22px;
    border-radius: 14px;
    margin: 35px 0 25px 0;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

    /* GOLD BORDER + SMALL CAPS + SPACING */
    border: 2px solid #d4af37;
    font-variant: small-caps;
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
}

.category-card-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.category-card-desc {
    font-size: 15px;
    opacity: 0.85;
}

.category-card-title {
    font-variant: small-caps;
    text-transform: uppercase;
}

}
#discountRow {
  display: none !important;
}
#discountRow.show {
  display: flex !important;
}

.je-right-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}



/* ==========================================================
   UPSALE BUBBLE (MULTI-STAGE ANIMATION)
========================================================== */

#upsellBubble {
  background: #fff8d6;
  color: #5a4a00;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid #f2d55c;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 12px 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
  opacity: 0;
  transform: translateY(-12px) scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#upsellBubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============= STAGE 1: BOUNCE (10 seconds) ============= */
@keyframes upsellBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
}

#upsellBubble.stage-bounce {
  animation: upsellBounce 0.8s ease-in-out infinite;
}

/* ============= STAGE 2: SHAKE + NEON GLOW (10 sec) ============= */
@keyframes upsellShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes upsellNeon {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 22px rgba(255,255,0,0.95); }
}

#upsellBubble.stage-shake-glow {
  animation:
    upsellShake 0.35s ease-in-out infinite,
    upsellNeon 1.1s ease-in-out infinite;
}

/* arrow */
#upsellBubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 40px;
  border-width: 12px 12px 0 12px;
  border-style: solid;
  border-color: #fff8d6 transparent transparent transparent;
}
.promo-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.promo-popup-box {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.promo-btn {
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: #008080;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.custom-item-row .original-price {
    width: 80px !important;
    min-width: 80px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.custom-item-row .discounted-price {
    min-width: 80px !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #444 !important;
    display: inline-block !important;
}

/* ============================
   LAST-MINUTE OFFER SLIDE PANEL
============================ */

.lmo-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 360px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -3px 0 12px rgba(0,0,0,0.18);
  border-left: 4px solid #d4af37;
  z-index: 99999;
  transition: right 0.32s ease-out;
  display: flex;
  flex-direction: column;
  padding: 20px;
  font-family: system-ui, sans-serif;
}

.lmo-panel.open { right: 0; }


/* HEADER */
.lmo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #003c3c;
  margin-bottom: 18px;
}

#lmoCloseBtn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}


/* BODY */
.lmo-body {
  flex: 1;
  overflow-y: auto;
}


/* ========================================
   ITEM CARD
======================================== */
.lmo-item {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}


/* ========================================
   SINGLE ROW LAYOUT (CHECKBOX / NAME / PRICE)
======================================== */
.lmo-item label {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  font-size: 15px;
  color: #003c3c;
}

/* checkbox left */
.lmo-item input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

/* item title fills space */
.lmo-title {
  flex: 1;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* price block right */
.lmo-prices {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* old price */
.lmo-old {
  text-decoration: line-through;
  color: #000;
  font-size: 15px;
  font-weight: 700 !important;
}

/* new price */
.lmo-new {
  color: #d40000;
  font-size: 16px;
  font-weight: 700;
}


/* ========================================
   BUTTONS
======================================== */
.lmo-add-btn {
  background: #008080;
  color: #fff;
  font-size: 16px;
  padding: 8px;
  margin-top: 10px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  font-weight: 600;
}

.lmo-skip-btn {
  background: #e6e6e6;
  color: #003c3c;
  font-size: 16px;
  padding: 8px;
  margin-top: 10px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  font-weight: 600;
}


/* ========================================
   SPECIAL OFFER ICON
======================================== */
.special-offer-icon {
  width: 28px;
  height: 28px;
  margin-left: auto;
  margin-right: 8px;
  animation: pulseFlash 1.2s infinite ease-in-out;
}


/* Pulse + Flash */
@keyframes pulseFlash {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.15); opacity: 0.8; }
  70% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0.6; }
}

/* ========================================
   LMO FORCE ROW HEIGHT + CLEAN ALIGNMENT
======================================== */

.lmo-item {
  display: flex !important;
  align-items: center !important;
  padding: 18px 0 !important;   /* ← bigger vertical space */
  min-height: 64px !important;  /* ← forces taller rows */
}

.lmo-item label {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  gap: 14px;
}

.lmo-title {
  flex: 1;
  font-weight: 600;
}

.lmo-prices {
  display: flex;
  gap: 10px;
  min-width: 90px;
  justify-content: flex-end;
}

/* ========================================
   LMO ROW HOVER EFFECT
======================================== */

.lmo-item {
  transition: background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* hover state */
.lmo-item:hover {
  background: #f7fbfb;                 /* light teal tint */
  box-shadow: inset 3px 0 0 #d4af37;  /* gold left highlight */
}

/* checkbox cursor */
.lmo-item input[type="checkbox"] {
  cursor: pointer;
}




/* ================================================
   CHECKOUT — CLEAN COLUMN ALIGNMENT FOR ALL PRICES
   ================================================ */

/* Main item row */
.sc-summary-item .sc-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sc-summary-item .sc-summary-top span:last-child {
    min-width: 70px;        /* FIXED COLUMN WIDTH */
    text-align: right;
    font-weight: 600;
}

/* Modifier rows */
.sc-summary-mod {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 🔥 Control these values for spacing */
    margin-left: 25px;      /* indent the whole modifier row */
    margin-right: 0px;      /* usually keep 0 for alignment */

    padding-left: 0px;      /* internal left padding */
    padding-right: 0px;     /* internal right padding */

    width: calc(100% - 10px);   /* keep alignment with item rows */
}

/* Modifier price column (right side) */
.sc-summary-mod span:last-child {
    min-width: 80px;         /* align with main price column */
    text-align: right;
    font-weight: 500;
    padding-right: 0px;      /* 🔥 adjust this if you want it tighter */
}

/* Modifier name (left side) */
.sc-summary-mod span:first-child {
    flex: 1;
}

/* Subtotal, delivery, discount, total */
.sc-cart-summary .sc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-cart-summary .sc-row span:last-child {
    min-width: 70px;        /* SAME WIDTH = PERFECT ALIGNMENT */
    text-align: right;
}

/* Highlight total row */
.sc-total-row span:last-child {
    font-weight: 700;
}

/* FIX CART ON RIGHT SIDE ALWAYS VISIBLE */
.je-right-col {
    position: sticky;
    top: 120px;
    align-self: start;
}

/* Ensure the cart panel can shrink properly */
#cartPanel {
    height: fit-content;
}

/* ============================================================
   TABLET FIX (900px–1300px) — KEEP DESKTOP LAYOUT
   ============================================================ */
@media (min-width: 900px) and (max-width: 1300px) {

    .je-layout {
        grid-template-columns: minmax(0, 2fr) 500px !important;
        gap: 20px !important;
    }

    .je-right-col {
        position: sticky !important;
        top: 120px !important;
        align-self: flex-start !important;
    }

    #cartPanel {
        width: 100% !important;
        max-width: 500px !important;
        height: fit-content !important;
    }

    /* Keep item grid tidy */
    .je-items-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   UPS ELL – SC STYLE (Matches your existing cart design)
============================================================ */

#promoUpsellBanner {
    margin-top: 16px;
    padding: 16px;
    background: #ffffff;
    border: 2px solid #D4AF37;
    border-radius: 14px;
}

#promoUpsellBanner h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: #003c3c;
}

#upsellItems {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* UPS ELL CARD */
.je-upsell-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #f8f8f8;
    border: 4px solid #e3e3e3;
    border-left: 4px solid #D4AF37;
    border-radius: 12px;
}

/* Left text */
.je-upsell-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.je-upsell-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.je-upsell-price {
    font-size: 15px;
    font-weight: 700;
    color: #00B7B3;
}

/* ADD BUTTON */
.je-upsell-add-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #00B7B3;
    border: 2px solid #D4AF37;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.je-upsell-add-btn:hover {
    background: #009C9A;
}

/* Upsell banner animation support */
#promoUpsellBanner {
    transform-origin: top center;
    transform: scale(1);
    transition: 
        opacity 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

/* Optional: smoother rounded box */
#promoUpsellBanner {
    border-radius: 10px;
}



/* ============================================================
   COMPACT CART — 14PX + TIGHT SPACING (FINAL)
   ============================================================ */

/* ================= TITLE ================= */
.je-cart-title {
   font-size: 18px !important;
   font-weight: 900 !important;
   color: #00B7B3 !important;
   line-height: 1.1 !important;
   margin: 4px 0 !important;
}

/* ================= ITEM ROW ================= */

/* remove vertical gaps between items */
.je-cart-item {
    margin: 0 !important;
	font-weight: 1200 !important;
    padding: 4px 0 !important;
    min-height: auto !important;
    border-bottom: 1px solid #eee !important;
}

/* remove extra spacing containers */
.je-cart-left,
.je-cart-right {
    gap: 4px !important;
}


/* ================= ITEM NAME ================= */

.je-cart .je-cart-name,
#cartPanel .je-cart-name {
    font-size: 15px !important;
    font-weight: 1200 !important;
    color: #111 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}


/* ================= PRICES ================= */

.je-cart .je-cart-price,
#cartPanel .je-cart-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #003c3c !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}


/* ================= QTY ================= */

.je-cart .je-cart-qty,
#cartPanel .je-cart-qty {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* qty box smaller */
.je-cart-qty-box {
    height: 20px !important;
}

/* buttons compact */
.je-qty-btn,
.je-delete-btn {
    font-size: 16px !important;
    padding: 2px 6px !important;
}


/* ================= MODIFIERS ================= */

.je-cart-mod-row {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* modifier names */
.je-cart .je-cart-mod-left,
#cartPanel .je-cart-mod-left {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

/* modifier prices */
.je-cart .je-cart-mod-price,
#cartPanel .je-cart-mod-price {
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: 60px !important;
    text-align: right !important;
    color: #444 !important;
}


/* ================= SUMMARY ================= */

/* subtotal / discount rows */
#cartPanel .je-cart-summary .je-row {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.9 !important;
}

#cartPanel .je-cart-summary .je-row span {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #00B7B3 !important;
}


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

#cartPanel .je-total-row span {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #00B7B3 !important;
}

#cartTotal {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #00B7B3 !important;
}


/* ===========================================================
   MODIFIER ROW — FULL USER CONTROL
   =========================================================== */



.sc-summary-mod {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: calc(100% - var(--mod-indent)) !important;
    margin-left: var(--mod-indent) !important;
    padding: 2px 0;
    font-size: 15px !important;
}

/* LABEL */
.sc-summary-mod span:first-child {
    flex: 1;
    text-align: left;
    transform: translateX(var(--mod-label-shift));
}

/* PRICE */
.sc-summary-mod span:last-child {
    min-width: 55px;
    text-align: right;
    font-weight: 600;
    color: #003c3c;
    transform: translateX(var(--mod-price-shift));
}

/* ==========================================================
   PROFILE POPUP — FINAL FIXED RESPONSIVE VERSION
========================================================== */

/* Darken the background behind ANY popup modal */
.sc-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75) !important;   /* ← stronger dim */
    backdrop-filter: blur(3px);                  /* ← gorgeous soft blur */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


#profileModal.sc-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#profileModal .sc-modal-content {
    background: #ffffff;
    padding: 20px;
    width: 60%;                     /* 💥 50% WIDTH ON DESKTOP */
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    font-size: 16px;
    line-height: 1;
    pointer-events: auto;           /* prevent overlay click closing */
}

/* MOBILE VERSION */
@media (max-width: 768px) {
    #profileModal .sc-modal-content {
        width: 60% !important;       /* 💥 MOBILE FRIENDLY */
        font-size: 14px !important;
        padding: 8px !important;
    }
}

/* Force big input text */
#profileModal .sc-input,
#profileModal input.sc-input,
#profileModal textarea.sc-input {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Force big placeholder text */
#profileModal .sc-input::placeholder {
    font-size: 16px !important;
    opacity: 0.55;
}

/* Force big typed text even when autofilled */
#profileModal .sc-input:-webkit-autofill {
    font-size: 16px !important;
}
#profileModal .sc-input::placeholder {
    font-size: 16px !important;
    opacity: 0.6;
}
/* Active / Focus styling */
#profileModal .sc-input:focus {
    border-color: #008080 !important;       /* Teal accent */
    box-shadow: 40px 40px 20px rgba(0, 128, 128, 0.35);
    outline: none !important;
    background: #ffffff;
    transform: scale(1.01);                 /* Tiny lift effect */
}

/* Smooth transitions */
#profileModal .sc-input {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* Save button */
#profileModal .sc-btn {
    width: 100%;
    padding: 28px;
    font-size: 18px;
    font-weight: 700;
    background: #008080;
    color: #fff;
    border-radius: 10px;
}

/* Disable close on clicking outside */
#profileModal.sc-modal {
    pointer-events: none;
}

#profileModal .sc-modal-content {
    pointer-events: auto;
}



/* ===============================
   GLOBAL PROMO WIDE BANNER — FIXED
   =============================== */

.sc-promo-wide {
    width: 100%;
    max-width: 2000px;
    height: auto;
    max-height: 70px;        /* your control */
    margin: 6px auto 8px auto;
    border-radius: 12px;
    overflow: hidden;
    display: none;            /* JS shows/hides */

    /* ✨ Glow + zoom on show */
    animation: promoGlow 3s ease-in-out infinite,
               promoZoomIn 0.45s ease-out forwards;
}

/* IMAGE INSIDE */
.sc-promo-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* ✨ Glow animation */
@keyframes promoGlow {
    0%   { box-shadow: 0 0 0px rgba(0,180,180,0.2); }
    50%  { box-shadow: 0 0 22px rgba(0,180,180,0.45); }
    100% { box-shadow: 0 0 0px rgba(0,180,180,0.2); }
}

/* ✨ Zoom-in when it appears */
@keyframes promoZoomIn {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ✨ Zoom-out class for hiding (you can trigger this if needed) */
.sc-promo-hide {
    animation: promoZoomOut 0.35s ease-in forwards;
}

@keyframes promoZoomOut {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.85); opacity: 0; }
}

#discountRow {
    display: none !important;
}

#discountRow.show {
    display: flex !important;
}
/* Highlight the selected order type */
.sc-toggle-btn {
    border: 2px solid #ccc;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.2s;
}

/* When the input inside is checked → highlight the whole label */
.sc-toggle-btn input:checked {
    display: none; /* hide the actual radio */
}

.sc-toggle-btn input:checked + * {
    /* NO EFFECT – because no span */
}

/* Correct working rule */
.sc-toggle-btn input:checked ~ * {
    font-weight: 700;
}

.sc-toggle-btn input:checked {
    /* highlight parent */
}

.sc-toggle-btn input:checked {
    /* We can target the label itself like this */
}

.sc-toggle-btn input:checked {
    /* nothing useful here */
}

/* THE REAL FIX — highlight parent label when input is checked */
.sc-toggle-btn:has(input:checked) {
    background: #008080;
    border-color: #006666;
    color: #fff;
}

/* === ORDER SUMMARY (matches checkout) === */

.co-item {
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f2f2f2;
}

.co-item-top {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.co-mod {
  margin-left: 22px;
  display: flex;
  justify-content: space-between;
  border-left: 2px solid #e5e5e5;
  padding-left: 10px;
  font-size: 14px;
  color: #444;
  margin-bottom: 2px;
}

.co-note {
  margin-left: 22px;
  margin-top: 3px;
  font-size: 13px;
  color: #777;
}

.co-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.co-total {
  font-weight: 600;
}

.co-saved {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #008000;
}

/* ===========================================================
   CUSTOM2 Upsell forced display overrides
   =========================================================== */
.je-cart-price .upsell-new {
    color: #cc0000 !important;
    font-weight: 700 !important;
}

.je-cart-price .upsell-old {
    text-decoration: line-through !important;
    color: #666 !important;
    opacity: 0.9 !important;
    margin-left: 6px;
}

/* ===========================
   FINAL VOUCHER ROW LAYOUT
=========================== */
#voucherRow {
    display: flex !important;
    align-items: center;
    padding: 4px 0;
}

/* "Voucher" text */
#voucherRow .voucher-label {
    font-weight: 600;
    color: #003c3c;
}

/* The red X button */
#removeVoucherBtn {
    background: none;
    border: none;
    color: #ff0000;
    font-size: 16px;
    cursor: pointer;
    margin-left: 6px;
    margin-right: auto;   /* pushes price to the right */
}

/* Amount aligned perfectly on the right */
#voucherAmount {
    color: #c00;
    font-weight: 700;
}

/* Hide 'Voucher Code' label when voucher is applied */
.voucher-applied #voucherContainer label {
    display: none !important;
}

.je-upsell-price-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.je-upsell-price-wrap .new-price {
    color: #cc0000 !important;
    font-weight: 700 !important;
}

.je-upsell-price-wrap .old-price {
    text-decoration: line-through !important;
    color: #666 !important;
}

/* 🔥 Google Places dropdown ABOVE modals */
.pac-container {
  z-index: 999999 !important;
}


/* =========================================================================
   MODAL OVERLAY
   ========================================================================= */

.je-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

body.modal-open {
    overflow: hidden;
}

/* =========================================================================
   MODAL CONTAINER
   ========================================================================= */

.je-modal-content {
    background: #fff;
    width: calc(100vw - 32px);
    max-width: 1800px;
    padding: 16px;
    border-radius: 14px;
    position: relative;

    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

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

.je-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;

    background: #f6fdfc;
    border: 2px solid #f0c04d;
    border-radius: 8px;

    padding: 6px 20px;
    font-size: 22px;
    font-weight: 900;
    color: #003c3c;
    cursor: pointer;
    z-index: 10;
}

/* =========================================================================
   MODAL INNER SCROLL
   ========================================================================= */

#modalContentInner {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}

/* =========================================================================
   TITLE
   ========================================================================= */

#itemModal h2 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    font-size: 22px;
    font-weight: 900;
    color: #003c3c;
    border-bottom: 6px solid #f0c04d;
}

/* =========================================================================
   MODIFIER GRID — HARD FORCED 4 EQUAL COLUMNS
   ========================================================================= */

.mod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 🔒 equal width */
    gap: 16px;
    align-items: start;
    width: 100%;
}

/* =========================================================================
   MODIFIER CARDS
   ========================================================================= */

.mod-group-block {
    width: 100%;
    min-width: 0;                 /* CRITICAL */
    border: 2px solid #f0c04d;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    box-sizing: border-box;
}

/* group title */
.mod-group-block > div:first-child {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}

/* =========================================================================
   OPTION ROWS
   ========================================================================= */

.mod-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    white-space: nowrap;
}

.mod-option-row input {
    flex: 0 0 auto;
}

.mod-option-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mod-option-row span {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
}

/* =========================================================================
   🔒 FORCE 4TH GROUP INTO FIRST ROW (DESKTOP ONLY)
   ========================================================================= */

@media (min-width: 1201px) {
    .mod-grid > .mod-group-block:nth-child(4) {
        grid-column: 4;
        grid-row: 1;
    }
}

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

.sc-btn-primary {
    margin-top: 12px;
    padding: 12px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 10px;
}

/* =========================================================================
   TABLET (2 COLUMNS)
   ========================================================================= */

@media (max-width: 1200px) {
    .mod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   MOBILE (1 COLUMN)
   ========================================================================= */

@media (max-width: 700px) {
    .je-modal-content {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 12px;
    }

    #modalContentInner {
        padding-right: 0;
    }

    .mod-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sc-btn-primary {
        font-size: 16px;
        padding: 12px;
    }
}


/* ===============================
   MODIFY BUTTON
   =============================== */
..je-info-btn {
  padding: 6px 12px;
  background: #00b3a4;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}


/* ===============================
   ADD (+) BUTTON — BIG / 3D
   =============================== */
.je-add-btn {
  padding: 4px 42px;              /* BIGGER button */
  background: #00b3a4;
  color: #fff;

  border-radius: 20px;
  border: 2px solid #009a90;       /* base outline */

  font-size: 14px;                 /* BIGGER + */
  font-weight: 700;                /* THICKER + */
  line-height: 1;

  cursor: pointer;

  /* 3D effect */
  box-shadow:
    0 4px 0 #008f86,               /* bottom edge */
    0 6px 12px rgba(0,0,0,0.18);   /* depth */

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

/* HOVER — lift */
.je-add-btn:hover {
  background: #00c4b5;
  border-color: #00c4b5;

  box-shadow:
    0 5px 0 #009f95,
    0 8px 16px rgba(0,0,0,0.22);

  transform: translateY(-1px);
}

/* ACTIVE — press down */
.je-add-btn:active {
  transform: translateY(2px);

  box-shadow:
    0 2px 0 #007e76,
    0 4px 8px rgba(0,0,0,0.2);
}

/* FOCUS / SELECTION — outline colour */
.je-add-btn:focus-visible {
  outline: 3px solid #ffd966;      /* gold highlight */
  outline-offset: 3px;
}

/* ===============================
   COLLAPSIBLE CATEGORY SECTIONS
   (30% COMPACT — NO FONT CHANGES)
   =============================== */

/* CATEGORY HEADER */
.category-card-header {
  cursor: pointer;
  user-select: none;
  position: relative;

  /* SMALL GAP BETWEEN HEADERS */
  margin-bottom: 3px;            /* was 4px */

  /* CLOSED (DEFAULT) — COMPACT */
  height: 55px;                 /* was 150px */
  padding: 0 11px;               /* was 16px */

  display: flex;
  align-items: center;

  /* TEAL BACKGROUND */
  background: #DFF3F2;
  border-radius: 10px;           /* was 14px */
  border: 1px solid #00b3a4;

  /* 3D EFFECT (SCALED DOWN) */
  box-shadow:
    0 2px 0 #009e94,             /* was 3px */
    0 4px 8px rgba(0, 0, 0, 0.18); /* was 6px / 12px */

  transition:
    height 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

/* OPEN — SLIM + LIGHTER TEAL */
.je-category-block:not(.collapsed) .category-card-header {
  height: 31px;                  /* was 44px */
  background: #00B3A4;
  border-color: #00b3a4;

  box-shadow:
    0 1px 0 #009e94,              /* was 2px */
    0 3px 6px rgba(0, 0, 0, 0.15); /* was 4px / 8px */
}

/* 3D HOVER (SCALED, SAME FEEL) */
.category-card-header:hover {
  transform: translateY(-1px);   /* was -2px */
  box-shadow:
    0 3px 0 #008f86,              /* was 4px */
    0 7px 13px rgba(0, 0, 0, 0.22); /* was 10px / 18px */
}

/* TITLE — UNCHANGED */
.category-card-title {
  font-weight: 700;
  font-size: 16px;
  color: #000;
}

/* CHEVRON — RED (VISUALLY 30% SMALLER) */
.category-card-header::after {
  content: "▾";
  position: absolute;
  right: 11px;                   /* was 16px */
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.25s ease;

  font-size: 52px;               /* was 75px */
  font-weight: 900;
  color: #003C3C;
}

/* COLLAPSED CHEVRON */
.je-category-block.collapsed .category-card-header::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* ===============================
   GRID ANIMATION (UNCHANGED)
   =============================== */

.je-items-grid {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  opacity: 1;
  transition:
    grid-template-rows 0.35s ease,
    opacity 0.25s ease;
}

.je-items-grid > * {
  overflow: hidden;
}

/* collapsed */
.je-category-block.collapsed .je-items-grid {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* collapsed — MUST STAY (prevents gaps) */
.je-category-block.collapsed .je-items-grid {
  display: none;
}

/* SLOGAN — SPACING ONLY REDUCED */
.category-card-slogan {
  margin-left: 4px;              /* was 6px */

  font-size: 13px;
  font-weight: 500;

  text-transform: lowercase !important;
  font-variant: small-caps;
  letter-spacing: 0.4px;         /* was 0.6px */
  opacity: 0.85;

  color: #003c3c;
}


/* ===============================
   VISUAL SPACING UNDER PROMO
   =============================== */

/* category bar breathing room */
#categoryBar {
  padding-top: 8px;
}


/* cart breathing room */
#cartPanel {
  margin-top: 50px;
}



/* ===============================
   SINGLE GROUP MODAL — FIX CLIPPING
   =============================== */

.je-modal-content.single-group {
  max-width: 460px;
  width: 90%;
  height: auto;              /* 🔥 allow growth */
  max-height: 90vh;          /* 🔥 never exceed viewport */
  display: flex;
  flex-direction: column;
}

/* content area must scroll, not clip */
.je-modal-content.single-group #modalContentInner {
  flex: 1;
  overflow-y: auto;          /* 🔥 THIS FIXES CUT-OFF */
  padding-right: 6px;        /* scrollbar breathing room */
}

/* =========================================
   SINGLE GROUP — FORCE 1 COLUMN GRID
   ========================================= */

.je-modal-content.single-group .mod-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  justify-items: stretch;
}
.je-modal-content.two-group .mod-grid {
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}


.je-modal-content.single-group .mod-group-block {
  width: 100% !important;
  max-width: 420px;
  justify-self: center;
}

/* =========================================
   MODAL WIDTH CONTROL BY GROUP COUNT
   ========================================= */

/* 1 group — narrow */
.je-modal-content.single-group {
  max-width: 480px;
}

/* 2 groups — medium */
.je-modal-content.two-group {
  max-width: 760px;
}

/* 3 groups — wider (future-proof) */
.je-modal-content.three-group {
  max-width: 980px;
}

/* 4+ groups — full width (default) */
.je-modal-content {
  width: 100%;
}

/* Ensure grid never stretches past modal */
.je-modal-content .mod-grid {
  width: 100%;
  margin: 0 auto;
}

/* 3 groups — FORCE 3 COLUMN GRID */
.je-modal-content.three-group .mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
}

/* =========================================================
   MOBILE — ALL MOBILE-ONLY OVERRIDES (SAFE, ISOLATED)
   ========================================================= */
@media (max-width: 768px) {

  /* ======================================================
     GLOBAL MOBILE SAFETY — NO HORIZONTAL LEAKS
     ====================================================== */
  html, body {
    overflow-x: hidden !important;
  }

  * {
    max-width: 100vw;
    box-sizing: border-box !important;
  }

  /* ======================================================
     HEADER — SINGLE COLUMN + WIDTH LOCK
     ====================================================== */
  .je-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .je-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }

  .je-header-left {
    justify-content: flex-start !important;
  }

  .je-header-right {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* ======================================================
     SEARCH BAR — FULL WIDTH + STICKY (NO PROFILE CLASH)
     ====================================================== */
  .je-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;

    position: sticky !important;
    top: 64px !important; /* below logo + profile */
    z-index: 900 !important;

    background: #ffffff !important;
    overflow: hidden !important;
  }

  .je-search-bar input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 12px 44px 12px 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
  }

  .je-search-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    opacity: 0.75;
  }

  /* ======================================================
     CATEGORY HEADERS — TITLE ONLY
     ====================================================== */
  .category-card-header {
    height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 10px !important;
  }

  .category-card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .category-card-slogan,
  .category-card-desc {
    display: none !important;
  }

  .category-card-header::after {
    font-size: 20px !important;
    right: 14px !important;
  }

  /* ======================================================
     MENU CONTAINER — WIDTH LOCK
     ====================================================== */
  #menuContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ======================================================
     ITEM ROWS — SINGLE LINE, NO OVERFLOW
     ====================================================== */
  .je-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .je-item-img-wrap {
    display: none !important;
  }

  .je-item-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .je-item-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    margin: 0 !important;
  }

  .je-item-desc,
  .je-item-price {
    display: none !important;
  }

  .je-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* ======================================================
     ACTION BUTTONS
     ====================================================== */
  .je-info-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .je-add-btn {
    min-width: 36px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   CART — NEW ITEM FLASH (GOLD, CLEAR, 2 SECONDS)
   ========================================================= */
.je-cart-item.je-cart-new {
  border: 4px solid #d4af37;          /* gold */
  background: #fffdf3;
  border-radius: 8px;

  animation: cartFlashGold 2s ease-out;
}

/* GOLD FLASH KEYFRAMES */
@keyframes cartFlashGold {

  0% {
    box-shadow: 4px 4px 4px 4px0 rgba(212,175,55,0);
    background: #fffdf3;
  }

  15% {
    box-shadow: 4px 4px 4px 4px rgba(212,175,55,0.75);
    background: #fff7d6;
  }

  30% {
    box-shadow: 4px 4px 4px 4px rgba(212,175,55,0.9);
    background: #fffdf3;
  }

  45% {
    box-shadow: 4px 4px 4px 4px rgba(212,175,55,0.75);
    background: #fff7d6;
  }

  65% {
    box-shadow: 4px 4px 4px 4px rgba(212,175,55,0.6);
    background: #fffdf3;
  }

  100% {
    box-shadow: 4px 4px 4px 4px rgba(212,175,55,0);
    background: transparent;
  }
}





/* =========================================================
   PROFILE MODAL — MOBILE HARD FIX (6.2" SAFE)
   ========================================================= */
@media (max-width: 768px) {

  /* Enable touch + scrolling */
  #profileModal.sc-modal {
    pointer-events: auto !important;
    align-items: flex-start !important;
    padding: 12px 0 !important;
  }

  /* Modal box */
  #profileModal .sc-modal-content {
    width: 100% !important;
    max-width: 100% !important;

    max-height: calc(92vh - 20px) !important; /* 🔥 KEY */
    height: auto !important;

    padding: 14px !important;
    border-radius: 16px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important; /* parent must NOT scroll */
  }

  /* Inner scroll area (THIS scrolls) */
  #profileModal .sc-modal-content > * {
    max-width: 100% !important;
  }

  /* Force scrolling inside modal */
  #profileModal .sc-modal-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* FONT SCALE FIX — ignore global 22px rule */
  #profileModal,
  #profileModal * {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Inputs */
  #profileModal input,
  #profileModal textarea {
    font-size: 14px !important;
    padding: 10px !important;
  }

  /* Title */
  #profileModal .sc-modal-title {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }

  /* Labels */
  #profileModal label,
  #profileModal .sc-label {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  /* Save button stays visible */
  #profileModal .sc-btn,
  #profileModal .sc-btn-primary {
    font-size: 14px !important;
    padding: 10px !important;
    margin-top: 8px !important;
  }
}


/* =========================================================
   MOBILE — COMPACT CATEGORY + ITEM VIEW (CLEAN, SINGLE SOURCE)
   ========================================================= */
@media (max-width: 768px) {

  /* =====================================================
     CATEGORY BLOCK (CONTROLLED BREATHING ROOM)
     ===================================================== */
  .je-category-block {
    margin-bottom: 10px !important;     /* subtle, intentional gap */
    padding: 0 !important;
  }

  /* =====================================================
     CATEGORY HEADER (SLIM BUT TAP-FRIENDLY)
     ===================================================== */
  .category-card-header {
    height: 40px !important;
    padding: 0 14px !important;
    margin: 4px 0 !important;          /* slightly more than items */
    border-radius: 12px !important;
  }

  .category-card-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .category-card-header::after {
    font-size: 16px !important;        /* ✅ fixed typo (was 16x) */
  }

  /* extra separation ONLY when expanded */
  .je-category-block:not(.collapsed) .category-card-header {
    margin-bottom: 6px !important;
  }

  /* =====================================================
     ITEMS GRID (TIGHT)
     ===================================================== */
  .je-items-grid {
    gap: 4px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
  }

  /* =====================================================
     ITEM CARD (SLIM VERSION)
     ===================================================== */
  .je-item-card {
    padding: 4px 8px !important;
    border-radius: 10px !important;

    box-shadow:
      0 0 0 2px rgba(212,175,55,0.35),
      0 2px 4px rgba(0,0,0,0.08) !important;
  }

  /* =====================================================
     ITEM ROW CONTENT
     ===================================================== */
  .je-item-row {
    padding: 3px 8px !important;
    gap: 3px !important;
  }

  .je-item-name {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* hide non-essential info on mobile */
  .je-item-desc,
  .je-item-price {
    display: none !important;
  }

  /* =====================================================
     ACTION BUTTONS
     ===================================================== */
  .je-item-actions {
    gap: 6px !important;
  }

  .je-add-btn {
    height: 24px !important;
    min-width: 34px !important;
    font-size: 20px !important;
    padding: 0 !important;
  }

  .je-info-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   MOBILE — COMPACT CATEGORY BAR + COMPACT CATEGORY LIST/ITEMS
   (single block, no duplicates)
   ========================================================= */
@media (max-width: 768px) {

  /* =========================
     TOP HORIZONTAL CATEGORY BAR
     ========================= */

  /* the whole bar: reduce side padding + height */
  #categoryBar.je-category-bar {
    padding: 6px 8px !important;     /* was bigger */
    gap: 6px !important;             /* tighter */
    margin-bottom: 8px !important;
  }

  /* inner scroll container: tighter spacing between pills */
  #catScrollContainer.cat-scroll-inner {
    gap: 8px !important;             /* was 12px */
  }

  /* category pills (buttons inserted by JS) */
  #catScrollContainer .je-cat-btn {
    padding: 6px 12px !important;    /* was 10px 22px */
    font-size: 14px !important;      /* was 17px */
    font-weight: 700 !important;
    border-radius: 999px !important;
  }

  /* left/right arrow buttons: make them smaller so they steal less width */
  #catLeft.cat-scroll-btn,
  #catRight.cat-scroll-btn {
    width: 30px !important;          /* was 42px */
    height: 28px !important;         /* was 32px */
    font-size: 16px !important;      /* was 20px */
    margin: 0 2px !important;        /* was 0 6px */
    border-radius: 14px !important;
  }


  /* =========================
     CATEGORY LIST (VERTICAL)
     ========================= */

  .je-category-block {
    margin-bottom: 10px !important;   /* 👈 “little room”, not huge gaps */
    padding: 2 !important;
  }

  .category-card-header {
    height: 40px !important;
    padding: 0 14px !important;
    margin: 3px 0 !important;
    border-radius: 12px !important;
  }

  .je-category-block:not(.collapsed) .category-card-header {
    margin-bottom: 6px !important;   /* tiny space before items */
  }

  .category-card-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .category-card-header::after {
    font-size: 16px !important;      /* ✅ fixed typo (was 16x) */
  }


  /* =========================
     ITEMS (SLIM)
     ========================= */

  .je-items-grid {
    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  .je-item-card {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    box-shadow:
      0 0 0 2px rgba(212,175,55,0.35),
      0 2px 4px rgba(0,0,0,0.08) !important;
  }

  .je-item-row {
    padding: 6px 8px !important;
    gap: 4px !important;
  }

  .je-item-name {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .je-item-desc,
  .je-item-price {
    display: none !important;
  }

  .je-item-actions {
    gap: 6px !important;
  }

  .je-add-btn {
    height: 28px !important;
    min-width: 34px !important;
    font-size: 20px !important;
    padding: 0 !important;
  }

  .je-info-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   MOBILE — HEADER / SEARCH / PROFILE (REAL DOM TARGETS)
   ========================================================= */
@media (max-width: 768px) {

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

  header.je-header {
    padding: 8px 10px !important;
  }

  .je-header-inner {
    gap: 6px !important;
  }

  /* =========================
     LOGO + TEXT
     ========================= */

  .sc-logo-title {
    gap: 6px !important;
    align-items: center !important;
  }

  .sc-logo-circle {
    width: 42px !important;
    height: 42px !important;
  }

  .sc-restaurant-name {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .sc-restaurant-sub {
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* =========================
     SEARCH BAR
     ========================= */

  .je-search-bar {
    margin: 6px 0 !important;
  }

  .je-search-bar input {
    height: 38px !important;
    font-size: 14px !important;
    padding: 0 36px 0 12px !important;
    border-radius: 12px !important;
  }

  .je-search-bar .search-icon {
    right: 10px !important;
    font-size: 16px !important;
  }

  /* =========================
     RIGHT NAV (HOME / PROFILE / CHECKOUT)
     ========================= */

  .je-header-right {
    gap: 8px !important;
  }

  .je-header-right a {
    font-size: 14px !important;
    white-space: nowrap;
  }

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

  .je-header-right .profile-btn,
  .je-header-right .sc-profile-btn {
    padding: 6px 10px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
    gap: 6px !important;
  }

  .je-header-right .profile-btn img,
  .je-header-right .sc-profile-btn img {
    width: 28px !important;
    height: 28px !important;
  }

  .je-header-right .profile-btn span,
  .je-header-right .sc-profile-btn span {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .je-header-right .caret {
    font-size: 14px !important;
    margin-left: 2px !important;
  }

}




/* =========================================================
   MOBILE — PROFILE DROPDOWN AS MODAL OVERLAY
   ========================================================= */
@media (max-width: 768px) {

  /* Darken everything behind */
  body.profile-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
  }

  /* Dropdown itself */
  #userDropdown,
  .sc-user-menu {
    position: fixed !important;
    top: 90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 32px) !important;
    max-width: 320px !important;

    border-radius: 14px !important;
    z-index: 9999 !important;
  }

  /* Make items tighter */
  .sc-user-option {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
  
   /* =========================
     USER BOX — MOBILE SHRINK (SAFE)
     ========================= */

  #userBox.sc-user-box {
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  #userBox.sc-user-box .sc-user-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
  }

  #userBox.sc-user-box #userBoxLabel {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #userBox.sc-user-box .sc-user-arrow {
    font-size: 12px !important;
  }
}



  /* =========================
     CART ITEMS LIST (ULTRA DENSE — REAL SELECTORS)
     ========================= */
@media (max-width: 768px) { 
#cartItems.je-cart-items{
    gap: 0 !important;
    padding-right: 4px !important;
  }
  
  .je-cart-title {
   font-size: 15px !important;
   font-weight: 700 !important;
   color: #00B7B3 !important;
   
}

  /* each row tighter */
  #cartItems.je-cart-items .je-cart-item{
    padding: 4px 0 !important;                 /* was 10–12px */
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    align-items: flex-start !important;
  }

  /* name tighter */
  #cartItems.je-cart-items .je-cart-left .je-cart-name{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
    font-size: 13px !important;
  }

  /* right side stays compact */
  #cartItems.je-cart-items .je-cart-right{
    gap: 6px !important;
    align-items: center !important;
  }

  /* qty box smaller */
  #cartItems.je-cart-items .je-cart-qty-box{
    height: 22px !important;                   /* was 34px */
    padding: 0 6px !important;                 /* was 4px 10px */
    gap: 6px !important;
    border-radius: 7px !important;
  }

  /* +/- and bin buttons smaller */
  #cartItems.je-cart-items .je-qty-btn,
  #cartItems.je-cart-items .je-delete-btn{
    font-size: 14px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* qty number tighter */
  #cartItems.je-cart-items .je-cart-qty{
    width: 18px !important;                    /* was 28px */
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* price smaller */
  #cartItems.je-cart-items .je-cart-price{
    font-size: 13px !important;
    line-height: 1 !important;
    min-width: 46px !important;
  }
  /* =========================
   MOBILE — MOD ROW FONT SCALE (MATCH ITEM SIZE)
   ========================= */
#cartItems.je-cart-items .je-cart-mod-row{
  margin-left: 14px !important;     /* less indent */
  padding: 2px 0 !important;
  padding-left: 8px !important;
}

#cartItems.je-cart-items .je-cart-mod-left{
  font-size: 13px !important;       /* match item name size */
  line-height: 1.05 !important;
  font-weight: 600 !important;
}

#cartItems.je-cart-items .je-cart-mod-price{
  font-size: 13px !important;       /* match item name size */
  line-height: 1.05 !important;
  min-width: 46px !important;       /* stop huge right column */
  font-weight: 700 !important;
}
}

/* =========================================================
   MOBILE — CART ITEMS SCROLL (FIX OVERLAP, DYNAMIC HEIGHT)
   ========================================================= */
@media (max-width: 768px) {

  /* cart becomes a column: items scroll, summary stays visible */
  aside#cartPanel.je-cart {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* the ITEMS list is the only scroll area */
  #cartItems.je-cart-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* 🔥 dynamic max height (viewport-aware) */
    max-height: calc(100svh - 320px) !important;

    /* breathing room so last row doesn't touch summary */
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;

    -webkit-overflow-scrolling: touch !important;
  }

  /* summary must never overlap */
  .je-cart-summary {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    background: #fff !important;
  }

}

/* =========================================================
   MOBILE — CART SUMMARY (PROPORTIONATE + COMPACT)
   ========================================================= */
@media (max-width: 768px) {

  /* overall summary container */
  .je-cart-summary {
    margin-top: 4px !important;
    padding-top: 6px !important;
    gap: 2px !important;
  }

  /* all rows inside summary */
  .je-cart-summary .je-row {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  /* Subtotal / Total rows */
  .je-cart-summary .je-row span,
  .je-cart-summary .je-row div {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* minimum order + warning text */
  .je-cart-summary p,
  #minOrderMessage {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
  }

  /* voucher container */
  #voucherContainer.je-voucher-box {
    margin: 4px 0 !important;
    padding: 4px 0 !important;
  }

  #voucherContainer label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }

  #voucherContainer input {
    height: 28px !important;
    font-size: 13px !important;
    padding: 4px 6px !important;
  }

  #voucherContainer button {
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  /* voucher checkbox row */
  .je-cart-summary input[type="checkbox"] {
    transform: scale(0.9);
    margin-right: 6px !important;
  }

  /* checkout button — still strong, but not obese */
  #checkoutBtn.je-checkout-btn {
    height: 24px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
    margin-top: 6px !important;
  }
  
}


/* =========================================================
   MOBILE — CART SUMMARY (PROPORTIONATE & COMPACT)
   ========================================================= */
@media (max-width: 768px) {

  /* SUMMARY CONTAINER */
  .je-cart-summary {
    padding-top: 6px !important;
    gap: 6px !important;
  }

  /* SUBTOTAL ROW */
  .je-cart-summary .je-row {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
  }

  /* SUBTOTAL / TOTAL TEXT */
  .je-cart-summary span,
  .je-cart-summary label {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* MIN ORDER / WARNING TEXT */
  .je-cart-summary .je-min-order,
  .je-cart-summary .min-delivery,
  .je-cart-summary .delivery-warning {
    margin: 2px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  /* =========================
     VOUCHER BOX (TIGHT)
     ========================= */
  #voucherContainer.je-voucher-box {
    margin: 4px 0 !important;
    padding: 4px 0 !important;
  }

  #voucherContainer input {
    height: 28px !important;
    font-size: 13px !important;
    padding: 4px 6px !important;
  }

  #voucherContainer button {
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  /* APPLIED VOUCHER ROW */
  #voucherRow,
  .je-voucher-row {
    margin: 2px 0 !important;
    padding: 2px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
  }

  /* =========================
     CHECKOUT BUTTON (CENTERED)
     ========================= */
  button#checkoutBtn.je-checkout-btn {
    height: 24px !important;               /* slimmer but tappable */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;        /* 🔥 vertical centering */
    justify-content: center !important;    /* 🔥 horizontal centering */
    font-size: 16px !important;
    line-height: 1 !important;
    margin-top: 6px !important;
  }

}


/* =========================================================
   MOBILE — COLLECTION / DELIVERY TOGGLE (PROPORTIONATE)
   ========================================================= */
@media (max-width: 768px) {

  /* TOGGLE WRAPPER */
  .je-order-toggle {
    height: 40px !important;           /* 🔥 controlled height */
    padding: 3px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  /* BOTH BUTTONS */
  .je-order-toggle .toggle-btn {
    flex: 1 1 0 !important;
    height: 100% !important;
    padding: 0 !important;             /* 🔥 kill vertical padding */
    display: flex !important;
    align-items: center !important;     /* 🔥 vertical centering */
    justify-content: center !important; /* 🔥 horizontal centering */
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 18px !important;
  }

  /* ACTIVE BUTTON */
  .je-order-toggle .toggle-btn.active {
    height: 100% !important;
  }

}

/* =========================================================
   MOBILE — PULL CART UP TOWARDS UPSELL BUBBLE
   ========================================================= */
@media (max-width: 768px) {

  aside#cartPanel.je-cart {
    margin-top: -12px !important; /* 👈 tighten gap to toggle */
  }

}



/* =========================================================
   MOBILE — CART INLINE UPSELL (COMPACT GOLD CARD)
   ========================================================= */
@media (max-width: 768px) {

  /* kill banner behaviour */
  #promoUpsellBanner {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 6px 0 8px 0 !important;
  }

  /* greeting (Hi Abdul...) */
  #promoUpsellBanner .upsellGreeting {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin: 0 0 4px 2px !important;
    display: block !important;
  }

  /* the ACTUAL card */
  .je-upsell-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 8px 10px !important;
    margin: 0 !important;

    background: #fff !important;
    border-radius: 12px !important;

    /* GOLD + SOFT 3D */
    border: 1.5px solid rgba(212,175,55,0.65) !important;
    box-shadow:
      0 2px 4px rgba(0,0,0,0.08),
      inset 0 0 0 1px rgba(255,215,100,0.35) !important;
  }

  /* item name */
  .je-upsell-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  /* price line */
  .je-upsell-price {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* crossed out old price */
  .je-upsell-price del,
  .je-upsell-old {
    font-size: 11px !important;
    opacity: 0.6 !important;
    margin-right: 4px !important;
  }

  /* new price */
  .je-upsell-new,
  .je-upsell-price strong {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* + button */
  .je-upsell-add {
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
}


/* =========================================================
   LMO — FORCE SINGLE ROW PER ITEM (NO STACKING)
   ========================================================= */
@media (max-width: 768px) {

  /* ---------------------------------
     GOLD CARD (UNCHANGED)
  --------------------------------- */
  #lastMinutePanel .lmo-item {
    border: 1.5px solid #d4af37;
    border-radius: 12px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 2px 6px rgba(0,0,0,.08);
  }

  /* ---------------------------------
     FORCE SINGLE HORIZONTAL ROW
  --------------------------------- */
  #lastMinutePanel .lmo-item label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0;
  }

  /* ---------------------------------
     CHECKBOX — LEFT
  --------------------------------- */
  #lastMinutePanel .lmo-check {
    flex: 0 0 auto;
    margin: 0;
    transform: scale(0.85);
  }

  /* ---------------------------------
   ITEM NAME + PRICE — ONE LINE
--------------------------------- */
#lastMinutePanel .lmo-title {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;   /* name left, price right */
  gap: 8px;

  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
  overflow: hidden;
}


/* ---------------------------------
   PRICES — INLINE RIGHT
--------------------------------- */
#lastMinutePanel .lmo-prices {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-left: auto;   /* pushes to right */
  white-space: nowrap;
  font-size: 13px;
}


  /* 🔴 OLD PRICE — RED + STRIKETHROUGH */
  #lastMinutePanel .lmo-prices .lmo-old,
  #lastMinutePanel .lmo-prices del {
    color: #c00000 !important;
    text-decoration: line-through;
    font-size: 12px;
    opacity: 0.8;
  }

  /* NEW PRICE — BLACK */
  #lastMinutePanel .lmo-prices .lmo-new,
  #lastMinutePanel .lmo-prices span,
  #lastMinutePanel .lmo-prices strong {
    color: #000;
    font-weight: 700;
    font-size: 13px;
  }

  /* ---------------------------------
     BUTTONS — 50% SMALLER (LMO ONLY)
  --------------------------------- */
  #lastMinutePanel .lmo-add-btn,
  #lastMinutePanel .lmo-skip-btn {
    height: 36px;          /* ↓ was ~60 */
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  #lastMinutePanel .lmo-add-btn {
    font-weight: 600;
  }

  #lastMinutePanel .lmo-skip-btn {
    font-size: 12px;
  }
  
  /* Tighten spacing so both buttons fit */
  #lastMinutePanel .lmo-add-btn,
  #lastMinutePanel .lmo-skip-btn {
    margin: 6px auto; 
}
/* =========================================================
   LMO — MOBILE REAL FIX (MORE ITEM SPACE)
========================================================= */
@media (max-width: 768px) {

  /* PANEL = vertical layout */
  #lastMinutePanel.lmo-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  /* TOP HEADER */
  #lastMinutePanel .lmo-header:first-of-type {
    flex: 0 0 auto;
  }

  /* ======================================
     ITEMS AREA — TAKE ALL AVAILABLE SPACE
  ====================================== */
  #lastMinutePanel .lmo-body {
    flex: 1 1 auto !important;
    min-height: 200px !important; /* ensures large items area */
    max-height: none !important;  /* remove your 40vh / 85vh limits */
    overflow-y: auto !important;
  }

  /* ======================================
     MESSAGE + BUTTON AREA → STICK BOTTOM
  ====================================== */
  #lastMinutePanel .lmo-body + .lmo-header {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 12px;
  }

  /* buttons */
  #lastMinutePanel #lmoAddBtn,
  #lastMinutePanel #lmoSkipBtn {
    flex: 0 0 auto;
    margin: 8px auto !important;
  }

}


/* =========================================================
   CHECKOUT — MOBILE ORDER SUMMARY FIRST (UX FIX)
   ========================================================= */
@media (max-width: 768px) {

  /* Switch to flex so we can reorder */
  .sc-checkout-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Order summary FIRST */
  .sc-checkout-summary {
    order: -1 !important;
    margin-bottom: 20px;
  }

  /* Form SECOND */
  .sc-checkout-form-section {
    order: 1 !important;
  }
}

  
  
/* =========================================================
   CHECKOUT — MOBILE: HARD SHRINK (NO LAYOUT CHANGES)
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- SUMMARY CARD ---------- */
  .sc-checkout-summary {
    padding: 14px !important;
  }

  .sc-checkout-summary h2 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Order items */
  .sc-summary-item {
    padding: 4px 0 !important;
    margin: 0 !important;
  }

  .sc-summary-top {
    font-size: 14px !important;
    line-height: 1.25 !important;
    padding: 2px 0 !important;
  }

  .sc-summary-top span {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Prices */
  .sc-summary-top span:last-child {
    font-weight: 600 !important;
    white-space: nowrap;
  }

  /* Totals rows */
  .sc-cart-summary .sc-row {
    font-size: 11px !important;
    padding: 1px 0 !important;
  }

  .sc-cart-summary .sc-total-row {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding-top: 1px !important;
  }

  /* ---------- FORM SECTION ---------- */
  .sc-checkout-form-section {
    padding: 10px !important;
  }

  .sc-checkout-form-section h2 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  label {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .sc-form-row {
    margin-bottom: 10px !important;
  }

  input,
  textarea,
  select {
    font-size: 14px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  textarea {
    min-height: 60px !important;
  }

}

/* =========================================================
   CHECKOUT — MOBILE: COMPACT TOTAL ROWS ONLY
   ========================================================= */
@media (max-width: 768px) {

  /* Subtotal / Discount / Delivery rows */
  .sc-cart-summary .sc-row {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 4px 0 !important;
  }

  .sc-cart-summary .sc-row span {
    font-size: 14px !important;
    font-weight: 500;
  }

  /* Final TOTAL row */
  .sc-cart-summary .sc-total-row {
    font-size: 15px !important;
    line-height: 1.3 !important;
    padding: 6px 0 !important;
  }

  .sc-cart-summary .sc-total-row span,
  .sc-cart-summary .sc-total-row strong,
  .sc-cart-summary .sc-total-row b {
    font-size: 14px !important;
    font-weight: 700;
  }
}


/* =========================================================
   CHECKOUT — MOBILE: COMPACT PAYMENT TOGGLE + PLACE ORDER
   ========================================================= */
@media (max-width: 768px) {

  /* Payment method container */
  .sc-toggle-options {
    padding: 4px !important;
    gap: 6px !important;
  }

  /* Cash / Card toggle buttons */
  .sc-toggle-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 18px !important;
    border-radius: 14px !important;
  }

  .sc-toggle-btn svg,
  .sc-toggle-btn img {
    width: 10px !important;
    height: 10px !important;
  }

  /* Place order button */
  #placeOrderBtn {
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-height: 35px !important;
    border-radius: 12px !important;
  }
}


  
  
  
   
/* =========================================================
   ORDER COMPLETE — MOBILE TEXT + BUTTON SCALE DOWN ONLY
   ========================================================= */
@media (max-width: 768px) {

  /* ===============================
     TEXT BLOCK (SCRN2)
     =============================== */
  .success-wrapper h1 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .success-wrapper p,
  #customerBlock p,
  #customerBlock span {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 4px 0 !important;
  }

  .detail-label {
    font-size: 14px !important;
    font-weight: 600;
  }

  /* ===============================
     BACK TO MENU BUTTON (SCRN1)
     =============================== */
  .home-btn {
    font-size: 14px !important;
    padding: 8px 14px !important;
    min-height: 40px !important;
    border-radius: 12px;
  }
}

  /* =========================================================
   ORDER COMPLETE — ORDER REFERENCE LINE ONLY
   ========================================================= */
@media (max-width: 768px) {

  .success-wrapper p strong {
    font-size: 18px !important;
    font-weight: 600;
  }

  .success-wrapper p {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}
  
  
  
  
  


/* =========================================================
   MOBILE — CART SUMMARY FONT SIZE FIX (≤768px)
   Subtotal / Delivery / Discount / Voucher / Total + prices
   ========================================================= */
@media (max-width: 768px) {

  #cartPanel .je-cart-summary .je-row,
  #cartPanel .je-cart-summary .je-row span,
  #cartPanel .je-cart-summary .je-row div {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* Right-side prices */
  #cartPanel .je-cart-summary .je-row span:last-child {
    font-size: 13px !important;
  }

  /* Voucher row */
  #cartPanel #voucherRow,
  #cartPanel #voucherRow .voucher-label,
  #cartPanel #voucherAmount,
  #cartPanel #removeVoucherBtn {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* Total row (label + price) */
  #cartPanel .je-total-row span,
  #cartPanel .je-total-row #cartTotal {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

}

/* =========================================================
   DESKTOP GLOBAL SCALE — STEP 2 (NON-MOBILE ONLY)
   ========================================================= */
@media (min-width: 769px) {

  html {
    font-size: 88%;
  }

}


/* =========================================================
   DESKTOP — CATEGORY BAR HEIGHT FIX (NO STYLE CHANGE)
   ========================================================= */
@media (min-width: 769px) {

  nav.je-category-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;   /* 🔥 kills white space */
    min-height: unset !important;
    height: auto !important;
  }

  /* ensure contents don’t stretch bar */
  nav.je-category-bar > * {
    align-items: center;
  }

}

/* =====================================================
   PROMO BANNER T&C OVERLAY
===================================================== */

#promoWideBanner {
  position: relative;
}

#promoWideBanner img {
  width: 100%;
  display: block;
}

#promoTcText {
  position: absolute;
  bottom: 12px;
  right: 20px;
  z-index: 999999; /* VERY HIGH */

  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;

  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border-radius: 6px;
}


/* =========================================
   TERMS MODAL — 50% SMALLER ON MOBILE
========================================= */

@media (max-width: 768px) {

  #tcModal .sc-modal-content {
    max-width: 200px !important;   /* 50% smaller */
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  #tcModal .sc-modal-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  #tcModal p {
    font-size: 12px !important;
    margin: 6px 0 !important;
  }

  #tcModal .sc-order-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

}


/* =====================================================
   MOBILE ONLY — PROMO BANNER (≤768px)
   FINAL OVERRIDE — KEEP AT BOTTOM OF CSS
===================================================== */
@media (max-width: 768px) {

  /* container */
  #promoWideBanner,
  .sc-promo-wide {
    margin: 6px 10px !important;
    border-radius: 0px !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* image — natural scaling */
  #promoWideBanner img,
  .sc-promo-wide img {
    width: 100% !important;
    height: auto !important;        /* prevents squash */
    object-fit: contain !important; /* keeps full banner */
    display: block !important;
  }

  /* T&C overlay — smaller + tighter */
  #promoTcText {
    font-size: 11px !important;
    padding: 2px 6px !important;
    bottom: 0px !important;
    right: 10px !important;
    border-radius: 4px !important;
  }

}


  
  
  /* =========================================================
   LMO — ULTRA COMPACT MOBILE (MORE ITEMS VISIBLE)
   PUT AT VERY BOTTOM OF CSS
========================================================= */
@media (max-width: 768px) {

  /* ==============================
     PANEL HEIGHT — FULL SCREEN
  ============================== */
  #lastMinutePanel {
    height: 96vh !important;
    max-height: 96vh !important;
  }

  /* ==============================
     TOP HEADER — SMALLER
  ============================== */
  #lastMinutePanel .lmo-header {
    padding: 10px 14px !important;
    font-size: 16px !important;
  }

  /* ==============================
     ITEM CARD — MUCH SMALLER
  ============================== */
  #lastMinutePanel .lmo-item {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }

  /* checkbox smaller */
  #lastMinutePanel .lmo-check {
    transform: scale(0.7) !important;
  }

  /* item name smaller */
  #lastMinutePanel .lmo-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* prices smaller */
  #lastMinutePanel .lmo-prices {
    font-size: 12px !important;
    gap: 4px !important;
  }

  /* ==============================
     ITEMS AREA — MAX SPACE
  ============================== */
  #lastMinutePanel .lmo-body {
    padding: 4px 10px !important;
  }

  /* ==============================
     MESSAGE TEXT — SMALLER
  ============================== */
  #lastMinutePanel .lmo-body + .lmo-header {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* ==============================
     BUTTONS — SMALLER
  ============================== */
  #lastMinutePanel .lmo-add-btn {
    height: 34px !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
  }

  #lastMinutePanel .lmo-skip-btn {
    height: 30px !important;
    font-size: 12px !important;
    padding: 3px 10px !important;
  }

}

  
  
   /* =========================================================
   LMO — MOBILE FULL HEIGHT + BOTTOM LOCK
   (NO SIZE CHANGES)
========================================================= */
@media (max-width: 768px) {

  /* PANEL = FULL SCREEN */
  #lastMinutePanel {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  /* TOP HEADER */
  #lastMinutePanel > .lmo-header:first-of-type {
    flex: 0 0 auto;
  }

  /* ITEMS AREA — TAKES ALL REMAINING SPACE */
  #lastMinutePanel .lmo-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* MESSAGE BLOCK — STAYS BELOW ITEMS */
  #lastMinutePanel .lmo-body + .lmo-header {
    flex: 0 0 auto !important;
    margin-top: auto !important;
  }

  /* BUTTONS — LOCKED AT BOTTOM */
  #lastMinutePanel #lmoAddBtn,
  #lastMinutePanel #lmoSkipBtn {
    flex: 0 0 auto !important;
  }

} 
  


@media (max-width:768px) {

/* ========================================
   FORCE TITLE + PRICE SAME LINE
======================================== */

#lastMinutePanel .lmo-item label {
  display: grid !important;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
}

/* checkbox column */
#lastMinutePanel .lmo-check {
  grid-column: 1;
}

/* item name */
#lastMinutePanel .lmo-title {
  grid-column: 2;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* prices on right */
#lastMinutePanel .lmo-prices {
  grid-column: 3;
  margin: 0 !important;
  display: flex !important;
  gap: 6px;
}

/* tighter cards */
#lastMinutePanel .lmo-item {
  padding: 6px 10px !important;
}
/* ========================================
   LMO CARD — 20% MORE HEIGHT
======================================== */
#lastMinutePanel .lmo-item {
  padding: 8px 10px !important;   /* was ~6–8 → taller */
  margin-bottom: 2px;             /* slightly more spacing */
}

#lastMinutePanel .lmo-item label {
  min-height: 28px;                /* ensures consistent height */
  align-items: center;
}

/* slightly more breathing room for text */
#lastMinutePanel .lmo-title {
  line-height: 1.2;
}

/* keep checkbox aligned */
#lastMinutePanel .lmo-check {
  transform: scale(0.9);
}

}
  
 
  /* ========================================
   LMO — BIG TOUCH CHECKBOX (MOBILE)
======================================== */
@media (max-width: 768px) {

  #lastMinutePanel .lmo-check {
    transform: scale(2.6) !important; /* bigger tap target */
    margin-right: 10px !important;
    cursor: pointer;
  }

  /* increase tap area */
  #lastMinutePanel .lmo-item label {
    padding: 20px 0;
  }

}

/* ============================================
   INLINE UPSELL — COMPACT SINGLE ROW VERSION
============================================ */

/* Reduce banner padding */
#promoUpsellBanner {
    padding: 10px 14px !important;
}

/* Remove large vertical gap */
#upsellItems {
    gap: 6px !important;
}

/* Each upsell row = single compact row */
.je-upsell-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 6px 8px !important;   /* 🔥 reduce height */
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* Remove border from last item */
.je-upsell-card:last-child {
    border-bottom: none !important;
}

/* Make text inline */
.je-upsell-text {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Name smaller + tighter */
.je-upsell-name {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Prices inline */
.je-upsell-price {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Smaller + button */
.je-upsell-add-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
}

  #userDropdown {
  display: none;
  flex-direction: column;
}

#userDropdown.open {
  display: flex;
}