/** Shopify CDN: Minification failed

Line 3408:458 Unexpected "\\nbody"
Line 3408:468 Expected ":"
Line 3408:498 Expected ":"
Line 3408:521 Expected ":"
Line 3408:544 Expected ":"
Line 3408:565 Expected ":"
Line 3408:599 Expected ":"
Line 3408:624 Expected ":"
Line 3408:650 Expected ":"
Line 3408:677 Expected ":"
... and 52 more hidden warnings

**/
/* ==========================================================================
   CMS Peptides & Co — Theme CSS
   Dark gold luxury aesthetic
   ========================================================================== */

/* Script faces live in theme assets, so these relative URLs resolve. */
@font-face {
  font-family: 'Catchy Bellonia';
  src: url('CatchyBellonia.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brittany Signature';
  src: url('BrittanySignature.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- CSS Custom Properties ---------- */
:root {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-2: #1a1a1a;
  --color-surface-3: #222222;
  --color-gold: #c9a227;
  --color-gold-light: #e8c14a;
  --color-gold-dark: #a07d18;
  --color-text: #ffffff;
  --color-text-muted: #999999;
  --color-text-dim: #666666;
  --color-border: #2a2a2a;
  --color-danger: #c0392b;

  --font-heading: 'Playfair Display', 'Bodoni Moda', Georgia, serif;
  --font-script: 'Catchy Bellonia', 'Brittany Signature', cursive;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-gold: 0 0 20px rgba(201, 162, 39, 0.25);
  --shadow-gold-strong: 0 0 40px rgba(201, 162, 39, 0.4);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);

  --transition: 0.25s ease;
  --max-width: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --header-height: 72px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--header-height);
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-gold-light); }

ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-to-content-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-gold);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-to-content-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  color: #0a0a0a;
  border-color: var(--color-gold);
  box-shadow: 0 2px 12px rgba(201,162,39,0.3);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
  box-shadow: var(--shadow-gold-strong);
  color: #0a0a0a;
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.btn--outline:hover {
  background: var(--color-gold);
  color: #0a0a0a;
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.btn--lg { padding: 1rem 2.25rem; font-size: 0.875rem; }
.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.75rem; }
.btn--full { width: 100%; }


/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(10, 10, 10, 0.97);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: var(--header-height);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

/* Logo */
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo-img { max-height: 58px; width: auto; object-fit: contain; }
.site-footer__logo-img { max-height: 80px; width: auto; object-fit: contain; }
.site-header__logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 0;
}
.logo-cms {
  font-family: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  background: linear-gradient(160deg, #8a6500 0%, #d4a017 25%, #f5d060 50%, #c9921a 75%, #8a6500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-script {
  font-family: 'Brittany Signature', 'Dancing Script', cursive;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--color-text);
  margin-top: -2px;
  line-height: 1.15;
}
.logo-sub {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.42rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--color-gold-dark);
  width: 100%;
  text-align: center;
}

/* Desktop Nav */
.site-nav { display: flex; align-items: center; }
.site-nav__list { display: flex; align-items: center; gap: 0.25rem; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.site-nav__link:hover,
.site-nav__link.is-active { color: var(--color-gold); }
.site-nav__link.is-active { text-decoration: underline; text-underline-offset: 4px; }
.site-nav__chevron { transition: transform var(--transition); }
.site-nav__item--has-dropdown:hover .site-nav__chevron { transform: rotate(180deg); }

/* Dropdown */
.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 100;
}
.site-nav__item--has-dropdown:hover .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__dropdown-item { border-bottom: 1px solid var(--color-border); }
.site-nav__dropdown-item:last-child { border-bottom: none; }
.site-nav__dropdown-link {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link.is-active { color: var(--color-gold); background: rgba(201,162,39,0.06); }

/* Header Icons */
.site-header__icons { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-header__icon {
  position: relative;
  color: var(--color-text);
  padding: 0.375rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.site-header__icon:hover { color: var(--color-gold); }
.site-header__cart-count {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #0a0a0a;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu Toggle */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
}
.site-header__menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}
.site-header__menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.site-header__menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Nav */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  z-index: 800;
}
.mobile-nav.is-open { max-height: 80vh; overflow-y: auto; }
.mobile-nav__list { padding: 1rem 0; }
.mobile-nav__item { border-bottom: 1px solid var(--color-border); }
.mobile-nav__link {
  display: block;
  padding: 0.875rem var(--gutter);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.mobile-nav__sub { background: var(--color-surface-2); }
.mobile-nav__sub-link {
  display: block;
  padding: 0.625rem calc(var(--gutter) + 1rem);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: 520px;
  max-height: 820px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0a0a0a;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,5,5,0.55) 0%,
    rgba(5,5,5,0.1) 30%,
    transparent 60%
  );
}
/* Single bottom-center CTA */
.hero__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-bottom: 3.5rem;
}

/* Placeholder Bottle */
.hero__image-placeholder { display: flex; justify-content: center; }
.hero__bottle-placeholder {
  width: 200px;
  position: relative;
  filter: drop-shadow(0 20px 60px rgba(201,162,39,0.4));
  animation: float 6s ease-in-out infinite;
}
.hero__bottle-cap {
  width: 120px; height: 30px;
  background: linear-gradient(135deg, #8a6a00, var(--color-gold), #8a6a00);
  border-radius: 8px 8px 0 0;
  margin: 0 auto;
  box-shadow: 0 -4px 16px rgba(201,162,39,0.4);
}
.hero__bottle-body {
  background: #111;
  border: 1.5px solid var(--color-gold);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.hero__bottle-brand {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 1.25rem;
  font-weight: 600;
  background: linear-gradient(160deg, #8a6500, #f5d060, #c9921a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__bottle-brand em {
  font-style: normal;
  font-family: 'Brittany Signature', 'Dancing Script', cursive;
  font-size: 0.9rem;
  display: block;
  -webkit-text-fill-color: #fff;
  background: none;
  color: #fff;
}
.hero__bottle-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}
.hero__bottle-dose {
  background: var(--color-gold);
  color: #0a0a0a;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0.2rem 1rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}
.hero__bottle-disclaimer {
  font-size: 0.5rem;
  color: var(--color-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---------- Featured Products ---------- */
.featured-products {
  padding: 5rem 0 4rem;
  background: var(--color-surface);
  position: relative;
}
.featured-products::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.featured-products__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.featured-products__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text);
}
.featured-products__view-all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.featured-products__view-all:hover { color: var(--color-gold-light); }

/* Carousel */
.featured-products__carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.featured-products__carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem var(--gutter);
  flex: 1;
}
.featured-products__carousel::-webkit-scrollbar { display: none; }
.featured-products__slide {
  flex: 0 0 calc(20% - 1rem);
  min-width: 200px;
  scroll-snap-align: start;
}

.carousel-btn {
  position: relative;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  margin: 0 0.5rem;
}
.carousel-btn:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* Product Card */
.product-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold-dark);
  box-shadow: var(--shadow-gold);
}
.product-card__image-link { display: block; }
.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface-3);
}
.product-card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__image { transform: scale(1.05); }
.product-card__image-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__image-placeholder svg { width: 100%; height: 100%; }
.product-card__badge {
  position: absolute;
  bottom: 0.5rem; left: 0.5rem;
  background: rgba(10,10,10,0.85);
  color: var(--color-gold);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--color-gold-dark);
}
.product-card__info {
  padding: 1rem;
  text-align: center;
}
.product-card__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.product-card__title a { color: var(--color-text); }
.product-card__title a:hover { color: var(--color-gold); }
.product-card__size {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.product-card__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}
.product-card__btn { display: inline-flex; }

/* ---------- Info Blocks ---------- */
.info-blocks {
  padding: 5rem 0;
  background: var(--color-bg);
  position: relative;
}
.info-blocks::before, .info-blocks::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.info-blocks::before { top: 0; }
.info-blocks::after { bottom: 0; }
.info-blocks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.info-block {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: all var(--transition);
}
.info-block:hover {
  border-color: var(--color-gold-dark);
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}
.info-block__icon {
  color: var(--color-gold);
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
}
.info-block__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.info-block__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.info-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
  padding-bottom: 1px;
}
.info-block__cta:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

/* ---------- Quality Commitment ---------- */
.quality {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  min-height: 600px;
}

/* Full-bleed background image — covers entire section */
.quality__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Dark overlay for text readability over full-bleed image */
.quality__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
  z-index: 1;
}

/* Full-width centered layout */
.quality__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

/* Spacer hidden — no split layout */
.quality__spacer {
  display: none;
}

/* Centered content column */
.quality__content-col {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem clamp(2rem, 5vw, 4rem);
}

/* Gold drop + line accent */
.quality__accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  width: 100%;
}
.quality__accent--bottom {
  margin-bottom: 0;
  margin-top: 2rem;
}
.quality__drop { flex-shrink: 0; }
.quality__divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-dark), transparent);
  max-width: 80px;
}

/* Eyebrow */
.quality__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.625rem;
}

