:root{
      --accent:#ff6b6b;
      --accent-2:#ff8a66;
      --dark:#0f1724;
      --muted:#6b7280;
      --bg: #fbfbfd;
      --card: #ffffff;
      --glass: rgba(15,23,36,0.04);
      --radius:12px;
      --max-w:1200px;
      --shadow: 0 10px 30px rgba(15,23,36,0.06);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,Roboto,Arial;
      background:linear-gradient(180deg,var(--bg),#f6f7fb);
      color:var(--dark);
      -webkit-font-smoothing:antialiased;
      padding:0px;
      display:flex;
      justify-content:center;
    }

    .container{width:100%;max-width:var(--max-w);padding:18px}

    /* ---------- HERO ---------- */
    .hero{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:100px}
    .hero-card{
      position:relative;height:420px;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,36,0.06);
      display:flex;align-items:flex-end;
    }
    .hero-card img{position:absolute;inset:0; cursor: pointer;width:100%;height:100%;object-fit:cover;transition:transform .6s}
    .hero-card:hover img{transform:scale(1.08)}
    .hero-meta{opacity:0;visibility:hidden;transform:translateY(20px);transition:.35s ease}
    .hero-card:hover .hero-meta{opacity:1;visibility:visible;transform:translateY(0)}
    .hero-meta{position:relative;z-index:2;padding:24px;color:#fff;}
    .hero-meta h2{margin:-150px 0 8px;font-size:26px;text-shadow:0 10px 30px rgba(0,0,0,0.5);}

    .hero-cta{
      position:absolute;right:18px;bottom:18px;
      background:rgba(255,255,255,0.95);
      padding:10px 14px;border-radius:10px;border:0;font-weight:800;cursor:pointer
    }

    /* ---------- PRODUCTS ---------- */
    .section-title{text-align:center;cursor: pointer;margin:28px 0  ;font-size: large;}
   /* -------------------------------------------
   PRODUCT HOVER EFFECT (added, same classes)
   ------------------------------------------- */

    /* whole product card clickable feel */
    .product {
      transition: transform .22s ease, box-shadow .22s ease;
    }

    /* lift + shadow on hover */
    .product:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 36px rgba(15,23,36,0.12);
    }

    /* prod-thumb hover zoom and cursor */
    .prod-thumb {
      cursor: zoom-in;
      transition: transform .35s ease;
      position:relative;
      overflow:hidden;
      border-radius:10px;
      height:360px;
      background:#f6f6f7;
    }

    /* image zoom + saturation boost */
    .prod-thumb img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition: transform .45s ease, filter .35s ease;
    }
    .prod-thumb:hover img {
      transform: scale(1.10);
      filter: saturate(1.35) brightness(0.95);
    }

    /* subtle effect when clicking */
    .product:active {
      transform: translateY(-3px) scale(0.99);
    }

    /* keyboard accessibility */
    /* .product:focus-within,
    .product:focus {
      outline: 3px solid #ff8a66;
      outline-offset: 6px;
    } */

    /* DISCOUNT BADGE — shown inside image area */
    .badge-discount{
      position:absolute;left:12px;top:12px;background:linear-gradient(90deg,#ff6b6b,#ff8a66);
      color:#fff;padding:6px 10px;border-radius:999px;
      font-weight:800;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,0.16);
      z-index:4;
      white-space:nowrap;
    }

    .prod-body{padding:10px 12px 20px 12px;display:flex;flex-direction:column;gap:8px}
    .meta-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}
    .title{font-weight:500;font-size:16px;color: #484848; cursor: pointer;margin:2px 0}
    .desc{margin:0;color:var(--muted);font-size:13px}

    /* PRICE: centered in card */
    .price-block{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;text-align:center;}
    .orig-price{color:var(--muted);text-decoration:line-through;font-weight:100;font-size:14px;}
    .sale-price{font-weight:400;color:var(--accent);font-size:16px;}

    /* layout grid */
    .products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px}

    /* responsive */
    @media(max-width:1100px){.products{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:520px){.hero{grid-template-columns:1fr;margin-top:210px} .products{grid-template-columns:repeat(2,1fr) }}
    @media(max-width:520px){
      .products{grid-template-columns:repeat(2,1fr);gap:12px}
      .prod-thumb{height:220px}
      .product{padding:2px;border-radius:10px}
      .hero-card{height:260px}
      .hero-meta h2{font-size:20px;margin:-90px 0 6px}
      .container{padding:12px}
    }
    @media(max-width:360px){
      .products{grid-template-columns:1fr;gap:10px}
      .prod-thumb{height:380px!important}
    }

    /* small utility */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}