/* ============================================================================
   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}
.top__tel{
  font-family:var(--font-h); font-size:var(--t-sm); font-weight:600;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.top__tel:hover{color:var(--gold-ink)}
.nav__tel{display:none}
.foot__tel{
  display:inline-block; margin-top:.9rem;
  font-family:var(--font-h); font-size:1.05rem; font-weight:600;
  color:#fff; text-decoration:none; font-variant-numeric:tabular-nums;
}
.foot__tel:hover{color:var(--gold)}
.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}
  /* No room beside the brand and the menu button, so the number moves into
     the drawer instead of being dropped. */
  .top__tel{display:none}
  .nav__tel{display:block; font-weight:600; color:var(--ink)}
  }
/* --------------------------------------------------------------------- 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 */
/* stretch, not start: the wide first tile sets the row height, and the narrow
   one beside it has to grow to meet it or it leaves a hole underneath. */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:stretch}
@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)}
/* The first tile spans two columns and is twice the height of the one beside
   it. The grid stretches both to the same height so the row finishes level;
   the media area takes the leftover space and the photograph crops to suit.

   The picture is taken out of flow deliberately. When it sat in flow, the
   image's own height fed back into the tile height, and the tile grew to the
   photograph instead of the photograph filling the tile - a 550px tile became
   1100px. Absolute positioning against a fixed aspect-ratio box breaks that. */
.cat__media{
  position:relative; aspect-ratio:16/11;
  flex:1 1 auto; min-block-size:0;
  background:var(--paper-2); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.cat__media picture{position:absolute; inset:0; display:block}
.cat__media img{
  display:block; inline-size:100%; block-size:100%;
  object-fit:cover; object-position:center;
  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)}

/* This site's CSP is style-src 'self', which blocks style="" attributes
   outright - they are parsed and then ignored. Anything the markup needs has
   to exist as a class here, or it silently does not render. These carry what
   the contact panel used to request inline. */
.panel-navy{
  background:var(--navy); border-radius:var(--r-md);
  padding:var(--s6); color:#D8E0E8;
}
.panel-navy h2{color:#fff; margin-bottom:1rem}
.facts--flush{border-top:0}
.fact--first{border-top:1px solid rgba(255,255,255,.14)}
.link-light{color:#fff; text-decoration:underline; text-underline-offset:2px}
.link-light:hover{color:var(--gold)}
.panel-navy__actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem}
.panel-navy__note{color:#AEBCC9; font-size:var(--t-sm); margin-top:1rem}
.btn--ghost-light{color:#fff; border-color:rgba(255,255,255,.3)}

/* -------------------------------------------------------------------- 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}
}