*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;font-size:15px;line-height:1.7;background:linear-gradient(180deg,#ffffff 0%,#f8f8f6 45%,#efefec 100%);color:#2b2b2b;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button,input,textarea{font-family:inherit;outline:none;}
.container{width:min(1280px,94%);margin:auto;}

:root{
--gold:#c8a45a;
--gold-dark:#a67c2e;
--gold-light:#e4cf9d;
--bronze:#8d6b34;
--white:#ffffff;
--silver:#ececec;
--silver-dark:#d7d7d7;
--gray:#666666;
--dark:#2b2b2b;
--border:#ebe4d7;
--bg:#f5f5f3;
--card:#ffffff;
--shadow:0 18px 40px rgba(121,91,36,.08);
--shadow-hover:0 25px 45px rgba(140,101,35,.16);
--radius:18px;
--transition:.35s ease;
--gold-gradient:linear-gradient(135deg,#e5cf97 0%,#c8a45a 45%,#a67c2e 100%);
--gold-gradient-hover:linear-gradient(135deg,#f0ddb0 0%,#d0ac62 45%,#9b6d2c 100%);
}

h1,h2,h3,h4,h5,h6{
font-family:'Cormorant Garamond',serif;
font-weight:700;
color:var(--dark);
line-height:1.2;
}

h1{font-size:56px;}
h2{font-size:42px;}
h3{font-size:24px;}

p{
color:var(--gray);
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title span{
display:inline-flex;
align-items:center;
padding:8px 18px;
background:#faf6ec;
border:1px solid #ead8a8;
border-radius:50px;
font-size:13px;
font-weight:700;
letter-spacing:1px;
color:var(--gold-dark);
}

.section-title h2{
margin:18px 0;
}

.section-title p{
max-width:760px;
margin:auto;
}

section{
padding:90px 0;
position:relative;
}

.topbar{
background:#2f2b27;
color:#f4efe4;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,.05);
}

.topbar .container{
display:flex;
justify-content:space-between;
align-items:center;
height:42px;
}

.topbar-left,
.topbar-right{
display:flex;
align-items:center;
gap:24px;
}

.topbar a{
transition:.3s;
}

.topbar a:hover{
color:var(--gold-light);
}

#header{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(200,164,90,.18);
}

#header .container{
display:flex;
justify-content:space-between;
align-items:center;
height:88px;
}

.logo img{
height:52px;
width:auto;
}

nav ul{
display:flex;
align-items:center;
gap:38px;
}

nav ul li a{
font-weight:600;
color:#333;
transition:var(--transition);
position:relative;
}

nav ul li a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:var(--gold);
transition:.3s;
}

nav ul li a:hover{
color:var(--gold-dark);
}

nav ul li a:hover::after{
width:100%;
}

.header-action{
display:flex;
align-items:center;
gap:14px;
}

.search-btn{
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#faf7ef;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
transition:.3s;
}

.search-btn:hover{
background:var(--gold-gradient);
color:#fff;
}

.login-btn{
padding:14px 26px;
border:1px solid var(--border);
border-radius:15px;
font-weight:600;
background:#fff;
transition:.3s;
}

.login-btn:hover{
border-color:var(--gold);
color:var(--gold-dark);
}

.buy-btn{
padding:15px 34px;
background:var(--gold-gradient);
color:#fff;
font-weight:700;
border-radius:16px;
box-shadow:0 18px 40px rgba(166,124,46,.28);
transition:.35s;
}

.buy-btn:hover{
background:var(--gold-gradient-hover);
transform:translateY(-4px);
box-shadow:0 25px 50px rgba(166,124,46,.35);
}

.mobile-menu{
display:none;
cursor:pointer;
}

.mobile-menu span{
display:block;
width:28px;
height:3px;
background:var(--bronze);
margin:5px 0;
border-radius:30px;
}

.btn-buy,
.primary-btn,
.promo-btn{
display:inline-flex;
justify-content:center;
align-items:center;
padding:16px 38px;
background:var(--gold-gradient);
color:#fff;
font-weight:700;
border-radius:18px;
box-shadow:0 18px 40px rgba(166,124,46,.25);
transition:.35s;
}

.btn-buy:hover,
.primary-btn:hover,
.promo-btn:hover{
background:var(--gold-gradient-hover);
transform:translateY(-5px);
box-shadow:0 28px 45px rgba(166,124,46,.32);
}

.btn-chat{
display:inline-flex;
justify-content:center;
align-items:center;
padding:16px 38px;
background:#fff;
border:2px solid var(--gold);
border-radius:18px;
font-weight:700;
color:var(--gold-dark);
transition:.35s;
}

.btn-chat:hover{
background:var(--gold-gradient);
color:#fff;
}

.service-card,
.feature-card,
.stat-card,
.variant-card,
.testimonial-card,
.customer-item{
background:#fff;
border:1px solid var(--border);
border-radius:22px;
box-shadow:var(--shadow);
transition:.35s;
overflow:hidden;
}

.service-card:hover,
.feature-card:hover,
.stat-card:hover,
.variant-card:hover,
.testimonial-card:hover,
.customer-item:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-hover);
}

