.cxn-shop-intro.cjx-model-banner{display:grid;box-sizing:border-box;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:240px;padding:0;overflow:hidden;isolation:isolate}
.cjx-model-banner__copy{align-self:center;padding:24px 28px;min-width:0}
.cxn-shop-intro.cjx-model-banner h1{font-size:clamp(26px,2.5vw,36px);line-height:1.2;overflow-wrap:normal}
.cxn-shop-intro.cjx-model-banner p{max-width:48ch;margin:12px 0 0;color:#b7c6c6;font:400 15px/1.55 Poppins,system-ui,sans-serif}
.cjx-model-banner__photos{position:relative;min-width:0;min-height:238px;overflow:hidden;background:#111}
.cxn-shop-intro.cjx-model-banner .cjx-model-banner__photos img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 100%;opacity:0;transition:opacity .8s ease}
.cxn-shop-intro.cjx-model-banner .cjx-model-banner__photos img.is-current{opacity:1}
.cjx-model-banner__photos:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0e1515,transparent 22%)}
.cjx-model-banner__pause{position:absolute;z-index:2;right:12px;top:12px;min-height:44px;padding:8px 12px;border:1px solid #748383;border-radius:8px;background:rgba(7,13,13,.78);color:#fff;font:500 12px/1.3 Poppins,system-ui,sans-serif;cursor:pointer}
.cjx-model-banner__pause:focus-visible{outline:2px solid #00d1ce;outline-offset:3px}
.cjx-model-banner__pause[hidden]{display:none}
/* Every category banner shares one height per screen size: 240px desktop, then a shorter side-by-side strip. */
@media(max-width:900px){.cxn-shop-intro.cjx-model-banner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:190px}.cjx-model-banner__photos{min-height:188px}.cjx-model-banner__copy{padding:16px 14px 16px 20px}.cxn-shop-intro.cjx-model-banner h1{font-size:24px}.cxn-shop-intro.cjx-model-banner p{display:none}}
@media(max-width:600px){.cxn-shop-intro.cjx-model-banner{min-height:140px}.cjx-model-banner__photos{min-height:138px}.cxn-shop-intro.cjx-model-banner .cxn-eyebrow{margin-bottom:6px;font-size:10px}.cxn-shop-intro.cjx-model-banner h1{font-size:19px;margin:0}}
@media(max-width:400px){.cjx-model-banner__copy{padding:12px 10px 12px 14px}.cxn-shop-intro.cjx-model-banner h1{font-size:17px}}
@media(prefers-reduced-motion:reduce){.cxn-shop-intro.cjx-model-banner .cjx-model-banner__photos img{transition:none}}

/* Product dots (same look as the catalogue banners and homepage hero); the banner lets the card overflow. */
.cxn-shop-intro.cjx-model-banner:has(.cjx-banner-hotspots){position:relative;overflow:visible}
.cxn-shop-intro.cjx-model-banner:has(.cjx-banner-point.is-open){z-index:30}
.cxn-shop-intro.cjx-model-banner .cjx-model-banner__photos{border-top-right-radius:inherit;border-bottom-right-radius:inherit}
.cjx-model-banner .cjx-banner-hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.cjx-model-banner .cjx-banner-point{position:absolute;display:none;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:auto}
.cjx-model-banner .cjx-banner-hotspots.is-ready .cjx-banner-point{display:block}
.cjx-model-banner .cjx-banner-point[hidden],.cjx-model-banner .cjx-banner-point.is-outside{display:none!important}
.cjx-model-banner .cjx-banner-point.is-open{z-index:10}
.cjx-model-banner .cjx-banner-trigger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;cursor:pointer}
.cjx-model-banner .cjx-banner-dot{display:block;box-sizing:border-box;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:rgba(10,10,10,.55);box-shadow:0 0 0 5px rgba(255,255,255,.14),0 2px 12px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.cjx-model-banner .cjx-banner-trigger:hover .cjx-banner-dot,.cjx-model-banner .cjx-banner-trigger[aria-expanded=true] .cjx-banner-dot{background:#00d1ce;transform:scale(1.12)}
.cjx-model-banner .cjx-banner-trigger:focus-visible{outline:2px solid #00d1ce;outline-offset:-6px}
.cjx-model-banner .cjx-banner-card{position:absolute;display:flex;align-items:center;gap:12px;box-sizing:border-box;width:280px;max-width:calc(100vw - 56px);padding:10px;border:1px solid #343a3a;border-radius:14px;background:rgba(16,18,18,.98);box-shadow:0 16px 40px rgba(0,0,0,.42);color:#f4f6f6;text-align:left;font-family:Poppins,system-ui,sans-serif;text-decoration:none!important}
.cjx-model-banner .cjx-banner-card[hidden]{display:none!important}
.cjx-model-banner .cjx-banner-card img{position:static;display:block;flex:0 0 60px;width:60px;height:60px;margin:0;object-fit:cover;border-radius:10px;background:#151515;opacity:1}
.cjx-model-banner .cjx-banner-card__copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.cjx-model-banner .cjx-banner-card__title{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.4;font-weight:500;color:#f4f6f6}
.cjx-model-banner .cjx-banner-card__price,.cjx-model-banner .cjx-banner-card__price .amount{font-size:13px;line-height:1.4;color:#c1cccc}
.cjx-model-banner .cjx-banner-card__link{font-size:11px;font-weight:500;color:#00d1ce}
@media(prefers-reduced-motion:reduce){.cjx-model-banner .cjx-banner-dot{transition:none}}