/* Ahmed Foods brand theme, applied site-wide. Loaded once via head.php so every
   customer-facing page shares it. (deploy-sync-force-5)

   v2 palette - updated to the exact Ahmed Foods colour system (green as the one brand
   colour, white/off-white as the actual UI foundation, red reserved for offers/important
   actions, orange for pending/limited-stock). Same variable names as before so every rule
   below that already references them updates automatically - this is a recolour of an
   already-bespoke design (built from the same ADZ Foods/Adams Foodservice reference
   points cited again for this pass), not a rebuild. */
:root{
  --ab-green: #087A45;
  --ab-green-dark: #066238;
  --ab-green-accent: #4FAE5A;
  --ab-green-light: #EAF6EF;
  --ab-ink: #1F2933;
  --ab-muted: #6B7280;
  --ab-border: #DDE5E0;
  --ab-border-light: #E7ECE9;
  --ab-off-white: #F7F8F6;
  --ab-orange: #F2A900;
  /* Deal/promo accent - deliberately red against the green theme so a promotion is
  impossible to miss scanning down the page, same contrast pattern competitor wholesale
  sites (ADZ Foods, Adams Foodservice) use for their own "X% off" badges. */
  --ab-deal: #D71920;
  --ab-deal-dark: #a81318;
}

/* ---- Visual system pass - a restrained "premium wholesale" identity: mostly white/
off-white surfaces, flat Ahmed Green for primary actions, red reserved for offers/alerts
only. A previous pass here used gradients + lift-on-hover on every button/badge/card to
make the flat Bootstrap-template look feel less generic - reversed per direct instruction:
gradients read as busier and less premium than a confident flat colour, and stacking one on
every button, the Top Selling badge AND the category header at once pushed green far past
the intended 5-10% of the page. Flat colour + a subtle shadow does the same "this is
branded, not default Bootstrap" job without the visual noise. ---- */

/* Page background - was plain white with no separation from the white sidebar/product
cards sitting on top of it, so the whole page read as one flat surface. Off-white now, so
the (already-white) cards/sidebar/search read as distinct surfaces sitting above the page. */
body{
  background-color: var(--ab-off-white);
}