.main-image,
.thumb,
.showcase-item,
.detail-image,
.feature-image,
.customer-item,
.variant-card img,
.video-thumbnail,
.highlight-image,
.banner-image,
.promo-image{
position:relative;
overflow:hidden;
border-radius:22px;
background:#fff;
}

.main-image,
.showcase-item,
.detail-image,
.feature-image,
.customer-item{
aspect-ratio:1/1;
}

.main-image img,
.showcase-item img,
.detail-image img,
.feature-image img,
.customer-item img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}

.main-image:hover img,
.showcase-item:hover img,
.detail-image:hover img{
transform:scale(1.05);
}

.thumb{
aspect-ratio:1/1;
cursor:pointer;
border:2px solid transparent;
transition:.3s;
}

.thumb:hover,
.thumb.active{
border-color:var(--gold);
}

.thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.variant-card img{
aspect-ratio:1/1;
width:100%;
object-fit:cover;
}

.service-icon{
width:82px;
height:82px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
background:#faf7ef;
border:1px solid #ecdcae;
border-radius:50%;
}

.service-icon img{
width:44px;
height:44px;
object-fit:contain;
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.text-center{text-align:center;}
.radius{border-radius:22px;}
.shadow{box-shadow:var(--shadow);}
.bg-white{background:#fff;}
.bg-gold{background:var(--gold-gradient);}
.hero{
padding:70px 0 90px;
background:linear-gradient(180deg,#ffffff 0%,#faf8f3 45%,#f4f3ef 100%);
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.hero-gallery{
display:flex;
flex-direction:column;
gap:20px;
}

.main-image{
padding:20px;
background:#fff;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.product-label{
position:absolute;
top:20px;
left:20px;
padding:10px 18px;
background:var(--gold-gradient);
color:#fff;
font-size:12px;
font-weight:700;
border-radius:50px;
letter-spacing:1px;
}

.thumbnail-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.thumb{
padding:8px;
background:#fff;
border:1px solid var(--border);
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.thumb img{
border-radius:14px;
}

.hero-content .brand{
display:inline-flex;
align-items:center;
padding:8px 18px;
background:#faf6ec;
border:1px solid #ead8a8;
border-radius:50px;
color:var(--gold-dark);
font-size:13px;
font-weight:700;
letter-spacing:1px;
margin-bottom:20px;
}

.hero-content h1{
margin-bottom:25px;
}

.rating-box{
display:flex;
align-items:center;
gap:15px;
margin-bottom:28px;
}

.stars{
color:#d4a93d;
font-size:20px;
letter-spacing:2px;
}

.rating-text{
font-size:18px;
font-weight:700;
color:var(--dark);
}

.line{
width:1px;
height:20px;
background:#d9d9d9;
}

.sold{
font-weight:600;
color:#777;
}

.price-box{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-bottom:30px;
}

.old-price{
font-size:22px;
text-decoration:line-through;
color:#9c9c9c;
}

.new-price{
font-size:42px;
font-weight:800;
font-family:'Cormorant Garamond',serif;
color:var(--gold-dark);
}

.discount{
padding:8px 14px;
background:#fff4d9;
border:1px solid #e7cf8e;
border-radius:10px;
font-size:13px;
font-weight:700;
color:var(--gold-dark);
}

.stock-progress{
margin-bottom:28px;
}

.stock-head{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-weight:600;
}

.progress{
height:10px;
background:#e8e8e8;
border-radius:50px;
overflow:hidden;
}

.progress-bar{
width:83%;
height:100%;
background:linear-gradient(90deg,#e5cf97,#c8a45a,#9b712e);
border-radius:50px;
}

.short-description{
font-size:16px;
margin-bottom:28px;
color:#666;
}

.feature-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:35px;
}

.feature-item{
padding:14px 18px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
font-weight:600;
box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.hero-button{
display:flex;
gap:18px;
margin-bottom:35px;
}

.payment-info{
display:flex;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.pay-item{
width:65px;
height:42px;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.pay-item img{
max-width:75%;
max-height:75%;
object-fit:contain;
}

.flash-sale{
background:#2f2b27;
color:#fff;
}

.flash-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}

.flash-badge{
display:inline-flex;
padding:8px 16px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.2);
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
}

.flash-sale h2{
color:#fff;
margin-bottom:18px;
}

.flash-sale p{
color:#ded8cd;
max-width:520px;
}

.countdown{
display:flex;
gap:18px;
}

.time-box{
width:90px;
height:90px;
background:#fff;
border-radius:18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.time-box span{
font-size:30px;
font-weight:800;
color:var(--gold-dark);
line-height:1;
}

.time-box small{
margin-top:8px;
font-size:12px;
font-weight:600;
color:#666;
}

.service{
background:#faf8f4;
}

.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.service-card{
padding:35px 25px;
text-align:center;
}

.service-card h3{
margin:22px 0 12px;
font-size:24px;
}

.service-card p{
font-size:15px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.feature-card{
padding:25px;
position:relative;
}

.feature-number{
position:absolute;
top:20px;
right:20px;
font-size:42px;
font-family:'Cormorant Garamond',serif;
font-weight:700;
color:#ead8a8;
}

.feature-image{
margin-bottom:25px;
}

.feature-card h3{
margin-bottom:12px;
}

.feature-card p{
font-size:15px;
}

.highlight-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
padding:70px;
background:#fff;
border:1px solid var(--border);
border-radius:30px;
box-shadow:var(--shadow);
}

.subtitle{
display:inline-flex;
padding:8px 18px;
background:#faf6ec;
border:1px solid #ead8a8;
border-radius:50px;
font-size:13px;
font-weight:700;
color:var(--gold-dark);
margin-bottom:20px;
}

.highlight-content h2{
margin-bottom:20px;
}

.highlight-content p{
margin-bottom:28px;
}

.highlight-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-bottom:35px;
}

.highlight-item{
padding:15px 18px;
background:#faf8f3;
border:1px solid var(--border);
border-radius:14px;
font-weight:600;
}

.stat-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.stat-card{
padding:40px 20px;
text-align:center;
}

.stat-card h3{
font-size:48px;
color:var(--gold-dark);
margin-bottom:10px;
}

.stat-card p{
font-weight:600;
}

.promo-wrapper{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:50px;
align-items:center;
padding:70px;
border-radius:30px;
background:linear-gradient(135deg,#f8f5ed,#efe8d7);
border:1px solid #eadcb5;
overflow:hidden;
}

.promo-content span{
display:inline-flex;
padding:8px 18px;
background:#fff;
border-radius:50px;
font-size:13px;
font-weight:700;
color:var(--gold-dark);
margin-bottom:18px;
}

.promo-content h2{
margin-bottom:18px;
}

.promo-content p{
margin-bottom:30px;
}

.promo-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:24px;
}
.product-showcase{
background:#faf8f4;
}

.showcase-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:320px;
gap:25px;
}

.showcase-item{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow);
transition:var(--transition);
}

.showcase-item.large{
grid-column:span 2;
grid-row:span 2;
}

.showcase-item img{
width:100%;
height:100%;
object-fit:cover;
transition:.45s;
}

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

.showcase-item:hover img{
transform:scale(1.08);
}

.product-detail{
background:#fff;
}

.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.detail-image{
background:#fff;
padding:20px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.detail-content .section-label{
display:inline-flex;
padding:8px 18px;
background:#faf6ec;
border:1px solid #ead8a8;
border-radius:50px;
font-size:13px;
font-weight:700;
color:var(--gold-dark);
margin-bottom:18px;
}

.detail-content h2{
margin-bottom:25px;
}

.detail-content>p{
margin-bottom:35px;
}

.detail-list{
display:grid;
gap:18px;
}

.detail-item{
padding:22px;
background:#fbfaf7;
border:1px solid var(--border);
border-radius:18px;
transition:var(--transition);
}

.detail-item:hover{
background:#fff;
transform:translateY(-5px);
box-shadow:var(--shadow);
}

.detail-item strong{
display:block;
font-size:17px;
color:var(--dark);
margin-bottom:8px;
}

.specification{
background:#f7f5f2;
}

.spec-table{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow);
}

.spec-row{
display:grid;
grid-template-columns:260px 1fr;
border-bottom:1px solid var(--border);
}

.spec-row:last-child{
border-bottom:none;
}

.spec-name{
padding:22px 28px;
background:#faf6ec;
font-weight:700;
color:var(--gold-dark);
}

.spec-value{
padding:22px 28px;
color:#555;
}

.variant{
background:#fff;
}

.variant-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.variant-card{
padding:16px;
cursor:pointer;
text-align:center;
}

.variant-card img{
border-radius:18px;
margin-bottom:18px;
}

.variant-card h3{
font-size:20px;
}

.variant-card.active{
border:2px solid var(--gold);
box-shadow:0 20px 45px rgba(166,124,46,.18);
}

.variant-card:hover{
border:2px solid var(--gold-light);
}

.shipping{
background:#faf8f4;
}

.shipping-wrapper{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:60px;
align-items:center;
padding:65px;
background:#fff;
border:1px solid var(--border);
border-radius:28px;
box-shadow:var(--shadow);
}

.shipping-content span{
display:inline-flex;
padding:8px 18px;
background:#faf6ec;
border:1px solid #ead8a8;
border-radius:50px;
font-size:13px;
font-weight:700;
color:var(--gold-dark);
margin-bottom:18px;
}

.shipping-content h2{
margin-bottom:22px;
}

.shipping-content p{
margin-bottom:30px;
}

.shipping-content ul{
display:grid;
gap:14px;
}

.shipping-content li{
padding:16px 20px;
background:#faf8f3;
border:1px solid var(--border);
border-radius:14px;
font-weight:600;
}

.shipping-image{
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow);
}

.shipping-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}

.shipping-image:hover img{
transform:scale(1.05);
}

.video-section{
background:#fff;
}

.video-wrapper{
max-width:980px;
margin:auto;
}

.video-thumbnail{
position:relative;
border-radius:30px;
overflow:hidden;
box-shadow:var(--shadow);
}

.video-thumbnail img{
width:100%;
display:block;
transition:.4s;
}

.video-thumbnail:hover img{
transform:scale(1.04);
}

.play-button{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--gold-gradient);
color:#fff;
font-size:34px;
box-shadow:0 18px 45px rgba(166,124,46,.35);
transition:var(--transition);
}

.play-button:hover{
transform:translate(-50%,-50%) scale(1.08);
}

.feature-banner{
background:#f7f5f2;
}

.feature-banner-box{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:60px;
align-items:center;
padding:70px;
background:linear-gradient(135deg,#ffffff,#f7f2e8);
border:1px solid #eadcb5;
border-radius:30px;
box-shadow:var(--shadow);
overflow:hidden;
}

.banner-text h2{
margin-bottom:22px;
}

.banner-text p{
margin-bottom:35px;
max-width:580px;
}

.banner-image{
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow);
}

.banner-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.45s;
}

