.ayka-carousel { position:relative; width:100%; margin:0; overflow:hidden; background:#edf2ef; touch-action:pan-y; }
.ayka-carousel-track { position:relative; height:340px; }
.ayka-carousel-slide { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1.15fr; align-items:center; padding:22px max(70px,calc((100% - 1200px)/2)); gap:24px; background:var(--slide-bg,#edf2ef); opacity:0; visibility:hidden; transition:opacity .4s; }
.ayka-carousel-slide.is-active { opacity:1; visibility:visible; }
.ayka-carousel-copy { position:relative; z-index:2; }
.ayka-carousel-copy small { display:block; color:#406b5b; font-size:11px; letter-spacing:.13em; margin-bottom:12px; }
.ayka-carousel-copy :is(h1,h2) { color:#163e35; font-size:clamp(28px,3.1vw,44px); line-height:1.08; letter-spacing:-.035em; margin:0 0 14px; max-width:440px; }
.ayka-carousel-copy p { color:#40584d; font-size:16px; line-height:1.5; margin:0 0 20px; }
.ayka-carousel-copy a { display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; background:#006b69; color:white; border-radius:5px; font-size:14px; text-decoration:none; }
.ayka-carousel-photos { display:flex; align-items:center; justify-content:center; height:270px; gap:12px; }
.ayka-carousel-photos img { width:48%; height:100%; object-fit:contain; mix-blend-mode:multiply; user-select:none; }
.ayka-carousel-arrow { position:absolute; top:44%; z-index:3; width:44px; height:44px; border:1px solid #b9c9bf; border-radius:50%; background:#ffffffcf; color:#174c3f; font-size:24px; cursor:pointer; }
.ayka-carousel-prev { left:14px; } .ayka-carousel-next { right:14px; }
.ayka-carousel-controls { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; z-index:3; }
.ayka-carousel-dot { border:0; padding:0; width:26px; height:30px; background:transparent; cursor:pointer; }
.ayka-carousel-dot::after { content:''; display:block; width:7px; height:7px; border-radius:50%; background:#9bad9f; margin:auto; }
.ayka-carousel-dot[aria-current="true"]::after { background:#006b69; width:18px; border-radius:4px; }
.ayka-carousel-pause { border:0; background:transparent; font-size:12px; color:#254c3c; min-height:32px; padding:0 8px; cursor:pointer; }
.ayka-carousel button:focus-visible,.ayka-carousel a:focus-visible { outline:3px solid #ba871d; outline-offset:3px; }
@media(max-width:760px) {
 .ayka-carousel-track { height:370px; }
 .ayka-carousel-slide { display:block; padding:24px 28px 42px; }
 .ayka-carousel-copy { max-width:90%; }
 .ayka-carousel-copy small { font-size:10px; margin-bottom:9px; }
 .ayka-carousel-copy :is(h1,h2) { font-size:27px; max-width:290px; margin-bottom:8px; }
 .ayka-carousel-copy p { font-size:13px; max-width:260px; margin-bottom:12px; }
 .ayka-carousel-copy a { min-height:40px; padding:8px 14px; font-size:13px; }
 .ayka-carousel-photos { position:absolute; right:30px; left:55px; bottom:36px; height:115px; justify-content:flex-end; gap:10px; }
 .ayka-carousel-photos img { width:42%; }
 .ayka-carousel-arrow { top:73%; width:38px; height:38px; }
 .ayka-carousel-prev { left:8px; } .ayka-carousel-next { right:8px; }
 .ayka-carousel-dot { width:23px; height:36px; }
}
@media(prefers-reduced-motion:reduce) { .ayka-carousel-slide { transition:none; } }

.ayka-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ayka-carousel-slide.ayka-supplier-banner { display:block; padding:0 0 40px; background:#30261e; }
.ayka-supplier-image { display:block; width:100%; height:100%; }
.ayka-supplier-image img { width:100%; height:100%; object-fit:contain; display:block; }
.ayka-carousel:has(.ayka-supplier-banner.is-active) .ayka-carousel-track { height:clamp(220px,calc(36.46vw + 40px),540px); }
.ayka-carousel:has(.ayka-supplier-banner.is-active) .ayka-carousel-pause { color:#fff; }
.ayka-carousel:has(.ayka-supplier-banner.is-active) .ayka-carousel-dot[aria-current="true"]::after { background:#fff; }
@media(max-width:760px) { .ayka-carousel-controls { gap:0; } .ayka-carousel-dot { width:22px; } .ayka-carousel:has(.ayka-supplier-banner.is-active) .ayka-carousel-arrow { top:38%; width:30px; height:30px; opacity:.8; } }
.ayka-carousel:has(.ayka-supplier-banner.is-active) .ayka-carousel-arrow { top:auto; bottom:4px; width:32px; height:32px; }

/* Lifestyle scenes retain the complete product composition. */
.ayka-carousel-track { height:clamp(360px,36vw,490px); }
.ayka-carousel-slide:has(.ayka-carousel-scene) { background:#242522; display:flex; }
.ayka-carousel-scene { position:absolute; inset:0; overflow:hidden; }
.ayka-carousel-scene img { position:absolute; right:0; top:0; width:auto; max-width:100%; height:100%; object-fit:contain; object-position:right center; user-select:none; mask-image:linear-gradient(90deg,transparent,#000 25%); }
.ayka-carousel-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#242522 0%,rgba(36,37,34,.96) 22%,rgba(36,37,34,.7) 36%,transparent 58%); }
.ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy { width:36%; max-width:410px; }
.ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy :is(small,h2,p) { color:#fff; }
.ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy h2 { font-size:clamp(27px,3vw,42px); }
.ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy p { font-size:15px; }
.ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy a { background:#f7f3e9; color:#163e35; }
.ayka-carousel-controls { padding:0 8px; border-radius:24px; background:rgba(16,26,24,.78); }
.ayka-carousel-pause { color:#fff; }
.ayka-carousel-dot[aria-current="true"]::after { background:#fff; }
@media(max-width:760px) {
 .ayka-carousel-track { height:470px; }
 .ayka-carousel-slide:has(.ayka-carousel-scene) { display:block; padding:22px 24px 40px; }
 .ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy { width:100%; max-width:360px; }
 .ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy h2 { font-size:27px; max-width:340px; }
 .ayka-carousel-slide:has(.ayka-carousel-scene) .ayka-carousel-copy p { font-size:13px; margin-bottom:10px; }
 .ayka-carousel-scene { top:auto; height:min(260px,66.667vw); bottom:32px; }
 .ayka-carousel-scene img { width:100%; object-fit:cover; object-position:right bottom; mask-image:none; }
 .ayka-carousel-scene::after { background:linear-gradient(180deg,#242522 0%,transparent 22%); }
 .ayka-carousel-arrow { top:auto; bottom:100px; }
}