/* ================================
       Tara Pasabay E-Mart - style.css
       Compact cards + mobile header + tap animations
       /Shop/assets/css/style.css
    ================================== */
    
    /* Base */
    :root{
      --bg: #f7f7f7;
      --card-radius: 12px;
      --border: #e9ecef;
      --text-muted: #6c757d;
      --price: #ee4d2d;
    
      /* Corporate colors */
      --brand-orange: #fc9a1d;
      --brand-blue: #0058a8;
      --brand-blue-soft: #1f6fb5;
    }
    
    *{ box-sizing: border-box; }
    
    body{
      background: var(--bg);
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      padding-bottom: calc(var(--cartbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Navbar logo spacing */
    .navbar-brand img{
      display: block;
    }
    
    /* ================================
       Floating product cards
    ================================== */
    .product-card{
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 14px;
      overflow: hidden;
    
      /* Paper-hover shadow */
      box-shadow:
        0 2px 6px rgba(0,0,0,0.06),
        0 8px 18px rgba(0,0,0,0.08);
    
      transition:
        transform .15s ease,
        box-shadow .15s ease;
    }
    
    .product-card:hover{
      transform: translateY(-2px);
      box-shadow:
        0 6px 14px rgba(0,0,0,0.10),
        0 16px 30px rgba(0,0,0,0.12);
    }
    
    .product-card img{
      width: 100%;
      height: 120px;
      object-fit: contain;        /* ✅ show whole image */
      background: #fff;           /* clean background */
    }
    
    .product-card:active{
      transform: translateY(0) scale(0.98);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.08);
    }
    
    .product-card:active img{
      transform: scale(0.98);
    }
    
    .product-card .card-body{
      padding: .55rem;
    }
    
    .product-card .card-title{
      font-size: .88rem;
      margin: 0 0 4px 0;
      line-height: 1.2;
    }
    
    .product-card p,
    .product-card .text-muted{
      color: var(--text-muted);
      margin-bottom: 6px;
      line-height: 1.2;
    }
    
    .price{
      color: var(--price);
      font-weight: 700;
    }
    
    .product-card .btn{
      font-size: .8rem;
      padding: .25rem .5rem;
      border-radius: 10px;
    }
    
    .product-card small{
      font-size: .75rem;
    }
    
    /* Tighter grid gaps */
    #productGrid{
      --bs-gutter-x: .6rem;
      --bs-gutter-y: .6rem;
    }
    /* Ensure category blocks always span full width inside #productGrid */
    #productGrid .category-section-wrap {
      width: 100%;
    }

    /* ================================
       Cart bar
    ================================== */
    .cart-bar{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid #ddd;
      padding: 10px 15px;
      display: none;
      z-index: 1000;
    }
    
    /* ================================
       Ripple + tap feedback
    ================================== */
    .ripple{
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    .ripple::after{
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.10);
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    
    .ripple:active::after{
      opacity: 1;
    }
    
    /* Button press feedback (more obvious on iOS) */
    .btn:active{
      transform: scale(0.97);
    }
    
    /* ================================
       Add-to-cart animations
    ================================== */
    
    /* Card “pop” when added */
    .product-card.added{
      animation: cardPop 260ms ease;
    }
    
    @keyframes cardPop{
      0%   { transform: scale(1); }
      40%  { transform: scale(0.98); }
      100% { transform: scale(1); }
    }
    
    /* ✅ Cart button bump */
    #cartBump,
    .cart-bump{
      animation: cartBump 300ms ease;
    }
    
    @keyframes cartBump{
      0%   { transform: scale(1); }
      40%  { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    
    /* Cart bar pulse */
    .cart-bar.pulse{
      animation: barPulse 320ms ease;
    }
    
    @keyframes barPulse{
      0%   { transform: translateY(0); }
      40%  { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }
    
    /* Inputs feel clickable */
    .clickable{
      cursor: text;
    }
    
    /* Offcanvas cart spacing */
    .offcanvas-body{
      padding-bottom: 1rem;
    }
    
    /* ================================
       Responsive tweaks (tablet/desktop)
    ================================== */
    @media (min-width: 768px){
      .product-card img{ height: 130px; }
      .product-card{ font-size: .92rem; }
    }
    
    @media (min-width: 1200px){
      .product-card img{ height: 140px; }
    }
    
    /* ================================
       Ultra-compact mobile cards
    ================================== */
    @media (max-width: 576px){
      #searchInput{ height: 34px; }
      #categoryFilter, #sortSelect{ height: 34px; }
    
      .product-card{
        font-size: 0.78rem;
        border-radius: 10px;
      }
    
      .product-card img{
        height: 90px;
        object-fit: contain;        /* ✅ no crop on mobile */
        background: #fff;
      }
    
      .product-card .card-body{
        padding: 0.35rem;
      }
    
      .product-card .card-title{
        font-size: 0.78rem;
        margin-bottom: 2px;
        line-height: 1.15;
      }
    
      .product-card p,
      .product-card .text-muted{
        margin-bottom: 3px;
        line-height: 1.15;
      }
    
      .product-card strong,
      .price{
        display: block;
        margin-bottom: 3px;
        font-size: 0.8rem;
      }
    
      .product-card .btn{
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 8px;
      }
    
      .product-card small{
        font-size: 0.65rem;
      }
    
      #productGrid{
        --bs-gutter-x: 0.4rem;
        --bs-gutter-y: 0.4rem;
      }
    
      /* Optional: hide category on mobile to reduce height */
      .product-card p.text-muted{
        display: none;
      }
    }
    
    /* ================================
       Mobile header layout tweaks
    ================================== */
    @media (max-width: 576px){
      .mobile-company-logo{
        height: 34px;
        max-width: 75vw;
        object-fit: contain;
        display: block;
      }
    
      .mobile-emart-wrap{
        display: flex;
        align-items: center;
      }
    
      .mobile-emart-logo{
        height: 34px;
        max-width: 55vw;
        object-fit: contain;
        display: block;
      }
    
      .mobile-cart-btn{
        border-radius: 12px;
        padding: 6px 10px;
        white-space: nowrap;
        will-change: transform;
      }
    
      #cartCount{
        font-weight: 700;
        margin-left: 2px;
      }
    }
    
    /* ================================
       FILTER / SORT / SEARCH BAR
    ================================== */
    .filter-bar{
      background: var(--brand-blue);
      border: 2px solid var(--brand-blue);
      border-radius: 14px;
      padding: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        background-clip: padding-box;
  overflow: hidden; /* hard stop for background bleed */
    }
    
    .filter-bar .form-select,
    .filter-bar .form-control{
      border-radius: 10px;
      border: 2px solid #e5e7eb;
      font-size: 0.99rem;
      height: 38px;
      transition: all .15s ease;
    }
    
    .filter-bar .form-select:focus,
    .filter-bar .form-control:focus{
      border-color: var(--brand-orange);
      box-shadow: 0 0 0 2px rgba(0,88,168,0.15);
    }
    
    #searchInput{
      padding-left: 12px;
    }
    
    @media (max-width: 576px){
      .filter-bar{
        padding: 8px;
        border-width: 2px;
      }
    
      .filter-bar .form-select,
      .filter-bar .form-control{
        font-size: 0.8rem;
        height: 36px;
      }
    }
    
    /* ================================
       Paper-like background
    ================================== */
    body{
      background-color: #f5f4f2;
      background-image:
        radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 6px 6px;
    }
    
    @media (max-width: 576px){
      input,
      select,
      textarea{
        font-size: 16px !important;
      }
    }
    
    /* ================================
       Dynamic error modal position (keyboard-safe)
    ================================== */
    #errorModal .error-modal-dialog{
      margin: 0 auto;
      max-width: 420px;
      padding: 12px;
      transition: transform 120ms ease;
      transform: translateY(var(--errorModalShift, 0px));
    }
    
    @media (min-width: 577px){
      #errorModal .error-modal-dialog{
        margin-top: 12vh;
      }
    }
    
    /* ================================
       Cart instruction label (prominent)
    ================================== */
    .cart-instruction{
      margin-top: 4px;
      padding: 6px 10px;
      border-radius: 10px;
    
      background: rgba(0, 88, 168, 0.08);
      color: var(--brand-blue);
    
      font-size: 0.8rem;
      font-weight: 500;
      line-height: 1.25;
    
      box-shadow: inset 0 0 0 1px rgba(0, 88, 168, 0.15);
    }
    
    @media (max-width: 576px){
      .cart-instruction{
        font-size: 0.85rem;
      }
    }
    
    /* ================================
       Cart title – Bold Brand Style
    ================================== */
    .cart-title{
      margin: 0 auto;
      font-size: 1.60rem;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      line-height: 1.1;
    }
    
    .cart-title-your{
      color: var(--brand-orange);
      margin-right: 0px;
    }
    
    .cart-title-cart{
      color: var(--brand-blue);
    }
    
    @media (max-width: 576px){
      .cart-title{
        font-size: 1.50rem;
      }
    }
    
    #customerProvince{
      cursor: pointer;
    }
    
    /* ================================
       Province dropdown – branded
    ================================== */
    #customerProvince{
      background-color: var(--brand-blue-soft);
      color: #ffffff;
      font-weight: 600;
      border: none;
      border-radius: 12px;
    
      padding: 10px 12px;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.25),
        0 4px 12px rgba(0,0,0,0.08);
    
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    
      background-image:
        linear-gradient(45deg, transparent 50%, white 50%),
        linear-gradient(135deg, white 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }
    
    #customerProvince option[disabled]{
      color: rgba(255,255,255,0.7);
    }
    
    #customerProvince:focus{
      outline: none;
      box-shadow:
        0 0 0 3px rgba(31,111,181,0.35),
        0 6px 14px rgba(0,0,0,0.12);
    }
    
    #customerProvince option{
      color: #0b3f6f;
      background: #ffffff;
      font-weight: 500;
    }
    
    .btn-province{
      background: var(--brand-blue-soft);
      color: #fff;
      font-weight: 700;
      border: none;
    }
    .btn-province:active{ transform: scale(0.98); }
    
    .province-picker-input{
      cursor: pointer;
      font-weight: 600;
    }
    
    .province-modal{
      border-radius: 14px;
      overflow: hidden;
    }
    .province-list{
      max-height: 45vh;
      overflow: auto;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 12px;
    }
    
    .province-item{
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border: 0;
      background: #fff;
      font-weight: 600;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .province-item:last-child{ border-bottom: 0; }
    .province-item:active{ background: rgba(0,88,168,0.08); }
    
    /* =========================================================
       ✅ Admin Add Product - Name Suggest Dropdown (FIXED)
       Corporate orange background + white text
       Uses !important to beat Bootstrap defaults.
    ========================================================= */
    #nameSuggestBox,
    .nameSuggestBox{
      background: var(--brand-orange) !important;
      border: none !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }
    
    #nameSuggestBox .list-group-item,
    .nameSuggestBox .list-group-item{
      background: var(--brand-orange) !important;
      color: #ffffff !important;
      border: none !important;
      font-size: 0.9rem !important;
    }
    
    #nameSuggestBox .list-group-item:hover,
    #nameSuggestBox .list-group-item:focus,
    .nameSuggestBox .list-group-item:hover,
    .nameSuggestBox .list-group-item:focus{
      background: #e88b10 !important;
      color: #ffffff !important;
    }
    
    #nameSuggestBox .list-group-item:active,
    .nameSuggestBox .list-group-item:active{
      background: #d97f0e !important;
      color: #ffffff !important;
    }
    
    #addProductName.is-invalid{
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25) !important;
    }
    
    /* ================================
       GLOBAL CARD DOWNSIZE (~40%)
    ================================ */
    
    /* Grid tighter */
    #productGrid{
      --bs-gutter-x: 0.45rem;
      --bs-gutter-y: 0.45rem;
    }
    
    /* Card container */
    .product-card{
      border-radius: 10px;
      box-shadow:
        0 2px 5px rgba(0,0,0,0.05),
        0 6px 14px rgba(0,0,0,0.08);
    }
    
    /* Image smaller */
    .product-card img{
      height: 72px;            /* ⬅ was ~120 */
      object-fit: contain;
      background: #fff;
    }
    
    /* Body padding tighter */
    .product-card .card-body{
      padding: 0.35rem;
    }
    
    /* Title smaller */
    .product-card .card-title{
      font-size: 0.72rem;
      line-height: 1.15;
      margin-bottom: 2px;
    }
    
    /* REMOVE category text */
    .product-card p.text-muted{
      display: none;
    }
    
    /* Price smaller */
    .product-card strong,
    .price{
      font-size: 0.75rem;
      margin-bottom: 3px;
      display: block;
    }
    
    /* Button smaller */
    .product-card .btn{
      font-size: 0.65rem;
      padding: 4px 6px;
      border-radius: 8px;
    }
    
    /* Stock text smaller */
    .product-card small{
      font-size: 0.6rem;
    }
    
    /* ================================
       MOBILE EXTRA COMPACT
    ================================ */
    @media (max-width: 576px){
    
      .product-card img{
        height: 64px;
      }
    
      .product-card{
        font-size: 0.72rem;
      }
    
      .product-card .btn{
        font-size: 0.6rem;
        padding: 3px 6px;
      }
    }
    
    /* ================================
       PROMO MARQUEE (HOT ITEMS)
       ✅ FIX: makes slider ALWAYS visible + prevents "not moving" issues
       ✅ FIX: supports pause on hover / tap using .is-paused
       ✅ FIX: ensures track has enough width + avoids layout collapse
    ================================== */
    
    .promo-section{
      border-radius: 14px;
      padding: 10px 10px 6px;
      background: rgba(0, 88, 168, 0.06);
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    
    /* Title: HOT (orange) ITEMS (blue) */
    .promo-title{
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-size: 1.05rem;
    }
    .promo-hot{ color: #fc9a1d; }
    .promo-items{ color: #0058a8; }
    
    /* ✅ Marquee container */
    .promo-marquee{
      margin-top: 10px;
      overflow: hidden;
      position: relative;
      border-radius: 14px;
      width: 100%;
    }
    
    /* ================================
       PROMO SLIDER – SMOOTH (transform) + DRAG SCROLL
       - Auto-move uses translate3d (subpixel smooth)
       - Users can drag horizontally (touch + mouse)
       - Pauses on hover/tap/drag
    ================================== */
    
    /* Container */
    .promo-marquee{
      margin-top: 10px;
      width: 100%;
      border-radius: 14px;
    }
    
    /* Title fix: prevents "H" cropping */
    .promo-title{
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      font-size: 1.10rem;
      line-height: 1.2;
      padding-left: 4px;   /* ✅ prevents left crop */
      padding-top: 2px;
    }
    
    .promo-hot{ color: #fc9a1d; }
    .promo-items{ color: #0058a8; }
    
    /* Viewport = the visible window */
    .promo-viewport{
      width: 100%;
      overflow: hidden;                 /* ✅ transform-based marquee */
      border-radius: 14px;
      position: relative;
    
      -webkit-tap-highlight-color: transparent;
      touch-action: pan-y;              /* ✅ allow vertical page scroll */
      cursor: grab;
    }
    .promo-viewport:active{ cursor: grabbing; }
    
    /* Track that moves smoothly */
    .promo-track{
      display: flex;
      align-items: stretch;
      gap: 10px;
      width: max-content;
    
      will-change: transform;           /* ✅ smooth */
      transform: translate3d(0,0,0);    /* ✅ GPU */
    }
    
    /* Pause state (JS toggles this) */
    .promo-marquee.is-paused .promo-viewport{
      cursor: grab;
    }
    
    /* Card sizing inside slider */
    .promo-track .product-card{
      width: 170px;                     /* desktop */
      flex: 0 0 auto;
    }
    
    .promo-track .product-card img{
      height: 70px;
    }
    
    /* Single item spacing so it LOOKS like only one card exists */
    .promo-marquee.single-hot .promo-card-wrap{
      margin-right: var(--singleGap, 360px); /* JS sets this based on viewport width */
    }
    
    /* Smaller on mobile */
    @media (max-width: 576px){
      .promo-title{ font-size: 1.00rem; }
      .promo-track{ gap: 8px; }
      .promo-track .product-card{ width: 150px; }
      .promo-track .product-card img{ height: 64px; }
    }
    
    /* HOT badge */
    .hot-badge{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 900;
      font-size: 0.75rem;
      line-height: 1;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(0, 88, 168, 0.10);
      box-shadow: inset 0 0 0 1px rgba(0, 88, 168, 0.20);
    }
    .hot-badge .hot-text{
      color: #fc9a1d;
    }
    @media (max-width: 576px){
      .hot-badge{ font-size: 0.70rem; }
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .promo-track{ transform: none !important; }
    }
    
    
    /* ================================
       HOT badge on product card
    ================================== */
    .hot-badge{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 900;
      font-size: 0.75rem;
      line-height: 1;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(0, 88, 168, 0.10);
      box-shadow: inset 0 0 0 1px rgba(0, 88, 168, 0.20);
    }
    .hot-badge .hot-text{
      color: #fc9a1d; /* HOT text orange */
    }
    @media (max-width: 576px){
      .hot-badge{ font-size: 0.70rem; }
    }
    
    /* ✅ SINGLE HOT MODE:
       Only one card is "noticed" even though we repeat it for animation */
    .promo-marquee.single-hot .promo-viewport{
      display: flex;
      justify-content: center;   /* center the visible card */
    }
    
    .promo-marquee.single-hot .promo-track{
      gap: 22px;                 /* more space so repeats aren’t obvious */
    }
    
    /* Slight fade edges so repeats don't look like "duplicates" */
    .promo-marquee.single-hot .promo-viewport{
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    }
    /* FIX: prevent HOT ITEMS title from being clipped */
    .promo-marquee{
      overflow: visible;            /* allow title to breathe */
    }
    
    .promo-title{
      padding-top: 2px;             /* space for letter ascenders */
      line-height: 1.2;             /* safer line height */
    }
    /* ================================
       PROMO LABEL – HOT ITEMS (Enhanced)
    ================================== */
    .promo-title{
      display: inline-flex;
      align-items: center;
      gap: 6px;
    
      padding: 6px 14px;
      border-radius: 999px;
    
      font-weight: 900;
      font-size: 1.15rem;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    
      background: rgba(0, 88, 168, 0.08); /* soft blue pill */
      box-shadow:
        inset 0 0 0 1px rgba(0, 88, 168, 0.15),
        0 4px 10px rgba(0,0,0,0.06);
    }
    
    .promo-hot{
      color: #fc9a1d;
      text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    }
    
    .promo-items{
      color: #0058a8;
      text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    }
    
    /* Slightly tighter on mobile */
    @media (max-width: 576px){
      .promo-title{
        font-size: 1.05rem;
        padding: 5px 12px;
      }
    }
    /* ================================
       AVAILABLE STOCKS LABEL
    ================================== */
    .stock-title{
      font-weight: 900;
      font-size: 1.2rem;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      margin: 0;
    }
    
    .stock-available{
      color: #fc9a1d;   /* Brand Orange */
    }
    
    .stock-stocks{
      color: #0058a8;   /* Brand Blue */
    }
    
    /* Mobile scaling */
    @media (max-width: 576px){
      .stock-title{
        font-size: 1.05rem;
      }
    }
    
    .hot-text{
      display: inline-flex;
      gap: 3px;
    }
    
    .hot-word{
      color: #fc9a1d; /* orange */
    }
    
    .item-word{
      color: #0058a8; /* blue */
    }
    /* =========================================
       NAVBAR (FIXED + MOBILE SAFE)
       Paste at BOTTOM of style.css
    ========================================= */
    
    .navbar-orange{
      background: #fc9a1d;
    }
    
    /* IMPORTANT: cancel old rules that absolute-center .navbar-brand */
    .navbar .navbar-brand{
      position: static !important;
      left: auto !important;
      transform: none !important;
    }
    
    /* Desktop fixed layout */
    .nav-desktop-fixed{
      position: relative;
      min-height: 60px;
    }
    
    .nav-slot{
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
    
    .nav-left{
      width: 210px;              /* fixed so center never moves */
      justify-content: flex-start;
    }
    
    .nav-right{
      width: auto;              /* fixed so center never moves */
      justify-content: flex-end;
    }
    
    .nav-center{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;      /* prevents accidental taps */
    }
    
    /* Social icons */
    .social-icon{
      color: #fff;
      font-size: 1.25rem;
      padding: 6px;
      border-radius: 10px;
      transition: background .15s ease;
    }
    .social-icon:hover{
      background: rgba(255,255,255,.20);
      color: #fff;
    }
    .social-icon-sm{
      font-size: 1.15rem;
      padding: 6px;
    }
    
    /* Checkout button (smaller + stable width) */
    .cart-btn-primary{
      background: #0058a8;
      border: 2px solid #0058a8;
      color: #fff;
      font-weight: 900;
      border-radius: 12px;
    
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    
      box-shadow: 0 6px 16px rgba(0,0,0,.14);
      transition: transform .12s ease, background .12s ease;
    }
    .cart-btn-primary:hover{
      background: #004c93;
      border-color: #004c93;
      color: #fff;
    }
    .cart-btn-primary:active{
      transform: scale(0.97);
    }
    
    /* Smaller sizing requested */
    .cart-btn-small{
      padding: 6px 10px;
      font-size: 0.85rem;
      min-width: 108px;         /* fixed so digits never move logos */
    }
    
    /* Counter badge: fixed width so 9->10 doesn't shift */
    .cartCount{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      font-weight: 900;
    }
    
    /* Mobile logo sizes */
    @media (max-width: 576px){
      .mobile-company-logo{
        height: 28px;
        max-width: 80vw;
        object-fit: contain;
      }
      .mobile-emart-logo{
        height: 32px;
        max-width: 70vw;
        object-fit: contain;
      }
    }
    /* ================================
       NAVBAR – Corporate Orange
    ================================== */
    .navbar-orange{
      background-color: #fc9a1d;
    }
    
    /* Social icons */
    .social-icon{
      color: #ffffff;
      font-size: 1.15rem;
      padding: 6px;
      border-radius: 10px;
      transition: background .15s ease;
    }
    .social-icon:hover{
      background: rgba(255,255,255,0.20);
      color: #ffffff;
    }
    
    /* ================================
       Checkout Button (smaller)
    ================================== */
    .cart-btn-primary{
      background: #0058a8;
      border: 2px solid #0058a8;
      color: #fff;
      font-weight: 900;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 6px 16px rgba(0,0,0,.14);
    }
    
    .cart-btn-primary:hover{
      background: #004c93;
      border-color: #004c93;
      color: #fff;
    }
    
    /* smaller size requested */
    .cart-btn-small{
      padding: 6px 12px;
      min-width: 112px;
      font-size: 0.92rem;
    }
    
    /* fixed-width count so digits don't move layout */
    .cartCount{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      font-weight: 900;
    }
    
    /* ================================
       Mobile logo sizing
    ================================== */
    @media (max-width: 576px){
      .mobile-company-logo{
        height: 32px;
        max-width: 48vw;
        object-fit: contain;
        display: block;
      }
    
      .mobile-emart-logo{
        height: 34px;
        max-width: 40vw;
        object-fit: contain;
        display: block;
      }
    
      .cart-btn-small{
        padding: 6px 10px;
        min-width: 108px;
        font-size: 0.90rem;
      }
    }
    
    /* ================================
       IMPORTANT: remove conflicting old "absolute center logo" rules
       If you still have these in your CSS, delete/disable them:
       .navbar-brand{ position:absolute... }
    ================================== */
    
    /* ================================
       DESKTOP NAV GRID (center E-Mart)
    ================================== */
    .nav-desktop-grid{
      display: grid;
      grid-template-columns: auto 1fr auto;
      column-gap: 14px;
      min-height: 60px;
    }
    
    /* Left/center/right alignment */
    .nav-left{ justify-self: start; }
    .nav-center{ justify-self: center; }
    .nav-right{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.navbar .btn.btn-sm{
  border-radius: 10px;
  font-weight: 700;
}

.navbar .btn-outline-light.btn-sm{
  border-width: 2px;
}

.navbar .btn-light.btn-sm{
  color: #0058a8;
}
    /* ================================
       FOOTER – Corporate Blue
    ================================== */
    .store-footer{
  position: relative;     /* important */
  z-index: 0;             /* keep behind main */
  clear: both;            /* avoid float/layout weirdness */
  background: #0058a8;
  color: #ffffff;
}
    
    .footer-title{
      font-weight: 700;
      font-size: 0.95rem;
      margin-bottom: 8px;
    }
    
    .footer-text{
      font-size: 0.85rem;
      line-height: 1.4;
      opacity: 0.9;
    }
    
    .footer-icon{
      color: #ffffff;
      font-size: 1.4rem;
      transition: transform .15s ease, opacity .15s ease;
    }
    
    .footer-icon:hover{
      transform: scale(1.1);
      opacity: 0.85;
    }
    
    .footer-divider{
      border-color: rgba(255,255,255,0.25);
      margin: 20px 0;
    }
    
    .footer-small{
      font-size: 0.75rem;
      opacity: 0.8;
    }
    /* =========================
       Add-to-cart -> stepper animation
    ========================= */
    
    .cart-qty-wrap {
      width: 100%;
    }
    
    .cart-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 10px;
      background: #0b4ea2; /* matches your theme vibe */
    }
    
    .cart-stepper-btn {
      min-width: 40px;
      border-radius: 10px !important;
      font-weight: 800;
      line-height: 1;
    }
    
    .cart-stepper-qty {
      min-width: 34px;
      text-align: center;
      font-weight: 800;
      color: #fff;
      user-select: none;
    }
    
    /* swap animations */
    .swap-in {
      animation: qtySwapIn 220ms ease-out both;
    }
    
    .swap-out {
      animation: qtySwapOut 160ms ease-in both;
    }
    
    @keyframes qtySwapIn {
      from { opacity: 0; transform: translateY(6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    @keyframes qtySwapOut {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to   { opacity: 0; transform: translateY(-6px) scale(0.98); }
    }
    /* =========================
       Category Section Header
       ========================= */
    .category-section-wrap .category-title {
      font-weight: 800;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: .6px;
      position: relative;
      display: inline-block;
      padding-bottom: 10px; /* space for the double underline */
    }
    
    /* Double underline using corporate colors */
    .category-section-wrap .category-title::after,
    .category-section-wrap .category-title::before {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      border-radius: 3px;
    }
    
    /* Top underline - Orange */
    .category-section-wrap .category-title::after {
      bottom: 3px;
      background: #fc9a1d;
    }
    
    /* Bottom underline - Blue */
    .category-section-wrap .category-title::before {
      bottom: -3px;
      background: #0058a8;
    }
    
    /* =========================
   ADMIN DASHBOARD (Grouped)
   Uses existing corporate vars:
   --brand-orange, --brand-blue
========================= */

.admin-dashboard .dash-title{
  font-weight: 900;
  letter-spacing: .3px;
}

.admin-dashboard .dash-subtitle{
  color: rgba(0,0,0,.55);
}

/* Section label + double underline */
.admin-dashboard .dash-section{
  margin-top: 22px;
}

.admin-dashboard .dash-section-label{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: .9rem;
  margin: 14px 0 12px;
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}

.admin-dashboard .dash-section-label::after,
.admin-dashboard .dash-section-label::before{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
}

.admin-dashboard .dash-section-label::after{
  bottom: 3px;
  background: var(--brand-orange);
}

.admin-dashboard .dash-section-label::before{
  bottom: -3px;
  background: var(--brand-blue);
}

/* Base cards */
.admin-dashboard .dash-card{
  border: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}

.admin-dashboard .dash-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.10) !important;
}

.admin-dashboard .dash-emoji{
  font-size: 1.9rem;
  line-height: 1;
}

/* =========================
   TRANSACTION CARDS (standout)
========================= */
.admin-dashboard .tx-card{
  border: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.18) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.admin-dashboard .tx-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 1rem 2.2rem rgba(0,0,0,.22) !important;
}

.admin-dashboard .tx-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.admin-dashboard .tx-orders{
  background: linear-gradient(135deg, var(--brand-orange) 0%, #ffb24d 45%, var(--brand-blue) 120%);
}

.admin-dashboard .tx-pos{
  background: linear-gradient(135deg, var(--brand-blue) 0%, #2b7fd4 45%, var(--brand-orange) 120%);
}

.admin-dashboard .tx-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
}

.admin-dashboard .tx-cta{
  font-weight: 900;
  letter-spacing: .2px;
}

.admin-dashboard .tx-cta small{
  display: block;
  font-weight: 600;
  opacity: .9;
}

.admin-dashboard .tx-icon{
  font-size: 2.2rem;
  opacity: .95;
}
/* =========================
   Admin Orders Notification Badge
========================= */
.admin-dashboard .tx-icon{
  font-size: 2.2rem;
  line-height: 1;
  opacity: .95;
}

.admin-dashboard .orders-badge{
  position: absolute;
  top: -8px;
  right: -10px;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: .75rem;
  font-weight: 900;

  color: #fff;
  background: #dc3545; /* red */
  box-shadow: 0 6px 14px rgba(0,0,0,.18);

  transform: scale(1);
  transition: transform .15s ease;
}

.admin-dashboard .orders-badge.bump{
  transform: scale(1.12);
}
/* =========================================
   iPhone fix: force Category headers to show
   (prevents flex/overflow quirks on iOS Chrome)
========================================= */
#productGrid .category-section-wrap{
  width: 100%;
  display: block;
}

#productGrid .category-section-wrap .category-title{
  display: block;             /* important: not inline */
  width: 100%;
  margin: 10px 0 12px !important;
  padding: 8px 12px;
  border-radius: 12px;

  /* visible header pill */
  background: rgba(0, 88, 168, 0.08);
  color: #0b3f6f;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* keep your double underline but prevent clipping */
#productGrid .category-section-wrap .category-title::after,
#productGrid .category-section-wrap .category-title::before{
  left: 12px;
  width: calc(100% - 24px);
}

.category-header {
  width: 100%;
}

.category-title {
  display: block;
  width: 100%;
  font-weight: 900;
  text-transform: uppercase;
}
/* === iOS SAFARI FIX: force category headers to render === */
.category-section-wrap {
  position: relative;
  width: 100%;
}

.category-header {
  position: relative;
  display: block;
  width: 100%;
  min-height: 24px; /* critical for iOS */
  transform: translateZ(0); /* force GPU paint */
  -webkit-transform: translateZ(0);
}

.category-title {
  display: block;
  width: 100%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
}
/* =========================
   iPhone Chrome fix:
   Make category labels always visible
========================= */
.category-section-wrap {
  position: relative;
  padding-left: 4px;
  padding-right: 4px;
}

.category-section-wrap .category-title {
  display: block;              /* avoid weird flex/inline issues */
  width: 100%;
  color: #111 !important;      /* force visible text */
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #111; /* iOS WebKit “invisible text” edge case */
  line-height: 1.2;
  padding: 6px 2px;
  position: relative;
  z-index: 2;                  /* ensure it stays above rows/cards */
}

.category-section-wrap .category-title::before,
.category-section-wrap .category-title::after {
  z-index: -1;                 /* keep the underline behind the text */
}

/* Optional: prevent iOS text auto-scaling quirks */
html {
  -webkit-text-size-adjust: 100%;
}

/* ================================
   iOS WebKit HARD FIX (FINAL)
   ================================ */

/* section wrapper */
.category-section-wrap {
  width: 100%;
  float: left; /* forces layout pass on iOS */
  clear: both;
}

/* header */
.category-title {
  display: block;
  width: 100%;
  margin: 12px 0 8px;
  position: relative;
  overflow: visible;
}

/* text span = paint trigger */
.category-title-text {
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;

  /* FORCE iOS RENDER */
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  will-change: transform;
}
/* ================================
   Category Icon Navigation (NO BG)
================================ */

.category-icon-bar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px;
}

/* icon wrapper */
.category-icon-btn {
  background: transparent;          /* ❌ remove background */
  border: none;                      /* ❌ remove border */
  box-shadow: none;                  /* ❌ remove card shadow */

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

  padding: 4px 6px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* icon itself */
.category-icon-btn img {
  width: 44px;                       /* icon size */
  height: 44px;
  object-fit: contain;

  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.18)); /* makes icon float */
}

/* text */
.category-icon-btn span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  color: #0058a8;                    /* brand blue */
  text-shadow: 0 1px 0 #fff;         /* clarity on light bg */
  white-space: nowrap;
}

/* hover / tap feedback */
.category-icon-btn:hover span,
.category-icon-btn:active span {
  color: #fc9a1d;                    /* brand orange */
}

.category-icon-btn:active img {
  transform: scale(0.92);
}

/* Mobile tuning */
@media (max-width: 576px) {
  .category-icon-btn img {
    width: 40px;
    height: 40px;
  }

  .category-icon-btn span {
    font-size: 0.7rem;
  }
}
/* ================================
   Category Icon Scroll Indicator
================================ */

/* container */
.category-icon-bar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 14px; /* bottom space for scrollbar hint */
  scroll-behavior: smooth;

  /* iOS smooth scrolling */
  -webkit-overflow-scrolling: touch;
}

/* subtle fade edges (scroll hint) */
.category-icon-bar::before,
.category-icon-bar::after {
  content: "";
  position: sticky;
  top: 0;
  width: 18px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.category-icon-bar::before {
  left: 0;
  background: linear-gradient(to right,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0)
  );
}

.category-icon-bar::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0)
  );
}

