/* ============================
   Catering page — styles only
   ============================ */

/* Paleta (mesma da home) */
:root{
  --brand:#7c0130;
  --gold:#E6C068;
  --ink:#3D2F24;
  --cream:#F2E9E0;
  --shadow:0 20px 60px rgba(61,47,36,.25);
  --radius:18px;
}

/* Fundo claro do miolo da página */
.section,.after-hero{ background:#F6EFE7; }

/* =====================
   HERO (mesma base da index)
   — apenas garantimos que as abas possam “sair” do banner
   ===================== */
.hero{
  position:relative;     /* contexto p/ abas */
  z-index:2;             /* acima do miolo */
  overflow:visible;      /* deixa abas/subcopy passarem da borda */
}

/* NADA de override no .subcopy aqui — ele vem da index.(en|pt).css
   (pastilha fixa a -70px do fundo, exatamente como na home) */

/* =====================
   ABAS (Catering sections) — abaixo do banner
   ===================== */
.catering-tabs-wrap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-140px;                 /* antes: -110px  → dá ~30px a mais de respiro */
  width:min(1180px,calc(100% - 40px));
  z-index:3;
}

.catering-tabs{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:#f3ebe4; color:var(--brand);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
}
.catering-tabs .tab{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding:18px 12px; font-weight:800; color:#7c0130; letter-spacing:.01em;
  transition:.2s; position:relative;

}
.catering-tabs .tab + .tab{ box-shadow:-1px 0 0 rgba(230,192,104,.6) inset; }
.catering-tabs .tab:hover{ background:rgba(124,1,48,.06); }
.catering-tabs .tab.is-active{ color:#7c0130; }
.tabs-ink{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:#3D2F24; border-radius:3px;
  transition:transform .25s ease, width .25s ease;
  transform:translateX(0);
}

/* =====================
   Seção abaixo do banner
   ===================== */
.after-hero{
  /* espaço para: subcopy (-70px) + abas (-110px) + folga */
  padding-top:190px;
  position:relative; z-index:0;
}
.tab-panel{ display:none; animation:fade .25s ease both; color:#2a1f1b; }
.tab-panel.is-active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.panel-title{ margin:0 0 10px; color:#7c0130; font-weight:800; }
.dash-list{ padding-left:0px; margin:0 0 18px; list-style: none; }
.dash-list li{ margin:6px 0; }

/* CTA dourado */
.book-btn{
  margin:14px 0 22px; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:14px; border:1px solid transparent;
  background:var(--gold); color:var(--ink); font-weight:700;
  box-shadow:0 12px 35px rgba(230,192,104,.35); text-decoration:none;
}
.book-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); transition:.2s; }

/* =======================================================
   Our Options — “faixas” horizontais (lanes)
   ======================================================= */
.options-title{ margin-top:36px; color:#7c0130; text-align:center; }

#optionsGridTop, #optionsPairRows{
  display:block !important; width:100%; margin-top:14px;
}
.opt-lane{
  width:100%; max-width:1180px; margin:0 auto 22px auto; padding:0;
}
.opt-lane .lane-grid{ display:block; }
.opt-lane.lane-duo .lane-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.opt-lane-cat{
  background:rgba(61,47,36,.025);
  border:1px solid rgba(61,47,36,.08);
  border-radius:16px;
  padding:12px 14px 10px;
  box-shadow:0 10px 28px rgba(61,47,36,.06);
  min-width:0;
}
.opt-lane-cat.is-empty{ visibility:hidden; }

.opt-head{
  display:inline-block; margin:2px 0 8px; padding:6px 10px;
  background:#7c0130; color:#fff; border-radius:8px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
}

/* lista horizontal de itens */
.lane-items{
  list-style:none; padding:6px 2px 10px; margin:0;
  display:flex; flex-wrap:nowrap; gap:16px;
  align-items:flex-start; justify-content:flex-start;
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
}
.lane-items::-webkit-scrollbar{ display:none; height:0; }
.opt-items{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; }
.opt-items::-webkit-scrollbar{ display:none; }

/* item */
.opt-item{
  min-width:110px; max-width:110px;
  display:grid; justify-items:center; text-align:center; gap:6px; cursor:pointer;
  scroll-snap-align:start;
}
.opt-item img{
  width:84px; height:84px; object-fit:cover; border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.15); transition:transform .15s ease;
}
.opt-item:hover img{ transform:translateY(-1px) scale(1.02); }
.opt-item span{
  font-size:10.5px; line-height:1.15; color:#7c0130; font-weight:800;
  text-transform:uppercase;
}

