/* WordPress and EDD bindings for the supplied static design. Updated: 2026-07-27 06:54 */
.site-content { min-height: 0; padding: 0; }
.site-footer { display: none; }
.gameOverview form,
.gameOverview .edd_download_purchase_form { display: block; width: 100%; margin: 0; padding: 0; background: transparent; }
.gameOverview .edd_purchase_submit_wrapper { width: 100%; margin: 0; padding: 0; background: transparent; }
/* EDD's default button is more specific than .btn, so reset only the EDD
   purchase control here and retain the supplied design's rounded Buy button. */
.gameOverview .edd_purchase_submit_wrapper .edd-add-to-cart.edd-submit.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin: 0 !important;
  padding: 5px 20px !important;
  border: 2px solid var(--btnPrimary) !important;
  border-radius: var(--radius-xl) !important;
  background-color: var(--btnPrimary) !important;
  color: var(--textInverse) !important;
  font-family: var(--secondary-font);
  font-size: var(--textButtonMedium);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: none !important;
}
.gameOverview .edd_purchase_submit_wrapper .edd-add-to-cart.edd-submit.button:hover,
.gameOverview .edd_purchase_submit_wrapper .edd-add-to-cart.edd-submit.button:focus { background-color: var(--surfaceBase) !important; color: var(--btnPrimary) !important; }
/* EDD includes this duplicate link only as a fallback for browsers without JS. */
.gameOverview .edd_purchase_submit_wrapper .edd-add-to-cart.edd-no-js { display: none !important; }
.gameOverview .edd_go_to_checkout { display: none !important; }
.gameOverview .edd-cart-ajax-alert { display: none; }
/* Removed min-height: 510px - let cards grow naturally based on content */
.gameCards .gameCardItem .cardContent { transition: opacity .2s, visibility .2s; }
.gameCards .gameCardItem:hover .cardContent {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.gameCards .gameCardItem:hover .priceTag .edd_price { color: var(--textInverse) !important; }
.gameCards .gameCardItem .is-disabled { cursor: not-allowed; opacity: .55; }
/* .headerNav .edd-cart-quantity {
  background: var(--surfaceBase);
  border-radius: 50%;
  color: var(--textLink);
  display: inline-grid;
  font-size: 11px;
  font-weight: 700;
  height: 18px;
  width: 18px;
  place-items: center;
  line-height: 1;
  margin: 0;
  position: absolute;
  top: -8px;
  right: -10px;
  z-index: 1;
} */

.headerNav .navLink--cart .navIconWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.kmg-share-modal { z-index: 10001; }

.kmg-share-modal .kmg-share-message-editor {
    box-sizing: border-box;
    min-height: 160px;
    padding: 9px 11px;
    overflow-y: auto;
    border: 1px solid #b7c4cc;
    border-radius: 8px;
    background: #fff;
    white-space: pre-wrap;
}

.kmg-share-modal .kmg-share-message-editor:focus {
    outline: 2px solid var(--textLink);
    outline-offset: 1px;
}

.kmg-share-modal .kmg-share-message-editor a {
    color: var(--textLink);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 991px) {
  .headerNav .nav-right-col .navItem {
    gap: 14px;
  }

  .headerNav .search-container {
    display: none;
  }

  .headerNav .nav-right-col .navLink > span:not(.navIconWrap):not(.profileLinkLabel) {
    display: none !important;
  }

  .headerNav .nav-right-col .navLink--cart > span:not(.navIconWrap) {
    display: none !important;
  }

  .headerNav .nav-right-col .navLink .navIcon {
    display: block;
  }

  
  .headerNav .nav-right-col .profile-design-link {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .headerNav .nav-right-col .profile-design-link .profileLinkLabel {
    display: inline-flex !important;
    align-items: center;
    padding: 0;
    font-size: 22px;
    display: none;
  }
  .headerNav .nav-right-col .profile-design-link .profileLinkLabel .profileLinkText {
    display: none;
    }
    .profile-menu{
        flex-direction: row;
    }
    .headerNav .navItem .profile-menu > .navLink{
        padding: 0px;
    }
}
@media screen and (max-width: 991px) { .headerNav #topNavigation .navList { align-items: stretch; flex-direction: column; gap: 0; width: 100%; } }
@media screen and (max-width: 767px) {
  .gameCards .gameCardItem { background-color: #3F3F3FE5; }
  .gameCards .gameCardItem h3,
  .gameCards .gameCardItem .cardSubTitle { color: #fff; }
  .gameCards .gameCardItem .cardContent { display: none; }
  .gameCards .gameCardItem .gameOverview { display: flex; opacity: 1; }
  /* Shop: keep description + Buy visible on mobile */
  .post-type-archive-download .gameCards .gameCardItem { background-color: var(--cardBg); }
  .post-type-archive-download .gameCards .gameCardItem h3,
  .post-type-archive-download .gameCards .gameCardItem .cardSubTitle { color: var(--textHeading); }
  .post-type-archive-download .gameCards .gameCardItem .cardContent { display: block; }
}


/* Custom inline form for Add to Cart */
.gameOverview form.kmg-inline-form {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.gameOverview form.kmg-inline-form .btn.btn-primary.edd-submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 5px 20px !important;
  border: 2px solid var(--btnPrimary) !important;
  border-radius: var(--radius-xl) !important;
  background-color: var(--btnPrimary) !important;
  color: var(--textInverse) !important;
  font-family: var(--secondary-font);
  font-size: var(--textButtonMedium);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer !important;
}

.gameOverview form.kmg-inline-form .btn.btn-primary.edd-submit:hover,
.gameOverview form.kmg-inline-form .btn.btn-primary.edd-submit:focus {
  background-color: var(--surfaceBase) !important;
  color: var(--btnPrimary) !important;
}


/* Page content styling */
.entry-content {
    font-size: var(--textBodyMedium);
    line-height: 115%;
    color: var(--textBlack);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--textHeading);
    font-family: var(--secondary-font);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    margin-top: var(--space-md);
}

.entry-content h1 { font-size: 40px; }
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 30px; }
.entry-content h4 { font-size: 24px; }

.entry-content p {
    margin-bottom: var(--space-sm);
}

.entry-content ul,
.entry-content ol {
    margin-left: 25px;
    margin-bottom: var(--space-sm);
}

.entry-content li {
    margin-bottom: 10px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
}

.entry-content a {
    color: var(--textLink);
    text-decoration: underline;
}

.entry-content a:hover {
    text-decoration: none;
}

.page-links {
    margin-top: var(--space-lg);
    font-family: var(--secondary-font);
    font-weight: 700;
}


/* Profile Banner - EXACT copy from HTML developer */
/* .mainContainer .profileBanner {
    background-image: url(images/profile-banner-mobile.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: bottom center !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 30px 0 140px !important;
    min-height: 200px !important;
} */

.mainContainer .profileBanner .heroBannerContent {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 25px !important;
}

.mainContainer .profileBanner .bannerSubTitle {
    font-size: var(--textBodySmall) !important;
    font-family: var(--base-font) !important;
    font-weight: 600 !important;
    color: var(--textInverse) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* ============================================
   LOGIN/REGISTER PAGE - HTML Developer's Design
   COMPLETE MATCH WITH EXACT SIZING AND COLORS
   ============================================ */

/* Login/Register Section Layout */
.loginRegisterPage .loginRegisterSection {
    position: relative !important;
    z-index: 1 !important;
    /* padding-top: 48px !important; */
}

.loginRegisterPage .loginRegisterInformation {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 40px !important;
    width: 100% !important;
}

.loginRegisterPage .loginRegisterCard {
    width: min(100%, 510px) !important;
    flex: 0 1 510px !important;
    margin: 0 auto !important;
    padding: 40px !important;
    background: #E4F3FF !important;
    border-radius: 40px !important;
    box-shadow: 0px 6px 0px 0px #66BDFF80 !important;
}

.loginRegisterPage .loginRegisterSidebar {
    flex: 0 1 470px !important;
    align-self: center !important;
}

.loginRegisterPage .loginRegisterSidebar .sidebarImg {
    display: block !important;
    width: 100% !important;
    max-width: 470px !important;
    height: auto !important;
}

/* Auth Tabs - EXACT match from HTML developer */
.loginRegisterPage .authTabs,
.loginRegisterPage .auth-tabs {
    display: flex !important;
    gap: 56px !important;
    margin-bottom: 28px !important;
}

.loginRegisterPage .authTab,
.loginRegisterPage .auth-tab {
    flex: 1 !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    border: 2px solid #0092FF !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    color: #0092FF !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s !important;
    text-align: center !important;
}

.loginRegisterPage .authTab.active,
.loginRegisterPage .auth-tab.active {
    background-color: #0092FF !important;
    color: #fff !important;
}

.loginRegisterPage .authTab:hover,
.loginRegisterPage .auth-tab:hover {
    opacity: 0.9 !important;
}

/* Auth Panels - Grid overlay technique from HTML developer */
.loginRegisterPage .authPanels,
.loginRegisterPage .auth-panels {
    display: grid !important;
}

.loginRegisterPage .authPanel,
.loginRegisterPage .auth-form {
    grid-area: 1 / 1 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.loginRegisterPage .authPanel.active,
.loginRegisterPage .auth-form.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Form Container - Base structure */
.loginRegisterPage .authPanel .formContainer,
.loginRegisterPage .auth-form .formContainer {
    display: flex !important;
    flex-direction: column !important;
}

.loginRegisterPage .formContainer .formRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.loginRegisterPage .formContainer .formRow .formCol {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Labels - EXACT match from HTML developer */
.loginRegisterPage .formContainer .inputLabel,
.loginRegisterPage .formContainer label,
.loginRegisterPage .authPanel .formContainer label,
.loginRegisterPage .auth-form .formContainer label {
    font-family: 'Nunito Sans', sans-serif !important;
    color: #3B2F4A !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* Form Inputs - EXACT MATCH from HTML developer with WHITE BACKGROUND */
.loginRegisterPage .formContainer .formInput,
.loginRegisterPage .formContainer input[type="text"],
.loginRegisterPage .formContainer input[type="email"],
.loginRegisterPage .formContainer input[type="password"],
.loginRegisterPage .authPanel .formContainer input[type="text"],
.loginRegisterPage .authPanel .formContainer input[type="email"],
.loginRegisterPage .authPanel .formContainer input[type="password"],
.loginRegisterPage .auth-form .formContainer input[type="text"],
.loginRegisterPage .auth-form .formContainer input[type="email"],
.loginRegisterPage .auth-form .formContainer input[type="password"] {
    font-family: 'Nunito Sans', sans-serif !important;
    color: #3B2F4A !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    background-color: #ffffff !important;
    border: 2px solid #C3C3C3 !important;
    border-radius: 40px !important;
    padding: 7px 20px !important;
    outline: none !important;
    width: 100% !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

.loginRegisterPage .formContainer .formInput:focus,
.loginRegisterPage .formContainer input[type="text"]:focus,
.loginRegisterPage .formContainer input[type="email"]:focus,
.loginRegisterPage .formContainer input[type="password"]:focus,
.loginRegisterPage .authPanel .formContainer input:focus,
.loginRegisterPage .auth-form .formContainer input:focus {
    border-color: #0092FF !important;
    background-color: #CDEAFF !important;
}

/* Input Wrapper with Icon - EXACT match from HTML developer */
.loginRegisterPage .formContainer .input-wrapper,
.loginRegisterPage .authPanel .formContainer .input-wrapper,
.loginRegisterPage .auth-form .formContainer .input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.loginRegisterPage .formContainer .input-wrapper.icon-left .formInput,
.loginRegisterPage .formContainer .input-wrapper.icon-left input,
.loginRegisterPage .authPanel .formContainer .input-wrapper.icon-left input,
.loginRegisterPage .auth-form .formContainer .input-wrapper.icon-left input {
    padding-left: 50px !important;
    width: 100% !important;
}

.loginRegisterPage .formContainer .input-wrapper .icon,
.loginRegisterPage .authPanel .formContainer .input-wrapper .icon,
.loginRegisterPage .auth-form .formContainer .input-wrapper .icon {
    font-size: 20px !important;
    color: #676767 !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 1 !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
}

/* Password Hint Box - EXACT match from HTML developer */
.loginRegisterPage .formContainer .passwordHint,
.loginRegisterPage .kmg-password-rules,
.loginRegisterPage .kmg-register-password-rules {
    display: flex !important;
    gap: 15px !important;
    padding: 20px 15px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    background-color: #CEEAFF !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    align-items: flex-start !important;
}

.loginRegisterPage .kmg-password-rules strong,
.loginRegisterPage .kmg-register-password-rules strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #3B2F4A !important;
    line-height: 1.1 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.loginRegisterPage .formContainer .passwordHint .iconBox {
    background-color: #AADBFF !important;
    color: #0092FF !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.loginRegisterPage .formContainer .passwordHint .iconBox svg {
    width: 24px !important;
    height: 28px !important;
    fill: currentColor !important;
}

.loginRegisterPage .formContainer .passwordHint .passwordTitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #3B2F4A !important;
    line-height: 1.1 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.loginRegisterPage .formContainer .passwordHint ul,
.loginRegisterPage .kmg-password-rules ul,
.loginRegisterPage .kmg-register-password-rules ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.loginRegisterPage .formContainer .passwordHint ul li,
.loginRegisterPage .kmg-password-rules ul li,
.loginRegisterPage .kmg-register-password-rules ul li {
    font-size: 16px !important;
    color: #5B5B5B !important;
    font-weight: 500 !important;
    display: flex !important;
    margin-bottom: 5px !important;
    gap: 10px !important;
    align-items: center !important;
}

.loginRegisterPage .formContainer .passwordHint ul li i,
.loginRegisterPage .kmg-password-rules ul li::before,
.loginRegisterPage .kmg-register-password-rules ul li::before {
    content: "✓" !important;
    color: #0CEB00 !important;
    font-weight: 700 !important;
    display: inline-block !important;
    font-style: normal !important;
}

/* Button Row - EXACT match from HTML developer */
.loginRegisterPage .formContainer .btnRow {
    display: flex !important;
    gap: 20px !important;
    flex-direction: column !important;
    margin-top: 20px !important;
}

/* .loginRegisterPage .formContainer .btnRow .btn,
.loginRegisterPage .authPanel .formContainer button[type="submit"],
.loginRegisterPage .auth-form .formContainer button[type="submit"],
.loginRegisterPage .formContainer button.btn-secondary {
    font-size: 16px !important;
    padding: 10px 20px !important;
    width: 100% !important;
    max-width: none !important;
    border: 2px solid #0092FF !important;
    border-radius: 999px !important;
    background-color: #0092FF !important;
    color: #fff !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    min-height: 48px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
} */

.loginRegisterPage .formContainer .btnRow .btn:hover,
.loginRegisterPage .authPanel .formContainer button[type="submit"]:hover,
.loginRegisterPage .auth-form .formContainer button[type="submit"]:hover {
    background-color: #0265F5 !important;
    border-color: #0265F5 !important;
}

/* Lost Password Link */
.loginRegisterPage .lost-password {
    margin: 18px 0 0 !important;
    text-align: center !important;
}

.loginRegisterPage .lost-password a {
    color: #0092FF !important;
    text-decoration: underline !important;
    font-size: 16px !important;
}

.loginRegisterPage .lost-password a:hover {
    text-decoration: none !important;
}

/* Auth Notices */
.loginRegisterPage .kmg-auth-notice,
.loginRegisterPage .kmg-auth-notice.error {
    padding: 12px 15px !important;
    border-radius: 15px !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

.loginRegisterPage .kmg-auth-notice.success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

/* Lost Password Pages */
.loginRegisterPage .lostPasswordSection .loginRegisterCard,
.lostPasswordSection .loginRegisterCard {
    padding: 40px !important;
}

.loginRegisterPage .lostPasswordTitle,
.lostPasswordSection .lostPasswordTitle {
    font-size: 40px !important;
    margin-bottom: 15px !important;
    color: #3B2F4A !important;
}

.loginRegisterPage .lostPasswordIntro,
.lostPasswordSection .lostPasswordIntro {
    margin-bottom: 20px !important;
    font-size: 16px !important;
    color: #5B5B5B !important;
}

.loginRegisterPage .lostPasswordBack,
.lostPasswordSection .lostPasswordBack {
    margin-top: 20px !important;
    text-align: center !important;
}

.loginRegisterPage .lostPasswordBack a,
.lostPasswordSection .lostPasswordBack a {
    color: #0092FF !important;
    font-size: 16px !important;
}

.loginRegisterPage .kmg-lost-password-notice {
    padding: 12px 15px !important;
    border-radius: 15px !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
}

.loginRegisterPage .kmg-lost-password-notice-error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

.loginRegisterPage .kmg-lost-password-notice-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

/* Responsive Styles - Tablet and up */
@media screen and (min-width: 768px) {
    .loginRegisterPage .authTab,
    .loginRegisterPage .auth-tab {
        min-height: 56px !important;
        font-size: 32px !important;
    }
    
    .loginRegisterPage .formContainer .inputLabel,
    .loginRegisterPage .formContainer label,
    .loginRegisterPage .authPanel .formContainer label,
    .loginRegisterPage .auth-form .formContainer label {
        font-size: 24px !important;
    }
    
    /* .loginRegisterPage .formContainer .formInput,
    .loginRegisterPage .formContainer input,
    .loginRegisterPage .authPanel .formContainer input,
    .loginRegisterPage .auth-form .formContainer input {
        font-size: 20px !important;
        padding: 12px 20px !important;
    }
     */
    .loginRegisterPage .formContainer .input-wrapper.icon-left .formInput,
    .loginRegisterPage .formContainer .input-wrapper.icon-left input,
    .loginRegisterPage .authPanel .formContainer .input-wrapper.icon-left input,
    .loginRegisterPage .auth-form .formContainer .input-wrapper.icon-left input {
        padding-left: 52px !important;
    }
    
    /* .loginRegisterPage .formContainer .btnRow .btn,
    .loginRegisterPage .authPanel .formContainer button[type="submit"],
    .loginRegisterPage .auth-form .formContainer button[type="submit"] {
        font-size: 20px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    } */
    
    .loginRegisterPage .formContainer .passwordHint,
    .loginRegisterPage .kmg-password-rules,
    .loginRegisterPage .kmg-register-password-rules {
        gap: 35px !important;
    }
    
    .loginRegisterPage .formContainer .passwordHint .passwordTitle,
    .loginRegisterPage .kmg-password-rules strong,
    .loginRegisterPage .kmg-register-password-rules strong {
        font-size: 20px !important;
    }
    
    .loginRegisterPage .formContainer .passwordHint ul li,
    .loginRegisterPage .kmg-password-rules ul li,
    .loginRegisterPage .kmg-register-password-rules ul li {
        font-size: 16px !important;
    }
}

/* Responsive Styles - Mobile */
@media screen and (max-width: 767px) {
    .loginRegisterPage .loginRegisterSection,
    .lostPasswordSection {
        padding-top: 30px !important;
    }

    .loginRegisterPage .loginRegisterCard,
    .lostPasswordSection .loginRegisterCard {
        padding: 28px 20px !important;
    }

    .loginRegisterPage .loginRegisterInformation {
        display: block !important;
    }

    .loginRegisterPage .authTabs,
    .loginRegisterPage .auth-tabs {
        gap: 12px !important;
    }

    .loginRegisterPage .authTab,
    .loginRegisterPage .auth-tab {
        min-height: 48px !important;
        padding: 10px 12px !important;
        font-size: 20px !important;
    }
}

/* Shop card action hover states — match HTML/games.html: preserve each
 * button's colour family and use its supplied darker active colour. */
.post-type-archive-download .gameCards .gameCardItem .gameOverview form.kmg-inline-form .btn.btn-primary.edd-submit:hover,
.post-type-archive-download .gameCards .gameCardItem .gameOverview form.kmg-inline-form .btn.btn-primary.edd-submit:focus-visible {
    background-color: var(--btnPrimaryActive) !important;
    border-color: var(--btnPrimaryActive) !important;
    color: var(--textInverse) !important;
}

.post-type-archive-download .gameCards .gameCardItem .gameOverview .btn.btn-secondary:hover,
.post-type-archive-download .gameCards .gameCardItem .gameOverview .btn.btn-secondary:focus-visible {
    background-color: var(--btnSecondaryActive) !important;
    border-color: var(--btnSecondaryActive) !important;
    color: var(--textInverse) !important;
}

/* Confirmation/receipt bundle titles: reserve only the space required for the
   price, so a bundle name stays on one line on desktop. */
@media screen and (min-width: 768px) {
    .mainContainer .edd-blocks-receipt__items .edd-blocks-receipt__item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .mainContainer .edd-blocks-receipt__item-details > .edd-blocks__row-label {
        white-space: nowrap;
    }
}

@media screen and (min-width: 768px) {
    /* .mainContainer .profileBanner {
        background-image: url(images/profile-banner.png) !important;
        min-height: 360px !important;
        padding: 40px 0 180px !important;
    }
     */
    .mainContainer .profileBanner .heroBannerContent {
        text-align: left !important;
    }
    
    .mainContainer .profileBanner .bannerSubTitle {
        font-size: var(--textBodyLarge) !important;
    }
}

/* User Information Layout (form + sidebar) */
.userInformation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
}

.userInformation .h3Title {
    font-size: var(--textBodyLarge);
    color: var(--textLink);
    margin-bottom: 30px;
}

.userInformation .sidebarImg {
    max-width: 470px;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 992px) {
    .userInformation {
        flex-direction: row;
        gap: 40px;
    }
}


/* Password Hint Box - from HTML developer's design */
.passwordHint {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: #F5F8FA;
    border-radius: var(--radius-md);
    margin-top: 20px;
}

.passwordHint .iconBox {
    flex-shrink: 0;
}

.passwordHint .iconBox svg {
    width: 24px;
    height: 28px;
    fill: var(--textLink);
}

.passwordHint .passwordTitle {
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    font-weight: 700;
    color: var(--textHeading);
    margin-bottom: 10px;
}

.passwordHint ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.passwordHint ul li {
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    color: var(--textBody);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.passwordHint ul li i {
    color: #ddd;
    font-size: 14px;
}

.passwordHint ul li.is-valid i {
    color: #28a745;
}

@media screen and (min-width: 768px) {
    .passwordHint {
        gap: 35px;
    }
    
    .passwordHint .passwordTitle {
        font-size: var(--textBodyMedium);
    }
}

/* Button row styling */
.formContainer .btnRow {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.formContainer .btnRow .btn {
    min-width: 150px;
}

/* Profile page form input overrides for WordPress */
.mainContainer .formContainer .formRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.mainContainer .formContainer .formRow .formCol {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mainContainer .formContainer .formRow .formCol .inputLabel {
    font-family: var(--secondary-font) !important;
    color: var(--textHeading) !important;
    font-size: var(--textBodySmall) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.mainContainer .formContainer .formRow .formCol .formInput {
    font-family: var(--secondary-font) !important;
    color: var(--textHeading) !important;
    font-size: var(--textBodySmall) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    background-color: var(--surfaceBase) !important;
    border: 2px solid var(--borderColor) !important;
    border-radius: var(--radius-xl) !important;
    padding: 7px 20px !important;
    outline: none !important;
    width: 100% !important;
}

.mainContainer .formContainer .formRow .formCol .formInput:focus {
    border-color: var(--borderActiveColor) !important;
    background-color: #CDEAFF !important;
}

.mainContainer .formContainer .formRow .formCol .formInput:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.mainContainer .formContainer .formRow .formCol .inpuSubLabel {
    font-family: var(--secondary-font) !important;
    color: var(--textBody) !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 5px !important;
}

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

/* Hide number input spinner arrows */
.mainContainer .formContainer .formRow .formCol input[type="number"]::-webkit-inner-spin-button,
.mainContainer .formContainer .formRow .formCol input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.mainContainer .formContainer .formRow .formCol input[type="number"] {
    -moz-appearance: textfield !important;
}


/* ============================================
   CHECKOUT PAGE STYLING - HTML Developer's Design
   ============================================ */

/* EDD Checkout Form Container */
#edd_checkout_form_wrap .edd_cart_header_row,
#edd_checkout_form_wrap #edd_checkout_cart {
    width: 100% !important;
}

/* Apply formInput styling to all EDD input fields */
#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="tel"],
#edd_checkout_form_wrap input[type="number"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap select,
#edd_checkout_form_wrap textarea {
    font-family: var(--secondary-font) !important;
    color: var(--textHeading) !important;
    font-size: var(--textBodySmall) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    background-color: var(--surfaceBase) !important;
    border: 2px solid var(--borderColor) !important;
    border-radius: var(--radius-xl) !important;
    padding: 7px 20px !important;
    outline: none !important;
    width: 100% !important;
    display: block !important;
}

#edd_checkout_form_wrap input[type="text"]:focus,
#edd_checkout_form_wrap input[type="email"]:focus,
#edd_checkout_form_wrap input[type="tel"]:focus,
#edd_checkout_form_wrap select:focus,
#edd_checkout_form_wrap textarea:focus {
    border-color: var(--borderActiveColor) !important;
    background-color: #CDEAFF !important;
}

/* EDD fieldset styling */
#edd_checkout_form_wrap fieldset {
    background-color: var(--cardBg) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0px 6px 0px 0px var(--shadowColorDark) !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    border: none !important;
}

#edd_checkout_form_wrap fieldset legend {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--textLink) !important;
    font-family: var(--secondary-font) !important;
    margin-bottom: 30px !important;
    padding-top: 0 !important;
}

/* EDD label styling */
#edd_checkout_form_wrap label {
    font-family: var(--secondary-font) !important;
    color: var(--textHeading) !important;
    font-size: var(--textBodySmall) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* EDD form row spacing */
#edd_checkout_form_wrap p,
#edd_checkout_form_wrap .edd-input-group {
    margin-bottom: 20px !important;
}

/* Hide number input spinner arrows on checkout */
#edd_checkout_form_wrap input[type="number"]::-webkit-inner-spin-button,
#edd_checkout_form_wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#edd_checkout_form_wrap input[type="number"] {
    -moz-appearance: textfield !important;
}

/* EDD Submit button styling */
#edd_checkout_form_wrap #edd-purchase-button,
#edd_checkout_form_wrap .edd-submit {
    font-family: var(--secondary-font) !important;
    font-size: var(--textBodySmall) !important;
    font-weight: 700 !important;
    color: var(--textInverse) !important;
    border-radius: var(--radius-xl) !important;
    padding: 10px 25px !important;
    line-height: 1.1 !important;
    border: 2px solid var(--btnSecondary) !important;
    background-color: var(--btnSecondary) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color .4s !important;
    min-width: 150px !important;
}

#edd_checkout_form_wrap #edd-purchase-button:hover,
#edd_checkout_form_wrap .edd-submit:hover {
    color: var(--btnSecondary) !important;
    background-color: var(--surfaceBase) !important;
}

/* Order summary styling */
#edd_checkout_cart_form .edd_cart_header_row th {
    font-family: var(--secondary-font) !important;
    font-weight: 700 !important;
    font-size: var(--textBodyMedium) !important;
    color: var(--textHeading) !important;
}

#edd_checkout_cart_form .edd_cart_item td {
    font-family: var(--secondary-font) !important;
    font-size: var(--textBodySmall) !important;
    color: var(--textBody) !important;
    padding: 10px !important;
}

/* Checkout page banner */
/* .edd-is-checkout-page .profileBanner,
body.edd-checkout .profileBanner {
    background-image: url(images/profile-banner-mobile.png) !important;
} */

/* @media screen and (min-width: 768px) {
    .edd-is-checkout-page .profileBanner,
    body.edd-checkout .profileBanner {
        background-image: url(images/profile-banner.png) !important;
    }
} */

/*
 * Checkout page: map EDD's live checkout markup to the supplied checkout
 * design. These rules only affect the checkout page; EDD field names,
 * validation, gateway controls, and account options remain unchanged.
 */
/* .kmg-checkout-page .middleSection {
    padding-top: 48px;
} */

/* Checkout banner subtitle — Figma 255×64 */
body.kmg-checkout-page .profileBanner .bannerSubTitle {
    max-width: 388px;
}

.kmg-checkout-page #edd_checkout_form_wrap {
    max-width: 1140px;
    margin: 0 auto;
    font-family: var(--secondary-font);
    color: var(--textBody);
}