.banner-image:hover img{
transform:scale(1.05);
}
.testimonial{
background:#fff;
}

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.testimonial-card{
padding:35px;
position:relative;
}

.testimonial-card::before{
content:"★★★★★";
position:absolute;
top:22px;
right:28px;
font-size:13px;
letter-spacing:2px;
color:var(--gold);
opacity:.18;
}

.testimonial-head{
display:flex;
align-items:center;
gap:18px;
margin-bottom:22px;
}

.testimonial-head img{
width:72px;
height:72px;
border-radius:50%;
object-fit:cover;
border:3px solid #f1e1b8;
}

.testimonial-head h3{
font-size:22px;
margin-bottom:4px;
}

.testimonial-head span{
font-size:13px;
color:var(--gold-dark);
font-weight:600;
}

.rating{
margin-bottom:18px;
font-size:18px;
letter-spacing:3px;
color:var(--gold);
}

.testimonial-card p{
font-size:15px;
color:#666;
}

.customer-gallery{
background:#f8f6f2;
}

.customer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

.customer-item{
border-radius:20px;
overflow:hidden;
background:#fff;
border:1px solid var(--border);
}

.customer-item img{
transition:.45s;
}

.customer-item:hover img{
transform:scale(1.08);
}

.faq{
background:#fff;
}

