@import url('bluetooth-earphones/true-wireless-earbuds.css');
.final-inquiry__overlay { background:rgba(22,56,46,.88); }
.risk-reduction .split-layout p:not(.eyebrow), .six-grid--light article p, .comparison-section .image-heading > div > p:last-child { color:#dbe9e2; }
.earbud-card:hover { box-shadow:0 25px 60px rgba(31,74,61,.16); }
.product-gallery__thumbs button:hover,.product-gallery__thumbs button:focus-visible { border-color:#82af9d; }
.use-case-grid article::before { color:var(--color-primary); background:#dcebe4; }
.final-inquiry__form .form-status { min-height:20px; margin:0; color:var(--color-primary); font-size:.85rem; font-weight:800; }

/* Magnetic tieback product photography fills its dedicated panels. */
.magnetic-tieback-page .explain-section .split-layout > img, .magnetic-tieback-page .comparison-section .image-heading > img { padding:0; object-fit:cover; background:transparent; }


/* Custom tieback comparison is photography, so it fills the overview image frame. */
.custom-tieback-page .comparison-section .image-heading > img { padding:0; object-fit:cover; background:transparent; object-position:center; }


/* Curtain tassel tieback overview and definition use full-bleed photography. */
.curtain-tassel-tieback-page .explain-section .split-layout > img, .curtain-tassel-tieback-page .comparison-section .image-heading > img { padding:0; object-fit:cover; background:transparent; object-position:center; }


/* Custom tieback definition uses full-bleed photography. */
.custom-tieback-page .explain-section .split-layout > img { padding:0; object-fit:cover; background:transparent; object-position:center; }


/* Rope tieback comparison uses full-bleed product photography. */
.rope-tieback-page .comparison-section .image-heading > img { padding:0; object-fit:cover; background:transparent; object-position:center; }


/* Rope tieback definition uses a dedicated full-bleed application photograph. */
.rope-tieback-page .explain-section .split-layout > img { padding:0; object-fit:cover; background:transparent; object-position:center; }


/* Fill the procurement and OEM image columns regardless of source aspect ratio. */
.curtain-tassel-tieback-page .risk-reduction .split-layout > img, .curtain-tassel-tieback-page .oem-section .split-layout > img { width:100%; object-fit:cover; object-position:center; }


/* Curtain tassel detail panels use full-bleed image frames sized by their sections. */
.curtain-tassel-tieback-page .risk-reduction .split-layout > img,
.curtain-tassel-tieback-page .oem-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  object-fit: cover;
  object-position: center;
}

.curtain-tassel-tieback-page .oem-section .split-layout > img {
  height: 100%;
  min-height: 570px;
}

.curtain-tassel-tieback-page .use-cases .image-heading,
.curtain-tassel-tieback-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.curtain-tassel-tieback-page .use-cases .image-heading > img,
.curtain-tassel-tieback-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 280px;
  padding: 0;
  align-self: stretch;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .curtain-tassel-tieback-page .oem-section .split-layout > img { height: 340px; min-height: 0; }
  .curtain-tassel-tieback-page .use-cases .image-heading > img,
  .curtain-tassel-tieback-page .comparison-section .image-heading > img { height: 300px; min-height: 0; }
}

.curtain-tassel-tieback-page .risk-reduction .split-layout > img { height: 360px; }

@media (max-width: 760px) {
  .curtain-tassel-tieback-page .risk-reduction .split-layout > img { height: 300px; }
}

/* Give the five photography panels decisive, full-width frames on large screens. */
@media (min-width: 761px) {
  .curtain-tassel-tieback-page .risk-reduction .split-layout {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }

  .curtain-tassel-tieback-page .risk-reduction .split-layout > img {
    height: 390px;
  }

  .curtain-tassel-tieback-page .use-cases .image-heading,
  .curtain-tassel-tieback-page .comparison-section .image-heading {
    grid-template-columns: minmax(420px, .55fr) minmax(0, 1fr);
  }

  .curtain-tassel-tieback-page .use-cases .image-heading > img,
  .curtain-tassel-tieback-page .comparison-section .image-heading > img {
    min-height: 330px;
  }

  .curtain-tassel-tieback-page .process-intro {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  }

  .curtain-tassel-tieback-page .process-intro > img {
    display: block;
    width: 100%;
    max-width: none;
    height: 330px;
    padding: 0;
    object-fit: cover;
    object-position: center;
  }
}

/* Custom tassel photography keeps the complete tassel range inside its frames. */
.custom-tassel-page .detail-split .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.custom-tassel-page .comparison-section .image-heading {
  grid-template-columns: minmax(420px, .55fr) minmax(0, 1fr);
}

.custom-tassel-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .custom-tassel-page .comparison-section .image-heading { grid-template-columns: 1fr; }
}

