/* ===================================================================
   Au Croissant d'Or — bakery "morning counter" demo site
   =================================================================== */

:root{
  --gold:        #c8973a;
  --butter:      #f0b93e;
  --cream:       #fbf1de;
  --cream-2:     #f5e6c8;
  --chocolate:   #3d2a1c;
  --chocolate-2: #5a3f2a;
  --raspberry:   #b23a48;
  --pistachio:   #7c9457;
  --stone:       #8c8478;
  --paper:       #fffdf7;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --rail-w: 88px;
  --radius: 8px;

  --shadow-soft: 0 6px 20px rgba(61,42,28,0.12);
  --shadow-lift: 0 10px 30px rgba(61,42,28,0.18);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:56px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--chocolate);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  padding-right:0;
  padding-bottom:0;
}
@media (min-width:900px){
  body{ padding-right:var(--rail-w); }
}
@media (max-width:899px){
  body{ padding-bottom:76px; }
}

img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; color:var(--chocolate); }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--raspberry);
  margin:0 0 .6em;
}
.eyebrow--center{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.85em 1.4em;
  border-radius:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--raspberry);
  color:var(--paper);
  box-shadow:var(--shadow-soft);
}
.btn--primary:hover{ background:#9c2f3c; }
.btn--ghost{
  background:transparent;
  border-color:var(--chocolate);
  color:var(--chocolate);
}
.btn--ghost:hover{ background:var(--chocolate); color:var(--paper); }
.btn--outline{
  background:var(--paper);
  border-color:var(--gold);
  color:var(--chocolate-2);
  box-shadow:var(--shadow-soft);
}
.btn--outline:hover{ background:var(--butter); }

/* =========================================================
   TOP TAB NAV — bakery shelf labels
   ========================================================= */
.tab-nav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--cream);
  border-bottom:2px dashed rgba(61,42,28,.25);
}
.tab-nav__inner{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.6rem .8rem;
  scrollbar-width:none;
}
.tab-nav__inner::-webkit-scrollbar{ display:none; }
.tab-label{
  flex:0 0 auto;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.5em .9em;
  background:var(--paper);
  border:1px solid var(--stone);
  border-radius:4px;
  color:var(--chocolate-2);
  box-shadow:2px 2px 0 rgba(61,42,28,.08);
}
.tab-label:hover{ background:var(--butter); border-color:var(--gold); }

/* =========================================================
   SIDE RAIL (desktop) / BOTTOM RAIL (mobile)
   ========================================================= */
.rail--side{
  position:fixed;
  top:0; right:0; bottom:0;
  width:var(--rail-w);
  background:var(--chocolate);
  display:none;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:1.6rem;
  padding:1rem .5rem;
  z-index:50;
}
@media (min-width:900px){
  .rail--side{ display:flex; }
}
.rail__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  color:var(--cream);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.5rem .2rem;
  border-radius:6px;
  background:transparent;
  border:none;
  cursor:pointer;
}
.rail__item:hover{ background:rgba(255,255,255,.08); }
.rail__icon{ width:22px; height:22px; fill:var(--butter); }

.rail__lang{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  align-items:center;
  margin-top:.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.lang-btn{
  font-family:var(--font-body);
  font-size:.7rem;
  font-weight:700;
  color:var(--cream);
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:4px;
  padding:.25em .5em;
  cursor:pointer;
  width:2.4em;
}
.lang-btn:hover{ background:rgba(255,255,255,.12); }
.lang-btn.is-active{ background:var(--butter); color:var(--chocolate); border-color:var(--butter); }

.rail--bottom{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  background:var(--chocolate);
  z-index:50;
  padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 16px rgba(0,0,0,.25);
}
@media (min-width:900px){
  .rail--bottom{ display:none; }
}
.rail--bottom .rail__item{ flex:1; font-size:.62rem; }
.rail--bottom .rail__icon{ width:20px; height:20px; }
.rail__item--lang{ position:relative; }

.lang-popover{
  position:absolute;
  bottom:64px;
  right:8px;
  display:none;
  flex-direction:column;
  gap:.3rem;
  background:var(--chocolate);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:.5rem;
  box-shadow:var(--shadow-lift);
}
.lang-popover.is-open{ display:flex; }

/* =========================================================
   1. OPENER
   ========================================================= */
.opener{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  max-width:1280px;
  margin:0 auto;
}
@media (min-width:820px){
  .opener{ grid-template-columns:1.35fr 1fr; align-items:stretch; min-height:640px; }
}

.opener__frame{
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.opener__frame::before{
  content:"";
  display:block;
  height:16px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 26px, var(--cream-2) 26px 52px);
}
.opener__img{ width:100%; height:280px; object-fit:cover; object-position:center 60%; }
@media (min-width:820px){
  .opener__img{ height:calc(100% - 16px); }
}

.badge{
  position:absolute;
  top:34px; left:18px;
  background:var(--paper);
  color:var(--chocolate);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:.5em .8em;
  border-radius:4px;
  border:1px solid var(--gold);
  box-shadow:var(--shadow-soft);
  transform:rotate(-3deg);
}

.opener__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2.2rem 1.4rem 2.6rem;
  background:var(--cream);
}
@media (min-width:820px){
  .opener__text{ padding:3rem 3.2rem; }
}
.opener__text h1{
  font-size:clamp(2rem, 5vw, 2.9rem);
  line-height:1.08;
  margin-bottom:.5rem;
}
.opener__sub{ font-size:1.05rem; color:var(--chocolate-2); max-width:34ch; }
.opener__note{
  display:inline-block;
  font-size:.85rem;
  font-weight:600;
  color:var(--pistachio);
  background:rgba(124,148,87,.12);
  padding:.4em .8em;
  border-radius:4px;
  margin-bottom:1.4rem;
  width:fit-content;
}
.opener__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* =========================================================
   2. MORNING STRIP
   ========================================================= */
