/* ============================================================================
   SARART · GLOBALS — marquee, navbar (+ mobile menu, cart drawer, toast),
   preloader, footer, SMS FAB. Values ported 1:1 from the mockup so the
   chrome is pixel-identical. All colours/radii/easings come from tokens.css.
   ============================================================================ */

/* ───────────────────── FORM-CONTROL LINE-HEIGHT ─────────────────────
   Buttons, inputs and selects do NOT inherit line-height on their own. The
   mockup's reset (Tailwind preflight) gives them `line-height: inherit`, so
   every control there computes 1.5 × font-size; ours fell back to the browser
   default `normal` and came out short: accordion heads 62 vs 64.47 (−2.47 each,
   −7.4 across the three, which then shifted "You may also like" up by the same
   amount), the shop's Filters button 43 vs 45, the Collection trigger 30 vs
   32.25. Components that need a tighter value (close buttons, chips) set their
   own and win on specificity.

   Deliberately here and not in base.css: that file is the shared baseline the
   other instance aligned to the mockup, and this is an additive rule of ours
   that applies the very same 1.5 to the controls it did not cover. */
button,
input,
select,
textarea { line-height: inherit; }

/* ─────────────────────────── ATMOSPHERE ───────────────────────────
   Fixed background behind every page. BRAND (home) = breathing colour glows,
   animated grain and a cursor-following gold spotlight. QUIET (shop, product,
   about, contact) = near-flat dark, a faint static gold cast up top, a soft
   depth vignette and low static grain: on a listing the product is the
   protagonist and the background must stay silent. */
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--ink); }
.atmos__grain { position: absolute; inset: 0; }
.atmos__grain--anim { inset: -8%; animation: grainshift 14s steps(4) infinite; }

/* quiet variant */
.atmos__cast { position: absolute; inset: 0; background: radial-gradient(130% 80% at 50% -10%, rgba(211, 148, 7, .05), rgba(211, 148, 7, 0) 55%); }
.atmos__vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 20, .5) 0%, rgba(26, 26, 32, 0) 16%, rgba(26, 26, 32, 0) 84%, rgba(15, 15, 20, .55) 100%); }

/* brand variant */
.atmos__spot {
  position: absolute; top: 0; left: 0;
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 250, 238, .06), rgba(255, 250, 238, 0) 60%);
  transform: translate(-50%, -50%);
  will-change: transform; opacity: 0; transition: opacity .6s ease;
}
.atmos__glow { position: absolute; border-radius: 50%; }
.atmos__glow--a { top: -18vh; left: -12vw; width: 62vw; height: 62vw; background: radial-gradient(circle at center, rgba(5, 140, 96, .20), rgba(5, 140, 96, 0) 68%); filter: blur(46px); animation: glowA 26s ease-in-out infinite; }
.atmos__glow--b { bottom: -22vh; right: -14vw; width: 66vw; height: 66vw; background: radial-gradient(circle at center, rgba(211, 148, 7, .17), rgba(211, 148, 7, 0) 66%); filter: blur(50px); animation: glowB 32s ease-in-out infinite; }
.atmos__glow--c { top: 52%; left: 50%; width: 48vw; height: 48vw; background: radial-gradient(circle at center, rgba(230, 57, 70, .10), rgba(230, 57, 70, 0) 70%); filter: blur(54px); animation: glowC 38s ease-in-out infinite; }

/* ─────────────────────────── PRELOADER ─────────────────────────── */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.site-preloader.is-fading { opacity: 0; }
.preloader__logo { height: 46px; width: auto; animation: preLogo 0.7s var(--ease-out) both; }
.preloader__bar { width: 180px; height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.preloader__fill { display: block; height: 100%; width: 0; background: var(--gold); animation: preBar 0.85s ease forwards; }

/* ─────────────────────────── MARQUEE ─────────────────────────── */
.marquee {
  background: var(--gold);
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  overflow: hidden;
  padding: 13px 0;
}
.marquee__track { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marquee__seq { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-ink);
}
.marquee__diamond {
  width: 5px; height: 5px;
  background: var(--gold-ink);
  transform: rotate(45deg);
  margin-left: 26px;
  opacity: 0.75;
  flex: none;
}

/* ─────────────────────────── NAVBAR ─────────────────────────── */
.nav-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); }

