/* =========================================================
   Pro UI — CLEAN WHITE + FULLY RESPONSIVE (from scratch)
   Works with your existing base.html markup.
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --nav-h: 80px;                  /* header height (mobile tuned below) */
  --zk-bg:#fff; --zk-card:#fff; --zk-elev:#fff;
  --zk-text:#0f172a; --zk-sub:#6b7280;
  --zk-accent:#dc3545; --zk-accent-700:#b02a37;
  --zk-ring:rgba(220,53,69,.18);
  --zk-br:14px; --zk-shadow:0 10px 24px rgba(17,24,39,.06);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{background:var(--zk-bg); color:var(--zk-text); padding-top:var(--nav-h)}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto; display:block}
.container,.container-fluid,.container-lg,.container-xl{max-width:1200px}

/* ---------- Header / Navbar (always white) ---------- */
#header{
  background:#fff !important; border-bottom:1px solid #e5e7eb;
  box-shadow:0 4px 10px rgba(17,24,39,.04);
  min-height:var(--nav-h); display:flex; align-items:center; z-index:2000;
}
#header.header-scrolled{
  background:#fff !important; border-bottom:1px solid #e5e7eb !important;
  box-shadow:0 4px 10px rgba(17,24,39,.06) !important;
}
#navbar ul{gap:10px}
#navbar a.nav-link, #navbar > ul > li > a span{font-weight:600; color:var(--zk-text)}
/* remove decorative underline in your template theme */
#navbar > ul > li > a::after{content:none !important; display:none !important}

