/* =====================================================================
   Teaspoon Honey — Luxury V2 (ADDITIVE)
   All selectors namespaced `.luxv2*`. Reuses theme tokens (--honey, --gold,
   --brown, --cream, --noir, --serif, --sans, --script) defined in theme.css.
   Nothing here overrides existing rules.
   ===================================================================== */

.luxv2 { position: relative; z-index: 2; }
.luxv2 *, .luxv2 *::before, .luxv2 *::after { box-sizing: border-box; }

.luxv2-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

/* ---- Shared atoms ---------------------------------------------------- */
.luxv2-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 18px;
}
.luxv2-eyebrow--light { color: var(--honey); }

.luxv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95em 1.9em;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, transform .3s ease, box-shadow .3s ease, border-color .25s ease;
}
.luxv2-btn--gold { background: var(--honey); color: var(--brown); }
.luxv2-btn--gold:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(234,154,54,.42); }
.luxv2-btn--ghost { background: transparent; color: var(--cream); border-color: rgba(249,242,226,.4); }
.luxv2-btn--ghost:hover { background: rgba(249,242,226,.1); border-color: rgba(249,242,226,.75); }

/* ---- Scroll reveal (JS adds .is-in) ---------------------------------- */
.luxv2 [data-luxv2-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.luxv2 [data-luxv2-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   1 · Luxury Philosophy (noir editorial)
   ===================================================================== */
.luxv2-phi {
  background: var(--noir);
  color: var(--cream);
  padding-block: clamp(90px, 15vh, 190px);
  text-align: center;
  overflow: hidden;
}
.luxv2-phi__wrap { max-width: 1000px; }
.luxv2-phi__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 clamp(24px, 4vh, 40px);
  color: #fff;
}
.luxv2-phi__title .luxv2-line { display: block; }
.luxv2-phi__title em { font-style: italic; color: var(--honey); }
.luxv2-line:nth-child(2) { transition-delay: .12s; }
.luxv2-line:nth-child(3) { transition-delay: .24s; }
.luxv2-phi__lead {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  color: rgba(249,242,226,.7);
  max-width: 620px;
  margin: 0 auto clamp(48px, 8vh, 80px);
}
.luxv2-phi__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
  border-top: 1px solid rgba(249,242,226,.14);
  padding-top: clamp(36px, 6vh, 56px);
}
.luxv2-phi__pillar:nth-child(2) { transition-delay: .1s; }
.luxv2-phi__pillar:nth-child(3) { transition-delay: .2s; }
.luxv2-phi__num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold); }
.luxv2-phi__ph { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.5rem); color: #fff; margin: 10px 0 10px; }
.luxv2-phi__pp { font-family: var(--sans); font-size: .95rem; line-height: 1.65; color: rgba(249,242,226,.62); margin: 0; }
.luxv2-phi__sign { font-family: var(--script); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--honey-soft); margin: clamp(40px,7vh,64px) 0 0; }

/* =====================================================================
   2 · From Hive to Gift (light timeline)
   ===================================================================== */
.luxv2-jny {
  background: var(--cream);
  color: var(--brown);
  padding-block: clamp(74px, 11vh, 150px);
}
.luxv2-jny__head { text-align: center; max-width: 720px; margin: 0 auto clamp(50px, 8vh, 84px); }
.luxv2-jny__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 14px; }
.luxv2-jny__sub { font-family: var(--sans); font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.7; color: var(--ink-soft); margin: 0; }

.luxv2-jny__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.luxv2-jny__track {
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: rgba(67,55,45,.16);
  z-index: 0;
}
.luxv2-jny__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--honey));
  transition: width 1.8s cubic-bezier(.22,.61,.36,1);
}
.luxv2-jny__rail.is-filled .luxv2-jny__fill { width: 100%; }

.luxv2-jny__node { position: relative; z-index: 1; text-align: center; padding-inline: 4px; transition-delay: calc(var(--luxv2-i, 0) * .1s); }
.luxv2-jny__dot {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--terra);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(67,55,45,.1);
}
.luxv2-jny__dot svg { width: 38px; height: 38px; }
.luxv2-jny__step { display: block; font-family: var(--sans); font-size: 0.69rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.luxv2-jny__nt { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0 0 8px; color: var(--brown); }
.luxv2-jny__nd { font-family: var(--sans); font-size: .86rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* =====================================================================
   3 · Personalise Your Gift (configurator)
   ===================================================================== */
.luxv2-cfg { background: var(--honey-soft); color: var(--brown); padding-block: clamp(74px, 11vh, 150px); }
.luxv2-cfg__head { text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 7vh, 72px); }
.luxv2-cfg__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 14px; }
.luxv2-cfg__sub { font-family: var(--sans); font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.7; color: var(--ink-soft); margin: 0; }

.luxv2-cfg__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.luxv2-cfg__steps { display: grid; gap: clamp(22px, 3vh, 34px); }
.luxv2-cfg__step { border: 0; margin: 0; padding: 0; }
.luxv2-cfg__legend { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--brown); margin-bottom: 16px; padding: 0; }
.luxv2-cfg__legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brown); color: var(--cream); font-size: 0.75rem; }

.luxv2-cfg__opts { display: flex; flex-wrap: wrap; gap: 12px; }
.luxv2-cfg__opts--honey { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px; }

.luxv2-cfg__honey {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 10px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .25s, box-shadow .3s, transform .3s;
}
.luxv2-cfg__honey:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(67,55,45,.14); }
.luxv2-cfg__honey.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--honey) inset, 0 14px 30px rgba(234,154,54,.25); }
.luxv2-cfg__honeyimg { display: block; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--cream); }
.luxv2-cfg__honeyimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luxv2-cfg__honeyname { display: block; margin-top: 8px; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--brown); line-height: 1.2; }

.luxv2-cfg__chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .7em 1.25em;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--brown);
  transition: border-color .25s, box-shadow .3s, transform .25s, background .25s;
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
}
.luxv2-cfg__chip:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(67,55,45,.12); }
.luxv2-cfg__chip.is-selected { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.luxv2-cfg__chipl { font-size: .92rem; font-weight: 600; }
.luxv2-cfg__chips { font-size: 0.75rem; opacity: .7; }

.luxv2-cfg__summary {
  position: sticky;
  top: 100px;
  background: var(--noir);
  color: var(--cream);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 24px 60px rgba(13,10,6,.28);
}
.luxv2-cfg__slabel { display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--honey); margin-bottom: 18px; }
.luxv2-cfg__list { margin: 0 0 24px; padding: 0; }
.luxv2-cfg__list > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(249,242,226,.14); }
.luxv2-cfg__list dt { font-family: var(--sans); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(249,242,226,.55); margin: 0; }
.luxv2-cfg__list dd { margin: 0; font-family: var(--serif); font-size: 1.02rem; color: #fff; text-align: right; }
.luxv2-cfg__summary .luxv2-btn { width: 100%; }
.luxv2-cfg__note { font-family: var(--sans); font-size: 0.75rem; line-height: 1.5; color: rgba(249,242,226,.5); margin: 14px 0 0; text-align: center; }

/* =====================================================================
   4 · Corporate Gifting (dark, image + parallax)
   ===================================================================== */
.luxv2-corp { background: var(--noir); color: var(--cream); padding-block: clamp(84px, 14vh, 180px); overflow: hidden; }
.luxv2-corp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.luxv2-corp__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.015em; color: #fff; margin: 0 0 20px; }
.luxv2-corp__title em { font-style: italic; color: var(--honey); }
.luxv2-corp__lead { font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.75; color: rgba(249,242,226,.7); margin: 0 0 30px; max-width: 520px; }
.luxv2-corp__list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 14px; }
.luxv2-corp__list li { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: .98rem; color: rgba(249,242,226,.85); }
.luxv2-corp__list li:nth-child(2) { transition-delay: .08s; }
.luxv2-corp__list li:nth-child(3) { transition-delay: .16s; }
.luxv2-corp__list li:nth-child(4) { transition-delay: .24s; }
.luxv2-corp__list svg { flex: 0 0 auto; color: var(--honey); }
.luxv2-corp__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.luxv2-corp__media { position: relative; }
.luxv2-corp__frame { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgba(13,10,6,.5); will-change: transform; }
.luxv2-corp__img { display: block; width: 100%; height: auto; }
.luxv2-corp__cap { position: absolute; left: 20px; bottom: 18px; font-family: var(--script); font-size: 1.7rem; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); }

