@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..800&family=Inter:wght@400;500;600;700;800;900&display=swap');
   CANZIZ — Moroccan Artisan Trade Marketplace
   Amazon/Alibaba/Etsy-class layout · Moroccan touch
   Primary: souk terracotta #D4551A · Assurance teal #0E7A6C
   Font: Inter
   ================================================================ */
:root{
  --pri:#D4551A;          /* souk terracotta (Etsy/Alibaba orange family) */
  --pri-d:#B03F0C;
  --pri-t:#FDEFE6;
  --teal:#0E7A6C;         /* zellige teal — assurance/verified */
  --teal-t:#E6F4F2;
  --gold:#E8A93C;         /* stars */
  --ink:#20242C;
  --sub:#5F6470;
  --bg:#F6F4EF;           /* warm marketplace canvas */
  --card:#FFFFFF;
  --line:#E5E1D8;
  --line-2:#EFECE4;
  --night:#1E1B16;        /* footer */
  --r:10px;
  --shadow:0 1px 2px rgba(30,27,22,.06),0 3px 10px rgba(30,27,22,.06);
  --shadow-h:0 8px 26px rgba(30,27,22,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;font-size:14.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--pri);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pri);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-weight:800;line-height:1.2;letter-spacing:-.015em}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* zellige star pattern band */
