/*
Theme Name: 404 Cenxus
Description: Mobile-first course-commerce theme for WordPress + LearnDash + WooCommerce: a block-based Homepage/Storefront (Hero, Course Grid/List/Tabs, Deals, Packages, and more — Kadence Blocks compatible), Course Detail, Lesson/Topic learning pages, and a learner Learning Center. Requires the 404 Cenxus plugin.
Author: Custom Build
Version: 1.0.26
Text Domain: 404-cenxus-theme
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme is not officially affiliated with, sponsored by, or endorsed
by WooCommerce (Automattic Inc.), LearnDash (LearnDash LLC), WhatsApp/
Facebook/Meta (Meta Platforms, Inc.), Google (Google LLC), VdoCipher
(Cabot Technology Solutions Pvt. Ltd.), or Kadence Blocks (Kadence WP).
All trademarks referenced are the property of their respective owners
and are used only to describe compatibility. See LICENSE.txt.
*/

/* ===================== Design Tokens (404 Cenxus) ===================== */
/*
 * STEP 1: canonical --c404-* Design Token layer (see
 * docs/THEME-ARCHITECTURE.md, "Design Tokens"). The original variable
 * names below (--ink, --brand, etc.) are kept and now simply alias the
 * new tokens, so no existing CSS rule, inline style, or Block needs to
 * change — this is purely additive, not a value change.
 */
:root {
	/* Color */
	--c404-primary: #4338CA;
	--c404-secondary: #FF7A3D;
	--c404-bg: #F7F6F3;
	--c404-surface: #FFFFFF;
	--c404-text: #16171B;
	--c404-text-muted: #7A7D85;
	--c404-border: #ECEAE5;
	--c404-success: #17A897;
	--c404-warning: #FF7A3D;
	--c404-error: #FF4757;
	--c404-price: #E8432F;
	--c404-sale: #FF4757;

	/* Spacing */
	--c404-space-xs: 4px;
	--c404-space-sm: 8px;
	--c404-space-md: 14px;
	--c404-space-lg: 20px;
	--c404-space-xl: 28px;
	--c404-space-2xl: 40px;

	/* Radius */
	--c404-radius-sm: 8px;
	--c404-radius-md: 14px;
	--c404-radius-lg: 20px;
	--c404-radius-pill: 999px;

	/* Shadow */
	--c404-shadow-sm: 0 1px 2px rgba(22,23,27,.06);
	--c404-shadow-md: 0 4px 16px rgba(22,23,27,.08);
	--c404-shadow-lg: 0 12px 32px rgba(22,23,27,.12);

	/* Type scale (CSS px). Page titles 22, section titles 18, card titles 15, body / buttons 14, auxiliary 12.5,
	   smallest auxiliary 12. Form fields stay at 16 so mobile browsers never zoom into them. */
	--c404-fs-page: 22px;
	--c404-fs-section: 18px;
	--c404-fs-card: 15px;
	--c404-fs-body: 14px;
	--c404-fs-meta: 12.5px;
	--c404-fs-small: 12px;
	--c404-fs-input: 16px;
	--c404-lh-tight: 1.3;
	/* Touch targets and the one page gutter */
	--c404-tap: 44px;
	--c404-gutter: 16px;

	/* Layout */
	--c404-content-width: 720px;
	--c404-wide-width: 1080px;
	--c404-app-width: 480px;

	/* ---- Legacy aliases (backward compatibility — existing CSS below,
	   and every existing Block, reference these names unchanged) ---- */
	--ink: var(--c404-text);
	--ink-soft: var(--c404-text-muted);
	--bg: var(--c404-bg);
	--surface: var(--c404-surface);
	--line: var(--c404-border);
	--brand: var(--c404-primary);      /* deep indigo — navigation / system chrome */
	--brand-soft: #EEECFB;
	--commerce: var(--c404-secondary); /* warm orange — buy buttons, quick actions */
	--commerce-soft: #FFF1E6;
	--price: var(--c404-price);        /* price emphasis */
	--sale: var(--c404-sale);          /* discount ribbon */
	--ok: var(--c404-success);
	--font-ui: -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--radius: var(--c404-radius-md);
	--radius-sm: var(--c404-radius-sm);
	--app-max: var(--c404-app-width);
	--tabbar-h: 58px;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--c404-fs-body);
	line-height: 1.55;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* §8: responsive image baseline. max-width alone was already here, but
   without height:auto an <img> with WordPress's own width/height HTML
   attributes (added by default, for layout-shift prevention) keeps its
   original height while its width scales down on a narrow viewport —
   visibly squashed/distorted. Component-specific rules further down
   this file (Course/Product cards, Hero/banner, thumbnails) that
   intentionally use height:100%; object-fit:cover to crop within a
   fixed-aspect box are all written with a class-qualified selector
   (e.g. .c404-course-hero__media img), which is more specific than
   this bare `img` rule and continues to override it correctly. */
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* ---- v1.0.4 Unified App Shell ----
   ONE mobile-first layout at every viewport size: full width on phones,
   a centered ~480px column (--app-max) on anything wider. There is no
   separate tablet/desktop information architecture — the former
   `c404-wide` body class that widened this shell to 900px/1080px on
   Course, Lesson, Learning Center, Account and WooCommerce pages has
   been retired (see inc/core/shell.php), as have the two-column Course
   Detail and sidebar My Account layouts. Scoped to .c404t-app only:
   the WordPress admin toolbar, wp-admin, modals and other plugin output
   rendered outside it are never constrained.
   overflow-x: clip (not hidden) is a last-resort guard against a stray
   wide child causing horizontal page scroll; unlike `hidden` it does
   not create a scroll container, so the sticky topbar keeps working. */
/* r12: a column — header pieces, the page content (.c404t-app__main, which grows), the footer. A short page pushes
   the Copyright footer to the bottom of the screen; a long page simply has it after the content. No fixed footer, no
   fixed page height: min-height is the viewport (dynamic viewport where supported), and the padding keeps the fixed
   bottom tab bar and the phone's safe area clear of the footer. */
.c404t-app {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--app-max);
	margin-inline: auto;
	overflow-x: clip;
	/* The viewport less the WordPress admin bar (logged-in users; WordPress sets the variable), so a short page never
	   pushes its footer under the fixed tab bar by the admin bar's height. */
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	background: var(--bg);
	position: relative;
	padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
}
.c404t-app > * { flex-shrink: 0; min-width: 0; }
.c404t-app > .c404t-app__main { flex: 1 0 auto; }
@media (min-width: 600px) {
	.c404t-app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 40px rgba(0,0,0,0.04); }
}

/* ===================== Search bar ===================== */
.c404t-searchbar {
	padding: 12px 16px;
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 30;
}
/*
 * One search look everywhere (c404t_render_search_form(), inc/components/search-form.php): the Home bar's pill —
 * surface background, 1px line border, 999px radius, 9px 16px padding, 14px text. The magnifier is the submit
 * button (24px+ target, accessible name, visible focus); the whole pill shows focus while typing. Also used by
 * the 404 Cenxus Plugin's Library and Course Filter searches (same class names).
 */
.c404t-search {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	background: var(--surface);
	border-radius: 999px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	font-family: inherit;
}
.c404t-search:focus-within { border-color: var(--c404-primary); box-shadow: 0 0 0 2px rgba(67, 56, 202, .15); }
.c404t-search .c404t-search__input,
.c404t-search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	font-family: inherit;
	font-size: var(--c404-fs-input);
	line-height: 1.25;
	color: var(--ink);
}
.c404t-search .c404t-search__input::placeholder { color: var(--ink-soft); opacity: 1; }
.c404t-search .c404t-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -5px -2px -5px -8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Touch target 44 x 44 around the 28 px button, without moving the field: an invisible extension that reaches into
   the field's own padding on the left and only into the 6 px gap on the right (never over the text input). */
.c404t-search .c404t-search__submit { position: relative; }
.c404t-search .c404t-search__submit::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: -12px; right: -6px; }
.c404t-search .c404t-search__submit:hover { color: var(--ink); background: var(--bg); }
.c404t-search .c404t-search__submit:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 1px; color: var(--ink); }
.c404t-search .c404t-search__submit[aria-disabled="true"] { opacity: .55; cursor: progress; }
.c404t-search .c404t-search__icon { display: block; width: 18px; height: 18px; }

/* ===================== Back-button topbar (every page except the front page) — v1 contract: Back | Cart only ===================== */
/* v1.0.3: explicit start/end slots + space-between (see header.php).
   Horizontal padding matches the 16px content gutter (.c404t-section,
   .c404-course-detail__layout) so Back/Cart line up with page content;
   6px vertical padding + 44px controls gives a 56px bar with
   comfortable touch targets. */
.c404t-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 6px 16px;
	background: rgba(247,246,243,0.92);
	backdrop-filter: saturate(180%) blur(8px);
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--line);
}
.c404t-topbar__start { display: flex; align-items: center; flex-shrink: 0; }
.c404t-topbar__back {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--brand);
	flex-shrink: 0;
}
.c404t-topbar__back svg { display: block; }
.c404t-topbar__back:active { background: var(--brand-soft); }
.c404t-topbar__back:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 0; }

/* ===================== Hero ===================== */
.c404t-hero {
	margin: 0 16px 18px;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16/9;
	background: radial-gradient(circle at 30% 20%, #2A2470 0%, #14123A 55%, #0A0918 100%);
	position: relative;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.c404t-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.c404t-hero__overlay { position: relative; z-index: 2; padding: 18px; }
.c404t-hero__eyebrow { font-size: var(--c404-fs-small); letter-spacing: 2px; opacity: 0.7; text-transform: uppercase; }
.c404t-hero__title { font-size: var(--c404-fs-section); font-weight: 800; margin-top: 6px; }

/* ===================== Quick action icons ===================== */
/* Three per row; more wrap onto the next row (centred). Exactly two share the row half and half; one is centred. */
.c404t-quick-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 0 16px 20px;
}
.c404t-quick-item {
	flex: 0 0 calc((100% - 20px) / 3); min-width: 0; box-sizing: border-box;
	display: flex; flex-direction: column; align-items: center;
	min-height: 44px; padding: 2px 0; text-align: center; text-decoration: none;
}
.c404t-quick-item:first-child:nth-last-child(2),
.c404t-quick-item:first-child:nth-last-child(2) ~ .c404t-quick-item { flex-basis: calc((100% - 10px) / 2); }
/* The same in the editor, where the "add block" button is one more child of the row. */
.c404t-quick-row > .c404t-quick-item:nth-child(1 of .c404t-quick-item):nth-last-child(2 of .c404t-quick-item),
.c404t-quick-row > .c404t-quick-item:nth-child(2 of .c404t-quick-item):nth-last-child(1 of .c404t-quick-item) { flex-basis: calc((100% - 10px) / 2); }
.c404t-quick-row > .block-list-appender { flex: 0 0 100%; }
.c404t-quick-icon {
	width: 50px; height: 50px; flex: 0 0 auto; box-sizing: border-box; overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--commerce) 0%, #FFB067 100%);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; line-height: 1;
	margin: 0 auto 8px;
}
.c404t-quick-icon--clear { background: transparent; }
/* A Media Library image: the same 50 x 50 box for every icon, the whole image shown at its own proportions (more
   specific than the later `.c404t-app img { height: auto }`). */
.c404t-quick-row .c404t-quick-icon img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.c404t-quick-item span { max-width: 100%; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }

/* ===================== Section shell ===================== */
.c404t-section { padding: 4px var(--c404-gutter) 20px; }
.c404t-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.c404t-section__title { font-size: var(--c404-fs-section); font-weight: 800; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; min-width: 0; }
.c404t-section__more { flex: 0 0 auto; font-size: var(--c404-fs-meta); color: var(--ink-soft); }

/* ===================== Discount rail (single featured card) ===================== */
.c404t-deal-card {
	display: flex;
	gap: 12px;
	background: var(--surface);
	border-radius: var(--radius);
	padding: 10px;
	border: 1px solid var(--line);
	position: relative;
}
.c404t-deal-card__thumb { width: 108px; height: 78px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--brand-soft); position: relative; }
.c404t-deal-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c404t-ribbon {
	position: absolute; top: 6px; left: 6px;
	background: var(--sale); color: #fff;
	font-size: 10px; font-weight: 800;
	padding: 2px 6px; border-radius: 4px;
}
.c404t-deal-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.c404t-deal-card__title { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c404t-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.c404t-price { font-family: var(--font-mono); font-weight: 800; color: var(--price); font-size: 15px; }
.c404t-price--old { font-family: var(--font-mono); color: var(--ink-soft); font-size: 12px; text-decoration: line-through; }
.c404t-badge-ended { background: var(--line); color: var(--ink-soft); font-size: var(--c404-fs-small); font-weight: 600; line-height: 1.5; padding: 2px 10px; border-radius: var(--c404-radius-pill); margin-left: auto; }

/* ===================== Tabs ===================== */
.c404t-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c404t-tabs button {
	background: none; border: none; padding: 6px 0 10px; font-size: 15px; font-weight: 700;
	color: var(--ink-soft); border-bottom: 2px solid transparent; cursor: pointer;
	white-space: nowrap; flex-shrink: 0;
}
.c404t-tabs button.is-active { color: var(--ink); border-color: var(--commerce); }
.c404t-tab-panel { display: block; } /* STEP 2.1: no-JS fallback — every tab panel's content stays visible/reachable (stacked, no tab switching) when JS hasn't run. */
.c404-js .c404t-tab-panel { display: none; }
.c404-js .c404t-tab-panel.is-active { display: block; }

/* ===================== Course row cards ===================== */
.c404t-course-list { display: flex; flex-direction: column; gap: var(--c404-list-gap, 12px); }
.c404t-course-row {
	display: flex; gap: 12px;
	background: var(--surface);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	padding: 10px;
}
.c404t-course-row__thumb { width: 96px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--brand-soft); }
.c404t-course-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c404t-course-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.c404t-course-row__title { font-size: var(--c404-fs-card); font-weight: 700; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; }
.c404t-course-row__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.c404t-view-count { font-size: var(--c404-fs-meta); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.c404t-more-link { display: block; text-align: center; padding: 12px 0 2px; color: var(--ink-soft); font-size: 13px; }
/* Course Grid "One section per category": the sections of one block, spaced like separate Home sections. */
.c404t-category-section + .c404t-category-section { margin-top: var(--c404-space-lg); }

/* ===================== Packages storefront (v1.0.3) =====================
   Markup: inc/blocks/packages/render.php. Replaces the earlier dark
   gradient "pricing plan" cards (and the `.c404t-packages .c404-btn`
   white-button override that went with them). One column inside the
   ~480px Home column; `auto-fill` + `min(100%, 260px)` lets the same
   grid go multi-column wherever the block is placed in a wider layout,
   without ever forcing a card narrower than its container. */
.c404-package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.c404-package-card {
	display: flex; flex-direction: column; min-width: 0;
	background: var(--c404-surface); border: 1px solid var(--c404-border);
	border-radius: var(--c404-radius-lg); overflow: hidden; box-shadow: var(--c404-shadow-sm);
}
a.c404-package-card__media { display: block; color: inherit; }
.c404-package-card__media { position: relative; aspect-ratio: 2/1; background: var(--c404-border); overflow: hidden; }
.c404-package-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c404-package-card__media.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--c404-primary) 0%, #221D63 100%); color: rgba(255,255,255,0.75);
}
.c404-package-card__sale {
	position: absolute; top: 10px; left: 10px;
	background: var(--c404-sale); color: #fff; font-size: 11px; font-weight: 800;
	padding: 3px 9px; border-radius: var(--c404-radius-pill);
}
.c404-package-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; min-width: 0; }
.c404-package-card__title { margin: 0; font-size: var(--c404-fs-card); font-weight: 800; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; }
.c404-package-card__title a { color: inherit; }
.c404-package-card__desc {
	margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c404-text-muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.c404-package-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c404-package-card__facts li {
	display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
	border-radius: var(--c404-radius-pill); background: var(--brand-soft); color: var(--c404-primary);
	font-size: 12px; font-weight: 700;
}
.c404-package-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 6px; }
.c404-package-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 18px; font-weight: 800; color: var(--c404-price); }
.c404-package-card__price del { font-size: 13px; font-weight: 600; color: var(--c404-text-muted); }
.c404-package-card__price ins { text-decoration: none; }
.c404-package-card__cta { min-height: 44px; padding: 10px 22px; flex-shrink: 0; }

.c404-package-single {
	display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; min-height: 56px;
	background: var(--c404-surface); border: 1px dashed var(--c404-border); border-radius: var(--c404-radius-md);
	color: var(--c404-text);
}
.c404-package-single__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.c404-package-single__title { font-size: 14px; font-weight: 700; }
.c404-package-single__desc { font-size: 12.5px; color: var(--c404-text-muted); }
.c404-package-single svg { flex-shrink: 0; color: var(--c404-text-muted); }
.c404-package-admin-hint { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--c404-radius-sm); background: var(--commerce-soft); color: #8A3A12; font-size: 12.5px; }

/* ===================== Featured video block ===================== */
.c404t-feature-video { border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 16/10; background: #000; }
.c404t-feature-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.c404t-feature-video__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 40px;
}
.c404t-feature-video__caption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }

/* ===================== Footer ===================== */
.c404t-footer { text-align: center; padding: 18px 16px 4px; color: var(--ink-soft); font-size: 12px; }
.c404t-footer__links a { margin: 0 8px; }
.c404t-footer__powered { margin-top: 6px; opacity: 0.7; }

