.f-grid{grid-template-columns:1.35fr 1fr 1fr 1fr 1fr}
@media(max-width:1080px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.f-grid{grid-template-columns:1fr}}
/* ==========================================================================
   MY-MOROCCAN ARTISANS — v4 "ATLAS NAVY"
   A light, contemporary marketplace surface with navy and brass.

   Direction change from v3 (dark night-green + saffron) to a paper-light
   canvas: white cards, hairline clay borders, generous air, and emerald
   reserved for action. Dark sections survive as punctuation, not as the
   default. Moroccan character comes from the horseshoe arch, the khatam
   star and real zellige tessellation — never from ornament for its own sake.

   Typography: Bricolage Grotesque (display) / Manrope (body) / Space Mono (data)
   ========================================================================== */

:root{
  /* surfaces */
  --paper:#FAFAF8;
  --paper-2:#F1F0EC;
  --card:#FFFFFF;
  --line:#E3E1D9;
  --line-2:#CFCCC0;

  /* ink */
  --ink:#171A20;
  --ink-70:rgba(23,26,32,.72);
  --ink-60:rgba(23,26,32,.58);
  --ink-40:rgba(23,26,32,.40);

  /* Fez glaze */
  --emerald:#1E4571;
  --emerald-d:#152E4D;
  --emerald-ink:#0E1F36;
  --amber:#A9803E;
  --amber-l:#D4B06A;
  --clay:#8F6A32;

  /* legacy token remap — every existing class keeps working */
  --night:#0E1F36;
  --night-2:#152E4D;
  --verdigris:#1E4571;
  --saffron:#A9803E;
  --saffron-soft:#D4B06A;
  --rose:#8F6A32;
  --chalk:#FAFAF8;
  --chalk-2:#F1F0EC;
  --pale:rgba(250,250,248,.72);
  --pale-30:rgba(250,250,248,.20);

  --r:16px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(23,26,32,.05);
  --shadow-lg:0 24px 50px -30px rgba(14,31,54,.45);

  --disp:'Bricolage Grotesque','Manrope',sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
}

body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62}

h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.032em;line-height:1.06;color:var(--ink)}
h1{font-weight:800}
em{font-style:normal;color:var(--emerald)}

.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);display:inline-flex;align-items:center;gap:9px}
.tag .dot{width:9px;height:9px;background:var(--amber);border-radius:0;
  clip-path:polygon(50% 0,62% 30%,92% 22%,78% 50%,92% 78%,62% 70%,50% 100%,38% 70%,8% 78%,22% 50%,8% 22%,38% 30%)}
.lede{color:var(--ink-70)}
.sub{color:var(--ink-60)}

/* ---------------- buttons ---------------- */
.btn{border-radius:999px;font-weight:700;font-size:14.5px;padding:14px 28px;letter-spacing:-.01em;
  box-shadow:none;transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--emerald);color:#fff;box-shadow:0 10px 24px -14px rgba(30,69,113,.9)}
