/*
Theme Name: MH Designer Premium
Theme URI: https://mhdesignerofficial.com
Author: MH Designer
Author URI: https://mhdesignerofficial.com
Description: Custom premium theme for MH Designer — a monochrome tailoring-house aesthetic with a hamburger-triggered side drawer, a minimal search-and-cart header, and full WooCommerce support.
Version: 1.0
Requires PHP: 7.4
Text Domain: mhdesigner
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:        #17140F;   /* near-black, warm */
  --charcoal:   #3A362E;
  --stone:      #8C8577;
  --line:       #D8D2C4;   /* hairline borders on light bg */
  --line-dark:  rgba(255,255,255,.14);
  --cream:      #F3EEE0;
  --paper:      #FBF9F4;
  --white:      #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --gap: clamp(16px, 3vw, 40px);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; max-width:64ch; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.mhd-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gap); }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ============================================================
   HEADER
   ============================================================ */
.mhd-header{
  position:sticky; top:0; z-index:60;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
}
.mhd-header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gap);
  height:72px;
  display:grid;
  grid-template-columns:48px 1fr 88px;
  align-items:center;
}
.mhd-hamburger{
  background:none; border:0; padding:8px; width:40px; height:40px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.mhd-hamburger span{
  display:block; height:1.5px; width:22px; background:var(--paper);
  transition:transform .25s ease, opacity .25s ease;
}
.mhd-logo{
  justify-self:center;
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.mhd-logo span{ font-weight:300; opacity:.75; }
.mhd-logo-image img{ max-height:44px; width:auto; }
.mhd-logo-image a{ display:flex; align-items:center; }
.mhd-header-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:18px;
}
.mhd-search-toggle, .mhd-cart-link{
  background:none; border:0; color:var(--paper);
  position:relative; display:flex; align-items:center; padding:6px;
}
.mhd-cart-count{
  position:absolute; top:-4px; right:-6px;
  background:var(--paper); color:var(--ink);
  font-size:10px; font-weight:700; line-height:1;
  min-width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.mhd-search-panel{
  max-height:0; overflow:hidden; background:var(--charcoal);
  transition:max-height .3s ease;
}
.mhd-search-panel.is-open{ max-height:90px; }
.mhd-search-panel .mhd-wrap{ padding-top:16px; padding-bottom:16px; }
.mhd-search-panel form{ display:flex; gap:0; }
.mhd-search-panel input[type="search"], .mhd-search-panel input[type="text"]{
  flex:1; background:transparent; border:0; border-bottom:1px solid var(--line-dark);
  color:var(--paper); font-size:18px; font-family:var(--font-display); padding:8px 2px;
}
.mhd-search-panel input::placeholder{ color:var(--stone); }
.mhd-search-panel button{ background:none; border:0; color:var(--paper); padding:0 10px; }

/* ============================================================
   OFF-CANVAS DRAWER
   ============================================================ */
.mhd-overlay{
  position:fixed; inset:0; background:rgba(23,20,15,.55);
  opacity:0; visibility:hidden; transition:opacity .3s ease;
  z-index:70;
}
.mhd-overlay.is-visible{ opacity:1; visibility:visible; }

.mhd-drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(340px,84vw);
  background:var(--ink); color:var(--paper);
  transform:translateX(-100%); transition:transform .35s ease;
  z-index:80; display:flex; flex-direction:column;
  padding:28px 28px 24px;
  overflow-y:auto;
}
.mhd-drawer.is-open{ transform:translateX(0); }
.mhd-drawer-close{
  align-self:flex-end; background:none; border:0; color:var(--paper);
  font-size:28px; line-height:1; padding:4px 8px; margin-bottom:18px;
}
.mhd-drawer-nav ul{ list-style:none; margin:0; padding:0; }
.mhd-drawer-nav li{ border-bottom:1px solid var(--line-dark); }
.mhd-drawer-nav a{
  display:block; padding:14px 2px;
  font-family:var(--font-display); font-size:19px;
}
.mhd-drawer-nav .sub-menu, .mhd-drawer-nav .children{
  list-style:none; margin:0 0 6px; padding:0 0 0 14px;
}
.mhd-drawer-nav .sub-menu a, .mhd-drawer-nav .children a{
  font-family:var(--font-body); font-size:14px; padding:9px 2px; opacity:.8;
}
.mhd-drawer-footer{
  margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:10px;
  font-size:14px; letter-spacing:.03em;
}
.mhd-drawer-footer a{ opacity:.85; }

/* ============================================================
   HOMEPAGE BANNER
   ============================================================ */
.mhd-banner{ width:100%; line-height:0; position:relative; }
.mhd-banner img{ width:100%; height:auto; display:block; }
.mhd-banner-placeholder{
  aspect-ratio:16/6; width:100%;
  background:repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 16px), var(--cream);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--stone); font-size:13px; letter-spacing:.04em; padding:20px;
}
@media (max-width:600px){ .mhd-banner-placeholder{ aspect-ratio:4/5; } }

.mhd-banner-carousel{ position:relative; overflow:hidden; }
.mhd-banner-slide{
  display:none;
}
.mhd-banner-slide.is-active{ display:block; animation:mhdFadeIn .6s ease; }
@keyframes mhdFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.mhd-banner-dots{
  position:absolute; left:0; right:0; bottom:16px;
  display:flex; justify-content:center; gap:8px; z-index:5;
}
.mhd-banner-dot{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--paper);
  background:rgba(255,255,255,.35); padding:0;
}
.mhd-banner-dot.is-active{ background:var(--paper); }

/* ============================================================
   HERO / HOMEPAGE
   ============================================================ */
