/*
Latest fixes — kept in its own file, separate from style.css/site-extra.css/
shop-pages.css, since style.css has been manually edited directly.
Loads last so these overrides win the cascade without needing !important
everywhere. Reuses the CSS variables already declared in style.css's :root.
*/

/* =========================================================
   1. MINI-CART — WhatsApp button full-width, below View Cart/Checkout
   (the buttons were sharing one flex row before; the WhatsApp button
   now fires from a hook that sits outside that row — this just makes
   sure it reads as a clean, separate full-width row.)
   ========================================================= */
.mini-cart-body .woocommerce-mini-cart__buttons{
  display:flex;gap:10px;
}
.mini-cart-body .whatsapp-order-btn--mini{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:10px;
}

/* =========================================================
   2. BRAND STRIP — static square grid (no marquee), 3-up on mobile
   ========================================================= */
.brand-marquee{
  overflow:visible;
}
.brand-marquee-track{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:100%!important;
  animation:none!important;
}
@media (min-width:640px){
  .brand-marquee-track{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  .brand-marquee-track{grid-template-columns:repeat(3,1fr);}
}
.brand-marquee-item{
  white-space:normal!important;
  flex-direction:column;
  gap:8px;
  aspect-ratio:1/1;
  justify-content:center;
  border:1px solid var(--card-border,#e6e9f0);
  border-radius:var(--radius,14px);
  background:var(--card-bg,#fff);
  padding:12px;
}
.brand-marquee-item::before{display:none;}
.brand-marquee-logo img,
.brand-marquee-item img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0 auto;
}
.brand-marquee-item:not(.brand-marquee-logo){
  font-size:11.5px;text-align:center;
}

/* =========================================================
   3. PRODUCT IMAGES — show full image, never crop
   (was object-fit:cover, which cuts off non-square product photos)
   ========================================================= */
.product-thumb{
  background:var(--page-bg-alt,#f4f6fa);
}
.product-thumb img{
  object-fit:contain!important;
  padding:8px;
}

/* =========================================================
   4. CATEGORY GRID — fixed at 4 columns on desktop, mobile untouched
   ========================================================= */
@media (min-width:768px){
  .cat-scroller{grid-template-columns:repeat(4,1fr)!important;}
}