:root {
    --orange: #2563eb;
    --orange-d: #1d4ed8;
    --indigo: #1e293b;
    --bg: #f7f8fb;
    --text: #475569;
    --heading: #0f172a;
    --ink: #0f172a;
    --card: #fff;
    --line: #e6e9ef;
    --muted: #94a3b8;
    --green: #1f9d6b;
    --radius: 8px;
    --shadow:
        0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.05);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}
body {
    margin: 0;
    font-family:
        "Source Sans Pro",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
h1,
h2,
h3,
h4 {
    color: var(--heading);
    font-weight: 700;
}
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
.ann {
    background: var(--indigo);
    color: #fff;
    font-size: 13.5px;
    text-align: center;
    padding: 9px 14px;
    font-weight: 600;
}
/* Scope to the top-level site header only. A bare `header {}` also caught
   nested <header> elements (e.g. the contact form's heading), painting them
   as a white sticky bar. The site header is a direct child of <body>. */
body > header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.bar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 68px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
    font-size: 21px;
    color: var(--ink);
}
.logo .mk {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--orange);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 17px;
}
.logo b {
    color: var(--orange);
}
form.search {
    flex: 1;
    position: relative;
    max-width: 520px;
}
form.search input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 16px 0 42px;
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    outline: none;
}
form.search input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}
form.search svg {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 18px;
    height: 18px;
    stroke: var(--muted);
}
.cartbtn {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    color: var(--ink);
    font-weight: 700;
    font-size: 14.5px;
}
.cartbtn svg {
    width: 22px;
    height: 22px;
    stroke: var(--ink);
}
.cartbtn .cnt {
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 800;
}
.cartbtn .amt {
    color: var(--muted);
    font-weight: 600;
}
/* offer strip */
.offer {
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
}
.offer-in {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    flex-wrap: wrap;
}
.offer-l {
    font-size: 13.5px;
}
.offer-l b {
    color: var(--orange-d);
}
.coupons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.coupon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px dashed var(--orange);
    background: #fff;
    border-radius: 6px;
    padding: 5px 11px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.15;
}
.coupon span {
    font-weight: 800;
    color: var(--orange-d);
    font-size: 13px;
    letter-spacing: 0.03em;
}
.coupon small {
    color: var(--muted);
    font-size: 11px;
}
.coupon:hover {
    background: #eff6ff;
}
.cd {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
}
.cd b {
    color: var(--orange-d);
}
/* hero */
.hero {
    background: linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
    border-bottom: 1px solid var(--line);
}
.hero .wrap {
    padding: 50px 20px 14px;
    text-align: center;
}
.eyebrow {
    display: inline-block;
    background: #eff6ff;
    color: var(--orange-d);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.12;
    margin: 0 auto 14px;
    max-width: 820px;
    font-weight: 900;
}
.hero h1 .hl {
    color: var(--orange);
}
.hero p {
    max-width: 600px;
    margin: 0 auto 24px;
    font-size: 17px;
}
.cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15.5px;
    font-family: inherit;
    cursor: pointer;
    border: 0;
}
.btn-o {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.btn-o:hover {
    background: var(--orange-d);
}
.btn-line {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--ink);
}
.btn-line:hover {
    background: var(--ink);
    color: #fff;
}
.hstats {
    display: flex;
    gap: 34px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px 0 8px;
}
.hstats div b {
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: var(--heading);
}
.hstats div span {
    font-size: 13px;
    color: var(--muted);
}
p.whyaff {
    font-size: 13.5px;
    color: var(--text);
    margin: 18px auto 0;
    max-width: 560px;
    opacity: 0.9;
}
.whybox {
    font-size: 13px;
    color: var(--text);
    background: #f3faf6;
    border: 1px solid #cdeede;
    border-radius: 6px;
    padding: 9px 12px;
    margin: 12px 0 0;
    line-height: 1.45;
}
.legal {
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 0 10px;
}
.legal h1 {
    font-size: 30px;
    margin: 0 0 6px;
}
.legal .upd {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 24px;
}
.legal h3 {
    font-size: 18px;
    margin: 26px 0 8px;
    color: var(--heading);
}
.legal p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.legal ul {
    margin: 0 0 14px;
    padding-left: 22px;
}
.legal li {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.6;
}
.legal a {
    color: var(--orange-d);
    font-weight: 600;
}
.rev-list {
    text-align: left;
    margin: 8px 0 4px;
}
.rev {
    border-top: 1px solid var(--line);
    padding: 14px 2px;
}
.rev-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.rev-h b {
    color: var(--heading);
}
.rev-s {
    color: #e7b65a;
    letter-spacing: 1px;
}
.rev p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
.rev-form {
    margin: 14px auto 0;
    text-align: left;
    max-width: 540px;
}
.rf-row {
    margin-bottom: 10px;
}
.rev-form input,
.rev-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.rev-form input:focus,
.rev-form textarea:focus {
    border-color: var(--orange);
}
.rf-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    color: var(--muted);
}
.rf-stars span {
    font-size: 24px;
    color: #e7b65a;
    cursor: pointer;
    line-height: 1;
}
.rev-msg {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--green);
    font-weight: 600;
}
/* trust band */
.trustband {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.trustband .wrap {
    display: flex;
    justify-content: space-around;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
}
.tb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--heading);
}
.tb i {
    font-style: normal;
    font-size: 18px;
}
section.block {
    padding: 54px 0 4px;
}
.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 14px;
    flex-wrap: wrap;
}
.head h2 {
    font-size: 25px;
    margin: 0;
    position: relative;
    padding-bottom: 10px;
}
.head h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    background: var(--orange);
    border-radius: 3px;
}
.head .sub {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
}
.sortwrap select {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
    color: var(--ink);
}
.countlbl {
    color: var(--muted);
    font-size: 13.5px;
    margin-right: 10px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.16s;
    position: relative;
}
.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.thumb {
    aspect-ratio: 1/1;
    background: #eef2f7;
    overflow: hidden;
    position: relative;
    display: block;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: 0.3s;
}
.card:hover .thumb img {
    transform: scale(1.03);
}
.thumb .sale {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--orange);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 11px;
    border-bottom-right-radius: 8px;
    z-index: 2;
}
.typeflag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 4px;
}
.cbody {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cat-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}
.title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.36;
    margin: 0 0 9px;
    color: var(--heading);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
}
.stars {
    color: #e7b65a;
    font-size: 13px;
    margin-bottom: 9px;
    letter-spacing: 1px;
}
.stars small {
    color: var(--muted);
    margin-left: 5px;
    letter-spacing: 0;
    font-size: 12px;
}
.price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    flex-wrap: wrap;
}
.price .now {
    font-size: 19px;
    font-weight: 800;
    color: var(--orange);
}
.price .was {
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: line-through;
}
.saveline {
    color: var(--green);
    font-weight: 700;
    font-size: 12.5px;
    margin-top: 3px;
}
.add {
    margin-top: 12px;
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: 0.14s;
}
.add:hover {
    background: var(--orange);
}
.empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
/* specialty tiles */
.specs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.spec {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: 0.14s;
}
.spec:hover {
    border-color: var(--orange);
    background: #fff;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.spec b {
    display: block;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}