/* =====================================================================
   5 · The Standard (values — merged philosophy + trust; dark tone)
   ===================================================================== */
.luxv2-trust { background: var(--noir); color: var(--cream); padding-block: clamp(74px, 11vh, 150px); }
.luxv2-trust__head { text-align: center; max-width: 820px; margin: 0 auto clamp(42px, 6vh, 68px); }
.luxv2-trust__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 16px; color: #fff; }
.luxv2-trust__title em { font-style: italic; color: var(--honey); }
.luxv2-trust__sub { font-family: var(--sans); font-size: clamp(.98rem, 1.4vw, 1.08rem); line-height: 1.7; color: rgba(249,242,226,.62); margin: 0; }
.luxv2-trust__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 30px); }
.luxv2-trust__card { text-align: center; padding: clamp(22px, 2vw, 32px) 16px; background: rgba(249,242,226,.04); border: 1px solid rgba(249,242,226,.12); border-radius: 18px; transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s, border-color .35s; transition-delay: calc(var(--luxv2-i, 0) * .07s); }
.luxv2-trust__card:hover { transform: translateY(-6px); border-color: rgba(242,184,49,.4); box-shadow: 0 24px 50px rgba(13,10,6,.5); }
.luxv2-trust__ico { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: rgba(242,184,49,.12); color: var(--honey); }
.luxv2-trust__ico svg { width: 30px; height: 30px; }
.luxv2-trust__ct { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.24rem); margin: 0 0 8px; color: #fff; }
.luxv2-trust__cp { font-family: var(--sans); font-size: .86rem; line-height: 1.6; color: rgba(249,242,226,.6); margin: 0; }
/* Quiet-fade motion for this scene (opacity-led, minimal travel). */
.luxv2-trust [data-luxv2-reveal] { transform: translateY(14px); transition-duration: 1.15s; }

/* ---- Gifting: corporate/business panel (merged in) ------------------ */
.luxv2-gift__biz { margin-top: clamp(44px, 6vh, 72px); padding: clamp(28px, 3.5vw, 48px); background: var(--noir); color: var(--cream); border-radius: 22px; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; box-shadow: 0 30px 70px rgba(13,10,6,.24); }
.luxv2-gift__biztitle { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; color: #fff; margin: 8px 0 12px; }
.luxv2-gift__bizsub { font-family: var(--sans); font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.7; color: rgba(249,242,226,.72); margin: 0 0 22px; max-width: 42ch; }
.luxv2-gift__occ { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.luxv2-gift__occ li { display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 2px solid var(--honey); }
.luxv2-gift__occl { font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.2rem); color: #fff; }
.luxv2-gift__occs { font-family: var(--sans); font-size: .82rem; color: rgba(249,242,226,.6); }

/* =====================================================================
   6 · Premium closing CTA (finale)
   ===================================================================== */
.luxv2-fin { position: relative; overflow: hidden; color: var(--cream); background: var(--noir); padding-block: clamp(110px, 20vh, 220px); text-align: center; }
.luxv2-fin__bg { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.luxv2-fin__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luxv2-fin__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 40%, rgba(13,10,6,.55), rgba(13,10,6,.82)); }
.luxv2-fin__inner { position: relative; z-index: 2; max-width: 860px; }
.luxv2-fin__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 0 0 22px; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.luxv2-fin__title em { font-style: italic; color: var(--honey); }
.luxv2-fin__lead { font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.75; color: rgba(249,242,226,.82); max-width: 560px; margin: 0 auto clamp(32px, 5vh, 46px); }
.luxv2-fin__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =====================================================================
   Hero micro-interactions (ADDITIVE — complements existing hero; no JS,
   no override of the canvas/loader logic in theme.js)
   ===================================================================== */
.hero__cta .b { transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.hero__cta .b:hover { transform: translateY(-3px); }
.hero__cta .b--gold:hover { box-shadow: 0 16px 38px rgba(234,154,54,.5); }

/* =====================================================================
   Cinematic continuity — seams, anchors, per-scene motion
   ===================================================================== */
/* Keep each scene's content above its decorative seam gradient. */
.luxv2-trust > .luxv2-wrap,
.luxv2-cfg > .luxv2-wrap,
.luxv2-jny > .luxv2-wrap { position: relative; z-index: 1; }

/* Seam entering a DARK scene from a light one (light fades down into dark). */
.luxv2-seam--fromlight::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, var(--cream), rgba(249,242,226,0));
  opacity: .4; pointer-events: none; z-index: 0;
}
/* Seam entering a LIGHT scene from a dark one (dark fades down into light). */
.luxv2-seam--fromdark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, var(--noir), rgba(13,10,6,0));
  opacity: .22; pointer-events: none; z-index: 0;
}

/* Preserved #cta navigation anchor (retired original cta) with header offset. */
.luxv2-anchor { position: absolute; top: 0; height: 1px; width: 1px; scroll-margin-top: 90px; }

/* Finale — minimal, restrained motion (the closing shot). */
.luxv2-fin [data-luxv2-reveal] { transform: translateY(16px) scale(.995); transition-duration: 1.1s; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
  .luxv2-cfg__grid { grid-template-columns: 1fr; }
  .luxv2-cfg__summary { position: static; }
  .luxv2-corp__grid { grid-template-columns: 1fr; }
  .luxv2-corp__media { order: -1; }
  .luxv2-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .luxv2-corp__occasions { grid-template-columns: repeat(2, 1fr); }
  .luxv2-gift__biz { grid-template-columns: 1fr; gap: 24px; }
  .luxv2-jny__rail { grid-template-columns: 1fr; gap: 0; max-width: 460px; margin: 0 auto; }
  .luxv2-jny__track { top: 0; bottom: 0; left: 34px; right: auto; width: 2px; height: auto; }
  .luxv2-jny__fill { inset: 0 0 auto 0; width: 100% !important; height: 0; background: linear-gradient(180deg, var(--gold), var(--honey)); transition: height 1.8s cubic-bezier(.22,.61,.36,1); }
  .luxv2-jny__rail.is-filled .luxv2-jny__fill { height: 100%; }
  .luxv2-jny__node { display: grid; grid-template-columns: 70px 1fr; gap: 18px; text-align: left; align-items: start; padding: 14px 0; }
  .luxv2-jny__dot { margin: 0; }
  .luxv2-jny__step { margin-top: 4px; }
}
@media (max-width: 640px) {
  .luxv2-phi__pillars { grid-template-columns: 1fr; gap: 26px; }
  .luxv2-cfg__opts--honey { grid-template-columns: repeat(3, 1fr); }
  .luxv2-corp__cta { flex-direction: column; }
  .luxv2-corp__cta .luxv2-btn { width: 100%; }
  .luxv2-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .luxv2-corp__occasions { grid-template-columns: 1fr; }
  .luxv2-gift__occ { grid-template-columns: 1fr; }
  .luxv2-fin__cta { flex-direction: column; }
  .luxv2-fin__cta .luxv2-btn { width: 100%; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .luxv2 [data-luxv2-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .luxv2-jny__fill { transition: none !important; }
  .luxv2-corp__frame, .luxv2-fin__bg { transform: none !important; }
  .hero__cta .b:hover { transform: none !important; }
}

/* =====================================================================
   Create an Impact (real apiary/community photography)
   ===================================================================== */
.luxv2-impact{ background:var(--noir); color:var(--cream); padding-block:clamp(74px,11vh,150px); }
.luxv2-impact__head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,6vh,64px); }
.luxv2-impact__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; color:#fff; margin:0 0 14px; }
.luxv2-impact__title em{ font-style:italic; color:var(--honey); }
.luxv2-impact__sub{ font-family:var(--sans); font-size:clamp(.98rem,1.4vw,1.1rem); line-height:1.7; color:rgba(249,242,226,.65); margin:0; }
.luxv2-impact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); }
.luxv2-impact__card{ transition-delay:calc(var(--luxv2-i,0)*.08s); }
.luxv2-impact__media{ border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 24px 54px rgba(13,10,6,.5); }
.luxv2-impact__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,.84,.44,1); }
.luxv2-impact__card:hover .luxv2-impact__media img{ transform:scale(1.05); }
.luxv2-impact__ct{ font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,1.8vw,1.4rem); color:#fff; margin:18px 0 8px; }
.luxv2-impact__cp{ font-family:var(--sans); font-size:.92rem; line-height:1.6; color:rgba(249,242,226,.62); margin:0; }

