/* ================================================================
   LUMINA FIREFLY — Extras: logo · search · cart drawer ·
   deep responsive · shop · product · cart · admin
   ================================================================ */

/* ----------------------------------------------------------------
   LOGO — Swarovski dual-logo system
   .nav__logo--compact  = image logo (scrolled state only)
   .nav__logo--expanded = large text (transparent/top state only)
   Visibility is controlled via .is-scrolled in styles.css
   ---------------------------------------------------------------- */
.nav__logo--compact {
  align-items: center;
}
.nav__logo-img {
  height: 52px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
}
.nav__logo-text {
  display: none;
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: .28em; color: var(--dark);
}
/* If no logo.png exists, show text fallback */
.nav__logo-img[style*="display: none"] + .nav__logo-text { display: block; }

/* Cart count badge */
.nav__cart-btn { position: relative; }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: .55rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0; transform: scale(0);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.cart-count.has-items { opacity: 1; transform: scale(1); }

/* ----------------------------------------------------------------
   SEARCH OVERLAY
   ---------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: var(--cream);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(6rem, 15vh, 12rem);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }

.search-overlay__backdrop {
  position: fixed; inset: 0; z-index: 948;
  background: rgba(26,26,26,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.search-overlay__backdrop.is-open { opacity: 1; pointer-events: auto; }

.search-overlay__close {
  position: absolute; top: 1.75rem; right: 1.75rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-700); cursor: pointer;
  transition: color .3s, transform .4s var(--ease-out);
  z-index: 1;
}
.search-overlay__close:hover { color: var(--gold); transform: rotate(90deg); }

.search-overlay__inner {
  width: min(780px, 90vw);
  transform: translateY(18px);
  transition: transform .55s var(--ease-out);
}
.search-overlay.is-open .search-overlay__inner { transform: translateY(0); }

.search-overlay__field {
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1.5px solid var(--dark);
  padding-bottom: .85rem; margin-bottom: 2rem;
}
.search-overlay__field svg { flex-shrink: 0; color: var(--gold); }

.search-overlay__input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 300; color: var(--dark);
}
.search-overlay__input::placeholder { color: var(--gray-400); }

.search-overlay__results { display: flex; flex-direction: column; gap: .5rem; }

.search-result-item {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem; text-decoration: none; color: var(--dark);
  border: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.search-result-item:hover {
  border-color: rgba(197,162,103,.2); background: rgba(197,162,103,.08);
}
.search-result-thumb {
  width: 60px; height: 60px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; }
.search-result-name {
  font-family: var(--display); font-size: 1.05rem; font-weight: 400;
  margin-bottom: .2rem;
}
.search-result-collection {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gold);
}
.search-result-price {
  font-size: .88rem; font-weight: 500; color: var(--dark);
}
.search-no-results {
  text-align: center; padding: 2rem 0;
  color: var(--gray-700); font-size: .9rem;
}
.search-hint {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   CART DRAWER
   ---------------------------------------------------------------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw); z-index: 920;
  background: var(--cream);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform .6s var(--ease-out);
  box-shadow: -8px 0 40px rgba(26,26,26,.12);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__backdrop {
  position: fixed; inset: 0; z-index: 915;
  background: rgba(26,26,26,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .45s;
}
.cart-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid rgba(197,192,184,.3);
}
.cart-drawer__title {
  font-family: var(--display); font-size: 1.35rem; font-weight: 400;
  letter-spacing: .05em; color: var(--dark);
}
.cart-drawer__close {
  width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; color: var(--gray-700); cursor: pointer;
  transition: color .3s, transform .35s var(--ease-out);
}
.cart-drawer__close:hover { color: var(--gold); transform: rotate(90deg); }

.cart-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem 1.75rem;
  scroll-behavior: smooth;
}

.cart-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 3rem 1rem; color: var(--gray-700);
  gap: .75rem;
}
.cart-empty svg { opacity: .35; }
.cart-empty p { font-size: .88rem; letter-spacing: .04em; }

.cart-items { display: flex; flex-direction: column; gap: 1.25rem; }

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: .85rem; align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(197,192,184,.25);
}
.cart-item:last-child { border-bottom: none; }

.cart-item__thumb {
  width: 72px; height: 72px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__info { overflow: hidden; }
.cart-item__name {
  font-family: var(--display); font-size: 1rem; font-weight: 400;
  color: var(--dark); margin-bottom: .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item__collection {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.cart-item__custom {
  font-size: .72rem; color: var(--gray-700); margin-bottom: .35rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-item__price { font-size: .9rem; font-weight: 500; color: var(--dark); }

.cart-item__remove {
  color: var(--gray-400); cursor: pointer;
  transition: color .3s; padding: 2px;
}
.cart-item__remove:hover { color: var(--gold); }

.cart-drawer__footer {
  padding: 1.25rem 1.75rem;
  border-top: 1px solid rgba(197,192,184,.3);
  display: flex; flex-direction: column; gap: .75rem;
}
.cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .88rem; font-weight: 500; color: var(--dark);
}
.cart-note {
  font-size: .65rem; color: var(--gray-400); text-align: center;
  letter-spacing: .05em;
}

/* ----------------------------------------------------------------
   TOAST
   ---------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(1.5rem);
  background: #1C1917; color: #ffffff;
  border-left: 3px solid var(--gold);
  font-size: .82rem; letter-spacing: .04em;
  padding: .9rem 1.75rem;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  z-index: 9998; pointer-events: none; opacity: 0;
  transition: opacity .35s, transform .35s var(--ease-out);
  white-space: nowrap; max-width: 92vw;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----------------------------------------------------------------
   SHARED PAGE HEADER (shop, product, cart, profile, etc.)
   Always compact — overrides the homepage expanded-nav rules.
   ---------------------------------------------------------------- */
