/*
Theme Name: ELARA Premium
Theme URI: https://elara.us.com
Author: D&W International Trading Inc
Author URI: https://elara.us.com
Description: Independent custom theme for the ELARA Mini Intimate Set website (Home / Product / Wholesale / Contact). Designed pages are editable block by block in the Customizer, and the theme also ships standard WordPress templates for the blog, archives, search, comments, widgets and 404.
Version: 2.5.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Update URI: false
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elara-premium
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, blog, one-column, two-columns, right-sidebar, footer-widgets, editor-style, custom-background, custom-header, custom-colors, full-width-template, rtl-language-support, post-formats, sticky-post, block-styles, wide-blocks
*/

/* ============ FONTS ============ */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/playfair-500.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/playfair-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/playfair-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/playfair-700.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/playfair-800.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/jost-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jost-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/jost-600.woff2") format("woff2");
}

/* ============ TOKENS / RESET ============ */
:root {
  --navy-950: #050e1e;
  --navy-900: #0a1a33;
  --navy-850: #0d2140;
  --navy-800: #12294d;
  --navy-700: #1a355e;
  --gold-200: #f4e3b2;
  --gold-300: #ecd9ac;
  --gold-400: #ddc28a;
  --gold-500: #c9a45c;
  --gold-600: #b08a45;
  --gold-700: #8f6f36;
  --ivory-50: #fdfbf5;
  --ivory-100: #f8f2e5;
  --ivory-200: #efe6d2;
  --ivory-300: #e4d7bd;
  --ink-900: #132441;
  --ink-700: #33415c;
  --ink-500: #5b6474;
  --body-dark: #43506a;
  --body-light: #b9c3d6;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1180px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--body-dark);
  background: var(--ivory-50);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============ TYPOGRAPHY HELPERS ============ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 14px;
}
.on-dark .eyebrow,
.eyebrow.gold {
  color: var(--gold-400);
}
.h-serif {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
}
.h-xl {
  font-size: clamp(40px, 4.9vw, 62px);
}
.h-lg {
  font-size: clamp(30px, 3.5vw, 44px);
}
.h-md {
  font-size: clamp(24px, 2.5vw, 31px);
}
.gold-text {
  color: var(--gold-400);
}
.gold-grad {
  background: linear-gradient(
    178deg,
    #f7e7bb 4%,
    #e9cb8d 38%,
    #cf9f58 78%,
    #b9853f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.italic {
  font-style: italic;
  font-weight: 600;
}
.lead {
  font-size: 18px;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 999px;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(180deg, #f2dda8 0%, #dcb26b 55%, #c69a52 100%);
  color: #16273f;
  box-shadow: 0 8px 24px rgba(201, 164, 92, 0.3);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201, 164, 92, 0.45);
}
.btn-outline {
  background: transparent;
  color: var(--gold-300);
  border: 1px solid rgba(221, 194, 138, 0.65);
}
.btn-outline:hover {
  background: rgba(221, 194, 138, 0.12);
  border-color: var(--gold-300);
}
.btn-arrow::after {
  content: "→";
  font-family: var(--sans);
  letter-spacing: 0;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: linear-gradient(
    180deg,
    rgba(7, 17, 34, 0.98),
    rgba(9, 22, 44, 0.95)
  );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 164, 92, 0.16);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: 0.26em;
  color: var(--gold-400);
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand:hover {
  color: var(--gold-300);
}
.brand .elara-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 46px;
}
.brand .elara-logo-fixed {
  max-height: none;
}
.main-nav {
  margin-left: auto;
  margin-right: auto;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 44px;
}
.main-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8ecf4;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s;
}
.main-nav a:hover {
  color: var(--gold-400);
}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: var(--gold-400);
}
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -3px;
  height: 2px;
  background: var(--gold-400);
}

/* submenus (standard WordPress menus) */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .sub-menu {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  background: var(--navy-900);
  border: 1px solid rgba(201, 164, 92, 0.25);
  box-shadow: 0 18px 36px rgba(3, 9, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 30;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .sub-menu .sub-menu { top: 0; left: 100%; }
.main-nav .sub-menu a {
  display: block;
  padding: 10px 20px;
  letter-spacing: 0.16em;
  font-size: 11.5px;
}
.main-nav .sub-menu a::after { display: none; }

.header-cta {
  margin-left: 0;
  padding: 12px 28px;
  font-size: 11.5px;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gold-300);
  font-size: 26px;
  cursor: pointer;
}

/* ============ HERO (shared) ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0c1f3d 0%, #0a1a33 45%, #071228 100%);
  color: #f2ecdd;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 78px 36px 88px;
  min-height: 560px;
}
.hero-copy .eyebrow {
  margin-bottom: 18px;
}
.hero-title {
  margin-bottom: 22px;
}
.hero-sub {
  color: #dfe5ef;
  max-width: 470px;
  margin-bottom: 16px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-media {
  position: relative;
}
.hero-media .mask-img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(201, 164, 92, 0.25);
}

/* full-bleed photographic hero (matches mockups): photo on the right, feathered into navy left */
.hero-photo {
  background: linear-gradient(155deg, #0a1c38 0%, #081527 45%, #050f21 100%);
}
.hero-photo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 26%;
  z-index: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, 50% 58%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
/* The veil starts at the section's left edge (not at the photograph's) so the
   copy always sits on solid navy. Masking it with the same 26% ramp as the
   photograph left the first half of the headline over bright product shots. */
.hero-photo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(5, 14, 29, 0.96) 0%,
      rgba(5, 14, 29, 0.96) 34%,
      rgba(5, 14, 29, 0.9) 44%,
      rgba(5, 14, 29, 0.72) 48%,
      rgba(5, 14, 29, 0.34) 52%,
      rgba(5, 14, 29, 0.1) 56%,
      rgba(5, 14, 29, 0) 60%
    ),
    linear-gradient(
      180deg,
      rgba(5, 14, 29, 0.28) 0%,
      rgba(5, 14, 29, 0) 22%,
      rgba(5, 14, 29, 0) 78%,
      rgba(5, 14, 29, 0.3) 100%
    );
}
.hero-photo .hero-inner {
  grid-template-columns: 1fr;
  max-width: 1180px;
}
.hero-photo .hero-copy {
  max-width: 560px;
}
.hero-photo .hero-title,
.hero-photo .ph-title {
  font-size: clamp(34px, 3.9vw, 52px);
}

/* Optional cut-out photo on the right of the hero copy. It only exists when a
   "Hero image" is set, so an empty field keeps the original design intact. */
.hero-photo .hero-media {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 38%;
  max-height: 84%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.45));
}

/* An explicit width/height from the design panel wins over the default caps. */
.elara-block[data-imgw] .hero-media {
  max-width: none;
}
.elara-block[data-imgh] .hero-media {
  max-height: none;
}

