/* ================= THEME TOKENS ================= */
:root {
  --bg: #EEF2F8;
  --band: rgba(205, 218, 239, .58);
  --card: #FFFFFF;
  --card-2: #F7F9FD;
  --line: #D9E1ED;

  --text: #30394D;
  --soft: #77839A;
  --heading: #18243B;

  --btn: #5148B8;
  --btn-hov: #3E3698;

  --accent: #7770E5;
  --accent-soft: #E9E7FA;

  --rose: #E07883;
  --rose-deep: #C75C6B;
  --rose-soft: #F8E3E7;
  --rose-50: #FCF0F1;

  --amber-soft: #F8EACD;
  --amber-deep: #A77B32;

  --teal-soft: #D9EEF0;
  --teal-deep: #328B98;

  --nav-bg: rgba(238, 242, 248, .88);
  --nav-hov: #E1E8F3;

  --glass: rgba(255, 255, 255, .82);
  --glass-brd: rgba(255, 255, 255, .94);

  --input: #FAFBFE;
  --input-brd: #D8E0ED;

  --cod-tx: #5148B8;

  --shadow-sm: 0 4px 16px rgba(36, 47, 91, .06);
  --shadow-md: 0 12px 34px rgba(36, 47, 91, .10);
  --shadow-lg: 0 24px 60px rgba(36, 47, 91, .16);
}

[data-theme="dark"] {
  --bg: #111525;
  --band: rgba(37, 45, 75, .64);
  --card: #1B2135;
  --card-2: #242C43;
  --line: #343D58;

  --text: #E7EAF6;
  --soft: #A1AAC2;
  --heading: #F4F5FF;

  --btn: #9186F5;
  --btn-hov: #A99FFF;

  --accent: #A79EFF;
  --accent-soft: #302B50;

  --rose: #ED8998;
  --rose-deep: #F4A3AD;
  --rose-soft: #422A3B;
  --rose-50: #332433;

  --amber-soft: #40351F;
  --amber-deep: #E2BD72;

  --teal-soft: #1D3745;
  --teal-deep: #79C6D2;

  --nav-bg: rgba(17, 21, 37, .90);
  --nav-hov: #292F49;

  --glass: rgba(27, 33, 53, .84);
  --glass-brd: rgba(255, 255, 255, .08);

  --input: #181F32;
  --input-brd: #343D58;

  --cod-tx: #B6AEFF;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .34);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .46);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .60);
}

/* ================= BASE ================= */
html { scroll-behavior: smooth; scroll-padding-top: 88px }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease
}
.serif { font-family: 'Playfair Display', serif }
h1, h2, h3, .h2, .h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--heading)
}
::selection { background: var(--btn); color: #fff }
a { text-decoration: none }
img { max-width: 100% }
.section { padding: 88px 0 }
.overline {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px
}
.overline::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--rose-deep);
  display: inline-block
}
.section-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.15 }
.section-sub { color: var(--soft); max-width: 560px; margin: 12px auto 0 }
.section-head { margin-bottom: 38px }
.link-arrow {
  color: var(--accent);
  font-size: .92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .25s, color .25s
}
.link-arrow:hover { color: var(--heading) }
.link-arrow i { transition: transform .25s }
.link-arrow:hover i { transform: translateX(4px) }
.text-primary { color: var(--accent) !important }
.bg-primary { background-color: var(--btn) !important }
.btn-primary {
  --bs-btn-bg: var(--btn);
  --bs-btn-border-color: var(--btn);
  --bs-btn-hover-bg: var(--btn-hov);
  --bs-btn-hover-border-color: var(--btn-hov);
  --bs-btn-active-bg: var(--btn-hov);
  --bs-btn-active-border-color: var(--btn-hov)
}

/* ---------- Buttons ---------- */
.btn-brand {
  background: var(--btn);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  box-shadow: 0 10px 24px rgba(39, 71, 60, .22)
}
.btn-brand:hover {
  background: var(--btn-hov);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(39, 71, 60, .3)
}
.btn-brand i { transition: transform .3s }
.btn-brand:hover i { transform: translateX(4px) }
.btn-brand.btn-sm { padding: 9px 18px; font-size: .85rem }
.btn-outline-brand {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 500;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s
}
.btn-outline-brand:hover {
  background: var(--btn);
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--btn)
}
.btn-rose {
  background: linear-gradient(135deg, #E2A49D, #CE847B);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .3s;
  box-shadow: 0 10px 24px rgba(206, 132, 123, .35)
}
.btn-rose:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(206, 132, 123, .45)
}
.btn-rose i { transition: transform .3s }
.btn-rose:hover i { transform: translateX(4px) }
.btn-ghost-rose {
  background: transparent;
  color: var(--rose-deep);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: .9rem;
  transition: all .3s
}
.btn-ghost-rose:hover { background: var(--rose-50); color: var(--rose-deep) }
.icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex: 0 0 40px
}
.chip-amber { background: var(--amber-soft); color: var(--amber-deep) }
.chip-green { background: var(--accent-soft); color: var(--accent) }
.chip-rose { background: var(--rose-50); color: var(--rose-deep) }
.chip-teal { background: var(--teal-soft); color: var(--teal-deep) }

