/*
	Theme Name: Master Study Child
	Theme URI: http://stylemix.net
	Description: MasterStudy Child Theme
	Author: StylemixThemes
	Author URI: http://stylemix.net
	Template: masterstudy
	Version: 5.5
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: classes, courses, education, education center, learning center, tutoring, teaching, study, studying, learning, lessons, instructor, teacher, mentor
	Text Domain: masterstudy-child
*/



/* UPD SEPT */
@media (max-width: 400px) {
    .course-title-holder {
        padding-right: 5px;
    }
}

@media(max-width: 480px){
    .woocommerce-MyAccount-navigation ul {
        padding-left: 0;
    }
    .woocommerce-MyAccount-navigation ul li {
        display: block;
    }
}

@media (max-width: 767px) {
    .table-responsive>.table>tbody>tr>td,
    .table-responsive>.table>tbody>tr>th,
    .table-responsive>.table>tfoot>tr>td,
    .table-responsive>.table>tfoot>tr>th,
    .table-responsive>.table>thead>tr>td,
    .table-responsive>.table>thead>tr>th {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 655px) {
    .course_table tr td.number.number-visible.title, .course_table tr td.title {
        padding-left: 20px;
        display: block;
        width: 100%;
    }
    .course_table tr td.stm_badge {
        display: block;
        width: 100%;
        text-align: left;
    }
    .course_table tr td .meta {
        padding-left: 12px;
    }
    .course_table tr td.stm_badge .badge_unit {
        margin-left: 15px;
    }
    .woocommerce-message {
        padding-right: 26px;
    }
    .woocommerce-message .button {
        position: static;
        float: none;
        display: block;
    }
    .woocommerce-message .button:after {
        display: none;
    }
    .shop_table > tbody > tr td.actions {
        padding-left: 15px;
        padding-right: 15px;
    }
    .woocommerce .shop_table.cart .coupon .button {
        display: block;
        margin-top: 15px;
    }
    .woocommerce .shop_table.cart .coupon {
        float: none;
        margin-bottom: 30px;
    }
    .woocommerce .shop_table.cart .button.update-cart {
        float: none;
        margin-bottom: 15px;
    }
}

.tp-caption .icon_in_btn {
    text-align: center !important;
}

@media (max-width: 991px){
    .overflowed_content .wpb_column .vc_column-inner{
        margin-top: 0 !important;
    }
}

body .vc_row[data-vc-full-width] {
    overflow: visible;
}
body .vc_row[data-vc-full-width].vc_parallax {
    overflow: hidden;
}

.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 3em
}
.woocommerce-product-gallery figure {
    margin: 0
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 25%;
    display: inline-block
}
.woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    float: left;
    cursor: pointer
}
.woocommerce-product-gallery .flex-control-thumbs img {
    opacity: .5
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1
}
.woocommerce-product-gallery img {
    display: block
}
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
    width: 33.3333%
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 25%
}
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 20%
}
.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 99
}
ol.flex-control-nav.flex-control-thumbs {
    padding-left: 0px;
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 20%;
}
.woocommerce-product-gallery__trigger {
    right: inherit;
    left: .5em;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: 2em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: #fff;
    text-indent: -9999px;
    border-radius: 100%;
    box-sizing: content-box;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-radius: 100%;
    position: absolute;
    top: 9px;
    left: 9px;
    box-sizing: content-box;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:after {
    content: "";
    display: block;
    width: 2px;
    height: 8px;
    background: #000;
    border-radius: 6px;
    position: absolute;
    top: 19px;
    left: 22px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: content-box;
}


/* Woo My Account Tabs*/
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: table;
    float: none;
    width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}
.woocommerce-MyAccount-navigation ul {
    display: table !important;
    table-layout: fixed;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 30px; }
.woocommerce-MyAccount-navigation  ul > li {
    display: table-cell; }
.woocommerce-MyAccount-navigation  ul > li > a {
    display: block;
    padding: 12px 20px;
    background-color: #457992;
    border: 0;
    border-left: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;}