.faq-list{
max-width:920px;
margin:auto;
display:grid;
gap:18px;
}

.faq-item{
background:#fff;
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
transition:var(--transition);
box-shadow:0 10px 25px rgba(0,0,0,.04);
}

.faq-item:hover{
box-shadow:var(--shadow);
}

.faq-question{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 28px;
border:none;
background:none;
font-size:17px;
font-weight:700;
cursor:pointer;
color:var(--dark);
}

.faq-question span{
font-size:22px;
color:var(--gold-dark);
transition:.3s;
}

.faq-item.active .faq-question span{
transform:rotate(45deg);
}

.faq-answer{
display:none;
padding:0 28px 24px;
}

.faq-item.active .faq-answer{
display:block;
}

.cta-section{
background:#2f2b27;
overflow:hidden;
}

.cta-box{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
padding:70px;
border-radius:30px;
background:linear-gradient(135deg,#3b352f,#2d2a27);
border:1px solid rgba(255,255,255,.08);
}

.cta-content span{
display:inline-flex;
padding:8px 18px;
background:rgba(255,255,255,.08);
border-radius:50px;
font-size:13px;
font-weight:700;
color:#f4dca2;
margin-bottom:18px;
}

.cta-content h2{
color:#fff;
margin-bottom:18px;
}

.cta-content p{
color:#d4d0c8;
max-width:560px;
}

.cta-action{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.footer{
background:#252321;
color:#d8d5cf;
padding:90px 0 35px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1.3fr;
gap:45px;
margin-bottom:60px;
}

.footer-logo{
height:56px;
margin-bottom:20px;
}

.footer-item p{
color:#bcb8b1;
}

.footer-item h3{
font-size:22px;
color:#fff;
margin-bottom:22px;
}

.footer-item ul{
display:grid;
gap:14px;
}

.footer-item ul li a{
color:#c8c4bc;
transition:.3s;
}

.footer-item ul li a:hover{
color:var(--gold-light);
padding-left:8px;
}

.payment-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.payment-list img{
width:100%;
height:58px;
object-fit:contain;
padding:10px;
background:#fff;
border-radius:12px;
}

.footer-bottom{
padding-top:28px;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
font-size:14px;
color:#a9a49a;
}

.floating-action{
position:fixed;
right:25px;
bottom:25px;
display:flex;
flex-direction:column;
gap:14px;
z-index:999;
}

.floating-action a{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--gold-gradient);
color:#fff;
font-size:22px;
box-shadow:0 15px 35px rgba(166,124,46,.28);
transition:var(--transition);
}

.floating-action a:hover{
transform:translateY(-6px);
box-shadow:0 22px 40px rgba(166,124,46,.35);
}

.buy-btn,
.btn-buy,
.primary-btn,
.promo-btn{
position:relative;
overflow:hidden;
}

.buy-btn::before,
.btn-buy::before,
.primary-btn::before,
.promo-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);
transition:.8s;
}

