/* ------------------------------------------------------------
   CIO Banner Slider
   - Desktop arrows (hover/keyboard/mouse)
   - Mobile/Tablet swipe
   - Bottom-right selectors overlay
   ------------------------------------------------------------ */
.cio-banner{ --gap: clamp(16px,2vw,24px); position:relative; margin:clamp(12px,2vw,24px) auto; }
.cio-banner__viewport{ position:relative; overflow:hidden; border-radius:24px;
  background:color-mix(in srgb, var(--surface,#fff) 92%, #000 8%);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.cio-banner__track{ display:flex; transition:transform .5s ease; will-change:transform; }
.cio-banner__slide{ min-width:100%; padding:clamp(18px,3vw,36px); }
.cio-banner__grid{ display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap:var(--gap); }
.cio-banner__text{ display:flex; flex-direction:column; gap:14px; }
.cio-banner__title{ font-size:clamp(24px,3.4vw,44px); line-height:1.1; margin:0; max-width:60ch; }
.cio-banner__meta{ display:flex; gap:12px; align-items:center; font-weight:600;
  color:color-mix(in srgb, var(--text,#222) 70%, #000 30%); }
.cio-price{ font-size:clamp(16px,1.6vw,22px); color:var(--accent,#E17A30); }
.cio-btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 20px;
  border-radius:14px; background:var(--accent,#E17A30); color:#fff; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.12); }
.cio-btn:focus-visible{ outline:2px solid var(--accent,#E17A30); outline-offset:2px; }

.cio-banner__imagewrap{ position:relative; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; }
.cio-banner__image{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.10)); }

/* Badge */
.cio-badge{ align-self:flex-start; font-weight:700; font-size:14px; padding:.35rem .6rem;
  background:var(--accent,#E17A30); color:#fff; border-radius:12px; }

/* Bottom-right selectors (overlay) */
.cio-banner__selectors{ position:absolute; right:16px; bottom:14px; display:flex; gap:10px; padding:10px 12px;
  background:color-mix(in srgb, var(--surface,#fff) 78%, transparent 22%); border:1px solid color-mix(in srgb, var(--border,#e9e9e9) 80%, #000 20%);
  backdrop-filter: blur(10px); border-radius:999px; }
.cio-selector{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; border:none; background:transparent; cursor:pointer; }
.cio-selector__dot{ width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--text,#222) 35%, transparent 65%); }
.cio-selector[aria-selected="true"] .cio-selector__dot{ transform:scale(1.2); background:var(--accent,#E17A30); }
.cio-selector:focus-visible{ outline:2px solid var(--accent,#E17A30); outline-offset:2px; }

/* Desktop arrows (hidden on coarse pointers by default) */
.cio-banner__nav{ position:absolute; top:50%; translate:0 -50%; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--border,#e9e9e9) 80%, #000 20%);
  background:rgba(255,255,255,.85); backdrop-filter: blur(8px); box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer; opacity:.95; }
.cio-banner__nav--prev{ left:12px; }
.cio-banner__nav--next{ right:12px; }
.cio-banner__nav .cio-icon{ font-size:26px; line-height:1; }
.cio-banner__nav:focus-visible{ outline:2px solid var(--accent,#E17A30); }

/* Show arrows only on hover-capable devices (desktop/laptop) */
@media (hover:hover) and (pointer:fine){
  .cio-banner__nav{ display:grid; }
}

/* Responsive: mobile / narrow tablets */
@media (max-width: 900px){
  .cio-banner__grid{ grid-template-columns: 1fr; }
  .cio-banner__imagewrap{ order:-1; aspect-ratio: 16/10; }
  .cio-banner__selectors{ right:10px; bottom:10px; }
  .cio-banner__nav{ display:none; } /* hide arrows on touch-first devices */
}

/* Ultra-wide niceties */
@media (min-width: 1800px){
  .cio-banner__title{ font-size: clamp(44px,2.6vw,64px); }
}