/* Mireora collection — uniform horizontal product carousel.
   This file is loaded after styles.css and intentionally overrides all older card experiments. */

#collection {
  overflow: hidden !important;
}

#collection .section-intro {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: clamp(1.25rem, 2vw, 1.8rem) !important;
}

#collection .product-carousel-toolbar {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin: 0 0 1rem !important;
}

#collection .product-carousel-control {
  display: grid !important;
  place-items: center !important;
  width: 3rem !important;
  height: 3rem !important;
  padding: 0 !important;
  border: 1px solid rgba(194, 176, 255, 0.34) !important;
  border-radius: 50% !important;
  background: rgba(22, 18, 31, 0.92) !important;
  color: #f4efff !important;
  font-weight: 500 !important; line-height: 1 !important; font-family: var(--sans) !important;
  cursor: pointer !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease !important;
}

#collection .product-carousel-control:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: rgba(220, 209, 255, 0.72) !important;
  background: rgba(118, 78, 205, 0.28) !important;
}

#collection .product-carousel-control:focus-visible {
  outline: 2px solid #cbbcff !important;
  outline-offset: 3px !important;
}

#collection .product-carousel-control:disabled {
  opacity: 0.32 !important;
  cursor: default !important;
}

#collection .product-grid {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: clamp(1rem, 1.55vw, 1.35rem) !important;
  margin: 0 !important;
  padding: 0 0 1rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 0 !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(155, 122, 230, 0.52) rgba(255, 255, 255, 0.045) !important;
  -webkit-overflow-scrolling: touch !important;
  cursor: grab !important;
}

#collection .product-grid:active {
  cursor: grabbing !important;
}

#collection .product-grid::-webkit-scrollbar {
  height: 0.45rem !important;
}

#collection .product-grid::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#collection .product-grid::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(155, 122, 230, 0.5) !important;
}

/* Every product card has exactly the same dimensions and internal structure. */
#collection .product-card,
#collection .product-card-featured,
#collection .product-card-wide,
#collection .product-card:nth-child(n) {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  isolation: isolate !important;
  flex: 0 0 clamp(19rem, 27vw, 23rem) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 13.25rem minmax(0, 1fr) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 31.5rem !important;
  min-height: 31.5rem !important;
  max-height: 31.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
  border: 1px solid rgba(205, 193, 238, 0.18) !important;
  border-radius: 1.25rem !important;
  background: #17151b !important;
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important;
}

#collection .product-card::before,
#collection .product-card::after {
  content: none !important;
  display: none !important;
}

#collection .product-card:hover {
  transform: translateY(-0.28rem) !important;
  border-color: rgba(205, 190, 255, 0.42) !important;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.28) !important;
}

#collection .product-card-media,
#collection .product-card:nth-child(n) .product-card-media {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 13.25rem !important;
  min-height: 13.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0910 !important;
}

#collection .product-card-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(5, 4, 8, 0) 72%, rgba(5, 4, 8, 0.15) 100%) !important;
}

#collection .product-card-media img,
#collection .product-card:nth-child(n) .product-card-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  transform: scale(1.001) !important;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 260ms ease !important;
}

#collection .product-card:hover .product-card-media img {
  transform: scale(1.035) !important;
  filter: contrast(1.02) saturate(1.03) !important;
}

#collection .product-card-content,
#collection .product-card:nth-child(n) .product-card-content {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 1.3rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
  background: linear-gradient(180deg, #19171d 0%, #141218 100%) !important;
}

#collection .product-card-copy,
#collection .product-card:nth-child(n) .product-card-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 0.55rem !important;
}

#collection .product-card h3,
#collection .product-card:nth-child(n) h3 {
  display: -webkit-box !important;
  max-width: none !important;
  min-height: 3.1rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  color: #f6f3fa !important;
  font-family: var(--sans) !important;
  
  font-weight: 650 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em !important;
  text-wrap: pretty !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#collection .product-card-copy p,
