/* ===== SHARED STYLES - Preserved from original ===== */
:root {
  --cream: #F4F6F9;
  --cream2: #E7EAF0;
  --cream3: #D7DCE5;
  --sage: #d03ea7;
  --sage2: #a82c98;
  --sage3: #B8C8EA;
  --sage4: #EAF0FC;
  --rose: #c05298;
  --rose2: #9f3d7d;
  --rose3: #C2CEEA;
  --rose4: #EDF1FA;
  --terra: #D18A45;
  --terra2: #A96A2E;
  --terra3: #EBCBA2;
  --bark: #121519;
  --bark2: #242A32;
  --bark3: #626B77;
  --mush: #BDC4CD;
  --mush2: #A2AAB5;
  --mush3: #E5E8EC;
  --gold: #C19A4C;
  --gold2: #DFBB70;
  --line: rgba(18, 21, 25, .1);
  --line2: rgba(18, 21, 25, .06);
}

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

html {
  scroll-behavior: smooth;
  font-size: 15px;
}

body {
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--bark);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream2); }
::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 10px; }

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

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* === HEADER === */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 246, 238, .95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.hdr-top {
  text-align: center;
  padding: .45rem 0;
  background: var(--sage);
  font-size: .7rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}

.hdr-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.logo-script {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.9rem;
  color: var(--sage2);
  line-height: 1;
}

nav { display: flex; gap: .1rem; }

nav a {
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bark3);
  padding: 8px 13px;
  cursor: pointer;
  background: none;
  border: none;
  transition: .3s;
  position: relative;
  text-decoration: none;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 13px;
  right: 13px;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: center;
  transition: .3s;
}

nav a:hover { color: var(--bark); }
nav a:hover::after { transform: scaleX(1); }

.hdr-right { display: flex; align-items: center; gap: .6rem; }

.cur-sel {
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
  background: transparent;
  color: var(--bark);
  cursor: pointer;
  outline: none;
}

.hico {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--bark3);
  transition: .3s;
}

.hico:hover {
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
}

.hico .bdg {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rose);
  font-size: .52rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cream);
}

.btn-flora {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 9px 22px;
  background: var(--sage);
  color: var(--cream);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: .3s;
}

.btn-flora:hover { background: var(--sage2); }

/* === SECTION SHARED === */
.sw {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  position: relative;
  z-index: 1;
}

.s-eyebrow {
  font-family: 'Great Vibes', cursive;
  font-size: 1.6rem;
  color: var(--rose2);
  display: block;
  line-height: 1.3;
}

.s-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  color: var(--bark);
  letter-spacing: -.02em;
  line-height: .95;
}

.s-title em { font-style: italic; color: var(--sage2); }

.s-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1rem 0 1.2rem;
}

.sd-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mush2));
}

.sd-line.r { background: linear-gradient(90deg, var(--mush2), transparent); }

.sd-flower { font-size: .7rem; color: var(--rose); }

.s-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--bark3);
  line-height: 1.85;
  max-width: 560px;
}

/* === CATEGORIES === */
#categories {
  background: var(--cream);
  padding: 7rem 0;
  position: relative;
}

.cat-editorial {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.cat-feat {
  grid-row: 1/3;
  grid-column: 1;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1.4;
  background: var(--cream2);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  transition: .4s;
}

.cat-feat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(61, 43, 31, .8) 100%);
  z-index: 1;
}

.cat-feat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s;
}

.cat-feat:hover img { transform: scale(1.06); }

.cat-feat-body { position: relative; z-index: 2; color: var(--cream); }

.cat-feat-tag {
  display: inline-block;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  margin-bottom: 1rem;
}

.cat-feat-name {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  margin-bottom: .5rem;
}

.cat-feat-cnt {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .7;
}

.cat-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 10px 20px;
  background: var(--cream);
  color: var(--bark);
  border-radius: 25px;
  transition: .3s;
}

.cat-feat:hover .cat-feat-cta { background: var(--rose); color: var(--cream); }

.cat-tile {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1.1/1;
  background: var(--cream2);
  transition: .4s;
}

.cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s;
}

.cat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(61, 43, 31, .7) 100%);
  z-index: 1;
}

.cat-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(61, 43, 31, .15);
}

.cat-tile:hover img { transform: scale(1.1); }

.cat-tile-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.4rem;
  z-index: 2;
  color: var(--cream);
}

.cat-tile-num {
  font-family: 'Playfair Display', serif;
  font-size: .85rem;
  font-style: italic;
  opacity: .7;
  margin-bottom: .3rem;
}