.page-nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(249,246,240,.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(197,192,184,.25);
  height: var(--nav-h) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
/* Container: always one row, never wrapped */
.page-nav .nav__container,
.nav.page-nav:not(.is-scrolled) .nav__container {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--s4);
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: nowrap !important;
  align-content: center; gap: 0;
}
/* Links: always horizontal row, not pushed to second row */
.page-nav .nav__links,
.nav.page-nav:not(.is-scrolled) .nav__links {
  width: auto !important; justify-content: flex-start !important;
  order: 0 !important; padding-bottom: 0 !important;
}
/* Actions: not absolutely positioned */
.page-nav .nav__actions,
.nav.page-nav:not(.is-scrolled) .nav__actions {
  position: static !important; top: auto !important; right: auto !important;
}
/* Logo: always compact logo, hide expanded text logo */
.page-nav .nav__logo--expanded,
.nav.page-nav .nav__logo--expanded { display: none !important; }
.page-nav .nav__logo--compact,
.nav.page-nav .nav__logo--compact { display: flex !important; }
/* Text colors: always dark on light background */
.page-nav .nav__link,
.nav.page-nav:not(.is-scrolled) .nav__link {
  color: #4a3728 !important;
}
.page-nav .nav__link:hover,
.nav.page-nav .nav__link:hover { color: #1a0f0a !important; }
.page-nav .nav__icon-btn,
.nav.page-nav:not(.is-scrolled) .nav__icon-btn {
  color: #4a3728 !important;
}
.page-nav .nav__icon-btn:hover,
.nav.page-nav .nav__icon-btn:hover { color: #1a0f0a !important; }
.page-nav .nav__hamburger span { background: #4a3728 !important; }

/* Card visual link wrapper */
.card__visual-link { display: block; }

/* ----------------------------------------------------------------
   DEEP RESPONSIVE FIXES
   ---------------------------------------------------------------- */

/* ── Touch targets ── */
@media (pointer: coarse) {
  .btn, .nav__link, .nav__icon-btn, .card__link,
  .footer__social-link, .footer__col a {
    -webkit-tap-highlight-color: transparent;
  }
  .nav__icon-btn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 48px; }
}

/* ── iPad landscape 1024px ── */
@media (max-width: 1024px) {
  .hero__content { max-width: 760px; }
  .collections { padding: var(--s5) 2rem; }
}

/* ── iPad portrait / medium tablet 768–834px ── */
@media (max-width: 834px) {
  :root { --nav-h: 62px; }

  .collections__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .card__visual { aspect-ratio: 1/1; }

  .stats__grid { grid-template-columns: repeat(3,1fr); }

  .about__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .about__body  { max-width: 560px; margin: 0 auto; }

  /* atelier responsive now handled in styles.css */
}

/* ── Mobile 600px ── */
@media (max-width: 600px) {
  :root {
    --nav-h: 58px;
    --s4: 2.5rem;
    --s5: 3.8rem;
  }

  .nav__container { padding: 0 1rem; }
  .nav__logo-img { height: 54px; }
  .nav__logo-text { font-size: .88rem; letter-spacing: .18em; }

  /* Hero tighter */
  .hero__content { padding: 0 1rem; padding-top: var(--nav-h); }
  .hero__title { font-size: clamp(2.8rem, 14vw, 5.5rem); }
  .hero__eyebrow { letter-spacing: .22em; font-size: .6rem; }
  .hero__subtitle { font-size: .72rem; margin-bottom: 2rem; }
  .hero__cta { flex-direction: column; align-items: center; gap: .75rem; width: 100%; }
  .hero__cta .btn { width: min(280px, 80vw); justify-content: center; }

  /* Marquee smaller */
  .marquee-track { font-size: .8rem; gap: 1.25rem; }

  /* Collections single column on small phones */
  .collections { padding: 3rem 1rem; }
  .collections__grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .card__visual { aspect-ratio: 4/3; }

  /* About */
  .about { padding: 3rem 1rem; }
  .night-sky { width: min(300px, 86vw); aspect-ratio: 1; }

  /* Stats column */
  .stats { padding: 2.5rem 1rem; }
  .stats__grid { grid-template-columns: 1fr; gap: 0; }
  .stat { padding: 1.5rem; border-bottom: 1px solid rgba(197,192,184,.12); }
  .stat:last-child { border-bottom: none; }
  .stat__number { font-size: clamp(2.5rem, 10vw, 3.5rem); }

  /* atelier responsive now handled in styles.css */

  /* Quote */
  .quote-section { padding: 3rem 1rem; }
  .quote__text  { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .quote-section::before { font-size: 60vw; }

  /* Contact */
  .contact { padding: 3rem 1rem; }
  .contact__row { flex-direction: column; gap: 0; }
  .contact__input { border: 1px solid var(--gray-300); border-bottom: none; }
  .contact__input:focus { border-color: var(--gold); }
  .contact__row .btn { width: 100%; justify-content: center; }

  /* Footer redesigned */
  .footer__inner { -webkit-flex-direction: column; flex-direction: column; gap: 2rem; }
  .footer__brand { text-align: center; -webkit-align-items: center; align-items: center; }
  .footer__social { -webkit-justify-content: center; justify-content: center; }
  .footer__nav { -webkit-flex-direction: column; flex-direction: column; gap: 1.5rem; }
  .footer__contact { text-align: center; }
  .footer__bottom { -webkit-flex-direction: column; flex-direction: column; text-align: center; gap: .75rem; }
  .footer__legal { -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; }

  /* Section titles */
  .section-title { font-size: clamp(2rem, 8.5vw, 3rem); }

  /* Buttons */
  .btn { padding: 13px 28px; font-size: .68rem; }
}

/* ── Tiny phones 360px ── */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2.4rem, 13vw, 3.5rem); }
  .section-title { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .nav__logo-text { letter-spacing: .12em; font-size: .82rem; }
  .collections { padding: 2.5rem .75rem; }
  .about { padding: 2.5rem .75rem; }
  .quote-section { padding: 2.5rem .75rem; }
  .contact { padding: 2.5rem .75rem; }
}

/* ================================================================
   SHOP PAGE
   ================================================================ */
.shop-hero {
  background: var(--bg);
  padding: calc(var(--nav-h) + 3rem) var(--s3) 3rem;
  text-align: center;
}
.shop-hero__eyebrow { color: var(--gold); font-size: .65rem; letter-spacing: .32em; text-transform: uppercase; margin-bottom: .75rem; }
.shop-hero__title { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; color: var(--dark); margin-bottom: .75rem; }
.shop-hero__sub { color: var(--gray-700); font-size: .88rem; }

/* Filters */
.shop-filters {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1.5rem var(--s3);
  background: rgba(50, 44, 32, 0.84);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border-top: 1px solid rgba(212, 184, 108, 0.18);
  border-bottom: 1px solid rgba(212, 184, 108, 0.18);
  position: sticky; top: var(--nav-h); z-index: 100;
}
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-pill {
  padding: .45rem 1.1rem;
  border: 1px solid rgba(255,255,255,.18);
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.75); cursor: pointer;
  transition: all .3s var(--ease-out);
  background: transparent;
}
.filter-pill:hover {
  background: rgba(255,255,255,.15); color: #ffffff; border-color: rgba(255,255,255,.5);
}
.filter-pill.is-active {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold);
  border-bottom: 2px solid var(--gold-light);
  font-weight: 500;
}
.filter-sort {
  display: flex; align-items: center; gap: .75rem;
}
.filter-sort label { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.filter-sort select {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: .45rem .85rem;
  font-family: var(--body); font-size: .75rem; color: #ffffff; outline: none; cursor: pointer;
}
.filter-sort select option {
  background: #1a1a1a; color: #ffffff;
}

/* Product Grid */
.shop-grid {
  max-width: 1600px; margin: 0 auto;
  padding: 3rem var(--s3) var(--s5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.product-card {
  cursor: pointer;
  transition: transform .5s var(--ease-out);
}
.product-card:hover { transform: translateY(-8px); }

.product-card__visual {
  position: relative; overflow: hidden; aspect-ratio: 3/4;
  background: linear-gradient(145deg, var(--gray-100), var(--gray-200));
}
.product-card__visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.product-card:hover .product-card__visual img { transform: scale(1.05); }

.product-card__badges {
  position: absolute; top: .85rem; left: .85rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.badge {
  padding: .3rem .65rem;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
}
.badge--unique { background: var(--dark); color: var(--cream); }
.badge--custom { background: var(--gold-dark); color: #fff; }
.badge--new    { background: var(--gold); color: #fff; }
.badge--sale   { background: #c0392b; color: #fff; }

.product-card__action {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--dark); color: var(--cream);
  padding: .9rem; text-align: center;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  transform: translateY(100%); transition: transform .4s var(--ease-out);
}
.product-card:hover .product-card__action { transform: translateY(0); }

.product-card__body { padding: 1rem 0; }
.product-card__collection { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.product-card__name { font-family: var(--display); font-size: 1rem; font-weight: 400; color: var(--dark); margin-bottom: .35rem; }
.product-card__price { font-size: .88rem; font-weight: 500; color: var(--dark); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.product-card__price--original { text-decoration: line-through; color: var(--gray-700); font-weight: 400; font-size: .85em; }
.product-card__price--sale { color: var(--error); font-weight: 600; }

/* —— Color swatches row —— */
.product-swatches {
  display: flex;
  gap: 5px;
  padding: 6px 0 2px;
  flex-wrap: wrap;
  align-items: center;
}
.product-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1.5px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, outline-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}
.product-swatch:hover {
  transform: scale(1.3);
  outline-color: rgba(0,0,0,0.35);
}
.product-swatch.is-active {
  border-color: #C5A267;
  outline-color: #C5A267;
  transform: scale(1.15);
}
.product-swatch--white {
  outline-color: rgba(0,0,0,0.28);
}
.product-swatch--solo {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}
/* Slightly bigger on mobile so easier to tap */
@media (max-width: 767px) {
  .product-swatch { width: 18px; height: 18px; }
}

.shop-empty {

  text-align: center; padding: var(--s5) var(--s3); color: var(--gray-700);
  grid-column: 1/-1;
}

/* ── Shop grid breakpoints (consolidated) ── */
@media (max-width: 1280px) { .shop-grid { grid-template-columns: repeat(4,1fr); gap: 1.2rem; } }
@media (max-width: 960px)  { .shop-grid { grid-template-columns: repeat(3,1fr); gap: 1rem; } }

/* Touch devices: "Ver Pieza" always visible (no hover) */
@media (hover: none) {
  .product-card__action {
    transform: translateY(0);
    opacity: 0.92;
    padding: 0.65rem;
    font-size: 0.6rem;
  }
  .product-card:hover { transform: none; }
}

/* ≤ 767px — tablet/mobile */
@media (max-width: 767px) {
  .shop-hero { padding: calc(var(--nav-h) + 1.5rem) 1rem 1.5rem; }
  .shop-filters {
    padding: 0.8rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    position: static;
  }
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    padding: 1rem 0.85rem 2.5rem;
  }
  /* Portrait ratio — same as desktop, jewels look best at 3/4 */
  .product-card__visual { aspect-ratio: 3/4; }
  .product-card__body   { padding: 0.55rem 0 0.2rem; }
  .product-card__name   { font-size: 0.82rem; }
  .product-card__collection { font-size: 0.58rem; }
  .product-card__price  { font-size: 0.82rem; }
}

/* ≤ 480px — small phones */
@media (max-width: 480px) {
  .shop-grid {
    gap: 0.65rem;
    padding: 0.75rem 0.65rem 2rem;
  }
  .product-card__visual { aspect-ratio: 3/4; }
  .product-card__body   { padding: 0.45rem 0 0.15rem; }
  .product-card__name   { font-size: 0.75rem; font-weight: 500; }
  .product-card__collection { font-size: 0.55rem; }
  .product-card__price  { font-size: 0.78rem; }
  .product-card__action { font-size: 0.55rem; padding: 0.5rem; }
}

/* ≤ 380px — very small */
@media (max-width: 380px) {
  .shop-grid { gap: 0.5rem; padding: 0.6rem; }
  .product-card__name { font-size: 0.68rem; }
}

/* ================================================================
   PRODUCT PAGE
   ================================================================ */
.product-layout {
  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) var(--s3) var(--s5);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
}
.product-gallery__main {
  aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(145deg, var(--gray-100), var(--gray-200));
  position: relative;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shimmer while image loads */
.product-gallery__placeholder.is-loading::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: imgShimmer 1.2s infinite;
}
@keyframes imgShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .5rem; }
.product-gallery__thumb {
  width: 64px; height: 64px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--gold-light);
  cursor: pointer; border: 2px solid transparent;
  border-radius: .25rem;
  transition: border-color .3s;
}
.product-gallery__thumb.is-active { border-color: var(--gold); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Breadcrumb bar */
.product-breadcrumb {
  max-width: var(--max-w); margin: 0 auto;
  padding: .75rem var(--side-pad) .75rem calc(var(--side-pad) + 1.5rem);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-400);
}
.product-breadcrumb a { color: var(--gray-400); text-decoration: none; transition: color .3s; }
.product-breadcrumb a:hover { color: var(--gold); }

.product-info__breadcrumb {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 1.25rem;
}
.product-info__breadcrumb a { color: var(--gray-400); transition: color .3s; }
.product-info__breadcrumb a:hover { color: var(--gold); }
.product-info__collection {
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.product-info__name {
  font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300; color: var(--dark); margin-bottom: .75rem; line-height: 1.1;
}
.product-info__price {
  font-size: 1.35rem; font-weight: 500; color: var(--dark); margin-bottom: 1.5rem;
}
.product-info__desc {
  font-size: .9rem; line-height: 1.85; color: var(--gray-700); margin-bottom: 2rem;
}
.product-info__unique {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; background: rgba(197,162,103,.08);
  border: 1px solid rgba(197,162,103,.2); color: var(--gold);
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Variant Buttons */
.variant-label {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: .6rem; color: var(--gray-700);
}
.variant-buttons {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.variant-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 5.5rem; padding: .7rem 1.2rem;
  border: 1.5px solid var(--gray-400); border-radius: .5rem;
  background: transparent; color: var(--dark); cursor: pointer;
  font-family: var(--body); transition: all .25s ease;
}
.variant-btn:hover {
  border-color: var(--gold); background: rgba(197,162,103,.05);
}
.variant-btn.is-active {
  border-color: var(--gold); background: rgba(197,162,103,.1);
  box-shadow: 0 0 0 1px var(--gold);
}
.variant-btn__name {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
}
.variant-btn__price {
  font-size: .72rem; color: var(--gold); margin-top: .15rem;
}
.variant-btn--out {
  opacity: .55; cursor: not-allowed; border-style: dashed;
}
.variant-btn--out:hover {
  border-color: var(--gray-400); background: transparent;
}

/* Customization zone */
.customization-zone {
  background: var(--bg); padding: 1.5rem;
  border: 1px solid rgba(197,192,184,.4); margin-bottom: 2rem;
}
/* Both __title (legacy) and __heading (new) work */
.customization-zone__title,
.customization-zone__heading {
  font-family: var(--display); font-size: 1.1rem; font-weight: 400;
  color: var(--dark); margin-bottom: .5rem;
}
.customization-zone__sub {
  font-family: var(--body); font-size: .78rem; color: var(--gray-700);
  margin-bottom: 1.25rem; line-height: 1.5;
}
.custom-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(197,192,184,.3); }
.custom-tab {
  flex: 1; padding: .75rem .5rem; text-align: center;
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray-700); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .3s;
  background: transparent; border-top: none; border-left: none; border-right: none;
}
.custom-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.custom-tab:hover { color: var(--dark); }

/* Panels: visibility is controlled via inline style by JS — no default display:none here */
/* .custom-panel intentionally has no styles — JS controls display */

/* Label — both .custom-label and .custom-panel__label work */
.custom-label,
.custom-panel__label {
  display: block; font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gray-700); margin-bottom: .5rem;
}
/* Textarea — both .custom-input and .custom-panel__textarea work */
.custom-input,
.custom-panel__textarea {
  width: 100%; padding: .75rem 1rem; box-sizing: border-box;
  border: 1px solid rgba(197,192,184,.5); background: var(--cream);
  font-family: var(--body); font-size: .88rem; color: var(--dark); outline: none;
  transition: border-color .3s; resize: none;
}
.custom-input:focus,
.custom-panel__textarea:focus { border-color: var(--gold); }
/* Counter — both .custom-char-count and .custom-panel__counter work */
.custom-char-count,
.custom-panel__counter { font-size: .62rem; color: var(--gray-400); text-align: right; margin-top: .3rem; }
.custom-panel__hint { font-size: .72rem; color: var(--gray-400); margin-top: .6rem; }

.custom-upload-zone {
  border: 2px dashed rgba(197,192,184,.5); padding: 2rem;
  text-align: center; cursor: pointer;
  transition: border-color .3s, background .3s;
}
/* Support both .drag-over (legacy) and .is-dragover (new) */
.custom-upload-zone:hover,
.custom-upload-zone.drag-over,
.custom-upload-zone.is-dragover {
  border-color: var(--gold); background: rgba(197,162,103,.04);
}
.custom-upload-zone input { display: none; }
.custom-upload-zone p { font-size: .78rem; color: var(--gray-700); margin-top: .5rem; }
.custom-upload-zone span { font-size: .72rem; color: var(--gray-400); }
.custom-upload-preview { max-width: 100%; max-height: 160px; object-fit: contain; margin: .75rem auto 0; display: none; }

/* Upload preview block (new multi-face system) */
.upload-preview {
  margin-top: .75rem; text-align: center;
}
.upload-preview img {
  max-width: 100%; max-height: 160px; object-fit: contain;
  border: 1px solid rgba(197,192,184,.4); display: block; margin: 0 auto .6rem;
}
.upload-remove {
  background: none; border: 1px solid rgba(197,192,184,.6);
  color: var(--gray-700); font-family: var(--body); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .35rem 1rem;
  cursor: pointer; transition: all .25s;
}
.upload-remove:hover { border-color: var(--error,#c44); color: var(--error,#c44); }

/* Product actions */
.product-actions { display: flex; flex-direction: column; gap: .85rem; }
.product-actions .btn { justify-content: center; }

/* Stock indicator */
.product-stock {
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
}
.product-stock::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); display: block;
}
.product-stock.out-of-stock { color: var(--gray-400); }
.product-stock.out-of-stock::before { background: var(--gray-400); }

/* Product responsive */
@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 2.5rem;
    padding: calc(var(--nav-h) + 1.5rem) 2rem var(--s5); }
  .product-gallery__main { max-width: 520px; }
}
@media (max-width: 600px) {
  .product-layout { padding: calc(var(--nav-h) + 1rem) 1rem 3rem; gap: 2rem; }
  .product-info__name { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .product-gallery__thumbs { gap: .35rem; }
  .product-gallery__thumb { width: 52px; height: 52px; }
}

/* ================================================================
   CART PAGE
   ================================================================ */
.cart-page {
  max-width: 1100px; margin: 0 auto;
  padding: calc(var(--nav-h) + 2.5rem) var(--s3) var(--s5);
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem; align-items: start;
}
.cart-page__title {
  font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300; color: var(--dark); margin-bottom: 2rem;
  grid-column: 1/-1;
}
.cart-line-items { display: flex; flex-direction: column; gap: 1.5rem; }
.cart-line {
  display: grid; grid-template-columns: 90px 1fr auto;
  gap: 1.25rem; align-items: start;
  padding-bottom: 1.5rem; border-bottom: 1px solid rgba(197,192,184,.3);
}
.cart-line:last-child { border-bottom: none; }
.cart-line__thumb {
  width: 90px; height: 90px; overflow: hidden;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--display); font-size: 1.1rem; font-weight: 400; margin-bottom: .3rem; }