.spec span {
    font-size: 12px;
    color: var(--orange-d);
    font-weight: 700;
}
/* guarantee */
.guarantee {
    display: flex;
    gap: 18px;
    align-items: center;
    background: #f3faf6;
    border: 1px solid #cdeede;
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 36px 0 0;
}
.guarantee .g-ic {
    font-size: 34px;
    flex: none;
}
.guarantee b {
    display: block;
    color: var(--heading);
    font-size: 17px;
    margin-bottom: 3px;
}
.guarantee p {
    margin: 0;
    font-size: 14.5px;
}
/* faq */
.faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px 18px;
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
    padding: 15px 0;
    list-style: none;
    position: relative;
    font-size: 15px;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary:after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 13px;
    font-size: 22px;
    color: var(--orange);
    font-weight: 400;
}
.faq details[open] summary:after {
    content: "–";
}
.faq details > div {
    padding: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.6;
}
/* capture */
.capture {
    margin: 40px 0 0;
    background: linear-gradient(120deg, #0f172a, #1e293b);
    border-radius: var(--radius);
    padding: 30px 34px;
}
.cap-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cap-in b {
    color: #fff;
    font-size: 19px;
    display: block;
    margin-bottom: 4px;
}
.cap-in p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}
.cap-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.cap-form input {
    height: 48px;
    border: 0;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 14.5px;
    font-family: inherit;
    min-width: 230px;
}
.cap-done {
    display: none;
    color: #dbeafe;
    font-size: 13px;
    width: 100%;
}
.cap-done em {
    color: #94a3b8;
}
/* product */
.crumb {
    font-size: 13.5px;
    color: var(--muted);
    padding: 16px 0 0;
}
.crumb a:hover {
    color: var(--orange);
}
.pwrap {
    display: grid;
    /* Right track is minmax(0,1fr), NOT 1fr: a bare 1fr track's automatic
       minimum is its content's min-content, so a long unbreakable cross-sell
       course title (white-space:nowrap) would inflate the right column and
       shrink the gallery. Flooring the min at 0 keeps the gallery at 430px and
       lets those titles truncate inside their own column. */
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: 42px;
    padding: 22px 0 10px;
}
.gallery {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    position: sticky;
    top: 88px;
    align-self: start;
}
.gallery img {
    width: 100%;
    object-fit: contain;
    max-height: 520px;
    border-radius: 4px;
    display: block;
}
.gbadge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 30px;
}
.psum h1 {
    font-size: 29px;
    line-height: 1.2;
    margin: 6px 0 12px;
}
.pcat {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.pstars {
    color: #e7b65a;
    font-size: 15px;
    margin-bottom: 16px;
}
.pstars small {
    color: var(--muted);
    font-size: 13px;
    margin-left: 6px;
}
.pricebox {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.pprice {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.pprice .now {
    font-size: 34px;
    font-weight: 900;
    color: var(--orange);
}
.pprice .was {
    font-size: 18px;
    color: var(--muted);
    text-decoration: line-through;
}
.pprice .save {
    background: var(--green);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 20px;
}
.couponhint {
    font-size: 13px;
    color: var(--ink);
    margin: 10px 0 0;
    background: #eff6ff;
    border: 1px dashed var(--orange);
    border-radius: 6px;
    padding: 8px 12px;
}
.couponhint b {
    color: var(--orange-d);
}
.taxnote {
    font-size: 12.5px;
    color: var(--muted);
    margin: 14px 0 0;
}
.pbuy {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 0;
}
.pbuy .btn {
    height: 54px;
    flex: 1;
    min-width: 200px;
}
.whatyou {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 16px 0 0;
}
.whatyou h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 12px;
}
.feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--heading);
    font-weight: 600;
}
.feat i {
    font-style: normal;
    font-size: 18px;
}
.assure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 0;
}
.assure div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px;
    font-size: 12px;
    text-align: center;
    color: var(--text);
}
.assure b {
    display: block;
    color: var(--heading);
    font-size: 12.5px;
    margin-bottom: 2px;
}
.meta {
    font-size: 13px;
    color: var(--muted);
    margin-top: 16px;
}
.meta span {
    color: var(--heading);
    font-weight: 600;
}
.pdesc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 34px;
    margin: 0;
}
.pdesc h2 {
    font-size: 25px;
    margin: 0 0 16px;
    position: relative;
    padding-bottom: 10px;
}
.pdesc h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    background: var(--orange);
    border-radius: 3px;
}
.pdesc p {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 1.7;
}
.pdesc ul {
    margin: 0 0 16px;
    padding-left: 6px;
    list-style: none;
}
.pdesc li {
    margin: 7px 0;
    font-size: 15px;
    padding-left: 26px;
    position: relative;
}
.pdesc li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
/* reviews empty */
.reviews {
    padding: 10px 0 30px;
    margin: 0;
    text-align: center;
}
.reviews .big {
    font-size: 40px;
}
.reviews b {
    display: block;
    color: var(--heading);
    font-size: 17px;
    margin: 6px 0 4px;
}
.reviews p {
    margin: 0 0 14px;
    font-size: 14px;
}
/* sticky buy */
.stickybuy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    transition: 0.22s;
    z-index: 60;
}
.stickybuy.on {
    transform: translateY(0);
}
.sb-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.sb-in img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    flex: none;
}
.sb-t {
    font-weight: 700;
    font-size: 14px;
    color: var(--heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.sb-p {
    font-weight: 900;
    color: var(--orange);
    font-size: 20px;
    white-space: nowrap;
}
.sb-p small {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 600;
    margin-left: 6px;
}
.sb-in .btn {
    height: 46px;
}
.props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.prop {
    padding: 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-right: 1px solid var(--line);
}
.prop:last-child {
    border-right: 0;
}
.prop .ic {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--orange);
    display: grid;
    place-items: center;
    font-size: 21px;
    flex: none;
}
.prop b {
    display: block;
    color: var(--heading);
    font-size: 15px;
    margin-bottom: 2px;
}
.prop p {
    margin: 0;
    font-size: 13.5px;
}
footer {
    margin-top: 50px;
    background: #0f172a;
    color: #94a3b8;
    padding: 48px 0 26px;
}
.fcols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
}
footer h4 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px;
}
footer a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: #94a3b8;
}
footer a:hover {
    color: var(--orange);
}
.fbtm {
    border-top: 1px solid #1e293b;
    margin-top: 32px;
    padding-top: 18px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    max-width: calc(100vw - 32px);
    text-align: center;
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s;
    z-index: 120;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}
