/* Single product page v2 (product.php). Scoped to #product-page. */
#product-page { --bg:#0b1730; --line:rgba(147,185,255,.2); --muted:#a9c1e6; --card:linear-gradient(170deg,rgba(24,44,82,.85),rgba(13,27,54,.9));
    background:radial-gradient(900px 480px at 85% 0,rgba(37,99,235,.2),transparent 60%),var(--bg);
    color:#fff; min-height:100vh; padding:132px 0 96px; font-family:Arial,Helvetica,sans-serif; }
#product-page *, #product-page *::before, #product-page *::after { box-sizing:border-box; }
#product-page .pd-wrap { width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }
#product-page [hidden] { display:none !important; }

/* breadcrumb */
#product-page .pd-crumbs { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:26px; font-size:13.5px; color:var(--muted); }
#product-page .pd-crumbs a { color:#cfe0ff; text-decoration:none; } #product-page .pd-crumbs a:hover { color:#fff; text-decoration:underline; }
#product-page .pd-crumb-current { color:#fff; max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* top: gallery + buy box */
#product-page .pd-top { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:start; }
#product-page .pd-top > * { min-width:0; }
#product-page .pd-gallery { position:sticky; top:104px; }
#product-page .pd-main { position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#0c1a35; cursor:zoom-in; aspect-ratio:5/4; }
#product-page .pd-main img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
#product-page .pd-main:hover img { transform:scale(1.03); }
#product-page .pd-zoom { position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; background:rgba(8,18,40,.72); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:12.5px; font-weight:700; }
#product-page .pd-zoom svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#product-page .pd-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; margin-top:12px; }
#product-page .pd-thumb { padding:0; aspect-ratio:1; border:2px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; cursor:pointer; opacity:.75; transition:opacity .2s, border-color .2s, transform .2s; }
#product-page .pd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#product-page .pd-thumb:hover { opacity:1; transform:translateY(-2px); }
#product-page .pd-thumb.is-active { opacity:1; border-color:#ffc107; }

/* buy box */
#product-page .pd-buy { padding-top:6px; }
#product-page .pd-cat { display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px; background:rgba(255,193,7,.14); border:1px solid rgba(255,193,7,.4); color:#ffd45a; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
#product-page .pd-buy h1 { margin:0 0 14px; font-size:clamp(24px,2.5vw,36px); font-weight:800; line-height:1.15; letter-spacing:-.025em; overflow-wrap:anywhere; }
#product-page .pd-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-bottom:22px; color:var(--muted); font-size:14.5px; }
#product-page .pd-rating { display:inline-flex; align-items:center; gap:10px; color:var(--muted); text-decoration:none; } #product-page .pd-rating:hover { color:#fff; text-decoration:underline; }
#product-page .pd-stars { color:#fbbf24; letter-spacing:2px; font-size:17px; } #product-page .pd-stars--lg { font-size:22px; }
#product-page .pd-brand strong { color:#fff; }
#product-page .pd-price { margin:0 0 24px; font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }

#product-page .pd-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
#product-page .pd-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 30px; border-radius:14px; border:0; font:inherit; font-size:16px; font-weight:800; cursor:pointer; transition:transform .2s, background .2s, box-shadow .2s, border-color .2s; }
#product-page .pd-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#product-page .pd-btn--primary { flex:1 1 220px; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; box-shadow:0 12px 28px rgba(37,99,235,.42); }
#product-page .pd-btn--primary:hover { background:linear-gradient(135deg,#4f8ff7,#2f6df0); transform:translateY(-2px); }
#product-page .pd-btn--ghost { flex:1 1 160px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.3); }
#product-page .pd-btn--ghost:hover { background:rgba(255,193,7,.14); border-color:#ffc107; color:#ffd45a; transform:translateY(-2px); }
#product-page .pd-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

#product-page .pd-points { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; color:#cfe0ff; font-size:14.5px; }
#product-page .pd-points li { display:flex; gap:10px; align-items:center; }
#product-page .pd-points svg { flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:rgba(52,211,153,.18); fill:none; stroke:#34d399; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

#product-page .pd-help { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 20px; margin-bottom:22px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
#product-page .pd-help strong { display:block; margin-bottom:3px; font-size:15.5px; } #product-page .pd-help span { color:var(--muted); font-size:14px; line-height:1.5; }
#product-page .pd-help-link { padding:11px 18px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
#product-page .pd-help-link:hover { background:rgba(255,255,255,.18); }

