/* ============ ICONS ============ */
.ph{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;}
i.ph{font-style:normal;}
.icon-btn i, .mobile-link i, .chip i, .footer-col a i, .cat-card-body h3 i, .mobile-panel-foot .btn i{
  display:inline-flex; align-items:center; justify-content:center;
}

/* ============ TOKENS ============ */
:root{
  --ivory:#FFF9F5;
  --ivory-deep:#FCF1E9;
  --blush:#EFC6CE;
  --blush-soft:#F8E3E7;
  --blush-line:rgba(109,48,74,0.14);
  --plum:#6D304A;
  --plum-deep:#4B2035;
  --gold:#C9A46C;
  --gold-deep:#9B6B36;
  --gold-soft:#E8D6B8;
  --rose-gold:#C17A82;
  --glass:rgba(255,255,255,0.68);
  --shadow-soft:0 18px 50px rgba(109,48,74,0.12);
  --shadow-luxe:0 26px 70px rgba(75,32,53,0.18);
  --ink:#2C2526;
  --ink-soft:#7A6F6D;
  --ink-faint:#B3A9A6;
  --white:#FFFFFF;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Poppins', -apple-system, sans-serif;
  --accent:'Manrope', -apple-system, sans-serif;
  --hdr:78px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); font-weight:400; color:var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(239,198,206,.34), transparent 28rem),
    linear-gradient(180deg,var(--ivory) 0%,#fff 42%,var(--ivory) 100%);
  line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; font-weight:400;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;object-fit:cover;}