body.kmg-checkout-page #edd_checkout_form_wrap .edd-blocks__logged-in {
    display: none !important;
}

/* The static design places the live EDD order summary after checkout fields. */
.kmg-checkout-page #edd_checkout_wrap {
    display: flex;
    flex-direction: column;
}

.kmg-checkout-page #edd_checkout_form_wrap {
    order: 1;
}

.kmg-checkout-page #edd_checkout_cart_form {
    order: 2;
}

.kmg-checkout-page #edd_checkout_cart_form,
.kmg-checkout-page #edd_checkout_cart {
    width: 100%;
}

.kmg-checkout-page #edd_checkout_cart_form {
    background: var(--surfaceBase);
    border: 1px solid #e2e2e2;
    padding: 0 24px 24px;
    margin-bottom: 38px;
    background: var(--cardBg);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: 0 6px 0 var(--shadowColorDark);
}

.kmg-checkout-page #edd_checkout_cart_form::before {
    content: "Order Summary";
    display: block;
    padding: 28px 0 18px;
    color: var(--textLink);
    font-family: var(--secondary-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.kmg-checkout-page #edd_checkout_cart {
    border-collapse: collapse;
    margin: 0;
}

.kmg-checkout-page #edd_checkout_cart th,
.kmg-checkout-page #edd_checkout_cart td {
    border-color: #e8e8e8;
    padding: 22px 0;
    vertical-align: middle;
}

.kmg-checkout-page #edd_checkout_cart th {
    color: var(--textHeading);
    font-size: var(--textBodySmall);
    font-weight: 800;
}

.kmg-checkout-page #edd_checkout_cart td {
    font-size: var(--textBodySmall);
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_item_image {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 12px;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_remove_item_btn {
    color: var(--textBody);
    margin-left: 12px;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_footer_row td {
    padding-top: 26px;
    padding-bottom: 0;
    border-bottom: 0;
}

.kmg-checkout-page #edd_checkout_cart .edd_discount_link,
.kmg-checkout-page #edd-discount-code-wrap input[type="text"],
.kmg-checkout-page #edd-discount-code-wrap .edd-submit {
    font-family: var(--secondary-font);
    font-size: 13px;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_total,
.kmg-checkout-page #edd_checkout_cart .edd_cart_tax,
.kmg-checkout-page #edd_checkout_cart .edd_cart_amount {
    color: var(--textHeading);
    font-weight: 700;
}

/* Use the theme button treatment for EDD's discount controls. */
.kmg-checkout-page #edd_checkout_cart .edd_discount_link,
.kmg-checkout-page #edd_checkout_cart .edd-apply-discount,
.kmg-checkout-page #edd_checkout_cart_form .edd_discount_link,
.kmg-checkout-page #edd_checkout_cart_form .edd-apply-discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 25px;
    border: 2px solid var(--btnSecondary);
    border-radius: var(--radius-xl);
    background: var(--btnSecondary);
    color: var(--textInverse);
    font-family: var(--secondary-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
}

.kmg-checkout-page #edd_checkout_cart .edd_discount_link:hover,
.kmg-checkout-page #edd_checkout_cart .edd-apply-discount:hover,
.kmg-checkout-page #edd_checkout_cart_form .edd_discount_link:hover,
.kmg-checkout-page #edd_checkout_cart_form .edd-apply-discount:hover {
    border-color: var(--btnSecondaryActive);
    background: var(--btnSecondaryActive);
    color: var(--textInverse);
}