/* ================================
   Custom Scrollbar (Desktop + Android)
================================ */
.category-icon-bar::-webkit-scrollbar {
  height: 6px;
}

.category-icon-bar::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
}

.category-icon-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    90deg,
    #0058a8,
    #fc9a1d
  );
  border-radius: 999px;
}

/* ================================
   iOS visual scroll cue (fake bar)
================================ */
.category-icon-bar::after {
  box-shadow: inset -10px 0 12px -8px rgba(0,0,0,0.15);
}

/* ================================
   Touch-friendly spacing
================================ */
@media (max-width: 576px) {
  .category-icon-bar {
    padding-bottom: 16px;
  }
}
/* ==================================
   Category icon scroll indicator
================================== */
.category-icon-bar-wrap{
  position: relative;
}

/* Track */
.category-icon-scroll-hint{
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 2px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  pointer-events: none;
}

/* Moving thumb */
.category-icon-scroll-thumb{
  height: 100%;
  width: 35%; /* default; JS will adjust */
  border-radius: 999px;
  background: linear-gradient(90deg, #0058a8, #fc9a1d);
  transform: translateX(0px);
  transition: transform 80ms linear;
  opacity: 0.9;
}

/* Show only on mobile */
@media (min-width: 768px){
  .category-icon-scroll-hint{ display:none; 
      bottom: 6px; /* pulls it up closer */
      
  }
  
}
/* ================================
   Product Modal styling
================================ */
.product-modal .modal-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.product-modal .modal-body {
  padding: 16px;
}
/* ================================
   Product Modal - Mobile sizing
   so backdrop click is possible
================================== */
@media (max-width: 576px){
  #productModal .modal-dialog{
    margin: 12px auto !important;   /* leaves space around */
    max-width: 92vw !important;     /* not full width */
  }

  #productModal .modal-content{
    border-radius: 16px;
  }
}
/* ================================
   Stronger Close Button
================================== */
#productModal .modal-header{
  position: relative;
}