.cat-tile-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

/* === PRODUCTS === */
#products {
  background: var(--cream2);
  padding: 7rem 0;
  position: relative;
}

.prod-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

#pCount {
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--bark3);
  text-transform: uppercase;
  display: none;
}

.filter-garden {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding: 8px;
  background: var(--cream);
  border-radius: 30px;
  width: fit-content;
  border: 1px solid var(--line2);
}

.fp {
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--bark3);
  cursor: pointer;
  transition: .3s;
}

.fp:hover { color: var(--sage2); }
.fp.on { background: var(--sage); color: var(--cream); }

.prod-masonry { columns: 4; column-gap: 1.4rem; }

.prod-masonry .pcard {
  break-inside: avoid;
  margin-bottom: 1.4rem;
  background: var(--cream);
  border: 1px solid var(--line2);
  border-radius: 18px;
  cursor: pointer;
  transition: .4s;
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.prod-masonry .pcard:nth-child(4n+1) .pc-img { aspect-ratio: 1/1; }
.prod-masonry .pcard:nth-child(4n+2) .pc-img { aspect-ratio: 1/1.2; }
.prod-masonry .pcard:nth-child(4n+3) .pc-img { aspect-ratio: 1/.9; }
.prod-masonry .pcard:nth-child(4n+4) .pc-img { aspect-ratio: 1/1.1; }

.pcard:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 50px rgba(61, 43, 31, .12);
  border-color: var(--sage3);
}

.pc-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.pc-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--cream2), var(--cream));
}

.pc-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 60%;
  border-radius: 50% 0 0 0;
  background: var(--sage4);
  opacity: .5;
}

.pc-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: .4s;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(61, 43, 31, .1));
}

.pcard:hover .pc-img img { transform: scale(1.08) rotate(-2deg); }

.pc-badge-row {
  position: absolute;
  top: .7rem;
  left: .7rem;
  display: flex;
  gap: 3px;
  z-index: 2;
  flex-direction: column;
}

.pcw {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  cursor: pointer;
  z-index: 2;
  transition: .3s;
  color: var(--bark3);
}

.pcw:hover, .pcw.on {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

.pc-body { padding: 1rem 1.2rem 1.4rem; }

.pc-cat {
  font-size: .52rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage2);
  margin-bottom: .4rem;
}

.pc-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  margin-bottom: .8rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-name:hover { color: var(--sage2); }

.pc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pc-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--bark);
}

.pc-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sage);
  border: none;
  color: var(--cream);
  font-size: .7rem;
  cursor: pointer;
  transition: .35s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-add:hover { background: var(--bark); transform: rotate(90deg); }

/* === ABOUT === */
#about {
  background: var(--sage4);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}

#about::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 60%;
  height: 160%;
  border-radius: 40% 60% 55% 45%;
  background: radial-gradient(ellipse, var(--cream) 0%, transparent 70%);
  pointer-events: none;
}

.about-diagonal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-visual-stack { position: relative; padding: 2rem; }

.about-img-main {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 200px 200px 30px 30px;
  background: var(--cream);
  border: 1px solid rgba(122, 158, 126, .3);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px rgba(61, 43, 31, .15);
}

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

.about-img-deco {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 14px 40px rgba(201, 123, 132, .4);
  animation: floatY 5s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.about-img-deco-n {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.about-img-deco-l {
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .8;
}

.about-leaf {
  position: absolute;
  top: 30px;
  left: -30px;
  width: 80px;
  height: 80px;
  opacity: .25;
  animation: rotateSlow 20s linear infinite;
}

@keyframes rotateSlow { to { transform: rotate(360deg); } }

.about-body-p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--bark2);
  line-height: 2;
  margin: 1.8rem 0 2.5rem;
}

.about-principles { display: flex; flex-direction: column; gap: 1rem; }

.ap {
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: var(--cream);
  border: 1px solid var(--line2);
  border-radius: 16px;
  transition: .3s;
}

.ap:hover {
  transform: translateX(8px);
  box-shadow: 0 12px 30px rgba(61, 43, 31, .08);
  border-color: var(--sage3);
}

.ap-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sage4);
  border: 1px solid var(--sage3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--sage2);
  flex-shrink: 0;
}

.ap-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  margin-bottom: .2rem;
}

.ap-body {
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--bark3);
  line-height: 1.7;
}

/* === WHY === */
#why {
  background: var(--cream);
  padding: 7rem 0;
  position: relative;
}

.why-zigzag {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  position: relative;
}

.why-zigzag::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sage3) 20%, var(--sage3) 80%, transparent);
  z-index: 0;
}

