/* Renéra · Shared mobile header (HomePage-6 FramedHeader)
   Loaded on every mobile page for a consistent header. Sticky brand + cart +
   hamburger, slide-down accordion nav, and a non-sticky promo strip. Tokens
   come from design-system.css (enqueued globally). */

/* Responsive chrome toggle — on the width-responsive pages BOTH the desktop and mobile
   header/footer are rendered; show the right one by viewport via body.rn-m (set server-side
   for mobile UAs, and by responsive-chrome.js when a desktop window is resized narrow). */
body.rn-m .rn-announce,
body.rn-m .rn-header { display: none !important; }
body.rn-m footer:not(.rnm-footer):not([class*="elementor"]) { display: none !important; }
body:not(.rn-m) .rnm-fbar,
body:not(.rn-m) .rnm-promo,
body:not(.rn-m) .rnm-footer { display: none !important; }

/* Body layout variants toggled by viewport on width-responsive pages — e.g. posts renders
   BOTH its mobile carousel layout (.rn-only-m) and desktop magazine layout (.rn-only-d);
   CSS shows the one matching body.rn-m so the right design appears at any width. */
body:not(.rn-m) .rn-only-m { display: none !important; }
body.rn-m .rn-only-d { display: none !important; }

/* Button primitives — shared by the header CTA and the mobile page bodies. */
.rnm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; padding: 0 24px;
  font-family: var(--renera-font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: var(--renera-r-sm); cursor: pointer; text-decoration: none;
  border: 1px solid var(--renera-olive-700);
  transition: background var(--renera-dur-fast) var(--renera-ease),
              color var(--renera-dur-fast) var(--renera-ease);
}
.rnm-btn .rnm-arrow { transition: transform var(--renera-dur-base) var(--renera-ease); }
.rnm-btn:active .rnm-arrow { transform: translateX(4px); }
.rnm-btn--primary { background: var(--renera-btn-bg); color: var(--renera-btn-fg); border-color: var(--renera-btn-bg); }
.rnm-btn--primary:hover, .rnm-btn--primary:active { background: var(--renera-btn-bg-hover); color: var(--renera-btn-fg-hover); border-color: var(--renera-btn-bg-hover); }
.rnm-btn--secondary { background: transparent; color: var(--renera-olive-700); }
.rnm-btn--invert { background: var(--renera-sand-200); color: var(--renera-olive-700);
  border-color: var(--renera-sand-200); }
.rnm-btn--auto { width: auto; }

/* Sticky bar wraps header + nav so the accordion aligns under the header
   without a hardcoded top offset (safe-area aware). */
.rnm-fbar { position: sticky; top: 0; z-index: 40; }

.rnm-fhead {
  background: rgba(246,238,232,0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--renera-clay-300);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 14px;
  display: flex; align-items: center; gap: 12px;
}
.rnm-fhead__brand {
  flex: 1; font-family: var(--renera-font-serif-alt); font-weight: 400;
  font-size: 26px; letter-spacing: -0.02em; color: var(--renera-olive-700);
  text-decoration: none; line-height: 1;
}
.rnm-iconbtn {
  background: transparent; border: 0; padding: 8px; cursor: pointer;
  color: var(--renera-olive-700); position: relative; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.rnm-cart-badge {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; font-family: var(--renera-font-mono);
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--renera-olive-700); color: var(--renera-pure-white); border: 1.5px solid var(--renera-sand-300);
}
.rnm-cart-badge[data-zero="1"] { background: var(--renera-sand-300);
  color: var(--renera-olive-700); border-color: var(--renera-clay-300); }

/* Slide-down accordion nav — green-glow panel with serif rows */
.rnm-fnav {
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(174,220,145,0.10) 0%, transparent 60%),
    var(--renera-sand-200);
  border-bottom: 1px solid var(--renera-clay-300);
  box-shadow: 0 24px 40px -28px rgba(47,54,38,0.45);
  max-height: 0; overflow: hidden;
  transition: max-height .42s cubic-bezier(.4,0,.1,1);
}
.rnm-fnav.is-open { max-height: 560px; }
.rnm-fnav__inner { padding: 14px 22px 24px; display: flex; flex-direction: column; }

