/* Product reference: oversized model lettering, cutout imagery and restrained blue controls. */
#detail-dialog.product-design { width: min(1154px,calc(100% - 40px)); max-height: 94svh; border-radius: 26px; color: #182033; background: #f9fafc; border: 1px solid #fff; }
.product-design::backdrop { background: #27324840; backdrop-filter: blur(9px); }
#detail-dialog.product-design #dialog-content { padding: 0; }
#detail-dialog.product-design .dialog-top { height: 0; padding: 0; border: 0; background: transparent; z-index: 5; }
#detail-dialog:is(.product-design,.company-dialog) #close-dialog { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: #fbfcff; border: 1px solid #dce1ea; border-radius: 50%; box-shadow: 0 2px 3px #25314a1c; font: 30px/1 var(--font-body); color: #10151e; }
#detail-dialog.product-design #close-dialog { position: absolute; top: 14px; right: 24px; }
#detail-dialog:is(.product-design,.company-dialog) #close-dialog:hover { background: #edf1f9; }
#detail-dialog:is(.product-design,.company-dialog) #close-dialog:focus-visible { outline: 3px solid #6284d4; outline-offset: 3px; }
#detail-dialog:is(.product-design,.company-dialog) :is(#detail-title,#company-title):focus { outline: none; box-shadow: none; }
#detail-dialog #dialog-content .pd-profile { font-family: var(--font-body); }
.pd-top { height: 72px; padding: 0 96px 0 42px; display: flex; align-items: center; position: relative; }
.pd-makers { display: flex; flex-wrap: wrap; gap: 12px; max-width: 42%; }
#detail-dialog #dialog-content .pd-makers a { text-transform: uppercase; font-size: 16px; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 16px; }
.pd-makers span { font-size: 22px; }
.pd-top-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 14px; color: #7a859c; }
.pd-hero { position: relative; min-height: 636px; isolation: isolate; background: radial-gradient(ellipse at 74% 30%,#eaf1f64a,transparent 60%),linear-gradient(120deg,#f9fafc,#f5f7fa); }
.pd-model { position: absolute; top: 18px; left: 34px; right: 20px; font-family: var(--font-body); font-weight: 800; font-size: 274px; line-height: 1; letter-spacing: -.055em; color: #303747; overflow-wrap: anywhere; pointer-events: none; }
.pd-model-medium { font-size: 170px; max-width: 90%; top: 42px; }
.pd-model-small { font-size: 100px; max-width: 80%; top: 40px; line-height: 1.08; }
.pd-model-medium,.pd-model-small { max-height: 220px; overflow: hidden; }
#detail-dialog.product-design :focus-visible { outline: 2px solid #4354d9; outline-offset: 3px; box-shadow: none; }
.pd-copy { position: relative; z-index: 2; padding-top: 263px; margin-left: 44px; width: 632px; padding-bottom: 36px; }
#detail-dialog #dialog-content .pd-title { font-size: 42px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 6px; color: #343c4d; overflow-wrap: anywhere; }
#detail-dialog #dialog-content .pd-subtitle { font-size: 17px; line-height: 1.6; color: #7b879d; margin: 0; }
.pd-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); padding: 23px 38px; margin: 17px 0 45px; border: 1px solid #ffffffb3; border-radius: 16px; background: linear-gradient(115deg,#fff9,#e7ecf280); box-shadow: 0 9px 22px #2a3e6520; }
.pd-facts > div + div { border-left: 1px solid #d6dfed; padding-left: 34px; }
.pd-facts dt { color: #7b879d; font-size: 16px; margin-bottom: 7px; }
.pd-facts dd { font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: -.025em; }
/* Size both actions for their longest labels so toggling cannot resize or wrap them. */
.pd-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); align-items: stretch; gap: 12px; }
.pd-subtitle + .pd-actions { margin-top: 28px; }
#detail-dialog #dialog-content .pd-actions > * { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; min-height: 50px; border: 1px solid #d6ddeb; border-radius: 99px; font-size: 14px; font-weight: 500; color: #455889; text-decoration: none; white-space: nowrap; }

.pd-compare::after { content: '+'; color: #3c4dd7; font-size: 18px; margin-left: 8px; }
.pd-compare[aria-pressed=true]::after { content: '−'; }
.pd-follow { line-height: 20px; }
.pd-follow::before { content: ''; flex: 0 0 20px; width: 20px; height: 20px; background: #4056ba; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pd-follow[aria-pressed=true]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#detail-dialog #dialog-content .pd-actions > *:hover { background: #eaf0fc; }
#detail-dialog #dialog-content .pd-actions a { text-decoration: none; }

.pd-gallery { position: absolute; top: -20px; bottom: -16px; right: 46px; width: 43%; z-index: 1; display: flex; flex-direction: column; }
.pd-main-photo { flex: 1; min-height: 0; }
.pd-main-photo > button { display: block; width: 100%; height: 100%; }
.pd-main-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 6px #33405617); }
.pd-photo-empty { display: grid; place-items: center; height: 100%; padding: 28px; color: #7b879d; }
.pd-thumbnails { display: flex; gap: 8px; justify-content: center; padding: 10px; flex-shrink: 0; overflow-x: auto; }
.pd-thumbnails button { width: 42px; height: 42px; border: 1px solid #dce3ed; border-radius: 8px; padding: 4px; background: #fff; flex-shrink: 0; }
.pd-thumbnails button[aria-pressed=true] { border-color: #3e50e8; box-shadow: 0 0 0 1px #3e50e8; }
.pd-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.pd-tabs { display: flex; gap: 38px; padding-inline: 44px; min-height: 51px; border-block: 1px solid #e6ebf3; background: #fff; }
.pd-tabs button { min-height: 49px; padding: 0 2px; font-size: 14px; color: #7b879d; border-bottom: 2px solid transparent; }
.pd-tabs button[aria-selected=true] { color: #111927; border-color: #3c4ae9; font-weight: 600; }
.pd-panel { padding: 19px 38px 20px; background: #fff; }
#detail-dialog #dialog-content .pd-panel h3 { font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -.025em; margin: 0 0 8px; color: #121c2e; }
.pd-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pd-section-heading > span { font-size: 12px; color: #67758d; white-space: nowrap; }
#detail-dialog #dialog-content .pd-intro { font-size: 13px; line-height: 1.7; color: #64758f; margin: 0 0 23px; }
.pd-spec-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }
.pd-spec-group { min-width: 0; }
.pd-spec-group + .pd-spec-group { border-left: 1px solid #e2e8f2; padding-left: 20px; }
.pd-spec-group > summary { display: flex; align-items: center; gap: 16px; list-style: none; border: 1px solid #e0e6f2; border-radius: 16px; min-height: 46px; padding: 10px 14px; cursor: pointer; font-size: 16px; color: #0a1527; }
.pd-spec-group > summary::-webkit-details-marker { display: none; }
.pd-group-mark { color: #43529b; font-size: 23px; line-height: 1; }
.pd-chevron { margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid #23334c; border-bottom: 1.5px solid #23334c; transform: rotate(45deg) translateY(-2px); }
.pd-spec-group[open] .pd-chevron { transform: rotate(225deg); }
.pd-spec-content { padding-top: 12px; }
#detail-dialog #dialog-content .pd-spec-content h4 { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #536783; }
#detail-dialog #dialog-content .pd-panel .metric-conditions { color: #61738b; line-height: 1.8; }
.pd-panel .metric-badges span { background: #f0f4fc; color: #50638c; }
#detail-dialog #dialog-content .pd-panel p { line-height: 1.8; letter-spacing: .01em; }
#detail-dialog #dialog-content .pd-panel .pd-empty { color: #64758f; margin: 16px 0; }
.pd-description { white-space: pre-line; font-size: 17px; line-height: 1.85; letter-spacing: .01em; color: #5c6f8b; width: 100%; max-width: none; margin: 16px 0 32px; }
.pd-overview-facts { display: flex; flex-wrap: wrap; gap: 28px 60px; border-top: 1px solid #e0e6f2; padding-top: 24px; margin-top: 30px; }
.pd-overview-facts dt { color: #6f809b; font-size: 13px; margin-bottom: 8px; }
.pd-overview-facts dd { margin: 0; font-size: 15px; line-height: 1.6; }
.pd-company-navigation { display: grid; gap: 12px; padding: 24px 38px 30px; border-top: 1px solid #e0e6f2; background: #fff; }
#detail-dialog #dialog-content .pd-company-navigation a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 16px 20px; border: 1px solid #d6ddeb; border-radius: 14px; color: #455889; text-decoration: none; }
.pd-company-navigation a:hover { background: #eaf0fc; }
.pd-company-navigation a > span { min-width: 0; overflow-wrap: anywhere; }
.pd-company-navigation small { display: block; margin-bottom: 6px; font-size: 12px; color: #6f809b; }
.pd-company-navigation strong { font-size: 17px; font-weight: 600; }
.pd-company-navigation svg { flex: 0 0 22px; }
@media(max-width:760px) { .pd-company-navigation { padding: 22px; } }
.pd-source { padding: 24px 0; border-top: 1px solid #e0e6f2; }
#detail-dialog #dialog-content .pd-source h3 { font-size: 17px; letter-spacing: 0; }
#detail-dialog #dialog-content .pd-source p { color: #70819a; margin: 10px 0; }
.pd-source blockquote { margin: 16px 0 0; border-left: 2px solid #c9d5ee; padding-left: 18px; white-space: pre-line; color: #526986; line-height: 1.8; }
#detail-dialog #dialog-content .pd-source-note { background: #f3f6fa; border-radius: 12px; padding: 18px 22px; color: #64758f; font-size: 13px; }
@media(max-width:1100px) { .pd-copy { width: 58%; margin-left: 32px; }.pd-model { font-size: 23vw; }.pd-model-medium { font-size: 15vw; }.pd-model-small { font-size: 9vw; }.pd-gallery { width: 42%; right: 8px; }.pd-facts { padding: 22px; }.pd-facts > div + div { padding-left: 20px; }.pd-hero { min-height: 620px; }.pd-copy { padding-top: 235px; } }
@media(max-width:760px) { #detail-dialog.product-design { width: calc(100% - 16px); max-height: 96svh; border-radius: 20px; }.pd-top { height: 70px; padding-left: 22px; }.pd-makers { max-width: 65%; }#detail-dialog #dialog-content .pd-makers a { font-size: 13px; }.pd-top-label { display: none; }#detail-dialog.product-design #close-dialog { right: 16px; top: 12px; }.pd-hero { display: flex; flex-direction: column; min-height: 0; }.pd-model { top: 4px; left: 20px; right: 20px; font-size: 21vw; }.pd-model-medium { font-size: 14vw; }.pd-model-small { font-size: 10vw; }.pd-gallery { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 370px; margin-top: 22px; order: 0; }.pd-copy { order: 1; width: auto; margin: 0; padding: 18px 22px 30px; }#detail-dialog #dialog-content .pd-title { font-size: 30px; }#detail-dialog #dialog-content .pd-subtitle { font-size: 15px; }.pd-facts { padding: 20px 16px; margin: 20px 0 28px; }.pd-facts dt { font-size: 12px; line-height: 1.5; }.pd-facts dd { font-size: 15px; }.pd-facts > div + div { padding-left: 16px; }.pd-actions { grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 10px; }#detail-dialog #dialog-content .pd-actions > * { font-size: 12px; padding-inline: 14px; min-height: 46px; }.pd-tabs { padding-inline: 22px; gap: clamp(12px,4vw,24px); justify-content: flex-start; }.pd-tabs button { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }.pd-panel { padding: 22px; }.pd-section-heading { align-items: flex-start; flex-direction: column; gap: 0; margin-bottom: 12px; }.pd-spec-groups { grid-template-columns: 1fr; gap: 12px; }.pd-spec-group + .pd-spec-group { border-left: none; padding-left: 0; }.pd-description { font-size: 16px; }.pd-overview-facts { flex-direction: column; gap: 22px; } }

/* Product titles fit a single line; image browsing lives in Overview. */
/* Keep the desktop copy below the rendered display lettering, including descenders. */
@media(min-width:761px){.pd-copy{padding-top:max(263px,var(--pd-model-clearance,0px))}}
@media(min-width:761px) and (max-width:1100px){.pd-copy{padding-top:max(235px,var(--pd-model-clearance,0px))}}
.pd-model,#detail-dialog #dialog-content .pd-title{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.pd-model-medium,.pd-model-small{max-height:none;overflow:visible}
.pd-overview-media{margin-bottom:32px}
.pd-overview-gallery{max-width:800px;margin:16px auto 0}
.pd-photo-stage{position:relative}
.pd-photo-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d6ddeb;border-radius:50%;background:#fff;color:#455889;box-shadow:0 2px 8px #25314a12}
.pd-photo-nav:hover{background:#eaf0fc;color:#1749ec}
.pd-photo-nav svg{width:22px;height:22px;pointer-events:none}
.pd-photo-prev{left:12px}
.pd-photo-next{right:12px}
.pd-overview-gallery .pd-main-photo{height:420px;border:1px solid #e6ebf3;border-radius:16px;background:#f7f9fc;padding:20px}
.pd-overview-gallery .pd-main-photo img{display:block;filter:none}
.pd-overview-gallery .pd-thumbnails{justify-content:flex-start;padding:12px 2px}
.pd-overview-gallery .pd-thumbnails button{width:64px;height:64px}
@media(max-width:760px){.pd-overview-gallery .pd-main-photo{height:300px;padding:12px}}

#detail-dialog.product-design .detail-tools { position: absolute; top: 14px; right: 80px; }
#detail-dialog.product-design :is(.detail-report-panel,.detail-share-fallback) { margin: 76px 32px 24px; }
#detail-dialog.product-design .detail-report-panel:not([hidden]) ~ .detail-share-fallback { margin-top: 24px; }
@media(max-width:760px) {
  #detail-dialog:is(.product-design,.company-dialog) #dialog-content { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  #detail-dialog.product-design .detail-tools { top: 12px; right: 68px; }
  #detail-dialog.product-design :is(.detail-report-panel,.detail-share-fallback) { margin: 72px 16px 20px; padding: 20px; }
}