/* The custom tassel definition is photography, so it fills the full image panel. */
.custom-tassel-page .explain-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

/* Preserve every tassel in the definition image by matching the source aspect ratio. */
.custom-tassel-page .explain-section .split-layout > img {
  height: auto;
  aspect-ratio: 4 / 3;
  align-self: center;
  object-fit: cover;
}

/* Bookmark tassel panels use full-bleed product photography without the shared contain padding. */
.bookmark-tassel-page .explain-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 570px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.bookmark-tassel-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.bookmark-tassel-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .bookmark-tassel-page .explain-section .split-layout > img { height: 340px; }
  .bookmark-tassel-page .comparison-section .image-heading { grid-template-columns: 1fr; }
  .bookmark-tassel-page .comparison-section .image-heading > img { height: 260px; }
}

/* Decorative tassel definition and comparison photography fills each image panel. */
.decorative-tassel-page .explain-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 570px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.decorative-tassel-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.decorative-tassel-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .decorative-tassel-page .explain-section .split-layout > img { height: 340px; }
  .decorative-tassel-page .comparison-section .image-heading { grid-template-columns: 1fr; }
  .decorative-tassel-page .comparison-section .image-heading > img { height: 260px; }
}

/* Beaded tassel definition and comparison imagery fills the complete image panels. */
.beaded-tassel-page .explain-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 570px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.beaded-tassel-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.beaded-tassel-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .beaded-tassel-page .explain-section .split-layout > img { height: 340px; }
  .beaded-tassel-page .comparison-section .image-heading { grid-template-columns: 1fr; }
  .beaded-tassel-page .comparison-section .image-heading > img { height: 260px; }
}

/* Key tassel comparison photography fills the overview panel at every breakpoint. */
.key-tassel-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.key-tassel-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .key-tassel-page .comparison-section .image-heading { grid-template-columns: 1fr; }
  .key-tassel-page .comparison-section .image-heading > img { height: 260px; }
}

/* Magnetic tieback specification and inspection photographs use their full image frames. */
.magnetic-tieback-page .detail-split .split-layout > img,
.magnetic-tieback-page .quality-section .split-layout > img,
.magnetic-tieback-page .oem-section .split-layout > img,
.magnetic-tieback-page .chooser .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 460px;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .magnetic-tieback-page .detail-split .split-layout > img,
  .magnetic-tieback-page .quality-section .split-layout > img,
.magnetic-tieback-page .oem-section .split-layout > img,
.magnetic-tieback-page .chooser .split-layout > img { height: 340px; }
}

/* Use matching image ratios at each breakpoint so complete magnetic tieback layouts remain visible. */
.magnetic-tieback-page .oem-section .split-layout > .magnetic-responsive-art,
.magnetic-tieback-page .quality-section .split-layout > .magnetic-responsive-art,
.magnetic-tieback-page .chooser .split-layout > .magnetic-responsive-art {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.magnetic-tieback-page .magnetic-responsive-art > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 0;
  object-fit: contain;
}

.magnetic-tieback-page .oem-section .split-layout > .magnetic-responsive-art,
.magnetic-tieback-page .quality-section .split-layout > .magnetic-responsive-art,
.magnetic-tieback-page .chooser .split-layout > .magnetic-responsive-art {
  aspect-ratio: 6 / 5;
}

.magnetic-tieback-page .magnetic-responsive-art > img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1020px) {
  .magnetic-tieback-page .oem-section .split-layout > .magnetic-responsive-art,
  .magnetic-tieback-page .quality-section .split-layout > .magnetic-responsive-art,
  .magnetic-tieback-page .chooser .split-layout > .magnetic-responsive-art {
    aspect-ratio: 4 / 5;
  }
}

/* Beaded tieback photography uses matched 6:5 framing so the complete products stay visible. */
.beaded-tieback-page .detail-split .split-layout > img,
.beaded-tieback-page .risk-reduction .split-layout > img,
.beaded-tieback-page .oem-section .split-layout > img,
.beaded-tieback-page .quality-section .split-layout > img,
.beaded-tieback-page .explain-section .split-layout > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 6 / 5;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

/* The overview is a wide comparison board: remove the contained inset and use the full panel. */
.beaded-tieback-page .comparison-section .image-heading {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}

.beaded-tieback-page .comparison-section .image-heading > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 280px;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

@media (max-width: 760px) {
  .beaded-tieback-page .comparison-section .image-heading { grid-template-columns: 1fr; }
  .beaded-tieback-page .comparison-section .image-heading > img { height: 260px; }
}