.wc {
  background: var(--cream2);
  padding: 2.5rem 1.8rem 2rem;
  border-radius: 18px;
  border: 1px solid var(--line2);
  position: relative;
  transition: .4s;
  text-align: center;
}

.wc:nth-child(odd) { margin-top: 2rem; }
.wc:nth-child(even) { margin-top: -1rem; }

.wc:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(61, 43, 31, .12);
}

.wc-num {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(61, 43, 31, .2);
  z-index: 2;
}

.wc:hover .wc-num { background: var(--rose); }

.wc-ico-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage4);
  border: 1px solid var(--sage3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--sage2);
  margin: 1.5rem auto 1.2rem;
  transition: .35s;
}

.wc:hover .wc-ico-wrap {
  background: var(--sage);
  color: var(--cream);
  transform: scale(1.1);
}

.wc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  margin-bottom: .5rem;
}

.wc-body {
  font-size: .88rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--bark3);
  line-height: 1.75;
}

.wc-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage2);
}

.wc-tag::before { content: '✿'; font-size: .55rem; }

/* === REVIEWS === */
#reviews {
  background: var(--cream2);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.rev-bubbles {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
}

.rev-featured {
  background: var(--bark);
  border-radius: 24px;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  color: var(--cream);
}

.rev-featured::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 2rem;
  font-family: 'Playfair Display', serif;
  font-size: 14rem;
  font-style: italic;
  color: rgba(122, 158, 126, .15);
  line-height: 1;
}

.rev-featured-inner { position: relative; z-index: 1; }

.revf-script {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.4rem;
  color: var(--sage3);
  margin-bottom: 1rem;
}

.revf-stars {
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--gold2);
  margin-bottom: 1.2rem;
  display: block;
}

.revf-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(250, 246, 238, .85);
  line-height: 1.95;
  margin-bottom: 2rem;
}

.revf-bottom {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.revf-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sage);
  border: 2px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--cream);
}

.revf-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--cream);
}

.revf-badge {
  font-size: .5rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sage3);
  margin-top: 2px;
}

.rev-list { display: flex; flex-direction: column; gap: 1rem; }

.rv-card {
  background: var(--cream);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 1.5rem;
  position: relative;
  transition: .3s;
}

.rv-card:hover {
  transform: translateX(-6px);
  box-shadow: 0 14px 36px rgba(61, 43, 31, .1);
  border-color: var(--sage3);
}

.rv-card::after {
  content: '';
  position: absolute;
  left: 30px;
  top: -10px;
  width: 20px;
  height: 20px;
  background: var(--cream);
  border-left: 1px solid var(--line2);
  border-top: 1px solid var(--line2);
  transform: rotate(45deg);
}

.rvc-stars {
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: .6rem;
  display: block;
}

.rvc-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--bark3);
  line-height: 1.7;
  margin-bottom: .8rem;
}

.rvc-bottom { display: flex; align-items: center; gap: .6rem; }

.rvc-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--sage2);
}

.rvc-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--bark);
}

.rvc-badge {
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage2);
  margin-top: 1px;
}

/* === FAQ === */
#faq { background: var(--cream); padding: 7rem 0; }

.faq-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  margin-top: 3.5rem;
  align-items: start;
}

.faq-list { border-top: 1px solid var(--line); }

.fq { border-bottom: 1px solid var(--line); }

.fq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  gap: 1rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  cursor: pointer;
  transition: .2s;
}

.fq-q:hover { color: var(--sage2); }

.fq-num {
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .18em;
  color: var(--mush2);
  min-width: 24px;
}

.fq-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: var(--sage2);
  flex-shrink: 0;
  transition: .4s;
}

.fq.open .fq-ico {
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
  transform: rotate(45deg);
}

.fq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
  font-size: .95rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--bark3);
  line-height: 1.9;
  padding-left: 40px;
}

.fq.open .fq-a { max-height: 300px; padding-bottom: 1.5rem; }

.faq-preview {
  position: sticky;
  top: 120px;
  background: var(--sage4);
  border: 1px solid var(--sage3);
  border-radius: 24px;
  padding: 2.5rem;
  text-align: center;
}

.faq-preview-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--sage3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--sage2);
  margin: 0 auto 1.5rem;
}

.faq-preview-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  margin-bottom: .8rem;
}

.faq-preview-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--bark3);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.faq-preview-btn {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 26px;
  background: var(--sage);
  color: var(--cream);
  border-radius: 25px;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.faq-preview-btn:hover { background: var(--sage2); }

/* === NEWSLETTER === */
#newsletter {
  background: var(--rose4);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201, 123, 132, .15);
}

