/* ============================================================================
   Aisha Goods Wholesalers LLC
   Design tokens + components. No framework, no build step, no third-party request.

   Colour rule that governs the whole sheet: the trade gold #C8963E does NOT
   pass contrast on paper (2.55:1), so it is never used for text on light
   surfaces. It is used only as a fill, a rule, a mark, or text on the navy —
   and where gold text is wanted on paper, --gold-ink (#97691F, 4.62:1) is the
   token. Photographs carry the warmth; the type stays legible.
   ========================================================================= */

@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend.woff2") format("woff2-variations");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/Source-Sans-3.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  /* colour */
  --ink:#0C1A26;
  --navy:#0E2A47;
  --navy-2:#13365A;
  --body:#42505C;
  --muted:#5A6672;
  --faint:#8A9299;
  --gold:#C8963E;          /* fills, rules, marks, text on navy only */
  --gold-ink:#97691F;      /* gold text on paper — 4.62:1 */
  --gold-soft:#F3E7D0;
  --paper:#FBFAF7;
  --paper-2:#F4F1EA;
  --paper-3:#EDE9DF;
  --line:#E2DCD0;
  --line-strong:#CFC6B4;
  --white:#FFFFFF;
  --ok:#2F6B45;

  /* type */
  --font-h:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-b:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-display:clamp(2.1rem,1.35rem + 2.5vw,3.15rem);
  --t-h1:clamp(2rem,1.4rem + 2.4vw,3rem);
  --t-h2:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);
  --t-h3:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --t-lead:clamp(1.05rem,1rem + .3vw,1.22rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;
  --t-micro:.75rem;

  /* space */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:2.75rem; --s8:3.5rem;
  --s9:4.5rem; --s10:6rem;  --s11:7.5rem;

  /* shape + elevation */
  --r-sm:6px; --r:10px; --r-md:14px; --r-lg:20px;
  --sh1:0 1px 2px rgba(12,26,38,.06);
  --sh2:0 10px 30px -14px rgba(12,26,38,.22),0 2px 6px rgba(12,26,38,.05);
  --sh3:0 34px 70px -30px rgba(12,26,38,.4);

  --wrap:1220px;
  --nav-h:74px;
  --dur:180ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font-b); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-h); color:var(--ink); line-height:1.18; margin:0; letter-spacing:-.02em; font-weight:600}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto}
.sec{padding-block:var(--s9)}
.sec--tight{padding-block:var(--s7)}
.sec--quiet{padding-block:var(--s6)}
.sec--paper2{background:var(--paper-2)}
.dark{background:var(--navy); color:#D8E0E8}
.dark h1,.dark h2,.dark h3{color:#fff}

/* ---------------------------------------------------------------- type bits */
.eyebrow{
  font-family:var(--font-h); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink);
  display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s3);
}
.eyebrow::before{content:""; inline-size:26px; block-size:2px; background:var(--gold); flex:none}
.dark .eyebrow{color:var(--gold)}
.lead{font-size:var(--t-lead); color:var(--body); max-width:62ch}
.dark .lead{color:#C6D2DC}
.muted{color:var(--muted)}

/* Section head: heading left, intro dropped to the baseline on the right.
   The single most useful rule for not looking machine-built — most generated
   sites centre every one of these. */
.head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s6); align-items:end; margin-bottom:var(--s7);
}
.head h2{max-width:22ch; text-wrap:balance}
.head .lead{justify-self:end}
@media (max-width:860px){
  .head{grid-template-columns:1fr; gap:var(--s4)}
  .head .lead{justify-self:start}
}
.head--plain{display:block; margin-bottom:var(--s6)}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-h); font-size:var(--t-sm); font-weight:600;
  padding:.85rem 1.5rem; border-radius:var(--r-sm); text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:all var(--dur) var(--ease);
}
.btn--gold{background:var(--gold); color:var(--ink); border-color:var(--gold)}
.btn--gold:hover{background:#D9A94F; border-color:#D9A94F}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:var(--navy-2)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink)}
.dark .btn--ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.dark .btn--ghost:hover{border-color:#fff}
.btn svg{flex:none}

/* ------------------------------------------------------------------- header */
.top{position:sticky; top:0; z-index:50; background:rgba(251,250,247,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.top__in{display:flex; align-items:center; gap:var(--s5); min-height:var(--nav-h)}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:none}
.brand__mark{
  inline-size:38px; block-size:38px; border-radius:9px; flex:none;
  background:var(--navy); color:var(--gold);
  display:grid; place-items:center;
  font-family:var(--font-h); font-weight:700; font-size:1.05rem; letter-spacing:-.03em;
}
.brand__txt{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-family:var(--font-h); font-weight:600; font-size:1rem; color:var(--ink); letter-spacing:-.02em}
.brand__sub{font-size:var(--t-micro); color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

.nav{margin-left:auto; display:flex; align-items:center; gap:var(--s5)}
.nav a{
  font-family:var(--font-h); font-size:var(--t-sm); font-weight:500;
  color:var(--body); text-decoration:none; padding-block:.4rem;
  border-bottom:2px solid transparent; transition:all var(--dur) var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--gold)}
.top .btn{padding:.6rem 1.15rem}
.burger{
  display:none; place-items:center; inline-size:42px; block-size:42px; margin-left:auto;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink);
}
@media (max-width:980px){
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    padding:var(--s3) 1.25rem var(--s5); display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding-block:.85rem; border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:grid}
  .top__in .btn{display:none}
}
/* --------------------------------------------------------------------- hero */
.hero{padding-block:var(--s10) var(--s9); position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:var(--s8); align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr; gap:var(--s7)}}
.hero h1{font-size:var(--t-display); letter-spacing:-.028em; max-width:22ch; line-height:1.12; text-wrap:balance}
.hero .lead{margin-top:1.15rem; max-width:40ch; color:#3C4A56}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.hero__note{
  margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.95rem; color:var(--muted); max-width:40ch; line-height:1.55;
}