/* The hero image follows the block's layout direction. */
.elara-block[data-layout="image_left"] .hero-media {
  right: auto;
  left: 36px;
}
.elara-block[data-layout="image_top"] .hero-media {
  position: static;
  transform: none;
  order: -1;
  display: block;
  margin: 0 auto 24px;
  max-width: 68%;
}
.elara-block[data-layout="text_top"] .hero-media {
  position: static;
  transform: none;
  order: 2;
  display: block;
  margin: 24px auto 0;
  max-width: 68%;
}
/* An explicit width still wins in the stacked layouts. */
.elara-block[data-imgw][data-layout] .hero-media {
  max-width: none;
}

@media (max-width: 900px) {
  .hero-photo .hero-media,
  .elara-block[data-imgw] .hero-media,
  .elara-block[data-imgh] .hero-media {
    position: static;
    transform: none;
    display: block;
    margin: 26px auto 0;
    max-width: 100%;
    max-height: none;
  }
}

/* spec list in hero */
.spec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #f0ead9;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 15px;
  margin-top: 6px;
}
.spec-row .dot {
  color: var(--gold-400);
}

/* serif intro line under hero title (home) */
.hero-serif-sub {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 25px;
  line-height: 1.35;
  color: #f5efe0;
  max-width: 440px;
  margin-bottom: 18px;
}

/* ============ DARK SECTION BASE ============ */
.section-dark {
  background:
    radial-gradient(
      1000px 520px at 85% 0%,
      rgba(201, 164, 92, 0.1),
      transparent 55%
    ),
    radial-gradient(
      800px 500px at 8% 100%,
      rgba(201, 164, 92, 0.08),
      transparent 55%
    ),
    linear-gradient(170deg, #0c1f3d, #081527 60%, #0a1a33);
  color: #eef1f7;
  padding: 92px 0;
}
.section-dark .center-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px;
}
.section-dark .center-head .sub {
  color: var(--body-light);
  margin-top: 18px;
  font-size: 16px;
}
.on-dark-sub {
  color: var(--body-light);
}

/* ============ LIGHT SECTION BASE ============ */
.section-light {
  background: var(--ivory-100);
  padding: 92px 0;
  color: var(--ink-900);
}
.section-light-2 {
  background: var(--ivory-50);
  padding: 92px 0;
  color: var(--ink-900);
}
.section-snug { padding: 72px 0; }
.section-tight { padding: 64px 0; }

/* icon circle */
.icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gold-500);
  color: var(--gold-500);
  margin: 0 auto 18px;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(201, 164, 92, 0.12),
    transparent 60%
  );
}
.icon-ring svg {
  width: 32px;
  height: 32px;
}
.icon-ring.small {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.icon-ring.small svg {
  width: 25px;
  height: 25px;
}
.icon-ring.on-gold {
  border-color: var(--gold-600);
  color: var(--gold-600);
}
/* filled pale-gold disc icon (contact right column) */
.icon-disc {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7ecd7;
  color: var(--gold-600);
  margin: 0;
}
.icon-disc svg {
  width: 26px;
  height: 26px;
}

/* ============ DIVIDED 4-COLUMN GRIDS ============ */
.four-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.four-cols .col {
  text-align: center;
  padding: 6px 22px;
}
.four-cols .col + .col {
  border-left: 1px solid rgba(201, 164, 92, 0.28);
}
.four-cols.on-light .col + .col {
  border-left-color: rgba(176, 138, 69, 0.3);
}
.four-cols .col h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 10px;
}
.four-cols .col .col-prod {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--gold-400);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.four-cols .col p {
  color: var(--body-light);
  font-size: 14.5px;
}
.col-title-dark {
  color: #f3eee1 !important;
}
.four-cols.on-light .col h4 {
  color: var(--navy-900);
}
.four-cols.on-light .col p {
  color: var(--body-dark);
}
.icon-plain {
  color: var(--gold-600);
  margin: 0 auto 16px;
  width: 40px;
  height: 40px;
}
.icon-plain svg {
  width: 40px;
  height: 40px;
}

/* ============ HOME: BUILT NOT BUNDLED (light) ============ */
.split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 60px;
  align-items: center;
}
.split h2 {
  margin-bottom: 22px;
}
/* The mockup sets these four labels in sentence case with normal tracking,
   unlike the spaced caps used by the other icon rows. The tighter setting
   also keeps each label to two lines instead of stacking one word per line. */
.split .four-cols .col {
  padding: 6px 14px;
}
.split .four-cols .col h4 {
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 8px;
}
.split .four-cols .col p {
  font-size: 13.5px;
}

/* ============ HOME: WHAT'S INSIDE (dark product row) ============ */
.product-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.product-row .p-item {
  text-align: center;
}
.product-stage {
  position: relative;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side,
    rgba(201, 164, 92, 0.3),
    rgba(201, 164, 92, 0.07) 60%,
    transparent 75%
  );
  filter: blur(6px);
}
.product-stage img {
  position: relative;
  max-height: 210px;
  width: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5));
}
.p-item h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--gold-400);
  margin-bottom: 10px;
}
.p-item p {
  color: var(--body-light);
  font-size: 14.5px;
  max-width: 250px;
  margin: 0 auto;
}

/* ============ HOME: CONFIDENCE (light) ============ */
.confidence {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.fda-card {
  background: linear-gradient(140deg, #f9efd8, #f2e2bd);
  border: 1px solid rgba(176, 138, 69, 0.35);
  border-radius: 14px;
  padding: 30px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: 0 14px 34px rgba(176, 138, 69, 0.16);
  color: var(--navy-900);
}
.fda-card .icon-ring {
  border-color: var(--gold-600);
  color: var(--gold-600);
  margin: 0;
  flex: none;
  width: 56px;
  height: 56px;
  background: transparent;
}
.fda-card .icon-ring svg {
  width: 26px;
  height: 26px;
}
.fda-card p {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--navy-900);
}
.confidence-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--body-dark);
}

