/* section header */ .section-head text-align: center; margin-bottom: 2rem;
/* responsive adjustments */ @media (max-width: 768px) .slider-container padding: 1.5rem 0.5rem 2rem 0.5rem; .section-head h2 font-size: 1.7rem; .product-title font-size: 0.95rem; .current-price font-size: 1.25rem; .swiper-button-next, .swiper-button-prev width: 36px; height: 36px; .swiper-button-next:after, .swiper-button-prev:after font-size: 1rem;
.swiper-pagination-bullet background: #bdd4e6; opacity: 0.6; width: 8px; height: 8px;
.product-title font-size: 1.1rem; font-weight: 700; color: #1f2e3c; line-height: 1.3; margin-bottom: 0.5rem;
.swiper-button-next:hover, .swiper-button-prev:hover background: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.12); transform: scale(1.02);
/* badge / discount */ .badge position: absolute; top: 16px; left: 16px; background: #e73c3c; color: white; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 40px; letter-spacing: 0.3px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); backdrop-filter: blur(2px); z-index: 2;
.swiper-button-next:after, .swiper-button-prev:after font-size: 1.2rem; font-weight: bold; color: #2c4e6e;
.current-price font-size: 1.5rem; font-weight: 800; color: #1f6392;
/* main container */ .slider-container max-width: 1400px; width: 100%; margin: 0 auto; background: rgba(255,255,255,0.4); backdrop-filter: blur(0px); border-radius: 2.5rem; padding: 2rem 1rem 2.5rem 1rem; box-shadow: 0 20px 35px -12px rgba(0,0,0,0.08);
/* add subtle fade effect for better depth */ .product-card transition: transform 0.2s, box-shadow 0.2s; </style> </head> <body>