@font-face { font-family:'Raleway'; src:url('fonts/Raleway.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('fonts/Nunito.ttf') format('truetype'); font-weight:200 900; font-display:swap; }

:root{
  --white:#fff; --snow:#f6f3fb; --graphite:#2b2b2b; --graphite-soft:#5c5663;
  --mint:#1f9e8d; --mint-light:#36c9b6; --mint-deep:#15776a;
  --lilac:#ae92dc; --lilac-soft:#cdb0f8; --coral:#f48d90; --coral-deep:#e0686d;
  --hairline:#ece7f3; --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(43,43,43,.06); --shadow-card:0 14px 30px rgba(95,70,140,.10);
  --maxw:1080px;
  --font:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --head:'Raleway','Nunito',Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--graphite);background:var(--white);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--head);margin:0 0 .4em;line-height:1.12;letter-spacing:-.01em;}
h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800;}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;}
h3{font-size:1.18rem;font-weight:700;}
p{margin:0 0 1em;color:var(--graphite-soft);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{display:inline-flex;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-bottom:12px;}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);margin-right:10px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-size:1rem;font-weight:800;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,opacity .15s;}
.btn-primary{background:var(--mint);color:#fff;}
.btn-primary:hover{background:var(--mint-deep);transform:translateY(-2px);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-block{width:100%;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo-img{height:46px;width:auto;display:block;}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--hairline);border-radius:999px;padding:10px 16px;font-weight:800;font-family:inherit;font-size:.95rem;color:var(--mint-deep);cursor:pointer;}
.cart-count{background:var(--coral);color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;padding:0 6px;}
.cart-btn.pulse{animation:pulse .4s ease;}
@keyframes pulse{0%,100%{transform:scale(1);}40%{transform:scale(1.08);}}

/* Hero + batch */
.hero{padding:44px 0 10px;}
.hero .eyebrow{color:var(--mint-deep);}
.hero p.lead{font-size:1.1rem;max-width:60ch;}
.batch{background:var(--snow);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 24px;margin-top:22px;max-width:680px;}
.batch-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-family:var(--head);margin-bottom:10px;}
.batch-head .b-kg{color:var(--mint-deep);}
.batch-bar{height:14px;border-radius:999px;background:#e7e0ef;overflow:hidden;}
.batch-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--mint-light));transition:width .35s ease;}
.batch-note{margin:12px 0 0;font-size:.95rem;color:var(--graphite-soft);}
.batch-note b{color:var(--coral-deep);}

/* Catalog */
section{padding:30px 0;}
.section-head{margin-bottom:26px;}
.section-head p{margin-bottom:0;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.prod{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.prod-img{width:100%;height:190px;object-fit:cover;}
.prod-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.prod-body h3{margin-bottom:.2em;font-size:1.1rem;}
.prod-desc{font-size:.95rem;flex:1;}
.base-pick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;}
.chip{position:relative;}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.chip span{display:inline-block;padding:7px 12px;border-radius:999px;font-size:.85rem;font-weight:700;border:1.5px solid var(--hairline);color:var(--graphite-soft);background:#fff;cursor:pointer;transition:.15s;}
.chip input:checked + span{border-color:var(--mint);color:var(--mint-deep);background:rgba(54,201,182,.12);}
.comp{margin:0 0 14px;border-top:1px solid var(--hairline);padding-top:10px;}
.comp summary{cursor:pointer;font-weight:800;font-size:.85rem;color:var(--mint-deep);list-style:none;}
.comp summary::-webkit-details-marker{display:none;}
.comp summary::before{content:"＋ ";color:var(--mint);}
.comp[open] summary::before{content:"－ ";}
.comp .comp-body{font-size:.82rem;color:var(--graphite-soft);margin-top:8px;}
.comp .comp-body b{color:var(--graphite);}
.prod-foot{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.price{font-family:var(--head);font-weight:800;color:var(--mint-deep);font-size:.98rem;}
.qty{display:inline-flex;align-items:center;gap:6px;}
.q-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--hairline);background:#fff;color:var(--mint-deep);font-size:1.1rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.q-btn:hover{border-color:var(--mint);}
.q-val{min-width:24px;text-align:center;font-weight:700;}

/* Cart drawer */
.overlay{position:fixed;inset:0;background:rgba(43,43,43,.45);z-index:150;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:410px;max-width:92vw;z-index:160;background:#fff;box-shadow:-10px 0 40px rgba(95,70,140,.20);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--hairline);}
.cart-head h2{margin:0;}
.icon-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--graphite-soft);padding:4px 8px;border-radius:8px;}
#cartItems{flex:1;overflow-y:auto;padding:14px 22px;}
.cart-empty{color:var(--graphite-soft);text-align:center;margin-top:30px;}
.cart-item{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline);}
.ci-info strong{font-size:.98rem;display:block;}
.ci-info span{font-size:.85rem;color:var(--graphite-soft);}
.ci-controls{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.ci-price{font-weight:800;color:var(--mint-deep);font-family:var(--head);}
.ci-remove{background:none;border:none;color:var(--coral-deep);cursor:pointer;font-size:.85rem;}
.cart-foot{padding:18px 22px 22px;border-top:1px solid var(--hairline);}
.cart-total{display:flex;justify-content:space-between;font-weight:800;font-size:1.2rem;font-family:var(--head);margin-bottom:6px;}
.min-note{font-size:.85rem;margin:0 0 12px;}
.min-note.warn{color:var(--coral-deep);font-weight:700;}
.min-note.ok{color:var(--mint-deep);}

/* Modals */
.modal{position:fixed;inset:0;z-index:170;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:30px 28px;position:relative;}
.modal-card.center{text-align:center;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--graphite-soft);line-height:1;}
.confirm-emoji{font-size:3rem;}
form label{display:block;font-weight:700;font-size:.92rem;margin-bottom:14px;}
form input,form textarea{width:100%;margin-top:6px;font-family:inherit;font-size:1rem;color:var(--graphite);border:1.5px solid var(--hairline);border-radius:var(--radius-sm);padding:11px 14px;background:var(--snow);}
form textarea{resize:vertical;min-height:64px;}
.order-summary,#confirmSummary{background:var(--snow);border-radius:var(--radius-sm);padding:14px 16px;margin:6px 0 16px;}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:4px 0;color:var(--graphite-soft);}
.sum-total{font-weight:800;color:var(--graphite);border-top:1px solid var(--hairline);margin-top:6px;padding-top:8px;font-family:var(--head);}
.pay-note{font-size:1rem;}
.pay-note strong{color:var(--mint-deep);font-family:var(--head);}

/* Footer */
.site-footer{background:var(--mint-deep);color:rgba(255,255,255,.9);padding:40px 0;margin-top:30px;}
.footer-logo{height:50px;margin-bottom:12px;}
.site-footer p{color:rgba(255,255,255,.82);font-size:.88rem;max-width:60ch;}
.site-footer a{color:#fff;}

@media (max-width:720px){
  .grid{grid-template-columns:1fr;}
  .cart-drawer{width:100%;}
}
@media (prefers-reduced-motion:reduce){*,.cart-drawer{animation:none!important;transition:none!important;}}