@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
    --ink: #14192E;
    --paper: #EFF2F6;
    --gold: #F2B705;
    --teal: #21C7B8;
    --violet: #7C5CFF;
    --slate: #5B6478;
    --white: #FFFFFF;
    --max-width: 1120px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--ink) !important;
    background: var(--white);
    line-height: 1.55;
}

/* Some other stylesheet on this site was overriding our paragraph
   text color to something faint/pale wherever its own rule happened
   to be louder than ours. This guarantees our body copy color always
   wins, site-wide. */
p, li, span:not([style]) {
    color: inherit;
}
.section-intro p, .about-snippet p, .service-row p, .page-header p {
    color: var(--slate) !important;
}
.page-header p { color: #C7CBDA !important; }
.hero-content p { color: #D8DCEB !important; }

h1, h2, h3 {
    font-family: 'Fraunces', serif !important;
    font-weight: 700 !important;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

a { color: var(--ink); }

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--white);
    box-shadow: 0 1px 0 #E4E7EE;
}
.tsd-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink);
}
.logo-img {
    height: 34px;
    width: auto;
    display: block;
}
/* The logo's wordmark text is dark, which disappears on the footer's
   dark background — a small light chip behind it keeps it legible
   without needing a separate dark-mode logo file. */
.logo-img-footer {
    background: var(--white);
    padding: 6px 10px;
    border-radius: 6px;
}
.logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), var(--violet));
    flex-shrink: 0;
}

/* Hamburger button — morphs into an X when open. Hidden on desktop. */
.tsd-nav-toggle {
    display: none;
    background: none;
    border: 1px solid #D6DAE3;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.tsd-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s ease, opacity .25s ease;
}
.tsd-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tsd-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.tsd-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tsd-nav-menu { display: flex; align-items: center; gap: 28px; }
.tsd-nav-menu a { text-decoration: none; font-size: 0.95rem; color: var(--ink); transition: color .3s ease; }
.tsd-nav-menu a:hover { color: var(--violet); }
.tsd-nav-menu .cta {
    background: var(--ink);
    color: var(--white) !important;
    padding: 8px 18px;
    border-radius: 6px;
    transition: background .3s ease;
}
.tsd-nav-menu .cta:hover { background: var(--violet); }
.tsd-nav-menu a.active { color: var(--violet); font-weight: 600; }

/* Services dropdown in the main nav */
.nav-services-dropdown { position: relative; }
.nav-dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .3s ease;
}
.nav-dropdown-toggle:hover { color: var(--violet); }
.nav-dropdown-toggle .chevron { font-size: 0.7em; transition: transform .25s ease; }
.nav-services-dropdown:hover .nav-dropdown-toggle .chevron,
.nav-dropdown-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    background: var(--white);
    border: 1px solid #E4E7EE;
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(20,25,46,0.12);
    padding: 8px;
    min-width: 230px;
    z-index: 1001;
}
.nav-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.92rem;
}
.nav-dropdown-menu a:hover { background: var(--paper); }

/* Desktop: hover reveals it (no JS needed); the click toggle in the
   nav script is what makes it also work for touch/keyboard users. */
@media (min-width: 992px) {
    .nav-services-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-menu.is-open { display: block; }
}

/* Mobile: nested inside the existing dropdown panel, so it behaves
   like an indented sub-list instead of a second floating box. */
@media (max-width: 991px) {
    .nav-dropdown-menu.is-open { display: block; }
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        margin: 4px 0 4px 12px;
        padding: 0;
    }
}

/* The full nav list is too long for one horizontal bar on desktop for
   ANY logged-in dashboard role — above 991px, only "Log out" stays in
   the top nav, and the full list moves to the secondary sidebar below
   instead, for students/tutors/admin/Assistants alike. Below 991px,
   the mobile dropdown still shows everything, completely unchanged. */
@media (min-width: 992px) {
    .tsd-nav-menu.dashboard-nav a:not(.cta) { display: none; }
}

/* Desktop-only secondary sidebar for any logged-in dashboard user */
.admin-subnav { display: none; }

/* Dashboard pages get their own, wider content width than the
   marketing site's centered 1120px column — data tables need the
   room, and there's no reading-line-length reason to stay narrow
   here. */
.tsd-dash-wrap { max-width: 1500px; margin: 0 auto; padding: 0 24px; }