.toast.on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cartbtn {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 33, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    z-index: 90;
}
.scrim.on {
    opacity: 1;
    pointer-events: auto;
}
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 392px;
    max-width: 92vw;
    background: #fff;
    z-index: 100;
    transform: translateX(100%);
    transition: 0.25s;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}
.drawer.on {
    transform: translateX(0);
}
.dhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.dhead b {
    font-size: 17px;
    color: var(--heading);
}
.dx {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}
.ditems {
    flex: 1;
    overflow: auto;
    padding: 4px 0;
}
.dempty {
    text-align: center;
    color: var(--muted);
    padding: 50px 20px;
    font-size: 14px;
}
.di {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.di img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    flex: none;
}
.dii {
    flex: 1;
    min-width: 0;
}
.din {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dip {
    font-size: 13.5px;
    color: var(--orange);
    font-weight: 800;
    margin-bottom: 6px;
}
.qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.qty button {
    width: 26px;
    height: 26px;
    border: 0;
    background: #eef2f7;
    cursor: pointer;
    font-size: 15px;
    color: var(--ink);
}
.qty span {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}
.dirm {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: 0;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
}
.dfoot {
    padding: 18px 20px;
    border-top: 1px solid var(--line);
}
.dtot {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 18px;
    color: var(--heading);
    margin-bottom: 14px;
}
.dnote {
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}
.upsell {
    background: #eff6ff;
    border: 1px dashed var(--orange);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.45;
}
.upsell b {
    color: var(--orange-d);
}
.upsell small {
    color: var(--muted);
}
.upsell.ok {
    background: #eef9f3;
    border-color: #9adcc0;
}
.upsell.ok b {
    color: var(--green);
}
.upbar {
    height: 6px;
    background: #e6e9ef;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.upbar i {
    display: block;
    height: 100%;
    background: var(--orange);
    border-radius: 4px;
    transition: 0.3s;
}
.dsug {
    padding: 2px 20px;
}
.dsug h5 {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 10px 0 4px;
}
.sug {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
.sug img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    flex: none;
}
.sug .sn {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sug .sp {
    font-size: 12.5px;
    color: var(--orange);
    font-weight: 800;
}
.sug .addq {
    border: 1px solid var(--orange);
    background: #fff;
    color: var(--orange-d);
    font-weight: 700;
    font-size: 12px;
    border-radius: 5px;
    padding: 5px 9px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.sug .addq:hover {
    background: var(--orange);
    color: #fff;
}
/* bundles */
.bnav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 7px 14px;
    border-radius: 30px;
}
.bnav:hover {
    background: var(--orange);
}
.bundles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.bundle {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bundle-h {
    padding: 20px 22px 14px;
}
.bundle-h h3 {
    font-size: 19px;
    margin: 0 0 6px;
}
.bundle-h p {
    margin: 0;
    font-size: 14px;
    color: var(--text);
}
.bundle-items {
    padding: 6px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bi {
    display: flex;
    gap: 10px;
    align-items: center;
}
.bi img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 5px;
    flex: none;
    background: #fff;
}
.bi .bn {
    font-size: 12.5px;
    color: var(--heading);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bi .bp {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--orange);
    font-weight: 800;
    white-space: nowrap;
}
.bundle-f {
    margin-top: auto;
    padding: 16px 22px 20px;
}
.bundle-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.bundle-price .now {
    font-size: 24px;
    font-weight: 900;
    color: var(--orange);
}
.bundle-price .was {
    font-size: 15px;
    color: var(--muted);
    text-decoration: line-through;
}
.bundle-price .save {
    background: var(--green);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 20px;
}
.bundle-elig {
    font-size: 12px;
    color: var(--ink);
    margin: 4px 0 12px;
    background: #eff6ff;
    border: 1px dashed var(--orange);
    border-radius: 6px;
    padding: 7px 10px;
}
.bundle-elig b {
    color: var(--orange-d);
}
.byob {
    background: linear-gradient(120deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 12px;
    padding: 30px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.byob b {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
}
.byob p {
    margin: 0;
    color: #dbeafe;
    font-size: 14.5px;
}
.byob .btn {
    background: #fff;
    color: var(--orange-d);
    height: 50px;
}
/* builder */
.bld-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-bottom: 130px;
}
.bld {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: 0.14s;
    display: flex;
    flex-direction: column;
}
.bld:hover {
    border-color: #c7dbfa;
}
.bld.sel {
    border-color: var(--orange);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
}
.bld .bthumb {
    aspect-ratio: 1/1;
    background: #eef2f7;
    display: block;
}
.bld .bthumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.bld .bb {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bld .bt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
    margin-bottom: 6px;
}
.bld .bpr {
    font-size: 14px;
    font-weight: 800;
    color: var(--orange);
    margin-top: auto;
}
.bld .bpr small {
    color: var(--muted);
    text-decoration: line-through;
    font-weight: 600;
    font-size: 11.5px;
    margin-left: 4px;
}
.bld .check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--line);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    transition: 0.14s;
}
.bld.sel .check {
    background: var(--orange);
    border-color: var(--orange);
}
.tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    z-index: 70;
    transform: translateY(115%);
    transition: 0.24s;
}
.tray.on {
    transform: translateY(0);
}
.tray-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.tray .tcount {
    font-weight: 800;
    color: var(--heading);
    white-space: nowrap;
}
.tray .tbar {
    flex: 1;
    min-width: 180px;
}
.tray .tmsg {
    font-size: 12.5px;
    color: var(--ink);
    margin-bottom: 5px;
}
.tray .tmsg b {
    color: var(--orange-d);
}
.tray .ttot {
    font-size: 21px;
    font-weight: 900;
    color: var(--orange);
    white-space: nowrap;
}
.tray .btn {
    height: 48px;
}
@media (max-width: 900px) {
    .bundles-grid {
        grid-template-columns: 1fr;
    }
    .bld-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .specs {
        grid-template-columns: repeat(3, 1fr);
    }
    .pwrap {
        /* minmax(0,1fr), not 1fr: same reason as the desktop rule — a bare 1fr
           track's min is its content's min-content, so the long nowrap
           same-bundle course titles would blow the single column past the
           viewport and cause horizontal scroll. */
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    .gallery {
        position: static;
    }
    .props,
    .assure,
    .feats {
        grid-template-columns: 1fr;
    }
    .assure {
        grid-template-columns: repeat(3, 1fr);
    }
    .fcols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    form.search {
        display: none;
    }
    .title {
        min-height: auto;
    }
    .cd {
        display: none;
    }
    .cap-in {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 520px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
    }
    .specs {
        grid-template-columns: repeat(2, 1fr);
    }
    .sb-t {
        display: none;
    }
    .feats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   UI polish additions — icons, nav drawer, chips, states
   ============================================================ */

/* --- inline SVG icons --- */
.i {
    width: 1.05em;
    height: 1.05em;
    display: inline-block;
    vertical-align: -0.16em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.ann .i,
.eyebrow .i {
    width: 15px;
    height: 15px;
    vertical-align: -0.2em;
}
.offer-l .i {
    color: var(--orange-d);
    vertical-align: -0.18em;
}
.tb .i {
    width: 20px;
    height: 20px;
    color: var(--orange);
}
.prop .ic .i {
    width: 22px;
    height: 22px;
}
.g-ic .i {
    width: 30px;
    height: 30px;
    color: var(--green);
}
.byob b .i {
    width: 18px;
    height: 18px;
    vertical-align: -0.22em;
}
.btn .i {
    width: 17px;
    height: 17px;
    vertical-align: -0.2em;
}
footer .i {
    width: 15px;
    height: 15px;
    vertical-align: -0.14em;
    margin-right: 5px;
    color: var(--orange);
}
.fbtm .i,
.dnote .i {
    width: 13px;
    height: 13px;
    vertical-align: -0.12em;
}

/* --- announcement bar layout --- */
.ann-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ann .ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 640px) {
    .ann-in {
        gap: 9px;
        font-size: 12px;
    }
    .ann .ai-hide {
        display: none;
    }
}

/* --- empty review rating --- */
.stars {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.stars small {
    margin-left: 0;
}
.stars.none {
    color: #cbd5e1;
}

/* --- category chips (were unstyled native buttons) --- */
.cats .wrap {
    gap: 8px;
}
/* Primary chip nav rendered by wp_nav_menu (or the chip fallback): the <ul>
   is the horizontal scroll rail; each <li> just wraps an a.chip pill. */
.cats-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Hide the horizontal scrollbar/indicator while keeping scroll usable. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge/IE */
}
.cats-menu::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, new Edge */
}
.cats-menu > li {
    flex: none;
    margin: 0;
    list-style: none;
}
a.chip,
button.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    color: var(--heading);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.14s;
    text-decoration: none;
}
a.chip:hover {
    border-color: var(--orange);
    color: var(--orange-d);
    background: #eff6ff;
}
a.chip.on {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
a.chip.on:hover {
    background: var(--orange-d);
    border-color: var(--orange-d);
    color: #fff;
}

/* --- mobile hamburger --- */
.navtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    flex: none;
    transition: 0.14s;
}
.navtoggle:hover {
    border-color: var(--orange);
    color: var(--orange-d);
}
.navtoggle .i {
    width: 22px;
    height: 22px;
}

/* --- slide-out nav drawer (left) --- */
.navdrawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 330px;
    max-width: 88vw;
    background: #fff;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 12px 0 44px rgba(15, 23, 42, 0.16);
}
.navdrawer.on {
    transform: translateX(0);
}
.ndhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    flex: none;
}
.ndsearch {
    position: relative;
    padding: 14px 16px 8px;
    flex: none;
}
.ndsearch input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 14px 0 42px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    background: var(--bg);
    color: var(--ink);
}
.ndsearch input:focus {
    border-color: var(--orange);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}
