/* Desktop choreography owns its geometry from entrance through release.
   Keep every rule above the existing 860px mobile breakpoint. */
@media (min-width: 861px) {
  html #taste-stage.taste-stage .taste-stage-intro {
    margin-bottom: 8px !important;
  }
  html #taste-stage.taste-stage .taste-lanes {
    padding-top: 10px !important;
  }
  html #taste-stage.taste-stage .taste-stage-arena {
    padding-top: 0 !important;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-shell {
    position: sticky !important;
    top: var(--header, 72px) !important;
    box-sizing: border-box;
    height: calc(100svh - var(--header, 72px) - 12px);
    display: flex;
    flex-direction: column;
    /* Whatever slack is left after the podium takes its space is split above
       and below, so the frame reads as composed rather than bottom-heavy.
       The arena's layout box stays full size while its paint is scaled down,
       so on a short viewport the column overflows — `safe` keeps that overflow
       out of the bottom instead of pushing the title up under the header. */
    justify-content: center;
    justify-content: safe center;
    padding-top: 0;
    padding-bottom: 16px;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-intro,
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-arena {
    flex: none;
    width: 100%;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-arena {
    transform: scale(var(--desktop-stage-scale, 0.9));
    transform-origin: top center;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-hold {
    height: 125vh !important;
    display: block;
    pointer-events: none;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-plinth {
    opacity: var(--podium-reveal, 0);
    transform: translate3d(0, calc((1 - var(--podium-reveal, 0)) * 40px), 0);
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-plinth-cap {
    transform: none;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-stage-shell::after,
  html[data-skin="nocturne"] #taste-stage.taste-stage.is-desktop-story .taste-stage-shell::after {
    opacity: var(--spotlight-reveal, 0);
    transition: none;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-lane--pick .taste-stage-tabs {
    transform: translate(-50%, calc(-50% + (1 - var(--category-reveal, 0)) * 8px));
    transition: none;
  }
  /* No idle float or hover transition competing with the scrubbed landing. */
  html #taste-stage.taste-stage.is-desktop-story .taste-card--pick {
    animation: none;
  }
  html #taste-stage.taste-stage.is-desktop-story .taste-card-motion,
  html #taste-stage.taste-stage.is-desktop-story .taste-plane {
    transition: none !important;
  }
  html #taste-stage.taste-stage.is-desktop-story.is-settled .taste-plane {
    transform: scale(1) !important;
  }
}

/* A static, readable desktop when animation is disabled. */
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  html #taste-stage.taste-stage .taste-stage-shell {
    position: relative !important;
    top: auto !important;
  }
  html #taste-stage.taste-stage .taste-stage-hold { height: 0 !important; }
  html #taste-stage.taste-stage .taste-lane--pick .taste-stage-tabs {
    transform: translate(-50%, -50%);
  }
}

/* ── Comparison stills are square, and must not be cropped ───────────────────
   Each lane now shows a finished composition — headline, product, feature list
   — not a bare product shot. The frame was 4:5 with a max-height cap on top of
   it, which rendered a landscape strip and cut the headline off the top and the
   features off the bottom. That destroys the one thing the section is for: you
   are meant to be able to read what each of the three approaches produced.

   The stills were square when this was written and the frame was squared to
   match. They are 16:9 now, so the frame follows the art again -- a frame that
   matches the source crops nothing and bands nothing, which is the whole point
   of pinning it at all. Corrected here rather than overridden further down:
   these selectors carry :not(.is-mobile-story) plus a lane class, so anything
   added later with a plainer selector loses to them and the frame silently
   stays as it was. */
#taste-stage .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--diy .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--agency .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--pick .taste-card-shot {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}


/* ── Per-category framing ────────────────────────────────────────────────────
   This was contain, and for good reason at the time: the stills were finished
   compositions with a headline and a feature list baked into the artwork, so
   cropping them cut the words off. The frames were squared to match and the
   few leftover pixels were painted with a colour sampled from each panel's own
   edge.

   The new set is different art. They are bare product shots -- the handbag on
   velvet, the blower on concrete -- and every word that used to live inside the
   picture is now HTML underneath it. Nothing in the image can be cropped into.

   So cover, which is what the 16:9 frames want. The frames land a hair off
   16:9 in places (1.687 on the outer desktop lanes against the source's 1.778)
   because borders and the surrounding layout round the box, and contain
   answers that with bands -- measured at 9px top and bottom. cover answers it
   by losing about 5% off the sides of a full-bleed photograph, which nobody
   will see. A band is always seen. */
