@import url("variable/variables.css");
/* ==========================================
   300px and up
========================================== */
@media screen and (min-width: 300px) {
    .d-sm-none {
        display: none !important;
    }

    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-block {
        display: block !important;
    }
}

/* ==========================================
   768px and up
========================================== */
@media screen and (min-width: 768px) {
    body {
        padding-top: 84px;
    }

    .h1Title {
        font-size: 60px;
    }

    .h2Title {
        font-size: 50px;
    }

    .h3Title {
        font-size: 50px;
    }

    .heroBanner {
        background-image: url(../images/home-banner.png);
    }

    .heroBanner .heroBannerContent {
        flex-direction: row;
        text-align: left;
    }

    .heroBanner .bannerContent {
        max-width: 470px;
    }

    .heroBanner .heroBannerContent .rightCol .musicGameIcon {
        max-width: 165px;
    }

    .heroBanner .heroBannerContent .musicGameIcon {
        max-width: 125px;
    }

    .bannerSubTitle {
        font-size: var(--textHeadingXSmall);
    }

    .productBanner.puzzleBanner {
        background-image: url(../images/puzzle-banner-bg.png);
        background-color: transparent;
        background-size: cover;
        background-position: top right;
        background-repeat: no-repeat;
    }


    .articleCard {
        padding: 45px 50px;
    }

    .articleCard p {
        font-size: var(--textBodyMedium);
    }

    .profileBanner {
        background-image: url(../images/home-banner.png);
        text-align: left;
    }

    .profileBanner.settingsBanner {
        background-image: url(../images/profile-banner.png);
        padding-bottom: 0px;
    }

    .gameCards {
        grid-template-columns: repeat(2, 1fr);
    }

    .orderHistory {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .orderDetailsBilling {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .gameBundlesContainer {
        margin-top: 50px;
    }

    .gameBundle {
        margin-top: 0;
    }

    .titleRow {
        margin-bottom: 10px;
    }

    .viewAll {
        font-size: var(--textBodyLarge);
    }

    .cardBox {
        padding: 45px;
    }

    .teamsPage .teamCreditsPanel {
        padding: 40px 32px;
    }

    p,
    ul,
    ol {
        font-size: var(--textBodyMedium);
    }

    .gameCards .gameCardItem .awardList,
    .gameCards .gameCardItem .awardList li {
        font-size: 12px;
    }

    .btn {
        padding: 10px 25px;
    }

    .userTestimonials .user-review {
        padding: 20px 45px;
    }

    .userTestimonials .user-review p,
    .userTestimonials .user-review ul,
    .userTestimonials .user-review ol {
        font-size: 20px;
        line-height: 130%;
    }

    .userTestimonials .user-review ul,
    .userTestimonials .user-review ol {
        margin-left: 20px;
    }

    .teamGameCard {
        flex-direction: row;
    }

    .teamGameCard .gameImgBox,
    .teamsPage .gameImgBox {
        width: min(100%, 200px);
    }

    .teamGameCard .gameImgBox img,
    .teamsPage .gameImgBox img {
        max-width: 72%;
        max-height: 88%;
    }

    .d-md-none {
        display: none !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-flex {
        display: flex !important;
    }

    .accountSetting .card .icon-box {
        min-width: 65px;
        min-height: 65px;
    }

    .accountSetting .card .icon-box img {
        width: 32px;
        height: 32px;
    }

    .accountSetting .card .left-content {
        gap: 35px;
    }

    .accountSetting .card {
        padding: 0px 20px;
    }


    .userInformation .h3Title {
        font-size: var(--textHeadingSmall);
    }

    .formContainer .formRow .formCol {
        gap: 12px;
    }

    .formContainer .formRow .formCol .inputLabel {
        font-size: var(--textBodyLarge);
    }

    .formContainer .formRow .formCol .inpuSubLabel {
        font-size: var(--textBodyMedium);
    }

    .formContainer .formRow .formCol .formInput {
        font-size: var(--textBodyMedium);
        padding: 12px 20px;
    }

    .formContainer .formRow .formCol .input-wrapper.icon-left .formInput {
        padding-left: 52px;
    }

    .formContainer .formRow .formCol .input-wrapper.icon-right .formInput {
        padding-right: 52px;
    }

    .formContainer .btnRow .btn {
        font-size: var(--textButtonMedium);
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .changePasswordPage .formContainer .btnRow {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .loginRegisterPage .authTab {
        min-height: 56px;
        font-size: var(--textHeadingXSmall)
    }

    .formContainer .passwordHint {
        gap: 35px;
    }

    .formContainer .passwordHint .passwordTitle {
        font-size: var(--textBodyMedium);
    }

    .orderInformation section.cardBox {
        padding: 26px 66px;
    }
    .orderInformation aside.cardBox {
        padding: 26px 51px;
    }
    .orderInformation .cartOffBadge {
        width: 110px;
        height: 110px;
        top: -56px;
    }

    .orderInformation .cartOffText strong {
        font-size: 24px;
    }

    .orderInformation .cartOffText em {
        font-size: 20px;
    }

    .orderInformation .h3Title {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .orderInformation .cartVersionOptions {
        gap: 14px 20px;
        margin: 12px 0 10px;
    }

    .orderInformation .cartOsTrigger {
        min-width: 160px;
    }

    .orderInformation .cartItem .itemTitle,
    .orderInformation .cartItem .priceValue {
        font-size: var(--textBodyMedium);
        line-height: 106%;
    }

    /* .orderInformation .cartItem .itemContent > p {
        font-size: 13px;
        max-width: 48ch;
    }

    .orderInformation .cartItem {
        margin-bottom: 50px;
        gap: 28px;
    }

    .orderInformation .cartImages:not(.cartImages--bundle) {
        flex-basis: 120px;
        grid-template-columns: minmax(0, 120px);
    }

    .orderInformation .cartImages:not(.cartImages--bundle) .cartImg {
        max-width: 120px;
    } */

    .orderInformation .order-price {
        font-size: var(--textBodyMedium);
    }

    .orderInformation .btnRow {
        margin-top: 36px;
    }

    .orderInformation .cardPayment {
        justify-content: end;
    }

    .orderInformation .cardPayment img {
        max-width: 50px;
        max-height: 18px;
    }

    .cartInfo .payPalPayment {
        margin-top: 30px;
    }

    .section-spacing {
        margin-bottom: 40px;
    }

    .tabs .tab-item {
        padding: 10px 34px;
        font-size: 20px;
    }

    .gamePreview .nutcrackerGames .gameItemsRow {
        margin-bottom: 60px;
    }

    .gamePreview .subTitle {
        font-size: 28px;
    }

    .gamePreview .nutcrackerGames {
        padding: 116px 25px 5px;
    }

    .gamePreview p,
    .gamePreview .gamesFeatures .featureItemList h4,
    .gamePreview .gamesFeatures .featureItemList p {
        font-size: var(--textBodyLarge);
    }

    .gamePreview .reviewCard p,
    .gamePreview .reviewCard.discoveryReview p {
        font-size: var(--textBodyMedium);
    }

    .gamePreview .nutcrackerGames .gameItemsRow p {
        font-size: 22px;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg {
        max-width: 72px;
        top: -12%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.left {
        left: -8%;
    }

    .gamePreview .gameOverview {
        margin-bottom: 0;
        padding: 24px 24px 28px;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 16px;
    }

    .gamePreview .gameOverview .priceTag {
        font-size: 40px;
        text-align: left;
    }

    .gamePreview .gameOverview .btn {
        font-size: 16px;
        min-height: 46px;
        padding: 10px 18px;
    }

    .gamePreview .getGamePanel {
        padding: 20px 20px 30px;
    }

    .gamePreview .getGameTitle {
        font-size: 36px;
    }

    .gamePreview .getGameText {
        font-size: 18px;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.right {
        right: -8%;
    }

    .gamePreview .gamePreviewTop .rightCol::before {
        width: 474px;
        height: 562px;
        top: 0;
    }

    .gamePreview .gamePreviewTop .gameImgBox {
        width: auto;
        height: auto;
        background: none;
    }

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        max-width: none;
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(0, 80, 200, 0.16);
        border: none;
    }

    .gamePreview.theme-feathers .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        height: 432px;
        max-width: none;
        object-fit: cover;
    }

    .gamePreview .headBoxContainer {
        padding: 0 0 16px;
        text-align: left;
    }

    .gamePreview .headBoxContainer p,
    .gamePreview .headBoxContainer .welcomeLead {
        font-size: var(--textBodyLarge);
    }

    .gamePreview .gamesFeatures .featureItemList {
        padding: 30px 32px;
        gap: 22px;
        align-items: center;
    }

    .gamePreview .reviewCard {
        /* padding: 24px 18px;  */
        padding: 16px;
    }

    .gamePreview .reviewCard .reviewLogo.superKids {
        max-width: 150px;
    }

    .gamePreview .reviewCard .reviewBtn {
        min-width: 262px;
        font-size: var(--textButtonMedium);
    }

    .gamePreview .reviewCard.discoveryReview {
        width: 100%;
        max-width: 578px;
        min-height: 468px;
        padding: 32px 30px 28px;
    }

    .gamePreview .gamePreviewTop {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 32px;
    }

    .gamePreview .gamePreviewTop .leftCol {
        order: 1;
        flex: 1 1 auto;
        max-width: none;
        margin-right: 0;
    }

    .gamePreview .gamePreviewTop .rightCol {
        order: 2;
        flex: 0 0 474px;
        padding-top: 65px;
        max-width: 474px;
        width: 474px;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }

    .productBanner.teamsBanner,
    .productBanner.shopBanner,
    .productBanner.reviewsHero,
    .productBanner.puzzleBanner,
    .productBanner.skillBanner,
    .profileBanner.settingsBanner {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color: transparent;
        overflow: hidden;
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .productBanner.puzzleBanner {
        background-size: cover;
        background-position: top right;
    }

    .profileBanner.settingsBanner {
        background-image: url(../images/profile-banner.png);
    }

    .loginRegisterPage .profileBanner.settingsBanner,
    .mainContainer.loginRegisterPage .profileBanner.settingsBanner {
        background-image: url(../images/profile-banner.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color: transparent;
        overflow: hidden;
        justify-content: flex-start;
        padding: 38px 0 0;
        box-sizing: border-box;
    }

    .productBanner {
        background-image: url(../images/product-banner_1920.png);
    }

    .productBanner.reviewsHero {
        background-image: url(../images/reviewBanner.png);
    }

    .productBanner.skillBanner {
        background-image: url(../images/skill-banner.png);
    }

    .productBanner.teamsBanner {
        background-image: url(../images/TeamBanner.png);
    }

    .productBanner.shopBanner {
        background-image: url(../images/product-banner_1920.png);
    }

    .productBanner .heroBannerContent {
        text-align: left;
    }

    .productBanner.teamsBanner .heroBannerContent,
    .productBanner.shopBanner .heroBannerContent,
    .productBanner.reviewsHero .heroBannerContent,
    .productBanner.skillBanner .heroBannerContent {
        max-width: 575px;
        padding-bottom: 0;
    }

    .productBanner.teamsBanner .h1Title,
    .productBanner.shopBanner .h1Title,
    .productBanner.reviewsHero .h1Title,
    .productBanner.puzzleBanner .h1Title,
    .productBanner.skillBanner .h1Title,
    .loginRegisterPage .profileBanner.settingsBanner .h1Title {
        font-size: clamp(40px, 5vw, 60px);
        line-height: 1;
        margin-bottom: 0;
        font-family: var(--base-font);
    }

    .productBanner.teamsBanner .bannerSubTitle,
    .productBanner.shopBanner .bannerSubTitle,
    .productBanner.reviewsHero .bannerSubTitle,
    .productBanner.skillBanner .bannerSubTitle {
        font-size: clamp(16px, 1.8vw, 24px);
        line-height: 1.3;
    }

    /* .productBanner.teamsBanner + .middleSection,
    .productBanner.shopBanner + .middleSection,
    .productBanner.reviewsHero + .middleSection,
    .profileBanner.settingsBanner + .middleSection,
    .loginRegisterPage .profileBanner.settingsBanner + .middleSection,
    .loginRegisterPage .profileBanner.settingsBanner + .middleSection.loginRegisterSection,
    .middleSection.reviewsGamePage {
        position: relative;
        z-index: 1;
    }

    body.edd-success .profileBanner.settingsBanner + .middleSection,
    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.wp-block-edd-confirmation),
    body.kmg-checkout-page .profileBanner.settingsBanner + .middleSection {
        position: relative;
        z-index: 1;
    } */

    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.wp-block-edd-confirmation) {
        padding-bottom: 88px;
    }

    body.edd-success .middleSection .entry-content > p:first-of-type {
        display: none;
    }

    .reviewsPage .reviewsGrid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .reviewsPage .reviewsGameCard:nth-child(odd):last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 20px);
        width: 100%;
        margin: 0 auto;
    }

    .reviewsPage .reviewsGameCard {
        padding: 32px;
    }

    .reviewsPage .reviewsGameTitle {
        font-size: 32px;
    }

    .reviewsPage .reviewQuoteRow p,
    .reviewsPage .reviewSource,
    .reviewBottomLine {
        font-size: var(--textBodyMedium);
    }

    .reviewsPage .reviewLogo {
        max-width: 80px;
    }

    .reviewsPage .reviewLogo.superKids {
        max-width: 130px;
    }

    .reviewsPage .reviewLogo.awardSeal {
        max-width: 110px;
    }

    .reviewsPage .reviewQuoteRow .nytWordmark {
        width: 230px;
        max-width: 230px;
    }
    .teamsPage .teamStoryPanel p{
        font-size: 20px;
    }
  
}

@media screen and (min-width: 992px) {
    body {
        padding-top: 90px;
    }

    .container,
    .container-fuild {
        padding-left: 15px;
        padding-right: 15px;
    }

    .heroBanner .heroBannerContent .bannerImgBtn,
    .heroBanner .heroBannerContent .bannerImg {
        max-width: 350px;
    }


    .teamsPage .teamCreditsGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 16px;
        align-items: start;
    }

    .teamsPage .teamCreditsAll {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "ep created art"
            "coproduced music .";
        gap: 24px 16px;
        margin-top: 8px;
        align-items: start;
    }

    .teamsPage .credit-ep { grid-area: ep; }
    .teamsPage .credit-created { grid-area: created; }
    .teamsPage .credit-art { grid-area: art; }
    .teamsPage .credit-coproduced { grid-area: coproduced; }
    .teamsPage .credit-music { grid-area: music; }

    .teamGameCard .gameImgBox,
    .teamsPage .gameImgBox {
        max-width: 100%;
    }

    .productBanner .bannerSubTitle,
    .profileBanner .bannerSubTitle {
        font-size: var(--textBodyLarge);
    }

    .gameCards {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }

    .clientsList .clientItem {
        max-width: 100%;
    }

    .clientsList .clientImg {
        max-height: 85px;
        max-width: 100%;
        height: auto;
        width: auto;
    }

    .d-lg-none {
        display: none !important;
    }

    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .teamGameCard .gameImgBox,
    .teamsPage .gameImgBox {
        width: min(100%, 250px);
    }

    .teamGameCard .gameImgBox img,
    .teamsPage .gameImgBox img {
        max-width: 72%;
        max-height: 88%;
    }

    .formContainer .formRow {
        flex-direction: row;
    }

    .formContainer .formRow .formCol .numberInput {
        max-width: 150px;
    }

    .orderInformation {
        flex-direction: row;
        align-items: stretch;
        gap: 32px;
    }

    .orderInformation .cartItem .itemContent .remveItem {
        position: static;
    }

    .cartInfo {
        flex-direction: column;
    }

    .gamePreview .gamePreviewTop {
        gap: 40px;
        padding-top: 24px;
        margin-bottom: 40px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .gamePreview .gamePreviewTop .leftCol {
        min-width: 0;
        flex: 1 1 auto;
        max-width: none;
        margin-right: 0;
    }

    .gamePreview .headBoxContainer {
        text-align: left;
        padding: 0 0 20px;
    }

    .gamePreview .titleWrap .h1Title {
        font-size: clamp(38px, 4.2vw, 68px);
        white-space: nowrap;
    }

    .gamePreview .titleWrap .heroStars {
        top: -32px;
        right: -80px;
        width: clamp(80px, 8vw, 115px);
    }

    .gamePreview .downloadGames {
        margin-bottom: 0;
        padding: 43px 43px 60px;
    }

    .gamePreview .nutcrackerGames .gameItemsRow p {
        max-width: 420px;
        /* max-width: 485px; */
        text-align: left;
        font-size: 28px;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg {
        max-width: 120px;
        top: -22%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.left {
        left: -8%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.right {
        right: -8%;
    }

    .gamePreview .nutcrackerGames .gameItemsRow:nth-of-type(2n) .gameImgCol {
        order: 2;
    }

    .gamePreview .nutcrackerGames .gameItemsRow {
        flex-direction: row;
        align-items: center;
    }

    .gamePreview .gamesFeatures {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: start;
    }

    .gamePreview .gamesFeatures .featureItemList {
        margin-bottom: 20px;
    }

    .gamePreview .gameOverview .priceTag {
        text-align: left;
        font-size: 48px;
    }

    .gamePreview .gameOverview {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 18px;
        padding: 28px 30px 32px;
    }

    .gamePreview .listingItems ul li {
        font-size: var(--textBodyLarge);
    }

    .listingItems.awards ul li {
        font-size: var(--textBodyMedium);
    }

    .gamePreview .gamePreviewTop .rightCol {
        order: 2;
        flex: 0 0 474px;
        max-width: 474px;
        width: 474px;
        padding-top: 65px;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }

    .gamePreview .gamePreviewTop .gameImgBox {
        width: auto;
        height: auto;
        background: none;
    }

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        max-width: 90%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(0, 80, 200, 0.16);
        border: none;
    }

    .gamePreview.theme-feathers .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        height: 432px;
        max-width: none;
        object-fit: cover;
    }

    .gamePreview .gamePreviewTop .sectionCol {
        width: 100%;
        max-width: 100%;
        position: relative;
        bottom: auto;
        text-align: center;
    }

    .gamePreview.theme-feathers .gamePreviewTop .sectionCol {
        width: 308px;
        max-width: 308px;
    }

    .gamePreview .gamePreviewTop .testimonialTitle {
        /* white-space: nowrap; */
        margin-top: 24px;
    }

    .gamePreview.theme-feathers .gamePreviewTop .testimonialTitle {
        font-size: 20px;
        line-height: 1.15;
        width: 308px;
        max-width: 308px;
        margin-top: 24px;
    }

}

@media screen and (min-width: 1200px) {
    body {
        padding-top: 96px;
    }

    .heroBanner {
        padding: 40px 0 80px;
    }

    .teamsPage .teamCreditsGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 28px;
        align-items: start;
    }

    .teamsPage .teamCreditsAll {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "ep created art"
            "coproduced music .";
        gap: 32px 28px;
        margin-top: 12px;
    }

    /* .teamsPage .teamCreditTitle {
        font-size: 28px;
        line-height: 1.25;
    } */

 

    /* .teamsPage .teamCreditSubtitle {
        font-size: 20px;
    } */

    .teamsPage .creditRole {
        font-size: 24px;
    }

    .teamsPage .creditList p {
        font-size: 20px;
    }

    .teamsPage .teamCreditsPanel,
    .teamsPage .teamStoryPanel {
        padding: 26px 48px;
    }

    .productBanner.puzzleBanner .einsteinImg {
        width: 360px;
    }

    .productBanner.puzzleBanner .rightCol {
        margin-bottom: -88px;
    }

/* 
    .heroBanner .heroBannerContent .musicGameIcon:hover {
        transform: scale(1.2);
    } */

    .heroBanner .heroBannerContent .bannerImgBtn,
    .heroBanner .heroBannerContent .bannerImg {
        max-width: 441px;
    }

    .teamGameCard .gameImgBox,
    .teamsPage .gameImgBox {
        width: min(100%, 330px);
    }

    .teamGameCard {
        padding: 30px;
    }

    .teamGameCard .gameImgBox img,
    .teamsPage .gameImgBox img {
        max-width: 72%;
        max-height: 88%;
    }

    .gamePreview .gamePreviewTop .leftCol {
        flex: 1 1 auto;
        max-width: none;
        margin-right: 0;
    }

    .gamePreview .nutcrackerGames .gameItemsRow p {
        font-size: 36px;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg {
        max-width: 150px;
        top: -20%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.left {
        left: -8%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.right {
        right: -8%;
    }

    .gamePreview .nutcrackerGames .gameItemsRow .gameTextCol {
        flex: 1
    }

    /* 1440 Figma lock — match Figma proportions: left ~58%, right ~38% */
    .gamePreview .gamePreviewTop {
        gap: 40px;
    }

    .gamePreview .gamePreviewTop .rightCol {
        flex: 0 0 474px;
        max-width: 474px;
        width: 474px;
        margin-left: 0;
        padding-top: 65px;
        overflow: visible;
    }

    .gamePreview .gamePreviewTop .rightCol::before {
        width: 474px;
        height: 562px;
        top: 0;
    }

    .gamePreview .gamePreviewTop .gameImgBox {
        width: auto;
        height: auto;
        background: none;
        margin: 0 auto;
    }

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        max-width: none;
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(0, 80, 200, 0.16);
        border: none;
    }

    .gamePreview.theme-feathers .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        height: 432px;
        max-width: none;
        object-fit: cover;
    }

    /* .gamePreview .gameOverview .priceTag {
        font-size: 52px;
    } */

    .gamePreview .gameOverview {
        padding: 28px 32px 32px;
        gap: 14px 18px;
    }

    .gamePreview .gameOverview .btn {
        font-size: 18px;
        min-height: 50px;
        padding: 12px 22px;
    }

    .gamePreview .titleWrap .heroStars {
        top: -30px;
        right: -70px;
        width: 95px;
    }

    .gamePreview.theme-feathers .titleWrap .heroStars {
        width: min(140px, 28vw);
        max-width: 140px;
        right: -24px;
        top: -36px;
    }

    .gamePreview .headBoxContainer .titleWrap .h1Title {
        font-size: 56px;
        white-space: nowrap;
    }
}

@media screen and (min-width: 1440px) {
    /* .productBanner.teamsBanner,
    .productBanner.shopBanner,
    .productBanner.reviewsHero,
    .productBanner.downloadBanner,
    .profileBanner.settingsBanner {
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        overflow: hidden;
        justify-content: flex-start;
        padding-top: 38px;
        box-sizing: border-box;
    } */

    /* .productBanner.puzzleBanner {
        background-size: cover;
        background-position: top right;
    } */



    .productBanner.reviewsHero {
        background-image: url(../images/reviewBanner.png);
    }

    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
    body.edd-success .profileBanner.settingsBanner + .middleSection:has(.wp-block-edd-confirmation) {
        padding-bottom: 88px;
    }
}

@media screen and (min-width: 1400px) {
    body {
        padding-top: 100px;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg {
        top: -25%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.left {
        left: -15%;
    }

    .gamePreview .gameItemsRow .gameImgCol .starImg.right {
        right: -17%;
    }
}
@media  screen and (max-width: 1024px) {
    .gamePreview .gamesFeatures .headerTitle .subTitle,
    .gamePreview .listingItems .subTitle,
    .gamePreview .downloadGames .subTitle{
        font-size: 28px;
    }
}
@media screen and (max-width: 991px) {
    .edd-cart-quantity, .headerNav .edd-cart-quantity,
    .headerNav .navLink--cart .edd-cart-quantity{
        font-size: 10px;
        height: 16px;
        width: 16px;
        right: -6px;
    }
}
@media screen and (max-width: 767px) {
    .einsteinQuote blockquote, 
    .einsteinQuote blockquote p,
    .einsteinQuote figcaption{
        font-size: 20px !important;
    }

    .clientsList,
    .gamePreview .clientsList {
        width: 100%;
        max-width: 100%;
        gap: 16px 12px;
        justify-content: center;
        align-items: center;
        padding-inline: 4px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .clientsList .clientItem,
    .gamePreview .clientsList .clientItem {
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
    }

    .clientsList .clientImg,
    .gamePreview .clientsList .clientImg {
        height: auto;
        width: auto;
        max-height: 56px;
        max-width: 100%;
        object-fit: contain;
    }

    .productBanner,.profileBanner{
       background-size: cover;
      }
   
    .productBanner.teamsBanner,
    .productBanner.shopBanner,
    .productBanner.reviewsHero,
    .productBanner.skillBanner,
    .profileBanner.settingsBanner{
        overflow: visible;
        box-sizing: border-box;
        justify-content: center;
        min-height: auto;
        padding: 28px 0 40px;
        background-size: 100% 100%;
        background-position: center center;
        aspect-ratio: 390 / 300;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .productBanner.reviewsHero .heroBannerContent,
    .productBanner.skillBanner .heroBannerContent {
        max-width: 100%;
        padding-bottom: 0;
        text-align: center;
    }

    .productBanner.reviewsHero .h1Title,
    .productBanner.skillBanner .h1Title {
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .productBanner.reviewsHero .bannerSubTitle,
    .productBanner.skillBanner .bannerSubTitle {
        line-height: 1.35;
    }

    .productBanner.teamsBanner .h1Title {
        font-size: clamp(32px, 10vw, 40px);
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .productBanner.teamsBanner .bannerSubTitle {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.35;
    }

    .productBanner.teamsBanner + .middleSection,
    .middleSection {
        z-index: 1;
        padding-top: 16px;
    }

    body.edd-success .profileBanner.settingsBanner,
    body.kmg-checkout-page .profileBanner.settingsBanner {
        background-image: url(../images/profile-banner-mobile.png);
    }

    /* body.edd-success .profileBanner.settingsBanner + .middleSection,
    body.kmg-checkout-page .profileBanner.settingsBanner + .middleSection {
        margin-top: -56px;
        padding-top: 36px;
        position: relative;
        z-index: 1;
    } */

    .orderConfirm {
        padding: 24px 16px 28px;
    }

    .orderHistoryCard.cardBox {
        padding: 20px 16px;
    }

    .orderHistoryNumber {
        font-size: var(--textBodyMedium);
    }

    .orderConfirmProduct {
        flex-direction: column;
        align-items: flex-start;
    }

    .licenseKeyRow {
        flex-direction: column;
        align-items: stretch;
    }

    .licenseCopyBtn {
        width: 100%;
        justify-content: center;
    }

    .heroBanner .heroBannerContent {
        gap: 55px;
    }

    .orderInformation .cartOffBadge {
        width: 72px;
        height: 72px;
        top: -18px;
        right: 8px;
    }

    .orderInformation .cartOffText strong {
        font-size: 16px;
    }

    .orderInformation .cartOffText em {
        font-size: 14px;
    }

    .teamsPage .teamCreditsGrid {
        gap: 0;
    }

    .heroBanner {
        padding: 30px 0 60px;
    }

    .heroBanner .heroBannerContent .bannerImgBtn,
    .heroBanner .heroBannerContent .bannerImg {
        top: 0;
    }

    .heroBanner .heroBannerContent .rightCol .herobannerDesc {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 15px;
        max-width: 100%;
        width: 100%;
    }

    .heroBanner .heroBannerContent .rightCol .herobannerDesc .btn {
        font-size: 14px;
        padding: 8px 16px;
        white-space: normal;
        text-align: center;
    }

    .gamePreview .gameOverview .btn {
        font-size: 15px;
        white-space: normal;
    }

    .gamePreview .getGamePanel {
        margin-top: 20px;
        min-height: 0;
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .gamePreview .getGameBody {
        max-width: 100%;
    }

    .gamePreview .getGameTitle {
        font-size: 24px;
    }

    .gamePreview .getGameText {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .gamePreview .getGameBuyForm {
        max-width: 100%;
    }

    .gamePreview .getGameBuyForm {
        width: min(280px, 100%);
    }

    /* .gamePreview .getGameBuyBtn,
    .gamePreview .getGameBuyForm .getGameBuyBtn {
        width: min(280px, 100%);
        height: 43px;
        min-height: 43px;
        font-size: 20px;
        line-height: 100%;
    } */

    .gamePreview .getGamePlatforms {
        gap: 10px 16px;
        padding-bottom: 12px;
    }

    .gamePreview .getGamePlatforms li {
        font-size: 13px;
    }

    /* .gamePreview .getGameStores .storeBadge img {
        width: min(132px, 46%);
        height: 38px;
        max-width: 132px;
    } */

    .gamePreview .downloadGames .gamesItemRow {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 16px;
        margin-top: 20px;
    }

    .gamePreview .downloadGames .gamesItemRow .gamesItem {
        flex: 1 1 0;
        width: auto;
        max-width: calc((100% - 16px) / 2);
        min-width: 0;
    }

    .gamePreview .nutcrackerGames .gameItemsRow:last-child {
        margin-bottom: 0;
    }

    .gamePreview .nutcrackerGames .gameItemsRow .gameImgCol {
        max-width: min(100%, 420px);
    }

    .gamePreview .gamePreviewTop .rightCol {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
    }

    .gamePreview .gamePreviewTop .rightCol::before {
        width: min(474px, 98vw);
        height: min(562px, 116vw);
        top: 0;
        background-size: contain;
    }

    .gamePreview .gamePreviewTop .gameImgBox {
        width: auto;
        height: auto;
        background: none;
        margin-top: 0;
    }

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: min(290px, 72vw);
        max-width: 90%;
        
    }
    .gamePreview .nutcrackerGames .gameItemsRow .gameImgCol, .gamePreview .nutcrackerGames .gameItemsRow .gameImgCol img:not(.starImg):not(.featherPlayImg){
        border-radius: var(--radius-lg);
    }
    .gamePreview.theme-feathers .gamePreviewTop .gameImgBox .coverImg {
        width: min(305px, 72vw);
        height: auto;
        max-width: 90%;
        aspect-ratio: 305 / 432;
        object-fit: cover;
    }

    .gamePreview.theme-feathers .featherPlayBtn {
        width: 84px;
        height: 108px;
    }

    .gamePreview.theme-feathers .featherPlayBtn.right {
        top: -18px;
        right: -10px;
    }

    .gamePreview.theme-feathers .featherPlayBtn.left {
        top: -68px;
        left: -37px;
        right: auto;
    }

    .gamePreview.theme-feathers .featherPlayIcon {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .gamePreview.theme-feathers .featherPlayImg {
        width: 68px;
        height: 102px;
        bottom: 8px;
    }

    .gamePreview.theme-feathers .gameImgBox .featherPlayImg {
        width: 50px;
        height: 86px;
        bottom: 33px;
    }

    .gamePreview.theme-feathers .gameImgCol .featherPlayBtn {
        width: 84px;
        height: 110px;
    }

    .gamePreview.theme-feathers .gameImgCol .featherPlayBtn.right {
        top: -76px;
        right: -17px;
    }

    .gamePreview.theme-feathers .gameImgCol .featherPlayBtn.left {
        left: -10px;
    }

    .gamePreview.theme-feathers .gameImgCol .featherPlayImg {
        width: 50px;
        height: auto;
        bottom: 38px;
    }
    .gamePreview.theme-feathers .featherPlayBtn.left.kmg-flute-feather3-trigger .featherPlayImg{
        bottom: 36px;
    }

    .gamePreview .gamePreviewTop .sectionCol {
        text-align: center;
        width: 100%;
        max-width: min(308px, 92%);
        margin-top: 20px;
        bottom: auto;
        position: relative;
    }

    .gamePreview .gamePreviewTop .testimonialTitle {
        font-family: var(--caveat-font), 'Caveat', cursive;
        font-size: clamp(20px, 5.5vw, 28px);
        line-height: 1.2;
        margin-top: 0;
        max-width: 100%;
    }

    .gamePreview.theme-feathers .gamePreviewTop .testimonialTitle {
        font-size: 20px;
        line-height: 1.15;
        width: 100%;
        max-width: 308px;
        margin-top: 0;
    }

    .gamePreview .gamePreviewTop .testimonialAuthor {
       font-size: 18px;
    }

    .gamePreview.theme-feathers .gamePreviewTop .testimonialAuthor {
        display: inline;
        font-size: inherit;
        margin: 0 0 0 0.25em;
    }

    .gamePreview .reviewQuoteRow {
        display: block;
    }

    .gamePreview .reviewCard .reviewLogo {
        float: none;
        margin: 0 0 12px;
    }

    .gamePreview .reviewCard .reviewBtn {
        width: 100%;
        min-width: 0;
    }

    /* Discovery Education — logos in one row above full-width text (Android/mobile) */
    .gamePreview .reviewCard.discoveryReview {
        min-height: 0;
        max-width: 100%;
        padding: 20px 16px 22px;
        overflow: hidden;
    }

    .gamePreview .reviewCard.discoveryReview .reviewBrandRow {
        float: none !important;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 0 0 14px;
    }

   

    .gamePreview .reviewCard.discoveryReview p {
        clear: both;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Neutralize CMS <br> line breaks on Android/mobile (e.g. "in<br>innovative ways.") */
    .gamePreview .reviewCard.discoveryReview p br {
        display: none;
    }

    .gamePreview .reviewCard.discoveryReview p img {
        float: none !important;
        display: inline-block;
        vertical-align: middle;
        width: auto;
        max-width: min(68px, 22vw);
        height: auto;
        margin: 0 10px 12px 0;
    }

    .gamePreview .reviewCard.discoveryReview .reviewBtn {
        clear: both;
        width: fit-content;
        min-width: 180px;
        max-width: 100%;
    }

    /* review page styles */
    .reviewsPage .reviewQuoteRow .nytWordmark {
        width: 180px;
        max-width: 55%;
        margin: 0 10px 6px 0;
    }

    .gameBundle {
        flex-direction: column;
        min-height: 0;
        max-width: 100%;
        padding: 20px 16px;
        gap: 18px;
        overflow: hidden;
    }

    .gameBundle .bundleOffer {
        width: 100%;
        min-width: 0;
        max-width: 280px;
    }

    .gameBundle .bundleGames {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .gameBundle .bundleCover {
        width: 96px;
        height: 140px;
        flex-basis: 96px;
    }

    .gameBundle .bundlePlus {
        font-size: 34px;
    }

    .gameBundle .bundlePrice {
        white-space: normal;
    }

    .tabs-wrapper {
        margin-bottom: 30px;
    }

    .tabs .tab-item {
        padding: 8px 18px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* Testimonials archive — mobile layout */
    .testimonial-tabs-wrapper {
        justify-content: flex-start;
        margin-bottom: 20px;
        padding: 2px 2px 6px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .testimonial-tabs-wrapper .tabs {
        width: max-content;
        max-width: none;
        flex-wrap: nowrap;
        margin: 0 auto;
    }

    .testimonial-tabs-wrapper .tab-item {
        padding: 8px 12px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .tab-content > .content.active > .h3Title,
    .tab-content h2.h3Title {
        height: auto;
        min-height: 0;
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.2;
        margin-bottom: 16px;
        display: block;
    }

    .userTestimonials {
        gap: 16px;
        margin-top: 20px;
    }

    .userTestimonials .user-review {
        padding: 16px;
        border-radius: var(--radius-lg) !important;
    }

    .userTestimonials .user-review .userBlock {
        gap: 10px;
        margin-bottom: 10px;
    }

    .userTestimonials .user-review .userBlock .user-img {
        width: 44px;
        height: 44px;
        max-width: 44px;
        max-height: 44px;
    }

    .userTestimonials .user-review .user-name {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 2px;
    }

    .userTestimonials .user-review .userTitle {
        font-size: 15px;
        min-height: 0;
        line-height: 1.2;
    }

    .userTestimonials .user-review p,
    .userTestimonials .user-review ul,
    .userTestimonials .user-review ol,
    .userTestimonials .user-review .review-content,
    .userTestimonials .user-review .review-content p {
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .gamePreview .titleWrap .h1Title,
    .gamePreview .headBoxContainer .titleWrap .h1Title {
        white-space: normal;
        font-size: clamp(26px, 6.5vw, 42px);
    }
   
    .gamePreview.theme-feathers{
        padding-top: 0;
    }
    .skillsDevBody .skillsDevList {
        padding: 22px 18px 24px;
    }
  
    .skillsDevBody .skillsDevList .subTitle {
        font-size: 22px;
    }
  
    .skillsDevBody .skillsDevList ul li {
        font-size: 16px;
    }


}

/* ==========================================
   Mobile 480px and down (Compact Mobile)
========================================== */
@media screen and (max-width: 480px) {
    .container {
        width: min(100% - 24px, 1210px);
        padding-left: 15px;
        padding-right: 15px;
    }
    .btn{
        font-size: var(--textLabelMedium);
    }

    .cardBox {
        padding: 20px 16px;
    }

    .accountSetting .card {
        gap: 12px;
    }

    .accountSetting .card .left-content {
        gap: 12px;
    }

    .accountSetting .card .icon-box {
        min-width: 44px;
        min-height: 44px;
    }

    .accountSetting .card .arrow {
        font-size: 30px;
    }

    .orderInformation .cardBox {
        padding: 20px 16px;
        border-radius: var(--radius-lg) !important;
    }
    .orderInformation .btnRow .btn{
        height: 40px;
        font-size: var(--textLabelMedium);
    }

    /* Cart payment logos — equal columns; Amex/Discover zoomed to match weight */
    .orderInformation .payment-logo {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 8px;
        margin-top: 16px;
        padding: 0;
    }

    .orderInformation .payment-logo li {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .orderInformation .payment-logo img {
        width: 100%;
        max-width: 100%;
    }

    /* .orderInformation .payment-logo-item--visa img {
        height: 22px;
        max-height: 22px;
    }

    .orderInformation .payment-logo-item--mastercard img,
    .orderInformation .payment-logo-item--maestro img {
        height: 26px;
        max-height: 26px;
    } */

    /* Wordmarks have more internal padding — enlarge inside the cell only */
    /* .orderInformation .payment-logo-item--american-express img,
    .orderInformation .payment-logo-item--discover img {
        height: 24px;
        max-height: 24px;
    } */

    .orderInformation .cartItem {
        gap: 12px;
    }

    .orderInformation .cartVersionOptions {
        gap: 12px 16px;
    }

    .orderInformation .cartVersionLabel {
        font-size: 12px;
    }

    .orderInformation .cartOsTrigger {
        min-width: 136px;
        padding: 7px 10px;
    }

    .orderInformation .cartItem .cartImg {
        max-width: 68px;
    }

    .teamsPage .teamCreditsPanel,
    .teamsPage .teamStoryPanel {
        padding: 24px 16px;
    }

    .teamsPage .teamCreditsCarousel {
        padding: 0 36px 4px;
    }

    .teamsPage .teamCreditsAll {
        gap: 14px 5px;
        margin-top: 0px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teamsPage .creditRole {
        font-size: 13px;
        line-height: 1.15;
        margin-bottom: 2px;
    }

    .teamsPage .creditList p {
        font-size: 13px;
        line-height: 1.25;
    }

    .productBanner.teamsBanner {
        overflow: visible;
        min-height: auto;
        padding: 20px 0 56px;
        background-size: cover;
        background-position: bottom center;
    }

    .productBanner.teamsBanner .h1Title {
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .productBanner.teamsBanner .bannerSubTitle {
        line-height: 1.35;
    }

    /* .productBanner.teamsBanner + .middleSection {
        position: relative;
        z-index: 1;
        margin-top: -28px;
        padding-top: 12px;
    } */
    .gamePreview .gamesFeatures .headerTitle .subTitle,
    .gamePreview .listingItems .subTitle,
    .gamePreview .downloadGames .subTitle{
        font-size: 20px;
    }
    .gamePreview .reviewCard p,
    .gamePreview .reviewCard p strong,
    .gamePreview .reviewCard p, .gamePreview .reviewCard.discoveryReview p{
        font-size: 18px;
    }
    .gamePreview .houstonBanner{
        margin-bottom: 15px;
    }
    .gamePreview .gamesFeatures .featuresCol .mt-40 {
        margin-top: 20px;
    }
   
}

/* ==========================================
   Mobile 360px and down (Ultra Small Mobile)
========================================== */
@media screen and (max-width: 360px) {
    .tabs .tab-item {
        padding: 6px 10px;
        font-size: 12px;
    }

    .heroBanner .heroBannerContent .rightCol .herobannerDesc .btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    .teamsPage .teamCreditsCarousel {
        padding: 8px 32px 0;
    }

    .teamsPage .gameImgBox {
        width: min(100%, 170px);
    }
}