/**
 * RW - Looks : "Vos looks" shoppable gallery.
 * Consumes Hummingbird/Bootstrap variables, falling back to La Good'as tokens.
 */
.rwlooks {
  --rwl-accent: var(--bs-primary, #c08428);
  --rwl-ink: var(--bs-dark, #14110d);
  --rwl-muted: var(--bs-secondary-color, #8a8175);
  width: 100%;
}

.rwlooks__head { text-align: center; margin: 0 auto 1.5rem; max-width: 720px; }
.rwlooks__eyebrow {
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--rwl-muted); margin: 0 0 0.4rem;
}
.rwlooks__title { color: var(--rwl-ink); margin: 0 0 0.4rem; }
.rwlooks__subtitle { color: var(--rwl-muted); font-size: 0.95rem; margin: 0; }

/* Full-width edge-to-edge strip of square photos */
.rwlooks__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
}

.rwlooks__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  background: #f3ece0;
}
.rwlooks__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.rwlooks__item:hover .rwlooks__img { transform: scale(1.06); }

.rwlooks__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.75rem; text-align: center;
  background: rgba(20, 17, 13, 0.45);
  color: #fff; opacity: 0;
  transition: opacity 0.25s ease;
}
.rwlooks__item:hover .rwlooks__overlay,
.rwlooks__item:focus-visible .rwlooks__overlay { opacity: 1; }

.rwlooks__cart {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.rwlooks__cart::before {
  content: "\1F6D2"; /* shopping cart glyph */
  font-size: 1.05rem; line-height: 1;
}
.rwlooks__label {
  font-size: 0.82rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rwlooks__item--static { cursor: default; }

.rwlooks__follow { text-align: center; margin: 1.25rem 0 0; }
.rwlooks__follow a { color: var(--rwl-accent); font-weight: 600; text-decoration: none; }
.rwlooks__follow a:hover { text-decoration: underline; }

/* Responsive: keep square tiles, fewer columns on smaller screens */
@media (max-width: 992px) { .rwlooks__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px) { .rwlooks__grid { grid-template-columns: repeat(3, 1fr); } }