/* ============ HOME: PACKAGING (full-bleed dark photo) ============ */
.packaging-hero {
  position: relative;
  overflow: hidden;
  background: #060f22;
  color: #eef1f7;
}
.packaging-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pack-img);
  background-size: cover;
  background-position: 50% 62%;
}
.packaging-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 12, 26, 0.18) 0%,
      rgba(4, 12, 26, 0.42) 30%,
      rgba(4, 12, 26, 0.88) 55%,
      rgba(3, 10, 23, 0.97) 78%
    ),
    linear-gradient(
      180deg,
      rgba(4, 12, 26, 0.22) 0%,
      rgba(4, 12, 26, 0) 30%,
      rgba(3, 10, 23, 0.55) 72%,
      rgba(3, 10, 23, 0.95) 100%
    );
}
.packaging-hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 96px;
  padding-bottom: 96px;
}
.packaging-head {
  max-width: 560px;
  margin-left: auto;
}
.packaging-head h2 {
  margin-bottom: 18px;
}
.packaging-head p {
  color: #dfe5ef;
  font-size: 15.5px;
}
.pack-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
  /* The four points belong to the right-hand column, left-aligned with the
     heading as in the mockup; a full-width list ran underneath the photograph
     and hid the first icons. */
  margin-left: auto;
  max-width: 560px;
}
.pack-list .item h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #f3eee1;
  margin-bottom: 6px;
}
.pack-list .item p {
  font-size: 13.5px;
  color: var(--body-light);
}
.pack-list .icon-plain {
  margin: 0 0 14px;
  color: var(--gold-400);
  width: 34px;
  height: 34px;
}
.pack-list .icon-plain svg {
  width: 34px;
  height: 34px;
}
/* Shared rows keep the four descriptions on one baseline when a label such as
   "Deep Navy & Champagne Gold" wraps to three lines. Desktop only: once the
   grid folds to two columns the shared rows only add vertical gaps. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .pack-list {
      grid-template-rows: auto auto auto;
    }
    .pack-list .item {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      align-content: start;
    }
  }
}

/* ============ HOME: BRAND STATEMENT (light split) ============ */
.brand-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.brand-split h3 {
  color: var(--navy-900);
}
.brand-tagline {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--navy-900);
  font-size: 16px;
  margin-top: 26px;
}
.brand-split .right p {
  font-size: 15.5px;
}

/* ============ HOME: WHOLESALE CTA (dark) ============ */
.cta-band {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr auto;
  gap: 54px;
  align-items: center;
}
.cta-band .checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dfe5ef;
  font-size: 14.5px;
  padding: 7px 0;
}
.check-badge {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--gold-500);
  color: var(--gold-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* ============ PRODUCT PAGE ============ */
.ph-title {
  letter-spacing: 0.01em;
}
.ph-tagline {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--gold-400);
  font-size: 27px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.ph-pleasure {
  color: #f0ead9;
  letter-spacing: 0.03em;
  font-size: 19px;
  font-weight: 400;
}

/* built as one product */
.built-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: center;
}
.built-grid h2 {
  color: var(--navy-900);
}
.built-grid .gold-caps {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 20px;
}
.icon-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.icon-quad .q {
  text-align: center;
  padding: 6px 16px;
}
.icon-quad .q + .q {
  border-left: 1px solid rgba(176, 138, 69, 0.3);
}
.icon-quad h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 0 0 6px;
}
.icon-quad p {
  font-size: 13px;
  color: var(--body-dark);
}

/* component columns (full-width dark band, no card chrome) */
.comp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}
.comp-card {
  padding: 8px 28px 0;
  display: flex;
  flex-direction: column;
}
.comp-card + .comp-card {
  border-left: 1px solid rgba(201, 164, 92, 0.22);
}
.comp-card:first-child {
  padding-left: 0;
}
.comp-card:last-child {
  padding-right: 0;
}
.comp-card .num-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.comp-card .num {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  color: var(--gold-400);
}
.comp-card .num-row .bar {
  width: 34px;
  height: 1px;
  background: rgba(201, 164, 92, 0.55);
}
.comp-card .num-row .lbl {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.comp-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-300);
  line-height: 1.3;
  margin-bottom: 18px;
}
.comp-card .c-img {
  height: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 18px;
}
.comp-card .c-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side,
    rgba(201, 164, 92, 0.24),
    transparent 72%
  );
}
.comp-card .c-img img {
  position: relative;
  max-height: 225px;
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}
.comp-card p.desc {
  font-size: 14px;
  color: #d5dce8;
  margin-bottom: 18px;
}
.feat-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 13.5px;
  color: #dfe5ef;
}
.feat-list .fi {
  color: var(--gold-400);
  flex: none;
  margin-top: 2px;
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feat-list .fi svg {
  width: 19px;
  height: 19px;
}
.feat-list b {
  display: block;
  font-weight: 500;
  color: var(--gold-300);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.important-box {
  margin-top: auto;
  background: rgba(201, 164, 92, 0.07);
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: #e8dfc8;
}
.important-box b {
  display: block;
  letter-spacing: 0.2em;
  color: var(--gold-400);
  font-size: 11.5px;
  margin-bottom: 6px;
}

/* simple control */
.control-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: center;
}
.control-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.scene-img {
  border-radius: 14px;
  border: 1px solid rgba(201, 164, 92, 0.35);
  box-shadow: 0 24px 48px rgba(19, 36, 65, 0.18);
}
.control-head {
  text-align: center;
  margin-bottom: 44px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.step {
  text-align: center;
  padding: 10px 26px;
}
.step + .step {
  border-left: 1px solid rgba(176, 138, 69, 0.3);
}
.step .step-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: var(--navy-900);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(19, 36, 65, 0.25);
}
.step .step-icon svg {
  width: 27px;
  height: 27px;
}
.step h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: 6px;
}
.step p {
  font-size: 14px;
}
/* Keep the icon, the label and the description on shared rows across the
   three steps, so a label that wraps to four lines no longer pushes its
   description out of line with the other two. Desktop only: once the steps
   stack, shared rows would only add space between them. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .steps {
      grid-template-rows: auto auto auto;
    }
    .step {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      align-content: start;
      justify-items: center;
    }
  }
}

/* single use band */
.single-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}
.single-band .on-dark-sub b {
  color: #f3eee1;
  font-weight: 500;
}
.instructions-card {
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(201, 164, 92, 0.35);
  border-radius: 16px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.instructions-card .row {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #dfe5ef;
  font-size: 14.5px;
}
.instructions-card .icon-ring {
  margin: 0;
  flex: none;
  width: 62px;
  height: 62px;
}
.instructions-card .icon-ring svg {
  width: 27px;
  height: 27px;
}
.instructions-card .btn {
  justify-content: center;
}

/* ============ WHOLESALE PAGE ============ */
.ws-standard {
  display: grid;
  grid-template-columns: 1.25fr 0.72fr 0.55fr;
  gap: 54px;
  align-items: center;
}
.ws-standard .stage {
  display: flex;
  justify-content: center;
}
.ws-standard .stage img {
  max-height: 330px;
  max-width: 260px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(19, 36, 65, 0.16);
}
.ws-standard .right .h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
  line-height: 1.5;
  margin-bottom: 18px;
}
.ws-standard .right .gold-rule {
  margin: 0;
}

.ws-headed {
  text-align: center;
}
.ws-headed .head-row {
  display: flex;
  align-items: center;
  gap: 26px;
  justify-content: center;
  margin-bottom: 16px;
}
.ws-headed .head-row::before,
.ws-headed .head-row::after {
  content: "";
  height: 1px;
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 92, 0.65));
}
.ws-headed .head-row::after {
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.65), transparent);
}
@media (max-width: 600px) {
  .ws-headed .head-row::before,
  .ws-headed .head-row::after {
    display: none;
  }
}
.ws-headed .sub {
  color: var(--body-light);
  font-size: 16px;
  margin-bottom: 54px;
}
.strategy-vib {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform: rotate(35deg);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  margin: 13px auto;
}

