/* ============================================================
   Product Detail Page (.pd-page scoped)
   Faithful 1:1 replica of 扣子 /products/detail UI.
   All selectors prefixed with .pd-page to avoid affecting
   any other page.
   ============================================================ */
.pd-page { background:#f9fafb; min-height:100vh; color:#374151;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
.pd-container { max-width:1280px; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .pd-container{ padding:0 2rem; } }

/* ---- Breadcrumb (white bar) ---- */
.pd-breadcrumb { background:#fff; border-bottom:1px solid #e5e7eb; }
.pd-breadcrumb-inner { max-width:1280px; margin:0 auto; padding:.75rem 1rem;
  font-size:.875rem; color:#6b7280; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
@media(min-width:640px){ .pd-breadcrumb-inner{ padding:.75rem 2rem; } }
.pd-breadcrumb-inner a { color:#6b7280; text-decoration:none; transition:color .15s; }
.pd-breadcrumb-inner a:hover { color:#2563EB; }
.pd-bc-sep { width:.75rem; height:.75rem; color:#cbd5e1; flex-shrink:0; }
/* ---- inline icon size guards (prevent giant bare SVGs) ---- */
.pd-chevron { display:inline-flex; align-items:center; justify-content:center; width:.875rem; height:.875rem; flex-shrink:0; color:#9ca3af; }
.pd-chevron svg { width:100%; height:100%; }
.pd-rec-all .pd-chevron { color:#2563EB; }
.pd-icon-sm { display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; flex-shrink:0; }
.pd-icon-sm svg { width:100%; height:100%; }
/* safety net: any stray direct-child SVG inside pd-page gets capped */
.pd-page > * svg,
.pd-page a > svg:not([width]):not([height]),
.pd-page button > svg:not([width]):not([height]) { width:1.25rem; height:1.25rem; }
.pd-bc-current { color:#1E40AF; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-weight:600; }

/* ---- Loading / empty ---- */
.pd-loading { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; }
.pd-spinner { width:2rem; height:2rem; border:3px solid #2563EB; border-top-color:transparent; border-radius:9999px; animation:pd-spin .8s linear infinite; }
@keyframes pd-spin { to { transform:rotate(360deg); } }
.pd-loading span { font-size:.875rem; color:#6b7280; }
.pd-empty { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#6b7280; text-align:center; padding:1rem; }
.pd-empty svg { width:3rem; height:3rem; color:#d1d5db; margin-bottom:.75rem; }
.pd-empty p { font-size:1.125rem; font-weight:500; margin:0 0 1rem; }
.pd-empty a { color:#2563EB; text-decoration:none; font-size:.875rem; }
.pd-empty a:hover { text-decoration:underline; }

/* ---- Hero card ---- */
.pd-hero { background:#fff; border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
  border:1px solid #f3f4f6; overflow:hidden; margin-top:2rem; }
.pd-hero-inner { display:flex; flex-direction:column; }
@media(min-width:1024px){ .pd-hero-inner{ flex-direction:row; } }
.pd-hero-left { flex:1; padding:1.25rem; }
@media(min-width:640px){ .pd-hero-left{ padding:2rem; } }
@media(min-width:1024px){ .pd-hero-left{ padding:2.5rem; } }

.pd-badges { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.pd-badge { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600; }
.pd-badge svg { width:.75rem; height:.75rem; }
.pd-badge-blue { background:#eff6ff; color:#1E40AF; }
.pd-badge-green { background:#f0fdf4; color:#15803d; }

.pd-title { font-size:1.5rem; font-weight:700; color:#111827;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; letter-spacing:-.025em; word-break:break-all; margin:0; }
@media(min-width:640px){ .pd-title{ font-size:1.875rem; } }
@media(min-width:1024px){ .pd-title{ font-size:2.25rem; } }
.pd-subtitle { margin-top:.5rem; font-size:1rem; color:#6b7280; line-height:1.6; }

.pd-actions { margin-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media(min-width:640px){ .pd-actions{ gap:.75rem; } }
.pd-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:0 1.5rem; height:2.5rem; border-radius:.5rem; font-size:.875rem; font-weight:500;
  cursor:pointer; transition:all .15s; border:2px solid transparent; background:none; }
.pd-btn svg { width:1rem; height:1rem; }
.pd-btn-primary { background:#2563EB; color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.3); }
.pd-btn-primary:hover { background:#1E40AF; box-shadow:0 4px 6px rgba(37,99,235,.2); }
.pd-btn-primary.added { background:#16a34a; }
.pd-btn-secondary { background:#fff; border-color:#e5e7eb; color:#374151; }
.pd-btn-secondary:hover { border-color:#2563EB; color:#2563EB; }

.pd-pcb-link { margin-top:1.25rem; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; color:#2563EB; font-weight:500; cursor:pointer; background:none; border:none; padding:0; }
.pd-pcb-link:hover { color:#1E40AF; }
.pd-pcb-link svg { width:1rem; height:1rem; transition:transform .15s; }
.pd-pcb-link:hover svg { transform:scale(1.1); }
.pd-pcb-link .chev { width:.875rem; height:.875rem; }
.pd-pcb-link:hover .chev { transform:translateX(.125rem); }

.pd-hero-right { background:linear-gradient(135deg,#f9fafb,#eff6ff);
  display:flex; align-items:center; justify-content:center; padding:2rem; border-left:1px solid #f3f4f6; }
@media(min-width:1024px){ .pd-hero-right{ width:420px; padding:2.5rem; } }
.pd-hero-right img { max-height:18rem; width:auto; object-fit:contain; filter:drop-shadow(0 10px 15px rgba(0,0,0,.1)); }

/* ---- Key specs ---- */
.pd-specs { margin-top:1.5rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
@media(min-width:640px){ .pd-specs{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .pd-specs{ grid-template-columns:repeat(6,1fr); } }
.pd-spec { background:#fff; border:1px solid #f3f4f6; box-shadow:0 1px 2px rgba(0,0,0,.05);
  border-radius:.75rem; padding:.75rem 1rem; text-align:center; transition:all .15s; overflow:hidden; min-width:0; }
.pd-spec:hover { box-shadow:0 4px 6px rgba(0,0,0,.06); border-color:#dbeafe; }
.pd-spec-label { font-size:.625rem; color:#9ca3af; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:.375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(min-width:640px){ .pd-spec-label{ font-size:.75rem; } }
.pd-spec-value { font-size:1rem; font-weight:700; color:#111827;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; word-break:break-all; }
@media(min-width:640px){ .pd-spec-value{ font-size:1.25rem; } }
.pd-spec-unit { font-size:.75rem; font-weight:400; color:#9ca3af; margin-left:.125rem; }
@media(min-width:640px){ .pd-spec-unit{ font-size:.875rem; } }

/* ---- Two-column layout ---- */
.pd-cols { margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:1024px){ .pd-cols{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.pd-col-main { min-width:0; }
@media(min-width:1024px){ .pd-col-main{ grid-column:span 2; } }
.pd-col-side { display:flex; flex-direction:column; gap:1.5rem; min-width:0; }

/* ---- Card ---- */
.pd-card { background:#fff; border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05);
  border:1px solid #f3f4f6; overflow:hidden; }
.pd-card-head { padding:1rem 1.5rem; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; gap:.75rem; }
.pd-card-ic { width:2rem; height:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pd-ic-blue { background:linear-gradient(135deg,#1E40AF,#2563EB); } .pd-ic-blue svg { color:#fff; width:1rem; height:1rem; }
.pd-ic-red { background:#fee2e2; } .pd-ic-red svg { color:#ef4444; width:1.25rem; height:1.25rem; }
.pd-ic-amber { background:#fef3c7; } .pd-ic-amber svg { color:#f59e0b; width:1rem; height:1rem; }
.pd-ic-light { background:#f3f4f6; } .pd-ic-light svg { color:#6b7280; width:1rem; height:1rem; }
.pd-card-title { font-size:1.125rem; font-weight:700; color:#111827; margin:0; }
.pd-card-sub { font-size:.75rem; color:#9ca3af; margin-left:auto; }
.pd-card-body { padding:1.5rem; }

/* ---- Cross reference ---- */
.pd-cr-current { margin-bottom:1.5rem; padding:1rem; border-radius:.75rem;
  background:linear-gradient(135deg,#eff6ff,#eef2ff); border:1px solid #dbeafe; display:flex; align-items:center; justify-content:space-between; }
.pd-cr-cur-text .pd-cr-cur-label { font-size:.75rem; color:#2563EB; font-weight:500; margin-bottom:.25rem; }
.pd-cr-cur-text .pd-cr-cur-name { font-size:1.125rem; font-weight:700; color:#111827; }
.pd-cr-cur-meta { font-size:.875rem; color:#6b7280; margin-top:.25rem; }
.pd-cr-cur-meta span { margin-right:.75rem; }
.pd-cr-cur-status { padding:.25rem .75rem; background:#dcfce7; color:#15803d; font-size:.75rem; font-weight:500; border-radius:9999px; flex-shrink:0; }
.pd-cr-search { position:relative; margin-bottom:1.5rem; }
.pd-cr-search svg { position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:#9ca3af; }
.pd-cr-input { width:100%; padding:.75rem 1rem .75rem 2.75rem; border-radius:.75rem; border:1px solid #e5e7eb;
  font-size:.875rem; color:#374151; outline:none; transition:all .15s; }
.pd-cr-input:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.pd-sub-title { font-size:.875rem; font-weight:600; color:#374151; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.pd-sub-title svg { width:1rem; height:1rem; color:#22c55e; flex-shrink:0; }
.pd-table { width:100%; font-size:.875rem; border-collapse:collapse; }
.pd-table thead th { background:#f9fafb; border-bottom:1px solid #e5e7eb; text-align:left; padding:.75rem 1rem; font-weight:500; color:#4b5563; white-space:nowrap; }
.pd-table tbody td { padding:.75rem 1rem; border-bottom:1px solid #f3f4f6; color:#374151; }
.pd-table tbody tr { transition:background .15s; }
.pd-table tbody tr:hover { background:rgba(239,246,255,.3); }
.pd-brand-cell { display:flex; align-items:center; gap:.5rem; }
.pd-brand-ic { width:2rem; height:2rem; border-radius:.5rem; background:linear-gradient(135deg,#f3f4f6,#f9fafb);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#4b5563; flex-shrink:0; }
.pd-pn { font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:.75rem; color:#374151; white-space:nowrap; }
.pd-status-pill { padding:.125rem .5rem; background:#dcfce7; color:#15803d; font-size:.75rem; font-weight:500; border-radius:9999px; white-space:nowrap; }
.pd-view-link { color:#2563EB; font-size:.75rem; font-weight:500; display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; background:none; border:none; padding:0; }
.pd-view-link:hover { color:#1E40AF; }
.pd-view-link svg { width:.75rem; height:.75rem; }

.pd-cr-form { border-top:1px solid #f3f4f6; padding-top:1.5rem; margin-top:1.5rem; }
.pd-form-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px){ .pd-form-grid{ grid-template-columns:1fr 1fr; } }
.pd-label { display:block; font-size:.75rem; font-weight:500; color:#6b7280; margin-bottom:.375rem; }
.pd-input, .pd-textarea { width:100%; padding:.625rem 1rem; border-radius:.75rem; border:1px solid #e5e7eb;
  font-size:.875rem; color:#374151; outline:none; transition:all .15s; }
.pd-input:focus, .pd-textarea:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.pd-textarea { height:6rem; resize:none; }
.pd-form-foot { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; flex-wrap:wrap; gap:.5rem; }
.pd-form-note { font-size:.75rem; color:#9ca3af; display:flex; align-items:center; gap:.25rem; }
.pd-submit { display:inline-flex; align-items:center; gap:.5rem; padding:0 1.5rem; height:2.5rem;
  background:#2563EB; color:#fff; border:none; border-radius:.75rem; font-size:.875rem; font-weight:500; cursor:pointer; transition:all .15s; }
.pd-submit:hover:not(:disabled) { background:#1E40AF; }
.pd-submit:disabled { background:#cbd5e1; color:#64748b; cursor:not-allowed; opacity:.7; box-shadow:none; }
.pd-submit svg { width:1rem; height:1rem; }

/* ---- DataSheet ---- */
.pd-ds-link { display:flex; align-items:center; gap:.75rem; padding:.75rem; border-radius:.75rem;
  background:#f9fafb; transition:all .15s; text-decoration:none; border:1px solid transparent; }
.pd-ds-link:hover { background:#eff6ff; border-color:#dbeafe; }
.pd-ds-ic { width:2.5rem; height:2.5rem; border-radius:.5rem; background:#fee2e2; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pd-ds-ic svg { color:#dc2626; width:1.25rem; height:1.25rem; }
.pd-ds-text { flex:1; min-width:0; }
.pd-ds-name { font-size:.875rem; font-weight:500; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-ds-type { font-size:.75rem; color:#9ca3af; }
.pd-ds-link .ext { width:1rem; height:1rem; color:#cbd5e1; flex-shrink:0; }

/* ---- Recommended ---- */
.pd-rec-list { padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.pd-rec-item { display:flex; align-items:center; gap:.75rem; padding:.75rem; border-radius:.75rem; transition:all .15s; text-decoration:none; border:1px solid transparent; min-width:0; }
.pd-rec-item:hover { background:rgba(239,246,255,.5); border-color:#dbeafe; }
.pd-rec-ic { width:2.5rem; height:2.5rem; border-radius:.5rem; background:#f9fafb; border:1px solid #f3f4f6;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.pd-rec-ic img { width:100%; height:100%; object-fit:contain; }
.pd-rec-ic span { font-size:.75rem; font-weight:700; color:#9ca3af; }
.pd-rec-text { flex:1; min-width:0; }
.pd-rec-name { font-size:.875rem; font-weight:600; color:#111827;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-rec-item:hover .pd-rec-name { color:#2563EB; }
.pd-rec-pkg { font-size:.75rem; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-rec-arrow { width:1rem; height:1rem; color:#cbd5e1; flex-shrink:0; }
.pd-rec-all { display:flex; align-items:center; justify-content:center; gap:.5rem; width:calc(100% - 2rem); margin:.5rem 1rem 1rem;
  padding:.625rem; border-radius:.75rem; border:1px solid #e5e7eb; font-size:.875rem; font-weight:500; color:#4b5563; text-decoration:none; transition:all .15s; }
.pd-rec-all:hover { border-color:#2563EB; color:#2563EB; }
.pd-rec-all svg { width:1rem; height:1rem; }

/* ---- Q&A ---- */
.pd-qa-current { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:.5rem;
  background:rgba(239,246,255,.5); border:1px solid #dbeafe; font-size:.75rem; color:#374151; }
.pd-qa-current svg { width:.75rem; height:.75rem; color:#2563EB; flex-shrink:0; }
.pd-qa-current b { color:#2563EB; font-weight:600; }
.pd-qa-area { width:100%; height:6rem; padding:.75rem; border-radius:.5rem; border:1px solid #e5e7eb;
  font-size:.75rem; color:#374151; outline:none; resize:none; transition:all .15s; margin-top:.75rem; font-family:inherit; }
.pd-qa-area:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.pd-qa-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.75rem; }
.pd-qa-count { font-size:.75rem; color:#9ca3af; }
.pd-qa-submit { display:inline-flex; align-items:center; gap:.25rem; padding:.375rem 1rem;
  background:#2563EB; color:#fff; border:none; border-radius:.5rem; font-size:.75rem; font-weight:500; cursor:pointer; transition:all .15s; }
.pd-qa-submit:hover:not(:disabled){ background:#1E40AF; }
.pd-qa-submit:disabled { opacity:.5; cursor:not-allowed; }
.pd-qa-done { text-align:center; padding:1.5rem 0; }
.pd-qa-done-ic { width:3rem; height:3rem; border-radius:9999px; background:#dcfce7; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; }
.pd-qa-done-ic svg { color:#22c55e; width:1.5rem; height:1.5rem; }
.pd-qa-done h3 { font-size:.875rem; font-weight:600; color:#111827; margin:0 0 .25rem; }
.pd-qa-done p { font-size:.75rem; color:#6b7280; margin:0 0 .75rem; }
.pd-qa-done button { font-size:.75rem; color:#2563EB; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ---- Additional information ---- */
.pd-add { margin-top:1.5rem; margin-bottom:3rem; }
.pd-add-row { display:flex; align-items:center; padding:.875rem 1.5rem; border-bottom:1px solid #f9fafb; transition:background .15s; }
.pd-add-row:hover { background:rgba(249,250,251,.6); }
.pd-add-row:last-child { border-bottom:none; }
.pd-add-type { width:13rem; flex-shrink:0; }
@media(max-width:640px){ .pd-add-type{ width:9rem; } }
.pd-add-en { font-size:.875rem; font-weight:500; color:#374151; }
.pd-add-zh { font-size:.75rem; color:#9ca3af; margin-top:.125rem; }
.pd-add-file { flex:1; min-width:0; }
.pd-add-dash { color:#cbd5e1; font-size:.875rem; }
.pd-add-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; color:#2563EB; font-weight:500; text-decoration:none; }
.pd-add-link:hover { text-decoration:underline; }
.pd-add-link svg { color:#ef4444; width:1rem; height:1rem; flex-shrink:0; }

/* ---- Modal ---- */
.pd-modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.pd-modal.open { display:flex; }
.pd-modal-card { background:#fff; border-radius:1rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  width:100%; max-width:42rem; margin:1rem; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; }
.pd-modal-card.lg { max-width:56rem; }
.pd-modal-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem;
  border-bottom:1px solid #f3f4f6; position:sticky; top:0; background:#fff; z-index:10; }
.pd-modal-head-l { display:flex; align-items:center; gap:.75rem; }
.pd-modal-head h2 { font-size:1.125rem; font-weight:700; color:#111827; margin:0; }
.pd-modal-head .mono { font-size:.75rem; color:#9ca3af; font-family:'SFMono-Regular',Consolas,monospace; }
.pd-modal-close { padding:.5rem; border-radius:.5rem; border:none; background:none; cursor:pointer; color:#9ca3af; display:flex; align-items:center; }
.pd-modal-close:hover { background:#f3f4f6; }
.pd-modal-close svg { width:1.25rem; height:1.25rem; }
.pd-modal-body { padding:1.5rem; overflow-y:auto; }
.pd-modal-foot { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem;
  border-top:1px solid #f3f4f6; position:sticky; bottom:0; background:#fff; }
.pd-modal-foot .muted { font-size:.75rem; color:#9ca3af; }
.pd-modal-foot .btn { padding:.625rem 1.25rem; background:#1E40AF; color:#fff; border:none; border-radius:.5rem; font-size:.875rem; font-weight:500; cursor:pointer; transition:all .15s; }
.pd-modal-foot .btn:hover { background:#002955; }

/* ---- PCB sections ---- */
.pd-pcb-sec { border:1px solid #e5e7eb; border-radius:.75rem; overflow:hidden; margin-bottom:1.5rem; }
.pd-pcb-sec:last-child { margin-bottom:0; }
.pd-pcb-sec-head { background:#f9fafb; padding:.75rem 1.25rem; display:flex; align-items:center; gap:.5rem; }
.pd-pcb-sec-head svg { color:#2563EB; width:1rem; height:1rem; }
.pd-pcb-sec-head h3 { font-size:.875rem; font-weight:700; color:#111827; margin:0; }
.pd-pcb-sec-body { padding:1.5rem; display:flex; flex-direction:column; align-items:center; }
.pd-pcb-imgbox { width:100%; height:10rem; background:#f9fafb; border-radius:.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; border:1px solid #f3f4f6; }
.pd-pcb-imgbox img { max-height:9rem; object-fit:contain; }
.pd-pcb-dl { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; background:#1E40AF; color:#fff; border-radius:.5rem; font-size:.875rem; font-weight:500; text-decoration:none; transition:all .15s; }
.pd-pcb-dl:hover { background:#002955; }
.pd-pcb-dl svg { width:1rem; height:1rem; }
.pd-pcb-empty { padding:2rem; text-align:center; }
.pd-pcb-empty svg { width:2rem; height:2rem; margin:0 auto .5rem; color:#e5e7eb; display:block; }
.pd-pcb-empty p { font-size:.875rem; color:#9ca3af; margin:0; }

/* ---- Cart modal (faithful; hidden by default) ---- */
.pd-cart-head { background:linear-gradient(135deg,#1E40AF,#2563EB); border-bottom:none; }
.pd-cart-head h2 { color:#fff; }
.pd-cart-head .sub { font-size:.75rem; color:#bfdbfe; }
.pd-cart-head .pd-modal-close { color:#fff; }
.pd-cart-head .pd-modal-close:hover { background:rgba(255,255,255,.2); }
.pd-cart-items { padding:1.5rem; overflow-y:auto; flex:1; }
.pd-cart-empty { text-align:center; padding:3rem 0; }
.pd-cart-empty svg { width:3rem; height:3rem; color:#e5e7eb; margin:0 auto .75rem; display:block; }
.pd-cart-empty p { font-size:.875rem; color:#9ca3af; margin:0; }
.pd-cart-item { border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; margin-bottom:1rem; transition:border-color .15s; }
.pd-cart-item:hover { border-color:rgba(37,99,235,.3); }
.pd-cart-item-top { display:flex; align-items:flex-start; gap:1rem; }
.pd-cart-img { width:4rem; height:4rem; border-radius:.5rem; background:#f9fafb; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #f3f4f6; overflow:hidden; }
.pd-cart-img img { max-width:3rem; max-height:3rem; object-fit:contain; }
.pd-cart-name { font-size:.875rem; font-weight:700; color:#111827; font-family:'SFMono-Regular',Consolas,monospace; }
.pd-cart-pkg { font-size:.75rem; color:#9ca3af; background:#f9fafb; padding:.125rem .5rem; border-radius:.25rem; margin-left:.5rem; }
.pd-cart-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.pd-cart-link { display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; background:#f0fdf4; color:#15803d; font-size:.75rem; font-weight:500; border-radius:.5rem; text-decoration:none; transition:background .15s; }
.pd-cart-link:hover { background:#dcfce7; }
.pd-cart-link svg { width:.75rem; height:.75rem; }
.pd-cart-link.nolink { background:#eff6ff; color:#2563EB; border:none; cursor:pointer; }
.pd-cart-remove { margin-left:auto; padding:.375rem; border:none; background:none; color:#cbd5e1; cursor:pointer; border-radius:.5rem; flex-shrink:0; }
.pd-cart-remove:hover { color:#ef4444; background:#fef2f2; }
.pd-cart-remove svg { width:1rem; height:1rem; }
.pd-cart-foot { padding:1rem 1.5rem; border-top:1px solid #f3f4f6; background:#f9fafb; display:flex; align-items:center; justify-content:space-between; }
.pd-cart-clear { font-size:.75rem; color:#9ca3af; background:none; border:none; cursor:pointer; }
.pd-cart-clear:hover { color:#ef4444; }