/* store-room.css: every store's room (docs/store-room-spec.md 2 and 3, docs/merge-plan.md D5).
   Linked by room-core.js ensureRoom() after room.css on every store page. Since the merge it also holds
   what used to be studio.css: the slides cover's display face, the packages, the music hero, the track
   list, the mini player and the package chooser in the request sheet. Every selector is held to a store
   (body[data-room-kind="store"], .st-room-store, #hero.sf-cover, an sf-, st- or pk- class). Cascade: toolpath.css, palette.css, the page's inline style, room.css, this file.
   The craft colour is decoration only (R7); Hebrew is never letterspaced or set in mono; every
   animation lives under prefers-reduced-motion: no-preference. Contrast (WCAG), measured: cream text
   17.39/16.35/14.76 on the room grounds, --accent-bright 7.99/7.51/6.78, the stamp 7.04, the paper
   ticket's inks 14.18/10.49/7.39 and --sf-deep 6.49; over a plain white owner cover the craft line
   6.61, the name 9.35 and every other line 7.05 or more, 375x812 to 1920x1080. */

/* ---------------------------------------------------------------- tokens */
body[data-room-kind="store"] {
  --sf-paper: #F6F1EA;
  --sf-ink: #2A2018;
  --sf-ink-2: #43352A;
  --sf-ink-3: #5C4B3D;
  --sf-deep: #8E3F1F;
  --sf-glow: color-mix(in srgb, var(--seller) 30%, transparent);
  /* palette.css's sticker keyline for drawn icons on a dark ground */
  --sf-keyline: drop-shadow(1px 0 0 #FFF8EC) drop-shadow(-1px 0 0 #FFF8EC) drop-shadow(0 1px 0 #FFF8EC) drop-shadow(0 -1px 0 #FFF8EC);
}
/* the display face of a store is Suez One at its only weight (R6); room.css reads it through --st-display */
.st-room-store,
body[data-room-kind="store"] .st-foot { --st-display: var(--font-display); }

/* ---------------------------------------------------------------- rhythm and heads */
/* a store has two more sections than a photo studio, so the room's 128px maximum is trimmed to 112px */
.st-room-store .st-sec { padding-block: clamp(56px, 9vw, 112px); }
.st-room-store .st-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.1; letter-spacing: normal; }
.st-room-store .st-lead { max-width: 40em; }
#app .st-room-store .st-count { font-size: .8125rem; color: var(--room-tx3); }
.st-room-store .st-chap-name { font-weight: 400; }
#app .st-room-store .st-chap-n { font-family: var(--font-body); letter-spacing: normal; }
.st-room-store .st-wall h3,
.st-room-store .st-empty h3,
.st-room-store .st-feature figcaption { font-weight: 400; }

/* The toolpath tick: a 2px extrusion before every section kicker (R8). toolpath.css draws its own
   tick before every .kicker in the accent fill; on the store room only the section heads keep one,
   in the kicker's own colour, and the labels inside cards and sheets stand without it. */
#app .st-room-store .kicker:not(.sf-kick)::before,
body[data-room-kind="store"] .st-foot .kicker:not(.sf-kick)::before { display: none; }
#app .st-room-store .sf-kick::before,
body[data-room-kind="store"] .st-foot .sf-kick::before {
  content: ""; display: block; width: 22px; height: 2px; border-radius: 2px; flex: none;
  background: currentColor; transform-origin: right center;
}
[dir="ltr"] #app .st-room-store .sf-kick::before,
[dir="ltr"] body[data-room-kind="store"] .st-foot .sf-kick::before { transform-origin: left center; }
#app .st-room-store .kicker,
body[data-room-kind="store"] .st-foot .kicker { gap: 10px; font-size: .8125rem; font-weight: 500; letter-spacing: normal; }

/* drawn icons outside a .mat-ic wrapper still get the sticker keyline on the dark room */
.st-room-store .sf-craft-ic svg,
.st-room-store .sf-cap-ic svg,
.st-room-store .sf-puck svg { filter: var(--sf-keyline); }
.st-room-store .sf-craft-ic svg > ellipse,
.st-room-store .sf-cap-ic svg > ellipse,
.st-room-store .sf-puck svg > ellipse { display: none; }

/* ---------------------------------------------------------------- COVER (spec 2.1) */
#hero.sf-cover { padding-block-end: 34px; }
#hero.sf-cover #notices { max-width: 720px; }
/* a painted craft cover (re-cut full bleed by tools/cover_renditions.py) keeps its lit workshop,
   which every painting puts on the left, in the phone's narrow frame */
#hero.sf-cover[data-plan="painted"] .hero-bg img { object-position: 24% 50%; }
/* the phone scrim, as measured on the mock; the band and the desktop blocks below replace it */
#hero.sf-cover .hero-bg::after {
  background: linear-gradient(180deg, transparent 16%, rgba(13,12,11,.62) 42%, rgba(13,12,11,.92) 78%, var(--room-0) 100%);
}

/* A phone: the picture is a band that fades into the room, and the identity starts on its dark tail.
   88svh with the words on the picture put the first lines on the bright top of a white cover. */
@media (max-width: 599px) {
  #hero.sf-cover { min-height: 0; padding-block-start: calc(var(--bar-h) + clamp(170px, 50vw, 240px)); }
  #hero.sf-cover .hero-bg { inset-block-end: auto; height: calc(var(--bar-h) + clamp(240px, 70vw, 330px)); }
  #hero.sf-cover .hero-bg::after { background: linear-gradient(180deg, transparent 36%, rgba(13,12,11,.72) 72%, var(--room-0) 100%); }
}

/* A short screen (a phone on its side, a small laptop window): the same band, sized by height.
   It comes BEFORE the 900px block on purpose, so from 900px wide the desktop scrims win over the
   band's (measured at 932x430: craft line 15.1, name 17.4), while its height still applies. */
@media (max-width: 1039px) and (max-height: 540px) {
  #hero.sf-cover { min-height: 0; padding-block-start: calc(var(--bar-h) + clamp(170px, 50vh, 240px)); }
  #hero.sf-cover .hero-bg { inset-block-end: auto; height: calc(var(--bar-h) + clamp(240px, 70vh, 330px)); }
  #hero.sf-cover .hero-bg::after { background: linear-gradient(180deg, transparent 36%, rgba(13,12,11,.72) 72%, var(--room-0) 100%); }
}

/* Between the phone band and the desktop scrims an owner's cover sits under the site bar with only the
   room's top band: over a white upload the wordmark's accent ending measured 2.38:1 at 768px. */
@media (min-width: 600px) and (max-width: 899px) {
  #hero.sf-cover[data-plan="cover"] .hero-bg::before {
    height: 160px; background: linear-gradient(180deg, rgba(13,12,11,.84) 0, rgba(13,12,11,.82) 64px, rgba(13,12,11,0) 160px);
  }
}

/* A store cover is a painting or whatever the maker uploaded, never graded for text: from 900px the
   identity side (inline start, the right in Hebrew) gets its own measured scrim beside the room's
   bottom one. The far side keeps the picture. */
@media (min-width: 900px) {
  #hero.sf-cover { padding-block-end: 60px; }
  #hero.sf-cover[data-plan="painted"] .hero-bg img { object-position: 50% 45%; }
  #hero.sf-cover .hero-bg::after { background:
    linear-gradient(180deg, transparent 34%, rgba(13,12,11,.62) 62%, rgba(13,12,11,.92) 88%, var(--room-0) 100%),
    linear-gradient(270deg, rgba(13,12,11,.8) 0%, rgba(13,12,11,.72) 40%, rgba(13,12,11,.36) 64%, transparent 82%); }
  [dir="ltr"] #hero.sf-cover .hero-bg::after { background:
    linear-gradient(180deg, transparent 34%, rgba(13,12,11,.62) 62%, rgba(13,12,11,.92) 88%, var(--room-0) 100%),
    linear-gradient(90deg, rgba(13,12,11,.8) 0%, rgba(13,12,11,.72) 40%, rgba(13,12,11,.36) 64%, transparent 82%); }
}

/* An owner's shop hides the site bar: #ownerBar and #app's own padding stand in for it, as on the
   classic hero. The band then starts at the top of #app, so on a phone and a short screen it loses
   the bar's height instead of the identity landing on the bright top of the picture. */