/* ===================== Bottom tab bar ===================== */
.c404t-tabbar {
	position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
	width: 100%; max-width: var(--app-max);
	/* The bar is --tabbar-h of controls PLUS the phone's safe area below them (border-box: the padding is inside the
	   height, so without adding it the items were squeezed by the safe area). The page reserves the same total. */
	box-sizing: border-box;
	height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-top: 1px solid var(--line);
	display: flex;
	z-index: 40;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.c404t-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--c404-tap); color: var(--ink-soft); font-size: var(--c404-fs-small); }
.c404t-tabbar__item svg { width: 21px; height: 21px; }
.c404t-tabbar__item.is-active { color: var(--brand); font-weight: 700; }

/* ===================== Generic page shell ===================== */
.c404t-page-title { font-size: var(--c404-fs-page); font-weight: 800; line-height: var(--c404-lh-tight); padding: 4px var(--c404-gutter) 12px; margin: 0; overflow-wrap: anywhere; }
/* §5: Courses archive only — a lighter, less "repeated page title bar"
   treatment than the shared base above; other pages using
   .c404t-page-title alone are unaffected. */
.c404t-page-title--compact { padding-top: 8px; }
.c404t-empty { text-align: center; color: var(--ink-soft); padding: 32px 20px; font-size: var(--c404-fs-body); }

/* ===================== Login ===================== */
.c404t-login { padding: 40px 24px; }
.c404t-login__brand { text-align: center; margin-bottom: 30px; }
.c404t-login__brand .mark { width: 54px; height: 54px; border-radius: 16px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; margin: 0 auto 12px; }
.c404t-login__brand h1 { font-size: var(--c404-fs-page); line-height: var(--c404-lh-tight); margin: 0; }
.c404t-login__brand p { color: var(--ink-soft); font-size: 13px; margin: 4px 0 0; }
.c404t-login input[type="text"], .c404t-login input[type="password"] { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--c404-fs-input); margin-bottom: 12px; }
.c404t-login input[type="submit"] { width: 100%; min-height: var(--c404-tap); padding: 12px 15px; border: none; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-weight: 800; font-size: var(--c404-fs-body); }
.c404t-login__err { background: #FDEAE8; color: var(--sale); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }

/* ===================== Account / My page ===================== */
.c404t-account-user { display: flex; align-items: center; gap: 12px; padding: 6px 16px 16px; }
.c404t-account-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.c404t-account-list { display: flex; flex-direction: column; margin: 0 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.c404t-account-list a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.c404t-account-list a:last-child { border-bottom: none; }
.c404t-account-list a .chev { margin-left: auto; color: var(--ink-soft); }

/* ===================== Player page ===================== */
/* The stage only ever holds the Plugin's player, which sizes itself to 16:9 (padding-top) — so the stage takes its
   content's height: the player, then the Plugin's web reminder bar BELOW it when there is one. No :has() needed,
   so the bar can never overflow the stage onto the title in browsers without :has(). */
.c404t-player-stage { background: #000; }
/* A phone turned sideways (short landscape viewport) on a Lesson / Topic: the sticky top bar (56 px + 1 px border)
   and the fixed bottom bar left less height than the 16:9 player, so the bar covered its controls. Here only: the
   bottom bar is hidden (Back stays in the top bar), and the stage — whose width the player's 16:9 padding follows —
   is limited to the width whose 16:9 height fits below the top bar, centred. Nothing is cropped; the player, its
   controls, viewing records and completion are unchanged; fullscreen is the browser's / player's own. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.single-sfwd-lessons .c404t-tabbar,
	.single-sfwd-topic .c404t-tabbar { display: none; }
	.single-sfwd-lessons .c404t-app,
	.single-sfwd-topic .c404t-app { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
	.single-sfwd-lessons .c404t-player-stage,
	.single-sfwd-topic .c404t-player-stage {
		max-width: calc((100vh - 57px - env(safe-area-inset-top, 0px)) * 16 / 9);
		max-width: calc((100dvh - 57px - env(safe-area-inset-top, 0px)) * 16 / 9);
		margin-inline: auto;
	}
}
/* v1 final: featured-image media region (only rendered when the step has
   no Cenxus video but has a featured image — never an empty placeholder). */
.c404t-player-image { margin: 0; background: var(--c404-surface); }
.c404t-player-image__img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.c404t-step-unavailable { margin: 0; padding: 12px 14px; border-radius: var(--c404-radius-sm); background: var(--c404-bg); color: var(--c404-text-muted); }
.c404t-player-body { padding: 16px; }
.c404t-player-title { font-size: var(--c404-fs-page); font-weight: 800; line-height: var(--c404-lh-tight); margin: 0 0 10px; overflow-wrap: anywhere; }
.c404t-step-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.c404t-step-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.c404t-step-row:last-child { border-bottom: none; }
.c404t-step-row__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.c404t-step-row.is-done .c404t-step-row__icon { background: var(--ok); color: #fff; }
.c404t-step-row.is-active { background: var(--commerce-soft); }
.c404t-step-row__title { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.c404t-view-count { flex-shrink: 0; white-space: nowrap; }

.c404t-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--c404-tap); padding: 10px 18px; border-radius: var(--radius-sm); background: var(--commerce); color: #fff; font-weight: 700; font-size: var(--c404-fs-body); line-height: 1.2; text-align: center; border: none; }
.c404t-btn--ghost { background: #fff; border: 1px solid var(--ink); color: var(--ink); } /* Secondary: white, black text, border (never a translucent grey). */
.c404t-btn--block { display: flex; width: 100%; }

/* ===================== WooCommerce pages (Cart / Checkout / My Account) ===================== */
/* These use WooCommerce's own templates — this section only re-skins them
   to match the app's look (colors, rounded corners, spacing) rather than
   rebuilding them, since payment/account flows are exactly the kind of
   thing best left to WooCommerce's own, well-tested markup. */

.woocommerce-wrap { font-size: var(--c404-fs-body); }
.woocommerce-wrap table.shop_table,
.woocommerce-wrap table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.woocommerce-wrap table.shop_table th,
.woocommerce-wrap table.shop_table td,
.woocommerce-wrap table.woocommerce-table th,
.woocommerce-wrap table.woocommerce-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 13px;
}
.woocommerce-wrap #payment,
.woocommerce-wrap .woocommerce-checkout-review-order,
.woocommerce-wrap .cart-collaterals .cart_totals {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
}
.woocommerce-wrap input[type="text"],
.woocommerce-wrap input[type="email"],
.woocommerce-wrap input[type="tel"],
.woocommerce-wrap input[type="password"],
.woocommerce-wrap input[type="number"],
.woocommerce-wrap select,
.woocommerce-wrap textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: var(--c404-fs-input);
	background: var(--surface);
	margin-bottom: 4px;
}
.woocommerce-wrap .button,
.woocommerce-wrap button.button,
.woocommerce-wrap input.button,
.woocommerce-wrap #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--c404-tap);
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	background: var(--commerce);
	color: #fff;
	font-weight: 700;
	font-size: var(--c404-fs-body);
	line-height: 1.2;
	text-align: center;
	border: none;
	cursor: pointer;
}
.woocommerce-wrap .button:hover,
.woocommerce-wrap #place_order:hover { opacity: 0.92; }
/* WooCommerce notices (.woocommerce-message/-info/-error): see the single
   authoritative "WooCommerce notices — RC-UI-004" ruleset near the end of
   this file. */

/* My Account navigation/content layout: see the consolidated, STEP
   "Final UI Regression Fix" ruleset further down this file (search for
   "My Account — account sidebar layout") — this used to be declared
   twice (once here, once again later) with conflicting desktop
   behavior; consolidated into one place. */

/* ============================================================
   STEP 2 — Homepage / Storefront Blocks
   New component classes use the .c404- namespace (not .c404t-),
   per docs/THEME-ARCHITECTURE.md "CSS architecture". They build on
   the same --c404-* Design Tokens as the rest of the Theme.
   Mobile-first: base rules target mobile, then widened at the
   768px (tablet) and 1024px (desktop) breakpoints used throughout
   this file.
   ============================================================ */

/* Shared button (used by Hero CTA, CTA Block, Continue Learning login
   prompt, Featured Video CTA, Packages "Buy now"). */
.c404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--c404-radius-pill);
	background: var(--c404-secondary);
	color: #fff;
	font-weight: 700;
	font-size: 13.5px;
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.c404-btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ---- Section header (Block wrapper around the shared component) ---- */
.c404-section-header--center { text-align: center; }
.c404-section-header--center .c404t-section__head { justify-content: center; }
.c404-section-header__subtitle { font-size: var(--c404-fs-meta); color: var(--c404-text-muted); margin: -4px 0 10px; }

/* ---- Hero: STEP 2 additions (overlay tint, description, CTA, align) ---- */
.c404-hero--center .c404t-hero__overlay { text-align: center; }
.c404-hero__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c404-hero__tint--light { background: rgba(0,0,0,0.15); }
.c404-hero__tint--medium { background: rgba(0,0,0,0.35); }
.c404-hero__tint--dark { background: rgba(0,0,0,0.55); }
.c404-hero__desc { font-size: 13px; opacity: 0.9; margin-top: 8px; max-width: 46ch; }
.c404-hero--center .c404-hero__desc { margin-left: auto; margin-right: auto; }
.c404-hero__cta { margin-top: 12px; }

/* ---- Announcement ---- */
.c404-announcement {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--c404-primary);
	color: #fff;
	border-radius: var(--c404-radius-pill);
	font-size: 12.5px;
	margin: 10px 0;
	flex-wrap: wrap;
}
.c404-announcement--center { justify-content: center; text-align: center; }
.c404-announcement__link { color: #fff; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.c404-announcement__close {
	margin-left: auto;
	background: none;
	border: none;
	color: #fff;
	opacity: 0.8;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.c404-announcement__close:hover { opacity: 1; }

/* ---- Search ---- */
.c404-search { margin: 10px 0; }
.c404-search__heading { font-weight: 800; font-size: var(--c404-fs-section); line-height: var(--c404-lh-tight); margin-bottom: 8px; }

/* Learning Center "Search my courses" (server-side filter of the user's own list) */
.c404-lc-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 var(--c404-space-md);
}
.c404-lc-search .c404t-search { flex: 1 1 220px; width: auto; }
.c404-lc-search__status { margin: 0 0 var(--c404-space-sm); font-size: 13px; color: var(--c404-text-muted); }
/* Shared list pieces (inc/components/list-window.php, inc/core/learning-catalog.php, the Plugin's ListWindow):
   one vertical rhythm — search block → filters → list → button, each separated by --c404-list-space — the same
   with or without "Clear search", with or without filters, and for cards appended by "Load more" (the list
   containers space their children with `gap`, so appended cards get the same spacing). */
:root { --c404-list-space: 16px; --c404-list-gap: 12px; }
.c404t-searchblock { margin: 0 0 var(--c404-list-space); }
/* "Clear search" — ONE compact control under every search bar (Courses page, product catalogue, the Plugin's Library
   and Course Filter): a small pill link with a clear icon, visible keyboard focus; directly under the bar. */
.c404t-searchblock > .c404t-search-clear { margin: 8px 0 0; }
.c404t-search-clear { margin: 8px 0 var(--c404-list-space); line-height: 1; }
.c404t-search-clear a {
	display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-height: 28px; padding: 4px 10px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft);
	font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.c404t-search-clear a:hover { color: var(--ink); border-color: var(--ink-soft); }
