/**
 * TeachDemy — Round 17: GLOBAL MOBILE RESPONSIVENESS LAYER.
 * Client report: "the site is not good at all on phones — fix it on
 * EVERY page and EVERY part of every page".
 *
 * This stylesheet is enqueued LAST on every front-end page (priority
 * 10200, after the theme's page-scoped CSS AND the plugin's CSS), so
 * its mobile-only rules win the cascade. Everything outside @media is
 * a harmless safety net; the real fixes live inside the breakpoints
 * 1024 / 900 / 768 / 640 / 480 / 380.
 *
 * Organization:
 *   0. Global safety net (overflow killers, media clamps)
 *   1. Chrome: top bar, header, hamburger panel, search, footer
 *   2. Home page (hero, sections, marquee, chat preview, plans)
 *   3. Static + support pages (about/faq/contact/refund/terms/privacy/
 *      our-mission/affiliate/mentor-support/courses)
 *   4. Disciplines + Upcoming
 *   5. Instructors archive + single profile
 *   6. Become an Instructor wizard (5 steps + numbered tables)
 *   7. Single Course page (Udemy-style)
 *   8. WooCommerce: shop / cart / checkout / my account
 *   9. Blog + single article
 *  10. Plugin components: chat, exams, affiliate dashboard, wallet,
 *      certificates, geo modal, toasts/modals, outreach
 *  11. Touch targets + iOS safe areas + reduced motion
 *
 * Color notes: only layout/spacing/size rules are set here; the few
 * backgrounds introduced (hamburger panel scrim, scroll hints) get
 * explicit html[data-theme="dark"] variants so dark mode stays intact.
 */

/* ============================================================
 * 0. GLOBAL SAFETY NET (applies at every width — harmless)
 * ============================================================ */

/* Media can never push the page wider than the viewport. */
.td-page img,
.td-page video,
.td-page iframe,
.td-page embed,
.td-page object,
.td-page canvas,
.tdp-chat img,
.tdp-exam img,
.tdp-affiliate img,
.tdp-certificate img{max-width:100%;height:auto}

/* Grid/flex children must be allowed to shrink — the #1 cause of
   horizontal overflow inside CSS grid layouts. */
.td-page .container,
.td-page .grid,
.td-page [class*="cards"],
.td-page .courses,
.td-page .cats,
.td-page .features,
.td-page .expert-grid,
.td-page .test-grid,
.td-page .goals,
.td-page .trust-grid,
.td-page .growth,
.td-page .faq-grid,
.td-page .process,
.td-page .section-row,
.td-page .td-bi-stats,
.td-page .tda-grid,
.td-page .tdi-hero-inner,
.tdp-affiliate-dashboard,
.tdp-exam-container,
.tdp-chat-container{min-width:0}
.td-page .container > *,
.td-page .grid > *,
.td-page .courses > *,
.td-page .section-row > *{min-width:0}

/* Long unbroken strings (URLs, emails) must wrap instead of
   overflowing their cards on narrow screens. */
.td-page .card,
.td-page .td-lead,
.td-page .lead,
.td-page .policy-note,
.td-page .td-ms-summary,
.tdp-exam-meta,
.tdp-conv-meta{overflow-wrap:break-word;word-wrap:break-word}

/* iOS zooms inputs < 16px — keep Woo + wizard inputs comfortable. */
@media (max-width:768px){
        .td-page input[type="text"],
        .td-page input[type="email"],
        .td-page input[type="tel"],
        .td-page input[type="url"],
        .td-page input[type="password"],
        .td-page input[type="search"],
        .td-page input[type="number"],
        .td-page select,
        .td-page textarea,
        .tdp-ia-card input,
        .tdp-ia-card select,
        .tdp-ia-card textarea,
        .woocommerce input[type="text"],
        .woocommerce input[type="email"],
        .woocommerce input[type="tel"],
        .woocommerce input[type="password"],
        .woocommerce input[type="url"],
        .woocommerce select,
        .woocommerce textarea,
        #td-search-input{font-size:16px !important}
}

/* Kill stray horizontal scroll on the document itself. */
@media (max-width:768px){
        html{overflow-x:hidden}
        body.td-page,
        body.woocommerce-checkout,
        body.woocommerce-cart,
        body.woocommerce-account,
        body.blog,
        body.single-post,
        body.search-results{overflow-x:hidden}
}

/* ============================================================
 * 1. CHROME — top bar, header, hamburger, search, footer
 * ============================================================ */

@media (max-width:1024px){
        /* Hamburger panel: cap its height so the nav never runs under
           the fold on landscape phones; scroll if longer. */
        .td-page header.header .navlinks.is-open{
                max-height:calc(100vh - 90px);
                overflow-y:auto;
                -webkit-overflow-scrolling:touch;
        }
        /* Sticky header: give the page a little more breathing room. */
        .td-page header.header{position:sticky}
}

