/* 1.0.8: contain carousels and keep every page usable at narrow widths. */
.product-carousel,.product-track,.ba-related,.ba-related-track{max-width:100%}
.product-track .product-card,.ba-related-track .ba-catalog-card{position:relative}
.product-track,.ba-related-track{overscroll-behavior-x:contain}
.product-track .product-card,.ba-related-track .ba-catalog-card{min-width:0}

.hero-content,.brand-intro-copy,.brand-intro-art,.section-heading>*,.carousel-head>*,.mystery-copy,.mystery-visual,.story-photo,.story-copy,.footer>*,.inner-hero>*,.about-statement>*,.about-split>*,.blog-card>*,.mystery-single-hero>*,.box-explainer>*,.ba-shop-layout>*,.ba-single-layout>*{min-width:0}
.hero h1,.section h2,.brand-intro h2,.mystery h2,.story h2,.inner-page h1,.inner-page h2,.ba-shop h1,.ba-product h1,.ba-related h2{overflow-wrap:anywhere}
.entry-content iframe,.entry-content video,.entry-content embed,.entry-content object{max-width:100%}
.entry-content pre,.entry-content table{display:block;max-width:100%;overflow-x:auto}
.entry-content .wp-block-table{max-width:100%;overflow-x:auto}
.woocommerce table.shop_table{max-width:100%}

@media(max-width:1100px){
  .desktop-nav .ba-dropdown-flyout{left:auto;right:100%}
  .inner-hero,.about-split,.about-statement,.mystery-single-hero,.box-explainer{grid-template-columns:minmax(0,1fr)}
  .inner-hero{min-height:0}
  .inner-hero-copy{padding:80px 6% 65px}
  .inner-hero-photo{height:440px;min-height:0}
  .about-statement{gap:22px;padding-top:80px;padding-bottom:80px}
  .about-split-image{height:430px}
  .about-split-copy{padding:70px 6%}
  .mystery-single-photo{height:520px;min-height:0}
  .mystery-single-copy{padding-top:38px}
  .box-explainer{gap:20px}
}

@media(max-width:850px){
  .brand-intro-v2,.mystery,.story{grid-template-columns:minmax(0,1fr)}
  .blog-card-featured{grid-template-columns:minmax(0,1fr);min-height:0}
  .blog-card-featured .blog-card-image{height:330px}
  .footer{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
}

@media(max-width:600px){
  .hero-video .hero-content{max-width:100%;min-width:0}
  .hero-video h1{font-size:clamp(43px,12vw,60px)}
  .inner-hero-photo{height:340px}
  .about-split-image{height:320px}
  .blog-card-featured .blog-card-image{height:280px}
  .mystery-single-photo{height:clamp(320px,100vw,450px)}
  .carousel-head{flex-wrap:wrap}
  .carousel-head>div:first-child{flex:1 1 100%}
  .carousel-actions{margin-left:auto}
  .mystery h2{font-size:clamp(36px,9vw,50px)}
  .mystery-button,.category-all{max-width:100%;white-space:normal}
  .mystery-buy,.box-highlights,.mystery-single-price{min-width:0}
  .box-highlights{grid-template-columns:repeat(3,minmax(0,1fr))}
  .box-highlights span{overflow-wrap:anywhere}
  .team-grid,.gallery-grid,.about-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-bottom{grid-column:1/-1}
  .ba-shop-results .woocommerce-ordering select{max-width:100%}
  .ba-product .woocommerce-tabs .panel{overflow-wrap:anywhere}
  .woocommerce-cart-form{max-width:100%;overflow-x:auto}
  .woocommerce-checkout #order_review{max-width:100%;overflow-x:auto}
}

@media(max-width:380px){
  .brand-intro-v2 h2{font-size:clamp(36px,10vw,44px)}
  .section-heading h2,.carousel-head h2,.story h2{font-size:clamp(32px,9vw,40px)}
  .mystery-facts span{font-size:9px}
  .box-highlights{gap:5px}
  .box-highlights strong{font-size:18px}
  .team-details{padding:12px}
  .team-details h2{font-size:15px}
  .ba-cart-drawer .woocommerce-mini-cart__buttons{grid-template-columns:1fr}
}