#productModal .modal-close-strong{
  opacity: 1 !important;
  filter: none !important;

  /* make it more visible */
  background-color: rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 10px;

  /* make it feel tappable */
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transform: scale(1.05);
}

#productModal .modal-close-strong:active{
  transform: scale(0.98);
}
.hot-badge i{
  color: #ff2a04;
  font-size: 1rem;
  margin-right: 4px;
  vertical-align: middle;
}
#cartBar {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1055;

  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid rgba(0,0,0,0.12);

  /* iPhone safe-area support */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* /assets/css/style.css */

/* iOS-safe bottom pinning */
:root{
  --cartbar-h: 72px;
  --ios-bottom: env(safe-area-inset-bottom, 0px);
}

/* Cart bar locked to viewport bottom */
/* /assets/css/style.css */
#cartBar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0; /* JS will override on iPhone */
  z-index: 9999;

  background: rgba(255,255,255,.97);
  border-top: 1px solid rgba(0,0,0,.12);

  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================
   Product Modal Styling
   FILE: assets/css/style.css
========================== */

.tp-product-modal .tp-modal-dialog {
  max-width: 520px;
  margin: 1rem auto;
}

.tp-product-modal .tp-modal-content {
  border: 0;
  border-radius: 18px;
  max-height: 82vh;
  overflow-y: auto; /* scroll now includes image */
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  background: #ffffff;
  position: relative;
}

