.zp-stage-tabs { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
.zp-stage-tabs__list { display:flex; flex-direction:column; gap:8px; }
.zp-stage-tabs__row { display:grid; grid-template-columns:auto 1fr; column-gap:13px; row-gap:12px; align-items:center; width:100%; text-align:left; cursor:pointer; font:inherit; padding:18px 22px; border-radius:16px; border:1px solid var(--ink-200,#e3e5ea); background:transparent; color:var(--ink-600,#5b5d66); transition:background 180ms var(--ease-out,ease), border-color 180ms var(--ease-out,ease); }
.zp-stage-tabs__row:hover { border-color:var(--ink-300,#c5c7cf); }
.zp-stage-tabs__row:focus-visible { outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px rgba(28,65,156,.25); }
.zp-stage-tabs__row.is-open { border-color:transparent; background:var(--grad-zipify,linear-gradient(135deg,#000 0%,#0a3a79 100%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 12px 28px rgba(13,31,78,.22); }
.zp-stage-tabs__num { grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:#e9ecf3; color:var(--ink-600,#5b5d66); font-size:12px; font-weight:900; letter-spacing:.04em; }
.zp-stage-tabs__row.is-open .zp-stage-tabs__num { background:rgba(255,255,255,.12); color:var(--zip-yellow,#ffd748); }
.zp-stage-tabs__title { grid-column:2; grid-row:1; font-size:18px; font-weight:800; letter-spacing:-0.015em; color:var(--ink-600,#5b5d66); }
.zp-stage-tabs__row.is-open .zp-stage-tabs__title { color:#fff; }
.zp-stage-tabs__desc { grid-column:2; grid-row:2; display:none; font-size:15px; line-height:1.6; color:rgba(255,255,255,.76); }
.zp-stage-tabs__row.is-open .zp-stage-tabs__desc { display:block; }
/* Panels stack in the same box so the swap is a real crossfade: the open one holds
   the media column's height, the others sit absolutely on top of it and fade out. */
.zp-stage-tabs__media { position:relative; display:flex; align-items:center; }
.zp-stage-tabs__media[hidden] { display:none; }
.zp-stage-tabs__panel { position:absolute; inset:0; display:flex; align-items:center; width:100%; opacity:0; visibility:hidden; transition:opacity 260ms var(--ease-out,ease), visibility 0s linear 260ms; }
.zp-stage-tabs__panel.is-open { position:relative; inset:auto; opacity:1; visibility:visible; transition:opacity 260ms var(--ease-out,ease), visibility 0s; }
.zp-stage-tabs__panel:focus-visible { outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px rgba(28,65,156,.25); border-radius:12px; }
.zp-stage-tabs__img { width:100%; height:auto; display:block; }
/* Desktop only. The v2 shots are tight crops with six different aspect ratios
   (the cart drawer is nearly square, in-checkout is 16:10), so left to their
   intrinsic height the media column would set the row height and the whole
   section would jump on every tab change. The list is the height authority
   instead: the media column stretches to it and each shot fits inside,
   centred, which is also how the artboard's 535px column lands at 1440. */
@media (min-width:1024px) {
  .zp-stage-tabs__media { align-self:stretch; }
  .zp-stage-tabs__panel { height:100%; }
  .zp-stage-tabs__panel.is-open { position:absolute; inset:0; }
  .zp-stage-tabs__img { max-height:100%; object-fit:contain; object-position:center; }
}
.zp-stage-tabs.has-no-media { grid-template-columns:1fr; }
/* Two defects that only show below the two-column breakpoint, found in Task 8's 390
   pass. `.zp-stage-tabs__row` is a <button>, and the theme's button reset sets
   `white-space:nowrap`, inherited by the title and the description; and grid items
   default to `min-width:auto`, so that no-wrap min-content became the track's floor —
   a 795px single column inside a 294px widget. Both are needed: min-width:0 alone
   lets the track shrink while the text still runs off the edge. */
.zp-stage-tabs > * { min-width:0; }
.zp-stage-tabs__row, .zp-stage-tabs__title, .zp-stage-tabs__desc { white-space:normal; }
@media (max-width:1023px) {
  .zp-stage-tabs { grid-template-columns:1fr; }
  .zp-stage-tabs__panel { position:static; inset:auto; display:none; opacity:1; visibility:visible; padding-top:12px; padding-bottom:32px; }
  .zp-stage-tabs__panel.is-open { display:flex; }
  .zp-stage-tabs__panel:last-of-type { padding-bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  .zp-stage-tabs__row, .zp-stage-tabs__panel { transition:none !important; }
}