/* Gradezup Home — Udemy-style course catalogue.
   Scoped under .gzh-* so it never leaks into the rest of the theme. */

.gzh-grid,
.gzh-carousel,
.gzh-cats {
	--gzh-ink: #1c1d1f;
	--gzh-muted: #6a6f73;
	--gzh-line: #e4e6ea;
	--gzh-accent: #2eb969;   /* Gradezup green */
	--gzh-accent-d: #229151;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--gzh-ink);
	box-sizing: border-box;
}
.gzh-grid *, .gzh-carousel *, .gzh-cats * { box-sizing: border-box; }

/* ---------------- course grid ---------------- */
.gzh-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.gzh-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.gzh-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.gzh-grid[data-cols="1"] { grid-template-columns: 1fr; }

/* ---------------- course carousel (single row, ~5 visible, arrows page batches) ---------------- */
.gzh-carousel { position: relative; }
.gzh-caro-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 6px;              /* room for card hover lift + shadow */
	scrollbar-width: none;             /* Firefox */
	-ms-overflow-style: none;          /* old Edge */
}
.gzh-caro-track::-webkit-scrollbar { display: none; }
/* Any direct child (course card or category tile). --gzh-per (visible-per-row on desktop) is set inline
   on .gzh-carousel from the admin setting and inherited here; media queries below cap it on small screens. */
.gzh-caro-track > * {
	flex: 0 0 calc((100% - (var(--gzh-per, 5) - 1) * 20px) / var(--gzh-per, 5));
	scroll-snap-align: start;
}
/* Circular overlay arrows, vertically centred at the edges. */
.gzh-caro-btn {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--gzh-line); background: #fff; color: var(--gzh-ink);
	box-shadow: 0 6px 18px rgba(28,29,31,.18); cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: background .15s ease, transform .15s ease;
}
.gzh-caro-btn:hover { background: #f6fbf8; }
.gzh-caro-btn[hidden] { display: none; }
.gzh-caro-prev { left: -14px; }
.gzh-caro-next { right: -14px; }
.gzh-caro-btn::before {
	content: ""; width: 10px; height: 10px;
	border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
}
.gzh-caro-prev::before { transform: rotate(135deg); margin-left: 4px; }
.gzh-caro-next::before { transform: rotate(-45deg); margin-right: 4px; }
/* Small screens can't fit the desktop count — cap --gzh-per on the track (overrides the inherited value). */
@media (max-width: 980px) { .gzh-caro-track { --gzh-per: 3; } }
@media (max-width: 680px) { .gzh-caro-track { --gzh-per: 2; } }
@media (max-width: 460px) { .gzh-caro-track > * { flex-basis: 82%; } .gzh-caro-btn { display: none; } }

.gzh-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--gzh-line);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gzh-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(28,29,31,.14);
	border-color: #d4d7dc;
}