/* ---------- Navbar ---------- */
.navbar-lume {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color .35s, box-shadow .35s, padding .35s;
  padding: 14px 0
}
.navbar-lume.scrolled {
  box-shadow: 0 10px 34px rgba(35, 43, 39, .12);
  padding: 10px 0
}
.brand-mark { width: 30px; height: 30px; color: var(--btn) }
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--heading)
}
.nav-center { flex: 1; justify-content: center }
.nav-link-lume {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .02em;
  position: relative;
  padding: 6px 2px !important;
  transition: color .25s
}
.nav-link-lume::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--rose-deep);
  border-radius: 2px;
  transition: width .3s
}
.nav-link-lume:hover,
.nav-link-lume.active { color: var(--accent) }
.nav-link-lume:hover::after,
.nav-link-lume.active::after { width: 100% }
.nav-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: all .25s;
  position: relative
}
.nav-icon-btn:hover { background: var(--nav-hov); color: var(--accent) }
.nav-icon-btn i { transition: transform .5s }
.nav-icon-btn i.spin { transform: rotate(360deg) }
.count-badge {
  position: absolute;
  top: 1px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--btn);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: none;
  place-items: center;
  padding: 0 4px
}
.count-badge.show { display: grid }
.count-badge.rose { background: var(--rose-deep) }
.search-wrap { position: relative }
.search-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: min(340px, calc(100vw - 32px));
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: none;
  z-index: 1060;
  border: 1px solid var(--line)
}
.search-panel.open { display: block; animation: fadeDown .25s ease }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px) }
  to { opacity: 1; transform: translateY(0) }
}
.search-panel input {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px 10px 40px;
  font-size: .9rem;
  width: 100%;
  background: var(--input);
  color: var(--text)
}
.search-panel input:focus { outline: none; border-color: var(--accent) }
.search-panel .bi-search {
  position: absolute;
  left: 15px;
  top: 24px;
  color: var(--soft);
  font-size: .9rem
}
.search-panel .sp-hint { font-size: 11.5px; color: var(--soft); margin-top: 8px; padding-left: 8px }
.navbar-toggler-lume {
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px
}
.navbar-toggler-lume span { background-image: linear-gradient(var(--heading), var(--heading)) }
.navbar-toggler-lume:focus { box-shadow: 0 0 0 .2rem rgba(39, 71, 60, .15) }

/* ---------- HERO (scroll spotlight) ---------- */
.scroll-hero {
  position: relative;
  height: 460vh;
  --sa: #3E6B7A;
  --sb1: #D5E3EA;
  --sb2: #7A9EAE
}
.sh-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(120deg, var(--sb1) 0%, color-mix(in srgb, var(--sb1) 42%, var(--card)) 52%, var(--card) 100%);
  transition: background 1s ease
}
.sh-sticky::before {
  content: "";
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sb2) 32%, transparent), transparent 64%);
  left: 46%;
  top: 40%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background 1s
}
.sh-sticky::after {
  content: "";
  position: absolute;
  left: 2.5%;
  top: 9%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--sa) 30%, transparent);
  animation: spin 46s linear infinite;
  pointer-events: none;
  transition: border-color 1s
}
.sh-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 7;
  background: transparent
}
.sh-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sa), var(--rose-deep));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sa) 50%, transparent)
}
.sh-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 64px 0 108px
}
.sh-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 24px;
  align-items: center
}
.sh-copy { max-width: 480px }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--sa) 25%, transparent);
  box-shadow: var(--shadow-sm);
  transition: all .5s
}
.hero-pill i { font-size: .85rem; color: var(--sa) }
.sh-title {
  font-size: clamp(2rem, 3vw, 2.3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 20px 0 0;
  color: var(--heading);
  font-family: 'Jost', sans-serif
}
.sh-title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  display: block;
  margin-top: 4px;
  transition: color .5s
}
.sh-sub { color: var(--soft); max-width: 440px; margin: 16px 0 0; font-size: .96rem; line-height: 1.65 }
.sh-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px }
.sh-badges { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px }
.ht-item { display: flex; align-items: center; gap: 11px }
.ht-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: 0 0 42px
}
.ht-item b { display: block; font-size: .84rem; font-weight: 700; color: var(--heading); line-height: 1.2 }
.ht-item span { font-size: 11.5px; color: var(--soft) }

/* Spotlight stage */
.sh-stage { position: relative; height: min(560px, 56vh); perspective: 1400px }
.sp-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity
}
.sp-card.on { pointer-events: auto }
.sp-img {
  position: absolute;
  top: 2%;
  right: 0;
  width: min(400px, 88%);
  aspect-ratio: 1/1.06;
  border-radius: 30px;
  border: 9px solid var(--card);
  object-fit: cover;
  box-shadow: 0 40px 90px -26px rgba(0, 0, 0, .4);
  background: var(--card-2)
}
.sp-info {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: min(280px, 82%);
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  z-index: 3
}
.spi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; gap: 8px }
.spi-cat { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
.spi-eye {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--accent);
  font-size: .85rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s
}
.spi-eye:hover { background: var(--btn); border-color: var(--btn); color: #fff }
.spi-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.spi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px }
.spi-price { font-size: 1.35rem; font-weight: 700; color: var(--sa); letter-spacing: -.02em; transition: color .5s }
.spi-right { display: flex; gap: 8px; align-items: center }
.spi-heart {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--heading);
  font-size: .95rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s
}
.spi-heart:hover { color: var(--rose-deep); border-color: var(--rose-deep) }
.spi-heart.wish-on { color: var(--rose-deep); border-color: var(--rose-deep); animation: heartPop .45s ease }
.spi-add {
  border-radius: 999px;
  border: none;
  background: var(--btn);
  color: #fff;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all .25s;
  font-family: inherit
}
.spi-add:hover { background: var(--btn-hov); transform: scale(1.06) }
.sh-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
  padding: 24px
}
.sh-ghost i { font-size: 2.1rem; color: var(--accent) }
.sh-ghost b { font-size: 1.05rem; color: var(--heading) }
.sh-ghost span { font-size: 13px; color: var(--soft) }
.sh-ghost a { font-size: .9rem; font-weight: 700; color: var(--accent); margin-top: 6px }
.sh-ghost a:hover { text-decoration: underline }

