/* =====================================================================
   Edufost Genetic Wellness — WordPress glue

   site.css holds the design system. This file adds only what WordPress,
   Gutenberg, Elementor and WooCommerce need on top of it, written
   against the same custom properties so a Customizer colour change
   flows through here too.

   Contents
     1. WordPress core classes
     2. Editor / prose
     3. Blog, archives, pagination
     4. Comments
     5. Widgets and sidebars
     6. Elementor
     7. WooCommerce
     8. Additions used by the theme's widgets
   ===================================================================== */

/* 1. WordPress core classes ------------------------------------------ */
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignwide { width: min(100%, var(--wide)); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption,
figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

.sticky .post__body h3::before { content: "\2605"; margin-right: 6px; color: var(--g600); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bypostauthor > .comment-body { border-left: 3px solid var(--g600); }

.skip-link:focus { left: 16px; top: 16px; }

/* 2. Editor / prose --------------------------------------------------- */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 1.6em; }
.prose h3 { font-size: clamp(20px, 2.2vw, 25px); margin-top: 1.4em; }
.prose h4 { font-size: 18px; margin-top: 1.3em; }
.prose p { color: var(--ink-2); line-height: 1.8; }
.prose a { color: var(--g700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--g900); }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-2); line-height: 1.8; }
.prose li + li { margin-top: .4em; }
.prose img, .prose figure { border-radius: var(--r); overflow: hidden; }
.prose blockquote {
  margin: 1.6em 0; padding: 20px 24px; border-left: 3px solid var(--g600);
  background: var(--g50); border-radius: 0 var(--r) var(--r) 0; font-size: 18px; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; font-size: .9em; }
.prose pre { background: var(--ink); color: #e6f4ec; border-radius: var(--r); padding: 20px; overflow: auto; }
.prose pre code { background: none; border: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--g50); font-family: var(--font-display); font-weight: 700; }

.page-links { display: flex; gap: 8px; align-items: center; margin-top: 2em; font-weight: 600; }
.page-links a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; }
.page-links a:hover { border-color: var(--g600); color: var(--g700); }

/* 3. Blog, archives, pagination --------------------------------------- */
.page-hero--simple { grid-template-columns: 1fr; }
.page-hero--simple .page-hero__copy { max-width: 820px; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.breadcrumbs a { color: var(--g700); font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs__sep { color: var(--muted-2); }

.blog-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.post-grid--list { grid-template-columns: 1fr; }
@media (max-width: 900px) { .blog-split { grid-template-columns: 1fr; } }

.entry__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.entry__meta span { display: inline-flex; align-items: center; gap: 6px; }
.entry__meta .ico { width: 15px; height: 15px; color: var(--g600); }
.entry__meta b { color: var(--ink); font-weight: 700; }

.entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2em; }
.entry__tags .tag:hover { border-color: var(--g600); color: var(--g700); }

.entry-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-block: clamp(32px, 5vw, 56px); }
.entry-nav .nav-links { display: contents; }
.entry-nav a { display: block; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .2s, transform .2s; font-family: var(--font-display); font-weight: 700; color: var(--g900); }
.entry-nav a:hover { border-color: var(--g600); transform: translateY(-2px); }
.entry-nav a span { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.entry-nav .nav-next { text-align: right; }
@media (max-width: 640px) { .entry-nav { grid-template-columns: 1fr; } .entry-nav .nav-next { text-align: left; } }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 5vw, 56px); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px;
  justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--g900); transition: all .2s;
}
.pagination .page-numbers:hover { border-color: var(--g600); color: var(--g700); }
.pagination .page-numbers.current { background: var(--g700); border-color: var(--g700); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.pagination .ico { width: 15px; height: 15px; }

.search-form { position: relative; display: flex; align-items: center; width: 100%; }
.search-form .ico { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-form .search-field {
  width: 100%; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 18px 13px 46px; font-size: 15px; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
}
.search-form .search-field:focus { border-color: var(--g600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }

/* 4. Comments --------------------------------------------------------- */
.comments { padding-block: clamp(24px, 4vw, 40px); }
.comments__title { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 24px; }
.comments__list, .comments__list .children { list-style: none; padding: 0; margin: 0; }
.comments__list .children { padding-left: clamp(16px, 4vw, 48px); margin-top: 18px; }
.comments__list li { margin-bottom: 18px; }
.comment-body { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; }
.comment-author { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; }
.comment-author img { border-radius: 50%; }
.comment-meta { font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; }
.comment-content p { color: var(--ink-2); line-height: 1.7; }
.comment-reply-link { font-size: 13px; font-weight: 700; color: var(--g700); }
.comments__closed { color: var(--muted); font-size: 14px; }
.comment-form { display: grid; gap: 16px; margin-top: 28px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 15px; outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--g600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.comment-form .form-submit { margin: 0; }

/* 5. Widgets and sidebars --------------------------------------------- */
.blog-sidebar { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 20px); }
.widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.widget__title { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--g700); margin-bottom: 14px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.widget li a { font-size: 14.5px; color: var(--ink-2); }
.widget li a:hover { color: var(--g700); }
.footer__col .widget { background: none; border: 0; padding: 0; }
.footer__col .widget__title { color: #fff; }
.footer__col .widget li a { color: #a9c4b3; }
.footer__col .widget li a:hover { color: #fff; }
.footer__legal { display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* 6. Elementor -------------------------------------------------------- */
/* Elementor wraps every widget; make ours behave like normal blocks. */
.edufost-w { width: 100%; }
.edufost-w > .container { padding-inline: 0; }
.elementor-widget-container > .edufost-w { margin: 0; }

/* Elementor's editor adds outlines that fight the hero's overflow. */
.elementor-element .hero { border-radius: inherit; }

/* Sections built in Elementor bring their own padding. */
body.is-elementor .site-main > .elementor { padding: 0; }

/* Keep design-system full-bleed pieces full-bleed inside Elementor. */
.edufost-w--cta .cta-band,
.edufost-w--hero .hero { margin-inline: 0; }

/* 7. WooCommerce ------------------------------------------------------ */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  list-style: none; margin: 0 0 24px; padding: 16px 20px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--g50); font-size: 14.5px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.woocommerce-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.woocommerce-message { border-color: rgba(22, 163, 74, .3); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* Product grid.
   Selectors are deliberately tag-agnostic: `.products`, never `ul.products`.
   WooCommerce's classic loop emits a <ul>, but Elementor's products widget
   and the newer block loop emit a <div> with the same class. Anchoring to
   the tag meant every rule below silently stopped matching on the Order Your
   Kit page: the art box fell back to the 110px icon tile from site.css while
   still holding a 500px photograph, so the image spilled straight over the
   title, the description and the price.
   rather than our added classes, so the storefront still lays out correctly if
   a Woo update changes which class filters fire. */
.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1024px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .products { grid-template-columns: 1fr; } }
.products::before, .products::after { display: none; }

.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.products li.product:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(21, 128, 61, .12); border-color: rgba(22, 163, 74, .45); }

/* The image sits in its own band; a real product photo needs more room than
   the icon-sized .kit__art of the static mock-up. */
.products li.product .kit__art { height: 220px; display: block; background: var(--paper-2); overflow: hidden; }
.products li.product .kit__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; margin: 0; }
.products li.product:hover .kit__art img { transform: scale(1.04); }

.products li.product .kit__body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.products li.product .woocommerce-loop-product__link { display: contents; }
.kit__cat { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--g700); }
.kit .woocommerce-loop-product__title { font-size: 19px; letter-spacing: -.02em; margin: 2px 0 6px; padding: 0; }
.kit__desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.kit .price {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--g900);
  display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
}
.kit .price del { color: var(--muted-2); font-size: 15px; font-weight: 600; margin-right: 8px; }
.kit .price ins { text-decoration: none; }
.kit .star-rating { font-size: 13px; color: var(--amber); margin: 2px 0 6px; }
.kit .add_to_cart_button, .kit .button { margin-top: 12px; }

.single-product .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .single-product .product { grid-template-columns: 1fr; } }
.single-product .woocommerce-product-gallery { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.single-product .product_title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; }
.single-product .summary .price { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: var(--g900); margin: 12px 0 18px; }
.single-product .woocommerce-product-details__short-description { color: var(--ink-2); line-height: 1.75; margin-bottom: 20px; }
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.single-product .quantity input { width: 84px; height: 48px; text-align: center; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-weight: 700; }
.single-product .single_add_to_cart_button {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px; border: 0; cursor: pointer;
  border-radius: 999px; background: linear-gradient(135deg, var(--g600), var(--g900)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.single-product .single_add_to_cart_button:hover { filter: brightness(1.06); }
.single-product .product_meta { font-size: 13px; color: var(--muted); display: grid; gap: 6px; margin-top: 18px; }
.trust-band--product { margin-top: 20px; }
.wc-whatsapp { margin-top: 10px; }

.woocommerce-tabs { margin-top: clamp(40px, 6vw, 72px); }
.woocommerce-tabs .tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.woocommerce-tabs .tabs li a { display: inline-block; padding: 12px 18px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.woocommerce-tabs .tabs li.active a { color: var(--g700); border-bottom-color: var(--g600); }

.woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 14.5px; }
.woocommerce table.shop_table th { background: var(--g50); font-family: var(--font-display); font-weight: 700; }
.woocommerce .cart-collaterals { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .woocommerce .cart-collaterals { grid-template-columns: 1fr; } }
.woocommerce .cart_totals { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }

.woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 16px; }
.woocommerce form .form-row label { font-size: 13px; font-weight: 600; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single {
  width: 100%; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 15px; height: auto; outline: none;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--g600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-top: 20px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.woocommerce #place_order, .woocommerce .checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 28px; border: 0; cursor: pointer; width: 100%;
  border-radius: 999px; background: linear-gradient(135deg, var(--g600), var(--g900)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation li a { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--g700); border-color: var(--g700); color: #fff; }

.header__cart { position: static; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--g50); border: 1px solid var(--line); color: var(--g900); box-shadow: none; }
.header__cart:hover { border-color: var(--g600); }
.header__cart .ico { width: 19px; height: 19px; }
.header__cart .cart-fab__count { top: -4px; right: -4px; }

.woocommerce .onsale { display: none; }
.woocommerce-result-count { color: var(--muted); font-size: 14px; }
.woocommerce-ordering select { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13.5px; background: #fff; }
.woocommerce-notices-wrapper:empty { display: none; }

/* 8. Additions used by the theme's widgets ---------------------------- */
.video__facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: var(--g950); overflow: hidden; display: block; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.video__facade:hover img { transform: scale(1.04); opacity: .85; }
.video__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--g900); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .25s;
}
.video__facade:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }
.video__play .ico { width: 24px; height: 24px; margin-left: 3px; }

.story__rating { margin-left: auto; display: inline-flex; gap: 2px; color: var(--amber); }
.story__rating .ico { width: 15px; height: 15px; }
.ico--fill { fill: currentColor; }

.mega__col { min-width: 0; }
.mega__links--sub { display: grid; gap: 2px; }
.header--static { position: static; }

/* The floating social rail overlaps Elementor's editor handles. */
body.elementor-editor-active .social-bar { display: none; }

/* 9. WooCommerce Blocks (cart and checkout) ---------------------------
   Woo 8+ ships block-based Cart and Checkout pages that bring their own
   stylesheet. Rather than fight it, we only re-point the pieces that
   carry brand: the type, the primary button and the corner radius. */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title,
.wc-block-cart__submit-container .wc-block-components-title {
  font-family: var(--font-display); letter-spacing: -.02em;
}
.wc-block-components-button:not(.is-link) {
  background: linear-gradient(135deg, var(--g600), var(--g900));
  border-radius: 999px; font-family: var(--font-display); font-weight: 700;
  color: #fff; border: 0; min-height: 50px;
}
.wc-block-components-button:not(.is-link):hover { filter: brightness(1.06); }
.wc-block-components-button__text { color: inherit; }
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  border-radius: 12px !important; font-family: var(--font-body) !important;
}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .15) !important; }
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__totals-title ~ *,
.wp-block-woocommerce-cart-order-summary-block {
  border-radius: var(--r);
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display); font-weight: 800; color: var(--g900);
}
.wc-block-components-product-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* The order summary, which was unreadable on a desktop.
   Measured at a 1440px viewport: Woo caps .wc-block-checkout at 780px, which
   left the sidebar 273px, the summary 255px and the product-name column 128px
   — so "Gold DNA Advance Testing Program — Family Pack (4 people)" wrapped to
   roughly one word per line and the summary ran down the page like a ribbon.
   Giving the two-column layout the width the design already uses fixes the
   cause rather than the symptom. */