.woocommerce-MyAccount-navigation  ul > li.is-active a,
.woocommerce-MyAccount-navigation  ul > li a:hover,
.woocommerce-MyAccount-navigation  ul > li a:focus {
    background-color: #f0f2f5;
    color: #457992; }
.woocommerce div.product form.cart .variations td.label {
    display: none;
}
.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 3em
}
.woocommerce-product-gallery figure {
    margin: 0
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    z-index: 9 !important;
}
.stm_archive_product_inner_unit .stm_archive_product_inner_unit_centered .stm_featured_product_price .price h5 {
    font-weight: normal;
}
.widget_stm_recent_posts span.h6 {
    display: inline !important;
}
.widget_stm_recent_posts .cats_w {
    margin-left: 83px;
}

/* ============================================================
   PD App -- Mobile course player: high-contrast Back / Forward
   Fixes low-contrast back button + missing button shell on the
   "Previous" lesson control flagged in the mobile UX review.
   ============================================================ */
@media (max-width: 767px) {
    .masterstudy-back-link {
        background-color: #457992 !important;
        color: #ffffff !important;
    }
    .masterstudy-nav-button_type-prev.masterstudy-nav-button_style-secondary {
        background-color: #ffffff !important;
        border: 1.5px solid #457992 !important;
        border-radius: 4px !important;
        padding: 10px 20px !important;
    }
}


/* ============================================================
   PD App -- Mobile course player: curriculum sidebar polish
   Chapter-style grouping, clearer "current lesson" state, and
   improved contrast on lesson meta text (was #808c98 on white).
   ============================================================ */
@media (max-width: 767px) {
    .masterstudy-course-player-curriculum__content {
        border-radius: 14px;
        overflow: hidden;
    }

    .masterstudy-curriculum-accordion__section-title {
        color: #ffffff !important;
    }

    .masterstudy-curriculum-accordion__link_current {
        background-color: rgba(34, 122, 255, 0.1) !important;
        border-left: 3px solid #227aff !important;
    }

    .masterstudy-curriculum-accordion__meta-value {
        color: #5b6b7c !important;
    }

    .masterstudy-curriculum-accordion__link {
        padding: 12px 20px !important;
    }
}


/* ============================================================
   PD App -- "Books" library grid: compact 2-column book cards
   instead of stacked large hero-image cards, per the app's
   Design Direction (small covers, list/grid, not big banners).
   ============================================================ */
