/* ========================================================================= Ollie Course — M2 · Single course page (WooCommerce single product) Pairs with woocommerce/content-single-product.php in this child theme. Scope: everything below is prefixed with .ollie-course so nothing here can reach the course grid, the shop archive or any other page. ========================================================================= */ /* ------------------------------------------------------------------------- Make position:sticky possible on this page at all. The parent theme sets `html, body { overflow-x: hidden }` (main.css L906) to swallow the header mega-menu, which sticks out past the viewport. The side effect is that becomes a scroll container that never scrolls — is what actually scrolls — so every `position: sticky` inside it silently behaves like `position: static`. That is why the purchase card used to scroll away instead of following the reader. `overflow-x: clip` clips exactly the same way but does *not* create a scroll container, so sticky works and the mega-menu still cannot widen the page. Browsers without `clip` support simply ignore the declaration and keep the theme's `hidden` — the card is then non-sticky, which is the old behaviour. Scoped to the product page so nothing else on the site changes. ------------------------------------------------------------------------- */ body.single-product { overflow-x: clip; overflow-y: visible; } .ollie-course { --ollie-accent: #23bdb8; --ollie-ink: #182748; --ollie-muted: #6f7484; --ollie-line: #e5e8f0; --ollie-card: #ffffff; --ollie-soft: #f5f7fb; } /* ------------------------------------------------------------------------- Layout — content column + purchase sidebar. The parent theme sets display:flex on .edublink-single-product-main-content-wrapper; grid overrides it. ------------------------------------------------------------------------- */ .woocommerce div.product .ollie-course__layout, .ollie-course__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 48px; margin-bottom: 80px; } .ollie-course__main { min-width: 0; } /* ------------------------------------------------------------------------- Media ------------------------------------------------------------------------- */ .ollie-course__media { margin-bottom: 32px; max-width: 420px; } /* WooCommerce floats the gallery via `.woocommerce #content div.product div.images` — an ID selector — so the override has to carry #content too. */ .woocommerce #content div.product .ollie-course__media div.images, .woocommerce-page #content div.product .ollie-course__media div.images, .woocommerce div.product .ollie-course__media div.images { float: none; width: 100%; max-width: 100%; margin: 0; } .ollie-course__media img { border-radius: 12px; max-width: 100%; height: auto; } /* ------------------------------------------------------------------------- Fact chips under the page title ------------------------------------------------------------------------- */ .ollie-course__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; } .ollie-course__chips li { background: var(--ollie-soft); border: 1px solid var(--ollie-line); border-radius: 999px; color: var(--ollie-ink); font-size: 14px; line-height: 1.2; padding: 7px 14px; } .ollie-course__chips li:first-child { background: var(--ollie-accent); border-color: var(--ollie-accent); color: #fff; } /* * The level chip is the same badge as on the course cards: the template gives * it `.ollie-level.ollie-level--` and the look (pill, palette, * fit-content width) comes from section 8 of m2-course-grid.css, which is * enqueued site-wide. Only what differs inside a chip row is set here — chip * padding, so the level lines up with its neighbours, and the :first-child * guard: a course whose only chip is the level must still read as a level * badge, not as the accent-filled category chip. */ .ollie-course__chips li.ollie-level, .ollie-course__chips li.ollie-level:first-child { /* The badge carries `align-self: flex-start` for the card layout; inside the chip row it has to stretch like every other chip, otherwise it sits 3px shorter than its neighbours. */ align-self: stretch; background: var(--ollie-level-bg); border-color: var(--ollie-level-line); color: var(--ollie-level-ink); font-size: 13px; font-weight: 600; /* * `.ollie-course__chips li` (the generic chip rule above) sets * `line-height: 1.2` at 2-specificity (ul-class + li), which would * otherwise beat `.ollie-level`'s own `line-height: 1` (1-specificity) * and bring back the optical top/bottom mismatch documented in * m2-course-grid.css section 8. Restate it here, at the chip's own * higher specificity, so the badge's tight, evenly-split line box wins. * Centring itself still comes from `align-self: stretch` (this chip * takes the row's full height) plus the base rule's * `align-items: center` (which re-centres the text inside whatever * height that stretch produces) — so this stays correct at any chip * row height. */ line-height: 1; padding: 6px 14px; } /* ------------------------------------------------------------------------- Star rating under the title. It is a