button{cursor:pointer;border:none;background:none;font-family:inherit;outline:none;}
input{font-family:inherit;outline:none;border:none;}
.container{width:90%;max-width:1280px;margin:0 auto;}
.container--narrow{width:90%;max-width:760px;margin:0 auto;}
.serif{font-family:var(--serif);}
:focus-visible{outline:2px solid var(--plum); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

/* ============ TYPE UTILS ============ */
.eyebrow{
  font-family:var(--accent); font-size:.72rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--plum);
}
.eyebrow.on-dark{color:var(--gold-soft);}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:var(--ink); letter-spacing:-.01em;}
.section-head{max-width:640px; margin:0 auto 46px; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin:10px 0 14px; line-height:1.15;}
.section-head p{color:var(--ink-soft); font-size:1rem; font-weight:400;}
.section-pad{padding:96px 0;}
@media(max-width:768px){.section-pad{padding:64px 0;}}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; font-size:.76rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; border-radius:100px; transition:all .35s var(--ease); white-space:nowrap; font-family:var(--accent);
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{
  content:''; position:absolute; inset:1px auto 1px 1px; width:42%;
  background:linear-gradient(90deg,rgba(255,255,255,.38),rgba(255,255,255,0));
  border-radius:inherit; pointer-events:none; z-index:-1;
}
.btn-primary{
  background:linear-gradient(135deg,var(--plum-deep),var(--plum) 52%,#8E4661);
  color:var(--white); box-shadow:0 14px 28px rgba(109,48,74,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(109,48,74,0.34), inset 0 1px 0 rgba(255,255,255,.24);}
.btn-outline{background:rgba(255,255,255,.58); color:var(--plum); border:1px solid rgba(109,48,74,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.btn-outline:hover{background:var(--plum); color:var(--white); transform:translateY(-2px); box-shadow:0 16px 36px rgba(109,48,74,.22);}
.btn-gold{
  background:linear-gradient(135deg,var(--rose-gold),var(--gold) 48%,var(--gold-deep));
  color:var(--white); box-shadow:0 14px 32px rgba(155,107,54,.24), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(155,107,54,0.3), inset 0 1px 0 rgba(255,255,255,.32);}
.btn-wa{
  background:linear-gradient(135deg,#1F7A50,#29B66B); color:var(--white); width:100%; padding:12px 18px; border-radius:100px;
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:7px; transition:all .3s var(--ease);
  box-shadow:0 12px 24px rgba(31,122,80,.18), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-wa:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(31,122,80,.25), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-wa i{font-size:1.05rem;}
.btn-sm{padding:10px 18px; font-size:.68rem;}

/* ============ PLACEHOLDER TILES ============ */
/* Swap real product photography by replacing this block with an <img> tag - every card below is marked. */
.ph-tile{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.48),rgba(255,255,255,0) 34%),
    linear-gradient(150deg,var(--blush-soft) 0%, var(--ivory-deep) 60%, var(--blush-soft) 100%);
  overflow:hidden;
}
.ph-tile img{
  position:relative; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .7s var(--ease);
}
.ph-tile:hover img{transform:scale(1.05); filter:saturate(1.05) contrast(1.04);}
.ph-tile::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.36),transparent 34%,rgba(255,255,255,.16) 58%,transparent 74%);
  opacity:.18; z-index:1; pointer-events:none;
}
.ph-tile i{font-size:2.4rem; color:var(--plum); opacity:.4;}
.ph-tile::after{
  content:'SHIZ PLACE'; position:absolute; bottom:10px; right:14px;
  font-family:var(--accent); font-size:.6rem; letter-spacing:.18em; color:var(--gold); opacity:.18; z-index:2;
}
.ph-tile.tone-plum{background:linear-gradient(145deg,#8E4862 0%, #5D2941 48%, var(--plum-deep) 100%);}
.ph-tile.tone-plum i{color:var(--gold-soft); opacity:.7;}
.ph-tile.tone-plum::after{color:rgba(255,255,255,.5);}
.ph-tile.tone-gold{background:linear-gradient(150deg,var(--gold-soft) 0%, var(--ivory-deep) 100%);}

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; background:var(--ivory); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.hide{opacity:0; visibility:hidden;}
.loader-mark{font-family:var(--serif); font-size:1.3rem; letter-spacing:.3em; color:var(--plum);}
.loader-bar{width:70px; height:1px; background:var(--blush-line); position:relative; overflow:hidden;}
.loader-bar::after{content:'';position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--gold); animation:sweep 1s var(--ease) forwards;}
@keyframes sweep{to{left:0;}}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; width:100%; height:var(--hdr); z-index:1000;
  background:rgba(255,249,245,0.78); backdrop-filter:blur(22px) saturate(1.18); -webkit-backdrop-filter:blur(22px) saturate(1.18);
  border-bottom:1px solid var(--blush-line); transition:box-shadow .4s ease, background .4s ease;
}
header.scrolled{box-shadow:0 14px 44px rgba(109,48,74,0.12); background:rgba(255,249,245,0.92);}

/* transparent header over page heroes (shop / wishlist) — fully invisible, blends hero image with nav */
header.header--transparent{
  background:transparent !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-bottom:none !important;
}
/* fully remove header from shop page */
header.header--hidden{
  display:none !important;
}

header.header--transparent.scrolled{
  background:rgba(255,249,245,0.92) !important;
  backdrop-filter:blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18) !important;
  box-shadow:0 14px 44px rgba(109,48,74,0.12) !important;
  border-bottom:1px solid var(--blush-line) !important;
}
header.header--transparent:not(.scrolled) .nav-links a{color:rgba(255,255,255,.94);}
header.header--transparent:not(.scrolled) .nav-links a:hover,
header.header--transparent:not(.scrolled) .nav-links a.active{color:#fff;}
header.header--transparent:not(.scrolled) .nav-links a::after{background:var(--gold-soft);}
header.header--transparent:not(.scrolled) .icon-btn{color:rgba(255,255,255,.94);}
header.header--transparent:not(.scrolled) .icon-btn:hover{color:#fff;}
header.header--transparent:not(.scrolled) .hamburger{color:rgba(255,255,255,.94);}
header.header--transparent:not(.scrolled) .hamburger:hover{background:rgba(255,255,255,.16);}
header.header--transparent:not(.scrolled) .logo{color:#fff;}
header.header--transparent:not(.scrolled) .logo-script{color:var(--gold-soft);}
header.header--transparent:not(.scrolled) .logo-tag{color:rgba(255,255,255,.74);}
header.header--transparent:not(.scrolled) .brand-mark{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));}
.nav-container{display:flex; align-items:center; justify-content:space-between; height:100%;}
.logo-wrap{display:flex; align-items:center; gap:10px; line-height:1;}
.brand-mark{
  width:46px; height:54px; object-fit:contain; flex:0 0 auto;
  filter:drop-shadow(0 8px 12px rgba(109,48,74,.16));
}
.brand-text{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.logo{font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:.16em; color:var(--plum); text-transform:uppercase;}
.logo-script{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:.86rem;
  color:var(--gold-deep); letter-spacing:.02em; margin-top:-2px;
}
.logo-tag{font-size:.5rem; letter-spacing:.16em; color:var(--ink-soft); text-transform:uppercase; display:block; white-space:nowrap;}
.footer-brand .logo-wrap{display:inline-flex;}
.footer-brand .brand-mark{filter:drop-shadow(0 10px 16px rgba(0,0,0,.32));}
.footer-brand .logo{color:#fff;}
.footer-brand .logo-script{color:var(--gold-soft);}
@media(max-width:520px){
  .logo-wrap{gap:8px;}
  .brand-mark{width:36px; height:44px;}
  .brand-text{gap:2px;}
  .logo{font-size:.86rem; letter-spacing:.09em;}
  .logo-script{font-size:.72rem;}
  .logo-tag{font-size:.42rem; letter-spacing:.08em;}
}
.nav-links{display:flex; gap:34px;}
.nav-links a{
  font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--ink); position:relative; padding:4px 0;
  transition:color .3s ease; font-family:var(--accent);
}
.nav-links a::after{content:'';position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .35s var(--ease);}
.nav-links a:hover, .nav-links a.active{color:var(--plum);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:20px;}
.icon-btn{position:relative; font-size:1.22rem; color:var(--ink); transition:color .3s ease;}
.icon-btn:hover{color:var(--plum);}
.icon-badge{
  position:absolute; top:-7px; right:-9px; background:var(--plum); color:#fff; font-size:.6rem; font-weight:700;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.hamburger{display:none; font-size:1.4rem; color:var(--ink); padding:8px; cursor:pointer; border-radius:8px; transition:background .3s ease; background:none; border:none;}
.hamburger:hover{background:var(--blush-soft);}
.hamburger.hidden{display:none !important;}
@media(max-width:940px){
  .nav-links{display:none;}
  .hamburger{display:flex !important; align-items:center; justify-content:center; visibility:visible;}
  .nav-actions{display:flex; gap:16px;}
}
@media(max-width:520px){.nav-actions{gap:10px;} .icon-btn{font-size:1.12rem;} .search-btn, .wishlist-btn{display:none;}}

/* search bar */
.search-bar{
  position:fixed; top:var(--hdr); left:0; width:100%; background:var(--white); border-bottom:1px solid var(--blush-line);
  z-index:999; padding:18px 0; transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:0 10px 30px rgba(109,48,74,0.06);
}
.search-bar.open{transform:translateY(0);}
.search-bar.hidden{display:none !important;}
.search-bar .container{display:flex; align-items:center; gap:14px;}
.search-bar input{flex:1; font-size:1rem; font-family:var(--sans); color:var(--ink); background:transparent;}
.search-bar input::placeholder{color:var(--ink-faint);}

/* mobile nav */
.mobile-overlay{position:fixed; inset:0; background:rgba(44,37,38,.4); z-index:1400; opacity:0; visibility:hidden; transition:all .4s ease;}
.mobile-overlay.open{opacity:1; visibility:visible;}
.mobile-panel{
  position:fixed; top:0; right:0; width:82%; max-width:340px; height:100%; background:var(--ivory); z-index:1500;
  transform:translateX(100%); transition:transform .45s var(--ease); padding:28px 26px; overflow-y:auto;
}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
.mobile-panel-head .logo-wrap{pointer-events:none;}
.mobile-panel-head .brand-mark{width:48px; height:58px;}
.mobile-panel a{display:block; font-family:var(--sans); font-size:1rem; padding:16px 0; border-bottom:1px solid var(--blush-line); color:var(--ink); font-weight:500;}
.mobile-link{display:flex; align-items:center; gap:12px; font-size:.95rem; font-weight:500;}
.mobile-link i{font-size:1.2rem; color:var(--plum); flex:0 0 auto;}
.mobile-panel-foot{margin-top:30px; display:flex; flex-direction:column; gap:12px;}
.mobile-panel-foot .btn{display:flex; align-items:center; justify-content:center; gap:8px;}
.mobile-panel-foot .btn i{font-size:1.1rem;}

/* ============ HERO ============ */
.hero{
  padding:calc(var(--hdr) + 56px) 0 70px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 82% 8%, rgba(239,198,206,.78) 0%, rgba(255,249,245,0) 52%),
    radial-gradient(ellipse at 16% 92%, rgba(201,164,108,.22) 0%, rgba(255,249,245,0) 38%),
    linear-gradient(180deg,var(--ivory) 0%,#fff 100%);
}
.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;}
@media(max-width:940px){.hero .container{grid-template-columns:1fr; text-align:center;}}
.hero-left{animation:riseIn .9s var(--ease) both;}
.hero-kicker{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
@media(max-width:940px){.hero-kicker{justify-content:center;}}
.hero-kicker span{height:1px; width:34px; background:var(--gold);}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem); line-height:1.08; margin-bottom:22px; color:var(--ink);}
.hero h1 em{color:var(--plum); font-style:italic;}
.hero p{font-size:1.05rem; color:var(--ink-soft); max-width:460px; margin-bottom:34px;}
@media(max-width:940px){.hero p{margin-left:auto; margin-right:auto;}}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
@media(max-width:940px){.hero-ctas{justify-content:center;}}
.hero-visual{position:relative; height:480px; animation:riseIn 1.1s var(--ease) .1s both;}
@media(max-width:640px){.hero-visual{height:380px;}}
.hero-card{position:absolute; border-radius:26px; box-shadow:var(--shadow-luxe); overflow:hidden; border:1px solid rgba(255,255,255,.56);}
.hero-card--main{width:64%; height:100%; left:0; top:0; animation:floatY 6s ease-in-out infinite;}
.hero-card--a{width:44%; height:46%; right:0; top:4%; animation:floatY 7s ease-in-out infinite .4s;}
.hero-card--b{width:38%; height:38%; right:8%; bottom:0; animation:floatY 6.5s ease-in-out infinite .8s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes riseIn{from{opacity:0; transform:translateY(24px);}to{opacity:1; transform:translateY(0);}}
@media(max-width:640px){
  :root{--hdr:68px;}
  .hero{padding:calc(var(--hdr) + 34px) 0 48px;}
  .hero .container{gap:30px;}
  .hero-kicker{margin-bottom:14px;}
  .hero h1{font-size:clamp(2.35rem,12vw,3.15rem); margin-bottom:16px;}
  .hero p{font-size:.96rem; margin-bottom:24px;}
  .hero-ctas{gap:10px;}
  .hero-ctas .btn{flex:1 1 100%; padding:13px 18px;}
  .hero-visual{height:330px; max-width:360px; width:100%; margin:0 auto;}
  .hero-card{border-radius:22px;}
}

/* ============ CATEGORY CARDS ============ */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:940px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  border-radius:22px; overflow:hidden; position:relative; background:var(--white);
  box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  border:1px solid rgba(109,48,74,.08);
}
.cat-card:hover{transform:translateY(-8px); box-shadow:0 28px 62px rgba(109,48,74,0.18);}
.cat-card .ph-tile{height:140px;}
.cat-card:hover .ph-tile i{transform:scale(1.12);}
.ph-tile i{transition:transform .5s var(--ease);}
.cat-card-body{padding:14px 14px 16px;}
.cat-card-body h3{font-size:1.1rem; margin-bottom:6px; display:flex; align-items:center; gap:8px;}
.cat-card-body h3 i{font-size:1.3rem; color:var(--plum);}  
.cat-card-body p{font-size:.86rem; color:var(--ink-soft); margin-bottom:12px;}
.cat-card-body .cat-link{font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--plum); text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; font-family:var(--accent);}
.cat-card-body .cat-link i{transition:transform .3s var(--ease);}
.cat-card:hover .cat-link i{transform:translateX(4px);}