/* Smaller on mobile so there is visible backdrop space to tap outside */
@media (max-width: 576px) {
  .tp-product-modal .tp-modal-dialog {
    max-width: 360px;
    margin: 0.9rem auto;
  }
}

/* Visible close button */
.tp-product-modal .tp-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
}

.tp-product-modal .tp-modal-close:hover {
  background: rgba(0,0,0,.8);
}

/* Image hero */
.tp-product-modal .tp-modal-hero {
  padding: 12px;
  background: linear-gradient(135deg, rgba(252,154,29,.18), rgba(0,88,168,.12));
}

.tp-product-modal .tp-modal-img {
  width: 100%;
  height: 500px; /* was 220px (20% larger) */
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f6f7f8;
}

@media (max-width: 576px) {
  .tp-product-modal .tp-modal-img {
    height: 500px; /* was 180px (20% larger) */
  }
}

.tp-product-modal .tp-modal-body {
  padding: 14px 16px 16px 16px;
}

.tp-product-modal .tp-modal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tp-product-modal .tp-modal-name {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  max-width: 70%;
}

.tp-product-modal .tp-modal-price {
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
}

.tp-product-modal .tp-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tp-product-modal .tp-modal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0,0,0,.06);
}

.tp-product-modal .tp-modal-desc-wrap {
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.tp-product-modal .tp-modal-section-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 6px;
}

