/* ================= RESET ================= */

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

/* ================= THEME ================= */

:root{
--bg:#f7f5f2;
--surface:#ffffff;
--primary:#1c1c1c;
--muted:#6f6f6f;
--border:#e6e2dc;
--accent:#2b2b2b;
}

/* ================= BASE ================= */

html,body{
height:100%;
scroll-behavior:smooth;
scroll-padding-top:90px;
}

body{
font-family:"Inter",system-ui,sans-serif;
background:var(--bg);
color:var(--primary);
display:flex;
flex-direction:column;
overflow-x:hidden;
}

main{
flex:1;
}

img{
max-width:100%;
height:auto;
display:block;
}

h1,h2,h3{
font-family:"Playfair Display",serif;
letter-spacing:.3px;
}


/* ================= HEADER (DESKTOP UNCHANGED) ================= */

.header{
position:sticky;
top:0;
z-index:1000;
background:rgba(247,245,242,.85);
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(0,0,0,.05);
}

.header-inner{
max-width:1200px;
margin:auto;
padding:12px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.logo{
display:flex;
align-items:center;
height:60px;
}

.logo img{
height:90px;
transform:scale(1.3);
transform-origin:left center;
}

.nav{
display:flex;
align-items:center;
gap:26px;
}

.nav a{
font-size:14px;
color:var(--muted);
text-decoration:none;
}

.nav-search{
flex:1;
max-width:420px;
display:flex;
align-items:center;
background:white;
border-radius:999px;
border:1px solid var(--border);
overflow:hidden;
height:38px;
}

.nav-search input{
flex:1;
border:none;
outline:none;
padding:0 14px;
background:transparent;
}

.nav-search button{
border:none;
background:none;
padding:0 12px;
cursor:pointer;
}

/* hamburger hidden on desktop */

.menu-toggle{
display:none;
flex-direction:column;
gap:4px;
background:none;
border:none;
cursor:pointer;
}

.menu-toggle span{
width:20px;
height:2px;
background:#333;
display:block;
}


/* ================= HERO ================= */

.hero-slider{
position:relative;
height:70vh;
overflow:hidden;
margin-bottom:40px;
}

.slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:opacity 1.2s ease;
}

.slide.active{
opacity:1;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.75);
}

.slide-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
max-width:700px;
}

.slide-text h2{
font-size:42px;
margin-bottom:10px;
}

.slide-text p{
font-size:18px;
opacity:.9;
}


/* ================= PRODUCT GRID ================= */

.product-section{
max-width:1200px;
margin:auto;
padding:40px;
}

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

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

.product-card{
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.04);
transition:.25s;
}

.product-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.product-card img{
width:100%;
height:360px;
object-fit:contain;
background:#f6f4f1;
padding:8px;
}

.product-card-content{
padding:14px;
}

.product-card h3{
font-size:16px;
line-height:1.35;
}

.product-code{
font-size:12px;
color:#888;
margin-bottom:6px;
}

.deal-badge{
display:inline-block;
background:#cc0c39;
color:white;
font-size:11px;
padding:3px 7px;
border-radius:4px;
margin-bottom:6px;
}

.price-row{
display:flex;
gap:8px;
align-items:center;
margin:4px 0;
flex-wrap:wrap;
}

.discount{
color:#cc0c39;
font-weight:600;
}

.final-price{
font-size:20px;
font-weight:600;
white-space:nowrap;
}

.mrp{
font-size:12px;
color:#777;
text-decoration:line-through;
white-space:nowrap;
}

.product-card button{
width:100%;
padding:12px;
background:var(--accent);
color:white;
border:none;
border-radius:10px;
cursor:pointer;

display:flex;
align-items:center;
justify-content:center;
gap:12px;

font-size:15px;
}

/* qty layout */

.product-card button.qty-mode{

justify-content:space-between;
padding:10px 16px;
}

/* minus / plus buttons */

.qty-btn{

font-size:18px;
font-weight:500;

display:flex;
align-items:center;
justify-content:center;

width:28px;
height:28px;

border-radius:6px;

transition:.2s;
}

/* number */

.quantity{

min-width:22px;
text-align:center;
font-weight:500;
}

/* hover feel */

.qty-btn:hover{

background:rgba(255,255,255,0.12);

}

/* SOLD */

.sold-badge{
position:absolute;
top:12px;
left:12px;
background:rgba(0,0,0,.75);
color:white;
padding:5px 12px;
font-size:11px;
border-radius:4px;
}

