.bags-wrapper {
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px 16px;
     
 }

 .bags-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
     gap: 4px;
     max-width: 1320px;
     width: 100%;
 }

 /* ── Card ── */
 .bag-card {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4 / 3;
     cursor: pointer;
     background: #1a1a1a;

     /* scroll-reveal state */
     opacity: 0;
     transform: translateY(60px);
     transition:
         opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
         transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* staggered delays */
 .bag-card:nth-child(1) {
     transition-delay: 0s;
 }

 .bag-card:nth-child(2) {
     transition-delay: 0.12s;
 }

 .bag-card:nth-child(3) {
     transition-delay: 0.24s;
 }

 .bag-card:nth-child(4) {
     transition-delay: 0.36s;
 }

 .bag-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ── Product image ── */
 .bag-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center top;
     display: block;
     transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
     filter: brightness(0.88);
 }

 .bag-card:hover img {
     transform: scale(1.06);
     filter: brightness(1);
 }

  

 .bag-card:hover::after {
     opacity: 0.7;
 }

 /* ── Label ── */
 .bag-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 18px 20px;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: flex-start;
 }

 .bag-label-text { 
     font-weight: 700;
     font-size: 25.8px;
     letter-spacing: 0.08em;
     color: #FBFF0D;
     text-transform: uppercase;
     line-height: 100%; 
     transition: color 0.3s;
 }

 .bag-arrow {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-left: 10px;
     transition: background 0.3s, transform 0.3s;
 }

 .bag-arrow svg {
     width: 13px;
     height: 13px;
     fill: #d4f000;
     transition: fill 0.3s;
 }

 .bag-card:hover .bag-arrow {
     transform: rotate(45deg);
 }

 .bag-card:hover .bag-arrow svg {
     fill: #111;
 }

 /* ── Hover accent line ── */
 .bag-card::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 3px;
     background: #FBFF0D;
     z-index: 3;
     transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .bag-card:hover::before {
     width: 100%;
 }

 /* ── Responsive: single column on xs ── */
 @media (max-width: 575.98px) {
     .bags-grid {
         grid-template-columns: 1fr;
     }

     .bag-card {
         aspect-ratio: 16 / 9;
     }

     .bag-card:nth-child(2) {
         transition-delay: 0.1s;
     }

     .bag-card:nth-child(3) {
         transition-delay: 0.2s;
     }

     .bag-card:nth-child(4) {
         transition-delay: 0.3s;
     }
     .bags-wrapper{
        padding-top: 0px;
        padding-bottom: 0px;
     }
 }

 /* ── md: slightly taller cards ── */
 @media (min-width: 768px) {
     .bag-card {
         aspect-ratio: 3 / 2.4;
     }
 }