@media (min-width: 992px) {
    .tsd-layout-grid { display: flex; align-items: flex-start; gap: 32px; }
    .admin-subnav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 230px;
        flex-shrink: 0;
        background: var(--white);
        border: 1px solid #E4E7EE;
        border-radius: 10px;
        padding: 14px;
        position: sticky;
        top: 96px;
    }
    .admin-subnav a {
        padding: 10px 12px;
        border-radius: 8px;
        color: var(--ink);
        text-decoration: none;
        transition: background .3s ease, color .3s ease;
    }
    .admin-subnav a:hover { background: var(--paper); }
    .admin-subnav a.active { background: var(--ink); color: var(--white); }
    .tsd-content { flex: 1; min-width: 0; }
}

@media (max-width: 991px) {
    .tsd-nav-toggle { display: flex; }

    /* The menu overlays below the header instead of pushing it taller
       — the header's own height never changes when this opens. */
    .tsd-nav-menu {
        position: absolute;
        top: calc(100% + 18px);
        left: 24px;
        right: 24px;
        background: var(--white);
        border: 1px solid #E4E7EE;
        border-radius: 10px;
        box-shadow: 0 16px 32px rgba(20,25,46,0.12);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height .35s ease, opacity .3s ease;
        z-index: 1000;
    }
    .tsd-nav-menu.is-open {
        max-height: 420px;
        opacity: 1;
        pointer-events: auto;
    }
    .tsd-nav-menu a { width: 100%; padding: 10px 12px; border-radius: 6px; }
    .tsd-nav-menu a:hover { background: var(--paper); }
    .tsd-nav-menu .cta { margin-top: 4px; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--white);
    width: 100%;
}

/* Three rotating background slides — DUMMY PLACEHOLDERS. Replace each
   background-image below with a real photo, e.g.
   background-image: url('/wp-content/uploads/hero-1.jpg');
   See the README for suggested subject matter and where to source
   real photos. */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
/* DUMMY PLACEHOLDER COLORS — deliberately bold and clearly distinct
   from each other for now (per your request) so the slideshow is
   obviously visible even before real photos go in. Replace each with
   background-image: url('/wp-content/uploads/hero-N.jpg'); when ready. */