@media (max-width:900px){
        .td-page header.header .nav{
                gap:10px;
        }
        /* Compact icon buttons — 6 action buttons at 390px were
           crowding the logo. 36px still ≥ comfortable tap size. */
        .td-page header.header .navactions{gap:6px}
        .td-page header.header .btn.icon-only{width:36px;height:36px}
        .td-page header.header .td-auth-buttons .btn{padding:9px 12px}
        .td-page .brand-logo{height:38px}
        .td-page .brandname{font-size:17px}
        /* Live search: full-width overlay panel instead of the little
           desktop popover. */
        .td-page .td-search-form.is-open{
                position:fixed;
                top:64px;left:0;right:0;
                width:100%;
                margin:0;
                border-radius:0;
                box-shadow:0 18px 40px rgba(7,31,61,.18);
                z-index:120;
        }
        .td-page .td-search-live{max-height:60vh;overflow-y:auto}
        /* Dark variant for the overlay. */
        html[data-theme="dark"] .td-page .td-search-form.is-open{
                background:#0a1f1f;
        }
}

@media (max-width:768px){
        /* Hamburger button itself: bigger tap area. */
        .td-page header.header .menu{
                min-width:44px;min-height:44px;
                display:inline-flex;align-items:center;justify-content:center;
        }
        /* Panel sits right below the 64px header, with page-wide
           padding + hairline separators between items. */
        .td-page header.header .navlinks.is-open{
                top:100%;
                padding:10px 4% 16px;
        }
        .td-page header.header .navlinks.is-open > a{
                padding:12px 2px;
                font-size:14px;
        }
        .td-page header.header .navlinks.is-open > a:last-of-type{
                border-bottom:0;
        }
        /* Footer columns: tighten + readable type scale. */
        .td-page footer#site-footer .footgrid{gap:26px}
        .td-page footer#site-footer h4,
        .td-page footer#site-footer .foottitle{font-size:14px}
        .td-page footer#site-footer .foot-contact a,
        .td-page footer#site-footer .foot-contact span{font-size:11.5px}
        .td-page footer#site-footer .bottom{font-size:11.5px}
        .td-page footer#site-footer .foot-socials a{min-width:36px;min-height:36px}
        /* Newsletter: the min-width:320px footer form was overflowing
           320-360px phones — make it fluid + stack. */
        .td-page .td-news-form,
        .td-page .td-news-form form,
        .td-page .td-news-form .td-news-row{
                min-width:0 !important;
                width:100%;
                flex-direction:column;
                display:flex;
        }
        .td-page .td-news-form input[type="email"],
        .td-page .td-news-form input{width:100%;min-width:0;flex:1 1 auto}
        .td-page .td-news-form button,
        .td-page .td-news-form .td-news-btn{width:100%;margin-top:8px}
}

@media (max-width:640px){
        /* Header height: 76 → 64px so phones keep more viewport. */
        .td-page header.header{min-height:64px}
        .td-page header.header .nav{min-height:64px;padding:6px 0}
        .td-page header.header .navlinks.is-open{top:100%}
        .td-page .brand-logo{height:34px}
        .td-page .brandname{font-size:15px}
        .td-page .brandmark{width:32px;height:32px}
        .td-page .brandmark svg{width:32px;height:32px}
        .td-page header.header .td-explore-cta{display:none}
        /* Cart + account + wishlist + one auth pill fit comfortably. */
        .td-page header.header .td-auth-buttons .td-auth-signup{display:none}
        .td-page header.header .td-auth-buttons .td-auth-login{
                padding:9px 14px;font-size:11px;
        }
        .td-page .top .container{height:32px;font-size:10.5px}
}

@media (max-width:380px){
        /* Smallest phones: keep logo + hamburger + cart only. */
        .td-page header.header .td-wishlist-link{display:none}
        .td-page header.header .td-auth-buttons .td-auth-login{padding:8px 10px}
        .td-page .brandname{font-size:14px}
        .td-page .brand-logo{height:30px}
}

/* ============================================================
 * 2. HOME PAGE
 * ============================================================ */

@media (max-width:768px){
        .td-page .hero{overflow:hidden}
        .td-page .hero-inner{padding:44px 0 46px}
        .td-page .hero h1{
                font-size:clamp(30px,8.5vw,40px);
                letter-spacing:-1.2px;
        }
        .td-page .hero .lead{font-size:15px;line-height:1.75}
        .td-page .kicker{font-size:10px;padding:7px 11px;flex-wrap:wrap}
        .td-page .hero-ctas{flex-direction:column;align-items:stretch}
        .td-page .hero-ctas .btn{width:100%;max-width:420px}
        .td-page .hero-proof{gap:10px;font-size:11px}
        .td-page .hero-bullets{font-size:12.5px}
        .td-page section{padding:54px 0}
        .td-page .section{padding:50px 0}
        .td-page h2{letter-spacing:-.8px}
        /* Logo marquee: smaller strip + closer gap. */
        .td-page .logo-marquee{padding:16px 0}
        .td-page .logo-marquee-track{gap:28px}
        .td-page .logo-marquee-item{height:56px}
        .td-page .logo-marquee-item img{max-height:44px}
        /* Growth / plans cards: lighter padding stack. */
        .td-page .growth-card{padding:26px 22px;min-height:0}
        .td-page .plans .card,
        .td-page .plan{padding:24px 18px}
        /* Chat preview: bubble window a bit shorter, tighter grid. */
        .td-page .chat-window{height:210px;padding:12px}
        .td-page .chat-preview{padding:18px;border-radius:16px}
        .td-page .face-stack{flex-wrap:wrap}
        /* Section heads. */
        .td-page .eyebrow{font-size:10px}
        .td-page .lead{font-size:14px}
        .td-page .lead.td-reveal{font-size:14px}
}