#collection .product-card:nth-child(n) .product-card-copy p {
  display: -webkit-box !important;
  max-width: none !important;
  min-height: 5.65rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  color: #b9b3c0 !important;
  font-family: var(--sans) !important;
  
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* One identical full-width CTA in the same bottom position on every card. */
#collection .product-link,
#collection .product-card:nth-child(n) .product-link {
  position: relative !important;
  inset: auto !important;
  align-self: stretch !important;
  justify-self: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 3.35rem !important;
  height: 3.35rem !important;
  margin: auto 0 0 !important;
  padding: 0 1.2rem !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(190, 167, 255, 0.52) !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(180deg, rgba(132, 87, 227, 0.34), rgba(90, 58, 157, 0.28)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
  color: #fbf9ff !important;
  font-family: var(--sans) !important;
  
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

#collection .product-link span {
  font: inherit !important;
  line-height: inherit !important;
}

#collection .product-link i {
  display: none !important;
}

#collection .product-link:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(225, 215, 255, 0.82) !important;
  background: linear-gradient(180deg, rgba(151, 105, 247, 0.52), rgba(102, 68, 178, 0.4)) !important;
  box-shadow: 0 0.7rem 1.6rem rgba(91, 50, 170, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#collection .product-link:focus-visible {
  outline: 2px solid #cbbcff !important;
  outline-offset: 3px !important;
}

@media (max-width: 68rem) {
  #collection .product-card,
  #collection .product-card-featured,
  #collection .product-card-wide,
  #collection .product-card:nth-child(n) {
    flex-basis: clamp(18.5rem, 43vw, 21.5rem) !important;
  }
}

@media (max-width: 44rem) {
  #collection .product-carousel-toolbar {
    margin-bottom: 0.8rem !important;
  }

  #collection .product-carousel-control {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  #collection .product-grid {
    gap: 0.9rem !important;
    padding-bottom: 0.8rem !important;
  }

  #collection .product-card,
  #collection .product-card-featured,
  #collection .product-card-wide,
  #collection .product-card:nth-child(n) {
    flex-basis: min(84vw, 20.5rem) !important;
    grid-template-rows: 12rem minmax(0, 1fr) !important;
    height: 30.25rem !important;
    min-height: 30.25rem !important;
    max-height: 30.25rem !important;
    border-radius: 1.1rem !important;
  }

  #collection .product-card-media,
  #collection .product-card:nth-child(n) .product-card-media {
    height: 12rem !important;
    min-height: 12rem !important;
  }

  #collection .product-card-content,
  #collection .product-card:nth-child(n) .product-card-content {
    padding: 1.15rem !important;
  }

  #collection .product-card h3,
  #collection .product-card:nth-child(n) h3 {
    min-height: 2.9rem !important;
    
  }

  #collection .product-card-copy p,
  #collection .product-card:nth-child(n) .product-card-copy p {
    min-height: 5.25rem !important;
    
  }
}

@media (prefers-reduced-motion: reduce) {
  #collection .product-card,
  #collection .product-card-media img,
  #collection .product-link,
  #collection .product-carousel-control {
    transition: none !important;
  }

  #collection .product-card:hover,
  #collection .product-link:hover,
  #collection .product-carousel-control:hover:not(:disabled) {
    transform: none !important;
  }
}

/* Softer glass treatment for the carousel's floating navigation buttons. */
#collection .product-carousel-control{
  background:rgba(18,15,26,.55)!important;
  border-color:rgba(194,176,255,.22)!important;
  -webkit-backdrop-filter:blur(16px) saturate(115%)!important;
  backdrop-filter:blur(16px) saturate(115%)!important;
  box-shadow:0 .7rem 1.8rem rgba(0,0,0,.14)!important;
}
#collection .product-carousel-control:hover:not(:disabled){
  background:rgba(111,72,190,.22)!important;
  border-color:rgba(220,209,255,.48)!important;
}