/* MainBanner component styles extracted from nuzzle-affiliate-funnel.webflow.css and style.css */

.navbar-countdown {
  z-index: 999;
  color: #010101;
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 75px;
  min-height: 50px;
  max-height: 75px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  /* Vertical offset must stay within 0%-100%. background-size: cover makes
     banner-web-r18.svg (viewBox 1920x100) ~93px tall inside a 63px bar, so a
     negative percentage resolves to a POSITIVE downward offset — -18% pushed
     the artwork down ~5px and left a strip of bare background-color (var(--lv-espresso-deep, var(--lv-espresso-deep, #1f0000)))
     across the top of the header. 0% pins it flush to the top edge. */
  background-position: 0px 0, 20% 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(#0000, #0000),
    url("../../images/banner-web-r18.svg");
}

.navbar-countdown.gradient-holiday {
  background-color: #fdc545;
  display: flex;
  position: relative;
  overflow: hidden;
}

.navbar-countdown.gradient-holiday.diff-color {
  background-color: var(--lv-espresso-deep, var(--lv-espresso-deep, #1f0000));
}

.div-block-874 {
  grid-column-gap: 0.5rem;
  align-items: center;
  display: flex;
  position: relative;
}

.holiday-clock {
  justify-content: center;
  align-items: center;
  display: flex;
}

.holiday-clock.v1 {
  padding: 3px;
  background: var(--lv-espresso-deep, var(--lv-espresso-deep, #710000));
  border-radius: 5px;
}

.box-2 {
  background-color: var(--lv-espresso-deep, var(--lv-espresso-deep, #710000));
  color: #fff;
  border-radius: 2px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  margin-left: 2px;
  margin-right: 2px;
  padding: 3px;
  font-size: 12px;
  line-height: 20px;
  display: flex;
}

.box-2.hide {
  display: none;
}

.clock-number-2 {
  font-family: Proxima Nova, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.clock-label-2 {
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: Proxima Nova, Arial, sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1;
}

.text-block-210 {
  color: #fff;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  font-weight: 800;
}

.text-block-210.hide {
  display: none;
}

.banner-text-main {
  text-shadow: 0 1px 1px #0000005c;
  font-family: Proxima Nova, Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 27px;
}

.banner-text-sub {
  text-shadow: 0 1px 1px #0000005c;
  font-weight: 600;
}

/* Tablet (max-width: 991px) */
@media screen and (max-width: 991px) {
  .navbar-countdown {
    font-size: 0.8rem;
  }
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 770px) {
  .navbar-countdown {
    font-size: 0.7rem;
    height: 50px;
    background-image: linear-gradient(#0000, #0000),
      url("../../images/banner-mobile-r5.svg");
    background-repeat: repeat;
    background-position: 0px 0, 0px 50%;
  }

  .navbar-countdown.gradient-holiday {
    inset: 0% 0% auto;
    overflow: hidden;
  }

  .div-block-874 {
    grid-column-gap: 0.5rem;
  }

  .holiday-clock {
    z-index: 1;
    flex-wrap: nowrap;
    position: relative;
  }

  .box-2 {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 2rem;
    min-height: 2rem;
    padding-left: 2px;
    padding-right: 2px;
  }

  .clock-label-2 {
    font-size: 0.5rem;
  }

  .banner-text-main {
    font-size: 4vw;
    line-height: 1.1;
  }

  .banner-text-sub {
    font-size: 3.5vw;
  }
}

/* Small mobile (max-width: 479px) */
@media screen and (max-width: 479px) {
  .navbar-countdown {
    font-size: 0.75rem;
  }
}

/* ─── From style.css ─────────────────────────────────────────────────────── */

.mr-5 {
  margin-right: 5px;
}

.mb-6 {
  margin-bottom: 6px;
}

.main-banner {
  /* Trimmed from 6.5rem to buy column 1 the width the ribbon needs — see the
     .banner-web-left note. Both assets carry their own transparent side margin
     (~69px on the offer asset, ~21px on the ribbon at desktop sizes), so the
     visual separation stays well above this number. Overridden to 2.5rem at
     <= 770px, so mobile is unaffected. */
  grid-column-gap: 1.5rem;
  grid-row-gap: 0.5rem;
  justify-content: center;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  color: #fff;
  align-items: center;
  height: 100%;
}

/* Desktop: 3-column grid with equal side columns (1fr auto 1fr) so the offer
   asset always lands at true page center — matching the page-centered nuzzle
   logo below — while keeping the clock and flags compact beside it. This is
   width-independent (no viewport-% padding to drift). Mobile rules untouched. */
@media screen and (min-width: 768px) {
  .main-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 100%; /* definite row so img height:60% resolves (keeps native size) */
    align-items: center;
  }

  .main-banner > .banner-web-left-desktop {
    grid-column: 1;
    justify-self: end; /* hug the centered asset at the column-gap distance */
  }

  .main-banner > .banner-text-desktop {
    grid-column: 2;
  }

  .main-banner > .div-block-874 {
    grid-column: 3;
    justify-self: start; /* hug the centered asset at the column-gap distance */
  }
}

.banner-text-content img {
  height: 60px;
  width: 100%;
}

/* Desktop offer asset — MainBanner only (.banner-offer-desktop is not on the
   secondary banner, so that one keeps its current sizing).

   banner-asset-r18.svg is drawn inside a much larger canvas: the artwork only
   fills ~29% of the viewBox height (y 33-60 of 93.6) and ~73% of its width, so
   the shared 45px box above rendered just ~13px of visible text. Sizing past
   the bar height is what makes the text large; the surplus is transparent
   padding and .gradient-holiday's overflow: hidden clips it. The artwork sits
   centred in the viewBox, so the clip takes equal empty space off top and
   bottom and nothing visible is lost. Rendered text height ≈ height x 0.29,
   rendered width ≈ height x 2. Steps mirror the .banner-web-left breakpoints
   and are capped so the countdown clock never gets squeezed. */


.banner-text-content-desktop {
  position: relative;
}

.banner-text-main.v1 {
  line-height: 15px;
  text-align: center;
}

.banner-text-sub.v1 {
  text-align: center;
  font-size: 12px;
}

/* "Anniversary Sale" ribbon, sized as large as each viewport allows.
   banner-web-left-r16.svg wastes most of its canvas: the solid text occupies
   only y 32.0-79.8 of the 133.68 viewBox (~36% of the height, ~81% of the
   width), and below it sits a soft shadow that fades out around y 104. So the
   rendered text is roughly a third of the height set here, and the surplus is
   clipped by .gradient-holiday's overflow: hidden.

   The text is not centred in its own canvas — its midpoint sits 8.2% of the box
   height above the canvas midpoint (the shadow below is what pads it out), so
   simply centring the image leaves the text visibly high in the bar. The
   translateY below puts it back on the bar's centre line; being a percentage it
   is relative to the image's own height, so it holds at every step without
   per-breakpoint values, and being a transform it does not affect layout.

   The ribbon is right-aligned in column 1, so growing it extends it leftwards
   over the page padding — the offer asset stays centred and the clock stays
   put, so the real limit is the bar's left edge. Each step is capped at the
   narrow end of its band, where column 1 is tightest, keeping the text at least
   ~18px clear of that edge. The <= 767px steps further down are untouched. */
.banner-web-left {
  height: 120%;
  transform: translateY(-8.8%);
}

@media screen and (max-width: 1400px) {
  .banner-web-left {
    height: 125%;
  }
}

@media screen and (max-width: 1200px) {
  .banner-web-left {
    height: 108%;
  }
}

@media screen and (max-width: 770px) {
  .main-banner {
    grid-column-gap: 2.5rem;
  }
}

@media screen and (max-width: 1050px) {
  .banner-web-left {
    height: 112%;
  }
}

@media screen and (max-width: 850px) {
  .banner-web-left {
    height: 95%;
  }
}

.banner-web-left-mobile {
  display: none;
}

@media (max-width: 479px) {
  .banner-web-left-desktop {
    display: none;
  }
  .banner-web-left-mobile {
    display: block;
    height: 80%;
    margin-left: 5px;
  }
}

.banner-text-desktop {
  display: flex;
}

.banner-text-mobile {
  display: none;
  /* align-self: flex-end; */
}

@media screen and (max-width: 767px) {
  .banner-web-left {
    height: 30%;
  }
  .banner-text-mobile {
    display: flex;
  }

  .banner-text-desktop {
    display: none;
  }

  .mb-3-mobile {
    margin-bottom: 3px;
  }
}

@media screen and (max-width: 479px) {
  .main-banner {
    gap: 0px;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: space-between;
  }

  .banner-text-main.v1 {
    font-size: 18px;
  }

  .banner-text-sub.v1 {
    font-size: 11px;
    text-align: center;
  }

  .banner-text-main.v1.lang {
    font-size: 16px;
    line-height: 12px;
  }

  .banner-text-sub.v1.lang {
    font-size: 10px;
    text-align: center;
  }

  .div-block-874 {
    flex-shrink: 0;
    left: 5%;
    margin-right: 10px;
  }

  .holiday-clock {
    transform: scale(0.9);
  }

  .holiday-clock.v1 {
    padding: 2px;
    /* gap: 4px; */
  }

  .clock-number-2 {
    font-size: 0.85rem;
  }

  .clock-label-2 {
    font-size: 0.45rem;
  }

  .banner-web-left {
    height: 30px;
    margin-left: 2px;
  }

  /* .banner-text-mobile {
    margin-bottom: 1px;
    position: absolute;
    bottom: 5px;
    left: 30%;
    transform: translateX(0%);
  } */

  .banner-text-mobile {
    margin-bottom: 1px;
    position: absolute;
    right: 5px;
    top: 6px;
    transform: translateX(0%);
  }

  .banner-text-mobile img {
    max-width: 100%;
    width: auto;
    height: 36px;
    margin: 0;
    object-fit: contain;
  }

  .banner-text-mobile.third img {
    height: 48px;
  }
}

@media screen and (max-width: 415px) {
  /* .main-banner {
    gap: 25px;
  } */

  .banner-text-main.v1.lang {
    font-size: 15px;
  }
}

@media screen and (max-width: 395px) {
  .main-banner {
    /* gap: 15px; */
    padding-left: 0;
  }

  .main-banner.lang {
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .banner-text-main.v1.lang {
    font-size: 14px;
    line-height: 7px;
  }

  .banner-text-sub.v1.lang {
    font-size: 8px;
  }

  .reserve_text {
    font-size: 12px;
  }

  .frm_hdr_content p {
    font-size: 13px;
  }

  .banner-text-mobile img {
    height: 30px;
  }

  .banner-text-mobile {
    bottom: 8px;
    transform: translateX(4%);
  }

}

@media screen and (max-width: 385px) {
  .banner-text-main.v1 {
    font-size: 17px;
  }

  .banner-text-main.v1.lang {
    font-size: 13px;
    line-height: 6px;
  }

  .reserve_text {
    font-size: 11px;
  }

  .frm_hdr_content p {
    font-size: 12px;
  }
}

@media screen and (max-width: 375px) {
  /* .main-banner {
    gap: 10px;
  } */

  .main-banner.lang {
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .banner-text-main.v1 {
    font-size: 16px;
  }

}

@media screen and (max-width: 365px) {
  /* .main-banner {
    gap: 0px;
    padding-left: 0;
  } */

  .main-banner.lang {
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .banner-text-main.v1 {
    font-size: 14px;
    line-height: 12px;
  }

  .banner-text-sub.v1 {
    font-size: 11px;
  }

  .banner-text-main.v1.lang {
    font-size: 13px;
    line-height: 6px;
  }

  .banner-text-sub.v1.lang {
    font-size: 8px;
  }

  .reserve_text {
    font-size: 10px;
  }

  .frm_hdr_content p {
    font-size: 11px;
  }

  .navbar-countdown {
    min-height: 36px !important;
    height: 36px !important;
  }

  .banner-web-left {
    height: 25px;
  }

  .banner-text-mobile {
    bottom: 6px;
    transform: translateX(7%);
  }

  .holiday-clock {
    transform: scale(0.8);
  }

  .div-block-874 {
    /* margin-left: auto;
    position: absolute;
    right: -9px; */
  }

  .banner-web-left-mobile{
    height: 45px !important;
  }

  .banner-text-mobile img{
    height: 35px !important;
  }

  .navbar-countdown{
    /* see the <=479px note in nuzzle-affiliate-funnel.webflow.css */
    background-position: 0px 0, 0px 24% !important
  }
}

@media screen and (max-width: 355px) {
  /* .main-banner {
    gap: 15px;
  } */

  .banner-text-main.v1 {
    font-size: 13px;
    line-height: 8px;
  }

  .banner-text-sub.v1 {
    font-size: 10px;
  }

  .banner-text-main.v1.lang {
    font-size: 17px;
    line-height: 12px;
  }

  .banner-text-sub.v1.lang {
    font-size: 7px;
  }

  .reserve_text {
    font-size: 9px;
  }

  .frm_hdr_content p {
    font-size: 11px;
  }
}

@media screen and (max-width: 345px) {
  .banner-text-main.v1 {
    font-size: 15px;
    line-height: 9px;
  }

  .banner-text-sub.v1 {
    font-size: 9px;
  }
}

@media screen and (max-width: 325px) {
  .main-banner {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .main-banner.lang {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .banner-text-main.v1 {
    font-size: 10px;
    line-height: 4px;
  }

  .banner-text-sub.v1 {
    font-size: 8px;
  }

  .banner-text-main.v1.lang {
    font-size: 11px;
    line-height: 2px;
  }

  .banner-text-sub.v1.lang {
    font-size: 7px;
  }

  .reserve_text {
    font-size: 7px;
  }

  .frm_hdr_content p {
    font-size: 9px;
  }

  .seals_img2 {
    width: 60px;
  }

  .banner-web-left {
    height: 25px;
  }

  .holiday-clock {
    transform: scale(0.7);
  }

  .div-block-874{
    margin-right: 5px !important;
  }

  .navbar-countdown{
    /* see the <=479px note in nuzzle-affiliate-funnel.webflow.css */
    background-position: 0px 0, 0px 24% !important
  }
}

/* --- Mobile banner (<= 479px) ---------------------------------------------
   Placed last so it lands after the older mobile steps above. Three separate
   faults were stacking up here:

   1. .banner-text-mobile was position: absolute at right: 5px, which parked the
      offer asset directly on top of the countdown clock — the clock painted
      over it, so "UP TO 60% OFF" was mostly invisible. It goes back into the
      flex row, making it ribbon | offer | clock with space-between handling the
      spacing, so the two can no longer collide.
   2. .div-block-874 carried left: 5%, shifting the clock 17-23px past the bar's
      right edge where overflow: hidden cut the "SEC" box in half.
   3. Both r14 assets are mostly empty canvas, so the old heights rendered them
      at roughly half size: the ribbon's two lines of text occupy y 32.3-71.2 of
      its 129.6 viewBox (30% of the height) and the offer asset y 31.0-94.2 of
      121.2 (52%).

   Heights are driven off the width left over once the clock's fixed ~137px and
   the page padding are taken out, split ~40/60 between the two assets — that
   keeps them as large as will fit and scales smoothly instead of jumping at
   each breakpoint. Rendered text is height x 0.30 (ribbon) and x 0.52 (offer).
   Each translateY re-centres the ink, which is not centred in either canvas:
   the ribbon's sits 10.07% high, the offer's 1.64% low. */
@media screen and (max-width: 479px) {
  .banner-text-mobile {
    position: static;
    margin-bottom: 0;
    transform: none;
  }

  .div-block-874 {
    left: 0;
  }

  .banner-web-left-mobile {
    height: 52px;
    width: auto;
    flex-shrink: 0;
    transform: translateY(-10.93%);
  }

  /* Takes the space left between the ribbon and the clock and centres the offer
     asset in it, so it lands on the bar's midline instead of being pushed
     around by whatever the other two happen to measure. */
  .banner-text-mobile {
    flex: 1;
    justify-content: center;
    align-items: center;
  }

  .banner-text-mobile img {
    height: 42px;
    width: auto;
    max-width: none;
    transform: translateY(2.36%);
  }
}

/* The clock is shrunk with transform: scale(), which changes how it looks but
   not how much room it reserves — it was holding ~14px of empty layout (more at
   the smaller steps), which pushed the offer asset off the bar's midline and
   ate width the assets could have used. These margins hand that slack back:
   half of the unscaled 137px width times (1 - scale), on each side. */
@media screen and (max-width: 479px) {
  .holiday-clock {
    margin-left: -7px;
    margin-right: -7px;
  }
}

@media screen and (max-width: 365px) {
  .holiday-clock {
    margin-left: -13.7px;
    margin-right: -13.7px;
  }
}

@media screen and (max-width: 325px) {
  .holiday-clock {
    margin-left: -20.6px;
    margin-right: -20.6px;
  }
}