/*
Theme Name: Mehrun Nisa — Trade
Theme URI: https://mehrunisacreations.com
Description: Clean wholesale-catalogue design for Mehrun Nisa Creations. Child theme of Mehrun Nisa. Enquiry-led, no e-commerce. Inherits all product post types from the parent theme.
Author: Mehrun Nisa Creations
Template: mehrun-nisa
Version: 1.0.1
Text Domain: mehrun-nisa-hf
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --teal:#1E8A78;
  --teal-dark:#166B5D;
  --teal-tint:#E8F3F1;
  --ink:#3F3F3F;
  --ink-soft:#6A6A6A;
  --head:#2E2E2E;
  --line:#DEDEDE;
  --grey:#F5F5F5;
  --grey-2:#EFEFEF;
  --white:#FFFFFF;
  --amber:#C8752A;

  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(1rem,4vw,3rem);
  --max:1320px;
  --r:4px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body.mnc{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.mnc h1,.mnc h2,.mnc h3,.mnc h4{font-family:var(--font);color:var(--head);font-weight:700;margin:0;line-height:1.18;text-wrap:balance}
.mnc p{margin:0}
.mnc a{color:inherit;text-decoration:none}
.mnc img{display:block;max-width:100%;height:auto}
.mnc :focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wrapx{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.bt{
  display:inline-block;font-family:var(--font);font-weight:700;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.95em 2em;border-radius:var(--r);
  background:var(--teal);color:#fff;border:2px solid var(--teal);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.bt:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.bt.ghost{background:var(--white);color:var(--head);border-color:var(--white)}
.bt.ghost:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.bt.line{background:transparent;color:var(--teal);border-color:var(--teal)}
.bt.line:hover{background:var(--teal);color:#fff}
.bt.pill{border-radius:100px}

/* ==========================================================================
   HEADER
   ========================================================================== */
.utility{background:var(--grey);border-bottom:1px solid var(--line);font-size:.78rem;color:var(--ink-soft)}
.utility .wrapx{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:center;padding-block:.6rem;text-align:center}
.utility strong{color:var(--teal);font-weight:600}
.utility a:hover{color:var(--teal)}

.masthead{background:var(--white);border-bottom:1px solid var(--line)}
.masthead .wrapx{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding-block:1.3rem}
.brand{justify-self:center;text-align:center}
.brand .bn{font-size:1.9rem;font-weight:700;color:var(--teal);letter-spacing:-.015em;line-height:1;display:block}
.brand .bt2{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-top:.4rem;display:block;font-weight:500}
.mhleft{display:flex;align-items:center;gap:.8rem}
.searchbox{display:flex;align-items:center;gap:.5rem;background:var(--grey);border:1px solid var(--line);border-radius:100px;padding:.55rem 1.1rem;width:min(310px,100%)}
.searchbox input{border:0;background:transparent;font-family:var(--font);font-size:.85rem;color:var(--ink);width:100%}
.searchbox input:focus{outline:0}
.searchbox svg{flex:none;color:var(--ink-soft)}
.mhright{display:flex;align-items:center;gap:.8rem;justify-self:end}

.catbar{background:var(--white);border-bottom:1px solid var(--line)}
.catbar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0;list-style:none;margin:0;padding:0}
.catbar a{
  display:block;padding:1rem 1.15rem;font-size:.82rem;font-weight:500;color:var(--head);
  border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
}
.catbar a:hover,.catbar a.on{color:var(--teal);border-bottom-color:var(--teal)}
.burger2{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--head)}
.burger2 span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;border-radius:2px}
@media(max-width:960px){
  .masthead .wrapx{grid-template-columns:auto 1fr auto;gap:.8rem}
  .mhleft .searchbox{display:none}
  .brand .bn{font-size:1.4rem}
  .burger2{display:block}
  .catbar ul{display:none;flex-direction:column;padding-block:.5rem}
  .catbar ul.open{display:flex}
  .catbar a{text-align:center;border-bottom:1px solid var(--line)}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero2{position:relative;background:var(--grey-2);overflow:hidden}
.hero2 .bgimg{position:absolute;inset:0}
.hero2 .bgimg img{width:100%;height:100%;object-fit:cover}
.hero2 .wrapx{position:relative;z-index:2;padding-block:clamp(3rem,7vw,6rem)}
.hpanel{
  background:rgba(255,255,255,.93);padding:clamp(1.8rem,3.5vw,3.2rem);
  max-width:620px;border-radius:var(--r);border-left:5px solid var(--teal);
}
.hpanel h1{font-size:clamp(1.9rem,4.2vw,3.1rem);color:var(--head)}
.hpanel p{margin-top:1.1rem;color:var(--ink);font-size:1rem;max-width:48ch}
.hbtns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:clamp(3rem,6vw,5rem)}
.sec.tint{background:var(--grey)}
.sec.teal{background:var(--teal);color:#fff}
.sec.teal h2,.sec.teal h3{color:#fff}
.sec.teal p{color:rgba(255,255,255,.9)}
.sechead{text-align:center;max-width:680px;margin:0 auto clamp(2rem,4vw,3rem)}
.sechead h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.sechead p{margin-top:.9rem;color:var(--ink-soft)}
.sechead .kick{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.7rem;
}

/* trust / stats */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}
.trust .ti{font-size:2.3rem;font-weight:700;color:var(--teal);line-height:1}
.trust h3{font-size:1.05rem;margin-top:.7rem}
.trust p{font-size:.88rem;color:var(--ink-soft);margin-top:.4rem}

/* how it works */
.hiw{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(1.4rem,2.5vw,2.4rem)}
.hiwc{text-align:center}
.hiwc .ic{
  width:62px;height:62px;border-radius:50%;background:var(--teal-tint);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
  font-weight:700;font-size:1.15rem;border:2px solid var(--teal);
}
.hiwc h3{font-size:1.05rem}
.hiwc p{font-size:.88rem;color:var(--ink-soft);margin-top:.5rem}

/* hero gallery strip */
.gstripwrap{padding-block:clamp(1.5rem,3vw,2.5rem) 0}
.gstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1rem,1.6vw,1.5rem)}
.gcard{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--grey-2)}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s ease}
.gcard:hover img{transform:scale(1.06)}
.gcard figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  color:#fff;font-weight:600;font-size:.92rem;letter-spacing:.02em;
}

