/* ── FONTES (locais, subconjunto latin; arquivos variáveis) ── */
    @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/opensans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    /* ── RESET & BASE ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --azul:    #1A3B8B;
      --azul-escuro: #122970;
      --verde:   #00843D;
      --verde-escuro: #006630;
      --amarelo: #FEE600;
      --cinza-bg: #F4F6FA;
      --cinza-borda: #DDE3EE;
      --texto:   #1C2340;
      --subtexto:#5A6480;
      --branco:  #FFFFFF;
      --sombra:  0 2px 12px rgba(26,59,139,.10);
      --sombra-hover: 0 8px 32px rgba(26,59,139,.18);
      --radius:  12px;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Open Sans', sans-serif;
      background: var(--cinza-bg);
      color: var(--texto);
      min-height: 100vh;
    }
    h1,h2,h3,h4,h5 { font-family: 'Montserrat', sans-serif; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: inherit; border: none; }

    /* ── FOCO VISÍVEL (teclado) ── azul sobre fundo claro, amarelo sobre fundo azul/escuro ── */
    :focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
    #header :focus-visible,
    .drawer-header :focus-visible,
    footer :focus-visible,
    .slide:not(.slide-novidades) :focus-visible { outline-color: var(--amarelo); }
    .slide-arrow:focus-visible, .slide-pause:focus-visible, .dot:focus-visible {
      outline: 3px solid var(--amarelo); outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--azul-escuro); /* preenche o vão: o anel aparece em qualquer slide */
    }
    [tabindex="-1"]:focus { outline: none; }

    /* ── HEADER ── */
    #header {
      position: sticky; top: 0; z-index: 100;
      background: var(--azul);
      box-shadow: 0 2px 16px rgba(26,59,139,.25);
    }
    .logo-header { height: 45px; width: auto; }
    .lista-badge.is-hidden, .drawer-footer.is-hidden { display: none; }
    .header-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px;
    }
    .logo-wrap {
      display: flex; align-items: center; gap: 10px;
      flex-shrink: 0;
      text-decoration: none;
    }
    .header-hours {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      padding-right: 15px;
      border-right: 1px solid rgba(255,255,255,0.2);
      margin-right: 10px;
    }
    .header-hours .title {
      font-size: 14px;
      font-weight: 800;
      color: var(--amarelo);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .header-hours .time {
      font-size: 12px;
      color: #fff;
      font-weight: 500;
      white-space: nowrap;
    }

    .search-wrap {
      flex: 1; max-width: 520px; margin: 0 auto;
      position: relative;
    }
    .search-wrap input {
      width: 100%; padding: 10px 16px 10px 40px;
      border-radius: 24px;
      border: 2px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: 14px;
      font-family: 'Open Sans', sans-serif;
      transition: border .2s, background .2s;
    }
    .search-wrap input::placeholder { color: rgba(255,255,255,.55); }
    .search-wrap input:focus { border-color: var(--amarelo); background: rgba(255,255,255,.18); }
    .search-wrap .search-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: rgba(255,255,255,.6); pointer-events: none;
    }

    .search-wrap input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
    .search-wrap input { padding-right: 40px; }
    .search-clear {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(255,255,255,.2); color: #fff;
      font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
    }
    .search-clear:hover { background: rgba(255,255,255,.35); }
    .search-clear[hidden] { display: none; }

    .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .lista-btn {
      position: relative;
      background: rgba(255,255,255,.12);
      border-radius: 8px; padding: 8px 14px;
      color: #fff; font-size: 13px; font-weight: 600;
      display: flex; align-items: center; gap: 6px;
      transition: background .2s;
    }
    .lista-btn:hover { background: rgba(255,255,255,.2); }
    .lista-badge {
      position: absolute; top: -6px; right: -6px;
      background: var(--amarelo); color: var(--azul);
      font-size: 11px; font-weight: 800;
      width: 20px; height: 20px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Montserrat', sans-serif;
    }
    .btn-contato {
      background: var(--verde); color: #fff;
      border-radius: 8px; padding: 8px 16px;
      font-size: 13px; font-weight: 700;
      display: flex; align-items: center; gap: 6px;
      transition: background .2s, transform .15s;
    }
    .btn-contato:hover { background: var(--verde-escuro); transform: translateY(-1px); }

    /* ── HERO SLIDER ── */
    #hero { position: relative; overflow: hidden; }
    .slides { touch-action: pan-y; display: flex; transition: transform .55s cubic-bezier(.77,0,.18,1); }
    .slide {
      min-width: 100%; height: 420px;
      position: relative; overflow: hidden;
      display: flex; align-items: center;
    }
    .slide-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
    }
    .slide-bg-1 {
      background-color: #fde809; background-image: url('imagens/Carrossel1.png');
      background-size: contain; background-repeat: no-repeat; background-position: 100% center;
    }
    .slide-bg-2 {
      background: url('imagens/Carrossel2.png') 100% center / auto 100% no-repeat, linear-gradient(90deg, #0d438a 50%, #018755 50%);
    }
    .slide-bg-3 {
      background-color: #01479f; background-image: url('imagens/Carrossel3.png?v=2');
      background-size: auto 130%; background-repeat: no-repeat; background-position: 100% 70%;
    }
    .slide-novidades .slide-tag { color: #1A3B8B; border: 1px solid #1A3B8B; }
    .slide-novidades .slide-content h2 { color: #1A3B8B; }
    .slide-novidades .slide-content p { color: #122970; }
    .slide-novidades .slide-cta { background: #1A3B8B; }
    .slide-content {
      position: relative; z-index: 2;
      max-width: 1280px; margin: 0 auto; padding: 0 40px;
      width: 100%;
    }
    .slide-tag {
      display: inline-block;
      background: var(--amarelo); color: var(--azul);
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 4px 12px; border-radius: 4px; margin-bottom: 12px;
    }
    .slide-content h2 {
      font-size: clamp(24px, 4vw, 42px); color: #fff; font-weight: 800;
      line-height: 1.15; max-width: 500px; margin-bottom: 10px;
    }
    .slide-content p {
      color: rgba(255,255,255,.85); font-size: 15px; max-width: 400px; margin-bottom: 20px;
    }
    .slide-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--verde); color: #fff;
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
      padding: 12px 24px; border-radius: 8px;
      transition: background .2s, transform .15s;
    }
    .slide-cta:hover { background: var(--verde-escuro); transform: translateY(-2px); }

    .slide-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
      border-radius: 50%; width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 18px; z-index: 10;
      transition: background .2s;
      border: 1.5px solid rgba(255,255,255,.3);
    }
    .slide-arrow:hover { background: rgba(255,255,255,.32); }
    .slide-arrow.prev { left: 16px; }
    .slide-arrow.next { right: 16px; }

    /* Os pontos ficam centralizados; o botão de pausa se ancora à esquerda deles */
    .slide-controls {
      position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; z-index: 10;
    }
    .slide-pause {
      position: absolute; right: 100%; margin-right: 12px;
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
      border: 1.5px solid rgba(255,255,255,.3); color: #fff;
      transition: background .2s;
    }
    .slide-pause:hover { background: rgba(255,255,255,.32); }
    .slide-pause[aria-pressed="true"] .icon-pause,
    .slide-pause[aria-pressed="false"] .icon-play { display: none; }
    .slide-dots { display: flex; gap: 8px; }
    .dot {
      width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
      background: rgba(255,255,255,.4); transition: background .2s, width .2s;
      cursor: pointer;
    }
    .dot.active {
      background: var(--branco); width: 24px; border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(18,41,112,.35); /* contorno sutil para aparecer também no slide amarelo */
    }

    /* ── CATEGORY PILLS ── */
    #categorias {
      background: var(--branco);
      border-bottom: 1px solid var(--cinza-borda);
    }
    .cat-inner {
      max-width: 1280px; margin: 0 auto;
      padding: 14px 20px;
      display: flex; align-items: center; gap: 10px;
      overflow-x: auto; scrollbar-width: none;
    }
    .cat-inner::-webkit-scrollbar { display: none; }
    .cat-pill {
      flex-shrink: 0;
      padding: 7px 18px; border-radius: 20px;
      font-size: 13px; font-weight: 600; font-family: 'Montserrat', sans-serif;
      border: 2px solid var(--cinza-borda);
      background: var(--branco); color: var(--subtexto);
      transition: all .2s;
    }
    .cat-pill:hover, .cat-pill.active {
      background: var(--azul); color: #fff; border-color: var(--azul);
    }

    /* ── CATALOG ── */
    #catalogo {
      scroll-margin-top: var(--header-h, 70px);
      max-width: 1280px; margin: 0 auto;
      padding: 40px 20px;
    }
    .section-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 28px; gap: 12px; flex-wrap: wrap;
    }
    .section-title {
      font-size: clamp(20px, 2.5vw, 26px);
      font-weight: 800; color: var(--azul);
      display: flex; align-items: center; gap: 10px;
    }
    .section-title::before {
      content: '';
      display: block; width: 5px; height: 26px;
      background: linear-gradient(to bottom, var(--azul), var(--verde));
      border-radius: 3px;
    }
    .results-count { font-size: 13px; color: var(--subtexto); }

    .sr-only {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }
    .load-more-wrap { text-align: center; margin-top: 32px; }
    .load-more-wrap[hidden] { display: none; }
    .btn-load-more {
      padding: 12px 32px; border-radius: 24px;
      border: 2px solid var(--azul); background: var(--branco); color: var(--azul);
      font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif;
      transition: all .2s;
    }
    .btn-load-more:hover { background: var(--azul); color: #fff; }

    .retirada-aviso {
      margin-left: auto;
      font-size: 13px;
      background: #C0392B; color: #fff;
      font-weight: 800;
      margin-top: 4px;
      padding: 3px 9px; border-radius: 4px;
      font-style: normal;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }

    /* ── PRODUCT CARD ── */
    .card {
      background: var(--branco);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--sombra);
      border: 1px solid var(--cinza-borda);
      display: flex; flex-direction: column;
      transition: transform .22s, box-shadow .22s;
      position: relative;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }

    .card-img-wrap {
      position: relative; overflow: hidden;
      background: #EEF2FB;
      aspect-ratio: 4/3;
    }
    .card-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .4s;
    }
    .card:hover .card-img-wrap img { transform: scale(1.04); }
    .card-img-placeholder {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: #EEF2FB; color: var(--azul);
    }
    .card-img-placeholder svg { width: 38%; max-width: 96px; opacity: .45; }

    .tag-restrita {
      position: absolute; top: 10px; left: 10px;
      background: #C0392B; color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 10px; font-weight: 700; letter-spacing: .8px;
      padding: 3px 9px; border-radius: 4px;
      text-transform: uppercase;
    }
    .tag-indisponivel {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(26,59,139,.08);
      display: flex; align-items: center; justify-content: center;
    }
    .tag-indisponivel span {
      background: rgba(26,59,139,.85); color: #fff;
      font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
      padding: 5px 14px; border-radius: 20px;
      letter-spacing: .5px; text-align: center; max-width: 90%;
    }

    .card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }

    .card-cat {
      font-size: 11px; font-weight: 600; color: var(--verde);
      text-transform: uppercase; letter-spacing: 1px;
    }
    .card-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 700; color: var(--texto);
      line-height: 1.35;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
    }
    .card-desc {
      font-size: 12px; color: var(--subtexto); line-height: 1.5;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      flex: 1;
    }
    .card-footer { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
    .modal-box .pd-restrita {
      font-size: 13px; font-weight: 600; color: #8A2B20;
      background: #FDECEA; border-radius: 8px; padding: 10px 12px; margin: 0 0 16px;
    }
    .lista-vazia h3 { color: var(--azul); font-size: 16px; }
    .lista-vazia p { font-size: 13px; }
    body.sem-rolagem { overflow: hidden; }
    .card-variacoes { font-size: 12px; color: var(--subtexto); font-weight: 500; }
    .lista-item-opcao { font-size: 12px; color: var(--subtexto); margin-top: 2px; }
    .btn-adicionar {
      width: 100%;
      background: var(--azul); color: #fff;
      font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700;
      padding: 11px 16px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: background .2s, transform .15s;
    }
    .btn-adicionar:hover { background: var(--verde); transform: translateY(-1px); }
    .btn-adicionar:active { transform: translateY(0); }

    /* ── EMPTY STATE ── */
    .empty-state {
      grid-column: 1 / -1;
      text-align: center; padding: 60px 20px;
      color: var(--subtexto);
    }
    .empty-state .icon { font-size: 48px; margin-bottom: 12px; }
    .empty-state h3 { font-size: 18px; color: var(--azul); margin-bottom: 6px; }

    /* ── PAINEL MINHA LISTA ── */
    .overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 200; opacity: 0; pointer-events: none;
      transition: opacity .3s;
    }
    .overlay.open { opacity: 1; pointer-events: all; }

    #lista-painel {
      position: fixed; right: 0; top: 0; bottom: 0;
      width: min(420px, 100vw);
      background: var(--branco);
      z-index: 201;
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.77,0,.18,1);
      display: flex; flex-direction: column;
      box-shadow: -8px 0 32px rgba(0,0,0,.15);
    }
    #lista-painel.open { transform: translateX(0); }

    .drawer-header {
      background: var(--azul); color: #fff;
      padding: 18px 20px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .drawer-header h3 {
      font-size: 16px; font-weight: 800;
      display: flex; align-items: center; gap: 8px;
    }
    .drawer-close {
      background: rgba(255,255,255,.15); border-radius: 50%;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 18px;
      transition: background .2s;
    }
    .drawer-close:hover { background: rgba(255,255,255,.25); }

    .drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
    .lista-vazia {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; gap: 10px; color: var(--subtexto); text-align: center;
    }
    .lista-vazia .icon { font-size: 56px; }

    .lista-item {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 0; border-bottom: 1px solid var(--cinza-borda);
    }
    .lista-item.no-image { padding-left: 0; }
    .lista-item.no-image .lista-item-info { width: 100%; }
    .lista-item-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
    .lista-item.no-image .lista-item-img { display: none; }
    .lista-item-placeholder { position: relative; background: #F1F4F9; color: var(--azul); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .lista-item-placeholder .card-img-placeholder { width: 100%; height: 100%; }
    .lista-item-info { flex: 1; }
    .lista-item-name { font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.3; }
    .lista-item-remove {
      background: none; color: #C0392B; font-size: 18px;
      padding: 2px 6px; border-radius: 4px; transition: background .2s;
    }
    .lista-item-remove:hover { background: #FDECEA; }

    .qty-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .qty-btn {
      background: var(--cinza-bg); border-radius: 50%;
      width: 26px; height: 26px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 700; color: var(--azul);
      border: 1px solid var(--cinza-borda); transition: background .2s;
    }
    .qty-btn:hover { background: var(--cinza-borda); }
    .qty-num { font-size: 14px; font-weight: 700; color: var(--texto); min-width: 20px; text-align: center; }

    .drawer-footer { padding: 16px; border-top: 1px solid var(--cinza-borda); }
    .btn-finalizar {
      width: 100%;
      background: var(--verde); color: #fff;
      font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800;
      padding: 14px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: background .2s, transform .15s;
    }
    .btn-finalizar:hover { background: var(--verde-escuro); transform: translateY(-1px); }

    /* ── FOOTER ── */
    footer {
      background: var(--azul-escuro); color: rgba(255,255,255,.75);
      padding: 40px 20px 24px;
      margin-top: 60px;
    }
    .footer-inner {
      max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: 2fr 1fr 1fr;
      gap: 32px;
    }
    footer p, footer li { font-size: 13px; line-height: 1.8; }
    footer ul { list-style: none; }
    footer ul a:hover { color: var(--amarelo); }
    .footer-logo { margin-bottom: 12px; }
    .footer-logo img { height: 50px; width: auto; border-radius: 4px; object-fit: contain; }
    .footer-address { font-style: normal; font-size: 13px; line-height: 1.8; margin-top: 10px; }
    footer p + p { margin-top: 10px; }
    footer a:hover { color: var(--amarelo); }
    footer .footer-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 13px; font-weight: 700; color: #fff;
      margin-bottom: 12px; letter-spacing: .5px;
    }
    .footer-bottom {
      max-width: 1280px; margin: 28px auto 0;
      padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      font-size: 12px; color: rgba(255,255,255,.45);
    }

    .footer-bottom a { color: inherit; text-decoration: underline; }
    .footer-bottom a:hover { color: var(--amarelo); }

    /* ── TOAST ── */
    #toast-container {
      position: fixed; bottom: 100px; right: 24px;
      z-index: 300; display: flex; flex-direction: column; gap: 10px;
      align-items: flex-end;
    }
    #lista-painel [hidden] { display: none !important; }
    .lista-total { font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 10px; }
    .lista-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
    .lista-campo label { display: block; font-size: 13px; font-weight: 700; color: var(--azul); margin-bottom: 4px; }
    .lista-obrigatorio { font-weight: 500; color: var(--subtexto); font-size: 12px; }
    .lista-campo input, .lista-campo textarea {
      width: 100%; border: 1px solid var(--cinza-borda); border-radius: 8px;
      padding: 9px 12px; font: inherit; font-size: 14px; color: var(--texto); background: var(--branco);
    }
    .lista-campo textarea { resize: vertical; }
    .lista-campo input[aria-invalid="true"] { border-color: #C0392B; }
    .lista-erro { color: #C0392B; font-size: 12px; font-weight: 600; margin-top: 4px; }
    .lista-esvaziar { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 10px; }
    .btn-esvaziar { display: inline-flex; align-items: center; gap: 6px; background: none; color: #C0392B; font-size: 13px; font-weight: 600; padding: 4px 0; }
    .btn-esvaziar:hover { text-decoration: underline; }
    .lista-esvaziar .lista-confirma { align-self: stretch; }
    .lista-confirma { background: #FDECEA; border-radius: 8px; padding: 10px 12px; }
    .lista-confirma p { font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 8px; }
    .lista-confirma-botoes { display: flex; gap: 8px; }
    .btn-esvaziar-sim, .btn-esvaziar-nao { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; }
    .btn-esvaziar-sim { background: #C0392B; color: #fff; }
    .btn-esvaziar-nao { background: var(--branco); color: var(--texto); border: 1px solid var(--cinza-borda); }
    .lista-limite { background: #FFF6DB; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 12px; color: var(--texto); }
    .lista-partes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .lista-partes .btn-finalizar { font-size: 13px; padding: 11px; }
    .lista-aviso { font-size: 11px; color: var(--subtexto); margin-top: 8px; text-align: center; }
    .overlay-modal { z-index: 399; }
    .toast {
      background: var(--azul); color: #fff;
      font-size: 13px; font-weight: 600;
      padding: 12px 18px; border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,.2);
      display: flex; align-items: center; gap: 8px;
      transform: translateX(120%); opacity: 0;
      transition: transform .3s, opacity .3s;
      max-width: 280px;
    }
    .toast.show { transform: translateX(0); opacity: 1; }
    .toast.green { background: var(--verde); }

    /* ── MODAIS ── */
    .modal-box {
      background: var(--branco); border-radius: 16px;
      padding: 28px; width: 100%; max-width: 400px;
      box-shadow: 0 16px 48px rgba(0,0,0,.2);
      transform: scale(.92); transition: transform .25s;
    }
    .modal-box h3 { font-size: 17px; color: var(--azul); margin-bottom: 6px; }
    .modal-box p { font-size: 13px; color: var(--subtexto); margin-bottom: 16px; line-height: 1.6; }
    .btn-modal-ok {
      flex: 2; padding: 10px; border-radius: 8px;
      background: var(--verde); color: #fff;
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
      transition: background .2s;
    }
    .btn-modal-ok:hover { background: var(--verde-escuro); }

    /* ── MODAL DE DETALHES DO PRODUTO ── */
    #modal-produto {
      position: fixed; inset: 0; z-index: 400;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      pointer-events: none; opacity: 0; transition: opacity .25s;
    }
    #modal-produto.open { opacity: 1; pointer-events: all; }
    #modal-produto .modal-box { transform: scale(.92); transition: transform .25s; }
    #modal-produto.open .modal-box { transform: scale(1); }
    .pd-box {
      position: relative; max-width: 520px; padding: 0;
      max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    }
    .pd-close {
      position: absolute; top: 10px; right: 10px; z-index: 2;
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.92); color: var(--texto);
      font-size: 15px; box-shadow: var(--sombra);
    }
    .pd-img {
      position: relative; overflow: hidden; aspect-ratio: 4/3;
      background: #EEF2FB; border-radius: 16px 16px 0 0;
    }
    .pd-img img { width: 100%; height: 100%; object-fit: cover; }
    .pd-body { padding: 20px 24px 8px; }
    .pd-cat {
      font-size: 11px; font-weight: 600; color: var(--verde);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
    }
    .modal-box .pd-nome {
      font-family: 'Montserrat', sans-serif;
      font-size: 20px; font-weight: 800; color: var(--texto);
      line-height: 1.3; margin-bottom: 8px;
    }
    .modal-box .pd-desc {
      white-space: pre-line; overflow-wrap: anywhere;
      font-size: 14px; color: var(--subtexto); line-height: 1.6;
      margin: 12px 0 16px;
    }
    .pd-actions {
      position: sticky; bottom: 0;
      display: flex; flex-direction: column; gap: 8px;
      padding: 12px 24px 20px; background: var(--branco);
      border-radius: 0 0 16px 16px;
    }
    .pd-actions .btn-modal-ok, .pd-actions .btn-modal-wa { flex: none; padding: 12px; }
    .pd-actions .btn-modal-ok:disabled { opacity: .5; cursor: not-allowed; }
    .btn-modal-wa {
      border-radius: 8px; background: var(--branco); color: var(--verde);
      border: 2px solid var(--verde);
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
      transition: background .2s;
    }
    .btn-modal-wa:hover { background: #EAF6EF; }
    .card-img-wrap[data-acao], .card-name[data-acao], .card-desc[data-acao] { cursor: pointer; }
    .card-name[data-acao]:hover { color: var(--azul); }

    .variacoes-list {
      display: flex; flex-direction: column; gap: 8px;
      margin: 10px 0 12px;
    }
    .variacao-option {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px;
      border: 2px solid var(--cinza-borda);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .18s, background .18s;
      background: var(--cinza-bg);
    }
    .variacao-option:hover { border-color: var(--azul); background: #EEF2FB; }
    .variacao-option.selected {
      border-color: var(--azul);
      background: #EEF2FB;
    }
    .variacao-option input[type="radio"] { accent-color: var(--azul); width: 16px; height: 16px; flex-shrink: 0; }
    .variacao-label {
      flex: 1;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700; font-size: 14px; color: var(--texto);
    }
    .modal-var-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
    .modal-var-title { display: block; padding: 0;
      font-size: 12px; font-weight: 700; color: var(--subtexto);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px;
    }
    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      /* Cabeçalho em duas linhas: logo + ações em cima, busca embaixo */
      .header-inner { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
      .header-hours { display: none; } /* horário continua no rodapé */
      #header .logo-header { height: 38px; }
      .header-actions { margin-left: auto; }
      .search-wrap { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
      .btn-contato { padding: 8px 12px; }
      .btn-contato span { display: none; }
      /* Hero no celular: mesma composição do desktop (referência 1440px), reduzida proporcionalmente à largura da tela */
      .slide { height: 29.2vw; }
      .slide-content { padding: 0 0 0 8.33vw; }
      .slide-tag { font-size: 7px; letter-spacing: .8px; padding: 2px 7px; margin-bottom: 4px; border-radius: 3px; }
      .slide-content h2 { font-size: max(11px, 2.92vw); max-width: 34.7vw; margin-bottom: 4px; }
      .slide-content p { display: none; }
      .slide-cta { font-size: 8px; gap: 4px; padding: 5px 10px; border-radius: 5px; }
      .slide-cta svg { width: 8px; height: 8px; }
      /* Setas e pontos menores, no rodapé do slide */
      .slide-arrow { width: 22px; height: 22px; top: auto; bottom: 4px; transform: none; }
      .slide-arrow.prev { left: 8px; }
      .slide-arrow.next { right: 8px; }
      .slide-arrow svg { width: 12px; height: 12px; }
      .slide-controls { bottom: 4px; }
      .slide-pause { width: 22px; height: 22px; margin-right: 8px; }
      .slide-pause svg { width: 9px; height: 9px; }
      .footer-inner { grid-template-columns: 1fr; }
      #footer-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
    }
    @media (max-width: 480px) {
      .lista-btn span { display: none; }
      .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .card-name { font-size: 12px; }
      #lista-painel { width: 100vw; }
      #modal-produto { padding: 0; }
      .pd-box { max-width: none; height: 100%; border-radius: 0; }
      .pd-img { border-radius: 0; }
      .pd-actions { border-radius: 0; }
    }
    @media (max-width: 360px) {
      .products-grid { grid-template-columns: 1fr; }
    }
    /* ── MOVIMENTO REDUZIDO ── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .slides { transition: none; }
    }