.retail-cols .col h4 {
  color: var(--navy-900);
}
.retail-cols .col p {
  color: var(--body-dark);
}

/* MSRP band — full-bleed photo */
.msrp {
  position: relative;
  overflow: hidden;
  background: #050e1f;
  padding: 100px 0;
}
.msrp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--msrp-img);
  background-size: cover;
  background-position: var(--msrp-pos, 70% 45%);
}
.msrp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(3, 10, 23, 0.97) 0%,
    rgba(3, 10, 23, 0.93) 30%,
    rgba(4, 12, 26, 0.68) 48%,
    rgba(4, 12, 26, 0.25) 68%,
    rgba(4, 12, 26, 0.05) 84%,
    rgba(3, 10, 23, 0.3) 100%
  );
}
.msrp .wrap {
  position: relative;
  z-index: 2;
}
.msrp-price {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(58px, 6.6vw, 86px);
  line-height: 1;
  margin: 12px 0 20px;
}
.msrp .gold-rule {
  margin: 0 0 20px;
}
.msrp .on-dark-sub {
  font-size: 16.5px;
  color: #e6ebf3;
}

/* support cards — borderless on cream */
.support-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.support-card {
  text-align: center;
}
.support-card .s-img {
  height: 210px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 14px 30px rgba(19, 36, 65, 0.12);
}
.support-card .s-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.support-card:hover .s-img img {
  transform: scale(1.05);
}
.support-card h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin: 0 0 8px;
}
.support-card p {
  font-size: 14px;
  color: var(--body-dark);
  padding: 0 8px;
}

/* confidence strip (light, wholesale) */
.conf-strip {
  display: grid;
  grid-template-columns: auto auto 1fr 1.1fr;
  gap: 44px;
  align-items: center;
}
.conf-strip .icon-ring {
  margin: 0;
  width: 88px;
  height: 88px;
}
.conf-strip .icon-ring svg {
  width: 40px;
  height: 40px;
}
.conf-strip .vdiv {
  width: 1px;
  height: 100px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(176, 138, 69, 0.5),
    transparent
  );
  justify-self: center;
}
.conf-strip h3 {
  color: var(--navy-900);
  margin-bottom: 10px;
  font-size: clamp(22px, 2.2vw, 26px);
}
.conf-strip .made {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--navy-900);
  font-size: 15.5px;
}
.conf-strip .body p {
  font-size: 14.5px;
}

/* wholesale final CTA */
.cta-duo {
  display: grid;
  grid-template-columns: 1.08fr auto 0.92fr;
  gap: 54px;
  align-items: center;
}
.cta-duo .vdiv {
  width: 1px;
  height: 110px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 164, 92, 0.5),
    transparent
  );
}
.cta-duo .right .btn {
  margin-bottom: 18px;
}
.cta-duo .right p {
  color: #dfe5ef;
  font-size: 14.5px;
  max-width: 360px;
}

/* ============ CONTACT PAGE ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.08fr auto 0.92fr;
  gap: 0;
  align-items: start;
}
.contact-grid .vdiv {
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(176, 138, 69, 0.45) 12%,
    rgba(176, 138, 69, 0.45) 88%,
    transparent
  );
  margin: 10px 48px 0;
}
.contact-form {
  padding-right: 8px;
}
.contact-form h3,
.contact-info h3 {
  color: var(--navy-900);
  margin-bottom: 14px;
}
.contact-form .intro {
  margin-bottom: 30px;
  font-size: 15.5px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  margin-bottom: 18px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-900);
  background: #fdf8ee;
  border: 1px solid #ddd2b8;
  border-radius: 10px;
  padding: 14px 18px;
  outline: none;
  transition:
    border 0.2s,
    box-shadow 0.2s;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #6d7a90;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18);
}
.form-field textarea {
  min-height: 150px;
  resize: vertical;
}
.form-success {
  background: #e8f0e2;
  border: 1px solid #9dbd8d;
  color: #2f4d22;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14.5px;
}
.contact-info {
  padding-left: 8px;
}
.contact-info .help-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 0;
}
.contact-info .help-list h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy-900);
}
.contact-info .help-list p {
  font-size: 13.5px;
}
.company-block {
  margin-top: 26px;
  border-top: 1px solid #ddd2b8;
  padding-top: 26px;
}
.company-block .eyebrow {
  margin-bottom: 10px;
}
.company-block .co-name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 32px;
  color: var(--navy-900);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.company-block li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  padding: 6px 0;
  color: var(--body-dark);
}
.company-block .ci {
  color: var(--ink-900);
  flex: none;
  margin-top: 3px;
}
.company-block .ci svg {
  width: 17px;
  height: 17px;
}

/* respond band */
.respond-band {
  text-align: left;
}
.respond-inner {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
.respond-inner .icon-ring {
  margin: 0;
  flex: none;
  width: 92px;
  height: 92px;
}
.respond-inner .icon-ring svg {
  width: 42px;
  height: 42px;
}
.respond-inner .vdiv {
  width: 1px;
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 164, 92, 0.5),
    transparent
  );
  flex: none;
}
.respond-inner h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 2.3vw, 27px);
  color: var(--gold-400);
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.respond-inner p {
  color: var(--body-light);
  font-size: 15px;
  max-width: 460px;
}