.nl-deco-1 {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose3), transparent 70%);
  opacity: .5;
}

.nl-deco-2 {
  position: absolute;
  bottom: -100px;
  right: -50px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sage3), transparent 70%);
  opacity: .4;
}

.nl-overlap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.nl-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  color: var(--bark);
  line-height: 1;
  margin-bottom: .8rem;
  letter-spacing: -.01em;
}

.nl-title em { font-style: italic; color: var(--rose2); }

.nl-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--bark3);
  line-height: 1.95;
  margin-bottom: 1.5rem;
}

.nl-perks { display: flex; flex-direction: column; gap: .6rem; }

.nlp {
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--bark3);
  display: flex;
  align-items: center;
  gap: .7rem;
}

.nlp::before { content: '✿'; color: var(--rose); font-size: .65rem; }

.nl-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(61, 43, 31, .1);
  position: relative;
}

.nl-card::before {
  content: '✿';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

.nl-script {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.5rem;
  color: var(--rose2);
  margin-bottom: .2rem;
  text-align: center;
}

.nl-form-sub {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bark3);
  margin-bottom: 1.5rem;
  text-align: center;
}

.nl-lbl {
  display: block;
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bark3);
  margin-bottom: .4rem;
}

.nl-inp {
  width: 100%;
  background: var(--cream2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: .9rem;
  font-weight: 300;
  color: var(--bark);
  outline: none;
  margin-bottom: .9rem;
  transition: .3s;
  font-family: inherit;
}

.nl-inp:focus { border-color: var(--sage); }
.nl-inp::placeholder { color: var(--mush2); }

.nl-check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .88rem;
  font-weight: 300;
  color: var(--bark3);
  margin: .3rem 0 1.2rem;
  line-height: 1.5;
}

.nl-check input {
  margin-top: 3px;
  accent-color: var(--sage);
  flex-shrink: 0;
}

.btn-nl {
  width: 100%;
  padding: 14px;
  background: var(--sage);
  color: var(--cream);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: .3s;
  font-family: inherit;
}

.btn-nl:hover { background: var(--sage2); }

.unsub-lnk {
  display: block;
  text-align: center;
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--mush2);
  cursor: pointer;
  margin-top: .8rem;
  background: none;
  border: none;
  text-decoration: underline;
  font-family: inherit;
}

/* === CONTACT === */
#contact { background: var(--cream2); padding: 7rem 0; }

.ct-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.ct-info {
  background: var(--bark);
  color: var(--cream);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.ct-info::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 158, 126, .15), transparent 70%);
}

.ct-info-title {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.6rem;
  color: var(--sage3);
  margin-bottom: .5rem;
}

.ct-info-sub {
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .5);
  margin-bottom: 2rem;
}

.ct-items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}

.ctc {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ctc-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(122, 158, 126, .2);
  border: 1px solid rgba(122, 158, 126, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--sage3);
  flex-shrink: 0;
}

.ctc-l {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, .5);
  margin-bottom: 3px;
}

.ctc-v {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.4;
}

.soc-row {
  display: flex;
  gap: .5rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--cream);
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.soc:hover { background: var(--sage); border-color: var(--sage); }

.cf-box {
  background: var(--cream);
  border-radius: 24px;
  border: 1px solid var(--line);
  padding: 2.5rem;
}

.cf-lbl {
  display: block;
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bark3);
  margin-bottom: .4rem;
}

.cf-inp {
  width: 100%;
  background: var(--cream2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: .9rem;
  font-weight: 300;
  color: var(--bark);
  outline: none;
  margin-bottom: .9rem;
  transition: .3s;
  font-family: inherit;
}

.cf-inp:focus { border-color: var(--sage); }
.cf-inp::placeholder { color: var(--mush2); }

.btn-bloom {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: var(--bark);
  color: var(--cream);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: .35s;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: inherit;
}

.btn-bloom:hover { background: var(--sage2); transform: translateY(-2px); }

/* === FOOTER === */
footer { background: var(--bark); color: rgba(250, 246, 238, .65); }

.footer-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4.5rem 3rem 3rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
}

.ft-logo {
  font-family: 'Petit Formal Script', cursive;
  font-size: 2rem;
  color: var(--sage3);
  margin-bottom: .5rem;
}

.ft-tagline {
  font-size: .5rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(200, 219, 201, .4);
  margin-bottom: 1rem;
}

.ft-desc {
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.85;
  color: rgba(250, 246, 238, .7);
  max-width: 240px;
}

