:root {
  --mocha: #a9764f;
  --mocha-dark: #8a5e3c;
  --cream: #f3ece4;
  --cream-2: #faf6f0;
  --ink: #3b2a20;
  --ink-soft: #7a6655;
  --pink: #f6ccd0;
  --pink-2: #fbe2e4;
  --script: 'Dancing Script', cursive;
  --body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { font-family:var(--body); background:var(--cream-2); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { display:block; max-width:100%; }
.script { font-family:var(--script); font-weight:700; }

.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:8px; top:8px; background:var(--mocha); color:#fff; padding:8px 14px; z-index:999; }
:focus-visible { outline:2px solid var(--mocha); outline-offset:3px; }
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1!important;transform:none!important} }

.btn { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.9rem; border-radius:2rem; font-weight:600; font-size:.92rem; border:1px solid transparent; cursor:pointer; transition:all .25s var(--ease); }
.btn-mocha { background:var(--mocha); color:#fff; border-color:var(--mocha); }
@media (hover: hover) { .btn-mocha:hover { background:var(--mocha-dark); border-color:var(--mocha-dark); transform:translateY(-2px); } }
.btn-cream { background:var(--cream); color:var(--ink); }
@media (hover: hover) { .btn-cream:hover { background:#fff; transform:translateY(-2px); } }

/* Hero */
.hero { position:relative; min-height:90vh; display:flex; flex-direction:column; color:#fff;
  background:linear-gradient(rgba(58,38,24,.32), rgba(58,38,24,.55)), url('https://images.unsplash.com/photo-1461023058943-07fcbe16d735?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; }
#siteHeader { position:sticky; top:0; z-index:100; transition:background .3s, box-shadow .3s; }
#siteHeader.scrolled { background:rgba(58,38,24,.92); backdrop-filter:blur(8px); box-shadow:0 6px 24px rgba(0,0,0,.2); }
.head-inner { max-width:1280px; margin:0 auto; padding:1.2rem 2rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.brand { font-weight:800; font-size:1.5rem; letter-spacing:-.01em; color:#fff; }
.nav-links { display:flex; gap:2rem; justify-content:center; }
.nav-links a { color:#fff; font-size:.95rem; font-weight:500; opacity:.9; }
@media (hover: hover) { .nav-links a:hover { opacity:1; text-decoration:underline; text-underline-offset:5px; } }
.head-actions { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; }
.head-icon { color:#fff; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; position:relative; }
@media (hover: hover) { .head-icon:hover { opacity:.7; } }
.cart-count { position:absolute; top:5px; right:2px; background:var(--mocha); color:#fff; font-size:.6rem; font-weight:700; min-width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; align-items:center; justify-content:center; }
.burger, .burger::before, .burger::after { content:""; display:block; width:24px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .2s; }
.burger { position:relative; } .burger::before { position:absolute; top:-7px; } .burger::after { position:absolute; top:7px; }
#siteHeader.nav-open .burger { background:transparent; }
#siteHeader.nav-open .burger::before { transform:translateY(7px) rotate(45deg); }
#siteHeader.nav-open .burger::after { transform:translateY(-7px) rotate(-45deg); }
.hero-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 2rem 5rem; }
.hero-script { font-size:clamp(2rem,5vw,3.2rem); color:var(--cream); margin-bottom:-.4rem; }
.hero-title { font-size:clamp(3.2rem,12vw,9rem); font-weight:800; line-height:.95; letter-spacing:-.02em; text-transform:uppercase; }
.hero-title .outline { color:transparent; -webkit-text-stroke:2px #fff; }
.hero-sub { max-width:480px; margin:1.5rem 0 2rem; font-size:1.05rem; opacity:.92; }

/* Menu */
.menu { max-width:1240px; margin:0 auto; padding:5rem 2rem; }
.menu-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; gap:1rem; flex-wrap:wrap; }
.menu-head h2 { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--mocha-dark); }
.menu-head h2 .script { color:var(--mocha); font-weight:700; }
.tabs { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.tab { padding:.55rem 1.3rem; border-radius:2rem; border:1px solid var(--mocha); background:transparent; color:var(--mocha-dark); font-family:var(--body); font-size:.88rem; font-weight:500; cursor:pointer; transition:all .2s; }
@media (hover: hover) { .tab:hover { background:var(--cream); } }
.tab.is-active { background:var(--mocha); color:#fff; }
.drink-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.drink { background:var(--cream); border-radius:1.2rem; padding:1.2rem; text-align:center; transition:transform .3s var(--ease), box-shadow .3s; }
@media (hover: hover) { .drink:hover { transform:translateY(-5px); box-shadow:0 18px 36px rgba(169,118,79,.18); } }
.drink-img { aspect-ratio:1; border-radius:.9rem; overflow:hidden; margin-bottom:1rem; background:#e6dccd; }
.drink-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
@media (hover: hover) { .drink:hover .drink-img img { transform:scale(1.06); } }
.drink h3 { font-size:1.1rem; font-weight:700; margin-bottom:.2rem; }
.desc { font-size:.8rem; color:var(--ink-soft); display:block; margin-bottom:1rem; }
.drink-foot { display:flex; justify-content:space-between; align-items:center; }
.price { font-weight:800; font-size:1.05rem; }
.to-cart { background:transparent; border:1px solid var(--mocha); color:var(--mocha-dark); border-radius:2rem; padding:.4rem .9rem; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s; }
@media (hover: hover) { .to-cart:hover { background:var(--mocha); color:#fff; } }
.menu-more { text-align:center; margin-top:2.5rem; }

/* Promo */
.promo { background:var(--pink); display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; padding:4.5rem 2rem; }
.promo > div { max-width:620px; }
.promo-text { margin-left:auto; padding-left:2rem; }
.promo-title { font-size:clamp(2.8rem,7vw,5rem); font-weight:800; line-height:.9; text-transform:uppercase; color:var(--ink); margin-bottom:1rem; }
.promo-title .script { display:block; font-size:.6em; color:#fff; text-transform:none; }
.promo-text h3 { font-size:1.6rem; font-weight:700; color:var(--mocha-dark); margin-bottom:.8rem; }
.promo-text p { color:var(--ink-soft); margin-bottom:1.5rem; max-width:440px; }
.promo-price { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.8rem; }
.promo-price .now { font-size:2.4rem; font-weight:800; color:var(--mocha-dark); }
.promo-price .was { font-size:1.3rem; color:var(--ink-soft); text-decoration:line-through; }
.promo-stats { display:flex; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.promo-stats div { display:flex; flex-direction:column; }
.promo-stats strong { font-size:1.6rem; font-weight:800; color:var(--ink); }
.promo-stats span { font-size:.85rem; color:var(--ink-soft); }
.promo-stats small { font-size:.72rem; }
.promo-img img { width:100%; height:520px; object-fit:cover; border-radius:1.4rem; }

/* Café info */
.cafe { max-width:1240px; margin:0 auto; padding:5rem 2rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.cafe-card { background:var(--cream); border-radius:1.2rem; padding:2rem; }
.cafe-card h4 { font-size:1.05rem; color:var(--mocha-dark); margin-bottom:.7rem; }
.cafe-card p { color:var(--ink-soft); font-size:.95rem; }
@media (hover: hover) { .cafe-card a:hover { color:var(--mocha); } }

/* Footer */
.site-footer { background:var(--ink); color:rgba(243,236,228,.85); }
.foot-inner { max-width:1240px; margin:0 auto; padding:2.5rem 2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.foot-inner .brand { color:#fff; font-size:1.5rem; }
.foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot-links a { font-size:.9rem; opacity:.85; }
@media (hover: hover) { .foot-links a:hover { color:var(--mocha); } }
.foot-copy { font-size:.82rem; opacity:.7; }

@media (max-width:980px){
  .drink-grid { grid-template-columns:repeat(2,1fr); }
  .promo { grid-template-columns:1fr; }
  .promo-text { padding-left:0; margin-left:0; }
  .promo-img img { height:360px; }
  .cafe { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .head-inner { grid-template-columns:auto 1fr auto; }
  .nav-links { display:none; position:absolute; top:100%; left:0; width:100%; flex-direction:column; gap:0; background:rgba(58,38,24,.97); padding:.5rem 2rem 1rem; }
  #siteHeader.nav-open .nav-links { display:flex; }
  .nav-links a { padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.15); text-align:center; }
  .mobile-menu-btn { display:flex; }
  .menu, .promo, .cafe { padding: 2.5rem 1.5rem; }
  .drink-grid { grid-template-columns:1fr 1fr; gap:1rem; }
  .cafe { grid-template-columns:1fr 1fr; }
  .foot-inner { flex-direction:column; text-align:center; }
}
@media (max-width:480px){ .drink-grid { grid-template-columns:1fr; } .cafe { grid-template-columns:1fr; } }


/* --- GLOBAL POLISH --- */
.ico {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.bullet-ico {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}
@media (hover: hover) {
  button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


@media (max-width: 480px) {
  .grid, .stats-grid, .serv-grid, .pricing-grid, .test-grid, .project-grid, .why-grid, .seller-grid, .cat-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-title .outline { -webkit-text-stroke: 1px currentColor; }

  /* Mobile UI Fixes from Reviewer */
  .hero { min-height: max(360px, 70svh) !important; max-height: none !important; }

  .hero-body { padding: 2rem 1.25rem 3rem; }
  .head-inner { padding: 0.8rem 1.25rem; gap: 0.5rem; }

  .menu-head { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
  .menu-head .btn { width: 100%; text-align: center; }
}

/* Global Mobile Header Nav Fix */
@media (max-width: 768px) {
  .head-inner, .header-inner, .nav-container, header > .container { justify-content: space-between !important; width: 100%; }
  .mobile-menu-btn { display: flex !important; margin-left: auto; }
}

@media (max-width: 480px) { .menu-grid, .menu-list { padding: 1rem !important; border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 8px; } }
@media (max-width: 768px) { .menu-grid, .menu-list { padding: 1rem !important; border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 8px; } }