/* Women of the Word: "In every box" trading card section on the product pages.
   Ported from MAE-in-every-box.html (same layout, tilt, worn card look and tap-to-enlarge).
   Everything is scoped to .wotw so it never touches the rest of the site. */
.wotw {
  --w-paper: #F4EFE0; --w-ink: #1F2A44; --w-red: #D9301F; --w-gold: #F4C21E; --w-emerald: #0F8A5F; --w-muted: #6B6352;
  background: var(--w-paper); color: var(--w-ink);
  font-family: "Roboto Serif", Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 48px); border-top: 2px solid var(--w-ink);
}
.wotw *, .wotw *::before, .wotw *::after { box-sizing: border-box; margin: 0; padding: 0; }
.wotw .cond { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.wotw .boxHead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: clamp(20px, 3vw, 34px); }
.wotw .kicker { font-size: 15px; color: var(--w-emerald); margin-bottom: 6px; }
.wotw .boxHead h2 {
  font-family: "Roboto Serif", serif; font-weight: 800; font-variation-settings: "wdth" 50, "opsz" 144; font-stretch: 50%;
  font-size: clamp(46px, 6.2vw, 88px); line-height: .86; color: var(--w-red); text-transform: uppercase; text-shadow: 3px 3px 0 var(--w-gold);
}
.wotw .boxHead p { max-width: 440px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; }
.wotw .boxHead p b { font-weight: 800; }

.wotw .spreads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.wotw .spread { position: relative; border: 2px solid var(--w-ink); overflow: hidden; background-color: #2a2a2a; background-position: center; background-size: cover; }
.wotw .spread::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 36, .15), rgba(20, 24, 36, .55)), radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.3px) 0 0 / 3px 3px;
}
.wotw .pair { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 30px); padding: clamp(26px, 4vw, 44px) clamp(12px, 3vw, 32px) clamp(18px, 3vw, 28px); }
.wotw .c { position: relative; width: min(44%, 230px); aspect-ratio: 750 / 1050; cursor: zoom-in; transition: transform .35s cubic-bezier(.2, .75, .2, 1); background: none; border: 0; padding: 0; }
.wotw .c img {
  width: 100%; height: 100%; display: block; border-radius: 5.5% / 3.9%;
  filter: sepia(.14) saturate(.92) contrast(1.02);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 14px 26px rgba(0, 0, 0, .45), 0 3px 6px rgba(0, 0, 0, .35);
}
/* worn edges + paper grain */
.wotw .c::after {
  content: ""; position: absolute; inset: 0; border-radius: 5.5% / 3.9%; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 248, 230, .55), inset 0 0 14px rgba(120, 90, 40, .28);
  background: repeating-linear-gradient(0deg, rgba(90, 70, 30, .05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 15% 8%, rgba(255, 255, 255, .18), transparent 45%);
  mix-blend-mode: multiply;
}
.wotw .c.f { transform: rotate(-3deg); }
.wotw .c.b { transform: rotate(2.5deg) translateY(6px); }
.wotw .c:hover, .wotw .c:focus-visible { transform: rotate(0) translateY(-6px) scale(1.03); outline: none; }
.wotw .tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--w-paper); border: 1.5px solid var(--w-ink); font-size: 12px; padding: 1px 8px; z-index: 2; white-space: nowrap; color: var(--w-ink); }
.wotw .cap { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--w-paper); border-top: 2px solid var(--w-ink); padding: 10px 14px; }
.wotw .cap .n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; }
.wotw .cap .n span { color: var(--w-red); }
.wotw .cap .t { font-size: 14px; color: var(--w-muted); font-style: italic; text-align: right; }

/* collect the set */
.wotw .set { margin-top: clamp(22px, 3vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.wotw .set .cond { font-size: 16px; }
.wotw .slots { display: flex; flex-wrap: wrap; gap: 8px; }
.wotw .slot { width: 34px; height: 47px; border-radius: 4px; border: 1.5px solid var(--w-ink); display: grid; place-items: center; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 14px; background: #E3D8BF; color: var(--w-muted); }
.wotw .slot.got { background: var(--w-red); color: var(--w-paper); border-color: var(--w-red); }

/* lightbox */
.wotw-lb { position: fixed; inset: 0; background: rgba(20, 24, 36, .86); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1000; cursor: zoom-out; }
.wotw-lb.on { display: flex; }
.wotw-lb img { max-height: 88vh; max-width: min(92vw, 520px); border-radius: 3.5% / 2.5%; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); filter: sepia(.1); }
.wotw-lb .x { position: absolute; top: 14px; right: 18px; color: #F4EFE0; font-size: 15px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 520px) {
  .wotw .tag { font-size: 10px; top: -9px; }
  .wotw .cap .t { display: none; }
  .wotw .cap .n { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .wotw * { transition: none !important; } }