#product-page .pd-share { display:flex; align-items:center; gap:10px; }
#product-page .pd-share > span { margin-right:4px; color:var(--muted); font-size:13.5px; font-weight:700; }
#product-page .pd-social { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#fff; transition:transform .2s, opacity .2s; }
#product-page .pd-social svg { width:20px; height:20px; } #product-page .pd-social:hover { transform:translateY(-2px); opacity:.9; }
#product-page .pd-social--wa { background:#128c7e; } #product-page .pd-social--fb { background:#1877f2; } #product-page .pd-social--x { background:#000; border:1px solid #333; } #product-page .pd-social--in { background:#0a66c2; }

/* details tabs */
#product-page .pd-details { margin-top:64px; padding:8px 0 0; }
#product-page .pd-tablist { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:0; border-bottom:1px solid var(--line); margin-bottom:30px; }
#product-page .pd-details:not(.has-tabs) .pd-tablist { display:none; }
#product-page .pd-tablist button { position:relative; padding:14px 22px; border:0; background:none; color:var(--muted); font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
#product-page .pd-tablist button:hover { color:#fff; }
#product-page .pd-tablist button[aria-selected="true"] { color:#fff; }
#product-page .pd-tablist button[aria-selected="true"]::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:#ffc107; }
#product-page .pd-count { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; background:rgba(255,255,255,.12); font-size:12.5px; }
#product-page .pd-panel { max-width:1000px; margin-bottom:34px; }
#product-page .pd-details.has-tabs .pd-panel { margin-bottom:0; }
#product-page .pd-h2 { margin:0 0 20px; font-size:clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-.02em; }
#product-page .pd-details.has-tabs .pd-panel > .pd-h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#product-page .pd-empty { color:var(--muted); }
#product-page .pd-desc { color:#c6d6ef; font-size:17px; line-height:1.8; }
#product-page .pd-desc > * + * { margin-top:1rem; }
#product-page .pd-desc ul { list-style:disc; padding-left:1.7rem; } #product-page .pd-desc ol { list-style:decimal; padding-left:1.7rem; } #product-page .pd-desc li { margin:.4rem 0; }
#product-page .pd-desc h2, #product-page .pd-desc h3, #product-page .pd-desc h4 { color:#fff; font-weight:800; margin:1.6rem 0 .6rem; letter-spacing:-.01em; }
#product-page .pd-desc h2 { font-size:1.5rem; } #product-page .pd-desc h3 { font-size:1.25rem; }
#product-page .pd-desc a { color:#ffd45a; text-decoration:underline; } #product-page .pd-desc strong, #product-page .pd-desc b { color:#fff; }
#product-page .pd-desc img { max-width:100%; height:auto; border-radius:14px; }
#product-page .pd-desc table { width:100%; border-collapse:collapse; } #product-page .pd-desc td, #product-page .pd-desc th { padding:10px 12px; border:1px solid var(--line); text-align:left; }

#product-page .pd-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:0; border-top:1px solid var(--line); }
#product-page .pd-specs > div { display:flex; justify-content:space-between; gap:20px; padding:15px 4px; border-bottom:1px solid var(--line); }
#product-page .pd-specs dt { color:#93b9ff; font-size:14px; font-weight:700; } #product-page .pd-specs dd { margin:0; color:#e6efff; font-size:15px; text-align:right; }