/* ============ FOOTER ============ */
.site-footer {
  background: linear-gradient(180deg, #0a1a33, #071228);
  color: #c7d0df;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(201, 164, 92, 0.16);
  flex-wrap: wrap;
}
.footer-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.26em;
  color: var(--gold-400);
  display: inline-flex;
  align-items: center;
}
.footer-brand:hover {
  color: var(--gold-300);
}
.footer-brand .elara-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 40px;
}
.footer-brand .elara-logo-fixed {
  max-height: none;
}
.footer-brand.has-mark {
  letter-spacing: 0;
}
.footer-nav {
  display: flex;
  gap: 36px;
  margin: 0 auto;
}
.footer-nav a {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #dbe1ec;
}
.footer-nav a:hover,
.footer-nav a.active {
  color: var(--gold-400);
}
.footer-nav a.active {
  border-bottom: 2px solid var(--gold-400);
  padding-bottom: 3px;
}
.footer-nav .footer-menu {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav .footer-menu li {
  margin: 0;
}
.footer-nav .footer-menu .current-menu-item > a {
  color: var(--gold-400);
  border-bottom: 2px solid var(--gold-400);
  padding-bottom: 3px;
}
.footer-vdiv {
  width: 1px;
  height: 26px;
  background: rgba(201, 164, 92, 0.35);
}
.footer-legal {
  display: flex;
  gap: 30px;
}
.footer-legal a {
  font-size: 12.5px;
  color: #9aa6ba;
}
.footer-legal a:hover {
  color: var(--gold-300);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 26px;
  font-size: 12.5px;
  color: #8b97ac;
}

/* ============ MISCELLANEOUS ============ */
.gold-rule {
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  margin: 24px 0;
}
.center .gold-rule {
  margin: 22px auto;
}

/* ============ RESPONSIVE ============ */
/*
 * Three tiers:
 *   1080px — multi-column layouts stack. Every stacked track becomes
 *            minmax(0, 1fr) and its items get min-width: 0, because a grid
 *            item defaults to min-width: auto: one long word or a
 *            non-wrapping button used to widen the column past the viewport
 *            (the product page grew to 443px inside a 390px screen).
 *   1023px — the header collapses to the menu button before the nav and the
 *            header button start fighting for the same row (they used to
 *            overflow the right edge between 721px and ~950px).
 *    720px — single column everywhere, tighter card padding, and full-bleed
 *            photo blocks switch from a horizontal feather (made for a wide
 *            screen) to a vertical one so copy never sits on busy imagery.
 */

/* ---- tier 1: stack the multi-column layouts ---- */
@media (max-width: 1080px) {
  .four-cols,
  .product-row,
  .comp-cards,
  .support-cards,
  .icon-quad,
  .pack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .four-cols .col,
  .icon-quad .q,
  .comp-card {
    border-left: none !important;
  }

  .split,
  .built-grid,
  .brand-split,
  .control-grid,
  .single-band,
  .contact-grid,
  .ws-standard,
  .confidence,
  .cta-band,
  .cta-duo,
  .steps,
  .conf-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .split,
  .built-grid,
  .brand-split,
  .control-grid,
  .single-band,
  .contact-grid,
  .ws-standard,
  .confidence {
    gap: 44px;
  }
  .cta-band,
  .cta-duo {
    gap: 30px;
  }
  .steps,
  .conf-strip {
    gap: 26px;
  }

  :is(
      .split,
      .built-grid,
      .brand-split,
      .control-grid,
      .single-band,
      .contact-grid,
      .ws-standard,
      .confidence,
      .cta-band,
      .cta-duo,
      .steps,
      .conf-strip,
      .four-cols,
      .product-row,
      .comp-cards,
      .support-cards,
      .icon-quad,
      .pack-list
    )
    > * {
    min-width: 0;
  }

  .contact-grid .vdiv,
  .conf-strip .vdiv,
  .cta-duo .vdiv,
  .respond-inner .vdiv {
    display: none;
  }
  .conf-strip .icon-ring {
    margin-left: auto;
    margin-right: auto;
  }
  .contact-info {
    padding-left: 0;
  }
  .ws-standard .right {
    text-align: left;
  }
  .step {
    border-left: none !important;
  }
  .packaging-head {
    margin-left: 0;
  }
  .pack-list {
    margin-left: 0;
    max-width: none;
  }
  .respond-inner {
    flex-direction: column;
    text-align: center;
  }

  /* hero: one column, copy on top, photograph still behind it */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 52px;
    align-items: start;
  }
  .hero-media {
    max-width: 560px;
  }

  /* The hero photo was feathered left-to-right for a wide screen; on one
     column the copy sits on top of it, so the veil becomes vertical: nearly
     solid navy behind the text, clearing towards the bottom edge. */
  .hero-photo::before {
    left: 0;
    right: 0;
    background-position: var(--hero-pos, 50% 68%);
    -webkit-mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      #000 46%
    );
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, #000 46%);
  }
  .hero-photo::after {
    left: 0;
    right: 0;
    background: linear-gradient(
      180deg,
      rgba(5, 14, 29, 0.97) 0%,
      rgba(5, 14, 29, 0.96) 50%,
      rgba(5, 14, 29, 0.9) 72%,
      rgba(5, 14, 29, 0.6) 87%,
      rgba(5, 14, 29, 0.3) 100%
    );
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* same reason for the packaging and MSRP photo bands. The packaging copy
     now stacks into the lower half of the band, so the veil has to stay
     dense to the bottom edge instead of clearing behind the last row. */
  .packaging-hero::after {
    background: linear-gradient(
      180deg,
      rgba(4, 12, 26, 0.88) 0%,
      rgba(4, 12, 26, 0.9) 56%,
      rgba(4, 12, 26, 0.88) 78%,
      rgba(4, 12, 26, 0.8) 100%
    );
  }
  .msrp::after {
    background:
      linear-gradient(
        180deg,
        rgba(3, 10, 23, 0.8) 0%,
        rgba(3, 10, 23, 0.92) 52%,
        rgba(3, 10, 23, 0.86) 100%
      ),
      linear-gradient(
        90deg,
        rgba(3, 10, 23, 0.85) 0%,
        rgba(4, 12, 26, 0.55) 62%,
        rgba(4, 12, 26, 0.28) 100%
      );
  }
}