@media (max-width:640px){
        .td-page .hero-inner{padding:34px 0 40px}
        .td-page .hero h1{font-size:clamp(26px,8vw,34px)}
        .td-page .hero .lead{margin-bottom:20px}
        .td-page .hero-instructor-cta{flex-direction:column;align-items:flex-start}
        .td-page .hero-proof{flex-direction:column;align-items:flex-start;gap:8px}
        .td-page section{padding:44px 0}
        .td-page .section{padding:40px 0}
        .td-page h2{font-size:clamp(22px,6.4vw,28px)}
        .td-page .benefit-list div{grid-template-columns:20px 1fr;font-size:13px}
        .td-page .course-img{height:150px}
        .td-page .chat-feature-grid{gap:6px}
        .td-page .faq-grid{gap:14px}
        .td-page .footgrid{gap:20px}
        .td-page .footbrand .brand-logo{height:42px}
}

@media (max-width:480px){
        .td-page .hero-inner{padding:26px 0 34px}
        .td-page .hero h1{font-size:clamp(24px,7.6vw,30px)}
        .td-page .hero .lead{font-size:13.5px}
        .td-page .hero-ctas .btn{font-size:12px;padding:13px 16px}
        .td-page section{padding:36px 0}
        .td-page .section{padding:34px 0}
        .td-page .kicker{font-size:9.5px}
        .td-page .logo-marquee{padding:12px 0}
        .td-page .logo-marquee-item{height:44px}
        .td-page .logo-marquee-item img{max-height:34px}
        .td-page .course-img{height:132px}
        .td-page .td-home-course .course-img{height:136px}
        .td-page .growth-card{padding:22px 18px}
        .td-page .plans{gap:14px}
        /* Testimonials: avatar + text block stack tightly. */
        .td-page .stars{font-size:12px}
        .td-page .reviewpic{width:44px;height:44px}
        .td-page .td-az-filter{gap:6px}
        .td-page .td-az-filter .az-pill{min-width:28px}
}

/* ============================================================
 * 3. STATIC + SUPPORT PAGES
 * (about / faq / contact / refund / terms / privacy / our-mission /
 *  affiliate / mentor-support / courses)
 * ============================================================ */

@media (max-width:768px){
        .td-page .page-hero .container{padding:40px 0 44px}
        .td-page .page-hero h1{font-size:clamp(28px,7.6vw,38px);letter-spacing:-1.2px}
        .td-page .page-hero .lead{font-size:14px}
        .td-page .page-hero .crumb{font-size:10.5px}
        .td-page .page-hero-actions{flex-direction:column;align-items:stretch;gap:10px}
        .td-page .page-hero-actions .btn{width:100%;max-width:420px}
        .td-page .sticky-bar small{display:none}
        /* Contact / checkout-styled forms: single column. */
        .td-page .form-grid{grid-template-columns:1fr !important}
        .td-page .td-contact-topic{padding:16px}
        /* Timeline (refund steps): thinner rail, tighter dots. */
        .td-page .timeline{padding-left:24px}
        .td-page .timeline .step,
        .td-page .step{padding-left:4px}
        /* Mentor support: wizard nav becomes horizontal scroll pills. */
        .td-page .wizard-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
        .td-page .wizard-steps{flex-wrap:nowrap;min-width:max-content}
        .td-page .td-ms-layout{grid-template-columns:1fr}
        .td-page .td-ms-summary{position:static}
        .td-page .td-plan-grid{grid-template-columns:1fr}
        .td-page .td-summary-card{position:static}
        .td-page .pick-grid{grid-template-columns:1fr}
        .td-page .slot-grid{grid-template-columns:repeat(2,1fr)}
        .td-page .session-grid{grid-template-columns:1fr 1fr}
        /* About page: social strip + cred chips wrap. */
        .td-page .td-social-strip-inner{flex-wrap:wrap;gap:10px}
        .td-page .td-social-item{min-width:46%}
        .td-page .td-cred-chips{flex-wrap:wrap;gap:6px}
        /* Tables on static pages become horizontally scrollable. */
        .td-page .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}
        .td-page .table td,
        .td-page .table th{white-space:nowrap}
        .td-page .td-meta-row{flex-wrap:wrap;gap:8px}
        .td-page .policy-note{padding:14px 16px}
        .td-page .td-affiliate-ctas{flex-direction:column;align-items:stretch}
        .td-page .td-affiliate-ctas .btn{width:100%}
        .td-page .td-affiliate-apply-card{padding:18px}
}

@media (max-width:640px){
        .td-page .page-hero .container{padding:30px 0 34px}
        .td-page .page-hero h1{font-size:clamp(24px,7vw,30px)}
        .td-page .slot-grid{grid-template-columns:1fr}
        .td-page .session-grid{grid-template-columns:1fr}
        .td-page .card{padding:18px 16px}
        .td-page .td-az-filter{flex-wrap:wrap}
        .td-page .td-cat-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
        .td-page .td-cat-pill{flex:0 0 auto}
        .td-page .td-cat-tools{flex-direction:column;align-items:stretch;gap:10px}
        .td-page .td-cat-tools .td-cat-tools__search{width:100%}
        .td-page .td-cat-tools input,
        .td-page .td-cat-tools select{width:100%}
}

