/* Kitchen World PLC — shared stylesheet
One file for every page. Edit here, all pages update. */
:root{
color-scheme:light only;
--white:#FFFFFF;
--paper:#FCFBFA;
--mist:#F6F5F2;
--line:#EAE7E1;
--ink:#26221F;
--slate:#6B645D;
--red:#CC0000; /* exact brand red, sampled from the master logo file */
--red-deep:#A30000; /* darker step for hover states */
--green:#1F7A48;
--ph-bg:#F8F7F4;
--ph-line:#DEDAD2;
--nav-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
font-family:'Archivo',sans-serif;background:var(--white);color:var(--ink);
font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;line-height:1.12}
.am{font-family:'Noto Sans Ethiopic','Archivo',sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{
font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);
font-weight:500;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--red);flex:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:2px solid var(--red);outline-offset:3px
}
.visually-hidden{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip{position:absolute;left:-999px;top:0;z-index:200}
.skip:focus{left:12px;top:12px}
/* ---------- IMAGE SLOTS ----------
Real ![]()
tags. Drop a photo at the path shown and it appears.
Until then JS adds .is-empty and the dashed placeholder shows the filename. */
.shot{position:relative;background:var(--ph-bg);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.is-empty{border:1px dashed var(--ph-line);display:flex;align-items:center;justify-content:center}
.shot.is-empty img{display:none}
.shot .ph-in{display:none;text-align:center;color:#8C8478;padding:20px}
.shot.is-empty .ph-in{display:block}
.shot .ph-in svg{width:30px;height:30px;stroke:#A79E92;margin:0 auto 10px;fill:none;stroke-width:1.4}
.shot .ph-in small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.shot .ph-in em{display:block;font-style:normal;font-size:12.5px;margin-top:5px;color:#948B7F}
/* ---------- BUTTONS ---------- */
.btn{
display:inline-block;padding:14px 30px;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;font-weight:500;border:1px solid var(--red);
color:#fff;background:var(--red);transition:background .25s,border-color .25s;
cursor:pointer;font-family:inherit;text-align:center;
}
.btn:hover,.btn:focus-visible{background:var(--red-deep);border-color:var(--red-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--ink);background:transparent}
.btn.wa{background:var(--green);border-color:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn.wa:hover,.btn.wa:focus-visible{background:#186139;border-color:#186139}
.btn.wa svg{width:16px;height:16px;fill:currentColor;flex:none}
/* ---------- NAV ----------
Scoped to .site-nav, NOT the bare `nav` element — the breadcrumb is also a