:root{
      --accent:#e91e63; --accent-600:#d81b60; --bg:#f6f7fb; --card:#ffffff; --muted:#6b6b79;
      --text:#111827; --shadow-sm:0 6px 18px rgba(15,23,42,0.06); --shadow-lg:0 18px 40px rgba(15,23,42,0.12);
      --radius:12px; --max-width:1180px; --trans:220ms cubic-bezier(.2,.9,.2,1);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      background:var(--bg); color:var(--text); line-height:1.45; -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale; padding-bottom:80px;
    }
    .container{width:92%;max-width:var(--max-width);margin:0 auto}
    .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

    /* ---------- Header ---------- */
    .promo-bar{background:linear-gradient(90deg,#fff5f8,#fff8fb);border-bottom:1px solid rgba(0,0,0,0.03);padding:6px 0;font-size:14px}
    .promo-text{color:#6b2b3a;font-weight:600}

    .site-header{
      position:sticky; top:0; z-index:300;
      background:linear-gradient(90deg,#13db88,#b41183);
      backdrop-filter: blur(6px);
      transition: box-shadow .22s, backdrop-filter .22s, padding .18s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      width:100%;
      max-width:var(--max-width);
      margin:0 auto;
    }

    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      text-decoration:none;
      color:inherit;
    }
    .brand img{width:64px;height:64px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm)}
    .brand .title{font-weight:900;color:#fff}
    .brand .tag{font-size:12px;color:rgba(255,255,255,0.9)}

    .nav-wrap{display:flex;align-items:center;gap:12px;width:100%;justify-content:space-between}

    .primary-nav{display:flex;gap:8px;align-items:center}
    .nav-link{color:#fff;text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600;position:relative}
    .nav-link::after{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-600));border-radius:6px;transform:scaleX(0);transform-origin:left center;transition:transform .2s,opacity .2s;opacity:0}
    .nav-link:hover::after,.nav-link:focus::after{transform:scaleX(1);opacity:1}

    .has-dropdown{position:relative}
    .dropdown{
      position:absolute; top:calc(100% + 8px); left:0;
      background:var(--card); color:var(--text);
      min-width:180px; padding:8px; border-radius:10px; box-shadow:var(--shadow-lg); display:none; flex-direction:column; gap:6px; z-index:50;
    }
    .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{display:flex}
    .dropdown a{padding:8px;border-radius:8px;text-decoration:none;color:var(--text)}
    .dropdown a:hover{background:#f6f7fb}

    .header-tools{display:flex;align-items:center;gap:10px}

    .search-compact{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);padding:6px 8px;border-radius:10px}
    .search-compact input{border:0;outline:none;background:transparent;color:#fff;min-width:220px;padding:6px;font-size:14px}
    .search-compact button{border:0;background:transparent;color:#fff;cursor:pointer;font-size:16px}

    .cart-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:#fff;cursor:pointer}
    .cart-count{background:#fff;color:var(--accent);font-weight:800;padding:3px 8px;border-radius:999px;font-size:13px}

    .nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;padding:8px;border-radius:8px;cursor:pointer}

    /* ---------- Mobile Navigation (slide) ---------- */
    .mobile-nav{
      position:fixed; top:0; right:-100%; width:280px; height:100%; background:var(--card); box-shadow: -10px 0 30px rgba(0,0,0,0.12);
      transition: right .28s ease; z-index:400; padding:18px;
      display:flex; flex-direction:column; gap:14px;
    }
    .mobile-nav.open{right:0}
    .mobile-nav .close-mobile{align-self:flex-end;background:transparent;border:0;font-size:22px}
    .mobile-links{display:flex;flex-direction:column;gap:8px}
    .mobile-links a{padding:10px;border-radius:8px;text-decoration:none;color:var(--text);background:#fff}

    /* ---------- Page core ---------- */
    .hero{margin:16px 0;text-align:center}
    .hero img{width:100%;height:auto;border-radius:var(--radius);display:block;box-shadow:var(--shadow-sm)}
    .site-title{color:var(--accent);font-size:30px;margin-top:12px;font-weight:800}
    .site-sub{color:var(--muted);margin-top:6px}

    .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0;flex-wrap:wrap}
    .search{display:flex;align-items:center;gap:8px;background:var(--card);padding:8px;border-radius:10px;box-shadow:var(--shadow-sm);width:100%;max-width:680px}
    .search input{border:0;outline:none;padding:8px;font-size:15px;width:100%}
    .filters{display:flex;gap:10px;align-items:center}
    select{padding:8px;border-radius:8px;border:1px solid #eee;background:#fff;cursor:pointer}

    .product-container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
    .product{background:var(--card);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);transition:transform var(--trans),box-shadow var(--trans);position:relative;overflow:hidden}
    .product.revealed{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
    .product img{width:100%;height:220px;object-fit:cover;border-radius:8px;display:block}
    .product h3{font-size:15px;margin-top:6px}
    .meta{font-size:13px;color:var(--muted)}
    .price{color:var(--accent);font-weight:700}
    .actions{display:flex;gap:8px;align-items:center;margin-top:auto}
    .btn{background:var(--accent);color:#fff;border:0;padding:10px 12px;border-radius:999px;cursor:pointer;font-weight:700}
    .btn.secondary{background:#fff;color:var(--accent);border:1px solid #f2d1db}
    .btn.small{padding:6px 8px;font-size:14px}
    .quick-view{position:absolute;top:12px;right:12px;background:rgba(0,0,0,0.55);color:#fff;padding:6px;border-radius:8px;border:0;cursor:pointer}

    /* overlay, drawer, modal, toast */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);opacity:0;visibility:hidden;transition:opacity .18s;z-index:380}
    .overlay.open{opacity:1;visibility:visible}
    .cart-drawer{position:fixed;right:16px;top:10vh;width:360px;max-width:calc(100% - 32px);background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow-lg);transform:translateX(18px);opacity:0;transition:all var(--trans);z-index:390}
    .cart-drawer.open{transform:translateX(0);opacity:1}
    .cart-items{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-right:6px}
    .cart-item{display:flex;gap:10px;align-items:center}
    .cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
    .cart-item .cinfo{flex:1}
    .cart-item .cinfo h5{font-size:14px}
    .qty-input{display:flex;gap:6px;align-items:center}
    .qty-input button{padding:6px;border-radius:8px;border:0;background:#f3f4f6;cursor:pointer}
    .cart-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-weight:800;font-size:16px}

    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:400}
    .modal-overlay.open{display:flex}
    .modal{width:min(920px,96%);max-height:90vh;background:var(--card);border-radius:12px;padding:16px;overflow:auto;box-shadow:var(--shadow-lg);position:relative}
    .modal .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .modal img{width:100%;height:auto;border-radius:8px;object-fit:cover}
    .modal .close{position:absolute;top:12px;right:12px;border:0;background:transparent;font-size:20px;cursor:pointer}

    .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#111;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;visibility:hidden;transition:all .18s;z-index:450}
    .toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-4px)}

    /* checkout form */
    .checkout-form{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
    .checkout-form label{font-size:13px;color:var(--muted);margin-bottom:6px}
    .checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="tel"], .checkout-form textarea{
      width:100%;padding:10px;border-radius:8px;border:1px solid #eee;font-size:14px
    }
    .checkout-form textarea{min-height:84px;resize:vertical}

    footer{background:#0b0b0b;color:#fff;padding:28px 0;margin-top:28px}
    footer img{width:36px;height:36px;filter:brightness(0) invert(1)}

    /* responsive breakpoints (mobile-first) */
    @media (max-width:1100px){ .product-container{grid-template-columns:repeat(3,1fr)} .modal .grid{grid-template-columns:1fr} }
    @media (max-width:820px){
      .product-container{grid-template-columns:repeat(2,1fr)}
      .primary-nav{display:none}
      .nav-toggle{display:inline-block}
      .search-compact input{min-width:120px}
      .brand img{width:56px;height:56px}
      .site-header{padding:8px 0}
      .header-inner{padding:8px 0}
    }
    @media (max-width:520px){
      .product-container{grid-template-columns:repeat(1,1fr);gap:12px}
      .hero img{border-radius:10px}
      .brand img{width:48px;height:48px}
      .site-title{font-size:22px}
      .search-compact input{min-width:90px}
      .cart-drawer{right:8px;left:8px;width:auto;top:8vh}
      .mobile-nav{width:86%}
      .nav-toggle{font-size:20px;padding:6px}
      .header-inner{gap:8px}
    }

    /* small nice touches */
    button:focus, a:focus { outline:3px solid rgba(233,30,99,0.18); outline-offset:3px; }