@media (max-width:480px){
        .td-page .page-hero .container{padding:24px 0 28px}
        .td-page .page-hero h1{font-size:clamp(21px,6.6vw,26px)}
        .td-page .page-hero .lead{font-size:12.5px}
        .td-page .crumb{margin-bottom:10px}
        .td-page .td-social-item{min-width:100%}
        .td-page .pill{font-size:10px;padding:6px 10px}
        .td-page .btn{padding:11px 14px;font-size:11.5px}
        .td-page .td-contact-chip{font-size:10.5px}
        .td-page .td-faq-listen{flex-wrap:wrap}
}

/* ============================================================
 * 4. DISCIPLINES + UPCOMING
 * ============================================================ */

@media (max-width:768px){
        .td-page .td-cat-hero__grid{grid-template-columns:1fr}
        .td-page .td-cat-hero .container{padding:34px 0 38px}
        .td-page .td-cat-hero__stats{gap:14px}
        .td-page .td-cat-hero__stat{min-width:0}
        .td-page .td-cat-quick__row{flex-wrap:wrap;gap:8px}
        .td-page .td-cat-specs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
        .td-page .td-spec-chip{flex:0 0 auto}
        .td-page .td-disciplines-banner .container{padding:24px 18px}
        /* Upcoming: countdown + seats stack, actions full-width. */
        .td-page .td-countdown{flex-wrap:wrap;gap:6px}
        .td-page .td-countdown span,
        .td-page .td-countdown div{min-width:0}
        .td-page .td-seats__bar{height:8px}
        .td-page .td-upcoming-actions{flex-direction:column;align-items:stretch;gap:8px}
        .td-page .td-upcoming-actions .btn{width:100%}
        .td-page .td-notify-form-row{flex-direction:column;align-items:stretch}
        .td-page .td-notify-form input{width:100%}
        .td-page .td-notify-form button{width:100%;margin-top:8px}
        .td-page .td-upcoming-card .meta{flex-wrap:wrap;gap:8px}
        .td-page .td-wl-social{flex-wrap:wrap}
}

@media (max-width:480px){
        .td-page .td-cat-hero__stats{grid-template-columns:1fr 1fr}
        .td-page .td-cat-quick__count{font-size:11px}
        .td-page .td-seats__label{font-size:11px}
        .td-page .td-countdown{font-size:11.5px}
        .td-page .badge{font-size:9.5px;padding:5px 9px}
}

/* ============================================================
 * 5. INSTRUCTORS — archive grid + single profile
 * ============================================================ */

