/* /templates/<slug> product detail pages */
.pdp{overflow-x:clip}
.pd-hero{position:relative;padding:34px 0 46px}
.pd-hero::before{content:"";position:absolute;inset:-80px 0 0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 12% 20%,rgb(207 242 242/.55),rgb(207 242 242/0) 70%),radial-gradient(45% 60% at 88% 30%,rgb(228 247 247/.7),rgb(228 247 247/0) 70%)}
.pd-hg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,4vw,64px);align-items:center}
.pd-bc{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:22px}
.pd-bc a{color:var(--teal-d)}.pd-bc a:hover{text-decoration:underline}
.pd-bc [aria-current]{color:var(--ink2)}
.pd-k{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);background:#fff;border-radius:999px;padding:8px 14px 8px 10px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac) 28%,#fff)}
.pd-k svg{width:18px;height:18px}
.pd-hero h1{margin-top:16px;font-size:clamp(38px,4.6vw,64px);line-height:1.04;letter-spacing:-.04em;font-weight:800;color:var(--ink)}
.pd-sum{margin-top:16px;font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--muted);font-weight:500;max-width:560px}
.pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px}
.pd-buy svg{width:18px;height:18px}
.pd-price{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.pd-soon{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#FFF4D6;color:#7A5200;font-size:13.5px;font-weight:800}
.pd-by{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:700;color:var(--ink2)}
.pd-by img{width:26px;height:26px}
.pd-art{position:relative;display:block;border-radius:28px;padding:clamp(12px,1.4vw,20px);background:linear-gradient(140deg,var(--t1),var(--t2) 60%,#E3F8F7);box-shadow:var(--shadow),inset 0 0 0 1.5px #D4EFEE}
.pd-art img{display:block;width:100%;height:auto;border-radius:18px}
.pd-live{position:absolute;right:clamp(22px,2.4vw,34px);bottom:clamp(22px,2.4vw,34px);display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--teal-d);font-size:13.5px;font-weight:800;border-radius:999px;padding:9px 14px;box-shadow:0 10px 24px -12px rgba(2,60,70,.45)}
.pd-live{z-index:3;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .2s ease}
.pd-live:hover{transform:translateY(-2px);background:#F2FCFC;box-shadow:0 14px 28px -12px rgba(2,60,70,.5)}
.pd-live:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.pd-facts{padding:0 0 10px}
.pd-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.pd-meta div{background:#fff;padding:18px 22px}
.pd-meta dt{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.pd-meta dd{margin-top:4px;font-size:16.5px;font-weight:700;color:var(--ink)}
.pd-sec{padding:64px 0}
.pd-alt{background:linear-gradient(180deg,#F3FBFB,#fff)}
.pd-h{max-width:760px}
.pd-lead{margin-top:14px;font-size:17px;line-height:1.65;color:var(--muted)}
.pd-pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px}
.pd-pg{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;transition:border-color .18s,box-shadow .18s,transform .18s}
.pd-pg:hover{border-color:#9FE3E3;box-shadow:0 18px 40px -26px rgba(2,60,70,.45);transform:translateY(-2px)}
.pd-pg h3{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pd-pg p{font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.pd-pgl{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--teal-d)}
.pd-pgl svg{width:14px;height:14px}
.pd-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.pd-alt .pd-cols{margin-top:0}
.pd-box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.pd-box h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;color:var(--ink)}
.pd-secs{list-style:none;counter-reset:s;display:grid;gap:9px}
.pd-secs li{counter-increment:s;display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ink2);font-weight:600}
.pd-secs li::before{content:counter(s,decimal-leading-zero);flex:none;font-size:12px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums}
.pd-ul{list-style:none;display:grid;gap:11px}
.pd-ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink2)}
.pd-ul li svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--teal)}
.pd-pal{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-pal li{display:flex;flex-direction:column;gap:3px;font-size:13px}
.pd-pal i{display:block;height:46px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(7,14,31,.1)}
.pd-pal b{margin-top:4px;color:var(--ink)}.pd-pal code{color:var(--muted);font-size:12px}
.pd-fonts{margin-top:16px;font-weight:700;color:var(--ink2);font-size:15px}
.pd-small{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.pd-small code,.pd-box code{font-size:.92em;background:#ECF9F8;border-radius:6px;padding:1px 6px}
.pd-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pd-note{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.pd-ni{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#E3F7F6;color:var(--teal-d)}
.pd-ni svg{width:22px;height:22px}
.pd-note h3{font-size:16.5px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.pd-note p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.pd-note a{color:var(--teal-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1020px){.pd-hg{grid-template-columns:1fr}.pd-art{max-width:720px}.pd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.pd-notes{grid-template-columns:1fr}}
@media (max-width:720px){.pd-cols{grid-template-columns:1fr}.pd-sec{padding:44px 0}.pd-hero{padding:22px 0 34px}.pd-box{padding:20px}.pd-buy .btn{flex:1 1 auto}.pd-meta div{padding:14px 16px}.pd-meta dd{font-size:15px}}
.pd-pw{display:flex;flex-direction:column;gap:2px;margin:0 4px 0 0;line-height:1.15}
.pd-pw b{display:inline-flex;align-self:flex-start;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:#D9F5F5;color:#0A6C6D;font-size:14px;font-weight:800}
.pd-pw span{font-size:13px;font-weight:700;color:var(--muted);padding-left:13px;margin-top:4px}
.pd-pwn{margin:14px 0 0;font-size:13.5px;color:var(--muted);max-width:46ch}
@media (max-width:720px){.pd-pw{flex:1 1 100%;flex-direction:row;align-items:center;gap:10px}.pd-pw span{padding-left:0;margin-top:0}}

/* card UX v1 */
.pd-im{display:block;width:100%;height:auto;border-radius:18px}
.pd-rel{padding-top:56px}
.pd-rh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pd-rh>a{font-weight:800;color:var(--teal-d);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pd-rh>a:hover{text-decoration:underline;text-underline-offset:3px}
.pd-xg{margin-top:28px}
.pd-pg{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .2s ease}
@media (hover:hover){.pd-pg:hover{transform:translateY(-3px)}}
.pd-bc a{transition:color .2s ease}
@media (prefers-reduced-motion:reduce){.pd-live,.pd-pg{transition:none}.pd-live:hover,.pd-pg:hover{transform:none}}
@media (min-width:1021px){.pd-pages{grid-template-columns:repeat(var(--c,4),minmax(0,1fr))}}
@media (min-width:1281px){.pd-x5{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px}.pd-x5 .xc h3{font-size:15px}}