/* ==========================================================================
   OMG Big Boobs — Components
   Card, badge, section heading, buttons, grids, pricing block, banner.
   Load after omg-base.css.
   ========================================================================== */

/* ---------- Section heading ----------------------------------------------
   The two-tone pattern used on every section: white lead, pink accent.
   ALL VIDEOS / TOP RATED VIDEOS / NEW UPDATES / MOST POPULAR MODELS. */

.omg-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--omg-space-5);
  margin-bottom: var(--omg-space-6);
  flex-wrap: wrap;
}

.omg-heading__text {
  font-size: var(--omg-fs-section);
  /* CHANGE 2026-10-06 (2): bold -> light. Matched against the Figma mobile
     export with the designer font: white lead is Light 300, pink accent is
     Medium 500 - same split as the membership heading. */
  font-weight: var(--omg-w-light);
  line-height: var(--omg-lh-tight);
  letter-spacing: var(--omg-track-heading);
  text-transform: uppercase;
  margin: 0;
}

.omg-heading__accent { color: var(--omg-pink); }
.omg-heading__text .omg-heading__accent { font-weight: var(--omg-w-medium); } /* CHANGE 2026-10-06: Figma pink accent is Medium */

.omg-heading__aside {
  display: flex;
  align-items: center;
  gap: var(--omg-space-3);
}

/* CHANGE 2026-09-15: removed a mobile override that clamped .omg-heading__text to
   28px under 640px. Figma mobile H2 is 32/40 and --omg-fs-section already carries
   that value at the mobile breakpoint, so the token now rules. */

/* ---------- Buttons -------------------------------------------------------
   .omg-btn is the base. Modifiers set the skin. Never style a button by
   element selector — it will collide with the base rules. */

.omg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--omg-space-2);
  padding: var(--omg-space-3) var(--omg-space-5);
  border-radius: var(--omg-radius-pill);
  /* CHANGE 2026-10-06: 12px bold 0.04em -> 16px semibold no tracking per Figma panel */
  font-size: var(--omg-fs-body);
  font-weight: var(--omg-w-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--omg-dur) var(--omg-ease),
              color var(--omg-dur) var(--omg-ease),
              transform var(--omg-dur-fast) var(--omg-ease),
              box-shadow var(--omg-dur) var(--omg-ease);
}

.omg-btn:active { transform: translateY(1px); }

.omg-btn--primary {
  /* CHANGE 2026-09-15: Figma button - #FF419E to #C90943 vertical gradient
     with inner highlight; was flat horizontal pink pair. */
  background: var(--omg-grad-button-fig);
  color: var(--omg-text-on-pink);
  box-shadow: var(--omg-shadow-pink), inset 0 1px 0 rgba(255,255,255,0.35);
}
.omg-btn--primary:hover { background: var(--omg-pink-hover); box-shadow: var(--omg-shadow-pink), inset 0 1px 0 rgba(255,255,255,0.2); }
.omg-btn--primary:active { background: var(--omg-pink-active); }

.omg-btn--ghost {
  background: transparent;
  color: var(--omg-text);
  border: 1px solid var(--omg-border-strong);
}
.omg-btn--ghost:hover {
  border-color: var(--omg-pink);
  color: var(--omg-pink);
}

.omg-btn--light {
  background: var(--omg-text);
  color: var(--omg-pink);
}
.omg-btn--light:hover { background: var(--omg-pink); color: var(--omg-text-on-pink); }

.omg-btn--lg { padding: var(--omg-space-4) var(--omg-space-7); font-size: var(--omg-fs-body); }

.omg-btn__arrow { transition: transform var(--omg-dur) var(--omg-ease); }
.omg-btn:hover .omg-btn__arrow { transform: translateX(3px); }

/* ---------- Filter chips (All / Fantasy / Fetish / …) ---------------------- */

/* CHANGE 2026-10-29: Peter #7 - mega-menu pictograms render pink (sprite
   icons use currentColor after the 09-18 fixes; hardcoded-pink ones match). */
.omg-menu__link .omg-icon { color: var(--omg-pink); flex-shrink: 0; }

/* CHANGE 2026-10-29: Peter #3 - Granny + Slim and Stacked chips (positions
   6-7 after ALL) show only when the row fits. */
@media (max-width: 1180px) {
  .omg-chips .omg-chip:nth-child(n+6) { display: none; }
}
.omg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omg-space-2);
}

.omg-chip {
  padding: var(--omg-space-2) var(--omg-space-4);
  border-radius: var(--omg-radius-pill);
  border: 1px solid var(--omg-border);
  background: var(--omg-surface-1);
  font-size: var(--omg-fs-meta);
  font-weight: var(--omg-w-medium);
  transition: background var(--omg-dur) var(--omg-ease),
              border-color var(--omg-dur) var(--omg-ease);
}
.omg-chip:hover { border-color: var(--omg-border-pink); }

.omg-chip[aria-current='true'],
.omg-chip--active {
  background: var(--omg-pink);
  border-color: var(--omg-pink);
  color: var(--omg-text-on-pink);
}

/* ---------- Tabs (ALL / VIDEOS / PHOTOS) ---------------------------------- */

.omg-tabs {
  display: flex;
  gap: var(--omg-space-5);
  border-bottom: 1px solid var(--omg-border);
  margin-bottom: var(--omg-space-6);
}

.omg-tab {
  position: relative;
  padding-bottom: var(--omg-space-3);
  font-size: var(--omg-fs-meta);
  font-weight: var(--omg-w-semibold);
  letter-spacing: var(--omg-track-button);
  text-transform: uppercase;
  color: var(--omg-text-muted);
  transition: color var(--omg-dur) var(--omg-ease);
}
.omg-tab:hover { color: var(--omg-text); }

.omg-tab[aria-selected='true'] { color: var(--omg-pink); }
.omg-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--omg-pink);
}

/* ---------- Content grid --------------------------------------------------
   4 across at full width, stepping down. Matches the export: 4 x 334 + 3 x 16. */

.omg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--omg-grid-gap);
}

@media (max-width: 1200px) { .omg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .omg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .omg-grid { grid-template-columns: 1fr; } }

/* Mobile A/B variant — Peter's brief calls for a 2-column mobile landing
   tested against 1-column. Set data-omg-variant on <body>. */
body[data-omg-variant='b'] .omg-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 520px) {
  body[data-omg-variant='b'] .omg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--omg-space-2);
  }
}

/* ---------- Content card --------------------------------------------------- */

.omg-card { position: relative; }

.omg-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--omg-radius);
  overflow: hidden;
  background: var(--omg-surface-1);
}

.omg-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--omg-dur-slow) var(--omg-ease),
              opacity var(--omg-dur) var(--omg-ease);
}
.omg-card:hover .omg-card__img { transform: scale(1.04); }

/* Hover-preview video sits over the still. Revealed by omg-tour.js only
   when a preview source exists, so cards without one degrade to the still. */
.omg-card__preview {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--omg-dur) var(--omg-ease);
}
.omg-card[data-preview-active='true'] .omg-card__preview { opacity: 1; }

.omg-card__badge {
  position: absolute;
  top: var(--omg-space-3);
  left: var(--omg-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--omg-space-3);
  border-radius: var(--omg-radius-sm);
  background: rgba(14, 2, 7, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--omg-fs-badge);
  font-weight: var(--omg-w-bold);
  letter-spacing: var(--omg-track-badge);
  text-transform: uppercase;
}

/* Badge variants are visually uniform in the current exports. Kept as
   separate modifiers so they can diverge once Bojan confirms. */
.omg-card__badge--new  { }
.omg-card__badge--hot  { }
.omg-card__badge--video { }
.omg-card__badge--photo { }

.omg-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--omg-dur) var(--omg-ease);
  color: var(--omg-text);
}
.omg-card:hover .omg-card__play { opacity: 1; }

.omg-card__body { padding-top: var(--omg-space-3); }

.omg-card__meta {
  display: flex;
  align-items: center;
  /* CHANGE 2026-09-23: date + views + likes no longer fits one line in narrow
     grid columns; unwrappable flex made the grid track wider than the phone
     viewport (horizontal scroll at 390, HB screenshot). Wrap allowed. */
  flex-wrap: wrap;
  gap: var(--omg-space-2);
  font-size: var(--omg-fs-meta);
  color: var(--omg-text-muted);
  margin-bottom: var(--omg-space-2);
}

.omg-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.omg-card__meta-sep { opacity: 0.5; }

.omg-card__date-short { display: none; }
/* CHANGE 2026-10-06: Peter item 5 - date/views/likes one line on mobile.
   Fits a ~158px column at 360 viewport: nowrap, 11px, 12px icons, short
   2-digit-year date, bullet separators hidden (measured with the font:
   ~152px worst case). Reverses the 09-23 wrap for narrow viewports only. */
@media (max-width: 640px) {
  .omg-card__meta {
    flex-wrap: nowrap;
    font-size: 11px;
    gap: 6px;
  }
  .omg-card__meta-item { gap: 3px; }
  .omg-card__meta .omg-icon { width: 12px; height: 12px; }
  .omg-card__meta-sep { display: none; }
  .omg-card__date-full { display: none; }
  .omg-card__date-short { display: inline; }
}

