:root {
  --rl-look-bg: #000000;
  --rl-look-line: #1c1c1c;
  --rl-look-line-hover: rgba(255, 255, 255, 0.35);
  --rl-look-accent: #ffcc00;
  --rl-look-dim: #999999;
  --rl-look-font-display: var(--font3, 'bebas-neue', Impact, sans-serif);
  --rl-look-font-mono: var(--font1, 'Courier Prime', 'Courier New', ui-monospace, monospace);
}
/* Card Root Container */
.rl-look-card,
.xm-look-tile,
.discover-look-card,
.rl-feed-card {
  position: relative;
  background: var(--rl-look-bg, #000);
  overflow: hidden;
  border: 1px solid var(--rl-look-line, #1c1c1c);
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.rl-look-card:hover,
.xm-look-tile:hover,
.discover-look-card:hover,
.rl-feed-card:hover,
.rl-look-card:focus-within,
.xm-look-tile:focus-within,
.discover-look-card:focus-within,
.rl-feed-card:focus-within {
  border-color: var(--rl-look-line-hover, rgba(255, 255, 255, 0.35));
}
.rl-look-card:hover .rl-look-overlay,
.xm-look-tile:hover .rl-look-overlay,
.discover-look-card:hover .rl-look-overlay,
.rl-feed-card:hover .rl-look-overlay,
.rl-look-card:focus-within .rl-look-overlay,
.xm-look-tile:focus-within .rl-look-overlay,
.discover-look-card:focus-within .rl-look-overlay,
.rl-feed-card:focus-within .rl-look-overlay,
.rl-look-card:hover .discover-look-overlay,
.xm-look-tile:hover .discover-look-overlay,
.discover-look-card:hover .discover-look-overlay,
.rl-feed-card:hover .discover-look-overlay,
.rl-look-card:focus-within .discover-look-overlay,
.xm-look-tile:focus-within .discover-look-overlay,
.discover-look-card:focus-within .discover-look-overlay,
.rl-feed-card:focus-within .discover-look-overlay {
  opacity: 0.95;
}
.rl-look-card:hover .rl-look-info,
.xm-look-tile:hover .rl-look-info,
.discover-look-card:hover .rl-look-info,
.rl-feed-card:hover .rl-look-info,
.rl-look-card:focus-within .rl-look-info,
.xm-look-tile:focus-within .rl-look-info,
.discover-look-card:focus-within .rl-look-info,
.rl-feed-card:focus-within .rl-look-info,
.rl-look-card:hover .discover-look-info,
.xm-look-tile:hover .discover-look-info,
.discover-look-card:hover .discover-look-info,
.rl-feed-card:hover .discover-look-info,
.rl-look-card:focus-within .discover-look-info,
.xm-look-tile:focus-within .discover-look-info,
.discover-look-card:focus-within .discover-look-info,
.rl-feed-card:focus-within .discover-look-info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Image Aspect Ratio Wrapper */
.rl-look-img-wrap,
.discover-look-img-wrap {
  position: relative;
  width: 100%;
  padding-top: var(--aspect, 135%);
  padding-bottom: 0 !important;
  background: #111;
  overflow: hidden;
}
/* Full Tile Clickable Link */
.rl-look-media-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}
/* Picture & Images */
.rl-look-img-wrap picture,
.rl-look-media-link picture,
.discover-look-img-wrap picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rl-look-img-wrap img,
.rl-look-img-wrap picture img,
.rl-look-media-link img,
.rl-look-media-link picture img,
.discover-look-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
/* Gradient Overlay - Dark fade up from bottom (reveals on mouseover) */
.rl-look-overlay,
.discover-look-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 28%, rgba(0, 0, 0, 0.25) 52%, transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
/* Editorial Info Container (reveals on mouseover) */
.rl-look-info,
.discover-look-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 3;
  text-align: left;
  pointer-events: none;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}
@media (max-width: 640px) {
  .rl-look-info,
  .discover-look-info {
    padding: 18px 14px;
  }
}
.rl-look-info a,
.discover-look-info a,
.rl-look-info .rl-look-info-link,
.discover-look-info .rl-look-info-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  pointer-events: auto;
}
/* Kicker: Location (Gold Monospace) */
.rl-look-kicker,
.discover-look-kicker {
  font-family: var(--rl-look-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rl-look-accent, #fc0);
  line-height: 1.35;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .rl-look-kicker,
  .discover-look-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
  }
}
/* Title: LOOK BY [STYLIST] (White Display Bebas Neue) */
.rl-look-title,
.discover-look-title {
  font-family: var(--rl-look-font-display);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .rl-look-title,
  .discover-look-title {
    font-size: 20px;
    margin-bottom: 6px !important;
  }
}
/* Meta: Brands Worn (Subtle Gray Monospace) */
.rl-look-meta,
.discover-look-meta {
  font-family: var(--rl-look-font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--rl-look-dim, #999);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .rl-look-meta,
  .discover-look-meta {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}
/* Top-Right Like Button */
.rl-look-card .like-button.cache-safe-likebutton,
.xm-look-tile .like-button.cache-safe-likebutton,
.discover-look-card .like-button.cache-safe-likebutton {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  filter: drop-shadow(0 1px 15px rgba(0, 0, 0, 0.7));
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.rl-look-card .like-button.cache-safe-likebutton:hover,
.xm-look-tile .like-button.cache-safe-likebutton:hover,
.discover-look-card .like-button.cache-safe-likebutton:hover {
  opacity: 1;
  transform: scale(1.1);
}
.rl-look-card .like-button.cache-safe-likebutton:before,
.xm-look-tile .like-button.cache-safe-likebutton:before,
.discover-look-card .like-button.cache-safe-likebutton:before {
  background-color: var(--xm-like-button, #fff);
  width: var(--xm-like-icon-width, 24px);
  height: var(--xm-like-icon-height, 24px);
  transition: background-color 0.2s ease;
}
.rl-look-card .like-button.cache-safe-likebutton:hover:before,
.xm-look-tile .like-button.cache-safe-likebutton:hover:before,
.discover-look-card .like-button.cache-safe-likebutton:hover:before,
.rl-look-card .like-button.cache-safe-likebutton.active:before,
.xm-look-tile .like-button.cache-safe-likebutton.active:before,
.discover-look-card .like-button.cache-safe-likebutton.active:before {
  background-color: #fff;
  -webkit-mask-image: var(--xm-like-icon-active) !important;
  mask-image: var(--xm-like-icon-active) !important;
}
/* Community Badge */
.rl-look-card .rl-card-badge-top {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  pointer-events: none;
}
.rl-look-card .rl-feed-pill {
  display: inline-block;
  font-family: var(--rl-look-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Hide legacy overlay if present */
.rl-look-card .rl-card-overlay {
  display: none !important;
}
/* Fallback Media */
.rl-look-card .fallback,
.xm-look-tile .fallback {
  position: absolute;
  inset: 0;
  background: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 32px;
}