/* Product picker medallions */
.hs-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 8px 2px
}
.hs-track::-webkit-scrollbar { display: none }
.hs-item {
  flex: 0 0 84px;
  scroll-snap-align: center;
  background: none;
  border: none;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: transform .3s
}
.hs-item:hover { transform: translateY(-4px) }
.hs-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card);
  box-shadow: var(--shadow-sm);
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
  display: block;
  margin: 0 auto
}
.hs-item.active .hs-img {
  border-color: var(--sa);
  transform: scale(1.1);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--sa) 32%, transparent)
}
.hs-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 0 4px
}
.hs-price { font-size: 11px; color: var(--soft); font-weight: 500; display: block }
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  cursor: pointer;
  transition: all .25s;
  z-index: 4;
  box-shadow: var(--shadow-sm);
  font-size: .85rem
}
.hs-arrow:hover { background: var(--btn); color: #fff; border-color: var(--btn) }

/* Bottom bar */
.sh-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px
}
.sh-rail-wrap { position: relative; max-width: 620px; margin: 0 auto; width: 100% }
.sh-rail-wrap .hs-arrow { left: -6px }
.sh-rail-wrap .hs-arrow:last-child { left: auto; right: -6px }
.sh-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  white-space: nowrap
}
.sh-hint .bi-mouse { font-size: 1.05rem; color: var(--accent); animation: hintBob 1.6s ease-in-out infinite }
@keyframes hintBob {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(6px) }
}
.sh-counter { font-size: .8rem; color: var(--soft); white-space: nowrap; letter-spacing: .05em }
.sh-counter b { font-size: 1.35rem; color: var(--heading); font-weight: 700; font-family: 'Playfair Display', serif }
@keyframes floaty {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-12px) }
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Spotlight responsive */
@media (max-width:1199.98px) {
  .sh-inner { padding: 56px 0 120px }
  .sh-grid { grid-template-columns: 1fr; gap: 6px }
  .sh-stage { height: min(320px, 38vh); order: -1 }
  .sp-img { width: min(270px, 66%) }
  .sp-info { width: min(235px, 72%); padding: 12px }
  .sh-copy { max-width: 600px }
  .sh-title { font-size: clamp(1.7rem, 5vw, 2.35rem) }
  .sh-sub { font-size: .88rem; margin-top: 12px }
  .sh-badges { margin-top: 18px; gap: 16px }
}
@media (max-width:767.98px) {
  .sh-inner { padding: 52px 0 130px }
  .sh-stage { height: min(270px, 33vh) }
  .sp-img { width: min(225px, 72%); border-width: 6px }
  .sp-info { width: min(205px, 74%); border-radius: 16px }
  .sp-name { font-size: 13px }
  .spi-price { font-size: 1.05rem }
  .spi-add { padding: 8px 12px }
  .hs-item { flex-basis: 72px }
  .hs-img { width: 58px; height: 58px }
  .sh-bottom { grid-template-columns: 1fr; gap: 10px; bottom: 14px }
  .sh-hint, .sh-counter { display: none }
  .sh-rail-wrap { max-width: none }
}

