/* ── Custom Orders: hueylightshop.com's "Trade Program" image banner
   (#shopify-section-template--21595386871962__image_banner_QB3q9m, Dawn's
   .banner--large.banner--desktop-transparent), cloned from their section CSS,
   inline section styles and custom.css (refs/huey/home.html, custom.css,
   refs/huey/dl/css/section-image-banner.css) and box-checked at 1905, 1024 and 390.
     height   1440:678 from 750 up; under 750 the words set it, at least 70vh
     picture  full bleed, cover, at 0% 48.472%; their overlay is at 0, so none
     words    top left, 50 px 38 px in (15 px on phones), at most 680 px wide:
              the flourish label, a 25 px paragraph (23 px to 990) 40 px in and
              80% wide with an italic phrase, and their bracket button 32 px in
     motion   Dawn's scroll-trigger: the banner and picture fade in, the words
              slide up 20 px, .6s cubic-bezier(0, 0, .3, 1); none for reduced
              motion (js/tb.js adds .is-offscreen like their animations.js)
   Their cream rgb(255 248 230) -> our cream #f7f3ee, the button at .75 as
   theirs; words ours. Picture: Sama's birthday magazine, a stand-in. */
.tb { position: relative; }
.tb-banner { position: relative; z-index: auto; isolation: isolate; display: flex; flex-flow: row wrap; }
@media (min-width: 750px) { .tb-banner { flex-wrap: nowrap; aspect-ratio: 1440 / 678; } }

.tb-media { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; margin: 0; }
.tb-media img {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 0% 48.472%;
}

.tb-content {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 70vh; padding: 15px;
}
@media (min-width: 750px) {
  .tb-content { min-height: 0; padding: 50px 38px; align-items: flex-start; justify-content: flex-start; }
}

.tb-box {
  position: relative; z-index: 1; width: 100%; height: 100%; padding: 0; text-align: left;
  overflow-wrap: break-word; color: rgb(247 243 238 / .75);
}
@media (min-width: 750px) { .tb-box { width: auto; max-width: 680px; min-width: 450px; } }

.tb .tb-label { margin: 11.62px 0; color: #f7f3ee; }

.tb-heading {
  width: 80%; margin: 10px 0 0 40px; color: #f7f3ee;
  font: 400 25px / 1.05 var(--f-body); letter-spacing: 0;
}
.tb-heading em { font-style: italic; }   /* unify.css sets heading em upright */
@media (max-width: 990px) { .tb-heading { font-size: 23px; } }

.tb-buttons { display: inline-flex; flex-wrap: wrap; gap: 10px; max-width: 450px; margin: 20px 0 0 32px; }
.tb .tb-btn { margin-left: -1px; }

/* Dawn's scroll-trigger (base.css), only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .tb-reveal { opacity: .01; }
  .tb-slide { transform: translateY(20px); }
  .tb-reveal.tb-fade:not(.is-offscreen) { opacity: 1; animation: tb-fade .6s cubic-bezier(0, 0, .3, 1); }
  .tb-reveal.tb-slide:not(.is-offscreen) { animation: tb-slide .6s cubic-bezier(0, 0, .3, 1) forwards; }
}
@keyframes tb-fade { from { opacity: .01; } to { opacity: 1; } }
@keyframes tb-slide { from { transform: translateY(20px); opacity: .01; } to { transform: translateY(0); opacity: 1; } }