* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Poppins’, sans-serif;
background: #F5EBFA;
color: #49225B;
line-height: 1.6;
}

/* Announcement Bar */
.announcement-bar {
width: 100%;
background: #6E3482;
color: #fff;
font-family: ‘Outfit’, sans-serif;
font-size: 14px;
padding: 8px 0;
overflow: hidden;
position: relative;
z-index: 999;
border-bottom: 1px solid #E7DBEF;
}

.announcement-text {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

/* Banner Section */
.custom-banner {
position: relative;
width: 100%;
overflow: hidden;
font-family: ‘Outfit’, sans-serif;
}

.custom-banner img {
width: 100%;
height: auto;
display: block;
}

.banner-content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
color: #49225B;
text-align: left;
z-index: 2;
max-width: 80%;
}

.banner-content h1 {
font-family: ‘Outfit’, sans-serif;
font-size: clamp(14px, 3.5vw, 24px);
font-weight: 400;
margin: 0 0 0.3rem;
letter-spacing: 0.1em;
color: #49225B;
}

.banner-content h2 {
font-family: ‘Playfair Display’, serif;
font-size: clamp(20px, 5vw, 40px);
font-weight: 500;
margin-bottom: 0.8rem;
color: #A56ABD;
}

.banner-button {
display: inline-block;
padding: 8px 20px;
font-size: clamp(12px, 2.5vw, 16px);
font-family: ‘Playfair Display’, serif;
background: #6E3482;
color: #fff;
text-decoration: none;
border-radius: 25px;
transition: all 0.3s ease;
margin-bottom: 0.6rem;
}

.banner-button:hover {
background: #49225B;
box-shadow: 0 0 10px rgba(73, 34, 91, 0.3);
}

.insta {
font-size: clamp(11px, 2vw, 14px);
color: #49225B;
font-weight: 500;
}

/* Category Section */
.category-wrapper {
background-color: #F5EBFA;
padding: 24px 12px;
margin: 0 auto;
max-width: 100%;
border-top: 1px solid #E7DBEF;
border-bottom: 1px solid #E7DBEF;
}

.category-title {
font-size: 26px;
font-weight: 600;
font-family: ‘Outfit’, sans-serif;
color: #6E3482;
text-align: center;
margin-bottom: 20px;
}

.category-scroll {
display: flex;
overflow-x: auto;
gap: 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 5px;
}

.category-scroll::-webkit-scrollbar {
display: none;
}

.category-item {
flex: 0 0 auto;
text-align: center;
scroll-snap-align: start;
}

.category-item a {
text-decoration: none;
color: #49225B;
}

.category-item img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #A56ABD;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-item img:hover {
transform: scale(1.08);
box-shadow: 0 4px 10px rgba(110, 52, 130, 0.2);
}

.category-item p {
margin-top: 8px;
font-size: 14px;
font-weight: 500;
font-family: ‘Outfit’, sans-serif;
}

/* Jewelry Slider */
.header {
text-align: center;
padding: 20px 20px 0;
position: relative;
background: #F5EBFA;
}

.text-center {
text-align: center;
}

.section-heading {
font-size: 2.8rem;
margin: 0 0 5px;
color: #49225B;
font-weight: 700;
letter-spacing: 1px;
font-family: ‘Playfair Display’, serif;
}

.section-subheading {
color: #A56ABD;
font-size: 1.2rem;
margin-top: 5px;
letter-spacing: 3px;
position: relative;
display: inline-block;
}

.section-subheading::before,
.section-subheading::after {
content: “✦”;
margin: 0 15px;
color: #E7DBEF;
}

.swiper {
width: 100%;
padding-top: 10px;
padding-bottom: 40px;
max-width: 1400px;
margin: 0 auto;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 380px;
border-radius: 25px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(110, 52, 130, 0.25);
transition: transform 0.4s ease, box-shadow 0.4s ease;
cursor: pointer;
border: 8px solid #fff;
}

.swiper-slide:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(110, 52, 130, 0.4);
}

.slide-title {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: linear-gradient(transparent, rgba(73, 34, 91, 0.7));
color: #fff;
padding: 25px 10px 15px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
}

