/* Shared frontend and BuildWEB iframe responsive & auto-scale contract. */
:root {
  --tvd-rse-container: 75rem;
  --tvd-rse-gutter: clamp(0.75rem, 2vw, 2rem);
  --tvd-rse-space-1: clamp(0.25rem, 0.5vw, 0.5rem);
  --tvd-rse-space-2: clamp(0.5rem, 1vw, 1rem);
  --tvd-rse-space-3: clamp(0.75rem, 1.5vw, 1.5rem);
  --tvd-rse-space-4: clamp(1rem, 2vw, 2rem);
  --tvd-rse-gap: clamp(0.75rem, 2vw, 2rem);
  --tvd-rse-radius: clamp(0.25rem, 0.5vw, 0.75rem);
  --tvd-rse-font: clamp(0.875rem, 0.75rem + 0.35vw, 1rem);
  --tvd-scale-factor: clamp(0.45, calc(100vw / 1200), 1.25);
  --tvd-font-scale: clamp(0.65, calc(0.5 + 0.5 * (100vw / 1200)), 1.15);
}

/* Box sizing and media constraints */
.tvd-rse,
.tvd-grid,
.tvd-grid__item,
.tvd-grid__content,
.section,
.section-content,
.tvd-hero-panel,
.layzers-banner,
.banner-layer,
.text-box,
.slider-wrapper,
.slider,
[class*="tvdelm-"] {
  box-sizing: border-box;
  min-width: 0;
}

.tvd-rse img,
.tvd-rse svg,
.tvd-rse canvas,
.tvd-rse video,
.tvd-rse iframe,
.tvd-rse picture > img,
.tvd-grid img,
.tvd-grid svg,
.tvd-grid canvas,
.tvd-grid video,
.tvd-grid iframe,
[class*="tvdelm-"] img,
[class*="tvdelm-"] svg,
[class*="tvdelm-"] canvas,
[class*="tvdelm-"] video,
[class*="tvdelm-"] iframe {
  display: block;
  height: auto;
  max-width: 100%;
}

.banner-bg :is(img, picture, video),
.tvd-hero-panel__bg img,
.tvd-media-cover img,
.banner-inner img.fill {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.tvd-rse iframe,
.tvd-rse video {
  aspect-ratio: var(--tvd-rse-media-ratio, 16 / 9);
  width: 100%;
}

.tvd-rse [style*="position: absolute"],
.tvd-rse [style*="position:absolute"],
.tvd-hero-panel .banner-layer,
.layzers-banner .banner-layer {
  max-width: 100%;
  box-sizing: border-box;
}

.tvd-grid {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tvd-grid__content {
  max-width: 100%;
}

/* Flex and Grid auto-scaling */
.tvd-rse-flex,
.tvd-rse [data-rse-flex] {
  align-items: var(--tvd-rse-align, stretch);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tvd-rse-gap);
  justify-content: var(--tvd-rse-justify, flex-start);
  min-width: 0;
}

.tvd-rse-grid,
.tvd-rse [data-rse-grid] {
  display: grid;
  gap: var(--tvd-rse-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tvd-rse-column-min, 16rem)), 1fr));
  min-width: 0;
}

.tvd-rse [data-rse-container] {
  container-type: inline-size;
  max-width: 100%;
}

.tvd-rse [data-rse-absolute] {
  inset-inline-start: var(--tvd-rse-x, auto);
  inset-block-start: var(--tvd-rse-y, auto);
  position: absolute;
}

.tvd-rse-text {
  font-size: var(--tvd-rse-font);
  line-height: var(--tvd-rse-line-height, 1.5);
}