@media (max-width: 767px) {
    .stm_lms_courses__grid_6 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .stm_lms_courses__single {
        width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        margin: 0 !important;
    }
    .stm_lms_courses__single {
        height: 100%;
    }
    .stm_lms_courses__single--image__container {
        height: 90px !important;
        border-radius: 12px !important;
    }
    .stm_lms_courses__single--title h5,
    .stm_lms_courses__single--title a {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .stm_lms_courses__single--info_author {
        display: none !important;
    }
}


/* ============================================================
   PD App -- Front-page "Popular Development Courses" widget
   (Elementor MasterStudy Courses widget, ms_lms_courses_grid).
   BUG FIX: on mobile the card row is flex+nowrap with no scroll
   mechanism and no arrows, so cards silently overflow off-screen
   with no way to reach them. Wrap into a compact 2-col grid,
   matching the same book-card treatment used elsewhere.
   ============================================================ */
@media (max-width: 767px) {
    .ms_lms_courses_card_wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .ms_lms_courses_card_item {
        width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        margin: 0 !important;
    }
    .ms_lms_courses_card_item_image {
        height: 90px !important;
        border-radius: 12px !important;
    }
    .ms_lms_courses_card_item_info_title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}


/* ============================================================
   PD App -- Homepage hero + stats + book grid (mobile only)
   Matches the Pratiyogita Darpan mobile prototype's Home screen.
   Markup built by JS in the "PD Mobile UI Phase 1" Footer Bottom
   Custom HTML widget (buildHomeTiles). Replaces the old flat
   .pd-tile grid with a gradient hero + 2x2 stats + book cards.
   ============================================================ */
@media (max-width: 768px) {
  body.page-id-12223 .pd-hero {
    background: linear-gradient(160deg, #2f5bff, #1b3f9e);
    color: #fff;
    border-radius: 20px;
    padding: 22px;
    margin: 0 0 14px;
  }
  body.page-id-12223 .pd-hero__greeting { font-size: 13px; opacity: .85; }
  body.page-id-12223 .pd-hero__heading { font-size: 24px; font-weight: 800; line-height: 1.25; margin-top: 6px; }
  body.page-id-12223 .pd-hero__sub { font-size: 13px; opacity: .85; margin-top: 8px; }
  body.page-id-12223 .pd-hero__progress { margin-top: 18px; }
  body.page-id-12223 .pd-hero__progress-top { font-size: 12px; opacity: .85; margin-bottom: 6px; }
  body.page-id-12223 .pd-hero__progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  body.page-id-12223 .pd-hero__progress-row strong { font-size: 22px; }
  body.page-id-12223 .pd-hero__progress-row span { font-size: 12px; opacity: .85; }
  body.page-id-12223 .pd-bar { height: 8px; background: rgba(255,255,255,.28); border-radius: 20px; overflow: hidden; }
  body.page-id-12223 .pd-bar span { display: block; height: 100%; background: #fff; border-radius: 20px; }

  body.page-id-12223 .pd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
  body.page-id-12223 .pd-stat { background: #fff; border: 1px solid #e5e9f2; border-radius: 16px; padding: 16px; }
  body.page-id-12223 .pd-stat__icon { width: 34px; height: 34px; border-radius: 10px; background: #eef2fb; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px; }
  body.page-id-12223 .pd-stat strong { display: block; font-size: 21px; color: #10172a; }
  body.page-id-12223 .pd-stat span { font-size: 12px; color: #6b7280; }

  body.page-id-12223 .pd-books__head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; }
  body.page-id-12223 .pd-books__head h2 { font-size: 17px; font-weight: 800; color: #10172a; }
  body.page-id-12223 .pd-books__head span { font-size: 12px; color: #6b7280; }
  body.page-id-12223 .pd-books__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-id-12223 .pd-book-card { display: block; background: #fff; border: 1px solid #e5e9f2; border-radius: 16px; padding: 14px; text-decoration: none !important; }
  body.page-id-12223 .pd-book-card__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 10px; }
  body.page-id-12223 .pd-book-card h3 { font-size: 14px; font-weight: 700; color: #10172a; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.page-id-12223 .pd-book-card p { font-size: 11px; color: #6b7280; margin-bottom: 8px; }
  body.page-id-12223 .pd-bar--sm { height: 5px; background: #edf0f5; }
  body.page-id-12223 .pd-bar--sm span { background: #2f5bff; }
}


/* ============================================================
   PD App -- Practice hub (mobile only, /wishlist/ page).
   Injected above the existing Wishlist list by buildPracticeHub().
   ============================================================ */
@media (max-width: 768px) {
  .pd-practice-hub { padding: 4px 4px 16px; }
  .pd-practice-hub__heading { font-size: 20px; font-weight: 800; color: #10172a; margin-bottom: 4px; }
  .pd-practice-hub__heading--saved { margin-top: 22px; }
  .pd-practice-hub__sub { font-size: 13px; color: #6b7280; margin-bottom: 16px; }
  .pd-practice-card { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e5e9f2; border-radius: 16px; padding: 16px; margin-bottom: 10px; text-decoration: none !important; }
  .pd-practice-card__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eef2fb; display: flex; align-items: center; justify-content: center; font-size: 19px; }
  .pd-practice-card__body h3 { font-size: 14px; font-weight: 700; color: #10172a; margin-bottom: 3px; }
  .pd-practice-card__body p { font-size: 12px; color: #6b7280; line-height: 1.4; margin-bottom: 6px; }
  .pd-practice-card__body span { font-size: 12px; font-weight: 700; color: #2f5bff; }
}


@media (max-width: 768px) {
  .pd-profile-header {
    background: linear-gradient(160deg, #2f5bff, #1b3f9e);
    color: #fff;
    border-radius: 20px;
    padding: 22px;
    margin: 16px 0 14px;
  }
  .pd-profile-header__top { display: flex; align-items: center; gap: 14px; }
  .pd-profile-header__avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; flex-shrink: 0;
  }
  .pd-profile-header__name { font-size: 18px; font-weight: 800; }
  .pd-profile-header__sub { font-size: 13px; opacity: .85; margin-top: 2px; }

  .pd-profile-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .pd-profile-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e5e9f2; border-radius: 16px;
    padding: 14px 16px; text-decoration: none; color: inherit;
  }
  .pd-profile-card__icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: #eef2fb; display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
  }
  .pd-profile-card__body h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: #1b2436; }
  .pd-profile-card__body p { margin: 0; font-size: 12.5px; color: #6b7688; }
  .pd-profile-card__chev { margin-left: auto; font-size: 22px; color: #b7c0cf; }
}


body.page-id-12223 .pd-continue { margin: 4px 0 14px; }
body.page-id-12223 .pd-continue__head { margin-bottom: 10px; }
body.page-id-12223 .pd-continue__head h2 { font-size: 17px; font-weight: 800; color: #1b2436; margin: 0; }
body.page-id-12223 .pd-continue-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e5e9f2; border-radius: 16px;
  padding: 14px 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
}
body.page-id-12223 .pd-continue-item__icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: #eef2fb; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
body.page-id-12223 .pd-continue-item__body { flex: 1; min-width: 0; }
body.page-id-12223 .pd-continue-item__body h3 { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: #1b2436; }
body.page-id-12223 .pd-continue-item__body p { margin: 0 0 8px; font-size: 12px; color: #6b7688; }
body.page-id-12223 .pd-continue-item__pct { font-size: 15px; font-weight: 800; color: #2f5bff; flex-shrink: 0; }


@media (max-width: 768px) {
  body.logged-in #wpadminbar { display: none !important; }
  html.wp-toolbar { margin-top: 0 !important; }
  #header { display: none !important; }
  body.logged-in #footer { display: none !important; }
  body.logged-in .stm_lms_breadcrumbs { display: none !important; }
  body.logged-in .entry-header { display: none !important; }
}


@media (max-width: 768px) {
  body.page-id-12223 .pd-home-v2 ~ .elementor-section,
  body.page-id-12223 .pd-home-v2 ~ .elementor-element {
    display: none !important;
  }
}


@media (max-width: 768px) {
  body.single-stm-courses .masterstudy-curriculum-list__link {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__order {
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #eef2fb !important;
    color: #2f5bff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__container,
  body.single-stm-courses .masterstudy-curriculum-list__container-wrapper {
    text-align: left !important;
    width: 100% !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1b2436 !important;
    text-align: left !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__meta-wrapper {
    justify-content: flex-start !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__meta {
    font-size: 11.5px !important;
    color: #6b7688 !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__excerpt-wrapper p {
    text-align: left !important;
    font-size: 12.5px !important;
    color: #6b7688 !important;
  }
  body.single-stm-courses .masterstudy-curriculum-list__item {
    border-radius: 14px !important;
  }
}


@media (max-width: 576px) {
  .masterstudy-authorization_login.masterstudy-authorization_style-modal {
    justify-content: center !important;
  }
  .masterstudy-authorization_login.masterstudy-authorization_style-modal .masterstudy-authorization__switch {
    margin-top: 32px !important;
  }
}


@media (min-width: 1026px) {
  .header_2 .header_top .right-unit .stm_lms_log_in {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

#footer_bottom .socials_widget_wrapper .widget_socials {
  max-width: 300px;
}

h1, h2, h3, h4, h5, h6, .heading_font {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}

@media (max-width: 767px) {
  .stm_lms_courses__single--image,
  .stm_lms_courses__single--image__container {
    height: 140px !important;
  }
}


/* ============================================================
   PD App -- Session 25: mobile fixes (client bug list)
   1) Lesson content pasted from Word carries large inline pt
      margins / text-indents (e.g. Art & Culture "Chapter 1")
      that overflow narrow screens -> neutralise on mobile only.
   2) Course-player nav: in the "Completed" state the forward
      control is .masterstudy-nav-button_style-secondary, but only
      the "Previous" secondary button was skinned, so "Next"
      rendered as bare text, misaligned with Previous / Completed.
   ============================================================ */
@media (max-width: 767px) {
    .masterstudy-course-player-lesson p[style*="margin"],
    .masterstudy-course-player-lesson li[style*="margin"],
    .masterstudy-course-player-lesson ul[style*="margin-left"],
    .masterstudy-course-player-lesson ol[style*="margin-left"],
    .masterstudy-course-player-lesson div[style*="margin-left"] {
        margin-left: 0 !important;
    }
    .masterstudy-course-player-lesson [style*="text-indent"] {
        text-indent: 0 !important;
    }
    .masterstudy-course-player-lesson ul[style*="padding-left"],
    .masterstudy-course-player-lesson ol[style*="padding-left"] {
        padding-left: 1.25em !important;
    }
    .masterstudy-course-player-lesson p[style*="padding-left"],
    .masterstudy-course-player-lesson li[style*="padding-left"] {
        padding-left: 0 !important;
    }

    .masterstudy-nav-button_type-next.masterstudy-nav-button_style-secondary {
        background-color: #ffffff !important;
        border: 1.5px solid #457992 !important;
        border-radius: 4px !important;
        padding: 10px 20px !important;
        color: #457992 !important;
    }
    .masterstudy-course-player-navigation__wrapper { align-items: center !important; }
    .masterstudy-course-player-navigation__status  { align-items: center !important; }
}


/* ============================================================
   PD App -- Session 31: mobile footer + LMS chrome
   1) The mobile footer carried ~400px of dead space: 63px section
      padding, 20+15px around every widget, and the script-only
      block-10 widget still occupying ~50px after the PD logo.
   2) The page-title band and the "MasterStudy > My account"
      breadcrumb were hidden only for logged-in users, so guests
      (the QR / sign-up journey) still saw both on every screen.
   3) The footer About paragraph was the last place the word
      "courses" appeared in the app view -> not rendered on mobile.
   ============================================================ */
@media (max-width: 768px) {
    .entry-header,
    .stm_lms_breadcrumbs { display: none !important; }

    #footer_bottom { padding-top: 22px !important; padding-bottom: 8px !important; }
    #footer_bottom .widget { margin-bottom: 12px !important; padding-bottom: 0 !important; }
    #footer_bottom .widget_title { margin-bottom: 8px !important; }

    /* About: long marketing prose, and the only "courses" left in the app view */
    #footer_bottom #stm_text-2 { display: none !important; }

    /* block-10 is <script> + <style> only - both keep working at zero height */
    #footer_bottom #block-10 { height: 0 !important; margin: 0 !important;
        padding: 0 !important; overflow: hidden !important; }

    #footer_bottom .logo-container { padding: 0 !important; }
    #footer_bottom .logo-container br { display: none !important; }

    #footer_copyright { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Session 31a: the PD logo sat 32px under the social icons but 20px above the
   divider. The socials list carries its own trailing margin - zero it and own
   the gap on the widget, so the logo is evenly spaced top and bottom. */
@media (max-width: 768px) {
    #footer_bottom #socials-2 .widget_socials,
    #footer_bottom #socials-2 .widget_socials li { margin-bottom: 0 !important; }
    #footer_bottom #socials-2 { margin-bottom: 20px !important; }
}

/* Session 31b: Practice (and any route that reveals late) could settle with
   #wrapper still invisible. Cause: the theme puts `transition: all .25s` on
   #wrapper, so removing the boot overlay's visibility:hidden starts a discrete
   visibility TRANSITION - and a transition outranks even an !important rule,
   so while it is pending the old value (hidden) keeps winning. On a throttled
   phone tab that transition can sit at currentTime 0 and never advance, which
   is why the Practice quizzes rendered into the DOM but nothing was on screen.
   Verified live: killing the transition revealed all 4 quiz cards instantly. */
@media (max-width: 768px) {
    #wrapper { transition: none !important; }
}