/* Title */
.quality__title {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.0;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.quality__title-gold {
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1.0;
  background: linear-gradient(135deg, #8b6914, #e8c547, #c9a227, #f5d76e, #a87c1f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.quality__title-white {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
  display: block;
  line-height: 1.1;
}

/* Gold rule with diamond */
.quality__title-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  width: 100%;
}
.quality__rule-line {
  flex: 1;
  height: 1px;
  background: var(--color-gold-dark);
  max-width: 60px;
}
.quality__rule-dot {
  font-size: 0.5rem;
  color: var(--color-gold);
  line-height: 1;
}

/* Body text */
.quality__body {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* Horizontal trust row */
.quality__trust-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
}
.quality__trust-divider {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
  min-height: 60px;
  margin: 0 1.25rem;
  flex-shrink: 0;
}
.quality__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 80px;
}
.quality__trust-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quality__trust-title {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.3;
}
.quality__trust-sub {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---------- Disclaimer Section ---------- */
.disclaimer-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 4rem 0;
}
.disclaimer-section__inner { max-width: 820px; }
.disclaimer-section__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.disclaimer-section__body p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.disclaimer-section__body strong { color: var(--color-text); }
.disclaimer-section__footer-line {
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-gold) !important;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* ---------- Newsletter ---------- */
.newsletter {
  padding: 3.5rem 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.newsletter__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.newsletter__icon { flex-shrink: 0; }
.newsletter__text { flex: 1; min-width: 200px; }
.newsletter__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.newsletter__sub { font-size: 0.875rem; color: var(--color-text-muted); }
.newsletter__form {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 300px;
  max-width: 480px;
}
.newsletter__input {
  flex: 1;
  padding: 0.75rem 1.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition);
}
.newsletter__input::placeholder { color: var(--color-text-dim); }
.newsletter__input:focus { border-color: var(--color-gold-dark); }
.newsletter__btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-surface);
  border-top: 2px solid var(--color-gold-dark);
}
.site-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 0.8fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
}
.site-footer__logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}
.site-footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.site-footer__link:hover { color: var(--color-gold); }
.site-footer__contact { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.site-footer__contact svg { flex-shrink: 0; color: var(--color-gold); }
.site-footer__socials { display: flex; gap: 0.75rem; }
.site-footer__social {
  width: 38px; height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.site-footer__social:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}
.site-footer__bottom {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding: 1rem 0;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.site-footer__disclaimer {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.site-footer__copy { font-size: 0.75rem; color: var(--color-text-dim); }


/* ---------- Age Gate ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.age-gate.is-hidden { display: none; }
.age-gate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
}
.age-gate__modal {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-dark);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 0 80px rgba(201,162,39,0.2);
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
}
.age-gate__logo { margin-bottom: 1.75rem; }
.age-gate__logo-text {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 1.75rem;
  font-weight: 600;
  background: linear-gradient(160deg, #8a6500 0%, #d4a017 25%, #f5d060 50%, #c9921a 75%, #8a6500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.age-gate__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.age-gate__sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.age-gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.age-gate__actions .btn { width: 100%; max-width: 320px; }
.age-gate__exit {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color var(--transition);
}
.age-gate__exit:hover { color: var(--color-text-muted); }
.age-gate__fine {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin: 0;
}
.age-gate__fine a { color: var(--color-text-dim); text-decoration: underline; }
.age-gate__fine a:hover { color: var(--color-gold); }

/* ---------- Product Page ---------- */
.product-page { padding: 4rem 0; }
.product-page__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.product-page__gallery {}
.product-page__main-image { border-radius: var(--radius-md); overflow: hidden; }
.product-page__img { width: 100%; border-radius: var(--radius-md); }
.product-page__img-placeholder { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.product-page__img-placeholder svg { width: 100%; height: auto; }
.product-page__thumbnails { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.product-page__thumb {
  width: 70px; height: 70px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
  background: none;
}
.product-page__thumb.is-active, .product-page__thumb:hover { border-color: var(--color-gold); }
.product-page__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-page__research-badge {
  display: inline-block;
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--color-gold-dark);
  color: var(--color-gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.product-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.product-page__price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.price-from { font-size: 1rem; font-weight: 400; color: var(--color-text-muted); }
.price-compare {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-dim);
  text-decoration: line-through;
  margin-left: 0.75rem;
}

/* Product Form */
.product-form { margin-bottom: 1.5rem; }
.product-form__option { margin-bottom: 1rem; }
.product-form__option-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.product-form__select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}
.product-form__select:focus { border-color: var(--color-gold); }

/* Quantity Input */
.product-form__quantity { margin-bottom: 1.25rem; }
.quantity-input { display: flex; align-items: center; gap: 0; width: fit-content; }
.quantity-input__btn {
  width: 36px; height: 40px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.quantity-input__btn--minus { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.quantity-input__btn--plus { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.quantity-input__btn:hover { color: var(--color-gold); border-color: var(--color-gold-dark); }
.quantity-input__field {
  width: 60px; height: 40px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: center;
  font-size: 1rem;
  font-family: var(--font-body);
  outline: none;
  -moz-appearance: textfield;
}
.quantity-input__field::-webkit-inner-spin-button,
.quantity-input__field::-webkit-outer-spin-button { -webkit-appearance: none; }

.product-form__actions { margin-bottom: 1.25rem; }
.product-form__submit { font-size: 1rem; padding: 1rem 2rem; }

/* Product research note */
.product-page__research-note {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.product-page__research-note a { color: var(--color-text-dim); text-decoration: underline; }

/* Product Description */
.product-page__description {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.product-page__description h2,
.product-page__description h3 { color: var(--color-text); margin: 1rem 0 0.5rem; font-size: 1rem; }

/* Product Trust */
.product-page__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
}
.product-page__trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---------- Collection Page ---------- */
.collection-page { padding: 4rem 0; }
.collection-page__header { margin-bottom: 2.5rem; }
.collection-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.collection-page__description { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 1rem; }
.collection-page__research-badge {
  display: inline-block;
  background: rgba(201,162,39,0.08);
  border: 1px solid var(--color-gold-dark);
  color: var(--color-gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
}
.collection-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.collection-page__empty { color: var(--color-text-muted); grid-column: 1/-1; text-align: center; padding: 4rem 0; }
.collection-page__pagination { text-align: center; padding-top: 3rem; }

/* ---------- RTE (Rich Text) ---------- */
.rte h1, .rte h2, .rte h3 { margin: 1rem 0 0.5rem; color: var(--color-text); font-family: var(--font-heading); }
.rte p { margin-bottom: 1rem; }
.rte ul, .rte ol { margin: 0.5rem 0 1rem 1.25rem; }
.rte li { margin-bottom: 0.25rem; color: var(--color-text-muted); font-size: 0.9375rem; }
.rte a { color: var(--color-gold); }
.rte strong { color: var(--color-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .site-header__menu-toggle { display: flex; }
  .info-blocks__grid { grid-template-columns: repeat(2, 1fr); }
  .quality__content-col { padding: 4rem 2.5rem 4rem 2rem; }
  .quality__title-gold { font-size: clamp(2.75rem, 5vw, 4.5rem); }
  .site-footer__main { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-height: 60px; }
  body { padding-top: var(--header-height); }
  .hero__cta { padding-bottom: 2.5rem; }
  .featured-products__slide { flex: 0 0 calc(50% - 1rem); min-width: 160px; }
  .info-blocks__grid { grid-template-columns: 1fr 1fr; }
  /* Quality: stack vertically on mobile — image becomes top banner */
  .quality { min-height: auto; }
  .quality__inner { min-height: 480px; }
  .quality__content-col { padding: 4rem 1.5rem; }
  .quality__accent { justify-content: center; }
  .quality__title-rule { justify-content: center; }
  .quality__trust-row { justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
  .quality__trust-item { min-width: 80px; flex: 0 1 auto; }
  .quality__trust-divider { display: none; }
  .quality__title-gold { font-size: clamp(3rem, 12vw, 4.5rem); }
  .quality__title-white { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .newsletter__inner { flex-direction: column; align-items: flex-start; }
  .newsletter__form { width: 100%; }
  .site-footer__main { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2.5rem 0 2rem; }
  .product-page__inner { grid-template-columns: 1fr; }
  .age-gate__modal { padding: 1.75rem 1.25rem; }
}

@media (max-width: 480px) {
  .info-blocks__grid { grid-template-columns: 1fr; }
.featured-products__slide { flex: 0 0 calc(80% - 1rem); }
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }
}


/* ==========================================================================
   2026 REFRESH — hero, quality, announcement bar, research notice,
   gold backgrounds, FAQ and rich pages.
   These rules are appended deliberately so they override the originals above.
   ========================================================================== */

/* ---------- Announcement bar ---------- */
.announce {
  background: linear-gradient(90deg, #1a1508, #2a2109, #1a1508);
  border-bottom: 1px solid rgba(201,162,39,0.3);
  padding: 0.5625rem var(--gutter);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  max-width: var(--max-width); margin: 0 auto;
}
.announce__item {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--color-gold-light); padding: 0 1.375rem; text-align: center;
}
.announce__sep { width: 1px; height: 12px; background: rgba(201,162,39,0.4); }

/* ---------- Hero: full artwork, uncropped, with a clickable hotspot ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  background: #000;
  overflow: hidden;
}
.hero__wide {
  position: relative;
  /* artwork is 1536x1024 (3:2) — cap its width so its height fits the viewport */
  max-width: calc((100vh - var(--header-height) - 1.5rem) * 1.5);
  margin: 0 auto;
}
.hero__art { display: block; width: 100%; height: auto; }
.hero__hotspot {
  position: absolute;
  display: block;
  border: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}
.hero__hotspot:hover { border-color: rgba(232,193,74,0.9); background-color: rgba(201,162,39,0.14); }
.hero__hotspot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* ---------- Research-use notice ---------- */
.rnotice {
  padding: 1.625rem var(--gutter);
  background: var(--color-surface);
  border-top: 1px solid rgba(201,162,39,0.3);
  border-bottom: 1px solid rgba(201,162,39,0.3);
  text-align: center;
}
.rnotice__head {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--color-gold-light); margin: 0;
}
.rnotice__body {
  font-size: 0.78125rem; line-height: 1.8; color: #a8a8a8;
  margin: 0.625rem auto 0; max-width: 54rem;
}

/* ---------- Gold in the background: products + info blocks ---------- */
.featured-products { position: relative; overflow: hidden; }
.featured-products::before,
.featured-products::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  background-image: url('hero-swirl-band.png');
  background-size: cover; background-position: center;
  opacity: 0.26; pointer-events: none;
}
.featured-products::before {
  left: 0;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 65%);
  mask-image: linear-gradient(to left, transparent 0%, #000 65%);
}
.featured-products::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 65%);
  mask-image: linear-gradient(to right, transparent 0%, #000 65%);
}
.featured-products > * { position: relative; z-index: 1; }
.featured-products__card,
.product-card { background: rgba(8,8,8,0.86); }

.info-blocks { position: relative; overflow: hidden; }
.info-blocks::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('gold-vein-bg.png');
  background-size: 620px auto; background-repeat: repeat;
  opacity: 0.5; pointer-events: none;
}
.info-blocks::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.82) 45%, rgba(10,10,10,0.66) 100%);
  pointer-events: none;
}
.info-blocks > * { position: relative; z-index: 1; }

/* ---------- Product card research-use line ---------- */
.product-card__ruo {
  display: block; text-align: center;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.13em;
  color: var(--color-text-dim); margin-top: 0.375rem;
}

/* ---------- Quality: artwork only ---------- */
.quality {
  position: relative;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.quality {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
}
.quality__art {
  display: block;
  width: 100%; height: auto;
  max-width: calc((100vh - var(--header-height)) * 1.5);
  margin: 0 auto;
}

/* ---------- Shared gold rule ---------- */
.gold-rule {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  max-width: 20rem; margin: 1rem auto 0;
}
.gold-rule span { flex: 1; height: 1px; background: rgba(201,162,39,0.55); }

/* ---------- FAQ page ---------- */
.faqpage { padding: 3.5rem var(--gutter) 0; }
.faqpage__head { text-align: center; max-width: 44rem; margin: 0 auto; }
.faqpage__eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.28em;
  color: var(--color-gold); margin: 0;
}
.faqpage__title {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.125rem);
  font-weight: 700; letter-spacing: 0.02em; margin: 0.75rem 0 0;
}
.faqpage__intro { font-size: 0.84375rem; line-height: 1.8; color: var(--color-text-muted); margin: 1.125rem 0 0; }
.faqpage__list { max-width: 58rem; margin: 3rem auto 0; }
.faq { border-bottom: 1px solid rgba(201,162,39,0.2); }
.faq__q {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.375rem 0.25rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; color: var(--color-text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-gold-light); }
.faq__num { font-family: var(--font-heading); font-size: 0.9375rem; color: var(--color-gold); min-width: 1.875rem; }
.faq__text { flex: 1; }
.faq__sign { flex-shrink: 0; width: 1.125rem; text-align: center; color: var(--color-gold); font-size: 1.25rem; line-height: 1; }
.faq__sign::before { content: "+"; }
.faq[open] .faq__sign::before { content: "\2212"; }
.faq__a { padding: 0 0.25rem 1.625rem 3.375rem; }
.faq__a p { font-size: 0.90625rem; line-height: 1.85; color: var(--color-text-muted); margin: 0 0 0.875rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faqpage__cta {
  margin: 3.5rem calc(var(--gutter) * -1) 0;
  padding: 2.75rem var(--gutter); text-align: center;
  background: var(--color-surface);
  border-top: 1px solid rgba(201,162,39,0.16);
  border-bottom: 1px solid rgba(201,162,39,0.16);
}
.faqpage__cta h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.04em; margin: 0; }
.faqpage__cta p { font-size: 0.84375rem; color: var(--color-text-muted); margin: 0.75rem 0 0; }
.faqpage__cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.875rem; margin: 1.5rem 0 0; }

/* ---------- Rich page (About / Learn) ---------- */
.rich { padding: 3.5rem var(--gutter) 0; max-width: 74rem; margin: 0 auto; }
.rich__head { text-align: center; max-width: 44rem; margin: 0 auto; }
.rich__eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.28em; color: var(--color-gold); margin: 0; }
.rich__title {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.125rem);
  font-weight: 700; line-height: 1.1; margin: 1rem 0 0;
}
.rich__script { font-family: var(--font-script); font-size: clamp(1.375rem, 2.6vw, 1.875rem); color: var(--color-text); margin: 0.875rem 0 0; }
.rich__intro { font-size: 1.0625rem; line-height: 1.85; color: #e8e8e8; margin: 1.5rem 0 0; }
.rich__split {
  display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 3.5rem;
  align-items: start; border-top: 1px solid rgba(201,162,39,0.2);
  margin-top: 3.25rem; padding-top: 2.75rem;
}
.rich__num { display: block; font-family: var(--font-heading); font-size: 0.9375rem; color: var(--color-gold); letter-spacing: 0.1em; }
.rich__split-head h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.15; margin: 0.625rem 0 0; }
.rich__split-body p { font-size: 0.9375rem; line-height: 1.85; color: var(--color-text-muted); margin: 0 0 1.25rem; }
.rich__split-body p:last-child { margin-bottom: 0; }
.rich__pledge {
  margin: 4rem calc(var(--gutter) * -1) 0; padding: 3.5rem var(--gutter); text-align: center;
  background: var(--color-surface);
  border-top: 1px solid rgba(201,162,39,0.16);
  border-bottom: 1px solid rgba(201,162,39,0.16);
}
.rich__pledge-main { font-family: var(--font-heading); font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 600; line-height: 1.45; color: var(--color-gold-light); margin: 0; }
.rich__pledge-sub { font-size: 1rem; color: #e8e8e8; margin: 1.75rem 0 0; }
.rich__pledge-script { font-family: var(--font-script); font-size: 1.75rem; color: var(--color-text); margin: 0.375rem 0 0; }
.rich__cards { margin-top: 3.25rem; }
.rich__cards-title { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; margin: 0 0 1.75rem; }
.rich__cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.rich__card { border: 1px solid rgba(201,162,39,0.3); padding: 1.625rem 1.5rem; }
.rich__card strong { display: block; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-gold); }
.rich__card p { font-size: 0.84375rem; line-height: 1.8; color: var(--color-text-muted); margin: 0.75rem 0 0; }
.rich__notice { margin-top: 3.25rem; border: 1px solid rgba(201,162,39,0.4); padding: 1.75rem 2rem; }
.rich__notice strong { display: block; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-gold-light); }
.rich__notice p { font-size: 0.84375rem; line-height: 1.85; color: var(--color-text-muted); margin: 0.75rem 0 0; }
.rich__cta { margin-top: 3rem; padding-bottom: 3rem; text-align: center; }
.rich__cta h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.75rem; }
.rich__cta p { font-size: 0.84375rem; color: var(--color-text-muted); margin: 0 0 1.5rem; }