/* Fluid Banner & Slider Scaling */
.tvd-hero-panel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.tvd-hero-panel .layzers-banner {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.tvd-hero-panel .banner-layer {
  max-width: calc(100% - 1rem);
}

.tvd-hero-panel .text-box {
  max-width: 100%;
  box-sizing: border-box;
}

.tvd-hero-panel .text-box:not(.text-box-circle):not(.text-box-square) .text-inner {
  padding: clamp(0.5rem, 2.5vw, 2rem);
  box-sizing: border-box;
}

/* Shape text boxes already use their own aspect-ratio and centering rules.
 * Adding the generic responsive padding here can make the inner text taller
 * than its parent (for example, a sale badge near the banner edge). */
.tvd-hero-panel :is(.text-box-circle, .text-box-square) .text-box-content {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.tvd-hero-panel :is(.text-box-circle, .text-box-square) .text-inner,
.tvd-hero-panel :is(.text-box-circle, .text-box-square) .text-inner > * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Slider Controls Auto-Scaling */
.slider-wrapper .flickity-prev-next-button,
.slider-wrapper .flickity-button {
  width: clamp(28px, 4.5vw, 44px) !important;
  height: clamp(28px, 4.5vw, 44px) !important;
  opacity: 0.85;
}

.slider-wrapper .flickity-page-dots {
  bottom: clamp(6px, 1.5vw, 15px);
}

.slider-wrapper .flickity-page-dots .dot {
  width: clamp(6px, 1vw, 10px);
  height: clamp(6px, 1vw, 10px);
  margin: 0 clamp(2px, 0.4vw, 4px);
}

/* Fluid Typography Auto-Scaling */
.tvd-hero-panel h1,
.res-text h1,
.banner-layer h1 {
  font-size: clamp(1.6rem, 5.5vw, 4.5rem);
  line-height: clamp(1.1, 1.05 + 0.2vw, 1.25);
  letter-spacing: clamp(-0.02em, -0.01em + 0.01vw, 0.05em);
  overflow-wrap: break-word;
  word-break: break-word;
}

.tvd-hero-panel h2,
.res-text h2,
.banner-layer h2 {
  font-size: clamp(1.35rem, 4vw, 3rem);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.tvd-hero-panel h3,
.res-text h3,
.banner-layer h3 {
  font-size: clamp(1.15rem, 3vw, 2.25rem);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.tvd-hero-panel p,
.res-text p,
.banner-layer p {
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Auto-scale inline high font sizes */
.res-text [style*="font-size: 2"],
.res-text [style*="font-size: 3"],
.res-text [style*="font-size: 4"],
.res-text [style*="font-size: 5"],
.tvd-hero-panel [style*="font-size: 2"],
.tvd-hero-panel [style*="font-size: 3"],
.tvd-hero-panel [style*="font-size: 4"],
.tvd-hero-panel [style*="font-size: 5"] {
  font-size: clamp(1.35rem, 5.5vw, 4.5rem) !important;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.res-text [style*="font-size: 1"],
.tvd-hero-panel [style*="font-size: 1"] {
  font-size: clamp(1.05rem, 2.8vw, 2.25rem) !important;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Button Auto-Scaling inside banners and text boxes */
.tvd-hero-panel .button,
.res-text .button,
.text-box .button,
.banner-layer .button {
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.95rem) !important;
  padding: clamp(0.4rem, 0.8vw, 0.75rem) clamp(0.75rem, 1.5vw, 1.5rem) !important;
  margin: clamp(3px, 0.4vw, 6px) clamp(3px, 0.5vw, 8px) !important;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Countdown Timer Auto-Scaling */
.tvdelm-timer {
  font-size: clamp(1.2rem, 3.5vw, 3rem) !important;
  max-width: 100%;
  margin: clamp(0.2rem, 0.5vw, 0.5rem) auto;
}

.tvdelm-timer span {
  padding: clamp(0.25rem, 0.5vw, 0.5rem) clamp(0.1rem, 0.3vw, 0.25rem) !important;
  border-radius: clamp(3px, 0.5vw, 6px);
}

.tvdelm-timer-text {
  font-size: clamp(0.85rem, 2vw, 1.25rem) !important;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 8px);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Circle Badges & Sale Tags Auto-Scaling */
.badge-circle,
.sale-flash,
.is-circle,
.banner-layer[class*="circle"],
.badge[style*="border-radius: 99"],
.badge[style*="border-radius: 50%"] {
  max-width: clamp(65px, 14vw, 130px);
  max-height: clamp(65px, 14vw, 130px);
  font-size: clamp(0.7rem, 1.4vw, 1.15rem) !important;
  padding: clamp(4px, 1vw, 12px) !important;
  box-sizing: border-box;
  text-align: center;
}

/* Hotspots Auto-Scaling */
.tvdelm_hotspot {
  transform: scale(var(--tvd-font-scale, 1));
  transform-origin: center center;
}

.tvdelm_hotspot .hotspot-tooltip {
  max-width: min(280px, 80vw);
  box-sizing: border-box;
}

/* Cards & Feature Boxes */
.featured-box,
.box,
.box-text,
.tvdelm-box {
  box-sizing: border-box;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 849px) {
  .tvd-rse-stack-tablet,
  .tvd-rse-stack-tablet > .tvd-grid__item {
    grid-column: span 12 !important;
    width: 100%;
  }

  .tvd-hero-panel {
    padding-top: clamp(20rem, 55vw, 36rem) !important;
  }

  .tvd-hero-panel .text-box {
    width: min(100%, max(var(--tvd-width, 70%), 85%)) !important;
  }

  .tvd-hero-panel .button,
  .res-text .button {
    min-height: 2.5rem;
  }
}

@media (max-width: 549px) {
  .tvd-rse-stack-mobile > .tvd-grid__item {
    grid-column: span 12 !important;
    width: 100%;
  }

  .tvd-rse {
    --tvd-rse-gap: var(--tvd-rse-space-2);
  }

  .tvd-rse :is(h1, h2, h3, h4, h5, h6) {
    overflow-wrap: anywhere;
  }

  .tvd-rse h1,
  .tvd-hero-panel h1 {
    font-size: clamp(1.4rem, 7.5vw, 2.5rem) !important;
  }

  .tvd-rse h2,
  .tvd-hero-panel h2 {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
  }

  .tvd-rse h3,
  .tvd-hero-panel h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }

  .tvd-hero-panel {
    overflow: hidden;
    padding-top: clamp(20rem, 110vw, 30rem) !important;
    min-height: 280px;
  }

  .tvd-hero-panel .layzers-banner {
    overflow: hidden !important;
  }

  .tvd-hero-panel .text-box {
    width: 94% !important;
    max-width: calc(100% - 1rem) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .tvd-hero-panel .res-text {
    box-sizing: border-box;
    max-width: 100% !important;
  }

  .tvd-hero-panel .text-inner {
    padding: clamp(0.4rem, 2vw, 0.8rem) !important;
  }

  .tvd-hero-panel .res-text h1 span[style*="font-size"] {
    font-size: clamp(2rem, 15vw, 3.5rem) !important;
  }

  .tvd-hero-panel .res-text :is(h1, h2, h3, p) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tvd-hero-panel .res-text .button {
    margin-inline: 0.2rem;
    padding-inline: 0.75rem;
    font-size: 0.8rem !important;
  }

  .tvd-rse :is(.button, button, input[type="submit"], input[type="button"]) {
    max-width: 100%;
    min-height: 2.75rem;
  }

  .tvd-rse :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box;
    font-size: max(1rem, 16px);
    max-width: 100%;
    width: 100%;
  }

  .tvd-rse-flex {
    gap: var(--tvd-rse-space-2);
  }

  .tvd-rse-flex > .button,
  .tvd-rse-flex > button {
    flex: 1 1 12rem;
  }

  .tvd-rse :is(figure, .wp-caption) {
    margin-inline: auto;
    max-width: 100%;
  }

  .tvd-rse table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tvd-rse :is(pre, code) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tvd-rse pre {
    overflow: auto;
  }

  .tvd-rse .gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  }

  .tvd-rse :is([role="tab"], .tab > a, .accordion-title) {
    min-height: 2.75rem;
  }

  .tvd-rse :is([role="tablist"], .tabs-nav) {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tvd-rse [role="tablist"] > * {
    flex: 0 0 auto;
  }

  .tvd-rse [data-rse-absolute] {
    max-width: calc(100% - var(--tvd-rse-space-2) * 2);
  }
}

@media (max-width: 374px) {
  .tvd-rse {
    --tvd-rse-gap: var(--tvd-rse-space-1);
  }

  .tvd-rse-flex {
    align-items: stretch;
    flex-direction: column;
  }

  .tvd-rse-flex > .button,
  .tvd-rse-flex > button {
    width: 100%;
  }

  .tvd-rse :is(h1, h2) {
    letter-spacing: normal;
  }

  .tvd-rse [data-rse-grid] {
    --tvd-rse-column-min: 100%;
  }
}