.omg-card__title {
  font-size: var(--omg-fs-card);
  /* CHANGE 2026-10-06: semibold -> medium, lh snug -> 24px per Figma panel */
  font-weight: var(--omg-w-medium);
  line-height: var(--omg-lh-text);
  margin-bottom: var(--omg-space-1);
  display: -webkit-box;
  -webkit-line-clamp: 1; /* CHANGE 2026-10-06 (3): HB - 1 title line, then ... */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--omg-dur) var(--omg-ease);
}
.omg-card:hover .omg-card__title { color: var(--omg-pink); }

.omg-card__model {
  /* CHANGE 2026-10-06: 13px -> 16/24 per Figma panel (Regular 400 unchanged) */
  font-size: var(--omg-fs-body);
  line-height: var(--omg-lh-text);
  color: var(--omg-text-muted);
  /* CHANGE 2026-10-06 (3): HB - one line, then ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omg-card__model a { color: var(--omg-pink); }
.omg-card__model a:hover { color: var(--omg-pink-hover); }

/* ---------- Model card (portrait) ------------------------------------------
   Used in the horizontal "Most popular models" scroller. Portrait crop,
   not 16:9 — needs its own thumbnail derivative. */

.omg-model-card {
  position: relative;
  flex: 0 0 auto;
  /* CHANGE 2026-09-06: item 9 - model cards matched old tour, not Figma.
     Figma model card is 264x432 (11:18); 3/4 frame was cropping the
     528x864 portraits back to the legacy shape. */
  /* CHANGE 2026-09-06: Peter overrode the Figma 264x432 frame - no gap:
     cards take the pics' native 2:3 ratio and zoom from it. */
  width: 264px;
  aspect-ratio: 2 / 3;
  border-radius: var(--omg-radius);
  overflow: hidden;
  background: var(--omg-surface-1);
}

.omg-model-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--omg-dur-slow) var(--omg-ease);
}
.omg-model-card:hover .omg-model-card__img { transform: scale(1.05); }

.omg-model-card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--omg-space-6) var(--omg-space-4) var(--omg-space-4);
  background: var(--omg-grad-fade);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--omg-w-semibold);
}

/* ---------- Horizontal scroller --------------------------------------------
   Peter's brief: several rows scroll left/right. Native scroll-snap, no JS
   dependency for the scrolling itself. */

.omg-scroller {
  display: flex;
  gap: var(--omg-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--omg-space-2);
}
.omg-scroller::-webkit-scrollbar { display: none; }
.omg-scroller > * { scroll-snap-align: start; }

.omg-scroller__nav {
  display: inline-flex;
  gap: var(--omg-space-2);
}

.omg-scroller__btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--omg-border-strong);
  color: var(--omg-text);
  transition: background var(--omg-dur) var(--omg-ease),
              border-color var(--omg-dur) var(--omg-ease);
}
.omg-scroller__btn:hover { background: var(--omg-surface-2); }
.omg-scroller__btn--active {
  background: var(--omg-pink);
  border-color: var(--omg-pink);
  color: var(--omg-text-on-pink);
}
.omg-scroller__btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Rating --------------------------------------------------------
   AverageScore is a 0–1 ratio in the ElevatedX schema. Percentage is
   score * 100; stars are score * 5. Width of the fill layer is set inline. */

.omg-stars {
  position: relative;
  display: inline-block;
  color: var(--omg-text-dim);
  line-height: 1;
}
.omg-stars__fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--omg-gold);
}

/* ---------- Pagination ----------------------------------------------------- */

.omg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--omg-space-2);
  margin-top: var(--omg-space-7);
}

.omg-pagination__item {
  display: grid;
  place-items: center;
  min-width: 36px; height: 36px;
  padding-inline: var(--omg-space-2);
  border-radius: 50%;
  font-size: var(--omg-fs-meta);
  font-weight: var(--omg-w-medium);
  color: var(--omg-text-muted);
  transition: background var(--omg-dur) var(--omg-ease),
              color var(--omg-dur) var(--omg-ease);
}
.omg-pagination__item:hover { background: var(--omg-surface-2); color: var(--omg-text); }

.omg-pagination__item[aria-current='page'] {
  border: 1px solid var(--omg-pink);
  color: var(--omg-pink);
}

/* ---------- Membership / pricing block -------------------------------------- */

/* CHANGE 2026-09-15: Peter's background photo behind the member gradient. */
.omg-membership::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/bg-member.jpg') center / cover no-repeat;
  /* CHANGE 2026-09-23: Peter 9-23 "make picture less prominent, same as Figma".
     Measured from the export: photo area reads r57-74 where the bare gradient
     is ~r47, so the photo contributes ~0.18, not the 0.55 guess. */
  opacity: 0.18;
}
.omg-membership > * { position: relative; }

.omg-membership {
  position: relative;
  /* CHANGE 2026-09-15: Figma - radius 24, gradient #2F0318/#2F0419/#0E0207.
     Background photo layer comes when Peter's jpg arrives. */
  border-radius: var(--omg-radius-xl);
  overflow: hidden;
  background: var(--omg-grad-member);
  /* CHANGE 2026-09-23: Peter 9-23 "section too tall" - export: panel top to
     heading top = ~75px, not 96. 72 on the scale. */
  padding: 72px var(--omg-space-6);
  text-align: center;
}

.omg-membership__title {
  font-size: var(--omg-fs-hero);
  /* CHANGE 2026-10-06: bold -> light per Figma panel; white text Light 300, pink span Medium 500, lh 64px */
  font-weight: var(--omg-w-light);
  text-transform: uppercase;
  line-height: var(--omg-lh-h1);
  margin-bottom: var(--omg-space-4);
}
.omg-membership__title .omg-heading__accent { font-weight: var(--omg-w-medium); }

.omg-membership__sub {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--omg-space-7);
}
.omg-membership__sub strong { color: var(--omg-pink); font-weight: var(--omg-w-bold); }

.omg-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--omg-space-4);
  max-width: 1100px;
  margin-inline: auto;
  text-align: left;
}
@media (max-width: 900px) { .omg-plans { grid-template-columns: 1fr; } }

.omg-plan {
  position: relative;
  padding: var(--omg-space-6);
  border-radius: var(--omg-radius);
  border: 1px solid var(--omg-border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.omg-plan__price {
  /* CHANGE 2026-10-06: 30px bold -> 32/40 medium per Figma panel */
  font-size: 32px;
  font-weight: var(--omg-w-medium);
  line-height: 40px;
}
/* CHANGE 2026-10-06: 16 regular -> 20/32 light per Figma panel */
.omg-plan__period { font-size: 20px; font-weight: var(--omg-w-light); line-height: 32px; }

.omg-plan__term {
  font-size: var(--omg-fs-meta);
  color: rgba(255,255,255,0.75);
  margin-top: var(--omg-space-1);
}

.omg-plan__billing {
  font-size: var(--omg-fs-meta);
  color: rgba(255,255,255,0.75);
  margin-top: var(--omg-space-5);
  padding-top: var(--omg-space-5);
  border-top: 1px solid var(--omg-border);
}

.omg-plan__cta { width: 100%; margin-top: var(--omg-space-5); }

.omg-plan__flag {
  position: absolute;
  top: var(--omg-space-6);
  right: var(--omg-space-6);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--omg-space-3);
  border-radius: var(--omg-radius-pill);
  background: var(--omg-text);
  color: var(--omg-bg);
  font-size: var(--omg-fs-badge);
  font-weight: var(--omg-w-semibold);
}

/* ---------- Brand banner ------------------------------------------------------ */

.omg-banner {
  /* CHANGE 2026-09-15: Figma Macromastia Heaven - horizontal #511633 to
     #91265A; was the provisional vertical banner gradient. */
  background: var(--omg-grad-heaven);
  /* CHANGE 2026-09-16: Peter's Figma crop - photo fills the band height on
     desktop, so no vertical padding there; stacked mobile keeps padding. */
  padding-block: 0;
}

.omg-banner__inner {
  /* CHANGE 2026-09-16: Figma composition - photo left spanning the full
     band, logo+heading centred, feature list with JOIN NOW directly under it
     on the right. Two grid rows: points bottom-aligned, CTA top-aligned, so
     they read as one centred stack. Band ~3.6:1 at container width. */
  display: grid;
  /* CHANGE 2026-09-16 (2): Figma crop measured - photo is ~square filling
     the band height, ~30% of band width. */
  /* CHANGE 2026-09-23: Peter 9-23 - "align text block to middle vertically":
     rows 1fr auto auto 1fr centre the points+CTA pair as one block instead of
     bottom/top-aligned halves. Band 424 per Peter's panel (was 420). */
  grid-template-columns: 420px 1fr auto;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    "img brand ."
    "img brand points"
    "img brand cta"
    "img brand .";
  align-items: center;
  column-gap: var(--omg-space-8);
  row-gap: var(--omg-space-5);
  min-height: 424px;
}
.omg-banner__img    { grid-area: img;    align-self: stretch; }
.omg-banner__brand  { grid-area: brand; }
.omg-banner__points { grid-area: points; }
.omg-banner__cta    { grid-area: cta; }
@media (max-width: 900px) {
  .omg-banner { padding-block: var(--omg-space-8); }
  .omg-banner__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "img" "brand" "points" "cta";
    min-height: 0;
    gap: var(--omg-space-6);
    text-align: center;
    justify-items: center;
  }
  /* CHANGE 2026-09-15: Peter - landscape phones showed the feature image at
     full container width x 3:4, taller than the screen. When stacked, the
     image keeps its card size instead of inheriting the column width. */
  .omg-banner__img { width: min(240px, 55vw); aspect-ratio: 3 / 4; align-self: center; }
  .omg-banner__points, .omg-banner__cta { align-self: center; }
  /* CHANGE 2026-09-16 (2): stacked mobile keeps rounded photo + smaller logo */
  .omg-banner__img { border-radius: var(--omg-radius); }
  .omg-banner__brand img { width: 160px; }
  .omg-banner__tagline { font-size: 24px; }
}
/* Short landscape viewports: tighten the band so it fits in one screen. */
@media (max-height: 500px) {
  .omg-banner { padding-block: var(--omg-space-5); }
  .omg-banner__img { width: min(180px, 30vw); }
  .omg-banner__inner { gap: var(--omg-space-5); }
}

