/* TIRAZ — tokens from master prompt §3. Single source for the prototype. */
:root{
--linen:#F2EFE9; --card:#FAF8F3; --raised:#FDFBF7; --hairline:#E2DCD1; --rule:#C6BCAB;
--ink:#1A1714; --ink-soft:#6B6156; --ink-faint:#9A9084;
--nila:#22355E; --nila-deep:#16233D; --nila-wash:#E8EAF0;
--in-stock:#2F6B4F; --low:#8A6B21; --alert:#A33A2E;
--s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px;
--shadow-drawer:0 8px 32px rgba(26,23,20,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--linen);color:var(--ink);font-family:"IBM Plex Sans Arabic",sans-serif;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:Almarai,sans-serif;font-weight:800;line-height:1.35}
h1{font-size:30px} h2{font-size:22px} h3{font-size:17px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s4)}
.num{font-variant-numeric:tabular-nums;font-weight:500}
.prose{max-width:60ch}
.def{font-size:12px;color:var(--ink-faint);display:block;line-height:1.6}
a{color:var(--nila);text-underline-offset:3px}

/* chrome */
.announce{background:var(--nila);color:var(--linen);font-size:15px;text-align:center;padding:var(--s2) var(--s3)}
header{border-bottom:1px solid var(--hairline);background:var(--linen);position:sticky;top:0;z-index:20}
.hd{display:flex;align-items:center;gap:var(--s5);height:72px}
.logo{font-family:Almarai;font-weight:800;font-size:22px;text-decoration:none;color:var(--ink)}
nav{display:flex;gap:var(--s4);font-size:15px;flex:1}
nav a{color:var(--ink);text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--nila)}
.hdtools{display:flex;gap:var(--s3);align-items:center;font-size:15px;color:var(--ink-soft)}
.search{border:1px solid var(--rule);background:var(--raised);border-radius:3px;height:40px;padding:0 var(--s3);font-family:inherit;font-size:15px;width:200px;color:var(--ink)}
.crumb{font-size:15px;color:var(--ink-soft);padding:var(--s4) 0}
footer{border-top:1px solid var(--hairline);margin-top:var(--s7);padding:var(--s5) 0;font-size:15px;color:var(--ink-soft)}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
footer a{display:block;color:var(--ink-soft);text-decoration:none;padding:2px 0}
footer a:hover{color:var(--nila)}

/* tiraz band */
.band{margin:var(--s6) 0 var(--s4)}
.band::before{content:"";display:block;border-top:1px solid var(--rule)}
.band span{display:inline-block;background:var(--linen);font-family:Almarai;font-weight:800;font-size:12px;color:var(--ink-soft);padding:0 var(--s3);position:relative;top:-13px}
.band::after{content:"";display:block;height:2px;margin-top:-8px;background-image:repeating-linear-gradient(to left,var(--rule) 0 6px,transparent 6px 12px)}

/* image slots — designed empty states, never fake imagery.
   Rule 02-visual-system §8: no blobs, no stand-in illustration. An honest,
   well-set placeholder at exact dimensions beats a decorative lie. */
.slot{background:var(--card);border:1px solid var(--hairline);position:relative;display:flex;align-items:flex-end;padding:var(--s2);overflow:hidden}
.slot::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,var(--hairline) 0 1px,transparent 1px 14px);opacity:.5}
.slot::before{content:attr(data-ratio);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);font-size:12px;padding:var(--s4);line-height:1.7;z-index:1}
.slot span{position:relative;z-index:2;font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;background:var(--card);padding:2px var(--s2);border:1px solid var(--hairline)}

/* Filled slots — stock placeholders. One grade for all, so mixed sources read as
   a system (02-visual-system §1, delta #2). Colour-critical slots are exempt. */
.slot.filled::before,.slot.filled::after{display:none}
.slot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) contrast(1.02) brightness(1.02)}
/* Colour-critical slots run ungraded — 02-visual-system §8 exception */
.slot.truecolor.filled img{filter:none}
.slot.truecolor.filled::after{display:none}
.slot.filled::after{content:"";display:block;position:absolute;inset:0;
  background:var(--linen);opacity:.10;mix-blend-mode:color;z-index:1}