.gzh-cover {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.gzh-cover-img { width: 100%; height: 100%; object-fit: cover; }
.gzh-cover-code {
	color: #fff;
	font-weight: 800;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	letter-spacing: 1px;
	text-align: center;
	padding: 0 14px;
	text-shadow: 0 2px 12px rgba(0,0,0,.22);
	word-break: break-word;
}

.gzh-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gzh-card-title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--gzh-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gzh-card-cat { font-size: .8rem; color: var(--gzh-muted); }
.gzh-instructor { font-size: .8rem; color: var(--gzh-muted); }

/* rating (shown only when a real average exists) */
.gzh-stars { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; }
.gzh-star { color: #e0e0e0; font-style: normal; font-size: .95rem; line-height: 1; }
.gzh-star.is-full { color: #e59819; }
.gzh-star.is-half { background: linear-gradient(90deg, #e59819 50%, #e0e0e0 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gzh-stars b { color: #59461b; font-size: .82rem; margin-left: 4px; }
.gzh-rcount { color: var(--gzh-muted); font-size: .78rem; }

.gzh-card-meta { font-size: .8rem; color: var(--gzh-muted); margin-top: 2px; }

.gzh-card-foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.gzh-price { font-weight: 800; font-size: 1.05rem; color: var(--gzh-ink); }
.gzh-price .amount { font-weight: 800; }
.gzh-owned-tag { color: var(--gzh-accent-d); font-size: .95rem; }
.gzh-cta {
	font-weight: 700;
	font-size: .85rem;
	color: #fff;
	background: var(--gzh-accent);
	padding: 8px 14px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background .18s ease;
}
.gzh-card:hover .gzh-cta { background: var(--gzh-accent-d); }
.gzh-cta.gzh-owned { background: var(--gzh-ink); }

.gzh-empty {
	padding: 28px;
	text-align: center;
	color: #6a6f73;
	border: 1px dashed #d4d7dc;
	border-radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- category tiles ---------------- */
.gzh-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
.gzh-cat-tile {
	position: relative;
	min-height: 116px;
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.gzh-cat-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,29,31,.2); }
.gzh-cat-tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 100%);
}
.gzh-cat-name { position: relative; z-index: 1; font-weight: 800; font-size: 1.1rem; }
.gzh-cat-count { position: relative; z-index: 1; font-size: .82rem; opacity: .95; margin-top: 2px; }

/* ---------------- course content list (on product pages) ---------------- */
.gzh-cc {
	--gzh-ink: #1c1d1f; --gzh-muted: #6a6f73; --gzh-line: #e4e6ea; --gzh-accent: #2eb969; --gzh-accent-d: #229151;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	max-width: 820px; margin: 34px auto; color: var(--gzh-ink);
}
.gzh-cc * { box-sizing: border-box; }
.gzh-cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gzh-cc-h { margin: 0; font: 800 1.35rem/1.2 inherit; letter-spacing: -.4px; }
.gzh-cc-sub { font-size: .88rem; color: var(--gzh-muted); }
.gzh-cc-list { border: 1px solid var(--gzh-line); border-radius: 12px; overflow: hidden; }
.gzh-cc-row {
	display: flex; align-items: center; gap: 14px; padding: 15px 18px;
	text-decoration: none; color: inherit; border-top: 1px solid var(--gzh-line);
	transition: background .15s ease;
}
.gzh-cc-row:first-child { border-top: 0; }
.gzh-cc-row:hover { background: #f6fbf8; }
.gzh-cc-row.is-locked:hover { background: #fafafa; }
.gzh-cc-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.gzh-cc-play { background: rgba(46,185,105,.14); color: var(--gzh-accent-d); }
.gzh-cc-lock { background: #eef0f2; color: #9099a1; }
.gzh-cc-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gzh-cc-titrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gzh-cc-title { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.gzh-cc-free { font: 800 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .6px; text-transform: uppercase; color: #fff; background: #2eb969;
	padding: 3px 7px; border-radius: 5px; }
.gzh-cc-updated { font: 800 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .6px; text-transform: uppercase; color: #fff; background: #f59e0b;
	padding: 3px 7px; border-radius: 5px; }
.gzh-cc-row.is-locked .gzh-cc-title { color: #6a6f73; }
.gzh-cc-meta { font-size: .8rem; color: var(--gzh-muted); }
.gzh-cc-cta { flex: none; font-weight: 700; font-size: .82rem; padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.gzh-cc-start { background: var(--gzh-accent); color: #fff; }
.gzh-cc-row:hover .gzh-cc-start { background: var(--gzh-accent-d); }
.gzh-cc-unlock { background: transparent; color: var(--gzh-muted); border: 1px solid var(--gzh-line); }
/* finished → "Retake" (dark); in-progress → "Resume" (amber) */
.gzh-cc-retake { background: var(--gzh-ink); color: #fff; }
.gzh-cc-row:hover .gzh-cc-retake { background: #000; }
.gzh-cc-resume { background: #f59e0b; color: #fff; }
.gzh-cc-row:hover .gzh-cc-resume { background: #d97f07; }
/* per-user score + progress bar */
.gzh-cc-score { font-size: .78rem; font-weight: 700; color: var(--gzh-accent-d); }
.gzh-cc-prog { display: block; height: 4px; margin-top: 6px; background: var(--gzh-line); border-radius: 999px; overflow: hidden; }
.gzh-cc-prog i { display: block; height: 100%; width: 0; background: var(--gzh-accent); border-radius: inherit; transition: width .3s ease; }
.gzh-cc-prog.is-done i { background: var(--gzh-accent-d); }
.gzh-cc-prog.is-progress i { background: #f59e0b; }
.gzh-cc-prog.is-new { opacity: .55; }
@media (max-width: 480px) {
	.gzh-cc-meta { display: none; }
	.gzh-cc-row { padding: 13px 14px; }
}

/* ================= PRODUCT PAGE — DESIGN 1 ("Classic green") =================
   Everything below is scoped to `.gzh-coursepage.gzh-pd-1`, both body classes: `gzh-coursepage` marks a
   product page, `gzh-pd-{id}` is the design chosen in Settings -> Gradezup Home (GZH_Settings::designs()).

   To add Design 2: register it in GZH_Settings::designs(), then copy this whole block and swap the prefix
   to `.gzh-coursepage.gzh-pd-2`. Anything a design does not restyle simply falls back to the theme, so a
   new design should cover the same elements this one does.

   Shared components (course-content list .gzh-cc*, phone mockup, poll section, carousels, Continue
   learning) are deliberately NOT scoped here — they render off the product page too and must survive a
   design switch.
   ============================================================================ */
.gzh-coursepage.gzh-pd-1 .gzh-cp-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 16px;
	color: #6a6f73; font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-meta i { color: #c7ccd2; font-style: normal; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-cat {
	background: #eef7f1; color: #229151; font-weight: 700; padding: 4px 11px; border-radius: 999px;
	font-size: 12px; letter-spacing: .3px;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-includes {
	margin: 18px 0; padding: 18px 20px; border: 1px solid #e4e6ea; border-radius: 12px; background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-includes h3 { margin: 0 0 12px; font: 800 1.05rem/1.2 inherit; color: #1c1d1f; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-includes li { display: flex; align-items: center; gap: 12px; color: #3a3d42; font: 500 14px/1.4 inherit; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-ic { flex: none; width: 24px; text-align: center; }

/* hero typography (modest, no layout changes) */
.gzh-coursepage.gzh-pd-1 .product_title.entry-title { font-weight: 800; letter-spacing: -.6px; color: #1c1d1f; }
.gzh-coursepage.gzh-pd-1 .product .price .woocommerce-Price-amount { font-weight: 800; font-size: 1.7rem; color: #1c1d1f; }
.gzh-coursepage.gzh-pd-1 .single_add_to_cart_button.button {
	background: #2eb969 !important; color: #fff !important; border-radius: 10px !important;
	font-weight: 800 !important; letter-spacing: .2px; padding: 15px 30px !important;
}
.gzh-coursepage.gzh-pd-1 .single_add_to_cart_button.button:hover { background: #229151 !important; }

/* owner: "Start course" button (replaces price + add-to-cart) */
.gzh-coursepage.gzh-pd-1 .gzh-cp-startwrap { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gzh-coursepage.gzh-pd-1 .gzh-start-course.button {
	background: #2eb969 !important; color: #fff !important; border-radius: 10px !important;
	font-weight: 800 !important; letter-spacing: .2px; padding: 15px 34px !important; font-size: 1.02rem !important;
	text-decoration: none; display: inline-block;
}
.gzh-coursepage.gzh-pd-1 .gzh-start-course.button:hover { background: #229151 !important; }

/* non-owners: secondary "Try a free paper" CTA sitting beside Add to cart */
.gzh-coursepage.gzh-pd-1 .gzh-try-free.button {
	background: #fff !important; color: #229151 !important; border: 2px solid #2eb969 !important;
	padding: 13px 26px !important; font-size: .98rem !important; white-space: nowrap;
}
.gzh-coursepage.gzh-pd-1 .gzh-try-free.button:hover { background: #f0faf4 !important; color: #1c7a44 !important; }
/* Scoped with :has() so only a cart form containing this button is re-laid-out — quantity selectors on
   ordinary (non-course) products are untouched. Browsers without :has() just wrap it to the next line. */
.gzh-coursepage.gzh-pd-1 form.cart:has(.gzh-try-free) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gzh-coursepage.gzh-pd-1 form.cart:has(.gzh-try-free) .quantity { display: none; }
.gzh-coursepage.gzh-pd-1 form.cart:has(.gzh-try-free) .single_add_to_cart_button { width: auto; flex: 0 0 auto; margin: 0 !important; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-owned {
	font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .4px; text-transform: uppercase; color: #229151;
}

/* ---------------- product tab rail ----------------
   Astra draws its active indicator with a pseudo-element and colours it blue, so the reset below has to
   neutralise ::before/::after on the theme's markup, not just override border-bottom. */
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex; flex-wrap: nowrap; gap: 4px;
	margin: 0 0 22px; padding: 0; list-style: none;
	box-shadow: inset 0 -1px 0 var(--gzh-line, #e4e6ea);
	overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li,
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li.active {
	margin: 0 !important; padding: 0 !important; background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* kill the theme/WooCommerce decorations: Astra's top hairline (ul::before), the corner shims (li::before
   /::after) and its blue active bar. Colours below need !important — Astra's own tab rules land at the
   same specificity but load after this file, so source order would otherwise win. */
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs::before,
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li::before,
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li::after,
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li a::before { content: none !important; display: none !important; }
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li a {
	position: relative; display: block !important; white-space: nowrap;
	font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #5f6a66 !important; text-decoration: none; border: 0 !important;
	padding: 14px 15px !important; border-radius: 10px 10px 0 0;
	transition: color .15s ease, background .15s ease;
}
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li a:hover { color: var(--gzh-ink, #1c1d1f) !important; background: rgba(46,185,105,.07); }
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li a:focus-visible { outline: 2px solid #2eb969; outline-offset: -3px; }
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li.active a:hover { color: #229151 !important; background: none; }
.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li.active a::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
	height: 2.5px; background: #2eb969; border-radius: 3px 3px 0 0; display: block !important;
}
@media (max-width: 560px) {
	.gzh-coursepage.gzh-pd-1 .woocommerce-tabs ul.tabs.wc-tabs li a { padding: 13px 11px; font-size: 14px; }
}

/* full-width community poll carousel band (below summary, above tabs) */
.gzh-poll-section {
	clear: both;
	margin: 8px 0 30px;
	padding-top: 26px;
	border-top: 1px solid var(--gzh-line, #e4e6ea);
}
.gzh-poll-section .rmqb-pc-wrap { max-width: 100%; }

/* poll tab: My Polls widget + community carousel */
.gzh-poll-tab { max-width: 820px; margin: 4px auto 0; }
.gzh-poll-tab-mine { margin-bottom: 30px; }
.gzh-poll-tab-public { padding-top: 22px; border-top: 1px solid var(--gzh-line, #e4e6ea); }
.gzh-poll-tab-h { margin: 0 0 12px; font: 800 1.15rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2937; }
#tab-poll a { text-decoration: none; box-shadow: none; }

/* course-content list sitting inside the WooCommerce tab panel */
#tab-course_content .gzh-cc { margin: 4px auto 0; }
/* Astra underlines links inside tab content — keep our rows clean. */
#tab-course_content .gzh-cc-row,
#tab-course_content .gzh-cc-row:hover,
#tab-course_content .gzh-cc-row * { text-decoration: none !important; box-shadow: none !important; }

/* WooCommerce's own Description + Reviews panels — same 820px column as our tabs, nothing else. */
.gzh-coursepage.gzh-pd-1 #tab-description,
.gzh-coursepage.gzh-pd-1 #tab-reviews > .woocommerce-Reviews { max-width: 820px; margin-left: auto; margin-right: auto; }
.gzh-coursepage.gzh-pd-1 #tab-description h2,
.gzh-coursepage.gzh-pd-1 #tab-reviews .woocommerce-Reviews-title {
	margin: 0 0 14px; font: 800 1.15rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2937;
}
.gzh-coursepage.gzh-pd-1 #tab-description p { color: #3a3d42; line-height: 1.7; }

/* ---------------- FAQ tab: curated accordion + live student Q&A ---------------- */
.gzh-faq {
	max-width: 820px; margin: 4px auto 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.gzh-faq-h { margin: 0 0 14px; font: 800 1.15rem/1.2 inherit; color: #1f2937; }
#tab-faq a { text-decoration: none; box-shadow: none; }

.gzh-faq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gzh-line, #e4e6ea); }
.gzh-faq-item { border-bottom: 1px solid var(--gzh-line, #e4e6ea); }
.gzh-faq-item details { padding: 0; }
.gzh-faq-q {
	list-style: none; cursor: pointer; padding: 15px 34px 15px 0; position: relative;
	font: 700 15px/1.45 inherit; color: #1c1d1f;
}
.gzh-faq-q::-webkit-details-marker { display: none; }
.gzh-faq-q::after {
	content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 20px; font-weight: 400; color: #6a6f73; line-height: 1;
}
.gzh-faq-item details[open] .gzh-faq-q::after { content: "\2013"; }
.gzh-faq-item details[open] .gzh-faq-q { color: #229151; }
.gzh-faq-a { padding: 0 34px 16px 0; color: #3a3d42; font-size: 14.5px; line-height: 1.7; }
.gzh-faq-a p { margin: 0 0 10px; }
.gzh-faq-a p:last-child { margin-bottom: 0; }

/* live Q&A */
.gzh-qa { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--gzh-line, #e4e6ea); }
.gzh-qa-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.gzh-qa-item { border: 1px solid var(--gzh-line, #e4e6ea); border-radius: 12px; padding: 16px 18px; background: #fff; }
.gzh-qa-who {
	margin: 0 0 6px; font: 700 13px/1.3 inherit; color: #1c1d1f;
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.gzh-qa-who time { font-weight: 500; color: #6a6f73; }
.gzh-qa-body { color: #3a3d42; font-size: 14.5px; line-height: 1.65; }
.gzh-qa-body p { margin: 0 0 8px; }
.gzh-qa-body p:last-child { margin-bottom: 0; }
.gzh-qa-a {
	margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: #f6f7f9;
	border-left: 3px solid #c7ccd2;
}
.gzh-qa-a.is-staff { background: #eef7f1; border-left-color: #2eb969; }
.gzh-qa-badge {
	background: #2eb969; color: #fff; font: 700 10px/1 inherit; letter-spacing: .5px; text-transform: uppercase;
	padding: 4px 7px; border-radius: 999px;
}
.gzh-qa-empty { color: #6a6f73; font-size: 14.5px; margin: 0 0 22px; }

.gzh-qa-form { display: grid; gap: 8px; }
.gzh-qa-form label { font: 700 14px/1.3 inherit; color: #1c1d1f; }
.gzh-qa-form textarea {
	width: 100%; border: 1px solid var(--gzh-line, #e4e6ea); border-radius: 10px; padding: 12px 14px;
	font: 400 14.5px/1.6 inherit; color: #1c1d1f; resize: vertical;
}
.gzh-qa-form textarea:focus { outline: none; border-color: #2eb969; box-shadow: 0 0 0 3px rgba(46,185,105,.15); }
.gzh-qa-actions { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.gzh-qa-submit.button {
	background: #2eb969 !important; color: #fff !important; border-radius: 10px !important;
	font-weight: 800 !important; padding: 11px 24px !important;
}
.gzh-qa-submit.button:hover { background: #229151 !important; }
.gzh-qa-submit.button[disabled] { opacity: .6; cursor: default; }
.gzh-qa-msg { font: 600 13px/1.4 inherit; color: #6a6f73; }
.gzh-qa-msg.is-ok { color: #229151; }
.gzh-qa-msg.is-error { color: #c0392b; }
.gzh-qa-login { color: #6a6f73; font-size: 14.5px; }
.gzh-qa-login a { color: #229151; font-weight: 700; }

/* ---------------- practice-paper modal (iframe) ---------------- */
body.gzh-modal-open { overflow: hidden; }
.gzh-modal {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
	padding: 24px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.gzh-modal.is-open { opacity: 1; visibility: visible; }
.gzh-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 10, 24, .62); }
.gzh-modal-box {
	position: relative; width: min(1040px, 94vw); height: 94vh; background: #fff;
	border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	transform: translateY(10px) scale(.99); transition: transform .2s ease;
}
.gzh-modal.is-open .gzh-modal-box { transform: none; }
.gzh-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: #f9fafb; }
.gzh-modal-close {
	position: absolute; top: 10px; right: 12px; z-index: 2;
	/* force a true circle — !important beats the theme's global button padding that was stretching it into an oval */
	width: 38px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important;
	box-sizing: border-box !important; border: 0 !important; border-radius: 50% !important;
	display: flex; align-items: center; justify-content: center;
	background: #dc2626; color: #fff; font-size: 24px; line-height: 1;
	cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.gzh-modal-close:hover { background: #b91c1c; transform: scale(1.05); }
@media (max-width: 600px) {
	.gzh-modal { padding: 0; }
	.gzh-modal-box { width: 100vw; height: 100vh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.gzh-modal, .gzh-modal-box { transition: none; }
}

/* ---------------- my learning block ---------------- */
.gzh-ml { background: #f7f9fa; }
/* ---- course search (above the courses carousel) ---- */
.gzh-courses { position: relative; }
.gzh-search {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	max-width: 560px; margin: 0 0 18px;
}
.gzh-search-in {
	flex: 1 1 220px; min-width: 0;
	padding: 12px 15px; font-size: .95rem; line-height: 1.3; color: #1c1d1f;
	background: #fff; border: 1px solid var(--gzh-line, #e4e6ea); border-radius: 10px;
	outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.gzh-search-in:focus { border-color: #2eb969; box-shadow: 0 0 0 3px rgba(46,185,105,.18); }
.gzh-search-btn {
	flex: none; cursor: pointer; border: 0; border-radius: 10px;
	padding: 12px 20px; font-weight: 800; font-size: .92rem;
	background: #2eb969; color: #fff; transition: background .15s ease;
}
.gzh-search-btn:hover { background: #229151; }
.gzh-search-status { flex: 1 0 100%; margin: 2px 0 0; font-size: .85rem; color: var(--gzh-muted, #6a6f73); }
@media (max-width: 560px) {
	.gzh-search { max-width: none; }
	.gzh-search-in { flex: 1 1 100%; }
	.gzh-search-btn { flex: 1 1 100%; }
}

.gzh-ml-in { max-width: 1200px; margin: 0 auto; padding: 52px 24px 58px; }
.gzh-ml-title {
	margin: 0 0 20px;
	font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1c1d1f; letter-spacing: -.5px;
}
/* "Continue learning" — each course is a collapsible <details> accordion (keeps the page short when a
   learner owns several courses). The list inside is the same centered course-content list. */
.gzh-ml-course { background: #fff; border: 1px solid var(--gzh-line, #e4e6ea); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.gzh-ml-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 24px; user-select: none; }
.gzh-ml-sum::-webkit-details-marker { display: none; }
.gzh-ml-cname { font: 800 clamp(1.1rem, 2vw, 1.4rem)/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #2a2f5b; letter-spacing: -.3px; }
.gzh-ml-cmeta { margin-left: auto; color: var(--gzh-muted, #6a6f73); font-size: .85rem; white-space: nowrap; }
.gzh-ml-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid #9aa0a6; border-bottom: 2px solid #9aa0a6; transform: rotate(45deg); transition: transform .2s ease; }
.gzh-ml-course[open] .gzh-ml-chev { transform: rotate(-135deg); }
.gzh-ml-sum:hover .gzh-ml-cname { color: #1c1d1f; }
.gzh-ml-sum:hover { background: #f6fbf8; }
.gzh-ml-body { padding: 0 24px 22px; }
.gzh-ml-body .gzh-cc { margin: 4px auto 0; }
.gzh-ml-empty { color: #6a6f73; font-size: .95rem; margin: 0; }

/* Nested module accordions inside a level/bundle course — a lighter, smaller echo of the outer one, so
   the two read as the same control at two depths rather than two different widgets. */
.gzh-ml-mod { border: 1px solid var(--gzh-line, #e4e6ea); border-radius: 10px; margin-top: 10px; overflow: hidden; background: #fcfdfc; }
.gzh-ml-mod:first-child { margin-top: 4px; }
.gzh-ml-msum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; user-select: none; }
.gzh-ml-msum::-webkit-details-marker { display: none; }
.gzh-ml-msum:hover { background: #f6fbf8; }
.gzh-ml-mname { font-weight: 700; font-size: .98rem; line-height: 1.25; color: #2a2f5b; }
.gzh-ml-mmeta { margin-left: auto; color: var(--gzh-muted, #6a6f73); font-size: .8rem; white-space: nowrap; }
.gzh-ml-mchev { flex: none; width: 7px; height: 7px; border-right: 2px solid #9aa0a6; border-bottom: 2px solid #9aa0a6; transform: rotate(45deg); transition: transform .2s ease; }
.gzh-ml-mod[open] .gzh-ml-mchev { transform: rotate(-135deg); }
.gzh-ml-mod[open] .gzh-ml-msum { border-bottom: 1px solid var(--gzh-line, #e4e6ea); }
.gzh-ml-mbody { padding: 0 12px 14px; background: #fff; }
/* .gzh-cc is capped at 820px and auto-centred, which is right for a full-width flat list but reads as
   misalignment once nested — the sub-accordion already provides the containment. Let it fill. */
.gzh-ml-mbody .gzh-cc { margin: 4px 0 0; max-width: none; }
@media (max-width: 560px) {
	.gzh-ml-msum { padding: 12px 13px; gap: 9px; }
	.gzh-ml-mname { font-size: .92rem; }
	.gzh-ml-mbody { padding: 0 8px 12px; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
	.gzh-grid, .gzh-grid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
	.gzh-grid, .gzh-grid[data-cols="4"], .gzh-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
	.gzh-card-title { font-size: .95rem; }
}
@media (max-width: 460px) {
	.gzh-grid { grid-template-columns: 1fr; }
	.gzh-cats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.gzh-card, .gzh-cat-tile, .gzh-cta { transition: none; }
}

/* ---------------- "Restore access" disclosure (buy-box column) ----------------
   NB: the --gzh-* custom properties are scoped to .gzh-grid/.gzh-carousel/.gzh-cats
   (top of this file), NOT to .gzh-coursepage — so use literal colours here, exactly
   like the .single_add_to_cart_button / .gzh-start-course rules above. */
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore {
	margin: 14px 0 4px;
	border: 1px solid #e4e6ea;
	border-radius: 8px;
	background: #fff;
	font-size: .9rem;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore > summary {
	list-style: none;
	cursor: pointer;
	padding: 10px 14px;
	color: #6a6f73;
	line-height: 1.4;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore > summary::-webkit-details-marker { display: none; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore > summary span {
	color: #229151;
	font-weight: 700;
	white-space: nowrap;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore[open] > summary { border-bottom: 1px solid #e4e6ea; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body { padding: 12px 14px 14px; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body .eoss-form p { margin: 0 0 10px; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body label { color: #6a6f73; font-size: .82rem; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #e4e6ea;
	border-radius: 6px;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body button[type="submit"] {
	background: #2eb969;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 9px 16px;
	font-weight: 700;
	cursor: pointer;
}
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body button[type="submit"]:hover { background: #229151; }
.gzh-coursepage.gzh-pd-1 .gzh-cp-restore-body button[disabled] { opacity: .6; cursor: default; }

/* ================= PRODUCT PAGE — DESIGN 2 ("Marketplace") =================
   Dark hero band behind the product row, with .summary lifted onto it as a white buy card, then white
   panels from the poll/tabs down. Everything is scoped to `.gzh-coursepage.gzh-pd-2`.

   The band reuses the /gradezup-home/ hero background (.gzhp-hero-wrap): a 135deg navy→slate→deep-green
   base, three radial brand glows, and a 64px grid texture.

   Two constraints drive how it's painted:
   1. box-shadow can only spread a SOLID colour, so the gradient can't use the `0 0 0 100vmax` bleed the
      rest of this file relies on. It goes on a pseudo-element with `inset: 0 -100vmax` instead — vmax,
      not vw, so a scrollbar can't push the page into horizontal overflow.
   2. ::after is taken — WooCommerce ships `div.product::after {content:"";display:block;clear:both}` and
      the hero is float-based, so overriding it would collapse the very box being painted. Hence the whole
      stack lives in ::before, and the grid layer can't be mask-faded like it is on the home page (a mask
      applies to the whole pseudo, base gradient included). It's dialled to .04 alpha and left unmasked.
   ============================================================================ */
.gzh-coursepage.gzh-pd-2 div.product {
	position: relative;
	background: none;
	clip-path: inset(0 -100vmax);
	padding: 34px 0 0;   /* no bottom padding — it would show as a strip of gradient below the last panel */
}
/* A box-shadow never creates scrollbars, but an absolutely-positioned pseudo-element DOES contribute
   scrollable overflow, and clip-path on the parent doesn't suppress it (measured: 2513px vs a 1280px
   viewport). Clipping on the page wrapper is what contains it. `clip` rather than `hidden` so no scroll
   container is created and position:sticky ancestors keep working; overflow-y stays visible. The wrapper
   is viewport-wide, so the white panels below still bleed edge to edge. */
.gzh-coursepage.gzh-pd-2 .site-content { overflow-x: clip; }
.gzh-coursepage.gzh-pd-2 div.product::before {
	content: ""; position: absolute; inset: 0 -100vmax; z-index: 0; pointer-events: none;
	background:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/64px 64px,
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/64px 64px,
		radial-gradient(38% 55% at 12% 25%, rgba(46,185,105,.22), transparent 70%),
		radial-gradient(32% 48% at 84% 16%, rgba(124,214,164,.13), transparent 70%),
		radial-gradient(40% 60% at 72% 92%, rgba(250,204,21,.07), transparent 70%),
		linear-gradient(135deg, #0e1b2e 0%, #112233 45%, #0b3b2e 100%);
}
/* The poll band, tabs and related products also live inside div.product, so they paint solid white OVER
   the gradient — that's what stops the dark at the hero. Solid white can use the box-shadow bleed.
   Their vertical MARGINS must become padding: a margin leaves a transparent gap between two white panels,
   and the gradient shows straight through it (measured: a 30px strip below the poll and 108px below the
   tabs). Padding is inside the panel, so it's white. */
.gzh-coursepage.gzh-pd-2 .gzh-poll-section,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs,
.gzh-coursepage.gzh-pd-2 .related.products {
	position: relative; z-index: 1;
	background: #fff;
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
	margin-top: 0 !important; margin-bottom: 0 !important;
	padding-top: 34px; padding-bottom: 44px;
	border-top: 0;
}

/* Gallery reads as a deliberate hero asset on the dark.
   !important on the shadow: WooCommerce ships `.woocommerce-js div.product div.images img {box-shadow:none}`,
   which out-specifies this selector — without it the shadow silently never applies. */
.gzh-coursepage.gzh-pd-2 .woocommerce-product-gallery { position: relative; z-index: 1; }
.gzh-coursepage.gzh-pd-2 .woocommerce-product-gallery img {
	border-radius: 12px; border: 0; box-shadow: 0 18px 44px rgba(0,0,0,.45) !important;
}

/* ---- the buy card ---- */
.gzh-coursepage.gzh-pd-2 .summary.entry-summary {
	position: relative; z-index: 1;
	background: #fff; border: 0; border-radius: 14px; padding: 26px 26px 28px;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.gzh-coursepage.gzh-pd-2 .summary .woocommerce-breadcrumb {
	font-weight: 700; font-size: 12px; line-height: 1.4; color: #6a6f73; margin: 0 0 12px;
}
.gzh-coursepage.gzh-pd-2 .summary .woocommerce-breadcrumb a { color: #229151; text-decoration: none; }
.gzh-coursepage.gzh-pd-2 .summary .woocommerce-breadcrumb a:hover { text-decoration: underline; }
/* Astra prints the category twice (its own .single-product-category plus our meta line); the meta pill is
   the badge here, so hide the duplicate. .product_meta repeats it again under the buttons — also hidden. */
.gzh-coursepage.gzh-pd-2 .single-product-category,
.gzh-coursepage.gzh-pd-2 .product_meta { display: none !important; }
/* category badge (the "Bestseller" cue) */
.gzh-coursepage.gzh-pd-2 .gzh-cp-cat {
	display: inline-block; background: #fde68a; color: #7c5b09;
	font-weight: 800; font-size: 11px; line-height: 1; letter-spacing: .6px; text-transform: uppercase;
	padding: 6px 10px; border-radius: 5px;
}
.gzh-coursepage.gzh-pd-2 .product_title.entry-title {
	font-weight: 800; font-size: clamp(1.7rem,2.8vw,2.3rem); line-height: 1.18;
	letter-spacing: -1px; color: #14181a; margin: 10px 0 12px;
}
.gzh-coursepage.gzh-pd-2 .gzh-cp-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0 0 14px; color: #6a6f73; font-weight: 600; font-size: 13px; line-height: 1.4;
}
.gzh-coursepage.gzh-pd-2 .gzh-cp-meta i { color: #c7ccd2; font-style: normal; }
.gzh-coursepage.gzh-pd-2 .price .woocommerce-Price-amount {
	font-weight: 800; font-size: 1.65rem; color: #14181a; letter-spacing: -.6px;
}
/* CTAs stack full width inside the card */
.gzh-coursepage.gzh-pd-2 form.cart,
.gzh-coursepage.gzh-pd-2 form.cart:has(.gzh-try-free) {
	display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 6px;
}
.gzh-coursepage.gzh-pd-2 form.cart .quantity { display: none; }
.gzh-coursepage.gzh-pd-2 .single_add_to_cart_button.button {
	width: 100% !important; flex: 0 0 auto; margin: 0 !important;
	background: #2eb969 !important; color: #fff !important;
	border-radius: 8px !important; font-weight: 800 !important; padding: 15px 24px !important; font-size: 1rem !important;
}
.gzh-coursepage.gzh-pd-2 .single_add_to_cart_button.button:hover { background: #229151 !important; }
.gzh-coursepage.gzh-pd-2 .gzh-try-free.button {
	width: 100%; text-align: center; margin: 0 !important;
	background: #fff !important; color: #14181a !important; border: 2px solid #d7dee6 !important;
	border-radius: 8px !important; font-weight: 800 !important; padding: 13px 24px !important;
}
.gzh-coursepage.gzh-pd-2 .gzh-try-free.button:hover { background: #f5f7f9 !important; border-color: #14181a !important; color: #14181a !important; }
/* :not() matters — the Try-a-free-paper button also carries .gzh-start-course (it reuses that click
   handler), so without this the green fill would override its outline styling. */
.gzh-coursepage.gzh-pd-2 .gzh-start-course.button:not(.gzh-try-free) {
	display: block; width: 100%; text-align: center;
	background: #2eb969 !important; color: #fff !important; border-radius: 8px !important;
	font-weight: 800 !important; padding: 15px 24px !important;
}
.gzh-coursepage.gzh-pd-2 .gzh-cp-startwrap { margin: 16px 0 6px; display: block; }
/* includes list: borderless inside the card */
.gzh-coursepage.gzh-pd-2 .gzh-cp-includes {
	margin: 18px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid #e4e6ea; border-radius: 0; background: none;
}
.gzh-coursepage.gzh-pd-2 .gzh-cp-includes h3 { margin: 0 0 10px; font-weight: 800; font-size: .95rem; line-height: 1.2; color: #14181a; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-includes li { display: flex; align-items: center; gap: 11px; color: #3a3d42; font-weight: 500; font-size: 13.5px; line-height: 1.4; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-ic { flex: none; width: 22px; text-align: center; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-owned {
	font-weight: 800; font-size: 11px; line-height: 1; letter-spacing: .4px; text-transform: uppercase; color: #229151;
}
.gzh-coursepage.gzh-pd-2 .gzh-cp-restore { margin-top: 14px; border: 1px solid #e4e6ea; border-radius: 10px; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-restore > summary { padding: 11px 13px; cursor: pointer; list-style: none; font-weight: 600; font-size: 13px; line-height: 1.3; color: #3a3d42; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-restore > summary::-webkit-details-marker { display: none; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-restore-body { padding: 12px 13px 14px; }
.gzh-coursepage.gzh-pd-2 .gzh-cp-restore-body button[type="submit"] {
	background: #2eb969; color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 700; cursor: pointer;
}

/* ---- tab rail on the white panel ---- */
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none;
	box-shadow: inset 0 -2px 0 #e4e6ea;
	overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li.active {
	margin: 0 !important; padding: 0 !important; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs::before,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li::before,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li::after,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li a::before { content: none !important; display: none !important; }
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li a {
	position: relative; display: block !important; white-space: nowrap;
	font: 800 15.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #3a3d42 !important; text-decoration: none; border: 0 !important;
	padding: 15px 16px !important; border-radius: 0;
	transition: color .15s ease;
}
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li a:hover { color: #14181a !important; }
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li.active a:hover { color: #14181a !important; }
.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li.active a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
	height: 3px; background: #2eb969; display: block !important;
}
/* boxed content panel, the "What you'll learn" cue */
.gzh-coursepage.gzh-pd-2 #tab-description,
.gzh-coursepage.gzh-pd-2 #tab-reviews > .woocommerce-Reviews { max-width: 900px; margin-left: auto; margin-right: auto; }
.gzh-coursepage.gzh-pd-2 #tab-description {
	border: 1px solid #e4e6ea; border-radius: 12px; padding: 24px 26px;
}
.gzh-coursepage.gzh-pd-2 #tab-description h2 { margin-top: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: #14181a; }
.gzh-coursepage.gzh-pd-2 #tab-description p { color: #3a3d42; line-height: 1.7; }

@media (max-width: 920px) {
	.gzh-coursepage.gzh-pd-2 .summary.entry-summary { margin-top: 22px; }
}
@media (max-width: 560px) {
	.gzh-coursepage.gzh-pd-2 div.product { padding: 22px 0 0; }  /* bottom stays 0 — see the desktop rule */
	.gzh-coursepage.gzh-pd-2 .summary.entry-summary { padding: 20px 18px 22px; border-radius: 12px; }
	.gzh-coursepage.gzh-pd-2 .woocommerce-tabs ul.tabs.wc-tabs li a { padding: 13px 12px !important; font-size: 14px; }
}