/* single product page - glassmorphism, scoped under .pp-page */
.pp-page{--blue:#175aa8;--blue-d:#0e3a6e;--blue-l:#2f7fd4;--green:#2eaa4f;--green-d:#1f8a3d;--ink:#0f1b2d;--muted:#5b6b80;
 --line:rgba(23,90,168,.14);--glass:rgba(255,255,255,.62);--r:18px;--r-lg:26px;
 --shadow:0 22px 60px -28px rgba(14,58,110,.45);--shadow-sm:0 10px 26px -18px rgba(14,58,110,.5);
 font-family:Manrope,system-ui,sans-serif;color:var(--ink);
 background:radial-gradient(900px 420px at 86% -8%,rgba(47,127,212,.15),transparent 65%),radial-gradient(650px 340px at 4% 10%,rgba(46,170,79,.1),transparent 60%),#fff;
 padding:26px 0 80px}
.pp-page h1,.pp-page h2,.pp-page h3{font-family:Sora,sans-serif;margin:0;letter-spacing:-.02em;line-height:1.18}
.pp-page a{color:inherit;text-decoration:none}
.pp-page svg,.pp-page video{display:block;max-width:100%}
.pp-page .wrap{max-width:1240px;margin:0 auto;padding:0 20px}

.pp-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:Manrope;font-weight:700;font-size:14px;padding:14px 22px;border-radius:999px;transition:.25s}
.pp-page .btn:hover{transform:translateY(-2px)}
.pp-page .btn:disabled{opacity:.6;cursor:default;transform:none}
.pp-page .btn-green{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:0 16px 30px -14px rgba(31,138,61,.75)}
.pp-page .btn-blue{background:linear-gradient(135deg,var(--blue-l),var(--blue));color:#fff;box-shadow:0 16px 30px -14px rgba(23,90,168,.8)}
.pp-page .btn-ghost{background:var(--glass);color:var(--blue-d);border:1px solid var(--line);backdrop-filter:blur(14px)}

.pp-page .top{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:start;margin-top:16px}
@media(max-width:950px){.pp-page .top{grid-template-columns:1fr}}

/* gallery */
.pp-page .stage{position:relative;background:linear-gradient(160deg,#fbfdff,#eaf3fd);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:22px;box-shadow:var(--shadow-sm);backdrop-filter:blur(18px);overflow:hidden}
.pp-page .stage .blob{position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;bottom:-80px;background:rgba(46,170,79,.14)}
.pp-page .frame{display:none}.pp-page .frame.on{display:block}
.pp-page .frame img{margin:0 auto;max-width:100%;max-height:430px;display:block;border-radius:14px}
.pp-page .frame video{width:100%;border-radius:18px;background:#0f1b2d}
.pp-page .badge{position:absolute;top:20px;left:20px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 padding:6px 12px;border-radius:99px;background:rgba(46,170,79,.16);color:var(--green-d)}
.pp-page .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
@media(max-width:600px){.pp-page .thumbs{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.pp-page .thumbs{grid-template-columns:repeat(3,1fr)}}
.pp-page .thumbs button{border:1px solid var(--line);background:rgba(255,255,255,.66);border-radius:16px;padding:4px;cursor:pointer;transition:.25s;position:relative;backdrop-filter:blur(12px)}
.pp-page .thumbs button.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,90,168,.14)}
.pp-page .thumbs img{width:100%;height:56px;object-fit:contain;border-radius:10px}
.pp-page .thumbs .play{display:grid;place-items:center;height:56px;font-size:12px;font-weight:700;color:var(--blue-d);
 background:linear-gradient(150deg,#e9f2fd,#dcecfa);border-radius:10px}

/* buy box */
.pp-page .brandline{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-l)}
.pp-page h1{font-size:clamp(22px,3vw,31px);margin:10px 0 12px}
.pp-page .rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pp-page .rating i{color:#f0a52a;font-style:normal;letter-spacing:2px}
.pp-page .bullets{margin:18px 0 0;padding:0;list-style:none}
.pp-page .bullets li{position:relative;padding-left:26px;font-size:14px;line-height:1.55;color:#26364c;margin-bottom:9px}
.pp-page .bullets li:before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
 background:linear-gradient(135deg,var(--green),var(--green-d));box-shadow:0 0 0 4px rgba(46,170,79,.14)}
.pp-page .empty-note{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:14px}
.pp-page .buybox{margin-top:22px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)}
.pp-page .vat{font-size:12px;color:var(--muted);margin-top:8px}
.pp-page .opts{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.pp-page .opt{font-size:12.5px;font-weight:700;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.7);cursor:pointer;transition:.2s}
.pp-page .opt.on{border-color:var(--blue);background:rgba(23,90,168,.08);color:var(--blue-d)}
.pp-page .opt small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.pp-page .qtyrow{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:18px}
.pp-page .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden}
.pp-page .qty button{width:42px;height:48px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--blue-d)}
.pp-page .qty span{width:42px;text-align:center;font-weight:700}
.pp-page .qtyrow .btn{flex:1;min-width:170px}
.pp-page .assure{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;font-size:12.5px;color:#26364c}
.pp-page .assure div{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.pp-page .assure b{display:block;font-size:12.5px}
.pp-page .assure span{color:var(--muted);font-size:11.5px}
.pp-page .stock-in{color:var(--green-d);font-weight:700}
.pp-page .stock-out{color:#c0392b;font-weight:700}

/* tabs */
.pp-page .tabsec{margin-top:52px}
.pp-page .tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.pp-page .tabs button{font-family:Manrope;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--muted);transition:.25s}
.pp-page .tabs button.on{background:var(--glass);border-color:var(--line);color:var(--blue-d);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm)}
.pp-page .panel{display:none;margin-top:26px}
.pp-page .panel.on{display:block}
.pp-page .panel h3{font-size:17px;margin:0 0 10px}
.pp-page .panel p{font-size:14.2px;line-height:1.72;color:#26364c;max-width:840px}
.pp-page .panel h4{font-family:Sora;font-size:14px;margin:22px 0 8px}
.pp-page .spec-table-wrap{max-width:720px;overflow-x:auto}
.pp-page .spec-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;min-width:420px}
.pp-page .spec-table th,.pp-page .spec-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.pp-page .spec-table th{color:var(--muted);font-weight:600;width:52%}
.pp-page .spec-table td{font-weight:700;word-break:break-word}
.pp-page .reviews-wrap{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;backdrop-filter:blur(16px)}

/* related */
.pp-page .related-head{display:flex;align-items:baseline;justify-content:space-between;margin-top:52px}