:root{
    --bg:#fff; --card:#ffffff; --txt:#111827; --muted:#6b7280; --border:#e5e7eb; --chip:#f3f4f6;
    --ring:#fbbf24; --cta:#fbbf24; --cta-press:#f59e0b;
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;padding-bottom:env(safe-area-inset-bottom, 0px)}
  .app{width:100%;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  @media (min-width:768px){ .app{max-width:420px} }

  header{position:sticky;top:0;background:#fff;z-index:5}
  .top{display:flex;align-items:center;gap:10px;padding:12px 12px 6px;border-bottom:1px solid var(--border)}
  .back{width:36px;height:36px;border:1px solid var(--border);border-radius:999px;background:#fff;display:grid;place-items:center;cursor:pointer;text-decoration:none}
  .title{font-weight:600}

  .container{padding:12px 16px calc(140px + env(safe-area-inset-bottom, 0px))}
  .h1{font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.5px;margin:14px 0 8px}
  .sub{color:var(--muted);margin-top:-6px}

  .group-title{font-size:22px;line-height:1.2;font-weight:800;margin:22px 0 12px;letter-spacing:-.3px}

  .row{display:flex;align-items:center;gap:12px;padding:14px 12px;border-top:1px solid var(--border)}
  .row:first-of-type{border-top:0}
  .row.checkbox{cursor:pointer}
  .thumb{width:52px;height:52px;min-width:52px;flex-shrink:0;border-radius:999px;background:var(--chip);display:grid;place-items:center;overflow:hidden;position:relative}
  .thumb img{width:100%;height:100%;object-fit:contain}
  .ingredient-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f8fafc;color:#94a3b8}
  .ingredient-placeholder svg{width:24px;height:24px}
  .info{flex:1;min-width:0;overflow:hidden}
  .name{font-weight:700;word-wrap:break-word}
  .price{color:#374151;font-size:14px;margin-top:2px}

  .stepper{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;min-width:104px;justify-content:space-between;transition:border-color 0.2s ease, box-shadow 0.2s ease}
  .stepper.limit-hit{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2);animation:shake 0.4s ease}
  @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
  @media(prefers-reduced-motion:reduce){.stepper.limit-hit{animation:none;border-color:#ef4444}}
  .st-btn{width:28px;height:28px;border-radius:999px;background:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000;font-size:18px;font-weight:600}
  .st-val{min-width:16px;text-align:center;font-weight:600}

  /* Pool counter (açaí) */
  .pool-counter{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--muted);margin:-4px 0 8px 2px}
  .pool-counter-current{font-size:20px;font-weight:800;color:var(--txt);transition:color .2s}
  .pool-counter.full .pool-counter-current{color:#16a34a}
  .pool-counter.extras .pool-counter-current{color:#f59e0b}
  .pool-counter-sep{font-size:16px}
  .pool-counter-max{font-size:16px}
  .pool-extras-badge{font-size:12px;color:#f59e0b;font-weight:700;margin-left:4px;display:none}
  .pool-counter.extras .pool-extras-badge{display:inline}
  .pool-item-price{font-size:12px;color:var(--muted);white-space:nowrap}
  .pool-item-price.charged{color:#f59e0b;font-weight:600}
  .pool-item-price.free{color:#16a34a;font-weight:600}

  .radio-wrap{margin-left:auto}
  .radio-btn{width:28px;height:28px;border-radius:999px;border:2px solid var(--ring);display:grid;place-items:center;background:#fff;}
  .radio-btn.sel{background:var(--ring);border-color:var(--ring)}
  .radio-btn svg{width:16px;height:16px;color:#111;display:none}
  .radio-btn.sel svg{display:block}

  /* Novo seletor de quantidade para single choice */
  .quantity-selector {
    width: 38px;
    height: 38px;
    min-width: 30px;
    border-radius: 999px;
    border: 2px solid var(--ring);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(.25,.8,.25,1), border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .quantity-selector:hover { box-shadow: 0 0 0 3px rgba(251,191,36,0.15); }
  .quantity-selector::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ring);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
    z-index: 1;
  }
  .quantity-selector.active { width: 115px; min-width: 115px; border-color: var(--ring); }
  .quantity-selector.active::before { transform: translateX(0); }
  .quantity-selector .qs-dot {
    display: none;
  }
  .quantity-selector.active .qs-dot { display: none; }
  .qs-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
  }
  .quantity-selector.active .qs-controls { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .qs-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qs-btn:active { background: #f3f4f6; }
  .qs-count { color: #ffffff; font-size: 14px; font-weight: 600; min-width: 14px; text-align: center; }

  .checkbox-wrap{margin-left:auto;position:relative;display:flex;align-items:center}
  .check-btn{width:28px;height:28px;border-radius:999px;border:2px solid var(--ring);display:grid;place-items:center;background:#fff;cursor:pointer}
  .check-btn.sel{background:var(--ring);border-color:var(--ring)}
  .check-btn svg{width:16px;height:16px;color:#111;display:none}
  .check-btn.sel svg{display:block}
  .choice-input{position:absolute;opacity:0;pointer-events:none}

  .footer{
    position:fixed;
    left:50%;
    bottom:0;
    z-index:50;
    display:flex;
    height:64px;
    height:calc(64px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border);
    background:#fff;
    width:100%;
    max-width:100%;
    transform:translateX(-50%);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    padding-bottom:constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom:env(safe-area-inset-bottom); /* iOS 11.2+ */
  }
  @media (min-width:768px){ .footer{max-width:420px} }
  .btn-cancel,.btn-confirm{flex:1 1 50%;font-size:17px;font-weight:600;border:none;cursor:pointer}
  .btn-cancel{background:#fff;color:#111}
  .btn-confirm{background:var(--cta);color:#111;transition:background .2s}
  .btn-confirm:active{background:var(--cta-press)}

  .hint{color:#6b7280;font-size:12px;margin:6px 2px 12px;display:none;} /* compat, oculto */

  /* Modal explicativo */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .modal-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  .modal-box {
    background: #fff;
    border-radius: 20px;
    max-width: 320px;
    width: 100%;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
  }
  .modal-overlay.show .modal-box {
    transform: translateY(0) scale(1);
  }
  .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 0;
  }
  .modal-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    flex-shrink: 0;
  }
  .modal-header-icon svg {
    width: 22px;
    height: 22px;
  }
  .modal-header-text h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
  }
  .modal-header-subtitle {
    display: block;
    font-size: 0.8rem;
    color: #777;
    margin-top: 2px;
    line-height: 1.2;
  }
  .modal-body {
    padding: 16px 20px 20px;
  }
  .modal-example-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
  }
  .modal-example-row:not(:last-child) {
    border-bottom: 1px dashed #e2e8f0;
  }
  .modal-example-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .modal-example-icon.included {
    background: #dcfce7;
    color: #16a34a;
  }
  .modal-example-icon.extra {
    background: #fef3c7;
    color: #d97706;
  }
  .modal-example-icon.choice {
    background: #e0e7ff;
    color: #4f46e5;
  }
  .modal-example-icon svg {
    width: 18px;
    height: 18px;
  }
  .modal-example-text {
    flex: 1;
    font-size: 14px;
    color: #334155;
    line-height: 1.4;
  }
  .modal-example-text strong {
    color: #111827;
  }
  .modal-hint {
    font-size: 12px;
    color: #64748b;
  }
  .modal-example-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .modal-example-badge.free {
    background: #dcfce7;
    color: #16a34a;
  }
  .modal-example-badge.paid {
    background: #fef3c7;
    color: #b45309;
  }
  .modal-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--cta);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 16px;
  }
  .modal-btn:active {
    background: var(--cta-press);
  }