/* For your shop hub: a street of shopfront photos (tabs), the open shop's "today / with Bisro" pairs below, then a
   quiet list of other shop kinds. Phones: the street becomes a swipeable strip. */

.sx-hero { padding-top: 140px; padding-bottom: 34px }
.sx-hero .h-xl { max-width: 13ch }

/* the street: six doorways side by side, the chosen one stands taller and in full colour */
.sx-street { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end;
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gl) }
.sx-door { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; border-radius: 18px; overflow: hidden;
  height: 260px; background: var(--ink); transition: height .35s cubic-bezier(.2,.7,.2,1), box-shadow .2s }
.sx-photo, .sx-photo img { display: block; width: 100%; height: 100% }
.sx-photo img { object-fit: cover; filter: grayscale(.55) brightness(.8); transform: scale(1.04); transition: filter .3s, transform .5s }
.sx-door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,35,40,0) 45%, rgba(31,35,40,.85)) }
.sx-name { position: absolute; left: 16px; right: 14px; bottom: 14px; z-index: 1; color: #fff; font: 700 17px/1.2 var(--font); letter-spacing: -0.01em }
.sx-door:hover .sx-photo img { filter: grayscale(.15) brightness(.92) }
.sx-door:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 3px }
.sx-door[aria-selected="true"] { height: 330px; box-shadow: 0 0 0 3px var(--sky), 0 40px 70px -40px rgba(31,35,40,.6) }
.sx-door[aria-selected="true"] .sx-photo img { filter: none; transform: none }
.sx-door[aria-selected="true"] .sx-name::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--sky) }

/* the open shop */
.sx-panel { padding-top: clamp(40px, 6vh, 64px); padding-bottom: 8px }
.sx-panel:not([hidden]) { animation: sx-in .35s cubic-bezier(.2,.7,.2,1) } @keyframes sx-in { from { opacity: 0; transform: translateY(10px) } }
.sx-head { display: flex; align-items: end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap }
.sx-head .h-l { max-width: 20ch }
.sx-more { font-weight: 700; color: var(--link); text-decoration: none; font-size: 17px; white-space: nowrap }
.sx-more:hover { text-decoration: underline } .sx-more.soon { color: var(--faint) }
.sx-pairs { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; counter-reset: p }
.sx-pairs li { counter-increment: p; display: flex; flex-direction: column; border-top: 2px solid var(--ink) }
.sx-today { margin: 0; padding: 18px 0 20px; flex: 1; font-size: 17px; line-height: 1.5; color: var(--muted) }
.sx-today span, .sx-now span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
.sx-today span { color: var(--faint) } .sx-today span::before { content: counter(p, decimal-leading-zero) "  "; color: var(--ink) }
.sx-now { position: relative; display: block; padding: 18px 46px 20px 18px; border-radius: 16px; background: var(--sky-light); color: var(--ink); text-decoration: none; transition: background .15s }
.sx-now span { color: var(--link) }
.sx-now b { display: block; font-size: 17px; line-height: 1.45; font-weight: 700 }
.sx-now .ic { position: absolute; right: 16px; bottom: 20px; width: 20px; height: 20px; color: var(--link); transition: transform .15s }
.sx-now:hover { background: #CDEBFD } .sx-now:hover .ic { transform: translateX(3px) }
.sx-now:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }
.sx-note { margin-top: 18px; margin-bottom: 0 }

/* other kinds of shop: plain words, no photos */
.sx-other { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: center;
  margin-top: clamp(70px, 11vh, 130px); margin-bottom: clamp(70px, 11vh, 130px); padding-top: clamp(40px, 6vh, 60px); border-top: 1px solid var(--border) }
.sx-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px }
.sx-kinds li { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--border); background: #fff; font-size: 15.5px; font-weight: 600; color: var(--ink) }

@media (max-width: 900px) {
  .sx-hero { padding-top: 110px }
  .sx-street { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gl); scrollbar-width: none; padding-bottom: 6px; padding-top: 6px; gap: 12px; align-items: stretch }
  .sx-street::-webkit-scrollbar { display: none }
  .sx-door, .sx-door[aria-selected="true"] { flex: 0 0 42%; height: 200px; scroll-snap-align: start }
  .sx-pairs { grid-template-columns: 1fr; gap: 26px }
  .sx-other { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { .sx-door, .sx-photo img { transition: none } .sx-panel:not([hidden]) { animation: none } }