/* Unified banner system - every banner on the site (homepage hero, mid-page
   video banners, product page banners) is built by AZBannerRenderer from
   Admin > Banners data into this one set of classes; nothing here is specific
   to any one banner or page. Imported by styles.css for the live storefront,
   and loaded directly by the admin banner editor so its live preview renders
   with the exact same rules a visitor would see. */
.banner-slot {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  background: var(--pine);
  touch-action: pan-y;
  /* Lets the height rules below reference this box's own rendered width
     instead of the whole browser window - on the live site the box IS the
     full window width so this changes nothing, but inside the admin editor's
     narrower preview panel it stops the frame from being computed as if it
     were full-page-wide, which was cropping images far more than intended. */
  container-type: inline-size;
}

.banner-slot[data-banner-frame="natural"] {
  line-height: 0;
  background: none;
}

.banner-slides {
  position: relative;
}

/* The height lives here rather than on .banner-slot itself - a container can't
   use its own container-query units to size itself (that's circular and the
   browser ignores it), so .banner-slot is the query container and this child
   is what's actually sized off its width. */
.banner-slot[data-banner-frame="fixed-tall"] .banner-slides {
  height: 43.58vw; /* fallback for browsers without container query units */
  height: 43.58cqw;
  max-height: 828px;
  min-height: 320px;
}

.banner-slot[data-banner-frame="fixed-short"] .banner-slides {
  height: clamp(140px, 22vw, 380px);
  height: clamp(140px, 22cqw, 380px);
}

.banner-slide {
  display: none;
}

.banner-slide.is-active {
  display: block;
}

.banner-slot[data-banner-frame^="fixed"] .banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.banner-slot[data-banner-frame^="fixed"] .banner-slide.is-active {
  display: block;
  opacity: 1;
}