@media (min-width: 1025px) {
  .wc-block-checkout,
  .wp-block-woocommerce-checkout { max-width: var(--container, 1360px); }

  .wc-block-checkout__sidebar { flex: 0 0 390px; max-width: 390px; }
  .wc-block-checkout__main { min-width: 0; }
}

/* And the row itself: a fixed image, a flexible middle that is allowed to
   shrink, and a price that never wraps. Without min-width:0 the middle column
   keeps its min-content width and pushes the price out of the card. */
.wc-block-components-order-summary-item {
  align-items: flex-start; gap: 14px;
}
.wc-block-components-order-summary-item__image { flex: 0 0 56px; }
.wc-block-components-order-summary-item__description {
  min-width: 0; flex: 1 1 auto;
  word-break: normal; overflow-wrap: anywhere;
}
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto; white-space: nowrap; text-align: right;
}
.wc-block-components-order-summary-item .wc-block-components-product-name {
  display: block; line-height: 1.4; font-size: 14px;
}
/* The long programme description under each line is noise in a summary. */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.wc-block-components-notice-banner { border-radius: var(--r); }

/* 10. Forms ------------------------------------------------------------ */
.edufost-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.edufost-form .field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.edufost-form .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .edufost-form .form-grid { grid-template-columns: 1fr; } }

