:root{
      --bg:#f7fafc;            /* light theme background */
      --card:#ffffff;          /* card background */
      --text:#1f2937;          /* primary text */
      --sub:#6b7280;           /* secondary text */
      --brand:#4d94ff;         /* accent green */
      --brand-2:#0ea5e9;       /* accent blue */
      --muted:#e5e7eb;         /* borders */
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      --radius: 18px;
      --header-h: 56px;
      --toolbar-h: 54px; /* filters/search bar */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      padding-left: 0px;
      padding-right: 0px;
      font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      background:var(--bg);
      color:var(--text);
      -webkit-tap-highlight-color: transparent;
    }

    /* Header */
    .site-header{
      position:sticky; top:0; z-index:50;
      height:var(--header-h);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 16px;
      backdrop-filter:saturate(180%) blur(8px);
      background:rgba(255,255,255,.8);
      border-bottom:1px solid var(--muted);
    }
    .brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.2px}
    .brand .logo{width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg,#fde68a,#ef4444 60%,#fb7185); box-shadow:var(--shadow); position:relative}
    .brand .logo:after{content:"ॐ"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff}
    .actions{display:flex; align-items:center; gap:10px}
    .pill{border:1px solid var(--muted); background:#fff; padding:8px 12px; border-radius:999px; font-size:12px}

    /* Toolbar: search + filters */
    .toolbar{
      position:sticky; top:var(--header-h); z-index:40; height:var(--toolbar-h);
      display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
      padding:10px 14px; background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.7)); border-bottom:1px solid var(--muted);
    }
    .search{
      display:flex; align-items:center; gap:10px; background:#fff; padding:10px 12px; border:1px solid var(--muted); border-radius:999px;
    }
    .search input{border:none; outline:none; width:100%; font-size:14px; background:transparent}
    .filters{display:flex; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch}
    .chip{white-space:nowrap; border:1px solid var(--muted); background:#fff; padding:8px 12px; border-radius:999px; font-size:12px; cursor:pointer; user-select:none}
    .chip.active{background:var(--text); color:#fff; border-color:transparent}

    /* Grid: ensure 2x2 visible above the fold on phones (>=4 cards without scrolling) */
    .grid-wrap{
      /* full viewport minus header+toolbar => first 4 cards are visible without scroll */
      min-height: calc(100vh - var(--header-h) - var(--toolbar-h));
      padding: 12px 14px 80px; /* bottom space for CTA */
    }
    .grid{
      display:grid; gap:12px;
      grid-template-columns: repeat(1, minmax(0,1fr));
    }
    @media(min-width:768px){
      .grid{grid-template-columns: repeat(3, minmax(0,1fr));}
    }
    @media(min-width:1024px){
      .grid{grid-template-columns: repeat(4, minmax(0,1fr));}
    }

    /* Card */
    .card{
      background:var(--card); border:1px solid var(--muted); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
      display:flex; flex-direction:column; position:relative; transition:transform .2s ease;
    }
    .card:hover{transform:translateY(-2px)}
    .thumb{position:relative; aspect-ratio:3/4; background:#f1f5f9; overflow:hidden}
    .thumb img{width:100%; height:100%; object-fit:cover; display:block}
    .badge{position:absolute; top:8px; left:8px; padding:6px 10px; font-size:11px; font-weight:600; border-radius:999px; background:#00cc44; color:#fff}
    .badge.free{background:#0ea5e9}
    .badge.psd{right:8px; left:auto; background:#7c3aed}

    .content{padding:10px 12px; display:flex; flex-direction:column; gap:6px}
    .title{font-size:14px; font-weight:500; line-height:1.3}
    .meta{display:flex; align-items:center; justify-content:space-between}
    .price{font-weight:700}
    .formats{font-size:12px; margin-bottom:-10px; color:var(--sub)}

    .cta{display:flex; gap:8px; padding:10px 12px 12px}
    .btn{flex:1; padding:10px 12px; border-radius:27px; font-weight:600; font-size:16px; border:1px solid var(--muted); background:#fff; cursor:pointer}
    .btn.primary{background:var(--brand); border-color:transparent; color:#fff}
    .btn.ghost{background:#fff}
    
    .price, .badge {
     font-family: 'Rubikk', 'Intehr Tight', system-ui, sans-serif;
     font-weight: bold;
     font-size: 17px;
     padding: 5px 13px 5px 13px;
     letter-spacing: 0px;
     border-radius: 10px;
     }


    /* Floating footer CTA (mobile) */
    .dock{
      position:fixed; bottom:15px; right:0%; transform:translateX(-50%); z-index: 9999;
    }
    .dock .btn{margin:0}

    /* Modal preview */
    .modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:60}
    .modal.open{display:flex}
    .modal-card{width:min(600px, 92vw); background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
    .modal-top{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--muted)}
    .modal-body{max-height:80vh; overflow:auto; padding:10px; background:#f9fafb}
    .modal-body img{width:100%; height:auto; display:block; border-radius:12px}
    
    

    /* Small helpers */
    .rupee{font-feature-settings:"tnum" 1,"lnum" 1}
    .hide-on-mobile{display:none}
    @media(min-width:768px){.hide-on-mobile{display:inline-flex}}