/** Shopify CDN: Minification failed

Line 5979:0 Unexpected "}"
Line 7543:14 Expected identifier but found whitespace
Line 7543:34 Unexpected "1.2s"

**/
/* Hide skip-to-content accessibility link (visible only on keyboard focus) */
.skip-to-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================
   HOMEPAGE SECTIONS — CSS extracted from index.json
   Moved here to stay under Shopify's 500-char custom_css limit
   ========================================== */

/* video_K8Xyxy — play button styling */
[id*="video_K8Xyxy"] .video-play-button {
  border: none !important; background: none !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
  width: auto !important; height: auto !important;
}
[id*="video_K8Xyxy"] .video-play-button > svg { width: 30px !important; height: 20px !important; }
[id*="video_K8Xyxy"] .video-play-button > svg polygon,
[id*="video_K8Xyxy"] .video-play-button > svg path { fill: #ffffff !important; }
[id*="video_K8Xyxy"] .video-play-text { display: none !important; }
[id*="video_K8Xyxy"] .video--content-button { padding-bottom: 10px !important; }
[id*="video_K8Xyxy"] .video-cover-image img { object-position: center 30% !important; }

/* slideshow_dAtg3D (protocol/acknowledgements) */
[id*="slideshow_dAtg3D"] #ack-full-content { padding: 0 20px; }
[id*="slideshow_dAtg3D"] #ack-full-content b {
  font-family: 'Avenir Next', Arial, sans-serif;
  font-size: 12px; letter-spacing: 1.6px; font-weight: 600;
}
[id*="slideshow_dAtg3D"] #ack-full-content p { text-align: justify; }
[id*="slideshow_dAtg3D"] .animated-line { margin-left: 20px; margin-right: 20px; }
@media (max-width: 767px) {
  [id*="slideshow_dAtg3D"] #ack-full-content { padding: 0 16px; }
  [id*="slideshow_dAtg3D"] .animated-line { margin-left: 16px; margin-right: 16px; }
  [id*="slideshow_dAtg3D"] .ack-desktop-br { display: none; }
}

/* Sort poll button spacing — match margin above "WHAT DO YOU SEE?" */
.sort-poll-row { margin-bottom: 20px; }

/* ==========================================
   PRODUCT CARD OVERLAY SYSTEM
   Heritage credentials displayed on product cards
   ========================================== */

.tags-inline-product-cards {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.tags-inline-product-cards .tag-items {
  display: inline-flex;
  align-items: center;
  color: #141414;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Designer name — allow word break on narrow cards */
.tags-inline-product-cards .designer-tag {
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* Origin and decade — always same size, never wrap */
.tags-inline-product-cards .origin-tag,
.tags-inline-product-cards .decade-tag {
  flex-shrink: 0;
}

/* Vertical bar dividers between tags */
.tags-inline-product-cards .tag-items::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: clamp(8px, 0.65vw, 10px);
  background-color: rgba(20, 20, 20, 0.5);
  margin-left: clamp(4px, 0.5vw, 8px);
  margin-right: clamp(4px, 0.5vw, 8px);
}

.tags-inline-product-cards .tag-items:last-child::after {
  display: none;
}

.tags-inline-product-cards .decade-tag {
  text-transform: none;
}

/* Base overlay styles (top position - default) */
.dynamic-values-added-in-products-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  max-width: 90%;
  font-family: "Magda Clean", Arial, sans-serif;
  text-transform: capitalize;
  color: #141414;
}

/* ==========================================
   BOTTOM OVERLAY - Codex Template & Drop Collection
   Text sits in black zone BELOW image (no overlap)
   Using :has() selector to apply styles based on overlay class
   ========================================== */

/*
 * CRITICAL FIX: Use :has() to detect when bottom overlay is present
 * This ensures flex container styles apply regardless of template context
 * The overlay creates its own black zone - NO padding-bottom on container!
 */
.product--card-image:has(.product-card-overlay-bottom) {
  display: flex !important;
  flex-direction: column !important;
  background-color: #141414;
  position: relative;
  /* NO padding-bottom - overlay creates the black zone */
  padding-bottom: 0 !important;
}

/* Image wrapper: takes only its natural space, never stretches */
.product--card-image:has(.product-card-overlay-bottom) > .product--image {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: 100%;
  display: block;
  /* Ensure image doesn't expand beyond its content */
  overflow: hidden;
}

/* Also keep template-specific selectors for browsers without :has() support */
.template-product-2025_prod-temp_codex div.product--card-image,
.template-collection div.product--card-image,
.template-collection-2025_drop_collection div.product--card-image,
.section-wrapper.codex-card-layout div.product--card-image {
  display: flex !important;
  flex-direction: column !important;
  background-color: #141414;
  position: relative;
  /* NO padding-bottom - overlay creates the black zone */
  padding-bottom: 0 !important;
}

.template-product-2025_prod-temp_codex .product--card-image > .product--image,
.template-collection .product--card-image > .product--image,
.template-collection-2025_drop_collection .product--card-image > .product--image,
.section-wrapper.codex-card-layout .product--card-image > .product--image {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: 100%;
  overflow: hidden;
}

/*
 * BOTTOM OVERLAY - position: static removes ALL positioning
 * Element flows naturally after the image in DOM order
 * The overlay's own padding creates the black zone BELOW the image
 */
.dynamic-values-added-in-products-cards.product-card-overlay-bottom {
  /* Remove absolute positioning completely */
  position: static !important;
  /* Reset all position-related properties */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  /* Flex item properties - comes after image in DOM order */
  order: 10;
  flex-shrink: 0;
  flex-grow: 0;
  /* Visual styling - overlay creates its own black zone */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px 4px;
  background-color: #141414;
  color: #eeeeee;
  text-align: center;
  /* Ensure it sits flat against image bottom */
  margin-top: 0 !important;
}

/* White text for bottom overlay - high specificity rules */
.product-card-overlay-bottom .tags-inline-product-cards .tag-items {
  color: #eeeeee !important;
}

/* Template-specific rules for maximum specificity */
.template-product-2025_prod-temp_codex .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items,
.template-collection .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items,
.template-collection-2025_drop_collection .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items,
.section-wrapper.codex-card-layout .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items {
  color: #eeeeee !important;
}

/* White dividers for bottom overlay */
.product-card-overlay-bottom .tags-inline-product-cards .tag-items::after {
  background-color: rgba(238, 238, 238, 0.5);
}

/* Template-specific divider rules */
.template-product-2025_prod-temp_codex .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items::after,
.template-collection .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items::after,
.template-collection-2025_drop_collection .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items::after,
.section-wrapper.codex-card-layout .dynamic-values-added-in-products-cards .tags-inline-product-cards .tag-items::after {
  background-color: rgba(238, 238, 238, 0.5);
}

/* Product number styling - matches bottom overlay sizes */
.product-number-from-title {
  margin-bottom: 4px;
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: none;
}

.product-card-overlay-bottom .product-number-from-title {
  color: #eeeeee;
  font-size: 15px;
  letter-spacing: 0.8px;
}

/* Tags typography - smaller than product number */
.product-card-overlay-bottom .tags-inline-product-cards {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #eeeeee;
}

/* ==========================================
   HORIZONTAL LINE BELOW TAGS - Full width to match text
   ========================================== */

/* Add horizontal line below the tags using ::after pseudo-element */
.product-card-overlay-bottom .product-tags-product-cards::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #eeeeee;
  margin: 10px auto 8px;
}

/* ==========================================
   PRICE CENTERED - No View link
   For product cards with bottom overlay
   ========================================== */

/* Target product cards that have bottom overlay using :has() selector */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail {
  padding: 0 !important;
  background-color: #141414 !important;
}

/* Center the price in the detail zone */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Price styling - centered, white text */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail .product--actual-price {
  font-family: "Avenir Next", "Avenir Next W01", sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  color: #eeeeee !important;
}

/* Price container centered */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail-content {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* HIDE View link for cards with bottom overlay */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-view-link {
  display: none !important;
}

/* HIDE product title for cards with bottom overlay (shown in overlay instead) */
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail .product--title {
  display: none !important;
}

/* HIDE hover icons (quick view, cart) for cards with bottom overlay */
.product--card-inner:has(.product-card-overlay-bottom) .product-quickview-button,
.product--card-inner:has(.product-card-overlay-bottom) .product--card-detail-button {
  display: none !important;
}

.custom-alignment-product--card-badges{
  top: unset;
  bottom: 5px;
  left: unset;
  right: 5px;
}

.claimed-badge--top-left {
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: auto;
}

.claimed-badge--top-left .product--badge {
  border-radius: 4px;
}


/* Enrolled/claimed items — reserved at gallery feel, not greyed out */
.product--actual-price--claimed {
  opacity: 0.85;
}

  .klavio_app_custom_block{
  width: 100%;
  max-width: 100%;
  margin: 40px auto 20px ;
}

.faq_parent_class_settings{
  grid-template-columns: 1fr !important;
  justify-content: center;
  max-width: 800px;
  margin: auto;
}

.faq_parent_class_settings .collapsible-content--info{
  text-align: center;
  max-width: 100%;
  position: unset;
}

@media (min-width: 767px){
  .main--product-media.my-main-product-media-class{
    max-width: 80% !important;
  }
  .my-thumb-swiper-here.main--product-thumbnails{
    max-width: 20%;
  }
  .my-thumb-swiper-here .main--product-thumbnail-item{
    flex: 0 0 23%;
  }
  .klavio_app_custom_block{
  width: 100%;
  max-width: 33.33%;
  margin: 0px auto;
}
}
.product-media-popup .popup-close svg{
  color: white;
}

/* ==========================================
   RESPONSIVE STYLES - Product Card Overlays
   ========================================== */

/* Large Desktop (1700px+) */
@media (min-width: 1700px) {
  /* Top overlay (default) */
  .dynamic-values-added-in-products-cards {
    top: 20px;
  }

  /* Bottom overlay - reduced bottom padding for tighter price spacing */
  .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
    padding: 14px 16px 6px;
  }

  /* Price & View */
  .template-product-2025_prod-temp_codex .product--card-detail .product--actual-price,
  .template-collection-2025_drop_collection .product--card-detail .product--actual-price,
  .section-wrapper.codex-card-layout .product--card-detail .product--actual-price,
  .template-product-2025_prod-temp_codex .product--card-view-link__anchor,
  .template-collection-2025_drop_collection .product--card-view-link__anchor,
  .section-wrapper.codex-card-layout .product--card-view-link__anchor {
    font-size: 12px !important;
  }
}

/* Desktop (1200px - 1699px) */
@media (min-width: 1200px) and (max-width: 1699px) {
  /* Bottom overlay - reduced bottom padding for tighter price spacing */
  .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
    padding: 12px 14px 5px;
  }
}

/* Tablet (768px - 999px) */
@media (min-width: 768px) and (max-width: 999px) {
  /* Top overlay */
  .dynamic-values-added-in-products-cards {
    top: 12px;
  }

  /* Bottom overlay - reduced bottom padding for tighter price spacing */
  .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
    padding: 10px 12px 4px;
  }

  /* Price & View */
  .template-product-2025_prod-temp_codex .product--card-detail .product--actual-price,
  .template-collection-2025_drop_collection .product--card-detail .product--actual-price,
  .section-wrapper.codex-card-layout .product--card-detail .product--actual-price,
  .template-product-2025_prod-temp_codex .product--card-view-link__anchor,
  .template-collection-2025_drop_collection .product--card-view-link__anchor,
  .section-wrapper.codex-card-layout .product--card-view-link__anchor {
    font-size: 10px !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  /* Bottom overlay - aggressively reduced padding for tighter price spacing on mobile */
  .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
    padding: 6px 10px 0px;
  }

  /* Price & View — uses :has() to match base rule specificity (0,4,0) */
  .product--card-inner:has(.product-card-overlay-bottom) .product--card-detail .product--actual-price,
  .template-product-2025_prod-temp_codex .product--card-detail .product--actual-price,
  .template-collection-2025_drop_collection .product--card-detail .product--actual-price,
  .section-wrapper.codex-card-layout .product--card-detail .product--actual-price,
  .template-product-2025_prod-temp_codex .product--card-view-link__anchor,
  .template-collection-2025_drop_collection .product--card-view-link__anchor,
  .section-wrapper.codex-card-layout .product--card-view-link__anchor {
    font-size: 7px !important;
  }
}

@media (min-width: 767px) and (max-width: 1440px) {
 .collection_custom_class_css .horizontal-filters--options{
    max-width: 100% !important;
     width:100%;
  }
  body  .collection_custom_class_css .horizontal-filters--options .horizontal-filters--main-list{
  max-width:100% !important;
  width:100%;
}
   .collection_custom_class_css  #horizontalFilterForm {
  grid-template-columns: 1fr auto;
}
   .collection_custom_class_css .horizontal-filters--list {
         gap: 9px;
        padding: 20px 12px;
        white-space: nowrap;
        flex-wrap: nowrap;
        overflow-x: visible;
}
   .collection_custom_class_css .horizontal-filters--main {
    display:block
  }
.collection_custom_class_css .horizontal-filters--list-item {
    padding: 8px 4px;
}
 .collection_custom_class_css  .horizontal-filters--button  span {
    font-size:14px;
  }
  .collection_custom_class_css  .horizontal-filters--main-inner{
    overflow:unset;
  }
}

.collection-2025-drop {
  --product_card_radius: 0px;
}

@media (min-width: 767px) and (max-width: 1020px) {

.collection_custom_class_css  .horizontal-filters--button span {
    font-size: 13px;
}
  .collection_custom_class_css .horizontal-filters--list {
        gap: 3px;
        padding: 15px 5px;
}
  .collection_custom_class_css   .horizontal-filters--content label{
        font-size: 13px;

  }
}
 
@media (min-width: 767px) and (max-width: 900px) {

.collection_custom_class_css  .horizontal-filters--button span {
    font-size: 12px;
}
  .collection_custom_class_css .horizontal-filters--list {
        gap: 3px;
        padding: 15px 1px;
}
    .collection_custom_class_css   .horizontal-filters--content label{
        font-size: 12px;

  }
}
 


@media (min-width: 1350px) {

 .collection_custom_class_css .horizontal-filters--options{
    max-width: 100% !important;
     width:100%;
  }
  body  .collection_custom_class_css .horizontal-filters--options .horizontal-filters--main-list{
  max-width:100% !important;
  width:100%;
}
 .collection_custom_class_css  #horizontalFilterForm {
  grid-template-columns:1fr;
}
}

@media (max-width: 767px){
  .footer-logo-parent-class{
  justify-content: center;
}
.footer-logo-parent-class .footer--logo{
  margin: 0 auto;
}
}

/* ==========================================
   FOOTER MENUS - ALWAYS EXPANDED
   Removed collapsible/accordion functionality
   Menus are always visible on all screen sizes
   ========================================== */

/* Ensure footer menu lists are always visible */
.footer--menu-always-open .footer--menu-list,
.footer--menu-always-open .footer--menu-info,
.footer--menu-always-open .footer--menu-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Remove any accordion-related styling on mobile */
@media (max-width: 767px) {
  .footer--menu-always-open {
    padding-bottom: 40px;
  }

  .footer--menu-always-open .footer--menu-heading {
    pointer-events: none;
    cursor: default;
    padding-bottom: 5px;
  }

  .footer--menu-always-open .footer--menu-list {
    padding-bottom: 0;
  }
}

/* Custom layout tweaks for 2025 product template */
.template-product-2025_prod-temp_codex .product--wrapper.layout_2 .product-info-details {
  padding-top: 0 !important;
}
.template-product-2025_prod-temp_codex .product-title-heading {
  margin-top: -40px;
}

/* Smaller title and product number for 2025 template */
.template-product-2025_prod-temp_codex .product-title-heading.main-product-title-number-find {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .template-product-2025_prod-temp_codex .product-title-heading.main-product-title-number-find,
  .template-product-2025_prod-temp_codex .main-product-number-from-title {
    font-size: 12px !important;
  }
}

@media (min-width: 769px) {
  .template-product-2025_prod-temp_codex .product-title-heading.main-product-title-number-find,
  .template-product-2025_prod-temp_codex .main-product-number-from-title {
    font-size: 14px !important;
  }
}
 
