/* Detail layer for the approved V2. Keep its composition, typography and palette. */
.brand-cap-detail{width:45px;height:37px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-12deg)}
.orbit{border:0;fill:none;overflow:visible;stroke:#366d5d35;stroke-width:1}
.orbit ellipse{vector-effect:non-scaling-stroke}
.orbit-two{stroke:#366d5d55;stroke-dasharray:3 6}
.desktop-nav a{position:relative;padding-block:12px}
.desktop-nav a:hover{border:0}
.desktop-nav a:after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{transform:scaleX(1)}
.header-contact{transition:background .2s}
.header-contact:hover{background:#2a655b}
.header-contact span,.contact-button>span,.underline-link>span{display:inline-block;transition:transform .22s}
.header-contact:hover span,.contact-button:hover>span,.underline-link:hover>span{transform:translate(2px,-2px)}
#motion-toggle{min-height:44px}
html.motion-off{scroll-behavior:auto}
.callout:after{display:none}
.structure-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.structure-leaders path{fill:none;stroke:#285e54;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.structure-leaders circle{fill:var(--paper);stroke:#285e54;stroke-width:1.5}
.detail-trigger{display:inline-flex;gap:14px;align-items:center;border:0;border-bottom:1px solid #153e3b70;background:none;padding:8px 0 4px;margin-top:12px;font-size:12px;min-height:44px}
.detail-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25}
.detail-trigger:hover{color:#387b6b}
.comfort-items h3>span{display:block}
.comfort-air .air-lines{stroke-dasharray:none;stroke-width:1.7;transform:rotate(-13deg)}
.air-lines marker path{stroke-width:1;fill:none}
.air-lines g>path{stroke-dasharray:5 5}
.comfort-wash .wash-lines{stroke-width:2.5}
.wash-hem{stroke-width:1.2;opacity:.45}
.color-stage img{transition:opacity .18s,transform .3s}
.color-stage{isolation:isolate}
.color-arrows{z-index:3;pointer-events:none;bottom:-4px}
.color-arrows button{pointer-events:auto;min-width:44px;min-height:44px;display:grid;place-items:center;line-height:1;transition:background .2s,color .2s}
.swatch small{transition:opacity .2s}
.swatch[aria-pressed=true] small{font-weight:800}
.swatch[aria-pressed=true]>span:after{border-width:1.5px}
.swatch[aria-pressed=true]>span{transform:none}
.swatch:focus-visible{outline-offset:3px;border-radius:5px}
.color-stage[aria-busy=true]{cursor:progress}
.faq h2>span{white-space:nowrap}
summary{transition:color .2s}
summary:hover{color:#367567}
summary>span{flex-shrink:0}
.downloads>a{min-height:44px;display:flex;align-items:center}
#product-detail{border:0;padding:36px 44px 28px;width:min(920px,calc(100% - 40px));max-height:calc(100dvh - 40px);background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
#product-detail::backdrop{background:#0a2928b5;backdrop-filter:blur(5px)}
.product-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:25px}
.product-detail-head .eyebrow{font-size:10px;opacity:.7}
.product-detail-head h2{font-size:25px;margin-top:10px;line-height:1.6}
.dialog-close{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border:1px solid #153e3b50;border-radius:50%;background:transparent}
.dialog-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}
.dialog-close:hover{background:#e0ece3}
.detail-views{display:flex;gap:24px;justify-content:center;margin:25px 0 0}
.detail-views button{min-height:44px;padding:6px 3px;border:0;border-bottom:1px solid transparent;background:none;font-size:12px}
.detail-views button[aria-pressed=true]{border-color:var(--ink);font-weight:700}
.detail-photo img{width:100%;height:min(53dvh,490px);object-fit:contain;padding:18px 0;filter:drop-shadow(0 12px 12px #153e3b12)}
.detail-photo figcaption{text-align:center;font-family:var(--round);font-size:17px;font-weight:700}
.detail-footnote{font-size:10px;text-align:center;line-height:1.9;margin-top:15px;opacity:.7}
body.dialog-open{overflow:hidden}
@media(min-width:761px){.comfort-items h3{font-size:clamp(21px,1.8vw,26px)}}
@media(max-width:1100px){.brand-cap-detail{display:none}}
@media(max-width:760px){
  #menu-button{position:relative;min-height:44px;justify-content:center}
  #menu-button:before{content:'';position:absolute;inset:0 -10px}
  #menu-button span{transition:transform .2s}
  #menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  #menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .header.menu-open{background:var(--paper)}
  #mobile-menu{top:82px;max-height:calc(100dvh - 82px);overflow:auto}
  .header.scrolled+#mobile-menu{top:72px;max-height:calc(100dvh - 72px)}
  .structure-note{align-items:flex-start}
  .callout{top:calc(100% - 140px)!important;bottom:auto!important}
  .structure-note>span{padding-top:5px}
  .detail-trigger{font-size:11px}
  .comfort-items article{grid-template-columns:34% minmax(0,1fr);column-gap:20px}
  .comfort-heading h2{font-size:clamp(30px,8.6vw,35px)}
  .comfort-items h3{font-size:clamp(16px,4.5vw,22px);line-height:1.65;letter-spacing:0}
  .comfort-items h3>span{white-space:nowrap}
  .comfort-air .comfort-art img{width:139%}
  .comfort-items article>p{font-size:12px;line-height:1.95}
  .wear-banner{height:620px}
  .wear-banner>img{position:absolute;bottom:0;height:calc(100% - 145px);object-position:77% center;mask-image:linear-gradient(to bottom,transparent,#000 55px)}
  .wear-banner-copy{top:29px;left:25px}
  .wear-banner-copy h2{font-size:clamp(30px,8.3vw,48px);line-height:1.4;margin-top:13px}
  .wear-banner-copy>span{font-size:9px}
  .wear-banner>p{padding-top:10px;background:linear-gradient(transparent,#f5f5f1d9);font-size:9px}
  .faq h2 br{display:block}
  .faq h2{font-size:clamp(29px,8.4vw,40px);line-height:1.5}
  .color-arrows{bottom:-5px}
  .color-stage>p{min-height:44px;display:flex;align-items:center;justify-content:center}
  #product-detail{padding:24px 20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .product-detail-head{gap:12px}
  .product-detail-head h2{font-size:20px;max-width:220px}
  .product-detail-head h2>span{display:block;white-space:nowrap}
  .product-detail-head .eyebrow{font-size:8px}
  .detail-photo img{height:44dvh}
  .detail-photo{margin-inline:-20px;overflow:hidden}
  #product-detail[data-active-view=back] .detail-photo img{width:132%;max-width:none;margin-left:-20%}
  .detail-photo figcaption{font-size:14px}
  .detail-footnote{font-size:9px;text-align:left}
}
@media(max-width:480px){
  .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px}
  .swatch{min-width:44px;min-height:62px}
  .swatch>span{width:29px;height:29px}
  .swatch small{font-size:10px}
}
@media(min-width:481px) and (max-width:760px){.award-seal{top:calc(79px + 38.52vw)}}
@media(max-width:360px){.wear-banner{height:570px}.comfort-items article{grid-template-columns:32% minmax(0,1fr);column-gap:17px}.comfort-items h3{font-size:16px}.comfort-items article>p{font-size:11px}.product-detail-head h2{font-size:18px}.contact h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){.structure-leaders *{transition:none}.hero-product>img{transform:rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){
  .motion-override .hero-product>img{animation:hatEnter 1.3s cubic-bezier(.2,.7,.2,1) both!important}
  .motion-override .hero h1>span{animation:copyEnter .85s both!important}
  .motion-override .header.scrolled{animation:headerIn .35s both!important}
  .motion-override .reveal{transition:opacity .8s,transform .8s!important}
}