.dynamic-island-shell {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  height: 50px;
  padding: 7px 14px;
  background: #ffe600;
  pointer-events: none;
}

.dynamic-island {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(94vw, 470px);
  min-height: 36px;
  padding: 8px 17px;
  border-radius: 999px;
  background: #202124;
  color: #fff;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .2);
  transition: transform .18s ease, opacity .18s ease;
}

.dynamic-island.is-changing { transform: scale(.97); opacity: .75; }
.dynamic-island-pulse { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #00a650; box-shadow: 0 0 0 4px rgba(0, 166, 80, .18); }
.dynamic-island strong { min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.product-page .product-section-nav { top: 46px; }

@media (min-width: 768px) {
  .site-header,
  .catalog-page .site-header { top: 50px; }
}

@media (min-width: 820px) {
  .product-page .product-gallery-v2 { top: 130px; }
  .product-page .product-aside-v2 { top: 176px; }
  .product-page .product-section-nav { top: 118px; }
}

.dynamic-banner-carousel { position: relative; min-height: 440px; overflow: hidden; background: #232f76; isolation: isolate; }
.dynamic-banner-slide { position: absolute; inset: 0; display: grid; min-height: inherit; align-items: end; color: #fff; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.dynamic-banner-slide.is-active { position: relative; z-index: 1; opacity: 1; visibility: visible; }
.dynamic-banner-slide picture,
.dynamic-banner-slide picture::after { position: absolute; inset: 0; }
.dynamic-banner-slide picture::after { content: ""; background: linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.32) 58%, rgba(0,0,0,.08)); }
.dynamic-banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.dynamic-banner-content { position: relative; z-index: 2; width: min(100%, 1240px); margin: auto; padding: 64px 20px; }
.dynamic-banner-content p { margin: 0 0 9px; color: #ffe600; font-size: 11px; font-weight: 800; letter-spacing: 1.15px; }
.dynamic-banner-content h1,
.dynamic-banner-content h2 { max-width: 690px; margin: 0 0 22px; font-size: clamp(36px, 5vw, 62px); line-height: 1; letter-spacing: -1.8px; text-wrap: balance; }
.dynamic-banner-content a { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 19px; border-radius: 8px; background: #3483fa; color: #fff; font-weight: 750; }
.dynamic-banner-dots { position: absolute; z-index: 3; right: max(20px, calc((100vw - 1240px) / 2 + 20px)); bottom: 22px; display: flex; gap: 7px; }
.dynamic-banner-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.dynamic-banner-dots button[aria-current="true"] { background: #ffe600; border-color: #ffe600; }

.catalog-page .category-dynamic-banner { width: min(calc(100% - 40px), 1240px); min-height: 330px; margin: 24px auto 0; border-radius: 14px; }
.catalog-page .category-dynamic-banner .dynamic-banner-content { padding: 48px; }
.catalog-page .category-dynamic-banner .dynamic-banner-content h1,
.catalog-page .category-dynamic-banner .dynamic-banner-content h2 { font-size: clamp(38px, 5vw, 62px); }
.catalog-page .category-hero.has-dynamic-before { min-height: 0; margin-top: 0; padding-block: 24px; background: #fff; }
.catalog-page .category-hero.has-dynamic-before picture { display: none; }
.catalog-page .category-hero.has-dynamic-before > div { color: #252525; }
.catalog-page .category-hero.has-dynamic-before .breadcrumbs { margin-bottom: 10px; color: #666; }
.catalog-page .category-hero.has-dynamic-before h1 { margin-block: 5px 8px; font-size: clamp(29px, 4vw, 42px); letter-spacing: -1px; }
.catalog-page .category-hero.has-dynamic-before p:not(.section-kicker) { color: #666; font-size: 14px; }

@media (max-width: 767px) {
  .dynamic-island-shell { height: 46px; padding: 6px 10px; }
  .dynamic-island { min-height: 34px; padding: 7px 13px; }
  .dynamic-island strong { font-size: 11px; }
  .dynamic-banner-carousel { min-height: 520px; }
  .dynamic-banner-slide picture::after { background: linear-gradient(0deg, rgba(0,0,0,.84), rgba(0,0,0,.2) 72%, rgba(0,0,0,.06)); }
  .dynamic-banner-content { padding: 150px 20px 48px; }
  .dynamic-banner-content h1,
  .dynamic-banner-content h2 { font-size: clamp(34px, 11vw, 48px); }
  .dynamic-banner-dots { right: 18px; bottom: 18px; }
  .catalog-page .category-dynamic-banner { width: 100%; min-height: 390px; margin: 0; border-radius: 0; }
  .catalog-page .category-dynamic-banner .dynamic-banner-content { padding: 130px 18px 42px; }
  .catalog-page .category-hero.has-dynamic-before { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-island,
  .dynamic-banner-slide { transition: none; }
}