/* Qasim Mobiles — shared styles, extracted from the v1 single-file build (build 85) */

:root{
  --navy:#0B2353; --orange:#EEAE25;
  --bg:#f2f4f7; --card:#fff; --ink:#0f172a; --ink-soft:#4b5563; --ink-faint:#8b93a1;
  --line:#e3e7ee;
  --brand:#0B2353; --brand-dark:#071a40; --brand-soft:#e9eef9;
  --accent:#EEAE25; --accent-dark:#c8901a; --accent-soft:#fdf3dc;
  --wa:#25d366; --wa-dark:#1da851; --sale:#dc2626; --ok:#16a34a; --warn:#b45309;
  --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.08), 0 10px 24px -6px rgba(16,24,40,.12);
  --shadow-lg:0 24px 60px rgba(16,24,40,.22); --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* no blue flash and no text selection when a card is tapped like an app */
html{-webkit-tap-highlight-color:transparent}
.card, .chip, .btn, .fsoc, .slide, .thumb{-webkit-tap-highlight-color:transparent}
.card{cursor:pointer; -webkit-touch-callout:none}
/* long-press se koi text select/copy na ho — sirf typing wali jagah par ho */
body{-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none}
input, textarea, select{-webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default}
img{-webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none}
/* phone number aur address copy ho sakna chahiye */
footer.site .fcontact, footer.site .fcontact p, footer.site .fcontact span,
footer.site .fcontact a{-webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default}
footer.site .fcontact svg{-webkit-touch-callout:none}
body{margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
img{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 12px}
[hidden]{display:none !important}

/* ---------- mode bar (the 2 profiles) ---------- */
.modebar{background:#0b1220; color:#cbd5e1; position:sticky; top:0; z-index:80}
.modebar .in{max-width:var(--max); margin:0 auto; padding:8px 12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.modebar .who{font-size:12.5px; color:#94a3b8; display:flex; align-items:center; gap:8px}
.modebar .who b{color:#fff; font-weight:700}
.modebar .draftdot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:none}
.modebar.dirty .draftdot{display:block}
.modebar .seg{margin-left:auto; display:flex; background:#1e293b; border-radius:9px; padding:3px; gap:3px}
.modebar .seg button{border:0; background:transparent; color:#cbd5e1; font-size:13px; font-weight:600;
  padding:7px 15px; border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:7px}
.modebar .seg button svg{width:15px; height:15px}
.modebar .seg button.on{background:#fff; color:#0f172a}
.modebar .seg button.on.pub{background:var(--accent); color:#12224d}
.modebar .seg button.on.own{background:#fff; color:#0f172a}

/* ---------- fatal error ---------- */
.fatal{max-width:760px; margin:40px auto; background:#fff; border:1px solid var(--line);
  border-left:5px solid var(--sale); border-radius:12px; padding:22px 24px; box-shadow:var(--shadow)}
.fatal h2{margin:0 0 8px; font-size:18px}
.fatal p{margin:0 0 8px; color:var(--ink-soft); font-size:14px}
.fatal code{background:#f3f4f6; padding:2px 6px; border-radius:5px; font-size:13px}
/* the shop always carries this box in the markup so an error has somewhere to
   go. While it is empty it must not sit above the header as a blank card with
   40px of empty space around it — it appears only when there is a message. */
.fatal:empty{display:none}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:68px}
.hdr-sp{display:block}
.logo{justify-self:center}
.hdr-actions{justify-self:end}
.logo{display:flex; align-items:center; gap:6px; min-width:0}
.logoimg{width:44px; height:44px; flex:0 0 auto; object-fit:contain}
.logo .txt{display:flex; flex-direction:column; line-height:1.2; align-items:flex-start; min-width:0}
/* the tagline sits centred under the name */
.logo .txt b{font-size:clamp(15px,5.8vw,24px); font-weight:800; letter-spacing:-.75px; white-space:nowrap}
/* Brand ek hi line par: logo ke saamne QASIM MOBILE, us ke neeche tagline. */
.logo .txt b .n1{color:var(--navy)}
.logo .txt b .n2{color:var(--orange)}
.logo .txt span{font-size:10.5px; color:var(--ink-faint); letter-spacing:.4px; white-space:nowrap; text-align:left}
/* tagline apne asli case mein dikhe ("Trust in Every Deal") — naam wale
   spans ka uppercase alag rule se aata hai, wo barqarar hai */
/* the two word spans sit INSIDE <b id="logoName"> and were also caught by the
   tagline rule above, so the name always drew at the small tagline size —
   every font-size change on .logo .txt b had no visible effect. */
.logo .txt b .n1, .logo .txt b .n2{font-size:inherit; text-transform:uppercase; letter-spacing:.4px}
.search{position:relative}
.searchrow{display:flex; gap:8px; align-items:center; padding-top:12px}
.searchrow .search{flex:1 1 auto}
.filbtn{flex:0 0 auto; width:44px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  color:var(--brand)}
.filbtn svg{width:19px; height:19px}
.filbtn.on{background:var(--brand); border-color:var(--brand); color:#fff}
.search input{width:100%; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); padding:0 14px 0 38px; outline:none; font-size:13.5px;
  box-shadow:var(--shadow)}
.search input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), var(--shadow)}
.search svg{position:absolute; left:13px; top:13px; width:15px; height:15px; color:var(--ink-faint)}
.hdr-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px;
  padding:0 16px; border-radius:10px; border:1px solid transparent; background:#fff; cursor:pointer;
  font-weight:600; font-size:14px; transition:transform .08s ease, background .15s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:16px; height:16px}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa:hover{background:var(--wa-dark)}
.btn-ghost{border-color:var(--line); background:#fff}
.btn-ghost:hover{background:#f3f4f6}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-dark{background:#0f172a; color:#fff}
.btn-danger{background:#fff; border-color:#fecaca; color:var(--sale)}
.btn-danger:hover{background:#fef2f2}
.btn-sm{height:34px; padding:0 12px; font-size:13px; border-radius:8px}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.saved-btn{position:relative}
.saved-btn .cnt{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--sale); color:#fff; font-size:11px; font-weight:800;
  display:none; place-items:center}
.saved-btn.has .cnt{display:grid}

/* ---------- hero ---------- */
.hero{padding-top:18px; padding-bottom:4px}
.banner{position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); touch-action:pan-y}
.slides{display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform}
.slide{flex:0 0 100%; position:relative; display:flex; align-items:center; gap:20px; color:#fff;
  padding:11px 22px; overflow:hidden; min-height:94px}
.slide:after{content:""; position:absolute; right:-70px; top:-70px; width:250px; height:250px;
  border-radius:50%; background:rgba(255,255,255,.06)}
/* picture banner: the owner uploads a finished image, the site adds no text */
.banner.imgmode{aspect-ratio:3/1}
.banner.imgmode .slides{height:100%}
.banner.imgmode .slide{min-height:0; height:100%}
.slide.imgslide{padding:0; min-height:0; height:100%; display:block; position:relative;
  background:#0B2353; overflow:hidden}
.slide.imgslide:after{display:none}
.slide.imgslide .bimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.slide.imgslide .bwa{position:absolute; left:14px; bottom:14px; height:34px; padding:0 14px;
  font-size:12.5px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.28)}
.slide.navy{background:linear-gradient(120deg,#050f28 0%,#0B2353 48%,#1b3f85 100%)}
.slide.orange{background:linear-gradient(120deg,#6d3400 0%,#b95a00 55%,#EEAE25 100%)}
.slide.dark{background:linear-gradient(120deg,#0a0f1c 0%,#1f2937 60%,#3f4a5c 100%)}
.slide.green{background:linear-gradient(120deg,#03361f 0%,#0d6b41 60%,#25d366 100%)}
.scontent{position:relative; z-index:1; max-width:62ch; min-width:0}
.sbadge{display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  font-size:9px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; margin-bottom:6px}
.slide h2{margin:0 0 3px; font-size:clamp(14px,2.15vw,18.5px); font-weight:800; letter-spacing:-.4px}
.slide p{margin:0 0 9px; color:rgba(255,255,255,.86); font-size:11.5px; max-width:44ch}
.slide .btn{height:30px; border-radius:9px}
.slide .btn-line{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff}
.slide .btn-line:hover{background:rgba(255,255,255,.22)}
.sphoto{position:relative; z-index:1; flex:0 0 auto; margin-left:auto}
.sphoto img{width:184px; height:94px; border-radius:11px; object-fit:cover;
  box-shadow:0 14px 34px rgba(0,0,0,.32)}
.bnav{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(255,255,255,.86); cursor:pointer; display:none; place-items:center;
  font-size:16px; font-weight:700; color:#1f2937; z-index:3; padding:0}
.banner.multi .bnav{display:grid}
.bnav.prev{left:10px}
.bnav.next{right:10px}
.bdots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:6px; justify-content:center; z-index:3}
.bdot{width:7px; height:7px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.45); transition:.2s}
.bdot.on{background:#fff; width:20px}
.ftrust{display:flex; flex-direction:column; gap:6px}
.ftrust span{font-size:13px; color:#aab6c8}
.ftrust span:before{content:"\2713"; color:var(--orange); font-weight:800; margin-right:7px}
.trustbar{display:flex; gap:8px; flex-wrap:wrap; padding:12px 0 2px}
.trustbar .t{font-size:12.5px; color:var(--ink-soft); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; display:flex; align-items:center; gap:7px}
.trustbar .t:before{content:"✓"; color:var(--ok); font-weight:800}

/* ---------- category bar ---------- */
.catbar{width:100%; max-width:none; margin:6px 0 0; background:none; border:0; box-shadow:none}
.catbar .inner{
  display:flex; align-items:flex-start; gap:10px; overflow-x:auto; padding:16px 14px 12px;
  scroll-snap-type:x proximity; scroll-padding:0 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.catbar .inner::-webkit-scrollbar{display:none}
.chip{
  position:relative; flex:0 0 auto; width:115px; scroll-snap-align:start;
  padding:0; margin:11px 10px 0 0; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.chip .face{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:25px 10px 13px; height:137px;
  background:#fff; border-radius:12px;
  box-shadow:0 10px 20px -12px rgba(11,35,83,.5);
  transition:background .22s ease, box-shadow .22s ease, height .22s ease;
}
/* the tab ribbon sits on top and is wider than the card, exactly like the reference */
.chip .ribbon{
  position:absolute; top:-11px; left:-6px; right:-6px; height:24px;
  display:grid; place-items:center; border-radius:7px; background:var(--brand); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 7px 13px -8px rgba(11,35,83,.85);
  transition:background .22s ease, color .22s ease;
}
.chip .cic{margin:auto 0; display:grid; place-items:center; color:var(--brand); transition:color .22s ease}
.chip .cic svg{width:34px; height:34px}
.chip .cbtn{
  margin-top:auto; padding:6px 20px; border-radius:999px; background:var(--brand); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  transition:background .22s ease, color .22s ease;
}
/* selected card = the featured slab: filled, white ribbon, white button, and it stands taller */
.chip.on .face{background:var(--brand); height:148px; margin-top:-6px;
  box-shadow:0 18px 28px -14px rgba(11,35,83,.85)}
.chip.on .ribbon{background:#fff; color:var(--brand)}
.chip.on .cic{color:#fff}
.chip.on .cbtn{background:#fff; color:var(--brand)}



.chip.saved.on .ribbon{background:#fff; color:var(--sale)}


/* ---------- filters ---------- */
.fsheet{display:flex; flex-direction:column; max-width:560px; max-height:88vh; padding:0}
.fhead{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 20px 12px; border-bottom:1px solid var(--line)}
.fhead h2{margin:0; font-size:18px; font-weight:800; letter-spacing:-.3px}
.fbody{flex:1 1 auto; overflow:auto; padding:16px 20px 4px}
.ffoot{display:flex; gap:10px; padding:12px 20px 16px; border-top:1px solid var(--line); background:var(--card)}
.ffoot .btn{flex:1 1 auto; height:44px}
.fsec{margin-bottom:16px}
.flabel{display:block; font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px}
.fchips{display:flex; gap:7px; flex-wrap:wrap}
.fchip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer}
.fchip.on{background:var(--brand); border-color:var(--brand); color:#fff}
.fprice{display:flex; align-items:center; gap:9px}
.fprice input{flex:1 1 0; height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px;
  font-size:13.5px; outline:none; background:#fff}
.fprice input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.filters .clear{flex:0 0 auto; background:none; border:0; cursor:pointer; font-size:13px; font-weight:600; color:var(--brand); padding:6px 2px}
.count{font-size:12.5px; color:var(--ink-faint)}

/* ---------- grid ---------- */
.grid{display:grid; gap:14px; padding-bottom:36px; grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.card{position:relative; background:var(--card); border:1px solid #dbe2ee; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .13s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#d8dce4}
.card.sold{opacity:.72}
.thumb{position:relative; aspect-ratio:5/5.1; background:#fff; display:grid;
  grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center;
  overflow:hidden; cursor:pointer; touch-action:pan-y}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:center}
.ph{width:100%; height:100%; display:grid; place-items:center; gap:6px; color:#9aa2b1; text-align:center;
  padding:10px; background:repeating-linear-gradient(45deg,#eef1f6,#eef1f6 12px,#e7ebf2 12px,#e7ebf2 24px)}
.ph .ini{width:56px; height:56px; border-radius:50%; background:#fff; border:1px solid #dfe3ea;
  display:grid; place-items:center; font-weight:800; font-size:19px; color:#8f97a6}
.ph small{font-size:11px; letter-spacing:.3px}
.dots{position:absolute; left:0; right:0; bottom:9px; display:flex; gap:5px; justify-content:center;
  pointer-events:none}
.dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.28); transition:.15s}
.dots span.on{background:#fff; width:16px; border-radius:999px}
.flags{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:7px}
.imgflags{position:absolute; left:8px; bottom:8px; z-index:3; display:flex; flex-direction:column;
  align-items:flex-start; gap:4px; pointer-events:none}
.imgflags .badge{font-size:7.5px; line-height:1.5; padding:2px 5px; border-radius:5px; letter-spacing:.3px;
  box-shadow:0 1px 4px rgba(15,23,42,.16)}
/* the discount pill rides along with the price, on its right */
.price .badge.sale{flex:0 0 auto; font-size:9.5px; padding:3px 8px; align-self:center; margin-left:4px; margin-right:0}
.flags .badge{font-size:9px; padding:2px 7px}
.badge{font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:4px 9px;
  border-radius:999px; background:#111827; color:#fff}
.badge.new{background:var(--brand)}
.badge.sale{background:var(--sale)}
.badge.feat{background:linear-gradient(135deg,#EEAE25,#c8901a)}
.badge.out{background:#fff; color:var(--sale); border:1px solid var(--sale)}
.sold-veil{position:absolute; inset:0; background:rgba(255,255,255,.62); display:grid; place-items:center; pointer-events:none}
.sold-veil span{border:2px solid var(--sale); color:var(--sale); font-weight:900; letter-spacing:2px;
  padding:5px 14px; border-radius:6px; transform:rotate(-7deg); font-size:14px; background:#fff}
/* save heart: no circle — the heart itself carries the ring (white 2px outside) */
.heart{position:absolute; right:8px; top:8px; width:36px; height:36px; border:0; border-radius:0;
  background:none; cursor:pointer; display:grid; place-items:center; z-index:2;
  padding:0; box-shadow:none; color:var(--brand)}
.heart svg{width:29px; height:29px}
.heart .hr{fill:#fff; stroke:currentColor}
.heart.on{color:var(--sale)}
.heart.on .hr{fill:currentColor}
.heart:active{transform:scale(.9)}
.cbody{padding:13px 13px 15px; display:flex; flex-direction:column; flex:1 1 auto}
.price{display:flex; align-items:baseline; gap:10px; row-gap:4px; flex-wrap:wrap; overflow:visible}
.price .now{font-size:16px; font-weight:800; letter-spacing:-.3px; white-space:nowrap}
.price .was{font-size:11.5px; color:var(--ink-faint); text-decoration:line-through; white-space:nowrap}
.price .ask{font-size:14.5px; font-weight:800; color:var(--brand)}
.card h3{margin:8px 0 6px; font-size:14.5px; font-weight:700; letter-spacing:-.1px; cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cmeta{font-size:11.5px; color:var(--ink-faint); display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.cmeta .dot{width:3px; height:3px; border-radius:50%; background:#cbd2dc}
.card-btn{margin-top:14px; display:flex; gap:7px}
.card-btn .btn{height:36px; font-size:13px; flex:1 1 auto; padding:0 11px; border-radius:8px}
.card-btn .icon{flex:0 0 36px; width:36px; padding:0; font-weight:700; color:var(--ink-soft)}
.empty{background:#fff; border:1px dashed var(--line); border-radius:var(--radius); padding:46px 20px;
  text-align:center; color:var(--ink-faint); margin-bottom:34px}
.empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:5px}
.empty .btn{margin-top:14px}

/* ---------- footer ---------- */
footer.site{background:#0f172a; color:#cbd5e1; margin-top:20px; padding:34px 0 26px}
footer.site .cols{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer.site h4{margin:0 0 10px; color:#fff; font-size:13px; letter-spacing:.8px; text-transform:uppercase}
footer.site p{margin:0 0 6px; font-size:13.5px; color:#aab6c8}
footer.site a:hover{color:#fff}
.fnote{border-top:1px solid #1e293b; margin-top:26px; padding-top:16px; font-size:12.5px; color:#8592a6;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
/* a quiet way back to the owner panel: the password is the real gate, and this
   link is told to stay out of search engines */
.ownerlink{color:#6b7787; text-decoration:none; border-bottom:1px dotted #3b475c; padding-bottom:1px}
.ownerlink:hover,.ownerlink:focus{color:#fff; border-bottom-color:#fff}

/* ---------- modal / detail sheet ---------- */
.modal{position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.62); display:none;
  align-items:flex-start; justify-content:center; padding:18px; overflow:auto}
.modal.open{display:flex}
.sheet{background:#fff; border-radius:14px; width:100%; max-width:940px; box-shadow:var(--shadow-lg);
  position:relative; margin:auto}
.sheet .close{position:absolute; right:12px; top:12px; z-index:5; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.94); cursor:pointer; font-size:19px; line-height:1;
  display:grid; place-items:center}
.dgrid{display:grid; grid-template-columns:1fr}
.gal{background:#fff; border-radius:14px 0 0 14px; overflow:hidden; position:relative}
.gal .main{aspect-ratio:1/1; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; position:relative; background:#fff;
  touch-action:pan-y}
.gal .main img{width:100%; height:100%; object-fit:cover; object-position:center center; cursor:zoom-in}
/* the photos sit in one strip that slides sideways — no swapping, no jumping */
.gal .main{overflow:hidden}
.gal .main .track{position:absolute; inset:0; display:flex; width:100%; height:100%; will-change:transform;
  transition:transform .32s cubic-bezier(.22,.61,.36,1); touch-action:pan-y}
.gal .main .track img{flex:0 0 100%; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; object-position:center center; background:#fff;
  user-select:none; -webkit-user-drag:none}
/* OLX-style photo counter inside the frame */
.pcount{position:absolute; right:10px; bottom:10px; z-index:6; padding:4px 11px; border-radius:999px;
  background:rgba(15,23,42,.72); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.5px;
  pointer-events:none}
/* close on the left, share on the right with its name underneath the icon */
.sheet #mClose{left:12px; right:auto}
.shbtn{position:absolute; right:12px; top:12px; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; min-width:50px; padding:6px 8px 5px; border-radius:14px;
  cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.94); color:var(--ink);
  font-size:9.5px; font-weight:700; letter-spacing:.2px; line-height:1}
.shbtn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.gal .nav{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); cursor:pointer; display:none; place-items:center;
  box-shadow:0 2px 10px rgba(15,23,42,.2); font-size:16px; font-weight:700; color:#334155}
.gal.multi .nav{display:grid}
.gal .nav.prev{left:10px}
.gal .nav.next{right:10px}
.gal .thumbs{display:flex; gap:7px; padding:7px 16px 0; overflow-x:auto; background:#fff; scrollbar-width:none;
  justify-content:safe center}
/* the gap to the price card is the same 7px as between thumbnails */
.gal:has(.thumbs img) + .dinfo{padding-top:7px}
.gal .thumbs::-webkit-scrollbar{display:none}
.gal .thumbs img{width:58px; height:58px; object-fit:cover; border-radius:10px; flex:0 0 auto;
  border:2px solid transparent; padding:2px; background:#fff; box-sizing:border-box;
  cursor:pointer; opacity:.75}
.gal .thumbs img.on{border-color:var(--brand); opacity:1}
.dinfo{padding:26px 26px 28px}
/* wide screens: same arrangement as the phone — picture on top, details below,
   inside a narrower sheet so it reads like an app card */
@media (min-width:881px){
  .sheet{max-width:470px}
  .gal{border-radius:14px 14px 0 0}
  .gal .main{aspect-ratio:1/1; height:auto}
  .dinfo{padding:20px 22px 24px}
}
.dpricebox{background:#fff; border:1px solid #dbe2ee;
  border-radius:var(--radius); padding:14px 16px 13px;
  box-shadow:0 1px 3px rgba(16,24,40,.08), 0 10px 24px -6px rgba(16,24,40,.12)}
.dinfo .dprice-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.dinfo .dprice{font-size:29px; font-weight:800; letter-spacing:-1px; color:var(--brand); line-height:1.1}
.dinfo .dold{font-size:14.5px; font-weight:700; color:#98a2b3; text-decoration:line-through;
  letter-spacing:-.2px; align-self:center}
.dinfo .doff{font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:linear-gradient(135deg,#ffe9e6,#ffd5ce); color:var(--sale); border-radius:999px; padding:4px 9px}
.dinfo .doff:empty{display:none}
.dinfo h2{margin:14px 0 12px; font-size:21px; font-weight:800; letter-spacing:-.3px; line-height:1.32}
.dinfo .dloc{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px}
.dinfo .dloc > span{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  background:#f2f5fb; border:1px solid #e4eaf4; color:var(--ink-soft);
  font-size:11.5px; font-weight:700; letter-spacing:.1px}
.dinfo .dloc > span:empty{display:none}
.dinfo .dloc > span::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8}
.dinfo .dloc > span.pta{background:#eafaf1; border-color:#d5f0e0; color:var(--ok)}
.dinfo .dloc > span.cond{background:var(--brand-soft); border-color:#d6e0f2; color:var(--brand)}
.dinfo .dloc .status{font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:11.5px}
.dinfo .dloc .status.ok{color:var(--ok)}
.dinfo .dloc .status.warn{color:var(--warn)}
.dinfo .dloc .status.bad{color:var(--sale); background:#fdeceb; border-color:#f8d8d5}
.dinfo .dloc .status.warn{color:var(--warn); background:#fff7e8; border-color:#f6e3c6}
.dinfo .desc{color:var(--ink-soft); font-size:14px; line-height:1.62; margin:0; white-space:pre-line}
/* one card holds the price, the title, one row per fact, then the description */
.dinfo .dcard{margin:0; padding:14px 16px 16px; border:1px solid #dbe2ee; border-radius:var(--radius);
  background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.08), 0 10px 24px -6px rgba(16,24,40,.12)}
/* a line under the price, same as the rows below */
.dinfo .dcard .dpricebox{border:0; border-radius:0; box-shadow:none; background:transparent;
  padding:0 0 11px; margin:0; border-bottom:1px solid #eef1f6}
.dinfo .dcard .status{display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px;
  background:#eafaf1; color:var(--ok); font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase}
.dinfo .dcard .status:empty{display:none}
.dinfo .dcard .status.warn{background:#fff7e8; color:var(--warn)}
.dinfo .dcard .status.bad{background:#fdeceb; color:var(--sale)}
.dinfo .dcard h2{margin:12px 0 0; font-size:20px; font-weight:800; letter-spacing:-.3px; line-height:1.32}
.dinfo .dcard .drows{margin:14px 0 0; border-top:1px solid #eef1f6}
.dinfo .dcard .drow{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; margin:0;
  padding:10px 0; border-bottom:1px solid #eef1f6}
.dinfo .dcard .drow[hidden]{display:none}
.dinfo .dcard .drow dt{margin:0; font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--ink-faint)}
.dinfo .dcard .drow dd{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; word-break:break-word}
.dinfo .dcard .desc{margin:12px 0 0; white-space:pre-line}
.dinfo .dcard .desc:empty{display:none}
.speccard{margin-top:18px; border:1px solid #dbe2ee; border-radius:var(--radius); background:#fff;
  overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.08), 0 10px 24px -6px rgba(16,24,40,.12)}
.spechead{display:flex; align-items:center; gap:8px; padding:13px 14px 11px; border-bottom:1px solid var(--line);
  background:#fff;
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--ink)}
.spechead svg{width:16px; height:16px; color:var(--brand); flex:0 0 auto}
.specrow{display:flex; gap:11px; align-items:flex-start; padding:11px 14px}
.specrow + .specrow{border-top:1px solid #eef1f6}
.specrow .si{width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; flex:0 0 auto}
.specrow .si svg{width:18px; height:18px}
.specrow .st{min-width:0; flex:1 1 auto}
.specrow .sl{display:block; font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:3px}
.specrow .sv{display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; word-break:break-word}
.dinfo ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.dinfo li{font-size:13.5px; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start}
.dinfo li:before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-top:7px; flex:0 0 auto}
.dinfo .actions{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap}
.dinfo .actions .btn{height:46px; padding:0 20px; border-radius:10px}
.dinfo .actions .btn-wa{flex:1 1 180px}
.dinfo .actions .save svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2}
/* detail bar Save: no box (the ring is on the home card heart) */
.actions .save{border:0; background:transparent; box-shadow:none}
.dinfo .actions .save.on{color:var(--sale); border-color:var(--sale)}
.dinfo .actions .save.on svg{fill:var(--sale); stroke:var(--sale)}
.reveal{margin-top:12px; border:1px dashed #cbd5e1; border-radius:10px; padding:12px 13px; display:flex;
  align-items:center; gap:10px; flex-wrap:wrap}
.reveal .num{font-size:16px; font-weight:800; letter-spacing:.3px}
.reveal .hint{font-size:12.5px; color:var(--ink-faint)}
.reveal.shown{border-style:solid; border-color:var(--wa); background:#f0fdf4}
.trust{margin-top:16px; font-size:12.5px; color:var(--ink-faint); display:grid; gap:6px}
.trust div{display:flex; gap:8px; align-items:flex-start}
.bar{display:none; position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:10px 14px;
  gap:9px; border-radius:0 0 16px 16px}
.bar .btn{height:46px; flex:1 1 auto; border-radius:10px}
.bar .bheart{flex:0 0 46px; width:46px; padding:0}
.bar .bheart svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2}
.bar .bheart.on{color:var(--sale); border-color:var(--sale)}
.bar .bheart.on svg{fill:var(--sale); stroke:var(--sale)}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#0f172a;
  color:#fff; padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:600; opacity:0;
  pointer-events:none; transition:.22s ease; z-index:200; box-shadow:0 12px 30px rgba(15,23,42,.3);
  max-width:92vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.bad{background:#991b1b}

/* ---------- OWNER PANEL ---------- */
.owner{max-width:var(--max); margin:0 auto; padding:22px 16px 70px}
.otop{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.otop h1{margin:0 0 4px; font-size:22px; letter-spacing:-.4px}
.build{font-size:11.5px; font-weight:600; letter-spacing:.3px; color:var(--ink-faint); margin-left:8px}
.otop p{margin:0; color:var(--ink-soft); font-size:13.5px; max-width:60ch}
.otop .oactions{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap}
.ostats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:18px}
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow)}
.stat b{display:block; font-size:21px; letter-spacing:-.5px}
.stat span{font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.6px; font-weight:700}
.note{border-radius:12px; padding:12px 14px; font-size:13.5px; margin-bottom:16px; border:1px solid; display:flex;
  gap:10px; align-items:flex-start; flex-wrap:wrap}
.note b{display:block; margin-bottom:2px}
.note.warn{background:#fffbeb; border-color:#fde68a; color:#7c4a03}
.note.ok{background:#f0fdf4; border-color:#bbf7d0; color:#14532d}
.note.info{background:var(--brand-soft); border-color:#c9d5ee; color:var(--brand)}
.note .btn{margin-left:auto}
/* ---------- owner panel: module cards ---------- */
.omodgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 16px}
@media (min-width:700px){ .omodgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.omodtile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  height:102px; padding:0 8px; background:var(--card); border:1px solid #F5E3BC; border-radius:18px;
  text-align:center; font:inherit; cursor:pointer; box-shadow:0 2px 12px rgba(15,23,42,.05);
  transition:border-color .16s, box-shadow .16s, transform .16s}
.omodtile:hover{border-color:var(--brand); box-shadow:0 6px 18px rgba(15,23,42,.10); transform:translateY(-2px)}
.omodtile:active{transform:none}
.omodtile .mic{display:grid; place-items:center; width:68px; height:50px; font-size:38px; line-height:1}
.omodtile .label{font-size:12px; font-weight:700; color:var(--brand); letter-spacing:.02em; white-space:nowrap}
.omodtile .tstate{font-size:10.5px; font-weight:600; color:var(--ink-faint)}
.omodcard{display:flex; align-items:center; justify-content:center; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:8px 14px; margin:0 0 14px;
  box-shadow:0 2px 12px rgba(15,23,42,.05)}
.omodcard .mc-ico{font-size:21px; line-height:1}
.omodcard .mc-name{font-size:18px; font-weight:800; color:var(--brand)}
.omodpanel[hidden]{display:none !important}
.omodtabbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; padding:6px;
  max-width:980px; margin:0 auto; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.omodtabbar[hidden]{display:none !important}
.omodtabbar button{flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:0; font:inherit; font-size:15px; font-weight:800; color:var(--ink);
  padding:12px 8px; border-radius:14px; cursor:pointer}
.omodtabbar button:hover{background:var(--brand-soft)}
.omodtabbar button.on{color:var(--brand)}
.omodtabbar .ic{font-size:18px; line-height:1}
body.omod-open #ownerApp{padding-bottom:76px}
.orowline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.ochips{display:flex; gap:8px; flex-wrap:wrap}
.ocard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; max-width:780px}
.ocard h3{margin:0 0 8px; font-size:16px}
.ocard p{margin:0 0 16px; color:var(--ink-soft); font-size:13.5px; line-height:1.6; max-width:60ch}
/* ---------- tabs and search, copied from the QM app ---------- */
/* nothing shows above the module name while a module is open */
body.omod-open .otop{display:none}
/* floating action button — the app's .fab, brand navy instead of its orange */
.fab{position:fixed; bottom:78px; right:max(14px, calc((100vw - 980px) / 2 + 14px));
  background:var(--brand); color:#fff; border:none; border-radius:999px; padding:14px 22px;
  font:inherit; font-weight:800; font-size:14px; letter-spacing:.3px;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  box-shadow:0 10px 26px rgba(11,35,83,.35); z-index:30}
.fab:active{transform:scale(.96)}
.fab .p{font-size:17px; line-height:1; font-weight:800}
.olistcount{font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px}
.ltrow{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.ltrow .lt-tabs{flex:1; min-width:0}
.lt-tabs{position:relative; display:flex; border-bottom:2px solid var(--line); user-select:none}
.lt-tabs button{flex:1; min-width:0; background:transparent; border:none; cursor:pointer;
  color:var(--ink-faint); padding:11px 4px; font:inherit; font-weight:700; font-size:13px;
  position:relative; z-index:2; transition:color .22s ease; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.lt-tabs button:active{opacity:.55}
.lt-tabs button.on{color:var(--brand)}
.lt-tabs button b{font-weight:700; opacity:.75}
.lt-tabs .lt-ind{position:absolute; left:0; bottom:-2px; width:33.3333%; height:3px; border-radius:3px;
  background:var(--brand); transition:transform .32s cubic-bezier(.4,0,.2,1); z-index:1}
.olisthead input[type=text]{
  box-sizing:border-box; height:54px; width:100%; max-width:420px; border-radius:16px;
  background-color:#F1F3F8; border:1px solid var(--line); color:var(--ink);
  padding:0 16px 0 44px; font:inherit; font-size:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239AA3B0' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20.5 20.5-3.7-3.7'/></svg>");
  background-repeat:no-repeat; background-position:14px center; background-size:18px 18px;
  box-shadow:inset 3px 3px 7px rgba(150,164,186,.45), inset -3px -3px 7px rgba(255,255,255,.95)}
.olisthead input[type=text]::placeholder{color:#9AA3B0}
.olisthead input[type=text]:focus{outline:none; border-color:var(--brand);
  box-shadow:inset 3px 3px 7px rgba(150,164,186,.45), inset -3px -3px 7px rgba(255,255,255,.95),
    0 0 0 3px rgba(11,35,83,.13)}
.ofiltrow{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px}
.ofchip{font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--card);
  border:1px solid var(--line); padding:7px 13px; border-radius:999px; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s}
.ofchip b{font-weight:700; color:var(--ink); margin-left:1px}
.ofchip:hover{border-color:var(--brand); color:var(--brand)}
.ofchip.on{background:var(--brand); border-color:var(--brand); color:#fff}
.ofchip.on b{color:#fff}
.olisthead{display:flex; align-items:center; gap:10px; margin:6px 0 12px; flex-wrap:wrap}
.olisthead h2{margin:0; font-size:16px}
.olisthead input[type=text]{width:220px}
.orow{display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:14px; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; box-shadow:var(--shadow)}
.orow .othumb{width:76px; height:76px; border-radius:9px; overflow:hidden; background:#eef1f6;
  display:grid; place-items:center; cursor:pointer}
.orow .othumb img{width:100%; height:100%; object-fit:cover}
.orow .othumb .ph .ini{width:40px; height:40px; font-size:15px}
.orow h4{margin:0 0 3px; font-size:14.5px; letter-spacing:-.1px}
.orow .ometa{font-size:12.5px; color:var(--ink-faint); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.orow .oact{display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end}
.pill{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 8px;
  border-radius:999px; background:#f1f5f9; color:#475569; border:1px solid var(--line)}
.pill.ok{background:#f0fdf4; color:#15803d; border-color:#bbf7d0}
.pill.bad{background:#fef2f2; color:#b91c1c; border-color:#fecaca}
.pill.feat{background:var(--accent-soft); color:#a5730f; border-color:#f0d79a}
.delbar{display:flex; gap:7px; align-items:center; background:#fef2f2; border:1px solid #fecaca; border-radius:9px;
  padding:6px 8px; font-size:12.5px; color:#991b1b; font-weight:600; flex-wrap:wrap}

/* ---------- OWNER FORM ---------- */
.fhead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 16px 12px; border-bottom:1px solid #eef2f8}
.fsub{margin:2px 0 0; font-size:12px; color:var(--ink-faint)}
.formgrid{background:#f6f8fc}
.fcard{background:#fff; border:1px solid #e6ecf6; border-radius:12px; padding:13px 14px 14px;
  box-shadow:0 1px 2px rgba(11,35,83,.05), 0 8px 20px -18px rgba(11,35,83,.35);
  display:grid; grid-template-columns:minmax(0,1fr); gap:11px; align-content:start; min-width:0}
.fcard.full{grid-column:1 / -1}
.sh{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #eef2f8}
.sh .shi{width:24px; height:24px; border-radius:8px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; flex:0 0 auto}
.sh .shi svg{width:14px; height:14px}
.sh b{font-size:11px; font-weight:800; letter-spacing:.85px; text-transform:uppercase; color:var(--ink)}
.sh em{font-style:normal; font-size:10px; color:var(--ink-faint); margin-left:auto; text-align:right; max-width:55%}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#eef2f9; border:1px solid #e4eaf4;
  border-radius:11px; padding:4px}
.segbtn{border:0; background:none; padding:9px 8px; border-radius:8px; font-size:13px; font-weight:800;
  color:var(--ink-soft); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease}
.segbtn.on{background:#fff; color:var(--brand); box-shadow:0 2px 8px -4px rgba(11,35,83,.45)}
.subopts{display:flex; gap:7px; flex-wrap:wrap}
.sopt{border:1px solid #e3e9f4; background:#fbfcfe; border-radius:999px; padding:9px 15px; font-size:12.5px;
  font-weight:700; color:var(--ink-soft); cursor:pointer}
.sopt.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.req{color:var(--sale); font-style:normal; font-weight:800}
.cnt{margin-left:6px; font-size:9.5px; font-weight:700; letter-spacing:.4px; color:var(--ink-faint)}
.err{border-color:#f0a8a2 !important; box-shadow:0 0 0 3px rgba(220,38,38,.10) !important}
.prefixed{display:flex; align-items:center; background:#fbfcfe; border:1px solid #e3e9f4; border-radius:10px; overflow:hidden}
.prefixed > span{padding:0 10px; font-size:12px; font-weight:800; color:var(--ink-faint);
  border-right:1px solid #e8eef7; align-self:stretch; display:flex; align-items:center}
.prefixed input{border:0 !important; background:none !important; border-radius:0 !important; box-shadow:none !important; min-height:40px !important}
.prefixed:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.10); background:#fff}
.checkrow{display:flex; gap:8px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid #e3e9f4;
  border-radius:999px; background:#fbfcfe; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer}
.check input{margin:0}
.check.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.fhead h2{margin:0; font-size:18px}
.modetabs{display:flex; gap:3px; background:#eef2f9; border:1px solid #e4eaf4; border-radius:999px; padding:3px}
.mtab{border:0; background:none; padding:6px 18px; border-radius:999px; font-size:12px; font-weight:800; color:var(--ink-soft); cursor:pointer}
.mtab.on{background:var(--brand); color:#fff}
.hidfile{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.photorow{display:flex; gap:8px; align-items:flex-start; min-width:0}
.pmain{flex:0 0 auto; width:88px; height:88px; padding:0; border:1.5px dashed #c9d4e6; border-radius:12px;
  background:#f8fafd; color:var(--brand); display:grid; place-items:center; cursor:pointer; overflow:hidden}
.pmain img{width:100%; height:100%; object-fit:cover; display:block}
.pmain .addwrap{display:flex; flex-direction:column; align-items:center; gap:3px}
.pmain svg{width:22px; height:22px}
.mainhint{font-size:8.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint)}
.pthumbs{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:2px; flex:1 1 auto; min-width:0; scrollbar-width:none}
.pthumbs::-webkit-scrollbar{display:none}
.pthumb{position:relative; flex:0 0 auto; width:88px; height:88px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#fff; touch-action:none; cursor:grab}
.pthumb img{width:100%; height:100%; object-fit:cover; display:block}
.pthumb .tag{position:absolute; left:0; top:0; right:0; padding:2px 4px; background:rgba(11,35,83,.82);
  color:#fff; font-size:7.5px; font-weight:800; letter-spacing:.4px; text-align:center}
.pthumb button{position:absolute; right:2px; bottom:2px; width:19px; height:19px; border:0; border-radius:50%;
  background:rgba(11,35,83,.85); color:#fff; font-size:13px; line-height:1; cursor:pointer}
.pthumb.dragging{opacity:.55; box-shadow:0 12px 20px -10px rgba(11,35,83,.8)}
.pthumb.dropme{outline:2px solid var(--brand)}
.row3{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.condadd{display:flex; gap:8px; align-items:center}
.condadd input{flex:1 1 auto; height:36px; border:1px dashed #cbd6e8; border-radius:10px; padding:0 11px;
  font-size:13px; background:#fafbfe; outline:none}
.pickedchips{display:flex; gap:6px; flex-wrap:wrap}
.pickedchips:empty{display:none}
.pickedchips .pc{display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); font-size:11.5px; font-weight:700}
.sechead{display:flex; align-items:baseline; gap:8px}
.sechead span{font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink)}
.sechead em{font-style:normal; font-size:10px; color:var(--ink-faint)}
.specrows{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.srow{display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; gap:1px 9px; align-items:center;
  background:#f8fafd; border:1px solid #e9eef6; border-radius:11px; padding:7px 10px; cursor:text;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.srow:focus-within{background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.09)}
.srow .si{grid-row:1 / span 2; width:30px; height:30px; border-radius:9px; background:var(--brand-soft);
  color:var(--brand); display:grid; place-items:center}
.srow .si svg{width:16px; height:16px}
.srow .sl{font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-faint)}
.srow input{border:0; background:none; padding:0; height:19px; width:100%; font-size:13px; font-weight:600;
  color:var(--ink); outline:none}
.pane{display:contents}
.pane[hidden]{display:none !important}
.minisheet{width:min(92vw, 340px); margin:auto; background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 24px 50px -20px rgba(11,35,83,.55)}
.mrow{display:flex; align-items:center; gap:11px; width:100%; border:0; background:none; padding:13px 14px;
  font-size:14px; font-weight:600; color:var(--ink); border-radius:12px; cursor:pointer; text-align:left}
.mrow:hover{background:#f4f7fc}
.mrow svg{width:20px; height:20px; color:var(--brand)}
.mrow.cancel{justify-content:center; color:var(--ink-soft); font-weight:700}
#photoModal, #modelActModal{align-items:center; justify-content:center}
.mact-title{padding:12px 14px 4px; font-size:11px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:760px){
  .row3{grid-template-columns:1fr 1fr}
  .specrows{grid-template-columns:1fr}
}
.formgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:20px 24px 4px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
.field .hint{font-size:11.5px; color:var(--ink-faint); font-weight:400}
.checkrow{display:flex; gap:18px; flex-wrap:wrap; padding:4px 0}
.check{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; cursor:pointer}
.check input{width:17px; height:17px; accent-color:var(--brand); cursor:pointer}
.pthumbs{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.pthumb{position:relative; width:88px; height:88px; border-radius:9px; overflow:hidden; border:1px solid var(--line);
  background:#eef1f6}
.pthumb img{width:100%; height:100%; object-fit:cover}
.pthumb .tag{position:absolute; left:0; bottom:0; right:0; background:rgba(15,23,42,.72); color:#fff; font-size:9.5px;
  text-align:center; padding:2px 0; letter-spacing:.4px}
.pthumb button{position:absolute; right:3px; top:3px; width:22px; height:22px; border-radius:50%; border:0;
  background:rgba(15,23,42,.8); color:#fff; cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center}
.filebtn{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:9px;
  border:1px dashed #c7cbd4; background:#fff; cursor:pointer; font-weight:600; font-size:13.5px}
.filebtn:hover{border-color:var(--brand); color:var(--brand)}
.filebtn input{display:none}
.photopick{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px}
.filebtn.big{height:46px; padding:0 16px; font-size:13.5px; font-weight:700; flex:1 1 210px;
  justify-content:center; border-style:solid; border-color:var(--line); background:#f8fafc}
.filebtn.big:hover{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.filebtn.big svg{width:18px; height:18px}
.picker{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  height:38px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fff;
  cursor:pointer; font-size:13.5px; font-weight:600; text-align:left; color:var(--ink)}
.picker:hover{border-color:#c7cbd4}
.picker.empty{color:var(--ink-faint); font-weight:400}
.picker svg{width:16px; height:16px; color:var(--ink-faint); flex:0 0 auto}
.picker:disabled{opacity:.6; cursor:not-allowed; background:#f8fafc}
/* ---- professional form skin ---- */
.formgrid .field label{font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px; display:block}
.formgrid input[type=text], .formgrid input[type=number], .formgrid input[type=tel],
.formgrid input[type=email], .formgrid input[type=date], .formgrid input[type=search],
.formgrid select, .formgrid textarea{
  width:100%; min-height:42px; padding:10px 12px; font-size:14px; color:var(--ink);
  background:#fbfcfe; border:1px solid #e3e9f4; border-radius:10px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.formgrid input:focus, .formgrid select:focus, .formgrid textarea:focus{
  background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.10)}
.formgrid textarea{min-height:auto; line-height:1.55; resize:vertical}
.formgrid .hint{margin-top:5px; display:block}
.formgrid .picker{min-height:42px; height:42px; border-radius:10px; background:#fbfcfe; border:1px solid #e3e9f4}
.formgrid .picker:focus-visible{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.10)}
.pickhead{padding:18px 20px 0}
.pickhead h2{margin:0 0 12px; font-size:18px}
.pickhead .search{width:auto; max-width:none; margin:0}
.picklist{max-height:50vh; overflow:auto; padding:8px 12px}
.pickrow{display:flex; align-items:center; gap:10px; width:100%; border:0; background:#fff;
  padding:12px 10px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:600; text-align:left}
.pickrow:hover{background:#f3f4f6}
.pickrow.on{background:var(--brand-soft); color:var(--brand)}
.pickrow .tick{margin-left:auto; font-weight:800}
.pickempty{padding:26px 10px; text-align:center; color:var(--ink-faint); font-size:13.5px}
.pickfoot{padding:12px 16px 16px; border-top:1px solid var(--line)}
.qrow{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.qrow label{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
.qrow select{width:auto; height:36px; font-size:13px; flex:0 1 auto}
.qrow .hint{flex:1 1 160px}
.photowarn{display:none; margin-top:6px; font-size:12px; font-weight:600; color:var(--warn)}
.photowarn.show{display:block}
.titleprev{margin-top:5px; font-size:12px; color:var(--ink-faint)}
.titleprev b{color:var(--ink)}
.footerbar{display:flex; gap:10px; align-items:center; padding:16px 24px 20px; border-top:1px solid var(--line);
  margin-top:18px; flex-wrap:wrap; position:sticky; bottom:0; background:#fff; border-radius:0 0 16px 16px}
.footerbar .spacer{flex:1 1 auto}
.msg{font-size:12.5px; color:var(--sale); font-weight:600; display:none}
.msg.show{display:block}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .dgrid{grid-template-columns:1fr}
  .gal{border-radius:14px 14px 0 0}
  .gal .main{aspect-ratio:1/1; height:auto; padding:0}
  .dinfo{padding:18px 16px 22px}
  .bar{display:flex}
  .dinfo .actions{display:none}
  .orow{grid-template-columns:64px minmax(0,1fr)}
  .orow .othumb{width:64px; height:64px}
  .orow .oact{grid-column:1/-1; justify-content:flex-start}
  .fhead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 16px 12px; border-bottom:1px solid #eef2f8}
.fsub{margin:2px 0 0; font-size:12px; color:var(--ink-faint)}
.formgrid{background:#f6f8fc}
.fcard{background:#fff; border:1px solid #e6ecf6; border-radius:12px; padding:13px 14px 14px;
  box-shadow:0 1px 2px rgba(11,35,83,.05), 0 8px 20px -18px rgba(11,35,83,.35);
  display:grid; grid-template-columns:minmax(0,1fr); gap:11px; align-content:start; min-width:0}
.fcard.full{grid-column:1 / -1}
.sh{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #eef2f8}
.sh .shi{width:24px; height:24px; border-radius:8px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; flex:0 0 auto}
.sh .shi svg{width:14px; height:14px}
.sh b{font-size:11px; font-weight:800; letter-spacing:.85px; text-transform:uppercase; color:var(--ink)}
.sh em{font-style:normal; font-size:10px; color:var(--ink-faint); margin-left:auto; text-align:right; max-width:55%}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#eef2f9; border:1px solid #e4eaf4;
  border-radius:11px; padding:4px}
.segbtn{border:0; background:none; padding:9px 8px; border-radius:8px; font-size:13px; font-weight:800;
  color:var(--ink-soft); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease}
.segbtn.on{background:#fff; color:var(--brand); box-shadow:0 2px 8px -4px rgba(11,35,83,.45)}
.subopts{display:flex; gap:7px; flex-wrap:wrap}
.sopt{border:1px solid #e3e9f4; background:#fbfcfe; border-radius:999px; padding:9px 15px; font-size:12.5px;
  font-weight:700; color:var(--ink-soft); cursor:pointer}
.sopt.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.req{color:var(--sale); font-style:normal; font-weight:800}
.cnt{margin-left:6px; font-size:9.5px; font-weight:700; letter-spacing:.4px; color:var(--ink-faint)}
.err{border-color:#f0a8a2 !important; box-shadow:0 0 0 3px rgba(220,38,38,.10) !important}
.prefixed{display:flex; align-items:center; background:#fbfcfe; border:1px solid #e3e9f4; border-radius:10px; overflow:hidden}
.prefixed > span{padding:0 10px; font-size:12px; font-weight:800; color:var(--ink-faint);
  border-right:1px solid #e8eef7; align-self:stretch; display:flex; align-items:center}
.prefixed input{border:0 !important; background:none !important; border-radius:0 !important; box-shadow:none !important; min-height:40px !important}
.prefixed:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.10); background:#fff}
.checkrow{display:flex; gap:8px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid #e3e9f4;
  border-radius:999px; background:#fbfcfe; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer}
.check input{margin:0}
.check.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.fhead h2{margin:0; font-size:18px}
.modetabs{display:flex; gap:3px; background:#eef2f9; border:1px solid #e4eaf4; border-radius:999px; padding:3px}
.mtab{border:0; background:none; padding:6px 18px; border-radius:999px; font-size:12px; font-weight:800; color:var(--ink-soft); cursor:pointer}
.mtab.on{background:var(--brand); color:#fff}
.hidfile{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.photorow{display:flex; gap:8px; align-items:flex-start; min-width:0}
.pmain{flex:0 0 auto; width:88px; height:88px; padding:0; border:1.5px dashed #c9d4e6; border-radius:12px;
  background:#f8fafd; color:var(--brand); display:grid; place-items:center; cursor:pointer; overflow:hidden}
.pmain img{width:100%; height:100%; object-fit:cover; display:block}
.pmain .addwrap{display:flex; flex-direction:column; align-items:center; gap:3px}
.pmain svg{width:22px; height:22px}
.mainhint{font-size:8.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint)}
.pthumbs{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:2px; flex:1 1 auto; scrollbar-width:none}
.pthumbs::-webkit-scrollbar{display:none}
.pthumb{position:relative; flex:0 0 auto; width:88px; height:88px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#fff; touch-action:none; cursor:grab}
.pthumb img{width:100%; height:100%; object-fit:cover; display:block}
.pthumb .tag{position:absolute; left:0; top:0; right:0; padding:2px 4px; background:rgba(11,35,83,.82);
  color:#fff; font-size:7.5px; font-weight:800; letter-spacing:.4px; text-align:center}
.pthumb button{position:absolute; right:2px; bottom:2px; width:19px; height:19px; border:0; border-radius:50%;
  background:rgba(11,35,83,.85); color:#fff; font-size:13px; line-height:1; cursor:pointer}
.pthumb.dragging{opacity:.55; box-shadow:0 12px 20px -10px rgba(11,35,83,.8)}
.pthumb.dropme{outline:2px solid var(--brand)}
.row3{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.condadd{display:flex; gap:8px; align-items:center}
.condadd input{flex:1 1 auto; height:36px; border:1px dashed #cbd6e8; border-radius:10px; padding:0 11px;
  font-size:13px; background:#fafbfe; outline:none}
.pickedchips{display:flex; gap:6px; flex-wrap:wrap}
.pickedchips:empty{display:none}
.pickedchips .pc{display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); font-size:11.5px; font-weight:700}
.sechead{display:flex; align-items:baseline; gap:8px}
.sechead span{font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink)}
.sechead em{font-style:normal; font-size:10px; color:var(--ink-faint)}
.specrows{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.srow{display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; gap:1px 9px; align-items:center;
  background:#f8fafd; border:1px solid #e9eef6; border-radius:11px; padding:7px 10px; cursor:text;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.srow:focus-within{background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.09)}
.srow .si{grid-row:1 / span 2; width:30px; height:30px; border-radius:9px; background:var(--brand-soft);
  color:var(--brand); display:grid; place-items:center}
.srow .si svg{width:16px; height:16px}
.srow .sl{font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-faint)}
.srow input{border:0; background:none; padding:0; height:19px; width:100%; font-size:13px; font-weight:600;
  color:var(--ink); outline:none}
.pane{display:contents}
.pane[hidden]{display:none !important}
.minisheet{width:min(92vw, 340px); margin:auto; background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 24px 50px -20px rgba(11,35,83,.55)}
.mrow{display:flex; align-items:center; gap:11px; width:100%; border:0; background:none; padding:13px 14px;
  font-size:14px; font-weight:600; color:var(--ink); border-radius:12px; cursor:pointer; text-align:left}
.mrow:hover{background:#f4f7fc}
.mrow svg{width:20px; height:20px; color:var(--brand)}
.mrow.cancel{justify-content:center; color:var(--ink-soft); font-weight:700}
#photoModal, #modelActModal{align-items:center; justify-content:center}
.mact-title{padding:12px 14px 4px; font-size:11px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:760px){
  .row3{grid-template-columns:1fr 1fr}
  .specrows{grid-template-columns:1fr}
}
.formgrid{grid-template-columns:minmax(0,1fr); padding:18px 16px 4px}
  .footerbar{padding:14px 16px 18px}
  .otop .oactions{margin-left:0; width:100%}
}
@media (max-width:760px){
  .slide{flex-direction:column; align-items:flex-start; gap:6px; padding:7px 12px; min-height:0}
  .slide h2{font-size:14px}
  .slide p{font-size:11.5px; margin-bottom:6px}
  .sphoto{margin:0; order:-1; align-self:flex-start}
  .sphoto img{width:auto; height:64px; max-width:100%; object-fit:contain; border-radius:9px}
  /* keep the pager clear of the "Chat on WhatsApp" button below it */
  .bdots{left:auto; right:12px; justify-content:flex-end}
  .ftrust{display:flex; flex-direction:column; gap:6px}
.ftrust span{font-size:13px; color:#aab6c8}
.ftrust span:before{content:"\2713"; color:var(--orange); font-weight:800; margin-right:7px}
.trustbar{flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .trustbar::-webkit-scrollbar{display:none}
  .trustbar .t{flex:0 0 auto}
  .searchrow{padding-top:9px}
  .search input{height:42px; font-size:13.5px}
  .search svg{top:14px}
  .hdr{height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
  .hdr-actions .btn .lbl{display:none}
  .hdr-actions .btn{padding:0 12px}
  .logo .txt b{font-size:24px}
  .banner{border-radius:14px}
  /* two listings per row on a phone */
  .grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .cbody{padding:11px 11px 13px}
  .card h3{font-size:13px; margin:6px 0 5px}
  .price .now{font-size:14.5px}
  .price .was{font-size:11px}
  .cmeta{font-size:11px; gap:5px}
  .flags .badge{font-size:9px; padding:2px 7px}
  .heart{width:34px; height:34px; right:7px; top:7px; border-radius:0}
  .heart svg{width:27px; height:27px}
  .card-btn{margin-top:10px; gap:6px}
  .card-btn .btn{height:36px; font-size:12.5px}
  .sechead h2{font-size:15.5px}
  .modal{padding:0; align-items:stretch}
  .sheet{border-radius:0; max-width:none; min-height:100%}
  .bar{border-radius:0}
  footer.site{padding-bottom:84px}
  .filters input[type=number]{width:82px}
  .modebar .seg{width:100%; margin-left:0}
  .modebar .seg button{flex:1 1 0; justify-content:center}
}
@media (max-width:400px){
  .card-btn .icon{display:none}
  .logo .txt b{font-size:20px}
  .grid{gap:9px}
  .olisthead input[type=text]{width:100%}
}
@media print{.modebar,.filters,.catbar,footer.site .cols{display:none}}


/* ---------- in-app calendar + time picker (same system as the ledger app) ---------- */
.dtmodal{position:fixed; inset:0; z-index:120; background:rgba(15,23,42,.62); display:none;
  align-items:center; justify-content:center; padding:16px}
.dtmodal.open{display:flex}
.dtcard2{width:100%; max-width:340px; background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); animation:dtpop .16s ease}
@keyframes dtpop{from{transform:scale(.96); opacity:.55} to{transform:scale(1); opacity:1}}
.dthead{background:var(--brand); color:#fff; padding:13px 18px 15px}
.dthead .dy{font-size:12.5px; font-weight:700; opacity:.92}
.dthead .dd{font-size:25px; font-weight:700; line-height:1.2; margin-top:1px}
.dthead.tm{display:flex; align-items:flex-start; justify-content:space-between}
.dthead .big{display:flex; align-items:baseline; gap:2px; font-size:44px; font-weight:700; line-height:1; letter-spacing:-1px}
.dthead .big span{cursor:pointer; padding:0 3px; border-radius:8px; opacity:.55}
.dthead .big span.on{opacity:1}
.dthead .ampm{display:flex; flex-direction:column; gap:2px; padding-top:4px}
.dthead .ampm button{background:none; border:0; color:#fff; font-size:15px; font-weight:700; padding:4px 8px;
  border-radius:8px; opacity:.5; cursor:pointer}
.dthead .ampm button.on{opacity:1}
.dtbody{padding:9px 12px 3px}
.dtnav{display:flex; align-items:center; justify-content:space-between; padding:2px 0 6px}
.dtnav .ar{background:none; border:0; color:var(--ink); font-size:24px; line-height:1; width:40px; height:36px;
  border-radius:10px; cursor:pointer}
.dtnav .ar:active{background:var(--brand-soft)}
.dtnav .tt{background:none; border:0; color:var(--ink); font-size:15px; font-weight:700; padding:7px 12px;
  border-radius:10px; cursor:pointer}
.dtnav .tt:active{background:var(--brand-soft)}
.dtweek,.dtgrid{display:grid; grid-template-columns:repeat(7, 1fr)}
.dtweek span{text-align:center; font-size:11.5px; font-weight:700; color:var(--ink-faint); padding:5px 0 7px}
.dtday{background:none; border:0; color:var(--ink); font-size:14px; height:38px; width:38px; margin:0 auto;
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center}
.dtday.today{box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand); font-weight:800}
.dtday.sel{background:var(--brand); color:#fff; font-weight:800}
.dtmy{padding:2px 2px 8px}
.dtmy .yr{display:flex; align-items:center; justify-content:center; gap:16px; padding:0 0 9px}
.dtmy .yr b{font-size:15px; font-weight:800}
.dtmy .mons{display:grid; grid-template-columns:repeat(3, 1fr); gap:7px}
.dtmon{background:var(--brand-soft); border:1px solid var(--line); color:var(--ink); padding:11px 4px;
  border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer}
.dtmon.on{background:var(--brand); border-color:var(--brand); color:#fff}
.dtdial{position:relative; width:100%; padding-top:100%; border-radius:50%; background:var(--bg); margin:0 auto;
  touch-action:none}
.dtdial-in{position:absolute; inset:0}
.dtnum{position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border:0; background:none; color:var(--ink);
  font-size:14px; font-weight:600; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center}
.dtnum.on{background:var(--brand); color:#fff; font-weight:800}
.dthand{position:absolute; left:50%; top:50%; height:2px; background:var(--brand); transform-origin:0 50%; pointer-events:none}
.dthand::before{content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--brand)}
.dtkeys{display:flex; align-items:center; gap:8px; padding:10px 6px 2px}
.dtkeys input{width:62px; text-align:center; font-size:22px; font-weight:700; padding:8px 4px; border:1px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--ink)}
.dtkeys .sep{font-size:20px; font-weight:700; color:var(--ink-faint)}
.dtkeys .kp{display:flex; gap:5px; margin-left:auto}
.dtkeys .kp button{border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:12.5px; font-weight:700;
  padding:8px 11px; border-radius:999px; cursor:pointer}
.dtkeys .kp button.on{background:var(--brand); border-color:var(--brand); color:#fff}
.dtfoot{display:flex; align-items:center; justify-content:space-between; padding:8px 12px 12px}
.dtfoot .kbt{background:none; border:0; color:var(--brand); width:42px; height:38px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.dtfoot .kbt:active{background:var(--brand-soft)}
.dtfoot .btns{display:flex; gap:4px; margin-left:auto}
.dtfoot .btns button{background:none; border:0; color:var(--brand); font-size:13px; font-weight:800; letter-spacing:.6px;
  padding:11px 15px; border-radius:10px; cursor:pointer}
.dtfoot .btns button:active{background:var(--brand-soft)}
/* date + time as two separate cards */
.dtpair{display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:10px}
.dtcell{position:relative; display:flex; align-items:center; gap:9px; padding:11px 12px; min-height:48px; min-width:0;
  background:#fbfcfe; border:1px solid var(--line); border-radius:11px; cursor:pointer}
.dtcell:active{border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,35,83,.10)}
.dtcell svg{width:18px; height:18px; flex:0 0 auto; color:var(--brand)}
.dtcell .txt{min-width:0; display:flex; flex-direction:column; gap:1px}
.dtcell .cap{font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-faint)}
.dtcell .val{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dtcell .val.empty{color:var(--ink-faint); font-weight:500}
.dtcell .hin{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; background:none; cursor:pointer}

/* ==========================================================================
   v2 additions — cart, drawer, checkout.
   Written against the same tokens as the rest of the file so nothing looks
   like it came from a different site.
   ========================================================================== */

/* ---- header cart button (reuses .saved-btn positioning for the badge) ---- */
.cartbtn.on{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---- drawer: slides in from the right on desktop, up from the bottom
        on a phone, which is what people expect on each ------------- */
.drawer{position:fixed; inset:0; z-index:120; display:none; background:rgba(15,23,42,.55)}
.drawer.open{display:block}
.drawer-card{position:absolute; top:0; right:0; bottom:0; width:min(94vw,440px); background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(24px); opacity:.4} to{transform:none; opacity:1}}
.drawer-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0; font-size:17px; letter-spacing:-.2px}
.drawer-head .sub{font-size:12.5px; color:var(--ink-faint)}
.drawer-head .close{margin-left:auto; width:38px; height:38px; border:1px solid var(--line); background:#fff;
  border-radius:10px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-soft)}
.drawer-body{flex:1 1 auto; overflow:auto; padding:6px 18px}
.drawer-foot{border-top:1px solid var(--line); padding:14px 18px 18px; background:#fbfcfe}
.drawer-foot .btn{width:100%; height:48px; justify-content:center}

.cartempty{padding:44px 10px; text-align:center; color:var(--ink-soft)}
.cartempty b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px}

.cartline{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line)}
.cartline:last-child{border-bottom:0}
.cthumb{width:64px; height:64px; border-radius:10px; background:#f6f8fc; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden}
.cthumb img{width:100%; height:100%; object-fit:contain; padding:5px}
.cartline h4{margin:0 0 4px; font-size:13.5px; font-weight:600; line-height:1.35}
.cartline .cprice{font-size:12.5px; color:var(--ink-soft)}
.cartline .cline{font-weight:700; color:var(--ink)}
.qty{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:9px;
  overflow:hidden; margin-top:7px; background:#fff}
.qty button{width:30px; height:30px; border:0; background:#fff; font-size:16px; line-height:1; cursor:pointer;
  color:var(--brand); font-weight:700}
.qty button:hover{background:var(--brand-soft)}
.qty span{min-width:30px; text-align:center; font-size:13.5px; font-weight:700}
.xbtn{border:0; background:none; color:var(--ink-faint); font-size:18px; cursor:pointer; padding:6px;
  align-self:flex-start; line-height:1}
.xbtn:hover{color:var(--sale)}

.ordsum{margin:12px 0 0; border-top:1px dashed var(--line); padding-top:12px}
.ordsum .row{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:3px 0; color:var(--ink-soft)}
.ordsum .row.total{font-size:16px; font-weight:800; color:var(--ink); border-top:1px solid var(--line);
  margin-top:8px; padding-top:10px}
.ordsum .row .v{font-weight:700; color:var(--ink)}
.ordsum .row.total .v{font-size:19px}

/* ---- checkout form sits in the existing .sheet / .field system ---- */
.sheet-wide{max-width:720px}
.cknote{font-size:12.5px; color:var(--ink-soft); background:var(--accent-soft); border:1px solid #f2dfae;
  border-radius:10px; padding:10px 12px; margin:0 0 14px}
.codbadge{display:inline-flex; align-items:center; gap:7px; background:var(--brand-soft); color:var(--brand);
  font-size:12.5px; font-weight:700; border-radius:20px; padding:6px 12px}
.codbadge svg{width:15px; height:15px}

.confirm{text-align:center; padding:26px 22px 30px}
.confirm .tick{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:#e8f7ee;
  display:grid; place-items:center; color:var(--ok)}
.confirm .tick svg{width:32px; height:32px}
.confirm h2{margin:0 0 6px; font-size:20px}
.confirm p{margin:0 auto 16px; color:var(--ink-soft); font-size:13.5px; max-width:46ch}
.confirm .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:#f4f7fc;
  border:1px solid var(--line); border-radius:8px; padding:5px 10px; display:inline-block; margin-bottom:18px}
.confirm .btn{height:48px; justify-content:center; min-width:210px}

/* ---- the "Add to cart" / "Chat" switch on a card ---- */
.card-btn .btn-cart{background:var(--brand); border-color:var(--brand); color:#fff}
.card-btn .btn-cart svg{stroke:currentColor}

@media (max-width:880px){
  .drawer-card{top:auto; left:0; right:0; bottom:0; width:auto; max-height:88vh;
    border-radius:18px 18px 0 0; animation:slideUp .22s ease}
  @keyframes slideUp{from{transform:translateY(28px); opacity:.4} to{transform:none; opacity:1}}
  .drawer-foot{padding-bottom:22px}
  .sheet-wide{max-width:100%}
}

/* detail sheet: no photo on this listing yet */
.noimg{display:grid; place-items:center; height:100%; min-height:220px; color:var(--ink-faint);
  font-size:13px; background:#f6f8fc}

/* the sliding track holds all slides side by side; the arrows live outside it */
.slides{width:100%}
.slide.scontent{min-width:0}

/* ==========================================================================
   Owner panel (admin.html). Same tokens as the storefront.
   ========================================================================== */
.apage-bg{background:var(--bg)}

.gate{min-height:100vh; display:grid; place-items:center; padding:24px}
.gate-card{width:min(94vw,400px); background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:26px 24px 24px}
.gate-brand{margin-bottom:20px; text-align:center}
.gate-brand b{display:block; font-size:20px; letter-spacing:-.3px; color:var(--brand)}
.gate-brand span{font-size:12.5px; color:var(--ink-faint)}
.gate-card .field{margin-bottom:14px}
.gate-card .btn{width:100%; height:46px; justify-content:center; margin-top:6px}
.gate-note{text-align:center; font-size:12px; color:var(--ink-faint); margin:16px 0 0}

.ahead{background:var(--brand); color:#fff; position:sticky; top:0; z-index:30}
.ahead-in{display:flex; align-items:center; gap:14px; height:62px}
.ahead-brand b{font-size:15.5px; letter-spacing:-.2px}
.ahead-brand span{display:block; font-size:11.5px; opacity:.72}
.ahead-actions{margin-left:auto; display:flex; gap:8px}
.ahead-actions .btn{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.22); color:#fff}
.ahead-actions .btn:hover{background:rgba(255,255,255,.22)}

.apage{padding:22px 0 70px; max-width:1040px}
.anote{background:var(--accent-soft); border:1px solid #f2dfae; border-radius:12px; padding:14px 16px;
  font-size:13.5px; margin-bottom:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.anote .btn{margin-left:auto}

.atabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto}
.atab{border:0; background:none; padding:11px 15px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap}
.atab.on{color:var(--brand); border-bottom-color:var(--brand)}
.tcount{display:inline-block; font-size:11.5px; background:#eef2f8; color:var(--ink-soft);
  border-radius:20px; padding:1px 8px; margin-left:4px}

.arow{display:grid; grid-template-columns:52px minmax(0,1fr) auto auto; gap:14px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:9px}
.athumb{width:52px; height:52px; border-radius:9px; background:#f6f8fc; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden}
.athumb img{width:100%; height:100%; object-fit:contain; padding:4px}
.amain h4{margin:0 0 3px; font-size:14px; font-weight:600}
.asub{font-size:12px; color:var(--ink-faint)}
.apills{display:flex; gap:5px; margin-top:5px; flex-wrap:wrap}
.pill{font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-radius:20px; padding:3px 9px; background:#eef2f8; color:var(--ink-soft)}
.pill.ok{background:#e8f7ee; color:#15803d}
.pill.warn{background:var(--accent-soft); color:#a16207}
.pill.bad{background:#fdeaea; color:var(--sale, #c62828)}
.aprice{font-size:14.5px; font-weight:700; white-space:nowrap}
.arow .btn{height:36px; padding:0 14px; font-size:13px}

.ocard{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 17px; margin-bottom:11px}
.ohead{display:flex; align-items:center; gap:10px; margin-bottom:5px}
.ohead b{font-size:15px}
.ohead .pill{margin-left:auto}
.osub{font-size:12.5px; color:var(--ink-soft); margin-bottom:5px}
.oitems{margin:8px 0 10px; padding-left:18px; font-size:13px; color:var(--ink)}
.oitems li{margin-bottom:2px}
.oactions{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.oactions .btn{height:32px; padding:0 12px; font-size:12.5px}
.oactions .btn.on{background:var(--brand); border-color:var(--brand); color:#fff}

.checkrow{display:flex; gap:18px; flex-wrap:wrap}
@media (max-width:700px){
  .arow{grid-template-columns:46px minmax(0,1fr) auto; row-gap:8px}
  .arow .aprice{grid-column:2}
  .arow .btn{grid-column:3}
  .ahead-in{height:auto; padding-top:10px; padding-bottom:10px; flex-wrap:wrap}
  .apage{padding:16px 0 60px}
}


/* =============== PREMIUM FOOTER =============== */
footer.site{background:radial-gradient(120% 120% at 50% 0,#0d1a30 0%,#0a1220 55%,#070d18 100%);
  color:#cbd5e1; margin-top:26px; padding:40px 0 26px; border-top:1px solid #1b2740}
footer.site .wrap{display:block}

.fstore{display:flex; align-items:flex-start; gap:14px; margin:0 0 30px}
.fmark{width:72px; height:72px; flex:0 0 auto; border-radius:18px; background:#fff; padding:6px; object-fit:contain;
  box-shadow:0 8px 24px rgba(0,0,0,.35); align-self:flex-start; margin-top:-4px}
.fstore-t{min-width:0}
.fstore-t .fname{color:#fff; font-size:20px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; line-height:1.15}
.fstore-t .ftag{color:var(--orange); font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:5px}
.fstore-t .fpromise{color:#e7edf7; font-size:13px; font-weight:600; margin-top:6px; letter-spacing:.2px}
footer.site p.fdesc{margin:6px 0 0; font-size:12.5px; line-height:1.6; color:#8f9db3; max-width:620px}

footer.site h4.fsec{color:var(--orange); margin:0 0 12px; font-size:12px; letter-spacing:1.6px; font-weight:800}
footer.site p.fabout{margin:0 0 18px; max-width:820px; font-size:13.5px; line-height:1.75; color:#aab6c8}

.fhighlights{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px}
.fh{display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  background:rgba(238,174,37,.09); border:1px solid rgba(238,174,37,.28); color:#f2f5fa; font-size:12.5px; font-weight:600}
.fh .tick{width:14px; height:14px; color:var(--orange); flex:0 0 auto}

.fcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 34px}
.fcard{position:relative; display:block; text-decoration:none; color:#e2e8f0; cursor:pointer;
  background:rgba(255,255,255,.035); border:1px solid #22304c; border-radius:12px; padding:16px 16px 34px;
  transition:border-color .18s, transform .18s, background .18s, box-shadow .18s}
/* jo page Owner Panel mein Draft hai uska card halka + non-clickable */
.fcard.is-off{opacity:.45; pointer-events:none}

.fcard:hover,.fcard:focus-visible{border-color:var(--orange); background:rgba(238,174,37,.07);
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.32); outline:none}
.fcard .ic{display:block; width:24px; height:24px; color:var(--orange); margin-bottom:13px}
.fcard .t{display:block; font-size:15.5px; font-weight:700; color:#fff; line-height:1.25; letter-spacing:.1px}
.fcard .s{display:block; font-size:12.5px; color:#94a3b8; margin-top:6px; line-height:1.5}
.fcard .ar{position:absolute; right:15px; bottom:12px; color:var(--orange); font-size:15px; line-height:1;
  transition:transform .18s}
.fcard:hover .ar{transform:translate(2px,-2px)}

.fbottom-cols{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:32px; margin-bottom:8px}
footer.site .fcontact{display:flex; flex-direction:column; gap:12px}
footer.site .fcontact p{display:flex; align-items:flex-start; gap:11px; margin:0; font-size:13.5px; color:#cbd5e1; line-height:1.55}
/* footer ke contact block mein "Contact page" wala link */
.fcontact .fmore{margin-top:6px}
.fcontact .fmore a{color:var(--gold); font-weight:700; font-size:12.5px; text-decoration:none;
  border-bottom:1px solid rgba(238,174,37,.45); padding-bottom:1px}
.fcontact .fmore a:hover{border-bottom-color:var(--gold)}

footer.site .fcontact svg{flex:0 0 auto; width:18px; height:18px; color:var(--orange); margin-top:1px}
footer.site .fcontact a{color:#e7edf7; text-decoration:none; border-bottom:1px solid rgba(238,174,37,.45); padding-bottom:1px}
footer.site .fcontact a:hover{color:#fff; border-bottom-color:var(--orange)}

.fsocials{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.fsoc{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px;
  border:1px solid #22304c; background:rgba(255,255,255,.035); color:#e7edf7; text-decoration:none; transition:.18s}
.fsoc svg{width:20px; height:20px}
.fsoc:hover{border-color:var(--orange); color:var(--orange); background:rgba(238,174,37,.08); transform:translateY(-1px)}
.fsoc.is-off{opacity:.45; cursor:not-allowed; pointer-events:none}
.fsoc.is-off:hover{border-color:#22304c; color:#e7edf7; background:rgba(255,255,255,.035); transform:none}
footer.site p.fnote-small{margin:0; font-size:11.5px; line-height:1.55; color:#6f7d92; max-width:320px}

.fslogan{margin:26px 0 0; padding-top:22px; border-top:1px solid #1b2740; text-align:center;
  color:var(--orange); font-size:15px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase}
.fnote{border-top:1px solid #1b2740}
.fnote span{color:#8592a6}

@media (max-width:820px){
  .fbottom-cols{grid-template-columns:minmax(0,1fr); gap:26px}
}
@media (max-width:520px){
  footer.site{padding:32px 0 22px}
  .fstore{gap:13px; margin-bottom:24px}
  .fmark{width:58px; height:58px; border-radius:15px}
  .fstore-t .fname{font-size:17px}
  .fstore-t .fpromise{font-size:12px}
  .fcards{gap:11px}
  .fcard{padding:13px 13px 30px; border-radius:12px}
  .fcard .t{font-size:14px}
  .fcard .s{font-size:11.5px}
  .fcard .ic{width:21px; height:21px; margin-bottom:11px}
  .fh{font-size:12px; padding:7px 11px}
  .fslogan{font-size:13px; letter-spacing:1px}
}

/* ============================================================================
   CATEGORY CARDS — All / Mobiles / Accessories / Spare Parts / Saved
   Sab ek hi line mein, screen se zyada hone par side se SLIDE hote hain.
   Har card par ribbon (naam) + bara icon + neeche chhota button.
   Chunida card bhara hua hota hai aur thora ooncha khara hota hai.
   Note: ribbon card se 6px bahar nikalti hai (dono taraf 12px), is liye cards ka gap
   20px hai — warna dono ribbons ek doosre ko touch kar leti hain. Inner ki padding 20px hai
   taake pehle/aakhri card ka kinara page ke margin se bahar na jaye.
   ============================================================================ */
.catbar .inner{
  display:flex; flex-wrap:nowrap; align-items:flex-end;
  overflow-x:auto; overflow-y:visible;
  gap:20px; padding:25px 20px 16px;
  scroll-snap-type:x proximity; scroll-snap-stop:always;
  /* snap ko padding ka lihaz karna chahiye, warna pehla card page ke kinare se
     chimat jata hai (pehle 8px left scroll ho jata tha) */
  scroll-padding-left:20px; scroll-padding-right:20px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;               /* Firefox */
}
.catbar .inner::-webkit-scrollbar{display:none}   /* Chrome / Safari */

.catbar .chip{
  flex:0 0 126px; width:126px; margin:0;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.catbar .chip .face{height:auto; min-height:130px; padding:25px 8px 12px}
.catbar .chip.on .face{height:auto; min-height:142px}
.catbar .chip .ribbon{font-size:9.5px; letter-spacing:.55px; padding:0 4px; overflow:hidden; text-overflow:ellipsis}
.catbar .chip .cic svg{width:30px; height:30px}
.catbar .chip .cbtn{padding:6px 14px; font-size:9px; letter-spacing:.4px}
.catbar .chip:first-child{margin-left:2px}
.catbar .chip:last-child{margin-right:2px}

@media (min-width:760px){
  .catbar .inner{justify-content:center; gap:22px; padding:26px 24px 18px}
  .catbar .chip{flex:0 0 138px; width:138px}
}
/* photo arrows removed (swipe only) */
.gal .nav{display:none !important}
/* full screen photo viewer (public site) */
.pzoom{position:fixed; inset:0; z-index:9999; background:#0b1220}
.pzoom[hidden]{display:none}
.pzStrip{height:100%; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none}
.pzStrip::-webkit-scrollbar{display:none}
.pzStrip img{flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:center; scroll-snap-stop:always}
.pzClose{position:absolute; top:14px; left:16px; z-index:2; width:40px; height:40px; border:0; border-radius:12px;
  background:rgba(255,255,255,.16); color:#fff; font-size:18px; display:grid; place-items:center}
.pzCount{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#fff;
  background:rgba(255,255,255,.16); padding:5px 12px; border-radius:12px; font-size:12.5px; font-weight:700}
body.zoomopen{overflow:hidden}
/* spinner while the full screen photo is still downloading */
.pzoom.pzload::after{content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
  border:3px solid rgba(255,255,255,.22); border-top-color:#fff; border-radius:50%;
  animation:pzspin .8s linear infinite; pointer-events:none; z-index:1}
@keyframes pzspin{to{transform:rotate(360deg)}}

/* ---- placeholders while the first products arrive (no layout jump) ---- */
.card.sk{pointer-events:none}
.card.sk .thumb{background:#eef2f8}
.card.sk .cbody{padding-top:2px}
.sk-l{height:12px;border-radius:8px;background:#eef2f8;margin-top:8px}
.sk-l.p{height:16px;width:55%}
.sk-l.n{width:88%}
.sk-l.m{width:45%;height:10px}
@keyframes skpulse{0%,100%{opacity:.6}50%{opacity:1}}
.card.sk .thumb,.card.sk .sk-l{animation:skpulse 1.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.card.sk .thumb,.card.sk .sk-l{animation:none}}

/* keep the banner + category strip the right size before the first render */
@media (max-width:760px){
  body:not(.qm-ready) #banner{min-height:186px}
  body:not(.qm-ready) #chips{min-height:172px}
}