body.bar-over-hero.has-owner-bar #hero.sf-cover { padding-block-start: 14px; }
@media (max-width: 599px) {
  body.bar-over-hero.has-owner-bar #hero.sf-cover { padding-block-start: clamp(170px, 50vw, 240px); }
  body.bar-over-hero.has-owner-bar #hero.sf-cover .hero-bg { height: clamp(240px, 70vw, 330px); }
}
@media (max-width: 1039px) and (max-height: 540px) {
  body.bar-over-hero.has-owner-bar #hero.sf-cover { padding-block-start: clamp(170px, 50vh, 240px); }
  body.bar-over-hero.has-owner-bar #hero.sf-cover .hero-bg { height: clamp(240px, 70vh, 330px); }
}

/* The slideshow cover (studio-photo.js, .st-cover-slides) wears sf-cover for the identity, the stamps
   and the bed, but not the band. Below 900px its frames are picked TALL (room-wall.js pickSlides), so a
   band would crop every portrait to its middle. It keeps room.css's full bleed cover (.st-cover:
   88svh, or min(100svh, 920px) from 900px) under the sf-cover scrims, which are at least as dark as
   room.css's at every stop. The 900px side scrim still wins on a short wide screen: nothing here
   touches ::after from 900px. */
@media (max-width: 599px), (max-width: 899px) and (max-height: 540px) {
  #hero.sf-cover.st-cover-slides { min-height: 88svh; padding-block-start: calc(var(--bar-h, 64px) + 22px); }
  #hero.sf-cover.st-cover-slides .hero-bg { inset-block-end: 0; height: auto; }
  #hero.sf-cover.st-cover-slides .hero-bg::after {
    background: linear-gradient(180deg, transparent 16%, rgba(13,12,11,.62) 42%, rgba(13,12,11,.92) 78%, var(--room-0) 100%);
  }
  body.bar-over-hero.has-owner-bar #hero.sf-cover.st-cover-slides { padding-block-start: 14px; }
  body.bar-over-hero.has-owner-bar #hero.sf-cover.st-cover-slides .hero-bg { height: auto; }
}
@media (min-width: 900px) and (max-width: 1039px) and (max-height: 540px) {
  #hero.sf-cover.st-cover-slides { min-height: min(100svh, 920px); padding-block-start: calc(var(--bar-h, 64px) + 22px); }
  #hero.sf-cover.st-cover-slides .hero-bg { inset-block-end: 0; height: auto; }
  body.bar-over-hero.has-owner-bar #hero.sf-cover.st-cover-slides { padding-block-start: 14px; }
  body.bar-over-hero.has-owner-bar #hero.sf-cover.st-cover-slides .hero-bg { height: auto; }
}

/* four first screen buttons beside an 88px name squeeze it onto two lines, so they sit under it */
@media (min-width: 1040px) {
  #hero.sf-cover .st-cover-foot { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 26px; }
  #hero.sf-cover .st-id { max-width: 760px; }
}

/* identity. No .identity class here: the storefront's kept 720px rule would turn it into a row. */
#hero.sf-cover .sf-idrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
#app .st-room-store .avatar.sf-seal {
  width: 52px; height: 52px; border-radius: 14px; background: var(--room-2);
  box-shadow: 0 0 0 1.5px rgba(246,241,234,.2), 0 14px 30px -12px rgba(0,0,0,.8);
}
/* the craft line: drawn icons, each label in its own <bdi>, then the city. Body face, full cream, and
   no kicker tick, although it is a .kicker for the room's type rules. */
#app .st-room-store .kicker.sf-craftline {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0;
  font-family: var(--font-body); font-weight: 500; font-size: .875rem; line-height: 1.5; letter-spacing: normal;
  color: var(--room-tx);
}
#app .st-room-store .kicker.sf-craftline::before { display: none; }
.st-room-store .sf-craft-ic { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.st-room-store .sf-craft-ic svg { width: 24px; height: 24px; }
.st-room-store .sf-city { white-space: nowrap; }
/* the cover badges sit on a picture: their tints are pre-mixed onto room-0 so nothing shows through */
#hero.sf-cover .stamp,
#hero.sf-cover .badge-demo { background-color: #231913; color: var(--accent-bright); border-color: var(--accent-bright); }
#hero.sf-cover .badge-kind { background-color: #242321; color: var(--room-tx); }
#app .st-room-store .stamp,
#app .st-room-store .badge-demo { font-family: var(--font-body); letter-spacing: normal; }
#hero.sf-cover .stamp svg { width: 14px; height: 14px; }
.st-room-store .st-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 10vw, 88px); line-height: 1.04; letter-spacing: normal; }
.st-room-store .sf-owner { margin-block-start: -4px; color: var(--room-tx2); font-weight: 500; font-size: 1rem; overflow-wrap: anywhere; }
/* the proof line's separator belongs to the token after it and hangs in the 24px gap before it; a
   token that starts a wrapped line pushes its dot outside the line, where the clip hides it, so no
   line ends or starts on a lone dot */
.st-room-store .st-proof { overflow: hidden; column-gap: 24px; }
.st-room-store .st-proof-t + .st-proof-t { position: relative; }
.st-room-store .st-proof-t + .st-proof-t::before { content: "·"; content: "·" / ""; position: absolute; inset-inline-start: -24px; width: 24px; text-align: center; color: var(--room-tx3); }
/* the proof line's icon tokens (jobs, and the owner's views): toolpath.css makes every svg a block */
.st-room-store .st-proof-t > span:not(.rating-line) { display: inline-flex; align-items: center; gap: 6px; }
.st-room-store .st-proof-t > svg,
.st-room-store .st-proof-t > span > svg { width: 16px; height: 16px; flex: none; color: var(--accent-bright); }
.st-room-store .sf-where { display: flex; align-items: flex-start; gap: 8px; color: var(--room-tx2); font-size: .9375rem; line-height: 1.5; }
.st-room-store .sf-where svg { width: 18px; height: 18px; flex: none; margin-block-start: 2px; color: var(--accent-bright); }

/* the first screen buttons: under 560px the gold one takes the row and the ghosts share the next */
@media (max-width: 559px) {
  #hero.sf-cover .st-ctas .btn-gold { flex: 1 1 100%; }
  #hero.sf-cover .st-ctas .btn-ghost:not(.btn-icon) { flex: 1 1 auto; }
  .st-room-store .sf-hide-s { display: none !important; }
}

/* the build plate: a ruler along the cover's lower edge, and the purge line at the content edge */
#hero.sf-cover .sf-bed {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 12px; pointer-events: none;
  background:
    repeating-linear-gradient(to left, rgba(246,241,234,.22) 0 1px, transparent 1px 60px) bottom / 100% 10px no-repeat,
    repeating-linear-gradient(to left, rgba(246,241,234,.12) 0 1px, transparent 1px 12px) bottom / 100% 5px no-repeat;
  border-block-end: 1px solid rgba(246,241,234,.1);
}
[dir="ltr"] #hero.sf-cover .sf-bed {
  --sf-purge-from: -64px;
  background:
    repeating-linear-gradient(to right, rgba(246,241,234,.22) 0 1px, transparent 1px 60px) bottom / 100% 10px no-repeat,
    repeating-linear-gradient(to right, rgba(246,241,234,.12) 0 1px, transparent 1px 12px) bottom / 100% 5px no-repeat;
}
#hero.sf-cover .sf-bed::after {
  content: ""; position: absolute; inset-block-end: 0; width: 64px; height: 2px; border-radius: 2px;
  inset-inline-start: max(var(--wrap-x), calc((100% - 1120px) / 2 + var(--wrap-x)));
  background: var(--accent-bright);
}
@media (min-width: 900px) {
  #hero.sf-cover .sf-bed::after { inset-inline-start: max(32px, calc((100% - 1120px) / 2 + 32px)); }
}

/* ---------------------------------------------------------------- WORKS (spec 2.2) */
/* The layer reveal replaces the photo room's develop: no pale filter and no rise, the picture simply
   prints in once it is decoded (the motion block). Static, a decoded work just appears. */
.st-room-store #gallery[data-reveal="print"] .st-tile { transform: none; }
.st-room-store #gallery[data-reveal="print"] .st-tile img { filter: none; transition: transform 600ms var(--st-ease-out); }
.st-room-store .st-tile:focus-visible .sf-puck { opacity: 0; }