.buy-btn:hover::before,
.btn-buy:hover::before,
.primary-btn:hover::before,
.promo-btn:hover::before{
left:170%;
}

.main-image,
.detail-image,
.highlight-wrapper,
.shipping-wrapper,
.feature-banner-box,
.spec-table{
position:relative;
}

.main-image::after,
.detail-image::after,
.highlight-wrapper::after,
.shipping-wrapper::after,
.feature-banner-box::after,
.spec-table::after{
content:"";
position:absolute;
inset:0;
border:1px solid rgba(200,164,90,.18);
border-radius:inherit;
pointer-events:none;
}

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#efefef;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#e3c983,#a67c2e);
border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
background:#8d6b34;
}
.hero::before,
.highlight::before,
.feature-banner::before,
.cta-section::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 20% 20%,rgba(200,164,90,.08),transparent 30%),
radial-gradient(circle at 80% 30%,rgba(166,124,46,.06),transparent 35%),
radial-gradient(circle at 50% 100%,rgba(255,255,255,.8),transparent 60%);
z-index:0;
}

.hero .container,
.highlight .container,
.feature-banner .container,
.cta-section .container{
position:relative;
z-index:2;
}

section:not(.hero):not(.flash-sale){
border-top:1px solid rgba(200,164,90,.08);
}

