/* 20260727_ui_media_admin_v1 */
.catalog-category {
  --catalog-row-gutter: 14px;
  margin-top: 24px;
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

.catalog-category .catalog-category-title {
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.catalog-category .catalog-category-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.catalog-category .catalog-category-copy h3 {
  overflow: visible;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.02em;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-subtitle {
  overflow: visible;
  color: rgba(178, 183, 198, .82);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-row-controls {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}

.category-row-arrow {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .94);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.category-row-arrow svg {
  width: 19px;
  height: 19px;
}

.category-row-arrow:hover,
.category-row-arrow:focus-visible {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .13);
}

.category-row-arrow:active {
  transform: scale(.94);
}

.category-row-arrow:disabled {
  cursor: default;
  opacity: .34;
  transform: none;
}

.category .catalog-strip,
.category .template-grid.catalog-strip,
.trends-strip.catalog-strip {
  width: calc(100% + var(--catalog-row-gutter)) !important;
  max-width: none !important;
  margin: 0 calc(var(--catalog-row-gutter) * -1) 0 0 !important;
  padding: 0 var(--catalog-row-gutter) 5px 0 !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 0 var(--catalog-row-gutter);
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.category .catalog-strip::-webkit-scrollbar {
  display: none;
}

.category .catalog-strip .template-card,
.category .catalog-strip .trend-card {
  flex: 0 0 clamp(139px, 45vw, 204px) !important;
  width: clamp(139px, 45vw, 204px) !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  background-color: #111217 !important;
  background-image: linear-gradient(110deg, #111217 24%, #1a1c23 38%, #111217 52%);
  background-size: 100% 100%;
}

.category .catalog-strip .template-img,
.category .catalog-strip .template-video,
.category .catalog-strip .template-video-fallback {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #101119 !important;
}

.category .catalog-strip .template-text {
  left: 8px !important;
  right: 8px !important;
  bottom: 9px !important;
}

.category .catalog-strip .template-title {
  display: block;
  overflow: visible;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
  font-weight: 760;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .94);
}

/* v23: every catalog block exposes its real runtime coin cost. */
.catalog-category .price-badge {
  display: inline-flex !important;
}

@media (prefers-reduced-motion: reduce) {
  .category-row-arrow {
    transition: none;
  }
}

@media (max-width: 430px) {
  .catalog-category {
    --catalog-row-gutter: 12px;
  }
}

@media (max-width: 360px) {
  .catalog-category .catalog-category-copy h3 {
    font-size: 16px;
  }

  .category-subtitle {
    font-size: 10.5px;
  }

  .category-row-arrow {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }
}
/* end 20260727_ui_media_admin_v1 */

/* 20260727_intrinsic_media_love_flag_v2 */
.category .catalog-strip {
  align-items: flex-start;
}

.category .catalog-strip .template-card,
.category .catalog-strip .template-card-video {
  aspect-ratio: 9 / 16 !important;
}

.category .catalog-strip .template-card.intrinsic-media-frame {
  aspect-ratio: 9 / 16 !important;
}

.category .catalog-strip .template-media-fill {
  position: absolute;
  inset: -8%;
  z-index: 0;
  width: 116% !important;
  height: 116% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: blur(13px) saturate(.9) brightness(.58);
  transform: scale(1.04);
  background: transparent !important;
  pointer-events: none;
}

.category .catalog-strip .template-img,
.category .catalog-strip .template-video,
.category .catalog-strip .template-video-fallback {
  z-index: 1;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

.category .catalog-strip .template-card::before {
  z-index: 2;
}

.category .catalog-strip .template-text {
  z-index: 3;
}
/* end 20260727_intrinsic_media_love_flag_v2 */

/* 20260728_full_bleed_cards_birthday_v11 */
.category .catalog-strip .template-media-fill {
  display: none !important;
}

.category .catalog-strip .template-card[data-template] .template-img,
.category .catalog-strip .template-card[data-template] .template-video,
.category .catalog-strip .template-card[data-template] .template-video-fallback {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #05060a !important;
}
/* end 20260728_full_bleed_cards_birthday_v11 */

/* catalog-strip-layout-contract */
.catalog-category .catalog-strip .template-card[data-template="trend-home-dance"] .template-img,
.catalog-category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video,
.catalog-category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video-fallback,
.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-img,
.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video,
.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video-fallback {
  object-fit: contain !important;
  object-position: center center !important;
  background: #05060a !important;
  transform: scale(.94) !important;
}

.category .catalog-strip .template-card.template-card-uncropped .template-media-fill,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-media-fill {
  display: block !important;
  z-index: 0 !important;
}

.category .catalog-strip .template-card.template-card-uncropped .template-img,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-img {
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}
/* end catalog-strip-layout-contract */

/* Catalog strip media clarity contract. */
.category .catalog-strip .template-card.template-card-uncropped .template-media-fill,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-media-fill {
  display: block !important;
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  background: transparent !important;
}

.category .catalog-strip .template-card.template-card-uncropped .template-img,
.category .catalog-strip .template-card.template-card-uncropped .template-video,
.category .catalog-strip .template-card.template-card-uncropped .template-video-fallback,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-img,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-video,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-video-fallback {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}

.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-img,
.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video,
.category .catalog-strip .template-card[data-template="trend-home-dance"] .template-video-fallback {
  object-fit: contain !important;
  background: transparent !important;
  transform: none !important;
}

.category .catalog-strip .template-card.template-card-uncropped:not(.template-card-video),
.catalog-category .catalog-strip .template-card.template-card-uncropped:not(.template-card-video) {
  aspect-ratio: 3 / 4 !important;
}

.category .catalog-strip .template-card.template-card-video,
.catalog-category .catalog-strip .template-card.template-card-video {
  aspect-ratio: 9 / 16 !important;
}

.category .catalog-strip .template-card.template-card-uncropped .template-media-fill,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-media-fill {
  display: none !important;
}

/* 20260730_fullbleed_coin_restore_v31 */
.category .catalog-strip .template-card.template-card-uncropped .template-img,
.category .catalog-strip .template-card.template-card-uncropped .template-video,
.category .catalog-strip .template-card.template-card-uncropped .template-video-fallback,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-img,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-video,
.catalog-category .catalog-strip .template-card.template-card-uncropped .template-video-fallback {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #05060a !important;
  transform: none !important;
}

.category .catalog-strip .template-card.template-card-uncropped[data-template="restore-photo"],
.catalog-category .catalog-strip .template-card.template-card-uncropped[data-template="restore-photo"] {
  aspect-ratio: 24 / 43 !important;
}
/* end 20260730_fullbleed_coin_restore_v31 */

/* 20260731_uniform_reels_cards_v34 */
.category .catalog-strip .template-card,
.category .catalog-strip .template-card.template-card-video,
.category .catalog-strip .template-card.template-card-uncropped,
.category .catalog-strip .template-card.intrinsic-media-frame,
.catalog-category .catalog-strip .template-card,
.catalog-category .catalog-strip .template-card.template-card-video,
.catalog-category .catalog-strip .template-card.template-card-uncropped,
.catalog-category .catalog-strip .template-card.intrinsic-media-frame {
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  background: #111217 !important;
}

.category .catalog-strip .template-card .template-media-fill,
.catalog-category .catalog-strip .template-card .template-media-fill {
  position: absolute !important;
  inset: -9% !important;
  z-index: 0 !important;
  display: block !important;
  width: 118% !important;
  height: 118% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: blur(14px) saturate(.92) brightness(.56) !important;
  transform: scale(1.04) !important;
  opacity: .96;
  pointer-events: none;
}

.category .catalog-strip .template-card .template-img,
.category .catalog-strip .template-card .template-video,
.category .catalog-strip .template-card .template-video-fallback,
.catalog-category .catalog-strip .template-card .template-img,
.catalog-category .catalog-strip .template-card .template-video,
.catalog-category .catalog-strip .template-card .template-video-fallback {
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}

.category .catalog-strip .template-card .template-img,
.catalog-category .catalog-strip .template-card .template-img {
  position: relative !important;
}

.category .catalog-strip .template-card .template-video,
.category .catalog-strip .template-card .template-video-fallback,
.catalog-category .catalog-strip .template-card .template-video,
.catalog-category .catalog-strip .template-card .template-video-fallback {
  position: absolute !important;
  inset: 0 !important;
}
/* end 20260731_uniform_reels_cards_v34 */


/* 20260731_uniform_reels_specificity_v35 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-uncropped[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.intrinsic-media-frame[data-template] {
  aspect-ratio: 9 / 16 !important;
  width: var(--catalog-card-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #111217 !important;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-media-fill {
  position: absolute !important;
  inset: -9% !important;
  z-index: 0 !important;
  display: block !important;
  width: 118% !important;
  height: 118% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: blur(14px) saturate(.92) brightness(.56) !important;
  transform: scale(1.04) !important;
  opacity: .96 !important;
  pointer-events: none !important;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-img,
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-video,
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}
/* end 20260731_uniform_reels_specificity_v35 */

/* 20260731_uncropped_safe_area_v37
 * Keep every catalog card at the common 9:16 size while reserving the
 * top price area and bottom title area. The foreground media is always
 * fully visible and cannot sit underneath either overlay.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-img,
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-video,
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-video-fallback {
  inset: 22px 0 auto !important;
  width: 100% !important;
  height: calc(100% - 84px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-media-fill {
  filter: blur(10px) saturate(.96) brightness(.78) !important;
  opacity: 1 !important;
}
/* end 20260731_uncropped_safe_area_v37 */

/* 20260731_full_photo_frame_v38
 * Fill the unchanged catalog frame with the complete photo bitmap.
 * This selector deliberately excludes videos and their fallback posters.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}
/* end 20260731_full_photo_frame_v38 */

/* 20260802_all_video_full_frame_v40
 * Every published card video is native 9:16. Let all video cards occupy the
 * complete existing 9:16 frame instead of inheriting the generic safe area.
 */
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template] > .template-video,
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template] > .template-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}
/* end 20260802_all_video_full_frame_v40 */

/* 20260802_couple_illustration_full_rounded_v41
 * Show the complete couple illustration in the unchanged card frame and
 * explicitly clip its foreground layer to the same rounded corners.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template="trend-couple-illustration"] {
  overflow: hidden !important;
  border-radius: 14px !important;
  isolation: isolate;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template="trend-couple-illustration"] > .template-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 14px) !important;
  background: transparent !important;
  transform: none !important;
}
/* end 20260802_couple_illustration_full_rounded_v41 */

/* 20260802_exhibit_inner_padding_fill_v43
 * Exhibit MP4s contain about 20 px of top and 24 px of bottom padding.
 * Zoom only this media layer so its visible picture fills the unchanged card.
 */
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template="trend-home-dance"] {
  overflow: hidden !important;
  border-radius: 14px !important;
  isolation: isolate;
}

#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template="trend-home-dance"] > .template-video,
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template="trend-home-dance"] > .template-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}
/* end 20260802_exhibit_inner_padding_fill_v43 */

