/* Product first: no grid, backdrop or effects behind the photograph. */
.dako-section.dk-hero-a{padding:48px 60px 64px;display:flex;flex-direction:column}
.dk-hero-a__top{display:flex;align-items:center;margin-bottom:48px}.dk-hero-a__top .dk-logo{width:170px}
.dk-hero-a__head .dk-eyebrow{font-size:30px;margin-bottom:24px}
.dk-hero-a__head .dk-h1{font-size:76px;line-height:1.13;letter-spacing:-.045em}
.dk-hero-a__size{display:block;margin-top:12px;font-size:50px;line-height:1.2;font-weight:500;letter-spacing:-.03em}
.dk-hero-a__head .dk-body{font-size:40px;line-height:1.5;color:var(--dk-muted);margin-top:24px}
.dk-hero-a__visual{display:flex;align-items:center;justify-content:center;height:510px;margin:26px 0 32px}
.dk-hero-a__visual img{width:680px;height:100%;max-width:100%;object-fit:contain}
.dk-hero-a__bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--dk-line);padding-top:28px}
.dk-hero-a__spec{display:flex;flex-direction:column;gap:12px;padding-left:28px}.dk-hero-a__spec:first-child{padding-left:0}
.dk-hero-a__spec+.dk-hero-a__spec{border-left:1px solid var(--dk-line)}
.dk-hero-a__spec span{font-size:32px;color:var(--dk-muted)}.dk-hero-a__spec strong{font-size:48px;font-weight:600;letter-spacing:-.035em;line-height:1.2}
@media(min-width:768px) and (max-width:1023px){html[data-output-mode="web"] .dk-hero-a__head .dk-h1{font-size:60px}html[data-output-mode="web"] .dk-hero-a__head .dk-body{font-size:26px}html[data-output-mode="web"] .dk-hero-a__visual{height:420px}html[data-output-mode="web"] .dk-hero-a__spec span{font-size:24px}html[data-output-mode="web"] .dk-hero-a__spec strong{font-size:34px}}
@media(max-width:767px){
 .dako-section.dk-hero-a{padding:28px 24px 36px;justify-content:flex-start}
 .dk-hero-a__top{margin-bottom:28px}.dk-hero-a__top .dk-logo{width:104px}
 .dk-hero-a__head .dk-eyebrow{font-size:12px;margin-bottom:14px}
 .dk-hero-a__head .dk-h1{font-size:34px;line-height:1.15}.dk-hero-a__size{font-size:24px;margin-top:8px}
 .dk-hero-a__head .dk-body{font-size:15px;margin-top:16px;line-height:1.6}
 .dk-hero-a__visual{height:clamp(230px,42svh,380px);margin:22px 0 26px;flex-grow:1}
 .dk-hero-a__visual img{width:100%;height:clamp(230px,42svh,380px)}
 .dk-hero-a__bottom{padding-top:20px}.dk-hero-a__spec{padding-left:16px;gap:8px}
 .dk-hero-a__spec span{font-size:12px}.dk-hero-a__spec strong{font-size:23px}
}
@media(max-width:374px){.dako-section.dk-hero-a{padding-left:20px;padding-right:20px}.dk-hero-a__head .dk-h1{font-size:30px}}
@media(max-width:767px) and (max-height:680px){.dako-section.dk-hero-a{padding-top:22px;padding-bottom:24px}.dk-hero-a__top{margin-bottom:20px}.dk-hero-a__visual{height:200px;margin:16px 0 20px}.dk-hero-a__visual img{height:200px}}

.dk-hero-a__bottom{background:var(--dk-surface);border:0;border-radius:10px;padding:24px}
.dk-hero-a__spec+.dk-hero-a__spec{border-left:0}
.dk-hero-a__model{font-size:30px;color:var(--dk-muted);margin:20px 0 0;line-height:1.4}
@media(max-width:767px){.dk-hero-a__bottom{padding:18px 16px;gap:12px}.dk-hero-a__spec{padding-left:0}.dk-hero-a__spec strong{font-size:22px}.dk-hero-a__model{font-size:12px;margin-top:12px}}