.ndsearch .i {
    position: absolute;
    left: 30px;
    top: 26px;
    width: 18px;
    height: 18px;
    color: var(--muted);
}
.ndnav {
    flex: 1;
    overflow: auto;
    padding: 4px 10px 10px;
}
.ndlabel {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 15px 12px 5px;
}
.ndnav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--heading);
    transition: 0.13s;
}
.ndnav a .ndico {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex: none;
}
.ndnav a .cnt {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}
.ndnav a:hover,
.ndnav a:focus-visible {
    background: #eff6ff;
    color: var(--orange-d);
    outline: none;
}
.ndnav a:hover .ndico,
.ndnav a:hover .cnt {
    color: var(--orange);
}
.ndcoupons {
    border-top: 1px solid var(--line);
    padding: 13px 16px 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: none;
}

/* --- micro-interactions & focus states --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-radius: 4px;
}
.card:focus-within {
    box-shadow: var(--shadow);
}
.btn,
.add,
.chip,
.coupon,
.cartbtn,
.navtoggle {
    -webkit-tap-highlight-color: transparent;
}
.btn:active,
.add:active,
.navtoggle:active {
    transform: translateY(1px);
}
.coupon:active {
    transform: scale(0.98);
}
.spec:active {
    transform: translateY(0);
}

/* --- mobile density --- */
@media (max-width: 900px) {
    .navtoggle {
        display: flex;
    }
    .cats {
        display: none;
    }
    .offer .coupons {
        display: none;
    }
    .offer-in {
        padding: 9px 20px;
    }
}
@media (max-width: 640px) {
    .ann {
        padding: 8px 12px;
    }
    .bar {
        height: 60px;
        gap: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Phase 2 — add-to-cart, bundle collage, dedicated bundle page
   ============================================================ */

/* add-to-cart button (was "View Course" link) */
.add {
    width: 100%;
}
.add .i {
    width: 18px;
    height: 18px;
}
.add.added {
    background: var(--green);
}
.add.added:hover {
    background: var(--green);
}

/* homepage bundle collage cards */
.bundle-card .bcollage {
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    background: var(--line);
    padding: 3px;
}
.bundle-card .bcollage > span {
    background: #eef2f7 center/cover no-repeat;
    border-radius: 4px;
    transition: 0.2s;
}
.bundle-card .bcollage .more {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--orange), var(--orange-d));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    line-height: 1.15;
}
.bundle-card:hover .bcollage > span {
    filter: brightness(0.97);
}