/* =====================================================================
   The Valley Collection (single-origin sourcing story)
   ===================================================================== */
.luxv2-valley{
  background:var(--cream); color:var(--brown);
  padding-block:clamp(74px,11vh,150px);
}
.luxv2-valley__head{ text-align:center; max-width:760px; margin:0 auto clamp(26px,4vh,40px); }
.luxv2-valley__title{
  font-family:var(--serif); font-weight:700; font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1.06; letter-spacing:-.02em; margin:0 0 14px;
}
.luxv2-valley__title em{ font-style:italic; color:var(--terra); font-weight:700; }
.luxv2-valley__sub{
  font-family:var(--sans); font-size:clamp(.98rem,1.3vw,1.08rem); line-height:1.7;
  color:var(--ink-soft); margin:0 auto; max-width:56ch;
}

/* --- chip selector ------------------------------------------------------ */
.luxv2-valley__chips{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:clamp(28px,4.5vh,44px) auto clamp(20px,3vh,32px); max-width:820px;
}
.luxv2-valley__chip{
  display:inline-flex; align-items:baseline; gap:10px; cursor:pointer;
  padding:.75em 1.4em; border-radius:100px;
  background:#fff; border:1px solid rgba(67,55,45,.2); color:var(--brown);
  font-family:var(--sans);
  transition:background .35s cubic-bezier(.16,.84,.44,1), color .25s, border-color .25s, box-shadow .3s;
}
.luxv2-valley__chip:hover{ border-color:var(--honey); box-shadow:0 8px 20px rgba(67,55,45,.08); }
.luxv2-valley__chip.is-on{
  background:var(--brown); color:var(--honey); border-color:var(--brown);
  box-shadow:0 12px 28px rgba(67,55,45,.24);
}
.luxv2-valley__chip:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.luxv2-valley__chip-i{
  font-size:0.69rem; font-weight:700; letter-spacing:.14em; opacity:.6;
}
.luxv2-valley__chip.is-on .luxv2-valley__chip-i{ color:var(--honey); opacity:.85; }
.luxv2-valley__chip-n{
  font-size:.82rem; font-weight:700; letter-spacing:.05em;
}

/* --- showcase stage ----------------------------------------------------- */
.luxv2-valley__stage{ position:relative; }
.luxv2-valley__panel{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(20px,3vw,44px); align-items:stretch;
  background:#fff; border:1px solid rgba(67,55,45,.08);
  border-radius:22px; overflow:hidden;
  box-shadow:0 26px 60px rgba(67,55,45,.14);
  opacity:0; transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,.84,.44,1),
             transform .55s cubic-bezier(.16,.84,.44,1);
}
.luxv2-valley__panel.is-on{ opacity:1; transform:none; }
/* Layered panels: only the active one participates in flow. The old
   grid used .is-hidden approach; hidden attr keeps semantics clean. */
.luxv2-valley__panel[hidden]{ display:none; }

.luxv2-valley__media{
  position:relative; overflow:hidden; min-height:clamp(320px,44vh,520px);
  background:radial-gradient(120% 100% at 50% 0%, #FFF5DD 0%, var(--cream) 60%, var(--cream) 100%);
}
.luxv2-valley__pic,
.luxv2-valley__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transition:transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.luxv2-valley__panel.is-on .luxv2-valley__media img{ transform:scale(1.02); }
.luxv2-valley__stamp{
  position:absolute; top:20px; left:20px; z-index:2;
  display:grid; place-content:center;
  width:76px; height:76px; border-radius:50%;
  background:rgba(255,253,247,.94); color:var(--brown);
  text-align:center; box-shadow:0 8px 22px rgba(67,55,45,.16);
}
.luxv2-valley__stamp em{
  display:block; font-family:var(--serif); font-style:normal; font-weight:700;
  font-size:1.28rem; line-height:1;
}
.luxv2-valley__stamp span{
  display:block; margin-top:4px; font-family:var(--sans); font-size:0.69rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra);
}

.luxv2-valley__copy{
  padding:clamp(24px,3vw,44px); display:flex; flex-direction:column;
}
.luxv2-valley__region{
  font-family:var(--sans); font-size:0.75rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--terra);
  margin-bottom:10px;
}
.luxv2-valley__name{
  font-family:var(--serif); font-weight:700; color:var(--brown);
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; margin:0;
  letter-spacing:-.014em;
}
.luxv2-valley__tag{
  font-family:var(--sans); font-size:clamp(.96rem,1.1vw,1.04rem);
  line-height:1.6; color:var(--ink-soft); margin:12px 0 0;
}
.luxv2-valley__notes{
  list-style:none; margin:clamp(18px,2.4vh,26px) 0 0; padding:0;
  display:grid; gap:9px;
}
.luxv2-valley__notes li{
  display:flex; align-items:flex-start; gap:10px;
  font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--brown);
}
.luxv2-valley__notes svg{ flex:none; color:var(--honey); margin-top:3px; }

.luxv2-valley__buy{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:auto; padding-top:clamp(18px,2.4vh,26px);
  border-top:1px solid rgba(67,55,45,.1);
  flex-wrap:wrap;
}
.luxv2-valley__price{
  font-family:var(--serif); font-weight:700; color:var(--brown);
  font-size:clamp(1.15rem,1.6vw,1.4rem);
}
.luxv2-valley__price del{ opacity:.5; font-size:.75em; margin-right:.35em; }
.luxv2-valley__price ins{ text-decoration:none; }
.luxv2-valley__btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.95em 1.7em; border-radius:100px;
  background:var(--honey); color:var(--brown); text-decoration:none;
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s, color .25s, transform .28s cubic-bezier(.16,.84,.44,1), box-shadow .3s;
}
.luxv2-valley__btn:hover{
  background:var(--terra); color:#fff; transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(188,91,56,.3);
}
.luxv2-valley__btn svg{ transition:transform .3s cubic-bezier(.16,.84,.44,1); }
.luxv2-valley__btn:hover svg{ transform:translateX(4px); }

