@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
:root {
  --font-family: "Bebas Neue",sans-serif;
  --brand-logo: url("https://thumbs.paysite.com/assets/logo_1778264534034.png");
  --color-base-100: #1C1416;
  --color-base-200: #130E10;
  --color-base-300: #0A0608;
  --color-base-content: #D4C5C8;
  --color-primary: #8B0000;
  --color-primary-content: #F5E6E8;
  --color-secondary: #4A0000;
  --color-secondary-content: #E8D5D8;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.8rem;
  --size-selector: 2px;
  --size-field: 2px;
  --size-grid-item-margin: 15px;
  --border-border: 3px;
  --depth-depth: 2;
  --noise-noise: 1;
}


/* Layout: home */
:root {
}
@media (min-width: 375px) {
  :root {
    --items-content-per-row: 1;
    --items-featured-per-row: 1;
    --items-perks-per-row: 1;
  }
}
@media (min-width: 768px) {
  :root {
    --items-content-per-row: 2;
    --items-featured-per-row: 2;
    --items-perks-per-row: 2;
  }
}
@media (min-width: 1024px) {
  :root {
    --items-content-per-row: 3;
    --items-featured-per-row: 3;
    --items-perks-per-row: 4;
  }
}
@media (min-width: 1440px) {
  :root {
    --items-content-per-row: 3;
    --items-featured-per-row: 3;
    --items-perks-per-row: 4;
  }
}


/* Theme CSS Overrides */
.header-default .header {
  background-color: #000000 !important;
}

/* [2026-05-08 20:17] use Lexend as font family, make scene model name color to #fff */

.ps-body {
  --font-family: 'OverPass Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--font-family);
  --size-grid-item-margin: 2px;
}

.ps-slider {
    margin-bottom: 0 !important;
}

.view-all-wrapper {
    margin-top: 15px;
}

.scene-default {
  margin-bottom: 2px !important;
}

.scene-default .scene-title .scene-link,
.scene-two .scene-title .scene-link {
 font-size: 1.5rem !important;
}

.scene-two .scene-model-name {
 --color-secondary: #5f5f5f;
}

.reels-default .reels-title .reels-link {
  font-size: 1.5rem !important;
}

.scene-default .scene-date, 
.scene-default .scene-model-name, 
.scene-default .scene-views {
  --color-secondary: #8f8f8f;
}

.performer-two .thumb-title {
 --color-base-content: #fff;
 font-size: 1.8rem !important;
}

.scene-default .scene-body {
  padding: 0 12px 15px !important;
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.8)) !important;
}

.scene-default .scene-body .purchase form {
 --color-base-200: var(--color-primary);
}

.scene-default .scene-body .purchase:hover {
  --color-secondary: #ffffff;
}

.scene-default .scene-body .purchase .price {
  color: #fff !important;
}

.perks-default .perks-details {
  max-width: 1280px;
}

.perks-default .perks-titles {
  font-weight: 600;
  letter-spacing: 4px;
}

.hero-default .hero-slider-container .hero-slider-item-info .info-title-name {
  letter-spacing: .5rem;
}

.content-upcoming-default .upcoming-category {
  font-size: 4rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.content-upcoming-default .trailer-button {
  display: inline-block;
  font-size: 2.4rem;
  height: auto;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 3px 15px;
}

/* [2026-05-09 17:32] update the css to set the .perks-default .perks-cta-link text to uppercase and add letter spacing of 2px, on footer nav links, update css hover state to change color to #fff */

.perks-default .perks-cta-link {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer-default a:hover {
  color: #fff;
}

.vod-buttons form .button-wrapper .dropdown-menu, 
.vod-buttons form .ypp-vod-container .dropdown-menu {
    li {
        button {
            color: #FFF;
            font-weight: 700;
            letter-spacing: 0.080rem;
            font-size: 15px;

            &:hover {
                background: #830000;
                text-decoration: none;
            }
        }
    }
}

.scenes-info-default .content-button-wrapper .button-shape.add-to-favorite, 
.scenes-info-default .content-button-wrapper .button-shape.add-to-favorites,
.scenes-info-default .content-button-wrapper .button-shape.share {
    background-color: #8B0000 !important;
    color: #F5E6E8 !important;
}

.scenes-info-default .content-button-wrapper .button-shape span {
    font-size: 13px;
}

.add-to-favorite {
    max-height: none;
}

.share-wrap .tweet-wrap a, .share-wrap .tweet-wrap button {
    font-size: 1vw !important;
}

.scenes-header-default .controls .wrapper .link,
.scenes-header-default .controls .wrapper .linkActive {
    border: 1px solid #930202 !important;
    color: #E8D5D8 !important;
}

.about-wrapper .about-container .model-spec {
    max-width: 1280px;
    margin: 60px auto 100px;
}

.about-wrapper .about-container .model-spec ul {
    justify-content: center;
}

.about-wrapper .about-container .model-spec ul li a, 
.about-wrapper .about-container .model-spec ul li p {
    font-size: 1.8rem !important;
}

.performers-info-one .title {
    font-size: clamp(34px,7vw, 52px) !important;
}


.performers-info-one .actionButton, .performers-info-one .memberFavoriteButton .favorite-btn {
    background: #8B0000 !important;
    color: #F5E6E8 !important;
    border-radius: 0 !important;
}

.scenes-info-default .content-title .title {
    font-size: clamp(30px,5vw,40px) !important;
}