.strip{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:var(--cream-2);
}
@media (min-width:820px){
  .strip{ grid-template-columns:.9fr 1.1fr; align-items:center; }
}
.strip__img img{ width:100%; height:320px; object-fit:cover; }
@media (min-width:820px){
  .strip__img img{ height:460px; }
}
.strip__content{ padding:2.4rem 1.4rem; }
@media (min-width:820px){
  .strip__content{ padding:2rem 3.5rem 2rem 3rem; }
}
.strip__content h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.2; }

.moments{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin:1.4rem 0 1.2rem;
  padding-left:.1rem;
  border-left:2px solid var(--gold);
}
.moments li{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  padding-left:1rem;
  font-size:1.02rem;
}
.moments__time{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--raspberry);
  min-width:2.4em;
}
.strip__sub{ color:var(--chocolate-2); max-width:42ch; }

/* =========================================================
   3. COUNTER SHELF
   ========================================================= */
.shelf{ padding:3rem 1.2rem 2rem; max-width:1280px; margin:0 auto; }
.shelf__title{
  text-align:center;
  max-width:46ch;
  margin:0 auto 2rem;
  font-size:clamp(1.4rem,3vw,1.9rem);
  line-height:1.25;
}
.shelf__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:150px;
  grid-auto-flow:dense;
  gap:.7rem;
}
@media (max-width:700px){
  .shelf__grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px; }
}
.shelf__tile{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  box-shadow:var(--shadow-soft);
}
.shelf__tile img{ width:100%; height:100%; object-fit:cover; }
.shelf__tile figcaption{
  position:absolute;
  left:.6rem; bottom:.6rem;
  background:var(--paper);
  color:var(--chocolate);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.35em .6em;
  border-radius:3px;
  box-shadow:var(--shadow-soft);
}
.shelf__tile--banner{ grid-column:span 4; grid-row:span 1; }
.shelf__tile--tall{ grid-column:span 1; grid-row:span 2; }
.shelf__tile--wide{ grid-column:span 2; grid-row:span 2; }
@media (max-width:700px){
  .shelf__tile--banner{ grid-column:span 2; }
  .shelf__tile--tall{ grid-column:span 1; grid-row:span 2; }
  .shelf__tile--wide{ grid-column:span 2; grid-row:span 1; }
}
.shelf__foot{
  text-align:center;
  margin-top:1.6rem;
  font-size:.9rem;
  color:var(--chocolate-2);
  font-style:italic;
}

/* =========================================================
   4. FOR THE WALK + STAMP
   ========================================================= */
.walk{
  background:var(--cream-2);
  padding:3rem 1.2rem;
}
.walk__intro{ max-width:640px; margin:0 auto 2.4rem; text-align:center; }
.walk__intro h2{ font-size:clamp(1.4rem,3vw,1.9rem); }
.walk__intro p{ color:var(--chocolate-2); max-width:48ch; margin-left:auto; margin-right:auto; }

.stamp{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding:2.4rem 1.6rem;
  border:3px solid var(--chocolate);
  border-radius:10px;
  position:relative;
  background:var(--paper);
}
.stamp__label{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--raspberry);
  color:var(--paper);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.4em 1em;
  border-radius:4px;
}
.stamp__quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.6rem);
  line-height:1.35;
  color:var(--chocolate);
  margin:.6rem 0 0;
}

/* =========================================================
   5. REVIEWS AS RECEIPT NOTES
   ========================================================= */