/* --- counter + dots ---------------------------------------------------- */
.luxv2-valley__foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:clamp(20px,3vh,32px); gap:14px;
}
.luxv2-valley__counter{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.luxv2-valley__counter em{ font-style:normal; font-weight:700; color:var(--brown); }
.luxv2-valley__dots{ display:inline-flex; gap:8px; }
.luxv2-valley__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(67,55,45,.24); cursor:pointer;
  transition:background .3s, width .35s cubic-bezier(.16,.84,.44,1), transform .3s;
}
.luxv2-valley__dot:hover{ background:rgba(67,55,45,.5); }
.luxv2-valley__dot.is-on{ background:var(--honey); width:28px; border-radius:100px; }
.luxv2-valley__dot:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }

/* --- mobile: single column, image on top, chips scrollable ------------ */
@media (max-width:820px){
  .luxv2-valley__panel{ grid-template-columns:minmax(0,1fr); }
  .luxv2-valley__media{ min-height:clamp(260px,40vw,340px); aspect-ratio:5/4; }
  .luxv2-valley__stamp{ width:60px; height:60px; top:14px; left:14px; }
  .luxv2-valley__chips{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding:0 var(--tsp-gutter,20px);
    margin-inline:calc(var(--tsp-gutter,20px) * -1);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .luxv2-valley__chips::-webkit-scrollbar{ display:none; }
  .luxv2-valley__chip{ flex:0 0 auto; }
}
@media (max-width:520px){
  .luxv2-valley__buy{ flex-direction:column; align-items:stretch; }
  .luxv2-valley__btn{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .luxv2-valley__panel,.luxv2-valley__media img,.luxv2-valley__btn,
  .luxv2-valley__btn svg,.luxv2-valley__dot,.luxv2-valley__chip{ transition:none; }
}

/* =====================================================================
   HOMEPAGE TONAL ALTERNATION (luxv2 sections)
   Companion to the block in theme.css. Chapter 5 (journey) goes DARK and
   chapter 6 (standard) goes LIGHT, so the page alternates rather than
   running several same-tone sections together. Existing tokens only.
   ===================================================================== */

/* 5 · From Hive to Gift -> DARK */
.luxv2-jny{ background:var(--noir); color:var(--cream); }
.luxv2-jny__title{ color:#fff; }
.luxv2-jny__sub{ color:rgba(249,242,226,.66); }
.luxv2-jny__track{ background:rgba(249,242,226,.18); }
.luxv2-jny__dot{ background:rgba(249,242,226,.06); color:var(--honey);
  border-color:rgba(249,242,226,.16); box-shadow:0 10px 30px rgba(13,10,6,.45); }
.luxv2-jny__nt{ color:#fff; }
.luxv2-jny__nd{ color:rgba(249,242,226,.62); }

/* 6 · The Standard -> LIGHT */
.luxv2-trust{ background:var(--cream); color:var(--brown); }
/* The eyebrow was --honey on noir, which was fine. On cream the warm accents all
   fail at 11px: --honey/--gold land near 2:1 and even --terra only reaches 4.01.
   --brown clears 4.5:1 comfortably, and the label still reads as an eyebrow from
   its uppercase + .34em tracking. Swap to --terra if you prefer the warmer accent
   and can accept the near-miss. */
.luxv2-trust .luxv2-eyebrow--light{ color:var(--brown); }
.luxv2-trust__title{ color:var(--brown); }
.luxv2-trust__sub{ color:var(--ink-soft); }
.luxv2-trust__card{ background:rgba(67,55,45,.035); border-color:rgba(67,55,45,.14); }
.luxv2-trust__card:hover{ border-color:rgba(234,154,54,.55); box-shadow:0 24px 50px rgba(67,55,45,.14); }
/* --honey on cream is too pale for an icon; --gold holds up. */
.luxv2-trust__ico{ background:rgba(234,154,54,.13); color:var(--gold); }
.luxv2-trust__ct{ color:var(--brown); }
.luxv2-trust__cp{ color:var(--ink-soft); }

/* Eyebrow consistency across the alternating tones.
   `.luxv2-eyebrow` is --gold, which reads well on the DARK sections (gold on noir
   in the journey chapter is ~5:1) but fails badly on the light ones: 2.05:1 on
   cream in the valley chapter and 1.8:1 on honey-soft in the gifting chapter -
   both pre-existing. Now that the Standard's eyebrow is --brown, matching the
   other light sections makes the set consistent AND clears AA. Dark sections keep
   the gold accent. */
/* :not(--light) matters: the gifting chapter contains a second eyebrow inside its
   DARK .luxv2-gift__biz sub-panel, which uses the --light variant. Without the
   exclusion this rule turned that one brown-on-noir (1.71:1). */
.luxv2-valley .luxv2-eyebrow:not(.luxv2-eyebrow--light),
.luxv2-cfg .luxv2-eyebrow:not(.luxv2-eyebrow--light){ color:var(--brown); }

/* ---- Type system: sans headings, script emphasis (see theme.css) ----- */
.luxv2-jny__title, .luxv2-cfg__title, .luxv2-trust__title,
.luxv2-impact__title, .luxv2-valley__title{
  font-weight:700; letter-spacing:-.022em; }
.luxv2-jny__nt, .luxv2-trust__ct, .luxv2-impact__ct,
.luxv2-valley__name, .luxv2-gift__biztitle{ font-weight:700; letter-spacing:-.015em; }
.luxv2-gift__occl, .luxv2-cfg__list dd{ font-weight:600; }
/* Emphasis inside a heading becomes the script wordmark face, not a
   synthetic italic - Mulish ships no italic, so `font-style:italic` would
   have been slanted by the browser. */
.luxv2-trust__title em, .luxv2-impact__title em, .luxv2-valley__title em,
.luxv2-jny__title em, .luxv2-cfg__title em{
  font-family:var(--script); font-style:normal; font-weight:400; font-size:1.12em; }

/* =====================================================================
   SECTION UNFOLD ON SCROLL
   Each non-pinned section starts hinged back along its TOP edge and
   unfolds flat as it scrolls into view — like a panel being folded up
   into place.

   The hinge is the top edge, not the bottom, on purpose: the top is the
   first part of a section you see, so the motion stays anchored to
   what's on screen. Hinging at the bottom would put the pivot far below
   the fold on tall sections (the gifting configurator is ~2500px) and
   swing the visible part wildly.

   SAFETY: the folded start state is gated on `html.tsp-fold`, a class that
   lux-v2.js adds itself immediately before wiring the observer. So the
   hidden state can only ever exist when the script that clears it is
   provably running. If lux-v2.js is blocked, 404s, or throws earlier in the
   file, the class is never added and all six sections simply render flat and
   visible — a fold effect is never worth risking invisible content.

   Cost: two composited properties (transform, opacity), one class toggle
   per section, and the observer disconnects each element after it fires.
   No new file, no library.
   ===================================================================== */
/* NOTE: the transition lives on `.is-unfolded`, NOT here. `tsp-fold` is added
   by JS after first paint, so a transition on the base state would animate the
   section INTO the folded position — every section would visibly fold shut and
   then unfold again. Declaring it only on the unfolded state means arming is an
   instant snap (and off-screen: the first folded section sits ~7 viewports down,
   after the three pinned scenes) while the reveal itself is smooth. */
html.tsp-fold .fold{
  --fold-deg:-9deg;          /* hinge angle; 0 disables the tilt          */
  --fold-persp:1500px;       /* lower = more dramatic perspective         */
  transform-origin:center top;
  transform:perspective(var(--fold-persp)) rotateX(var(--fold-deg));
  opacity:0;
  backface-visibility:hidden;
}
html.tsp-fold .fold.is-unfolded{
  transform:perspective(var(--fold-persp)) rotateX(0deg);
  opacity:1;
  transition:transform 1.05s var(--chap-ease, cubic-bezier(.16,.84,.44,1)),
             opacity .75s var(--chap-ease, cubic-bezier(.16,.84,.44,1));
  will-change:transform, opacity;
}
/* A gentler angle on phones: at narrow widths a 9deg tilt across the full
   viewport width reads as a skew rather than a fold. */
@media (max-width:680px){
  html.tsp-fold .fold{ --fold-deg:-5deg; --fold-persp:900px; }
}

@media (prefers-reduced-motion: reduce){
  html.tsp-fold .fold{ transform:none; opacity:1; transition:none; will-change:auto; }
}

/* =====================================================================
   OVERLAPPING STACKED PANELS  (.tspstack)
   The story page's effect — each panel pins and the next slides up and
   stacks over it — done with position:sticky instead of GSAP
   ScrollTrigger, so the homepage stays library-free.

   How it works: the panels are siblings inside `.tspstack`, all sticky at
   top:0. Each sticks until the wrapper's bottom edge passes, so panel 1
   stays pinned while 2, 3 and 4 rise over it in turn. Later siblings paint
   above earlier ones at equal z-index, which is what makes the incoming
   panel cover the outgoing one — no z-index ladder needed.

   DESKTOP ONLY, in the same spirit as lux-story.js (which also limits its
   pinning to wider screens). The breakpoint is 981px specifically because the
   Hive-to-Gift rail flips to a vertical layout at 980px and balloons from
   ~540px to 1366px - measured - and a panel taller than the viewport cannot
   pin cleanly. Below 981px the sections simply flow and keep their unfold.
   ===================================================================== */
@media (min-width: 981px) {
  .tspstack { position: relative; }
  .tspstack > section {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;   /* avoids the mobile-browser chrome jump */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Stacked panels are revealed BY the stack, so they must not also start
     folded — a folded panel is opacity:0, and a pinned panel that never
     scrolls into view again would stay invisible. */
  html.tsp-fold .tspstack > .fold {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* =====================================================================
   CONTAINER — 1440px SHELL
   .luxv2-wrap is the real content shell for every homepage section, and it
   was 1200px while the interior panel pages had been moved to 1440px, so
   content did not line up between the homepage and the rest of the site.
   Declared here because this stylesheet loads after theme.css and its own
   1200px rule would otherwise win.

   Only the SHELL widens. The narrow text wrappers (__head, __lead) keep
   their measures — a 1440px line of body copy is unreadable.
   ===================================================================== */
.luxv2-wrap{
  max-width:var(--tsp-container,1440px);
  padding-left:var(--tsp-gutter,clamp(20px,4vw,64px));
  padding-right:var(--tsp-gutter,clamp(20px,4vw,64px));
  box-sizing:border-box;
}

/* =====================================================================
   BEST SELLERS - the honey range (price + add-to-cart)
   The homepage revenue row. Editorial card, not a stock Woo grid.
   ===================================================================== */
/* =====================================================================
   THE COLLECTION (.bsell) - interactive taste filter + modern responsive
   grid. Rebuilt from a fixed 5-column grid to auto-fit responsive columns,
   with a chip filter on top and a richer card. Mobile keeps a snap-scroll
   because it works well on a phone.
   ===================================================================== */
.bsell{ background:#fff; padding:clamp(56px,9vh,110px) 0; }
.bsell__head{ text-align:center; max-width:720px; margin:0 auto clamp(24px,3.5vh,40px); }
.bsell__title{
  font-family:var(--serif); font-weight:700; color:var(--brown); margin:12px 0 0;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.06; letter-spacing:-.024em;
}
.bsell__title em{ font-style:italic; color:var(--honey); }
.bsell__sub{
  font-family:var(--sans); font-size:clamp(.94rem,1.2vw,1.04rem); line-height:1.7;
  color:var(--ink-soft); margin:14px auto 0; max-width:52ch;
}

/* --- taste chip filter -------------------------------------------------- */
.bsell__chips{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:0 auto clamp(28px,4vh,44px); max-width:640px;
}
.bsell-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:.62em 1.2em; border-radius:100px;
  background:#fff; border:1px solid rgba(67,55,45,.2); color:var(--brown);
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  transition:background .3s cubic-bezier(.16,.84,.44,1), color .25s, border-color .25s, box-shadow .3s;
}
.bsell-chip:hover{ border-color:var(--honey); box-shadow:0 8px 20px rgba(67,55,45,.08); }
.bsell-chip.is-on{
  background:var(--brown); color:var(--honey); border-color:var(--brown);
  box-shadow:0 10px 24px rgba(67,55,45,.22);
}
.bsell-chip__count{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:100px; background:rgba(67,55,45,.08); color:var(--ink-soft);
  font-size:0.69rem; letter-spacing:0;
}
.bsell-chip.is-on .bsell-chip__count{ background:rgba(242,184,49,.2); color:var(--honey); }
.bsell-chip:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }

/* --- responsive grid: auto-fit so cards stay well-sized at any count ---- */
.bsell__grid{
  list-style:none; margin:0; padding:0;
  /* Flex + wrap + center so ANY orphan row (5 items in a 3-col layout is
     3+2, in a 4-col is 4+1) is centred rather than left-aligned with a
     hole on the right. Cards flex-basis around 220px, capped at 260px so
     they don't spread into oversized panels when only 2 remain after a
     filter click. */
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(16px,1.8vw,24px);
}
.bsell-card{ flex:1 1 220px; max-width:260px; min-width:0; }

/* --- card --------------------------------------------------------------- */
.bsell-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(67,55,45,.08);
  border-radius:20px; overflow:hidden; box-shadow:0 12px 32px rgba(67,55,45,.08);
  transition:transform .5s cubic-bezier(.16,.84,.44,1),
             box-shadow .5s, border-color .35s, opacity .35s;
  position:relative;
}
.bsell-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 56px rgba(67,55,45,.16);
  border-color:rgba(242,184,49,.5);
}
.bsell-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow .4s ease;
}
.bsell-card:hover::before{ box-shadow:inset 0 0 0 1.5px rgba(242,184,49,.5); }

/* filter hide/show */
.bsell-card.is-hidden{
  opacity:0; transform:scale(.94); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.bsell-card.is-gone{ display:none; }

.bsell-card__media{
  position:relative; display:block; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #FFF5DD 0%, var(--cream) 60%, var(--cream) 100%);
}
.bsell-card__img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,.84,.44,1);
  position:relative; z-index:1;
}
.bsell-card:hover .bsell-card__img{ transform:scale(1.06); }
.bsell-card__glow{
  position:absolute; inset:auto -20% -30% -20%; height:65%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(242,184,49,.4), rgba(242,184,49,0) 70%);
  opacity:0; transition:opacity .5s cubic-bezier(.16,.84,.44,1);
}
.bsell-card:hover .bsell-card__glow{ opacity:1; }

.bsell-card__flag{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--terra); color:#fff; font-family:var(--sans); font-size:0.69rem;
  font-weight:700; letter-spacing:.16em; padding:.45em .9em; border-radius:100px;
}
.bsell-card__taste{
  position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(255,253,247,.94); color:var(--brown);
  font-family:var(--sans); font-size:0.69rem; font-weight:700;
  letter-spacing:.08em; padding:.45em .8em; border-radius:100px;
  box-shadow:0 8px 20px rgba(67,55,45,.14);
}

