/* ═══════════════════════════════════════
   WALLPAPERS CATALOG PAGE
═══════════════════════════════════════ */

/* ─── Page ─── */
.wp-page {
  background: #F2F2F2;
  color: #303030;
}

/* ─── Page header: heading + subtitle ─── */
.wp-header {
  padding: 10.5vw 5.208vw 2.5vw;
}

.wp-heading {
  font-family: var(--font-ui);
  font-size: 1.875vw;
  font-weight: 400;
  color: #303030;
  text-align: left;
  line-height: 1.15;
  margin-bottom: 0.83vw;
}

.wp-subtitle {
  font-family: var(--font-display);
  font-size: 1.02vw;
  font-weight: 400;
  color: #303030;
  text-align: left;
  margin: 0;
}

/* ─── Filters ─── */
.wp-filters {
  padding: 0 5.208vw 3.5vw;
  display: flex;
  align-items: center;
  gap: 1.25vw;
}

/* wp-pill extends mp-pill — adds gap for tag text, active fills dark */
.wp-pill {
  gap: 0.4vw;
}

.mp-pill.wp-pill--active,
.mp-pill.wp-pill--active:hover {
  background: #303030;
  color: #F2F2F2;
}

.wp-pill--soon {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

.wp-pill__tag {
  font-size: 0.68em;
  opacity: 0.75;
}

/* ─── Card grid ─── */
/* Detail-view order: carousel (top) -> grid.
   Top padding zeroed — 9.375vw top space now sits on .wp-detail-nav above. */
.wp-grid {
  padding: 0 5.208vw 2vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 1.563vw;   /* match print-shop card-to-card gap */
  row-gap: 1.563vw;      /* match print-shop card-to-card gap */
}

/* ─── Individual card ─── */
.wp-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* Isolate paint/layout to card bounds so 33 cards don't cascade layout work.
     will-change removed — 33 pre-promoted layers strain the compositor;
     the video already owns a GPU layer via its translateZ(0). */
  contain: layout paint;
}

.wp-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #1c1c1c;
  overflow: hidden;
  border-radius: 0;
  contain: layout paint;   /* was strict — size containment fought aspect-ratio auto-height */
}

/* Video shows either its curated poster JPG (preload=none path) or its
   own first frame via metadata (preload=metadata path). play() on hover
   swaps the still to the moving image. */
.wp-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: #1c1c1c;
}

/* ─── Card footer info ─── */
.wp-card__foot {
  padding: 0.73vw 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.26vw;
}

.wp-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.wp-card__title {
  font-family: var(--font-ui);
  font-size: 1.0vw;
  font-weight: 400;
  color: #303030;
}

.wp-card__price {
  font-family: var(--font-ui);
  font-size: 1.0vw;
  font-weight: 400;
  color: #303030;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35vw;
}

/* Discount pricing — shown when cart already has ≥1 item AND this card isn't in cart yet */
.wp-card__price-old {
  color: #999;
  text-decoration: line-through;
  font-size: 0.85vw;
}
.wp-card__price-new {
  color: #2e7d32;
  font-weight: 500;
}

.wp-card__coll {
  font-family: var(--font-ui);
  font-size: 0.748vw;
  font-weight: 400;
  color: #888;
  text-transform: lowercase;
}

.wp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.13vw 0.6vw;
  border-radius: 8.19vw;
  border: 0.059vw solid #888;
  font-family: var(--font-ui);
  font-size: 0.703vw;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
}



/* Footer top padding used by the detail view (overview was removed).
   10.24vw = last-content -> contacts distance, mirrors print-shop swamps
   (.ps-more padding-bottom 8.333vw + .mp-contacts padding-top 1.9045vw). */
.wp-page > .mp-footer {
  padding-top: 10.24vw;
}


/* ═══════════════════════════════════════════════════════
   UPPER CAROUSEL — 1:1 mirror of print-shop .ps-col-nav.
   Landscape 3:2 cards, gap 1.04vw, card 12.5vw.
   Same JS-driven translateX mechanics, same dark overlay on
   inactive cards, same collection name centered on inactive
   cards, same 0.6s ease scale animation.
═══════════════════════════════════════════════════════ */

.wp-detail-nav {
  overflow: hidden;
  padding: 9.375vw 0 2vw;                  /* 9.375vw top = site-wide menu→content standard */
  clip-path: inset(0 5.208vw);             /* Match ps-col-nav — cards peek on both sides */
}

.wp-detail-nav__track {
  display: flex;
  gap: 1.04vw;                             /* Matches ps-col-nav */
  will-change: transform;
}

.wp-detail-nav__card {
  flex: 0 0 12.5vw;                        /* Matches ps-col-nav */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transform: scale(0.94);
  transition: transform 0.6s ease;
}

.wp-detail-nav__img-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;                     /* Landscape, matches ps-col-nav */
  position: relative;
  overflow: hidden;
  background: #1c1c1c;
}

/* Dark overlay on all inactive cards — mirrors .ps-col-nav__img-wrap::after */
.wp-detail-nav__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.wp-detail-nav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Collection name overlay — centered on card, visible on INACTIVE cards only.
   Fades out when card becomes active (0.4s, matches ps-col-nav). */
.wp-detail-nav__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 1vw;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
  padding: 0 0.5vw;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.wp-detail-nav__card--active .wp-detail-nav__name {
  opacity: 0;
}

/* Active card: full brightness, scaled up */
.wp-detail-nav__card--active {
  transform: scale(1.04);
}
.wp-detail-nav__card--active .wp-detail-nav__img-wrap::after {
  opacity: 0;
}

/* Hover on non-active card: lighten overlay slightly */
.wp-detail-nav__card:not(.wp-detail-nav__card--active):hover .wp-detail-nav__img-wrap::after {
  opacity: 0.5;
}

/* Collection heading — SEPARATE element between carousel and grid.
   Original site spacing: nav padding-bottom 2vw + heading padding-top 1.563vw.
   JS pre-formats capitalization. Fades on collection switch. */
.wp-detail-heading {
  font-family: var(--font-ui);
  font-size: 1.875vw;
  font-weight: 400;
  color: #303030;
  line-height: 1.15;
  padding: 1.563vw 5.208vw 2.083vw;
  text-align: center;
  margin: 0;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.wp-detail-heading--fading {
  opacity: 0;
}

/* Back-to-collections CTA — mirrors .ps-back-cta padding. Sits after the grid. */
.wp-back-cta {
  padding: 2.604vw 0 0.781vw;
  display: flex;
  justify-content: center;
}
.wp-back-btn {
  cursor: pointer;
}
/* ─── Hover shimmer on card media ─── */
.wp-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  pointer-events: none;
}

.wp-card:hover .wp-card__media::after {
  background: rgba(0, 0, 0, 0.06);
}