.sold-item{
opacity:.6;
filter:grayscale(30%);
}


/* ================= PDP ================= */

.pdp{
max-width:1200px;
margin:80px auto;
padding:0 40px;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:60px;
}

.pdp-gallery img{
max-height:600px;
border-radius:16px;
}

.pdp-thumbs{
display:flex;
gap:12px;
margin-top:16px;
}

.pdp-thumbs img{
width:70px;
height:90px;
object-fit:cover;
border-radius:8px;
border:1px solid var(--border);
cursor:pointer;
}

.pdp-info button{
margin-top:20px;
padding:14px;
background:#111;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
}


/* ================= BRAND ================= */

.brand-section{
padding:90px 20px;
margin-top:60px;
}

.brand-inner{
max-width:900px;
margin:auto;
text-align:center;
}

.brand-title{
font-size:28px;
margin-bottom:20px;
}

.brand-text{
color:var(--muted);
line-height:1.7;
max-width:640px;
margin:auto;
margin-bottom:40px;
}

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


/* ================= FAQ ================= */

/* ================= FAQ ================= */

.faq-section{
padding:60px 20px;
}

.faq-container{
max-width:900px;
margin:auto;
display:flex;
flex-direction:column;
gap:14px;
}

.faq{

background:white;

border-radius:14px;

border:1px solid var(--border);

overflow:hidden;

transition:.25s;

}

.faq-question{

width:100%;

padding:18px 22px;

font-size:15px;

font-weight:500; /* restore bold look */

cursor:pointer;

display:block;

background:white;

border:none;

text-align:left;

font-family:inherit;

/* important */

position:relative;

}

/* PLUS ICON */

.faq-question::after{

content:"+";

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:#222;

transition:.25s ease;

}

/* ROTATE TO CROSS */

.faq.active .faq-question::after{

transform:translateY(-50%) rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

padding:0 22px;

color:#555;

line-height:1.6;

}

.faq.active .faq-answer{

max-height:260px;

padding:10px 22px 18px;

}


/* ================= FOOTER ================= */

.footer{
background:#0f0f0f;
color:#bbb;
padding:40px 20px;
}

.footer-inner{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
}

.footer-social{
display:flex;
gap:18px;
align-items:center;
}

.footer-social a{
color:#bbb;
text-decoration:none;
font-size:14px;
transition:.25s;
}

.footer-social a:hover{
color:white;
text-decoration:underline;
}


/* ================= TOAST ================= */

.toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%) translateY(40px);
background:#111;
color:white;
padding:12px 18px;
border-radius:8px;
font-size:14px;
opacity:0;
pointer-events:none;
transition:.35s ease;
z-index:9999;
box-shadow:0 8px 25px rgba(0,0,0,.2);
}

.toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

/* ===== HOMEPAGE STYLE QTY BUTTON ===== */

/* ===== HOMEPAGE EXACT QTY STYLE ===== */

.qty-box{

display:flex;

align-items:center;

justify-content:center;

gap:22px;

background:#222;

color:white;

border-radius:12px;

width:160px;

height:48px;

margin-top:18px;

}



/* minus plus */

.qty-box button{

background:none;

border:none;

color:white;

font-size:18px;

cursor:pointer;

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:6px;

transition:.18s;

}



/* hover */

.qty-box button:hover{

background:rgba(255,255,255,0.12);

}



/* number */

.qty-box span{

font-size:15px;

font-weight:500;

min-width:16px;

text-align:center;

}

/* ===== PDP IMAGE ARROWS ===== */

/* ===== REAL SLIDER ===== */

.image-stage{

height:520px;

position:relative;

overflow:hidden;

border-radius:14px;

}

/* sliding row */

.image-track{

display:flex;

width:100%;

height:100%;

transition:transform .45s cubic-bezier(.4,0,.2,1);

}

/* each image */

.image-track img{

width:100%;

height:100%;

flex:0 0 100%;

object-fit:contain;

object-position:center;

}

/* arrows */

.gallery-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

width:40px;

height:40px;

border-radius:50%;

border:none;

background:rgba(0,0,0,.45);

color:white;

font-size:18px;

cursor:pointer;

z-index:3;

display:flex;

align-items:center;

justify-content:center;

}

.gallery-arrow.left{

left:12px;

}

.gallery-arrow.right{

right:12px;

}

/* arrows */

.gallery-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

width:42px;