/* botão Add to Quote */
.btn-mini{
  display:inline-block; padding:6px 10px; background:var(--gold); color: #3D2F24;
  border:1px solid rgba(61,47,36,.15); border-radius:14px;
  font-weight:800; font-size:11px; box-shadow:0 8px 18px rgba(230,192,104,.22);
  cursor:pointer; transition:.15s ease;
}
.btn-mini:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* botão mobile p/ abrir itens da categoria */
.cat-mobile-cta{
  display:none; margin-top:6px; padding:10px 12px; width:100%;
  background:#fff; color:#7c0130; border:1px solid rgba(124,1,48,.2);
  border-radius:10px; font-weight:800;
}

/* =====================
   Responsivo
   ===================== */
@media (max-width:1180px){
  .opt-item{ min-width:104px; max-width:104px; }
  .opt-item img{ width:80px; height:80px; }
}
@media (max-width:1024px){
  .opt-lane{ max-width:980px; }
  .opt-item{ min-width:100px; max-width:100px; }
  .opt-item img{ width:76px; height:76px; }
}
@media (max-width:860px){
  .opt-item{ min-width:96px; max-width:96px; }
  .opt-item img{ width:72px; height:72px; }
}

/* ===== Mobile ===== */
@media (max-width:760px){
    /* um pouco mais perto no mobile */
  .after-hero{ padding-top:200px; }       /* compensa subcopy + abas */

  .opt-lane{ max-width:100%; }
  .opt-lane.lane-duo .lane-grid{ gap:14px; }
  .opt-lane-cat{ padding:12px 12px 12px; }
  .lane-items{ display:none; }           /* esconde itens na lista */
  .cat-mobile-cta{ display:block; }      /* mostra CTA de abrir modal */
}

/* =====================
   Modal do produto (item)
   ===================== */