/* Brand word-mark (if you use it) */
.brand-mark{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase; line-height:1;
}
.brand-mark .brand-ac,.brand-mark .brand-wear{color:#0f172a}
.brand-mark .brand-menz{
  background:linear-gradient(90deg,#242a0f 0 55%,var(--zk-accent) 55% 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Cart badge (desktop + mobile) */
.nav-cart-badge{
  display:inline-flex; min-width:22px; height:22px; padding:0 8px;
  align-items:center; justify-content:center;
  border-radius:999px; background:var(--zk-accent); color:#fff;
  font-size:12px; font-weight:800; line-height:1; margin-left:.35rem;
}

/* ---------- Dropdowns / minicart (desktop) ---------- */
#header .dropdown-menu, #navbar .dropdown-menu, .navbar .dropdown-menu,
.dropdown-menu.minicart-dropdown, .minicart-dropdown{
  background:#fff !important; color:var(--zk-text) !important;
  border:1px solid #e5e7eb !important; border-radius:16px !important;
  padding:0 !important; box-shadow:var(--zk-shadow) !important; right:0; left:auto;
}

/* minicart inner (shared) */
.mini{ width:min(380px,92vw); max-height:70vh; overflow:auto; padding:10px; background:#fff; color:var(--zk-text) }
.mini-list{ display:block }
.mini-row{ display:flex; gap:12px; padding:12px 10px; border-bottom:1px solid #f1f5f9 !important }
.mini-thumb{ width:60px; height:60px; flex:0 0 60px; border-radius:10px; overflow:hidden; background:#f3f4f6 }
.mini-thumb img{ width:100%; height:100%; object-fit:cover }
.mini-meta{ flex:1; min-width:0 }
.mini-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111827 }
.mini-attrs{ font-size:.85rem; color:var(--zk-sub); display:flex; gap:10px; margin-top:2px }
.mini-price{ display:flex; gap:8px; align-items:center; margin-top:6px }
.mini-price span{ color:#374151 }
.mini-price strong{ margin-left:auto; color:#111827 }
.mini-footer{ padding-top:8px }
.mini-subtotal{ display:flex; justify-content:space-between; padding:10px 6px; border-top:1px solid #e5e7eb !important; margin-top:4px; font-weight:700; color:#111827 }
.mini-actions{ display:flex; gap:10px }
.mini-empty{ padding:16px 8px; text-align:center; color:var(--zk-sub) }

/* ---------- Cards ---------- */
.card{background:var(--zk-card); border:1px solid #e5e7eb; border-radius:var(--zk-br); box-shadow:var(--zk-shadow)}
.card .card-img-top{border-top-left-radius:var(--zk-br); border-top-right-radius:var(--zk-br); aspect-ratio:1/1; object-fit:cover}
.card .card-title{font-weight:700; color:#111827}
.card .price,.card .product-price{font-weight:800; letter-spacing:.1px; color:#111827}
.card.h-100{display:flex; flex-direction:column}
.card .card-body{display:flex; flex-direction:column}
.card .btn{margin-top:auto}

/* ---------- Buttons, Forms, Tables ---------- */
.btn{border-radius:12px; font-weight:700; border-width:1px}
.btn:focus,.form-control:focus{box-shadow:0 0 0 .2rem var(--zk-ring)}
.btn-danger{background:var(--zk-accent); border-color:var(--zk-accent)}
.btn-danger:hover{background:var(--zk-accent-700); border-color:var(--zk-accent-700)}
.btn-outline-light{border-color:#111; color:#111}
.btn-outline-light:hover{background:#111; color:#fff}
.form-control,.form-select{background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:12px}
.form-control::placeholder{color:#9ca3af}
.table{color:#111827}
.table thead th{color:#374151; border-bottom-color:#e5e7eb}
.table tbody tr{border-color:#f3f4f6}

/* ---------- Responsive helpers ---------- */
.section{padding:50px 0} .shadow-soft{box-shadow:var(--zk-shadow)} .rounded-2xl{border-radius:24px}
@media (max-width:767.98px){
  .stack-table{width:100%; border-collapse:separate; border-spacing:0 12px}
  .stack-table thead{display:none}
  .stack-table tbody tr{display:block; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; box-shadow:var(--zk-shadow)}
  .stack-table tbody td{display:flex; justify-content:space-between; gap:12px; padding:8px 6px !important; border:none !important; width:100%}
  .stack-table tbody td::before{content:attr(data-label); font-weight:600; color:#374151}
}

/* =========================================================
   Mobile drawer (no blur) — alignment, cart row, close X
   ========================================================= */

/* Hamburger visible on white header */
#header .mobile-nav-toggle{
  color:#111 !important; display:block !important;
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  font-size:26px; line-height:1; z-index:2002;
}
@media (min-width:992px){ #header .mobile-nav-toggle{ display:none !important } }

/* Overlay (no blur) */
#drawerOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1500; display:none;
}
body.drawer-open #drawerOverlay{ display:block }
body.drawer-open{ overflow:hidden }

/* Drawer panel */
#navbar.navbar-mobile{
  position:fixed; top:0; right:0; width:88%; max-width:380px; height:100dvh;
  background:#fff; border-left:1px solid #eee;
  box-shadow:-12px 0 30px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform .28s ease; z-index:1600;
  padding:12px 0; overflow-y:auto;
}
body.drawer-open #navbar.navbar-mobile{ transform:translateX(0) }

/* Turn hamburger into a fixed "X" while open */
body.drawer-open #header .mobile-nav-toggle{
  position:fixed !important; top:12px; right:12px; transform:none; z-index:1700;
}

/* Mobile header alignment (brand + toggle baseline) */
@media (max-width:991.98px){
  :root{ --nav-h:60px }
  .brand-mark{ font-size:18px; display:flex; align-items:center; line-height:var(--nav-h) }
}

/* Drawer list look */
#navbar.navbar-mobile > ul{ list-style:none; margin:0; padding:8px 14px 24px }
#navbar.navbar-mobile > ul > li{ margin:0; }
#navbar.navbar-mobile > ul > li + li{ margin-top:2px }
#navbar.navbar-mobile > ul > li > a{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; border-radius:12px; min-height:48px;
  color:#111; font-weight:700; letter-spacing:.2px;
}
#navbar.navbar-mobile > ul > li > a:hover{ background:#f7f7f7 }

/* Dropdown chevron rotates; chevron always pinned right */
#navbar.navbar-mobile .dropdown > a i{ margin-left:auto; transition:transform .2s ease }
#navbar.navbar-mobile .dropdown.dropdown-active > a i{ transform:rotate(-90deg) }

/* Cart row: keep badge next to label (left side) */
#navbar.navbar-mobile .nav-cart-badge{ margin-left:8px; align-self:center }

/* Dropdown lists */
#navbar.navbar-mobile .dropdown ul{
  display:none; margin:6px 0 10px; padding-left:10px; border-left:2px solid #eee;
}
#navbar.navbar-mobile .dropdown ul a{
  display:block; padding:10px 12px; border-radius:10px; color:#333; font-weight:600;
}
#navbar.navbar-mobile .dropdown ul a:hover{ background:#f7f7f7 }

/* Minicart inside drawer — full width & tidy */
#navbar.navbar-mobile .minicart-menu{ margin:8px 0 4px; padding:0 }
#navbar.navbar-mobile .minicart-menu > li{ list-style:none }
#navbar.navbar-mobile .minicart-dropdown{
  width:100%; max-height:45vh; overflow:auto;
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:12px; box-shadow:var(--zk-shadow);
}

/* Remove bullet/stray dot on greeting block */
#navbar.navbar-mobile .drawer-head{ list-style:none; }

/* Mobile-only helpers */
.only-mobile{ display:none }
#navbar.navbar-mobile .only-mobile{ display:block }

/* Desktop safeguard */
@media (min-width:992px){
  #drawerOverlay{ display:none !important }
  body{ overflow:auto !important }
  #navbar.navbar-mobile{
    position:static !important; width:auto !important; height:auto !important;
    transform:none !important; box-shadow:none !important; border-left:0 !important;
    padding:0 !important; overflow:visible !important;
  }
  .only-mobile{ display:none !important }
}
/* ===== Mobile drawer — cart row + minicart compact & aligned ===== */

/* Cart row: label + badge on the left, chevron at far right */
#navbar.navbar-mobile > ul > li > a{ justify-content:flex-start !important; }
#navbar.navbar-mobile > ul > li > a i{ margin-left:auto; align-self:center; }
#navbar.navbar-mobile .nav-cart-badge{ margin-left:8px; align-self:center; }

/* Keep the close X perfectly placed while the drawer is open */
body.drawer-open #header .mobile-nav-toggle{
  position:fixed !important; top:12px; right:12px; transform:none; z-index:2003;
}

/* Compact, tidy mini-cart inside the drawer (no sideways scroll) */
@media (max-width: 991.98px){
  #navbar.navbar-mobile{ overflow-x:hidden; }

  #navbar.navbar-mobile .minicart-menu{
    margin:10px 0 2px; padding:0; list-style:none;
  }
  #navbar.navbar-mobile .minicart-menu > li{ list-style:none; }

  #navbar.navbar-mobile .minicart-dropdown{
    width:100%;
    max-height:45vh;              /* keeps it from getting too tall */
    overflow-y:auto; overflow-x:hidden;
    background:#fff; border:1px solid #eee; border-radius:12px;
    padding:10px; box-shadow:var(--zk-shadow);
  }

  /* Use full width of container; remove inner widget's own sizing */
  #navbar.navbar-mobile .mini{
    width:100% !important; max-height:unset !important; padding:0 !important;
    background:#fff; color:var(--zk-text);
  }

  /* Row & thumbnail tightened */
  #navbar.navbar-mobile .mini-row{
    display:flex; gap:10px; padding:10px 8px;
    border-bottom:1px solid #f1f5f9 !important;
  }
  #navbar.navbar-mobile .mini-thumb{
    width:44px; height:44px; flex:0 0 44px; border-radius:8px; overflow:hidden;
    background:#f3f4f6;
  }

  /* Text scale for small screens */
  /* #navbar.navbar-mobile .mini-name{ font-size:.95rem; }
  #navbar.navbar-mobile .mini-attrs{ font-size:.78rem; color:var(--zk-sub); }
  #navbar.navbar-mobile .mini-price{ gap:6px; } */

  /* Footer / totals / buttons compact */
  #navbar.navbar-mobile .mini-footer{ padding:8px; }
  #navbar.navbar-mobile .mini-subtotal{ padding:10px 8px; font-size:.95rem; }
  #navbar.navbar-mobile .mini-actions{ gap:8px; }
  #navbar.navbar-mobile .mini-actions .btn{
    padding:.5rem .75rem; font-size:.9rem; border-radius:10px;
  }

  /* Remove any stray list bullet from the greeting block */
  #navbar.navbar-mobile .drawer-head{ list-style:none; }
}
/* ===== Hero banner: make the top image truly responsive & full-bleed ===== */

/* Remove any spacing/width constraints from the hero wrapper */
/* #hero{ margin:0 !important; padding:0 !important; }
#hero .hero-container{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
} */

/* If the hero uses an <img>, make it scale cleanly edge-to-edge */
/* #hero img,
#hero picture > img{
  display:block;          
  width:100% !important;  
  height:auto !important; 
} */

/* If the hero is a CSS background (inline style or class), make it cover nicely */
/* #hero[style*="background"],
#hero.hero-bg,
#hero .hero-bg{
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  min-height:clamp(260px, 52vh, 720px); 
} */

/* Optional: prefer a fixed viewport height with tasteful crop on small screens.
   (Uncomment if you WANT the banner to crop instead of shrink.)
@media (max-width: 575.98px){
  #hero img{
    height:50vh !important;
    object-fit:cover;
    object-position:center;
  }
}
*/
/* ===== HERO FIX — true full-bleed on mobile (no gutters, no white edges) ===== */

/* 1) Kill every Bootstrap gutter/padding inside #hero */
/* #hero,
#hero .hero-container,
#hero .container,
#hero .container-fluid{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
#hero .row{
  margin-left:0 !important;
  margin-right:0 !important;
}
#hero [class^="col-"],
#hero [class*=" col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
} */

/* 2) Make hero images actually fill the width */
/* #hero img,
#hero picture > img{
  display:block;                
  width:100% !important;        
  max-width:100% !important;
  height:auto !important;
} */

/* 3) On small screens, ignore container width entirely and use the viewport.
      This removes the leftover ~15px mobile gutter that Bootstrap adds. */
/* @media (max-width: 991.98px){
  #hero{ overflow-x:hidden; }  
  #hero img,
  #hero picture > img{
    width:100vw !important;    
    max-width:none !important;
    margin-left:50%;
    transform:translateX(-50%);
  }
} */

/* 4) If your hero is a CSS background, make it cover cleanly (keeps aspect). */
/* #hero[style*="background"],
#hero.hero-bg,
#hero .hero-bg{
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
} */
/* ===== Category chip bar — alignment & responsiveness (overrides) ===== */

/* Match your global container width so the bar aligns with the rest of the page */
.cat-pills .wrap{
  max-width:1200px;            /* your Pro UI container width */
  margin:0 auto;
}

/* Center chips on desktop when they do NOT overflow.
   If there IS overflow (left/right arrows visible), keep them left-aligned. */
.cat-pills .inner{
  justify-content:center;      /* default: nicely centered */
}
.cat-pills.has-left .inner,
.cat-pills.has-right .inner{
  justify-content:flex-start;  /* when scrollable */
}

/* Make sure the text inside each chip sits perfectly centered */
.cat-pill{
  line-height:1;
}
.cat-pill .label,
.cat-pill .count{
  line-height:1; display:inline-block;
}

/* Tighten spacing a touch so short sets like “mens / Shirt” look balanced */
.cat-pill{ padding: 8px 14px; }            /* matches index.html height/feel */
.cat-pill .count{ margin-left: 2px; }      /* tidy spacing before (1) */

/* Mobile: always left-align + horizontal scroll with snap (your JS already handles arrows) */
@media (max-width: 991.98px){
  .cat-pills .inner{ justify-content:flex-start; }
}
/* ===== Category chip bar — DESKTOP centering fix ===== */
/* Works with the chip bar used on your home page. It won't affect other navs. */

/* Make the chip bar align with your site container */
.cat-pills,
.cat-pills .wrap{
  max-width:1200px;   /* match your site width */
  margin-left:auto;
  margin-right:auto;
}

/* Default behavior (mobile/tablet): left-align with scroll (your current setup) */
@media (max-width: 991.98px){
  .cat-pills .inner{ justify-content:flex-start; }
}

/* Desktop: FORCE center even if JS adds has-left/has-right */
@media (min-width: 992px){
  .cat-pills .inner,
  .cat-pills.has-left .inner,
  .cat-pills.has-right .inner{
    display:flex;
    justify-content:center !important;   /* <- the important bit */
    gap:10px;
  }

  /* Hide the small prev/next round arrow buttons on wide screens */
  .cat-pills .nav-prev,
  .cat-pills .nav-next,
  .cat-pills .prev,
  .cat-pills .next{
    display:none !important;
  }
}

/* Make sure each chip is neatly centered vertically */
.cat-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.cat-pill .label,
.cat-pill .count{ line-height:1;  }

/* If your chips are using Bootstrap nav-pills or a plain <ul>, keep them centered too */
@media (min-width: 992px){
  .portfolio-flters,
  .category-filters,
  .product-filters,
  .nav-pills.categories,
  .nav.nav-pills.category-pills{
    display:flex;
    flex-wrap:wrap;
    justify-content:center !important;
    gap:10px;
    margin-left:auto;
    margin-right:auto;
  }
}
/* ===== Gap between navbar and category chips ===== */
/* Targets your chip row no matter which variant is rendered */
:root{
  --chip-gap-mobile: 10px;
  --chip-gap-desktop: 22px;   /* adjust this number for more/less space */
}

.cat-pills,
.portfolio-flters,
.category-filters,
.product-filters,
.nav-pills.categories,
.nav.nav-pills.category-pills{
  margin-top: var(--chip-gap-mobile);
  margin-bottom: 8px;         /* small space below chips */
}

@media (min-width: 992px){
  .cat-pills,
  .portfolio-flters,
  .category-filters,
  .product-filters,
  .nav-pills.categories,
  .nav.nav-pills.category-pills{
    margin-top: var(--chip-gap-desktop);
  }
}

/* If your chip bar becomes sticky, keep a tiny cushion below the header */
.cat-pills.sticky,
.cat-pills.is-sticky,
.cat-pills[data-sticky="true"]{
  top: calc(var(--nav-h) + 8px);
}
/* ===== Gap between navbar and the category chips (desktop only) ===== */
:root{
  --chip-gap-desktop: 24px;   /* tweak this number for more/less space */
}

/* Target common chip bars (yours included) */
@media (min-width: 992px){
  .cat-pills,
  .portfolio-flters,
  .category-filters,
  .product-filters,
  .nav-pills.categories,
  .nav.nav-pills.category-pills{
    position: relative;                /* enables the spacer */
  }
  .cat-pills::before,
  .portfolio-flters::before,
  .category-filters::before,
  .product-filters::before,
  .nav-pills.categories::before,
  .nav.nav-pills.category-pills::before{
    content: "";
    display: block;
    height: var(--chip-gap-desktop);   /* creates the visual gap */
  }
}

/* If your chip bar turns sticky, keep it below the header a touch */
.cat-pills.sticky,
.cat-pills.is-sticky,
.cat-pills[data-sticky="true"]{
  top: calc(var(--nav-h) + 8px);       /* avoid touching the navbar */
}
/* ===== Desktop gap below the fixed navbar (chips sit a bit lower) ===== */
/* Global, safe, and works even if the chip bar is sticky or uses negative margins. */

@media (min-width: 992px){
  /* 1) Add a small global cushion for the page content on desktop only */
  #main{ margin-top: 18px !important; }  /* tweak 18 → 14/22 as you like */

  /* 2) If the chip bar is sticky, keep it the same extra distance from the header */
  .cat-pills.sticky,
  .cat-pills.is-sticky,
  .cat-pills[data-sticky="true"]{
    top: calc(var(--nav-h) + 12px) !important;  /* adds ~12px gap while stuck */
  }

  /* 3) If your theme added negative margins to the chip rail, neutralize them */
  .cat-pills,
  .portfolio-flters,
  .category-filters,
  .product-filters,
  .nav-pills.categories,
  .nav.nav-pills.category-pills{
    margin-top: 10px !important;     /* light extra space above chips */
    transform: none !important;      /* just in case a translateY was used */
  }
}
/* ===== Desktop gap under the navbar for the sticky chip row ===== */
@media (min-width: 992px){
  .cat-pills{
    /* push the stuck position a bit lower than the header */
    top: calc(var(--nav-h) + 14px) !important;  /* change 14px to taste */
    margin-top: 8px !important;                 /* extra breathing room before it sticks */
  }
}
/* ===== Pill rail + anchor offset (no overlap with titles) ===== */

/* Tune these if you want a bit more/less space */
:root{
  --pill-height: 44px;   /* approx height of one chip row */
  --pill-gap: 12px;      /* little breathing room below the navbar */
}

/* Make sure the pill rail has a solid background while sticky */
.cat-pills{
  background:#fff;
}

/* Desktop: pill rail sticks a touch below the header */
@media (min-width: 992px){
  .cat-pills{
    /* sits just under the header, with a small gap */
    top: calc(var(--nav-h) + var(--pill-gap)) !important;
    z-index: 1100; /* below header but above content */
  }

  /* Any anchor target will stop BELOW the rail, so titles are never hidden */
  /* This works with native anchor jumps and scrollIntoView */
  [id]{
    scroll-margin-top: calc(var(--nav-h) + var(--pill-height) + var(--pill-gap));
  }
}

/* Mobile/tablet: just offset for the header (rail isn’t a problem here) */
@media (max-width: 991.98px){
  [id]{
    scroll-margin-top: calc(var(--nav-h) + 8px);
  }
}

/* A little space under the rail so it never feels glued to content */
.cat-pills + *{
  margin-top: 8px;
}
/* ===== Prevent chip rail from covering section titles ===== */
:root{
  --pill-gap: 12px;      /* space between header and rail */
  --pill-height: 48px;   /* approx row height; tweak to your chips (44–52px) */
}
/* === Brand word-mark colors (final) === */
.brand-mark{
  font-weight:800;
  letter-spacing:.5px;
  color:#0f172a;                 /* default: deep black */
}
.brand-mark span{ color:inherit; }

/* Force AC, MEN, WEAR to black */
.brand-ac,
.brand-men,
.brand-wear{
  color:#0f172a !important;
}

/* Only the Z is gold */
.brand-z{
  color:#d4af37 !important;      /* gold */
}

/* If any old accent/red styles exist, neutralize them */
.brand-mark .accent,
.brand-menz{ color:#0f172a !important; }