/* ---- tier 2: header collapses before the nav can crowd the button ---- */
@media (max-width: 1023px) {
  .header-inner {
    gap: 18px;
    padding: 0 24px;
  }
  .brand {
    font-size: 24px;
    letter-spacing: 0.2em;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
    line-height: 1;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #0a1a33;
    padding: 18px 24px 26px;
    border-bottom: 1px solid rgba(201, 164, 92, 0.25);
    box-shadow: 0 24px 44px rgba(3, 9, 20, 0.55);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .main-nav.open {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .main-nav a {
    display: block;
    padding: 12px 0;
    font-size: 12.5px;
  }
  .main-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .main-nav .sub-menu .sub-menu { padding-left: 16px; }
  .main-nav .sub-menu a { padding: 8px 0; }
  .main-nav .current-menu-item > a::after,
  .main-nav .current_page_item > a::after {
    left: 0;
    right: auto;
    width: 34px;
    bottom: 8px;
  }
  .header-cta {
    padding: 11px 20px;
    font-size: 11px;
  }
}

/* ---- tier 3: phones ---- */
@media (max-width: 720px) {
  .wrap {
    padding: 0 20px;
  }
  .section-dark,
  .section-light,
  .section-light-2,
  .section-snug,
  .section-tight {
    padding: 56px 0;
  }
  .section-dark .center-head {
    margin-bottom: 40px;
  }
  .header-cta {
    display: none;
  }

  .four-cols,
  .product-row,
  .comp-cards,
  .support-cards,
  .icon-quad,
  .pack-list,
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .four-cols .col + .col {
    border-top: 1px solid rgba(201, 164, 92, 0.22);
    margin-top: 26px;
    padding-top: 26px;
  }
  .four-cols.on-light .col + .col {
    border-top-color: rgba(176, 138, 69, 0.24);
  }
  .comp-card {
    padding-left: 0;
    padding-right: 0;
  }
  .comp-card + .comp-card {
    border-left: none;
    border-top: 1px solid rgba(201, 164, 92, 0.22);
    margin-top: 26px;
    padding-top: 26px;
  }

  .hero-inner {
    padding: 44px 20px 56px;
    min-height: 0;
  }
  .hero-actions {
    gap: 12px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Slightly more room between the wrapped spec lines on a phone. */
  .spec-row {
    row-gap: 6px;
  }

  /* Phones: the photograph moves into a band at the bottom of the hero, and
     the band is reserved with padding, so copy and photo cannot overlap
     whatever the length of the text is. */
  .hero-photo .hero-inner {
    padding-bottom: 320px;
  }
  .hero-photo::before,
  .hero-photo::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
  .hero-photo::before {
    background-position: var(--hero-pos, 50% 72%);
  }
  .hero-photo::after {
    background: linear-gradient(
      180deg,
      rgba(5, 14, 29, 0.32) 0%,
      rgba(5, 14, 29, 0) 44%,
      rgba(5, 14, 29, 0.38) 100%
    );
  }
  /* A hero image would sit exactly where the band is: hide the band instead. */
  .hero-photo:has(.hero-media)::before,
  .hero-photo:has(.hero-media)::after {
    display: none;
  }
  .hero-photo:has(.hero-media) .hero-inner {
    padding-bottom: 56px;
  }

  .packaging-hero .wrap {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .packaging-hero::before {
    background-position: 50% 58%;
  }
  .msrp {
    padding: 64px 0;
  }
  .msrp::before {
    background-position: var(--msrp-pos, 62% 58%);
  }

  .btn {
    white-space: normal;
    text-align: center;
    padding: 14px 26px;
  }
  .instructions-card {
    padding: 22px 18px;
    gap: 16px;
  }
  .instructions-card .row {
    align-items: flex-start;
    gap: 14px;
  }
  .instructions-card .icon-ring {
    width: 52px;
    height: 52px;
  }
  .instructions-card .icon-ring svg {
    width: 23px;
    height: 23px;
  }

  .footer-top {
    gap: 22px;
    padding: 30px 0;
  }
  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    margin: 4px auto 0;
  }
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 22px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .footer-vdiv {
    display: none;
  }

  .contact-info {
    padding-top: 8px;
  }
  .company-block .co-name {
    font-size: 26px;
  }
  .respond-inner {
    gap: 22px;
  }
  .respond-inner .icon-ring {
    width: 74px;
    height: 74px;
  }
  .respond-inner .icon-ring svg {
    width: 34px;
    height: 34px;
  }
}

/* ---- small phones ---- */
@media (max-width: 400px) {
  .wrap,
  .hero-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header-inner {
    padding: 0 16px;
  }
  .brand {
    font-size: 21px;
    letter-spacing: 0.16em;
  }
  .hero-photo .hero-inner {
    padding-bottom: 290px;
  }
  .hero-photo::before,
  .hero-photo::after {
    height: 270px;
  }
  .main-nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============ MODULE DESIGN LAYER ============ */
/*
 * Every content block can carry its own colour scheme, layout, width,
 * typography and image styling. The renderer puts the values on that block's
 * own <section> as custom properties + data attributes; these rules only fire
 * when the matching attribute exists, so an untouched block keeps the original
 * design and one block can never affect another.
 */

/* ---- palette ---- */
.elara-block[data-scheme] {
  background: var(--eb-bg) !important;
}

.elara-block[data-scheme] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--eb-heading) !important;
  -webkit-text-fill-color: var(--eb-heading) !important;
  background-image: none !important;
}

.elara-block[data-scheme]
  :is(p, li, blockquote, figcaption, .desc, .important-box, .hero-sub) {
  color: var(--eb-text) !important;
}

.elara-block[data-scheme]
  :is(
    .eyebrow,
    .sub,
    .hero-serif-sub,
    .ph-tagline,
    .ph-pleasure,
    .lead,
    .on-dark-sub,
    .brand-tagline,
    .h3,
    .made,
    .col-prod,
    .msrp-price,
    .gold-caps,
    .spec-row
  ) {
  color: var(--eb-subtitle) !important;
  -webkit-text-fill-color: var(--eb-subtitle) !important;
  background-image: none !important;
}

.elara-block[data-scheme] a:not(.btn) {
  color: var(--eb-link) !important;
}
.elara-block[data-scheme] a:not(.btn):hover,
.elara-block[data-scheme] a:not(.btn):focus {
  color: var(--eb-link-hover) !important;
}

.elara-block[data-scheme] .btn {
  background: var(--eb-btn-bg) !important;
  color: var(--eb-btn-text) !important;
  border-color: var(--eb-btn-bg) !important;
  box-shadow: none !important;
}

/* ---- text style ---- */
.elara-block[data-tbg] {
  background: var(--eb-tbg) !important;
}

.elara-block[data-tc]
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    .eyebrow,
    .sub,
    .h3,
    .made,
    .col-prod,
    .spec-row,
    .on-dark-sub,
    .gold-caps,
    .hero-sub
  ) {
  color: var(--eb-tc) !important;
  -webkit-text-fill-color: var(--eb-tc) !important;
  background-image: none !important;
}

.elara-block[data-fs] :is(p, li, .desc, .intro, .on-dark-sub) {
  font-size: var(--eb-fs) !important;
}
.elara-block[data-fw] :is(h1, h2, h3, h4, h5, h6, p, li, .eyebrow, .sub, .h3) {
  font-weight: var(--eb-fw) !important;
}
.elara-block[data-tt] :is(h1, h2, h3, h4, h5, h6, p, li, .eyebrow, .sub, .h3) {
  text-transform: var(--eb-tt) !important;
}
.elara-block[data-ls] :is(h1, h2, h3, h4, h5, h6, p, li, .eyebrow, .sub, .h3) {
  letter-spacing: var(--eb-ls) !important;
}

/* ---- content width ---- */
.elara-block[data-width="full"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 100%;
}
.elara-block[data-width="xl"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 1440px;
}
.elara-block[data-width="lg"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 1200px;
}
.elara-block[data-width="md"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 1024px;
}
.elara-block[data-width="sm"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 820px;
}
.elara-block[data-width="xs"] :is(.wrap, .hero-inner, .respond-inner) {
  max-width: 640px;
}

/* ---- layout direction ---- */
.elara-block[data-layout="image_right"]
  :is(
    .split,
    .built-grid,
    .brand-split,
    .control-grid,
    .single-band,
    .ws-standard,
    .cta-band,
    .cta-duo,
    .contact-grid,
    .respond-inner
  ) {
  direction: rtl;
}
.elara-block[data-layout="image_right"]
  :is(
    .split,
    .built-grid,
    .brand-split,
    .control-grid,
    .single-band,
    .ws-standard,
    .cta-band,
    .cta-duo,
    .contact-grid,
    .respond-inner
  )
  > * {
  direction: ltr;
}

.elara-block[data-layout="image_top"]
  :is(
    .split,
    .built-grid,
    .brand-split,
    .control-grid,
    .single-band,
    .ws-standard,
    .cta-band,
    .cta-duo
  ),
.elara-block[data-layout="text_top"]
  :is(
    .split,
    .built-grid,
    .brand-split,
    .control-grid,
    .single-band,
    .ws-standard,
    .cta-band,
    .cta-duo
  ) {
  grid-template-columns: 1fr !important;
  gap: var(--eb-gap, 40px) !important;
}

.elara-block[data-layout="image_top"]
  :is(
    .control-stage,
    .stage,
    .product-stage,
    .c-img,
    .s-img,
    .strategy-vib,
    .icon-quad,
    .four-cols,
    .image-quad
  ) {
  order: -1;
}
.elara-block[data-layout="text_top"]
  :is(
    .control-stage,
    .stage,
    .product-stage,
    .c-img,
    .s-img,
    .strategy-vib,
    .icon-quad,
    .four-cols
  ) {
  order: 2;
}

/* ---- image style ---- */
.elara-block[data-imgw] img {
  width: var(--eb-img-w) !important;
  max-width: 100%;
}
.elara-block[data-imgh] img {
  height: var(--eb-img-h) !important;
  object-fit: cover;
}
.elara-block[data-imgpos] img {
  object-position: var(--eb-img-pos) !important;
}

/* Photo-band blocks have no <img>: the picture is the ::before background of
   the block itself, so the selector must match the block, not a descendant. */
.elara-block[data-imgpos]:is(.hero-photo, .packaging-hero, .msrp)::before,
.elara-block[data-imgpos] :is(.hero-photo, .packaging-hero, .msrp)::before {
  background-position: var(--eb-img-pos) !important;
}

/* Radius and filter apply to the photo layer itself on those blocks. */
.elara-block[data-radius]:is(.hero-photo, .packaging-hero, .msrp)::before,
.elara-block[data-radius] :is(.hero-photo, .packaging-hero, .msrp)::before {
  border-radius: var(--eb-img-radius) !important;
}
.elara-block[data-filter]:is(.hero-photo, .packaging-hero, .msrp)::before,
.elara-block[data-filter] :is(.hero-photo, .packaging-hero, .msrp)::before {
  filter: var(--eb-img-filter) !important;
}
.elara-block[data-radius]
  :is(img, .product-stage, .c-img, .s-img, .control-stage, .stage) {
  border-radius: var(--eb-img-radius) !important;
}
.elara-block[data-filter] img {
  filter: var(--eb-img-filter) !important;
}

.elara-block[data-gap]
  :is(
    .split,
    .control-grid,
    .four-cols,
    .product-row,
    .support-cards,
    .comp-cards,
    .built-grid,
    .ws-standard,
    .brand-split,
    .cta-band,
    .cta-duo,
    .single-band,
    .conf-strip,
    .respond-inner,
    .icon-quad,
    .steps,
    .pack-list,
    .contact-grid,
    .hero-inner
  ) {
  gap: var(--eb-gap) !important;
}

/* In the stacked hero layouts the hero image is a grid item, so the gap above
   replaces its default margin instead of adding to it. */
.elara-block[data-gap] .hero-media {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Custom uploaded icon */
.elara-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.icon-ring .elara-icon-svg {
  width: 32px;
  height: 32px;
}

/* ---- element-level overrides (one repeater item) ----
   Every rule below only runs when the item carries the matching data
   attribute, which is emitted only for values the editor actually set. An
   item that was never styled therefore keeps inheriting the module design,
   and a styled item wins over it through a higher-specificity !important. */
.elara-block-feature_cols .col[data-ei-fs] .col-title-dark {
  font-size: var(--ei-fs) !important;
}
.elara-block-feature_cols .col[data-ei-bs] :is(p, .col-prod) {
  font-size: var(--ei-bs) !important;
}
.elara-block-feature_cols .col[data-ei-fw] :is(.col-title-dark, p) {
  font-weight: var(--ei-fw) !important;
}
.elara-block-feature_cols .col[data-ei-tt] :is(.col-title-dark, p) {
  text-transform: var(--ei-tt) !important;
}
.elara-block-feature_cols .col[data-ei-ls] :is(.col-title-dark, p) {
  letter-spacing: var(--ei-ls) !important;
}
.elara-block-feature_cols .col[data-ei-tc] :is(.col-title-dark, p) {
  color: var(--ei-tc) !important;
  -webkit-text-fill-color: var(--ei-tc) !important;
  background-image: none !important;
}
.elara-block-feature_cols
  .col[data-ei-is]
  .icon-ring
  :is(svg, .elara-icon-img) {
  width: var(--ei-is) !important;
  height: var(--ei-is) !important;
  object-fit: contain;
}
.elara-block-feature_cols .col[data-ei-ic] .icon-ring {
  color: var(--ei-ic) !important;
  border-color: var(--ei-ic) !important;
}

/* Full-bleed photo blocks: direction moves the copy block, since the image
   itself is a background layer rather than a pane. */
.elara-block[data-layout="image_left"] .hero-inner {
  justify-items: end;
}
.elara-block[data-layout="image_top"] .hero-inner {
  align-items: end;
}
.elara-block[data-layout="text_top"] .hero-inner {
  align-items: start;
}

/* ============ STANDARD WORDPRESS CONTENT ============ */
/*
 * Blog posts, archives, search, comments, pagination, widgets and 404 all use
 * the same tokens as the designed pages, so core content sits inside the
 * ELARA look without a second stylesheet.
 */

/* accessibility helpers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--ivory-50);
  border-radius: 3px;
  clip: auto !important;
  clip-path: none;
  color: var(--navy-900);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 16px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 16px;
  width: auto;
  z-index: 100000;
}
.skip-link.screen-reader-text:focus { left: 16px; }

/* shared column width for article layouts */
.entry-narrow {
  max-width: 820px;
}

/* headings inside core content keep the theme type */
.entry-content {
  color: var(--body-dark);
}
.entry-content > * + * {
  margin-top: 1.1em;
}
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-900);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.entry-content h2 {
  font-size: clamp(24px, 2.5vw, 31px);
}
.entry-content h3 {
  font-size: clamp(20px, 2vw, 25px);
}
.entry-content h4 {
  font-size: 19px;
}
.entry-content :is(ul, ol) {
  margin-left: 1.4em;
}
.entry-content ul {
  list-style: disc;
}
.entry-content ol {
  list-style: decimal;
}
.entry-content li + li {
  margin-top: 0.35em;
}
.entry-content a {
  color: var(--gold-600);
  border-bottom: 1px solid rgba(176, 138, 69, 0.35);
}
.entry-content a:hover {
  color: var(--gold-700);
}
.entry-content :is(blockquote, .wp-block-quote) {
  border-left: 3px solid var(--gold-500);
  padding: 6px 0 6px 22px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-700);
}
.entry-content img,
.entry-content .wp-block-image img {
  border-radius: 4px;
}
.entry-content :is(.wp-block-table, table) {
  width: 100%;
  border-collapse: collapse;
}
.entry-content :is(td, th) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ivory-300);
  text-align: left;
}
.entry-content th {
  font-weight: 600;
  color: var(--navy-900);
}
.entry-content :is(.alignwide, .alignfull) {
  margin-left: auto;
  margin-right: auto;
}
.entry-content .alignwide {
  max-width: 1080px;
}
.entry-content .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* full-width page template */
.entry-featured-wrap {
  width: 100%;
}
.entry-featured-full {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.entry-full {
  max-width: 100%;
}

.entry-pages {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.entry-pages a,
.entry-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--ivory-300);
  font-size: 13px;
  color: var(--ink-700);
}