/* Nav rows — Recoleta display, staggered fade-in on open */
.rnm-fnav__link {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--renera-clay-300);
  text-decoration: none; color: var(--renera-olive-800);
  opacity: 0; transform: translateY(8px);
}
.rnm-fnav.is-open .rnm-fnav__link,
.rnm-fnav.is-open .rnm-fnav__cta {
  animation: rnmFnavIn .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rnmFnavIn { to { opacity: 1; transform: none; } }
.rnm-fnav__name {
  font-family: var(--renera-font-serif-alt); font-weight: 400; font-size: 23px;
  letter-spacing: -0.015em; line-height: 1.05; color: var(--renera-olive-800);
}
.rnm-fnav__arrow { color: var(--renera-clay-700);
  transition: transform .2s var(--renera-ease), color .2s; }
.rnm-fnav__link:active { color: var(--renera-olive-900); }
.rnm-fnav__link:active .rnm-fnav__arrow { transform: translateX(4px); color: var(--renera-olive-700); }
.rnm-fnav__link.is-active .rnm-fnav__name { color: var(--renera-olive-900); }
.rnm-fnav__link.is-active .rnm-fnav__name::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--renera-olive-500); margin-left: 9px; vertical-align: middle;
}

/* CTA block — full-width Amazon button + text login */
.rnm-fnav__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; transform: translateY(8px); }

/* Amazon button (wordmark + orange smile) */
.rnm-amzn { display: inline-flex; align-items: center;
  padding: 9px 16px 11px; border-radius: 999px;
  background: var(--renera-olive-700); border: 1px solid var(--renera-olive-700);
  text-decoration: none; white-space: nowrap; }
.rnm-amzn__mark { position: relative; display: inline-block; color: var(--renera-sand-200); }
.rnm-amzn__word { font-family: var(--renera-font-serif); font-weight: 600;
  font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: var(--renera-sand-200); }
.rnm-amzn__smile { position: absolute; left: 1px; right: 1px; bottom: -4px;
  width: calc(100% - 2px); height: 7px; color: var(--renera-amazon-smile); }
.rnm-amzn--menu { width: 100%; justify-content: center;
  padding: 16px 30px 18px; border-radius: var(--renera-r-sm);
  border: 1px solid var(--renera-olive-700);
  box-shadow: 0 16px 26px -16px rgba(47,54,38,0.6); }
.rnm-amzn--menu .rnm-amzn__word { font-size: 19px; }
.rnm-amzn--menu .rnm-amzn__smile { bottom: -5px; height: 9px; }

/* Login — simple mono text link */
.rnm-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--renera-font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--renera-mute); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  padding: 2px 0; transition: color .18s var(--renera-ease);
}
.rnm-login:active { color: var(--renera-olive-700); }
/* Sign-out variant — reuses the account sidebar's "icon-left + label" treatment:
   logout glyph on the left, no underline. The SVG inherits color via currentColor. */
.rnm-login--out { text-decoration: none; gap: 9px; line-height: 1; }
.rnm-login--out svg { width: 15px; height: 15px; flex: none; display: block; }

/* Promo strip — scrolls away under the sticky bar */
.rnm-promo {
  background: var(--renera-olive-700); color: var(--renera-sand-200);
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  border-bottom: 1px solid var(--renera-olive-800);
}
.rnm-promo__dot { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--renera-olive-300); box-shadow: 0 0 0 4px rgba(174,220,145,0.18); }
.rnm-promo__msg { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rnm-promo__code { font-family: var(--renera-font-mono); font-size: 10px;
  letter-spacing: 0.12em; border: 1px solid rgba(246,238,232,0.3); border-radius: 4px;
  padding: 3px 8px; background: transparent; color: var(--renera-sand-200); flex: none; cursor: pointer; }

/* Shared toast (used by the promo copy button) */
.rnm-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--renera-olive-700); color: var(--renera-sand-200);
  padding: 12px 18px; border-radius: var(--renera-r-sm); z-index: 9999;
  font-family: var(--renera-font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; box-shadow: var(--renera-shadow-lift);
  max-width: 360px; width: max-content; transition: opacity .2s; }