/* -------------------------------------------------------------
   Video Archive (product_cat term with ACF field: video_archive)
   Uses the same ATF / grid UI as the single-model page.
-------------------------------------------------------------- */

body.mf-video-archive #manure-video-category-wrapper{
  padding: 0;
}

body.mf-video-archive #manure-video-category-wrapper > h1.page-title{
  display: none;
}

/* Breadcrumbs can be output by WooCommerce, Astra, SEO plugins, etc.
   Hide them on video archives so the ATF+grid aligns at the very top. */
body.mf-video-archive .woocommerce-breadcrumb,
body.mf-video-archive nav.woocommerce-breadcrumb,
body.mf-video-archive .breadcrumb.breadcrumbs.woo-breadcrumbs,
body.mf-video-archive .breadcrumb-trail,
body.mf-video-archive .ast-breadcrumbs-wrapper,
body.mf-video-archive .ast-breadcrumbs,
body.mf-video-archive .ast-breadcrumb,
body.mf-video-archive .rank-math-breadcrumb,
body.mf-video-archive #breadcrumbs{
  display:none !important;
}

/* Remove Astra's top spacing so content touches the header */
body.mf-video-archive .site-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Make the Astra container full-width on these archives */
body.mf-video-archive .site-content .ast-container{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Remove extra top spacing so the ATF/grid starts flush under the header */
body.mf-video-archive .mf-model-scenes{
  padding-top: 0 !important;
}
body.mf-video-archive .mf-scenes-toolbar{
  margin-top: 0 !important;
}

/* Toggle icon (same asset as single-model) */
body.mf-video-archive .mf-filter-toggle__img{
  width: 22px;
  height: 22px;
  display: block !important;
  object-fit: contain;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) invert(1) !important;
}

/* We only use the toggle button (no separate close button) */
body.mf-video-archive .mf-drawer-close{ display:none; }

/* Tag search (match the single-model ATF styling) */
body.mf-video-archive .mf-tag-search__input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  color: #000;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

body.mf-video-archive .mf-tag-search__input::placeholder{
  color: #000;
  opacity: .55;
}

body.mf-video-archive .mf-tag-search__input:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}


/* Toolbar inputs on video archives need the same overrides as single-model
   (model-single.css scopes some rules to body.single-model). */
body.mf-video-archive .mf-scenes-sort{
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background-color: transparent !important;
  color: #fff !important;
  padding: 0 34px 0 10px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 16px 16px, 100% 100%;
}

body.mf-video-archive .mf-scenes-search__input{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding: 0 34px 0 10px;
  margin: 0;
}

body.mf-video-archive .mf-scenes-search__input::placeholder{
  color: rgba(255,255,255,.55);
  opacity: 1;
}

/* remove browser decorations that can show weird icons */
body.mf-video-archive .mf-scenes-search__input::-webkit-search-decoration,
body.mf-video-archive .mf-scenes-search__input::-webkit-search-cancel-button,
body.mf-video-archive .mf-scenes-search__input::-webkit-search-results-button,
body.mf-video-archive .mf-scenes-search__input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

body.mf-video-archive .mf-scenes-search__clear{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
  color: inherit;
  padding: 0;
}
body.mf-video-archive .mf-scenes-search__clear:hover{ opacity: 1; }

/* Titles: remove any pill background + keep text readable */
body.mf-video-archive .manure-video-title{
  background: transparent !important;
}

body.mf-video-archive .manure-video-title h2,
body.mf-video-archive .manure-video-title h3{
  margin: 0 !important;
  color: #fff !important;
  background: transparent !important;
  padding: 0 !important;
  opacity: .9;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
  font-size: 15px;
  line-height: 1.2;
}

@media (max-width: 600px){
  body.mf-video-archive .manure-video-title h2,
  body.mf-video-archive .manure-video-title h3{ font-size: 14px; }
}

/* Mobile preview transition states (copied from model-single.css, scoped) */
body.mf-video-archive .manure-video-container img{
  transition: opacity .35s ease, filter .35s ease;
}

body.mf-video-archive .manure-video-container video{
  opacity: 0;
  transition: opacity .35s ease;
}

/*
  IMPORTANT:
  The global theme CSS (style.css) applies a legacy "hover = fade image out + show video + dark gradient" rule
  for ALL .manure-video-container tiles on desktop.
  Our ATF archives (video archives + tag archives) have their own hover/tap preview manager.
  If we don't neutralize the legacy hover rules here, users see a double-hover effect:
  blur transition (new) + dark gradient/fade (legacy).
*/
@media (hover: hover) and (pointer: fine) {
  /* Remove the legacy gradient overlay pseudo-element */
  body.mf-video-archive .manure-video-container::after{
    content: none !important;
    opacity: 0 !important;
    background: none !important;
  }

  /* NOTE:
     We intentionally do NOT force image/video opacity on :hover here.
     The hover preview transition (blur → video) is defined further below.
     Forcing opacity at this layer would prevent videos from ever becoming
     visible on desktop hover.
  */

  /* Re-apply our preview state (wins over :hover) */
  body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) img{ opacity: 0 !important; }
  body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) video,
  body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) video.manure-background-video{ opacity: 1 !important; }
}

body.mf-video-archive .manure-video-container .manure-video-title{
  opacity: 1;
  transition: opacity .2s ease;
}

/* Ensure overlays (auction meta / tap banner) can be positioned reliably */
body.mf-video-archive .manure-video-container{
  position: relative;
  overflow: hidden;
}

body.mf-video-archive .manure-video-container.mf-loading:not(.mf-no-video) img{
  filter: blur(6px) saturate(1.2);
  opacity: 1;
}

