.osh-section {
  --osh-primary: var(--ds-primary-color, #00a8e8);
  --osh-danger: var(--ds-red-color, #d5383d);
  --osh-text: var(--ds-dark-text-color, #00171f);
  --osh-preinit-width: calc(67.5676% - 7.7838px);
  --osh-preinit-side-offset: calc(83.7838% + 20.1081px);
  position: relative;
  width: 100%;
  margin: 20px 0 38px;
  padding: 4px 0 0;
  overflow: hidden;
  color: var(--osh-text);
}
.osh-section, .osh-section * { box-sizing: border-box; }
.osh-swiper { position: relative; width: 100%; overflow: visible; }
.osh-swiper .swiper-wrapper { align-items: center; }
.osh-slide { height: auto; }

/* Server-render the same centered frame Swiper will create. The complete hero
   is stable on the first paint, even when its JavaScript arrives from CDN later. */
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-swiper { width: 100%; overflow: visible; }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-swiper .swiper-wrapper { position: relative; display: block; }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide { display: none; width: 100% !important; }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide:first-child { position: relative; display: block; width: var(--osh-preinit-width) !important; margin-right: auto; margin-left: auto; z-index: 2; }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide:nth-child(2),
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide:last-child:not(:nth-child(2)) { position: absolute; top: 0; display: block; width: var(--osh-preinit-width) !important; }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide:nth-child(2) { left: var(--osh-preinit-side-offset); }
.osh-section:not([data-initialized="1"]):not(.osh-initializing) .osh-slide:last-child:not(:nth-child(2)) { right: var(--osh-preinit-side-offset); }
.osh-slide.swiper-slide-active { z-index: 2; }
.osh-slide.swiper-slide-prev, .osh-slide.swiper-slide-next { cursor: pointer; }
.osh-slide.swiper-slide-active .osh-banner, .osh-section:not([data-initialized="1"]) .osh-slide:first-child .osh-banner { cursor: pointer; }
.osh-section:not([data-initialized="1"]) .osh-slide:first-child .osh-content { opacity: 1; }
.osh-section:not([data-initialized="1"]) .osh-slide:first-child .osh-banner::after { opacity: 0; }

.osh-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 620;
  contain: layout paint;
  overflow: hidden;
  border-radius: 18px;
  background: #07131d;
  box-shadow: 0 14px 34px rgba(0,23,31,.13);
  backface-visibility: hidden;
}
.osh-banner::after { position: absolute; z-index: 2; inset: 0; content: ""; background: rgba(4,12,20,.14); opacity: 1; pointer-events: none; }
.osh-slide.swiper-slide-active .osh-banner::after { opacity: 0; }
.osh-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; }
.osh-banner-composed .osh-image-background { opacity: .66; filter: blur(14px) saturate(1.05) brightness(.92); transform: scale(1.13); }
.osh-image-focus { position: absolute; z-index: 0; top: 4%; right: 2%; width: 60%; height: 92%; border-radius: 14px; object-fit: contain; object-position: center right; backface-visibility: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%); }
.osh-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(2,9,18,.92) 0%, rgba(2,9,18,.72) 31%, rgba(2,9,18,.18) 61%, rgba(2,9,18,0) 84%), linear-gradient(0deg, rgba(2,9,18,.2), transparent 48%); }
.osh-banner-composed .osh-shade { background: linear-gradient(90deg, rgba(2,9,18,.94) 0%, rgba(2,9,18,.8) 27%, rgba(2,9,18,.3) 48%, rgba(2,9,18,.05) 69%, rgba(2,9,18,0) 100%), linear-gradient(0deg, rgba(2,9,18,.2), transparent 54%); }
.osh-hitarea { position: absolute; z-index: 3; inset: 0; border-radius: inherit; }
.osh-hitarea:focus-visible { outline: 3px solid rgba(0,168,232,.55); outline-offset: -5px; }