/* quick-view: centered modal on desktop, bottom sheet on mobile */
.qv-scrim {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 33, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    z-index: 110;
}
.qv-scrim.on {
    opacity: 1;
    pointer-events: auto;
}
.qv {
    position: fixed;
    z-index: 115;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: 0.22s;
    width: 520px;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}
.qv.on {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.qv-img {
    background: #eef2f7;
    display: grid;
    place-items: center;
    padding: 18px;
    flex: none;
}
.qv-img img {
    max-height: 200px;
    object-fit: contain;
}
.qv-b {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.qv .pcat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.qv h3 {
    font-size: 19px;
    margin: 0 0 12px;
    line-height: 1.28;
}
.qv .qv-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    flex: none;
}
.qv .qv-price .now {
    font-size: 26px;
    font-weight: 900;
    color: var(--orange);
}
.qv .qv-price .was {
    font-size: 15px;
    color: var(--muted);
    text-decoration: line-through;
}
.qv .qv-price .save {
    background: var(--green);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 20px;
}
.qv-desc {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
    padding: 12px 4px 14px 0;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}
.qv-desc h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 8px;
}
.qv-desc p {
    margin: 0 0 10px;
}
.qv-desc ul {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}
.qv-desc li {
    margin: 6px 0;
    padding-left: 24px;
    position: relative;
}
.qv-desc li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
.qv-desc .demo-note {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    margin: 6px 0 0;
}
.qv-desc::-webkit-scrollbar {
    width: 8px;
}
.qv-desc::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}
.qv-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: none;
}
.qv-btns .btn {
    flex: 1;
    min-width: 150px;
    height: 48px;
}
.qvx {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
    z-index: 2;
}
@media (max-width: 640px) {
    .qv {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translateY(100%);
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
    }
    .qv.on {
        transform: translateY(0);
    }
    .qv-img {
        padding: 14px;
    }
    .qv-img img {
        max-height: 130px;
    }
}