.hero-slide-1 { background-color: #14192E; background-image: linear-gradient(135deg, #14192E, #2c3a70); }
.hero-slide-2 { background-color: #1F5A52; background-image: linear-gradient(135deg, #1F5A52, #21C7B8); }
.hero-slide-3 { background-color: #6B3F14; background-image: linear-gradient(135deg, #6B3F14, #F2B705); }

/* This overlay sits above every slide and never changes — text stays
   equally readable no matter which photo is currently showing. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(20,25,46,0.92) 10%, rgba(20,25,46,0.55) 60%, rgba(20,25,46,0.78) 100%);
}

/* Wrapping hero content in the same .wrap as the header so both align
   to the same left edge, instead of the text sitting flush at the
   viewport edge while the header is inset. */
.hero-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 100px 24px; }
.hero-content { max-width: 620px; }
.hero-content h1 { font-size: 3rem; color: var(--gold); }
.hero-content p { font-size: 1.15rem; color: #D8DCEB; max-width: 520px; }

.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
/* Deliberately named ".site-btn" instead of Bootstrap's own ".btn" —
   Bootstrap's "btn-primary"/"btn-outline*" classes are ALSO used for
   its own (blue) buttons, and having the same class name meant
   Bootstrap's default focus/hover colors were bleeding through our
   gold/white styling regardless of our own overrides. This is now a
   completely separate, self-contained set of classes with no shared
   name, so there is nothing left for Bootstrap to collide with. */
.site-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Space Grotesk', sans-serif;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .35s ease, color .35s ease, transform .35s ease;
    outline: none;
    box-shadow: none;
    margin-right: 12px;
    margin-bottom: 10px;
}
.site-btn:focus, .site-btn:active { outline: none; box-shadow: none; }

.site-btn-primary { background: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important; }
.site-btn-primary:hover, .site-btn-primary:focus {
    /* Matches the nav's "Dashboard"/"Log In" hover exactly, per request.
       !important on every property here — some other stylesheet on
       this site was overriding our hover text color specifically,
       which is exactly why the text was unreadable against the
       violet background. This makes that impossible regardless of
       what else is loaded on the page. */
    background: var(--violet) !important; color: var(--white) !important; border-color: var(--violet) !important; transform: translateY(-2px);
}

.site-btn-outline { background: transparent !important; color: var(--white) !important; border-color: var(--white) !important; }
.site-btn-outline:hover, .site-btn-outline:focus {
    background: var(--white) !important; color: var(--ink) !important; border-color: var(--white) !important; transform: translateY(-2px);
}

/* "Read Our Story" specifically keeps a dark hover background but
   switches its text to the brand gold, rather than matching the
   violet used everywhere else — a deliberate one-off per request. */
.site-btn-story:hover, .site-btn-story:focus {
    background: var(--ink) !important; color: var(--gold) !important; border-color: var(--ink) !important; transform: translateY(-2px);
}

/* For outline buttons on a light/white background (site-btn-outline
   is meant for the dark hero) — dark border/text at rest, fills solid
   dark on hover. */
.site-btn-outline-ink { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; }
.site-btn-outline-ink:hover, .site-btn-outline-ink:focus {
    background: var(--ink) !important; color: var(--white) !important; border-color: var(--ink) !important; transform: translateY(-2px);
}

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-intro { max-width: 620px; margin-bottom: 48px; }
.section-intro h2 { font-size: 2.1rem; }
.section-intro p { color: var(--slate); font-size: 1.05rem; }

/* ---------- Services list ---------- */
.service-row {
    display: grid;
    grid-template-columns: 6px 96px 220px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid #E4E7EE;
    transition: background .3s ease;
    text-decoration: none;
    color: inherit;
}
.service-row:first-of-type { border-top: 1px solid #E4E7EE; }
.service-row:hover { background: #FAFBFD; }
.service-bar { align-self: stretch; border-radius: 3px; }
.service-thumb {
    /* DUMMY IMAGE PLACEHOLDER — replace background with a real photo per service */
    width: 96px;
    height: 72px;
    border-radius: 8px;
    background: repeating-linear-gradient(135deg, var(--paper), var(--paper) 10px, #E1E6EE 10px, #E1E6EE 20px);
}
.service-row h3 { font-size: 1.35rem; margin: 0; }
.service-row p { color: var(--slate); margin: 0; }
.service-row .learn-link { text-decoration: none; font-weight: 500; white-space: nowrap; transition: opacity .3s ease; }
.service-row .learn-link:hover { opacity: 0.7; }

@media (max-width: 860px) {
    .service-row { grid-template-columns: 6px 72px 1fr; }
    .service-row .learn-link { grid-column: 3; margin-top: 6px; }
}
@media (max-width: 560px) {
    .service-row { grid-template-columns: 6px 1fr; }
    .service-thumb { display: none; }
}

/* ---------- About snippet ---------- */
.about-snippet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.about-image {
    /* DUMMY IMAGE PLACEHOLDER */
    aspect-ratio: 4/3;
    border-radius: 12px;
    background: repeating-linear-gradient(135deg, var(--paper), var(--paper) 14px, #E1E6EE 14px, #E1E6EE 28px);
}
@media (max-width: 760px) {
    .about-snippet { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C7CBDA; padding: 64px 0 24px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}
.footer-grid h4 { color: var(--white); font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: #C7CBDA; text-decoration: none; font-size: 0.92rem; transition: color .3s ease; }
.footer-grid a:hover { color: var(--white); }
.footer-blurb { color: #A6ACC0; font-size: 0.92rem; max-width: 320px; }
.social-icons { display: flex; gap: 12px; margin-top: 16px; }
.social-icons a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    transition: background .35s ease, transform .35s ease;
}
.social-icons a:hover { background: var(--violet); transform: translateY(-2px); }
.social-icons svg { width: 16px; height: 16px; fill: var(--white); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
    font-size: 0.85rem;
    color: #8A90A6;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

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

/* ---------- Simple content pages (About/FAQ/Contact/etc.) ---------- */
.page-header {
    position: relative;
    padding: 96px 0 56px;
    color: var(--white);
    overflow: hidden;
    /* DUMMY IMAGE PLACEHOLDER — replace with a real photo, e.g.
       background-image: url('/wp-content/uploads/page-header.jpg');
       The dark overlay below is layered separately (via ::before) so
       it stays constant and text stays readable regardless of which
       photo is used here. */
    background-image: repeating-linear-gradient(60deg, #1b2242, #1b2242 14px, #232c52 14px, #232c52 28px);
    background-size: cover;
    background-position: center;
}
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(20,25,46,0.90) 20%, rgba(20,25,46,0.72) 100%);
}
.page-header .wrap { position: relative; z-index: 1; }
.page-header h1 { font-size: 2.6rem; color: var(--gold) !important; }
.page-header p { color: #C7CBDA; }

.faq-item { padding: 22px 0; border-bottom: 1px solid #E4E7EE; }
.faq-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.faq-item p { color: var(--slate); margin: 0; }

.contact-form label { display: block; margin-bottom: 16px; font-weight: 500; }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #D6DAE3; border-radius: 6px; font-family: inherit;
}

/* Contact info dummy blocks (phone / email / location) */
.contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.contact-info-item {
    border: 1px solid #E4E7EE;
    border-radius: 10px;
    padding: 22px;
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s ease;
}
.contact-info-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,25,46,0.08); }
.contact-info-item .icon-badge {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); margin-bottom: 12px;
    font-size: 1.2rem;
}
.contact-info-item h4 { margin: 0 0 4px; font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; color: var(--slate); }
.contact-info-item p { margin: 0; font-weight: 500; }
@media (max-width: 760px) {
    .contact-info { grid-template-columns: 1fr; }
}

/* ---------- Tutoring subject cards (grid) ---------- */
.subject-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/5;
    max-height: 320px;
    display: flex;
    align-items: flex-end;
    color: var(--white);
    text-decoration: none;
    background-color: var(--paper);
    background-size: cover;
    background-position: center;
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s ease;
}
.subject-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(20,25,46,0.20); }
.subject-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,25,46,0) 40%, rgba(20,25,46,0.88) 100%);
    transition: opacity .4s ease;
}
.subject-card:hover::before { opacity: 0.95; }
.subject-card-body { position: relative; padding: 18px; width: 100%; }
.subject-card-body h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 4px; }
.subject-card-body .price { color: var(--gold); font-weight: 600; font-family: 'Space Grotesk', sans-serif; }

