/* ═══════════════════════════════════════════════
   EKOYINI MOBILE BAR — GLOBAL DESIGN SYSTEM
      "Golden Hour" — Ivory / Gold / Fiery Red-Orange

      Retheme note: originally dark, then flipped to a light/high-contrast
      cream-and-forest-green theme for sunlight legibility. This is a
      second palette pass on top of that light base — same reasoning
      (outdoor daylight legibility on a phone screen) plus a deliberate
      brand repositioning: warm ivory + electric gold + fiery red-orange,
      built to read as premium ("worth the delivery fee vs. a club
      markup") rather than budget, while staying legible at noon.

      Color ROLES, not just names, changed here:
        --green*  → now reserved ONLY for savings/success signals (the
                    Cooler Box builder, "done" states) — never brand
                    chrome or CTAs. Its hex is untouched.
        --terra   → now the fiery red-orange action/price color (was
                    terracotta). --terra-light is the deepened,
                    AA-contrast-safe shade used for actual button fills
                    and text; plain --terra (very vivid) is reserved for
                    borders/accents where it isn't sitting under white
                    text, since white-on-#FF4500 fails AA at button
                    text sizes.
        --gold*   → new. Brand-identity color (wordmark, avatars) — kept
                    separate from the action color on purpose, so "this
                    is Ekoyini" and "tap this" stay visually distinct.
                    --gold-deep is the text-safe shade; --gold itself is
                    the vivid brand swatch for non-text use.
      Token *names* mostly unchanged so every page picks up the new
      values with no per-page edits. The age gate and onboarding intro
      stay deliberately dark/black — see their own comments.
   ═══════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --black: #faf6ee;
  --deep: #f1e9d5;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #e8dcc0;
  --green: #1a6b3a;
  --green-mid: #cc3700;
  --green-light: #cc3700;
  --green-glow: rgba(255, 69, 0, 0.12);
  --gold: #ffc700;
  --gold-deep: #7a5c00;
  --terra: #ff4500;
  --terra-light: #cc3700;
  --white: #17140e;
  --muted: #6b6152;
  --faint: #b5aa8f;
  --danger: #d6362a;

  --font-display: "Fraunces", serif;
  --font-body: "Space Grotesk", sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --nav-h: 60px;
  --bottom-h: 64px;
}

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

         html {
               scroll-behavior: smooth;
         }

         body {
               font-family: var(--font-body);
                 background: var(--black);
                   color: var(--white);
                     min-height: 100vh;
                       overflow-x: hidden;
                         -webkit-font-smoothing: antialiased;
         }

         a {
               text-decoration: none;
                 color: inherit;
         }
         button {
               cursor: pointer;
                 font-family: var(--font-body);
         }
         input,
         textarea,
         select {
               font-family: var(--font-body);
         }
         img {
               max-width: 100%;
         }

         /* ── SCROLLBAR ── */
         ::-webkit-scrollbar {
               width: 4px;
                 height: 4px;
         }
         ::-webkit-scrollbar-track {
               background: var(--deep);
         }
         ::-webkit-scrollbar-thumb {
               background: var(--border);
                 border-radius: 4px;
         }

         /* ══════════════════════════════ TOP NAVBAR ══════════════════════════════ */
         .navbar {
               position: sticky;
                 top: 0;
                   z-index: 100;
                     height: var(--nav-h);
                       display: flex;
                         align-items: center;
                           justify-content: space-between;
                             padding: 0 16px;
                               background: rgba(247, 244, 236, 0.92);
                                 backdrop-filter: blur(12px);
                                   border-bottom: 1px solid var(--border);
         }
         .navbar .logo {
               display: flex;
                 align-items: center;
                   gap: 10px;
         }
         .navbar .logo img {
               height: 38px;
                 width: 38px;
                   object-fit: contain;
                     border-radius: 8px;
         }
         .navbar .logo-text {
               font-family: var(--font-display);
                 font-size: 17px;
                   color: var(--gold-deep);
                     letter-spacing: 0.3px;
         }
         .navbar .nav-right {
               display: flex;
                 align-items: center;
                   gap: 14px;
         }
         .nav-icon-btn {
               background: var(--card);
                 border: 1px solid var(--border);
                   border-radius: 10px;
                     width: 38px;
                       height: 38px;
                         display: flex;
                           align-items: center;
                             justify-content: center;
                               color: var(--white);
                                 font-size: 16px;
                                   position: relative;
                                     transition: border-color 0.2s, background 0.2s;
         }
         .nav-icon-btn:hover {
               border-color: var(--green-light);
                 background: var(--green-glow);
         }
         .nav-icon-btn .badge {
               position: absolute;
                 top: -5px;
                   right: -5px;
                     background: var(--terra);
                       color: #fff;
                         font-size: 9px;
                           font-weight: 700;
                             width: 16px;
                               height: 16px;
                                 border-radius: 50%;
                                   display: flex;
                                     align-items: center;
                                       justify-content: center;
                                         border: 2px solid var(--black);
         }
         .back-arrow {
               width: 38px;
                 height: 38px;
                   display: flex;
                     align-items: center;
                       justify-content: center;
                         background: var(--card);
                           border: 1px solid var(--border);
                             border-radius: 10px;
                               font-size: 18px;
                                 color: var(--white);
                                   transition: all 0.2s;
         }
         .back-arrow:hover {
               border-color: var(--green-light);
         }

         /* ══════════════════════════════ BOTTOM NAV ══════════════════════════════ */
         .bottom-nav {
               position: fixed;
                 bottom: 0;
                   left: 0;
                     right: 0;
                       z-index: 100;
                         height: var(--bottom-h);
                           background: rgba(247, 244, 236, 0.95);
                             backdrop-filter: blur(16px);
                               border-top: 1px solid var(--border);
                                 display: flex;
                                   align-items: center;
                                     justify-content: space-around;
                                       padding: 0 8px;
                                         padding-bottom: env(safe-area-inset-bottom);
         }
         .bnav-item {
               display: flex;
                 flex-direction: column;
                   align-items: center;
                     gap: 3px;
                       flex: 1;
                         padding: 8px 4px;
                           color: var(--muted);
                             font-size: 9px;
                               font-weight: 600;
                                 letter-spacing: 0.4px;
                                   text-transform: uppercase;
                                     transition: color 0.2s;
                                       position: relative;
         }
         .bnav-item svg {
               width: 22px;
                 height: 22px;
                   stroke-width: 1.8;
         }
         .bnav-item.active {
               color: var(--green-light);
         }
         .bnav-item.active::before {
               content: "";
                 position: absolute;
                   top: 0;
                     left: 50%;
                       transform: translateX(-50%);
                         width: 28px;
                           height: 2px;
                             background: var(--green-light);
                               border-radius: 0 0 4px 4px;
         }
         .bnav-item .bnav-badge {
               position: absolute;
                 top: 6px;
                   right: calc(50% - 18px);
                     background: var(--terra);
                       color: #fff;
                         font-size: 9px;
                           font-weight: 700;
                             width: 15px;
                               height: 15px;
                                 border-radius: 50%;
                                   display: flex;
                                     align-items: center;
                                       justify-content: center;
                                         border: 2px solid var(--black);
         }

         /* ══════════════════════════════ PAGE WRAPPER ══════════════════════════════ */
         .page {
               padding-bottom: calc(var(--bottom-h) + 16px);
                 min-height: 100vh;
         }

         /* ══════════════════════════════ ADDRESS BAR ══════════════════════════════ */
         .address-bar {
               display: flex;
                 align-items: center;
                   gap: 10px;
                     background: var(--surface);
                       border-bottom: 1px solid var(--border);
                         padding: 10px 16px;
         }
         .address-bar svg {
               color: var(--green-light);
                 flex-shrink: 0;
         }
         .address-bar input {
               flex: 1;
                 background: transparent;
                   border: none;
                     color: var(--white);
                       font-size: 13px;
                         outline: none;
         }
         .address-bar input::placeholder {
               color: var(--muted);
         }
         .address-bar .addr-save {
               background: var(--terra-light);
                 color: #fff;
                   border: none;
                     padding: 5px 12px;
                       border-radius: 8px;
                         font-size: 11px;
                           font-weight: 700;
                             transition: background 0.2s;
         }
         .address-bar .addr-save:hover {
               background: var(--green-mid);
         }

         /* ══════════════════════════════ SECTION HEADERS ══════════════════════════════ */
         .section-header {
               display: flex;
                 align-items: center;
                   justify-content: space-between;
                     padding: 20px 16px 10px;
         }
         .section-header h2 {
               font-family: var(--font-display);
                 font-size: 18px;
                   color: var(--white);
         }
         .section-header a {
               font-size: 12px;
                 color: var(--green-light);
                   font-weight: 600;
         }

         /* ══════════════════════════════ PILL TAGS ══════════════════════════════ */
         .pill-scroll {
               display: flex;
                 gap: 8px;
                   overflow-x: auto;
                     padding: 0 16px 12px;
                       scrollbar-width: none;
         }
         .pill-scroll::-webkit-scrollbar {
               display: none;
         }
         .pill-tag {
               display: flex;
                 align-items: center;
                   gap: 6px;
                     background: var(--card);
                       color: var(--muted);
                         border: 1px solid var(--border);
                           padding: 7px 14px;
                             border-radius: 20px;
                               white-space: nowrap;
                                 font-size: 12px;
                                   font-weight: 500;
                                     cursor: pointer;
                                       transition: all 0.2s;
                                         flex-shrink: 0;
         }
         .pill-tag.active,
         .pill-tag:hover {
               background: var(--terra-light);
                 border-color: var(--green-mid);
                   color: #fff;
         }

         /* ══════════════════════════════ PRODUCT CARDS ══════════════════════════════ */
         .product-grid {
               display: grid;
                 grid-template-columns: repeat(2, 1fr);
                   gap: 10px;
                     padding: 0 12px;
         }
         .product-card {
               background: var(--card);
                 border: 1px solid var(--border);
                   border-radius: var(--r-md);
                     overflow: hidden;
                       transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
                         position: relative;
         }
         .product-card:active {
               transform: scale(0.97);
         }
         .product-card:hover {
               border-color: var(--green-mid);
                 box-shadow: 0 4px 24px var(--green-glow);
         }
         .product-badge {
               position: absolute;
                 top: 8px;
                   left: 8px;
                     z-index: 1;
                       background: var(--terra);
                         color: #fff;
                           font-size: 9px;
                             font-weight: 700;
                               padding: 2px 7px;
                                 border-radius: 4px;
                                   text-transform: uppercase;
                                     letter-spacing: 0.5px;
         }
         .product-info {
               padding: 10px 10px 12px;
         }
         .product-info h3 {
               font-size: 12px;
                 font-weight: 600;
                   color: var(--white);
                     margin-bottom: 2px;
                       line-height: 1.3;
                         white-space: nowrap;
                           overflow: hidden;
                             text-overflow: ellipsis;
         }
         .product-size {
               font-size: 10px;
                 color: var(--muted);
                   margin-bottom: 8px;
         }
         .product-footer {
               display: flex;
                 align-items: center;
                   justify-content: space-between;
         }
         .product-price {
               font-size: 15px;
                 font-weight: 700;
                   color: var(--green-light);
         }
         .product-price small {
               font-size: 9px;
                 color: var(--muted);
                   text-decoration: line-through;
                     display: block;
                       font-weight: 400;
         }
         .add-btn {
               width: 30px;
                 height: 30px;
                   background: var(--terra-light);
                     border: none;
                       border-radius: 8px;
                         color: #fff;
                           font-size: 18px;
                             font-weight: 300;
                               display: flex;
                                 align-items: center;
                                   justify-content: center;
                                     transition: background 0.2s, transform 0.15s;
                                       flex-shrink: 0;
         }
         .add-btn:active {
               transform: scale(0.88);
         }
         .add-btn:hover {
               background: var(--green-mid);
         }
         .add-btn.added {
               background: var(--terra);
         }

         /* ══════════════════════════════ PROMO / BANNER CARDS ══════════════════════════════ */
         .promo-scroll {
               display: flex;
                 gap: 12px;
                   overflow-x: auto;
                     padding: 0 16px 4px;
                       scrollbar-width: none;
         }
         .promo-scroll::-webkit-scrollbar {
               display: none;
         }
         .promo-card {
               flex-shrink: 0;
                 width: 280px;
                   height: 140px;
                     border-radius: var(--r-md);
                       position: relative;
                         overflow: hidden;
                           display: flex;
                             flex-direction: column;
                               justify-content: flex-end;
                                 padding: 16px;
         }
         .promo-card .promo-bg {
               position: absolute;
                 inset: 0;
                   background: linear-gradient(135deg, #b8860b 0%, #3d2b00 100%);
         }
         .promo-card .promo-bg.terra {
               background: linear-gradient(135deg, #8b3a10 0%, #4a1a04 100%);
         }
         .promo-card .promo-bg.dark {
               background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
         }
         .promo-card .promo-bg.festive {
               background: linear-gradient(135deg, #0d3020 0%, #8b1a1a 100%);
         }
         .promo-card .promo-content {
               position: relative;
                 z-index: 1;
         }
         .promo-card .promo-tag {
               font-size: 9px;
                 font-weight: 700;
                   letter-spacing: 1px;
                     text-transform: uppercase;
                       color: rgba(255, 255, 255, 0.6);
                         margin-bottom: 4px;
         }
         .promo-card .promo-title {
               font-family: var(--font-display);
                 font-size: 18px;
                   font-weight: 700;
                     color: #fff;
                       line-height: 1.2;
                         margin-bottom: 6px;
         }
         .promo-card .promo-cta {
               display: inline-flex;
                 align-items: center;
                   gap: 5px;
                     font-size: 11px;
                       font-weight: 700;
                         color: rgba(255, 255, 255, 0.9);
         }

         /* ══════════════════════════════ CART ITEMS ══════════════════════════════ */
         .cart-item {
               display: flex;
                 align-items: center;
                   gap: 12px;
                     padding: 14px 16px;
                       border-bottom: 1px solid var(--border);
                         background: var(--card);
                           margin: 0 12px 8px;
                             border-radius: var(--r-sm);
         }
         .cart-item-img {
               width: 52px;
                 height: 52px;
                   background: var(--surface);
                     border-radius: 10px;
                       display: flex;
                         align-items: center;
                           justify-content: center;
                             font-family: var(--font-display);
                               font-size: 18px;
                                 font-weight: 700;
                                   color: var(--gold-deep);
                                     flex-shrink: 0;
         }
         .cart-item-info {
               flex: 1;
                 min-width: 0;
         }
         .cart-item-info h3 {
               font-size: 13px;
                 font-weight: 600;
                   color: var(--white);
                     margin-bottom: 2px;
                       white-space: nowrap;
                         overflow: hidden;
                           text-overflow: ellipsis;
         }
         .cart-item-info .ci-size {
               font-size: 11px;
                 color: var(--muted);
         }
         .cart-item-right {
               display: flex;
                 flex-direction: column;
                   align-items: flex-end;
                     gap: 8px;
         }
         .cart-item-price {
               font-size: 14px;
                 font-weight: 700;
                   color: var(--green-light);
         }
         .qty-control {
               display: flex;
                 align-items: center;
                   gap: 8px;
         }
         .qty-btn {
               width: 26px;
                 height: 26px;
                   background: var(--surface);
                     border: 1px solid var(--border);
                       border-radius: 6px;
                         color: var(--white);
                           font-size: 14px;
                             display: flex;
                               align-items: center;
                                 justify-content: center;
                                   transition: all 0.15s;
         }
         .qty-btn:hover {
               border-color: var(--green-mid);
                 background: var(--green-glow);
         }
         .qty-val {
               font-size: 13px;
                 font-weight: 700;
                   min-width: 18px;
                     text-align: center;
         }

         /* ══════════════════════════════ CHECKOUT / SUMMARY ══════════════════════════════ */
         .order-summary {
               background: var(--card);
                 border: 1px solid var(--border);
                   border-radius: var(--r-md);
                     margin: 12px;
                       padding: 16px;
         }
         .summary-row {
               display: flex;
                 justify-content: space-between;
                   align-items: center;
                     padding: 8px 0;
                       font-size: 13px;
                         color: var(--muted);
                           border-bottom: 1px solid var(--border);
         }
         .summary-row:last-child {
               border-bottom: none;
         }
         .summary-row.total {
               font-size: 16px;
                 font-weight: 700;
                   color: var(--white);
                     padding-top: 12px;
         }
         .summary-row.total .amount {
               color: var(--green-light);
         }

         /* ══════════════════════════════ CTA BUTTON ══════════════════════════════ */
         .cta-btn {
               display: flex;
                 align-items: center;
                   justify-content: center;
                     gap: 8px;
                       width: calc(100% - 24px);
                         margin: 0 12px 12px;
                           background: var(--terra-light);
                             color: #fff;
                               border: none;
                                 padding: 16px;
                                   border-radius: var(--r-md);
                                     font-size: 15px;
                                       font-weight: 700;
                                         letter-spacing: 0.3px;
                                           transition: background 0.2s, transform 0.15s;
                                             box-shadow: 0 4px 20px rgba(26, 107, 58, 0.4);
         }
         .cta-btn:active {
               transform: scale(0.98);
         }
         .cta-btn:hover {
               background: var(--green-mid);
         }
         .cta-btn.terra {
               background: var(--terra);
                 box-shadow: 0 4px 20px rgba(201, 106, 46, 0.4);
         }
         .cta-btn.terra:hover {
               background: var(--terra-light);
         }

         /* ══════════════════════════════ DELIVERY METHOD CARDS ══════════════════════════════ */
         .delivery-options {
               display: flex;
                 flex-direction: column;
                   gap: 10px;
                     padding: 0 12px;
         }
         .delivery-card {
               background: var(--card);
                 border: 2px solid var(--border);
                   border-radius: var(--r-md);
                     padding: 14px 16px;
                       display: flex;
                         align-items: center;
                           gap: 14px;
                             cursor: pointer;
                               transition: all 0.2s;
         }
         .delivery-card.selected {
               border-color: var(--green-mid);
                 background: var(--green-glow);
         }
         .delivery-card .d-icon {
               width: 42px;
                 height: 42px;
                   background: var(--surface);
                     border-radius: 10px;
                       display: flex;
                         align-items: center;
                           justify-content: center;
                             font-size: 20px;
                               flex-shrink: 0;
         }
         .delivery-card .d-info {
               flex: 1;
         }
         .delivery-card .d-title {
               font-size: 13px;
                 font-weight: 700;
                   color: var(--white);
                     margin-bottom: 2px;
         }
         .delivery-card .d-desc {
               font-size: 11px;
                 color: var(--muted);
                   line-height: 1.4;
         }
         .delivery-card .d-price {
               font-size: 13px;
                 font-weight: 700;
                   color: var(--green-light);
         }
         .delivery-card .d-check {
               width: 20px;
                 height: 20px;
                   border: 2px solid var(--border);
                     border-radius: 50%;
                       flex-shrink: 0;
                         display: flex;
                           align-items: center;
                             justify-content: center;
                               transition: all 0.2s;
         }
         .delivery-card.selected .d-check {
               background: var(--green-mid);
                 border-color: var(--green-mid);
         }
         .delivery-card.selected .d-check::after {
               content: "✓";
                 font-size: 11px;
                   color: #fff;
                     font-weight: 700;
         }

         /* ══════════════════════════════ TOAST NOTIFICATION ══════════════════════════════ */
         .toast {
               position: fixed;
                 bottom: calc(var(--bottom-h) + 12px);
                   left: 50%;
                     transform: translateX(-50%) translateY(20px);
                       background: var(--card);
                         border: 1px solid var(--green-mid);
                           color: var(--white);
                             padding: 10px 18px;
                               border-radius: 20px;
                                 font-size: 12px;
                                   font-weight: 600;
                                     white-space: nowrap;
                                       z-index: 200;
                                         opacity: 0;
                                           transition: all 0.3s;
                                             pointer-events: none;
                                               box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
         }
         .toast.show {
               opacity: 1;
                 transform: translateX(-50%) translateY(0);
         }

         /* ══════════════════════════════ EMPTY STATE ══════════════════════════════ */
         .empty-state {
               display: flex;
                 flex-direction: column;
                   align-items: center;
                     justify-content: center;
                       padding: 60px 24px;
                         gap: 16px;
                           text-align: center;
         }
         .empty-state .es-icon {
               font-size: 56px;
                 opacity: 0.4;
         }
         .empty-state h3 {
               font-size: 18px;
                 font-weight: 700;
                   color: var(--white);
         }
         .empty-state p {
               font-size: 13px;
                 color: var(--muted);
                   line-height: 1.6;
         }

         /* ══════════════════════════════ ANIMATIONS ══════════════════════════════ */
         @keyframes fadeUp {
               from {
                       opacity: 0;
                           transform: translateY(16px);
               }
                 to {
                         opacity: 1;
                             transform: translateY(0);
                 }
         }
         @keyframes pulse {
               0%,
                 100% {
                         opacity: 1;
                 }
                   50% {
                           opacity: 0.5;
                   }
         }
         .fade-up {
               animation: fadeUp 0.4s ease forwards;
         }
         .fade-up-1 {
               animation: fadeUp 0.4s 0.05s ease both;
         }
         .fade-up-2 {
               animation: fadeUp 0.4s 0.1s ease both;
         }
         .fade-up-3 {
               animation: fadeUp 0.4s 0.15s ease both;
         }
         .fade-up-4 {
               animation: fadeUp 0.4s 0.2s ease both;
         }
         .fade-up-5 {
               animation: fadeUp 0.4s 0.25s ease both;
         }

         /* ══════════════════════════════ PRICE EDIT MODAL ══════════════════════════════ */
         .modal-overlay {
               display: none;
                 position: fixed;
                   inset: 0;
                     background: rgba(0, 0, 0, 0.75);
                       z-index: 300;
                         align-items: flex-end;
                           justify-content: center;
         }
         .modal-overlay.open {
               display: flex;
         }
         .modal-sheet {
               background: var(--surface);
                 border: 1px solid var(--border);
                   border-radius: var(--r-xl) var(--r-xl) 0 0;
                     padding: 20px;
                       width: 100%;
                         max-width: 480px;
                           animation: slideUp 0.3s ease;
         }
         @keyframes slideUp {
               from {
                       transform: translateY(100%);
               }
                 to {
                         transform: translateY(0);
                 }
         }
         .modal-handle {
               width: 40px;
                 height: 4px;
                   background: var(--faint);
                     border-radius: 2px;
                       margin: 0 auto 20px;
         }
         .modal-sheet h3 {
               font-family: var(--font-display);
                 font-size: 18px;
                   color: var(--white);
                     margin-bottom: 16px;
         }
         .modal-sheet input {
               width: 100%;
                 background: var(--card);
                   border: 1px solid var(--border);
                     color: var(--white);
                       padding: 12px 14px;
                         border-radius: var(--r-sm);
                           font-size: 16px;
                             margin-bottom: 12px;
         }
         .modal-sheet input:focus {
               outline: none;
                 border-color: var(--green-mid);
         }
         .modal-btns {
               display: flex;
                 gap: 10px;
         }
         .modal-btns button {
               flex: 1;
                 padding: 12px;
                   border-radius: var(--r-sm);
                     border: none;
                       font-size: 14px;
                         font-weight: 700;
         }
         .btn-save {
               background: var(--terra-light);
                 color: #fff;
         }
         .btn-cancel {
               background: var(--card);
                 color: var(--muted);
                   border: 1px solid var(--border) !important;
         }

         /* ══════════════════════════════ UTILITIES ══════════════════════════════ */
         .divider {
               height: 8px;
                 background: var(--deep);
                   border-top: 1px solid var(--border);
                     border-bottom: 1px solid var(--border);
                       margin: 8px 0;
         }
         .spacer-sm {
               height: 8px;
         }
         .spacer-md {
               height: 16px;
         }
         .text-muted {
               color: var(--muted);
                 font-size: 12px;
         }
         .tag-green {
               display: inline-flex;
                 align-items: center;
                   gap: 4px;
                     background: rgba(46, 171, 94, 0.12);
                       border: 1px solid rgba(46, 171, 94, 0.3);
                         color: #2eab5e; /* only ever used on the dark ridealong-banner — not a themed token */
                           font-size: 10px;
                             font-weight: 700;
                               padding: 3px 8px;
                                 border-radius: 5px;
                                   text-transform: uppercase;
                                     letter-spacing: 0.5px;
         }
         .tag-terra {
               display: inline-flex;
                 align-items: center;
                   gap: 4px;
                     background: rgba(201, 106, 46, 0.12);
                       border: 1px solid rgba(201, 106, 46, 0.3);
                         color: var(--terra-light);
                           font-size: 10px;
                             font-weight: 700;
                               padding: 3px 8px;
                                 border-radius: 5px;
                                   text-transform: uppercase;
                                     letter-spacing: 0.5px;
         }

/* ══════════════════════════════ NAV AUTH SLOT ══════════════════════════════ */
.nav-auth-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}
.nav-auth-pill {
  background: var(--terra-light);
  padding: 7px 14px;
  border-radius: 20px;
  color: #fff;
}
.nav-auth-pill:hover { background: var(--terra); }
.nav-auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* ══════════════════════════════ TOP TOAST (Instagram-style) ══════════════════════════════ */
.toast-top {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.toast-top.show { transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════ AUTH PAGES ══════════════════════════════ */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
}
.auth-page .auth-logo {
  font-family: var(--font-display);
  font-size: 26px;
  text-align: center;
  margin-bottom: 6px;
  color: var(--gold-deep);
}
.auth-page .auth-sub {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 28px;
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.auth-field input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 13px 14px;
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 14px;
}
.auth-field input:focus { outline: none; border-color: var(--green-mid); }
.auth-error {
  background: rgba(224, 82, 82, 0.1);
  border: 1px solid rgba(224, 82, 82, 0.3);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: 14px;
  display: none;
}
.auth-error.show { display: block; }
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
}
.auth-switch a { color: var(--green-light); font-weight: 600; }

/* ══════════════════════════════ COOLER BOX BUILDER ══════════════════════════════ */
.cooler-bar {
  margin: 12px;
  background: linear-gradient(135deg, #0d3020 0%, #0d1a14 100%);
  border: 1px solid var(--green);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.cooler-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cooler-bar-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: #f4f7f5; /* .cooler-bar keeps its own dark gradient bg — not a themed token */
  display: flex;
  align-items: center;
  gap: 6px;
}
.cooler-bar-total { font-size: 13px; font-weight: 700; color: #2eab5e; }
.cooler-progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.cooler-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #2eab5e 100%);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.cooler-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: cooler-shimmer 1.8s infinite;
}
@keyframes cooler-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.cooler-tier-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #7a9485;
  margin-bottom: 12px;
}
.cooler-tier-labels span.hit { color: #2eab5e; font-weight: 700; }
.cooler-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cooler-slot {
  aspect-ratio: 1;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background-size: cover;
  background-position: center;
  transition: border-color 0.2s, transform 0.2s;
}
.cooler-slot.filled {
  border-style: solid;
  border-color: var(--green-mid);
  background: var(--green-glow);
  animation: cooler-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cooler-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════ SKELETON LOADERS ══════════════════════════════ */
@keyframes skel-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel-product-card, .skel-store-card {
  background: linear-gradient(90deg, var(--card) 25%, var(--surface) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.skel-product-card { height: 168px; }
.skel-store-card { height: 122px; width: 160px; flex-shrink: 0; }

/* ══════════════════════════════ PRICE DETAILS SHEET (read-only) ══════════════════════════════ */
.price-details-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.price-details-row:last-child { border-bottom: none; }
.price-details-row .pd-label { color: var(--muted); }
.price-details-row .pd-value { color: var(--white); font-weight: 700; }
.price-details-save { color: var(--green-light); font-size: 11px; }

/* ══════════════════════════════ EMBEDDED QTY STEPPER ══════════════════════════════ */
.stepper-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--terra-light);
  border-radius: 8px;
  padding: 3px 6px;
  animation: cooler-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stepper-inline button {
  background: none;
  border: none;
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.stepper-inline span { color: #fff; font-size: 12px; font-weight: 700; min-width: 14px; text-align: center; }

/* ══════════════════════════════ TRACK STATUS TIMELINE ══════════════════════════════ */
.track-timeline { padding: 4px 4px 4px 12px; }
.track-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 24px;
  position: relative;
}
.track-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  width: 2px;
  height: calc(100% - 30px);
  background: var(--border);
}
.track-step.done:not(:last-child)::after { background: var(--green-mid); }
.track-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  font-size: 12px;
}
.track-step.done .track-step-dot { background: var(--green); border-color: var(--green-mid); }
.track-step.current .track-step-dot { border-color: var(--green-light); box-shadow: 0 0 0 4px var(--green-glow); }
.track-step-label { font-size: 13px; font-weight: 700; color: var(--white); }
.track-step-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }