/*
Theme Name: Mahomed Mussa Wholesalers
Theme URI: https://mahomedmussawholesalers.co.zw
Author: Mahomed Mussa Wholesalers
Description: Standalone WooCommerce theme for Mahomed Mussa Wholesalers. Modern e-commerce homepage (top bar, search header, category browser, hero slider, promo banners, feature bar) in the brand's dark-green / orange / white palette. No parent theme required.
Version: 1.1.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mahomed-mussa
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready, two-columns, right-sidebar
*/

/* =====================================================================
   BRAND TOKENS  —  change these first
   ===================================================================== */
:root{
  --mm-green:      #0F5A38;   /* brand dark green (from logo) — dark bars   */
  --mm-green-dark: #0B4429;   /* deeper green — gradients / hover           */
  --mm-green-2:    #157A46;   /* lighter green — small accents              */
  --mm-orange:     #F2930E;   /* brand orange — primary buttons / accents   */
  --mm-orange-dark:#D97E06;   /* orange hover                               */
  --mm-ground:     #F4F4F4;   /* page background                            */
  --mm-card:       #FFFFFF;   /* cards / header / nav                        */
  --mm-ink:        #1C2A20;   /* body text                                  */
  --mm-mute:       #6A7770;   /* secondary text                             */
  --mm-line:       #E5E8E3;   /* borders                                     */
  --mm-radius:     14px;
}

/* =====================================================================
   RESET-ISH / BASE
   ===================================================================== */