.slot.filled span{background:rgba(250,248,243,.92);border-color:var(--rule)}
.stockmark{position:absolute;top:var(--s2);inset-inline-end:var(--s2);z-index:3;
  font-size:12px;background:rgba(250,248,243,.92);border:1px solid var(--rule);
  color:var(--ink-soft);padding:2px var(--s2)}
/* Varied crops so a small placeholder pool does not read as one repeated image */
.cr-t img{object-position:50% 12%!important}
.cr-c img{object-position:50% 50%!important}
.cr-b img{object-position:50% 85%!important}
.cr-l img{object-position:18% 45%!important}
.cr-r img{object-position:82% 45%!important}
.cr-z img{object-position:50% 35%!important;transform:scale(1.35)}
.cr-zz img{object-position:40% 55%!important;transform:scale(1.8)}
.r45{aspect-ratio:4/5} .r11{aspect-ratio:1/1} .r169{aspect-ratio:16/9} .r32{aspect-ratio:3/2}
.truecolor{border-color:var(--nila)} .truecolor span{color:var(--nila)}

/* buttons */
.cta{background:var(--nila);color:var(--linen);border:0;border-radius:3px;padding:var(--s3) var(--s4);font-family:Almarai;font-weight:800;font-size:17px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.cta:hover{background:var(--nila-deep)}
.cta.full{width:100%}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:var(--s2) var(--s3);font-family:inherit;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block}
.ghost:hover{border-color:var(--nila);color:var(--nila)}

/* cards / evidence */
.ev{background:var(--card);border:1px solid var(--hairline);border-radius:8px;padding:var(--s4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:start;font-size:12px;font-family:Almarai;font-weight:800;color:var(--ink-soft);padding-bottom:var(--s2)}
th,td{border:1px solid var(--hairline);padding:var(--s2) var(--s3);text-align:start;font-variant-numeric:tabular-nums}
th{font-weight:500;color:var(--ink-soft);font-size:12px;background:var(--raised)}
tr.on td{background:var(--nila-wash);font-weight:500}
dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:15px}
dt{color:var(--ink-soft)} dd{font-variant-numeric:tabular-nums}

/* opacity meter */
.meter{display:flex;gap:var(--s1);margin:var(--s3) 0 var(--s2)}
.meter i{flex:1;height:8px;background:var(--hairline);font-style:normal}
.meter i.on{background:var(--nila)}
.mlbl{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint)}
.verdict{border-inline-start:3px solid var(--nila);border-radius:0;padding:var(--s2) var(--s3);background:var(--raised);margin-top:var(--s3);font-size:15px}
.nofit{border-inline-start:3px solid var(--low);border-radius:0;padding:var(--s2) var(--s3);background:var(--raised);margin-top:var(--s3);font-size:15px}
.empty{border:1px dashed var(--rule);border-radius:8px;padding:var(--s5);text-align:center;color:var(--ink-soft);font-size:15px}

/* product card — no quick-add, per override #3 */
.pcard{text-decoration:none;color:var(--ink);display:block}
.pcard .slot{margin-bottom:var(--s2)}
.pcard:hover .slot{border-color:var(--rule)}
.ptitle{font-size:15px;line-height:1.6}
.pprice{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}
.pdots{display:flex;gap:var(--s1);margin-top:var(--s2)}
.pdots i{width:12px;height:12px;border-radius:50%;border:1px solid var(--hairline);font-style:normal}
.chip{display:inline-block;font-size:12px;color:var(--nila);background:var(--nila-wash);padding:2px var(--s2);border-radius:3px;margin-top:var(--s2)}

@media(max-width:900px){
 .grid2,.grid3,.grid4{grid-template-columns:1fr 1fr;gap:var(--s3)}
 .grid2{grid-template-columns:1fr;gap:var(--s4)}
 .fcols{grid-template-columns:1fr 1fr}
 nav{display:none} .search{width:130px}
 h1{font-size:26px}
}