.section-title h2{
position:relative;
display:inline-block;
padding-bottom:18px;
}

.section-title h2::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:90px;
height:3px;
border-radius:20px;
background:var(--gold-gradient);
}

.section-title h2::before{
content:"";
position:absolute;
left:50%;
bottom:-6px;
transform:translateX(-50%);
width:18px;
height:18px;
border-radius:50%;
background:#fff;
border:3px solid var(--gold);
}

.service-card,
.feature-card,
.stat-card,
.variant-card,
.testimonial-card,
.customer-item,
.detail-item,
.highlight-item{
position:relative;
}

.service-card::before,
.feature-card::before,
.stat-card::before,
.variant-card::before,
.testimonial-card::before,
.customer-item::before,
.detail-item::before,
.highlight-item::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:var(--gold-gradient);
transform:scaleX(0);
transform-origin:left;
transition:.35s;
}

.service-card:hover::before,
.feature-card:hover::before,
.stat-card:hover::before,
.variant-card:hover::before,
.testimonial-card:hover::before,
.customer-item:hover::before,
.detail-item:hover::before,
.highlight-item:hover::before{
transform:scaleX(1);
}

.main-image::before,
.showcase-item::before,
.detail-image::before,
.banner-image::before,
.shipping-image::before,
.customer-item::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.18),transparent 45%);
opacity:0;
transition:.35s;
z-index:1;
}

.main-image:hover::before,
.showcase-item:hover::before,
.detail-image:hover::before,
.banner-image:hover::before,
.shipping-image:hover::before,
.customer-item:hover::before{
opacity:1;
}

.product-label,
.discount,
.flash-badge{
box-shadow:0 12px 28px rgba(166,124,46,.28);
letter-spacing:.8px;
}

.service-icon,
.search-btn{
position:relative;
overflow:hidden;
}

.service-icon::after,
.search-btn::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 65%);
pointer-events:none;
}

.payment-list img,
.pay-item{
transition:.35s;
}

.payment-list img:hover,
.pay-item:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(166,124,46,.18);
}

.spec-row:nth-child(even){
background:#fcfbf8;
}

.spec-row:hover{
background:#fff8eb;
}

.highlight-item,
.shipping-content li,
.feature-item{
transition:.35s;
}

.highlight-item:hover,
.shipping-content li:hover,
.feature-item:hover{
background:#fff;
border-color:#d8bf82;
transform:translateX(6px);
}

input,
textarea,
select{
width:100%;
padding:15px 18px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
transition:.3s;
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--gold);
box-shadow:0 0 0 4px rgba(200,164,90,.12);
}

::selection{
background:#d8bd7c;
color:#fff;
}

