:root{--ink:#1a2329;--muted:#6b7780;--line:#e6eaec;--accent:#0e7c72;--accent-d:#0a5d56}
*{box-sizing:border-box}
body.home{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
.home img{max-width:100%;display:block}
.home a{color:var(--accent-d);text-decoration:none}
.home a:hover{text-decoration:underline}
.home :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home .skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:9}.home .skip:focus{left:8px}
.h-wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.home h1,.home h2{font-weight:600;letter-spacing:-.01em;margin:0}
/* header */
.h-head{border-bottom:1px solid var(--line);background:#fff}
.h-head-in{display:flex;align-items:center;gap:32px;height:72px}
.h-brand img{height:34px;width:auto}
.h-search{position:relative;flex:1;max-width:420px;margin:0 auto}
.h-search input{width:100%;height:42px;border:1px solid #d5dbde;border-radius:8px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.h-search input:focus{outline:none;border-color:var(--accent)}
.h-results{position:absolute;left:0;right:0;top:48px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:10;overflow:hidden}
.h-results a{display:flex;align-items:center;gap:12px;padding:8px 12px;color:var(--ink);font-size:14.5px;line-height:1.3}
.h-results a:hover,.h-results a.on{background:#f4f6f7;text-decoration:none}
.h-results img{width:36px;height:36px;object-fit:contain;flex:none}
.h-results small{display:block;color:var(--muted);font-size:12.5px}
.h-results .none{padding:12px;color:var(--muted);font-size:14.5px;margin:0}
.h-results .all{justify-content:center;color:var(--accent-d);border-top:1px solid var(--line);font-weight:600}
.h-nav{display:flex;gap:28px}
.h-nav a{color:var(--ink);font-size:15px}
/* hero */
.h-hero{padding:88px 0 72px}
.h-hero h1{font-size:clamp(28px,3.4vw,40px);line-height:1.2;max-width:18em}
.h-contact{margin:20px 0 0;font-size:18px;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted)}
/* categories */
.h-cats{padding:24px 0 88px}
.h-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.h-sec-head h2{font-size:22px}
.h-sec-head a{font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--ink)!important;background:#fff}
.tile:hover{border-color:#c9d1d5;text-decoration:none!important}
.tile-img{display:block;aspect-ratio:4/3;padding:24px;background:#fff}
.tile-img img{width:100%;height:100%;object-fit:contain}
.tile-name{padding:14px 16px;border-top:1px solid var(--line);font-size:15.5px;font-weight:500}
/* order */
.h-order{padding:72px 0;border-top:1px solid var(--line)}
.h-order-in{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.h-order h2{font-size:22px;margin-bottom:8px}
.h-order-text p{margin:0;color:var(--muted)}
.h-form{display:grid;gap:14px}
.h-form label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.h-form input,.h-form textarea{font:inherit;font-size:15px;border:1px solid #d5dbde;border-radius:8px;padding:10px 12px;width:100%;color:var(--ink);background:#fff}
.h-form input:focus,.h-form textarea:focus{outline:none;border-color:var(--accent)}
.h-kind{display:flex;gap:24px}
.h-kind label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;cursor:pointer}
.h-kind input{width:auto;accent-color:var(--accent)}
.h-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.h-btn{justify-self:start;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:11px 28px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.h-btn:hover{background:var(--accent-d)}
.home .list-box{border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14.5px}
.home .lb-head{display:flex;justify-content:space-between;align-items:center}
.home .lb-head button{background:none;border:0;color:var(--accent-d);cursor:pointer;font:inherit}
.home .list-box ul{list-style:none;margin:6px 0 0;padding:0;max-height:180px;overflow:auto}
.home .list-box li{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.home .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.home .form-status{margin:0;min-height:1.4em;font-size:14.5px}
.home .form-status.ok{color:#1b7f4b}.home .form-status.err{color:#c0362c}
/* footer */
.h-foot{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted)}
.h-foot-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:860px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .h-order-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .h-wrap{padding:0 20px}
  .h-head-in{flex-wrap:wrap;height:auto;padding:14px 0;gap:12px 20px}
  .h-brand img{height:30px}
  .h-nav{margin-left:auto;gap:20px}
  .h-search{order:3;flex-basis:100%;max-width:none}
  .h-hero{padding:48px 0 40px}
  .h-hero h1{font-size:26px}
  .h-contact{font-size:16px;flex-direction:column;gap:4px}
  .h-contact span{display:none}
  .h-cats{padding:8px 0 56px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile-img{padding:14px}
  .tile-name{padding:10px 12px;font-size:14.5px}
  .h-order{padding:48px 0}
  .h-two{grid-template-columns:1fr}
  .h-foot-in{flex-direction:column}
}

/* --- fuller home: category strip, hero, popular, why, brands --- */
.h-strip{border-bottom:1px solid var(--line);background:#fff}
.h-strip-in{display:flex;gap:28px;height:44px;align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.h-strip-in::-webkit-scrollbar{display:none}
.h-strip a{color:var(--muted);font-size:14.5px;flex:none}
.h-strip a:hover{color:var(--ink);text-decoration:none}
.h-hero{padding:64px 0 56px;background:#f7f9f9}
.h-hero-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.h-lead{margin:16px 0 0;font-size:17px;color:var(--muted);max-width:30em}
.h-contact{margin:18px 0 0;font-size:17px}
.h-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.h-actions .h-btn{display:inline-block;color:#fff!important}
.h-actions .h-btn:hover{text-decoration:none!important}
.h-actions .h-btn-ghost{background:#fff!important;color:var(--accent-d)!important;border:1px solid #c9d1d5!important}
.h-actions .h-btn-ghost:hover{border-color:var(--accent)!important}
.h-pics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.h-pic{display:block;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.h-pic img{width:100%;height:100%;object-fit:contain}
.h-cats{padding:64px 0 24px}
.tile-all{background:var(--accent);border-color:var(--accent);color:#fff!important}
.tile-all:hover{background:var(--accent-d);border-color:var(--accent-d)}
.tile-all-in{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:20px;gap:6px}
.tile-all-in strong{font-size:18px;font-weight:600}
.tile-all-in span{font-size:14px;opacity:.85;line-height:1.4}
.tile-all-in em{font-style:normal;font-size:14.5px;font-weight:600;margin-top:10px}
.h-pop{padding:56px 0 24px}
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--ink)!important;background:#fff;padding:0 0 14px}
.pcard:hover{border-color:#c9d1d5;text-decoration:none!important}
.pcard-img{display:block;aspect-ratio:1;padding:22px}
.pcard-img img{width:100%;height:100%;object-fit:contain}
.pcard-name{padding:10px 16px 0;font-size:15px;font-weight:500;line-height:1.35}
.pcard-sub{padding:4px 16px 0;font-size:13.5px;color:var(--muted)}
.pcard-no{padding:6px 16px 0;font-size:12.5px;color:var(--muted)}
.h-why{padding:56px 0 8px}
.h-why h2,.h-brands h2{font-size:22px;margin-bottom:24px}
.why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why li{border-top:2px solid var(--accent);padding:16px 0 0;display:grid;gap:6px}
.why strong{font-weight:600;font-size:16px}
.why span{color:var(--muted);font-size:14.5px;line-height:1.5}
.h-brands{padding:56px 0 72px}
.brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.brands li{border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14.5px;color:var(--ink);background:#fff}
@media (max-width:860px){
  .h-hero-in{grid-template-columns:1fr;gap:36px}
  .h-pics{max-width:420px}
  .pcards{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .h-strip-in{gap:20px;height:42px}
  .h-hero{padding:40px 0 40px}
  .h-lead{font-size:16px}
  .h-contact{font-size:16px}
  .h-actions .h-btn{padding:11px 20px}
  .h-pics{gap:10px;max-width:none}
  .h-pic{padding:12px;border-radius:10px}
  .h-cats{padding:44px 0 8px}
  .tile-all-in{padding:14px}
  .tile-all-in strong{font-size:16px}
  .tile-all-in span{font-size:13px}
  .h-pop{padding:40px 0 8px}
  .pcards{grid-template-columns:1fr 1fr;gap:12px}
  .pcard-img{padding:14px}
  .pcard-name{padding:8px 12px 0;font-size:14px}
  .pcard-sub,.pcard-no{padding-left:12px;padding-right:12px}
  .h-why{padding:40px 0 0}
  .why{grid-template-columns:1fr;gap:16px}
  .h-brands{padding:40px 0 48px}
  .brands li{font-size:13.5px;padding:6px 12px}
}

/* --- hero background photo (replaces the 2x2 product photos) --- */
.h-hero{position:relative;isolation:isolate;padding:104px 0 96px;background:#eef3f3 url(/img/hero-bg.jpg) center/cover no-repeat}
.h-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.3) 100%)}
.h-hero-in{display:block}
.h-hero-text{max-width:620px}
.h-lead{color:#4d5a62}
.h-contact,.h-contact span{color:#4d5a62}
@media (max-width:640px){
  .h-hero{padding:48px 0 48px;background-position:82% center}
  .h-hero::before{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.74) 100%)}
}

/* --- hero text centered (owner request Oct 19) --- */
.h-hero-text{max-width:720px;margin:0 auto;text-align:center}
.h-hero::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 45%,rgba(255,255,255,.5) 100%)}
.h-contact,.h-actions{justify-content:center}
.h-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:640px){
  .h-hero{background-position:center}
  .h-hero::before{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.78) 100%)}
}

/* --- full centering + even background (Oct 19) --- */
.h-hero-text > *{margin-left:auto;margin-right:auto}
.h-lead{max-width:560px}
.h-hero{background-position:center}

/* --- moving brands strip (Oct 19) --- */
.brand-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brand-track{display:flex;flex-wrap:nowrap;width:max-content;gap:14px;animation:brandscroll 70s linear infinite;margin:0;padding:6px 0}
.brand-track li{white-space:nowrap;flex:0 0 auto}
.brand-marquee:hover .brand-track{animation-play-state:paused}
@keyframes brandscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.brand-track{animation-duration:200s}}

/* --- brand logos in the strip (Oct 19) --- */
.brand-track{gap:44px;align-items:center;padding:8px 0;animation-duration:75s}
.brand-track li.bl{background:none;border:0;padding:0;margin:0;border-radius:0;display:flex;align-items:center;height:40px}
.brand-track li.bl img{height:40px;width:auto;max-width:170px;object-fit:contain;display:block}
.brand-track li.bt{height:40px;display:flex;align-items:center}
@media (max-width:640px){
  .brand-track{gap:30px;animation-duration:70s}
  .brand-track li.bl,.brand-track li.bt{height:32px}
  .brand-track li.bl img{height:32px;max-width:130px}
}

/* --- brands strip: draggable / swipeable (Oct 19) --- */
.brand-marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.brand-marquee::-webkit-scrollbar{display:none}
.brand-marquee.dragging{cursor:grabbing}
.brand-marquee .brand-track{animation:none!important;transform:none!important}
.brand-marquee img{-webkit-user-drag:none;user-select:none;pointer-events:none}

/* contact details in order section (Oct 19) */
.h-contact-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.h-contact-list li{display:flex;gap:10px;flex-wrap:wrap}
.h-contact-list strong{min-width:72px;font-weight:600;color:inherit;opacity:.75}
/* [freeship] slim top bar, same look as the catalog page's (Oct 19) */
.home .util{background:#0b3b37;color:#cfe3e0;font-size:13.5px}
.home .util-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:7px;padding-bottom:7px}
.home .util a{color:#fff;font-weight:700;text-decoration:none}
.home .util-ship{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600}
.home .util-ship svg{width:17px;height:17px;fill:none;stroke:#f9a27a;stroke-width:1.8;stroke-linejoin:round;flex:none}
@media (max-width:640px){ .home .util-where,.home .util-callw{display:none} .home .util-in{white-space:nowrap;padding-left:16px;padding-right:16px} }
@media (max-width:420px){ .home .util{font-size:12.5px} .home .util-ship svg{display:none} }
/* [footer] same footer as styles.css (home does not load styles.css) (Oct 19) */
.sfoot{background:#0b3b37;color:#c4dcd8;font-size:15px;line-height:1.6;margin-top:0}
.sfoot a{color:#fff;text-decoration:none}
.sfoot a:hover{color:#ffd2bd;text-decoration:underline}
.sfoot-in{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;padding-top:54px;padding-bottom:46px;align-items:start}
.sfoot-contact ul{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.sfoot-brand img{height:38px;width:auto;display:block}
.sfoot-name{margin:14px 0 6px;color:#fff;font-weight:800;font-size:17px}
.sfoot-brand p:last-child{margin:0;max-width:30em}
.sfoot-col h2{margin:0 0 14px;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sfoot-col h2::after{content:"";display:block;width:26px;height:3px;border-radius:2px;background:#f26b30;margin-top:9px}
.sfoot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sfoot-col li a{color:#dcebe8}
.sfoot-contact li{display:flex;flex-direction:column;line-height:1.4;color:#fff}
.sfoot-contact li span{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:#8fb5af;font-weight:700}
.sfoot-contact li a{color:#fff}
.sfoot-bottom{border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:#9dbdb8}
.sfoot-bottom-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px}
.sfoot-bottom a{color:#9dbdb8}
@media (max-width:900px){.sfoot-in{grid-template-columns:1fr;gap:34px}}
@media (max-width:560px){.sfoot-in{gap:28px;padding-top:40px;padding-bottom:32px}.sfoot-contact ul{grid-template-columns:1fr;gap:14px}.sfoot-contact li a{word-break:break-word}}

/* --- brands strip moved above categories, full screen width (Oct 19, Shulem) --- */
.h-brands-top{padding:36px 0 8px}
.h-brands-top h2{margin-bottom:18px}
.h-brands-top .brand-marquee{width:100%;-webkit-mask-image:none;mask-image:none}
@media (max-width:700px){.h-brands-top{padding:28px 0 4px}}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h-brands-top{padding-top:28px}
.brand-track li.bl a{display:flex;align-items:center;height:100%;-webkit-user-drag:none}

/* [homemenu] phone header matches inner pages: sign-in icon, cart, menu button (Oct 19) */
.h-nav a.acct-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.h-nav a.acct-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.h-head{position:relative}
@media (max-width:900px){.h-nav a:not(.acct-link):not(.cart-link){display:none!important}.h-nav{display:flex;align-items:center;gap:14px!important;margin-left:auto}}
@media (max-width:520px){.h-nav a.acct-link span{display:none}.h-nav a.acct-link svg{width:24px;height:24px}}
.h-head{z-index:60}.h-head .m-panel{z-index:60;background:#fff}.h-head .m-panel a{display:block!important;border-bottom:1px solid #eef1f3}

/* [footlinks] quick links column (Oct 19) */
.sfoot-in{grid-template-columns:1fr .55fr 1.15fr}
@media (max-width:900px){.sfoot-in{grid-template-columns:1fr}}