/* Price detail presentation. The list, card catalog and news remain unchanged. */
body.price-expanded { background:#fff; }
body.price-expanded .app { display:block; }
body.price-expanded .sidebar, body.price-expanded .topbar, body.price-expanded .mnav,
body.price-expanded .main > footer { display:none!important; }
body.price-expanded .main { margin:0!important; padding:0!important; width:100%; max-width:none; }
body.price-expanded [data-page="price"] { padding:0!important; margin:0!important; }
body.price-expanded [data-page="price"] > :not(#priceDetailPanel) { display:none!important; }
body.price-expanded #priceDetailPanel { margin:0!important; }
.px-detail { --px-muted:#888780; color:#0D0D0D; background:#fff; min-height:100dvh; font-weight:400; }
.px-detail * { box-sizing:border-box; }
.px-detail button,.px-detail select,.px-detail a { font:inherit; }
.px-detail button,.px-detail select { cursor:pointer; }
.px-detail button:disabled { cursor:default; opacity:.5; }
.px-detail :focus-visible { outline:2px solid #066666; outline-offset:4px; }
.px-icon { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.px-head { min-height:72px; padding:16px 32px; border-bottom:1px solid #EDECE8; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.px-back { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:#666560; padding:8px 0; font-size:16px!important; font-weight:500!important; }
.px-nav { display:flex; align-items:center; gap:12px; font-size:12px; color:#888780; }
.px-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:transparent; border:1px solid transparent; border-radius:10px; padding:8px; color:#666560; }
.px-icon-btn:hover { background:#E8FAFA; color:#066666; }
.px-icon-btn[aria-pressed="true"] { color:#854D0E; }
.px-icon-btn[aria-pressed="true"] .px-icon { fill:#FEF9C3; }
.px-summary { display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px 24px; padding:24px 32px; border-bottom:1px solid #D9D8D3; align-items:start; }
.px-art { grid-row:1/3; width:320px; height:320px; padding:8px; display:grid; place-items:center; border-radius:14px; background:#fff; border:1px solid #EDECE8; overflow:hidden; }
.px-art img { width:100%; height:100%; min-height:0; object-fit:contain; }
.px-art span { color:#888780; font-size:12px; }
.px-summary-main { min-width:0; }
.px-summary-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.px-badge { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:9999px; color:#854D0E; background:#FEF9C3; font-size:12px; font-weight:500; }
.px-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#FFD700; }
.px-badge.op { color:#991B1B; background:#FEE2E2; }
.px-badge.op::before { background:#CC2244; }
.px-tools { display:flex; gap:8px; }
.px-title { margin:0; font-size:16px; font-weight:600; line-height:24px; overflow-wrap:anywhere; }
.px-original,.px-pack { color:#888780; font-size:14px; line-height:20px; margin:8px 0 0; overflow-wrap:anywhere; }
.px-original { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.px-actions { grid-column:2; display:flex; gap:16px; max-width:508px; margin-top:0; }
.px-btn { min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1; min-height:40px; padding:8px 16px; border-radius:10px; border:1px solid #D9D8D3; background:#fff; color:#666560; font-weight:500!important; font-size:14px!important; text-decoration:none; }
.px-btn.primary { background:#19DFDF; border-color:#19DFDF; color:#0D0D0D; }
.px-btn:hover { border-color:#19DFDF; color:#066666; }
.px-btn.primary:hover { background:#0FB8B8; }
.px-btn .px-icon { width:20px; height:20px; }
.px-content { display:grid; gap:24px; padding:24px 32px 40px; }
.px-price-box { padding:20px; border-radius:20px; background:#F7F6F2; }
.px-price-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.px-current-label { color:#666560; font-size:14px; line-height:20px; margin-bottom:4px; }
.px-current { font-size:28px; line-height:36px; font-weight:600; font-variant-numeric:tabular-nums; }
.px-source { display:flex; align-items:center; gap:8px; font-size:12px; color:#888780; }
.px-source .px-icon { width:16px; height:16px; }
.px-grades { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.px-grades.is-box { grid-template-columns:1fr; }
.px-grade { min-width:0; text-align:left; background:#fff; border:1px solid #D9D8D3; border-radius:10px; padding:12px; }
.px-grade[aria-pressed="true"] { background:#E8FAFA; border-color:#19DFDF; }
.px-grade-label { display:block; color:#888780; font-size:12px; font-weight:500; line-height:16px; }
.px-grade-price { display:block; color:#0D0D0D; font-size:14px; font-weight:600; line-height:20px; margin-top:8px; overflow-wrap:anywhere; }
.px-grade[aria-pressed="true"] .px-grade-price { color:#066666; }
.px-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.px-detail h2 { margin:0; font-size:16px; font-weight:600; line-height:24px; }
.px-range { width:auto; flex:none; min-width:80px; min-height:36px; padding:8px 12px; border:1px solid #D9D8D3; border-radius:10px; background:#fff; color:#666560; font-size:12px!important; }
.px-chart { height:204px; width:100%; min-width:0; background:#F7F6F2; border-radius:14px; overflow:hidden; }
.px-chart svg { display:block; width:100%; height:204px; }
.px-chart-note { margin-top:8px; font-size:12px; color:#888780; line-height:20px; }
.px-empty { min-height:204px; display:grid; place-content:center; padding:24px; text-align:center; color:#888780; font-size:14px; }
.px-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:14px; }
.px-table th { font-size:12px; color:#888780; font-weight:400; text-align:left; }
.px-table th,.px-table td { border-bottom:1px solid #EDECE8; padding:12px 0; line-height:20px; overflow-wrap:anywhere; }
.px-table td { font-weight:600; }
.px-table td:first-child { color:#888780; }
.px-table tr.is-selected td:first-child { color:#066666; }
.px-table th:not(:first-child),.px-table td:not(:first-child) { text-align:right; }
.px-change { display:inline-block; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:500; }
.px-change.up { color:#166534; background:#DCFCE7; }
.px-change.down { color:#991B1B; background:#FEE2E2; }
.px-change.flat { color:#888780; }
.px-info td:first-child { width:28%; }
.px-info td:last-child { color:#0D0D0D; }
.px-related { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.px-related .px-btn { flex:0 1 auto; }
/* The first-click panel needs a product-sized image, not a 74px thumbnail. */
html:has(#slidePanel.show) { overflow:hidden; }
#slidePanel { top:0; right:0; bottom:0; width:min(680px,95vw); max-width:none; height:100dvh; display:block; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; transform:translateX(100%); visibility:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s; }
#slidePanel.show { transform:translateX(0); visibility:visible; }
#slidePanel .slide-header { position:sticky; top:0; padding:8px 20px; background:#fff; }
#slidePanel .slide-product-summary { display:block; padding:20px 24px; }
#slidePanel .slide-card-img { width:100%; height:320px; aspect-ratio:auto; border-radius:14px; background:#fff; border:1px solid #EDECE8; }
#slidePanel .slide-card-img img { width:100%; height:100%; object-fit:contain; }
#slidePanel .slide-info { padding-top:20px; }
#slidePanel .slide-name { font-size:18px; line-height:28px; overflow-wrap:anywhere; }
#slidePanel .slide-name-en,#slidePanel .slide-pack { font-size:14px; line-height:20px; overflow-wrap:anywhere; }
#slidePanel .slide-body { padding:20px 24px calc(32px + env(safe-area-inset-bottom,0px)); }
#slidePanel .slide-info-table { table-layout:fixed; }
#slidePanel .slide-info-table td { overflow-wrap:anywhere; }
@media(max-width:720px) {
  /* Touch scrolling keeps the full width; desktop-hosted mobile previews must
     not reserve a Windows scrollbar gutter on the right either. */
  #slidePanel { width:100%; transform:translateY(100%); scrollbar-width:none; }
  #slidePanel::-webkit-scrollbar { display:none; width:0; height:0; }
  #slidePanel.show { transform:translateY(0); }
  #slidePanel .slide-header { padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px; }
  #slidePanel .slide-product-summary { padding:16px; }
  #slidePanel .slide-card-img { height:288px; }
  #slidePanel .slide-info { padding-top:16px; }
  #slidePanel .slide-body { padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px)); }
  #slidePanel .slide-info-table td:first-child { width:28%; }
}
@media(prefers-reduced-motion:reduce) { #slidePanel { transition:none; } }
@media(max-width:1000px) { .px-grades { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) {
  .px-head { min-height:56px; padding:8px 16px; }
  .px-summary { grid-template-columns:minmax(0,1fr); gap:16px; padding:20px 16px; }
  .px-art { grid-row:auto; width:100%; height:264px; }
  .px-summary-top { gap:8px; }
  .px-tools { gap:0; }
  .px-actions { grid-column:1/-1; max-width:none; margin-top:0; gap:12px; }
  .px-content { padding:20px 16px 32px; gap:24px; }
  .px-price-box { padding:16px; }
  .px-price-head { margin-bottom:16px; }
  .px-grades { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .px-current { font-size:28px; }
  .px-info td:first-child { width:28%; }
  .px-nav { gap:4px; }
  .px-table th:first-child { width:30%; }
}
.px-original-name { color:#888780; font-size:12px; line-height:20px; margin-top:8px; }
.px-original-name summary { cursor:pointer; }