/* floating contact buttons */
.mnfloat{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:9999;
}
.mnfab{
  position:relative;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 6px 18px -4px rgba(0,0,0,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mnfab:hover{transform:scale(1.08);box-shadow:0 10px 24px -4px rgba(0,0,0,.45)}
.mnfab svg{position:relative;z-index:2}
.mnfab-wa{background:#25D366}
.mnfab-mail{background:var(--teal)}
.mnfab-ring{
  position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.55;
  animation:mnfabPulse 2.2s ease-out infinite;
  z-index:1;
}
@keyframes mnfabPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .mnfab-ring{animation:none;display:none}
}
@media (max-width:768px){
  .mnfloat{right:12px;gap:10px}
  .mnfab{width:46px;height:46px}
  .mnfab svg{width:20px;height:20px}
}

/* category cards */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,1.6vw,1.5rem)}
.catcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);transition:box-shadow .3s,transform .3s}
.catcard:hover{box-shadow:0 14px 34px -20px rgba(0,0,0,.4);transform:translateY(-3px)}
.catcard .cph{aspect-ratio:4/3;overflow:hidden;background:var(--grey-2)}
.catcard .cph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.catcard:hover .cph img{transform:scale(1.06)}
.catcard .cin{padding:1.1rem 1.2rem 1.4rem}
.catcard h3{font-size:1.15rem}
.catcard p{font-size:.85rem;color:var(--ink-soft);margin-top:.35rem}
.catcard .more{display:inline-block;margin-top:.9rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.catcard .more::after{content:" →"}

/* product grid — NO prices, enquiry only */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:clamp(1rem,1.6vw,1.5rem)}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .3s,border-color .3s}
.pcard:hover{box-shadow:0 14px 34px -22px rgba(0,0,0,.45);border-color:var(--teal)}
.pcard .badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--teal);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.35em .7em;border-radius:2px;
}
.pcard .pph{aspect-ratio:1;overflow:hidden;background:var(--grey-2)}
.pcard .pph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.pcard:hover .pph img{transform:scale(1.05)}
.pcard .pin{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pcard .pcode{font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.pcard h3{font-size:1rem;line-height:1.35}
.pspec{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-direction:column;gap:.22rem;font-size:.78rem;color:var(--ink-soft)}
.pspec b{color:var(--ink);font-weight:500}
.pcard .pcta{
  margin-top:auto;padding-top:.9rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);
}
.pcard .pcta::after{content:" →"}

/* sector blocks */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.sectorc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;text-align:center}
.sectorc h3{font-size:1rem;margin-top:.3rem}
.sectorc p{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}

