@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/heebo-hebrew-400.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/heebo-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/heebo-hebrew-500.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/heebo-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/heebo-hebrew-700.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/heebo-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/heebo-hebrew-900.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/heebo-latin-900.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* lulo design system — marketplace, RTL-first */
:root{
  --navy:#131921; --navy-2:#232f3e; --pop:#FF7A45; --pop-deep:#E85F2B; --gold:#FFA41C; --leaf:#137A3F;
  --ink:#0F1111; --muted:#565959; --line:#DDD; --bg:#EAEDED; --card:#fff; --danger:#B12704; --link:#007185;
  --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 'Heebo',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.sr{position:absolute;left:-9999px}

/* ---------- header ---------- */
.hdr{background:var(--navy);color:#fff}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1;padding:4px 6px;border:1px solid transparent;border-radius:3px}
.logo:hover{border-color:#fff}
.logo span{color:var(--pop)}
.loc{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid transparent;border-radius:3px;white-space:nowrap;line-height:1.15}
.loc:hover{border-color:#fff}
.loc small{display:block;color:#ccc;font-size:12px}
.loc b{font-size:14px}
.srch{flex:1;display:flex;height:40px;border-radius:6px;background:#fff}
.srch select{border-radius:0 6px 6px 0}.srch button{border-radius:6px 0 0 6px}
.srch select{border:0;background:#f3f3f3;color:#555;padding:0 8px;border-left:1px solid var(--line);max-width:150px;outline:none}
.srch input{flex:1;border:0;padding:0 12px;outline:none;min-width:0}
.srch input:focus{box-shadow:inset 0 0 0 2px var(--pop)}
.srch button{border:0;background:var(--pop);color:#fff;width:48px;cursor:pointer;font-size:18px}
.srch button:hover{background:var(--pop-deep)}
.hdr nav{display:flex;align-items:center;gap:4px}
.hdr nav a,.hdr nav button{display:flex;flex-direction:column;padding:4px 6px;border:1px solid transparent;border-radius:3px;line-height:1.15;white-space:nowrap;background:none;color:#fff;cursor:pointer}
.hdr nav a:hover,.hdr nav button:hover{border-color:#fff}
.hdr nav small{font-size:12px;color:#ccc}
.hdr nav b{font-size:14px}
.cartbtn{position:relative;display:flex!important;flex-direction:row!important;align-items:flex-end;gap:4px;font-weight:700}
.cartbtn .n{background:var(--pop);color:#fff;border-radius:99px;padding:0 7px;font-size:13px;line-height:20px}
.subnav{background:var(--navy-2);color:#fff}
.subnav .wrap{display:flex;gap:2px;height:39px;align-items:center;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:6px 9px;border:1px solid transparent;border-radius:3px;white-space:nowrap;font-size:14px}
.subnav a:hover{border-color:#fff}
.subnav a.on{background:rgba(255,255,255,.12)}
.subnav .all{font-weight:700}
@media(max-width:860px){.loc,.srch select,.hdr nav .hide-m{display:none}.hdr .wrap{height:auto;flex-wrap:wrap;padding:8px 12px}.srch{order:5;flex-basis:100%}}

/* ---------- utilities ---------- */
main{padding:14px 0 40px}
.flash{border-radius:var(--radius);padding:10px 14px;font-weight:700;margin-bottom:14px;display:flex;gap:8px;align-items:center}
.flash.ok{background:#E6F4EA;border:1px solid var(--leaf);color:var(--leaf)}
.flash.err{background:#FDECEA;border:1px solid var(--danger);color:var(--danger)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.muted{color:var(--muted)}
.muted a{text-decoration:underline}.muted a.btn,.muted a.chip{text-decoration:none}
.price{font-weight:700;font-size:18px;color:var(--ink)}
.price .cur{font-size:12px;vertical-align:top;position:relative;top:2px}
.price s{color:var(--muted);font-weight:400;font-size:13px;margin-inline-start:8px}
.off{color:var(--danger);font-weight:700;font-size:13px;margin-inline-start:6px}
.stars{color:var(--gold);font-size:13px;letter-spacing:-1px;white-space:nowrap}
.rc{color:var(--link);font-size:12px;margin-inline-start:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--pop);color:#fff;border:0;border-radius:99px;padding:8px 16px;font-weight:700;cursor:pointer;box-shadow:0 2px 5px rgba(213,217,217,.5);white-space:nowrap}
.btn:hover{background:var(--pop-deep)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #d5d9d9}
.btn.ghost:hover{background:#f7fafa}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.sm{padding:5px 12px;font-size:13px}
.btn.block{width:100%}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:3px;padding:2px 6px;background:#E6F4EA;color:var(--leaf);line-height:1.4}
.badge.off{background:#FDECEA;color:var(--danger)}
.badge.sale{background:var(--danger);color:#fff}
.badge.best{background:var(--navy-2);color:#fff}
.badge.pick{background:#C2410C;color:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 12px;font-size:13px;white-space:nowrap}
.chip.on{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.chip:hover{border-color:var(--navy-2)}
h1{font-size:24px;font-weight:700;line-height:1.25}
h2{font-size:20px;font-weight:700;line-height:1.25}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.sec a{color:var(--link);font-size:13px}
.sec a:hover{text-decoration:underline;color:#c7511f}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
input.f,select.f,textarea.f{width:100%;border:1px solid #888c8c;border-radius:4px;padding:7px 10px;box-shadow:0 1px 2px rgba(15,17,17,.15) inset;background:#fff}
input.f:focus,select.f:focus,textarea.f:focus{outline:0;border-color:var(--pop);box-shadow:0 0 0 3px rgba(255,122,69,.3)}
label{font-weight:700;display:block;margin-bottom:3px;font-size:13px}
.field{margin-bottom:12px}
.err{color:var(--danger);font-size:12px;margin-top:3px;display:block}
.crumb{font-size:12px;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--link)}
.crumb a:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse}
td,th{padding:8px 4px;border-bottom:1px solid #eee;text-align:start;vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:700}
.totals td{border:0;padding:4px}
.totals tr:last-child td{font-weight:700;font-size:18px;padding-top:8px;border-top:1px solid #eee}
.empty{background:#fff;border-radius:var(--radius);padding:40px 20px;text-align:center;color:var(--muted);box-shadow:var(--shadow)}
.empty a{color:var(--link)}
/* minmax(0,1fr), not 1fr: a plain 1fr track is minmax(auto,1fr), and an auto minimum
   refuses to shrink below its widest item's min-content. On the browse page that made the
   single mobile column 1724px wide — the filters, the shop cards and the whole document with
   them — while every element inside looked innocent, because they were all merely filling the
   track. The desktop rule below already says minmax(0,1fr) for exactly this reason. */
.two{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.two{grid-template-columns:minmax(0,1fr) 360px}.two.rev{grid-template-columns:360px minmax(0,1fr)}}

/* ---------- home ---------- */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff;background:#222 center/cover;margin-bottom:-70px}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.15) 60%,transparent)}
.hero .in{position:relative;z-index:1;padding:28px 28px 100px;max-width:640px}
.hero h1{font-size:clamp(26px,4vw,40px);font-weight:900;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.hero p{font-size:16px;margin:8px 0 14px;opacity:.95}
.hero .btn{padding:10px 22px;font-size:15px}
.tiles{position:relative;z-index:2;display:grid;gap:16px;grid-template-columns:repeat(4,1fr);padding:0 16px}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr;padding:0}.hero{margin-bottom:16px}.hero .in{padding-bottom:28px}}
.tile{background:#fff;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.12);padding:16px;display:flex;flex-direction:column;gap:10px}
.tile h3{font-size:18px;font-weight:700}
.tile .q{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile .q a{display:block;font-size:12px}
.tile .q img{aspect-ratio:1;object-fit:cover;border-radius:4px;margin-bottom:3px;width:100%}
.tile .q a span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tile .big{aspect-ratio:16/10;object-fit:cover;border-radius:4px;width:100%}
.tile .more{color:var(--link);font-size:13px;margin-top:auto}
.tile .more:hover{text-decoration:underline}
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
@media(max-width:1100px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:700;text-align:center}
.cat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow)}
.cat:hover img{border-color:var(--pop)}
.rail{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail>*{flex:0 0 200px;scroll-snap-align:start}
.band{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 6px;margin-top:20px}
.band .rail{padding-bottom:12px}

/* ---------- product card ---------- */
.pc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:box-shadow .15s}
.pc:hover{box-shadow:0 4px 14px rgba(0,0,0,.14)}
.pc .img{aspect-ratio:1;background:#f5f5f5;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:56px}
.pc .img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pc:hover .img img{transform:scale(1.04)}
.pc .tag{position:absolute;top:8px;inset-inline-start:8px;display:flex;gap:4px;flex-direction:column;align-items:flex-start}
.pc .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc .nm{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;color:var(--ink)}
.pc .nm:hover{color:#c7511f}
.pc .sh{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .sh a:hover{color:var(--link);text-decoration:underline}
.pc .meta{font-size:12px;color:var(--muted)}
.pc .meta b{color:var(--leaf)}
.pc form{margin-top:auto;padding-top:8px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}.pc .bd{padding:8px}}

/* ---------- shop card / page ---------- */
.sc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.sc:hover{box-shadow:0 4px 14px rgba(0,0,0,.14)}
.sc .cv{aspect-ratio:16/8;background:#ddd center/cover;position:relative}
.sc .cv .badge{position:absolute;top:8px;inset-inline-start:8px}
.sc .cv-none{background:linear-gradient(135deg,#f3efe7,#e6ded1);display:flex;align-items:center;justify-content:center}
.sc .cv-none .cv-mark{font-size:44px;opacity:.55;line-height:1}
.sc .bd{padding:10px 12px 12px}
.sc .bd b{font-size:15px;display:block}
.sc .bd .meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
/* The wide shop panel the home page uses while lulo has one or two shops. It borrowed the
   card's .cv classes, which are all scoped to .sc — so it got no background sizing, no
   centring and a placeholder mark at body-text size: a large empty box on the home page. */
.sf{display:flex;flex-wrap:wrap;align-items:stretch;padding:0;overflow:hidden}
.sf .cv{flex:1 1 280px;min-height:220px;background:#ddd center/cover no-repeat;position:relative}
.sf .cv .badge{position:absolute;top:10px;inset-inline-start:10px}
.sf .cv-none{background:linear-gradient(135deg,#f3efe7,#e6ded1);display:flex;align-items:center;justify-content:center}
.sf .cv-none .cv-mark{font-size:56px;opacity:.55;line-height:1}
.sf .bd{flex:1 1 320px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.sf .bd h3{font-size:20px;font-weight:600;margin:0}
.sf .bd .meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}
.shophead{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-bottom:16px}
.shophead .cv{height:220px;background:#333;position:relative;overflow:hidden}.shophead .cv img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:600px){.shophead .cv{height:150px}}
.shophead .cv:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%)}
.shophead .in{padding:16px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.shophead h1{font-size:26px}
.shophead .tg{color:var(--muted);margin:2px 0 6px}
.facts{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.facts div{display:flex;flex-direction:column}
.facts small{color:var(--muted);font-size:11px}
.facts b{font-size:14px}
.catbar{position:sticky;top:0;background:#fff;z-index:5;box-shadow:var(--shadow);border-radius:var(--radius);padding:8px 12px;display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.catbar a{padding:5px 12px;border-radius:99px;white-space:nowrap;font-size:13px;border:1px solid transparent}
.catbar a:hover{background:#f3f3f3}

/* ---------- product page ---------- */
.pp{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.pp{grid-template-columns:minmax(0,5fr) minmax(0,4fr) 280px}}
.pp .gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:#f5f5f5}
.pp .gallery .ph{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:120px;background:#f5f5f5;border-radius:var(--radius)}
.pp h1{font-size:24px;font-weight:500}
.pp .bigprice{font-size:28px;font-weight:500;color:var(--danger)}
.pp .bigprice .cur{font-size:14px;vertical-align:top;position:relative;top:6px}
.buybox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;align-self:start;position:sticky;top:14px}
.buybox .del{font-size:13px}
.buybox .del b{color:var(--leaf)}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:64px;text-align:center}
.kv{font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0}
.kv dt{color:var(--muted)}
hr.sep{border:0;border-top:1px solid #eee;margin:14px 0}

/* ---------- order status ---------- */
.steps{display:flex;gap:0;margin:14px 0 18px;counter-reset:s}
.steps span{flex:1;text-align:center;font-size:12px;position:relative;padding-top:26px;color:var(--muted)}
.steps span:before{content:"";position:absolute;top:9px;left:0;right:0;height:3px;background:#ddd}
.steps span:after{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #ddd}
.steps span.done{color:var(--leaf)}.steps span.done:before,.steps span.done:after{background:var(--leaf);border-color:var(--leaf)}
.steps span.now{color:var(--ink);font-weight:700}.steps span.now:after{border-color:var(--pop);background:var(--pop)}
.steps span.now:before{background:linear-gradient(to left,var(--leaf) 50%,#ddd 50%)}
[dir=rtl] .steps span.now:before{background:linear-gradient(to right,var(--leaf) 50%,#ddd 50%)}

/* ---------- footer ---------- */
.ftop{background:var(--navy-2);color:#fff;text-align:center;padding:14px;font-size:13px;margin-top:30px}
.ftop:hover{background:#37475a}
.ftr{background:var(--navy);color:#ddd;padding:40px 0 30px;font-size:13px}
.ftr .seo-links a{color:#bbb;padding:6px 4px;display:inline-block;line-height:1.4}
.ftr .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1000px;margin:0 auto}
@media(max-width:700px){.ftr .cols{grid-template-columns:repeat(2,1fr)}}
.ftr h4,.ftr .fh{color:#fff;font-size:15px;font-weight:700;margin-bottom:10px}
.ftr a{display:block;margin-bottom:6px}
.ftr a:hover{text-decoration:underline}
.fbot{border-top:1px solid #3a4553;margin-top:30px;padding-top:20px;text-align:center;color:#999;font-size:12px}
.fbot .logo{display:inline-block;margin-bottom:8px;color:#fff}

/* ---------- merchant ---------- */
.mnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:18px}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.stat small{color:var(--muted);display:block}
.stat b{font-size:24px}

/* ---------- bridge for form pages ---------- */
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;border:1px solid #888c8c;border-radius:4px;padding:7px 10px;box-shadow:0 1px 2px rgba(15,17,17,.15) inset;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--pop);box-shadow:0 0 0 3px rgba(255,122,69,.3)}
main button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--pop);color:#fff;border:0;border-radius:99px;padding:8px 16px;font-weight:700;cursor:pointer;white-space:nowrap}
main button:hover{background:var(--pop-deep)}
main button.sm{padding:5px 12px;font-size:13px}
main button.ghost,.btn.ghost{background:#fff;color:var(--ink);border:1px solid #d5d9d9}
.qty input{width:64px;text-align:center;border:1px solid #888c8c;border-radius:4px;padding:5px}
.card table{margin-bottom:8px}

/* ---------- cart / checkout ---------- */
.line{display:grid;grid-template-columns:96px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid #eee;align-items:start}
.line img{width:96px;height:96px;object-fit:cover;border-radius:6px;background:#f5f5f5}
.line .nm{font-size:16px;font-weight:500}
.line .nm:hover{color:#c7511f}
.line .acts{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:13px}
.line .acts a,.line .acts button{color:var(--link);background:none!important;border:0;padding:0!important;font-weight:400!important;cursor:pointer}
.line .acts a:hover,.line .acts button:hover{text-decoration:underline}
.line .acts .sep{color:#ccc}
.line select{border:1px solid #d5d9d9;border-radius:6px;padding:4px 8px;background:#f0f2f2;box-shadow:0 2px 5px rgba(213,217,217,.5)}
.line .lp{font-size:18px;font-weight:700;text-align:end}
.promo{background:#E6F4EA;border:1px solid #b7e1c3;color:var(--leaf);border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:10px}
.promo.warn{background:#FFF4E5;border-color:#ffd59a;color:#8a4b00}
.bar{height:6px;background:#ddd;border-radius:3px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--leaf)}
.sum{position:sticky;top:14px}
.sum .tot{display:flex;justify-content:space-between;font-size:18px;margin:6px 0 12px}
.sum .tot b{font-size:20px}
.secure{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:8px}
.ckstep{display:flex;gap:8px;align-items:center;margin-bottom:14px;font-size:13px;color:var(--muted)}
.ckstep b{color:var(--ink)}
.ckstep i{flex:1;height:1px;background:#ddd}
.pay{display:grid;gap:8px}
.pay label{display:flex;gap:10px;align-items:center;border:1px solid #d5d9d9;border-radius:6px;padding:10px 12px;font-weight:400;cursor:pointer}
.pay label.on{border-color:var(--pop);background:#FFF6F2;box-shadow:0 0 0 1px var(--pop)}
.pay input{width:auto!important}
.pay small{color:var(--muted);display:block}
.login{max-width:380px;margin:30px auto}
.login .card{padding:24px}
.login h1{font-size:26px;font-weight:500;margin-bottom:12px}
.ocard{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.owrap .ocard{color:inherit;text-decoration:none}
.oreorder{margin-top:10px;padding-top:10px;border-top:1px solid #eee;display:flex;justify-content:flex-end}
.ocard .imgs{display:flex;gap:6px;margin-top:8px}
.ocard .imgs img{width:56px;height:56px;object-fit:cover;border-radius:4px}
.ocard .imgs .ph{width:56px;height:56px;border-radius:4px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
/* A table inside a card, free to scroll instead of stretching the page.
   .tbl is the same idea plus a card of its own, which is wrong for a table that already sits
   in one — the admin dashboard has eight tables and only two were wrapped, so the page had a
   fixed 1598px width: 232px past a laptop and more than four screens wide on a phone. */
.sx{overflow-x:auto;max-width:100%}
.tbl{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 14px;overflow-x:auto}
.tbl table td{font-size:13px}
.tbl tr:hover td{background:#fafafa}
.line .acts button,.line .acts button:hover{background:none!important;color:var(--link)!important;padding:0!important;font-weight:400!important;border-radius:0}
.rail{direction:rtl;justify-content:flex-start}
.rate{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rate input[name=body]{flex:1;min-width:160px;border:1px solid #d5d9d9;border-radius:4px}
.starpick{display:inline-flex;flex-direction:row-reverse;gap:1px}
.starpick input{display:none}
.starpick label{font-size:22px;color:#ccc;cursor:pointer;line-height:1}
.starpick label:hover,.starpick label:hover~label,.starpick input:checked~label{color:var(--gold)}

/* ---------- suggestions / hearts / toast ---------- */
.srch{position:relative}
.sugg{position:absolute;top:100%;inset-inline:0;background:#fff;color:var(--ink);border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;max-height:70vh;overflow:auto;text-align:start}
.s-row{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #f2f2f2;font-size:14px}
.s-row:hover,.s-row.on{background:#FFF6F2}
.s-row img{width:36px;height:36px;object-fit:cover;border-radius:4px}
.s-row .s-ic{width:36px;text-align:center;font-size:18px}
.s-row small{display:block;color:var(--muted);font-size:12px}
.s-all{color:var(--link);font-weight:700}
.heart{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#999;box-shadow:var(--shadow);z-index:2}
.heart:hover{color:var(--danger)}
.heart.on{color:var(--danger)}
.heart.on:after{content:"♥"}.heart:not(.on):after{content:"♡"}
/* Inline variant for the product page: a labelled button in the buybox rather than a
   floating badge over a thumbnail. */
.heart.inline{position:static;width:auto;height:auto;border-radius:8px;background:#fff;border:1px solid #d5d9d9;box-shadow:none;gap:6px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);align-self:stretch;justify-content:center}
.heart.inline:after{order:-1;font-size:16px;color:#999}
.heart.inline.on:after{color:var(--danger)}
.heart.inline:hover{border-color:var(--danger);color:var(--danger)}
.pc form button.ok{background:var(--leaf);color:#fff}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.25s;z-index:100;font-size:14px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.warn{background:#8a4b00}
.toast a{color:var(--gold);font-weight:700;margin-inline-start:8px}
.optpick .chip.on{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.optpick .chip.on .muted{color:#ddd}

/* ---------- accessibility ---------- */
.sr-only{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;top:-60px;inset-inline-start:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:6px;z-index:200}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--pop);outline-offset:2px}
.a11y-btn{position:fixed;bottom:20px;inset-inline-start:16px;width:44px;height:44px;border-radius:50%;background:var(--navy-2);color:#fff;border:0;font-size:20px;cursor:pointer;z-index:90;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.a11y{position:fixed;bottom:72px;inset-inline-start:16px;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:12px;display:grid;gap:6px;z-index:90;min-width:180px}
.a11y button{background:#f3f3f3;color:var(--ink);border:1px solid #ddd;border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;text-align:start}
.a11y a{color:var(--link);font-size:12px;text-align:center}
.a11y button.on{background:var(--navy-2);color:#fff;font-weight:700}.a11y button.on::after{content:' ✓'}
html.a11y-big{font-size:125%}
html.a11y-contrast body{background:#000;color:#fff}html.a11y-contrast .card,html.a11y-contrast .pc,html.a11y-contrast .sc,html.a11y-contrast .band,html.a11y-contrast .tile,html.a11y-contrast .empty,html.a11y-contrast .tbl,html.a11y-contrast .stat{background:#111;color:#fff;border:1px solid #888}html.a11y-contrast .muted{color:#ccc}html.a11y-contrast a{color:#9cf}html.a11y-contrast .price,html.a11y-contrast .nm{color:#fff}
html.a11y-links a{text-decoration:underline!important}
html.a11y-motion *{transition:none!important;animation:none!important;scroll-behavior:auto!important}

/* ---------- performance: skip layout for off-screen sections ---------- */
.band,.ftr{content-visibility:auto;contain-intrinsic-size:auto 520px}
.grid>.pc{content-visibility:auto;contain-intrinsic-size:auto 360px}
.guide{font-size:16px;line-height:1.8}.guide h1{font-size:28px;font-weight:700;line-height:1.25}.guide h2{font-size:21px;margin:22px 0 8px}.guide h3{font-size:17px;margin:16px 0 6px}.guide p{margin:0 0 12px}.guide ul{padding-inline-start:22px;margin:0 0 12px}.guide a{color:var(--link);text-decoration:underline}
[hidden]{display:none!important}
.tile .q img,.cat img,.ocard .imgs img{height:auto}
.pp .gallery img{height:auto;max-height:70vh}
@media(max-width:899px){.pp .gallery img{aspect-ratio:4/3;max-height:48vh}.pp h1{font-size:20px}}
.sc .cv .badge.demo{inset-inline-start:auto;inset-inline-end:8px;background:#FFF4E5;color:#8a4b00}
@media(max-width:600px){.a11y-btn{width:36px;height:36px;font-size:16px;bottom:12px;inset-inline-start:10px;opacity:.85}
    /* The circle stays 36px so it keeps out of the way on a small screen, but the area that
       answers a tap is 44px. This is the control someone with an unsteady hand reaches for
       first, and it was the smallest target on every page. */
    .a11y-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%}}
.olist{display:none;gap:8px}
@media(max-width:700px){.tbl-desktop{display:none}.olist{display:grid}}
.ck-mini{display:none;padding:10px 14px;margin-bottom:12px;position:sticky;top:8px;z-index:5}
.ck-mini summary{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px}
.ck-mini summary::-webkit-details-marker{display:none}
@media(max-width:899px){.ck-mini{display:block}.two .sum{position:static}}
.pc-out .img img{filter:grayscale(.6);opacity:.75}.pc-out .nm,.pc-out .price{color:var(--muted)}
@media(max-width:899px){.sell-grid{display:flex;flex-direction:column}.sell-grid .sell-side{order:2}.sell-grid form{order:1}}
.mtabs{display:flex;gap:0;border-bottom:2px solid #ddd;margin:0 0 14px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.mtabs a{padding:8px 14px;margin-bottom:-2px;border-bottom:2px solid transparent;font-weight:700;color:var(--muted);flex:none}
.mtabs a.on{color:var(--ink);border-color:var(--pop)}
.mtabs a:hover{color:var(--ink)}
.mbadge{display:inline-block;background:var(--danger);color:#fff;border-radius:99px;padding:0 7px;font-size:12px;line-height:18px;margin-inline-start:4px;vertical-align:middle}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag-chip{font-size:11px;background:#EEF3EE;color:#1F5A35;border-radius:4px;padding:1px 6px;white-space:nowrap}
.tag-chip.warn{background:#FFF1E6;color:#9A3B00}
.rail>.pc{content-visibility:auto;contain-intrinsic-size:200px 380px}
.tile{content-visibility:auto;contain-intrinsic-size:auto 360px}
@media(max-width:760px){.pform{grid-template-columns:1fr!important}.pform>div{position:static!important}}

/* Mobile buy bar. The buybox is position:sticky, which works on desktop where it is a side
   column; on a phone .pp collapses to one column and the add-to-cart button lands 288px
   below the fold. Desktop is untouched — the bar does not exist above 899px. */
.buybar{display:none}
@media(max-width:899px){
    .buybar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:95;gap:12px;align-items:center;
        background:#fff;border-top:1px solid var(--line);padding:10px 14px;
        box-shadow:0 -4px 14px rgba(0,0,0,.12);transition:transform .18s ease}
    .buybar .bb-price{font-size:19px;font-weight:600;white-space:nowrap}
    .buybar .bb-price .cur{font-size:13px;vertical-align:top;position:relative;top:3px}
    .buybar .btn{flex:1;margin:0;text-align:center}
    .buybar.gone{transform:translateY(110%)}
    /* The accessibility button is fixed to the same corner and must not be sat on. The class
       comes from the page rather than body:has(.buybar): this codebase measured :has() and
       took it out, and home went 88 → 91 for it. */
    .has-buybar .a11y-btn{bottom:80px}
    .has-buybar .a11y{bottom:132px}
    .has-buybar .toast{bottom:80px}
    .has-buybar .ftr{padding-bottom:72px}
}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}

/* Touch targets. .btn computes to 37px tall and .btn.sm to 30px — over the WCAG 2.2 AA floor
   of 24px, under the 44px Apple and Google both ask for. On the buying path that 37px button
   is "לתשלום" on the cart: the last thing a thumb has to hit before checkout. Height only, so
   nothing reflows horizontally; a phone has the vertical room. */
@media(max-width:899px){
    .btn{min-height:44px}
    .btn.sm{min-height:44px}
    /* "הסר" on a cart line is styled as a text link — padding:0!important — so it measured
       20×22 on a phone. WCAG 2.2 AA (2.5.8) asks 24×24 and it cleared neither, on the page
       where a mis-tap costs the shopper an item.
       The hit area grows, the link does not: mostly vertically, and only 4px to each side,
       because the quantity control sits 10px away behind a separator and a target that
       reached it would delete things people meant to count. */
    .line .acts button{position:relative}
    .line .acts button::after{content:"";position:absolute;top:-12px;bottom:-12px;left:-4px;right:-4px}
}

/* ── Operations console ──────────────────────────────────────────────────────────────────
   Admin screens used to extend the storefront layout, so running the business meant looking
   past a product search, a cart badge and the category subnav. This is the console's own
   chrome: a grouped sidebar that stays put, and a body that scrolls under it. */
body.adm{background:var(--bg-2,#f3f4f4);margin:0}
.adm-side{position:fixed;inset-block:0;inset-inline-start:0;width:236px;background:var(--navy,#131921);color:#e6e8ea;
    overflow-y:auto;padding:0 0 20px;z-index:60;display:flex;flex-direction:column}
.adm-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px 12px;position:sticky;top:0;background:var(--navy,#131921);z-index:1}
.adm-brand a{color:#fff;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.3px}
.adm-brand a span{font-weight:400;font-size:13px;opacity:.65;letter-spacing:0}
.adm-close{display:none;background:none;border:0;color:#e6e8ea;font-size:19px;cursor:pointer;min-height:44px;min-width:44px}
.adm-group{padding:14px 16px 5px;font-size:11px;font-weight:700;letter-spacing:.09em;opacity:.5;text-transform:uppercase}
.adm-nav{list-style:none;margin:0;padding:0}
.adm-nav a{display:flex;align-items:center;gap:10px;padding:9px 16px;color:#cfd4d8;text-decoration:none;font-size:14px;
    border-inline-start:3px solid transparent;min-height:40px}
.adm-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.adm-nav a.on{background:rgba(255,255,255,.10);color:#fff;border-inline-start-color:var(--pop);font-weight:600}
.adm-nav .ic{width:18px;text-align:center;font-size:14px;flex:none}
.adm-nav .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A number here is a queue with somebody waiting at the end of it. */
.adm-nav .ct{flex:none;background:rgba(255,255,255,.16);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.adm-nav .ct.hot{background:var(--danger,#b12704)}
.adm-nav .ct.gold{background:var(--gold,#febd69);color:#131921}
.adm-exit{margin-top:auto;padding:14px 16px 0;color:#9aa3ab;font-size:13px;text-decoration:none}
.adm-exit:hover{color:#fff}

.adm-main{margin-inline-start:236px;min-height:100vh;display:flex;flex-direction:column}
.adm-top{display:flex;align-items:center;gap:12px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line,#d5d9d9);position:sticky;top:0;z-index:50}
.adm-top h1{font-size:18px;font-weight:600;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;min-height:44px;min-width:44px}
.adm-env{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.adm-env .tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.adm-env .tag.hot{background:#fdecea;color:var(--danger,#b12704);border:1px solid #f5c6c0}
.adm-env .tag.gold{background:#fff6e6;color:#8a6100;border:1px solid #ffe0a3}
.adm-env .tag.ok{background:#eaf7ee;color:#0f7b34;border:1px solid #bfe6cc}
.adm-body{padding:18px 20px 40px;flex:1}
.adm-body>.card,.adm-body>.band{max-width:1180px}
.adm-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}

@media(max-width:899px){
    .adm-side{transform:translateX(100%);transition:transform .2s ease;width:270px}
    body.adm-open .adm-side{transform:none}
    body.adm-open .adm-scrim{display:block}
    .adm-close,.adm-burger{display:block}
    .adm-main{margin-inline-start:0}
    .adm-body{padding:14px 12px 32px}
    .adm-top{padding:8px 12px}
    /* The console is run from a phone. Nothing here may push the page sideways. */
    .adm-body table{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.adm-side{transition:none}}

/* Console panels that read independently sit side by side when there is room. The dashboard
   was a single 5,000px column on a 1440px screen with half the width unused — every panel
   full-width whether it had a table in it or four numbers. */
.adm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:0 18px;align-items:start}
.adm-cols>*{min-width:0}
@media(max-width:899px){.adm-cols{grid-template-columns:minmax(0,1fr);gap:0}}
/* Readiness checks: scanned for the red ones, not read in order. */
.adm-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px;margin-top:12px;align-items:start}
.adm-checks>*{min-width:0}

/* ── Console design language ─────────────────────────────────────────────────────────────
   Every screen was inventing its own spacing. Six different .stats grids — 130px tiles here,
   260px there — and forty-odd inline variants of "the muted line under the title". These are
   the four shapes a console screen is built from, so a new screen inherits the language
   instead of guessing at it. */

/* The sentence under the page title. One size, one spacing, everywhere. */
.adm-intro{color:var(--muted,#565959);font-size:13px;margin:0 0 14px;max-width:78ch}

/* Filters and page-level actions. Wraps rather than pushing the page sideways. */
.adm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.adm-bar .spacer{margin-inline-start:auto}

/* Numbers. One tile size, filling the width — not four tiles hugging one edge with the rest
   of the row empty, which is what the settlements screen did. */
/* auto-fit, not auto-fill: auto-fill keeps the empty tracks, so four tiles sat in a six-column
   row hugging one edge with a third of the width blank — which is what the settlements screen
   looked like. auto-fit collapses the empty tracks and the tiles stretch to fill. */
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:0 0 16px}
.adm-stats .stat{background:#fff;border:1px solid var(--line,#d5d9d9);border-radius:var(--radius,8px);padding:12px 14px}
.adm-stats .stat small{display:block;color:var(--muted,#565959);font-size:12px}
.adm-stats .stat b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}

/* Cards of equal standing, laid out in a grid — the shape /admin/ops already used and the
   rest of the console did not. */
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.adm-cards>*{min-width:0}
@media(max-width:899px){
    .adm-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
    .adm-cards{grid-template-columns:minmax(0,1fr)}
}

/* A file picker that looks like the rest of the console. The native control prints
   "Choose File / No file chosen" in English, which on a Hebrew RTL table meant twenty-four
   rows of browser chrome in the wrong language and the wrong direction. */
.adm-file{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:5px 10px;font-size:12px;
    border:1px solid var(--line,#d5d9d9);border-radius:99px;background:#fff;color:var(--ink,#0f1111);
    cursor:pointer;min-height:32px;white-space:nowrap}
.adm-file:hover{border-color:var(--pop);color:var(--pop)}
.adm-file input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Keyboard users get the ring on the label, since the input itself is not drawn. */
.adm-file:focus-within{outline:2px solid var(--pop);outline-offset:2px}

/* ── Merchant portal ─────────────────────────────────────────────────────────────────────
   Nine merchant views extended the storefront, so a baker accepting an order was shown a
   marketplace search box, a cart with 0 in it and the category subnav first. Her own tabs
   (.mtabs) were good and are untouched; this is the chrome around them. */
body.mrc{background:var(--bg-2,#f3f4f4)}
.mrc-top{background:var(--navy,#131921);color:#fff;position:sticky;top:0;z-index:50}
.mrc-top .wrap{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap}
.mrc-brand{color:#fff;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.3px}
.mrc-brand span{font-weight:400;font-size:13px;opacity:.65;letter-spacing:0}
.mrc-who{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.mrc-who .tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.mrc-who .tag.ok{background:#eaf7ee;color:#0f7b34}
.mrc-who .tag.hot{background:#fdecea;color:var(--danger,#b12704)}
.mrc-view{color:#cfd4d8;font-size:13px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.mrc-view:hover{color:#fff;text-decoration:underline}
.mrc-body{padding:18px 0 40px;min-height:70vh}
.mrc-foot{border-top:1px solid var(--line,#d5d9d9);background:#fff;color:var(--muted,#565959);font-size:13px}
.mrc-foot .wrap{padding:16px 0}
@media(max-width:899px){
    .mrc-top .wrap{padding:8px 0;gap:8px}
    .mrc-brand{font-size:17px}
    .mrc-body{padding:12px 0 32px}
}