/**
 * PB Redesign - Header Styles (v1)
 *
 * Goal: match the provided comps:
 * - At top: transparent header, WHITE Playboy logo centered, Subscribe button, MENU + burger on right.
 * - We are temporarily DISABLING scroll state while we perfect transparency/z-index.
 *
 * Implementation: keep the theme's original header HTML; override styles using `.main-top--redesign`.
 */

/* ==========================================================================
   Homepage layout fixes (remove the top “white strip”)
   ========================================================================== */

/* The theme adds padding to `.section_1` on the homepage.
   That padding exposes the BODY background above the hero (looks like a white strip).
   For the comp, the hero should start flush at the top. */
/* Site margin override */
:root {
  --grid-padding-x: 1.25rem; /* Default Desktop */
}

@media screen and (max-width: 676px) {
  :root {
    --grid-padding-x: 18px; /* Mobile Polish: Exact match to Article Page */
  }
}

/* Prevent iOS overscroll bounce / scrolling past viewport */
html, body {
  overscroll-behavior: none;
  margin: 0 !important;
  padding: 0 !important;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* NUCLEAR RESET: Force all homepage containers to start at viewport top */
.page_home,
.page_home .main-container,
.page_home .wrap_home,
.wrap_home {
  margin-top: 0 !important;
  padding-top: 0 !important;
  max-width: 100% !important;
}

.page_home .section.section_1,
.page_home .wrap_home .section.section_1,
.wrap_home .section.section_1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure cards container has no top margin */
.page_home .cards_lede-home,
.wrap_home .cards_lede-home {
  margin-top: 0 !important;
}

/* Homepage: completely remove ad placement that might create gap */
.page_home .aplace.aplace_top {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Header container / behavior
   ========================================================================== */

/* Override ALL base theme padding - be very specific */
.main-top.main-top--redesign,
.main-top.main-top--redesign.main-top_with-banner,
.main-top.main-top--redesign.main-top_level-2,
.main-top.main-top--redesign.main-top_with-banner.main-top_level-2 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  padding-top: 0 !important; /* theme adds padding-top; we don't want it */
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  height: 64px; /* tighter header like comp */
  overflow: visible !important;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; /* Smooth scroll effects */
}

/* Make the inner wrapper truly full-width and on top */
.main-top.main-top--redesign .main-top__inner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateY(0) !important;
  max-width: none !important;
  width: 100% !important;
  z-index: 10000 !important;
  transition: transform 0.5s ease !important;
}

/* Nav hidden state - slides up off screen */
.main-top.main-top--redesign.nav-hidden .main-top__inner {
  transform: translateY(-100%) !important;
}

/* Hide the ribbon for redesign (comps do not show it) */
.main-top.main-top--redesign .main-top__banner {
  display: none !important;
}

/* Hide level 2/3 nav (comps show only a single row) */
.main-top.main-top--redesign .main-top__level-2,
.main-top.main-top--redesign .main-top__level-3 {
  display: none !important;
}

/* Make header row transparent at top - proper flexbox centering */
.main-top.main-top--redesign .main-top__level-1 {
  background: transparent !important;
  height: 64px;
  padding: 0 32px !important; /* Horizontal padding only - no top/bottom */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
  transition: background-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
}

/* Reset any negative margins on header buttons - prevents dead zone */
.main-top.main-top--redesign .main-top__level-1 .buttons,
.main-top.main-top--redesign .main-top__level-1 .main-top__left,
.main-top.main-top--redesign .main-top__level-1 .main-top__right {
  margin: 0 !important;
  padding: 0 !important;
}

/* Buttons wrapper - reset base theme margins and center vertically */
.main-top.main-top--redesign .main-top__right .buttons {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  --margin-top: 0 !important;
  --grid-gutter-y: 0 !important;
}

/* Reset margin on button itself */
.main-top.main-top--redesign .main-top__right .buttons > * {
  margin: 0 !important;
}

/* Scroll state: frosted glass effect */
.main-top.main-top--redesign.is-scrolled .main-top__level-1 {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
}

