/* ==========================================================================
   store-bento.css — showcase tiles + category tiles + roomy card grid; filters open as a drawer (desktop) / sheet (phone)
   ========================================================================== */
.st-bento .st-head{margin-bottom:20px}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px}
.sb{position:relative;overflow:hidden;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .22s ease}
@media (hover:hover) and (pointer:fine){
 a.sb:hover,a.sb:hover img{transform:none}
 a.sb:hover{border-color:color-mix(in srgb,var(--primary) 18%,var(--border))}
}
.sb-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-3)}.sb-label.lt{color:rgba(255,255,255,.85)}
/* hero: 2x2, light stage so white-background product photos blend (mix-blend-mode:multiply) */
.sb-hero{grid-column:span 2;grid-row:span 2;flex-direction:row;align-items:stretch;gap:0;padding:26px;border-color:var(--border);box-shadow:var(--shadow);
 background:radial-gradient(ellipse at 20% 30%,rgba(29,107,201,.07),transparent 55%),linear-gradient(150deg,#fff 0%,#f4f7fb 100%)}
.sb-hero>.sb-label{position:absolute;top:22px;inset-inline-start:26px;color:var(--primary)}
.sb-htx{flex:1.1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;position:relative;z-index:1}
.sb-hero h2{font-size:clamp(22px,1.8vw,26px);font-weight:900;letter-spacing:-.4px;line-height:1.3;text-align:right;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sb-hero p{color:var(--text-2);font-size:14.5px}
.sb-sws{display:flex;gap:8px}
.sb-hero .sw{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;cursor:pointer;padding:0;color:var(--text-3);min-width:44px;min-height:44px}
.sb-hero .sw span{width:28px;height:28px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1px var(--divider)}
.sb-hero .sw.on span{box-shadow:0 0 0 2px var(--primary)}.sb-hero .sw small{font-size:11px}
.sb-price{display:flex;align-items:baseline;gap:6px}.sb-price b{font-size:26px;font-weight:900}.sb-price span{font-size:13px;color:var(--text-3)}
.sb-btns{display:flex;gap:8px;flex-wrap:wrap}.sb-btns .btn{height:44px}
.sb-ghost{background:#fff;color:var(--text);border:1px solid var(--border)}.sb-ghost:hover{border-color:var(--primary);color:var(--primary)}
.sb-himg{flex:1;display:grid;place-items:center;position:relative}
.sb-himg::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(29,107,201,.07),transparent 70%)}
.sb-himg img{position:relative;max-height:330px;width:auto;object-fit:contain;mix-blend-mode:multiply}
/* sale tile */
.sb-sale{grid-row:span 2;background:linear-gradient(180deg,#fff 0%,#fff3f2 100%)}
.sb-sale .sb-label{color:var(--red)}
.b-sale.big{position:absolute;top:18px;inset-inline-end:18px;font-size:16px;padding:4px 12px;border-radius:12px}
.sb-simg{flex:1;min-height:0;display:grid;place-items:center}.sb-simg img{max-height:190px;width:auto;object-fit:contain}
.sb-sale h3{font-size:15.5px;line-height:1.65;font-weight:800}
.sb-sp{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.sb-sp s{width:100%;font-size:12.5px;color:var(--text-3)}.sb-sp b{font-size:20px;font-weight:900}.sb-sp span{font-size:12.5px;color:var(--text-3)}
/* highlight tile */
.sb-hrow{flex:1;display:flex;align-items:center;gap:12px;min-height:0}
.sb-hrow img{width:92px;height:92px;object-fit:contain;flex:none;mix-blend-mode:multiply}
.sb-hrow>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sb-hl h3{font-size:13.5px;line-height:1.75;font-weight:800;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sb-hl .sb-label{color:var(--orange)}
@media (min-width:1101px){
 .sb-grid--no-hl .sb-promo.p0,.sb-grid:not(:has(> .sb-hl)) .sb-promo.p0{grid-row:span 2}
 .sb-grid:not(:has(> .p0)) .sb-promo.p1{grid-column:span 1}
 .sb-grid:not(:has(> .sb-chat)) .sb-promo.p1{grid-column:1/-1}
}
/* promo tiles (row 3: parts + chat each span 2) */
.sb-promo.p1,.sb-chat{grid-column:span 2}
.sb-promo{padding:0;color:#fff;background:#0b1626;border:0}
.sb-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.sb-pscrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,30,.92),rgba(8,16,30,.35) 60%,rgba(8,16,30,.1))}
.sb-promo div{position:absolute;inset-inline:0;bottom:0;padding:18px;display:flex;flex-direction:column;gap:2px}
.sb-promo h3{font-size:20px;font-weight:900}.sb-promo p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.7}
.sb-go{display:inline-flex;align-items:center;gap:4px;color:#a7d3ef;font-weight:800;font-size:13.5px;margin-top:4px}
/* chat / banner skins follow the chosen type, even when the cell was another tile */
.sb.is-chat{background:linear-gradient(140deg,#2566c4 0%,#5552bd 100%);color:#fff;border:0;padding:20px}
.sb.is-chat>img,.sb.is-chat .sb-pscrim{display:none}
.sb.is-chat h3{font-size:18px;font-weight:800;margin-top:auto;color:#fff}
.sb.is-chat p{font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.75}
.sb.is-banner{padding:0;color:#fff;background:#0b1626;border:0}
.sb.is-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.sb.is-banner .sb-pscrim{position:absolute;inset:0;display:block;background:linear-gradient(to top,rgba(8,16,30,.92),rgba(8,16,30,.35) 60%,rgba(8,16,30,.1))}
.sb.is-banner>div{position:absolute;inset-inline:0;bottom:0;padding:18px;display:flex;flex-direction:column;gap:2px}
.sb.is-banner h3{font-size:20px;font-weight:900;color:#fff}
.sb.is-banner p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.7}
/* chat tile */
.sb-chat{background:linear-gradient(140deg,#2566c4 0%,#5552bd 100%);color:#fff;border:0}
.sb-chat .cic{position:absolute;top:16px;inset-inline-end:16px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.sb-chat h3{font-size:18px;font-weight:800;margin-top:auto}.sb-chat p{font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.75}
.live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(48,209,88,.3)}
/* category tiles */
.sb-cats{display:flex;gap:10px;margin:22px 0 18px;overflow-x:auto;scrollbar-width:none;padding:2px}
.sb-cats::-webkit-scrollbar{display:none}
.sb-cat{flex:none;display:inline-flex;align-items:center;gap:10px;height:56px;padding-inline:8px 16px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-size:14.5px;transition:.2s;--c:var(--primary);--cs:var(--accent-soft)}
.sb-cat span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cs);color:var(--c)}
.sb-cat em{font-style:normal;font-size:12px;font-weight:800;color:var(--c);background:var(--cs);border-radius:999px;padding:1px 8px}
.sb-cat:hover{border-color:var(--c)}
.sb-cat.on{background:var(--cs);border-color:color-mix(in srgb,var(--c) 28%,var(--border));box-shadow:none}
.sb-cat.all span{background:var(--navy);color:#fff}
/* roomy cards */
.st-bento .st-items.is-grid{grid-template-columns:repeat(4,1fr);gap:20px}
.st-bento .sc{border-radius:var(--r-xl)}
@media (max-width:1100px){.sb-grid{grid-template-columns:repeat(3,1fr)}.sb-hero{grid-column:span 3}.sb-sale{grid-row:span 2}.sb-promo.p1{grid-column:span 1}.sb-grid:has(> .sb-hl) .sb-chat,.sb-grid:not(.sb-grid--no-hl) .sb-chat{grid-column:span 1}.st-bento .st-items.is-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
 .sb-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
 .sb{border-radius:22px;padding:16px}
 .sb-hero{grid-column:1/-1;grid-row:auto;flex-direction:column-reverse;padding:20px 18px 18px;gap:6px}
 .sb-htx{align-items:stretch}
 .sb-hero>.sb-label{top:16px;inset-inline-start:18px}
 .sb-himg{height:220px}.sb-himg::before{width:200px;height:200px}.sb-himg img{max-height:210px}
 .sb-hero h2{font-size:clamp(20px,5vw,24px)}
 .sb-btns .btn{flex:1;height:48px}
 .sb-sale{grid-row:auto;min-height:250px}.sb-simg img{max-height:110px}.sb-sale h3{font-size:13.5px}.b-sale.big{top:14px;inset-inline-end:14px;font-size:13px}
 .sb-sp b{font-size:16px}
 .sb-hl{min-height:250px}.sb-hrow{flex-direction:column;align-items:stretch}.sb-hrow img{width:100%;height:100px}.sb-hl h3{font-size:13px}
 .sb-promo.p1{grid-column:auto}
 .sb-promo{min-height:170px}.sb-promo h3{font-size:18px}.sb-promo p{display:none}
 .sb-chat{grid-column:1/-1;min-height:140px}
 .sb-cats{margin:16px -16px 12px;padding:2px 16px}
 .sb-cat{height:50px;font-size:14px}.sb-cat span{width:36px;height:36px}
 .st-bento .st-items.is-grid{grid-template-columns:1fr 1fr;gap:12px}
 .st-bento .sc{border-radius:18px}
}