/* split band */
.split{display:grid;grid-template-columns:1fr;align-items:stretch}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr}.split.rev .spimg{order:2}}
.spimg{min-height:320px;overflow:hidden;background:var(--grey-2)}
.spimg img{width:100%;height:100%;object-fit:cover}
.sptxt{padding:clamp(2rem,4.5vw,4rem);display:flex;flex-direction:column;justify-content:center}
.sptxt h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.sptxt p{margin-top:1rem;color:var(--ink-soft);max-width:50ch}
.sptxt .bt{align-self:flex-start;margin-top:1.7rem}
.sptxt.dark{background:var(--head);color:#fff}
.sptxt.dark h2{color:#fff}
.sptxt.dark p{color:rgba(255,255,255,.78)}

/* steps */
.psteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1.4rem,2.5vw,2.2rem)}
.pstep{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.4rem}
.pstep .sn{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
.pstep h3{font-size:1.05rem;margin-top:.6rem}
.pstep p{font-size:.87rem;color:var(--ink-soft);margin-top:.5rem}

/* spec table */
.spectbl{width:100%;border-collapse:collapse;background:var(--white)}
.spectbl th,.spectbl td{text-align:left;padding:1rem .9rem;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.spectbl th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;width:15rem}
.scrollx{overflow-x:auto}

/* filters */
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.2rem}
.filterbar a{
  font-size:.73rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.65em 1.25em;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);
  transition:all .25s;
}
.filterbar a:hover{border-color:var(--teal);color:var(--teal)}
.filterbar a.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* breadcrumb banner */
.pgbanner{background:var(--grey);border-bottom:1px solid var(--line);padding-block:clamp(2rem,4vw,3.2rem)}
.pgbanner h1{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.pgbanner .crumbs{font-size:.78rem;color:var(--ink-soft);margin-top:.6rem}
.pgbanner .crumbs a:hover{color:var(--teal)}

/* single product */
.singlewrap{display:grid;gap:clamp(1.6rem,3vw,3rem);grid-template-columns:1fr}
@media(min-width:860px){.singlewrap{grid-template-columns:1fr 1fr}}
.singleimg{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--grey-2);cursor:crosshair}
.singleimg img{display:block;width:100%;height:auto}
.mnzoom-lens{position:absolute;top:0;left:0;border:1px solid var(--teal);background:rgba(255,255,255,.35);pointer-events:none;display:none}
.mnzoom-result{position:fixed;top:0;left:0;border:1px solid var(--line);border-radius:var(--r);background-repeat:no-repeat;background-color:var(--white);display:none;z-index:999;box-shadow:0 12px 32px rgba(0,0,0,.2)}
@media(max-width:900px){.mnzoom-lens,.mnzoom-result{display:none !important}}
.singlemeta h1{font-size:clamp(1.5rem,3vw,2.2rem)}
.singlemeta .pcode{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.metatbl{width:100%;border-collapse:collapse;margin-top:1.5rem}
.metatbl th,.metatbl td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--line);font-size:.9rem}
.metatbl th{color:var(--ink-soft);font-weight:500;width:9rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}

/* enquiry form */
.formgrid{display:grid;gap:clamp(1.6rem,3vw,3rem);grid-template-columns:1fr}
@media(min-width:900px){.formgrid{grid-template-columns:1.2fr .8fr}}
.fld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.fld label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fld input,.fld select,.fld textarea{
  font-family:var(--font);font-size:.92rem;color:var(--ink);padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);transition:border-color .25s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--teal)}
.fld textarea{resize:vertical;min-height:120px}
.formgrid .f2{display:grid;gap:0 1.1rem;grid-template-columns:1fr;background-image:none !important;background:none !important;border-radius:0 !important}
@media(min-width:620px){.formgrid .f2{grid-template-columns:1fr 1fr}}
.infobox{background:var(--grey);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;align-self:start}
.infobox h3{font-size:1.15rem;margin-bottom:.8rem}
.infobox ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.86rem;color:var(--ink-soft)}
.infobox li::before{content:"✓";color:var(--teal);font-weight:700;margin-right:.55rem}
.contactrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.contactrow h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.5rem}
.contactrow a,.contactrow p{font-size:1rem;color:var(--head)}
.contactrow a:hover{color:var(--teal)}

/* page content (WP editor output) */
.pagebody{max-width:760px;margin-inline:auto}
.pagebody h2{font-size:1.6rem;margin-top:2.2rem}
.pagebody h3{font-size:1.2rem;margin-top:1.6rem}
.pagebody p{margin-top:1rem;color:var(--ink)}
.pagebody ul,.pagebody ol{margin-top:1rem;padding-left:1.3rem;color:var(--ink)}
.pagebody li{margin-top:.4rem}
.pagebody img{border-radius:var(--r);margin-top:1.4rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--head);color:rgba(255,255,255,.72);padding-block:3.4rem 1.8rem;font-size:.88rem}
.ftrgrid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.ftrgrid h5{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;margin:0 0 1rem}
.ftrgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.ftrgrid a:hover{color:var(--teal)}
.ftrbrand .fbn{font-size:1.4rem;font-weight:700;color:#fff;display:block}
.ftrbrand p{margin-top:.8rem;max-width:32ch}
.ftrbot{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between;font-size:.76rem;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.jsx .rvx{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.jsx .rvx.inx{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .jsx .rvx{opacity:1!important;transform:none!important;transition:none}
  .catcard,.pcard,.catcard img,.pcard img{transition:none!important}
}