/* =====================================================================
   SEMA BAY service card · built from the owner's design (Business Services card)
   Sizes itself to its own width: narrow (4 per row) stacks the contact icons over their labels;
   wide cards follow the design's side-by-side layout.
   ===================================================================== */
.ssc{container-type:inline-size;position:relative;display:flex;flex-direction:column;height:100%;min-width:0;background:#f7faff;overflow:visible;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}
.ssc *{box-sizing:border-box}
.ssc button{font:inherit;cursor:pointer;color:inherit}
.ssc a{text-decoration:none}
.ssc :focus-visible{outline:3px solid #1f6fff;outline-offset:2px}
/* photo with the category pill and heart */
.ssc-ph{position:relative;aspect-ratio:1226/600;background:#e9eef7;overflow:hidden;flex:none}
.ssc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ssc-ph .ssc-emo{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(44px,16cqw,110px)}
.ssc-pill{position:absolute;left:4%;top:5.5%;display:inline-flex;align-items:center;gap:clamp(6px,1.6cqw,16px);max-width:72%;padding:clamp(5px,1.3cqw,14px) clamp(10px,3cqw,30px);border-radius:999px;background:linear-gradient(100deg,#0b2ea8,#0a3fd0);color:#fff;font-weight:700;font-size:clamp(11px,2.7cqw,26px);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.ssc-pill svg{width:clamp(14px,3.6cqw,38px);height:clamp(14px,3.6cqw,38px);flex:none}
.ssc-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-heart{position:absolute;right:3.5%;top:5%;width:clamp(34px,8.6cqw,84px);height:clamp(34px,8.6cqw,84px);border:0;border-radius:50%;background:#fff;display:grid;place-items:center;padding:0;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.ssc-heart svg{width:52%;height:52%}
.ssc-heart[aria-pressed="true"] path{fill:#ef2d3d;stroke:#ef2d3d}
.ssc-st{position:absolute;left:4%;bottom:6%;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:#6b7695}
/* contact row */
.ssc-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.1cqw,12px);padding:clamp(8px,1.6cqw,18px) clamp(8px,1.1cqw,14px) 0}
.ssc-acts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ssc-c{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4cqw,16px);min-height:clamp(40px,9.8cqw,120px);padding:6px;border:0;border-radius:clamp(10px,1.6cqw,16px);overflow:hidden;font-weight:700;font-size:clamp(11px,2.7cqw,28px);white-space:nowrap;transition:filter .15s,transform .1s}
.ssc-c:hover{filter:brightness(.97)}
.ssc-c:active{transform:scale(.98)}
.ssc-c img,.ssc-c svg{width:clamp(20px,6.6cqw,74px);height:clamp(20px,6.6cqw,74px);flex:none;object-fit:contain}
.ssc-c i{width:1.5px;align-self:stretch;margin:14% 0;background:currentColor;opacity:.35}
.ssc-call{background:linear-gradient(100deg,#0b45e0 0%,#1259f0 60%,#ff7a12 92%,#f05a10 100%);color:#fff}
.ssc-call::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:22%;background:linear-gradient(115deg,transparent 0 40%,rgba(255,138,20,.95) 41% 100%)}
.ssc-call>*{position:relative;z-index:1}
.ssc-wa{background:#e8f7ed;color:#12913f}
.ssc-chat{background:#e6efff;color:#0a3fd0}
.ssc-tt{background:#fdebf0;color:#111}
/* business + location */
.ssc-info{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(8px,2cqw,24px);margin:clamp(8px,1.5cqw,18px) clamp(8px,1.1cqw,14px) 0;padding:clamp(10px,2cqw,24px);border-radius:clamp(12px,1.8cqw,18px);background:#fff;box-shadow:0 0 0 1px #e8eef8}
.ssc-biz{min-width:0;display:flex;flex-direction:column;gap:clamp(4px,1cqw,12px)}
.ssc-name{display:flex;align-items:center;gap:6px;margin:0;font-size:clamp(16px,4.4cqw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.08;color:#0d1442}
.ssc-name span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ssc-name img{width:clamp(18px,4.6cqw,56px);height:clamp(18px,4.6cqw,56px);flex:none}
.ssc-tag{margin:0;font-weight:700;line-height:1.15;color:#e8331b}
.ssc-badge{display:flex;align-items:center;gap:clamp(6px,1.4cqw,16px);min-width:0}
.ssc-badge img{flex:none}
.ssc-badge i{width:1.5px;align-self:stretch;margin:12% 0;background:#c9d2e3}
.ssc-badge b{padding:clamp(4px,1cqw,12px) clamp(8px,1.6cqw,22px);border-radius:clamp(8px,1.2cqw,14px);background:#fdf1d6;color:#0a2fa8;font-weight:700;font-size:clamp(11.5px,2.5cqw,30px);line-height:1.15;min-width:0}
.ssc-loc{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(8px,2cqw,24px);align-content:start;min-width:0;border-left:1.5px solid #e3e9f3;padding-left:clamp(10px,2cqw,24px)}
.ssc-loc>img{grid-row:1/3;object-fit:contain}
.ssc-loc b{font-size:clamp(12px,2.5cqw,30px);font-weight:700;color:#0d1442}
.ssc-addr{margin:2px 0 0;font-size:clamp(12px,2.5cqw,30px);line-height:1.3;color:#1f5fd6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ssc-map{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:clamp(6px,1.4cqw,16px);margin-top:clamp(6px,1.4cqw,16px);padding:clamp(4px,.9cqw,10px) clamp(10px,1.6cqw,22px);border-radius:clamp(8px,1.2cqw,14px);background:#e3edfc;color:#0a2fa8;font-weight:700;font-size:clamp(12px,2.6cqw,30px)}
.ssc-map img{width:clamp(18px,4.6cqw,56px);height:clamp(18px,4.6cqw,56px)}
/* hours · request · edit */
.ssc-foot{display:flex;align-items:center;gap:clamp(8px,2cqw,24px);margin:clamp(8px,1.6cqw,18px) clamp(8px,1.1cqw,14px) 0;padding-top:clamp(8px,1.6cqw,18px);border-top:1.5px solid #e3e9f3}
.ssc-hours{display:flex;align-items:center;gap:clamp(8px,1.8cqw,22px);flex:none;min-width:0}
.ssc-hours img{width:clamp(30px,8cqw,100px);height:clamp(30px,8cqw,100px)}
.ssc-hours small{display:block;font-size:clamp(11.5px,2.2cqw,26px);font-weight:700;color:#0d1442}
.ssc-hours b{display:block;font-size:clamp(15px,4.6cqw,58px);font-weight:700;letter-spacing:-.02em;color:#12913f;line-height:1.05;white-space:nowrap}
.ssc-req{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2cqw,26px);min-height:clamp(42px,10.6cqw,130px);border:0;border-radius:clamp(10px,1.6cqw,16px);background:linear-gradient(100deg,#0a4fe0,#1060f5 60%,#0b45d0);color:#fff!important;font-weight:700;font-size:clamp(13px,3.1cqw,36px);white-space:nowrap;box-shadow:0 12px 22px -12px rgba(10,79,224,.7)}
.ssc-req svg{width:clamp(20px,5.4cqw,66px);height:clamp(20px,5.4cqw,66px);flex:none}
.ssc-edit{display:flex;align-items:center;gap:clamp(6px,1.4cqw,16px);min-height:clamp(38px,7.6cqw,92px);padding:0 clamp(10px,2cqw,26px);border:1.5px solid #1f5fd6;border-radius:clamp(10px,1.4cqw,14px);background:#fff;color:#0a3fd0!important;font-weight:700;font-size:clamp(12px,2.8cqw,34px)}
.ssc-edit svg{width:clamp(16px,4cqw,46px);height:clamp(16px,4cqw,46px)}
.ssc-spacer{flex:1 1 auto;min-height:clamp(8px,1.5cqw,16px)}
.ssc-band{flex:none;height:clamp(26px,9cqw,130px);margin-top:clamp(8px,1.6cqw,18px);background:url(../imgs/service-card/band.webp) center/cover no-repeat}
.ssc .sbo-pop{position:absolute;z-index:30;min-width:210px}
/* ---------- narrow cards (4 per row): stack, so nothing is cramped ---------- */
@container (max-width:479px){
  .ssc-c{flex-direction:column;gap:3px;font-size:11px;padding:6px 2px}
  .ssc-c i{display:none}
  .ssc-c img,.ssc-c svg{width:24px;height:24px}
  .ssc-call::after{width:30%}
  .ssc-info{grid-template-columns:1fr}
  .ssc-loc{border-left:0;padding-left:0;border-top:1.5px solid #e3e9f3;padding-top:8px}
  .ssc-foot{flex-wrap:wrap}
  .ssc-hours{flex:1 1 auto}
  .ssc-req{flex:1 0 100%;order:3}
  .ssc-edit{order:2}
}
@media (prefers-reduced-motion:reduce){
  .ssc-c{transition:none}
}
/* ---------- grids on biz.html: four per row, equal heights, msn-style spacing ---------- */
#bzProducts.bz-grid,.sbo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:1fr;align-items:stretch}
#bzProducts.bz-grid>*,.sbo-grid>*{height:100%}
.sbn{height:100%}
.sbn-body{flex:1 1 auto}
.sbn-acts{margin-top:auto}
@media (max-width:1240px){
  #bzProducts.bz-grid,.sbo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:920px){
  #bzProducts.bz-grid,.sbo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  #bzProducts.bz-grid,.sbo-grid{grid-template-columns:1fr!important;grid-auto-rows:auto}
}
/* Request Service form */
.ssr-wrap{position:fixed;inset:0;z-index:2147483400;display:grid;place-items:center;padding:16px;background:rgba(13,20,66,.5)}
.ssr{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border-radius:20px;background:#fff;box-shadow:0 30px 70px -20px rgba(13,20,66,.6);font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#0d1442}
.ssr h2{margin:0;font-size:22px;font-weight:700;color:#0a2fa8}
.ssr-sub{margin:4px 0 14px;color:#6b7695;font-size:14px}
.ssr label{display:block;margin-top:10px;font-weight:700;font-size:14px}
.ssr label small{font-weight:500;color:#6b7695}
.ssr input,.ssr textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1.5px solid #dfe6f3;border-radius:10px;font:inherit;font-size:15px;color:#0d1442;background:#fff;box-sizing:border-box}
.ssr input:focus,.ssr textarea:focus{outline:0;border-color:#1f6fff;box-shadow:0 0 0 3px rgba(31,111,255,.14)}
.ssr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ssr-err{min-height:18px;margin:8px 0 0;color:#e3121b;font-weight:600;font-size:13px}
.ssr-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:8px}
.ssr-btns button{height:46px;border:0;border-radius:12px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ssr-btns .no{background:#eef2f9;color:#0d1442}
.ssr-btns .yes{background:linear-gradient(100deg,#0a4fe0,#1060f5);color:#fff}
/* the card's own text sizes win over the general "buttons inherit the font" rule */
.ssc .ssc-c{font-size:clamp(11px,2.35cqw,26px);font-weight:700;gap:clamp(5px,1.1cqw,14px)}
.ssc .ssc-c img,.ssc .ssc-c svg{width:clamp(20px,5.6cqw,66px);height:clamp(20px,5.6cqw,66px)}
.ssc .ssc-req{font-size:clamp(13px,3.2cqw,38px);font-weight:700}
.ssc .ssc-edit{font-size:clamp(12px,2.8cqw,34px);font-weight:700}
.ssc .ssc-heart{font:inherit}
@container (max-width:479px){
  .ssc .ssc-c{font-size:11px}
  .ssc .ssc-c img,.ssc .ssc-c svg{width:24px;height:24px}
  .ssc .ssc-req{font-size:14px}
}
.ssc-badge img{width:clamp(28px,8.6cqw,100px);height:clamp(28px,8.6cqw,100px)}
.ssc-loc>img{width:clamp(28px,8cqw,100px);height:clamp(34px,9.4cqw,120px)}
.ssc-tag{font-size:clamp(12.5px,2.8cqw,34px)}
/* four per row also wins over the product card's older grid rule */
.sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1240px){
  .sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc){grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:920px){
  .sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  .sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc){grid-template-columns:1fr!important}
}
/* equal heights without empty gaps: a product card's photo grows to fill the extra height */
.sbo-grid .sbn,#bzProducts .sbn{display:flex;flex-direction:column}
.sbo-grid .sbn-ph,#bzProducts .sbn-ph{flex:1 1 auto;aspect-ratio:auto;min-height:calc(100cqw * 700 / 1312)}
.sbo-grid .sbn-body,#bzProducts .sbn-body{flex:0 0 auto}
.sbo-grid .sbn-ph img,#bzProducts .sbn-ph img{position:absolute;inset:0;width:100%;height:100%}
.sbo-grid .sbn-ph.fit img,#bzProducts .sbn-ph.fit img{object-fit:contain}
/* msn-style spacing: cards sit close together with a small, even gap */
.sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc),#bzProducts.bz-grid,.sbo-grid{gap:12px!important}
@media (max-width:920px){
  .sbo-grid:has(.sbn),.sbo-grid:has(.ssc),#bzProducts.bz-grid:has(.sbn),#bzProducts.bz-grid:has(.ssc),#bzProducts.bz-grid,.sbo-grid{gap:10px!important}
}
.sbn,.ssc{border-radius:16px}
.sbn-ph{border-radius:16px 16px 0 0}
.ssc-ph{border-radius:16px 16px 0 0}
.ssc-band{border-radius:0 0 16px 16px}
.sbn-foot{border-radius:0 0 16px 16px}
/* the banner's Add product button: dark label on the white button */
.sbo .sbo-add,.sbo .sbo-add span{color:#0d1442!important}
/* V297: the service name leads; the business that offers it sits under it, smaller */
.ssc-by{display:flex;align-items:center;gap:6px;min-width:0;margin:0;font-size:clamp(13px,3.1cqw,36px);font-weight:700;line-height:1.2;color:#0a3fd0;text-decoration:none}
.ssc-by svg{width:clamp(16px,3.6cqw,40px);height:clamp(16px,3.6cqw,40px);flex:none}
.ssc-by img{width:clamp(16px,3.6cqw,40px);height:clamp(16px,3.6cqw,40px);flex:none}
.ssc-by span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.ssc-by:hover span{text-decoration:underline}