.bsell-card__body{
  display:flex; flex-direction:column; gap:6px;
  padding:clamp(16px,1.6vw,22px);
}
.bsell-card__name{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.25;
}
.bsell-card__name a{ color:var(--brown); text-decoration:none; }
.bsell-card__name a:hover{ color:var(--terra); }
.bsell-card__sub{
  font-family:var(--sans); font-size:.78rem; color:var(--ink-soft);
  letter-spacing:.01em; margin-top:2px;
}
.bsell-card__pair{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:0.75rem; letter-spacing:.02em;
  color:var(--terra); margin-top:6px;
}
.bsell-card__pair svg{ flex:none; opacity:.85; }

.bsell-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:clamp(10px,1.2vw,14px); padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid rgba(67,55,45,.08);
}
.bsell-card__price{
  font-family:var(--serif); font-weight:700; color:var(--brown);
  font-size:clamp(1.02rem,1.3vw,1.14rem);
}
.bsell-card__price del{ opacity:.5; font-size:.8em; margin-right:.35em; }
.bsell-card__price ins{ text-decoration:none; }
.bsell-card__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; padding:0; border-radius:50%;
  background:var(--honey); color:var(--brown); border:0; cursor:pointer;
  text-decoration:none;
  transition:background .25s, color .25s, transform .28s cubic-bezier(.16,.84,.44,1), box-shadow .3s;
}
.bsell-card__btn:hover{
  background:var(--terra); color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(188,91,56,.28);
}
.bsell-card__btn svg{ flex:none; }
.bsell-card__btn.added{ background:var(--terra); color:#fff; }
.bsell-card__btn.loading{ opacity:.7; }

.bsell__empty{
  grid-column:1/-1; text-align:center; padding:clamp(30px,5vh,60px) 0;
  font-family:var(--sans); font-size:.98rem; color:var(--ink-soft);
}

/* The route to everything this row no longer shows. Promoted from an underlined
   caption to a filled button: it is the only path from the homepage to the comb,
   pollen, gift boxes, soaps and candles, so it has to read as a destination. */
.bsell__foot{ text-align:center; margin-top:clamp(28px,4vh,44px); }
.bsell__all{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-size:.8rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none;
  color:#fff; background:#c49646; border:1px solid #c49646;
  padding:16px 34px; border-radius:100px;
  box-shadow:0 10px 26px rgba(196,150,70,.28);
  transition:background .3s, border-color .3s, transform .3s, box-shadow .3s;
  min-height:44px;
}
.bsell__all:hover,
.bsell__all:focus-visible{
  background:#a87b32; border-color:#a87b32;
  transform:translateY(-2px); box-shadow:0 14px 32px rgba(196,150,70,.36);
}
.bsell__all svg{
  width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.16,.84,.44,1);
}
.bsell__all:hover svg{ transform:translateX(5px); }
/* Names what is behind the button, so the click is an informed one. */
.bsell__all-n{
  margin:13px auto 0; max-width:46ch;
  font-family:var(--sans); font-size:.85rem; line-height:1.6; color:var(--ink-soft);
}
@media (max-width:520px){
  .bsell__all{ padding:15px 26px; font-size:0.75rem; letter-spacing:.1em; }
  .bsell__all-n{ font-size:.8rem; }
}