.cart-line__collection { font-size: .6rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); margin-bottom: .4rem; }
.cart-line__custom { font-size: .75rem; color: var(--gray-700); margin-bottom: .5rem; }
.cart-line__price { font-size: .95rem; font-weight: 500; }
.cart-line__remove { color: var(--gray-400); cursor: pointer; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.cart-line__remove:hover { color: var(--gold); }

/* Order summary */
.order-summary {
  background: var(--cream); padding: 2rem;
  border: 1px solid rgba(197,192,184,.3); position: sticky; top: calc(var(--nav-h) + 1.5rem);
}
.order-summary__title { font-family: var(--display); font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem; }
.order-row { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .75rem; color: var(--gray-700); }
.order-row--total { font-weight: 600; color: var(--dark); font-size: 1rem; padding-top: 1rem; border-top: 1px solid rgba(197,192,184,.4); margin-top: .75rem; }

/* Checkout form */
.checkout-section { margin-top: 2rem; }
.checkout-section__title { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dark); margin-bottom: 1rem; font-weight: 500; }
.checkout-field { margin-bottom: 1rem; }
.checkout-field label { display: block; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-700); margin-bottom: .4rem; }
.checkout-field input, .checkout-field select {
  width: 100%; padding: .75rem 1rem;
  border: 1px solid rgba(197,192,184,.5); background: var(--bg);
  font-family: var(--body); font-size: .85rem; color: var(--dark); outline: none;
  transition: border-color .3s;
}
.checkout-field input:focus, .checkout-field select:focus { border-color: var(--gold); }
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* Stripe card element */
.stripe-card-element {
  padding: .85rem 1rem; border: 1px solid rgba(197,192,184,.5); background: var(--bg);
}

.secure-note { display: flex; align-items: center; gap: .5rem; font-size: .65rem; color: var(--gray-400); margin-top: .75rem; }

/* Cart page responsive */
@media (max-width: 900px) {
  .cart-page { grid-template-columns: 1fr; gap: 2rem; }
  .order-summary { position: static; }
}
@media (max-width: 600px) {
  .cart-page { padding: calc(var(--nav-h) + 1.5rem) 1rem 3rem; }
  .cart-line { grid-template-columns: 72px 1fr auto; gap: .85rem; }
  .cart-line__thumb { width: 72px; height: 72px; }
  .checkout-row { grid-template-columns: 1fr; }
}

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-body { background: var(--bg); min-height: 100vh; }

/* Login */
.admin-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 2rem;
}
.admin-login__box {
  width: min(420px, 100%); background: var(--cream);
  padding: 3rem 2.5rem; border: 1px solid rgba(197,192,184,.4);
}
.admin-login__logo { font-family: var(--display); font-size: 1.1rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 2rem; color: var(--dark); text-align: center; }
.admin-login__title { font-family: var(--display); font-size: 1.5rem; font-weight: 300; text-align: center; margin-bottom: 2rem; }

/* Profile form — stack dept/city grid on small screens */
@media (max-width: 500px) {
  .profile-container div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Admin shell */
.admin-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.admin-sidebar {
  background: var(--black); padding: 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.06);
}
.admin-sidebar__header {
  padding: 1.75rem 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-sidebar__brand {
  font-family: var(--display); font-size: .8rem; letter-spacing: .28em;
  color: var(--gold); display: block; margin-bottom: .25rem;
}
.admin-sidebar__sub {
  font-family: var(--body); font-size: .7rem; letter-spacing: .1em;
  color: var(--gray-500); text-transform: uppercase;
}
.admin-sidebar__nav-body { flex: 1; padding: 1.25rem .75rem; overflow-y: auto; }
.admin-nav-section {
  font-family: var(--body); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gray-500); font-weight: 600;
  padding: .5rem .75rem .25rem; margin-top: .5rem;
}
.admin-nav-section:first-child { margin-top: 0; }

/* Nav buttons — alias for admin-nav-item */
.admin-nav { display: flex; flex-direction: column; gap: .25rem; padding: 0 .75rem; }
.admin-nav-item,
.admin-nav-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; color: var(--gray-400);
  font-family: var(--body); font-size: .77rem; letter-spacing: .06em;
  cursor: pointer; transition: all .2s; border-radius: 3px;
  background: transparent; border: none; width: 100%; text-align: left;
}
.admin-nav-item:hover, .admin-nav-btn:hover {
  background: rgba(197,162,103,.1); color: var(--gold-light);
}
.admin-nav-item.is-active, .admin-nav-btn.is-active {
  background: rgba(197,162,103,.15); color: var(--gold-light);
  border-left: 2px solid var(--gold);
  padding-left: calc(.9rem - 2px);
}
.admin-nav-item svg, .admin-nav-btn svg { flex-shrink: 0; opacity: .7; transition: opacity .2s; }
.admin-nav-item:hover svg, .admin-nav-btn:hover svg,
.admin-nav-item.is-active svg, .admin-nav-btn.is-active svg { opacity: 1; }

.admin-sidebar__footer {
  padding: 1rem .75rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.admin-logout { width: 100%; background: none; border: none; cursor: pointer; }

/* Stats bar — both old (.admin-stat) and new (.admin-stat-card) classes */
.admin-stat {
  background: var(--cream); padding: 1.5rem; border: 1px solid rgba(197,192,184,.3);
  display: flex; flex-direction: column; justify-content: space-between;
}
.admin-stat__value {
  font-family: var(--display); font-size: 2rem; font-weight: 300;
  color: var(--dark); display: block; margin-bottom: .35rem;
}
.admin-stat__label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--gray-700); font-weight: 500;
}

/* Admin main */
.admin-main { padding: 2rem 2.5rem; overflow-y: auto; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.admin-header h1 { font-family: var(--display); font-size: 1.6rem; font-weight: 300; color: var(--dark); }

/* Stats cards */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.admin-stat-card {
  background: var(--cream); padding: 1.5rem; border: 1px solid rgba(197,192,184,.3);
}
.admin-stat-card__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gray-700); margin-bottom: .5rem; }
.admin-stat-card__value { font-family: var(--display); font-size: 2rem; font-weight: 300; color: var(--dark); }
.admin-stat-card__sub { font-size: .7rem; color: var(--gray-400); margin-top: .3rem; }

/* Table */
.admin-table-wrap { background: var(--cream); border: 1px solid rgba(197,192,184,.3); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 1rem 1.25rem; text-align: left; font-size: .82rem; border-bottom: 1px solid rgba(197,192,184,.2); }
.admin-table th { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-700); font-weight: 500; background: rgba(197,192,184,.08); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(197,162,103,.05); }
.admin-table img { width: 44px; height: 44px; object-fit: cover; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider,
.toggle__slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--gray-400); border-radius: 22px;
  transition: .35s;
}
.toggle-slider::before,
.toggle__slider::before {
  position: absolute; content: ""; width: 16px; height: 16px;
  left: 3px; bottom: 3px; background: white; border-radius: 50%;
  transition: .35s;
}
.toggle input:checked + .toggle-slider,
.toggle input:checked + .toggle__slider { background: var(--gold); }
.toggle input:checked + .toggle-slider::before,
.toggle input:checked + .toggle__slider::before { transform: translateX(16px); }