.omg-banner__img {
  /* CHANGE 2026-10-19: Peter 10-19 - Figma dev-mode values: 340x344, radius 16,
     floating card inside the band (was square-cornered and flush) */
  width: 340px;
  height: 344px;
  border-radius: 16px;
  overflow: hidden;
  align-self: center;
}
.omg-banner__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.omg-banner__tagline {
  /* CHANGE 2026-09-16 (2): Figma crop - heading ~32px (was H3 20px) */
  font-size: 32px;
  line-height: 1.25;
  font-weight: var(--omg-w-bold);
  text-transform: uppercase;
  margin-top: var(--omg-space-5);
}

.omg-banner__points li {
  display: flex;
  align-items: center;
  gap: var(--omg-space-3);
  font-weight: var(--omg-w-medium);
  text-transform: uppercase;
  /* CHANGE 2026-09-16 (2): Figma crop - feature text ~16px, rows 24px apart */
  font-size: 16px;
  letter-spacing: var(--omg-track-badge);
}
.omg-banner__points li + li { margin-top: var(--omg-space-5); }
/* CHANGE 2026-09-16: Figma feature icons are pink. Crown was white because
   it uses currentColor; the other three had #FF419E hardcoded in the sprite
   (now currentColor too). Colour lives here for all four. */
.omg-banner__points .omg-icon { color: var(--omg-pink); flex: 0 0 auto; }

/* ---------- Sticky join bar ----------------------------------------------------
   Peter's brief: appears on every return visit, X dismisses it. */

.omg-joinbar {
  /* CHANGE 2026-09-15: Figma $0.33 banner - floating glass pill aligned to
     the container (Peter: "match desktop site width"), not full-bleed:
     #FFFFFF 8% fill, 1px #FFFFFF 24% border, radius 16, blur kept.
     Height in Figma 96px; padding approximates it. */
  position: fixed;
  left: 50%;
  bottom: var(--omg-space-4);
  /* CHANGE 2026-10-22: Peter - the hidden bar peeked into the viewport
     because the lady overhangs 80px above the bar top. Offset now clears the
     overhang too, and visibility hides whatever still calculates wrong. */
  transform: translate(-50%, calc(100% + var(--omg-space-4) + 96px));
  visibility: hidden;
  width: calc(100% - 2 * var(--omg-space-5));
  max-width: calc(var(--omg-container) - 2 * var(--omg-space-5));
  z-index: var(--omg-z-joinbar);
  display: flex;
  align-items: center;
  gap: var(--omg-space-5);
  padding: var(--omg-space-4) var(--omg-space-6);
  background: var(--omg-glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--omg-glass-border);
  border-radius: var(--omg-radius-lg);
  transition: transform var(--omg-dur-slow) var(--omg-ease);
}
.omg-joinbar[data-visible='true'] { transform: translate(-50%, 0); visibility: visible; }
/* CHANGE 2026-09-23: with the container fix above the content is a true 1384,
   so the bar matches it exactly at desktop (Peter: "match desktop site width")
   instead of subtracting space-5, which now belongs to the outer box. */
@media (min-width: 1024px) {
  .omg-joinbar { max-width: var(--omg-container); }
}

/* CHANGE 2026-09-15: lady cutout overhanging the banner top-left, Figma style. */
/* CHANGE 2026-09-23: Peter 9-23 "the girls twice as big" - Figma bar is 96 tall
   with the lady 176px (80px overhang). Ours grew past 96 and the lady was 150%
   of that. Fixed px now: bar min-height 96 / no block padding, lady 176. */
/* CHANGE 2026-10-06: Peter item 4c - lady-033.png is 718x800 (nearly square),
   so at 176px tall she is ~158px wide; 132px padding let her overlap the copy.
   Padding now clears the measured width: 16 left + 158 img + 14 gap. */
.omg-joinbar { padding-left: 188px; padding-block: 0; min-height: 96px; }
.omg-joinbar__lady {
  position: absolute;
  left: var(--omg-space-4);
  bottom: 0;
  height: 176px;
  width: auto;
  pointer-events: none;
}
/* CHANGE 2026-09-15 (2): mobile rules consolidated into the single block below -
   a later padding reset was cancelling the 96px left padding on phones. */

.omg-joinbar__copy { flex: 1 1 auto; min-width: 0; }
.omg-joinbar__title { font-weight: var(--omg-w-semibold); }
.omg-joinbar__sub { font-size: var(--omg-fs-meta); color: var(--omg-text-muted); }
.omg-joinbar__price { font-size: var(--omg-fs-h4); font-weight: var(--omg-w-bold); }

.omg-joinbar__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--omg-text-muted);
  transition: background var(--omg-dur) var(--omg-ease), color var(--omg-dur) var(--omg-ease);
}
.omg-joinbar__close:hover { background: var(--omg-surface-2); color: var(--omg-text); }

/* CHANGE 2026-09-15 (2): mobile joinbar. HB's 390px screenshot: lady covered the
   copy and the title wrapped one word per line beside the price. Now two rows -
   title / price + button - close pinned top-right, "As low as" hidden. */
@media (max-width: 640px) {
  /* CHANGE 2026-09-23: Peter 9-23 "button elements misaligned" - rebuilt to the
     Figma mobile joinbar: lady bottom-left, row 1 title + sub full width, row 2
     UNLOCK ACCESS then "As low as $0.33/day" beside it, close pinned top-right.
     Sub restored (was hidden), price moves after the button via flex order. */
  .omg-joinbar {
    flex-wrap: wrap;
    gap: 6px var(--omg-space-3);
    /* CHANGE 2026-10-06: Peter item 4c - at 128px tall the lady is ~115px wide;
       96px left padding let her overlap the text. 4 left + 115 img + 9 gap. */
    padding: 12px 40px 12px 128px;          /* right 40 clears the pinned close */
    min-height: 0;
    align-items: center;
  }
  .omg-joinbar__lady { height: 128px; left: 4px; }
  .omg-joinbar__copy { flex: 1 1 100%; }
  .omg-joinbar__title { font-size: 15px; line-height: 1.25; }
  .omg-joinbar__sub { font-size: 12px; line-height: 1.3; }
  .omg-joinbar .omg-btn { order: 2; padding: 10px 16px; font-size: 13px; }
  .omg-joinbar__price { order: 3; flex: 0 0 auto; font-size: 14px; }
  .omg-joinbar__price-lead { font-size: 12px; font-weight: var(--omg-w-regular); }
  .omg-joinbar__close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
}

/* ---------- Mega menu overlay --------------------------------------------------- */

.omg-menu {
  position: fixed;
  inset: 0;
  z-index: var(--omg-z-menu);
  background: rgba(14, 2, 7, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--omg-dur) var(--omg-ease),
              visibility var(--omg-dur) var(--omg-ease);
  overflow-y: auto;
}
.omg-menu[data-open='true'] { opacity: 1; visibility: visible; }

.omg-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* CHANGE 2026-09-23: promo column removed with the menu promo */
  gap: var(--omg-space-8);
  padding-block: var(--omg-space-8);
}
@media (max-width: 1100px) {
  .omg-menu__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .omg-menu__grid { grid-template-columns: 1fr; gap: var(--omg-space-6); }
}

.omg-menu__col + .omg-menu__col {
  border-left: 1px solid var(--omg-border);
  padding-left: var(--omg-space-8);
}
@media (max-width: 1100px) {
  .omg-menu__col + .omg-menu__col { border-left: 0; padding-left: 0; }
}

.omg-menu__links li + li { margin-top: var(--omg-space-4); }