@media (max-width: 900px) {
  .rich__split { grid-template-columns: 1fr; gap: 1.5rem; }
  .announce__inner { gap: 0.25rem; }
  .announce__sep { display: none; }
  .faq__a { padding-left: 0.25rem; }
}


/* ---------- Age verification gate (refreshed) ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.age-gate[aria-hidden="true"] { display: none; }
.age-gate__overlay {
  position: absolute; inset: 0;
  background: rgba(3,3,3,0.92);
  backdrop-filter: blur(6px);
}
.age-gate__modal {
  position: relative;
  width: 100%; max-width: 34rem;
  background: #080808;
  border: 1px solid rgba(201,162,39,0.55);
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 30px 80px rgba(0,0,0,0.85);
  overflow: hidden;
}
.age-gate__art {
  position: absolute; inset: 0;
  background-image: url('gold-vein-bg.png');
  background-size: 520px auto;
  opacity: 0.3;
}
.age-gate__art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.9) 55%, #080808 100%);
}
.age-gate__inner {
  position: relative; z-index: 1;
  padding: 2.75rem 2.5rem 2.25rem;
  text-align: center;
}
.age-gate__logo { display: flex; justify-content: center; }
.age-gate__logo img {
  display: block; width: 168px; height: auto;
  border: 1px solid rgba(201,162,39,0.35);
}
.age-gate__eyebrow {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.3em;
  color: var(--color-gold); margin: 1.75rem 0 0;
}
.age-gate__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.375rem);
  font-weight: 700; letter-spacing: 0.05em;
  color: var(--color-text); margin: 0.625rem 0 0;
}
.age-gate__rule {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  max-width: 13rem; margin: 1rem auto 0;
}
.age-gate__rule span { flex: 1; height: 1px; background: rgba(201,162,39,0.5); }
.age-gate__sub {
  font-size: 0.84375rem; line-height: 1.8; color: #b5b5b5;
  margin: 1.25rem auto 0; max-width: 24rem;
}
.age-gate__actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.875rem; margin: 2rem 0 0;
}
.age-gate__enter {
  font-family: var(--font-heading);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.14em;
  color: #0a0a0a;
  background: linear-gradient(180deg, #e0be55, #b8901f);
  border: 1px solid var(--color-gold-light);
  border-radius: 0;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background var(--transition);
}
.age-gate__enter:hover { background: linear-gradient(180deg, #f0d270, var(--color-gold)); }
.age-gate__enter:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.age-gate__exit {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--color-text-dim);
  border: 1px solid rgba(201,162,39,0.22);
  padding: 0.8125rem 1.5rem;
  transition: color var(--transition), border-color var(--transition);
}
.age-gate__exit:hover { color: var(--color-text-muted); border-color: rgba(201,162,39,0.45); }
.age-gate__fine {
  font-size: 0.6875rem; line-height: 1.75; color: #6f6f6f;
  margin: 1.75rem auto 0; max-width: 26rem;
  padding-top: 1.375rem;
  border-top: 1px solid rgba(201,162,39,0.16);
}
.age-gate__fine a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }
.age-gate__fine a:hover { color: var(--color-gold-light); }

@media (max-width: 520px) {
  .age-gate__inner { padding: 2rem 1.5rem 1.75rem; }
  .age-gate__logo img { width: 132px; }
}

.age-gate__step[hidden] { display: none !important; }
.age-gate__email-form { margin-top: 1.5rem; }
.age-gate__email {
  width: 100%; min-height: 3.25rem;
  color: #fff; background: rgba(0,0,0,0.72);
  border: 1px solid rgba(201,162,39,0.55);
  padding: 0.85rem 1rem; margin-bottom: 0.875rem;
  font: inherit;
}
.age-gate__email:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.age-gate__email-form .age-gate__enter { width: 100%; }
.age-gate__error { color: #f0b8b8; font-size: 0.75rem; margin: -0.35rem 0 0.75rem; }
.age-gate__back {
  color: var(--color-text-dim); background: transparent; border: 0;
  padding: 0.85rem 1rem 0.25rem; cursor: pointer;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
}
.age-gate__exit { background: transparent; cursor: pointer; }

/* Keep the complete gate visible on short desktop and mobile screens. */
@media (max-height: 900px), (max-width: 768px) {
  .age-gate { align-items: center !important; padding: 0.75rem !important; }
  .age-gate__modal { max-height: calc(100dvh - 1.5rem) !important; overflow-y: auto !important; }
  .age-gate__inner { padding: 1.25rem 1.5rem 1rem !important; }
  .age-gate__logo img { width: 104px !important; }
  .age-gate__eyebrow { margin-top: 0.85rem !important; }
  .age-gate__title { font-size: clamp(1.6rem, 5vw, 2rem) !important; }
  .age-gate__rule { margin-top: 0.65rem !important; }
  .age-gate__sub { margin-top: 0.75rem !important; line-height: 1.55 !important; }
  .age-gate__actions { margin-top: 1rem !important; gap: 0.6rem !important; }
  .age-gate__enter { padding: 0.8rem 1rem !important; }
  .age-gate__exit { padding: 0.65rem 1rem !important; }
  .age-gate__fine { margin-top: 0.85rem !important; padding-top: 0.75rem !important; line-height: 1.45 !important; }
}


/* ---------- 2026 refresh, part 2 ---------- */

/* Let the gold vein read through the info-block cells */
.info-block {
  background: rgba(13,13,13,0.66);
  backdrop-filter: blur(1px);
}

/* Product cards sit on the swirl without blocking it entirely */
.product-card { background: rgba(8,8,8,0.8); }


/* ---------- Shop landing page ---------- */
.shopgrid { padding: 3.5rem var(--gutter) 4rem; max-width: var(--max-width); margin: 0 auto; }
.shopgrid__head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.shopgrid__eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.28em; color: var(--color-gold); margin: 0; }
.shopgrid__title {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700; letter-spacing: 0.02em; margin: 0.75rem 0 0;
}
.shopgrid__intro { font-size: 0.84375rem; line-height: 1.8; color: var(--color-text-muted); margin: 1.125rem 0 0; }
.shopgrid__group + .shopgrid__group { margin-top: 3.5rem; }
.shopgrid__group-head {
  display: flex; align-items: baseline; gap: 1.125rem;
  border-bottom: 1px solid rgba(201,162,39,0.22); padding-bottom: 0.875rem;
}
.shopgrid__group-head h2 {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600; letter-spacing: 0.05em; margin: 0;
}
.shopgrid__group-head span { font-size: 0.71875rem; letter-spacing: 0.14em; color: var(--color-text-dim); }
.shopgrid__group-head a {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--color-gold);
}
.shopgrid__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.25rem; margin-top: 1.75rem;
}
.shopgrid__compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.supply {
  display: flex; align-items: center; gap: 1.375rem;
  border: 1px solid rgba(201,162,39,0.3); background: rgba(13,13,13,0.7);
  padding: 1.125rem 1.375rem;
}
.supply__img { width: 5.5rem; height: 5.5rem; flex-shrink: 0; background: #000; overflow: hidden; }
.supply__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.supply__info { flex: 1; }
.supply__info strong { display: block; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.07em; }
.supply__info strong a { color: var(--color-text); }
.supply__info strong a:hover { color: var(--color-gold-light); }
.supply__info span { display: block; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-gold); margin-top: 0.3125rem; }
.supply__price { font-family: var(--font-heading); font-size: 1.375rem; flex-shrink: 0; }


/* ==========================================================================
   MOBILE
   The hero and quality artwork carry their copy inside the image, which is
   unreadable at phone widths — so below 768px we swap in live text versions.
   ========================================================================== */

.hero__mobile,
.quality__mobile { display: none; }

@media (max-width: 767px) {

  /* ---- Hero: live text over the artwork ---- */
  .hero__wide { display: none; }
  .hero__mobile {
    display: block; position: relative;
    background: #050505; overflow: hidden;
  }
  /* text-free swirl, NOT the banner artwork — the artwork's own headline
     would ghost behind the live one */
  .hero__mobile-bg {
    position: absolute; inset: 0;
    background-image: url('hero-swirl-band.png');
    background-size: cover;
    background-position: center;
    opacity: 0.42;
  }
  .hero__mobile-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.86) 55%, rgba(5,5,5,0.95) 100%);
  }
  .hero__mobile-inner {
    position: relative; z-index: 1;
    padding: 2.75rem 1.25rem 3rem;
    text-align: center;
  }
  .hero__mobile-title { margin: 0; line-height: 1.02; }
  .hero__mobile-title span {
    display: block; font-family: var(--font-heading);
    font-size: clamp(1.5rem, 7.5vw, 2rem); font-weight: 700;
    color: var(--color-text); letter-spacing: 0.01em;
  }
  .hero__mobile-title em {
    display: block; font-style: normal;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 13vw, 3.5rem); font-weight: 700;
    background: linear-gradient(180deg, #f0d270 0%, var(--color-gold) 55%, #8a6a00 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__mobile-script {
    font-family: var(--font-script);
    font-size: clamp(1.5rem, 7vw, 1.875rem);
    color: var(--color-text); margin: 0.625rem 0 0;
  }
  .hero__mobile-photo {
    margin: 1.5rem auto 0; max-width: 17rem;
    border: 1px solid rgba(201,162,39,0.35);
    background: #000;
  }
  .hero__mobile-photo img { display: block; width: 100%; height: auto; }
  .hero__mobile-body {
    font-size: 0.9375rem; line-height: 1.75;
    color: #cfcfcf; margin: 1.5rem auto 0; max-width: 21rem;
  }
  .hero__mobile-btn {
    display: block; width: 100%; margin: 1.75rem auto 0;
    max-width: 20rem; min-height: 3rem;
  }
  .hero__mobile-trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin: 2rem 0 0; background: rgba(201,162,39,0.22);
    border: 1px solid rgba(201,162,39,0.22);
    text-align: left;
  }
  .hero__m-item { background: rgba(5,5,5,0.86); padding: 1.125rem 0.875rem; }
  .hero__m-item strong {
    display: block; font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.11em; color: var(--color-gold);
  }
  .hero__m-item span {
    display: block; font-size: 0.75rem; line-height: 1.6;
    color: #cfcfcf; margin-top: 0.4375rem;
  }

  /* ---- Quality: live text instead of the artwork ---- */
  .quality__art { display: none; }
  .quality__mobile { display: block; position: relative; background: #050505; overflow: hidden; }
  .quality__mobile-bg {
    position: absolute; inset: 0;
    background-image: url('gold-vein-bg.png');
    background-size: 420px auto;
    background-repeat: repeat;
    opacity: 0.42;
  }
  .quality__mobile-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0.9) 100%);
  }
  .quality__mobile-photo {
    position: relative; z-index: 1;
    border-bottom: 1px solid rgba(201,162,39,0.35);
    background: #000;
  }
  .quality__mobile-photo img {
    display: block; width: 100%; height: 13.75rem; object-fit: cover;
  }
  .quality__mobile-inner { position: relative; z-index: 1; padding: 2.5rem 1.25rem 3rem; text-align: center; }
  .quality__m-eyebrow {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.26em;
    color: var(--color-gold); margin: 0;
  }
  .quality__m-title { margin: 0.75rem 0 0; line-height: 1.02; }
  .quality__m-title span {
    display: block; font-family: var(--font-heading);
    font-size: clamp(2.5rem, 13vw, 3.5rem); font-weight: 700;
    background: linear-gradient(180deg, #f0d270 0%, var(--color-gold) 55%, #8a6a00 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .quality__m-title em {
    display: block; font-style: normal; font-family: var(--font-heading);
    font-size: clamp(1.375rem, 7vw, 1.875rem); font-weight: 700;
    color: var(--color-text); letter-spacing: 0.01em;
  }
  .quality__m-body {
    font-size: 0.875rem; line-height: 1.8; color: #b5b5b5;
    margin: 1.25rem auto 0; max-width: 22rem;
  }
  .quality__m-trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin: 2rem 0 0; background: rgba(201,162,39,0.22);
    border: 1px solid rgba(201,162,39,0.22);
  }
  .quality__m-item { background: rgba(5,5,5,0.86); padding: 1.125rem 0.875rem; }
  .quality__m-item strong {
    display: block; font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.11em; color: var(--color-gold);
  }
  .quality__m-item span {
    display: block; font-size: 0.75rem; line-height: 1.6;
    color: #b5b5b5; margin-top: 0.4375rem;
  }

  /* ---- Announcement bar: stack, smaller, no dividers ---- */
  .announce { padding: 0.625rem 1rem; }
  .announce__inner { flex-direction: column; gap: 0.375rem; }
  .announce__item { font-size: 0.625rem; letter-spacing: 0.12em; padding: 0; }
  .announce__sep { display: none; }

  /* ---- Research notice ---- */
  .rnotice { padding: 1.25rem 1.25rem; }
  .rnotice__head { font-size: 0.6875rem; letter-spacing: 0.12em; line-height: 1.5; }
  .rnotice__body { font-size: 0.75rem; }

  /* ---- Shop landing ---- */
  .shopgrid { padding: 2.25rem 1.25rem 2.75rem; }
  .shopgrid__head { margin-bottom: 2rem; }
  .shopgrid__group + .shopgrid__group { margin-top: 2.5rem; }
  .shopgrid__group-head { flex-wrap: wrap; gap: 0.5rem 0.875rem; }
  .shopgrid__group-head a { margin-left: 0; width: 100%; }
  .shopgrid__grid { grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-top: 1.25rem; }
  .shopgrid__compact { grid-template-columns: 1fr; gap: 0.875rem; }
  .supply { gap: 0.875rem; padding: 0.875rem; flex-wrap: wrap; }
  .supply__img { width: 4rem; height: 4rem; }
  .supply__info { flex: 1 1 8rem; }
  .supply__price { font-size: 1.125rem; }
  .supply .btn { flex: 1 1 100%; text-align: center; min-height: 2.75rem; line-height: 2.75rem; padding: 0 1rem; }

  /* ---- Product cards: keep text legible at half width ---- */
  .product-card__title { font-size: 0.8125rem; }
  .product-card__price { font-size: 0.9375rem; }
  .product-card__ruo { font-size: 0.5rem; letter-spacing: 0.1em; }
  .product-card__btn { min-height: 2.75rem; line-height: 2.75rem; padding: 0 0.5rem; font-size: 0.625rem; }

  /* ---- FAQ ---- */
  .faqpage { padding: 2.25rem 1.25rem 0; }
  .faqpage__title { font-size: clamp(1.5rem, 8vw, 2rem); }
  .faqpage__list { margin-top: 2rem; }
  .faq__q { gap: 0.75rem; font-size: 0.9375rem; padding: 1.125rem 0; min-height: 3rem; }
  .faq__num { font-size: 0.8125rem; min-width: 1.5rem; }
  .faq__a { padding: 0 0 1.25rem 2.25rem; }
  .faqpage__cta { margin: 2.5rem -1.25rem 0; padding: 2rem 1.25rem; }
  .faqpage__cta-actions { flex-direction: column; }
  .faqpage__cta-actions .btn,
  .faqpage__cta-actions a { min-height: 2.75rem; line-height: 2.75rem; }

  /* ---- Rich pages (About / Learn) ---- */
  .rich { padding: 2.25rem 1.25rem 0; }
  .rich__title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .rich__intro { font-size: 0.9375rem; }
  .rich__split { margin-top: 2.25rem; padding-top: 2rem; }
  .rich__pledge { margin: 2.5rem -1.25rem 0; padding: 2.25rem 1.25rem; }
  .rich__pledge-main { font-size: 1.25rem; }
  .rich__cards-grid { grid-template-columns: 1fr; }
  .rich__notice { padding: 1.25rem 1.125rem; }

  /* ---- Age gate ---- */
  .age-gate { padding: 1rem; align-items: flex-start; padding-top: 3rem; }
  .age-gate__modal { max-height: calc(100vh - 4rem); overflow-y: auto; }

  /* ---- Tap targets: text links need it as much as buttons ---- */
  .site-header__icon,
  .site-header__menu-toggle { min-width: 2.75rem; min-height: 2.75rem; }
  .btn { min-height: 2.75rem; }
  .site-footer__link,
  .site-footer__contact a,
  .shopgrid__group-head a,
  .info-block__cta,
  .mobile-nav__link,
  .mobile-nav__sub-link {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;
  }
  .site-footer__links li { display: flex; }
  .site-footer__links { gap: 0; }
}

@media (max-width: 400px) {
  .quality__m-trust,
  .hero__mobile-trust { grid-template-columns: 1fr; }
  .shopgrid__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GOLD PASS — background movement and gold edges, appended so it wins.
   ========================================================================== */

:root {
  --gold-rule: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.12) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.12) 90%, transparent 100%);
  --gold-edge: rgba(201,162,39,0.42);
}

/* ---------- Background movement ---------- */

/* Best sellers: swirl bands, brought up from barely-there */
.featured-products::before,
.featured-products::after { opacity: 0.5; width: 52%; }

/* Research-use notice: a single swirl behind the type */
.rnotice {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--gold-edge);
  border-bottom: 1px solid var(--gold-edge);
}
.rnotice::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('hero-swirl-band.png');
  background-size: cover; background-position: center;
  opacity: 0.3; pointer-events: none;
}
.rnotice::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.72), rgba(10,10,10,0.82));
  pointer-events: none;
}
.rnotice > * { position: relative; z-index: 1; }

/* Info blocks: let more of the vein through */
.info-blocks::before { opacity: 0.66; }
.info-blocks::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.72) 45%, rgba(10,10,10,0.54) 100%);
}

/* Newsletter band: gold vein */
.newsletter {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--gold-edge);
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('gold-vein-bg.png');
  background-size: 520px auto; background-repeat: repeat;
  opacity: 0.55; pointer-events: none;
}
.newsletter::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.62), rgba(10,10,10,0.78));
  pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }

/* Shop page grid: the same swirl bands as best sellers */
.shopgrid { position: relative; }
.shopgrid::before,
.shopgrid::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  background-image: url('hero-swirl-band.png');
  background-size: cover; background-position: center;
  opacity: 0.42; pointer-events: none; z-index: 0;
}
.shopgrid::before {
  left: -50vw; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 65%);
  mask-image: linear-gradient(to left, transparent 0%, #000 65%);
}
.shopgrid::after {
  right: -50vw;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 65%);
  mask-image: linear-gradient(to right, transparent 0%, #000 65%);
}
.shopgrid > * { position: relative; z-index: 1; }

/* ---------- Gold edges ---------- */

/* Section top and bottom rules */
.featured-products,
.info-blocks,
.newsletter,
.quality { position: relative; }
.featured-products::before { z-index: 0; }
.featured-products,
.info-blocks { border-top: 1px solid var(--gold-edge); border-bottom: 1px solid var(--gold-edge); }

.rnotice,
.featured-products,
.info-blocks,
.newsletter { box-shadow: inset 0 1px 0 rgba(201,162,39,0.14), inset 0 -1px 0 rgba(201,162,39,0.14); }

/* Header bottom edge */
.site-header { border-bottom: 1px solid transparent; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold-rule);
}

/* Announcement bar edges */
.announce { border-top: 1px solid rgba(201,162,39,0.35); position: relative; }
.announce::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold-rule);
}

/* Footer top edge */
.site-footer { border-top: 0; position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--gold-rule);
}

/* Product card outlines */
.product-card {
  border: 1px solid var(--gold-edge);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.06);
}
.product-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 6px 26px rgba(201,162,39,0.22);
}

/* Buttons keep a gold edge in every variant */
.btn--gold { border: 1px solid var(--color-gold-light); }
.btn--outline { border-width: 1.5px; }
.btn--ghost { border-color: var(--gold-edge); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

/* Image and artwork frames */
.hero__wide,
.quality__art,
.product-page__gallery img,
.product-card__image {
  box-shadow: 0 0 0 1px var(--gold-edge);
}
.hero__wide { position: relative; }


/* ==========================================================================
   MOCKUP PASS — hero and quality as live layouts on the artwork
   ========================================================================== */

@media (min-width: 769px) {
  /* ---------- Hero ---------- */
  .hero {
    display: block;
    position: relative;
    min-height: clamp(34rem, 74vh, 48rem);
    max-height: none;
    overflow: hidden;
    background: #070707;
  }
  .hero::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%;
    background-image: var(--hero-swirl);
    background-size: cover; background-position: center;
    transform: scaleX(-1);
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 70%);
    mask-image: linear-gradient(to left, transparent 0%, #000 70%);
    pointer-events: none;
  }
  .hero__photo {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 44%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
    mask-image: linear-gradient(to right, transparent 0%, #000 16%);
  }
  .hero__photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 44%;
  }
  .hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,7,7,0.42) 0%, transparent 20%);
    pointer-events: none;
  }
  .hero__desk {
    position: relative; z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(3rem, 6vh, 5rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
    display: flex; align-items: center;
    min-height: clamp(34rem, 74vh, 48rem);
  }
  .hero__col { width: min(50%, 36rem); }
  .hero__title { margin: 0; line-height: 1.0; }
  .hero__title span {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 2.9vw, 2.75rem);
    font-weight: 600; letter-spacing: 0.02em;
    color: var(--color-text);
  }
  .hero__title em {
    display: block; font-style: normal;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5.6vw, 5.25rem);
    font-weight: 700; letter-spacing: 0.01em;
    background: linear-gradient(180deg, #f4dc8a 0%, var(--color-gold) 52%, #8a6a00 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__script {
    font-family: var(--font-script);
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    color: var(--color-text);
    margin: 0.5rem 0 0;
  }
  .hero__rule { margin: 1.125rem 0 0; max-width: 21rem; }
  .hero__body {
    font-size: 1rem; line-height: 1.75;
    color: #ddd; margin: 1.5rem 0 0; max-width: 26rem;
  }
  .hero__btn { margin-top: 2rem; }
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0;
    margin-top: clamp(2rem, 4vh, 3.25rem);
  }
  .hero__trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero__trust-item {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0 0.6875rem;
    border-left: 1px solid rgba(201,162,39,0.28);
  }
  .hero__trust-item:first-child { border-left: 0; padding-left: 0; }
  .hero__trust-icon {
    flex-shrink: 0;
    width: 2.125rem; height: 2.125rem;
    border: 1px solid rgba(201,162,39,0.55);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .hero__trust-icon svg { width: 1.125rem; height: 1.125rem; }
  .hero__trust-text strong {
    display: block;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em;
    color: var(--color-gold-light);
  }
  .hero__trust-text > span {
    display: block;
    font-size: 0.625rem; line-height: 1.45;
    color: #b9b9b9; margin-top: 0.1875rem;
  }
  .hero__trust-icon { width: 1.875rem; height: 1.875rem; }
  .hero__trust-icon svg { width: 1rem; height: 1rem; }
  .hero__mobile { display: none; }

  /* ---------- Quality ---------- */
  .quality {
    display: block;
    position: relative;
    min-height: clamp(26rem, 56vh, 36rem);
    overflow: hidden;
    background: #070707;
  }
  .quality::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--quality-vein);
    background-size: 1100px auto; background-repeat: repeat;
    opacity: 0.42; pointer-events: none;
  }
  .quality__photo {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 34%;
  }
  .quality__photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 32%);
    mask-image: linear-gradient(to left, transparent 0%, #000 32%);
  }
  .quality__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(7,7,7,0) 24%, rgba(7,7,7,0.72) 34%, rgba(7,7,7,0.86) 100%);
    pointer-events: none;
  }
  .quality__desk {
    position: relative; z-index: 2;
    max-width: var(--max-width); margin: 0 auto;
    padding: clamp(3rem, 6vh, 4.5rem) var(--gutter);
    display: grid;
    grid-template-columns: 30% 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    min-height: clamp(26rem, 56vh, 36rem);
  }
  .quality__desk-copy { grid-column: 2; }
  .quality__eyebrow {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.28em;
    color: var(--color-gold); margin: 0;
  }
  .quality__desk-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 600; letter-spacing: 0.02em; line-height: 1.12;
    margin: 0.75rem 0 0;
  }
  .quality__desk-body {
    font-size: 0.875rem; line-height: 1.8;
    color: #cfcfcf; margin: 1.125rem 0 0; max-width: 30rem;
  }
  .quality__desk-btn { margin-top: 1.75rem; white-space: nowrap; }
  .quality__desk-list {
    grid-column: 3;
    display: grid; gap: 1.375rem;
  }
  .quality__desk-item { display: flex; align-items: flex-start; gap: 0.875rem; }
  .quality__desk-icon {
    flex-shrink: 0;
    width: 2.375rem; height: 2.375rem;
    border: 1px solid rgba(201,162,39,0.5);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .quality__desk-icon svg { width: 1.25rem; height: 1.25rem; }
  .quality__desk-text strong {
    display: block;
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--color-gold-light);
  }
  .quality__desk-text > span {
    display: block;
    font-size: 0.78125rem; line-height: 1.6;
    color: #b9b9b9; margin-top: 0.25rem;
  }
  .quality__mobile { display: none; }
}

/* Phone: the live-text versions built earlier stay in charge */
@media (max-width: 768px) {
  .hero__photo,
  .hero__scrim,
  .hero__desk,
  .quality__photo,
  .quality__scrim,
  .quality__desk { display: none; }
  .hero::before,
  .quality::before { display: none; }
  .hero { display: block; min-height: 0; }
  .quality { display: block; min-height: 0; }
}


/* ---------- Header: larger logo lockup, as in the mockup ---------- */
@media (min-width: 769px) {
  :root { --header-height: 94px; }
  .site-header__logo-img { max-height: 78px; }
  .logo-cms { font-size: 2.6rem; }
  .logo-script { font-size: 1.7rem; }
  .logo-sub { font-size: 0.5rem; }
}

/* ---------- Best sellers header: centred title, gold rules either side ---------- */
.featured-products__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.featured-products__title {
  grid-column: 2;
  text-align: center;
  position: relative;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
.featured-products__title::before,
.featured-products__title::after {
  content: "";
  position: absolute; top: 50%;
  width: clamp(2rem, 8vw, 7rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.featured-products__title::before { right: 100%; }
.featured-products__title::after {
  left: 100%;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}
.featured-products__view-all { grid-column: 3; justify-self: end; }

@media (max-width: 768px) {
  .featured-products__header { grid-template-columns: 1fr; gap: 0.75rem; }
  .featured-products__title { grid-column: 1; padding: 0; }
  .featured-products__title::before,
  .featured-products__title::after { display: none; }
  .featured-products__view-all { grid-column: 1; justify-self: center; }
}


@media (min-width: 1180px) {
  .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .hero__trust-item:nth-child(3) {
    border-left: 1px solid rgba(201,162,39,0.28);
    padding-left: 0.6875rem;
  }
}


/* ==========================================================================
   BACK TO THE ARTWORK — the desktop hero and quality are the supplied images
   again. Everything from the live-layout experiment is switched off here.
   ========================================================================== */

@media (min-width: 769px) {
  .hero__photo,
  .hero__scrim,
  .hero__desk,
  .quality__photo,
  .quality__scrim,
  .quality__desk { display: none !important; }
  .hero::before,
  .quality::before { display: none !important; }

  .hero {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - var(--header-height));
    background: #000;
    overflow: hidden;
  }
  .hero__wide {
    position: relative;
    width: 100%;
    max-width: calc((100vh - var(--header-height)) * 1.5);
    margin: 0 auto;
    box-shadow: none;
  }
  .hero__art { display: block; width: 100%; height: auto; }

  .quality {
    display: flex; align-items: center; justify-content: center;
    min-height: 0;
    background: #000;
    overflow: hidden;
  }
  .quality__art {
    display: block;
    width: 100%; height: auto;
    max-width: calc((100vh - var(--header-height)) * 1.5);
    margin: 0 auto;
    box-shadow: none;
  }
}

/* Corrected seam target: pull the transparent hero underneath the header so
   there is no separate black band between navigation and hero artwork. */
@media (min-width: 769px) {
  .site-header { margin-bottom: 0 !important; background: transparent !important; }
  .hero { margin-top: calc(-1 * var(--header-height)) !important; }

  /* Preserve the Quality section's original fine gold edge treatment. */
  .quality,
  [id*="quality-commitment"] {
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) !important;
    background-size: 100% 1px, 100% 1px !important;
    background-position: left top, left bottom !important;
    background-repeat: no-repeat !important;
  }
}

/* No frame lines on the artwork — they read as a seam down the middle */
.hero__wide,
.quality__art { box-shadow: none; }


/* ==========================================================================
   MOCKUP PASS 2 — product cards and info blocks
   ========================================================================== */

/* ---------- Product cards: square corners, gold hairline, serif name ---------- */
.product-card {
  border-radius: 0;
  background: rgba(8,8,8,0.86);
}
.product-card__image-wrap { background: #0d0d0d; }
.product-card__image { object-fit: contain; }
.product-card__info { padding: 1.125rem 1rem 1.25rem; }
.product-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.3125rem;
}
.product-card__size {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  margin-bottom: 0.4375rem;
}
.product-card__price {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.875rem;
}
.product-card__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  border-radius: 0;
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.product-card__ruo { white-space: nowrap; }

/* ---------- Info blocks: open columns divided by gold hairlines ---------- */
.info-blocks__grid { gap: 0; }
.info-block {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(201,162,39,0.28);
  border-radius: 0;
  padding: 1.25rem clamp(1rem, 2.2vw, 2rem);
}
.info-block:first-child { border-left: 0; }
.info-block:hover {
  background: transparent;
  border-color: rgba(201,162,39,0.28);
  box-shadow: none;
  transform: none;
}
.info-block:hover .info-block__title { color: var(--color-gold-light); }
.info-block__icon { margin-bottom: 1rem; }
.info-block__icon svg {
  width: 2.5rem; height: 2.5rem;
  stroke-width: 1.4;
}
.info-block__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.6875rem;
  transition: color var(--transition);
}
.info-block__cta {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-gold);
}
.info-block__cta:hover { color: var(--color-gold-light); }

@media (max-width: 768px) {
  .info-block { border-left: 0; border-top: 1px solid rgba(201,162,39,0.22); }
  .info-block:first-child { border-top: 0; }
}


/* ---------- More gold in the info blocks band ---------- */
.info-blocks::before {
  opacity: 0.9;
  background-size: 1600px auto;
  background-position: center;
}
.info-blocks::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.34) 0%, rgba(10,10,10,0.56) 48%, rgba(10,10,10,0.38) 100%);
}
.info-block__text { color: #d2d2d2; }
.info-block__title { text-shadow: 0 1px 12px rgba(0,0,0,0.65); }
.info-block__text,
.info-block__cta { text-shadow: 0 1px 10px rgba(0,0,0,0.7); }


/* Card labels must fit the card at every column count */
.product-card__btn {
  font-size: clamp(0.5625rem, 0.85vw, 0.75rem);
  letter-spacing: 0.1em;
}
.product-card__ruo { font-size: clamp(0.5rem, 0.7vw, 0.5625rem); }


/* ==========================================================================
   MOCKUP PASS 3 — newsletter band and footer
   ========================================================================== */

/* ---------- Newsletter ---------- */
.newsletter { padding: 3.25rem 0; }
.newsletter__icon svg { width: 2.75rem; height: 2.75rem; stroke-width: 1.4; }
.newsletter__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.newsletter__sub { text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.newsletter__input {
  border-radius: 0;
  border-color: rgba(201,162,39,0.42);
  background: rgba(8,8,8,0.82);
  padding: 0.875rem 1.25rem;
}
.newsletter__input:focus { border-color: var(--color-gold); }
.newsletter__btn {
  border-radius: 0;
  letter-spacing: 0.16em;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

/* ---------- Footer: gold in the background, as in the mockup ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: #0c0c0c;
}
.site-footer::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(12,12,12,0.58) 0%, rgba(12,12,12,0.74) 100%),
    url('gold-vein-bg.png');
  background-size: auto, 1600px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  pointer-events: none;
  z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer__main { position: relative; z-index: 1; }
.site-footer__heading {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.75);
}
.site-footer__link,
.site-footer__contact a,
.site-footer__contact li {
  text-shadow: 0 1px 10px rgba(0,0,0,0.8);
}
.site-footer__bottom { position: relative; z-index: 1; }


/* ==========================================================================
   SECTION SEPARATORS — the same gradient gold rule everywhere.
   border-image paints only the sides that have a width, and a border sits
   outside the padding box, so full-cover texture overlays cannot veil it.
   ========================================================================== */

.rnotice,
.featured-products,
.info-blocks,
.newsletter,
.quality {
  border-left: 0;
  border-right: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) 1;
  box-shadow: none;
}

/* The hero already meets the header, so it takes the rule on its lower edge only */
.hero {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) 1;
}

/* Collection and page bodies get it too, so every seam matches */
.shopgrid,
.faqpage,
.rich {
  border-bottom: 1px solid transparent;
  border-left: 0;
  border-right: 0;
  border-image: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) 1;
}


/* ---------- Her logo, same artwork top and bottom ---------- */
.site-footer__logo { display: inline-flex; }
.site-footer__logo-img,
.site-footer__logo img {
  max-height: 132px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .site-footer__logo-img,
  .site-footer__logo img { max-height: 104px; }
}


/* ---------- Best sellers: one symmetric wash, not two bands meeting mid-page ---------- */
.featured-products::after { content: none; display: none; }
.featured-products::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  transform: none;
  background-image: url('hero-swirl-band.png');
  background-size: cover;
  background-position: center;
  opacity: 0.48;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.18) 58%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.18) 58%, #000 100%);
  pointer-events: none;
  z-index: 0;
}


.featured-products::before {
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.1) 55%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.1) 55%, #000 100%);
}

/* Cards align their buttons no matter how long the product name is */
.product-card { display: flex; flex-direction: column; }
.product-card__info { display: flex; flex-direction: column; flex: 1; }
.product-card__btn { margin-top: auto; }
.product-card__ruo { margin-bottom: 0.625rem; }


/* ---------- Hero: the wide artwork (1672x823, 2.03:1) ---------- */
@media (min-width: 769px) {
  .hero__wide {
    max-width: calc((100vh - var(--header-height)) * 2.032);
  }
}


/* ==========================================================================
   ONE PAGE BACKGROUND — the supplied gold artwork sits behind every page.
   All the earlier per-section swirl and vein textures are switched off here.
   ========================================================================== */