#taste-stage .taste-card-shot img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
#taste-stage[data-taste-pack="0"] .taste-card--diy .taste-card-shot { background: #bfb5a8 !important; }
#taste-stage[data-taste-pack="0"] .taste-card--agency .taste-card-shot { background: #fcfcfc !important; }
#taste-stage[data-taste-pack="0"] .taste-card--pick .taste-card-shot { background: #522321 !important; }
#taste-stage[data-taste-pack="1"] .taste-card--diy .taste-card-shot { background: #d3f7db !important; }
#taste-stage[data-taste-pack="1"] .taste-card--agency .taste-card-shot { background: #fdfdfd !important; }
#taste-stage[data-taste-pack="1"] .taste-card--pick .taste-card-shot { background: #34423d !important; }
#taste-stage[data-taste-pack="2"] .taste-card--diy .taste-card-shot { background: #ababaa !important; }
#taste-stage[data-taste-pack="2"] .taste-card--agency .taste-card-shot { background: #fdfdfd !important; }
#taste-stage[data-taste-pack="2"] .taste-card--pick .taste-card-shot { background: #383226 !important; }

/* ── Verdict marks ───────────────────────────────────────────────────────────
   The crosses and the tick were the same muted grey, so the three lanes read as
   three neutral lists rather than as two things you do not want and one you do.
   Colour only — the marks keep the weight and geometry they already had: the
   cross is still the two 44–56% gradient bands, the tick still a 1.5px corner.
   Opacity comes up because a red at half strength on this surface reads brown. */
#taste-stage .taste-card--diy .taste-card-points li::before,
#taste-stage .taste-card--agency .taste-card-points li::before {
  color: #ff6b6b;
  opacity: .92;
}
#taste-stage .taste-card--pick .taste-card-points li::before {
  border-left-color: #4ade80;
  border-bottom-color: #4ade80;
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Category pills: one pill, not two.

   motion.js lays a sliding .ik-indicator over the Fashion / Home / Industrial
   tabs and, while it is present, blanks the selected tab's own background so
   the two do not stack. But the tab already has a pill of its own (#10151c),
   so the indicator is a second copy of the same thing -- and when its measured
   width is wrong it floats free as a black slab that covers the neighbouring
   tab. In the reported case only Fashion and Industrial were legible; Home was
   underneath it.

   The indicator earns nothing here that the tab's own background does not
   already do, so it goes, and the tab gets its pill back. It sits exactly on
   its own label and cannot cover anything.
   ------------------------------------------------------------------------- */
#taste-stage .taste-stage-tabs .ik-indicator { display: none !important; }

#taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
  background: #10151c !important;
  color: #f4f6f9 !important;
}

html[data-skin="nocturne"] #taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
  background: #0b162b !important;
  color: #edf1f8 !important;
}

/* -------------------------------------------------------------------------
   Industrial: the blower reads small against the other two categories, so the
   DIY and Interaktive panels come up a little. The :hover selectors repeat the
   value because page-polish.css pins these images to transform:none to stop
   the old hover zoom -- without them, pointing at a card would drop the image
   back to 1 and it would flinch. The agency panel is left alone; its shot is
   already framed tighter than the other two.
   ------------------------------------------------------------------------- */
#taste-stage[data-taste-pack="2"] .taste-card--diy .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--diy:hover .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--pick .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--pick:hover .taste-card-shot img {
  transform: scale(1.07) !important;
}



/* -------------------------------------------------------------------------
   The rain falls behind this section, not through it.

   .cloud-rain is a fixed page-level layer at z-index 2. #taste-stage was
   position: relative with z-index auto, so it never rose above it, and the
   arena inside sits at z-index 1 -- under the rain. The drops were therefore
   painting over the cards, which reads as weather inside the room.

   z-index 3 is the pattern the page already uses for exactly this: see
   .ribbon-stack and #compare .compare-lite-shell, both of which sit at 3 to
   clear the same layer.
   ------------------------------------------------------------------------- */
#taste-stage.taste-stage {
  position: relative;
  z-index: 3;
}