/* ---------- ABOUT (bento + landing frame) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center
}
.about-visual { display: flex; flex-direction: column; gap: 18px }
.about-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--card);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  min-height: 300px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: border-color .5s, background-color .4s
}
.af-ph { text-align: center; color: var(--soft); padding: 24px; transition: opacity .4s, visibility .4s }
.af-pulse { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; display: grid; place-items: center }
.af-pulse i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  z-index: 1
}
.af-pulse::before,
.af-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: afPulse 2.4s ease-out infinite
}
.af-pulse::after { animation-delay: 1.2s }
@keyframes afPulse {
  0% { transform: scale(.5); opacity: .9 }
  100% { transform: scale(1.3); opacity: 0 }
}
.af-ph b { display: block; font-size: 1rem; color: var(--heading); margin-bottom: 4px }
.af-ph span { font-size: 13px }
.af-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1)
}
.about-frame.landed { border-style: solid; border-color: var(--line) }
.about-frame.landed .af-ph { opacity: 0; visibility: hidden }
.about-frame.landed .af-img { opacity: 1; transform: scale(1) }
.af-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(160%);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1) .3s, opacity .6s ease .3s
}
.about-frame.landed .af-bar { transform: none; opacity: 1 }
.af-meta { min-width: 0 }
.af-meta b {
  display: block;
  font-size: .92rem;
  color: var(--heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.af-meta span { font-size: .9rem; font-weight: 700; color: var(--accent) }
.af-bar .btn-brand { margin-left: auto; flex: 0 0 auto }
.fly-clone { border-radius: 26px }
.about-copy p { color: var(--soft); line-height: 1.7; font-size: .98rem }
.mission {
  border-left: 3px solid var(--rose);
  background: var(--card);
  border-radius: 0 14px 14px 0;
  padding: 16px 20px;
  margin: 22px 0;
  box-shadow: var(--shadow-sm);
  font-size: .95rem;
  color: var(--text)
}
.mission b { font-family: 'Playfair Display', serif }
.stats-row { display: flex; gap: 40px; margin-top: 8px; flex-wrap: wrap }
.stat b {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--accent);
  display: block;
  line-height: 1
}
.stat span { font-size: 12.5px; color: var(--soft); letter-spacing: .04em }
.about-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 148px;
  gap: 16px
}
.about-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  transition: all .35s
}
.about-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md) }
.about-card .icon-chip { width: 46px; height: 46px; font-size: 19px; margin-bottom: 12px }
.about-card h5 { font-size: .98rem; font-weight: 600; font-family: 'Jost', sans-serif; color: var(--heading) }
.about-card p { font-size: 12.5px; color: var(--soft); line-height: 1.55; margin: 6px 0 0 }
.b-a { grid-row: span 2 }
.b-a .icon-chip { margin-bottom: 18px }
.b-a h5 { font-size: 1.15rem }
.b-a p { font-size: 13px }
.b-wide { grid-column: span 2; display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px }
.b-wide p { margin-top: 2px }
.b-dark { background: linear-gradient(140deg, #2C5245, #1B332B); border: none }
.b-dark h5 { color: #fff }
.b-dark p { color: rgba(255, 255, 255, .72) }
.b-dark .icon-chip { background: rgba(255, 255, 255, .14); color: #fff }

/* ---------- CATEGORIES ---------- */
.category-card {
  background: var(--card);
  border-radius: 26px;
  padding: 44px 40px 38px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line)
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 18px
}
.cat-item { text-align: center; cursor: pointer; position: relative; transition: transform .4s }
.cat-item:nth-child(even) { transform: translateY(16px) }
.cat-circle {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  overflow: visible;
  margin: 0 auto 14px;
  position: relative;
  transition: transform .4s
}
.cat-photo { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease }
.cat-halo {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 0;
  transition: all .4s;
  animation: spin 22s linear infinite
}
.cat-item:hover .cat-halo { opacity: 1; inset: -5px }
.cat-item:hover .cat-photo img { transform: scale(1.12) }
.cat-item:hover .cat-circle { transform: translateY(-4px) }
.cat-emoji {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
  z-index: 1;
  border: 1px solid var(--glass-brd)
}
.cat-name { font-weight: 600; font-size: .98rem; color: var(--text) }
.cat-count { font-size: 12.5px; color: var(--soft); margin-top: 2px }
.cat-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(5px);
  transition: all .3s;
  letter-spacing: .03em
}
.cat-item:hover .cat-view { opacity: 1; transform: translateY(0) }
@media (hover:none) {
  .cat-view { opacity: 1; transform: none }
}

/* ---------- SALE BANNER ---------- */
.sale-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative
}
.sale-left {
  background: linear-gradient(135deg, #25463B, #1A322A);
  color: #F4EFE7;
  padding: 52px 56px;
  position: relative
}
.sale-left .overline { color: #E5B8B2 }
.sale-left .overline::before { background: #E5B8B2 }
.sale-left h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: #F8F4EC; margin: 12px 0 10px }
.sale-left p { color: #C4CFC5; font-size: .97rem; max-width: 380px }
.sale-off {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #EFB0A8, #DE938B);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  animation: coinFloat 4.5s ease-in-out infinite
}
@keyframes coinFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) }
  50% { transform: translate(-50%, -58%) rotate(4deg) scale(1.05) }
}
.sale-off small { display: block; font-size: .6rem; letter-spacing: .18em; font-weight: 600 }
.sale-off b { font-family: 'Playfair Display', serif; font-size: 2.1rem; line-height: 1 }
.sale-off small:last-child { font-size: .58rem; margin-top: 2px }
.sale-img {
  min-height: 340px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden
}
.sale-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  animation: shine 5.5s ease-in-out infinite
}
@keyframes shine {
  0%, 55% { left: -60% }
  85%, 100% { left: 130% }
}