/* the material puck: the drawn material on the tile, opaque, so no tile carries a backdrop filter */
.st-room-store .sf-puck {
  position: absolute; z-index: 1; inset-block-end: 10px; inset-inline-end: 10px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13,12,11,.82); box-shadow: 0 0 0 1px rgba(246,241,234,.18);
  pointer-events: none; transition: opacity 180ms ease;
}
.st-room-store .sf-puck svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .st-room-store .st-tile:hover .sf-puck { opacity: 0; }
}
/* the hover caption band sits on at least 78% black (9.05 over a white photo) */
.st-room-store .st-cap {
  padding: 30px 12px 10px;
  background: linear-gradient(to top, rgba(13,12,11,.86) 0, rgba(13,12,11,.78) 62%, transparent 100%);
}
/* the like count, top inline-start (the right in Hebrew); top inline-end holds the photo count of a
   work with several photos (room.css .st-photos). The pill keeps the page's direction, or its logical inset would resolve against LTR and land
   on the other corner; only its number is isolated (room-wall.js writes it in a <bdi dir="ltr">). */
.st-room-store .sf-like-pill {
  position: absolute; z-index: 1; inset-block-start: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: rgba(13,12,11,.82); box-shadow: 0 0 0 1px rgba(246,241,234,.18);
  color: var(--room-tx); font-size: .75rem; font-weight: 600; line-height: 1.5;
  unicode-bidi: isolate; pointer-events: none;
}
/* a work whose file is gone keeps its tone ground, not the browser's broken picture and alt text */
.st-room-store .st-tile.is-broken img { visibility: hidden; }

/* ---------------------------------------------------------------- CRAFT (spec 2.3) */
.st-room-store .sf-caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-start: 34px; }
.st-room-store .sf-cap {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px; border-radius: 18px; background: var(--room-1); border: 1px solid var(--room-line); color: var(--room-tx);
}
.st-room-store .sf-cap-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.st-room-store .sf-cap-ic {
  width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--room-2); box-shadow: inset 0 0 0 1px var(--room-line);
}
.st-room-store .sf-cap-ic svg { width: 32px; height: 32px; }
/* The capability picture was drawn for paper; on the room it stands in a pool of the craft colour.
   Its own contact shadow is part of the drawing, so none is added here. */
.st-room-store .sf-cap-art {
  width: 104px; height: 104px; flex: none; border-radius: 50%;
  margin-block: -10px -18px; margin-inline-end: -8px;
  background: radial-gradient(closest-side, var(--sf-glow), transparent 100%);
}
.st-room-store .sf-cap-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.st-room-store .sf-cap h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4375rem; line-height: 1.25; overflow-wrap: anywhere; }
.st-room-store .sf-cap p { margin: 0; color: var(--room-tx2); font-size: .9375rem; line-height: 1.6; }
@media (max-width: 599px) {
  .st-room-store .sf-cap { padding: 18px; }
  .st-room-store .sf-cap-art { width: 80px; height: 80px; margin-block-end: -26px; }
}

/* a craft the maker named in their own words: the words are the heading, the craft's label a small
   line under it (docs/taxonomy-spec.md 1.6). The own-word crafts of no craft share one card, one heading
   each, so the headings sit closer together than the card's other rows. */
.st-room-store .sf-cap .sf-cap-key { margin-block-start: -6px; color: var(--room-tx2); font-size: .8125rem; font-weight: 500; line-height: 1.45; }
.st-room-store .sf-cap h3 + h3 { margin-block-start: -4px; }

/* the answers a maker gave for this capability (the cap spec) */
.st-room-store .cap-spec { display: grid; gap: 13px; margin: 6px 0 0; }
.st-room-store .cap-spec .cap-band { display: grid; gap: 7px; }
#app .st-room-store .cap-spec dt { font-family: var(--font-body); font-weight: 500; font-size: .8125rem; letter-spacing: normal; color: var(--room-tx3); }
.st-room-store .cap-spec dd { margin: 0; }
#app .st-room-store .cap-spec .chip.static { background: var(--room-2); border-color: var(--room-line); color: var(--room-tx); }
#app .st-room-store .cap-spec .chip.more { background: transparent; border-style: dashed; color: var(--room-tx2); }

/* machines: inside the capability they belong to, and the leftovers in their own sheet (R13) */
.st-room-store .sf-cap-mc { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px dashed rgba(246,241,234,.16); display: grid; gap: 8px; }
.st-room-store .sf-mc-label { font-size: .8125rem; font-weight: 500; color: var(--room-tx3); letter-spacing: normal; }
.st-room-store .sf-machines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-room-store .sf-machines li { display: flex; align-items: center; gap: 10px; min-height: 40px; min-width: 0; }
.st-room-store .sf-machines .ic { flex: none; display: grid; place-items: center; color: var(--accent-bright); }
.st-room-store .sf-machines .ic svg { width: 18px; height: 18px; }
.st-room-store .sf-machines li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1; min-width: 0; }
.st-room-store .sf-machines b { font-weight: 500; font-size: .9375rem; line-height: 1.35; overflow-wrap: anywhere; }
.st-room-store .sf-machines .bed { margin-inline-start: auto; font-size: .75rem; color: var(--room-tx3); white-space: nowrap; }
.st-room-store .sf-machines .badge { flex: none; }
.st-room-store .sf-sheet .sf-machines { gap: 8px; margin-block-start: 18px; }
.st-room-store .sf-sheet .sf-machines li { padding: 10px 12px; border-radius: 12px; background: var(--room-2); }

/* the card grid, by how many capabilities the store has */
@media (min-width: 720px) {
  .st-room-store .sf-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .st-room-store .sf-caps > .sf-cap:nth-child(odd):last-child { grid-column: 1 / -1; }
  /* one card takes the row and splits in two: the words and the answers at the start, the picture
     and the machines at the end */
  .st-room-store .sf-caps[data-n="1"] > .sf-cap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense;
    align-items: start; column-gap: 32px; row-gap: 10px;
  }
  .st-room-store .sf-caps[data-n="1"] .sf-cap-top { display: contents; }
  .st-room-store .sf-caps[data-n="1"] .sf-cap > *,
  .st-room-store .sf-caps[data-n="1"] .sf-cap-ic { grid-column: 1; }
  .st-room-store .sf-caps[data-n="1"] .sf-cap-art { grid-column: 2; grid-row: 1 / span 3; justify-self: center; width: 180px; height: 180px; margin: 0; }
  .st-room-store .sf-caps[data-n="1"] .sf-cap-mc { grid-column: 2; margin-block-start: 0; }
  /* no machines: nothing else stands in the end half, so the picture centres in all of it (an
     absolutely placed grid child with an auto row spans the card's whole height) */
  .st-room-store .sf-caps[data-n="1"] > .sf-cap:not(:has(.sf-cap-mc)) { min-height: 228px; }
  .st-room-store .sf-caps[data-n="1"] > .sf-cap:not(:has(.sf-cap-mc)) .sf-cap-art { position: absolute; grid-row: auto; inset: 0; margin: auto; }
}
@media (min-width: 900px) {
  /* six tracks, so every row closes: three a row, a lone last card takes the row, two last cards halve it */
  .st-room-store .sf-caps:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .st-room-store .sf-caps:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) > .sf-cap { grid-column: span 2; }
  .st-room-store .sf-caps:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) > .sf-cap:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .st-room-store .sf-caps:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) > .sf-cap:nth-child(3n+1):nth-last-child(2),
  .st-room-store .sf-caps:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) > .sf-cap:nth-child(3n+2):last-child { grid-column: span 3; }
}

/* the design note (design only makers) */
.st-room-store .design-note {
  display: flex; gap: 10px; align-items: flex-start; margin-block-start: 16px; padding: 14px 16px;
  border-radius: 12px; background: var(--room-1); border: 1px solid var(--room-line);
  color: var(--room-tx2); font-size: .90625rem; line-height: 1.6;
}
.st-room-store .design-note svg { width: 20px; height: 20px; flex: none; margin-block-start: 2px; color: var(--accent-bright); }
.st-room-store .design-note a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }

/* the shelf: materials, colours, extras and leftover machines, each on its own sheet */
.st-room-store .sf-shelf { display: grid; gap: 16px; margin-block-start: 16px; }
@media (min-width: 900px) {
  .st-room-store .sf-shelf { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .st-room-store .sf-shelf > .sf-sheet:nth-child(odd):last-child { grid-column: 1 / -1; }
}
.st-room-store .sf-sheet {
  container: sf-sheet / inline-size;
  min-width: 0; padding: 22px; border-radius: 18px; background: var(--room-1); border: 1px solid var(--room-line); color: var(--room-tx);
}
.st-room-store .sf-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.st-room-store .sf-sheet-head h3,
.st-room-store .sf-sheet > h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4375rem; line-height: 1.25; }
.st-room-store .sf-note,
.st-room-store .sf-sheet .hint-m { margin: 16px 0 0; color: var(--room-tx2); font-size: .90625rem; line-height: 1.6; }