.tp-product-modal .tp-modal-desc {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.4;
}

/* Qty bar */
.tp-product-modal .tp-modal-qtybar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
}

.tp-product-modal .tp-qty-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  font-size: 22px;
  font-weight: 800;
  background: rgba(0,0,0,.08);
  cursor: pointer;
}

.tp-product-modal .tp-qty-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tp-product-modal .tp-qty-value {
  min-width: 38px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
}

.tp-product-modal .tp-modal-hint {
  margin-top: 10px;
  font-size: 12px;
  opacity: .65;
  text-align: center;
}
/* ==========================
   Product Modal Styling
   FILE: assets/css/style.css
========================== */

/* Make sure modal is above fixed cart bar */
.tp-product-modal.modal { z-index: 20000; }
.tp-product-modal .modal-dialog { z-index: 20001; }

/* Smaller dialog so user can tap outside */
.tp-product-modal .tp-modal-dialog{
  width: calc(100% - 24px);
  max-width: 520px;
  margin: 12px auto;
}

@media (max-width: 576px){
  .tp-product-modal .tp-modal-dialog{
    width: calc(100% - 34px);
    max-width: 380px;
    margin: 14px auto;
  }
}

/* Modal shell */
.tp-product-modal .tp-modal-content{
  border: 0;
  border-radius: 18px;
  max-height: 82vh;
  overflow-y: auto; /* scroll now includes image */
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  position: relative;

  /* Keep it smaller than the screen */
  max-height: 82vh;
}

/* BIG visible close button */
.tp-product-modal .tp-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.70);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
}
.tp-product-modal .tp-modal-close:active{ transform: scale(.98); }
.tp-product-modal .tp-modal-close:hover{ background: rgba(0,0,0,.82); }

/* Hero */
.tp-product-modal .tp-modal-hero{
  padding: 12px;
  background: linear-gradient(135deg, rgba(252,154,29,.20), rgba(0,88,168,.14));
}

.tp-product-modal .tp-modal-img{
  width: 100%;
  height: 220px;
  object-fit: contain; /* IMPORTANT so it doesn’t zoom/crop */
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f6f7f8;
}

@media (max-width: 576px){
  .tp-product-modal .tp-modal-img{ height: 160px; }
}

/* Scrollable body so it doesn’t become full page */
.tp-product-modal .tp-modal-body{
  padding: 12px 14px 14px;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  max-height: none;
}

@media (max-width: 576px){
  .tp-product-modal .tp-modal-body{
    max-height: calc(82vh - 200px);
  }
}

/* Typography */
.tp-product-modal .tp-modal-title-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tp-product-modal .tp-modal-name{
  font-weight: 900;
  font-size: 17px;
  line-height: 1.15;
  max-width: 72%;
}

.tp-product-modal .tp-modal-price{
  font-weight: 900;
  font-size: 17px;
  white-space: nowrap;
}

.tp-product-modal .tp-modal-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tp-product-modal .tp-modal-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0,0,0,.06);
}

/* Description card */
.tp-product-modal .tp-modal-desc-wrap{
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.tp-product-modal .tp-modal-section-label{
  font-size: 12px;
  font-weight: 800;
  opacity: 0.65;
  margin-bottom: 6px;
}

.tp-product-modal .tp-modal-desc{
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.45;
}

/* Qty bar */
.tp-product-modal .tp-modal-qtybar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
}

.tp-product-modal .tp-qty-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  font-size: 22px;
  font-weight: 900;
  background: rgba(0,0,0,.08);
  cursor: pointer;
}
.tp-product-modal .tp-qty-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.tp-product-modal .tp-qty-value{
  min-width: 38px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
}

.tp-product-modal .tp-modal-hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .6;
  text-align: center;
}
/* ==========================
   FORCE Product Modal image containment (iOS override)
   FILE: assets/css/style.css
========================== */

.tp-product-modal #productModalImg.tp-modal-img{
  display: block;
  width: 100% !important;

  /* 20% larger */
  height: 264px !important;          /* was 160px */
  max-height: 264px !important;      /* was 160px */

  object-fit: contain !important;
  object-position: center center !important;
  background: #f6f7f8 !important;
}

@media (min-width: 577px){
  .tp-product-modal #productModalImg.tp-modal-img{
    /* 20% larger */
    height: 600px !important;        /* was 220px */
    max-height: 600px !important;    /* was 220px */
  }
}
/* ==========================
   Prevent iOS double-tap zoom on qty buttons
   FILE: assets/css/style.css
========================== */

/* Disable double-tap zoom + text selection just on qty controls */
.tp-qty-btn,
.tp-modal-qtybar,
.cart-stepper-btn,
.cart-add-btn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Extra safety: iOS highlight/selection */
.tp-qty-btn,
.cart-stepper-btn {
  -webkit-tap-highlight-color: transparent;
}
/* ==========================
   Category scroll offset for sticky navbar
   FILE: assets/css/style.css
========================== */

.category-section-wrap {
  scroll-margin-top: 90px; /* fallback; JS does the real offset */
}
/* UNDER CONSTRUCTION */

.under-construction-wrapper {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff7ed, #ffffff);
  padding: 40px 20px;
}

.uc-box {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
  max-width: 500px;
  width: 100%;
}

.uc-logo {
  height: 60px;
}

.uc-title {
  font-weight: 700;
  color: #fc9a1d;
  margin-bottom: 10px;
}

.uc-text {
  font-size: 15px;
  color: #555;
}

.uc-sub {
  font-size: 14px;
  color: #888;
  margin-bottom: 20px;
}

.uc-badge {
  display: inline-block;
  background: #fc9a1d;
  color: white;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
}
/* --- Cart Drawer: prevent footer from covering content --- */
#cartDrawer .offcanvas-body {
  /* adjust value if your footer is taller/shorter */
  padding-bottom: 120px !important;
}

