/* ECS product showcase: blue backplates with a focused centre card. */
.products-section{overflow:hidden;padding-bottom:88px}
.product-showcase{width:min(1440px,calc(100% - 32px));margin-inline:auto}
.product-carousel{position:relative}
.product-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:20px}
.product-slide{display:block;min-width:0;color:var(--ink);--product-depth:var(--ecs-depth-blue)}
.showcase-image{display:block;aspect-ratio:1.6;position:relative;background:#edf5f8;border-radius:var(--ecs-photo-corners);box-shadow:10px 11px 0 var(--product-depth);isolation:isolate}
.showcase-image img{border-radius:inherit;pointer-events:none;object-fit:cover}
.product-slide[data-product-index="3"] img{object-position:50% 54%}
.product-slide[data-product-index="4"] img{object-fit:cover;object-position:50% 44%}
.showcase-card-copy{display:block;padding:26px 6px 0}
.showcase-card-copy .index{display:block;color:var(--orange);font-size:9px;margin-bottom:10px}
.showcase-title{display:block;font-size:clamp(22px,2.15vw,31px);line-height:1.15;font-weight:600;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.showcase-summary{display:block;font-size:12px;line-height:1.6;margin-top:12px;color:var(--muted)}
.carousel-arrow,.product-navigation{display:none}
.product-details{width:min(1120px,calc(100% - 80px));margin:18px auto 0}
.product-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:34px 40px;background:#fff;border:1px solid var(--line);border-radius:30px;margin-top:24px;min-height:282px}
.product-detail[hidden]{display:none}
.product-detail .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:14px}
.product-detail h3{font-size:30px;margin-bottom:16px;overflow-wrap:anywhere;hyphens:auto}
.product-detail-copy>p:last-child{font-size:13px;line-height:1.8}
.product-detail-services ul{list-style:none;padding:0;margin:0 0 20px}
.product-detail-services li{display:flex;gap:12px;align-items:baseline;font-size:12px;line-height:1.6;padding:10px 0;border-bottom:1px solid #e4e9e6}
.product-detail-services li span{color:var(--orange);font-size:18px;line-height:1}
.product-detail .actions{gap:20px}
.product-detail .button{font-size:11px;padding:12px 20px;gap:18px}
.product-detail .text-link{font-size:11px;gap:14px}
.product-detail .actions svg{width:18px;height:18px;flex:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Progressive enhancement keeps the five groups available without JavaScript. */
.is-enhanced .product-stage{display:grid;grid-template-columns:1fr;justify-items:center;align-items:start;position:relative;width:calc(100% - 156px);height:auto;margin:auto;padding:8px 0 12px;touch-action:pan-y pinch-zoom;user-select:none;cursor:grab}
.is-enhanced .product-slide{grid-area:1/1;position:relative;width:37%;transform-origin:50% 42%;transition:transform .6s cubic-bezier(.22,.68,.18,1),opacity .45s,visibility .6s;will-change:transform}
.is-enhanced .product-slide[data-position="0"]{transform:translateX(0) scale(1);opacity:1;z-index:3}
.is-enhanced .product-slide[data-position="-1"]{transform:translateX(-94%) scale(.8);opacity:.76;z-index:2}
.is-enhanced .product-slide[data-position="1"]{transform:translateX(94%) scale(.8);opacity:.76;z-index:2}
.is-enhanced .product-slide[data-position="-2"]{transform:translateX(-188%) scale(.68);opacity:0;visibility:hidden;pointer-events:none;z-index:0}
.is-enhanced .product-slide[data-position="2"]{transform:translateX(188%) scale(.68);opacity:0;visibility:hidden;pointer-events:none;z-index:0}
.is-enhanced .product-slide[aria-current=false]:hover{opacity:1}
.is-enhanced .product-slide:focus-visible{outline-offset:15px;border-radius:25px}
.is-enhanced .showcase-summary{display:none}
.is-enhanced .showcase-card-copy{text-align:center;padding-top:27px}
.is-enhanced .carousel-arrow{display:grid;place-items:center;position:absolute;top:38%;z-index:5;width:60px;height:60px;border:2px solid #fff;border-radius:50%;background:var(--ecs-depth-blue);color:#fff;box-shadow:0 5px 0 #073347,0 10px 22px #0c4c6333;transition:filter .2s,transform .2s}
.is-enhanced .carousel-arrow.is-next{background:#c65313;box-shadow:0 5px 0 #8f3608,0 10px 22px #e56c2133}
.carousel-arrow svg{width:28px;height:28px}
.carousel-arrow svg path{stroke-width:2.6}
.carousel-arrow.is-prev{left:5px}.carousel-arrow.is-next{right:5px}
.carousel-arrow.is-prev svg{transform:rotate(180deg)}
.is-enhanced .carousel-arrow:hover{filter:brightness(1.1);transform:translateY(-2px) scale(1.06)}
.is-enhanced .carousel-arrow:active{transform:translateY(3px) scale(.96)}
.is-enhanced .carousel-arrow:focus-visible{outline:3px solid var(--ecs-depth-blue);outline-offset:5px}
.is-enhanced .product-navigation{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:2px}
.product-count{font-size:11px;color:#687c82;font-variant-numeric:tabular-nums;letter-spacing:.1em;min-width:48px}
.product-count b{color:var(--navy)}
.product-dots{display:flex;gap:0;align-items:center}
.product-dot{background:none;border:0;display:grid;place-items:center;padding:0;min-width:32px;height:44px;color:var(--orange)}
.product-dot span{display:block;width:6px;height:6px;border-radius:20px;background:#b1c0c2;transition:width .35s,background .35s}
.product-dot[aria-pressed=true] span{width:24px;background:var(--orange)}
.product-dot:hover span{background:var(--navy)}
.product-hint{font-size:10px;color:var(--muted)}
.is-enhanced .product-detail{margin-top:8px;animation:product-detail-in .4s ease both}
.is-dragging,.is-dragging .product-slide{cursor:grabbing}
@keyframes product-detail-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.product-showcase{width:min(1520px,calc(100% - 64px))}}
@media(max-width:1100px){.is-enhanced .product-stage{width:calc(100% - 128px)}.showcase-title{font-size:25px}.product-details{width:calc(100% - 70px)}.product-detail{gap:30px;padding:30px}.product-detail .actions{gap:14px}.product-detail h3{font-size:27px}.is-enhanced .carousel-arrow{width:52px;height:52px;top:30%}}
@media(max-width:760px){
 .products-section{padding-bottom:58px}.product-showcase{width:100%}.product-stage{grid-template-columns:1fr;padding:20px 30px}
 .is-enhanced .product-stage{width:calc(100% - 40px)}
 .is-enhanced .product-slide{width:62%}
 .is-enhanced .product-slide[data-position="-1"]{transform:translateX(-91%) scale(.75);opacity:.62}
 .is-enhanced .product-slide[data-position="1"]{transform:translateX(91%) scale(.75);opacity:.62}
 .showcase-image{border-radius:var(--ecs-photo-corners);box-shadow:7px 8px 0 var(--product-depth);aspect-ratio:1.6}
 .showcase-title{font-size:clamp(18px,4.4vw,27px)}
 .is-enhanced .showcase-card-copy{padding:22px 0 0}.showcase-card-copy .index{font-size:7px;margin-bottom:8px;letter-spacing:.1em}
 .is-enhanced .carousel-arrow{top:31%;width:48px;height:48px}
 .carousel-arrow.is-prev{left:9px}.carousel-arrow.is-next{right:9px}.carousel-arrow svg{width:24px;height:24px}
 .is-enhanced .product-navigation{gap:14px;flex-wrap:wrap;row-gap:0;padding:0 20px}
 .product-hint{width:100%;text-align:center;font-size:10px}.product-dot{min-width:34px}
 .product-details{width:calc(100% - 40px);margin-top:24px}
 .product-detail{grid-template-columns:1fr;gap:20px;padding:26px 23px;min-height:0;border-radius:24px}
 .product-detail h3{font-size:27px}.product-detail-copy>p:last-child{font-size:13px;line-height:1.75}
 .product-detail-services li{font-size:12px;padding:10px 0}.product-detail .actions{gap:18px}
 .product-detail .button{padding:12px 16px;font-size:10px;gap:12px}.product-detail .text-link{font-size:10px}
}
@media(max-width:380px){.showcase-title{font-size:18px}.product-detail{padding:24px 20px}.product-details{width:calc(100% - 32px)}}
@media(prefers-reduced-motion:reduce){.is-enhanced .product-slide,.product-dot span,.is-enhanced .carousel-arrow{transition:none}.is-enhanced .product-detail{animation:none}}

/* Desktop composition: keep the entire selected group and its actions
   together without clipping text or turning the detail panel into a scroller.
   Mobile and no-JavaScript layouts keep their natural content height. */
@media(min-width:901px){
 .products-section:has(.is-enhanced){--product-image-height:clamp(150px,calc(100svh - 520px),300px);padding-block:26px 30px}
 .products-section:has(.is-enhanced)>.section-head{align-items:center;margin-bottom:16px;gap:32px}
 .products-section:has(.is-enhanced)>.section-head .eyebrow{margin-bottom:8px}
 .products-section:has(.is-enhanced)>.section-head h2{font-size:clamp(32px,2.6vw,40px);line-height:1.08}
 .products-section:has(.is-enhanced)>.section-head>p{font-size:13px;line-height:1.65;max-width:370px}
 .product-showcase.is-enhanced{width:min(1280px,calc(100% - 40px))}
 .is-enhanced .product-carousel{max-width:calc(var(--product-image-height)*5.3 + 120px);margin-inline:auto}
 .is-enhanced .product-stage{width:calc(100% - 120px);height:auto}
 .is-enhanced .product-slide{width:calc(var(--product-image-height)*1.6);max-width:38%}
 .is-enhanced .showcase-image{aspect-ratio:1.6;border-radius:var(--ecs-photo-corners);box-shadow:8px 9px 0 var(--product-depth)}
 .is-enhanced .showcase-card-copy{padding-top:16px}
 .is-enhanced .showcase-card-copy .index{font-size:8px;margin-bottom:5px}
 .is-enhanced .showcase-title{font-size:clamp(21px,1.8vw,26px);line-height:1.12}
 .is-enhanced .carousel-arrow{top:34%;width:60px;height:60px}
 .is-enhanced .product-navigation{margin-top:0}
 .is-enhanced .product-details{width:min(1120px,calc(100% - 40px));margin-top:4px}
 .is-enhanced .product-detail{min-height:0;margin-top:0;padding:20px 28px;gap:32px;border-radius:26px}
 .is-enhanced .product-detail .eyebrow{margin-bottom:7px;font-size:8px}
 .is-enhanced .product-detail h3{font-size:26px;margin-bottom:9px;line-height:1.1}
 .is-enhanced .product-detail-copy>p:last-child{font-size:13px;line-height:1.65}
 .is-enhanced .product-detail-services ul{margin-bottom:10px}
 .is-enhanced .product-detail-services li{padding:6px 0;font-size:12px;line-height:1.5}
 .is-enhanced .product-detail .button,.is-enhanced .product-detail .text-link{min-height:44px}
}

/* Keep the stage height tied to its actual cards at every viewport size. */
.is-enhanced .showcase-card-copy{min-width:0}
.is-enhanced .showcase-title{overflow-wrap:normal;hyphens:auto}
.is-enhanced .product-detail>*{min-width:0}
@media(min-width:761px) and (max-width:900px){
 .product-details{width:calc(100% - 40px)}
 .product-detail{gap:24px;padding:24px;min-height:0}
 .product-detail h3{font-size:25px}
 .showcase-title{font-size:clamp(19px,2.5vw,23px)}
}
@media(max-width:760px){
 .is-enhanced .product-stage{padding-block:14px 12px}
 .is-enhanced .showcase-card-copy{padding-top:18px}
 .showcase-title{font-size:clamp(18px,4.4vw,25px)}
 .product-details{margin-top:18px}
 .product-detail{padding:clamp(20px,5vw,28px);gap:18px}
}

/* Fill category frames without distorting the photos. */
.product-showcase .showcase-image{overflow:hidden}
.product-showcase .showcase-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;padding:0}
.product-showcase .product-slide[data-product-index="0"] img{object-position:50% 48%}
.product-showcase .product-slide[data-product-index="3"] img{object-position:50% 54%}
.product-showcase .product-slide[data-product-index="4"] img{object-position:50% 44%}

/* Owner-selected transparent trio; its whole silhouette stays visible on one seamless field. */
.product-showcase .product-slide[data-product-index="0"] .showcase-image{background:#e5e9e6}
.product-showcase .product-slide[data-product-index="0"] img{object-fit:contain;object-position:center;padding:12px;box-sizing:border-box}

.product-showcase .product-slide[data-product-index="1"] .showcase-image{background:#e5e9e6}
.product-showcase .product-slide[data-product-index="1"] img{object-fit:contain;object-position:center;padding:12px;box-sizing:border-box}
/* Shared neutral ground for the owner-selected transparent category cutouts. */
:root{--ecs-category-cutout-bg:#e5e9e6}
.product-showcase .product-slide[data-product-index="0"] .showcase-image,
.product-showcase .product-slide[data-product-index="2"] .showcase-image{background:var(--ecs-category-cutout-bg)}
.product-showcase .product-slide[data-product-index="2"] img{object-fit:contain;object-position:center;padding:8px;box-sizing:border-box;background:transparent}