@media (max-width:768px){
        /* Filter bar: wrap + horizontally scrollable chips row. */
        .td-page .filterbar,
        .td-page .tda-filterbar{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
        .td-page .tda-filterbar .tda-chips{
                display:flex;flex-wrap:nowrap;overflow-x:auto;
                -webkit-overflow-scrolling:touch;gap:8px;padding-bottom:6px;
        }
        .td-page .tda-chip{flex:0 0 auto;white-space:nowrap}
        .td-page .tda-row{grid-template-columns:1fr;gap:12px}
        .td-page .tda-grid{grid-template-columns:1fr}
        .td-page .tda-card-actions{flex-direction:column;align-items:stretch}
        .td-page .tda-card-actions .btn{width:100%}
        /* Single profile: hero portrait above content. */
        .td-page .tdi-hero-inner{grid-template-columns:1fr;gap:18px;text-align:left}
        .td-page .tdi-hero-inner .tda-portrait-wrap{justify-content:flex-start}
        .td-page .tdi-stats{flex-wrap:wrap;gap:12px}
        .td-page .tdi-about-grid{grid-template-columns:1fr}
        .td-page .tdi-share-grid{grid-template-columns:1fr}
        .td-page .td-share-row{flex-wrap:wrap;gap:8px}
        .td-page .td-rating-breakdown{min-width:0}
        .td-page .tdi-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
        .td-page .tdi-side-card{margin-top:0}
        .td-page .tdi-plan .price{font-size:24px}
}

@media (max-width:480px){
        .td-page .tda-portrait{width:92px;height:92px}
        .td-page .tda-verified{width:22px;height:22px;font-size:10px}
        .td-page .tdi-stats{gap:8px;font-size:11px}
        .td-page .tda-chips{gap:6px}
        .td-page .tda-count{font-size:11px}
        .td-page .td-rating-row{gap:8px}
        .td-page .td-star-label{font-size:10.5px}
}

/* ============================================================
 * 6. BECOME AN INSTRUCTOR — 5-step wizard + numbered tables
 * ============================================================ */

@media (max-width:768px){
        .td-page .td-bi-applywrap{grid-template-columns:1fr}
        .td-page .td-bi-formcol{min-width:0}
        .td-page .td-bi-applyinfo{position:static}
        .td-page .td-bi-statsband{padding:16px}
        .td-page .td-bi-stats{grid-template-columns:1fr 1fr;gap:10px}
        .td-page .td-bi-stat{padding:14px 10px}
        .td-page .td-bi-ctaband-inner{grid-template-columns:1fr;padding:24px 18px}
        .td-page .td-bi-ctaband-actions{flex-direction:column;align-items:stretch}
        .td-page .td-bi-ctaband-actions .btn{width:100%}
        .td-page .td-bi-timeline-card,
        .td-page .td-bi-standcard{padding:18px 16px}
        /* Progress pills: horizontal scroll track (never squeeze). */
        .td-page .tdp-ia-progress,
        .tdp-ia-progress{
                overflow-x:auto;-webkit-overflow-scrolling:touch;
                padding-bottom:8px;
        }
        .tdp-ia-progress li{flex:0 0 auto;white-space:nowrap}
        /* Wizard field grids: one column. */
        .tdp-ia-card .tdp-ia-grid{grid-template-columns:1fr}
        .tdp-ia-actions{flex-direction:column-reverse;align-items:stretch}
        .tdp-ia-actions .tdp-ia-btn{width:100%;max-width:none}
        .tdp-ia-actions .tdp-ia-back{width:100%}
        .tdp-ia-msg{font-size:11.5px}
        /* Numbered education/experience tables: the plugin CSS stacks
           them at 700px; keep the same contract here (badge column,
           inputs in the middle, remove button on the first row) and
           enforce it at this breakpoint too. */
        .tdp-ia-row--edu,
        .tdp-ia-row--exp{grid-template-columns:34px minmax(0,1fr) 40px !important}
        .tdp-ia-row--edu .tdp-ia-row-no,
        .tdp-ia-row--exp .tdp-ia-row-no{grid-column:1;grid-row:1;align-self:start}
        .tdp-ia-row--edu input,
        .tdp-ia-row--exp input{grid-column:2}
        .tdp-ia-row--edu .tdp-ia-row-remove,
        .tdp-ia-row--exp .tdp-ia-row-remove{grid-column:3;grid-row:1}
}

@media (max-width:480px){
        .td-page .td-bi-stats{grid-template-columns:1fr}
        .td-page .td-bi-hero .container{padding:26px 0 30px}
        .td-page .td-bi-standtable th,
        .td-page .td-bi-standtable td{font-size:11.5px;padding:8px 10px}
        .tdp-ia-card{padding:16px}
        .tdp-ia-card legend,
        .tdp-ia-card h3{font-size:14px}
        .tdp-ia-field label{font-size:11.5px}
}

/* ============================================================
 * 7. SINGLE COURSE (Udemy-style page)
 * ============================================================ */

@media (max-width:768px){
        .td-course-page .td-course-body{grid-template-columns:minmax(0,1fr)}
        .td-course-page .td-course-purchase{position:static;order:-1}
        .td-course-page .td-course-sec{padding:18px 0 6px}
        .td-course-page .td-course-card{padding:16px}
        .td-course-meta,
        .td-course-page .td-course-meta{flex-wrap:wrap;gap:8px;font-size:12px}
        .td-course-page .td-course-title{font-size:clamp(22px,6.6vw,28px)}
        .td-course-page .td-course-lead{font-size:13px}
        .td-course-page .td-course-inst-card{flex-direction:column;align-items:flex-start}
        .td-course-page .td-course-learn-list{grid-template-columns:1fr}
        /* Curriculum rows: keep title + duration on one line each. */
        .td-course-page .td-course-curriculum .td-course-chapter{font-size:12px}
        .td-course-desc-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:480px){
        .td-course-page .td-course-hero .td-course-wrap{padding:22px 16px}
        .td-course-page .td-course-title{font-size:clamp(20px,6.4vw,24px)}
        .td-course-page .td-course-purchase{padding:16px}
        .td-course-page .td-course-purchase p.price{font-size:26px}
        .td-course-page .td-course-purchase .btn{width:100%}
        .td-course-page .td-course-related{grid-template-columns:1fr}
        .td-course-page .td-course-faq .card{padding:14px}
}

/* ============================================================
 * 8. WOOCOMMERCE — shop / cart / checkout / my account
 * ============================================================ */

@media (max-width:768px){
        /* Shop grid: 2 columns on phones (WoodMart may be set to 1). */
        body.woocommerce ul.products,
        body.woocommerce-page ul.products{
                display:grid !important;
                grid-template-columns:repeat(2,minmax(0,1fr)) !important;
                gap:14px !important;
                margin-left:0 !important;margin-right:0 !important;
        }
        body.woocommerce ul.products::before,
        body.woocommerce ul.products::after{display:none !important}
        body.woocommerce ul.products li.product{
                width:100% !important;
                margin:0 !important;
                float:none !important;
                min-width:0;
        }
        body.woocommerce ul.products li.product img{width:100% !important;height:auto}

        /* Buttons: full-width primary CTAs. */
        .td-page.woocommerce a.button,
        .td-page.woocommerce button.button,
        .td-page.woocommerce input.button,
        .td-page.woocommerce #respond input#submit,
        body.woocommerce-page .button.alt{width:100%;max-width:100%}

        /* Cart: force the Woo cart table into stacked layout. */
        body.woocommerce-cart table.shop_table_responsive,
        body.woocommerce-cart table.cart,
        body.woocommerce-cart .woocommerce-cart-form table{display:block}
        body.woocommerce-cart table.cart thead{display:none}
        body.woocommerce-cart table.cart tr{display:block;position:relative;margin:0 0 14px}
        body.woocommerce-cart table.cart td{display:block;text-align:right !important;border:0}
        body.woocommerce-cart table.cart td::before{
                content:attr(data-title);
                float:left;font-weight:700;font-size:11px;
                text-transform:uppercase;letter-spacing:.4px;
        }
        body.woocommerce-cart table.cart td.product-remove{text-align:left}
        body.woocommerce-cart table.cart td.product-thumbnail{ text-align:left}
        body.woocommerce-cart table.cart img{width:74px;height:auto}
        body.woocommerce-cart .cart_totals,
        body.woocommerce-cart .cart-collaterals{width:100% !important;max-width:100%;float:none !important}

        /* Checkout: form + order review stack (belt & braces — the
           refresh CSS already stacks at 1180). */
        body.woocommerce-checkout form.checkout.woocommerce-checkout{grid-template-columns:1fr !important}
        body.woocommerce-checkout #order_review{max-width:100%;width:100%}
        body.woocommerce-checkout table.woocommerce-checkout-review-order-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
        body.woocommerce-checkout .woocommerce-billing-fields .form-row,
        body.woocommerce-checkout .woocommerce-shipping-fields .form-row,
        body.woocommerce-account form .form-row,
        body.woocommerce form .form-row{width:100%;float:none !important;margin-left:0 !important;margin-right:0 !important}
        body.woocommerce-checkout .woocommerce-checkout-payment{padding:14px}
        body.woocommerce-checkout .wc_payment_method label{font-size:12.5px}

        /* My Account: sidebar becomes a horizontally scrollable pill
           bar (WoodMart's vertical sidebar eats the whole screen). */
        body.woocommerce-account .woocommerce-MyAccount-navigation ul{
                display:flex !important;
                flex-wrap:nowrap !important;
                overflow-x:auto;-webkit-overflow-scrolling:touch;
                gap:8px;padding:4px 0 10px;
                margin:0 0 18px !important;
        }
        body.woocommerce-account .woocommerce-MyAccount-navigation li{
                flex:0 0 auto;float:none !important;margin:0 !important;
        }
        body.woocommerce-account .woocommerce-MyAccount-navigation li a{
                white-space:nowrap;padding:9px 14px;border-radius:999px;
                display:inline-block;font-size:12px;
        }
        body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
                background:var(--green,#16a673);color:#fff;
        }
        body.woocommerce-account .woocommerce-MyAccount-content{width:100% !important;float:none !important}
        /* Account tables (orders etc.) scroll horizontally. */
        body.woocommerce-account .woocommerce table.woocommerce-MyAccount-orders,
        body.woocommerce-account .woocommerce-MyAccount-content table,
        body.woocommerce-account .woocommerce table.shop_table{
                display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
                white-space:nowrap;max-width:100%;
        }
        /* Addresses / downloads grid stack. */
        body.woocommerce-account .woocommerce-Addresses,
        body.woocommerce-account .u-columns{display:grid;grid-template-columns:1fr;gap:16px}
        body.woocommerce-account .woocommerce-address-fields .form-row{width:100% !important}
        /* Login/register: the wd-registration-page 42%/1fr grid stacks
           (myaccount-login-refresh.css only stacks it at 1100 which is
           fine, this is the phone-side belt & braces). */
        body.woocommerce-account .wd-registration-page{
                grid-template-columns:1fr !important;
                grid-template-rows:auto !important;
                min-height:0 !important;
                max-width:620px;
        }
        body.woocommerce-account .wd-registration-page .col-register,
        body.woocommerce-account .wd-registration-page .col-login{width:100%;float:none}
}

@media (max-width:640px){
        body.woocommerce ul.products{gap:10px !important}
        body.woocommerce ul.products li.product .price,
        body.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12.5px}
        body.woocommerce-message,
        body.woocommerce-error,
        body.woocommerce-info,
        body.woocommerce .woocommerce-message{flex-direction:column;gap:8px;font-size:12px}
        .woocommerce .quantity input[type="number"]{min-height:40px}
        /* Cart totals: readable price rows. */
        body.woocommerce-cart .cart_totals .shop_table td,
        body.woocommerce-cart .cart_totals .shop_table th{font-size:12px;padding:8px 6px}
        /* Login card: phone-sized chrome. */
        body.woocommerce-account .wd-registration-page{border-radius:16px}
        body.woocommerce-account.woocommerce-login .woocommerce-form-login,
        body.woocommerce-account .woocommerce-form.woocommerce-form-login.login{padding:16px 14px}
}

