/*
Site-wide extras — kept in its own file (separate from style.css and from
shop-pages.css) so it never collides with manual edits made in style.css.
Loads on every page since notices / mobile nav / categories drawer live in
header.php and footer.php, which render everywhere.
Reuses the CSS variables already declared in style.css's :root.
*/

/* =========================================================
   1. MINIMUM ORDER VALUE — sitewide notice + cart warning
   ========================================================= */
.min-order-banner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg,var(--sale-deep,#c4102a),var(--sale,#ff3b57));
  color:#fff;font-size:12.5px;font-weight:600;padding:9px 16px;text-align:center;
}
.min-order-banner svg{flex-shrink:0;}

.min-order-warning{
  background:rgba(255,59,87,.08);border:1px solid rgba(255,59,87,.3);border-left:4px solid var(--sale,#ff3b57);
  border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13.5px;color:var(--ink,#14151c);
}

/* =========================================================
   2. MOBILE NAV — contact info block
   ========================================================= */
.mobile-nav-contact{
  margin-top:4px;padding-top:4px;
  display:flex;flex-direction:column;gap:12px;
}
.mobile-nav-contact h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--silver-dim,#9a9ea6);margin-bottom:2px;}
.mobile-nav-contact-item{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#fff;
}
.mobile-nav-contact-item svg{flex-shrink:0;margin-top:2px;color:var(--blue-glow,#5aa2ff);}
.mobile-nav-contact-address{color:var(--silver,#d6d9de);}

/* =========================================================
   3. AUTH MODAL — "login compulsory" state
   ========================================================= */
.auth-forced-note{
  background:rgba(30,111,255,.1);border:1px solid rgba(30,111,255,.25);border-radius:10px;
  padding:10px 14px;font-size:12.5px;color:var(--blue-glow,#5aa2ff);margin-bottom:16px;text-align:center;
}
.auth-modal.is-forced .auth-close{display:none!important;}
.auth-modal.is-forced{pointer-events:auto;}

/* =========================================================
   4. CATEGORIES QUICK-ACCESS DRAWER (bottom bar "Categories")
   ========================================================= */
.cat-drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:750;opacity:0;pointer-events:none;transition:opacity .3s;}
.cat-drawer-scrim.is-open{opacity:1;pointer-events:auto;}

.cat-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:800;
  background:var(--black-2,#101015);border-radius:20px 20px 0 0;
  max-height:75vh;overflow-y:auto;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.65,0,.35,1);
  box-shadow:0 -20px 50px rgba(0,0,0,.4);
}
.cat-drawer.is-open{transform:translateY(0);}
.cat-drawer::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.15);
}
.cat-drawer-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.cat-drawer-head h3{font-size:16px;color:#fff;}
.cat-drawer-head button{width:32px;height:32px;border-radius:50%;background:var(--black-3,#17171e);display:flex;align-items:center;justify-content:center;color:#fff;}

.cat-drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cat-drawer-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.cat-drawer-thumb{
  width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--black-3,#17171e),var(--black-2,#101015));
  border:1px solid rgba(90,162,255,.2);
}
.cat-drawer-thumb img{width:100%;height:100%;object-fit:cover;}
.cat-drawer-thumb.placeholder{display:flex;align-items:center;justify-content:center;}
.cat-drawer-thumb.placeholder svg{width:36%;height:36%;color:var(--blue-glow,#5aa2ff);}
.cat-drawer-tile span{font-size:12.5px;font-weight:600;color:#fff;line-height:1.3;}

/* =========================================================
   7. LOGO ALIGNMENT FIX
   Ensures the header logo sits flush and vertically centered
   regardless of default WP custom-logo wrapper spacing or any
   transparent padding baked into the uploaded image file.
   ========================================================= */
.site-header .brand{
  display:flex!important;align-items:center!important;height:100%;
}
.site-header .custom-logo-link{
  display:flex!important;align-items:center!important;margin:0!important;padding:0!important;line-height:0;
}


/* =========================================================
   8. FIX STRAY SHADOW BLEEDING PAST THE VIEWPORT EDGE
   Off-canvas drawers (mobile nav, mini-cart) sit just past the
   viewport when closed; their box-shadow blur can still bleed a
   few pixels into view. Dropping the shadow while closed removes
   that faint strip without touching the drawers' own styling.
   ========================================================= */
html, body{ overflow-x:hidden!important; }
.mobile-nav:not(.is-open),
.mini-cart-drawer:not(.is-open){
  box-shadow:none!important;
}

/* =========================================================
   9. MOBILE-APP FEEL — small global polish
   ========================================================= */
*{ -webkit-tap-highlight-color:transparent; }
img{ -webkit-user-drag:none; }
a, button{ touch-action:manipulation; }

/* =========================================================
   10. MINI-CART QTY STEPPER
   ========================================================= */
.mini-cart-qty-stepper{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:2px;background:rgba(255,255,255,.04);margin-top:4px;
}
.mc-qty-btn{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.08);flex-shrink:0;
}
.mc-qty-btn:hover{background:var(--blue,#1e6fff);}
.mc-qty-value{font-family:var(--font-mono,monospace);font-size:12.5px;color:#fff;min-width:16px;text-align:center;}
.mini-cart-qty-stepper.is-updating{opacity:.55;pointer-events:none;}

/* =========================================================
   11. MOQ NOTE (shown near qty boxes when MOQ/step > 1)
   ========================================================= */
.moq-note{
  display:block;font-size:11px;color:var(--sale,#ff3b57);margin-bottom:4px;font-weight:600;
}