/* ==========================================================================
   OUR WINES — WooCommerce archive
   Shared archive filter, sidebar, accordion, selected-pill and mobile-overlay
   styles now live in desktop.css and responsive.css.
   ========================================================================== */




/* --------------------------------------------------------------------------
   PRODUCT SEARCH RESULTS
   -------------------------------------------------------------------------- */

.our-wines-search-header {
  display: block;
}

.our-wines-sidebar .our-wines-search-header h1 {
  margin-bottom: 0.375rem;
}

.our-wines-search-subtitle {
  margin: 1rem 0 0 0;
  font-size: var(--font-size-h5);
}

.our-wines-search-again {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-family-heading);
}

.our-wines-sidebar-header .our-wines-search-again {
  margin-top: 3rem;
}

/*
 * The normal archive reserves this space for selected-filter pills. Keep the
 * product grid at the same vertical position on search results without
 * rendering any filter UI.
 */
.our-wines-search-results-offset {
  min-height: 1.25rem;
  margin: 0 0 3.125rem;
}

@media (max-width: 991px) {
  .our-wines-search-sidebar {
    margin-bottom: 1rem;
  }

  .our-wines-search-results-offset {
    min-height: 0;
    margin-bottom: 0;
  }
  
  .our-wines-sidebar-header .our-wines-search-again {
    margin-top:1rem;
  }
  
  
}


/* --------------------------------------------------------------------------
   PRODUCT SKELETON LOADING
   -------------------------------------------------------------------------- */

.our-wines-product-skeleton {
  overflow: hidden;
  pointer-events: none;
  background: var(--color-background-creame);
}

.our-wines-product-skeleton:hover {
  background: var(--color-background-creame);
}

.our-wines-product-skeleton-link {
  min-height: 100%;
}


/*
 * The skeleton reuses .our-wines-product-media and .our-wines-product-title,
 * so its height, aspect ratio, spacing and responsive behaviour remain exactly
 * aligned with the real WooCommerce product card.
 */
.our-wines-skeleton-media,
.our-wines-skeleton-line {
  position: relative;
  overflow: hidden;
  background: var(--color-background-hover, #dedfd2);
}

.our-wines-skeleton-media::after,
.our-wines-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 55%),
    transparent
  );
  animation: our-wines-shimmer 1.25s infinite;
}

.our-wines-skeleton-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.our-wines-skeleton-line {
  display: block;
  width: 88%;
  height: 0.875rem;
}

.our-wines-skeleton-line.is-short {
  width: 58%;
}

@keyframes our-wines-shimmer {
  100% {
    transform: translateX(100%);
  }
}


/* --------------------------------------------------------------------------
   PRODUCT EMPTY STATE / LOAD MORE
   -------------------------------------------------------------------------- */

.our-wines-empty-state {
  padding: 0;
  text-align: left;
}

.our-wines-empty-state h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.our-wines-empty-state p {
  margin-bottom: 1.5rem;
}

.our-wines-load-more-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.5rem;
}

.our-wines-load-more {
  min-width: 8.1875rem;
}

.our-wines-load-more[hidden],
.our-wines-empty-state[hidden] {
  display: none;
}

.our-wines-load-more:disabled {
  cursor: wait;
  opacity: 0.65;
}


@media (prefers-reduced-motion: reduce) {
  .our-wines-product-image {
    transition: none;
  }

  .our-wines-skeleton-media::after,
  .our-wines-skeleton-line::after {
    animation: none;
  }
}