@media (max-width:480px){
        body.woocommerce ul.products li.product .star-rating{font-size:11px}
        body.woocommerce div.product .woocommerce-tabs ul.tabs li{font-size:12px}
        body.woocommerce div.product p.price{font-size:24px}
}

/* ============================================================
 * 9. BLOG + SINGLE ARTICLE
 * ============================================================ */

@media (max-width:768px){
        .td-page .td-article-layout{grid-template-columns:1fr !important}
        .td-page .td-article-nav{grid-template-columns:1fr}
        .td-page .tdba-grid{grid-template-columns:1fr}
        .td-page .tdba-card--featured{grid-template-columns:1fr}
        .td-page .tdba-cta__inner{grid-template-columns:1fr;padding:24px 18px}
        .td-page .td-article-footer{flex-direction:column;align-items:flex-start;gap:10px}
        .td-page .td-article-hero__meta{flex-wrap:wrap;gap:8px;font-size:11.5px}
        .td-page .td-article-hero__author{flex-wrap:wrap;gap:10px}
        .td-page .td-article-side__toc{padding:14px 16px}
        .td-page .td-article-side__inner{padding:14px}
        .td-page .td-article-body{font-size:14.5px}
        .td-page .td-article-body pre,
        .td-page .td-article-body code{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre;padding:12px}
        .td-page .td-article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
        .td-page .td-article-hero__author{flex-direction:column;align-items:flex-start;gap:10px}
        .td-page .td-related__grid{grid-template-columns:1fr}
        .td-page .td-article-comments form,
        .td-page .td-article-comments .comment-form,
        .td-page .comment-form{grid-template-columns:1fr !important}
        .td-page blockquote{padding:12px 16px;font-size:13.5px}
}