/* Admin action buttons */
.admin-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; font-family: var(--body); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .3s; }
.admin-btn--primary { background: var(--dark); color: var(--cream); border: 1px solid var(--dark); }
.admin-btn--primary:hover { background: var(--gold); border-color: var(--gold); }
.admin-btn--ghost { background: transparent; color: var(--gray-700); border: 1px solid rgba(197,192,184,.5); }
.admin-btn--ghost:hover { border-color: var(--dark); color: var(--dark); }
.admin-btn--danger { background: transparent; color: #c0392b; border: 1px solid rgba(192,57,43,.3); }
.admin-btn--danger:hover { background: rgba(192,57,43,.08); }

/* Modal */
.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(26,26,26,.55);
  z-index: 990; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s, visibility .35s;
}
.admin-modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.admin-modal {
  background: var(--cream); width: min(700px, 100%);
  max-height: 90vh; overflow-y: auto; padding: 2rem 2.5rem;
  transform: translateY(12px); transition: transform .45s var(--ease-out);
}
.admin-modal-overlay.is-open .admin-modal { transform: translateY(0); }
.admin-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; }
.admin-modal__title { font-family: var(--display); font-size: 1.4rem; font-weight: 300; }
.admin-modal__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gray-700); cursor: pointer; transition: color .3s; }
.admin-modal__close:hover { color: var(--gold); }

.admin-field { margin-bottom: 1.25rem; }
.admin-field label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .15em; color: var(--gray-700); margin-bottom: .4rem; font-weight: 500; }
.admin-field input, .admin-field select, .admin-field textarea {
  width: 100%; padding: .7rem 1rem;
  border: 1px solid rgba(197,192,184,.5); background: var(--bg);
  font-family: var(--body); font-size: .85rem; color: var(--dark); outline: none;
  transition: border-color .3s;
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: var(--gold); }
.admin-field textarea { resize: vertical; min-height: 100px; }
.admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-field-checkboxes { display: flex; flex-direction: column; gap: .5rem; }
.admin-field-checkbox { display: flex; align-items: center; gap: .6rem; font-size: .8rem; cursor: pointer; }
.admin-field-checkbox input { width: auto; border: none; background: none; }
.admin-form-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(197,192,184,.3); }

/* Image upload in admin */
.admin-upload-zone {
  border: 2px dashed rgba(197,192,184,.5); padding: 1.5rem;
  text-align: center; cursor: pointer; transition: border-color .3s, background .3s;
}
.admin-upload-zone:hover { border-color: var(--gold); background: rgba(197,162,103,.03); }
.admin-upload-zone input { display: none; }
.admin-upload-zone p { font-size: .78rem; color: var(--gray-700); margin-top: .5rem; }
.admin-upload-preview { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.admin-upload-preview-item { position: relative; width: 72px; height: 72px; }
.admin-upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-upload-preview-item .remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: #c0392b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; cursor: pointer; }

/* Admin panel header */
.admin-panel__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;
}
.admin-panel__title {
  font-family: var(--display); font-size: 1.5rem; font-weight: 300; color: var(--dark);
}

/* Admin login tweak */
.admin-login__brand { font-family: var(--display); font-size: 1rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 2rem; color: var(--dark); text-align: center; display: block; }

/* Admin responsive */
@media (max-width: 1200px) { .admin-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    height: auto; position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    flex-direction: row; padding: 0; z-index: 900;
  }
  .admin-sidebar__header,
  .admin-sidebar__footer,
  .admin-sidebar__sub,
  .admin-nav-section { display: none; }
  .admin-sidebar__nav-body {
    flex-direction: row; overflow-x: auto; display: flex;
    padding: .4rem; gap: .15rem; width: 100%;
  }
  .admin-sidebar__nav-body nav {
    display: flex; flex-direction: row;
  }
  .admin-sidebar__nav-body nav > * { display: flex; flex-direction: row; }
  .admin-sidebar__nav-body ul { flex-direction: row !important; gap: 0 !important; }
  .admin-nav-btn, .admin-nav-item {
    flex-direction: column; gap: .2rem; padding: .5rem .7rem;
    font-size: .55rem; letter-spacing: .04em;
    border-left: none !important; padding-left: .7rem !important;
    white-space: nowrap;
  }
  .admin-nav-btn.is-active, .admin-nav-item.is-active {
    border-bottom: 2px solid var(--gold); border-left: none !important;
  }
  .admin-main { padding: 1.25rem; padding-bottom: 5.5rem; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-field-row { grid-template-columns: 1fr; }
}

/* ================================================================
   PROMO CODE SECTION (Cart page)
   ================================================================ */
.promo-section {
  margin: 1.25rem 0;
  border: 1px solid rgba(197,192,184,.35);
  border-radius: 2px;
  overflow: hidden;
}
.promo-toggle {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; background: transparent; cursor: pointer;
  font-family: var(--body); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-700); text-align: left;
  border: none; transition: color .3s;
}
.promo-toggle:hover { color: var(--gold); }
.promo-toggle svg { flex-shrink: 0; transition: transform .35s; }
.promo-toggle.is-open svg { transform: rotate(180deg); }
.promo-form {
  padding: .85rem 1rem 1rem; border-top: 1px solid rgba(197,192,184,.25);
  background: rgba(249,246,240,.5);
}
.promo-input-row {
  display: flex; gap: .5rem;
}
.promo-input-row input {
  flex: 1; padding: .65rem .85rem;
  border: 1px solid rgba(197,192,184,.5); background: var(--cream);
  font-family: var(--body); font-size: .85rem; color: var(--dark);
  outline: none; text-transform: uppercase; letter-spacing: .05em;
  transition: border-color .3s;
}
.promo-input-row input:focus { border-color: var(--gold); }
.promo-apply-btn { white-space: nowrap; padding: .65rem 1.15rem; font-size: .68rem; }
.promo-feedback {
  min-height: 1.4rem; font-size: .75rem; margin-top: .6rem; letter-spacing: .02em;
}
.promo-feedback.is-success { color: #5a8a5a; }
.promo-feedback.is-error   { color: #c0392b; }
.promo-applied-badge {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(90,138,90,.08); border: 1px solid rgba(90,138,90,.25);
  padding: .5rem .85rem; margin-top: .6rem; font-size: .75rem;
}
.promo-applied-badge span { color: #5a8a5a; font-weight: 500; }
.promo-remove-btn {
  background: none; border: none; cursor: pointer; color: var(--gray-500);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 0; transition: opacity .3s;
}
.promo-remove-btn:hover { opacity: .7; }
.order-row--discount { color: #5a8a5a; font-weight: 500; }

/* ================================================================
   PROMO SLIDER (Pandora-style hero banner)
   ================================================================ */
.promo-slider {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
  background: var(--dark);
}
.promo-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.promo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.promo-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Background image / color */
.promo-slide__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1A1A1A 0%, #2B2B2B 35%, #3D3526 70%, #C5A267 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 7s var(--ease-out);
}
.promo-slide.is-active .promo-slide__bg {
  transform: scale(1);
}

/* Gradient overlay */
.promo-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(26,26,26,.88) 0%, rgba(26,26,26,.35) 40%, rgba(26,26,26,.05) 100%);
  pointer-events: none;
}

/* Slide content */
.promo-slide__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 clamp(1.5rem, 8vw, 8rem);
  max-width: 900px;
  transform: translateY(28px);
  opacity: 0;
  transition: transform 1s .18s var(--ease-out), opacity 1s .18s var(--ease-out);
}
.promo-slide.is-active .promo-slide__content {
  transform: translateY(0);
  opacity: 1;
}

.promo-slide__eyebrow {
  font-size: .6rem;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
  display: block;
}
.promo-slide__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: 300;
  line-height: 1.04;
  color: var(--cream);
  margin-bottom: 1.15rem;
}
.promo-slide__title em { font-style: italic; color: var(--gold-light); }
.promo-slide__subtitle {
  font-size: clamp(.78rem, 1.5vw, .98rem);
  font-weight: 300;
  letter-spacing: .14em;
  color: rgba(197,192,184,.8);
  margin-bottom: 2.5rem;
  line-height: 1.75;
}
.promo-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 14px 42px;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid var(--cream);
  transition: background .4s, color .4s, transform .3s var(--ease-out);
}
.promo-slide__cta:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--dark);
  transform: translateY(-2px);
}

/* ── Arrow buttons ── */
.promo-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  background: rgba(26,26,26,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(197,192,184,.22);
  transition: background .35s, border-color .35s, transform .35s var(--ease-out);
  cursor: pointer;
}
.promo-slider__arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.promo-slider__arrow--next { right: clamp(1rem, 3vw, 2.5rem); }
.promo-slider__arrow:hover {
  background: rgba(197,162,103,.65);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.08);
}

/* ── Dots ── */
.promo-slider__dots {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: .55rem;
  align-items: center;
}
.promo-dot {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background: rgba(197,192,184,.4);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background .4s, width .4s var(--ease-out);
}
.promo-dot.is-active {
  background: var(--cream);
  width: 26px;
}
.promo-dot:hover:not(.is-active) { background: rgba(197,162,103,.65); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .promo-slider { height: 65vh; min-height: 400px; }
  .promo-slide__title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .promo-slider__arrow { width: 42px; height: 42px; }
}

/* Tablet to Mobile (480px - 768px) */
@media (max-width: 480px) {
  .promo-slider { 
    height: 60vh; 
    min-height: 380px; 
  }
  .promo-slide__content {
    padding: 0 clamp(1rem, 6vw, 6rem);
  }
  .promo-slide__eyebrow {
    font-size: .5rem;
    margin-bottom: 1rem;
  }
  .promo-slide__title { 
    font-size: clamp(1.6rem, 7vw, 3rem);
    margin-bottom: 0.9rem;
  }
  .promo-slide__subtitle {
    font-size: clamp(.7rem, 1.3vw, .85rem);
    margin-bottom: 2rem;
  }
  .promo-slide__cta {
    padding: 11px 32px;
    font-size: .63rem;
    letter-spacing: .2em;
  }
  .promo-slider__arrow { 
    width: 36px; 
    height: 36px; 
  }
  .promo-slider__arrow svg { 
    width: 16px !important; 
    height: 16px !important; 
  }
  .promo-slider__dots {
    bottom: 1.2rem;
    gap: .4rem;
  }
  .promo-dot {
    height: 6px;
    width: 6px;
  }
  .promo-dot.is-active {
    width: 20px;
  }
  .promo-slide__overlay {
    background:
      linear-gradient(to top, rgba(26,26,26,.75) 0%, rgba(26,26,26,.25) 50%, rgba(26,26,26,.02) 100%);
  }
}