/* --- mobile: horizontal snap-scroll (kept) ----------------------------- */
@media (max-width:860px){
  .bsell__chips{
    margin-inline:calc(var(--tsp-gutter,20px) * -1); padding:0 var(--tsp-gutter,20px);
    overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .bsell__chips::-webkit-scrollbar{ display:none; }
  .bsell-chip{ flex:0 0 auto; }
  .bsell__grid{
    display:flex; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:4px 16px 14px;
    margin-inline:calc(var(--tsp-gutter,20px) * -1); scrollbar-width:none;
  }
  .bsell__grid::-webkit-scrollbar{ display:none; }
  .bsell-card{ flex:0 0 72vw; max-width:300px; scroll-snap-align:start; }
  .bsell__head{ text-align:left; }
  .bsell__head .luxv2-eyebrow{ margin-left:0; }
  .bsell__empty{ flex:0 0 100%; }
}
@media (prefers-reduced-motion:reduce){
  .bsell-card,.bsell-card__img,.bsell-card__glow,.bsell-card__btn,.bsell-card::before,
  .bsell-chip{ transition:none; }
  .bsell-card:hover{ transform:none; }
}

/* -- Valley showcase: callout + "inside the box" chip row -------------- */
.luxv2-valley__callout{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--terra); font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.4; margin:14px 0 0; letter-spacing:.01em;
}
.luxv2-valley__quote{
  display:inline; opacity:.55; font-style:normal;
  margin:0 .12em; color:var(--honey);
}

.luxv2-valley__meta{
  display:flex; flex-direction:column; gap:10px;
  margin-top:clamp(18px,2.4vh,26px); padding:clamp(14px,1.6vw,18px) clamp(14px,1.6vw,20px);
  border-radius:14px; background:rgba(242,184,49,.08);
  border:1px solid rgba(242,184,49,.24);
}
.luxv2-valley__metatitle{
  font-family:var(--sans); font-size:0.69rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--terra);
}
.luxv2-valley__chiprow{
  display:flex; flex-wrap:wrap; gap:8px;
}
.luxv2-valley__mchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:.42em .85em; border-radius:100px;
  background:#fff; border:1px solid rgba(67,55,45,.12);
  font-family:var(--sans); font-size:0.75rem; font-weight:600;
  color:var(--brown); letter-spacing:.01em;
}
.luxv2-valley__mchip svg{ flex:none; color:var(--honey); }
.luxv2-valley__shipnote{
  font-family:var(--sans); font-size:0.75rem; line-height:1.4;
  color:var(--ink-soft); letter-spacing:.02em;
}

/* Auto-advance progress ring on the chip — the eye needs to know the
   showcase is moving. Ring drains around the active chip. Purely visual
   (aria-hidden) and disabled by prefers-reduced-motion. */
.luxv2-valley__chip{ position:relative; }
.luxv2-valley__chip.is-on::before{
  content:''; position:absolute; inset:-1px; border-radius:100px;
  border:1.5px solid transparent;
  background:conic-gradient(var(--honey) var(--vly-prog,0%), transparent 0) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.luxv2-valley__chips.is-paused .luxv2-valley__chip.is-on::before{ opacity:.2; }
@media (prefers-reduced-motion:reduce){
  .luxv2-valley__chip.is-on::before{ display:none; }
}

@media (max-width:520px){
  .luxv2-valley__mchip{ font-size:0.75rem; padding:.4em .75em; }
}



/* ====================================================================
   HOMEPAGE MOUNTAIN BACKGROUND ENHANCEMENTS — ALL DARK SECTIONS
   ==================================================================== */

/* 1. Founder Journey (#story-panes / .wpx) */
.wpx, #story-panes {
  background: linear-gradient(to bottom, rgba(13, 10, 8, 0.86), rgba(13, 10, 8, 0.94)),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-slide_02.jpg') center/cover no-repeat !important;
  background-attachment: fixed !important;
}

/* 2. Personalise Your Gift / Art of Gifting (.luxv2-cfg) */
.luxv2-cfg {
  background: linear-gradient(to bottom, rgba(13, 10, 8, 0.88), rgba(13, 10, 8, 0.94)),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-slide_03-hd.png') center/cover no-repeat !important;
  background-attachment: fixed !important;
}

