:root{
    --cream:#E6E8DB; --paper:#FBFBF6; --navy:#213A5C; --navy-deep:#182B45;
    --terra:#B65A35; --terra-deep:#9d4a2a; --blue:#6E91B3; --gold:#C2A24E;
    --ink:#33352e; --muted:#8a8c7e; --line:#e0e2d4;
    --script:'Great Vibes','Brush Script MT',cursive;
    --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html{-webkit-text-size-adjust:100%;}
  .cha-casa-nova-lista{
    font-family:var(--sans); color:var(--ink); line-height:1.5;
    background:var(--cream); min-height:60vh;
    padding:0 16px env(safe-area-inset-bottom);
    margin:0 -16px;
  }
  .wrap{max-width:660px; margin:0 auto;}

  /* ---------- HEADER ---------- */
  header{text-align:center; padding:clamp(132px,32vw,156px) 8px 8px;}
  .roof{width:120px; height:auto; display:block; margin:0 auto 2px;}
  .eyebrow{
    font-family:var(--sans); font-size:11px; letter-spacing:4px;
    text-transform:uppercase; color:var(--terra); font-weight:600; margin-bottom:2px;
  }
  h1{font-family:var(--script); font-weight:400; color:var(--navy);
     font-size:clamp(46px,13vw,68px); line-height:.9;}
  .couple{font-family:var(--script); font-size:clamp(26px,7vw,34px);
     color:var(--terra); margin-top:2px;}
  .when{font-family:var(--serif); font-size:16px; color:#54564a; margin-top:10px;}
  .when b{color:var(--navy); font-weight:600;}

  /* ---------- INTRO / PROGRESS ---------- */
  .intro{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:18px 18px 16px; margin:22px 0 14px;
    box-shadow:0 1px 0 #e9eadd;
  }
  .intro p{font-family:var(--serif); font-size:16.5px; color:#44463c;}
  .intro p b{color:var(--terra); font-weight:600;}
  .progress-row{display:flex; align-items:center; gap:12px; margin-top:14px;}
  .bar{flex:1; height:8px; border-radius:99px; background:#e7e8dc; overflow:hidden;}
  .bar>i{display:block; height:100%; width:0;
    background:linear-gradient(90deg,var(--blue),var(--navy));
    transition:width .5s ease;}
  .count{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--navy);
    white-space:nowrap; letter-spacing:.3px;}

  .toolbar{display:flex; justify-content:space-between; align-items:center;
    margin:4px 2px 12px; gap:10px;}
  .toolbar .status{font-family:var(--sans); font-size:11.5px; color:var(--muted);
    letter-spacing:.3px;}
  .refresh{
    font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:1px;
    text-transform:uppercase; color:var(--navy); background:none; border:none;
    cursor:pointer; padding:6px 4px; display:inline-flex; align-items:center; gap:6px;
  }
  .refresh svg{width:13px; height:13px; transition:transform .6s ease;}
  .refresh.spin svg{transform:rotate(360deg);}

  /* ---------- CARDS ---------- */
  .list{display:flex; flex-direction:column; gap:12px;}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:16px 16px 14px; box-shadow:0 1px 0 #e9eadd;
    display:flex; gap:14px; align-items:flex-start;
    animation:rise .45s ease both;
  }
  @keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  .card.leaving{animation:leave .45s ease forwards;}
  @keyframes leave{to{opacity:0; transform:translateY(-6px) scale(.98); margin-bottom:-66px; max-height:0;}}
  .num{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    background:var(--navy); color:#fff; font-family:var(--serif); font-weight:600;
    font-size:17px; display:flex; align-items:center; justify-content:center;
    letter-spacing:.5px;
  }
  .content{flex:1 1 auto; min-width:0;}
  .title{font-family:var(--serif); font-size:18px; line-height:1.28; color:#2f312a;}
  .title b{color:var(--terra); font-weight:600;}
  .qty{display:inline-block; margin-top:8px;
    font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--navy); background:#e7ecf2;
    border-radius:99px; padding:4px 10px;}
  .actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px;}
  .btn{
    font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.6px;
    border-radius:99px; padding:9px 15px; cursor:pointer; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    transition:transform .08s ease, background .15s ease, color .15s ease;
  }
  .btn:active{transform:scale(.96);}
  .btn-primary{background:var(--terra); color:#fff;}
  .btn-primary:hover{background:var(--terra-deep);}
  .btn-ghost{background:transparent; color:var(--navy); border-color:#cdd6df;}
  .btn-ghost:hover{background:#eef2f6;}
  .btn-disabled{background:#d8dacf; color:#7a7c70; cursor:not-allowed; border-color:#d8dacf;}
  .btn-disabled:active{transform:none;}

  /* inactive / reserved cards */
  .card.inactive{background:#f2f3ea; border-color:#e3e4d7; opacity:.92;}
  .card.inactive.pending{opacity:1; border-color:#cdd6df;}
  .num-inactive{background:#cfd2c4; color:#6c6e60;}
  .title-inactive{color:#70726a;
    text-decoration:line-through; text-decoration-color:#c3c5b6;}
  .qty-inactive{background:#e8e9e0; color:#8a8c7e;}
  .badge-reserved{display:inline-block; margin-top:8px;
    font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.8px;
    text-transform:uppercase; color:var(--terra); background:#f8ebe4;
    border-radius:99px; padding:5px 11px;}
  .badge-pending{color:var(--navy); background:#e7ecf2; animation:pulse 1.2s ease infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.65;}}
  .release-inline{font-family:var(--sans); font-size:10.5px; font-weight:600;
    color:var(--muted); background:none; border:none; cursor:pointer;
    padding:9px 6px; text-decoration:underline;}

  /* inline reserve form */
  .reserve{margin-top:13px; display:none;}
  .reserve.open{display:block; animation:rise .3s ease both;}
  .reserve label{font-family:var(--sans); font-size:11px; letter-spacing:.6px;
    color:var(--muted); display:block; margin-bottom:6px;}
  .reserve .field{display:flex; gap:8px; flex-wrap:wrap;}
  .reserve input{
    flex:1 1 150px; font-family:var(--serif); font-size:16px; color:var(--ink);
    background:#fff; border:1px solid #cdd6df; border-radius:10px; padding:10px 12px;
    outline:none; min-width:0;
  }
  .reserve input:focus{border-color:var(--navy); box-shadow:0 0 0 3px rgba(33,58,92,.12);}

  /* ---------- RESERVED SECTION ---------- */
  .taken-wrap{margin:26px 0 10px;}
  .taken-head{
    width:100%; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 4px; font-family:var(--sans); color:var(--muted);
    font-size:11.5px; letter-spacing:2px; text-transform:uppercase; font-weight:600;
  }
  .taken-head .chev{transition:transform .25s ease;}
  .taken-head.open .chev{transform:rotate(180deg);}
  .taken-list{display:none; flex-direction:column; gap:9px; padding-top:4px;}
  .taken-list.open{display:flex;}
  .taken{
    background:#f2f3ea; border:1px solid #e3e4d7; border-radius:13px;
    padding:12px 14px; display:flex; gap:12px; align-items:center;
  }
  .taken .tnum{flex:0 0 auto; width:30px; height:30px; border-radius:50%;
    background:#cfd2c4; color:#6c6e60; font-family:var(--serif); font-weight:600;
    font-size:14px; display:flex; align-items:center; justify-content:center;}
  .taken .tbody{flex:1; min-width:0;}
  .taken .tt{font-family:var(--serif); font-size:15px; color:#70726a;
    text-decoration:line-through; text-decoration-color:#c3c5b6; line-height:1.25;}
  .taken .who{font-family:var(--sans); font-size:11px; color:var(--terra);
    margin-top:3px; letter-spacing:.3px;}
  .release{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.5px;
    color:var(--muted); background:none; border:none; cursor:pointer; padding:6px;
    text-decoration:underline; white-space:nowrap;}

  /* ---------- STATES ---------- */
  .empty,.loading,.nostore{
    text-align:center; font-family:var(--serif); color:#5a5c50;
    padding:30px 14px; font-size:17px;
  }
  .nostore{background:#fff6ef; border:1px solid #f0d9c7; border-radius:14px;
    color:#8a4a2a; font-size:14px; line-height:1.55; margin:14px 0;}
  .alldone{text-align:center; padding:24px 10px 6px;}
  .alldone .script{font-family:var(--script); font-size:40px; color:var(--terra);}
  .alldone p{font-family:var(--serif); font-size:16px; color:#54564a; margin-top:4px;}

  /* ---------- TOAST ---------- */
  .cha-casa-nova-toast{
    position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px);
    background:var(--navy-deep); color:#fff; font-family:var(--sans); font-size:13px;
    padding:12px 18px; border-radius:99px; box-shadow:0 8px 24px rgba(24,43,69,.3);
    opacity:0; pointer-events:none; transition:.3s ease; z-index:99999; max-width:90vw;
    text-align:center;
  }
  .cha-casa-nova-toast.show{opacity:1; transform:translate(-50%,0);}

  footer{text-align:center; padding:30px 10px 40px;}
  footer .script{font-family:var(--script); font-size:30px; color:var(--navy);}
  footer p{font-family:var(--serif); font-size:14px; color:#6a6c5e; margin-top:2px;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important;}
  }
  :focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:6px;}

  /* ---- FLORES (arte do convite) ---- */
  .wrap{position:relative;}
  .flowers{position:absolute; z-index:0; pointer-events:none; user-select:none; -webkit-user-drag:none;}
  .flowers-tl{top:-16px; left:-42px; width:min(42%,196px);
    -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 86%);
    mask-image:linear-gradient(to bottom,#000 50%,transparent 86%);}
  .flowers-br{right:-26px; bottom:-2px; width:min(26%,138px); transform:rotate(180deg); opacity:.8;
    -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 88%);
    mask-image:linear-gradient(to bottom,#000 50%,transparent 88%);}
  header, .intro, .toolbar, #listArea, #allDone, .taken-wrap, #storeWarn, footer{position:relative; z-index:1;}
  header h1, header .eyebrow, header .couple, header .when{
    text-shadow:0 0 9px var(--cream),0 0 16px var(--cream),0 1px 2px var(--cream);}

  /* ---- CARRINHO / MODAL ---- */
  .cha-cart-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:99990;
    background:rgba(251,251,246,.96); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(24,43,69,.12); transform:translateY(110%);
    transition:transform .3s ease; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .cha-cart-bar.visible{transform:translateY(0);}
  .cha-cart-inner{max-width:660px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .cha-cart-summary{font-family:var(--sans);font-size:13px;color:var(--navy);min-width:120px}
  .cha-cart-summary strong{font-size:20px;margin-right:4px}
  .cha-cart-items{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
  .cha-cart-item{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 8px 4px 12px;font-size:12px;display:flex;gap:6px;align-items:center;max-width:100%}
  .cha-cart-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
  .cha-cart-remove{background:none;border:none;color:var(--terra);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
  .cha-cart-finalize{margin-left:auto}
  .cha-honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}
  body.cha-modal-open{overflow:hidden}
  .cha-modal{position:fixed;inset:0;background:rgba(24,43,69,.45);display:none;align-items:flex-end;justify-content:center;z-index:99995;padding:16px}
  .cha-modal.open{display:flex}
  .cha-modal-dialog{background:var(--paper);width:100%;max-width:520px;border-radius:18px 18px 12px 12px;padding:22px 18px 18px;max-height:90vh;overflow:auto;position:relative}
  .cha-modal-close{position:absolute;top:10px;right:12px;border:none;background:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
  .cha-modal h2{font-family:var(--serif);color:var(--navy);font-size:24px;margin-bottom:8px}
  .cha-checkout-form label{display:block;font-family:var(--sans);font-size:13px;margin:12px 0;color:#44463c}
  .cha-checkout-form input[type=text],.cha-checkout-form input[type=tel],.cha-checkout-form textarea{
    width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
  .cha-check{display:flex!important;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45}
  .cha-check input{margin-top:3px;flex:0 0 auto}
  .cha-success-screen{position:fixed;inset:0;background:rgba(230,232,219,.92);display:none;align-items:center;justify-content:center;z-index:99996;padding:20px}
  .cha-success-screen.open{display:flex}
  .cha-success-box{background:var(--paper);border-radius:18px;padding:24px;max-width:520px;width:100%;text-align:center;box-shadow:0 10px 30px rgba(24,43,69,.12)}
  .cha-success-item{text-align:left;border-top:1px solid var(--line);padding:12px 0}
  .cha-success-item .title{font-family:var(--serif);font-size:17px;margin-bottom:6px}
  @media (min-width:720px){
    .cha-modal{align-items:center}
    .cha-modal-dialog{border-radius:18px}
  }