@media (max-width:480px){
        .td-page .td-article-body h2{font-size:19px}
        .td-page .td-article-body h3{font-size:17px}
        .td-page .td-article-title{font-size:clamp(20px,6.4vw,24px)}
}

/* ============================================================
 * 10. PLUGIN COMPONENTS
 * ============================================================ */

/* ---- 10a. Chat (messages + conversations) ---- */
@media (max-width:768px){
        /* Full-height chat that respects dynamic viewport height (dvh)
           with a graceful vh fallback for older iOS Safari. */
        .tdp-chat-container{height:calc(100vh - 150px);height:calc(100dvh - 150px)}
        .tdp-chat-body{padding:12px 10px}
        .tdp-message-wrap{max-width:92%}
        .tdp-chat-header{padding:12px 14px}
        .tdp-chat-subheader{flex-wrap:wrap;gap:8px;font-size:11.5px}
        .tdp-chat-head-row{gap:10px}
        .tdp-conversations-list li a{padding:13px 12px}
        .tdp-conv-header{flex-wrap:wrap;gap:4px}
        /* Composer: attachments + input + send stack safely. */
        .tdp-chat-footer{padding:8px}
        .tdp-chat-form{gap:6px}
        .tdp-chat-form textarea{font-size:16px !important;min-height:44px}
        .tdp-attach-chips,
        .tdp-chip-row,
        .tdp-attach-list{flex-wrap:wrap;gap:6px}
        .tdp-support-bar{flex-basis:100%;max-width:none}
        .tdp-jump-latest{bottom:14px}
        .tdp-rec-label{font-size:11.5px}
        .tdp-icon-btn{width:40px;height:40px}
}

@media (max-width:480px){
        .tdp-chat-avatar{width:34px;height:34px;font-size:13px;flex:0 0 34px}
        .tdp-message-wrap{max-width:94%}
        .tdp-chat-container{height:calc(100vh - 130px);height:calc(100dvh - 130px)}
        .tdp-ask-instructor{margin:16px 0}
}