/* Three replaceable quick-spec fields, visually separated like the reference. */
.dk-hero-a__bottom{background:transparent;padding:0;gap:16px}
.dk-hero-a__spec,.dk-hero-a__spec:first-child{background:var(--dk-surface);border-radius:8px;padding:22px 24px}
@media(max-width:767px){.dk-hero-a__bottom{padding:0;gap:10px}.dk-hero-a__spec,.dk-hero-a__spec:first-child{padding:16px 12px}}

.dk-hero-a__spec strong .dk-unit{font-size:.66em;color:inherit;font-weight:500}
.dk-hero-a__spec{gap:14px}.dk-hero-a__spec strong{white-space:nowrap}
@media(max-width:767px){.dk-hero-a__spec{gap:8px}.dk-hero-a__spec strong .dk-unit{font-size:.65em}}

/* premium-v1 (adopted 2026-10-30): centered, product dominates, specs as a hairline row. */
@media(min-width:1000px){
 .dako-section.dk-hero-a{padding:48px 60px 72px;text-align:center}
 .dk-hero-a__top{justify-content:flex-start;margin-bottom:64px}.dk-hero-a__top .dk-logo{width:150px}
 .dk-hero-a__head .dk-eyebrow{font-size:28px;margin-bottom:28px}
 /* Long names wrap into balanced lines; the visual leaves room for two lines within one phone screen. */
 .dk-hero-a__head .dk-h1{font-size:104px;line-height:1.06;letter-spacing:-.055em;font-weight:800;text-wrap:balance}
 .dk-hero-a__size{margin-top:14px;font-size:60px;font-weight:600;letter-spacing:-.04em}
 .dk-hero-a__head .dk-body{font-size:40px;margin-top:32px;letter-spacing:-.02em}
 .dk-hero-a__visual{height:520px;margin:40px 0 48px}
 .dk-hero-a__visual img{width:720px}
 .dk-hero-a__bottom{gap:0;border-top:1px solid var(--dk-line);border-bottom:1px solid var(--dk-line);border-radius:0;padding:0}
 .dk-hero-a__spec,.dk-hero-a__spec:first-child{background:transparent;border-radius:0;padding:36px 12px;gap:14px;align-items:center}
 .dk-hero-a__spec+.dk-hero-a__spec{border-left:1px solid var(--dk-line)}
 .dk-hero-a__spec span{font-size:30px}
 .dk-hero-a__bottom .dk-hero-a__spec strong{font-size:64px;font-weight:700;letter-spacing:-.045em;line-height:1.05}
 .dk-hero-a__model{margin-top:28px;font-size:32px;letter-spacing:.01em}
}

/* One or two quick specs share the row evenly instead of leaving empty columns. */
.dk-hero-a__bottom:has(>.dk-hero-a__spec:only-child){grid-template-columns:minmax(0,1fr)}
.dk-hero-a__bottom:has(>.dk-hero-a__spec:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* Cropped product photos fill the visual area by its height (not a fixed thumbnail width).
   One variable (--hv) sets both the area height and the photo size, so a shorter area
   (e.g. wide web screens in reading-flow.css) can never let the photo spill over the title or specs. */
.dk-hero-a__visual{--hv:510px;height:var(--hv)}
@media(min-width:1000px){.dk-hero-a__visual{--hv:520px}}
@media(min-width:768px) and (max-width:1023px){html[data-output-mode="web"] .dk-hero-a__visual{--hv:420px}}
@media(max-width:767px){.dk-hero-a__visual{--hv:clamp(230px,42svh,380px)}}
@media(max-width:767px) and (max-height:680px){.dk-hero-a__visual{--hv:200px}}
.dk-hero-a .dk-hero-a__visual .dk-catalog-photo{width:min(100%,720px,calc(var(--hv) * var(--photo-ratio)))}
@media(max-width:767px){
 .dk-hero-a__head,.dk-hero-a__model{text-align:center}
 .dk-hero-a__head .dk-h1{font-size:38px;letter-spacing:-.05em;font-weight:800}
 .dk-hero-a__bottom{gap:0;border-block:1px solid var(--dk-line)}
 .dk-hero-a__spec,.dk-hero-a__spec:first-child{background:transparent;border-radius:0;padding:16px 6px;align-items:center}
 .dk-hero-a__spec+.dk-hero-a__spec{border-left:1px solid var(--dk-line)}
 .dk-hero-a__bottom .dk-hero-a__spec strong{font-size:26px;font-weight:700}
}