/* A product mosaic built from the client's own photographs. This is the one
   thing a competitor's stock imagery cannot fake, so it leads. */
/* A stock index instead of a photo mosaic, and for a measured reason: every
   photograph the company supplied carries the supplier's own quantity overlay
   ("1x24", "Numark cosmetics") printed into the pixels. Those are useful on a
   catalogue card and wrong in a hero, and cropping will not remove them. So the
   hero carries the trade information a buyer scans for — how many lines in each
   category — and the photography does its work on the product grid below. */
.index{
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--sh2); overflow:hidden;
}
.index__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.index__title{font-family:var(--font-h); font-weight:600; color:var(--ink); font-size:var(--t-sm)}
.index__meta{font-size:var(--t-micro); color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.index__row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem;
  padding:.95rem 1.35rem; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background var(--dur) var(--ease);
}
.index__row:hover{background:var(--paper-2)}
.index__row:last-of-type{border-bottom:0}
.index__name{font-family:var(--font-h); font-size:.95rem; font-weight:500; color:var(--ink)}
.index__n{font-variant-numeric:tabular-nums; font-size:.95rem; font-weight:600; color:var(--gold-ink)}
.index__go{color:var(--line-strong); display:flex; transition:color var(--dur) var(--ease)}
.index__row:hover .index__go{color:var(--gold-ink)}
.index__foot{
  padding:.9rem 1.35rem; background:var(--navy); color:#C6D2DC;
  display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-xs);
}
.index__foot b{color:#fff; font-weight:600}

/* ------------------------------------------------------------------- stats */
.strip{border-block:1px solid var(--line); background:var(--paper-2)}
.strip__in{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); padding-block:var(--s6)}
@media (max-width:760px){.strip__in{grid-template-columns:repeat(2,1fr)}}
.stat__n{font-family:var(--font-h); font-size:clamp(1.5rem,1.2rem+.9vw,2rem); font-weight:600; color:var(--ink); line-height:1}
.stat__l{font-size:var(--t-xs); color:var(--muted); margin-top:.4rem; text-transform:uppercase; letter-spacing:.08em}