.c404t-search-clear a:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; color: var(--ink); }
.c404t-search-clear__icon { display: block; flex: 0 0 auto; }
.c404t-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--c404-list-space); }
.c404t-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); text-decoration: none; background: transparent; }
.c404t-chip.is-active { background: var(--c404-primary); border-color: var(--c404-primary); color: #fff; }
/* Filter selects (c404t_render_filter_form()): purchase catalogue category + All / Free / Paid, Courses page category.
   One look: native <select>s side by side (wrapping on narrow screens), 44px high, the field's own arrow. "Apply"
   submits without JavaScript; with JavaScript a choice opens at once, so the button is hidden. */
.c404t-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--c404-list-space); min-width: 0; }
.c404t-filter { flex: 1 1 140px; min-width: 0; max-width: 100%; }
.c404t-filter__select {
	box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 36px 8px 14px; margin: 0;
	border: 1px solid var(--line); border-radius: var(--c404-radius-pill); background-color: var(--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%237A7D85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
	-webkit-appearance: none; appearance: none; color: var(--ink); font: inherit; font-size: var(--c404-fs-input); line-height: 1.3;
	text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.c404t-filter__select:hover { border-color: var(--ink-soft); }
.c404t-filter__select:disabled { padding-right: 14px; color: var(--ink-soft); background-color: var(--bg); background-image: none; border-color: var(--line); cursor: default; } /* Nothing to choose yet (e.g. no Course categories). */
.c404t-filter__select:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.c404t-filters__apply {
	box-sizing: border-box; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: var(--c404-radius-pill);
	background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.c404t-filters__apply:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.c404-js .c404t-filters__apply { display: none; }
/* "Load more" / "Show more" and the "View all" link under a short list: one SECONDARY button in every list (Theme
   and Plugin): white background, black text, a black 1 px border, the shared corner radius, at least 44 px high —
   never a translucent grey. The primary actions (Buy now, Continue Learning: .c404t-btn filled) stay the strong
   ones. Fixed minimum width / height so "Loading…" and "Retry" never make it jump; loading = muted text + dashed
   border (still readable), Retry = red, disabled = muted, keyboard focus = the primary outline. */
.c404t-load-more, .c404t-course-row__more { display: flex; justify-content: center; margin: var(--c404-list-space) 0 0; }
.c404t-load-more__button,
.c404t-course-row__more .c404t-btn,
.c404t-btn.c404t-btn--secondary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 168px;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--ink);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	opacity: 1;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}
.c404t-load-more__button:hover,
.c404t-course-row__more .c404t-btn:hover,
.c404t-btn.c404t-btn--secondary:hover { background: #F2F1EE; border-color: var(--ink); color: var(--ink); }
.c404t-load-more__button:focus-visible,
.c404t-course-row__more .c404t-btn:focus-visible,
.c404t-btn.c404t-btn--secondary:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.c404t-load-more__button[aria-busy="true"] { border-style: dashed; color: var(--ink-soft); cursor: progress; pointer-events: none; }
.c404t-load-more__button[aria-disabled="true"]:not([aria-busy="true"]),
:is(.c404t-load-more__button, .c404t-course-row__more .c404t-btn, .c404t-btn--secondary):is([disabled], .is-disabled) { border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; pointer-events: none; }
.c404t-load-more__button.is-error { border-color: var(--c404-danger, #b42318); color: var(--c404-danger, #b42318); background: #fff; }
/* ---- Category Menu ---- */
.c404-category-menu--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c404-category-menu--list { display: flex; flex-direction: column; gap: 6px; }
.c404-category-menu__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 8px;
	background: var(--c404-surface);
	border: 1px solid var(--c404-border);
	border-radius: var(--c404-radius-md);
	text-align: center;
}
.c404-category-menu--list .c404-category-menu__item { flex-direction: row; justify-content: space-between; padding: 12px 14px; }
.c404-category-menu__name { font-size: 12.5px; font-weight: 700; }
.c404-category-menu__count { font-size: var(--c404-fs-small); color: var(--c404-text-muted); }

/* ---- Course Grid ---- */
.c404-course-grid {
	display: grid;
	grid-template-columns: repeat(var(--c404-grid-cols-m, 2), 1fr);
	gap: 12px;
}
.c404-course-card {
	display: flex;
	flex-direction: column;
	background: var(--c404-surface);
	border: 1px solid var(--c404-border);
	border-radius: var(--c404-radius-md);
	overflow: hidden;
}
.c404-course-card__thumb { aspect-ratio: 16/10; background: var(--c404-border); overflow: hidden; }
.c404-course-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c404-course-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.c404-course-card__category { font-size: var(--c404-fs-small); color: var(--c404-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.c404-course-card__title { font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c404-course-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 6px; }
.c404-course-card__price { font-size: 13px; font-weight: 800; color: var(--c404-price); }
.c404-course-card__count { font-size: var(--c404-fs-small); color: var(--c404-text-muted); white-space: nowrap; }

/* ---- Deals countdown ---- */
.c404-deal-card__countdown {
	font-size: var(--c404-fs-small);
	font-weight: 700;
	color: var(--c404-sale);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* ---- Continue Learning (logged-out prompt) ---- */
.c404-continue-learning__login-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--c404-primary);
	color: #fff;
	border-radius: var(--c404-radius-md);
	padding: 14px 16px;
	font-size: 13px;
	flex-wrap: wrap;
}
.c404-continue-learning__login-cta .c404-btn { background: #fff; color: var(--c404-primary); }

/* ---- Featured Video: STEP 2 extra content under the media ---- */
.c404-feature-video__extra { margin-top: 10px; }
.c404-feature-video__desc { font-size: 12.5px; color: var(--c404-text-muted); margin: 0 0 8px; }

/* ---- CTA Block ---- */
.c404-cta { border-radius: var(--c404-radius-lg); padding: 26px 20px; margin: 12px 0; }
.c404-cta--center { text-align: center; }
.c404-cta--brand { background: var(--c404-primary); color: #fff; }
.c404-cta--commerce { background: var(--c404-secondary); color: #fff; }
.c404-cta--surface { background: var(--c404-surface); color: var(--c404-text); border: 1px solid var(--c404-border); }
.c404-cta__heading { font-size: var(--c404-fs-section); font-weight: 800; }
.c404-cta__desc { font-size: 13px; opacity: 0.9; margin-top: 6px; max-width: 50ch; }
.c404-cta--center .c404-cta__desc { margin-left: auto; margin-right: auto; }
.c404-cta__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.c404-cta--center .c404-cta__actions { justify-content: center; }
.c404-cta--brand .c404-btn, .c404-cta--commerce .c404-btn { background: #fff; color: var(--c404-text); }
.c404-cta--surface .c404-btn { background: var(--c404-primary); color: #fff; }

/* v1.0.4: the former Tablet (>=768px) / Desktop (>=1024px) Storefront
   overrides (3-/4-column Course Grid, 4-/6-column Category Menu, larger
   CTA) were removed — every Block now keeps its mobile layout inside
   the centered ~480px app shell at all viewport sizes. The Course
   Grid's --c404-grid-cols-t/-d attributes are still accepted (no saved
   Block breaks) but no longer applied. */

/* Standard WordPress visually-hidden-but-accessible utility (not bundled
   by core for themes — used by the Course Search Block's <label>). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ============================================================
   STEP 3 — Course Detail / Learning Content
   New .c404- namespace classes; legacy .c404t-* (tabs, buttons,
   step-list, empty-state, player) reused where the STEP 1 markup
   already fits, per docs/THEME-ARCHITECTURE.md "CSS architecture".
   ============================================================ */

/* ---- Layout shell ----
   v1.0.3: one 16px gutter at every width (matches the topbar and
   .c404t-section), so the hero text, tabs and cards line up with
   Back/Cart. v1.0.4: single column at every viewport size (the
   tablet/desktop content + sidebar variant and its duplicate sidebar
   commerce card were removed) — hero → badge → title → meta →
   progress/commerce card → tabs → tab content. */
.c404-course-detail__layout { display: flex; flex-direction: column; padding: 8px var(--c404-gutter) 20px; gap: 16px; }
.c404-detail-section { min-width: 0; }
.c404-course-detail__main { min-width: 0; }
.c404-course-detail__commerce-mobile { margin-bottom: 4px; }

/* ---- Course Hero (v1.0.3: image → badge → title → instructor → meta) ---- */
.c404-course-hero { display: flex; flex-direction: column; }
.c404-course-hero__media { aspect-ratio: 16/9; background: var(--c404-border); overflow: hidden; }
.c404-course-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c404-course-hero__media.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--c404-primary) 0%, #221D63 100%);
	color: rgba(255,255,255,0.7);
}
.c404-course-hero__body { display: flex; flex-direction: column; gap: 8px; padding: 14px var(--c404-gutter) 4px; min-width: 0; }
.c404-course-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c404-course-badge {
	display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--c404-radius-pill);
	font-size: var(--c404-fs-small); font-weight: 800; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.06em;
}
.c404-course-badge--paid { background: var(--commerce-soft); color: #B4461A; }
.c404-course-badge--free { background: #E2F6F3; color: #0B7468; }
.c404-course-hero__category { font-size: 12px; font-weight: 700; color: var(--c404-text-muted); overflow-wrap: anywhere; }
.c404-course-hero__title { font-size: var(--c404-fs-page); font-weight: 800; line-height: var(--c404-lh-tight); margin: 0; overflow-wrap: anywhere; }
.c404-course-hero__instructor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c404-course-hero__instructor img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.c404-course-hero__instructor-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.c404-course-hero__instructor-label { font-size: var(--c404-fs-small); color: var(--c404-text-muted); }
.c404-course-hero__instructor-name { font-size: var(--c404-fs-body); font-weight: 700; overflow-wrap: anywhere; }
.c404-course-hero__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--c404-fs-meta); color: var(--c404-text-muted); }
.c404-course-hero__meta li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.c404-course-hero__meta svg { flex-shrink: 0; }

/* ---- Commerce / Access Card (+ v1.0.3 "Your progress" card) ---- */
.c404-course-commerce { background: var(--c404-surface); border: 1px solid var(--c404-border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--c404-shadow-sm); min-width: 0; }
.c404-course-commerce__validity .c404-learn-renew { margin-left: auto; }
.c404-course-commerce__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.c404-course-commerce__progress { display: flex; flex-direction: column; gap: 6px; }
.c404-course-commerce__progress-text { font-size: 12px; color: var(--c404-text-muted); }
.c404-course-commerce__login-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--c404-text-muted); }
.c404-course-commerce__login-hint a { font-weight: 700; color: var(--c404-primary); }
.c404-progress-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.c404-progress-card__label { font-size: 14px; font-weight: 700; }
.c404-progress-card__percent { font-size: 20px; font-weight: 800; color: var(--c404-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.c404-course-commerce--progress .c404-progress-bar { height: 10px; }
.c404-course-commerce .c404t-btn--block { min-height: var(--c404-tap); }
.c404-progress-bar { height: 8px; border-radius: var(--c404-radius-pill); background: var(--c404-border); overflow: hidden; }
.c404-progress-bar__fill { height: 100%; background: var(--c404-success); border-radius: inherit; }

/* ---- Course tabs (v1.0.3): three equal segments that always fit —
   labels may wrap to two lines on very narrow screens instead of
   scrolling sideways. Other .c404t-tabs instances are unaffected. ---- */
.c404t-tabs.c404-course-tabs { gap: 0; margin: 4px 0 16px; overflow-x: visible; }
.c404t-tabs.c404-course-tabs button {
	flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 4px;
	white-space: normal; text-align: center; line-height: 1.3; font-size: 14.5px;
}

/* ---- Overview: lead, outcomes, description ---- */
.c404-course-lead { font-size: var(--c404-fs-body); line-height: 1.6; margin: 0 0 12px; }
.c404-course-outcomes { background: var(--c404-surface); border: 1px solid var(--c404-border); border-radius: var(--c404-radius-md); padding: 14px 16px; margin-bottom: 14px; font-size: 13px; }
.c404-course-outcomes ul { margin: 8px 0 0; padding-left: 18px; font-size: var(--c404-fs-body); }
.c404-course-description { font-size: var(--c404-fs-body); line-height: 1.65; overflow-wrap: break-word; min-width: 0; }
.c404-course-description > :first-child { margin-top: 0; }
.c404-course-description img,
.c404-course-description video,
.c404-course-description iframe { max-width: 100%; }
.c404-course-description table { display: block; max-width: 100%; overflow-x: auto; }
.c404-course-description pre { max-width: 100%; overflow-x: auto; }

/* ---- Curriculum (v1.0.3): full-width rows, grouped by section ----
   Every row is one flex line: fixed-size icon, a `flex: 1; min-width: 0`
   title that wraps normally, fixed-size chevron/lock. No fixed widths,
   so a row can never be squeezed into a narrow card. */
.c404-curriculum { --c404-curr-indent: calc(14px + 28px + 12px); display: flex; flex-direction: column; gap: 22px; }
.c404-curriculum__section-title { font-size: var(--c404-fs-card); font-weight: 800; line-height: 1.4; margin: 0 0 10px; overflow-wrap: anywhere; }
.c404-curriculum__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c404-curriculum-lesson { background: var(--c404-surface); border: 1px solid var(--c404-border); border-radius: var(--c404-radius-md); min-width: 0; overflow: hidden; }
.c404-curriculum-lesson__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; color: var(--c404-text); text-decoration: none; }
a.c404-curriculum-lesson__row:hover { background: var(--c404-bg); }
a.c404-curriculum-lesson__row:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -2px; }
.c404-curriculum-lesson__icon {
	width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
	background: var(--brand-soft); color: var(--c404-primary);
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.c404-curriculum-lesson.is-done .c404-curriculum-lesson__icon { background: var(--c404-success); color: #fff; }
.c404-curriculum-lesson.is-locked .c404-curriculum-lesson__icon { background: var(--c404-border); color: var(--c404-text-muted); }
.c404-curriculum-lesson__title { flex: 1; min-width: 0; font-size: var(--c404-fs-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.c404-curriculum-lesson__end { flex-shrink: 0; display: flex; align-items: center; color: var(--c404-text-muted); }
/* Each step's own status (Course page): a small pill after the title; a Lesson's Topics summary adds done / total. */
.c404-curriculum__status { flex: 0 0 auto; padding: 1px 8px; font-size: 11.5px; }
.c404-curriculum-topic__row .c404-curriculum__status { margin-left: auto; align-self: center; }
.c404-curriculum__count { font-weight: 400; color: var(--c404-text-muted); }
.c404-curriculum__note { margin: 0 0 10px; font-size: var(--c404-fs-meta); color: var(--c404-text-muted); }

.c404-curriculum-lesson__topics { border-top: 1px solid var(--c404-border); }
.c404-curriculum-lesson__topics summary {
	display: flex; align-items: center; gap: 6px; min-height: 40px;
	padding: 8px 14px 8px var(--c404-curr-indent);
	font-size: 12.5px; font-weight: 700; color: var(--c404-primary); cursor: pointer; list-style: none;
}
.c404-curriculum-lesson__topics summary::-webkit-details-marker { display: none; }
.c404-curriculum-lesson__topics summary::after { content: "\203A"; font-size: 15px; line-height: 1; transition: transform 0.15s ease; }
.c404-curriculum-lesson__topics[open] summary::after { transform: rotate(90deg); }
.c404-curriculum-lesson__topics summary:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -2px; }
.c404-curriculum-topics { list-style: none; margin: 0; padding: 0 14px 8px var(--c404-curr-indent); }
.c404-curriculum-topic + .c404-curriculum-topic { border-top: 1px solid var(--c404-border); }
.c404-curriculum-topic__row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 13.5px; line-height: 1.45; color: var(--c404-text); }
a.c404-curriculum-topic__row:hover .c404-curriculum-topic__title { color: var(--c404-primary); }
.c404-curriculum-topic__dot {
	width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
	border: 2px solid var(--c404-border); display: flex; align-items: center; justify-content: center;
	font-size: 9px; color: #fff;
}
.c404-curriculum-topic.is-done .c404-curriculum-topic__dot { background: var(--c404-success); border-color: var(--c404-success); }
.c404-curriculum-topic__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---- Instructor ---- */
.c404-course-instructor { display: flex; align-items: flex-start; gap: 14px; background: var(--c404-surface); border: 1px solid var(--c404-border); border-radius: var(--c404-radius-md); padding: 16px; }
.c404-course-instructor img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.c404-course-instructor__body { flex: 1; min-width: 0; }
.c404-course-instructor__name { font-weight: 800; font-size: var(--c404-fs-card); margin-bottom: 6px; overflow-wrap: anywhere; }
.c404-course-instructor__bio { font-size: 13.5px; color: var(--c404-text-muted); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }

/* ---- Related Courses ---- */
.c404-related-courses { margin-top: 24px; }

/* ---- Locked state (lesson/topic) ---- */
.c404-locked-state { text-align: center; padding: 60px 24px; }
.c404-locked-state__icon { font-size: 32px; margin-bottom: 10px; }
.c404-locked-state__title { font-size: var(--c404-fs-section); font-weight: 800; margin: 0 0 6px; }
.c404-locked-state__course { font-size: 13px; color: var(--c404-text-muted); margin: 0 0 16px; }
.c404-locked-state__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Lesson/Topic navigation (prev/next) ---- */
.c404-learning-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c404-border); }
.c404-learning-nav__link { flex: 1; display: flex; flex-direction: column; font-size: 12px; padding: 8px 10px; border-radius: var(--c404-radius-sm); }
.c404-learning-nav__link--next { text-align: right; margin-left: auto; }
.c404-learning-nav__label { color: var(--c404-text-muted); font-size: var(--c404-fs-small); text-transform: uppercase; letter-spacing: 0.3px; }
.c404-learning-nav__title { font-weight: 700; font-size: 12.5px; margin-top: 2px; }

/* v1.0.4: the former Course Detail Tablet (>=768px) two-column
   (content + sticky progress sidebar, 21:9 hero) and Desktop (>=1024px)
   overrides were removed — the mobile single-column layout above now
   applies at every viewport size inside the centered app shell. */

/* ============================================================
   STEP 4 — Learning Center + WooCommerce Account UX
   ============================================================ */

/* ---- Badge base (STEP 3 introduced 'plain'/.c404-badge but never
   styled it — fixed here) ---- */
.c404-badge { display: inline-block; padding: 2px 10px; border-radius: var(--c404-radius-pill); font-size: var(--c404-fs-small); font-weight: 600; line-height: 1.5; background: var(--c404-border); color: var(--c404-text); }

/* ---- Logged-out state ---- */
.c404-learning-loggedout { text-align: center; padding: 60px 24px; }
.c404-learning-loggedout__icon { font-size: 32px; margin-bottom: 10px; }
.c404-learning-loggedout__title { font-size: var(--c404-fs-page); font-weight: 800; margin: 0 0 6px; }
.c404-learning-loggedout__desc { font-size: 13px; color: var(--c404-text-muted); margin: 0 0 16px; }
.c404-learning-loggedout__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Header / welcome ---- */
.c404-learning-header { display: flex; align-items: center; gap: 12px; padding: 16px; }
.c404-learning-header img { border-radius: 50%; }
.c404-learning-header__welcome { font-size: var(--c404-fs-card); font-weight: 800; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; min-width: 0; }
.c404-learning-header__summary { font-size: 12px; color: var(--c404-text-muted); margin-top: 2px; }

/* ---- Section nav links ---- */
.c404-learning-nav-links { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; -webkit-overflow-scrolling: touch; }
.c404-learning-nav-links a {
	flex-shrink: 0; font-size: 12.5px; font-weight: 700; padding: 7px 14px;
	border-radius: var(--c404-radius-pill); background: var(--c404-surface); border: 1px solid var(--c404-border); color: var(--c404-text);
	white-space: nowrap;
}

/* ---- My Courses ---- */
.c404-my-courses { display: flex; flex-direction: column; gap: var(--c404-list-gap); min-width: 0; }
/*
 * Theme continuation (Learning Center fix): .c404-my-course-item is
 * now the ONE bordered card for the whole item — course content,
 * progress, validity, and the Renew action all visually belong to
 * it, as one connected unit, not two separately-boxed pieces stacked
 * on top of each other. .c404t-course-row (a shared component used
 * elsewhere on its own, so never modified directly) has its own
 * border/background scoped OFF only when nested here, via the
 * .c404-my-course-item .c404t-course-row override below —
 * everywhere else .c404t-course-row is used, its own styling is
 * completely unaffected by this.
 */
.c404-my-course-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}
.c404-my-course-item .c404t-course-row {
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 10px 12px;
}
.c404-my-course-item .c404-badge,
.c404-my-course-item .c404t-badge-ended { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.c404-my-course-item .c404t-course-row__body { padding-top: 24px; min-width: 0; }
.c404-my-course-item .c404t-course-row__title { overflow-wrap: anywhere; }

/* ---- Notes list ---- */
.c404-notes-list { display: flex; flex-direction: column; gap: 8px; }
.c404-notes-list__item {
	display: block; padding: 12px 14px; background: var(--c404-surface);
	border: 1px solid var(--c404-border); border-radius: var(--c404-radius-md);
}
.c404-notes-list__title { font-size: 13px; font-weight: 700; }
.c404-notes-list__excerpt { font-size: 12.5px; color: var(--c404-text-muted); margin-top: 4px; }
.c404-notes-list__date { font-size: var(--c404-fs-small); color: var(--c404-text-muted); margin-top: 6px; }

/* ---- WooCommerce My Account (v1.0.3) ----
   Markup: woocommerce/myaccount/navigation.php + dashboard.php (theme
   overrides — same endpoints, URLs, classes and hooks as WooCommerce's
   own). Body classes from inc/integrations/woocommerce.php:
   `c404-account` (logged in, My Account page), plus
   `c404-account--hub` (dashboard) or `c404-account--endpoint`
   (Orders, Addresses, Learning Device, …).

   Every viewport size (v1.0.4 — the former >=768px sidebar + content
   variant was removed): the dashboard IS the hub — summary card, "My
   Learning" group, "Account" group, Log out — in one column. On a
   sub-page the page title names the current destination and the
   topbar Back returns to the hub, so the menu isn't repeated above
   every form.

   Root cause of the previous layout: the sidebar rules made
   `.woocommerce-wrap` the flex container, but WooCommerce's shortcode
   output wraps nav + content in its own `.woocommerce` div, so the
   wrapper only ever had one child and the "sidebar" never formed; the
   flat nav list (full-width filled pills) then sat above an unrelated
   default-text dashboard. The flex container is now
   `.woocommerce-wrap > .woocommerce`, and WooCommerce's own float/
   percentage widths are neutralised for these two elements. */
body.c404-account .woocommerce-MyAccount-navigation,
body.c404-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }

.c404-account-nav { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; }

.c404-account-summary {
	display: flex; align-items: center; gap: 12px; min-width: 0;
	padding: 14px 16px; background: var(--c404-surface);
	border: 1px solid var(--c404-border); border-radius: var(--c404-radius-lg);
	color: var(--c404-text); text-decoration: none;
}
.c404-account-summary__avatar {
	width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
	background: var(--c404-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 800; text-transform: uppercase;
}
.c404-account-summary__text { display: flex; flex-direction: column; min-width: 0; }
.c404-account-summary__name { font-size: var(--c404-fs-card); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.c404-account-summary__email { font-size: 12.5px; color: var(--c404-text-muted); overflow-wrap: anywhere; }

.c404-account-nav__heading {
	margin: 0 4px 8px; font-size: 12px; font-weight: 700; line-height: 1.4;
	text-transform: uppercase; letter-spacing: 0.04em; color: var(--c404-text-muted);
}
body.c404-account .c404-account-nav__list {
	list-style: none; margin: 0; padding: 0;
	background: var(--c404-surface); border: 1px solid var(--c404-border);
	border-radius: var(--c404-radius-md); overflow: hidden;
}
body.c404-account .c404-account-nav__list li { margin: 0; padding: 0; }
body.c404-account .c404-account-nav__list li + li { border-top: 1px solid var(--c404-border); }
.c404-account-nav__row {
	display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
	font-size: 14.5px; font-weight: 600; color: var(--c404-text); text-decoration: none;
}
.c404-account-nav__row:hover { background: var(--c404-bg); }
.c404-account-nav__row:focus-visible,
.c404-account-summary:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -2px; }
.c404-account-nav__icon {
	width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
	background: var(--brand-soft); color: var(--c404-primary);
	display: flex; align-items: center; justify-content: center;
}
.c404-account-nav__icon svg { display: block; }
.c404-account-nav__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.c404-account-nav__chev { flex-shrink: 0; color: var(--c404-text-muted); }

/* Current destination: tinted row + inset accent bar (not a filled pill). */
body.c404-account .c404-account-nav__list li.is-active .c404-account-nav__row {
	background: var(--brand-soft); color: var(--c404-primary);
	box-shadow: inset 3px 0 0 var(--c404-primary);
}
body.c404-account .c404-account-nav__list li.is-active .c404-account-nav__icon { background: var(--c404-primary); color: #fff; }

/* Log out: its own block, muted red. */
body.c404-account .c404-account-nav__list--logout .c404-account-nav__row { color: var(--c404-error); }
body.c404-account .c404-account-nav__list--logout .c404-account-nav__icon { background: #FDEAE8; color: var(--c404-error); }
body.c404-account .c404-account-nav__list--logout .c404-account-nav__row:hover { background: #FDEAE8; }

/* Dashboard welcome card — not shown (the hub above already is the
   dashboard; v1.0.4 retired the tablet/desktop layout that displayed
   it). WooCommerce dashboard hooks still render below at every size. */
.c404-account-welcome { display: none; }

/* Sub-pages on phones: content only (see block comment above). */
body.c404-account--endpoint .c404-account-nav { display: none; }

.woocommerce-wrap table.shop_table { width: 100%; border-collapse: collapse; font-size: var(--c404-fs-meta); }
.woocommerce-wrap table.shop_table th, .woocommerce-wrap table.shop_table td { padding: 10px 8px; border-bottom: 1px solid var(--c404-border); text-align: left; }
.woocommerce-wrap .woocommerce-Button, .woocommerce-wrap button.button { min-height: var(--c404-tap); border-radius: var(--c404-radius-pill); background: var(--c404-primary); color: #fff; border: none; padding: 9px 18px; font-size: var(--c404-fs-body); font-weight: 700; cursor: pointer; }
.woocommerce-wrap .woocommerce-Button:focus-visible, .woocommerce-wrap button.button:focus-visible, .woocommerce-wrap a:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.woocommerce-wrap form .form-row label { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; display: block; }
.woocommerce-wrap form .form-row input.input-text, .woocommerce-wrap form .form-row select, .woocommerce-wrap form .form-row textarea { width: 100%; min-height: var(--c404-tap); padding: 9px 10px; border: 1px solid var(--c404-border); border-radius: var(--c404-radius-sm); font-size: var(--c404-fs-input); }

/* v1.0.4: the former My Account Tablet (>=768px) sidebar + content
   layout, its >=1024px widening, and the Learning Center's >=1024px
   wide max-width / two-column My Courses grid were removed — both
   pages keep their mobile layout inside the centered app shell at
   every viewport size. */


/* ============================================================
   STEP 5.3 — Frontend runtime UX hardening
   ============================================================ */

/* ---- Global shell / width ----
   v1.0.4: the `body.c404-wide .c404t-app` 900px/1080px widening rules
   were removed — every customer-facing page (Course/Lesson/Topic,
   Learning Center, My Account, Cart, Checkout, Shop/Product) now uses
   the same centered ~480px app shell as the homepage. See the
   "Unified App Shell" block near the top of this file. */

/* ---- Media containment (v1.0.4) ----
   Nothing inside the app shell may be wider than it. Only max-width is
   set on embeds/iframes (never width/height), so a player's own sizing
   — including VdoCipher's — is untouched; component rules that
   intentionally crop (height:100%; object-fit:cover) are more specific
   and keep working. WordPress's [video]/[caption] wrappers carry an
   inline pixel width, which max-width overrides. */
.c404t-app video { max-width: 100%; height: auto; }
.c404t-app iframe,
.c404t-app embed,
.c404t-app object,
.c404t-app figure,
.c404t-app .wp-video,
.c404t-app .wp-caption,
.c404t-app .wp-block-embed,
.c404t-app .wp-block-image,
.c404t-app .c404t-player-stage > * { max-width: 100%; }
.c404t-app figure { margin-inline: 0; }
.c404t-app .wp-block-table,
.c404t-app .woocommerce-wrap table { max-width: 100%; }
.c404t-app .wp-block-table { overflow-x: auto; }
.c404t-app pre { max-width: 100%; overflow-x: auto; }

.c404t-topbar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Cart */
/* v1.0.3: 44x44 touch target, icon centered; the count badge is anchored
   to the button's own corner (the button is its positioning context). */
.c404t-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c404-text); }
.c404t-cart svg { display: block; }
.c404t-cart:hover, .c404t-cart:focus-visible { background: var(--c404-border); }
.c404t-cart:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 0; }
.c404t-cart__count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px; background: var(--c404-secondary); color: #fff; font-size: 10px; font-weight: 800;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---- Content readability: a sensible minimum so a row never collapses
   to one-word lines even in an unexpectedly narrow parent (e.g. a
   themed widget area). c404-curriculum-lesson__title and
   c404t-step-row__title have their own, more complete versions of this
   declared alongside their own components above. */
.c404t-course-row__title, .c404-course-card__title { overflow-wrap: break-word; }

/* ---- WooCommerce: focused commerce pages (Product/Shop), same
   design system as the rest of the Theme ---- */
/* (Product list rules: see "store-course-layout" at the end of this file.) */

.woocommerce-wrap div.product { display: flex; flex-direction: column; gap: 16px; }
.woocommerce-wrap div.product div.images { border-radius: var(--c404-radius-md); overflow: hidden; }
.woocommerce-wrap div.product .summary { display: flex; flex-direction: column; gap: 10px; }
.woocommerce-wrap div.product .summary .price { font-size: 20px; font-weight: 800; color: var(--c404-price); }
.woocommerce-wrap div.product form.cart { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.woocommerce-wrap div.product .quantity input.qty { width: 64px; min-height: var(--c404-tap); font-size: var(--c404-fs-input); padding: 9px 8px; border: 1px solid var(--c404-border); border-radius: var(--c404-radius-sm); }
.woocommerce-wrap div.product .woocommerce-tabs ul.tabs { display: flex; gap: 16px; list-style: none; margin: 0 0 12px; padding: 0; border-bottom: 1px solid var(--c404-border); }
.woocommerce-wrap div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 8px 0; font-size: 13px; font-weight: 700; }
.woocommerce-wrap div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c404-primary); border-bottom: 2px solid var(--c404-primary); }
.woocommerce-wrap .related.products { margin-top: 24px; }

/* Cart / Checkout tables & notices */
.woocommerce-wrap table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.woocommerce-wrap #order_review, .woocommerce-wrap .cart-collaterals .cart_totals {
	background: var(--c404-surface); border: 1px solid var(--c404-border); border-radius: var(--c404-radius-md); padding: 16px;
}

/* v1.0.4: the former >=768px/>=1024px WooCommerce overrides (3-/4-column
   Shop grid, side-by-side single Product) were removed — Shop and Product
   pages keep the 2-column / stacked mobile layout inside the app shell. */

/* ============================================================
   WooCommerce notices — RC-UI-004 (single authoritative ruleset)
   Previously declared twice (brand-soft earlier vs. solid primary here);
   the Theme's symmetric 14px padding replaced WooCommerce core's 3.5em
   left padding, so core's absolutely-positioned ::before icon overlapped
   the text. The core icon is suppressed and the notice
   type is carried by colour + a left accent bar instead (core's float
   clearfix ::after is dropped too — the button no longer floats).
   Applies inside .woocommerce-wrap (Woo pages) and to the Theme-printed notices
   (.c404t-wc-notices, see c404t_print_wc_notices()).
   ============================================================ */
:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 14px;
	padding: 12px 14px;
	list-style: none;
	border: none;
	border-left: 4px solid currentColor;
	border-radius: var(--c404-radius-sm);
	font-size: 13px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
	content: none;
	display: none;
}
:is(.woocommerce-wrap, .c404t-wc-notices) .woocommerce-message { background: #E6F6F4; color: #0E6E63; }
:is(.woocommerce-wrap, .c404t-wc-notices) .woocommerce-info { background: #EEEDFB; color: var(--c404-primary); }
:is(.woocommerce-wrap, .c404t-wc-notices) .woocommerce-error { display: block; background: #FDEAE8; color: #B42318; }
:is(.woocommerce-wrap, .c404t-wc-notices) .woocommerce-error li { margin: 0; padding: 0; }
:is(.woocommerce-wrap, .c404t-wc-notices) .woocommerce-error li + li { margin-top: 6px; }
:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; text-decoration: underline; }
:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	padding: 6px 12px;
	font-size: 12px;
	white-space: nowrap;
}
@media (max-width: 480px) {
	:is(.woocommerce-wrap, .c404t-wc-notices) :is(.woocommerce-message, .woocommerce-info) .button { margin-left: 0; }
}
/* ===================== Purchase confirmation / refusal (404 Cenxus Plugin PurchaseOverlap) =====================
   The Product page box (#cenxus404-overlap, class .cenxus404-overlap) and a queued WooCommerce notice carrying the
   same question (the Plugin's .cenxus404-overlap__message inside WooCommerce's own notice element) share one layout:
   14 px / 1.55 text, 14×16 px padding in total; the title, a NUMBERED course list (the notice's own list-style: none
   is inherited by lists inside it — that is what hid the numbers — so the lists set decimal again), the effect, then
   the two 44 px actions (Continue = primary, Cancel = secondary). "Show N more" continues the numbering at 4
   (start="4" from the Plugin); an opened long list scrolls inside the box so the actions stay close by.
   Only plain class selectors — no :has() (nor :is()): a browser that does not know a selector drops the
   WHOLE rule it is in, so nothing here depends on one. In a queued notice (a flex row), the message is one full-width
   flex item that lays out its own content as blocks. */
.woocommerce-wrap .cenxus404-overlap,
.c404t-wc-notices .cenxus404-overlap { display: block; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.cenxus404-overlap__message {
	display: block; flex: 1 1 100%; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 2px;
	font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
}
.cenxus404-overlap--refusal .cenxus404-overlap__effect { margin: 0; padding: 2px; font-size: 14px; line-height: 1.55; }
.cenxus404-overlap__title { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 800; line-height: 1.45; }
.cenxus404-overlap__message .cenxus404-overlap__effect,
.cenxus404-overlap__message .cenxus404-overlap__actions { margin: 10px 0 0; }
ol.cenxus404-overlap__courses { margin: 0; padding: 0 0 0 1.6em; list-style: decimal outside; }
/* WooCommerce's own stylesheet sets `.woocommerce-message li, .woocommerce-error li, .woocommerce-info li { list-style:
   none outside !important; padding-left: 0 !important; margin-left: 0 !important }` (theme compatibility). Only the
   Plugin's OWN course list re-states its numbering with a more specific !important rule; other notices keep theirs. */
ol.cenxus404-overlap__courses > li { display: list-item !important; margin: 0 0 4px; padding: 0; list-style: decimal outside !important; }
.cenxus404-overlap__more { margin: 4px 0 0; }
.cenxus404-overlap__more > summary {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.cenxus404-overlap__more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.cenxus404-overlap__more[open] > ol.cenxus404-overlap__courses { max-height: min(40vh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.cenxus404-overlap__message .cenxus404-overlap__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cenxus404-overlap__message .cenxus404-overlap__actions .button {
	order: 0; flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 44px; margin: 0; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: normal; text-align: center; text-decoration: none;
}
.cenxus404-overlap__message .cenxus404-overlap__actions .cenxus404-overlap__continue { border: 1px solid var(--commerce); background: var(--commerce); color: #fff; }
.cenxus404-overlap__message .cenxus404-overlap__actions .cenxus404-overlap__cancel { border: 1px solid var(--ink); background: #fff; color: var(--ink); }
.cenxus404-overlap__message .cenxus404-overlap__actions .button:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }

/* ===================== Email OTP Passwordless Login (candidate) =====================
   Scoped entirely under .c404t-login-method-tabs / .c404t-login-method-panel /
   .c404t-otp-login — no global selectors, no change to any existing rule
   above this point in the file. */
.c404t-login-method-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--line); border-radius: 999px; }
.c404t-login-method-tabs button {
	flex: 1; padding: 9px 0; border: none; background: none; border-radius: 999px;
	font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.c404t-login-method-tabs button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.c404t-otp-login__intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.c404t-otp-login label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.c404t-otp-login input[type="email"],
.c404t-otp-login input[type="text"] {
	width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
	font-size: var(--c404-fs-input); margin-bottom: 14px; box-sizing: border-box;
}
.c404t-otp-login__send,
.c404t-otp-login__verify {
	width: 100%; padding: 12px; border: none; border-radius: 999px; background: var(--brand);
	color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.c404t-otp-login__send[aria-busy="true"],
.c404t-otp-login__verify[aria-busy="true"] { opacity: 0.6; cursor: default; }
.c404t-otp-login__resend {
	display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: none;
	color: var(--brand); font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer;
}
.c404t-otp-login__resend:disabled { color: var(--ink-soft); cursor: default; }
.c404t-otp-login__error {
	margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #FDEAE8;
	color: var(--sale, #D64545); font-size: 13px;
}
.c404t-otp-login__email-display { color: var(--ink); }


/* QA repair batch 1: commerce content inside the narrow application shell. */
.c404t-app img,.c404t-course-row img,.c404-course-card img,.woocommerce img{height:auto}
.c404t-topbar__back,.c404t-back{display:inline-flex;align-items:center;gap:8px;line-height:1.2}
.wc-block-grid__products,.wc-block-product-template{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 14px!important;padding:0!important}
.wc-block-grid__product,.wc-block-product{float:none!important;width:auto!important;max-width:none!important;margin:0!important;min-width:0;flex:none!important;border:0!important}
.wc-block-grid__product-image img{width:100%;height:auto;border-radius:10px}
.wc-block-grid__product .wp-block-button__link{white-space:normal;display:block;text-align:center;padding:10px 8px!important;font-size:13px!important;line-height:1.4!important}
/* QA repair batch 2 (fix 5): additive coverage for the newer Product
   Collection block's own title markup, alongside the two selectors
   already covering the classic shop loop and the older WC Blocks grid.
   Added, not swapped — a non-matching selector here is harmless, so
   this is safe regardless of which one a given WooCommerce version
   actually renders (needs live-site confirmation either way; a static
   stylesheet can't prove which markup is present). */
.wc-block-grid__product-title,.woocommerce-loop-product__title,.wc-block-product-template .wp-block-post-title,.wc-block-components-product-title{font-size:15px!important;line-height:1.45!important;overflow-wrap:anywhere}
.wc-block-grid__product-price{font-size:13px!important;margin:8px 0!important}
.wc-block-components-address-form{row-gap:16px!important}
.wc-block-components-address-form .wc-block-components-text-input,.wc-block-components-address-form .wc-block-components-country-input,.wc-block-components-address-form .wc-block-components-state-input{margin-top:16px!important;margin-bottom:0!important}
.wc-block-components-validation-error{position:static!important;margin-top:6px!important;line-height:1.4}

/* QA repair batch 2 (fix 4): the same row-spacing intent as the Blocks
   Checkout rules above, for Classic Checkout's own .form-row fields
   (Name/Country and the rest of the billing/shipping fields) — these
   never matched the wc-block-components-* selectors above, so Classic
   Checkout previously got none of the B-015 spacing fix at all. Label/
   input styling for .form-row already exists elsewhere in this file
   (".woocommerce-wrap form .form-row label/input"); only row-to-row
   spacing and breathing room for a row currently showing a validation
   error are added here. Classic Checkout's own inline-error markup
   varies by WooCommerce version and wasn't confirmed live, so this is
   a conservative, additive rule rather than a claim that every
   possible error layout is covered. */
.woocommerce form .form-row{margin:0 0 16px!important}
.woocommerce form .form-row.woocommerce-invalid{margin-bottom:20px!important}
.woocommerce ul.order_details{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:#fff;padding:20px!important;border:1px solid var(--line,#e5e7eb);border-radius:12px;margin:20px 0 28px!important}
.woocommerce ul.order_details::before,.woocommerce ul.order_details::after{display:none}
.woocommerce ul.order_details li{float:none!important;border:0!important;padding:0!important;margin:0!important;font-size:var(--c404-fs-small);line-height:1.5;color:#6b7280;overflow-wrap:anywhere}
.woocommerce ul.order_details li strong{display:block;margin-top:4px;font-size:15px;color:var(--ink,#1f2937);text-transform:none}
.woocommerce ul.order_details li.total strong{font-size:20px}
.woocommerce .form-row label:has(input[type=checkbox]){display:flex!important;align-items:flex-start;gap:8px;line-height:1.5}
.woocommerce .form-row label input[type=checkbox]{flex:0 0 auto;margin:4px 0 0!important}
.c404t-player-complete:empty{display:none}

/*
 * Plan 6 Batch B revision 4 (fix #1): real, scoped CSS for the My
 * Purchases page AND the missing .c404t-btn--small modifier (used
 * throughout this Theme's own templates, including earlier rounds of
 * this same page, but never actually defined anywhere — confirmed by
 * grep before writing this, not assumed). Mobile-first throughout:
 * every rule below works correctly at the narrowest width by default
 * (flex-column stacking, wrapping, no fixed widths), with wider-screen
 * refinements layered on top via min-width media queries — not the
 * other way around, which is why nothing here needs a max-width rule
 * to avoid overflowing a narrow phone screen in the first place.
 */
.c404t-btn--small { padding: 8px 14px; font-size: 13px; min-height: var(--c404-tap); }

.c404-my-purchases { padding: 0 var(--c404-gutter) 32px; }
.c404-my-section { margin: 0 0 32px; }
.c404-my-section__title { font-size: var(--c404-fs-section); font-weight: 800; line-height: var(--c404-lh-tight); margin: 0 0 12px; color: var(--ink); overflow-wrap: anywhere; } /* = .c404t-section__title (Learning Center). */
.c404-my-section__note { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.c404-my-purchases__empty { color: var(--ink-soft); margin: 0 0 12px; }
.c404-my-purchases__back { margin-top: 24px; }

.c404-my-item-list { display: flex; flex-direction: column; gap: var(--c404-list-gap, 12px); }

/*
 * Plan 6 Batch B revision 4 (fix #1): the card itself — everything a
 * card contains (title, status, validity, source lines, the
 * expandable course list, the action row with its Renew button or
 * order detail) is laid out as a column of its own, clearly separated
 * rows, inside ONE bordered container — never floating outside it,
 * which was the original reported bug. min-width: 0 on the card and
 * on every text-bearing child below is what actually prevents a long
 * Package/Course title or a long translated button label from forcing
 * the card wider than its own narrow-screen container — a flex item's
 * default min-width is "auto" (its content's own natural width), which
 * is precisely what causes unexpected horizontal overflow on a phone
 * without this.
 */
.c404-my-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.c404-my-item__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.c404-my-item__row--title { justify-content: space-between; }

.c404-my-item__title {
	font-weight: 700;
	font-size: var(--c404-fs-card);
	line-height: var(--c404-lh-tight);
	color: var(--ink);
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}
a.c404-my-item__title:hover { text-decoration: underline; }

.c404-my-item__status {
	flex: 0 0 auto;
	font-size: var(--c404-fs-small);
	font-weight: 600;
	line-height: 1.5;
	padding: 2px 10px;
	border-radius: var(--c404-radius-pill);
	background: var(--c404-border);
	color: var(--ink-soft);
	white-space: nowrap;
}
.c404-my-item__status--active { background: #E3F5F2; color: #0E7A6D; } /* --ok (#17A897) tint; text darkened for contrast. */
.c404-my-item__status--ended { background: var(--c404-border); color: var(--ink-soft); }
.c404-my-item__row--title { align-items: flex-start; flex-wrap: nowrap; }
.c404-my-item__row--title .c404-my-item__title { flex: 1 1 auto; line-height: 1.35; }
.c404-my-item__row--title .c404-my-item__status { margin-top: 1px; }

.c404-my-item__validity {
	font-size: 13px;
	color: var(--ink-soft);
	min-width: 0;
	overflow-wrap: anywhere;
}

.c404-my-item__row--source {
	justify-content: space-between;
	padding-top: 6px;
	border-top: 1px dashed var(--line);
}
.c404-my-item__row--source:first-of-type { margin-top: 2px; }

.c404-my-item__source-label {
	font-size: 13px;
	color: var(--ink-soft);
	min-width: 0;
	overflow-wrap: anywhere;
}

.c404-my-item__row--actions {
	justify-content: flex-start;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.c404-my-item__row--actions .c404t-btn { flex: 0 0 auto; }

/*
 * The Renew button/unavailable-message pairing: always its own
 * wrapping flex item, sized to its own content, never stretched —
 * this is the exact element the original bug report described as
 * "floating outside the card," now guaranteed to render as part of
 * this card's own column flow instead.
 */
.c404-my-item__renew { flex: 0 0 auto; }
.c404-my-item__renew--unavailable {
	display: inline-block;
	min-width: 0;
	font-size: 13px;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}

/* A card's course list: count line, the first 3 numbered, "Show N more" continuing the numbering (start="4"). */
.c404-my-item__courses { min-width: 0; font-size: 13px; }
.c404-my-item__courses-label { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.c404-my-item__expand { margin: 2px 0 0; font-size: 13px; }
.c404-my-item__expand summary {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	cursor: pointer;
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.c404-my-item__expand summary:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; border-radius: 4px; }
.c404-my-item__course-list {
	margin: 0;
	padding: 0 0 0 1.6em;
	list-style: decimal outside;
}
.c404-my-item__course-list li {
	display: list-item;
	font-size: 13px;
	color: var(--ink);
	margin: 0 0 4px;
	list-style: inherit;
	overflow-wrap: anywhere;
}

/*
 * Order detail block — its own clearly separated lines (date, amount,
 * order total, the "View Purchase Details" link), never a single long
 * run-on paragraph. wc_price()'s own markup can include nested spans
 * for currency symbols etc.; overflow-wrap on the paragraph itself
 * still correctly prevents any resulting long string from overflowing
 * a narrow card.
 */
.c404-order-detail { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c404-order-detail p { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.c404-order-detail__order-total { color: var(--ink-soft); }
.c404-order-detail--unavailable { margin: 0; color: var(--ink-soft); font-size: 13px; }
.c404-order-detail .c404t-btn { align-self: flex-start; margin-top: 4px; }

/*
 * Plan 6 Batch B revision 4 (fix #1): the Learning Center's own My
 * Courses validity/Renew line — previously rendered with no scoped
 * CSS of its own at all, so it visually floated outside the course
 * card's own bounds (the actual reported bug) despite already being
 * correctly placed inside the card in the markup. This gives it the
 * same contained-row treatment as the My Purchases cards above.
 */
/*
 * Theme continuation: .c404-my-course-item's own base rules now live
 * in the one consolidated block above (near .c404t-course-row) —
 * this redundant second declaration is removed, not duplicated.
 * .c404-my-course-item__validity is now a plain row WITHIN that same
 * one card — no border or background of its own, separated only by a
 * thin top divider, so it reads as one more section of the same card
 * rather than a second, visually separate block.
 */
.c404-my-course-item__validity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 10px 12px;
	border-top: 1px solid var(--line);
}
.c404-my-course-item__validity span {
	font-size: 13px;
	color: var(--ink-soft);
	min-width: 0;
	overflow-wrap: anywhere;
}
.c404-my-course-item__validity .c404t-btn { flex: 0 0 auto; }

/* ~360px and up: a little more breathing room once there's room for it. */
@media (min-width: 360px) {
	.c404-my-item { padding: 18px; }
}

/* ~480px and up: title/status and the action row can sit on one line
   more comfortably without needing to wrap as eagerly. */
@media (min-width: 480px) {
	.c404-my-item__row--title { flex-wrap: nowrap; }
}

/* ===================== My Account → Orders: one card per order (Theme 1.0.16) =====================
   Pure CSS over WooCommerce's own orders table — NO template override, so every
   WooCommerce feature keeps working untouched: the order link, the date, the status,
   the total exactly as WooCommerce prints it (including a refunded order's struck-through
   original total and net total), and every action button (View, Pay, Cancel, plus any
   added by extensions). Each cell already carries WooCommerce's own `data-title`, which is
   reused as the label.

   No @media query on purpose: inside the app shell (.c404t-app, max-width --app-max, a
   ~480px column on every screen size) the table never has more room than a phone, so the
   card layout applies at every width. Scoped to the My Account page body class and the
   orders table only.

   Cells use float-label + right-aligned inline flow (the same technique WooCommerce's own
   small-screen stylesheet uses) rather than flex, so a cell holding several inline pieces —
   `<del>` original total, `<ins>` net total, "for N items" — stays one run of text instead
   of becoming separate flex items. The few `!important`s exist only to beat WooCommerce's
   own small-screen rules (`text-align: right !important`, cell backgrounds/borders). */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	background: transparent;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead {
	/* Header row is replaced by the per-cell labels; kept for screen readers. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell {
	display: block;
	min-width: 0;
	padding: 7px 0;
	border: 0 !important;
	background: transparent !important;
	text-align: right !important;
	font-size: 14px;
	color: var(--ink);
	overflow-wrap: anywhere;
	overflow: hidden; /* contains the floated label */
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell::before {
	content: attr(data-title);
	float: left;
	margin-right: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink-soft);
}

/* Order number = the card's header (first, larger, divided from the details). */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
	order: -1;
	margin-bottom: 4px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--line) !important;
	text-align: left !important;
	font-size: 16px;
	font-weight: 800;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number::before { display: none; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { color: var(--ink); text-decoration: none; }

/* Status: coloured text by WooCommerce's own per-row status class. */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { font-weight: 700; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--ok); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table :is(.woocommerce-orders-table__row--status-processing, .woocommerce-orders-table__row--status-on-hold, .woocommerce-orders-table__row--status-pending) .woocommerce-orders-table__cell-order-status { color: var(--c404-warning); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table :is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed, .woocommerce-orders-table__row--status-refunded) .woocommerce-orders-table__cell-order-status { color: var(--ink-soft); }

/* Total: WooCommerce's refund markup is preserved — original struck through, net bold. */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total del { margin-right: 4px; color: var(--ink-soft); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total ins { text-decoration: none; font-weight: 800; }

/* Actions: full-width row of buttons; View is the primary one. */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
	padding: 10px 0 0;
	border-top: 1px solid var(--line) !important;
	text-align: left !important;
	overflow: visible;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before { display: none; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	flex: 1 1 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.view {
	border-color: transparent;
	background: var(--commerce);
	color: #fff;
}

/* ===================== My Account → Orders pagination =====================
   WooCommerce's own markup: Previous always on the left, Next always on the right — also when
   only one of them is shown. Same outline button as the order actions. */
body.c404-account .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--previous { order: 1; margin-right: auto; }
body.c404-account .woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button--next { order: 2; margin-left: auto; }

/* ===================== My Account → Addresses and Order detail (r12) =====================
   Pure CSS over WooCommerce's own markup (my-address.php, view-order.php, order-details.php,
   order-details-customer.php) — NO template override: every field, form, link, order total and action
   stays WooCommerce's. The same card as the Orders list (line border, --radius, surface, 14/16 px padding),
   one heading size, one button look. Long titles, e-mail addresses and amounts wrap inside the card; nothing
   widens the page. Scoped to the My Account content. */
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses) {
	display: flex; flex-direction: column; gap: 14px; width: auto; margin: 0 0 16px;
}
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::before,
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::after { display: none; }
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-Address, .woocommerce-column),
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-order-details, .woocommerce-customer-details) {
	box-sizing: border-box; float: none; width: auto; max-width: 100%; min-width: 0; margin: 0 0 14px; padding: 14px 16px;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere;
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-customer-details :is(.woocommerce-column) { margin: 0; padding: 0; border: 0; }
body.c404-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns--addresses { margin: 0; }
/* Titles: one size; the Address card's Edit link aligned on the same line, at the right. */
body.c404-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--line);
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-Address-title::before,
body.c404-account .woocommerce-MyAccount-content .woocommerce-Address-title::after { display: none; }
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-Address-title h2, .woocommerce-Address-title h3, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details > h2, .woocommerce-OrderUpdates-title) {
	float: none; min-width: 0; margin: 0; font-size: var(--c404-fs-section); font-weight: 800; line-height: var(--c404-lh-tight);
}
body.c404-account .woocommerce-MyAccount-content :is(.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details > h2) {
	margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--line);
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	float: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: var(--c404-radius-pill);
	background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
body.c404-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
/* Addresses: upright text (the browser's italic <address> removed), the shared body size. */
body.c404-account .woocommerce-MyAccount-content address {
	margin: 0; padding: 0; border: 0; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere;
}
body.c404-account .woocommerce-MyAccount-content address p { margin: 6px 0 0; padding: 0; overflow-wrap: anywhere; }
/* Order intro ("Order #… was placed on … and is currently …"): plain text, the number and status in bold. */
body.c404-account .woocommerce-MyAccount-content mark { background: transparent; color: var(--ink); font-weight: 700; }
/* Order detail table: products, then the totals (subtotal, payment method, total) as label / value rows. */
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details {
	width: 100%; max-width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; font-size: 14px;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details :is(th, td) {
	padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; vertical-align: top; overflow-wrap: anywhere;
}
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details thead th { padding-top: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details :is(.product-total, tfoot td) { width: 40%; padding-left: 10px; text-align: right; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details .product-quantity { font-weight: 600; color: var(--ink-soft); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-soft); }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot th { font-weight: 600; color: var(--ink-soft); text-align: left; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details tfoot tr:last-child :is(th, td) { border-bottom: 0; padding-bottom: 0; color: var(--ink); font-weight: 800; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details :is(del, ins) { text-decoration-thickness: 1px; }
body.c404-account .woocommerce-MyAccount-content table.woocommerce-table--order-details ins { text-decoration: none; font-weight: 800; }
/* Order actions (Pay, Cancel, Order again …): the Orders list's button. */
body.c404-account .woocommerce-MyAccount-content :is(.order-again, .woocommerce-order-details .order-actions-button) { margin: 12px 0 0; }
body.c404-account .woocommerce-MyAccount-content :is(.order-again .button, .woocommerce-table--order-details .order-actions-button) {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin: 0 6px 6px 0; padding: 10px 16px;
	border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none;
}

/* ===================== Resource Library + Course Resources block (Theme 1.0.17) =====================
   Presentation only. The Plugin owns the markup (search, rows, pagination, download links) and all
   permissions; this block only styles the Plugin's `cenxus404-resource*` classes inside the app shell.
   Scoped to .c404t-app so nothing leaks outside it; the Plugin's own base stylesheet stays structural
   and low-specificity so these rules simply win. */
.c404t-app .cenxus404-resource-library { display: flex; flex-direction: column; gap: 12px; }
/* The search form is the site search pill (.c404t-search); only its spacing here. */
.c404t-app .cenxus404-resources__search { margin: 0; }
.c404t-app .cenxus404-resources__summary, .c404t-app .cenxus404-resources__empty { margin: 0; font-size: 13px; color: var(--ink-soft); }
.c404t-app .cenxus404-resources__notice { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.c404t-app .cenxus404-resources__list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

/* One resource = one card (same visual language as the My Purchases / Orders cards). */
.c404t-app .cenxus404-resource {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0;
	padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.c404t-app .cenxus404-resource__icon {
	flex: 0 0 auto; min-width: 46px; padding: 8px 4px; border: 0; border-radius: var(--radius-sm);
	background: var(--brand-soft); color: var(--c404-primary); font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.c404t-app .cenxus404-resource__body { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.c404t-app .cenxus404-resource__title { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.c404t-app .cenxus404-resource__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ink-soft); opacity: 1; }
.c404t-app .cenxus404-resource__file { overflow-wrap: anywhere; }
.c404t-app .cenxus404-resource__action { flex: 0 0 auto; }
.c404t-app .cenxus404-resource__download {
	display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 0; border-radius: var(--radius-sm);
	background: var(--commerce); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
}
.c404t-app .cenxus404-resource__locked { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.c404t-app .cenxus404-resource.is-locked { background: transparent; }
.c404t-app .cenxus404-resource.is-locked .cenxus404-resource__icon { background: var(--line); color: var(--ink-soft); }
.c404t-app .cenxus404-resources__pagination { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 13px; }
.c404t-app .cenxus404-resources__pagination a { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.c404t-app .cenxus404-resources__pagination .current { color: var(--ink-soft); }

/* Course Resources block: a collapsible "folder" inside a Course / Lesson / Topic. */
.c404t-app details.cenxus404-resources--folder { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 16px 0; overflow: hidden; }
.c404t-app .cenxus404-resources--folder > .cenxus404-resources__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none;
	font-size: 15px; font-weight: 800; color: var(--ink);
}
.c404t-app .cenxus404-resources--folder > .cenxus404-resources__summary::-webkit-details-marker { display: none; }
.c404t-app .cenxus404-resources--folder > .cenxus404-resources__summary::after {
	content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
	transform: rotate(45deg); transition: transform .15s ease;
}
.c404t-app .cenxus404-resources--folder[open] > .cenxus404-resources__summary::after { transform: rotate(-135deg); }
.c404t-app .cenxus404-resources--folder .cenxus404-resources__heading { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.c404t-app .cenxus404-resources--folder .cenxus404-resources__count {
	flex: 0 0 auto; padding: 3px 10px; border-radius: var(--c404-radius-pill); background: var(--brand-soft); color: var(--c404-primary); font-size: 12px; font-weight: 700;
}
.c404t-app .cenxus404-resources--folder > .cenxus404-resources__list { padding: 0 12px 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.c404t-app .cenxus404-resources--folder .cenxus404-resource { border-radius: var(--radius-sm); }

/* ===================== Account summary above Learning Device (Theme 1.0.19) =====================
   Presentation only. The Plugin prints the markup (name, current email, verification status,
   Account Details link) from the signed-in user's own identity records; this only styles the
   Plugin's `cenxus404-account-summary*` classes inside the app shell. */
.c404t-app .cenxus404-account-summary {
	margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.c404t-app .cenxus404-account-summary__title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--ink); }
.c404t-app .cenxus404-account-summary__list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.c404t-app .cenxus404-account-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.c404t-app .cenxus404-account-summary__row dt { flex: 0 0 auto; margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.c404t-app .cenxus404-account-summary__row dd { margin: 0; min-width: 0; text-align: right; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.c404t-app .cenxus404-account-summary__status { display: inline-block; padding: 2px 10px; border-radius: var(--c404-radius-pill); font-size: 12px; font-weight: 700; background: var(--line); color: var(--ink-soft); }
.c404t-app .cenxus404-account-summary__status.is-verified { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.c404t-app .cenxus404-account-summary__status.is-pending { background: var(--commerce-soft); color: var(--c404-warning); }
.c404t-app .cenxus404-account-summary__status.is-unverified, .c404t-app .cenxus404-account-summary__status.is-none { background: var(--line); color: var(--ink); }
.c404t-app .cenxus404-account-summary__note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.c404t-app .cenxus404-account-summary__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--c404-primary); text-decoration: none; }

/* ===================== Lesson/Topic completion control (Theme 1.0.20) =====================
   Presentation only. Placement/withholding is decided in PHP (c404t_render_step_completion) and enforced
   by the Plugin on the server; nothing here hides or reveals anything for enforcement. */
.c404t-player-complete { margin: 18px 0 8px; }
.c404t-player-complete.is-awaiting-video { padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.c404t-player-complete__note { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ===================== Video playback progress (Theme 1.0.22) =====================
   Presentation only. The Plugin records and updates the numbers (data-cenxus404-* hooks). This is the furthest
   point of the video reached — not time watched — styled in a neutral tone on purpose so it is never mistaken
   for LearnDash completion (the green check marks and the Mark Complete control). */
.c404t-video-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.c404t-video-progress__label { flex: 0 0 auto; font-weight: 600; }
.c404t-video-progress__bar { flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.c404t-video-progress__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ink-soft); transition: width .3s ease; }
.c404t-video-progress__value { flex: 0 0 auto; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.c404t-video-progress__resume { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.c404t-video-progress__note { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--ink); }
.c404t-video-progress__note[hidden], .c404t-video-progress__resume[hidden] { display: none; }
.c404t-step-row__video { flex: 0 0 auto; margin-left: auto; padding: 2px 8px; border-radius: var(--c404-radius-pill); background: var(--line); color: var(--ink-soft); font-size: var(--c404-fs-small); font-weight: 600; white-space: nowrap; }

/* ===================== Video watched coverage (Theme 1.0.23) =====================
   Presentation only. Coverage = unique seconds actually played (Plugin-measured). Own label, own hooks, accent
   tone distinct from both the grey playback-progress bar and the green completion marks. */
.c404t-video-coverage { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.c404t-video-coverage__label { flex: 0 0 auto; font-weight: 600; }
.c404t-video-coverage__bar { flex: 1 1 80px; min-width: 60px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.c404t-video-coverage__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--c404-primary); transition: width .3s ease; }
.c404t-video-coverage__value { flex: 0 0 auto; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.c404t-video-coverage__unknown, .c404t-video-coverage__meta { flex: 0 0 auto; font-size: 12px; }
.c404t-video-coverage--course { margin: 12px 0 0; }
.c404t-video-watch__now { flex: 1 1 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.c404t-player-complete__admin-note { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-soft); }
.c404-account-nav__setup-notice { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-soft); }
.c404-account-nav__setup-notice a { display: block; margin-top: 4px; font-weight: 700; color: var(--c404-primary); }

/* 1.0.25 — learning flow notices and the locked Next link */
.c404t-step-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); background: var(--surface, #f6f7f9); border: 1px solid var(--line, #dcdcde); font-size: 13px; color: var(--ink, #1d2327); }
.c404t-step-notice--error { border-color: #d63638; }
.c404t-step-notice--success { border-color: #00a32a; margin: 12px 16px; }
.c404-learning-nav__link.is-locked { opacity: .6; cursor: not-allowed; }

/* ============================================================
   1.0.26 — Shop / Product pages in the Course design (Batch B)
   Presentation only: WooCommerce's own templates, forms, prices,
   variations, quantity and add-to-cart behaviour are untouched; these
   rules reuse the Course card / Course detail tokens. Appended last on
   purpose: they replace the earlier QA-repair grid rules.
   ============================================================ */

/* Shop / category / tag / search headers (the product lists themselves: "store-course-layout" below) */
.woocommerce-wrap .woocommerce-products-header__title { font-size: var(--c404-fs-page); font-weight: 800; line-height: var(--c404-lh-tight); margin: 0 0 10px; overflow-wrap: anywhere; }
.woocommerce-wrap .woocommerce-result-count { font-size: 12px; color: var(--c404-text-muted); margin: 0 0 8px; }
.woocommerce-wrap .woocommerce-ordering { margin: 0 0 12px; }
.woocommerce-wrap .woocommerce-ordering select { width: 100%; max-width: 100%; }
.woocommerce-wrap .wc-block-grid__products,
.woocommerce-wrap .wc-block-product-template { grid-template-columns: repeat(var(--c404-grid-cols-m, 2), minmax(0, 1fr)) !important; gap: 12px !important; }
.woocommerce-wrap .wc-block-grid__product,
.woocommerce-wrap .wc-block-product {
	display: flex !important; flex-direction: column; position: relative; overflow: hidden;
	background: var(--c404-surface); border: 1px solid var(--c404-border) !important; border-radius: var(--c404-radius-md);
	padding: 0 !important; text-align: left !important;
}
.woocommerce-wrap .wc-block-grid__product-image img,
.woocommerce-wrap .wc-block-product img {
	display: block; width: 100% !important; height: auto; aspect-ratio: 16/10; object-fit: cover;
	margin: 0 0 6px !important; border-radius: 0 !important; background: var(--c404-border);
}
.woocommerce-wrap .wc-block-grid__product-title,
.woocommerce-wrap .wc-block-product .wp-block-post-title {
	margin: 0 !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 700; line-height: 1.35;
	overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce-wrap .wc-block-grid__product-price { margin: 0 !important; padding: 0 12px; font-size: 13px; font-weight: 800; color: var(--c404-price); }
.woocommerce-wrap .wc-block-grid__product .wp-block-button__link {
	display: flex !important; align-items: center; justify-content: center; margin: auto 12px 12px !important; min-height: 40px;
	padding: 8px 12px !important; border: none; border-radius: var(--c404-radius-pill); background: var(--c404-primary); color: #fff;
	font-size: 13px !important; font-weight: 700; line-height: 1.3 !important; text-align: center; white-space: normal; overflow-wrap: anywhere;
}

/* Single Product: Course detail layout (full-bleed media, hero title, commerce card) */
.woocommerce-wrap div.product { gap: 0; }
.woocommerce-wrap div.product div.images { float: none !important; width: auto !important; margin: 0 -16px !important; border-radius: 0; }
.woocommerce-wrap div.product div.images img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.woocommerce-wrap div.product span.onsale { position: absolute; top: 12px; left: 0; z-index: 3; margin: 0; }
.woocommerce-wrap div.product .summary { float: none !important; width: auto !important; padding: 16px 0 0; margin: 0; gap: 10px; min-width: 0; }
.woocommerce-wrap div.product .product_title { margin: 0; font-size: var(--c404-fs-page); font-weight: 800; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; }
.woocommerce-wrap div.product .woocommerce-product-details__short-description { font-size: 14px; color: var(--c404-text-muted); }
.woocommerce-wrap div.product form.cart {
	margin: 4px 0 0; padding: 16px; background: var(--c404-surface); border: 1px solid var(--c404-border);
	border-radius: var(--c404-radius-lg); box-shadow: var(--c404-shadow-sm);
}
.woocommerce-wrap div.product form.cart table.variations { width: 100%; margin: 0 0 8px; }
.woocommerce-wrap div.product form.cart table.variations th,
.woocommerce-wrap div.product form.cart table.variations td { display: block; padding: 0 0 4px; text-align: left; border: 0; }
.woocommerce-wrap div.product form.cart table.variations select { width: 100%; max-width: 100%; }
.woocommerce-wrap div.product form.cart .single_variation_wrap { width: 100%; }
.woocommerce-wrap div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce-wrap div.product form.cart .single_add_to_cart_button {
	flex: 1 1 160px; min-height: 46px; padding: 11px 18px; border: none; border-radius: var(--radius-sm);
	background: var(--commerce); color: #fff; font-size: 14px; font-weight: 700; white-space: normal; line-height: 1.3;
}
.woocommerce-wrap div.product form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }
.woocommerce-wrap div.product .product_meta { margin-top: 4px; font-size: 12px; color: var(--c404-text-muted); overflow-wrap: anywhere; }
.woocommerce-wrap div.product .woocommerce-tabs { margin-top: 20px; }
.woocommerce-wrap div.product .woocommerce-tabs .panel { font-size: 14px; line-height: 1.6; }
.woocommerce-wrap div.product .woocommerce-tabs .panel .cenxus404-video { margin: 0 0 16px; }
/* Keep the last row clear of the floating help button above the tab bar */
body.woocommerce .woocommerce-wrap,
body.woocommerce-page .woocommerce-wrap { padding-bottom: 72px; }

/* ============================================================
   1.0.26 — Mark Complete: one primary button, locked / ready / saving
   ============================================================ */
.c404t-player-complete form { margin: 0; }
.c404t-player-complete input[type="submit"],
.c404t-player-complete button[type="submit"],
.c404t-complete-btn {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin: 0;
	padding: 12px 18px; border: none; border-radius: var(--radius-sm); background: var(--commerce); color: #fff;
	font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.c404t-player-complete input[type="submit"]:focus-visible,
.c404t-player-complete button[type="submit"]:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.c404t-complete-btn.is-locked { margin-bottom: 10px; background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.c404t-player-complete form.is-submitting [type="submit"] { opacity: .7; cursor: progress; }

/* 1.0.26 — Mine menu headings in the fallback My Account template (same resolver as WooCommerce My Account) */
.c404t-account-list__heading { margin: 14px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.c404t-account-list a.is-active { font-weight: 700; }
.c404t-complete-saving { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* store-course-layout — why a denied visitor landed on Courses */
.c404t-access-notice {
	display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
	margin: 0 16px 14px; padding: 10px 12px;
	background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
	color: var(--ink); font-size: 13px; line-height: 1.45;
}
.c404t-access-notice__text { flex: 1 1 200px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.c404t-access-notice__action {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
	padding: 6px 14px; border-radius: var(--c404-radius-pill, 999px); background: var(--c404-primary); color: #fff;
	font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.c404t-access-notice__action:hover, .c404t-access-notice__action:focus-visible { color: #fff; opacity: .92; }
.c404t-access-notice__action:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
/* Learning Device page (Plugin markup): THIS browser recognized or not, and why */
.woocommerce-wrap .cenxus404-device-browser td { font-weight: 700; overflow-wrap: anywhere; }
.woocommerce-wrap .cenxus404-device-browser--recognized td { color: #0E6E63; }
.woocommerce-wrap .cenxus404-device-browser--missing_key td, .woocommerce-wrap .cenxus404-device-browser--other_key td { color: #B42318; }
.woocommerce-wrap .cenxus404-device-browser-note p, .woocommerce-wrap .cenxus404-device-check { margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.woocommerce-wrap .cenxus404-device-browser-note p + p { margin-top: 6px; }
.woocommerce-wrap .cenxus404-device-browser-note, .woocommerce-wrap .cenxus404-device-check { margin: 12px 0; }

/* ============================================================
   store-course-layout — every classic WooCommerce product list (Shop,
   product category / tag, product search, Related, Upsells, cart
   Cross-sells, [products]) is the Courses list: the markup is the same
   .c404t-course-list > .c404t-course-row component (see
   inc/integrations/woocommerce.php), so it inherits the Course row's
   96x68 thumb, 2-line title, price foot, radius and spacing. The rules
   below only neutralise WooCommerce's own float/column grid on the
   <ul>/<li> wrappers and place the native add-to-cart button.
   ============================================================ */
.c404t-course-row .c404t-course-row__thumb img { height: 100%; }
.woocommerce ul.products.c404t-product-list,
.woocommerce-page ul.products.c404t-product-list { display: flex !important; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.woocommerce ul.products.c404t-product-list::before,
.woocommerce ul.products.c404t-product-list::after { display: none !important; }
.woocommerce ul.products.c404t-product-list li.product,
.woocommerce-page ul.products.c404t-product-list li.product { float: none !important; width: auto !important; max-width: none; margin: 0 !important; padding: 0; min-width: 0; border: 0; background: none; text-align: left; position: static; }
.c404t-product-row { color: inherit; }
.c404t-product-row .c404t-course-row__thumb { position: relative; display: block; }
.woocommerce ul.products li.product .c404t-course-row__thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; }
.c404t-product-row .c404t-course-row__title { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.c404t-product-row .c404t-course-row__foot { align-items: center; flex-wrap: wrap; }
.c404t-product-row .c404t-price-row { min-width: 0; font-family: var(--font-mono); font-weight: 800; color: var(--price); font-size: 15px; }
.c404t-product-row .c404t-price-row del { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.c404t-product-row .c404t-price-row ins { text-decoration: none; }
/* "Sale!" stays a circle, sized for the 96x68 thumb */
.woocommerce ul.products li.product .c404t-course-row__thumb span.onsale {
	position: absolute; top: 4px; left: 4px; right: auto; z-index: 2; margin: 0;
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; border-radius: 50%;
	background: var(--c404-sale, var(--sale)); color: #fff; font-size: 9px; font-weight: 800; line-height: 1;
}
/* WooCommerce's own button (Add to cart / Select options / Buy product / Read more) */
.woocommerce ul.products li.product .c404t-course-row__foot .button {
	margin: 0 0 0 auto !important; padding: 6px 12px !important; min-height: 32px; max-width: 100%;
	border: none; border-radius: var(--c404-radius-pill, 999px); background: var(--commerce); color: #fff;
	font-size: 12px !important; font-weight: 700; line-height: 1.3 !important; white-space: normal; text-align: center;
}
.related.products > h2, .upsells.products > h2, .cross-sells > h2 { margin: 20px 0 10px; font-size: var(--c404-fs-section); font-weight: 800; line-height: var(--c404-lh-tight); }

/* store-course-layout — single Product: title, short description, price,
   real offer facts, then the purchase card (in-flow, not sticky). */
.woocommerce-wrap div.product .summary .price { margin: 0; font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--price); }
.woocommerce-wrap div.product .summary .price del { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.woocommerce-wrap div.product .summary .price ins { text-decoration: none; }
.woocommerce-wrap div.product .woocommerce-product-details__short-description p { margin: 0 0 6px; }
.c404t-product-offer { padding: 12px; border: 1px solid var(--c404-border, var(--line)); border-radius: var(--radius-sm); background: var(--c404-surface, var(--surface)); font-size: 13px; }
.c404t-product-offer p { margin: 0; }
.c404t-product-offer__validity { font-weight: 700; color: var(--ink); }
.c404t-product-offer__label { margin-top: 6px !important; color: var(--ink-soft); }
.c404t-product-offer__courses { margin: 4px 0 0; padding: 0 0 0 1.6em; list-style: decimal outside; }
.c404t-product-offer__courses li { display: list-item; margin: 2px 0; list-style: inherit; overflow-wrap: anywhere; }
/* "Show N more" (the rest of the courses, numbered from 4): the same disclosure as the My Purchases cards. */
.c404t-product-offer__more { margin: 2px 0 0; }
.c404t-product-offer__more summary {
	display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--ink); font-weight: 600;
	text-decoration: underline; text-underline-offset: 2px;
}
.c404t-product-offer__more summary:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; border-radius: 4px; }
.woocommerce-wrap div.product form.cart { margin: 0; }
.woocommerce-wrap div.product form.cart:not(.variations_form),
.woocommerce-wrap div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce-wrap div.product p.stock { margin: 0; font-size: 13px; }
.woocommerce-wrap div.product .woocommerce-tabs { margin-top: 16px; }
.woocommerce-wrap .related.products, .woocommerce-wrap .upsells.products { margin-top: 8px; }

/* Mine menu on the fallback My Account template: same component as WooCommerce My Account, page gutter only. */
.c404t-account-mine { margin: 0 16px 20px; }


/* ============================================================
   Store UI round 4 — one Sale circle, centred buy buttons, the
   Shop toolbar, the Product description tabs. Appended last so it
   wins over the earlier store rules; selectors are specific enough
   to beat WooCommerce's own stylesheet whatever the load order.
   ============================================================ */

/* Sale: the same red circle on Courses rows, Shop / Related rows and the Product page */
.c404t-sale-badge,
.woocommerce ul.products li.product .c404t-course-row__thumb span.onsale,
.woocommerce-wrap div.product span.onsale {
	position: absolute; z-index: 3; right: auto; bottom: auto;
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 38px; height: 38px; min-width: 38px; min-height: 38px; margin: 0; padding: 0;
	border-radius: 50%; background: var(--c404-sale, var(--sale, #D64545)); color: #fff;
	font-size: 10px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18); pointer-events: none;
}
/* Rows: the thumb no longer clips, so the circle sits just outside its top-left corner — inside the row's own
   10px padding, so it never covers the title and never widens the page. */
.c404t-course-row__thumb { position: relative; overflow: visible; }
.c404t-course-row__thumb img { border-radius: inherit; }
.c404t-course-row__thumb .c404t-sale-badge,
.woocommerce ul.products li.product .c404t-course-row__thumb span.onsale { top: -7px; left: -7px; }
/* Product page: the image is full-bleed, so there is no room outside it — the circle sits in its corner. */
.woocommerce-wrap div.product { position: relative; }
.woocommerce-wrap div.product span.onsale { top: 8px; left: 8px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 11px; }

/* Buy buttons: label centred both ways (list "Add to cart" / "Select options" / "Read more" and the Product page) */
.woocommerce ul.products li.product .c404t-course-row__foot .button {
	display: inline-flex !important; align-items: center; justify-content: center; text-align: center; vertical-align: middle;
}
.woocommerce-wrap div.product form.cart .single_add_to_cart_button,
.woocommerce-wrap div.product .single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; float: none;
}

/* Shop toolbar: "Showing … results" + sorting in one aligned row, wrapping on narrow screens */
.woocommerce-wrap .c404t-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.woocommerce-wrap .c404t-shop-toolbar .woocommerce-result-count,
.woocommerce-wrap .c404t-shop-toolbar .woocommerce-ordering { float: none; margin: 0; }
.woocommerce-wrap .c404t-shop-toolbar .woocommerce-result-count { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--c404-text-muted); }
.woocommerce-wrap .c404t-shop-toolbar .woocommerce-ordering { flex: 0 1 auto; min-width: 0; }
.woocommerce-wrap .c404t-shop-toolbar .woocommerce-ordering select {
	width: auto; min-width: 170px; max-width: 100%; height: 36px; padding: 0 28px 0 10px;
	border: 1px solid var(--c404-border); border-radius: var(--radius-sm, 8px); background-color: var(--c404-surface);
	font-size: 13px; line-height: 1.2; color: var(--ink);
}
@media (max-width: 420px) {
	.woocommerce-wrap .c404t-shop-toolbar .woocommerce-ordering { flex: 1 1 100%; }
	.woocommerce-wrap .c404t-shop-toolbar .woocommerce-ordering select { width: 100%; min-width: 0; }
}

/* Product details tabs (Description / Additional information / Reviews): the SAME look as the course detail tabs
   (Overview / Curriculum / Instructor — `.c404t-tabs.c404-course-tabs`): equal segments with centred 14.5px bold
   labels that may wrap instead of scrolling, 44px min height, muted label → ink when selected with the 2px
   orange underline, the 1px divider, no background; the panel reads like `.c404-course-description`.
   WooCommerce's own markup, tab script (click / keyboard) and content are untouched. */
body.woocommerce div.product .woocommerce-tabs { margin: 16px 0 8px; }
body.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: nowrap; gap: 0; margin: 4px 0 16px; padding: 0; overflow: visible;
	list-style: none; border-bottom: 1px solid var(--line); background: none;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; content: none; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li { display: flex; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
/* WooCommerce's own `li.active` (5 classes) outranks the reset above and paints the active tab as a small white
   box (#fff background, white bottom border, corner box-shadows) — the isolated white block. Reset it at the
   same weight; the selected state is the underline + colour on the link below. */
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: none; border: 0; z-index: auto; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after { display: none; content: none; box-shadow: none; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex; flex: 1 1 auto; align-items: center; justify-content: center; box-sizing: border-box;
	min-width: 0; min-height: 44px; margin: 0; padding: 10px 4px; border-bottom: 2px solid transparent; background: none;
	font-size: 14.5px; font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; overflow-wrap: anywhere;
	color: var(--ink-soft); text-decoration: none; text-shadow: none;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--commerce); }
body.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -2px; }
body.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0 0 16px; padding: 0; background: none; border: 0;
	font-size: 14.5px; line-height: 1.7; overflow-wrap: break-word; min-width: 0;
}
body.woocommerce div.product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
body.woocommerce div.product .woocommerce-tabs .panel > :last-child { margin-bottom: 0; }
body.woocommerce div.product .woocommerce-tabs .panel img,
body.woocommerce div.product .woocommerce-tabs .panel video,
body.woocommerce div.product .woocommerce-tabs .panel iframe { max-width: 100%; }
body.woocommerce div.product .woocommerce-tabs .panel img { height: auto; }
body.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes),
body.woocommerce div.product .woocommerce-tabs .panel pre { display: block; max-width: 100%; overflow-x: auto; }

/* ============================================================
   Store UI round 5 — every product list looks the same.
   Classic loops (Shop / category / search, Related, Upsells, the
   classic Cart's Cross-sells) already render the row card
   (c404t_product_row_open()). WooCommerce Blocks are different
   markup with their own stylesheet, so each is handled here on its
   own — classic WooCommerce CSS does not reach them:
   - legacy product-grid blocks (the Cart block's empty-state "New in
     store" = Newest Products, On Sale, Best Selling, Hand-picked, …):
     rendered as the same row by c404t_block_grid_item_html();
   - Product Collection and All Products: a CSS grid shapes their
     inner blocks into the same row;
   - Cart block Cross-sells: the same row;
   - the Cart block's item rows keep their row structure; only type,
     price and image follow the list style.
   ============================================================ */

/* Lists: one column of row cards, 12px apart */
.wc-block-grid .wc-block-grid__products,
.woocommerce-wrap .wc-block-grid .wc-block-grid__products,
ul.wc-block-product-template,
.woocommerce-wrap ul.wc-block-product-template,
.wp-block-woocommerce-cart-cross-sells-products-block > div {
	display: flex !important; flex-direction: column; flex-wrap: nowrap !important; gap: 12px !important;
	margin: 0 0 16px !important; padding: 0 !important; list-style: none; grid-template-columns: none !important;
}

/* Legacy grid blocks: the <li> is only a wrapper around the shared row card */
.wc-block-grid .wc-block-grid__product.c404t-block-product,
.woocommerce-wrap .wc-block-grid .wc-block-grid__product.c404t-block-product {
	display: block !important; position: static; width: auto !important; max-width: none !important; flex: none !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: none; overflow: visible;
	text-align: left !important; font-size: inherit;
}
.c404t-block-product .c404t-course-row__foot .wp-block-button { margin: 0 0 0 auto; }
.c404t-block-product .star-rating { margin: 0; font-size: 11px; }

/* Product Collection / All Products: the row card from their own inner blocks
   (image | title, then price + button on one line) */
ul.wc-block-product-template > li.wc-block-product,
.woocommerce-wrap ul.wc-block-product-template > li.wc-block-product,
.wp-block-woocommerce-all-products .wc-block-grid__products > li.wc-block-grid__product {
	display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 5px;
	position: relative; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 10px !important;
	background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius); overflow: visible !important; text-align: left !important;
}
ul.wc-block-product-template > li.wc-block-product > *,
.wp-block-woocommerce-all-products .wc-block-grid__product > * { grid-column: 2 / -1; min-width: 0; margin: 0 !important; }
ul.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-image,
ul.wc-block-product-template > li.wc-block-product > .wc-block-components-product-image,
.wp-block-woocommerce-all-products .wc-block-grid__product > .wc-block-components-product-image {
	grid-column: 1; grid-row: 1 / span 3; align-self: start; position: relative; width: 96px !important; overflow: visible !important;
}
ul.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price,
ul.wc-block-product-template > li.wc-block-product > .wc-block-components-product-price,
.wp-block-woocommerce-all-products .wc-block-grid__product > .wc-block-components-product-price { grid-column: 2; }
ul.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-button,
ul.wc-block-product-template > li.wc-block-product > .wc-block-components-product-button,
.wp-block-woocommerce-all-products .wc-block-grid__product > .wc-block-components-product-button { grid-column: 3; justify-self: end; }

/* Cart block Cross-sells ("You may be interested in…"): the same row card */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	display: block !important; width: auto !important; margin: 0 !important; padding: 10px !important; box-sizing: border-box !important;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: left !important;
}
.wp-block-woocommerce-cart .cross-sells-product > div:first-child {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 5px;
}
.wp-block-woocommerce-cart .cross-sells-product > div:first-child > * { grid-column: 2; min-width: 0; margin: 0 !important; }
.wp-block-woocommerce-cart .cross-sells-product > div:first-child > .wc-block-components-product-image {
	grid-column: 1; grid-row: 1 / span 4; align-self: start; position: relative; width: 96px; overflow: visible !important;
}
.wp-block-woocommerce-cart .cross-sells-product > .wc-block-components-product-button { display: flex; justify-content: flex-end; margin: 8px 0 0 !important; }
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-button__button { margin: 0 !important; }

/* Shared pieces for those Blocks: image ratio (the row thumb's 96×68), title, price, Sale circle, button */
ul.wc-block-product-template .wc-block-product img,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-image img,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-image img {
	display: block; width: 96px !important; height: 68px !important; aspect-ratio: auto !important; object-fit: cover;
	margin: 0 !important; border-radius: var(--radius-sm) !important; background: var(--brand-soft);
}
ul.wc-block-product-template .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-title,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-name,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-name {
	margin: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: left !important;
	overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
ul.wc-block-product-template .wc-block-product .wp-block-post-title a,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-title a,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-name { color: var(--ink); text-decoration: none; }
ul.wc-block-product-template .wc-block-product .wc-block-components-product-price,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-price,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-price {
	display: block; font-family: var(--font-mono); font-size: 15px !important; font-weight: 800; color: var(--price); text-align: left !important;
}
ul.wc-block-product-template .wc-block-product .wc-block-components-product-price del,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-price del,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-price del { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
ul.wc-block-product-template .wc-block-product .wc-block-components-product-price ins,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-price ins,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-price ins { text-decoration: none; background: none; }
ul.wc-block-product-template .wc-block-product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-all-products .wc-block-grid__product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-cart .cross-sells-product .wc-block-components-product-sale-badge {
	position: absolute !important; top: -7px !important; left: -7px !important; right: auto !important; bottom: auto !important; z-index: 3;
	display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
	width: 38px; height: 38px; min-width: 38px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: var(--c404-sale, var(--sale, #D64545)) !important; color: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	font-size: 10px !important; font-weight: 800; line-height: 1; text-transform: none; white-space: nowrap; pointer-events: none;
}
.c404t-block-product .c404t-course-row__foot .wp-block-button__link,
ul.wc-block-product-template .wc-block-product .wp-block-button__link,
.wp-block-woocommerce-all-products .wc-block-grid__product .wp-block-button__link,
.wp-block-woocommerce-cart .cross-sells-product .wp-block-button__link {
	display: inline-flex !important; align-items: center; justify-content: center; text-align: center; vertical-align: middle;
	width: auto !important; max-width: 100%; min-height: 32px; margin: 0 !important; padding: 6px 12px !important; box-sizing: border-box;
	border: none; border-radius: var(--c404-radius-pill, 999px); background: var(--commerce); color: #fff;
	font-size: 12px !important; font-weight: 700; line-height: 1.3 !important; white-space: normal; text-decoration: none;
}

/* List headings: "New in store" and the Cross-sells title match Related / Upsells */
.wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.wc-block-cart__empty-cart__title),
.wp-block-woocommerce-cart-cross-sells-block > h2 { margin: 20px 0 10px !important; font-size: var(--c404-fs-section) !important; font-weight: 800; line-height: 1.35; }

/* Cart block with items: rows unchanged; name, price and image follow the list style */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { border-radius: var(--radius-sm); object-fit: cover; }
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price { font-family: var(--font-mono); font-weight: 800; color: var(--price); }
.wc-block-cart-items .wc-block-components-product-price del { color: var(--ink-soft); font-weight: 600; }
.wc-block-cart-items .wc-block-components-product-price ins { text-decoration: none; background: none; }

/* Product cards — Home course lists (.c404t-product-card), the Shop loop and WooCommerce product blocks: WooCommerce's
   own button in ONE stable size. While adding (.loading) it keeps its size (no extra padding); once added, "View cart"
   takes the button's place in the same row instead of wrapping onto a new line and making the card taller. */
.c404t-product-card .c404t-course-row__foot { flex-wrap: nowrap; }
.c404t-product-card .c404t-course-row__foot .button {
	display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;
	margin: 0 0 0 auto; padding: 6px 12px; min-height: 32px; max-width: 100%;
	border: none; border-radius: var(--c404-radius-pill, 999px); background: var(--commerce); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-decoration: none;
}
.c404t-product-card .c404t-course-row__foot .button,
.woocommerce ul.products li.product .c404t-course-row__foot .button,
.c404t-block-product .c404t-course-row__foot .wp-block-button__link { position: relative; min-width: 104px; flex: 0 0 auto; }
.c404t-product-card .c404t-course-row__foot .button.loading,
.woocommerce ul.products li.product .c404t-course-row__foot .button.loading,
.c404t-block-product .c404t-course-row__foot .wp-block-button__link.loading { opacity: .6; padding-right: 12px !important; pointer-events: none; }
.c404t-product-card .c404t-course-row__foot .button.added,
.woocommerce ul.products li.product .c404t-course-row__foot .button.added,
.c404t-block-product .c404t-course-row__foot .wp-block-button__link.added { display: none !important; }
.c404t-product-card .c404t-course-row__foot .added_to_cart,
.woocommerce ul.products li.product .c404t-course-row__foot .added_to_cart,
.c404t-block-product .c404t-course-row__foot .added_to_cart {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
	min-width: 104px; min-height: 32px; margin: 0 0 0 auto; padding: 6px 12px;
	border: 1px solid var(--commerce); border-radius: var(--c404-radius-pill, 999px); background: transparent; color: var(--commerce);
	font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-decoration: none;
}
.c404t-product-card .c404t-course-row__foot .button:focus-visible,
.c404t-product-card .c404t-course-row__foot .added_to_cart:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; }

/* Slider (Learning Packages; reusable: [data-c404-slider] > [data-c404-slider-track] + optional controls). A native
   horizontal scroll with scroll-snap — ONE full-width card at a time (the next one is not peeking), one card per swipe,
   Previous / Next, position dots and the arrow / Home / End keys on the focused track (assets/js/slider.js); no
   autoplay. The card is 100% of the SLIDER's own width (its container), never a share of the window: a 480 px page
   column on a wide screen shows one card, never several squeezed ones. The page itself never scrolls sideways — only
   the track. */
.c404-slider { position: relative; min-width: 0; max-width: 100%; container-type: inline-size; container-name: c404-slider; }
.c404-slider__track.c404-package-grid {
	position: relative; display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; overflow-y: hidden;
	overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; -webkit-overflow-scrolling: touch;
	padding: 2px; margin: -2px -2px 0; scrollbar-width: none;
}
.c404-slider__track::-webkit-scrollbar { display: none; }
.c404-slider__track > * { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
.c404-slider__track:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: 2px; border-radius: var(--c404-radius-lg); }
/* Previous / dots / Next: one group, centred horizontally; the arrows and the dots share one vertical centre line. */
.c404-slider__controls {
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px;
	box-sizing: border-box; width: 100%; max-width: 100%; margin: 10px auto 0; padding: 0; text-align: center;
}
/* Previous / Next: a 40 px circle with the chevron (an SVG, not a text glyph whose font metrics sit off-centre) in its
   exact middle. Every property a site-wide or plugin `button` rule could change is set here. */
.c404-slider__button {
	position: relative; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none;
	border: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none;
	font-size: 0; line-height: 0; text-indent: 0; vertical-align: middle; cursor: pointer;
}
/* The 44 x 44 (square) button is the touch target; the visible circle is still 40 px (drawn here). */
.c404-slider__button::before {
	content: ""; position: absolute; top: 2px; left: 2px; width: 40px; height: 40px; box-sizing: border-box;
	border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
}
.c404-slider__button svg { position: relative; display: block; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; pointer-events: none; }
.c404-slider__button:hover::before { background: var(--bg); }
.c404-slider__button:focus-visible { outline: none; }
.c404-slider__button:focus-visible::before { outline: 2px solid var(--c404-primary); outline-offset: 2px; }
.c404-slider__button[disabled] { opacity: .4; cursor: default; }
.c404-slider__dots { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-self: center; gap: 0; min-width: 0; line-height: 0; }
.c404-slider__dots[hidden], .c404-slider__dots:empty { visibility: hidden; }
.c404-slider__dot {
	position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer; /* 44 px target, 8 px dot. */
}
.c404-slider__dot::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
	border-radius: var(--c404-radius-pill); background: var(--line); transition: width .2s, margin .2s, background-color .2s;
}
.c404-slider__dot.is-active::before { width: 18px; margin-left: -9px; background: var(--c404-primary); }
.c404-slider__dot:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -2px; border-radius: var(--c404-radius-pill); }
@media (prefers-reduced-motion: reduce) { .c404-slider__track { scroll-behavior: auto; } .c404-slider__dot::before { transition: none; } }

/* ---------- Learning entries (Learning Center: My Packages, Individual Courses; the user's Package page) ----------
   Minimal: a Package card (cover + name + status / validity + Renew), the status pill shared by every entry, and an
   Ended entry marked plainly. Typography is left to the shared components. */
.c404-learn-cards { display: grid; gap: var(--c404-list-gap); grid-template-columns: minmax(0, 1fr); }
.c404-learn-card {
	display: flex; gap: 12px; min-width: 0; padding: 12px;
	align-items: flex-start;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.c404-learn-card__thumb {
	flex: 0 0 88px; width: 88px; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--c404-radius-sm); background: var(--c404-bg);
}
.c404-learn-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c404-learn-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c404-learn-card__title { font-size: var(--c404-fs-card); font-weight: 700; line-height: var(--c404-lh-tight); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.c404-learn-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: var(--c404-fs-meta); color: var(--ink-soft); }
.c404-learn-card__actions { display: flex; gap: 8px; }
.c404-learn-status {
	display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--c404-radius-pill);
	font-size: var(--c404-fs-small); font-weight: 600; line-height: 1.5; white-space: nowrap;
	background: #E3F5F2; color: #0E7A6D; /* The same tints as My Purchases' status (text darkened for contrast). */
}
.c404-learn-status--upcoming { background: var(--brand-soft); color: var(--c404-primary); }
.c404-learn-status--expired { background: #FDECEE; color: #B42335; }
.c404-learn-validity { overflow-wrap: anywhere; }
.c404-learn-card--expired .c404-learn-card__thumb,
.c404-learn-course--expired .c404t-course-row__thumb { opacity: .55; }
.c404-learn-course {
	display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.c404-learn-course > .c404t-course-row { border: none; border-radius: 0; background: transparent; }
.c404-learn-course > .c404-learn-card__meta { padding: 8px 12px; border-top: 1px solid var(--line); }
.c404-learn-course > .c404-learn-card__meta .c404-learn-renew { margin-left: auto; }
/* ---------- Learning cards, one layout (2026-10-16) ----------
   Packages and individual Courses in the Learning Center use the same horizontal card as every course row: a 4:3
   thumbnail (96 x 72) on the left that never grows with the text, the name and details on the right, status /
   validity / Renew INSIDE the card. Same padding, radius and border as .c404t-course-row. No image: the brand
   placeholder in the same slot. */
.c404-learn-card { align-items: flex-start; gap: 12px; padding: 10px; }
.c404-learn-card__thumb {
	position: relative; display: block; flex: 0 0 96px; width: 96px; height: 72px; aspect-ratio: auto; align-self: flex-start;
	overflow: hidden; border-radius: var(--radius-sm); background: var(--brand-soft);
}
.c404-learn-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c404-learn-card__thumb.is-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c404-primary) 0%, #221D63 100%); color: rgba(255, 255, 255, .88); }
.c404-learn-card__placeholder { display: flex; }
.c404-learn-card__body { flex: 1 1 auto; gap: 6px; padding-top: 1px; }
.c404-learn-card__progress { font-size: var(--c404-fs-meta); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.c404-learn-card__meta .c404-learn-validity { white-space: nowrap; }
.c404-learn-note { overflow-wrap: anywhere; }
.c404-learn-card--course.c404-learn-course--expired .c404-learn-card__thumb { opacity: .55; }
/* The other course rows of the Learning Center (Recently Learned): the same 4:3 slot and placeholder. */
.c404-learning-center .c404t-course-row__thumb { width: 96px; height: 72px; }
.c404-learning-center .c404t-course-row__thumb:empty {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3Cpath d='M9 8h7M9 11.5h5'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(135deg, var(--c404-primary) 0%, #221D63 100%);
}

/* ---------- Renew: one text link everywhere (Learning Center, Package page, Course page, My Purchases) ----------
   The surrounding text size, normal weight, underlined, in the link colour — never an orange button. Last in its
   row and pushed to the right; when the row is too narrow it wraps to its own line (still on the right) instead of
   squeezing the date. A 44 px tap area that does not make the row taller (negative block margins). */
.c404-renew-link {
	display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px;
	margin: -10px 0 -10px auto; padding: 10px 2px 10px 12px;
	border: 0; background: none;
	font-size: inherit; font-weight: 400; line-height: 1.3; white-space: nowrap;
	color: var(--c404-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.c404-renew-link:hover { color: #2B2496; text-decoration-thickness: 2px; }
.c404-renew-link:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -6px; border-radius: 6px; }
.c404-my-item__row--actions .c404-renew-link,
.c404-my-item__row--source .c404-renew-link { font-size: 13px; }

/* ---------- Learning Center: "View all my courses" ----------
   16 px below the last card (the section's 20 px bottom padding - 4) and 32 px above the next section title
   (28 + that section's 4 px top padding); no stacked margins. The button keeps its own style and 44 px height. */
.c404-learning-center > .c404-lc-all-courses { margin: -4px 0 0; padding: 0 var(--c404-gutter) 28px; }

/* ---------- The user's Package page ----------
   A fixed 16:9 banner; without a cover, a compact brand strip. Title, then status · validity / Lifetime · count,
   Renew last. Back to the Learning Center is the header's own Back. */
.c404-learn-package__banner { aspect-ratio: 16 / 9; }
.c404-learn-package__banner.is-placeholder { aspect-ratio: auto; height: 96px; }
.c404-learn-package__meta { margin-top: 2px; }

/* ---------- B batch (2026-10-21): My Courses cards and filters, Learning Device labels, footer spacing ----------
   My Courses uses the learning card above (.c404-learn-card); its first pill is the learning status. */
.c404-learn-status--not_started { background: var(--c404-border); color: var(--ink-soft); }
.c404-learn-status--in_progress { background: var(--brand-soft); color: var(--c404-primary); }
.c404-learn-status--completed { background: #E3F5F2; color: #0E7A6D; }
.c404-my-course-item.c404-learn-card { position: static; flex-direction: row; overflow: visible; }
/* My Purchases: every card is the Learning Center card (.c404-learn-card — same cover, title, status, validity, Renew,
   padding and radius) inside one outer card; what only My Purchases shows (course lists, sources, View Course,
   purchase detail) sits below it, under the text column. The app is phone-width at every window size, so the
   Learning Center's Package cards are one per row too (no two-column grid). */
.c404-my-item.c404-my-card { gap: 0; padding: 0; background: var(--surface); }
.c404-my-card > .c404-learn-card { border: 0; border-radius: 0; background: transparent; }
.c404-my-card .c404-learn-card__meta .c404-my-item__renew { margin-left: auto; }
.c404-my-card .c404-learn-card__meta .c404-my-item__renew--unavailable { margin-left: 0; flex-basis: 100%; }
.c404-my-item__details { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 10px 12px 118px; font-size: var(--c404-fs-meta); }
.c404-my-item__details .c404-my-item__courses { margin: 0; }
@media (max-width: 359px) { .c404-my-item__details { padding-left: 10px; } }
/* My Purchases, last pass (2026-10-22): course lists collapsed (the count is the summary, a chevron shows the state);
   View Course a plain link; Purchase History one compact list (rows, not cards): title + status, validity, order
   number · date · amount, then order total and the details link, granted Courses collapsed; one empty-state look. */
.c404-my-item__expand.c404-my-item__courses { margin: 0; }
.c404-my-item__courses > summary { list-style: none; gap: 6px; color: var(--ink); font-size: var(--c404-fs-meta); }
.c404-my-item__courses > summary::-webkit-details-marker { display: none; }
.c404-my-item__courses > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.c404-my-item__courses[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.c404-my-item__courses > .c404-my-item__course-list { margin-top: 4px; }
.c404-my-item__view { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; color: var(--c404-primary); font-size: var(--c404-fs-meta); text-decoration: underline; text-underline-offset: 2px; }
.c404-my-item-list[data-c404-list-items="history"] { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.c404-my-item.c404-my-item--history { gap: 4px; padding: 12px; border: 0; border-radius: 0; background: transparent; }
.c404-my-item--history + .c404-my-item--history { border-top: 1px solid var(--line); }
.c404-my-item--history .c404-my-item__title { font-size: var(--c404-fs-card); font-weight: 700; line-height: var(--c404-lh-tight); overflow-wrap: anywhere; }
.c404-my-item--history .c404-my-item__validity,
.c404-order-detail p { font-size: var(--c404-fs-meta); }
.c404-order-detail { gap: 2px; }
.c404-order-detail__line { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--ink-soft); }
.c404-order-detail__amounts { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.c404-order-detail__amounts .c404-order-detail__order-total { color: var(--ink-soft); }
.c404-order-detail__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 12px; }
.c404-order-detail__foot > .c404-my-item__courses { flex: 1 1 auto; min-width: 0; }
.c404-order-detail__link { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; color: var(--c404-primary); font-size: var(--c404-fs-meta); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.c404-my-item--history .c404-my-item__courses { margin-top: 2px; }
.c404-my-purchases__empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-soft); font-size: var(--c404-fs-meta); }
.c404-my-purchases__empty + .c404t-btn { margin-top: 12px; }
/* Result count + "Clear filters", between the filters and the list. */
.c404t-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; font-size: var(--c404-fs-meta); color: var(--ink-soft); }
.c404t-results-bar__count { font-variant-numeric: tabular-nums; }
.c404t-results-bar__clear { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px 0 12px; color: var(--c404-primary); text-decoration: underline; text-underline-offset: 2px; }
.c404t-results-bar__clear:focus-visible { outline: 2px solid var(--c404-primary); outline-offset: -6px; border-radius: 6px; }
/* Learning Device (Plugin markup): the row labels stay on one line. */
.woocommerce-wrap table.shop_table:has(.cenxus404-device-browser) th { width: 1%; white-space: nowrap; padding-right: 14px; }
.woocommerce-wrap table.shop_table:has(.cenxus404-device-browser) td { overflow-wrap: anywhere; }
/* The copyright line: a clear gap above the fixed tab bar (the app shell already reserves the bar's height). */
.c404t-footer { padding-bottom: 12px; }

/* ============================================================
   Compact layout (2026-11-01) — Home, the course product lists (Shop, product category and product search), the
   Learning Center (and the user's Package page), the learner's Courses page and My Purchases share one rhythm, one
   section-heading style and one horizontal card for products, courses and packages. Appended last so it wins over the
   earlier rules. Not changed: the Banner, the Course Tabs' own tabs, the Package Slider cards, the bottom tab bar.
   ============================================================ */

/* Spacing on the pages in scope: 12 px side padding, 8 px between cards. Sections keep 4 px top + 20 px bottom
   padding = 24 px between sections; a section heading has 12 px below it. */
body.home,
body.post-type-archive-product,
body.tax-product_cat,
body.page-template-template-learning-center,
body.page-template-template-courses,
body.page-template-template-my-courses { --c404-gutter: 12px; --c404-list-gap: 8px; }
.c404t-section__head { margin-bottom: 12px; }
.c404-learning-center .c404-learning-header { padding: 12px var(--c404-gutter) 8px; }

/* Section headings: one size, weight and line height everywhere (the Course Tabs keep their own tabs). */
.c404t-section__title,
.c404-my-section__title,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.home .c404t-app__main .kt-inside-inner-col > .wp-block-heading {
	font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.c404-my-section__title { margin: 0 0 12px; }
/* A heading placed straight in a Home column (e.g. above the video): inside the page gutter like every section. */
.home .c404t-app__main .kt-inside-inner-col > .wp-block-heading { margin: 4px var(--c404-gutter) 12px; }

/* Home quick icons: three (or two) equal columns, a 52 x 52 image at its own proportions, 12 px centred label. */
.home .c404t-quick-row { padding: 4px var(--c404-gutter) 16px; }
.home .c404t-quick-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 6px; }
.home .c404t-quick-icon--image.c404t-quick-icon--clear { border-radius: 0; }
.home .c404t-quick-item span { font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center; }

/* Home Course Tabs: the whole area white — tabs, cards and "See more". */
.home .c404t-section:has(> .c404t-tabs) { background: var(--c404-surface); padding: 12px var(--c404-gutter) 6px; margin-bottom: 20px; }
.home .c404t-section:has(> .c404t-tabs) .c404t-tabs { margin-bottom: 12px; }
.home .c404t-section:has(> .c404t-tabs) .c404t-more-link { padding: 10px 0 8px; }

/* ---------- One horizontal card ----------
   Products (Home lists, Shop / category / search, Related, WooCommerce product blocks), course rows (Learning Center,
   Continue Learning, course lists), Learning Center / My Purchases / Courses page cards and the Package list rows:
   image filling the left 40% (16:9, cropped to fit, never stretched), text on the right with 8 / 10 px padding,
   12 px radius. What each card shows is unchanged (price + button, progress, status / validity / Renew). */
.c404t-app .c404t-course-row,
.c404t-app .c404-learn-card,
.c404-package-row {
	gap: 0; padding: 0; align-items: stretch; min-width: 0; overflow: hidden;
	border: 1px solid var(--c404-border); border-radius: 12px; background: var(--c404-surface);
	box-shadow: 0 1px 6px rgba(22, 23, 27, .05);
}
.c404t-app .c404t-course-row__thumb,
.c404t-app .c404-learn-card__thumb,
.c404-package-row__media {
	flex: 0 0 40%; width: 40%; height: auto; min-height: 0; aspect-ratio: 16 / 9; align-self: stretch;
	border-radius: 0; overflow: hidden;
}
.c404t-app .c404t-course-row__thumb { position: relative; display: block; }
.c404t-app .c404t-course-row__thumb img,
.c404t-app .c404-learn-card__thumb img,
.c404-package-row__media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; }
.c404t-app .c404t-course-row__body,
.c404t-app .c404-learn-card__body,
.c404-package-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 10px; }
.c404t-app .c404t-course-row__title,
.c404t-app .c404-learn-card__title,
.c404-package-row__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
}
/* The last line (price and button, progress, status / validity / Renew) sits at the bottom of the card. */
.c404t-app .c404t-course-row__foot,
.c404t-app .c404-learn-card__meta,
.c404-package-row__foot { margin-top: auto; }
.c404t-app .c404-learn-card__meta { gap: 4px 8px; }

/* Product and package cards: a two-line title slot and the price beside the button, so cards of one list are the
   same height. No red Sale circle: the struck-through regular price and the sale price show the offer. */
.c404t-app .c404t-product-row .c404t-course-row__title,
.c404-package-row__title { min-height: calc(2 * 1.35em); }
.c404t-app .c404t-product-row .c404t-course-row__foot { flex-wrap: nowrap; align-items: flex-end; gap: 6px; }
.c404t-app .c404t-product-row .c404t-price-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; line-height: 1.25; }
.c404t-course-row .c404t-sale-badge,
.woocommerce ul.products li.product .c404t-course-row__thumb span.onsale { display: none; }
.c404t-app .c404t-product-row .c404t-course-row__foot .button,
.c404t-app .c404t-product-row .c404t-course-row__foot .added_to_cart,
.c404t-app .c404t-product-row .c404t-course-row__foot .wp-block-button__link { min-width: 88px; min-height: 32px; }

/* Lists of cards: 8 px apart (the WooCommerce loop had its own 12 px). */
.woocommerce ul.products.c404t-product-list,
.woocommerce-page ul.products.c404t-product-list,
.c404-package-list { gap: var(--c404-list-gap, 8px); }

/* Cards nested in an outer card keep no border of their own (the outer one has it). */
.c404t-app .c404-my-course-item .c404t-course-row,
.c404t-app .c404-learn-course > .c404t-course-row,
.c404t-app .c404-my-card > .c404-learn-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.c404-my-course-item,
.c404-learn-course,
.c404-my-item.c404-my-card { border-color: var(--c404-border); border-radius: 12px; overflow: hidden; }
.c404t-app .c404-my-course-item .c404t-course-row__body { padding-top: 8px; }
/* My Purchases: what sits below a card (course list, sources, purchase detail) lines up with the card's text. */
.c404-my-item__details { padding: 0 10px 12px calc(40% + 10px); }
@media (max-width: 359px) { .c404-my-item__details { padding-left: 10px; } }

/* Package list rows (the Packages block's List layout). */
.c404-package-list { display: flex; flex-direction: column; }
.c404-package-row { display: flex; }
.c404-package-row__media { position: relative; background: var(--c404-border); color: inherit; }
a.c404-package-row__media { display: block; }
.c404-package-row__media.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--c404-primary) 0%, #221D63 100%); color: rgba(255,255,255,0.75);
}
.c404-package-row__title a { color: inherit; text-decoration: none; }
.c404-package-row__desc,
.c404-package-row__duration { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--c404-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c404-package-row__foot { display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: flex-end; gap: 6px; }
.c404-package-row__price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; font-size: 16px; font-weight: 800; color: var(--c404-price); }
.c404-package-row__price del { font-size: 12px; font-weight: 600; color: var(--c404-text-muted); }
.c404-package-row__price ins { text-decoration: none; }
.c404-package-row__cta { margin-left: auto; min-height: 32px; padding: 5px 14px; font-size: 12px; flex-shrink: 0; }
.c404t-packages--list .c404t-more-link { padding: 10px 0 0; }

/* Phone widths: the regular (struck-through) price sits above the sale price, beside the button. */
@media (max-width: 479px) {
	.c404t-app .c404t-product-row .c404t-price-row,
	.c404-package-row__price { flex-direction: column; align-items: flex-start; }
	.c404t-app .c404t-product-row .c404t-price-row { min-height: calc(2 * 1.25em); justify-content: flex-end; }
}

/* Home video (an embed placed straight in a Home column): a rounded card inside the page gutter. Its heading is
   ordinary Home content (a Heading or Section Header block above it). */
.home .c404t-app__main .kt-inside-inner-col > iframe {
	box-sizing: border-box; max-width: calc(100% - 2 * var(--c404-gutter)) !important;
	margin: 0 var(--c404-gutter) 24px; border-radius: 12px; overflow: hidden;
}