.edufost-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.edufost-form label span[aria-hidden] { color: var(--g600); }
.edufost-form .input {
  width: 100%; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; font: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.edufost-form .input:focus { border-color: var(--g600); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.edufost-form textarea.input { resize: vertical; min-height: 120px; }
.edufost-form select.input { appearance: none; cursor: pointer; background-image: none; }

.edufost-form .consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; display: flex; }
.edufost-form .consent input { margin-top: 3px; accent-color: var(--g600); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.edufost-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.edufost-form__actions { margin-top: 20px; }
.edufost-form__note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.edufost-form.is-sending { opacity: .75; pointer-events: none; }

.edufost-form__status {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
}
.edufost-form__status.is-ok { background: var(--g50); border: 1px solid rgba(22, 163, 74, .3); color: var(--g800); }
.edufost-form__status.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.form-plain { background: none; border: 0; padding: 0; }

/* 11. Elementor-built header and footer parts -------------------------- */
.edufost-part--header { position: relative; z-index: 60; }
/* The old container-built header parts need their widget wrappers to be
   flex rows. The complete-header widget must not be one — it renders the
   top bar, the header and the drawer as siblings, and making them flex
   items lays them out side by side. */
.edufost-part--header .edufost-w:not(.edufost-w--site-header) { display: flex; align-items: center; }
.edufost-part--footer { background: var(--g950); color: #fff; }
.edufost-part--footer a { color: #a9c4b3; }
.edufost-part--footer a:hover { color: #fff; }
.edufost-part--footer h4 { color: #fff; }
.edufost-part--footer .footer__col { padding: 0; }
.edufost-part--footer .footer__bottom { border: 0; padding: 0; }
.edufost-w--nav-mega { display: flex; align-items: center; gap: 12px; }
.edufost-w--contact-bar .topbar__left { flex-wrap: wrap; }
.edufost-w--contact-bar .topbar__link,
.edufost-w--contact-bar .topbar__badge { color: inherit; }
.edufost-inline-links { gap: 14px; }

/* 12. Polish ----------------------------------------------------------
   Fixes for the Elementor-built header and footer, which sit in plain
   containers rather than the .topbar / .footer wrappers the design
   system styles. */

/* Top bar: the container paints the green, so the inner widget must not
   repaint it, and its links need the light-on-dark treatment. */
.edufost-part--header .edufost-w--contact-bar,
.edufost-part--header .edufost-w--nav-plain { background: none; }
/* The :not() matters. This rule was written for the old container-built
   header, where the contact-bar widget genuinely needed to wrap. The
   complete-header widget renders the design system's own top bar, which is
   a fixed 40px tall with overflow hidden — letting it wrap stacked the
   tagline and the helpline onto two lines and clipped both in half. */
.edufost-part--header .edufost-w:not(.edufost-w--site-header) .topbar__left,
.edufost-part--header .edufost-w:not(.edufost-w--site-header) .topbar__right {
  display: flex; align-items: center; gap: 18px; min-width: 0; flex-wrap: wrap;
  font-size: 12.5px; color: #eafff1;
}
.edufost-part--header .topbar__badge { color: #fff; font-weight: 700; }
.edufost-part--header .topbar__link { color: #eafff1; opacity: .92; }
.edufost-part--header .topbar__link:hover { opacity: 1; }
.edufost-part--header .topbar__link--hl {
  background: rgba(255, 255, 255, .16); padding: 5px 14px; border-radius: 999px; opacity: 1;
}
.edufost-part--header .topbar__link--hl:hover { background: #fff; color: var(--g900); }

/* Header row: keep the white bar crisp and the nav centred. */
.edufost-part--header .e-con-inner > .elementor-element { min-width: 0; }
.edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-nav-menu { flex: 1 1 auto; }
.edufost-part--header .edufost-w--nav { justify-content: center; }
.edufost-part--header .nav { margin-inline: auto; }
.edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-site-brand,
.edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-cart-icon { flex: 0 0 auto; }
.edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-contact-bar { flex: 1 1 auto; }

/* Mega panels must escape the header container, not be clipped by it. */
.edufost-part--header .e-con,
.edufost-part--header .e-con-inner,
.edufost-part--header .elementor-widget-container { overflow: visible; }

/* Footer: columns share the width evenly instead of leaving a right gap. */
.edufost-part--footer .e-con-inner { align-items: flex-start; }
.edufost-part--footer .e-con-inner > .elementor-element.elementor-widget-edufost-site-brand { flex: 1 1 260px; max-width: 340px; }
.edufost-part--footer .e-con-inner > .elementor-element.elementor-widget-edufost-nav-menu { flex: 1 1 170px; }
.edufost-part--footer .e-con-inner > .elementor-element.elementor-widget-edufost-social-icons { flex: 0 0 auto; margin-left: auto; }
.edufost-part--footer .footer__col h4 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: 14px;
}
.edufost-part--footer .footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.edufost-part--footer .footer__col li a { font-size: 14px; }
.edufost-part--footer .footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px;
  font-size: 13px; color: #a9c4b3; width: 100%;
}
@media (max-width: 900px) {
  .edufost-part--footer .edufost-w--social { margin-left: 0; }
}

/* 13. DNA report login ------------------------------------------------- */
.login-card { max-width: 520px; margin-inline: auto; text-align: left; }
.login-card__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--g50); color: var(--g700); margin-bottom: 16px;
}
.login-card__icon .ico { width: 26px; height: 26px; }
.login-card__intro { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.login-card__meta { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.edufost-login-form { display: grid; gap: 16px; }
.edufost-login-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.edufost-login-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.edufost-login-form .input[readonly] { background: var(--line-2); color: var(--muted); cursor: not-allowed; }
.input--code {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: .5em; text-align: center; padding-block: 14px;
}
.edufost-login-form .btn-row { margin-top: 4px; }

/* 14. Contact page ------------------------------------------------------
   The form and the info stack sit in one Elementor row; give the form the
   larger share and stop the cards stretching full width on their own. */
.e-con-inner > .elementor-element.elementor-widget-edufost-form { flex: 1 1 58%; min-width: 0; }
.e-con-inner > .elementor-element.elementor-widget-edufost-contact-info { flex: 1 1 38%; min-width: 0; }
.edufost-w--form, .edufost-w--contact { min-width: 0; }
.edufost-w--contact .info-stack { display: grid; gap: 16px; }
.edufost-w--contact .info {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px;
}
.edufost-w--contact .info h3 { font-size: 17px; margin: 10px 0 6px; }
.edufost-w--contact .info p { font-size: 14px; color: var(--muted); }
.edufost-w--contact .info__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--g50); color: var(--g700);
}
.edufost-w--contact .info__icon .ico { width: 20px; height: 20px; }
.edufost-w--contact .info__links { display: grid; gap: 8px; margin-top: 10px; }
.edufost-w--contact .info__links a {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2);
}
.edufost-w--contact .info__links a:hover { color: var(--g700); }
.edufost-w--contact .info__links .ico { width: 16px; height: 16px; color: var(--g600); flex-shrink: 0; }
.edufost-w--contact .info--dark { background: linear-gradient(140deg, var(--g950), var(--g800)); border-color: transparent; }
.edufost-w--contact .info--dark h3 { color: #fff; }
.edufost-w--contact .info--dark p,
.edufost-w--contact .info--dark .info__links a { color: #c8e6d2; }
.edufost-w--contact .info--dark .info__links a:hover { color: #fff; }
.edufost-w--contact .info--dark .info__icon { background: rgba(255, 255, 255, .14); color: #fff; }
@media (max-width: 860px) {
  .e-con-inner > .elementor-element.elementor-widget-edufost-form,
  .e-con-inner > .elementor-element.elementor-widget-edufost-contact-info { flex-basis: 100%; }
}

/* Panels in a two-up row (Join us) need the same treatment. */
.e-con-inner > .elementor-element.elementor-widget-edufost-panel { flex: 1 1 320px; min-width: 0; }

/* 15. Header corrections ----------------------------------------------
   The mega panel is a full-width bar designed for two filled columns. A
   menu with only a few children left most of it empty (and looked
   lopsided), so a single-column panel now hugs its content and drops
   under its own nav item instead of stretching edge to edge. */
.nav__item:has(.mega__col:only-child) { position: relative; }

.nav__item:has(.mega__col:only-child) .mega {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  min-width: 340px;
  max-width: min(680px, 92vw);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 24px 48px -20px rgba(15, 30, 20, .28);
}
.nav__item:has(.mega__col:only-child) .mega__in {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 16px;
}

/* Two or more children in the panel: keep the wide bar, but never let a
   column collapse to nothing. */
.mega__in { align-items: start; }
.mega__col { min-width: 0; }

/* Header height. The Elementor container adds its own padding on top of
   --header-h, which pushed the bar past 120px and ate the fold. */
.edufost-part--header .e-con > .e-con-inner { padding-block: 0; }
.edufost-part--header .edufost-w { min-height: 0; }
.edufost-part--header .brand { padding-block: 10px; }
.edufost-part--header .nav__link,
.edufost-part--header .nav__trigger { padding-block: 8px; }

/* Top bar: a left group and a right group, not one long run of links. */
.edufost-part--header .edufost-w--contact-bar { width: 100%; }
.edufost-part--header .edufost-w--contact-bar .topbar__left { gap: 16px; }
.edufost-w--contact-bar--right .topbar__left { justify-content: flex-end; }

/* Mobile. The nav is hidden below 1180px, so its wrapper must stop
   claiming flex space or the logo and burger drift apart. */
@media (max-width: 1180px) {
  .edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-nav-menu {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .edufost-part--header .edufost-w--nav { justify-content: flex-end; }
}

@media (max-width: 860px) {
  .edufost-part--header .e-con-inner { gap: 10px; }
  .edufost-part--header .topbar__badge { display: none; }
  .edufost-part--header .brand { font-size: 17px; }
  .edufost-part--header .brand__mark { width: 34px; height: 34px; }
}

@media (max-width: 640px) {
  /* One tidy line: phone on the left, buy button on the right. */
  .edufost-part--header .edufost-w--contact-bar .topbar__left {
    gap: 10px;
    font-size: 11.5px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .edufost-part--header .topbar__link--hl { padding: 4px 10px; font-size: 11px; }
  .edufost-part--header .e-con > .e-con-inner { padding-inline: 14px; }
  .header__cart, .edufost-w--cart .cart-fab { width: 38px; height: 38px; }
}

/* Below 480px the top bar keeps only what a phone screen can hold. */
@media (max-width: 480px) {
  .edufost-part--header .edufost-w--contact-bar .topbar__link:not(.topbar__link--hl) { display: none; }
  .edufost-w--contact-bar--right .topbar__left { justify-content: center; }
}

/* The design system hides every .topbar__link below 640px, which is right for
   the built-in bar but takes the buy button with it in the Elementor header —
   and that button is the one thing worth keeping on a phone. */
@media (max-width: 640px) {
  .edufost-part--header .topbar__left .topbar__link--hl {
    display: inline-flex;
    margin-inline: auto;
  }
  .edufost-part--header .edufost-w--contact-bar--right .topbar__left { justify-content: center; }
  /* The empty left bar should not hold open a row of its own. */
  .edufost-part--header .e-con-inner > .elementor-element.elementor-widget-edufost-contact-bar:first-child { display: none; }
}

/* ---------------------------------------------------------------------
   16. The complete-header widget

   The header is one widget rendering the theme's own markup, so nothing
   here restyles it — these rules only stop Elementor's element and
   container defaults from interfering. Every one of them undoes
   something Elementor adds, rather than adding anything of its own.
   --------------------------------------------------------------------- */

/* Elementor gives every widget a width and the container a gutter. A
   header has to span the viewport, so both are removed — otherwise the
   top bar is inset from the edges and the header looks, in the client's
   words, crooked on the right. */
.elementor-widget-edufost-site-header,
.elementor-widget-edufost-site-header > .elementor-widget-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.edufost-part--header:has(.edufost-w--site-header) > .e-con,
.edufost-part--header:has(.edufost-w--site-header) > .e-con > .e-con-inner {
  max-width: none;
  padding: 0;
  margin: 0;
  display: block;
}

/* Two classes, to beat .edufost-part--header .edufost-w above. The
   wrapper has to disappear entirely: a sticky header inside a flex item
   sticks to that item, not to the viewport. */
.edufost-part--header .edufost-w--site-header,
.edufost-w--site-header { display: contents; }

/* A transform, filter or backdrop-filter on an ancestor makes
   position:fixed resolve against that ancestor instead of the viewport.
   Elementor sets transforms on containers for its motion effects, which
   would leave the sticky header stuck partway down the page and trap the
   mobile drawer inside the header strip. */
.edufost-part--header .e-con,
.edufost-part--header .e-con-inner,
.edufost-part--header .elementor-widget-wrap {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* Inside the editor the header must not be sticky, or it covers the
   canvas and cannot be selected. */
.elementor-editor-active .edufost-w--site-header .header,
.elementor-editor-preview .edufost-w--site-header .header { position: relative; top: auto; }

/* The cart button is the one thing the WordPress header has that the
   original markup did not, so it is the one thing that can push the
   actions group wider than the design allows.

   It used to be hidden between 1025px and 1300px, where the menu is still
   on screen and the row is genuinely full. That band is laptops — 1280x800,
   and 1366 at 110% zoom — so the fix was taking the cart off a shop for a
   large share of real visitors, which is the same mistake as hiding it on
   phones, one screen size up.

   So it shrinks instead of going. A 34px circle with the count still on it
   gives back 14px of the row, and 6px more from the gap, which is enough. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .header__actions { gap: 8px; }
  .header__actions .header__cart { width: 34px; height: 34px; }
  .header__actions .header__cart .ico { width: 16px; height: 16px; }
  .header__actions .header__cart .cart-fab__count {
    top: -5px; right: -5px; min-width: 16px; height: 16px;
    font-size: 10px; line-height: 16px;
  }
}

/* The design system swaps the menu for the burger at 1180px. With this
   site's nine top-level items the header actually needs 1233px, so between
   1181 and 1233 the menu was still on screen and the row was running past
   the edge — the "Buy the program" button was the part that fell off.
   The swap happens 60px earlier here. Measured, not guessed: 1230px is the
   widest window that clipped. */
@media (max-width: 1240px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
  .header { --header-h: 64px; }
}

/* ---------------------------------------------------------------------
   The top bar's priority order

   Adding "Become a co-partner" pushed the row past the 1360px container,
   and .topbar__in clips with overflow:hidden — so the overflow showed up
   as text chopped through the middle of a letter rather than as anything
   a reader could interpret.

   The row now has an explicit priority. The links on the right are what
   people click, so they never shrink. The tagline on the left is
   decorative, so it takes the squeeze: it truncates with an ellipsis, and
   below 1500px it steps out altogether. Nothing is ever half-drawn.
   --------------------------------------------------------------------- */

.topbar__left { min-width: 0; flex: 0 1 auto; }
.topbar__right { flex: 0 0 auto; }

.topbar__badge { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.topbar__badge-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__badge .ico { flex: 0 0 auto; }

/* The helpline is a phone number — half of one is worse than none. */
.topbar__left .topbar__link { flex: 0 0 auto; }

@media (max-width: 1500px) {
  .topbar__badge { display: none; }
}



/* The top bar clips its children, so the panel is taken out of that flow
   and hung from the bar itself. */

/* .topbar__right sets nowrap so its links never break mid-phrase. The panel
   is a block of prose and a form, so it has to opt back out — inherited
   nowrap ran the copy straight out of the box. */

.partner-quick__title {
  margin: 0 0 4px; font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--g900, #14532d);
}
.partner-quick__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted, #5a6a61); }

.form--quick { display: grid; gap: 10px; }
.form--quick .form__row { margin: 0; display: grid; gap: 4px; }
.form--quick label { font-size: 12px; font-weight: 600; color: var(--ink, #0f1f16); }
.form--quick input, .form--quick select {
  width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line, #dfe7e1); border-radius: 9px;
  background: #fff; color: inherit;
}
.form--quick .form__actions { margin: 4px 0 0; }
.form--quick .btn { width: 100%; justify-content: center; }

/* The compact form is no longer in the header — it is a link now, and the
   form lives on its own page. These stay because the shortcode still takes
   compact="yes", which is useful in a narrow column on that page. */

/* Off-screen rather than display:none, because some bots skip hidden fields
   and the point is that they fill it in. Duplicated from the portal
   stylesheet on purpose: that one only loads on portal pages, and this form
   appears in the header of every page. */
.form__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.partner-quick__note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted, #5a6a61); text-align: center; }
.partner-quick__more { margin: 12px 0 0; font-size: 12.5px; text-align: center; }
.partner-quick__more a { color: var(--g700, #15803d); }

/* Below the mega-menu breakpoint the top bar is already shedding links, so
   the panel goes with them — the same form is in the drawer. */
/* The drawer's copy of it. */

/* ---------------------------------------------------------------------
   19. Sign in — one page, two ways in

   Everyone signs in here now: clients, co-partners, associates,
   counselors, the laboratory and the clinicians. A one-time code suits
   clients, who have a report ID and no password; a password suits staff,
   several of whom have a generated email address a code could never
   reach. Both are offered rather than guessing which visitor this is.
   --------------------------------------------------------------------- */

.login-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  background: var(--g50);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.login-tabs__btn {
  flex: 1 1 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.login-tabs__btn:hover { color: var(--g900); }
.login-tabs__btn.is-active {
  background: #fff;
  color: var(--g900);
  box-shadow: 0 2px 8px rgba(15, 31, 22, .08);
}
.login-tabs__btn:focus-visible { outline: 2px solid var(--g600); outline-offset: 2px; }

/* The signed-in panel names the role, because twelve of them land here. */
.login-card__role {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g600);
}
.login-card__lead {
  margin: 6px 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin-inline: auto;
}

.login-card__hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.login-card__remember {
  margin: 10px 0 0;
  font-size: 13.5px;
}
.login-card__remember label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

/* Without JavaScript both panels stay on screen, each clearly labelled by
   its own note, so the page still works. The tabs are the enhancement. */
.edufost-login-form[hidden] { display: none; }
.no-js .login-tabs { display: none; }
.no-js .edufost-login-form[hidden] { display: block; }
.no-js .edufost-login-form + .edufost-login-form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

@media (max-width: 420px) {
  .login-tabs { flex-direction: column; border-radius: 16px; }
  .login-tabs__btn { border-radius: 12px; }
}

/* --- Programme comparison ------------------------------------------- */

/* The scroll container needs both of these. Elementor puts the widget in a
   grid, and a grid item's default min-width is auto — so the container grew
   to the table's 460px min-content width and pushed the whole page sideways
   instead of scrolling inside itself. Measured at 320px: 98px of page
   overflow, exactly 418 minus the viewport, on every width below 480. */
.compare-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%;
}
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  min-width: 520px; font-size: 15px;
  background: #fff; border: 1px solid var(--line, #dfe7e1);
  border-radius: var(--r, 18px); overflow: hidden;
}
.compare th, .compare td { padding: 13px 16px; text-align: left; vertical-align: middle; }
.compare thead th {
  background: var(--g50, #f0fdf4); color: var(--g900, #14532d);
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px;
  letter-spacing: -.005em; white-space: nowrap;
}
.compare thead th:not(:first-child), .compare tbody td { text-align: center; width: 132px; }
.compare tbody th {
  font-weight: 500; color: var(--ink, #0f1f16); line-height: 1.5;
}
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--line, #dfe7e1); }
.compare tbody tr:nth-child(even) th, .compare tbody tr:nth-child(even) td { background: #fbfdfb; }
.compare__best { background: rgba(22, 163, 74, .06); }
.compare thead .compare__best { background: var(--g100, #dcfce7); }
.compare__yes { color: var(--g700, #15803d); font-size: 18px; font-weight: 700; line-height: 1; }
.compare__no { color: #9aa8a0; font-size: 18px; line-height: 1; }
.compare__note {
  margin: 14px 0 0; font-size: 14px; line-height: 1.65;
  color: var(--muted, #5a6a61); max-width: 62ch;
}

@media (max-width: 600px) {
  .compare { font-size: 14px; min-width: 420px; }
  .compare th, .compare td { padding: 11px 12px; }
  .compare thead th:not(:first-child), .compare tbody td { width: 84px; }
}

/* On the narrowest phones the table still scrolls, but less far. */
@media (max-width: 400px) {
  .compare { min-width: 340px; font-size: 13.5px; }
  .compare th, .compare td { padding: 10px 9px; }
  .compare thead th:not(:first-child), .compare tbody td { width: 62px; }
  .compare thead th { font-size: 12.5px; }
}

/* --- The free demo strip in the hero --------------------------------- */

.hero__demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 20px; margin-top: 22px; padding: 18px 20px;
  border: 1px solid var(--line, #dfe7e1); border-left: 4px solid var(--g600, #16a34a);
  border-radius: 16px; background: var(--g50, #f0fdf4);
}
.hero__demo-copy { flex: 1 1 260px; min-width: 0; }
.hero__demo-title {
  margin: 0 0 4px; font-family: var(--font-display, inherit);
  font-weight: 700; font-size: 15.5px; color: var(--g900, #14532d);
}
.hero__demo-text {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted, #5a6a61);
}
.hero__demo-slots {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 0;
}
.hero__demo-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--g700, #15803d);
}
.hero__demo-slot {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 11px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line, #dfe7e1);
  font-size: 12.5px; color: var(--ink, #0f1f16); text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.hero__demo-slot strong { font-weight: 700; color: var(--g900, #14532d); }
.hero__demo-slot:hover { border-color: var(--g600, #16a34a); transform: translateY(-1px); }
.hero__demo-btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .hero__demo { padding: 16px; }
  .hero__demo-btn { width: 100%; justify-content: center; }
}

/* Pages that are layouts rather than prose: cart, checkout, account and the
   portal. They keep the standard container width instead of the 860px
   reading measure. */
.entry-content--wide { max-width: var(--container, 1200px); }

/* --- The hero's booking card ----------------------------------------- */

.hero-book {
  background: #fff; border: 1px solid var(--line, #dfe7e1);
  border-radius: 22px; padding: clamp(20px, 2.4vw, 26px);
  box-shadow: 0 24px 60px -32px rgba(15, 31, 22, .35);
  display: grid; gap: 10px; max-width: 360px;
}
.hero-book__eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 5px 12px; border-radius: 999px; justify-self: start;
  background: var(--g50, #f0fdf4); color: var(--g700, #15803d);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.hero-book__eyebrow svg { width: 13px; height: 13px; }
.hero-book__title {
  margin: 0; font-family: var(--font-display, inherit); font-weight: 700;
  font-size: clamp(17px, 2vw, 19px); line-height: 1.3;
  letter-spacing: -.015em; color: var(--g900, #14532d);
}
.hero-book__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted, #5a6a61); }
.hero-book__label {
  margin: 4px 0 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--g700, #15803d);
}
.hero-book__slots { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hero-book__slots a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--line, #dfe7e1); background: #fff;
  font-size: 13px; color: var(--muted, #5a6a61); text-decoration: none;
  transition: border-color .18s, background .18s;
}
.hero-book__slots a strong { color: var(--g900, #14532d); font-weight: 700; }
.hero-book__slots a:hover { border-color: var(--g600, #16a34a); background: var(--g50, #f0fdf4); }
.hero-book__cta { margin-top: 4px; width: 100%; justify-content: center; }
.hero-book__note {
  margin: 0; text-align: center; font-size: 11.5px; color: var(--muted, #5a6a61);
}

@media (max-width: 900px) {
  .hero-book { max-width: none; }
}

/*
 * Compact above 1024px.
 *
 * On a phone the card sits under the headline with the whole screen to
 * itself, and the detail earns its place. On a desktop it sits beside the
 * hero image and the same card became the heaviest thing on the page —
 * competing with the headline it is meant to support. So from the tablet
 * breakpoint up it reduces to the line that matters and the button, and the
 * supporting text, the times and the footnote come off.
 */
@media (min-width: 1025px) {
  .hero-book {
    max-width: 320px; padding: 18px 20px; gap: 12px;
    box-shadow: 0 16px 40px -28px rgba(15, 31, 22, .3);
  }
  .hero-book__text,
  .hero-book__label,
  .hero-book__slots,
  .hero-book__note { display: none; }
  .hero-book__eyebrow { padding: 4px 10px; font-size: 10.5px; }
  .hero-book__title { font-size: 15.5px; line-height: 1.35; }
  .hero-book__cta { min-height: 42px; font-size: 14px; }
}

/* Signed in, there is nothing to explain — just the way through. */
.hero-book--member { gap: 10px; }
.hero-book--member .hero-book__text { font-size: 13px; }

/* --- The account link in the top bar ---------------------------------- */

.topbar__link--account {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
}
.topbar__link--account svg { width: 13px; height: 13px; flex: 0 0 auto; }
.topbar__who {
  max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__link--account:hover { background: rgba(255, 255, 255, .22); }

/* Sign out is there when wanted and never competes for attention. */
.topbar__link--quiet { opacity: .72; }
.topbar__link--quiet:hover { opacity: 1; }

/* The top bar is tight already; below the nav breakpoint the name goes and
   the avatar pill stands on its own rather than pushing the row wider. */
@media (max-width: 640px) {
  .topbar__who { display: none; }
  .topbar__link--account { padding: 3px 8px; }
  .topbar__link--quiet { display: none; }
}

/* --- Elementor's img rule vs the ported design ------------------------ */

/*
 * Elementor ships `.elementor img { height: auto }` in its own stylesheet,
 * which loads after ours and carries specificity 0,1,1 — higher than a single
 * class. Every image the design sizes with height:100% and object-fit:cover
 * therefore collapsed to its intrinsic aspect ratio inside an Elementor page.
 *
 * The hero was the visible casualty: on a phone the background rendered 185px
 * tall inside a 1082px hero, under a 97% white wash, so there appeared to be
 * no image at all. The static site was always fine, which is why this looked
 * like it had been built wrong rather than overridden.
 *
 * Two classes beat a class plus an element, so these put the design back
 * without resorting to !important.
 */
.elementor .hero__bg,
.hero .hero__bg {
  height: 100%; width: 100%; object-fit: cover;
}
.elementor .media img,
.elementor .mega__feature img,
.elementor .brand__mark img,
.elementor .kit__art img,
.elementor .video__facade img {
  height: 100%;
}
.elementor .brand__mark img { object-fit: contain; }

/* With the image filling the hero again, the mobile wash can ease off: it was
   written to sit over a picture, and at 0.97 nothing showed through. The top
   stays dense enough for the headline to hold its contrast. */
@media (max-width: 900px) {
  .hero__wash {
    background: linear-gradient(
      180deg,
      rgba(251, 253, 251, .94) 0%,
      rgba(251, 253, 251, .82) 45%,
      rgba(251, 253, 251, .35) 100%
    );
  }
}

/* --- Form rhythm ------------------------------------------------------ */

/*
 * One shape for every form on the site: fields, then what you are agreeing
 * to, then the button, with the button always full width on a phone and
 * never floating next to something unrelated.
 */
.edufost-form__note--consent,
.form__consent {
  margin: 16px 0 14px; padding: 12px 14px;
  border-radius: 12px; background: var(--g50, #f0fdf4);
  border: 1px solid var(--line, #dfe7e1);
  font-size: 13px; line-height: 1.6; color: var(--muted, #5a6a61);
}
.edufost-form__actions,
.form__actions {
  margin: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.form__actions .btn { min-width: 180px; justify-content: center; }

@media (max-width: 640px) {
  .edufost-form__actions,
  .form__actions { flex-direction: column; align-items: stretch; }
  .edufost-form__actions .btn,
  .form__actions .btn { width: 100%; justify-content: center; min-width: 0; }
}

/* --- Back to top ------------------------------------------------------ */

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g900, #14532d); color: #fff; border: 0;
  box-shadow: 0 10px 26px -12px rgba(15, 31, 22, .6);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--g700, #15803d); }
.to-top svg { width: 18px; height: 18px; }

/* Out of the way of the WooCommerce cart bar on a phone. */
@media (max-width: 640px) {
  .to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s; }
}

/* The refund notice on cart and checkout. */
.wc-refund-note {
  margin: 0 0 22px; padding: 14px 18px;
  border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: 12px; background: #fffbeb;
}
.wc-refund-note p {
  margin: 0; font-size: 13.5px; line-height: 1.65; color: #713f12;
}
.wc-refund-note strong { color: #92400e; }
.wc-refund-note a { color: #92400e; text-decoration: underline; }

/* --- Making the sticky header actually stick -------------------------- */

/*
 * The header has carried position:sticky since the first build and has never
 * once stuck. Two reasons, both invisible in the stylesheet:
 *
 * 1. body has overflow-x:hidden, which makes the body a scroll container, and
 *    a sticky element positions against its nearest scrolling ancestor rather
 *    than the viewport. overflow-x:clip does the same job — stopping sideways
 *    overflow — without creating one.
 *
 * 2. Rendered through Elementor the header sits inside a wrapper chain only
 *    113px tall. A sticky element can only travel within its parent's box, so
 *    with 113px of room it had nowhere to go. The stickiness therefore belongs
 *    on the site-part wrapper, whose parent is the whole page.
 */
body { overflow-x: clip; }

/* Older engines that do not know `clip` keep the old behaviour rather than
   losing overflow protection entirely. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/*
 * Negative top by exactly the height of the top bar. The part sticks with its
 * own top above the viewport, so the helpline row scrolls away and the
 * navigation comes to rest at the top of the screen. Pinning the whole part
 * would hold 113px of chrome on a phone, which is most of the reason sticky
 * headers are disliked.
 */
.edufost-part--header {
  position: sticky; top: calc(var(--topbar-h, 40px) * -1); z-index: 50;
}
.edufost-part--header .elementor,
.edufost-part--header .elementor-element,
.edufost-part--header .elementor-widget-container,
.edufost-part--header .edufost-w--site-header { position: static; }

/* The top bar scrolls away and the header stays, which is the usual and
   least surprising behaviour for a bar this tall. */
.edufost-part--header .header { position: static; }

/* The account button at the end of the top bar. */
.topbar__link--me { display: inline-flex; align-items: center; gap: 7px; }
.topbar__link--me svg { width: 13px; height: 13px; flex: 0 0 auto; }
.topbar__link--me span {
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  .topbar__link--me span { max-width: 9ch; }
}

/* --- The consent tick, wherever it was put --------------------------- */

/*
 * A consent checkbox is just another field in the Elementor repeater, so it
 * landed in whichever two-column grid cell its position happened to give it
 * — beside a phone number on one form, under an email on another. That is
 * the "random" placement.
 *
 * `order` puts it last whatever position it was added in, and spanning both
 * columns stops it sharing a row with a text input. The agreement then always
 * reads immediately above the button, on every form.
 */
.edufost-form .form-grid .consent,
.edufost-form .consent {
  grid-column: 1 / -1;
  order: 90;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--g50, #f0fdf4);
  border: 1px solid var(--line, #dfe7e1);
  align-items: flex-start;
}
.edufost-form .consent span { font-size: 13px; line-height: 1.6; }

/* The note and the buttons come after it. */
.edufost-form__note--consent { order: 91; }
.edufost-form__actions { order: 92; }
.edufost-form__status { order: 93; }

/* Only meaningful when the form itself is the grid; when the grid is an
   inner wrapper the rules above still apply to the cell. */
.edufost-form { display: flex; flex-direction: column; }
.edufost-form .form-grid { order: 10; }

/* --- Cart and checkout width, whatever template the page uses --------- */

/*
 * The wide container was applied in page.php. That works until the page is
 * opened in Elementor, which switches it to the elementor_header_footer
 * template — page.php is then never run, the class is never added, and Woo's
 * own 780px cap comes back with the squeezed order summary. The symptom
 * returns with no CSS having changed, which is why it looked like a
 * regression.
 *
 * WooCommerce puts woocommerce-cart / woocommerce-checkout / woocommerce-
 * account on the body itself, so keying off that works under every template.
 */
body.woocommerce-cart .container,
body.woocommerce-checkout .container,
body.woocommerce-account .container,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
  max-width: var(--container, 1200px);
}

@media (min-width: 1025px) {
  body.woocommerce-cart .wc-block-cart,
  body.woocommerce-checkout .wc-block-checkout,
  body.woocommerce-cart .wp-block-woocommerce-cart,
  body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: var(--container, 1200px);
  }
}

/* 16. Storefront corrections -------------------------------------------
 *
 * Three things the design system never covered, all of which showed on the
 * live site at once.
 *
 * 1. Related products. WooCommerce wraps them in
 *    <section class="related products"> - the wrapper carries the same
 *    `products` class as the list inside it, so the three-column grid rule in
 *    section 7 applied to the wrapper as well. The heading became column one
 *    and all three cards were crushed into column two, overflowing the page.
 *    The wrapper is a plain block; only the list inside it is a grid.
 *
 * 2. Ratings. inc/woocommerce/setup.php drops woocommerce-general, which is
 *    where Woo defines both the star markup styling and the icon font it
 *    depends on. Without it .star-rating printed "Rated 4.00 out of 5" and
 *    the review form star picker printed "1 of 5 stars 2 of 5 stars..." as
 *    running text. Rebuilt here on the star character, so there is no font
 *    file to load and nothing to go missing.
 *
 * 3. Buy now, which the theme adds and therefore has to style.
 * -------------------------------------------------------------------- */

.related.products, .upsells.products, .cross-sells.products {
  display: block; grid-template-columns: none;
  margin: clamp(40px, 6vw, 72px) 0 0; padding: clamp(28px, 4vw, 44px) 0 0;
  border-top: 1px solid var(--line);
}
.related.products > h2, .upsells.products > h2, .cross-sells.products > h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

/* Ratings ------------------------------------------------------------- */
.star-rating {
  position: relative; overflow: hidden; display: block;
  width: 5.9em; height: 1.2em; line-height: 1.2;
  font-size: 14px; letter-spacing: .08em; white-space: nowrap;
  font-family: inherit; font-weight: 400;
}
.star-rating::before {
  content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0;
  color: #dcdfdc;
}
.star-rating > span {
  position: absolute; top: 0; left: 0; overflow: hidden;
  padding-top: 1.5em; /* pushes the literal "Rated 4 out of 5" out of the clipped box */
  font-weight: 400;
}
.star-rating > span::before {
  content: "\2605\2605\2605\2605\2605"; position: absolute; top: 0; left: 0;
  color: var(--amber, #d97706);
}
.kit .star-rating { margin: 2px 0 8px; }
.woocommerce-product-rating {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 13.5px; color: var(--muted);
}
.woocommerce-product-rating .woocommerce-review-link { color: var(--muted); }
.woocommerce-product-rating .woocommerce-review-link:hover { color: var(--g700); }

/* The star picker in the review form. */
.comment-form-rating { margin: 0 0 18px; }
.comment-form-rating label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comment-form-rating select { position: absolute; left: -9999px; }
p.stars { display: inline-flex; margin: 0; gap: 2px; }
p.stars > span { display: inline-flex; gap: 2px; }
p.stars a {
  position: relative; display: block; width: 1.5em; height: 1.5em;
  font-size: 22px; line-height: 1.5; overflow: hidden;
  text-indent: -999em; text-decoration: none; box-shadow: none;
  color: #dcdfdc; transition: color .15s;
}
p.stars a::before {
  content: "\2605"; position: absolute; top: 0; left: 0; right: 0;
  text-indent: 0; text-align: center; line-height: 1.5;
}
p.stars:hover a::before { color: var(--amber, #d97706); }
p.stars a:hover ~ a::before { color: #dcdfdc; }
p.stars.selected a::before { color: var(--amber, #d97706); }
p.stars.selected a.active ~ a::before { color: #dcdfdc; }

/* Reviews list. */
#reviews .commentlist { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
#reviews .commentlist li { margin: 0; }
#reviews .comment_container {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;
}
#reviews .comment_container img.avatar { width: 48px; height: 48px; border-radius: 50%; margin: 0; }
#reviews .comment-text .meta { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
#reviews .comment-text .woocommerce-review__author { color: var(--ink); font-weight: 700; }
#reviews .comment-text .description { color: var(--ink-2); line-height: 1.7; }
#reviews .comment-text .description p:last-child { margin-bottom: 0; }
#review_form_wrapper { background: var(--g50); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 28px); }
#review_form_wrapper .comment-reply-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; display: block; margin-bottom: 14px; }
#review_form_wrapper .comment-form-comment textarea,
#review_form_wrapper .comment-form input[type="text"],
#review_form_wrapper .comment-form input[type="email"] {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; font: inherit; font-size: 15px; outline: none;
}
#review_form_wrapper .comment-form input[type="submit"] {
  display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border: 0; cursor: pointer;
  border-radius: 999px; background: linear-gradient(135deg, var(--g600), var(--g900)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}

/* Buy now ------------------------------------------------------------- */
.single-product .edufost-buy-now {
  height: 48px; padding: 0 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: #fff; color: var(--g900); border: 2px solid var(--g600); cursor: pointer;
  transition: background .2s, color .2s;
}
.single-product .edufost-buy-now:hover { background: var(--g50); }
.edufost-buy-now--loop { margin-top: 8px; }

/* Recent posts in the sidebar ----------------------------------------- */
.widget .w-posts { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.widget .w-post { margin: 0; }
.widget .w-post + .w-post { border-top: 1px solid var(--line-2); }
.widget .w-post__link {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 13px; align-items: center;
  padding: 12px 0; color: inherit; text-decoration: none; font-size: inherit;
}
.widget .w-post:first-child .w-post__link { padding-top: 0; }
.widget .w-post:last-child .w-post__link { padding-bottom: 0; }
.widget .w-post__art {
  width: 62px; height: 62px; border-radius: 12px; overflow: hidden;
  background: var(--g50); display: grid; place-items: center; border: 1px solid var(--line-2);
}
.widget .w-post__art img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.widget .w-post__art .ico { width: 22px; height: 22px; color: var(--g600); }
.widget .w-post__title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 14.5px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
  transition: color .2s;
}
.widget .w-post__link:hover .w-post__title { color: var(--g700); }
.widget .w-post__meta { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.widget .w-post__link:hover .w-post__art img { opacity: .9; }

/* The block widgets WordPress installs by default. */
.widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.widget .wp-block-search__input {
  flex: 1; min-width: 0; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 14.5px; outline: none;
}
.widget .wp-block-search__input:focus { border-color: var(--g600); }
.widget .wp-block-search__button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0 18px;
  background: var(--g700); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.widget .wp-block-latest-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.widget .wp-block-latest-comments__comment { font-size: 14px; line-height: 1.5; min-height: 0; }
.widget .wp-block-latest-comments__comment-meta { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.widget .wp-block-latest-comments__comment-date { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.widget .wp-block-archives-list li, .widget .wp-block-categories-list li { margin: 0; }

/* Everything below the gallery and the summary runs the full width.
 *
 * WooCommerce prints the tabs, the related products and any upsells inside
 * <div class="product">, which section 7 makes a two-column grid so the
 * gallery and the buy box sit side by side. That left the tabs in column one
 * and the related products in column two: a 567px box on a 1280px screen,
 * with three cards squeezed to 174px each. Making the wrapper a block was
 * only half the fix — it still had to escape the column.
 *
 * Written as "everything that is not the gallery or the summary" so a Woo
 * update that adds another section below the fold is full width by default
 * rather than silently landing in a half-width column.
 */
.single-product .product > :not(.woocommerce-product-gallery):not(.summary) {
  grid-column: 1 / -1;
}

/* Widget areas --------------------------------------------------------
 *
 * WordPress 5.8+ installs its starter widgets as blocks: each one is a
 * core/group holding a core/heading, so the title arrives as a page-sized
 * <h2 class="wp-block-heading"> rather than through the theme's before_title
 * markup. On the live site that printed "Recent Posts" at display size above
 * a bare list of links. Both routes are styled here so a widget area looks
 * the same however it was built.
 */
.widget h2, .widget h3, .widget .wp-block-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.3; text-transform: uppercase;
  letter-spacing: .06em; color: var(--g700); margin: 0 0 14px;
}
.widget .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.footer__col .widget h2, .footer__col .widget h3, .footer__col .widget .wp-block-heading { color: #fff; }

/* The shop widget area prints after the storefront wrapper has closed, so it
   brings its own container and lays its widgets out side by side rather than
   stacking them full width. */
.shop-sidebar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.blog-sidebar .widget + .widget { margin-top: 20px; }

/* A widget whose contents were suppressed should not leave a bordered box. */
.widget:empty { display: none; }

/* A card in a product list is not "the product".
 *
 * Section 7 lays the single-product page out with
 * `.single-product .product { display: grid; gap: 64px; align-items: start }`
 * for the gallery-beside-summary split. On a product page the related
 * products are <li class="product"> inside <div class="product">, so that
 * same rule applied to every card in the list: align-items:start collapsed
 * each card's image band to its intrinsic 220px instead of the card's 385px
 * width, and the 64px gap opened a hole between the photograph and the
 * title. The cards looked broken only on single-product pages, which is why
 * the shop grid always looked right.
 *
 * Reset on .products li.product (0,2,1) rather than narrowing the
 * .single-product .product rule (0,2,0): one specificity step higher, and it
 * holds wherever a card is nested in a product page - related, upsells and
 * cross-sells alike. */
.products li.product {
  align-items: stretch;
  gap: 0;
  grid-template-columns: none;
}
.products li.product .kit__art { width: 100%; }

/* "cart" means two different things ------------------------------------
 *
 * The design system uses .cart for the slide-in cart drawer, which is
 * position:fixed, 440px wide, full viewport height and parked off the right
 * edge with translateX(110%) until it is opened (site.css).
 *
 * WooCommerce uses the same bare class for the add-to-cart form on a product
 * page, <form class="cart">, and for the classic cart table,
 * <table class="shop_table ... cart">. Both inherited the drawer: fixed,
 * translated 484px past the right edge of a 1280px window, and therefore
 * invisible. That is why no product page had a working Add to cart button,
 * and why the Buy now button added beside it could not be found either - the
 * markup was on the page the whole time, just parked off-screen.
 *
 * The drawer itself is never rendered by this theme (nothing outputs
 * class="cart" outside WooCommerce), but the rule is left alone rather than
 * edited: site.css is the approved design system, and the fix belongs in the
 * WordPress layer. Qualifying by tag is what separates the two meanings -
 * the drawer is not a <form> and not a <table>.
 */
form.cart, table.cart {
  position: static; inset: auto; transform: none;
  width: auto; height: auto; min-height: 0;
  background: none; box-shadow: none; z-index: auto; transition: none;
}
form.cart {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 12px;
}
table.cart { display: table; width: 100%; }

/* The consent tick in the review form, which arrives as a bare checkbox and
   a label and otherwise wraps underneath itself. Same treatment as the
   theme's own .form__consent. */
.comment-form-cookies-consent {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px; align-items: start; margin: 0 0 18px;
}
.comment-form-cookies-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; }
.comment-form-cookies-consent label { margin: 0; font-size: 13.5px; font-weight: 400; color: var(--muted); line-height: 1.5; }

.woocommerce-Reviews-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; margin: 0 0 20px;
}

/* 17. The payment gateway's own buttons -------------------------------
 *
 * Razorpay prints its two buttons on the pay page with ids and no classes:
 *
 *   <button id="btn-razorpay">Pay Now</button>
 *   <button id="btn-razorpay-cancel" ...>Cancel</button>
 *
 * A theme that styles buttons by class therefore styles neither, and they
 * arrive as two words of running text at the end of the order summary -
 * which is what "Pay Now Cancel" was on the live site. Gateways generally
 * do this, so the bare <button> inside the order pages is covered too
 * rather than only the two ids.
 * -------------------------------------------------------------------- */
#btn-razorpay,
#btn-razorpay-cancel,
.woocommerce-order button:not([class]),
form#order_review button:not([class]),
form.woocommerce-checkout button:not([class]) {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; margin: 6px 8px 6px 0; border: 0; cursor: pointer;
  border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  background: linear-gradient(135deg, var(--g600), var(--g900)); color: #fff;
  transition: filter .2s;
}
#btn-razorpay:hover,
.woocommerce-order button:not([class]):hover { filter: brightness(1.06); }

/* Cancel is not the thing we are asking them to press. */
#btn-razorpay-cancel {
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  font-weight: 600;
}
#btn-razorpay-cancel:hover { background: var(--paper-2); color: var(--ink); }

/* The gateway's lead-in sentence, which sits directly above those buttons. */
.woocommerce-order > p,
.woocommerce-checkout .edufost-gateway-note { font-size: 15px; color: var(--ink-2); }

/* 18. WooCommerce's own order-action links ----------------------------
 *
 * <a class="woocommerce-button button pay order-actions-button">Pay</a>
 * followed immediately by the same for Cancel, with nothing between them:
 * unstyled and with no margin they read as one word, "PayCancel", which is
 * how they arrived in the Actions row of the order table.
 * -------------------------------------------------------------------- */
.woocommerce-button.button,
.order-actions-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; margin: 3px 8px 3px 0;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--g900); font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  text-decoration: none; transition: border-color .2s, background .2s;
}
.woocommerce-button.button:hover,
.order-actions-button:hover { border-color: var(--g600); background: var(--g50); }
.woocommerce-button.button.pay,
.order-actions-button.pay {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--g600), var(--g900));
}
.woocommerce-button.button.pay:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--g600), var(--g900)); }
.order-actions--heading { white-space: nowrap; }