/* materials: the drawn material and what it is good for */
.st-room-store .sf-mats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-room-store .sf-mats li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 12px; border-radius: 12px; background: var(--room-2);
}
.st-room-store .sf-mats .mat-ic { width: 32px; height: 32px; }
.st-room-store .sf-mats .mat-ic svg { width: 32px; height: 32px; }
.st-room-store .sf-mats b { display: block; font-weight: 500; font-size: .96875rem; line-height: 1.35; }
.st-room-store .sf-mats li span:not(.mat-ic) { display: block; margin-block-start: 2px; color: var(--room-tx3); font-size: .8125rem; line-height: 1.4; }
@media (min-width: 720px) {
  .st-room-store .sf-mats li { flex-direction: row; align-items: center; gap: 12px; }
}
@container sf-sheet (min-width: 600px) {
  .st-room-store .sf-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sf-sheet (min-width: 860px) {
  .st-room-store .sf-mats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* colours: every swatch carries its name; a ring so a black swatch still reads on room-1 (1.07) */
.st-room-store .pal { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 14px 10px; }
.st-room-store .pal li { display: grid; justify-items: center; gap: 7px; min-width: 0; text-align: center; }
.st-room-store .pal .sw {
  width: 40px; height: 40px; border-radius: 50%; background-color: var(--c, #fff);
  border: 1px solid rgba(246,241,234,.24);
  box-shadow: inset 0 -7px 14px -8px rgba(0,0,0,.5), 0 5px 12px -7px rgba(0,0,0,.8);
}
.st-room-store .pal .sw.checker { background-image:
  linear-gradient(45deg, #D8CFC2 25%, transparent 25%, transparent 75%, #D8CFC2 75%),
  linear-gradient(45deg, #D8CFC2 25%, #fff 25%, #fff 75%, #D8CFC2 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.st-room-store .pal .sw.metal { background-image: linear-gradient(140deg, #EBD489 0%, #C9A227 42%, #8B939E 100%); }
.st-room-store .pal .nm { font-size: .8125rem; line-height: 1.3; color: var(--room-tx2); overflow-wrap: anywhere; }
.st-room-store .pal-flags { margin-block-start: 18px; }
#app .st-room-store .sf-sheet .chip.static { background: var(--room-2); border-color: var(--room-line); color: var(--room-tx); }
.st-room-store .sf-sheet .chip.static svg { width: 16px; height: 16px; flex: none; color: var(--accent-bright); }

/* extras: the work that rides along, as tiles */
.st-room-store .extra-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.st-room-store .extra-list li { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--room-2); }
.st-room-store .extra-list .ic {
  width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: rgba(232,144,95,.12); color: var(--accent-bright);
}
.st-room-store .extra-list .ic svg { width: 17px; height: 17px; }
.st-room-store .extra-list b { font-weight: 500; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
@container sf-sheet (min-width: 600px) {
  .st-room-store .extra-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the store's tags (docs/taxonomy-spec.md 3.3): plain words under the about lead, on the chip ground
   the cap spec already measured on the room (cream 16.35 on --room-2) */
.st-room-store .sf-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 40em; }
.st-room-store .sf-tags li { display: flex; min-width: 0; }
#app .st-room-store .sf-tags .chip.static {
  min-height: 34px; max-width: 100%; background: var(--room-2); border-color: var(--room-line); color: var(--room-tx);
  font-size: .875rem; font-weight: 500; letter-spacing: normal; overflow-wrap: anywhere; white-space: normal;
}

/* ---------------------------------------------------------------- ORDER (spec 2.4) */
.st-room-store .sf-order-grid { display: grid; gap: 18px; margin-block-start: 30px; }
@media (min-width: 900px) {
  .st-room-store .sf-order-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
}
.st-room-store .sf-order-facts { min-width: 0; }
.st-room-store .sf-order-facts .st-facts { margin-block-start: 0; }
/* a fact is a dt and a dd only (P3-14): the icon inside the term is placed beside both */
.st-room-store .sf-order-facts .st-fact { display: block; position: relative; padding-inline-start: 62px; }
.st-room-store .sf-order-facts .st-fact-ic { position: absolute; inset-inline-start: 16px; inset-block-start: 14px; }
.st-room-store .st-fact .onmap,
.st-room-store .st-fact .st-onmap { margin-block-start: 10px; }
/* an action in a value (the map link, business M4's info button) takes its own line under the words */
.st-room-store .sf-order-facts dd .st-onmap,
.st-room-store .sf-order-facts dd .linkish { display: flex; width: fit-content; }

/* the paper ticket: the store's paper moment */
.st-room-store .sf-ticket {
  position: relative; min-width: 0; border-radius: 8px;
  background: var(--sf-paper); color: var(--sf-ink);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.95);
}
#app .st-room-store .sf-ticket :focus-visible { outline-color: var(--sf-deep); }
.st-room-store .sf-ticket-main { padding: 26px 24px 24px; }
.st-room-store .sf-ticket-lead { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; text-wrap: balance; color: var(--sf-ink); }
.st-room-store .sf-ticket-main p:not(.sf-ticket-lead) { margin: 14px 0 0; color: var(--sf-ink-2); font-size: 1rem; line-height: 1.6; }
.st-room-store .sf-ticket a:not(.btn) { color: var(--sf-deep); text-decoration: underline; text-underline-offset: 3px; }
.st-room-store .sf-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.st-room-store .sf-steps li { display: flex; gap: 14px; align-items: baseline; color: var(--sf-ink-2); font-size: 1rem; line-height: 1.55; }
.st-room-store .sf-steps .n { flex: none; font-family: var(--font-mono); font-weight: 600; font-size: .8125rem; color: var(--sf-deep); }
/* the stub: a 2px dashed perforation drawn as a background (so it can draw in) and two punched notches
   in the section's ground */
.st-room-store .sf-ticket-stub {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px 24px;
  background:
    linear-gradient(var(--sf-paper), var(--sf-paper)) top left / 0 2px no-repeat,
    linear-gradient(90deg, rgba(42,32,24,.2) 50%, transparent 50%) top left / 10px 2px repeat-x;
}
[dir="ltr"] .st-room-store .sf-ticket-stub { background-position: top right, top left; }
.st-room-store .sf-ticket-stub::before,
.st-room-store .sf-ticket-stub::after {
  content: ""; position: absolute; inset-block-start: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--room-0);
}
.st-room-store .sf-ticket-stub::before { inset-inline-start: -11px; }
.st-room-store .sf-ticket-stub::after { inset-inline-end: -11px; }
.st-room-store .sf-ticket-stub .btn { flex: 1 1 240px; }
.st-room-store .sf-formats { display: flex; align-items: center; gap: 6px; direction: ltr; }
.st-room-store .sf-file { display: grid; place-items: center; margin-inline-end: 4px; color: var(--sf-deep); }
.st-room-store .sf-file svg { width: 24px; height: 24px; }
.st-room-store .sf-formats .fmt {
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(42,32,24,.3);
  font-family: var(--font-mono); font-weight: 600; font-size: .75rem; line-height: 1.4; color: var(--sf-ink);
}
@media (min-width: 900px) {
  .st-room-store .sf-ticket-main { padding: 34px 34px 28px; }
  .st-room-store .sf-ticket-stub { padding: 22px 34px 30px; }
  .st-room-store .sf-ticket-stub .btn { flex: 0 1 auto; margin-inline-start: auto; }
}
/* the ticket's buttons are ink on paper, whatever the enclosure says a button is */
#app .st-room-store .sf-ticket .btn-primary { background: var(--sf-ink); color: var(--sf-paper); border-color: transparent; }
#app .st-room-store .sf-ticket .btn-ghost { background: transparent; border-color: #96806A; color: var(--sf-ink); }
#app .st-room-store .sf-ticket .btn svg { color: currentColor; }

/* A gated store says why it takes no requests where the request button would be (docs/taxonomy-spec.md
   2.5): on the cover in full cream (17.39) with the room's signal colour for the owner's link (7.99), in
   the ticket as its lead in ink on paper, and in the bar as a short line beside the share button. */
#hero.sf-cover .sf-gated { flex: 1 1 100%; margin: 0; color: var(--room-tx); font-size: 1rem; font-weight: 500; line-height: 1.55; }
#hero.sf-cover .sf-gated-link,
.st-room-store .st-bar .sf-gated-link { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
/* the ticket's own paragraph rule (.sf-ticket-main p:not(.sf-ticket-lead)) would win without the p */
.st-room-store .sf-ticket-main p.sf-gated {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35;
  text-wrap: balance; color: var(--sf-ink);
}
.st-room-store .sf-ticket .sf-gated-link { font-family: var(--font-body); font-size: 1rem; white-space: nowrap; }
.st-room-store .st-bar .sf-gated { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--room-tx2); font-size: .875rem; line-height: 1.4; }
/* the share button beside that line keeps its whole label (it spilled out of its outline at 375px) */
.st-room-store .st-bar.paused .st-bar-acts > .btn { flex: 0 0 auto; min-width: max-content; }
.st-room-store .sf-gated-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------- STORY (spec 2.5) */
.st-room-store .st-bio { font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; line-height: 1.85; max-width: 36em; }
.st-room-store .st-about-text .links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
/* the square portrait and its caption are room.css's figure.st-portrait */

/* ---------------------------------------------------------------- REVIEWS (spec 2.6) */
/* one padding for the section: the wrapper is the .st-sec, the inner section adds none */
.st-room-store .st-reviews #reviews { padding-block: 0; }
.st-room-store .st-reviews .inner { max-width: 1120px; }
@media (min-width: 900px) { .st-room-store .st-reviews .inner { padding-inline: 32px; } }
.st-room-store .st-reviews .sec-head { max-width: 720px; }
.st-room-store .st-reviews .sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.1; }
.st-room-store .st-quote blockquote { font-family: var(--font-body); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.5; }
.st-room-store .st-reviews .plate { border-radius: 18px; }
#app .st-room-store .plate::before { display: none; }
#app .st-room-store .rev-sum .small { color: var(--room-tx2); }
/* stars: brass on, and hollow off on the store room, so four of five never reads as five */
#app .st-room-store .stars svg { overflow: visible; }
#app .st-room-store .stars svg.on { fill: #B8800C; stroke: none; }
#app .st-room-store .stars svg:not(.on) { fill: none; stroke: rgba(246,241,234,.56); stroke-width: 1.5; }
/* the receipts keep their character: a dashed edge and two punched notches in the section ground */
#app .st-room-store .receipt {
  padding: 18px 20px 16px; border-radius: 14px; color: var(--room-tx);
  background: var(--room-1); border: 1px dashed rgba(246,241,234,.2);
}
#app .st-room-store .receipt::before,
#app .st-room-store .receipt::after { width: 16px; height: 16px; background: var(--room-0); }
#app .st-room-store .receipt::before { inset-inline-start: -9px; }
#app .st-room-store .receipt::after { inset-inline-end: -9px; }
/* the header's Hebrew in the body face with normal tracking; the kept inline rule sets .06em */
#app .st-room-store .st-reviews .receipt .rh {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px;
  font-family: var(--font-body); font-weight: 500; font-size: .8125rem; letter-spacing: normal; color: var(--room-tx3);
}
#app .st-room-store .receipt .who { color: var(--room-tx); }
#app .st-room-store .receipt .job { color: var(--room-tx3); }
#app .st-room-store .receipt .body { color: var(--room-tx2); }
#app .st-room-store .receipt .reply { background: var(--room-2); border-inline-start: 3px solid var(--accent-bright); }
#app .st-room-store .receipt .reply .eyebrow { color: var(--accent-bright); font-weight: 500; letter-spacing: normal; }
#app .st-room-store .receipt .reply p { color: var(--room-tx2); }
/* report one review (P2-23): a quiet 44px text button at the receipt's foot */
#app .st-room-store .st-reviews .receipt [data-report-review] {
  display: flex; align-items: center; width: fit-content; min-height: 44px; min-width: 44px;
  margin-block-start: 6px; margin-inline-start: auto; padding: 0;
  background: none; border: 0; font: inherit; font-size: .8125rem; color: var(--room-tx3);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#app .st-room-store .st-reviews .receipt [data-report-review]:hover { color: var(--room-tx); }