height:42px;

border-radius:50%;

border:none;

background:rgba(0,0,0,.45);

color:white;

font-size:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:.25s ease;

z-index:3;

}

/* left */

.gallery-arrow.left{

left:14px;

}

/* right */

.gallery-arrow.right{

right:14px;

}

.gallery-arrow:hover{

background:rgba(0,0,0,.65);

transform:translateY(-50%) scale(1.06);

}

/* ===== REAL SLIDE ANIMATION ===== */

#main-image{

transition:transform .32s cubic-bezier(.4,.0,.2,1);

}

/* move left */

.slide-out-left{

transform:translateX(-60px);

}

/* move right */

.slide-out-right{

transform:translateX(60px);

}

/* entering position */

.slide-in{

transform:translateX(0);

}

/* make PDP qty button use same horizontal layout as homepage */

.qty-mode{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

padding:10px 16px;

background:#222;

color:white;

border:none;

border-radius:10px;

width:160px;

height:48px;

cursor:pointer;

}

.product-highlights{
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.product-highlights li{
  margin-bottom: 4px;
}

.pdp-gallery{
display:flex;
flex-direction:column;
align-items:center;
}

.image-stage{
width:520px;
max-width:100%;
margin:auto;
}

.pdp-thumbs{
display:flex;
justify-content:center;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
}

/* spacing between major blocks */

.pdp-info h2{
margin-bottom:14px;
}

.pdp-pricing{
margin-bottom:18px;
}

.product-highlights{
margin:14px 0 18px;
}

.artwork-meta{
margin-bottom:18px;
}

.pdp-section{
margin-top:22px;
margin-bottom:6px;
}

.pdp-story{
margin-bottom:16px;
line-height:1.6;
}

.pdp-desc{
margin-bottom:24px;
line-height:1.6;
}

#cart-action{
margin-top:10px;
}

.cert-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.55);

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

visibility:hidden;

opacity:0;

transition:0.3s;

}


.cert-popup.show{

visibility:visible;

opacity:1;

}


.cert-box{

background:white;

padding:35px 40px;

border-radius:12px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

max-width:420px;

width:100%;

}


.cert-box h2{

font-family:"Playfair Display",serif;

font-size:22px;

font-weight:500;

margin-top:18px;

}


.cert-box p{

font-family:"Inter",sans-serif;

font-size:14px;

color:#666;

margin-top:8px;

}


.spinner{

width:46px;
height:46px;

border:3px solid #e5e5e5;

border-top:3px solid black;

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}


@keyframes spin{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(360deg); }

}

/* cart container */

.nav-cart{

position:relative;

font-weight:500;

font-size:14px;

padding-right:6px;

}


/* floating badge */

.cart-badge{

position:absolute;

top:-6px;

right:-12px;

background:#111;

color:#fff;

font-size:10px;

font-weight:600;

padding:2px 6px;

border-radius:999px;

min-width:16px;

text-align:center;

box-shadow:0 2px 6px rgba(0,0,0,.18);

}


/* slight hover polish */

.nav-cart:hover .cart-badge{

transform:translateY(-1px);

}

/* hide badge when empty */