/* ---- 10b. Exams ---- */
@media (max-width:768px){
        .tdp-exam-container{padding:14px}
        .tdp-exam-header{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
        .tdp-exam-header h2,
        .tdp-exam-header .tdp-exam-title{font-size:17px;margin:0}
        .tdp-global-timer{
                position:sticky;top:64px;z-index:30;
                width:100%;text-align:center;font-size:14px;
                padding:10px 12px;border-radius:10px;
        }
        .tdp-exam-meta{flex-wrap:wrap;gap:8px;font-size:11.5px}
        .tdp-exam-taking{padding:12px}
        .tdp-question-card{padding:16px 14px}
        .tdp-question-header{flex-wrap:wrap;gap:8px}
        .tdp-question-body{font-size:15px}
        .tdp-mcq-choice{
                display:flex;align-items:center;gap:10px;
                padding:12px;min-height:48px;font-size:14px;
                border-radius:10px;
        }
        .tdp-mcq-choice input[type="radio"],
        .tdp-mcq-choice input[type="checkbox"]{flex:none;width:18px;height:18px}
        .tdp-btn{min-height:44px;justify-content:center}
        .tdp-exam-actions{flex-wrap:wrap;gap:8px}
        .tdp-exam-actions .tdp-btn{flex:1 1 auto}
        .tdp-exam-result{padding:16px}
        .tdp-exam-rules{padding:14px 16px}
        .tdp-exam-rules li{font-size:13px}
        .tdp-ie-form-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
        .tdp-exam-intro{padding:16px}
}

@media (max-width:480px){
        .tdp-global-timer{font-size:13px;padding:8px 10px}
        .tdp-question-card{padding:14px 12px}
        .tdp-exam-container{padding:10px}
        .tdp-exam-header{padding:12px}
}

/* ---- 10c. Affiliate dashboard ---- */
@media (max-width:768px){
        .tdp-affiliate-dashboard{padding:16px 12px}
        .tdp-stats-grid{grid-template-columns:1fr 1fr !important}
        .tdp-stat-card,
        .tdp-stats-grid > *{padding:14px;min-width:0}
        .tdp-chart-grid{grid-template-columns:1fr !important}
        .tdp-chart-box{padding:14px;min-width:0}
        .tdp-chart-canvas{max-width:100% !important;height:auto !important}
        .tdp-app-summary{grid-template-columns:1fr 1fr}
        .tdp-flex-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
        .tdp-aff-identity-grid{grid-template-columns:1fr}
        .tdp-aff-app-fields .tdp-form-row{flex-direction:column;align-items:stretch}
        .tdp-affiliate{padding:0}
        .tdp-become-affiliate{padding:16px}
        .tdp-feature-card{padding:16px}
}

@media (max-width:480px){
        .tdp-stats-grid{grid-template-columns:1fr !important}
        .tdp-app-summary{grid-template-columns:1fr}
        .tdp-affiliate-dashboard{padding:12px 8px}
}

/* ---- 10d. Wallet (account funds / withdrawal / addresses) ----
 * The Wallet endpoints are restyled by wallet-refresh.css via the
 * body.woocommerce-endpoint-* classes — mirror those hooks here. */
@media (max-width:768px){
        body.woocommerce-endpoint-account-funds .woocommerce-MyAccount-content,
        body.woocommerce-endpoint-withdrawal_requests .woocommerce-MyAccount-content,
        body.woocommerce-endpoint-wallet_addresses .woocommerce-MyAccount-content{padding:14px 12px}
        body.woocommerce-endpoint-account-funds table,
        body.woocommerce-endpoint-withdrawal_requests table,
        body.woocommerce-endpoint-wallet_addresses table{
                display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
                white-space:nowrap;max-width:100%;
        }
        body.woocommerce-endpoint-account-funds table th,
        body.woocommerce-endpoint-account-funds table td,
        body.woocommerce-endpoint-withdrawal_requests table th,
        body.woocommerce-endpoint-withdrawal_requests table td,
        body.woocommerce-endpoint-wallet_addresses table th,
        body.woocommerce-endpoint-wallet_addresses table td{white-space:nowrap}
        body.woocommerce-endpoint-withdrawal_requests .form-row,
        body.woocommerce-endpoint-wallet_addresses .form-row,
        body.woocommerce-endpoint-account-funds .form-row{width:100% !important;float:none !important;margin-left:0 !important;margin-right:0 !important}
        body.woocommerce-endpoint-account-funds .woocommerce-MyAccount-content > div,
        body.woocommerce-endpoint-withdrawal_requests .woocommerce-MyAccount-content > div,
        body.woocommerce-endpoint-wallet_addresses .woocommerce-MyAccount-content > div{padding:16px 14px}
        body.woocommerce-endpoint-account-funds .woocommerce-Price-amount,
        body.woocommerce-endpoint-withdrawal_requests .woocommerce-Price-amount,
        body.woocommerce-endpoint-wallet_addresses .woocommerce-Price-amount{font-size:22px}
}

/* ---- 10e. Certificates ---- */
@media (max-width:768px){
        .tdp-certificate{min-width:0;padding:10px}
        .tdp-cert-meta{flex-wrap:wrap;gap:8px}
        .tdp-cert-meta-item{min-width:44%}
        .tdp-cert-header{flex-wrap:wrap;gap:10px}
        .tdp-cert-signatures{flex-wrap:wrap;gap:12px}
        .tdp-cert-signature-block{min-width:44%}
        .tdp-cert-share{flex-wrap:wrap;gap:8px}
        .tdp-cert-title{font-size:clamp(18px,5.5vw,26px)}
        .tdp-cert-student-name{font-size:clamp(16px,5vw,24px)}
        .tdp-cert-qr-img{width:96px;height:96px}
}

@media (max-width:480px){
        .tdp-cert-meta-item{min-width:100%}
        .tdp-cert-signature-block{min-width:100%}
        .tdp-cert-org-name{font-size:13px}
}

/* ---- 10f. Geo modal + modals + toasts ---- */
@media (max-width:640px){
        .tdp-geo-modal,
        .tdp-modal,
        .modal,
        .td-ui-modal{max-width:94vw !important;margin:0 auto}
        .tdp-geo-modal .tdp-form-row,
        .tdp-geo-modal label{width:100%}
        /* jquery.modal panels: fit the phone. */
        .modal{padding:14px !important}
        .jquery-modal.blocker{padding:10px}
        .tdp-ui-sheet{width:94vw !important}
}

@media (max-width:480px){
        .tdp-geo-modal,
        .tdp-modal,
        .modal{max-width:96vw !important}
        .td-toast,
        .tdp-toast,
        .jq-toast-wrap{max-width:92vw !important;left:4vw !important;right:4vw !important}
        .jq-toast-single{width:100% !important}
}

/* ---- 10g. Outreach CRM ---- */
@media (max-width:768px){
        .tdp-dashboard-grid,
        .tdp-lead-detail-grid{grid-template-columns:1fr !important}
        .tdp-outreach{padding:12px}
        .tdp-flex-row{flex-direction:column;align-items:stretch;gap:8px}
        .tdp-lead-detail-grid .tdp-flex-table{overflow-x:auto}
}

/* ============================================================
 * 11. TOUCH TARGETS + SAFE AREAS + MOTION
 * ============================================================ */

/* Comfortable tap targets on touch screens only. */
@media (hover:none) and (pointer:coarse){
        .td-page .btn{min-height:42px}
        .td-page .navlinks.is-open > a{min-height:44px}
        .td-page .accordion summary{min-height:44px}
        .td-page .faq-q{min-height:44px}
        .td-page .td-az-filter .az-pill{min-width:32px;min-height:32px}
        .tdp-mcq-choice{min-height:48px}
        body.woocommerce-account .woocommerce-MyAccount-navigation li a{min-height:40px}
}

/* iOS notch / home-bar safe areas. */
@supports (padding:env(safe-area-inset-bottom)){
        @media (max-width:768px){
                .td-page footer#site-footer .bottom{
                        padding-bottom:calc(12px + env(safe-area-inset-bottom));
                }
                .td-page .sticky-bar{
                        padding-bottom:calc(10px + env(safe-area-inset-bottom));
                }
        }
}

/* Respect reduced motion: marquee + reveal animations stop. */
@media (prefers-reduced-motion:reduce){
        .td-page .logo-marquee-track{animation:none !important}
        .td-reveal{transition:none !important;opacity:1 !important;transform:none !important}
}

/* Never let the mobile layer affect print. */
@media print{
        .td-mobile-force{display:none}
}