/* =============================================================
   CJS Movie Code Marketplace — landing-style category page
   Loaded by class.category.php when the requested category is
   the parent "Movie Digital Downloads" (catid 34).
   All selectors are .mc-* scoped so they do not collide with
   existing Infinity / Bootstrap rules.

   ⚠️  IMPORTANT — REM BASE:
   The site's main stylesheet sets `html { font-size: 10px }`
   (legacy Bootstrap 3 convention). So in this codebase
       1rem = 10px,   NOT the browser-default 16px.
   When editing this file, target the visual size you want and
   multiply by 0.1 (e.g. 24px desired → 2.4rem). Sizes here have
   been pre-scaled to that base; eyeballing them against a normal
   16px-rem site will look "too big" on paper but render correctly
   in the browser.
   ============================================================= */

/* CSS custom properties are declared on :root (not only on .mc-page) so they
   resolve for EVERY .mc-* section regardless of where it sits in the DOM. The
   lower sections (.mc-trust, .mc-section FAQ, .mc-final-cta + its buttons) all
   colour themselves with var(--mc-*); when the vars were scoped to .mc-page
   only and a section rendered outside that wrapper, the var() calls failed and
   the section lost its background entirely — the navy trust band and white FAQ
   cards showed the dark site wallpaper through, and the "solid" CTA button drew
   white text on white (color: var(--mc-navy) → unresolved → inherited #fff).
   The hero was unaffected because it uses literal hex colours. Declaring the
   vars globally (they are uniquely --mc-* prefixed, so no collision risk with
   the legacy stylesheet) makes all of them resolve. */