.omg-menu__link {
  display: flex;
  align-items: center;
  gap: var(--omg-space-3);
  font-size: var(--omg-fs-h4);
  font-weight: var(--omg-w-medium);
  transition: color var(--omg-dur) var(--omg-ease),
              transform var(--omg-dur) var(--omg-ease);
}
.omg-menu__link:hover { color: var(--omg-pink); transform: translateX(4px); }
.omg-menu__link img { width: 24px; height: 24px; }

.omg-menu__promo {
  border-radius: var(--omg-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.omg-menu__promo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Icon helper ------------------------------------------------------- */

.omg-icon {
  width: var(--omg-icon-md);
  height: var(--omg-icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
.omg-icon--sm { width: var(--omg-icon-sm); height: var(--omg-icon-sm); }
.omg-icon--lg { width: var(--omg-icon-lg); height: var(--omg-icon-lg); }
.omg-icon--xl { width: var(--omg-icon-xl); height: var(--omg-icon-xl); }

/* ==========================================================================
   Page-level blocks added for the PHP tour build
   ========================================================================== */

/* ---------- Home hero ----------------------------------------------------- */

.omg-hero {
  display: grid;
  grid-template-columns: 1fr 336px; /* CHANGE 2026-09-23: Figma rail 1112..1448 = 336 */
  gap: var(--omg-grid-gap);
}
@media (max-width: 900px) { .omg-hero { grid-template-columns: 1fr; } }

.omg-hero__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--omg-radius-lg);
  overflow: hidden;
  background: var(--omg-surface-1);
}
.omg-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.omg-hero__caption {
  position: absolute;
  left: var(--omg-space-5);
  right: var(--omg-space-5);
  bottom: var(--omg-space-5);
  padding: var(--omg-space-4) var(--omg-space-5);
  border-radius: var(--omg-radius);
  background: rgba(14, 2, 7, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center; /* CHANGE 2026-09-15: HB - centre the one-line caption */
}
.omg-hero__eyebrow { font-size: var(--omg-fs-meta); color: var(--omg-text-muted); }
.omg-hero__title {
  /* CHANGE 2026-09-15: was var(--omg-fs-h4); when H4 dropped 28->20 the promo
     title read as a caption (HB). Own size now, independent of the H3/H4 tokens. */
  font-size: 28px;
  line-height: 1.15;
  font-weight: var(--omg-w-bold);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  /* CHANGE 2026-09-23: Peter 9-23 mobile - "text block too big". Two-line
     caption at 14/16, no DOWNLOAD button on mobile (matches Figma mobile). */
  /* CHANGE 2026-10-06: Peter item 4a - caption box covered most of the mobile
     promo window. Figma mobile measured: compact LEFT-aligned strip, ~12px
     insets (base rule has 24px), eyebrow 13/18, title 14/20, padding ~10x14. */
  .omg-hero__eyebrow { font-size: 13px; line-height: 18px; }
  .omg-hero__title { font-size: 14px; line-height: 20px; }
  .omg-hero__caption {
    padding: 10px 14px;
    left: 12px; right: 12px; bottom: 12px;
    text-align: left;
    border-radius: 12px;
    /* CHANGE 2026-10-06: Peter item 4a - white glass like desktop (base rule
       is dark rgba(14,2,7,0.55); desktop >=1024 uses this white glass). */
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--omg-glass-border);
  }
  /* CHANGE 2026-10-19 (3): Peter - NO button on mobile after all; the title
     text is the clickable JOIN link, so the strip stays as small as possible */
  .omg-hero__cta { display: none; }
}

.omg-hero__rail { display: flex; flex-direction: column; gap: var(--omg-space-4); }

.omg-section--tight { padding-block: var(--omg-space-5); }

/* CHANGE 2026-10-07: listing pages (All videos/photos/models) — Figma puts the
   plum header gradient behind the heading, chips and first card rows, fading
   to the page black. Measured on the All videos export: fade completes ~880
   CSS px from the page top (left-gutter column sample). The layer sits behind
   the content, full-bleed, unlike .omg-topsection's inset hero panel. */
.omg-listing-top {
  position: relative;
  z-index: 0;
}
.omg-listing-top::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -200px;                       /* run up under the header/pill area */
  height: 880px;
  background: linear-gradient(180deg,
    rgba(145,38,90,0.85) 0%,
    rgba(109,28,67,0.85) 40%,
    rgba(14,2,7,0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* CHANGE 2026-09-15: top section - Figma photo panel with gradient overlay. */
.omg-topsection {
  position: relative;
}
.omg-topsection > .omg-container {
  position: relative;
  border-radius: var(--omg-radius-xl);
  overflow: hidden;
  padding-block: var(--omg-space-6);
  background:
    linear-gradient(180deg, rgba(145,38,90,0.85) 0%, rgba(109,28,67,0.85) 55%, rgba(14,2,7,0.97) 100%),
    url('../images/bg-top-section.jpg') center / cover no-repeat;
}

/* Promo trailer rotator */
.omg-promo { background: #000; }
.omg-promo__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--omg-dur-slow) var(--omg-ease);
  pointer-events: none;
}
.omg-promo__video--active { opacity: 1; }
.omg-promo__nav {
  position: absolute;
  top: var(--omg-space-4);
  right: var(--omg-space-4);
  display: flex;
  gap: var(--omg-space-2);
}
/* CHANGE 2026-09-15: HB - inactive nav button was invisible over light
   video frames; dark glass backing on both. */
.omg-promo__nav .omg-scroller__btn {
  background: rgba(14, 2, 7, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--omg-glass-border);
}
.omg-promo__nav .omg-scroller__btn--active,
.omg-promo__nav .omg-scroller__btn:hover {
  background: var(--omg-pink);
  border-color: transparent;
}

/* ---------- Model grid ----------------------------------------------------- */

.omg-model-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--omg-grid-gap);
}
@media (max-width: 1200px) { .omg-model-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .omg-model-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .omg-model-grid { grid-template-columns: repeat(2, 1fr); } }

.omg-model-grid .omg-model-card { width: 100%; }

/* ---------- Show more ------------------------------------------------------ */

.omg-showmore {
  display: flex;
  justify-content: center;
  margin-top: var(--omg-space-7);
}

/* ---------- Empty state ----------------------------------------------------
   An empty screen should say what to do next, not just report absence. */

.omg-empty {
  padding: var(--omg-space-9) var(--omg-space-5);
  text-align: center;
  color: var(--omg-text-muted);
  background: var(--omg-bg-card);
  border-radius: var(--omg-radius-lg);
  border: 1px solid var(--omg-border);
}

/* ---------- Stars ----------------------------------------------------------- */

.omg-stars__bg { color: var(--omg-text-dim); }

/* ---------- Banner brand block ---------------------------------------------- */

.omg-banner__brand { text-align: center; }
/* CHANGE 2026-09-16 (2): Figma logo is ~58% of band height (~245px tall,
   290 wide at 1.185:1). Was the 95x80 img attributes. */
.omg-banner__brand img { margin-inline: auto; width: 290px; height: auto; }

/* ---------- Icon flip (used for the "previous" scroller arrow) --------------- */

.omg-icon--flip { transform: rotate(180deg); }


/* =============================================================================
   MOBILE DENSITY PASS
   CHANGE: 2026-08-18 density - Peter, 15.8.2026: "design the layout in the most
   dense way possible - best utilization of space", with two mobile screenshots
   attached (membership pricing, expanded menu).

   Deliberately NOT a global spacing reduction. The desktop layout is Bojan's
   and Peter has not objected to it, so every rule here is inside a mobile
   media query. Delete this whole block to revert.

   The offenders were rules that never scaled with viewport:
     .omg-membership   padding 96px/32px at ALL widths
     .omg-plan         32px padding + 24px divider + 24px CTA gap, stacked
     .omg-menu__grid   64px gap and 64px block padding
   ============================================================================= */

/* ---- Content grid: two columns on mobile, not one ------------------------- */
/* Bojan drew both a 1-card and a 2-card mobile variant. Two is the denser of
   the two and becomes the default; one card is now the A/B variant. */
@media (max-width: 520px) {
  .omg-grid { grid-template-columns: repeat(2, 1fr); gap: var(--omg-space-2); }
  body[data-omg-variant='single'] .omg-grid { grid-template-columns: 1fr; }
}

/* ---- Membership block ----------------------------------------------------- */
@media (max-width: 900px) {
  /* Keep three plans side by side longer. One column at 900px wastes the width
     and pushes the third plan below the fold. */
  .omg-plans { grid-template-columns: repeat(3, 1fr); gap: var(--omg-space-2); }
}
@media (max-width: 700px) {
  .omg-plans { grid-template-columns: 1fr; gap: var(--omg-space-3); }
}

@media (max-width: 640px) {
  .omg-membership { padding: var(--omg-space-6) var(--omg-space-4); }
  .omg-membership__title { margin-bottom: var(--omg-space-2); }
  .omg-membership__sub   { margin-bottom: var(--omg-space-5); }

  .omg-plan { padding: var(--omg-space-4); }

  /* The billing line had 24px above it and 24px below the rule. Halved. */
  .omg-plan__billing {
    margin-top: var(--omg-space-3);
    padding-top: var(--omg-space-3);
  }
  .omg-plan__cta  { margin-top: var(--omg-space-3); }
  .omg-plan__flag { top: var(--omg-space-4); right: var(--omg-space-4); }
}

/* ---- Mega menu ------------------------------------------------------------ */
@media (max-width: 640px) {
  .omg-menu__grid {
    gap: var(--omg-space-5);
    padding-block: var(--omg-space-5);
  }
  .omg-menu__links li + li { margin-top: var(--omg-space-3); }

  /* The promo image is the least useful thing on a phone menu and pushes the
     links up the screen. Hidden rather than shrunk. */
  .omg-menu__promo { display: none; }
}

/* CHANGE 2026-09-06: item 10 - landscape phones are wider than 640px but
   short, so the promo escaped the hide rule above and reappeared in the
   hamburger. Height catches every phone in landscape without touching
   tablets or desktop. */
@media (max-height: 500px) {
  .omg-menu__promo { display: none; }
}

/* ---- Section rhythm ------------------------------------------------------- */
/* 48px between sections on mobile is generous when sections are short. */
@media (max-width: 640px) {
  .omg-section { padding-block: var(--omg-space-6); }
  .omg-container { padding-inline: var(--omg-space-4); }
}

/* =============================================================================
   QA SAFE MODE (CHANGE 2026-09-15)
   body.omg-safe is set by inc/header.php when the omg_safe cookie is present
   (?safe=1 on any tour6 URL to enable, ?safe=0 to disable). Blurs photos and
   video for layout screenshots. Never affects real visitors.
   ========================================================================== */
body.omg-safe img,
body.omg-safe video { filter: blur(28px) !important; }
body.omg-safe img[src$=".svg"] { filter: none !important; }          /* logo */
body.omg-safe .omg-membership::before { filter: blur(40px); }
body.omg-safe .omg-topsection {                                      /* CHANGE 2026-09-23: photo layer moved to the section at >=1024 */
  background-image: linear-gradient(180deg, rgba(145,38,90,0.85) 0%, rgba(109,28,67,0.85) 55%, rgba(14,2,7,0.97) 100%);
}
body.omg-safe .omg-topsection > .omg-container {                     /* drop photo layer; blurring the container would blur the hero content */
  background-image: linear-gradient(180deg, rgba(145,38,90,0.85) 0%, rgba(109,28,67,0.85) 55%, rgba(14,2,7,0.97) 100%);
}
body.omg-safe::after {
  content: 'SAFE MODE';
  position: fixed; top: 8px; right: 8px; z-index: 9999;
  padding: 4px 10px; border-radius: 6px;
  background: #FF419E; color: #fff;
  font: 700 11px/1 sans-serif; letter-spacing: .08em;
  pointer-events: none;
}

/* ---------- Top section, desktop parity (CHANGE 2026-09-23) ----------------
   Measured from Ihor's Home Page export (2x, 48px browser chrome subtracted):
   panel inset 8 all round, radius 24, top 8 -> bottom 880, header pill floats
   over it; hero 64..1096 x 176..824 (1032x648, 16:10, r24); rail 1112..1448
   (336) = heading 56 + 16 + card 280 + 16 + card 280 = 648, so the rail
   bottom meets the hero bottom (Peter: "one compact block"); caption glass
   inset 8, 96 tall, r16, light glass, eyebrow 20 regular + title 20 bold,
   DOWNLOAD right; promo arrows 56px circles 32 in from the hero edges,
   vertically centred. Peter 9-23: "background wide, under the menu",
   "smaller font", "white background". */
@media (min-width: 1024px) {
  .omg-topsection {
    position: relative;
    z-index: 0;
    margin: -112px 8px 0;            /* pill is 16 + 104 = 120 tall; panel top lands at y=8 */
    padding: 168px 0 56px;           /* hero top at 176 from the page top */
    border-radius: var(--omg-radius-xl);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(145,38,90,0.85) 0%, rgba(109,28,67,0.85) 55%, rgba(14,2,7,0.97) 100%),
      url('../images/bg-top-section.jpg') center / cover no-repeat;
  }
  .omg-topsection > .omg-container {
    border-radius: 0;
    overflow: visible;
    padding-block: 0;
    background: none;
  }
  .omg-header { z-index: var(--omg-z-header, 50); }

  .omg-hero { align-items: stretch; }
  .omg-hero__main { display: flex; }
  .omg-hero__media { aspect-ratio: auto; height: auto; flex: 1 1 auto; border-radius: var(--omg-radius-xl); }
  .omg-hero__rail { gap: var(--omg-space-4); }
  .omg-hero__rail .omg-heading { margin-bottom: 0; }
  .omg-hero__rail .omg-card { flex: 1 1 0; }

  .omg-hero__caption {
    left: 8px; right: 8px; bottom: 8px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--omg-space-5);
    padding: 0 48px 0 24px;
    border-radius: var(--omg-radius-lg);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--omg-glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: left;
  }
  .omg-hero__eyebrow { font-size: 20px; line-height: 28px; color: var(--omg-text); font-weight: var(--omg-w-regular, 400); }
  .omg-hero__title   { font-size: 20px; line-height: 28px; font-weight: var(--omg-w-bold); }
  .omg-hero__cta     { flex: 0 0 auto; }

  .omg-promo__nav {
    top: 0; right: 0; bottom: 0; left: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    pointer-events: none;
  }
  .omg-promo__nav .omg-scroller__btn {
    width: 56px; height: 56px;
    pointer-events: auto;
  }
}

