/* Shari's Home Cooking // responsive presentation pass
   Isolated visual layer only. Runtime, menu parsing, Dropbox sync and order behavior stay untouched. */

:root{
  --shari-content-max:1120px;
  --shari-card-gap:clamp(.75rem,2vw,1.25rem);
}

/* Keep every major surface inside its own box. */
.page-shell,
.brand-hero,
.menu-grid,
.menu-card,
.catering-banner,
.gallery-grid,
.gallery-card,
.order-layout,
.order-menu-panel,
.cart-panel,
.business-footer{min-width:0;max-width:100%}

.page-shell{width:min(var(--shari-content-max),100%);overflow:visible}

/* Bring the site closer to the printed-menu / flyer language. */
.brand-hero{
  isolation:isolate;
  grid-template-columns:minmax(0,1fr) clamp(142px,18vw,205px);
  gap:clamp(1rem,3vw,2.25rem);
  min-height:clamp(245px,38vh,390px);
  border:2px solid rgba(217,31,104,.2);
  background:
    radial-gradient(circle at 86% 20%,rgba(238,59,134,.17),transparent 28%),
    linear-gradient(135deg,#fff 0%,#fff8fa 45%,#ffe2ec 100%);
}
.brand-hero::before{border-width:8px;opacity:.22}
.brand-copy{position:relative;z-index:1;min-width:0}
.brand-copy .eyebrow{margin-bottom:clamp(.65rem,1.35vw,.95rem)}
.brand-copy h1{max-width:760px;margin:0 0 .3rem;font-size:clamp(2.45rem,6vw,5.6rem)}
.brand-copy h1 span{margin-bottom:.14em;color:var(--pink);line-height:.82;text-shadow:0 2px 0 #fff,0 8px 20px rgba(217,31,104,.12)}
.tagline{font-weight:600}
.hero-actions{align-items:stretch}
.hero-actions .button{white-space:nowrap}
.hero-stamp{z-index:1;align-self:center;justify-self:end;max-width:100%}

.menu-intro{padding-top:clamp(1.35rem,3vw,2.4rem)}
.menu-intro>div{min-width:0}
.menu-intro h2{font-size:clamp(2.2rem,5.8vw,4.5rem)}
.menu-status{
  flex:0 1 auto;
  max-width:38ch;
  padding:.5rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  text-align:right;
  overflow-wrap:anywhere;
}

.menu-grid{gap:var(--shari-card-gap)}
.menu-card{border-color:rgba(217,31,104,.18);background:rgba(255,255,255,.95)}
.menu-card-header{background:linear-gradient(90deg,var(--pink-faint),#fff 75%)}
.menu-card-header h3{min-width:0;overflow-wrap:anywhere}
.menu-list{min-width:0}
.menu-item{
  grid-template-columns:minmax(0,max-content) minmax(14px,1fr) max-content;
  min-width:0;
}
.menu-item-name{min-width:0;overflow-wrap:anywhere}
.menu-item-dots{min-width:8px}
.menu-item-price{white-space:nowrap}
.menu-item-detail{min-width:0;overflow-wrap:anywhere}
.status-chip{max-width:100%;white-space:normal;text-align:center}

.catering-banner{flex-wrap:wrap}
.catering-banner>div{min-width:0;flex:1 1 420px}
.catering-banner h2{overflow-wrap:anywhere}
.catering-banner .button{flex:0 0 auto;white-space:nowrap}

.gallery-card figcaption,
.page-heading p,
.panel-heading,
.order-item,
.cart-line,
.customer-form{min-width:0}
.gallery-card figcaption,
.order-item strong,
.order-item small,
.cart-line strong,
.cart-line small{overflow-wrap:anywhere}

.order-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr)}
.order-item{grid-template-columns:minmax(0,1fr) max-content}
.order-item-action{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.order-item-price{white-space:nowrap}
.cart-panel{top:.75rem}
.customer-form input,
.customer-form textarea{min-width:0}

.shari-pill{min-width:0}
.shari-pill a{min-width:0;overflow:hidden}
.shari-pill a span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Phone portrait: stacked flyer composition, single menu column, zero side collisions. */
@media (orientation:portrait) and (max-width:760px){
  :root{--shari-gutter:clamp(.7rem,3.2vw,1rem)}
  .page-shell{padding-top:.7rem}
  .brand-hero{
    grid-template-columns:minmax(0,1fr);
    gap:.9rem;
    min-height:0;
    padding:clamp(1.05rem,4vw,1.35rem);
    border-radius:clamp(22px,6vw,32px);
  }
  .brand-copy .eyebrow{margin-bottom:.8rem}
  .brand-copy h1{font-size:clamp(2.35rem,12.8vw,4.15rem);line-height:.88}
  .brand-copy h1 span{line-height:.84}
  .tagline{font-size:clamp(1.2rem,6vw,1.65rem)}
  .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:1rem}
  .hero-actions .button{width:100%;min-width:0;padding-inline:.7rem}
  .hero-stamp{
    justify-self:stretch;
    width:100%;
    min-width:0;
    aspect-ratio:auto;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:.35rem .7rem;
    padding:.72rem .85rem;
    border-width:4px;
    border-radius:18px;
    transform:none;
  }
  .hero-stamp span{font-size:1.08rem}
  .hero-stamp small{font-size:.88rem}
  .hero-stamp em{margin:0;font-size:.9rem}
  .menu-intro{align-items:flex-start;flex-direction:column;gap:.65rem;padding-inline:.1rem}
  .menu-status{max-width:100%;text-align:left}
  .menu-grid{grid-template-columns:minmax(0,1fr)}
  .menu-item{grid-template-columns:minmax(0,auto) minmax(10px,1fr) max-content;gap:.42rem}
  .menu-list{padding-inline:.9rem}
  .catering-banner{align-items:stretch;flex-direction:column}
  .catering-banner>div{flex-basis:auto;align-items:flex-start}
  .catering-banner .button{width:100%}
  .gallery-grid{grid-template-columns:minmax(0,1fr)}
  .gallery-card,.gallery-card:nth-child(3n+1),.gallery-card:nth-child(3n+2){grid-column:auto}
  .order-layout{grid-template-columns:minmax(0,1fr)}
  .cart-panel{position:static}
  .option-choices{grid-template-columns:minmax(0,1fr)}
}

/* Very narrow portrait: keep labels and prices readable without collision. */
@media (orientation:portrait) and (max-width:390px){
  .hero-actions{grid-template-columns:minmax(0,1fr)}
  .menu-item{grid-template-columns:minmax(0,1fr) max-content;align-items:start}
  .menu-item-dots{display:none}
  .menu-item-detail{grid-column:1/-1;margin-top:-.18rem}
  .menu-item-name{padding-right:.25rem}
  .shari-pill a{gap:.08rem;font-size:.7rem}
}

/* Phone landscape: compact the header instead of letting desktop sizing eat the viewport. */
@media (orientation:landscape) and (max-height:560px){
  :root{
    --shari-gutter:clamp(.55rem,1.8vw,.9rem);
    --shari-pill-reserve:calc(66px + var(--shari-safe-bottom));
  }
  .page-shell{padding-top:.55rem;padding-bottom:.9rem}
  .brand-hero{
    grid-template-columns:minmax(0,1fr) clamp(118px,17vw,160px);
    gap:1rem;
    min-height:0;
    padding:clamp(.9rem,2.6vw,1.35rem);
    border-radius:24px;
  }
  .brand-copy .eyebrow{margin-bottom:.55rem}
  .brand-copy h1{font-size:clamp(2rem,6.5vw,3.55rem);line-height:.86}
  .brand-copy h1 span{font-size:1.15em;line-height:.82}
  .tagline{margin-top:.35rem;font-size:clamp(1.05rem,2.8vw,1.45rem)}
  .hero-actions{margin-top:.8rem;gap:.5rem}
  .hero-actions .button{min-height:40px;padding:.6rem .85rem}
  .hero-stamp{width:clamp(118px,17vw,160px);border-width:6px}
  .hero-stamp strong{font-size:.72rem}
  .hero-stamp span{font-size:clamp(1.05rem,2.4vw,1.45rem)}
  .hero-stamp small{font-size:.82rem}
  .hero-stamp em{font-size:.78rem}
  .menu-intro{padding-top:1rem;align-items:center}
  .menu-intro h2{font-size:clamp(2rem,5vw,3.2rem)}
  .menu-status{max-width:32ch;font-size:.78rem}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .menu-card-header{padding:.75rem .85rem .65rem}
  .menu-card-header h3{font-size:1.15rem}
  .menu-list{padding:.45rem .8rem .8rem}
  .menu-item{padding:.45rem 0;font-size:.9rem}
  .catering-banner{padding:.9rem 1rem}
  .business-footer{padding-top:1rem}
  .order-layout{grid-template-columns:minmax(0,1.2fr) minmax(255px,.8fr);gap:.75rem}
  .order-menu-panel,.cart-panel{padding:.8rem}
  .page-heading{padding:.75rem 0 .8rem}
  .page-heading h1{font-size:clamp(2rem,6vw,3.5rem)}
  .shari-pill{min-height:56px;padding:.32rem;border-radius:20px}
  .shari-pill a{min-height:46px;border-radius:15px;font-size:.78rem}
}

/* Mid-width landscape where a two-column order surface would become cramped. */
@media (orientation:landscape) and (max-width:720px){
  .order-layout{grid-template-columns:minmax(0,1fr)}
  .cart-panel{position:static}
}

/* Tablet / desktop breathing room without allowing the flyer to sprawl. */
@media (min-width:1100px){
  .page-shell{padding-left:1.4rem;padding-right:1.4rem}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}