/* =====================================================================
   SEMA BAY product card · built from the owner's design (Canon EOS 90D card)
   The card sizes itself to its own width (container queries):
     wide card  (≥ 400px): the design as drawn, labelled buttons
     narrow card (< 400px, e.g. two per row on a phone): icon buttons, short footer
   Views: owner (Edit ▾ + Share, profit) · customer (Call, TikTok, main action)
   ===================================================================== */
.sbn{container-type:inline-size;position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:20px;box-shadow:0 14px 34px -18px rgba(20,45,110,.35),0 0 0 1px rgba(20,45,110,.06);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#0d1442;text-align:left}
.sbn *{box-sizing:border-box}
.sbn button{font:inherit;cursor:pointer;color:inherit}
/* photo */
.sbn-ph{position:relative;aspect-ratio:1312/700;background:#eef2f8;overflow:hidden}
.sbn-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sbn-ph .sbn-noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:42px}
.sbn-st{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:#14206b;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.sbn-st.hid{background:#6b7695}
.sbn-st.out{background:#e3121b}
.sbn-st.low{background:#ff8a14}
/* body */
.sbn-body{display:flex;flex-direction:column;gap:clamp(6px,1.6cqw,14px);padding:clamp(10px,3cqw,26px) clamp(10px,2.4cqw,26px) clamp(10px,2cqw,18px)}
.sbn-name{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.18;color:#0d1442;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbn-row{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(4px,1.6cqw,16px)}
.sbn-price{font-weight:700;color:#0b8a3e;letter-spacing:-.02em;line-height:1}
.sbn-old{font-weight:700;color:#8f99b3;text-decoration:line-through}
.sbn-sep{width:1.5px;align-self:stretch;min-height:18px;background:#dde3ee}
.sbn-meta{display:inline-flex;align-items:center;gap:clamp(4px,.9cqw,8px);font-weight:600;white-space:nowrap}
.sbn-meta svg{width:clamp(15px,3.6cqw,30px);height:clamp(15px,3.6cqw,30px);flex:none}
.sbn-stock{color:#0b8a3e}
.sbn-stock.low{color:#e86a0c}
.sbn-stock.out{color:#e3121b}
.sbn-rate b{color:#0d1442;font-weight:700}
.sbn-rate small{color:#8f99b3;font-size:.92em;font-weight:600}
/* buttons */
.sbn-acts{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:clamp(6px,1.6cqw,16px);margin-top:clamp(2px,.6cqw,6px)}
.sbn-acts.owner{grid-template-columns:1.2fr 2fr}
.sbn-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.6cqw,6px);min-height:clamp(42px,11cqw,92px);padding:4px;border:0;border-radius:clamp(10px,1.8cqw,18px);font-size:clamp(11px,2.5cqw,20px);font-weight:700;text-decoration:none;color:#0d1442;transition:filter .15s,transform .1s}
.sbn-b:hover{filter:brightness(.97)}
.sbn-b:active{transform:scale(.98)}
.sbn-b svg{flex:none}
.sbn-call{background:#e6f8ee}
.sbn-tt{background:#fcebf1}
.sbn-edit{background:#fff3e3;flex-direction:row;gap:clamp(4px,1.2cqw,12px);font-size:clamp(12px,2.8cqw,22px)}
.sbn-edit .chev{width:clamp(12px,2cqw,18px)!important;height:clamp(12px,2cqw,18px)!important}
.sbn-main{flex-direction:row;gap:clamp(6px,1.8cqw,16px);background:linear-gradient(100deg,#1e8bff 0%,#0a5ff0 60%,#0a4fe0 100%);color:#fff!important;font-weight:700;box-shadow:0 12px 22px -12px rgba(10,95,240,.7)}
.sbn-main .chev{width:clamp(12px,2.2cqw,20px)!important;height:clamp(12px,2.2cqw,20px)!important}
.sbn-main.svc{background:linear-gradient(100deg,#21c45a,#0d9a44)}
.sbn-main.ask{background:linear-gradient(100deg,#ff8a14,#ef3d12)}
.sbn-main[disabled]{background:#c9d1e0;box-shadow:none;cursor:not-allowed}
/* footer */
.sbn-foot{display:flex;align-items:center;gap:clamp(6px,1.6cqw,16px);padding:clamp(8px,2cqw,16px) clamp(10px,2.4cqw,26px);border-top:1.5px solid #eef1f7;background:#fbfcfe;min-width:0}
.sbn-biz{display:flex;align-items:center;gap:clamp(6px,1.6cqw,14px);min-width:0;flex:1 1 auto;font-weight:700;color:#0d1442;text-decoration:none}
.sbn-biz i{flex:none;display:grid;place-items:center;border-radius:clamp(7px,1.4cqw,14px)}
.sbn-biz span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbn-loc{display:flex;align-items:center;gap:6px;color:#6b7695;font-weight:600;white-space:nowrap;flex:none}
.sbn-wa{display:flex;align-items:center;gap:6px;flex:none;border:0;background:none;padding:0;color:#0b8a3e;font-weight:700;text-decoration:none}
.sbn-wa .chev{width:clamp(10px,1.8cqw,16px)!important;height:clamp(10px,1.8cqw,16px)!important;color:#0d1442}
.sbn-foot .sbn-sep{min-height:20px}
.sbn :focus-visible{outline:3px solid #1f6fff;outline-offset:2px}
/* ---------- narrow cards (two per row on phones): icons, short footer ---------- */
@container (max-width:399px){
  .sbn-row{row-gap:6px}
  .sbn-row .sbn-sep{display:none}
  .sbn-row .sbn-meta{flex-basis:auto}
  .sbn-acts{grid-template-columns:repeat(3,1fr) 1.6fr;gap:6px}
  .sbn-acts.owner{grid-template-columns:1fr 1.3fr}
  .sbn-b .lbl{display:none}
  .sbn-b{min-height:40px;border-radius:12px}
  .sbn-main .lbl{display:inline;font-size:12.5px}
  .sbn-main .chev{display:none}
  .sbn-edit .lbl{display:inline;font-size:12.5px}
  .sbn-loc,.sbn-foot .sbn-sep,.sbn-wa .txt,.sbn-wa .chev{display:none}
}
@container (max-width:250px){
  .sbn-acts{grid-template-columns:repeat(3,1fr)}
  .sbn-acts .sbn-main{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .sbn-b{transition:none}
}
/* menus open on top of the card */
.sbn{overflow:visible}
.sbn-ph{border-radius:20px 20px 0 0}
.sbn-foot{border-radius:0 0 20px 20px}
.sbn .sbo-pop{position:absolute;z-index:30;min-width:210px}
/* owner grid: room for the new card */
.sbo-grid:has(.sbn){grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:18px!important}
@media (max-width:640px){
  .sbo-grid:has(.sbn){grid-template-columns:1fr 1fr!important;gap:10px!important}
}
/* illustrations / cut-out images: whole and centred on a light background */
.sbn-ph.fit{background:linear-gradient(160deg,#f6f8fc,#eaf0f8)}
.sbn-ph.fit img{object-fit:contain;padding:10px 14px}
/* products without a photo: their emoji, centred */
.sbn-ph .sbo-emo{position:absolute!important;inset:0!important;left:0!important;top:0!important;width:auto!important;height:auto!important;transform:none!important;display:grid!important;place-items:center;font-size:clamp(46px,17cqw,110px)!important;line-height:1;margin:0!important;opacity:1;filter:drop-shadow(0 8px 12px rgba(13,20,66,.18))}
/* shop grid: room for the card */
.bz-grid:has(.sbn){grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:18px!important}
@media (max-width:640px){
  .bz-grid:has(.sbn){grid-template-columns:1fr 1fr!important;gap:10px!important}
}
.sbn.is-off .sbn-ph{filter:grayscale(.6);opacity:.8}
/* customer buttons: Call · TikTok · main button gets the rest of the row */
.sbn-acts.cust{grid-template-columns:1fr 1fr 2.2fr}
.sbn-acts.cust.no-tt{grid-template-columns:1fr 3fr}
@container (max-width:399px){
  .sbn-acts.cust{grid-template-columns:1fr 1fr 2.4fr}
  .sbn-acts.cust.no-tt{grid-template-columns:1fr 3fr}
  .sbn-main .lbl{white-space:nowrap}
}
@container (max-width:250px){
  .sbn-acts.cust{grid-template-columns:1fr 1fr}
  .sbn-acts.cust .sbn-main{grid-column:1/-1}
}
/* owner card = the design exactly: Call · TikTok · Edit ▾ · Add to Cart */
.sbn-acts.cust.own{grid-template-columns:1fr 1fr 1.15fr 2fr}
.sbn-acts.cust.own.no-tt{grid-template-columns:1fr 1.15fr 2fr}
.sbn-split{flex-direction:row!important;gap:0!important;padding:0!important;overflow:hidden}
.sbn-split button{border:0;background:transparent;height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.2cqw,12px);color:#0d1442;font:inherit;font-weight:700;cursor:pointer}
.sbn-split .sbn-e1{flex:1;padding:0 4px 0 8px}
.sbn-split .sbn-e2{flex:none;width:clamp(22px,4.5cqw,40px);border-left:1px solid rgba(232,106,12,.18)}
.sbn-split button:hover{background:rgba(255,138,20,.08)}
@container (max-width:399px){
  .sbn-acts.cust.own{grid-template-columns:1fr 1fr 1.2fr 1.9fr}
  .sbn-acts.cust.own.no-tt{grid-template-columns:1fr 1.3fr 2fr}
  .sbn-split .lbl{display:none}
  .sbn-split .sbn-e2{width:18px}
}
@container (max-width:250px){
  .sbn-acts.cust.own{grid-template-columns:1fr 1fr 1.2fr}
  .sbn-acts.cust.own .sbn-main{grid-column:1/-1}
}
/* proportions matched to the design */
.sbn-name{font-size:clamp(14px,3.95cqw,32px)}
.sbn-price{font-size:clamp(18px,5.5cqw,44px)}
.sbn-old{font-size:clamp(12px,3.2cqw,26px)}
.sbn-meta{font-size:clamp(12px,3.15cqw,26px)}
.sbn-rate svg{width:clamp(16px,4.2cqw,34px);height:clamp(16px,4.2cqw,34px)}
.sbn-b svg{width:clamp(20px,4.8cqw,42px);height:clamp(20px,4.8cqw,42px)}
.sbn-main{font-size:clamp(13px,3.6cqw,30px)}
.sbn-main svg:first-child{width:clamp(22px,5.4cqw,48px);height:clamp(22px,5.4cqw,48px)}
.sbn-split svg{width:clamp(18px,4.4cqw,38px);height:clamp(18px,4.4cqw,38px)}
.sbn-split .sbn-e1{font-size:clamp(12px,3.1cqw,26px)}
.sbn-biz{font-size:clamp(12px,2.9cqw,24px)}
.sbn-biz i{background:transparent;width:clamp(26px,5.6cqw,50px);height:clamp(26px,5.6cqw,50px)}
.sbn-biz i svg{width:100%;height:100%}
.sbn-loc{font-size:clamp(12px,2.8cqw,23px)}
.sbn-loc svg{width:clamp(14px,3.4cqw,30px);height:clamp(14px,3.4cqw,30px)}
.sbn-wa{font-size:clamp(12px,2.9cqw,24px)}
.sbn-wa svg{width:clamp(20px,5cqw,44px);height:clamp(20px,5cqw,44px)}
/* the card's own button text sizes win over the general "buttons inherit the font" rule */
.sbn .sbn-b{font-size:clamp(11px,2.8cqw,22px)}
.sbn .sbn-main{font-weight:700}
.sbn .sbn-split .sbn-e1{font-size:clamp(12px,3.1cqw,26px)}
@container (max-width:399px){
  .sbn .sbn-main .lbl,.sbn .sbn-edit .lbl{font-size:12.5px}
}
.sbn .sbn-main{font-size:clamp(13px,3.3cqw,28px)}
.sbn .sbn-b .lbl{white-space:nowrap}
/* narrow owner card without TikTok: there is room for the word "Edit" */
@container (max-width:399px) and (min-width:240px){
  .sbn .sbn-acts.own.no-tt .sbn-split .lbl{display:inline;font-size:12.5px}
}
/* ===== the full design down to 300px wide (4 per row on laptops); compact only on very narrow cards ===== */
@container (min-width:300px){
  .sbn-row .sbn-sep{display:block}
  .sbn-loc,.sbn-foot .sbn-sep{display:flex}
  .sbn-wa .txt,.sbn-wa .chev{display:inline-block}
  .sbn-acts.cust{grid-template-columns:1fr 1fr 2fr}
  .sbn-acts.cust.no-tt{grid-template-columns:1fr 2.4fr}
  .sbn-acts.cust.own{grid-template-columns:.9fr .9fr 1.1fr 1.9fr}
  .sbn-acts.cust.own.no-tt{grid-template-columns:.9fr 1.1fr 1.9fr}
  .sbn .sbn-call,.sbn .sbn-tt{font-size:11.5px}
  .sbn .sbn-b svg{width:22px;height:22px}
  .sbn .sbn-main{gap:6px}
  .sbn .sbn-main svg:first-child{width:22px;height:22px}
  .sbn .sbn-split .sbn-e1{font-size:12.5px;gap:4px}
  .sbn .sbn-split svg{width:18px;height:18px}
  .sbn-foot{gap:8px;padding:9px 12px}
  .sbn-biz{font-size:12.5px;gap:6px}
  .sbn-biz i{width:24px;height:24px}
  .sbn-loc{font-size:12px;gap:4px;min-width:0;overflow:hidden}
  .sbn-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbn-loc svg{width:14px;height:14px;flex:none}
  .sbn-wa{font-size:12.5px;gap:4px}
  .sbn-wa svg{width:20px;height:20px}
  .sbn-meta{font-size:12.5px}
  .sbn-meta svg{width:15px;height:15px}
}
@container (min-width:420px){
  .sbn .sbn-call,.sbn .sbn-tt{font-size:13px}
  .sbn .sbn-main{font-size:15px}
  .sbn .sbn-b svg{width:26px;height:26px}
  .sbn-biz{font-size:14px}
  .sbn-loc{font-size:13.5px}
  .sbn-wa{font-size:14px}
}
/* ---------- the full design at 4 per row (card 300px and wider): every label, location and WhatsApp ---------- */
@container (min-width:300px){
  .sbn .sbn-row .sbn-sep{display:block}
  .sbn .sbn-b .lbl,.sbn .sbn-split .lbl,.sbn .sbn-edit .lbl{display:inline}
  .sbn .sbn-main .chev{display:block}
  .sbn .sbn-acts.cust.own{grid-template-columns:1fr 1fr 1.3fr 2fr;gap:6px}
  .sbn .sbn-acts.cust.own.no-tt{grid-template-columns:1fr 1.3fr 2fr}
  .sbn .sbn-acts.cust{grid-template-columns:1fr 1fr 2.2fr;gap:6px}
  .sbn .sbn-acts.cust.no-tt{grid-template-columns:1fr 2.6fr}
  .sbn .sbn-call,.sbn .sbn-tt{flex-direction:column;gap:2px}
  .sbn .sbn-b{min-height:clamp(48px,14cqw,92px)}
  .sbn .sbn-b .lbl{font-size:clamp(11px,3cqw,22px)}
  .sbn .sbn-main{font-size:clamp(12px,3.4cqw,28px)}
  .sbn .sbn-loc,.sbn .sbn-wa{display:flex}
  .sbn .sbn-foot .sbn-sep{display:block}
  .sbn .sbn-wa .txt{display:inline}
  .sbn .sbn-wa .chev{display:block}
  .sbn .sbn-foot{gap:clamp(5px,1.4cqw,16px)}
  .sbn .sbn-biz{flex:1 1 auto;min-width:0}
  .sbn .sbn-loc{min-width:0;flex:0 1 auto}
  .sbn .sbn-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbn .sbn-biz,.sbn .sbn-loc,.sbn .sbn-wa{font-size:clamp(11px,2.9cqw,24px)}
}
@container (min-width:300px){
  /* price · stock · rating on one line, as in the design */
  .sbn .sbn-row{flex-wrap:nowrap;gap:clamp(4px,1.4cqw,16px);min-width:0}
  .sbn .sbn-price{font-size:clamp(16px,5.6cqw,44px);flex:none}
  .sbn .sbn-old{font-size:clamp(10px,3.3cqw,26px);flex:none}
  .sbn .sbn-meta{font-size:clamp(10px,3.3cqw,26px);gap:clamp(3px,.8cqw,8px);min-width:0}
  .sbn .sbn-meta svg{width:clamp(12px,3.8cqw,32px);height:clamp(12px,3.8cqw,32px)}
  .sbn .sbn-meta span{overflow:hidden;text-overflow:ellipsis}
  .sbn .sbn-row .sbn-sep{min-height:16px}
  /* Edit ▾: the arrow is always visible */
  .sbn .sbn-split .sbn-e2{width:clamp(18px,5cqw,40px)}
  .sbn .sbn-split .sbn-e2 svg{width:clamp(12px,3.4cqw,22px)!important;height:clamp(12px,3.4cqw,22px)!important}
}
@container (min-width:300px) and (max-width:349px){
  .sbn .sbn-acts.cust.own{grid-template-columns:.9fr .9fr 1.45fr 1.9fr}
  .sbn .sbn-split .sbn-e1{gap:3px;padding:0 2px 0 5px}
}
.sbn .sbn-split .sbn-e2{flex:none;min-width:18px}
/* V297: business name opens that business; the pin opens the map. On narrow cards the pin stays as an icon so the business name has room */
a.sbn-biz:hover span,a.sbn-loc:hover span{text-decoration:underline}
a.sbn-loc{text-decoration:none}
@container (max-width:419px){
  .sbn-foot .sbn-loc{display:flex;flex:none}
  .sbn-foot .sbn-sep{display:block}
  .sbn-foot .sbn-loc span{display:none}
  .sbn-foot .sbn-loc svg{width:20px;height:20px}
}
/* V327: bigger photos, never cropped. The photo area is taller (portrait) and shows the WHOLE photo; the space
   around it is a soft blurred copy of the same photo, so tall, wide or small photos all look intentional. */
.sbn .sbn-ph{aspect-ratio:4/5!important}
.sbn .sbn-ph .sbn-blur{position:absolute;inset:-14%;background-size:cover;background-position:center;filter:blur(18px) saturate(1.1);opacity:.55;transform:scale(1.05)}
.sbn .sbn-ph img.sbn-fit{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;z-index:1}
.sbn .sbn-ph>*:not(.sbn-blur):not(img){z-index:2}