:root{
    --bg:#F7F8F5;
    --ink:#14201C;
    --ink-soft:#4B5750;
    --accent:#2F6F5E;
    --accent-dark:#204F42;
    --accent-soft:#DCEAE3;
    --coral:#FF6B4D;
    --coral-dark:#E8552F;
    --line:#D8DED9;
    --white:#FFFFFF;
    --radius:14px;
    --shadow:0 8px 24px rgba(20,32,28,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-0.01em;
  }
  a{color:inherit;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  img{max-width:100%; display:block;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(247,248,245,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1180px; margin:0 auto;
    padding:16px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  #storeName{
    font-size:22px; font-weight:700;
    outline:none;
    padding:2px 6px; border-radius:6px;
  }
  #storeName[contenteditable="true"]{
    background:var(--accent-soft);
    box-shadow:0 0 0 2px var(--accent);
  }
  .header-actions{display:flex; align-items:center; gap:10px;}
  .icon-btn{
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--white); border:1px solid var(--line);
    position:relative; transition:transform .15s ease, border-color .15s ease;
  }
  .icon-btn:hover{transform:translateY(-1px); border-color:var(--accent);}
  #cartCount{
    position:absolute; top:-6px; right:-6px;
    background:var(--coral); color:#fff;
    font-size:11px; font-weight:700;
    min-width:18px; height:18px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px;
  }
  .edit-toggle{
    padding:10px 16px; border-radius:22px;
    background:var(--ink); color:#fff;
    font-size:13px; font-weight:600;
    display:flex; align-items:center; gap:6px;
  }
  .edit-toggle.active{background:var(--coral);}

  /* ---------- HERO ---------- */
  .hero{
    max-width:1180px; margin:0 auto; padding:64px 24px 40px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  }
  .hero-eyebrow{
    font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--accent-dark); margin-bottom:14px;
    display:flex; align-items:center; gap:8px;
  }
  .hero-eyebrow::before{
    content:""; width:18px; height:1px; background:var(--accent-dark);
  }
  .hero h1{font-size:44px; font-weight:700; line-height:1.08; margin-bottom:18px;}
  .hero p{font-size:16px; color:var(--ink-soft); max-width:440px; margin-bottom:26px;}
  .hero-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent); color:#fff;
    padding:14px 24px; border-radius:30px;
    font-weight:600; font-size:15px;
    transition:background .15s ease;
  }
  .hero-cta:hover{background:var(--accent-dark);}

  /* mist signature element */
  .mist-visual{
    position:relative; height:260px;
    display:flex; align-items:center; justify-content:center;
  }
  .mist-core{
    width:120px; height:180px; border-radius:60px 60px 20px 20px;
    background:linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
    position:relative; box-shadow:var(--shadow);
  }
  .mist-core::after{
    content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    width:36px; height:20px; background:var(--ink); border-radius:6px 6px 0 0;
  }
  .mist-dot{
    position:absolute; border-radius:50%;
    background:var(--accent-soft);
    opacity:0; animation:mistdrift 3.2s ease-in-out infinite;
  }
  @keyframes mistdrift{
    0%{opacity:0; transform:translate(0,0) scale(0.6);}
    15%{opacity:0.9;}
    100%{opacity:0; transform:translate(var(--dx,40px), var(--dy,-70px)) scale(1.3);}
  }
  @media (prefers-reduced-motion: reduce){
    .mist-dot{animation:none; opacity:0.5;}
  }

  /* ---------- WAVE DIVIDER ---------- */
  .wave{display:block; width:100%; height:40px; fill:var(--accent-soft);}

  /* ---------- PRODUCTS ---------- */
  .products-section{background:var(--accent-soft); padding:50px 24px 70px;}
  .products-wrap{max-width:1180px; margin:0 auto;}
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:10px;
  }
  .section-head h2{font-size:26px; font-weight:700;}
  .section-head span{font-size:13px; color:var(--ink-soft);}
  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:22px;
  }
  .card{
    background:var(--white); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); display:flex; flex-direction:column;
    border:1px solid rgba(20,32,28,0.04);
  }
  .card-img{
    width:100%; aspect-ratio:1/1; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
  }
  .card-img img{
    width:100%; height:100%; object-fit:contain; padding:10px;
    transition:transform .25s ease;
  }
  .card-img:hover img{transform:scale(1.07);}
  @media (prefers-reduced-motion: reduce){
    .card-img img{transition:none;}
    .card-img:hover img{transform:none;}
  }
  .card-img .placeholder{color:var(--accent-dark); font-size:13px; text-align:center; padding:10px;}
  .img-upload-btn{
    position:absolute; bottom:8px; right:8px;
    background:rgba(20,32,28,0.75); color:#fff;
    font-size:11px; padding:6px 10px; border-radius:16px; display:none;
  }
  .card.editing .img-upload-btn{display:inline-flex;}
  .card-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .card-name{
    font-size:15px; font-weight:600; outline:none; border-radius:6px; padding:2px 4px;
  }
  .card-desc{font-size:12.5px; color:var(--ink-soft); outline:none; border-radius:6px; padding:2px 4px; min-height:16px;}
  .card.editing .card-name, .card.editing .card-desc{background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent);}
  .card-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:8px;}
  .card-price{font-size:17px; font-weight:700; color:var(--accent-dark); outline:none; border-radius:6px; padding:2px 6px;}
  .card.editing .card-price{background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent);}
  .add-btn{
    background:var(--ink); color:#fff; font-size:13px; font-weight:600;
    padding:9px 14px; border-radius:20px; white-space:nowrap;
    transition:background .15s ease;
  }
  .add-btn:hover{background:var(--accent-dark);}
  .card-stock{font-size:11px; color:var(--ink-soft);}
  .delete-card-btn{
    display:none; align-self:flex-start; font-size:11px; color:var(--coral-dark); font-weight:600; margin-top:4px;
  }
  .card.editing .delete-card-btn{display:block;}

  .add-product-card{
    border:2px dashed var(--accent); border-radius:var(--radius);
    display:none; align-items:center; justify-content:center; flex-direction:column; gap:8px;
    min-height:230px; color:var(--accent-dark); font-weight:600; font-size:14px;
    background:rgba(255,255,255,0.4);
  }
  body.edit-mode .add-product-card{display:flex;}
  body.edit-mode .card{outline:1px dashed rgba(47,111,94,0.35);}


  .order-notify-status{
    margin:14px 0 0; padding:11px 13px; border-radius:10px;
    font-size:12.5px; line-height:1.45; background:var(--accent-soft); color:var(--accent-dark);
  }
  .order-notify-status.warning{background:#FFF2D8; color:#80551A;}
  .transfer-summary{
    margin-top:14px; padding:14px; border:1px solid var(--line);
    border-radius:12px; background:var(--bg); font-size:12.5px; line-height:1.6;
  }
  .transfer-summary strong{display:block; margin-bottom:5px; color:var(--ink);}
  .transfer-summary .delivery-info{
    margin:-2px -2px 14px; padding:12px 13px; border-radius:10px;
    background:var(--accent-soft); color:var(--accent-dark); line-height:1.5;
  }
  .transfer-summary .delivery-info strong{margin-bottom:3px; color:var(--accent-dark);}

  /* ---------- CART DRAWER ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(20,32,28,0.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;
  }
  .overlay.show{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw;
    background:var(--white); z-index:70; box-shadow:-12px 0 30px rgba(0,0,0,0.12);
    transform:translateX(100%); transition:transform .25s ease;
    display:flex; flex-direction:column;
  }
  .drawer.show{transform:translateX(0);}
  .drawer-head{
    padding:20px 22px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .drawer-head h3{font-size:18px;}
  .close-x{font-size:20px; color:var(--ink-soft);}
  .cart-items{flex:1; overflow-y:auto; padding:14px 22px;}
  .cart-empty{color:var(--ink-soft); font-size:14px; padding:30px 0; text-align:center;}
  .cart-item{
    display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
  }
  .cart-item img{width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--accent-soft);}
  .cart-item-info{flex:1;}
  .cart-item-info .name{font-size:14px; font-weight:600;}
  .cart-item-info .price{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
  .qty-row{display:flex; align-items:center; gap:8px; margin-top:8px;}
  .qty-btn{
    width:24px; height:24px; border-radius:50%; background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  }
  .qty-val{font-size:13px; font-weight:600; min-width:16px; text-align:center;}
  .remove-item{font-size:11.5px; color:var(--coral-dark); margin-left:auto; font-weight:600;}
  .drawer-foot{padding:18px 22px 22px; border-top:1px solid var(--line);}
  .total-row{display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:14px;}
  .checkout-btn{
    width:100%; background:var(--coral); color:#fff; font-weight:700; font-size:15px;
    padding:14px; border-radius:26px; transition:background .15s ease;
  }
  .checkout-btn:hover{background:var(--coral-dark);}
  .checkout-btn:disabled{opacity:0.5; cursor:not-allowed;}

  /* ---------- MODALS ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(20,32,28,0.5);
    display:none; align-items:center; justify-content:center; z-index:80; padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal{
    background:var(--white); border-radius:18px; max-width:440px; width:100%;
    padding:28px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,0.2);
  }
  .modal h3{font-size:19px; margin-bottom:6px;}
  .modal .sub{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink-soft);}
  .field input, .field textarea{
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
    font-size:14px; font-family:inherit; outline:none; background:var(--bg);
  }
  .field input:focus, .field textarea:focus{border-color:var(--accent);}
  .whatsapp-consent{
    display:flex; align-items:flex-start; gap:9px; margin:2px 0 4px;
    font-size:12px; color:var(--ink-soft); line-height:1.4; cursor:pointer;
  }
  .whatsapp-consent input{
    width:16px; height:16px; margin-top:1px; flex:0 0 auto; accent-color:var(--accent);
  }

  .modal-actions{display:flex; gap:10px; margin-top:20px;}
  .btn-secondary{
    flex:1; padding:12px; border-radius:22px; background:var(--bg); border:1px solid var(--line);
    font-weight:600; font-size:14px;
  }
  .btn-primary{
    flex:1; padding:12px; border-radius:22px; background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  }
  .btn-primary:hover{background:var(--accent-dark);}
  .modal-close{position:absolute; top:16px; right:18px; font-size:18px; color:var(--ink-soft);}
  .modal{position:relative;}

  .order-code{
    background:var(--accent-soft); border-radius:12px; padding:16px; text-align:center; margin:16px 0;
  }
  .order-code .code{font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:var(--accent-dark); letter-spacing:0.04em;}

  .settings-tabs{display:flex; gap:8px; margin-bottom:18px;}
  .tab-btn{
    padding:8px 14px; border-radius:16px; font-size:12.5px; font-weight:600; background:var(--bg); border:1px solid var(--line);
  }
  .tab-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}
  .hint{font-size:11.5px; color:var(--ink-soft); margin-top:-6px; margin-bottom:14px;}

  footer{
    text-align:center; padding:30px 20px; font-size:12px; color:var(--ink-soft);
  }
  .admin-link{
    color:var(--ink-soft); text-decoration:underline; margin-left:8px;
    opacity:0.6; transition:opacity .15s ease;
  }
  .admin-link:hover{opacity:1;}

  .conn-status{
    font-size:11.5px; font-weight:600; color:var(--ink-soft);
    display:flex; align-items:center; gap:5px; white-space:nowrap;
  }
  .conn-status.ok{color:var(--accent-dark);}
  .conn-status.error{color:var(--coral-dark);}

  .setup-banner{
    display:none; background:#FFF4E8; border-bottom:1px solid #F0D9B8;
  }
  .setup-banner.show{display:block;}
  .setup-banner-inner{
    max-width:1180px; margin:0 auto; padding:12px 24px;
    font-size:12.5px; color:#7A4E14; line-height:1.5;
  }
  .setup-banner code{
    background:rgba(122,78,20,0.1); padding:1px 6px; border-radius:5px; font-size:11.5px;
  }
  .field-error{font-size:12px; color:var(--coral-dark); margin-top:6px;}

  @media (max-width:760px){
    .hero{grid-template-columns:1fr; padding-top:36px;}
    .hero h1{font-size:32px;}
    .mist-visual{height:180px;}
  }