.shop-now-btn {
display: inline-block;
margin-top: 12px;
padding: 10px 22px;
background: #6E3482;
color: #fff;
font-weight: 600;
border-radius: 30px;
text-decoration: none;
font-size: 15px;
transition: 0.3s ease;
box-shadow: 0 4px 10px rgba(110, 52, 130, 0.3);
border: 2px solid rgba(255, 255, 255, 0.3);
letter-spacing: 0.5px;
}

.shop-now-btn:hover {
background: #49225B;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(110, 52, 130, 0.4);
}

.swiper-button-next,
.swiper-button-prev {
color: #6E3482;
background: rgba(255, 255, 255, 0.8);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 22px;
font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
background: #6E3482;
color: white;
transform: scale(1.1);
}

.swiper-pagination-bullet {
background: #E7DBEF;
opacity: 0.7;
width: 12px;
height: 12px;
transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
background: #6E3482;
opacity: 1;
transform: scale(1.2);
}

/* Product Grid */
.product-grid-title {
text-align: center;
margin: 20px 0;
font-family: ‘Outfit’, sans-serif;
color: #7b228c;
font-size: 26px;
}

.custom-product-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.view-all-btn {
text-align: center;
margin: 20px 0;
}

.view-all-btn a {
display: inline-block;
padding: 12px 24px;
background: linear-gradient(to right, #3a5ed1, #dd64cc);
color: #fff;
border-radius: 30px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}

/* Promo Banner */
.banner-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 20px;
transition: background 1s ease;
flex-wrap: wrap;
background: #F5EBFA;
}

.banner-text {
flex: 1 1 400px;
max-width: 600px;
text-align: left;
}

.banner-text h1 {
font-size: 48px;
font-weight: 900;
color: #49225B;
margin-bottom: 20px;
}

.banner-text p {
font-size: 20px;
color: #49225B;
margin-bottom: 30px;
opacity: 0.8;
}

.slider-wrapper {
flex: 1 1 300px;
max-width: 500px;
overflow: hidden;
position: relative;
border-radius: 20px;
border: 2px solid #E7DBEF;
}

.slider-track {
display: flex;
transition: transform 0.6s ease-in-out;
}

.slide {
min-width: 100%;
}

.slide img {
width: 100%;
height: auto;
border-radius: 18px;
}

/* Shine Bright Section */
.shine-section {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 40px 20px;
border-radius: 0px;
background: #F5EBFA;
font-family: ‘Poppins’, sans-serif;
margin: 30px 0;
overflow: hidden;
}

.shine-image {
flex: 1;
min-width: 280px;
}

.shine-image img {
width: 100%;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(73, 34, 91, 0.1);
border: 1px solid #E7DBEF;
}

.shine-content {
flex: 1;
min-width: 280px;
opacity: 1;
transform: translateX(0);
}

.shine-content h2 {
font-size: 26px;
color: #49225B;
margin-bottom: 15px;
font-weight: 700;
}

.shine-content p {
font-size: 15px;
color: #49225B;
margin-bottom: 25px;
line-height: 1.6;
opacity: 0.8;
}

.shine-button {
display: inline-block;
padding: 12px 24px;
background: #6E3482;
color: #fff;
border-radius: 30px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(110, 52, 130, 0.3);
}

.shine-button:hover {
background: #49225B;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(110, 52, 130, 0.4);
}

/* Benefits Section */
.benefits-section {
background: #F5EBFA;
padding: 50px 20px;
font-family: ‘Poppins’, sans-serif;
}

.benefits-container {
max-width: 1200px;
margin: 0 auto;
}

.benefits-title {
text-align: center;
color: #49225B;
font-size: 28px;
margin-bottom: 40px;
font-weight: 700;
}

.benefits-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}

.benefit-card {
flex: 1;
min-width: 250px;
background: white;
border-radius: 12px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 15px rgba(110, 52, 130, 0.08);
border: 1px solid #E7DBEF;
}

.benefit-icon {
width: 60px;
height: 60px;
background: #6E3482;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}

.benefit-icon i {
font-size: 24px;
color: white;
}

.benefit-title {
color: #49225B;
font-size: 18px;
margin-bottom: 12px;
}

.benefit-description {
color: #49225B;
opacity: 0.8;
line-height: 1.5;
font-size: 14px;
}

/* Footer */
.footer {
background-color: #49225B;
color: white;
padding: 60px 20px 30px;
}

.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
}

.footer-col {
margin-bottom: 30px;
}