.mhd-hero{
  background:var(--cream);
  padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px);
}
.mhd-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,64px);
  align-items:end;
}
.mhd-hero-eyebrow{
  font-size:13px; letter-spacing:.14em; color:var(--stone); margin-bottom:14px;
}
.mhd-hero h1{ font-size:clamp(34px,5vw,58px); max-width:14ch; }
.mhd-hero p{ color:var(--charcoal); font-size:17px; margin-top:14px; }
.mhd-hero-cta{
  display:inline-block; margin-top:26px; padding:14px 30px;
  background:var(--ink); color:var(--paper); font-size:14px; letter-spacing:.06em;
}
.mhd-hero-stitch{
  border-top:1px dashed var(--stone); position:relative; margin-top:18px;
}
.mhd-hero-side{ align-self:stretch; display:flex; align-items:flex-end; }
.mhd-hero-side-panel{
  border:1px solid var(--charcoal); padding:26px; width:100%;
}
.mhd-hero-side-panel .num{ font-family:var(--font-display); font-size:34px; }
.mhd-hero-side-panel .lbl{ font-size:13px; color:var(--charcoal); margin-top:4px; }

/* Category grid */
.mhd-section{ padding:clamp(44px,7vw,90px) 0; }
.mhd-section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:32px;
}
.mhd-section-head h2{ font-size:clamp(24px,3vw,34px); }
.mhd-section-head a{ font-size:13px; letter-spacing:.06em; border-bottom:1px solid var(--ink); }
.mhd-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--gap);
}
.mhd-cat-card{ display:block; }
.mhd-cat-card .thumb{
  aspect-ratio:3/4; background:var(--line); overflow:hidden; margin-bottom:12px;
}
.mhd-cat-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.mhd-cat-card .name{ font-family:var(--font-display); font-size:17px; }

/* Featured products (WooCommerce shortcode output lives inside) */
.mhd-products ul.products{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:var(--gap) !important; list-style:none !important; margin:0 !important; padding:0 !important;
}
.mhd-products ul.products li.product{ margin:0 !important; }
.mhd-products .price{ color:var(--ink) !important; font-weight:600; }
.mhd-products .button{
  background:var(--ink) !important; color:var(--paper) !important; border-radius:0 !important;
  font-size:12px !important; letter-spacing:.06em; padding:10px 16px !important;
}

/* ============================================================
   WOOCOMMERCE GLOBAL OVERRIDES (shop / product / cart pages)
   ============================================================ */
.woocommerce ul.products li.product .price{ color:var(--ink); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--ink); color:var(--paper); border-radius:0; border:1px solid var(--ink);
  letter-spacing:.05em; font-size:13px; padding:12px 22px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{
  background:transparent; color:var(--ink);
}
.woocommerce span.onsale{ background:var(--ink); border-radius:0; }
.woocommerce nav.woocommerce-pagination ul li a{ border-radius:0; }
.mhd-page-wrap{ max-width:var(--maxw); margin:0 auto; padding:40px var(--gap) 80px; }

/* ============================================================
   PAYMENT METHODS STRIP
   ============================================================ */
.mhd-payments{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.mhd-payments .mhd-wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.mhd-payments-label{ font-size:12px; letter-spacing:.08em; color:var(--stone); }
.mhd-payments-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.mhd-badge{
  border:1px solid var(--charcoal); color:var(--charcoal);
  font-size:12px; letter-spacing:.03em; padding:6px 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.mhd-footer{ background:var(--ink); color:var(--paper); margin-top:0; }
.mhd-footer-top{
  max-width:var(--maxw); margin:0 auto; padding:var(--gap) var(--gap) 40px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px;
}
.mhd-footer h4{
  font-family:var(--font-body); font-size:13px; letter-spacing:.1em;
  color:var(--stone); margin-bottom:16px;
}
.mhd-query-heading{ margin-top:26px; }
.mhd-footer ul{ list-style:none; margin:0; padding:0; }
.mhd-footer li{ margin-bottom:10px; font-size:14px; }
.mhd-footer a:hover{ text-decoration:underline; }
.mhd-footer-brand p{ color:var(--stone); font-size:14px; }
.mhd-social-row{ display:flex; gap:14px; margin-top:16px; }
.mhd-social-row a{ opacity:.85; }
.mhd-newsletter input[type="email"], .mhd-query-form input, .mhd-query-form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-dark);
  color:var(--paper); padding:10px 0; font-size:15px; margin-bottom:12px; font-family:var(--font-body);
  resize:vertical;
}
.mhd-newsletter button, .mhd-query-form button{
  background:var(--paper); color:var(--ink); border:0; padding:10px 22px; font-size:13px; letter-spacing:.05em;
}
.mhd-newsletter-msg{ font-size:13px; margin-top:10px; color:var(--stone); }

.mhd-footer-links-row{
  border-top:1px solid var(--line-dark);
  padding:22px var(--gap) 10px; text-align:center;
  display:flex; justify-content:center; flex-wrap:wrap; gap:22px;
}
.mhd-footer-links-row a{ font-size:12px; letter-spacing:.06em; }
.mhd-footer-copyright{
  text-align:center; padding:10px var(--gap) 26px;
  font-size:12px; color:var(--stone);
  display:flex; flex-direction:column; gap:6px;
}


/* WhatsApp floating button */
.mhd-whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:54px; height:54px; border-radius:50%; background:#1f1d19;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.mhd-whatsapp-float svg{ width:26px; height:26px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 780px){
  .mhd-hero-grid{ grid-template-columns:1fr; }
  .mhd-hero-side{ display:none; }
  .mhd-footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .mhd-footer-top{ grid-template-columns:1fr; }
  .mhd-header-inner{ padding:0 16px; }
}