/* ===== v10 products page: quick view, enquiry list, photo placeholders ===== */
.p-tip{margin:16px 0 0!important;font-size:13px!important;background:#fff7f0;border:1px dashed #ffc9a6;border-radius:12px;padding:10px 14px;color:#7a4a26!important;max-width:520px}
.p-tip b{color:var(--orange)}

/* card */
.pc-img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;text-align:left;border-radius:12px;overflow:hidden}
.pc-img img,.pc-img .ph{transition:transform .6s var(--ease)}
.pc:hover .pc-img img,.pc:hover .pc-img .ph{transform:scale(1.06)}
.qv-hint{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);background:rgba(6,30,70,.82);color:#fff;font-size:11px;font-weight:800;padding:6px 12px;border-radius:20px;opacity:0;transition:.3s var(--ease);white-space:nowrap;backdrop-filter:blur(6px)}
.pc:hover .qv-hint,.pc-img:focus-visible .qv-hint{opacity:1;transform:translate(-50%,0)}
.pc-img:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.pc-b h3 button{all:unset;cursor:pointer}.pc-b h3 button:hover{color:var(--orange)}
.pc-b h3 button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.pc-act{display:flex;flex-direction:column;gap:8px}
.add{border:1.5px dashed #9cc0ea;background:#f4f9ff;color:var(--blue2);border-radius:10px;padding:9px 10px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:.25s var(--ease)}
.add:hover{border-color:var(--orange);color:var(--orange);background:#fff7f0}
.add.on{border-style:solid;border-color:#1f9d55;background:#e7f8ee;color:#137a3e}

/* "photo coming soon" tile */
.ph{width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:linear-gradient(135deg,#f3f8fe,#e5eef9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;color:#8aa0bb}
.ph svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.ph b{color:var(--blue);font-size:13px;line-height:1.3}.ph small{font-size:10.5px}

/* enquiry bar */
.ebar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:14px;background:#062f63;color:#fff;border-radius:18px;padding:10px 10px 10px 14px;box-shadow:0 18px 44px rgba(6,30,70,.4);animation:ebin .45s var(--ease);width:min(460px,calc(100% - 120px))}
.ebar[hidden]{display:none}
@keyframes ebin{from{transform:translate(-50%,30px);opacity:0}}
.eb-ico{position:relative;font-size:22px}.eb-ico b{position:absolute;right:-8px;top:-8px;min-width:20px;height:20px;border-radius:10px;background:var(--orange);font-size:11px;display:grid;place-items:center;padding:0 5px}
.eb-txt{flex:1;display:flex;flex-direction:column;line-height:1.25}.eb-txt b{font-size:14px}.eb-txt small{font-size:12px;color:#c7d9ed}
.ebar .btn{padding:10px 16px;background:#fff;border-color:#fff;color:var(--blue)}
.ebar .btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}

/* drawer */
.edrawer,.qv{position:fixed;inset:0;z-index:150;background:rgba(4,14,32,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.edrawer.on,.qv.on{opacity:1;visibility:visible}
.edrawer aside{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.2)}
.edrawer.on aside{transform:none}
.ed-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.ed-head h3{margin:0;font-size:19px}
.ed-head button,.qv-x{border:0;width:38px;height:38px;border-radius:50%;background:#eef5fd;color:var(--blue);cursor:pointer;font-size:15px}
.ed-head button:hover,.qv-x:hover{background:var(--orange);color:#fff}
#elist{list-style:none;margin:0;padding:10px 22px;flex:1;overflow-y:auto}
#elist li{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf2f8}
#elist .el-img img,#elist .el-img .ph{width:54px;height:54px;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);padding:0}
#elist .el-img .ph b,#elist .el-img .ph small{display:none}#elist .el-img .ph svg{width:22px;height:22px}
#elist b{display:block;font-size:14px;line-height:1.3}#elist small{font-size:12px;color:var(--muted)}
#elist li>button{border:0;background:none;color:#9aabbf;cursor:pointer;width:32px;height:32px;border-radius:50%;font-size:13px}
#elist li>button:hover{background:#fdecec;color:#b42318}
#elist .el-empty{display:block;color:var(--muted);text-align:center;padding:40px 0;border:0}
.ed-foot{padding:18px 22px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-align:center}
.ed-foot small{color:var(--muted);font-size:12px}
.btn.wa{background:#25d366;color:#fff;box-shadow:0 10px 22px rgba(37,211,102,.3)}.btn.wa:hover{background:#1fb457;transform:translateY(-2px)}
.btn.wa.off{opacity:.5;pointer-events:none}
.ed-clear{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}.ed-clear:hover{color:#b42318}

/* quick view */
.qv{display:flex;align-items:center;justify-content:center;padding:16px}
.qv-box{position:relative;width:min(860px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:translateY(20px) scale(.97);transition:transform .4s var(--ease)}
.qv.on .qv-box{transform:none}
.qv-x{position:absolute;right:14px;top:14px;z-index:2}
.qv-img{padding:16px}.qv-img img,.qv-img .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.qv-b{padding:34px 30px 28px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.qv-b .tag{position:static}.qv-b>small{color:var(--muted);font-size:13px}
.qv-b h3{margin:0;font-size:clamp(22px,3vw,28px);line-height:1.15}
.qv-b p{margin:4px 0 8px;color:#4c627c;line-height:1.65;font-size:15px}
.qv-act{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:auto}
.qv-act .add{padding:12px;font-size:14px}
.qv-note{font-size:11.5px;color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;top:90px;z-index:300;transform:translate(-50%,-16px);background:#062f63;color:#fff;font-size:13px;font-weight:700;padding:10px 18px;border-radius:30px;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.3s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* dark mode */
html[data-theme=dark] .p-tip{background:#1d1712;border-color:#5a3a22;color:#e9c3a4!important}
html[data-theme=dark] .add{background:#14244a;border-color:#3f6fb8;color:#9bc1ff}
html[data-theme=dark] .add.on{background:#0f3220;border-color:#1d5636;color:#6fe0a0}
html[data-theme=dark] .ph{background:linear-gradient(135deg,#13213f,#182a50);border-color:#2a3d63;color:#5f7aa5}
html[data-theme=dark] .ph b{color:#cfe0ff}
html[data-theme=dark] .edrawer aside,html[data-theme=dark] .qv-box{background:#0e1830}
html[data-theme=dark] .ed-head,html[data-theme=dark] .ed-foot{border-color:#243759}
html[data-theme=dark] #elist li{border-color:#1c2c4b}
html[data-theme=dark] .ed-head button,html[data-theme=dark] .qv-x{background:#16264a;color:#cfe0ff}
html[data-theme=dark] .qv-b p{color:#b9c9e6}
html[data-theme=dark] .ebar{background:#13254a;border:1px solid #2a3d63}

/* responsive */
@media(max-width:700px){
.qv{align-items:flex-end;padding:0}
.qv-box{grid-template-columns:1fr;border-radius:24px 24px 0 0;max-height:92vh;transform:translateY(100%)}
.qv-img{padding:14px 14px 0}.qv-img img,.qv-img .ph{aspect-ratio:4/3}
.qv-b{padding:18px 20px 24px}
}
@media(max-width:520px){
.pc-act .btn{font-size:12.5px;padding:9px 6px}.add{font-size:11.5px;padding:8px 6px}
.qv-hint{display:none}
.ebar{left:12px;right:84px;transform:none;width:auto;bottom:12px;padding:8px 8px 8px 12px;gap:10px;animation:none}
.eb-txt small{display:none}.ebar .btn{padding:9px 12px;font-size:13px}
.ph b{font-size:11.5px}.ph svg{width:30px;height:30px}
}

/* ===== v12: type filters, paints banner, variant/size picking ===== */
.types{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-4px 0 16px}
.types[hidden]{display:none}
.types>span{font-size:12px;font-weight:800;color:var(--muted);margin-right:2px}
.types button{border:1px dashed #9cc0ea;background:#f4f9ff;color:var(--blue2);border-radius:20px;padding:7px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.2s var(--ease)}
.types button em{font-style:normal;font-size:11px;opacity:.7;margin-left:2px}
.types button:hover{border-color:var(--orange);color:var(--orange)}
.types button.on{background:var(--blue);border:1px solid var(--blue);color:#fff}
.paint-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(110deg,#fff7f0,#eef5ff);border:1px solid #ffd9bf;border-radius:18px;padding:14px 16px;margin-bottom:18px}
.paint-bar[hidden]{display:none}
.pb-swatch{display:flex;flex:0 0 auto}.pb-swatch i{width:16px;height:40px;border-radius:5px;margin-right:-4px;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.pb-swatch i:nth-child(1){background:#c9463d}.pb-swatch i:nth-child(2){background:#f2c94c}.pb-swatch i:nth-child(3){background:#7fb069}.pb-swatch i:nth-child(4){background:#3d74b8}.pb-swatch i:nth-child(5){background:#6b4fa0}
.pb-txt{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}.pb-txt b{font-size:15px}.pb-txt span{font-size:13px;color:var(--muted)}
.pb-act{display:flex;gap:8px;flex-wrap:wrap}.pb-act .btn{padding:10px 14px;font-size:13px}
.pc-meta{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;color:var(--blue2);background:#eef5ff;border-radius:20px;padding:3px 9px;margin:-4px 0 10px}
.qv-pick{display:flex;flex-direction:column;gap:6px;width:100%}
.qv-pick[hidden]{display:none}
.qv-pick>span{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.qv-chips{display:flex;flex-wrap:wrap;gap:6px}
.qv-chips button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:.2s var(--ease)}
.qv-chips button:hover{border-color:var(--orange)}
.qv-chips button.on{background:var(--orange);border-color:var(--orange);color:#fff}
.qv-shade{font-size:12.5px;line-height:1.55;color:#7a4a26;background:#fff7f0;border:1px dashed #ffc9a6;border-radius:12px;padding:10px 12px;width:100%}
.qv-shade[hidden]{display:none}.qv-shade a{color:var(--orange);font-weight:800}.qv-shade a[hidden]{display:none}
html[data-theme=dark] .types button{background:#14244a;border-color:#3f6fb8;color:#9bc1ff}
html[data-theme=dark] .types button.on{background:#2f6fd1;border-color:#2f6fd1;color:#fff}
html[data-theme=dark] .paint-bar{background:linear-gradient(110deg,#1d1712,#0f1a33);border-color:#5a3a22}
html[data-theme=dark] .pc-meta{background:#16264a;color:#9bc1ff}
html[data-theme=dark] .qv-chips button{background:#111e3a;border-color:#2a3d63;color:#e6edfb}
html[data-theme=dark] .qv-chips button.on{background:var(--orange);border-color:var(--orange);color:#fff}
html[data-theme=dark] .qv-shade{background:#1d1712;border-color:#5a3a22;color:#e9c3a4}
@media(max-width:520px){.pb-act{width:100%}.pb-act .btn{flex:1}.types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.types button{flex:0 0 auto}.pc-meta{font-size:10px}}


/* fix: active category/brand row in the sidebar (was overridden by .side button:not(#sx)) */
.side button.on:not(#sx),.side button.on:not(#sx):hover{background:var(--orange);color:#fff;font-weight:700;padding-left:12px}

/* mobile quick view: shorter photo, actions pinned to the bottom of the sheet */
@media(max-width:700px){
.qv-img img,.qv-img .ph{aspect-ratio:auto;height:min(30vh,240px);object-fit:contain;background:#fff}
.qv-b{padding-bottom:0}
.qv-act{position:sticky;bottom:0;z-index:2;background:#fff;margin:4px -20px 0;padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(8,45,93,.08)}
.qv-note{padding-bottom:18px}
html[data-theme=dark] .qv-act{background:#0e1830;border-color:#243759}
html[data-theme=dark] .qv-img img{background:#16264a}
}