/* ==========================================================================
   Anri Bakery — the branch page

   One document per shop (shop-*.html), reached from the branch cards in
   the landing page's "Our Shops" section.

   Only the branch-specific blocks live here. The shell around them — tokens,
   base elements, .wrap/.band, the skip link, the image-slot placeholder and
   the reduced-motion rules — comes from policy.css, which the pages link
   first; despite its name that sheet has been the shared non-landing page
   shell since the policy pages were built on it, and linking it rather than
   copying it means the branch pages inherit every later change to it.

   Buttons are the exception: .btn lives inline in index.html, so the three
   rules these pages actually use are restated at the top of this sheet.
   ========================================================================== */

/* ---------- Buttons (mirrors the .btn block in index.html) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:var(--fs-sm);font-weight:700;
  min-height:48px;padding:12px 24px;border-radius:var(--r-pill);
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),
             border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.btn .arrow{font-family:var(--ui);font-size:1.15em;line-height:1}
.btn-solid{background:var(--red);color:var(--on-dark);box-shadow:var(--e-red)}
.btn-solid:hover{background:var(--red-dark);color:var(--on-dark);transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--red-ink);color:var(--red-ink);background:transparent}
.btn-outline:hover{background:var(--red);border-color:var(--red);color:var(--on-dark)}

/* ---------- Masthead ----------
   The same red band the policy pages open with, so a page reached from a
   shop card and a page reached from the footer share one silhouette. The
   branch name leads in the active language and the other script follows,
   the bilingual pair the landing page's section heads already use. */
.shop-hero{
  background:var(--red);color:var(--on-dark);text-align:center;
  padding:clamp(36px,5vw,64px) 0 clamp(32px,4.5vw,56px);
}
.shop-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.6vw,46px);line-height:1.25;text-wrap:balance;
}
.shop-hero p{margin-top:var(--s-3);font-size:var(--fs-lead);opacity:.9}

/* The way back to the grid these pages are reached from. Sits above the
   name rather than below the map, so it is in reach without a scroll.

   Full white, not a dimmed white: at 15px bold this is body text for WCAG,
   so it needs 4.5:1, and 85% white over --red is 4.45:1. It reads as the
   secondary element by size and weight instead, and the hover affordance
   is the underline rather than a lift in opacity. */
.shop-back{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:var(--s-5);
  color:var(--on-dark);font-size:var(--fs-sm);font-weight:600;
  text-underline-offset:4px;
}
.shop-back:hover{color:var(--on-dark);text-decoration:underline}
.shop-back .arrow{font-family:var(--ui);font-size:1.15em;line-height:1}

/* ---------- Logo and facts ---------- */
.shop-detail{background:var(--blush);padding:var(--section-y) 0}
.shop-detail-inner{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(28px,4vw,56px);align-items:center;
}
/* The mall's own logo, square, on the white it was drawn on. `contain`,
   not the sheet's global `cover`: these are wordmarks with their own
   margins, and a crop would eat the letterforms. The padding is small
   because the artwork already carries white around the mark — it is there
   to keep the mark off the rounded corners, nothing more. */
.shop-photo-frame{
  position:relative;aspect-ratio:1/1;width:100%;max-width:360px;justify-self:center;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-1);
  background:#fff;padding:var(--s-4);
}
.shop-photo-frame img{object-fit:contain}

.shop-info{display:flex;flex-direction:column;gap:clamp(24px,3vw,32px)}

/* A description list, because that is what these are: four labelled facts
   about one place. Label over value on narrow screens, label beside value
   once there is room for a column of them. */
.shop-facts{margin:0;display:flex;flex-direction:column;gap:var(--s-5)}
.shop-fact{display:grid;gap:var(--s-1)}
.shop-fact dt{
  font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);
}
.shop-fact dd{margin:0;font-size:var(--fs-lead);line-height:1.7;color:var(--ink)}
.shop-fact dd a{text-decoration:underline;overflow-wrap:anywhere}

.shop-info .btn{align-self:flex-start}