/* Mobile pequeño (< 360px) */
@media (max-width: 360px) {
  .promo-slider { 
    height: 62vh; 
    min-height: 360px; 
  }
  .promo-slide__content {
    padding: 0 clamp(0.8rem, 5vw, 5rem);
  }
  .promo-slide__eyebrow {
    font-size: .45rem;
    letter-spacing: .42em;
    margin-bottom: 0.8rem;
  }
  .promo-slide__title { 
    font-size: clamp(1.3rem, 6vw, 2.5rem);
    margin-bottom: 0.8rem;
  }
  .promo-slide__subtitle {
    font-size: clamp(.65rem, 1.2vw, .78rem);
    margin-bottom: 1.6rem;
  }
  .promo-slide__cta {
    padding: 10px 28px;
    font-size: .6rem;
    letter-spacing: .19em;
  }
  .promo-slider__arrow { 
    width: 32px; 
    height: 32px; 
  }
  .promo-slider__arrow svg { 
    width: 14px !important; 
    height: 14px !important; 
  }
  .promo-slider__dots {
    bottom: 1rem;
    gap: .35rem;
  }
  .promo-dot {
    height: 5px;
    width: 5px;
  }
  .promo-dot.is-active {
    width: 16px;
  }
}

/* ================================================================
   ADMIN — Slides Panel
   ================================================================ */
.slide-thumb {
  width: 80px; height: 50px; object-fit: cover;
  background: linear-gradient(135deg, var(--gray-200), var(--black));
  display: block; border-radius: 2px;
}
.admin-slide-preview {
  width: 100%; height: 140px; border-radius: 2px;
  overflow: hidden; background: var(--dark);
  margin-top: .75rem; display: none;
}
.admin-slide-preview img { width: 100%; height: 100%; object-fit: cover; }


/* ================================================================
   PROCESS TIMELINE — cross-browser horizontal ribbon
   (Pure flexbox — no gap CSS property to maintain IE11/Edge compat)
   ================================================================ */
.process-timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 3rem clamp(1.5rem,5vw,4rem) 4rem;
  max-width: 1400px;
  margin: 0 auto;
}
.process-step {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 .5rem;
}
.process-step__connector {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(197,162,103,0) 0%, rgba(197,162,103,.3) 30%, rgba(197,162,103,.3) 70%, rgba(197,162,103,0) 100%);
  z-index: 0;
}
.process-step:first-child .process-step__connector { left: 50%; }
.process-step__connector--last,
.process-step:last-child .process-step__connector { right: 50%; }
.process-step__node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(197,162,103,.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--gold);
  -webkit-transition: background .4s, border-color .4s, -webkit-transform .4s var(--ease-out);
  transition: background .4s, border-color .4s, transform .4s var(--ease-out);
  margin-bottom: 1.25rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.process-step:hover .process-step__node {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
.process-step__body { max-width: 180px; }
.process-step__num {
  display: block;
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: .45rem;
}
.process-step__title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: .5rem;
}
.process-step__desc {
  font-size: .78rem;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Tablet: 2-row grid layout  */
@media (max-width: 900px) {
  .process-timeline {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
  }
  .process-step {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.333% - 1rem);
    flex: 0 0 calc(33.333% - 1rem);
    margin-bottom: 2.5rem;
  }
  .process-step__connector { display: none; }
}
@media (max-width: 600px) {
  .process-step {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - .5rem);
    flex: 0 0 calc(50% - .5rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 380px) {
  .process-step {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

/* ================================================================
   FOOTER — 4-column champagne design
   ================================================================ */
.footer {
  background: var(--dark);
  color: var(--cream);
  padding: 5rem clamp(1.5rem,5vw,4rem) 0;
}
.footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(197,192,184,.12);
  max-width: 1400px;
  margin: 0 auto;
}
.footer__brand {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 220px;
  flex: 1 1 220px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .6rem;
}
.footer__logo {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .25rem;
}
.footer__tagline {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(197,192,184,.75);
  margin-bottom: .4rem;
}
.footer__brand-desc {
  font-size: .75rem;
  line-height: 1.7;
  color: rgba(197,192,184,.5);
  margin-bottom: 1rem;
}
.footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: .85rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: auto;
}
.footer__social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(197,192,184,.18);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: rgba(197,192,184,.65);
  -webkit-transition: border-color .3s, color .3s, background .3s;
  transition: border-color .3s, color .3s, background .3s;
}
.footer__social-link:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(197,162,103,.1);
}
.footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2.5rem;
  -webkit-box-flex: 2;
  -ms-flex: 2 1 400px;
  flex: 2 1 400px;
}
.footer__col {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 120px;
  flex: 1 1 120px;
}
.footer__col-title {
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .6rem;
}
.footer__col ul a {
  font-size: .8rem;
  color: rgba(197,192,184,.55);
  -webkit-transition: color .3s;
  transition: color .3s;
  text-decoration: none;
  letter-spacing: .02em;
}
.footer__col ul a:hover { color: var(--gold-light); }
/* Plain text items in footer columns (non-link) */
.footer__col-meta {
  font-size: .8rem;
  color: rgba(197,192,184,.55);
  letter-spacing: .02em;
}
.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: .68rem;
  color: rgba(197,192,184,.3);
  letter-spacing: .04em;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__legal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}
.footer__legal a {
  color: rgba(197,192,184,.3);
  text-decoration: none;
  font-size: .68rem;
  -webkit-transition: color .3s;
  transition: color .3s;
  letter-spacing: .04em;
}
.footer__legal a:hover { color: rgba(197,192,184,.75); }

/* Footer tablet */
@media (max-width: 768px) {
  .footer__inner { gap: 2rem; padding-bottom: 3rem; }
  .footer__nav { gap: 1.5rem; }
}

/* ================================================================
   PROMO CODE SECTION — Homepage champagne style
   ================================================================ */
.promo-code-section {
  background: var(--bg);
  border-top: 1px solid rgba(197,192,184,.2);
  border-bottom: 1px solid rgba(197,192,184,.2);
  padding: 5rem clamp(1.5rem,5vw,4rem);
  text-align: center;
}
.promo-code-section__inner {
  max-width: 560px;
  margin: 0 auto;
}
.promo-code-section__eyebrow {
  font-size: .6rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.promo-code-section__title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.promo-code-section__title em {
  font-style: italic;
  color: var(--gold);
}
.promo-code-section__desc {
  font-size: .85rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 2rem;
  letter-spacing: .02em;
}
.promo-code-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  border: 1px solid rgba(197,192,184,.5);
  overflow: hidden;
  margin-bottom: 1rem;
  -webkit-box-shadow: 0 4px 24px rgba(26,26,26,.06);
  box-shadow: 0 4px 24px rgba(26,26,26,.06);
}
.promo-code-input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: .95rem 1.25rem;
  border: none;
  background: var(--cream);
  font-family: var(--body);
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark);
  outline: none;
  min-width: 0;
}
.promo-code-input::-webkit-input-placeholder { color: rgba(197,192,184,.75); text-transform: none; }
.promo-code-input::-moz-placeholder { color: rgba(197,192,184,.75); text-transform: none; }
.promo-code-input::placeholder { color: rgba(197,192,184,.75); text-transform: none; }
.promo-code-input:focus { background: #fff; }
.promo-code-form .btn {
  border-radius: 0;
  border: none;
  border-left: 1px solid rgba(197,192,184,.4);
  padding: .95rem 2rem;
  min-width: 120px;
  white-space: nowrap;
}
.promo-code-feedback {
  min-height: 1.4rem;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--gray-700);
}
.promo-applied-badge {
  background: linear-gradient(135deg, rgba(197,162,103,.08), rgba(197,162,103,.08));
  border: 1px solid rgba(197,162,103,.25);
  padding: .75rem 1.25rem;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--gold);
  letter-spacing: .04em;
}
.promo-applied-badge svg { -ms-flex-negative: 0; flex-shrink: 0; }

@media (max-width: 480px) {
  .promo-code-section { padding: 3.5rem 1rem; }
  .promo-code-form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .promo-code-form .btn { border-left: none; border-top: 1px solid rgba(197,192,184,.4); }
}

/* ================================================================
   CART SHIPPING BANNER — Pandora-style free shipping
   ================================================================ */
.cart-shipping-banner {
  padding: .65rem 1.75rem;
  font-size: .72rem;
  text-align: center;
  letter-spacing: .06em;
  background: linear-gradient(90deg, rgba(197,162,103,.06), rgba(197,162,103,.1), rgba(197,162,103,.06));
  border-bottom: 1px solid rgba(197,162,103,.15);
  color: var(--gold);
  font-weight: 500;
  min-height: 0;
  -webkit-transition: max-height .3s, padding .3s;
  transition: max-height .3s, padding .3s;
}
.cart-shipping-banner:empty {
  display: none;
}

/* ================================================================
   STAT ICON  — champagne line art style
   ================================================================ */
.stat__icon svg {
  stroke: var(--gold);
  opacity: .85;
}
.stat__icon svg:hover {
  opacity: 1;
}

/* ================================================================
   "EL ARTE" — EDITORIAL LUXURY VERTICAL LIST
   ================================================================ */
.arte-ed {
  background: var(--cream);
  padding: var(--s5) 0;
  overflow: hidden;
}
.arte-ed__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.arte-ed__header {
  max-width: 640px;
  margin: 0 auto var(--s4);
  text-align: center;
}
.arte-ed__lede {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--gray-700);
  margin-top: .5rem;
}

/* Body with left golden line */
.arte-ed__body {
  position: relative;
  padding-left: 3.5rem;
}
.arte-ed__line {
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-light) 10%, var(--gold-light) 90%, transparent);
}

/* Individual step */
.arte-ed__step {
  position: relative;
  padding: 3rem 0 3rem 2.5rem;
  border-bottom: 1px solid rgba(197,192,184,.18);
}
.arte-ed__step:last-child { border-bottom: none; }

/* Tiny dot on the vertical line */
.arte-ed__step::before {
  content: '';
  position: absolute;
  left: -3.5rem;
  top: 3.65rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  margin-left: -3px;
  transition: background .35s, transform .35s var(--ease-out);
}
.arte-ed__step:hover::before {
  background: var(--gold);
  transform: scale(1.5);
}

/* Giant watermark number */
.arte-ed__step-watermark {
  position: absolute;
  left: 1.5rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(197,162,103,.14);
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
  transition: color .5s;
}
.arte-ed__step:hover .arte-ed__step-watermark {
  color: rgba(197,162,103,.23);
}

/* Text content */
.arte-ed__step-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.arte-ed__step-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--gold);
  margin-bottom: .6rem;
  line-height: 1.15;
  transition: color .3s;
}
.arte-ed__step:hover .arte-ed__step-title { color: var(--dark); }
.arte-ed__step-desc {
  font-size: .92rem;
  line-height: 1.9;
  color: var(--gray-700);
  letter-spacing: .01em;
}

