/* Shops block. Loaded by the ofs_shops module only. */
.shops{display:grid; gap:var(--s-4); grid-template-columns:1fr}
@media(min-width:768px){.shops{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shop{background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-card);
  padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4)}
@media(min-width:1024px){.shop{padding:var(--s-6)}}
.shop__top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4)}
/* The collection pill with the shop's logo under it, both held to the right.
   `.collect` pins itself with align-self:flex-start, which in a row meant the
   top; in this column it would mean the left edge, so it is set back to the
   right here. */
.shop__side{position:relative; display:flex; flex-direction:column; align-items:flex-end; flex:none}
.shop__side .collect{align-self:flex-end}
/* The logo hangs under the pill without adding to the height of the row. In the
   flow it made the top row as tall as pill plus logo — up to 123px against a
   62px name block — and the address was pushed down by the difference, as much
   as 61px. Taken out of the flow, the row is as tall as the name again, the
   address sits where it did before the logos, and the logo sits beside it.
   The width and height come from the markup, sized by area in the controller
   so a wide logo and a tall one carry the same weight. */
.shop__logo{position:absolute; top:100%; right:0; margin-top:var(--s-3);
  display:block; max-width:none; height:auto}
.shop__name{font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.5rem; line-height:1.05; letter-spacing:.02em}
.shop__town{color:var(--spark-cyan); font-size:.8125rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; margin-top:6px}
.shop__note{font-size:.75rem; color:var(--text-tertiary); margin-top:5px}
.shop__addr{color:var(--text-secondary); font-size:.9375rem; font-style:normal; line-height:1.55}
.shop__rows{border-top:1px solid var(--ink-700); padding-top:var(--s-4);
  display:flex; flex-direction:column; gap:10px; font-size:.9375rem}
.shop__row{display:flex; gap:var(--s-3); align-items:baseline}
.shop__row .dot{position:relative; top:-2px; display:inline-block; margin-right:7px}
.shop__k{color:var(--text-tertiary); font-size:.8125rem; min-width:76px; flex:none}

.shop__hours{border-top:1px solid var(--ink-700); padding-top:var(--s-3)}
.shop__hours summary{list-style:none; cursor:pointer; font-size:.875rem; font-weight:700;
  color:var(--text-secondary); display:flex; align-items:center; gap:9px; min-height:36px}
.shop__hours summary::-webkit-details-marker{display:none}
.shop__hours summary:hover{color:var(--spark-cyan)}
.shop__hours summary i{font-size:.6875rem; color:var(--text-tertiary);
  transition:transform var(--t-micro) ease-out}
.shop__hours[open] summary i{transform:rotate(180deg)}
.shop__hrow{display:flex; justify-content:space-between; gap:var(--s-3); font-size:.8125rem;
  padding:4px 0; color:var(--text-secondary)}
.shop__hrow--today{color:var(--spark-cyan); font-weight:700}
.shop__hrow .shut{color:var(--text-tertiary)}

.shop__acts{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; padding-top:var(--s-2)}

/* Gold as an outline is permitted for collection availability — the one
   further gold use the style guide allows beyond primary actions. */
.collect{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; flex:none;
  border:1px solid var(--fuse-gold); color:var(--fuse-gold); border-radius:var(--r-chip);
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 9px; text-align:center}
.collect--off{border-color:var(--out-of-stock); color:var(--out-of-stock)}

/* ---------- shopfront photographs ----------
   A shop with a picture of its own shows it in the bottom corner of the card.
   The photographs are night shots that already fall away to almost nothing on
   their left, so the card does very little to them: a soft corner mask for the
   far edge and a thin wash where the rows of text begin. Cards without a
   picture are untouched, so nothing changed until one was chosen. */
.shop--bg{position:relative; isolation:isolate; overflow:hidden}
.shop--bg .shop__bg{
  position:absolute; right:0; bottom:0; z-index:-2;
  width:82%; max-width:432px; height:auto; opacity:.8;
  /* Bigger than the corner it sits in, and pushed out past it, so the shop
     itself reads larger without the picture climbing any further into the rows
     of text. The translate is a share of the picture, so it holds at any card
     width. overflow:hidden on the card trims what hangs over. */
  transform:translate(9%, 9%);
  -webkit-mask-image:radial-gradient(140% 140% at 100% 100%, #000 55%, transparent 100%);
          mask-image:radial-gradient(140% 140% at 100% 100%, #000 55%, transparent 100%)}
.shop--bg .shop__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(5,3,26,.85) 0%, rgba(5,3,26,.35) 42%, rgba(5,3,26,0) 74%)}
@media(prefers-reduced-transparency:reduce){
  .shop--bg .shop__bg{opacity:.35}
}
/* The collection pill and the two buttons are outlines with nothing behind
   them, and on these cards the lit shopfront is what shows through. They get a
   ground of their own so the label keeps its contrast wherever it lands. */
.shop--bg .collect,
.shop--bg .shop__acts .btn{background-color:rgba(5,3,26,.78); backdrop-filter:blur(3px)}
/* hover keeps its cyan tint, laid over that ground rather than replacing it */
.shop--bg .shop__acts .btn:hover{
  background-image:linear-gradient(rgba(60,180,252,.1), rgba(60,180,252,.1))}
/* Opened, the week of hours puts a column of small times straight over the lit
   shopfront. The list gets a surface of its own for as long as it is showing,
   so the photograph steps back behind the thing the reader opened it for. */
.shop--bg .shop__hours[open] > div{
  background:rgba(5,3,26,.86); backdrop-filter:blur(4px);
  border-radius:var(--r-chip); margin:6px calc(var(--s-3) * -1) 0;
  padding:var(--s-2) var(--s-3)}