/* ================================
       Tara Pasabay E-Mart - style.css
       Compact cards + mobile header + tap animations
    ================================== */
    
    /* 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: 260px;              /* 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;
      gap: 10px;
    }
    /* ================================
       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; }
}
/* ================================
   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;
  overflow: hidden;
  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: 220px;
  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: 180px;
  }
}

.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;
  overflow: hidden;
  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: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(82vh - 260px); /* 82vh minus hero area; keeps body scrollable */
}

@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;
  height: 160px !important;          /* mobile default */
  max-height: 160px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f6f7f8 !important;
}

@media (min-width: 577px){
  .tp-product-modal #productModalImg.tp-modal-img{
    height: 220px !important;
    max-height: 220px !important;
  }
}
/* ==========================
   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 */
}