.nav-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px, 5vw, 56px);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.nav-header.is-solid {
  background: rgba(26, 26, 32, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* hamburger */
.nav-burger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-burger span { display: block; width: 24px; height: 2px; background: #fff; }
.nav-burger span:last-child { width: 16px; background: var(--gold); }

/* logo */
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 31px; width: auto; display: block; }

/* desktop nav + sliding gold pill */
.nav-menu {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--line-nav);
  border-radius: var(--r-pill);
  padding: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.nav-pill {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  height: 36px; width: 0;
  background: var(--gold);
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translate(0, 0);
  transition: transform 0.42s var(--ease-spring), width 0.42s var(--ease-spring), height 0.42s var(--ease-spring), opacity 0.25s ease;
  pointer-events: none;
}
.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  transition: color 0.28s ease;
}
.nav-link.is-active { color: var(--gold); }
.nav-shop { position: relative; display: flex; }
.nav-shop__chev { transition: transform 0.25s ease; margin-top: 1px; }
.nav-shop.is-open .nav-shop__chev { transform: rotate(180deg); }

.nav-shop__wrap {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 12px; /* bridges the gap so hover survives moving to the panel */
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nav-shop.is-open .nav-shop__wrap { opacity: 1; pointer-events: auto; }
.nav-shop__panel {
  min-width: 214px;
  background: rgba(24, 24, 30, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 7px;
  box-shadow: var(--shadow-dropdown);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-6px);
  transition: transform 0.2s ease;
}
.nav-shop.is-open .nav-shop__panel { transform: translateY(0); }
.shop-dd-item {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-md);
  color: var(--text-1);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .shop-dd-item:hover { background: rgba(211, 148, 7, 0.12); color: var(--gold); }
}

/* cart */
.nav-cart {
  position: relative;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.nav-cart__count {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ─────────────────────────── MOBILE MENU ─────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 6vw, 56px);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.mobile-menu__head img { height: 24px; width: auto; display: block; }
.mobile-menu__close { background: none; border: none; cursor: pointer; width: 44px; height: 44px; color: #fff; font-size: 30px; line-height: 1; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.m-link {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 500;
  padding: 12px 0;
}
.mobile-menu__nav > .m-link { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.m-shop { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.m-shop__row { display: flex; align-items: center; justify-content: space-between; }
.m-shop__toggle { background: none; border: none; color: var(--gold); cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex: none; }
.m-shop__toggle svg { transition: transform 0.25s ease; }
.m-shop__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-shop__sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 14px; }
.m-shop__sub[hidden] { display: none; }
.m-shop__sub a { color: #c9c9d2; text-decoration: none; font-size: 18px; font-weight: 500; padding: 9px 0 9px 4px; letter-spacing: 0.01em; }
.mobile-menu__cta { margin-top: auto; padding: 18px; font-size: 16px; justify-content: center; }

/* ─────────────────────────── CART DRAWER ─────────────────────────── */
.cart-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.cart-drawer[hidden] { display: none; }
.cart-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 400px);
  background: var(--ink);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column;
  padding: 24px;
  transform: translateX(0);
}
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.cart-drawer__title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; }
.cart-drawer__close { background: none; border: none; cursor: pointer; width: 40px; height: 40px; color: #fff; font-size: 28px; }
.cart-drawer__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; color: var(--text-muted); }
.cart-drawer__icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; }
.cart-drawer__count { font-size: 15px; }
.cart-drawer__count b { color: #fff; }
.cart-drawer__note { font-size: 13px; max-width: 24ch; }
.cart-drawer__body[hidden] { display: none; }

/* Real cart lines. The drawer design is the mockup's; these rows reuse its
   existing language (dark surface, hairlines, gold accents, 3:4 media like the
   product cards). No quantity control: every piece is one of one. */
.cart-lines { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.cart-lines[hidden] { display: none; }
.cart-line { display: flex; align-items: flex-start; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line:first-child { padding-top: 0; }
.cart-line__media {
  position: relative; flex: none; width: 62px; aspect-ratio: 3 / 4;
  border-radius: var(--r-md); overflow: hidden; background: #ffffff;
  border: 1px solid var(--line-2);
}
.cart-line__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cart-line__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; color: #fff; text-decoration: none; line-height: 1.2; }
.cart-line__size { font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }
.cart-line__price { font-size: 14px; font-weight: 700; color: #fff; margin-top: 3px; }
.cart-line__remove {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: none; border: 1px solid var(--line-2); color: var(--text-muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) { .cart-line__remove:hover { color: var(--gold); border-color: var(--gold); } }

.cart-drawer__subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0 14px; margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.cart-drawer__subtotal[hidden] { display: none; }
.cart-drawer__subtotal-value { color: #fff; font-size: 1.15rem; font-weight: 700; }

.cart-drawer__cta { padding: 17px; font-size: 16px; justify-content: center; }
.cart-drawer__pay { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; color: var(--text-muted); font-size: 12px; }

/* ─────────────────────────── TOAST ─────────────────────────── */
.cart-toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-toast[hidden] { display: none; }

/* ─────────────────────────── FOOTER ─────────────────────────── */
.footer {
  background: var(--dark-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: clamp(48px, 8vw, 72px) clamp(20px, 6vw, 72px) 32px;
}

.newsletter {
  max-width: 920px;
  margin: 0 auto clamp(64px, 9vw, 96px);
  padding: clamp(28px, 4vw, 40px) clamp(28px, 5vw, 56px);
  background: linear-gradient(180deg, var(--dark-5), var(--dark-6));
  border: 1px solid rgba(211, 148, 7, 0.28);
  border-radius: var(--r-2xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.newsletter__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 2.9rem); margin: 0; line-height: 1.06; text-wrap: balance; }
.newsletter__hl { color: var(--gold); font-weight: 800; }
.newsletter__body { color: var(--text-muted); font-weight: 300; font-size: clamp(.98rem, 3.5vw, 1.08rem); line-height: 1.6; margin: 0; max-width: 42ch; }
.nl-form { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 500px; margin-top: 8px; justify-content: center; }
.nl-input {
  flex: 1; min-width: 200px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  padding: 16px 22px;
  color: #fff;
  font-size: 16px;
  font-family: var(--font-sans);
  min-height: 54px;
  outline: none;
}
.nl-input::placeholder { color: var(--text-dim); }
.nl-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(211, 148, 7, 0.16); }
.nl-btn { font-size: 15px; padding: 16px 32px; min-height: 54px; white-space: nowrap; }
.newsletter__disclaimer { color: var(--text-dim); font-size: 12px; letter-spacing: 0.02em; }

.footer__cols {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 36px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand img { height: 30px; width: auto; object-fit: contain; align-self: flex-start; display: block; margin-bottom: 2px; }
.footer__blurb { color: var(--text-muted); font-weight: 300; font-size: 14px; line-height: 1.6; margin: 0; max-width: 30ch; }
.footer__ig { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; margin-top: 4px; }
/* Instagram + TikTok sit on one row and wrap together on narrow screens. */
.footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col-title { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

/* footer link underline sweep (ported) */
.foot-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  align-self: flex-start;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.25s ease;
}
.foot-link:hover { color: var(--gold); background-size: 100% 1px; cursor: pointer; }

/* payment badges */
.foot-pay-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; }
.foot-pay__badge {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: 7px 8px;
  height: 36px;
}
.foot-pay__badge img { height: 24px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.footer__bottom {
  max-width: var(--wrap);
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 12px;
}

/* Footer newsletter — centre + full-width input/button on mobile (mockup parity) */
@media (max-width: 600px) {
  .nl-form { justify-content: center; }
  .nl-input, .nl-btn { flex: 1 1 100% !important; width: 100% !important; }
  /* Payment row: keep the 5 badges UNIFORM (flex:1 1 0) but cap + centre the group */
  .foot-pay { text-align: center; }
  .foot-pay-row { max-width: 290px; margin-left: auto; margin-right: auto; justify-content: center; }
}

/* ─────────────── 404 / EMPTY STATE ───────────────
   Calm inner-page treatment (same quiet gradient + gold glow as /contact), so
   the marquee, navbar, footer and the WhatsApp FAB all read exactly as they do
   on a real page. Markup: template-parts/global/not-found.php. */
.e404 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 84px)) var(--pad-x) clamp(72px, 10vw, 120px);
  background: linear-gradient(180deg, #16161f 0%, #141420 60%, #0f0f14 100%);
  overflow: hidden;
}
.e404__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 45% at 88% 8%, rgba(211, 148, 7, .09), rgba(211, 148, 7, 0) 62%);
}
.e404__wrap {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px;
}
/* Outlined numeral — the same gold hairline treatment as the Process step
   numbers, so the page belongs to the system instead of inventing a look. */
.e404__code {
  max-width: 100%;
  font-family: var(--font-serif); font-weight: 700; font-style: italic;
  font-size: clamp(5.5rem, 17vw, 11rem); line-height: 1;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--gold); letter-spacing: -.02em;
  /* Playfair italic overshoots its line box; line-height 1 + this margin keep the
     descenders clear of the eyebrow without opening a gap. */
  margin: 0 0 -10px;
}
/* width:100% on every child: a column flex box with align-items:center sizes
   children to max-content, so without it the headline and the buttons refuse to
   wrap and shoot past the viewport on a phone. */
.e404__head { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.e404__eyebrow { text-transform: uppercase; letter-spacing: .32em; font-size: 11px; font-weight: 700; color: var(--gold); }
.e404__heading { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.4rem, 7vw, 4.2rem); margin: 0; line-height: 1.02; }
.e404__body { color: #c1c1cb; font-weight: 300; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; margin: 0 auto; max-width: 52ch; }
.e404__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 4px; width: 100%; }
.e404__cta { font-size: 16px; padding: 17px 38px; min-height: 54px; box-shadow: var(--shadow-gold); }
.e404__alt { font-size: 15px; padding: 16px 34px; min-height: 54px; }

@media (max-width: 600px) {
  .e404__actions { width: 100%; }
  .e404__cta, .e404__alt { flex: 1 1 100%; justify-content: center; }
}

/* ─────────────── GENERIC PAGE / ARCHIVE (page.php, index.php) ─────────────── */
.page-plain {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + clamp(40px, 8vw, 90px)) var(--pad-x) clamp(60px, 10vw, 120px);
  background: linear-gradient(180deg, #16161f 0%, #141420 60%, #0f0f14 100%);
}
.page-plain__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.page-plain__inner > * { max-width: 100%; }
.page-plain__title { font-size: var(--fs-h1); line-height: 1.04; }
.page-plain__content { color: var(--text-2); font-weight: 300; font-size: var(--fs-body); max-width: 60ch; line-height: 1.7; margin: 0; }
.page-plain__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.page-plain__item { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.page-plain__link { font-family: var(--font-serif); font-size: 1.25rem; text-decoration: none; color: var(--text-1); }
@media (hover: hover) { .page-plain__link:hover { color: var(--gold); } }

/* ───────────────────────────── SMS FAB ───────────────────────────── */
/* Was the WhatsApp button. Now opens the Messages app on touch devices and
   falls back to /contact/ on desktop, where sms: links open nothing on Windows.
   Stays green rather than gold on purpose: gold is the buy CTA language, the FAB
   has to read as a separate messaging channel. */
.sms-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: var(--z-fab);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--sms);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-fab);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
@media (hover: hover) { .sms-fab:hover { transform: scale(1.06); } }
.sms-pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--sms);
  animation: smsPulse 2.6s ease-in-out infinite;
}