/* Arte-ed responsive */
@media (max-width: 768px) {
  .arte-ed__body { padding-left: 2.5rem; }
  .arte-ed__step { padding: 2.5rem 0 2.5rem 1.75rem; }
  .arte-ed__step::before { left: -2.5rem; }
  .arte-ed__step-watermark { font-size: clamp(4rem, 13vw, 6rem); left: .75rem; }
}
@media (max-width: 480px) {
  .arte-ed { padding: var(--s4) 0; }
  .arte-ed__body { padding-left: 2rem; }
  .arte-ed__step { padding: 2rem 0 2rem 1.25rem; }
  .arte-ed__step::before { left: -2rem; }
  .arte-ed__step-watermark { font-size: clamp(3rem, 15vw, 5rem); left: .5rem; }
}

/* ================================================================
   "OFERTAS ESPECIALES" — MINIMALIST PROMO SECTION
   ================================================================ */
.promo-min {
  background: var(--bg-alt); /* warm beige */
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(197,162,103,.3);
  border-bottom: 1px solid rgba(197,162,103,.3);
  text-align: center;
}
.promo-min__inner {
  max-width: 560px;
  margin: 0 auto;
}
.promo-min__title {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: .85rem;
}
.promo-min__title em {
  font-style: italic;
  color: var(--gold);
}
.promo-min__desc {
  font-size: .88rem;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  letter-spacing: .02em;
}

/* Form layout */
.promo-min__form { margin-bottom: .85rem; }
.promo-min__field {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1.5px solid var(--gold-light);
  padding-bottom: .5rem;
  transition: border-color .3s;
}
.promo-min__field:focus-within { border-color: var(--gold); }

.promo-min__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark);
  padding: .35rem 0;
}
.promo-min__input::placeholder {
  color: rgba(197,192,184,.75);
  text-transform: none;
  letter-spacing: .04em;
}

/* Text-only Apply button */
.promo-min__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: none;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gray-700);
  cursor: pointer;
  padding: .35rem 0 .35rem 1rem;
  white-space: nowrap;
  transition: color .3s, gap .3s var(--ease-out);
}
.promo-min__btn:hover { color: var(--gold); gap: .7rem; }
.promo-min__btn svg { transition: transform .3s var(--ease-out); }
.promo-min__btn:hover svg { transform: translateX(3px); }

/* Inline feedback */
.promo-min__feedback {
  min-height: 1.2rem;
  font-size: .8rem;
  letter-spacing: .02em;
  margin-top: .5rem;
  transition: color .3s;
}

/* Applied badge */
.promo-min__applied {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .8rem;
  color: #5a8a5a;
  letter-spacing: .04em;
  flex-wrap: wrap;
  justify-content: center;
}
.promo-min__applied svg { flex-shrink: 0; stroke: #5a8a5a; }
.promo-min__remove {
  background: none;
  border: none;
  font-size: .72rem;
  cursor: pointer;
  color: var(--gray-500);
  font-family: var(--body);
  letter-spacing: .08em;
  padding: 0;
  transition: opacity .3s;
  margin-left: .25rem;
}
.promo-min__remove:hover { opacity: .7; }

@media (max-width: 480px) {
  .promo-min { padding: 3.5rem 1.25rem; }
  .promo-min__field { flex-wrap: wrap; gap: .5rem; }
  .promo-min__btn { padding-left: 0; width: 100%; justify-content: center; }
}

/* ================================================================
   PROMO DATA MODAL — User data collection popup
   ================================================================ */
.promo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(26,26,26,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none; /* Changed from flex to none by default */
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: pmFadeIn .35s var(--ease-out) forwards;
}
@keyframes pmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.promo-modal {
  background: var(--cream);
  width: min(560px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 2.5rem 2.25rem 2rem;
  border: 1px solid rgba(197,162,103,.3);
  position: relative;
  animation: pmSlideUp .45s var(--ease-out) forwards;
}
@keyframes pmSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.promo-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.promo-modal__title {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 300;
  color: var(--dark);
  margin-top: .15rem;
}
.promo-modal__close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .3s, transform .35s var(--ease-out);
  margin-top: -4px;
}
.promo-modal__close:hover { color: var(--gold); transform: rotate(90deg); }

.promo-modal__desc {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 1.75rem;
}

/* Form fields */
.promo-modal__form { display: flex; flex-direction: column; gap: 1.1rem; }
.promo-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.promo-modal__field { display: flex; flex-direction: column; gap: .35rem; }
.promo-modal__field label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gray-700);
  font-weight: 500;
}
.promo-modal__field input {
  width: 100%;
  padding: .75rem 1rem;
  border: none;
  border-bottom: 1px solid rgba(197,192,184,.55);
  background: transparent;
  font-family: var(--body);
  font-size: .9rem;
  color: var(--dark);
  outline: none;
  transition: border-color .3s;
  border-radius: 0;
}
.promo-modal__field input:focus { border-color: var(--gold); }
.promo-modal__field input::placeholder { color: rgba(197,192,184,.7); }

.promo-modal__err {
  font-size: .8rem;
  color: #c0392b;
  text-align: center;
  padding: .5rem;
  background: rgba(192,57,43,.06);
}

.promo-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(197,192,184,.2);
}
.promo-modal__cancel {
  background: none;
  border: none;
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray-700);
  cursor: pointer;
  transition: color .3s;
  padding: .5rem;
}
.promo-modal__cancel:hover { color: var(--gold); }

@media (max-width: 520px) {
  .promo-modal { padding: 2rem 1.25rem 1.75rem; }
  .promo-modal__row { grid-template-columns: 1fr; }
  .promo-modal__actions { flex-direction: column-reverse; width: 100%; }
  .promo-modal__actions .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   CONVERSION FEATURES
   Lumina Club Modal · Social Proof · Sticky CTA · Quick-Buy
   ================================================================ */

/* ----------------------------------------------------------------
   LUMINA CLUB EXIT-INTENT MODAL
   ---------------------------------------------------------------- */
.lclub-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(26,26,26,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.lclub-overlay:not([hidden]) { opacity: 1; }
.lclub-overlay[hidden] { display: none !important; }

.lclub-modal {
  position: relative;
  background: var(--black);
  border: 1px solid rgba(197,162,103,.25);
  border-radius: 4px;
  padding: 3.5rem 3rem 2.75rem;
  max-width: 480px; width: 100%;
  text-align: center;
  overflow: hidden;
  transform: translateY(28px) scale(.96);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.lclub-overlay:not([hidden]) .lclub-modal {
  transform: translateY(0) scale(1);
}

/* Ambient orbs */
.lclub-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lclub-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .22;
}
.lclub-orb--1 {
  width: 260px; height: 260px;
  background: var(--gold);
  top: -80px; right: -60px;
}
.lclub-orb--2 {
  width: 180px; height: 180px;
  background: var(--gold-dark);
  bottom: -50px; left: -40px;
}
.lclub-orb--3 {
  width: 120px; height: 120px;
  background: var(--gold-light);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: .1;
}

.lclub-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: none; border: none;
  color: var(--gray-400); cursor: pointer;
  padding: .4rem;
  transition: color .25s, transform .25s;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lclub-close:hover { color: var(--cream); transform: rotate(90deg); }

.lclub-eyebrow {
  font-family: var(--body);
  font-size: .72rem; letter-spacing: .22em; font-weight: 600;
  color: var(--gold);
  margin: 0 0 1.25rem;
}
.lclub-title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.lclub-title em {
  font-style: italic;
  color: var(--gold-light);
}

.lclub-pill {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3rem 1.75rem .4rem;
  border-radius: 2px;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
}

.lclub-desc {
  font-family: var(--body);
  font-size: .9rem; line-height: 1.6;
  color: var(--gray-400);
  margin: 0 0 1.75rem;
}

.lclub-form {
  display: flex; gap: .75rem;
  flex-direction: column;
  position: relative; z-index: 1;
}
.lclub-input {
  width: 100%; padding: .85rem 1.25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(197,162,103,.3);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--body); font-size: .95rem;
  transition: border-color .25s, background .25s;
  outline: none;
}
.lclub-input::placeholder { color: var(--gray-500); }
.lclub-input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.09);
}
.lclub-btn { width: 100%; justify-content: center; font-size: 1rem; padding: .9rem 1.5rem; }

.lclub-skip {
  font-family: var(--body);
  font-size: .78rem; color: var(--gray-500);
  margin: 1.25rem 0 0;
  cursor: pointer;
  transition: color .25s;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lclub-skip:hover { color: var(--gray-400); }

@media (max-width: 520px) {
  .lclub-modal { padding: 3rem 1.5rem 2.25rem; }
  .lclub-title { font-size: 1.6rem; }
  .lclub-pill { font-size: 1.75rem; }
}

/* ----------------------------------------------------------------
   SOCIAL PROOF NOTIFICATIONS
   ---------------------------------------------------------------- */
.sp-wrap {
  position: fixed;
  bottom: 5.5rem; left: 1.5rem;
  z-index: 8000;
  pointer-events: none;
  max-width: 300px;
}
.sp-toast {
  display: flex; align-items: center; gap: .85rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: .85rem 1rem;
  box-shadow: 0 8px 32px rgba(26,26,26,.12);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .4s var(--ease), transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.sp-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.sp-toast__icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--black);
  font-size: 1.1rem;
}
.sp-toast__body { flex: 1; min-width: 0; }
.sp-toast__name {
  font-family: var(--body); font-size: .82rem; font-weight: 600;
  color: var(--black); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.sp-toast__action {
  font-family: var(--body); font-size: .77rem;
  color: var(--gray-500); margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-toast__time {
  font-family: var(--body); font-size: .7rem;
  color: var(--gray-400); flex-shrink: 0;
}

/* On mobile: social proof hides on small screens — handled by JS-injected sp-notif */
@media (max-width: 768px) {
  .sp-wrap {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
    width: calc(100% - 2rem);
  }
  .sp-toast {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  .sp-toast__icon {
    width: 26px; height: 26px;
    font-size: 0.85rem;
  }
  .sp-toast__name {
    font-size: 0.75rem;
  }
  .sp-toast__action {
    font-size: 0.7rem;
    margin-top: 0;
  }
  .sp-toast__time {
    display: none; /* Se oculta para ahorrar más espacio » minimalismo */
  }
}

/* ----------------------------------------------------------------
   STICKY MOBILE CTA BAR
   ---------------------------------------------------------------- */
.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 7500;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  gap: .75rem;
  box-shadow: 0 -4px 24px rgba(26,26,26,.1);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.sticky-cta.is-visible {
  display: flex;
  transform: translateY(0);
}
/* Sticky CTA bar is hidden on mobile — redundant with nav cart button */
@media (max-width: 768px) {
  .sticky-cta { display: none !important; }
}
.sticky-cta__shop,
.sticky-cta__cart {
  flex: 1; display: flex; align-items: center;
  justify-content: center; gap: .5rem;
  font-size: .9rem; padding: .75rem 1rem;
}
.sticky-cta__shop {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--black);
}
.sticky-cta__shop:hover { border-color: var(--gold); color: var(--gold); }
.sticky-cta__count {
  background: var(--gold);
  color: var(--black);
  font-size: .72rem; font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 10px;
  min-width: 1.4rem;
  text-align: center;
}

/* ----------------------------------------------------------------
   COLLECTION CARD QUICK-CTA OVERLAY
   ---------------------------------------------------------------- */
.card__quick-cta {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(26,26,26,.85) 0%, transparent 100%);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.75rem 1.25rem 1.25rem;
  font-family: var(--body); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.card__quick-cta svg { transition: transform .3s var(--ease); }
.cflow__card:hover .card__quick-cta,
.cflow__card:focus-within .card__quick-cta {
  opacity: 1;
  transform: translateY(0);
}
.cflow__card:hover .card__quick-cta svg { transform: translateX(4px); }

/* Ensure card visual has correct positioning context */
.card__visual { position: relative; overflow: hidden; }

/* Hide sticky CTA when cart is open */
.sticky-cta.cart-is-open { transform: translateY(100%) !important; }

/* ================================================================
   HERO ANIMATION - Tan única como tu luz
   ================================================================ */
.fp-section--hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #1a1511 0%, #080808 100%);
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-light);
  border-radius: 50%;
  /* filter instead of box-shadow → GPU composited, no layout reflow */
  filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px rgba(212,174,152,0.5));
  animation: float-particle 15s infinite ease-in-out;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes float-particle {
  /* Only transform + opacity — fully GPU-composited, zero layout cost */
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
    transform: translateY(80vh) translateX(20px) scale(1.5);
  }
  50% {
    opacity: 1;
    transform: translateY(40vh) translateX(-30px) scale(2);
  }
  80% {
    opacity: 0.8;
    transform: translateY(10vh) translateX(15px) scale(1);
  }
  100% {
    transform: translateY(-20vh) translateX(-10px) scale(0);
    opacity: 0;
  }
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(197, 162, 103, 0.15) 0%, rgba(197, 162, 103, 0) 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 8s infinite alternate ease-in-out;
}