/* 3. Closing CTA Section (.cta) */
.cta, #cta {
  background: linear-gradient(to bottom, rgba(13, 10, 8, 0.82), rgba(13, 10, 8, 0.92)),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-slide_01.jpg') center/cover no-repeat !important;
  background-attachment: fixed !important;
}

.cta__bg {
  background: transparent !important;
}

/* 4. Footer & Bottom CTA Bands (.site-footer, .tspflow-cta) */
.site-footer, .tspflow-cta {
  background: linear-gradient(to bottom, rgba(13, 10, 8, 0.88), rgba(13, 10, 8, 0.96)),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-slide_01.jpg') center/cover no-repeat !important;
  background-attachment: fixed !important;
}



/* ====================================================================
   HEADER & FOOTER WHITESPACE FIX (SEAMLESS DARK THEMING)
   ==================================================================== */
html, body {
  background-color: #0d0a08 !important;
  margin: 0 !important;
}

/* Scoped to desktop (2026-08-12). Unscoped, this cancelled the space that
   inc/app-nav.php reserves for the fixed bottom app nav below 769px, so the
   nav pill sat directly on top of the footer's copyright line. The rule was
   written for the old .tsp-shopbar, which is hidden at <=768 anyway. */
@media (min-width: 769px){
  body.has-shopbar {
    padding-bottom: 0 !important;
  }
}

/* 1. Top Announcement Bar - Full width dark luxury bar without white margins */
.v2bar {
  background: #0d0a08 !important;
  color: #f7f3ec !important;
  border-bottom: 1px solid rgba(196, 150, 70, 0.2) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

.v2bar__in {
  max-width: 1440px;
  margin: 0 auto;
}

.v2bar__i, .v2bar__i span {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* 2. Main Navigation Header — solid cream (fixed 2026-08-07 so logo, nav,
      and dropdowns are readable on the home page too). */
.home .hp-header, .home #header, .v2hd {
  background: rgba(253, 249, 241, 0.98) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  backdrop-filter: saturate(160%) blur(14px) !important;
  border-bottom: 1px solid rgba(196, 150, 70, 0.18) !important;
  box-shadow: 0 6px 22px rgba(51,40,29,.08) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.v2hd .hp-nav {
  max-width: 1440px !important;
  margin-inline: auto !important;
}

.home .hp-links a, .home .hp-icons button, .home .hp-icons a, .v2hd .hp-links a, .v2hd .hp-icons a {
  color: #1f1b16 !important;
}
.home .hp-links a:hover, .v2hd .hp-links a:hover { color:#c49646 !important; }

.home .hp-brand{ color:#1f1b16 !important; }
.home .hp-brand .wm{ filter:none !important; }
.home .hp-brand .hp-brand__tag {
  color: #5c5247 !important;
}
.home .hp-burger span, .v2hd .hp-burger span { background:#1f1b16 !important; }

/* Dropdown items — dark ink on white so they are visible on cream header */
.v2hd .hp-sub__link,
.home .hp-sub__link,
.home .sub-menu a,
.v2hd .sub-menu a { color:#43372d !important; }
.v2hd .hp-sub__link:hover,
.home .hp-sub__link:hover { background:rgba(196,150,70,.12) !important; color:#c49646 !important; }

/* 3. Eliminate all top/bottom gaps between main content and header/footer */
#main, .site-main, .site-main--front {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 4. Footer & Closing Bands - Seamless mountain background without white gaps */
.footer, .v2ft, footer.footer, .site-footer {
  background: linear-gradient(to bottom, rgba(13, 10, 8, 0.9), rgba(13, 10, 8, 0.98)),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-slide_01.jpg') center/cover no-repeat !important;
  background-attachment: fixed !important;
  margin: 0 !important;
  padding-top: 60px !important;
  padding-bottom: 40px !important;
  border-top: 1px solid rgba(196, 150, 70, 0.2) !important;
}

.v2ft__top, .v2ft__bottom {
  max-width: 1440px !important;
  margin-inline: auto !important;
}

.tsp-shopbar {
  background: rgba(13, 10, 8, 0.96) !important;
  border-top: 1px solid rgba(196, 150, 70, 0.3) !important;
}



/* ====================================================================
   FIX TOP WHITESPACE GAP ABOVE HEADER/ANNOUNCEMENT BAR (SCOPED)
   ==================================================================== */
html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#wpadminbar {
  display: none !important;
}

html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Homepage Only - Dark background */
body.home {
  background-color: #0d0a08 !important;
}

/* Shop Page & Browse Pages - Revert to Original Light Luxury Cream Background */
body.woocommerce-shop, body.woocommerce-page, body.archive, .luxshop {
  background-color: #faf7f2 !important;
  color: #43372d !important;
}

.v2bar {
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.v2bar__in {
  max-width: 1440px !important;
  margin-inline: auto !important;
}

.hp-header, #header, .v2hd {
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

#main, .site-main, .site-main--front, .site-main--page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}




/* ABOUT US HERO FULL BACKGROUND IMAGE STYLING */
.ab-hero {
  position: relative !important;
  background: linear-gradient(to right, rgba(13, 10, 8, 0.92) 0%, rgba(13, 10, 8, 0.78) 45%, rgba(13, 10, 8, 0.4) 80%, rgba(13, 10, 8, 0.2) 100%),
              url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-mountain-jar.png') center right/cover no-repeat !important;
  background-attachment: fixed !important;
  color: #ffffff !important;
  min-height: 600px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: calc(var(--tspbar-h, 38px) + 90px) !important;
  padding-bottom: 80px !important;
}

.ab-hero__grid {
  grid-template-columns: 1.2fr 0.8fr !important;
  align-items: center !important;
}

.ab-hero__title {
  color: #ffffff !important;
}

.ab-hero__title span {
  color: #c49646 !important;
}

.ab-hero__text p, .ab-p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ab-hero__breadcrumb a, .ab-hero__breadcrumb span {
  color: rgba(255, 255, 255, 0.75) !important;
}

.ab-hero__media {
  opacity: 0.95;
}

.ab-hero__media img {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}




/* ABOUT US HERO — CLEAN LIGHT LUXURY LAYOUT (IMAGE REMOVED, ULTRA-LEGIBLE) */
.ab-hero {
  position: relative !important;
  background: #faf7f2 !important;
  color: #43372d !important;
  min-height: auto !important;
  padding-top: calc(var(--tspbar-h, 38px) + 90px) !important;
  padding-bottom: clamp(50px, 7vh, 80px) !important;
}

.ab-hero__grid {
  display: block !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.ab-hero__text {
  max-width: 100% !important;
}

.ab-hero__breadcrumb {
  justify-content: center !important;
  display: flex !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8c7b6c !important;
  margin-bottom: 20px !important;
}

.ab-hero__breadcrumb a {
  color: #8c7b6c !important;
  text-decoration: none !important;
}

.ab-hero__title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  line-height: 1.12 !important;
  color: #1f1b16 !important;
  margin: 0 0 24px !important;
}

.ab-hero__title span {
  color: #c49646 !important;
  font-style: italic !important;
}

.ab-hero__text p, .ab-p {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.75 !important;
  color: #55483d !important;
  max-width: 68ch !important;
  margin: 0 auto 16px !important;
}

.ab-hero__media {
  display: none !important;
}

.ab-btn--dark {
  background: #1f1b16 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.9em 2em !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 24px !important;
  transition: background 0.25s, transform 0.25s !important;
}

.ab-btn--dark:hover {
  background: #c49646 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}




/* ABOUT US HERO — REVERTED 2-COLUMN LAYOUT WITH SIDE IMAGE */
.ab-hero {
  position: relative !important;
  background: #faf7f2 !important;
  color: #43372d !important;
  min-height: auto !important;
  padding-top: calc(var(--tspbar-h, 38px) + 90px) !important;
  padding-bottom: clamp(60px, 8vh, 100px) !important;
}

.ab-hero__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: clamp(30px, 5vw, 70px) !important;
  align-items: center !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.ab-hero__text {
  max-width: 580px !important;
}

.ab-hero__breadcrumb {
  justify-content: flex-start !important;
  display: flex !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8c7b6c !important;
  margin-bottom: 20px !important;
}

.ab-hero__title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
  line-height: 1.12 !important;
  color: #1f1b16 !important;
  margin: 0 0 24px !important;
}

.ab-hero__title span {
  color: #c49646 !important;
}

.ab-hero__text p, .ab-p {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem) !important;
  line-height: 1.75 !important;
  color: #55483d !important;
  margin-bottom: 16px !important;
}

.ab-hero__media {
  display: block !important;
  position: relative !important;
}

.ab-hero__img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 20px 40px rgba(67, 55, 45, 0.12)) !important;
}

.ab-btn--dark {
  background: #1f1b16 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.9em 2em !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 24px !important;
}



/* ABOUT US HERO — FULL BACKGROUND IMAGE (NO GRADIENT OVERLAY, NO SIDE CARD) */
.ab-hero {
  position: relative !important;
  background-image: url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-mountain-jar.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: #ffffff !important;
  min-height: 560px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: calc(var(--tspbar-h, 38px) + 90px) !important;
  padding-bottom: 80px !important;
}

.ab-hero__grid {
  display: block !important;
  max-width: 640px !important;
  margin: 0 !important;
  margin-left: max(20px, calc((100vw - 1440px) / 2 + 60px)) !important;
  text-align: left !important;
}

.ab-hero__text {
  max-width: 600px !important;
}

.ab-hero__breadcrumb {
  justify-content: flex-start !important;
  display: flex !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 20px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.ab-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
}

.ab-hero__title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(2.5rem, 4.8vw, 4rem) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
}

.ab-hero__title span {
  color: #f2b831 !important;
  font-style: italic !important;
}

.ab-hero__text p, .ab-p {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7) !important;
  margin-bottom: 16px !important;
}

.ab-hero__media {
  display: none !important;
}

.ab-btn--dark {
  background: #1f1b16 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.9em 2.2em !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 20px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}



/* ABOUT US HERO — HIGH CONTRAST & LEGIBILITY (POSITION UNCHANGED) */
.ab-hero {
  position: relative !important;
  background-image: url('https://techhands.net/Teaspoon-honey/wp-content/uploads/2026/08/hero-mountain-jar.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 560px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: calc(var(--tspbar-h, 38px) + 90px) !important;
  padding-bottom: 80px !important;
}

.ab-hero__container, .ab-container {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-inline: clamp(20px, 5vw, 80px) !important;
}

.ab-hero__text {
  max-width: 580px !important;
  background: rgba(13, 10, 8, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: clamp(24px, 4vw, 36px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(242, 184, 49, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.ab-hero__breadcrumb {
  display: flex !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #f2b831 !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.ab-hero__breadcrumb a, .ab-hero__breadcrumb span {
  color: #f2b831 !important;
  text-decoration: none !important;
}

.ab-hero__title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

.ab-hero__title span {
  color: #f2b831 !important;
  font-style: italic !important;
}

.ab-hero__text p, .ab-p {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.75 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95) !important;
  margin-bottom: 14px !important;
}

.ab-hero__media {
  display: none !important;
}

.ab-btn--dark {
  background: #f2b831 !important;
  color: #1f1b16 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.95em 2.2em !important;
  border-radius: 100px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.25s, background 0.25s !important;
}

.ab-btn--dark:hover {
  background: #ffffff !important;
  color: #1f1b16 !important;
  transform: translateY(-2px) !important;
}



/* ALL REAL PHOTOGRAPHY CARD ENHANCEMENTS */
.ab-story__card {
  position: relative !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
  box-shadow: 0 16px 36px rgba(51, 40, 29, 0.12) !important;
  border: 1px solid rgba(196, 150, 70, 0.2) !important;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.ab-story__card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px rgba(51, 40, 29, 0.2) !important;
}

.ab-story__card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.ab-story__card:hover img {
  transform: scale(1.06) !important;
}

.ab-story__card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(13, 10, 8, 0.92) 0%, rgba(13, 10, 8, 0.5) 50%, rgba(13, 10, 8, 0.1) 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: clamp(20px, 2.5vw, 32px) !important;
  color: #ffffff !important;
}

.ab-story__card-title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem) !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.ab-story__card-desc {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(0.82rem, 1vw, 0.92rem) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}

.ab-hive__circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}



/* SECTION 4 OUR STORY CARDS — GAP & BRIGHTNESS FIX */
.ab-story__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(30px, 4vw, 60px) !important;
  align-items: center !important;
}

.ab-story__cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
}

.ab-story__card {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4.2 !important;
  box-shadow: 0 14px 32px rgba(51, 40, 29, 0.14) !important;
  border: 1px solid rgba(196, 150, 70, 0.2) !important;
  background: #1f1b16 !important;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.ab-story__card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 48px rgba(51, 40, 29, 0.22) !important;
}

.ab-story__card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(1.05) contrast(1.05) !important;
  transition: transform 0.5s ease !important;
}

.ab-story__card:hover img {
  transform: scale(1.06) !important;
}

.ab-story__card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(13, 10, 8, 0.95) 0%, rgba(13, 10, 8, 0.65) 35%, rgba(13, 10, 8, 0.1) 65%, transparent 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: clamp(18px, 2vw, 26px) !important;
  color: #ffffff !important;
}