.osh-content { position: absolute; z-index: 4; top: 50%; left: 8%; display: flex; width: 42%; max-height: 86%; flex-direction: column; align-items: flex-start; color: #fff; opacity: 0; transform: translateY(-50%); pointer-events: none; }
.osh-banner-composed .osh-content { width: 42%; }
.osh-slide.swiper-slide-active .osh-content { opacity: 1; }
.osh-slide.swiper-slide-active .osh-content a { pointer-events: auto; }
.osh-reason { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,112,154,.84); color: #e8f9ff; font-size: 12px; font-weight: 750; line-height: 1.2; }
.osh-reason svg { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; }
.osh-title { display: -webkit-box !important; max-width: 100%; max-height: 2.18em; margin: 0; overflow: hidden; color: #fff; font-size: clamp(27px,2.05vw,38px); font-weight: 850; line-height: 1.09; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.28); -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; }
.osh-sales-copy { display: -webkit-box; max-width: 100%; max-height: 2.8em; margin: 14px 0 0; overflow: hidden; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 10px rgba(0,0,0,.22); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.osh-price-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; margin: 20px 0 0; }
.osh-price { color: #fff; font-size: clamp(27px,2.2vw,39px); font-weight: 850; line-height: 1; }
.osh-old-price { color: rgba(255,255,255,.68); font-size: 15px; font-weight: 650; text-decoration: line-through; }
.osh-discount { padding: 7px 10px; border-radius: 8px; background: var(--osh-danger); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.osh-cta { display: inline-flex; width: 190px; max-width: 100%; height: 50px; min-height: 50px; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; background: #00a8e8; color: #fff !important; font-size: 16px; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,168,232,.3); transition: transform .18s ease, filter .18s ease; }
.osh-cta:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); }
.osh-cta svg { width: 19px; height: 19px; fill: currentColor; }

.osh-nav { position: absolute; z-index: 7; top: 50%; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(6,20,31,.84); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.16); transform: translateY(-50%); transition: background .18s ease, transform .18s ease; }
.osh-prev { left: calc(16.2% - 22px); }
.osh-next { right: calc(16.2% - 22px); }
.osh-nav svg { width: 20px; height: 20px; fill: currentColor; }
.osh-nav:hover { background: var(--osh-primary); transform: translateY(-50%) scale(1.05); }
.osh-nav.swiper-button-disabled { opacity: .25; cursor: default; }

.osh-pagination-space { position: relative; display: flex; width: 100%; min-height: 36px; align-items: flex-start; justify-content: center; padding: 14px 0; overflow: visible; }
.osh-pagination { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex; width: max-content !important; min-height: 8px; margin: 0; align-items: center; justify-content: center; line-height: 0; transform: none !important; }
.osh-pagination .swiper-pagination-bullet { display: block; width: 8px; height: 8px; margin: 0 4px !important; padding: 0; border: 0; border-radius: 8px; background: #cbd5dc !important; cursor: pointer; opacity: 1; transition: width .2s ease, opacity .2s ease, background .2s ease; }
.osh-pagination .swiper-pagination-bullet-active { width: 32px; background: #00a8e8 !important; opacity: 1; }
.osh-nav:focus-visible, .osh-cta:focus-visible, .osh-pagination .swiper-pagination-bullet:focus-visible { outline: 3px solid rgba(0,168,232,.42); outline-offset: 3px; }

.dark-theme .osh-pagination .swiper-pagination-bullet { background: rgba(255,255,255,.24) !important; }
.dark-theme .osh-pagination .swiper-pagination-bullet-active { background: #00a8e8 !important; }
.dark-theme .osh-banner { box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.dark-theme .osh-cta { background: #00a8e8; color: #fff !important; }
.dark-theme .osh-cta:hover { color: #fff !important; }

.osh-section.osh-static .swiper-wrapper { display: block; }
.osh-section.osh-static .osh-slide { width: min(100%,980px); margin: auto; }
.osh-section.osh-static .osh-slide:not(:first-child) { display: none; }
.osh-section.osh-static .osh-content { opacity: 1; }
.osh-section.osh-static .osh-banner::after, .osh-section.osh-static .osh-nav, .osh-section.osh-static .osh-pagination-space { display: none; }

@media (max-width: 1199.98px) and (min-width: 768px) {
  .osh-section { --osh-preinit-width: calc(84.7458% - 2.7458px); --osh-preinit-side-offset: calc(92.3729% + 16.6271px); }
  .osh-prev { left: calc(7.6% - 22px); }
  .osh-next { right: calc(7.6% - 22px); }
  .osh-content { left: 8%; width: 48%; }
  .osh-title { font-size: clamp(26px,4vw,36px); }
}

@media (max-width: 767.98px) {
  .osh-section { --osh-preinit-width: calc(92.5926% - .8889px); --osh-preinit-side-offset: calc(96.2963% + 11.5556px); margin: 10px 0 28px; padding-bottom: 0; }
  .osh-banner { min-height: 370px; aspect-ratio: auto; border-radius: 14px; }
  .osh-banner-composed .osh-image-background { opacity: .64; filter: blur(14px) saturate(1.04) brightness(.9); transform: scale(1.15); }
  .osh-image-focus { top: -2%; right: 4%; width: 92%; height: 61%; object-position: center top; filter: drop-shadow(0 12px 24px rgba(0,0,0,.38)); -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 74%,transparent 100%); mask-image: linear-gradient(180deg,#000 0%,#000 74%,transparent 100%); }
  .osh-shade { background: linear-gradient(0deg,rgba(2,9,18,.96) 0%,rgba(2,9,18,.78) 46%,rgba(2,9,18,.12) 100%); }
  .osh-banner-composed .osh-shade { background: linear-gradient(0deg,rgba(2,9,18,.98) 0%,rgba(2,9,18,.86) 43%,rgba(2,9,18,.2) 77%,rgba(2,9,18,.12) 100%); }
  .osh-content { top: auto; right: 18px; bottom: 18px; left: 18px; width: auto; height: auto; max-height: calc(100% - 36px); justify-content: flex-start; gap: 10px; transform: none; transition: none; }
  .osh-banner-composed .osh-content { width: auto; }
  .osh-title { font-size: clamp(24px,7.5vw,31px); -webkit-line-clamp: 2; }
  .osh-reason { margin: 0; padding: 6px 9px; font-size: 11px; }
  .osh-sales-copy { max-width: 100%; margin: 0; font-size: 14px; line-height: 1.35; }
  .osh-price-box { margin: 0; }
  .osh-price { font-size: 27px; }
  .osh-old-price { font-size: 13px; }
  .osh-cta { width: 190px; height: 48px; min-height: 48px; margin: 6px 0 0; padding: 0 17px; font-size: 15px; }
  .osh-nav { display: none; }
  .osh-pagination-space { min-height: 34px; padding: 13px 0; }
}

@media (max-width: 399px) {
  .osh-banner { min-height: 350px; }
  .osh-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .osh-section *, .osh-section *::before, .osh-section *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}