.footer-col h3 {
color: #A56ABD;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}

.footer-col h3::after {
content: ”;
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background: #A56ABD;
}

.footer-logo {
font-family: ‘Playfair Display’, serif;
font-size: 24px;
font-weight: 700;
color: #A56ABD;
margin-bottom: 15px;
display: inline-block;
}

.footer-about p {
color: #E7DBEF;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 12px;
}

.footer-links a {
color: #E7DBEF;
font-size: 14px;
transition: all 0.3s ease;
display: inline-block;
}

.footer-links a:hover {
color: #A56ABD;
transform: translateX(5px);
}

.footer-contact p {
display: flex;
align-items: flex-start;
gap: 10px;
color: #E7DBEF;
font-size: 14px;
margin-bottom: 15px;
line-height: 1.6;
}

.footer-contact i {
color: #A56ABD;
margin-top: 3px;
}

.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(165, 106, 189, 0.2);
border-radius: 50%;
color: white;
transition: all 0.3s ease;
}

.social-icons a:hover {
background: #A56ABD;
color: #49225B;
transform: translateY(-3px);
}

.payment-methods {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}

.payment-methods img {
height: 20px;
filter: brightness(0) invert(1);
opacity: 0.8;
transition: opacity 0.3s;
}

.payment-methods img:hover {
opacity: 1;
}

.newsletter-form {
display: flex;
margin-top: 20px;
}

.newsletter-input {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: 4px 0 0 4px;
font-size: 14px;
background: white;
}

.newsletter-btn {
background: #A56ABD;
color: #49225B;
border: none;
padding: 0 20px;
border-radius: 0 4px 4px 0;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}

.newsletter-btn:hover {
background: white;
}

.copyright {
text-align: center;
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid rgba(165, 106, 189, 0.2);
color: #E7DBEF;
font-size: 13px;
}

.copyright a {
color: #A56ABD;
text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
.banner-section {
flex-direction: column;
text-align: center;
padding: 30px 10px;
}

.banner-text h1 {
font-size: 32px;
}

.banner-text p {
font-size: 16px;
}

.slider-wrapper {
max-width: 100%;
margin-top: 20px;
}

.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.section-heading {
font-size: 2.2rem;
}

.swiper-slide {
width: 250px;
height: 330px;
}

.shine-section {
flex-direction: column;
text-align: center;
}

.shine-content {
text-align: center;
}
}

@media (max-width: 576px) {
.section-heading {
font-size: 1.8rem;
margin-bottom: 0;
}

.section-subheading {
font-size: 1rem;
margin-top: 0;
}

.swiper {
padding-top: 5px;
padding-bottom: 20px;
}

.swiper-slide {
width: 220px;
height: 300px;
}

.slide-title {
font-size: 15px;
padding: 20px 10px 10px;
}

.shop-now-btn {
font-size: 13px;
padding: 8px 18px;
margin-top: 8px;
}

.footer-container {
grid-template-columns: 1fr;
}

.footer-col {
margin-bottom: 25px;
}
}

New Collection

TS Jewels Sale

Shop Now

@ts8.jewels

✨ Shop by Category ✨

Earrings

Necklace

Rings

Bracelets

Trendy Jewelry

Shine Bright with Our New Collection

Discover timeless elegance and modern charm in our handcrafted jewelry. Perfect for gifts, weddings, or daily sparkle. Every piece tells a story — crafted with love, designed to shine. Whether you’re dressing up or keeping it minimal, our collection brings the perfect touch of luxury to every moment.

Shop Now

Welcome to TS Jewels

Explore trending, stylish, and unique jewelry crafted for elegance and charm.

Shop Now

// Initialize Swiper
var TrandingSlider = new Swiper(‘.tranding-slider’, {
effect: ‘coverflow’,
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: ‘auto’,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2.5,
slideShadows: false,
},
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
});

// Promo banner slider
const track = document.getElementById(‘sliderTrack’);
const banner = document.getElementById(‘bannerSection’);

const backgrounds = [
“#F5EBFA”,
“#F5EBFA”,
“#F5EBFA”,
“#F5EBFA”,
“#F5EBFA”
];

let index = 0;

setInterval(() => {
index = (index + 1) % 5;
track.style.transform = `translateX(-${index * 100}%)`;
banner.style.background = backgrounds[index];
}, 4000);