/* CHANGE 2026-09-23: Peter 9-23 mobile "picture too big" - Figma mobile hero
   is 343x184 (aspect ~1.86), far shorter than the desktop-derived 16:10. */
@media (max-width: 640px) {
  .omg-hero__media { aspect-ratio: 343 / 184; }
}

/* CHANGE 2026-09-23: menu top row - close left, Login right (Peter 9-23). */
.omg-menu .omg-header__inner { justify-content: space-between; }

/* CHANGE 2026-09-23: Peter 9-23 "models section too big" on mobile. Figma
   mobile shows two portrait cards per row: card ~164px wide on the 375 frame.
   Ratio stays Peter's 2:3; only the width shrinks. */
@media (max-width: 640px) {
  .omg-model-card { width: 164px; }
}

/* CHANGE 2026-09-23: grid/flex children default to min-width auto, so an
   unshrinkable child (long meta row, long title) widens the whole track past
   the viewport on phones. Floor removed for card containers everywhere. */
.omg-card, .omg-model-card, .omg-hero__rail .omg-card { min-width: 0; }

/* CHANGE 2026-09-23: wrapped card meta left a dangling bullet at the line end
   on phones (HB screenshot). Separators off at <=640; spacing via gap. */
@media (max-width: 640px) {
  .omg-card__meta-sep { display: none; }
}

/* CHANGE 2026-09-23: set-card scroller (Top Rated). Fixed slide width so the
   track overflows and the arrows have something to scroll; 4 x 334 + 3 x 16
   = 1384 = container, matching the old grid at full width. */
.omg-scroller--cards { gap: var(--omg-grid-gap); }
.omg-scroller--cards .omg-card { flex: 0 0 334px; }
@media (max-width: 640px) {
  .omg-scroller--cards .omg-card { flex: 0 0 260px; }
}

/* CHANGE 2026-10-06: Peter item 4d - header language selector (globe + EN). */
.omg-header__lang { display: inline-flex; align-items: center; gap: 6px; }
.omg-header__lang-code { font-size: 14px; font-weight: var(--omg-w-semibold); line-height: 1; }

/* CHANGE 2026-10-06: Peter item 4b - minimize mobile free space, measured from
   the Figma mobile tiles: heading-to-cards ~24 (was 32), search-to-promo ~12
   (topsection container top padding was 32). Desktop (>=1024) unaffected -
   its topsection block overrides padding anyway. */
@media (max-width: 1023px) {
  .omg-heading { margin-bottom: var(--omg-space-5); }
  .omg-topsection > .omg-container { padding-block: var(--omg-space-3) var(--omg-space-4); }
}

/* CHANGE 2026-10-06: Peter - card body on mobile: smaller white title, denser
   stack; model line kept at full size so the pink link stays easy to tap. */
@media (max-width: 640px) {
  .omg-card__body { padding-top: 8px; }
  .omg-card__meta { margin-bottom: 6px; }
  /* CHANGE 2026-10-06 (3): HB - small single title line. */
  .omg-card__title { font-size: 13px; line-height: 17px; margin-bottom: 2px; }
  /* CHANGE 2026-10-06 (4): Peter - model line same size as the white title. */
  .omg-card__model { font-size: 13px; line-height: 17px; }
}