.kmg-checkout-page #edd_purchase_form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.kmg-checkout-page #edd_purchase_form > fieldset,
.kmg-checkout-page #edd_checkout_login_register > fieldset,
.kmg-checkout-page #edd_payment_mode_select_wrap > fieldset,
.kmg-checkout-page #edd_cc_address,
.kmg-checkout-page #edd_cc_fields {
    width: 100%;
    margin: 0;
    padding: 28px 26px;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--cardBg);
    box-shadow: 0 6px 0 var(--shadowColorDark);
}

.kmg-checkout-page #edd_checkout_login_register #edd_register_account_fields {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.kmg-checkout-page #edd_checkout_login_register {
    order: 1;
}

/*
 * Personal Info + Log in = one card (.kmg-checkout-personal-card).
 * Register stays a separate card (EDD sibling fieldset).
 */
.kmg-checkout-page .edd-blocks__checkout-user {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0 0 6px; /* clear bottom hard-shadow before next section */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    gap: 30px;
}

.kmg-checkout-page .edd-checkout-block__personal-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.kmg-checkout-page .kmg-checkout-personal-card {
    width: 100%;
    margin: 0;
    padding: 28px 26px;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--cardBg);
    box-shadow: 0 6px 0 var(--shadowColorLight);
    box-sizing: border-box;
}

.kmg-checkout-page .kmg-checkout-personal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
}

/* Nested fieldsets inside the personal card — no second chrome. */
.kmg-checkout-page .kmg-checkout-personal-card #edd_checkout_user_info,
.kmg-checkout-page .kmg-checkout-personal-card #edd_login_fields {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Register / Billing / Payment Method / Payment Info — same card as Personal Info. */
.kmg-checkout-page .kmg-checkout-register-card,
.kmg-checkout-page .edd-checkout-block__personal-info > fieldset.edd-blocks-form:not(#edd_checkout_user_info):not(#edd_login_fields),
.kmg-checkout-page #edd_cc_address,
.kmg-checkout-page #edd_payment_mode_select,
.kmg-checkout-page #edd_cc_fields {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 28px 26px !important;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    background: var(--cardBg) !important;
    box-shadow: 0 6px 0 var(--shadowColorLight) !important;
    box-sizing: border-box;
}

/* Wrappers only — cards live on the fieldsets above. */
.kmg-checkout-page #edd_payment_mode_select_wrap,
.kmg-checkout-page #edd_purchase_form_wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Keep fieldset legends inside the card padding box (browser default
 * paints them above the background when border is 0).
 */
.kmg-checkout-page .kmg-checkout-register-card > legend,
.kmg-checkout-page .edd-checkout-block__personal-info > fieldset.edd-blocks-form:not(#edd_checkout_user_info):not(#edd_login_fields) > legend,
.kmg-checkout-page #edd_cc_address > legend,
.kmg-checkout-page #edd_payment_mode_select > legend,
.kmg-checkout-page #edd_cc_fields > legend,
.kmg-checkout-page #edd_register_fields > legend:not(.kmg-checkout-legend-hidden) {
    float: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    color: var(--textLink) !important;
    font-family: var(--secondary-font) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.kmg-checkout-page .kmg-checkout-register-card::after,
.kmg-checkout-page .edd-checkout-block__personal-info > fieldset.edd-blocks-form:not(#edd_checkout_user_info):not(#edd_login_fields)::after,
.kmg-checkout-page #edd_cc_address::after,
.kmg-checkout-page #edd_payment_mode_select::after,
.kmg-checkout-page #edd_cc_fields::after {
    content: "";
    display: table;
    clear: both;
}

.kmg-checkout-page .kmg-checkout-personal-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--textLink);
    font-family: var(--secondary-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.kmg-checkout-page .kmg-checkout-personal-header .edd-blocks__checkout-forms,
.kmg-checkout-page .kmg-checkout-personal-header .edd-blocks__checkout-forms--inline {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 !important;
}

/* Keep native legend for a11y; visible title lives in .kmg-checkout-personal-header */
.kmg-checkout-page #edd_checkout_user_info > legend.kmg-checkout-legend-hidden,
.kmg-checkout-page #edd_login_fields > legend.kmg-checkout-legend-hidden,
.kmg-checkout-page #edd_register_fields > legend.kmg-checkout-legend-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Active tab button (e.g. guest) is redundant with the visible section. */
.kmg-checkout-page .edd-blocks__checkout-forms > button:disabled {
    display: none !important;
}

.kmg-checkout-page .edd-blocks__checkout-forms > button,
.kmg-checkout-page #edd_checkout_login_register .edd_checkout_register_login,
.kmg-checkout-page #edd_checkout_login_register input[name="edd_login_submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 8px 22px !important;
    border: 2px solid var(--btnSecondary) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
    font-family: var(--secondary-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
}

.kmg-checkout-page .edd-blocks__checkout-forms > button:hover,
.kmg-checkout-page #edd_checkout_login_register .edd_checkout_register_login:hover,
.kmg-checkout-page #edd_checkout_login_register input[name="edd_login_submit"]:hover {
    border-color: var(--btnSecondaryActive) !important;
    background: var(--btnSecondaryActive) !important;
    color: var(--textInverse) !important;
}


/* Only reorder purchase-form siblings — never #edd_checkout_user_info (nested). */
.kmg-checkout-page #edd_purchase_form > #edd_cc_address {
    order: 2;
}

.kmg-checkout-page #edd_payment_mode_select_wrap {
    order: 3;
}

.kmg-checkout-page #edd_cc_fields {
    order: 4;
}

.kmg-checkout-page #edd_purchase_form > #edd_purchase_submit,
.kmg-checkout-page #edd_purchase_form > #edd_purchase_form_bottom {
    order: 5;
}

.kmg-checkout-page #edd_checkout_user_info legend:not(.kmg-checkout-legend-hidden),
.kmg-checkout-page #edd_login_fields legend:not(.kmg-checkout-legend-hidden) {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 28px;
    color: var(--textLink);
    font-family: var(--secondary-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}


.kmg-checkout-page #edd_checkout_login_register p,
.kmg-checkout-page #edd_checkout_user_info p,
.kmg-checkout-page #edd_cc_address p,
.kmg-checkout-page #edd_cc_fields p,
.kmg-checkout-page #edd_register_account_fields p,
.kmg-checkout-page #edd_login_fields p {
    margin: 0 0 20px;
}

.kmg-checkout-page #edd_checkout_form_wrap label {
    display: block;
    margin: 0 0 9px;
    color: var(--textHeading);
    font-family: var(--secondary-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.kmg-checkout-page #edd_checkout_form_wrap .edd-description {
    display: none;
}

.kmg-checkout-page #edd_checkout_form_wrap input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
.kmg-checkout-page #edd_checkout_form_wrap select,
.kmg-checkout-page #edd_checkout_form_wrap textarea {
    min-height: 40px;
    width: 100%;
    padding: 9px 35px !important;
    border: 2px solid var(--borderColor) !important;
    border-radius: var(--radius-xl) !important;
    background: var(--surfaceBase) !important;
    color: var(--textHeading) !important;
    font-family: var(--secondary-font) !important;
    font-size: 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.kmg-checkout-page #edd_checkout_form_wrap input:focus,
.kmg-checkout-page #edd_checkout_form_wrap select:focus,
.kmg-checkout-page #edd_checkout_form_wrap textarea:focus {
    border-color: var(--borderActiveColor) !important;
    outline: 0;
}

.kmg-checkout-page #edd_payment_mode_select #edd-payment-mode-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.kmg-checkout-page #edd_payment_mode_select .edd-gateway-option {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid var(--textHeading);
    border-radius: 3px;
    color: var(--textHeading);
    cursor: pointer;
    text-align: center;
}

.kmg-checkout-page #edd_payment_mode_select .edd-gateway-option-selected {
    background: rgba(255,255,255,.45);
}

.kmg-checkout-page #edd_payment_mode_select .edd-gateway-option input {
    appearance: auto !important;
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 9px 0 0;
    accent-color: var(--btnSecondary);
}

.kmg-checkout-page #edd_purchase_form_wrap > #edd_cc_fields + #edd_purchase_submit,
.kmg-checkout-page #edd_purchase_form_wrap > #edd_purchase_submit {
    margin-top: 30px;
}

.kmg-checkout-page #edd_cc_fields .edd-card-number-wrap,
.kmg-checkout-page #edd_cc_fields .edd-card-name-wrap,
.kmg-checkout-page #edd_cc_fields .edd-card-exp-wrap,
.kmg-checkout-page #edd_cc_fields .edd-card-cvc-wrap {
    margin-bottom: 20px;
}

/* No card chrome around Purchase — button stands alone. */
.kmg-checkout-page #edd_purchase_submit {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.kmg-checkout-page #edd-purchase-button,
.kmg-checkout-page #edd_login_fields .edd-submit,
.kmg-checkout-page #edd_register_fields .edd-submit {
    display: flex !important;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 14px 28px !important;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    background: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
    font-family: var(--secondary-font) !important;
    font-size: 16px !important;
    font-weight: 700;
    box-shadow: 0 6px 0 var(--shadowColorLight);
}

@media screen and (max-width: 767px) {
    .kmg-checkout-page #edd_checkout_cart_form {
        padding: 0 14px 18px;
        overflow-x: auto;
    }

    .kmg-checkout-page .kmg-checkout-personal-header {
        flex-wrap: wrap;
        gap: 10px 12px;
        margin-bottom: 20px;
    }

    .kmg-checkout-page .kmg-checkout-personal-card,
    .kmg-checkout-page .kmg-checkout-register-card,
    .kmg-checkout-page .edd-checkout-block__personal-info > fieldset.edd-blocks-form:not(#edd_checkout_user_info):not(#edd_login_fields),
    .kmg-checkout-page #edd_cc_address,
    .kmg-checkout-page #edd_payment_mode_select,
    .kmg-checkout-page #edd_cc_fields {
        padding: 24px 18px !important;
    }

    .kmg-checkout-page .edd-blocks__checkout-user,
    .kmg-checkout-page .edd-checkout-block__personal-info {
        gap: 24px;
    }

    .kmg-checkout-page .kmg-checkout-register-card > legend,
    .kmg-checkout-page .edd-checkout-block__personal-info > fieldset.edd-blocks-form:not(#edd_checkout_user_info):not(#edd_login_fields) > legend,
    .kmg-checkout-page #edd_cc_address > legend,
    .kmg-checkout-page #edd_payment_mode_select > legend,
    .kmg-checkout-page #edd_cc_fields > legend {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .kmg-checkout-page .kmg-checkout-personal-title {
        font-size: 22px;
    }

    .kmg-checkout-page .edd-blocks__checkout-forms > button {
        height: 34px;
        min-height: 34px;
        padding: 7px 16px !important;
        font-size: 13px !important;
    }

    .kmg-checkout-page #edd_purchase_form > fieldset,
    .kmg-checkout-page #edd_checkout_login_register > fieldset,
    .kmg-checkout-page #edd_payment_mode_select_wrap > fieldset,
    .kmg-checkout-page #edd_cc_address,
    .kmg-checkout-page #edd_cc_fields {
        padding: 24px 18px;
        border-radius: 25px;
    }

    .kmg-checkout-page #edd_purchase_submit {
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .kmg-checkout-page #edd_payment_mode_select #edd-payment-mode-wrap {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .kmg-checkout-page #edd_payment_mode_select_wrap,
    .kmg-checkout-page #edd_purchase_form_wrap {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .kmg-checkout-page #edd_payment_mode_select .edd-gateway-option {
        justify-content: center;
        min-height: 48px;
        padding: 10px 12px !important;
        gap: 9px;
    }

    .kmg-checkout-page #edd_payment_mode_select .edd-gateway-option input {
        flex: 0 0 18px;
        margin: 0 !important;
    }
}


/* ============================================
   MENU SUBMENU DROPDOWN STYLING
   ============================================ */

/* Submenu container */
.headerNav .navList .menu-item-has-children {
    position: relative;
}

/* Submenu dropdown */
.headerNav .navList .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--surfaceBase);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 10px 0;
    margin: 5px 0 0 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

/* Show submenu on hover */
.headerNav .navList .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu items */
.headerNav .navList .sub-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.headerNav .navList .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--textBody);
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.headerNav .navList .sub-menu a:hover {
    background-color: var(--textLink);
    color: var(--textInverse);
}

/* Submenu arrow icon */
.headerNav .navList .submenu-arrow {
    margin-left: 5px;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.headerNav .navList .menu-item-has-children:hover .submenu-arrow {
    transform: rotate(180deg);
}

/* Mobile submenu styles */
@media screen and (max-width: 991px) {
    .headerNav .navList .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: transparent;
        padding-left: 20px;
        margin-top: 10px;
    }
    
    .headerNav .navList .sub-menu a {
        padding: 8px 15px;
        font-size: var(--textBodySmall);
    }
}


/* ============================================
   REVIEWS PAGE STYLING
   ============================================ */

