/* LiVAR Banner Manager v3.13.188 — unified image/HTML hover surface */
.livar-banner-slot {
  --livar-banner-gap: clamp(16px, 2vw, 28px);
  display: grid;
  width: min(1180px, calc(100% - 32px));
  min-width: 0;
  gap: var(--livar-banner-gap);
  margin: clamp(22px, 3vw, 42px) auto;
}

.livar-banner-slot--home-after-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.livar-banner-slot--category-before-products {
  width: 100%;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.livar-banner-slot--product-before-main,
.livar-banner-slot--product-after-summary,
.livar-banner-slot--product-after-details,
.livar-banner-slot--category-after-products,
.livar-banner-slot--products-after-categories {
  width: 100%;
  margin-block: clamp(24px, 3vw, 44px);
}

.livar-banner-slot--global-before-footer {
  margin-top: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(18px, 2vw, 30px);
}

/*
 * The shared item owns the visual frame. This keeps Image-only and sandboxed
 * HTML/iframe banners visually identical, including the orange hover halo.
 */
.livar-banner-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(16px, 1.6vw, 26px);
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 101, 0, 0.08), transparent 34%),
    #07090c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.livar-banner-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.livar-banner-creative,
.livar-banner-frame {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.livar-banner-creative {
  aspect-ratio: var(--livar-banner-ratio, 3 / 1);
  color: inherit;
  text-decoration: none;
  transform: translateZ(0);
}

.livar-banner-creative img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.livar-banner-creative--mobile,
.livar-banner-frame--mobile {
  display: none;
}

.livar-banner-frame {
  height: var(--livar-banner-frame-height, 380px);
}

.livar-banner-frame--artwork {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--livar-banner-frame-ratio, 1180 / 380);
}

.livar-banner-creative:focus-visible,
.livar-banner-frame:focus-visible {
  outline: none;
}

.livar-banner-item:focus-within::after {
  border-color: rgba(255, 101, 0, 0.78);
  box-shadow:
    0 0 0 3px rgba(255, 101, 0, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .livar-banner-item,
  .livar-banner-item::after {
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .livar-banner-item:hover {
    box-shadow: 0 30px 84px rgba(0, 0, 0, 0.42);
  }

  .livar-banner-item:hover::after {
    border-color: rgba(255, 101, 0, 0.36);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 900px) {
  .livar-banner-slot {
    width: min(760px, calc(100% - 24px));
    margin-block: 18px 24px;
  }

  .livar-banner-slot--home-after-panel,
  .livar-banner-slot--category-before-products,
  .livar-banner-slot--product-before-main,
  .livar-banner-slot--product-after-summary,
  .livar-banner-slot--product-after-details,
  .livar-banner-slot--category-after-products,
  .livar-banner-slot--products-after-categories {
    width: 100%;
  }

  .livar-banner-slot--category-before-products {
    margin: 0 0 20px;
  }

  .livar-banner-creative--desktop,
  .livar-banner-frame--desktop {
    display: none;
  }

  .livar-banner-creative--mobile,
  .livar-banner-frame--mobile {
    display: block;
  }

  .livar-banner-item {
    border-radius: 18px;
  }

  .livar-banner-frame {
    height: var(--livar-banner-frame-height, 620px);
  }

  .livar-banner-frame--artwork {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--livar-banner-frame-ratio, 390 / 620);
  }
}

@media (prefers-reduced-motion: reduce) {
  .livar-banner-item,
  .livar-banner-item::after {
    transition: none !important;
  }
}