/*******************************
     * VARIABLES & RESET
     *******************************/
    :root{
      --bg:#060507;                   /* deep background */
      --panel:#0f1011;                /* panels */
      --muted: rgba(255,255,255,0.72);/* muted text */
      --cakery-gold: #FA7A2B;         /* cakery gold accent (you asked) */
      --accent-2:#FA7A2B;
      --glass-border: rgba(255,255,255,0.06);
      --glass: rgba(255,255,255,0.03);
      --radius: 12px;
      --max-width:1200px;
      --ease: cubic-bezier(.2,.9,.2,1);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      min-height:100vh;
      color:#fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.35;
      background:
        /* pastry pattern (pure CSS SVG data-uri overlay) */
        radial-gradient(700px 240px at 15% 10%, rgba(245,213,128,0.03), transparent 6%),
        linear-gradient(180deg,#050506 0%, #0b0b0c 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%232a1f16' opacity='0.03'><path d='M45 30c10-12 34-12 44 0 3 4 5 8 5 12s-2 8-6 11c-10 8-30 8-40 0-4-3-7-7-7-11s2-8 4-12z'/><path d='M155 130c-10 12-34 12-44 0-3-4-5-8-5-12s2-8 6-11c10-8 30-8 40 0 4 3 7 7 7 11s-2 8-4 12z'/></g></svg>") repeat;
      background-blend-mode:overlay,overlay,normal;
      padding-bottom:100px;
      font-size:15px;
    }
    a{text-decoration:none}
    img{max-width:100%;display:block;object-fit: cover;}
    video{max-width:auto; height:100%;display:block;object-fit:cover}

    /*******************************
     * HEADER
     *******************************/
    header{
      position:sticky;top:0;z-index:120;
      background:linear-gradient(180deg, rgba(8,8,8,0.6), rgba(8,8,8,0.35));
      border-bottom:1px solid rgba(255,255,255,0.03);
      backdrop-filter: blur(6px);
    }
    .nav{
      max-width:var(--max-width);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    }
    .brand{display:flex;align-items:center;gap:12px}
    .logo{
      width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#FA7A2B,#FA7A2B);
      display:flex;align-items:center;justify-content:center;font-weight:900;color:#2b1e12;box-shadow:0 10px 36px rgba(245,213,128,0.12)
    }
    nav.desktop{display:flex;gap:18px;align-items:center}
    nav.desktop a{color:var(--muted);padding:8px 12px;border-radius:10px;font-weight:700}
    nav.desktop a:hover{background:rgba(255,255,255,0.02)}
    .controls{display:flex;gap:12px;align-items:center}
    .btn{padding:9px 12px;border-radius:10px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));color:var(--muted);cursor:pointer;font-weight:800}
    .btn.primary{background:linear-gradient(180deg,var(--cakery-gold),var(--accent-2));color:#23180f;border:none;box-shadow:0 10px 30px rgba(180,139,74,0.12)}
    .cart-btn{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:999px;border:1px solid var(--glass-border)}
    .cart-count{background:#111;color:var(--cakery-gold);padding:6px 8px;border-radius:999px;font-weight:900;font-size:13px;border:1px solid rgba(255,255,255,0.02)}
    .burger{display:none}

    /*******************************
     * MAIN / HERO
     *******************************/
    main{max-width:var(--max-width);margin:28px auto;padding:0 20px}
    .hero{display:grid;grid-template-columns:1fr 460px;gap:0;align-items:center;margin-bottom:20px}
    .eyebrow{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:2px;margin-bottom:8px}
    h1{font-size:44px;line-height:1;margin-bottom:12px;font-weight:900;background:linear-gradient(90deg,#fff,#f6e9d8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 12px 36px rgba(245,213,128,0.06))}
    .lead{color:var(--muted);max-width:560px;margin-bottom:14px}
    .cta-row{display:flex;gap:12px;margin-top:6px}
    
    .hero-right{
      height:420px;border-radius:18px;overflow:hidden;border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));box-shadow:0 22px 70px rgba(0,0,0,0.6);
      transform-origin:center;animation:heroIn .9s var(--ease) both 120ms;
    }
    @keyframes heroIn{from{transform:scale(1.02);opacity:0}to{transform:none;opacity:1}}
    .hero-caption{margin-top:10px;color:var(--muted);font-weight:600}



    /*******************************
     * PRODUCTS
     *******************************/
    .section{margin-top:14px;padding:20px 0}
    .section .title{text-align:center;font-weight:900;font-size:20px;margin-bottom:14px}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
      border-radius:14px;padding:14px;border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:12px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)
    }
    .card img{width:100%;height:180px;border-radius:10px;object-fit:cover}
    .card h3{font-size:18px;font-weight:800}
    .card p{color:var(--muted);font-size:14px;flex-grow:1}
    .card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.6)}
    .thumb{height:170px;border-radius:10px;overflow:hidden;background:#111}
    .meta{display:flex;justify-content:space-between;align-items:center}
    .price{color:var(--cakery-gold);font-weight:900}

    /*******************************
     * CART PANEL
     *******************************/
    .cart-panel{
      position:fixed;right:20px;bottom:20px;width:420px;max-width:92vw;background:linear-gradient(180deg,#0b0b0c,#0a0a0b);
      border-radius:14px;border:1px solid var(--glass-border);box-shadow:0 28px 90px rgba(0,0,0,0.6);transform:translateY(120%);transition:transform .36s var(--ease),opacity .18s;opacity:0;z-index:140;overflow:hidden;
    }
    .cart-panel.open{transform:translateY(0);opacity:1}
    .cart-panel.bottom{left:0;right:0;width:100%;border-radius:14px 14px 0 0}
    .cart-panel header{padding:14px 16px;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}
    .cart-list{max-height:360px;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
    .cart-item{display:flex;gap:12px;align-items:center}
    .cart-item img{width:72px;height:72px;border-radius:10px;object-fit:cover}
    .qty{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px;background:var(--glass);border:1px solid var(--glass-border)}
    .cart-footer{padding:14px 16px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:12px}
    .order-now{padding:12px;border-radius:12px;border:none;background:linear-gradient(180deg,var(--cakery-gold),var(--accent-2));color:#23180f;font-weight:900;cursor:pointer}

   /* ---------- ABOUT SECTION ---------- */
    .about{
      margin-top:34px;padding:28px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));border:1px solid var(--glass-border);
      display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:center;
    }
    .about .story{color:var(--muted);line-height:1.6}
    .baker-card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.006));
      border-radius:12px;padding:16px;border:1px solid var(--glass-border);display:flex;gap:12px;align-items:center;
    }
    .baker-card img{width:80px;height:80px;border-radius:12px;object-fit:cover;flex-shrink:0}

   

    /*******************************
     * CONFIRMATION MODAL
     *******************************/
    .modal-backdrop{position:fixed;inset:0;background:rgba(2,2,2,0.6);display:none;align-items:center;justify-content:center;z-index:140}
    .modal-backdrop.open{display:flex}
    .modal{width:700px;max-width:94vw;border-radius:14px;background:linear-gradient(180deg,#0c0c0d,#0a0a0a);border:1px solid var(--glass-border);padding:18px;box-shadow:0 30px 120px rgba(0,0,0,0.7)}
    .order-preview{max-height:300px;overflow:auto;padding:8px;border-radius:10px;border:1px solid var(--glass-border);margin-bottom:10px}
    .modal input,.modal textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--glass-border);background:transparent;color:#fff}


    /*******************************
     * TOASTS (slide in from bottom corner)
     *******************************/
    .toaster{
      position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:1000;align-items:flex-end;
      pointer-events:none; /* to allow clicks through when empty */
    }
    .toast{
      min-width:260px;max-width:420px;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:4px solid var(--cakery-gold);
      box-shadow:0 12px 40px rgba(0,0,0,0.6);color:#fff;font-weight:700;pointer-events:auto;display:flex;align-items:center;gap:10px;transform:translateY(24px);opacity:0;
      transition:transform .36s var(--ease),opacity .28s var(--ease);
    }
    .toast.show{transform:translateY(0);opacity:1}
    .toast.success{border-left-color:var(--cakery-gold)}
    .toast.info{border-left-color:#7ec8ff}
    .toast.error{border-left-color:#ff8b8b}
    .toast .msg{font-weight:700}
    .toast .small{font-weight:500;color:var(--muted);font-size:13px}

    /*******************************
     * FOOTER & RESPONSIVE
     *******************************/
    footer{margin-top:34px;padding:28px 20px;text-align:center;color:var(--muted);font-size:13px}
    /* ---------- RESPONSIVE ---------- */
    @media (max-width:1100px){ .hero{grid-template-columns:1fr 380px} .cards{grid-template-columns:repeat(2,1fr)} .about{grid-template-columns:1fr} .baker-card{justify-content:flex-start} }
    @media (max-width:820px){
        .hero{grid-template-columns:1fr}.h1{font-size:36px}.cta-row{flex-direction:column;align-items:flex-start}.cards{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr}
        .nav.desktop{display:none}.burger{display:inline-flex}.hero-right{height:320px}.cards{grid-template-columns:1fr}.cart-panel{right:10px;width:92vw}.modal{width:92vw}
      .form-grid{grid-template-columns:1fr}
    }
    @media (max-width:520px){
        .hero{grid-template-columns:1fr}
      .hero-right{height:240px}.h1{font-size:28px}.cart-panel{right:8px;left:8px}.cart-panel.open{transform:translateY(0)}.cart-item img{width:64px;height:64px}
    }