/* Tabs wrapper */
.tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.tab-item {
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    font-weight: 700;
    color: var(--textBody);
    background-color: var(--surfaceBase);
    border: 2px solid var(--borderColor);
    border-radius: var(--radius-xl);
    padding: 10px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.tab-item:hover {
    border-color: var(--textLink);
    background-color: #E6F3FF;
}

.tab-item.active {
    background-color: var(--textLink);
    border-color: var(--textLink);
    color: var(--textInverse);
}

/* Tab content */
.tab-content {
    width: 100%;
}

.tab-content > .content {
    display: none;
}

.tab-content > .content.active {
    display: block;
}
.tab-content h3.h3Title,
.tab-content h2.h3Title {
    height: auto;
    min-height: 0;
    line-height: 1.15;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
    .tab-content h3.h3Title,
    .tab-content h2.h3Title {
        display: block;
        margin-bottom: 16px;
        font-size: clamp(22px, 6vw, 28px);
    }

    .user-review {
        padding: 16px;
    }

    .userBlock {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
    }

    .userBlock .user-img {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .userBlock .user-name {
        font-size: 15px;
        line-height: 1.3;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .user-review .userTitle {
        font-size: 15px;
        margin: 6px 0 10px;
    }

    .user-review .review-content {
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
/* User testimonials */
.user-review {
    padding: 25px;
}

.userBlock {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.userBlock .user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.userBlock .user-name {
    font-family: var(--secondary-font);
    font-size: var(--textBodyMedium);
    font-weight: 700;
    color: var(--textHeading);
    margin: 0 0 5px 0;
}

.userBlock .user-tag {
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    color: var(--textBody);
    margin: 0;
}

.user-review .userTitle {
    font-family: var(--secondary-font);
    font-size: var(--textBodyMedium);
    font-weight: 700;
    color: var(--textHighLight);
    margin: 0 0 15px 0;
}

.user-review .review-content {
    font-family: var(--base-font);
    font-size: var(--textBodySmall);
    color: var(--textBody);
    line-height: 1.6;
}


.user-review .review-content p {
    margin: 0 0 15px 0;
}

.user-review .review-content p:last-child {
    margin-bottom: 0;
}

.user-review .review-content ol,
.user-review .review-content ul {
    margin: 15px 0;
    padding-left: 25px;
}

.user-review .review-content li {
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    .tab-item {
        font-size: var(--textBodyMedium);
        padding: 12px 30px;
    }
    
    .userBlock .user-img {
        width: 60px;
        height: 60px;
    }
}


/* ============================================
   TEAMS PAGE STYLING
   ============================================ */

/* Section spacing */
.section-spacing {
    margin-bottom: 30px;
}

/* Team Game Cards Container */
.teamGameCard {
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: space-between;
    padding: 30px 10px;
    margin-bottom: 35px;
}

@media screen and (min-width: 768px) {
    .teamGameCard {
        flex-direction: row;
        padding: 30px;
    }
}

/* Game Card Item */
.teamGameCard .gameCardItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.teamGameCard .gameCardItem ul,
.teamGameCard .gameCardItem ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.teamGameCard .cardHeader {
    margin-bottom: 15px;
}

.teamGameCard .cardHeader .gameTitle {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--textHeading);
    margin-bottom: var(--space-xs);
}

.teamGameCard .cardHeader .gameName {
    font-size: var(--textHeadingSmall);
    line-height: 1.1;
    font-weight: 700;
    color: var(--textHeading);
    margin-bottom: 15px;
}

.teamGameCard .cardHeader .gameSubTitle {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--textBodyLarge);
}

/* Game Image Box with Background */
.teamGameCard .gameImgBox {
    background-image: url(images/game-img-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 300px;
    height: 350px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto 20px;
    padding-bottom: 5px;
}

.teamGameCard .gameImgBox img {
    max-width: 100%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media screen and (min-width: 768px) {
    .teamGameCard .gameImgBox {
        width: 240px;
        height: 280px;
    }
}

@media screen and (min-width: 992px) {
    .teamGameCard .gameImgBox {
        width: 280px;
        height: 330px;
    }
   
}

@media screen and (min-width: 1200px) {
    .teamGameCard .gameImgBox {
        width: 330px;
        height: 390px;
    }
}

/* Game Content Section */
.teamGameCard .gameContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.teamGameCard .gameContent .subTitle,
.teamGameCard .gameContent .paraTitle {
    font-size: var(--textBodyLarge);
    font-family: var(--base-font);
    font-weight: 600;
}

.teamGameCard .gameContent .subTitle {
    color: var(--textHeading);
}

.teamGameCard .gameContent .paraTitle {
    color: var(--textLink);
    margin-bottom: 0;
}

.teamGameCard .gameContent p:not(.subTitle):not(.paraTitle),
.teamGameCard .gameContent li {
    font-family: var(--secondary-font);
    font-size: var(--textBodyMedium);
    font-weight: 600;
    color: var(--textHeading);
    margin-bottom: 5px;
}

/* Clients List — awards logos (Figma ~90px height, natural widths; mobile: fit viewport) */

.clientsList.mt-0 {
    margin-top: 0;
    border-top: 2px solid var(--borderColor);
    padding-top: 40px;
}

.clientsList {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

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

.clientsList .clientImg,
.clientImg {
    display: block;
    width: auto;
    height: auto;
    max-height: 90px;
    max-width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .clientsList {
        gap: 16px 12px;
        justify-content: center;
        align-items: center;
        padding-inline: 4px;
        overflow: hidden;
    }

    .clientsList .clientItem {
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
    }

    /* Wide banners (e.g. Computing With Kids 462px) shrink to the row width */
    .clientsList .clientImg,
    .clientImg {
        height: auto;
        max-height: 56px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

/* ============================================
   SINGLE DOWNLOAD (GAME DETAILS) PAGE
   ============================================ */

/* Game Preview Top Container */
.gamePreview .gamePreviewTop {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative; /* For absolute positioned heroStars */
}

/* Hero Stars image - position at top right */
.gamePreview .heroStars {
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
    transform: none !important;
    width: 100px !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .gamePreview .heroStars {
        width: 70px !important;
        right: 5px !important;
        top: 5px !important;
    }
}

@media screen and (min-width: 768px) {
    .gamePreview .gamePreviewTop {
        flex-direction: row;
        gap: 40px;
    }
}

/* Increase left column width for better layout */
.gamePreview .gamePreviewTop .leftCol {
    flex: 1;
    order: 2;
    min-width: 100%;
}

@media screen and (min-width: 768px) {
    .gamePreview .gamePreviewTop .leftCol {
        min-width: 500px;
        order: 1;
    }
}

@media screen and (min-width: 1200px) {
    .gamePreview .gamePreviewTop .leftCol {
        min-width: 575px;
    }
}

/* Head Box Container - Welcome section with proper gradient */
.gamePreview .headBoxContainer {
    padding: 30px 20px;
    background: linear-gradient(90deg, #FFFFFF 0%, #E4F3FF 49.52%, #FFFFFF 100%);
    border-radius: var(--radius-lg);
    position: relative;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .gamePreview .headBoxContainer {
        padding: 40px 30px;
        text-align: left;
    }
}

/* Ensure WordPress content wraps properly */
.gamePreview .entry-content {
    margin: 0;
}

/* .gamePreview .entry-content p {
    margin-bottom: 15px;
} */

.gamePreview .entry-content strong {
    font-weight: 700;
    color: #5B5B5B;
    font-family: var(--secondary-font);
}

/* Game Overview Buttons Container - CSS Grid Layout */
.gamePreview .gameOverview {
    background-color: var(--cardBg);
    border-radius: var(--radius-lg);
    padding: 24px 16px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 30px;
    margin-bottom: 25px;
}

/* Always pin Tell a Friend to the last button row (full width), even when Preview is present */
.gamePreview .gameOverview .kmg-tell-friend-trigger {
    grid-column: 1 / -1;
    order: 20;
    width: 100%;
    white-space: normal;
}

.gamePreview .gameOverview .appBtns {
    grid-column: 1 / -1;
    order: 30;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
    margin: 0;
}

.gamePreview .gameOverview .storeBadge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    margin: 0;
    line-height: 0;
    text-decoration: none;
}

.gamePreview .gameOverview .storeBadge img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46px;
    object-fit: contain;
}

@media screen and (min-width: 768px) {
    .gamePreview .gameOverview {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gamePreview .gameOverview .kmg-tell-friend-trigger {
        grid-column: 1 / -1;
    }

    .gamePreview .gameOverview .appBtns {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* .gamePreview .gameOverview .priceTag {
    grid-column: 1 / -1;
    font-size: 48px;
    color: var(--textLink);
    text-align: center;
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1.1;
} */

/* @media screen and (min-width: 768px) {
    .gamePreview .gameOverview .priceTag {
        text-align: left;
    }
} */

.gamePreview .gameOverview .btn {
    width: 100%;
    text-align: center;
    min-height: 42px;
}

/*
 * Center Testimonials (half column) only when it sits alone:
 * - Alice: no Preview
 * - Nutcracker: has Preview, no Buy in overview (not Magic Flute)
 * Magic Flute (.theme-feathers): always keep normal grid so Preview | Testimonials pair
 * (including purchased state with Download Game instead of Buy).
 */
@media screen and (min-width: 768px) {
    .gamePreview .gameOverview:not(:has(.kmg-preview-game-trigger)) > .btn.btn-secondary.kmg-testimonials-btn,
    .gamePreview:not(.theme-feathers) .gameOverview:not(:has(.btn.btn-primary)):has(.kmg-preview-game-trigger) > .btn.btn-secondary.kmg-testimonials-btn {
        grid-column: 1 / -1;
        justify-self: center;
        margin-inline: auto;
        box-sizing: border-box;
        width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }
}

@media screen and (min-width: 992px) {
    .gamePreview .gameOverview:not(:has(.kmg-preview-game-trigger)) > .btn.btn-secondary.kmg-testimonials-btn,
    .gamePreview:not(.theme-feathers) .gameOverview:not(:has(.btn.btn-primary)):has(.kmg-preview-game-trigger) > .btn.btn-secondary.kmg-testimonials-btn {
        width: calc((100% - 18px) / 2) !important;
        max-width: calc((100% - 18px) / 2) !important;
    }
}

.gamePreview .gameOverview form {
    width: 100%;
    margin: 0;
    display: contents;
}

/* Buy Now Button - Match HTML Developer Design (Pink button) */
.gamePreview .gameOverview .btn.btn-primary,
.gamePreview .gameOverview button.btn-primary,
.gamePreview .gameOverview .edd-submit.btn-primary,
.gamePreview .gameOverview form .edd-submit {
    background-color: var(--btnPrimary);
    border: 2px solid var(--btnPrimary);
    border-radius: var(--radius-xl);
    color: var(--textInverse);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: var(--textButtonMedium);
    padding: 5px 20px;
    line-height: 1.1;
    transition: background-color .4s;
}

.gamePreview .gameOverview .btn.btn-primary:hover,
.gamePreview .gameOverview button.btn-primary:hover,
.gamePreview .gameOverview .edd-submit.btn-primary:hover,
.gamePreview .gameOverview form .edd-submit:hover {
    background-color: var(--surfaceBase);
    border: 2px solid var(--btnPrimary);
    color: var(--btnPrimary);
}

/* Secondary Buttons (Blue) */
.gamePreview .gameOverview .btn.btn-secondary {
    background-color: var(--btnSecondary);
    border: 2px solid var(--btnSecondary);
    border-radius: var(--radius-xl);
    color: var(--textInverse);
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: var(--textButtonMedium);
    padding: 5px 20px;
    line-height: 1.1;
    transition: background-color .4s;
}

.gamePreview .gameOverview .btn.btn-secondary:hover {
    background-color: var(--surfaceBase);
    border: 2px solid var(--btnSecondary);
    color: var(--btnSecondary);
}

.gamePreview .gameOverview .edd-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Right Column - Image Section */
.gamePreview .gamePreviewTop .rightCol {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    order: 1;
    position: relative;
}

@media screen and (min-width: 768px) {
    .gamePreview .gamePreviewTop .rightCol {
        order: 2;
    }
}


/* Remove all other overrides - let styles.css + media.css handle everything */

/* Single Download Page - WordPress adjustments to work with HTML developer's CSS */

/* Hero Stars image - position at top CENTER above title (as per Figma design) */
.gamePreview .heroStars {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: -6px !important;
    transform: translateX(-50%) !important;
    width: 70px !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

@media (max-width: 768px) {
    .gamePreview .heroStars {
        width: 60px !important;
        top: -5px !important;
    }
}

/* Cover quote sits in normal document flow (Figma gap under the card). */
.gamePreview .gamePreviewTop .rightCol.positionRelative {
    position: relative !important;
    min-height: 0;
}

.gamePreview .gamePreviewTop .sectionCol {
    position: relative;
    bottom: auto !important;
    top: auto !important;
    margin-top: 20px;
    width: 100%;
    max-width: min(308px, 100%);
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
}

/* Testimonial text color (black as per design, not blue) */
.gamePreview .gamePreviewTop .testimonialTitle {
    color: var(--textHeading) !important;
    margin-top: 0;
    max-width: 100%;
}

.gamePreview .gamePreviewTop .testimonialAuthor {
    color: var(--textHeading) !important;
}

.gamePreview .sectionCol p {
    font-family: var(--secondary-font);
    font-size: var(--textBodyMedium);
    font-weight: 600;
    color: var(--textHeading);
    margin: 0;
}

/*
 * Single Download hero — match the supplied game-preview.html composition.
 * WordPress includes .gameImgBg for legacy content, but the supplied design
 * uses this artwork once as the right-column background, behind the cover.
 */
@media screen and (min-width: 992px) {
    .gamePreview .gamePreviewTop {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 32px;
        padding-top: 24px;
        margin-bottom: 72px;
    }

    /* Magic Flute — Figma: 42px from header to feather tip */
    .gamePreview.theme-feathers .gamePreviewTop {
        padding-top: 42px;
    }

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

    .gamePreview .headBoxContainer {
        padding: 20px 0 20px;
        background: transparent;
        border-radius: 0;
        text-align: left;
    }

    .gamePreview .gamePreviewTop .rightCol.positionRelative {
        order: 2;
        flex: 0 0 474px;
        width: 474px;
        max-width: 474px;
        min-height: 0;
        /* Room for blob above cover (Figma 562 blob / 432 cover ≈ 65px above) */
        padding-top: 65px;
        margin-left: 0;
        gap: 0;
        overflow: visible;
    }

    .gamePreview .gamePreviewTop .rightCol.positionRelative::before {
        content: '';
        position: absolute;
        /* Blob starts at top of column so it sits above the cover */
        top: 0;
        left: 50%;
        z-index: 0;
        width: 474px;
        height: 562px;
        max-width: none;
        transform: translateX(-50%);
        background: url(images/game-img-bg.png) center / contain no-repeat;
        pointer-events: none;
    }

    .gamePreview .gamePreviewTop .gameImgBox {
        z-index: 1;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
    }

    .gamePreview .gamePreviewTop .gameImgBox .gameImgBg {
        display: none;
    }

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

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

    .gamePreview .gamePreviewTop .sectionCol {
        position: relative;
        z-index: 1;
        bottom: auto !important;
        width: 100%;
        max-width: 100%;
        margin-top: 24px;
        text-align: center;
    }

    .gamePreview.theme-feathers .gamePreviewTop .sectionCol {
        width: 308px;
        max-width: 308px;
        margin-left: auto;
        margin-right: auto;
    }

    .gamePreview .gamePreviewTop .testimonialTitle {
        margin: 0;
        /* white-space: nowrap; */
    }

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

@media screen and (min-width: 1200px) {
    .gamePreview .gamePreviewTop {
        gap: 40px;
    }

    .gamePreview .gamePreviewTop .rightCol.positionRelative {
        flex-basis: 474px;
        width: 474px;
        max-width: 474px;
    }

    .gamePreview.theme-feathers .gamePreviewTop .rightCol.positionRelative {
        padding-top: 76px;
    }

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

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        max-width: 90% !important;
    }

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

@media screen and (min-width: 1440px) {
    .gamePreview .gamePreviewTop .rightCol.positionRelative {
        flex-basis: 474px;
        width: 474px;
        max-width: 474px;
    }

    .gamePreview.theme-feathers .gamePreviewTop {
        padding-top: 42px;
    }

    .gamePreview.theme-feathers .gamePreviewTop .rightCol.positionRelative {
        padding-top: 65px;
    }

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

    .gamePreview .gamePreviewTop .gameImgBox .coverImg {
        width: 305px;
        max-width: none !important;
    }

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

/* Magic Flute video trigger + modal (feather styles live in styles.css / media.css) */
.gamePreview.theme-feathers .gameImgBox,
.gamePreview.theme-feathers .nutcrackerGames .gameItemsRow .gameImgCol {
    position: relative;
    overflow: visible;
}

.gamePreview.theme-feathers .kmg-game-video-trigger {
    cursor: pointer;
}

.gamePreview.theme-feathers .kmg-game-video-trigger:focus-visible {
    outline: 3px solid var(--btnSecondary);
    outline-offset: 8px;
}

.kmg-game-video-modal .modal-content {
    width: min(750px, 90%);
    padding: 30px;
    background-color: #011d62;
}

.kmg-game-video-modal.show .modal-content {
    transform: scale(1);
}

.kmg-game-video-modal .videoPlayer {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #011d62;
    border-radius: 20px;
}

.kmg-game-video-modal .videoPlayer iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media screen and (max-width: 767px) {
    .kmg-game-video-modal .modal-content {
        width: min(750px, 94%);
        padding: 18px;
    }
}
/* Magic Flute welcome popup — scoped to #kmg-flute-welcome-modal (does not affect other .modal) */
#kmg-flute-welcome-modal.kmg-flute-welcome-modal {
    z-index: 10010;
    background: rgba(22, 30, 39, 0.55);
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    justify-content: center;
}

#kmg-flute-welcome-modal .kmg-flute-welcome-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(676px, 100%);
    max-width: 100%;
    max-height: min(calc(100vh - 32px), calc(100dvh - 32px));
    margin: auto;
    padding: 40px 30px;
    border-radius: 30px;
    background: #EFF8FF;
    box-shadow: 0 6px 0 0 #B9E4FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

#kmg-flute-welcome-modal .kmg-flute-welcome-avatar {
    width: clamp(120px, 28vw, 220px);
    height: clamp(120px, 28vw, 220px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    margin-bottom: clamp(12px, 2.5vw, 20px);
}

/* Beat global .modal h2 — Poor Richard */
#kmg-flute-welcome-modal h2.kmg-flute-welcome-title,
#kmg-flute-welcome-modal .kmg-flute-welcome-title {
    margin: 0 0 2px;
    font-family: var(--secondary-font);
    font-size: clamp(22px, 4.5vw, 32px);
    line-height: 1.1;
    color: #3B2F4A;
    font-weight: 800;
    min-height: 0;
    max-width: 100%;
}

/* Beat global .modal p */
#kmg-flute-welcome-modal p.kmg-flute-welcome-text,
#kmg-flute-welcome-modal .kmg-flute-welcome-text {
    margin: 0 0 clamp(12px, 2.5vw, 20px);
    font-family: var(--secondary-font);
    font-size: clamp(14px, 2.4vw, 20px);
    font-weight: 500;
    line-height: 160%;
    color: #676767;
    max-width: 100%;
}

#kmg-flute-welcome-modal .kmg-flute-welcome-feathers {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 16px);
    margin: 0 0 clamp(12px, 2.5vw, 20px);
    max-width: 100%;
}

#kmg-flute-welcome-modal .kmg-flute-welcome-feather {
    width: auto;
    height: clamp(52px, 12vw, 100px);
    max-width: min(70px, 18vw);
    object-fit: contain;
    display: block;
}

#kmg-flute-welcome-modal .kmg-flute-welcome-close {
    min-width: min(220px, 100%);
    width: min(218px, 100%);
    max-width: 100%;
    height: 50px;
    font-weight: 700;
    line-height: 106%;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    #kmg-flute-welcome-modal.kmg-flute-welcome-modal {
        padding: 12px;
        align-items: center;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-dialog {
        width: 100%;
        padding: 24px 20px;
        border-radius: 24px;
        max-height: min(calc(100vh - 24px), calc(100dvh - 24px));
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-avatar {
        width: 100px;
        height: 100px;
        margin-bottom: 14px;
    }

    #kmg-flute-welcome-modal h2.kmg-flute-welcome-title,
    #kmg-flute-welcome-modal .kmg-flute-welcome-title {
        font-size: 24px;
    }

    #kmg-flute-welcome-modal p.kmg-flute-welcome-text,
    #kmg-flute-welcome-modal .kmg-flute-welcome-text {
        font-size: 15px;
        margin-bottom: 14px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-feathers {
        gap: 14px;
        margin-bottom: 14px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-feather {
        height: 56px;
        max-width: 48px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-close {
        width: 100%;
        min-width: 0;
    }
}

/* Short viewports (landscape phones / small height): keep the dialog inside the screen */
@media screen and (max-height: 700px) {
    #kmg-flute-welcome-modal .kmg-flute-welcome-dialog {
        padding: 20px 18px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-avatar {
        width: 96px;
        height: 96px;
        margin-bottom: 10px;
    }

    #kmg-flute-welcome-modal h2.kmg-flute-welcome-title,
    #kmg-flute-welcome-modal .kmg-flute-welcome-title {
        font-size: 22px;
    }

    #kmg-flute-welcome-modal p.kmg-flute-welcome-text,
    #kmg-flute-welcome-modal .kmg-flute-welcome-text {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-feathers {
        margin-bottom: 10px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-feather {
        height: 44px;
        max-width: 40px;
    }

    #kmg-flute-welcome-modal .kmg-flute-welcome-close {
        height: 46px;
    }
}

/* Game Items Images - Fix sizing */
.gamePreview .nutcrackerGames .gameItemsRow .gameImgCol {
    position: relative;
    max-width: 100%;
}

/* .gamePreview .nutcrackerGames .gameItemsRow .gameImgCol img:not(.starImg) {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
} */

/* Related Games Thumbnails */
.downloadGames .gamesItemRow .gamesItem img {
    width: 100%;
    height: auto;
    display: block;
}

/* Feature Item Lists spacing */
.gamesFeatures .featureItemList h4 {
    margin-bottom: 8px;
}

.gamesFeatures .featureItemList p {
    margin: 0 0 5px 0;
}

/* Awards and Skills Lists */
.listingItems ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.listingItems ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.listingItems .checkIcon {
    color: var(--textLink);
    flex-shrink: 0;
    margin-top: 3px;
}
.gamePreview .listingItems ul li img.starIcon {
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
    display: block;
}

/* Game Items Row Text Formatting */
.nutcrackerGames .gameTextCol p strong {
    font-weight: 700;
    color: #5B5B5B;
    font-family: var(--secondary-font);
}

/* Shop page - Learn More button styling */
/* Hide buttons by default */
.gameCards .gameCardItem .gameOverview {
    display: grid !important;
    opacity: 0 !important;
    gap: 15px !important;
    grid-template-columns: repeat(1, 1fr) !important;
    margin-inline: auto;
}

/* Show buttons ONLY on hover of the specific card */
.gameCards .gameCardItem:hover .gameOverview {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.gameCards .gameCardItem .gameOverview .btn-secondary,
.gameCards .gameCardItem .gameOverview .btn-primary,
.gameCards .gameCardItem .gameOverview form {
    visibility: visible !important;
}

/* Learn More button hover effect - white background, blue text */
.gameCards .gameCardItem .gameOverview .btn-secondary:hover {
    background-color: var(--surfaceBase) !important;
    color: var(--textLink) !important;
    border-color: var(--textLink) !important;
}

/* Ensure proper containment within card */
.gameCards .gameCardItem {
    overflow: hidden !important;
}


/* Front page - keep Click Me overlaid on the awards area so hover
   cannot change the card height. */
.kmg-home-products .gameCards .gameCardItem .gameOverview {
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    padding: 0 !important;
    bottom: auto !important;
    grid-row: 3 !important;
    grid-column: 1 !important;
    align-self: start !important;
    align-content: start !important;
    justify-self: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.kmg-home-products .gameCards .gameCardItem:hover .gameOverview {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    bottom: auto !important;
}

/* Price is not used on homepage hover; collapse that Figma gap. */
.kmg-home-products .gameCards .gameCardItem .gameOverview .priceTag {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.kmg-home-products .gameCards .gameCardItem:hover .cardBody,
.kmg-home-products .gameCards .gameCardItem:hover .cardContent {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.kmg-home-products .gameCards .gameCardItem .gameOverview .btn-primary:hover {
    background-color: var(--surfaceBase) !important;
    color: var(--textLink) !important;
    border-color: var(--textLink) !important;
}

/* Homepage Click Me only — matches HTML/index.html's .btn-secondary state. */
.kmg-home-products .gameCards .gameCardItem .gameOverview .kmg-home-click-me {
    background-color: var(--btnSecondary) !important;
    border-color: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
}

.kmg-home-products .gameCards .gameCardItem .gameOverview .kmg-home-click-me:hover,
.kmg-home-products .gameCards .gameCardItem .gameOverview .kmg-home-click-me:focus-visible {
    background-color: var(--btnSecondaryActive) !important;
    border-color: var(--btnSecondaryActive) !important;
    color: var(--textInverse) !important;
}

/* Profile login/register password visibility controls. */
.loginRegisterPage .kmg-password-field .formInput,
.lostPasswordSection .kmg-password-field .formInput,
.changePasswordPage .kmg-password-field .formInput {
    padding-right: 52px !important;
}

@media screen and (max-width: 767px) {
    #kmg-register-form .kmg-password-field .formInput {
        padding-right: 64px !important;
    }
}

.loginRegisterPage .kmg-password-toggle,
.lostPasswordSection .kmg-password-toggle,
.changePasswordPage .kmg-password-toggle {
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--textBody);
    font-size: 20px;
    cursor: pointer;
}

.loginRegisterPage .kmg-password-toggle i,
.lostPasswordSection .kmg-password-toggle i,
.changePasswordPage .kmg-password-toggle i {
    font-size: 20px;
}

.loginRegisterPage .kmg-password-toggle:hover,
.loginRegisterPage .kmg-password-toggle:focus-visible,
.lostPasswordSection .kmg-password-toggle:hover,
.lostPasswordSection .kmg-password-toggle:focus-visible,
.changePasswordPage .kmg-password-toggle:hover,
.changePasswordPage .kmg-password-toggle:focus-visible {
    color: var(--textLink);
}

.loginRegisterPage .kmg-password-toggle:focus-visible,
.lostPasswordSection .kmg-password-toggle:focus-visible,
.changePasswordPage .kmg-password-toggle:focus-visible {
    outline: 2px solid var(--textLink);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Keep the Linux license-download link in the markup but do not show it on the confirmation page. */
.licenseDownloads .kmg-linux-download {
    display: none;
}

/* Reviews archive only: place each Review Source below the review logo. */
.reviewsPage .reviewQuoteRow {
    display: grid;
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 2px;
}

.reviewsPage .reviewQuoteRow > div {
    display: contents;
}

.reviewsPage .reviewQuoteRow > div > p:first-child {
    grid-column: 2;
}

.reviewsPage .reviewQuoteRow .reviewSource {
    grid-column: 1 / -1;
    margin-top: 2px;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .reviewsPage .reviewQuoteRow {
        grid-template-columns: minmax(60px, 72px) minmax(0, 1fr);
        column-gap: 10px;
    }
}


/* ============================================
   REVIEWS PAGE STYLING - TEMPORARY
   ============================================
   NOTE: This CSS is TEMPORARY placeholder styling.
   When HTML developer provides the Reviews CSS, 
   COMMENT OUT this entire section and use their CSS instead.
   ============================================ */

/* Reviews Banner */
.kmg-reviews-banner {
    background-image: url(images/profile-banner-mobile.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: bottom center !important;
}

@media screen and (min-width: 768px) {
    .kmg-reviews-banner {
        background-image: url(images/profile-banner.png) !important;
    }
}

/* Archive Page - Games Grid */
.kmg-reviews-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .kmg-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .kmg-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Game Card on Archive */
.kmg-review-game-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 25px;
}

.kmg-review-game-image {
    margin-bottom: 20px;
}

.kmg-review-game-image img {
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-md);
}

.kmg-review-game-title {
    font-size: var(--textHeadingSmall);
    color: var(--textHeading);
    margin-bottom: 20px;
    font-weight: 700;
}

/* Review Snippets on Archive */
.kmg-review-snippets {
    margin-bottom: 20px;
    text-align: left;
}

.kmg-review-snippet {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borderColor);
}

.kmg-review-snippet:last-child {
    border-bottom: none;
}

.kmg-review-quote {
    font-size: var(--textBodySmall);
    color: var(--textBody);
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.6;
}

.kmg-review-source-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kmg-review-logo {
    flex-shrink: 0;
}

.kmg-review-logo img {
    max-width: 50px;
    max-height: 30px;
    height: auto;
}

.kmg-review-source {
    font-size: var(--textBodySmall);
    color: var(--textBody);
    margin: 0;
}

/* Read Full Review Button on Archive */
.kmg-review-button-wrap {
    text-align: center;
    margin-top: auto;
    padding-top: 20px;
}

.kmg-review-read-btn {
    min-width: 180px;
}

/* ============================================
   SINGLE GAME REVIEWS PAGE - SIMPLE LIST
   ============================================ */

.kmg-game-reviews-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Simple Review Item - NO cardBox */
.kmg-review-item-simple {
    background-color: var(--surfaceBase);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--textLink);
}

.kmg-review-simple-logo {
    text-align: center;
    margin-bottom: 20px;
}

.kmg-review-simple-logo img {
    max-width: 100px;
    max-height: 60px;
    height: auto;
}

.kmg-review-simple-quote {
    margin-bottom: 15px;
}

.kmg-review-simple-quote p {
    font-size: var(--textBodyMedium);
    color: var(--textBody);
    font-style: italic;
    line-height: 1.8;
    margin: 0;
}

.kmg-review-simple-source {
    text-align: left;
}

.kmg-review-simple-source p {
    font-size: var(--textBodyMedium);
    color: var(--textHeading);
    margin: 0 0 15px 0;
}

.kmg-review-simple-source p strong {
    font-weight: 700;
}

/* Long Review Link on Simple List */
.kmg-long-review-link {
    border-left-color: var(--btnSecondary);
}

.kmg-long-review-link .kmg-read-full-btn {
    margin-top: 15px;
    display: inline-block;
}

/* Back to Reviews Button */
.kmg-back-to-reviews {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--borderColor);
}

/* No Reviews Message */
.kmg-no-reviews-simple {
    text-align: center;
    padding: 40px 20px;
    color: var(--textBody);
}

/* ============================================
   SINGLE LONG REVIEW ARTICLE PAGE
   ============================================ */

.kmg-long-review-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.kmg-long-review-logo {
    text-align: center;
    margin-bottom: 30px;
}

.kmg-long-review-logo img {
    max-width: 150px;
    height: auto;
}

.kmg-long-review-source-title {
    text-align: center;
    margin-bottom: 30px;
}

.kmg-long-review-source-title h2 {
    font-size: 32px;
    color: var(--textHeading);
    font-weight: 700;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .kmg-long-review-source-title h2 {
        font-size: 40px;
    }
}

.kmg-long-review-content {
    margin-bottom: 40px;
}

.kmg-long-review-content p {
    font-size: var(--textBodyMedium);
    color: var(--textBody);
    line-height: 1.8;
    margin-bottom: 20px;
}

.kmg-long-review-content h2,
.kmg-long-review-content h3 {
    color: var(--textHeading);
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}

.kmg-long-review-content ul,
.kmg-long-review-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.kmg-long-review-content li {
    margin-bottom: 10px;
}

.kmg-long-review-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding-top: 30px;
    border-top: 2px solid var(--borderColor);
}

.kmg-long-review-navigation .btn {
    min-width: 150px;
}

/* ============================================
   END OF TEMPORARY REVIEWS STYLING
   When HTML developer provides CSS, comment out
   everything between the two === lines above
   ============================================ */


/* ============================================
   LONG REVIEW CONTENT FORMATTING
   ============================================ */
.kmg-long-review-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.kmg-long-review-logo {
    text-align: center;
    margin-bottom: 30px;
}

.kmg-long-review-logo img {
    max-width: 200px;
    height: auto;
}

/* WordPress Editor Content Formatting */
.kmg-long-review-content.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.kmg-long-review-content.entry-content h1,
.kmg-long-review-content.entry-content h2,
.kmg-long-review-content.entry-content h3,
.kmg-long-review-content.entry-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #222;
    line-height: 1.4;
}

.kmg-long-review-content.entry-content h1 {
    font-size: 28px;
}

.kmg-long-review-content.entry-content h2 {
    font-size: 24px;
}

.kmg-long-review-content.entry-content h3 {
    font-size: 20px;
}

.kmg-long-review-content.entry-content h4 {
    font-size: 18px;
}

.kmg-long-review-content.entry-content p {
    margin-bottom: 20px;
}

.kmg-long-review-content.entry-content ul,
.kmg-long-review-content.entry-content ol {
    margin: 20px 0;
    padding-left: 40px;
}

.kmg-long-review-content.entry-content li {
    margin-bottom: 10px;
}

.kmg-long-review-content.entry-content strong {
    font-weight: bold;
}

.kmg-long-review-content.entry-content em {
    font-style: italic;
}

.kmg-long-review-content.entry-content blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    border-left: 4px solid #0088cc;
    background: #f5f5f5;
    font-style: italic;
}

/* Review Source Plain - NO STYLING */
.kmg-long-review-source-plain {
    margin: 30px 0;
}

/* Excerpt text with tighter line spacing */
.kmg-excerpt-text {
    line-height: 1.4;
    font-style: italic;
}

.kmg-excerpt-text br {
    content: "";
    display: block;
    margin-top: 0;
}

/* Navigation Buttons */
.kmg-long-review-navigation {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}


/* ============================================
   REVIEWS PAGINATION STYLING
   ============================================ */

.kmg-reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 40px 0 30px;
    flex-wrap: wrap;
}

.kmg-reviews-pagination a {
    font-family: var(--secondary-font);
    font-size: var(--textBodySmall);
    font-weight: 600;
    color: var(--textBody);
    background-color: var(--surfaceBase);
    border: 2px solid var(--borderColor);
    border-radius: var(--radius-md);
    padding: 8px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.kmg-reviews-pagination a:hover {
    border-color: var(--textLink);
    background-color: #E6F3FF;
    color: var(--textLink);
}

.kmg-reviews-pagination a.active {
    background-color: var(--textLink);
    border-color: var(--textLink);
    color: var(--textInverse);
    pointer-events: none;
}

.kmg-reviews-pagination .kmg-pagination-numbers {
    display: flex;
    gap: 5px;
}

.kmg-reviews-pagination .kmg-pagination-prev,
.kmg-reviews-pagination .kmg-pagination-next {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .kmg-reviews-pagination a {
        font-size: var(--textBodyMedium);
        padding: 10px 18px;
        min-width: 45px;
    }
    
    .kmg-reviews-pagination {
        gap: 12px;
    }
    
    .kmg-reviews-pagination .kmg-pagination-numbers {
        gap: 8px;
    }
}


/* ============================================
   SINGLE REVIEW PAGE STYLING (Game Reviews List)
   ============================================ */

/* Review layout with logo on left, content on right */
.kmg-review-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Content starts at same level as logo top */
}

/* Review logo on left side */
.kmg-review-logo-left {
    flex-shrink: 0;
    width: 120px;
}

.kmg-review-logo-left img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* Review source below logo on left side */
.kmg-review-source-left {
    margin-top: 10px;
}

.kmg-review-source-left p {
    margin: 0;
    font-size: var(--textBodySmall);
    line-height: 1.4;
    text-align: left;
}

.kmg-review-source-left p strong {
    font-weight: 700;
}

/* Review content on right side */
.kmg-review-content-right {
    flex: 1;
}

/* Long review full content styling */
.kmg-long-review-full-content {
    margin-bottom: 0;
}

.kmg-long-review-full-content p {
    margin-bottom: 15px;
}

.kmg-long-review-full-content h1,
.kmg-long-review-full-content h2,
.kmg-long-review-full-content h3,
.kmg-long-review-full-content h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.kmg-long-review-full-content ul,
.kmg-long-review-full-content ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

.kmg-long-review-full-content li {
    margin-bottom: 8px;
}

/* Review logo centered (old style - keeping for backward compatibility) */
.kmg-review-logo-center {
    text-align: center;
    margin-bottom: 20px;
}

.kmg-review-logo-center img {
    max-width: 200px;
    height: auto;
    display: inline-block;
}

/* Review source footer (old style - not used in current layout) */
.kmg-review-source-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #E8F4FF;
}

.kmg-review-source-footer p {
    margin-bottom: 15px;
    text-align: left;
}

.kmg-review-source-footer p strong {
    font-weight: 700;
}

.kmg-review-source-footer .kmg-read-full-btn {
    display: inline-block;
    text-align: center;
}

/* Back to reviews button - smaller size */
.kmg-back-to-reviews {
    text-align: center;
    margin-top: 40px;
}

.kmg-back-to-reviews .btn {
    min-width: auto;
    padding: 12px 25px;
    font-size: var(--textBodySmall);
    display: inline-block;
}

/* Fix button hover state */
.kmg-back-to-reviews .btn.btn-primary {
    background-color: var(--btnPrimary);
    border: 2px solid var(--btnPrimary);
    color: var(--textInverse);
}

.kmg-back-to-reviews .btn.btn-primary:hover {
    background-color: var(--surfaceBase);
    border: 2px solid var(--btnPrimary);
    color: var(--btnPrimary);
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
    .kmg-review-layout {
        flex-direction: column;
        gap: 15px;
    }
    
    .kmg-review-logo-left {
        width: 100%;
        text-align: center;
    }
    
    .kmg-review-logo-left img {
        max-width: 150px;
        margin: 0 auto 15px;
    }
    
    .kmg-review-source-left {
        text-align: center;
    }
}

/* NEW LAYOUT - Logo top left, content wraps around, source at bottom */
.kmg-review-layout-vertical {
    display: block;
    overflow: visible;
}

.kmg-review-layout-vertical::after {
    content: "";
    display: table;
    clear: both;
}

.kmg-review-logo-top-left {
    float: left;
    margin: 0 16px 8px 0;
    max-width: 120px;
}

.kmg-review-logo-top-left img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Keep paragraphs in the same flow as the floated logo so leftover
   copy continues at full width below the image, as in Figma. */
.kmg-review-layout-vertical .review-content {
    display: contents;
}

.kmg-review-source-bottom-left {
    clear: both;
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.kmg-review-source-bottom-left p {
    margin: 0;
    font-size: var(--textBodySmall);
    line-height: 1.4;
    text-align: left;
}

.kmg-review-source-bottom-left p strong {
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    .kmg-review-logo-top-left {
        float: none;
        margin: 0 auto 15px;
        text-align: center;
    }
    
    .kmg-review-source-bottom-left {
        text-align: center;
    }
}


/* Front page image text below thumbnail */
.kmg-front-page-image-text {
    padding: 10px 15px;
    text-align: center;
    font-style: italic;
}

.kmg-front-page-image-text p {
    margin: 0;
    font-size: var(--textBodySmall);
    line-height: 1.4;
    color: var(--textBody);
}


/* ============================================
   BUNDLE PRODUCT DISPLAY ON SHOP PAGE
   ============================================
   NOTE: This CSS is TEMPORARY placeholder styling.
   When HTML developer provides the Shop page CSS for bundles, 
   COMMENT OUT this entire section and use their CSS instead.
   ============================================ */

/* Bundle images container - side by side display */
.kmg-bundle-images-link {
    display: block;
    text-decoration: none;
}

.kmg-bundle-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background-color: var(--surfaceBase);
    border-radius: var(--radius-md);
}

.kmg-bundle-image-item {
    flex: 1;
    max-width: 50%;
}

.kmg-bundle-image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

/* Responsive adjustments for bundle images */
@media screen and (max-width: 767px) {
    .kmg-bundle-images {
        gap: 8px;
        padding: 10px;
    }
}

@media screen and (min-width: 768px) {
    .kmg-bundle-images {
        gap: 15px;
        padding: 20px;
    }
}

/* ============================================
   END OF TEMPORARY BUNDLE PRODUCT STYLING
   ============================================ */


/* ============================================
   FRONT PAGE NEW DESIGN UPDATES FROM HTML DEVELOPER
   ============================================
   NOTE: Removing custom overrides - letting HTML developer's 
   styles.css and media.css handle all styling
   ============================================ */

/* Remove conflicting hero banner styles - let styles.css handle it */

/* ============================================
   MUSIC PUZZLES BRAIN PAGE - Minimal WordPress adjustments only
   ============================================ */

/* Let HTML developer's styles.css handle puzzle banner styling */

/* ============================================
   END OF FRONT PAGE NEW DESIGN UPDATES
   ============================================ */


/* ============================================
   FRONT PAGE RESPONSIVE - Let HTML developer's media.css handle it
   ============================================ */

/* Removed all responsive overrides - HTML developer's media.css handles everything */


/* ============================================
   FEATURED GAMES SECTION - Let HTML developer handle all styling
   ============================================ */

/* Removed all game card overrides - HTML developer's styles.css handles everything */


/* ============================================
   HERO BANNER TITLE - Let HTML developer's CSS handle it
   ============================================ */

/* Removed h1/h2 title overrides - HTML developer's styles.css + media.css handle all sizing */


/* ============================================
   CARD CONTENT - TESTIMONIAL & AWARDS STYLING
   Keep only these as they're WordPress-specific content
   ============================================ */

/* Card Body wrapper - let HTML developer's CSS handle most styling */
.gameCards .gameCardItem .cardBody {
    position: relative;
    flex: 1;
}

.gameCards .gameCardItem .cardContent .testimonialAuthor {
    display: block;
}

.kmg-home-products .gameCardMagicFlute .cardContent .testimonialAuthor {
    display: inline;
}

/* ============================================
   END CARD CONTENT STYLING
   ============================================ */


/* ============================================
   ADDITIONAL HERO BANNER FIXES - Minimal adjustments only
   ============================================ */

/* Only keep WordPress-specific fixes that don't conflict */


/* ============================================
   MUSIC PUZZLES BRAIN PAGE - Einstein Quote Fix
   ============================================ */

/* Ensure Einstein quote text is blue, not inheriting from articleCard */
.einsteinQuote blockquote,
.einsteinQuote blockquote p {
    color: #0265F5 !important; /* Blue color - var(--surfaceInverse) */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 12px;
}

.einsteinQuote figcaption {
    color: #0265F5 !important; /* Blue color - var(--surfaceInverse) */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
}

/* Shop archive — content + Buy stay visible; layout lives in styles.css */
.post-type-archive-download .gameCards .gameCardItem .cardContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.post-type-archive-download .gameCards .gameCardItem:hover .cardContent,
.post-type-archive-download .gameCards .gameCardItem:hover .cardBody {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Shop hover — same dark card treatment on desktop and mobile */
.post-type-archive-download .gameCards .gameCardItem:hover,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active {
    background-color: #1A1A1A !important;
    box-shadow: 0px 6px 0px 0px var(--shadowColorDark) !important;
    z-index: 1;
}

.post-type-archive-download .gameCards .gameCardItem:hover .cardHeader h3,
.post-type-archive-download .gameCards .gameCardItem:hover .cardSubTitle,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardHeader h3,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardSubTitle {
    color: var(--textInverse) !important;
}

.post-type-archive-download .gameCards .gameCardItem:hover h3 strong,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active h3 strong {
    color: var(--btnSecondary) !important;
}

.post-type-archive-download .gameCards .gameCardItem:hover .cardContent,
.post-type-archive-download .gameCards .gameCardItem:hover .cardContent p,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardContent,
.post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardContent p {
    color: var(--textInverse) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.post-type-archive-download .gameCards .gameCardItem .gameOverview {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.post-type-archive-download .gameCards .gameCardItem .storeBadges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0;
}

.post-type-archive-download .gameCards .gameCardItem .storeBadge {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.post-type-archive-download .gameCards .gameCardItem .storeBadge img {
    display: block;
    width: 120px;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.post-type-archive-download .gameCards .gameCardItem .gameOverview .kmg-inline-form {
    margin: 0 !important;
}

.post-type-archive-download .gameCards .gameCardItem:hover .gameOverview {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


.post-type-archive-download .gameBundle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 587px;
    height: 214px;
    margin: 40px auto 30px;
    padding: 22px 28px;
    border: 1px solid var(--textWarning);
    border-radius: 16px;
    background-color: #fff9d8;
}

/* Cart thumbnails support any number of images in a bundle. */
.orderInformation .cartImages {
    display: grid;
    grid-template-columns: minmax(0, 100px);
    align-content: start;
    gap: 8px;
    flex: 0 0 100px;
    min-width: 0;
}

.orderInformation .cartImages--bundle {
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    flex-basis: 220px;
    max-width: 220px;
}

.orderInformation .cartImages .cartImg {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
}

.post-type-archive-download .bundleGames {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    min-width: 0;
}

.post-type-archive-download .bundleCover {
    display: block;
    width: 110px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(59, 47, 74, .12);
}

.post-type-archive-download .bundlePlus {
    flex-shrink: 0;
    color: var(--textBlack);
    font-family: var(--secondary-font);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.post-type-archive-download .bundleOffer {
    display: flex;
    flex: 0 0 208px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 180px;
}

/* Keep the offer visible while allowing larger bundles to scroll their
   image strip instead of changing the card dimensions. */
.post-type-archive-download .gameBundle.bundle-has-many .bundleGames {
    flex: 1 1 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.post-type-archive-download .gameBundle.bundle-has-many .bundleCover {
    flex: 0 0 110px;
}

.post-type-archive-download .bundleOffBadge {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    place-items: center;
}

.post-type-archive-download .bundleOffShape {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.post-type-archive-download .bundleOffText {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--textInverse);
    font-family: var(--secondary-font);
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.post-type-archive-download .bundleOffText strong,
.post-type-archive-download .bundleOffText em {
    font-size: 20px;
    font-style: normal;
}

.post-type-archive-download .bundleOffText strong {
    font-weight: 800;
}

.post-type-archive-download .bundleOffText em {
    margin-top: 2px;
    font-weight: 700;
}

.post-type-archive-download .bundleOffer .kmg-inline-form {
    display: block !important;
    width: 100% !important;
    max-width: 208px;
}

.post-type-archive-download .bundleBuyBtn {
    width: 100%;
    min-height: 44px;
    padding: 10px 28px;
    font-size: 18px;
    white-space: nowrap;
}

.post-type-archive-download .bundlePrice {
    margin: 0;
    color: var(--btnSecondary);
    font-family: var(--secondary-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.post-type-archive-download .bundleRegularPrice {
    margin: -6px 0 0;
    color: var(--textBody);
    font-family: var(--secondary-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.post-type-archive-download .bundleRegularPrice del {
    text-decoration-thickness: 1px;
}

.post-type-archive-download .bundleCouponMessage {
    max-width: 220px;
    margin: -4px 0 0;
    color: var(--textHeading);
    font-family: var(--secondary-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.post-type-archive-download .gameBundle.bundle-has-coupon {
    height: auto;
    min-height: 250px;
}

@media screen and (min-width: 768px) {
    .post-type-archive-download .gameBundle {
        margin-top: 50px;
    }
}

@media screen and (max-width: 600px) {
    .post-type-archive-download .gameBundle {
        flex-direction: column;
        height: auto;
        min-height: 360px;
        padding: 20px 16px;
    }

    .post-type-archive-download .gameBundle.bundle-has-many .bundleGames {
        width: 100%;
        flex: 0 0 160px;
    }

    .post-type-archive-download .bundleCover {
        width: 96px;
        height: 140px;
    }

    .post-type-archive-download .bundlePrice {
        white-space: normal;
    }

    .post-type-archive-download .bundleRegularPrice {
        white-space: normal;
    }

    .orderInformation .cartItem {
        align-items: flex-start;
        gap: 12px;
    }

    .orderInformation .cartImages--bundle {
        flex-basis: min(42vw, 180px);
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    }
}

@media screen and (min-width: 601px) {
    .post-type-archive-download .gameBundle.bundle-has-many {
        max-width: 587px;
    }
}

@media screen and (max-width: 767px) {
    .post-type-archive-download .gameCards .gameCardItem .gameOverview {
        display: flex !important;
    }
}

/* ============================================
   END EINSTEIN QUOTE FIX
   ============================================ */

/* Order confirmation, details, and history — supplied order-page design.
   Kept here at the end of the cascade so the EDD data templates retain their
   behaviour while the shared site styles cannot turn the blue cards white. */
.mainContainer:has(.orderConfirm),
.mainContainer:has(.orderHistory) {
    min-height: 620px;
}

.profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
.profileBanner.settingsBanner + .middleSection:has(.orderHistory) {
    margin-top: 0;
    padding: 68px 0 88px;
    overflow: visible;
}

.orderConfirm.cardBox,
.orderHistoryCard.cardBox {
    box-sizing: border-box;
    background-color: #e4f3ff !important;
    border: 0;
    border-radius: 28px !important;
    box-shadow: 0 6px 0 #aee0ff !important;
}

.orderConfirm.cardBox {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 32px 44px 36px;
}

.orderConfirmLead {
    margin: 0 0 24px;
    color: var(--textBody);
    font-family: var(--secondary-font);
    font-size: var(--textBodyMedium);
}

.orderConfirm .h3Title,
.orderDetails .h3Title {
    margin: 0 0 16px;
    color: var(--textHeading);
}

.orderConfirmProduct {
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid #aee0ff;
}

.orderConfirmTable {
    margin: 0 0 20px;
}

.orderConfirmTable tr,
.orderConfirmTable tr:nth-child(odd) {
    background: transparent;
}

.orderConfirmTable th,
.orderConfirmTable td {
    padding: 12px 8px;
    border-bottom: 1px solid #aee0ff;
}

.orderConfirmTable td {
    text-align: right;
}

.orderConfirmTable tbody tr:last-child th,
.orderConfirmTable tbody tr:last-child td {
    color: var(--btnSecondary);
    font-family: var(--base-font);
    font-size: var(--textBodyMedium);
    font-weight: 800;
}

.orderConfirmLink {
    margin: 8px 20px 0 0;
    color: var(--textLink);
    font-family: var(--base-font);
    font-size: var(--textBodyMedium);
    font-weight: 800;
}

.orderDetailsTable thead th {
    border-bottom: 1px solid #aee0ff;
    background: transparent;
}

.orderDetailsTable tbody tr:last-child th,
.orderDetailsTable tbody tr:last-child td {
    color: var(--btnSecondary);
}

.orderHistory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 1260px);
    margin: 0 auto;
}

.orderHistoryCard.cardBox {
    min-height: 224px;
    padding: 26px 24px;
}

.orderHistoryTop {
    padding-bottom: 12px;
    border-bottom: 1px solid #aee0ff;
}

.orderHistoryMeta {
    margin-top: 16px;
}

.orderHistoryDetails {
    margin: 22px auto 0;
}

.orderHistoryKey {
    margin: 20px 0 0;
    padding: 12px 16px;
    background: #fff;
    border-radius: 14px;
}

.edd-license-keys {
    margin: 28px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.edd-license-keys > h3 {
    color: var(--textHeading) !important;
    font-family: var(--base-font);
    font-size: var(--textBodyLarge);
}

@media screen and (max-width: 767px) {
    .profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
    .profileBanner.settingsBanner + .middleSection:has(.orderHistory) {
        padding: 42px 0 58px;
    }

    .orderConfirm.cardBox,
    .orderHistoryCard.cardBox {
        border-radius: 20px !important;
    }

    .orderConfirm.cardBox {
        padding: 24px 18px 28px;
    }

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

    .orderHistoryCard.cardBox {
        min-height: 0;
        padding: 22px 18px;
    }

    .orderConfirmTable th,
    .orderConfirmTable td {
        padding: 10px 4px;
    }
}

/* Login/register — retain the supplied HTML layout while keeping the
   WordPress form handlers. The card is fluid beside the 470px illustration;
   it must not be restricted to the old 510px profile-form width. */
.mainContainer.loginRegisterPage .loginRegisterInformation {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 25px !important;
}

.mainContainer.loginRegisterPage .loginRegisterCard {
    box-sizing: border-box;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 40px !important;
    background: var(--cardBg) !important;
}

.mainContainer.loginRegisterPage .loginRegisterSidebar {
    flex: 0 0 470px !important;
    align-self: flex-end !important;
}

/* Match the supplied desktop form scale. These are intentionally limited to
   the Profile login/register panels, so EDD and other WordPress forms retain
   their own styles. */
.mainContainer.loginRegisterPage .authPanel .formContainer .inputLabel,
.mainContainer.loginRegisterPage .authPanel .formContainer label {
    font-size: var(--textBodyLarge) !important;
}

.mainContainer.loginRegisterPage .authPanel .formContainer input[type="text"],
.mainContainer.loginRegisterPage .authPanel .formContainer input[type="email"],
.mainContainer.loginRegisterPage .authPanel .formContainer input[type="password"] {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 2px solid var(--borderColor) !important;
    border-radius: var(--radius-xl) !important;
    background-color: var(--surfaceBase) !important;
    font-size: var(--textBodyMedium) !important;
}

.mainContainer.loginRegisterPage .authPanel .formContainer .input-wrapper input,
.mainContainer.loginRegisterPage #kmg-login-form .login-username input,
.mainContainer.loginRegisterPage #kmg-login-form .login-password input {
    padding-left: 52px !important;
}

/* Branded account-settings action cards retain the supplied HTML layout when
 * the log-out control is rendered as an accessible button. */
.mainContainer .accountSetting .kmg-logout-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* The profile template keeps its shared userInformation wrapper for the edit
 * and password forms. Its settings menu is the sole child here, so it must
 * occupy the same full container width as the supplied HTML design. */
.mainContainer .userInformation > .accountSetting {
    flex: 0 0 100%;
    width: 100%;
}

.mainContainer .accountSetting .card:focus-visible {
    outline: 3px solid var(--textLink);
    outline-offset: 4px;
}

.mainContainer.loginRegisterPage .lostPasswordCard {
    min-height: 0;
}

.mainContainer.loginRegisterPage .lostPasswordTitle {
    margin: 0 0 10px;
    color: var(--textHeading);
}

.mainContainer.loginRegisterPage .lostPasswordIntro {
    margin: 0 0 22px;
    color: var(--textBody);
    font-size: var(--textBodySmall);
    line-height: 1.5;
}

.mainContainer.loginRegisterPage .kmg-lost-password-form input[type="text"],
.mainContainer.loginRegisterPage .kmg-reset-password-form input[type="password"] {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 20px 7px 64px !important;
    border: 2px solid var(--borderColor) !important;
    border-radius: var(--radius-xl) !important;
    background-color: var(--surfaceBase) !important;
    font-size: var(--textBodySmall) !important;
}

/* This needs to beat the site's generic .formInput padding rule. */
.mainContainer.loginRegisterPage .formContainer.kmg-lost-password-form .formRow .formCol .input-wrapper.icon-left .formInput,
.mainContainer.loginRegisterPage .formContainer.kmg-reset-password-form .formRow .formCol .input-wrapper.icon-left .formInput {
    padding-left: 64px !important;
}

.mainContainer.loginRegisterPage .kmg-lost-password-form .btnRow .btn,
.mainContainer.loginRegisterPage .kmg-reset-password-form .btnRow .btn {
    min-height: 0 !important;
    padding: 10px 24px !important;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    background-color: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
    font-size: var(--textBodySmall) !important;
}

.mainContainer.loginRegisterPage .kmg-lost-password-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: var(--textBodySmall);
    line-height: 1.4;
}

.mainContainer.loginRegisterPage .kmg-lost-password-notice-success {
    background: #d8f5dc;
    color: #155724;
}

.mainContainer.loginRegisterPage .kmg-lost-password-notice-error {
    background: #fbe0e2;
    color: #8b1e2b;
}

/* Logged-in account settings and change-password pages. These rules mirror
 * the supplied account-setting.html and change-password.html breakpoints,
 * without changing the login/register or EDD confirmation banners. */
.mainContainer.changePasswordPage #kmg-password-form .formRow .formCol .input-wrapper.icon-left .formInput {
    padding-left: 52px !important;
}

@media screen and (max-width: 767px) {
    /* The shared profile layout right-aligns its narrow card on mobile. Limit
     * this full-width alignment correction to the Change Password form. */
    .mainContainer.changePasswordPage .middleSection .userInformation {
        align-items: stretch;
        width: 100%;
    }

    .mainContainer.changePasswordPage .middleSection .userInformation > .cardBox {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    /* .mainContainer.accountSettingsPage .profileBanner.settingsBanner,
    .mainContainer.changePasswordPage .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: cover !important;
        height: 240px !important;
        min-height: 240px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 40px 0 0 !important;
    } */

    /* .mainContainer.accountSettingsPage .profileBanner.settingsBanner + .middleSection,
    .mainContainer.changePasswordPage .profileBanner.settingsBanner + .middleSection {
        position: relative;
        z-index: 1;
        margin-top: -80px;
    } */

    .mainContainer.changePasswordPage .userInformation {
        align-items: flex-end;
        gap: 25px;
    }

    .mainContainer.changePasswordPage .userInformation .cardBox {
        padding: 40px;
    }

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

    .mainContainer.changePasswordPage #kmg-password-form .formRow .formCol {
        gap: 12px !important;
    }

    .mainContainer.changePasswordPage #kmg-password-form .inputLabel {
        font-size: var(--textBodyLarge) !important;
    }

    .mainContainer.changePasswordPage #kmg-password-form .formInput {
        font-size: var(--textBodyMedium) !important;
        padding: 12px 20px !important;
    }

    .mainContainer.changePasswordPage #kmg-password-form .input-wrapper.icon-left .formInput {
        padding-left: 52px !important;
    }

    .mainContainer.changePasswordPage #kmg-password-form .passwordHint {
        gap: 35px;
        padding: 20px 15px;
        margin-top: 0;
        background-color: var(--surfaceMedium);
        border-radius: var(--radius-lg);
    }

    .mainContainer.changePasswordPage #kmg-password-form .passwordHint .passwordTitle {
        font-size: var(--textBodyMedium);
    }

    .mainContainer.changePasswordPage #kmg-password-form .btnRow {
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (min-width: 992px) {
    /* .mainContainer.accountSettingsPage .profileBanner.settingsBanner,
    .mainContainer.changePasswordPage .profileBanner.settingsBanner {
        height: 268px !important;
        min-height: 268px !important;
        padding-top: 48px !important;
    } */

    /* .mainContainer.accountSettingsPage .profileBanner.settingsBanner + .middleSection,
    .mainContainer.changePasswordPage .profileBanner.settingsBanner + .middleSection {
        margin-top: -88px;
    } */

    .mainContainer.changePasswordPage .userInformation {
        flex-direction: row;
    }

    .mainContainer.changePasswordPage .userInformation .cardBox {
        width: auto;
    }
}

.mainContainer.loginRegisterPage .lostPasswordBack {
    margin: 18px 0 0;
    text-align: center;
    font-size: var(--textBodySmall);
}

.mainContainer.loginRegisterPage .lostPasswordBack a {
    color: var(--btnSecondary);
}

.mainContainer.loginRegisterPage .kmg-register-password-rules {
    margin: 0 !important;
    padding: 14px !important;
    border-radius: var(--radius-lg);
    background: #cdeaff;
    color: var(--textHeading);
    font-family: var(--secondary-font);
}

.mainContainer.loginRegisterPage .kmg-register-password-rules strong {
    display: block;
    margin-bottom: 8px;
    font-size: var(--textBodySmall);
}

.mainContainer.loginRegisterPage .kmg-register-password-rules ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainContainer.loginRegisterPage .kmg-register-password-rules li {
    display: flex;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.2;
}

.mainContainer.loginRegisterPage .kmg-register-password-rules li::before {
    content: "✓";
    color: #0ceb00;
    font-weight: 700;
}

@media screen and (max-width: 991px) {
    .mainContainer.loginRegisterPage .loginRegisterInformation {
        display: flex !important;
    }

    .mainContainer.loginRegisterPage .loginRegisterCard {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
        min-height: 0;
        margin: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .mainContainer.loginRegisterPage .loginRegisterCard {
        flex-basis: auto !important;
        padding: 30px 20px !important;
    }
}

/* The login/register banner uses the supplied 1920 × 304 artwork at its
   intended responsive height, rather than the site's generic 360px banner. */
/* @media screen and (min-width: 768px) {
    .mainContainer.loginRegisterPage .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-position: top center !important;
        background-size: cover !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: none;
        padding: 40px 0 0 !important;
    }
} */

/* @media screen and (min-width: 1200px) {
    .mainContainer.loginRegisterPage .profileBanner.settingsBanner {
        height: 268px !important;
        min-height: 268px !important;
        padding-top: 48px !important;
    }
} */

/* @media screen and (min-width: 1440px) {
    .mainContainer.loginRegisterPage .profileBanner.settingsBanner {
        background-size: 100% auto !important;
        height: calc(100vw * 304 / 1920) !important;
        min-height: 0 !important;
        max-height: 304px;
        padding-top: 56px !important;
    }
} */


/* Mobile game cards: homepage keeps tap-to-reveal Click Me; shop keeps
   description + Buy always visible. */
@media screen and (max-width: 767px) {
    .kmg-home-products .gameCards .gameCardItem .gameOverview {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .post-type-archive-download .gameCards .gameCardItem .gameOverview {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .kmg-home-products .gameCards .gameCardItem,
    .post-type-archive-download .gameCards .gameCardItem {
        min-height: 0 !important;
        padding-bottom: 12px;
        background-color: var(--cardBg) !important;
        box-shadow: 0 6px 0 var(--shadowColorLight) !important;
    }

    .kmg-home-products .gameCards .gameCardItem h3,
    .post-type-archive-download .gameCards .gameCardItem h3,
    .kmg-home-products .gameCards .gameCardItem .cardSubTitle,
    .post-type-archive-download .gameCards .gameCardItem .cardSubTitle {
        color: var(--textHeading) !important;
    }

    .kmg-home-products .gameCards .gameCardItem .cardContent,
    .post-type-archive-download .gameCards .gameCardItem .cardContent {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .kmg-home-products .gameCards .gameCardItem:hover,
    .kmg-home-products .gameCards .gameCardItem.kmg-mobile-card-active,
    .post-type-archive-download .gameCards .gameCardItem:hover,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active {
        min-height: 0 !important;
        padding-bottom: 12px;
        background-color: #1a1a1a !important;
        box-shadow: 0 6px 0 var(--shadowColorDark) !important;
        z-index: 1 !important;
    }

    .kmg-home-products .gameCards .gameCardItem:hover h3,
    .kmg-home-products .gameCards .gameCardItem:hover .cardSubTitle,
    .kmg-home-products .gameCards .gameCardItem.kmg-mobile-card-active h3,
    .kmg-home-products .gameCards .gameCardItem.kmg-mobile-card-active .cardSubTitle,
    .post-type-archive-download .gameCards .gameCardItem:hover h3,
    .post-type-archive-download .gameCards .gameCardItem:hover .cardSubTitle,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active h3,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardSubTitle {
        color: var(--textInverse) !important;
    }

    .post-type-archive-download .gameCards .gameCardItem:hover h3 strong,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active h3 strong {
        color: var(--btnSecondary) !important;
    }

    .post-type-archive-download .gameCards .gameCardItem:hover .cardContent,
    .post-type-archive-download .gameCards .gameCardItem:hover .cardContent p,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardContent,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardContent p {
        color: var(--textInverse) !important;
    }

    /* Homepage: tap/hover still swaps to Click Me */
    .kmg-home-products .gameCards .gameCardItem:hover .cardContent,
    .kmg-home-products .gameCards .gameCardItem.kmg-mobile-card-active .cardContent {
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .kmg-home-products .gameCards .gameCardItem:hover .gameOverview,
    .kmg-home-products .gameCards .gameCardItem.kmg-mobile-card-active .gameOverview {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Shop: keep description + Buy on hover/tap */
    .post-type-archive-download .gameCards .gameCardItem:hover .cardContent,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .cardContent {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .post-type-archive-download .gameCards .gameCardItem:hover .gameOverview,
    .post-type-archive-download .gameCards .gameCardItem.kmg-mobile-card-active .gameOverview {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Order History banner — the supplied design uses the profile-banner artwork
 * at its intrinsic responsive height, not the site's generic 360px banner. */
/* @media screen and (min-width: 768px) {
    body.edd-purchase-history .mainContainer .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: cover !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 40px 0 0 !important;
    }
} */

/* @media screen and (min-width: 992px) {
    body.edd-purchase-history .mainContainer .profileBanner.settingsBanner {
        height: 268px !important;
        min-height: 268px !important;
        padding-top: 48px !important;
    }
} */

/* @media screen and (min-width: 1440px) {
    body.edd-purchase-history .mainContainer .profileBanner.settingsBanner {
        background-size: 100% auto !important;
        height: calc(100vw * 304 / 1920) !important;
        min-height: 0 !important;
        max-height: 304px !important;
        padding-top: 56px !important;
    }
} */

/* Cart banner — scoped to the custom cart-route main element so the generic
 * 768px profile-banner rule cannot mask the developer's 1440px layout. */
/* @media screen and (min-width: 768px) {
    .mainContainer.kmg-cart-page .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: cover !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 40px 0 0 !important;
    }
} */

/* @media screen and (min-width: 992px) {
    .mainContainer.kmg-cart-page .profileBanner.settingsBanner {
        height: 268px !important;
        min-height: 268px !important;
        padding-top: 48px !important;
    }
} */

/* @media screen and (min-width: 1440px) {
    .mainContainer.kmg-cart-page .profileBanner.settingsBanner {
        background-size: 100% auto !important;
        height: calc(100vw * 304 / 1920) !important;
        min-height: 0 !important;
        max-height: 304px !important;
        padding-top: 56px !important;
    }
} */

/* Edit Profile banner and form — limited to the editable account view. */
@media screen and (min-width: 768px) {
    /* .mainContainer.editProfilePage .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: cover !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 40px 0 0 !important;
    } */

    /* .mainContainer.editProfilePage .profileBanner.settingsBanner + .middleSection {
        position: relative;
        z-index: 1;
        margin-top: -80px;
    } */

    .mainContainer.editProfilePage .userInformation {
        align-items: flex-end;
        gap: 25px;
    }

    .mainContainer.editProfilePage .userInformation .cardBox {
        padding: 40px;
    }

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

    .mainContainer.editProfilePage .formContainer .formRow .formCol {
        gap: 12px !important;
    }

    .mainContainer.editProfilePage .formContainer .inputLabel {
        font-size: var(--textBodyLarge) !important;
    }

    .mainContainer.editProfilePage .formContainer .formInput {
        font-size: var(--textBodyMedium) !important;
        padding: 12px 20px !important;
    }
}

/* @media screen and (min-width: 992px) {
    .mainContainer.editProfilePage .profileBanner.settingsBanner {
        height: 268px !important;
        min-height: 268px !important;
        padding-top: 48px !important;
    }

    .mainContainer.editProfilePage .profileBanner.settingsBanner + .middleSection {
        margin-top: -88px;
    }

    .mainContainer.editProfilePage .userInformation {
        flex-direction: row;
    }

    .mainContainer.editProfilePage .userInformation .cardBox {
        width: auto;
    }
} */

/* @media screen and (min-width: 1440px) {
    .mainContainer.editProfilePage .profileBanner.settingsBanner {
        background-size: 100% auto !important;
        height: calc(100vw * 304 / 1920) !important;
        min-height: 0 !important;
        max-height: 304px !important;
        padding-top: 56px !important;
    }

    .mainContainer.editProfilePage .profileBanner.settingsBanner + .middleSection {
        margin-top: max(-70px, calc(100vw * -70 / 1920));
    }
} */

/* The profile form mirrors edit-profile.html: 24px labels and 52px controls.
 * This does not alter the disabled Username field's behaviour. */
@media screen and (max-width: 767px) {
    /* The shared profile layout right-aligns its form card on mobile. Keep the
     * editable profile form within the page container without affecting the
     * account settings, password, or desktop layouts. */
    .mainContainer.editProfilePage .middleSection .userInformation {
        align-items: stretch;
        width: 100%;
    }

    .mainContainer.editProfilePage .middleSection .userInformation > .cardBox {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .kmg-edit-profile-form .formRow .formCol {
        gap: 12px !important;
    }

    .kmg-edit-profile-form .inputLabel {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    .kmg-edit-profile-form .formInput {
        box-sizing: border-box !important;
        min-height: 52px !important;
        padding: 12px 20px !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .kmg-edit-profile-form .formInput:disabled {
        opacity: 1 !important;
        background-color: var(--surfaceBase) !important;
        color: var(--textHeading) !important;
    }

    .kmg-edit-profile-form .inpuSubLabel {
        display: none !important;
    }
}

/* Checkout banner box matches Teams (450px). Artwork stays profile-banner. */
/* @media screen and (min-width: 768px) {
    body.kmg-checkout-page .mainContainer .profileBanner.settingsBanner {
        background-image: url(images/profile-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: 100% 100% !important;
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        padding: 38px 0 0 !important;
        box-sizing: border-box !important;
    }
} */

/* Checkout refinements: retain EDD's form and gateway markup while matching
 * the spacing and simple summary treatment from checkout.html. */
.kmg-checkout-page #edd_checkout_cart .edd_cart_item_image {
    display: none !important;
}

.kmg-checkout-page #edd_checkout_cart th,
.kmg-checkout-page #edd_checkout_cart td {
    font-family: var(--secondary-font) !important;
    font-size: var(--textBodySmall) !important;
    line-height: 1.4 !important;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_item_name,
.kmg-checkout-page #edd_checkout_cart .edd_cart_item_price {
    color: var(--textBody) !important;
    font-weight: 500 !important;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_item > td {
    border-bottom: 1px solid #aaaaaa !important;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_footer_row th {
    border: 0 !important;
    color: var(--textBody) !important;
    font-weight: 500 !important;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_total {
    position: relative;
    border-top: 0 !important;
    color: var(--textHeading) !important;
    font-weight: 700 !important;
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_total::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: #aaaaaa;
    content: "";
}

.kmg-checkout-page #edd_checkout_cart .edd_cart_total .edd_cart_amount {
    color: var(--textLink) !important;
}

/* Prefer card wrappers; do not double-shadow nested personal fieldsets. */
.kmg-checkout-page .kmg-checkout-personal-card #edd_checkout_user_info,
.kmg-checkout-page .kmg-checkout-personal-card #edd_login_fields {
    box-shadow: none !important;
}

.kmg-checkout-page #edd_checkout_cart_form {
    box-shadow: 0 6px 0 var(--shadowColorLight) !important;
}

.kmg-checkout-page #edd_purchase_form_wrap #edd_purchase_submit {
    margin-top: 30px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* PayPal renders its own button. Constrain and centre that control only. */
.kmg-checkout-page #edd_purchase_form_wrap:has(#edd-paypal-container) #edd_purchase_submit {
    margin-top: 0 !important;
    padding: 0 !important;
}

.kmg-checkout-page #edd-paypal-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.kmg-checkout-page #edd-paypal-container > div {
    max-width: 360px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Keep the discount controls aligned with the summary and use the same blue
 * button treatment as Place Order. */
.kmg-checkout-page #edd_checkout_cart_form .edd_discount_link {
    margin-top: 10px !important;
    border-color: var(--btnSecondary) !important;
    background: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
}

.kmg-checkout-page #edd_checkout_cart_form .edd-apply-discount {
    border: 2px solid var(--btnSecondary) !important;
    background: var(--btnSecondary) !important;
    color: var(--textInverse) !important;
}

.kmg-checkout-page #edd_checkout_cart_form .edd_discount_link:hover,
.kmg-checkout-page #edd_checkout_cart_form .edd_discount_link:focus-visible,
.kmg-checkout-page #edd_checkout_cart_form .edd-apply-discount:hover,
.kmg-checkout-page #edd_checkout_cart_form .edd-apply-discount:focus-visible,
.kmg-checkout-page #edd-purchase-button:hover,
.kmg-checkout-page #edd-purchase-button:focus-visible {
    border-color: var(--btnSecondaryActive) !important;
    background: var(--btnSecondaryActive) !important;
    color: var(--textInverse) !important;
}

@media screen and (max-width: 767px) {
    .kmg-checkout-page #edd_purchase_form_wrap #edd_cc_fields {
        padding: 24px 18px !important;
    }

    .kmg-checkout-page #edd_purchase_form_wrap #edd_purchase_submit {
        padding: 0 !important;
    }
}

/* EDD places its discount control and total in one row. Use a small grid so
 * the divider is full width and both controls sit below it. */
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-footer.edd_cart_footer_row:not(.edd_cart_tax_row):not(.edd_cart_subtotal_row):not(.edd_cart_discount_row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 1px auto !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
}

body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-footer.edd_cart_footer_row:not(.edd_cart_tax_row):not(.edd_cart_subtotal_row):not(.edd_cart_discount_row)::before {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 1px;
    background: #aaaaaa;
    content: "";
}

body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_discount_code {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
    text-align: left !important;
}

body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_total {
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
}

body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_total::before {
    display: none !important;
}

/* These selectors include EDD's checkout wrapper ID, which overrides the
 * generic input/button rule applied elsewhere in this stylesheet. */
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_show_discount .edd_discount_link,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart input.edd-apply-discount.edd-submit.wp-block-button__link {
    width: auto !important;
    min-width: 150px !important;
    border-color: var(--btnSecondary) !important;
    background-color: var(--btnSecondary) !important;
    background-image: none !important;
    color: var(--textInverse) !important;
    box-shadow: none !important;
}

/* Limit only the revealed discount-code textbox; the generic checkout input
 * rule otherwise expands it to the entire available summary width. */
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd-discount-code-wrap input#edd-discount.edd-input {
    flex: 0 1 260px !important;
    width: 260px !important;
}

@media screen and (max-width: 767px) {
    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-header {
        display: none !important;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-item {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_name {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_name::before {
        flex: 0 0 auto;
        content: "Item Name:";
        color: var(--textHeading);
        font-weight: 700;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_checkout_cart_item_title {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_name .edd_cart_actions {
        flex: 1 0 100%;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_price {
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_price::before {
        flex: 0 0 auto;
        content: "Item Price:";
        color: var(--textHeading);
        font-weight: 700;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_item_price .edd_cart_actions {
        margin-left: auto;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-footer.edd_cart_footer_row:not(.edd_cart_tax_row):not(.edd_cart_subtotal_row):not(.edd_cart_discount_row) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd-blocks-cart__row-footer.edd_cart_footer_row:not(.edd_cart_tax_row):not(.edd_cart_subtotal_row):not(.edd_cart_discount_row)::before {
        order: 0;
        align-self: stretch;
        flex: 0 0 1px;
        height: 1px;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_discount_code {
        order: 1;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_show_discount .edd_discount_link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        white-space: normal;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd-discount-code-wrap .edd-discount-code-field-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 100%;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd-discount-code-wrap input#edd-discount.edd-input {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart input.edd-apply-discount.edd-submit.wp-block-button__link {
        flex: 0 1 auto;
        min-width: 0 !important;
        max-width: 100%;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_total {
        order: 2;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 0 0 auto !important;
        gap: 12px;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid #aaaaaa !important;
        color: var(--textHeading) !important;
        font-size: 20px;
        font-weight: 700;
        text-align: left !important;
        white-space: normal;
    }

    body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart .edd_cart_total .edd_cart_amount {
        flex: 0 0 auto;
        color: var(--textLink) !important;
        font-size: 20px;
        font-weight: 700;
    }
}

body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_show_discount .edd_discount_link:hover,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart #edd_show_discount .edd_discount_link:focus-visible,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart input.edd-apply-discount.edd-submit.wp-block-button__link:hover,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout .edd-blocks-form__cart input.edd-apply-discount.edd-submit.wp-block-button__link:focus-visible,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout #edd-purchase-button:hover,
body.kmg-checkout-page #edd_checkout_form_wrap.wp-block-edd-checkout #edd-purchase-button:focus-visible {
    border-color: var(--btnSecondaryActive) !important;
    background-color: var(--btnSecondaryActive) !important;
    color: var(--textInverse) !important;
}

/* Reserve space only while the phone-country list is open so it cannot cover Payment Method. */
body.kmg-checkout-page #edd_checkout_form_wrap:has(.iti__dropdown-content:not(.iti__hide)) #edd_payment_mode_select_wrap {
    margin-top: 230px !important;
}

/* Store badges appear only on their matching tablet platform. */
.gamePreview .gameOverview .kmg-platform-store-badges {
    display: none !important;
}

.gamePreview .gameOverview .kmg-platform-store-badges.is-ipad {
    display: grid !important;
}
.gamePreview .gameOverview .kmg-platform-store-badges.is-ipad .kmg-google-play-badge {
    display: none !important;
}

.gamePreview .gameOverview .kmg-platform-store-badges.is-tablet {
    display: grid !important;
}
.gamePreview .gameOverview .kmg-platform-store-badges.is-tablet .kmg-app-store-badge {
    display: none !important;
}
@media screen and (max-width: 575px) {
    .gamePreview .gameOverview .btn.btn-secondary,
    .gamePreview .gameOverview .btn.btn-primary, 
    .gamePreview .gameOverview button.btn-primary, 
    .gamePreview .gameOverview .edd-submit.btn-primary, 
    .gamePreview .gameOverview form .edd-submit,
    .gamePreview .getGameBuyBtn, .gamePreview .getGameBuyForm .getGameBuyBtn{
        font-size: var(--textBodySmall);
    }
}

/* ==========================================================================
   Legal Documents Styling (Privacy Policy & Terms & Conditions)
   ========================================================================== */
.legalDocument {
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 48px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  color: #334155;
  font-family: var(--base-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.7;
}

.legalMetaCard {
  background: #f8fafc;
  border-left: 4px solid var(--btnPrimary, #2563eb);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
}

.legalMetaCard p {
  margin: 0;
}

.legalHeading2 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 36px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.legalHeading3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--btnPrimary, #2563eb);
  margin-top: 24px;
  margin-bottom: 12px;
}

.legalHeading4 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-top: 16px;
  margin-bottom: 8px;
}

.legalDocument p {
  margin-bottom: 14px;
  color: #334155;
}

.legalList {
  margin-bottom: 18px;
  padding-left: 28px;
  color: #334155;
}

.legalList li {
  margin-bottom: 8px;
  line-height: 1.65;
}

.legalDivider {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 32px 0;
}

.legalCallout {
  background: #eff6ff;
  border-left: 4px solid var(--btnPrimary, #2563eb);
  padding: 16px 20px;
  border-radius: 8px;
  margin: 24px 0;
  font-style: normal;
}

.legalCallout p {
  margin: 0;
  color: #1e40af;
  font-weight: 500;
}

.tableResponsive {
  overflow-x: auto;
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
}

.legalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
}

.legalTable th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
}

.legalTable td {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  vertical-align: top;
  color: #334155;
  line-height: 1.5;
}

.legalTable tr:nth-child(even) td {
  background: #f8fafc;
}

.legalDocument a {
  color: var(--btnPrimary, #2563eb);
  text-decoration: underline;
  transition: color 0.2s;
}

.legalDocument a:hover {
  color: #1d4ed8;
}

.legalDocument code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: #0f172a;
}

@media screen and (max-width: 767px) {
  .legalDocument {
    padding: 24px 18px;
    border-radius: 12px;
  }
  .legalHeading2 {
    font-size: 19px;
    margin-top: 28px;
  }
  .legalHeading3 {
    font-size: 16px;
  }
  .legalTable th, .legalTable td {
    padding: 8px 10px;
    font-size: 13px;
  }
}
@media screen and (max-width: 1024px) {
    .legalDocument {
        padding: 25px;
    }
    .entry-content h2{
        font-size: 24px;
        margin-top: 0px;
    }
    .entry-content ul, .entry-content ol{
        margin-left: 0px;
    }
    .entry-content h3 {
        font-size: 24px;
        margin-top: 0px;
        line-height: normal;
    }
    .legalDivider{
        margin: 20px 0;
    }
}