:root{
    --green:#3c8c3c;
    --green-dark:#256b25;
    --green-darker:#173f17;
    --heading:var(--green-darker);
    --white:#ffffff;
    --surface:#FFFCF5;
    --header-bg:rgba(250,246,239,0.88);
    --hover-tint:#e2f0e2;
    --paper:#FAF6EF;
    --mist:#EEF6EE;
    --ink:#211C15;
    --muted:#736C5C;
    --gold:#C9A227;
    --shadow-sm:0 2px 8px rgba(40,30,18,0.08);
    --shadow-md:0 10px 28px rgba(40,30,18,0.10);
    --shadow-lg:0 20px 45px rgba(40,30,18,0.16);
    --ease:cubic-bezier(0.22, 1, 0.36, 1);
  }
  :root[data-theme="dark"]{
    --green:#4caf50;
    --green-dark:#3c8c3c;
    --green-darker:#173f17;
    --heading:#5fd166;
    --surface:#1B241B;
    --header-bg:rgba(15,20,15,0.85);
    --hover-tint:#26332a;
    --paper:#10160F;
    --mist:#212B21;
    --ink:#EAF3EA;
    --muted:#9FB09F;
    --gold:#D9B84A;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:0 10px 28px rgba(0,0,0,0.4);
    --shadow-lg:0 20px 45px rgba(0,0,0,0.5);
  }
  :root[data-theme="dark"] body{background:var(--paper);}

  *{box-sizing:border-box; margin:0; padding:0;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    line-height:1.55;
  }

  .display{
    font-family:'Fraunces', sans-serif;
    font-weight:700;
    letter-spacing:0.03em;
  }

  h1,h2,h3{
    font-family:'Fraunces', sans-serif;
    color:var(--heading);
    font-weight:700;
  }

  a{color:inherit;}

  /* ---------- HEADER ---------- */
  header{
    background:var(--header-bg);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:1.3rem 5vw;
    display:flex;
    align-items:center;
    justify-content:center;
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(60,140,60,0.12);
    box-shadow:var(--shadow-sm);
    transition:padding 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  header.scrolled{
    padding:0.3rem 5vw;
  }
  .brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
  }
  .brand img{
    height:64px;
    width:64px;
    object-fit:contain;
    display:block;
    transform-origin:center center;
    transform:translateX(var(--logo-center-offset, 0px)) scale(1.5);
    transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  header.scrolled .brand img{
    transform:translateX(0) scale(1);
  }
  .brand-name{
    font-family:'Fraunces', sans-serif;
    font-size:1.9rem;
    font-weight:700;
    color:var(--green-dark);
    letter-spacing:0.03em;
    line-height:1;
  }
  .header-actions{
    display:flex;
    align-items:center;
    gap:0.3rem;
    flex-shrink:0;
  }
  .icon-btn{
    background:none;
    border:none;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    padding:0.35rem;
    border-radius:10px;
    color:var(--ink);
    transition:background 0.15s ease, transform 0.15s ease;
  }
  .icon-btn:hover{background:var(--hover-tint); transform:translateY(-1px);}
  .cart-fab{
    position:fixed;
    bottom:1.3rem;
    right:1.3rem;
    background:var(--green);
    color:var(--white);
    font-weight:700;
    width:3.4rem;
    height:3.4rem;
    padding:0;
    border-radius:50%;
    border:none;
    cursor:pointer;
    font-size:1.3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
    z-index:65;
    transition:transform 0.25s var(--ease), background 0.2s ease, box-shadow 0.25s ease;
  }
  .cart-fab:hover{transform:translateY(-3px); background:var(--green-dark); box-shadow:0 24px 50px rgba(23,63,23,0.28);}
  @keyframes cartPop{
    0%{ transform:scale(1); }
    30%{ transform:scale(1.25); }
    55%{ transform:scale(0.92); }
    100%{ transform:scale(1); }
  }
  .cart-fab.pop{
    animation:cartPop 0.5s var(--ease);
  }
  .cart-count{
    position:absolute;
    top:-0.3rem;
    right:-0.3rem;
    background:var(--surface);
    color:var(--green-dark);
    border-radius:50%;
    width:1.4rem;
    height:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    font-weight:800;
    box-shadow:var(--shadow-sm);
  }

  .home-fab{
    position:static;
    margin:0.8rem 0 0 1.3rem;
    background:var(--surface);
    color:var(--green-dark);
    border:2px solid var(--green);
    width:2.8rem;
    height:2.8rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    cursor:pointer;
    box-shadow:var(--shadow-md);
    z-index:55;
    transition:transform 0.25s var(--ease), background 0.2s ease, box-shadow 0.25s ease;
  }
  .home-fab:hover{
    transform:translateY(-3px);
    background:var(--green);
    color:var(--white);
    box-shadow:var(--shadow-lg);
  }

  @media (max-width:480px){
    .cart-fab{
      bottom:1rem;
      right:1rem;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:4.5rem 5vw 3rem;
    background:
      radial-gradient(circle at 90% 10%, rgba(60,140,60,0.10), transparent 50%),
      radial-gradient(circle at 8% 90%, rgba(201,162,39,0.08), transparent 45%),
      var(--surface);
  }
  .hero-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
  }
  .hero-copy{
    max-width:640px;
    margin:0 auto;
    text-align:center;
  }
  .hero-eyebrow{
    font-size:0.8rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--green-dark);
    margin-bottom:0.6rem;
  }
  .hero h1{
    font-family:'Fraunces', sans-serif;
    font-size:clamp(2.1rem, 5.5vw, 3.4rem);
    max-width:18ch;
    margin:0 auto;
    line-height:1.15;
    color:var(--heading);
  }
  .hero-accent{
    width:64px;
    height:4px;
    background:var(--gold);
    border-radius:100px;
    margin:1.1rem auto 0;
  }
  .hero p{
    max-width:46ch;
    margin:1.1rem auto 0;
    font-size:1.05rem;
    color:var(--muted);
  }
  .hero-ctas{
    margin-top:1.7rem;
  }
  .hero-cta{
    background:var(--green);
    color:var(--white);
    border:none;
    font-family:inherit;
    font-weight:800;
    font-size:1rem;
    padding:0.85rem 1.8rem;
    border-radius:100px;
    cursor:pointer;
    box-shadow:var(--shadow-md);
    transition:background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
  }
  .hero-cta:hover{
    background:var(--green-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
  }
  .pills{
    margin-top:1.6rem;
    display:flex;
    gap:0.7rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .pill{
    background:var(--surface);
    color:var(--green-dark);
    border:1px solid rgba(60,140,60,0.2);
    padding:0.5rem 1.05rem;
    border-radius:100px;
    font-size:0.85rem;
    font-weight:700;
    box-shadow:var(--shadow-sm);
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
  }
  @media (max-width:820px){
    .hero-inner{ flex-direction:column; text-align:center; }
    .hero-copy{ text-align:center; }
    .hero h1{ margin:0 auto; }
    .hero-accent{ margin:1.1rem auto 0; }
    .hero p{ margin:1.1rem auto 0; }
    .pills{ justify-content:center; }
  }

  /* ---------- HOW IT WORKS ---------- */
  .how-it-works{
    padding:0.5rem 5vw 3rem;
  }
  .hiw-inner{
    max-width:1100px;
    margin:0 auto;
  }
  .how-it-works h2{
    text-align:center;
    font-size:1.7rem;
    margin-bottom:2rem;
  }
  .hiw-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1.6rem;
  }
  .hiw-step{
    text-align:center;
  }
  .hiw-icon{
    width:56px;
    height:56px;
    margin:0 auto 0.8rem;
    border-radius:100px;
    background:var(--mist);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
  }
  .hiw-step h3{
    font-size:1.05rem;
    margin-bottom:0.35rem;
  }
  .hiw-step p{
    font-size:0.88rem;
    color:var(--muted);
  }

  /* ---------- FREE DELIVERY BANNER ---------- */
  .free-delivery{
    background:linear-gradient(120deg, var(--green-dark), var(--green));
    color:var(--white);
    padding:0.9rem 5vw;
    text-align:center;
    font-size:0.9rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0.5rem 0.9rem;
  }
  .free-delivery .fd-label{
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.78rem;
    background:rgba(255,255,255,0.18);
    padding:0.25rem 0.7rem;
    border-radius:100px;
  }
  .free-delivery .fd-zones{
    font-weight:600;
  }

  /* ---------- INFO STRIP ---------- */
  .info-strip{
    padding:0 5vw 3rem;
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1.2rem;
  }
  .info-card{
    background:var(--surface);
    border-radius:16px;
    padding:1.3rem 1.4rem;
    border:1px solid rgba(60,140,60,0.1);
    box-shadow:var(--shadow-sm);
    transition:box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .info-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
  }
  .info-card .ic-title{
    font-weight:800;
    color:var(--green-dark);
    font-size:0.95rem;
    margin-bottom:0.4rem;
    display:flex;
    align-items:center;
    gap:0.4rem;
  }
  .info-card p{
    font-size:0.88rem;
    color:var(--muted);
  }

  /* ---------- PRODUCTS ---------- */
  .products{
    padding:2rem 5vw 4rem;
    max-width:1200px;
    margin:0 auto;
  }
  .section-head{
    margin-bottom:2rem;
    text-align:center;
  }
  .section-head h2{
    font-size:1.9rem;
  }
  .section-head p{
    color:var(--muted);
    max-width:40ch;
    margin:0.5rem auto 0;
  }

  .dish-search-wrap{
    max-width:480px;
    margin:0 auto 1.6rem;
    position:relative;
  }
  .dish-search{
    width:100%;
    padding:0.75rem 2.8rem 0.75rem 1.2rem;
    border:2px solid rgba(60,140,60,0.25);
    border-radius:100px;
    font-family:inherit;
    font-size:0.95rem;
    background:var(--mist);
    color:var(--ink);
    text-align:left;
    transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .dish-search:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(201,162,39,0.18);
    background:var(--surface);
  }
  .dish-search-icon{
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    font-size:1rem;
    color:var(--muted);
    pointer-events:none;
    line-height:1;
  }
  .dish-search-icon.clearable{
    cursor:pointer;
    pointer-events:auto;
    color:var(--green-dark);
    font-weight:800;
  }

  .back-link{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:var(--surface);
    border:2px solid var(--green);
    color:var(--green-dark);
    font-weight:800;
    font-size:0.95rem;
    cursor:pointer;
    margin-bottom:1.2rem;
    padding:0.6rem 1.2rem;
    border-radius:100px;
    box-shadow:var(--shadow-sm);
    transition:background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
  }
  .back-link:hover{
    background:var(--green);
    color:var(--white);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }

  .dish-card{
    background:var(--surface);
    border-radius:20px;
    border:1px solid rgba(60,140,60,0.1);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    text-align:center;
    cursor:pointer;
    transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .dish-card:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-5px);
  }
  .dish-card .dish-photo{
    width:100%;
    aspect-ratio:16/9;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:1rem;
    box-shadow:0 8px 20px rgba(23,63,23,0.14);
  }
  #dishGrid.search-active .dish-card .dish-photo{
    max-width:400px;
    aspect-ratio:16/9;
    margin-left:auto;
    margin-right:auto;
  }
  .dish-card .dish-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .dish-card .dish-info{
    padding:1.2rem 1.4rem 1.6rem;
  }
  .dish-card h3{
    font-family:'Fraunces', sans-serif;
    font-size:1.3rem;
    color:var(--heading);
    margin-bottom:0.3rem;
  }
  .dish-card .dish-cta{
    display:inline-block;
    margin-top:0.6rem;
    font-size:0.85rem;
    font-weight:800;
    color:var(--green-dark);
  }
  .dish-card p{
    font-size:0.88rem;
    color:var(--muted);
  }
  .dish-card .dish-serves{
    font-weight:700;
    color:var(--green-dark);
  }
  .format-icon{
    font-size:2.6rem;
    margin:1.6rem 0 0.5rem;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
    gap:1.6rem;
  }

  .card{
    background:var(--surface);
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(60,140,60,0.1);
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-sm);
    transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .card:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-5px);
  }
  .card-visual{
    height:140px;
    background:linear-gradient(135deg, var(--mist), #ffffff);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .card-visual .badge{
    position:absolute;
    top:0.9rem;
    right:0.9rem;
    background:var(--gold);
    color:var(--green-darker);
    font-size:0.66rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:0.28rem 0.65rem;
    border-radius:100px;
  }
  .card-body{
    padding:1.2rem 1.3rem 1.4rem;
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .card-body h3{
    font-size:1.25rem;
    font-family:'Fraunces', sans-serif;
    font-weight:700;
    color:var(--heading);
  }
  .serves-note{
    font-size:0.8rem;
    font-weight:700;
    color:var(--gold);
    margin-top:0.3rem;
    margin-bottom:0.2rem;
  }
  .ingredient-list{
    list-style:none;
    margin-top:0.6rem;
    margin-bottom:0.9rem;
  }
  .ingredient-list li{
    font-size:0.85rem;
    color:var(--muted);
    padding-left:1.1rem;
    position:relative;
    margin-bottom:0.2rem;
  }
  .ingredient-list li::before{
    content:"•";
    color:var(--green);
    position:absolute;
    left:0;
    font-weight:800;
  }

  .field-inline{
    margin-bottom:0.8rem;
  }
  .field-inline label{
    display:block;
    font-size:0.78rem;
    font-weight:700;
    color:var(--green-dark);
    margin-bottom:0.3rem;
  }
  .field-inline select{
    width:100%;
    padding:0.55rem 0.6rem;
    border:1px solid rgba(60,140,60,0.3);
    border-radius:8px;
    font-family:inherit;
    font-size:0.88rem;
    background:var(--mist);
    color:var(--ink);
  }
  .field-inline .no-complement-note{
    margin:0;
    padding:0.55rem 0.6rem;
    border:1px dashed rgba(60,140,60,0.3);
    border-radius:8px;
    font-size:0.85rem;
    font-style:italic;
    color:var(--muted);
    background:var(--mist);
  }

  .checkbox-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--mist);
    padding:0.55rem 0.7rem;
    border-radius:8px;
    margin-bottom:0.5rem;
    font-size:0.85rem;
  }
  .checkbox-row label{
    display:flex;
    align-items:center;
    gap:0.5rem;
    cursor:pointer;
  }
  .checkbox-row span.addon-price{
    color:var(--green-dark);
    font-weight:700;
  }

  .price-line{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top:0.8rem;
    border-top:1px dashed rgba(60,140,60,0.25);
    margin-bottom:0.9rem;
  }
  .price-line .label{font-size:0.8rem; color:var(--muted);}
  .price-line .value{font-size:1.4rem; font-weight:800; color:var(--green-dark); font-family:'Fraunces', sans-serif;}

  .ing-photos-btn{
    width:100%;
    background:var(--mist);
    color:var(--green-dark);
    border:1px dashed rgba(60,140,60,0.4);
    padding:0.5rem 0.7rem;
    border-radius:8px;
    font-size:0.82rem;
    font-weight:700;
    cursor:pointer;
    margin-bottom:0.8rem;
    transition:background 0.2s ease;
  }
  .ing-photos-btn:hover{background:var(--hover-tint);}

  .ing-modal{
    position:fixed;
    inset:0;
    z-index:80;
    display:none;
    align-items:center;
    justify-content:center;
    padding:1.2rem;
  }
  .ing-modal.open{display:flex;}
  .ing-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(23,63,23,0.55);
  }
  .ing-modal-box{
    position:relative;
    background:var(--surface);
    border-radius:18px;
    max-width:480px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:1.4rem;
    box-shadow:var(--shadow-lg);
  }
  .ing-modal-box h3{
    font-size:1.15rem;
    margin-bottom:0.2rem;
  }
  .ing-modal-sub{
    font-size:0.85rem;
    color:var(--muted);
    margin-bottom:1rem;
  }
  .ing-modal-close{
    position:absolute;
    top:0.8rem;
    right:0.9rem;
    background:none;
    border:none;
    font-size:1.3rem;
    color:var(--muted);
    cursor:pointer;
  }
  .ing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:0.9rem;
  }
  .ing-item{
    text-align:center;
  }
  .ing-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(60,140,60,0.15);
    box-shadow:var(--shadow-sm);
  }
  .ing-item span{
    display:block;
    margin-top:0.4rem;
    font-size:0.8rem;
    font-weight:700;
    color:var(--heading);
  }
  .card-actions{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
  }
  .btn-row{
    display:flex;
    gap:0.6rem;
  }
  .qty-block{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
  }
  .qty-label{
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--green-dark);
  }
  .qty{
    display:flex;
    align-items:center;
    border:1px solid rgba(60,140,60,0.3);
    border-radius:8px;
    overflow:hidden;
    width:fit-content;
  }
  .qty button{
    background:var(--mist);
    border:none;
    width:2.1rem;
    height:2.1rem;
    font-size:1.1rem;
    cursor:pointer;
    color:var(--green-dark);
  }
  .qty span{
    width:1.8rem;
    text-align:center;
    font-weight:700;
  }
  .add-btn{
    flex:1;
    background:var(--green);
    color:var(--white);
    border:none;
    padding:0.65rem 1rem;
    border-radius:8px;
    font-weight:800;
    cursor:pointer;
    transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
    font-size:0.9rem;
  }
  .add-btn:hover{background:var(--green-dark); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
  .add-btn.secondary{
    background:var(--surface);
    color:var(--green-dark);
    border:2px solid var(--green);
    padding:calc(0.65rem - 2px) calc(1rem - 2px);
  }
  .add-btn.secondary:hover{background:var(--mist); color:var(--green-dark);}

  .wa-inline{
    margin-top:0.7rem;
    text-align:center;
    font-size:0.8rem;
  }
  .wa-inline a{
    color:var(--green-dark);
    font-weight:700;
    text-decoration:underline;
  }

  /* ---------- CART DRAWER ---------- */
  .overlay{
    position:fixed; inset:0;
    background:rgba(23,63,23,0.45);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
    z-index:60;
    touch-action:none;
  }
  .overlay.open{opacity:1; pointer-events:auto;}

  .drawer{
    position:fixed;
    bottom:0; left:0; right:0;
    top:auto;
    max-height:85vh;
    width:100%;
    max-width:480px;
    margin:0 auto;
    background:var(--surface);
    z-index:70;
    transform:translateY(100%);
    transition:transform 0.35s var(--ease);
    display:flex;
    flex-direction:column;
    box-shadow:0 -20px 50px rgba(23,63,23,0.18);
    border-radius:20px 20px 0 0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .drawer.open{transform:translateY(0);}
  .drawer-head{
    background:linear-gradient(120deg, var(--green-dark), var(--green));
    color:var(--white);
    padding:1.2rem 1.3rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:5;
    border-radius:20px 20px 0 0;
  }
  .drawer-head h3{color:var(--white); font-size:1.1rem;}
  .close-btn{
    background:none;
    border:none;
    color:var(--white);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    padding:0.35rem;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease, transform 0.15s ease;
  }
  .close-btn:hover{background:rgba(255,255,255,0.18); transform:translateY(-1px);}
  .drawer-body{
    padding:1.1rem 1.3rem;
  }
  .empty-msg{
    color:var(--muted);
    text-align:center;
    margin-top:2rem;
    font-size:0.95rem;
  }
  .line-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:0.8rem 0;
    border-bottom:1px solid var(--mist);
    gap:0.6rem;
  }
  .line-item .li-name{font-weight:700; font-size:0.92rem; color:var(--heading);}
  .line-item .li-sub{font-size:0.78rem; color:var(--muted); margin-top:0.15rem;}
  .li-remove{
    background:none;
    border:none;
    font-size:1.15rem;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
    padding:0.2rem 0.3rem;
    border-radius:6px;
    transition:background 0.15s ease;
  }
  .li-remove:hover{
    background:rgba(181,81,30,0.12);
  }

  .drawer-foot{
    padding:1.1rem 1.3rem 1.4rem;
    border-top:1px solid var(--mist);
  }

  /* ---------- SETTINGS PANEL ---------- */
  .settings-panel{
    position:fixed;
    bottom:0; left:0; right:0;
    top:auto;
    max-height:85vh;
    width:100%;
    max-width:420px;
    margin:0 auto;
    background:var(--surface);
    z-index:90;
    transform:translateY(100%);
    transition:transform 0.35s var(--ease);
    display:flex;
    flex-direction:column;
    box-shadow:0 -20px 50px rgba(23,63,23,0.18);
    border-radius:20px 20px 0 0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .settings-panel.open{transform:translateY(0);}
  .settings-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:1rem;}
  .settings-group{
    background:var(--mist);
    border-radius:16px;
    padding:1rem 1.1rem;
    margin-bottom:0;
  }
  .settings-group h4{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted);
    margin-bottom:0.7rem;
    font-weight:800;
  }
  .settings-row{
    display:flex;
    align-items:center;
    gap:0.8rem;
  }
  .settings-row input[type="range"]{
    flex:1;
    -webkit-appearance:none;
    appearance:none;
    height:20px;
    background:transparent;
    cursor:pointer;
    outline:none;
  }
  .settings-row input[type="range"]::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:linear-gradient(to right, var(--green) 0%, var(--green) var(--range-percent, 55%), var(--surface) var(--range-percent, 55%), var(--surface) 100%);
  }
  .settings-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    margin-top:-5px;
    border-radius:50%;
    background:var(--green);
    border:2px solid var(--white);
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
    cursor:pointer;
    transition:transform 0.15s ease;
  }
  .settings-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
  .settings-row input[type="range"]::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:var(--surface);
  }
  .settings-row input[type="range"]::-moz-range-progress{
    height:6px;
    border-radius:999px;
    background:var(--green);
  }
  .settings-row input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--green);
    border:2px solid var(--white);
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
    cursor:pointer;
  }
  .settings-vol-icon{color:var(--green-dark); flex-shrink:0; display:inline-flex;}
  .settings-vol-value{
    font-size:0.8rem;
    color:var(--muted);
    min-width:2.6rem;
    text-align:right;
    flex-shrink:0;
  }
  .toggle-pair{
    display:flex;
    background:var(--surface);
    border-radius:10px;
    padding:0.25rem;
    gap:0.25rem;
    box-shadow:inset 0 0 0 1px rgba(60,140,60,0.1);
  }
  .toggle-pair button{
    flex:1;
    border:none;
    background:none;
    padding:0.55rem 0.6rem;
    border-radius:8px;
    font-family:inherit;
    font-weight:700;
    font-size:0.9rem;
    cursor:pointer;
    color:var(--muted);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem;
    transition:background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .toggle-pair button.active{
    background:var(--mist);
    color:var(--green-dark);
    box-shadow:var(--shadow-sm);
  }
  .total-row{
    display:flex;
    justify-content:space-between;
    font-weight:800;
    font-size:1.05rem;
    margin-bottom:0.3rem;
    color:var(--heading);
  }
  .delivery-note{
    font-size:0.78rem;
    color:var(--muted);
    margin-bottom:1rem;
  }
  .field{
    margin-bottom:0.75rem;
  }
  .field label{
    display:block;
    font-size:0.78rem;
    font-weight:700;
    color:var(--green-dark);
    margin-bottom:0.3rem;
  }
  .field input, .field select, .field textarea{
    width:100%;
    padding:0.55rem 0.65rem;
    border:1px solid rgba(60,140,60,0.3);
    border-radius:8px;
    font-family:inherit;
    font-size:0.88rem;
    background:var(--mist);
    color:var(--ink);
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,162,39,0.18);
    background:var(--surface);
  }
  .field textarea{resize:vertical; min-height:2.6rem;}
  .quartier-fee-note{
    font-size:0.8rem;
    font-weight:700;
    margin-top:0.4rem;
    padding:0.5rem 0.65rem;
    border-radius:8px;
    display:none;
  }
  .quartier-fee-note.free{
    display:block;
    background:rgba(60,140,60,0.14);
    color:var(--heading);
  }
  :root[data-theme="dark"] .quartier-fee-note.free{
    background:rgba(76,175,80,0.22);
  }
  .quartier-fee-note.paid{
    display:block;
    background:rgba(181,81,30,0.12);
    color:#b5511e;
  }

  .whatsapp-btn{
    width:100%;
    background:#128C4A;
    color:#fff;
    border:none;
    padding:0.8rem;
    border-radius:9px;
    font-weight:800;
    font-size:0.95rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    margin-top:0.3rem;
    transition:background 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
  }
  .whatsapp-btn:hover{background:#0e7a3f; transform:translateY(-1px); box-shadow:var(--shadow-sm);}
  .whatsapp-btn:disabled{background:#b8d8c2; cursor:not-allowed; transform:none; box-shadow:none;}

  .hint{
    font-size:0.75rem;
    color:var(--muted);
    margin-top:0.5rem;
    text-align:center;
  }

  footer{
    background:linear-gradient(160deg, var(--green-darker), #0d2a0d);
    color:#cfe6cf;
    padding:2.4rem 5vw;
    text-align:center;
    font-size:0.85rem;
  }
  footer .fbrand{color:#fff; font-family:'Fraunces', sans-serif; font-weight:700; letter-spacing:0.03em;}

  @media (max-width:600px){
    .hero{padding:3rem 6vw 2.5rem;}
    .products{padding:1.5rem 6vw 3rem;}
  }