/* ---------- Motion: reveal-on-scroll ----------
   IMPORTANT: content must be visible by default, with no dependency
   on JavaScript running. ".reveal" alone is always fully visible —
   only ".reveal.reveal-armed" (added by motion.js, only once it's
   confirmed to be running) starts hidden for the animate-in effect.
   If the script fails to load or errors for any reason, content
   simply doesn't animate — it can never become permanently invisible,
   which is what was happening before. */
.reveal {
    opacity: 1;
    transform: none;
}
.reveal.reveal-armed {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal-armed.is-visible { opacity: 1; transform: translateY(0); }

/* Above-the-fold elements (the hero) use this instead of ".reveal" —
   they're already visible in the viewport at page load, so relying on
   IntersectionObserver for them was the root of the animation not
   showing at all (armed and un-armed in the same frame). These
   animate on a plain timer instead, which is far more predictable
   for anything guaranteed visible on load. */
.reveal-on-load {
    opacity: 1;
    transform: none;
}
.reveal-on-load.reveal-armed {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-load.reveal-armed.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger service rows slightly so they don't all reveal at once */
.service-row.reveal:nth-of-type(2) { transition-delay: .1s; }
.service-row.reveal:nth-of-type(3) { transition-delay: .2s; }
.service-row.reveal:nth-of-type(4) { transition-delay: .3s; }
.service-row.reveal:nth-of-type(5) { transition-delay: .4s; }

/* Same one-after-another staggering for FAQ items (and anything else
   using .reveal inside a repeated list) */
.faq-item.reveal:nth-of-type(1) { transition-delay: 0s; }
.faq-item.reveal:nth-of-type(2) { transition-delay: .1s; }
.faq-item.reveal:nth-of-type(3) { transition-delay: .2s; }
.faq-item.reveal:nth-of-type(4) { transition-delay: .3s; }
.faq-item.reveal:nth-of-type(5) { transition-delay: .4s; }
.faq-item.reveal:nth-of-type(6) { transition-delay: .5s; }
.faq-item.reveal:nth-of-type(7) { transition-delay: .6s; }
.faq-item.reveal:nth-of-type(8) { transition-delay: .7s; }

/* Hero buttons reveal noticeably after the heading/text above them,
   rather than at the same time. */
.hero-actions.reveal.reveal-armed { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
    .reveal.reveal-armed, .reveal-on-load.reveal-armed { opacity: 1; transform: none; transition: none; }
    .site-btn, .subject-card, .contact-info-item, .service-row, .social-icons a {
        transition: none !important;
    }
}

/* Floating cart button - shown on the tutoring catalogue page */
.tsd-floating-cart {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(20,25,46,0.28);
    z-index: 1050;
    transition: transform .3s ease, background .3s ease;
}
.tsd-floating-cart:hover { background: var(--violet); transform: translateY(-3px) scale(1.05); }
.tsd-floating-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}
@media (max-width: 576px) {
    .tsd-floating-cart { bottom: 18px; right: 18px; width: 50px; height: 50px; font-size: 1.3rem; }
}