/* a review's photos (docs/review-photos-spec.md 5.2): up to three 88px thumbnails, each a button that opens
   the viewer. The first sits at the inline start (the right). The ring is the room's own bright accent,
   because the receipt is on the dark room (palette.css: --accent-bright on any dark surface). */
#app .st-room-store .receipt .rv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; padding: 0; list-style: none; }
#app .st-room-store .receipt .rv-photos li { margin: 0; padding: 0; }
#app .st-room-store .receipt .rv-ph {
  display: block; inline-size: 88px; block-size: 88px; min-inline-size: 44px; min-block-size: 44px;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--room-2);
}
#app .st-room-store .receipt .rv-ph img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
#app .st-room-store .receipt .rv-ph:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
/* the empty state: its art is shown 260px wide (the 520w rendition) */
.st-room-store .st-reviews .rev-empty img { width: min(100%, 260px); height: auto; }

/* ---------------------------------------------------------------- BAR (spec 2.7; the viewer's heart is room.css's) */
/* the bar is .glass.dark, not an enclosure, so its ghost buttons would take toolpath.css's paper ones;
   on a store they are the cover's dark ghosts, as in the mock */
#app .st-room-store .st-bar .btn-ghost { background: transparent; border-color: rgba(246,241,234,.22); color: var(--room-tx); }
#app .st-room-store .st-bar .btn-ghost:hover { border-color: rgba(246,241,234,.5); }
/* a landscape phone keeps its height for the page: the cover and the ticket carry the same actions */
@media (max-height: 480px) {
  body[data-room-kind="store"] .st-bar { display: none; }
}

/* ---------------------------------------------------------------- FOOTER (spec 2.8) */
/* the store footer holds .st-inner, which brings its own gutter */
body[data-room-kind="store"] footer.site.st-foot:has(> .st-inner) { padding-inline: 0; }
body[data-room-kind="store"] footer.site.st-foot { padding-block: clamp(56px, 8vw, 96px) calc(30px + var(--safe-b, 0px)); }
@media (max-width: 899px) {
  body[data-room-kind="store"] footer.site.st-foot { padding-block-end: calc(110px + var(--safe-b, 0px)); }
}
body[data-room-kind="store"] .st-foot .kicker { display: flex; }
body[data-room-kind="store"] .st-foot .st-foot-h { max-width: 18em; font-family: var(--font-display); font-weight: 400; }
body[data-room-kind="store"] .st-foot .st-h2 { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.1; letter-spacing: normal; }
body[data-room-kind="store"] .st-foot .f-brand .wordmark { font-size: 1.625rem; }
/* the year line leaves the mono stack; it has to outrank the kept inline footer.site .m */
body[data-room-kind="store"] footer.site.st-foot .m { font-family: var(--font-body); font-size: .8125rem; letter-spacing: normal; }

/* ---------------------------------------------------------------- the request sheet (spec 4)
   The sheet stays paper on body. Its dark instrument panel reads the room's restated enclosure tokens
   and turns warm black (#161412); measured there in a real render (a live store with an STL uploaded),
   every text pair clears 4.5:1 (the 72% lines 8.82, the price 7.51, the confidence badge 5.05, the risk
   chips 14.76) except the separator dot in the settings line, the base accent at 3.64. The 3D preview,
   drawn in #E8905F on a room: its model pixels measure 4.69 at the darkest face and 9.03 at the median,
   none under 3:1. */
body[data-room-kind="store"] .sheet .rq-inst .mono-label .sep { color: var(--accent-bright); }