.banner-media {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.banner-slot[data-banner-frame^="fixed"] .banner-media {
  height: 100%;
}

.banner-click-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.banner-copy {
  position: absolute;
  z-index: 2;
  max-width: min(520px, 90%);
  padding: clamp(20px, 4vw, 40px);
}

/* Position (left/top/transform) is set inline per-banner by buildSlide() in
   banner-renderer.js - a free-form (x%, y%) center point dragged into place
   in the admin editor, replacing the old fixed 9-position preset classes
   that used to live here. */

.banner-copy-align-left { text-align: left; }
.banner-copy-align-center { text-align: center; }
.banner-copy-align-right { text-align: right; }

.banner-heading {
  margin: 0;
  color: currentColor;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  /* --banner-heading-max is an admin-chosen ceiling (default 3.6rem) - it only
     raises how large the heading can get on wide screens, it never stops the
     vw-based term from scaling it down on narrow ones. */
  font-size: clamp(2rem, 4vw, var(--banner-heading-max, 3.6rem));
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.banner-subheading,
.banner-description {
  margin: 10px 0 0;
  color: currentColor;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 600;
}

.banner-description {
  font-weight: 400;
  opacity: 0.92;
}

.banner-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 20px;
  padding: 0 24px;
  color: #fff;
  background: var(--pine, #242424);
  border: 1px solid var(--pine, #242424);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.banner-button:hover,
.banner-button:focus-visible {
  color: var(--pine, #242424);
  background: var(--gold-light, #86c94f);
  border-color: var(--gold-light, #86c94f);
  transform: translateY(-2px);
}

/* A dedicated strip below the banner image (not an overlay on top of it) -
   sits in normal flow right after .banner-slides, so it reads as its own
   "slide bar" rather than competing with whatever photo is showing. */
.banner-dots {
  position: static;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  background: var(--pine, #0d3323);
}

.banner-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.banner-dot.is-active {
  width: 24px;
  background: var(--gold, #519f10);
  border-color: var(--gold, #519f10);
}

.banner-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.banner-arrow:hover,
.banner-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.6);
  border-color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.banner-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.banner-arrow-prev { left: 16px; }
.banner-arrow-next { right: 16px; }

@media (max-width: 560px) {
  .banner-arrow { width: 36px; height: 36px; }
  .banner-arrow svg { width: 18px; height: 18px; }
}

@keyframes banner-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes banner-slide-in {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes banner-zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.banner-slide.is-active .banner-anim-media-fade { animation: banner-fade-in 0.8s ease both; }
.banner-slide.is-active .banner-anim-media-slide { animation: banner-slide-in 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.banner-slide.is-active .banner-anim-media-zoom { animation: banner-zoom-in 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.banner-slide.is-active .banner-anim-text-fade { animation: banner-fade-in 0.6s ease both; animation-delay: 0.15s; }
.banner-slide.is-active .banner-anim-text-slide { animation: banner-slide-in 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: 0.15s; }
.banner-slide.is-active .banner-anim-text-zoom { animation: banner-zoom-in 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: 0.15s; }
.banner-slide.is-active .banner-anim-button-fade { animation: banner-fade-in 0.5s ease both; animation-delay: 0.35s; }
.banner-slide.is-active .banner-anim-button-slide { animation: banner-slide-in 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: 0.35s; }
.banner-slide.is-active .banner-anim-button-zoom { animation: banner-zoom-in 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: 0.35s; }

@media (max-width: 980px) {
  .banner-copy {
    max-width: min(78vw, 480px);
  }

  /* A much taller crop than desktop (was 111.1vw) cut off more than half of any
     wide banner photo regardless of focal point - most uploaded banners (device
     photos, social-style graphics) are landscape, so this keeps enough width
     visible for admin-uploaded images to still show their content on phones. */
  .banner-slot[data-banner-frame="fixed-tall"] .banner-slides {
    height: 70vw;
    height: 70cqw;
    max-height: none;
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  .banner-heading {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .banner-slot[data-banner-frame="fixed-tall"] .banner-slides {
    min-height: 260px;
  }

  .banner-dots {
    bottom: 12px;
    gap: 7px;
  }

  .banner-dot {
    width: 8px;
    height: 8px;
  }

  .banner-dot.is-active {
    width: 22px;
  }

  .banner-copy {
    max-width: min(86vw, 340px);
    padding: 18px;
  }

  .banner-button {
    min-height: 42px;
    margin-top: 14px;
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-slide,
  .banner-anim-media-fade, .banner-anim-media-slide, .banner-anim-media-zoom,
  .banner-anim-text-fade, .banner-anim-text-slide, .banner-anim-text-zoom,
  .banner-anim-button-fade, .banner-anim-button-slide, .banner-anim-button-zoom {
    animation: none;
    transition: none;
  }
}

/* Placement banners land between two sections that weren't designed with a
   banner gap between them, so they carry their own vertical rhythm - the
   same clamp() range used site-wide for section padding - rather than
   depending on whatever their new neighbours happen to have. Scoped to
   [data-banner-dynamic] (set only by script.js's dynamic-placement insertion)
   so the pre-existing hand-placed banner slots are untouched. */
.banner-slot[data-banner-dynamic] {
  margin-top: clamp(40px, 6vw, 72px);
  margin-bottom: clamp(40px, 6vw, 72px);
}

/* Product pages are the one exception to the vertical rhythm above: banners
   there (hand-placed or Custom Placement) should butt up directly against
   whatever's next to them, with zero gap - current banners and any future
   ones alike. This clears the NEXT section's own top margin whenever it
   follows any banner, and the rule below removes a dynamic placement's own
   top/bottom margin entirely in this context - together they cover a
   banner in either position, next to any section.
   display: flow-root matters here as much as margin-top: 0 - without it, a
   section with no top padding/border of its own (e.g. .details-dossier)
   still shows a gap, because its first child's top margin (e.g.
   .product-tabs picks up its own margin-top on narrower breakpoints)
   collapses straight through the section's top edge per normal CSS margin-
   collapsing rules. flow-root opens a new block formatting context so that
   can never happen.
   Deliberately an explicit list, NOT ".banner-slot + *" - .product-view is
   a display:grid two-column layout (gallery | buy box), and a wildcard
   selector here previously forced display:flow-root onto it whenever a
   banner landed immediately before it (anchor "hero", position "before"),
   silently collapsing that grid to a single column and making the product
   image render far larger than intended. Only list section classes here
   that are plain display:block with no layout mode of their own to lose;
   a brand-new anchor's section must be added to this list explicitly
   rather than assumed to be flow-root-safe. */
.details-page .banner-slot + .details-dossier,
.details-page .banner-slot + .product-reviews-section,
.details-page .banner-slot + .recommended-products-section {
  margin-top: 0;
  display: flow-root;
}

.details-page .banner-slot[data-banner-dynamic] {
  margin-top: 0;
  margin-bottom: 0;
}