/* ---------- FEATURED ---------- */
.f-card {
  flex: 0 0 240px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 12px;
  position: relative;
  scroll-snap-align: start;
  transition: all .35s;
  border: 1px solid var(--line);
  animation: cardIn .5s ease both
}
.f-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md) }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}
.f-img { height: 176px; width: 100%; object-fit: cover; border-radius: 12px }
.f-heart {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--heading);
  font-size: .95rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all .25s;
  z-index: 2
}
.f-heart:hover { transform: scale(1.12); color: var(--rose-deep) }
.f-heart.wish-on { color: var(--rose-deep) }
.f-quick {
  position: absolute;
  top: 64px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--heading);
  font-size: .95rem;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: all .3s;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 2
}
.f-card:hover .f-quick { opacity: 1; transform: translateY(0) }
.f-quick:hover { background: var(--btn); color: #fff }
@media (hover:none) {
  .f-quick { opacity: 1; transform: none }
}
.f-body { padding: 12px 6px 6px }
.f-cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); font-weight: 600 }
.f-name {
  font-size: .92rem;
  font-weight: 600;
  margin: 4px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text)
}
.f-foot { display: flex; align-items: center; justify-content: space-between }
.f-price { font-weight: 700; color: var(--accent); font-size: 1.05rem }
.f-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--btn);
  color: #fff;
  font-size: .9rem;
  display: grid;
  place-items: center;
  transition: all .25s;
  cursor: pointer
}
.f-add:hover { background: var(--btn-hov); transform: scale(1.1) }
.f-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 14px;
  scrollbar-width: none
}
.f-track::-webkit-scrollbar { display: none }
.f-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 18px }
.f-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: all .25s;
  font-size: .9rem;
  cursor: pointer
}
.f-arrow:hover { background: var(--btn); border-color: var(--btn); color: #fff }
.f-dots { display: flex; gap: 6px }
.f-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .3s
}
.f-dot.active { width: 20px; border-radius: 4px; background: var(--btn) }

/* ---------- PRODUCTS (scattered shelf) ---------- */
.products-band {
  background: linear-gradient(180deg, transparent, var(--band) 10%, var(--band) 90%, transparent);
  padding: 88px 0
}
.controls {
  background: var(--card);
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  transition: background-color .4s
}
.search-lume { position: relative }
.search-lume input {
  width: 100%;
  border: 1.5px solid var(--input-brd);
  border-radius: 999px;
  padding: 12px 18px 12px 46px;
  font-size: .92rem;
  background: var(--input);
  color: var(--text);
  transition: all .25s
}
.search-lume input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--card)
}
.search-lume input::placeholder { color: var(--soft) }
.search-lume .bi-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--soft) }
.select-lume {
  border: 1.5px solid var(--input-brd);
  border-radius: 999px;
  padding: 12px 42px 12px 20px;
  font-size: .9rem;
  background: var(--input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2327473C' d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 500;
  color: var(--text);
  cursor: pointer
}
[data-theme="dark"] .select-lume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23E7EFE9' d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E")
}
.select-lume:focus { outline: none; border-color: var(--accent) }

/* Category medallion rail (no pills) */
.cat-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 2px 18px;
  scroll-snap-type: x proximity
}
.cat-rail::-webkit-scrollbar { display: none }
.cat-medal {
  flex: 0 0 92px;
  scroll-snap-align: start;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 14px 8px 12px;
  text-align: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2, .8, .2, 1);
  font-family: inherit;
  position: relative
}
.cat-medal .cm-e {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin: 0 auto 9px;
  transition: all .35s
}
.cat-medal:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-sm)
}
.cat-medal:hover .cm-e { transform: scale(1.08) rotate(-8deg) }
.cat-medal.active {
  background: var(--btn);
  border-color: var(--btn);
  box-shadow: 0 12px 26px rgba(39, 71, 60, .28);
  transform: translateY(-4px)
}
.cat-medal.active .cm-e { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .25); transform: scale(1.05) }
.cat-medal .cm-n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--soft);
  line-height: 1.25;
  transition: color .3s;
  display: block
}
.cat-medal.active .cm-n { color: #fff }
.p-count { font-size: 13.5px; color: var(--soft); margin-bottom: 16px }
.p-count b { color: var(--accent) }

/* Scattered shelf cards */
.pol-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px 12px 14px;
  box-shadow: var(--shadow-sm);
  transform: rotate(var(--rot, 0deg));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s, background-color .4s;
  position: relative;
  height: 100%;
  animation: polIn .6s cubic-bezier(.25, .9, .3, 1.15) both;
  animation-delay: var(--delay, 0ms)
}
@keyframes polIn {
  0% { opacity: 0; transform: translateY(-54px) rotate(calc(var(--rot, 0deg) - 16deg)) scale(.9) }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1) }
}
.pol-card:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent)
}
.pol-media { position: relative; margin-bottom: 12px }
.pol-img {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 196px;
  cursor: pointer;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: var(--card-2)
}
.pol-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s ease; display: block }
.pol-card:hover .pol-img img { transform: scale(1.1) }
.pol-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--accent);
  z-index: 1
}
.pol-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--heading);
  font-size: .95rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s;
  z-index: 2
}
.pol-heart:hover { transform: scale(1.15); color: var(--rose-deep) }
.pol-heart.wish-on { color: var(--rose-deep); animation: heartPop .45s ease }
@keyframes heartPop {
  0% { transform: scale(.6) }
  55% { transform: scale(1.3) }
  100% { transform: scale(1) }
}
.pol-body { padding: 2px 4px 0 }
.pol-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text)
}
.pol-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px }
.pol-price { font-weight: 700; font-size: 1.08rem; color: var(--accent) }
.pol-add {
  border-radius: 999px;
  border: none;
  background: var(--btn);
  color: #fff;
  padding: 9px 15px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  transition: all .25s;
  cursor: pointer
}
.pol-add:hover { background: var(--btn-hov); transform: scale(1.07) }