/* CHANGE 2026-10-06: Peter/HB - black band between search and promo panel on
   mobile: the topsection's top padding showed the #0E0207 page background
   between the plum header gradient and the plum panel. Gap trimmed to 12px
   (Figma) and painted with the header gradient's end color, top strip only -
   the area below the panel stays page-black as designed. */
@media (max-width: 1023px) {
  .omg-topsection {
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(107,38,71,0.78) 0, rgba(107,38,71,0.78) 12px, transparent 12px);
  }
}

/* CHANGE 2026-10-06: Peter/HB "align always" - a 2-line title pushed its
   Model: line lower than the neighbor card's. Cards already stretch to equal
   height in the grid; make the body a column and pin the model line to the
   bottom so it aligns across every row. */
.omg-card { display: flex; flex-direction: column; }
.omg-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.omg-card__model { margin-top: auto; }

/* CHANGE 2026-10-06: Peter - "Most popular" flag overlapped the price on
   narrow plan cards (flag is absolute top-right, price flows under it).
   When a flag precedes the price, reserve its width so the price wraps
   instead of colliding. No effect on wide cards. */
.omg-plan__flag + .omg-plan__price { padding-right: 128px; }
@media (max-width: 640px) {
  .omg-plan__flag + .omg-plan__price { padding-right: 112px; }
}

/* CHANGE 2026-10-07: categories.php — sidebar list + wide card grid, from the
   Categories Figma export (sidebar name/count rows with hairlines, 3-col 16:9
   cards with count badge top-left, name below). */
.omg-cats {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--omg-space-7);
  align-items: start;
}
.omg-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.omg-cats__row a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--omg-space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--omg-border);
  color: inherit;
  text-decoration: none;
}
.omg-cats__row a:hover .omg-cats__name { color: var(--omg-pink); }
.omg-cats__name { font-size: 18px; }
.omg-cats__count { font-size: var(--omg-fs-meta); color: rgba(255,255,255,0.7); }
.omg-cats__row--extra { display: none; }
.omg-cats--open .omg-cats__row--extra { display: block; }
.omg-cats__more {
  margin-top: var(--omg-space-4);
  background: none;
  border: 0;
  padding: 0;
  color: var(--omg-pink);
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
}
.omg-cats--open .omg-cats__more { display: none; }

.omg-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--omg-space-5);
}
.omg-catcard {
  display: block;
  color: inherit;
  text-decoration: none;
}
.omg-catcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--omg-radius);
  overflow: hidden;
  background: var(--omg-surface-1);
}
.omg-catcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.omg-catcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: var(--omg-radius-sm);
  background: rgba(14, 2, 7, 0.45);
  border: 1px solid var(--omg-glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--omg-fs-meta);
}
.omg-catcard__name {
  display: block;
  margin-top: var(--omg-space-3);
  font-size: 18px;
}
.omg-catcard:hover .omg-catcard__name { color: var(--omg-pink); }

@media (max-width: 900px) {
  .omg-cats { grid-template-columns: 1fr; }
  .omg-cats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--omg-space-3); }
}

/* CHANGE 2026-10-07: video.php — individual update page, from the Individual
   video export: player panel, 4 pink gradient info tiles, title/meta block,
   hashtag row, comment form + comment cards. */
.omg-watch__player {
  position: relative;
  border-radius: var(--omg-radius-xl);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.omg-watch__player video,
.omg-watch__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.omg-watch__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.omg-watch__play .omg-icon { opacity: 0.85; }
.omg-watch__play:hover .omg-icon { opacity: 1; }

.omg-watch__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--omg-space-5);
  margin-top: var(--omg-space-5);
}
.omg-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--omg-space-4);
  align-items: center;
  padding: var(--omg-space-5);
  border-radius: var(--omg-radius-lg);
  background: linear-gradient(180deg, #FF7AC4 0%, #FF1493 100%);
  color: #fff;
  text-decoration: none;
}
.omg-tile__icon { grid-row: 1 / span 2; }
.omg-tile__title {
  font-weight: var(--omg-w-semibold, 600);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 24px;
}
.omg-tile__sub { font-size: var(--omg-fs-meta); opacity: 0.9; }

.omg-watch__title { margin: 0 0 var(--omg-space-3); }
.omg-watch__desc { color: rgba(255,255,255,0.8); max-width: 900px; }
.omg-watch__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--omg-space-5);
  margin-top: var(--omg-space-5);
}
.omg-watch__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--omg-fs-meta);
}
.omg-watch__share {
  background: none;
  border: 0;
  padding: 0;
  color: var(--omg-pink);
  font: inherit;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.omg-watch__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--omg-space-2);
  margin-top: var(--omg-space-5);
}
.omg-watch__model {
  color: var(--omg-pink);
  text-decoration: none;
  font-weight: var(--omg-w-medium);
  margin-right: var(--omg-space-2);
}
.omg-watch__model:hover { text-decoration: underline; }

.omg-comments__head {
  display: flex;
  align-items: baseline;
  gap: var(--omg-space-3);
  margin-bottom: var(--omg-space-5);
}
.omg-comments__title { margin: 0; }
.omg-comments__note { color: rgba(255,255,255,0.6); font-size: var(--omg-fs-meta); }

.omg-comment-form input,
.omg-comment-form textarea {
  width: 100%;
  background: var(--omg-surface-1);
  border: 1px solid var(--omg-border);
  border-radius: var(--omg-radius-lg);
  color: inherit;
  font: inherit;
  padding: 16px 20px;
}
.omg-comment-form input::placeholder,
.omg-comment-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.omg-comment-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--omg-space-5);
  margin-bottom: var(--omg-space-5);
}
.omg-comment-form textarea { resize: vertical; margin-bottom: var(--omg-space-5); }

.omg-comments { margin-top: var(--omg-space-7); }
.omg-comments__nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--omg-space-4);
}
.omg-comments__row { display: flex; gap: var(--omg-space-5); overflow-x: auto; }
.omg-comment {
  flex: 0 0 min(560px, 85%);
  background: var(--omg-surface-1);
  border-radius: var(--omg-radius-lg);
  padding: var(--omg-space-5);
}
.omg-comment__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--omg-space-3);
  margin-bottom: var(--omg-space-3);
}
.omg-comment__name { font-weight: var(--omg-w-medium); }
.omg-comment__date { color: rgba(255,255,255,0.6); font-size: var(--omg-fs-meta); }
.omg-comment__text { margin: 0; color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
  .omg-watch__tiles { grid-template-columns: repeat(2, 1fr); gap: var(--omg-space-3); }
  .omg-comment-form__row { grid-template-columns: 1fr; gap: var(--omg-space-3); }
}
@media (max-width: 640px) {
  .omg-watch__tiles { grid-template-columns: 1fr 1fr; }
  .omg-tile { padding: var(--omg-space-4); }
  .omg-tile__sub { display: none; }
}

/* CHANGE 2026-10-07: model.php — profile header, portrait + stats table,
   from the Individual models export (dotted leaders between label and pink
   value, two stat columns). */
.omg-profile__head {
  display: flex;
  align-items: center;
  gap: var(--omg-space-4);
  margin-bottom: var(--omg-space-6);
}
.omg-profile__name { margin: 0; }
.omg-profile {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--omg-space-7);
  align-items: start;
}
.omg-profile__photo {
  border-radius: var(--omg-radius-lg);
  overflow: hidden;
  background: var(--omg-surface-1);
  aspect-ratio: 2 / 3;
}
.omg-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.omg-profile__bio {
  margin: 0 0 var(--omg-space-6);
  color: rgba(255,255,255,0.8);
  max-width: 820px;
}
.omg-profile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--omg-space-8, 64px);
}
.omg-profile__col { margin: 0; }
.omg-profile__row {
  display: flex;
  align-items: baseline;
  gap: var(--omg-space-3);
  padding: 14px 0;
}
.omg-profile__row dt { white-space: nowrap; }
.omg-profile__row dt::after {
  content: '';
  display: inline-block;
}
.omg-profile__row::after { content: none; }
.omg-profile__row dd {
  margin: 0;
  color: var(--omg-pink);
  text-align: right;
  flex: 1;
}
.omg-profile__row {
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}
.omg-profile__col .omg-profile__row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .omg-profile { grid-template-columns: 1fr; }
  .omg-profile__photo { max-width: 340px; }
  .omg-profile__stats { grid-template-columns: 1fr; }
}

/* CHANGE 2026-10-07: models.php index — browse strips (by name A-Z, by breast
   size) and the SORT BY control, from the All models export. Active letter is
   a filled pink square per the Figma. */
.omg-browse {
  display: flex;
  align-items: baseline;
  gap: var(--omg-space-5);
  margin-top: var(--omg-space-5);
  flex-wrap: wrap;
}
.omg-browse__label { white-space: nowrap; }
.omg-browse__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omg-space-2) var(--omg-space-4);
}
.omg-browse__item {
  color: inherit;
  text-decoration: none;
  font-weight: var(--omg-w-medium);
  padding: 2px 8px;
  border-radius: var(--omg-radius-sm);
}
.omg-browse__item:hover { color: var(--omg-pink); }
.omg-browse__item--active {
  background: var(--omg-pink);
  color: var(--omg-text-on-pink);
}
.omg-browse__item--active:hover { color: var(--omg-text-on-pink); }

