:root{
      --bg:#fff; --text:#111; --muted:#666; --soft:#f2f2f2; --card:#fff; --ring:#0ea5e9;
      --shadow:0 10px 30px rgba(0,0,0,.08); --radius:14px; --gap:16px; --marquee-gap: 80rem;
      --accent:#111; --brand:#111;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button{font:inherit;cursor:pointer}
    /* Announcement bar (animated, pause on hover) */
    .announcement{background:#111;color:#fff}
    .marquee{--gap:var(--marquee-gap);position:relative;display:flex;gap:var(--gap);overflow:hidden;user-select:none}
    .marquee__content{flex-shrink:0;display:flex;gap:var(--gap);min-width:100%;list-style:none;margin:0;padding:10px 0;text-transform:uppercase;letter-spacing:.3px;font-size:13px}
    @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}
    .enable-animation .marquee__content{animation:scroll 40s linear infinite}
    .marquee:hover .marquee__content{animation-play-state:paused}
    @media (prefers-reduced-motion: reduce){.marquee__content{animation-play-state:paused !important}}
    /* Header / Navbar */
    .topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee;backdrop-filter:saturate(150%) blur(6px)}
    .nav{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:10px}
    .brand{display:flex;align-items:center;gap:8px}
    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);display:inline-block}
    .grow{flex:1}
    .search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e7e7e7;border-radius:999px;padding:8px 12px;max-width:520px}
    .search input{border:none;outline:none;flex:1;background:transparent}
    .actions{display:flex;align-items:center;gap:8px}
    .icon-btn{border:1px solid #e7e7e7;background:#fff;border-radius:999px;padding:8px 12px;display:flex;align-items:center;gap:8px}
    .icon-emoji{font-size:18px;line-height:1}
    .badge{position:relative}
    .badge:after{content:attr(value);position:absolute;top:-6px;right:-6px;background:#e11d48;color:#fff;border-radius:999px;font-size:11px;line-height:18px;min-width:18px;padding:0 6px;text-align:center}
    /* Mobile menu */
    .burger{display:none;border:1px solid #e7e7e7;background:#fff;border-radius:999px;padding:8px 12px}
    @media(max-width:760px){
      .search{display: none;}
      .burger{display:flex;margin-left:auto}
      .nav{flex-wrap:wrap}
      .actions{order:3;width:100%;justify-content:space-between}
    }
    /* Main layout */
    .wrap{max-width:1100px;margin:20px auto;padding:0 16px}
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;background:linear-gradient(180deg,#fff,#fafafa 70%);border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
    .hero h1{margin:0 0 8px 0}
    .hero p{margin:0;color:var(--muted)}
    .cta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
    .btn{border:none;border-radius:10px;padding:10px 14px;background:#111;color:#fff}
    .btn.outline{background:#fff;color:#111;border:1px solid #e7e7e7}
    @media(max-width:900px){.hero{grid-template-columns:1fr}}
    /* Sections */
    .section-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px 0;gap:10px;flex-wrap:wrap}
    .tabs{display:flex;gap:8px;flex-wrap:wrap}
    .tab{border:1px solid #e7e7e7;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px}
    .tab.active{background:#111;color:#fff;border-color:#111}
    .panel{display:none}
    .panel.active{display:block}
    /* Product grid */
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    @media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:420px){
      .grid{grid-template-columns:1fr}
      .media{height: 20rem;}
      }
    
    .card{background:var(--card);border:1px solid #eee;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
    .card .media{aspect-ratio:1/1;height: 20rem; background:#fafafa}
    .card .body{padding:12px;display:grid;gap:8px}
    .title{font-weight:700;font-size:14px;line-height:1.35}
    .meta{color:var(--muted);font-size:12px}
    .price-row{display:flex;align-items:center;justify-content:space-between}
    .price{font-weight:800}
    .actions-row{display:flex;gap:8px;flex-wrap:wrap}
    .small{padding:8px 10px;border-radius:9px;font-size:13px}
    .wish{border:1px solid #ffd1dc;background:#fff;color:#d61f69}
    /* Wishlist list */
    .list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media(max-width:880px){.list{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:560px){.list{grid-template-columns:1fr}}
    .list .item{display:flex;gap:12px;align-items:center;border:1px solid #eee;border-radius:12px;background:#fff;box-shadow:var(--shadow);padding:12px}
    .list .item img{width:64px;height:64px;border-radius:8px;border:1px solid #eee;object-fit:cover;background:#fafafa}
    /* Cart drawer */
    .cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:99}
    .cart-overlay.is-open{opacity:1;visibility:visible}
    .cart-drawer{position:fixed;top:0;right:0;width:min(92vw,420px);height:100vh;background:#fff;color:#111;box-shadow:-8px 0 24px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s ease-in-out;display:grid;grid-template-rows:auto 1fr auto;z-index:100}
    .cart-drawer.is-open{transform:translateX(0)}
    .cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #eee;background:#fff}
    .cart-items{padding:12px;overflow:auto;background:#fff}
    .cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0}
    .cart-item-thumb{width:64px;height:64px;border:1px solid #eee;border-radius:8px;object-fit:cover;background:#fafafa}
    .cart-item-title{font-size:14px;font-weight:700}
    .cart-item-meta{font-size:12px;color:#666}
    .cart-item-actions{display:grid;gap:6px;justify-items:end}
    .qty-control{display:inline-grid;grid-auto-flow:column;gap:6px;align-items:center;border:1px solid #ddd;border-radius:999px;padding:4px 8px;background:#fff}
    .qty-btn{width:24px;height:24px;border:none;background:#f3f3f3;border-radius:50%}
    .qty-input{width:40px;text-align:center;border:none;background:transparent;outline:none}
    .remove-btn{border:none;background:transparent;color:#d33;font-size:12px}
    .cart-footer{border-top:1px solid #eee;padding:12px 16px 16px;background:#fff}
    .row{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
    /* Account modal simple (optional) */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.25s ease;z-index:70}
    .modal-overlay.open{opacity:1;visibility:visible}
    .modal{position:fixed;inset:0;display:none;place-items:center;z-index:71}
    .sheet{width:min(92vw,440px);background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:var(--shadow);padding:16px}
    .field{display:grid;gap:6px;margin:10px 0}
    .field input{padding:10px 12px;border:1px solid #e7e7e7;border-radius:10px;outline:none}
    .field input:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgba(14,165,233,.15)}
    /* Footer */
    .footer{margin-top:40px;background:#fff;border-top:1px solid #eee}
    .footer .inner{max-width:1100px;margin:0 auto;padding:20px 16px;display:grid;gap:12px;color:#555}
    .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
    @media(max-width:820px){.cols{grid-template-columns:1fr}}
    .muted{color:var(--muted)}

    .card-categories{
      display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;

      
    }

   @media(max-width:1000px){.card-categories{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:720px){.card-categories{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:420px){
      .card-categories{grid-template-columns:1fr}}

   .main-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ebebeb;
    border: 1px solid #e7e7e7;
    border-radius: 0.5rem;
    box-shadow: 1px 5px 5px  #11111154;
    padding-bottom: 1rem;
    cursor: pointer;
   }
   .main-card img:hover{
    transform: scale(1.05);
    transition-duration: 0.8s;
    
   }

   .main-card span{
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
   }
  
   .main-card button{
    padding: 0.2rem 0.9rem 0.3rem 0.9rem;
   }