/* single post */
.entry-title {
  color: var(--navy-900);
}
.entry-meta {
  font-size: 13.5px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.entry-meta a {
  color: var(--gold-600);
}
.entry-meta-sep {
  margin: 0 8px;
  color: var(--gold-500);
}
.entry-featured {
  padding-top: 40px;
  background: var(--ivory-50);
}
.entry-featured img {
  border-radius: 4px;
  width: 100%;
}
.entry-body {
  padding-top: 60px;
  padding-bottom: 80px;
}
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}
.entry-tags a {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  border: 1px solid var(--ivory-300);
  padding: 6px 12px;
}
.entry-tags a:hover {
  border-color: var(--gold-500);
}
.entry-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--ivory-300);
  font-size: 13.5px;
}
.entry-nav a {
  color: var(--ink-700);
}
.entry-nav a:hover {
  color: var(--gold-600);
}
.entry-nav-next {
  margin-left: auto;
  text-align: right;
}

/* listings */
.archive-header {
  max-width: 760px;
  margin-bottom: 46px;
}
.archive-header .h-serif {
  color: var(--navy-900);
}
.archive-desc {
  color: var(--ink-500);
  font-size: 15px;
  margin-top: 6px;
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 34px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ivory-200);
  overflow: hidden;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.post-card:hover {
  box-shadow: 0 18px 44px rgba(10, 26, 51, 0.1);
  transform: translateY(-2px);
}
.post-card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.post-card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-cats {
  margin-bottom: 8px;
}
.post-card-cats a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.post-card-cats a:hover {
  color: var(--gold-800);
}
.post-card-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 10px;
}
.post-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
}
.post-card-title a {
  color: var(--navy-900);
}
.post-card-title a:hover {
  color: var(--gold-700);
}
.post-card-excerpt {
  color: var(--body-dark);
  font-size: 14.5px;
  margin-top: 10px;
}
.post-card-more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.post-card-more:hover {
  color: var(--gold-700);
}
.empty-state {
  color: var(--ink-500);
}