/* Add-to-cart icon button - was full text ("Add to cart" / icon + "Added"), which on a
narrow mobile card regularly overflowed the qty stepper row and got clipped off the edge
entirely (invisible, not just tight). Icon-only and a fixed compact square instead - the
qty field already auto-saves on its own via +/- or typing, so this button is really just a
quick explicit "add one" tap plus a visible added/not-added state, not the only way in. */
.ab-add-btn{
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ab-add-btn .feather-icon{
  margin: 0 !important;
}

/* ---- Cart panel item row (mobile_menu.php #offcanvasRight) - was a 3-column Bootstrap
grid never designed for a 360px-wide panel, so it wrapped into a cramped, illegible stack
(truncated "Note ab..." button, a floating "Update" link with nothing tying it to the row
above it). Flex-based instead, sized for this exact panel width. ---- */
.ab-cart-item-img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--ab-border);
  background: #fafcfb;
}
.ab-cart-item-name{
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}
.ab-cart-item-desc{
  font-size: 0.75rem;
  line-height: 1.3;
}
.ab-cart-qty-spinner{
  width: auto;
  flex: 0 0 auto;
}
.ab-cart-qty-spinner .quantity-field{
  width: 40px;
  text-align: center;
}
.ab-cart-note-toggle,
.ab-cart-remove-btn{
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.ab-cart-note-input{
  font-size: 0.78rem;
}

/* ---- Round category icons (shop.php, category-icons-strip.php) - a quick visual-scan
row at the top of Shop, same pattern as Adams/ADZ's category icon rows. Falls back to the
category's first letter in a coloured circle when there's no dedicated icon image yet, so
this works immediately without needing 60+ icons uploaded first. ---- */
/* Stays on screen while scrolling the product list instead of scrolling away with
everything else - picking another category shouldn't mean scrolling back to the top
first. position:sticky was tried here initially but its containing block (the small
.container this row shared with just the promo strip) was barely taller than the row
itself, so there was no room for it to actually "stick" within - it scrolled away
almost immediately, same as if it had no sticky rule at all. position:fixed instead,
same reliable approach already used for the top quick bar - doesn't depend on any
ancestor's height, just needs a spacer below it so content doesn't jump underneath. */
.ab-category-icons-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20,40,30,0.06);
  /* Refined brand separator between category navigation and the header below it - was
  1px neutral grey (indistinguishable from every other hairline on the page), moved the
  green accent that used to sit on the header's own top border here instead, since this is
  the boundary it's actually meant to mark. */
  border-bottom: 3px solid var(--ab-green);
}
.ab-category-icons-spacer{
  /* Measured the real rendered bar at 122-123px (icon circle + two-line label + padding +
  scroll arrow) - 108px was a guess made before checking, leaving ~15px of real content
  permanently hidden under the fixed bar (reported directly: a category label's bottom
  edge was cut off). Rounded up with a small buffer instead of the exact figure so small
  font/zoom differences don't reopen the same gap. */
  height: 132px;
}
@media (max-width: 767px){
  .ab-category-icons-fixed{
    /* Sits just below the fixed mobile quick bar (52px tall) rather than under it. */
    top: 52px;
  }
  .ab-category-icons-spacer{
    height: 120px;
  }
}
.ab-category-icons-bar-container{
  display: flex;
  align-items: center;
  gap: 12px;
}
.ab-category-icons-cart{
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  background: var(--ab-green);
  color: #fff;
  border-radius: 20px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.ab-category-icons-cart:hover{
  background: var(--ab-green-dark);
  color: #fff;
}
.ab-category-icons-cart .ab-cart-count{
  background: #fff;
  color: var(--ab-green-dark);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding: 0 4px;
}
.ab-category-icons{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 10px 2px 12px;
  flex: 1;
  min-width: 0;
}
.ab-category-icon-item{
  flex: 0 0 auto;
  width: 84px;
  text-align: center;
  text-decoration: none;
  color: var(--ab-ink);
}
/* Every circle used to fill green regardless of selection, which read as "everything is
green" rather than showing which category is actually active - white by default now, with
green reserved for the hover/active state so the active category is the one obvious thing.
.active is applied server-side (category-icons-strip.php, when arriving via ?cat=) and by
the filter JS (shop-sidebar.php's applyFilter) when picking a category in place. */
.ab-category-icon-circle{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ab-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ab-green);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.ab-category-icon-circle img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.ab-category-icon-item:hover .ab-category-icon-circle{
  background: var(--ab-green-light);
  border-color: var(--ab-green);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(20,83,45,0.15);
}
.ab-category-icon-item.active .ab-category-icon-circle{
  background: var(--ab-green-light);
  border-color: var(--ab-green);
  color: var(--ab-green-dark);
}
.ab-category-icon-item.active .ab-category-icon-label{
  color: var(--ab-green-dark);
  font-weight: 700;
}
.ab-category-icon-label{
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Monthly promotions strip (promotions-strip.php) - admin uploads title/discount/
dates via site_copy/promotions.php, this renders them in the site's own theme rather than
showing whatever reference image gets uploaded as-is. ---- */
.ab-promo-strip{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ab-promo-card{
  flex: 0 0 auto;
  width: 220px;
  background: linear-gradient(135deg, var(--ab-green) 0%, var(--ab-green-dark) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  position: relative;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(20,83,45,0.25);
}
.ab-promo-card:hover{
  color: #fff;
  box-shadow: 0 6px 16px rgba(20,83,45,0.35);
}
.ab-promo-badge{
  display: inline-block;
  background: var(--ab-deal);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ab-promo-title{
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
.ab-promo-desc{
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 4px;
}
@media (max-width: 767px){
  .ab-promo-card{ width: 180px; padding: 12px; }
  .ab-promo-title{ font-size: 0.85rem; }
}

/* ---- Site-wide buttons, links, active states ---- */
.btn-primary{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--ab-green-dark) !important;
  border-color: var(--ab-green-dark) !important;
}
.btn-outline-primary{
  color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
}
.btn-outline-primary:hover{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  color: #fff !important;
}
/* .btn-success was the site's general "confirm" green (--ab-green-accent, the lighter
FRESH GREEN) - correct for its original use, but "Browse new products" and a few other
primary calls-to-action also ride on .btn-success, and those need the same solid brand
green as every other primary action, not a lighter secondary shade. */
.btn-success{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
}
.btn-success:hover, .btn-success:focus{
  background-color: var(--ab-green-dark) !important;
  border-color: var(--ab-green-dark) !important;
}
.btn-outline-success{
  color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
}
.btn-outline-success:hover{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  color: #fff !important;
}
.text-primary{ color: var(--ab-green) !important; }
.text-success{ color: var(--ab-green-accent) !important; }
a{ color: var(--ab-green); }
a:hover{ color: var(--ab-green-dark); }
.badge.bg-primary{ background-color: var(--ab-green) !important; }
/* Basket count badges (header.php, mobile_menu.php bottom nav) - was Bootstrap's default
info-blue, off-brand and easy to mistake for a notification rather than "items in your
basket". */
.badge.bg-success{ background-color: var(--ab-green) !important; }
.dropdown-item.text-primary{ color: var(--ab-green) !important; }
.nav-link.active,
.page-link.active, .active > .page-link,
.list-group-item-action.active{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
}
/* Professional, consistent borders across every input/select/textarea site-wide, not just
the ones with bespoke classes - was Bootstrap's default border colour, off the brand's own
--ab-border, and a smaller radius than the rest of the theme. */
.form-control, .form-select{
  border-color: var(--ab-border);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--ab-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(20,83,45,0.15) !important;
}

/* Header cart icon count (header.php's plain <span class="ab-cart-count">, not a Bootstrap
badge) - previously unstyled, so it rendered as plain inline text with no visual weight at
all, the opposite of "basket should be clearly visible". */
.ab-cart-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--ab-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: top;
}

/* Header - white background, light professional border, no brand colour on the frame
itself (green now lives on the category bar's separator line instead, see
.ab-category-icons-fixed). Sign In/Logout were Bootstrap's plain .btn-dark/.btn-outline-dark
(literal black), not part of the brand system at all. */
header{
  border-bottom-color: var(--ab-border) !important;
}
header .btn-dark{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  color: #fff !important;
}
header .btn-dark:hover{
  background-color: var(--ab-green-dark) !important;
  border-color: var(--ab-green-dark) !important;
}
header .btn-outline-dark{
  background-color: #fff !important;
  border-color: var(--ab-green) !important;
  color: var(--ab-green) !important;
}
header .btn-outline-dark:hover{
  background-color: var(--ab-green-light) !important;
  color: var(--ab-green-dark) !important;
}
/* Header search - premium plain input, green search icon, green focus ring (focus ring
already covered by the site-wide .form-control:focus rule above). */
header form .form-control{
  border-color: var(--ab-border);
  border-radius: 8px 0 0 8px;
}
header form button[type="submit"]{
  border-color: var(--ab-border) !important;
  color: var(--ab-green);
}

/* Breadcrumb - smaller and cleaner, muted grey for the trail, green only on the real links
(already covered by the site-wide `a{color:var(--ab-green)}` rule). */
.breadcrumb{
  font-size: 0.82rem;
}
.breadcrumb-item.active{
  color: var(--ab-muted);
}
.breadcrumb-item + .breadcrumb-item::before{
  color: var(--ab-muted);
}

/* ---- Category filter bar (shop.php) ---- */
.category-filter-bar{
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(20,81,44,0.06);
  border-bottom: none !important;
}
.category-filter-btn{
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}
.category-filter-btn.btn-primary{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  box-shadow: 0 2px 6px rgba(20,83,45,0.35);
}
.category-filter-btn.btn-outline-primary{
  color: var(--ab-green) !important;
  border-color: var(--ab-border) !important;
}
.category-filter-btn.btn-outline-primary:hover{
  background-color: var(--ab-green-light) !important;
  border-color: var(--ab-green) !important;
}
.category-filter-bar .d-none.d-md-flex{
  overflow-x: auto;
  padding-bottom: 2px;
}

/* Category section header - the per-category divider card */
.category-section .card.bg-light.border-0{
  background: var(--ab-green-light) !important;
  border: 1px solid var(--ab-border) !important;
  border-left: 3px solid var(--ab-green) !important;
  border-radius: 10px !important;
  scroll-margin-top: 90px;
}
.category-section .card.bg-light.border-0 .card-body{
  padding: 0.85rem 1.25rem !important;
}
.category-section .card.bg-light.border-0 h5{
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ab-green-dark);
  text-transform: uppercase;
  font-size: 0.95rem;
}
.category-section .card.bg-light.border-0 h5 .text-primary{
  color: var(--ab-green-dark) !important;
}

/* Mobile collapsible category accordion (see shop-sidebar.php) */
.ab-cat-toggle{
  cursor: pointer;
  user-select: none;
}
.ab-cat-toggle::after{
  content: '\25BC';
  float: right;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.category-section.ab-cat-collapsed .ab-cat-toggle::after{
  transform: rotate(-90deg);
}
.category-section.ab-cat-collapsed .row.g-4{
  display: none;
}

/* Product cards - plain white/bordered per the brand spec (green belongs on category
headers, active states and buttons, not stamped on all 180 product cards - that pushes
green past its intended 5-10% share of the page). Price stays charcoal, matching "normal
price" in the spec; only an actual promotional price should switch to green/red, and
there's no promo-vs-normal distinction in this data yet (every price here is the customer's
one real price) - kept the size bump since a bigger number is still more legible regardless
of colour, and this is the field a customer scans for first on every card. */
.card-product{
  border: 1px solid var(--ab-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.card-product .fw-bold.text-success{
  color: var(--ab-ink) !important;
  font-size: 1.08rem;
}
.card-product:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20,40,30,0.12);
  border-color: #cfe3d7 !important;
}
.card-product.bg-lightx{
  border-color: var(--ab-green) !important;
  background: var(--ab-green-light) !important;
}
.card-product img{
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fafcfb;
  border-radius: 10px;
  padding: 6px;
}
.card-product h2.fs-6{
  min-height: 2.6em;
  line-height: 1.3;
  font-weight: 600;
}
.card-product .badge.bg-primary{
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.68rem;
  padding: 5px 10px;
}
.card-product .input-spinner .btn{
  border-radius: 8px !important;
}
.card-product .input-spinner .btn-primary{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  font-weight: 600;
}
.card-product .quantity-field{
  text-align: center;
  font-weight: 600;
}

/* Most customers browse on a phone, where the default card size meant only 4-5 products
   fit on screen at once - this tightens padding/image height/gaps specifically on mobile
   so noticeably more products are visible without scrolling, while leaving the desktop
   layout (which had more room to spare) alone. */
@media (max-width: 767px){
  .card-product .card-body{
    padding: 0.6rem !important;
  }
  .card-product img{
    aspect-ratio: auto;
    max-height: 90px;
    padding: 2px;
  }
  .card-product h2.fs-6{
    min-height: 0;
    font-size: 0.8rem;
    margin-bottom: 0.15rem !important;
  }
  .card-product .fw-bold.text-success{
    font-size: 0.95rem;
    margin-bottom: 0.35rem !important;
  }
  .card-product .input-spinner{
    height: 30px;
  }
  .card-product .input-spinner .btn{
    padding: 0.1rem 0.4rem !important;
    font-size: 0.75rem;
  }
  .card-product .quantity-field{
    font-size: 0.8rem;
    padding: 0.1rem !important;
  }
  .card-product .btn-sm{
    padding: 0.2rem 0.4rem !important;
    font-size: 0.72rem !important;
  }
  .row.g-4.row-cols-lg-5.row-cols-2{
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.6rem;
  }
  .category-section .card.bg-light.border-0 .card-body{
    padding: 0.5rem 0.85rem !important;
  }
  .category-section .card.bg-light.border-0 h5{
    font-size: 0.8rem;
  }
}

/* ---- Shared shop sidebar (shop-sidebar.php), consistent across every page it's on ----
   Sticky so switching category/panel never requires scrolling back up to reach it. */
.ab-sidebar-card{
  background: #ffffff;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
@media (max-width: 767px){
  .ab-sidebar-card{
    /* CSS sticky needs room inside its own parent column to "float" in, and Bootstrap
       doesn't stretch that column to the page's height once columns stack on a phone -
       there's nowhere for it to stick to, so it would just scroll away as normal instead.
       A dedicated fixed mobile bar (below) covers the same need instead. */
    position: static;
    max-height: none;
  }
}

/* ---- Mobile-only sticky quick bar: category access + search, always reachable while
   scrolling the product list, without pinning the whole (much taller) sidebar card. ---- */
.ab-mobile-quickbar{
  display: none;
}
.ab-mobile-quickbar-spacer{
  display: none;
}
@media (max-width: 767px){
  /* position:sticky needs room inside its own parent's box to float within, which the
     stacked mobile column doesn't have (see .ab-sidebar-card note above) - position:fixed
     pins this to the viewport itself instead, sidestepping that entirely. The spacer
     below reserves the same height so fixing it doesn't cover the content underneath. */
  .ab-mobile-quickbar{
    display: flex;
    gap: 8px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #ffffff;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ab-border);
    box-shadow: 0 2px 8px rgba(20,40,30,0.06);
    /* Safety net for narrower phones (320px class) - scrolls instead of clipping a
    button off the edge invisibly if the bar's contents ever don't quite fit. */
    overflow-x: auto;
  }
  .ab-mobile-quickbar-catbtn{ flex-shrink: 0; }
  .ab-mobile-quickbar-logo{ flex-shrink: 0; }
  .ab-mobile-quickbar-spacer{
    display: block;
    height: 52px;
  }
  /* The fixed bar below sits over the page's own header/logo, so this bar needs
  its own small logo - otherwise the real one is always hidden underneath it. */
  .ab-mobile-quickbar-logo{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
  .ab-mobile-quickbar-logo img{
    height: 32px;
    width: auto;
  }
  .ab-mobile-quickbar form{
    /* min-width:0 (the flexbox default for flex:1) let this shrink all the way down to a
       near-invisible sliver whenever the fixed-width buttons alongside it (Categories,
       + New, the heart icon) didn't leave much room - the bar already scrolls
       horizontally (see overflow-x above) for exactly this case, so give the search box
       a floor instead of letting it lose the squeeze every time. */
    flex: 1 0 110px;
    display: flex;
    min-width: 110px;
  }
  .ab-mobile-quickbar input[type="search"]{
    flex: 1;
    border: 1px solid var(--ab-border);
    border-radius: 8px 0 0 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
    min-width: 60px;
  }
  .ab-mobile-quickbar button[type="submit"]{
    border: 1px solid var(--ab-green);
    background: var(--ab-green);
    color: #fff;
    border-radius: 0 8px 8px 0;
    padding: 0 10px;
  }
  .ab-mobile-quickbar-catbtn{
    border: 1px solid var(--ab-green);
    background: #fff;
    color: var(--ab-green);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  .ab-mobile-quickbar-heart{
    padding: 6px 9px;
    font-size: 1rem;
    line-height: 1;
  }
  /* Overlays right below the fixed bar regardless of scroll position - without this it
     just opens inline wherever it sits in the page (scrolled out of view already). */
  .ab-mobile-quickcat-panel{
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 1029;
    background: #ffffff;
    max-height: 65vh;
    overflow-y: auto;
    box-shadow: 0 6px 14px rgba(20,40,30,0.15);
    border-bottom: 1px solid var(--ab-border);
  }
  .ab-mobile-quickcat-item{
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ab-border);
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--ab-ink);
    text-decoration: none;
  }
  .ab-mobile-quickcat-item:active{
    background: var(--ab-green-light);
  }
  /* Live search results dropdown (mobile-quickbar.php) - overlays right below the fixed
     bar so results appear instantly while typing instead of waiting on a full page
     navigation to search-product.php. */
  .ab-quickbar-search-results{
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #ffffff;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 6px 14px rgba(20,40,30,0.15);
    border-bottom: 1px solid var(--ab-border);
    padding: 10px;
  }
}
/* ---- Quick-filter chip row (mobile-quickbar.php) - the categories this customer orders
from most, one tap each. Shown on every mobile page, right below the fixed quick bar. ---- */
.ab-quickfilter-strip{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px 10px;
}
.ab-quickfilter-chip{
  flex: 0 0 auto;
  background: var(--ab-green-light);
  color: var(--ab-green-dark);
  border: 1px solid var(--ab-green-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ab-quickfilter-chip:active{
  background: var(--ab-green);
  color: #fff;
}
@media (min-width: 768px){
  .ab-quickfilter-strip{ display: none; }
}
.ab-sidebar-heading{
  color: var(--ab-green-dark);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}
.ab-sidebar-heading .ab-sidebar-name{
  color: var(--ab-green);
}
.ab-sidebar-card .btn-outline-secondary{
  border-color: var(--ab-border);
  color: var(--ab-ink);
  font-weight: 600;
}
.ab-sidebar-card .btn-outline-secondary:hover{
  background-color: var(--ab-green-light);
  border-color: var(--ab-green);
  color: var(--ab-green-dark);
}
.ab-sidebar-card .list-group-item-action{
  border-color: var(--ab-border);
  color: var(--ab-ink);
  font-weight: 500;
}
.ab-sidebar-card .list-group-item-action:hover{
  background-color: var(--ab-green-light);
  color: var(--ab-green-dark);
}
.ab-sidebar-card .list-group-item-action.category-filter-btn.btn-primary,
.ab-sidebar-card .list-group-item-action.active{
  background-color: var(--ab-green) !important;
  border-color: var(--ab-green) !important;
  color: #fff !important;
}
.ab-sidebar-browse-more{
  border-top: 2px dashed var(--ab-border);
  margin-top: 1.1rem;
  padding-top: 1rem;
}
.ab-sidebar-browse-more .ab-sidebar-label{
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ab-green-accent);
  margin-bottom: 0.5rem;
}

/* Browse More Products results: grid by default (a wall of plain text rows was hard to
scan), with a list-mode override toggled on the stable outer wrapper - the inner grid
itself gets replaced wholesale on every search/category fetch, so the view-mode choice
has to live one level up to survive that. */
.browse-results-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.browse-result-card{
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.browse-result-thumb{
  width: 100%;
  aspect-ratio: 1.4 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ab-green-light);
  color: var(--ab-green-accent);
  border-radius: 6px;
  margin-bottom: 8px;
}
.browse-result-name{
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 2px;
}
.browse-result-status{
  font-size: 0.7rem;
  color: var(--ab-muted);
  margin-bottom: 8px;
}
.browse-result-actions{
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.browse-result-note{
  margin-top: 6px;
}

/* List mode: put in on the outer wrapper (#newProductsResultsRight or the sidebar's
own box) to flatten the grid back into simple stacked rows. */
.browse-list-mode .browse-results-grid{
  display: block;
}
.browse-list-mode .browse-result-card{
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-top: none;
  margin-bottom: -1px;
}
.browse-list-mode .browse-result-thumb{
  display: none;
}
.browse-list-mode .browse-result-name,
.browse-list-mode .browse-result-status{
  margin-bottom: 0;
}
.browse-list-mode .browse-result-actions{
  margin-top: 0;
}

.browse-view-toggle{
  display: inline-flex;
  border: 1px solid var(--ab-border);
  border-radius: 6px;
  overflow: hidden;
}
.browse-view-toggle button{
  border: 0;
  background: #fff;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--ab-muted);
  cursor: pointer;
}
.browse-view-toggle button.active{
  background: var(--ab-green-light);
  color: var(--ab-green-accent);
  font-weight: 600;
}

/* Bootstrap's own .container caps at 1320px from 1400px up, so on a genuinely wide monitor
   (1600px+) the shop page sat in a narrow centered strip with large dead margins either side -
   this is what was being seen as "the page is too big"/empty on the right. Widening the
   container on very wide viewports lets the existing percentage-based product grid columns
   (row-cols-lg-N) grow into that space automatically - bigger cards, not more empty margin -
   without touching the grid logic itself. */
@media (min-width: 1600px){
  .container{
    max-width: 1560px;
  }
}
@media (min-width: 1900px){
  .container{
    max-width: 1800px;
  }
}

/* shop.php's "you're not a customer yet" pitch (shown when $customerid is empty) - was
raw <br> spacing with no wrapping container, so it ran edge-to-edge with zero side padding
on mobile, the one place that mattered most since it's the first screen a phone visitor
hits before signing up. */
.ab-shop-intro{
  padding: 28px 0 48px;
}
.ab-shop-intro-card{
  background: var(--ab-off-white);
  border: 1px solid var(--ab-border);
  border-radius: 16px;
  padding: 28px 18px;
}
.ab-shop-intro-title{
  text-align: center;
  color: var(--ab-ink);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 6px;
}
.ab-shop-intro-sub{
  text-align: center;
  color: var(--ab-muted);
  margin: 0 0 28px;
}
.ab-shop-intro-steps{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.ab-shop-intro-step{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ab-shop-intro-num{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ab-green);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-shop-intro-step h4{
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--ab-ink);
}
.ab-shop-intro-step p{
  margin: 0;
  color: var(--ab-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ab-shop-intro-closing{
  color: var(--ab-muted);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 20px;
}
.ab-shop-intro-cta-line{
  font-weight: 600;
  color: var(--ab-ink);
  margin: 0 0 12px;
}
@media (min-width: 768px){
  .ab-shop-intro-card{
    padding: 40px;
  }
  .ab-shop-intro-title{
    font-size: 1.7rem;
  }
}