/* ============================================================
   Product Detail Page
   ============================================================ */
/* overflow-x:hidden on body makes it a (non-scrolling) scroll container,
   which kills position:sticky on .pd-gallery — clip clips without that.
   Browsers lacking `clip` keep style.css's `hidden` (sticky off, no breakage). */
html,body{overflow-x:clip}
.pd-wrap{max-width:1200px;margin:0 auto;padding:88px 24px 60px}
.pd-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin-bottom:32px}
.pd-breadcrumb a{color:var(--text-secondary);transition:color .2s}
.pd-breadcrumb a:hover{color:var(--text-primary)}
.pd-breadcrumb svg{width:14px;height:14px;opacity:0.4}

.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-grid>*{min-width:0}

/* Gallery */
.pd-gallery{position:sticky;top:88px}
.pd-add:disabled,.pd-float-add:disabled{opacity:.75;cursor:default;pointer-events:none}
.pd-main-img{aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative}
.pd-main-img .pd-placeholder{width:65%;height:65%;border-radius:16px;border:1px solid rgba(255,255,255,0.08);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pd-main-img:hover .pd-placeholder{transform:scale(1.04)}
.pd-main-img .pd-badge{position:absolute;top:16px;left:16px;padding:6px 14px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.pd-badge.best{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3)}
.pd-badge.new{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.3)}
.pd-badge.sale{background:rgba(244,63,94,0.15);color:#fb7185;border:1px solid rgba(244,63,94,0.3)}
.pd-badge.limited{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.3)}