/* pagination */
.elara-pagination {
  margin-top: 56px;
}
.elara-pagination ul {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}
.elara-pagination li {
  margin: 0;
}
.elara-pagination a,
.elara-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ivory-300);
  font-size: 13px;
  color: var(--ink-700);
}
.elara-pagination a:hover {
  border-color: var(--gold-500);
  color: var(--gold-700);
}
.elara-pagination .current {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

/* search form */
.search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  max-width: 520px;
}
.search-field {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ivory-300);
  border-radius: 0;
}
.search-field:focus {
  outline: none;
  border-color: var(--gold-500);
}

/* comments */
.comments-area {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--ivory-300);
}
.comments-title,
.comment-reply-title {
  color: var(--navy-900);
}
.comment-list {
  list-style: none;
  margin: 28px 0 0;
}
.comment-list .children {
  list-style: none;
  margin-left: 28px;
}
.comment-body {
  padding: 18px 0;
  border-bottom: 1px solid var(--ivory-200);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-900);
}
.comment-author .avatar {
  border-radius: 50%;
}
.comment-metadata {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 4px;
}
.comment-metadata a {
  color: var(--ink-500);
}
.comment-content {
  margin-top: 10px;
  font-size: 15px;
  color: var(--body-dark);
}
.comment-reply-link {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.comment-form {
  margin-top: 34px;
}
.comment-form p,
.comment-form .comment-form-comment {
  margin-bottom: 16px;
}
.comment-form label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.comment-form
  :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ivory-300);
}
.comment-form :is(input, textarea):focus {
  outline: none;
  border-color: var(--gold-500);
}
.comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy-900);
}
.comment-form .submit:hover {
  background: var(--gold-600);
}
.no-comments {
  font-size: 14px;
  color: var(--ink-500);
  margin-top: 18px;
}

/* blog sidebar (only when the widget area holds widgets) */
.entry-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  max-width: 1120px;
}
.entry-sidebar .widget {
  margin-bottom: 34px;
}
.entry-sidebar .widget-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.entry-sidebar :is(p, li, a, span) {
  font-size: 14px;
  color: var(--body-dark);
}
.entry-sidebar a:hover {
  color: var(--gold-600);
}
.entry-sidebar ul {
  list-style: none;
}
.entry-sidebar li + li {
  margin-top: 8px;
}

/* responsive oEmbeds */
.embed-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-top: 14px;
  margin-bottom: 14px;
}
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* tag cloud widget */
.tagcloud a,
.wp-block-tag-cloud a {
  display: inline-block;
  font-size: 12px !important; /* uniform sizing via filter */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-dark);
  border: 1px solid rgba(201, 164, 92, 0.3);
  border-radius: 2px;
  padding: 5px 12px;
  margin: 0 6px 8px 0;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.tagcloud a:hover,
.wp-block-tag-cloud a:hover {
  background: var(--gold-400);
  color: #fff;
  border-color: var(--gold-400);
}

/* footer widgets */
.footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 48px 0 8px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.16);
}
.footer-widget-col .widget {
  margin-bottom: 28px;
}
.footer-widget-col .widget-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 14px;
}
.footer-widget-col :is(p, li, a, span) {
  font-size: 13.5px;
  color: #b9c3d6;
}
.footer-widget-col a:hover {
  color: var(--gold-300);
}
.footer-widget-col ul {
  list-style: none;
}
.footer-widget-col li + li {
  margin-top: 8px;
}

/* ---- responsive: standard content ---- */
@media (max-width: 1080px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .entry-with-sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
}
@media (max-width: 720px) {
  .post-grid,
  .footer-widgets {
    grid-template-columns: minmax(0, 1fr);
  }
  .entry-nav {
    flex-direction: column;
  }
  .entry-nav-next {
    margin-left: 0;
    text-align: left;
  }
}