/* transitions.dev / text states swap. Enter only: selection stays synchronous. */
#products .product-description{--text-swap-dur:150ms;--text-swap-translate-y:4px;--text-swap-blur:2px;--text-swap-ease:ease-in-out}
#products .product-description .t-text-swap{transform:translateY(0);filter:blur(0);opacity:1;transition:transform var(--text-swap-dur) var(--text-swap-ease),filter var(--text-swap-dur) var(--text-swap-ease),opacity var(--text-swap-dur) var(--text-swap-ease)}
#products .product-description .t-text-swap.is-enter-start{transform:translateY(var(--text-swap-translate-y));filter:blur(var(--text-swap-blur));opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){#products .product-description .t-text-swap{transition:none!important}}
body.motion-paused #products .product-description .t-text-swap{transition:none!important}
/* Reserve an actual viewport region for the accepted A-01 assembly. */
#products .product-model-stage{display:none;position:absolute;pointer-events:none}
#products .product-model-stage img{display:block;width:100%;height:100%;object-fit:contain}
#products[data-selected-product="A-01"] .product-model-stage{
 display:block;left:calc(6% + min(27vw,330px) + 24px);
 right:calc(6% + 205px + 24px);top:22%;bottom:18%;
}
@media(min-width:761px) and (max-width:1100px){
 #products[data-selected-product="A-01"] #family-choice{
  top:13%;left:6%;right:6%;width:auto;display:flex;gap:20px;
  overflow-x:auto;white-space:nowrap;pointer-events:auto;
 }
 #products[data-selected-product="A-01"] #family-choice button{flex-shrink:0;padding:11px 0;font-size:12px}
 #products[data-selected-product="A-01"] #family-choice button[aria-pressed=true]:after{display:none}
 #products[data-selected-product="A-01"] .product-model-stage{left:6%;right:6%;top:22%;bottom:50%}
 #products[data-selected-product="A-01"] .product-description{left:6%;top:55%;bottom:auto;width:44%;max-width:440px}
 #products[data-selected-product="A-01"] .product-description h2{font-size:28px}
}
@media(min-width:761px) and (max-width:1100px) and (max-height:950px){
 #products[data-selected-product="A-01"] .product-model-stage{top:22%;bottom:46%}
 #products[data-selected-product="A-01"] .product-description{top:auto;bottom:13%;width:88%;max-width:none}
 #products[data-selected-product="A-01"] .product-description>p:not(.eyebrow){max-width:650px;margin:9px 0 12px;min-height:0}
 #products[data-selected-product="A-01"] #model-choice{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 #products[data-selected-product="A-01"] #model-choice .model-option{flex:0 0 130px;min-height:36px}
 #products[data-selected-product="A-01"] #model-choice .model-name{font-size:11px}
 #products[data-selected-product="A-01"] .product-description>.eyebrow{margin-bottom:9px}
 #products[data-selected-product="A-01"] #product-detail{margin-top:5px}
}
@media(max-width:760px){
 #products[data-selected-product="A-01"] .product-model-stage{left:24px;right:24px;top:23%;bottom:52%}
 #products[data-selected-product="A-01"] .product-description{top:auto;bottom:17%;left:24px;right:24px;width:auto;max-width:none}
}
@media(max-width:760px) and (max-height:730px){
 #products[data-selected-product="A-01"] .product-description{top:auto;bottom:16%}
}