/* Keep footer visible but not overlaying content awkwardly */
#cartDrawer .cart-footer,
#cartDrawer .cart-summary,
#cartDrawer .offcanvas-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
}
/* Desktop floating logo (bottom-left) */
/* Desktop floating logo (bottom-left) */
/* Desktop floating logo (bottom-left) */
.pasabay-float-desktop{
  position: fixed;
  left: 18px;
  bottom: 80px;          /* lift above cart bar */
  width: 110px;
  height: auto;
  z-index: 9999;         /* ensure it's above everything */
  pointer-events: none;
  display: none;
}

/* Cart bar middle logo */
.pasabay-cart-logo{
  width: 120px;   /* +30% from 50px */
  height: auto;
  display: none;
}


/* Center the middle logo area */
.cart-bar-mid{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* DESKTOP */
@media (min-width: 992px){
  .pasabay-float-desktop{
    display:block !important;
  }
  .pasabay-cart-logo{
    display:none !important;
  }
}

/* MOBILE */
@media (max-width: 991.98px){
  .pasabay-float-desktop{
    display:none !important;
  }
  .pasabay-cart-logo{
    display:block !important;
  }
}
.pasabay-search-logo{
  height: 48px;
  width: auto;
  margin-left: 10px;
  opacity: 0.95;
}
.emart-main-logo{
  height: 60px;   /* 30% bigger from 46px */
  width: auto;
}
/* Mobile E-Mart logo (30% bigger) */
.mobile-emart-logo-lg{
  height: 60px; /* adjust if you want slightly smaller/larger */
  width: auto;
}
/* Force true center on mobile logo row */
.mobile-logo-wrap{
  width: 100%;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

/* Make sure the link doesn't introduce offsets */
.mobile-logo-wrap a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the image itself doesn't have margins pushing it */
.mobile-logo-wrap img{
  display: block;
  margin: 0 auto !important;
}
@media (max-width: 575.98px){
  .navbar .container-fluid{
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* HARD CENTER override for mobile logo row */
.mobile-logo-wrap{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* kill floats/margins that keep it left */
.mobile-logo-wrap, 
.mobile-logo-wrap a, 
.mobile-logo-wrap img{
  float: none !important;
}

.mobile-logo-wrap a{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.mobile-logo-wrap img{
  display: block !important;
  margin: 0 auto !important;
}

/* LOCATION = HOT ITEM STYLE */
.location-pill{
  background: #e6f0fb; /* same soft badge feel */
  color: #0058a8;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  gap: 4px;
  transition: 0.2s ease;
}

.location-pill:hover{
  background: #d4e6fa;
  transform: translateY(-1px);
}

.location-pill-icon{
  color: #fc9a1d; /* your brand orange like HOT badge */
  font-size: 13px;
}

.location-pill-text{
  line-height: 1;
  white-space: nowrap;
}
/* Make sure navbar icon row can fit the new badge on mobile */
@media (max-width: 576px){
  .nav-right,
  .d-sm-none .d-flex.align-items-center.gap-2{
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* Location badge tweaks (only for navbar placement) */
.location-hot{
  display: inline-flex !important;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* NAVBAR VISIT PILL */
.visit-pill{
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
  color: #0058a8 !important;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Force blue in navbar (overrides orange nav color) */
.navbar .visit-pill{
  background: rgba(0, 88, 168, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(0, 88, 168, 0.15),
    0 2px 6px rgba(0,0,0,0.05);
}

/* MOBILE override */
@media (max-width: 576px){
  .visit-pill{
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
  }
}

/* =========================================
   PRODUCT NAME VISIBILITY BOOST (GRID + SLIDER)
   File: assets/css/style.css
   ========================================= */

/* Make product names clearer without changing layout */
.product-card .card-title{
  font-weight: 800;                 /* bolder */
  color: #111 !important;           /* darker text for contrast */
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65); /* subtle clarity on light bg */
}

/* Optional: allow 2 lines before cutting off (clearer for long names) */
.product-card .card-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* show up to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================================================
   CART DRAWER REDESIGN (aesthetic + clear sections)
   File: assets/css/style.css
   ========================================================= */

#cartDrawer .cart-drawer-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 140px !important; /* space so footer never overlaps content */
}

.cart-drawer-header{
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Section cards */
#cartDrawer .cart-section{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  overflow: hidden;
}

#cartDrawer .cart-section-head{
  padding: 10px 12px;
  background: rgba(0, 88, 168, 0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#cartDrawer .cart-section-title{
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #0b2f52;
  display: flex;
  align-items: center;
}

#cartDrawer .cart-section-sub{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-top: 2px;
}

#cartDrawer .cart-section-content{
  padding: 12px;
}

/* Items section: keep list readable */
#cartDrawer .cart-section-items .cart-section-content{
  padding: 10px 10px;
}

#cartDrawer #cartList > div{
  border-radius: 12px !important;
}

/* Note styling */
#cartDrawer .cart-drawer-note{
  font-size: 12px;
  line-height: 1.35;
  padding: 4px 8px;
}

/* Sticky footer actions */
#cartDrawer .cart-drawer-footer{
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 12px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.08);
}

#cartDrawer .cart-footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#cartDrawer .cart-footer-total{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

#cartDrawer .cart-footer-total-label{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  font-weight: 700;
}

#cartDrawer .cart-footer-total-value{
  font-size: 18px;
  font-weight: 900;
  color: #111;
}

#cartDrawer .cart-clear-btn{
  border-radius: 12px;
  padding: 6px 10px;
  white-space: nowrap;
}

#cartDrawer .cart-send-btn{
  border-radius: 14px;
  font-weight: 800;
  padding: 12px 12px;
}

/* Mobile tweaks */
@media (max-width: 576px){
  #cartDrawer .cart-section-head{
    padding: 9px 11px;
  }
  #cartDrawer .cart-section-content{
    padding: 11px;
  }
  #cartDrawer .cart-footer-total-value{
    font-size: 17px;
  }
}
/* =========================================================
   CART DRAWER: Formal + clear section design (NO sticky/flex)
   File: assets/css/style.css
   ========================================================= */

#cartDrawer .offcanvas-body{
  padding-top: 10px;
}

/* Section card */
#cartDrawer .cart-section{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

#cartDrawer .cart-section-head{
  padding: 10px 12px;
  background: rgba(0, 88, 168, 0.06);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#cartDrawer .cart-section-title{
  font-weight: 800;
  color: #0b2f52;
  display: flex;
  align-items: center;
  letter-spacing: 0.2px;
}

#cartDrawer .cart-section-sub{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-top: 2px;
}

#cartDrawer .cart-section-content{
  padding: 12px;
}

/* Make cart items look cleaner */
#cartDrawer #cartList > div{
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
}

/* Quantity buttons look a bit more formal */
#cartDrawer #cartList button.btn-outline-secondary{
  border-radius: 10px;
  padding: 4px 10px;
}

/* Summary row */
#cartDrawer .cart-summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

#cartDrawer .cart-summary-label{
  font-weight: 700;
  color: rgba(0,0,0,0.70);
}

#cartDrawer .cart-summary-value{
  font-weight: 900;
  font-size: 18px;
  color: #111;
}

/* Mobile spacing slightly tighter */
@media (max-width: 576px){
  #cartDrawer .cart-section-content{
    padding: 11px;
  }
  #cartDrawer .cart-summary-value{
    font-size: 17px;
  }
}
/* =========================================
   CATEGORY ICONS — Desktop wrap (no scrollbar)
   Max 7 icons per row
   Mobile unchanged
========================================= */

/* DESKTOP/TABLET: wrap, no horizontal scroll */
@media (min-width: 768px){
  .category-icon-bar{
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 14px;               /* adjust spacing */
    padding-bottom: 6px;     /* remove extra space reserved for scrollbar */
  }

  /* max 7 per row: each item takes 1/7 width */
  .category-icon-bar > *{
    flex: 0 0 calc(100% / 8);
    max-width: calc(100% / 8);
  }

  /* keep the icon item centered inside its “slot” */
  .category-icon-bar > *{
    display: flex;
    justify-content: center;
  }

  /* hide any scrollbar UI on desktop if browser still renders it */
  .category-icon-bar::-webkit-scrollbar{
    height: 0 !important;
  }

  /* if you have the fake scroll hint bar, hide on desktop */
  .category-icon-scroll-hint{
    display: none !important;
  }
}

/* MOBILE: keep your current behavior (horizontal scroll) */
@media (max-width: 767.98px){
  .category-icon-bar{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}
.needs-attention{
  box-shadow: 0 0 0 .25rem rgba(25,135,84,.25);
  border-color: rgba(25,135,84,.45) !important;
}
.price-lock{
  display: inline-block;
  filter: blur(5px);
  user-select: none;
  letter-spacing: 0.08em;
}

.product-card-locked .locked-status-btn{
  border-radius: 10px;
  font-weight: 700;
}

#accessStatusBody .alert{
  border-radius: 12px;
}