/* reviews */
#product-page .pd-reviews { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:start; }
#product-page .pd-summary { display:flex; align-items:center; gap:18px; padding:20px 22px; margin-bottom:18px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
#product-page .pd-summary__score { font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1; }
#product-page .pd-summary__text { margin-top:4px; color:var(--muted); font-size:14px; }
#product-page .pd-review { padding:18px 20px; margin-bottom:14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04); }
#product-page .pd-review header { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; } #product-page .pd-review time { color:#8fa8d0; font-size:13px; }
#product-page .pd-review p { margin:10px 0 0; color:#c6d6ef; line-height:1.65; }
#product-page .pd-reviewform { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--card); }
#product-page .pd-reviewform h3 { margin:0 0 6px; font-size:20px; font-weight:800; } #product-page .pd-reviewform > p { margin:0 0 18px; color:var(--muted); font-size:14px; }
#product-page .pd-reviewform label { display:block; margin:14px 0 7px; color:#d6e3f8; font-size:13.5px; font-weight:700; }
#product-page .pd-reviewform input, #product-page .pd-reviewform select, #product-page .pd-reviewform textarea {
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:#0e2147; color:#fff; font:inherit; font-size:15px; outline:none;
}
#product-page .pd-reviewform input:focus, #product-page .pd-reviewform select:focus, #product-page .pd-reviewform textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.2); }
#product-page .pd-reviewform textarea { resize:vertical; }
#product-page .pd-reviewform__foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
#product-page .pd-reviewform .pd-btn { flex:0 0 auto; min-height:48px; padding:0 24px; font-size:15px; }
#product-page #review-message { font-size:14px; color:var(--muted); } #product-page #review-message.is-ok { color:#34d399; } #product-page #review-message.is-bad { color:#f87171; }

/* related */
#product-page .pd-related { margin-top:72px; }
#product-page .pd-related__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
#product-page .pd-rcard { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--card); color:#fff; text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.22); transition:transform .3s, border-color .3s, box-shadow .3s; }
#product-page .pd-rcard:hover { transform:translateY(-6px); border-color:rgba(96,165,250,.7); box-shadow:0 24px 52px rgba(0,0,0,.4); }
#product-page .pd-rcard__img { display:block; aspect-ratio:4/3; background:#fff; overflow:hidden; }
#product-page .pd-rcard__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } #product-page .pd-rcard:hover .pd-rcard__img img { transform:scale(1.06); }
#product-page .pd-rcard__body { display:block; padding:16px 18px 20px; }
#product-page .pd-rcard__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; margin-bottom:8px; font-size:16px; font-weight:700; line-height:1.35; }
#product-page .pd-rcard__price { display:block; font-size:20px; font-weight:800; color:#ffd45a; }

/* zoom modal */
.pd-modal { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(3,10,26,.92); }
.pd-modal[hidden] { display:none !important; }
.pd-modal img { max-width:min(1100px,94vw); max-height:88vh; border-radius:12px; background:#fff; object-fit:contain; }
.pd-modal__close { position:absolute; top:16px; right:20px; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:32px; line-height:1; cursor:pointer; }
.pd-modal__close:hover { background:rgba(255,255,255,.26); }

/* mobile buy bar */
#product-page .pd-sticky { display:none; }

#product-page a:focus-visible, #product-page button:focus-visible, #product-page select:focus-visible, #product-page input:focus-visible, #product-page textarea:focus-visible { outline:3px solid #93b9ff; outline-offset:3px; }

@media (max-width:991px) {
    #product-page { padding-top:118px; }
    #product-page .pd-top { grid-template-columns:minmax(0,1fr); gap:28px; }
    #product-page .pd-gallery { position:static; }
    #product-page .pd-main { aspect-ratio:4/3; }
    #product-page .pd-reviews { grid-template-columns:minmax(0,1fr); }
    #product-page .pd-details { margin-top:44px; }
}
@media (max-width:640px) {
    #product-page { padding-bottom:110px; }
    #product-page .pd-wrap { padding:0 16px; }
    #product-page .pd-specs { grid-template-columns:1fr; }
    #product-page .pd-tablist button { padding:12px 14px; font-size:15px; }
    #product-page .pd-actions { flex-direction:column; } #product-page .pd-btn--primary, #product-page .pd-btn--ghost { flex:0 0 auto; width:100%; }
    #product-page .pd-sticky {
        position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:14px;
        padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(8,18,40,.94); border-top:1px solid var(--line);
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transform:translateY(110%); transition:transform .3s;
    }
    #product-page .pd-sticky.is-visible { transform:none; }
    #product-page .pd-sticky__label { display:block; color:var(--muted); font-size:12px; }
    #product-page .pd-sticky strong { font-size:20px; }
    #product-page .pd-sticky .pd-btn { flex:0 0 auto; min-height:48px; padding:0 24px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { #product-page *, .pd-modal { transition:none !important; } #product-page .pd-main:hover img, #product-page .pd-rcard:hover, #product-page .pd-btn:hover { transform:none; } }