.zpat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='1.1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- utility topbar ---------- */
.topbar{background:var(--night);color:rgba(255,255,255,.78);font-size:1.216rem;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topbar b{color:#F0B27A;font-weight:700}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .r{display:flex;gap:16px}

/* ---------- main header: logo + scoped search + actions ---------- */
header.site{background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:22px;min-height:76px}
.logo{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}
.logo b{font-size:2.4rem;font-weight:900;letter-spacing:-.03em;color:var(--pri)}
.logo b .star{color:var(--teal)}
.logo small{font-size:0.992rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sub)}
.msearch{flex:1;display:flex;max-width:640px;border:2px solid var(--pri);border-radius:999px;overflow:hidden;background:#fff}
.msearch select{border:none;background:var(--pri-t);padding:0 14px;font:inherit;font-size:1.312rem;font-weight:600;color:var(--ink);border-right:1px solid var(--line);max-width:150px}
.msearch input{flex:1;border:none;padding:12px 16px;font:inherit;font-size:1.44rem}
.msearch input:focus,.msearch select:focus{outline:none}
.msearch button{border:none;background:var(--pri);color:#fff;padding:0 26px;font-weight:800;font-size:1.44rem;transition:background .15s}
.msearch button:hover{background:var(--pri-d)}
.hacts{display:flex;gap:20px;align-items:center}
.hact{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:1.088rem;font-weight:600;color:var(--sub);position:relative}
.hact .ic{font-size:1.92rem;color:var(--ink)}
.hact:hover .ic,.hact:hover{color:var(--pri)}
.hact .n{position:absolute;top:-5px;right:-4px;background:var(--pri);color:#fff;font-size:0.992rem;font-weight:800;min-width:17px;height:17px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------- category nav bar ---------- */
.catnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
.catnav .wrap{display:flex;align-items:center;gap:4px;min-height:48px}
.allcats{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.408rem;padding:12px 16px 12px 0;margin-right:8px;border-right:1px solid var(--line-2);position:relative}
.allcats .burger{display:inline-flex;flex-direction:column;gap:3px}
.allcats .burger i{width:16px;height:2px;background:var(--ink);border-radius:2px}
.catnav a.top{font-size:1.376rem;font-weight:600;padding:12px 12px;border-radius:8px;color:#3A3F49;position:relative}
.catnav a.top:hover{background:var(--pri-t);color:var(--pri)}
.catnav a.top[aria-current="page"]{color:var(--pri);background:var(--pri-t)}
.catnav .tag{font-size:0.96rem;font-weight:800;color:#fff;background:var(--pri);border-radius:4px;padding:2px 5px;margin-left:5px;vertical-align:2px}
.catnav .tag.teal{background:var(--teal)}
.catnav .right{margin-left:auto;display:flex;gap:4px}

/* mega menu */
.mega{position:relative}
.mega .panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:var(--shadow-h);padding:26px 30px;display:none;z-index:90;min-width:760px;grid-template-columns:repeat(4,1fr);gap:8px 34px}
.mega:hover .panel,.mega:focus-within .panel{display:grid}
.mega .panel h5{font-size:1.152rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pri);margin:10px 0 8px;grid-column:auto}
.mega .panel a{display:block;font-size:1.344rem;color:#3A3F49;padding:4px 0}
.mega .panel a:hover{color:var(--pri);text-decoration:underline}
.mega .col{min-width:150px}

/* ---------- HOME hero: sidebar + banner + rfq card ---------- */
.heroband{padding:16px 0 8px}
.herogrid{display:grid;grid-template-columns:240px 1fr 270px;gap:14px;align-items:stretch}
.sidecats{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 0;font-size:1.376rem}
.sidecats h4{font-size:1.248rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);padding:10px 16px 8px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.sidecats a{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;color:#3A3F49}
.sidecats a:hover{background:var(--pri-t);color:var(--pri)}
.sidecats a .ar{color:var(--sub);font-size:1.12rem}
.banner{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(115deg,#8C2F0B 0%,#C24A12 55%,#E8A93C 130%);color:#fff;display:flex;align-items:center;min-height:340px}
.banner .pat{position:absolute;inset:0}
.banner .bimg{position:absolute;right:-20px;bottom:-30px;width:46%;max-width:360px;opacity:.96;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));transform:rotate(4deg)}
.banner .btxt{position:relative;z-index:2;padding:40px 44px;max-width:56%}
.banner .k{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;font-size:1.152rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.banner h1{font-size:clamp(2.56rem,3vw,3.84rem);margin-bottom:10px;letter-spacing:-.02em}
.banner p{font-size:1.52rem;color:rgba(255,255,255,.92);margin-bottom:20px;max-width:54.4rem}
.banner .row{display:flex;gap:10px;flex-wrap:wrap}
.rfqcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.rfqcard h3{font-size:1.6rem}
.rfqcard p{font-size:1.28rem;color:var(--sub)}
.rfqcard input,.rfqcard select{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:1.344rem}
.rfqcard .qty{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.rfqcard .note{font-size:1.152rem;color:var(--teal);font-weight:600}
.rfqcard .note::before{content:"✓ "}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;font-size:1.408rem;transition:.15s}
.btn-pri{background:var(--pri);color:#fff}
.btn-pri:hover{background:var(--pri-d)}
.btn-white{background:#fff;color:var(--pri)}
.btn-white:hover{background:var(--ink);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--pri-d)}
.btn-line{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#0A5F54}

/* ---------- assurance / service strip ---------- */
.assure-strip{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0}
.assure-strip .cell{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-right:1px solid var(--line-2);font-size:1.28rem;color:var(--sub)}
.assure-strip .cell:last-child{border-right:none}
.assure-strip .ic{width:34px;height:34px;flex:none;border-radius:50% 50% 8px 8px/42% 42% 8px 8px;background:var(--teal-t);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800}
.assure-strip b{display:block;color:var(--ink);font-size:1.376rem}

/* ---------- sections & rails ---------- */
section{padding:26px 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.shead h2{font-size:2.08rem}
.shead p{font-size:1.36rem;color:var(--sub);margin-top:3px}
.shead .see{font-size:1.36rem;font-weight:700;color:var(--pri);white-space:nowrap}
.shead .see:hover{text-decoration:underline}

/* product card — Alibaba/Amazon anatomy */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pgrid.five{grid-template-columns:repeat(5,1fr)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s;position:relative}
.pcard:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.pcard .media{aspect-ratio:1/1;background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line-2)}
.pcard .media img{width:100%;height:100%;object-fit:cover}
.pcard .flag{position:absolute;top:8px;left:8px;background:var(--pri);color:#fff;font-size:0.992rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:5px;z-index:2}
.pcard .flag.teal{background:var(--teal)}
.pcard .fav{position:absolute;top:8px;right:8px;width:30px;height:30px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);font-size:1.36rem;z-index:2}
.pcard .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard h3{font-size:1.36rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pcard h3 a:hover{color:var(--pri)}
.pcard .price{font-size:1.632rem;font-weight:800}
.pcard .price small{font-size:1.152rem;color:var(--sub);font-weight:500}
.pcard .moq{font-size:1.184rem;color:var(--sub)}
.pcard .moq b{color:var(--ink)}
.pcard .orig{display:flex;align-items:center;gap:6px;font-size:1.152rem;color:var(--sub);margin-top:auto;padding-top:6px;border-top:1px dashed var(--line-2)}
.pcard .orig .v{color:var(--teal);font-weight:700}
.pcard .stars{color:var(--gold);font-size:1.12rem;letter-spacing:1px}
.pcard .stars .n{color:var(--sub);letter-spacing:0}

/* category tiles (AliExpress grid) */
.ctiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ctile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center;transition:.15s}
.ctile:hover{box-shadow:var(--shadow-h);border-color:var(--pri)}
.ctile .im{aspect-ratio:1/1;border-radius:50% 50% 12px 12px/42% 42% 12px 12px;overflow:hidden;margin-bottom:9px;background:var(--pri-t)}
.ctile .im img{width:100%;height:100%;object-fit:cover}
.ctile b{font-size:1.248rem;font-weight:700;display:block}
.ctile small{font-size:1.088rem;color:var(--sub)}

/* dual promo banners */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.promo2{position:relative;border-radius:var(--r);overflow:hidden;min-height:190px;display:flex;align-items:center;color:#fff}
.promo2 .bg{position:absolute;inset:0}
.promo2 .bg img{width:100%;height:100%;object-fit:cover}
.promo2 .sh{position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,27,22,.85) 20%,rgba(30,27,22,.25) 75%)}
.promo2 .t{position:relative;z-index:2;padding:26px 28px;max-width:70%}
.promo2 .k{font-size:1.088rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F0B27A}
.promo2 h3{font-size:2rem;margin:7px 0 6px}
.promo2 p{font-size:1.312rem;color:rgba(255,255,255,.85);margin-bottom:14px}

/* RFQ band (Alibaba style) */
.rfqband{background:linear-gradient(115deg,#0A5F54,#0E7A6C);border-radius:14px;color:#fff;overflow:hidden;position:relative}
.rfqband .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;padding:36px 40px;align-items:center}
.rfqband h2{font-size:2.4rem;margin-bottom:8px}
.rfqband p{font-size:1.44rem;color:rgba(255,255,255,.88);margin-bottom:16px}
.rfqband .feat{display:flex;gap:22px;flex-wrap:wrap;font-size:1.28rem}
.rfqband .feat b{display:block;font-size:2rem}
.rfqband form{background:#fff;border-radius:12px;padding:20px;display:grid;gap:10px;color:var(--ink)}
.rfqband form h3{font-size:1.52rem}
.rfqband input,.rfqband select,.rfqband textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:1.344rem}
.rfqband textarea{min-height:64px;resize:vertical}
.rfqband .two{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}

/* makers (Etsy touch) */
.makers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.maker{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.maker .im{aspect-ratio:16/10;overflow:hidden}
.maker .im img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.maker:hover .im img{transform:scale(1.05)}
.maker .b{padding:13px 15px}
.maker .b b{font-size:1.44rem;display:flex;align-items:center;gap:6px}
.maker .b b .v{color:var(--teal);font-size:1.248rem}
.maker .b small{color:var(--sub);font-size:1.216rem;display:block;margin-top:2px}
.maker .b .tagrow{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.maker .b .tg{font-size:1.056rem;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 9px;color:var(--sub)}

/* region strip */
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.region{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/2.6;color:#fff;display:flex;align-items:flex-end}
.region .bg{position:absolute;inset:0}
.region .bg img{width:100%;height:100%;object-fit:cover}
.region .sh{position:absolute;inset:0;background:linear-gradient(184deg,rgba(30,27,22,0) 35%,rgba(30,27,22,.85))}
.region .t{position:relative;padding:14px 16px}
.region b{font-size:1.6rem}
.region small{display:block;font-size:1.152rem;color:rgba(255,255,255,.8)}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-align:center}
.stat b{font-size:2.4rem;font-weight:900;color:var(--pri);display:block}
.stat small{font-size:1.216rem;color:var(--sub)}

/* ---------- listing page ---------- */
.crumbs{font-size:1.216rem;color:var(--sub);padding:12px 0}
.crumbs a:hover{color:var(--pri);text-decoration:underline}
.listing{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:1.344rem;position:sticky;top:64px}
.filters h3{font-size:1.44rem;margin-bottom:2px}
.fgroup{padding:12px 0;border-top:1px solid var(--line-2)}
.fgroup:first-of-type{border-top:none}
.fgroup b{display:block;font-size:1.28rem;margin-bottom:8px}
.fopt{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--sub);cursor:pointer;font-size:1.312rem}
.fopt input{width:15px;height:15px;accent-color:var(--pri)}
.fopt:hover{color:var(--ink)}
.sortrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
.sortrow .count{font-size:1.312rem;color:var(--sub)}
.sortrow select{border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:1.28rem;font-weight:600;background:#fff}

/* ---------- product page (Alibaba) ---------- */
.pdp{display:grid;grid-template-columns:430px 1fr 280px;gap:26px;align-items:start}
.pgal .main{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;aspect-ratio:1/1}
.pgal .main img{width:100%;height:100%;object-fit:cover}
.pgal .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.pgal .thumbs .th{border:1.5px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:#fff}
.pgal .thumbs .th.on{border-color:var(--pri)}
.pgal .thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo h1{font-size:2rem;line-height:1.35;font-weight:700;margin-bottom:8px}
.pinfo .meta{display:flex;gap:14px;align-items:center;font-size:1.28rem;color:var(--sub);flex-wrap:wrap;margin-bottom:14px}
.pinfo .meta .v{color:var(--teal);font-weight:700}
.tiers{background:var(--pri-t);border:1px solid #F2D9C6;border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.tiers .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiers .t small{display:block;font-size:1.152rem;color:var(--sub)}
.tiers .t b{font-size:1.84rem;font-weight:900}
.tiers .t b em{font-style:normal;font-size:1.12rem;color:var(--sub);font-weight:500}
.tiers .note{font-size:1.152rem;color:var(--sub);margin-top:10px}
.spects{width:100%;border-collapse:collapse;font-size:1.312rem;margin-bottom:14px}
.spects td{padding:8px 10px;border-bottom:1px solid var(--line-2)}
.spects td:first-child{color:var(--sub);width:38%}
.custrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.custrow .c{border:1.5px solid var(--line);border-radius:8px;padding:7px 13px;font-size:1.248rem;font-weight:600;background:#fff}
.custrow .c.on{border-color:var(--pri);color:var(--pri);background:var(--pri-t)}
.pbuy{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:64px}
.pbuy .sline{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.pbuy .slogo{width:42px;height:42px;border-radius:50% 50% 9px 9px/42% 42% 9px 9px;background:var(--teal-t);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:900}
.pbuy .sline b{font-size:1.376rem;display:block}
.pbuy .sline small{font-size:1.152rem;color:var(--sub)}
.pbuy .trust{font-size:1.216rem;color:var(--sub);display:grid;gap:7px;margin:12px 0}
.pbuy .trust span::before{content:"✓ ";color:var(--teal);font-weight:800}
.pbuy .btn{width:100%;margin-top:8px}
.qtyrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.qtyrow input,.qtyrow select{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px;font:inherit;font-size:1.344rem}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin:30px 0 18px}
.tab{padding:11px 18px;font-weight:700;font-size:1.408rem;color:var(--sub);border-bottom:2.5px solid transparent;margin-bottom:-2px;background:none;border-top:none;border-left:none;border-right:none}
.tab.on{color:var(--pri);border-bottom-color:var(--pri)}
.prose p{font-size:1.44rem;color:#3A3F49;line-height:1.75;margin-bottom:12px;max-width:96rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:50% 50% 7px 7px/42% 42% 7px 7px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.36rem;margin-bottom:10px}
.step h3{font-size:1.44rem;margin-bottom:5px}
.step p{font-size:1.248rem;color:var(--sub);line-height:1.55}

/* forms */
form.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;display:grid;gap:14px;box-shadow:var(--shadow)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-size:1.216rem;font-weight:700;display:block;margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;font:inherit;font-size:1.376rem;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--pri)}
textarea{min-height:110px;resize:vertical}
.upload{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;font-size:1.312rem;color:var(--sub);background:var(--bg)}

/* quote cards */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;font-size:1.36rem}
.quote-card .stars{color:var(--gold);letter-spacing:2px;font-size:1.248rem;margin-bottom:8px;display:block}
.quote-card p{color:#3A3F49;line-height:1.65}
.quote-card b{display:block;margin-top:10px;font-size:1.344rem}
.quote-card small{color:var(--sub);font-size:1.184rem}

/* page hero (inner) */
.phero{background:linear-gradient(115deg,#8C2F0B,#C24A12);color:#fff;padding:34px 0;position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.24rem,3vw,3.2rem)}
.phero p{margin-top:8px;max-width:73.6rem;color:rgba(255,255,255,.9);font-size:1.472rem}
.phero .crumbs{color:rgba(255,255,255,.8);padding:0 0 10px}

/* footer */
footer{background:var(--night);color:rgba(255,255,255,.66);font-size:1.344rem;margin-top:30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:30px;padding:40px 0}
footer h4{color:#fff;font-size:1.376rem;margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:7px}
footer a:hover{color:#F0B27A;text-decoration:underline}
.fbadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fbadges span{border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:5px 10px;font-size:1.12rem}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:1.216rem;color:rgba(255,255,255,.45)}

/* reveal */
.rv{transition:opacity .45s,transform .45s}/* MMA 2026-08-08: initial hidden state removed so in-viewport content is not blank before scroll; homepage animation still supplied by mma-home.css (.cms-index-index .column.main .rv) */
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.05s}.rv.d2{transition-delay:.1s}.rv.d3{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}

@media (max-width:1100px){
  .herogrid{grid-template-columns:1fr 270px}
  .sidecats{display:none}
  .pgrid,.pgrid.five{grid-template-columns:repeat(3,1fr)}
  .ctiles{grid-template-columns:repeat(4,1fr)}
  .makers,.regions,.stats,.assure-strip{grid-template-columns:repeat(2,1fr)}
  .assure-strip .cell{border-bottom:1px solid var(--line-2)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr 1fr}
  .pbuy{grid-column:1/-1;position:static}
  .listing{grid-template-columns:1fr}
  .filters{position:static}
  .mega .panel{display:none!important}
  .msearch select{display:none}
}
@media (max-width:700px){
  .herogrid{grid-template-columns:1fr}
  .rfqcard{display:none}
  .banner .btxt{max-width:100%}
  .banner .bimg{display:none}
  .pgrid,.pgrid.five,.duo,.rfqband .inner,.pdp{grid-template-columns:1fr}
  .ctiles{grid-template-columns:repeat(3,1fr)}
  .makers,.regions,.stats,.assure-strip,.f-row,.steps{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .catnav .right,.hacts .hide-m{display:none}
  header.site .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .msearch{order:3;min-width:100%}
}

/* ================================================================
   LOVELY EDITION — same content, softer & warmer visual language
   Coral sunset primary · sage emerald trust · pastel accents
   ================================================================ */
:root{
  --pri:#DE5A38;
  --pri-d:#BC4322;
  --pri-t:#FDEEE7;
  --pri-grad:linear-gradient(120deg,#F08A5D 0%,#DE5A38 55%,#C13F20 100%);
  --teal:#2A9D8A;
  --teal-t:#E7F6F2;
  --teal-grad:linear-gradient(120deg,#35B39E,#1E7F6E);
  --gold:#F2B44D;
  --bg:#FAF5EE;
  --line:#EEE2D3;
  --line-2:#F5EDE2;
  --night:#2B1B14;
  --shadow:0 1px 2px rgba(43,27,20,.05),0 4px 14px rgba(43,27,20,.06);
  --shadow-h:0 10px 30px rgba(43,27,20,.14);
}
body{background:var(--bg)}

/* softer radii everywhere */
.pcard,.ctile,.maker,.stat,.quote-card,.sidecats,.rfqcard,.assure-strip,.filters,.sortrow,.pbuy,form.panel,.step,.promo2,.region{border-radius:16px}
.banner,.rfqband{border-radius:22px}
.pgal .main{border-radius:16px}

/* gradient primary actions with soft glow */
.btn-pri,.msearch button,.catnav .tag{background:var(--pri-grad)}
.btn-pri,.msearch button{box-shadow:0 8px 20px -8px rgba(222,90,56,.55)}
.btn-pri:hover,.msearch button:hover{background:var(--pri-grad);filter:brightness(1.07);transform:translateY(-1px)}
.btn-teal,.catnav .tag.teal{background:var(--teal-grad)}
.btn-teal:hover{background:var(--teal-grad);filter:brightness(1.07)}
.btn{transition:.2s}
.msearch{border-color:#EFB49B;box-shadow:0 4px 16px -8px rgba(222,90,56,.25)}
.msearch select{background:var(--pri-t)}

/* lovely sunset hero */
.banner{background:linear-gradient(118deg,#8A2B1A 0%,#C64A26 40%,#E8804C 78%,#F2B44D 115%)}
.banner .k{background:rgba(255,255,255,.18)}
.rfqcard{border-top:4px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--pri-grad) border-box;border:1px solid var(--line);border-top:4px solid transparent}
.rfqcard h3{color:var(--pri-d)}

/* pastel category tiles — rotating lovely hues */
.ctile .im{border-radius:50% 50% 14px 14px/44% 44% 14px 14px}
.ctile:nth-child(6n+1) .im{background:#FDE8DC}
.ctile:nth-child(6n+2) .im{background:#E7F6EF}
.ctile:nth-child(6n+3) .im{background:#EAF1FB}
.ctile:nth-child(6n+4) .im{background:#F6ECFA}
.ctile:nth-child(6n+5) .im{background:#FBF3D9}
.ctile:nth-child(6n+6) .im{background:#FDEAEE}
.ctile:hover{border-color:#EFB49B;box-shadow:var(--shadow-h);transform:translateY(-3px)}
.ctile{transition:.2s}
.ctile small{color:var(--pri);font-weight:700}

/* assurance icons in rotating pastels */
.assure-strip .cell:nth-child(1) .ic{background:#FDE8DC;color:#C64A26}
.assure-strip .cell:nth-child(2) .ic{background:#E7F6EF;color:#1E7F6E}
.assure-strip .cell:nth-child(3) .ic{background:#EAF1FB;color:#3A6FB8}
.assure-strip .cell:nth-child(4) .ic{background:#FBF3D9;color:#B98514}

/* product cards — gentle & warm */
.pcard{border-color:var(--line)}
.pcard:hover{transform:translateY(-4px);border-color:#EFB49B}
.pcard .price{color:var(--pri-d)}
.pcard .flag{background:var(--pri-grad);border-radius:99px;padding:4px 10px}
.pcard .flag.teal{background:var(--teal-grad)}
.pcard .fav:hover{color:var(--pri)}
.pcard .stars{color:var(--gold)}

/* stats — gradient numbers */
.stat b{background:var(--pri-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat:nth-child(even) b{background:var(--teal-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* tiers & pdp warmth */
.tiers{background:linear-gradient(120deg,#FDEEE7,#FBF3D9);border-color:#F2D9C6;border-radius:14px}
.tiers .t b{color:var(--pri-d)}
.custrow .c{border-radius:99px}
.custrow .c.on{background:var(--pri-t);border-color:var(--pri)}
.pbuy .slogo{background:var(--teal-grad);color:#fff}
.tab.on{color:var(--pri);border-bottom-color:var(--pri)}

/* RFQ band — lovely emerald */
.rfqband{background:linear-gradient(118deg,#14685A 0%,#2A9D8A 70%,#7CCBB8 120%)}
.rfqband form{border-radius:16px}

/* promos & page heroes — sunset family */
.phero{background:linear-gradient(118deg,#8A2B1A 0%,#C64A26 55%,#E8804C 100%)}
.promo2 .sh{background:linear-gradient(100deg,rgba(43,27,20,.86) 22%,rgba(43,27,20,.2) 78%)}
.promo2 .k{color:#F8C99B}

/* makers & regions */
.maker:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.maker{transition:.2s}
.maker .b .v{color:var(--teal)}
.maker .b .tg{background:var(--pri-t);border-color:#F2D9C6;color:#A85433;border-radius:99px}
.region .sh{background:linear-gradient(184deg,rgba(43,27,20,0) 35%,rgba(43,27,20,.85))}

/* header & nav — warm cream, coral accents */
header.site,.catnav{background:#FFFDF9}
.catnav a.top:hover{background:var(--pri-t);color:var(--pri)}
.allcats:hover{color:var(--pri)}
.allcats:hover .burger i{background:var(--pri)}
.mega .panel{border-radius:0 0 18px 18px;border-color:var(--line)}
.mega .panel h5{color:var(--pri)}
.hact .n{background:var(--pri-grad)}
.topbar{background:var(--night)}
.topbar b{color:#F4B393}

/* footer — warm cocoa with peach */
footer{background:var(--night)}
footer a:hover{color:#F4B393}
.fbot{color:rgba(255,255,255,.4)}
.fbadges span{border-radius:99px}

/* steps — pastel numbered */
.step::before{background:var(--pri-grad);border-radius:50%}
.step:nth-child(even)::before{background:var(--teal-grad)}

/* inputs */
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(222,90,56,.12)}
.upload{border-radius:14px;border-color:#EFB49B;background:var(--pri-t);color:#A85433}

/* quote card */
.quote-card{border-left:4px solid var(--gold)}

/* ================= MENU PRO ================= */
header.site{box-shadow:0 1px 0 var(--line)}
.catnav{box-shadow:0 6px 18px -14px rgba(43,27,20,.25)}
.catnav .wrap{gap:2px;min-height:52px}
.allcats{background:var(--pri-grad);color:#fff;border-radius:999px;padding:10px 18px;margin-right:10px;border-right:none;box-shadow:0 6px 16px -8px rgba(222,90,56,.6);cursor:pointer;transition:.2s}
.allcats:hover{filter:brightness(1.07);color:#fff;transform:translateY(-1px)}
.allcats .burger i{background:#fff!important}
.allcats .ch{margin-left:2px}
.catnav a.top{padding:14px 13px;border-radius:0;position:relative;font-weight:700;color:#463A33}
.catnav a.top::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2.5px;border-radius:3px;background:var(--pri-grad);transform:scaleX(0);transition:transform .2s}
.catnav a.top:hover{background:none;color:var(--pri)}
.catnav a.top:hover::after,.catnav a.top[aria-current="page"]::after{transform:scaleX(1)}
.catnav a.top[aria-current="page"]{background:none;color:var(--pri)}
.ch{display:inline-block;font-size:0.928rem;opacity:.5;margin-left:4px;transition:transform .22s;vertical-align:1px}
.mega:hover .ch{transform:rotate(180deg)}
.rfqbtn{background:linear-gradient(#fff,#fff) padding-box,var(--pri-grad) border-box;border:2px solid transparent;color:var(--pri);font-weight:800;font-size:1.376rem;border-radius:999px;padding:9px 18px;transition:.2s}
.rfqbtn:hover{background:var(--pri-grad);color:#fff;box-shadow:0 6px 16px -8px rgba(222,90,56,.6)}

/* animated panels */
.mega .panel{display:grid;visibility:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;grid-template-columns:repeat(3,1fr) 220px;gap:6px 30px;min-width:820px;padding:26px 28px;border:1px solid var(--line);border-radius:0 0 20px 20px;box-shadow:0 24px 50px -18px rgba(43,27,20,.28);background:#FFFDF9}
.mega .panel.wide{grid-template-columns:repeat(4,1fr) 220px;min-width:1020px}
.mega:hover .panel,.mega:focus-within .panel{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
.mega .panel h5{margin:12px 0 7px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}
.mega .panel h5:first-child{margin-top:0}
.mega .panel a{padding:5px 0;font-size:1.344rem;color:#5A4C42;transition:.12s}
.mega .panel a:hover{color:var(--pri);text-decoration:none;padding-left:5px}

/* featured card inside panel */
.mega .feat{display:flex!important;flex-direction:column;gap:6px;background:var(--pri-t);border:1px solid #F2D9C6;border-radius:16px;padding:12px!important;grid-row:1/span 6;align-self:start}
.mega .feat:hover{padding-left:12px!important;box-shadow:var(--shadow-h);transform:translateY(-2px)}
.mega .feat .fim{aspect-ratio:4/3;border-radius:12px;overflow:hidden;display:block}
.mega .feat .fim img{width:100%;height:100%;object-fit:cover}
.mega .feat b{font-size:1.376rem;color:var(--ink)}
.mega .feat small{font-size:1.184rem;color:#A85433;line-height:1.4}
.mega .feat .go{font-size:1.248rem;font-weight:800;color:var(--pri)}

@media (max-width:1100px){.rfqbtn{display:none}}

/* ================= topbar language stores + rebrand logo ================= */
.topbar .r{align-items:center}
.langs{display:inline-flex;gap:5px;align-items:center;padding-right:14px;margin-right:2px;border-right:1px solid rgba(255,255,255,.18)}
.langs img{width:19px;height:13px;border-radius:2.5px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:transform .15s}
.langs a:hover img{transform:scale(1.25);box-shadow:0 0 0 1.5px #F0B27A}
.logo b{font-size:1.824rem;font-weight:900;white-space:nowrap}
.logo b .am{color:var(--teal)}
.logo small{letter-spacing:.14em;font-size:0.928rem}
@media (max-width:900px){.langs a:nth-child(n+7){display:none}}

/* ================================================================
   DESIGN-PLATFORM LAYER — Material Bank / 1stDibs class additions
   ================================================================ */
/* 15 · split hero with cinematic montage */
.hero2{background:linear-gradient(118deg,#2B1B14 0%,#57281A 60%,#8A2B1A 110%);color:#fff;position:relative;overflow:hidden}
.hero2 .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:52px 0}
.hero2 .k{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 16px;font-size:1.152rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#F8C99B;margin-bottom:16px}
.hero2 h1{font-size:clamp(3.04rem,3.8vw,4.8rem);letter-spacing:-.025em;margin-bottom:12px}
.hero2 h1 em{font-style:normal;background:linear-gradient(120deg,#F8C99B,#F2B44D);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 p{font-size:1.6rem;color:rgba(255,255,255,.85);max-width:51.2rem;margin-bottom:22px;line-height:1.65}
.hero2 .row{display:flex;gap:12px;flex-wrap:wrap}
.montage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:12px}
.montage .m{border-radius:16px;overflow:hidden;position:relative;box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
.montage .m img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.montage .m:hover img{transform:scale(1.06)}
.montage .m:nth-child(1){grid-row:span 2}
.montage .m .cap{position:absolute;left:10px;bottom:10px;background:rgba(30,20,14,.7);backdrop-filter:blur(4px);border-radius:99px;padding:4px 11px;font-size:1.056rem;font-weight:700;letter-spacing:.06em}
.hero2 .trustline{display:flex;gap:22px;margin-top:24px;flex-wrap:wrap;font-size:1.248rem;color:rgba(255,255,255,.7)}
.hero2 .trustline b{color:#F2B44D;display:block;font-size:1.84rem}

/* 13 · premium search chips */
.stylesearch{padding:16px 0 4px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.chiprow .lbl{font-size:1.184rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-right:4px}
.schip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 17px;font-size:1.312rem;font-weight:700;color:#5A4C42;transition:.15s}
.schip:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-t)}
.schip.hot{background:var(--pri-grad);color:#fff;border-color:transparent}

/* 2 · material library */
.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mat{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/4.4;display:flex;align-items:flex-end;color:#fff;transition:.2s}
.mat:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.mat .bg{position:absolute;inset:0}
.mat .bg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mat:hover .bg img{transform:scale(1.06)}
.mat .sh{position:absolute;inset:0;background:linear-gradient(184deg,rgba(43,27,20,0) 40%,rgba(43,27,20,.9))}
.mat .t{position:relative;padding:16px;width:100%}
.mat b{font-size:1.68rem;display:block}
.mat small{font-size:1.184rem;color:#F8C99B}
.mat .num{position:absolute;top:12px;left:14px;font-size:1.12rem;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.75)}

/* 4 · collections rail */
.colls{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.coll{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;transition:.2s}
.coll:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.coll .bg{position:absolute;inset:0}.coll .bg img{width:100%;height:100%;object-fit:cover}
.coll .sh{position:absolute;inset:0;background:linear-gradient(184deg,rgba(43,27,20,.05) 30%,rgba(43,27,20,.9))}
.coll .t{position:relative;padding:14px}
.coll b{font-size:1.472rem;line-height:1.25;display:block}
.coll small{font-size:1.12rem;color:#F8C99B}

/* 3 · project builder */
.builder{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.builder h2{font-size:2rem;margin-bottom:4px}
.builder>p{font-size:1.376rem;color:var(--sub);margin-bottom:16px}
.ptype{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.pt{border:1.5px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;font-size:1.312rem;font-weight:700;background:#fff;transition:.15s;cursor:pointer}
.pt .em{display:block;font-size:2.24rem;margin-bottom:6px}
.pt:hover,.pt.on{border-color:var(--pri);background:var(--pri-t);color:var(--pri-d)}
.brec{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--teal-t);border:1px solid #CBE9E1;border-radius:14px;padding:12px 16px;font-size:1.28rem}
.brec .lbl{font-weight:800;color:var(--teal)}
.brec span.i{background:#fff;border:1px solid #CBE9E1;border-radius:99px;padding:5px 12px;font-weight:600;color:#1E6D5E}

/* 6 · procurement journey timeline */
.journey2{position:relative;padding:26px 0 6px}
.journey2 .line{position:absolute;top:47px;left:3%;right:3%;border-top:2px dashed #EFB49B}
.journey2 .row{display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.j2{text-align:center;padding:0 6px}
.j2 .dot{width:38px;height:38px;margin:0 auto 10px;border-radius:50% 50% 9px 9px/42% 42% 9px 9px;background:var(--pri-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 0 0 5px var(--bg),0 0 0 6.5px #EFB49B;position:relative;z-index:2}
.j2:nth-child(even) .dot{background:var(--teal-grad);box-shadow:0 0 0 5px var(--bg),0 0 0 6.5px #A9DED2}
.j2 b{font-size:1.344rem;display:block}
.j2 small{font-size:1.12rem;color:var(--sub)}

/* 7 · certified band */
.certband{background:linear-gradient(118deg,#14685A,#2A9D8A 75%);border-radius:22px;color:#fff;padding:32px 36px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.certseal{width:130px;height:130px;border-radius:50%;background:#fff;color:#14685A;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:900;box-shadow:0 14px 34px -10px rgba(0,0,0,.35);flex:none}
.certseal .st{font-size:2.4rem;line-height:1}
.certseal b{font-size:1.28rem;letter-spacing:.06em;line-height:1.2;margin-top:4px}
.certreqs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.certreqs .c{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px;font-size:1.216rem;font-weight:600}
.certreqs .c b{display:block;font-size:1.312rem;margin-bottom:2px}
.certband h2{font-size:2.08rem;margin-bottom:4px}
.certband>div p{font-size:1.36rem;color:rgba(255,255,255,.85);margin-bottom:14px}

/* 5 · global projects map band */
.worldband{background:var(--night);border-radius:22px;color:#fff;padding:32px 36px;position:relative;overflow:hidden}
.worldband::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.2px);background-size:20px 20px;mask-image:radial-gradient(ellipse 75% 90% at 50% 40%,#000 30%,transparent 75%)}
.worldband .in{position:relative;z-index:2}
.worldband h2{font-size:2.08rem}
.worldband p{font-size:1.36rem;color:rgba(255,255,255,.7);margin:4px 0 18px}
.wgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.wc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 10px;text-align:center;transition:.15s}
.wc:hover{background:rgba(240,178,122,.15);border-color:#F0B27A}
.wc .fl{font-size:2.08rem}
.wc b{display:block;font-size:1.376rem;margin:3px 0 1px}
.wc small{font-size:1.088rem;color:#F8C99B}

/* 10 · case study */
.case{display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.case .im{min-height:300px;position:relative}
.case .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .tx{padding:30px 34px}
.case .k{font-size:1.12rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pri)}
.case h3{font-size:2.16rem;margin:8px 0 16px}
.csr{display:grid;gap:12px}
.csr .r{border-left:3px solid var(--pri);padding:2px 0 2px 14px}
.csr .r:nth-child(2){border-color:var(--teal)}
.csr .r:nth-child(3){border-color:var(--gold)}
.csr b{font-size:1.216rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);display:block}
.csr p{font-size:1.408rem;color:#3A3F49;margin-top:2px}

/* 11 · why morocco */
.whym{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.wm{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;transition:.2s}
.wm:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.wm .em{font-size:2.4rem;display:block;margin-bottom:9px}
.wm b{font-size:1.408rem;display:block;margin-bottom:4px}
.wm p{font-size:1.216rem;color:var(--sub);line-height:1.55}

/* 9 · professionals */
.profs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.prof{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px;text-align:center;transition:.2s;font-size:1.344rem;font-weight:700}
.prof .em{display:block;font-size:2.56rem;margin-bottom:8px}
.prof small{display:block;font-weight:500;font-size:1.12rem;color:var(--sub);margin-top:3px}
.prof:hover{border-color:var(--pri);background:var(--pri-t);color:var(--pri-d);transform:translateY(-3px)}

/* 8 · sample box */
.samplebox{background:linear-gradient(120deg,#FDEEE7,#FBF3D9);border:1px solid #F2D9C6;border-radius:20px;padding:28px 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.samplebox h2{font-size:2.08rem;margin-bottom:6px}
.samplebox p{font-size:1.376rem;color:#7A5A42;margin-bottom:14px}
.sitems{display:flex;gap:8px;flex-wrap:wrap}
.sit{background:#fff;border:1.5px solid #F2D9C6;border-radius:99px;padding:8px 14px;font-size:1.28rem;font-weight:700;display:inline-flex;gap:8px;align-items:center}
.sit .pm{width:20px;height:20px;border-radius:50%;background:var(--pri-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.28rem;font-weight:800}
.sboxvis{background:#fff;border-radius:16px;border:1px solid #F2D9C6;padding:18px;box-shadow:var(--shadow)}
.sboxvis h3{font-size:1.44rem;display:flex;justify-content:space-between}
.sboxvis .bar{height:8px;border-radius:99px;background:#F5E6D6;margin:10px 0;overflow:hidden}
.sboxvis .bar i{display:block;height:100%;width:66%;background:var(--pri-grad);border-radius:99px}
.sboxvis small{font-size:1.184rem;color:var(--sub)}

/* 12 · resources */
.resrc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.res{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;transition:.2s;position:relative}
.res:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:#EFB49B}
.res .ft{width:40px;height:48px;border-radius:6px;background:var(--pri-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.024rem;font-weight:900;margin-bottom:12px;box-shadow:0 6px 14px -6px rgba(222,90,56,.5)}
.res:nth-child(even) .ft{background:var(--teal-grad)}
.res b{font-size:1.408rem;display:block;line-height:1.35}
.res small{font-size:1.152rem;color:var(--sub);display:block;margin:5px 0 10px}
.res .dl{font-size:1.248rem;font-weight:800;color:var(--pri)}

/* 14 · concierge */
.concierge{background:linear-gradient(118deg,#2B1B14,#57281A);border-radius:22px;color:#fff;padding:32px 36px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;position:relative;overflow:hidden}
.concierge h2{font-size:2.16rem}
.concierge h2 em{font-style:normal;color:#F2B44D}
.concierge p{font-size:1.376rem;color:rgba(255,255,255,.8);margin:6px 0 14px}
.cserv{display:flex;gap:8px;flex-wrap:wrap}
.cserv span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 14px;font-size:1.216rem;font-weight:600}

@media (max-width:1100px){
 .hero2 .inner{grid-template-columns:1fr}
 .montage{grid-auto-rows:120px}
 .mats,.certreqs{grid-template-columns:repeat(2,1fr)}
 .colls,.whym,.profs{grid-template-columns:repeat(3,1fr)}
 .ptype{grid-template-columns:repeat(3,1fr)}
 .journey2 .row{grid-template-columns:repeat(4,1fr);gap:16px}
 .journey2 .line{display:none}
 .wgrid{grid-template-columns:repeat(4,1fr)}
 .case,.samplebox,.concierge,.certband{grid-template-columns:1fr}
 .resrc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
 .mats,.colls,.whym,.profs,.wgrid,.resrc,.ptype,.certreqs{grid-template-columns:1fr 1fr}
 .journey2 .row{grid-template-columns:repeat(2,1fr)}
}

/* ================= ALI-STYLE VERTICAL CATEGORY MENU ================= */
.vmenu{position:relative;margin-right:10px}
.vcats{position:absolute;top:calc(100% + 6px);left:0;width:272px;background:#FFFDF9;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -18px rgba(43,27,20,.3);padding:8px;visibility:hidden;opacity:0;transform:translateY(8px);transition:.2s;z-index:95}
.vmenu:hover .vcats,.vmenu:focus-within .vcats{visibility:visible;opacity:1;transform:none}
.vc{position:relative}
.vc>a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:9px;font-size:1.36rem;font-weight:600;color:#463A33}
.vc>a .fa{color:var(--sub);font-size:1.36rem}
.vc:hover>a{background:var(--pri-t);color:var(--pri)}
.vc:hover>a .fa{color:var(--pri)}
.vc .fly{position:absolute;left:calc(100% + 4px);top:-6px;min-width:250px;background:#FFFDF9;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -18px rgba(43,27,20,.3);padding:12px 6px;display:none;grid-template-columns:1fr;gap:0 22px;z-index:96}
.vc:hover .fly{display:grid}
.vc .fly .fcol h6{font-size:1.088rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pri);padding:4px 12px 5px}
.vc .fly .fcol a{display:block;padding:7px 12px;border-radius:8px;font-size:1.328rem;color:#5A4C42}
.vc .fly .fcol a:hover{background:var(--pri-t);color:var(--pri)}
/* flyouts near the bottom open upward-aligned */
.vc:nth-last-child(-n+4) .fly{top:auto;bottom:-6px}
/* old per-trade panels retired */
.mega .panel{display:none!important}
@media (max-width:1100px){.vcats{display:none!important}}


/* ==========================================================================
   MMA SITEWIDE DESIGN BRIDGE - added 2026-08-08
   Extends the homepage design system (Inter body / Fraunces headings)
   to CMS pages, category pages and product pages.
   ADDITIVE ONLY - no pre-existing rule in this file was modified.
   Rollback: delete this block, or restore mma.css.bak-bridge-20260808
   ========================================================================== */
body.cms-page-view,
body.catalog-category-view,
body.catalog-product-view,
body.cms-page-view .column.main,
body.catalog-category-view .column.main,
body.catalog-product-view .column.main{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}
body.cms-page-view h1, body.cms-page-view h2, body.cms-page-view h3,
body.catalog-category-view h1, body.catalog-category-view h2, body.catalog-category-view h3,
body.catalog-product-view h1, body.catalog-product-view h2, body.catalog-product-view h3,
body.cms-page-view .page-title,
body.catalog-category-view .page-title,
body.catalog-product-view .page-title,
body.catalog-product-view .product-info-main .page-title-wrapper .page-title{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* layered-nav count badges are hardcoded to bare Arial in main-styles.css */
.filter-options .filter-options-content .count{
  font-family:'Inter',system-ui,sans-serif;
}

/* --------------------------------------------------------------------------
   MMA PRODUCT PAGE FIX - added 2026-08-08
   The design package supplies a complete product layout (.pgal gallery /
   .pinfo spec table / .pbuy order panel). Magento's default product block
   (.row.main-inner) is still output above it and duplicates the title,
   wishlist/compare links and short description with no image and no price,
   which reads as a broken half-page at the top of every product.
   It contains no add-to-cart form, no price box and no qty field, so hiding
   it removes nothing functional. Guarded by :has(.pgal) so any product that
   does NOT have the new layout keeps the standard Magento display.
   Rollback: delete this block, or restore mma.css.bak-product-20260808
   -------------------------------------------------------------------------- */
body.catalog-product-view .column.main:has(.pgal) > .row.main-inner{display:none}


/* ==========================================================================
   MMA CATEGORY "PRO LAYER" PORT - added 2026-08-08
   These rules were authored for category pages (the source file even labels
   them "category pages - pro layer") but shipped inside mma-home.css, which
   is scoped to the homepage only. Ported here so the buyer's guide (.cmp),
   trade-logistics band (.logi), featured-workshop panel (.wsspot), FAQ
   (.faq), hero actions (.hactions) and related pieces render correctly on
   category, CMS and product pages too.
   Scoped to those page types, so the homepage is unaffected.
   Rollback: delete this block, or restore mma.css.bak-prolayer-20260808
   ========================================================================== */
body.catalog-category-view .column.main .phero .hactions,
body.cms-page-view .column.main .phero .hactions,
body.catalog-product-view .column.main .phero .hactions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
body.catalog-category-view .column.main .cmp,
body.cms-page-view .column.main .cmp,
body.catalog-product-view .column.main .cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13.44px}
body.catalog-category-view .column.main .cmp th,
body.cms-page-view .column.main .cmp th,
body.catalog-product-view .column.main .cmp th{background:var(--night);color:#F5E9DC;text-align:left;padding:12px 16px;font-size:11.2px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
body.catalog-category-view .column.main .cmp td,
body.cms-page-view .column.main .cmp td,
body.catalog-product-view .column.main .cmp td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
body.catalog-category-view .column.main .cmp tr:last-child td,
body.cms-page-view .column.main .cmp tr:last-child td,
body.catalog-product-view .column.main .cmp tr:last-child td{border:none}
body.catalog-category-view .column.main .cmp tbody tr:hover,
body.cms-page-view .column.main .cmp tbody tr:hover,
body.catalog-product-view .column.main .cmp tbody tr:hover{background:var(--pri-t)}
body.catalog-category-view .column.main .cmp td b,
body.cms-page-view .column.main .cmp td b,
body.catalog-product-view .column.main .cmp td b{font-family:'Fraunces',serif;font-weight:600;font-size:14.72px}
body.catalog-category-view .column.main .cmp .pr,
body.cms-page-view .column.main .cmp .pr,
body.catalog-product-view .column.main .cmp .pr{font-family:'Fraunces',serif;font-weight:600;color:var(--pri-d);white-space:nowrap}
body.catalog-category-view .column.main .cmp .tagz,
body.cms-page-view .column.main .cmp .tagz,
body.catalog-product-view .column.main .cmp .tagz{display:inline-block;background:var(--teal-t);color:var(--teal);border-radius:99px;padding:2px 9px;font-size:10.56px;font-weight:800}
body.catalog-category-view .column.main .logi,
body.cms-page-view .column.main .logi,
body.catalog-product-view .column.main .logi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
body.catalog-category-view .column.main .lg,
body.cms-page-view .column.main .lg,
body.catalog-product-view .column.main .lg{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
body.catalog-category-view .column.main .lg b,
body.cms-page-view .column.main .lg b,
body.catalog-product-view .column.main .lg b{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--pri-d);display:block}
body.catalog-category-view .column.main .lg small,
body.cms-page-view .column.main .lg small,
body.catalog-product-view .column.main .lg small{font-size:12.16px;color:var(--sub);line-height:1.5;display:block;margin-top:2px}
body.catalog-category-view .column.main .lg:nth-child(even) b,
body.cms-page-view .column.main .lg:nth-child(even) b,
body.catalog-product-view .column.main .lg:nth-child(even) b{color:var(--teal)}
body.catalog-category-view .column.main .wsspot,
body.cms-page-view .column.main .wsspot,
body.catalog-product-view .column.main .wsspot{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch}
body.catalog-category-view .column.main .wsl,
body.cms-page-view .column.main .wsl,
body.catalog-product-view .column.main .wsl{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:200px 1fr}
body.catalog-category-view .column.main .wsl .im,
body.cms-page-view .column.main .wsl .im,
body.catalog-product-view .column.main .wsl .im{position:relative}
body.catalog-category-view .column.main .wsl .im img,
body.cms-page-view .column.main .wsl .im img,
body.catalog-product-view .column.main .wsl .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.catalog-category-view .column.main .wsl .b,
body.cms-page-view .column.main .wsl .b,
body.catalog-product-view .column.main .wsl .b{padding:18px 20px}
body.catalog-category-view .column.main .wsl .b h3,
body.cms-page-view .column.main .wsl .b h3,
body.catalog-product-view .column.main .wsl .b h3{font-family:'Fraunces',serif;font-weight:600;font-size:18.4px;display:flex;gap:8px;align-items:center}
body.catalog-category-view .column.main .wsl .b h3 .v,
body.cms-page-view .column.main .wsl .b h3 .v,
body.catalog-product-view .column.main .wsl .b h3 .v{font-size:11.2px;color:var(--teal);font-family:'Inter';font-weight:800;background:var(--teal-t);border-radius:99px;padding:3px 9px}
body.catalog-category-view .column.main .wsl .b p,
body.cms-page-view .column.main .wsl .b p,
body.catalog-product-view .column.main .wsl .b p{font-size:13.12px;color:var(--sub);margin:6px 0 10px;line-height:1.6}
body.catalog-category-view .column.main .wsl .kv,
body.cms-page-view .column.main .wsl .kv,
body.catalog-product-view .column.main .wsl .kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:12.16px;color:var(--sub)}
body.catalog-category-view .column.main .wsl .kv b,
body.cms-page-view .column.main .wsl .kv b,
body.catalog-product-view .column.main .wsl .kv b{color:var(--ink);font-weight:700}
body.catalog-category-view .column.main .faq,
body.cms-page-view .column.main .faq,
body.catalog-product-view .column.main .faq{display:grid;gap:10px}
body.catalog-category-view .column.main .faq details,
body.cms-page-view .column.main .faq details,
body.catalog-product-view .column.main .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px;transition:.2s}
body.catalog-category-view .column.main .faq details[open],
body.cms-page-view .column.main .faq details[open],
body.catalog-product-view .column.main .faq details[open]{border-color:#EFB49B;box-shadow:var(--shadow)}
body.catalog-category-view .column.main .faq summary,
body.cms-page-view .column.main .faq summary,
body.catalog-product-view .column.main .faq summary{cursor:pointer;font-weight:700;font-size:14.4px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
body.catalog-category-view .column.main .faq summary::after,
body.cms-page-view .column.main .faq summary::after,
body.catalog-product-view .column.main .faq summary::after{content:"+";font-family:'Fraunces',serif;font-size:20.8px;color:var(--pri)}
body.catalog-category-view .column.main .faq details[open] summary::after,
body.cms-page-view .column.main .faq details[open] summary::after,
body.catalog-product-view .column.main .faq details[open] summary::after{content:"–"}
body.catalog-category-view .column.main .faq details p,
body.cms-page-view .column.main .faq details p,
body.catalog-product-view .column.main .faq details p{font-size:13.6px;color:var(--sub);padding:0 0 14px;line-height:1.65;max-width:896px}
@media (max-width:1100px){
body.catalog-category-view .column.main .logi,
body.cms-page-view .column.main .logi,
body.catalog-product-view .column.main .logi{grid-template-columns:1fr 1fr}
body.catalog-category-view .column.main .wsspot,
body.cms-page-view .column.main .wsspot,
body.catalog-product-view .column.main .wsspot{grid-template-columns:1fr}
body.catalog-category-view .column.main .wsl,
body.cms-page-view .column.main .wsl,
body.catalog-product-view .column.main .wsl{grid-template-columns:1fr}
body.catalog-category-view .column.main .wsl .im,
body.cms-page-view .column.main .wsl .im,
body.catalog-product-view .column.main .wsl .im{min-height:170px}
}
@media (max-width:700px){
body.catalog-category-view .column.main .logi,
body.cms-page-view .column.main .logi,
body.catalog-product-view .column.main .logi{grid-template-columns:1fr}
body.catalog-category-view .column.main .cmp,
body.cms-page-view .column.main .cmp,
body.catalog-product-view .column.main .cmp{font-size:12.16px}
body.catalog-category-view .column.main .cmp th,
body.cms-page-view .column.main .cmp th,
body.catalog-product-view .column.main .cmp th,
body.catalog-category-view .column.main .cmp td,
body.cms-page-view .column.main .cmp td,
body.catalog-product-view .column.main .cmp td{padding:9px 10px}
}