/* ============ PRODUCT GRID / CARD ============ */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:1080px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.prod-grid{grid-template-columns:repeat(2,1fr); gap:10px;}}
.prod-card{background:rgba(255,255,255,.9); border-radius:18px; overflow:hidden; box-shadow:0 10px 28px rgba(109,48,74,.09); transition:transform .4s var(--ease), box-shadow .4s var(--ease); position:relative; border:1px solid rgba(109,48,74,.08);}
.prod-card:hover{transform:translateY(-6px); box-shadow:0 26px 58px rgba(109,48,74,0.17);}
.prod-img-wrap{position:relative; cursor:pointer; height:210px; overflow:hidden; background:var(--ivory-deep);}
.prod-img-wrap::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 36%,rgba(255,255,255,.12) 62%,transparent 78%); pointer-events:none;}
.prod-img{width:100%; height:100%; object-fit:cover; cursor:pointer; transition:transform .65s var(--ease), filter .65s var(--ease);}
.prod-card:hover .prod-img{transform:scale(1.06); filter:saturate(1.06) contrast(1.04);}
.prod-card .ph-tile{height:210px;}
@media(max-width:760px){.prod-img-wrap,.prod-card .ph-tile{height:142px;}}
.prod-card:hover .ph-tile i{transform:scale(1.1);}
.badge{position:absolute; top:12px; left:12px; background:linear-gradient(135deg,var(--plum-deep),var(--plum)); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.08em; padding:5px 11px; border-radius:100px; text-transform:uppercase; z-index:2; box-shadow:0 8px 18px rgba(75,32,53,.24);}
.badge.badge-best{background:linear-gradient(135deg,var(--rose-gold),var(--gold-deep));}
.wish-toggle{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--plum); z-index:2; transition:transform .25s ease, background .25s ease; box-shadow:0 8px 20px rgba(44,37,38,.12);}
.wish-toggle:hover{transform:scale(1.1);}
.wish-toggle.active i::before{content:"\eb4d";} /* filled heart via phosphor fill class swap handled in JS */
.wish-toggle.active i.ph-fill{color:var(--plum);}
.prod-body{padding:12px 14px 14px; display:flex; flex-direction:column;}
.prod-cat{font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:3px;}
.prod-name{font-family:var(--serif); font-size:.98rem; line-height:1.16; margin-bottom:4px; cursor:pointer;}
.prod-price{font-size:.88rem; font-weight:700; color:var(--plum); margin-bottom:9px;}
.prod-actions{display:flex; align-items:center; gap:6px;}
.btn-add{
  flex:1; min-height:34px; border-radius:100px; padding:8px 10px;
  background:linear-gradient(135deg,var(--plum-deep),var(--plum));
  color:#fff; font-family:var(--accent); font-size:.62rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 8px 18px rgba(109,48,74,.16), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.btn-add:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(109,48,74,.26), inset 0 1px 0 rgba(255,255,255,.24);}
.prod-view{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--plum); background:var(--ivory); border:1px solid var(--blush-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:all .25s ease;
}
.prod-view:hover{background:var(--blush-soft); transform:translateY(-1px);}
@media(max-width:760px){
  .container{width:92%;}
  .prod-card{border-radius:14px; box-shadow:0 8px 22px rgba(109,48,74,.1);}
  .prod-img-wrap,.prod-card .ph-tile{height:136px;}
  .prod-body{padding:8px 9px 10px;}
  .prod-cat{font-size:.5rem; letter-spacing:.07em; margin-bottom:2px;}
  .prod-name{font-size:.88rem; line-height:1.12; margin-bottom:3px;}
  .prod-price{font-size:.8rem; margin-bottom:7px;}
  .btn-add{min-height:31px; font-size:.56rem; letter-spacing:.04em; padding-inline:7px;}
  .prod-view{width:31px; height:31px; font-size:.9rem;}
  .badge{top:8px; left:8px; font-size:.5rem; padding:3px 8px;}
  .wish-toggle{top:7px; right:7px; width:29px; height:29px; font-size:.92rem;}
}
@media(max-width:380px){
  .prod-grid{gap:8px;}
  .prod-img-wrap,.prod-card .ph-tile{height:126px;}
  .prod-body{padding-inline:8px;}
}

/* ============ MOOD RIBBON (signature element) ============ */
.mood-wrap{background:linear-gradient(180deg, var(--ivory) 0%, rgba(248,227,231,.82) 100%); padding:90px 0;}
.mood-scroller{display:flex; gap:16px; overflow-x:auto; padding:8px 4px 20px; scrollbar-width:none;}
.mood-scroller::-webkit-scrollbar{display:none;}
.mood-chip{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer;
  padding:22px 26px; border-radius:24px; background:rgba(255,255,255,.74); box-shadow:var(--shadow-soft);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); min-width:118px;
  border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.mood-chip:hover{transform:translateY(-8px) scale(1.04); box-shadow:0 18px 34px rgba(109,48,74,0.18);}
.mood-orb{width:52px; height:52px; border-radius:50%; position:relative; transition:box-shadow .4s ease;}
.mood-chip:hover .mood-orb{box-shadow:0 0 0 8px rgba(201,164,108,0.14);}
.mood-chip span{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-family:var(--accent);}

/* ============ FASHION SPLIT ============ */
.fashion-split{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:820px){.fashion-split{grid-template-columns:1fr;}}
.fashion-panel{position:relative; border-radius:26px; overflow:hidden; min-height:440px; display:flex; align-items:flex-end; box-shadow:var(--shadow-luxe); border:1px solid rgba(255,255,255,.45);}
.fashion-panel .ph-tile{position:absolute; inset:0; height:100%;}
.fashion-panel-content{position:relative; z-index:2; padding:36px; color:#fff; width:100%; background:linear-gradient(0deg, rgba(44,26,36,.82) 0%, rgba(44,26,36,.14) 68%, rgba(44,26,36,0) 100%);}
.fashion-panel-content .eyebrow{color:var(--gold-soft);}
.fashion-panel-content h3{color:#fff; font-size:1.9rem; margin:8px 0 18px;}

/* ============ WHY US ============ */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr;}}
.why-card{text-align:center; padding:36px 22px; background:rgba(255,255,255,.86); border-radius:20px; box-shadow:var(--shadow-soft); transition:transform .35s var(--ease), box-shadow .35s var(--ease); border:1px solid rgba(109,48,74,.08);}
.why-card:hover{transform:translateY(-6px); box-shadow:0 24px 52px rgba(109,48,74,.15);}
.why-icon{width:64px; height:64px; border-radius:50%; background:linear-gradient(145deg,var(--blush-soft),#fff); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.6rem; color:var(--plum); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 22px rgba(109,48,74,.1);}
.why-card h4{font-size:1.05rem; margin-bottom:8px;}
.why-card p{font-size:.86rem; color:var(--ink-soft);}

/* ============ PROMISE ============ */
.promise{background:linear-gradient(135deg,var(--plum-deep),var(--plum) 54%,#8B4560); color:#fff; padding:110px 0; text-align:center; position:relative; overflow:hidden;}
.promise::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(201,164,108,0.24), transparent 55%), linear-gradient(120deg,rgba(255,255,255,.08),transparent 42%);}
.promise .container{position:relative; z-index:2;}
.promise h2{color:#fff; font-size:clamp(2rem,4vw,2.9rem); margin:14px 0 22px;}
.promise p{color:rgba(255,255,255,.78); max-width:600px; margin:0 auto 26px; font-size:1.02rem;}
.promise .tagline{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--gold-soft); margin-bottom:34px;}

/* ============ SOCIAL ============ */
.social-sec{padding:80px 0; text-align:center;}
.social-icons{display:flex; justify-content:center; gap:20px; margin-top:26px;}
.social-icons a{width:52px; height:52px; border-radius:50%; background:var(--blush-soft); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--plum); transition:all .3s var(--ease);}
.social-icons a:hover{background:var(--plum); color:#fff; transform:translateY(-4px);}

/* ============ NEWSLETTER ============ */
.newsletter{background:linear-gradient(135deg,var(--ivory-deep),#fff); padding:70px 0;}
.newsletter-inner{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;}
.newsletter-form{display:flex; gap:0; max-width:420px; width:100%; background:#fff; border-radius:100px; padding:6px; box-shadow:var(--shadow-soft); border:1px solid rgba(109,48,74,.08);}
.newsletter-form input{flex:1; padding:12px 18px; font-size:.9rem; background:transparent;}
.newsletter-form button{padding:12px 26px; border-radius:100px; background:linear-gradient(135deg,var(--plum-deep),var(--plum)); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}

/* ============ FOOTER ============ */
footer{background:linear-gradient(135deg,#261F21,var(--ink) 62%,#3B2630); color:rgba(255,249,245,.72); padding:76px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
.footer-brand p{margin-top:14px; font-size:.86rem; max-width:260px; color:rgba(255,249,245,.55);}
.footer-col h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; font-family:var(--accent);}
.footer-col a{display:block; font-size:.86rem; margin-bottom:11px; color:rgba(255,249,245,.68); transition:color .25s ease; display:flex; align-items:center; gap:8px;}
.footer-col a i{font-size:1rem; flex:0 0 auto;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,249,245,.12); padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.76rem; color:rgba(255,249,245,.45);}
.footer-credit{
  margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,249,245,.12);
  text-align:center;
}
.footer-credit a{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; transition:all .3s ease; color:rgba(255,249,245,.65);
}
.footer-credit a:hover{
  color:rgba(255,249,245,.95);
}
.credit-text{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,249,245,.45);
  font-weight:500;
}
.credit-name{
  font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--gold-deep), var(--rose-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ============ FLOATING BUTTONS ============ */
.float-stack{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:14px; z-index:900;}
.float-btn{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 14px 30px rgba(44,37,38,0.22), inset 0 1px 0 rgba(255,255,255,.24); transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.float-btn:hover{transform:scale(1.08);}
.float-btn.wa{background:linear-gradient(135deg,#1F7A50,#29B66B); color:#fff;}
.float-btn.bag{background:linear-gradient(135deg,var(--plum-deep),var(--plum)); color:#fff; position:relative;}
.float-btn.bag .icon-badge{top:-4px; right:-4px;}
@media(max-width:720px){
  .float-stack{right:14px; bottom:14px; gap:10px;}
  .float-btn{width:50px; height:50px; font-size:1.35rem;}
}

/* ============ PAGE SECTIONS / ROUTER ============ */
.page-section{display:none;}
.page-section.active{display:block;}
.page-hero{
  background-size:cover; background-position:center; background-attachment:fixed;
  position:relative; height:100vh; min-height:620px; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
  background-color:var(--plum-deep);
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(75,32,53,.72) 0%, rgba(75,32,53,.26) 42%, rgba(109,48,74,.58) 100%);
}
.page-hero .container{
  position:relative; z-index:2; color:#fff;
}
.page-hero h1{
  font-size:clamp(2.2rem,5vw,3.5rem); margin:16px 0 22px; color:#fff; line-height:1.1;
}
.page-hero p{
  font-size:1.1rem; color:rgba(255,255,255,0.9); max-width:500px; margin:0 auto;
}
@media(max-width:720px){
  .page-hero{height:100svh; min-height:480px; background-attachment:scroll; padding:calc(var(--hdr) + 20px) 0 30px; background-position:center 28%;}
  .page-hero h1{font-size:clamp(2rem,11vw,2.65rem); margin:10px 0 12px;}
  .page-hero p{font-size:.94rem;}
}

.home-nav-btn{
  position:absolute; top:28px; left:0; background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.3);
  padding:10px 14px; border-radius:8px; font-size:1.2rem; cursor:pointer; transition:all .3s ease; z-index:10;
}
.home-nav-btn:hover{background:rgba(255,255,255,0.28); border-color:rgba(255,255,255,0.5);}
@media(max-width:720px){
  .home-nav-btn{top:16px; padding:8px 12px; font-size:1rem;}
}

/* filter chips */
.chip-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px;}
.chip{
  padding:10px 20px; border-radius:100px; font-size:.74rem; font-weight:600; letter-spacing:.04em;
  background:rgba(255,255,255,.82); color:var(--ink); border:1px solid var(--blush-line); transition:all .3s ease; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8); display:inline-flex; align-items:center; gap:6px;
}
.chip i{font-size:.85rem; flex:0 0 auto;}
.chip:hover{border-color:var(--plum); color:var(--plum); transform:translateY(-1px);}
.chip.active{background:linear-gradient(135deg,var(--plum-deep),var(--plum)); color:#fff; border-color:var(--plum);}
.chip.active i{color:inherit;}
.chip-row.moods{margin-bottom:40px;}
.chip.mood-active{background:linear-gradient(135deg,var(--rose-gold),var(--gold-deep)); color:#fff; border-color:transparent;}
@media(max-width:720px){
  .chip-row{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:4px 2px 12px; margin-inline:-2px; scrollbar-width:none;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto; padding:9px 15px; font-size:.66rem;}
  .chip-row.moods{margin-bottom:26px;}
}

.empty-state{text-align:center; padding:70px 20px; color:var(--ink-soft);}
.empty-state i{font-size:2.6rem; color:var(--blush); margin-bottom:16px; display:block;}

/* ============ MODAL ============ */
.modal-overlay{position:fixed; inset:0; background:rgba(44,37,38,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:2000; opacity:0; visibility:hidden; transition:all .35s ease; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{background:#fff; border-radius:24px; max-width:820px; width:100%; max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; position:relative; transform:translateY(20px); transition:transform .4s var(--ease); box-shadow:0 32px 90px rgba(44,37,38,.28); border:1px solid rgba(255,255,255,.5);}
.modal-overlay.open .modal{transform:translateY(0);}
@media(max-width:720px){.modal{grid-template-columns:1fr;}}
.modal-close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:var(--ivory); display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:3;}
.modal .ph-tile{height:100%; min-height:280px;}
.modal-info{padding:34px;}
.modal-info .prod-cat{margin-bottom:8px;}
.modal-info h3{font-size:1.5rem; margin-bottom:10px;}
.modal-info .modal-price{font-size:1.2rem; color:var(--plum); font-weight:700; margin-bottom:16px;}
.modal-info .modal-desc{color:var(--ink-soft); font-size:.9rem; margin-bottom:22px;}
.field-group{margin-bottom:18px;}
.field-group label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;}
.pill-select{display:flex; flex-wrap:wrap; gap:8px;}
.pill-opt{padding:9px 16px; border-radius:100px; border:1px solid var(--blush-line); font-size:.78rem; font-weight:600; transition:all .25s ease;}
.pill-opt.active{background:var(--plum); border-color:var(--plum); color:#fff;}
.qty-stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--blush-line); border-radius:100px; overflow:hidden;}
.qty-stepper button{width:36px; height:36px; font-size:1rem; color:var(--plum);}
.qty-stepper span{width:36px; text-align:center; font-weight:700; font-size:.9rem;}
.modal-actions{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
@media(max-width:720px){
  .modal-overlay{align-items:flex-end; padding:0;}
  .modal{width:100%; max-height:92vh; border-radius:26px 26px 0 0;}
  .modal .ph-tile{min-height:260px; max-height:38vh;}
  .modal-info{padding:24px 20px 26px;}
}

/* ============ ORDER BAG PANEL ============ */
.bag-overlay{position:fixed; inset:0; background:rgba(44,37,38,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:2000; opacity:0; visibility:hidden; transition:all .35s ease;}
.bag-overlay.open{opacity:1; visibility:visible;}
.bag-panel{position:fixed; top:0; right:0; height:100%; width:92%; max-width:420px; background:linear-gradient(180deg,#fff,var(--ivory)); z-index:2100; transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; box-shadow:-26px 0 70px rgba(44,37,38,.22);}
.bag-panel.open{transform:translateX(0);}
.bag-head{padding:24px 24px 18px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--blush-line);}
.bag-head h3{font-size:1.2rem;}
.bag-items{flex:1; overflow-y:auto; padding:18px 24px;}
.bag-item{display:flex; gap:14px; padding:14px; margin-bottom:12px; border:1px solid rgba(109,48,74,.08); border-radius:18px; background:rgba(255,255,255,.76); box-shadow:0 10px 28px rgba(109,48,74,.08);}
.bag-item .ph-tile{width:70px; height:70px; border-radius:14px; flex:0 0 auto;}
.bag-item .ph-tile i{font-size:1.3rem;}
.bag-item-info{flex:1;}
.bag-item-info h5{font-family:var(--serif); font-size:.96rem; margin-bottom:3px;}
.bag-item-meta{font-size:.72rem; color:var(--ink-soft); margin-bottom:8px;}
.bag-item-bottom{display:flex; align-items:center; justify-content:space-between;}
.bag-remove{font-size:.7rem; color:var(--ink-faint); text-decoration:underline; cursor:pointer;}
.bag-foot{padding:22px 24px 28px; border-top:1px solid var(--blush-line); background:rgba(255,255,255,.72); box-shadow:0 -14px 32px rgba(109,48,74,.08);}
.bag-total-line{display:flex; justify-content:space-between; font-size:.95rem; margin-bottom:16px;}
.bag-total-line strong{color:var(--plum); font-size:1.1rem;}
@media(max-width:720px){
  .bag-panel{top:auto; bottom:0; right:0; left:0; width:100%; max-width:none; height:min(86vh,720px); border-radius:26px 26px 0 0; transform:translateY(100%);}
  .bag-panel.open{transform:translateY(0);}
  .bag-head{padding:20px 20px 14px;}
  .bag-items{padding:14px 16px;}
  .bag-foot{padding:18px 16px 22px;}
}

/* toast */
#toastContainer{position:fixed; top:96px; left:50%; transform:translateX(-50%); z-index:3000; display:flex; flex-direction:column; gap:10px; align-items:center;}
.toast{background:var(--ink); color:#fff; padding:13px 22px; border-radius:100px; font-size:.82rem; display:flex; align-items:center; gap:8px; box-shadow:0 12px 30px rgba(0,0,0,.2); animation:toastIn .3s var(--ease);}
.toast.out{animation:toastOut .35s var(--ease) forwards;}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px);}to{opacity:1; transform:translateY(0);}}
@keyframes toastOut{from{opacity:1; transform:translateY(0);}to{opacity:0; transform:translateY(-10px);}}
@media(max-width:720px){
  #toastContainer{top:auto; bottom:84px; width:calc(100% - 28px);}
  .toast{width:100%; justify-content:center; border-radius:16px; text-align:center;}
  .newsletter-form{border-radius:22px; flex-direction:column; padding:8px;}
  .newsletter-form button{border-radius:16px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{display:block;}
  .footer-bottom span{display:block; margin-bottom:8px;}
  .footer-credit{
    margin-top:20px; padding-top:20px;
  }
  .credit-text{
    font-size:.65rem;
  }
  .credit-name{
    font-size:.8rem;
  }
}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}