/* Quick view related */
.qv-rel {
  flex: 1 1 0;
  background: var(--card-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: all .3s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center
}
.qv-rel:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-sm) }
.qv-rel img { width: 100%; height: 50px; object-fit: cover; border-radius: 9px }
.qv-rel .qr-n {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px
}
.qv-rel .qr-p { font-size: 11.5px; font-weight: 700; color: var(--accent) }
.empty-state { text-align: center; padding: 70px 20px; color: var(--soft) }
.empty-state i { font-size: 3rem; color: var(--line); display: block; margin-bottom: 14px }
.empty-state h5 { font-weight: 600; color: var(--heading) }

/* ---------- WHY US (conic border) ---------- */
.why-card {
  background: var(--card);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
  height: 100%
}
.why-card::before {
  content: "";
  position: absolute;
  inset: -160%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--btn) 70deg, var(--rose) 140deg, transparent 210deg, transparent 360deg);
  animation: conicSpin 3.6s linear infinite;
  opacity: 0;
  transition: opacity .4s
}
.why-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background: var(--card);
  z-index: 0;
  transition: background-color .4s
}
.why-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-md) }
.why-card:hover::before { opacity: 1 }
.why-card>* { position: relative; z-index: 1 }
@keyframes conicSpin { to { transform: rotate(360deg) } }
.why-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 26px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  transition: all .35s
}
.why-card:hover .why-icon { background: var(--btn); color: #fff; transform: scale(1.08) rotate(-6deg) }
.why-card h5 { font-size: 1.05rem; font-weight: 600; font-family: 'Jost', sans-serif; color: var(--heading) }
.why-card p { font-size: 13.5px; color: var(--soft); line-height: 1.6; margin-top: 8px }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin: 0 auto }
.faq .accordion-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px !important;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .3s, background-color .4s
}
.faq .accordion-item.showing { box-shadow: var(--shadow-md) }
.faq .accordion-button {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text);
  background: transparent;
  padding: 19px 22px;
  box-shadow: none !important;
  gap: 14px
}
.faq .faq-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--rose-deep);
  flex: 0 0 34px;
  transition: color .3s
}
.faq .accordion-button::after {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2327473C'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
.faq .accordion-button:not(.collapsed) { background: var(--btn); color: #fff }
.faq .accordion-button:not(.collapsed) .faq-num { color: #E5B8B2 }
.faq .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(180deg)
}
.faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(39, 71, 60, .12) }
.faq .accordion-body {
  padding: 6px 24px 22px calc(22px + 48px);
  color: var(--soft);
  font-size: 14.5px;
  line-height: 1.7
}
@media (max-width:575.98px) {
  .faq .accordion-body { padding-left: 24px }
}

/* ---------- NEWSLETTER ---------- */
.news-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative
}
.news-left {
  background: linear-gradient(140deg, #ECBAB4, #D8928A);
  color: #5A3430;
  padding: 52px 48px;
  position: relative;
  overflow: hidden
}
.news-left::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  right: -90px;
  bottom: -110px
}
.news-left::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  left: -50px;
  top: -60px
}
.news-left .overline { color: #7E4A44 }
.news-left .overline::before { background: #7E4A44 }
.news-left h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: #fff; margin: 12px 0 10px }
.news-left p { color: #6E433E; font-size: .95rem; max-width: 340px }
.news-perks {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1
}
.news-perks li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #57312D;
  font-size: .92rem;
  font-weight: 500
}
.news-perks i {
  color: #fff;
  background: rgba(255, 255, 255, .3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .65rem
}
.news-spark { position: absolute; color: rgba(255, 255, 255, .75); animation: floaty 6s ease-in-out infinite; z-index: 1 }
.news-right {
  background: var(--card);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color .4s
}
.form-lume {
  border: 1.5px solid var(--input-brd);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .93rem;
  background: var(--input);
  color: var(--text);
  transition: all .25s;
  width: 100%
}
.form-lume::placeholder { color: var(--soft) }
.form-lume:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--card)
}
.form-lume.is-invalid { border-color: #C96A61; background: var(--rose-50) }
.form-label-lume {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: .02em
}
.invalid-feedback-lume { display: none; font-size: 12px; color: #C0544A; margin-top: 5px }

/* ---------- CONTACT ---------- */
.info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  border: 1px solid var(--line);
  transition: all .3s
}
.info-row:hover { transform: translateX(6px); box-shadow: var(--shadow-md) }
.info-row h6 { font-size: .95rem; font-weight: 600; font-family: 'Jost', sans-serif; color: var(--heading) }
.info-row p { font-size: 13.5px; color: var(--soft); margin: 3px 0 0; line-height: 1.5 }
.contact-card {
  background: var(--card);
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 30px;
  height: 100%;
  transition: background-color .4s
}
.map-frame {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 330px;
  border: 6px solid var(--card)
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) sepia(.06) }
[data-theme="dark"] .map-frame iframe { filter: grayscale(.3) brightness(.75) contrast(1.05) }

/* ---------- FOOTER ---------- */
.footer { background: #1D2C26; color: #C6D2C9; margin-top: 40px }
.trust-strip { border-bottom: 1px solid rgba(255, 255, 255, .09); padding: 30px 0 }
.trust-item { display: flex; gap: 13px; align-items: center }
.trust-item .t-ico {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  color: #A8C0B1;
  font-size: 17px
}
.trust-item b { font-size: .9rem; font-weight: 600; color: #F1EDE4; display: block }
.trust-item span { font-size: 12.5px; color: #93A69A; line-height: 1.4 }
.footer .brand-name { color: #F1EDE4 }
.footer .brand-mark { color: #7FA794 }
.footer-blurb {
  font-size: 13.5px;
  color: #93A69A;
  line-height: 1.7;
  margin: 14px 0 18px;
  max-width: 280px
}
.f-title {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #85A092;
  margin-bottom: 18px;
  font-weight: 600
}
.f-link {
  color: #C6D2C9;
  font-size: 14.5px;
  display: inline-block;
  padding: 5px 0;
  transition: all .25s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left
}
.f-link:hover { color: #fff; transform: translateX(5px) }
.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  color: #C6D2C9;
  transition: all .25s;
  font-size: .95rem
}
.social-btn:hover {
  background: var(--green-700, #2F5A4B);
  border-color: var(--green-700, #2F5A4B);
  color: #fff;
  transform: translateY(-3px)
}
.f-news { display: flex; margin-top: 4px }
.f-news input {
  flex: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-right: none;
  border-radius: 999px 0 0 999px;
  padding: 11px 18px;
  font-size: .88rem;
  color: #fff;
  min-width: 0
}
.f-news input::placeholder { color: #8AA092 }
.f-news input:focus { outline: none; border-color: #2F5A4B }
.f-news button {
  border-radius: 0 999px 999px 0;
  background: var(--rose);
  border: none;
  color: #fff;
  padding: 11px 20px;
  font-weight: 600;
  font-size: .85rem;
  transition: background .25s
}
.f-news button:hover { background: var(--rose-deep) }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 22px 0;
  font-size: 13px;
  color: #8AA092;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

/* ---------- CART / WISHLIST OFFCANVAS ---------- */
.offcanvas-lume { background: var(--card-2); border-radius: 24px 0 0 24px; transition: background-color .4s }
.offcanvas-lume .offcanvas-header { border-color: var(--line) !important }
.cart-item,
.ci-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center
}
.cart-item img,
.ci-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px }
.ci-name { font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--text) }
.ci-price { font-size: .8rem; color: var(--soft); margin-top: 2px }
.qty-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  margin-top: 8px;
  background: var(--card)
}
.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  font-size: 12px;
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: all .2s;
  line-height: 1;
  cursor: pointer
}
.qty-btn:hover { background: var(--btn); color: #fff }
.qty-val { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--text) }
.ci-right { text-align: right }
.ci-total { font-weight: 700; color: var(--accent); font-size: .95rem }
.ci-remove {
  border: none;
  background: none;
  color: var(--soft);
  font-size: 1rem;
  margin-top: 10px;
  transition: all .2s;
  cursor: pointer
}
.ci-remove:hover { color: #C0544A; transform: scale(1.15) }
.ci-wadd {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: all .25s;
  cursor: pointer;
  font-size: .85rem
}
.ci-wadd:hover { background: var(--btn); border-color: var(--btn); color: #fff; transform: scale(1.08) }
.cart-empty,
.wish-empty { text-align: center; padding: 70px 24px; color: var(--soft) }
.cart-empty i,
.wish-empty i { font-size: 3.4rem; color: var(--line); display: block; margin-bottom: 16px }
.sum-row { display: flex; justify-content: space-between; font-size: .92rem; color: var(--soft); padding: 5px 0 }
.sum-row.grand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading);
  border-top: 1.5px dashed var(--line);
  margin-top: 10px;
  padding-top: 14px
}
.cod-note {
  background: var(--accent-soft);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.8px;
  color: var(--cod-tx);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0
}
.cod-note b { color: var(--heading) }

/* ---------- MODALS ---------- */
.modal-lume .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--card)
}
.modal-lume .modal-header { background: var(--card-2); border: none; padding: 20px 26px }
.modal-lume .modal-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--heading) }
.legal h6 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 5px;
  font-weight: 700
}
.legal p { font-size: 14px; color: var(--soft); line-height: 1.65 }
.qv-img { width: 100%; height: 100%; object-fit: contain; min-height: 320px }
.qv-wish {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--glass);
  backdrop-filter: blur(8px);
  color: var(--heading);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all .25s;
  z-index: 2
}
.qv-wish:hover { transform: scale(1.12); color: var(--rose-deep) }
.qv-wish.wish-on { color: var(--rose-deep) }
.pay-box {
  background: var(--accent-soft);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center
}
.pay-box .icon-chip {
  width: 46px;
  height: 46px;
  background: var(--card);
  color: var(--accent);
  font-size: 20px;
  flex: 0 0 46px
}
.pay-box b { font-size: .95rem; color: var(--heading) }
.pay-box span { display: block; font-size: 12.8px; color: var(--cod-tx); margin-top: 2px }