body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) img{
  opacity: 0;
}

body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) video{
  opacity: 1;
}

/* Keep titles visible during preview (matches our archive UX) */
body.mf-video-archive .manure-video-container.mf-preview:not(.mf-no-video) .manure-video-title{
  opacity: 1;
}

/*
  Legacy CSS (older #manure-video-category-wrapper styles) hides titles
  on large screens using very specific ID selectors.
  Our ATF archives (categories + tags) should always show the title and
  keep it above hover overlays.
*/
body.mf-video-archive #manure-video-category-wrapper
#manure-video-category-loop-wrapper > ul li .manure-video-title{
  opacity: 1;
  visibility: visible;
  z-index: 35;
}

/* Ensure the title is positioned consistently even if legacy wrappers change */
body.mf-video-archive .manure-video-title{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 35;
  max-width: calc(100% - 20px);
  pointer-events: none;
}

/* Desktop hover blur-first transition (copied from model-single.css) */
@media (hover: hover) and (pointer: fine){
  /*
    Guardrail for optimisation plugins (e.g. WP Rocket "Delay JS execution"):
    our tiles use <video data-src> (no src) until JS initialises.
    If JS is delayed, the default hover swap could reveal a black video frame.
    Until JS marks the page as ready, keep the image visible on hover.
  */
  body.mf-video-archive:not(.mf-video-archive-ready) .manure-video-container:not(.mf-no-video):hover img{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  body.mf-video-archive:not(.mf-video-archive-ready) .manure-video-container:not(.mf-no-video):hover video.manure-background-video{
    opacity: 0 !important;
  }
  body.mf-video-archive .manure-video-container img{
    transition: opacity 420ms ease, filter 420ms ease, transform 420ms ease;
    will-change: opacity, filter, transform;
  }

  body.mf-video-archive .manure-video-container video{
    transition: opacity .42s ease;
    opacity: 0;
    will-change: opacity;
  }

  body.mf-video-archive .manure-video-container:not(.mf-no-video):hover img{
    filter: blur(6px) saturate(1.2);
    transform: scale(1.01);
    /* Blur + zoom happen immediately, image fade waits a moment */
    transition-delay: 0ms, 0ms, 0ms;
    opacity: 0;
    transition-delay: 420ms, 0ms, 0ms;
  }

  body.mf-video-archive .manure-video-container:not(.mf-no-video):hover video{
    opacity: 1;
    transition-delay: 420ms;
  }
  /* Image-only tiles: keep it simple (no blur-to-black). */
  body.mf-video-archive .manure-video-container.mf-no-video img{
    filter: none;
    opacity: 1;
    transform: none;
    transition: transform 220ms ease, opacity 220ms ease;
  }
  body.mf-video-archive .manure-video-container.mf-no-video:hover img{
    transform: scale(1.02);
    opacity: .95;
  }
}

/* ---------------------------------------------------------
   iOS Safari: prevent input-focus zoom
   - iOS Safari auto-zooms inputs/selects with font-size < 16px.
   - On mobile we force 16px for ATF + search UI fields.
   --------------------------------------------------------- */
@media (max-width: 900px){
  body.mf-video-archive .mf-scenes-search__input,
  body.mf-video-archive .mf-tag-search__input,
  body.mf-video-archive .mf-scenes-sort{
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------
   Auction cards: meta overlay (current bid + end date)
   - Desktop: shown on hover
   - Mobile: shown on first tap (JS adds .mf-show-auction-meta)
   --------------------------------------------------------- */
body.mf-video-archive .mf-auction-meta{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 35;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
body.mf-video-archive .mf-auction-meta .star-rating{ display: none !important; }
body.mf-video-archive .mf-auction-meta .price{ display: block; margin: 0 0 4px; font-weight: 700; }
body.mf-video-archive .mf-auction-meta .auction_end_start{ display: block; opacity: .85; }
body.mf-video-archive .mf-auction-meta .ywcact_auction_end_start_label{ opacity: .75; margin-right: 4px; }

@media (hover: hover) and (pointer: fine){
  body.mf-video-archive .manure-video-container:hover .mf-auction-meta{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: none) and (pointer: coarse){
  body.mf-video-archive .manure-video-container.mf-show-auction-meta .mf-auction-meta{
    opacity: 1;
    transform: translateY(0);
  }
}

/* If the "tap again to open" banner is shown, lift auction meta above it */
body.mf-video-archive .manure-video-container.mv-show-banner .mf-auction-meta{
  bottom: 44px;
}

/* ---------------------------------------------------------
   Mobile: "Tap again to open" banner
   (Used on video tiles + auction tiles on ATF archives)
   --------------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  body.mf-video-archive .mv-tap-banner{
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,.72);
    color: rgba(255,255,255,.96);
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    z-index: 40;
  }

  body.mf-video-archive .manure-video-container.mv-show-banner .mv-tap-banner{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   Grid safety net
   Some Astra / Woo layouts can force column counts.
   Ensure our ATF archives always render 3 / 2 / 1 columns.
   --------------------------------------------------------- */
body.mf-video-archive ul.products.mf-model-products{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

@media (max-width: 1100px){
  body.mf-video-archive ul.products.mf-model-products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px){
  body.mf-video-archive ul.products.mf-model-products{
    grid-template-columns: 1fr !important;
  }
}


/* Product tag archive: locked base tag (cannot be toggled) */
.mf-tag.is-locked .mf-tag__btn {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.mf-tag.is-base {
  /* make sure the base tag is clearly active */
}