.reviews{ padding:3.2rem 1.2rem; max-width:1200px; margin:0 auto; }
.reviews__rating{
  text-align:center;
  font-weight:700;
  color:var(--gold);
  margin-bottom:2rem;
}
.receipts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1.6rem 1.2rem;
}
.receipt{
  background:var(--paper);
  padding:1.3rem 1.1rem 1.1rem;
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--chocolate-2);
  box-shadow:var(--shadow-soft);
  position:relative;
  border-radius:2px;
}
.receipt::before{
  content:"";
  position:absolute;
  top:-6px; left:0; right:0;
  height:12px;
  background:
    radial-gradient(circle at 8px 6px, transparent 6px, var(--cream) 6.5px) repeat-x,
    radial-gradient(circle at 24px 6px, transparent 6px, var(--cream) 6.5px) repeat-x;
  background-size:16px 12px, 16px 12px;
}
.receipt p{ margin:0 0 .8em; line-height:1.45; }
.receipt__by{
  display:block;
  text-align:right;
  font-size:.78rem;
  color:var(--stone);
  font-weight:600;
}
.receipt:nth-child(1){ transform:rotate(-1.4deg); }
.receipt:nth-child(2){ transform:rotate(1deg); }
.receipt:nth-child(3){ transform:rotate(-0.6deg); }
.receipt:nth-child(4){ transform:rotate(1.6deg); }
.receipt:nth-child(5){ transform:rotate(-1deg); }

/* =========================================================
   6. STOREFRONT POSTCARD
   ========================================================= */
.postcard{
  display:grid;
  grid-template-columns:1fr;
  max-width:1280px;
  margin:0 auto;
}
@media (min-width:820px){
  .postcard{ grid-template-columns:1.3fr 1fr; align-items:stretch; }
}
.postcard__img{ position:relative; overflow:hidden; }
.postcard__img img{ width:100%; height:280px; object-fit:cover; }
@media (min-width:820px){
  .postcard__img img{ height:100%; min-height:380px; }
}
.postmark{
  position:absolute;
  top:16px; right:16px;
  width:74px; height:74px;
  border:3px double var(--paper);
  border-radius:50%;
  color:var(--paper);
  background:rgba(61,42,28,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  line-height:1.15;
  transform:rotate(6deg);
}
.postcard__text{
  background:var(--chocolate);
  color:var(--cream);
  padding:2.2rem 1.4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (min-width:820px){
  .postcard__text{ padding:2.5rem 2.6rem; }
}
.postcard__text .eyebrow{ color:var(--butter); }
.postcard__text h2{ color:var(--cream); font-size:clamp(1.4rem,3vw,1.9rem); }
.postcard__text p{ color:var(--cream-2); }
.postcard__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.6rem; }
.postcard__text .btn--ghost{ border-color:var(--cream); color:var(--cream); }
.postcard__text .btn--ghost:hover{ background:var(--cream); color:var(--chocolate); }

/* =========================================================
   7. HOURS & CONTACT DRAWER
   ========================================================= */
.drawer{
  max-width:900px;
  margin:2.4rem auto 3rem;
  padding:0 1.2rem;
}
.drawer__pull{
  width:60px; height:10px;
  background:var(--stone);
  border-radius:0 0 6px 6px;
  margin:0 auto;
}
.drawer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
  background:var(--paper);
  border:1px solid rgba(61,42,28,.15);
  border-radius:10px;
  padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-soft);
  margin-top:-2px;
}
@media (min-width:640px){
  .drawer__grid{ grid-template-columns:1fr 1fr; }
}
.drawer__block h3{ font-size:1.1rem; margin-bottom:.7rem; }
.hours li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.35rem 0;
  border-bottom:1px dashed rgba(61,42,28,.15);
  font-size:.92rem;
}
.hours li:last-child{ border-bottom:none; }
.hours li span:first-child{ font-weight:600; }
.hours li.is-today{ color:var(--raspberry); }
.hours li.is-today span:first-child::after{ content:" •"; }
.drawer__note{ font-size:.8rem; color:var(--stone); font-style:italic; margin-top:.8rem; margin-bottom:0; }

.contact-list li{ padding:.35rem 0; font-size:.94rem; }
.contact-list a:hover{ color:var(--raspberry); }
.social{ display:flex; gap:.6rem; margin-top:.9rem; }
.social__icon{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--cream-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--chocolate-2);
  border:1px solid rgba(61,42,28,.15);
}
.social__icon:hover{ background:var(--butter); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  text-align:center;
  padding:1.6rem 1rem 2.4rem;
  font-size:.82rem;
  color:var(--stone);
}
.footer-lang{ display:flex; justify-content:center; gap:.4rem; margin-top:.8rem; }
.footer-lang .lang-btn{ color:var(--chocolate-2); border-color:rgba(61,42,28,.3); }
.footer-lang .lang-btn.is-active{ background:var(--gold); color:var(--paper); border-color:var(--gold); }