/* Compact controls own rows below the fixed header, not viewport percentages. */
@media(max-width:760px), (max-width:1100px) and (max-height:500px){
 #products .product-sticky{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:44px minmax(0,1fr) auto 44px;
  gap:8px 24px;padding:88px 24px 10px;height:100svh;min-height:100svh!important;
 }
 #products[data-selected-product] #family-choice{
  position:static;inset:auto;grid-column:1/-1;grid-row:1;width:auto;
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  white-space:nowrap;padding:0;pointer-events:auto;
 }
 #products[data-selected-product] #family-choice button{
  flex:0 0 auto;min-height:44px;padding:10px 4px 10px 0;font-size:14px;gap:8px;
 }
 #products[data-selected-product] #family-choice button[aria-pressed=true]:after{display:none}
 #products #family-choice button:focus-visible{outline-offset:-2px}
 #products[data-selected-product] .product-model-stage{
  display:block;position:relative;inset:auto;grid-column:1;grid-row:2/4;
  width:100%;height:100%;min-width:0;min-height:0;
 }
 #products:not([data-selected-product="A-01"]) .product-model-stage img{visibility:hidden}
 #products[data-selected-product] .product-description{
  position:relative;inset:auto;grid-column:2;grid-row:2;width:auto;max-width:none;
  min-width:0;min-height:0;height:100%;padding:3px 8px 5px 3px;
  overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;pointer-events:auto;
 }
 #products .product-description.has-more:after{
  content:'↓ 세부 모델 · 제품 상세';display:block;position:sticky;bottom:-5px;
  width:fit-content;max-width:70%;margin:0 0 -5px auto;padding:5px 7px;text-align:right;
  font-size:11px;line-height:1.3;color:#244b61;
  background:#c5dce5e6;pointer-events:none;
 }
 html[lang=en] #products .product-description.has-more:after{content:'↓ Models and details'}
 #products .product-description:focus-visible{outline:1px solid #315c73;outline-offset:4px}
 #products[data-selected-product] .product-description>.eyebrow{margin-bottom:8px}
 #products[data-selected-product] .product-description h2{font-size:24px;line-height:1.25;min-height:0}
 #products[data-selected-product] .product-description>p:not(.eyebrow){
  font-size:14px;line-height:1.6;max-width:none;min-height:0;margin:10px 0 14px;
 }
 #products .model-selector-heading{font-size:12px;margin-bottom:6px}
 #products[data-selected-product] #model-choice{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:3px 1px 8px;scroll-snap-type:x proximity;mask-image:none;
 }
 #products[data-selected-product] #model-choice .model-option{
  flex:0 0 auto;width:auto;min-width:130px;max-width:none;min-height:56px;
  display:grid;grid-template-columns:1fr 6px;grid-template-rows:12px auto;
  align-content:center;gap:6px 10px;padding:7px 12px;scroll-snap-align:start;
 }
 #products #model-choice .model-code{grid-column:1;width:auto;font-size:9px}
 #products[data-selected-product] #model-choice .model-name{grid-column:1;grid-row:2;font-size:14px;white-space:nowrap}
 #products #model-choice .model-state{grid-column:2;grid-row:1;margin:0}
 #products #model-choice .model-option:before{inset:0}
 #products #product-detail{
  display:inline-flex;align-items:center;min-width:44px;min-height:44px;
  font-size:14px;padding:10px 0;margin-top:4px;
 }
 #products .collection-entry{
  position:static;inset:auto;grid-column:2;grid-row:3;min-width:0;
  gap:6px;text-align:left;font-size:14px;
 }
 #products .collection-entry a{
  display:inline-flex;align-items:center;min-width:44px;min-height:44px;
  max-width:100%;width:fit-content;padding:8px 0;overflow-wrap:break-word;
 }
 #products .collection-entry p{font-size:8px}
 #products .field-footer{
  position:static;inset:auto;grid-column:1/-1;grid-row:4;gap:12px;min-width:0;
 }
 #products .field-footer button{min-width:44px;min-height:44px;font-size:14px;padding:8px 0}
}
@media(max-width:760px){
 #products .product-sticky{padding-top:78px}
}
@media(max-width:1100px) and (max-height:500px){
 #products .product-sticky{padding-right:48px}
}
@media(max-width:760px) and (min-height:501px){
 #products .product-sticky{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:44px clamp(84px,20svh,190px) minmax(0,1fr) auto 44px;
 }
 #products[data-selected-product] .product-model-stage{grid-column:1;grid-row:2}
 #products[data-selected-product] .product-description{grid-column:1;grid-row:3}
 #products .collection-entry{grid-column:1;grid-row:4}
 #products .field-footer{grid-row:5}
}