.menu-modal{ position: fixed; inset: 0; display: none; z-index: 10000; }
.menu-modal.open{ display:flex; align-items:center; justify-content:center; }
.mm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.mm-card{
  position: relative; z-index: 1; width: min(960px, calc(100% - 28px));
  max-height: min(88vh, 980px); overflow: hidden; background: #fff;
  border-radius: 16px; box-shadow: 0 26px 70px rgba(0,0,0,.35);
  display: grid; grid-template-rows: auto 1fr auto;
}
.mm-media{ width:100%; height:min(56vh, 560px); background:#000; }
.mm-media img{ width:100%; height:100%; object-fit:cover; }
.mm-body{ padding:18px; overflow:auto; }
.mm-body h3{ margin:0 0 8px; color:#7c0130; font-size:22px; font-weight:800; }
.mm-body p{ margin:0 0 16px; color:#3D2F24; }
#mmQuoteBtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; border:1px solid transparent;
  background:var(--gold); color:var(--ink); font-weight:700;
  box-shadow:0 12px 30px rgba(230,192,104,.35);
}
.mm-close{
  position:absolute; top:8px; left:10px; background:#fff; color:#7c0130;
  border:0; width:32px; height:32px; border-radius:999px; font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
body.modal-open{ overflow:hidden; }
@media (max-width:740px){ .mm-card{ width:calc(100% - 16px); } }

/* ========== Modal de LISTA DE ITENS por categoria (mobile) ========== */
.cat-modal{ position:fixed; inset:0; display:none; z-index:10001; }
.cat-modal.open{ display:flex; align-items:flex-end; justify-content:center; }
.cat-modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.cat-modal .sheet{
  position:relative; z-index:1; width:100%; max-width:740px; max-height:86vh;
  background:#fff; border-radius:18px 18px 0 0; padding:14px; overflow:auto;
  box-shadow:0 -18px 50px rgba(0,0,0,.35);
}
.cat-modal .sheet h3{ margin:6px 0 12px; color:#7c0130; font-weight:800; text-align:center; }
.cat-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.cat-grid .opt-item{ min-width:unset; max-width:unset; }
.cat-grid .opt-item img{ width:88px; height:88px; }
.cat-close{
  position:absolute; right:10px; top:10px; background:#fff; border:1px solid rgba(0,0,0,.08);
  width:34px; height:34px; border-radius:999px; color:#7c0130; font-size:20px;
}

/* === Catering: alinhar altura dos títulos dos itens (sempre 3 linhas) === */
.opt-item{
  display: grid;              /* imagem / título / botão */
  justify-items: center;
  gap: 6px;
}

/* reserva altura fixa de 3 linhas e faz clamp */
.opt-item span{
  --lh: 1.15;                 /* line-height do título (igual ao seu) */
  --lines: 3;                 /* quantas linhas quer reservar */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;

  line-height: var(--lh);
  height: calc(1em * var(--lh) * var(--lines));
  min-height: calc(1em * var(--lh) * var(--lines));

  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #7c0130;
  text-align: center;
}

/* ===== Accordions (Savory/Sweet) ===== */
.acc{ background:#fff; border:1px solid rgba(61,47,36,.08); border-radius:14px; margin:14px 0 18px; box-shadow:0 8px 24px rgba(61,47,36,.06); }
.acc-head{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  background: rgba(230, 192, 104, 0.35); /* dourado com transparência */
  color:#7c0130;                         /* texto sólido (sem transparência) */
  border:0; border-radius:14px;
  cursor:pointer; position:relative;
  font-weight: 500;                       /* “letra normal” */
}
.acc-caret{
  width:22px; height:22px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(124,1,48,.35);
  display:inline-block; position:relative; transition:transform .2s ease;
}
.acc-caret::before{
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-right:2px solid #7c0130; border-bottom:2px solid #7c0130; transform:rotate(45deg);
  left:5px; top:3px;
}
.acc-head[aria-expanded="true"] .acc-caret{ transform:rotate(180deg); }

.acc-body{ overflow:hidden; transition:max-height .25s ease; }
.acc-body:not(.is-open){ max-height:0; }
.acc-body.is-open{ max-height:2000px; } /* suficiente para o conteúdo */

#grid-savory, #grid-sweet{ padding:8px 10px 14px; }

/* ==== Accordions (Savoury / Sweet) ==== */
.opt-accordion { 
  margin: 14px 0 18px;
}

.opt-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: #E6C068;       /* cor pedida */
  color: #3D2F24;            /* texto para contraste */
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(230,192,104,.35);
}

.opt-acc-title {
  font-size: 18px;
  line-height: 1.2;
}

.opt-acc-chev {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 2px solid #7A0D22;    /* borda vinho do site */
  color: #7A0D22;
  font-weight: 800;
}

/* desenha + / – via CSS */
.opt-acc-chev::after { content: "+"; }
.opt-acc-head [aria-expanded="true"] .opt-acc-chev::after { content: "–"; }

/* corpo do acordeão */
.opt-acc-body {
  display: none;                 /* começa fechado */
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px;
  margin-top: 10px;              /* espaço entre cabeçalho e corpo */
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

/* espaçamento entre linhas (cada lane vira um "bloco") */
.opt-acc-body .opt-lane { 
  margin-bottom: 18px;
}
.opt-acc-body .opt-lane:last-child {
  margin-bottom: 0;
}