/* ---------------------------------------------------------------- motion: "the layer line" (spec 3.5)
   Declared only when motion is welcome. Everything moves transform, opacity, clip-path or
   background-size on one element, nothing lasts past five seconds, and nothing waits for a picture. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sf-drift { from { transform: scale(1.04); } to { transform: scale(1); } }
  @keyframes sf-name { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sf-purge { from { transform: translateX(var(--sf-purge-from, 64px)); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sf-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes sf-perf { from { background-size: 100% 2px, 10px 2px; } to { background-size: 0 2px, 10px 2px; } }
  @keyframes sf-print { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sf-nozzle { from { transform: translateY(100%); opacity: 1; } 92% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }

  /* the cover settles once, under five seconds, so it needs no pause control */
  #hero.sf-cover .hero-bg img { animation: sf-drift 4800ms var(--st-ease-out) both; }
  /* ...but the slideshow owns its motion (room.css st-drift on the frame that is on, with a pause).
     Without this, a frame fading out falls back to sf-drift and jumps to 104% mid crossfade. */
  #hero.sf-cover.st-cover-slides .hero-bg img { animation: none; }
  /* the name prints in from the bed up; backwards only, so the clip is gone once it has printed */
  #hero.sf-cover .st-name { animation: sf-name 640ms steps(8, end) 120ms backwards; }
  /* the purge line slides in along the ruler from the inline start */
  #hero.sf-cover .sf-bed::after { animation: sf-purge 900ms var(--st-ease-out) 760ms backwards; }
  /* a redraw for the owner (refreshShop), or the owner back from ניהול (#app was display:none, which
     restarts every animation), marks the cover still: nothing replays */
  #hero.sf-cover[data-still] .hero-bg img,
  #hero.sf-cover[data-still] .st-name,
  #hero.sf-cover[data-still] .sf-bed::after { animation: none; }

  /* the kicker tick draws in when its head is revealed */
  #app .st-room-store .reveal.in .sf-kick::before,
  #app .st-room-store .sf-kick.reveal.in::before { animation: sf-tick 280ms var(--ease) both; }

  /* the works print in, layer by layer, once each one is on screen and decoded, with the nozzle line
     riding the top of the printed part; stagger 70ms, capped at 8 (develop() writes --d) */
  .st-room-store #gallery[data-reveal="print"] .st-tile.is-dev img {
    animation: sf-print 900ms steps(10, end) var(--d, 0ms) both;
  }
  .st-room-store #gallery[data-reveal="print"] .st-tile.is-dev::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-block-start: 2px solid var(--accent-bright);
    animation: sf-nozzle 900ms steps(10, end) var(--d, 0ms) both;
  }

  /* the ticket's perforation draws across once the ticket is revealed */
  .st-room-store .sf-ticket-stub { animation: sf-perf 600ms var(--ease) 200ms both; }
  .st-room-store .reveal:not(.in) .sf-ticket-stub,
  .st-room-store .sf-ticket.reveal:not(.in) .sf-ticket-stub { animation-play-state: paused; }

  /* the rest of a still page: the identity's rise, the section ticks, the works, the perforation */
  #hero.sf-cover[data-still] .rise,
  #hero.sf-cover[data-still] .rise-2,
  #hero.sf-cover[data-still] .rise-3,
  #hero.sf-cover[data-still] ~ .st-sec .sf-kick::before,
  #hero.sf-cover[data-still] ~ .st-sec .sf-ticket-stub,
  #hero.sf-cover[data-still] ~ .st-sec #gallery[data-reveal="print"] .st-tile.is-dev img,
  #hero.sf-cover[data-still] ~ .st-sec #gallery[data-reveal="print"] .st-tile.is-dev::before { animation: none; }

  /* the capability picture lifts a little under a fine pointer */
  .st-room-store .sf-cap-art { transition: transform 400ms var(--ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .st-room-store .sf-cap:hover .sf-cap-art { transform: translateY(-3px); }
}

/* ---------------------------------------------------------------- forced colours (spec 3.5)
   Star and bar fills are forced away otherwise, so on and off stars would look alike and the
   dimension bars would vanish. */
@media (forced-colors: active) {
  body[data-room-kind="store"] #app .st-tile,
  body[data-room-kind="store"] #app .sf-cap,
  body[data-room-kind="store"] #app .sf-sheet,
  body[data-room-kind="store"] #app .sf-ticket,
  body[data-room-kind="store"] #app .receipt,
  body[data-room-kind="store"] #app .st-fact { border: 1px solid CanvasText; }
  body[data-room-kind="store"] #app .sf-bed,
  body[data-room-kind="store"] #app .sf-kick::before,
  body[data-room-kind="store"] #app .sf-puck,
  body[data-room-kind="store"] #app .sf-like-pill { display: none; }
  body[data-room-kind="store"] #app .st-room-store .stars svg,
  body[data-room-kind="store"] #app .st-room-store .stars svg:not(.on) { forced-color-adjust: none; fill: none; stroke: CanvasText; stroke-width: 1.5; }
  body[data-room-kind="store"] #app .st-room-store .stars svg.on { fill: CanvasText; }
  body[data-room-kind="store"] #app .plate .bar i { forced-color-adjust: none; background: Highlight; }
}

/* ================================================================ merged from studio.css (docs/merge-plan.md D5)
   Measured contrast, beyond the lines above:
     unplayed line 18% vs played line          4.49 apart, so progress reads without the timecode
     ink on paper (package cards)             14.18; --sf-ink-2 on paper 10.49; --sf-deep on paper 6.49
     the sheet's chip: ink on white           15.93; the --accent-deep underline 7.29 on white, 5.9 on --soft
   ================================================================================================ */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #B0542F; }

/* the music hero's played line, on the room's ground (room.css) */
body[data-room-kind="store"]:not(.mg-on) {
  --st-line-played: #E8905F;
  --st-line-rest: rgba(246,241,234,.18);
}

/* ---------------------------------------------------------------- SLIDES COVER (D16)
   Frank Ruhl Libre, the founder's face for photo pages, is the display face of the slides cover only,
   and room-core.js links it only for a slides cover. Everything else on the page stays Suez One. */
.st-room-store #hero.st-cover-slides { --st-display: "Frank Ruhl Libre", "Suez One", Georgia, serif; }
.st-room-store #hero.st-cover-slides .st-name { font-family: var(--st-display); font-weight: 300; letter-spacing: normal; }

/* ---------------------------------------------------------------- PACKAGES (D3): wall labels on warm paper */
.st-room-store .st-pkg-grid { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 720px) {
  .st-room-store .st-pkg-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
  .st-room-store .st-pkg-grid[data-n="1"] { grid-template-columns: minmax(0, 520px); }
}
.st-room-store .st-pkg { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 22px; min-width: 0;
  --st-tick: var(--sf-deep); --st-link: var(--sf-deep); background: var(--sf-paper); color: var(--sf-ink); border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.st-room-store .st-pkg.is-featured { box-shadow: 0 0 0 2px #E8905F, 0 30px 60px -30px rgba(0,0,0,.9); }
.st-room-store .st-pkg-ribbon { align-self: flex-start; padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; background: var(--sf-ink); color: var(--sf-paper); }
.st-room-store .st-pkg-title { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.25; overflow-wrap: anywhere; }
.st-room-store .st-pkg-price { font-weight: 600; font-size: 2rem; line-height: 1; }
.st-room-store .st-pkg-price .money .cur { font-size: .6em; font-weight: 500; }
.st-room-store .st-free { font-family: var(--font-body); font-weight: 600; }
.st-room-store .st-pkg-sum { font-size: .9375rem; line-height: 1.6; }
.st-room-store .st-pkg-sum, .st-room-store .st-pkg-facts, .st-room-store .st-pkg-inc { color: var(--sf-ink-2); }
.st-room-store .st-pkg-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; }
.st-room-store .st-pkg-facts li { display: inline-flex; align-items: center; gap: 7px; }
.st-room-store .st-pkg-facts svg { width: 16px; height: 16px; flex: none; color: var(--sf-deep); }
.st-room-store .st-pkg-inc { list-style: none; display: grid; gap: 9px; margin-top: 2px; font-size: .9375rem; line-height: 1.5; }
.st-room-store .st-pkg-inc li { position: relative; padding-inline-start: 24px; overflow-wrap: anywhere; }
.st-room-store .st-pkg-inc li::before { content: ""; position: absolute; inset-inline-start: 3px; top: .5em; width: 10px; height: 5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); color: var(--st-tick); }
.st-room-store .st-inc-toggle { align-self: flex-start; min-height: 44px; padding: 0 2px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; color: var(--st-link); }
.st-room-store .st-pkg-foot { margin-top: auto; padding-top: 10px; }
.st-room-store .st-pkg-custom { margin-top: 22px; }
#app .st-room-store .st-pkg :focus-visible { outline-color: var(--sf-deep); }
#app .st-room-store .st-pkg .btn-primary { background: var(--sf-ink); color: var(--sf-paper); }
#app .st-room-store .st-pkg .btn-ghost { background: transparent; border-color: #96806A; color: var(--sf-ink); }
.st-room-store .st-empty { display: grid; justify-items: center; gap: 12px; margin-top: 30px; padding: 36px 22px; text-align: center; }
.st-room-store .st-empty h3 { font-family: var(--st-display); font-weight: 400; font-size: 1.5rem; color: var(--room-tx); }
#app .st-room-store .st-empty p { max-width: 32em; color: var(--room-tx2); font-size: 1rem; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-pkg { transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
  .st-room-store .st-pkg-inc li.st-inc-more { animation: st-in 240ms var(--ease) both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .st-room-store .st-pkg:hover { transform: translateY(-4px); box-shadow: 0 44px 80px -30px rgba(0,0,0,.95); }
}

/* ---------------------------------------------------------------- TRACKS: the list fades on a chapter change, like the wall */
.st-room-store .st-track-host.is-out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-track-host { transition: opacity 160ms linear; }
  .st-room-store .st-track-host.is-in .st-track { animation: st-in 320ms var(--ease) both; }
}

