:root{
      --primary: #ea1a85;
      --secondary: #f3f2f7;
      --card-radius: 20px;
      --card-padding: 1.3rem;
      --transition: 0.3s ease;
      --discount-bg: #ed6271;
      --text: #222;
      --muted: #6c6c6c;
      --white: #ffffff;
      --max-width: 1280px;
      --shadow-light: 0 4px 16px #ece0f6;
      --shadow-hover: 0 12px 25px rgba(236, 224, 246, 0.8);
    }


   

    .section-title{
      text-align:center;
      font-size:28px;
      font-weight:600;
      margin:8px 0 6px;
      color:var(--primary);
    }

    .section-subtitle{
      text-align:center;
      color:var(--muted);
      margin:0 auto 22px;
      font-size:14px;
      max-width:640px;
    }

    /* category row */
    .category-row{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      justify-content:center;
      margin-bottom:26px;
    }
    .category-card{
      flex:0 0 auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      width:140px;
      cursor:pointer;
      transition:transform var(--transition);
    }
    .category-card:hover{ transform:translateY(-5px); }
    .category-img{
      width:140px;
      height:140px;
      border-radius:50%;
      object-fit:cover;
      margin-bottom:8px;
      border:4px solid var(--secondary);
      transition:border-color var(--transition);
      display:block;
    }
    .category-card:hover .category-img{ border-color:var(--primary); }
    .category-label{ font-size:15px; font-weight:500; color:#242424; }

    /* products grid (flex to keep your original structure) */
    .products-grid{
      display:flex;
      flex-wrap:wrap;
      gap:22px;
      justify-content:center;
    }

    /* responsive column sizes: 5 -> 4 -> 3 -> 2 -> 1 */
    .product-card{
      flex: 0 0 calc(20% - 18px); /* default 5 per row */
      background:var(--white);
      border-radius:var(--card-radius);
      padding:var(--card-padding);
      display:flex;
      flex-direction:column;
      align-items:center;
      position:relative;
      box-shadow:var(--shadow-light);
      transition:all var(--transition);
      overflow:hidden;
      cursor:pointer;
      min-height:420px;
    }

    .product-card:hover{
      transform:translateY(-8px);
      box-shadow:var(--shadow-hover);
    }

    .product-img-container{
      overflow:hidden;
      position:relative;
      width:100%;
      border-radius:10px;
      background:#fff;
    }

    .product-img{
      width:100%;
      height:300px;
      object-fit:cover;
      display:block;
      transition:transform var(--transition);
    }

    .product-card:hover .product-img{ transform:scale(1.08); }

    /* badge */
    .kurti-badge{
      position:absolute;
      top:1rem;
      left:1rem;
      background:var(--discount-bg);
      color:#fff;
      font-size:0.95rem;
      border-radius:20px;
      padding:0.25em 0.9em;
      z-index:2;
      transition:transform var(--transition);
    }
    .product-card:hover .kurti-badge{ transform:scale(1.1); }

    /* options overlay */
    .options-overlay{
      position:absolute;
      right:1.3rem;
      top:2.5rem;
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:3;
      opacity:0;
      transform:translateX(10px);
      transition:all var(--transition);
    }
    .product-card:hover .options-overlay{ opacity:1; transform:translateX(0); }
    .options-overlay .btn{
      background:#fff;
      border-radius:50%;
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 2px 6px #dfd3ea;
      padding:0;
      transition:all 0.2s ease;
      border:none;
    }
    .options-overlay .btn:hover{ background:var(--primary); color:#fff; transform:scale(1.1); }

    /* card content */
    .card-content{
      padding:1rem 0;
      text-align:center;
      transition:all var(--transition);
      width:100%;
    }
    .product-card:hover .card-content{ background-color: rgba(248,249,250,0.7); }

    .product-name{
      margin:12px 0 6px;
      font-size:16px;
      font-weight:500;
      color:#252f3b;
      text-align:center;
    }

    .price-container{ text-align:center; margin-bottom:0; }
    .price-new{ color:#d42b37; font-weight:500; margin-right:8px; font-size:1.22rem; }
    .price-old{ text-decoration:line-through; color:#888; font-size:1rem; }

    .select-btn{
      background:#fff;
      border:1px solid var(--primary);
      color:var(--primary);
      transition:all var(--transition);
      opacity:0;
      transform:translateY(10px);
      border-radius:24px;
      padding:8px 24px;
      font-size:14px;
      margin-top:10px;
    }
    .product-card:hover .select-btn{ opacity:1; transform:translateY(0); }
    .select-btn:hover{ background:var(--primary); color:#fff; transform:scale(1.05); }

    .view-all-btn{
      background:var(--primary);
      color:#fff;
      transition:all var(--transition);
      position:relative;
      overflow:hidden;
      border:none;
      border-radius:24px;
      padding:10px 30px;
      font-size:16px;
      margin-top:22px;
    }
    .view-all-btn:hover{ background:#5a2c62; transform:translateY(-3px); box-shadow:0 5px 15px rgba(106,52,114,0.3); }

    /* small ripple helper (keeps your original) */
    .view-all-btn::after{
      content:'';
      position:absolute;
      top:50%;
      left:50%;
      width:5px;
      height:5px;
      background:rgba(255,255,255,0.5);
      opacity:0;
      border-radius:100%;
      transform:scale(1,1) translate(-50%);
      transform-origin:50% 50%;
    }
    .view-all-btn:focus:not(:active)::after{ animation:ripple 1s ease-out; }
    @keyframes ripple{
      0%{ transform:scale(0,0); opacity:0.5; }
      100%{ transform:scale(20,20); opacity:0; }
    }

    /* Responsive breakpoints */
    @media (max-width: 1200px){
      .product-card{ flex:0 0 calc(25% - 18px); } /* 4 columns */
      .product-img{ height:250px; }
      .category-img{ width:120px; height:120px; }
    }

    @media (max-width: 992px){
      .product-card{ flex:0 0 calc(33.333% - 18px); } /* 3 columns */
      .product-img{ height:220px; }
      .category-card{ width:120px; }
    }

    @media (max-width: 768px){
      .product-card{ flex:0 0 calc(50% - 18px); } /* 2 columns */
      .product-img{ height:200px; }
      .product-card{ margin-bottom:1.2rem; }
      .kurti-badge{ font-size:0.8rem; padding:0.18em 0.8em; }
      .price-new, .price-old{ font-size:1rem; }
      .options-overlay{ opacity:1; transform:translateX(0); }
      .category-img{ width:100px; height:100px; }
      .category-card{ width:100px; }
      .section-title{ font-size:24px; }
      .section-subtitle{ font-size:13px; max-width:92vw; }
    }

    @media (max-width: 576px){
      .product-card{ flex:0 0 calc(100% - 18px); } /* single column stack for small phones */
      .product-img{ height:180px; }
      .product-card{ padding:10px; border-radius:12px; }
      .category-row{ gap:12px; }
      .category-img{ width:80px; height:80px; border-width:3px; }
      .category-card{ width:80px; }
      .category-label{ font-size:13px; }
      .container{ padding:12px; }
    }

    /* Horizontal scroll fallback for very tiny screens if you want a scroll UX */
    .products-scroll-container{
      width:100%;
      overflow-x:auto;
      padding-bottom:10px;
      display:none; /* hidden by default; shown on very small widths */
    }
    .products-scroll{
      display:flex;
      gap:22px;
      width:max-content;
      padding:0 10px;
    }

    @media (max-width: 400px){
      .products-grid{ display:none; }
      .products-scroll-container{ display:block; }
      .product-card{ flex:0 0 280px; min-height:380px; }
      .product-img{ height:240px; }
    }

    @media (min-width: 401px){
      .products-scroll-container{ display:none; }
    }

    /* Utility */
    .text-center{ text-align:center; }
    button.btn{ cursor:pointer; }
    .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }