/*
 * 4RE REBORN Page — v4.4.2
 * Real fonts: PP Mondwest + ABC Favorit Mono (licensed trial)
 * Figma: AbxLbCCJgjojDeAApaKW3Q — Desktop frame 5:2, 1716×3752
 *
 * v4.4.2 — HA/Packaging redesign:
 *   • Silver product tube replaces yellow HA bottle (Figma 5:254)
 *   • Removed duplicate cap overlays
 *   • Clean packaging section with technical drawing
 *
 * v4.4.1 — Scroll performance fixes:
 *   • overflow-x: clip instead of hidden (no nested scroll container)
 *   • scroll-behavior: auto override (no smooth-scroll lag)
 *   • content-visibility: auto on sections below fold
 */

/* ═══ FONTS ═══ */
@font-face {
  font-family: 'PP Mondwest';
  src: url('https://4-re.com/wp-content/uploads/2026/04/ppmondwest-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('https://4-re.com/wp-content/uploads/2026/04/favorit-mono-book.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('https://4-re.com/wp-content/uploads/2026/04/favorit-mono-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('https://4-re.com/wp-content/uploads/2026/04/favorit-mono-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('https://4-re.com/wp-content/uploads/2026/04/favorit-mono-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ═══ SCROLL PERFORMANCE ═══ */
html:has(body.reborn-page) { scroll-behavior: auto !important; }
body.reborn-page {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ═══ HIDE THEME CHROME ═══ */
body.reborn-page #site-header,
body.reborn-page #site-footer {
  display: none !important;
}
body.reborn-page .site-main,
body.reborn-page .entry-content,
body.reborn-page .page-content {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1716px !important;
  overflow: visible !important;
}

/* ═══ BASE ═══ */
.reborn-page {
  background: #fff;
  color: #000;
  font-family: 'ABC Favorit Mono', 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.reborn-page *, .reborn-page *::before, .reborn-page *::after { box-sizing: border-box; }
.reborn-page img { max-width: 100%; height: auto; display: block; }
.reborn-page a { color: inherit; }
.reborn-page a.rb-buy-btn,
.reborn-page a.rb-bag-btn,
.reborn-page a.rb-search-reviews { color: #ececec; }

/* ═══ TYPOGRAPHY ═══ */
.rb-section-title {
  font-family: 'ABC Favorit Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #000;
  margin-bottom: 1em;
}
.rb-body {
  font-family: 'ABC Favorit Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  text-transform: lowercase;
  line-height: 1.7;
  color: #000;
}

/* ═══ 10-COL GRID ═══ */
.rb-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 12px;
  padding: 0 24px;
  max-width: 1716px;
  margin: 0 auto;
}

/* ═══════════════════════════════════
   SECTION 1: HERO
   ═══════════════════════════════════ */
.rb-hero {
  padding-top: 24px;
  min-height: 779px;
  align-items: start;
  overflow: visible;
}
.rb-logo {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: start;
  z-index: 2;
}
.rb-logo img { height: 58px; width: auto; }
.rb-logo-text {
  font-family: 'PP Mondwest', 'Bebas Neue', sans-serif;
  font-size: 55px;
  line-height: 58px;
  color: #000;
  white-space: nowrap;
  display: inline-block;
}
.rb-logo-4 { margin-right: 32px; }
.rb-logo-text sup { font-size: 0.42em; vertical-align: super; line-height: 0; }
.rb-bag-wrap {
  grid-column: 10 / 11;
  grid-row: 1;
  align-self: start;
  z-index: 2;
}
.rb-bag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #ececec;
  font-family: 'PP Mondwest', 'Bebas Neue', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 36px;
  text-decoration: none;
  transition: background 0.2s;
}
.rb-bag-btn:hover { background: #333; color: #ececec; opacity: 1; }
.rb-hero-info {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: end;
  z-index: 2;
  padding-bottom: 0;
}
.rb-hero-product {
  grid-column: 6 / 9;
  grid-row: 1;
  z-index: 1;
}
.rb-hero-product img {
  width: 100%;
  height: 756px;
  object-fit: cover;
  max-width: none;
}
.rb-hero-sachet {
  grid-column: 5 / 6;
  grid-row: 1;
  align-self: start;
  padding-top: 343px;
  z-index: 3;
  overflow: visible;
}
.rb-hero-sachet img {
  width: 100%;
  height: 412px;
  object-fit: cover;
  object-position: center;
  max-width: none;
}
.rb-hero-right {
  grid-column: 9 / 10;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  z-index: 1;
}
.rb-hero-thumb { width: 100%; height: 180px; overflow: hidden; }
.rb-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rb-price {
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 12px;
}
.rb-product-name {
  font-family: 'PP Mondwest', 'Bebas Neue', sans-serif;
  font-size: 35px;
  text-transform: uppercase;
  line-height: 1;
  color: #000;
  margin-bottom: 8px;
  font-weight: 400;
}
.rb-sample-tag {
  display: inline-block;
  background: #ffff01;
  color: #000;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  padding: 0 4px;
  text-transform: lowercase;
  vertical-align: middle;
  margin-left: 8px;
  line-height: 1;
}
.rb-product-desc {
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 14px;
  text-transform: lowercase;
  line-height: 1.7;
  color: #000;
  margin-top: 16px;
}
.rb-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #000;
  color: #ececec;
  font-family: 'PP Mondwest', 'Bebas Neue', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  height: 36px;
  text-decoration: none;
  margin-top: 24px;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.reborn-page .rb-buy-btn:hover { background: #D4D422; color: #000; }
.rb-badges {
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.5;
  color: #000;
  margin-top: 12px;
  font-weight: 400;
}
.rb-pao {
  margin-top: auto;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 10px;
  text-align: center;
  color: #000;
}

/* ═══════════════════════════════════
   SECTION 2: INGREDIENTS + LAB + PHOTOS
   ═══════════════════════════════════ */
.rb-ingredients-photos {
  margin-top: 36px;
  grid-template-rows: auto auto;
  align-items: start;
  content-visibility: auto;
  contain-intrinsic-size: 1668px 1055px;
}
.rb-ingredients-text { grid-column: 1 / 5; grid-row: 1; }
.rb-ingredients-text .rb-section-title { margin-bottom: 8px; }
.rb-all-ingredients {
  font-family: 'ABC Favorit Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000;
  margin-top: 16px;
  display: inline-block;
}
.rb-lab-image { grid-column: 5 / 11; grid-row: 1 / 3; }
.rb-lab-image img {
  width: 100%;
  height: 100%;
  min-height: 599px;
  object-fit: cover;
}
.rb-photo-1 { grid-column: 1 / 3; grid-row: 2; }
.rb-photo-2 { grid-column: 3 / 5; grid-row: 2; }
.rb-photo-1 img,
.rb-photo-2 img {
  width: 100%;
  height: 406px;
  object-fit: cover;
}

/* ═══════════════════════════════════
   SECTION 3: STORIES
   ═══════════════════════════════════ */
.rb-stories {
  margin-top: 12px;
  grid-template-rows: auto auto;
  content-visibility: auto;
  contain-intrinsic-size: 1668px 846px;
}
.rb-story-chatgpt { grid-column: 1 / 3; grid-row: 1; align-self: start; }
.rb-story-chatgpt img { width: 100%; height: 247px; object-fit: cover; }
.rb-story-peptide { grid-column: 3 / 5; grid-row: 1; align-self: start; }
.rb-story-snow { grid-column: 3 / 5; grid-row: 1; align-self: start; margin-top: 151px; }
.rb-story-shea-text { grid-column: 6 / 8; grid-row: 1; align-self: start; margin-top: 191px; }
.rb-story-nmn { grid-column: 1 / 4; grid-row: 2; }
.rb-story-shea-img { grid-column: 4 / 8; grid-row: 2; }
.rb-story-shea-img img { width: 100%; height: 531px; object-fit: cover; }
.rb-story-portrait { grid-column: 8 / 11; grid-row: 1 / 3; padding-top: 47px; }
.rb-story-portrait img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

/* ═══════════════════════════════════
   SECTION 4: HA + SILVER TUBE + PACKAGING + SUSTAINABILITY
   Per Figma 5:2 layout:
   - HA text (y=2248): cols 4-10
   - Silver tube (y=2342, 1165x399): near-full-width, slightly offset left
   - Packaging text (y=2625): cols 1-3
   - Technical cap drawing (y=2668, 493x308): cols 4-6
   - Sustainability text (y=3017): cols 4-6
   - Mycelium (y=2362, far right, 325x619)
   ═══════════════════════════════════ */
.rb-lower-sections {
  margin-top: 48px;
  position: relative;
  overflow: visible;
}

/* HA text row */
.rb-ha {
  margin-top: 0;
  align-items: start;
  position: relative;
  z-index: 3;
}
.rb-ha-text { grid-column: 4 / 11; }

/* Silver tube — NEW Figma 5:254 — horizontal silver product tube.
   Figma: x=-31, y=2342, w=1165, h=399 → near-full-width, mostly left-aligned.
   Positioned below HA text. */
.rb-silver-tube {
  grid-column: 1 / 8;
  margin-top: 20px;
  margin-left: -24px; /* Extend past the grid padding to match Figma x=-31 */
  position: relative;
  z-index: 2;
}
.rb-silver-tube img {
  width: 100%;
  height: auto;
  max-height: 399px;
  object-fit: contain;
  display: block;
}

/* Packaging row — below silver tube */
.rb-packaging {
  margin-top: 40px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.rb-pkg-text { grid-column: 1 / 4; }
.rb-pkg-bottle { grid-column: 4 / 7; }
.rb-pkg-bottle img {
  width: 100%;
  height: 308px;
  object-fit: contain;
}

/* Sustainability */
.rb-sustainability {
  margin-top: 40px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.rb-sus-text { grid-column: 4 / 7; }
.rb-sus-pet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
  grid-column: 7 / 9;
  align-self: end;
}
.rb-sus-pet img { width: 73px; height: 59px; }

/* Mycelium overlay on the far right — spans from HA through Sustainability */
.rb-mycelium-overlay {
  position: absolute;
  right: -24px; /* Extend to the right past grid padding */
  top: 20px; /* Just below HA text */
  width: 22%;
  height: 619px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.rb-mycelium-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide removed elements */
.rb-ha-bottle { display: none; }
.rb-cap-overlay { display: none; }
.rb-pkg-cap { display: none; }
.rb-sus-mycelium { display: none; }

/* ═══════════════════════════════════
   SECTION 7: REVIEWS
   ═══════════════════════════════════ */
.rb-reviews {
  margin-top: 60px;
  content-visibility: auto;
  contain-intrinsic-size: 1668px 400px;
}
.rb-reviews-title { grid-column: 1 / 3; grid-row: 1; align-self: center; margin-bottom: 0; }
.rb-search-reviews {
  grid-column: 9 / 11;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #000;
  color: #ececec;
  font-family: 'PP Mondwest', 'Bebas Neue', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  height: 36px;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.reborn-page .rb-search-reviews:hover { background: #D4D422; color: #000; }
.rb-reviews-table-wrap { grid-column: 1 / 11; grid-row: 2; margin-top: 24px; }
.rb-reviews-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
}
.rb-reviews-table th {
  text-align: left;
  font-weight: 400;
  color: #9f9f9f;
  padding: 8px 12px 8px 0;
  text-transform: lowercase;
  border-bottom: 1px solid #000;
}
.rb-reviews-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
  color: #000;
}
.rb-review-stars { color: #000; font-size: 10px; letter-spacing: 2px; }
.rb-review-img { width: 28px; height: 28px; background: #e0e0e0; display: block; }
.rb-reviews-inner { grid-column: 1 / 11; }

/* ═══════════════════════════════════
   SECTION 8: FOOTER
   ═══════════════════════════════════ */
.rb-footer { margin-top: 12px; padding-bottom: 24px; align-items: center; }
.rb-footer-left {
  grid-column: 1 / 4;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
}
.rb-footer-right {
  grid-column: 9 / 11;
  text-align: right;
  font-family: 'ABC Favorit Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
}
.rb-footer-right a { color: #000; text-decoration: none; }
.rb-footer-right a:hover { text-decoration: underline; }

/* ═══ RESPONSIVE — TABLET ═══ */
@media (max-width: 1024px) {
  .rb-grid { grid-template-columns: repeat(6, 1fr); }
  .rb-hero { min-height: auto; }
  .rb-hero-info { grid-column: 1 / 5; grid-row: 2; align-self: start; }
  .rb-hero-product { grid-column: 1 / 5; grid-row: 1; }
  .rb-hero-product img { height: 500px; }
  .rb-hero-sachet { display: none; }
  .rb-hero-right { grid-column: 5 / 7; grid-row: 1; }
  .rb-bag-wrap { grid-column: 6; }
  .rb-pao { display: none; }
  .rb-ingredients-text { grid-column: 1 / 4; }
  .rb-lab-image { grid-column: 4 / 7; grid-row: 1; }
  .rb-photo-1 { grid-column: 1 / 4; grid-row: 2; }
  .rb-photo-2 { grid-column: 4 / 7; grid-row: 2; }
  .rb-stories { grid-template-rows: auto auto auto; }
  .rb-story-chatgpt { grid-column: 1 / 3; grid-row: 1; }
  .rb-story-peptide { grid-column: 3 / 5; grid-row: 1; }
  .rb-story-snow { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }
  .rb-story-shea-text { grid-column: 3 / 5; grid-row: 2; margin-top: 0; }
  .rb-story-portrait { grid-column: 5 / 7; grid-row: 1 / 4; padding-top: 0; }
  .rb-story-nmn { grid-column: 1 / 4; grid-row: 3; }
  .rb-story-shea-img { grid-column: 1 / 5; grid-row: 4; }
  .rb-ha-text { grid-column: 1 / 7; }
  .rb-silver-tube { grid-column: 1 / 7; margin-left: 0; }
  .rb-silver-tube img { max-height: 280px; }
  .rb-packaging { margin-top: 40px; }
  .rb-pkg-text { grid-column: 1 / 3; }
  .rb-pkg-bottle { grid-column: 3 / 5; }
  .rb-mycelium-overlay { display: none; }
  .rb-sus-text { grid-column: 1 / 4; }
  .rb-sus-pet { grid-column: 4 / 5; }
  .rb-reviews-title { grid-column: 1 / 3; }
  .rb-search-reviews { grid-column: 5 / 7; }
  .rb-reviews-table-wrap { grid-column: 1 / 7; }
  .rb-reviews-inner { grid-column: 1 / 7; }
  .rb-footer-left { grid-column: 1 / 3; }
  .rb-footer-right { grid-column: 5 / 7; }
}

/* ═══ RESPONSIVE — MOBILE ═══ */
@media (max-width: 768px) {
  .rb-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 12px;
    gap: 8px;
  }
  .rb-logo { grid-column: 1; }
  .rb-logo-text { font-size: 32px; line-height: 36px; }
  .rb-logo-4 { margin-right: 16px; }
  .rb-bag-wrap { grid-column: 2; text-align: right; }
  .rb-hero { min-height: auto; padding-top: 12px; }
  .rb-hero-info { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .rb-hero-product { grid-column: 1 / -1; grid-row: 1; }
  .rb-hero-product img { height: 400px; }
  .rb-hero-sachet { display: none; }
  .rb-hero-right { grid-column: 1 / -1; grid-row: 3; flex-direction: row; }
  .rb-hero-thumb { width: 80px; height: 80px; }
  .rb-product-name { font-size: 28px; }
  .rb-product-desc { font-size: 12px; }
  .rb-pao { display: none; }
  .rb-ingredients-text { grid-column: 1 / -1; grid-row: 1; }
  .rb-lab-image { grid-column: 1 / -1; grid-row: 2; }
  .rb-lab-image img { min-height: auto; }
  .rb-photo-1, .rb-photo-2 { grid-column: span 1; grid-row: 3; }
  .rb-photo-1 img, .rb-photo-2 img { height: 240px; }
  .rb-stories { grid-template-rows: auto; }
  .rb-story-chatgpt, .rb-story-peptide, .rb-story-snow,
  .rb-story-shea-text, .rb-story-nmn { grid-column: 1 / -1; grid-row: auto; }
  .rb-story-snow { margin-top: 0; }
  .rb-story-shea-text { margin-top: 0; }
  .rb-story-portrait { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .rb-story-portrait img { min-height: 300px; height: auto; }
  .rb-story-shea-img { grid-column: 1 / -1; grid-row: auto; }
  .rb-story-shea-img img { height: auto; max-height: 400px; }
  .rb-ha-text { grid-column: 1 / -1; }
  .rb-silver-tube { grid-column: 1 / -1; margin-left: 0; }
  .rb-silver-tube img { max-height: 200px; }
  .rb-packaging { margin-top: 24px; }
  .rb-pkg-text, .rb-pkg-bottle { grid-column: 1 / -1; }
  .rb-pkg-bottle img { height: 240px; }
  .rb-mycelium-overlay { display: none; }
  .rb-sus-text { grid-column: 1 / -1; }
  .rb-sus-pet { grid-column: 1 / -1; grid-row: auto; }
  .rb-reviews-title { grid-column: 1 / -1; grid-row: 1; }
  .rb-search-reviews { grid-column: 1 / -1; grid-row: 2; }
  .rb-reviews-table-wrap { grid-column: 1 / -1; grid-row: 3; }
  .rb-reviews-inner { grid-column: 1 / -1; }
  .rb-reviews-table th:nth-child(n+6), .rb-reviews-table td:nth-child(n+6) { display: none; }
  .rb-footer-left, .rb-footer-right { grid-column: 1 / -1; text-align: left; }
}