/* ---------------------------------------------------------------- the mini player in the action bar */
.st-room-store .st-bar.is-player .st-bar-acts { display: none; }
@media (min-width: 900px) { #app .st-room-store .st-bar.is-player { max-width: 720px; } }
.st-room-store .st-mini { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 48px; }
@media (prefers-reduced-motion: no-preference) { .st-room-store .st-mini:not([hidden]) { animation: st-fade 220ms ease both; } }
.st-room-store .st-mini-prog { position: absolute; inset-inline: 0; inset-block-start: -10px; height: 2px; overflow: hidden; direction: ltr; background: rgba(246,241,234,.14); }
.st-room-store .st-mini-prog b { display: block; height: 100%; background: var(--accent-bright); transform: scaleX(0); transform-origin: 0 50%; }
.st-room-store .st-mini-btn { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--room-2); color: var(--room-tx); }
.st-room-store .st-mini-btn > svg { width: 18px; height: 18px; }
.st-room-store .st-mini-now { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; color: var(--room-tx); text-align: start; }
.st-room-store .st-mini-cover { width: 40px; height: 40px; flex: none; border-radius: 4px; overflow: hidden; background: var(--room-2); }
.st-room-store .st-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.st-room-store .st-mini-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; unicode-bidi: plaintext; }
.st-room-store .st-mini-pick { flex: none; }
.st-room-store .st-mini-seek, .st-room-store .st-mini-x { display: none; }
@media (min-width: 900px) {
  .st-room-store .st-mini-seek { display: flex; align-items: center; gap: 10px; flex: 1.3; min-width: 0; direction: ltr; }
  .st-room-store .st-mini-seek .st-seek { position: static; opacity: 1; flex: 1; min-width: 0; accent-color: #E8905F; height: 24px; }
  .st-room-store .st-mini-x { display: grid; background: transparent; }
}

/* glyph morph: the triangle and the two bars share one box */
.st-room-store .st-bigplay .st-g, .st-room-store .st-np-main .st-g, .st-room-store .st-mini-btn .st-g { position: absolute; inset: 0; display: grid; place-items: center; }
.st-room-store .st-bigplay .st-g svg { width: 30px; height: 30px; }
.st-room-store .st-np-main .st-g svg, .st-room-store .st-mini-btn .st-g svg { width: 20px; height: 20px; }
.st-room-store .st-bigplay .st-g-play svg, .st-room-store .st-np-main .st-g-play svg, .st-room-store .st-mini-btn .st-g-play svg { transform: translateX(2px); }
.st-room-store .st-bigplay .st-g-pause, .st-room-store .st-np-main .st-g-pause, .st-room-store .st-mini-btn .st-g-pause { opacity: 0; transform: scale(.6); }
.st-room-store .is-playing > .st-g-play { opacity: 0; transform: scale(.6); }
.st-room-store .is-playing > .st-g-pause { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-bigplay .st-g, .st-room-store .st-np-main .st-g, .st-room-store .st-mini-btn .st-g { transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
}

/* ---------------------------------------------------------------- MUSIC HERO (a music store with a track) */
.st-room-store .st-mhero { --glow: var(--seller, #B0542F); isolation: isolate; overflow: hidden; padding-block: calc(var(--bar-h, 64px) + 26px) 0; }
@media (prefers-reduced-motion: no-preference) { .st-room-store .st-mhero { transition: --glow 900ms ease; } }
.st-room-store .st-mhero-bg { position: absolute; inset: 0; z-index: -2; }
.st-room-store .st-mhero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.st-room-store .st-mhero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,11,.6), #0D0C0B 92%); }
.st-room-store .st-mhero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1040px) { .st-room-store .st-mhero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; } }
.st-room-store .st-mhero #notices { margin-bottom: 18px; }
.st-room-store .st-mhero-id { min-width: 0; display: grid; gap: 16px; }
/* the music hero carries the store's own identity (s/index.html heroIdHtml), set as on the drawn cover */
.st-room-store #hero.st-mhero .sf-idrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-room-store #hero.st-mhero .stamp,
.st-room-store #hero.st-mhero .badge-demo { background-color: #231913; color: var(--accent-bright); border-color: var(--accent-bright); }
.st-room-store #hero.st-mhero .badge-kind { background-color: #242321; color: var(--room-tx); }
.st-room-store #hero.st-mhero .stamp svg { width: 14px; height: 14px; }
.st-room-store .st-one { color: var(--room-tx3); }
/* z-index on the wrap, not only on the button: the wrap animates in (.rise-2), which makes it a stacking
   context, and without this the hero line's transparent seek input sat on top of the play button. */
.st-room-store .st-sleeve-wrap { position: relative; z-index: 3; justify-self: center; width: min(72vw, 320px); }
@media (min-width: 1040px) { .st-room-store .st-sleeve-wrap { width: 420px; justify-self: end; } }
.st-room-store .st-sleeve { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--room-1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
/* the glow is static blur, never animated: only its colour moves, through the registered --glow */
.st-room-store .st-sleeve::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: var(--glow); opacity: .38; filter: blur(64px); pointer-events: none; }
.st-room-store .st-sleeve-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; opacity: 0; transform: scale(.96); }
.st-room-store .st-sleeve-img.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { .st-room-store .st-sleeve-img { transition: opacity 500ms var(--ease), transform 500ms var(--ease); } }
.st-room-store .st-bigplay { position: absolute; z-index: 3; inset-block-end: -22px; inset-inline-start: -22px; width: 72px; height: 72px; border-radius: 50%;
  background: var(--pri); color: #FFFFFF; box-shadow: 0 18px 40px -12px rgba(176,84,47,.8), 0 0 0 6px #0D0C0B; }
.st-room-store .st-bigplay:hover { filter: brightness(1.07); }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-bigplay { transition: filter .2s, transform .2s var(--ease); }
  .st-room-store .st-bigplay:active { transform: scale(.96); }
}
#app .st-room-store .st-bigplay:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 8px; }
.st-room-store .st-bigplay .st-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent-bright); opacity: 0; }
.st-room-store .st-bigplay.is-loading .st-ring { opacity: 1; border-inline-end-color: var(--accent-bright); }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-bigplay.is-loading .st-ring { border-inline-end-color: transparent; animation: spin 900ms linear infinite; }
}
.st-room-store .st-mhero-line { position: relative; z-index: 2; margin-top: -34px; padding-block-end: 24px; }
@media (min-width: 1040px) { .st-room-store .st-mhero-line { margin-top: 36px; } }
.st-room-store .st-seekwrap { position: relative; }
.st-room-store .st-line { display: block; width: 100%; }
.st-room-store .st-line-hero { height: 120px; }
@media (min-width: 900px) { .st-room-store .st-line-hero { height: 160px; } }
.st-room-store .st-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; touch-action: pan-y; }
.st-room-store .st-seekwrap:has(> .st-seek:focus-visible) { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 8px; }

