/* ------------------------------------------------------------------------
  Journals & Planners Catalog (product listing)
  ------------------------------------------------------------------------ */
.catalog{ padding:32px; max-width:1260px; margin:0 auto }
.catalog__header{ display:flex; align-items:center; gap:12px; margin-bottom:18px }
.catalog__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:32px }
@media (max-width: 1100px){ .catalog__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .catalog__grid{ grid-template-columns: 1fr } }

.card{
  background: white; 
  border: 1px solid rgba(0,0,0,0.05); 
  border-radius: 1.25rem; 
  overflow: hidden;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.05),
    0 10px 30px -10px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.01);
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; 
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.08),
    0 20px 40px -15px rgba(102,126,234,0.15),
    0 0 0 1px rgba(102,126,234,0.1);
  border-color: rgba(102,126,234,0.2);
}

.card__media{ 
  aspect-ratio: 1.477;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); 
  border-bottom: 1px solid rgba(0,0,0,0.03); 
  position: relative; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-25deg);
  transition: none;
  z-index: 2;
}

.card:hover .card__media::after {
  left: 150%;
  transition: left 0.8s ease-in-out;
}

.card__media iframe{ 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block; 
  z-index: 1; 
  transition: transform .28s ease;
  object-fit: cover;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none; /* Allow clicks to pass through to parent */
}
.card__media:hover iframe, .card__media:focus-within iframe{ 
  transform: scale(1.02);
}
.media__reveal{ position:absolute; inset:0; padding:16px; display:flex; flex-direction:column; gap:10px; z-index:0; background:linear-gradient(90deg, #fff 0%, #fff 80%, rgba(255,255,255,0) 100%) }
.reveal__title{ margin-left: 52%; font-weight:800; font-size:14px; color:var(--ink) }
.reveal__features{ margin-left: 52%; padding-left:18px; color:var(--ink) }
.reveal__features li{ font-size:12px; margin:4px 0; list-style: disc }
.reveal__cta{ margin-left:52%; margin-top:2px; display:flex; justify-content:center }

/* Catalog-specific CTA styling uses brand focus or per-card --cta */
.catalog .btn--primary{
  background: var(--cta, var(--focus));
  border-color: transparent;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.catalog .btn--primary:hover{ filter:brightness(.95) }
.catalog .btn--primary:active{ filter:brightness(.9) }
.card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.card__title{ font-weight:800 }
.card__offer{ font-size:13px; color:var(--ink); font-weight:600 }
.card__blurb{ font-size:12px; color:var(--muted) }
.features{ margin:6px 0; padding-left:18px; color:var(--ink) }
.features li{ font-size:12px; margin:4px 0; list-style: disc }
.card__meta{ color:var(--muted); font-size:12px }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px }
.badge{
  display:inline-block; padding:.22rem .5rem; border-radius:999px;
  background:var(--soft); border:1px solid var(--soft-2); color:var(--ink);
  font-size:12px; font-weight:600;
}
.card__cta{ align-self:center }
.card__bottom{ margin-top:auto; display:flex; flex-direction:column; gap:10px }
.card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px }
.price{ font-weight:800 }
.price--stack .price__row{ display:flex; align-items:center; gap:10px }
.price__compare{ color:var(--muted); text-decoration: line-through }
.price__current{ color:var(--ink) }
.price__badge{ display:inline-block; padding:.18rem .5rem; border-radius:8px; background:#c1121f; color:#fff; font-weight:800; font-size:12px }
.price__list{ color:var(--muted); font-weight:600; margin-top:4px }
.rating{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px;}
.stars{ color:#f2b01e; letter-spacing:1px }
.ship{ font-size:12px; margin-top:-4px }

/* Mobile-only inline CTA; hide on larger screens */
.cta-inline-mobile{ display:none }
@media (max-width: 940px){
  .cta-inline-mobile{ display:block; margin-top:8px; text-align:center }
  /* hide hover reveal CTA on small screens to avoid duplication */
  .reveal__cta{ display:none }
}

/* Hover-reveal details */
/* Removed hover-reveal details for better UX */