@keyframes pulse-glow {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.fp-statement {
  position: relative;
  z-index: 2;
}

/* ================================================================
   PAGE-NAV — Páginas interiores (Tienda, Nosotros, Sostenibilidad)
   Override: nav siempre compacto con texto oscuro sobre fondo claro
   Doble clase .nav.page-nav eleva la especificidad a (0,4,0+) para
   vencer .nav:not(.is-scrolled) .nav__link (0,3,0) de styles.css
   ================================================================ */

/* ── Fondo y geometría: siempre compacto, nunca expandido ── */
.nav.page-nav {
  position: sticky;
  height: var(--nav-h);
  background: rgba(249, 246, 240, 0.97);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  border-bottom: 1px solid rgba(197, 162, 103, 0.18);
  box-shadow: 0 2px 20px rgba(26, 26, 26, 0.07);
}
@media (max-width: 768px) {
  .nav.page-nav { height: 60px; }
}

/* Container — fila única, nunca flex-wrap centrado */
.nav.page-nav:not(.is-scrolled) .nav__container,
.nav.page-nav.is-scrolled .nav__container {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
}

/* Links — siempre en fila, no centrados ni full-width */
.nav.page-nav:not(.is-scrolled) .nav__links {
  width: auto;
  justify-content: flex-end;
  order: 0;
  padding-bottom: 0;
}

/* ── Color de links: carbón elegante, sin text-shadow ── */
.nav.page-nav .nav__link,
.nav.page-nav:not(.is-scrolled) .nav__link {
  color: var(--gray-700);
  text-shadow: none;
  letter-spacing: 0.14em;
  position: relative;
}

.nav.page-nav .nav__link:hover,
.nav.page-nav:not(.is-scrolled) .nav__link:hover {
  color: var(--black);
}

/* Subrayado dorado — activo bien visible */
.nav.page-nav .nav__link[aria-current="page"]::after,
.nav.page-nav .nav__link.is-active::after {
  width: 100%;
}

/* ── Botones de íconos — oscuros, sin filtro drop-shadow ── */
.nav.page-nav .nav__icon-btn,
.nav.page-nav:not(.is-scrolled) .nav__icon-btn {
  color: var(--gray-700);
  filter: none;
}

.nav.page-nav .nav__icon-btn:hover,
.nav.page-nav:not(.is-scrolled) .nav__icon-btn:hover {
  color: var(--black);
  filter: none;
  transform: scale(1.08);
}

/* ── Acciones — posición estática (no flotar a la esquina) ── */
.nav.page-nav:not(.is-scrolled) .nav__actions {
  position: static;
  top: auto;
  right: auto;
}

/* ── Logo expandido — oculto en páginas interiores ── */
.nav.page-nav .nav__logo--expanded {
  display: none;
}
.nav.page-nav .nav__logo--compact {
  display: flex;
}
.nav.page-nav .nav__logo-display {
  color: var(--dark);
  text-shadow: none;
}

/* ── Hamburger — líneas oscuras ── */
.nav.page-nav .nav__hamburger span,
.nav.page-nav:not(.is-scrolled) .nav__hamburger span {
  background: var(--dark);
  box-shadow: none;
}

/* ── Estado scrolled en páginas interiores ── */
.nav.page-nav.is-scrolled {
  background: rgba(249, 246, 240, 0.98);
  box-shadow: 0 4px 24px rgba(26, 26, 26, 0.1);
  border-bottom-color: rgba(197, 162, 103, 0.22);
}

.nav.page-nav.is-scrolled .nav__link {
  color: var(--gray-700);
  text-shadow: none;
}

.nav.page-nav.is-scrolled .nav__link:hover {
  color: var(--black);
}

.nav.page-nav.is-scrolled .nav__icon-btn {
  color: var(--gray-700);
  filter: none;
}

/* ================================================================
   LIQUID GLASS DISTORTION — nav bars & filter bars
   ================================================================ */

/* Glass layer sits behind content, pointer-events: none */
.nav__glass-layer,
.filters__glass-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Distortion edges — SVG filter (Firefox) + gradient shine (all browsers) */
.nav__glass-edge,
.filters__glass-edge {
  position: absolute;
  -webkit-backdrop-filter: url(#lf-distortion);
  backdrop-filter: url(#lf-distortion);
}

.nav__glass-edge--top,
.filters__glass-edge--top {
  top: 0; left: 0; right: 0;
  height: 0.75rem;
}
.nav__glass-edge--top::after,
.filters__glass-edge--top::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
}

.nav__glass-edge--bottom,
.filters__glass-edge--bottom {
  bottom: 0; left: 0; right: 0;
  height: 0.75rem;
}
.nav__glass-edge--bottom::after,
.filters__glass-edge--bottom::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.10) 0%, transparent 100%);
}

/* Ensure nav/filter content stays above glass layer */
.nav > .nav__container { position: relative; z-index: 1; }
.shop-filters > *:not(.filters__glass-layer) { position: relative; z-index: 1; }

/* ================================================================
   FRAGMENTED VERTICAL STRIPS SLIDER (VStrip)
   ================================================================ */

.vstrip-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0e0d0c;
}

.vstrip-stage { position: absolute; inset: 0; }

.vstrip-slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
}
.vstrip-slide.is-active { opacity: 1; pointer-events: auto; }

.vstrip-strips {
  position: absolute; inset: 0;
  display: flex;
  gap: var(--vstrip-gap, 10px);
}

.vstrip-strip {
  flex: 1;
  overflow: hidden;
  position: relative;
  transition: flex 0.55s cubic-bezier(0.16,1,0.3,1);
}
.vstrip-strip:hover { flex: 1.12; }

.vstrip-strip__bg {
  position: absolute;
  top: 0; height: 100%;
  /* width + left set by JS to show each strip's slice of the full image */
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 10s ease-out;
  transform: scale(1);
}
.vstrip-slide.is-active .vstrip-strip__bg { transform: scale(1.055); }
.vstrip-strip:hover .vstrip-strip__bg {
  transform: scale(1.07) !important;
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Strip transitions */
.vstrip-strip.vs-exit {
  animation: vstripExit var(--vsd,0.6s) cubic-bezier(0.55,0,0.68,0.53) var(--vsdel,0s) both;
}
.vstrip-strip.vs-enter {
  animation: vstripEnter var(--vsd,0.7s) cubic-bezier(0.16,1,0.3,1) var(--vsdel,0s) both;
}
@keyframes vstripExit  { from{transform:translateY(0)}  to{transform:translateY(-105%)} }
@keyframes vstripEnter { from{transform:translateY(110%)} to{transform:translateY(0)} }

/* Gradient fallback (no image) */
.vstrip-strip__bg.vs-gradient {
  width: 100% !important;
  left: 0 !important;
  background-image: none !important;
}

/* Overlay for text readability */
.vstrip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.22) 48%,
    rgba(0,0,0,0.04) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Text layer */