@media (max-width: 576px){

  /* Add horizontal breathing space */
  .mobile-nav-actions-wrap{
    padding: 0 12px;
  }

  /* Center the top row (icons + location) */
  .mobile-nav-left{
    justify-content: center;
  }

  /* FULL WIDTH BUTTON ROW */
  .mobile-nav-right{
    width: 100%;
    display: flex;
    justify-content: center; /* spreads buttons */
    align-items: center;
    gap: 10px;
  }

  /* Make buttons evenly spaced */
  .mobile-nav-right .btn{
    flex: 1;                /* equal width */
    text-align: center;
    min-width: 0;           /* prevent overflow */
    white-space: nowrap;
  }

  /* Username pill sizing */
  .mobile-user-pill{
    flex: 1;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Checkout slightly bigger for emphasis */
  .mobile-nav-right .cart-btn{
    flex: 1.2;
  }
}
.admin-wide-page{
  width: 100%;
  max-width: 100%;
}

/* =========================================
   PASABAY NAV BUTTON
   FILE: assets/css/style.css
========================================= */
.pasabay-nav-btn{
  background: #ffffff;
  color: #0058a8 !important; /* your blue */
  border: 2px solid #0058a8;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  animation: pasabayFlashPulse 1.15s infinite;
}

.pasabay-nav-btn:hover{
  background: #0058a8;
  color: #fff !important;
  transform: translateY(-1px);
}

.pasabay-nav-btn:hover{
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
}

.pasabay-nav-btn:focus{
  color: #fff !important;
  text-decoration: none;
}

.pasabay-nav-btn-mobile{
  width: 100%;
  max-width: 280px;
  font-size: 0.78rem;
  padding: 8px 12px;
  margin: 0 auto;
}

@media (max-width: 576px){
  .mobile-nav-left{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@keyframes pasabayFlashPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(0, 88, 168, 0.45), 0 6px 16px rgba(0, 88, 168, 0.25);
    opacity: 1;
  }
  50%{
    box-shadow: 0 0 0 10px rgba(0, 88, 168, 0), 0 8px 20px rgba(0, 88, 168, 0.35);
    opacity: 0.92;
  }
  100%{
    box-shadow: 0 0 0 0 rgba(0, 88, 168, 0), 0 6px 16px rgba(0, 88, 168, 0.25);
    opacity: 1;
  }
}
@media (max-width: 576px){
  .pasabay-nav-btn-mobile{
    margin-bottom: 8px;
  }
}

/* =========================================================
   STOREFRONT PRODUCT CARD OVERRIDE
   Grab-style mobile card feel, same grid structure
   FILE: assets/css/style.css
   ========================================================= */

#productGrid .product-card,
.promo-track .product-card{
  border: 0 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.10) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

#productGrid .product-card:hover,
.promo-track .product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.14) !important;
}

.product-card .product-card-media{
  position: relative;
  padding: 5px 5px 4px;
}

.product-card .product-img,
.product-card .card-img-top.product-img{
  width: 100%;
  height: 170px;
  display: block;
  object-fit: contain;
  background: #f7f7f7;
  border-radius: 14px;
  padding: 5px;
}

.product-card .product-card-media-action{
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 4;
}

.product-card .card-body{
  padding: 0 14px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-card .product-card-price-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.product-card .product-card-price-main{
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 800;
  color: #111 !important;
  letter-spacing: -0.02em;
}

.product-card .product-card-meta-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 24px;
}

.product-card .product-card-level-badge{
  background: #eef4ff !important;
  color: #0058a8 !important;
  border: 1px solid rgba(0, 88, 168, 0.16);
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 10px;
}

.product-card .card-title{
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  min-height: 2.45em;
  text-transform: uppercase;
}

.product-card .stock-remaining{
  margin-top: 0 !important;
  font-size: 0.86rem;
  line-height: 1.2;
  color: #d44a3a !important;
}

.product-card .product-card-inline-btn{
  border-radius: 14px !important;
  min-height: 42px;
  font-weight: 700;
}

.product-card .cart-qty-wrap{
  width: auto;
}

.product-card .cart-add-btn.cart-fab{
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0058a8 !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(0, 88, 168, 0.30);
}
.product-card .cart-add-btn.cart-fab:hover{
  background: #004b90 !important;
}

.product-card .cart-add-btn.cart-fab i{
  font-size: 1.45rem;
  color: #fff;
  line-height: 1;
}

.product-card .cart-stepper.cart-stepper-fab{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: #0058a8;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 88, 168, 0.30);
}

.product-card .cart-stepper-fab .cart-stepper-btn{
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: #0058a8 !important;
  background: #ffffff !important;
}

.product-card .cart-stepper-fab .cart-stepper-btn i{
  font-size: 1rem;
  line-height: 1;
}
.product-card .cart-stepper-fab .cart-stepper-qty{
  min-width: 24px;
  padding: 0 4px;
  text-align: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.92rem;
}

.promo-track .product-card{
  width: 210px;
}

.promo-track .product-card .product-img{
  height: 130px;
}

/* Mobile */
@media (max-width: 576px){
  #productGrid{
    --bs-gutter-x: 0.7rem;
    --bs-gutter-y: 0.9rem;
  }

  #productGrid .product-card{
    border-radius: 18px !important;
  }

.product-card .product-card-media{
  padding: 12px 12px 6px;
}

.product-card .product-img,
.product-card .card-img-top.product-img{
  height: 132px;
  border-radius: 16px;
  padding: 12px;
}

  .product-card .product-card-media-action{
    top: 18px;
    right: 18px;
  }

  .product-card .card-body{
    padding: 0 12px 12px !important;
    gap: 5px;
  }

  .product-card .product-card-price-main{
    font-size: 1.05rem;
  }

  .product-card .card-title{
    font-size: 0.88rem !important;
    min-height: 2.35em;
  }

  .product-card .stock-remaining{
    font-size: 0.8rem;
  }

  .product-card .cart-add-btn.cart-fab{
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  .product-card .cart-add-btn.cart-fab i{
    font-size: 1.2rem;
  }

  .product-card .cart-stepper.cart-stepper-fab{
    padding: 4px;
  }

  .product-card .cart-stepper-fab .cart-stepper-btn{
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .product-card .cart-stepper-fab .cart-stepper-qty{
    min-width: 20px;
    font-size: 0.85rem;
  }

  .promo-track .product-card{
    width: 170px;
  }

  .promo-track .product-card .product-img{
    height: 110px;
  }
}

/* Larger desktop cards but same grid */
@media (min-width: 992px){
  .product-card .product-img,
  .product-card .card-img-top.product-img{
    height: 180px;
  }

  /* Smaller product name */
  .product-card .card-title{
    font-size: 0.92rem !important;
  }

  /* Smaller price */
  .product-card .product-card-price-main{
    font-size: 1.18rem;
  }

  /* Smaller add (+) button */
  .product-card .cart-add-btn.cart-fab{
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .product-card .cart-add-btn.cart-fab i{
    font-size: 1.1rem;
  }

  /* Smaller stepper */
  .product-card .cart-stepper.cart-stepper-fab{
    padding: 3px;
  }

  .product-card .cart-stepper-fab .cart-stepper-btn{
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .product-card .cart-stepper-fab .cart-stepper-qty{
    font-size: 0.8rem;
  }
}
/* Voucher Progress Floating Bar */
.voucher-progress-floating{
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  margin: 0 auto;
  z-index: auto;
  pointer-events: auto;
  align-self: end;
  justify-self: center;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,88,168,0.12);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  padding: 10px 12px;
  backdrop-filter: blur(8px);
}

@media (max-width: 576px){
  .voucher-progress-floating{
    max-width: 250px;
    align-self: end;
    justify-self: center;
    margin: 0 auto;
  }
}   

.voucher-progress-title{
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0058a8;
  margin-bottom: 6px;
}

.voucher-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}

.voucher-progress-text{
  font-size:0.92rem;
  font-weight:800;
  color:#1f2937;
  line-height:1.1;
}

.voucher-progress-amount{
  font-size:0.90rem;
  font-weight:800;
  color:#0058a8;
  white-space:nowrap;
  line-height:1.1;
}

.voucher-progress-track{
  height:8px;
  background:#e9eef5;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:5px;
}

.voucher-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #0058a8 0%, #fc9a1d 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.voucher-progress-fill::after{
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0));
  animation: voucherProgressShine 2.4s linear infinite;
}

.voucher-progress-labels{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:0.78rem;
  color:#6b7280;
  line-height:1.1;
}

@media (max-width: 576px){
  .voucher-progress-floating{
    max-width: 250px;
    padding: 6px 8px;
    border-radius: 11px;
  }

  .voucher-progress-meta{
    gap: 6px;
    margin-bottom: 4px;
  }

  .voucher-progress-text{
    font-size: 0.82rem;
  }

  .voucher-progress-amount{
    font-size: 0.80rem;
  }

  .voucher-progress-track{
    height: 7px;
    margin-bottom: 4px;
  }

  .voucher-progress-labels{
    font-size: 0.70rem;
    gap: 6px;
  }
}

.voucher-progress-labels strong{
  color: #111827;
}