*{box-sizing:border-box}
body{
  margin:0;background:var(--mm-ground);color:var(--mm-ink);
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--mm-green);text-decoration:none}
a:hover{color:var(--mm-orange)}
h1,h2,h3,h4,.mm-logo__text,.mm-btn,.mm-catbtn{font-family:"Poppins","Segoe UI",Arial,sans-serif}
h2{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.mm-container{max-width:1240px;margin:0 auto;padding:0 20px}
.mm-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-weight:700;font-size:.95rem;padding:12px 20px;border-radius:10px;line-height:1;transition:background .15s ease,color .15s ease}
.mm-btn--orange{background:var(--mm-orange);color:#fff}
.mm-btn--orange:hover{background:var(--mm-orange-dark);color:#fff}
.mm-btn--green{background:var(--mm-green);color:#fff}
.mm-btn--green:hover{background:var(--mm-green-dark);color:#fff}
.mm-btn--ghost{background:#fff;color:var(--mm-ink);border:1px solid var(--mm-line)}

/* =====================================================================
   1. TOP BAR (dark green)
   ===================================================================== */
.mm-topbar{background:var(--mm-green);color:#eaf3ee;font-size:.85rem}
.mm-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;flex-wrap:wrap}
.mm-topbar__promo{font-weight:600;color:#fff}
.mm-topbar__right{display:flex;align-items:center;gap:18px}
.mm-topbar a{color:#eaf3ee}
.mm-topbar a:hover{color:var(--mm-orange)}
.mm-topbar__sep{opacity:.4}

/* =====================================================================
   2. MAIN HEADER (white): logo | search | call | WhatsApp
   ===================================================================== */
.mm-header{background:var(--mm-card);border-bottom:1px solid var(--mm-line)}
.mm-header__inner{display:flex;align-items:center;gap:22px;padding:16px 20px}
.mm-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;max-width:240px}
.mm-logo a,.mm-logo .custom-logo-link{display:flex;align-items:center}
.mm-logo img,.mm-logo .custom-logo{max-height:64px !important;width:auto !important;height:auto !important}
.mm-logo__text{font-weight:800;font-size:1.15rem;color:var(--mm-green);line-height:1.05}
.mm-logo__text b{color:var(--mm-orange)}

.mm-search{flex:1;display:flex;align-items:stretch;max-width:640px;border:2px solid var(--mm-green);
  border-radius:12px;overflow:hidden;background:#fff}
.mm-search__cat{border:0;background:#f3f6f3;padding:0 14px;font-size:.9rem;color:var(--mm-ink);
  border-right:1px solid var(--mm-line);max-width:170px;cursor:pointer}
.mm-search input[type="search"]{flex:1;border:0;padding:11px 14px;font-size:.95rem;outline:none;min-width:60px}
.mm-search button{border:0;background:var(--mm-orange);color:#fff;padding:0 18px;cursor:pointer;font-size:1rem}
.mm-search button:hover{background:var(--mm-orange-dark)}

.mm-header__call{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mm-header__call .mm-ring{width:40px;height:40px;border-radius:50%;background:#f0f5f1;color:var(--mm-green);
  display:flex;align-items:center;justify-content:center}
.mm-header__call small{display:block;color:var(--mm-mute);font-size:.72rem;line-height:1}
.mm-header__call strong{font-family:"Poppins",sans-serif;font-size:.95rem;color:var(--mm-ink)}

/* =====================================================================
   3. NAV BAR (white pill): Browse Categories | menu | icons
   ===================================================================== */
.mm-nav{background:var(--mm-card);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(15,90,56,.06)}
.mm-nav__inner{display:flex;align-items:center;gap:18px;padding:8px 20px}
.mm-catwrap{position:relative}
.mm-catbtn{display:inline-flex;align-items:center;gap:10px;background:var(--mm-orange);color:#fff;border:0;
  padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;font-size:.95rem;white-space:nowrap}
.mm-catbtn:hover{background:var(--mm-orange-dark)}
.mm-catdrop{position:absolute;top:calc(100% + 8px);left:0;z-index:120;width:280px;max-height:70vh;overflow:auto;
  background:#fff;border:1px solid var(--mm-line);border-radius:12px;box-shadow:0 18px 44px rgba(15,90,56,.18);padding:8px;display:none}
.mm-catdrop.is-open{display:block}
.mm-catdrop ul{list-style:none;margin:0;padding:0}
.mm-catdrop li a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:var(--mm-ink);font-weight:600;font-size:.95rem}
.mm-catdrop li a:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mm-green-2);flex-shrink:0}
.mm-catdrop li a:hover{background:#f2f8f4;color:var(--mm-green)}
.mm-menu{flex:1}
.mm-menu ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.mm-menu a{display:block;padding:10px 14px;font-family:"Poppins",sans-serif;font-weight:600;color:var(--mm-ink);border-radius:8px}
.mm-menu a:hover,
.mm-menu .current-menu-item>a,
.mm-menu .current_page_item>a,
.mm-menu .current-menu-ancestor>a,
.mm-menu .current-product_cat-ancestor>a{color:var(--mm-orange);background:#fff7ec}
.mm-nav__icons{display:flex;align-items:center;gap:8px}
.mm-icn{position:relative;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--mm-green);background:#f2f6f3}
.mm-icn:hover{background:var(--mm-green);color:#fff}
.mm-icn .mm-count{position:absolute;top:-6px;right:-6px;background:var(--mm-orange);color:#fff;font-size:.68rem;
  font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* =====================================================================
   4. HERO ROW: category sidebar | slider | promo banners
   ===================================================================== */
.mm-hero{display:grid;grid-template-columns:250px 1fr 300px;gap:20px;padding-top:22px;padding-bottom:6px;align-items:stretch}
.mm-cats{background:#fff;border:1px solid var(--mm-line);border-radius:var(--mm-radius);padding:8px;align-self:start}
.mm-cats > .mm-cats__head{display:none}
.mm-cats ul{list-style:none;margin:0;padding:0}
.mm-cats li a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:var(--mm-ink);font-weight:600;font-size:.95rem}
.mm-cats li a:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mm-green-2);flex-shrink:0}
.mm-cats li a:hover{background:#f2f8f4;color:var(--mm-green)}

.mm-slider{position:relative;border-radius:var(--mm-radius);overflow:hidden;min-height:360px;background:var(--mm-green)}
.mm-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:48px;opacity:0;
  transition:opacity .6s ease;color:#fff}
.mm-slide.is-active{opacity:1;position:relative}
.mm-slide--a{background:linear-gradient(120deg,var(--mm-green-dark),var(--mm-green) 65%,var(--mm-green-2))}
.mm-slide--b{background:linear-gradient(120deg,#123f27,#1a6b3f)}
.mm-slide--c{background:linear-gradient(120deg,#0d3d25,#146b3e)}
.mm-slide__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"Poppins",sans-serif;font-weight:700;
  color:var(--mm-orange);letter-spacing:.03em;text-transform:uppercase;font-size:.85rem;margin-bottom:14px}
.mm-slide h2{font-size:2.6rem;line-height:1.05;margin:0 0 12px;max-width:15ch;text-wrap:balance;color:#fff}
.mm-slide p{margin:0 0 22px;max-width:34ch;color:#dbe9e1}
.mm-slider__dots{position:absolute;bottom:16px;left:48px;display:flex;gap:8px}
.mm-slider__dots button{width:22px;height:6px;border-radius:3px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.mm-slider__dots button.is-active{background:var(--mm-orange)}

.mm-promos{display:flex;flex-direction:column;gap:20px}
.mm-promo{flex:1;border-radius:var(--mm-radius);padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;position:relative;overflow:hidden}
.mm-promo--green{background:linear-gradient(160deg,#157A46,#0B4429)}
.mm-promo--dark{background:linear-gradient(160deg,#123f27,#0a3420)}
.mm-promo__tag{position:absolute;top:16px;left:16px;background:var(--mm-orange);color:#fff;font-family:"Poppins",sans-serif;
  font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:6px}
.mm-promo h3{margin:0 0 8px;font-size:1.35rem;line-height:1.1}
.mm-promo a{color:#fff;font-weight:700;font-family:"Poppins",sans-serif;font-size:.9rem;display:inline-flex;gap:6px;align-items:center}
.mm-promo a:hover{color:var(--mm-orange)}

/* =====================================================================
   5. FEATURE BAR (dark green)
   ===================================================================== */
.mm-features{background:var(--mm-green);margin-top:24px}
.mm-features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 20px}
.mm-feature{display:flex;align-items:center;gap:14px;color:#fff}
.mm-feature .mm-fic{width:46px;height:46px;flex-shrink:0;color:var(--mm-orange)}
.mm-feature strong{display:block;font-family:"Poppins",sans-serif;font-size:1rem}
.mm-feature small{color:#c7ddd0;font-size:.82rem}

/* =====================================================================
   6. SECTIONS / PRODUCT GRID
   ===================================================================== */
.mm-section{padding:34px 0}
.mm-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.mm-section__head h2{position:relative;padding-left:14px}
.mm-section__head h2:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:3px;background:var(--mm-orange)}
.mm-cattiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mm-cattile{background:#fff;border:1px solid var(--mm-line);border-radius:var(--mm-radius);padding:22px;text-align:center;font-family:"Poppins",sans-serif;font-weight:700;color:var(--mm-ink);transition:transform .15s ease,box-shadow .15s ease}
.mm-cattile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,90,56,.12);color:var(--mm-green)}
.mm-cattile .mm-cattile__ic{width:54px;height:54px;margin:0 auto 12px;border-radius:12px;background:#f0f7f2;color:var(--mm-green);display:flex;align-items:center;justify-content:center}

/* WooCommerce loop styling */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 !important;padding:0 !important;list-style:none}
/* WooCommerce adds a clearfix ::before/::after to ul.products. As a grid
   container, those pseudo-elements steal grid cells and knock the tiles out
   of line (first row indented, last tile wrapping). Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none !important;display:none !important}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category{width:auto !important;margin:0 !important;float:none !important;background:#fff;
  border:1px solid var(--mm-line);border-radius:var(--mm-radius);padding:14px;text-align:left;transition:box-shadow .15s ease,transform .15s ease}
.woocommerce ul.products li.product-category a{color:var(--mm-ink);font-family:"Poppins",sans-serif;font-weight:700}
.woocommerce ul.products li.product-category mark,
.woocommerce ul.products li.product-category .count{background:transparent;color:var(--mm-green-2);font-weight:700}
.woocommerce ul.products li.product:hover{box-shadow:0 10px 26px rgba(15,90,56,.12);transform:translateY(-3px)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Poppins",sans-serif;font-weight:600;font-size:1rem;padding:8px 0 4px}
.woocommerce ul.products li.product .price{color:var(--mm-green-dark);font-weight:800;font-family:"Poppins",sans-serif}
.woocommerce span.onsale{background:var(--mm-orange);color:#fff}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--mm-orange);color:#fff;border-radius:9px;font-family:"Poppins",sans-serif;font-weight:700}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover{background:var(--mm-orange-dark);color:#fff}
.woocommerce .woocommerce-message,.woocommerce-info{border-top-color:var(--mm-green)}
.mm-shop{padding:26px 0}

/* Shop "view by department" filter bar */
.mm-shopfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.mm-shopfilter a{padding:9px 16px;border-radius:30px;background:#fff;border:1px solid var(--mm-line);
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.9rem;color:var(--mm-ink);line-height:1}
.mm-shopfilter a:hover{border-color:var(--mm-green);color:var(--mm-green)}
.mm-shopfilter a.is-active{background:var(--mm-green);color:#fff;border-color:var(--mm-green)}

/* WhatsApp order button (cart page) */
.mm-wa-order{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;
  background:#1FA855;color:#fff;border-radius:10px;font-family:"Poppins",sans-serif;font-weight:700;
  font-size:1rem;padding:14px 18px;text-align:center;line-height:1.2;transition:background .15s ease}
.mm-wa-order:hover{background:#17853F;color:#fff}
.mm-wa-order svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.mm-wa-order__note{margin:8px 2px 0;font-size:.8rem;color:var(--mm-mute);text-align:center;line-height:1.4}
.mm-wa-order-wrap{max-width:520px;margin:22px auto 0}
/* WhatsApp-only ordering: hide the standard "Proceed to Checkout" button
   (classic + block cart). Remove these lines to bring it back once Paynow
   online payment is enabled. */
.wc-proceed-to-checkout a.checkout-button,
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit-button{display:none !important}

/* =====================================================================
   7. FOOTER (dark green)
   ===================================================================== */
.mm-footer{background:var(--mm-green);color:#dcece3;margin-top:30px}
.mm-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px;padding:40px 20px 24px}
.mm-footer h4{font-family:"Poppins",sans-serif;color:#fff;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.mm-footer h4 span{color:var(--mm-orange)}
.mm-footer p{margin:.3em 0;font-size:.9rem;line-height:1.5}
.mm-footer p strong{color:#fff;font-family:"Poppins",sans-serif;font-size:.86rem;letter-spacing:.02em}
.mm-footer p.mm-branch-gap{margin-top:12px}
.mm-footer a{color:#dcece3}
.mm-footer a:hover{color:var(--mm-orange)}
.mm-footer__brand img{max-height:96px;background:transparent;padding:0;border-radius:0}
.mm-footer__credit{border-top:1px solid rgba(255,255,255,.15);padding:16px 20px;font-size:.82rem;color:#bcd4c7;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */
.mm-catbtn__x{display:none}

/* ---------- Tablet: drop the hero side column ---------- */
@media (max-width:1080px){
  .mm-hero{grid-template-columns:1fr 280px}
  .mm-cats{display:none}
  .mm-slider{min-height:320px}
}

/* ---------- Tablet / large phone (<=900) ---------- */
@media (max-width:900px){
  /* Header: logo + WhatsApp on the top row, search full-width below */
  .mm-header__inner{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .mm-logo{order:1}
  .mm-header__cta{order:2;margin-left:auto}
  .mm-header__call{display:none}
  .mm-search{order:3;flex-basis:100%;max-width:100%}

  /* Nav: full-width Browse button + icons, menu on its own scroll row */
  .mm-nav__inner{flex-wrap:wrap;gap:10px;padding:8px 16px}
  .mm-catwrap{order:1;flex:1 1 auto}
  .mm-catbtn{width:100%;justify-content:center}
  .mm-nav__icons{order:2}
  .mm-menu{order:3;flex-basis:100%}
  .mm-menu ul{flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .mm-menu a{white-space:nowrap}

  /* Layout */
  .mm-hero{grid-template-columns:1fr;gap:14px}
  .mm-promos{flex-direction:row}
  .mm-features__grid{grid-template-columns:1fr 1fr}
  .woocommerce ul.products,.mm-cattiles{grid-template-columns:1fr 1fr !important}
  .mm-footer__grid{grid-template-columns:1fr 1fr}
}

/* ---------- Phone (<=600) ---------- */
@media (max-width:600px){
  html,body{overflow-x:hidden}
  .mm-container{padding:0 14px}

  /* Top bar centered, drop the extras */
  .mm-topbar{font-size:.78rem}
  .mm-topbar__inner{justify-content:center;text-align:center;gap:8px}
  .mm-topbar__right .mm-hide-sm{display:none}

  /* Header: big CENTERED logo, then search, then full-width WhatsApp button */
  .mm-logo{order:1;flex-basis:100%;max-width:100%;justify-content:center;margin:0 auto}
  .mm-logo img,.mm-logo .custom-logo{max-height:150px !important}
  .mm-search__cat{display:none}
  .mm-header__cta{order:4;flex-basis:100%;justify-content:center;margin-left:0}

  /* Nav: hide the Browse Categories bar on phone; keep menu + icons; not sticky */
  .mm-nav{position:static}
  .mm-catwrap{display:none}
  .mm-menu{order:1;flex:1 1 auto;flex-basis:auto}
  .mm-nav__icons{order:2}

  /* Hero */
  .mm-slider{min-height:230px}
  .mm-slide{padding:24px 20px}
  .mm-slide__eyebrow{font-size:.75rem;margin-bottom:10px}
  .mm-slide h2{font-size:1.5rem}
  .mm-slide p{font-size:.92rem;margin-bottom:16px}
  .mm-slider__dots{left:20px;bottom:12px}
  .mm-promos{flex-direction:column}

  /* Sections */
  .mm-features__grid{grid-template-columns:1fr 1fr;gap:12px;padding:18px 16px}
  .mm-feature .mm-fic{width:38px;height:38px}
  .mm-section{padding:26px 0}
  .mm-section__head h2{font-size:1.25rem}
  .woocommerce ul.products,.mm-cattiles{grid-template-columns:1fr 1fr !important;gap:12px}

  /* Footer single column, centered credit */
  .mm-footer__grid{grid-template-columns:1fr;gap:22px}
  .mm-footer__credit{flex-direction:column;gap:4px;text-align:center;justify-content:center}
}

/* ---------- Very small (<=380) ---------- */
@media (max-width:380px){
  .mm-features__grid{grid-template-columns:1fr}
  .mm-slide h2{font-size:1.35rem}
}

/* accessibility */
.mm-btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mm-orange);outline-offset:2px}
.screen-reader-text{position:absolute !important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}