/* bundle-page course cards: quick toggle chip */
.bld .qadd {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    color: var(--muted);
    font-size: 17px;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.14s;
    z-index: 2;
    padding: 0;
    line-height: 1;
}
.bld.sel .qadd {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.bld .qadd:hover {
    border-color: var(--orange);
    color: var(--orange-d);
}
.bld.sel .qadd:hover {
    color: #fff;
}
.bld {
    cursor: pointer;
}
.bld .bthumb {
    cursor: pointer;
}

/* bundle page header */
.bundle-head .cat-tag {
    margin-bottom: 2px;
}

.bundle-card .thumb-link {
    display: block;
}
.add-bundle {
    background: #fff;
    color: var(--orange-d);
    border: 1.5px solid var(--orange);
    margin-top: 8px;
}
.add-bundle:hover {
    background: var(--orange);
    color: #fff;
}

/* ============================================================
   Auto-applied coupons — Temu-style cart summary & unlock FX
   ============================================================ */
.tierban {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(120deg, #eef9f3, #dbf1e6);
    border: 1px solid #9adcc0;
    border-radius: 11px;
    padding: 10px 12px;
    margin-bottom: 10px;
    animation: tierpop 0.3s ease;
}
.tierban .tb-ic {
    font-size: 20px;
    flex: none;
}
.tierban .tb-t {
    min-width: 0;
}
.tierban .tb-t b {
    display: block;
    color: var(--green);
    font-size: 13.5px;
    line-height: 1.2;
}
.tierban .tb-t small {
    color: var(--text);
    font-size: 11.5px;
}
.tierban .tb-off {
    margin-left: auto;
    font-weight: 900;
    color: var(--green);
    font-size: 15px;
    white-space: nowrap;
}
.tiernext {
    font-size: 12.5px;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.4;
}
.tiernext b {
    color: var(--orange-d);
}
.tiernext.maxed {
    color: var(--orange-d);
    font-weight: 700;
}
.sumrows {
    margin-bottom: 10px;
}
.sumrow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--text);
    padding: 3px 0;
}
.sumrow.disc {
    color: var(--green);
    font-weight: 700;
}
@keyframes tierpop {
    0% {
        transform: scale(0.96);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* celebratory toast */
.toast.cel {
    background: linear-gradient(120deg, #1f9d6b, #1d4ed8);
    font-size: 15px;
    font-weight: 800;
    padding: 14px 26px;
    box-shadow: 0 10px 34px rgba(31, 157, 107, 0.4);
}
/* cart badge pulse on add */
@keyframes cntpulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.55);
    }
    100% {
        transform: scale(1);
    }
}
.cartbtn .cnt.pulse {
    animation: cntpulse 0.45s ease;
}

.cart-flyer {
    position: fixed;
    z-index: 200;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
    pointer-events: none;
    background: #fff;
    padding: 2px;
}

.bundle-card .title {
    min-height: 0;
}
.bundle-card .bundle-sub {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 11px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .grid.grid-bundles {
        grid-template-columns: 1fr;
    }
}

/* spec tile align */
.spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.spec b {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    line-height: 1.25;
    margin-bottom: 4px;
}