:root,
.mc-page {
    --mc-navy:      #0E1F3A;
    --mc-navy-deep: #07142A;
    --mc-cash:      #10B981;
    --mc-cash-dark: #0E9F70;
    --mc-gold:      #F59E0B;
    --mc-ink:       #1E293B;
    --mc-muted:     #64748B;
    --mc-line:      #E2E8F0;
    --mc-bg:        #F8FAFC;
    --mc-card:      #FFFFFF;
    --mc-radius:    12px;
    --mc-radius-sm: 8px;
    --mc-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --mc-shadow-md: 0 4px 14px rgba(15,23,42,.08);
    --mc-shadow-lg: 0 12px 40px rgba(15,23,42,.16);
}
.mc-page {
    background: var(--mc-bg);
    color: var(--mc-ink);
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.mc-page * { box-sizing: border-box; }
.mc-page a { color: var(--mc-cash-dark); text-decoration: none; }
.mc-page a:hover { text-decoration: underline; }
.mc-page h1, .mc-page h2, .mc-page h3, .mc-page h4 {
    color: var(--mc-navy); margin: 0 0 .5em; font-weight: 700;
    line-height: 1.15; letter-spacing: -.015em;
}
.mc-page h1 { font-size: 5.44rem; letter-spacing: -.025em; }
.mc-page h2 { font-size: 3.84rem; }
.mc-page h3 { font-size: 2.16rem; }
.mc-page p  { margin: 0 0 1em; font-size: 1.68rem; }

/* Wider container so AdSense auto-ads don't have side-gutters to fill,
   and the page reads as a proper full-width marketplace rather than a
   narrow column floating in the middle.
   ⚠️ Uses longhand for margin + padding so it ONLY sets horizontal values.
   The shorthand forms (margin: 0 auto / padding: 0 32px) silently zero out
   top/bottom too, which kills any margin-top / padding-top set on an
   element that ALSO has the .container class (eg .mc-hero-grid). */
.mc-page .container {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* Breadcrumb lives INSIDE the hero now (light-on-navy). The existing
   Panel.CategoryBreadcrumb emits the legacy Bootstrap breadcrumb markup
   (.breadcumb_wrap > ol.breadcrumb) — override its bg + text colours so it
   reads as a subtle "you are here" hint on the navy hero rather than the
   legacy gray pill it normally is. */
.mc-breadcrumb {
    padding: 22px 0 14px;
    margin-bottom: 18px;
    font-size: 1.52rem;
    color: rgba(255,255,255,.6);
}
.mc-breadcrumb a { color: rgba(255,255,255,.78); }
.mc-breadcrumb a:hover { color: #fff; }
.mc-breadcrumb .breadcumb_wrap { padding: 0; background: transparent; }
.mc-breadcrumb .breadcrumb {
    padding: 0;
    background: transparent;
    margin: 0;
    border-radius: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mc-breadcrumb .breadcrumb > li,
.mc-breadcrumb .breadcrumb > .active {
    color: rgba(255,255,255,.7);
}
.mc-breadcrumb .breadcrumb > li > a { color: rgba(255,255,255,.82); }
.mc-breadcrumb .breadcrumb > li + li::before {
    content: "/";
    color: rgba(255,255,255,.4);
    padding: 0 4px;
}

/* ---------- Hero ---------- */
.mc-hero {
    background:
        radial-gradient(ellipse at top right, rgba(245,158,11,.18), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(16,185,129,.12), transparent 55%),
        linear-gradient(180deg, #0E1F3A 0%, #102B52 100%);
    color: #fff;
    padding: 0 0 88px;
    /* Slight gap above so the navy hero doesn't butt up against the white
       nav menu — gives the page room to breathe. */
    margin-top: 18px;
}
/* Use FLEXBOX (not grid) for the hero so the two columns stay side-by-side
   reliably across browsers + so we can force same height via stretch. */
.mc-hero-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 48px;
    align-items: stretch !important;
    padding-top: 20px;
}
.mc-hero-grid > * { min-width: 0; }
.mc-hero-search {
    flex: 0 0 420px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mc-hero-copy {
    flex: 1 1 auto;
    color: #fff;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 1100px) {
    .mc-hero-search { flex: 0 0 380px; }
}
@media (max-width: 900px) {
    /* column-reverse so the marketing copy comes FIRST on phones and the
       search card drops just above the platform pills below the hero. */
    .mc-hero-grid {
        flex-direction: column-reverse !important;
        gap: 28px;
        padding-top: 16px;
    }
    .mc-hero-search, .mc-hero-copy { flex: 1 1 auto; }
}
.mc-hero h1 { color: #fff; font-size: 5.76rem; line-height: 1.08; }
.mc-lead {
    font-size: 2rem; line-height: 1.55;
    color: rgba(255,255,255,.88); max-width: 640px;
    margin-bottom: 1.2em;
}

.mc-eyebrow {
    display: inline-block;
    background: rgba(245,158,11,.18); color: var(--mc-gold);
    padding: 8px 14px; border-radius: 999px;
    font-size: 1.36rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    margin-bottom: 20px;
}
.mc-hero-bullets { list-style: none; padding: 0; margin: 22px 0 32px; display: grid; gap: 12px; }
.mc-hero-bullets li {
    padding-left: 34px; position: relative;
    color: rgba(255,255,255,.93); font-size: 1.68rem;
}
.mc-hero-bullets li::before {
    content: "✓"; position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px; background: var(--mc-cash); color: #fff;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 1.28rem; font-weight: 700;
}
.mc-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mc-hero-trust { margin-top: 24px; min-height: 24px; }

/* Buttons */
.mc-btn {
    display: inline-block; padding: 16px 32px; border-radius: var(--mc-radius-sm);
    font-weight: 700; text-align: center; border: 0; cursor: pointer;
    font-size: 1.68rem; text-decoration: none;
    transition: transform .06s ease, box-shadow .15s ease, background .15s, color .15s;
    font-family: inherit;
}
.mc-btn:hover { transform: translateY(-1px); text-decoration: none; }
/* Specificity note: `.mc-page a { color: var(--mc-cash-dark) }` (1 class + 1
   element) outweighs a bare `.mc-btn-primary` (1 class), which previously
   rendered the hero "Browse all movie codes" CTA as dark-green text on the
   green button background. Scope button colours under .mc-page so they win. */
.mc-page .mc-btn-primary { background: var(--mc-cash); color: #fff; box-shadow: var(--mc-shadow-sm); }
.mc-page .mc-btn-primary:hover { background: var(--mc-cash-dark); color: #fff; box-shadow: var(--mc-shadow-md); }
.mc-page .mc-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.mc-page .mc-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.mc-page .mc-btn-dark { background: var(--mc-navy); color: #fff; }
.mc-page .mc-btn-dark:hover { background: var(--mc-navy-deep); color: #fff; }
.mc-btn-block { display: block; width: 100%; }

/* Hero search card */
.mc-hero-search {
    background: #fff; color: var(--mc-ink);
    border-radius: var(--mc-radius); padding: 32px;
    box-shadow: var(--mc-shadow-lg);
}
.mc-hero-search h3 { font-size: 2.24rem; margin-bottom: 6px; }
.mc-muted { color: var(--mc-muted); font-size: 1.6rem; }
.mc-field {
    display: block; font-weight: 600; color: var(--mc-ink);
    font-size: 1.52rem; margin: 14px 0 8px;
}
.mc-hero-search input, .mc-hero-search select {
    width: 100%; padding: 14px 16px;
    border: 1px solid var(--mc-line); border-radius: var(--mc-radius-sm);
    font-size: 1.68rem; font-family: inherit;
    background: #fff; color: var(--mc-ink);
}
.mc-hero-search input:focus, .mc-hero-search select:focus {
    outline: 2px solid var(--mc-cash); outline-offset: 1px;
    border-color: var(--mc-cash);
}
.mc-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.mc-quick-chips a {
    background: var(--mc-bg); color: var(--mc-ink);
    padding: 6px 12px; border-radius: 999px;
    font-size: 1.28rem; font-weight: 500;
    border: 1px solid var(--mc-line);
}
.mc-quick-chips a:hover { background: var(--mc-navy); color: #fff; border-color: var(--mc-navy); text-decoration: none; }

/* ---------- Live search dropdown ---------- */
.mc-search-input-wrap { position: relative; }
.mc-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    box-shadow: var(--mc-shadow-lg);
    max-height: 420px; overflow-y: auto;
    z-index: 60;
}
.mc-sr-empty {
    padding: 14px 16px; color: var(--mc-muted); font-size: 1.44rem; text-align: center;
}
.mc-sr-item {
    display: flex; gap: 12px; padding: 10px 12px;
    text-decoration: none; color: var(--mc-ink);
    border-bottom: 1px solid var(--mc-line);
    transition: background .1s;
}
.mc-sr-item:last-of-type { border-bottom: 0; }
.mc-sr-item:hover, .mc-sr-item.is-active {
    background: var(--mc-bg); text-decoration: none; color: var(--mc-ink);
}
.mc-sr-img {
    width: 44px; height: 44px; flex: 0 0 44px;
    background: var(--mc-bg); border-radius: 6px;
    display: grid; place-items: center; overflow: hidden;
}
.mc-sr-img img { width: 100%; height: 100%; object-fit: cover; }
.mc-sr-body { flex: 1; min-width: 0; }
.mc-sr-title {
    font-weight: 600; font-size: 1.472rem;
    color: var(--mc-navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-sr-price {
    font-size: 1.36rem; font-weight: 600;
    color: var(--mc-cash-dark);
    margin-top: 2px;
}
.mc-sr-viewall {
    display: block; padding: 10px 14px;
    background: var(--mc-navy); color: #fff;
    text-align: center; font-size: 1.36rem; font-weight: 600;
    text-decoration: none;
}
.mc-sr-viewall:hover, .mc-sr-viewall.is-active {
    background: var(--mc-navy-deep); color: #fff; text-decoration: none;
}

/* ---------- Sections ---------- */
/* Explicit bg so the section doesn't inherit a dark body bg from the
   legacy site's "bg-wallpaper" rule. */
.mc-section { padding: 80px 0; background: var(--mc-bg, #F8FAFC); color: var(--mc-ink, #1E293B); }
.mc-section.alt { background: #fff; }
.mc-section-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.mc-section-head h2 { font-size: 3.84rem; }
.mc-section-head p  { color: var(--mc-muted); font-size: 1.92rem; line-height: 1.5; }
.mc-section-head-tight { margin-bottom: 28px; }
.mc-section-head-tight h2 { font-size: 2.88rem; margin-bottom: 6px; }
.mc-section-head-tight p { font-size: 1.6rem; }

/* ---------- About / "single page intro" block ---------- */
.mc-about {
    background: #fff;
    border-bottom: 1px solid var(--mc-line);
    padding: 56px 0;
}
.mc-about-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 48px;
}
.mc-about-head   { flex: 0 0 40%; min-width: 0; }
.mc-about-points { flex: 1 1 auto; min-width: 0; }
.mc-about-head h2 {
    font-size: 2.72rem;
    line-height: 1.15;
    margin-bottom: 14px;
}
.mc-about-lead {
    font-size: 1.68rem;
    line-height: 1.55;
    color: var(--mc-ink);
    margin: 0;
}
.mc-eyebrow-dark {
    background: rgba(14, 31, 58, .08);
    color: var(--mc-navy);
    margin-bottom: 14px;
}
.mc-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.mc-about-point {
    background: var(--mc-bg);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
    padding: 18px 18px 16px;
    position: relative;
}
.mc-about-point-num {
    display: inline-block;
    color: var(--mc-cash-dark);
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.mc-about-point h4 {
    font-size: 1.55rem;
    margin: 0 0 6px;
    color: var(--mc-navy);
    font-weight: 700;
}
.mc-about-point p {
    margin: 0;
    color: var(--mc-muted);
    font-size: 1.36rem;
    line-height: 1.45;
}
.mc-about-point:nth-child(3) {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(245,158,11,.06));
    border-color: rgba(16,185,129,.25);
}
@media (max-width: 900px) {
    .mc-about-grid { flex-direction: column !important; gap: 28px; }
    .mc-about-head, .mc-about-points { flex: 1 1 auto; }
    .mc-about-points { grid-template-columns: 1fr; }
    .mc-about-point:nth-child(3) { grid-column: auto; }
}

/* ---------- Bestsellers inline (compact band at top of catalogue) ---------- */
.mc-bestsellers-inline {
    margin-bottom: 24px;
}
.mc-bestsellers-inline .product-box-inner {
    background: #fff !important;
    border: 1px solid var(--mc-line) !important;
    border-radius: var(--mc-radius-sm);
    padding: 16px 18px !important;
    box-shadow: none !important;
}
.mc-bestsellers-inline .product-head { margin-bottom: 12px; }
.mc-bestsellers-inline .product-head h2 {
    font-size: 1.6rem;
    color: var(--mc-navy);
    margin: 0;
    display: inline-block;
}
.mc-bestsellers-inline .product-head h2::after {
    content: " · Current top sellers in this category";
    color: var(--mc-muted);
    font-weight: 500;
    font-size: 1.36rem;
}
.mc-bestsellers-inline .product-head-sub { display: none; }
.mc-bestsellers-inline .product-outer-wrap {
    background: #fff;
    border: 1px solid var(--mc-line) !important;
    border-radius: var(--mc-radius-sm);
    padding: 10px;
}

/* ---------- Platform tiles (compact) ---------- */
.mc-section.mc-section-tiles { padding: 56px 0; }
.mc-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.mc-platform-card {
    background: var(--mc-card); border-radius: var(--mc-radius);
    padding: 18px 16px; text-align: center;
    border: 1px solid var(--mc-line);
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
    position: relative; overflow: hidden;
    min-height: 0;
    color: var(--mc-ink);
}
.mc-platform-card:hover {
    transform: translateY(-2px); box-shadow: var(--mc-shadow-md);
    border-color: var(--mc-cash); text-decoration: none;
    color: var(--mc-ink);
}
.mc-platform-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.6rem; font-weight: 800; color: #fff;
    letter-spacing: -.02em;
    margin-bottom: 2px;
}
.mc-icon-ma     { background: linear-gradient(135deg,#1E3A8A,#3B82F6); }
.mc-icon-vudu   { background: linear-gradient(135deg,#0E7490,#22D3EE); }
.mc-icon-itunes { background: linear-gradient(135deg,#475569,#0F172A); }
.mc-icon-disney { background: linear-gradient(135deg,#1E1B4B,#7C3AED); }
.mc-icon-lions  { background: linear-gradient(135deg,#92400E,#F59E0B); }
.mc-icon-param  { background: linear-gradient(135deg,#0C4A6E,#0EA5E9); }
.mc-platform-name { font-weight: 700; color: var(--mc-navy); font-size: 1.55rem; line-height: 1.2; margin-top: 2px; }
.mc-platform-meta { color: var(--mc-muted); font-size: 1.2rem; line-height: 1.35; }
.mc-platform-count {
    background: var(--mc-bg); color: var(--mc-ink);
    padding: 4px 10px; border-radius: 999px;
    font-size: 1.2rem; font-weight: 700;
    margin-top: 2px;
}
.mc-badge-4k {
    position: absolute; top: 10px; right: 10px;
    background: var(--mc-gold); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 1rem; font-weight: 700;
    letter-spacing: .03em;
}
.mc-badge-soon {
    position: absolute; top: 10px; right: 10px;
    background: var(--mc-muted); color: #fff;
    padding: 2px 8px; border-radius: 4px;
    font-size: 1rem; font-weight: 600;
}
.mc-platform-card.is-empty { opacity: .82; }

/* ---------- How it works ---------- */
.mc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.mc-step  { text-align: center; padding: 24px; }
.mc-step-num {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--mc-navy); color: #fff;
    font-weight: 700; font-size: 2.48rem;
    display: grid; place-items: center; margin: 0 auto 20px;
}
.mc-step h3 { font-size: 2.24rem; margin-bottom: 10px; }
.mc-step p  { font-size: 1.68rem; color: var(--mc-muted); }

/* ---------- Catalogue wrapper ---------- */
.mc-section-catalogue { background: #fff; }
.mc-category-wrap {
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    padding: 18px;
}
/* Tone down the legacy product grid headings and inner panel padding that
   the existing CategoryContent panel emits, so it nests inside our card
   without doubling up borders. */
.mc-category-wrap .product-box-inner-s,
.mc-category-wrap .allproduct-wrap {
    border: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
}
.mc-category-wrap .pagination-wrap {
    border: 1px solid var(--mc-line) !important;
    background: var(--mc-bg);
    border-radius: var(--mc-radius-sm);
    padding: 14px 18px !important;
    margin-bottom: 18px;
}
/* Hide the redundant pieces of Panel.CategoryHeading on this page — the
   category title and description are already in the hero; the subcategory
   list is replaced by our richer platform tile grid above. */
.mc-category-wrap > .allproduct-wrap > h2,
.mc-category-wrap > .allproduct-wrap > .CategoryDescription,
.mc-category-wrap .SubCategoryListGrid,
.mc-category-wrap .SubCategoryList {
    display: none !important;
}
/* The "Other Products In..." H3 inside CategoryContent is redundant once
   it's nested under our own section heading. */
.mc-category-wrap .product-box-inner-s > h3:first-child {
    display: none;
}

/* Pagination chips */
.mc-category-wrap .pagination-wrap a,
.mc-category-wrap .pagination-wrap span.ActivePage,
.mc-category-wrap .pagination-wrap .Page,
.mc-category-wrap .pagination-wrap li {
    border-radius: 6px !important;
}

/* Product card type bump and a subtle card surface so cards read clearly
   when nested under our white catalogue card. */
.mc-category-wrap .product-outer-wrap {
    background: #fff;
    border: 1px solid var(--mc-line) !important;
    border-radius: var(--mc-radius-sm);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s;
}
.mc-category-wrap .product-outer-wrap:hover {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-md);
    border-color: var(--mc-cash) !important;
}
.mc-category-wrap .product-in-name,
.mc-category-wrap .product-in-name a {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--mc-navy) !important;
}
.mc-category-wrap .product-in-price {
    font-size: 1.84rem !important;
    font-weight: 700 !important;
    color: var(--mc-cash-dark) !important;
    margin-top: 6px !important;
}

/* CategorySortBox + price filter live INSIDE .pagination-wrap. Make them
   read as a clean filter strip rather than the legacy Bootstrap grid. */
.mc-category-wrap .pagination-wrap select,
.mc-category-wrap .pagination-wrap input[type="text"] {
    border: 1px solid var(--mc-line) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 1.44rem !important;
    background: #fff !important;
}

/* ---------- Trust ---------- */
.mc-trust { background: var(--mc-navy, #0E1F3A); color: #fff; }
.mc-trust h2 { color: #fff; }
.mc-trust .mc-section-head p { color: rgba(255,255,255,.78); }
.mc-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.mc-trust-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--mc-radius);
    padding: 32px 24px; text-align: center;
}
.mc-trust-stat .num { font-size: 4.16rem; font-weight: 800; color: var(--mc-gold); line-height: 1; }
.mc-trust-stat .lbl { font-size: 1.6rem; color: rgba(255,255,255,.82); margin-top: 8px; }
.mc-trust-widget { margin-top: 32px; }

/* ---------- FAQ ---------- */
.mc-faq-list details {
    background: #fff; border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius); padding: 22px 26px; margin-bottom: 12px;
}
.mc-faq-list summary {
    font-weight: 700; color: var(--mc-navy); cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.76rem;
}
.mc-faq-list summary::-webkit-details-marker { display: none; }
.mc-faq-list summary::after { content: "+"; color: var(--mc-cash-dark); font-size: 2.56rem; font-weight: 400; }
.mc-faq-list details[open] summary::after { content: "–"; }
.mc-faq-list .answer { color: var(--mc-ink); margin-top: 12px; font-size: 1.632rem; line-height: 1.55; }

/* ---------- Final CTA ---------- */
.mc-final-cta {
    background: linear-gradient(135deg, var(--mc-cash, #10B981) 0%, var(--mc-cash-dark, #0E9F70) 100%);
    color: #fff; text-align: center; padding: 80px 0;
}
.mc-final-cta h2 { color: #fff; font-size: 4.16rem; }
.mc-final-cta p { color: rgba(255,255,255,.94); max-width: 680px; margin: 0 auto 32px; font-size: 1.92rem; line-height: 1.5; }
.mc-final-cta .mc-btn { margin: 0 6px; }
.mc-btn-cta-solid {
    background: #fff !important;
    color: var(--mc-navy, #0E1F3A) !important;
    border: 0 !important;
}
.mc-btn-cta-solid:hover {
    background: var(--mc-navy) !important;
    color: #fff !important;
}
.mc-btn-cta-outline {
    background: rgba(15,31,58,.18) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
.mc-btn-cta-outline:hover {
    background: #fff !important;
    color: var(--mc-cash-dark) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .mc-page h1 { font-size: 4.16rem; }
    .mc-page h2 { font-size: 3.2rem; }
    .mc-hero h1 { font-size: 4.48rem; }
    .mc-section { padding: 64px 0; }
}
@media (max-width: 900px) {
    .mc-page h1 { font-size: 3.52rem; }
    .mc-hero { padding: 0 0 56px; }
    .mc-hero h1 { font-size: 3.84rem; }
    .mc-lead { font-size: 1.76rem; }
    .mc-steps { grid-template-columns: 1fr; gap: 20px; }
    .mc-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-trust-stat .num { font-size: 3.2rem; }
    .mc-section-head h2 { font-size: 3.04rem; }
    .mc-final-cta h2 { font-size: 3.2rem; }
}
@media (max-width: 600px) {
    .mc-page { font-size: 16px; }
    .mc-hero { padding: 0 0 48px; }
    .mc-section { padding: 48px 0; }
    .mc-platform-card { min-height: 220px; padding: 26px 20px; }
    .mc-page .container { padding: 0 18px; }
    .mc-btn { padding: 14px 24px; font-size: 1.6rem; }
}

/* =============================================================
   COMPACT MARKETPLACE STRIP — merged "Shop by platform" + "About
   the marketplace" into a single section so the visitor reaches
   the catalogue without 600px+ of vertical scrolling. Also adds
   the .mc-catalogue-head row + .mc-howto-strip pills that replace
   the old standalone "Buy a movie in three clicks" section.
   ============================================================= */
.mc-section-marketplace { padding: 36px 0 28px; background: var(--mc-bg); }
.mc-mp-head { margin-bottom: 16px; max-width: 820px; }
.mc-mp-head-text h2 { font-size: 2.72rem; margin: 0 0 4px; }
.mc-mp-head-text p  { color: var(--mc-muted); font-size: 1.6rem; margin: 0; }

/* Ultra-compact platform "menu" — small inline pills that wrap.
   Replaces the tile cards: now reads as a small text menu with icons,
   so the catalogue is visible without scrolling on a phone or laptop. */
.mc-platform-grid-compact {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    grid-template-columns: none;
}
.mc-platform-grid-compact .mc-platform-card {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 6px 12px 6px 6px;
    gap: 8px;
    min-height: 0;
    border-radius: 999px;
    border: 1px solid var(--mc-line);
    background: #fff;
    box-shadow: none;
}
.mc-platform-grid-compact .mc-platform-card:hover {
    border-color: var(--mc-cash);
    transform: none;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.mc-platform-grid-compact .mc-platform-icon {
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 7px;
    font-size: .96rem;
    margin: 0;
}
.mc-platform-grid-compact .mc-platform-body { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; min-width: 0; }
.mc-platform-grid-compact .mc-platform-name {
    font-size: 1.36rem; margin: 0;
    white-space: nowrap;
    font-weight: 600;
}
.mc-platform-grid-compact .mc-platform-meta {
    display: none; /* description hidden in compact mode */
}
.mc-platform-grid-compact .mc-platform-count {
    margin: 0; flex: 0 0 auto;
    font-size: 1.04rem;
    padding: 1px 7px;
    background: transparent;
    color: var(--mc-muted);
    font-weight: 600;
}
/* The 4K / "Coming soon" badges were absolutely positioned assuming the
   tall card layout. In the compact pill they crash into the count text
   and break onto extra lines on narrow viewports. Hide them entirely —
   the .is-empty fade (opacity .82) + the count number itself already
   communicate "this platform is live with N titles" vs "0 — coming soon". */
.mc-platform-grid-compact .mc-badge-4k,
.mc-platform-grid-compact .mc-badge-soon {
    display: none !important;
}

/* Defensive flex-row: even on narrow viewports the pill MUST stay
   horizontal so it doesn't wrap [icon]/[name]/[count] onto three lines.
   The pill resizes by hiding overflow / shrinking the name with
   text-overflow if needed, not by stacking. */
.mc-platform-grid-compact .mc-platform-card {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    max-width: 100%;
}
.mc-platform-grid-compact .mc-platform-body {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    flex-wrap: nowrap !important;
}
.mc-platform-grid-compact .mc-platform-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* For platforms with 0 titles ("Coming soon"), show "Coming soon" text
   instead of the literal "0" so users don't think the platform is broken.
   The is-empty class is added by PHP on those platforms.
   We hide the original count text (font-size:0) and substitute "Coming soon"
   via the ::before pseudo so the markup stays the same — no PHP change. */
.mc-platform-grid-compact .mc-platform-card.is-empty .mc-platform-count {
    font-size: 0;
    color: var(--mc-muted);
}
.mc-platform-grid-compact .mc-platform-card.is-empty .mc-platform-count::before {
    content: 'Coming soon';
    font-size: 1.04rem;
    font-style: italic;
    font-weight: 600;
}

/* About blurb + 3-up trust strip below the tiles.
   Uses flexbox + stretch (not grid) for the same reason as the hero —
   it survives any cached/conflicting global rules that have broken
   `display: grid` on this codebase before. */
.mc-mp-trust-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px;
    align-items: stretch !important;
    margin-top: 14px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-sm);
}
.mc-mp-trust-intro {
    flex: 0 0 34%;
    margin: 0;
    font-size: 1.36rem;
    line-height: 1.5;
    color: var(--mc-ink);
    border-right: 1px solid var(--mc-line);
    padding-right: 24px;
    align-self: center;
}
.mc-mp-trust-intro strong {
    display: block;
    color: var(--mc-navy);
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.mc-mp-trust-points {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    align-items: stretch !important;
}
.mc-mp-trust-point {
    flex: 1 1 0;
    border-left: 3px solid var(--mc-cash);
    padding-left: 12px;
    line-height: 1.4;
}
.mc-mp-trust-point strong {
    display: block;
    color: var(--mc-navy);
    font-size: 1.36rem;
    margin-bottom: 2px;
}
.mc-mp-trust-point span {
    color: var(--mc-muted);
    font-size: 1.24rem;
}
@media (max-width: 1100px) {
    .mc-mp-trust-row { flex-direction: column !important; }
    .mc-mp-trust-intro {
        flex: 1 1 auto;
        border-right: 0;
        border-bottom: 1px solid var(--mc-line);
        padding-right: 0;
        padding-bottom: 14px;
        margin-bottom: 4px;
    }
}
@media (max-width: 700px) {
    .mc-mp-trust-points { flex-direction: column !important; gap: 10px; }
}

/* Hide the entire "About the marketplace" trust strip on phones —
   the copy and the 3 trust points are redundant on a small screen and
   eat space the visitor would rather use to scroll into the catalogue. */
@media (max-width: 768px) {
    .mc-section-marketplace .mc-mp-trust-row { display: none !important; }
}

/* Legacy BigCommerce "Compare Selected" button is irrelevant for movie
   codes (one redemption per code — there's nothing to compare side by
   side). Hide it both at the top of the form and at the bottom. */
.mc-page .CompareButton,
.mc-category-wrap .CompareButton,
.mc-category-wrap form#frmCompare > .CompareButton { display: none !important; }

/* =============================================================
   COMPACT CATALOGUE HEAD — title left, 3-step pills right, on one
   row at desktop. Replaces the old full-section "Buy a movie in
   three clicks" panel.
   ============================================================= */
.mc-section-catalogue { padding: 28px 0 56px; }
.mc-catalogue-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.mc-catalogue-head-title { min-width: 240px; }
.mc-catalogue-head-title h2 { font-size: 2.72rem; margin: 0 0 4px; }
.mc-catalogue-head-title p  { color: var(--mc-muted); font-size: 1.52rem; margin: 0; }

.mc-howto-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mc-howto-strip li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    font-size: 1.28rem;
    color: var(--mc-ink);
    line-height: 1.2;
}
.mc-howto-strip .mc-howto-num {
    width: 22px; height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: var(--mc-navy);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    display: grid; place-items: center;
}
.mc-howto-strip strong { color: var(--mc-navy); font-weight: 700; }
@media (max-width: 700px) {
    .mc-howto-strip { width: 100%; }
    .mc-howto-strip li { flex: 1 1 100%; }
}