/* 20260805_thoughtful_portrait_full_rounded_v45
 * Keep Thoughtful Portrait edge-to-edge in the unchanged catalog frame and
 * explicitly clip its foreground layer to the same rounded corners.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template=photo-men-009] {
  overflow: hidden !important;
  border-radius: 14px !important;
  isolation: isolate;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template=photo-men-009] > .template-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 14px) !important;
  background: transparent !important;
  transform: none !important;
}
/* end 20260805_thoughtful_portrait_full_rounded_v45 */

/* 20260805_thoughtful_portrait_natural_cover_v46
 * Big Man uses a native 9:16 thumbnail, while Thoughtful Portrait is 3:4.
 * Crop only the side edges so the portrait fills the same frame naturally.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template="photo-men-009"] > .template-img {
  object-fit: cover !important;
  object-position: center center !important;
}
/* end 20260805_thoughtful_portrait_natural_cover_v46 */

/* catalog_comfortable_card_proportion_20260805
 * Keep every catalog tile portrait-oriented while reducing its visual length.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-uncropped[data-template],
#app .screen .category.catalog-category .catalog-strip .template-card.intrinsic-media-frame[data-template] {
  aspect-ratio: 5 / 8 !important;
}

/* catalog_edge_to_edge_media_20260805
 * Every catalog preview uses one sharp foreground layer. Cover fills the
 * complete rounded card without stretching, letterboxing, or blurred copies.
 */
#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-media-fill {
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

#app .screen .category.catalog-category .catalog-strip .template-card[data-template] > .template-img,
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template] > .template-video,
#app .screen .category.catalog-category .catalog-strip .template-card.template-card-video[data-template] > .template-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 14px) !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center center !important;
}
/* end catalog_edge_to_edge_media_20260805 */