.omg-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--omg-space-3);
  padding: 14px 20px;
  border: 1px solid var(--omg-glass-border);
  border-radius: var(--omg-radius-lg);
  background: rgba(255,255,255,0.06);
}
.omg-sort__label { text-transform: uppercase; font-size: var(--omg-fs-meta); }
.omg-sort__select {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.omg-sort__select option { color: #111; }

@media (max-width: 640px) {
  .omg-browse { gap: var(--omg-space-2) var(--omg-space-3); }
  .omg-browse__items { gap: var(--omg-space-1, 4px) var(--omg-space-2); }
}

/* CHANGE 2026-10-07: search.php result count line */
.omg-search-summary {
  margin: 0 0 var(--omg-space-5);
  color: rgba(255,255,255,0.7);
}

/* CHANGE 2026-10-07: hiring.php — all .omg-hire* styles. Layout from the
   Hiring Figma export (figref desktop-hiring-00..06). Photo placeholders
   stand in until Peter supplies assets. */

.omg-hire-hero__sub {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--omg-text-muted);
  max-width: 720px;
}

.omg-hire__eyebrow {
  font-size: var(--omg-fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--omg-pink);
  margin: 0 0 8px;
}

.omg-hire-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 40px;
}
.omg-hire-head__intro {
  font-size: 16px;
  line-height: 24px;
  color: var(--omg-text-muted);
  margin: 0;
}

/* Pay cards */
.omg-hire-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.omg-hire-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--omg-glass-border);
  border-radius: 16px;
  padding: 32px 24px;
}
.omg-hire-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--omg-pink);
  color: #fff;
  margin-bottom: 20px;
}
.omg-hire-card__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  margin: 0 0 8px;
}
.omg-hire-card__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--omg-text-muted);
  margin: 0;
}

.omg-hire-paylogos {
  display: flex;
  justify-content: center;
  gap: 48px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--omg-text-muted);
  opacity: 0.6;
}

.omg-hire-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.omg-hire-cta--left { justify-content: flex-start; }

/* Grow your followers */
.omg-hire-grow {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: center;
}
.omg-hire-grow__photo {
  position: relative;
  border-radius: 16px;
  min-height: 520px;
  overflow: hidden;
}
.omg-hire-grow__badges {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.omg-hire-badge {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--omg-glass-border);
  backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 500;
  width: max-content;
}
.omg-hire-grow__intro {
  font-size: 16px;
  line-height: 24px;
  color: var(--omg-text-muted);
  margin: 0 0 32px;
}
.omg-hire-feature {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--omg-glass-border);
}
.omg-hire-feature:last-of-type { border-bottom: 0; }
.omg-hire-feature__icon { color: var(--omg-pink); flex: 0 0 auto; }
.omg-hire-feature__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  margin: 0 0 4px;
}
.omg-hire-feature__text {
  font-size: 15px;
  line-height: 22px;
  color: var(--omg-text-muted);
  margin: 0;
}

/* Photo shoot steps */
.omg-hire-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.omg-hire-step { position: relative; padding-top: 16px; }
.omg-hire-step__num {
  position: absolute;
  top: -24px;
  right: 0;
  font-size: 120px;
  line-height: 1;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.omg-hire-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  right: -40px;
  width: 32px;
  border-top: 2px dashed var(--omg-pink);
}
.omg-hire-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--omg-pink);
  color: #fff;
  margin-bottom: 20px;
}
.omg-hire-step__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  margin: 0 0 8px;
}
.omg-hire-step__text {
  font-size: 15px;
  line-height: 22px;
  color: var(--omg-text-muted);
  margin: 0;
}

/* Application form */
.omg-hire-form {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.omg-hire-form form { grid-column: 1; }
.omg-hire-stepper {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.omg-hire-stepper__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--omg-text-muted);
  font-weight: 500;
  flex: 0 0 auto;
}
.omg-hire-stepper__item:not(:last-child) {
  margin-right: 80px;
  position: relative;
}
.omg-hire-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 64px;
  margin-left: 8px;
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
}
.omg-hire-stepper__item--current {
  background: var(--omg-pink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 65, 158, 0.35);
}
.omg-hire-stepper__item--done {
  background: var(--omg-pink);
  color: #fff;
}

.omg-hire-panel {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
}
.omg-hire-panel--active { display: block; }
.omg-hire-panel__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 24px;
}
.omg-hire-panel__note {
  font-size: 16px;
  line-height: 24px;
  color: var(--omg-text-muted);
  margin: 0 0 24px;
}

.omg-hire-field { display: block; margin-bottom: 20px; }
.omg-hire-field__label {
  display: block;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
}
.omg-hire-field input[type="text"],
.omg-hire-field input[type="email"],
.omg-hire-field input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--omg-glass-border);
  color: #fff;
  font: inherit;
  font-size: 16px;
}
.omg-hire-field input::placeholder { color: var(--omg-text-muted); }

.omg-hire-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.omg-hire-check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.omg-hire-check input { position: absolute; opacity: 0; pointer-events: none; }
.omg-hire-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--omg-glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: transparent;
  flex: 0 0 auto;
}
.omg-hire-check input:checked + .omg-hire-check__box {
  background: var(--omg-pink);
  border-color: var(--omg-pink);
  color: #fff;
}
.omg-hire-check__label { font-size: 15px; line-height: 22px; }

.omg-hire-drops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 8px;
}
.omg-hire-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  border: 2px dashed var(--omg-glass-border);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  color: var(--omg-text-muted);
}
.omg-hire-drop:hover { border-color: var(--omg-pink); color: #fff; }
.omg-hire-drop input { display: none; }
.omg-hire-drop__text { font-size: 16px; color: #fff; }
.omg-hire-drop__hint { font-size: 13px; }

.omg-hire-nav {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.omg-hire-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.omg-hire-nav__btn--prev { background: rgba(255, 255, 255, 0.1); }
.omg-hire-nav__btn--next { background: var(--omg-pink); }
.omg-hire-nav__btn[disabled] { opacity: 0.35; cursor: default; }

.omg-hire-form__photos {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 24px;
}
.omg-hire-form__photos .omg-hire__photo {
  border-radius: 16px;
  min-height: 240px;
}

/* Placeholder fill until Peter's assets arrive */
.omg-hire__photo--placeholder {
  background: linear-gradient(160deg, #6B2647 0%, #2a0d1d 100%);
  border: 1px solid var(--omg-glass-border);
}

@media (max-width: 900px) {
  .omg-hire-head { grid-template-columns: 1fr; gap: 12px; }
  .omg-hire-cards { grid-template-columns: 1fr; }
  .omg-hire-grow { grid-template-columns: 1fr; }
  .omg-hire-grow__photo { min-height: 360px; }
  .omg-hire-steps { grid-template-columns: 1fr; gap: 32px; }
  .omg-hire-step:not(:last-child)::after { display: none; }
  .omg-hire-form { grid-template-columns: 1fr; }
  .omg-hire-form__photos { display: none; }
  .omg-hire-checks { grid-template-columns: 1fr; }
  .omg-hire-drops { grid-template-columns: 1fr; }
  .omg-hire-paylogos { gap: 24px; font-size: 16px; flex-wrap: wrap; }
  .omg-hire-stepper__item:not(:last-child) { margin-right: 40px; }
  .omg-hire-stepper__item:not(:last-child)::after { width: 28px; margin-left: 6px; }
}

/* CHANGE 2026-10-08: Peter 10-08 feedback #9 + A - model % rating replaces stars; bio links now render as HTML */
.omg-profile__rating {
  display: inline-block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--omg-pink);
}
.omg-profile__bio a {
  color: var(--omg-pink);
  text-decoration: underline;
}
.omg-profile__bio a:hover {
  text-decoration: none;
}

/* CHANGE 2026-10-08: Peter 10-08 feedback C - menu header action pair (JOIN pink + LOGIN white) */
.omg-menu__actions {
  display: flex;
  gap: var(--omg-space-3);
  align-items: center;
}

/* CHANGE 2026-10-08: Peter 10-08 feedback #1 - join page (join.php): signup panel,
   plan tabs, payment buttons, features panel. Plan card reuses .omg-plan__* type. */
.omg-join {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--omg-space-6);
  align-items: start;
}
.omg-join__panel {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--omg-glass-border);
  border-radius: 16px;
  padding: var(--omg-space-6);
}
.omg-join__title {
  font-size: var(--omg-fs-h2);
  line-height: 1.15;
  font-weight: 300;
  text-transform: uppercase;
  margin: 0 0 var(--omg-space-5);
}
.omg-join__subtitle {
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  text-transform: uppercase;
  margin: 0 0 var(--omg-space-5);
}
.omg-join__label {
  display: block;
  font-size: 14px;
  margin-bottom: var(--omg-space-2);
  color: var(--omg-text-dim, rgba(255,255,255,0.7));
}
.omg-join__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--omg-glass-border);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
  margin-bottom: var(--omg-space-5);
}
.omg-join__input::placeholder { color: rgba(255,255,255,0.45); }
.omg-join__input:focus { outline: 2px solid var(--omg-pink); outline-offset: 0; }

