@charset "UTF-8";
:root{
  --brand-900:#163d34;
  --brand-800:#1f5a47;
  --brand-700:#2f755d;
  --brand-500:#68bc90;
  --brand-300:#bde6cf;
  --brand-200:#ddf4e8;
  --brand-100:#f2faf6;
  --accent:#e8fff0;
  --ink:#16372f;
  --muted:#6a7c74;
  --line:#dce7e1;
  --card:#ffffff;
  --bg:#f4f8f5;
  --danger:#9f3d3d;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius:18px;
  --radius-sm:14px;
  --shadow:0 14px 42px rgba(22,61,52,.08);
  --shadow-soft:0 8px 24px rgba(22,61,52,.08);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f4f8f5 0%,#eef7f1 100%);color:var(--ink)}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0}
button:disabled{opacity:.6;cursor:not-allowed}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}
img{max-width:100%;display:block}

.topbar{position:sticky;top:0;z-index:30;padding:max(10px,env(safe-area-inset-top)) 14px 12px;background:rgba(244,248,245,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,231,225,.8)}
.topbar-inner,.app-shell,.site-footer{width:min(1180px,100% - 32px);margin:0 auto}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:40px;height:40px;border-radius:12px}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{font-size:1rem;line-height:1.15}
.brand-copy span{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.outline,.button,.text-button{transition:.2s ease}
.outline{background:#fff;color:var(--ink);border:1px solid var(--line);padding:12px 16px;border-radius:14px;font-weight:700;font-size:.92rem;box-shadow:var(--shadow-soft)}
.outline:hover{background:var(--brand-100)}
.bag{display:flex;align-items:center;gap:12px;white-space:nowrap}
.bag span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--brand-800);color:#fff;font-size:.8rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:#fff;padding:14px 18px;border-radius:16px;font-weight:800;box-shadow:0 12px 28px rgba(31,90,71,.28)}
.button:hover{transform:translateY(-1px)}
.button.full,.outline.full{width:100%}
.text-button{background:none;color:var(--brand-800);padding:6px 0;font-weight:700}

.app-shell{display:grid;gap:18px;padding:18px 0 120px}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:16px;border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(135deg,var(--brand-800),#2d7e63 55%,#54b486 100%);color:#fff;padding:24px;box-shadow:var(--shadow)}
.hero-content{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.eyebrow{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.hero h1{margin:0;font-size:clamp(2rem,4.2vw,3.6rem);line-height:.98;letter-spacing:-.04em}
.hero-description{margin:0;max-width:38rem;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.88)}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-tag{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);font-weight:700;font-size:.9rem}
.hero-visual{position:relative;min-height:280px;display:grid;place-items:center}
.visual-card{position:absolute;border-radius:34px;background:#fff;box-shadow:0 20px 46px rgba(5,28,21,.2)}
.visual-card-back{inset:34px 12px 8px 90px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:none;border:1px solid rgba(255,255,255,.18);transform:rotate(10deg)}
.visual-card-front{width:min(100%,280px);height:100%;max-height:380px;padding:18px;background:linear-gradient(180deg,#fff,#f6fbf8)}
.mini-header{height:14px;width:120px;border-radius:999px;background:#dceee4;margin-bottom:14px}
.mini-search{height:42px;border-radius:16px;background:#f2f7f4;margin-bottom:16px;border:1px solid #e2ece7}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.mini-grid span,.mini-list span{display:block;border-radius:16px;background:#e9f4ee}
.mini-grid span{aspect-ratio:1/1}
.mini-banner{height:112px;border-radius:22px;background:linear-gradient(135deg,var(--brand-800),var(--brand-500));margin-bottom:16px}
.mini-list{display:grid;gap:10px}
.mini-list span{height:56px}

.store-card,.quick-categories article,.catalog-section,.steps>div,.product,.cart-row,.payment-note,.notice,.empty,.tracking-dialog,.product-dialog,.cart-dialog,.checkout-dialog{background:var(--card);box-shadow:var(--shadow-soft)}
.store-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:24px;flex-wrap:wrap}
.store-main{display:flex;align-items:center;gap:14px;min-width:0}
.store-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,var(--brand-100),var(--brand-200))}
.store-mark img{width:30px;height:30px}
.store-card h2{margin:0;font-size:1.2rem;line-height:1.2}
.store-card p{margin:4px 0 0;color:var(--muted)}
.store-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-note,.pill{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;font-size:.88rem;font-weight:700}
.store-note{background:var(--brand-100);color:var(--brand-800)}
.pill{background:#f7faf8;color:var(--muted);border:1px solid var(--line)}

.quick-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quick-categories article{border-radius:22px;padding:18px;border:1px solid var(--line);display:grid;gap:8px;min-height:124px}
.quick-categories article span{font-size:1.55rem}
.quick-categories article strong{font-size:1rem}
.quick-categories article small{color:var(--muted);line-height:1.45}

.catalog-section{padding:20px;border:1px solid var(--line);border-radius:28px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.section-heading h2{margin:.25rem 0 0;font-size:clamp(1.45rem,2.2vw,2rem);letter-spacing:-.03em}
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;min-width:min(100%,340px);box-shadow:var(--shadow-soft)}
.search span{font-size:1rem;color:var(--muted)}
.search input{border:0;background:transparent;flex:1;min-width:0;color:var(--ink)}
.search input::placeholder{color:#92a39a}
.search kbd{padding:4px 8px;border-radius:10px;background:#f1f5f3;border:1px solid #e5ece8;color:var(--muted);font-size:.78rem}
.categories{display:flex;gap:10px;overflow:auto;padding:4px 2px 10px;margin:0 -2px 10px;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.category{flex:0 0 auto;padding:12px 16px;border-radius:999px;background:#f6f9f7;color:var(--muted);border:1px solid var(--line);font-weight:700}
.category.active,.category[aria-pressed="true"]{background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:#fff;border-color:transparent}
.notice,.empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:26px 20px;border-radius:22px;border:1px dashed var(--line);margin-top:12px}
.notice{grid-auto-flow:column;justify-content:center}
.spinner{width:18px;height:18px;border:3px solid #dce9e2;border-top-color:var(--brand-700);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.empty-symbol{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--brand-100);font-size:1.5rem}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:14px;border:1px solid var(--line);border-radius:24px;overflow:hidden;position:relative;min-height:280px}
.product:hover{transform:translateY(-2px);transition:.2s ease}
.product-art{position:relative;display:grid;place-items:center;height:148px;border-radius:20px;background:linear-gradient(135deg,#eff8f3,#dff1e6);color:rgba(31,90,71,.28);font-size:2rem;font-weight:900;overflow:hidden;margin-bottom:12px}
.product-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.no-photo{position:absolute;right:10px;bottom:10px;font-size:.7rem;background:rgba(255,255,255,.88);color:var(--muted);padding:6px 8px;border-radius:999px}
.product-content{display:grid;gap:10px;flex:1}
.product-category{margin:0;color:var(--brand-700);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.product h3{margin:0;font-size:1rem;line-height:1.35;letter-spacing:-.01em}
.product-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto}
.price{display:flex;align-items:flex-end;gap:6px;font-size:1.1rem;font-weight:900;color:var(--brand-800)}
.hint{font-size:.78rem;color:var(--muted)}
.add-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--brand-100);color:var(--brand-800);font-size:1.35rem;font-weight:700}
.catalog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps>div{border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;gap:14px;align-items:flex-start}
.steps span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--brand-100);color:var(--brand-800);font-weight:900;flex:0 0 auto}
.steps h3{margin:0 0 6px;font-size:1.02rem}
.steps p{margin:0;color:var(--muted);line-height:1.5}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 0 calc(40px + env(safe-area-inset-bottom));font-size:.92rem;color:var(--muted);flex-wrap:wrap}
.footer-brand{gap:10px}

.mobile-cart{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-radius:18px;background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:#fff;box-shadow:0 16px 36px rgba(22,61,52,.25)}
.mobile-cart b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;margin-left:8px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.18)}

::backdrop{background:rgba(9,27,22,.5);backdrop-filter:blur(4px)}
dialog{border:0;padding:0;color:var(--ink);max-width:min(96vw,760px);width:min(96vw,760px);border-radius:26px;overflow:hidden}
.product-dialog,.cart-dialog,.checkout-dialog,.tracking-dialog{border:1px solid var(--line)}
.product-dialog{display:grid;grid-template-columns:240px 1fr}
.detail-visual{display:grid;place-items:center;background:linear-gradient(160deg,var(--brand-800),var(--brand-500));min-height:100%;padding:24px}
.detail-visual img{width:92px;height:92px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.detail-content{padding:24px;display:grid;gap:14px}
.detail-content h2{margin:0;font-size:1.5rem;letter-spacing:-.03em}
.detail-price{margin:0;font-size:1.35rem;font-weight:900;color:var(--brand-800)}
label{display:grid;gap:8px;font-weight:700;font-size:.95rem}
input,textarea,select{width:100%;border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px 14px;color:var(--ink)}
textarea{resize:vertical}
.muted{margin:0;color:var(--muted);line-height:1.55}
.detail-actions{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end}
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;min-height:50px}
.quantity button{width:44px;height:50px;background:#f6faf7;font-size:1.2rem;font-weight:900;color:var(--brand-800)}
.quantity input,.quantity output{width:72px;border:0;text-align:center;background:#fff;padding:0 8px}
.quantity output{display:grid;place-items:center;height:50px;font-weight:800}
.close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.6rem;box-shadow:var(--shadow-soft)}
.cart-dialog,.checkout-dialog,.tracking-dialog{position:relative;background:#fff}
.cart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.cart-header h2{margin:.2rem 0 0;font-size:1.55rem;letter-spacing:-.03em}
#cart-body{padding:18px 22px;display:grid;gap:12px;max-height:min(50vh,420px);overflow:auto}
.cart-row{padding:16px;border:1px solid var(--line);border-radius:18px;display:grid;gap:10px}
.cart-row-head,.total-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-row p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.cart-row-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.remove{background:#fff1f1;color:var(--danger);border:1px solid #f0cece;padding:10px 14px;border-radius:14px;font-weight:700}
.cart-bottom,#checkout-form{display:grid;gap:14px;padding:18px 22px 22px}
.cart-message{margin:0;min-height:1.3em;color:var(--brand-800);font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .wide{grid-column:1 / -1}
.payment-note{padding:16px 18px;border:1px solid var(--line);border-radius:18px;display:grid;gap:8px}
.payment-note strong{font-size:1rem}
#payment-choice{margin-top:4px}
.tracking-dialog{padding:24px;display:grid;gap:14px;max-width:min(94vw,520px);width:min(94vw,520px)}
.tracking-dialog h2{margin:0;font-size:1.55rem;letter-spacing:-.03em}
.tracking-dialog p{margin:0;line-height:1.55}
.pix-area{display:grid;gap:12px;border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdfb}
.pix-qr{width:min(100%,260px);margin-inline:auto;border-radius:18px;border:1px solid var(--line);background:#fff;padding:10px}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;min-width:min(90vw,360px);padding:14px 16px;border-radius:16px;background:#183c33;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22);text-align:center}

@media (max-width:1100px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-categories{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-visual{min-height:220px}
  .steps{grid-template-columns:1fr}
  .product-dialog{grid-template-columns:1fr}
  .detail-visual{min-height:180px}
}
@media (max-width:720px){
  .topbar-inner,.app-shell,.site-footer{width:min(100% - 24px,1180px)}
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .top-actions{width:100%;justify-content:space-between}
  .top-actions .outline{flex:1}
  .top-actions .bag{justify-content:space-between}
  .quick-categories{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-heading{align-items:stretch}
  .search{min-width:100%}
  .store-card{padding:16px}
  .form-grid{grid-template-columns:1fr}
  dialog{width:100vw;max-width:100vw;min-height:auto;border-radius:24px 24px 0 0;margin:auto 0 0}
  .cart-dialog,.checkout-dialog,.tracking-dialog,.product-dialog{max-height:88svh;overflow:auto}
}
@media (max-width:480px){
  .topbar{padding:calc(10px + env(safe-area-inset-top)) 10px 10px}
  .topbar-inner,.app-shell,.site-footer{width:min(100% - 20px,1180px)}
  .brand img{width:36px;height:36px}
  .brand-copy strong{font-size:.95rem}
  .brand-copy span{font-size:.75rem}
  .hero{padding:18px;border-radius:24px}
  .hero h1{font-size:2rem}
  .hero-description{font-size:.94rem}
  .hero-actions{align-items:stretch}
  .button,.outline{min-height:48px}
  .hero-actions .button{flex:1}
  .hero-tag{width:100%;justify-content:center}
  .quick-categories{grid-template-columns:1fr 1fr;gap:10px}
  .quick-categories article{padding:14px;min-height:108px}
  .catalog-section{padding:16px;border-radius:24px}
  .products{grid-template-columns:1fr;gap:12px}
  .product{min-height:unset;padding:12px}
  .product-art{height:136px}
  .mobile-cart{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:14px 16px}
  .cart-header,#cart-body,.cart-bottom,#checkout-form,.tracking-dialog,.detail-content{padding-left:16px;padding-right:16px}
  .tracking-dialog{padding-top:20px}
  .close{top:10px;right:10px}
}
@media (max-width:360px){
  .top-actions{gap:8px}
  .top-actions .outline{padding-inline:12px;font-size:.86rem}
  .quick-categories{grid-template-columns:1fr}
  .store-badges{gap:8px}
}

/* ------------------------------------------------------------------
   Correcao: dialogos nao podem ficar visiveis quando estao fechados.
   Respeita o atributo open e a top layer nativa de showModal().
   ------------------------------------------------------------------ */
dialog:not([open]) {
  display: none !important;
}

dialog[open] {
  margin: auto;
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* O botao de fechar e um formulario auxiliar, nao um item do grid. */
.product-dialog {
  position: relative;
}
.product-dialog > form[method="dialog"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0;
  z-index: 3;
}
.product-dialog > .detail-visual {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.product-dialog > .detail-content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

@media (max-width: 860px) {
  .product-dialog > .detail-visual {
    grid-column: 1;
    grid-row: 1;
  }
  .product-dialog > .detail-content {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 720px) {
  dialog[open] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    border-radius: 22px;
  }
}

@media (max-width: 360px) {
  dialog[open] {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* TIMELINE OPERACIONAL - linha que avanca e bolinhas preenchidas */
.tracking-dialog { width: min(600px, calc(100vw - 24px)); }
.tracking-timeline { margin: 24px 0; padding: 18px 14px 16px; background: #f6f9f3;
  border: 1px solid #dce8d6; border-radius: 15px; }
.tracking-timeline[hidden] { display: none; }
.tracking-timeline-top { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.tracking-timeline-top strong { color: #264a3a; font-weight: 700; }
#tracking-stage-caption { font-size: 12px; font-weight: 700; color: #277950; }
.timeline-scroll { overflow-x: auto; scrollbar-width: thin; padding: 8px 0 4px; }
.timeline-pedido { --linha-preenchida: 0%; position: relative; display: flex;
  list-style: none; justify-content: space-between; margin: 0; padding: 0;
  min-width: 360px; isolation: isolate; }
.timeline-pedido::before, .timeline-pedido::after { content: ''; position: absolute;
  height: 5px; border-radius: 8px; left: var(--linha-esquerda, 10%); top: 16px; z-index: -1; }
.timeline-pedido::before { width: var(--linha-total, 80%); background: #d1ddd0; }
.timeline-pedido::after { width: var(--linha-preenchida); background: #278a5d;
  transition: width .7s cubic-bezier(.2,.85,.25,1); }
.timeline-etapa { width: 20%; flex: 0 0 20%; display: flex; align-items: center;
  flex-direction: column; text-align: center; gap: 6px; color: #7d8980; font-size: 11px; }
.timeline-bolinha { width: 36px; height: 36px; background: #fff; border: 3px solid #cddacd;
  color: #879488; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; transition: background .3s, border-color .3s,
  color .3s, transform .3s; box-shadow: 0 0 0 3px #f6f9f3; }
.timeline-etapa.concluida .timeline-bolinha { background: #278a5d; border-color: #278a5d; color: white; }
.timeline-etapa.concluida .timeline-nome { color: #256744; font-weight: 750; }
.timeline-etapa.atual .timeline-bolinha { box-shadow: 0 0 0 4px #d4ebdb; transform: scale(1.08); }
.timeline-nome { max-width: 100px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.timeline-hora { font-size: 10px; line-height: 1.2; min-height: 12px; color: #6b7d6e; }
.timeline-pedido.cancelado::after { width: 0; }
.timeline-pedido.timeline-mudou .timeline-etapa.atual .timeline-bolinha { animation: timeline-pop .45s ease both; }
@keyframes timeline-pop { 0% { transform: scale(.85); } 70% { transform: scale(1.2); } 100% { transform: scale(1.08); } }
.tracking-dialog .tracking-timeline-note { font-size: 11px; color: #677a6d; margin: 10px 0 0; }
@media (max-width: 460px) {
  .tracking-dialog { padding: 26px 16px; }
  .tracking-timeline { padding: 14px 8px; }
  .timeline-pedido { min-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-pedido::after, .timeline-bolinha { transition: none; animation: none !important; }
}


/* LOJA PARA CONSUMIDOR — sem cartoes promocionais sobre o sistema */
.app-shell { gap: 16px; padding-top: 16px; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.topbar-inner { min-height: 60px; }
.brand-copy strong { font-size: 1.14rem; letter-spacing: -.03em; font-weight: 800; line-height: 1.2; }
.brand-copy span { font-size: .76rem; max-width: 480px; }
.hero.hero-banner { position: relative; display: block; min-height: 250px; padding: 0; overflow: hidden;
  background: linear-gradient(135deg,#1d5544 0%,#347d63 53%,#68b18d 100%); border-radius: 25px; }
.hero-fallback { min-height: 250px; display: flex; flex-direction: column; align-items:flex-start; justify-content:center;
  gap: 14px; padding: clamp(24px,5vw,52px); }
.hero-fallback h1 { font-size: clamp(2rem,5vw,3.25rem); line-height:1.08; margin:0; }
.hero-fallback .hero-description { color:rgba(255,255,255,.91); max-width:31rem; }
.hero-fallback .button { background:#fff; color:#1c5944; box-shadow:0 8px 20px #06231b23; }
.hero-fallback .button:hover { background:#ecf8ef; }
.vitrine-carousel { position:relative; height:clamp(220px,28vw,370px); width:100%; isolation:isolate; }
.vitrine-carousel[hidden] { display:none!important; }
.vitrine-slides { position:relative; width:100%; height:100%; }
.vitrine-slide { position:absolute; inset:0; display:flex; align-items:center; padding:clamp(20px,4.5vw,52px); overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .38s ease,visibility .38s ease; }
.vitrine-slide.is-active { opacity:1; visibility:visible; z-index:1; }
.vitrine-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.vitrine-slide::after { content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(5,33,23,.65),rgba(5,33,23,.2) 58%,transparent);pointer-events:none; }
.vitrine-copy { position:relative; z-index:1; color:#fff; width:min(100%,560px); display:grid; gap:12px; }
.vitrine-copy h2 { font-size:clamp(1.45rem,3.8vw,3.15rem);letter-spacing:-.035em;line-height:1.08;margin:0; }
.vitrine-copy p { margin:0;max-width:42ch;line-height:1.5;font-size:clamp(.9rem,1.6vw,1.04rem); }
.vitrine-copy .button { background:#fff;color:#1b6048;box-shadow:0 9px 24px #09281920;width:fit-content; }
.vitrine-controls { position:absolute; bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex; align-items:center;gap:8px;padding:6px 8px;border-radius:999px;background:rgba(9,38,28,.46);backdrop-filter:blur(12px); }
.vitrine-controls[hidden]{display:none!important}
.vitrine-arrow {display:grid;place-items:center;background:#ffffff21;color:#fff;width:32px;height:32px;border-radius:50%;font-size:26px;line-height:1; }
.vitrine-dots { display:flex;align-items:center;gap:6px; }
.vitrine-dot {width:9px;height:9px;min-width:9px;border-radius:100%;background:#ffffff85;padding:0;transition:width .2s,background .2s; }
.vitrine-dot[aria-current="true"] {width:23px;border-radius:999px;background:#fff;}
.catalog-section { scroll-margin-top: 110px; }
.catalog-section .eyebrow{color:#347b5a;}
.product-content{min-width:0}
.product h3{overflow-wrap:anywhere}
.price{flex-wrap:wrap;font-size:clamp(.94rem,1.8vw,1.1rem);line-height:1.3}
.price .hint{font-weight:500}
/* area da timeline permanece no dialogo; sao mantidos os fixes de visibilidade */
@media(max-width:720px){
  .topbar-inner{align-items:center;flex-direction:row;flex-wrap:wrap;}
  .top-actions{width:auto;flex:0 0 auto;}
  .top-actions .outline{flex:0 0 auto;}
  .top-actions .bag{justify-content:center;}
  .brand{flex:1;min-width:0;}
  .brand-copy span{max-width:52vw;}
  .hero.hero-banner{min-height:215px;}
  .hero-fallback{min-height:215px;}
  .vitrine-carousel{height:clamp(215px,48vw,320px)}
}
@media(max-width:480px){
  .topbar-inner{gap:8px;}
  .brand{gap:9px;}
  .brand img{height:35px;width:35px;object-fit:contain;flex:none;}
  .brand-copy strong{font-size:.99rem;}
  .brand-copy span{font-size:.68rem;max-width:46vw;}
  .top-actions{gap:6px;}
  .top-actions .bag{font-size:0;gap:0;padding:9px;min-height:44px;}
  .top-actions .bag span{font-size:.79rem;min-width:25px;height:25px;}
  .top-actions .outline:not(.bag){font-size:.75rem;padding:9px;min-height:44px;}
  .hero.hero-banner{border-radius:20px;min-height:215px;}
  .hero-fallback{padding:22px;min-height:215px;gap:12px;}
  .hero-fallback h1{font-size:clamp(1.72rem,7vw,2.25rem);}
  .hero-fallback .hero-description{font-size:.87rem;}
  .vitrine-carousel{height:225px;}
  .vitrine-slide{padding:20px 20px 45px;}
  .vitrine-slide::after{background:linear-gradient(90deg,#062f22ab,#062f2250 65%,#062f2215);}
  .vitrine-copy{gap:7px;}
  .vitrine-copy h2{font-size:1.65rem;}
  .vitrine-copy p{font-size:.83rem;line-height:1.4;}
  .vitrine-copy .button{font-size:.82rem;padding:9px 12px;min-height:38px;}
  .vitrine-controls{bottom:9px;}
  .catalog-section{padding:14px;}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .product{padding:8px;border-radius:16px;min-height:230px;}
  .product-art{height:116px;border-radius:12px;margin-bottom:8px;}
  .product-category{font-size:.65rem;letter-spacing:.03em;}
  .product h3{font-size:.85rem;line-height:1.3;}
  .product-content{gap:7px;}
  .product-bottom{gap:5px;}
  .price{font-size:.92rem;gap:3px;}
  .price .hint{font-size:.65rem;}
  .add-symbol{height:30px;width:30px;min-width:30px;border-radius:10px;}
}
@media(max-width:339px){
  .brand-copy span{display:none;}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .product{padding:7px;}
  .product h3{font-size:.77rem;}
  .price{font-size:.84rem;}
  .product-art{height:98px;}
  .vitrine-copy h2{font-size:1.45rem;}
}
@media(prefers-reduced-motion:reduce){.vitrine-slide,.vitrine-dot{transition:none!important}}


/* SIGMA DELIVERY - correcoes responsivas 23/10/2026
   Nao impedir a rolagem VERTICAL: o consumidor precisa percorrer os produtos.
   Remove transbordamento horizontal e barras internas da timeline. */
html, body { max-width:100%; overflow-x: clip; }
.app-shell, .catalog-section, .products, .section-heading, .topbar-inner,
.top-actions, .brand, .brand-copy, .hero, .hero-fallback,
.tracking-dialog, .tracking-timeline, .timeline-scroll, .timeline-pedido {
  min-width:0;
}
.section-heading > *, .product, .product-content, .product-bottom,
.cart-row, .cart-row-head, .cart-bottom, .form-grid, .form-grid > label,
.detail-content, .detail-actions { min-width:0; }
.tracking-dialog { max-width:calc(100vw - 16px); overflow-x:hidden; }
.tracking-timeline { max-width:100%; }
.timeline-scroll { overflow-x:clip; overflow-y:visible; scrollbar-width:none; }
.timeline-scroll::-webkit-scrollbar { display:none; }
.timeline-pedido { width:100%; min-width:0; }
.timeline-etapa { width:20%; flex:1 1 0; min-width:0; }
.timeline-nome, .timeline-hora { overflow-wrap:anywhere; max-width:100%; }
.hero, .vitrine-carousel, .vitrine-slides, .vitrine-slide { max-width:100%; }
input, textarea, select { min-width:0; }
@media(max-width:480px) {
  /* Toda a linha com bolinhas aparece sem deslocamento lateral. */
  .timeline-pedido { min-width:0; }
  .timeline-bolinha { width:30px; height:30px; font-size:12px; border-width:2px; }
  .timeline-pedido::before, .timeline-pedido::after { top:13px; }
  .timeline-etapa { gap:5px; font-size:10px; }
  .timeline-nome { font-size:9px; line-height:1.25; }
  .timeline-hora { font-size:9px; line-height:1.2; }
  .tracking-timeline { padding:12px 8px; }
  .tracking-dialog { box-sizing:border-box; }
  .topbar-inner { min-width:0; }
}
@media(max-width:360px) {
  .tracking-timeline { padding:10px 6px; }
  .timeline-bolinha { width:28px; height:28px; }
  .timeline-pedido::before, .timeline-pedido::after { top:12px; }
}
/* Navegar longos formularios em telas baixas sem exibir barras internas. */
@media(max-width:720px) {
  dialog[open] { overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; }
  dialog[open]::-webkit-scrollbar { display:none; }
  .topbar .brand-copy, .topbar .top-actions { min-width:0; }
}


/* Tarefa 25 - sugestoes complementares no carrinho */
.cart-suggestions{margin:0 22px 4px;padding:14px 15px 16px;border:1px solid var(--brand-300);
  border-radius:20px;background:linear-gradient(135deg,var(--brand-100),#fff)}
.cart-suggestions-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:12px}
.cart-suggestions-head h3{margin:4px 0 0;font-size:1.05rem;letter-spacing:-.02em}
.cart-suggestions-hint{color:var(--brand-800);font-size:.73rem;font-weight:800;white-space:nowrap}
.cart-suggestions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.cart-suggestion{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:9px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px}
.cart-suggestion:hover{border-color:var(--brand-500);background:var(--brand-100)}
.cart-suggestion-art{display:grid;place-items:center;height:64px;overflow:hidden;border-radius:12px;
  background:var(--brand-200);color:var(--brand-800);font-size:1.4rem;font-weight:900}
.cart-suggestion-art img{width:100%;height:100%;object-fit:cover}
.cart-suggestion-info{min-width:0;display:flex;flex:1;flex-direction:column;gap:4px}
.cart-suggestion-info strong{font-size:.84rem;line-height:1.25;overflow-wrap:anywhere}
.cart-suggestion-reason{color:var(--muted);font-size:.68rem;line-height:1.3}
.cart-suggestion-price{color:var(--brand-800);font-size:.84rem;font-weight:900}
.cart-suggestion-action{color:var(--brand-800);font-size:.72rem;font-weight:800}
@media(max-width:480px){
  .cart-suggestions{margin:0 16px 4px;padding:12px}
  .cart-suggestions-grid{grid-template-columns:1fr;gap:7px}
  .cart-suggestion{flex-direction:row;align-items:center;gap:10px}
  .cart-suggestion-art{width:64px;min-width:64px;height:64px}
  .cart-suggestion-action{max-width:70px;text-align:right}
  .cart-suggestion-info{gap:2px}
}

/* Estado explicativo: a secao nao desaparece sem informar o consumidor. */
.cart-suggestions-grid>.cart-suggestions-empty{grid-column:1/-1;margin:0;
  padding:9px 2px;color:var(--muted);font-size:.86rem;line-height:1.45}

/* Tarefa 5, etapa 7: montador visual responsivo sem checkout */
.pizza-dialog{width:min(96vw,1000px);max-width:min(96vw,1000px);position:relative;background:#fff}
.pizza-heading{position:relative;padding-right:66px}
.pizza-heading .close{right:14px;top:14px}
.pizza-heading .muted{font-size:.9rem;margin-top:6px}
.pizza-builder{display:grid;grid-template-columns:minmax(240px,0.85fr) minmax(280px,1.15fr);gap:24px;padding:24px;align-items:start}
.pizza-preview-column{display:grid;gap:14px;position:sticky;top:0;min-width:0}
.pizza-picture{width:min(100%,340px);aspect-ratio:1;margin:auto;border-radius:50%;border:10px solid #cf9453;background:radial-gradient(circle at 50% 50%,#f8d27e 0 57%,#c98645 73%,#f2ba65 85%);box-shadow:0 14px 24px #58350e24,0 0 0 7px #f3f1e9;position:relative;overflow:hidden}
.pizza-parts{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.pizza-wedge{position:absolute;inset:0;background:repeating-radial-gradient(circle,#ffdd8e 0 17px,#dc9943 18px 21px,#eeb970 22px 35px)}
.pizza-wedge-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pizza-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:4rem;background:#f8e5ba80;text-align:center}
.pizza-placeholder small{font-size:.8rem;color:#4c3420;font-weight:800;background:#fffbe9ed;padding:7px 10px;border-radius:99px}
.pizza-selected{color:var(--brand-800);font-weight:800;line-height:1.4;text-align:center;min-height:42px}
.pizza-total{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#f7faf6;font-size:.9rem}
.pizza-total strong{font-size:1.3rem;color:var(--brand-800)}
.pizza-warning{border-left:3px solid #d4a65a;padding:10px 12px;background:#fff9ed;font-size:.85rem;line-height:1.5;margin:0;border-radius:4px 12px 12px 4px}
.pizza-controls{display:grid;gap:16px;min-width:0}
.pizza-choice-section{display:grid;gap:10px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pizza-choice-section h3{font-size:1rem;margin:0}
.pizza-sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pizza-size{display:grid;gap:5px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.pizza-size small,.pizza-option-label small{font-size:.8rem;color:var(--muted)}
.pizza-size.active,.pizza-option.selected{background:#ebf6ef;border-color:var(--brand-700);box-shadow:0 0 0 1px var(--brand-700)}
.pizza-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pizza-count{background:var(--brand-100);border-radius:100px;padding:5px 9px;color:var(--brand-800);font-size:.8rem;font-weight:800}
.pizza-hint{font-size:.83rem;color:var(--muted);margin:0}
.pizza-option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pizza-option{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff;min-width:0}
.pizza-option:disabled{opacity:.48;cursor:not-allowed}
.pizza-option-image{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#f8eed9;overflow:hidden;flex:0 0 auto}
.pizza-option-image img{width:100%;height:100%;object-fit:cover}
.pizza-option-label{display:grid;gap:2px;flex:1;min-width:0;overflow-wrap:anywhere;font-size:.85rem}
.pizza-option-mark{font-size:1rem;font-weight:900;color:var(--brand-700)}
.pizza-status{margin:0;color:var(--brand-800);font-size:.86rem;line-height:1.45}
@media(max-width:760px){.pizza-builder{grid-template-columns:1fr;padding:14px;gap:20px}.pizza-preview-column{position:static}.pizza-picture{width:min(64vw,275px)}.pizza-option-list{grid-template-columns:1fr 1fr}}
@media(max-width:390px){.pizza-sizes,.pizza-option-list{grid-template-columns:1fr}.pizza-picture{width:min(72vw,220px)}}

/* Resumo fixo em telas pequenas: permite acompanhar as fatias sem voltar ao inicio. */
.pizza-mini{display:none}
@media(max-width:760px){
  .pizza-controls{position:relative}
  .pizza-mini{display:flex;position:sticky;top:0;z-index:4;align-items:center;gap:12px;padding:9px 12px;background:#fffffff2;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 20px #163f331a;backdrop-filter:blur(8px)}
  .pizza-mini-picture{width:62px;height:62px;flex:0 0 62px;border-radius:50%;border:4px solid #cf9453;background:#f8d27e;position:relative;overflow:hidden}
  .pizza-mini-picture .pizza-wedge{position:absolute;inset:0}
  .pizza-mini>div:last-child{display:grid;gap:4px;font-size:.86rem}
  .pizza-mini>div:last-child span{color:var(--brand-800);font-weight:900}
}

/* Montagem real em fatias: imagens dos sabores do cadastro (SC_OPCAO.IMAGEM). */
.pizza-parts{isolation:isolate}
.pizza-wedge-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.pizza-wedge.pizza-sem-foto{background:radial-gradient(circle at 30% 30%,#f2c56d,#df9b42 75%,#b97437)}
.pizza-divider{position:absolute;left:calc(50% - 1.5px);top:0;width:3px;height:50%;z-index:3;
  background:linear-gradient(to bottom,#fff9e8 0%,#fff4d2 70%,#fff9e8 100%);
  box-shadow:0 0 0 1px #693d1666;transform-origin:center bottom;pointer-events:none}
.pizza-mini-picture .pizza-divider{width:1.5px;left:calc(50% - .75px);box-shadow:none}
.pizza-price-note{font-size:.75rem;color:var(--muted)}

/* Foto real do produto na janela de observacoes; logomarca apenas como reserva. */
.detail-visual.detail-has-photo{background:#f3f6f2;padding:12px}
.detail-visual > img.detail-product-photo{width:100%;height:100%;max-height:400px;object-fit:contain;filter:none;border-radius:16px}
.detail-visual.detail-has-pizza{background:#f7f1e6;padding:16px}
.detail-visual > .detail-pizza-preview{width:min(100%,300px);min-width:0;max-width:300px;aspect-ratio:1;margin:auto;border-width:8px}
.detail-visual .detail-pizza-preview .pizza-wedge-image{width:100%;height:100%;max-height:none;object-fit:cover;filter:none;border-radius:0}
@media(max-width:860px){
  .detail-visual > img.detail-product-photo{height:min(45vh,290px);max-height:290px}
  .detail-visual > .detail-pizza-preview{width:min(56vw,230px)}
}