.btn-gold:hover{background:var(--emerald-d)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--emerald)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--emerald);color:var(--emerald);background:rgba(30,69,113,.05)}
.btn-out{border-color:rgba(250,250,248,.32);color:var(--paper)}
.btn-out:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.btn-light{background:#fff;color:var(--emerald)}

/* ---------------- top chrome ---------------- */
.utility{background:var(--emerald-ink);color:rgba(250,250,248,.78);border-bottom:none}
.utility a:hover{color:var(--amber-l)}

.shopbar{background:var(--card);border-bottom:1px solid var(--line)}
.shopbar .wrap{height:82px}
.brand .nm{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.brand .sb{color:var(--amber);letter-spacing:.22em}
.shopbar .brand{color:var(--ink)}

.searchbox{border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);max-width:600px}
.searchbox select{background:transparent;border-right:1px solid var(--line-2);font-weight:700;color:var(--ink)}
.searchbox input{background:transparent;font-size:14.5px}
.searchbox button{background:var(--ink);color:var(--paper);font-weight:700}
.searchbox button:hover{background:var(--emerald)}

.act{color:var(--ink-60)}
.act:hover{background:var(--paper-2);color:var(--ink)}
.act .badge{background:var(--amber);color:#fff}

.quick{background:var(--card);border-bottom:1px solid var(--line);padding-bottom:14px}
.quick b{color:var(--ink-40)}
.quick a{color:var(--ink-60);border-color:var(--line)}
.quick a:hover{border-color:var(--emerald);color:var(--emerald);background:rgba(30,69,113,.04)}

header{background:rgba(250,250,248,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.links{background:transparent;border:none;padding:0;gap:6px}
.links a{color:var(--ink-70);font-weight:600;padding:9px 15px;border-radius:999px}
.links a:hover,.links a[aria-current]{background:var(--paper-2);color:var(--emerald)}
.megabtn{background:var(--ink);color:var(--paper);font-weight:700}
.megabtn:hover,.megabtn[aria-expanded="true"]{background:var(--emerald)}
.megabtn .bars i{background:var(--paper)}

.mega{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.mega-l{background:var(--emerald-ink)}
.mega-l button{color:rgba(250,250,248,.72)}
.mega-l button:hover,.mega-l button[aria-selected="true"]{background:rgba(250,250,248,.08);color:#fff;border-left-color:var(--amber)}
.mega-l button span.c{color:var(--amber)}
.mega-l .disc p{color:var(--amber)}
.mega-g h4{color:var(--emerald);border-bottom-color:var(--line)}
.mega-g a:hover{color:var(--emerald)}
.mega-foot{border-top-color:var(--line)}
.mega-foot .mono{color:var(--ink-40)}

/* ---------------- hero: now light ---------------- */
.hero{background:linear-gradient(168deg,var(--paper) 0%,var(--paper-2) 62%,#EDE5D6 100%);color:var(--ink);padding:52px 0 0}
.hero h1{color:var(--ink);font-size:clamp(32px,4.2vw,58px)}
.hero h1 em{color:var(--emerald)}
.hero .lede{color:var(--ink-70)}
.hero .tag{color:var(--emerald)!important}
.hero .glow{opacity:.16}
.hero .glow.a{background:radial-gradient(circle,#1E4571,transparent 66%)}
.hero .glow.b{background:radial-gradient(circle,#A9803E,transparent 62%);opacity:.14}
.hero .field{opacity:.3}
.hero .btn-out{border-color:var(--line-2);color:var(--ink)}
.hero .btn-out:hover{border-color:var(--emerald);color:var(--emerald)}

/* rotating star recoloured for the light field */
.starbox svg .ring-a path{stroke:var(--emerald)!important}
.starbox svg .ring-b circle{stroke:var(--amber)!important;opacity:.5}
.starbox svg .ring-c path{fill:var(--amber)!important}

/* arch triptych: dark anchors on the light hero */
.arch{background:linear-gradient(170deg,var(--emerald-d),var(--emerald-ink));border:1px solid rgba(14,31,54,.2);
  border-radius:120px 120px var(--r) var(--r);box-shadow:var(--shadow-lg)}
.arch:hover{border-color:var(--amber)}
.arch .cap h3{color:#fff}
.arch .cap p{color:rgba(250,250,248,.7)}
.arch .num{color:var(--amber)}

/* ---------------- sections ---------------- */
.sec{padding:92px 0}
.sec-head{margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.4vw,46px);margin-top:14px}
.rail{background:var(--ink);color:var(--paper)}
.rail b{font-family:var(--disp);font-weight:800;color:var(--amber)}
.rail span{color:rgba(250,250,248,.6)}

.trust{background:var(--card);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.trust svg{stroke:var(--emerald)}
.trust b{font-weight:700}

/* dark punctuation bands */
.dark,.band{background:var(--emerald-ink)}
.dark h2,.band h2{color:#fff}
.band .btn-gold{background:var(--amber);color:var(--ink)}
.band .btn-gold:hover{background:var(--amber-l)}
.dark .btn-gold{background:var(--amber);color:var(--ink)}

/* masthead: light, with a glaze wash */
.masthead{background:linear-gradient(168deg,var(--paper-2),#EAE1D0);color:var(--ink);padding:52px 0 66px;
  border-bottom:1px solid var(--line)}
.masthead h1{color:var(--ink);font-size:clamp(32px,4.4vw,58px)}
.masthead .lede{color:var(--ink-70)}
.masthead .crumb{color:var(--ink-40)}
.masthead .crumb a:hover{color:var(--emerald)}
.masthead .field{opacity:.26}
.masthead .glow{opacity:.14}
.masthead .btn-light{background:var(--emerald);color:#fff}
.masthead .btn-light:hover{background:var(--emerald-d)}
.masthead .btn-out{border-color:var(--line-2);color:var(--ink)}
.masthead .btn-out:hover{border-color:var(--emerald);color:var(--emerald)}
.masthead .tag{color:var(--emerald)!important}

/* ---------------- cards ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
a.card:hover,.card:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2);transform:translateY(-5px)}
.card h3{font-size:21px}
.card .idx{color:var(--amber);font-family:var(--mono)}
.card .foot{border-top-color:var(--line);color:var(--emerald)}
.card .foot .go{color:var(--amber)}
.card.accent{background:var(--emerald-ink);border-color:var(--emerald-ink)}
.card.accent h3{color:#fff}

.tile2{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);background:var(--card)}
.tile2 .im{border-radius:var(--r) var(--r) 0 0}
.tile2:hover{box-shadow:var(--shadow-lg)}
.tile2 span.s{color:var(--ink-40)}
.tile2 .arr{color:var(--emerald)}

/* product cards */
.pc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.pc:hover{border-color:var(--emerald);box-shadow:var(--shadow-lg)}
.pc .flag{background:var(--ink);color:var(--paper);font-family:var(--mono)}
.pc .fav{background:#fff;border-color:var(--line)}
.pc .fav svg{stroke:var(--ink-40)}
.pc:hover .fav svg{stroke:var(--clay)}
.pc h4{font-weight:700;letter-spacing:-.012em}
.pc .rt b{color:var(--amber)}
.pc .pr{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.pc .pr.q{font-family:var(--mono);color:var(--emerald)}
.pc .tier{background:var(--paper-2);color:var(--emerald);border-radius:8px}
.pc .mk{color:var(--ink-40)}
.pc .mk .tick{color:var(--emerald)}
.pc .add{background:var(--paper-2);color:var(--ink);border-radius:999px;font-weight:700}
.pc:hover .add{background:var(--emerald);color:#fff}

/* notes / audit lists */
.notes li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.notes li:hover{border-color:var(--emerald)}
.notes .k{background:rgba(30,69,113,.08);border-color:rgba(30,69,113,.2);color:var(--emerald);border-radius:10px}
.audit li{background:rgba(250,250,248,.06);border-color:rgba(250,250,248,.12);border-radius:var(--r-sm)}
.audit li:hover{border-color:var(--amber)}
.audit .k{background:rgba(169,128,62,.16);border-color:rgba(169,128,62,.36);color:var(--amber);border-radius:10px}

/* tables */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
table.tbl th{background:var(--ink);color:var(--amber);font-family:var(--mono)}
table.tbl td{border-bottom-color:var(--line)}
table.tbl tr:hover td{background:var(--paper-2)}
table.tbl td.m{color:var(--emerald)}

/* forms */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.panel-top{background:var(--ink);color:var(--paper)}
.panel-top .t{font-family:var(--disp);font-weight:800;letter-spacing:-.03em}
.panel-top .s{color:var(--amber)}
.f label{color:var(--emerald);font-family:var(--mono)}
.f input,.f select,.f textarea{border:1px solid var(--line-2);border-radius:10px;background:var(--paper)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--emerald);background:#fff}
.chip{border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-weight:600}
.chip:hover{border-color:var(--emerald);color:var(--emerald)}
.chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* shop layout */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.filters h4{color:var(--amber)}
.fgroup{border-top-color:var(--line)}
.fgroup input{accent-color:var(--emerald)}
.toolbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.toolbar .ct{color:var(--ink-40)}
.toolbar select{border-color:var(--line-2);border-radius:9px;background:var(--paper)}
.pager a{border-color:var(--line);color:var(--ink-40);border-radius:10px}
.pager a.on,.pager a:hover{background:var(--emerald);border-color:var(--emerald);color:#fff}
.rail-head{border-bottom:2px solid var(--ink)}
.rail-head h3{font-size:clamp(20px,2.2vw,28px)}
.rail-head .s{color:var(--ink-40)}
.rail-head a{color:var(--emerald)}

/* builder / misc */
.builder{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.builder-step{border-bottom-color:var(--line)}
.builder-step .st{color:var(--amber)}
.board{background:var(--paper-2)}
.slot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.slot .lbl{color:var(--emerald)}
.slot .act{color:var(--amber)}
.totals div{background:var(--ink)}
.totals b{color:var(--amber);font-family:var(--disp);font-weight:800}
.kv div{background:var(--paper-2);border-radius:var(--r-sm)}
.kv .k{color:var(--emerald)}
.res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.res:hover{border-color:var(--emerald)}
.res .doc{background:var(--emerald-ink);border-radius:6px}
.res .doc span{color:var(--amber)}
.res .meta{color:var(--emerald)}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.person .av{background:linear-gradient(150deg,var(--emerald),var(--emerald-ink))}
.person .role{color:var(--amber)}
.person .langs{color:var(--emerald);border-top-color:var(--line)}
.pull{border-left:3px solid var(--amber)}
.pull p{font-family:var(--disp);font-weight:700;letter-spacing:-.03em}
.pull cite{color:var(--emerald)}
.dark .pull cite{color:var(--amber)}
.palette{border:1px solid var(--line);border-radius:var(--r)}
.mapwrap{background:var(--emerald-ink);border-radius:var(--r);border:1px solid rgba(14,31,54,.3)}
.mapwrap .land{fill:#183456;stroke:#27517F}
.mapwrap .mk{fill:var(--amber)}
.mapwrap .mk-ring{stroke:var(--amber)}
.map-legend div{background:var(--emerald-d);border-color:rgba(250,250,248,.12)}
.map-legend b{color:var(--amber);font-family:var(--disp);font-weight:800}
.countries span{border-color:rgba(250,250,248,.2)}
.countries span b{color:var(--amber)}
.prod.more{background:var(--emerald-ink);border-color:var(--emerald-ink)}
.prod.more h3{font-family:var(--disp);font-weight:800}
.prose h2{font-family:var(--disp)}
.prose .updated{color:var(--emerald);border-bottom-color:var(--line)}
.step .n{font-family:var(--disp);font-weight:800;color:var(--line-2)}
.node .bead{background:var(--card);border-color:var(--line-2);color:var(--emerald);font-family:var(--mono)}
.node:hover .bead{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.node .when{color:var(--clay)}
.flow::before{background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 15px)}

/* ---------------- footer ---------------- */
footer{background:var(--emerald-ink);color:rgba(250,250,248,.7)}
footer .field{opacity:.14}
.f-cta{border-bottom-color:rgba(250,250,248,.14)}
.f-cta .btn-gold{background:var(--amber);color:var(--ink)}
.f-cta .btn-gold:hover{background:var(--amber-l)}
.f-grid h4{color:var(--amber);font-family:var(--mono)}
.f-brand .nm{color:#fff}
.f-bot{border-top-color:rgba(250,250,248,.14);font-family:var(--mono)}

/* ---------------- Moroccan pattern recolour ---------------- */
#zell g{stroke:#1E4571!important}
#zell-dim g{stroke:#E7DCC8!important}

/* ---------------- responsive ---------------- */
@media(max-width:1080px){.shopbar .wrap{height:auto}}
@media(max-width:720px){
  .sec{padding:62px 0}
  .hero{padding-top:32px}
  .masthead{padding:38px 0 48px}
}

/* --- v4 refinements --- */
.shopbar{padding-bottom:0}
.shopbar .wrap{height:80px}
.masthead{padding:44px 0 54px}
.masthead h1{max-width:15ch}
.nav{height:58px!important}
.hero .lede{max-width:46ch}

/* --- nav fits seven items --- */
.links a{padding:9px 12px;font-size:13.5px;white-space:nowrap}
.nav{gap:16px}
.megabtn{white-space:nowrap;padding:11px 15px;font-size:13.5px}
.nav-right .btn{white-space:nowrap;padding:13px 22px;font-size:14px}
@media(max-width:1240px){.links a{padding:9px 9px;font-size:13px}}