.pd-thumbs{display:flex;gap:10px}
.pd-thumb{width:72px;height:72px;border-radius:var(--radius-sm);background:var(--bg-card);border:2px solid var(--border);overflow:hidden;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;position:relative}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--accent)}
.pd-thumb .pd-th-swatch{width:100%;height:100%;object-fit:cover}
.pd-thumb-video::after{content:'';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35)}
.pd-thumb-video .pd-th-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;z-index:1;color:#fff;opacity:.9}
.pd-main-video{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:2}
.pd-main-video .pd-video-poster{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pd-main-video .pd-video-play{width:64px;height:64px;background:rgba(103,68,218,0.85);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:transform .2s,background .2s;border:2px solid rgba(255,255,255,0.2)}
.pd-main-video .pd-video-play:hover{transform:scale(1.1);background:rgba(103,68,218,1)}
.pd-main-video .pd-video-play svg{width:28px;height:28px;color:#fff;margin-left:3px}
.pd-main-view{width:100%;height:100%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s;border-radius:var(--radius-xl);overflow:hidden}
.pd-main-view.pd-view-hidden{opacity:0;pointer-events:none}
@keyframes pdVideoShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Info */
.pd-info{}
.pd-brand{font-size:12px;font-weight:600;color:var(--accent-hover);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.pd-title{font-size:36px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:12px}
.pd-rating-row{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.pd-stars{display:flex;gap:1px;color:#fbbf24}
.pd-stars svg{width:16px;height:16px;fill:currentColor}
.pd-stars .empty{color:var(--text-muted);opacity:0.3}
.pd-rating-text{font-size:13px;color:var(--text-secondary)}
.pd-rating-text strong{color:var(--text-primary)}

.pd-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.pd-price{font-size:32px;font-weight:800;letter-spacing:-0.02em}
.pd-price-old{font-size:18px;color:var(--text-muted);text-decoration:line-through}
.pd-price-save{font-size:13px;font-weight:700;color:#34d399;background:rgba(16,185,129,0.1);padding:4px 12px;border-radius:100px}
.pd-tax{font-size:12px;color:var(--text-muted);margin-bottom:24px}

.pd-desc{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:24px}

/* Options */
.pd-option-label{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pd-option-label span{color:var(--text-muted);font-weight:400}

.pd-colors{display:flex;gap:10px;margin-bottom:24px}
.pd-color{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;position:relative}
.pd-color:hover,.pd-color.active{border-color:var(--text-primary)}
.pd-color.active::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--accent);pointer-events:none}

.pd-materials{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
.pd-mat-card{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all .2s;background:var(--bg-card);position:relative}
.pd-mat-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.pd-mat-card.active{border-color:var(--accent);background:var(--accent-dim)}
.pd-mat-card.active::after{content:'\2713';position:absolute;top:6px;right:6px;width:18px;height:18px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1}
.pd-mat-swatch{height:70px;width:100%;border-bottom:1px solid var(--border)}
.pd-mat-pvc{background:linear-gradient(145deg,#1a1a2e,#16162a);background-size:100% 100%}
.pd-mat-pvc::after{content:'';position:absolute;top:15px;left:30%;width:40%;height:30px;background:radial-gradient(ellipse,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none}
.pd-mat-metal{background:linear-gradient(145deg,#c0c0c0,#8a8a8a),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.05) 2px,rgba(255,255,255,0.05) 4px);background-blend-mode:normal}
.pd-mat-wood{background:linear-gradient(145deg,#d4a843,#8b6914),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 5px);background-blend-mode:normal}
.pd-mat-carbon{background:linear-gradient(145deg,#1a1a1a,#2a2a2a),repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,0.03) 3px,rgba(255,255,255,0.03) 6px),repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(255,255,255,0.03) 3px,rgba(255,255,255,0.03) 6px);background-blend-mode:normal}
.pd-mat-info{padding:10px 12px}
.pd-mat-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.pd-mat-desc{font-size:11px;color:var(--text-muted);margin-top:2px}

/* Finish */
.pd-finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.pd-finish-card{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all .2s;background:var(--bg-card);position:relative}
.pd-finish-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.pd-finish-card.active{border-color:var(--accent);background:var(--accent-dim)}
.pd-finish-card.active::after{content:'\2713';position:absolute;top:6px;right:6px;width:18px;height:18px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1}
.pd-finish-swatch{height:70px;width:100%;border-bottom:1px solid var(--border);position:relative}
.pd-finish-smooth{background:linear-gradient(145deg,#1a1a2e,#16162a)}
.pd-finish-smooth::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 30%,rgba(255,255,255,0.04) 0%,transparent 60%)}
.pd-finish-glossy{background:linear-gradient(145deg,#1e1e36,#12122a);position:relative}
.pd-finish-glossy::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.04) 40%,transparent 60%,rgba(255,255,255,0.06) 100%)}
.pd-finish-softtouch{background:linear-gradient(145deg,#1f1f35,#17172d)}
.pd-finish-softtouch::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E") repeat,radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0.03) 0%,transparent 70%)}
.pd-finish-info{padding:10px 12px}
.pd-finish-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.pd-finish-price{font-size:11px;color:var(--text-muted);margin-top:2px}

/* Quantity */
.pd-qty-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.pd-qty{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.pd-qty button{width:40px;height:40px;background:var(--bg-card);border:none;color:var(--text-secondary);font-size:18px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
.pd-qty button:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.pd-qty span{width:48px;text-align:center;font-size:15px;font-weight:600;background:var(--bg-primary)}
.pd-qty-input{width:56px;height:40px;text-align:center;font-size:15px;font-weight:600;background:var(--bg-primary);color:var(--text-primary);border:none;outline:none;font-family:var(--font);-moz-appearance:textfield;appearance:textfield}
.pd-qty-input::-webkit-outer-spin-button,.pd-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-qty-input:focus{background:var(--bg-card-hover)}
.pd-unit-note{font-size:13px;color:var(--text-secondary);margin:-12px 0 18px}
.pd-tiers{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:22px}
.pd-tiers-head{background:var(--bg-card);padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.pd-tier-row{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.pd-tier-row:last-child{border-bottom:none}
.pd-tier-row.active{background:rgba(16,185,129,.08);color:var(--text-primary);font-weight:600}
.pd-tier-qty{flex:1}
.pd-tier-price{flex:0 0 auto;margin-right:14px}
.pd-tier-off{flex:0 0 56px;text-align:right;color:#10b981;font-weight:600}

/* Actions */
.pd-actions{display:flex;gap:12px;margin-bottom:24px}
.pd-add{flex:1;padding:16px 28px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .2s;font-family:var(--font)}
.pd-add:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 20px rgba(103,68,218,0.4)}
.pd-buy{padding:16px 28px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border);color:var(--text-primary);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font)}
.pd-buy:hover{border-color:var(--border-hover);background:var(--bg-card)}
.pd-wish-btn{width:52px;height:52px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-wish-btn:hover{border-color:rgba(244,63,94,0.3);color:#fb7185;background:rgba(244,63,94,0.06)}
.pd-wish-btn.liked{border-color:rgba(244,63,94,0.3);color:#fb7185;background:rgba(244,63,94,0.1)}
.pd-wish-btn svg{width:20px;height:20px}

/* Trust badges */
.pd-trust{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--border);margin-bottom:24px;flex-wrap:wrap}
.pd-trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}
.pd-trust-item svg{width:18px;height:18px;color:var(--green);flex-shrink:0}

/* NFC badge */
.pd-nfc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--cyan);padding:8px 16px;border-radius:100px;background:rgba(34,211,238,0.06);border:1px solid rgba(34,211,238,0.15);margin-bottom:24px}
.pd-nfc svg{width:16px;height:16px}

/* Tabs */
.pd-tabs-wrap{max-width:1200px;margin:0 auto;padding:0 24px 60px}
.pd-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:32px}
.pd-tab{padding:14px 24px;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font)}
.pd-tab:hover{color:var(--text-secondary)}
.pd-tab.active{color:var(--accent-hover);border-bottom-color:var(--accent)}
.pd-tab-content{display:none}
.pd-tab-content.active{display:block}

.pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pd-spec{display:flex;padding:14px 0;border-bottom:1px solid var(--border)}
.pd-spec-label{width:180px;font-size:13px;font-weight:600;color:var(--text-muted);flex-shrink:0}
.pd-spec-value{font-size:14px;color:var(--text-secondary)}

.pd-features-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pd-feature-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-secondary);line-height:1.6}
.pd-feature-item svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}

/* Reviews summary */
.pd-reviews-summary{display:flex;gap:40px;align-items:center;margin-bottom:32px;padding:24px;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border)}
.pd-reviews-big{text-align:center}
.pd-reviews-big .num{font-size:48px;font-weight:800;letter-spacing:-0.03em}
.pd-reviews-big .label{font-size:13px;color:var(--text-muted);margin-top:4px}
.pd-review-bars{flex:1}
.pd-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pd-bar-row .star-label{font-size:12px;color:var(--text-muted);width:40px;text-align:right}
.pd-bar-track{flex:1;height:8px;border-radius:4px;background:var(--bg-card-hover);overflow:hidden}
.pd-bar-fill{height:100%;border-radius:4px;background:var(--accent)}
.pd-bar-row .count{font-size:12px;color:var(--text-muted);width:40px}

/* Related products */
.pd-related{max-width:1200px;margin:0 auto;padding:0 24px 80px}
.pd-related h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:24px}
.pd-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pd-related-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s;cursor:pointer}
.pd-related-card:hover{transform:translateY(-3px);border-color:var(--border-hover);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.pd-rc-img{aspect-ratio:1/1;background:linear-gradient(145deg,#0d0d1a,#08080f);display:flex;align-items:center;justify-content:center}
.pd-rc-img .rc-swatch{width:60%;height:60%;border-radius:14px;border:1px solid rgba(255,255,255,0.08)}
.pd-rc-info{padding:16px}
.pd-rc-name{font-size:14px;font-weight:700;margin-bottom:4px}
.pd-rc-price{font-size:16px;font-weight:800}

/* Add-ons */
.pd-addons{margin-bottom:28px}
.pd-addon{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:all .2s}
.pd-addon:hover{border-color:var(--border-hover)}
.pd-addon.checked{border-color:var(--accent);background:var(--accent-dim)}
.pd-addon-left{display:flex;align-items:center;gap:12px}
.pd-addon-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg-card-hover);display:flex;align-items:center;justify-content:center;color:var(--accent-hover);flex-shrink:0}
.pd-addon-icon svg{width:18px;height:18px}
.pd-addon-name{font-size:14px;font-weight:600}
.pd-addon-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.pd-addon-right{display:flex;align-items:center;gap:12px}
.pd-addon-price{font-size:14px;font-weight:700;color:var(--accent-hover);white-space:nowrap}
.pd-addon-toggle{width:44px;height:24px;border-radius:12px;background:var(--bg-card-hover);border:1px solid var(--border);cursor:pointer;position:relative;transition:all .2s;flex-shrink:0}
.pd-addon-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text-muted);transition:all .2s}
.pd-addon-toggle.on{background:var(--accent);border-color:var(--accent)}
.pd-addon-toggle.on::after{left:23px;background:#fff}

/* Spec icon cards */
.pd-spec-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.pd-spec-icon{text-align:center;padding:20px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s}
.pd-spec-icon:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.pd-spec-icon .sic-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-dim);color:var(--accent-hover);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.pd-spec-icon .sic-icon svg{width:22px;height:22px}
.pd-spec-icon .sic-val{font-size:18px;font-weight:800;letter-spacing:-0.02em;margin-bottom:2px}
.pd-spec-icon .sic-label{font-size:12px;color:var(--text-muted)}

/* Review cards */
.pd-review-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.pd-review-card{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s}
.pd-review-card:hover{border-color:var(--border-hover)}
.pd-review-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pd-review-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--accent-hover)}
.pd-review-meta .pd-review-name{font-size:14px;font-weight:700}
.pd-review-meta .pd-review-date{font-size:12px;color:var(--text-muted);margin-top:2px}
.pd-review-stars{display:flex;gap:1px;color:#fbbf24;margin-bottom:10px}
.pd-review-stars svg{width:14px;height:14px;fill:currentColor}
.pd-review-text{font-size:13px;color:var(--text-secondary);line-height:1.7}
.pd-review-verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--green);font-weight:600;margin-top:10px}
.pd-review-verified svg{width:14px;height:14px}

/* FAQ accordion */
.pd-faq-wrap{max-width:1200px;margin:0 auto;padding:0 24px 60px}
.pd-faq-wrap h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:24px}
.pd-faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.pd-faq-item:hover{border-color:var(--border-hover)}
.pd-faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;cursor:pointer;font-size:15px;font-weight:600;color:var(--text-primary);background:none;border:none;width:100%;text-align:left;font-family:var(--font);transition:color .2s}
.pd-faq-q:hover{color:var(--accent-hover)}
.pd-faq-q svg{width:20px;height:20px;color:var(--text-muted);transition:transform .3s;flex-shrink:0}
.pd-faq-item.open .pd-faq-q svg{transform:rotate(180deg)}
.pd-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.pd-faq-item.open .pd-faq-a{max-height:300px}
.pd-faq-a-inner{padding:0 20px 18px;font-size:14px;color:var(--text-secondary);line-height:1.8}

/* Warranty selector */
.pd-warranty{margin-bottom:28px}
.pd-warranty-opts{display:flex;gap:8px;flex-wrap:wrap}
.pd-warranty-opt{padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);text-align:center;min-width:70px}
.pd-warranty-opt:hover{border-color:var(--border-hover);color:var(--text-primary)}
.pd-warranty-opt.active{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
.pd-warranty-opt .wo-dur{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.pd-warranty-opt .wo-price{display:block;font-size:11px;color:var(--text-muted);font-weight:400}
.pd-warranty-opt.active .wo-price{color:var(--accent-hover)}

/* Print specs diagrams */
.pd-print-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.pd-print-card{text-align:center;padding:24px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.pd-print-card .psc-diagram{width:120px;height:76px;margin:0 auto 14px;border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center}
.pd-print-card .psc-diagram .outer{position:absolute;inset:0;border:2px dashed rgba(103,68,218,0.3);border-radius:6px}
.pd-print-card .psc-diagram .inner{width:80%;height:80%;border:2px solid var(--accent);border-radius:4px}
.pd-print-card .psc-label{font-size:14px;font-weight:700;margin-bottom:4px}
.pd-print-card .psc-dim{font-size:13px;color:var(--text-muted)}
.pd-print-details{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.pd-print-detail{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}
.pd-print-detail svg{width:18px;height:18px;color:var(--accent-hover);flex-shrink:0}
.pd-templates{display:flex;gap:10px;flex-wrap:wrap}
.pd-template-btn{padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);display:flex;align-items:center;gap:6px}
.pd-template-btn:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
.pd-template-btn svg{width:14px;height:14px}

/* Testimonials */
.pd-testimonials{max-width:1200px;margin:0 auto;padding:0 24px 60px}
.pd-testimonials h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:24px}
.pd-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pd-testi-card{padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);position:relative;transition:all .2s}
.pd-testi-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.pd-testi-quote{position:absolute;top:16px;right:20px;font-size:48px;font-weight:800;color:var(--accent);opacity:0.15;line-height:1;font-family:Georgia,serif}
.pd-testi-text{font-size:14px;color:var(--text-secondary);line-height:1.8;margin-bottom:18px;font-style:italic}
.pd-testi-author{display:flex;align-items:center;gap:12px}
.pd-testi-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.pd-testi-name{font-size:14px;font-weight:700}
.pd-testi-role{font-size:12px;color:var(--text-muted);margin-top:2px}

/* Help CTA */
.pd-help{max-width:1200px;margin:0 auto;padding:0 24px 60px}
.pd-help-box{display:flex;align-items:center;justify-content:space-between;padding:32px 40px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);flex-wrap:wrap;gap:20px}
.pd-help-left{display:flex;align-items:center;gap:16px}
.pd-help-icon{width:52px;height:52px;border-radius:16px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;color:var(--accent-hover);flex-shrink:0}
.pd-help-icon svg{width:24px;height:24px}
.pd-help-title{font-size:18px;font-weight:700;margin-bottom:4px}
.pd-help-sub{font-size:14px;color:var(--text-muted)}
.pd-help-actions{display:flex;gap:12px}
.pd-help-btn{padding:12px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;border:1px solid var(--border);background:transparent;color:var(--text-primary)}
.pd-help-btn:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.pd-help-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-color:transparent}
.pd-help-btn.primary:hover{opacity:0.9}

/* Production & Shipping */
.pd-prod-ship{margin-bottom:28px;padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.pd-prod-ship-title{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pd-prod-ship-title svg{width:18px;height:18px;color:var(--accent-hover)}
.pd-prod-ship-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.pd-prod-ship-row>*,.pd-prod-field{min-width:0}
.pd-prod-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.pd-prod-field input{width:100%;box-sizing:border-box;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);transition:all .2s}
.pd-prod-field input:hover{border-color:var(--border-hover)}
.pd-prod-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-prod-field input::placeholder{color:var(--text-muted)}
.pd-prod-select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-overflow:ellipsis;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:all .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AB0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pd-prod-select:hover{border-color:var(--border-hover)}
.pd-prod-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-prod-row-full{margin-bottom:14px}
.pd-ship-divider{height:1px;background:var(--border);margin:18px 0 16px;opacity:0.5}
.pd-ship-subtitle{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.pd-ship-subtitle svg{width:14px;height:14px;color:var(--accent-hover)}
.pd-delivery-est{margin-top:14px;padding:14px 16px;background:var(--bg-primary);border:1.5px solid var(--border);border-radius:var(--radius-sm);text-align:center}
.pd-delivery-icon{font-size:18px;margin-right:6px}
.pd-delivery-dates{font-size:15px;font-weight:800;letter-spacing:-0.01em}
.pd-delivery-breakdown{font-size:12px;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pd-delivery-tag{padding:2px 10px;background:var(--bg-card);border-radius:100px;font-size:11px;font-weight:600;color:var(--text-secondary)}
.pd-addr-required{color:rgba(244,63,94,0.8);font-size:11px;margin-top:6px;display:none}
.pd-addr-required.show{display:block}

/* Address summary card */
.pd-addr-summary{display:none;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid rgba(16,185,129,0.2);background:rgba(16,185,129,0.04);margin-bottom:14px}
.pd-addr-summary.visible{display:flex}
.pd-addr-summary-left{display:flex;align-items:center;gap:12px;min-width:0}
.pd-addr-summary-icon{width:36px;height:36px;border-radius:10px;background:rgba(16,185,129,0.1);color:#34d399;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-addr-summary-icon svg{width:18px;height:18px}
.pd-addr-summary-text{min-width:0}
.pd-addr-summary-name{font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-addr-summary-line{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-addr-summary-edit{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);white-space:nowrap;flex-shrink:0}
.pd-addr-summary-edit svg{width:14px;height:14px}
.pd-addr-summary-edit:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
#addrFieldsWrap.collapsed{display:none}
[data-theme="light"] .pd-addr-summary{border-color:rgba(16,185,129,0.15);background:rgba(16,185,129,0.04)}
[data-theme="light"] .pd-addr-summary-edit{border-color:rgba(103,68,218,0.1);background:rgba(103,68,218,0.03);color:#6b7280}
[data-theme="light"] .pd-addr-summary-edit:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}

/* Dual CTAs */
.pd-ctas{display:flex;gap:12px;margin-bottom:12px}
.pd-design-btn{flex:1;padding:16px 24px;border-radius:var(--radius-sm);background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px}
.pd-design-btn:hover{background:var(--accent-dim);border-color:var(--accent-hover);color:var(--accent-hover)}
.pd-design-btn svg{width:18px;height:18px}
.pd-cta-note{font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:24px;line-height:1.6}

/* Floating summary bar */
.pd-float-bar{position:fixed;bottom:-80px;left:0;right:0;z-index:900;background:rgba(8,8,15,0.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:12px 0;transition:bottom .35s cubic-bezier(.22,1,.36,1)}
.pd-float-bar.visible{bottom:0}
.pd-float-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pd-float-left{display:flex;align-items:center;gap:16px}
.pd-float-swatch{width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0}
.pd-float-name{font-size:15px;font-weight:700}
.pd-float-price{font-size:14px;color:var(--text-muted);margin-top:2px}
.pd-float-right{display:flex;align-items:center;gap:12px}
.pd-float-design{padding:12px 22px;border-radius:var(--radius-sm);background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;white-space:nowrap}
.pd-float-design:hover{background:var(--accent-dim)}
.pd-float-add{padding:12px 28px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-float-add:hover{opacity:0.9;transform:translateY(-1px)}

/* Shipping address modal for qty increase */
.pd-ship-modal{display:none;position:fixed;inset:0;z-index:1100;align-items:center;justify-content:center}
.pd-ship-modal.visible{display:flex}
.pd-ship-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pd-ship-modal-card{position:relative;z-index:1;background:#0a0a14;border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:32px;max-width:500px;width:92%;box-shadow:0 24px 80px rgba(0,0,0,0.8);animation:authModalIn 0.25s ease;max-height:90vh;overflow-y:auto}
.pd-ship-modal-card h3{font-size:20px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;color:rgba(240,244,255,0.96)}
.pd-ship-modal-card>p{font-size:13px;color:rgba(240,244,255,0.4);line-height:1.6;margin-bottom:20px}
.pd-ship-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:rgba(240,244,255,0.3);font-size:22px;cursor:pointer;line-height:1}
.pd-ship-modal-close:hover{color:rgba(240,244,255,0.96)}
.pd-ship-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.pd-ship-choice{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.02);cursor:pointer;transition:all .2s;width:100%;text-align:left;font-family:var(--font)}
.pd-ship-choice:hover{border-color:rgba(103,68,218,0.3);background:rgba(103,68,218,0.04)}
.pd-ship-choice.selected{border-color:var(--accent);background:rgba(103,68,218,0.08)}
.pd-ship-choice-radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pd-ship-choice.selected .pd-ship-choice-radio{border-color:var(--accent)}
.pd-ship-choice.selected .pd-ship-choice-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent)}
.pd-ship-choice-text h4{font-size:14px;font-weight:700;color:rgba(240,244,255,0.96);margin-bottom:2px}
.pd-ship-choice-text p{font-size:12px;color:rgba(240,244,255,0.35);margin:0}
.pd-ship-choice-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-ship-choice-icon svg{width:18px;height:18px}
.pd-ship-choice-icon.same{background:rgba(16,185,129,0.1);color:#34d399}
.pd-ship-choice-icon.diff{background:rgba(168,85,247,0.1);color:#c084fc}

/* New address form inside modal */
.pd-ship-modal-form{margin-top:18px;display:none;padding-top:18px;border-top:1px solid rgba(255,255,255,0.06)}
.pd-ship-modal-form.visible{display:block}
.pd-ship-modal-form .pd-prod-ship-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pd-ship-modal-form .pd-prod-row-full{margin-bottom:12px}
.pd-ship-modal-form .pd-prod-field label{display:block;font-size:11px;font-weight:600;color:rgba(240,244,255,0.4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.pd-ship-modal-form .pd-prod-field input,.pd-ship-modal-form .pd-prod-field select{width:100%;padding:9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.04);color:rgba(240,244,255,0.96);font-size:13px;font-family:var(--font);transition:all .2s}
.pd-ship-modal-form .pd-prod-field input:focus,.pd-ship-modal-form .pd-prod-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(103,68,218,0.15)}
.pd-ship-modal-form .pd-prod-field input::placeholder{color:rgba(240,244,255,0.2)}
.pd-ship-modal-actions{display:flex;gap:10px;margin-top:20px}
.pd-ship-modal-confirm{flex:1;padding:13px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-ship-modal-confirm:hover{opacity:0.9;transform:translateY(-1px)}
.pd-ship-modal-confirm:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.pd-ship-modal-cancel{padding:13px 20px;border-radius:10px;border:1px solid rgba(255,255,255,0.07);background:transparent;color:rgba(240,244,255,0.6);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-ship-modal-cancel:hover{border-color:rgba(255,255,255,0.15);color:rgba(240,244,255,0.96)}
.pd-ship-modal-req{color:rgba(244,63,94,0.8);font-size:11px;margin-top:8px;display:none}
.pd-ship-modal-req.show{display:block}

[data-theme="light"] .pd-ship-modal-card{background:#fff;border-color:rgba(103,68,218,0.1);box-shadow:0 24px 80px rgba(0,0,0,0.15)}
[data-theme="light"] .pd-ship-modal-card h3{color:#1a1a2e}
[data-theme="light"] .pd-ship-modal-card>p{color:#6b7280}
[data-theme="light"] .pd-ship-modal-close{color:#9ca3af}
[data-theme="light"] .pd-ship-modal-close:hover{color:#1a1a2e}
[data-theme="light"] .pd-ship-choice{border-color:rgba(103,68,218,0.08);background:rgba(103,68,218,0.02)}
[data-theme="light"] .pd-ship-choice:hover{border-color:rgba(103,68,218,0.2);background:rgba(103,68,218,0.04)}
[data-theme="light"] .pd-ship-choice.selected{border-color:var(--accent);background:rgba(103,68,218,0.06)}
[data-theme="light"] .pd-ship-choice-radio{border-color:#d1d5db}
[data-theme="light"] .pd-ship-choice-text h4{color:#1a1a2e}
[data-theme="light"] .pd-ship-choice-text p{color:#6b7280}
[data-theme="light"] .pd-ship-modal-form .pd-prod-field label{color:#6b7280}
[data-theme="light"] .pd-ship-modal-form .pd-prod-field input,[data-theme="light"] .pd-ship-modal-form .pd-prod-field select{border-color:rgba(103,68,218,0.1);background:#fff;color:#1a1a2e}
[data-theme="light"] .pd-ship-modal-form{border-top-color:rgba(103,68,218,0.08)}
[data-theme="light"] .pd-ship-modal-cancel{border-color:rgba(103,68,218,0.1);color:#6b7280}
[data-theme="light"] .pd-ship-modal-cancel:hover{color:#1a1a2e}

[data-theme="light"] .pd-float-bar{background:rgba(245,243,255,0.95);border-top-color:rgba(103,68,218,0.10)}
[data-theme="light"] .pd-prod-ship{background:rgba(103,68,218,0.03);border-color:rgba(103,68,218,0.08)}
[data-theme="light"] .pd-delivery-est{background:rgba(255,255,255,0.8);border-color:rgba(103,68,218,0.12)}

/* Per-card personalization nudge (under the qty row) */
.pd-multi-nudge{margin:10px 0 0;padding:12px 14px;border-radius:var(--radius-sm,10px);border:1px dashed var(--accent);background:var(--accent-dim);font-size:13px;color:var(--text-secondary);line-height:1.5}
.pd-multi-nudge strong{color:var(--text-primary)}
.pd-multi-nudge-btn{display:inline-block;margin-left:6px;padding:5px 12px;border-radius:100px;border:none;background:var(--accent);color:#fff;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}
.pd-multi-nudge-btn:hover{background:var(--accent-hover)}

/* Personalize CTA Button */
.pd-personalize-cta{margin:20px 0 24px}
.pd-personalize-btn{width:100%;padding:18px 24px;border-radius:var(--radius-lg);border:2px dashed var(--accent);background:var(--accent-dim);cursor:pointer;font-family:var(--font);font-size:16px;font-weight:700;color:var(--accent-hover);display:flex;align-items:center;gap:10px;transition:all .25s;position:relative}
.pd-personalize-btn:hover{background:rgba(103,68,218,0.12);border-style:solid;transform:translateY(-1px);box-shadow:0 4px 20px rgba(103,68,218,0.15)}
.pd-personalize-btn svg{width:22px;height:22px;flex-shrink:0}
.pd-personalize-hint{font-size:12px;font-weight:500;color:var(--text-muted);margin-left:auto}
.pd-design-preview{display:none;margin:-8px 0 24px;animation:pdPreviewIn .35s ease}
.pd-design-preview.visible{display:block}
@keyframes pdPreviewIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.pd-design-preview-inner{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);padding:16px;display:flex;gap:16px;align-items:center}
.pd-design-preview-img{width:120px;height:76px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--bg-primary);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.pd-design-preview-img img{width:100%;height:100%;object-fit:contain}
.pd-design-preview-info{flex:1;min-width:0}
.pd-design-preview-label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.pd-design-preview-label svg{width:14px;height:14px}
.pd-design-preview-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-design-preview-actions{display:flex;gap:8px}
.pd-design-preview-edit{padding:7px 14px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:5px;transition:all .2s}
.pd-design-preview-edit:hover{background:var(--accent-hover);transform:translateY(-1px)}
.pd-design-preview-edit svg{width:13px;height:13px}
.pd-design-preview-reset{padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-design-preview-reset:hover{border-color:rgba(244,63,94,0.4);color:#fb7185;background:rgba(244,63,94,0.06)}

/* Personalize Modal */
/* the overlay covers the whole viewport (incl. the navbar — it reparents to <body>), so only a small top gap is needed */
.pd-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;padding:30px 20px 20px}
.pd-modal-overlay.open{display:flex}
.pd-modal{width:100%;max-width:1200px;max-height:calc(100vh - 50px);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.5)}
.pd-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg-card);flex-shrink:0}
.pd-modal-title{display:flex;align-items:center;gap:10px}
.pd-modal-title svg{width:20px;height:20px;color:var(--accent)}
.pd-modal-title h3{font-size:17px;font-weight:800;letter-spacing:-0.02em;margin:0}
.pd-modal-card-label{font-size:12px;font-weight:600;color:var(--text-muted);background:var(--bg-primary);padding:3px 10px;border-radius:100px;border:1px solid var(--border)}
.pd-modal-actions{display:flex;align-items:center;gap:10px}
.pd-modal-save{padding:9px 20px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:6px;transition:all .2s}
.pd-modal-save:hover{background:var(--accent-hover);transform:translateY(-1px)}
.pd-modal-save svg{width:16px;height:16px}
.pd-modal-close{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s}
.pd-modal-close:hover{border-color:rgba(244,63,94,0.4);color:#fb7185;background:rgba(244,63,94,0.06)}
.pd-modal-close svg{width:18px;height:18px}
.pd-modal-body{flex:1;overflow-y:auto;padding:24px}
.pd-modal-canvas-col{display:flex;flex-direction:column;gap:24px}

/* Design Editor (inside modal) */
.pd-editor{padding:0;background:transparent;border:none;border-radius:0}
.pd-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;display:none}
.pd-editor-header h3{font-size:16px;font-weight:700;letter-spacing:-0.02em;margin:0;color:var(--text-secondary)}
.pd-editor-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;min-height:0}
.pd-editor-layout-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-editor-layout-right{display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:calc(100vh - 180px);padding-right:4px}
.pd-editor-layout-right::-webkit-scrollbar{width:5px}
.pd-editor-layout-right::-webkit-scrollbar-track{background:transparent}
.pd-editor-layout-right::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.pd-editor-canvas-hint{font-size:11px;color:var(--text-muted);text-align:center;padding:4px 0 0;position:relative}
.pd-shortcuts-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:11px;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:4px;padding:0;font-family:var(--font);transition:all .2s}
.pd-shortcuts-btn:hover{border-color:var(--accent);color:var(--accent)}
.pd-shortcuts-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-size:12px;line-height:1.8;text-align:left;white-space:nowrap;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.pd-shortcuts-tooltip.open{display:block}

.pd-editor-sides{display:flex;gap:0;margin-bottom:16px;background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;width:fit-content}
.pd-editor-side{padding:8px 22px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;font-family:var(--font);transition:all .2s}
.pd-editor-side:hover{color:var(--text-secondary)}
.pd-editor-side.active{background:var(--accent);color:#fff}

/* Work area / pasteboard: the fabric canvas fills this; the design is fit & centered inside it. */
.pd-editor-canvas-wrap{position:relative;width:100%;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px;display:block;height:clamp(340px,50vh,540px)}
.pd-editor-canvas-wrap canvas{display:block}
.pd-guides-overlay{position:absolute;left:0;top:0;pointer-events:none;z-index:6}
.pd-guide{position:absolute;box-sizing:border-box;pointer-events:none}
.pd-guide-trim{border:1px solid rgba(56,189,248,0.9)}
.pd-guide-safe{border:1px dashed rgba(34,197,94,0.85)}
.pd-guide-grid{background-image:linear-gradient(to right,rgba(103,68,218,0.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(103,68,218,0.16) 1px,transparent 1px)}
.pd-zoom-bar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:100px;box-shadow:0 6px 20px rgba(0,0,0,0.18);z-index:8}
.pd-zoom-btn{width:26px;height:26px;border:none;background:transparent;color:var(--text-secondary);font-size:16px;font-weight:600;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .15s}
.pd-zoom-btn:hover{background:var(--bg-primary);color:var(--text-primary)}
.pd-zoom-label{min-width:42px;text-align:center;font-size:12px;font-weight:600;color:var(--text-secondary)}
.pd-zoom-fit{margin-left:2px;padding:5px 12px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;border-radius:100px;font-family:inherit;transition:all .15s}
.pd-zoom-fit:hover{background:var(--accent);color:#fff}
.pd-canvas-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg-primary);z-index:10;color:var(--text-muted);font-size:13px}
.pd-canvas-loader-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:pdSpin .8s linear infinite}
@keyframes pdSpin{to{transform:rotate(360deg)}}
.pd-add.is-loading{display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.pd-btn-spinner{width:18px;height:18px;flex-shrink:0;border:2.5px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:pdSpin .7s linear infinite}
.pd-canvas-loader-label{font-size:12px;color:var(--text-secondary)}
.pd-canvas-loader-bar{width:170px;max-width:60%;height:6px;border-radius:4px;background:var(--border);overflow:hidden}
.pd-canvas-loader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:4px;transition:width .15s ease}
.pd-canvas-loader-pct{font-size:12px;font-weight:600;color:var(--accent-hover);font-variant-numeric:tabular-nums}

.pd-editor-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.pd-editor-tab{padding:10px 20px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:var(--font);transition:all .2s}
.pd-editor-tab:hover{color:var(--text-secondary)}
.pd-editor-tab.active{color:var(--accent-hover);border-bottom-color:var(--accent)}

.pd-editor-panel{display:none}
.pd-editor-panel.active{display:block}

/* Editor — Text Panel */
.pd-edt-field{margin-bottom:14px}
.pd-edt-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.pd-edt-field input[type="text"]{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);transition:all .2s;box-sizing:border-box}
.pd-edt-field input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* Editor — Inline Text Styling */
.pd-edt-style-row{display:flex;gap:6px;align-items:center;margin-top:6px;margin-bottom:4px}
.pd-edt-font-select{flex:1;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:11px;font-family:var(--font);min-width:0}
.pd-edt-color-pick{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border);padding:0;overflow:hidden;cursor:pointer;flex-shrink:0}
.pd-edt-color-pick input[type="color"]{width:36px;height:36px;border:none;padding:0;cursor:pointer;margin:-4px}
.pd-edt-style-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-family:var(--font)}
.pd-edt-style-btn:hover{border-color:var(--accent);color:var(--text-primary)}
.pd-edt-style-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Editor — Image Visual Controls */
.pd-filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Editor — Text Typography Controls */
.pd-text-controls .pd-pos-field input[type="number"]{width:100%;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:12px;font-weight:500;font-family:var(--font);box-sizing:border-box;transition:border .2s}
.pd-text-controls .pd-pos-field input[type="number"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-text-align-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Editor — Logo & Images Panel */
.pd-edt-upload{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:14px;position:relative}
.pd-edt-upload:hover{border-color:var(--accent);background:var(--accent-dim)}
.pd-edt-upload svg{width:28px;height:28px;color:var(--text-muted);margin-bottom:8px}
.pd-edt-upload-text{font-size:13px;color:var(--text-secondary);font-weight:500}
.pd-edt-upload-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.pd-edt-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.pd-edt-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pd-edt-thumb{width:56px;height:56px;border-radius:var(--radius-sm);border:2px solid var(--border);overflow:hidden;cursor:pointer;transition:all .2s;background:var(--bg-primary);display:flex;align-items:center;justify-content:center}
.pd-edt-thumb:hover{border-color:var(--accent)}
.pd-edt-thumb img{width:100%;height:100%;object-fit:cover}

/* Editor — Background Image */
.pd-edt-bgimg-sep{margin:18px 0 12px;border-top:1px solid var(--border);padding-top:12px}
.pd-edt-bgimg-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pd-edt-bgimg-label span{font-weight:400;opacity:.5;text-transform:none;letter-spacing:0;font-size:10px}
.pd-edt-bgimg-upload{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:16px 14px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.pd-edt-bgimg-upload:hover{border-color:rgba(103,68,218,0.4);background:rgba(103,68,218,0.03)}
.pd-edt-bgimg-upload.has-image{border-color:var(--accent);border-style:solid;background:rgba(103,68,218,0.06)}
.pd-edt-bgimg-upload svg{width:22px;height:22px;color:var(--text-muted);margin-bottom:4px}
.pd-edt-bgimg-upload-text{font-size:12px;color:var(--text-secondary)}
.pd-edt-bgimg-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.pd-edt-bgimg-remove{display:none;margin-top:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.pd-edt-bgimg-remove:hover{border-color:#ef4444;color:#ef4444}
.pd-edt-bgimg-upload.has-image .pd-edt-bgimg-remove{display:inline-block}
.pd-edt-bgimg-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;margin:0 auto 4px;display:block}
.pd-edt-bgimg-controls{margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);display:none}
.pd-edt-bgimg-controls.visible{display:block}
.pd-edt-bgimg-slider{margin-bottom:8px}
.pd-edt-bgimg-slider:last-child{margin-bottom:0}
.pd-edt-bgimg-slider label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:3px;font-weight:600}
.pd-edt-bgimg-slider input[type="range"]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none}
.pd-edt-bgimg-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:linear-gradient(135deg,#c084fc,var(--accent));border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,0.15)}

/* Editor — Image Resize Controls */
.pd-img-resize{display:none;margin-top:16px;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card)}
.pd-img-resize.visible{display:block}
.pd-img-resize-title{font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.pd-img-resize-title svg{width:14px;height:14px;color:var(--accent)}
.pd-img-resize-row{display:flex;gap:10px;margin-bottom:10px;align-items:center}
.pd-img-resize-field{flex:1}
.pd-img-resize-field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.pd-img-resize-field input[type="number"]{width:100%;padding:7px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);box-sizing:border-box;transition:border .2s}
.pd-img-resize-field input[type="number"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-img-resize-lock{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-top:16px;color:var(--text-muted)}
.pd-img-resize-lock:hover{border-color:var(--accent);color:var(--accent)}
.pd-img-resize-lock.locked{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.pd-img-resize-slider{margin-top:4px}
.pd-img-resize-slider label{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.pd-img-resize-slider input[type="range"]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none}
.pd-img-resize-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#c084fc,var(--accent));border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,0.15)}
.pd-img-resize-actions{display:flex;gap:8px;margin-top:12px}
.pd-img-resize-actions button{flex:1;padding:7px 0;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;border:1px solid var(--border);background:transparent;color:var(--text-secondary)}
.pd-img-resize-actions button:hover{border-color:var(--accent);color:var(--accent)}
.pd-img-resize-actions .pd-resize-delete{border-color:rgba(244,63,94,0.3);color:#fb7185}
.pd-img-resize-actions .pd-resize-delete:hover{background:rgba(244,63,94,0.08);border-color:rgba(244,63,94,0.5)}

/* Editor — Position Controls */
.pd-pos-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.pd-pos-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.pd-pos-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.pd-pos-row{display:flex;gap:10px;margin-bottom:8px}
.pd-pos-field{flex:1}
.pd-pos-field label{display:block;font-size:10px;font-weight:600;color:var(--text-muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.pd-pos-field input[type="number"]{width:100%;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:12px;font-weight:500;font-family:var(--font);box-sizing:border-box;transition:border .2s}
.pd-pos-field input[type="number"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-align-grid{display:flex;gap:4px;flex-wrap:wrap}
.pd-align-btn{width:36px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-muted);padding:0}
.pd-align-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.pd-align-btn svg{width:16px;height:16px}
.pd-align-sep{width:1px;height:32px;background:var(--border);margin:0 2px}
.pd-rotate-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.pd-rotate-row input[type="number"]{width:70px;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:12px;font-weight:500;font-family:var(--font);box-sizing:border-box}
.pd-rotate-row input[type="number"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-rotate-row span{font-size:11px;color:var(--text-muted);font-weight:600}
.pd-layer-btns{display:flex;gap:4px}
.pd-layer-btn{flex:1;padding:6px 0;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s;color:var(--text-muted);font-size:10px;font-weight:600;font-family:var(--font);text-transform:uppercase;letter-spacing:.03em}
.pd-layer-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.pd-layer-btn svg{width:14px;height:14px}

/* Editor — QR Panel */
.pd-edt-qr-url{margin-bottom:14px}
.pd-edt-qr-url input{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);transition:all .2s;box-sizing:border-box}
.pd-edt-qr-url input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.pd-edt-qr-positions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pd-edt-qr-pos{padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-edt-qr-pos:hover{border-color:var(--border-hover);color:var(--text-primary)}
.pd-edt-qr-pos.active{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
.pd-edt-qr-toggle{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:14px}
.pd-edt-qr-toggle .pd-addon-toggle{margin:0}

/* QR Editor — Sub-tabs */
.pd-qr-subtabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;padding:0}
.pd-qr-subtab{flex:1;padding:10px 6px;font-size:12px;font-weight:600;color:var(--text-muted);text-align:center;border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--font);transition:all .2s;letter-spacing:.02em;position:relative}
.pd-qr-subtab:hover{color:var(--text-secondary)}
.pd-qr-subtab.active{color:var(--accent-hover);border-bottom-color:var(--accent)}
.pd-qr-subtab.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:var(--accent);filter:blur(4px)}
.pd-qr-section{display:none}
.pd-qr-section.active{display:block}

/* QR Editor — Style Grid */
.pd-qr-style-label{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;margin-top:18px}
.pd-qr-style-label:first-child{margin-top:0}
.pd-qr-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd-qr-style-option{aspect-ratio:1;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:6px;position:relative;overflow:hidden}
.pd-qr-style-option:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:scale(1.05)}
.pd-qr-style-option.selected{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px rgba(168,85,247,0.1)}
.pd-qr-style-option svg{width:100%;height:100%;color:var(--text-muted);transition:all .2s}
.pd-qr-style-option:hover svg{color:var(--text-primary)}
.pd-qr-style-option.selected svg{color:var(--accent-hover)}

/* QR Editor — Color Presets */
.pd-qr-color-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}
.pd-qr-color-preset{aspect-ratio:1;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s;position:relative}
.pd-qr-color-preset::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:all .2s}
.pd-qr-color-preset:hover{transform:scale(1.15);box-shadow:0 2px 10px rgba(0,0,0,0.2)}
.pd-qr-color-preset.selected{transform:scale(1.1)}
.pd-qr-color-preset.selected::after{border-color:var(--accent);box-shadow:0 0 8px rgba(168,85,247,0.25)}

/* QR Editor — Color Rows */
.pd-qr-color-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pd-qr-color-row label{font-size:12px;color:var(--text-secondary);min-width:76px;font-weight:600}
.pd-qr-color-input-pair{display:flex;align-items:center;gap:8px;flex:1}
.pd-qr-color-input-pair input[type="color"]{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:all .2s;padding:0;background:none;-webkit-appearance:none}
.pd-qr-color-input-pair input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.pd-qr-color-input-pair input[type="color"]::-webkit-color-swatch{border:none;border-radius:50%}
.pd-qr-color-input-pair input[type="color"]:hover{border-color:var(--accent)}
.pd-qr-color-input-pair input[type="text"]{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;color:var(--text-primary);font-family:var(--font);transition:all .2s;box-sizing:border-box}
.pd-qr-color-input-pair input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* QR Editor — Gradient Selector */
.pd-qr-gradient-selector{display:flex;gap:4px;margin-bottom:14px;background:var(--bg-primary);border-radius:var(--radius-md);padding:3px;border:1px solid var(--border)}
.pd-qr-gradient-btn{flex:1;padding:7px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;background:transparent;border:none;color:var(--text-muted);cursor:pointer;text-align:center;font-family:var(--font);transition:all .2s}
.pd-qr-gradient-btn:hover{color:var(--text-secondary)}
.pd-qr-gradient-btn.active{color:var(--text-primary);background:var(--accent-dim);box-shadow:0 1px 4px rgba(168,85,247,0.1)}

/* QR Editor — Angle Slider */
.pd-qr-angle-slider{margin-top:14px}
.pd-qr-angle-slider label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:600}
.pd-qr-angle-slider input[type="range"]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none}
.pd-qr-angle-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#c084fc,var(--accent));border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,0.2);box-shadow:0 0 10px rgba(168,85,247,0.3)}

/* QR Editor — Logo Upload */
.pd-qr-logo-upload{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--bg-primary)}
.pd-qr-logo-upload:hover{border-color:var(--accent);background:var(--accent-dim)}
.pd-qr-logo-upload svg{width:36px;height:36px;color:var(--text-muted);margin-bottom:8px;transition:color .2s}
.pd-qr-logo-upload:hover svg{color:var(--accent)}
.pd-qr-logo-upload p{font-size:13px;color:var(--text-secondary);margin:0 0 4px;font-weight:500}
.pd-qr-logo-upload span{font-size:11px;color:var(--text-muted)}
.pd-qr-logo-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* QR Editor — Logo Slider */
.pd-qr-logo-slider{margin-top:20px}
.pd-qr-logo-slider label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:600}
.pd-qr-logo-slider input[type="range"]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none}
.pd-qr-logo-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#c084fc,var(--accent));border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,0.2);box-shadow:0 0 10px rgba(168,85,247,0.3)}

/* QR Editor — Toggle Row */
.pd-qr-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.pd-qr-toggle-row span{font-size:13px;color:var(--text-secondary);font-weight:500}
.pd-qr-toggle{position:relative;width:48px;height:26px;background:var(--bg-card-hover);border-radius:13px;cursor:pointer;transition:all .2s;border:1px solid var(--border);flex-shrink:0}
.pd-qr-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-muted);transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
/* Two engines drive these switches and they name the on-state differently:
   product-detail.js marks it `.active`, svg-design-studio.js (personalize modal
   + admin studio) marks it `.on`, matching the `.pd-addon-toggle` sitting right
   next to it. Style both — otherwise one engine's switches never visibly move. */
.pd-qr-toggle.active,.pd-qr-toggle.on{background:var(--accent);border-color:var(--accent)}
.pd-qr-toggle.active::after,.pd-qr-toggle.on::after{left:24px;background:#fff;box-shadow:0 0 8px rgba(168,85,247,0.3)}

/* QR Editor — Frame Grid */
.pd-qr-frame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pd-qr-frame-option{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 6px 8px;text-align:center;cursor:pointer;transition:all .2s}
.pd-qr-frame-option:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.pd-qr-frame-option.selected{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 2px 8px rgba(168,85,247,0.1)}
.pd-qr-frame-preview{width:40px;height:40px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.pd-qr-frame-name{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.02em}
.pd-qr-frame-option.selected .pd-qr-frame-name{color:var(--accent-hover)}

/* QR Editor — Frame Text Input */
.pd-qr-frame-text{margin-top:16px}
.pd-qr-frame-text label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.pd-qr-frame-text input{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font);transition:all .2s;box-sizing:border-box}
.pd-qr-frame-text input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

.pd-edt-delete-btn{padding:8px 16px;border-radius:var(--radius-sm);border:1px solid rgba(244,63,94,0.3);background:rgba(244,63,94,0.06);color:#fb7185;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;margin-top:8px}
.pd-edt-delete-btn:hover{background:rgba(244,63,94,0.12);border-color:rgba(244,63,94,0.5)}
.pd-edt-no-items{font-size:13px;color:var(--text-muted);font-style:italic;padding:8px 0}

/* Icon Library Panel */
.pd-edt-icon-cats{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.pd-edt-icon-cat{padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.pd-edt-icon-cat:hover{border-color:var(--border-hover);color:var(--text-primary)}
.pd-edt-icon-cat.active{border-color:var(--accent);background:rgba(103,68,218,0.12);color:var(--accent)}
.pd-edt-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-height:180px;overflow-y:auto;margin-bottom:12px;padding:2px}
.pd-edt-icon-grid::-webkit-scrollbar{width:4px}
.pd-edt-icon-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.pd-edt-icon-cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:6px}
.pd-edt-icon-cell:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.pd-edt-icon-cell svg{width:100%;height:100%;color:var(--text-secondary)}
.pd-edt-icon-cell:hover svg{color:var(--text-primary)}
.pd-edt-icon-upload{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center;cursor:pointer;transition:all .2s;position:relative;margin-bottom:12px}
.pd-edt-icon-upload:hover{border-color:var(--accent);background:var(--accent-dim)}
.pd-edt-icon-upload-text{font-size:11px;color:var(--text-secondary)}
.pd-edt-icon-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.pd-edt-icon-controls{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pd-edt-icon-controls label{font-size:11px;color:var(--text-muted);font-weight:600}
.pd-edt-icon-controls input[type="color"]{width:24px;height:24px;border:2px solid var(--border);border-radius:4px;cursor:pointer;background:transparent;padding:1px}
.pd-edt-icon-controls input[type="range"]{flex:1;-webkit-appearance:none;height:3px;background:var(--border);border-radius:2px;outline:none;accent-color:var(--accent)}
.pd-edt-icon-controls input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer}
.pd-edt-icon-controls span{font-size:10px;color:var(--text-secondary);font-weight:600;min-width:24px}
.pd-edt-icon-placed{display:flex;gap:4px;flex-wrap:wrap}
.pd-edt-icon-chip{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);font-size:10px;color:var(--text-secondary)}
.pd-edt-icon-chip button{background:none;border:none;padding:0;cursor:pointer;color:var(--text-muted);display:flex;width:12px;height:12px}
.pd-edt-icon-chip button:hover{color:#ef4444}
.pd-edt-icon-chip button svg{width:100%;height:100%}

/* Editor instance separator */
.pd-editor + .pd-editor{margin-top:24px;border-top:2px dashed var(--border);padding-top:24px}
.pd-editor-card-num{font-size:13px;font-weight:600;color:var(--accent-hover);margin-right:6px}

/* Responsive */
@media(max-width:900px){
  .pd-grid{grid-template-columns:1fr;gap:32px}
  .pd-gallery{position:static}
  .pd-specs{grid-template-columns:1fr}
  .pd-features-list{grid-template-columns:1fr}
  .pd-related-grid{grid-template-columns:repeat(2,1fr)}
  .pd-spec-icons{grid-template-columns:repeat(2,1fr)}
  .pd-review-cards{grid-template-columns:1fr}
  .pd-float-name{display:none}
  .pd-testi-grid{grid-template-columns:1fr}
  .pd-print-specs{grid-template-columns:1fr}
  .pd-help-box{flex-direction:column;text-align:center;padding:24px}
  .pd-help-left{flex-direction:column}
  .pd-help-actions{justify-content:center}
  .pd-editor{padding:16px}
  .pd-editor-header h3{font-size:16px}
}
@media(max-width:600px){
  .pd-materials{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pd-editor-tabs{overflow-x:auto}
  .pd-editor-sides{width:100%}
  .pd-editor-side{flex:1;text-align:center}
  .pd-edt-qr-positions{flex-direction:column}
  .pd-title{font-size:26px}
  .pd-price{font-size:26px}
  .pd-ctas{flex-direction:column}
  .pd-actions{flex-direction:column}
  .pd-buy{width:100%}
  .pd-prod-ship-row{grid-template-columns:1fr}
  .pd-thumbs{overflow-x:auto}
  .pd-related-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pd-reviews-summary{flex-direction:column;gap:20px}
  .pd-spec-icons{grid-template-columns:repeat(2,1fr);gap:10px}
  .pd-float-bar .pd-float-swatch{width:36px;height:36px}
  .pd-float-design{display:none}
}

/* ============================================================
   Enhanced Responsive Overrides
   ============================================================ */

/* Modal responsive */
@media(max-width:900px){
  .pd-modal-overlay{padding:30px 0 0;align-items:stretch;overflow:hidden}
  .pd-modal{max-width:100%;max-height:calc(100vh - 30px);border-radius:0;height:calc(100vh - 30px);width:100%;overflow:hidden}
  .pd-modal-header{padding:12px 16px;position:sticky;top:0;z-index:10}
  .pd-modal-body{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pd-editor-layout{grid-template-columns:1fr;gap:16px}
  .pd-editor-layout-right{max-height:none;overflow-y:auto;padding-right:0}
  .pd-editor-sides{width:100%}
  .pd-editor-side{flex:1;text-align:center}
  .pd-modal-save{padding:8px 14px;font-size:12px}
  .pd-editor-canvas-wrap{min-height:200px}
  .pd-design-preview-inner{flex-direction:column;align-items:stretch}
  .pd-design-preview-img{width:100%;height:auto;aspect-ratio:16/10}
}
@media(max-width:480px){
  .pd-modal-title h3{font-size:14px}
  .pd-modal-card-label{display:none}
  .pd-modal-actions{gap:4px;flex-shrink:0}
  .pd-modal-save{padding:7px 10px;font-size:11px}
  .pd-modal-save svg{width:14px;height:14px}
  .pd-modal-save span{display:inline}
  .pd-modal-close{width:30px;height:30px;flex-shrink:0}
  .pd-modal-close svg{width:16px;height:16px}
  .pd-editor-canvas-hint{font-size:10px}
  .pd-modal-header{padding:10px 12px;gap:6px;overflow:hidden}
  .pd-modal-title{min-width:0;overflow:hidden}
  .pd-modal-title svg{display:none}
  .pd-modal-body{padding:10px}
  .pd-personalize-btn{padding:14px 16px;font-size:14px;flex-wrap:wrap}
  .pd-personalize-hint{margin-left:0;width:100%;margin-top:4px;font-size:11px}
  .pd-design-preview-actions{flex-direction:column}
  .pd-design-preview-edit{justify-content:center}
  .pd-design-preview-reset{text-align:center}
  .pd-edt-style-row{flex-wrap:wrap;gap:6px}
  .pd-edt-font-select{width:100%;min-width:0}
  .pd-edt-shadow-details{font-size:11px}
  .pd-pos-row{flex-wrap:wrap}
  .pd-layer-btns{flex-wrap:wrap}
  .pd-align-btns{flex-wrap:wrap}
  .pd-img-resize-row{flex-wrap:wrap}
  .pd-img-resize-slider label{font-size:11px}
  .pd-editor-canvas-wrap{min-height:auto;aspect-ratio:600/380}
  .pd-editor-layout{gap:10px}
  .pd-editor-side{padding:8px 10px;font-size:12px}
}

/* --- Tablet Landscape (1024px) --- */
@media(max-width:1024px){
  .pd-wrap{padding:80px 20px 48px}
  .pd-grid{gap:36px}
  .pd-title{font-size:30px}
  .pd-price{font-size:28px}
  .pd-tabs-wrap{padding:0 20px 48px}
  .pd-related{padding:0 20px 60px}
  .pd-related-grid{grid-template-columns:repeat(3,1fr)}
  .pd-faq-wrap{padding:0 20px 48px}
  .pd-testimonials{padding:0 20px 48px}
  .pd-help{padding:0 20px 48px}
  .pd-help-box{padding:28px 28px}
  .pd-testi-grid{grid-template-columns:repeat(2,1fr)}
  .pd-print-specs{grid-template-columns:repeat(2,1fr)}
  .pd-print-details{grid-template-columns:1fr}
  .pd-materials{grid-template-columns:repeat(3,1fr)}
  .pd-spec-icons{grid-template-columns:repeat(3,1fr)}
  .pd-float-inner{padding:0 20px}
  .pd-editor-canvas-wrap{min-height:220px}
  .pd-qr-style-grid{grid-template-columns:repeat(3,1fr)}
  .pd-qr-color-presets{grid-template-columns:repeat(5,1fr)}
}

/* --- Tablet Portrait (768px) --- */
@media(max-width:768px){
  .pd-wrap{padding:72px 16px 40px}
  .pd-grid{grid-template-columns:1fr;gap:28px}
  .pd-gallery{position:static}
  .pd-main-img{aspect-ratio:16/10}
  .pd-title{font-size:28px}
  .pd-price{font-size:26px}
  .pd-desc{font-size:14px;margin-bottom:22px;padding-bottom:20px}
  .pd-breadcrumb{font-size:12px;margin-bottom:20px;flex-wrap:wrap}
  .pd-tabs-wrap{padding:0 16px 40px}
  .pd-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-tab{white-space:nowrap;padding:12px 18px;font-size:13px}
  .pd-specs{grid-template-columns:1fr}
  .pd-features-list{grid-template-columns:1fr}
  .pd-related{padding:0 16px 48px}
  .pd-related-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pd-related h2{font-size:20px}
  .pd-faq-wrap{padding:0 16px 40px}
  .pd-faq-wrap h2{font-size:20px}
  .pd-faq-q{font-size:14px;padding:14px 16px}
  .pd-faq-a-inner{padding:0 16px 14px;font-size:13px}
  .pd-testimonials{padding:0 16px 40px}
  .pd-testimonials h2{font-size:20px}
  .pd-testi-grid{grid-template-columns:1fr}
  .pd-testi-card{padding:22px}
  .pd-help{padding:0 16px 40px}
  .pd-help-box{flex-direction:column;text-align:center;padding:24px 20px}
  .pd-help-left{flex-direction:column}
  .pd-help-actions{justify-content:center;flex-wrap:wrap}
  .pd-materials{grid-template-columns:repeat(2,1fr)}
  .pd-spec-icons{grid-template-columns:repeat(2,1fr)}
  .pd-review-cards{grid-template-columns:1fr}
  .pd-reviews-summary{flex-direction:column;gap:20px;padding:20px}
  .pd-print-specs{grid-template-columns:1fr}
  .pd-print-details{grid-template-columns:1fr}
  .pd-warranty-opts{flex-direction:column}
  .pd-warranty-opt{width:100%}
  .pd-addon{flex-direction:column;align-items:flex-start;gap:12px}
  .pd-addon-right{width:100%;justify-content:space-between}
  .pd-prod-ship{padding:18px}
  .pd-prod-ship-row{grid-template-columns:1fr}
  .pd-delivery-breakdown{flex-direction:column;gap:4px}
  .pd-editor{padding:16px}
  .pd-editor-header{flex-direction:column;align-items:flex-start;gap:10px}
  .pd-editor-header h3{font-size:16px}
  .pd-editor-canvas-wrap{min-height:200px}
  .pd-editor-sides{width:100%}
  .pd-editor-side{flex:1;text-align:center;padding:8px 12px}
  .pd-editor-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-editor-tab{white-space:nowrap;padding:8px 14px;font-size:12px}
  .pd-edt-qr-positions{flex-direction:column}
  .pd-qr-subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-qr-subtab{white-space:nowrap;min-width:0;font-size:11px;padding:8px 4px}
  .pd-qr-style-grid{grid-template-columns:repeat(3,1fr)}
  .pd-qr-color-presets{grid-template-columns:repeat(5,1fr)}
  .pd-qr-frame-grid{grid-template-columns:repeat(4,1fr)}
  .pd-ctas{flex-direction:column}
  .pd-actions{flex-direction:column}
  .pd-buy{width:100%}
  .pd-wish-btn{width:100%;height:48px}
  .pd-qty-row{flex-wrap:wrap}
  .pd-trust{gap:14px}
  .pd-trust-item{font-size:11px}
  .pd-float-bar .pd-float-swatch{width:36px;height:36px}
  .pd-float-name{display:none}
  .pd-float-design{display:none}
  .pd-float-inner{gap:12px}
  .pd-ship-modal-card{padding:24px;width:95%}
  .pd-ship-modal-form .pd-prod-ship-row{grid-template-columns:1fr}
}

/* --- Mobile (480px) --- */
@media(max-width:480px){
  .pd-wrap{padding:68px 12px 32px}
  .pd-grid{gap:20px}
  .pd-breadcrumb{font-size:11px;gap:4px;margin-bottom:14px}
  .pd-main-img{aspect-ratio:4/3;border-radius:var(--radius-lg)}
  .pd-thumbs{gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .pd-thumb{width:56px;height:56px;flex-shrink:0}
  .pd-title{font-size:22px;line-height:1.2}
  .pd-brand{font-size:11px;margin-bottom:6px}
  .pd-price{font-size:24px}
  .pd-price-old{font-size:14px}
  .pd-price-save{font-size:11px;padding:3px 8px}
  .pd-price-row{flex-wrap:wrap;gap:8px}
  .pd-rating-row{flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .pd-desc{font-size:13px;line-height:1.6;margin-bottom:18px;padding-bottom:16px}
  .pd-option-label{font-size:12px}
  .pd-colors{gap:8px;flex-wrap:wrap}
  .pd-color{width:32px;height:32px}
  .pd-materials{grid-template-columns:repeat(2,1fr);gap:8px}
  .pd-finish-grid{grid-template-columns:1fr}
  .pd-finish-swatch{height:56px}
  .pd-finish-info{padding:8px 10px}
  .pd-mat-swatch{height:56px}
  .pd-mat-info{padding:8px 10px}
  .pd-mat-name{font-size:12px}
  .pd-mat-desc{font-size:10px}
  .pd-spec-icons{grid-template-columns:repeat(2,1fr);gap:8px}
  .pd-spec-icon{padding:14px 10px}
  .pd-spec-icon .sic-val{font-size:16px}
  .pd-spec-icon .sic-label{font-size:11px}
  .pd-spec-icon .sic-icon{width:36px;height:36px;border-radius:10px}
  .pd-spec-icon .sic-icon svg{width:18px;height:18px}
  .pd-qty-row{gap:10px}
  .pd-qty button{width:36px;height:36px;font-size:16px}
  .pd-qty span{width:40px;font-size:14px}
  .pd-add{font-size:14px;padding:14px 20px}
  .pd-design-btn{font-size:13px;padding:14px 18px}
  .pd-buy{font-size:14px;padding:14px 20px}
  .pd-wish-btn{height:44px}
  .pd-nfc{font-size:12px;padding:6px 12px}
  .pd-trust{gap:10px;padding:14px 0}
  .pd-trust-item{font-size:11px;gap:5px}
  .pd-trust-item svg{width:14px;height:14px}
  .pd-addons{margin-bottom:20px}
  .pd-addon{padding:12px 14px}
  .pd-addon-icon{width:32px;height:32px}
  .pd-addon-icon svg{width:16px;height:16px}
  .pd-addon-name{font-size:13px}
  .pd-addon-desc{font-size:11px}
  .pd-addon-price{font-size:13px}
  .pd-warranty{margin-bottom:20px}
  .pd-warranty-opts{gap:6px}
  .pd-warranty-opt{padding:8px 12px;font-size:12px}
  .pd-warranty-opt .wo-dur{font-size:13px}
  .pd-warranty-opt .wo-price{font-size:10px}
  .pd-prod-ship{padding:14px;margin-bottom:20px}
  .pd-prod-ship-title{font-size:13px;margin-bottom:12px}
  .pd-prod-field label{font-size:11px;margin-bottom:4px}
  .pd-prod-field input{padding:8px 10px;font-size:12px}
  .pd-prod-select{padding:8px 10px;font-size:12px}
  .pd-delivery-est{padding:10px 12px}
  .pd-delivery-dates{font-size:13px}
  .pd-delivery-breakdown{font-size:11px}
  .pd-addr-summary{flex-direction:column;align-items:flex-start;gap:10px;padding:12px}
  .pd-addr-summary-edit{width:100%;justify-content:center}
  .pd-editor{padding:12px;margin-bottom:20px}
  .pd-editor-header h3{font-size:14px}
  .pd-editor-canvas-wrap{min-height:180px}
  .pd-editor-tab{padding:8px 10px;font-size:11px}
  .pd-edt-field label{font-size:11px}
  .pd-edt-field input[type="text"]{padding:8px 10px;font-size:12px}
  .pd-edt-upload{padding:20px 14px}
  .pd-edt-upload svg{width:24px;height:24px}
  .pd-edt-upload-text{font-size:12px}
  .pd-edt-thumb{width:44px;height:44px}
  .pd-qr-subtab{font-size:10px;padding:6px 2px}
  .pd-qr-style-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .pd-qr-color-presets{grid-template-columns:repeat(4,1fr);gap:6px}
  .pd-qr-frame-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .pd-qr-color-row{flex-direction:column;align-items:flex-start;gap:6px}
  .pd-qr-color-row label{min-width:auto}
  .pd-qr-color-input-pair{width:100%}
  .pd-tabs-wrap{padding:0 12px 32px}
  .pd-tab{padding:10px 12px;font-size:12px}
  .pd-spec-label{width:120px;font-size:12px}
  .pd-spec-value{font-size:13px}
  .pd-reviews-summary{padding:16px}
  .pd-reviews-big .num{font-size:36px}
  .pd-review-card{padding:16px}
  .pd-review-avatar{width:32px;height:32px;font-size:13px}
  .pd-review-text{font-size:12px}
  .pd-related{padding:0 12px 40px}
  .pd-related h2{font-size:18px;margin-bottom:16px}
  .pd-related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pd-rc-info{padding:10px 12px}
  .pd-rc-name{font-size:12px}
  .pd-rc-price{font-size:14px}
  .pd-faq-wrap{padding:0 12px 32px}
  .pd-faq-wrap h2{font-size:18px;margin-bottom:16px}
  .pd-faq-q{padding:12px 14px;font-size:13px}
  .pd-faq-a-inner{padding:0 14px 12px;font-size:12px}
  .pd-testimonials{padding:0 12px 32px}
  .pd-testimonials h2{font-size:18px;margin-bottom:16px}
  .pd-testi-card{padding:18px}
  .pd-testi-text{font-size:13px;margin-bottom:14px}
  .pd-testi-avatar{width:32px;height:32px;font-size:12px}
  .pd-testi-name{font-size:13px}
  .pd-testi-role{font-size:11px}
  .pd-help{padding:0 12px 32px}
  .pd-help-box{padding:20px 16px;gap:14px;border-radius:var(--radius-lg)}
  .pd-help-icon{width:44px;height:44px;border-radius:12px}
  .pd-help-icon svg{width:20px;height:20px}
  .pd-help-title{font-size:16px}
  .pd-help-sub{font-size:13px}
  .pd-help-btn{padding:10px 18px;font-size:13px}
  .pd-help-actions{width:100%}
  .pd-help-actions .pd-help-btn{flex:1}
  .pd-float-bar{padding:10px 0}
  .pd-float-inner{padding:0 12px;gap:10px}
  .pd-float-swatch{width:32px!important;height:32px!important}
  .pd-float-price{font-size:13px}
  .pd-float-add{padding:10px 18px;font-size:13px}
  .pd-ship-modal-card{padding:20px;width:96%;border-radius:16px}
  .pd-ship-modal-card h3{font-size:17px}
  .pd-ship-choice{padding:12px 14px;gap:10px}
  .pd-ship-choice-text h4{font-size:13px}
  .pd-ship-choice-text p{font-size:11px}
  .pd-ship-modal-actions{flex-direction:column}
  .pd-ship-modal-confirm{padding:12px}
  .pd-ship-modal-cancel{padding:12px;text-align:center}
  .pd-cta-note{font-size:11px}
}

/* ===== FUTURISTIC DESIGN SYSTEM ===== */

/* --- 1. Gradient Mesh Background --- */
.pd-gradient-mesh{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}
.pd-gradient-mesh .pd-mesh-blob{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.pd-mesh-blob-1{width:60vw;height:60vw;top:-20%;left:-10%;background:radial-gradient(circle,rgba(103,68,218,0.15) 0%,transparent 70%);animation:pdMeshDrift1 65s infinite alternate}
.pd-mesh-blob-2{width:50vw;height:50vw;top:40%;right:-15%;background:radial-gradient(circle,rgba(30,58,95,0.10) 0%,transparent 70%);animation:pdMeshDrift2 75s infinite alternate}
.pd-mesh-blob-3{width:45vw;height:45vw;bottom:-10%;left:30%;background:radial-gradient(circle,rgba(13,148,136,0.08) 0%,transparent 70%);animation:pdMeshDrift3 80s infinite alternate}
@keyframes pdMeshDrift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,12vh) scale(1.15)}100%{transform:translate(-5vw,5vh) scale(0.95)}}
@keyframes pdMeshDrift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,-8vh) scale(1.1)}100%{transform:translate(5vw,-12vh) scale(0.9)}}
@keyframes pdMeshDrift3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-10vh) scale(1.12)}100%{transform:translate(-8vw,6vh) scale(0.92)}}

[data-theme="light"] .pd-mesh-blob-1{background:radial-gradient(circle,rgba(240,235,255,0.9) 0%,transparent 70%)}
[data-theme="light"] .pd-mesh-blob-2{background:radial-gradient(circle,rgba(230,255,245,0.8) 0%,transparent 70%)}
[data-theme="light"] .pd-mesh-blob-3{background:radial-gradient(circle,rgba(235,245,255,0.8) 0%,transparent 70%)}

/* --- 2. Dot Grid Texture (body pseudo) --- */
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:radial-gradient(circle,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:24px 24px}
[data-theme="light"] body::after{background-image:radial-gradient(circle,rgba(0,0,0,0.03) 1px,transparent 1px)}

/* --- 3. Glassmorphism Cards & Panels --- */
.pd-main-img{}
[data-theme="light"] .pd-main-img{}

.pd-mat-card{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-mat-card{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-finish-card{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-finish-card{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-float-bar{background:rgba(8,8,15,0.85)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-top:1px solid rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-float-bar{background:rgba(245,243,255,0.85)!important;border-top:1px solid rgba(0,0,0,0.06)!important}

.navbar{background:rgba(8,8,15,0.75)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-bottom:1px solid rgba(255,255,255,0.06)!important}
[data-theme="light"] .navbar{background:rgba(255,255,255,0.75)!important;border-bottom:1px solid rgba(0,0,0,0.06)!important}

.pd-related-card{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-related-card{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-testi-card{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-testi-card{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-review-card{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-review-card{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-spec-icon{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-spec-icon{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-reviews-summary{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-reviews-summary{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-help-box{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-help-box{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

.pd-faq-item{background:rgba(255,255,255,0.02);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-faq-item{background:rgba(255,255,255,0.5);border-color:rgba(0,0,0,0.06)!important}

.pd-prod-ship{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.08)!important}
[data-theme="light"] .pd-prod-ship{background:rgba(255,255,255,0.6)!important;border-color:rgba(0,0,0,0.06)!important}

/* --- 4. Glow & Neon Accents --- */

/* Primary CTA buttons glow */
.pd-add,.pd-float-add,.pd-help-btn.primary,.btn-primary{box-shadow:0 0 24px rgba(103,68,218,0.4),0 0 48px rgba(103,68,218,0.15)!important}
.pd-add:hover,.pd-float-add:hover,.pd-help-btn.primary:hover,.btn-primary:hover{box-shadow:0 0 24px rgba(103,68,218,0.6),0 0 48px rgba(103,68,218,0.25)!important}

/* Badge glows */
.pd-badge.best{box-shadow:0 0 16px rgba(245,158,11,0.2),0 0 32px rgba(245,158,11,0.08)}
.pd-badge.new{box-shadow:0 0 16px rgba(16,185,129,0.2),0 0 32px rgba(16,185,129,0.08)}
.pd-badge.sale{box-shadow:0 0 16px rgba(244,63,94,0.2),0 0 32px rgba(244,63,94,0.08)}
.pd-badge.limited{box-shadow:0 0 16px rgba(168,85,247,0.2),0 0 32px rgba(168,85,247,0.08)}

/* Active states glow */
.pd-thumb.active{box-shadow:0 0 12px rgba(103,68,218,0.35);border-color:var(--accent)!important}
.pd-mat-card.active{box-shadow:0 0 16px rgba(103,68,218,0.3)!important;border-color:var(--accent)!important}
.pd-finish-card.active{box-shadow:0 0 16px rgba(103,68,218,0.3)!important;border-color:var(--accent)!important}


/* Corner accent lines on hero */
.pd-gallery .pd-main-img .pd-placeholder::before{content:'';position:absolute;top:12px;left:12px;width:60px;height:2px;background:linear-gradient(90deg,rgba(103,68,218,0.7),transparent);border-radius:1px;pointer-events:none}
.pd-gallery .pd-main-img .pd-placeholder::after{content:'';position:absolute;top:12px;left:12px;width:2px;height:60px;background:linear-gradient(180deg,rgba(103,68,218,0.7),transparent);border-radius:1px;pointer-events:none}

/* --- 5. Typography & Gradient Text --- */
.pd-title,h1.pd-title{background:linear-gradient(135deg,#ffffff 0%,#a78bfa 50%,#6744DA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .pd-title,[data-theme="light"] h1.pd-title{background:linear-gradient(135deg,#1a1a2e 0%,#4c1d95 50%,#6744DA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.pd-price{background:linear-gradient(135deg,#ffffff 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'JetBrains Mono','SF Mono',monospace}
[data-theme="light"] .pd-price{background:linear-gradient(135deg,#1a1a2e 0%,#6744DA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* --- 6. Micro-Animations --- */

/* Staggered reveal */
.pd-reveal{opacity:0;transform:translateY(24px)}.pd-revealed{opacity:1;transform:translateY(0);transition:opacity 0.6s cubic-bezier(.22,1,.36,1),transform 0.6s cubic-bezier(.22,1,.36,1)}

/* Hover lift for cards */
.pd-mat-card:hover,.pd-finish-card:hover,.pd-related-card:hover,.pd-testi-card:hover,.pd-review-card:hover,.pd-spec-icon:hover,.pd-faq-item:hover{transform:translateY(-4px) scale(1.02)!important;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),border-color 0.2s,box-shadow 0.3s!important}

/* Pulsing NFC badge */
.pd-nfc{animation:pdNfcPulse 3s ease-in-out infinite}
@keyframes pdNfcPulse{0%,100%{box-shadow:0 0 8px rgba(34,211,238,0.1),0 0 16px rgba(34,211,238,0.05)}50%{box-shadow:0 0 16px rgba(34,211,238,0.25),0 0 32px rgba(34,211,238,0.1)}}

/* --- 7. Pill Navigation --- */
.nav-link{border-radius:100px!important;padding:6px 16px!important}
.nav-link.active{background:rgba(255,255,255,0.06)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="light"] .nav-link.active{background:rgba(103,68,218,0.08)!important}

/* ===== END FUTURISTIC DESIGN SYSTEM ===== */

/* Reset Confirmation Popup */
.pd-reset-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;animation:pdResetFadeIn .2s ease}
.pd-reset-overlay.open{display:flex}
@keyframes pdResetFadeIn{from{opacity:0}to{opacity:1}}
@keyframes pdResetSlideUp{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.pd-reset-dialog{width:100%;max-width:400px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04) inset;animation:pdResetSlideUp .25s ease .05s both}
.pd-reset-icon-wrap{display:flex;align-items:center;justify-content:center;padding:28px 24px 8px}
.pd-reset-icon{width:56px;height:56px;border-radius:50%;background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.2);display:flex;align-items:center;justify-content:center}
.pd-reset-icon svg{width:26px;height:26px;color:#fb7185}
.pd-reset-body{padding:8px 28px 20px;text-align:center}
.pd-reset-body h4{font-family:var(--font-display,var(--font));font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 8px}
.pd-reset-body p{font-size:13.5px;color:var(--text-muted);margin:0;line-height:1.55}
.pd-reset-footer{display:flex;gap:10px;padding:4px 24px 24px;justify-content:center}
.pd-reset-footer button{flex:1;padding:10px 18px;border-radius:var(--radius-md);font-size:13.5px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .2s;border:none}
.pd-reset-cancel{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border) !important}
.pd-reset-cancel:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--text-muted) !important}
.pd-reset-confirm{background:rgba(244,63,94,0.9);color:#fff}
.pd-reset-confirm:hover{background:#f43f5e;box-shadow:0 4px 16px rgba(244,63,94,0.3);transform:translateY(-1px)}
.pd-reset-confirm svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px}

/* Stock-design confirm popup — reset-dialog shell recolored to the accent */
.pd-stock-icon{background:rgba(103,68,218,0.12);border-color:rgba(103,68,218,0.25)}
.pd-stock-icon svg{color:#a78bfa}
.pd-stock-confirm{background:var(--accent,#6744DA)}
.pd-stock-confirm:hover{background:#7c5cf0;box-shadow:0 4px 16px rgba(103,68,218,0.35)}

/* ============================================================
   PERFORMANCE OVERRIDES (appended)
   The prototype layered several compositor-heavy effects that make
   scrolling and interaction janky. We neutralise the worst offenders
   while keeping the visual design essentially intact.
   ============================================================ */
/* 1) Mesh blobs: kill the infinite blur(120px) animation + permanent
      compositor layer. The static gradient look is preserved. */
.pd-gradient-mesh .pd-mesh-blob{animation:none !important;will-change:auto !important}
/* 2) backdrop-filter on repeated, scrollable cards forces the browser to
      re-blur the backdrop every frame. Drop it on the many cards (keep it
      on the few fixed elements like navbar / modals where it's cheap). */
.pd-main-img,.pd-mat-card,.pd-finish-card,.pd-related-card,.pd-testi-card,
.pd-review-card,.pd-spec-icon,.pd-reviews-summary,.pd-help-box,.pd-faq-item,
.pd-prod-ship{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}