/* ============================================================
COE Store — Master Stylesheet v2.1.4
Divi Child Theme · WooCommerce · MooWoodle
============================================================ */
/* ── CSS Variables ───────────────────────────────────────── */
:root {
/* ── COE brand palette (item 11) ────────────────────────
Plum #542F5A · Navy #0d3349 · Green #1e7a6e
Slate #f7f5f0 · Muted Sand #E6D8A8 */
--coe-plum: #542F5A;
--coe-plum-dk: #422548;
--coe-plum-lt: #efe6f1;
--coe-navy-brand:#0d3349;
--coe-green: #1e7a6e;
--coe-green-dk: #185f56;
--coe-green-lt: #e4f2ef;
--coe-slate: #f7f5f0;
--coe-sand: #E6D8A8;
--coe-sand-lt: #f5eecf;
/* ── Semantic mappings (names kept so existing rules recolor) ──
Primary accent is now GREEN; navy is the deep brand color. */
--coe-teal: #1e7a6e; /* → brand green (primary accent) */
--coe-teal-dk: #185f56; /* → green dark (hover) */
--coe-teal-lt: #e0efe9; /* → green tint (warmer) */
--coe-teal-ltr: #eef4ef; /* → green faint (slate-leaning) */
--coe-navy: #0d3349; /* → brand navy (headers, primary) */
--coe-navy-hover:#123f5a;
--coe-purple: #542F5A; /* → brand plum */
--coe-purple-lt: #efe6f1; /* → plum tint */
--coe-bg: #f7f5f0; /* → slate page background */
--coe-surface: #ffffff;
--coe-border: #e4ddd0; /* warm border to match slate/sand */
--coe-border-md: #d4c9b3;
--coe-text: #23202b;
--coe-muted: #6b6559; /* warm muted (on slate) */
--coe-hint: #9a9385;
--coe-success: #1e7a6e;
--coe-shadow: 0 1px 4px rgba(13,51,73,0.06);
--coe-shadow-md: 0 4px 16px rgba(13,51,73,0.10);
/* ── Course-type accents (item 7) ──────────────────────
In-Person = Green · eLearning = Navy · Printed = Plum */
--coe-type-inperson: #1e7a6e;
--coe-type-online: #0d3349;
--coe-type-printed: #542F5A;
/* ── Typography (item 2) ───────────────────────────────── */
--coe-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--coe-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ── Page backgrounds ────────────────────────────────────── */
body.woocommerce,
body.post-type-archive-product,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-order-received,
body.woocommerce-account,
body.tax-product_cat,
body.single-product { background: var(--coe-bg) !important; }
/* Ensure the inner content columns are transparent so the slate
page background shows through consistently (item 4). */
body.woocommerce #main-content,
body.woocommerce-cart #main-content,
body.woocommerce-checkout #main-content,
body.woocommerce-account #main-content,
body.post-type-archive-product #main-content,
body.tax-product_cat #main-content,
body.single-product #main-content,
body.woocommerce #content-area,
body.woocommerce #left-area {
background: transparent !important;
}
/* ── 1. SIDEBAR POSITION ─────────────────────────────────────
Use Divi's native RIGHT sidebar with NO overrides at all.
Any width/float/order change here breaks Divi's column math
and drops the sidebar below the products. Leave it alone —
Divi already positions #sidebar correctly on the right.
─────────────────────────────────────────────────────────── */
/* (intentionally empty — no positioning overrides) */
/* Filter tabs sit at the top of the sidebar; add spacing below */
#sidebar .coe-filter-tab {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* ── 2. FILTER TABS ──────────────────────────────────────────
Output by coe_filter_tabs() PHP function above the grid.
─────────────────────────────────────────────────────────── */
.coe-filter-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.coe-filter-tab {
padding: 7px 18px;
border-radius: 8px;
background: var(--coe-teal-ltr);
color: var(--coe-teal);
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
border: 1.5px solid var(--coe-teal-lt);
transition: all 0.15s;
white-space: nowrap;
}
.coe-filter-tab:hover {
background: var(--coe-teal-lt);
color: var(--coe-teal) !important;
}
.coe-filter-tab--active {
background: var(--coe-teal) !important;
color: #fff !important;
border-color: var(--coe-teal) !important;
}
/* ═══════════════════════════════════════════════════════════
SIDEBAR SCOPING — category nav only on shop / archives
─────────────────────────────────────────────────────────
Divi outputs #sidebar on every WooCommerce page (cart,
checkout, account included). The category navigation widget
only makes sense on the shop & category/tag archives, so we
hide that specific widget elsewhere. Cart/checkout keep their
own native sidebar content (order summary, etc.) untouched.
═══════════════════════════════════════════════════════════ */
body.woocommerce-cart #sidebar .widget_block,
body.woocommerce-checkout #sidebar .widget_block,
body.woocommerce-account #sidebar .widget_block,
body.woocommerce-cart #sidebar .et_pb_widget.widget_nav_menu,
body.woocommerce-checkout #sidebar .et_pb_widget.widget_nav_menu,
body.woocommerce-account #sidebar .et_pb_widget.widget_nav_menu {
display: none !important;
}
/* On cart/checkout, also drop the whole sidebar column so the
form/summary use full width (Divi summary is in #left-area). */
body.woocommerce-cart #sidebar,
body.woocommerce-checkout #sidebar {
display: none !important;
}
body.woocommerce-cart #left-area,
body.woocommerce-checkout #left-area {
width: 100% !important;
flex: 1 1 100% !important;
}
/* ═══════════════════════════════════════════════════════════
3. SIDEBAR — CATEGORY NAV (v5.1)
Site-matched navy/teal palette, count fixed inline,
row layout keeps count beside title, refined mobile.
═══════════════════════════════════════════════════════════ */
/* Widget card — subtle navy-tinted surface to match site */
#sidebar .et_pb_widget,
#sidebar .widget {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: var(--coe-shadow) !important;
margin-bottom: 14px !important;
padding: 12px !important;
list-style: none !important;
}
#sidebar .widget_block .wp-block-heading,
#sidebar .et_pb_widget > h2,
#sidebar .et_pb_widget > h3 { display: none !important; }
#sidebar .wp-block-woocommerce-product-categories { margin: 0 !important; padding: 0 !important; }
/* Top-level list */
#sidebar .wc-block-product-categories-list--depth-0,
#sidebar ul.wc-block-product-categories-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
list-style: none !important;
margin: 0 !important;
}
/* ── Row wrapper: link (with count) + caret ───────────────── */
#sidebar .coe-cat-row {
display: flex !important;
align-items: stretch !important;
gap: 6px !important;
width: 100% !important;
}
#sidebar .coe-cat-row > a {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* keep label on as few lines as possible now that sidebar is wider */
#sidebar .wc-block-product-categories-list-item-name,
#sidebar .wc-block-product-categories-list-item__name {
flex: 1 1 auto !important;
min-width: 0 !important;
line-height: 1.3 !important;
}
/* ── Top-level link = button pill (navy palette) ──────────── */
#sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a,
#sidebar .coe-cat-row > a,
#sidebar .coe-all-courses > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 11px 14px !important;
background: #ffffff !important;
color: var(--coe-navy) !important;
border: 1.5px solid var(--coe-border) !important;
border-radius: 9px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
line-height: 1.3 !important;
text-align: left !important;
transition: all 0.15s !important;
}
#sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a:hover,
#sidebar .coe-cat-row > a:hover,
#sidebar .coe-all-courses > a:hover {
background: var(--coe-teal-ltr) !important;
border-color: var(--coe-teal-lt) !important;
color: var(--coe-teal) !important;
}
/* Category name span */
#sidebar .wc-block-product-categories-list-item-name,
#sidebar .wc-block-product-categories-list-item__name {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* ── COUNT SPAN — fix the doubled "3 / 3 products" ─────────
WooCommerce block renders:
::before "(" (hidden)
3 ← keep this
3 products ← hide
::after ")" (hidden)
We hide the parens + screen-reader text, show only the number. */
#sidebar .wc-block-product-categories-list-item-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 22px !important;
height: 20px !important;
padding: 0 7px !important;
margin: 0 0 0 8px !important;
background: rgba(30,122,110,0.12) !important;
color: var(--coe-teal) !important;
border-radius: 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1 !important;
flex-shrink: 0 !important;
float: none !important;
position: static !important;
}
/* Hide the parenthesis pseudo-elements */
#sidebar .wc-block-product-categories-list-item-count::before,
#sidebar .wc-block-product-categories-list-item-count::after {
display: none !important;
content: "" !important;
}
/* Hide the screen-reader duplicate ("3 products") visually */
#sidebar .wc-block-product-categories-list-item-count .screen-reader-text {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important;
white-space: nowrap !important; border: 0 !important;
}
/* Show only the aria-hidden number cleanly */
#sidebar .wc-block-product-categories-list-item-count [aria-hidden="true"] {
display: inline !important;
}
/* ── Active state: the currently-viewed category turns teal ──
Applies to View All (.coe-cat-active) and to whichever category
WooCommerce marks active (.is-active / .current-cat). All buttons
can enter this state, so the user always sees where they are. */
#sidebar .coe-all-courses.coe-cat-active > a,
#sidebar .wc-block-product-categories-list-item.is-active > a,
#sidebar .wc-block-product-categories-list-item.current-cat > a,
#sidebar .coe-cat-row > a.is-active,
#sidebar li.is-active > .coe-cat-row > a,
#sidebar li.current-cat > .coe-cat-row > a {
background: var(--coe-teal) !important;
color: #fff !important;
border-color: var(--coe-teal) !important;
font-weight: 700 !important;
}
#sidebar .coe-all-courses.coe-cat-active > a:hover,
#sidebar .wc-block-product-categories-list-item.is-active > a:hover,
#sidebar .wc-block-product-categories-list-item.current-cat > a:hover,
#sidebar li.is-active > .coe-cat-row > a:hover,
#sidebar li.current-cat > .coe-cat-row > a:hover {
background: var(--coe-teal-dk) !important;
color: #fff !important;
border-color: var(--coe-teal-dk) !important;
}
/* Active count pill: white-on-translucent so it shows on the teal button */
#sidebar .coe-all-courses.coe-cat-active > a .wc-block-product-categories-list-item-count,
#sidebar .is-active > a .wc-block-product-categories-list-item-count,
#sidebar .current-cat > a .wc-block-product-categories-list-item-count,
#sidebar li.is-active > .coe-cat-row > a .wc-block-product-categories-list-item-count,
#sidebar li.current-cat > .coe-cat-row > a .wc-block-product-categories-list-item-count {
background: rgba(255,255,255,0.9) !important;
color: var(--coe-navy) !important;
}
/* Inactive count pill: teal-on-tinted (default for non-active buttons).
Must also exclude .coe-cat-active so it doesn't override View All's
white pill when View All is the active item. */
#sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item:not(.is-active):not(.current-cat):not(.coe-cat-active) > a .wc-block-product-categories-list-item-count,
#sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item:not(.is-active):not(.current-cat):not(.coe-cat-active) > .coe-cat-row > a .wc-block-product-categories-list-item-count,
#sidebar .coe-all-courses:not(.coe-cat-active) > a .wc-block-product-categories-list-item-count {
background: rgba(30,122,110,0.12) !important;
color: var(--coe-teal) !important;
}
/* Active View All pill — solid white pill with dark number so it stays
visible on the teal button (white-on-white was disappearing). */
#sidebar .coe-all-courses.coe-cat-active > a .wc-block-product-categories-list-item-count,
#sidebar .wc-block-product-categories-list--depth-0 > .coe-all-courses.coe-cat-active > a .wc-block-product-categories-list-item-count {
background: rgba(255,255,255,0.9) !important;
color: var(--coe-navy) !important;
}
/* ── Caret button (sibling of link) ───────────────────────── */
#sidebar .coe-cat-caret {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
align-self: stretch !important;
flex-shrink: 0 !important;
padding: 0 !important;
background: #fff !important;
border: 1.5px solid var(--coe-border) !important;
border-radius: 9px !important;
cursor: pointer !important;
transition: all 0.15s !important;
}
#sidebar .coe-cat-caret:hover { background: var(--coe-teal-ltr) !important; border-color: var(--coe-teal-lt) !important; }
#sidebar .coe-cat-caret .coe-caret-icon {
font-size: 18px !important;
line-height: 1 !important;
color: var(--coe-teal) !important;
transform: rotate(90deg) !important;
transition: transform 0.2s ease !important;
}
#sidebar .coe-has-children.coe-open .coe-cat-caret .coe-caret-icon { transform: rotate(-90deg) !important; }
/* ── Child list ───────────────────────────────────────────── */
#sidebar .wc-block-product-categories-list--depth-1 {
list-style: none !important;
margin: 0 0 0 12px !important;
padding: 0 !important;
border-left: 2px solid var(--coe-teal-lt) !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease !important;
}
#sidebar .coe-has-children.coe-open > .wc-block-product-categories-list--depth-1 {
max-height: 600px !important;
opacity: 1 !important;
margin: 8px 0 4px 12px !important;
}
#sidebar .wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item { list-style: none !important; margin: 0 !important; }
#sidebar .wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
padding: 8px 12px !important;
margin: 2px 0 !important;
background: transparent !important;
border: none !important;
border-radius: 7px !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--coe-muted) !important;
text-align: left !important;
text-decoration: none !important;
line-height: 1.35 !important;
transition: all 0.12s !important;
}
#sidebar .wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item > a:hover { background: var(--coe-teal-ltr) !important; color: var(--coe-teal) !important; }
#sidebar .wc-block-product-categories-list--depth-1 .is-active > a,
#sidebar .wc-block-product-categories-list--depth-1 .current-cat > a { background: var(--coe-teal-ltr) !important; color: var(--coe-teal) !important; font-weight: 700 !important; }
#sidebar .wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item-count {
min-width: 20px !important; height: 18px !important; padding: 0 6px !important;
background: var(--coe-bg) !important; color: var(--coe-muted) !important;
border-radius: 9px !important; font-size: 10.5px !important; margin-left: auto !important;
}
/* ── My Account / Login + Cart buttons (navy palette) ─────── */
#sidebar a[href*="my-account"],
#sidebar .widget_nav_menu li a {
display: flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; padding: 11px 16px !important;
background: var(--coe-navy) !important; color: #fff !important;
border: 1.5px solid var(--coe-navy) !important; border-radius: 10px !important;
font-size: 14px !important; font-weight: 700 !important;
text-decoration: none !important; box-sizing: border-box !important; transition: all 0.15s !important;
}
#sidebar .widget_nav_menu ul, #sidebar .widget_nav_menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#sidebar a[href*="my-account"]:hover, #sidebar .widget_nav_menu li a:hover { background: #16315e !important; color:#fff !important; }
#sidebar .cart-contents, #sidebar a.cart-contents {
display: flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; padding: 11px 16px !important;
background: #fff !important; color: var(--coe-navy) !important;
border: 1px solid var(--coe-border) !important; border-radius: 10px !important;
font-size: 14px !important; font-weight: 600 !important;
text-decoration: none !important; box-sizing: border-box !important;
}
#sidebar .cart-contents:hover { background: var(--coe-teal-ltr) !important; color: var(--coe-teal) !important; }
/* ═══════════════════════════════════════════════════════════
3c. LAYOUT — DESKTOP (≥ 981px) [applies site-wide on
any page with a Divi right sidebar: shop, category, tag,
AND My Account / My Courses]
─────────────────────────────────────────────────────────
Divi structure: #main-content .container > #content-area
> #left-area + #sidebar
We flex #content-area, widen the sidebar, and KILL Divi's
vertical divider line (the .container::before with right:%).
═══════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
/* Kill Divi's vertical divider pseudo-element.
Scoped to the container that wraps #content-area ONLY, so the
header's own .container is never touched. */
#main-content > .container:before,
#et-main-area #main-content .container:has(#content-area):before {
display: none !important;
content: none !important;
border: none !important;
width: 0 !important;
}
/* Flex the content row */
body.et_right_sidebar #content-area.clearfix,
body.woocommerce #content-area.clearfix,
body.woocommerce-account #content-area.clearfix,
body.post-type-archive-product #content-area.clearfix,
body.tax-product_cat #content-area.clearfix,
body.tax-product_tag #content-area.clearfix {
display: flex !important;
align-items: flex-start !important;
gap: 32px !important;
}
/* Content area takes remaining width */
body.et_right_sidebar #left-area,
body.woocommerce #left-area,
body.woocommerce-account #left-area,
body.post-type-archive-product #left-area,
body.tax-product_cat #left-area,
body.tax-product_tag #left-area {
width: auto !important;
flex: 1 1 auto !important;
float: none !important;
padding-right: 0 !important;
min-width: 0 !important;
}
/* Sidebar: fixed 300px, no float, divider gone */
body.et_right_sidebar #sidebar,
body.woocommerce #sidebar,
body.woocommerce-account #sidebar,
body.post-type-archive-product #sidebar,
body.tax-product_cat #sidebar,
body.tax-product_tag #sidebar {
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
flex: 0 0 300px !important;
float: none !important;
padding-left: 0 !important;
}
/* Align sidebar's first card with the TOP of the product cards.
The left column stacks: breadcrumb + "COE Store" title + result
count + the sorting toolbar before the grid begins. We offset the
sidebar down by that combined height so the first sidebar card and
the first product card share a top edge. */
body.post-type-archive-product #sidebar,
body.tax-product_cat #sidebar,
body.tax-product_tag #sidebar {
margin-top: 150px !important;
}
/* Keep the toolbar (sorting) from adding extra space above the grid */
body.post-type-archive-product #left-area .woocommerce-result-count,
body.post-type-archive-product #left-area .woocommerce-ordering {
margin-bottom: 14px !important;
}
}
/* ═══════════════════════════════════════════════════════════
3d. LAYOUT — MOBILE / TABLET (≤ 980px)
─────────────────────────────────────────────────────────
The real flex parent is .container (Divi adds `flex` there
via #content-area). We must flip order on #content-area AND
ensure .container doesn't re-impose float. Sidebar goes on
top; categories become a horizontal chip row.
═══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 980px) {
/* Kill divider on mobile too */
#main-content > .container:before { display: none !important; content: none !important; }
/* Make #content-area the column flex parent */
body #main-content #content-area,
body.archive #main-content #content-area,
body.woocommerce #main-content #content-area,
body.woocommerce-account #main-content #content-area,
body.post-type-archive-product #main-content #content-area,
body.tax-product_cat #main-content #content-area,
body.tax-product_tag #main-content #content-area {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* Sidebar FIRST (above products) */
body #main-content #content-area > #sidebar,
body.archive #main-content #content-area > #sidebar,
body.woocommerce #main-content #content-area > #sidebar,
body.post-type-archive-product #main-content #content-area > #sidebar,
body.tax-product_cat #main-content #content-area > #sidebar,
body.tax-product_tag #main-content #content-area > #sidebar {
order: -1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
}
/* Products SECOND */
body #main-content #content-area > #left-area,
body.archive #main-content #content-area > #left-area,
body.woocommerce #main-content #content-area > #left-area,
body.post-type-archive-product #main-content #content-area > #left-area,
body.tax-product_cat #main-content #content-area > #left-area,
body.tax-product_tag #main-content #content-area > #left-area {
order: 1 !important;
width: 100% !important;
float: none !important;
padding: 0 !important;
}
/* ── Category widget → COMPACT HORIZONTAL SCROLL ROW ──────
High specificity (#main-content #sidebar) to beat Divi. */
body #main-content #sidebar .et_pb_widget.widget_block,
body #main-content #sidebar .widget_block {
padding: 8px !important;
}
/* The category UL becomes a single nowrap scrolling track */
body #main-content #sidebar .wc-block-product-categories-list--depth-0 {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
overflow-x: auto !important;
overflow-y: visible !important;
gap: 8px !important;
padding: 2px 2px 10px !important;
margin: 0 !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
scroll-snap-type: x proximity !important;
}
/* Each item is a fixed-content chip that won't shrink */
body #main-content #sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
flex: 0 0 auto !important;
width: auto !important;
scroll-snap-align: start !important;
}
/* Caret row sits inline with the chip */
body #main-content #sidebar .coe-cat-row {
flex: 0 0 auto !important;
width: auto !important;
align-items: center !important;
}
/* Chip buttons: compact, single-line */
body #main-content #sidebar .coe-cat-row > a,
body #main-content #sidebar .coe-all-courses > a,
body #main-content #sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a {
white-space: nowrap !important;
padding: 8px 14px !important;
font-size: 13px !important;
border-radius: 999px !important; /* pill chips */
}
/* Slimmer caret button in the chip row */
body #main-content #sidebar .coe-cat-caret {
width: 30px !important;
border-radius: 999px !important;
}
/* Count pill stays inline, tighter */
body #main-content #sidebar .wc-block-product-categories-list-item-count {
margin-left: 6px !important;
}
/* Dropdown children on mobile: the open parent chip grows to
full width and stacks its children vertically beneath it,
so they're never clipped by the horizontal scroll track. */
body #main-content #sidebar .coe-has-children.coe-open {
flex: 1 1 100% !important;
width: 100% !important;
order: 99 !important; /* push the open one to end of row, full width */
}
body #main-content #sidebar .coe-has-children.coe-open > .wc-block-product-categories-list--depth-1 {
position: static !important;
max-height: none !important;
opacity: 1 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 8px 0 2px !important;
padding: 8px !important;
border: 1px solid var(--coe-teal-lt) !important;
border-radius: 10px !important;
background: var(--coe-teal-ltr) !important;
}
body #main-content #sidebar .wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item {
flex: 0 0 auto !important;
}
body #main-content #sidebar .wc-block-product-categories-list--depth-1 > .wc-block-product-categories-list-item > a {
white-space: nowrap !important;
background: #fff !important;
border: 1px solid var(--coe-border) !important;
border-radius: 999px !important;
padding: 6px 12px !important;
}
}
@media only screen and (max-width: 480px) {
#sidebar .coe-cat-row > a,
#sidebar .coe-all-courses > a { font-size: 12.5px !important; padding: 8px 12px !important; }
}
/* ── 4. PRODUCT GRID ─────────────────────────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products { margin: 0 !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
box-shadow: var(--coe-shadow) !important;
margin-bottom: 20px !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
transform: translateY(-2px) !important;
box-shadow: var(--coe-shadow-md) !important;
border-color: var(--coe-border-md) !important;
}
.woocommerce ul.products li.product a img {
aspect-ratio: 3 / 2 !important;
object-fit: cover !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2 {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--coe-text) !important;
padding: 14px 15px 4px !important;
margin: 0 !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 2.7em !important;
}
.woocommerce ul.products li.product .price {
padding: 4px 15px 8px !important;
font-size: 18px !important;
font-weight: 800 !important;
color: var(--coe-navy) !important;
margin: 0 !important;
}
.coe-loop-meta { display: flex; gap: 6px; padding: 0 15px 10px; flex-wrap: wrap; }
.coe-meta-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.coe-chip-dur { background: var(--coe-bg); color: var(--coe-muted); }
.coe-chip-ceu { background: var(--coe-teal-ltr); color: var(--coe-teal); }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
background: var(--coe-teal) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 9px 16px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
margin: auto 15px 15px !important;
width: calc(100% - 30px) !important;
display: block !important;
text-align: center !important;
transition: background 0.15s !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--coe-teal-dk) !important; }
/* Type badge via product tag class */
li.product.product_tag-online-course a.woocommerce-loop-product__link,
li.product.product_tag-in-person a.woocommerce-loop-product__link { position: relative; display: block; }
li.product.product_tag-online-course a.woocommerce-loop-product__link::before {
content: "Online"; position: absolute; top: 11px; left: 11px; z-index: 2;
background: var(--coe-type-online); color: #fff; font-size: 10px; font-weight: 700;
text-transform: uppercase; padding: 3px 10px; border-radius: 20px; pointer-events: none;
}
li.product.product_tag-in-person a.woocommerce-loop-product__link::before {
content: "In Person"; position: absolute; top: 11px; left: 11px; z-index: 2;
background: var(--coe-type-inperson); color: #fff; font-size: 10px; font-weight: 700;
text-transform: uppercase; padding: 3px 10px; border-radius: 20px; pointer-events: none;
}
/* ── 5. SINGLE PRODUCT PAGE ─────────────────────────────── */
.woocommerce div.product .woocommerce-tabs .reviews_tab { display: none !important; }
.woocommerce div.product .sku_wrapper { font-size: 12px; color: var(--coe-muted); }
.woocommerce div.product div.images { margin-bottom: 0 !important; }
.woocommerce div.product .product_title {
font-size: 26px !important; font-weight: 800 !important;
color: var(--coe-navy) !important; line-height: 1.25 !important; margin-bottom: 8px !important;
}
.woocommerce div.product p.price { font-size: 26px !important; font-weight: 800 !important; color: var(--coe-navy) !important; }
.woocommerce div.product form.cart .single_add_to_cart_button {
background: var(--coe-teal) !important; border-color: var(--coe-teal) !important;
color: #fff !important; border-radius: 10px !important;
font-weight: 700 !important; font-size: 15px !important; padding: 14px 28px !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--coe-teal-dk) !important; }
.coe-ceu-badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--coe-teal-ltr); color: var(--coe-teal);
border: 1px solid var(--coe-teal-lt); border-radius: 8px;
padding: 6px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
/* ── 6. CHECKOUT ─────────────────────────────────────────── */
#place_order {
background: var(--coe-teal) !important; border-color: var(--coe-teal) !important;
color: #fff !important; border-radius: 10px !important;
font-size: 16px !important; font-weight: 800 !important;
padding: 15px 28px !important; width: 100% !important;
box-shadow: 0 4px 14px rgba(30,122,110,0.28) !important;
}
#place_order:hover { background: var(--coe-teal-dk) !important; }
/* ── 7. ORDER RECEIVED ───────────────────────────────────── */
.woocommerce-order-details .product-name a,
.woocommerce-table--order-details .product-name a {
background: transparent !important; background-color: transparent !important;
color: var(--coe-teal) !important; padding: 0 !important;
}
.coe-order-next-steps {
background: var(--coe-surface); border: 1px solid var(--coe-border);
border-left: 5px solid var(--coe-navy, #0d3349) !important; /* colored tab, matches refund block */
border-radius: 12px; padding: 20px 24px; margin: 20px 0; box-shadow: var(--coe-shadow);
}
.coe-order-next-steps h3 { font-family: var(--coe-font-display) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--coe-navy) !important; margin: 0 0 14px !important; border: none !important; padding: 0 !important; }
.coe-next-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--coe-text); line-height: 1.6; }
.coe-next-step:last-child { margin-bottom: 0; }
.coe-step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
/* Order-received CTA row: two buttons side by side */
.coe-order-cta-row {
display: flex !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin: 20px 0 24px !important;
}
.coe-my-courses-cta {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; background: var(--coe-navy) !important; color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
text-decoration: none !important; border-radius: 10px !important;
padding: 12px 24px !important; font-size: 14px !important; font-weight: 700 !important;
margin: 0 !important; box-sizing: border-box !important; transition: all 0.15s !important;
flex: 0 0 auto !important;
}
.coe-my-courses-cta:hover { background: #16315e !important; color: #fff !important; }
/* user icon to match the sidebar My Courses button */
.coe-my-courses-cta::before {
content: "" !important;
width: 16px !important; height: 16px !important; flex-shrink: 0 !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.coe-continue-shopping {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; background: #fff !important; color: var(--coe-navy) !important;
border: 1.5px solid var(--coe-navy) !important;
text-decoration: none !important; border-radius: 10px !important;
padding: 12px 24px !important; font-size: 14px !important; font-weight: 700 !important;
margin: 0 !important; box-sizing: border-box !important; transition: all 0.15s !important;
flex: 0 0 auto !important;
}
.coe-continue-shopping::before {
content: "" !important;
width: 15px !important; height: 15px !important; flex-shrink: 0 !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.coe-continue-shopping:hover { background: var(--coe-teal-ltr) !important; color: var(--coe-teal) !important; border-color: var(--coe-teal) !important; }
/* View Orders button — teal, third action */
.coe-view-orders-cta {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; background: var(--coe-teal) !important; color: #fff !important;
border: 1.5px solid var(--coe-teal) !important;
text-decoration: none !important; border-radius: 10px !important;
padding: 12px 24px !important; font-size: 14px !important; font-weight: 700 !important;
margin: 0 !important; box-sizing: border-box !important; transition: all 0.15s !important;
flex: 0 0 auto !important;
}
.coe-view-orders-cta::before {
content: "" !important;
width: 15px !important; height: 15px !important; flex-shrink: 0 !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.coe-view-orders-cta:hover { background: var(--coe-teal-dk) !important; color: #fff !important; border-color: var(--coe-teal-dk) !important; }
/* Non-course item notice section */
.coe-order-noncourse {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-left: 4px solid #3b82f6 !important;
border-radius: 12px !important;
padding: 18px 20px !important;
margin: 0 0 20px !important;
box-shadow: var(--coe-shadow) !important;
}
.coe-order-noncourse .coe-step-icon {
flex-shrink: 0 !important;
width: 40px !important; height: 40px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
border-radius: 50% !important; font-size: 18px !important;
}
.coe-noncourse-text {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--coe-text, #1a1a2e) !important;
}
.coe-noncourse-text strong { color: var(--coe-navy) !important; }
@media (max-width: 600px) {
.coe-order-cta-row { flex-direction: column !important; }
.coe-my-courses-cta, .coe-continue-shopping, .coe-view-orders-cta { width: 100% !important; }
}
/* ── 8. MY ACCOUNT ───────────────────────────────────────── */
body.woocommerce-account { background: var(--coe-bg) !important; }
.woocommerce-MyAccount-navigation {
background: var(--coe-surface) !important; border: 1px solid var(--coe-border) !important;
border-radius: 12px !important; overflow: hidden !important; box-shadow: var(--coe-shadow) !important;
}
.woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--coe-border) !important; }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none !important; }
.woocommerce-MyAccount-navigation ul li a {
display: flex !important; align-items: center !important;
padding: 12px 18px !important; font-size: 13.5px !important; font-weight: 500 !important;
color: var(--coe-text) !important; text-decoration: none !important;
border-left: 3px solid transparent !important; transition: background 0.12s, color 0.12s !important;
}
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--coe-teal-ltr) !important; color: var(--coe-teal) !important; }
.woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--coe-teal-lt) !important; color: var(--coe-teal) !important;
font-weight: 700 !important; border-left-color: var(--coe-teal) !important;
}
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--customer-logout a { color: #ef4444 !important; }
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fee2e2 !important; color: #dc2626 !important; }
.woocommerce-MyAccount-content {
background: var(--coe-surface) !important; border: 1px solid var(--coe-border) !important;
border-radius: 12px !important; padding: 24px !important; box-shadow: var(--coe-shadow) !important;
}
/* My Courses table */
.woocommerce-account table { width: 100% !important; border-collapse: collapse !important; border: 1px solid var(--coe-border) !important; border-radius: 10px !important; overflow: hidden !important; }
.woocommerce-account table thead tr { background: var(--coe-bg) !important; }
.woocommerce-account table thead tr th { font-size: 11px !important; font-weight: 700 !important; color: var(--coe-muted) !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; padding: 11px 18px !important; border-bottom: 1px solid var(--coe-border) !important; text-align: left !important; }
.woocommerce-account table tbody tr { border-bottom: 1px solid var(--coe-border) !important; }
.woocommerce-account table tbody tr:last-child { border-bottom: none !important; }
.woocommerce-account table tbody tr:hover { background: var(--coe-teal-ltr) !important; }
.woocommerce-account table tbody tr td { padding: 14px 18px !important; font-size: 13.5px !important; color: var(--coe-text) !important; vertical-align: middle !important; }
.woocommerce-account table .button { background: var(--coe-teal) !important; color: #fff !important; border: none !important; border-radius: 7px !important; padding: 7px 16px !important; font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none !important; display: inline-block !important; }
.woocommerce-account table .button:hover { background: var(--coe-teal-dk) !important; color: #fff !important; }
/* ── Hide Category / Tag meta on single product page ─────── */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════
CHECKOUT — Block-based (wp-block-woocommerce-checkout) v5.7
Targets the REAL block classes confirmed via DevTools.
Goal: make the "Log in" prompt a clear button, and frame the
contact step so logged-out users see two obvious paths.
═══════════════════════════════════════════════════════════ */
/* 0. Undo the broken leftover styling on the login prompt
(the 12px border / radius / bg from an earlier attempt). */
.wp-block-woocommerce-checkout .wc-block-checkout__login-prompt {
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 14px !important;
margin: 0 !important;
float: none !important;
color: inherit !important;
}
/* 1. Turn the contact step heading row into a clean banner.
The heading-container holds the title + the login prompt. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding: 16px 18px !important;
background: var(--coe-teal-ltr) !important;
border: 1px solid var(--coe-teal-lt) !important;
border-radius: 12px !important;
margin-bottom: 10px !important;
}
/* 2. The title ("Fill Contact Information Below") */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--coe-navy) !important;
margin: 0 !important;
}
/* 3. The heading-content wrapper holds the login link */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content {
margin: 0 !important;
flex-shrink: 0 !important;
}
/* 4. Style the actual "Log in" link as a navy button */
.wp-block-woocommerce-checkout a.wc-block-checkout__login-prompt {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 18px !important;
background: var(--coe-navy) !important;
color: #fff !important;
border-radius: 9px !important;
font-size: 13.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background 0.15s !important;
}
/* Clean inline SVG user icon (accessible, matches button text color) */
.wp-block-woocommerce-checkout a.wc-block-checkout__login-prompt::before {
content: "" !important;
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.wp-block-woocommerce-checkout a.wc-block-checkout__login-prompt:hover {
background: #16315e !important;
color: #fff !important;
}
/* 5. "For New Accounts Only" → clearer sub-label under the banner */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
display: inline-block !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--coe-teal) !important;
background: var(--coe-teal-ltr) !important;
border: 1px solid var(--coe-teal-lt) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
margin: 6px 2px 16px !important;
letter-spacing: 0.2px !important;
}
/* Hide "For New Accounts Only" when the user is logged in.
PHP adds body.logged-in; the contact step also won't show the
create-account fields, so the label is redundant then. */
body.logged-in .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
display: none !important;
}
/* 6. Tidy the email/password inputs in the contact step */
.wp-block-woocommerce-checkout .wc-block-components-text-input input {
border-radius: 8px !important;
}
/* 7. The order-summary sidebar card (right column of the block) */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
border-radius: 12px !important;
}
/* 8. Place Order button in block checkout → teal */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
background: var(--coe-teal) !important;
border-radius: 10px !important;
font-weight: 800 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
background: var(--coe-teal-dk) !important;
}
/* 9. Responsive: stack heading banner on small screens */
@media (max-width: 600px) {
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
flex-direction: column !important;
align-items: stretch !important;
text-align: left !important;
}
.wp-block-woocommerce-checkout a.wc-block-checkout__login-prompt {
justify-content: center !important;
}
}
/* ── Gift Someone fields: hidden until checkbox ticked ──────
Block checkout renders these MooWoodle gift fields:
.wc-block-components-address-form__moowoodle-first_name
.wc-block-components-address-form__moowoodle-last_name
.wc-block-components-address-form__moowoodle-email_address
They show by default; we hide them and let JS reveal on toggle. */
.wc-block-components-address-form__moowoodle-first_name,
.wc-block-components-address-form__moowoodle-last_name,
.wc-block-components-address-form__moowoodle-email_address {
display: none !important;
}
.coe-gift-active .wc-block-components-address-form__moowoodle-first_name,
.coe-gift-active .wc-block-components-address-form__moowoodle-last_name,
.coe-gift-active .wc-block-components-address-form__moowoodle-email_address {
display: block !important;
}
/* ── Product grid: force 3 equal columns, equal heights ──────
DOM shows with Divi still
applying float/width. We override with high specificity. */
body.woocommerce #left-area ul.products,
body.woocommerce-page #left-area ul.products,
body.post-type-archive-product #left-area ul.products,
body.tax-product_cat #left-area ul.products,
body.tax-product_tag #left-area ul.products,
.woocommerce ul.products.columns-3 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 22px !important;
align-items: stretch !important;
margin: 0 !important;
width: 100% !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
max-width: none !important;
margin: 0 !important;
float: none !important;
height: 100% !important;
clear: none !important;
}
/* Divi/WooCommerce inject nth-child clears + percentage widths — kill them */
.woocommerce ul.products li.product:nth-child(n),
.woocommerce-page ul.products li.product:nth-child(n) {
margin-right: 0 !important;
width: auto !important;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { display: none !important; content: none !important; }
/* CRITICAL: WooCommerce adds .first/.last + clear:both to loop items,
which in a grid forces an item onto a new row and leaves an empty
cell. Neutralize every float/clear/width artifact so grid auto-flow
places 3 per row cleanly. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products li.product:nth-child(3n+1),
.woocommerce ul.products li.product:nth-child(3n) {
clear: none !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
grid-column: auto !important;
}
.woocommerce ul.products { grid-auto-flow: row !important; }
/* CRITICAL: the products has ::before/::after (clearfix) that
CSS grid counts as grid items — the ::before was taking the first
cell and shoving every card over by one (the empty box). Remove
them from the grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce ul.products.columns-3::before,
.woocommerce ul.products.columns-3::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
}
@media (max-width: 980px) {
body.woocommerce #left-area ul.products,
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 560px) {
body.woocommerce #left-area ul.products,
.woocommerce ul.products.columns-3 { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════
v5.9 ADDITIONS
═══════════════════════════════════════════════════════════ */
/* ── View Cart button beside cart icon ───────────────────── */
#sidebar .coe-cart-widget {
display: flex !important;
align-items: stretch !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
/* Cart icon: a defined teal-tinted icon button paired with View Cart.
The OUTER wrapper is the bordered box; the INNER button fills it
completely so the hover background reaches the border edges. */
#sidebar .coe-cart-widget .cart-contents,
#sidebar .coe-cart-widget a.cart-contents,
#sidebar .coe-cart-widget .wc-block-mini-cart {
flex: 0 0 auto !important;
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
width: 48px !important;
min-width: 48px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--coe-teal-ltr) !important;
border: 1.5px solid var(--coe-teal-lt) !important;
border-radius: 9px !important;
color: var(--coe-teal) !important;
overflow: hidden !important; /* keep inner hover within rounded corners */
transition: all 0.15s !important;
}
/* Inner button fills the whole bordered box so hover covers it fully */
#sidebar .coe-cart-widget .wc-block-mini-cart__button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--coe-teal) !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
/* Hover fills the entire box, edge to edge */
#sidebar .coe-cart-widget .cart-contents:hover,
#sidebar .coe-cart-widget .wc-block-mini-cart:hover,
#sidebar .coe-cart-widget .wc-block-mini-cart:hover .wc-block-mini-cart__button,
#sidebar .coe-cart-widget .wc-block-mini-cart__button:hover {
background: var(--coe-teal-lt) !important;
border-color: var(--coe-teal) !important;
}
#sidebar .coe-cart-widget .wc-block-mini-cart:hover {
border-color: var(--coe-teal) !important;
}
/* The mini-cart icon glyph + count badge sizing */
#sidebar .coe-cart-widget .wc-block-mini-cart__button svg,
#sidebar .coe-cart-widget .cart-contents svg {
width: 20px !important; height: 20px !important;
stroke: var(--coe-teal) !important; fill: none !important;
}
#sidebar .coe-cart-widget .wc-block-mini-cart__badge {
background: var(--coe-navy) !important;
color: #fff !important;
font-weight: 700 !important;
}
#sidebar .coe-view-cart {
flex: 1 1 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 12px 14px !important;
background: var(--coe-teal) !important;
color: #fff !important;
border-radius: 9px !important;
font-size: 13.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background 0.15s !important;
}
#sidebar .coe-view-cart:hover { background: var(--coe-teal-dk) !important; color:#fff !important; }
/* ── My Account: center content (no empty sidebar gap) ─────── */
@media (min-width: 981px) {
body.woocommerce-account #left-area {
margin: 0 !important;
float: none !important;
width: 100% !important;
}
/* Account page has no category sidebar — let content use full width */
body.woocommerce-account #sidebar { display: none !important; }
body.woocommerce-account #content-area.clearfix { display: block !important; }
}
/* Account nav + content side by side, centered as a unit.
SCOPED to #left-area so it can NEVER touch the header's own
.woocommerce wrapper (which caused the header to condense). */
body.woocommerce-account #left-area .woocommerce {
display: flex !important;
gap: 28px !important;
align-items: flex-start !important;
width: 100% !important;
margin: 0 !important;
}
body.woocommerce-account #left-area .woocommerce-MyAccount-navigation {
flex: 0 0 240px !important;
}
body.woocommerce-account #left-area .woocommerce-MyAccount-content {
flex: 1 1 auto !important;
margin: 0 !important;
}
/* Login page only (not logged in): single column, full-width centered form.
No nav sidebar is rendered, so flex layout is not needed here. */
body.woocommerce-account:not(.logged-in) #left-area .woocommerce {
display: block !important;
max-width: 100% !important;
}
@media (max-width: 980px) {
body.woocommerce-account #left-area .woocommerce { flex-direction: column !important; }
body.woocommerce-account #left-area .woocommerce-MyAccount-navigation { flex: 0 0 auto !important; width: 100% !important; }
/* Full width on mobile — 50% is too narrow for a login form */
body.woocommerce-account:not(.logged-in) #left-area .woocommerce { max-width: 100% !important; }
}
/* (Divi section padding left to Theme Options — no child-theme override) */
/* ── Footer section padding + empty trailing section: WooCommerce
pages get padding-top: 15vh on the footer section, and an empty
et_pb_section below the footer template adds blank space at the
bottom of the page. Both are suppressed here across all viewports.
The footer section selector targets the Divi footer template section;
the :not([id*="tb_footer"]) selector catches any empty trailing section
that appears only on WooCommerce pages. ── */
/* Footer is left to Divi's native rendering on ALL pages so every
footer matches the main site layout (no per-page overrides). */
/* Collapse any empty et_pb_section that appears below the footer on
WooCommerce pages (has no visible content, just blank space).
Targets both direct children of #page-container and the post-footer
area — using :empty and :last-child to avoid touching real sections. */
body.woocommerce-cart .et_pb_section:empty,
body.woocommerce-checkout .et_pb_section:empty,
body.woocommerce-account .et_pb_section:empty,
body.woocommerce-order-received .et_pb_section:empty {
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* ── MooWoodle "View" button → match teal store buttons ───── */
.woocommerce-orders-table__cell .woocommerce-button.moowoodle,
.woocommerce-orders-table__cell a.woocommerce-button,
.moowoodle-table .woocommerce-button,
.moowoodle-my-courses .woocommerce-button,
#moowoodle-my-course .button,
.woocommerce-MyAccount-content .moowoodle .button,
.woocommerce-MyAccount-content .button.moowoodle {
background: var(--coe-teal) !important;
background-color: var(--coe-teal) !important;
color: #fff !important;
border: none !important;
border-radius: 7px !important;
padding: 8px 18px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
box-shadow: none !important;
text-decoration: none !important;
}
.woocommerce-orders-table__cell .woocommerce-button.moowoodle:hover,
.moowoodle-table .woocommerce-button:hover,
#moowoodle-my-course .button:hover,
.woocommerce-MyAccount-content .moowoodle .button:hover {
background: var(--coe-teal-dk) !important;
color: #fff !important;
}
/* ── Add to Cart: simple solid hover (no arrow) ───────────── */
.woocommerce div.product form.cart .single_add_to_cart_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button::after,
.woocommerce div.product form.cart .single_add_to_cart_button::before {
content: none !important;
display: none !important;
}
/* ── Product description: tidy spacing ────────────────────── */
.woocommerce div.product .woocommerce-Tabs-panel--description p,
.woocommerce div.product #tab-description p {
margin-bottom: 14px !important;
line-height: 1.7 !important;
}
.woocommerce div.product .woocommerce-Tabs-panel--description ul {
margin: 0 0 16px 20px !important;
}
/* ── 9. PAGINATION STYLING ──────────────────────────────────
Matches the store's teal/pill style with proper spacing.
───────────────────────────────────────────────────────── */
.woocommerce-pagination {
margin: 40px 0 20px !important;
text-align: center !important;
width: 100% !important;
}
.woocommerce-pagination ul {
display: inline-flex !important;
gap: 10px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-pagination ul li {
border: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
height: 42px !important;
padding: 0 14px !important;
background: #ffffff !important;
color: var(--coe-teal) !important;
border: 1.5px solid var(--coe-border) !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
box-shadow: var(--coe-shadow) !important;
}
.woocommerce-pagination ul li span.current {
background: var(--coe-teal) !important;
color: #ffffff !important;
border-color: var(--coe-teal) !important;
}
.woocommerce-pagination ul li a:hover {
background: var(--coe-teal-ltr) !important;
border-color: var(--coe-teal-lt) !important;
color: var(--coe-teal) !important;
transform: translateY(-1px) !important;
box-shadow: var(--coe-shadow-md) !important;
}
/* Arrow icons adjustment */
.woocommerce-pagination ul li a.next,
.woocommerce-pagination ul li a.prev {
font-size: 18px !important;
}
/* ── Order-received: inline "My Courses" → navy button ─────── */
.coe-inline-courses-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 4px 4px !important;
padding: 10px 20px !important;
background: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
vertical-align: middle !important;
transition: all 0.15s !important;
}
.coe-inline-courses-btn::before {
content: "" !important;
width: 15px !important; height: 15px !important; flex-shrink: 0 !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.coe-inline-courses-btn:hover { background: #16315e !important; color: #fff !important; }
/* ── Order-received: constrain width so blocks don't stretch ──
With no sidebar, #left-area spans full width and the cards/table
look over-stretched. Center the order content at a readable width. */
@media (min-width: 981px) {
/* Scoped tightly to the order-received page's article content only.
Uses the .entry-content > .woocommerce direct-child path so it
cannot affect shop, archive, or any other page (those don't carry
the woocommerce-order-received body class anyway, but this keeps
it limited to the order summary wrapper specifically). */
body.woocommerce-order-received .entry-content > .woocommerce {
max-width: 820px !important;
margin: 0 auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
v7.0 ADDITIONS
═══════════════════════════════════════════════════════════ */
/* ── ITEM 4: kill hover arrow on Orders "View" button ──────── */
.woocommerce-orders-table__cell a.woocommerce-button.view::after,
.woocommerce-orders-table__cell a.woocommerce-button.view::before,
.woocommerce-orders-table__cell .button.view::after,
.woocommerce-orders-table__cell .button.view::before,
.woocommerce table.my_account_orders .button.view::after,
.woocommerce .woocommerce-orders-table .button.view::after {
content: none !important;
display: none !important;
}
/* ── ITEM 6: style login / register / view-cart buttons ─────
Match our button system: solid navy primary, teal where it's a
"forward" action. */
/* Login form submit + Register submit → navy primary buttons */
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 10px !important;
padding: 12px 26px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
box-shadow: none !important;
transition: all 0.15s !important;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
background: #16315e !important;
color: #fff !important;
}
/* Kill the arrow pseudo-element on hover (Divi/WooCommerce inject it) */
.woocommerce-form-login__submit::after,
.woocommerce-form-login__submit::before,
.woocommerce-form-login__submit:hover::after,
.woocommerce-form-register__submit::after,
.woocommerce-form-register__submit::before,
.woocommerce-form-register__submit:hover::after,
.woocommerce form.woocommerce-form-login .button::after,
.woocommerce form.woocommerce-form-register .button::after {
content: none !important;
display: none !important;
opacity: 0 !important;
width: 0 !important;
margin: 0 !important;
}
/* "View cart" forward button (appears after add-to-cart) → teal */
.woocommerce a.button.wc-forward,
.woocommerce .woocommerce-message a.button.wc-forward,
a.added_to_cart.wc-forward {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: var(--coe-teal) !important;
color: #fff !important;
border: 1.5px solid var(--coe-teal) !important;
border-radius: 10px !important;
padding: 11px 22px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: none !important;
box-shadow: none !important;
transition: all 0.15s !important;
}
.woocommerce a.button.wc-forward::after,
.woocommerce a.button.wc-forward::before { content: none !important; display: none !important; }
.woocommerce a.button.wc-forward:hover { background: var(--coe-teal-dk) !important; color: #fff !important; }
/* ── ITEM 3: style the new gift step icon background already set
inline; ensure the gift line wraps cleanly (inherits .coe-next-step) */
/* ── Login / Register columns: equal height, matched cards ──── */
@media (min-width: 768px) {
.woocommerce-account:not(.logged-in) #left-area .woocommerce > .u-columns,
.woocommerce #left-area .u-columns.col2-set,
.woocommerce #left-area .woocommerce > .u-columns {
display: flex !important;
gap: 24px !important;
align-items: stretch !important;
}
.woocommerce #left-area .u-column1.col-1,
.woocommerce #left-area .u-column2.col-2 {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
}
/* The form fills the column so both cards match height */
.woocommerce #left-area .u-column1.col-1 form,
.woocommerce #left-area .u-column2.col-2 form {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Push the submit button row to the bottom so buttons align */
.woocommerce #left-area .u-column1.col-1 .woocommerce-LostPassword,
.woocommerce #left-area .woocommerce-form-register .woocommerce-privacy-policy-text {
margin-top: auto !important;
}
}
/* Card styling on both columns (if not already bordered) */
.woocommerce #left-area .u-column1.col-1,
.woocommerce #left-area .u-column2.col-2 {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-radius: 12px !important;
padding: 24px !important;
box-shadow: var(--coe-shadow) !important;
}
.woocommerce #left-area .u-column1.col-1 h2,
.woocommerce #left-area .u-column2.col-2 h2 {
font-size: 20px !important;
color: var(--coe-navy) !important;
margin: 0 0 16px !important;
}
/* ── STRONGER arrow suppression for login/register submit ────
Divi renders the arrow via ::after with high specificity
(body.et_pb_button_helper_class .button). Match it + harder. */
body .woocommerce form.woocommerce-form-login p button.woocommerce-form-login__submit::after,
body .woocommerce form.woocommerce-form-register p button.woocommerce-form-register__submit::after,
body.et_pb_button_helper_class .woocommerce-form-login__submit::after,
body.et_pb_button_helper_class .woocommerce-form-register__submit::after,
body .woocommerce-form-login__submit::after,
body .woocommerce-form-register__submit::after,
body .woocommerce-form-login__submit:hover::after,
body .woocommerce-form-register__submit:hover::after {
content: "" !important;
display: none !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
/* Also ensure no padding-right reserved for the arrow */
body .woocommerce-form-login__submit,
body .woocommerce-form-register__submit {
padding-right: 26px !important;
}
/* ── STRONGER equal-height for the login/register columns ────
Exact targeting of .u-columns.col2-set (#customer_login). */
@media (min-width: 768px) {
.woocommerce #left-area .u-columns.col2-set,
#customer_login.u-columns {
display: flex !important;
flex-wrap: nowrap !important;
gap: 24px !important;
align-items: stretch !important;
}
.woocommerce #left-area .u-columns.col2-set > .u-column1,
.woocommerce #left-area .u-columns.col2-set > .u-column2,
#customer_login > .u-column1,
#customer_login > .u-column2 {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
float: none !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Forms stretch to fill the equal-height column */
#customer_login > .u-column1 > form,
#customer_login > .u-column2 > form {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
}
/* ── STRONGER hover color for login/register submit buttons ──
Divi's .button:hover was overriding our hover bg. Match its
specificity (body + form path) so the color change applies. */
body .woocommerce form.woocommerce-form-login p button.woocommerce-form-login__submit:hover,
body .woocommerce form.woocommerce-form-register p button.woocommerce-form-register__submit:hover,
body.et_pb_button_helper_class .woocommerce-form-login__submit:hover,
body.et_pb_button_helper_class .woocommerce-form-register__submit:hover,
body .woocommerce-form-login__submit:hover,
body .woocommerce-form-register__submit:hover,
body .woocommerce-form-login__submit:focus,
body .woocommerce-form-register__submit:focus {
background: #16315e !important;
background-color: #16315e !important;
color: #fff !important;
border-color: #16315e !important;
}
/* ============================================================
COE Store — Assign Seats / layout / link additions
Append to coe-shop.css
============================================================ */
/* ── #7. Full-width stretch: account / cart / checkout ───────
Divi boxes these pages inside .container (max-width ~1080px).
Widen the container on these page types so content fills the
viewport. The store background (--coe-bg) is already applied
to these body classes earlier in this file, so if the stretch
is ever overridden by Divi, the background still shows as the
intended fallback.
Scoped to the content container that wraps #content-area only,
never the header's own .container. */
@media only screen and (min-width: 981px) {
body.woocommerce-account #main-content > .container,
body.woocommerce-cart #main-content > .container,
body.woocommerce-checkout #main-content > .container,
body.woocommerce-order-received #main-content > .container {
width: 90% !important;
max-width: 1600px !important;
}
/* Let the account content column use the full width freed up. */
body.woocommerce-account #main-content #left-area,
body.woocommerce-cart #main-content #left-area,
body.woocommerce-checkout #main-content #left-area {
width: 100% !important;
max-width: 100% !important;
}
/* My Account: give the navigation + content a comfortable split
now that the container is wider. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
width: 22% !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
width: 74% !important;
}
}
/* Ensure the store background truly covers these pages edge-to-edge
(fallback + belt-and-suspenders with the earlier rule). */
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
background: var(--coe-bg) !important;
}
/* ── #8. Fix small / blue default links ──────────────────────
Related products titles, cross-sell titles, and inline cart/
checkout links fall back to Divi/browser default blue and a
small size. Bring them into the COE palette and size them up. */
/* Related & up-sell product titles */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .up-sells ul.products li.product .woocommerce-loop-product__title,
.woocommerce .cross-sells ul.products li.product .woocommerce-loop-product__title {
font-size: 16px !important;
line-height: 1.35 !important;
color: var(--coe-navy) !important;
font-weight: 600 !important;
}
.woocommerce .related.products ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce .up-sells ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce .cross-sells ul.products li.product a:hover .woocommerce-loop-product__title {
color: var(--coe-teal) !important;
}
/* "Related products" / "You may also like" section heading */
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 {
color: var(--coe-navy) !important;
font-size: 22px !important;
}
/* Inline links inside cart & checkout (e.g. "Return to cart",
coupon toggle, "Click here to enter your code", edit-address
links). Default WooCommerce/Divi renders these small + blue. */
body.woocommerce-cart .woocommerce a:not(.button):not(.wp-element-button),
body.woocommerce-checkout .woocommerce a:not(.button):not(.wp-element-button),
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-checkout .woocommerce-message a {
color: var(--coe-teal) !important;
font-size: 15px !important;
font-weight: 600 !important;
text-decoration: underline !important;
}
body.woocommerce-cart .woocommerce a:not(.button):not(.wp-element-button):hover,
body.woocommerce-checkout .woocommerce a:not(.button):not(.wp-element-button):hover,
body.woocommerce-cart .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-info a:hover {
color: var(--coe-navy) !important;
}
/* ── Confirmation page: classroom / assign-seats blurb ───────
Mirrors the existing .coe-order-noncourse styling so the new
section sits consistently with the "What happens next?" block. */
.coe-order-classroom {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--coe-surface);
border: 1px solid var(--coe-border);
border-radius: 10px;
padding: 16px 18px;
margin: 18px 0;
box-shadow: var(--coe-shadow);
}
.coe-order-classroom .coe-step-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.coe-classroom-text {
font-size: 15px;
line-height: 1.5;
color: var(--coe-text);
}
.coe-assign-seats-link,
.coe-classroom-text a {
color: var(--coe-teal) !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
.coe-assign-seats-link:hover,
.coe-classroom-text a:hover {
color: var(--coe-navy) !important;
}
/* ═══════════════════════════════════════════════════════════
v8.3 ADDITIONS
═══════════════════════════════════════════════════════════ */
/* ── Fix 3: empty-cart recommended-product links ──────────── */
.wc-block-grid__product-title,
.wc-block-grid__product-link .wc-block-grid__product-title,
a .wc-block-grid__product-title {
color: var(--coe-navy) !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: color 0.15s !important;
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title,
a:hover .wc-block-grid__product-title,
.wc-block-grid__product-title:hover {
color: var(--coe-teal) !important;
text-decoration: underline !important;
}
.wc-block-grid__product .wc-block-grid__product-price,
.wc-block-grid__product .price {
color: var(--coe-teal) !important;
font-weight: 700 !important;
}
/* ── Fix 4: make notice / error boxes clearly visible ─────────
Give each notice type a tinted background, colored left border,
and readable text so they stand out from the page. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.wc-block-components-notice-banner {
border-radius: 10px !important;
padding: 16px 18px 16px 46px !important;
margin: 0 0 20px !important;
position: relative !important;
font-size: 15px !important;
line-height: 1.5 !important;
list-style: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* Success / message → green-teal tinted */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-message {
background: #e7f7ef !important;
border: 1px solid #b7e4cd !important;
border-left: 4px solid #1a9d63 !important;
color: #14663f !important;
}
/* Error → red tinted */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-error {
background: #fdecec !important;
border: 1px solid #f5c2c2 !important;
border-left: 4px solid #d63333 !important;
color: #8f1f1f !important;
}
/* Info → blue tinted */
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-info {
background: #e8f1fd !important;
border: 1px solid #bcd6f5 !important;
border-left: 4px solid #2b6cb0 !important;
color: #1c4a7a !important;
}
/* Icon on the left of each notice */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before {
position: absolute !important;
left: 16px !important;
top: 16px !important;
font-size: 16px !important;
font-family: inherit !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce .woocommerce-message::before { content: "\2713" !important; color: #1a9d63 !important; }
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-error::before { content: "\26A0" !important; color: #d63333 !important; }
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-info::before { content: "\2139" !important; color: #2b6cb0 !important; }
/* Buttons inside notices keep their own styling; links stay readable */
.woocommerce-notices-wrapper .woocommerce-message a:not(.button),
.woocommerce-notices-wrapper .woocommerce-error a:not(.button),
.woocommerce-notices-wrapper .woocommerce-info a:not(.button) {
color: inherit !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
/* ═══════════════════════════════════════════════════════════
v8.4 — BRAND REFRESH (items 1,2,3,4,8,9)
═══════════════════════════════════════════════════════════ */
/* ── Item 1: kill 96px side padding at very wide viewports ───
Divi/theme applies large section padding at 2400px+ that also
affected the header. Scope to store content, not the header. */
/* ── Item 2 (v8.5): remove oversized side padding on store pages ──
The theme applies large left/right padding to #main-content and its
container on account/cart/checkout (visible as ~96px gutters, and
larger at very wide viewports). We neutralise it on store pages at
ALL widths. Scoped to #main-content / #content-area / #left-area so
the header (which lives in #et-boc > header, OUTSIDE #main-content)
is never affected. */
/* Store side/section padding is left entirely to Divi (Theme Options). */
/* ── Item 2: Playfair Display headings, Poppins body ─────────
Scoped to store/woo pages so the rest of the site is untouched. */
body.woocommerce,
body.post-type-archive-product,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account,
body.woocommerce-order-received,
body.single-product,
body.tax-product_cat {
font-family: var(--coe-font-body);
}
body.woocommerce #left-area h1,
body.woocommerce #left-area h2,
body.woocommerce #left-area h3,
body.post-type-archive-product #left-area h1,
body.post-type-archive-product #left-area h2,
body.single-product #left-area h1,
body.single-product #left-area h2,
body.single-product #left-area h3,
body.tax-product_cat #left-area h1,
body.tax-product_cat #left-area h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2,
.wc-block-grid__product-title,
.product_title.entry-title,
.coe-order-next-steps h3,
.woocommerce div.product .product_title {
font-family: var(--coe-font-display) !important;
letter-spacing: 0.01em !important;
}
/* Poppins on body copy, buttons, form fields within store */
body.woocommerce #left-area p,
body.woocommerce #left-area li,
body.woocommerce #left-area label,
body.woocommerce #left-area input,
body.woocommerce #left-area select,
body.woocommerce #left-area textarea,
body.woocommerce #left-area .button,
body.single-product #left-area p,
body.single-product #left-area .woocommerce-tabs,
body.tax-product_cat #left-area p {
font-family: var(--coe-font-body) !important;
}
/* ── Item 3: order-summary text too small ───────────────────
Block checkout right-column summary — bump the type up. */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description p {
font-size: 15px !important;
line-height: 1.5 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
font-weight: 600 !important;
color: var(--coe-navy) !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value {
font-size: 15px !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--coe-navy) !important;
}
/* ── Item 8: quantity input looks greyed-out / disabled ─────
Give it clear borders, dark text, white bg, focus accent. */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce .quantity input.qty,
input.input-text.qty.text {
background: var(--coe-surface) !important;
color: var(--coe-text) !important;
border: 1.5px solid var(--coe-border-md) !important;
border-radius: 8px !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 10px 8px !important;
min-height: 46px !important;
text-align: center !important;
box-shadow: none !important;
-moz-appearance: textfield !important;
}
.woocommerce .quantity input.qty:focus,
input.input-text.qty.text:focus {
border-color: var(--coe-green) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(30,122,110,0.15) !important;
}
.woocommerce .quantity input.qty:hover {
border-color: var(--coe-green) !important;
}
/* ── Item 9: empty-cart / grid product titles too small ───── */
.wc-block-grid__product-title {
font-size: 16px !important;
line-height: 1.35 !important;
margin: 10px 0 6px !important;
}
/* ── Item 4: hide sort selector (CSS fallback) ────────────── */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering,
select.orderby,
form.woocommerce-ordering {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════
v8.4 — SINGLE PRODUCT & CATEGORY (items 5,6,7)
═══════════════════════════════════════════════════════════ */
/* ── Item 5: category term-description as a navy accent card ──
Matches screenshot 1: white rounded card, thick navy left bar. */
.term-description,
.woocommerce .term-description,
body.tax-product_cat .term-description {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-left: 6px solid var(--coe-navy) !important;
border-radius: 12px !important;
padding: 22px 28px !important;
margin: 0 0 32px !important;
box-shadow: var(--coe-shadow) !important;
font-family: var(--coe-font-body) !important;
font-size: 17px !important;
line-height: 1.6 !important;
color: var(--coe-text) !important;
}
.term-description p { margin: 0 !important; }
.term-description p + p { margin-top: 12px !important; }
/* ── Item 6: rounded product gallery thumbnails ─────────────── */
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img {
border-radius: 14px !important;
overflow: hidden !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
box-shadow: var(--coe-shadow) !important;
}
/* ── Item 7: clean, course-type-colored description tabs ─────
Screenshot 2 look: rounded card, colored top rule + tab accent.
Color is set per body class below (online=navy, in-person=green,
printed=plum), driven by the product's category body classes. */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-radius: 16px !important;
border-top: 5px solid var(--coe-navy) !important; /* default accent */
padding: 8px 28px 28px !important;
margin-top: 28px !important;
box-shadow: var(--coe-shadow-md) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
margin: 0 0 20px !important;
padding: 0 !important;
border-bottom: 1px solid var(--coe-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 24px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--coe-font-display) !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--coe-muted) !important;
padding: 14px 2px !important;
display: inline-block !important;
border-bottom: 3px solid transparent !important;
transition: color .15s, border-color .15s !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--coe-navy) !important;
border-bottom-color: var(--coe-navy) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
font-family: var(--coe-font-body) !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: var(--coe-text) !important;
margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
font-family: var(--coe-font-display) !important;
color: var(--coe-navy) !important;
font-size: 24px !important;
margin-bottom: 14px !important;
}
/* Per-type accent colors, driven by product category body classes.
WooCommerce adds product_cat- to on single products. */
body.product_cat-tpi-in-person-workshops div.product .woocommerce-tabs.wc-tabs-wrapper,
body[class*="in-person"] div.product .woocommerce-tabs.wc-tabs-wrapper {
border-top-color: var(--coe-type-inperson) !important;
}
body.product_cat-tpi-in-person-workshops div.product .woocommerce-tabs ul.tabs li.active a,
body[class*="in-person"] div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--coe-type-inperson) !important;
border-bottom-color: var(--coe-type-inperson) !important;
}
body.product_cat-tpi-online-courses div.product .woocommerce-tabs.wc-tabs-wrapper {
border-top-color: var(--coe-type-online) !important;
}
body.product_cat-tpi-online-courses div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--coe-type-online) !important;
border-bottom-color: var(--coe-type-online) !important;
}
body[class*="printed"] div.product .woocommerce-tabs.wc-tabs-wrapper {
border-top-color: var(--coe-type-printed) !important;
}
body[class*="printed"] div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--coe-type-printed) !important;
border-bottom-color: var(--coe-type-printed) !important;
}
/* ═══════════════════════════════════════════════════════════
v8.4 — LOGIN PAGE INTRO (item 10)
═══════════════════════════════════════════════════════════ */
.coe-login-intro {
max-width: 100% !important;
margin: 0 0 32px !important;
padding: 28px 30px !important;
background: linear-gradient(135deg, var(--coe-navy) 0%, var(--coe-plum) 100%) !important;
border-radius: 16px !important;
color: #fff !important;
box-shadow: var(--coe-shadow-md) !important;
}
.coe-login-intro h2 {
font-family: var(--coe-font-display) !important;
color: #fff !important;
font-size: 26px !important;
margin: 0 0 8px !important;
}
.coe-login-intro > p {
font-family: var(--coe-font-body) !important;
font-size: 15.5px !important;
line-height: 1.6 !important;
color: rgba(255,255,255,0.9) !important;
margin: 0 0 20px !important;
max-width: 760px !important;
}
.coe-login-intro-cols {
display: flex !important;
gap: 20px !important;
flex-wrap: wrap !important;
}
.coe-login-intro-col {
flex: 1 1 300px !important;
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
background: rgba(255,255,255,0.10) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
}
.coe-login-intro-col strong {
font-family: var(--coe-font-body) !important;
display: block !important;
font-size: 15px !important;
color: #fff !important;
margin-bottom: 3px !important;
}
.coe-login-intro-col p {
font-family: var(--coe-font-body) !important;
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,0.85) !important;
margin: 0 !important;
}
.coe-login-intro-icon {
flex-shrink: 0 !important;
width: 40px !important; height: 40px !important;
border-radius: 10px !important;
background: var(--coe-sand) !important;
display: inline-flex !important;
-webkit-mask-size: 22px; mask-size: 22px;
background-repeat: no-repeat !important;
background-position: center !important;
position: relative !important;
}
.coe-login-intro-icon::after {
content: "" !important;
position: absolute !important; inset: 0 !important;
margin: auto !important;
width: 22px !important; height: 22px !important;
background-color: var(--coe-navy) !important;
}
.coe-login-intro-icon.coe-icon-login::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.coe-login-intro-icon.coe-icon-register::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") center/contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
@media (max-width: 600px) {
.coe-login-intro-cols { flex-direction: column !important; }
}
/* ═══════════════════════════════════════════════════════════
v8.6 — Divi section padding override + empty-cart polish
═══════════════════════════════════════════════════════════ */
/* ── Round thumbnails in the "New in store" empty-cart grid ──
Only rounds the actual ![]()
; leaves containers untouched so
products without a featured image are unaffected. */
.wc-block-grid__product-image img,
.wc-block-grid__product img,
.woocommerce .cross-sells ul.products li.product img {
border-radius: 14px !important;
}
/* ── Item: enlarge BLOCK cart item text (name, price, desc) ── */
.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__product a.wc-block-components-product-name {
font-size: 17px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
font-family: var(--coe-font-display) !important;
color: var(--coe-navy) !important;
}
.wc-block-cart-item__product .wc-block-components-product-price,
.wc-block-cart-item__product .wc-block-components-product-price__value,
.wc-block-cart-item__prices .wc-block-formatted-money-amount {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--coe-green) !important;
}
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata p {
font-size: 14.5px !important;
line-height: 1.5 !important;
color: var(--coe-text) !important;
}
/* Quantity selector in block cart — larger, clearer */
.wc-block-components-quantity-selector__input {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--coe-text) !important;
}
.wc-block-components-quantity-selector__button {
font-size: 18px !important;
color: var(--coe-navy) !important;
}
/* Cart table header + totals text sizing */
.wc-block-cart .wc-block-components-product-name,
table.wc-block-cart-items th {
font-size: 15px !important;
}
/* ═══════════════════════════════════════════════════════════
v8.11 — login intro, tabs, buttons, register fields
═══════════════════════════════════════════════════════════ */
/* ── Item 1.4: prominent title + left/right divider ────────── */
.coe-login-intro-title {
font-family: var(--coe-font-display) !important;
font-size: 30px !important;
font-weight: 800 !important;
color: #fff !important;
text-align: center !important;
margin: 0 0 22px !important;
padding-bottom: 16px !important;
border-bottom: 2px solid rgba(255,255,255,0.25) !important;
}
/* Vertical divider between the two columns */
.coe-login-intro-cols {
align-items: stretch !important;
position: relative !important;
}
/* (login intro divider removed — cards separated by gap) */
/* ── Item 3: hide the product description tab heading row ───── */
body.woocommerce div.product .woocommerce-tabs ul.tabs,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs,
body.single-product div.product .woocommerce-tabs ul.tabs {
display: none !important;
}
/* Since the tab bar is hidden, tighten the panel spacing */
body.woocommerce div.product .woocommerce-tabs .panel {
margin-top: 0 !important;
}
/* ── Item 5: "Add to cart" button in product grids ────────────
.wc-block-grid__product-add-to-cart button + classic loop button */
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple {
background: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 10px !important;
padding: 11px 22px !important;
font-family: var(--coe-font-body) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: none !important;
box-shadow: none !important;
transition: all 0.15s !important;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.product_type_simple:hover {
background: var(--coe-navy-hover) !important;
border-color: var(--coe-navy-hover) !important;
color: #fff !important;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after,
.woocommerce ul.products li.product a.add_to_cart_button::after {
content: none !important; display: none !important;
}
/* ── Item 6: "Proceed to Checkout" block button ─────────────── */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-button.contained {
background: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 10px !important;
font-family: var(--coe-font-body) !important;
font-weight: 700 !important;
box-shadow: none !important;
transition: all 0.15s !important;
}
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover {
background: var(--coe-navy-hover) !important;
border-color: var(--coe-navy-hover) !important;
color: #fff !important;
}
/* ── Item 2.2: register First/Last name field layout ─────────
Match WooCommerce's two-column form-row layout. */
.woocommerce-form-register .form-row-first { float: left !important; width: 48% !important; }
.woocommerce-form-register .form-row-last { float: right !important; width: 48% !important; }
.woocommerce-form-register .form-row-first,
.woocommerce-form-register .form-row-last { margin-bottom: 14px !important; }
.woocommerce-form-register::after { content: ""; display: table; clear: both; }
@media (max-width: 480px) {
.woocommerce-form-register .form-row-first,
.woocommerce-form-register .form-row-last { float: none !important; width: 100% !important; }
}
/* ═══════════════════════════════════════════════════════════
v8.12 — .iceebp-course-section styled card (item 9)
Pasted directly into the product description; renders in the
description tab panel. Styled to match the brand card look.
═══════════════════════════════════════════════════════════ */
.iceebp-course-section,
.woocommerce div.product .woocommerce-tabs .panel .iceebp-course-section,
.entry-content .iceebp-course-section {
display: block !important;
background: var(--coe-slate) !important;
border: 1px solid var(--coe-border) !important;
border-left: 6px solid var(--coe-plum) !important; /* plum accent */
border-radius: 16px !important;
padding: 28px 32px !important;
margin: 24px 0 !important;
box-shadow: var(--coe-shadow-md) !important;
font-family: var(--coe-font-body) !important;
}
.iceebp-course-section h3 {
font-family: var(--coe-font-display) !important;
font-size: 28px !important;
font-weight: 800 !important;
color: var(--coe-navy) !important;
margin: 0 0 12px !important;
line-height: 1.2 !important;
}
.iceebp-course-section > p {
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--coe-text) !important;
margin: 0 0 14px !important;
}
.iceebp-course-section ol,
.iceebp-course-section ul {
margin: 0 !important;
padding-left: 22px !important;
}
.iceebp-course-section ol li,
.iceebp-course-section ul li {
font-size: 16px !important;
line-height: 1.65 !important;
color: var(--coe-text) !important;
margin-bottom: 12px !important;
padding-left: 4px !important;
}
.iceebp-course-section ol li:last-child,
.iceebp-course-section ul li:last-child { margin-bottom: 0 !important; }
/* Enroll button inside the section (rb-button-link) → plum brand button */
.iceebp-course-section a.rb-button-link,
.iceebp-course-section a.wpel-icon-right {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
background: var(--coe-plum) !important;
color: #fff !important;
border: 1.5px solid var(--coe-plum) !important;
border-radius: 9px !important;
padding: 7px 16px !important;
margin: 0 2px !important;
font-family: var(--coe-font-body) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1.2 !important;
vertical-align: middle !important;
transition: all 0.15s !important;
}
.iceebp-course-section a.rb-button-link:hover,
.iceebp-course-section a.wpel-icon-right:hover {
background: var(--coe-plum-dk) !important;
border-color: var(--coe-plum-dk) !important;
color: #fff !important;
}
/* Suppress the DUPLICATE external-link icon.
The already contains one .wpel-icon (from the shortcode). The
WP External Links plugin can inject a SECOND icon as an extra
sibling, an ::after, or a background image on the link. We keep the
FIRST icon only and hide every other variant. */
.iceebp-course-section a.rb-button-link .wpel-icon ~ .wpel-icon,
.iceebp-course-section a.wpel-icon-right .wpel-icon ~ .wpel-icon,
.iceebp-course-section a.rb-button-link::after,
.iceebp-course-section a.rb-button-link::before,
.iceebp-course-section a.wpel-icon-right::after,
.iceebp-course-section a.wpel-icon-right::before {
display: none !important;
content: none !important;
background: none !important;
}
/* If the plugin adds its icon via background-image on the link itself */
.iceebp-course-section a.rb-button-link,
.iceebp-course-section a.wpel-icon-right {
background-image: none !important;
background-color: var(--coe-plum) !important;
}
/* Style the single remaining dashicon so it sits neatly in the button */
.iceebp-course-section a.rb-button-link .wpel-icon {
font-size: 15px !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
color: #fff !important;
}
/* ═══════════════════════════════════════════════════════════
v8.13 — login page cleanup (items 1,2,3)
═══════════════════════════════════════════════════════════ */
/* ── Item 1: hide the "My account", "Login", "Register" headings
on the account login page (logged-out state only) ─────────── */
body.woocommerce-account:not(.logged-in) .entry-title.main_title,
body.woocommerce-account:not(.logged-in) .u-column1 > h2,
body.woocommerce-account:not(.logged-in) .u-column2 > h2 {
display: none !important;
}
/* ── Item 2: First & Last name side by side on register form ──
The fields carry .form-row-first / .form-row-last (added in PHP).
Force the two-column layout with fl=box for reliability. */
/* MOBILE-FIRST: every register field is full-width and stacked. */
.woocommerce-form-register .form-row-first,
.woocommerce-form-register .form-row-last,
.woocommerce-form-register > p.form-row,
.woocommerce-form-register > p.form-row-wide,
.woocommerce-form-register > .woocommerce-privacy-policy-text,
.woocommerce-form-register > .woocommerce-form-row {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 14px !important;
}
/* DESKTOP ONLY (>=768px): put First + Last name side by side.
Everything else stays full-width on its own line. */
@media (min-width: 768px) {
/* High specificity (incl. #left-area .u-column2.col-2) to beat the
equal-height rule that sets the form to flex-direction: column. */
#left-area .u-column2.col-2 form.woocommerce-form-register,
.woocommerce #left-area .u-column2.col-2 form.woocommerce-form-register {
display: flex !important;
flex-direction: row !important; /* override the column rule */
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: flex-start !important;
}
#left-area .u-column2.col-2 form.woocommerce-form-register .form-row-first,
#left-area .u-column2.col-2 form.woocommerce-form-register .form-row-last {
flex: 0 0 48% !important;
max-width: 48% !important;
width: 48% !important;
box-sizing: border-box !important;
}
#left-area .u-column2.col-2 form.woocommerce-form-register > p.form-row:not(.form-row-first):not(.form-row-last),
#left-area .u-column2.col-2 form.woocommerce-form-register > p.form-row-wide,
#left-area .u-column2.col-2 form.woocommerce-form-register > .woocommerce-privacy-policy-text,
#left-area .u-column2.col-2 form.woocommerce-form-register > wc-order-attribution-inputs,
#left-area .u-column2.col-2 form.woocommerce-form-register > .woocommerce-form-row {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
#left-area .u-column2.col-2 form.woocommerce-form-register > wc-order-attribution-inputs { margin: 0 !important; }
/* Make sure fields inside never exceed their row */
#left-area .u-column2.col-2 form.woocommerce-form-register input.input-text {
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ── Item 3: extend the brand gradient across the whole login area ──
Wrap the entire logged-out account content in the gradient so the
intro + both form columns sit on one cohesive panel. */
body.woocommerce-account:not(.logged-in) #left-area .woocommerce {
background: linear-gradient(135deg, var(--coe-navy) 0%, var(--coe-plum) 100%) !important;
border-radius: 18px !important;
padding: 32px !important;
box-shadow: var(--coe-shadow-md) !important;
}
/* The intro card sits flush inside — drop its own bg so it blends */
body.woocommerce-account:not(.logged-in) .coe-login-intro {
background: transparent !important;
box-shadow: none !important;
padding: 0 0 8px !important;
margin-bottom: 20px !important;
}
/* Login/Register columns become light cards ON the gradient */
body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
background: var(--coe-surface) !important;
border: none !important;
border-radius: 14px !important;
padding: 26px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}
/* Keep the two columns evenly spaced within the gradient panel */
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
gap: 24px !important;
margin: 0 !important;
}
/* Mobile: stack cleanly with clear spacing between the two cards */
@media (max-width: 767px) {
body.woocommerce-account:not(.logged-in) #left-area .woocommerce { padding: 18px !important; }
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 22px !important;
}
}
/* ═══════════════════════════════════════════════════════════
v8.17 — MOBILE: login pairing, readable descriptions,
category accordion (items 1,2,3)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── Item 1: paired login layout ──────────────────────────
JS moves each form under its blurb. Style the moved forms so
they read as one block: blurb → form card. */
body.coe-login-mobile .coe-login-intro-cols {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* The moved form columns become full-width white cards */
body.coe-login-mobile .coe-login-intro-cols > .u-column1,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 {
background: var(--coe-surface) !important;
border-radius: 14px !important;
padding: 20px !important;
margin: 0 0 14px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important; /* no flex stretch */
}
/* FIX: force dark text inside the white form cards — they were
inheriting the intro's white text (labels went invisible). */
body.coe-login-mobile .coe-login-intro-cols > .u-column1,
body.coe-login-mobile .coe-login-intro-cols > .u-column2,
body.coe-login-mobile .coe-login-intro-cols > .u-column1 *,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 * {
color: var(--coe-text) !important;
}
/* Restore accent colors for links inside the cards */
body.coe-login-mobile .coe-login-intro-cols > .u-column1 a,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 a {
color: var(--coe-navy) !important;
}
body.coe-login-mobile .coe-login-intro-cols .woocommerce-LostPassword a {
color: #2b6cb0 !important;
}
/* Field labels: explicit dark, bold, spaced */
body.coe-login-mobile .coe-login-intro-cols > .u-column1 label,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 label {
color: var(--coe-navy) !important;
font-weight: 600 !important;
display: block !important;
margin-bottom: 6px !important;
font-size: 14px !important;
}
/* Log in / Create Account buttons keep white text on navy */
body.coe-login-mobile .coe-login-intro-cols .button,
body.coe-login-mobile .coe-login-intro-cols button[type="submit"] {
color: #fff !important;
}
/* FIX: the equal-height rule set the form to flex:1 1 auto + column,
creating a huge empty gap. Neutralise it inside the moved cards. */
body.coe-login-mobile .coe-login-intro-cols > .u-column1 form,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 form {
display: block !important;
flex: none !important;
height: auto !important;
}
body.coe-login-mobile .coe-login-intro-cols > .u-column1 .woocommerce-LostPassword,
body.coe-login-mobile .coe-login-intro-cols > .u-column2 .woocommerce-privacy-policy-text {
margin-top: 12px !important; /* was margin-top:auto (pushed to bottom) */
}
/* Blurb boxes size to content (no flex-grow stretch) — this is
what produces the clean, compact spacing on mobile. */
body.coe-login-mobile .coe-login-intro-col {
flex: none !important;
width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 6px !important;
}
/* Hide the now-empty #customer_login container + divider on mobile */
body.coe-login-mobile #customer_login { display: none !important; }
/* ── Item 2: readable product descriptions on mobile ──────
The pasted .iceebp-course-section + tab panel text was cramped.
Loosen spacing, line-height, and prevent squish. */
.woocommerce div.product .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs .panel {
font-size: 16px !important;
line-height: 1.7 !important;
padding: 0 2px !important;
}
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
padding: 16px !important;
border-radius: 12px !important;
}
/* The prerequisites card: smaller padding, but keep breathing room */
.iceebp-course-section {
padding: 20px 18px !important;
border-radius: 12px !important;
margin: 18px 0 !important;
}
.iceebp-course-section h3 { font-size: 22px !important; line-height: 1.25 !important; }
.iceebp-course-section > p,
.iceebp-course-section ol li,
.iceebp-course-section ul li {
font-size: 15.5px !important;
line-height: 1.7 !important;
}
.iceebp-course-section ol,
.iceebp-course-section ul { padding-left: 20px !important; }
.iceebp-course-section ol li,
.iceebp-course-section ul li { margin-bottom: 14px !important; }
/* Enroll button: full-width, tappable, its own line */
.iceebp-course-section a.rb-button-link,
.iceebp-course-section a.wpel-icon-right {
display: flex !important;
width: 100% !important;
justify-content: center !important;
margin: 10px 0 !important;
padding: 12px 18px !important;
box-sizing: border-box !important;
}
/* General single-product description paragraphs: more air */
body.single-product #left-area .woocommerce-Tabs-panel--description p,
body.single-product #left-area .panel p { margin: 0 0 14px !important; }
}
/* Accordion toggle is mobile-only; hidden on desktop by default. */
.coe-cat-accordion-toggle { display: none; }
/* ── Item 3: MOBILE category filter → accordion ───────────────
Replaces the horizontal-scroll chip row with a collapsible
vertical list. The JS adds .coe-cat-accordion-toggle and toggles
.coe-cat-open on the widget. */
@media (max-width: 980px) {
/* The toggle header (hidden on desktop, shown on mobile) */
.coe-cat-accordion-toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
background: var(--coe-navy) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 13px 16px !important;
font-family: var(--coe-font-body) !important;
font-size: 15px !important;
font-weight: 700 !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.coe-cat-accordion-chevron {
width: 12px !important; height: 12px !important;
border-right: 2.5px solid #fff !important;
border-bottom: 2.5px solid #fff !important;
transform: rotate(45deg) !important;
transition: transform 0.2s !important;
margin-top: -3px !important;
}
.coe-cat-open .coe-cat-accordion-toggle .coe-cat-accordion-chevron {
transform: rotate(-135deg) !important;
margin-top: 3px !important;
}
/* OVERRIDE the horizontal-scroll chip layout: the list becomes a
hidden-by-default VERTICAL stack that expands when open. */
body #main-content #sidebar .wc-block-product-categories-list--depth-0 {
display: none !important; /* collapsed by default */
flex-direction: column !important;
flex-wrap: nowrap !important;
overflow: visible !important;
gap: 6px !important;
padding: 10px 4px 4px !important;
margin: 0 !important;
}
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list--depth-0,
body #main-content #sidebar [data-coe-accordion="1"].coe-cat-open .wc-block-product-categories-list--depth-0 {
display: flex !important; /* expanded */
}
/* Each category is a full-width row (not a chip) */
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
flex: 0 0 auto !important;
width: 100% !important;
}
body #main-content #sidebar .coe-cat-open .coe-cat-row {
width: 100% !important;
display: flex !important;
}
body #main-content #sidebar .coe-cat-open .coe-cat-row > a,
body #main-content #sidebar .coe-cat-open .coe-all-courses > a {
white-space: normal !important;
flex: 1 1 auto !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 14.5px !important;
text-align: left !important;
}
/* Dropdown children stack neatly under the parent, indented */
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list--depth-1 {
display: none !important;
flex-direction: column !important;
width: 100% !important;
padding-left: 14px !important;
margin-top: 4px !important;
}
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list-item.coe-open .wc-block-product-categories-list--depth-1 {
display: flex !important;
}
/* The caret button aligns right in each row */
body #main-content #sidebar .coe-cat-open .coe-cat-caret {
width: 40px !important;
border-radius: 8px !important;
flex: 0 0 auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
v8.20 — MOBILE TYPOGRAPHY SCALE (consistent & accessible)
Caps oversized headings, harmonizes title sizes, keeps body
text at an accessible minimum (≥14px). Scoped to ≤767px.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── Page / category / archive title (e.g. "In Person workshops",
"Cart", "My account", "COE Store") — was inheriting Divi's
large Playfair H1. Cap it to a consistent mobile size. ── */
body.woocommerce #left-area h1.entry-title,
body.woocommerce #left-area h1.main_title,
body.post-type-archive-product #left-area h1,
body.tax-product_cat #left-area h1,
body.woocommerce-cart #left-area h1,
body.woocommerce-account #left-area h1,
body.woocommerce-checkout #left-area h1,
body.woocommerce-order-received #left-area h1,
.woocommerce-products-header__title {
font-size: 26px !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
/* ── Single product title ── */
.woocommerce div.product .product_title,
.product_title.entry-title {
font-size: 24px !important;
line-height: 1.25 !important;
}
/* ── Section headings inside content (What happens next, panels,
prerequisites) ── */
/* Section headings: keep in line with desktop, never larger.
"What happens next" h3 is 14px on desktop; panel/prereq headings
are larger structural headings so cap them modestly. */
.coe-order-next-steps h3,
.coe-refund-policy h3 {
font-size: 17px !important;
line-height: 1.3 !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.iceebp-course-section h3 {
font-size: 19px !important;
line-height: 1.25 !important;
}
/* ── Product titles: unify loop + grid to ONE size ──
(loop was 14px, grid was 18px — inconsistent). ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2,
.wc-block-grid__product-title {
font-size: 16px !important;
line-height: 1.35 !important;
}
/* ── Prices ── */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: 15px !important;
}
/* ── Body copy / descriptions: accessible minimum (15px) ── */
.woocommerce div.product .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs .panel,
.term-description,
.coe-shop-intro,
.iceebp-course-section > p,
.iceebp-course-section ol li,
.iceebp-course-section ul li {
font-size: 15px !important;
line-height: 1.65 !important;
}
/* ── Buttons: consistent, tappable, not oversized ── */
.woocommerce ul.products li.product a.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce div.product form.cart .single_add_to_cart_button,
.coe-my-courses-cta,
.coe-continue-shopping,
.coe-view-orders-cta {
font-size: 14px !important;
}
/* ── Cart block item text (name/price/desc) — keep readable
but not oversized on mobile ── */
.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__product a.wc-block-components-product-name {
font-size: 15px !important;
line-height: 1.3 !important;
}
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata p {
font-size: 13.5px !important;
}
/* ── Checkout order summary: match to a clean mobile size ── */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description {
font-size: 14px !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 18px !important;
}
/* ── Login intro: scale the title + blurbs down slightly ── */
.coe-login-intro-title { font-size: 24px !important; }
.coe-login-intro-col strong { font-size: 14.5px !important; }
.coe-login-intro-col p { font-size: 13.5px !important; line-height: 1.5 !important; }
/* ── Sidebar / category accordion labels ── */
.coe-cat-accordion-toggle { font-size: 14px !important; }
body #main-content #sidebar .coe-cat-open .coe-cat-row > a,
body #main-content #sidebar .coe-cat-open .coe-all-courses > a,
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list-item > a { font-size: 13.5px !important; }
/* Cap the category NAME span so a parent like "In Person workshops"
can't inherit a larger heading size in the dropdown. */
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list-item-name,
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list-item__name {
font-size: 13.5px !important;
line-height: 1.3 !important;
font-family: var(--coe-font-body) !important;
}
/* Subcategory (depth-1) rows slightly smaller */
body #main-content #sidebar .coe-cat-open .wc-block-product-categories-list--depth-1 a {
font-size: 13px !important;
}
/* ── Form labels + inputs: keep at 16px inputs to prevent iOS
zoom-on-focus; labels 14px ── */
body.woocommerce #left-area label,
body.woocommerce-account #left-area label { font-size: 14px !important; }
body.woocommerce #left-area input.input-text,
body.woocommerce #left-area input[type="text"],
body.woocommerce #left-area input[type="email"],
body.woocommerce #left-area input[type="password"],
body.woocommerce-account #left-area input.input-text {
font-size: 16px !important; /* 16px avoids mobile Safari auto-zoom */
}
}
/* ═══════════════════════════════════════════════════════════
v8.22 — empty-cart "New in store" grid: match store sizing
& align Add-to-cart buttons
═══════════════════════════════════════════════════════════ */
/* Make each grid product a flex column so the Add-to-cart buttons
sit at the same baseline regardless of title length. */
.wc-block-grid__products {
align-items: stretch !important;
}
.wc-block-grid__product {
display: flex !important;
flex-direction: column !important;
}
/* Title grows to fill, pushing price + button down consistently */
.wc-block-grid__product .wc-block-grid__product-title {
flex: 1 1 auto !important;
}
.wc-block-grid__product .wc-block-grid__product-price {
margin: 6px 0 10px !important;
}
/* Add-to-cart button pinned to the bottom of each card, uniform */
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
margin-top: auto !important;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
width: auto !important;
display: inline-block !important;
}
/* Thumbnail: constrain to the store's proportions (square, capped)
so the empty-cart images aren't oversized vs the shop grid. */
.wc-block-grid__product-image {
margin-bottom: 4px !important;
}
.wc-block-grid__product-image img,
.wc-block-grid__product-link img {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 2 !important;
object-fit: cover !important;
border-radius: 14px !important;
}
/* ── v8.22: align login form cards with the intro cards above ──
The intro row had a divider that changed column widths vs the form
row differed. Both rows now use identical geometry: two equal
columns via flex: 1 1 0 (even split), 24px gap, no divider. */
@media (min-width: 768px) {
body.woocommerce-account:not(.logged-in) .coe-login-intro-cols {
display: flex !important;
gap: 24px !important;
flex-wrap: nowrap !important;
position: relative !important;
align-items: stretch !important;
justify-content: center !important;
width: 100% !important;
}
body.woocommerce-account:not(.logged-in) .coe-login-intro-cols > .coe-login-intro-col {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Both container blocks span the full gradient-panel width with no
extra horizontal inset, so intro cards and form cards share edges. */
body.woocommerce-account:not(.logged-in) .coe-login-intro,
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Form columns: identical geometry to the intro row */
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
display: flex !important;
gap: 24px !important;
flex-wrap: nowrap !important;
margin: 0 !important;
align-items: stretch !important;
justify-content: center !important;
width: 100% !important;
}
body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* ── v8.29: guarantee intro row and form row share identical width ──
The intro is nested (.coe-login-intro > .coe-login-intro-cols) while
the forms are flat (#customer_login). Zero out the wrapper's box so
the inner cols span exactly the same width as #customer_login. */
@media (min-width: 768px) {
body.woocommerce-account:not(.logged-in) .coe-login-intro {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.woocommerce-account:not(.logged-in) .coe-login-intro > .coe-login-intro-title {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-account:not(.logged-in) .coe-login-intro > .coe-login-intro-cols {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* And the form row identical */
body.woocommerce-account:not(.logged-in) #customer_login.u-columns {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
}
/* ── v8.29: full-height center divider element (JS-added, safe) ── */
@media (min-width: 768px) {
body.woocommerce-account:not(.logged-in) #left-area .woocommerce {
position: relative !important;
}
.coe-login-panel-divider {
position: absolute !important;
top: 96px !important; /* just below the "Sign in..." title */
bottom: 32px !important; /* match panel padding */
left: 50% !important;
transform: translateX(-50%) !important;
width: 1px !important;
background: rgba(255,255,255,0.22) !important;
pointer-events: none !important;
z-index: 0 !important;
}
}
@media (max-width: 767px) {
.coe-login-panel-divider { display: none !important; }
}
/* Cards sit above the divider line (line only shows in the central gap) */
@media (min-width: 768px) {
body.woocommerce-account:not(.logged-in) .coe-login-intro-col,
body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
position: relative !important;
z-index: 1 !important;
}
}
/* ═══════════════════════════════════════════════════════════
v8.31 — order-received CTA link colors, MooWoodle View button
width, Assign Seats (Learners Hub) styling
═══════════════════════════════════════════════════════════ */
/* ── Confirmation CTA buttons: force readable white text (Divi's
global link color was overriding, making them hard to see). ── */
#left-area a.coe-my-courses-cta,
#left-area a.coe-my-courses-cta:link,
#left-area a.coe-my-courses-cta:visited,
#left-area a.coe-view-orders-cta,
#left-area a.coe-view-orders-cta:link,
#left-area a.coe-view-orders-cta:visited,
body .woocommerce a.coe-my-courses-cta,
body .woocommerce a.coe-view-orders-cta,
.woocommerce-order a.coe-my-courses-cta,
.woocommerce-order a.coe-view-orders-cta {
color: #fff !important;
text-decoration: none !important;
}
a.coe-my-courses-cta:hover,
a.coe-view-orders-cta:hover,
a.coe-continue-shopping:hover {
color: #fff !important;
}
/* Continue Shopping is an outline style → dark text; keep it readable */
#left-area a.coe-continue-shopping,
#left-area a.coe-continue-shopping:link,
#left-area a.coe-continue-shopping:visited,
body .woocommerce a.coe-continue-shopping,
.woocommerce-order a.coe-continue-shopping {
color: var(--coe-navy) !important;
}
a.coe-continue-shopping:hover { color: #fff !important; }
/* ── MooWoodle "View" button is too wide — size to content ── */
.woocommerce-MyAccount-content .woocommerce-button.wp-element-button.moowoodle,
.woocommerce-MyAccount-content .moowoodle-table .woocommerce-button.moowoodle,
#moowoodle-pro-learners-hub .woocommerce-button.moowoodle,
.learners-card .woocommerce-button.moowoodle,
.moowoodle[role="button"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
padding: 8px 18px !important;
white-space: nowrap !important;
}
/* ═══ Assign Seats (MooWoodle Pro Learners Hub) — brand styling ═══ */
#moowoodle-pro-learners-hub {
font-family: var(--coe-font-body) !important;
color: var(--coe-text) !important;
}
#moowoodle-pro-learners-hub h2,
#moowoodle-pro-learners-hub .section-title,
#moowoodle-pro-learners-hub h3 {
font-family: var(--coe-font-display) !important;
color: var(--coe-navy) !important;
}
/* Overview stat boxes (Total / Enrolled / Available) */
#moowoodle-pro-learners-hub .overview-grid {
display: flex !important;
gap: 16px !important;
flex-wrap: wrap !important;
margin: 18px 0 !important;
}
#moowoodle-pro-learners-hub .overview-box {
flex: 1 1 0 !important;
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-top: 3px solid var(--coe-teal) !important;
border-radius: 12px !important;
padding: 18px !important;
text-align: center !important;
box-shadow: var(--coe-shadow-sm) !important;
}
/* Classroom / learners cards */
#moowoodle-pro-learners-hub .learners-card,
#moowoodle-pro-learners-hub .enroll-container {
background: var(--coe-surface) !important;
border: 1px solid var(--coe-border) !important;
border-radius: 14px !important;
padding: 20px !important;
box-shadow: var(--coe-shadow-sm) !important;
}
/* ═══ Learner Hub buttons (v8.34) — target REAL DOM classes ═══
The Add New / Enroll buttons are plain `.button.wp-element-button`
(no .enroll/.bulk-enroll class), so target the wrapper + generic
button. Keep the icon glyphs, remove Divi's hover arrow. */
/* Primary buttons: Add New, Bulk Enroll, Enroll, and any hub .button */
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .button,
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .wp-element-button,
#moowoodle-pro-learners-hub .enroll-section .button,
#moowoodle-pro-learners-hub form .button.wp-element-button,
#moowoodle-pro-learners-hub button.button.wp-element-button {
background: var(--coe-navy) !important;
background-color: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 9px !important;
padding: 10px 18px !important;
font-weight: 700 !important;
font-family: var(--coe-font-body) !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .button:hover,
#moowoodle-pro-learners-hub .enroll-section .button:hover,
#moowoodle-pro-learners-hub form .button.wp-element-button:hover,
#moowoodle-pro-learners-hub button.button.wp-element-button:hover {
background: #16315e !important;
background-color: #16315e !important;
color: #fff !important;
}
/* Button icon glyphs stay white */
#moowoodle-pro-learners-hub .button .frontend-plus,
#moowoodle-pro-learners-hub .button i {
color: #fff !important;
}
/* Remove Divi's hover-arrow (::after / ::before) on ALL hub buttons */
#moowoodle-pro-learners-hub .button::after,
#moowoodle-pro-learners-hub .button::before,
#moowoodle-pro-learners-hub .wp-element-button::after,
#moowoodle-pro-learners-hub .wp-element-button:hover::after,
#moowoodle-pro-learners-hub button::after,
#moowoodle-pro-learners-hub button:hover::after,
#moowoodle-pro-learners-hub .woocommerce-button.moowoodle::after,
#moowoodle-pro-learners-hub .unenroll-button::after,
#moowoodle-pro-learners-hub .edit-button::after,
#moowoodle-pro-learners-hub .back-button::after,
#moowoodle-pro-learners-hub .view-btn-container button::after {
content: none !important;
display: none !important;
opacity: 0 !important;
margin: 0 !important;
width: 0 !important;
}
/* The eye (View) button — teal bg with a WHITE icon so it's visible */
#moowoodle-pro-learners-hub .view-btn-container button,
#moowoodle-pro-learners-hub button[aria-label^="View details"],
#moowoodle-pro-learners-hub button[aria-label^="View details"] {
background: var(--coe-teal) !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
}
#moowoodle-pro-learners-hub .view-btn-container button .frontend-eye,
#moowoodle-pro-learners-hub button[aria-label^="View details"] .frontend-eye,
#moowoodle-pro-learners-hub .frontend-eye,
#moowoodle-pro-learners-hub .frontend-eye::before {
color: #fff !important;
}
/* Edit button — navy bg, white icon */
#moowoodle-pro-learners-hub .edit-button {
background: var(--coe-navy) !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
}
#moowoodle-pro-learners-hub .edit-button .frontend-pencil,
#moowoodle-pro-learners-hub .edit-button i,
#moowoodle-pro-learners-hub .edit-button::before {
color: #fff !important;
}
/* Back button — make it a clear, noticeable circular button */
#moowoodle-pro-learners-hub .back-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--coe-navy) !important;
color: #fff !important;
border: none !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
cursor: pointer !important;
box-shadow: var(--coe-shadow-sm) !important;
transition: background 0.15s !important;
}
#moowoodle-pro-learners-hub .back-button:hover {
background: #16315e !important;
}
#moowoodle-pro-learners-hub .back-button .frontend-arrow,
#moowoodle-pro-learners-hub .back-button .frontend-arrow::before,
#moowoodle-pro-learners-hub .back-button i {
color: #fff !important;
}
/* Enroll/Unenroll table buttons */
#moowoodle-pro-learners-hub .enroll-table .unenroll-button,
#moowoodle-pro-learners-hub .unenroll-button {
background: #fff !important;
color: var(--coe-navy) !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 7px !important;
padding: 6px 14px !important;
font-weight: 600 !important;
}
#moowoodle-pro-learners-hub .unenroll-button:hover {
background: var(--coe-navy) !important;
color: #fff !important;
}
/* Overview numbers — distinct color per metric for quick scanning */
/* Course list: the - text already includes its own "1." "2." numbers,
so suppress the CSS list marker to avoid a doubled marker (e.g. "1. 1."). */
#moowoodle-pro-learners-hub .learners-card ol.course-list,
#moowoodle-pro-learners-hub .learners-card .course-list {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
#moowoodle-pro-learners-hub .learners-card ol.course-list li,
#moowoodle-pro-learners-hub .learners-card .course-list li {
list-style: none !important;
}
#moowoodle-pro-learners-hub .overview-box:nth-child(1) .overview-number {
color: var(--coe-navy) !important; /* Total Courses — navy */
}
#moowoodle-pro-learners-hub .overview-box:nth-child(2) .overview-number {
color: var(--coe-teal) !important; /* Enrolled — green/teal */
}
#moowoodle-pro-learners-hub .overview-box:nth-child(3) .overview-number {
color: var(--coe-purple) !important; /* Available — plum */
}
#moowoodle-pro-learners-hub .overview-number {
font-family: var(--coe-font-display) !important;
font-weight: 800 !important;
font-size: 30px !important;
line-height: 1 !important;
display: block !important;
}
#moowoodle-pro-learners-hub .overview-label {
color: var(--coe-text) !important;
font-size: 14px !important;
display: block !important;
margin-top: 4px !important;
}
/* Color-match each box's top border to its number */
#moowoodle-pro-learners-hub .overview-box:nth-child(1) { border-top-color: var(--coe-navy) !important; }
#moowoodle-pro-learners-hub .overview-box:nth-child(2) { border-top-color: var(--coe-teal) !important; }
#moowoodle-pro-learners-hub .overview-box:nth-child(3) { border-top-color: var(--coe-purple) !important; }
/* ═══════════════════════════════════════════════════════════
v8.42 — account buttons, pagination, editable fields,
refund policy, Learner Hub mobile fixes
═══════════════════════════════════════════════════════════ */
/* ── Save address / Save changes buttons → brand navy (no hover arrow) ── */
body.woocommerce-account .button[name="save_address"],
body.woocommerce-account button[name="save_address"],
body.woocommerce-account [name="save_address"].button,
body.woocommerce-account .woocommerce-Button[name="save_account_details"],
body.woocommerce-account button[name="save_account_details"],
body.woocommerce-account [name="save_account_details"],
body.woocommerce-account .woocommerce-address-fields button,
body.woocommerce-account .edit-account button[type="submit"],
.woocommerce #left-area .button[name="save_address"],
.woocommerce #left-area button[name="save_address"],
.woocommerce #left-area .woocommerce-Button[name="save_account_details"],
.woocommerce #left-area button[name="save_account_details"],
.woocommerce-account #left-area .woocommerce-Button.button {
background: var(--coe-navy) !important;
background-color: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 10px !important;
padding: 11px 24px !important;
font-family: var(--coe-font-body) !important;
font-weight: 700 !important;
font-size: 15px !important;
text-transform: none !important;
box-shadow: none !important;
transition: background 0.15s !important;
}
body.woocommerce-account .button[name="save_address"]:hover,
body.woocommerce-account button[name="save_address"]:hover,
body.woocommerce-account .woocommerce-Button[name="save_account_details"]:hover,
body.woocommerce-account [name="save_account_details"]:hover,
.woocommerce #left-area .button[name="save_address"]:hover,
.woocommerce #left-area button[name="save_address"]:hover,
.woocommerce #left-area .woocommerce-Button[name="save_account_details"]:hover,
.woocommerce-account #left-area .woocommerce-Button.button:hover {
background: #16315e !important;
background-color: #16315e !important;
color: #fff !important;
}
/* Remove Divi hover-arrow on these buttons */
body.woocommerce-account .button[name="save_address"]::after,
body.woocommerce-account button[name="save_address"]::after,
body.woocommerce-account [name="save_account_details"]::after,
body.woocommerce-account .button[name="save_address"]::before,
body.woocommerce-account [name="save_account_details"]::before,
.woocommerce #left-area .button[name="save_address"]::after,
.woocommerce #left-area button[name="save_address"]::after,
.woocommerce #left-area .woocommerce-Button[name="save_account_details"]::after,
.woocommerce-account #left-area .woocommerce-Button.button::after {
content: none !important;
display: none !important;
}
/* ── Editable form fields: make them clearly editable (not greyed) ── */
.woocommerce-account #left-area input.input-text,
.woocommerce-account #left-area input[type="text"],
.woocommerce-account #left-area input[type="email"],
.woocommerce-account #left-area input[type="password"],
.woocommerce-account #left-area input[type="tel"],
.woocommerce-account #left-area textarea,
.woocommerce-account #left-area select,
.woocommerce #left-area .woocommerce-address-fields input.input-text,
.woocommerce #left-area .woocommerce-EditAccountForm input.input-text {
background: #fff !important;
border: 1.5px solid var(--coe-border, #cbd5e1) !important;
border-radius: 8px !important;
color: var(--coe-text) !important;
padding: 10px 12px !important;
}
.woocommerce-account #left-area input.input-text:focus,
.woocommerce-account #left-area textarea:focus,
.woocommerce-account #left-area select:focus,
.woocommerce #left-area .woocommerce-address-fields input.input-text:focus {
border-color: var(--coe-navy) !important;
box-shadow: 0 0 0 3px rgba(13,51,73,0.12) !important;
outline: none !important;
background: #fff !important;
}
/* ── My Courses pagination: Previous/Next side by side, count above ── */
.woocommerce-account .pagination,
#left-area .pagination {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}
/* "Page X of Y" span spans full width ABOVE the buttons */
.woocommerce-account .pagination > span,
#left-area .pagination > span {
flex: 0 0 100% !important;
order: -1 !important; /* place above buttons */
text-align: center !important;
font-weight: 600 !important;
color: var(--coe-navy) !important;
margin-bottom: 4px !important;
}
.woocommerce-account .pagination button,
#left-area .pagination button {
background: var(--coe-navy) !important;
color: #fff !important;
border: 1.5px solid var(--coe-navy) !important;
border-radius: 8px !important;
padding: 9px 20px !important;
font-family: var(--coe-font-body) !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
.woocommerce-account .pagination button:hover:not([disabled]),
#left-area .pagination button:hover:not([disabled]) {
background: #16315e !important;
}
.woocommerce-account .pagination button[disabled],
#left-area .pagination button[disabled] {
background: #cbd5e1 !important;
border-color: #cbd5e1 !important;
color: #f8fafc !important;
cursor: not-allowed !important;
}
.woocommerce-account .pagination button::after,
#left-area .pagination button::after { content: none !important; display: none !important; }
/* ── Refund policy block on order-received ── */
.coe-refund-policy {
background: var(--coe-surface, #fff) !important;
border: 1px solid var(--coe-border, #e2e8f0) !important;
border-left: 5px solid var(--coe-purple, #542F5A) !important;
border-radius: 12px !important;
padding: 20px 24px !important;
margin: 20px 0 !important;
}
.coe-refund-policy h3 {
font-family: var(--coe-font-display) !important;
color: var(--coe-navy) !important;
font-size: 20px !important;
margin: 0 0 10px !important;
}
.coe-refund-subhead { margin: 6px 0 8px !important; color: var(--coe-navy) !important; }
.coe-refund-list { margin: 0 0 12px !important; padding-left: 20px !important; }
.coe-refund-list li { margin-bottom: 8px !important; line-height: 1.6 !important; }
.coe-refund-contact { margin: 0 !important; }
.coe-refund-contact a { color: var(--coe-teal) !important; font-weight: 600 !important; }
/* ═══ Learner Hub — MOBILE fixes (v8.42) ═══════════════════ */
@media (max-width: 767px) {
/* Overall hub text scale down */
#moowoodle-pro-learners-hub { font-size: 14px !important; }
#moowoodle-pro-learners-hub h2 { font-size: 20px !important; }
#moowoodle-pro-learners-hub h3,
#moowoodle-pro-learners-hub .section-title { font-size: 16px !important; }
#moowoodle-pro-learners-hub h5.title,
/* Enroll-header buttons (Cancel / Bulk Enroll / Add New) smaller so
they don't dominate the mobile view. */
#moowoodle-pro-learners-hub .enroll-header,
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper {
flex-wrap: wrap !important;
gap: 8px !important;
}
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper button.button,
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .button.wp-element-button,
#moowoodle-pro-learners-hub button.button.wp-element-button,
#moowoodle-pro-learners-hub button.button.bulk-enroll,
#moowoodle-pro-learners-hub button.button.red,
#moowoodle-pro-learners-hub .enroll-header button.button {
font-size: 12.5px !important;
padding: 7px 11px !important;
gap: 5px !important;
}
/* Shrink the icon inside those buttons on mobile too */
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .button i,
#moowoodle-pro-learners-hub .moowoodle-buttons-wrapper .button [class^="frontend-"] {
font-size: 12px !important;
}
/* Enroll header title smaller to make room for buttons */
#moowoodle-pro-learners-hub .enroll-header .section-title,
#moowoodle-pro-learners-hub .enroll-header h3 { font-size: 15px !important; }
/* Learners card layout: title (left, wraps) + icons (top-right).
A normal row — title flexes and wraps so the icons never overlap. */
/* Icons pinned to the top-right; the title starts BELOW them (padding-
top clears the icon row) so they can never overlap the text. */
#moowoodle-pro-learners-hub .learners-card .title-wrapper {
display: block !important;
position: relative !important;
padding-top: 40px !important; /* clears the 32px icon row + gap */
}
#moowoodle-pro-learners-hub .learners-card .learners-title {
width: 100% !important;
min-width: 0 !important;
word-break: break-word !important;
}
/* The title text is an
inside .heading-text — force it small
(it was inheriting Divi's large h5 size). */
#moowoodle-pro-learners-hub .learners-card .learners-title .heading-text h5,
#moowoodle-pro-learners-hub .learners-card .learners-title h5,
#moowoodle-pro-learners-hub .learners-card .heading-text h5 {
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
margin: 0 !important;
}
/* The "Courses" heading (separate h5.title) stays slightly larger */
#moowoodle-pro-learners-hub .learners-card > h5.title {
font-size: 14px !important;
font-weight: 700 !important;
margin: 8px 0 4px !important;
}
/* Course list items */
#moowoodle-pro-learners-hub .learners-card ol.course-list,
#moowoodle-pro-learners-hub .learners-card .course-list {
font-size: 12.5px !important;
line-height: 1.4 !important;
padding-left: 0 !important;
margin: 0 !important;
list-style: none !important;
}
#moowoodle-pro-learners-hub .learners-card ol.course-list li,
#moowoodle-pro-learners-hub .learners-card .course-list li {
font-size: 12.5px !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
/* Icon button container: absolutely pinned to the card's top-right */
#moowoodle-pro-learners-hub .view-btn-container {
position: absolute !important;
top: 0 !important;
right: 0 !important;
display: flex !important;
flex-direction: row !important;
gap: 6px !important;
align-items: center !important;
z-index: 2 !important;
}
/* Icon buttons: fixed size, glyph centered */
#moowoodle-pro-learners-hub .edit-button,
#moowoodle-pro-learners-hub .view-btn-container button {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 32px !important;
line-height: 1 !important;
}
/* Center the glyph span + its ::before icon */
#moowoodle-pro-learners-hub .edit-button .frontend-edit,
#moowoodle-pro-learners-hub .view-btn-container button .frontend-eye,
#moowoodle-pro-learners-hub .view-btn-container button > span,
#moowoodle-pro-learners-hub .edit-button > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
font-size: 15px !important;
}
#moowoodle-pro-learners-hub .edit-button .frontend-edit::before,
#moowoodle-pro-learners-hub .view-btn-container button .frontend-eye::before {
display: block !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Back button not squished — fixed size, centered glyph */
#moowoodle-pro-learners-hub .back-button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
flex: 0 0 36px !important;
padding: 0 !important;
}
/* Enrolled-students table / unenroll spacing on mobile */
#moowoodle-pro-learners-hub .enroll-table td,
#moowoodle-pro-learners-hub .moowoodle-table td {
padding: 8px 6px !important;
font-size: 13px !important;
}
#moowoodle-pro-learners-hub .unenroll-button {
font-size: 12.5px !important;
padding: 6px 12px !important;
white-space: nowrap !important;
margin: 4px 0 !important;
}
/* Enroll form inputs full-width, comfortable */
#moowoodle-pro-learners-hub .enroll-section input,
#moowoodle-pro-learners-hub .enroll-section select {
font-size: 16px !important; /* avoid iOS zoom */
padding: 10px !important;
}
#moowoodle-pro-learners-hub .button.enroll,
#moowoodle-pro-learners-hub form .button.wp-element-button {
font-size: 14px !important;
padding: 10px 20px !important;
}
/* Overview stat boxes: smaller numbers on mobile */
#moowoodle-pro-learners-hub .overview-number { font-size: 24px !important; }
#moowoodle-pro-learners-hub .overview-label { font-size: 12.5px !important; }
}
/* ── Learner Hub "Select Courses" (react-select) dropdown fix ──
The circled "box" was the inner input wrapper (react-select renders
the input inside a CSS-grid cell that showed a border/height). Target
the stable .course-select container and flatten the inner wrappers so
only ONE clean control box shows. */
#moowoodle-pro-learners-hub .course-select {
width: 100% !important;
}
/* The single control box */
#moowoodle-pro-learners-hub .course-select > div:first-of-type {
min-height: 44px !important;
border: 1.5px solid var(--coe-border, #cbd5e1) !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: none !important;
}
/* Value container: normal padding */
#moowoodle-pro-learners-hub .course-select > div:first-of-type > div:first-child {
padding: 2px 12px !important;
}
/* The grid cell that holds placeholder + input: remove any border/box and
let it size naturally so no second box appears over the text. */
#moowoodle-pro-learners-hub .course-select [class*="-Input"],
#moowoodle-pro-learners-hub .course-select [class*="-input"],
#moowoodle-pro-learners-hub .course-select .css-19bb58m,
#moowoodle-pro-learners-hub .course-select [data-value] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
#moowoodle-pro-learners-hub .course-select input[id^="react-select"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* Placeholder sits cleanly, not overlapped */
#moowoodle-pro-learners-hub .course-select [class*="-placeholder"] {
color: #64748b !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── Account-created success banner (v8.48) ── */
.coe-account-created-notice {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100000;
max-width: 92vw;
animation: coeAcnIn 0.3s ease;
}
@keyframes coeAcnIn {
from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.coe-account-created-notice.coe-acn-hide { opacity: 0; transition: opacity 0.3s ease; }
.coe-account-created-notice .coe-acn-inner {
display: flex;
align-items: center;
gap: 12px;
background: var(--coe-teal, #1e7a6e);
color: #fff;
padding: 14px 18px;
border-radius: 12px;
box-shadow: 0 6px 24px rgba(13,51,73,0.22);
font-family: var(--coe-font-body, sans-serif);
font-size: 15px;
font-weight: 600;
}
.coe-account-created-notice .coe-acn-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
font-size: 13px;
flex: 0 0 24px;
}
.coe-account-created-notice .coe-acn-close {
background: none; border: none; color: #fff;
font-size: 22px; line-height: 1; cursor: pointer;
padding: 0 2px; margin-left: 4px; opacity: 0.85;
}
.coe-account-created-notice .coe-acn-close:hover { opacity: 1; }