body {
  background-color: #060606;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('bg-gold-wide.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,0.62) 0%, rgba(6,6,6,0.74) 50%, rgba(6,6,6,0.66) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Portrait tablets take the portrait plate, phones the tall one */
@media (max-width: 1024px) and (orientation: portrait) {
  body::before { background-image: url('bg-gold-portrait.png'); }
}
@media (max-width: 768px) {
  body::before { background-image: url('bg-gold-tall.png'); }
}

/* Sections go transparent so the one background reads through them */
.rnotice,
.featured-products,
.info-blocks,
.newsletter,
.shopgrid,
.faqpage,
.rich,
.collection-page,
.product-page,
.page-content,
.site-footer {
  background: transparent;
}

/* Retire every old texture layer */
.rnotice::before,
.rnotice::after,
.featured-products::before,
.featured-products::after,
.info-blocks::before,
.info-blocks::after,
.newsletter::before,
.newsletter::after,
.shopgrid::before,
.shopgrid::after,
.site-footer::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Cards and inputs need their own ground so copy stays legible over the art */
.product-card,
.featured-products__card {
  background: rgba(6,6,6,0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.rich__card,
.faq__item {
  background: rgba(6,6,6,0.72);
}
.newsletter__input { background: rgba(6,6,6,0.86); }

/* Text over artwork: keep the soft shadows, drop the ones tuned to the old textures */
.info-block__title,
.info-block__text,
.info-block__cta,
.newsletter__title,
.newsletter__sub,
.site-footer__heading,
.site-footer__link,
.site-footer__contact a,
.site-footer__contact li,
.rnotice__head,
.rnotice__body {
  text-shadow: 0 1px 14px rgba(0,0,0,0.85);
}

/* The footer sits on a slightly deeper wash so it reads as the page's base */
.site-footer { position: relative; }
.site-footer > * { position: relative; z-index: 1; }


/* The page background is a texture, not a field: hold it well back */
body::before { opacity: 0.42; }
body::after {
  background: linear-gradient(180deg, rgba(6,6,6,0.78) 0%, rgba(6,6,6,0.84) 50%, rgba(6,6,6,0.8) 100%);
}


/* ==========================================================================
   HERO OVERLAY — the hero art is now a transparent PNG, so the page
   background artwork runs straight through it.
   ========================================================================== */
@media (min-width: 769px) {
  .hero {
    background: #000;
    min-height: calc(100vh - var(--header-height));
  }
  .hero__wide {
    max-width: calc((100vh - var(--header-height)) * 2.032);
    background: transparent;
  }
  .hero__art { display: block; width: 100%; height: auto; }
}

/* The quality artwork keeps its own black plate, so give it a ground that
   does not fight the page background */
.quality { background: transparent; }


/* ==========================================================================
   SEAMLESS TOP — the header floats over the hero artwork instead of sitting
   on its own bar, so the gold runs from the very top of the page down.
   ========================================================================== */
@media (min-width: 769px) {
  .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
  }
  /* the gold rule under the header would read as the hard line again */
  .site-header::after { content: none; display: none; }

  /* a whisper of shade so the nav stays legible over bright artwork */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,6,6,0.72) 0%, rgba(6,6,6,0.34) 62%, rgba(6,6,6,0) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* pull the hero up under the header and run the artwork edge to edge */
  .hero {
    margin-top: calc(-1 * var(--header-height));
    background: transparent;
    border-top: 0;
    min-height: 0;
    display: block;
  }
  .hero__wide {
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .hero__art { display: block; width: 100%; height: auto; }

  /* the quality artwork gets the same edge-to-edge treatment */
  .quality { display: block; background: transparent; }
  .quality__art { max-width: none; width: 100%; margin: 0; }
}


/* Below about 1200px the artwork is too short for the nav to sit on it
   without touching the headline, so the header takes its own ground again. */
@media (min-width: 769px) and (max-width: 1199px) {
  .site-header {
    background: rgba(6,6,6,0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .site-header::before { content: none; }
  .hero { margin-top: 0; }
}


/* ==========================================================================
   TRANSPARENT HERO — the hero artwork now has no background of its own, so
   the page's gold runs unbroken from the top of the page through every
   section. The header is transparent and stays in flow, so nothing overlaps.
   ========================================================================== */
@media (min-width: 769px) {
  .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
  }
  .site-header::after { content: none; display: none; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.16) 70%, rgba(6,6,6,0) 100%);
    pointer-events: none;
    z-index: -1;
  }

  .hero {
    margin-top: 0;
    display: block;
    background: transparent;
    border-top: 0;
    min-height: 0;
    overflow: visible;
  }
  .hero__wide { max-width: none; width: 100%; margin: 0; }
  .hero__art { display: block; width: 100%; height: auto; }
}


/* Scrim and artwork in ONE layer so paint order cannot go wrong */
body::after { content: none !important; display: none !important; }
body::before {
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.93) 50%, rgba(6,6,6,0.91) 100%),
    url('bg-gold-wide.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 1024px) and (orientation: portrait) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.93) 50%, rgba(6,6,6,0.91) 100%),
      url('bg-gold-portrait.png');
  }
}
@media (max-width: 768px) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.93) 50%, rgba(6,6,6,0.91) 100%),
      url('bg-gold-tall.png');
  }
}


/* ==========================================================================
   FINAL HOMEPAGE LAYOUT LOCK
   Keeps the desktop hero at the mockup scale, prevents the research notice
   from overlapping it, and removes the extra bar above the Quality artwork.
   ========================================================================== */
@media (min-width: 769px) {
  .site-header {
    position: relative;
    z-index: 20;
    pointer-events: auto;
  }

  .hero {
    display: block !important;
    position: relative;
    min-height: 0 !important;
    height: auto !important;
    margin: calc(-1 * var(--header-height)) 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .hero__wide {
    position: relative;
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }
  .hero__art {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .rnotice {
    position: relative;
    z-index: 2;
    clear: both;
    margin: 0 !important;
  }

  .quality,
  [id*="quality-commitment"] {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) !important;
    background-size: 100% 1px, 100% 1px !important;
    background-position: left top, left bottom !important;
    background-repeat: no-repeat !important;
  }
  .quality::before,
  .quality::after,
  [id*="quality-commitment"]::before,
  [id*="quality-commitment"]::after {
    content: none !important;
    display: none !important;
  }
  .quality__art {
    display: block !important;
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .quality__art-link {
    display: block !important;
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    cursor: pointer;
  }
  .quality__art-link .quality__art {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Background artwork with its scrim baked in — one flat layer, no compositing */
body::after { content: none !important; display: none !important; }
body::before {
  opacity: 1;
  background-image: url('bg-gold-wide-dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 1024px) and (orientation: portrait) {
  body::before { background-image: url('bg-gold-portrait-dark.png'); }
}
@media (max-width: 768px) {
  body::before { background-image: url('bg-gold-tall-dark.png'); }
}


/* ==========================================================================
   SEPARATORS, TAKE TWO — border-image was filling the whole section box in
   some engines. Draw the rule as a 1px background line instead.
   ========================================================================== */
.rnotice,
.featured-products,
.info-blocks,
.newsletter,
.quality,
.hero,
.shopgrid,
.faqpage,
.rich {
  border: 0 !important;
  border-image: none !important;
}
.rnotice,
.featured-products,
.info-blocks,
.newsletter,
.quality {
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%);
  background-size: 100% 1px, 100% 1px;
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
  background-color: transparent;
}
.hero,
.shopgrid,
.faqpage,
.rich {
  background-image: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-color: transparent;
}


body::before {
  background-image: url('bg-gold-wide-dark2.png');
}
@media (max-width: 1024px) and (orientation: portrait) {
  body::before { background-image: url('bg-gold-portrait-dark2.png'); }
}
@media (max-width: 768px) {
  body::before { background-image: url('bg-gold-tall-dark2.png'); }
}


/* ==========================================================================
   LOGO — transparent artwork, set large top and bottom
   ========================================================================== */
@media (min-width: 769px) {
  :root { --header-height: 148px; }
  .site-header__logo-img,
  .site-header__logo img {
    max-height: 128px;
    width: auto;
    object-fit: contain;
  }
  .site-header__inner { align-items: center; }
}
@media (max-width: 768px) {
  :root { --header-height: 92px; }
  .site-header__logo-img,
  .site-header__logo img { max-height: 76px; width: auto; object-fit: contain; }
}
.site-footer__logo-img,
.site-footer__logo img {
  max-height: 240px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .site-footer__logo-img,
  .site-footer__logo img { max-height: 168px; }
}


/* Quality artwork is transparent too — full bleed on the page background */
@media (min-width: 769px) {
  .quality { display: block; background-color: transparent; }
  .quality__art { max-width: none; width: 100%; margin: 0; }
}


/* ==========================================================================
   BACKGROUND, FINAL — the border-image bug is fixed, so the heavy baked
   scrim is no longer needed. Use the untouched artwork and hold it back in
   CSS instead, so the gold streaks actually read.
   ========================================================================== */
body::after { content: none !important; display: none !important; }
body::before {
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.58) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.6) 100%),
    url('bg-gold-wide.png');
  background-size: 100% 100%, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 1024px) and (orientation: portrait) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.58) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.6) 100%),
      url('bg-gold-portrait.png');
  }
}
@media (max-width: 768px) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.58) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.6) 100%),
      url('bg-gold-tall.png');
  }
}


/* Fit the artwork to the full width so its gold edges are on screen,
   rather than cover-cropping into the dark middle. */
body::before {
  background-size: 100% 100%, 100% auto;
  background-position: center, center top;
  background-color: #060606;
}


/* Map the artwork across the whole document instead of the viewport, so its
   gold reads at the top, middle and bottom of the page as you scroll. */
body { position: relative; }
body::before {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: auto;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.62) 45%, rgba(6,6,6,0.54) 100%),
    url('bg-gold-tall.png');
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (min-width: 769px) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.62) 45%, rgba(6,6,6,0.54) 100%),
      url('bg-gold-portrait.png');
  }
}