/* ---------- TOASTS (animated) ---------- */
#toastZone {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(370px, calc(100vw - 36px))
}
.toast-lume {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  padding: 14px 42px 16px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  animation: toastIn .55s cubic-bezier(.18, 1.25, .4, 1) both
}
.toast-lume::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--t-accent, #2F6B4F)
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateX(120%) rotate(4deg) scale(.85) }
  62% { opacity: 1; transform: translateX(-7px) rotate(-1.5deg) scale(1.02) }
  100% { opacity: 1; transform: none }
}
.toast-lume.leaving { animation: toastOut .32s ease forwards }
@keyframes toastOut { to { opacity: 0; transform: translateX(120%) rotate(-4deg) scale(.9) } }
.t-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--t-soft, #E2F0E7);
  color: var(--t-accent, #2F6B4F);
  animation: iconPop .5s .12s cubic-bezier(.2, 1.6, .4, 1) both;
  position: relative
}
.t-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 2px solid var(--t-accent, #2F6B4F);
  opacity: 0;
  animation: ringPulse 1.8s .3s ease-out infinite
}
@keyframes iconPop {
  from { transform: scale(0) rotate(-90deg) }
  to { transform: scale(1) rotate(0) }
}
@keyframes ringPulse {
  0% { transform: scale(.8); opacity: .55 }
  100% { transform: scale(1.25); opacity: 0 }
}
.t-title { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.3; padding-top: 2px }
.t-msg { font-size: 12.8px; color: var(--soft); margin-top: 2px; line-height: 1.45 }
.t-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  color: var(--soft);
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  transition: color .2s
}
.t-close:hover { color: var(--text) }
.t-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--t-accent, #2F6B4F), transparent);
  transform-origin: left;
  animation: barShrink linear forwards
}
@keyframes barShrink {
  from { transform: scaleX(1) }
  to { transform: scaleX(0) }
}