/* bundle tray — savings, mobile-app style */
.tray-in{max-width:1180px;margin:0 auto;padding:10px 16px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:9px}
.tray-prog{display:flex;flex-direction:column;gap:6px}
.tray .tmsg{font-size:12.5px;color:var(--ink);line-height:1.3;margin:0}
.tray .tmsg b{color:var(--orange-d)}
.tray .tmsg .ok{color:var(--green);font-weight:800}
.tray-buy{display:flex;align-items:center;gap:14px}
.tray-tot{display:flex;flex-direction:column;line-height:1.05;flex:none;min-width:0}
.tray-tot .tt-now{font-size:23px;font-weight:900;color:var(--orange)}
.tray-tot .tt-sub{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.tt-was{font-size:12.5px;color:var(--muted);text-decoration:line-through}
.tt-save{font-size:11px;font-weight:800;color:#fff;background:var(--green);border-radius:20px;padding:2px 8px;display:inline-block}
.tt-cnt{font-size:11.5px;color:var(--muted)}
.tray-buy .btn{flex:1;height:50px}
@keyframes savepop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.tt-save.pop{animation:savepop .4s ease}

/* product page */
.pstars.none{color:#cbd5e1}
.rev-summary .big.none{color:#cbd5e1}
.feat .i{width:18px;height:18px;color:var(--green)}
.assure .i{width:14px;height:14px;vertical-align:-.15em}
.couponhint .i{color:var(--orange-d);vertical-align:-.16em}
.taxnote .i{vertical-align:-.16em}
.whybox .i{color:#e0a63a;vertical-align:-.16em}

/* yellow rating stars */
.stars,.pstars,.reviews .big,.rf-stars span{color:#f5b301}

.logo-img{height:32px;width:auto;display:block}
@media(max-width:640px){.logo-img{height:26px}}

/* WhatsApp contact button */
.wa-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:#5cc16f;color:#fff;font-weight:700;font-size:14.5px;height:40px;padding:0 17px;border-radius:30px;white-space:nowrap;flex:none;transition:.14s}
.wa-btn:hover{background:#4bb160}
.wa-btn svg{width:20px;height:20px;fill:#fff;flex:none}
.bar .cartbtn{margin-left:16px}
@media(max-width:900px){.wa-btn{padding:0;width:38px;justify-content:center;border-radius:50%}.wa-btn span{display:none}.bar .cartbtn{margin-left:12px}}

/* cart pill */
.cartbtn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border:1.5px solid var(--line);border-radius:30px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;line-height:1;transition:.14s}
.cartbtn:hover{border-color:var(--orange);color:var(--orange-d)}
.cartbtn svg{width:21px;height:21px;stroke:currentColor}
.cartbtn .cnt{background:none;color:inherit;min-width:0;height:auto;border-radius:0;display:inline;padding:0;font-size:15px;font-weight:700}
.cartbtn .amt{display:none}

.psub{font-size:16px;line-height:1.5;color:var(--text);margin:2px 0 14px;max-width:620px}

/* what's inside + access button */
.access-wrap{text-align:center;margin:22px 0 6px}
.access-btn{width:100%;max-width:440px;height:54px;font-size:16.5px}
.inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inside-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px 24px}
.inum{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#eef1f6;color:#33406b;font-weight:800;font-size:16px;margin-bottom:16px}
.inside-card h3{font-size:17px;margin:0 0 8px;color:var(--heading);line-height:1.3}
.inside-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text)}
@media(max-width:900px){.inside-grid{grid-template-columns:1fr}}

/* testimonials carousel */
.revcar-nav{display:flex;gap:8px;flex:none}
.revcar-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.14s}
.revcar-arrow svg{width:18px;height:18px}
.revcar-arrow:hover{border-color:var(--orange);color:var(--orange-d)}
.revcar{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.revcar::-webkit-scrollbar{display:none}
.revcard{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;display:flex;flex-direction:column}
.revstars{color:#f5b301;font-size:15px;letter-spacing:2px;margin-bottom:14px}
.revquote{font-size:15.5px;line-height:1.55;color:var(--heading);margin:0 0 18px;flex:1}
.revby{border-top:1px solid var(--line);padding-top:14px}
.revby b{display:block;color:var(--heading);font-size:14.5px}
.revby span{font-size:13px;color:var(--muted)}
@media(max-width:900px){.revcard{flex:0 0 calc((100% - 20px) / 1.6)}}
@media(max-width:640px){.revcard{flex:0 0 86%}}

/* ===================================================================
   WordPress integration overrides (not in the static courses-store
   preview). Adapts WP-generated markup — nav menus, etc. — to the
   ported storefront design. Keep additions here so the ported preview
   CSS above stays a faithful 1:1 copy.
   =================================================================== */
footer .fcols ul { list-style: none; margin: 0; padding: 0; }
footer .fcols li { margin: 0; }
footer .fcols a { display: block; padding: 5px 0; font-size: 14px; color: #94a3b8; }
footer .fcols a:hover { color: var(--orange); }

/* Currency switcher — JS-injected by medstore-currency.js next to the cart
   button. Styled here to match the ported header (pill toggle + dropdown). */
.bar .medstore-currency-picker { position: relative; flex: none; }
.medstore-currency-toggle {
	display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 14px;
	border: 1.5px solid var(--line); border-radius: 30px; background: #fff; color: var(--ink);
	font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit; line-height: 1; transition: .14s;
}
.medstore-currency-toggle:hover { border-color: var(--orange); color: var(--orange-d); }
.medstore-currency-menu {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.medstore-currency-item {
	display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
	padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer;
	font-family: inherit; font-size: 14px; color: var(--text); line-height: 1.2;
}
.medstore-currency-item:hover { background: #f5f8ff; }
.medstore-currency-item.is-active { background: rgba(37, 99, 235,.1); color: var(--orange-d); font-weight: 700; }
.medstore-currency-item-symbol { width: 24px; font-weight: 700; color: var(--ink); }
.medstore-currency-item-code { font-weight: 700; }
.medstore-currency-item-name { color: var(--muted); font-size: 12.5px; }
@media (max-width: 900px) { .bar .medstore-currency-picker { display: none; } }

/* Pagination (WooCommerce paginate_links) — not in the static preview. */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 34px 0 8px; }
.pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ink); background: #fff; text-decoration: none; }
.pager a.page-numbers:hover { border-color: var(--orange); color: var(--orange-d); }
.pager .page-numbers.current { background: var(--orange); border-color: var(--orange); color: #fff; }
.pager .page-numbers.dots { border: 0; background: none; }

/* Reviews list spacing (container the static preview left unstyled).
   NOTE: .access-wrap / .access-btn are already styled by the ported preview
   CSS above (centered, max-width:440px) — do NOT re-declare them here. */
.reviews .rev-list { max-width: 720px; margin: 6px auto 14px; }

/* "What's inside" module number badge (shown when CMB2 modules are set). */
.inside-num { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#eef1f6; color:#33406b; font-weight:800; font-size:15px; margin-bottom:14px; }

/* Express-pay wallet buttons under the product Buy now / Add to cart.
   A styled preview until Stripe Express Checkout is live in prod (which
   renders its own Apple Pay / Google Pay / Link buttons just above, via the
   woocommerce_after_add_to_cart_form hook). */
.pexpress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.xpay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.xpay:hover { background: #0f172a; }
.xpay svg { height: 20px; width: auto; display: block; }
.xpay-apple svg { height: 19px; margin-top: -2px; }
@media (max-width: 520px) {
    .pexpress { grid-template-columns: 1fr; }
}

/* Product reviews carousel — the current visitor's own not-yet-approved
   review shows with an "Under review" badge (see single-product.php). */
.revcard.is-pending { border-color: var(--orange); background: #eff6ff; }
.rev-pending {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--orange-d);
    background: #dbeafe;
    border-radius: 999px;
    padding: 4px 10px;
}

/* ===================================================================
   Medical Prep — brand wordmark + niche polish (appended)
   =================================================================== */
.logo .mk svg { width: 22px; height: 22px; color: #fff; }
.logo .wm { font-weight: 900; font-size: 21px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.logo .wm b { color: var(--orange); font-weight: 900; }
@media (max-width: 640px) { .logo .wm { font-size: 18px; } .logo .mk { width: 28px; height: 28px; } }

/* Site-wide "learning materials only" disclaimer line (PDP + elsewhere) */
.ms-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; display: flex; gap: 7px; align-items: flex-start; }
.ms-disclaimer svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted); }

/* Softer, flatter section headings for the boards look: keep the accent
   underline but slightly refined. (Kept minimal — structure unchanged.) */
.head h2:after, .pdesc h2:after { height: 3px; border-radius: 3px; }
.wm-light { color: #fff; }
.wm-light b { color: #93c5fd; }
/* Footer logo — light-mode treatment for the dark footer */
body > footer .logo .mk { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
body > footer .logo .wm { color: #fff; }
body > footer .logo .wm b { color: #93c5fd; }

/* ===================================================================
   Medical Prep — home v2 (split hero, exam tiles, steps) [ported from preview]
   =================================================================== */
/* --- split hero --- */
.hero-split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:left;padding:56px 20px 44px}
.hero-split .eyebrow-av{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);color:var(--orange-d);box-shadow:var(--shadow);margin-bottom:18px}
.hero-split .eyebrow-av .av{display:inline-flex}
.hero-split .eyebrow-av .av span{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin-left:-6px;background:linear-gradient(135deg,var(--orange),var(--orange-d))}
.hero-split .eyebrow-av .av span:first-child{margin-left:0}
.hero-split h1{font-size:clamp(30px,4vw,50px);line-height:1.06;font-weight:900;color:var(--ink);margin:0 0 16px;letter-spacing:-.02em;max-width:none}
.hero-split h1 .hl{color:var(--orange)}
.hero-split .lede{font-size:17.5px;max-width:520px;margin:0 0 24px;color:var(--text)}
.hero-split .cta{justify-content:flex-start;margin:0}
.herochips{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}
.herochips span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text)}
.herochips svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.4}
.hero-split p.whyaff{margin:18px 0 0;text-align:left}
/* hero visual */
.herovis{position:relative;min-height:480px}
.vcard{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.vcard.main{top:0;left:0;right:0;bottom:0;padding:14px;display:flex;flex-direction:column;text-decoration:none}
.vcard.main .shot{flex:1;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--orange-d));position:relative;overflow:hidden;display:grid;place-items:center;min-height:200px}
.vcard.main .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard.main .shot .play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.vcard.main .shot .play svg{width:26px;height:26px;fill:var(--orange);margin-left:3px}
.vcard.main .meta{padding:14px 200px 6px 6px}
.vcard.main .meta .k{font-size:11px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.05em}
.vcard.main .meta h4{font-size:15.5px;margin:4px 0 0;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard.rev{left:-16px;top:-6px;width:210px;padding:12px 14px;z-index:3}
.vcard.rev .stars{color:#f5b301;font-size:13px;letter-spacing:1px;margin:0}
.vcard.rev p{margin:6px 0 0;font-size:12.5px;color:var(--text);line-height:1.4;font-style:italic}
.vcard.rev .who{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--ink)}
.vcard.stat{right:-12px;bottom:-14px;width:196px;padding:14px 16px;z-index:4;box-shadow:0 10px 30px rgba(15,23,42,.12)}
.vcard.stat .n{font-size:30px;font-weight:900;color:var(--green);line-height:1}
.vcard.stat .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.vcard.stat .bar{height:6px;border-radius:6px;background:#e8f6ef;margin-top:10px;overflow:hidden}
.vcard.stat .bar i{display:block;height:100%;width:90%;background:var(--green);border-radius:6px}
@media(max-width:900px){.hero-split .wrap{grid-template-columns:1fr;gap:26px}.herovis{display:none}.hero-split .cta{justify-content:center}.hero-split .hero-copy{text-align:center}.hero-split .lede{margin-left:auto;margin-right:auto}.hero-split .herochips{justify-content:center}.hero-split p.whyaff{text-align:center;margin-left:auto;margin-right:auto}}
/* --- study-by-exam icon tiles --- */
.boards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.board{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s}
.board:hover{border-color:var(--orange);box-shadow:var(--shadow);transform:translateY(-2px)}
.board .bi{width:46px;height:46px;border-radius:11px;background:#eff6ff;color:var(--orange);display:grid;place-items:center;flex:none}
.board .bi svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9}
.board b{display:block;font-size:15px;color:var(--ink)}
.board span{font-size:12.5px;color:var(--muted);font-weight:600}
@media(max-width:900px){.boards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.boards{grid-template-columns:1fr}}
/* --- how it works steps --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.step .num{width:40px;height:40px;border-radius:11px;background:#eff6ff;color:var(--orange);font-weight:900;font-size:17px;display:grid;place-items:center;margin-bottom:14px}
.step h3{font-size:17px;color:var(--ink);margin:0 0 6px}
.step p{margin:0;font-size:14.5px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}