/* ==========================================================================
   BACKGROUND — fixed to the viewport (html/body are viewport-height here, so
   an absolute layer only covers the first screen). Anchored to the artwork's
   bright lower band so gold is on screen at every scroll position.
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto;
  height: auto;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.6) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.58) 100%),
    url('bg-gold-wide.png');
  background-size: 100% 100%, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  background-color: #060606;
}
@media (max-width: 1024px) and (orientation: portrait) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.6) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.58) 100%),
      url('bg-gold-portrait.png');
    background-size: 100% 100%, cover;
    background-position: center, center bottom;
  }
}
@media (max-width: 768px) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.6) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.58) 100%),
      url('bg-gold-tall.png');
    background-size: 100% 100%, cover;
    background-position: center, center bottom;
  }
}

/* Corrected seam target — final precedence. */
@media (min-width: 769px) {
  .site-header {
    margin-bottom: 0 !important;
    background: transparent !important;
  }
  .hero {
    margin-top: calc(-1 * var(--header-height)) !important;
  }
  .quality,
  [id*="quality-commitment"] {
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) !important;
    background-size: 100% 1px, 100% 1px !important;
    background-position: left top, left bottom !important;
    background-repeat: no-repeat !important;
  }
}

/* Final precedence lock: this block intentionally stays last. */
@media (min-width: 769px) {
  .site-header { position: relative; z-index: 20; pointer-events: auto; }
  .hero {
    display: block !important;
    position: relative;
    min-height: 0 !important;
    height: auto !important;
    margin: calc(-1 * var(--header-height)) 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .hero__wide {
    position: relative;
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }
  .hero__art { display: block; width: 100% !important; height: auto !important; }
  .rnotice { position: relative; z-index: 2; clear: both; margin: 0 !important; }
  .quality,
  [id*="quality-commitment"] {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.14) 10%, var(--color-gold-light) 50%, rgba(201,162,39,0.14) 90%, transparent 100%) !important;
    background-size: 100% 1px, 100% 1px !important;
    background-position: left top, left bottom !important;
    background-repeat: no-repeat !important;
  }
  .quality::before,
  .quality::after,
  [id*="quality-commitment"]::before,
  [id*="quality-commitment"]::after { content: none !important; display: none !important; }
  .quality__art {
    display: block !important;
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}


/* ==========================================================================
   QUALITY LINK — only the baked-in "LEARN MORE ABOUT US" button is clickable.
   Coordinates are relative to the 1932 × 814 desktop artwork.
   ========================================================================== */
.quality__art-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.quality__learn-hotspot {
  position: absolute;
  left: 44.55%;
  top: 73.65%;
  width: 19.65%;
  height: 7.45%;
  display: block;
  z-index: 5;
  cursor: pointer;
}
@media (max-width: 768px) {
  .quality__art-wrap { display: none; }
  .quality__learn-hotspot { display: none; }
}

/* ==========================================================================\n   TOP LAYOUT FINAL — header, announcement/research stack, hero separation\n   This intentionally overrides the older experimental header/hero patches.\n   ========================================================================== */\n\n/* The header is in normal document flow. Do not reserve a second header-height\n   above it and do not let it stick/follow the viewport. */\nbody {\n  padding-top: 0 !important;\n  position: relative;\n  isolation: isolate;\n}\n\n.site-header {\n  position: relative !important;\n  top: auto !important;\n  left: auto !important;\n  right: auto !important;\n  margin: 0 !important;\n  z-index: 50 !important;\n  background: rgba(6, 6, 6, 0.96) !important;\n  border-bottom: 1px solid rgba(201,162,39,0.28) !important;\n  backdrop-filter: none !important;\n  -webkit-backdrop-filter: none !important;\n  box-shadow: none !important;\n}\n.site-header::before,\n.site-header::after {\n  content: none !important;\n  display: none !important;\n}\n\n/* Mobile drawer belongs to the header rather than being fixed to the screen. */\n.mobile-nav {\n  position: absolute !important;\n  top: 100% !important;\n}\n\n/* The existing announcement and research-use sections now live before the hero\n   in templates/index.json. Keep them fully intact and in normal page flow. */\n.announce,\n.rnotice {\n  position: relative !important;\n  z-index: 10 !important;\n  margin: 0 !important;\n}\n\n/* The hero starts BELOW the complete top stack. No negative overlap. */\n.hero,\n#cms-home-hero {\n  margin-top: 0 !important;\n}\n@media (min-width: 769px) {\n  #cms-home-hero {\n    margin: 1.75rem 0 0 !important;\n  }\n}\n\n/* Remove the viewport-locked decorative layer that looked like a horizontal\n   bar travelling through the page while scrolling. The same gold background\n   now belongs to the document and scrolls with it. */\nhtml { background: #060606; }\nbody::after {\n  content: none !important;\n  display: none !important;\n}\nbody::before {\n  content: \"\" !important;\n  display: block !important;\n  position: absolute !important;\n  inset: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  z-index: -1 !important;\n  pointer-events: none !important;\n  opacity: 1 !important;\n  background-color: #060606 !important;\n  background-image:\n    linear-gradient(180deg, rgba(6,6,6,0.58) 0%, rgba(6,6,6,0.66) 48%, rgba(6,6,6,0.58) 100%),\n    url('bg-gold-tall.png') !important;\n  background-size: 100% 100%, 100% 100% !important;\n  background-position: center, center top !important;\n  background-repeat: no-repeat, no-repeat !important;\n  background-attachment: scroll, scroll !important;\n}\n@media (min-width: 769px) {\n  body::before {\n    background-image:\n      linear-gradient(180deg, rgba(6,6,6,0.56) 0%, rgba(6,6,6,0.64) 48%, rgba(6,6,6,0.56) 100%),\n      url('bg-gold-portrait.png') !important;\n  }\n}\n\n/* Preserve the corrected Quality artwork/link behavior. */\n.quality__art-wrap { position: relative; width: 100%; margin: 0 auto; }\n.quality__learn-hotspot { z-index: 5; }\n

/* ==========================================================================
   TOP-FIXED CORRECTION — VALID CSS
   Final visual order:
   1. Free Shipping / promotions bar
   2. Large logo + navigation
   3. Research-use notice
   4. Hero
   ========================================================================== */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  position: relative !important;
  background-color: #060606 !important;
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.56) 0%, rgba(6,6,6,0.64) 48%, rgba(6,6,6,0.56) 100%),
    url('bg-gold-portrait.png') !important;
  background-size: 100% 100%, 100% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, repeat-y !important;
  background-attachment: scroll, scroll !important;
}

/* Eliminate the legacy viewport-fixed decorative layer responsible for
   the floating horizontal bar. */
body::before,
body::after {
  content: none !important;
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Announcement is literally the first visible section. */
.announce {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 70 !important;
  background: rgba(36, 25, 2, 0.96) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(201,162,39,0.55) !important;
}

/* Logo/menu header follows directly and scrolls normally. */
.site-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 60 !important;
  min-height: 170px !important;
  background: rgba(6,6,6,0.94) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(201,162,39,0.22) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header::before,
.site-header::after {
  content: none !important;
  display: none !important;
}

.site-header__inner.container {
  width: 100% !important;
  max-width: none !important;
  min-height: 170px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.site-header__logo {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.site-header__logo-img,
.site-header__logo img {
  display: block !important;
  width: 152px !important;
  height: 152px !important;
  max-width: 152px !important;
  max-height: 152px !important;
  object-fit: contain !important;
}

.site-nav {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.site-header__icons {
  margin-left: 12px !important;
}

/* Research notice immediately below menu. */
.rnotice {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 30 !important;
}

/* Hero begins after research notice — never overlaps the header stack. */
.hero,
#cms-home-hero {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  background: transparent !important;
}

.hero__wide {
  position: relative !important;
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.hero__art {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Mobile preserves the same stack/order. */
@media (max-width: 768px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(6,6,6,0.58) 0%, rgba(6,6,6,0.66) 48%, rgba(6,6,6,0.58) 100%),
      url('bg-gold-tall.png') !important;
    background-size: 100% 100%, 100% auto !important;
    background-repeat: no-repeat, repeat-y !important;
    background-attachment: scroll, scroll !important;
  }

  .announce {
    padding: 0.45rem 0.7rem !important;
  }

  .announce__inner {
    gap: 0.2rem !important;
  }

  .announce__item {
    font-size: 0.58rem !important;
    letter-spacing: 0.10em !important;
    padding: 0 0.45rem !important;
  }

  .site-header {
    min-height: 110px !important;
  }

  .site-header__inner.container {
    min-height: 110px !important;
    padding: 6px 14px !important;
    gap: 10px !important;
  }

  .site-header__logo-img,
  .site-header__logo img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-header__icons {
    margin-left: auto !important;
  }

  .mobile-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* Keep the Quality section correction intact. */
.quality__art-wrap {
  position: relative !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.quality__learn-hotspot {
  z-index: 5 !important;
}


/* ==========================================================================\n   APPROVED HOME ART + CONTINUOUS BACKGROUND — 2026-09-18\n   ========================================================================== */
body.template-index {
  background: #000;
}

body.template-index::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('cms-home-bg-desktop.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #000;
}

body.template-index #MainContent,
body.template-index #MainContent > .shopify-section,
body.template-index .rnotice,
body.template-index .hero,
body.template-index .quality,
body.template-index .cms-showcase,
body.template-index .info-blocks,
body.template-index .newsletter,
body.template-index .site-footer {
  background-color: transparent !important;
  background-image: none !important;
}

body.template-index #MainContent > .shopify-section::before,
body.template-index #MainContent > .shopify-section::after,
body.template-index .hero::before,
body.template-index .hero::after,
body.template-index .quality::before,
body.template-index .quality::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* Use the approved transparent banner artwork at every viewport size. */
body.template-index .hero__wide,
body.template-index .quality__art-wrap {
  display: block !important;
  position: relative;
  width: 100%;
  background: transparent !important;
}

body.template-index .hero__art,
body.template-index .quality__art {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent !important;
}

body.template-index .hero__mobile,
body.template-index .quality__mobile {
  display: none !important;
}

body.template-index .hero__hotspot,
body.template-index .quality__learn-hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  cursor: pointer;
  background: transparent;
}

/* Keep the homepage background stationary while the transparent artwork scrolls over it. */
body.template-index #MainContent {
  position: relative;
  z-index: 0;
}

@media (max-width: 749px) {
  body.template-index::before {
    background-image: url('cms-home-bg-mobile.jpg');
    background-position: center top;
    background-size: cover;
  }
  body.template-index .hero__hotspot {
    left: 17.5%; top: 67.5%; width: 27%; height: 9%;
  }
  body.template-index .quality__learn-hotspot {
    left: 38%; top: 70%; width: 25%; height: 9%;
  }
}