.vstrip-text-layer {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
}
.vstrip-text {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2rem 0 clamp(2rem,6vw,8rem);
  max-width: 680px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s,
              transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s;
  pointer-events: none;
}
.vstrip-text.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.vstrip-eyebrow {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold,#C5A267);
  margin-bottom: 1.25rem; font-weight: 600;
}
.vstrip-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem,5.5vw,5rem);
  font-weight: 400; line-height: 1.08;
  color: #fff; letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  margin: 0;
}
.vstrip-title em { font-style: italic; color: #D4B87C; text-shadow: 0 0 40px rgba(212,184,124,0.45); }

.vstrip-subtitle {
  margin-top: 1.5rem;
  color: rgba(240,236,228,0.88); font-size: 1.05rem; line-height: 1.7;
  letter-spacing: 0.025em; font-weight: 300;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.vstrip-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 2.5rem; padding: 0.7rem 1.8rem;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  width: fit-content; pointer-events: auto;
}
.vstrip-cta::after { content: '→'; font-size: 0.9em; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.vstrip-cta:hover { color: #C5A267; border-color: rgba(197,162,103,0.6); background: rgba(197,162,103,0.12); }
.vstrip-cta:hover::after { transform: translateX(4px); }

/* Navigation bottom-left */
.vstrip-nav {
  position: absolute;
  bottom: calc(var(--nav-h,70px) + 2rem);
  left: clamp(2rem,6vw,8rem);
  z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  opacity: 0; animation: vsFadeIn 1s forwards 0.9s;
}
.vstrip-fraction {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.vstrip-fraction__sep { opacity: 0.4; }
.vstrip-progress-bg {
  width: 140px; height: 1px;
  background: rgba(255,255,255,0.18);
  position: relative; overflow: hidden;
}
.vstrip-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, rgba(197,162,103,0.8), #fff);
  transform-origin: left; transform: scaleX(0);
  transition: transform linear; will-change: transform;
}

/* Arrows */
.vstrip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 15; width: 60px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0.3; transition: opacity 0.4s;
  cursor: pointer; background: none; border: none; padding: 0;
}
.vstrip-arrow:hover { opacity: 1; }
.vstrip-arrow--prev { left: 0; }
.vstrip-arrow--next { right: 0; }

@keyframes vsFadeIn { to { opacity: 1; } }

/* Mobile slider: show 2 strips for the recortes visual */
@media (max-width: 767px) {
  .vstrip-strip:nth-child(n+3) { display: none; }
  .vstrip-strips { gap: 2px; }
  /* Stronger bottom + left gradient for text contrast on portrait */
  .vstrip-overlay {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.15) 45%,
      rgba(0,0,0,0.72) 100%
    );
  }
  .vstrip-text {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    justify-content: flex-end;
    padding-bottom: calc(var(--nav-h,60px) + 5.5rem);
    max-width: 100%;
  }
  .vstrip-eyebrow { font-size: 0.58rem; }
  .vstrip-title   { font-size: clamp(1.7rem,7.5vw,2.8rem); }
  .vstrip-subtitle { font-size: 0.75rem; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .vstrip-nav { bottom: 1.5rem; left: 1.4rem; }
  .vstrip-arrow { display: none; }
}

/* ================================================================
   FP EDITORIAL CAROUSEL — fp-section product showcase
   ================================================================ */

/* ── Section base ── */
.fp-section--editorial {
  background: #060505;
  color: #f0ece4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}

/* ── Rotating side label ── */
.fed-side-label {
  position: absolute;
  left: clamp(0.4rem, 1.5vw, 1.2rem);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.52rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(197,162,103,0.18);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Kinetic ticker ── */
.fed-ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(197,162,103,0.1);
  flex-shrink: 0;
}
.fed-ticker {
  display: inline-flex;
  animation: fedTicker 28s linear infinite;
}
.fed-ticker span {
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(197,162,103,0.4);
  padding-right: 3rem;
}
@keyframes fedTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Main split layout ── */
.fed-main {
  flex: 1;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 0;
  overflow: hidden;
}

/* ─────────── LEFT: info panel ─────────── */
.fed-info {
  padding: clamp(1.5rem,4vw,4rem) clamp(1.5rem,4vw,4rem) clamp(1.5rem,4vw,4rem) clamp(2.5rem,5vw,6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.8rem,1.5vw,1.4rem);
  position: relative;
  z-index: 2;
}

/* meta row: kicker + fraction */
.fed-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fed-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(197,162,103,0.7);
}
.fed-fraction {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(240,236,228,0.3);
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}
.fed-count { color: rgba(240,236,228,0.8); font-variant-numeric: tabular-nums; }
.fed-fraction-sep { opacity: 0.4; }

/* ── Big kinetic number ── */
.fed-num-wrap { overflow: hidden; line-height: 1; }
.fed-big-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(5rem,14vw,12rem);
  font-weight: 400;
  line-height: 0.88;
  color: rgba(197,162,103,0.08);
  letter-spacing: -0.04em;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
}
.fed-big-num.fed-in { transform: translateY(0); opacity: 1; }

/* ── Animated line ── */
.fed-line-wrap { padding: 0.2rem 0; }
.fed-line {
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(197,162,103,0.7) 0%, transparent 100%);
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
}
.fed-line.fed-line--on { width: 100%; }

/* ── Product name ── */
.fed-name-wrap { overflow: hidden; }
.fed-name {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem,3vw,2.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #f0ece4;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1) 0.05s,
              opacity 0.55s ease 0.05s;
}
.fed-name.fed-in { transform: translateY(0); opacity: 1; }

/* ── Price ── */
.fed-price-wrap { overflow: hidden; }
.fed-price {
  display: block;
  font-size: clamp(0.85rem,1.6vw,1.15rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(197,162,103,0.85);
  font-variant-numeric: tabular-nums;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.14s,
              opacity 0.5s ease 0.14s;
}
.fed-price.fed-in { transform: translateY(0); opacity: 1; }
.fed-price-orig {
  text-decoration: line-through;
  color: rgba(240,236,228,0.3);
  font-size: 0.82em;
  margin-right: 0.5rem;
  font-style: normal;
}
.fed-price-sale {
  font-style: normal;
  color: #e8c44a;
}
.fed-price-desde {
  font-size: 0.72em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(197,162,103,0.55);
  margin-right: 0.35rem;
}

/* ── CTA button ── */
.fed-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,236,228,0.2);
  padding-bottom: 0.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease 0.28s,
              transform 0.55s cubic-bezier(0.16,1,0.3,1) 0.28s,
              color 0.3s, border-color 0.3s;
}
.fed-cta.fed-in { opacity: 1; transform: translateY(0); }
.fed-cta:hover { color: var(--gold,#C5A267); border-color: rgba(197,162,103,0.45); }
.fed-cta-arrow { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.fed-cta:hover .fed-cta-arrow { transform: translateX(5px); }

/* ─────────── RIGHT: image panel ─────────── */
.fed-visual {
  position: relative;
  overflow: hidden;
  background: #0a0808;
}

/* Subtle film grain overlay */
.fed-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 3;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

.fed-img-frame {
  position: absolute;
  inset: 0;
}

/* Product image — starts scaled up, settles when loaded */
.fed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 0.7s ease,
              transform 9s cubic-bezier(0.25,0.1,0.25,1);
  z-index: 1;
}
.fed-img.fed-img--loaded {
  opacity: 1;
  transform: scale(1.0);
}

/* Fallback gradient when no image */
.fed-img-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background-size: 300% 300%;
  animation: fedGradMove 12s ease infinite;
}
@keyframes fedGradMove {
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* Wipe overlay — dark panel that slides away left to reveal image */
.fed-img-wipe {
  position: absolute;
  inset: 0;
  background: #060505;
  z-index: 2;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.76,0,0.24,1);
}
.fed-img-wipe.fed-wipe-open {
  transform-origin: right center;
  transform: scaleX(0);
}

/* ─────────── BOTTOM: nav ─────────── */
.fed-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem clamp(2rem,4vw,5rem) 0.8rem clamp(2.5rem,5vw,6rem);
  border-top: 1px solid rgba(197,162,103,0.07);
  flex-shrink: 0;
}

/* Dot indicators */
.fed-dots {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.fed-dot {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 18px;
  height: 2px;
  background: rgba(240,236,228,0.18);
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1),
              background 0.3s;
}
.fed-dot.fed-dot--on {
  width: 36px;
  background: var(--gold,#C5A267);
}

/* Arrow buttons */
.fed-arrows { display: flex; gap: 0.5rem; }
.fed-arrow {
  appearance: none;
  border: 1px solid rgba(240,236,228,0.12);
  background: transparent;
  color: rgba(240,236,228,0.5);
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.fed-arrow:hover {
  border-color: rgba(197,162,103,0.45);
  color: var(--gold,#C5A267);
  background: rgba(197,162,103,0.06);
}

/* Shop link in fed-nav */
.fed-shop-link {
  text-decoration: none;
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  background: linear-gradient(135deg, #D4B87C 0%, #C5A267 40%, #A8873F 70%, #C5A267 100%);
  background-size: 200% 200%;
  animation: pb-gold-shine 3s ease infinite;
  border: none;
  box-shadow: 0 2px 10px rgba(197,162,103,0.4);
  transition: box-shadow .25s, transform .2s;
  white-space: nowrap;
}
.fed-shop-link:hover {
  box-shadow: 0 4px 18px rgba(197,162,103,0.65);
  transform: translateY(-1px);
}
@keyframes pb-gold-shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─────────── Progress bar ─────────── */
.fed-progress-bar {
  height: 2px;
  background: rgba(197,162,103,0.08);
  flex-shrink: 0;
}
.fed-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold,#C5A267);
  transition: width linear;
}

/* ─────────── Mobile ≤ 767px — "Stories" format ─────────── */
/* NOTE: JS applies position:fixed;inset:0;height:100svh — do NOT override.
   All children use position:absolute to fill that fixed container.          */
@media (max-width: 767px) {

  /* Hide ticker & side label — save vertical space */
  .fed-ticker-wrap { display: none; }
  .fed-side-label  { display: none; }

  /* .fed-main fills the ENTIRE section as a canvas */
  .fed-main {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
  }

  /* Image: fills the full section (behind text) */
  .fed-visual {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    order: initial;
  }

  /* Gradient overlay: bottom half darkens for text legibility */
  .fed-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(6,5,5,0.08) 0%,
      rgba(6,5,5,0.15) 40%,
      rgba(6,5,5,0.72) 70%,
      rgba(6,5,5,0.95) 100%
    );
    z-index: 4;
    pointer-events: none;
  }

  /* Info: absolute, sits at bottom above nav */
  .fed-info {
    position: absolute;
    bottom: 3.6rem;
    left: 0; right: 0;
    z-index: 5;
    padding: 0 1.4rem 0.6rem;
    gap: 0.5rem;
    justify-content: flex-end;
    order: initial;
    background: transparent;
  }

  /* Hide big decorative number (too tall) */
  .fed-num-wrap { display: none; }

  /* Compact meta row */
  .fed-kicker    { font-size: 0.54rem; letter-spacing: 0.32em; }
  .fed-fraction  { color: rgba(240,236,228,0.45); }
  .fed-meta-row  { margin-bottom: 0.1rem; }

  /* Line */
  .fed-line-wrap { padding: 0.05rem 0; }

  /* Name — white, larger for full-bleed feel */
  .fed-name {
    font-size: clamp(1.15rem, 5.5vw, 1.8rem);
    color: #f0ece4;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.06s,
                opacity 0.5s ease 0.06s;
  }
  .fed-name.fed-in { transform: translateY(0); opacity: 1; }

  /* Price */
  .fed-price {
    font-size: clamp(0.82rem, 3.8vw, 1.05rem);
    color: rgba(197,162,103,0.95);
  }

  /* CTA */
  .fed-cta {
    color: rgba(240,236,228,0.85);
    border-color: rgba(240,236,228,0.22);
    font-size: 0.6rem;
    padding-bottom: 0.3rem;
  }
  .fed-cta:hover { color: var(--gold,#C5A267); border-color: rgba(197,162,103,0.5); }

  /* Nav: sits at very bottom, glass-morphism feel */
  .fed-nav {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 5;
    padding: 0.6rem 1.4rem;
    background: rgba(6,5,5,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(197,162,103,0.12);
  }

  /* Progress bar: at very bottom edge */
  .fed-progress-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 6;
    height: 2px;
  }

  .fed-dot       { width: 14px; }
  .fed-dot.fed-dot--on { width: 28px; }
  .fed-arrow     { width: 2rem; height: 2rem; }
}