.cart-badge:empty{
display:none;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  /* certificate popup mobile */

.cert-popup{

padding:20px;

}


.cert-box{

width:100%;

max-width:340px;

padding:26px 20px;

border-radius:10px;

}


.cert-box h2{

font-size:18px;

line-height:1.3;

}


.cert-box p{

font-size:13px;

line-height:1.5;

margin-top:6px;

}


/* smaller spinner for mobile */

.spinner{

width:40px;

height:40px;

border-width:3px;

}


.gallery-arrow{

width:32px;

height:32px;

font-size:16px;

}

/* NAVBAR */

/* ===== MOBILE NAV EXPAND (NO SIDEPANEL) ===== */

/* ===== MOBILE HEADER GRID FIX ===== */

.header-inner{

display:grid;

grid-template-columns:auto 1fr auto;

align-items:center;

gap:8px;

}

/* logo left aligned */

.logo{

justify-self:start;

display:flex;

align-items:center;

}

/* prevent logo resizing */

.logo img{

height:30px;

width:auto;

}

/* search takes middle space */

.nav-search{

width:100%;

}

/* hamburger right aligned */

.menu-toggle{

justify-self:end;

}

/* nav items go below */

.nav{

grid-column:1 / -1;

}

/* show hamburger only on mobile */

.menu-toggle{

display:flex;

flex-direction:column;

gap:4px;

}

/* nav hidden initially */

.nav{

width:100%;

display:flex;

flex-direction:column;

gap:12px;

overflow:hidden;

/* collapsed state */

max-height:0;

opacity:0;

transform:translateY(-6px);

transition:

max-height .28s ease,

opacity .18s ease,

transform .18s ease;

}

/* expanded state */

.nav.active{

max-height:220px;

opacity:1;

transform:translateY(0);

margin-top:6px;

}

/* nav links */

.nav a{

padding:6px 0;

font-size:14px;

}

/* keep search stable */

.nav-search{

flex:1;

min-width:0;

}

/* prevent logo shrinking */

.logo{

flex-shrink:0;

}

/* hamburger → cross animation */

.menu-toggle span{

transition:.25s ease;

}

.menu-toggle.open span:nth-child(1){

transform:rotate(45deg) translate(4px,4px);

}

.menu-toggle.open span:nth-child(2){

opacity:0;

}

.menu-toggle.open span:nth-child(3){

transform:rotate(-45deg) translate(5px,-5px);

}

/* HERO */

.hero-slider{
height:65vh;
}

.slide img{
height:65vh;
}

/* GRID */

.product-section{
padding:26px 12px;
}

.product-grid{
grid-template-columns:1fr 1fr;
gap:14px;
}

.product-card img{
height:220px;
object-fit:contain;
padding:6px;
}

.product-card-content{
padding:10px;
}

.product-card h3{
font-size:13px;
}

.final-price{
font-size:15px;
}

/* PDP */

.pdp{
grid-template-columns:1fr;
padding:0 16px;
gap:30px;
margin:40px auto;
}

.image-stage{

height:420px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

/* main image always fits same box */

#main-image{

width:100%;

height:100%;

object-fit:contain;

}

/* thumbnails stay consistent */

.pdp-thumbs img{

height:64px;

object-fit:cover;

}

/* BRAND */

.brand-points{
grid-template-columns:1fr;
}

/* FOOTER */

.footer-inner{
flex-direction:column;
align-items:flex-start;
}

/* FAQ ICON */

.faq-question{
position:relative;
padding-right:40px;
}

.faq-question::after{
content:"+";
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%) rotate(0deg);
transition:.3s ease;
font-size:18px;
}

.faq.active .faq-question::after{
transform:translateY(-50%) rotate(45deg);
}

.pdp-gallery{
display:flex;
flex-direction:column;
align-items:center;
}

/* force image box to define width */
.image-stage{
width:100%;
max-width:520px;
margin:auto;
}

/* thumbnails align with image width */
.pdp-thumbs{
display:flex;
justify-content:center;
gap:12px;
margin-top:14px;

width:100%;
max-width:520px;
margin-left:auto;
margin-right:auto;
}



}

/* ================= SUCCESS PAGE ================= */

.success-body{

background:#f7f5f2;

font-family:"Inter",sans-serif;

}


.success-page{

min-height:85vh;

display:flex;

align-items:center;

justify-content:center;

padding:60px 20px;

}


.success-card{

max-width:520px;

background:white;

padding:55px 45px;

border-radius:16px;

text-align:center;

box-shadow:0 12px 40px rgba(0,0,0,0.05);

animation:fadeUp .5s ease;

}


.success-icon{

width:64px;

height:64px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

font-size:26px;

margin-bottom:18px;

background:#111;

color:white;

}


.success-card h1{

font-family:"Playfair Display",serif;

font-weight:500;

font-size:28px;

margin-bottom:12px;

}


.success-text{

color:#555;

line-height:1.7;

margin-bottom:28px;

font-size:15px;

}


.success-meta{

font-size:14px;

color:#777;

margin-bottom:32px;

display:flex;

flex-direction:column;

gap:6px;

}


.success-actions{

display:flex;

gap:12px;

justify-content:center;

flex-wrap:wrap;

}


.success-btn{

padding:13px 22px;

background:#111;

color:white;

text-decoration:none;

border-radius:10px;

font-size:14px;

transition:.25s;

}


.success-btn:hover{

background:#000;

}


.success-btn.secondary{

background:#ece9e4;

color:#333;

}


.success-btn.secondary:hover{

background:#e2ddd6;

}


/* animation */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}



}


/* mobile */

@media(max-width:600px){

.success-card{

padding:40px 24px;

}

.success-card h1{

font-size:24px;

}

}