/* ---------- BACK TO TOP ---------- */
.back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--btn);
  color: #fff;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all .35s;
  cursor: pointer
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) }
.back-top:hover { background: var(--btn-hov); transform: translateY(-4px) }

/* ================= INNER PAGE HERO (subpages) ================= */
.page-hero {
  position: relative;
  padding: 76px 0 62px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(600px 300px at 85% -60%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(500px 260px at 8% -40%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 70%),
    var(--bg)
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 24%, transparent);
  top: -300px;
  right: -140px;
  animation: spin 60s linear infinite;
  pointer-events: none
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--rose) 22%, transparent);
  bottom: -220px;
  left: -110px;
  animation: spin 48s linear infinite reverse;
  pointer-events: none
}
.page-hero .overline { justify-content: center }
.page-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin: 16px 0 12px;
  position: relative;
  z-index: 1
}
.page-hero h1 em { font-style: italic; color: var(--accent) }
.page-hero p {
  color: var(--soft);
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.7
}
.crumb {
  font-size: .8rem;
  color: var(--soft);
  margin-top: 18px;
  position: relative;
  z-index: 1
}
.crumb a { color: var(--accent); font-weight: 600 }
.crumb a:hover { text-decoration: underline }
.crumb i { font-size: .7rem; margin: 0 6px; color: var(--soft) }

/* ================= LEGAL PAGES ================= */
.legal-page {
  max-width: 920px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 58px);
  box-shadow: var(--shadow-sm)
}
.legal-page .legal h6 { margin-top: 28px }
.legal-page .legal h6:first-of-type { margin-top: 18px }
.lead-p { font-size: 1.02rem; color: var(--text); line-height: 1.75 }

/* ================= CHECKOUT PAGE ================= */
.co-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--shadow-sm)
}
.co-card h4 {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px
}
.co-card h4 i { color: var(--accent) }
.co-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center
}
.co-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px }
.success-card {
  max-width: 660px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: clamp(36px, 6vw, 60px) 40px;
  text-align: center;
  border: 1px solid var(--line)
}
.success-card .s-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 2.4rem;
  display: grid;
  place-items: center;
  animation: heartPop .6s ease
}
.success-card h2 { font-size: 1.9rem; margin-bottom: 10px }
.success-card p { color: var(--soft); font-size: .95rem }
.s-details {
  background: var(--card-2);
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 24px 0;
  display: grid;
  gap: 8px;
  text-align: left
}
.s-details .sum-row { padding: 3px 0 }

/* ================= MISC SUBPAGE HELPERS ================= */
.unsub-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm)
}
.done-box {
  text-align: center;
  padding: 30px 10px
}
.done-box i {
  font-size: 2.6rem;
  color: var(--accent);
  display: block;
  margin-bottom: 12px
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:991.98px) {
  .section { padding: 66px 0 }
  .products-band { padding: 66px 0 }
  .about-grid { grid-template-columns: 1fr; gap: 44px }
  .sale-card { grid-template-columns: 1fr }
  .sale-left { padding: 42px 34px }
  .sale-off {
    position: static;
    transform: none;
    margin: 26px auto 4px;
    width: 118px;
    height: 118px;
    animation: none
  }
  .sale-img { min-height: 240px; order: -1 }
  .news-card { grid-template-columns: 1fr }
  .news-left,
  .news-right { padding: 40px 32px }
  .controls { grid-template-columns: 1fr }
  .nav-center { justify-content: flex-start }
}
@media (max-width:767.98px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 8px }
  .cat-item:nth-child(even) { transform: none }
  .cat-circle { width: 104px; height: 104px }
  .cat-emoji { width: 28px; height: 28px; font-size: 13px }
  .cat-name { font-size: .8rem }
  .cat-count { font-size: 10.5px }
  .cat-view { font-size: 10.5px; margin-top: 5px }
  .category-card { padding: 30px 18px 26px }
  .f-card { flex: 0 0 205px }
  .f-img { height: 150px }
  .about-bento { grid-auto-rows: auto }
  .b-a { grid-row: auto }
  .about-card,
  .b-wide { min-height: 140px }
  .hs-track { gap: 10px }
  .about-frame { min-height: 230px }
}