.omg-join__tabs {
  display: flex;
  gap: var(--omg-space-2);
  margin-bottom: var(--omg-space-4);
}
.omg-join__tab {
  flex: 1;
  position: relative;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--omg-glass-border);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.omg-join__tab.is-active {
  background: var(--omg-pink);
  border-color: var(--omg-pink);
  color: var(--omg-text-on-pink, #fff);
}
.omg-join__tab-badge {
  position: absolute;
  top: -10px;
  right: -4px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: var(--omg-pink);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

.omg-join__plancard {
  display: none;
  position: relative;
  border: 1px solid var(--omg-pink);
  border-radius: 12px;
  padding: var(--omg-space-5);
  margin-bottom: var(--omg-space-5);
}
.omg-join__plancard.is-active { display: block; }

.omg-join__paybtns {
  display: flex;
  flex-direction: column;
  gap: var(--omg-space-3);
}
.omg-join__paybtn {
  width: 100%;
  justify-content: center;
  cursor: pointer;
  font: inherit;
}
.omg-join__note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--omg-text-dim, rgba(255,255,255,0.7));
  margin: var(--omg-space-4) 0 0;
}
.omg-join__tos {
  font-size: 12px;
  line-height: 18px;
  color: rgba(255,255,255,0.55);
  margin: var(--omg-space-3) 0 0;
}
.omg-join__tos a { color: var(--omg-pink); }

.omg-join__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.omg-join__feature {
  display: flex;
  align-items: center;
  gap: var(--omg-space-4);
  padding: 14px 0;
  font-size: 16px;
  line-height: 24px;
}
.omg-join__feature + .omg-join__feature {
  border-top: 1px solid var(--omg-glass-border);
}
.omg-join__feature-icon {
  color: var(--omg-pink);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .omg-join { grid-template-columns: 1fr; }
  .omg-join__panel { padding: var(--omg-space-5) var(--omg-space-4); }
  .omg-join__tab { font-size: 12px; padding: 10px 4px; }
}

/* CHANGE 2026-10-13: Peter 10-13 #1 - join page static model grid (no links) */
.omg-join-models {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--omg-space-4);
}
.omg-join-models__item { margin: 0; }
.omg-join-models__item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.omg-join-models__item figcaption {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .omg-join-models { grid-template-columns: repeat(3, 1fr); }
}

/* CHANGE 2026-10-14: Peter 10-14 #1 - biller logos strip on the join page */
.omg-join__paylogos {
  display: block;
  margin-top: var(--omg-space-4);
  max-width: 100%;
  height: 28px;
  width: auto;
}

/* CHANGE 2026-10-14: legal text page (terms.php) */
.omg-legal { max-width: 860px; }
.omg-legal h2 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  text-transform: uppercase;
  margin: var(--omg-space-6) 0 var(--omg-space-3);
}
.omg-legal p {
  font-size: 15px;
  line-height: 24px;
  color: var(--omg-text-dim, rgba(255,255,255,0.75));
  margin: 0 0 var(--omg-space-3);
}
.omg-legal a { color: var(--omg-pink); }

/* CHANGE 2026-10-16: Peter 10-16 #4 - photo set page, square thumb grid per Figma */
.omg-photogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.omg-photogrid__item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.omg-photogrid__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.omg-photogrid__item:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
  .omg-photogrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
}

/* CHANGE 2026-10-16: hiring form submit confirmation */
.omg-hire-sent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--omg-pink);
  font-weight: 600;
  margin: 0 0 var(--omg-space-4);
}

/* CHANGE 2026-10-16: model document upload page */
.omg-docupload { max-width: 560px; }
.omg-docupload__intro { color: var(--omg-text-dim, rgba(255,255,255,0.75)); margin: 0 0 var(--omg-space-4); }
.omg-docupload__form .omg-btn { margin-top: var(--omg-space-2); }
.omg-docupload__msg { font-weight: 600; margin: 0 0 var(--omg-space-4); }
.omg-docupload__msg--ok { color: #6fe39b; }
.omg-docupload__msg--error { color: #ff7a9c; }

/* CHANGE 2026-10-19: Peter 10-19 - biller logo chips on join page; model page 1-col mobile grid */
.omg-join__paylogos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--omg-space-4);
}
.omg-join__paylogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  height: 28px;
  box-sizing: border-box;
}
.omg-join__paylogo img {
  height: 16px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .omg-model-updates .omg-grid { grid-template-columns: 1fr; }
}

/* CHANGE 2026-10-19: Peter 10-19 - model row on watch page: avatar + name at double size */
.omg-watch__model {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* CHANGE 2026-10-19 (2): Peter - clearly smaller than the title; was 28px */
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: var(--omg-pink);
}
.omg-watch__model-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* CHANGE 2026-10-19: category card autoplaying mini trailer */
.omg-catcard__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CHANGE 2026-10-19: Peter 10-19 hero - no caps on the title, smaller CTA,
   video fills the rounded box (the letterbox slivers were the "strange
   rounded edges" on mobile) */
.omg-hero__title { text-transform: none; }
.omg-hero__cta { padding: 10px 18px; font-size: 14px; }
.omg-promo__video { object-fit: cover; }
@media (max-width: 640px) {
  .omg-hero__media { aspect-ratio: 16 / 9; }
}

/* CHANGE 2026-10-19 (2): catcard media hosts the hover preview video */
.omg-catcard__media { position: relative; }

/* CHANGE 2026-10-19 (3): hero title is a link; keep its look, show it's clickable */
a.omg-hero__title { color: inherit; text-decoration: none; display: inline-block; }
a.omg-hero__title:hover { color: var(--omg-pink); }

/* CHANGE 2026-10-19 (4): the preview reveal was scoped to .omg-card only - catcards played invisibly */
.omg-catcard[data-preview-active='true'] .omg-card__preview { opacity: 1; }

/* CHANGE 2026-10-22: Peter - tiles took half the mobile screen. Now slim
   equal chips: small icon, one text line, tight padding. */
@media (max-width: 640px) {
  .omg-watch__tiles { grid-auto-rows: 1fr; gap: var(--omg-space-2); margin-top: var(--omg-space-3); }
  .omg-tile {
    align-content: center;
    align-items: center;
    padding: 10px 12px;
    column-gap: 10px;
    border-radius: 12px;
  }
  .omg-tile__title { font-size: 12px; line-height: 16px; }
  .omg-tile__sub { display: none; }
  .omg-tile__icon { width: 20px; height: 20px; }
}

/* CHANGE 2026-10-22: Peter - plan buttons misaligned when billing text wraps;
   cards are now columns with the button pinned to the bottom */
.omg-plan { display: flex; flex-direction: column; }
.omg-plan__cta { margin-top: auto; }
.omg-plan__billing { margin-bottom: var(--omg-space-4); }

/* CHANGE 2026-10-22: Peter - biller chips spilled out of the join panel on
   mobile; the old 28px strip height still applied to the container */
.omg-join__paylogos { height: auto; max-width: 100%; }

/* CHANGE 2026-10-26: Peter #2 - discounts opt-in on the join page */
.omg-join__optin {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--omg-text-dim, rgba(255,255,255,0.75));
  margin: -8px 0 var(--omg-space-4);
  cursor: pointer;
}
.omg-join__optin input { accent-color: var(--omg-pink); width: 16px; height: 16px; }

/* CHANGE 2026-10-26: Peter #3/#4 - review page */
.omg-review__h { font-size: 22px; text-transform: uppercase; margin: var(--omg-space-6) 0 var(--omg-space-3); }
.omg-review__row {
  display: flex;
  justify-content: space-between;
  gap: var(--omg-space-4);
  align-items: flex-start;
  border: 1px solid var(--omg-glass-border);
  border-radius: 12px;
  padding: var(--omg-space-4);
  margin-bottom: var(--omg-space-3);
}
.omg-review__meta { font-size: 14px; line-height: 22px; }
.omg-review__meta a { color: var(--omg-pink); margin-right: 10px; }
.omg-review__files { display: flex; gap: 10px; }
.omg-review__files img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }

/* CHANGE 2026-11-05: Peter #3 - category page header (eyebrow, count,
   description, join CTA) */
.omg-cat-eyebrow { color: var(--omg-pink); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; margin: 0 0 4px; }
.omg-cat-count { color: rgba(255,255,255,.55); margin: 4px 0 12px; }
.omg-cat-desc { max-width: 560px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 16px; padding: 12px 18px; margin: 0 0 16px; }
.omg-cat-join { margin-bottom: 24px; }

/* CHANGE 2026-11-05: Peter #1 (SEO) - About section above the footer */
.omg-about p { color: rgba(255,255,255,.65); max-width: 860px; margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.omg-about__title { font-size: 20px; margin: 0 0 12px; }
.omg-about a { color: var(--omg-pink); }