.ab-story__card-title {
  font-family: var(--v2-serif, 'Fraunces', serif) !important;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.ab-story__card-desc {
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: clamp(0.8rem, 0.95vw, 0.88rem) !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}



/* ====================================================================
   UNIVERSAL DROPDOWN MENU VISIBILITY & LEGIBILITY FIX
   ==================================================================== */
.hp-navi {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.hp-sub, .v2hd .hp-sub, .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translate(-50%, 10px) !important;
  min-width: 240px !important;
  background: #ffffff !important;
  color: #1f1b16 !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  box-shadow: 0 16px 40px rgba(13, 10, 8, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(196, 150, 70, 0.25) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  z-index: 9999 !important;
}

.hp-navi:hover .hp-sub,
.hp-navi:focus-within .hp-sub,
.hp-navi:hover .sub-menu,
.hp-navi:focus-within .sub-menu,
li.menu-item-has-children:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.hp-sub a, .hp-sub__link, .sub-menu a, .v2hd .hp-sub__link {
  display: block !important;
  padding: 10px 16px !important;
  font-family: var(--v2-sans, 'Mulish', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #43372d !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.2s, color 0.2s, padding-left 0.2s !important;
  white-space: nowrap !important;
}

.hp-sub a:hover, .hp-sub__link:hover, .sub-menu a:hover, .v2hd .hp-sub__link:hover {
  background: #f7f3ec !important;
  color: #c49646 !important;
  padding-left: 20px !important;
}

.hp-sub__link--head {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c49646 !important;
  padding: 8px 16px 4px !important;
  pointer-events: none !important;
}

.hp-sub__link--deep {
  padding-left: 26px !important;
  font-size: 0.78rem !important;
  color: #55483d !important;
}

.hp-sub__link--deep:hover {
  padding-left: 30px !important;
  color: #c49646 !important;
}