/* ==========================================================================
   Anri Bakery — the policy and branch page sheet

   Linked by the policy documents (terms.html / privacy.html and their EN
   and JP siblings) and by the six branch pages (shop-*.html), after
   base.css, which carries the fonts, tokens and base elements every page
   shares. What is left here is theirs alone: the branch card and order
   button blocks the branch pages build on (shop.css refines them), the
   image-slot placeholder, and the "Policy pages" block at the end.

   The name is historical: it has been the non-landing page sheet since the
   branch pages were built on it.
   ========================================================================== */

/* ---------- Branch cards and order buttons ---------- */
.section-head{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.2;color:var(--red)}
.section-head p{font-size:18px;color:var(--brown)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,28px)}
.shop-card{
  background:var(--cream);border-radius:24px;padding:clamp(20px,2.5vw,28px);
  display:flex;flex-direction:column;gap:20px;
}
.shop-card h3{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,24px);
  line-height:1.35;color:var(--red);text-wrap:balance;
}
.order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.order-btn{
  position:relative;display:block;aspect-ratio:260/70;min-height:48px;
  border-radius:12px;transition:transform var(--t-fast);
}
.order-btn:hover{transform:scale(1.04)}
.order-btn > div{position:absolute;inset:0}
.order-btn img{object-fit:contain}

/* ---------- Unfilled image slots ----------
   Same contract as the landing page: every <image-slot> became a real
   <img data-ph="…">; if the file is missing it renders as a labelled
   dashed placeholder instead of a broken image. Drop the real file in at
   the path in the markup and the placeholder disappears. */
.slot-empty{
  position:relative;width:100%;height:100%;min-height:inherit;
  display:flex;align-items:center;justify-content:center;padding:12px;
  background:repeating-linear-gradient(45deg,rgba(77,64,45,.05) 0 10px,rgba(77,64,45,.09) 10px 20px);
  border:1px dashed rgba(77,64,45,.3);border-radius:inherit;
  font-size:12px;font-weight:500;line-height:1.4;color:rgba(77,64,45,.75);
  text-align:center;overflow:hidden;
}
.order-btn .slot-empty{position:absolute;inset:0;border-radius:12px}
.site-footer .slot-empty{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.4);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 10px,rgba(255,255,255,.16) 10px 20px)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .shop-card{border-radius:18px}
}

/* ---------- Policy pages (terms.html / privacy.html) ----------
   Long-form legal copy, so the band colours come from the brand's own
   policy pages (red masthead over a blush page) and the text itself sits
   on a cream card at a reading measure rather than the full container. */
.policy-hero{
  background:var(--red);color:var(--on-dark);text-align:center;
  padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,60px);
}
.policy-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3vw,40px);line-height:1.3;
}
.policy-hero p{margin-top:var(--s-3);font-size:var(--fs-lead);opacity:.9}
.policy{background:var(--blush);padding:clamp(36px,5vw,64px) 0 var(--section-y)}
.policy-card{
  max-width:920px;margin:0 auto;background:var(--surface);
  border-radius:20px;padding:clamp(24px,4vw,56px);
  box-shadow:0 18px 40px rgba(77,64,45,.08);
  color:var(--ink);font-size:var(--fs-body);line-height:1.9;
}
.policy-card > * + *{margin-top:var(--s-5)}
.policy-card h2{
  font-family:var(--display);font-weight:700;color:var(--red-ink);
  font-size:var(--fs-h3);line-height:1.4;
}
.policy-card h3{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:calc(var(--fs-body) + 3px);line-height:1.5;
}
/* A heading needs more air above it than the paragraph it follows. */
.policy-card > * + h2{margin-top:var(--s-12)}
.policy-card > * + h3{margin-top:var(--s-10)}
.policy-card > h2 + h3{margin-top:var(--s-6)}
.policy-card ol,.policy-card ul{padding-left:1.6em}
.policy-card li + li{margin-top:var(--s-3)}
.policy-card ol{list-style:decimal}
.policy-card ul{list-style:disc}
.policy-card a{color:var(--red-ink);text-decoration:underline}
.policy-ver{
  margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--rule);
  color:var(--ink-muted);font-size:var(--fs-sm);line-height:1.7;
}
.policy-ver span{display:block}

/* A translated policy opens with the notice that the Thai original is the
   binding text — a flagged panel rather than a paragraph, so a reader who
   skims the page still meets it before the clauses it qualifies. */
.policy-note{
  border-left:4px solid var(--red);
  background:rgba(204,0,0,.05);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s-4) var(--s-5);
  color:var(--ink-muted);
  font-size:var(--fs-sm);line-height:1.8;
}
.policy-note strong{color:var(--red-ink)}
.policy-note a{color:var(--red-ink)}