@charset "UTF-8";
:root{
  --paper:#FFFFFF; --card:#FFFFFF; --sunk:#F3F4F6; --tile-photo:#F5F6F8;
  --ink:#0E1320; --body:#1D2333; --muted:#555C6A; --line:#E5E7EC; --line-soft:#EEF0F3;
  --brand:#0B3B71; --brand-hover:#082D57; --brand-ink:#FFFFFF; --brand-soft:#F1F5FA; --brand-text:#0F4A8A; --brand-deep:#072347;
  --cta:#121417; --cta-hover:#2A2E36; --cta-ink:#FFFFFF;
  --blue:#1B4B82; --blue-deep:#123A69;   /* the blue of the "Deliver to" strip, so Add to cart and search match it (Lior, 2026-09-16) */
  --ok:#1F7A4D; --ok-bg:#E4F3EA; --danger:#A3283A; --gold:#B7791F;
  --shadow:0 1px 2px rgba(18,25,43,.05),0 14px 34px -18px rgba(18,25,43,.28);
  --shadow-lg:0 24px 60px -24px rgba(18,25,43,.45);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--body);font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
h1,h2,h3,h4{font-family:"Outfit","Plus Jakarta Sans",sans-serif;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
button{font:inherit;cursor:pointer}
/* Reicon icons (2026-10-07): filled shapes in currentColor, sized by width/height, never given fill or stroke here. A
   pair holds both weights and shows the filled one while its control is on (a saved heart, an alert, the picked view). */
svg.ri{flex:none}
.ri-pair .ri-f,[aria-pressed="true"] .ri-pair .ri-o{display:none}
[aria-pressed="true"] .ri-pair .ri-f{display:inline}
input,select,textarea{font-family:inherit}   /* controls keep the store font (Lior, 2026-09-15: same fonts all across) */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
/* full width on every screen (Lior, 2026-10-07: "I need the website to be full width"; it stopped at 1440px) */
.wrap{max-width:none;margin:0 auto;padding-inline:clamp(16px,2.2vw,40px)}
/* a product address for an item we no longer carry: plain words above home, no box */
.gone-note{padding:22px 0 10px}
.gone-note h1{font-size:clamp(22px,2.4vw,28px)}
.gone-note p{margin:6px 0 0;color:var(--muted);font-size:16px}
.gone-item{display:flex;gap:14px;align-items:flex-start;margin:12px 0 4px;max-width:640px}
.gone-item img{width:64px;height:64px;flex:none;object-fit:contain;border-radius:10px;background:var(--tile-photo);mix-blend-mode:multiply}
.gone-item b{display:block;font-size:15px;line-height:1.35;color:var(--ink)}
.gone-item p{margin:4px 0 0;font-size:14.5px}
.gone-item .gone-notify{margin-top:10px;height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--brand);background:#fff;color:var(--brand);font-weight:700;font-size:14px}
.gone-note .rcard{margin-top:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#seoIntro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{border-radius:999px;padding:13px 22px;font-weight:700;font-size:15px;border:1.5px solid transparent;white-space:nowrap;transition:all .14s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{background:var(--brand-hover)}}
.btn.dark{background:var(--cta);color:var(--cta-ink)}
@media (hover:hover) and (pointer:fine){.btn.dark:hover{background:var(--cta-hover)}}
.btn.secondary{background:var(--card);color:var(--ink);border-color:var(--cta)}
@media (hover:hover) and (pointer:fine){.btn.secondary:hover{background:var(--sunk)}}
.btn.light{background:#fff;color:var(--brand-deep)}
@media (hover:hover) and (pointer:fine){.btn.light:hover{background:#EEF2F8}}
.btn.block{width:100%}
.btn.sm{padding:9px 16px;font-size:13.5px}

/* announcement + header */
.closedbar{background:#FFF4E0;color:#6B3A00;border-bottom:1px solid #F1C98A;text-align:center;font-size:13.5px;font-weight:600;padding:10px 16px}
/* the app bar at the very top of the phone page, Amazon's thin strip (2026-10-17): it scrolls away with the page */
.appbar{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 6px;background:#F2F3F5;border-bottom:1px solid var(--line)}
.appbar[hidden]{display:none}
.apb-x{width:30px;height:30px;flex:none;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer}
.apb-ico{width:40px;height:40px;flex:none;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.apb-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.apb-t b{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apb-t span{font-size:12.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apb-go{flex:none;padding:6px 18px;background:none;border:1.5px solid var(--brand);border-radius:999px;color:var(--brand);font-size:14.5px;font-weight:700;text-decoration:none}
@media (min-width:761px){.appbar{display:none!important}}
.top{background:#000;color:#fff;text-align:center;font-size:14px;font-weight:500;padding:9px 12px;line-height:1.35;position:sticky;top:0;z-index:31}   /* sticks above the header, phones included (Lior, 2026-09-15) */
/* announcement colors picked in admin Settings (Lior, 2026-09-15) */
.top.c-blue{background:#1B4B82}.top.c-red{background:#B42336}.top.c-green{background:#1F7A4D}.top.c-yellow{background:#FFC94D;color:#0F1111}
.top b{color:#FFD98A}
.top a{color:inherit;text-decoration:none}@media (hover:hover) and (pointer:fine){.top a:hover{text-decoration:underline}}
.hdr{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:var(--topH,0px);z-index:30}
.hdr-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding-block:13px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--brand)}
.logo img,.logo svg{height:34px;width:auto;display:block}
/* blue top bar: white logo, white search field, white cart */
.hdr-bar{background:var(--hdr);color:#fff}   /* the header color (--hdr), with the category row under it */
.hdr-bar .logo{color:#fff}
.hdr-bar .logo img,.hdr-bar .logo svg{height:34px}
/* the four tiles beside the name (Lior, 2026-10-03: "add the tiles next to the shopimo"), white on the blue bar */
.hdr-bar .iconbtn{color:#fff}
@media (hover:hover) and (pointer:fine){.hdr-bar .iconbtn:hover{background:rgba(255,255,255,.12)}}
.hdr-bar .iconbtn small{color:rgba(255,255,255,.72)}
.hdr-bar .iconbtn b{color:#fff}
.hdr-bar .search .box{border-color:transparent}   /* its background, focus ring and the cart's look are set with the search bar below */
.hdr .catnav{border-top:0}
.hdr-actions{display:flex;align-items:center;gap:6px}
.iconbtn{display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;color:var(--body);border-radius:999px;padding:9px 13px;font-weight:600;font-size:13.5px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.iconbtn:hover{background:var(--sunk)}}
.iconbtn small{display:block;font-weight:500;color:var(--muted);font-size:11px;line-height:1.1}
.iconbtn b{display:block;line-height:1.1;color:var(--ink)}
.cartbtn{display:flex;align-items:center;gap:9px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;transition:background .14s}
@media (hover:hover) and (pointer:fine){.cartbtn:hover{background:var(--cta-hover)}}
.cartbtn .count{background:var(--cta-ink);color:var(--cta);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:700;padding:0 6px}
.cartbtn.bump .count{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.3)}}
.menubtn{display:none}

/* search + autocomplete */
.search{position:relative;max-width:620px;width:100%;justify-self:center}
.search .box{display:flex;align-items:center;gap:9px;background:var(--sunk);border:1.5px solid var(--line-soft);border-radius:999px;padding:9px 16px;transition:all .14s}
.search .box:focus-within{background:var(--card);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.search svg{flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:14.5px;outline:none}
.search input::placeholder{color:var(--muted)}
.ac{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:40}
.ac .lab{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:12px 16px 4px}
.ac .opt{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;color:var(--ink);font-size:14px;text-align:left;width:100%;background:none;border:0}
.ac .opt[aria-selected="true"]{background:var(--brand-soft)}@media (hover:hover) and (pointer:fine){.ac .opt:hover{background:var(--brand-soft)}}
.ac .opt .t{width:40px;height:40px;background:var(--tile-photo);border-radius:8px;display:grid;place-items:center;padding:4px;flex:none}
.ac .opt .t img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ac .opt .n{flex:1;min-width:0;line-height:1.3}
.ac .opt .n small{display:block;color:var(--muted);font-size:12px}
.ac .opt .p{font-weight:700;white-space:nowrap}
.ac mark{background:none;color:var(--brand-text);font-weight:700}
.ac .opt.sug{font-size:15px;padding:10px 16px}
.ac .opt.sug .n{font-weight:400}
.ac .opt.sug b{font-weight:700}
.ac .opt.cat svg{color:var(--brand-text);flex:none}
.ac .all{border-top:1px solid var(--line-soft);font-weight:600;color:var(--brand-text)}
.ac .none{padding:16px;color:var(--muted);font-size:13.5px}

/* category nav with subcategory panels */
/* one line always: items spread across the width; whatever doesn't fit folds into "More" (fitNav) */
.catnav{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0 2px;align-items:center;border-top:1px solid var(--line-soft);position:relative;margin:0;padding:0}
.catnav>li.more .panel{left:auto;right:0;min-width:230px}
.catnav>li{list-style:none;position:relative}
.cat[aria-expanded="true"] svg{transform:rotate(180deg)}
.panel{position:absolute;top:100%;left:0;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:var(--shadow-lg);padding:10px 8px 12px;z-index:35;display:grid;gap:2px}
.panel a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--body);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer}
@media (hover:hover) and (pointer:fine){.panel a:hover{background:var(--brand-soft);color:var(--brand-text)}}
.panel a small{color:var(--muted);font-weight:500;font-size:12px}
.panel a.all{color:var(--brand-text);font-weight:700;border-top:1px solid var(--line-soft);margin-top:4px;border-radius:0 0 10px 10px}
.deals{color:var(--gold)!important}

/* sections below the first screen are laid out and painted only when scrolled near (a big saving on phones) */
#sections > :nth-child(n+3),#alsoLike,footer{content-visibility:auto;contain-intrinsic-size:auto 480px}
/* loading placeholders (the catalog fills these in a moment later) */
/* nothing is drawn until the catalog is in: no placeholder cards (Lior, 2026-09-15: "blank cards ... weird") */
#gridTop:empty,#sections:empty,#grid:empty{display:none}
#hero:has(#slides:empty){display:none}   /* and no empty hero box either */
html.booting-page #home{display:none}   /* no empty white box while the catalog loads */
html.booting-page #hero{visibility:hidden}
/* and no footer standing in for the page: an ad visitor on a phone saw the footer and its App Store button for two seconds
   before the product arrived (load test on 4G, 2026-10-12) */
html.booting-page footer.site{display:none}
/* hero banners */
.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;padding:22px 0 8px}
.banner{border-radius:10px;padding:40px 42px;position:relative;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.banner.main{background:#000;color:#fff}
.banner.main .kicker{color:#FFD98A}
.banner.main h1{color:#fff;font-size:clamp(30px,4vw,50px);font-weight:700;max-width:15ch}
.banner.main p{margin:12px 0 22px;font-size:16px;max-width:46ch;color:rgba(255,255,255,.86)}
.banner .deco{position:absolute;right:-60px;top:-70px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.07)}
.banner .deco2{position:absolute;right:80px;bottom:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brand-text);margin:0 0 10px}
.ribbon{position:absolute;top:16px;left:16px;background:var(--cta);color:var(--cta-ink);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;z-index:1}

/* hero carousel */
.carousel{padding:0}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 42px;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease;pointer-events:none;background-image:var(--bg)}
.pbanner,.pbanner.soft .ph{background-image:var(--bg)}
/* phones get their own crop when one is provided (a near-square hero, a 3:2 banner) */
@media (max-width:760px){.slide,.pbanner,.pbanner.soft .ph{background-image:var(--bgm,var(--bg))}}
.slide.on{opacity:1;pointer-events:auto}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,46,.72) 0%,rgba(7,22,46,.38) 50%,rgba(7,22,46,.08) 100%)}
.slide .in{position:relative;max-width:50ch}
.slide .kicker{color:#FFD98A}
.slide h2{color:#fff;font-size:clamp(28px,3.8vw,46px);font-weight:700;max-width:15ch}
.slide .t{margin:12px 0 22px;font-size:16px;max-width:46ch;color:rgba(255,255,255,.88)}
.cnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);z-index:2;transition:background .14s}
@media (hover:hover) and (pointer:fine){.cnav:hover{background:rgba(255,255,255,.32)}}
.cnav.prev{left:14px}.cnav.next{right:14px}
.dots{position:absolute;right:20px;bottom:18px;display:flex;gap:6px;z-index:2}
.dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.45);padding:0;transition:all .2s}
.dots button[aria-selected="true"]{background:#fff;width:22px}

/* promise chips: rounded pills with an icon in a tinted circle, centered and wrapping */
/* trust pills: white pills on a full-width bar in the store's blue (Lior, 2026-09-15) */

/* category tiles */
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:320px;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin;overscroll-behavior-x:contain;scroll-behavior:smooth}
@media (max-width:640px){.tiles{grid-auto-columns:82vw;gap:8px}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;transition:all .14s}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .25s}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.05)}}
.tile .name{display:block;padding:10px 8px 12px}
.tile .ic{margin:14px auto 0}
@media (hover:hover) and (pointer:fine){.tile:hover{color:var(--brand-text)}}   /* no frame, shadow or lift on hover (Lior, 2026-09-27) */
.tile .ic{width:46px;height:46px;border-radius:999px;background:var(--sunk);color:var(--ink);display:grid;place-items:center}

/* photo banners */
.pbanner{position:relative;border-radius:10px;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;padding:30px 34px;color:#fff;background-size:cover;background-position:center;cursor:pointer;isolation:isolate}
.pbanner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,22,46,.86) 0%,rgba(7,22,46,.45) 55%,rgba(7,22,46,.1) 100%)}
.pbanner.black::before{background:linear-gradient(90deg,rgba(12,13,16,.88) 0%,rgba(12,13,16,.5) 55%,rgba(12,13,16,.12) 100%)}
.pbanner.blue::before{background:linear-gradient(90deg,rgba(11,59,113,.97) 0%,rgba(11,59,113,.86) 40%,rgba(11,59,113,.18) 100%)}   /* the store's blue over a light photo */
.pbanner.light{color:var(--ink)}
.pbanner.light::before{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.05) 100%)}
.pbanner.light .kicker{color:var(--brand-text)}
.pbanner.light h3{color:var(--ink)}
.pbanner.light p{color:var(--body)}
.pbanner.light .btn{background:var(--brand);color:#fff}
.pbanner .in{max-width:46ch}
/* On a computer the page is wide (full width since 2026-10-07) and a 3:2 photo laid across it at 250 px showed a thin strip
   (Lior: "all the backgrounds are cropped not good"): the photo keeps its own shape on the right, and the words sit on a
   panel of the banner's colour that fades into it. Phones and tablets keep the photo behind the words. */
@media (min-width:1100px){
  .pbanner:not(.soft),.btrack .pbanner:not(.soft){--pbh:clamp(280px,21vw,400px);--pbw:calc(var(--pbh) * 1.5);--pbc:7 22 46;min-height:var(--pbh);align-items:center;
    background-color:rgb(var(--pbc));background-size:auto 100%;background-position:right center;background-repeat:no-repeat}
  .pbanner.black:not(.soft){--pbc:12 13 16}
  .pbanner.blue:not(.soft){--pbc:11 59 113}
  .pbanner.light:not(.soft){--pbc:255 255 255}
  .pbanner:not(.soft)::before,.pbanner.black:not(.soft)::before,.pbanner.blue:not(.soft)::before,.pbanner.light:not(.soft)::before{
    background:linear-gradient(90deg,rgb(var(--pbc)) 0,rgb(var(--pbc)) calc(100% - var(--pbw)),rgb(var(--pbc) / 0) calc(100% - var(--pbw) + 180px))}
}
/* Shop the aisle (Lior, 2026-10-22, B of docs/banner-options): on a computer the panel takes the photo's own colour (--pbc
   from the build), a light photo gets dark words, and the department's products fill the space before the photo */
.bshop{display:none}
@media (min-width:1100px){
  .pbanner.pl:not(.soft) .kicker{color:var(--brand-text)}
  .pbanner.pl:not(.soft) h3{color:var(--ink)}
  .pbanner.pl:not(.soft) p{color:var(--body)}
  .pbanner.pl:not(.soft) .btn.light{background:var(--brand);color:#fff}
  .pbanner.hasshop:not(.soft) .in{flex:none;max-width:300px}
  .pbanner.hasshop:not(.soft) .bshop{display:flex;flex-wrap:wrap;align-content:flex-start;gap:16px;flex:1 1 0;min-width:0;height:196px;overflow:hidden;margin:0 calc(var(--pbw) - 18px) 0 36px}
  .btrack .pbanner.hasshop:not(.soft) .bshop{margin-right:calc(var(--pbw) - 68px)}
  .bst{flex:none;width:124px;display:block;color:rgba(255,255,255,.9);text-decoration:none}
  .bst .im{display:grid;place-items:center;width:124px;height:124px;border-radius:8px;background:#fff;overflow:hidden}
  .bst .im img{width:86%;height:86%;object-fit:contain}
  .bst .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 2px;font-size:12.5px;line-height:1.3;font-weight:500}
  .bst .pr{display:block;font-weight:800;font-size:16px;color:#fff}
  .pbanner.pl .bst{color:var(--body)}
  .pbanner.pl .bst .pr{color:var(--ink)}
  .bst:focus-visible .nm{text-decoration:underline}@media (hover:hover) and (pointer:fine){.bst:hover .nm{text-decoration:underline}}
}
/* Soft banners (Lior, 2026-09-17: "different layouts, different tile order, soft background colors"): a pastel ground
   with the photo in its own panel, text left or right, or a short band with a round photo. Which banner gets which
   layout and colour rotates by the day, so the front page is not the same every visit. */
.pbanner.soft{color:var(--ink);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:22px;padding:26px 30px;min-height:230px;background-image:none}
.pbanner.soft::before{display:none}
.pbanner.soft .kicker{color:var(--brand-text)}
.pbanner.soft h3{color:var(--ink)}
.pbanner.soft p{color:var(--body)}
.pbanner.soft .btn{background:var(--brand);color:#fff}
.pbanner.soft .ph{border-radius:12px;overflow:hidden;align-self:stretch;min-height:180px;background:#fff center/cover no-repeat;background-image:var(--bg)}
.pbanner.soft.rev{grid-template-columns:1fr 1.1fr}
.pbanner.soft.rev .ph{order:-1}
.pbanner.soft.band{grid-template-columns:84px 1fr;min-height:0;padding:16px 22px;gap:18px}
.pbanner.soft.band .ph{width:84px;height:84px;border-radius:50%;min-height:0;align-self:center}
.pbanner.soft.band .in{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.pbanner.soft.band .kicker{width:100%;margin:0}
.pbanner.soft.band h3{font-size:19px;margin:0}
.pbanner.soft.band p{margin:0;flex:1 1 30ch}
.pbanner.mint{background-color:#E6F4EA}.pbanner.sky{background-color:#E4EEF9}.pbanner.sand{background-color:#F7EFE1}.pbanner.blush{background-color:#F9E8E8}.pbanner.lavender{background-color:#EEEAF8}.pbanner.lemon{background-color:#FBF4D6}
.btrack .pbanner.soft{padding:22px 84px}
.pbanner .kicker{color:#FFD98A}
.pbanner h3{color:#fff;font-size:clamp(22px,2.6vw,32px);font-weight:700}
.pbanner p{margin:8px 0 16px;color:rgba(255,255,255,.88);font-size:14.5px}
.pbanner .btn{padding:11px 18px;font-size:14px}
/* department photo cards: one full-width card at a time, swipe or use the arrows; dots below */
.brow{padding:18px 0 6px}
.bwrap{position:relative}
.btrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:10px}
.btrack::-webkit-scrollbar{display:none}
.btrack .pbanner{flex:0 0 100%;scroll-snap-align:start;min-height:260px;padding:30px 84px}   /* side room for the arrows; no snap-stop, so a flick glides instead of halting on every banner (Lior, 2026-09-16) */
.bdots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.bdots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--line);padding:0;transition:all .2s}
.bdots button[aria-selected="true"]{background:var(--brand);width:22px}
.bwide{padding:18px 0 6px}
/* the packaging band halfway down the home page: the store's blue with the words, the photo beside it (Lior, 2026-09-19) */
.brandroll{margin:38px 0;padding:8px 0}
.brandroll h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 22px;text-align:center}
.brrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brrow+.brrow{margin-top:12px}
.brtrack{display:flex;align-items:center;gap:clamp(22px,3.4vw,40px);width:max-content;animation:broll 150s linear infinite}
.brrow.rev .brtrack{animation-direction:reverse}
.brtrack:focus-within,.brandroll.idle .brtrack{animation-play-state:paused}@media (hover:hover) and (pointer:fine){.brandroll:hover .brtrack{animation-play-state:paused}}   /* idle: off screen (2026-10-04) */
.bchip{flex:0 0 auto;border:0;background:none;padding:0;font-size:clamp(14px,1.7vw,19px);font-weight:700;letter-spacing:-.01em;color:var(--ink);opacity:.5;white-space:nowrap;cursor:pointer;transition:opacity .18s ease,color .18s ease}
@media (hover:hover) and (pointer:fine){.bchip:hover{opacity:1;color:var(--brand-text)}}
@keyframes broll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.brtrack{animation:none}.brrow{overflow-x:auto}}
.packband{display:grid;grid-template-columns:minmax(300px,36%) 1fr;border-radius:10px;overflow:hidden;background:#072347;color:#fff;margin:18px 0 6px}
.packband .in{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.packband .kicker{margin:0;color:#FFD98A;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.packband h2{margin:0;color:#fff;font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.15;text-wrap:balance}
.packband p{margin:0;color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.55;max-width:46ch}
.packband .btn{align-self:flex-start;margin-top:6px}
.packband .ph{min-height:290px;background:#E9E6E1 var(--bg) 58% 55%/cover no-repeat}

/* sections */
.section{padding:22px 0 8px}
.section.also{margin-top:26px;border-top:1px solid var(--line);padding-top:28px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-head h2{font-size:clamp(21px,2.3vw,27px);font-weight:600}
.sec-head p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.seeall{background:none;border:0;color:var(--brand-text);font-weight:700;font-size:13.5px;white-space:nowrap;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.rowctl{display:flex;align-items:center;gap:8px;flex:none}
.rarr{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-grid;place-items:center;padding:0}
@media (hover:hover) and (pointer:fine){.rarr:hover{border-color:var(--ink)}}
@media (max-width:640px){.rarr{display:none}}
.section.dept .row{grid-auto-columns:300px}
.mini{background:var(--card);border-radius:10px;padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(18,25,43,.05)}
.mimg{aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:8px;overflow:hidden}
.mimg img{max-width:86%;max-height:86%;object-fit:contain}
.mt{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);min-height:2.6em}
.mp{font-weight:700;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.mout{color:var(--danger);font-weight:600;font-size:12.5px}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:16px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin;overscroll-behavior-x:contain;scroll-behavior:smooth}
.promo{margin:20px 0 6px;border-radius:10px;background:var(--card);border:1px solid var(--line);padding:26px 32px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.promo h3{font-size:clamp(19px,2vw,24px);font-weight:600}
.promo p{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:60ch}

/* grid + cards */
.toolbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:22px 0 14px;font-size:13.5px;color:var(--muted)}
/* a brand's own page, /b/<brand>/ (Lior, 2026-11-01, like Walmart's brand pages): its name over photos of its own best items */
.bhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:28px;margin:18px 0 4px;padding:30px 34px;background:var(--brand-soft)}
.bhero .bh-k{margin:0 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-text)}
.bhero h1{margin:0;font-size:46px;line-height:1.04;font-weight:800;letter-spacing:-.02em;color:var(--brand-deep);text-wrap:balance;overflow-wrap:anywhere}
.bhero .bh-s{margin:10px 0 0;max-width:36ch;font-size:16px;line-height:1.45;color:var(--body)}
.bhero .bh-b{margin-top:18px;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (hover:hover) and (pointer:fine){.bhero .bh-b:hover{background:var(--brand-hover)}}
.bhero .bh-pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.bhero .bh-pics img{display:block;width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.bhero.art{display:block;padding:0;background:none}
.bhero .bh-art{display:block;width:100%;height:auto;aspect-ratio:2172/724;object-fit:cover}
.toolbar h2{font-size:clamp(21px,2.3vw,27px);font-weight:600}
.toolbar select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumb button{background:none;border:0;color:var(--brand-text);font-weight:600;padding:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px;padding-bottom:36px}
/* Placeholder cards on department and section pages while the catalog downloads (2026-09-21): a first visit from an ad
   on a weak phone signal saw only the header and the footer for about five seconds, which reads as a broken store. */
.skc{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.skc i{display:block;border-radius:8px;background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FB 50%,#EEF1F5 75%);background-size:200% 100%;animation:skm 1.3s ease-in-out infinite}
.skc .im{width:100%;aspect-ratio:1}
.skc .tx{display:grid;gap:10px}
.skc .tx i{height:13px}.skc .tx i:nth-child(1){width:40%}.skc .tx i:nth-child(2){width:92%}.skc .tx i:nth-child(3){width:70%}.skc .tx i:nth-child(4){width:48%;height:22px}
@keyframes skm{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skc i{animation:none}}
@media (max-width:760px){.skc:nth-of-type(n+5){display:none}.skc{flex-direction:row}.skc .im{width:40%;flex:none}.skc .tx{flex:1;align-content:start;padding-top:4px}}
.browse{display:grid;grid-template-columns:232px minmax(0,1fr);gap:30px;align-items:start;padding-top:6px}
.filters{position:sticky;top:calc(var(--topH,0px) + var(--hdrH,66px) + var(--navH,0px) + 16px);max-height:calc(100vh - 100px);overflow:auto;padding:14px 6px 20px 0;font-size:13.5px;scrollbar-width:thin}
.fgroup{padding:14px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0;padding-top:4px}
.fgroup h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-family:inherit}
.fgroup label,.fgroup a{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;color:var(--body);text-decoration:none}
@media (hover:hover) and (pointer:fine){.fgroup a:hover,.fgroup label:hover{color:var(--ink)}}
.fgroup a.on{color:var(--brand-text);font-weight:700}
.fgroup small{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.fgroup input{accent-color:var(--brand);width:16px;height:16px;margin:0;flex:none}
.fmore,.fclear{background:none;border:0;color:var(--brand-text);font-weight:700;padding:6px 0;font-size:13px}
/* the price slider: two handles on one track, the chosen stretch filled in the brand colour */
.fprice{padding:2px 2px 10px}
.fp-val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:8px}
.fp-track{position:relative;height:22px}
.fp-track::before,.fp-track::after{content:"";position:absolute;top:9px;height:4px;border-radius:2px}
.fp-track::before{left:0;right:0;background:var(--line)}
.fp-track::after{left:var(--a);right:calc(100% - var(--b));background:var(--brand)}
.fp-track input[type=range]{position:absolute;inset:0;width:100%;height:22px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;accent-color:var(--brand);z-index:1}
.fp-track input[type=range]::-webkit-slider-runnable-track{background:none;height:22px}
.fp-track input[type=range]::-moz-range-track{background:none}
.fp-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--card);border:3px solid var(--brand);cursor:pointer}
.fp-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--brand);cursor:pointer}
.fp-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brand-text);outline-offset:2px}
.fclear{margin:4px 0 6px;text-decoration:underline;text-underline-offset:3px}
.rcount{margin:4px 0 0;font-size:13px;color:var(--muted)}
.tools{display:flex;align-items:center;gap:12px;flex:none}
.fbtn{display:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:700}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0 44px}
.pg{min-width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;padding:0 14px}
@media (hover:hover) and (pointer:fine){.pg:hover{border-color:var(--ink)}}
.pg.on{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.pg[disabled]{opacity:.4;cursor:default}
.gap{color:var(--muted);padding:0 2px}
@media (max-width:900px){.browse{grid-template-columns:1fr;gap:10px}.filters{display:none;position:static;max-height:none;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.filters.open{display:block}.fbtn{display:inline-block}}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s,transform .16s}
/* no hover shadow, lift or darker frame on product cards (Lior, 2026-09-19 and 2026-09-27) */
.thumb{aspect-ratio:1;background:#fff;display:grid;place-items:center;padding:20px;border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative}
.thumb{overflow:hidden}
.thumb img{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:contain;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.card:hover .thumb img{transform:scale(1.03)}}
.tag{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--brand-text)}
.eyebrow a,.eyebrow button{color:inherit;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:none}
@media (hover:hover) and (pointer:fine){.eyebrow a:hover,.eyebrow button:hover{text-decoration:underline;text-underline-offset:3px}}
.eyebrow .sep{margin:0 6px;color:var(--muted)}
.ctitle{font-size:14px;font-weight:500;line-height:1.35;cursor:pointer;color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:0}
.ctitle a,a.tt{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.ctitle:hover{color:var(--brand-text)}}
.short{margin:0;font-size:12.5px;color:var(--muted)}
.card .add.wide{width:100%}
.short.optn{color:var(--brand-text);font-weight:600;cursor:pointer}
.lpick{font-size:12.5px;color:var(--muted);margin:1px 0 2px}
.lpick b{color:var(--ink);font-weight:700}
.melt{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;background:#FFF4E0;color:#8A4B00;border:1px solid #F1C98A;font-size:11px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;letter-spacing:.01em}
.meltnote{display:flex;gap:8px;align-items:flex-start;background:#FFF4E0;color:#6B3A00;border:1px solid #F1C98A;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.45;margin:4px 0 12px}
.meltnote svg{flex:none;margin-top:2px}
.nudge.melt-w{background:#FFF4E0;color:#6B3A00}
/* sizes, colours and versions: one dropdown (Lior, 2026-09-17: "it should be a dropdown to choose from") */
.pdopts{margin:2px 0 14px}
.optlab{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.optsel{position:relative}
.optsel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--body);border-bottom:2px solid var(--body);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.optsel select{appearance:none;-webkit-appearance:none;width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;padding:0 38px 0 14px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.optsel select:hover{border-color:var(--brand-text)}}
.optsel select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.pdopts.err .optsel select{border-color:var(--danger)}
#pdSizes{display:grid;gap:10px}
#pdSizes .axg{border-top:0;padding-top:0;margin:0}   /* the button rows' divider is not needed between dropdowns */
#pdSizes .axl{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 5px}
.opterr{margin:6px 0 0;font-size:12.5px;color:var(--danger)}
.prow{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:6px}
.prow .p{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.prow .ea{font-size:12px;color:var(--muted)}
.cunit,.csub,.cfree{display:none}   /* the rich result card's extra lines: shown on the computer grid only */
.etw{white-space:nowrap}
.fdtag{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:5px;background:#E3F3E9;color:#0B6B37;font-weight:700;font-size:.92em;line-height:1.45;white-space:nowrap;vertical-align:baseline}
.pt .pfd{margin-top:4px;font-size:12.5px}
/* fast delivery, with or without free shipping: charcoal like the top bar, white words, a yellow bolt (Lior, 2026-10-27,
   picked H of docs/fast-delivery-colors: "It's too plain") */
.fdtag.fast{display:inline-flex;align-items:center;gap:3px;padding-left:5px;vertical-align:-2px;background:#1E282D;color:#fff}
.fdtag.fast svg{flex:none;color:#FFC94D}
.prow .p sup{font-size:.56em;position:relative;top:-.72em;vertical-align:baseline;letter-spacing:0}
.vol{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;background:var(--sunk);color:var(--ink);border-radius:6px;padding:8px 11px;font-weight:500}
.eta{font-size:12.5px;color:var(--body);display:flex;gap:6px;align-items:center}
.eta svg{color:var(--ok);flex:none}
.eta b{color:var(--ink)}
.crow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:4px}
.instock{font-size:12px;color:var(--ok);font-weight:700}
.instock.out,#pdStock.out{color:var(--danger)}
.instock.low{color:var(--gold)}
.card .add[disabled],.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed}
.add{background:var(--accent);color:#0F1111;border:1.5px solid var(--accent);border-radius:999px;padding:8px 16px;font-weight:700;font-size:13px;transition:background .14s}
/* in the cart, the card's button becomes the count (Lior, 2026-10-09: "it's not showing trash number plus, it just says
   added"): a trash can at 1 (a minus above it), the count, a plus, outlined in the yellow like the app */
.cstep{display:inline-flex;align-items:center;height:36px;border:2px solid #FFC94D;border-radius:999px;background:#fff;color:var(--ink)}
.cstep.pop{animation:addpop .32s ease}
.cstep button{width:38px;height:100%;border:0;background:none;color:var(--ink);font-size:21px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;border-radius:999px}
@media (hover:hover) and (pointer:fine){.cstep button:hover{background:var(--sunk)}}
.cstep button:disabled{color:var(--line);cursor:default;background:none}
.cstep button svg{width:17px;height:17px}
.cstep output{min-width:24px;text-align:center;font-weight:700;font-size:15px}
/* coming soon (no price, Notify me): an outlined button, and "On the list" once asked */
.add.notify{background:#fff;color:var(--brand);border-color:var(--brand)}
@media (hover:hover) and (pointer:fine){.add.notify:hover{background:var(--brand-soft)}}
/* the product page's button for an out-of-stock item: Notify me when it's back, then On the list (2026-09-26) */
#pdp.oos .pd-buy .qty,#pdp.oos #pdTierBox{opacity:.4;pointer-events:none}
.pd-buy .addbtn.notifymode{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}@media (hover:hover) and (pointer:fine){.pd-buy .addbtn.notifymode:hover{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}}
.pd-buy .addbtn.notifymode.notified{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-soft)}@media (hover:hover) and (pointer:fine){.pd-buy .addbtn.notifymode.notified:hover{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-soft)}}
.add.notified,.card .add.notified[disabled]{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-soft);opacity:1;cursor:pointer}
@media (hover:hover) and (pointer:fine){.add.notified:hover,.notifybig.notified:hover{filter:brightness(.96)}}
/* Shopimo Pick (Lior, 2026-09-25: a badge "like Amazon's Choice" with our name; he chose look N): a two-tone split tag
   on the photo's top left, a black "Shopimo" block joined on a slant to a yellow "Pick" block. One item per aisle, chosen
   by the catalog (best rated, most rated, in stock). */
.pickb{display:inline-flex;font:600 12.5px/1 "Plus Jakarta Sans",sans-serif;white-space:nowrap;letter-spacing:0}   /* lighter (Lior, 2026-09-27) */
.pickb span{padding:6px 14px 6px 9px;background:#121417;color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.pickb b{padding:6px 15px 6px 14px;margin-left:-8px;background:var(--accent);color:#121417;font-weight:600;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.thumb .pickb,.pt .im .pickb{position:absolute;left:0;top:10px;z-index:1}
/* badges from the catalog (their words, colours, icon and style come from the badges table: changed without a build) */
.bstack{position:absolute;left:0;top:10px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.bstack .pickb{position:static}
.bdg{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 "Plus Jakarta Sans",sans-serif;white-space:nowrap;letter-spacing:0}
.bdg svg{width:13px;height:13px;flex:none}
.bdg.split{gap:0}
.bdg.split>span{display:inline-flex;align-items:center;gap:4px;font-weight:600;padding:6px 14px 6px 9px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.bdg.split>b{padding:6px 15px 6px 14px;margin-left:-8px;font-weight:600;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.bdg.pill{padding:5px 11px;border-radius:999px;margin-left:8px;font-weight:700}
/* the corner tab: flush in the photo's top-left corner (the card's rounding clips its outer corner), a rounded inner corner */
.bdg.tab{padding:7px 13px 7px 12px;border-radius:0 0 12px 0;font-weight:700}
.bstack:has(.tab){top:0}
.bdg.outline{padding:4px 10px 4px 8px;border-radius:999px;border:1.5px solid;margin-left:8px;font-weight:700}
.bdg.ribbon{position:absolute;left:-40px;top:22px;transform:rotate(-45deg);padding:6px 46px;font-weight:800;font-size:11px;letter-spacing:.05em;z-index:1;pointer-events:none}
.thumb:has(.ribbon),.pt .im:has(.ribbon){overflow:hidden}
.bline{display:block;margin-top:4px;font-size:13px;color:var(--body);line-height:1.35}
.bline b{color:#1E7B45;font-weight:700}
.bline small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
/* the price comparison: "Shopimo $28.99   Amazon $33.49", the two prices in ink, no colour that says win or lose */
.bline .cmp{display:flex;flex-wrap:wrap;gap:1px 14px}.bline .cmp i{font-style:normal;font-weight:700;color:var(--ink)}
.pdpick .bstack{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
.pdpick .bdg{font-size:13px}
.pdpick .bdg.split>span{padding:5px 14px 5px 10px}
.pdpick .bdg.split>b{padding:5px 15px 5px 14px}
.pdpick .bdg.pill,.pdpick .bdg.outline{margin-left:0}
.pdpick .bdg.tab{border-radius:7px}
/* the product page's badges: the two-part tag cut on a slant, navy and gold, slim (Lior, 2026-10-04, option D, then "the
   shopimo pick badge in the product as well": the navbar's navy); the Amazon price check sits by the price (.amztag) */
.bdg.split.pdtag>span{background:#1E282D;color:#fff}   /* the navbar's dark grey, not navy (Lior, 2026-10-23) */
.bdg.split.pdtag>b{background:#FFC94D;color:#1E282D}
.amztag{display:block;width:max-content;background:#072347;color:#fff;font:600 11.5px/20px "Plus Jakarta Sans",sans-serif;padding:0 13px 0 8px;margin:2px 0 4px;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.sign-head .bline{font-size:14px}
.prow{flex-wrap:wrap}
.prow .bline{flex-basis:100%;margin-top:0;font-size:12.5px;letter-spacing:0}
.eta{flex-wrap:wrap}.eta .ccmp{display:block;width:100%;margin-top:1px;font-size:12.5px;letter-spacing:0;color:var(--body)}
.thumb .bdg,.pt .im .bdg{font-size:11.5px}
.thumb .bdg.split>span,.pt .im .bdg.split>span{padding:5px 12px 5px 8px}
.thumb .bdg.split>b,.pt .im .bdg.split>b{padding:5px 13px 5px 12px}
.pt .im{position:relative}
.pdpick{margin:0 0 8px}
.pdpick .pickb{font-size:14px}
.pdpick .pickb span{padding:7px 16px 7px 11px}
.pdpick .pickb b{padding:7px 17px 7px 16px}
.card.soon .soontag{font-size:16px;font-weight:700;color:var(--brand-text);letter-spacing:-.005em}
#pdp.soon .sign-head,#pdp.soon #pdEtaHead,#pdp.soon #pdOptsWrap,#pdp.soon #pdPair,#pdp.soon #pdTierBox,#pdp.soon .pd-buy,#pdp.soon #pdLimitCard,#pdp.soon #pdWith,#pdp.soon .soldby,#pdp.soon .pdsavebtn{display:none!important}
.pdsoon{display:flex;flex-direction:column;gap:8px;padding:18px}
.pdsoon[hidden]{display:none}
.pdsoon .soonbig{margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pdsoon .sign-note{font-size:14px;line-height:1.5;color:var(--body)}
.pdsoon .notifybig{width:100%;height:48px;margin-top:6px;border-radius:999px;background:var(--brand);color:#fff;border:1.5px solid var(--brand);font-size:15px;font-weight:700}
@media (hover:hover) and (pointer:fine){.pdsoon .notifybig:hover{background:var(--brand-hover)}}
.pdsoon .notifybig.notified{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-soft)}
.zip-in.nfy input{font-size:17px;font-weight:500;letter-spacing:0}
.nfy .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand-text);text-decoration:underline;cursor:pointer}
@media (hover:hover) and (pointer:fine){.add:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
/* a listing that needs a size chosen: outlined, not the yellow Add to cart (Lior, 2026-09-18) */
.add.opt{background:none;color:var(--ink);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.add.opt:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.added{background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;animation:addpop .38s ease}@media (hover:hover) and (pointer:fine){.added:hover{background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;animation:addpop .38s ease}}
.added .addck{animation:ckpop .3s .06s ease-out backwards}   /* the filled tick pops in (it was a drawn stroke before Reicon, 2026-10-07) */
@keyframes ckpop{from{transform:scale(.3);opacity:0}}
@keyframes addpop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.added{animation:none}.added .addck{animation:none}}
.empty{text-align:center;color:var(--muted);padding:56px 20px;border:1px dashed var(--line);border-radius:8px;margin-bottom:36px}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* newsletter + footer */
/* newsletter: a Shopimo blue card; on phones the email field and button stack full width */
/* newsletter signup: a small column of the footer (Lior, 2026-09-15) */
.fnews p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#C9D4E5;max-width:32ch}
.fnews form{display:flex;gap:6px;max-width:320px}
.fnews input{flex:1;min-width:0;height:36px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:0 11px;font:inherit;font-size:13px}
.fnews input::placeholder{color:#9FB0C8}
.fnews input:focus{outline:none;border-color:#FFC94D}
.fnews .btn{height:36px;padding:0 13px;border-radius:8px;font-size:13px;font-weight:700;background:#FFC94D;color:#0E1320;border:0}
@media (hover:hover) and (pointer:fine){.fnews .btn:hover{background:#FFD45E}}
@media (max-width:1000px){.fnews{grid-column:1 / -1}}
@media (max-width:760px){.fnews input{font-size:16px}}
footer.site{margin-top:40px}   /* colours and border: the footer rule further down */
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr .7fr 1.25fr;gap:28px;padding:40px 0 26px}
.fcols h4{font-size:15px;font-weight:600;margin-bottom:14px;font-family:"Plus Jakarta Sans",sans-serif}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcols a{color:var(--body);text-decoration:none;font-size:14px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.fcols a:hover{color:var(--brand-text)}}
.fcols .about{color:var(--muted);font-size:13.5px;max-width:34ch}
/* the App Store button, as on joberr.com (Lior, 2026-09-30: "Make the AppStore button with apple") */
/* App Store and Google Play side by side, outlined, as on shop.com (Lior, 2026-11-03: "I like what they did here with the
   app store, And now we need to add the google store (coming soon)"); Google Play isn't a link until the Android app is out */
/* side by side and smaller (Lior, 2026-11-04: "The appstore and google should be side by side and smaller") */
.fapps{display:flex;flex-wrap:nowrap;gap:8px;margin-top:16px}
.fcols .storebadge{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px 0 9px;border-radius:8px;background:#fff;border:1.25px solid #111;color:#111;text-decoration:none;transition:background .2s}
@media (hover:hover) and (pointer:fine){.fcols a.storebadge:hover{background:#F6F7F9;color:#111}}
.storebadge svg{width:19px;height:19px;flex:none;fill:currentColor}
.storebadge span{display:flex;flex-direction:column;line-height:1.08;text-align:left}
.storebadge small{font-size:8.5px;font-weight:500;white-space:nowrap}
.storebadge b{font-size:14.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.storebadge.soon{cursor:default}
/* the app sheet iPhone visitors get once (joberr.com's, in Shopimo's colours) */
.appback{display:none}   /* no dark layer: the page stays usable under the app sheet (Merchant Center "Login required", 2026-10-02) */
.appsheet{position:fixed;left:0;right:0;bottom:0;z-index:1300;background:#fff;border-radius:28px 28px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .46s cubic-bezier(.32,.72,0,1);border-top:1px solid #EAECF1;max-width:640px;margin:0 auto}
.appsheet.open{transform:none}
.appsheet .aps-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:#F4F5F7;color:#667085;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.appsheet h3{font-size:30px;letter-spacing:-.5px;line-height:1.12;margin:10px 0 10px;text-align:center;color:#101828;font-weight:700}
.appsheet h3 span{color:#F5B400}
.appsheet p{text-align:center;color:#667085;font-size:15.5px;margin:0 auto 22px;max-width:34ch;line-height:1.45}
.appsheet .aps-cta{display:block;width:100%;text-align:center;background:#000;color:#fff;font-weight:700;font-size:16.5px;border:0;border-radius:999px;padding:16px 20px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.appsheet,.appback{transition:none}}
.pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pay span{border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:11px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.legal{border-top:1px solid var(--line);padding:18px 0 40px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal a{color:var(--muted);text-decoration:none}
/* the links sit in their own row with gaps, so every footer line starts at the same left edge on a phone (2026-10-27) */
.legal>span:nth-child(2){display:flex;flex-wrap:wrap;gap:6px 16px}
.legal>span:nth-child(2) a{white-space:nowrap}
.legal .indep{flex-basis:100%;font-size:11.5px;line-height:1.45;opacity:.85}   /* the reseller note Google suggests (2026-10-27) */

/* overlays + dialogs */
.overlay{position:fixed;inset:0;background:rgba(10,16,30,.55);z-index:50;display:grid;place-items:center;padding:18px;animation:fade .18s ease}
/* brand sheet: tap a brand name anywhere and its items come up (Lior, 2026-09-16) */
.dialog.sheet{grid-template-columns:1fr;width:min(900px,100%);height:auto;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
/* ZIP dialog: a small centred card on every screen (Lior, 2026-09-17: "the change ZIP popup needs to be designed") */
.overlay.center{place-items:center;padding:18px}
.dialog.zipdlg{grid-template-columns:1fr;width:min(420px,100%);height:auto;max-height:none;border-radius:18px;align-self:center}
.zip-in{padding:34px 30px 28px;display:flex;flex-direction:column;gap:8px}
.zip-ico{width:48px;height:48px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;margin-bottom:6px}
.zip-in h2{font-family:"Plus Jakarta Sans",sans-serif;font-size:22px;font-weight:700;line-height:1.2;color:var(--ink);margin:0;letter-spacing:-.01em}
.zip-in .sub{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--body)}
.zip-in label{font-size:12.5px;font-weight:700;color:var(--ink)}
.zip-in input{border:1.5px solid var(--line);border-radius:12px;padding:0 16px;height:54px;font:inherit;font-size:22px;font-weight:600;letter-spacing:.12em;color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
.zip-in input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.zip-in.err input{border-color:var(--danger)}
.zip-err{margin:0;font-size:13px;color:var(--danger)}
.zip-go{width:100%;height:46px;margin-top:6px;border-radius:12px;background:var(--blue);color:#fff;border-color:var(--blue);font-size:15px;font-weight:700}
@media (hover:hover) and (pointer:fine){.zip-go:hover{background:var(--sub-2);border-color:var(--sub-2)}}
.zip-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.payprob{text-align:center;align-items:center}.payprob .sub{margin-bottom:6px}.payprob .zip-note{text-align:center}
.payprob-ico{position:relative;width:60px;height:60px;border-radius:50%;background:rgba(163,40,58,.1);color:var(--danger);display:grid;place-items:center;margin-bottom:8px}
.payprob-ico i{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:var(--card);color:var(--danger);display:grid;place-items:center}
.dialog.sheet .dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.dialog.sheet .dhead h2{font-size:19px;font-weight:650;color:var(--ink);margin:0}
.dialog.sheet .dhead .rcount{margin:2px 0 0;font-size:13px;color:var(--muted)}
.bwrap{padding:16px 20px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px 12px;padding-bottom:0}
.dialog.sheet .dfoot{padding:12px 20px 16px;border-top:1px solid var(--line)}
@keyframes fade{from{opacity:0}}
.dialog{background:var(--card);border-radius:12px;box-shadow:var(--shadow-lg);width:min(1020px,100%);height:min(92vh,880px);max-height:min(92vh,880px);display:grid;grid-template-columns:46% 1fr;overflow:hidden;animation:rise .22s cubic-bezier(.2,.8,.2,1);position:relative}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
/* one close button for every popup: a 42 px soft grey circle with a real X icon (Lior, 2026-09-17: "the X is weird and small") */
.close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:999px;border:0;background:var(--sunk);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;z-index:2;transition:background .14s}
@media (hover:hover) and (pointer:fine){.close:hover{background:#D9DEE5}}
.close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pd-media{background:var(--tile-photo);display:flex;flex-direction:column;min-height:0;height:100%}
.zoom{position:relative;flex:1;min-height:0;overflow:hidden;display:grid;place-items:center;padding:0;cursor:zoom-in}
/* "Get it by Fri, Nov 13" on the photo (Lior, 2026-11-08, picked 2 of docs/pdp-get-it-by-options.jpg: a white tag in a thin
   dark frame with the truck), so the date is on the first screen of a phone */
.pdgetby{position:absolute;right:14px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:1.5px solid var(--hdr);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:600;line-height:1.2;pointer-events:none;white-space:nowrap}
.pdgetby b{font-weight:800}
.pdgetby svg{width:16px;height:16px;color:var(--hdr);flex:none}
.pdgetby[hidden]{display:none}
/* phones only, and on the right: the pack badge sits on the left (Lior, 2026-11-08: "It should only on mobile, And it should be
   in the bottom right because the multipack badge is in the left"); computers have the big date in the buy box */
@media (min-width:761px){.pdgetby{display:none!important}}
/* Phones: Share, Shop similar and Save in one column at the photo's top right, in that order (Lior, 2026-11-09: "move the
   icons to the stack ... the share button, the suggestion button, and under that ... the heart button") */
@media (max-width:760px){
  #pdp .zoom .pdsharebtn{top:14px;right:14px;left:auto}
  #pdp .zoom .pdlensbtn{top:60px;right:14px;left:auto}
  #pdp .zoom .pdsavebtn{top:106px;right:14px;left:auto}
  #pdp .zoom:has(.pdlensbtn[hidden]) .pdsavebtn{top:60px}
}
/* below the photo, not over it (Lior, 2026-11-08: "I love it but it's going over the image"): with the tag on, the photo box grows
   by a band at the bottom and the photo sits at its top, the same size as before; the tag and the pack badge share the band */
@media (max-width:760px){
  #pdp .zoom.getby{height:calc(min(82vw,330px) + 40px)}
  #pdp .zoom.getby .gslide{align-content:start;padding-top:10px}
  #pdp .zoom.getby .pdgetby{bottom:7px}
  #pdp .zoom.getby .gslide .pkb{bottom:2px}
  /* the photo tag says Quick ship / Fast & Free / Free delivery, so the tags under the price go on phones (Lior, 2026-11-08: "We
     need to remove the quickship and free delivery badge then no need twice") */
  #pdp.has-getby #pdBoxLine .fdtag, #pdp.has-getby #pdEta .fdtag{display:none}
}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .18s ease;transform-origin:center;will-change:transform}
.zoom.on{cursor:zoom-out}
.zoom.on .gslide.cur img{transform:scale(2.4)}
/* the photos sit side by side on a track; swiping drags the track and it glides to the nearest photo on release */
.gtrack{display:flex;width:100%;height:100%;transition:transform .32s cubic-bezier(.2,.8,.2,1);will-change:transform;transform:translate3d(0,0,0)}
.gtrack.drag,.gtrack.noanim{transition:none}
.gslide{flex:0 0 100%;width:100%;height:100%;min-width:0;box-sizing:border-box;padding:30px;display:grid;place-items:center}   /* the gutter sits inside each slide, so photos never touch, even mid-swipe */
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;z-index:2;cursor:pointer;padding:0}
.gnav[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.gnav:hover{background:#fff}}
.gnav.prev{left:10px}.gnav.next{right:10px}
.zoom.on .gnav,.zoom.on .zoomhint{display:none}
.pd-media:has(.zoom.on) .gdots{visibility:hidden}
/* the photo dots (Lior, 2026-09-17): one per photo, the current one stretches into a pill, like the hero's */
.gdots{display:flex;justify-content:center;gap:6px;margin:12px 0 2px;pointer-events:none}
.gdots:empty{display:none}
.gdots button{pointer-events:auto;width:7px;height:7px;border-radius:999px;border:0;padding:0;background:rgba(15,17,17,.28);transition:width .25s ease,background .2s;cursor:pointer}
.gdots button[aria-selected="true"]{width:22px;background:var(--blue)}
.zoomhint{position:absolute;right:12px;bottom:10px;font-size:11px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 9px;border-radius:999px;pointer-events:none}
#pdZoom{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.thumbs{display:flex;gap:8px;padding:12px 16px 16px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line-soft);background:var(--tile-photo)}
.thumbs button{width:56px;height:56px;border:1.5px solid var(--line);border-radius:6px;background:#fff;padding:5px;display:grid;place-items:center;transition:border-color .14s}
@media (hover:hover) and (pointer:fine){.thumbs button:hover{border-color:var(--muted)}}
.thumbs button[aria-selected="true"]{border-color:var(--brand)}
.thumbs img{max-width:100%;max-height:100%;object-fit:contain}
.desc{margin:0;font-size:14.5px;line-height:1.6}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tier{border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:15px 14px;text-align:left;display:flex;flex-direction:column;gap:4px;transition:all .14s;color:var(--body)}
@media (hover:hover) and (pointer:fine){.tier:hover{border-color:var(--brand-text)}}
.tier[aria-checked="true"]{border-color:var(--blue);background:var(--card)}   /* the chosen pack gets the frame only, no fill, same weight as the delivery card (Lior, 2026-09-17) */
.tier .q{font-size:13px;font-weight:700;color:var(--muted)}
.tier .u{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.tier .s{font-size:12.5px;font-weight:700;color:var(--ok)}
.tier .s:empty::before{content:"standard";color:var(--muted);font-weight:500}
/* Upsells (Lior, 2026-09-17: "offering bundles, or add-ons"): a bundle card on the product page pairs the item with its
   best companion from the same aisle, and the cart suggests up to three add-ons for what was just added. */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{width:38px;height:38px;border:0;background:var(--card);color:var(--ink);font-size:18px;font-weight:500}
@media (hover:hover) and (pointer:fine){.stepper button:hover{background:var(--sunk)}}
.stepper button:disabled{color:var(--line);cursor:default;background:var(--card)}
.stepper output{min-width:40px;text-align:center;font-weight:700;color:var(--ink);font-size:15px}
.cta{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.ship{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}
.ship li{display:flex;gap:9px;align-items:center}
.ship svg{flex:none;color:var(--ok)}
.ship b{color:var(--ink)}
.specs{border:1px solid var(--line);border-radius:8px;padding:0 14px}
.specs summary{cursor:pointer;font-weight:700;color:var(--ink);padding:12px 0;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.specs summary::-webkit-details-marker{display:none}
.specs summary::after{content:"+";font-size:18px;color:var(--muted)}
.specs[open] summary::after{content:"\2013"}
.specs dl{margin:0;padding:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px}
.specs dt{color:var(--muted);font-weight:600}
.specs dd{margin:0;color:var(--ink)}

/* ratings + reviews */
.info{width:18px;height:18px;border-radius:999px;border:1.5px solid var(--muted);background:none;color:var(--muted);font:700 11px/1 "Plus Jakarta Sans",sans-serif;display:inline-grid;place-items:center;padding:0;margin-left:6px;position:relative;cursor:help;vertical-align:middle}
.info:focus-visible,.info.on{color:var(--brand-text);border-color:var(--brand-text)}@media (hover:hover) and (pointer:fine){.info:hover{color:var(--brand-text);border-color:var(--brand-text)}}
.info::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:260px;padding:10px 12px;border-radius:8px;background:var(--ink);color:#fff;font:500 12px/1.45 "Plus Jakarta Sans",sans-serif;text-align:left;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}
.info:focus-visible::after,.info.on::after{opacity:1}@media (hover:hover) and (pointer:fine){.info:hover::after{opacity:1}}.rate{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);background:none;border:0;padding:0;text-align:left}
.rate b{color:var(--ink);font-weight:700}
.stars{position:relative;display:inline-block;flex:none;line-height:0;vertical-align:middle;background:var(--star-off) 0 0/var(--ss,16px) var(--ss,16px) repeat-x}
.stars>.on{background:var(--star-on) 0 0/var(--ss,16px) var(--ss,16px) repeat-x}
.stars .off,.stars .on{white-space:nowrap;display:block}
.stars .on{overflow:hidden;position:absolute;left:0;top:0;height:100%}
.stars .on svg{color:#E0A526}
.stars .off svg{color:var(--line)}
.pdrate{margin:-4px 0 0}
#pdEyebrow{padding-right:48px}

/* drawers */
.overlay.side{place-items:stretch end;padding:0;grid-template-rows:minmax(0,1fr)}
.overlay.left{place-items:stretch start;padding:0;grid-template-rows:minmax(0,1fr)}
.drawer{background:var(--card);width:min(440px,100%);height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slide .24s cubic-bezier(.2,.8,.2,1);position:relative}
.overlay.left .drawer{animation:slideL .24s cubic-bezier(.2,.8,.2,1);width:min(340px,100%)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
@keyframes slideL{from{transform:translateX(-30px);opacity:0}}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.dhead h2{font-size:21px;font-weight:600;flex:1}
.clearcart{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:2px;padding:6px 8px;margin-right:6px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.clearcart:hover{color:var(--danger)}}
.dhead .close{position:static}
.lines{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 22px}
.line{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.line .lt{background:var(--tile-photo);border-radius:8px;padding:8px;display:grid;place-items:center;aspect-ratio:1}
.line .lt img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.line h3{font-size:13.5px;font-weight:600;font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:0;line-height:1.3}
.line h3 a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.line h3 a:hover{text-decoration:underline}}
a.lt{cursor:pointer}
.line .lu{font-size:12.5px;color:var(--muted);margin-top:2px}
.line .lu b{color:var(--ink);font-weight:700}
.lrow{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:8px}
.stepper.sm button{width:30px;height:30px;font-size:16px}
.stepper.sm output{min-width:30px;font-size:13.5px}
.lrow .lt2{font-weight:700;color:var(--ink);font-size:14.5px}
.remove{background:none;border:0;color:var(--muted);font-size:12px;font-weight:600;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.remove:hover{color:var(--danger)}}
.nudge{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sunk);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;margin-top:9px}
.nudge button{background:var(--brand);color:#fff;border:0;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.dfoot{border-top:1px solid var(--line);padding:16px 22px calc(22px + env(safe-area-inset-bottom));display:grid;gap:9px}
.sum{display:flex;justify-content:space-between;font-size:14px}
.sum.total{font-size:17px;font-weight:700;color:var(--ink);padding-top:6px;border-top:1px solid var(--line-soft)}
.sum .free{color:var(--ok);font-weight:700}
.sum .num.ok{color:var(--ok);font-weight:700}
.cscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.cscroll>.lines{flex:none;overflow:visible;min-height:0}.cscroll>.dfoot{margin-top:8px}.cscroll #cartLines>.line:last-child{border-bottom:0}
.cart-offer{margin:2px 0 6px;font-size:13.5px;font-weight:600;color:var(--ok)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cart-empty svg{color:var(--line);margin-bottom:10px}
.cart-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.menu{padding:8px 12px;overflow-y:auto}
.menu details{border-bottom:1px solid var(--line-soft)}
.menu summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 10px;font-weight:700;color:var(--ink);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"+";color:var(--muted);font-size:18px}
.menu details[open] summary::after{content:"\2013"}

/* checkout */
.dialog.co{grid-template-columns:1fr;width:min(1060px,100%);height:auto}   /* wide enough for full-width fields (Lior, 2026-09-17) */
.co-in{display:grid;grid-template-columns:minmax(0,1fr) 380px;max-height:inherit;overflow:hidden}
.co-form{padding:32px 40px;overflow-y:auto}
.co-form h2{font-size:24px;font-weight:600;margin-bottom:6px}
.co-form .sub{color:var(--muted);font-size:13.5px;margin:0 0 18px}
/* product page Apple Pay: only where Apple Pay works; Safari draws Apple's own button */
.sect{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:16px 0 10px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink)}
.field input,.field select{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:12px 14px;font:inherit;font-size:15px;width:100%;min-width:0}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
/* US phone numbers only: a fixed +1 in front, the number typed as (555) 123-4567 (Lior, 2026-09-26) */
.telbox{position:relative;display:block}
.telbox::before{content:"+1";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;font-weight:500;pointer-events:none}
.field .telbox input{padding-left:40px}
.field.err input,.field.err select{border-color:var(--danger)}
.field .e{font-size:12px;color:var(--danger);display:none}
.linkbtn{background:none;border:0;color:var(--brand-text);font:inherit;font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.field.addr{position:relative}
.ac-addr{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:260px;overflow-y:auto}
.ac-addr div{padding:10px 12px;cursor:pointer;font-size:13.5px;line-height:1.35;border-top:1px solid var(--line-soft)}
.ac-addr div:first-child{border-top:0}
.ac-addr div small{display:block;color:var(--muted);font-size:12px}
.ac-addr div.on{background:var(--brand-soft)}@media (hover:hover) and (pointer:fine){.ac-addr div:hover{background:var(--brand-soft)}}
.shipnote{margin:-2px 0 12px;font-size:12.5px;color:var(--muted)}
/* the checkout's first screen: what the order costs with delivery, how far it is from free delivery, and a few things to add */
.co-first{margin:4px 0 18px}
.cf-rows{display:none}
.cf-rows div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14.5px;color:var(--body)}.cf-rows b{font-weight:600;color:var(--ink)}.cf-rows b.ok{color:var(--ok,#1F7A4D)}
.cf-bar{padding:12px 0 2px}.cf-msg{font-size:14.5px;color:var(--ink)}.cf-msg b{font-weight:700}
.cf-track{height:6px;border-radius:3px;background:var(--line,#E4E7EC);margin-top:8px;overflow:hidden}.cf-track i{display:block;height:100%;width:4%;border-radius:3px;background:var(--accent);transition:width .35s ease}
.cf-bar.full .cf-track i{background:var(--ok,#1F7A4D)}
.cf-adds{display:grid;gap:0;margin-top:10px}
.cf-add{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line,#E4E7EC)}
.cf-add img{width:52px;height:52px;object-fit:contain}.cf-add .n{font-size:13.5px;line-height:1.3;color:var(--ink);min-width:0}.cf-add .n span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cf-add .n b{display:block;font-weight:600;margin-top:2px}
.cf-add button{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.co-apt{display:block;margin:-4px 0 14px;padding:6px 0;border:0;background:none;font:inherit;font-size:14px;color:var(--brand);text-decoration:underline;cursor:pointer}
.ab-ship{display:block;font-style:normal;font-size:12px;opacity:.86;margin-top:1px}.ab-ship b{font-weight:700}
.cf-more{display:none}
.co-head,.co-acts,.co-cost{display:none}   /* the phone checkout's own header, button and cost lines */
.field.err .e{display:block}
.shipsum{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:var(--sunk);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--body)}
.shipsum b{display:block;color:var(--ink)}
.shipsum button{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--brand-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.payel{min-height:44px}
.payel:empty{display:none}
.payerr{margin:8px 0 0;font-size:13px;color:var(--danger)}
.paynote{border:1px dashed var(--line);border-radius:8px;padding:14px 16px;background:var(--sunk);font-size:13px;display:flex;gap:12px;align-items:flex-start}
.paynote svg{flex:none;color:var(--brand-text);margin-top:1px}
.paynote b{display:block;color:var(--ink);margin-bottom:2px}
.co-sum{background:var(--sunk);border-left:1px solid var(--line);padding:30px 26px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.co-sum h3{font-size:16px;font-weight:600}
.co-over-names{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px;font-weight:400}
.co-line{display:grid;grid-template-columns:48px 1fr auto;gap:11px;align-items:center;font-size:13px}
.co-line .lt{width:48px;height:48px;background:var(--tile-photo);border-radius:10px;padding:5px;display:grid;place-items:center}
.co-line img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.co-line .n{color:var(--ink);font-weight:500;line-height:1.3;min-width:0}
.co-line .nt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* the name clamps on its own, so the quantity and Remove line always shows */
.co-line .n small{display:block;color:var(--muted);font-weight:500}
.co-line .a{font-weight:700;color:var(--ink)}
.co-line .co-rm{display:inline;margin-left:10px;font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:underline;padding:0;background:none;border:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){.co-line .co-rm:hover{color:var(--ink)}}
.co-eta{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;display:flex;gap:9px;align-items:center}
.co-eta svg{color:var(--ok);flex:none}
.co-eta b{color:var(--ink)}
.co-optin{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--body);margin:2px 0 14px;cursor:pointer}
.co-optin input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--brand)}
/* signature on delivery for items of $500 or more (Lior, 2026-09-21) */
/* at the top of the checkout form, bold, so a phone sees it with the summary folded (Lior, 2026-09-21: "make it bolder ...
   this will require adult to sign") */
/* a frame only, no fill or shadow (Lior, 2026-10-18: "Put it in a frame ... No background or shadow") */
.co-sig{background:none;border:1.5px solid var(--brand);color:var(--ink);border-radius:10px;padding:14px 16px;margin:14px 0 18px;display:flex;gap:12px;align-items:flex-start;box-shadow:none}
.co-sig svg{color:var(--brand);flex:none;margin-top:1px}
.co-sig b{display:block;font-family:"Outfit","Plus Jakarta Sans",sans-serif;font-size:16.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.co-sig span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--body)}
.sum-note{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:-4px}
/* order placed: the app offer, a plain row between hairlines (flat design) */
.done-app{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;text-decoration:none;color:var(--ink)}
.done-app[hidden]{display:none}
.done-app img{width:44px;height:44px;flex:none;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.done-app > span:not(.go){flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.done-app b{font-size:15px;font-weight:700}
.done-app small{font-size:13px;color:var(--body);margin-top:2px;overflow-wrap:break-word;word-break:break-word}
.done-app .go{flex:none;padding:6px 18px;border:1.5px solid var(--brand);border-radius:999px;color:var(--brand);font-size:14.5px;font-weight:700}
/* a $500+ item in the cart: Affirm (and Klarna) at checkout (Lior, 2026-10-18: "adding a banner when reaching to 500"); a
   plain line, no box (flat design), and no payment amounts or rates, which Affirm's ad rules would need disclosures for */
.cart-bnpl{display:flex;gap:9px;align-items:flex-start;margin:4px 0 12px;font-size:13.5px;line-height:1.45;color:var(--body)}
.cart-bnpl[hidden]{display:none}
.cart-bnpl svg{flex:none;color:var(--brand);margin-top:1px}
.cart-bnpl b{color:var(--ink);font-weight:700}
.ship-note{margin:-6px 0 2px;font-size:13px;color:var(--body);text-align:left}.ship-note b{font-weight:700;color:var(--ink)}
.co-sum .btn{margin-top:auto}
.co-sum-body{display:flex;flex-direction:column;gap:12px;flex:1}
.co-toggle,.co-bar{display:none}
button[form="coForm"].wait{opacity:.5}   /* Pay before the card is filled in: greyed, a tap goes to the card box */
.done{padding:44px 40px;text-align:center;display:grid;gap:12px;justify-items:center}
.done>.ok{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.done h2{font-size:26px}
.done p{margin:0;max-width:46ch;color:var(--body)}
/* "Save my details" under the order: a line above it, no box (flat) */
.dsave{display:grid;gap:8px;width:100%;max-width:380px;margin:8px 0 4px;padding-top:16px;border-top:1px solid var(--line);text-align:left}
.dsave b{font-size:16.5px;color:var(--ink)}.dsave>span{font-size:14px;color:var(--body);line-height:1.45}
.dsave .btn{justify-self:stretch}
.dbook{width:100%;max-width:380px;text-align:left}.dbook .co-optin{margin:4px 0 0}.dbook .cmnote{max-width:none;text-align:center;font-size:14.5px}
.dsave input{height:50px;border:1px solid var(--line-2,#C9CED6);border-radius:10px;padding:0 14px;font:inherit;font-size:22px;font-weight:700;letter-spacing:.3em}
.ds-msg{margin:0;font-size:13px;color:var(--danger);min-height:1em}.ds-msg:empty{display:none}
.done .num{font-weight:700;color:var(--brand-text)}
.done .fine{font-size:12.5px;color:var(--muted)}

/* support chat: a panel on desktop, a full page on phones */
.chat{position:fixed;right:22px;bottom:84px;width:min(390px,calc(100vw - 44px));height:min(640px,calc(100vh - 110px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:46;display:flex;flex-direction:column;overflow:hidden;animation:rise .2s ease}
.chat .ch{background:var(--brand);color:#fff;padding:14px 14px 14px 16px;display:flex;align-items:center;gap:10px;flex:none}
.chat .ch .who{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.chat .ch b{display:block;font-size:15.5px;line-height:1.2}
.chat .ch small{color:rgba(255,255,255,.82);font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:2px}
.chat .ch small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7EE2A8;flex:none}
.chat .ch small.wait::before{background:#FFD98A;animation:blink 1.4s infinite ease-in-out}
.chat .ch button{background:rgba(255,255,255,.15);border:0;color:#fff;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:none}
.chat .ch .chback{display:none;background:none;margin-left:-6px}
.chat .av{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none;position:relative}
.chat .av.agent{color:#fff}
.msgs{flex:1;min-height:0;padding:16px 16px 8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;background:var(--card)}
.msg{max-width:84%;padding:10px 13px;border-radius:18px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;animation:msgin .18s ease}
@keyframes msgin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg.bot{background:var(--sunk);color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--brand);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.me + .msg.bot,.msg.bot + .msg.me,.msg.sys + .msg,.msg + .msg.sys{margin-top:6px}
.msg.sys{background:none;color:var(--muted);font-size:12px;padding:6px 0;align-self:center;text-align:center;max-width:100%}
.msg.sys.wait{animation:blink 1.8s infinite ease-in-out}
.msgby{font-size:11.5px;color:var(--muted);margin:8px 0 0 4px;align-self:flex-start}
.typingrow{display:flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px}
.typingrow .msg{display:flex;gap:4px;align-items:center;padding:12px 14px}
.typingrow i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite ease-in-out}
.typingrow i:nth-child(2){animation-delay:.15s}.typingrow i:nth-child(3){animation-delay:.3s}
.typingrow span{font-size:11.5px;color:var(--muted)}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chatstate{flex:none;padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--paper);display:grid;gap:10px}
.ratecard{display:grid;gap:8px;text-align:center}
.ratecard b{font-size:14.5px;color:var(--ink)}
.rstars{display:flex;justify-content:center;gap:4px}
.rstars button{background:none;border:0;padding:2px 3px;color:#D6DCE6;cursor:pointer;line-height:0;transition:transform .12s,color .12s}
@media (hover:hover) and (pointer:fine){.rstars button:hover{transform:scale(1.12)}}
.rstars button.on{color:#F5A623}
.ratecard textarea{border:1px solid var(--line);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;min-height:60px;resize:none;background:var(--card);color:var(--ink)}
.ratecard .btn,.chatstate .newchat{justify-self:center}
.chatstate .ended{font-size:12.5px;color:var(--muted);text-align:center}
.chatstate .newchat{background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px}
.ratethanks{text-align:center;font-size:13.5px;color:var(--ink)}
.ratethanks .st{color:#F5A623;letter-spacing:1px}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 12px;flex:none}
.quick:empty{display:none}
.intro{display:grid;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--paper);flex:none}
.chatgate{padding:16px 16px 18px;border-top:1px solid var(--line);background:var(--paper);flex:none;display:grid;gap:8px;justify-items:start}
.chat.gated .msgs,.chat.gated .chatstate{display:none}
.chat.gated .chatgate{flex:1;border-top:0;align-content:center;padding:20px 18px 26px}
.chatgate b{font-size:15px;color:var(--ink)}
.chatgate p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.chatgate .btn{width:100%;justify-content:center;margin-top:2px}
.chatgate .alt{font-size:12px}
.intro p{margin:0;font-size:13px;color:var(--body);line-height:1.4}
.intro input{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;background:var(--card);color:var(--ink);min-width:0}
.intro input[aria-invalid="true"]{border-color:var(--danger,#C0392B)}
.intro .btn{justify-self:start;background:var(--brand);color:#fff;border:0;padding:10px 18px;font-size:14px}
@media (hover:hover) and (pointer:fine){.intro .btn:hover{background:var(--brand-hover)}}
.quick button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}
@media (hover:hover) and (pointer:fine){.quick button:hover{background:var(--brand-soft)}}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);flex:none;background:var(--card)}
.composer.off{background:var(--sunk)}
.composer.off textarea{background:var(--sunk);color:var(--muted);cursor:not-allowed}
.composer.off button{opacity:.4;cursor:not-allowed}
.composer textarea{flex:1;border:1px solid var(--line);border-radius:20px;padding:10px 14px;font:inherit;font-size:14px;line-height:1.35;background:var(--paper);color:var(--ink);min-width:0;resize:none;max-height:120px;overflow-y:auto}
.composer textarea:focus{outline:none;border-color:var(--brand)}
.composer button{background:var(--brand);color:#fff;border:0;border-radius:999px;width:42px;height:42px;display:grid;place-items:center;flex:none}
@media (max-width:760px){
  .chat{left:0;right:0;top:0;bottom:auto;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;animation:none;z-index:60}
  html.chat-open,html.chat-open body{background:#fff}
  html.chat-open body > :not(.chat):not(.toast){visibility:hidden}   /* the store never peeks out around the keyboard */
  .intro input,.ratecard textarea{font-size:16px}   /* under 16px iPhones zoom the page in on tap */
  .chat .ch{padding:calc(10px + env(safe-area-inset-top)) 12px 10px 8px}
  .chat .ch .chback{display:grid}
  .chat .ch .chx{display:none}
  .msgs{padding:14px 12px 8px}
  .msg{max-width:86%;font-size:15px}
  .composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .composer textarea{font-size:16px}
  html.chat-open,html.chat-open body{overflow:hidden}
}

/* toast */
/* the bar after an add: the cart's count and total and Check out (2026-10-09) */
.addbar{position:fixed;left:50%;bottom:24px;z-index:58;display:flex;align-items:center;gap:10px;width:min(520px,calc(100vw - 24px));padding:8px 8px 8px 10px;border-radius:20px;background:#121417;color:#fff;box-shadow:0 10px 30px rgba(18,20,23,.28);transform:translate(-50%,16px);opacity:0;transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .2s}
.addbar.show{transform:translate(-50%,0);opacity:1}.addbar[hidden]{display:none}
.pdbar,.pdtop,.sign-stock,.was-sv,.bl-eta{display:none}   /* phones only: see the phone block */
#pdPrice sup{font-size:inherit;vertical-align:baseline;top:0;position:static}
.pdfast{display:none}
.ab-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;text-align:left;padding:0;cursor:pointer;font:inherit}
.ab-main img{width:42px;height:42px;border-radius:10px;background:#fff;object-fit:contain;flex:none;padding:2px}
.ab-txt{display:grid;min-width:0;gap:1px}.ab-txt b{font-size:14.5px;font-weight:600}
.ab-txt small{font-size:13px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ab-txt small .g{color:#4ADE80;font-weight:600}
.ab-go{flex:none;height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:#0F1111;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (prefers-reduced-motion:reduce){.addbar{transition:none}}
.cmail{margin-top:12px;text-align:center}.cmail .linkbtn{font-size:14px}
.cmail form{text-align:left;display:grid;gap:8px}.cmail label{font-size:13.5px;color:var(--muted)}
.cmrow{display:flex;gap:8px}.cmrow input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:var(--paper)}
.cmrow .btn{flex:none;height:44px;padding:0 18px}.cmnote{font-size:13.5px;margin:0;min-height:0}.cmnote.ok{color:var(--ok)}.cmnote.bad{color:var(--deal)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:500;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .22s;z-index:60;width:max-content;max-width:min(520px,calc(100vw - 32px))}
.toast span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast button{background:none;border:0;color:#FFD98A;font-weight:700;padding:0;white-space:nowrap;flex:none}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .banner{min-height:260px;padding:30px 28px}
  .slide{padding:26px 24px}
  .cnav{display:none}
  .fcols{grid-template-columns:1fr 1fr;gap:30px 18px}
  .fcols>div:first-child{grid-column:1 / -1}
  .dialog{grid-template-columns:1fr;height:auto;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:12px 12px 0 0;align-self:end}
  /* checkout on a phone: one sheet that scrolls as a whole, the order summary folded into a bar at the top, fields in
     one column, and the total with "Place order" pinned to the bottom of the screen */
  #coDialog{display:block}
  #coDialog > .close{position:sticky;top:10px;right:auto;margin:10px 10px -54px auto;width:44px;height:44px;z-index:7;background:rgba(255,255,255,.96)}
  #coDialog .co-in{display:flex;flex-direction:column;max-height:none;overflow:visible}
  #coDialog .co-sum{order:-1;border:0;border-bottom:1px solid var(--line);padding:0;gap:0;overflow:visible;background:var(--sunk)}
  .co-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:20px 64px 18px 18px;font:inherit;color:var(--ink);text-align:left}
  .co-toggle span{flex:1;font-weight:600;font-size:15px}.co-toggle small{color:var(--muted);font-weight:500}
  .co-toggle b{font-size:16px}.co-toggle svg{transition:transform .2s;color:var(--muted)}
  .co-sum.open .co-toggle svg{transform:rotate(180deg)}
  #coDialog .co-sum-body{display:none;padding:0 18px 18px}
  #coDialog .co-sum.open .co-sum-body{display:flex}
  #coDialog .co-sum-body h3,#placeBtn{display:none}
  #coDialog .co-form{overflow:visible;padding:18px 18px 10px}
  .co-bar{display:flex;align-items:center;gap:14px;position:sticky;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .co-bar .co-tot{display:flex;flex-direction:column;line-height:1.15}.co-bar small{color:var(--muted);font-size:12px}.co-bar b{font-size:19px;color:var(--ink)}
  .co-bar .btn{flex:1;padding:14px 18px}
  .co-bar.pay .co-tot{display:none}
  .co-bar{flex-wrap:wrap;row-gap:10px}
  .co-bar .coexpress{flex:0 0 100%}
  /* The form is the first screen (Lior, 2026-10-13, from Instagram's own browser on his iPhone: "This is a mess! Now I see
     why customers leaving the page look it's covering the entire checkout"). The cost rows, the free-delivery bar and three
     things to add stood 376px tall above the Email box, which opened below the screen. Now: the cost in one line, the
     free-delivery line with its bar, the ideas folded behind one link, a smaller heading, a slimmer summary bar and bottom
     bar. The checkout's Apple Pay button stays under the Continue button, where he asked for it. */
  #coDialog .co-form h2{font-size:20px;margin-bottom:10px}
  #coDialog .co-form .sub{display:none}
  .co-toggle{padding:14px 64px 13px 18px}
  #coDialog > .close{top:3px;margin:3px 8px -47px auto}
  #coDialog .co-form{padding:14px 18px 10px}
  .co-first{margin:0 0 14px}
  .cf-rows{display:flex;flex-wrap:wrap;gap:2px 14px}
  .cf-rows div{padding:0;font-size:13.5px;gap:5px;justify-content:flex-start}
  .cf-bar{padding:8px 0 0}.cf-msg{font-size:13.5px}.cf-track{margin-top:6px;height:5px}
  .cf-more{display:block;margin:4px 0 0;padding:5px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--brand);text-decoration:underline;cursor:pointer}
  .cf-more[hidden]{display:none}
  .cf-adds{margin-top:4px}
  .co-bar{padding:10px 18px calc(10px + env(safe-area-inset-bottom));row-gap:8px}
  .co-bar .btn{padding:13px 18px}
  /* The phone checkout, one thing per screen (Lior, 2026-10-13: "go to amazon and see the steps when someone isn't logged in
     and copy it. And the look. We need to be simple as that"). Amazon's own: a bare page with its name on top, one box, one
     yellow button; then the address; then the payment. Ours, in our own words and colours: email, delivery address,
     payment. Nothing sits above the boxes, the button comes right under them (Apple Pay under the button, where Lior
     asked for it), and the cost is spelled out next to the Pay button. Wider screens keep the two-column checkout. */
  @media (max-width:760px){
    #coDialog{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;background:#fff}
    .co-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:52px;padding:0 6px;position:sticky;top:0;z-index:6;background:#fff;border-bottom:1px solid var(--line)}
    .co-head .co-logo{justify-self:center;height:22px;width:auto}
    .co-back{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer}
    #coDialog[data-phase="email"] .co-back{visibility:hidden}
    #coDialog > .close{top:4px;margin:4px 6px -48px auto;background:none}
    #coDialog .co-sum{background:#fff}
    /* the Order summary under the delivery address and the Continue button, and under the payment on the next screen
       (Lior, 2026-10-17, on Amazon showing the cost at the end: "They committed", then "So maybe moving the section under
       the delivery information?"). It stays open; the app's checkout already has its address first. */
    #coDialog .co-sum{order:1;border-bottom:0;border-top:1px solid var(--line)}
    /* the cost once, above the Pay button: the Order summary under it keeps the items and the arrival date (Lior,
       2026-10-18: "Why we need it twice? Just the one on top of the buttons") */
    /* then: "Need to remove the order summary. Or replace it with the one on top of the buttons", and "Maybe move the order
       summary (collapsed) above the items line": on the one-page screen the Order summary sits folded right above the cost
       lines (coSumPlace moves it there), and opens to the items and the arrival date; the cost lines under it are the money */
    /* the same on the payment step of the two-step checkout (.fold; Lior, 2026-10-18: "the payment supposed to be in a
       separate step, like it used to be, but keep the same format") */
    #coDialog.fold .co-sum{margin:18px 0 0;border:0;border-top:1px solid var(--line);background:#fff}
    #coDialog.fold .co-toggle{padding:14px 0}
    #coDialog.fold .co-sum-body{padding:0 0 4px}
    #coDialog.fold .co-sum-body .sum,#coDialog.fold #coShipNote,#coDialog.fold #coToggleTotal{display:none}
    #coDialog.fold .co-cost{margin-top:0}
    #coDialog.one #coStep2 .sect{display:block;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:0;text-transform:none;margin:24px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
    .co-toggle{padding:12px 18px}
    /* the email sits on the address screen too: one screen with everything to deliver it (Lior, 2026-10-31: "the first page
       not supposed to be the email to check out. It's supposed to be everything, the email and the name, the delivery address") */
    #coDialog[data-phase="email"] .co-sum,#coDialog[data-phase="email"] .co-ph-addr{display:none}
    #coDialog .co-first,#coDialog .co-bar,#coDialog .co-form .sect{display:none}
    #coDialog .co-form{padding:18px 20px 34px}
    #coDialog .co-form h2{font-size:25px;line-height:1.2;margin:4px 0 16px}
    #coDialog .field{margin-bottom:14px}
    #coDialog .field label{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
    #coDialog .field input,#coDialog .field select{min-height:50px;border-radius:8px;border-color:#8B9099;font-size:16px}
    #coDialog .telbox::before{font-size:16px}
    #coDialog .shipnote{margin:0 0 12px}
    #coDialog .co-optin{margin:2px 0 4px;font-size:14px}
    .co-acts{display:grid;gap:10px;margin-top:10px}
    .co-go{width:100%;min-height:50px;border-radius:999px;background:var(--accent);border-color:var(--accent);color:#0F1111;font-size:16px;font-weight:600}
    .co-go:active{background:var(--accent-hover)}
    .co-go:disabled{opacity:.6}
    .co-safe{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
    .co-safe:empty{display:none}
    .co-cost{display:block;margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
    .co-cost div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14.5px;color:var(--body)}
    .co-cost div b{font-weight:500;color:var(--ink)}
    .co-cost div.tot{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);font-size:17px;color:var(--ink);font-weight:700}.co-cost div.tot b{font-weight:700}
    /* the things that close a small gap, under the delivery line: the first screen's rows, not cost lines */
    .co-cost .cf-adds{display:grid;gap:0;padding:0;margin:2px 0 6px}
    .co-cost .cf-add{display:grid;grid-template-columns:52px 1fr auto;gap:12px;padding:9px 0;font-size:13.5px}
    .co-cost .cf-add .n{display:block;padding:0;font-size:13.5px;color:var(--ink)}.co-cost .cf-add .n b{display:block;font-weight:600}
    #coDialog .shipsum{margin-bottom:16px}
  }
  .overlay{padding:0;place-items:end center}
  .overlay.side{place-items:stretch end}
  .overlay.left{place-items:stretch start}
  .pd-media{height:400px;flex:none}
  .gslide{padding:16px}
  .zoom img{max-height:250px}

}
@media (max-width:760px){
  .hdr-in{grid-template-columns:auto 1fr auto;gap:10px}
  .hdr-bar .logo img,.hdr-bar .logo svg{height:28px}
  .search{grid-column:1 / -1;grid-row:2}
  .catnav,.iconbtn.zip,.iconbtn.acct{display:none}
  .menubtn{display:flex}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .prow .p{font-size:18px}
  .tier{padding:13px 10px;gap:3px}   /* pack prices stay side by side like on a computer (Lior, 2026-09-15); bigger cards (2026-09-17) */
  .tier .u{font-size:18px}
  .tier .q,.tier .s{font-size:12.5px}
  .cta{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr;gap:0}.f2.names{grid-template-columns:1fr 1fr;gap:0 10px}
  .f3{grid-template-columns:1fr 1fr;gap:0 10px}.f3 .field:first-child{grid-column:1 / -1}
  .promo{grid-template-columns:1fr}
  .fcols a,.fcols .fmorebtn{font-size:15px}
  .fcols h4{font-size:16px}
  .fcols ul{gap:14px}
  .drawer{width:100vw;max-width:100vw}
  .dialog{width:100vw;max-width:100vw;border-radius:12px 12px 0 0}
  .overlay.center{padding:18px;place-items:center}
  .dialog.zipdlg{width:min(400px,100%);max-width:100%;border-radius:18px;align-self:center}
  .xs-hide{display:none}
  input,select,textarea,.search input{font-size:16px!important}   /* 16px stops iOS from zooming into fields; beats every per-field size */
  .banner.main{min-height:360px}
  .slide{padding:22px 18px;justify-content:flex-end}
  .slide .kicker{font-size:11px;margin-bottom:6px}
  .slide h2{font-size:26px;max-width:none}
  .slide .t{font-size:14px;margin:8px 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .slide .btn{padding:10px 16px;font-size:14px}
  .pbanner .btn,.bwide .btn,.brow .btn{padding:10px 16px;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pbanner{min-height:0;padding:22px 18px}
  .packband{grid-template-columns:1fr}
  .packband .ph{order:-1;min-height:0;aspect-ratio:3/1;background-image:var(--bgm,var(--bg));background-position:center}
  .packband .in{padding:20px 18px 22px}
  .pbanner.soft{grid-template-columns:1fr;gap:14px;padding:16px}
  .pbanner.soft .ph{min-height:150px;order:-1}
  .pbanner.soft.rev{grid-template-columns:1fr}
  .pbanner.soft.band{grid-template-columns:56px 1fr;gap:12px}
  .pbanner.soft.band .ph{width:56px;height:56px;min-height:0;order:0}
  .btrack .pbanner.soft{padding:16px}
  .pbanner.blue::before{background:linear-gradient(180deg,rgba(11,59,113,.62) 0%,rgba(11,59,113,.93) 55%,rgba(11,59,113,.97) 100%)}
  .pbanner h3{font-size:22px}
  .btrack .pbanner{min-height:230px;padding:22px 18px}
  .brow .cnav{display:none}
  .pbanner p{font-size:13.5px;margin:6px 0 12px}
  .toolbar{flex-direction:column;align-items:stretch;gap:10px;padding:14px 0 10px}
  .bhero{grid-template-columns:1fr;gap:16px;margin:0 0 2px;padding:22px 18px}
  .bhero.art{padding:0;margin:0 -16px 2px}
  .bhero h1{font-size:34px}
  .bhero .bh-pics{gap:6px}
  .toolbar .tools{justify-content:space-between;gap:8px;min-width:0;flex-wrap:wrap}
  .toolbar .tools .fbtn{flex:none}
  .toolbar .tools label{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0}
  .toolbar .tools select{flex:1 1 80px;min-width:0;max-width:170px;text-overflow:ellipsis}
  .instock{font-size:11px;white-space:nowrap}
  .add{padding:7px 12px;font-size:12px;white-space:nowrap}
  /* search and category results on phones: one product per row, photo on the left (Lior, 2026-09-15, from Amazon's list) */
  .grid:not(.two){grid-template-columns:minmax(0,1fr);gap:10px}
  /* two per row, the way Amazon shows a department on a phone (Lior, 2026-09-16) */
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .grid.two .ctitle{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grid.two .eyebrow,.grid.two .short,.grid.two .rate > span.num{display:none}   /* keep the stars, drop the review count: no room at this width */
  .grid.two .rate{font-size:12px;gap:4px}
  .grid.two .vol{flex-wrap:nowrap;white-space:nowrap;font-size:12px;gap:5px;padding:5px 8px}
  .grid.two .eta{font-size:12px}
  .grid.two .add{padding:9px 10px;font-size:13px}
  .grid.two .prow .p{font-size:17px}
  /* the same order as the computer grid and the rows: deal, price, title, then the stars, the delivery date and the button
     (Lior, 2026-10-08: "This order not make sense, Usually rates comes at the bottom"; the stars sat between title and price) */
  .grid .cdeal{order:1}.grid .prow{order:2}.grid .vol{order:3}.grid .eyebrow{order:4}.grid .ctitle{order:5}.grid .short{order:6}
  .grid .rate{order:7}.grid .eta{order:8}.grid .crow{order:9}
  .grid:not(.two) .card{flex-direction:row;align-items:stretch;border-radius:8px}
  @media (hover:hover) and (pointer:fine){.grid:not(.two) .card:hover{transform:none;box-shadow:none}}
  .grid:not(.two) .thumb{width:41%;flex:none;aspect-ratio:auto;min-height:190px;background:var(--tile-photo);border-bottom:0;padding:0}
  .grid:not(.two) .thumb img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);mix-blend-mode:multiply}
  @media (hover:hover) and (pointer:fine){.grid:not(.two) .card:hover .thumb img{transform:none}}
  .grid:not(.two) .cbody{padding:12px 12px 12px 14px;gap:5px;min-width:0}
  .grid:not(.two) .eyebrow{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
  .grid:not(.two) .ctitle{font-size:14px;font-weight:500;line-height:1.32;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid:not(.two) .short:empty,.grid .vol.none{display:none}
  .grid:not(.two) .rate{font-size:13px}
  .grid:not(.two) .rate b{font-weight:500}
  .grid:not(.two) .prow{margin-top:2px;padding-top:0}
  .grid:not(.two) .prow .p{font-size:18px;font-weight:500}
  .grid:not(.two) .vol{background:none;padding:0;justify-content:flex-start;gap:6px;font-size:13px;font-weight:500;color:var(--body)}
  .grid:not(.two) .vol span{background:var(--cta);color:#fff;font-weight:600;padding:3px 6px;border-radius:4px;line-height:1.2}
  .grid:not(.two) .vol b{font-weight:500}
  .grid .eta{font-size:13px}
  .grid .crow{flex-direction:column;align-items:stretch;gap:8px;padding-top:6px}
  .grid .instock{font-size:12.5px}
  .grid .add{width:100%;padding:10px 14px;font-size:14px;font-weight:600}   /* a bit bolder (Lior, 2026-10-27) */
  .grid .cstep{width:100%;height:40px;justify-content:space-between}
  .pick .cap{flex-wrap:wrap;gap:6px}
  .row,.section.dept .row{grid-auto-columns:280px}
  .pick .cap .pp{font-size:20px}
  .top{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  .wrap{padding-inline:16px}
  .banner.main h1{font-size:28px}
  .banner.main p{font-size:14.5px}
  .sec-head h2{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ customer account (2026-09-15) ============ */
body.acct-view{background:var(--page)}
.acctpage{max-width:1040px;margin:0 auto;padding:22px 0 50px}
.acct-auth{max-width:420px;margin:18px auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 26px 22px}
.acct-auth h1{font-size:27px;margin-bottom:6px}
.acct-auth .lede{margin:0 0 16px;color:var(--muted);font-size:14px}
.acct-auth form{display:grid;gap:2px}
.acct-auth .btn{margin-top:6px}
.acct-auth .btn.codebtn{background:#fff;color:var(--ink);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.acct-auth .btn.codebtn:hover{border-color:var(--ink)}}
.authmsg{font-size:13.5px;color:var(--danger);margin:10px 0 0}
.authmsg.ok{color:var(--ok)}
.authmsg:empty{display:none}
@media (hover:hover) and (pointer:fine){.linkbtn:hover{text-decoration:underline}}
.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--body);display:grid;gap:8px}
.acct-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 14px}
.acct-head h1{font-size:30px}
.acct-head p{margin:3px 0 0;color:var(--muted);font-size:14px}
.acct-tabs{display:flex;gap:4px;border-bottom:1px solid #D5D9D9;margin-bottom:18px}
.acct-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:inherit;font-weight:700;color:var(--body);font-size:15px;cursor:pointer;margin-bottom:-1px}
.acct-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--hdr, #0B4A8F)}
.acct-top{position:sticky;top:calc(var(--topH,0px) + var(--hdrH,66px) + var(--navH,0px));z-index:20;background:var(--page);transition:box-shadow .2s ease;margin-bottom:18px}   /* the greeting and tabs stay put while orders scroll under them (Lior, 2026-09-21) */
.acct-top .acct-tabs{margin-bottom:0}
.acct-top.stuck{box-shadow:0 10px 12px -11px rgba(15,23,42,.3)}
.acct-top.stuck .acct-head{margin:0 0 4px;padding-top:10px}
.acct-top.stuck .acct-head h1{font-size:19px}
.acct-top.stuck .acct-head p{display:none}
.acct-empty{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;text-align:center;display:grid;gap:10px;justify-items:center}
.acct-empty b{font-size:18px;color:var(--ink)}
.ocard{background:#fff;border:1px solid #D5D9D9;border-radius:10px;overflow:hidden;margin-bottom:16px}
.ohead{display:flex;gap:28px;background:#F0F2F4;padding:12px 18px;border-bottom:1px solid #D5D9D9;flex-wrap:wrap}
.ohead small{display:block;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--muted);font-weight:600}
.ohead b{color:var(--body);font-weight:500;font-size:13.5px}
.ohead .onum{margin-left:auto;text-align:right}
.obody{padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px 20px}
.ostatus{grid-column:1 / -1}
.ostatus b{display:block;font-size:18px;color:var(--ink);font-family:"Outfit","Plus Jakarta Sans",sans-serif}
.ostatus b.cancelled{color:var(--danger)}.ostatus b.delivered{color:var(--ok)}
.ostatus span{font-size:14px;color:var(--body)}
.oretby{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--body)}
.oretby svg{width:17px;height:17px;flex:none;margin-top:0;color:var(--ink)}   /* black, not green or yellow (Lior, 2026-09-21) */
.ostatus .oretby span{font-size:13.5px}
.ostatus .oretby b{display:inline;font-size:13.5px;font-family:inherit;font-weight:700;color:var(--ink)}
.oretby em{font-style:normal;font-weight:600;color:var(--gold)}
.oretby.closed,.oretby.closed svg{color:var(--muted)}
/* tracking block and delivery photo on the order card (Lior, 2026-10-01: options F and D of mockup/brand/delivery-photo.swift) */
.otrack{grid-column:1 / -1;display:grid;gap:10px;max-width:520px}
/* option E (Lior, 2026-10-01: "too much blue"): the carrier as one quiet row with a line round it, the whole row opens
   the carrier's tracking page */
.ot-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit}
@media (hover:hover) and (pointer:fine){a.ot-row:hover{border-color:#C9CDD4;background:#FAFBFC}}
.ot-ic{width:40px;height:40px;border-radius:50%;background:#F2F3F5;color:var(--ink);display:grid;place-items:center;flex:none}
.ot-ic svg{width:18px;height:18px}
.ot-row b{display:block;font-size:15px;color:var(--ink)}.ot-row small{color:var(--muted);font-size:13px}
.ot-row .ot-go{margin-left:auto;color:var(--muted);font-size:20px;line-height:1}
.ot-note{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--muted)}
.ot-note svg{width:15px;height:15px;flex:none;margin-top:1px}
.odphoto{grid-column:1 / -1;display:grid;gap:10px;max-width:520px;padding-top:14px;border-top:1px solid var(--line-soft)}
.odphoto h4{margin:0;font-size:16px;color:var(--ink)}
.odp-img{border:0;padding:0;background:var(--brand-soft);border-radius:12px;min-height:160px;overflow:hidden;cursor:zoom-in;display:grid;place-items:center;color:var(--muted);font:inherit;font-size:13.5px}
.odp-img img{width:100%;height:auto;max-height:420px;object-fit:contain;display:block}   /* the whole photo: the package is usually at the bottom */
.odphoto p{margin:0;font-size:14.5px;color:var(--ink)}
.odphoto p.odp-help{color:var(--muted)}
.dpbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:24px}
.dpbox img{max-width:100%;max-height:100%;border-radius:8px}
.dpbox button{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer}
.oitems{display:grid;gap:12px;align-content:start}
.oitem{display:flex;gap:12px;align-items:center;min-width:0}
.oitem .th{width:72px;height:72px;background:var(--tile-photo);border-radius:8px;display:grid;place-items:center;flex:none;padding:6px}
.oitem .th img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.oitem .nm{min-width:0}
.oitem a{color:var(--brand-text);font-weight:500;font-size:14px;line-height:1.35;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none}
@media (hover:hover) and (pointer:fine){.oitem a:hover{text-decoration:underline}}
.oitem span.t{color:var(--ink);font-weight:500;font-size:14px}
.oitem small{display:block;color:var(--muted);font-size:12.5px}
.oacts{display:grid;gap:8px;align-content:start}
.oacts .btn{width:100%}
.ocancel{padding:0 18px 18px;display:grid;gap:10px}
/* returns */
.orets{grid-column:1 / -1;display:grid;gap:8px}
.oret{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#F7F9FB;border:1px solid #E3E8EE;border-radius:10px;padding:10px 12px}
.oret b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.oret span{font-size:13px;color:var(--body)}
.oret-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.oreturn{padding:0 18px 18px;display:grid;gap:10px;border-top:1px solid #E3E8EE;padding-top:16px}
.oreturn h3{font-size:16px}
.oreturn .sub{margin:-6px 0 0;color:var(--ok);font-size:13.5px;font-weight:500}
.rlist{display:grid;gap:8px}
.ritem{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.ritem:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.ritem input{width:18px;height:18px;accent-color:var(--brand)}
.ritem .th{width:52px;height:52px;background:var(--tile-photo);border-radius:6px;display:grid;place-items:center;padding:4px}
.ritem .th img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ritem .nm{font-size:13.5px;color:var(--ink);line-height:1.3;min-width:0}
.ritem .nm small{display:block;color:var(--muted);font-size:12px}
.ritem select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;background:#fff}
.ritem .one{font-size:13px;color:var(--muted);padding-right:6px}
.rlab{font-size:13px;font-weight:600;color:var(--ink);margin-top:4px}
.oreturn .rchips{display:flex;flex-wrap:wrap;gap:8px}
.oreturn .rchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:500;color:var(--body);cursor:pointer}
.oreturn .rchip[aria-checked="true"]{border-color:var(--brand);color:var(--brand-text);background:var(--brand-soft)}
.ritem.off{opacity:.55;cursor:default}
.rfinal{display:grid;gap:8px;margin-top:4px}
.rnote{margin:0;color:var(--body);font-size:13px;line-height:1.5;max-width:62ch}
.rphotos,.rwants{display:grid;gap:8px;justify-items:start}
.rthumbs{display:flex;flex-wrap:wrap;gap:8px}
.rthumbs:empty{display:none}
.rthumb{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--tile-photo)}
.rthumb img{width:100%;height:100%;object-fit:cover}
.rthumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.oreturn .rchip[hidden]{display:none}
.rpick[hidden]{display:none}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oreturn textarea{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;resize:vertical}
.oreturn .row2,.qrbox .row2{display:flex;gap:8px;flex-wrap:wrap}
.oqr{padding:0 18px 18px}
.shipsheet{max-width:440px;margin:0 auto;background:#fff;border:1px solid #E3E8EE;border-radius:18px;padding:18px 18px 12px;display:grid;gap:14px;box-shadow:0 8px 28px rgba(16,24,40,.08)}
.ss-head{text-align:center}.ss-head h3{font-size:18px;margin:0}.ss-head span{font-size:12.5px;color:var(--muted)}
.ss-seg{display:grid;grid-template-columns:1fr 1fr;background:#EEF0F3;border-radius:999px;padding:3px}
.ss-seg button{border:0;background:none;border-radius:999px;padding:9px 10px;font:inherit;font-size:14px;color:var(--body);cursor:pointer}
.ss-seg button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ss-pane{display:grid;justify-items:center;gap:10px;text-align:center}
.ss-cap{margin:4px 0 0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:500}
.ss-qr{width:min(260px,72vw);aspect-ratio:1;display:grid;place-items:center}
.ss-qr img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.ss-tip{margin:0;font-size:13.5px;color:var(--body);max-width:32ch}
.ss-label{width:100%;max-width:320px;border:1px solid #E3E8EE;border-radius:8px;overflow:hidden;background:#fff}
.ss-label img{width:100%;display:block}
.ss-how{background:#F3F4F6;border-radius:12px;padding:0 14px}
.ss-how summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}
.ss-how summary::-webkit-details-marker{display:none}
.ss-how summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.ss-how[open] summary::after{transform:rotate(45deg)}
.ss-how .i{width:26px;height:26px;border-radius:50%;border:1.6px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink);flex:none}
.ss-how b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}.ss-how small{color:var(--body);font-size:13px}
.ss-how ol{margin:0 0 12px;padding-left:22px;display:grid;gap:6px;font-size:14px;color:var(--body)}
.ss-find{background:#1F1F1F!important;border-color:#1F1F1F!important;color:#fff!important;height:48px;border-radius:10px;display:grid;place-items:center;text-decoration:none;font-weight:600}
.ss-note{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.ss-done{justify-self:center}
.shipsheet.pending{text-align:left}.shipsheet.pending .ss-head{text-align:left}.shipsheet .row2{display:flex;gap:8px;flex-wrap:wrap}
.ocancel h3{font-size:16px}
.ocancel .rchips{display:flex;flex-wrap:wrap;gap:8px}
.ocancel .rchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:500;color:var(--body);cursor:pointer}
.ocancel .rchip[aria-checked="true"]{border-color:var(--danger);color:var(--danger);background:#FDF1F3}
.ocancel .row2{display:flex;gap:8px;flex-wrap:wrap}
.oship{font-size:13px;color:var(--muted)}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:16px;max-width:680px}
.acct-card h2{font-size:19px;margin-bottom:4px}
.acct-card > p{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.acct-card .check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--body);margin:4px 0 12px}
.acct-card .field input[readonly]{background:var(--sunk);color:var(--muted)}
@media (max-width:760px){
  .acctpage{padding:12px 0 36px}
  .acct-auth{margin:4px -16px;border-radius:0;border-inline:0;padding:22px 16px}
  .acct-head h1{font-size:25px}
  .acct-top{margin-inline:-16px;padding-inline:16px}
  .ohead{gap:14px 22px;padding:12px 14px}
  .ohead .onum{margin-left:0;text-align:left}
  .obody{grid-template-columns:1fr;padding:14px}
  .shipsheet{padding:16px 14px 10px}
  .oreturn,.oqr{padding-inline:14px}
  .ocard{margin-inline:-16px;border-radius:0;border-inline:0}
  .acct-card{margin-inline:-16px;border-radius:0;border-inline:0;padding:18px 16px}
}
/* ============ Amazon-style layout (2026-09-15) ============ */
/* colors (Lior chose option A, 2026-09-15): Shopimo blue header, white category bar, dark blue search button, orange deals */
/* the header and the category row in #213977, a softer navy Lior picked from a screenshot (2026-10-05: "I like this blue
   color for the nav bar, change it. I will check and see how it works"); before it our navy #072347 (2026-10-04), and for a
   day Costco's blue #005DAB and the tiles blue #285CE8.
   2026-10-10: tried the admin's charcoal #1E282D for an hour (Lior: "I want to see something"), then back to the blue
   ("Restore to our blue the navbar"), and the same evening the charcoal for good ("Make the navbar again dark as the one
   in the admin"). The same value sits in the theme-color tag, the help pages' header and the manifest. */
:root{--page:#E5E8ED;--sub:#123A69;--sub-2:#1B4B82;--accent:#FFC94D;--accent-hover:#F6B52A;--accent-line:#E7AC22;--buy:#F5A524;--buy-hover:#E8961A;--deal:#B42336;--hdr:#1E282D;--hdr-hover:#2A363C;--nav-ink:#fff}
/* the brand's dark grey on every button and mark that was navy (Lior, 2026-11-03: "all the dark blue buttons, to the dark
   gray that we are having our brand"): the header's #1E282D; the light tint behind chosen chips goes grey with it */
:root{--brand:#1E282D;--brand-hover:#2A363C;--brand-deep:#1E282D;--blue:#1E282D;--blue-deep:#1E282D;--brand-soft:#F2F3F4}
/* header: one navy bar; no frame on hover (Lior, 2026-09-27: "why when hovering it's having a frame, need to remove that"):
   the menu links underline instead, the buttons stay as they are */
.hdr{border-bottom:0}
.hdr-in{grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;padding-block:9px}
.hdr-bar .iconbtn,.hdr-bar .cartbtn,.allbtn,.nl,.hdr-bar .logo{border:1px solid transparent;border-radius:6px}
@media (hover:hover) and (pointer:fine){
  @media (hover:hover) and (pointer:fine){.hdr-bar .iconbtn:hover,.hdr-bar .cartbtn:hover,.hdr-bar .logo:hover,.allbtn:hover,.nl:hover{background:none;border-color:transparent}}
  @media (hover:hover) and (pointer:fine){.allbtn:hover,.nl:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}}
}
.hdr-bar .logo{padding:6px 8px}
.hdr-bar .iconbtn{padding:6px 9px;gap:6px}
.hdr-bar .iconbtn small{font-size:12px;font-weight:500}
.hdr-bar .iconbtn b{font-size:14px;font-weight:700}
.acct-m{display:none}
.hdr-bar .acct svg{display:none}
.hdr-bar .search{max-width:none;justify-self:stretch}
.search .box{padding:0;gap:0;overflow:hidden;height:44px;border-radius:8px;border:0}
.hdr-bar .search .box{background:#fff}
.hdr-bar .search .box:focus-within{box-shadow:none;border-color:transparent}   /* no yellow ring on focus (Lior, 2026-09-18) */
.search select{flex:none;max-width:170px;height:100%;border:0;border-right:1px solid #D8DCE3;background:#EEF1F5 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpolyline points=%2220.33 8.67 12 17 3.67 8.67%22 fill=%22none%22 stroke=%22%23555%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center;color:#333;font:inherit;font-size:13px;padding:0 26px 0 12px;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.search select:hover{background-color:#E2E6EC}}
.search input{padding:0 14px;font-size:15px}
/* the search button is light, like the department box at the other end of the field (Lior, 2026-10-10, with the charcoal
   header: "change the search to match Light background"); before it our navy #072347 (2026-10-05) */
.search .sbtn{flex:none;width:54px;height:100%;border:0;border-left:1px solid #D8DCE3;background:#EEF1F5;color:#1E282D;display:grid;place-items:center;padding:0}
.search .sbtn svg{color:#1E282D}
@media (hover:hover) and (pointer:fine){.search .sbtn:hover{background:#E2E6EC}}
.hdr-bar .cartbtn{position:relative;background:none;color:#fff;padding:6px 10px 6px 6px;gap:8px;align-items:center}
@media (hover:hover) and (pointer:fine){.hdr-bar .cartbtn:hover{background:none}}
.hdr-bar .cartbtn svg{width:28px;height:28px}
.hdr-bar .cartbtn b{font-size:14px;font-weight:700;line-height:1}
/* item count: a round badge on the cart's top-right corner, hidden while the cart is empty */
.hdr-bar .cartbtn .count{position:absolute;top:1px;left:23px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:#0E1320;font-size:11.5px;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px var(--hdr)}
/* the count stays on the cart even at 0, like Amazon; it shows the shopper the cart is empty rather than hiding the number (Lior, 2026-09-17) */
/* category bar */
.subnav{background:var(--hdr);color:#fff;position:sticky;top:calc(var(--topH,0px) + var(--hdrH,66px));z-index:29;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .2s ease}   /* the header navy, and it sticks under the header (Lior, 2026-09-15) */
/* tucked behind the header while the shopper scrolls down, back as soon as they scroll up (Lior, 2026-09-19) */
.subnav.tuck{transform:translateY(-100%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.subnav{transition:none}}
.subnav-in{display:flex;align-items:center;gap:2px;height:40px}
.allbtn{display:flex;align-items:center;gap:5px;background:none;color:var(--nav-ink);font-weight:700;font-size:14px;padding:5px 9px 5px 6px;white-space:nowrap}
.catnav{flex:1;min-width:0;justify-content:flex-start;border-top:0;gap:0}
.catnav>li{position:relative}
.nl{display:block;color:var(--nav-ink);text-decoration:none;font-size:14px;font-weight:500;padding:5px 9px;white-space:nowrap;cursor:pointer;background:none;font-family:inherit}
.nl.active{border-color:rgba(255,255,255,.5)}
.nl.hot{color:var(--accent)}
.dl .panel{display:none;top:100%;border-radius:0 0 10px 10px;margin-top:0}
.dl .panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
@media (hover:hover) and (min-width:761px){.dl:focus-within .panel{display:grid}@media (hover:hover) and (pointer:fine){.dl:hover .panel{display:grid}}}
.subpromo{margin-left:auto;padding-left:14px;font-weight:600;font-size:14px;white-space:nowrap}

/* side menu: a head in the header's blue (Costco blue since 2026-10-03, Lior: "change the side bar to costco"; was --sub
   #123A69), sections, departments that open their own panel */
.overlay.left{place-items:stretch start;padding:0}
.overlay.left .drawer{width:min(365px,86vw)}
.mhead{background:var(--hdr);color:#fff;border-bottom:0;padding:16px 18px}
.mhead h2{color:#fff;font-size:21px}
/* "Hello, sign in" or "Hi, <first name>": a button to sign-in or to the Profile tab (Lior, 2026-10-07: "Side bar should say
   Hi Lior and have the option to take you to the profile page") */
.mhtop{flex:1;min-width:0;display:grid;gap:6px;justify-items:start}
.mhello{display:flex;align-items:center;gap:8px;font-size:15px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;letter-spacing:0;line-height:1.15;color:#fff;background:none;border:0;padding:0;text-align:left;cursor:pointer;max-width:100%}
.mhello span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mhello:hover span{text-decoration:underline;text-underline-offset:3px}}
.mhello:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.mhead .close{background:rgba(255,255,255,.15);color:#fff;border:0}
.menu{padding:0}
.msec{padding:8px 0;border-bottom:1px solid #D5DBDB}
.msec h3{font-size:17px;font-weight:600;padding:12px 20px 6px;font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:0}
.menu a,.mrow{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 20px;color:var(--body);font-weight:500;font-size:14.5px;text-decoration:none;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit}
@media (hover:hover) and (pointer:fine){.menu a:hover,.mrow:hover{background:#EAEDED;color:var(--ink)}}
.mrow svg{color:#888}
.mback{display:flex;align-items:center;gap:10px;width:100%;padding:14px 20px;border:0;border-bottom:1px solid #D5DBDB;background:none;font:inherit;font-weight:600;font-size:14px;color:var(--body);cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.mback svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.mback:hover{background:#EAEDED}}
/* home: a gray page with white cards */
body.home{background:var(--page)}
/* the hero runs edge to edge on any screen (Lior, 2026-09-15: gray gaps beside it looked odd); its text lines up with the page */
body.home{overflow-x:clip}
body.home .hero{display:block;padding:0;margin:0 calc(50% - 50vw)}
/* The Stock-Up Book banner at the top of the home page (Lior, 2026-09-21: "Add a banner with the stock-up book to the top so
   customers can see our deals"). A white band under the navy bars; dates, pages and the three biggest savings come from
   books/index.json, so it follows the new edition every Monday. The words are there from the first paint, so nothing jumps. */
/* as wide as the department cards above it, in the same white card (Lior, 2026-10-07: "the same width like the cards") */
.bkbar{display:block;margin:20px 0 4px;background:#fff;border-radius:10px;color:var(--ink);text-decoration:none}
.bkbar-in{max-width:none;margin:0;padding:14px 20px;display:flex;align-items:center;gap:18px;min-height:84px}
/* a thick book with colour tabs past its pages (Lior, 2026-09-29, "J"): darker spine, the page block as an offset shadow,
   the tabs as one striped strip on the right, the same book as the app's */
.bkbar-cover{flex:none;position:relative;width:52px;height:68px;border-radius:4px;background:linear-gradient(90deg,#041731 0 12%,#072347 12%);color:#fff;display:flex;flex-direction:column;padding:7px 5px 7px 10px;box-shadow:2px 2px 0 #F4F1EA,2px 2px 0 1px #DCD6CA,0 4px 10px rgba(7,35,71,.22);margin-right:8px}
.bkbar-cover::after{content:"";position:absolute;right:-8px;top:8px;width:6px;height:50px;border-radius:0 2px 2px 0;background:linear-gradient(#FDBC0D 0 21%,transparent 21% 27%,#2E9E6A 27% 48%,transparent 48% 54%,#E0564B 54% 75%,transparent 75% 81%,#3B82C4 81%)}
.bkbar-cover small{font-size:5.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FFC94D;line-height:1.2}
.bkbar-cover b{font-family:"Outfit","Plus Jakarta Sans",sans-serif;font-size:9.5px;line-height:1.08;font-weight:700;margin-top:4px}
.bkbar-txt{display:grid;gap:2px;min-width:0}
.bkbar-txt small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deal,#B42336)}
.bkbar-txt b{font-family:"Outfit","Plus Jakarta Sans",sans-serif;font-size:19px;font-weight:700;color:var(--ink);line-height:1.2}
.bkbar-txt b span{font-weight:500;color:var(--body)}
.bkbar-txt > span{font-size:13.5px;color:var(--body)}
.bkbar-feat{margin-left:auto;display:flex;gap:20px;padding-top:6px}
.bkbar-feat i{position:relative;width:56px;height:56px;border-radius:8px;background:var(--tile-photo);display:grid;place-items:center;font-style:normal}
.bkbar-feat img{width:46px;height:46px;object-fit:contain}
.bkbar-feat em{position:absolute;left:50%;transform:translateX(-50%);top:-10px;background:var(--deal,#B42336);color:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:1.35;padding:1px 5px;border-radius:4px;white-space:nowrap}
.bkbar-go{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;margin-left:auto}
.bkbar-feat + .bkbar-go{margin-left:0}
.bkbar-go svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.bkbar:hover .bkbar-go{background:var(--brand-hover)}}
.bkbar:focus-visible{outline:3px solid var(--brand-text);outline-offset:-3px}
@media (max-width:760px){
  .bkbar-in{padding:10px 16px;gap:12px;min-height:76px}
  .bkbar-feat{display:none}
  .bkbar-txt b{font-size:16px}
  .bkbar-txt > span{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bkbar-go{padding:0;background:none;color:var(--ink);font-size:0;gap:0}
  @media (hover:hover) and (pointer:fine){.bkbar:hover .bkbar-go{background:none}}
  .bkbar-go svg{width:22px;height:22px}
}
body.home .banner.main{border-radius:0;min-height:0;height:clamp(300px,30vw,460px);padding:0;background:#000}   /* smaller (Lior, 2026-09-15); taller and uncapped versions were tried and reverted 2026-09-18 */
body.home .slide{justify-content:flex-start;padding:clamp(26px,3vw,46px) max(clamp(28px,4.5vw,70px),calc(50vw - 692px))}
body.home .slide .t{display:none}   /* no description line on the hero (Lior, 2026-09-15) */
@media (min-width:761px){body.home .slide h2{max-width:22ch;margin-bottom:18px}}
body.home .slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to bottom,rgba(229,232,237,0),var(--page));pointer-events:none}
body.home .slide .in{z-index:1}
/* hero art on desktop: the picture fills the whole hero edge to edge, with one light scrim on the left so the words
   read, and nothing else over it (Lior, 2026-09-17: "full and no this shadowing, just a light overlay") */
.slide .sbg{display:none}
@media (min-width:761px){
  /* the whole picture at the hero's height, on the right, with its own edge colour filling the rest; no zoom, no crop
     (Lior, 2026-09-17: "the hero images are too big, they need to match the size of the hero, and a bit more overlay") */
  /* two panels, no overlay and no fade: a soft colour ground on the left for the words, the picture on the right
     (Lior, 2026-09-18: "remove the overlay, left side soft colour, right side the image, no spread") */
  body.home .slide{background-image:none;background:var(--hsoft,#EAF0F7)}
  body.home .slide .sbg{display:block;position:absolute;top:0;bottom:0;right:0;width:calc(clamp(300px,30vw,460px) * 1.5);max-width:58%;background-image:var(--bg);background-size:cover;background-position:center;filter:none;z-index:0;-webkit-mask-image:none;mask-image:none}
  body.home .slide::before{display:none}
  /* a slide drawn for the whole hero ("full": true in hero.json, Lior, 2026-09-18): the picture spans the banner and a
     wash on the left keeps the words readable (its colour is set below) */
  body.home .slide.full .sbg{width:100%;max-width:none;left:0;background-position:var(--hpos,center)}   /* "pos" in hero.json moves the picture inside the hero */
  body.home .slide.full::before{display:block;z-index:1}
  body.home .slide .in{max-width:min(46ch,42vw)}
  body.home .slide .kicker{color:var(--brand-text)}
  body.home .slide h2{color:var(--ink)}
  body.home .slide .btn.light{background:var(--blue);color:#fff;border-color:var(--blue)}
  @media (hover:hover) and (pointer:fine){body.home .slide .btn.light:hover{background:var(--sub-2);border-color:var(--sub-2)}}
  body.home .slide::after{display:none}
  body.home .slide .in{z-index:2}
  /* a wide picture that must show whole ("fit": true in hero.json; Lior's household-essentials scene, 2026-10-10: at full
     bleed the category boxes covered the bottles): the picture keeps its own shape on the right, as tall as the part of the
     hero above the boxes, and its left and bottom edges melt into a panel in the picture's own wall colour ("soft") */
  body.home .slide.fit .sbg{left:auto;right:0;top:0;bottom:auto;height:calc(100% - 46px);width:auto;max-width:none;aspect-ratio:var(--har,2.4);background-size:100% 100%;background-position:right top;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 13%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 13%);mask-composite:intersect}
  body.home .slide.fit .in{max-width:min(40ch,36vw)}
  /* the full-width slides take the phone's look: a darker overlay, gold kicker, white words and the white button
     (Lior, 2026-09-19: "overlay on the hero, a bit darker, like on mobile") */
  body.home .slide.full::before{background:linear-gradient(90deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.3) 34%,rgba(0,0,0,.13) 62%,rgba(0,0,0,.05) 100%)}   /* lighter (Lior, 2026-09-20: "make it less dark") */
  body.home .slide.full .kicker{color:#FFD98A}
  body.home .slide.full h2{color:#fff}
  body.home .slide.full .in{text-shadow:0 1px 14px rgba(0,0,0,.45)}
  body.home .slide.full .btn.light{background:#fff;color:var(--brand-deep);border-color:#fff;text-shadow:none}
  @media (hover:hover) and (pointer:fine){body.home .slide.full .btn.light:hover{background:#EEF2F8;border-color:#EEF2F8}}
}
body.home .slide h2{font-size:clamp(28px,3.2vw,46px)}
body.home .cnav{top:40%}
body.home .dots{top:18px;bottom:auto;right:max(24px,calc(50vw - 696px))}
.agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:20px 0;position:relative;z-index:2}
body.home{--lift:clamp(60px,6vw,110px)}   /* how far the department cards ride up over the hero */
.agrid.lift{margin-top:calc(var(--lift, 110px) * -1)}
/* fewer than four cards still fill the row: three share it, two (or one) span it with their pictures in one line */
.agrid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.agrid.n2>.acard{grid-column:span 2}
.agrid.n1>.acard{grid-column:1/-1}
.agrid.n2 .quad,.agrid.n1 .quad{grid-template-columns:repeat(4,minmax(0,1fr))}
.acard{background:#fff;border-radius:10px;padding:18px 20px 16px;display:flex;flex-direction:column;min-width:0}
.acard h3{font-size:20px;font-weight:600;line-height:1.2;margin-bottom:12px}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;flex:1;align-content:start}
.qt{display:flex;flex-direction:column;gap:5px;color:var(--ink);text-decoration:none;cursor:pointer;min-width:0;background:none;border:0;padding:0;font:inherit;text-align:left}
.qt .im,.pt .im,.acard .big{background:var(--tile-photo);border-radius:8px;display:grid;place-items:center;overflow:hidden}
.qt .im{aspect-ratio:1;padding:10px}
.qt img,.pt img,.acard .big img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.qt span{font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.qt:hover span,.acard .more:hover,.rh a:hover{color:var(--brand-text);text-decoration:underline}}
.acard .more,.rh a,.rh .rh-all{margin-top:12px;align-self:flex-start;background:none;border:0;padding:0;color:var(--brand-text);font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none;font-family:inherit}
.acard .big{flex:1;min-height:220px;padding:20px;cursor:pointer}
.acard .big img{max-height:260px}
.acard .cap{margin-top:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.acard .cap b{font-size:14px;color:#0F1111;font-weight:620;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard{background:#fff;border-radius:10px;padding:18px 20px 16px;margin:20px 0;position:relative}
.grid{grid-auto-flow:row dense}   /* a carousel in the middle of a row pulls the next cards up instead of leaving a hole */
.cdeal{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media (min-width:761px){
  /* rich result cards on computers (Lior, 2026-10-10, next to Amazon's search results: "We need to make ours richer").
     Before this the grid was compact (2026-09-15, from Amazon's deals grid: 6 to a row, photo, price, two-line title,
     stars, a round + on the photo). Now about 4 or 5 to a row, each with: the deal, the price with its price per softgel /
     roll / ounce and the regular price, the brand, a three-line title, the short line (or how many sizes), stars with the
     count, Subscribe & Save, the delivery date, the free-delivery line, low stock, and a full Add to cart button.
     The order stays the one Lior set on 2026-10-08: deal, price, title, stars, delivery, button. Flat: no card frame.
     Type smaller and bolder like Amazon's deal grid (Lior, 2026-10-17, on amazon.com/events/devicedeals: "The fonts are
     smaller and bolder"): title 14/600, price 20/700, the small lines 12/600. */
  .grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:34px 18px}
  .grid .card{display:flex;flex-direction:column;border:0;background:none;border-radius:0;overflow:visible}
  @media (hover:hover) and (pointer:fine){.grid .card:hover{box-shadow:none;transform:none;border-color:transparent}}
  .grid .thumb{border:0;border-radius:10px;background:var(--tile-photo);padding:0;margin-bottom:10px;flex:none}
  .grid .thumb img{inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);mix-blend-mode:multiply}
  @media (hover:hover) and (pointer:fine){.grid .card:hover .thumb img{transform:scale(1.03)}}
  .grid .cbody{display:flex;flex-direction:column;gap:4px;padding:0;flex:1}
  .grid .cdeal{order:1}.grid .prow{order:2}.grid .vol{order:3}.grid .eyebrow{order:4}.grid .ctitle{order:5}.grid .short{order:6}
  .grid .rate{order:7}.grid .csub{order:8}.grid .eta{order:9}.grid .crow{order:10}
  .grid .vol.none,.grid .short:empty,.grid .eyebrow:empty{display:none}
  .grid .cdeal{gap:6px;margin-bottom:1px}
  .grid .dbadge{font-size:12px;font-weight:700;padding:3px 6px;border-radius:4px}
  .grid .dtext{font-size:12px;font-weight:700}
  .grid .prow{margin:0;padding:0;gap:3px 6px;align-items:baseline}
  .grid .prow .p{font-size:20px;font-weight:700;color:#0F1111;letter-spacing:0}
  .grid .prow .p sup{font-size:11px;top:-.75em}
  .grid .prow .ea{font-size:12px;font-weight:600;color:#565959}
  .grid .cunit{display:inline;font-size:12px;font-weight:600;color:#565959;white-space:nowrap}
  .grid .wasl{margin-left:0;font-size:12px;font-weight:600;color:#565959}
  .grid .vol{background:none;padding:0;font-size:12px;font-weight:600;color:var(--ink);justify-content:flex-start;align-items:center;gap:6px}
  .grid .vol span{background:var(--cta);color:#fff;font-weight:600;padding:4px 6px;border-radius:4px;line-height:1.2}
  .grid .vol b{font-weight:700}
  .grid .eyebrow{display:block;margin-top:4px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--brand-text)}
  .grid .ctitle{font-size:14px;font-weight:600;line-height:19px;color:#0F1111;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid .short{display:block;font-size:12px;font-weight:600;color:#565959;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid .short.optn{color:var(--brand-text);font-weight:600}
  .grid .rate{font-size:12px;font-weight:600;color:#565959;margin-top:1px}
  .grid .rate b{font-weight:700;color:#0F1111}
  .grid .rate .stars{width:70px!important;height:14px!important;--ss:14px!important}
  .grid .rate .stars svg{width:14px!important;height:14px!important}
  .grid .csub{display:block;font-size:12px;font-weight:700;color:var(--ok)}
  .grid .eta{flex-direction:column;align-items:flex-start;gap:1px;margin-top:2px;font-size:12px;font-weight:600;color:#0F1111}
  .grid .cfree{display:block;color:#565959}
  .grid .crow{flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:10px}
  .grid .instock{font-size:12px;font-weight:600}
  .grid .cadd{display:block}
  .grid .add{width:100%;height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;background:#FFC94D;border:1.5px solid #FFC94D;color:#0E1320}
  @media (hover:hover) and (pointer:fine){.grid .add:hover{background:#F6B52A;border-color:#F6B52A}}
  .grid .add.opt{background:#fff;border-color:var(--ink);color:var(--ink)}
  @media (hover:hover) and (pointer:fine){.grid .add.opt:hover{background:var(--ink);color:#fff}}
  .grid .add.added{background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important;animation:addpop .38s ease}
  .grid .cstep{width:100%;height:40px;justify-content:space-between}
  .grid .cstep button{width:44px}
  /* "Store closed", a meltable item in a hot month: a quiet full-width note where the button goes */
  .grid .add[disabled]{background:var(--sunk);border-color:var(--sunk);color:var(--body);opacity:1;cursor:default}
  /* coming soon and out of stock: "Notify me" as an outlined button */
  .grid .card.soon .add,.grid .add.notify,.grid .add.notified{background:#fff;color:var(--brand);border-color:var(--brand)}
  .grid .card.soon .add.notified,.grid .add.notified{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-text)}
}
.grid > .mod{grid-column:1 / -1;min-width:0;margin:4px 0;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.grid > .mod .rh h2{font-size:18px}
/* banners between result rows (Lior, 2026-09-15: "add banners every few rows so it will be busy"): department photo
   banners, and aisle/brand banners with clear-background product photos (cutouts) standing on a pastel ground */
.grid > .pbanner,.grid > .abnr{grid-column:1 / -1;min-width:0;margin:4px 0}
/* mix-and-match banners (Lior, 2026-09-23): hero band (A), price ladder (B), cart receipt (C), product-page strip (D) */
.grid > .mxb{grid-column:1 / -1;min-width:0;margin:6px 0}
#sections > .mxb{margin:20px 0}
.mxb h3{text-wrap:balance}
.mxn{font-variant-numeric:tabular-nums}
.mx-k{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.mx-flash{animation:mxFlash .6s ease}
@keyframes mxFlash{0%{transform:scale(1)}35%{transform:scale(1.13)}100%{transform:scale(1)}}
.mx-drop{animation:mxDrop .55s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes mxDrop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
.mx-tag{display:inline-flex;align-items:baseline;gap:6px;background:var(--accent);color:var(--ink);border-radius:999px;padding:3px 10px;font-weight:700;font-size:14.5px;box-shadow:0 1px 0 var(--accent-line)}
.mx-tag s{font-weight:500;font-size:11.5px;color:#6b5418}
.mx-tag s:empty,.mx-line s:empty,.mx-dex s:empty{display:none}
/* A: hero band */
.mxA{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:center;background:radial-gradient(120% 140% at 85% 20%,#15508f 0%,var(--brand) 45%,var(--brand-deep) 100%);color:#fff;border-radius:14px;padding:28px 32px;overflow:hidden}
.mxA .mx-copy{display:grid;gap:10px;align-content:center}
.mxA .mx-k{color:var(--accent)}
.mxA h3{font-size:34px;line-height:1.06;color:#fff;letter-spacing:-.02em}
.mxA .mx-copy p{margin:0;color:#C9D6EA;max-width:40ch}
.mx-save{display:inline-flex;align-items:center;gap:8px;width:max-content;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px 5px 8px;font-size:13.5px;color:#E4ECF7}
.mx-save b{background:var(--accent);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:14.5px}
.mx-stage{display:grid;gap:10px}
.mx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mx-slot{position:relative;aspect-ratio:1/1.12;border-radius:14px;border:1.5px dashed rgba(255,255,255,.28);display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:12.5px;font-weight:600;text-align:center;padding:8px}
.mx-slot:has(.mx-it:not([hidden])){border-color:transparent}
.mx-it{position:absolute;inset:0;border:0;margin:0;background:#fff;border-radius:14px;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:12px 10px 10px;box-shadow:0 10px 26px rgba(4,17,38,.35);cursor:pointer;font:inherit}
.mx-it[hidden]{display:none}
.mx-it img{width:100%;height:100%;object-fit:contain;min-height:0}
.mx-it .mx-tag{margin-top:6px}
.mx-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:#C9D6EA;flex-wrap:wrap}
.mx-tier{border:1px solid rgba(255,201,77,.6);color:var(--accent);border-radius:999px;padding:3px 10px;font-weight:700;font-size:12px}
.mx-tier:empty{visibility:hidden}
/* B: one product, price ladder */
.mxB{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 26px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.mxB:hover{border-color:var(--brand)}}
.mxB:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mxB .mx-img{background:var(--sunk);border-radius:12px;aspect-ratio:1;display:grid;place-items:center;padding:12px}
.mxB .mx-img img{width:100%;height:100%;object-fit:contain}
.mxB .mx-body{display:grid;gap:12px;min-width:0}
.mxB .mx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.mxB .mx-top > div:first-child{min-width:0}
.mxB .mx-k{color:var(--brand-text)}
.mxB h3{margin-top:2px;font-size:18px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-price{display:grid;justify-items:end;flex:none}
.mx-price b{font:700 40px/1 "Outfit","Plus Jakarta Sans",sans-serif;color:var(--brand);letter-spacing:-.02em}
.mx-price s{font-size:13.5px;color:var(--muted)}
.mx-price s:empty{visibility:hidden}
.mx-cap{margin:0;font-size:14px;color:var(--body)}
.mx-cap b{color:var(--ink)}
.mx-meter{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding-top:16px}
.mx-track{position:absolute;left:0;right:0;top:6px;height:6px;border-radius:99px;background:var(--sunk)}
.mx-fill{position:absolute;left:0;top:6px;height:6px;border-radius:99px;background:var(--brand);width:16.66%;transition:width .7s cubic-bezier(.3,.8,.3,1)}
.mx-knob{position:absolute;top:0;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--brand);transform:translateX(-50%);left:16.66%;transition:left .7s cubic-bezier(.3,.8,.3,1)}
.mx-step{display:grid;gap:1px;text-align:center;padding-top:8px;font-size:12.5px;color:var(--muted)}
.mx-step b{font-size:13.5px;color:var(--ink);font-weight:600}
.mx-step.on b{color:var(--brand)}
/* C: cart receipt */
.mxC{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:32px;align-items:center;background:var(--brand-soft);border-radius:14px;padding:28px 32px}
.mxC .mx-copy{display:grid;gap:10px}
.mxC .mx-k{color:var(--brand-text)}
.mxC h3{font-size:30px;line-height:1.08;color:var(--ink);letter-spacing:-.02em}
.mxC .mx-copy p{margin:0;max-width:44ch}
.mx-receipt{background:#fff;padding:18px 20px 28px;box-shadow:0 12px 30px rgba(11,59,113,.14);--z:10px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) var(--z) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--z)) no-repeat}
.mx-rh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px dashed var(--line);padding-bottom:9px;margin-bottom:4px}
.mx-rh b{font:700 17px "Outfit","Plus Jakarta Sans",sans-serif;color:var(--brand)}
.mx-rh span{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.mx-lines{display:grid;min-height:108px;align-content:start}
.mx-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border:0;border-bottom:1px solid var(--sunk);background:none;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer}
.mx-line .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mx-line:hover .t{text-decoration:underline}}
.mx-line .p{display:flex;gap:8px;align-items:baseline}
.mx-line s{color:var(--muted);font-size:12px}
.mx-line b{font-weight:700}
.mx-sum{display:grid;gap:4px;border-top:1.5px dashed var(--line);margin-top:8px;padding-top:9px;font-size:13.5px}
.mx-sum div{display:flex;justify-content:space-between}
.mx-sum .sv{color:var(--ok);font-weight:700}
.mx-sum .tt{font:700 17px "Outfit","Plus Jakarta Sans",sans-serif;color:var(--ink)}
/* D: the product page's mix-and-match line */
.sign-note.mxD{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;background:none;border-radius:0;padding:0;color:var(--body);font-size:13px;line-height:1.45}
.mxD .mx-dt b{color:var(--brand)}
.mx-dex{display:inline-flex;align-items:baseline;gap:7px;background:none;border:0;border-radius:0;padding:0;white-space:nowrap}
.mx-dex b{color:var(--ink);font-weight:700;font-size:14px}
.mx-dex s{color:var(--muted);font-size:12px}
.mx-dcap{color:var(--muted);font-size:12px}
@media (max-width:860px){
  .mxA{grid-template-columns:1fr;padding:22px 18px;gap:18px}
  .mxA h3{font-size:27px}
  .mxB{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:16px}
  .mxB .mx-top{flex-direction:column;align-items:flex-start;gap:6px}
  .mx-price{justify-items:start}
  .mx-price b{font-size:32px}
  .mxB h3{font-size:16px}
  .mxC{grid-template-columns:1fr;padding:22px 18px;gap:18px}
  .mxC h3{font-size:25px}
}
@media (max-width:480px){
  .mx-row{gap:8px}
  .mx-slot{font-size:11px}
  .mx-tag{font-size:12.5px;padding:3px 7px}
  .mx-tag s{font-size:10.5px}
  .mxB{grid-template-columns:1fr}
  .mxB .mx-img{max-width:140px}
  .mx-step{font-size:11px}
  .mx-step b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .mx-drop,.mx-flash{animation:none}
  .mx-fill,.mx-knob{transition:none}
}
.grid > .pbanner{min-height:220px}
.abnr{display:grid;grid-template-columns:minmax(240px,.9fr) 2fr;align-items:center;gap:28px;border-radius:10px;padding:22px 30px;background:var(--ab)}
.abnr.t-sky{--ab:linear-gradient(100deg,#D9E8F8,#EDF4FC)} .abnr.t-sand{--ab:linear-gradient(100deg,#F8E8CF,#FCF4E6)}
.abnr.t-mint{--ab:linear-gradient(100deg,#D6EEDF,#EBF6EF)} .abnr.t-lilac{--ab:linear-gradient(100deg,#E4DDF4,#F1EDF9)}
.abt{cursor:pointer;min-width:0}
.abt .kicker{margin-bottom:8px}
.abt h3{font-size:clamp(21px,2vw,27px);font-weight:700;color:var(--ink)}
.abt p:not(.kicker){margin:8px 0 16px;font-size:14px;color:var(--body);font-weight:500}
.abt .btn{background:var(--brand);color:#fff;padding:10px 18px;font-size:14px}
@media (hover:hover) and (pointer:fine){.abt:hover .btn{background:var(--brand-deep)}}
.abim{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.abp{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;font:inherit;color:inherit;text-align:left}
.abp .aim{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:10px;padding:10%;overflow:hidden}
.abp img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.abp:hover img{transform:scale(1.04)}}
.abp .pr{font-size:17px;font-weight:650}
.abp .pr sup{font-size:10px}
.hrow.types{grid-auto-columns:170px}
.ty{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;min-width:0}
.ty .tl{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ty .im{aspect-ratio:1;background:var(--tile-photo);border-radius:8px;display:grid;place-items:center;padding:12px;overflow:hidden}
.ty img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){.ty:hover .tl{text-decoration:underline}}
/* an aisle's kinds as cards (Shop holiday decor by category): the name over four of its items, one big photo when it has fewer; the padding (taken back by the margin) is room for the picked card's frame, which the scrolling row would clip */
.hrow.kinds{grid-auto-columns:184px;padding:6px;margin:-6px}
.kd{display:flex;flex-direction:column;gap:8px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit;min-width:0}
.kd .tl{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd .q4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:1;border-radius:8px}
.kd .q4.one{grid-template-columns:1fr;grid-template-rows:1fr}
.kd .q4 > span{background:var(--tile-photo);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;min-width:0;min-height:0}
.kd .q4.one > span{padding:16px}
.kd img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;min-width:0;min-height:0}
@media (hover:hover) and (pointer:fine){.kd:hover .tl{text-decoration:underline}}
.kd[aria-pressed="true"] .q4{outline:2px solid var(--ink);outline-offset:3px}
.kd[aria-pressed="true"] .tl{text-decoration:underline;text-underline-offset:3px}
.rh{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.rh h2{font-size:21px;font-weight:600}
.rh a,.rh .rh-all{margin-top:0}
.hrow{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.hrow::-webkit-scrollbar{display:none}
.pt{display:flex;flex-direction:column;gap:6px;min-width:0;cursor:pointer}
.pt .im{aspect-ratio:1;padding:14px;position:relative}
.pt .deal{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:22px}
/* tiles on the home page and in carousels use the same type as the category cards (Lior, 2026-09-15) */
.dbadge{background:var(--deal);color:#fff;font-size:12px;font-weight:600;padding:4px 6px;border-radius:4px;line-height:1.2}
.wasl{color:var(--muted);font-size:12.5px;font-weight:600;margin-left:8px;white-space:nowrap}
.wasl s{text-decoration-thickness:1.5px}
.sign-was{color:var(--muted);font-size:13.5px;font-weight:600;margin-left:9px}
.sign-was s{text-decoration-thickness:1.5px}
.dtext{color:var(--deal);font-size:12px;font-weight:700}
.dtimer{color:var(--deal);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* out of stock in the cart: a plain notice over the lines, and the line itself greyed */
.cart-out{display:flex;gap:8px;align-items:flex-start;padding:4px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line);color:#8A5300;font-size:13.5px;font-weight:600;line-height:1.45}
.cart-out svg{flex:none;margin-top:2px}
.line.out .lt img{filter:grayscale(1);opacity:.5}
.line.out h3 a,.line.out .lpick{color:var(--muted)}
.lout{color:var(--muted);font-weight:700;font-size:13px}
.line.out .lq{color:var(--muted);font-size:13px}
#pdWas .dtimer{margin-left:8px}
.vtext{background:var(--cta);color:#fff;font-size:12px;font-weight:600;padding:4px 6px;border-radius:4px;line-height:1.2}
.pr{font-size:18px;font-weight:650;color:#0F1111;line-height:1;letter-spacing:0}
.pr sup{font-size:10px;position:relative;top:-.75em;margin:0;vertical-align:baseline}
.pt .tt{font-size:14px;font-weight:620;line-height:20px;color:#0F1111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt .out{font-size:12px;color:var(--muted);font-weight:600}
/* the stars on every row card, as the app's cards have them (Lior, 2026-10-08: "even in the website we need to add the rates
   to the cards"); a row with no deal in it drops the empty deal line above the prices */
.pt .rate{gap:4px;font-size:12.5px;margin-top:-2px}
.hrow:not(:has(.pt .deal:not(:empty))) .pt .deal{display:none}
/* deal bands: white tiles on a soft tint, security cameras in the middle of the home page and computer price drops as its
   third block (Lior, 2026-09-18) */
.dealband{margin:20px 0;border-radius:10px;padding:22px 24px 24px;background:var(--dbg)}
.dealband.t-blue{--dbg:linear-gradient(180deg,#E3EDF9,#F0F5FC)}
.dealband.t-mint{--dbg:linear-gradient(180deg,#DDF1E8,#EEF8F3)}
.dealband.t-gold{--dbg:linear-gradient(180deg,#FFF1CC,#FFF8E6)}
.dbadge.amz{background:var(--brand-deep)}
.dtext.amz{color:var(--brand-deep)}
.dealband .cdh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.dealband .kicker{margin:0 0 6px}
.dealband h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.dealband .sub{margin:5px 0 0;color:var(--body);font-size:14.5px}
.dealband .cdh .btn{background:#fff}
.dealband .cdgrid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:14px}
.dealband .pt{background:#fff;border-radius:12px;padding:8px 12px 14px;box-shadow:0 1px 2px rgba(18,25,43,.06)}

#homeDeals:empty{display:none}
@media (max-width:1100px){.dealband .cdgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.dealband .pt.c4x{display:none}}
@media (max-width:760px){
  .dealband{margin:8px -16px;border-radius:0;padding:20px 16px 18px}
  .dealband h2{font-size:20px}
  .dealband .sub{font-size:13.5px}
  .dealband .cdgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dealband .pt.c4x{display:flex}
  .dealband .pt.c2x{display:none}
  .dealband .pt{padding:6px 10px 12px}
}
/* the purchase limit, one card under the title (Lior, 2026-09-18: "we do need to add the limit badge/card to the listings") */
/* under the buy box, in the right column (Lior, 2026-09-19) */
.pdlimitcard{display:flex;align-items:baseline;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pdlimitcard[hidden]{display:none}
.pdlimitcard .n{font-size:18px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.pdlimitcard .l{font-size:13px;color:var(--muted);line-height:1.3}
@media (hover:hover) and (pointer:fine){.pt:hover .tt{color:var(--brand-text)}}
.rside{position:absolute;top:50%;transform:translateY(-10%);width:44px;height:96px;border:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(0,0,0,.12);display:grid;place-items:center;color:var(--ink);padding:0;z-index:2;border-radius:6px}
.rside.l{left:0;border-radius:0 6px 6px 0}.rside.r{right:0;border-radius:6px 0 0 6px}
.rside.l svg{transform:rotate(180deg)}
.rcard:not(:hover) .rside{opacity:0}
body.home body.home .promo{border:0}
body.home footer.site{margin-top:30px}
/* product page in the store's own look (Lior, 2026-09-15): white cards on the gray page, a gallery card and an info
   card with the price, pack cards, quantity and a navy Add to cart; overview and specifications in their own card below */
body.pdp-view{background:#fff}   /* white page (Lior, 2026-09-15) */
.pdp{padding:14px 0 40px}
.pdcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12.5px;color:#565959;margin:0 0 12px}
.pdcrumb a{color:var(--body);cursor:pointer;text-decoration:none;font-weight:500}
@media (hover:hover) and (pointer:fine){.pdcrumb a:hover{color:var(--brand-text)}}
.pdcrumb .sep{margin:0 7px;color:#9AA1AD}
/* product page: the layout of the "price sign" direction, in the store's own type and colours (Lior, 2026-09-18:
   he liked the layout, not the bold face). Photo and words on the left; one quiet card on the right with the price per
   unit as its headline, the sizes and quantity breaks as rows, then Add to cart, Apple Pay and one delivery line */
.pdmain{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.pd-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.pdp .pd-media{background:none;border:0;border-radius:0;padding:0;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;height:auto;min-height:0;position:static}
.pdp .zoom{grid-column:1;grid-row:1;aspect-ratio:auto;height:500px;flex:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0}
.pdp .gslide{padding:22px}
.pdp .gtrack{position:absolute;inset:0;width:auto;height:auto}   /* pinned to the box, so the slides take its height and the photo fits inside it */
.pdp .zoom img{max-height:456px}   /* the box is 500px with a 22px gutter: a percentage never resolves inside the centred grid */
.pdp .thumbs{grid-column:2;grid-row:1;flex-direction:column;padding:0;border:0;background:none;gap:9px;justify-content:flex-start;flex-wrap:nowrap;overflow:visible}
.pdp .thumbs button{width:64px;height:64px;flex:none;border-radius:11px;border:1.5px solid var(--line);background:var(--tile-photo);padding:6px}
.pdp .thumbs button[aria-selected="true"]{border-color:var(--brand);background:#fff}
.pdp .thumbs[hidden]{display:none}
.pdp .pd-media:has(.thumbs[hidden]){grid-template-columns:minmax(0,1fr)}
.pdp .gdots{grid-column:1;grid-row:2;margin:4px 0 0}
/* Pack cards under the photo (Lior, 2026-10-25, picked B of docs/pack-cards): Single, 2-Pack, 3-Pack side by side, all in view */
.pdp .pdpacks{grid-column:1;margin:10px 0 2px}
.pdp .pdpacks[hidden]{display:none}
.pk-lab{font-size:15px;margin:0 0 10px;color:var(--ink)}.pk-lab b{font-weight:700}
.pk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px}
/* more than three cards (Single to 5-Pack, the hardware accessories since 2026-10-30): one row that slides sideways */
.pk-row.many{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);max-width:569px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:9px 9px 0 0;margin-top:-9px}   /* room for the picked card's tick, which a sliding row would cut (Lior, 2026-10-30: "The v is half hidden") */
.pk-row.many::-webkit-scrollbar{display:none}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid #C3C9D2;border-radius:10px;padding:8px 6px 9px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-align:center;min-width:0}
@media (hover:hover){@media (hover:hover) and (pointer:fine){.pk:hover{border-color:var(--brand)}}}   /* a phone keeps :hover on the last card tapped */
.pk.on{border:2px solid var(--brand);padding:7px 5px 8px;background:var(--brand-soft)}
.pk-ck{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;line-height:1}
.pk-im{height:78px;width:100%;display:grid;place-items:center}
/* the pack badge on a 2-Pack or 3-Pack picture, website only (Lior, 2026-10-30, picked B of four: "It will show in our website
   only"): drawn over the picture, so the picture file Google and Microsoft read stays plain */
.pkb{position:absolute;z-index:2;width:56px;height:56px;border-radius:50%;background:#FFC94D;color:#0E1320;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Outfit","Plus Jakarta Sans",sans-serif;line-height:1;pointer-events:none}
.pkb b{font-size:21px;font-weight:800;letter-spacing:-.01em}.pkb i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.09em;margin-top:2px}
.thumb .pkb{right:10px;bottom:10px}
.gslide{position:relative}.gslide .pkb{width:70px;height:70px;left:18px;bottom:18px}.gslide .pkb b{font-size:26px}.gslide .pkb i{font-size:10.5px}
.pk-im{position:relative}.pk-im .pkb{top:2px;left:2px;width:30px;height:30px}.pk-im .pkb b{font-size:12px}.pk-im .pkb i{display:none}
@media (max-width:700px){.thumb .pkb{width:44px;height:44px;right:8px;bottom:8px}.thumb .pkb b{font-size:17px}.thumb .pkb i{font-size:7.5px}.gslide .pkb{width:60px;height:60px;left:12px;bottom:12px}.gslide .pkb b{font-size:22px}.gslide .pkb i{font-size:9px}}.pk-im img{max-height:78px;max-width:100%;mix-blend-mode:multiply}
.pk-n{font-weight:700;font-size:14px;margin-top:4px}
.pk-p{font-size:17px;font-weight:600;line-height:1.25}.pk-p sup{font-size:.55em;vertical-align:.7em}
.pk s{font-size:12px;color:var(--muted)}.pk-u{font-size:12px;color:var(--muted)}
.pk-free{font-size:12px;font-weight:600;color:#0B7A3B}
/* Option cards (Lior, 2026-10-31: "instead of the drop down on variety items or color items, it's supposed to show just like
   the multi-pack that we did, the small windows under it with the right color"): the pack card look, under the photo, one
   row per option type; a row whose options don't all have their own picture (sizes, mostly) shows the names only */
.pdp .pd-media .pdopts{grid-column:1;margin:14px 0 2px}
.pdp .pd-media .pdopts[hidden]{display:none}
.pdp .pd-media .optlab,.pdp .pd-media .optsel{display:none}
.pdp .pd-media #pdSizes{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0}
.pdp .pd-media #pdSizes .axg{padding:0;border:0;margin:0}
.pdp .pd-media .pdopts.err .srows{outline:0}
.pdp .pd-media .pdopts.err .pk-lab{color:var(--danger)}
.pk-lab .ov-ch{color:var(--muted)}
.pk.ov .ov-nm{font-weight:600;font-size:13.5px;line-height:1.25;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pk.ov.txt{justify-content:center;min-height:52px;padding:9px 8px}
.pk.ov.txt.on{padding:8px 7px}
.pk.ov.txt .ov-nm{margin-top:0}
.pk.ov.out{border-style:dashed;color:var(--muted)}.pk.ov.out .pk-im img{opacity:.55}
.pk.ov:disabled{cursor:default}
.pk-save{font-size:12.5px;font-weight:700;color:#0B7A3B}
.prow .pksave{font-size:12.5px;font-weight:700;color:#0B7A3B;margin-left:6px}
.pdp .pdsharebtn{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){.pdp .pdsharebtn:hover{color:var(--brand-text)}}
.pdp .pdlensbtn{position:absolute;top:14px;right:60px;z-index:3;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
.pdp .pdlensbtn[hidden]{display:none}@media (hover:hover) and (pointer:fine){.pdp .pdlensbtn:hover{color:var(--brand-text)}}.pdp .zoom.on .pdlensbtn{display:none}
/* "Shop similar" (Lior, 2026-10-10): a sheet of similar items from the lens on the product photo, with chips to narrow it */
.simgrab{display:none}
.simsheet .bwrap{min-height:220px}
.simnone{margin:28px 0;text-align:center;color:var(--muted);font-size:14.5px}
/* the chips sit under the title, not at the foot: Safari's own toolbar covers the foot of a sheet on iPhone */
.simchips{display:flex;gap:8px;overflow-x:auto;padding:12px 20px;border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:none}
.simchips[hidden]{display:none}
.simsheet .dhead{border-bottom:0;padding-bottom:4px}
.simchips::-webkit-scrollbar{display:none}
.simchips button{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#F1F3F5;color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:500;white-space:nowrap;cursor:pointer}
.simchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:760px){
  .dialog.sheet.simsheet{width:100%;max-height:86vh;border-radius:22px 22px 0 0}
  .simgrab{display:block;width:40px;height:5px;border-radius:3px;background:#C9CED6;margin:8px auto 0;flex:none}
  .simsheet .dhead{padding-top:10px}
  .simsheet .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simsheet .bwrap{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
.pdp .zoom.on .pdsharebtn{display:none}
.pd-info{background:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;gap:20px;min-width:0}
.pd-head{display:flex;flex-direction:column;gap:8px}
.pd-info .eyebrow{align-self:flex-start;font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:#2162A1;background:none;padding:0}
.pd-info .eyebrow a{color:inherit;text-decoration:none;cursor:pointer}
@media (hover:hover) and (pointer:fine){.pd-info .eyebrow a:hover{text-decoration:underline}}
.pd-info .eyebrow:empty{display:none}
.pd-info h1{font-size:26px;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0;text-wrap:balance}
.pdp .pdrate{margin:0;font-size:13px}
/* four facts as tiles: what is in the box, the rating, shipping included, the order limit */
/* the card */
.pd-side{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-height:1000px){.pd-side{position:sticky;top:calc(var(--topH,0px) + var(--hdrH,66px) + var(--navH,0px) + 16px)}}
/* Computer product page C (Lior, 2026-11-03: "The image taking too much space", picked C of docs/pdp-desktop-*): the name and
   rating across the top, then the photo (thumbnails down its left side) beside the overview and specs, the buy box on the
   right as before. Wide screens only: under 1281 px the middle column is too narrow for two, so the stacked layout stays. */
@media (min-width:1281px){
  .pd-col{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-rows:repeat(8,auto) 1fr;column-gap:36px;row-gap:0;align-items:start}
  .pd-info,.pd-head{display:contents}
  /* the name block across the top; "In N people's carts", the views and the last-bought lines beside the photo, over the
     overview, not between the name and the photo (Lior, 2026-11-03: "The in cart not need to be there") */
  .pdp .pd-col .pdpick,.pdp .pd-col #pdEyebrow,.pdp .pd-col #pdTitle,.pdp .pd-col #pdRate{grid-column:1/-1;justify-self:start}
  .pdp .pd-col .pdpick{grid-row:1}
  .pdp .pd-col #pdEyebrow{grid-row:2;margin-bottom:8px}
  .pdp .pd-col #pdTitle{grid-row:3;margin-bottom:8px}
  .pdp .pd-col #pdRate{grid-row:4;margin-bottom:18px}
  .pdp .pd-col .pdlast{grid-column:2;justify-self:start;margin:0 0 10px}
  .pdp .pd-col #pdSales{grid-row:5}.pdp .pd-col #pdCarts{grid-row:6}.pdp .pd-col #pdViews{grid-row:7}.pdp .pd-col #pdLast{grid-row:8}
  .pdp .pd-media{grid-column:1;grid-row:5/span 6;grid-template-columns:64px minmax(0,1fr)}
  .pdp .thumbs{grid-column:1;grid-row:1}
  .pdp .zoom{grid-column:2;grid-row:1;height:440px}
  .pdp .zoom img{max-height:396px}
  .pdp .gdots,.pdp .pdpacks,.pdp .pd-media .pdopts{grid-column:2}
  .pdp .pd-media:has(.thumbs[hidden]){grid-template-columns:minmax(0,1fr)}
  .pdp .pd-media:has(.thumbs[hidden]) > *{grid-column:1}
  #pdMelt{grid-column:2;grid-row:8}
  .pddetails{grid-column:2;grid-row:9}
}
/* the bar's height, set once per resize; while it is tucked away the sticky panels sit right under the header */
.filters,.acct-top,.pd-side{--navH:var(--navFull,0px)}
html.navtuck .filters,html.navtuck .acct-top,html.navtuck .pd-side{--navH:0px}
.sign{border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.sign > div{padding:14px 18px;border-top:1px solid var(--line)}
.sign > div:first-child{border-top:0}
.sign > div[hidden]{display:none}
.sign-head{display:flex;flex-direction:column;gap:2px;padding:18px 18px 16px!important}
.sign-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sign-big{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin:6px 0 6px}
.sign-big.money{font-size:40px;letter-spacing:-.03em;margin:2px 0 4px}
.sign-unit{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sign-unit[hidden],.sign-lab[hidden]{display:none}
.sign-big small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.sign-line{font-size:14px;font-weight:600;color:var(--ink)}
.sign-note{font-size:12.5px;color:var(--muted);margin-top:2px}
.sign-note.sign-fee{color:var(--body)}
/* "Deliver to Lior - Alpharetta 30005" under the price, like Amazon (Lior, 2026-09-27, in place of "No membership") */
.pddeliver{display:flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin-top:6px;font:inherit;font-size:14px;color:var(--brand-text);cursor:pointer;text-align:left}
.pddeliver svg{flex:none;color:var(--ink)}
.sign-head .ghost{visibility:hidden}
.sign-head .save{background:none;color:var(--ok);font-size:15px;font-weight:700;padding:0;border-radius:0;white-space:nowrap}
/* the price with "You're saving 14%" beside it, like the app: one line, so ticking a pack changes no height */
.sign-head .pricerow{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
/* the pack section's title reads like the app's "Buy more, pay less" */
#pdTierLab{font-size:17px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:2px}
.sign .pdopts{margin:0}
.sign .optlab{margin-bottom:2px}
.sign .optsel{margin:0 0 2px}
/* the product page's option menu, flat like the app: a small grey label, the value, a chevron and a hairline under it */
.sign .optlab.sign-lab{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.sign .optsel select{height:44px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0 30px 0 0;font-size:17px;font-weight:500}
@media (hover:hover) and (pointer:fine){.sign .optsel select:hover{border-color:var(--body)}}
.sign .optsel select:focus{box-shadow:none;border-color:var(--blue)}
.sign .optsel::after{right:4px}
.sign .pdopts.err .optsel select{border-color:var(--danger)}
.sign .optsel[hidden]{display:none}
.srows{display:flex;flex-direction:column;margin:0 -18px -14px}
.srows:empty{display:none}
/* two option types: a chip row per type (Color, then Size) */
.axg{padding:12px 18px 10px}
.axg + .axg{border-top:1px solid var(--line-soft)}
.axl{font-size:13px;color:var(--muted);margin:0 0 8px}
.axl b{color:var(--ink);font-weight:700}
.axc{display:flex;flex-wrap:wrap;gap:8px}
.axchip{min-width:46px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1.2}
@media (hover:hover) and (pointer:fine){.axchip:hover{border-color:var(--ink)}}
.axchip[aria-checked="true"]{border:2px solid var(--blue);padding:8px 13px;background:var(--brand-soft)}
.axchip.no{color:var(--muted);border-style:dashed;text-decoration:line-through}
.axchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.axchip small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--muted)}
.axchip.no small{text-decoration:none}
.srow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line-soft);font-size:14px;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;color:var(--ink);width:100%}
.srow:first-child{border-top:0}
/* flat like the app: the dot says which is chosen, no fill on the row (Lior, 2026-09-26: "no highlights or backgrounds") */
@media (hover:hover) and (pointer:fine){.srow:hover{background:none}}
.srow[aria-checked="true"]{background:none}
.srow .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center}
.srow[aria-checked="true"] .dot{border-color:var(--blue)}
.srow[aria-checked="true"] .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue)}
.srow .lab{display:flex;flex-direction:column;gap:1px;min-width:0}
.srow .lab b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .lab span{font-size:12.5px;color:var(--muted)}
.srow .lab span.ok{color:var(--ok);font-weight:700}
.srow .val{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1;text-align:right;color:var(--ink)}
.srow .val small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:3px}
.srow.out{color:var(--muted);cursor:default}
.srow.out .lab b{text-decoration:line-through}
.pdp .opterr{margin:12px 0 0;font-size:13px;color:var(--danger);font-weight:600}
.pdopts.err .srows{outline:2px solid var(--danger);outline-offset:-2px}
.pdtiers[hidden]{display:none}
/* Subscribe & Save: two flat dot rows like the pack rows, then how often (Lior, 2026-09-27) */
.pdsub[hidden],.subfreq[hidden]{display:none}
.pdsub .srow .lab b em{font-style:normal;color:var(--ok)}
.subfreq{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px 12px;padding:4px 18px 12px 50px}
.subfreq .optsel{max-width:170px}
.subfreq label{font-size:14px;font-weight:600;color:var(--ink)}
.subfreq p{grid-column:1 / -1;margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* the cart line's plan: one line of text with the repeat mark, the phone's own picker under it (Lior, 2026-09-27: the boxed
   dropdown "isn't good"); the select is invisible and 16px so iPhone Safari doesn't zoom in when it opens */
.lsub{position:relative;display:inline-flex;align-items:center;gap:5px;max-width:100%;margin:3px 0 1px;font-size:12.5px;font-weight:600;color:var(--brand-text);cursor:pointer}
.lsub.on{color:var(--ok)}
.lsub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsub svg{flex:none;width:13px;height:13px}
.lsub select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
.lsub:focus-within{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.sum .ok{color:var(--ok)}
.co-subnote{margin:10px 0 2px;font-size:12.5px;line-height:1.5;color:var(--body)}
.co-subnote b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
/* account > Subscriptions: flat rows with a hairline between them */
.subs{display:grid}
.subrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--line-soft)}
.subrow:first-child{border-top:0;padding-top:4px}
.subrow .th{width:72px;height:72px;background:var(--tile-photo);border-radius:8px;display:grid;place-items:center;padding:6px}
.subrow .th img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.subrow h3{font-size:15px;font-weight:600;margin:0 0 3px;line-height:1.35}
.subrow h3 a{color:var(--ink);text-decoration:none;cursor:pointer}
@media (hover:hover) and (pointer:fine){.subrow h3 a:hover{text-decoration:underline}}
.subrow .meta{font-size:13.5px;color:var(--body)}
.subrow .next{font-size:13.5px;font-weight:600;color:var(--ok);margin-top:3px}
.subrow .next.bad{color:var(--danger)}
.subrow .note{font-size:12.5px;color:var(--muted);margin-top:3px}
.subacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.subacts select{font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-text);background:none;border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.subacts .linkbtn.danger{color:var(--danger)}
.subs-foot{margin:14px 0 0;font-size:13px;color:var(--muted)}
.subrow.busy{opacity:.5;pointer-events:none}
.pd-buy{background:none;border:0;border-radius:0;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}
.pd-buy .stock{margin:0;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ok)}
.pd-buy .stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pd-buy .stock.low{color:var(--gold)}
.pd-buy .stock.out{color:var(--danger)}
.pd-buy .buyrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0}
.pd-buy .buyrow .stepper{height:46px;border-radius:10px;border:1.5px solid var(--line);width:auto}
.pd-buy .buyrow .stepper button{height:100%;width:40px;background:#fff;font-size:18px}
.pd-buy .buyrow .stepper output{min-width:28px;font-size:15px}
.pd-buy .btn.addbtn,.pd-buy .btn.buybtn{height:46px;border-radius:10px;font-size:14.5px;font-weight:700;width:100%;padding:0 12px}
/* Add to cart in our yellow, like the cards' Add buttons (Lior, 2026-10-27: "Change the add to cart button to yellow (our
   brand)"; it was the navbar's dark since 2026-10-18). Buy now and the cart's Checkout stay yellow too ("the buy now and
   the checkout buttons need to be our yellow not black"), Buy now a deeper amber so the two read as two buttons */
.pd-buy .addbtn{background:var(--accent);color:#0F1111;border-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.pd-buy .addbtn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.pd-buy .buybtn{background:var(--buy);color:#0F1111;border-color:var(--buy)}@media (hover:hover) and (pointer:fine){.pd-buy .buybtn:hover{background:var(--buy-hover);border-color:var(--buy-hover)}}
/* the brand sheet's "Shop all BIC" in the same dark as Buy now (Lior, 2026-10-11: "The blue button needs to be dark", "Like the buy now button color") */
#brandAll{background:var(--hdr);color:#fff;border-color:var(--hdr)}@media (hover:hover) and (pointer:fine){#brandAll:hover{background:var(--hdr-hover);border-color:var(--hdr-hover)}}
.pd-buy .addbtn:disabled,.pd-buy .buybtn:disabled{opacity:.45}
.pd-buy .pdexpress{margin:0;min-height:0}
html.wallet .pd-buy .pdexpress{min-height:46px}
html.wallet .cartexpress{min-height:52px}
/* the wallet button is drawn by Stripe at the height we ask for; the Checkout button above it is pinned to the same 52px */
#checkoutBtn{height:52px;background:var(--accent);color:#0F1111;border-color:var(--accent)}@media (hover:hover) and (pointer:fine){#checkoutBtn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.cartexpress{border-radius:26px;overflow:hidden}
/* the same wallet button in the checkout, at the top of the form, "or enter your details" under it */
.coexpress[hidden]{display:none}
#coForm .coexpress{margin:4px 0 6px}
.co-or{display:none;align-items:center;gap:10px;margin:14px 0 4px;color:var(--muted);font-size:13px}
.coexpress.drawn .co-or{display:flex}   /* only under a button Stripe really drew (a browser can say "ready" and draw none) */
.co-or:before,.co-or:after{content:"";flex:1;height:1px;background:var(--line)}
/* A wallet button that isn't wanted right now stays laid out, unseen and out of the flow. Stripe draws Apple Pay only in a
   box the page lays out: one that had been display:none came back empty or never said it was ready (Lior, 2026-10-31:
   "Sometimes it shows the Apple Pay button and sometimes not") */
.woff{position:absolute!important;visibility:hidden!important;pointer-events:none!important}
.pd-buy .pdexpress.woff{left:0;right:0}
html.wallet .cartexpress[hidden]{display:block!important;visibility:hidden;min-height:52px}   /* the slot is there before Stripe mounts: no jump */
/* one line about delivery at the foot of the card */
.pd-deliver{display:flex;align-items:center;gap:10px;padding:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink)}
.pd-deliver .tick{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--ink)}
.pd-deliver .tick svg{width:17px;height:17px}
.pd-deliver .pdship{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.cshipbar{display:block;margin:0 0 12px;padding:0;text-align:left}
.cshipbar p{margin:0 0 7px;font-size:13.5px;color:var(--ink)}
.cshipbar .ctrack{display:block;width:100%;height:6px;border-radius:99px;background:var(--sunk);overflow:hidden}
.cshipbar .ctrack i{display:block;height:100%;width:4%;background:var(--ok);border-radius:99px;transition:width .35s ease}   /* green on the way to free delivery, not only once there (Lior, 2026-11-08: "Make the line green") */
.cshipbar.done .ctrack i{background:var(--ok)}
.pd-deliver b{font-weight:800;color:var(--ink)}
.pd-deliver .zipl{background:none;border:0;padding:0;color:var(--brand-text);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}
.pd-deliver .incl{display:none}
/* buy box, fuller (Lior, 2026-09-18: "add more information to this box, it feels empty"): the order limit under the
   quantity, Buy now (it was Save for later until 2026-10-10: the heart at the top left of the photo saves), then returns
   and payment in the delivery line's style */
.pd-buy .pdlimit{margin:-2px 0 0;font-size:12.5px;color:var(--muted)}
/* buy-together offer in the sign (Lior, 2026-09-18) */
.pdpair{display:grid;gap:14px}
.pdpair .pairrow{display:flex;gap:12px;align-items:center}
.pdpair .pchk{width:19px;height:19px;flex:none;margin:0;accent-color:var(--blue);cursor:pointer}
.pdpair #pdPairSum{padding-top:4px;border-top:1px solid var(--line-soft)}
.pdpair .pmini{font-size:12.5px;color:var(--body)}   /* what this partner costs with the item, and its saving (Lior, 2026-09-19) */
.pdpair .pmini .ok{color:var(--ok);font-weight:700}
/* Photo boxes centre their photo with flex, not grid: iPhone browsers (all WebKit) ignored a grid item's max-height:100%, so a
   tall package photo spilled out of its square and over the next row (Lior, 2026-09-19, the Tramontina bundle). */
.ac .opt .t,.thumbs button,.line .lt,.co-line .lt,.oitem .th,.ritem .th,.gw .im,.pdpair .im,.qt .im,.pt .im,.acard .big,.ty .im{display:flex;align-items:center;justify-content:center}
.ac .opt .t img,.thumbs img,.line .lt img,.co-line img,.oitem .th img,.ritem .th img,.gw .im img,.pdpair .im img,.qt img,.pt img,.acard .big img,.ty img{min-width:0;min-height:0}   /* the customer picks what to add (Lior, 2026-09-19) */
.pdpair .im{width:56px;height:56px;flex:none;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px;display:grid;place-items:center;cursor:pointer}
.pdpair .im img{max-width:100%;max-height:100%;object-fit:contain}
.pdpair .pt{min-width:0;display:grid;gap:3px}
.pdpair .t{background:none;border:0;padding:0;text-align:left;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.pdpair .t:hover{text-decoration:underline}}
.pdpair .pp{font-size:13px;color:var(--body)}
.pdpair .pp b{color:var(--ink);font-weight:800}
.pdpair .pp s{color:var(--muted);margin:0 2px}
.pdpair .pp .ok{color:var(--ok);font-weight:700}
.pairok{color:var(--ok);font-weight:600}
.pd-buy .pdlimit b{color:var(--ink);font-weight:700}
/* price history and the price drop alert (Lior, 2026-09-28): flat rows, like the perks under them */
.pdwatch{display:grid;gap:0;padding-top:2px}
.pdwatch[hidden]{display:none}
.pw-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:8px 0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pw-row .ico{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--ink)}
.pw-row .ico svg{width:18px;height:18px}
.pw-row .txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px;font-weight:600;line-height:1.35}
.pw-row .txt small{font-size:12.5px;font-weight:500;color:var(--muted)}
.pw-row .chev{width:16px;height:16px;flex:none;color:var(--muted)}
.pw-row .sw{width:40px;height:24px;border-radius:12px;background:#CDD2DA;position:relative;flex:none;transition:background .15s}
.pw-row .sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.pw-row[aria-pressed="true"] .sw{background:var(--brand)}
.pw-row[aria-pressed="true"] .sw::after{transform:translateX(16px)}
.pw-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.pw-row:disabled{opacity:.6;cursor:default}
@media (prefers-reduced-motion:reduce){.pw-row .sw,.pw-row .sw::after{transition:none}}
.dialog.zipdlg.phdlg{width:min(560px,100%)}
#notifyOverlay{z-index:51}   /* the email prompt opens over the price history dialog */
.ph-in{padding:30px 28px 22px;display:flex;flex-direction:column;gap:14px}
.ph-in h2{font-family:"Plus Jakarta Sans",sans-serif;font-size:22px;font-weight:700;line-height:1.2;color:var(--ink);margin:0}
.ph-name{margin:-6px 0 0;font-size:14px;color:var(--body);line-height:1.4}
.ph-range{display:grid;grid-template-columns:repeat(4,1fr);background:var(--line-soft);border-radius:10px;padding:3px;gap:3px}
.ph-range button{border:0;background:none;border-radius:8px;height:32px;font:inherit;font-size:13px;font-weight:700;color:var(--body);cursor:pointer}
.ph-range button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:44px}
.ph-stats span{font-size:12.5px;color:var(--muted);display:block}
.ph-stats b{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ph-stats b.lo{color:var(--ok)}
.ph-chart{min-height:120px;display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center}
.ph-chart svg{width:100%;height:auto;display:block;overflow:visible}
.ph-chart .gl{stroke:var(--line);stroke-width:1}
.ph-chart .ax{fill:var(--muted);font-size:12px;font-family:inherit;font-variant-numeric:tabular-nums}
#phTitle:focus{outline:none}
/* on a phone the price history is a sheet from the bottom (Lior, 2026-09-28: "it's not looking good on mobile") */
@media (max-width:760px){
  #phOverlay{padding:0;place-items:end stretch}
  .dialog.zipdlg.phdlg{width:100%;max-width:100%;align-self:end;border-radius:18px 18px 0 0;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
  .ph-in{padding:24px 20px 18px;gap:12px}
  .ph-in h2{font-size:21px}
  .ph-stats b{font-size:18px}
}
.ph-chart .ln{stroke:var(--brand);fill:none;stroke-width:2.5;stroke-linejoin:round}
/* the seller window (C): the score and stars, a bar for each part, the latest rating, then delivery, returns and contact */
.pw-row.pw-ret{cursor:default}@media (hover:hover) and (pointer:fine){.pw-row.pw-ret:hover{background:none}}
.pw-row .pw-val{flex:none;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sellerbtn{all:unset;cursor:pointer;color:var(--brand-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.sellerbtn:hover{color:var(--brand-hover)}}.sellerbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.dialog.zipdlg.phdlg.sldlg{width:min(480px,100%)}
.sl-in{gap:12px}
.sl-hd{display:flex;gap:12px;align-items:center;padding-right:34px}
.sl-logo{width:48px;height:48px;border-radius:12px;background:var(--brand-deep);color:#fff;display:grid;place-items:center;font:700 26px "Outfit",sans-serif;flex:none}
.sl-in h2{font-family:"Outfit",sans-serif;font-size:22px}
.sl-rate{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.sl-score{display:flex;align-items:baseline;gap:10px;min-height:52px}
.sl-score b{font:700 44px/1 "Outfit",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.sl-score .st,.sl-latest .st{color:#E8A317;letter-spacing:1px}
.sl-score .st{font-size:20px}.sl-score small{font-size:13.5px;color:var(--muted)}
.sl-bars{display:flex;flex-direction:column;gap:8px}
.sl-bar{display:grid;grid-template-columns:86px 1fr 28px;gap:10px;align-items:center;font-size:13.5px;color:var(--body)}
.sl-bar i{height:8px;border-radius:9px;background:var(--line-soft);overflow:hidden;display:block}
.sl-bar i em{display:block;height:100%;background:#E8A317;border-radius:9px}
.sl-bar span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.sl-latest{margin:0;background:var(--sunk);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--body)}
.sl-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sl-rows li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.sl-rows li:last-child{border-bottom:0}
.sl-rows .ico{flex:none;width:22px;color:var(--brand);padding-top:1px}.sl-rows .ico svg{width:20px;height:20px}
.sl-rows b{display:block;color:var(--ink);font-size:15px}
.sl-rows li > span:last-child > span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}
.sl-rows a{color:var(--brand-text)}
.sl-pill{display:inline-block;background:var(--ok-bg);color:var(--ok);font-weight:700;font-size:12.5px;padding:2px 9px;border-radius:999px;margin-right:6px}
.sl-co{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
#slTitle:focus{outline:none}
@media (max-width:760px){
  #slOverlay{padding:0;place-items:end stretch}
  .dialog.zipdlg.phdlg.sldlg{width:100%}
}
/* the Shopimo Guarantee sheet: the seller window's frame and rows, ink icons */
.gt-hd{display:flex;gap:12px;align-items:flex-start;padding-right:34px}
.gt-hd .ico{flex:none;color:var(--ink);padding-top:2px}.gt-hd .ico svg{width:30px;height:30px}
.gt-hd h2{font-family:"Outfit",sans-serif;font-size:22px}
.gt-hd p{margin:4px 0 0;font-size:14.5px;color:var(--body);line-height:1.45}
.gt-h{margin:6px 0 -4px;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.gt-rows .ico{color:var(--ink)}
.gt-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--body);line-height:1.5}
.gt-steps li::marker{font-weight:700;color:var(--ink)}
.gt-steps a,.gt-in .sl-co a{color:var(--brand-text)}
#gtTitle:focus{outline:none}
@media (max-width:760px){#gtOverlay{padding:0;place-items:end stretch}}
.ph-chart .dot{fill:var(--brand)}
/* Buy box A (Lior, 2026-10-18: "the price info section need to be with more information ... Check on amazon", then "A"):
   the seller facts as two columns inside the box, the one delivery date with its order-by countdown above Add to cart,
   In stock and the price per ounce under the price, Amazon's small dollar sign and cents. Phones keep their own order. */
.pd-perks{display:grid;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13.5px;line-height:1.4}
.pd-perks > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:baseline}
.pd-perks > div[hidden]{display:none}
.pd-perks > div.one{grid-template-columns:auto minmax(0,1fr)}   /* one line (Lior, 2026-10-18: "one line, sold and ship by") */
.pd-perks dt{color:var(--muted);font-weight:500}
.pd-perks dd{margin:0;color:var(--ink);font-weight:500;min-width:0}
.pd-perks dd small{display:block;margin-top:1px;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.45}
.pd-deliver{align-items:flex-start}
.pd-deliver .tick{margin-top:1px}
.pd-deliver .pdeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.pd-deliver .pdwhen{font-size:14.5px;font-weight:600}
.pd-deliver .pdday{white-space:nowrap}
.pd-deliver .pdleft{font-size:13px;color:var(--muted)}
.pd-deliver .pdleft b{color:var(--ink);font-weight:700}
/* the pin sits in the icon column under the box and "Deliver to" lines up with "Arrives" (Lior, 2026-10-19: "Need to align
   the deliver to"): back by the tick's 20px plus the 10px gap, the 15px pin centred in a 20px slot */
.pd-deliver .pdto{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:none;border:0;padding:0;margin:3px 0 0 -30px;font:inherit;font-size:13px;color:var(--brand-text);cursor:pointer;text-align:left}
.pd-deliver .pdto svg{flex:none;margin:0 2.5px;color:var(--ink)}   /* product page icons dark, not coloured (Lior, 2026-10-24: "Make the icons dark") */
@media (hover:hover) and (pointer:fine){.pd-deliver .pdto:hover span{text-decoration:underline}}
@media (max-width:760px){.pd-deliver .pdto{display:none}}   /* phones have "Deliver to" under the price */
/* Buy box D (Lior, 2026-11-04: "I love our buttons order, Need to be combined with B", then "Go with D, build it"): on
   computers the delivery date opens the box in big type (#pdEtaHead), the price sits under it with In stock on its right,
   and the buttons keep their order. Phones keep their own layout. */
.pdetahead{display:none}
@media (min-width:761px){
  .sign > .pdetahead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px 18px;border-top:0}
  .sign > .pdetahead[hidden]{display:none}
  .pdetahead .fdtag{margin:0 0 4px;font-size:13px;line-height:1.6;padding-right:8px}
  .pdetahead .eh-tags{display:flex;flex-wrap:wrap;gap:0 6px}.pdetahead .eh-tags:empty{display:none}
  /* "Arrives by" and the date on one row (Lior, 2026-11-07: "The arrive by should be on the same row with the date"):
     never wrapping, and ehFit() takes the size down a little when a long weekday wouldn't fit the box */
  .pdetahead .eh-day{font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;max-width:100%}
  .pdetahead .eh-day b{font-weight:800}
  .pdetahead .eh-left{font-size:14px;color:var(--body)}
  .pdetahead .eh-left b{color:var(--ink);font-weight:700}
  .pdetahead .pdto{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--brand-text);cursor:pointer;text-align:left}
  .pdetahead .pdto svg{flex:none;color:var(--ink)}
  @media (hover:hover) and (pointer:fine){.pdetahead .pdto:hover span{text-decoration:underline}}
  .pdetahead .pdship{font-size:13px;color:var(--muted)}
  .sign-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .sign-head > *{grid-column:1/-1}
  .sign-head > .pricerow{grid-column:1;grid-row:1}
  .sign-head > .sign-stock{display:block;grid-column:2;grid-row:1;align-self:center;margin:0;font-size:15px;font-weight:700;color:var(--ok)}
  .sign-head > .sign-stock.low{color:var(--gold)}
  .sign-head > .sign-stock[hidden]{display:none}
  .sign-head > .sign-stock.out{color:var(--danger)}
  .sign-head > #pdWas{margin-left:0}
  .sign-head > #pdWas .was-sv{display:inline;margin-left:6px;color:var(--deal);font-weight:700}
  .sign-head > #pdDeliver{display:none}
  .pd-buy > #pdEta{display:none}
  .pd-buy > #pdFacts{order:1}
  .pd-buy > .pdwatch{order:2}
  .sign-big.money{display:inline-flex;align-items:flex-start}
  #pdPrice .cur,#pdPrice sup{font-size:.45em;line-height:1.3;font-weight:700;letter-spacing:0}
  #pdPrice .cur{margin-right:1px}
  #pdPrice sup{margin-left:2px}
  #pdPrice .dot{display:none}
}
.pd-perk{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;color:var(--ink);font-weight:600}
.pd-perk .ico{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--body)}
.pd-perk .ico svg{width:17px;height:17px}
.pd-perk small{display:block;margin-top:1px;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.45}
.pd-perk a{color:var(--brand-text)}
.pdlast{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0 0;font-size:13.5px;color:var(--body)}
/* "In 15 people's carts" in a frame of its own (Lior, 2026-11-01: "put it in a frame") */
#pdCarts{display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin-top:10px}
#pdCarts[hidden]{display:none}
.pdlast svg{width:17px;height:17px;flex:none;color:var(--ink)}
.pdlast b{font-weight:600;color:var(--ink)}
.pdlast .linkbtn{font-size:13.5px;font-weight:500}
.ocard.flash{box-shadow:0 0 0 2px var(--brand);transition:box-shadow .3s}
.pd-perk .rmore{font-size:12.5px;font-weight:500;padding:0;color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
.pd-perk .rwhy{margin-top:6px;color:var(--body);font-size:13px;line-height:1.5;max-width:46ch}
.pd-facts.nosku dl{display:none}
.pd-facts.nosku .soldby{margin:0;padding:0;border:0}
.pd-facts{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:12px}
.pd-facts .soldby{margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid var(--line-soft);color:var(--muted);line-height:1.5;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.pd-facts .soldby span{white-space:nowrap}
.pd-facts .soldby b{margin-left:auto;color:var(--ink);font-weight:650}
.pd-facts dl{margin:0;display:grid;gap:7px}
.pd-facts dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pd-facts dt{color:var(--muted);flex:none}
.pd-facts dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
.pd-facts a{color:var(--brand-text);text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd-facts a:hover{text-decoration:underline}}
/* overview and specs */
.pddetails{display:flex;flex-direction:column;gap:0}
.pdp .pdsec{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 0;margin-top:0}
.pdp .pdsec + .pdsec{margin-top:20px}
.pdp .pdsec h2{font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:700;color:var(--ink);margin:0 0 9px;padding:0;letter-spacing:0}
.pdp .pdsec .desc{font-size:14px;line-height:1.6;color:var(--body);max-width:70ch}
.pdp .pdsec .desc p{margin:0 0 12px}.pdp .pdsec .desc p:last-child{margin-bottom:0}
.pdp .pdsec .desc ul{margin:0;padding-left:20px}.pdp .pdsec .desc li{margin:4px 0}.pdp .pdsec .desc li::marker{color:var(--muted)}
.pdp dl.specs{display:grid;grid-template-columns:minmax(130px,30%) 1fr;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;gap:0;max-height:300px;overflow-y:auto;overscroll-behavior:contain}   /* long spec sheets scroll in their own box (Lior, 2026-09-17) */
.pdp dl.specs dt{color:#565959;font-weight:500;padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft)}
.pdp dl.specs dd{margin:0;padding:9px 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-soft)}
/* "Similar items" (was "Goes well with" until 2026-10-07): three small cards, other brands and sizes of the same thing */
/* The section sits under the description in the left column: the buy box is the taller side, and the space beside it
   was left empty (Lior, 2026-09-19: "we need to fill this gap"). On a phone the page is one column and it follows the details. */
.pdmain > .pdwith{grid-column:1;margin-top:12px}
/* ...and right under it, not under the buy box: the buy box spans both rows and the second row is the flexible one, so the
   first row is only as tall as the photo and details (Lior, 2026-11-07, an LG monitor page: "Why there is a dead zones?";
   the buy box had grown with Guarantee, Price history, Return rate, the price alert and the limit, and Similar items waited
   for its end) */
.pdmain{grid-template-rows:auto 1fr}
.pdmain > .pd-col{grid-row:1}
.pdmain > .pd-side{grid-row:1 / span 2}
.pdmain > .pdwith{grid-row:2;align-self:start}
.pdmain > .pdwith .gwrow{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}   /* auto-fill: one card keeps one column (2026-11-07: a lone card ran the whole width, "The button is too wide") */   /* the column is narrower than the page: cards wrap instead of squeezing */
.pdwith[hidden]{display:none}
.pdwith h2{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.gwrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gw{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:none}
.gw .im{width:96px;aspect-ratio:1;border:0;border-radius:10px;background:var(--tile-photo);padding:6px;display:grid;place-items:center;cursor:pointer}
.gw .im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.gw .t{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);background:none;border:0;padding:0;font-family:inherit;text-align:left;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.gw .t:hover{text-decoration:underline}}
.gw .pr{display:flex;align-items:baseline;gap:7px;margin-top:5px}
.gw .pr b{font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.gw .pr small{font-size:12px;color:var(--muted)}
.gw .why{font-size:12px;font-weight:700;color:var(--ok);margin-top:3px}
/* long, dark outline, no fill: the same button as "Add all to cart" in the bundle box (Lior, 2026-09-19) */
.gw .btn{display:flex;width:100%;align-self:stretch;height:40px;padding:0 16px;margin-top:10px;border-radius:10px;font-size:13.5px;font-weight:700}
.gw .btn.go,.gw .btn.opt{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
@media (hover:hover) and (pointer:fine){.gw .btn.go:hover,.gw .btn.opt:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.pdmore{margin-top:4px}
.pdmore .rcard{margin:24px 0 0;border:1px solid var(--line);border-radius:18px}
@media (max-width:1080px){
  .pdmain{grid-template-columns:minmax(0,1fr) 340px;gap:26px}
  .pd-side{position:static}
}
@media (max-width:900px){
  .pdmain{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px}
  .pdmain > .pd-col,.pdmain > .pd-side,.pdmain > .pdwith{grid-row:auto}
  .pd-col,.pd-info{display:contents}
  .pdp .pd-media{order:0;grid-template-columns:minmax(0,1fr);max-width:none}
  .pd-head{order:0}
  .pdmain > .pd-side{order:1;position:static}
  #pdMelt{order:2}
  .pddetails{order:3}
  .pdmain > .pdwith{order:4;margin-top:22px}
  .pdp .zoom{grid-column:1;grid-row:1;aspect-ratio:auto;height:min(82vw,380px)}
  /* the photo fits its box: the computer's 456 px cap let a tall package overflow a phone's box and look cropped and zoomed
     in (Lior, 2026-09-19: "images here are too big"); the box is also shorter so the price shows sooner */
  .pdp .zoom img{max-height:calc(min(82vw,380px) - 44px)}
  .pdp .gdots{grid-column:1;grid-row:2;margin:6px 0 0}
  .pdp .thumbs{grid-column:1;grid-row:3;flex-direction:row;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}   /* sideways only: a spilled photo made the strip scroll up and down inside (Lior, 2026-09-19) */
  .gwrow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pdp{padding-top:8px}
  .pdcrumb{margin-bottom:10px;font-size:12px}
  .pdp .zoom{padding:0;border-radius:12px}
  .pdp .thumbs button{width:56px;height:56px}
  .pd-info h1{font-size:21px}
  .sign > div{padding:13px 16px}
  .sign-head{padding:16px 16px 14px!important}
  .sign-big{font-size:38px}
  .sign-big.money{font-size:34px}
  .srows{margin:0 -16px -13px}
  .srow{padding:11px 16px}
  .pdmore .rcard{margin:16px -16px 0;border-radius:0}
}
/* footer: light grey (Lior, 2026-10-03: "update the footer to light gray background"; navy from 2026-09-15), navy logo,
   dark text, with "Back to top" a shade darker */
/* white since 2026-11-03, as on shop.com (Lior: "we need to have same color background as well", "Don't like this light blue") */
footer.site{--fbg:#fff;background:var(--fbg);border-top:1px solid #E8E8E8;color:var(--body)}
footer.site .fcols h4{color:var(--ink)}
footer.site .fcols a:not(.storebadge){color:var(--body)}
footer.site .fcols .about,footer.site .legal,footer.site .legal a{color:var(--muted)}
@media (hover:hover) and (pointer:fine){footer.site .fcols a:not(.storebadge):not(.logo):hover,footer.site .legal a:hover{color:var(--ink);text-decoration:underline}}
.fcols .fmorebtn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--brand-text)}
footer.site .fcols .fmorebtn{color:var(--ink)}
@media (hover:hover) and (pointer:fine){footer.site .fcols .fmorebtn:hover{text-decoration:underline}}
footer.site .logo{color:var(--ink)}
footer.site .legal{border-top-color:#E8E8E8}
footer.site .fnews p{color:var(--muted)}
footer.site .fnews input{background:#fff;border-color:#CDD3DC;color:var(--ink)}
footer.site .fnews input::placeholder{color:#8A93A3}
footer.site .fnews input:focus{border-color:var(--ink)}
.totop{display:block;width:100%;background:#F2F2F2;color:var(--ink);border:0;padding:15px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
@media (hover:hover) and (pointer:fine){.totop:hover{background:#DADEE4}}
@media (max-width:1100px) and (min-width:761px){
  .agrid,.agrid.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid.n2>.acard{grid-column:auto}
  .agrid.n2 .quad{grid-template-columns:1fr 1fr}
  .agrid.n3>.acard:last-child{grid-column:1/-1}   /* two across: the third card takes the second row whole */
  .agrid.n3>.acard:last-child .quad{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.home{--lift:110px}
  .agrid.lift{margin-top:-110px}
  .subpromo{display:none}
}
/* phones: menu + logo + account + cart, full-width search, swipeable departments, "Deliver to" strip, full-width cards */
@media (max-width:760px){
  .hdr-in{grid-template-columns:auto auto 1fr auto;gap:2px 4px;padding-block:6px 10px}
  .menubtn{display:flex;padding:8px;margin-left:-8px}
  .hdr-bar .logo{padding:4px 6px}
  .hdr-actions{grid-column:4;gap:0}
  .hdr-bar .iconbtn.acct{display:flex;padding:6px 6px;font-size:14px;font-weight:500}
  .hdr-bar .acct .acct-t{display:none}
  .hdr-bar .acct .acct-m{display:flex;align-items:center;gap:0}
  .hdr-bar .acct svg{display:block}
  .hdr-bar .acct .acct-m svg{width:14px;height:14px}
  .hdr-bar .cartbtn b{display:none}
  .hdr-bar .cartbtn{padding:6px 8px 6px 6px}
  .search{grid-column:1 / -1;grid-row:2}
  .search select{display:none}
  .search .box{height:46px}
  .subnav-in{height:auto;padding-inline:6px;overflow-x:auto;scrollbar-width:none}
  .subnav-in::-webkit-scrollbar{display:none}
  .allbtn,.subpromo{display:none}
  .catnav{display:flex!important;flex:none;overflow:visible}
  .catnav>li[hidden]{display:list-item!important}
  .nl{font-size:14px;padding:11px 10px;border:0!important}
  .dl .panel{display:none!important}
  body.home .hero{margin:0 -16px;display:none}   /* hidden on phones (Lior, 2026-10-07); renderHero skips it too */
  /* Phones: the hero art is a 3:1 panorama, so filling a near-square box cropped away two thirds of it and looked
     blown up (Lior, 2026-09-20: "still very big (zoomed in), unprofessional"). The picture now runs full width at its
     own shape with nothing cut off, and the words sit underneath on the slide's own soft colour. */
  body.home .banner.main{min-height:0;height:calc(33.33vw + 168px);background:var(--hsoft,#EAF0F7)}
  body.home .slide{justify-content:flex-start;padding:0;background-image:none;background:var(--hsoft,#EAF0F7)}
  body.home .slide .sbg{display:block;position:absolute;top:0;left:0;right:0;height:33.33vw;background-image:var(--bg);background-size:contain;background-position:center top;background-repeat:no-repeat;background-color:var(--hsoft,#EAF0F7)}   /* top: the wider 10:3 pictures sit flush under the book banner, their spare sliver falls into the words below */
  body.home .slide .in{display:flex;flex-direction:column;position:absolute;top:33.33vw;left:0;right:0;bottom:0;padding:14px 18px 18px;text-shadow:none;color:var(--ink)}
  body.home .slide .btn{margin-top:auto;align-self:flex-start}
  body.home .slide .kicker{margin-bottom:5px;color:var(--muted)}
  body.home .slide h2{font-size:21px;line-height:1.16;max-width:none;color:var(--ink);margin:0 0 14px}   /* one row, clear of the button (Lior, 2026-09-20) */
  body.home .slide .btn{padding:11px 20px;font-size:14.5px}
  body.home .slide::before{display:none}   /* the picture is its own band now, so no scrim over it */
  body.home .slide::after{display:none}

  body.home .dots{top:calc(33.33vw - 26px);bottom:auto;right:14px}   /* over the picture, clear of the words */
  .agrid,.agrid.n3{grid-template-columns:1fr;gap:8px;margin:8px -16px}
  .agrid.n1>.acard,.agrid.n2>.acard,.agrid.n3>.acard:last-child{grid-column:auto}
  .agrid.n1 .quad,.agrid.n2 .quad,.agrid.n3>.acard:last-child .quad{grid-template-columns:1fr 1fr}
  .agrid.lift{margin-top:8px}
  .acard,.rcard{border-radius:0}
  .acard{padding:18px 16px}
  .acard h3{font-size:18px}
  .rh h2{font-size:18px}
  /* phones: smaller type, measured against Amazon, eBay and Costco search pages (Lior, 2026-09-15) */
  body{font-size:14px}
  .toolbar h2{font-size:19px}

  .msg{font-size:14px}
  .quad{gap:14px 12px}
  .qt .im{padding:14px}
  .qt span{font-size:14px}
  .acard .big{min-height:260px}
  .rcard{margin:8px -16px;padding:18px 0 16px}
  .grid > .mod{margin:6px -16px;border-radius:0;border-left:0;border-right:0;padding:16px 0 14px}
  .grid > .pbanner,.grid > .abnr{margin:6px -16px;border-radius:0}
  .abnr{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px 16px 18px}
  .abt h3{font-size:21px}
  .abt p:not(.kicker){margin:6px 0 12px;font-size:13.5px}
  .abim{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .abp:nth-child(4){display:none}
  .hrow.types{grid-auto-columns:42vw}
  .hrow.kinds{grid-auto-columns:44vw}
  .hrow.kinds{padding:6px 16px;margin:-6px 0}
  .rh{padding:0 16px;justify-content:space-between}
  .hrow{grid-auto-columns:40vw;gap:12px;padding:0 16px;scroll-padding-inline:16px}
  .rside{display:none}
  body.home   body.home .promo{margin:8px -16px;border-radius:0}
  body.home #sections > .brow,body.home #sections > .bwide,body.home #bannerA > .bwide{padding:8px 0}
}
/* saved items (Lior, 2026-09-18: "customers can save an item, like a bookmark"): a heart on every card and product
   page, a Saved button in the header, and the /saved/ page. Outline heart in ink; saved = filled in the deal red (the Reicon
   pair, 2026-10-07). */
.savebtn{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;transition:color .14s,border-color .14s}
.savebtn svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.savebtn:hover{border-color:var(--ink)}}
.savebtn[aria-pressed="true"],.pdp .pdsavebtn[aria-pressed="true"]{color:var(--deal)}
.savebtn.pop,.pdsavebtn.pop{animation:addpop .38s ease}
.savebtn:focus-visible,.pdsavebtn:focus-visible,.savedbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* the heart sits alone in the photo's top left corner (Lior, 2026-10-10); the lens and share keep the top right */
.pdp .pdsavebtn{position:absolute;top:14px;left:14px;z-index:3;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}
.pdp .pdsavebtn svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.pdp .pdsavebtn:hover{border-color:var(--ink)}}
.pdp .zoom.on .pdsavebtn{display:none}
.hdr-bar .savedbtn{position:relative;background:none;border:1px solid transparent;border-radius:6px;color:#fff;display:flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;cursor:pointer;font:inherit}
.hdr-bar .savedbtn svg{width:26px;height:26px}
.hdr-bar .savedbtn b{font-size:14px;font-weight:700;line-height:1}
.hdr-bar .savedbtn .count{position:absolute;top:1px;left:21px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#fff;color:var(--hdr);font-size:11.5px;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px var(--hdr)}
/* the Saved button: no frame on hover either (2026-09-27) */
@media (max-width:760px){.hdr-bar .savedbtn b{display:none}.hdr-bar .savedbtn{padding:6px 5px}.hdr-bar .savedbtn svg{width:25px;height:25px}}
.savedpage .acct-head p{color:var(--muted);margin:2px 0 0;font-size:14px}
.saved-note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:0 0 18px;color:var(--body);font-size:14px;line-height:1.5}
.saved-note a,.acct-empty a{color:var(--brand-text);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.savedpage .grid{margin-bottom:28px}
.saved-gone h2{font-size:16px;margin:6px 0 10px;color:var(--ink)}
.saved-gone ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.saved-gone li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.saved-gone img{width:48px;height:48px;object-fit:contain;flex:none;mix-blend-mode:multiply}
.saved-gone span{flex:1;min-width:0;color:var(--ink);font-size:14px;font-weight:600}
.saved-gone small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:2px}
.acct-empty .heart svg{width:40px;height:40px;color:var(--muted)}
.lacts{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (hover:hover) and (pointer:fine){.remove.later:hover{color:var(--brand-text)}}
@media (prefers-reduced-motion:reduce){.savebtn.pop,.pdsavebtn.pop{animation:none}}
/* ---- Phones look like the app (Lior, 2026-10-09: "we need to give the same experience in the website like the app. Go
   to amazon.com mobile web and it's not different from the app"). Step 1, the frame: the app's header (navy letters,
   the Deliver to chip, the heart, a round search field, the category pills) and its bottom tab bar (Home, Departments,
   Cart, Account and a round Search). Colours from the app: page #F6F7F8, ink #121417, muted #555C6A, hairline #E5E7EC. */
.allp,.zchev,.tabbar,.topcards,.mb-ph{display:none}
.logo picture{display:block;line-height:0}
@media (max-width:760px){
  .hdr,.hdr-bar,.subnav{background:#F6F7F8;color:#121417;box-shadow:none;border:0}
  .hdr-in{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo . zip act" "search search search search";gap:10px 6px;padding:8px 0 10px}
  .menubtn,.hdr-bar .iconbtn.acct,.hdr-bar .cartbtn,.allbtn svg,.allw{display:none!important}
  .hdr-bar .logo{grid-area:logo;padding:2px 0;margin-left:2px}
  .hdr-bar .logo img{height:30px;width:auto}
  .hdr-bar .iconbtn.zip{grid-area:zip;display:flex!important;align-items:center;gap:5px;background:#fff;color:#121417;border-radius:999px;padding:8px 12px;border:0}
  .hdr-bar .iconbtn.zip svg{width:13px;height:13px;color:#121417}
  .hdr-bar .iconbtn.zip span{display:flex;gap:4px;align-items:baseline}
  .hdr-bar .iconbtn.zip small{display:inline;font-size:13.5px;font-weight:600;color:#121417}
  .hdr-bar .iconbtn.zip b{font-size:13.5px;font-weight:600;color:#121417}
  .hdr-bar .iconbtn.zip .zchev{display:block;width:11px;height:11px}
  .hdr-actions{grid-area:act;gap:0}
  .hdr-bar .savedbtn{color:#121417;padding:6px}
  .hdr-bar .savedbtn svg{width:24px;height:24px}
  .search{grid-area:search}
  .hdr-bar .search .box{height:48px;border:1px solid #E5E7EC;border-radius:999px;background:#fff;overflow:hidden;display:flex;align-items:center}
  .hdr-bar .search .sbtn{order:-1;background:none;color:#121417;width:46px;padding:0 0 0 6px;border:0}
  .hdr-bar .search .sbtn svg{width:19px;height:19px;color:#121417}
  .hdr-bar .iconbtn.zip.nozip small{display:none}
  .hdr-bar .search input{font-size:16px;padding-left:2px;color:#121417}
  .hdr-bar .search input::placeholder{color:#555C6A}
  .subnav{top:calc(var(--topH,0px) + var(--hdrH,66px))}
  .subnav-in{height:auto;padding:0 16px 12px;gap:10px;overflow-x:auto;scrollbar-width:none}
  .allbtn{display:flex!important;flex:none}
  .allp{display:inline}
  .allbtn,.catnav .nl{background:#fff;color:#121417!important;border-radius:999px!important;border:1px solid rgba(18,20,23,.06)!important;padding:10px 17px!important;font-size:15.5px!important;font-weight:500!important;white-space:nowrap}
  .catnav{gap:10px}
  .catnav .nl.hot{color:#121417!important}
  .catnav .nl.active{background:#121417;color:#fff!important}
  /* Scrolling down, the logo row and search slide away and the pills stay, like the app. The header and the pills move
     as one piece, by transform only, the same distance with the same timing (Lior, 2026-10-09: "When scrolling up, the bar
     that stick to the top, it's very buggy. It needs to be smoother"; the first version moved the pills' top and padding,
     which re-laid the page every frame). The last 10px of the header stay in view, so the pills keep room above them
     ("The pills are too stick to the top"). */
  .hdr,.subnav{transition:transform .3s cubic-bezier(.32,.72,0,1),background-color .45s ease;will-change:transform}
  html.navtuck .hdr,html.navtuck .subnav,html.navtuck .subnav.tuck{transform:translateY(calc(10px - var(--hdrH,110px)));pointer-events:auto}
  html.navtuck .hdr{pointer-events:none}
  .subnav.tuck{transform:none;pointer-events:auto}
  html.navtuck .acct-top{top:calc(var(--topH,0px) + 10px + var(--navFull,0px))}
  /* the side menu (Departments) opens in the app's light colours */
  .mhead{background:#F6F7F8;color:#121417}
  .mhead h2{color:#121417}
  .mhead .close{background:#fff;color:#121417}
  .mhello{color:#121417}
  .mhello:focus-visible{outline-color:#121417}
  html.navtuck .subnav{box-shadow:0 .5px 0 rgba(18,20,23,.1)}
  /* the tab bar: a frosted pill with the four tabs and a round search button, over the page's bottom edge */
  footer.site{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body.home{background:#F6F7F8}
  .tabbar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;pointer-events:none}
  .tabbar>*{pointer-events:auto}
  .tb-pill{flex:1;display:grid;grid-template-columns:repeat(4,1fr);height:64px;padding:4px;border-radius:999px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 6px 26px rgba(18,20,23,.14),0 0 0 .5px rgba(18,20,23,.08)}
  .tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#121417;font:inherit;font-size:11px;font-weight:500;text-decoration:none;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tb svg{width:24px;height:24px}
  .tb.on{background:rgba(18,20,23,.07);font-weight:700}
  .tb .ri-f{display:none}
  .tb.on .ri-o{display:none}.tb.on .ri-f{display:block}
  .tb-n{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E0243A;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .tb-n.zero{display:none}
  .tb-search{width:64px;height:64px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;color:#121417;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 6px 26px rgba(18,20,23,.14),0 0 0 .5px rgba(18,20,23,.08);cursor:pointer}
  .tb-search svg{width:24px;height:24px}
  /* The dock used to fold into one round button while scrolling down, like the app's tab bar (2026-10-13). Since
     2026-10-16 it stays open all the time so the Cart tab and its count are always in sight (Lior: "keep the bottom deck
     open all the time so they can see the cart"); nothing sets html.dockmin any more, these rules are only its look. */
  .tb-pill{flex:0 0 auto;width:calc(100% - 74px);overflow:hidden;transition:width .42s cubic-bezier(.32,.72,0,1)}
  .tb-search{margin-left:auto}
  .tb{transition:opacity .2s ease}
  html.dockmin .tb-pill{width:64px;display:flex;align-items:center;justify-content:center}
  html.dockmin .tb{position:absolute;opacity:0;pointer-events:none}
  html.dockmin .tb.cur,html.dockmin .tb-pill:not(:has(.cur)) .tb[data-tab="home"]{position:relative;opacity:1;pointer-events:auto;width:56px;height:56px;font-size:0;gap:0;background:none}
  html.dockmin .tb.cur .tb-n{top:3px;left:calc(50% + 4px)}
  @media (prefers-reduced-motion:reduce){.tb-pill,.tb{transition:none}}
  /* the app's top photo cards (2026-10-09, Lior: "Need to add the top cards"): tall rounded photos, the headline at the
     top, a yellow Shop pill, swiped sideways; the band behind them and the header takes the card's colour (--tint) */
  .topcards{display:flex;gap:14px;overflow-x:auto;margin:0 -16px;padding:4px 16px 28px;scrollbar-width:none;background:var(--tint,#F6F7F8);transition:background-color .45s ease;-webkit-overflow-scrolling:touch}
  .topcards::-webkit-scrollbar{display:none}
  .topcards:empty{display:none}
  /* their room is kept while they load, so the page doesn't jump down when they arrive */
  .topcards.loading:empty{display:block;height:calc(min(340px,82vw) * 470 / 340 + 32px)}
  body.home .hdr,body.home .hdr-bar,body.home .subnav{background:var(--tint,#F6F7F8)}
  html.pasttop body.home .hdr,html.pasttop body.home .hdr-bar,html.pasttop body.home .subnav{background:#F6F7F8}
  .tcard{flex:none;position:relative;width:min(340px,82vw);aspect-ratio:340/470;border-radius:22px;overflow:hidden;background:#E9E3DA;text-decoration:none;transition:transform .15s ease}
  .tcard:active{transform:scale(.98)}
  .tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 18%,rgba(0,0,0,0) 32%)}
  .tcard b{position:absolute;z-index:1;left:20px;right:20px;top:18px;color:#fff;font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tcard .tcta{position:absolute;z-index:1;left:18px;bottom:18px;background:#FFC94D;color:#0E1320;font-size:15px;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
  /* the search suggestions stay on screen and scroll inside themselves (audit 2026-10-09: the list ran past the bottom
     edge and under the tab bar), and while the keyboard is up the tab bar steps aside, as in the app */
  .hdr-bar .search .ac{max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.kb .tabbar{display:none}
  /* Filters as a bottom sheet with a "Show results" button (audit 2026-10-09: on phones it opened as a list about 2,000px
     long above the products, pushing them out of sight) */
  .filters.open{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:22px 22px 0 0;padding:8px 18px calc(92px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(18,20,23,.18);animation:fltup .28s cubic-bezier(.32,.72,0,1)}
  .fltback{position:fixed;inset:0;z-index:69;background:rgba(10,16,30,.45)}
  .fltdone{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:71;height:52px;border:0;border-radius:999px;background:#121417;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
  html.fltopen,html.fltopen body{overflow:hidden}
  html.fltopen .tabbar{display:none}
  @keyframes fltup{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
  /* what sat at the bottom edge moves up over the bar */
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
  .addbar{bottom:calc(84px + env(safe-area-inset-bottom))}
  html.kb .addbar{display:none}
  /* The product page, as in the app (Lior, 2026-10-13, with a screenshot of the app's page: "Why it can't be like that
     just like the product page in the app"). No site header: a round Back button and a pill with Shop similar, Share and
     Save float over the top. The photo runs the full width with no frame or arrows. "Shop all <brand>", the name in a
     light 26px, the price large with its cents raised and "each" beside it, the regular price, In stock, where it
     delivers. The price box, the options and the delivery lines are flat white sections with a grey band between them.
     The quantity and "Add to cart · $price" sit in a bar above the dock on every part of the page, so the page's own
     row of the same two is not drawn. */
  body:has(#pdp:not([hidden])) .hdr{display:none}
  body:has(#pdp:not([hidden])){background:#fff}
  .pdtop{display:flex;align-items:center;justify-content:space-between;position:fixed;top:calc(10px + env(safe-area-inset-top) + var(--apbOff, 0px));left:14px;right:14px;z-index:30;pointer-events:none}
  .pdtop>*{pointer-events:auto}
  .pt-btn,.pt-pill{height:44px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 2px 10px rgba(18,20,23,.1),0 0 0 .5px rgba(18,20,23,.12);color:var(--ink)}
  .pt-btn{width:44px;display:grid;place-items:center;border:0;padding:0;cursor:pointer}
  .pt-pill{display:flex;align-items:center;gap:2px;padding:0 6px}
  .pt-pill:empty{display:none}
  .pdp .pt-pill button{position:static;width:46px;height:44px;border:0;border-radius:999px;background:none;box-shadow:none;display:grid;place-items:center;padding:0;color:var(--ink)}
  .pdp .pt-pill button[hidden]{display:none}
  .pdp .pt-pill button svg{width:22px;height:22px}
  /* The delivery day stands beside the price (.bl-eta), so it shows whenever the price does (Lior, 2026-10-13: "the
     delivery by date should be something the user needs to see in first shot as well"). The photo and the spacing stay
     as they were: a shorter photo and tighter gaps were tried the same night and he asked for the page back ("keep it
     as it was the customer will scroll a bit anyways, just keep the date where it is now"). */
  .pdp{padding-top:62px;padding-bottom:96px}
  .pdp .pdcrumb,.pdp .gnav,.pdp .zoomhint{display:none!important}
  #pdp .zoom{border:0;border-radius:0;margin:0 -16px;height:min(82vw,330px);background:#fff}
  #pdp .zoom img{max-height:calc(min(82vw,330px) - 20px)}
  .pdp .gdots{margin:12px 0 4px}
  #pdEyebrow{padding-right:0;margin-top:14px;font-size:15px;font-weight:500}
  #pdEyebrow a::before{content:"Shop all "}
  .pd-info h1{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:26px;line-height:1.24;font-weight:500;letter-spacing:-.012em;margin:4px 0 8px;text-wrap:pretty}   /* the body face: the heading face is only loaded bold */
  .pdp .sign{border:0;border-radius:0;background:none;box-shadow:none;margin:0 -16px}
  .pdp .sign > div{padding:16px;border:0;border-top:8px solid #F1F2F4}
  .pdp .sign > .sign-head{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 16px 18px!important;border-top:0}
  .sign-head > *{flex:0 0 100%;order:5;margin:0}
  .sign-head > .pricerow{flex:0 0 auto;order:1}
  /* under the price, full width (Lior, 2026-10-26, on a 3-Pack: "This looks bad on mobile all the gap", "This should be aligned
     and organized"): beside the price it wrapped into a narrow column and left a hole under the price */
  .sign-head > #pdBoxLine{flex:0 0 100%;order:2;min-width:0;margin-top:2px;font-size:16px;font-weight:500;color:var(--muted)}
  #pdBoxLine .bl-eta{display:block;margin-top:1px;font-size:15px;color:var(--ink)}
  #pdBoxLine .bl-eta b{font-weight:600}
  .sign-head > #pdWas{order:3;font-size:16px;font-weight:500;margin-left:0}
  .sign-head > #pdWas .was-sv{display:inline;margin-left:6px;color:var(--deal);font-weight:500}
  .sign-head > #pdWas.ghost{display:none}   /* on a phone an invisible "Regular price" line read as a gap (Lior, 2026-10-26) */
  .sign-head > #pdWas .dtimer{display:block;margin:2px 0 0}   /* "Ends in" on its own line, flush left ("This line should be aligned") */
  #pdBoxLine .bl-txt.solo{display:none}
  .sign-head > #pdUnit{order:4;font-size:15px;font-weight:500;color:var(--muted)}
  .sign-head > .sign-stock{display:block;order:6;font-size:16px;color:var(--ok,#1F7A4D)}
  .sign-head > .sign-stock[hidden]{display:none}
  .sign-head > .sign-stock.low{color:var(--gold)}
  .sign-head > .sign-stock.out{color:var(--danger)}
  .sign-head > #pdDeliver{order:7;font-size:16px}
  .sign-head > #pdUnitLab{display:none}
  .sign-big.money{display:inline-flex;align-items:flex-start;font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:46px;line-height:1;font-weight:600;letter-spacing:-.03em;margin:0}
  #pdPrice .cur,#pdPrice sup{font-size:.48em;line-height:1.25;font-weight:600;letter-spacing:0}
  #pdPrice .cur{margin-right:1px}#pdPrice sup{margin-left:2px}
  #pdPrice .dot{display:none}
  .pdp .pd-buy .buyrow,.pdp .pd-buy > .stock{display:none}
  .pdp .pd-buy .buybtn{background:var(--accent);color:#0F1111;border:1.5px solid var(--accent);border-radius:999px;height:50px;font-size:16px}
  /* no box of its own on a phone: the whole list scrolls with the page (Lior, 2026-10-20: "the specification section is
     wiggling inside. It's supposed to be steady and scroll like normally"); computers keep the 300px box */
  .pdp dl.specs{border:0;border-radius:0;padding:0;max-height:none;overflow:visible;overscroll-behavior:auto}
  /* the quantity and the Add button, above the dock for the whole page */
  .pdbar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:44;padding:10px 16px calc(84px + env(safe-area-inset-bottom));background:rgba(246,247,248,.94);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-top:.5px solid rgba(18,20,23,.1);transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .2s}
  .pdbar[hidden]{display:none}
  .pdbar.away{transform:translateY(20px);opacity:0;pointer-events:none}
  .pdbar .pb-step{flex:none;height:52px;border:0;background:#ECEEF1;border-radius:999px}
  .pdbar .pb-step[hidden]{display:none}
  .pdbar .pb-step button{width:44px;height:52px;background:none;font-size:22px;font-weight:500}
  .pdbar .pb-step button:disabled{background:none;color:#B6BBC4}
  .pdbar .pb-step output{min-width:30px;font-size:17px;font-weight:600}
  .pdbar #pbAdd{flex:1;min-width:0;height:52px;padding:0 16px;border-radius:999px;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdbar #pbAdd:disabled{opacity:.45}
  /* our yellow, like the page's own Add to cart (Lior, 2026-10-27); Notify me stays outlined like on a computer */
  .pdbar #pbAdd{background:var(--accent);color:#0F1111;border:1.5px solid var(--accent)}
  @media (hover:hover) and (pointer:fine){.pdbar #pbAdd:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
  .pdbar #pbAdd.notifymode{background:#fff;color:var(--brand);border-color:var(--brand)}
  html.kb .pdbar,html.fltopen .pdbar{display:none}
  body:has(#pdp:not([hidden])) .toast{bottom:calc(168px + env(safe-area-inset-bottom))}
  @media (prefers-reduced-motion:reduce){.pdbar{transition:none}}
  /* and the product itself higher on that first screen: no department pills and no thumbnail strip on a phone's product
     page (the dots under the photo and a swipe move through the pictures, as in the app) */
  body:has(#pdp:not([hidden])) .subnav{display:none}
  .pdp .thumbs{display:none}
  /* the product's photo, brand and name shown from its own row while the catalog loads, in the places the real page puts
     them (#pdFast, measured on the live page 2026-10-12), so the page that replaces it does not jump */
  .pdfast{display:block;padding:62px 0 0}   /* the app-style page: no header, the photo full width, the name light (2026-10-13) */
  .pdfast[hidden]{display:none}
  .pf-photo{height:min(82vw,330px);margin:0 -16px;background:#fff;display:grid;place-items:center}
  .pf-photo img{max-width:calc(100% - 44px);max-height:calc(min(82vw,330px) - 20px);object-fit:contain}
  .pf-photo img:not([src]){visibility:hidden}
  .pf-brand{margin:65px 0 6px;min-height:23px;font-size:15px;font-weight:500;line-height:23px;color:var(--brand-text)}
  .pf-brand:not(:empty)::before{content:"Shop all "}
  .pf-rate{margin-top:10px;min-height:20px}.pf-rate:empty{display:none}
  .pf-price{margin-top:10px}
  .pf-title{margin:6px 0 0;font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:26px;line-height:1.24;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
  html.booting-pdp .subnav,html.booting-pdp .hdr{display:none}   /* a product page has no department pills and no site header: not while it loads either */
  html.booting-pdp body{background:#fff}
  /* a shorter photo box, so the item's whole name sits above the bar */
  .pdp .zoom{height:min(70vw,300px)}
  .pdp .zoom img{max-height:calc(min(70vw,300px) - 44px)}
}
/* ---- Phones, the header like Amazon's (Lior, 2026-10-18: "It's so uncomfortable on the website ... the deck sitting on
   the bottom. On Amazon and everyone's ... it sits on the top, the cart on the top right", then picked A of three drawn
   options, docs/web-header-options.png): one dark bar with the menu, the logo, Sign in and the cart with its count, the
   search under them, the delivery ZIP on its own line; no tab bar at the bottom. The menu opens the departments. */
@media (max-width:760px){
  .tabbar{display:none!important}
  .hdr,.hdr-bar,body.home .hdr,body.home .hdr-bar,html.pasttop body.home .hdr,html.pasttop body.home .hdr-bar{background:var(--hdr)!important;color:#fff}
  .hdr-in{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"menu logo . act" "search search search search" "zip zip zip zip";gap:8px 8px;padding:4px 0 0}
  .hdr-bar .menubtn{display:grid!important;grid-area:menu;place-items:center;width:36px;height:42px;margin-left:-6px;padding:0;color:#fff;background:none;border:0}
  .hdr-bar .menubtn>svg{display:none}
  .hdr-bar .menubtn .mb-ph{display:grid}
  .hdr-bar .menubtn .mb-ph svg{width:26px;height:26px;color:#fff}
  .hdr-bar .logo{grid-area:logo;margin-left:0;padding:0}
  .hdr-bar .logo img{height:26px;filter:brightness(0) invert(1)}
  .hdr-actions{grid-area:act;display:flex;align-items:center;gap:14px}
  .hdr-bar .savedbtn{display:none!important}
  .hdr-bar .iconbtn.acct{display:flex!important;align-items:center;gap:6px;background:none;border:0;color:#fff;padding:4px 0}
  .hdr-bar .iconbtn.acct .acct-t,.hdr-bar .iconbtn.acct .acct-m svg{display:none}
  .hdr-bar .iconbtn.acct .acct-m{display:inline;font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
  .hdr-bar .iconbtn.acct>svg{width:24px;height:24px;color:#fff}
  .hdr-bar .cartbtn{display:flex!important;position:relative;background:none;border:0;color:#fff;padding:4px 2px;margin-right:4px}
  .hdr-bar .cartbtn svg{width:29px;height:29px;color:#fff}
  .hdr-bar .cartbtn b{display:none}
  .hdr-bar .cartbtn .count{position:absolute;top:-3px;right:-3px;left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:#0E1320;font-size:11.5px;font-weight:700;display:grid;place-items:center;line-height:1;box-shadow:none}
  .hdr-bar .cartbtn .count.zero{display:none}
  .hdr-bar .search .box{height:46px;border:0;border-radius:12px}
  .hdr-bar .iconbtn.zip{grid-area:zip;display:flex!important;justify-content:flex-start;align-items:center;gap:6px;margin:6px -16px 0;padding:10px 16px;border-radius:0;background:#2B373D;color:#DDE3E8}
  .hdr-bar .iconbtn.zip svg{width:15px;height:15px;color:#DDE3E8}
  .hdr-bar .iconbtn.zip small{display:inline!important;font-size:13.5px;font-weight:500;color:#DDE3E8}
  .hdr-bar .iconbtn.zip b{font-size:13.5px;font-weight:700;color:#fff}
  .hdr-bar .iconbtn.zip .zchev{width:11px;height:11px;color:#DDE3E8}
  /* scrolled down, the search and the ZIP line slide away; the top row with the cart stays, the department pills under it
     (the cart in sight all the time, Lior 2026-10-16: "keep the bottom deck open all the time so they can see the cart") */
  html.navtuck .hdr{transform:translateY(calc(48px - var(--hdrH,110px)))}
  /* the bar's contents move down by the same amount at the same time, so the top row stands still and the rest is cut off */
  .hdr-in{transition:transform .3s cubic-bezier(.32,.72,0,1)}
  html.navtuck .hdr-in{transform:translateY(calc(var(--hdrH,110px) - 48px))}
  html.navtuck .hdr{overflow:hidden;pointer-events:auto}
  html.navshow .hdr{overflow:hidden}
  @media (prefers-reduced-motion:reduce){.hdr-in{transition:none}}
  /* nothing at the bottom edge now: what sat above the dock comes down */
  footer.site{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* the bottom lines stacked with even room between them on a phone (Lior, 2026-10-27: "It's still like not spaced") */
  .legal{flex-direction:column;gap:18px;padding:22px 0 30px;font-size:13px;line-height:1.55}
  .legal .co>span,.legal .co>a{display:block}
  .legal .co .sep{display:none}
  .legal .co>span+span{margin-top:2px}
  .legal .co>a{margin-top:8px;color:var(--body)}
  .legal>span:nth-child(2){gap:10px 22px;font-size:13.5px}
  .legal .indep{font-size:12px;line-height:1.5;padding-top:16px;border-top:1px solid var(--line)}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom))}
  .addbar{bottom:calc(12px + env(safe-area-inset-bottom))}
  .pdbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* room under the footer for the Add to cart bar, so its last line (the reseller note) isn't hidden behind it */
  body:has(#pdBar:not([hidden])) footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(#pdp:not([hidden])) .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
  /* only the header stays at the top; the department pills scroll away with the page, with room above them (Lior,
     2026-10-18: "the pills not sitting good. We don't need them stick just keep the header nav stick") */
  .subnav,body.home .subnav{position:relative;top:auto}
  html.navtuck .subnav,html.navtuck .subnav.tuck,.subnav.tuck{transform:none}
  .subnav-in{padding-top:12px}
  /* the product page has the header too ("We need the header nav in the product page as well"): no floating Back and pill,
     the photo keeps its own Save and Share buttons as on a computer */
  body:has(#pdp:not([hidden])) .hdr,html.booting-pdp .hdr{display:block}
  .pdtop{display:none!important}
  .pdp{padding-top:8px}
  .pdfast{padding-top:8px}
  /* the delivery address step shows no Order summary; it waits for the payment step, folded above the costs (Lior,
     2026-10-18: "Why it's showing the cart summary in the delivery address? Remove") */
  #coDialog[data-phase="addr"]:not(.one) .co-sum{display:none}
  /* (the product page's own cart button, from when it had no header) */
  .pt-right{display:flex;align-items:center;gap:8px}
  .pt-cart{position:relative}
  .pt-cart svg{width:22px;height:22px}
  .pt-cart .count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#0E1320;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
  .pt-cart .count.zero{display:none}
}
/* Feel on phones (Lior, 2026-11-08: "make sure our app using it to smooth everything and make it more professional", Emil
   Kowalski's mobile-native and design-engineering skills in .claude/skills): no grey flash on a tap, no wait for a second
   tap, a long press on a control doesn't select its words, and the buttons people press most give a little under the
   finger (scale .97 on press, back in 160 ms on a strong ease-out) instead of answering only when the finger lifts. Every
   :hover above sits behind (hover:hover) and (pointer:fine), so a tapped card or button no longer stays "hovered". The
   press uses the scale property, not transform, so it never fights an element's own translate. */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,label,summary,select,[role="button"]{touch-action:manipulation}
button,[role="button"],.btn,.add,.pk,.tier,.axchip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn,.add,.cartbtn,.notifybig,.zip-go,.savebtn,.tier,.pk,.axchip,.stepper button,.cstep button,.pd-buy .addbtn,.pd-buy .buybtn,#checkoutBtn,.pdbar #pbAdd{transition:scale .16s cubic-bezier(.23,1,.32,1),background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,opacity .14s ease}
.btn:active,.add:active,.cartbtn:active,.notifybig:active,.zip-go:active,.savebtn:active,.stepper button:active,.cstep button:active,.pd-buy .addbtn:active,.pd-buy .buybtn:active,#checkoutBtn:active,.pdbar #pbAdd:active{scale:.97}
.tier:active,.pk:active,.axchip:active{scale:.98}
button:disabled:active,.btn[disabled]:active{scale:none}
@media (prefers-reduced-motion:reduce){.btn,.add,.cartbtn,.notifybig,.zip-go,.savebtn,.tier,.pk,.axchip,.stepper button,.cstep button,.pd-buy .addbtn,.pd-buy .buybtn,#checkoutBtn,.pdbar #pbAdd{transition-property:background-color,border-color,color,box-shadow,opacity}}