:root{
      --bg:#0f0f0f; --panel:#131313; --muted:#bdb6b0; --accent:#d99a4a; --card:#1f1b19; --glass:rgba(255,255,255,0.03);
      --max-width:1200px; --gap:18px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%; margin:0; background:#0b0b0b; color:var(--muted)}

    /* outer frame to match the rounded device look in the image */
    .frame{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px}
    .card{width:100%; max-width:1200px; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.7); background:linear-gradient(180deg,#0b0b0b,#0f0f0f)}

    /* hero area (uses provided image exactly) */
    .hero{display:grid; grid-template-columns: 1fr 460px; gap:0; align-items:center; min-height:420px; position:relative}
    .hero-left{padding:56px 64px 56px 64px}
    .logo{display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700}
    .hero h1{color:#fff; font-size:34px; margin:18px 0 12px}
    .hero p.lead{color:var(--muted); max-width:380px; line-height:1.6}
    .cta{display:inline-block; margin-top:18px; background:var(--accent); color:#111; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none}
    .meta{margin-top:22px; color:var(--accent); font-weight:600; }
    

    .hero-right{position:relative; background:#000; min-height:420px; display:flex; align-items:center; justify-content:center}
    .hero-bg{position:absolute; inset:0; background-image:url('img/gl.png'); background-position:center; background-size:cover; filter:grayscale(.06) contrast(.9); border-radius: 50px;}
    .hero-art{position:relative; z-index:2; width:320px; height:320px; display:grid; place-items:center}
    .hero-art video{width:320px; height:320px; object-fit:cover; border-radius:50%; box-shadow:0 30px 60px rgba(0,0,0,0.6); border:8px solid rgba(0,0,0,0.45)}

    /* watermark text on hero right like design */
    .wm{position:absolute; right:14px; top:16px; color:rgba(255,255,255,0.03); font-weight:900; font-size:96px; transform:rotate(0);} 

    /* customers favorites heading */
    .section{padding:36px 56px}
    .section h2{color:var(--accent); text-align:center; margin:6px 0 18px; letter-spacing:2px}

    /* product grid */
    .grid{display:grid; grid-template-columns: repeat(4,1fr); gap:20px; padding:10px 8px 36px}
    .card-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.12)); padding:18px; border-radius:10px; position:relative; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.6)}
    .thumb{width:100%; height:120px; display:grid; place-items:center;}
    .thumb img{width:100px; height:100px; object-fit:cover; border-radius:10px}
    .item-title{color:#fff; font-weight:700; margin-top:12px}
    .item-meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
    .price{font-weight:800}
    .add-btn{background:var(--accent); color:#111; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:800}
    .weight{color:var(--muted); font-size:13px}

    /* highlight card (middle one) */
    .card-item.highlight{background:linear-gradient(180deg, rgba(217,154,74,0.9), rgba(217,154,74,0.85)); color:#111}
    .card-item.highlight .item-title, .card-item.highlight .price{color:#111}

    /* tooltip for ingredients */
    .tooltip{position:absolute; left:50%; top:12px; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:var(--muted); padding:10px 12px; border-radius:8px; font-size:13px; display:none; max-width:200px}
    .card-item:hover .tooltip{display:block}

    /* view all button */
    .view-all{display:block; margin:0 auto 28px; background:var(--accent); color:#111; width:140px; text-align:center; padding:10px; border-radius:8px; font-weight:800; cursor: pointer;}

    /* cart floating button */
    .cart-btn{position:fixed; right:30px; bottom:30px; background:var(--accent); color:#111; border:none; padding:12px 14px; border-radius:10px; font-weight:800; box-shadow:0 14px 30px rgba(0,0,0,0.5); cursor:pointer}

    /* cart modal */
    .cart-modal{position:fixed; right:30px; bottom:90px; width:340px; max-height:70vh; overflow:auto; background:linear-gradient(180deg,#121212,#171717); border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.6); padding:18px; display:none ; z-index:9999;}
    .cart-modal.visible{display:block}
    .cart-item{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.03)}
    .cart-item img{width:56px;height:56px; border-radius:8px; object-fit:cover;}
    .cart-item .info{flex:1}
    .qty-controls{display:flex; gap:8px; align-items:center}
    .icon-btn{background:transparent;border:1px solid rgba(255,255,255,0.06); padding:6px 8px; border-radius:6px; color:var(--muted); cursor:pointer}
    .checkout{display:block; margin-top:12px; background:var(--accent); color:#111; padding:10px; border-radius:8px; text-align:center; font-weight:800}

    /* responsive */
    @media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} .hero{grid-template-columns:1fr 380px} }
    @media (max-width:820px){ .grid{grid-template-columns:repeat(2,1fr)} .hero{grid-template-columns:1fr 300px} .hero-left{padding:34px} }
    @media (max-width:540px){ .grid{grid-template-columns:1fr} .hero{grid-template-columns:1fr; min-height:360px} .hero-right{order:-1; min-height:220px} .hero-left{padding:18px} .hero-art img{width:220px; height:220px} .wm{display:none} .card{border-radius:12px} }