/* ---------------------------------------------------------------- the track list */
.st-room-store .st-tracks-grid { margin-top: 6px; }
@media (min-width: 1040px) { .st-room-store .st-tracks-grid.has-np { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; } }
.st-room-store .st-np { display: none; }
@media (min-width: 1040px) { .st-room-store .has-np .st-np { display: block; position: sticky; inset-block-start: 24px; padding: 22px; border-radius: 16px; } }
.st-room-store .st-list { list-style: none; margin: 0; padding: 0; }
.st-room-store .st-track { border-block-end: 1px solid var(--room-line); }
.st-room-store .st-track-row { display: grid; grid-template-columns: 44px 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 6px; border-radius: 10px; transition: background 120ms; }
@media (min-width: 900px) { .st-room-store .st-track-row { grid-template-columns: 44px 48px minmax(0, 1fr) 180px auto; } }
.st-room-store .st-track-row:has(.st-t-edit) { grid-template-columns: 44px 48px minmax(0, 1fr) auto; }
@media (max-width: 899px) { .st-room-store .st-track-row:has(.st-t-edit) .st-t-dur { display: none; } }
@media (min-width: 900px) { .st-room-store .st-track-row:has(.st-t-edit) { grid-template-columns: 44px 48px minmax(0, 1fr) 180px auto auto; } }
.st-room-store .st-track:hover .st-track-row, .st-room-store .st-track-row:focus-within { background: var(--room-1); }
.st-room-store .st-play-cell { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--room-tx); }
.st-room-store .st-play-cell > * { grid-area: 1 / 1; }
.st-room-store .st-play-cell .st-g { display: none; place-items: center; }
.st-room-store .st-play-cell .st-g svg { width: 18px; height: 18px; }
.st-room-store .st-idx { font-size: .8125rem; color: var(--room-tx3); }
/* the playing bars stand still at three heights; they move only when motion is welcome */
.st-room-store .st-eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.st-room-store .st-eq i { display: block; width: 3px; height: 100%; border-radius: 1px; background: var(--accent-bright); transform-origin: bottom; transform: scaleY(.6); }
.st-room-store .st-eq i:nth-child(1) { transform: scaleY(.4); }
.st-room-store .st-eq i:nth-child(2) { transform: scaleY(1); }
.st-room-store .st-spin { display: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(246,241,234,.16); border-top-color: var(--accent-bright); border-inline-end-color: var(--accent-bright); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes st-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
  .st-room-store .st-eq i { animation: st-eq 900ms ease-in-out infinite; }
  .st-room-store .st-eq i:nth-child(2) { animation-delay: 150ms; }
  .st-room-store .st-eq i:nth-child(3) { animation-delay: 300ms; }
  .st-room-store .st-spin { border-inline-end-color: rgba(246,241,234,.16); animation: spin 900ms linear infinite; }
}
.st-room-store .st-track:hover .st-idx, .st-room-store .st-play-cell:focus-visible .st-idx { display: none; }
.st-room-store .st-track:hover .st-g-play, .st-room-store .st-play-cell:focus-visible .st-g-play { display: grid; }
.st-room-store .st-track[data-state="playing"] .st-idx, .st-room-store .st-track[data-state="paused"] .st-idx, .st-room-store .st-track[data-state="loading"] .st-idx, .st-room-store .st-track[data-state="error"] .st-idx { display: none; }
.st-room-store .st-track[data-state="playing"] .st-g-play { display: none; }
.st-room-store .st-track[data-state="playing"] .st-eq { display: flex; }
.st-room-store .st-track[data-state="playing"]:hover .st-eq, .st-room-store .st-track[data-state="playing"] .st-play-cell:focus-visible .st-eq { display: none; }
.st-room-store .st-track[data-state="playing"]:hover .st-g-pause, .st-room-store .st-track[data-state="playing"] .st-play-cell:focus-visible .st-g-pause { display: grid; }
.st-room-store .st-track[data-state="paused"] .st-g-play, .st-room-store .st-track[data-state="loading"] .st-g-play, .st-room-store .st-track[data-state="error"] .st-g-play { display: grid; }
.st-room-store .st-track[data-state="loading"] .st-spin { display: block; }
.st-room-store .st-t-cover { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--tone, var(--room-2)); }
.st-room-store .st-t-cover img { width: 100%; height: 100%; object-fit: cover; }
/* A title keeps its own direction (dir="auto") but aligns to the ROW's start: match-parent resolves
   against the row (right in Hebrew); the plain right before it is the fallback. */
.st-room-store .st-t-text { display: grid; min-width: 0; }
.st-room-store .st-t-title { font-weight: 500; font-size: 1rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; text-align: match-parent; }
.st-room-store .st-t-sub { font-size: .8125rem; color: var(--room-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; text-align: match-parent; }
.st-room-store .st-track.is-current .st-t-title { color: var(--accent-bright); }
.st-room-store .st-line-mini { display: none; height: 28px; }
@media (min-width: 900px) { .st-room-store .st-line-mini { display: block; } }
.st-room-store .st-t-dur { font-size: .875rem; color: var(--room-tx3); }
.st-room-store .st-t-edit { min-height: 44px; padding-inline: 8px; color: var(--accent-bright); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.st-room-store .st-track-open { display: grid; grid-template-rows: 0fr; }
.st-room-store .st-track-open-in { min-height: 0; overflow: hidden; visibility: hidden; }
.st-room-store .st-track.is-current .st-track-open { grid-template-rows: 1fr; }
.st-room-store .st-track.is-current .st-track-open-in { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .st-room-store .st-track-open { transition: grid-template-rows 240ms var(--ease); }
  .st-room-store .st-track-open-in { transition: visibility 0s linear 240ms; }
  .st-room-store .st-track.is-current .st-track-open-in { transition-delay: 0s; }
}
.st-room-store .st-track-open .st-seekwrap { margin: 2px 6px 0; }
.st-room-store .st-line-row { height: 44px; }
.st-room-store .st-times { padding: 4px 6px 12px; font-size: .8125rem; color: var(--room-tx3); text-align: start; }
.st-room-store .st-t-err { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 0 6px 12px; color: var(--room-tx); font-size: .9375rem; }
.st-room-store .st-t-err svg { width: 16px; height: 16px; color: #E0A04A; }
.st-room-store .st-np-sleeve { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--room-2); }
.st-room-store .st-np-sleeve img { width: 100%; height: 100%; object-fit: cover; }
.st-room-store .st-np-title { margin-top: 16px; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; unicode-bidi: plaintext; text-align: right; text-align: match-parent; }
.st-room-store .st-line-np { height: 64px; margin-top: 8px; }
.st-room-store .st-np .st-times { padding-inline: 0; }
.st-room-store .st-np-ctl { display: flex; align-items: center; justify-content: center; gap: 16px; }
.st-room-store .st-np-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--room-tx); }
.st-room-store .st-np-btn:hover { background: var(--room-2); }
.st-room-store .st-np-btn > svg { width: 20px; height: 20px; }
.st-room-store .st-np-main { width: 56px; height: 56px; background: var(--pri); color: #FFFFFF; }
.st-room-store .st-np-main:hover { background: var(--pri); filter: brightness(1.07); }

/* ---------------------------------------------------------------- the package chooser in the request sheet (D6)
   The sheet stays paper on body. A pressed chip draws its extrusion underline (220ms); the fields a
   package fixes (quantity, material, the estimate) fold away on grid-template-rows (240ms), and under
   reduced motion they fade instead. */
body[data-room-kind="store"] .pk-chooser { display: grid; gap: 8px; margin: 0 0 16px; }
body[data-room-kind="store"] .pk-sum-l { font-size: .8125rem; font-weight: 500; color: var(--steel-text); }
body[data-room-kind="store"] .pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-room-kind="store"] .sheet .pk-chip { position: relative; min-height: 44px; max-width: 100%; }
body[data-room-kind="store"] .pk-chip-t { min-width: 0; overflow-wrap: anywhere; }
body[data-room-kind="store"] .pk-chip .money { font-weight: 600; }
body[data-room-kind="store"] .pk-chip::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: 5px; height: 2px; border-radius: 2px;
  background: var(--accent-deep); transform: scaleX(0); transform-origin: right center; }
[dir="ltr"] body[data-room-kind="store"] .pk-chip::after { transform-origin: left center; }
body[data-room-kind="store"] .pk-chip[aria-pressed="true"]::after { transform: scaleX(1); }
body[data-room-kind="store"] .pk-chip:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
body[data-room-kind="store"] .pk-gone { margin: 2px 0 0; color: var(--err); font-size: .875rem; }
body[data-room-kind="store"] .rq-fold { display: grid; grid-template-rows: 1fr; }
body[data-room-kind="store"] .rq-fold > .rq-fold-in { min-height: 0; overflow: hidden; }
body[data-room-kind="store"] .rq-fold.is-folded { grid-template-rows: 0fr; }
body[data-room-kind="store"] .rq-fold.is-folded > .rq-fold-in { visibility: hidden; }
body[data-room-kind="store"] .sheet input[type="date"] { min-height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  body[data-room-kind="store"] .pk-chip::after { transition: transform 220ms var(--ease); }
  body[data-room-kind="store"] .rq-fold { transition: grid-template-rows 240ms var(--ease); }
  body[data-room-kind="store"] .rq-fold > .rq-fold-in { transition: visibility 0s linear 240ms; }
  body[data-room-kind="store"] .rq-fold:not(.is-folded) > .rq-fold-in { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-room-kind="store"] .rq-fold > .rq-fold-in { transition: opacity 160ms linear; }
  body[data-room-kind="store"] .rq-fold.is-folded > .rq-fold-in { opacity: 0; }
}