@keyframes voucherProgressShine{
  0%{ left: -40%; }
  100%{ left: 120%; }
}

/* Voucher Reward Popup */
.voucher-reward-popup{
  position: fixed;
  right: 18px;
  bottom: 96px;
  width: min(360px, calc(100vw - 24px));
  z-index: 1060;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0058a8 0%, #0b73d9 55%, #fc9a1d 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.voucher-reward-popup.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.voucher-reward-popup.is-leaving{
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
}

.voucher-reward-rays{
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0.34) 22deg,
      rgba(255,255,255,0) 44deg,
      rgba(255,255,255,0.24) 72deg,
      rgba(255,255,255,0) 96deg,
      rgba(255,255,255,0.18) 132deg,
      rgba(255,255,255,0) 168deg,
      rgba(255,255,255,0.22) 210deg,
      rgba(255,255,255,0) 244deg,
      rgba(255,255,255,0.20) 282deg,
      rgba(255,255,255,0) 320deg,
      rgba(255,255,255,0.34) 360deg
    );
  opacity: 0.42;
  filter: blur(12px);
  animation: voucherRewardRays 14s linear infinite;
}

@keyframes voucherRewardRays{
  from{ transform: rotate(0deg) scale(1); }
  to{ transform: rotate(360deg) scale(1); }
}

.voucher-reward-body{
  position: relative;
  z-index: 1;
  padding: 16px 16px 14px;
}

.voucher-reward-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.voucher-reward-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 6px 10px;
}

.voucher-reward-close{
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voucher-reward-close:hover{
  background: rgba(255,255,255,0.24);
}

.voucher-reward-title{
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  margin: 12px 0 8px;
}

.voucher-reward-message{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.94);
  margin-bottom: 14px;
}

.voucher-reward-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.voucher-reward-counter{
  font-size: 12px;
  color: rgba(255,255,255,0.88);
}

.voucher-reward-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.voucher-reward-btn{
  appearance: none;
  border: 0;
  text-decoration: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.voucher-reward-btn-view{
  background: #fff;
  color: #0058a8;
}

.voucher-reward-btn-next{
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.20);
}

.voucher-reward-btn-next:hover,
.voucher-reward-btn-view:hover{
  opacity: 0.96;
}

@media (max-width: 576px){
  .voucher-progress-floating{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 180px;
    max-width: 180px;
    margin: 0 auto;
    align-self: end;
    justify-self: center;
    padding: 6px 7px;
    border-radius: 11px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  .voucher-progress-title{
    font-size: 9px;
    margin-bottom: 4px;
    letter-spacing: 0.06em;
  }

  .voucher-progress-meta{
    gap: 6px;
    margin-bottom: 5px;
  }

  .voucher-progress-text{
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .voucher-progress-amount{
    font-size: 10px;
  }

  .voucher-progress-track{
    height: 6px;
  }

  .voucher-progress-labels{
    margin-top: 4px;
    font-size: 9px;
    gap: 6px;
  }

  .voucher-reward-popup{
    right: 8px;
    left: 8px;
    bottom: 126px;
    width: auto;
  }

  .voucher-reward-footer{
    flex-direction: column;
    align-items: stretch;
  }

  .voucher-reward-actions{
    width: 100%;
  }

  .voucher-reward-btn{
    flex: 1;
    text-align: center;
  }
}

.storefront-text-marquee-bar{
  display:none;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.storefront-text-marquee-inner{
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
}

.storefront-text-marquee-track{
  position: relative;
  width: 100%;
  min-height: 28px;
  overflow: hidden;
}

.storefront-text-marquee-message{
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  line-height: 1.2;
  will-change: transform;
  transform: translate3d(100%, -50%, 0);
}

@media (max-width: 575.98px){
  .storefront-text-marquee-inner{
    padding: 7px 0;
  }

  .storefront-text-marquee-track{
    min-height: 24px;
  }
}
.sale-countdown-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff5f5 0%,#ffe3e3 100%);
  border:1px solid rgba(220,53,69,0.18);
  box-shadow:0 6px 16px rgba(220,53,69,0.12);
}

.sale-countdown-label{
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b02a37;
  white-space:nowrap;
}

.sale-countdown{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.sale-time-box{
  min-width:46px;
  padding:6px 8px 5px;
  border-radius:10px;
  background:#dc3545;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(220,53,69,0.22);
}

.sale-time-value{
  font-size:16px;
  font-weight:800;
  line-height:1;
}

.sale-time-label{
  font-size:10px;
  font-weight:700;
  line-height:1;
  margin-top:3px;
  opacity:.92;
}

.sale-time-sep{
  font-size:16px;
  font-weight:800;
  color:#b02a37;
  line-height:1;
}

@media (max-width: 575.98px){
  .sale-countdown-wrap{
    gap:8px;
    padding:6px 8px;
  }

  .sale-countdown-label{
    font-size:10px;
  }

  .sale-time-box{
    min-width:40px;
    padding:5px 6px 4px;
  }

  .sale-time-value{
    font-size:14px;
  }

  .sale-time-label{
    font-size:9px;
  }

  .sale-time-sep{
    font-size:14px;
  }
}
/* =========================================
   FINAL OVERRIDE — COMPACT PRODUCT CARD TEXT ONLY
   Keep image size and circle + button as-is
========================================= */

#productGrid .product-card .card-body,
#onSaleGrid .product-card .card-body,
#hotTrack .product-card .card-body{
  padding: 0.30rem !important;
}

#productGrid .product-card .card-title,
#onSaleGrid .product-card .card-title,
#hotTrack .product-card .card-title{
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  margin: 0 0 2px 0 !important;
}

#productGrid .product-card .product-card-price-main,
#onSaleGrid .product-card .product-card-price-main,
#hotTrack .product-card .product-card-price-main{
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

#productGrid .product-card strong.product-card-price-main,
#onSaleGrid .product-card strong.product-card-price-main,
#hotTrack .product-card strong.product-card-price-main{
  font-weight: 700 !important;
  display: inline-block !important;
  margin-bottom: 0 !important;
}

#productGrid .product-card .text-decoration-line-through,
#onSaleGrid .product-card .text-decoration-line-through,
#hotTrack .product-card .text-decoration-line-through{
  font-size: 0.56rem !important;
  line-height: 1 !important;
}

#productGrid .product-card .product-card-meta-row,
#onSaleGrid .product-card .product-card-meta-row,
#hotTrack .product-card .product-card-meta-row{
  gap: 4px !important;
  margin-bottom: 2px !important;
}

#productGrid .product-card .product-card-level-badge,
#onSaleGrid .product-card .product-card-level-badge,
#hotTrack .product-card .product-card-level-badge{
  font-size: 0.55rem !important;
  padding: 2px 5px !important;
}

#productGrid .product-card .hot-badge,
#onSaleGrid .product-card .hot-badge,
#hotTrack .product-card .hot-badge{
  font-size: 0.54rem !important;
  padding: 1px 6px !important;
}

#productGrid .product-card small,
#onSaleGrid .product-card small,
#hotTrack .product-card small{
  font-size: 0.54rem !important;
  line-height: 1.05 !important;
}
#productGrid .product-card .stock-request-btn,
#onSaleGrid .product-card .stock-request-btn,
#hotTrack .product-card .stock-request-btn{
  padding: 1px 6px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#productGrid{
  --bs-gutter-x: 0.35rem !important;
  --bs-gutter-y: 0.35rem !important;
}

@media (max-width: 576px){
  #productGrid .product-card .card-title,
  #onSaleGrid .product-card .card-title,
  #hotTrack .product-card .card-title{
    font-size: 0.64rem !important;
  }

  #productGrid .product-card .product-card-price-main,
  #onSaleGrid .product-card .product-card-price-main,
  #hotTrack .product-card .product-card-price-main{
    font-size: 0.64rem !important;
  }

#productGrid .product-card .stock-request-btn,
#onSaleGrid .product-card .stock-request-btn,
#hotTrack .product-card .stock-request-btn{
  padding: 1px 6px !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 1 !important;
}
/* =========================================
   MOBILE FINAL OVERRIDE — IMAGE ALMOST TO EDGE
   Put at absolute very end of style.css
========================================= */
@media (max-width: 576px){
  #productGrid .product-card .product-card-media,
  #onSaleGrid .product-card .product-card-media,
  #hotTrack .product-card .product-card-media,
  .promo-track .product-card .product-card-media{
    padding: 5px 5px 4px !important;
  }

  #productGrid .product-card .product-img,
  #onSaleGrid .product-card .product-img,
  #hotTrack .product-card .product-img,
  .promo-track .product-card .product-img,
  #productGrid .product-card .card-img-top.product-img,
  #onSaleGrid .product-card .card-img-top.product-img,
  #hotTrack .product-card .card-img-top.product-img,
  .promo-track .product-card .card-img-top.product-img{
    padding: 5px !important;
    border-radius: 14px !important;
  }
}