.ft-col-t {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
  color: var(--sage3);
  margin-bottom: 1.3rem;
}

.ftl {
  display: block;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: rgba(250, 246, 238, .75);
  cursor: pointer;
  margin-bottom: .7rem;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  transition: .2s;
  font-family: inherit;
}

.ftl:hover { color: var(--sage3); }

.footer-bot {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 1.4rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
}

.ft-copy {
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: rgba(250, 246, 238, .7);
}

/* === DRAWERS === */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 95vw;
  background: var(--cream);
  border-left: 1px solid var(--line);
  z-index: 3000;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(61, 43, 31, .08);
}

.drawer.open { transform: translateX(0); }

.dr-h {
  padding: 1.3rem 1.6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream2);
}

.dr-t {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.4rem;
  color: var(--sage2);
}

.dr-cl {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--bark3);
  transition: .3s;
}

.dr-cl:hover {
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
}

.dr-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem 1.6rem;
}

.dr-body::-webkit-scrollbar { width: 3px; }
.dr-body::-webkit-scrollbar-thumb { background: var(--sage3); border-radius: 10px; }

.dr-item {
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line2);
}

.dr-iw {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  background: var(--cream2);
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dr-iw img { max-width: 82%; max-height: 82%; object-fit: contain; }

.dr-nm {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .88rem;
  color: var(--bark);
  margin-bottom: 2px;
  line-height: 1.2;
}

.dr-pr {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--sage2);
}

.dr-qty {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--bark3);
}

.dr-rm {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream2);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: var(--bark3);
  transition: .3s;
  flex-shrink: 0;
}

.dr-rm:hover {
  background: var(--rose3);
  color: var(--rose2);
  border-color: var(--rose3);
}

.dr-foot {
  padding: 1.3rem 1.6rem;
  border-top: 1px solid var(--line);
  background: var(--cream2);
}

.dr-tot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.dr-tot-l {
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bark3);
}

.dr-tot-v {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  font-style: italic;
  color: var(--sage2);
}

.empty-s {
  text-align: center;
  padding: 3rem;
  color: var(--mush2);
}

.empty-s i { font-size: 2rem; display: block; margin-bottom: .8rem; }
.empty-s p { font-size: .78rem; font-weight: 300; }

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 31, .4);
  z-index: 2999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  backdrop-filter: blur(3px);
}

.backdrop.open { opacity: 1; pointer-events: all; }

/* === MODALS === */
.modal-wrap {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 31, .6);
  z-index: 4000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(6px);
}

.modal-wrap.active {
  display: flex;
  animation: modalIn .4s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-box {
  background: var(--cream);
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(61, 43, 31, .25);
  border: 1px solid var(--line);
}

.modal-h {
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream2);
}

.modal-t {
  font-family: 'Petit Formal Script', cursive;
  font-size: 1.7rem;
  color: var(--sage2);
}

.modal-body {
  padding: 1.6rem;
  overflow-y: auto;
  flex: 1;
  font-size: .95rem;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.9;
  color: var(--bark3);
}

.modal-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--bark);
  margin: 1rem 0 .4rem;
}

.modal-body h3:first-child { margin-top: 0; }
.modal-body p { margin-bottom: .8rem; }

.modal-foot {
  padding: 1.2rem 1.6rem;
  border-top: 1px solid var(--line);
}

/* === TOAST === */
#toastC {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.tst {
  background: var(--bark);
  color: var(--cream);
  padding: 11px 20px;
  border-radius: 25px;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: .7rem;
  box-shadow: 0 8px 28px rgba(61, 43, 31, .25);
  animation: tin .35s ease;
  border-left: 3px solid var(--sage);
}

.tst i { color: var(--sage); }

@keyframes tin {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === RESPONSIVE === */
@media(max-width:960px) {
  .hdr-main { padding: 0 1.2rem; }
  nav { display: none; }
  #hero { aspect-ratio: 16/9; }
  .cat-editorial { grid-template-columns: 1fr 1fr; }
  .cat-feat { grid-row: auto; grid-column: 1/3; aspect-ratio: 2/1; }
  .prod-masonry { columns: 2; }
  .about-diagonal, .rev-bubbles, .nl-overlap, .ct-grid, .faq-split { grid-template-columns: 1fr; gap: 3rem; }
  .why-zigzag { grid-template-columns: 1fr 1fr; }
  .why-zigzag::before { display: none; }
  .wc:nth-child(odd), .wc:nth-child(even) { margin-top: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .sw { padding: 0 1.2rem; }
}