@keyframes floatCard{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

@keyframes glowGold{
0%{box-shadow:0 0 0 rgba(200,164,90,0);}
50%{box-shadow:0 0 30px rgba(200,164,90,.25);}
100%{box-shadow:0 0 0 rgba(200,164,90,0);}
}

@keyframes pulseGold{
0%{transform:scale(1);}
50%{transform:scale(1.04);}
100%{transform:scale(1);}
}

.product-label{
animation:pulseGold 3s infinite;
}

.buy-btn{
animation:glowGold 4s infinite;
}

.stat-card:hover{
animation:floatCard 2.5s infinite;
}

@media(max-width:1200px){

.hero-grid,
.detail-grid,
.highlight-wrapper,
.shipping-wrapper,
.feature-banner-box,
.promo-wrapper{
grid-template-columns:1fr;
}

.showcase-grid{
grid-template-columns:repeat(2,1fr);
}

.showcase-item.large{
grid-column:auto;
grid-row:auto;
}

.feature-grid{
grid-template-columns:repeat(2,1fr);
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.variant-grid{
grid-template-columns:repeat(2,1fr);
}

.customer-grid{
grid-template-columns:repeat(4,1fr);
}

.testimonial-grid{
grid-template-columns:1fr;
}

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

}

@media(max-width:768px){

section{
padding:70px 0;
}

h1{
font-size:38px;
}

h2{
font-size:30px;
}

.topbar{
display:none;
}

nav,
.header-action{
display:none;
}

.mobile-menu{
display:block;
}

.thumbnail-list{
grid-template-columns:repeat(4,1fr);
}

.feature-list{
grid-template-columns:1fr;
}

.service-grid,
.feature-grid,
.variant-grid,
.stat-grid,
.customer-grid,
.showcase-grid,
.footer-grid{
grid-template-columns:1fr;
}

.spec-row{
grid-template-columns:1fr;
}

.highlight-wrapper,
.shipping-wrapper,
.feature-banner-box,
.promo-wrapper,
.cta-box{
padding:35px;
}

.hero-button{
flex-direction:column;
}

.cta-action{
flex-direction:column;
}

.floating-action{
right:15px;
bottom:15px;
}

.floating-action a{
width:52px;
height:52px;
}

}

@media(max-width:480px){

.container{
width:92%;
}

.main-image,
.detail-image{
padding:10px;
}

.hero{
padding:45px 0 60px;
}

.buy-btn,
.btn-buy,
.btn-chat,
.primary-btn,
.promo-btn{
width:100%;
}

.section-title{
margin-bottom:40px;
}

.section-title h2{
font-size:28px;
}
}

#premium-overlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
z-index:999999;
animation:overlayFade .35s ease;
}

.overlay-backdrop{
position:absolute;
inset:0;
background:
radial-gradient(circle at top,rgba(200,164,90,.18),transparent 60%);
pointer-events:none;
}

.overlay-box{
position:relative;
width:100%;
max-width:480px;
padding:30px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(200,164,90,.30);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:
0 30px 80px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.05);
text-align:center;
overflow:hidden;
}

.overlay-box::before{
content:"";
position:absolute;
top:-120px;
left:-120px;
width:240px;
height:240px;
border-radius:50%;
background:rgba(200,164,90,.12);
filter:blur(40px);
}

.overlay-box::after{
content:"";
position:absolute;
right:-80px;
bottom:-80px;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255,255,255,.08);
filter:blur(35px);
}

.overlay-close{
position:absolute;
top:14px;
right:14px;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.10);
color:#fff;
font-size:26px;
cursor:pointer;
transition:.3s;
z-index:2;
}

.overlay-close:hover{
background:#C8A45A;
transform:rotate(90deg);
}

.overlay-logo{
display:block;
width:180px;
margin:0 auto 25px;
position:relative;
z-index:2;
}

.overlay-banner{
position:relative;
z-index:2;
margin-bottom:28px;
}

.overlay-banner img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:22px;
border:2px solid rgba(200,164,90,.30);
box-shadow:0 20px 45px rgba(0,0,0,.30);
}

.overlay-action{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
position:relative;
z-index:2;
}

.overlay-btn{
height:56px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
font-weight:700;
text-decoration:none;
transition:.35s;
}

.overlay-btn.login-btn{
background:#fff;
color:#222;
}

.overlay-btn.buy-btn{
background:linear-gradient(135deg,#E2C27A,#C8A45A,#A67C2E);
color:#fff;
box-shadow:0 15px 35px rgba(200,164,90,.35);
}

.overlay-btn:hover{
transform:translateY(-4px);
}

@keyframes overlayFade{
from{
opacity:0;
visibility:hidden;
}
to{
opacity:1;
visibility:visible;
}
}

@media(max-width:768px){

.overlay-box{
padding:22px;
max-width:360px;
border-radius:22px;
}

.overlay-logo{
width:145px;
}

.overlay-action{
grid-template-columns:1fr;
}

.overlay-btn{
height:54px;
}

}