/* Blur effect when image is scrolling under nav */
.main-top.main-top--redesign.nav-blurred .main-top__level-1 {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Also apply blur to the inner element if it exists */
.main-top.main-top--redesign.nav-blurred .main-top__inner {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Default (top-of-page) color system: white icons/logo */
.main-top.main-top--redesign {
  --color-front: #fff;
}

/* Scrolled color system: black icons/logo on white header */
.main-top.main-top--redesign.is-scrolled {
  --color-front: #000;
}

/* Center the logo on desktop */
.main-top.main-top--redesign .main-top__level-1 {
  position: relative;
}

/* Logo container - centered horizontally and vertically */
.main-top.main-top--redesign .main-top__left {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

/* Logo hidden state - fades out with nav */
.main-top.main-top--redesign.nav-hidden .main-top__left {
  opacity: 0;
}

/* Custom logo - 4px spacing from nav top/bottom (64px - 8px = 56px) */
.main-top.main-top--redesign .logo {
  width: 311px !important;
  height: 56px !important;
  background-color: transparent !important;
  -webkit-mask: url('../images/logo-playboy.svg') center / contain no-repeat !important;
  mask: url('../images/logo-playboy.svg') center / contain no-repeat !important;
  background-image: none !important;
  background-color: #fff !important;
}

/* Scrolled state: logo turns black */
.main-top.main-top--redesign.is-scrolled .logo {
  background-color: #000 !important;
}

/* Right side alignment - position absolute to ensure it's on the right */
.main-top.main-top--redesign .main-top__right {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Subscribe button: solid white with black text */
.main-top.main-top--redesign .btn_main {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Scrolled state: black fill with white text */
.main-top.main-top--redesign.is-scrolled .btn_main {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

/* MENU label next to burger icon - fixed width prevents layout shift when changing to CLOSE */
.main-top.main-top--redesign .icon_burger {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 85px; /* Fixed width to accommodate both "MENU ≡" and "CLOSE ×" */
}

.main-top.main-top--redesign .icon_burger:before {
  content: "MENU";
  display: inline-block;
  margin-right: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-front);
  min-width: 52px;
  text-align: right;
}

/* ==========================================================================
   Homepage Desktop - Scroll Effects
   Transparent at top, white frosted glass when scrolled, colors invert
   ========================================================================== */

/* Homepage default state: transparent header, white elements */
.page_home .main-top.main-top--redesign {
  --color-front: #fff;
}

.page_home .main-top.main-top--redesign .main-top__level-1 {
  background: transparent !important;
}

.page_home .main-top.main-top--redesign .logo {
  background-color: #fff !important;
}

.page_home .main-top.main-top--redesign .btn_main {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}

.page_home .main-top.main-top--redesign .icon_burger:after {
  background-color: #fff !important;
}

/* Homepage SCROLLED state: frosted glass, black elements */
.page_home .main-top.main-top--redesign.is-scrolled {
  --color-front: #000;
}

.page_home .main-top.main-top--redesign.is-scrolled .main-top__level-1 {
  background: #fff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.page_home .main-top.main-top--redesign.is-scrolled .logo {
  background-color: #000 !important;
}

.page_home .main-top.main-top--redesign.is-scrolled .btn_main {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

.page_home .main-top.main-top--redesign.is-scrolled .icon_burger:after {
  background-color: #000 !important;
}

/* ==========================================================================
   Mobile
   Theme breakpoint for header is 676px in desktop.scss, so match that.
   ========================================================================== */

@media screen and (max-width: 676px) {
  /* Logo aligns left on mobile - override fixed positioning */
  .main-top.main-top--redesign .main-top__left {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-shrink: 0;
  }

  .main-top.main-top--redesign .main-top__level-1 {
    padding: 12px 18px !important; /* Match 18px mobile margin */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Homepage mobile: transparent header at start */
  .page_home .main-top.main-top--redesign .main-top__level-1 {
    background: transparent !important;
  }

  /* Homepage mobile: white header when scrolled */
  .page_home .main-top.main-top--redesign.is-scrolled .main-top__level-1 {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Force WHITE logo on homepage mobile start */
  .page_home .main-top.main-top--redesign .logo {
    width: 7rem !important;
    height: 1.4rem !important;
    background-color: #fff !important; /* White logo start */
  }

  /* Force BLACK logo when scrolled or menu open */
  .page_home .main-top.main-top--redesign.is-scrolled .logo,
  body.menu-open .main-top.main-top--redesign .logo {
    background-color: #000 !important;
  }

  /* Right side elements - reset absolute positioning for mobile */
  .main-top.main-top--redesign .main-top__right {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Button styling for mobile - proper centering */
  .main-top.main-top--redesign .btn_main {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    min-height: 28px;
    position: relative;
  }

  /* Button text override - use ::after for JOIN text */
  /* Hide original text, use ::after for new text */
  .main-top.main-top--redesign .btn_main span {
    font-size: 0;
    line-height: 0;
    width: 0;
    overflow: hidden;
  }
  
  /* Absolutely position the new text so it doesn't affect layout */
  .main-top.main-top--redesign .btn_main::after {
    content: "JOIN";
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Button styling for mobile - START WHITE (homepage) */
  .page_home .main-top.main-top--redesign .btn_main {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
  }

  /* Button styling SCROLLED - BLACK */
  .page_home .main-top.main-top--redesign.is-scrolled .btn_main,
  body.menu-open .main-top.main-top--redesign .btn_main {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
  }

  /* Hide MENU text, keep burger icon */
  .main-top.main-top--redesign .icon_burger:before {
    display: none;
  }
  
  /* Fixed width for burger icon on mobile - 44px minimum touch target */
  .main-top.main-top--redesign .icon_burger {
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  /* Burger icon styling for mobile - START WHITE */
  .page_home .main-top.main-top--redesign .icon_burger:after {
    background-color: #fff !important;
  }

  /* Burger icon styling SCROLLED - BLACK */
  .page_home .main-top.main-top--redesign.is-scrolled .icon_burger:after,
  body.menu-open .main-top.main-top--redesign .icon_burger:after {
    background-color: #000 !important;
  }
}

/* ==========================================================================
   Menu Open State - Header color flip
   ========================================================================== */

/* When menu is open: white header background */
body.menu-open .main-top.main-top--redesign .main-top__level-1 {
  background: #fff !important;
}

/* When menu is open: black logo */
body.menu-open .main-top.main-top--redesign .logo {
  background-color: #000 !important;
}

/* When menu is open: black subscribe button with white text */
body.menu-open .main-top.main-top--redesign .btn_main {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* When menu is open: black text/icons */
body.menu-open .main-top.main-top--redesign {
  --color-front: #000;
}

/* When menu is open: "MENU" changes to "CLOSE" */
body.menu-open .main-top.main-top--redesign .icon_burger:before {
  content: "CLOSE";
  color: #000;
  min-width: 52px;
  text-align: right;
}

/* When menu is open: style the burger button for CLOSE + X layout */
body.menu-open .main-top.main-top--redesign .icon_burger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Override the existing :after (which shows the hamburger) to show X instead */
body.menu-open .main-top.main-top--redesign .icon_burger:after,
body.menu-open .main-top.main-top--redesign.is-scrolled .icon_burger:after {
  content: "×";
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: #000;
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  width: auto !important;
  height: auto !important;
}

/* On mobile, hide CLOSE text and just show X icon */
@media screen and (max-width: 676px) {
  body.menu-open .main-top.main-top--redesign .icon_burger:before {
    display: none !important; /* Hide CLOSE text on mobile */
  }
  
  /* Keep same min-width when menu is open */
  body.menu-open .main-top.main-top--redesign .icon_burger {
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  
  /* Show X icon on mobile when menu is open */
  body.menu-open .main-top.main-top--redesign .icon_burger:after {
    content: "×" !important;
    font-size: 1.6rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ==========================================================================
   Header buttons (match comp)
   ========================================================================== */

.main-top.main-top--redesign .btn_main {
  border-radius: 0 !important;
  padding: 0.55rem 1.5rem !important;
  font-size: 0.55rem !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: border-color 0.2s ease !important;
}

/* Subtle hover - slight transparency + border */
.main-top.main-top--redesign .btn_main:hover {
  opacity: 0.9;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* When scrolled (black button) - lighter border on hover */
.main-top.main-top--redesign.is-scrolled .btn_main:hover {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* When menu open (black button) - lighter border on hover */
body.menu-open .main-top.main-top--redesign .btn_main:hover {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   Top Slider (homepage)
   ========================================================================== */

/* Hero slider - fit to viewport */
.card_lede-home,
.card_lede-home .card__image {
  height: 100vh;
}

/* Hero gradient overlays */
.hero-gradient {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-gradient--top {
  top: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-gradient--bottom {
  bottom: 0;
  height: 50%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Hero content - truly centered on viewport */
.card_lede-home .card__inner {
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 100vw;
  padding: 0 20px;
  box-sizing: border-box;
}

.card_lede-home .card__issue {
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 24px;
}

.card_lede-home .card__description {
  margin-top: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Playboy Visuelt", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.card_lede-home .btn.btn_primary {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 0;
  width: 136px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.card_lede-home .btn.btn_primary:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: #fff;
  color: #fff;
}

.card_lede-home .buttons {
  margin-top: 4px;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Hero carousel dots */
.cards_lede-home .flickity-page-dots {
  bottom: 32px !important;
  z-index: 100 !important;
  position: absolute !important;
}

.cards_lede-home .flickity-page-dots .flickity-page-dot {
  width: 6px !important;
  height: 6px !important;
  margin: 0 5px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: none !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.3s ease;
}

.cards_lede-home .flickity-page-dots .flickity-page-dot:focus {
  outline: none !important;
  box-shadow: none !important;
}

.cards_lede-home .flickity-page-dots .flickity-page-dot.is-selected {
  background: #fff !important;
}

@media screen and (max-width: 676px) {
  .card_lede-home .card__issue {
    font-size: 42px;
    line-height: 0.95;
    letter-spacing: 0;
  }

  /* Fix mobile viewport height issues */
  .card_lede-home,
  .card_lede-home .card__image {
    height: 100svh; /* Use small viewport height if available */
    min-height: -webkit-fill-available; /* iOS fix */
  }

  .card_lede-home .card__inner {
    bottom: 60px; /* Position content above dots */
    padding: 0 18px;
    max-width: 100%;
  }

  .card_lede-home .buttons {
    margin-top: 24px;
    margin-bottom: 60px; /* Restore space between button and dots */
  }

  /* Keep dots at bottom */
  .cards_lede-home .flickity-page-dots {
    bottom: 32px !important;
  }

  .card_lede-home .card__description {
    font-size: 13px;
    max-width: 100%; /* Allow text to fill container */
  }
}

/* ==========================================================================
   Menu overlay - 40% black behind the drawer
   ========================================================================== */

.main-top.main-top--redesign ~ .overlay {
  top: 64px !important; /* Below the header */
  background-color: rgba(0, 0, 0, 0.4) !important; /* 40% black */
  z-index: 9997 !important; /* Below the menu drawer */
}

/* ==========================================================================
   Menu drawer (right panel) - match comp
   ========================================================================== */

/* Only apply the new menu styling when the redesigned header is present */
.main-top.main-top--redesign ~ .main-menu {
  left: 0 !important;
  top: 64px !important; /* Position below the header */
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  z-index: 9998 !important; /* Below the header (which is 9999-10000) */
  --color-front: #000; /* text/icons */
  --color-back: #fff;  /* panel background */
  --width: min(26rem, 92vw);
}

.main-top.main-top--redesign ~ .main-menu .main-menu__inner {
  right: 0 !important;
}

.main-top.main-top--redesign ~ .main-menu .main-menu__content {
  padding: 24px 32px !important;
  background-color: var(--color-back) !important;
  position: relative;
  z-index: 1;
  height: calc(100vh - 64px); /* Full height minus header */
  overflow-y: auto;
}

/* Hide the topbar inside menu - SUBSCRIBE and CLOSE are now in the header */
.main-top.main-top--redesign ~ .main-menu .main-menu__topbar {
  display: none;
}

.main-top.main-top--redesign ~ .main-menu .main-menu__subscribe {
  display: inline-block;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  padding: 0.55rem 0.95rem;
  font-size: 0.55rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Override the theme's icon-mask close button */
.main-top.main-top--redesign ~ .main-menu .main-menu__close {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-top.main-top--redesign ~ .main-menu .main-menu__close:after {
  content: \"×\";
  font-size: 1rem;
  line-height: 1;
}

/* Menu items - main navigation */
.main-top.main-top--redesign ~ .main-menu .items {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 3px;
  margin: 0; /* Remove any default margin */
}

.main-top.main-top--redesign ~ .main-menu .items a {
  display: block;
  padding: 16px 32px;
  margin: -4px -32px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.main-top.main-top--redesign ~ .main-menu .items a:hover {
  background-color: #f7f7f5;
}

.main-top.main-top--redesign ~ .main-menu .delimiter {
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0.75rem 0;
}

/* Bottom links (Sign in / Subscribe) */
.main-top.main-top--redesign ~ .main-menu .links {
  margin-top: 1rem;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
}

.main-top.main-top--redesign ~ .main-menu .links a {
  display: inline-block;
  padding: 3px 0;
  margin-left: 0 !important;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  text-align: left !important;
  position: relative;
  width: fit-content;
}

/* Underline that grows from left to right on hover */
.main-top.main-top--redesign ~ .main-menu .links a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s ease;
}

.main-top.main-top--redesign ~ .main-menu .links a:hover:after {
  width: 100%;
}

/* Hide copyright text */
.main-top.main-top--redesign ~ .main-menu .text {
  display: none;
}

/* Hide the original "More" item from PHP menu (we have our own accordion) */
.main-top.main-top--redesign ~ .main-menu .items a[href*="more"],
.main-top.main-top--redesign ~ .main-menu .items .item_plus {
  display: none;
}

/* ==========================================================================
   MORE Accordion
   ========================================================================== */

.main-top.main-top--redesign ~ .main-menu .menu-accordion {
  margin: 0;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  margin: -4px -32px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  width: calc(100% + 64px);
  transition: background-color 0.2s ease;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__trigger:hover {
  background-color: #f7f7f5;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__icon {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: #999; /* Same gray as arrow icons */
  margin-left: auto; /* Push to far right */
}

/* When accordion is open, show minus instead of plus */
.main-top.main-top--redesign ~ .main-menu .menu-accordion.is-open .menu-accordion__icon {
  /* Content changed via JS */
}

/* Override arrow icons on menu items to use simple chevron */
.main-top.main-top--redesign ~ .main-menu .items .item:after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  font-size: 28px;
  font-weight: 300;
  color: #999;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__content {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 32px 12px 80px;
  background-color: #f5f3ef;
  margin: 8px -32px;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion.is-open .menu-accordion__content {
  display: flex;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__content a {
  display: inline-block;
  padding: 8px 0;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  position: relative;
}

/* Underline hover effect for submenu items */
.main-top.main-top--redesign ~ .main-menu .menu-accordion__content a:after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s ease;
}

.main-top.main-top--redesign ~ .main-menu .menu-accordion__content a:hover:after {
  width: 100%;
}

@media screen and (max-width: 676px) {
  .main-top.main-top--redesign ~ .main-menu {
    --width: 100vw;
  }
  .main-top.main-top--redesign ~ .main-menu .main-menu__content {
    padding: 1rem 1.25rem 2.5rem !important;
    height: calc(100vh - 64px);
  }
  
  /* Align chevrons with page gutter (match delimiter line end) */
  .main-top.main-top--redesign ~ .main-menu .items .item:after {
    right: 1.25rem !important; /* Match content padding */
  }
}

/* ==========================================================================
   Latest Stories section (homepage)
   ========================================================================== */

.latest-stories {
  background: #fff;
  color: #000;
  padding: 1rem var(--grid-padding-x) 0;
  position: relative;
  z-index: 200; /* Above article header */
}

/* Article page variant - no categories */
.latest-stories--article {
  padding-bottom: 6rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 3rem;
  margin-top: 0; /* Remove gap */
  clear: both;
  background: #fff;
  position: relative;
  z-index: 200; /* Above article header */
}

.latest-stories--article .latest-stories__categories {
  display: none !important;
}

.latest-stories--article .latest-stories__header {
  margin-bottom: 2.5rem; /* Tighter spacing */
  justify-content: center;
}

.latest-stories--article .latest-stories__title {
  order: 1; 
  align-self: center !important;
  text-align: center;
  font-family: "Masthead"; /* Match homepage */
  font-weight: 400;
  font-size: 1.35rem; /* Match homepage */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}

.latest-stories--article .latest-stories-card__body {
  margin-bottom: 1rem; /* Match homepage spacing */
}

.latest-stories--article .latest-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Large desktop - fixed widths with more gap */
@media screen and (min-width: 1280px) {
  .latest-stories--article .latest-stories__grid {
    grid-template-columns: repeat(3, 360px);
    gap: 6rem;
    justify-content: center;
  }
  
  .latest-stories--article .latest-stories-card:not(:first-child):before {
    left: -3rem;
  }
}

/* Tablet - 2 columns */
@media screen and (min-width: 677px) and (max-width: 900px) {
  .latest-stories--article .latest-stories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .latest-stories--article .latest-stories-card:nth-child(2):before {
    display: block;
  }
  
  .latest-stories--article .latest-stories-card:nth-child(3):before {
    display: none;
  }
}

/* Default divider position */
.latest-stories--article .latest-stories-card:not(:first-child):before {
  left: -1.5rem;
}

/* Make cards flex so images align at bottom */
.latest-stories--article .latest-stories-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.latest-stories--article .latest-stories-card__body {
  flex: 1;
}

.latest-stories--article .latest-stories-card__image {
  margin-top: auto;
}

/* Category label */
.latest-stories--article .latest-stories-card__category {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.latest-stories--article .latest-stories-card__text {
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Max 5 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-stories--article .latest-stories-card__text strong {
  display: inline; /* Title and body on same line */
}

/* Card image hover - grow effect */
.latest-stories--article .latest-stories-card__image {
  transition: transform 0.4s ease;
  overflow: hidden;
}

.latest-stories--article .latest-stories-card:hover .latest-stories-card__image {
  transform: scale(1.03);
}

/* Card text underline on hover */
.latest-stories--article .latest-stories-card:hover .latest-stories-card__text strong {
  text-decoration: underline;
}

.latest-stories__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.65rem;
  margin-bottom: 2rem;
}

.latest-stories__title {
  order: 2;
  align-self: flex-start;
  font-family: "PlayboyVisuelt", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.latest-stories__categories {
  display: none !important;
  order: 1;
  /* display: flex; */
  flex-wrap: wrap;
  gap: 1.4rem;
  width: 100%;
  justify-content: center;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid #E8E8E8;
  margin-bottom: 0.5rem;
}

.latest-stories__category {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  position: relative;
}

/* Underline that grows from left to right on hover */
.latest-stories__category:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s ease;
}

.latest-stories__category:hover:after {
  width: 100%;
}

.latest-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Large desktop - restore original spacing */
@media screen and (min-width: 1280px) {
  .latest-stories__grid {
    grid-template-columns: repeat(3, 360px);
    gap: 6rem;
    justify-content: center;
  }
}

/* Tablet - 2 columns */
@media screen and (min-width: 677px) and (max-width: 900px) {
  .latest-stories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  /* Hide third card divider, show second */
  .latest-stories-card:nth-child(2):before {
    display: block;
  }
  
  .latest-stories-card:nth-child(3):before {
    display: none;
  }
}

.latest-stories-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Divider line positioned in the gap */
.latest-stories-card:not(:first-child):before {
  content: "";
  position: absolute;
  left: -1.5rem; /* Half the default 3rem gap */
  top: 0;
  bottom: 0;
  width: 1px;
  background: #E5E5E5; /* Light grey divider */
}

/* Large desktop - adjust divider for 6rem gap */
@media screen and (min-width: 1280px) {
  .latest-stories-card:not(:first-child):before {
    left: -3rem; /* Half the 6rem gap */
  }
}

/* Tablet - adjust divider for 2rem gap */
@media screen and (min-width: 677px) and (max-width: 900px) {
  .latest-stories-card:not(:first-child):before {
    left: -1rem; /* Half the 2rem gap */
  }
}

.latest-stories-card__body {
  display: block;
  margin-bottom: 1.25rem; /* Slightly more space before image */
  text-decoration: none;
  color: inherit;
}

  .latest-stories-card__image,
  .latest-stories-card:first-child .latest-stories-card__image,
  .latest-stories-card:nth-child(2) .latest-stories-card__image,
  .latest-stories-card:nth-child(3) .latest-stories-card__image {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 66.5% !important; /* 236/355 = 0.665 = ~3:2 Landscape (desktop) */
    background: #f3f3f3 !important;
    background-image: var(--image) !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 2px !important;
    flex: none !important;
    margin-top: auto !important; /* Push image to bottom of card */
  }

/* Reset any pseudo-elements that might affect height */
.latest-stories-card__image:before,
.latest-stories-card__image:after {
  display: none !important;
  content: none !important;
}

.latest-stories-card__date {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px; /* Increased spacing before title */
}

/* Text container */
.latest-stories-card__text {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #1a1a1a;
  margin: 0;
}

.latest-stories-card__text strong {
  font-weight: 700;
}

.latest-stories-card__text .readmore-link {
  color: #000;
  text-decoration: underline;
}

@media screen and (max-width: 676px) {
  .latest-stories {
    padding: 40px var(--grid-padding-x) 34px;
  }

  .latest-stories__header {
    gap: 0.6rem;
  }

  .latest-stories__grid {
    grid-template-columns: 1fr;
    gap: 0; /* Remove gap, use padding instead */
  }

  .latest-stories__title {
    display: none;
  }

  .latest-stories__category {
    font-size: 0.75rem;
  }

  .latest-stories-card {
    border-left: none;
    padding-left: 0;
    padding-top: 18px; /* Specific request */
    padding-bottom: 18px; /* Specific request */
    border-top: 1px solid #E5E5E5; /* Light grey horizontal divider */
  }

  /* Remove divider from first card */
  .latest-stories-card:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* Hide vertical dividers on mobile */
  .latest-stories-card:not(:first-child):before {
    display: none;
  }

  /* Match desktop text vibe - increased line height for readability */
  .latest-stories-card__text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .latest-stories-card__text strong {
    font-weight: 600 !important;
  }

  .latest-stories-card__date {
    margin-bottom: 12px !important;
  }

  .latest-stories-card__body {
    margin-bottom: 1rem !important;
  }

  /* Homepage Latest Stories - same landscape ratio as desktop */
  .latest-stories-card__image,
  .latest-stories-card:first-child .latest-stories-card__image,
  .latest-stories-card:nth-child(2) .latest-stories-card__image,
  .latest-stories-card:nth-child(3) .latest-stories-card__image {
    padding-bottom: 66.5% !important; /* ~3:2 Landscape, same as desktop */
  }

  /* Article page "More From Playboy" mobile layout */
  .latest-stories--article {
    padding: 1.5rem 18px 2rem !important;
    border-top: none !important;
  }
  
  /* Title on mobile - left aligned, change to "Read More" */
  .latest-stories--article .latest-stories__title {
    display: block !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    font-size: 1.1rem !important;
    font-family: "Masthead" !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #000 !important;
  }
  
  /* Hide original text, show "Read More" */
  .latest-stories--article .latest-stories__title {
    visibility: hidden;
    position: relative;
  }
  
  .latest-stories--article .latest-stories__title::after {
    content: "Read More";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .latest-stories--article .latest-stories__header {
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .latest-stories--article .latest-stories__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .latest-stories--article .latest-stories-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-height: auto;
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  
  .latest-stories--article .latest-stories-card:last-child {
    border-bottom: none !important;
  }

  /* Text on left */
  .latest-stories--article .latest-stories-card__body {
    flex: 1 !important;
    order: 1 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important; /* Remove top padding for tighter alignment */
  }

  /* Image on right - Larger size */
  .latest-stories--article .latest-stories-card__image,
  .latest-stories--article .latest-stories-card:first-child .latest-stories-card__image,
  .latest-stories--article .latest-stories-card:nth-child(2) .latest-stories-card__image,
  .latest-stories--article .latest-stories-card:nth-child(3) .latest-stories-card__image {
    order: 2 !important;
    width: 130px !important;
    min-width: 130px !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    padding-bottom: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    background-color: #f0f0f0;
  }

  /* Category - Show on mobile, styled subtly */
  .latest-stories--article .latest-stories-card__category {
    display: block !important;
    font-size: 10px !important;
    color: rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  /* Title only - hide teaser text */
  .latest-stories--article .latest-stories-card__text {
    font-size: 0 !important; /* Hide body text */
    margin: 0 !important;
  }

  /* Refined Title Typography */
  .latest-stories--article .latest-stories-card__text strong {
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    display: block !important;
  }

  /* No dividers on mobile */
  .latest-stories--article .latest-stories-card:not(:first-child):before {
    display: none !important;
  }

  /* Article body headings on mobile */
  .page_story .wp-block-heading {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   Monthly Playmate section
   ========================================================================== */

.monthly-playmate {
  background: #fff;
  padding: 0;
}

.monthly-playmate__header {
  padding: 0.75rem 0 0.5rem;
  text-align: center;
}

.monthly-playmate__title {
  font-family: "PlayboyVisuelt", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.monthly-playmate__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.monthly-playmate__image {
  position: relative;
  width: 100%;
  height: calc(100vh - 64px); /* Full viewport minus nav bar height */
  background-image: var(--image); /* Desktop image */
  background-size: cover;
  background-position: center;
}

/* Mobile: Use the mobile-specific image */
@media screen and (max-width: 676px) {
  .monthly-playmate__image {
    background-image: var(--image-m); /* Mobile image */
  }
}

.monthly-playmate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  justify-content: flex-start; /* Start from top */
  text-align: center;
  padding: 60px var(--grid-padding-x);
  /* Top and bottom gradient overlays - stronger for readability */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.75) 100%
  );
  color: #fff;
}

.monthly-playmate__headline {
  font-family: "Masthead";
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  max-width: 680px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.monthly-playmate__description {
  margin-top: 24px;
  max-width: 640px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.monthly-playmate__button {
  margin-top: auto; /* Push button to bottom */
  padding: 14px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.monthly-playmate__button:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* Desktop enhancements */
@media screen and (min-width: 677px) {
  /* Ken Burns hover effect */
  .monthly-playmate__image {
    overflow: hidden;
  }
  
  .monthly-playmate__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--image);
    background-size: cover;
    background-position: center;
    transition: transform 4s ease-out;
    z-index: 0;
  }
  
  .monthly-playmate__link:hover .monthly-playmate__image::before {
    transform: scale(1.05);
  }
  
  .monthly-playmate__overlay {
    z-index: 1;
  }
}

@media screen and (max-width: 676px) {
  .monthly-playmate__image {
    height: calc(100vh - 64px);
  }

  .monthly-playmate__overlay {
    padding: 40px var(--grid-padding-x);
    align-items: center;
    text-align: center;
  }

  .monthly-playmate__headline {
    font-size: 38px;
    line-height: 0.95;
    letter-spacing: 0;
    max-width: 100%;
    text-align: center;
  }

  .monthly-playmate__description {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.55;
    max-width: 100%;
    text-align: center;
  }

  .monthly-playmate__button {
    margin-top: auto; /* Push to bottom on mobile too */
    padding: 12px 28px;
    font-size: 10px;
  }

  .monthly-playmate__title {
    display: none;
  }

  .monthly-playmate__header {
    display: none;
  }
}

/* ==========================================================================
   Promo Banner section (homepage) - flexible promotional unit
   ========================================================================== */

.promo-banner {
  background: #fff;
  padding: 0;
}

.promo-banner__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.promo-banner__image {
  position: relative;
  width: 100%;
  height: 80vh;
  background-image: var(--image); /* Desktop image */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Ken Burns hover effect */
.promo-banner__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  transition: transform 4s ease-out;
  z-index: 0;
}

.promo-banner__link:hover .promo-banner__image::before {
  transform: scale(1.05);
}

.promo-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Bottom aligned */
  text-align: center;
  padding: 60px var(--grid-padding-x);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.7) 100%
  );
  color: #fff;
  z-index: 1;
}

.promo-banner__content {
  max-width: 700px;
}

.promo-banner__headline {
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.promo-banner__description {
  margin-top: 20px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.promo-banner__button {
  margin-top: 28px;
  padding: 14px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.promo-banner__button:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.promo-banner__empty {
  padding: 2rem var(--grid-padding-x);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 676px) {
  .promo-banner__image {
    height: 75vh;
    background-image: var(--image-m); /* Mobile image */
  }
  
  .promo-banner__image::before {
    background-image: var(--image-m);
  }

  .promo-banner__overlay {
    padding: 40px var(--grid-padding-x);
  }
  
  .promo-banner__content {
    max-width: 100%;
  }

  .promo-banner__headline {
    font-size: 34px;
    line-height: 0.95;
    letter-spacing: 0;
  }

  .promo-banner__description {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.55;
  }

  .promo-banner__button {
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 10px;
  }
}

/* ==========================================================================
   Magazine Carousel section (homepage)
   ========================================================================== */

.magazine-carousel {
  background: #fff;
  color: #000;
  padding: 40px 0;
}

.magazine-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  margin-left: var(--grid-padding-x);
  margin-right: var(--grid-padding-x);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.magazine-carousel__title {
  font-family: "PlayboyVisuelt", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.magazine-carousel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 40px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.magazine-carousel__cta:hover {
  background: #000;
  color: #fff;
}

.magazine-carousel__marquee {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.magazine-carousel__marquee::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.magazine-carousel__marquee:active {
  cursor: grabbing;
}

/* Prevent drag on links/images */
.magazine-carousel__item {
  -webkit-user-drag: none;
  user-select: none;
}

.magazine-carousel__track {
  display: flex;
  width: max-content;
  animation: magazine-marquee var(--magazine-marquee-duration, 40s) linear infinite;
}

.magazine-carousel__marquee:hover .magazine-carousel__track {
  animation-play-state: paused;
}

.magazine-carousel__group {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}

.magazine-carousel__item {
  flex: 0 0 auto;
  width: 214px;
  text-decoration: none;
  color: inherit;
}

.magazine-carousel__cover {
  width: 100%;
  aspect-ratio: 214 / 285;
  background: #f3f3f3;
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.magazine-carousel__date {
  margin-top: 0.6rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  position: relative;
}

/* Hover underline effect on date */
.magazine-carousel__date:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  transition: width 0.3s ease;
}

.magazine-carousel__item:hover .magazine-carousel__date:after {
  width: 100%;
}

.magazine-carousel__empty {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

@keyframes magazine-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .magazine-carousel__track {
    animation: none;
  }

  .magazine-carousel__marquee {
    overflow-x: auto;
  }
}

@media screen and (max-width: 676px) {
  .magazine-carousel {
    padding: 40px 0;
  }

  .magazine-carousel__header {
    margin-bottom: 20px;
  }

  .magazine-carousel__item {
    width: 200px;
  }
}

/* ==========================================================================
   Archive Feature section (homepage)
   ========================================================================== */

.archive-feature {
  background: #e4e0d6;
  color: #000;
  padding: 3.5rem var(--grid-padding-x);
}

.archive-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.archive-feature__image {
  position: relative;
  width: 100%;
  aspect-ratio: 657 / 466;
  background-image: var(--image);
  background-size: cover;
  background-position: center;
}

.archive-feature__image:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
}

.archive-feature__image:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
}

.archive-feature__eyebrow {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.5px;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.archive-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 480px;
  margin: 0;
}

.archive-feature__date {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 12px;
}

.archive-feature__headline {
  font-family: "PlayboyVisuelt", sans-serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.archive-feature__description {
  margin-top: 20px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
}

.archive-feature__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0 40px;
  height: 44px;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.archive-feature__button:hover {
  background: #000;
  color: #fff;
}

.archive-feature__empty {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 876px) {
  .archive-feature__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .archive-feature__content {
    max-width: none;
  }

  .archive-feature__image {
    aspect-ratio: 354 / 450;
  }
}

@media screen and (max-width: 676px) {
  .archive-feature {
    padding: 40px var(--grid-padding-x);
  }

  .archive-feature__content {
    align-items: center;
    text-align: left;
  }

  .archive-feature__headline {
    font-size: 24px;
  }

  .archive-feature__description {
    font-size: 14px;
  }

  .archive-feature__eyebrow {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Newsletter + Footer (homepage)
   ========================================================================== */

/* Full-bleed: escape the theme's centered `.wrap` max-width */
.page_home .comp_newsletter,
.page_home .section_footer,
.page_story .comp_newsletter,
.page_story .section_footer {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page_home .comp_newsletter,
.page_story .comp_newsletter {
  max-width: none;
  margin: 0;
  padding: 4.5rem var(--grid-padding-x);
  text-align: center;
  color: #fff;
  background-color: #0a0a0a;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.45) 100%
  ),
  var(--newsletter-image, none);
  background-size: cover;
  background-position: center;
}

.page_home .comp_newsletter .logo {
  width: 2.1rem;
  height: 3rem;
  margin: 0 auto 1rem;
  background-color: #fff;
}

.page_home .form-wrapper_newsletter .form__subheadline {
  margin: 0;
  font-family: "Masthead";
  font-weight: 400;
  font-style: normal;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline;
}

.page_home .form-wrapper_newsletter .form__headline {
  margin: 0;
  display: inline;
  font-family: "Masthead";
  font-weight: 400;
  font-style: normal;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.page_home .form-wrapper_newsletter .form__group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Box-style input field */
.page_home .form-wrapper_newsletter .form__control {
  width: min(20rem, 70vw);
  height: 48px;
  padding: 12px 16px;
  text-align: center;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
}

.page_home .form-wrapper_newsletter .form__control::placeholder {
  color: #999 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* Black button to contrast with white input */
.page_home .form-wrapper_newsletter .btn_primary {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 0;
  height: 48px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page_home .form-wrapper_newsletter .form__text2 {
  margin: 0.9rem auto 0;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: none;
}

.page_home .form-wrapper_newsletter .form__text2 a {
  color: #fff;
  font-weight: 300;
  text-decoration: underline;
}

.page_home .section_footer {
  --color-front: #fff;
  --color-back: #000;
  background-color: #000;
}

.page_home .section_footer .inner {
  padding: 3rem var(--grid-padding-x);
}

.page_home .section_footer .logo {
  background-color: #fff;
}

.page_home .section_footer .socials {
  margin-top: 1.6rem;
}

.page_home .section_footer .items .delimiter {
  background-color: rgba(255, 255, 255, 0.35);
}

.page_home .section_footer .item {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.page_home .section_footer .text {
  color: rgba(255, 255, 255, 0.55);
}

@media screen and (max-width: 676px) {
  .page_home .comp_newsletter {
    padding: 3.5rem var(--grid-padding-x);
  }

  /* Better headline line break: "STAY CURRENT / WITH PLAYBOY" */
  .page_home .form-wrapper_newsletter .form__subheadline {
    font-size: 1.4rem;
    display: block !important;
    margin-bottom: 0.25rem;
  }
  
  .page_home .form-wrapper_newsletter .form__headline {
    font-size: 1.4rem;
    display: block !important;
    margin-left: 0 !important;
  }
  
  .page_home .form-wrapper_newsletter .form__group {
    flex-direction: column;
    gap: 0;
  }
  
  .page_home .form-wrapper_newsletter .buttons {
    width: auto;
    margin: 20px auto 0 auto !important;
  }
  
  .page_home .form-wrapper_newsletter .form__control {
    width: 100%;
    max-width: 100%;
    height: 44px;
  }
  
  .page_home .form-wrapper_newsletter .btn_primary {
    width: auto;
    min-width: 140px;
    height: 44px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Article Viewer section
   ========================================================================== */

.article-viewer {
  --article-viewer-bg: #576D51;
  background: var(--article-viewer-bg);
  padding: calc(2.5rem + 10px) 0 0;
  transition: background-color 0.25s ease;
  overflow-x: clip;
  overflow-y: visible;
}

.article-viewer__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 4rem; /* Increased from 2rem to 4rem */
  padding-left: var(--grid-padding-x);
  padding-right: var(--grid-padding-x);
}

.article-viewer__title {
  display: none; /* Hidden on all screens */
}

.article-viewer__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: center;
}

/* Divider lines between tabs */
.article-viewer__tab {
  position: relative;
}

.article-viewer__tab:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.article-viewer__tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.article-viewer__tab:hover {
  color: rgba(255, 255, 255, 0.9);
}

.article-viewer__tab.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

.article-viewer__panel {
  display: none;
}

.article-viewer__panel.is-active {
  display: block;
}

.article-viewer__grid {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-left: var(--grid-padding-x);
  padding-bottom: 3rem; /* Space for content below */
  cursor: grab;
  user-select: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--grid-padding-x);
}

.article-viewer__grid:active {
  cursor: grabbing;
}

/* Prevent browser's default link/image dragging */
.article-viewer__grid a,
.article-viewer__grid img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

.article-viewer-card__image {
  -webkit-user-drag: none;
  user-drag: none;
}

.article-viewer__grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Add space at the end of scroll for right margin */
.article-viewer__grid::after {
  content: '';
  flex: 0 0 var(--grid-padding-x);
  height: 1px;
}

.article-viewer-card {
  display: flex;
  flex-direction: column;
  color: #fff;
  flex: 0 0 auto;
  width: 420px;
  scroll-snap-align: start;
}

.article-viewer-card__image {
  order: 0;
  display: block;
  width: 100%;
  height: 550px;
  background: rgba(255, 255, 255, 0.08);
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  margin-bottom: 1rem;
}

.article-viewer-card__body {
  width: 85%;
  max-width: 85%;
}

/* Order: Image → Category → Author → Title */
.article-viewer-card__category {
  order: 1;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.article-viewer-card__author {
  order: 2;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.article-viewer-card__title {
  order: 3;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0;
}

.article-viewer-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(#fff, #fff);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}

.article-viewer-card:hover .article-viewer-card__title a {
  background-size: 100% 1px;
}

.article-viewer-card__teaser {
  order: 4;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.75rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

@media screen and (max-width: 1400px) {
  .article-viewer-card {
    width: 360px;
  }

  .article-viewer-card__image {
    height: 470px;
  }
}

@media screen and (max-width: 1024px) {
  .article-viewer-card {
    width: 320px;
  }

  .article-viewer-card__image {
    height: 420px;
  }

  .article-viewer-card__title {
    font-size: 20px;
  }
}

@media screen and (max-width: 676px) {
  .article-viewer {
    padding: 2rem 0 1rem; /* Reduced bottom padding */
  }

  .article-viewer__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-top: 0; /* Remove top spacing */
    padding-left: 0;
    padding-right: 0;
  }
  
  .article-viewer__tabs {
    justify-content: flex-start;
    gap: 32px;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding: 0 var(--grid-padding-x) 12px; /* Add padding for scroll and alignment */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE */
  }

  /* Hide scrollbar Webkit */
  .article-viewer__tabs::-webkit-scrollbar {
    display: none;
  }

  /* Remove vertical dividers on mobile for cleaner look */
  .article-viewer__tab:not(:last-child)::after {
    display: none;
  }

  .article-viewer__tab {
    font-size: 12px;
    white-space: nowrap; /* Prevent breaking */
    flex-shrink: 0; /* Prevent shrinking */
  }

  .article-viewer-card__body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .article-viewer-card__title {
    order: 1;
  }

  .article-viewer-card__category {
    order: 2;
    margin-top: 8px;
  }

  .article-viewer-card {
    width: 280px;
  }

  .article-viewer-card__image {
    height: 419px;
  }

  .article-viewer-card__title {
    font-size: 28px;
    line-height: 1.1;
  }

  .article-viewer-card__teaser {
    display: none !important;
  }

  .article-viewer__grid {
    gap: 18px;
  }
}

/* ==========================================================================
   Article Page - Header should be BLACK on article pages
   ========================================================================== */

/* Force black header on article/story pages */
.page_story .main-top.main-top--redesign .main-top__level-1 {
  background: #fff !important;
}

.page_story .main-top.main-top--redesign .logo {
  background-color: #000 !important;
}

.page_story .main-top.main-top--redesign .btn_main {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

.page_story .main-top.main-top--redesign {
  --color-front: #000;
}

/* Article page nav blur when image is behind */
.page_story .main-top.main-top--redesign.nav-blurred .main-top__level-1,
.page_story .main-top.main-top--redesign.nav-blurred .main-top__level-1.main-top__level-1 {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: none !important;
}

.page_story .main-top.main-top--redesign .icon_burger:before {
  color: #000;
}

/* Center logo on article pages */
.page_story .main-top.main-top--redesign .main-top__left {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.page_story .main-top.main-top--redesign .main-top__level-1 {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Article Page Mobile Nav - Smaller logo, tighter spacing
   ========================================================================== */

@media screen and (max-width: 676px) {
  /* Logo on mobile post page */
  .page_story .main-top.main-top--redesign .logo {
    width: 7rem !important;
    height: 1.4rem !important;
  }
  
  /* Logo positioning - left aligned on mobile */
  .page_story .main-top.main-top--redesign .main-top__left {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  
  /* Match homepage padding on mobile */
  .page_story .main-top.main-top--redesign .main-top__level-1 {
    padding: 12px 18px !important; /* Match homepage for consistent nav positioning */
    min-height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Ensure all elements visible in viewport - match homepage gap */
  .page_story .main-top.main-top--redesign .main-top__right {
    gap: 6px;
  }
}

/* ==========================================================================
   Article Header Section (Title, Deck, Meta)
   ========================================================================== */

.section_article-header {
  background: #fff;
  padding: 0;
  position: sticky;
  top: 64px; /* Height of nav */
  z-index: 1;
}

/* Ensure content after article covers the sticky header */
.latest-stories--article,
.page_story .comp_newsletter,
.page_story .section_footer {
  position: relative !important;
  z-index: 10 !important; /* Above sticky header (z-index: 1) */
}

.article-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px 120px; /* 100px top, 120px to image */
  text-align: center;
}

@media screen and (max-width: 1440px) {
  .article-header {
    padding-left: var(--grid-padding-x);
    padding-right: var(--grid-padding-x);
  }
}

.article-header__title {
  font-family: "PlayboyVisuelt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.15; /* Better ratio for multi-line titles */
  letter-spacing: -0.5px; /* Slightly less tight */
  color: #000;
  text-align: center;
  max-width: 565px;
  margin: 0 auto 32px; /* Reduced by 8px */
}

.article-header__deck {
  font-family: "Univers Next Variable", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px; /* Slightly larger for readability */
  font-weight: 400;
  line-height: 1.6; /* More generous spacing */
  letter-spacing: 0.01em; /* Subtle spacing for clarity */
  color: rgba(0, 0, 0, 0.85); /* Softer than pure black */
  text-align: center;
  max-width: 565px;
  margin: 0 auto 70px; /* Increased to 70px */
}

.article-header__meta {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.article-header__category a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.article-header__category a:hover {
  color: #000;
}

.article-header__separator {
  margin: 0 8px;
}

/* ==========================================================================
   Article Featured Image (Full-Width)
   ========================================================================== */

.section_article-image {
  background: #fff;
  padding: 0;
  position: relative;
  z-index: 100; /* Below nav - image passes under */
}

.article-image {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background-image: var(--image);
  background-size: cover;
  background-position: center;
}

.article-image__caption {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px var(--grid-padding-x);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-image__caption a {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.article-image__caption a:hover {
  color: #000;
}

/* ==========================================================================
   Article Byline Section
   ========================================================================== */

.section_article-byline {
  background: #fff;
  padding: 0;
  position: relative;
  z-index: 100;
}

.article-byline {
  max-width: 750px;
  margin: 0 auto;
  padding: 40px var(--grid-padding-x) 40px; /* Increased bottom to 40px for consistent spacing to body */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-byline__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.article-byline__label {
  font-weight: 300;
  color: #000;
}

.article-byline__name {
  font-weight: 700;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-byline__name:hover {
  text-decoration: underline;
}

/* Mobile Article Header */
@media screen and (max-width: 676px) {
  /* Enable parallax effect on mobile - sticky header */
  .section_article-header {
    position: sticky;
    top: 64px; /* Below nav */
    z-index: 1;
  }

  /* Image scrolls over header */
  .section_article-image {
    z-index: 100;
  }

  .article-header {
    display: flex;
    flex-direction: column;
    padding: 66px 18px 120px; /* 18px left/right padding on mobile */
    text-align: center;
  }

  .article-header__meta {
    order: 3; /* Move category/date below title and deck */
    margin-top: 24px;
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .article-header__title {
    order: 1;
    font-size: 32px; /* Increased from 24px */
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    max-width: none;
    text-align: center;
  }

  .article-header__deck {
    order: 2;
    font-size: 16px; /* Increased from 14px */
    line-height: 1.5;
    margin: 0 auto;
    max-width: 340px;
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
  }

  .article-image {
    background-image: var(--image-m, var(--image));
    padding-bottom: 125%; /* Taller portrait ratio on mobile (4:5) */
  }

  .article-byline {
    padding: 24px var(--grid-padding-x) 8px;
    gap: 4px;
    align-items: flex-start; /* Left align */
  }

  .article-byline__item {
    font-size: 12px;
  }

  /* Mobile headings in content */
  .story__content h1,
  .story__content h2,
  .story__content h3,
  .story__content h4,
  .story__content h5,
  .story__content h6 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.15px;
    margin: 32px 0 16px !important; /* Tighter heading spacing on mobile */
  }
}

/* ==========================================================================
   Hide old hero structure (replaced by new sections above)
   ========================================================================== */

.section_first .card_lede-story {
  display: none;
}

/* ==========================================================================
   Article Story Section Redesign
   ========================================================================== */

.section_story {
  padding-top: 0;
  padding-bottom: 3rem; /* Extend white background to cover sticky header */
  position: relative;
  z-index: 100;
  background: #fff;
}

/* Drawer element (creator profile) - ensure it covers sticky header */
.page_story .drawer {
  position: relative;
  z-index: 100;
  background: #fff;
}

/* Story deck/teaser */
.story__deck {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--grid-padding-x);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  text-align: center;
}

/* Story byline redesign */
.story__byline {
  max-width: 680px;
  margin: 2.5rem auto 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  text-align: center;
}

.story__byline-info {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
}

.story__byline-info div {
  margin: 0;
}

.story__byline-info a {
  color: #000;
  text-decoration: underline;
}

.story__byline-logo {
  display: none; /* Hide the small bunny logo */
}

.story__byline-issue {
  font-family: "Masthead", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

.story__byline-repub {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 8px;
}

.story__byline .bylines {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Story content area */
.story__content {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 var(--grid-padding-x);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 18px; /* Bump to 18px for desktop */
  line-height: 1.8;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: #1a1a1a; /* Soften from #000 */
}

@media screen and (min-width: 1440px) {
  .story__content {
    max-width: calc(100% - 690px); /* ~345px on each side */
  }
}

/* Section headings in article content */
.story__content h1,
.story__content h2,
.story__content h3,
.story__content h4,
.story__content h5,
.story__content h6 {
  font-family: "PlayboyVisuelt", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000;
  margin: 2.5rem 0 1.25rem; /* Bottom now 20px to match paragraph spacing */
}

.story__content p {
  margin: 1.25rem 0; /* ~20px */
}

.story__content > p:first-child {
  margin-top: 0;
}

/* Mobile story section adjustments */
@media screen and (max-width: 676px) {
  .section_story {
    padding-top: 40px;
    padding-bottom: 1rem;
  }

  .story__deck {
    font-size: 16px;
    line-height: 1.5;
  }

  .story__byline {
    margin-top: 2rem;
    padding: 1.25rem var(--grid-padding-x);
  }

  .story__byline-info {
    gap: 16px;
    font-size: 11px;
  }

  .story__byline-issue {
    font-size: 13px;
  }

  /* Remove parent story padding on mobile */
  .story {
    padding: 0 !important;
  }

  .story__content {
    margin: 4px 0 0 0;
    padding: 0 18px !important;
    font-size: 15px;
    line-height: 1.7;
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    color: #1a1a1a; /* Soften from #000 */
  }

  .story__content p {
    margin: 24px 0 !important; /* Tighter paragraph spacing */
  }

  .pb-styled-quote {
    padding: 0;
    margin: 48px 0;
    border-left: 4px solid #000; /* Editorial Accent Bar */
    text-align: left; /* Align left with bar */
    padding-left: 24px !important;
  }

  .pb-styled-quote__text,
  .story__content .pb-styled-quote__text {
    font-size: 20px !important;
    padding: 12px 0 !important;
    line-height: 1.35 !important;
    font-style: italic;
  }

  .pb-styled-quote__attribution {
    margin-top: 16px;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-align: left; /* Align attribution */
  }

  /* Standardize Captions */
  .pb-image-gallery__caption,
  .pb-side-by-side__caption,
  .pb-portrait-image__caption,
  .pb-fullwidth-image__caption {
    font-size: 10px;
    margin-top: 8px !important; /* Consistent spacing */
    letter-spacing: 0.02em;
    color: #666;
  }

  /* First paragraph after heading - reduce top gap */
  .story__content h1 + p,
  .story__content h2 + p,
  .story__content h3 + p,
  .story__content h4 + p,
  .story__content h5 + p,
  .story__content h6 + p {
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   Styled Quote Block (Pull Quote)
   ========================================================================== */

/* Custom Playboy Styled Quote Block */
.pb-styled-quote {
  position: relative;
  max-width: 100%;
  margin: 3rem 0; /* Standardized to 48px */
  padding: 0 0 0 32px; /* Left padding for bar */
  text-align: left; /* Align left */
  border-left: 4px solid #000; /* Editorial Accent Bar */
}

.pb-styled-quote__text,
.story__content .pb-styled-quote__text {
  margin: 0;
  padding: 1rem 0;
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.25;
  font-style: italic;
  color: #000;
  border: none !important; /* Remove old borders */
}

.pb-styled-quote__text:before {
  content: none;
}

.pb-styled-quote__text:after {
  content: none;
}

.pb-styled-quote__attribution {
  display: block;
  margin-top: 1.5rem;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  text-align: left; /* Align attribution left */
}

.pb-styled-quote--placeholder {
  background: #f5f5f5;
  padding: 2rem;
  color: #999;
  font-size: 14px;
}

@media screen and (max-width: 676px) {
  .pb-styled-quote {
    padding: 0;
    margin: 48px 0;
  }

  .pb-styled-quote__text,
  .story__content .pb-styled-quote__text {
    font-size: 20px !important;
    padding: 24px 0 !important;
    line-height: 1.35 !important;
    font-style: italic;
  }

  .pb-styled-quote__attribution {
    margin-top: 16px;
    font-size: 10px;
    letter-spacing: 0.15em;
  }
}

/* Standard WordPress quote/pullquote blocks */
.story__content blockquote,
.story__content .wp-block-quote,
.story__content .wp-block-pullquote {
  position: relative;
  max-width: 100%;
  margin: 3rem 0;
  padding: 0;
  border: none;
}

.story__content .wp-block-pullquote blockquote,
.story__content blockquote {
  margin: 0;
  padding: 2.5rem 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  font-style: italic;
  text-align: center;
  color: #000;
}

.story__content .wp-block-pullquote blockquote:before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Masthead", Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: #000;
  font-style: normal;
}

.story__content .wp-block-pullquote blockquote p {
  margin: 0;
  padding-top: 2rem;
}

/* Mobile quote adjustments */
@media screen and (max-width: 676px) {
  .story__content .wp-block-pullquote blockquote,
  .story__content blockquote {
    font-size: 1.5rem;
    padding: 2rem 0;
  }

  .story__content .wp-block-pullquote blockquote:before {
    font-size: 3rem;
  }
}

/* ==========================================================================
   Side-by-Side Images Block
   ========================================================================== */

/* Custom Playboy Side-by-Side Block */
.pb-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 100%;
  margin: 2.5rem 0;
}

.pb-side-by-side__item {
  margin: 0;
  width: 100%;
}

.pb-side-by-side__image-wrap {
  cursor: pointer;
  overflow: hidden;
}

.pb-side-by-side__item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/5;
  display: block;
  transition: transform 0.3s ease;
}

.pb-side-by-side__image-wrap:hover img {
  transform: scale(1.02);
}

.pb-side-by-side__caption {
  margin-top: 12px; /* Standardized caption spacing */
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-side-by-side__caption a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.pb-side-by-side__caption a:hover {
  color: #000;
}

.pb-side-by-side__placeholder {
  background: #f0f0f0;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-side-by-side--placeholder {
  background: #f5f5f5;
  padding: 2rem;
  color: #999;
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   Portrait Image Block (4:5 ratio)
   ========================================================================== */

.pb-portrait-image {
  margin: 2.5rem auto;
  max-width: 750px;
  text-align: center;
}

.pb-portrait-image__wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f3f3f3;
  cursor: pointer;
}

.pb-portrait-image__wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.pb-portrait-image__wrap:hover img {
  transform: scale(1.02);
}

.pb-portrait-image__caption {
  margin-top: 12px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-portrait-image__caption a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pb-portrait-image__caption a:hover {
  color: #000;
  text-decoration: underline;
}

.pb-portrait-image--placeholder {
  background: #f5f5f5;
  padding: 2rem;
  color: #999;
  font-size: 14px;
  text-align: center;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 750px;
  margin: 2.5rem auto;
}

/* ==========================================================================
   Full Width Image Block (Edge-to-Edge)
   ========================================================================== */

.pb-fullwidth-image {
  margin: 2.5rem 0; /* Standardized to 40px */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.pb-fullwidth-image__wrap {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background-image: var(--image);
  background-size: cover;
  background-position: center;
}

.pb-fullwidth-image__caption {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px var(--grid-padding-x);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-fullwidth-image__caption a {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pb-fullwidth-image__caption a:hover {
  color: #000;
  text-decoration: underline;
}

.pb-fullwidth-image--placeholder {
  background: #f5f5f5;
  padding: 2rem;
  color: #999;
  font-size: 14px;
  text-align: center;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2.5rem 0; /* Standardized to 40px */
}

@media screen and (max-width: 676px) {
  .pb-portrait-image {
    max-width: 100%;
  }
}

/* Standard WordPress 2-column gallery */
.story__content .wp-block-gallery.columns-2,
.story__content .wp-block-gallery.has-nested-images.columns-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 100%;
  margin: 2.5rem 0; /* Standardized to 40px */
}

.story__content .wp-block-gallery.columns-2 figure,
.story__content .wp-block-gallery.has-nested-images.columns-2 figure {
  margin: 0;
  width: 100%;
}

.story__content .wp-block-gallery.columns-2 img,
.story__content .wp-block-gallery.has-nested-images.columns-2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/5;
}

/* Mobile: keep side-by-side */
@media screen and (max-width: 676px) {
  .pb-side-by-side {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 0 16px 0 !important;
  }

  .pb-side-by-side__item img {
    aspect-ratio: 4/5;
  }

  .pb-side-by-side__caption {
    font-size: 9px;
    margin-top: 6px;
  }

  .story__content .wp-block-gallery.columns-2,
  .story__content .wp-block-gallery.has-nested-images.columns-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .story__content .wp-block-gallery.columns-2 img,
  .story__content .wp-block-gallery.has-nested-images.columns-2 img {
    aspect-ratio: auto;
  }

  /* Portrait image mobile */
  .pb-portrait-image {
    margin: 2rem auto;
    max-width: 100%;
  }

  .pb-portrait-image__caption {
    font-size: 10px;
    margin-top: 8px;
  }

  /* Full-width image mobile */
  .pb-fullwidth-image {
    margin: 2rem 0;
  }

  .pb-fullwidth-image__wrap {
    padding-bottom: 75%; /* Taller ratio on mobile */
  }

  .pb-fullwidth-image__caption {
    font-size: 10px;
    padding: 8px var(--grid-padding-x);
  }
}

/* ==========================================================================
   Image Gallery Block (Horizontal Scroll Carousel)
   ========================================================================== */

/* Full-width horizontal scrolling gallery */
.pb-image-gallery {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pb-image-gallery::-webkit-scrollbar {
  display: none;
}

.pb-image-gallery.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.pb-image-gallery__track {
  display: flex;
  gap: 16px;
  padding: 0 var(--grid-padding-x);
  width: max-content;
}

.pb-image-gallery__item {
  flex: 0 0 auto;
  width: 425px;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

.pb-image-gallery__image-wrap {
  width: 100%;
  aspect-ratio: 425 / 565;
  overflow: hidden;
  background: #f3f3f3;
}

.pb-image-gallery__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.pb-image-gallery__item:hover .pb-image-gallery__image-wrap img {
  transform: scale(1.02);
}

.pb-image-gallery__caption {
  margin-top: 12px;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-image-gallery__caption a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.pb-image-gallery__caption a:hover {
  color: #000;
}

.pb-image-gallery--placeholder {
  background: #f5f5f5;
  padding: 2rem;
  color: #999;
  font-size: 14px;
  text-align: center;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-left: 0;
}

/* Gallery credit */
.pb-image-gallery__credit {
  position: absolute;
  bottom: -24px;
  right: var(--grid-padding-x);
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  text-align: right;
}

.pb-image-gallery__credit a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.pb-image-gallery__credit a:hover {
  color: #000;
}

/* Mobile gallery */
@media screen and (max-width: 676px) {
  .pb-image-gallery {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .pb-image-gallery__item {
    width: 260px;
  }
  
  .pb-image-gallery__track {
    gap: 10px;
  }

  .pb-image-gallery__caption {
    font-size: 10px;
    margin-top: 8px;
  }
}

/* ==========================================================================
   Lightbox for Gallery
   ========================================================================== */

/* Global lightbox trigger styling */
[data-pb-lightbox] {
  cursor: pointer;
}

[data-pb-lightbox] img {
  transition: transform 0.3s ease;
}

[data-pb-lightbox]:hover img {
  transform: scale(1.02);
}

/* For background-image based elements (fullwidth, header) */
.article-image[data-pb-lightbox],
.pb-fullwidth-image__wrap[data-pb-lightbox] {
  transition: transform 0.3s ease;
}

.article-image[data-pb-lightbox]:hover,
.pb-fullwidth-image__wrap[data-pb-lightbox]:hover {
  transform: scale(1.01);
}

.pb-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pb-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.pb-lightbox__image-wrap {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-lightbox__image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.pb-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.pb-lightbox__close:hover {
  opacity: 1;
}

.pb-lightbox__prev,
.pb-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 60px;
  font-weight: 300;
  cursor: pointer;
  padding: 20px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.pb-lightbox__prev {
  left: 10px;
}

.pb-lightbox__next {
  right: 10px;
}

.pb-lightbox__prev:hover,
.pb-lightbox__next:hover {
  opacity: 1;
}

.pb-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}

@media screen and (max-width: 676px) {
  .pb-lightbox__prev,
  .pb-lightbox__next {
    font-size: 40px;
    padding: 10px;
  }
  
  .pb-lightbox__prev {
    left: 5px;
  }
  
  .pb-lightbox__next {
    right: 5px;
  }
}

/* Flickity-based gallery (existing WordPress galleries and shortcodes) */
.story__content .wp-block-gallery.is-cropped,
.story__content .gallery,
.gallery {
  position: relative;
  margin: 2.5rem 0; /* Standardized to 40px */
}

/* Gallery using Flickity */
.gallery .flickity-page-dots,
.story__content .wp-block-gallery .flickity-page-dots {
  bottom: 20px;
  position: relative;
}

.gallery .flickity-page-dots .dot,
.gallery .flickity-page-dots .flickity-page-dot,
.story__content .wp-block-gallery .flickity-page-dots .dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  opacity: 1;
}

.gallery .flickity-page-dots .dot.is-selected,
.gallery .flickity-page-dots .flickity-page-dot.is-selected,
.story__content .wp-block-gallery .flickity-page-dots .dot.is-selected {
  background: #000;
}

/* Ensure gallery images display correctly */
.gallery img,
.story__content .gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Desktop "Break the Grid" Layout
   ========================================================================== */

@media screen and (min-width: 1024px) {
  /* Allow visuals to break out of the 750px text column */
  
  /* Pull Quote - Wider and bolder */
  .pb-styled-quote {
    max-width: 960px !important;
    margin-left: calc(50% - 480px) !important;
    margin-right: calc(50% - 480px) !important;
    border-left: none !important; /* Remove mobile bar */
    border-top: 4px solid #000; /* Switch to Top Bar for wide layout */
    text-align: center !important;
    padding: 2rem 0 !important;
  }

  .pb-styled-quote__text {
    font-size: 2.75rem !important; /* Larger impact */
    padding: 1.5rem 4rem !important;
  }

  .pb-styled-quote__attribution {
    text-align: center !important;
    margin-top: 1rem;
  }

  /* Full Width Images - Even wider */
  .pb-full-width-image {
    max-width: 1200px !important;
    margin-left: calc(50% - 600px) !important;
    margin-right: calc(50% - 600px) !important;
    width: 100vw !important;
  }

  /* Main Article Hero Image - Break Grid on Desktop */
  .section_article-image .article-image {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Side by Side - Slightly wider than text */
  .pb-side-by-side {
    max-width: 960px !important;
    margin-left: calc(50% - 480px) !important;
    margin-right: calc(50% - 480px) !important;
    gap: 32px !important;
  }
  
  /* Gallery - Match wider layout */
  .story__content .wp-block-gallery {
    max-width: 960px !important;
    margin-left: calc(50% - 480px) !important;
    margin-right: calc(50% - 480px) !important;
  }

  /* ==========================================================================
     "More from Playboy" Desktop Grid (3-Column)
     ========================================================================== */
  
  .cards_list-carousel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
  }

  /* Reset Mobile List Styles */
  .card_list-carousel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 16px !important;
  }

  /* Image Moves to Bottom */
  .card_list-carousel .card__image {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/2 !important; /* Landscape */
    padding-bottom: 0 !important;
    margin-top: 16px !important;
  }

  /* Content Moves to Top */
  .card_list-carousel .card__content {
    order: 1 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Date (re-using Category slot for now or adding pseudo) */
  .card_list-carousel .card__category {
    display: block !important;
    font-size: 10px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
  }

  .card_list-carousel .card__title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   Email Signup Section Redesign (Article Pages - Match Homepage Style)
   ========================================================================== */

/* page_story newsletter styles now combined with page_home above */
.page_story .comp_newsletter {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 4.5rem var(--grid-padding-x);
  position: relative;
  z-index: 100;
  background-color: #000;
  background-image: var(--newsletter-image);
  background-size: cover;
  background-position: center;
}

/* Dark overlay for text readability */
.page_story .comp_newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1;
}

/* Ensure content sits above overlay */
.page_story .comp_newsletter > * {
  position: relative;
  z-index: 2;
}

/* Force no gap between newsletter and footer */
.page_story .comp_newsletter + .section_footer,
.page_story .comp_newsletter + footer,
.page_story .comp_newsletter + .main-bottom,
.section_footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove ALL gaps around newsletter and footer */
.page_story .comp_newsletter {
  margin-bottom: 0 !important;
}

/* Kill gap on wrap container that holds body content + allow full-bleed sections */
.page_story .wrap,
.page_story .wrap_story {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100% !important;
}

.page_story .section_footer,
.page_story .main-bottom,
.page_story footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #000 !important; /* Solid black - no transparency */
  background-attachment: scroll !important; /* No parallax on footer */
  position: relative !important; /* Override any fixed positioning */
}

/* Nuclear option - target any element after newsletter */
.page_story .comp_newsletter ~ * {
  margin-top: 0 !important;
}

.page_story .comp_newsletter .logo {
  display: block !important;
  width: 2.1rem !important;
  height: 3rem !important;
  margin: 0 auto 1rem !important;
  background-color: #fff !important; /* White logo on dark background */
}

.page_story .form-wrapper_newsletter .form__subheadline {
  margin: 0;
  font-family: "Masthead";
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline;
}

.page_story .form-wrapper_newsletter .form__headline {
  margin: 0;
  font-family: "Masthead";
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline;
  color: #fff !important;
  line-height: 1.1;
}

.page_story .form-wrapper_newsletter .form__group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-direction: row;
}

/* Box-style input field */
.page_story .form-wrapper_newsletter .form__control {
  width: 320px;
  height: 48px;
  padding: 12px 16px;
  text-align: center;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
}

.page_story .form-wrapper_newsletter .form__control::placeholder {
  color: #999 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.page_story .form-wrapper_newsletter .form__control:focus {
  outline: 2px solid rgba(255,255,255,0.5) !important;
  outline-offset: 2px;
}

.page_story .form-wrapper_newsletter .buttons {
  margin-top: 0;
}

/* Black button to contrast with white input */
.page_story .form-wrapper_newsletter .btn_primary {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  height: 48px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Target newsletter legal text directly with max specificity */
div.comp_newsletter div.form-wrapper_newsletter div.form__text2,
div.comp_newsletter div.form-wrapper_newsletter div.label-sans.xsmall.emphasis.form__text2 {
  margin: 1.5rem auto 0 !important;
  max-width: 480px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: "PlayboyVisuelt", sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  text-align: center !important;
}

div.comp_newsletter div.form__text2 a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
}

@media screen and (max-width: 676px) {
  .page_story .comp_newsletter {
    padding: 3rem 18px;
    background-color: #000;
    background-image: var(--newsletter-image);
    background-size: cover;
    background-position: center;
    text-align: center; /* Center all content */
  }

  .page_story .comp_newsletter .logo {
    width: 1.6rem !important;
    height: 2.2rem !important;
    margin: 0 auto 1rem !important;
    background-color: #fff !important; /* White rabbit head on dark background */
  }

  .page_story .form-wrapper_newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Better headline line break: "STAY CURRENT / WITH PLAYBOY" */
  .page_story .form-wrapper_newsletter .form__subheadline {
    font-size: 26px !important;
    display: block !important;
    margin: 0 0 0.25rem 0 !important;
    line-height: 1.1;
    color: #fff !important;
  }
  
  .page_story .form-wrapper_newsletter .form__headline {
    font-size: 26px !important;
    display: block !important;
    margin: 0 !important;
    line-height: 1.1;
    color: #fff !important;
  }

  .page_story .form-wrapper_newsletter .form__header {
    max-width: none !important;
    margin: 0 auto !important;
  }

  .page_story .form-wrapper_newsletter .form__group {
    margin-top: 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Box-style input field on mobile */
  .page_story .form-wrapper_newsletter .form__control {
    width: 100%;
    max-width: 100%;
    height: 44px;
    font-size: 14px;
    text-align: center;
    padding: 12px 16px;
    border: none !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 0 !important;
  }

  .page_story .form-wrapper_newsletter .form__control::placeholder {
    color: #999 !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .page_story .form-wrapper_newsletter .form__control:focus {
    outline: 2px solid rgba(255,255,255,0.5) !important;
    outline-offset: 2px;
  }

  .page_story .form-wrapper_newsletter .buttons {
    width: auto;
    margin: 20px auto 0 auto !important;
  }

  /* Black button to contrast with white input - narrower than input */
  .page_story .form-wrapper_newsletter .btn_primary {
    width: auto;
    min-width: 140px;
    height: 44px;
    font-size: 12px;
    letter-spacing: 0.15em;
    font-weight: 600;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase;
    margin: 0 auto;
  }

  .page_story .form-wrapper_newsletter .form__text2 {
    margin-top: 1.25rem;
    font-size: 9px !important;
    max-width: none;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1.6;
    text-transform: none !important;
  }

  .page_story .form-wrapper_newsletter .form__text2 a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
  }
}

/* ==========================================================================
   "More From Playboy" Section Redesign
   ========================================================================== */

.more-from-pb {
  padding: 3rem var(--grid-padding-x) 1.5rem;
  text-align: center;
  background: #fff;
}

.more-from-pb__label {
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  font-style: italic;
  color: #000;
  margin-bottom: 0.25rem;
}

.more-from-pb__headline {
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}

/* ==========================================================================
   Keep Reading / Recommendations Carousel Redesign
   ========================================================================== */

.section_carousels {
  background: #fff;
  padding: 0 0 4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Match nav stroke */
  margin-top: 0;
  position: relative;
  z-index: 100; /* Cover sticky header */
}

.section_carousels .comp_carousel_section {
  border: none !important;
}

.comp_carousel_section {
  padding: 0;
}

.comp_carousel_section .comp__top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0.75rem 64px 1rem;
  margin-bottom: 1rem;
  border: none !important;
  border-bottom: none !important;
  box-sizing: border-box;
}

.comp_carousel_section .comp__top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.05); /* Match nav stroke */
}

.comp_carousel_section .comp__prev-next {
  display: none;
}

.comp_carousel_section .comp__title {
  flex: 1;
  text-align: center;
}

.comp_carousel_section .comp__nav {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.comp_carousel_section .comp__arrow {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: opacity 0.2s ease;
}

.comp_carousel_section .comp__arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.comp_carousel_section .comp__arrow--prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.comp_carousel_section .comp__arrow--next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.comp_carousel_section .comp__arrow--prev {
  opacity: 0.4;
}

.comp_carousel_section .comp__arrow--next {
  opacity: 1;
}

.comp_carousel_section .comp__arrow:hover {
  opacity: 0.6;
}

.comp_carousel_section .comp__arrow--next:hover {
  opacity: 0.7;
}

.comp_carousel_section .comp__title {
  font-family: "Masthead", Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}

.comp_carousel_section .comp__title b {
  font-weight: 400;
}

.comp_carousel_section .comp__title span {
  display: none;
}

/* Carousel navigation arrows */
.comp_carousel_section .comp__prev-next {
  display: flex;
  gap: 12px;
}

.comp_carousel_section .comp__prev,
.comp_carousel_section .comp__next {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.comp_carousel_section .comp__prev:hover,
.comp_carousel_section .comp__next:hover {
  background: #000;
  border-color: #000;
}

.comp_carousel_section .comp__prev:after,
.comp_carousel_section .comp__next:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transition: border-color 0.2s ease;
}

.comp_carousel_section .comp__prev:after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.comp_carousel_section .comp__next:after {
  transform: translate(-70%, -50%) rotate(45deg);
}

.comp_carousel_section .comp__prev:hover:after,
.comp_carousel_section .comp__next:hover:after {
  border-color: #fff;
}

/* Carousel cards */
.cards_list-carousel {
  padding-left: 64px !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cards_list-carousel.flickity-enabled {
  margin-left: 0 !important;
}

.cards_list-carousel .flickity-viewport {
  margin-left: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

.card_list-carousel {
  flex: 0 0 360px; /* Match homepage card width */
  width: 360px;
  margin-right: 24px; /* More breathing room */
  text-decoration: none;
}

.card_list-carousel .card__image {
  width: 100%;
  height: 0;
  padding-bottom: 66.48%; /* Match homepage 3:2 ratio */
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
}

.card_list-carousel .card__content {
  padding: 0;
}

.card_list-carousel .card__category {
  display: none; /* Removed - redundant with section title */
}

.card_list-carousel .card__title {
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px; /* Match homepage */
  font-weight: 400;
  line-height: 1.5; /* Match homepage 21px/14px */
  color: #000;
  margin: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}

.card_list-carousel:hover .card__title {
  text-decoration-color: #000;
}

.card_list-carousel .card__byline {
  display: none; /* Removed for cleaner look */
}

.card_list-carousel .card__content .buttons {
  margin: 0;
  display: none;
}

.card_list-carousel .btn_secondary {
  background: transparent;
  border: none;
  padding: 0;
  font-family: "PlayboyVisuelt", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  text-align: left;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.card_list-carousel:hover .btn_secondary {
  text-decoration: underline;
}

@media screen and (max-width: 676px) {
  .section_carousels {
    padding: 0 0 2rem !important;
  }

  .comp_carousel_section .comp__top {
    padding: 16px 18px 16px;
    justify-content: center;
    position: relative;
  }

  /* Distinct Separator Line Removed */
  .comp_carousel_section .comp__top::before {
    display: none !important;
  }

  .comp_carousel_section .comp__title {
    font-family: "Masthead", Georgia, serif !important; /* Match Pull Quote */
    font-size: 20px !important; /* Match Pull Quote Size */
    font-style: normal !important; /* No Italic */
    letter-spacing: 0 !important;
    text-transform: uppercase !important; /* Keep Uppercase for this font */
    font-weight: 400 !important;
    text-align: center;
    margin: 0 !important;
  }

  /* Reduce space above More from Playboy */
  .section_carousels {
    margin-top: -20px !important;
  }

  .comp_carousel_section .comp__nav {
    display: none !important;
  }

  /* Transform Carousel to Vertical List - Aggressive Overrides */
  .cards_list-carousel {
    display: block !important;
    padding: 0 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  /* Force Flickity Viewport to collapse */
  .comp_carousel_section .flickity-viewport {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  /* Reset the Slider Track */
  .comp_carousel_section .flickity-slider {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important; /* Stack naturally */
    height: auto !important;
    min-height: 0 !important;
  }

  /* Reset Individual Slides */
  .card_list-carousel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important; /* Internal layout is flex */
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important; /* Use margin for spacing */
    gap: 16px !important;
    align-items: flex-start !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Remove margin from last item */
  .card_list-carousel:last-child {
    margin-bottom: 0 !important;
  }

  /* Thumbnail Image (Right) */
  .card_list-carousel .card__image {
    width: 100px !important;
    min-width: 100px !important;
    height: 100px !important;
    padding-bottom: 0 !important; /* Remove ratio hack */
    margin: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important; /* Move to right */
  }

  /* Content Wrapper (Left) */
  .card_list-carousel .card__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 4px 20px 0 0 !important; /* Increased right padding for gap */
    flex-grow: 1 !important; /* Fill remaining space */
    order: 1 !important; /* Move to left */
  }

  /* Category */
  .card_list-carousel .card__category {
    display: block !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #666 !important;
    margin-bottom: 6px !important;
    order: -1 !important; /* Force to top */
  }

  /* Title */
  .card_list-carousel .card__title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
  }

  .more-from-pb {
    padding: 2rem var(--grid-padding-x) 1rem;
  }

  .more-from-pb__label {
    font-size: 1rem;
  }

  .more-from-pb__headline {
    font-size: 1.5rem;
  }
}