:root{
      --bg:#0f0f0f;            /* Deep charcoal */
      --panel:#141414;         /* Panel background */
	  --tile:#131313;          /* Tile background */
      --muted:#777;
      --text:#f3f3f3;
      --brand:#c58b4e;         /* Coffee gold */
      --brand-2:#6b4f3a;       /* Espresso brown */
      --accent:#e6d2b1;        /* Latte foam */
      --max:1200px;
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;scroll-behavior:smooth;transition:0.3s}
    img{max-width:100%;display:block}.tile img{min-height:200%;object-fit:cover}
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}
	header a:hover{text-decoration:none}

    /* Layout */
    .container{max-width:var(--max);margin-inline:auto;padding:0 20px}
    header{position:sticky;top:0;background:rgba(15,15,15,.8);backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid #222}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
    .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
    .logo .mark{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:10px;box-shadow:var(--shadow)}
    .logo span{font-size:1.05rem}
    nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
    nav a{color:#ddd;font-weight:600;position:relative}
	nav a::after{content:'';position:absolute;left:0;bottom:-0.3rem;width:0%;height:2px;background-color:var(--brand);transition:all .3s}
	nav a:hover::after{width:100%}
	input:focus-visible{outline: solid 1px var(--brand-2)}

    .menu-btn{display:none;background:#222;border:0;color:#fff;padding:10px 12px;border-radius:12px}
    @media (max-width: 860px){
      nav ul{display:none}
      .menu-btn{display:inline-block}
      .mobile-nav{display:none;position:absolute;inset:64px 0 auto 0;background:#0f0f0f;border-bottom:1px solid #222}
      .mobile-nav.open{display:block}
      .mobile-nav a{display:block;padding:14px 24px;border-top:1px solid #1f1f1f;color:#ddd}
    }
	@media (min-width: 860px){.mobile-nav{display:none !important}}

    /* Hero */
    .hero{position:relative;isolation:isolate}
    .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;border-bottom-left-radius:40px;border-bottom-right-radius:40px}
    .hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
    .hero-overlay{position:absolute;inset:0;background:radial-gradient(80% 60% at 60% 40%, rgba(197,139,78,.25), transparent 60%)}
    .hero .container{padding:80px 20px 140px}
    .kicker{color:var(--accent);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem}
    .hero h1{font-size:clamp(2rem,6vw,3.6rem);line-height:1.1;margin:.4em 0 .2em}
    .hero p{max-width:650px;color:#ddd;font-size:1.1rem}
    .cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:7px;padding:12px 18px;border-radius:14px;border:1px solid transparent;background:var(--brand);color:#131313;font-weight:800;box-shadow:var(--shadow);cursor:pointer}
    .btn:hover{filter:brightness(1.08);text-decoration:none}
    .btn.secondary{background:transparent;color:#eee;border-color:#333;cursor:pointer}
	.btn.secondary:hover{background:linear-gradient(135deg,var(--brand),var(--brand-2))}

    /* Highlights */
    .highlights{margin-top:-80px}
    .card-row{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .card{grid-column:span 4;background:var(--panel);padding:18px;border-radius:var(--radius);border:1px solid #1f1f1f;box-shadow:var(--shadow)}
    .card:hover, .card:focus-within{box-shadow: 0 6px 20px rgba(235, 148, 37, 0.15);outline:none;transition:1s}
	.card h3{margin:.3em 0}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#1e1e1e;border:1px solid #2a2a2a;color:#cfcfcf;font-size:.82rem;text-align:center}
    @media (max-width: 860px){.card{grid-column:1/-1}}

    /* Menu section */
    section{padding:70px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:22px}
    .section-head h2{font-size:clamp(1.6rem,4vw,2.2rem);margin:0}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .tile{grid-column:span 3;background:var(--tile);border:1px solid #1e1e1e;border-radius:16px;overflow:hidden}
    .tile .img{aspect-ratio:4/3;background:#222}
    .tile .body{padding:14px 14px 16px}
    .price{color:var(--accent);font-weight:800}
    .actions{display:flex;gap:10px;margin-top:10px}
    @media (max-width: 1000px){.tile{grid-column:span 4}}
    @media (max-width: 700px){.tile{grid-column:1/-1}}

    /* Daily Roast */
    .feature{display:grid;grid-template-columns:5fr 7fr;gap:24px;background:linear-gradient(180deg,#141414,#101010);padding:22px;border-radius:20px;border:1px solid #202020}
    .feature img{border-radius:14px}
    .badge{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#111;padding:6px 10px;border-radius:999px;font-weight:800;display:inline-block}
    @media (max-width: 900px){.feature{grid-template-columns:1fr}}

    /* Builder */
    .builder{display:grid;grid-template-columns:6fr 6fr;gap:28px}
    .panel{background:var(--tile);border:1px solid #1e1e1e;border-radius:16px;padding:18px}
    .field{margin:12px 0}
    .field label{display:block;font-weight:700;margin-bottom:6px}
    select, input[type="number"], input[type="text"]{width:100%;background:#111;color:#eee;border:1px solid #242424;border-radius:12px;padding:10px}
    .totals{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
    .price-lg{font-size:1.8rem;font-weight:900;color:var(--accent)}
    @media (max-width: 920px){.builder{grid-template-columns:1fr}}

    /* Location */
    .location{display:grid;grid-template-columns:6fr 6fr;gap:24px}
    .map{aspect-ratio:4/3;border:0;border-radius:16px;overflow:hidden;filter: grayscale(70%)invert(96%)}
    .list{margin:0;padding-left:1.2em}
    @media (max-width: 920px){.location{grid-template-columns:1fr}}

    /* Footer */
    footer{border-top:1px solid #222;background:#0d0d0d;padding:30px 0;color:#bbb}
    .foot{display:grid;grid-template-columns:7fr 5fr;gap:18px}
    .credit{font-size:.9rem;color:#888}
    @media (max-width: 860px){.foot{grid-template-columns:1fr}}
    
	/* Floating Cart */
    .floating-cart-btn{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:10px;background:var(--brand);color:#111;padding:12px 16px;border-radius:999px;border:1px solid #333;box-shadow:var(--shadow);cursor:pointer}
    .floating-cart-btn .count{min-width:22px;height:22px;border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
    .floating-cart-panel{position:fixed;right:20px;bottom:80px;width:360px;max-height:60vh;overflow:auto;background:#121212;border:1px solid #222;border-radius:16px;box-shadow:var(--shadow);z-index:70;display:none}
	.floating-cart-panel.open{display:block}
    .floating-cart-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #222}
    .floating-cart-items{padding:12px}
    .floating-cart-items .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #222;border-radius:12px;margin-bottom:8px}
    .floating-cart-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid #222}

    /* Mobile: convert to modal */
    @media (max-width: 700px){
      .floating-cart-panel{inset:auto 0 0 0; width:auto; max-height:60vh; border-radius:16px 16px 0 0; right:0; left:0; bottom:0}
      .floating-cart-btn{right:16px; bottom:16px}
    }
	
	/* TopBtn */
	#topBtn{display:none;position:fixed;bottom:80px;right:20px;z-index:10;font-size:16px;outline:none;background-color:transparent;color:#eee;cursor:pointer;padding:15px;border-radius:15px;border:1px solid transparent;border-color:#333;backdrop-filter:blur(1px);box-shadow:var(--shadow)}
	#topBtn:hover{color: black;background:var(--brand);border:1px solid #333;filter:brightness(1.08)}
	#topBtn .icon{width:1em;height: 1em;vertical-align:-0.125em}
	
	/* ToggleBtn */
	.coffee{font-size:0.27rem;appearance:none;position:relative;width:10em;height:5em;border-radius:20em;cursor:pointer;transform:rotate(1deg);
	  &::before{content:"";width:7em;aspect-ratio:1;position:absolute;border-radius:50%;top:50%;left:23%;transform:translate(-50%, -50%) rotate(0);background-image:linear-gradient(#210 0 0),radial-gradient(farthest-side, #0000 90%, #fff 0 99%, #0000),radial-gradient(farthest-side, #642 99%, #0000),radial-gradient(farthest-side, #210 99%, #0000),radial-gradient(farthest-side, #ddd 99%, #0000),linear-gradient(#fff 0 0),radial-gradient(farthest-side, #fff 99%, #0000),radial-gradient(farthest-side, #ddd 99%, #0000),radial-gradient(farthest-side, #0000 60%, #fff 0 99%, #0000);background-repeat:no-repeat;background-position:50% 50%,50% 50%,50% 50%,53% 50%,54.5% 24.5%,55% 27.5%,55% 20%,45% 15%,50% 50%;background-size:2% 50%,120% 120%,44% 60%,44% 60%,0 0, 0 0, 0 0, 0 0, 0 0;transition:all 0.75s}
	  &:checked{&::before{left:77%;transform:translate(-50%, -50%) rotate(360deg);background-position:50% 50%,55% 35%,55% 39%,55% 39%,55% 35%,55% 55%,55% 71.5%,55% 77%,15% 55%;background-size:0 0,55% 25%,48% 20%,0% 0%,54.5% 24.5%,55% 27.5%,55% 20%,45% 15%,25% 20%;background-color:#963}}
	  &[disabled]{opacity:0.25}}
	@media print{.coffee{&, &::before, &::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}}}
	@media (prefers-reduced-motion){.coffee, .coffee::before, .coffee::after{transition:none !important;animation:none !important}}
	
	body.darkmode{background:#963;transition: 0.3s}
	body.darkmode .map{filter:grayscale(0)invert(0)}
	
	:focus-visible{box-shadow:0 10px 30px #fff;outline:none}