/* --------------------------------------------------------------- categories */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:start}
@media (max-width:900px){.cats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cats{grid-template-columns:1fr}}
.cat{
  display:flex; flex-direction:column; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat:hover{box-shadow:var(--sh2); border-color:var(--line-strong); transform:translateY(-2px)}
.cat__media{
  aspect-ratio:16/11; background:var(--paper-2); border-bottom:1px solid var(--line);
  display:grid; place-items:center; padding:1.1rem; overflow:hidden;
}
.cat__media img{
  max-inline-size:100%; max-block-size:100%; object-fit:contain;
  transition:transform 420ms var(--ease);
}
.cat:hover .cat__media img{transform:scale(1.04)}
.cat__body{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem;
}
.cat__name{font-family:var(--font-h); font-size:1rem; font-weight:600; color:var(--ink)}
.cat__meta{font-size:var(--t-xs); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.cat--first{grid-column:span 2}
@media (max-width:900px){.cat--first{grid-column:span 2}}
@media (max-width:560px){.cat--first{grid-column:span 1}}

/* ------------------------------------------------------------------ product */
.grid-p{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
@media (max-width:1080px){.grid-p{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-p{grid-template-columns:repeat(2,1fr)}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{box-shadow:var(--sh2); transform:translateY(-2px); border-color:var(--line-strong)}
.card__media{
  position:relative; background:var(--white); border-bottom:1px solid var(--line);
  aspect-ratio:1/1; overflow:hidden;
}
.card__media picture{display:block; inline-size:100%; block-size:100%}
.card__media img{inline-size:100%; block-size:100%; object-fit:contain; padding:.7rem}
.card__body{padding:var(--s4); display:flex; flex-direction:column; gap:.35rem; flex:1}
.card__brand{
  font-family:var(--font-h); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink);
}
.card__name{font-family:var(--font-h); font-size:var(--t-sm); font-weight:600; color:var(--ink); line-height:1.35}
.card__foot{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  margin-top:auto; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--muted);
}
.card__pack{color:var(--body)}
.card__carton{font-variant-numeric:tabular-nums; color:var(--gold-ink); font-weight:600}

/* filter bar */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:var(--s6)}
.chip{
  font-family:var(--font-h); font-size:var(--t-sm); font-weight:500;
  padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--body); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.count{margin-left:auto; font-size:var(--t-sm); color:var(--muted)}
.search{
  font-family:var(--font-b); font-size:var(--t-sm); padding:.55rem .9rem;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:#fff;
  color:var(--ink); min-inline-size:250px; flex:0 1 250px;
}
.search:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}

/* --------------------------------------------------------------- steps band */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6)}
@media (max-width:860px){.steps{grid-template-columns:1fr; gap:var(--s5)}}
.step{padding-top:var(--s4); border-top:2px solid var(--line-strong)}
.step__n{font-family:var(--font-h); font-size:var(--t-micro); font-weight:700; letter-spacing:.12em; color:var(--gold-ink)}
.step h3{margin-top:.4rem}
.step p{margin-top:.5rem; font-size:var(--t-sm); color:var(--body)}

/* ------------------------------------------------------- split media band */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:var(--s6)}}
.split--rev .split__media{order:2}
@media (max-width:900px){.split--rev .split__media{order:0}}
.split__media{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh2)}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* --------------------------------------------------------------- fact list */
.facts{display:grid; gap:0; border-top:1px solid rgba(255,255,255,.14)}
.fact{display:grid; grid-template-columns:11rem 1fr; gap:var(--s4); padding-block:var(--s4);
  border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:560px){.fact{grid-template-columns:1fr; gap:.2rem}}
.fact dt{font-family:var(--font-h); font-size:var(--t-xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold)}
.fact dd{margin:0; color:#C6D2DC; font-size:var(--t-sm)}

/* -------------------------------------------------------------------- cta */
.cta{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:var(--s8) var(--s7);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); align-items:center}
@media (max-width:760px){.cta{grid-template-columns:1fr; padding:var(--s6)}}
.cta h2{color:#fff; max-width:20ch}
.cta p{margin-top:.7rem; color:#B9C6D2; max-width:44ch}

/* ------------------------------------------------------------------ footer */
.foot{background:var(--navy); color:#AEBCC9; padding-block:var(--s8) var(--s5); margin-top:0}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:var(--s7)}
@media (max-width:800px){.foot__grid{grid-template-columns:1fr 1fr; gap:var(--s6)}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--font-h); font-size:var(--t-micro); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--s3)}
.foot a{color:#AEBCC9; text-decoration:none; font-size:var(--t-sm)}
.foot a:hover{color:#fff}
.foot li+li{margin-top:.55rem}
.foot__base{border-top:1px solid rgba(255,255,255,.12); margin-top:var(--s7); padding-top:var(--s4);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-size:var(--t-xs); color:#8494A6}

/* address block sits on the navy — gold is allowed here */
.addr{font-style:normal; font-size:var(--t-sm); line-height:1.7; color:#C6D2DC}

/* ------------------------------------------------------------ accessibility */
:focus-visible{outline:2px solid var(--gold-ink); outline-offset:2px}
.dark :focus-visible,.foot :focus-visible{outline-color:var(--gold)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:100; background:#fff; padding:.7rem 1rem; border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}