/* Smaller price for codex product template */
.template-product-2025_prod-temp_codex .product--pricing span,
.section-featured-collection .section-wrapper.codex-card-layout .product--pricing span {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.section-featured-collection .section-wrapper.codex-card-layout .product--actual-price {
  font-size: 0.7em !important;
}

/* View button placement for featured collection on codex product template */
.template-product-2025_prod-temp_codex .section-featured-collection .product--card-view-link,
.section-featured-collection .section-wrapper.codex-card-layout .product--card-view-link {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.template-product-2025_prod-temp_codex .section-featured-collection .product--card-detail,
.section-featured-collection .section-wrapper.codex-card-layout .product--card-detail {
  padding-top: 4px;
}

.template-product-2025_prod-temp_codex .section-featured-collection .product--card-detail-inner,
.section-featured-collection .section-wrapper.codex-card-layout .product--card-detail-inner {
  align-items: flex-start;
}

.template-product-2025_prod-temp_codex .section-featured-collection .product--card-view-link__anchor {
  color: #eeeeee;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.template-product-2025_prod-temp_codex .section-featured-collection .product--card-view-link__anchor:hover,
.template-product-2025_prod-temp_codex .section-featured-collection .product--card-view-link__anchor:focus {
  color: #eeeeee;
}

.section-featured-collection .section-wrapper.codex-card-layout .product--card-view-link__anchor {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.section-featured-collection .section-wrapper.codex-card-layout .product--card-view-link__anchor:hover,
.section-featured-collection .section-wrapper.codex-card-layout .product--card-view-link__anchor:focus {
  color: inherit;
}

/* Drop collection view link and pricing alignment */
.template-collection-2025_drop_collection .product--card-view-link,
.collection-2025-drop .product--card-view-link {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.template-collection-2025_drop_collection .product--card-detail,
.collection-2025-drop .product--card-detail {
  padding-top: 4px;
}

.template-collection-2025_drop_collection .product--card-detail-inner,
.collection-2025-drop .product--card-detail-inner {
  align-items: flex-start;
}

.template-collection-2025_drop_collection .product--card-view-link__anchor,
.collection-2025-drop .product--card-view-link__anchor {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.template-collection-2025_drop_collection .product--card-view-link__anchor:hover,
.template-collection-2025_drop_collection .product--card-view-link__anchor:focus,
.collection-2025-drop .product--card-view-link__anchor:hover,
.collection-2025-drop .product--card-view-link__anchor:focus {
  color: inherit;
}

.template-collection-2025_drop_collection .product--card-detail-content .product--pricing span,
.collection-2025-drop .product--card-detail-content .product--pricing span {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.template-collection-2025_drop_collection .product--card-detail-content .product--pricing .product--actual-price,
.collection-2025-drop .product--card-detail-content .product--pricing .product--actual-price {
  font-family: "Avenir Next", "Avenir Next W01", sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

/* Larger price on individual product pages */

body[class^="template-product"]:not(.template-product-2025_prod-temp_codex) .product--pricing .product--actual-price {
  font-size: 1.4em;

}

/* Future collection carousel scrollbar styling on Codex template */
.template-product-2025_prod-temp_codex .section-featured-collection .featured-collection--outer.swiper {
  --swiper-scrollbar-bg-color: rgba(238, 238, 238, 0.2);
  --swiper-scrollbar-drag-bg-color: #eeeeee;
  scrollbar-color: #eeeeee transparent;
}

.template-product-2025_prod-temp_codex .section-featured-collection .featured-collection--outer.swiper::-webkit-scrollbar {
  height: 6px;
}

.template-product-2025_prod-temp_codex .section-featured-collection .featured-collection--outer.swiper::-webkit-scrollbar-track {
  background: transparent;
}

.template-product-2025_prod-temp_codex .section-featured-collection .featured-collection--outer.swiper::-webkit-scrollbar-thumb {
  background-color: #eeeeee;
  border-radius: 999px;
}

.template-product-2025_prod-temp_codex .section-featured-collection .swiper-scrollbar {
  display: none;
}

.template-product-2025_prod-temp_codex .section-featured-collection .swiper-scrollbar .swiper-scrollbar-drag {
  background: #eeeeee !important;
  border-radius: 999px;
  height: 100%;
}

/* Adjust Materials slideshow image size */
#slideshowItem-slide_grid_mBJyDC .slideshow--media,
#slideshowItem-slide_grid_nqiaHQ .slideshow--media {

  max-width: 60vw;

  margin-left: auto;
  margin-right: auto;
}

/* Home page product card price and scrollbar color */
body.template-index .product--pricing span {
  color: #eeeeee;
}
body.template-index .swiper-scrollbar,
body.template-index .swiper-scrollbar .swiper-scrollbar-drag {
  background-color: #eeeeee;
}

/* Match price text to designer detail tags */

.product--card-detail-content .product--pricing .product--actual-price {
  font-family: "Avenir Next", "Avenir Next W01", sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;

}

/* Use Magda Clean font for claimed product badge */
.product--badge.sold-out {
  font-family: "Magda Clean", Arial, sans-serif !important;

}

#roseys-anchor {
  scroll-margin-top: 80px;
}

/* ==========================================
   ANIMATED DIVIDER LINES
   Matches study-on-perception section styling:
   - scaleX animation (left-to-right)
   - Same width as rich text content (~28rem max)
   - Consistent spacing with flexbox gap style
   ========================================== */

/* Keyframe animation matching study-on-perception */
@keyframes animated-line-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Base animated line styles - matches study-on-perception-line */
.animated-line {
  display: block !important;
  height: 1px !important;
  background-color: #ffffff !important;
  /* Use scaleX animation like study section (left-to-right) */
  width: 100% !important;
  max-width: min(90vw, 28rem) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  /* Spacing matches study section gap: clamp(0.5rem, 2vw, 0.75rem) */
  margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
  margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Trigger animation when visible */
.animated-line.is-visible {
  animation: animated-line-fill 1.2s ease-out forwards !important;
  transform: scaleX(1) !important;
}

/* ==========================================
   SLIDESHOW SLIDE LINES
   Match study section width, left-to-right animation
   ========================================== */

/* Lines inside slideshow content - same width as study section */
.slideshow--content .animated-line {
  max-width: min(90vw, 28rem) !important;
  /* Sub-header spacing: tight to heading, minimal below */
  margin-top: 5px !important;
  margin-bottom: clamp(0.1875rem, 0.5vw, 0.25rem) !important; /* ~3-4px - tight to body */
}
/* Slideshow sub-headings: remove bottom margin so line sits close */
.slideshow--content h6 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Left-aligned slides: lines align left but animate left-to-right */
.slideshow--content.d-text-left .animated-line,
.slideshow--content[class*="d-text-left"] .animated-line {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform-origin: left center !important;
}

/* Center-aligned slides: lines center, animate from left */
.slideshow--content.d-text-center .animated-line,
.slideshow--content[class*="d-text-center"] .animated-line {
  margin-left: auto !important;
  margin-right: auto !important;
  transform-origin: left center !important;
}

/* Right-aligned slides: lines align right, still animate left-to-right */
.slideshow--content.d-text-right .animated-line,
.slideshow--content[class*="d-text-right"] .animated-line {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform-origin: left center !important;
}

/* ==========================================
   RICH TEXT / CUSTOM LIQUID SECTION LINES
   Centered with same width as study section
   ========================================== */

/* Lines in rich text sections - centered, same width, tight to heading */
.richtext--content .animated-line,
.section-richtext .animated-line,
.custom-liquid--content .animated-line {
  max-width: min(90vw, 28rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 5px !important;
  margin-bottom: clamp(0.375rem, 1.5vw, 0.5rem) !important;
  transform-origin: left center !important;
}
/* Rich text headings above animated-line: remove bottom gap */
.richtext--content h6,
.richtext--content h2,
.section-richtext h6,
.section-richtext h2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* "A Global Study on Perception" — line width matches heading text (~272px at 16px bold) */
[id*="rich_text_VdyADn"] .animated-line {
  max-width: 272px !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[id*="rich_text_VdyADn"] .richtext--content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
[id*="rich_text_VdyADn"] h6,
[id*="rich_text_VdyADn"] h2,
[id*="rich_text_VdyADn"] h2.h6,
[id*="rich_text_VdyADn"] .richtext--heading {
  width: fit-content !important;
  font-size: 16px !important;
}
/* Match "Participate" header styling for rich text headings */
[id*="rich_text_VdyADn"] .richtext--heading,
[id*="rich_text_V3Qcw7"] .richtext--heading {
  font-family: 'Avenir Next', Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
  letter-spacing: 1.6px !important;
}
[id*="rich_text_VdyADn"] .richtext--heading strong,
[id*="rich_text_V3Qcw7"] .richtext--heading strong {
  font-weight: inherit !important;
}
[id*="rich_text_VdyADn"] .richtext--custom-liquid {
  width: 100% !important;
  min-width: 230px !important;
  align-self: stretch !important;
}
/* Force animated line visible — override scaleX(0) base and bypass IntersectionObserver */
[id*="rich_text_VdyADn"] .richtext--custom-liquid .animated-line,
[id*="rich_text_VdyADn"] .animated-line {
  transform: scaleX(1) !important;
  width: 230px !important;
  max-width: 230px !important;
  height: 1px !important;
  background-color: #ffffff !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Group 1 | Now Enrolling" — line width matches body text (~255px for "100 unique designer frames") */
[id*="rich_text_V3Qcw7"] .animated-line {
  max-width: 255px !important;
}
[id*="rich_text_V3Qcw7"] .richtext--content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
[id*="rich_text_V3Qcw7"] .richtext--custom-liquid {
  width: 100% !important;
  min-width: 255px !important;
  align-self: stretch !important;
}
/* Force animated line visible — override scaleX(0) base and bypass IntersectionObserver */
[id*="rich_text_V3Qcw7"] .richtext--custom-liquid .animated-line,
[id*="rich_text_V3Qcw7"] .animated-line {
  transform: scaleX(1) !important;
  width: 255px !important;
  max-width: 255px !important;
  height: 1px !important;
  background-color: #ffffff !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Group 1 | Now Enrolling" — overlap onto video section above */
[id*="rich_text_V3Qcw7"] {
  position: relative;
  z-index: 2;
  margin-top: -30px !important;
}
@media (max-width: 767px) {
  [id*="rich_text_V3Qcw7"] {
    margin-top: -25px !important;
  }
}

/* Marry Group 1 text and product cards — remove bottom gap */
[id*="rich_text_V3Qcw7"] .richtext--description {
  padding-bottom: 0 !important;
}
[id*="custom_liquid_PrdSldr"] .section-spacing {
  padding-top: 0 !important;
}
[id*="custom_liquid_PrdSldr"] .ps-wrap {
  padding-top: 0 !important;
}

/* ==========================================
   RESULTS SECTION - Line aligned flush left, more space from header
   ========================================== */
.section--header-inner .animated-line {
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: clamp(0.75rem, 2vw, 1rem) !important; /* ~12-16px space from header */
  transform-origin: left center !important;
}

/* ==========================================
   SUB-HEADER TO LINE SPACING — Consistent across all homepage sections
   Tighter than main title double-line headers (~4-6px gap)
   Applies to: Known/Unknown, Materials, Method, Results,
   Color from Roses, Lenses by ZEISS, Vintage Designer Sunglasses, 1 of 1
   ========================================== */

/* A. Known/Unknown (multicolumn) — h4 + animated-line */
.section-multicolumn[id$="multicolumn_3dhq6r"] .multicolumn--content h4 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.section-multicolumn[id$="multicolumn_3dhq6r"] .multicolumn--content p:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.multicolumn--content .animated-line {
  margin-top: 5px !important;
  margin-bottom: clamp(0.125rem, 0.5vw, 0.1875rem) !important; /* ~2-3px below */
}

/* B. Study-on-perception sections — heading + .study-on-perception-line */
.study-on-perception-wrapper h2,
.study-on-perception-wrapper h3,
.study-on-perception-wrapper h4 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.study-on-perception-wrapper .study-on-perception-line {
  margin-top: 5px !important;
  background-color: #ffffff !important;
}
.study-on-perception-wrapper {
  gap: clamp(0.375rem, 1.5vw, 0.5rem) !important; /* ~6-8px between elements */
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

/* Mobile: honor mobile alignment */
@media screen and (max-width: 767px) {
  .animated-line {
    max-width: min(90vw, 24rem) !important;
    margin-top: clamp(0.4rem, 2vw, 0.6rem) !important;
    margin-bottom: clamp(0.4rem, 2vw, 0.6rem) !important;
  }

  /* Mobile text alignment overrides */
  .slideshow--content[class*="m-text-left"] .animated-line {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .slideshow--content[class*="m-text-center"] .animated-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .slideshow--content[class*="m-text-right"] .animated-line {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Tablet and up */
@media screen and (min-width: 768px) {
  .animated-line {
    max-width: min(70vw, 28rem) !important;
    margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
    margin-bottom: clamp(0.5rem, 2vw, 0.75rem) !important;
  }
}

/* Large desktop - match study section exactly */
@media screen and (min-width: 1200px) {
  .animated-line {
    max-width: 28rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ==========================================
   PRODUCT PAGE ROSEYS ANIMATED LINE
   Force left alignment on product pages
   ========================================== */

/* Product page ROSEYS line - force left alignment, match border color */
.section-main-product .animated-line,
.product--wrapper .animated-line,
.product--custom-liquid .animated-line {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 100% !important;
  transform-origin: left center !important;
  background-color: var(--border_color) !important;
}

/* ==========================================
   FOOTER LINK STYLES
   Remove underline from Share Hypothesis in footer
   ========================================== */

/* Remove underline from Share Hypothesis link in footer */
.footer a[href*="exp-master-container"],
footer a[href*="exp-master-container"],
.footer--menu a[href*="exp-master-container"] {
  text-decoration: none !important;
}

.footer a[href*="exp-master-container"]:hover,
footer a[href*="exp-master-container"]:hover,
.footer--menu a[href*="exp-master-container"]:hover {
  text-decoration: none !important;
}

/* ==========================================
   PRODUCT CAROUSEL ENHANCEMENT
   Clean, luxury presentation without overlay buttons
   ========================================== */

/* Enhanced product card in carousel */
.featured-collection .product--card,
.product-slider .product--card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) {
  .featured-collection .product--card:hover,
  .product-slider .product--card:hover {
    transform: translateY(-6px);
  }
}

/* Product image enhancement - REMOVED hover scale to fix image stretch issue */
/* Note: Hover lift effect on card is preserved in lines 683-687 */

/* Carousel navigation arrows - subtle styling */
.featured-collection .swiper-nav,
.product-slider .swiper-nav {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured-collection:hover .swiper-nav,
.product-slider:hover .swiper-nav {
  opacity: 1;
}

/* Always show arrows on mobile for accessibility */
@media (max-width: 767px) {
  .featured-collection .swiper-nav,
  .product-slider .swiper-nav {
    opacity: 1;
  }
}

/* Carousel arrow styling */
.featured-collection .swiper-button-prev,
.featured-collection .swiper-button-next,
.product-slider .swiper-button-prev,
.product-slider .swiper-button-next {
  background: #EEEEEE;
  color: #141414;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.featured-collection .swiper-button-prev:hover,
.featured-collection .swiper-button-next:hover,
.product-slider .swiper-button-prev:hover,
.product-slider .swiper-button-next:hover {
  transform: scale(1.1);
  background: #141414;
  color: #EEEEEE;
}

/* Product info styling enhancement */
.featured-collection .product--title,
.product-slider .product--title {
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Smooth scroll indicator for mobile */
@media (max-width: 767px) {
  .featured-collection::after,
  .product-slider::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, #EEEEEE 0%, transparent 100%);
    pointer-events: none;
    opacity: 0.5;
  }
}

/* =========================================
   POLICY PAGES STYLING
   Match Acknowledgements page formatting
   ========================================= */

/* Policy page main container - centered narrow column */
.shopify-policy__container {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 60px 20px 80px !important;
}

/* Policy page title - H6 style, all caps, centered */
/* Matches Acknowledgements page exactly */
.shopify-policy__title,
.shopify-policy__title h1 {
  text-align: center !important;
  text-transform: uppercase !important;
  font-family: "Avenir Next", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 2.5px !important;
  line-height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Policy page body content - matches Acknowledgements */
.shopify-policy__body {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.5 !important;
  text-align: justify !important;
}

/* Section headers within policy pages - H6 style */
.shopify-policy__body h1,
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4 {
  font-family: "Avenir Next", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-transform: none !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
  border: none !important;
}

/* Paragraphs */
.shopify-policy__body p {
  margin-bottom: 1rem !important;
  line-height: 1.5 !important;
}

/* Lists in policy pages */
.shopify-policy__body ul,
.shopify-policy__body ol {
  margin: 1rem 0 1rem 0 !important;
  padding: 0 !important;
  list-style-position: inside !important;
}

.shopify-policy__body li {
  margin-bottom: 0.5rem !important;
  line-height: 1.5 !important;
}

/* Links in policy pages */
.shopify-policy__body a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.shopify-policy__body a:hover {
  opacity: 0.7 !important;
}

/* Mobile adjustments for policy pages */
@media (max-width: 768px) {
  .shopify-policy__container {
    padding: 40px 20px 60px !important;
  }

  .shopify-policy__title,
  .shopify-policy__title h1 {
    font-size: 20px !important;
    letter-spacing: 2px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .shopify-policy__body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: justify !important;
  }

  .shopify-policy__body p,
  .shopify-policy__body li {
    line-height: 1.5 !important;
  }
}

/* ==========================================
   FOOTER ENHANCEMENTS
   Subtle texture, back-to-top, social links
   Brand colors: #141414 and #EEEEEE only
   ========================================== */

/* Footer background — solid #141414 to match page */
.footer--main {
  background: #141414 !important;
  background-image: none !important;
  border-top: none !important;
}

/* Remove noise texture overlay */
.footer--main::before {
  display: none !important;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
  
  /* Pill button style */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  
  /* Brand colors */
  background-color: #EEEEEE;
  color: #141414;
  border: none;
  
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Interaction */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Shadow */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #141414;
  color: #EEEEEE;
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* Enhanced social links in footer */
.footer--social-links .social--icons-link {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer--social-links .social--icons-link:hover {
  background-color: #EEEEEE;
  color: #141414;
  border-color: #EEEEEE;
  transform: translateY(-3px);
}

/* Footer link hover: uses background-image gradient in footer.css */

/* Mobile adjustments */
@media (max-width: 767px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  
  .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

/* Hide back-to-top when floating CTA is visible to avoid overlap */
.floating-share-hypothesis:not(.is-hidden) ~ .back-to-top,
body:has(.floating-share-hypothesis:not(.is-hidden)) .back-to-top {
  right: 180px;
}

@media (max-width: 767px) {
  .floating-share-hypothesis:not(.is-hidden) ~ .back-to-top,
  body:has(.floating-share-hypothesis:not(.is-hidden)) .back-to-top {
    right: 150px;
  }
}

/* =========================================
   PRODUCT PAGE SPACING & TYPOGRAPHY FIXES
   Applied to all product pages
   Matches home page "Materials" section styling
   ========================================= */

/* 1. MOBILE: Reduce spacing above ROSEYS title and between sections */
@media (max-width: 768px) {
  .product--wrapper .product-info-details {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide br tags in custom liquid blocks */
  .product--wrapper .product-info-details .product-info-block br {
    display: none;
  }

  /* Tighten ROSEYS title block spacing */
  .product--wrapper .product-info-details .product-info-block:first-child {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 2px;
  }

  /* Reduce gap between thumbnail gallery and ROSEYS */
  .product--wrapper .product-media-wrapper {
    margin-bottom: 0 !important;
  }

  .product--wrapper .product--card-image {
    margin-bottom: 0 !important;
  }
}

/* Thumbnail edge smoothing — radial mask to blend vignette edges into dark bg */
.main--product-thumbnail-item {
  position: relative !important;
  overflow: hidden !important;
}
.main--product-thumbnail-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 8px 4px #141414 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 2. ROSEYS TEXT: Header font (Avenir Next bold) */
.product--wrapper .product-info-details h6,
.product--wrapper .product-info-details h6 strong,
.product--wrapper .rte h6,
.product--wrapper .rte h6 strong {
  font-family: "Avenir Next", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  line-height: 1.2 !important;
  text-transform: none !important;  /* Word case - changed from uppercase */
}

/* 2b. ROSEYS BRAND NAME: Increased letter-spacing */
.product--wrapper .brand-roseys {
  letter-spacing: 2.5px !important;
}

/* 2c. PRICE: Gap before buy button — matches enrolled bar spacing */
.product--wrapper .product--pricing {
  margin-bottom: 20px !important;
}

/* 3. COLLAPSIBLE HEADERS (Lens, Frame, Materials, Experiment): Match body text size/spacing */
.product--wrapper .product-accordion--heading-text {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* 3c. COLLAPSIBLE ICON: Smaller to match reduced heading */
.product--wrapper .product-info-details .product-accordion--icon {
  width: 14px !important;
  height: 14px !important;
}
.product--wrapper .product-accordion--icon {
  width: 14px !important;
  height: 14px !important;
}

/* 3b. NOTE HEADER: Match body text size/spacing (bold, uppercase) */
.product--wrapper .product-collapsible-note .product-accordion--heading-text {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* 3d. ALIGNMENT: Accordion and Note sit outside product-info-details, need matching padding */
.product--wrapper .product--detail-accordion {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.product--wrapper .product-collapsible-note,
.product--wrapper .product--custom-liquid:has(.no-asterisk) {
  margin-left: 15px;
  margin-right: 15px;
}

@media (min-width: 768px) {
  .product--wrapper .product--detail-accordion {
    padding-left: 35px !important;
    padding-right: 0 !important;
  }
  .product--wrapper .product-collapsible-note,
  .product--wrapper .product--custom-liquid:has(.no-asterisk) {
    margin-left: 35px;
    margin-right: 0;
  }
}

@media (min-width: 1441px) {
  .product--wrapper .product--detail-accordion {
    padding-left: 45px !important;
  }
  .product--wrapper .product-collapsible-note,
  .product--wrapper .product--custom-liquid:has(.no-asterisk) {
    margin-left: 45px;
  }
}

@media (min-width: 1600px) {
  .product--wrapper .product--detail-accordion {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .product--wrapper .product-collapsible-note,
  .product--wrapper .product--custom-liquid:has(.no-asterisk) {
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* 3e. CONSISTENT SPACING: Accordion heading padding matches LP visual rhythm */
.product--wrapper .product-accordion--heading {
  padding: 8px 0 8px 0 !important;
}
/* 3e3. Reduce gap between accordion header and expanded content */
.product--wrapper .product--detail-accordion .product-accordion .rte,
.product--wrapper .product--detail-accordion .product-accordion .collapsible-content,
.product--wrapper .product--detail-accordion .product-accordion [class*="content"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* 3e2. Line above first accordion (Experiment) to separate from Note/Frame Specs */
.product--wrapper .product--detail-accordion .product-accordion:first-child {
  border-top: 1px solid var(--border_color);
}

/* 3f. NOTE SECTION: Footer for Frame Specs table, no borders */
.product--wrapper .product-collapsible-note {
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 0;
  padding-top: 0;
}
/* Remove padding-bottom on Note wrapper so accordion sits directly below */
.product--wrapper .product--custom-liquid:has(.product-collapsible-note) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.product--wrapper .product-collapsible-note .product-accordion--heading {
  padding: 2px 0 8px 0 !important;
}

/* 3g. NOTE ICON: Match other accordion icon size (14px) */
.product--wrapper .product-collapsible-note .product-accordion--icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product--wrapper .product-collapsible-note .product-accordion--icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* Asterisk rules removed — Note heading no longer uses asterisk prefix */

/* 4. PRODUCT TITLE: Closer to horizontal line, paragraph styling */
.product--wrapper .product-title-heading.main-product-title-number-find {
  font-family: "Magda Clean", var(--body_font_family) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  margin-top: 8px !important;  /* Tight spacing from horizontal line above */
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  .product--wrapper .product-title-heading.main-product-title-number-find {
    font-size: 14px !important;
    margin-top: 6px !important;
  }
}

/* 5. FRAME SPECIFICATIONS HEADER: Body font, left-aligned, BOLD */
.product--wrapper .specs-header,
.product--wrapper .vintage-specs .specs-header {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  text-align: left !important;
}

/* Other custom liquid h6 - keep header font for non-spec sections */
.product--wrapper .custom-liquid h6,
.product--wrapper .custom-liquid .rte h6,
.product--wrapper [class*="specifications"] h6,
.product--wrapper .product-info-block h6 {
  font-family: "Avenir Next", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* Spec body text: 13px for content, headers stay at inherited size */
.product--wrapper .vintage-specs .tags-inline,
.product--wrapper .product--custom-liquid .tags-inline {
  font-size: 13px !important;
}
.product--wrapper .vintage-specs .tag-category,
.product--wrapper .product--custom-liquid .tag-category {
  font-size: 13px !important;
}

/* Spec labels (Designer, Decade, etc.) - body font, word case, BOLD */
.product--wrapper .vintage-specs .tag-category strong {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Specifications body text */
.product--wrapper .custom-liquid p,
.product--wrapper [class*="specifications"] p {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* 6. HORIZONTAL LINES: Unified color and spacing */
.product--wrapper .product-info-details hr,
.product--wrapper .rte hr,
.product--wrapper .custom-liquid hr {
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  border-color: var(--border_color) !important;
  opacity: 1 !important;
}

/* 6b. SPEC DIVIDERS: Match accordion line color and unified 8px spacing */
.product--wrapper hr.spec-divider {
  border-top-color: var(--border_color) !important;
  margin: 8px 0 !important;
}
/* 6b2. HR after Frame Specs title: balanced gap below title */
.product--custom-liquid > .vintage-specs:not(.no-asterisk) + hr.spec-divider {
  margin-top: 12px !important;
}
/* 6b3. Frame Specs last HR: Note sits directly below */
.product--custom-liquid:has(.vintage-specs:not(.no-asterisk)) > hr.spec-divider:last-child {
  margin-bottom: 0 !important;
}

/* 6c. FRAME SPECS CONTAINER: Reduce top margin, even padding, prevent overflow */
.product--wrapper .vintage-specs {
  padding: 0 !important;
  margin-top: 0 !important;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* 6c2. Collapse double dividers between adjacent vintage-specs blocks */
.product--wrapper .product--custom-liquid + .product--custom-liquid .vintage-specs > hr.spec-divider:first-child {
  display: none;
}

/* 6d. VINTAGE SPECS WRAPPER: compact padding for info card feel */
.product--wrapper .product--custom-liquid:has(.vintage-specs) {
  padding: 8px 0 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* 6d1. First HR in Frame Specs: reset margin since wrapper now has padding-top */
.product--wrapper .product--custom-liquid > hr.spec-divider:first-child {
  margin-top: 0 !important;
}
/* 6d2. (Removed: standalone Lens Properties block now disabled, properties merged into Lens accordion) */

/* 6d3. BUY BUTTON: Reduce gap between button and shipping text */
.product--wrapper .product-checkout-buttons {
  padding-bottom: 10px !important;
}

/* 6d. SHIPPING TEXT: Smaller font below buy button */
.product--wrapper .product--custom-content p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* 7. DESKTOP: Align ROSEYS text with top of product images */
@media (min-width: 769px) {
  .product--wrapper.layout_2 .product-info-details {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Remove negative margin */
  .product--wrapper .product-title-heading {
    margin-top: 8px !important;
  }

  /* ROSEYS title block alignment */
  .product--wrapper .product-info-details .product-info-block:first-child {
    margin-top: 0;
    padding-top: 0;
  }
}

/* ============================================
   PRODUCT CARD VIGNETTE GRADIENTS (GLOBAL)
   Applied to all product cards on all pages
   Uses horizontal oval ellipse with soft diffused edges
   ============================================ */

/* Ensure media has position for ::after pseudo-element */
.product--card-inner .product--card-image .media {
  position: relative;
  border: none !important;
  outline: none !important;
}

/* Remove borders/outlines from product images visible through gradient */
.collection-2025-drop .product--card-image,
.collection-2025-drop .product--card-image .media,
.collection-2025-drop .product--card-image .media img,
.collection-2025-drop .product--card-inner {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Fix visible outline: overflow:hidden on .media and .product--card-image clips
   the gradient ::after, creating a hard edge. Override to visible so the gradient
   overlay can extend slightly beyond the container and blend seamlessly into #141414 */
.collection-2025-drop .product--card-inner .product--card-image .media {
  overflow: visible !important;
}
.collection-2025-drop .product--card-image {
  overflow: visible !important;
}
.collection-2025-drop .product--card-inner {
  overflow: visible !important;
}
/* Kill border from product-border-enabled class on collection cards */
.collection-2025-drop .product--card-inner.product-border-enabled {
  border: none !important;
}
.collection-2025-drop .product--card-inner.product-background-enabled {
  background: transparent !important;
}

/* Product Card Gradient - Horizontal Oval Ellipse with Top Edge Fade */
/* Matches home page slideshow elliptical portal effect */
.product--card-inner .product--card-image .media::after {
  content: '';
  position: absolute;
  /* Extend 1px beyond container in all directions to prevent hard edge at boundary */
  inset: -1px;
  pointer-events: none;
  z-index: 2;
  background:
    /* TOP EDGE GRADIENT - Fades image into background (matches slideshow) */
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    /* Bottom edge fade for text visibility */
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    /* ELLIPTICAL PORTAL - ellipse covers all edges of landscape card containers */
    radial-gradient(
      ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(20, 20, 20, 0.02) 50%,
      rgba(20, 20, 20, 0.06) 56%,
      rgba(20, 20, 20, 0.14) 62%,
      rgba(20, 20, 20, 0.28) 68%,
      rgba(20, 20, 20, 0.46) 74%,
      rgba(20, 20, 20, 0.68) 80%,
      rgba(20, 20, 20, 0.88) 87%,
      #141414 93%
    );
}

/* Mobile: match homepage mobile 3-layer gradient */
@media (max-width: 767px) {
  .product--card-inner .product--card-image .media::after {
    background:
      linear-gradient(to bottom,
        #141414 0%,
        rgba(20, 20, 20, 0.85) 3%,
        rgba(20, 20, 20, 0.5) 8%,
        rgba(20, 20, 20, 0.2) 15%,
        transparent 25%
      ),
      linear-gradient(to top,
        rgba(20, 20, 20, 0.35) 0%,
        rgba(20, 20, 20, 0.15) 12%,
        transparent 25%
      ),
      radial-gradient(
        ellipse farthest-side at 50% 50%,
        transparent 0%,
        transparent 34%,
        rgba(20, 20, 20, 0.02) 40%,
        rgba(20, 20, 20, 0.06) 46%,
        rgba(20, 20, 20, 0.14) 52%,
        rgba(20, 20, 20, 0.28) 58%,
        rgba(20, 20, 20, 0.46) 64%,
        rgba(20, 20, 20, 0.68) 72%,
        rgba(20, 20, 20, 0.88) 79%,
        #141414 85%
      );
  }
}

/* ==========================================
   ROSEYS ENHANCED NAVIGATION ARROWS
   Luxury Minimalist Design System
   White arrows - NO circular boundaries
   ========================================== */

/* Remove all circular boundaries from arrows */
.swiper-button,
.swiper-button-prev,
.swiper-button-next,
.button-circle,
.swiper-button.button-circle,
.swiper-button-prev.button-circle,
.swiper-button-next.button-circle {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Slideshow Navigation Arrows - Base Styles */
.section-slideshow .swiper-button,
.slideshow--outer .swiper-button-prev,
.slideshow--outer .swiper-button-next,
.swiper--button-wrapper .swiper-button,
.scroll-snap-slideshow .swiper-button-prev,
.scroll-snap-slideshow .swiper-button-next {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #EEEEEE !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease !important;
  opacity: 1;
}

/* Slideshow Arrow Icons */
.section-slideshow .swiper-button svg,
.slideshow--outer .swiper-button-prev svg,
.slideshow--outer .swiper-button-next svg,
.swiper--button-wrapper .swiper-button svg,
.scroll-snap-slideshow .swiper-button-prev svg,
.scroll-snap-slideshow .swiper-button-next svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #EEEEEE !important;
  fill: none !important;
  stroke-width: 1px !important;
  filter: none !important;
}

/* Override inline SVG path stroke-width — thin chevron style */
.swiper--button-wrapper .swiper-button svg path,
.swiper--button-wrapper .swiper-button-prev svg path,
.swiper--button-wrapper .swiper-button-next svg path,
.product--images .swiper-button-prev svg path,
.product--images .swiper-button-next svg path,
.product-gallery .swiper-button-prev svg path,
.product-gallery .swiper-button-next svg path,
.main--product-image-wrapper .swiper-button svg path,
.section-main-product .swiper-button svg path {
  stroke-width: 1px !important;
}

/* Hide the horizontal line path in arrow SVGs — show only the chevron head */
.swiper--button-wrapper .swiper-button svg path:first-child,
.swiper--button-wrapper .swiper-button-prev svg path:first-child,
.swiper--button-wrapper .swiper-button-next svg path:first-child,
.product--images .swiper-button-prev svg path:first-child,
.product--images .swiper-button-next svg path:first-child,
.product-gallery .swiper-button-prev svg path:first-child,
.product-gallery .swiper-button-next svg path:first-child,
.main--product-image-wrapper .swiper-button svg path:first-child,
.section-main-product .swiper-button svg path:first-child {
  display: none !important;
}

/* Hover Effect - Scale only, no background */
/* NEXT arrows (no rotation needed) */
.section-slideshow .swiper-button-next:hover,
.slideshow--outer .swiper-button-next:hover,
.swiper--button-wrapper .swiper-button-next:hover,
.scroll-snap-slideshow .swiper-button-next:hover {
  background: transparent !important;
  transform: scale(1.1);
  opacity: 1;
}

/* PREV arrows - must maintain rotate(180deg) to prevent flip */
.section-slideshow .swiper-button-prev:hover,
.slideshow--outer .swiper-button-prev:hover,
.swiper--button-wrapper .swiper-button-prev:hover,
.scroll-snap-slideshow .swiper-button-prev:hover {
  background: transparent !important;
  transform: rotate(180deg) scale(1.1);
  opacity: 1;
}

/* Active/Click State */
/* NEXT arrows (no rotation needed) */
.section-slideshow .swiper-button-next:active,
.slideshow--outer .swiper-button-next:active,
.swiper--button-wrapper .swiper-button-next:active,
.scroll-snap-slideshow .swiper-button-next:active {
  transform: scale(0.95);
  background: transparent !important;
}

/* PREV arrows - must maintain rotate(180deg) to prevent flip */
.section-slideshow .swiper-button-prev:active,
.slideshow--outer .swiper-button-prev:active,
.swiper--button-wrapper .swiper-button-prev:active,
.scroll-snap-slideshow .swiper-button-prev:active {
  transform: rotate(180deg) scale(0.95);
  background: transparent !important;
}

/* Product Gallery Arrows - Consistent styling */
.product--images .swiper-button-prev,
.product--images .swiper-button-next,
.product-gallery .swiper-button-prev,
.product-gallery .swiper-button-next {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #EEEEEE !important;
  width: 40px !important;
  height: 40px !important;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.product--images .swiper-button-prev svg,
.product--images .swiper-button-next svg,
.product-gallery .swiper-button-prev svg,
.product-gallery .swiper-button-next svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #EEEEEE !important;
  fill: none !important;
  stroke-width: 1px !important;
  filter: none !important;
}

/* NEXT arrows */
.product--images .swiper-button-next:hover,
.product-gallery .swiper-button-next:hover {
  background: transparent !important;
  transform: scale(1.1);
}

/* PREV arrows - maintain rotate(180deg) */
.product--images .swiper-button-prev:hover,
.product-gallery .swiper-button-prev:hover {
  background: transparent !important;
  transform: rotate(180deg) scale(1.1);
}

/* Active states */
.product--images .swiper-button-next:active,
.product-gallery .swiper-button-next:active {
  transform: scale(0.95);
}

.product--images .swiper-button-prev:active,
.product-gallery .swiper-button-prev:active {
  transform: rotate(180deg) scale(0.95);
}

/* Featured Collection Arrows */
.featured-collection .swiper-button-prev,
.featured-collection .swiper-button-next,
.collection-slider .swiper-button-prev,
.collection-slider .swiper-button-next {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #EEEEEE !important;
  width: 56px !important;
  height: 56px !important;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* NEXT arrows */
.featured-collection .swiper-button-next:hover,
.collection-slider .swiper-button-next:hover {
  background: transparent !important;
  transform: scale(1.1);
}

/* PREV arrows - maintain rotate(180deg) */
.featured-collection .swiper-button-prev:hover,
.collection-slider .swiper-button-prev:hover {
  background: transparent !important;
  transform: rotate(180deg) scale(1.1);
}

/* Active states */
.featured-collection .swiper-button-next:active,
.collection-slider .swiper-button-next:active {
  transform: scale(0.95);
}

.featured-collection .swiper-button-prev:active,
.collection-slider .swiper-button-prev:active {
  transform: rotate(180deg) scale(0.95);
}

/* Arrow Bottom Alignment - Desktop */
/* Align arrows with bottom of slideshow/gallery images */
.section-slideshow .swiper--button-wrapper,
.slideshow--outer .swiper--button-wrapper,
.scroll-snap-slideshow .swiper--button-wrapper {
  align-items: flex-end !important;
  padding-bottom: 20px !important;
}

/* Product gallery arrows - bottom aligned */
.product--images .swiper--button-wrapper,
.product-gallery .swiper--button-wrapper,
.main--product-image-wrapper .swiper--button-wrapper,
.section-main-product .swiper--button-wrapper {
  align-items: flex-end !important;
  padding-bottom: 15px !important;
  z-index: 15 !important;
}

/* Mobile Responsive - Ensure arrows visible */
@media (max-width: 767px) {
  /* CRITICAL: Override theme.css that hides .swiper--button-wrapper on mobile */
  /* Target all variants including right-position no-gap */
  .swiper--button-wrapper,
  .swiper--button-wrapper.right-position,
  .swiper--button-wrapper.right-position.no-gap,
  .main--product-image-wrapper .swiper--button-wrapper,
  .main--product-image-wrapper .swiper--button-wrapper.right-position.no-gap,
  .product--images .swiper--button-wrapper,
  .product-gallery .swiper--button-wrapper,
  .section-main-product .swiper--button-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 10px 15px 10px !important;
    z-index: 15 !important;
  }

  /* Base arrow styles - use static position for flexbox layout */
  .section-slideshow .swiper-button,
  .slideshow--outer .swiper-button-prev,
  .slideshow--outer .swiper-button-next,
  .swiper--button-wrapper .swiper-button,
  .swiper--button-wrapper.right-position.no-gap .swiper-button,
  .scroll-snap-slideshow .swiper-button-prev,
  .scroll-snap-slideshow .swiper-button-next,
  .product--images .swiper-button-prev,
  .product--images .swiper-button-next,
  .product-gallery .swiper-button-prev,
  .product-gallery .swiper-button-next,
  .featured-collection .swiper-button-prev,
  .featured-collection .swiper-button-next,
  .main--product-image-wrapper .swiper-button,
  .main--product-image-wrapper .swiper--button-wrapper.right-position.no-gap .swiper-button,
  .main--product-image-wrapper .swiper-button-prev,
  .main--product-image-wrapper .swiper-button-next,
  .section-main-product .swiper-button,
  .section-main-product .swiper-button-prev,
  .section-main-product .swiper-button-next {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #EEEEEE !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    position: static !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  /* Prev arrow always first (left) */
  .swiper--button-wrapper .swiper-button-prev,
  .swiper--button-wrapper.right-position.no-gap .swiper-button-prev,
  .main--product-image-wrapper .swiper--button-wrapper.right-position.no-gap .swiper-button-prev,
  .main--product-image-wrapper .swiper-button-prev,
  .section-main-product .swiper-button-prev,
  .product--images .swiper-button-prev,
  .product-gallery .swiper-button-prev {
    order: -1 !important;
  }

  /* Next arrow always last (right) */
  .swiper--button-wrapper .swiper-button-next,
  .swiper--button-wrapper.right-position.no-gap .swiper-button-next,
  .main--product-image-wrapper .swiper--button-wrapper.right-position.no-gap .swiper-button-next,
  .main--product-image-wrapper .swiper-button-next,
  .section-main-product .swiper-button-next,
  .product--images .swiper-button-next,
  .product-gallery .swiper-button-next {
    order: 1 !important;
  }

  .section-slideshow .swiper-button svg,
  .swiper--button-wrapper .swiper-button svg,
  .scroll-snap-slideshow .swiper-button-prev svg,
  .scroll-snap-slideshow .swiper-button-next svg,
  .product--images .swiper-button-prev svg,
  .product--images .swiper-button-next svg,
  .product-gallery .swiper-button-prev svg,
  .product-gallery .swiper-button-next svg,
  .main--product-image-wrapper .swiper-button svg,
  .section-main-product .swiper-button svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #EEEEEE !important;
    stroke-width: 1px !important;
    filter: none !important;
  }
}

/* Ensure arrows are visible on dark backgrounds */
.section-slideshow .swiper-button::after,
.swiper-button-prev::after,
.swiper-button-next::after {
  color: #EEEEEE !important;
}

/* ============================================
   MEDIA GRID FIXES
   1. Text must appear ABOVE gradient overlay (z-index fix)
   2. Use farthest-side for smooth ellipse edges (no hard lines)
   ============================================ */

/* Fix 1: Text content ABOVE gradient overlay */
/* Gradient has z-index:100 in slideshow.css, text was z-index:1 */
.section-media-grid .media-content {
  z-index: 101 !important;
  position: relative !important;
}

/* Fix 2: Override media grid gradients — match product card 3-layer system */
.section-media-grid .media-grid--item::after {
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    radial-gradient(
      ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(20, 20, 20, 0.02) 50%,
      rgba(20, 20, 20, 0.06) 56%,
      rgba(20, 20, 20, 0.14) 62%,
      rgba(20, 20, 20, 0.28) 68%,
      rgba(20, 20, 20, 0.46) 74%,
      rgba(20, 20, 20, 0.68) 80%,
      rgba(20, 20, 20, 0.88) 87%,
      #141414 93%
    ) !important;
  pointer-events: none;
  z-index: 100;
}

/* Also fix the inner .media::before gradients — match product card 3-layer system */
.section-media-grid .media-grid--image .media::before,
.section-media-grid .media-grid--video .media::before {
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    radial-gradient(
      ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(20, 20, 20, 0.02) 50%,
      rgba(20, 20, 20, 0.06) 56%,
      rgba(20, 20, 20, 0.14) 62%,
      rgba(20, 20, 20, 0.28) 68%,
      rgba(20, 20, 20, 0.46) 74%,
      rgba(20, 20, 20, 0.68) 80%,
      rgba(20, 20, 20, 0.88) 87%,
      #141414 93%
    ) !important;
  pointer-events: none;
  z-index: 10;
}

/* ==========================================
   PRODUCT LIGHTBOX/POPUP ARROW FIXES
   Static arrows - no movement on hover/click
   Preserves translateY(-50%) centering
   ========================================== */

/* Lightbox arrows - STATIC positioning, no hover/active transforms */
/* This prevents the "jump down" effect when clicking */
.product-media-popup .swiper--button-wrapper .swiper-button,
.product-media-popup .swiper-button-prev,
.product-media-popup .swiper-button-next {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #EEEEEE !important;
  width: 56px !important;
  height: 56px !important;
  /* No transition on transform - keeps arrows static */
  transition: opacity 0.2s ease !important;
}

/* PREV arrow - maintain translateY(-50%) + rotate(180deg) */
.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-prev,
.product-media-popup .swiper-button-prev {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* NEXT arrow - maintain translateY(-50%) only */
.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-next,
.product-media-popup .swiper-button-next {
  transform: translateY(-50%) !important;
}

/* Override hover states - keep static, just change opacity */
.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-prev:hover,
.product-media-popup .swiper-button-prev:hover {
  transform: translateY(-50%) rotate(180deg) !important;
  background: transparent !important;
  opacity: 1;
}

.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-next:hover,
.product-media-popup .swiper-button-next:hover {
  transform: translateY(-50%) !important;
  background: transparent !important;
  opacity: 1;
}

/* Override active states - keep static, no scale effect */
.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-prev:active,
.product-media-popup .swiper-button-prev:active {
  transform: translateY(-50%) rotate(180deg) !important;
  background: transparent !important;
}

.product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-next:active,
.product-media-popup .swiper-button-next:active {
  transform: translateY(-50%) !important;
  background: transparent !important;
}

/* Lightbox arrow icons */
.product-media-popup .swiper-button-prev svg,
.product-media-popup .swiper-button-next svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #EEEEEE !important;
  fill: none !important;
  stroke-width: 1px !important;
}

/* Hide horizontal line path in lightbox arrows too */
.product-media-popup .swiper-button-prev svg path:first-child,
.product-media-popup .swiper-button-next svg path:first-child {
  display: none !important;
}

/* ==========================================
   PRODUCT TEMPLATE MOBILE ARROW FIXES
   Specific fixes for prod-temp_codex template
   ========================================== */

@media (max-width: 767px) {
  /* Product template specific - ensure lightbox arrows visible */
  .template-product-2025_prod-temp_codex .product-media-popup .swiper--button-wrapper,
  .template-product .product-media-popup .swiper--button-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button,
  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button-prev,
  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button-next,
  .template-product .product-media-popup .swiper-button,
  .template-product .product-media-popup .swiper-button-prev,
  .template-product .product-media-popup .swiper-button-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    color: #EEEEEE !important;
    background: transparent !important;
    border: none !important;
    z-index: 10 !important;
  }

  /* Mobile lightbox - PREV arrow */
  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button-prev,
  .template-product .product-media-popup .swiper-button-prev {
    transform: translateY(-50%) rotate(180deg) !important;
    left: 10px !important;
  }

  /* Mobile lightbox - NEXT arrow */
  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button-next,
  .template-product .product-media-popup .swiper-button-next {
    transform: translateY(-50%) !important;
    right: 10px !important;
  }

  /* Mobile lightbox arrow icons */
  .template-product-2025_prod-temp_codex .product-media-popup .swiper-button svg,
  .template-product .product-media-popup .swiper-button svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #EEEEEE !important;
  }
}

/* ==========================================
   HOME PRODUCT SLIDER — Collection Card Overlay Typography
   Matches collection page product card overlay formatting
   Target: slideshow_AkJUCz (products-desktop)
   Content renders in BOTH .slideshow--content (overlay) and
   .slideshow-content-below-body (below image). Both need styling.
   ========================================== */

/* Product number (h6) — matches .product-number-from-title */
[id*="slideshow_AkJUCz"] .slideshow--content h6,
[id*="slideshow_AkJUCz"] .slideshow-content-below-body h6 {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.8px !important;
  color: #eeeeee;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
  text-transform: none;
}

[id*="slideshow_AkJUCz"] .slideshow--content h6 strong,
[id*="slideshow_AkJUCz"] .slideshow-content-below-body h6 strong {
  font-weight: 400 !important;
}

/* Tags line (p) — matches .tags-inline-product-cards .tag-items */
[id*="slideshow_AkJUCz"] .slideshow--content p:not(.slideshow--desc),
[id*="slideshow_AkJUCz"] .slideshow-content-below-body p {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  color: #eeeeee;
  margin: 0;
  line-height: 1.4;
}

/* Price (div) — matches collection card price styling */
[id*="slideshow_AkJUCz"] .slideshow--content div:not([class]),
[id*="slideshow_AkJUCz"] .slideshow-content-below-body > div {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  color: #eeeeee;
  margin-top: 2px;
}

/* === VIDEO BANNER MOBILE HEIGHT ===
   Set video section to 400px on mobile */
@media (max-width: 767px) {
  .section-video .video--wrapper {
    min-height: 400px;
  }
  .section-video .media.m-media-fixed {
    height: 400px;
    min-height: 400px;
  }
  .section-video .media.m-media-adapt {
    min-height: 400px;
  }
}

/* Animated line in product slider — matches collection overlay underline */
[id*="slideshow_AkJUCz"] .slideshow--content .animated-line {
  display: block !important;
  width: 100% !important;
  max-width: 80px !important;
  height: 1px !important;
  background-color: rgba(238, 238, 238, 0.5) !important;
  margin: 4px auto !important;
  transform: scaleX(1) !important;
  animation: none !important;
}

/* ==========================================
   HEADER BAR WITH GRADIENT EDGE
   Solid header on ALL pages EXCEPT homepage.
   Homepage keeps transparent header that reveals on scroll.
   Uses body class template-index (homepage) added via theme.liquid.
   ========================================== */

/* A. Solid black header background — ALL PAGES EXCEPT HOMEPAGE AND COLLECTION */
body:not(.template-index):not(.template-collection) .header.desktop-transparent::before {
  opacity: 1 !important;
  background: #141414 !important;
}

/* A2. Collection page: same transparent-to-opaque behavior as homepage */
body.template-collection .header.desktop-transparent::before {
  transition: opacity 0.6s ease !important;
}
body.template-collection .header.desktop-transparent.is-sticky::before {
  opacity: 1 !important;
  background: #141414 !important;
}

/* B. Gradient bottom edge — ALL PAGES EXCEPT HOMEPAGE, COLLECTION, AND PRODUCT PAGES */
/* Product pages excluded: breadcrumb sits in this zone, and product images have their own vignette */
/* Collection excluded: uses same scroll-reveal behavior as homepage (Rule B3 below) */
body:not(.template-index):not(.template-collection):not(.template-product) .header.desktop-transparent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  transform: translateY(100%);
  background: linear-gradient(to bottom,
    #141414 0%,
    rgba(20, 20, 20, 0.8) 20%,
    rgba(20, 20, 20, 0.4) 50%,
    rgba(20, 20, 20, 0.15) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* B2. Homepage: gradient edge appears only when header becomes opaque on scroll */
body.template-index .header.desktop-transparent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  transform: translateY(100%);
  background: linear-gradient(to bottom,
    #141414 0%,
    rgba(20, 20, 20, 0.8) 20%,
    rgba(20, 20, 20, 0.4) 50%,
    rgba(20, 20, 20, 0.15) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.template-index .header.desktop-transparent.is-sticky::after {
  opacity: 1;
}

/* B3. Collection page: gradient edge appears only when header becomes opaque on scroll */
body.template-collection .header.desktop-transparent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  transform: translateY(100%);
  background: linear-gradient(to bottom,
    #141414 0%,
    rgba(20, 20, 20, 0.8) 20%,
    rgba(20, 20, 20, 0.4) 50%,
    rgba(20, 20, 20, 0.15) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.template-collection .header.desktop-transparent.is-sticky::after {
  opacity: 1;
}

/* C. Content spacing — push page content below header on text/policy pages */
/* Homepage, product, and collection pages have full-bleed heroes that sit under the header */
body.template-page .content-for-layout,
body.template-policy .content-for-layout,
body.template-blog .content-for-layout,
body.template-article .content-for-layout,
body.template-list-collections .content-for-layout,
body.template-cart .content-for-layout,
body.template-search .content-for-layout {
  padding-top: var(--header_height, 80px);
}

/* ==========================================
   HOMEPAGE: SCROLL FLASH PREVENTION
   Eliminate sub-pixel gaps between sections that flash on scroll.
   ========================================== */
body.template-index .content-for-layout > section {
  margin-top: -1px;
  padding-top: 1px;
}

/* ==========================================
   HOMEPAGE: SMOOTH HEADER SCROLL REVEAL
   Header stays transparent at top, smoothly fades in on scroll.
   Slower, more elegant transitions for high-end feel.
   ========================================== */

/* Smooth transition on header background — all pages */
.header.desktop-transparent::before {
  transition: opacity 0.6s ease !important;
}

/* Smoother, more elegant header reveal/hide on scroll.
   0.6s with ease-out curve feels premium, not jarring. */
.section-header {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.header {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.6s ease,
              box-shadow 0.6s ease !important;
}

/* ==========================================
   MOBILE HERO: SHARE BUTTON ABOVE GRADIENT
   Share hypothesis button on mobile hero sits under the gradient overlay.
   Fix: raise z-index so it's clickable and visible above the vignette.
   ========================================== */

/* Raise slideshow content above gradient overlay (z-index: 1).
   Use z-index: 3 WITHOUT changing position to preserve original layout alignment. */
.section-slideshow .slideshow--content,
.section-slideshow .slideshow-content-below-body {
  z-index: 3;
}

.section-slideshow .slideshow--content a,
.section-slideshow .slideshow--content .btn,
.section-slideshow .slideshow--content button,
.section-slideshow .slideshow-content-below-body a,
.section-slideshow .slideshow-content-below-body .btn,
.section-slideshow .slideshow-content-below-body button {
  position: relative;
  z-index: 3;
}

/* C. Push product page breadcrumb below header on page load.
   Header = 80px, add 5px breathing room = 85px.
   Uses margin-top (not padding-top) because breadcrumb.liquid inline <style>
   sets padding: 0 15px which overrides padding-top at equal specificity. */

/* Breadcrumb section: create stacking context so it renders ABOVE the product
   section (which uses negative margin-top to pull up closer). Without this,
   the product image/gradient overlaps and hides the breadcrumb text. */
.shopify-section.breadcrumb {
  position: relative;
  z-index: 3;
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove the dark background from the breadcrumb section-wrapper so it
   doesn't create a visible dark strip. The breadcrumb text floats
   transparently over the page background. */
.shopify-section.breadcrumb .section-wrapper.section-spacing {
  background: transparent !important;
}

.custom-codex-breadcrumb {
  margin-top: 85px !important;
  position: relative;
  z-index: 2;
}

/* ==========================================
   PRODUCT PAGE: LEFT MARGIN BALANCE
   Main media starts at left edge (0px) while right margin is ~56px.
   Add left padding to product wrapper for consistent margins.
   ========================================== */

@media (min-width: 990px) {
  .product--wrapper {
    padding-left: 40px !important;
  }
}

@media (min-width: 1200px) {
  .product--wrapper {
    padding-left: 50px !important;
  }
}

/* ==========================================
   PRODUCT PAGE: INFO COLUMN RIGHT SHIFT
   Nudge the info panel slightly right on desktop for better
   visual balance against the media column.
   ========================================== */
@media (min-width: 990px) {
  .main--product-info-container {
    padding-left: 20px;
  }
}

/* ==========================================
   PRODUCT PAGE: INFO COLUMN LINE SPACING
   Normalize all HR dividers to consistent spacing.
   *Note gets tighter spacing as a footnote.
   ========================================== */

/* Default: all HRs in info column get uniform 12px above/below */
.main--product-info-container hr {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* *Note accordion — tighter footnote spacing (6px above the HR) */
.product--wrapper .product-info-details hr:last-child {
  margin-bottom: 6px !important;
}

/* ==========================================
   PRODUCT PAGE: THUMBNAIL SCROLL FLASH FIX
   Gaps between thumbnail items show a different shade than the gradient
   edges during scroll, creating a visible flash/flicker. Fix by:
   1. Setting thumbnail column background to match gradient edge color
   2. Reducing gap between thumbnails
   ========================================== */

/* Thumbnail column background matches gradient edge — eliminates flash */
.my-thumb-swiper-here.main--product-thumbnails {
  background: #141414;
}

/* Reduce gap between thumbnail items */
.my-thumb-swiper-here .main--product-thumbnail-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.my-thumb-swiper-here .main--product-thumbnail-item:first-child {
  padding-top: 0 !important;
}

.my-thumb-swiper-here .main--product-thumbnail-item:last-child {
  padding-bottom: 0 !important;
}

/* GPU compositing on thumbnails to prevent gradient flash on scroll */
.my-thumb-swiper-here .main--product-thumbnail-item {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.my-thumb-swiper-here .main--product-thumbnail-item .media {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

/* ==========================================
   PRODUCT PAGE: MOBILE LAYOUT COMPRESSION
   Goal: get Enroll button above the fold on mobile.
   Reduce all vertical gaps between header, breadcrumb, image, thumbs, info.
   ========================================== */

@media (max-width: 749px) {
  /* Breadcrumb: dramatically reduce gap below header.
     Header is 60px; 62px margin clears it with minimal breathing room. */
  .custom-codex-breadcrumb {
    margin-top: 62px !important;
    margin-bottom: 0 !important;
  }

  /* Breadcrumb section bottom padding: zero out */
  .shopify-section.breadcrumb .section-wrapper.section-spacing {
    padding-bottom: 0 !important;
  }

  /* Pull product image up closer to breadcrumb (reduces visual black gap) */
  .section-main-product {
    margin-top: -15px !important;
  }
  .product--wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Image: fill container fully (no inset — let theme padding handle edges) */
  .main--product-media .media img,
  .my-main-images-text-settings img {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Hide theme's default product-card overlay (duplicate tags at image top) */
  .main--product-image-wrapper .product-card-overlay-bottom {
    display: none !important;
  }

  /* Overlay: relative positioning on mobile (flows between image and thumbs) */
  .product-image-overlay {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    text-align: center !important;
    padding: 4px 0 2px !important;
    margin-top: -15px !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  /* Thumbnails: reduce gap between main image and thumbnails */
  .my-thumb-swiper-here.main--product-thumbnails {
    margin-top: 2px !important;
    margin-bottom: -18px !important;
  }

  /* Spacing between thumbnails and product info — minimal gap */
  .main--product-info-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .product--info, .product-info-details {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Product subtitle: smaller on mobile, with breathing room above */
  .product-info-details h1 {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.1 !important;
    margin-top: 6px !important;
  }
  /* ---- MOBILE: Compact spacing from ROSEYS title through Enroll button ---- */

  /* ROSEYS title block: tighten bottom padding (theme default is 20px) */
  .product-info-details > .product--custom-liquid:first-child {
    padding-bottom: 4px !important;
  }

  /* Animated line between brand name and subtitle: tighten vertical margins */
  .product--wrapper .animated-line {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  /* Subtitle custom-liquid block (contains only style/script): kill its padding */
  .product-info-details > .product--custom-liquid:nth-child(2) {
    padding-bottom: 0 !important;
  }

  /* Price wrapper: add breathing room above price, reduce gap below */
  .price-wrapper {
    padding-bottom: 4px !important;
  }
  .product--wrapper .product--pricing {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  /* Enroll button container: reduce gap below button */
  .product--wrapper .product-checkout-buttons {
    padding-bottom: 6px !important;
  }

  /* Shipping text below Enroll button: tighten */
  .product--wrapper .product--custom-content {
    padding-bottom: 6px !important;
  }

  /* THE EXPERIMENT divider: reduce gap above hr */
  .product-info-details > .product--custom-liquid hr:first-child {
    margin-top: 8px !important;
  }
}

/* ==========================================
   PRODUCT PAGE: DESKTOP ABOVE-THE-FOLD FIX
   On desktop the 1:1 image ratio pushes the overlay text,
   navigation arrows, and bottom of the image below the fold.
   Reduce vertical gaps and cap image height on desktop so
   all key elements are visible without scrolling.
   ========================================== */

@media (min-width: 750px) {
  /* Breadcrumb: reduce gap below sticky header.
     Header is ~70px; 72px clears it with minimal breathing room. */
  .custom-codex-breadcrumb {
    margin-top: 72px !important;
  }

  /* Breadcrumb section bottom padding: zero out on desktop */
  .shopify-section.breadcrumb .section-wrapper.section-spacing {
    padding-bottom: 0 !important;
  }

  /* Cap the image container height so overlay/arrows stay above the fold.
     The theme uses padding-bottom: var(--image_ratio) for the aspect ratio
     hack, so max-height cannot constrain it. Instead, override padding-bottom
     directly with min() — use the smaller of 80% (reduced ratio) or a
     viewport-relative cap. The 190px accounts for sticky header (~70px),
     breadcrumb (~30px), overlay text + arrows below the image (~90px). */
  .my-main-images-text-settings {
    padding-bottom: min(80%, calc(100vh - 190px)) !important;
  }
}

/* Desktop: center overlay text within the image column only (not across thumbnails) */
@media (min-width: 750px) {
  .product-image-overlay {
    width: 80% !important;
    left: 0 !important;
    right: auto !important;
    text-align: center !important;
    bottom: 10px !important;
  }
}

/* ==========================================
   VIDEO SECTION: TEXT/BUTTON SPACING + CENTERING
   Journey overlay text too far from button, not fully centered.
   ========================================== */

/* Ensure video overlay content is centered */
.section-video .video--content-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Tighten gap between heading/text and button */
.section-video .video--content-inner > * {
  margin-top: 0;
  margin-bottom: 0;
}

.section-video .video--content-inner h2,
.section-video .video--content-inner h3,
.section-video .video--content-inner .heading {
  margin-bottom: 4px;
}

.section-video .video--content-inner .video--desc,
.section-video .video--content-inner p {
  margin-bottom: 8px;
}

/* On mobile, reduce padding and keep content tight */
@media (max-width: 767px) {
  .section-video .video--content-inner {
    gap: 4px;
    padding: 0 15px;
  }
}

/* ═══════════════════════════════════════════════
   7. JOIN PAGE — The Experiment Video Journey
   ═══════════════════════════════════════════════ */

:root {
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.4);
  --text-color: #eeeeee;
}

/* ── Master Container ── */
#join-master-container {
  width: 100%;
  height: 55vh;
  background: #141414;
  position: relative;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  padding: 0;
  margin: 0 auto;
}
@media (min-width: 768px) {
  #join-master-container {
    height: 100vh;
    max-height: 800px;
  }
}

/* ── Video Wrapper ── */
.join-video-wrapper {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: none; z-index: 1;
}
.join-video-wrapper.active { display: block; z-index: 7; }

.join-video-wrapper:fullscreen {
  width: 100vw; height: 100vh;
  background: #141414; display: flex;
  justify-content: center; align-items: center;
}

/* ── Video Element ── */
.join-video {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block; border: none;
  margin: 0 auto !important; padding: 0 !important;
  max-width: none !important;
  background: #141414;
}
.join-video-wrapper:not(.active) .join-video { opacity: 0; }
.join-video-wrapper.active .join-video { opacity: 1; transition: opacity 0.3s ease; }

/* ── Tap Zones ── */
.join-tap-zones {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; z-index: 10;
  pointer-events: none;
}
.join-tap-zone {
  flex: 1; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.join-tap-zone--center { flex: 2; }

/* ── Sound Toggle (Step 1) ── */
.join-text-row {
  display: flex; align-items: flex-end;
  justify-content: center; gap: 6px;
  margin-bottom: 16px;
  font-family: "Magda Clean", Arial, sans-serif;
}
.join-text-with-icon {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.join-divider { opacity: 0.6; }

.join-sound-toggle-btn {
  width: 28px; height: 28px;
  background: transparent; border: none;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  z-index: 250; transition: all 0.3s ease;
  padding: 0;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.9));
  outline: none; -webkit-tap-highlight-color: transparent;
}
.join-sound-toggle-btn:focus,
.join-sound-toggle-btn:active,
.join-sound-toggle-btn:hover {
  outline: none; box-shadow: none; background: transparent;
}
.join-sound-toggle-btn svg {
  width: 16px; height: 16px;
  stroke: rgba(238, 238, 238, 0.9);
  stroke-width: 1.5; fill: none;
}
.join-sound-toggle-btn .sound-on { display: none; }
.join-sound-toggle-btn .sound-off { display: block; }
.join-sound-toggle-btn.unmuted .sound-on { display: block; }
.join-sound-toggle-btn.unmuted .sound-off { display: none; }

@media (max-width: 768px) {
  .join-text-row { gap: 5px; }
  .join-sound-toggle-btn { width: 24px; height: 24px; }
  .join-sound-toggle-btn svg { width: 14px; height: 14px; }
}

/* ── Mute Button (in-video) ── */
.join-mute-btn {
  position: absolute; bottom: 20px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: none; border-radius: 50%;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.join-mute-btn.visible { opacity: 1; pointer-events: auto; }
.join-mute-btn svg { width: 24px; height: 24px; fill: white; }
.join-mute-btn .icon-muted { display: none; }
.join-video-wrapper.muted .join-mute-btn .icon-unmuted { display: none; }
.join-video-wrapper.muted .join-mute-btn .icon-muted { display: block; }

/* ── Overlay (bottom of video) ── */
.join-overlay {
  position: absolute; bottom: 0; left: 0;
  width: 100%; padding: 20px 20px 40px 20px;
  background: transparent; display: flex;
  flex-direction: column; align-items: center;
  justify-content: flex-end; z-index: 200;
  text-align: center; line-height: normal; font-size: 16px;
  opacity: 1; transition: opacity 0.5s ease; pointer-events: none;
}
.fade-hidden { opacity: 0 !important; pointer-events: none !important; }
.join-overlay > * { pointer-events: auto; }

/* ── Text ── */
.join-text {
  margin-bottom: 15px; font-size: 13px;
  letter-spacing: 0.5px; font-weight: normal;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  color: var(--text-color); line-height: 1.4;
}

/* ── Inputs ── */
.join-input {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: #000000; font-size: 12px; font-weight: normal;
  padding: 0 20px; width: 100%; max-width: 310px;
  margin-bottom: 12px; backdrop-filter: blur(5px);
  text-align: center; border-radius: 50px; height: 44px;
  min-height: 44px; max-height: 44px;
  box-sizing: border-box; transition: background-color 0.3s ease;
  -webkit-appearance: none; appearance: none;
}
.join-input::placeholder { color: #eeeeee; opacity: 1; font-size: 12px; }
.join-input:focus { outline: none; background: rgba(255,255,255,0.4); }
.join-input:not(:placeholder-shown) { background-color: #ffffff; }

/* ── Buttons ── */
.join-btn {
  background: rgba(255, 255, 255, 0.9); color: black;
  border: none; font-weight: normal; text-transform: none;
  font-size: 12px; cursor: pointer; letter-spacing: 1px;
  max-width: 310px; width: 100%; border-radius: 50px;
  transition: transform 0.2s; height: 44px;
  box-sizing: border-box; padding: 0 20px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1;
}
.join-btn:active { transform: scale(0.98); }

.join-btn--secondary {
  background: #141414;
  color: rgba(238, 238, 238, 0.5);
  border: 1px solid rgba(238, 238, 238, 0.3);
  margin-top: 8px;
}

.join-btn--half {
  max-width: 148px;
  width: 48%;
}

.join-btn-row {
  display: flex;
  gap: 14px;
  max-width: 310px;
  width: 100%;
  justify-content: center;
}

/* ── Disclaimer ── */
.join-disclaimer {
  max-width: 310px; width: 100%;
  margin-top: 12px; padding: 0 10px;
  box-sizing: border-box;
}
.join-disclaimer p {
  font-size: 10px; line-height: 1.4;
  color: rgba(238, 238, 238, 0.75);
  text-align: center; margin: 0;
}

/* ── Radio Options (Step 6) ── */
.join-radio-group {
  max-width: 310px; width: 100%;
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 16px;
}
.join-radio-option {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  text-align: left;
}
.join-radio-option.selected {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
}
.join-radio-option input[type="radio"] {
  display: none;
}
.join-radio-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}
.join-radio-desc {
  font-size: 10px;
  color: rgba(238, 238, 238, 0.7);
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* ── Pause/End Overlay ── */
.join-pause-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center;
  justify-content: center; gap: 40px;
  z-index: 150; background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.join-video-wrapper.paused .join-pause-overlay { opacity: 1; pointer-events: auto; }
.join-video-wrapper.video-ended .join-pause-overlay { opacity: 1; pointer-events: auto; }

.join-pause-btn {
  width: 48px; height: 48px;
  background: rgba(0, 0, 0, 0.5);
  border: none; border-radius: 50%;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.join-pause-btn:active { transform: scale(0.9); }
.join-pause-btn svg { width: 24px; height: 24px; fill: white; }
.join-pause-btn--play { width: 64px; height: 64px; }
.join-pause-btn--play svg { width: 32px; height: 32px; }
.join-pause-btn--skip { flex-direction: column; gap: 2px; }
.join-pause-btn--skip svg { width: 20px; height: 20px; }
.join-pause-btn-label { font-size: 10px; font-weight: 600; color: white; line-height: 1; }

@media (max-width: 768px) {
  .join-pause-overlay { gap: 30px; }
  .join-pause-btn { width: 40px; height: 40px; }
  .join-pause-btn svg { width: 20px; height: 20px; }
  .join-pause-btn--play { width: 56px; height: 56px; }
  .join-pause-btn--play svg { width: 28px; height: 28px; }
  .join-pause-btn--skip svg { width: 16px; height: 16px; }
  .join-pause-btn-label { font-size: 9px; }
}

/* ── Form Parts ── */
.join-form-part {
  width: 100%; max-width: 310px;
  display: flex; flex-direction: column;
  align-items: center;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Intro Section (above video) — matches home page study-on-perception ── */
.join-intro {
  background: #141414;
  color: var(--text-color);
  padding: 30px 20px 0;
  text-align: center;
}
.join-intro-header-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join-intro-rule {
  width: 309px;
  max-width: 80%;
  height: 1px;
  background: #eeeeee;
}
.join-intro-rule.is-top {
  margin: 5px 0 24px;
}
.join-intro-rule.is-bottom {
  margin: 5px 0 0;
}
.join-intro-title {
  font-family: "Avenir Next", Arial, sans-serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #eeeeee;
  line-height: 1;
  margin: 0 0 24px;
}
.join-intro-label {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #eeeeee;
  line-height: 21px;
  margin: 24px 0 12px;
  text-decoration: none;
}
.join-intro-heading {
  font-family: "Avenir Next", Arial, sans-serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #eeeeee;
  line-height: 1;
  margin: 0 0 24px;
}
.join-intro-body {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  line-height: 21px;
  color: #eeeeee;
  max-width: 380px;
  margin: 24px auto 0;
}

/* ── Terms Section (static justified) ── */
.join-terms {
  background: #141414;
  padding: 20px 20px 30px;
  max-width: 400px;
  margin: 0 auto;
}
.join-terms-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(238, 238, 238, 0.5);
  margin: 0 0 8px;
  text-align: center;
}
.join-terms-line {
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 16px;
}
.join-terms-body {
  text-align: justify;
}
.join-terms-body p {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(238, 238, 238, 0.45);
  margin: 0 0 6px;
  letter-spacing: 0.3px;
}
.join-terms-divider {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px auto;
}

/* ── Gradient Overlay (vignette from enclave) ── */
.join-gradient-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
  background:
    linear-gradient(to bottom, #141414 0%, rgba(20,20,20,0.85) 3%, rgba(20,20,20,0.5) 8%, rgba(20,20,20,0.2) 15%, transparent 25%),
    linear-gradient(to top, rgba(20,20,20,0.65) 0%, rgba(20,20,20,0.45) 10%, rgba(20,20,20,0.25) 18%, rgba(20,20,20,0.1) 26%, transparent 35%),
    radial-gradient(ellipse farthest-side at 50% 48%, transparent 0%, transparent 38%, rgba(20,20,20,0.02) 42%, rgba(20,20,20,0.06) 48%, rgba(20,20,20,0.15) 54%, rgba(20,20,20,0.3) 60%, rgba(20,20,20,0.5) 66%, rgba(20,20,20,0.72) 74%, rgba(20,20,20,0.88) 84%, #141414 96%);
}

/* ── Share Link (Step 6) ── */
.join-share-link {
  color: rgba(238, 238, 238, 0.5);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.join-share-link:hover { color: var(--text-color); }

/* ── Returning Participant Link (Step 1) ── */
.join-returning-link {
  color: rgba(238, 238, 238, 0.5);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  padding: 8px;
  background: none;
  border: none;
  display: block;
  text-align: center;
  transition: color 0.3s ease;
}
.join-returning-link:hover { color: var(--text-color); }

/* ==========================================
   TESTIMONIAL SECTION — Hide star ratings
   Stars min is 1 in schema, so hide them entirely
   ========================================== */
.testimonial--rating { display: none !important; }

/* ==========================================
   RESULTS VIDEO — Play button left-aligned + "preview" label
   Aligns play button to same left edge as Results heading below
   ========================================== */

/* Desktop: override theme centering (video.liquid lines 257-275) */
@media (min-width: 768px) {
  [id*="video_K8Xyxy"] .video--content-wrapper .video--content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-left: 15% !important;
    bottom: 15px !important;
  }
  [id*="video_K8Xyxy"] .video--content-wrapper .video--content-button {
    text-align: left !important;
  }
  [id*="video_K8Xyxy"] .video--content-wrapper .video--content-inner {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}

/* Mobile: match Results section padding */
@media (max-width: 767px) {
  [id*="video_K8Xyxy"] .video--content-wrapper .video--content {
    padding-left: 5% !important;
  }
}

/* "preview" label inside play button circle, below triangle */
[id*="video_K8Xyxy"] .video-play-button {
  flex-direction: column !important;
  gap: 1px !important;
}
/* NOTE: ::after rule moved to line ~4455 with Magda Clean font */

/* ==========================================
   PRODUCT SLIDER — Homepage collection slider
   3 cards desktop, 1.5 cards mobile with Enrolled overlay
   ========================================== */

/* Card link reset */
.product-slider--card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image wrapper — relative for overlay positioning */
.product-slider--image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 3 / 4;
  background: #0a0a0a;
}

.product-slider--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Enrolled overlay */
.product-slider--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
}

.product-slider--overlay-text {
  font-family: var(--body_font_family);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.9;
}

/* Product info below image */
.product-slider--info {
  padding: 10px 0 0;
}

.product-slider--title {
  font-family: var(--body_font_family);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin: 0 0 2px;
  text-transform: uppercase;
  color: inherit;
}

.product-slider--price {
  font-family: var(--body_font_family);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin: 0;
  opacity: 0.7;
  color: inherit;
}

/* CTA button below slider */
.product-slider--cta {
  text-align: center;
  margin-top: 24px;
}

/* Swiper scrollbar styling */
.section-product-slider .swiper-scrollbar {
  margin-top: 20px;
}

/* Responsive: ensure 1.5 cards show on mobile with peek */
@media only screen and (max-width: 767px) {
  .product-slider--info {
    padding: 8px 0 0;
  }

  .product-slider--title {
    font-size: 11px;
  }

  .product-slider--price {
    font-size: 11px;
  }

  .product-slider--cta {
    margin-top: 20px;
  }
}

/* ==========================================
   RESULTS SLIDER — Horizontal carousel for Results section
   Hero video first card, result videos/images as remaining cards
   ========================================== */

/* Header */
.results-slider--header {
  padding: 0 15px 12px;
}
.results-slider--header .section--heading {
  font-size: 18px;
  margin-bottom: 4px;
}
.results-slider--header .section--description {
  margin: 0;
  opacity: 0.7;
}

/* Slider container */
.section-results-slider .swiper {
  overflow: visible;
}
.section-results-slider .swiper-wrapper {
  align-items: stretch;
}

/* Slide */
.results-slider--slide {
  height: auto;
}

/* Card */
.results-slider--card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #141414;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Media container — consistent height */
.results-slider--media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  flex-shrink: 0;
}

/* All video/image wrappers fill the media container */
.results-slider--video-wrapper,
.results-slider--loop-video,
.results-slider--image,
.results-slider--link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.results-slider--link {
  display: block;
  text-decoration: none;
}

/* Videos and images fill their container */
.results-slider--video-wrapper video,
.results-slider--loop-video video,
.results-slider--image img,
.results-slider--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero video: cover image overlay */
.results-slider--cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/* Hidden video element before play */
.results-slider--video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* When playing, video is visible */
.results-slider--video-wrapper.is-playing .results-slider--video {
  display: block;
}

/* Play button */
.results-slider--play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.results-slider--play-btn:hover {
  opacity: 0.8;
}
.results-slider--play-btn svg {
  width: 10px;
  height: 12px;
  margin-left: 2px;
}
.results-slider--play-btn::after {
  content: "preview";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: var(--body_font_family);
  line-height: 1;
  white-space: nowrap;
}

/* Label overlay at bottom of card */
.results-slider--label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
}
.results-slider--label-text {
  font-size: 13px;
  color: #ffffff;
  font-family: var(--body_font_family);
  letter-spacing: 0.5px;
}

/* Scrollbar */
.section-results-slider .swiper-scrollbar {
  margin-top: 12px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 0;
}
.section-results-slider .swiper-scrollbar-drag {
  background: rgba(255,255,255,0.5);
  border-radius: 0;
}

/* Responsive */
@media only screen and (min-width: 768px) {
  .results-slider--header {
    padding: 0 20px 16px;
  }
  .results-slider--media {
    aspect-ratio: 9 / 13;
  }
}

@media only screen and (min-width: 1025px) {
  .results-slider--header {
    padding: 0 30px 20px;
  }
}

/* ========================================
   Rule T1: Testimonial Slider — Round Circle Arrows
   Match Results Slider: 32px circles, 16px SVG chevrons
   ======================================== */
.section-testimonial .swiper-button-prev,
.section-testimonial .swiper-button-next {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.7) !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.section-testimonial .swiper-button-prev:hover,
.section-testimonial .swiper-button-next:hover {
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
  background: transparent !important;
}

/* Hide theme default ::after icon — SVG is the icon source */
.section-testimonial .swiper-button-prev::after,
.section-testimonial .swiper-button-next::after {
  display: none !important;
}

.section-testimonial .swiper-button-prev svg,
.section-testimonial .swiper-button-next svg {
  width: 16px !important;
  height: 16px !important;
}

/* ========================================
   Rule T2: Testimonial — Remove white line, reduce spacing, add pagination dots
   ======================================== */
.section-testimonial .testimonial--item-header {
  border-bottom: none !important;
}
.section-testimonial .section-spacing {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.section-testimonial .swiper-scrollbar {
  background: rgba(255, 255, 255, 0.15);
  height: 2px;
  border-radius: 2px;
  margin-top: 12px;
}
.section-testimonial .swiper-scrollbar-drag {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

/* ========================================
   Rule T3: Testimonial overhaul — arrows below centered, quote color, swipe
   ======================================== */

/* Arrow container: centered below testimonials (both mobile + desktop) */
.section-testimonial .testimonial--nav-below {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 0;
}
.tm-prev,
.tm-next {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
.tm-prev:hover,
.tm-next:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
.tm-prev.swiper-button-disabled,
.tm-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* Remove white border-bottom line on mobile */
@media (max-width: 767px) {
  .section-testimonial .testimonial--item-header {
    border-bottom: none !important;
  }
  .section-testimonial .section-spacing {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Remove extra spacing */
.section-testimonial .testimonial--content {
  padding-bottom: 0 !important;
}

/* Quote icon: hidden entirely */
.section-testimonial .quote--icon {
  display: none !important;
}

/* Author/profile images: hidden entirely */
.section-testimonial .author--image {
  display: none !important;
}

/* Rule T4: Remove white line below testimonial section + section gaps */
.section-testimonial .section-wrapper,
.section-testimonial {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.section-testimonial {
  margin-bottom: -1px;
}
/* Kill borders on the Shopify section wrapper and all adjacent sections */
[id*="testimonial_y3LVeW"],
[id*="testimonial_y3LVeW"] + section,
[id*="custom_liquid_yrwqxU"],
[id*="custom_liquid_HMwQHr"] {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
}
/* Close gap between all homepage sections — prevent subpixel white lines */
#MainContent > section {
  border: none !important;
  outline: none !important;
}

/* ========================================
   Rule SCROLL1: Fix gradient overlay flash on scroll
   Slideshow images/videos and their ::after overlays desync during
   GPU compositing on scroll, briefly exposing the raw image edge.
   Fix: promote each slide to its own compositing layer so overlay
   and media paint together. Also extend media 1px to cover subpixel gaps.
   ======================================== */
.section-slideshow .slideshow--item {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.section-slideshow .media-wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  isolation: isolate;
}

.section-slideshow .slideshow--outer {
  contain: paint;
}

/* Prevent subpixel gap at section boundaries during scroll */
.section-slideshow .media img,
.section-slideshow .media video {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure overlay stays locked to its media container */
.section-slideshow .media-overlay:after,
.section-slideshow .media::before,
.section-slideshow .media::after {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* GPU promote images and videos within slides */
.section-slideshow .slideshow--item img,
.section-slideshow .slideshow--item video {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Promote the media container itself */
.section-slideshow .media {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Cover subpixel gaps at section boundaries */
.section-slideshow {
  margin-bottom: -1px;
  contain: paint;
}

/* Study on Perception (slideshow_36tknJ): top-edge fade to mask
   compositing desync between ::before gradient overlay and image.
   Mirrors the bottom ::after fade pattern from slideshow.css. */
.section-slideshow[id$="slideshow_36tknJ"] .section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, #141414 0%, rgba(20, 20, 20, 0.6) 40%, transparent 100%);
  pointer-events: none;
  z-index: 100;
}

/* ========================================
   HERO SLIDESHOW (slideshow_khbkg8) — mobile overrides
   Moved from custom_css to stay under 500 char limit
   ======================================== */
/* Mobile + tablet hero text sizing — responsive override for ≤767px
   Uses !important to beat section inline CSS.
   h1 font-size: section's !important was REMOVED from index.json custom_css
   so this !important can win at lower specificity.
   Uses clamp() so sizes scale smoothly from 320px to 767px viewports. */
@media (max-width: 767px) {
  /* THE RADICAL */
  [id*="slideshow_khbkg8"] p {
    font-size: clamp(4px, 1.3vw, 8px) !important;
    letter-spacing: 3.0px !important;
    line-height: 4 !important;
    margin-bottom: 2px !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* ROSE COLORED GLASSES */
  [id*="slideshow_khbkg8"] h1 {
    font-size: clamp(6px, 2vw, 12px) !important;
    letter-spacing: 3.5px !important;
    line-height: 0.53 !important;
    margin-bottom: 0 !important;
    color: #ffffff !important;
  }

  /* EXPERIMENT */
  [id*="slideshow_khbkg8"] h3 {
    font-size: clamp(16px, 5.2vw, 31px) !important;
    letter-spacing: clamp(9px, 2.9vw, 18px) !important;
    line-height: 1.35 !important;
    margin-top: -8px !important;
    padding-top: 0 !important;
  }

  /* Button */
  [id*="slideshow_khbkg8"] .button {
    margin-top: 8px !important;
    margin-bottom: 7px !important;
  }

  /* Content position */
  [id*="slideshow_khbkg8"] .slideshow--content {
    bottom: 1.50rem !important;
  }
}

/* Desktop: cap hero height so enrolled counter stays above the fold */
@media (min-width: 768px) {
  [id*="slideshow_khbkg8"] {
    --media_height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
  }
}

/* Remove white line below acknowledgements on mobile */
@media (max-width: 767px) {
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body hr,
  [id*="slideshow_dAtg3D"] .slideshow--content hr {
    border-color: transparent !important;
  }
}

/* ==========================================
   HOMEPAGE PRODUCT GRID — corner + badge fixes
   ========================================== */

/* Remove rounded corners on homepage product cards + GPU compositing to prevent gradient flash */
.featured-collection--wrapper .product--card-image,
.featured-collection--wrapper .product--card-inner,
.featured-collection--wrapper .product--card-image .media {
  border-radius: 0 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ENROLLED badge: top-center, rounded corners — homepage + collection */
.featured-collection--wrapper .product--card-badges {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: auto;
  z-index: 3;
}
.featured-collection--wrapper .product--card-badges .product--badge {
  border-radius: 4px;
}

/* Enrolled card image — 0.85 opacity, reserved at gallery feel (not greyed out) */
.featured-collection--wrapper .product--card-inner:has(.product--badge.sold-out) .product--card-image img,
.featured-collection--wrapper .product--card-inner:has(.product--badge.sold-out) .product--card-image .media img {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* ENROLLED badge — prestigious styling */
.featured-collection--wrapper .product--badge.sold-out,
.main-collection--products-list .product--badge.sold-out {
  font-family: var(--body_font_family);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 400;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  border-radius: 4px;
}

/* Mobile: ENROLLED badge, product title, price, slide body text sizing */
@media (max-width: 767px) {
  .featured-collection--wrapper .product--badge.sold-out,
  .main-collection--products-list .product--badge.sold-out {
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px 7px;
    border-radius: 3px;
  }

  /* Product number (#001) — reduce from 15px */
  .collection-2025-drop .product--title,
  .main-collection--products-list .product--title {
    font-size: 12px !important;
  }

  /* Product price — aggressively reduced for mobile */
  .collection-2025-drop .product--card-detail-content .product--pricing .product--actual-price {
    font-size: 5px !important;
  }

  /* Slide body text — match home page (12px) */
  [id*="slideshow_dAtg3D"] .slideshow--desc p,
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body p,
  [id*="slideshow_pWNbLd"] .slideshow--desc p,
  [id*="slideshow_pWNbLd"] .slideshow-content-below-body p,
  [id*="slideshow_T6LjFb"] .slideshow--desc p,
  [id*="slideshow_T6LjFb"] .slideshow-content-below-body p,
  [id*="slideshow_nqtPJ9"] .slideshow--desc p,
  [id*="slideshow_nqtPJ9"] .slideshow-content-below-body p,
  [id*="slideshow_ctDVyX"] .slideshow--desc p,
  [id*="slideshow_ctDVyX"] .slideshow-content-below-body p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Slide headings on mobile */
  [id*="slideshow_dAtg3D"] h6,
  [id*="slideshow_pWNbLd"] h6,
  [id*="slideshow_T6LjFb"] h6,
  [id*="slideshow_nqtPJ9"] h6,
  [id*="slideshow_ctDVyX"] h6 {
    font-size: 16px !important;
  }
}

/* Enrolled card image — 0.85 opacity on collection page (matches homepage) */
.main-collection--products-list .product--card-inner:has(.product--badge.sold-out) .product--card-image img,
.main-collection--products-list .product--card-inner:has(.product--badge.sold-out) .product--card-image .media img {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* Fix hover/second image on available products */
.featured-collection--wrapper .product-second-img {
  border-radius: 0 !important;
}

/* Reduce spacing between price and bottom of product card */
.featured-collection--wrapper .product--card-detail {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.featured-collection--wrapper .product--pricing {
  margin-bottom: 0 !important;
}

/* ==========================================
   HOMEPAGE RESULTS SLIDER (.rs-wrap)
   ========================================== */

/* Rounded corners on slider cards */
.rs-card {
  border-radius: 0;
  overflow: hidden;
}

/* Fix visible outline/border around video blocks */
.rs-wrap .rs-card,
.rs-wrap .product--card-image .media,
.rs-wrap .product--card-image video,
.rs-wrap .swiper-slide {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* GPU layer promotion on swiper slides — prevents sub-pixel border flash during transitions */
.rs-wrap .swiper-slide {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rs-wrap video {
  display: block;
  border: none;
  outline: none;
}
.rs-wrap .product--card-inner {
  border: none !important;
  outline: none !important;
}

/* 1:1 aspect ratio + square corners + position context for gradient overlay */
.rs-wrap .product--card-image {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}

/* Results slider gradient — wider vignette to match product card visual weight */
.rs-wrap .product--card-image::after {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    radial-gradient(
      ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(20, 20, 20, 0.02) 50%,
      rgba(20, 20, 20, 0.06) 55%,
      rgba(20, 20, 20, 0.14) 60%,
      rgba(20, 20, 20, 0.28) 66%,
      rgba(20, 20, 20, 0.46) 72%,
      rgba(20, 20, 20, 0.68) 80%,
      rgba(20, 20, 20, 0.88) 88%,
      #141414 93%
    );
  pointer-events: none;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Results slider gradient — mobile: wider vignette to match product card visual weight */
@media (max-width: 767px) {
  .rs-wrap .product--card-image::after {
    background:
      linear-gradient(to bottom,
        #141414 0%,
        rgba(20, 20, 20, 0.85) 3%,
        rgba(20, 20, 20, 0.5) 8%,
        rgba(20, 20, 20, 0.2) 15%,
        transparent 25%
      ),
      linear-gradient(to top,
        rgba(20, 20, 20, 0.35) 0%,
        rgba(20, 20, 20, 0.15) 12%,
        transparent 25%
      ),
      radial-gradient(
        ellipse farthest-side at 50% 50%,
        transparent 0%,
        transparent 35%,
        rgba(20, 20, 20, 0.02) 40%,
        rgba(20, 20, 20, 0.06) 45%,
        rgba(20, 20, 20, 0.14) 50%,
        rgba(20, 20, 20, 0.28) 56%,
        rgba(20, 20, 20, 0.46) 62%,
        rgba(20, 20, 20, 0.68) 70%,
        rgba(20, 20, 20, 0.88) 78%,
        #141414 85%
      );
  }
}

/* Pull overlay UP over the video bottom, above gradient */
.rs-wrap .product-card-overlay-bottom {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  padding: 0 12px 8px;
  background-color: transparent;
  color: #eeeeee;
  text-align: center;
}

.rs-wrap .product-number-from-title {
  font-family: "Magda Clean", var(--body_font_family), Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.8px;
  color: #eeeeee;
  margin: 0;
}


/* Navigation arrows — centered on page, all devices */
.rs-nav-arrows {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
}
.rs-prev,
.rs-next {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
.rs-prev:hover,
.rs-next:hover {
  border-color: rgba(255,255,255,0.7);
  color: #ffffff;
}
.rs-prev.swiper-button-disabled,
.rs-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* GPU compositing on slider videos to prevent gradient flash during scroll */
.rs-wrap video {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rs-wrap {
  contain: paint;
  position: relative;
}

/* Hide Swiper scrollbar track inside results slider — prevents white line between videos and nav arrows */
.rs-wrap .swiper-scrollbar,
.rs-wrap .rs-sb {
  display: none !important;
}

/* Left/right gradient overlays REMOVED — show product cleanly */
/* .rs-wrap::before,
.rs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 10;
  pointer-events: none;
}
.rs-wrap::before {
  left: 0;
  background: linear-gradient(to right, #141414 0%, rgba(20,20,20,0.6) 50%, transparent 100%);
}
.rs-wrap::after {
  right: 0;
  background: linear-gradient(to left, #141414 0%, rgba(20,20,20,0.6) 50%, transparent 100%);
} */

/* ==========================================
   SECTION HEADER CONSISTENCY
   All homepage content sections use Avenir Next, left-aligned:
   h6 strong header → animated-line → body text
   Sections: Share Your Hypothesis, Steps to Participate,
   Now Enrolling (+ Color/Lenses slides), Acknowledgements, Testimonials
   ========================================== */

/* Normalize heading: Avenir Next, bold, 18px — matches Now Enrolling h6 strong */
/* Share Your Hypothesis = custom_liquid_dh7K8m (old share_hypothesis selector was non-functional) */
[id*="custom_liquid_dh7K8m"] .section--heading,
[id*="custom_liquid_dh7K8m"] h6,
[id*="custom_liquid_dh7K8m"] h6 strong,
[id*="slideshow_dAtg3D"] h6,
[id*="slideshow_dAtg3D"] h6 strong,
[id*="slideshow_pWNbLd"] h6,
[id*="slideshow_pWNbLd"] h6 strong,
[id*="slideshow_T6LjFb"] h6,
[id*="slideshow_T6LjFb"] h6 strong,
[id*="slideshow_nqtPJ9"] h6,
[id*="slideshow_nqtPJ9"] h6 strong,
[id*="slideshow_ctDVyX"] h6,
[id*="slideshow_ctDVyX"] h6 strong,
.section-testimonial .section--heading {
  font-family: "Avenir Next", "Avenir Next W01", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: left !important;
  margin-bottom: 2px !important;
}

/* Acknowledgements — center heading + body text (overrides left-align from block above) */
[id*="slideshow_dAtg3D"] h6,
[id*="slideshow_dAtg3D"] h6 strong {
  text-align: center !important;
}
[id*="slideshow_dAtg3D"] .slideshow--desc p,
[id*="slideshow_dAtg3D"] .slideshow-content-below-body p {
  text-align: center !important;
}

/* "Share Your Hypothesis" — match home page heading size on mobile */
@media (max-width: 767px) {
  [id*="custom_liquid_dh7K8m"] .section--heading,
  [id*="custom_liquid_dh7K8m"] h6,
  [id*="custom_liquid_dh7K8m"] h6 strong {
    font-size: 12px !important;
  }
}

/* Consistent animated-line spacing after header — tight gap, match Now Enrolling */
[id*="custom_liquid_dh7K8m"] .animated-line,
[id*="slideshow_dAtg3D"] .animated-line,
[id*="slideshow_pWNbLd"] .animated-line,
[id*="slideshow_T6LjFb"] .animated-line,
[id*="slideshow_nqtPJ9"] .animated-line,
[id*="slideshow_ctDVyX"] .animated-line {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* Body text: left-aligned, consistent spacing below line (excl. Acknowledgements — centered) */
[id*="custom_liquid_dh7K8m"] .slideshow--desc p,
[id*="custom_liquid_dh7K8m"] .section--description,
[id*="slideshow_pWNbLd"] .slideshow--desc p,
[id*="slideshow_pWNbLd"] .slideshow-content-below-body p,
[id*="slideshow_T6LjFb"] .slideshow--desc p,
[id*="slideshow_T6LjFb"] .slideshow-content-below-body p,
[id*="slideshow_nqtPJ9"] .slideshow--desc p,
[id*="slideshow_nqtPJ9"] .slideshow-content-below-body p,
[id*="slideshow_ctDVyX"] .slideshow--desc p,
[id*="slideshow_ctDVyX"] .slideshow-content-below-body p {
  text-align: left !important;
  margin-top: 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
/* Acknowledgements body text: centered, keep same sizing */
[id*="slideshow_dAtg3D"] .slideshow--desc p,
[id*="slideshow_dAtg3D"] .slideshow-content-below-body p {
  text-align: center !important;
  margin-top: 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Share Your Hypothesis — reduce top spacing to match Results section */
[id*="custom_liquid_dh7K8m"] .section-spacing {
  padding-top: 10px !important;
}

/* Share Your Hypothesis — centered layout: fit-content container + full-width line
   Container shrinks to header text width, line spans 100% of that container.
   Mimics study-on-perception pattern where line matches header width. */
[id*="custom_liquid_dh7K8m"] .custom-liquid--content {
  width: fit-content !important;
  margin: 0 auto !important;
  text-align: center !important;
}
[id*="custom_liquid_dh7K8m"] h6,
[id*="custom_liquid_dh7K8m"] h6 strong {
  text-align: center !important;
}
[id*="custom_liquid_dh7K8m"] p {
  text-align: center !important;
}
[id*="custom_liquid_dh7K8m"] .animated-line {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Acknowledgements — centered line below header text, width matches body text */
[id*="slideshow_dAtg3D"] .animated-line {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: none !important;
  width: 100% !important;
}

/* Body text closer to the animated line — all content sections */
[id*="custom_liquid_dh7K8m"] .slideshow--desc p,
[id*="custom_liquid_dh7K8m"] .section--description,
[id*="slideshow_dAtg3D"] .slideshow-content-below-body,
[id*="slideshow_pWNbLd"] .slideshow-content-below-body,
[id*="slideshow_T6LjFb"] .slideshow-content-below-body,
[id*="slideshow_nqtPJ9"] .slideshow-content-below-body,
[id*="slideshow_ctDVyX"] .slideshow-content-below-body {
  margin-top: 0 !important;
}

/* (Duplicate Share Your Hypothesis animated-line rule removed — consolidated above) */

/* RESULTS VIDEO — play button and content styling */
[id*="video_K8Xyxy"] .video--content {
  bottom: 15px !important;
}
[id*="video_K8Xyxy"] p {
  margin-top: 0px;
}
[id*="video_K8Xyxy"] h6 {
  line-height: 15px;
  margin-top: -15px;
  font-size: 18px;
}
[id*="video_K8Xyxy"] .video-play-button {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
[id*="video_K8Xyxy"] .video-play-button > svg {
  width: 16px !important;
  height: 18px !important;
}
[id*="video_K8Xyxy"] .video-play-text {
  display: none !important;
}
[id*="video_K8Xyxy"] .video--content-button {
  padding-bottom: 10px !important;
}
[id*="video_K8Xyxy"] .video-play-button::after {
  content: 'Preview' !important;
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-transform: none !important;
  margin-top: 2px !important;
}
/* Mute button — centered bottom */
[id*="video_K8Xyxy"] .video-mute-btn {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 20px !important;
}
/* Pause indicator — match play button style (triangle + Preview label) */
[id*="video_K8Xyxy"] .video-play-indicator {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
[id*="video_K8Xyxy"] .video-play-indicator > svg {
  width: 30px !important;
  height: 20px !important;
}
[id*="video_K8Xyxy"] .video-play-indicator > svg polygon,
[id*="video_K8Xyxy"] .video-play-indicator > svg path {
  fill: #ffffff !important;
}
[id*="video_K8Xyxy"] .video-play-indicator::after {
  content: "Preview" !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  font-family: "Magda Clean", Arial, sans-serif !important;
  line-height: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-transform: none !important;
  margin-top: 2px !important;
}
/* Results video — ensure Magda Clean font on heading/description text */
[id*="video_K8Xyxy"] .video--content-wrapper * {
  font-family: "Magda Clean", Arial, sans-serif !important;
}

/* KNOWN / UNKNOWN — animated underlines below titles and above footer notes */
[id*="media_grid_Lj3L3Y"] .animated-line {
  max-width: 130px !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
@media (max-width: 767px) {
  [id*="media_grid_Lj3L3Y"] .animated-line {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

/* KNOWN / UNKNOWN — crop background video to fill, hide overflow */
[id*="media_grid_eXVXBn"] .media-grid--video .media,
[id*="media_grid_eXVXBn"] .media-grid--video .media video,
[id*="media_grid_Lj3L3Y"] .media-grid--video .media,
[id*="media_grid_Lj3L3Y"] .media-grid--video .media video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  max-width: none !important;
}
[id*="media_grid_eXVXBn"] .media-grid--video,
[id*="media_grid_Lj3L3Y"] .media-grid--video {
  overflow: hidden !important;
  position: relative !important;
}

/* ==========================================
   SLIDESHOW CONTENT-BELOW TEXT — overlay 60px on top of image
   Applies to: Study on Perception, Steps to Participate,
   Now Enrolling, Size & Color, Acknowledgements, collection page
   ========================================== */
.slideshow-content-below-container {
  margin-top: -60px !important;
  position: relative;
  z-index: 2;
}
@media (max-width: 989px) {
  .slideshow-content-below-container {
    margin-top: -50px !important;
  }
}

/* Content-below text — spacing and readability */
.slideshow-content-below-wrapper {
  max-width: 38rem !important;
  line-height: 1.8 !important;
}
.slideshow-content-below-body p {
  margin-bottom: 0.6em !important;
}
.slideshow-content-below-body p:last-child {
  margin-bottom: 0 !important;
}
.slideshow-content-below-wrapper h6 {
  margin-bottom: 10px !important;
}
.slideshow-content-below-body br {
  display: block;
  content: "";
  margin-top: 0.4em;
}

/* Study on Perception — force centered on mobile too */
[id*="slideshow_36tknJ"] .slideshow-content-below {
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[id*="slideshow_36tknJ"] .slideshow-content-below .slideshow-content-below-wrapper {
  align-items: center !important;
  text-align: center !important;
}

/* ==========================================
   NOW ENROLLING SLIDESHOW — arrow + pagination fixes
   Section: slideshow_T6LjFb
   Old theme swiper-nav arrows hidden via JS; replaced with
   Results-slider-style <button> arrows (.ne-prev / .ne-next)
   ========================================== */

/* Hide old theme arrows (JS also hides them, this is a fallback) */
[id*="slideshow_T6LjFb"] .swiper--button-wrapper {
  display: none !important;
}

/* Hide pagination dots — arrows only */
[id*="slideshow_T6LjFb"] .swiper-pagination {
  display: none !important;
}

/* Now Enrolling arrows inherit .rs-prev / .rs-next base styles from Results slider.
   Only overrides needed here are positioning within the slideshow section.
   z-index: 101 to sit above the section-wrapper::after bottom gradient (z-index: 100). */
[id*="slideshow_T6LjFb"] .ne-nav-arrows {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
  position: relative;
  z-index: 101;
}

/* ==========================================
   RESULTS SLIDER — Remove white line/divider below section
   The Shopify section wrapper adds a border-bottom
   ========================================== */
[id*="custom_liquid_RsSldr"],
[id*="custom_liquid_RsSldr"] .section-wrapper,
[id*="custom_liquid_RsSldr"] + section {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================
   ARROW ICON CENTERING — Now Enrolling + Testimonials
   Flex centering for SVG/icon inside circle buttons
   ========================================== */

/* Now Enrolling arrow icon centering — handled by .rs-prev / .rs-next base styles */

/* Testimonials arrow icon centering — now handled by .tm-prev / .tm-next rules */

/* ========================================
   ACKNOWLEDGEMENTS (slideshow_dAtg3D) — overflow from custom_css
   Moved from custom_css to stay under 500 char limit
   ======================================== */
[id*="slideshow_dAtg3D"] #ack-full-content b {
  font-family: 'Avenir Next', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 600;
}
/* Expanded read text — justified with white animated vertical line on left */
[id*="slideshow_dAtg3D"] #ack-full-content {
  text-align: justify !important;
  position: relative !important;
  padding-left: 20px !important;
}
/* Animated vertical line on left — grows downward when content expands */
[id*="slideshow_dAtg3D"] #ack-full-content::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background-color: #ffffff !important;
  transform-origin: top !important;
  animation: ack-line-grow 0.6s ease-out forwards !important;
}
@keyframes ack-line-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@media (max-width: 767px) {
  [id*="slideshow_dAtg3D"] #ack-full-content { padding: 0 16px; }
  [id*="slideshow_dAtg3D"] .animated-line { margin-left: 16px; margin-right: 16px; }
  [id*="slideshow_dAtg3D"] .ack-desktop-br { display: none; }
}
@media (max-width: 767px) {
  [id*="slideshow_dAtg3D"] .slideshow--content {
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow--content h6,
  [id*="slideshow_dAtg3D"] .slideshow--content h6 strong {
    text-align: center !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body {
    text-align: center !important;
    padding: 0 20px !important;
  }
  [id*="slideshow_dAtg3D"] .animated-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow--desc p,
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body p {
    text-align: center !important;
  }
}

/* Below-hero section — reduce top padding so text sits closer to Participate button */
@media (min-width: 768px) {
  [id*="rich_text_VdyADn"] {
    padding-top: 12px !important;
  }
}

/* Known/Unknown — ALWAYS side-by-side, shrink like product cards on mobile */
[id*="media_grid_Lj3L3Y"] .media-grid--wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: auto !important;
  grid-template-rows: auto !important;
  gap: 0px !important;
}
[id*="media_grid_Lj3L3Y"] .media-grid--item {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: span 1 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
[id*="media_grid_Lj3L3Y"] .media-grid--video {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
[id*="media_grid_Lj3L3Y"] .media-grid--video .media {
  height: 100% !important;
  width: 100% !important;
}
/* Override any theme mobile stacking */
@media (max-width: 767px) {
  [id*="media_grid_Lj3L3Y"] .media-grid--wrapper {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
  }
  [id*="media_grid_Lj3L3Y"] .media-grid--item {
    grid-column: span 1 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Share hypothesis section — gradient overlay matching hero style */
[id*="share_hypothesis_E4VMjV"] {
  position: relative;
  z-index: 1;
}
/* Content above its own gradient overlay */
[id*="share_hypothesis_E4VMjV"] .share-hypothesis--inner,
[id*="share_hypothesis_E4VMjV"] .share-hypothesis--content,
[id*="share_hypothesis_E4VMjV"] > div {
  position: relative;
  z-index: 2;
}
[id*="share_hypothesis_E4VMjV"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(20,20,20,0.8) 100%);
  pointer-events: none;
  z-index: 1;
}

/* How to Participate — center block on page, left-align numbers within it */
[id*="share_hypothesis_jtgNjH"] .study-on-perception-body {
  display: flex;
  justify-content: center;
}
[id*="share_hypothesis_jtgNjH"] .study-on-perception-body p {
  text-align: left;
  display: inline-block;
}

/* Share Hypothesis heading — fit on one line on mobile
   Primary fix is in share-hypothesis.liquid inline <style> (ID selector).
   This is a fallback for any share-hypothesis section instances. */
@media (max-width: 767px) {
  .section-share-hypothesis .study-on-perception-wrapper h6 {
    font-size: clamp(8px, 2.5vw, 13px) !important;
    letter-spacing: 1.5px !important;
    line-height: 1.3 !important;
  }
}

/* "Share your hypothesis for early access to Group 2" — collection page CTA
   This is a custom-liquid section in collection.2025_drop_collection.json.
   At 14px + letter-spacing it wraps to 2 lines on mobile. Reduce to fit one line. */
@media (max-width: 767px) {
  [id*="custom_liquid_cta_early_access"] p {
    font-size: clamp(9px, 2.8vw, 13px) !important;
    letter-spacing: 0.3px !important;
  }
}

/* Testimonials — remove white scrollbar line on mobile */
@media (max-width: 767px) {
  [id*="testimonial_y3LVeW"] .swiper-scrollbar {
    display: none !important;
  }
}

/* Testimonials — bring symbol (Δ) closer to title line below */
[id*="testimonial_y3LVeW"] .testimonial--item-header {
  padding-bottom: 4px !important;
}
[id*="testimonial_y3LVeW"] .testimonial--item-body {
  padding-top: 4px !important;
}
[id*="testimonial_y3LVeW"] .author-title {
  margin-bottom: 0 !important;
}

/* Floating pause button — appears when audio is playing */
.floating-pause-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  cursor: pointer;
  text-decoration: underline;
  background: rgba(20,20,20,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: var(--body_font_family);
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 8px 20px;
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  white-space: nowrap;
}
.floating-pause-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.floating-pause-btn::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='5' width='4' height='14' rx='1' fill='%23000'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='5' width='4' height='14' rx='1' fill='%23000'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Acknowledgements Read button — underline "Read" only, not the "+" */
.ack-read-btn {
  text-decoration: none !important;
}
.ack-read-btn .ack-read-text {
  text-decoration: underline;
}

/* ==========================================
   SKIP TO CONTENT — hidden unless focused
   ========================================== */
.skip-to-content {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}
.skip-to-content:focus-visible {
  z-index: 99 !important;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
}

/* ==========================================
   SCREEN READER ONLY — visually hidden, accessible
   ========================================== */
.sr-only {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* REMOVED: Duplicate hero slideshow mobile overrides — the correct clamp()-based
   rules are at the HERO SLIDESHOW section above (lines ~3946-3984). */

/* ==========================================
   ACKNOWLEDGEMENTS — mobile centering + overflow
   ========================================== */
[id*="slideshow_dAtg3D"] #ack-full-content b {
  font-family: 'Avenir Next', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 600;
}
@media (max-width: 767px) {
  [id*="slideshow_dAtg3D"] #ack-full-content { padding: 0 16px; }
  [id*="slideshow_dAtg3D"] .animated-line { margin-left: 16px; margin-right: 16px; }
  [id*="slideshow_dAtg3D"] .ack-desktop-br { display: none; }
  [id*="slideshow_dAtg3D"] .slideshow--content {
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow--content h6,
  [id*="slideshow_dAtg3D"] .slideshow--content h6 strong {
    text-align: center !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body {
    text-align: center !important;
    padding: 0 20px !important;
  }
  [id*="slideshow_dAtg3D"] .animated-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [id*="slideshow_dAtg3D"] .slideshow--desc p,
  [id*="slideshow_dAtg3D"] .slideshow-content-below-body p {
    text-align: center !important;
  }
}

/* ========================================
   Rule ACK1: Acknowledgements Section Styling
   ======================================== */

/* --- Heading alignment: scoped to acknowledgements only (was generic, broke other slideshows) --- */
[id*="slideshow_dAtg3D"] .slideshow--content .slideshow--desc h6,
[id*="slideshow_dAtg3D"] .slideshow--content .slideshow--desc h6 strong {
  text-align: center !important;
}

/* --- Listen and Read buttons: inline, underlined, matched sizing --- */
.ack-listen-btn,
.ack-read-btn,
.hero-listen-btn {
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  color: currentColor;
  font-family: var(--body_font_family);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 0;
}
.ack-listen-btn:hover,
.ack-read-btn:hover,
.hero-listen-btn:hover {
  opacity: 0.7;
}
/* Speaker icon — RIGHT of text via ::after */
.hero-listen-btn::after,
.ack-listen-btn::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  vertical-align: -1px;
  background: currentColor;
  text-decoration: underline;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7' stroke='%23000' fill='none' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7' stroke='%23000' fill='none' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ==========================================
   KNOWN / UNKNOWN — text and gradient fixes
   ========================================== */
[id*="media_grid_Lj3L3Y"] .section-spacing {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[id*="media_grid_Lj3L3Y"] .media-grid--item .media {
  aspect-ratio: 1 / 1 !important;
}
[id*="media_grid_Lj3L3Y"] .media-grid--item {
  grid-row: span 1 !important;
}
[id*="media_grid_Lj3L3Y"] .media-content {
  color: #ffffff !important;
  opacity: 1 !important;
}
[id*="media_grid_Lj3L3Y"] .media-content h4,
[id*="media_grid_Lj3L3Y"] .media-content strong,
[id*="media_grid_Lj3L3Y"] .media-content b,
[id*="media_grid_Lj3L3Y"] .media-content p,
[id*="media_grid_Lj3L3Y"] .media-content a {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Drop shadow on text for readability over video — solid black */
[id*="media_grid_Lj3L3Y"] .media-content h4,
[id*="media_grid_Lj3L3Y"] .media-content strong,
[id*="media_grid_Lj3L3Y"] .media-content b,
[id*="media_grid_Lj3L3Y"] .media-content p,
[id*="media_grid_Lj3L3Y"] .media-content a,
[id*="media_grid_Lj3L3Y"] .media-content-heading,
[id*="media_grid_Lj3L3Y"] .media-content-description {
  text-shadow: 0 2px 8px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 1px 2px rgba(0,0,0,1) !important;
}
/* Known tile (1st) — 3-layer product card gradient with white center (white = known) */
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-overlay:after {
  opacity: 1 !important;
  inset: -1px !important;
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    radial-gradient(ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(20, 20, 20, 0.02) 50%,
      rgba(20, 20, 20, 0.06) 56%,
      rgba(20, 20, 20, 0.14) 62%,
      rgba(20, 20, 20, 0.28) 68%,
      rgba(20, 20, 20, 0.46) 74%,
      rgba(20, 20, 20, 0.68) 80%,
      rgba(20, 20, 20, 0.88) 87%,
      #141414 93%
    ),
    linear-gradient(to bottom, rgba(255,255,255,0.80), rgba(255,255,255,0.80)) !important;
}
/* Unknown tile (2nd) — 3-layer product card gradient (black = unknown) */
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-overlay:after {
  opacity: 1 !important;
  inset: -1px !important;
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      rgba(20, 20, 20, 0.35) 0%,
      rgba(20, 20, 20, 0.15) 10%,
      transparent 20%
    ),
    radial-gradient(ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 45%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.06) 56%,
      rgba(0, 0, 0, 0.14) 62%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.46) 74%,
      rgba(0, 0, 0, 0.68) 80%,
      rgba(0, 0, 0, 0.88) 87%,
      #000000 93%
    ),
    linear-gradient(to bottom, rgba(0,0,0,0.70), rgba(0,0,0,0.70)) !important;
}
/* Known tile (1st) — black text with white glow (readable over white gradient) */
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-content h4,
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-content strong,
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-content b,
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-content p,
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-content a {
  color: #000000 !important;
  text-shadow: none !important;
}
/* Known tile (1st) — black animated lines with white glow */
[id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .animated-line {
  background-color: #000000 !important;
  box-shadow: none !important;
}
/* Unknown tile (2nd) — white text with solid black shadow */
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-content h4,
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-content strong,
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-content b,
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-content p,
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-content a {
  color: #ffffff !important;
  text-shadow: none !important;
}
/* Unknown tile (2nd) — white animated lines with solid black shadow */
[id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .animated-line {
  background-color: #ffffff !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  [id*="media_grid_Lj3L3Y"] .media-grid--item {
    grid-row: span 1 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Mobile Known tile — 4-layer full-coverage overlay with white fill */
  [id*="media_grid_Lj3L3Y"] .media-grid--item:first-child .media-overlay:after {
    inset: -1px !important;
    border: none !important;
    border-radius: 0 !important;
    background:
      linear-gradient(to bottom,
        #141414 0%,
        rgba(20, 20, 20, 0.8) 2%,
        rgba(20, 20, 20, 0.4) 6%,
        rgba(20, 20, 20, 0.15) 12%,
        transparent 20%
      ),
      linear-gradient(to top,
        rgba(20, 20, 20, 0.35) 0%,
        rgba(20, 20, 20, 0.15) 10%,
        transparent 20%
      ),
      radial-gradient(
        ellipse farthest-side at 50% 50%,
        transparent 0%,
        transparent 34%,
        rgba(20, 20, 20, 0.03) 40%,
        rgba(20, 20, 20, 0.08) 46%,
        rgba(20, 20, 20, 0.18) 52%,
        rgba(20, 20, 20, 0.35) 58%,
        rgba(20, 20, 20, 0.55) 64%,
        rgba(20, 20, 20, 0.76) 72%,
        rgba(20, 20, 20, 0.92) 80%,
        #141414 85%
      ),
      linear-gradient(to bottom, rgba(255,255,255,0.80), rgba(255,255,255,0.80)) !important;
  }
  /* Mobile Unknown tile — 4-layer full-coverage overlay with black fill */
  [id*="media_grid_Lj3L3Y"] .media-grid--item:nth-child(2) .media-overlay:after {
    inset: -1px !important;
    border: none !important;
    border-radius: 0 !important;
    background:
      linear-gradient(to bottom,
        #141414 0%,
        rgba(20, 20, 20, 0.8) 2%,
        rgba(20, 20, 20, 0.4) 6%,
        rgba(20, 20, 20, 0.15) 12%,
        transparent 20%
      ),
      linear-gradient(to top,
        rgba(20, 20, 20, 0.35) 0%,
        rgba(20, 20, 20, 0.15) 10%,
        transparent 20%
      ),
      radial-gradient(
        ellipse farthest-side at 50% 50%,
        transparent 0%,
        transparent 34%,
        rgba(0, 0, 0, 0.03) 40%,
        rgba(0, 0, 0, 0.08) 46%,
        rgba(0, 0, 0, 0.18) 52%,
        rgba(0, 0, 0, 0.35) 58%,
        rgba(0, 0, 0, 0.55) 64%,
        rgba(0, 0, 0, 0.76) 72%,
        rgba(0, 0, 0, 0.92) 80%,
        #000000 85%
      ),
      linear-gradient(to bottom, rgba(0,0,0,0.70), rgba(0,0,0,0.70)) !important;
  }
}

/* ==========================================
   COLLECTION FILTER/SORT — Z-INDEX & STYLING
   Fix: filter dropdowns fall behind product card gradients
   ========================================== */

/* Raise filter dropdown z-index above product cards */
.collection_custom_class_css .horizontal-filters--content {
  z-index: 10;
}

/* Raise the sticky filter bar above product cards */
.filter-layout-horizontal:not(.horizontal-bottom) .top-filter-bar.is-sticky {
  z-index: 10;
}

/* Increase dropdown max-height so all options visible */
.collection_custom_class_css .horizontal-filters--list-item .horizontal-filters--content {
  max-height: 320px;
}

/* Filter heading text — smaller, scientific aesthetic */
.collection_custom_class_css .horizontal-filters--button span {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filter option labels — clean spacing */
.collection_custom_class_css .horizontal-filters--content label {
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* Sort dropdown inline with filters */
.collection_custom_class_css .horizontal-filters--list .filter--sorting {
  border-left: 1px solid var(--border_color);
  padding-left: 8px;
  margin-left: 4px;
}

/* ==========================================
   COLLECTION FILTER/SORT — MOBILE
   Centered button, better spacing
   ========================================== */
@media (max-width: 767px) {
  /* Center the "Show Filters" / mobile filter toggle button */
  .collection_custom_class_css .filter-layout-vertical .filter--vertical-toggle,
  .collection_custom_class_css .horizontal-filters-bar .mobile-filter-toggle {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  /* More spacing between filter groups on mobile */
  .collection_custom_class_css .filter--columns-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border_color);
  }
  .collection_custom_class_css .filter--columns-item:last-child {
    border-bottom: none;
  }

  /* Color swatch — position outside checkbox area */
  .collection_custom_class_css .filter--color-item .filter--option-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .collection_custom_class_css .filter--color-item .filter-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* ==========================================
   S/M/L FILTER BUTTONS — Lens, Bridge, Arm
   ========================================== */
.sml-group-list {
  display: flex;
  gap: 8px;
  padding: 12px;
  list-style: none;
  margin: 0;
}
.sml-option {
  flex: 1;
}
.sml-btn {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--border_color);
  background: transparent;
  color: var(--text_color);
  font-family: var(--body_font_family);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sml-btn:hover {
  background: var(--text_color);
  color: var(--body_background);
}
.sml-btn.active {
  background: var(--text_color);
  color: var(--body_background);
}
.sml-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.sml-btn:disabled:hover {
  background: transparent;
  color: var(--text_color);
}

/* ============================================================
   R7: Collection Filter Bar Redesign
   Remove rounded box, show all filters in one open line,
   thin divider underneath, dropdowns above product gradients
   ============================================================ */

/* --- Remove the rounded container box --- */
.horizontal-filters--main {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* --- Thin line under the entire filter bar --- */
.top-filter-bar.top-filter {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 0;
  margin-bottom: 24px;
}

/* --- Remove scroll arrows --- */
.filter-arrow.left,
.filter-arrow.right {
  display: none !important;
}

/* --- Remove scroll container — show all filters openly --- */
.horizontal-filters--main-inner {
  overflow: visible !important;
}
.horizontal-filters--main-list,
.horizontal-filters--options .horizontal-filters--main-list {
  max-width: none !important;
}

/* --- Filters: single line, no wrapping on desktop --- */
.horizontal-filters--list {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  overflow: visible !important;
  gap: 0 !important;
  padding: 4px 0 4px 8px !important;
  min-width: auto !important;
}

/* --- Clean filter items — no pills --- */
.horizontal-filters--list-item {
  border-radius: 0 !important;
  padding: 3px 8px !important;
  margin: 0 !important;
}
.horizontal-filters--list-item.active {
  background: transparent !important;
}

/* --- Filter button text — word case, smaller than hero tabs for hierarchy --- */
.horizontal-filters--button {
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: capitalize;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.horizontal-filters--button:hover,
.horizontal-filters--list-item.active .horizontal-filters--button {
  opacity: 1;
}

/* --- Dropdowns: high z-index, minimal styling --- */
.horizontal-filters--content {
  z-index: 100 !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: var(--body_background) !important;
  max-height: 320px !important;
}
.horizontal-filters--list-item .horizontal-filters--content {
  max-height: 280px !important;
}
/* Color filter: scrollable dropdown so all color swatches are accessible */
.horizontal-filters--list-item.filter--color-item .horizontal-filters--content {
  max-height: 480px !important;
  overflow-y: auto !important;
}
.horizontal-filters--content-list {
  padding: 8px 12px !important;
  gap: 10px !important;
}

/* --- Single-line bar: filters + sort on one row --- */
.horizontal-filters-bar {
  grid-template-columns: 1fr auto !important;
  align-items: end;
}
.horizontal-filters--options {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.total-products-count {
  display: none !important;
}

/* --- Sort button: minimal, no box, positioned on same row as filters --- */
.horizontal-sortby {
  grid-column: 2 !important;
  grid-row: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 0;
  align-self: end;
}
.horizontal-sortby:hover {
  opacity: 1;
}
.horizontal-sortby .horizontal-filters--content {
  z-index: 100 !important;
  background: var(--body_background) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 2px !important;
}

/* --- Mobile adjustments --- */
@media (max-width: 767px) {
  .horizontal-filters--list {
    gap: 0 2px !important;
    padding: 6px 0 !important;
  }
  .horizontal-filters--list-item {
    padding: 3px 6px !important;
  }
  .horizontal-filters--button {
    font-size: 9px;
    letter-spacing: 0.5px;
  }
}

/* --- Loading indicator: hide spinner, show "Loading Frames" text --- */
.collection-loader svg {
  display: none !important;
}
.collection-loader::after {
  content: "Loading Frames";
  font-family: var(--heading_font_family);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: none;
  color: rgba(255,255,255,0.6);
  display: block;
  text-align: center;
  padding: 20px 0;
}

/* --- Scroll snap: lock product grid rows on desktop --- */
/* Snap container must be the scroll root (html/body), not the grid element */
/* Class added via JS in main-collection.liquid (avoids :has() browser support issues) */
@media (min-width: 768px) {
  html.collection-snap-enabled {
    scroll-snap-type: y proximity !important;
  }
  .main-collection--products-list > .product--card:nth-child(2n+1) {
    scroll-snap-align: start;
    scroll-margin-top: 60px;
  }
}

/* ==========================================
   CART DRAWER: PRODUCT IMAGE VIGNETTE
   Removes hard edges/outline from cart item
   images and blends them into #141414 bg.
   ========================================== */

/* Zero out border-radius on image container and children */
.cart-product-media,
.cart-product-media .media,
.cart-product-media img {
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
}

/* Radial vignette overlay — fades image edges into #141414 */
.cart-product-media {
  position: relative;
  overflow: hidden;
}
.cart-product-media::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(
    ellipse 52% 50% at center center,
    transparent 0%,
    transparent 30%,
    rgba(20, 20, 20, 0.08) 42%,
    rgba(20, 20, 20, 0.28) 54%,
    rgba(20, 20, 20, 0.55) 64%,
    rgba(20, 20, 20, 0.80) 74%,
    #141414 86%
  );
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   Product Page Redesign - Spec Sections (PR)
   ============================================ */

/* Collapse double dividers between adjacent vintage-specs blocks */
.product--wrapper .product--custom-liquid + .product--custom-liquid .vintage-specs > hr.spec-divider:first-child {
  display: none;
}

/* Reduce spec body text size */
.vintage-specs .tags-inline {
  font-size: 13px;
}
.vintage-specs .tag-category {
  font-size: 13px;
}

/* Fix Participation Package margin overflow */
.vintage-specs {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tighten spacing between adjacent vintage-specs blocks */
.product--custom-liquid .vintage-specs {
  padding: 8px 0 4px;
  margin-top: 0;
  margin-bottom: 0;
}

/* ============================================
   ENROLLED COUNTER BAR — Overlaps hero slideshow
   Pulls the standalone section up into the hero
   so it appears directly below the "Participate" button.
   ============================================ */

[id*="custom_liquid_EnrlCnt"] {
  position: relative;
  z-index: 101;
  margin-top: -20px !important;
  margin-bottom: 0;
  pointer-events: none;
}

[id*="custom_liquid_EnrlCnt"] .section-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

[id*="custom_liquid_EnrlCnt"] .section-spacing {
  padding: 0 !important;
  margin: 0 !important;
}

/* Mobile: reduce pull-up so counter clears the button */
@media (max-width: 767px) {
  [id*="custom_liquid_EnrlCnt"] {
    margin-top: -18px !important;
  }
}

/* ==========================================
   GRID LAYOUT TOGGLE — Collection page
   Lets users switch between 2-col, 3-col,
   and 4-col product grids. Default: 2-column.
   Uses circle dot icons instead of SVG grids.
   ========================================== */

/* Toggle container — positioned to align with Sort baseline */
.grid-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 12px;
  align-self: end;
  padding-bottom: 4px;
}

/* "Grid" label — matches Sort button font styling */
.grid-toggle__label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--text_color);
  margin-right: 2px;
  font-family: var(--body_font_family);
}

/* Toggle buttons */
.grid-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text_color);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.grid-toggle__btn:hover {
  opacity: 0.7;
}

.grid-toggle__btn.active {
  opacity: 1;
}

/* Dot row container */
.grid-toggle__dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Individual dot */
.grid-toggle__dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}

/* 2-column grid (default) — !important needed to override theme's var(--row_count) rules */
.main-collection--products-list.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3-column grid */
.main-collection--products-list.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* 4-column grid */
.main-collection--products-list.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Desktop >= 1025px: override the theme --row_count with toggle classes */
@media (min-width: 1025px) {
  .main-collection--products-list.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .main-collection--products-list.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .main-collection--products-list.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Tablet 768-1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-collection--products-list.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .main-collection--products-list.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .main-collection--products-list.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Mobile: always 2-column, hide toggle — !important to override base grid-cols rules */
@media (max-width: 767px) {
  .grid-toggle {
    display: none;
  }
  .main-collection--products-list,
  .main-collection--products-list.grid-cols-2,
  .main-collection--products-list.grid-cols-3,
  .main-collection--products-list.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Horizontal filter layout: keep topbar visible for grid toggle */
@media (min-width: 768px) {
  .filter-layout-horizontal .collection--topbar {
    display: flex !important;
  }
  /* Hide the filter button in horizontal layout (already handled by horizontal bar) */
  .filter-layout-horizontal .collection--topbar filter-toggler {
    display: none;
  }
}

/* Update scroll-snap for 3-col: snap every 3rd item instead of 2nd */
@media (min-width: 768px) {
  .main-collection--products-list.grid-cols-3 > .product--card:nth-child(2n+1) {
    scroll-snap-align: none;
    scroll-margin-top: unset;
  }
  .main-collection--products-list.grid-cols-3 > .product--card:nth-child(3n+1) {
    scroll-snap-align: start;
    scroll-margin-top: 60px;
  }
  /* 4-col: snap every 4th item */
  .main-collection--products-list.grid-cols-4 > .product--card:nth-child(2n+1) {
    scroll-snap-align: none;
    scroll-margin-top: unset;
  }
  .main-collection--products-list.grid-cols-4 > .product--card:nth-child(4n+1) {
    scroll-snap-align: start;
    scroll-margin-top: 60px;
  }
}

/* ==========================================
   COLLECTION PAGE — HERO TEXT + TABS
   Change A: Centered hero text with underline
   Change B: Group 1 info below filter bar
   Change C: Tabbed content in hero area
   ========================================== */

/* --- A. Hero Text Block --- */
.collection-hero-text {
  text-align: center;
  padding: 0 24px;
  max-width: 600px;
  margin: 0 auto;
}

.collection-hero-heading {
  font-family: var(--heading_font_family);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: none;
  margin: 0 0 12px;
  line-height: 1.2;
}

.collection-hero-underline {
  width: min(70%, 200px);
  height: 1px;
  background-color: currentColor;
  margin: 0 auto 20px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: collection-hero-line-fill 1.2s ease-out 0.3s forwards;
}

@keyframes collection-hero-line-fill {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-hero-underline {
    animation: none;
    transform: scaleX(1);
  }
}

.collection-hero-subtitle {
  font-family: var(--heading_font_family);
  font-size: clamp(14px, 2.5vw, 17px);
  letter-spacing: 1.5px;
  margin: 0 0 16px;
  opacity: 0.9;
  line-height: 1.5;
}

.collection-hero-cta {
  font-family: var(--body_font_family);
  font-size: clamp(11px, 2vw, 13px);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.7;
}

/* --- Hero Tabbed Slideshow — collection page slide text sizing
   Matches home page heading (16px Avenir Next bold) and body (12px) --- */
.hero-tabbed__header {
  font-family: "Avenir Next", "Avenir Next W01", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-align: left !important;
  margin-bottom: 2px !important;
}

.hero-tabbed__body {
  font-size: 12px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.hero-tabbed__animated-line {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

@media (max-width: 767px) {
  .hero-tabbed__header {
    font-size: 13px !important;
  }
  .hero-tabbed__body {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

}

/* --- B. Group 1 Info Line (single line between hero and filter bar) --- */
.collection-group-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  margin: 0;
}

.collection-group-info__line,
.collection-group-info__top,
.collection-group-info__bottom {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* Divider above filter bar — gray to match theme borders
   Hidden on mobile where info row has its own borders */
.collection-group-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
}

@media (max-width: 767px) {
  .collection-group-divider {
    display: none;
  }
}

/* Eliminate gap between filter bar and info row — !important needed because
   horizontal-filters.css loads later and sets margin-bottom: 40px at same specificity */
.collection-2025-drop .top-filter-bar {
  margin-bottom: 0 !important;
}

/* Reduce topbar padding (sits between filter bar and product grid) */
.collection-2025-drop .collection--topbar {
  padding-bottom: 0;
  padding-top: 0;
}

/* Tighter product card gap on collection page */
.collection-2025-drop .main-collection--products-list {
  gap: 4px;
}

@media (max-width: 767px) {
  .collection-2025-drop .main-collection--products-list {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }
}

/* Sort left, grid toggle right — in line with filter bar */
.collection-2025-drop .horizontal-filters-bar {
  position: relative;
}

.collection-2025-drop .horizontal-filters--options {
  order: 2;
  margin-left: auto;
}

/* Grid toggle in topbar — smaller dots, right-aligned */
.collection-2025-drop .grid-toggle {
  margin-left: auto;
}

.collection-2025-drop .grid-toggle__btn {
  padding: 4px 5px;
}

.collection-2025-drop .grid-toggle__dot {
  width: 4px;
  height: 4px;
}

.collection-group-info__value-row {
  font-family: var(--body_font_family);
  font-size: 13px;
  letter-spacing: 0.8px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.8;
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.collection-group-info__divider {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.4;
  font-weight: 300;
}

/* --- C. Tab Component --- */
.collection-hero-tabs {
  max-width: 500px;
  margin: 24px auto 0;
  padding: 0 24px;
}

.collection-hero-tabs__nav {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.collection-hero-tabs__btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: inherit;
  font-family: var(--body_font_family);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.collection-hero-tabs__btn:hover {
  opacity: 0.8;
}

.collection-hero-tabs__btn.is-active {
  opacity: 1;
  border-bottom-color: currentColor;
}

.collection-hero-tabs__panels {
  padding: 20px 0 0;
  min-height: 80px;
}

.collection-hero-tabs__panel {
  display: none;
  text-align: center;
}

.collection-hero-tabs__panel.is-active {
  display: block;
  animation: tab-fade-in 0.3s ease;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.collection-hero-tabs__panel h6 {
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0 0 8px;
  line-height: 1.4;
}

.collection-hero-tabs__panel p {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
}

/* Method tab — step list */
.method-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.method-steps li {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 2;
  opacity: 0.85;
}

.method-steps li strong {
  letter-spacing: 2px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .collection-hero-tabs__btn {
    font-size: 10px;
    letter-spacing: 2.5px;
    padding: 8px 10px;
  }

  .collection-hero-tabs {
    padding: 0 16px;
  }

  .collection-group-info-row {
    padding: 6px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 0;
  }

  .collection-group-info__line {
    white-space: nowrap;
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: clamp(6px, 2.1vw, 9px);
    line-height: 1.4;
    text-align: center;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  .collection-group-info__top,
  .collection-group-info__bottom {
    display: inline !important;
    font-family: "Magda Clean", Arial, sans-serif !important;
    font-size: inherit !important;
    letter-spacing: inherit;
  }

  .collection-group-info__top::after {
    content: " | ";
    opacity: 0.6;
  }

  .collection-group-info {
    padding: 0;
  }

  .collection-group-info__value-stack {
    font-size: 12px;
  }

  .collection-group-info__value-row {
    font-size: 12px;
  }
}

/* --- S/M/L measurement filter grouping --- */
.sml-group-item {
  cursor: pointer;
}

.sml-range {
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 4px;
}

.sml-hidden-inputs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Fix dropdown positioning: each filter dropdown must be positioned
   relative to its own parent custom-dropdown, not a distant ancestor.
   This fixes the Arm (and other rightmost) dropdowns appearing in the
   middle of the screen instead of directly below their label. --- */
.horizontal-filters--list-item {
  position: relative !important;
}
/* Align dropdown left edge with the filter label */
.horizontal-filters--list-item .horizontal-filters--content {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Mobile filter button — centered, icon only, white, no background */
.collection-2025-drop .filter-toggle-button[data-filters-mobile] {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  padding: 2px;
  margin: 0 auto;
  justify-content: center;
  box-shadow: none !important;
}

.collection-2025-drop .filter-toggle-button[data-filters-mobile] svg {
  width: 12px;
  height: 12px;
}

/* Applied filter tags — smaller, no pill outline */
.collection-2025-drop .filter--applied-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 8px;
}

.collection-2025-drop .filter--applied-item filter-remove {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.collection-2025-drop .filter--applied-item filter-remove a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.collection-2025-drop .filter--applied-item filter-remove a:hover {
  color: #fff;
}

.collection-2025-drop .filter--applied-item .close-icon {
  width: 7px;
  margin-left: 4px;
  opacity: 0.5;
}

.collection-2025-drop .filter--applied-list ul {
  gap: 4px;
  margin-bottom: 8px;
}

.collection-2025-drop .clear-filter-button {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

/* ==========================================
   MOBILE FILTER DRAWER — Collapsible Sections
   ========================================== */

/* Smaller drawer header — just says "Filter" */
.collection-2025-drop .filter--sidebar-heading {
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Collapsible filter sections */
.collection-2025-drop .filter--collapsible {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.collection-2025-drop .filter--collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  list-style: none;
  user-select: none;
}

/* Remove default details marker */
.collection-2025-drop .filter--collapsible-toggle::-webkit-details-marker,
.collection-2025-drop .filter--collapsible-toggle::marker {
  display: none;
  content: '';
}

/* Chevron indicator */
.collection-2025-drop .filter--collapsible-toggle::after {
  content: '+';
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.collection-2025-drop .filter--collapsible[open] > .filter--collapsible-toggle::after {
  content: '−';
}

/* Override theme JS inline styles that constrain open details height */
.collection-2025-drop .filter--collapsible[open] {
  overflow: visible !important;
  height: auto !important;
}

/* Collapsible content area */
.collection-2025-drop .filter--collapsible .filter--option-list {
  padding-bottom: 12px;
}

/* Override the old h6 heading style inside collapsibles — it's now the summary */
.collection-2025-drop .filter--collapsible .filter--columns-heading {
  margin: 0;
  padding: 0;
}

/* S/M/L filter options */
.collection-2025-drop .filter--sml-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collection-2025-drop .filter--sml-group label {
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Filter option labels — checkboxes and sort radio labels */
.collection-2025-drop .filter-option-item label {
  font-size: 13px;
}

/* Mobile topbar — center filter button, kept shorter than slide tabs */
@media (max-width: 767px) {
  .collection-2025-drop .collection--topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    padding: 1px 16px !important;
    border-top: none;
    margin: 0 !important;
  }

  .collection-2025-drop .collection--topbar filter-toggler {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  .collection-2025-drop .collection--topbar .filter--results-text {
    display: none;
  }

  .collection-2025-drop .collection--topbar .grid-toggle {
    display: none;
  }
}

/* ==========================================
   COLLAPSIBLE FILTER DRAWER — Desktop
   Filter bar hidden by default, toggled via
   a Filters button in the control bar.
   Sort lives inside the drawer.
   Control bar: [Filters] [info line] [Grid]
   ========================================== */

/* --- 1. Control bar layout (the collection--topbar) --- */
@media (min-width: 768px) {
  /* Show the filter-toggler in horizontal layout (was hidden) */
  .collection-2025-drop .filter-layout-horizontal .collection--topbar filter-toggler {
    display: flex !important;
  }

  /* Force-show the desktop filter toggle button — override .hidden class */
  .collection-2025-drop .collection--topbar .filter-toggle-button[data-filters-nav] {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text_color) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.2s;
    gap: 6px;
    align-items: center;
  }
  .collection-2025-drop .collection--topbar .filter-toggle-button[data-filters-nav]:hover {
    opacity: 1;
  }
  .collection-2025-drop .collection--topbar .filter-toggle-button[data-filters-nav] svg {
    width: 20px;
    height: 20px;
    margin-right: 0;
  }

  /* Control bar: flex row with info line in center, gray lines above and below */
  .collection-2025-drop .collection--topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 !important;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 10px;
    position: relative;
  }

  /* Hide the result count in the topbar — not needed in control bar */
  .collection-2025-drop .collection--topbar .filter--results-text {
    display: none;
  }

  /* --- 2. Move info line INTO the control bar visually --- */
  /* Hide standalone info row and divider — content moved to control bar */
  .collection-2025-drop .collection-group-info-row {
    display: none !important;
  }
  .collection-2025-drop .collection-group-divider {
    display: none !important;
  }

  /* --- 3. Collapsible horizontal filter bar --- */
  /* Default: collapsed */
  .collection-2025-drop .top-filter-bar.top-filter {
    display: grid !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Expanded state — pops out below the control bar's bottom line */
  .collection-2025-drop .filters-drawer-open .top-filter-bar.top-filter {
    max-height: 200px;
    opacity: 1;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 0 !important;
    overflow: visible;
  }

  /* Keep the control bar's bottom border visible — filters pop out BELOW it */
}

/* --- 4. Info line as inline element in control bar ---
   Since we can't move DOM, we use a CSS pseudo-element on the topbar
   to inject the info text. The standalone .collection-group-info-row
   is hidden on desktop (above). On mobile it remains visible. --- */
@media (min-width: 768px) {
  .collection-2025-drop .collection--topbar::after {
    content: "Group 1  |  Now Enrolling  |  100 Unique vintage frames  |  100 Participants";
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
  }

  /* Position filter-toggler as first item, grid toggle as last */
  .collection-2025-drop .collection--topbar filter-toggler {
    order: 1;
    flex-shrink: 0;
  }
  .collection-2025-drop .collection--topbar .grid-toggle {
    order: 3;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    align-self: center;
  }
}

/* --- 5. Active state indicator on Filters button --- */
@media (min-width: 768px) {
  .collection-2025-drop .collection--topbar .filter-toggle-button[data-filters-nav].filters-opened {
    opacity: 1;
  }
  .collection-2025-drop .collection--topbar .filter-toggle-button[data-filters-nav].filters-opened span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ==========================================
   PRODUCT PAGE — Thumbnail edge mask
   ========================================== */
.main--product-thumbnail-item {
  position: relative !important;
  overflow: hidden !important;
}
.main--product-thumbnail-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 8px 4px #141414 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ========================================
   PRODUCT PAGE — Mobile spacing tightening
   Goal: get Enroll button closer to above-the-fold
   ======================================== */
@media (max-width: 767px) {
  .breadcrumb {
    padding-top: 0px !important;
    margin-top: -5px !important;
  }
  .section-main-product {
    margin-top: -16px !important;
  }

  /* Above ROSEYS brand name */
  .product--wrapper .product-info-details .product-info-block:first-child {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }

  /* Below price: reduce by 15px (was 10px, now tight) */
  .product--wrapper .product--pricing {
    margin-bottom: 0px !important;
  }

  /* Above thumbnail slider: reduce by 5px */
  .main--product-thumbnails {
    margin-top: -3px !important;
  }

  /* ROSEYS to HR line: tighten */
  .product--wrapper .product-info-details hr {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
  }

  /* Product title: reduce size + tighten spacing above */
  .product--wrapper .product-info-details h1 {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  /* Above main product image: reduce by 5-8px */
  .section-main-product {
    margin-top: -16px !important;
  }

  /* Above breadcrumb: reduce by 5px */
  .breadcrumb {
    padding-top: 0px !important;
    margin-top: -5px !important;
  }
}

/* Desktop: reduce spacing below price */
@media (min-width: 768px) {
  .product--wrapper .product--pricing {
    margin-bottom: 0px !important;
  }
}

/* ========================================
   PRODUCT PAGE — Desktop image alignment
   ======================================== */
@media (min-width: 768px) {
  /* Move overlay text down 20px on main product image */
  .main--product-image-wrapper .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
    padding-top: 30px !important;
  }
}

/* ========================================
   COLLECTION PAGE — EXPERIMENT heading prominence
   Target: .hero-tabbed__header--experiment in hero-tabbed-slideshow-inline snippet
   Template: collection.2025_drop_collection (NOT group1-batches)
   ======================================== */
.hero-tabbed__header--experiment {
  font-size: 20px !important;
  letter-spacing: 0.18em !important;
}

@media (max-width: 767px) {
  .hero-tabbed__header--experiment {
    font-size: 16px !important;
    letter-spacing: 0.15em !important;
  }
}

/* ========================================
   Known/Unknown text row below media grid
   ======================================== */
.ku-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 100%;
  background: #141414;
  padding: 8px 0 12px;
  margin-top: -2px;
}
.ku-text-col {
  padding: 0 24px;
  color: #ffffff;
  font-family: var(--body_font_family);
}
.ku-text-left { text-align: center; }
.ku-text-right { text-align: center; }
.ku-heading {
  font-size: 12px;
  font-weight: 700;
  line-height: 5px;
  margin-bottom: 0;
  color: #ffffff;
}
.ku-text-row .animated-line {
  max-width: 130px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
.ku-text-col p {
  font-size: 11px;
  line-height: 22px;
  color: #ffffff;
  margin: 0;
}
.ku-text-col b { color: #ffffff; }
.ku-hypo-link {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
[id*="custom_liquid_KnUnTxt"] .section-spacing {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .ku-text-row { padding: 10px 0 14px; }
  .ku-text-col { padding: 0 16px; }
  .ku-heading { font-size: 11px; }
  .ku-text-col p { font-size: 10px; line-height: 18px; }
  .ku-text-row .animated-line {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}

/* ========================================
   Known/Unknown card grid (results-slider style)
   ======================================== */
.ku-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  background: #141414;
  margin-top: 24px;
}
.ku-grid .product--card-inner,
.ku-grid .product--card-image {
  border-radius: 0 !important;
  border: none !important;
}
.ku-grid .product--card-image {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}
/* Gradient vignette — 3-layer system matching product cards & results slider */
.ku-grid .product--card-image::after {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(to bottom,
      #141414 0%,
      rgba(20, 20, 20, 0.85) 2%,
      rgba(20, 20, 20, 0.5) 6%,
      rgba(20, 20, 20, 0.2) 12%,
      transparent 20%
    ),
    linear-gradient(to top,
      #141414 0%,
      rgba(20, 20, 20, 0.7) 5%,
      rgba(20, 20, 20, 0.35) 12%,
      rgba(20, 20, 20, 0.15) 18%,
      transparent 25%
    ),
    radial-gradient(
      ellipse farthest-side at 50% 50%,
      transparent 0%,
      transparent 48%,
      rgba(20, 20, 20, 0.02) 53%,
      rgba(20, 20, 20, 0.06) 58%,
      rgba(20, 20, 20, 0.14) 63%,
      rgba(20, 20, 20, 0.28) 68%,
      rgba(20, 20, 20, 0.46) 74%,
      rgba(20, 20, 20, 0.68) 81%,
      rgba(20, 20, 20, 0.88) 88%,
      #141414 93%
    );
  pointer-events: none;
  z-index: 1;
}

/* K/U gradient — mobile */
@media (max-width: 767px) {
  .ku-grid .product--card-image::after {
    background:
      linear-gradient(to bottom,
        #141414 0%,
        rgba(20, 20, 20, 0.8) 2%,
        rgba(20, 20, 20, 0.4) 6%,
        rgba(20, 20, 20, 0.15) 12%,
        transparent 20%
      ),
      linear-gradient(to top,
        #141414 0%,
        rgba(20, 20, 20, 0.65) 5%,
        rgba(20, 20, 20, 0.3) 12%,
        rgba(20, 20, 20, 0.12) 18%,
        transparent 25%
      ),
      radial-gradient(
        ellipse farthest-side at 50% 50%,
        transparent 0%,
        transparent 38%,
        rgba(20, 20, 20, 0.03) 43%,
        rgba(20, 20, 20, 0.08) 48%,
        rgba(20, 20, 20, 0.18) 54%,
        rgba(20, 20, 20, 0.35) 60%,
        rgba(20, 20, 20, 0.55) 66%,
        rgba(20, 20, 20, 0.76) 74%,
        rgba(20, 20, 20, 0.92) 82%,
        #141414 88%
      );
  }
}
/* Color overlay — sits between video and gradient */
.ku-color-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ku-overlay--white { background: rgba(255,255,255,0.55); }
.ku-overlay--black { background: rgba(0,0,0,0.30); }
/* Overlay text — centered over card */
.ku-overlay-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  pointer-events: none;
}
.ku-overlay-text a { pointer-events: auto; }
.ku-card-heading {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 5px;
  margin: 0 0 5px;
}
.ku-overlay-text p {
  font-size: 11px;
  line-height: 22px;
  margin: 0;
}
.ku-overlay-text--known { color: #000000 !important; }
.ku-overlay-text--known h4,
.ku-overlay-text--known p,
.ku-overlay-text--known a { color: #000000 !important; }
.ku-overlay-text--unknown { color: #ffffff; }
.custom-liquid--content .ku-card-line {
  max-width: 140px !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ku-card-line--known { background-color: #000000 !important; height: 1px !important; max-width: 140px !important; }
.ku-card-line--unknown { background-color: #ffffff !important; max-width: 140px !important; height: 1px !important; }
/* Remove container padding from custom-liquid wrapper */
[id*="custom_liquid_KnUnkn"] .section-spacing {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Footnote text below the bottom animated line */
.ku-footnote {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 8px;
  margin-top: 2px;
  opacity: 1;
  letter-spacing: 1px;
}
.ku-spacer {
  height: 38px;
}
@media (max-width: 767px) {
  .ku-card-heading { font-size: 8px; letter-spacing: 1px; }
  .ku-overlay-text p { font-size: 10px; line-height: 18px; }
  .custom-liquid--content .ku-card-line {
    max-width: 120px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ku-footnote {
    font-size: 9px;
    margin-top: 4px;
  }
  .ku-spacer {
    height: 22px;
  }
  .ku-card-line.is-visible {
    transform: scaleX(1) !important;
    opacity: 1 !important;
    display: block !important;
  }
}

/* Acknowledgements expanded content — justify body text (overrides center !important on .slideshow--desc p) */
[id*="slideshow_dAtg3D"] #ack-full-content p {
  text-align: justify !important;
}

/* Acknowledgements — sub-heading (<b> tags): consistent size, no line breaks */
[id*="slideshow_dAtg3D"] #ack-full-content b {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid #444;
  margin-bottom: 6px;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  white-space: nowrap;
}

/* ==========================================
   Responsive Header Scaling — clamp() sizing
   Keep ALL section headers on one line on mobile (no line breaks)
   ========================================== */
@media (max-width: 767px) {
  /* "A Global Study on Perception" — longest header, needs most scaling */
  [id*="rich_text_VdyADn"] h6,
  [id*="rich_text_VdyADn"] h2,
  [id*="rich_text_VdyADn"] h6 strong,
  [id*="rich_text_VdyADn"] h2 strong {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Group 1 | Now Enrolling" */
  [id*="rich_text_V3Qcw7"] h6,
  [id*="rich_text_V3Qcw7"] h2,
  [id*="rich_text_V3Qcw7"] h6 strong,
  [id*="rich_text_V3Qcw7"] h2 strong {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Participate" — hp-steps-alt */
  .stp-alt-header {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Share Hypothesis" — hp-video-journey */
  .exp-section-header {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Results" — study-on-perception */
  [id*="custom_liquid_ifXjYM"] h4,
  [id*="custom_liquid_ifXjYM"] h4 strong {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Phases" — hp-timeline */
  .tl-header {
    font-size: clamp(11px, 3.6vw, 16px) !important;
    white-space: nowrap !important;
  }

  /* "Acknowledgements" */
  [id*="slideshow_dAtg3D"] h6,
  [id*="slideshow_dAtg3D"] h6 strong {
    font-size: clamp(10px, 3.4vw, 16px) !important;
    white-space: nowrap !important;
  }
}

/* ── Footer share button ── */
.footer-share-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.footer-share-btn:hover {
  opacity: 0.7;
}
.footer-share-btn.share-copied .footer-share-label {
  opacity: 0.7;
}

/* ── Mobile spacing: Global Study + Known/Unknown area (Comment 13) ── */
@media (max-width: 767px) {
  /* 1. Add breathing room above "A Global Study on Perception" */
  [id*="rich_text_VdyADn"] {
    padding-top: 20px !important;
  }
  /* 2. Tighten gap between GS body text and K/U gradient cards */
  [id*="rich_text_VdyADn"] .richtext--description {
    padding-bottom: 2px !important;
  }
  /* 3. Reduce spacing below K/U section */
  [id*="custom_liquid_KnUnkn"] {
    margin-bottom: 0px !important;
  }
}



/* Known/Unknown "WHAT DO YOU SEE?" — match Share Hypothesis letter-spacing (2px) */
[id*="KnUnkn"] .ku-overlay-text--unknown p {
  letter-spacing: 2px;
}
[id*="KnUnkn"] .ku-overlay-text--unknown p.ku-wdys,
[id*="KnUnkn"] .ku-overlay-text--unknown p.ku-wdys b {
  font-size: 8px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
}


/* ==========================================
   FOOTER — Column heading styling
   Match section header size (16px), responsive clamp,
   prevent "THE EXPERIMENT" line-break, "Support" word case
   ========================================== */
.footer--menu-heading.heading-font.text-xlarge {
  font-size: clamp(12px, 2.8vw, 16px) !important;
  white-space: nowrap !important;
  letter-spacing: 3px !important;
}

/* "Support" column: word case, not ALL CAPS */
.footer--right .row > :nth-child(2) .footer--menu-heading {
  text-transform: capitalize !important;
}


/* ── Mobile font consistency (2026-03-02) ── */
@media (max-width: 767px) {
  [id*="VidJrny"] .exp-text { font-size: 12px; }
  .exp-main-question { font-size: 12px; letter-spacing: 2px; }
  .rs-wrap .product-number-from-title { font-size: 14px; letter-spacing: 0.5px; }
  .sort-info-row .exp-text,
  .sort-info-row .exp-divider { font-size: 10px; }
}

/* ── Footer heading animated lines (2026-03-02) ── */
.footer--menu-heading {
  width: fit-content;
  position: relative;
}
.footer--menu-heading::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #ffffff;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  animation: animated-line-fill 1.2s ease-out forwards;
  margin-top: 6px;
}

/* Acknowledgements expanded body text: match product page collapsible content body color */
[id*="slideshow_dAtg3D"] #ack-full-content p {
  color: #cccccc !important;
}

/* FIX: Ack headings (<b> tags) stay brand white while body text is #cccccc */
[id*="slideshow_dAtg3D"] #ack-full-content b {
  color: #eeeeee !important;
}

/* FIX: Global Study animated line — match heading width on mobile */
@media (max-width: 767px) {
  [id*="rich_text_VdyADn"] .animated-line,
  [id*="rich_text_VdyADn"] .richtext--custom-liquid .animated-line {
    max-width: 230px !important;
    width: 230px !important;
  }
}

/* ── Task 2: Reduce letter-spacing on K/U "Share hypothesis" footnote (2026-03-02) ── */
.ku-footnote,
.ku-hypo-link {
  letter-spacing: 0.5px !important;
}

/* ── Task 3: Sort info row text — reduce letter-spacing + brand white (2026-03-02) ── */
.sort-info-row {
  color: #eeeeee !important;
}
.sort-info-row .exp-text {
  letter-spacing: 0.5px !important;
  color: #eeeeee !important;
}
.sort-info-row .exp-divider {
  color: #eeeeee !important;
}

/* ── Task 4A: "Group 1 Now Enrolling" animated line — match "100 unique designer frames" width (2026-03-02) ── */
[id*="rich_text_V3Qcw7"] .animated-line,
[id*="rich_text_V3Qcw7"] .richtext--custom-liquid .animated-line {
  width: 255px !important;
  max-width: 255px !important;
}

/* ── Task 4B: "A Global Study on Perception" animated line — match heading width on desktop (2026-03-02) ── */
@media (min-width: 768px) {
  [id*="rich_text_VdyADn"] .animated-line,
  [id*="rich_text_VdyADn"] .richtext--custom-liquid .animated-line {
    max-width: 272px !important;
    width: 272px !important;
  }
}

/* ── Task 1: More spacing below Global Study body text before K/U cards (2026-03-02) ── */
/* Desktop: add padding-bottom to the section itself */
@media (min-width: 768px) {
  [id*="rich_text_VdyADn"] {
    padding-bottom: 40px !important;
  }
}
/* Mobile: increase padding-bottom (was 2px, now 30px) */
@media (max-width: 767px) {
  [id*="rich_text_VdyADn"] {
    padding-bottom: 30px !important;
  }
}

/* ── Task 2: Fix spacing above "WHAT DO YOU SEE?" to match spacing below buttons (2026-03-02) ── */
/* The inline <style> in hp-video-journey.liquid sets margin-top: 8px.
   Below buttons: btn-row margin-bottom 20px + line margins ~12px = ~32px gap.
   Above WDYS: line margin-bottom 7px + margin-top 8px = ~15px gap.
   Increase margin-top to 25px to balance the spacing. */
/* letter-spacing adds trailing space after last char — pad-left to visually center */
.exp-main-question {
  margin-top: 0 !important;
  padding-left: 2px;
}

/* ── Task 3: Fix Results Slider product number links being clipped (2026-03-02) ── */
/* The base rule at line 207 sets margin-top: 0 !important on
   .dynamic-values-added-in-products-cards.product-card-overlay-bottom,
   which blocks the -40px pull-up in .rs-wrap. Use a higher-specificity
   selector with !important to restore the negative margin so the
   product number overlays the bottom of the video gradient. */
.rs-wrap .dynamic-values-added-in-products-cards.product-card-overlay-bottom {
  margin-top: -40px !important;
  position: relative !important;
  z-index: 2;
  background-color: transparent !important;
}

/* Fix: Header logo not clickable on product pages.
   Breadcrumb section (.shopify-section.breadcrumb) has z-index: 3 and overlays
   the header at the same z-index, blocking clicks on the logo link.
   Raise header above breadcrumb so logo is always clickable. */
.section-header {
  z-index: 4 !important;
}


/* ============================================ */
/* ENCLAVE VIDEO JOURNEY STYLES */
/* Extracted from page.enclave.json (50KB limit) */
/* ============================================ */
:root{--enc-glass-bg:rgba(255,255,255,0.25);--enc-glass-border:rgba(255,255,255,0.4);--enc-text-color:#eee}
  .template-page-enclave .footer,.template-page-enclave footer,.template-page-enclave #shopify-section-footer,.template-page-enclave [id*="footer"],.template-page-enclave header,.template-page-enclave #shopify-section-header,.template-page-enclave .header-wrapper,.template-page-enclave .announcement-bar-section{display:none!important}
  #enc-container{width:100%;height:55vh;background:#141414;position:relative;overflow:hidden;line-height:0;font-size:0;padding:0;margin:0 auto}
  @media(min-width:768px){#enc-container{height:100vh;max-height:800px}}
  #enc-container::before{content:'';position:absolute;top:0;left:0;width:100%;height:12%;background:linear-gradient(to bottom,#141414 0%,rgba(20,20,20,0.6) 35%,rgba(20,20,20,0.2) 65%,transparent 100%);pointer-events:none;z-index:6}
  .enc-video-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:1}
  .enc-video-wrapper.active{display:block;z-index:5}
  .enc-video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;display:block;border:none;margin:0 auto!important;padding:0!important;max-width:none!important;background:#141414}
  .enc-video-wrapper:not(.active) .enc-video{opacity:0}
  .enc-video-wrapper.active .enc-video{opacity:1;transition:opacity 0.3s ease}
  .enc-tap-zones{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;z-index:10;pointer-events:none}
  .enc-tap-zone{flex:1;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .enc-tap-zone--center{flex:2}
  .enc-text-row{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:16px;font-family:"Magda Clean",Arial,sans-serif}
  .enc-text-with-icon{display:flex;flex-direction:column;align-items:center;gap:2px}
  .enc-divider{opacity:0.6}
  .enc-sound-toggle-btn{width:28px;height:28px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:250;transition:all 0.3s ease;padding:0;filter:drop-shadow(0px 1px 3px rgba(0,0,0,0.9));outline:none;-webkit-tap-highlight-color:transparent}
  .enc-sound-toggle-btn:focus,.enc-sound-toggle-btn:active,.enc-sound-toggle-btn:hover{outline:none;box-shadow:none;background:transparent}
  .enc-sound-toggle-btn svg{width:16px;height:16px;stroke:rgba(238,238,238,0.9);stroke-width:1.5;fill:none}
  .enc-sound-toggle-btn .sound-on{display:none}
  .enc-sound-toggle-btn .sound-off{display:block}
  .enc-sound-toggle-btn.unmuted .sound-on{display:block}
  .enc-sound-toggle-btn.unmuted .sound-off{display:none}
  @media(max-width:768px){.enc-text-row{gap:5px}.enc-sound-toggle-btn{width:24px;height:24px}.enc-sound-toggle-btn svg{width:14px;height:14px}}
  .enc-overlay{position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 80px 20px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:200;text-align:center;line-height:normal;font-size:16px;opacity:1;transition:opacity 0.5s ease;pointer-events:none}
  .enc-overlay>*{pointer-events:auto}
  .enc-fade-hidden{opacity:0!important;pointer-events:none!important}
  .enc-text{margin-bottom:15px;font-size:13px;letter-spacing:0.5px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.9);color:var(--enc-text-color);line-height:1.4}
  .enc-text-small{margin-bottom:10px;font-size:11px;letter-spacing:0.5px;text-shadow:0 1px 3px rgba(0,0,0,0.9);color:rgba(238,238,238,0.8);line-height:1.4}
  .enc-btn{background:rgba(255,255,255,0.9);color:black;border:none;font-weight:normal;text-transform:none;font-size:12px;cursor:pointer;letter-spacing:1px;max-width:450px;width:100%;border-radius:50px;transition:transform 0.2s;height:44px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;text-decoration:none;margin-bottom:12px}
  .enc-btn:active{transform:scale(0.98)}
  .enc-btn-secondary{background:transparent;color:#eee;border:1.5px solid #eee;font-size:12px;cursor:pointer;letter-spacing:1px;max-width:450px;width:100%;border-radius:50px;height:44px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:normal;margin-bottom:12px}
  .enc-btn-secondary:hover{background:rgba(255,255,255,0.1)}
  .enc-link{color:#eee;font-size:12px;text-decoration:underline;cursor:pointer;background:none;border:none;padding:8px;letter-spacing:0.5px;margin-top:4px}
  .enc-link:hover{color:#fff}
  .enc-buttons{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
  .enc-input{background:var(--enc-glass-bg);border:1px solid var(--enc-glass-border);color:#000;font-size:12px;font-weight:normal;padding:0 20px;width:100%;max-width:450px;margin-bottom:12px;backdrop-filter:blur(5px);text-align:center;border-radius:50px;height:44px;min-height:44px;max-height:44px;box-sizing:border-box;transition:background-color 0.3s ease;-webkit-appearance:none;appearance:none}
  .enc-input::placeholder{color:#eee;opacity:1;font-size:12px}
  .enc-input:focus{outline:none;background:rgba(255,255,255,0.4)}
  .enc-input:not(:placeholder-shown){background-color:#fff}
  .enc-disclaimer{max-width:450px;width:100%;margin-top:2px;padding:0 10px;box-sizing:border-box}
  .enc-disclaimer p{font-size:10px;line-height:1.4;color:rgba(238,238,238,0.75);text-align:center;margin:0}
  .enc-step{display:flex;flex-direction:column;align-items:center;width:100%}
  .enc-hidden{display:none!important}
  #enc-form-part-1,#enc-form-part-2{width:100%;max-width:450px;display:flex;flex-direction:column;align-items:center}
  .enc-gradient-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;background:linear-gradient(to bottom,#141414 0%,rgba(20,20,20,0.85) 3%,rgba(20,20,20,0.5) 8%,rgba(20,20,20,0.2) 15%,transparent 25%),linear-gradient(to top,rgba(20,20,20,0.65) 0%,rgba(20,20,20,0.45) 10%,rgba(20,20,20,0.25) 18%,rgba(20,20,20,0.1) 26%,transparent 35%),radial-gradient(ellipse farthest-side at 50% 48%,transparent 0%,transparent 38%,rgba(20,20,20,0.02) 42%,rgba(20,20,20,0.06) 48%,rgba(20,20,20,0.15) 54%,rgba(20,20,20,0.3) 60%,rgba(20,20,20,0.5) 66%,rgba(20,20,20,0.72) 74%,rgba(20,20,20,0.88) 84%,#141414 96%)}
  .enc-pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:40px;z-index:150;background:transparent;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
  .enc-video-wrapper.paused .enc-pause-overlay{opacity:1;pointer-events:auto}
  .enc-video-wrapper.video-ended .enc-pause-overlay{opacity:1;pointer-events:auto}
  .enc-pause-btn{width:48px;height:48px;background:rgba(0,0,0,0.5);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease,background 0.2s ease;-webkit-tap-highlight-color:transparent}
  .enc-pause-btn:active{transform:scale(0.9)}
  .enc-pause-btn svg{width:24px;height:24px;fill:white}
  .enc-pause-btn--play{width:64px;height:64px}
  .enc-pause-btn--play svg{width:32px;height:32px}
  .enc-pause-btn--skip{flex-direction:column;gap:2px}
  .enc-pause-btn--skip svg{width:20px;height:20px}
  .enc-pause-btn-label{font-size:10px;font-weight:600;color:white;line-height:1}
  @media(max-width:768px){.enc-pause-overlay{gap:30px}.enc-pause-btn{width:40px;height:40px}.enc-pause-btn svg{width:20px;height:20px}.enc-pause-btn--play{width:56px;height:56px}.enc-pause-btn--play svg{width:28px;height:28px}.enc-pause-btn--skip svg{width:16px;height:16px}.enc-pause-btn-label{font-size:9px}}
  .enc-sort-header{font-size:13px;letter-spacing:0.5px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.9);color:var(--enc-text-color);margin-bottom:6px}
  .enc-sort-subheader{font-size:11px;letter-spacing:0.5px;text-shadow:0 1px 3px rgba(0,0,0,0.9);color:rgba(238,238,238,0.8);margin-bottom:16px}
  .enc-sort-buttons{display:flex;gap:12px;width:100%;max-width:450px}
  .enc-sort-buttons .enc-btn{flex:1;margin-bottom:0}
  .enc-poll-results{width:100%;max-width:450px;margin-bottom:16px}
  .enc-poll-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;color:var(--enc-text-color);letter-spacing:0.5px;text-shadow:0 1px 3px rgba(0,0,0,0.9)}
  .enc-poll-bar-wrap{flex:1;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 12px}
  .enc-poll-bar{height:100%;background:rgba(255,255,255,0.7);border-radius:2px;transition:width 1s ease}
  .enc-no-video-bg{background:#141414}
  .enc-no-video-bg .enc-gradient-overlay{display:none}

  .enc-sound-toggle-btn {
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 250;
    transition: all 0.3s ease;
    padding: 0;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.9));
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .enc-sound-toggle-btn:focus,
  .enc-sound-toggle-btn:active,
  .enc-sound-toggle-btn:hover {
    outline: none;
    box-shadow: none;
    background: transparent;
  }
  .enc-sound-toggle-btn svg {
    width: 16px; height: 16px;
    stroke: rgba(238, 238, 238, 0.9);
    stroke-width: 1.5;
    fill: none;
  }
  .enc-sound-toggle-btn .sound-on { display: none; }
  .enc-sound-toggle-btn .sound-off { display: block; }
  .enc-sound-toggle-btn.unmuted .sound-on { display: block; }
  .enc-sound-toggle-btn.unmuted .sound-off { display: none; }
    .enc-sound-toggle-btn {
      width: 24px;
      height: 24px;
    }
    .enc-sound-toggle-btn svg {
      width: 14px;
      height: 14px;
    }
  .enc-overlay {
    position: absolute; bottom: 0; left: 0;
    width: 100%; padding: 20px 20px 40px 20px;
    background: transparent; display: flex;
    flex-direction: column; align-items: center;
    justify-content: flex-end; z-index: 200;
    text-align: center; line-height: normal; font-size: 16px;
    opacity: 1; transition: opacity 0.5s ease; pointer-events: none;
  }
  .fade-hidden { opacity: 0 !important; pointer-events: none !important; }
  .enc-overlay > * { pointer-events: auto; }
  #enc-below-video {
    background: transparent;
    padding: 20px 20px 0;
    position: relative;
    margin-top: -140px;
    z-index: 210;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: normal;
    font-size: 16px;
  }
  #enc-below-video .enc-below-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  #enc-below-video .enc-below-content.active {
    opacity: 1;
    max-height: 600px;
    pointer-events: auto;
  }
  #enc-below-video .enc-overlay {
    position: static;
    background: transparent;
    padding: 0;
    width: 100%;
    max-width: 310px;
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
  }
  #enc-below-video .enc-overlay > * {
    pointer-events: auto;
  }
  #enc-below-video .enc-overlay.fade-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #enc-below-video .enc-overlay:not(.fade-hidden) {
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  .enc-disclaimer {
    max-width: 310px;
    width: 100%;
    margin-top: 12px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .enc-disclaimer p {
    font-size: 10px;
    line-height: 1.4;
    color: rgba(238, 238, 238, 0.75);
    text-align: center;
    margin: 0;
  }
  #form-part-1, #form-part-2 {
    width: 100%;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sort-poll-heading {
    font-family: "Avenir Next", "AvenirNext-DemiBold", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: none;
    color: #eeeeee;
    line-height: 1.8;
    margin-bottom: 18px;
    text-align: center;
  }
  .sort-poll-row {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 310px;
    position: relative;
  }
  .sort-poll-row .enc-btn {
    flex: 1;
    max-width: none;
    background: #ffffff;
    color: #000000;
    transition: transform 0.2s, opacity 0.5s ease, flex 0.6s ease;
  }
  .sort-poll-bars {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 310px;
    align-items: flex-end;
    justify-content: center;
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease;
    margin-bottom: 0;
  }
  .sort-poll-bars.visible {
    height: 120px;
  }
  .sort-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }
  .sort-bar-pct {
    font-family: "Avenir Next", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    color: #eee;
    margin-bottom: 6px;
    text-shadow: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
  }
  .sort-bar-pct.visible { opacity: 1; }
  .sort-bar-fill {
    width: 38%;
    height: 0;
    border-radius: 2px 2px 0 0;
    transition: height 1.2s ease-out 0.2s;
  }
  .sort-bar-fill--know { background: rgba(255,255,255,0.85); }
  .sort-bar-fill--unknown { background: rgba(80,80,80,0.85); }
  .sort-bar-label {
    font-family: "Avenir Next", sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: none;
    font-weight: 700;
    margin-top: 8px;
    text-shadow: none;
  }
  .enc-section-header {
    font-family: 'Avenir Next', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 16px;
    letter-spacing: 1.6px;
    color: #eeeeee;
    line-height: 26px;
    margin-bottom: 0;
    text-align: center;
  }
  .enc-main-question {
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #eeeeee;
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 22px;
  }
  .enc-footnote {
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #eeeeee;
    margin-top: 6px;
    text-align: center;
  }
  .enc-end-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 310px;
  }
  #sort-overlay .animated-line {
    display: block;
    height: 1px;
    background-color: #eeeeee;
    width: 100%;
    max-width: 310px;
    margin: 2px auto 4px auto;
    transform: scaleX(0);
    transform-origin: left center;
  }
  #sort-overlay .animated-line.is-visible {
    animation: animated-line-fill 1.2s ease-out forwards;
    transform: scaleX(1);
  }
    animation: animated-line-fill 1.2s ease-out 0.3s forwards;
    transform: scaleX(1);
  /* Dark gray animated line for end state (form-part-3) */
  .end-state-line {
    display: block;
    height: 1px;
    background-color: #444444;
    width: 100%;
    max-width: 310px;
    margin: 16px auto 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .end-state-line.is-visible {
    animation: animated-line-fill 1.2s ease-out forwards;
    transform: scaleX(1);
  }
  .end-state-spam-note {
    color: #ffffff;
    font-size: 11px;
    margin-top: 4px;
  }
    #enc-below-video {
      margin-top: 40px;
      padding-top: 15px;
    }
    .enc-main-question {
      font-size: 13px;
      letter-spacing: 1.5px;
    }
  .sort-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0;
    margin-top: 2px;
    font-family: "Magda Clean", Arial, sans-serif;
    color: rgba(238,238,238,0.6);
  }
  .sort-info-row .enc-text {
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 0;
  }
  .sort-info-row .enc-divider {
    font-family: "Magda Clean", Arial, sans-serif;
    font-size: 11px;
    margin-bottom: 0;
  }
  .sort-info-row .sort-sound-on {
    text-decoration: underline;
    cursor: pointer;
  }
  .sort-info-row .enc-sound-toggle-btn {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: inline;
    vertical-align: middle;
    line-height: 1;
    filter: none;
    z-index: auto;
    transition: none;
  }
  .sort-info-row .enc-sound-toggle-btn svg {
    width: 11px;
    height: 11px;
    vertical-align: middle;
  }

/* Ensure poll bars and animated lines work inside enc-overlay */
.enc-overlay .sort-poll-bars {
    margin: 0 auto;
}
.enc-overlay .animated-line {
    margin-left: auto;
    margin-right: auto;
}
.enc-overlay .enc-end-state {
    margin: 0 auto;
}

/* Contributor flow: transparent overlay on video */
.enc-overlay.enc-contrib-active {
  background: transparent;
  justify-content: center;
}

/* Enclave page top spacing */
#enc-container {
  margin-top: 40px;
}

/* Note dropdown font — match accordion body text */
.product--wrapper .product-collapsible-note .product-accordion--heading-text {
  font-family: 'Magda Clean', Figtree, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.7px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  color: #cccccc !important;
}

/* ── Mobile: Pull Share Hypothesis up to overlap video bottom border ── */
@media (max-width: 749px) {
  #exp-below-video {
    margin-top: -60px !important;
    padding-top: 0 !important;
  }
  [id*="custom_liquid_VidJrny"] .section-spacing {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ── Fix: Results slider gradient must render before video on mobile swipe ──
   Problem: On mobile swipe, the video renders with hard edges before the
   gradient overlay (::after) appears. Video gets its own GPU compositing
   layer via hardware decoding, but the gradient pseudo-element doesn't,
   causing a 1-frame flash of un-masked video edges.
   Fix: Force the gradient ::after onto its own GPU compositing layer with
   transform: translateZ(0) + will-change, and pin the video to z-index: 0
   so the gradient (z-index: 1) is always composited on top. ── */
@media (max-width: 749px) {
  /* Pin video below gradient in stacking order */
  .rs-wrap .product--card-image video {
    z-index: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Force gradient overlay onto its own GPU layer so it paints
     simultaneously with (or before) the video during swipe */
  .rs-wrap .product--card-image::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
  }
}

/* ── Mobile spacing: Share Hypothesis + 100 Participants (2026-03-04) ── */
@media (max-width: 767px) {
  /* 1. Large space below Share Hypothesis to stand as its own section above Results Slider */
  [id*="custom_liquid_VidJrny"] {
    margin-bottom: 60px !important;
  }
  [id*="custom_liquid_dh7K8m"] {
    margin-bottom: 20px !important;
  }

  /* 2. Space below "100 Participants" text */
  [id*="rich_text_V3Qcw7"] .richtext--description {
    padding-bottom: 20px !important;
  }

  /* 3. Even out spacing between "100 Participants" and product buttons */
  [id*="custom_liquid_PrdSldr"] .section-spacing {
    padding-top: 10px !important;
  }
}

/* ── Writing-style line above "WHAT DO YOU SEE?" (K/U + Share Hypothesis) ── */
.ku-writing-line,
.exp-writing-line {
  display: block;
  height: 1.5px;
  background: #ffffff;
  margin: 0 auto;
  opacity: 0.8;
  width: 150px;
}
.ku-writing-line--known {
  background: #000000;
  opacity: 0.5;
}
/* WDYS text sits directly below the writing line on Unknown card */
.ku-overlay-text--unknown .ku-writing-line + p {
  margin-top: 0 !important;
}
/* Share Hypothesis writing line — width matches button row, directly above WDYS */
.exp-writing-line {
  width: 100% !important;
  max-width: 260px;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .ku-writing-line,
  .exp-writing-line {
    width: 130px;
  }
  .exp-writing-line { width: 100% !important; max-width: 230px; }
  .ku-overlay-text--unknown .ku-writing-line + p {
    margin-top: 0 !important;
  }
}

/* ── Share Hypothesis: shrink buttons + spacing (2026-03-04) ── */
.sort-poll-row {
  max-width: 260px !important;
  margin-top: 16px;
  margin-bottom: 14px;
}
.sort-poll-row .exp-btn {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  font-family: "Avenir Next", "AvenirNext-DemiBold", sans-serif !important;
}
@media (max-width: 767px) {
  .sort-poll-row {
    max-width: 230px !important;
  }
  .sort-poll-row .exp-btn {
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 12px !important;
  }
}

/* ============================================================
   KNOWN/UNKNOWN → VIDEO JOURNEY TRANSITION
   Cinematic reveal — cards dissolve, journey emerges
   ============================================================ */

/* Parent wrapper: holds both states, prevents reflow */
.ku-journey-wrapper {
  position: relative;
  background: #141414;
  overflow: visible;
  /* Smooth height morphing between grid and video states */
  transition: min-height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- DEFAULT STATE: K/U Grid visible ---- */

.ku-journey-wrapper .ku-grid {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- PHASE 1: Grid dissolves out ---- */

.ku-journey-wrapper .ku-grid.transitioning-out {
  opacity: 0;
  transform: translateY(-24px);
  filter: blur(6px);
  pointer-events: none;
}

/* ---- PHASE 2: Grid fully hidden ---- */

.ku-journey-wrapper .ku-grid.ku-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ---- VIDEO JOURNEY: hidden by default inside wrapper ---- */

.ku-journey-wrapper #exp-master-container {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* ---- PHASE 2: Journey expanding in (staggered after grid exits) ---- */

.ku-journey-wrapper #exp-master-container.expanding {
  opacity: 0.5;
  transform: translateY(10px);
  filter: blur(2px);
  pointer-events: none;
}

/* ---- PHASE 3: Journey fully active ---- */

.ku-journey-wrapper #exp-master-container.active-journey {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* ---- BELOW-VIDEO content follows the same reveal timing ---- */

.ku-journey-wrapper #exp-below-video {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.ku-journey-wrapper #exp-master-container.active-journey ~ #exp-below-video,
.ku-journey-wrapper .journey-active #exp-below-video {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Mobile adjustments ---- */

@media (max-width: 768px) {
  .ku-journey-wrapper .ku-grid.transitioning-out {
    transform: translateY(-16px);
    filter: blur(4px);
  }

  .ku-journey-wrapper #exp-master-container {
    transform: translateY(14px);
  }
}

/* K/U "Contribute" label above buttons */
.ku-contribute {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #eeeeee;
  text-align: center;
  margin: 0 0 10px;
}

/* K/U videos — poster image shows as placeholder until video plays */

/* K/U SORT BUTTONS — refined ghost pills */
.ku-sort-btn-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
  margin: 0 auto 6px;
  z-index: 10;
  position: relative;
  pointer-events: auto;
}
.ku-sort-btn {
  border: 1px solid rgba(255,255,255,0.6);
  font-family: "Avenir Next", "Avenir Next W01", sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 12px;
  letter-spacing: 1.2px;
  cursor: pointer;
  border-radius: 50px;
  height: 36px;
  min-width: 140px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  transition: transform 0.2s, border-color 0.25s;
  pointer-events: auto;
  white-space: nowrap;
}
/* Desktop: buttons centered on top of videos */
.ku-overlay-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 5;
}
/* Mobile: buttons flow below videos instead of overlaying */
@media (max-width: 767px) {
  .ku-overlay-btn {
    position: static;
    padding: 6px 0 2px;
  }
}
.ku-sort-btn--know {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
.ku-sort-btn--know:hover {
  background: #eeeeee;
  border-color: #eeeeee;
}
.ku-sort-btn--unknown {
  background: #141414;
  color: #ffffff;
  border-color: #141414;
}
.ku-sort-btn--unknown:hover {
  background: #222222;
  border-color: #222222;
}
@media (max-width: 767px) {
  .ku-sort-btn--unknown {
    border-color: rgba(255,255,255,0.6);
  }
}
.ku-sort-btn:active { transform: scale(0.97); }

/* Writing line variant for below-cards section */
.ku-writing-line--below {
  margin-top: 10px;
  margin-bottom: 2px;
}

/* K/U WDYS text — small and bold */
.ku-wdys,
.ku-wdys b {
  font-family: "Magda Clean", Arial, sans-serif;
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 3.5px;
  color: #eeeeee;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}
.ku-wdys--known,
.ku-wdys--known b {
  color: #000000 !important;
  margin-bottom: 2px;
}
.ku-wdys--lg,
.ku-wdys--lg b {
  font-size: 10px;
  letter-spacing: 1.5px;
  line-height: 22px;
}

/* K/U below-info — match .exp-footnote + .sort-info-row from hp-video-journey */
.ku-below-info {
  margin-top: 2px;
  text-align: center;
}
.ku-below-info .ku-info-time,
.ku-below-info .ku-footnote,
.ku-below-info .ku-footnote--sub {
  font-family: "Magda Clean", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  line-height: normal !important;
  color: #eeeeee !important;
  opacity: 1 !important;
  text-align: center;
  margin: 0;
}
.ku-below-info .ku-info-time {
  margin-top: 2px;
}
.ku-below-info .ku-footnote {
  margin-top: 2px;
}

/* K/U writing line — match share hypothesis width, tight to WDYS */
.ku-writing-line {
  max-width: 260px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* K/U spacer — Unknown spacers sized to match Known card line-to-line distance */
.ku-card--unknown .ku-spacer {
  height: 20px !important;
  min-height: 20px !important;
}

/* Video journey wrapper inside K/U section */
.ku-exp-journey {
  width: 100%;
  position: relative;
}

/* Spacing between Global Study text and K/U section */
[id*="KnUnkn"] {
  margin-top: -18px !important;
}

/* K/U WDYS below — repositioned above Share Hypothesis */
.ku-wdys-below {
  text-align: center;
  margin-top: 0;
  padding: 10px 0 20px;
}

/* K/U Share Hypothesis block below grid — matches Global Study section */
.ku-share-hypothesis {
  text-align: center;
  padding: 24px 0 6px;
}
.ku-sh-header {
  font-family: "Avenir Next", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 4px;
}
.ku-sh-label {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}
.ku-sh-main {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 20px;
  color: #eeeeee;
  margin: 0 0 4px;
}
.ku-sh-body {
  font-family: "Magda Clean", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 20px;
  color: #888888;
  margin: 0;
}
@media (max-width: 767px) {
  .ku-sort-btn-row {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .ku-sort-btn {
    height: 28px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    min-width: 110px !important;
    padding: 0 20px !important;
    border-width: 1px !important;
  }
  .ku-contribute {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
  }
  .ku-wdys,
  .ku-wdys b {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
  }
  .ku-below-info .ku-info-time {
    font-size: 8px !important;
  }
  .ku-card--known .ku-footnote {
    font-size: 8px !important;
  }
  .ku-sh-main { font-size: 10px; letter-spacing: 1px; line-height: 16px; }
  .ku-sh-body { font-size: 10px; letter-spacing: 1px; line-height: 16px; }
  .ku-card--unknown .ku-spacer {
    height: 14px !important;
    min-height: 14px !important;
  }
}