/* HERO */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 104px; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #F9F2EA 0%, #F0E0D4 45%, #F7ECE4 100%); z-index: 0; }
.hero-mandala { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; opacity: 0.07; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23C8A96B' stroke-width='0.6'/%3E%3Ccircle cx='100' cy='100' r='75' fill='none' stroke='%23C8A96B' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='100' r='55' fill='none' stroke='%23C8A96B' stroke-width='0.6'/%3E%3Ccircle cx='100' cy='100' r='35' fill='none' stroke='%23C8A96B' stroke-width='0.4'/%3E%3Cline x1='5' y1='100' x2='195' y2='100' stroke='%23C8A96B' stroke-width='0.2'/%3E%3Cline x1='100' y1='5' x2='100' y2='195' stroke='%23C8A96B' stroke-width='0.2'/%3E%3Cline x1='33' y1='33' x2='167' y2='167' stroke='%23C8A96B' stroke-width='0.2'/%3E%3Cline x1='167' y1='33' x2='33' y2='167' stroke='%23C8A96B' stroke-width='0.2'/%3E%3C/svg%3E") center/contain no-repeat; }
.sparkle-field { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sp { position: absolute; border-radius: 50%; animation: spk 4s ease-in-out infinite; opacity: 0; }

@keyframes spk {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  35% { opacity: 0.9; }
  70% { opacity: 0.3; transform: translateY(-45px) scale(0.8); }
  100% { opacity: 0; transform: translateY(-70px) scale(0); }
}

.hero-inner { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; padding: 0 5%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; width: 100%; }
.hero-txt { animation: fxL 0.9s ease both; }
.hero-eyebrow { font-family: var(--font-subheads); font-size: 0.82rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 14px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; flex: 1; max-width: 36px; height: 1px; background: var(--accent-light); }
h1.hero-h { font-family: var(--font-headings); font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 600; line-height: 1.12; color: var(--text-primary); margin-bottom: 1.1rem; letter-spacing: 0.02em; }
h1.hero-h em { font-family: var(--font-names); font-style: italic; color: var(--accent-color); }
.hero-p { font-family: var(--font-subheads); font-size: 1.18rem; color: var(--text-secondary); font-weight: 300; line-height: 1.85; margin-bottom: 2.2rem; max-width: 470px; }
.hero-btns { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.hero-stats { display: flex; gap: 2.5rem; }
.hs-val { font-family: var(--font-headings); font-size: 1.55rem; font-weight: 600; color: var(--accent-color); }
.hs-lbl { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 1px; }
.hero-imgs { position: relative; animation: fxR 0.9s ease 0.3s both; }
.hero-main-img { width: 100%; max-width: 460px; border-radius: 4px; object-fit: cover; aspect-ratio: 3/4; box-shadow: 22px 22px 56px var(--shadow); }
.hero-float-img { position: absolute; bottom: -18px; left: -36px; width: 170px; height: 170px; border-radius: 4px; object-fit: cover; box-shadow: 10px 10px 36px var(--shadow); border: 5px solid var(--bg-color); animation: fl 3s ease-in-out infinite; }
.hero-badge { position: absolute; top: 28px; right: -16px; background: var(--gold-accent); color: #3e2e2b; width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-headings); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; line-height: 1.35; box-shadow: 0 4px 18px rgba(0,0,0,0.1); animation: rotbadge 22s linear infinite; }

/* OCCASION SECTION */
.occ-sec { padding: 5rem 5%; background: var(--section-bg); text-align: center; }
.occ-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 880px; margin: 0 auto 2rem; }
.occ-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 1.3rem 1.8rem; border-radius: 4px; border: 1.5px solid var(--border-color); background: var(--bg-color); transition: all 0.3s; min-width: 125px; text-decoration: none; color: inherit; }
.occ-card:hover { border-color: var(--accent-color); background: var(--section-alt-bg); transform: translateY(-4px); box-shadow: 0 8px 28px var(--shadow); }
.occ-icon { font-size: 1.7rem; }
.occ-name { font-size: 0.73rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.occ-sub { font-size: 0.62rem; color: var(--text-muted); }

/* PRODUCTS (Featured) */
.prods-sec { padding: 5rem 5%; background: var(--bg-color); }
.prods-hdr { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.8rem; flex-wrap: wrap; gap: 1rem; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.8rem; }
.pc { background: var(--section-bg); border-radius: 4px; overflow: hidden; cursor: pointer; transition: all 0.38s; border: 1px solid var(--border-color); text-decoration: none; display: block; }
.pc:hover { transform: translateY(-6px); box-shadow: 0 18px 50px var(--shadow); }
.pc-img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--section-alt-bg); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease, opacity 0.38s; }
.pc-img .img2 { position: absolute; inset: 0; opacity: 0; }
.pc:hover .img1 { opacity: 0; transform: scale(1.05); }
.pc:hover .img2 { opacity: 1; }
.pc-ov { position: absolute; bottom: 0; left: 0; right: 0; display: flex; transform: translateY(100%); transition: transform 0.3s; }
.pc:hover .pc-ov { transform: translateY(0); }
.pcb { flex: 1; padding: 9px; background: var(--nav-bg); border: none; cursor: pointer; font-size: 0.67rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.08em; color: var(--text-primary); text-transform: uppercase; transition: background 0.2s; border-top: 1px solid var(--border-color); }
.pcb:first-child { border-right: 0.5px solid var(--border-color); }
.pcb:hover { background: var(--accent-color); color: var(--btn-text); }
.pc-badge { position: absolute; top: 11px; left: 11px; background: var(--accent-color); color: var(--btn-text); font-size: 0.58rem; padding: 3px 9px; border-radius: 1px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.wbtn { position: absolute; top: 9px; right: 9px; background: var(--white); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: all 0.3s; box-shadow: 0 2px 8px var(--shadow); z-index: 10; }
.wbtn:hover, .wbtn.act { background: var(--accent-color); color: var(--btn-text); transform: scale(1.1); }
.pc-info { padding: 1.1rem; }
.pc-cat { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.pc-name { font-family: var(--font-names); font-size: 0.98rem; font-weight: 500; color: var(--text-primary); margin-bottom: 7px; line-height: 1.35; }
.pc-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.pc-stars .s { color: var(--gold-accent); font-size: 0.72rem; }
.pc-stars .rc { font-size: 0.62rem; color: var(--text-muted); }
.pc-price { font-family: var(--font-headings); font-size: 1rem; color: var(--accent-color); font-weight: 600; }
.pc-price span { font-family: var(--font-body); font-size: 0.67rem; color: var(--text-muted); font-weight: 400; margin-left: 3px; }

/* OUTFIT REC */
.outfit-sec { padding: 5rem 5%; background: var(--section-alt-bg); text-align: center; }
.outfit-bx { max-width: 600px; margin: 0 auto; background: var(--section-bg); padding: 2.5rem; border-radius: 4px; box-shadow: 0 10px 30px var(--shadow); border: 1px dashed var(--accent-light); }
.outfit-btn { background: var(--accent-color); color: var(--btn-text); padding: 12px 24px; border-radius: 2px; cursor: pointer; font-size: 0.8rem; font-weight: 500; display: inline-block; margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.05em; transition: 0.3s; }
.outfit-btn:hover { background: var(--accent-hover); }
#outfitPreview { max-width: 150px; border-radius: 4px; margin: 1rem auto; display: none; }
.color-sw { display: inline-block; width: 24px; height: 24px; border-radius: 50%; margin: 0 5px; border: 2px solid var(--border-color); vertical-align: middle; }
#outfitRecGrid { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; text-align: left; }

/* WHY US */
.why-sec { padding: 5rem 5%; background: var(--section-bg); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; max-width: 1080px; margin: 3rem auto 0; text-align: center; }
.wi-icon { width: 62px; height: 62px; border-radius: 50%; background: var(--section-alt-bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.1rem; border: 1px solid var(--accent-light); }
.wi-t { font-family: var(--font-headings); font-size: 0.87rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: 0.04em; }
.wi-d { font-size: 0.75rem; color: var(--text-muted); line-height: 1.7; }

/* TESTIMONIALS */
.test-sec { padding: 5rem 5%; background: var(--section-alt-bg); text-align: center; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 1080px; margin: 3rem auto 0; }
.tc { background: var(--section-bg); padding: 1.8rem; border-radius: 4px; border: 1px solid var(--border-color); text-align: left; transition: transform 0.3s; }
.tc:hover { transform: translateY(-4px); }
.tq { font-size: 2.6rem; color: var(--accent-light); font-family: var(--font-names); line-height: 1; margin-bottom: -0.4rem; }
.tt { font-family: var(--font-subheads); font-size: 1.02rem; font-weight: 400; line-height: 1.78; color: var(--text-secondary); margin-bottom: 1.1rem; font-style: italic; }
.tauth { display: flex; align-items: center; gap: 9px; }
.tav { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-headings); font-size: 0.82rem; font-weight: 600; color: var(--bg-color); }
.tan { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.tal { font-size: 0.67rem; color: var(--text-muted); }

/* COLLECTIONS TEASER */
.coll-sec { padding: 5rem 5%; background: var(--bg-color); position: relative; overflow: hidden; }
.cgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 295px 295px; gap: 1.4rem; max-width: 1180px; margin: 2rem auto 0; }
.cc2 { border-radius: 4px; overflow: hidden; position: relative; cursor: pointer; text-decoration: none; }
.cc2:first-child { grid-row: 1/3; }
.cc2 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s; }
.cc2:hover img { transform: scale(1.06); }
.cov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0, 0.78) 0%, transparent 58%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; }
.cn { font-family: var(--font-headings); font-size: 1.05rem; font-weight: 500; color: white; letter-spacing: 0.04em; margin-bottom: 4px; }
.ck { font-size: 0.67rem; color: rgba(255,255,255, 0.62); letter-spacing: 0.1em; text-transform: uppercase; }
.clink { display: inline-block; margin-top: 8px; font-size: 0.67rem; color: var(--gold-accent); text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--gold-accent); padding-bottom: 1px; transition: color 0.3s; }

/* ANIMATIONS */
@keyframes fxL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fxR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes rotbadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media(max-width:1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero-txt { display: flex; flex-direction: column; align-items: center; }
  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }
  .hero-float-img { display: none; }
  .hero-badge { right: 0; }
  .hero-main-img { max-width: 100%; }
  .cgrid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .cc2:first-child { grid-column: 1/3; grid-row: auto; height: 230px; }
  .tgrid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .prods-hdr { flex-direction: column; align-items: flex-start; }
}