/* ---------- Delivery ----------
   The branch's own row of app buttons, stamped in from
   partials/delivery-orders.html. The partial carries every branch's card, so
   all but this page's are hidden, and the card's chrome — surface, name,
   "order on" label — is dropped: here it sits in the facts column as one
   more labelled fact, its title styled like the <dt>s above it.

   The .order-btn rules restate delivery.html's (its styles are inline) and
   also override policy.css's older wide-button .order-btn. */
.shop-order{display:flex;flex-direction:column;gap:var(--s-2);--app-ring:rgba(77,64,45,.16)}
.shop-order-title{
  font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);
}
.shop-order .delivery-card:not([aria-current="page"]),
.shop-order .dc-head,
.shop-order .dc-more,
.shop-order .order-label,
.shop-order .order-name,
.shop-order .order-go{display:none}
.shop-order .order-icon{position:absolute;inset:0}
/* A branch with no app links yet (see partials/delivery-orders.html): its
   card carries a note instead of an .order-grid, shown here as plain muted
   text under the title. */
.shop-order .order-soon{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-muted)}
.shop-order .order-grid{display:flex;flex-wrap:wrap;gap:12px}
.shop-order .order-btn{
  position:relative;display:block;width:52px;min-height:0;
  aspect-ratio:1;border-radius:22%;overflow:hidden;
  box-shadow:var(--e-1),0 0 0 1px var(--app-ring) inset;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.shop-order .order-btn:hover,.shop-order .order-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--e-2),0 0 0 1px var(--app-ring) inset;
}
.shop-order .order-btn:active{transform:scale(.94);transition-duration:var(--t-press)}
.shop-order .order-btn .slot-empty{position:absolute;inset:0;border-radius:0;padding:4px;font-size:9px}

/* ---------- Map ----------
   Google's embed, kept in an aspect-ratio box so it does not reflow the
   page as it loads, and lazily framed so a visitor who never scrolls this
   far never pays for it. */
.shop-map{background:var(--cream);padding:var(--section-y) 0}
.shop-map-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-2);
  background:var(--blush);
}
.shop-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- The other branches ----------
   The landing page's branch cards, stamped in from partials/shop-cards.html.
   The rules mirror the SHOPS block in index.html (its styles are inline), so
   a change to the card there wants the same change here. */
.shop-other{background:var(--blush);padding:var(--section-y) 0}
.shop-other-inner{display:flex;flex-direction:column;gap:var(--section-gap)}
.shop-grid{--shop-gap:clamp(20px,2.2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--shop-gap)}
.shop-card{
  flex:1 1 320px;max-width:400px;
  padding:var(--s-5) var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-5);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e-1);
}
/* The card for the page you are on. */
.shop-card[aria-current="page"]{display:none}
.shop-name{
  container-type:inline-size;
  display:flex;align-items:stretch;gap:var(--s-2);
  width:100%;padding:0 var(--s-2);
}
.shop-logo{
  position:relative;flex:0 0 21%;aspect-ratio:1;align-self:center;
  background:#fff;border-radius:var(--r-sm);overflow:hidden;
}
.shop-logo img{object-fit:contain}
.shop-banner{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:.2em;
  padding:clamp(12px,5cqi,22px) 7% clamp(12px,5cqi,22px) 6%;
  background:url(../responsive/brand/shop-name-banner-384.webp) center/100% 100% no-repeat;
  color:var(--on-dark);font-family:var(--display);line-height:1.3;
}
/* Scoped under .shop-banner so they outrank policy.css's `.shop-card h3`,
   which styles the delivery page's cards of the same name. */
.shop-banner .shop-branch{font-size:calc(4.7cqi - 1px);font-weight:700;line-height:1.3;color:inherit;white-space:nowrap;text-wrap:nowrap}
.shop-banner .shop-hours{font-size:max(12px,3.5cqi);font-weight:500}
.shop-card .btn{align-self:center;margin-top:auto}
@media (min-width:1080px){
  .shop-card{max-width:calc((100% - 2 * var(--shop-gap)) / 3)}
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .shop-photo-frame,.shop-map-frame{border-radius:var(--r-md)}
  .shop-photo-frame{max-width:280px}
  .shop-map-frame{aspect-ratio:4/3}
}